/* ==========================================================================
   Illuminart Group — design system v3 "Architectural editorial"
   Grid: 12 columns, fluid outer margin, 24px gutter. Sections are composed
   asymmetrically on that grid; no shared "label + heading" template.
   Type: Inter Display (light) for display, Inter for text. Single-storey "a"
   (cv11) site-wide to echo the lowercase logotype. No uppercase labels.
   Color: ivory and limestone grounds, graphite and ink, one accent drawn
   from the logo teal, used only for interaction states.
   ========================================================================== */

@font-face { font-family: "Inter Display"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/inter-display-300.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-display-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/inter-500.woff") format("woff"); }

:root {
  --ivory: #f6f4ef;
  --limestone: #ebe7df;
  --stone: #d6d1c6;
  --concrete: #64686a;
  --graphite: #23272a;
  --ink: #141618;
  --teal: #10716f;
  --teal-light: #46c2c0;
  --on-dark: #eeece6;
  --on-dark-2: #a4a7a5;
  --dark-rule: #3a3f42;
  --error: #a3341f;

  --display: "Inter Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --d1: clamp(2.6rem, 1.5rem + 4.1vw, 5.4rem);
  --d2: clamp(2.05rem, 1.35rem + 2.6vw, 3.75rem);
  --d3: clamp(1.45rem, 1.15rem + 1.05vw, 2.15rem);
  --t-lead: clamp(1.125rem, 1.04rem + 0.35vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-meta: 0.8125rem;

  --m: clamp(20px, 4.4vw, 72px);
  --gut: clamp(16px, 1.7vw, 28px);
  --s-xl: clamp(5.5rem, 3.5rem + 7vw, 11rem);
  --s-l: clamp(4rem, 2.8rem + 4.5vw, 7.5rem);
  --s-m: clamp(2.5rem, 2rem + 2vw, 4rem);
  --head: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 1rem); }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--text);
  font-feature-settings: "cv11", "calt", "kern";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
a:hover { color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--teal-light); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; font-family: var(--display); text-wrap: balance; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: var(--ivory); padding: .75rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type roles ---------- */
.d1 { font: 300 var(--d1)/1.0 var(--display); letter-spacing: -0.038em; }
.d2 { font: 300 var(--d2)/1.04 var(--display); letter-spacing: -0.032em; }
.d3 { font: 300 var(--d3)/1.14 var(--display); letter-spacing: -0.02em; }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--concrete); max-width: 38em; }
.small { font-size: var(--t-small); }
.meta { font-size: var(--t-meta); color: var(--concrete); letter-spacing: .005em; }
.muted { color: var(--concrete); }
.measure { max-width: 34em; }

/* ---------- Grid ---------- */
.frame-x { padding-left: max(var(--m), env(safe-area-inset-left, 0px)); padding-right: max(var(--m), env(safe-area-inset-right, 0px)); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid { grid-template-columns: minmax(0, 1fr); } .grid > * { grid-column: 1 / -1 !important; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--head); background: var(--ivory); border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.scrolled .site-header { border-bottom-color: var(--stone); }
.site-header .bar { height: 100%; display: flex; align-items: center; gap: 2rem; }
.logo { display: block; flex: none; }
.logo img { height: 44px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.75rem); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.nav a { text-decoration: none; font-size: var(--t-small); }
.nav ul a { color: var(--concrete); }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--ink); }
.nav ul a[aria-current="page"] { text-decoration: underline; text-underline-offset: .55em; }
.nav .cta { font-weight: 500; color: var(--ink); padding-left: clamp(1.25rem, 2.4vw, 2.5rem); border-left: 1px solid var(--stone); }
.nav .cta:hover { color: var(--teal); }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; font: 500 var(--t-small) var(--text); color: var(--ink); padding: .75rem 0; cursor: pointer; }
.menu-panel { display: none; }
@media (max-width: 900px) {
  .js .nav { display: none; }
  .js .menu-btn { display: block; }
  .menu-panel { position: fixed; inset: var(--head) 0 0 0; z-index: 49; background: var(--ivory); padding-block: 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; flex-direction: column; justify-content: space-between; gap: 2rem; }
  .menu-open .menu-panel { display: flex; }
  .menu-panel ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone); }
  .menu-panel li a { display: block; padding-block: .9rem; border-bottom: 1px solid var(--stone); text-decoration: none; font: 300 2rem/1.15 var(--display); letter-spacing: -0.025em; }
  .menu-panel .contact-lines { display: flex; flex-direction: column; gap: .35rem; font-size: var(--t-small); color: var(--concrete); }
  .menu-panel .contact-lines a { color: var(--ink); text-decoration: none; }
  html:not(.js) .nav { flex-wrap: wrap; }
}
@media (max-width: 900px) { html:not(.js) .site-header { height: auto; position: static; } html:not(.js) .site-header .bar { flex-wrap: wrap; padding-block: 1rem; } }

