/* =============================================================
   SQUARE SPACE — Architects & Consulting Engineers
   style.css — core design system, layout & components
   Handcrafted. No frameworks. CSS custom properties throughout.
   ============================================================= */

/* -------------------------------------------------------------
   0. DESIGN TOKENS
   ------------------------------------------------------------- */
:root {
  /* — Warm neutral / dark-luxury palette — */
  --ink:        #110f0d;   /* near-black, warm — lifted slightly for grid legibility */
  --ink-2:      #191613;   /* raised surface  */
  --ink-3:      #221e19;   /* cards / lines   */
  --paper:      #f5f1e9;   /* warm off-white  */
  --paper-2:    #ece6da;
  --sand:       #d7ccb9;
  --stone:      #9b8f7c;   /* muted text      */
  --stone-2:    #6f6557;
  --line:       rgba(245,241,233,0.12);
  --line-soft:  rgba(245,241,233,0.06);

  /* — Accent: architectural bronze / clay — */
  --bronze:     #c39a63;
  --bronze-2:   #b0814a;
  --clay:       #c25f3c;
  --espresso:   #2b1e13;   /* darkest facet tone — matches the logotype's shadow face */

  /* — Semantic — */
  --bg:         var(--ink);
  --fg:         var(--paper);
  --muted:      var(--stone);
  --accent:     var(--bronze);

  /* — Type — a three-tier luxury system —
     display : Sora     — geometric, architectural, for headings & scale
     sans    : Inter     — precise, humanist, for body copy & UI
     label   : Plus Jakarta Sans — tracked micro-labels, indices, footer caps
     All three are loaded as true variable fonts (wght ranges), so
     font-weight itself can be transitioned smoothly on hover/focus. */
  --display: "Sora", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --label:   "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --mono:    var(--label); /* retained for existing call-sites; no longer monospace */

  /* — Fluid type scale (clamp) — */
  --fs-mega:  clamp(3.4rem, 11.5vw, 11rem);
  --fs-h1:    clamp(2.6rem, 8vw, 7rem);
  --fs-h2:    clamp(2rem, 5vw, 4.25rem);
  --fs-h3:    clamp(1.5rem, 3vw, 2.4rem);
  --fs-lead:  clamp(1.15rem, 1.7vw, 1.6rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.12rem);
  --fs-label: 0.72rem;

  /* — Spacing rhythm — */
  --gutter:   clamp(1.25rem, 4vw, 4.5rem);
  --section:  clamp(5rem, 12vw, 11rem);
  --maxw:     1680px;
  --radius:   2px;

  /* — Motion — */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-2:   cubic-bezier(0.7, 0, 0.2, 1);
  --dur:      0.8s;
}

/* -------------------------------------------------------------
   1. RESET
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv05", "cv11";
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--bronze); color: var(--ink); }

.skip-link {
  position: fixed;
  z-index: 10001;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 4px;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* -------------------------------------------------------------
   2. TYPOGRAPHY
   A deliberate hierarchy: Sora carries scale and presence (display,
   h1-h2), settles slightly heavier at h3-h4 for section/card titles,
   Inter carries every sentence people actually read. Weight and
   tracking are both transition-ready — because the fonts are true
   variable instances, hovering a heading or link eases its weight
   the way ink settles, not a hard cut.
   ------------------------------------------------------------- */
h1, h2 { font-family: var(--display); font-weight: 500; line-height: 1.06; letter-spacing: -0.02em; transition: font-weight .5s ease, letter-spacing .5s var(--ease); }
h3, h4 { font-family: var(--display); font-weight: 550; line-height: 1.15; letter-spacing: -0.01em; transition: font-weight .4s ease, letter-spacing .4s var(--ease); }
.serif-italic { font-style: italic; font-optical-sizing: auto; }
p { text-wrap: pretty; }

/* Premium heading hover — a quiet settle, not a jolt: tracking tightens,
   weight gains a touch of presence. Applies to interactive/section
   headings only (kept off plain body flow via the .sec-head__title /
   [data-hover-title] hooks so it never feels like a random UI glitch). */
@media (hover: hover) {
  .sec-head__title:hover, [data-hover-title]:hover { letter-spacing: -0.03em; font-weight: 600; }
}

.label {
  font-family: var(--label);
  font-size: var(--fs-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 550;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--paper-2); font-weight: 400; letter-spacing: -0.005em; }

/* word/line wrappers for split-text */
.split-line { display: block; overflow: hidden; }
.split-mask { display: block; }

/* Per-character reveal targets (SplitType "chars") — set to their
   resting state here; JS animates from a hidden state via GSAP so
   there is no flash-of-unsplit-text. */
.eyebrow .char, [data-split-chars] .char { display: inline-block; will-change: transform, opacity; }

/* Hero title — a slow, soft light pass across the glyphs themselves.
   Only the plain text picks this up; the <em> keeps its solid bronze
   because color/background are not inherited the same way once an
   element sets its own. Reduced motion disables it outright below. */