/* ---------- Actions ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.25rem; min-height: 56px; padding: 0 1.4rem; background: var(--ink); color: var(--ivory); border: 1px solid var(--ink); font: 500 var(--t-small)/1 var(--text); text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.btn::after { content: ""; width: 14px; height: 9px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5h12.5M9 1l3.5 3.5L9 8' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M0 4.5h12.5M9 1l3.5 3.5L9 8' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s ease; }
.btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn:hover::after { transform: translateX(3px); }
.on-dark .btn { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.on-dark .btn:hover { background: var(--teal-light); border-color: var(--teal-light); color: var(--ink); }
.link { font-weight: 500; text-decoration: underline; text-underline-offset: .4em; text-decoration-color: var(--stone); transition: text-decoration-color .2s ease, color .2s ease; }
.link:hover { text-decoration-color: currentColor; }
.on-dark .link { text-decoration-color: var(--dark-rule); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

/* ---------- Photography ---------- */
.ph { position: relative; overflow: hidden; background: var(--limestone); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.r-3-2 { aspect-ratio: 3 / 2; } .r-1-1 { aspect-ratio: 1 / 1; } .r-4-5 { aspect-ratio: 4 / 5; } .r-16-9 { aspect-ratio: 16 / 9; } .r-5-4 { aspect-ratio: 5 / 4; }
/* Art-direction frame: shown in design review builds only, never in a launch build */
.ph.pending { background: #dcd7cc; display: flex; align-items: flex-end; }
.ph.pending .brief { padding: clamp(1rem, 2vw, 1.75rem); font-size: var(--t-meta); line-height: 1.5; color: #4c5052; max-width: 30em; }
.ph.pending .brief strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: .2rem; }

/* ---------- Hero (editorial split) ---------- */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); min-height: clamp(560px, calc(100svh - var(--head) - 132px), 860px); }
.hero .copy { grid-column: 1 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding-block: clamp(2.5rem, 5vh, 4.5rem) clamp(2rem, 4vh, 3.25rem); }
.hero .copy .meta { color: var(--concrete); }
.hero h1 { margin-top: 1.5rem; }
.hero h1 .line { display: block; }
.hero .lead { margin-top: 1.75rem; max-width: 27em; }
.hero .actions { margin-top: 2.5rem; }
.hero .media { grid-column: 6 / -1; margin-right: calc(-1 * max(var(--m), env(safe-area-inset-right, 0px))); }
.hero .media .ph { height: 100%; min-height: 100%; }
.hero .media img { object-position: 70% 50%; }
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero .copy { grid-column: 1; padding-block: 2rem 2.5rem; gap: 0; }
  .hero .media { grid-column: 1; margin-left: calc(-1 * max(var(--m), env(safe-area-inset-left, 0px))); }
  .hero .media .ph { aspect-ratio: 4 / 3; height: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .media img { animation: reveal 1.6s cubic-bezier(.2,.65,.2,1) both; }
  @keyframes reveal { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
}

/* Sector index directly under the hero */
.sector-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.sector-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.4rem 1.25rem 1.6rem 0; text-decoration: none; border-right: 1px solid var(--stone); }
.sector-index li + li a { padding-left: 1.25rem; }
.sector-index li:last-child a { border-right: 0; }
.sector-index ul { display: contents; }
.sector-index li { list-style: none; min-width: 0; }
.sector-index .name { font: 300 var(--d3)/1.1 var(--display); letter-spacing: -0.02em; }
.sector-index .arrow { color: var(--concrete); transition: transform .25s ease, color .25s ease; }
.sector-index a:hover .arrow { transform: translateX(4px); color: var(--teal); }
@media (max-width: 960px) { .sector-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sector-index li:nth-child(2) a { border-right: 0; } .sector-index li:nth-child(-n+2) a { border-bottom: 1px solid var(--stone); } .sector-index li:nth-child(3) a { padding-left: 0; } }
@media (max-width: 420px) { .sector-index { grid-template-columns: minmax(0, 1fr); } .sector-index a, .sector-index li + li a { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--stone); } }