.hero__title .row > span {
  background-image: linear-gradient(115deg, var(--paper) 38%, #fff8ec 50%, var(--paper) 62%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: heroShine 11s linear infinite;
}
.hero__title em { -webkit-text-fill-color: var(--bronze); }
@supports not (background-clip: text) {
  .hero__title .row > span { color: var(--paper); -webkit-text-fill-color: var(--paper); animation: none; background: none; }
}

/* -------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3rem, 7vw, 6rem); }
.divider { height: 1px; background: var(--line); border: 0; }

.grid { display: grid; gap: var(--gutter); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--bronze); display: inline-block;
}

/* -------------------------------------------------------------
   4. PRELOADER
   ------------------------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  display: grid; place-items: center;
  overflow: hidden;
}
.loader__inner { text-align: center; width: min(80vw, 520px); }
.loader__mark {
  font-family: var(--display); font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 2rem;
}
.loader__mark .dot { color: var(--bronze); }
.loader__bar { height: 1px; width: 100%; background: var(--line); position: relative; overflow: hidden; }
.loader__bar span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--bronze); }
.loader__pct {
  margin-top: 1rem; display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--muted);
}
.loader__count { font-variant-numeric: tabular-nums; }
/* 3D intro scene (homepage only - loader opts in via data-loader-3d) */
.loader[data-loader-3d] {
  background:
    radial-gradient(80% 62% at 68% 45%, rgba(195,154,99,.075), transparent 68%),
    radial-gradient(55% 48% at 26% 72%, rgba(111,101,87,.08), transparent 72%),
    linear-gradient(180deg, #0d0c0a 0%, var(--ink) 58%, #17130f 100%);
}
.loader__scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: 0; will-change: opacity, transform;
}
.loader[data-loader-3d] .loader__inner {
  --loader-track: min(520px, calc(100vw - var(--gutter) - var(--gutter)));
  position: absolute; inset: 0; z-index: 1; width: 100%;
  display: grid; place-items: center; pointer-events: none;
}
.loader[data-loader-3d] .loader__mark {
  width: clamp(5.25rem, 7.4vw, 6.75rem);
  margin: 0;
  line-height: 0;
  will-change: transform, opacity;
}
.loader[data-loader-3d] .loader__logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 .5rem 1rem rgba(225, 193, 153, .1));
}
.loader[data-loader-3d] .loader__logo-piece {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.loader[data-loader-3d] .loader__skip {
  position: absolute;
  top: max(1.25rem, env(safe-area-inset-top));
  right: max(1.25rem, env(safe-area-inset-right));
  z-index: 3;
  min-height: 44px;
  padding: .65rem .9rem;
  border: 1px solid rgba(195, 154, 99, .25);
  border-radius: 0;
  background: rgba(17, 15, 13, .2);
  color: rgba(232, 226, 216, .7);
  font-family: var(--mono);
  font-size: .61rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition:
    color .24s ease,
    border-color .24s ease,
    background-color .24s ease;
  will-change: transform, opacity;
  pointer-events: auto;
}
.loader[data-loader-3d] .loader__skip:hover {
  color: var(--paper);
  border-color: rgba(195, 154, 99, .62);
  background: rgba(195, 154, 99, .08);
}
.loader[data-loader-3d] .loader__skip:focus-visible {
  outline: 1px solid var(--bronze);
  outline-offset: 4px;
  color: var(--paper);
}
.loader[data-loader-3d] .loader__bar {
  position: absolute; left: 50%; bottom: clamp(4.4rem, 8vh, 6.2rem);
  width: var(--loader-track); transform: translateX(-50%);
}
.loader[data-loader-3d] .loader__pct {
  position: absolute; left: 50%; bottom: clamp(2.4rem, 4.5vh, 3.6rem);
  width: var(--loader-track); transform: translateX(-50%);
  margin: 0;
}
@media (max-width: 520px) {
  .loader[data-loader-3d] .loader__inner { --loader-track: calc(100vw - 2.5rem); }
  .loader[data-loader-3d] .loader__mark { width: clamp(4.75rem, 22vw, 5.8rem); }
  .loader[data-loader-3d] .loader__pct { font-size: .58rem; letter-spacing: .14em; }
  .loader[data-loader-3d] .loader__skip {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
  }
}

/* -------------------------------------------------------------
   5. CUSTOM CURSOR — Square, from Space (in three dimensions)
   Same core idea: four short corner brackets sit apart at rest —
   open register marks, "space" made visible — and grow to meet
   edge-to-edge into a complete "square" on anything interactive.
   Now it actually has depth: transform-style:preserve-3d turns the
   bracket layer, the tint (::before) and the media gradient (::after)
   into three stacked panes at different translateZ depths, so a
   single perspective()+rotateX+rotateY on the whole instrument reads
   as a small tilting object, not a flat decal. The tilt itself is
   interactive, not decorative: while travelling freely it banks with
   its own velocity (a weighted, physical feel); the moment it lands
   on something, it re-reads as the tilt toward wherever the pointer
   sits inside that element, like it's tipping to inspect the object
   underneath. Position, scale and both rotations are eased every
   frame into one composited transform (GPU-accelerated — translate3d,
   rotateX/Y, scale — never a layout write). A quick press-in on
   mousedown adds tactile, physical feedback.
   ------------------------------------------------------------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9998;
  width: 18px; height: 18px;
  pointer-events: none; will-change: transform;
  transform-style: preserve-3d;
  mix-blend-mode: difference;
  opacity: 0;
  background:
    linear-gradient(var(--paper), var(--paper)) left top / 5px 1.5px no-repeat,
    linear-gradient(var(--paper), var(--paper)) left top / 1.5px 5px no-repeat,
    linear-gradient(var(--paper), var(--paper)) right top / 5px 1.5px no-repeat,
    linear-gradient(var(--paper), var(--paper)) right top / 1.5px 5px no-repeat,
    linear-gradient(var(--paper), var(--paper)) left bottom / 5px 1.5px no-repeat,
    linear-gradient(var(--paper), var(--paper)) left bottom / 1.5px 5px no-repeat,
    linear-gradient(var(--paper), var(--paper)) right bottom / 5px 1.5px no-repeat,
    linear-gradient(var(--paper), var(--paper)) right bottom / 1.5px 5px no-repeat;
  transition: opacity .3s ease, background-size .45s var(--ease);
}
.cursor::before {
  content: ""; position: absolute; inset: 0;
  transform: translateZ(-4px);
  background-color: transparent;
  transition: background-color .4s var(--ease);
}
.cursor::after {
  content: ""; position: absolute; inset: 0;
  transform: translateZ(-9px);
  background: linear-gradient(135deg, var(--sand) 0%, var(--bronze) 50%, var(--espresso) 100%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}

/* Any interactive surface — the brackets grow until they meet: space becomes square */
.cursor.is-link, .cursor.is-btn, .cursor.is-card, .cursor.is-media {
  background-size:
    9px 1.5px, 1.5px 9px, 9px 1.5px, 1.5px 9px,
    9px 1.5px, 1.5px 9px, 9px 1.5px, 1.5px 9px;
}

/* Links — the square resolves, no tint yet: defined, but still just space */
.cursor.is-link::before { background-color: transparent; }

/* Buttons — the resolved square fills with the brand's brightest tone (breathes gently, scale in JS) */
.cursor.is-btn::before { background-color: rgba(195,154,99,.22); }

/* Project cards — a deeper, quieter tint */
.cursor.is-card::before { background-color: rgba(176,129,74,.18); }

/* Media / imagery — a light tint plus the full three-tone gradient, the one moment of full colour */
.cursor.is-media::before { background-color: rgba(195,154,99,.1); }
.cursor.is-media::after { opacity: .8; }

/* Press feedback — a quick tactile push, paired with a Z-punch in JS */
.cursor.is-pressed::before { background-color: rgba(195,154,99,.32); }

html.has-cursor, html.has-cursor * { cursor: none !important; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* -------------------------------------------------------------
   6. HEADER / NAV
   ------------------------------------------------------------- */
.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  padding-block: clamp(1rem, 2vw, 1.6rem);
  transition: transform .5s var(--ease), background .5s var(--ease), padding .5s var(--ease);
  mix-blend-mode: normal;
}
.header.is-hidden { transform: translateY(-105%); }
.header.is-solid { background: rgba(12,11,10,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); padding-block: 0.85rem; }
.header__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand .dot { color: var(--bronze); }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.75rem); }
.nav a { position: relative; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.05em; padding-block: 0.4rem; color: var(--paper); transition: font-weight .35s ease, letter-spacing .35s var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) { .nav a:hover, .nav a[aria-current="page"] { font-weight: 600; letter-spacing: 0.02em; } }
.nav-cta { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--line); padding: 0.7rem 1.2rem; border-radius: 100px; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s; }
.nav-cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.burger { display: none; width: 44px; height: 44px; position: relative; z-index: 110; }
.burger span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--paper); transition: transform .45s var(--ease), opacity .3s; }
.burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { bottom: 17px; }
.burger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { bottom: 21px; transform: rotate(-45deg); }

/* Mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 105; background: var(--ink-2);
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gutter);
  pointer-events: none;
}
.menu.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu a { font-family: var(--display); font-size: clamp(2.4rem, 10vw, 4.5rem); line-height: 1.15; color: var(--paper); display: block; }
.menu a .idx { font-family: var(--mono); font-size: 0.8rem; color: var(--bronze); vertical-align: super; margin-right: 0.6rem; }
.menu__meta { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--muted); }

/* -------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--label); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 1.1rem 1.9rem; border-radius: 100px; border: 1px solid var(--line);
  overflow: hidden; isolation: isolate; transition: color .5s var(--ease), border-color .5s, font-weight .5s ease, letter-spacing .5s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); transform: translateY(101%); transition: transform .55s var(--ease); }
.btn:hover { color: var(--ink); border-color: var(--paper); font-weight: 650; letter-spacing: 0.14em; }
.btn:hover::before { transform: translateY(0); }
.btn--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--solid::before { background: var(--bronze); }
.btn--solid:hover { color: var(--ink); }
.btn .arrow { transition: transform .5s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.magnetic { display: inline-block; will-change: transform; }

.link-underline { position: relative; display: inline-block; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* -------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------- */
.hero { min-height: 100svh; position: relative; display: block; overflow: hidden; }
.hero__layer { position: relative; z-index: 2; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding-block: clamp(7rem, 13vh, 9.5rem) clamp(2.5rem, 6vh, 5rem); }
.hero__top { align-self: start; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hero__content { align-self: end; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg canvas { width: 100% !important; height: 100% !important; display: block; }
.hero__grad { position: absolute; inset: 0; z-index: -1; background:
   radial-gradient(120% 80% at 80% 10%, rgba(195,154,99,0.12), transparent 55%),
   radial-gradient(100% 60% at 0% 100%, rgba(194,95,60,0.10), transparent 60%),
   linear-gradient(180deg, rgba(12,11,10,0.2), rgba(12,11,10,0.85)); }
.hero__noise { position: absolute; inset: 0; z-index: -1; opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero__title { font-size: var(--fs-mega); line-height: 0.94; letter-spacing: -0.03em; font-weight: 300; max-width: 16ch; }
.hero__title em { font-style: italic; color: var(--bronze); font-weight: 300; }
.hero__title .row { display: block; overflow: hidden; }
.hero__meta { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; margin-top: clamp(2rem, 4vw, 3.25rem); }
.hero__meta .lead { grid-column: span 5; max-width: 46ch; }
.hero__meta .stat-row { grid-column: 8 / -1; display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); justify-content: flex-end; flex-wrap: wrap; }
.hero__scroll { position: absolute; bottom: 2rem; left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.25em; color: var(--muted); }
.hero__scroll .bar { width: 1px; height: 46px; background: var(--line); position: relative; overflow: hidden; }
.hero__scroll .bar::after { content: ""; position: absolute; inset: 0; background: var(--bronze); animation: scrollPulse 2.4s var(--ease) infinite; }
@keyframes scrollPulse { 0% { transform: translateY(-100%); } 50%,100% { transform: translateY(100%); } }

/* metric / stat */
.metric { display: flex; flex-direction: column; gap: 0.3rem; }
.metric .num { font-family: var(--display); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; }
.metric .num .unit { color: var(--bronze); }
.metric .cap { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* -------------------------------------------------------------
   9. MARQUEE
   ------------------------------------------------------------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(1.2rem, 2.5vw, 2rem); white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 3.5rem; will-change: transform; }
.marquee__track span { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.02em; color: var(--stone); font-style: italic; }
.marquee__track span .star { color: var(--bronze); font-style: normal; margin-left: 3.5rem; }

/* -------------------------------------------------------------
   10. SECTION HEADERS
   ------------------------------------------------------------- */
.sec-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.sec-head__title { grid-column: span 8; font-size: var(--fs-h2); }
.sec-head__title em { font-style: italic; color: var(--bronze); }
.sec-head__aside { grid-column: 10 / -1; align-self: end; }
.sec-head__aside p { color: var(--muted); font-size: 0.95rem; }
.sec-index { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--bronze); }

/* -------------------------------------------------------------
   11. EXPERTISE / "WE OFFER"
   ------------------------------------------------------------- */
.offer { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; }
.offer__big { grid-column: span 7; }
.offer__big h2 { font-size: clamp(2.6rem, 6.5vw, 6rem); line-height: 1.02; }
.offer__big h2 em { font-style: italic; color: var(--bronze); }
.offer__big h2 .mut { color: var(--stone-2); }
.offer__txt { grid-column: 9 / -1; }
.offer__txt p + p { margin-top: 1.25rem; color: var(--muted); }

/* -------------------------------------------------------------
   12. SERVICES (interactive list)
   ------------------------------------------------------------- */
.services-list { border-top: 1px solid var(--line); }
.service {
  position: relative; display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(1rem, 4vw, 3rem); align-items: center;
  padding-block: clamp(1.6rem, 3.5vw, 2.8rem); border-bottom: 1px solid var(--line);
  cursor: pointer; transition: padding .5s var(--ease);
}
.service__no { font-family: var(--mono); font-size: 0.72rem; color: var(--bronze); letter-spacing: 0.1em; }
.service__name { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 4vw, 3.2rem); line-height: 1.08; transition: transform .5s var(--ease), color .5s, font-weight .5s ease; }
.service__desc { max-width: 34ch; color: var(--muted); font-size: 0.9rem; opacity: 0.85; }
.service__plus { width: 30px; height: 30px; position: relative; }
.service__plus::before, .service__plus::after { content: ""; position: absolute; background: var(--stone); transition: background .4s, transform .5s var(--ease); }
.service__plus::before { left: 0; right: 0; top: 50%; height: 1px; translate: 0 -50%; }
.service__plus::after { top: 0; bottom: 0; left: 50%; width: 1px; translate: -50% 0; }
.service:hover .service__name { transform: translateX(14px); color: var(--paper); font-weight: 600; }
.service:hover .service__plus::before { background: var(--bronze); transform: rotate(90deg); }
.service:hover .service__plus::after { background: var(--bronze); }
.service__reveal {
  position: fixed; pointer-events: none; width: 320px; height: 220px; z-index: 60;
  border-radius: 4px; overflow: hidden; opacity: 0; translate: -50% -50%;
  transition: opacity .4s var(--ease); will-change: transform; mix-blend-mode: normal;
}
.service__reveal .frame { width: 100%; height: 100%; display: grid; place-items: center; }
.service__reveal .frame span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ink); text-transform: uppercase; }

/* Authority liaisoning band */
.auth { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.auth__head { grid-column: span 4; }
.auth__head .sec-index { display: block; margin-bottom: 1rem; }
.auth__head p { color: var(--muted); font-size: 0.92rem; }
.auth__grid { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.auth__item { background: var(--ink); padding: clamp(1.1rem, 1.8vw, 1.6rem); min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; transition: background .5s var(--ease); position: relative; overflow: hidden; }
.auth__item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: linear-gradient(180deg, transparent, rgba(195,154,99,0.08)); transition: height .5s var(--ease); }
.auth__item:hover { background: var(--ink-2); }
.auth__item:hover::after { height: 100%; }
.auth__no { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--bronze); }
.auth__name { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1; letter-spacing: -0.01em; }
.auth__tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--stone-2); text-transform: uppercase; margin-top: 0.4rem; }
.auth__grid--wide { grid-column: 1 / -1; grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1180px){ .auth__head { grid-column: span 12; } .auth__grid { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); } .auth__grid--wide { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px){ .auth__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px){ .auth__grid { grid-template-columns: 1fr 1fr; } .auth__item { min-height: 104px; } }

/* -------------------------------------------------------------
   13. ABOUT / PHILOSOPHY
   ------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.about-grid .visual { grid-column: span 5; position: relative; align-self: start; position: sticky; top: 12vh; }
.about-grid .body { grid-column: 7 / -1; }
.pillars { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
.pillar { border-top: 1px solid var(--line); padding-top: 1.75rem; display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; }
.pillar__ic { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--bronze); }
.pillar h3 { font-size: var(--fs-h3); margin-bottom: 0.75rem; }
.pillar p { color: var(--muted); }

.frame-art { aspect-ratio: 4/5; border: 1px solid var(--line); border-radius: 4px; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--ink-3), var(--ink)); }
.frame-art__lines { position: absolute; inset: 0; opacity: 0.5; }
.frame-art__cap { position: absolute; left: 1.25rem; bottom: 1.25rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }
.frame-art__tag { position: absolute; right: 1.25rem; top: 1.25rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--bronze); }

/* -------------------------------------------------------------
   14. PROJECTS
   ------------------------------------------------------------- */