/* ---------- Statement + title block ---------- */
.statement { padding-block: var(--s-xl) var(--s-l); }
.statement .d2 { grid-column: 1 / span 10; max-width: 19.5em; }
.titleblock { margin: var(--s-m) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--stone); }
.titleblock > div { padding: 1.1rem 1.25rem 1.35rem 0; border-right: 1px solid var(--stone); min-width: 0; }
.titleblock > div + div { padding-left: 1.25rem; }
.titleblock > div:last-child { border-right: 0; }
.titleblock dt { font-size: var(--t-meta); color: var(--concrete); }
.titleblock dd { margin: .45rem 0 0; font-size: var(--t-small); font-weight: 500; line-height: 1.4; font-feature-settings: "cv11", "tnum"; }
@media (max-width: 960px) { .titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); } .titleblock > div, .titleblock > div + div { padding: 1rem 1rem 1.1rem 0; border-right: 0; border-bottom: 1px solid var(--stone); } .titleblock > div:nth-child(odd) { border-right: 1px solid var(--stone); } .titleblock > div:nth-child(even) { padding-left: 1rem; } .titleblock > div:last-child { border-bottom: 0; } }

/* ---------- Sector panels ---------- */
.sectors { padding-bottom: var(--s-xl); }
.panel { align-items: center; row-gap: 2rem; }
.panel + .panel { margin-top: var(--s-l); }
.panel .ph { grid-column: 1 / span 7; }
.panel .txt { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 1.4rem; }
.panel.flip .ph { grid-column: 6 / span 7; grid-row: 1; }
.panel.flip .txt { grid-column: 1 / span 4; grid-row: 1; }
.panel .types { list-style: none; margin: .25rem 0 0; padding: 0; border-top: 1px solid var(--stone); }
.panel .types li { padding-block: .65rem; border-bottom: 1px solid var(--stone); font-size: var(--t-small); }
.panel .ph img { transition: transform 1.4s cubic-bezier(.2,.65,.2,1); }
.panel:hover .ph img { transform: scale(1.02); }
@media (max-width: 960px) { .panel .ph, .panel.flip .ph { grid-column: 1 / -1; grid-row: 1; } .panel .txt, .panel.flip .txt { grid-column: 1 / span 5; grid-row: 2; } }