.proj { position: relative; display: block; border-top: 1px solid var(--line); padding-block: clamp(1.5rem,3vw,2.25rem); }
.proj__row { display: grid; grid-template-columns: 4rem 1.4fr 1fr auto; gap: 1.5rem; align-items: center; }
.proj__no { font-family: var(--mono); font-size: 0.72rem; color: var(--bronze); }
.proj__name { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 4.5vw, 3.4rem); line-height: 1.08; transition: transform .5s var(--ease), font-weight .5s ease, color .5s; }
.proj__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.proj__tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 0.3rem 0.7rem; }
.proj__year { font-family: var(--mono); font-size: 0.78rem; color: var(--stone); justify-self: end; }
.proj:hover .proj__name { transform: translateX(16px); font-weight: 600; color: var(--bronze); }
.proj__media { position: fixed; z-index: 55; width: min(34vw, 460px); aspect-ratio: 3/2; pointer-events: none; opacity: 0; translate: -50% -50%; border-radius: 4px; overflow: hidden; will-change: transform; background: var(--ink-2); }
.proj__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.proj__media .proj__media-cap { position: absolute; left: 1rem; bottom: 0.85rem; z-index: 2; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 8px rgba(0,0,0,.6); }

/* Project grid (projects page) */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.work { grid-column: span 6; }
.work.is-wide { grid-column: span 12; }
.work.is-offset { margin-top: clamp(2rem, 8vw, 7rem); }
.work__media { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4/3; background: linear-gradient(150deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); }
.work.is-wide .work__media { aspect-ratio: 16/8; }
.work__media .art-svg { position: absolute; inset: 0; }
.work__media .scale img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.work__overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding: 1.5rem; background: linear-gradient(0deg, rgba(12,11,10,0.6), transparent 60%); }
.work__media .scale { position: absolute; inset: 0; transition: transform 1s var(--ease); will-change: transform; }
.work:hover .work__media .scale { transform: scale(1.06); }
.work__head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.25rem; gap: 1rem; }
.work__title { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.05; }
.work__meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.work__cat { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); margin-top: 0.5rem; display: block; }