/* ---------- Sector plates (home) ---------- */
.plates { row-gap: var(--s-l); align-items: end; }
.plate { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.plate.c-wide:nth-child(1) { grid-column: 1 / span 7; }
.plate.c-narrow:nth-child(2) { grid-column: 9 / span 4; }
.plate.c-narrow:nth-child(3) { grid-column: 1 / span 4; }
.plate.c-wide:nth-child(4) { grid-column: 6 / span 7; }
.plate-img { display: block; }
.plate-img img { transition: transform 1.4s cubic-bezier(.2,.65,.2,1); }
.plate:hover .plate-img img { transform: scale(1.02); }
.plate-txt { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; max-width: 34em; }
.plate-txt h3 a { text-decoration: none; }
.plate-txt h3 a:hover { color: var(--teal); }
@media (max-width: 960px) { .plate.c-wide:nth-child(n), .plate.c-narrow:nth-child(n) { grid-column: 1 / -1; } .plate .r-1-1 { aspect-ratio: 4 / 3; } }

/* ---------- Capabilities ---------- */
.capabilities { background: var(--limestone); padding-block: var(--s-l); }
.cap-head { align-items: end; row-gap: 1.5rem; margin-bottom: var(--s-m); }
.cap-head h2 { grid-column: 1 / span 5; }
.cap-head p { grid-column: 7 / span 5; }
.cap-body { row-gap: 3rem; align-items: start; }
.cap-fig { grid-column: 1 / span 4; margin: 0; display: flex; flex-direction: column; gap: .8rem; position: sticky; top: calc(var(--head) + 2rem); }
.cap-cols { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem var(--gut); }
.cap-cols section:last-child { grid-column: 1 / -1; }
.cap-cols section:last-child ul { columns: 2; column-gap: var(--gut); }
.cap-cols section:last-child li { break-inside: avoid; }
.cap-cols section { padding-block: 0; border-top: 1px solid var(--ink); padding-top: 1.25rem; }
.cap-cols h3 { font: 300 var(--d3)/1.15 var(--display); letter-spacing: -0.02em; margin-bottom: 1.25rem; }
.cap-cols ul { list-style: none; margin: 0; padding: 0; }
.cap-cols li { padding-block: .62rem; border-top: 1px solid var(--stone); font-size: var(--t-small); }
.cap-foot { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; align-items: baseline; }
@media (max-width: 960px) { .cap-fig { position: static; grid-column: 1 / -1; } .cap-fig .ph { aspect-ratio: 4 / 3; } .cap-cols { grid-column: 1 / -1; } }
@media (max-width: 620px) { .cap-cols { grid-template-columns: minmax(0, 1fr); } .cap-cols section:last-child ul { columns: 1; } }

/* ---------- Client roster ---------- */
.clients { padding-block: var(--s-xl) var(--s-l); }
.clients > .grid > h2 { grid-column: 1 / span 4; }
.roster { grid-column: 5 / -1; margin: 0; }
.roster > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); gap: .5rem var(--gut); padding-block: 1.25rem 1.4rem; border-top: 1px solid var(--stone); }
.roster > div:first-child { border-top-color: var(--ink); }
.roster dt { font-size: var(--t-meta); color: var(--concrete); padding-top: .55rem; }
.roster dd { margin: 0; font: 300 var(--d3)/1.3 var(--display); letter-spacing: -0.018em; }

.roster dd span:not(:last-child)::after { content: ","; }
.roster.full dd { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.6rem); }
.roster-note { grid-column: 5 / -1; margin-top: 1.5rem; }
@media (max-width: 960px) { .clients > .grid > h2, .roster, .roster-note { grid-column: 1 / -1; } .clients > .grid > h2 { margin-bottom: 2rem; } }
@media (max-width: 620px) { .roster > div { grid-template-columns: minmax(0, 1fr); } .roster dt { padding-top: 0; } }

/* ---------- Process index ---------- */
.process { padding-block: var(--s-l) var(--s-xl); border-top: 1px solid var(--stone); }
.process > .grid > .head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 1.5rem; align-self: start; position: sticky; top: calc(var(--head) + 2rem); }
.steps { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.5rem minmax(0, 5fr) minmax(0, 4fr); gap: .35rem var(--gut); align-items: baseline; padding-block: 1.35rem 1.5rem; border-top: 1px solid var(--stone); }
.steps li:first-child { border-top-color: var(--ink); }
.steps li::before { content: counter(s); font-size: var(--t-meta); color: var(--concrete); font-feature-settings: "tnum"; }
.steps h3 { font: 300 var(--d3)/1.15 var(--display); letter-spacing: -0.02em; }
.steps p { font-size: var(--t-small); color: var(--concrete); }
.steps.detailed li { grid-template-columns: 2.5rem minmax(0, 4fr) minmax(0, 5fr); }
.steps.detailed .out { grid-column: 3; font-weight: 500; color: var(--ink); font-size: var(--t-meta); }
@media (max-width: 960px) { .process > .grid > .head { position: static; grid-column: 1 / -1; margin-bottom: 2rem; } .steps { grid-column: 1 / -1; } }
@media (max-width: 620px) { .steps li, .steps.detailed li { grid-template-columns: 2rem minmax(0, 1fr); } .steps p, .steps.detailed .out { grid-column: 2; } }

/* ---------- Studio (dark) ---------- */
.on-dark { background: var(--graphite); color: var(--on-dark); }
.on-dark .muted, .on-dark .meta, .on-dark .lead { color: var(--on-dark-2); }
.on-dark a:hover { color: var(--teal-light); }
.studio { padding-block: var(--s-l); }
.studio .grid { row-gap: 2.5rem; }
.studio .where { grid-column: 1 / span 6; }
.studio .where address { font-style: normal; margin-top: 1.5rem; }
.studio .what { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 1.75rem; align-self: end; }
@media (max-width: 960px) { .studio .where, .studio .what { grid-column: 1 / -1; } }

/* ---------- Closing ---------- */
.closing { padding-block: var(--s-xl); }
.closing .grid { row-gap: 3rem; align-items: end; }
.closing h2 { grid-column: 1 / span 7; }
.closing .lines { grid-column: 9 / span 4; margin: 0; }
.closing .lines > div { padding-block: .9rem; border-top: 1px solid var(--stone); display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; }
.closing .lines dt { font-size: var(--t-meta); color: var(--concrete); padding-top: .15rem; }
.closing .lines dd { margin: 0; font-size: var(--t-small); overflow-wrap: anywhere; }
.closing .lines dd a { text-decoration: none; }
.closing .actions { grid-column: 1 / span 7; }
@media (max-width: 960px) { .closing h2, .closing .lines, .closing .actions { grid-column: 1 / -1; } }

/* ---------- Page heads ---------- */
.page-head { padding-block: clamp(3rem, 2rem + 4vw, 6.5rem) var(--s-m); row-gap: 2rem; align-items: end; }
.page-head h1 { grid-column: 1 / span 7; }
.page-head .lead { grid-column: 8 / span 5; }
.page-index { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding-top: 1.25rem; margin-top: 1rem; border-top: 1px solid var(--ink); font-size: var(--t-small); }
.page-index a { text-decoration: none; color: var(--concrete); }
.page-index a:hover { color: var(--ink); }
@media (max-width: 960px) { .page-head h1, .page-head .lead { grid-column: 1 / -1; } }

/* ---------- Expertise ---------- */
.block { padding-block: var(--s-l); }
.block + .block { border-top: 1px solid var(--stone); }
.block-head { margin-bottom: var(--s-m); row-gap: 1.25rem; align-items: end; }
.block-head h2 { grid-column: 1 / span 6; }
.block-head p { grid-column: 8 / span 5; }
@media (max-width: 960px) { .block-head h2, .block-head p { grid-column: 1 / -1; } }
.defs { margin: 0; }
.defs > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: .4rem; padding-block: 1.2rem 1.35rem; border-top: 1px solid var(--stone); }
.defs > div:first-child { border-top-color: var(--ink); }
.defs dt { grid-column: 1 / span 5; font: 300 var(--d3)/1.2 var(--display); letter-spacing: -0.02em; }
.defs dd { grid-column: 7 / span 6; margin: 0; color: var(--concrete); font-size: var(--t-small); padding-top: .4rem; }
@media (max-width: 960px) { .defs > div { grid-template-columns: minmax(0, 1fr); } .defs dt, .defs dd { grid-column: 1; } .defs dd { padding-top: 0; } }
.matrix-wrap { overflow-x: auto; position: relative; }
.matrix { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-small); }
.matrix th, .matrix td { padding: .85rem .75rem; border-bottom: 1px solid var(--stone); text-align: center; font-weight: 400; }
.matrix thead th { border-bottom: 1px solid var(--ink); font-size: var(--t-meta); color: var(--concrete); }
.matrix tbody th { text-align: left; padding-left: 0; }
.matrix thead th:first-child { text-align: left; padding-left: 0; }
.matrix td { width: 12%; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); vertical-align: middle; }
.dash { display: inline-block; width: 10px; height: 1px; background: var(--stone); vertical-align: middle; }