/* filter */
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem,5vw,4rem); }
.filter { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.6rem 1.1rem; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); transition: all .4s var(--ease); }
.filter:hover { color: var(--paper); border-color: var(--stone); }
.filter.is-active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.work.is-hidden { display: none; }

/* -------------------------------------------------------------
   15. STATS BAND
   ------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); border-top: 1px solid var(--line); padding-top: clamp(2.5rem,5vw,4rem); }
.stats .metric .num { font-size: clamp(2.6rem, 6vw, 5rem); }
@media (max-width: 760px){ .stats { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; } }

/* -------------------------------------------------------------
   16. PROCESS / TIMELINE
   ------------------------------------------------------------- */
.timeline { display: grid; gap: 0; border-top: 1px solid var(--line); }
.tl { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem,5vw,4rem); padding-block: clamp(2rem,4vw,3.25rem); border-bottom: 1px solid var(--line); align-items: start; }
.tl__no { font-family: var(--mono); font-size: 0.8rem; color: var(--bronze); }
.tl__main { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1rem,4vw,3rem); }
.tl__name { font-size: var(--fs-h3); }
.tl__txt { color: var(--muted); }
@media (max-width: 760px){ .tl__main { grid-template-columns: 1fr; gap: 1rem; } }

/* -------------------------------------------------------------
   17. STACK / SOFTWARE
   ------------------------------------------------------------- */
.stack { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--paper-2); border: 1px solid var(--line); border-radius: 100px; padding: 0.55rem 1rem; transition: border-color .4s, color .4s, background .4s; }
.chip:hover { border-color: var(--bronze); color: var(--bronze); }

/* -------------------------------------------------------------
   18. FAQ
   ------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: clamp(1.4rem,3vw,2.1rem); cursor: pointer; }
.faq__q h3 { font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 400; transition: color .4s; }
.faq__item:hover .faq__q h3 { color: var(--paper); }
.faq__ic { width: 26px; height: 26px; position: relative; flex: none; }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; background: var(--bronze); transition: transform .45s var(--ease); }
.faq__ic::before { top: 50%; left: 0; right: 0; height: 1px; translate: 0 -50%; }
.faq__ic::after { left: 50%; top: 0; bottom: 0; width: 1px; translate: -50% 0; }
.faq__item.is-open .faq__ic::after { transform: scaleY(0); }
.faq__a { overflow: hidden; height: 0; }
.faq__a-inner { padding-bottom: clamp(1.4rem,3vw,2.1rem); max-width: 64ch; color: var(--muted); }

/* -------------------------------------------------------------
   19. CTA / CONTACT
   ------------------------------------------------------------- */
.cta { text-align: center; padding-block: clamp(5rem, 14vw, 12rem); position: relative; }
.cta h2 { font-size: clamp(3rem, 12vw, 11rem); line-height: 0.96; letter-spacing: -0.025em; font-weight: 400; }
.cta h2 em { font-style: italic; color: var(--bronze); }
.cta .label { display: block; margin-bottom: 2rem; }
.cta__mail { display: inline-flex; margin-top: 2.5rem; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.12em; }

.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.contact-grid .info { grid-column: span 5; }
.contact-grid .formwrap { grid-column: 7 / -1; }
.info__block { border-top: 1px solid var(--line); padding-block: 1.5rem; }
.info__block .label { display: block; margin-bottom: 0.6rem; }
.info__block a, .info__block p { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-family: var(--display); }

.field { position: relative; margin-bottom: 2rem; }
.field input, .field textarea { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 0.9rem 0; color: var(--paper); font-family: var(--sans); font-size: 1.05rem; transition: border-color .4s; }
.field textarea { resize: vertical; min-height: 120px; }
.field label { position: absolute; left: 0; top: 0.9rem; color: var(--muted); pointer-events: none; transition: transform .4s var(--ease), color .4s, font-size .4s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--bronze); }
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.6rem); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--bronze);
}

/* -------------------------------------------------------------
   20. FOOTER
   ------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); padding-top: clamp(3rem,6vw,5rem); padding-bottom: 2rem; }
.footer__top { display: grid; grid-template-columns: repeat(12,1fr); gap: var(--gutter); }
.footer__brand { grid-column: span 5; }
.footer__brand .big { font-family: var(--display); font-weight: 500; font-size: clamp(2.5rem,6vw,4.5rem); line-height: 1; letter-spacing: -0.02em; }
.footer__brand .big .dot { color: var(--bronze); }
.footer__col { grid-column: span 2; }
.footer__col h4 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; font-weight: 500; }
.footer__col a, .footer__col p { display: block; font-size: 0.92rem; color: var(--paper-2); margin-bottom: 0.75rem; line-height: 1.5; transition: color .4s var(--ease), font-weight .4s ease, padding-left .4s var(--ease); }
.footer__col a:hover { color: var(--bronze); font-weight: 600; padding-left: 0.3rem; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: clamp(3rem,6vw,5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted); }
.footer__giant { font-family: var(--display); font-weight: 600; font-size: clamp(4rem, 20vw, 20rem); line-height: 0.85; letter-spacing: -0.025em; color: var(--ink-3); text-align: center; margin-top: clamp(2rem,5vw,4rem); user-select: none; overflow: hidden; }
.footer__giant span { display: inline-block; }

/* -------------------------------------------------------------
   21. PAGE HERO (interior pages)
   ------------------------------------------------------------- */