/* ---------- Contact ---------- */
.contact-grid { padding-bottom: var(--s-xl); row-gap: 4rem; align-items: start; }
.contact-grid form { grid-column: 1 / span 7; }
.contact-grid .direct { grid-column: 9 / span 4; }
@media (max-width: 960px) { .contact-grid form, .contact-grid .direct { grid-column: 1 / -1; } }
form { display: flex; flex-direction: column; gap: 2.25rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 1rem; font-size: var(--t-meta); color: var(--concrete); }
.purpose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.purpose label { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.25rem 1.25rem 0; cursor: pointer; border-bottom: 1px solid var(--stone); }
.purpose label + label { padding-left: 1.25rem; border-left: 1px solid var(--stone); }
.purpose input { margin-top: .45rem; accent-color: var(--teal); }
.purpose strong { display: block; font: 300 var(--d3)/1.15 var(--display); letter-spacing: -0.02em; }
.purpose span span { display: block; margin-top: .3rem; font-size: var(--t-meta); color: var(--concrete); }
.purpose label:has(input:checked) { border-bottom: 2px solid var(--ink); }
@media (max-width: 620px) { .purpose { grid-template-columns: minmax(0, 1fr); } .purpose label + label { padding-left: 0; border-left: 0; } }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem var(--gut); }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .fields { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field label { font-size: var(--t-meta); color: var(--concrete); }
.field .opt { color: #8a8d8e; }
.field input, .field select, .field textarea { font: 400 1.0625rem/1.4 var(--text); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #9a9c99; border-radius: 0; padding: .6rem 0 .7rem; width: 100%; -webkit-appearance: none; appearance: none; }
.field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364686a' stroke-width='1.2'/%3E%3C/svg%3E") right .2rem center / 10px 6px no-repeat; padding-right: 1.5rem; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--teal); padding-bottom: calc(.7rem - 1px); }
.field [aria-invalid="true"] { border-bottom-color: var(--error); }
.field .err { font-size: var(--t-meta); color: var(--error); }
.field .err:empty { display: none; }
.field .hint { font-size: var(--t-meta); color: var(--concrete); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.form-foot p { font-size: var(--t-meta); color: var(--concrete); }
.notice { border-top: 2px solid var(--teal); background: var(--limestone); padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .75rem; }
.notice.error { border-top-color: var(--error); }
.notice h2 { font: 300 var(--d3)/1.2 var(--display); letter-spacing: -0.02em; }
.notice pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: .8125rem/1.5 ui-monospace, Menlo, monospace; background: var(--ivory); border: 1px solid var(--stone); padding: .9rem; max-height: 16rem; overflow: auto; }
.direct { margin: 0; }
.direct > div { padding-block: 1.1rem 1.25rem; border-top: 1px solid var(--stone); }
.direct > div:first-child { border-top-color: var(--ink); }
.direct dt { font-size: var(--t-meta); color: var(--concrete); margin-bottom: .35rem; }
.direct dd { margin: 0; }
.direct .big { font: 300 var(--d3)/1.2 var(--display); letter-spacing: -0.02em; text-decoration: none; overflow-wrap: anywhere; }
.direct address { font-style: normal; }

/* ---------- Prose ---------- */
.prose { grid-column: 4 / span 7; display: flex; flex-direction: column; gap: 1.1rem; padding-bottom: var(--s-xl); }
.prose h2 { font: 300 var(--d3)/1.2 var(--display); letter-spacing: -0.02em; margin-top: 1.75rem; }
@media (max-width: 960px) { .prose { grid-column: 1 / -1; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--limestone); color: var(--concrete); padding-block: var(--s-m) 2rem; font-size: var(--t-small); border-top: 1px solid var(--stone); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--teal); }
.site-footer .grid { row-gap: 2.5rem; }
.foot-id { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 1.25rem; }
.foot-id img { height: 52px; width: auto; }
.foot-col { grid-column: span 2; }
.foot-col:nth-of-type(2) { grid-column: 5 / span 2; }
.foot-col h2 { font: 400 var(--t-meta)/1.4 var(--text); color: var(--concrete); margin-bottom: .8rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.foot-col address { font-style: normal; color: var(--ink); line-height: 1.55; }
.foot-base { margin-top: var(--s-m); padding-top: 1.25rem; border-top: 1px solid var(--stone); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; font-size: var(--t-meta); }
@media (max-width: 960px) { .foot-id { grid-column: 1 / -1; } .foot-col, .foot-col:nth-of-type(2) { grid-column: span 3; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* Per-photo focal points */
#industrial .ph img { object-position: 78% 60%; }
#hospitality .ph img { object-position: 40% 55%; }