.phero { padding-top: clamp(9rem, 18vh, 14rem); padding-bottom: clamp(2.5rem,6vw,5rem); }
.phero h1 { font-size: var(--fs-h1); line-height: 0.95; }
.phero h1 em { font-style: italic; color: var(--bronze); }
.phero__sub { max-width: 52ch; margin-top: 2rem; }
.crumb { display: flex; gap: 0.6rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 2rem; }
.crumb .sep { color: var(--bronze); }

/* -------------------------------------------------------------
   22. UTIL / REVEAL DEFAULTS
   ------------------------------------------------------------- */
[data-reveal] { will-change: transform, opacity; }
.line-fill { display: inline-block; background: linear-gradient(var(--bronze), var(--bronze)) left / 0 1px no-repeat; }
.to-top { position: fixed; right: var(--gutter); bottom: 2rem; z-index: 80; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: rgba(12,11,10,0.6); backdrop-filter: blur(8px); opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease), background .4s; }
.to-top.is-visible { opacity: 1; transform: translateY(0); }
.to-top:hover { background: var(--paper); color: var(--ink); }

.noscript-note { position: fixed; inset: auto 0 0 0; background: var(--bronze); color: var(--ink); text-align: center; padding: 0.6rem; font-family: var(--mono); font-size: 0.7rem; z-index: 9999; }

/* -------------------------------------------------------------
   23. SERVICES PAGE — large editorial blocks
   ------------------------------------------------------------- */
.svc { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; padding-block: clamp(3rem, 7vw, 6.5rem); border-top: 1px solid var(--line); }
.svc__art { grid-column: span 5; }
.svc__body { grid-column: 7 / -1; }
.svc:nth-child(even) .svc__art { order: 2; grid-column: 8 / -1; }
.svc:nth-child(even) .svc__body { order: 1; grid-column: span 6; }
.svc__no { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.2em; color: var(--bronze); }
.svc__name { font-size: clamp(2.2rem, 5.5vw, 4.5rem); line-height: 1.05; margin: 1rem 0 1.5rem; }
.svc__name em { font-style: italic; color: var(--bronze); }
.svc__copy { color: var(--muted); max-width: 56ch; }
.svc__list { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.75rem; }
.svc__panel { aspect-ratio: 4/3; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; position: relative; background: linear-gradient(160deg, var(--ink-3), var(--ink)); }
.svc__panel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.svc__panel .pn { position: absolute; right: 1rem; top: 1rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--bronze); }
@media (max-width: 900px){
  .svc, .svc:nth-child(even) { grid-template-columns: 1fr; }
  .svc__art, .svc__body, .svc:nth-child(even) .svc__art, .svc:nth-child(even) .svc__body { grid-column: 1 / -1; order: initial; }
  .svc__art { max-width: 460px; }
}

/* -------------------------------------------------------------
   24. TEAM PAGE — editorial directory (not cards)
   ------------------------------------------------------------- */
.team { border-top: 1px solid var(--line); }
.team-member { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--line); }
.team-member__media { grid-column: span 4; }
.team-member__body { grid-column: 6 / -1; }
.team-member:nth-child(even) .team-member__media { order: 2; grid-column: 9 / -1; }
.team-member:nth-child(even) .team-member__body { order: 1; grid-column: 1 / 8; }
.team-frame { position: relative; aspect-ratio: 4/5; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, var(--ink-3), var(--ink)); }
.team-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.team-frame.has-photo img { opacity: 1; }
.team-frame .mono-monogram { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: clamp(3rem, 7vw, 6rem); color: rgba(195,154,99,0.22); letter-spacing: -0.04em; transition: transform .7s var(--ease), color .6s; }
.team-member:hover .team-frame .mono-monogram { transform: scale(1.06); color: rgba(195,154,99,0.34); }
.team-frame__lines { position: absolute; inset: 0; opacity: 0.5; }
.team-frame__no { position: absolute; left: 1rem; top: 1rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--bronze); }
.team-frame__role { position: absolute; left: 1rem; bottom: 1rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.team-member__role { font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.015em; }
.team-member__role em { font-style: italic; color: var(--bronze); }
.team-member__name { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 0; }
.team-member__name b { color: var(--paper); font-weight: 500; }
.team-member__spec { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.25rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); }
.team-member__spec::before { content: ""; width: 22px; height: 1px; background: var(--bronze); }
.team-member__bio { margin-top: 1.5rem; color: var(--muted); max-width: 56ch; }
.team-member__social { display: flex; gap: 1.25rem; margin-top: 1.75rem; }
.team-member__social a { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-2); position: relative; }
.team-member__social a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.team-member__social a:hover { color: var(--bronze); }
.team-member__social a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 900px){
  .team-member, .team-member:nth-child(even) { grid-template-columns: 1fr; }
  .team-member__media, .team-member__body, .team-member:nth-child(even) .team-member__media, .team-member:nth-child(even) .team-member__body { grid-column: 1 / -1; order: initial; }
  .team-frame { max-width: 380px; }
}

/* ---------- Team — editorial portrait experience (enhancement) ---------- */
.team { position: relative; }
.team-member { position: relative; z-index: 1; }

/* subtle animated architectural background — slow wireframe squares */
.team__canvas { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.team__sq { position: absolute; display: block; border: 1px solid rgba(195,154,99,0.10); will-change: transform; }
.team__sq::before { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(195,154,99,0.06); }
.team__sq--1 { width: 340px; height: 340px; top: 5%; right: -70px; animation: teamSqSpin 90s linear infinite; }
.team__sq--2 { width: 210px; height: 210px; bottom: 10%; left: -50px; animation: teamSqSpin 130s linear infinite reverse; }
.team__sq--3 { width: 480px; height: 480px; top: 42%; left: 40%; opacity: .5; animation: teamSqDrift 34s ease-in-out infinite; }
@keyframes teamSqSpin { to { transform: rotate(360deg); } }
@keyframes teamSqDrift { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-26px,0) rotate(8deg); } }

/* portrait — slow zoom + gentle tonal lift on hover */
.team-frame.has-photo img { filter: saturate(0.9) contrast(1.03) brightness(0.97); transition: transform 1.3s var(--ease), filter .8s var(--ease), opacity .6s var(--ease); will-change: transform; }
.team-member:hover .team-frame.has-photo img { transform: scale(1.06); filter: saturate(1.04) contrast(1.05) brightness(1); }

/* caption legibility wash */
.team-frame.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(12,11,10,.6), transparent 40%), linear-gradient(180deg, rgba(12,11,10,.42), transparent 24%); }
.team-frame.has-photo .team-frame__no, .team-frame.has-photo .team-frame__role { z-index: 5; text-shadow: 0 1px 12px rgba(0,0,0,.55); }

/* blueprint overlay — reveals subtly on hover */
.team-frame.has-photo .team-frame__lines { opacity: 0; z-index: 3; mix-blend-mode: screen; transition: opacity .8s var(--ease), transform .5s var(--ease); }
.team-member:hover .team-frame.has-photo .team-frame__lines { opacity: .42; }

/* golden frame + sweeping hairline */
.team-frame.has-photo::after { content: ""; position: absolute; inset: 0; z-index: 4; border: 1px solid rgba(195,154,99,0); pointer-events: none; transition: border-color .7s var(--ease); }
.team-member:hover .team-frame.has-photo::after { border-color: rgba(195,154,99,0.5); }
.team-frame__edge { position: absolute; left: 0; bottom: 0; z-index: 6; height: 1px; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--bronze), var(--clay)); transition: transform .9s var(--ease); }
.team-member:hover .team-frame__edge { transform: scaleX(1); }

/* role eyebrow above the name */
.team-member__spec--top { margin-top: 0; margin-bottom: .35rem; }

/* social as animated icon buttons (shown only where a link exists) */
.team-member__social.icons { gap: .75rem; }
.team-member__social.icons a { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--paper-2); transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease); }
.team-member__social.icons a::after { content: none; }
.team-member__social.icons a svg { width: 17px; height: 17px; transition: transform .45s var(--ease); }
.team-member__social.icons a:hover { color: var(--ink); background: var(--bronze); border-color: var(--bronze); transform: translateY(-3px); }
.team-member__social.icons a:hover svg { transform: scale(1.08); }

/* Director portfolio entry — scoped to the one profile that owns it. */
.team-member__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.team-member__actions .team-member__action {
  min-width: 132px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  color: var(--paper-2);
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.team-member__actions .team-member__action::after { content: none; }
.team-member__actions .team-member__action svg { width: 16px; height: 16px; }
.team-member__actions .team-member__action--portfolio { color: var(--ink); background: var(--bronze); border-color: var(--bronze); }
.team-member__actions .team-member__action:hover { transform: translateY(-2px); color: var(--ink); background: var(--paper); border-color: var(--paper); }
.team-member__actions .team-member__action--portfolio:hover { background: var(--paper); }
@media (max-width: 480px) {
  .team-member__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .team-member__actions .team-member__action { min-width: 0; }
}

@media (max-width: 900px){ .team__canvas { display: none; } }
@media (prefers-reduced-motion: reduce){
  .team__canvas { display: none; }
  .team-frame.has-photo img, .team-member:hover .team-frame.has-photo img { transition: none; transform: none; }
}

/* Contact page map/card */
.map-card { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; aspect-ratio: 16/10; position: relative; background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); }
.map-card iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.9); }
.contact-hours { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; font-size: 0.92rem; color: var(--paper-2); border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 1.5rem; }
.contact-hours span:nth-child(even){ font-family: var(--mono); color: var(--muted); }
.form-note { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--bronze); opacity: 0; transition: opacity .4s; margin-top: 1rem; }