/* =========================================================
   HAO — minimal black-and-white studio site
   Inspired by the visual language of shed.design
   ========================================================= */

:root,
[data-theme="dark"]{
  --bg:        #0a0a0a;
  --bg-2:      #141414;
  --fg:        #f4f1ec;
  --fg-dim:    #9a958d;
  --line:      rgba(244, 241, 236, 0.14);
  --accent:    #f4f1ec;
  --pill-img-bg: rgba(10,10,10,.55);
  --pill-img-border: rgba(255,255,255,.4);
  --display:   'Inter Tight', 'Inter', system-ui, sans-serif;
  --body:      'Inter', system-ui, sans-serif;
  --max:       1440px;
  --pad:       clamp(20px, 4vw, 56px);
  --section-y: clamp(80px, 12vw, 180px);
  --ease:      cubic-bezier(.2,.7,.2,1);
}
[data-theme="light"]{
  --bg:        #f5f2eb;          /* warmer cream, less yellow than #faf8f3 */
  --bg-2:      #ede9df;          /* secondary surface — slightly more contrast from bg */
  --fg:        #141414;          /* a touch deeper than #1c1c1c for stronger type weight */
  --fg-dim:    #565049;          /* darker muted (was #6e6a64) — better readability for ledes */
  --line:      rgba(20, 20, 20, 0.18);  /* hairlines visible without being heavy */
  --accent:    #141414;
  --pill-img-bg: rgba(10,10,10,.55);
  --pill-img-border: rgba(255,255,255,.4);
}
/* Smooth color transition when switching themes */
body, .section, .overlay-menu, .pill, .list-item__title, .list-item__excerpt,
.brand, .menu-toggle, .theme-toggle{
  transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;       /* clear the fixed topbar (max 72px) when jumping to #anchors from the footer */
  /* overflow-x:clip (not hidden) stops the horizontal scroll from full-bleed
     sections WITHOUT creating a scroll container — so position:sticky
     descendants (the archive filter bar) keep working. overflow:hidden
     here would silently break every sticky element on the page. */
  overflow-x:clip;
  width:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;               /* clip (not hidden) — preserves position:sticky */
  width:100%;
  position:relative;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
p{margin:0 0 1em}
/* Reset the browser's default <figure> margin (1em 40px) — was creating
   a phantom horizontal gap on full-bleed figures across the site. */
figure{margin:0}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}

.muted{color:var(--fg-dim)}
.small{
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* =========================================================
   TYPOGRAPHY HIERARCHY — labels & eyebrows
   All UPPERCASE tracked labels use Inter Tight (var(--display))
   for visual consistency. Body paragraphs stay in Inter (--body).
   Fraunces italic is reserved for "lyrical" accent moments only.
   ========================================================= */
.section-no,
.news-date,
.team-card .role,
.stats p,
.contact-form span,
.contact-form .field-error,
.btn,
.foot-credit,
.foot-legal a,
.form-status,
.project-nav__label,
.atmosphere-band__caption,
.scroll-nav,
.stat-band__num,
.cta-block .btn{
  font-family:var(--display);
}

/* =========================================================
   TOP BAR
   ========================================================= */
/* Topbar — fixed, fully transparent at the top of the page (over hero image).
   When scrolled past the hero it gets a solid/blurred backdrop and the text
   color flips to var(--fg) so it stays a clean, opaque chip — never mixing
   with the body content underneath. */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:clamp(54px, 4vw, 72px);
  z-index:700;  /* always on top — sits above the menu overlay so close button stays accessible */
  color:#fff;
  pointer-events:none;
  transition:color .4s var(--ease), background-color .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s var(--ease);
}
/* Mobile: taller topbar so the brand + menu icons sit with deliberate
   breathing room from the top edge of the viewport, instead of hugging
   the very top line. */
@media (max-width:767px){
  .topbar{ height:68px; }
}
.topbar > *{ pointer-events:auto; }
.topbar::before{
  /* Hairline divider at the bottom edge that appears with the scrolled state */
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--line);
  opacity:0;
  transition:opacity .45s var(--ease);
}
body.is-scrolled-past-hero .topbar{
  color:var(--fg);
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
}
body.is-scrolled-past-hero .topbar::before{ opacity:1; }
body.menu-open .topbar{
  color:var(--fg);
  background:var(--bg);          /* fully opaque while the menu is open */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Topbar contents — two states:
   1) DEFAULT (homepage hero, before scroll)
      Brand + actions hug the viewport edges with just var(--pad) of gutter.
      The full-bleed hero image extends to the edges, so the topbar should
      feel edge-to-edge too. The visual frame is the photograph, not a box.
   2) SCROLLED past hero OR on any inner page
      Brand + actions snap inward to track the centred .container edge,
      so they line up with the H1 / paragraphs / project tiles directly
      below them. On 1440px+ viewports this is a noticeable lateral shift
      that the transition smooths into the scroll feel. */
.topbar__actions{
  position:absolute;
  top:50%;
  right:var(--pad);
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.4vw, 22px);
  transition:right .45s var(--ease);
}
@media (max-width:767px){
  .topbar__actions{ gap:.9rem; }
}
.brand{
  position:absolute;
  top:50%;
  left:var(--pad);
  transform:translateY(-50%);
  display:inline-flex;
  align-items:baseline;
  font-family:var(--display);
  font-weight:800;                 /* HAO reads heavy/black */
  font-size:clamp(22px, 1.9vw, 32px);
  letter-spacing:-.03em;
  line-height:1;
  color:#fff;
  transition:left .45s var(--ease), color .4s var(--ease);
}
/* State 2 — track the .container edge once scrolled past hero or on
   any inner page. max() ensures we never push past --pad on narrow
   viewports; on wider viewports we centre within --max (1440px). */
body.is-scrolled-past-hero .brand,
body.is-inner-page .brand{
  left:max(var(--pad), calc(50vw - var(--max) / 2 + var(--pad)));
}
body.is-scrolled-past-hero .topbar__actions,
body.is-inner-page .topbar__actions{
  right:max(var(--pad), calc(50vw - var(--max) / 2 + var(--pad)));
}
.brand-suffix{
  font-weight:400;                 /* "architects" regular, joined to bold HAO */
  font-size:1em;                   /* same size as HAO */
  letter-spacing:-.02em;
  margin-left:.01em;               /* tight join, hairline gap */
  opacity:1;
  text-transform:lowercase;
}
@media (max-width:767px){
  /* Vertically centre the brand within the taller mobile topbar so it
     sits in the middle of the bar, not anchored to the top edge. */
  .brand{ top:50%; left:var(--pad); transform:translateY(-50%); }
}

.menu-toggle{
  position:static;             /* now inside .topbar__actions flex container */
  display:flex;
  align-items:center;
  gap:.4375vw;
  font-family:var(--display);
  font-size:clamp(13px, 1.05vw, 17px);
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:600;
  color:currentColor;          /* inherit from .topbar */
}
.menu-toggle__plus{
  width:clamp(13px, 1.1875vw, 18px);
  height:clamp(13px, 1.1875vw, 18px);
  flex-shrink:0;
  transition:transform .6s var(--ease);
}
body.menu-open .menu-toggle__plus{ transform:rotate(45deg); }
.menu-toggle__label{
  position:relative;
  display:inline-block;
  height:1em;
  overflow:hidden;
  line-height:1;
}
.menu-toggle__label span{
  display:block;
  transition:transform .5s var(--ease);
}
.menu-toggle__label span:nth-child(2){ position:absolute; top:100%; left:0; right:0; }
body.menu-open .menu-toggle__label span{ transform:translateY(-100%); }
@media (max-width:767px){
  .menu-toggle__plus{ width:1.5rem; height:1.5rem; }
}

/* Topbar CTA pill — primary lead capture, sits in the actions cluster.
   Hidden while on the hero (visual breathing room + no marquee overlap);
   slides in once the user scrolls past the hero. */
.topbar-cta{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding:.5em .9em;
  border:1px solid currentColor;
  border-radius:999px;
  font-family:var(--display);
  font-size:clamp(12px, .9vw, 14px);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:currentColor;
  text-decoration:none;
  line-height:1;
  transition:
    background-color .35s var(--ease),
    color .35s var(--ease),
    transform .5s cubic-bezier(.14,1,.34,1),
    opacity .5s cubic-bezier(.14,1,.34,1);
  position:relative;
  white-space:nowrap;
  opacity:0;
  transform:translateX(12px);
  pointer-events:none;
}
body.is-scrolled-past-hero .topbar-cta{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.topbar-cta:hover{
  background:var(--fg);
  color:var(--bg);
  transform:translateY(-1px);
}
.topbar-cta:hover .topbar-cta__dot{
  background:#39ff14;
  box-shadow:0 0 8px rgba(57,255,20,.6);
}
.topbar-cta__dot{
  width:6px; height:6px;
  border-radius:50%;
  background:#39ff14;
  display:inline-block;
  box-shadow:0 0 8px rgba(57,255,20,.5);
  animation:cta-pulse 2.6s ease-in-out infinite;
}
@keyframes cta-pulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.65; transform:scale(.85); }
}
@media (max-width:640px){
  /* On mobile, drop the topbar CTA entirely — keep just the theme + burger.
     Lead capture is fully covered by the floating contact cluster below. */
  .topbar-cta{ display:none; }
}

/* Theme toggle button */
.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(28px, 2vw, 36px);
  height:clamp(28px, 2vw, 36px);
  border:0;
  background:transparent;
  color:currentColor;
  cursor:pointer;
  padding:0;
  transition:transform .4s var(--ease);
}
.theme-toggle:hover{ transform:rotate(20deg); }
.theme-toggle__icon{
  width:clamp(18px, 1.3vw, 22px);
  height:clamp(18px, 1.3vw, 22px);
}
[data-theme="dark"] .theme-toggle__icon--moon,
[data-theme="light"] .theme-toggle__icon--sun{ display:none; }

/* =========================================================
   OVERLAY MENU
   ========================================================= */
.overlay-menu{
  position:fixed;
  inset:0;
  z-index:650;  /* above the hero UI (z:500), below the topbar (z:700) so brand + close button stay on top */
  background:var(--bg);
  padding:clamp(96px, 11vh, 130px) 0 clamp(32px, 4vh, 48px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow-x:hidden;
  overflow-y:auto;          /* fall back to scroll when content can't fit (long item lists, short viewports) */
  -webkit-overflow-scrolling:touch;
  transform:translateY(-100%);
  visibility:hidden;         /* fully remove from compositing/accessibility when closed */
  transition:transform .7s var(--ease), visibility 0s linear .7s;
}
/* Overlay menu children align to the same container box as body content
   (max-width var(--max), horizontal padding var(--pad)) so menu items
   sit at the exact left edge as the page below them. */
.overlay-list,
.overlay-foot{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  box-sizing:border-box;
}
body.menu-open .overlay-menu{
  transform:translateY(0);
  visibility:visible;
  transition:transform .7s var(--ease), visibility 0s linear 0s;
}
.overlay-menu[aria-hidden="true"] *{ pointer-events:none; }
body.menu-open .overlay-menu *{ pointer-events:auto; }

.overlay-list{
  display:flex;
  flex-direction:column;
  gap:0;                                /* line dividers replace gap */
}
/* Each menu item sits inside a row with a hairline rule above it; the
   last item also gets a rule below. Reads like a drawing schedule. */
.overlay-list li{
  border-top:1px solid var(--line);
  padding:clamp(10px, 1.4vw, 22px) 0;
}
.overlay-list li:last-child{
  border-bottom:1px solid var(--line);
}
.overlay-list a{
  position:relative;
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(32px, 6.4vw, 88px);
  line-height:1;
  letter-spacing:-.02em;
  text-transform:uppercase;
  padding:6px 0;
  transition:opacity .3s var(--ease), transform .5s var(--ease);
}
@media (max-height:760px) and (min-width:641px){
  /* When the viewport is short on desktop, scale menu type down so all
     5 items + the footer block fit without cropping. */
  .overlay-list a{ font-size:clamp(28px, 4.4vw, 56px); }
  .overlay-list li{ padding:clamp(6px, 1vw, 12px) 0; }
}
@media (max-width:640px){
  .overlay-list li{ padding:8px 0; }
  .overlay-list a{ font-size:36px; }
  .overlay-foot{ grid-template-columns:1fr; gap:14px; padding-top:14px; font-size:13px; }
}
/* Numeral sits ABOVE the menu label, container-aligned (left edge of
   the menu link === left edge of body content below). Replaces the old
   absolute-positioned numeral that escaped 3.2em to the left and was
   clipped by the container padding on most viewports. */
.overlay-list a::before{
  content:attr(data-no);
  display:block;
  font-family:var(--body);
  font-weight:500;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--fg-dim);
  text-transform:uppercase;
  margin-bottom:6px;
  transition:color .3s var(--ease);
}
.overlay-list a:hover::before{ color:var(--fg); }
.overlay-list a:hover{
  transform:translateX(20px);
}
.overlay-list:hover a:not(:hover){ opacity:.35 }

.overlay-foot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  border-top:1px solid var(--line);
  padding-top:28px;
  font-size:14px;
}
.overlay-foot a:hover{ color:var(--fg) }

/* =========================================================
   HERO (shed-faithful — exact specs from shed.design)
   ========================================================= */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  color:#fff;
  background:#000;
}
@media (max-width:767px){
  .hero{
    height:78svh;
    min-height:520px;
    max-height:760px;
  }
}

/* ---------- Full-bleed carousel layer (z:0) ---------- */
.hero-assets{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
/* Curtain-drop transition (clip-path inset):
   - new slide is fully clipped from below (inset bottom = 100%) so only the top edge is visible
   - the bottom inset animates from 100% → 0%, "dropping" the image into view from top to bottom
   - the outgoing slide is held visible underneath (z:1) until the new slide's curtain fully drops over it
   - after the animation, JS removes .is-leaving and the old slide snaps back to fully-clipped (hidden behind) */
.hero-asset{
  position:absolute;
  inset:0;
  margin:0;
  -webkit-clip-path:inset(0 0 100% 0);
  clip-path:inset(0 0 100% 0);
  z-index:0;
  pointer-events:none;
  will-change:clip-path;        /* hint for mobile compositors */
}
.hero-asset.is-leaving{
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
  z-index:1;
}
.hero-asset.is-active{
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
  z-index:2;
  pointer-events:auto;
  animation:curtainDrop 2.4s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes curtainDrop{
  from{
    -webkit-clip-path:inset(0 0 100% 0);
    clip-path:inset(0 0 100% 0);
  }
  to  {
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
  }
}
.hero-asset__img{
  position:absolute;
  inset:0;
  width:100%; height:105%;
  top:-2.5%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.05);
}
.hero-asset.is-active .hero-asset__img{
  animation:kenburns 14s cubic-bezier(.14,1,.34,1) forwards;
}
@keyframes kenburns{
  from{ transform:scale(1.08); }
  to{ transform:scale(1); }
}
/* Top + bottom shadow scrim — guarantees the brand, MENU button and any
   text over the hero image stays legible regardless of which project image
   is showing (light or dark, sky or facade). Top is intentionally HEAVY:
   light architectural renders with white skies were washing out the topbar
   text, so the top stays at 80%+ black through the full topbar height (~80px). */
.hero-assets::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.80) 4%,
      rgba(0,0,0,.55) 9%,
      rgba(0,0,0,.32) 15%,
      rgba(0,0,0,.12) 22%,
      rgba(0,0,0,0)   32%,
      rgba(0,0,0,0)   62%,
      rgba(0,0,0,.50) 100%);
  pointer-events:none;
  z-index:1;
}

/* ---------- Marquee subtitle (sits in the topbar row between the logo on
   the left and the action cluster on the right — bounded width with
   generous side padding so it never collides with either) ---------- */
.hero-subtitle{
  display:none;
  z-index:490;
}
@media (min-width:1024px){
  .hero-subtitle{
    display:flex;
    position:absolute;
    top:0;
    height:clamp(54px, 4vw, 72px);            /* matches topbar height */
    left:clamp(200px, 16vw, 280px);           /* generous gap after the "HAO.architects" logo */
    right:clamp(150px, 12vw, 220px);          /* clear of theme + menu (CTA hidden on hero) */
    align-items:center;
    pointer-events:none;
    overflow:hidden;
    line-height:1;
    justify-content:flex-start;
  }
}

.marquee-fade{
  display:flex;
  position:relative;
  white-space:nowrap;
  user-select:none;
  font-family:var(--display);
  font-size:clamp(15px, 1.15vw, 20px);
  letter-spacing:.01em;
  color:#fff;
  font-weight:500;
  animation:marquee 22s linear infinite;
}
.marquee-fade__label{
  display:inline-flex;
  align-items:center;
  /* Tight gap; the separator pipe provides the visual divider. */
  padding-right:clamp(20px, 2vw, 36px);
  gap:clamp(20px, 2vw, 36px);
}
/* Separator pipe `|` — rendered as a 1px vertical line via CSS so
   it always looks like a clean pipe regardless of font fallback.
   (The actual pipe character can render as a hooked T or dotted
   shape in some font fallbacks — this guarantees the shape.) */
.marquee-fade__sep{
  display:inline-block;
  width:2px;
  height:1.2em;
  background:currentColor;
  vertical-align:middle;
  opacity:1;
  flex-shrink:0;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-100% / 3)); }
}

/* footer marquee — different keyframe (2 copies) */
.foot-marquee .marquee-track{
  animation:marquee-foot 30s linear infinite;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(40px, 7vw, 110px);
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
  display:flex;
}
@keyframes marquee-foot{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Overlaid title — one line at every size, shed pattern ---------- */
.hero-title{
  position:relative;
  margin:0;
  padding:clamp(72px, 11vh, 120px) clamp(20px, 4vw, 40px) 0;  /* generous side padding so title doesn't kiss the edge on mobile */
  font-family:var(--display);
  /* "Built By" sit at a regular weight; "HAO" is heavy black —
     per client comment 2 ("only HAO in bold"). */
  font-weight:500;
  font-size:clamp(38px, 13.5vw, 240px);
  line-height:.9;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:#fff;
  z-index:500;
  text-align:center;
  width:100%;
  pointer-events:none;
  user-select:none;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;              /* one line always */
  align-items:baseline;
  justify-content:center;
  column-gap:.3em;
  white-space:nowrap;
}
/* The third word ("HAO") sits at a heavier weight than "Built By" so
   the brand reads as the punchline of the headline, but kept at 700
   (not 900) — black-axis Inter Tight was too inky against the photo. */
.hero-title .hero-title__word:nth-child(3){ font-weight:700; }
.hero-title__word{
  display:inline-block;
  line-height:.95;
  /* Same definitive descender fix as .display__word — clip the char-stomp
     reveal but leave a .5em visible band so descenders never clip. */
  overflow:clip;
  overflow-clip-margin:.5em;
  flex-shrink:0;                 /* never squash words */
}
@media (min-width:1024px){
  .hero-title{
    font-size:clamp(96px, 16vw, 260px);
  }
}
.hero-title__inner{
  display:block;
  color:#fff;
}
/* per-character stomp: each char drops from above with a sharp landing.
   --char-delay is set by JS per-character for the stagger. */
.hero-title__char{
  display:inline-block;
  transform:translateY(115%) scaleY(1.2);
  transform-origin:bottom center;
  opacity:0;
  transition:
    transform .9s cubic-bezier(.9, 0, .1, 1) var(--char-delay, 0s),
    opacity .35s linear var(--char-delay, 0s);
}
.is-loaded .hero-title__char{
  transform:translateY(0) scaleY(1);
  opacity:1;
}
/* `.no-intro` snaps the hero into its settled state for subsequent refreshes
   within the same tab — no stomp, no curtain drop, no scale-in. */
.no-intro .hero-title__char,
.no-intro .hero-title__inner,
.no-intro .hero-carousel-control,
.no-intro .hero-scroll{
  transition:none !important;
}
.no-intro .hero-asset.is-active{
  animation:none !important;
  clip-path:inset(0 0 0 0);
}

/* ---------- Carousel control — PILL shape (bottom-left) ---------- */
.hero-carousel-control{
  position:absolute;
  z-index:500;
  bottom:1.6rem;
  left:50%;
  margin-left:-4.75rem;      /* half of width below */
  width:9.5rem;              /* mobile — sized down from 14rem so it doesn't dominate the viewport */
  height:5.85rem;            /* keep 278/172 aspect */
  border:.2rem solid #fff;
  border-radius:10rem;
  background:transparent;
  overflow:hidden;
  cursor:pointer;
  display:flex;
  padding:0;
  transform:scale(0);          /* hidden until intro completes (matches shed.design) */
  transition:transform 1s cubic-bezier(.9,0,.1,1) .5s;
}
.is-loaded .hero-carousel-control{ transform:scale(1); }
@media (min-width:1024px){
  .hero-carousel-control{
    bottom:.75vw;
    left:.75vw;
    margin-left:0;
    width:8.75vw;
    height:5.375vw;
    border-radius:10vw;
    border-width:.1875vw;
  }
}
.hero-carousel-control:hover{
  transform:scale(1.03);
}
.hero-carousel-control__inner{
  position:absolute;
  inset:0;
  display:flex;
  overflow:hidden;
}
.hero-carousel-control__thumb{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  background-color:#060606;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:grayscale(1);
  transition:background-image .5s cubic-bezier(.14,1,.34,1), filter .6s var(--ease);
}
.hero-carousel-control:hover .hero-carousel-control__thumb{
  filter:grayscale(0);
}

/* ---------- Scroll — SOLID WHITE circle (bottom-right) ---------- */
.hero-scroll{
  position:absolute;
  z-index:500;
  bottom:2rem;
  right:2rem;
  width:7.2rem;
  height:7.2rem;
  background:#fff;
  color:#000;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-weight:600;
  font-size:1.4rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  overflow:hidden;
  transform:scale(0);          /* hidden until intro completes */
  transition:transform 1s cubic-bezier(.9,0,.1,1) .65s;
}
.is-loaded .hero-scroll{ transform:scale(1); }
@media (min-width:1024px){
  .hero-scroll{
    bottom:.75vw;
    right:.75vw;
    width:5.5vw;
    height:5.5vw;
    font-size:.875vw;
  }
}
@media (max-width:767px){
  .hero-scroll{ display:none; }
}
.hero-scroll:hover{
  transform:scale(1.08);
}
.hero-scroll__label{
  display:inline-block;
  animation:bob 2.4s var(--ease) infinite;
}
@keyframes bob{ 50%{ transform:translateY(-2px); } }

/* =========================================================
   INNER PAGES — shared layout for /work/, /about/, /services/, /news/, /contact/
   and individual project case-study pages.
   ========================================================= */
/* Topbar always in "scrolled past hero" state on inner pages (there is no
   full-bleed dark hero to sit over). Same for the topbar CTA and contact
   float — they should be visible from page-load, not gated behind scroll. */
body.is-inner-page .topbar{
  color:var(--fg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
}
body.is-inner-page .topbar::before{ opacity:1; }
body.is-inner-page .brand{ color:var(--fg); }
body.is-inner-page .topbar-cta{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
body.is-inner-page .contact-float{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
body.is-inner-page .contact-float__item{
  opacity:1;
  transform:translateY(0);
}
@media (max-width:640px){
  body.is-inner-page .contact-float{ transform:translate(-50%, 0); }
}
/* On inner pages, the scroll-nav at the bottom has no meaningful section
   labels to track, so we hide it. */
body.is-inner-page .scroll-nav{ display:none; }

/* Page header — the section that opens every inner page. Larger than a
   normal section header, with the section number, the H1, and an optional
   lede paragraph. Sits below the topbar with enough padding to clear it.
   On mobile the top padding tightens up — the topbar is shorter and we
   want the page title above the fold. */
.page-header{
  position:relative;
  padding-top:calc(clamp(54px, 4vw, 72px) + clamp(64px, 9vw, 140px));
  padding-bottom:clamp(40px, 6vw, 88px);
  border-bottom:1px solid var(--line);
}
@media (max-width:640px){
  .page-header{
    padding-top:calc(clamp(54px, 4vw, 72px) + 28px);
    padding-bottom:36px;
  }
  .page-header__title{ max-width:none; }
  .page-header__lede{ font-size:17px; }
  .page-header__meta{
    grid-template-columns:1fr 1fr;
    gap:18px 24px;
    margin-top:32px;
    padding-top:24px;
  }
}
.page-header__eyebrow{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--fg-dim);
  margin:0 0 clamp(24px, 3vw, 36px);
}
.page-header__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(56px, 11vw, 168px);
  line-height:.92;
  letter-spacing:-.03em;
  margin:0;
  max-width:14ch;
  text-transform:uppercase;
}
.page-header__title em{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  color:var(--fg-dim);
  letter-spacing:-.02em;
  text-transform:none;
}
.page-header__lede{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(19px, 1.6vw, 26px);
  line-height:1.4;
  color:var(--fg);
  max-width:48ch;
  margin:clamp(28px, 3.6vw, 44px) 0 0;
  letter-spacing:-.005em;
}
.page-header__meta{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(20px, 3vw, 40px);
  border-top:1px solid var(--line);
  padding-top:clamp(28px, 3.4vw, 44px);
  margin-top:clamp(44px, 6vw, 72px);
}
.page-header__meta dt{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--fg-dim);
  margin:0 0 8px;
}
.page-header__meta dd{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(15px, 1.2vw, 19px);
  letter-spacing:-.005em;
  color:var(--fg);
  margin:0;
}
@media (max-width:780px){
  .page-header__meta{ grid-template-columns:repeat(2, 1fr); gap:24px; }
}

/* Project case-study specific bits — hero image, body grid, gallery.
   The hero combines two motions: (1) a slow Ken-Burns scale over 24s, and
   (2) a scroll-driven translateY parallax set by JS via --parallax. The
   combination makes the hero feel like a deep, breathing photograph.
   IMPORTANT: explicit margin:0 — the browser's default <figure> margin
   was creating a left/right gap that clipped the image on mobile. */
.project-hero{
  position:relative;
  width:100%;
  margin:0;
  aspect-ratio:16/9;
  background:#0c0c0c;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.project-hero img{
  width:100%;
  height:115%;                                    /* 15% extra so parallax can shift without revealing edges */
  object-fit:cover;
  object-position:center;
  display:block;
  transform:translate3d(0, calc(var(--parallax, 0) * 1px), 0) scale(1.06);
  will-change:transform;
  animation:project-kenburns 24s ease-in-out infinite alternate;
}
@keyframes project-kenburns{
  from{ transform:translate3d(0, calc(var(--parallax, 0) * 1px), 0) scale(1.06); }
  to  { transform:translate3d(0, calc(var(--parallax, 0) * 1px), 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce){
  .project-hero img{ animation:none; transform:scale(1.06); }
}
/* Mobile: drop the parallax overhang + Ken Burns so the hero image
   sits stable in its frame. The 115% height + scroll-driven shift
   was pulling the photo around on small screens and clipping content. */
@media (max-width:780px){
  .project-hero{ aspect-ratio:4/3; }
  .project-hero img{
    height:100%;
    transform:scale(1.02);
    animation:none;
  }
}
@media (max-width:780px){
  .project-hero{ aspect-ratio:4/3; }
}

.project-body{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:clamp(40px, 6vw, 96px);
  padding:var(--section-y) 0;
  border-bottom:1px solid var(--line);
}
.project-body__aside h3{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--fg-dim);
  margin:0 0 14px;
}
.project-body__aside p{
  font-size:15px;
  color:var(--fg);
  margin:0 0 24px;
  max-width:32ch;
}
.project-body__main p{
  font-size:clamp(17px, 1.3vw, 21px);
  line-height:1.55;
  margin:0 0 1.2em;
  max-width:60ch;
  color:var(--fg);
}
.project-body__main p.lede{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-size:clamp(22px, 2vw, 32px);
  line-height:1.35;
  color:var(--fg);
  margin-bottom:1.5em;
  max-width:42ch;
}
@media (max-width:880px){
  .project-body{ grid-template-columns:1fr; gap:32px; }
}

/* Project gallery — END-TO-END full-bleed per client feedback (comment 22).
   Breaks out of .container to span the full viewport width using the
   100vw + negative-margin trick. Individual figures fill the row, with
   .full items spanning both grid columns for visual rhythm. */
.project-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(8px, .8vw, 16px);
  padding:var(--section-y) 0;
  /* Break out of the parent container — span full viewport width */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.project-gallery figure{
  margin:0;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#0c0c0c;
  cursor:zoom-in;
  position:relative;
}
.project-gallery figure img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.project-gallery figure:hover img{ transform:scale(1.04); }
.project-gallery .full{ grid-column:1/-1; aspect-ratio:21/9; }
/* The project hero is also clickable as image #0 in the lightbox */
.project-hero{ cursor:zoom-in; }

/* Tiny "expand" affordance on each gallery figure — a small icon in the
   top-right corner that signals "this opens larger". Hidden on touch. */
.project-gallery figure::after{
  content:"";
  position:absolute;
  top:14px; right:14px;
  width:32px; height:32px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  background:rgba(10,10,10,.4);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size:10px 1px, 1px 10px;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
  opacity:0;
  transform:scale(.85);
  transition:opacity .35s var(--ease), transform .4s var(--ease);
  pointer-events:none;
  backdrop-filter:blur(4px);
}
.project-gallery figure:hover::after{
  opacity:1;
  transform:scale(1);
}
@media (hover:none){
  .project-gallery figure::after{ display:none; }
}
@media (max-width:780px){
  .project-gallery{ grid-template-columns:1fr; gap:8px; }
  .project-gallery .full{ aspect-ratio:16/9; }
}

/* =========================================================
   LIGHTBOX — full-screen image presentation. Click any project
   image to open in a clean modal with prev/next/close + caption.
   Built lazily by JS — only injected when first opened.
   ========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(8, 8, 8, .96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s cubic-bezier(.14, 1, .34, 1);
}
.lightbox.is-open{
  opacity:1;
  pointer-events:auto;
}
.lightbox__stage{
  position:relative;
  max-width:min(1400px, 92vw);
  max-height:88vh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  transform:scale(.96);
  transition:transform .45s cubic-bezier(.14, 1, .34, 1);
}
.lightbox.is-open .lightbox__stage{ transform:scale(1); }
.lightbox__img{
  max-width:100%;
  max-height:80vh;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
/* Category pill above the caption in the lightbox (work archive projects) */
.lightbox__category{
  display:inline-block;
  align-self:center;
  margin-bottom:10px;
  padding:6px 14px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:100px;
  font-family:var(--display);
  font-weight:600;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
}
.lightbox__caption{
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  text-align:center;
  max-width:60ch;
}
.lightbox__counter{
  position:fixed;
  top:24px;
  left:24px;
  font-family:var(--display);
  font-weight:500;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next{
  position:fixed;
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-family:var(--display);
  font-size:24px;
  line-height:1;
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.4);
  transform:scale(1.06);
}
.lightbox__close{ top:24px; right:24px; }
.lightbox__prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:24px; top:50%; transform:translateY(-50%); }
.lightbox__prev:hover{ transform:translateY(-50%) scale(1.06); }
.lightbox__next:hover{ transform:translateY(-50%) scale(1.06); }
@media (max-width:640px){
  .lightbox__close{ top:14px; right:14px; width:42px; height:42px; }
  .lightbox__prev{ left:10px; }
  .lightbox__next{ right:10px; }
  .lightbox__counter{ top:18px; left:18px; }
  .lightbox__img{ max-height:70vh; }
}
body.lightbox-open{
  overflow:hidden;
}

/* Lightbox "View case study" button — shown when a tile or trigger
   declared a data-case-study URL. Linked button under the caption. */
.lightbox__case-study{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border:1px solid rgba(255,255,255,.7);
  color:#fff;
  font-family:var(--display);
  font-weight:500;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  background:transparent;
  margin-top:8px;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__case-study:hover{
  background:#fff;
  color:#0a0a0a;
  transform:translateY(-1px);
}

/* =========================================================
   ARCHIVE — full-bleed masonry of project tiles on /work, with a
   floating sector filter and hover-reveal name/details overlay.
   Vertical + horizontal images mix together via varied tile ratios.
   ========================================================= */

/* ---- Floating sector filter bar ---- */
.archive-filter{
  position:sticky;
  top:clamp(54px, 4vw, 72px);              /* sticks just under the topbar */
  z-index:60;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:14px var(--pad);
  margin-bottom:clamp(10px, 1.2vw, 18px);
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.archive-filter__track{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  max-width:var(--max);
  margin:0 auto;
}
@media (max-width:680px){
  .archive-filter__track{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .archive-filter__track::-webkit-scrollbar{ display:none; }
}

/* ---- Mobile swipe indicator (hidden on desktop, where chips wrap) ---- */
.archive-filter__swipe{ display:none; }
@media (max-width:680px){
  .archive-filter__swipe{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:9px;
  }
  .archive-filter__swipe-label{
    flex-shrink:0;
    font-family:var(--display);
    font-weight:600;
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--fg-dim);
    /* gentle pulse to invite the first swipe; stops via JS once swiped */
    animation:swipe-nudge 1.8s ease-in-out infinite;
  }
  .archive-filter.is-swiped .archive-filter__swipe-label{ animation:none; opacity:.5; }
  .archive-filter__swipe-track{
    position:relative;
    flex:1;
    height:3px;
    border-radius:3px;
    background:var(--line);
    overflow:hidden;
  }
  .archive-filter__swipe-thumb{
    position:absolute;
    left:0; top:0; bottom:0;
    width:30%;                              /* JS sets width + left to reflect scroll */
    border-radius:3px;
    background:var(--fg);
    transition:left .12s linear, width .12s linear;
  }
}
@keyframes swipe-nudge{
  0%,100%{ transform:translateX(0); opacity:.7; }
  50%    { transform:translateX(3px); opacity:1; }
}
.archive-filter__chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:100px;
  background:transparent;
  color:var(--fg-dim);
  font-family:var(--display);
  font-weight:600;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.archive-filter__chip:hover{ color:var(--fg); border-color:var(--fg-dim); }
.archive-filter__chip.is-active{
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
}
.archive-filter__count{
  font-size:10px;
  font-weight:500;
  opacity:.6;
  letter-spacing:.1em;
}

/* ---- Masonry grid (full-bleed) ---- */
.archive-grid{
  list-style:none;
  margin:0;
  /* Organized uniform grid — equal tiles in clean rows + columns. */
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0 8px;
  box-sizing:border-box;
}
@media (min-width:1700px){ .archive-grid{ grid-template-columns:repeat(5, 1fr); } }
@media (max-width:1024px){ .archive-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:680px){  .archive-grid{ grid-template-columns:repeat(2, 1fr); gap:6px; padding:0 6px; } }

.archive-tile.is-hidden{ display:none; }
/* Smooth filter transition: the whole grid cross-fades. We fade the grid
   out, swap which tiles are hidden + jump to the top WHILE invisible (so
   the reflow is never seen), then fade back in. No per-tile blink, no
   visible layout jump. */
.archive-grid{ transition:opacity .24s var(--ease); }
.archive-grid.is-swapping{ opacity:0; }

.archive-tile__btn{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:0;
  cursor:zoom-in;
  color:inherit;
  font:inherit;
}
.archive-tile__fig{
  margin:0;
  position:relative;
  overflow:hidden;
  /* Subtle shimmer placeholder while the image loads, so the grid never
     shows flat black gaps as you scroll. */
  background:linear-gradient(110deg, #0c0c0c 30%, #18181a 50%, #0c0c0c 70%);
  background-size:200% 100%;
  animation:archive-shimmer 1.6s linear infinite;
  aspect-ratio:4/5;                 /* uniform ratio = organized rows */
}
@keyframes archive-shimmer{ to{ background-position:-200% 0; } }
.archive-tile__fig img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .9s var(--ease), filter .5s var(--ease);
  filter:grayscale(.12);
}
/* Fade each image in as it finishes loading (JS adds .is-loaded). The
   `js-fade` guard means images still show if JS is unavailable. */
.archive-grid.js-fade .archive-tile__img{
  opacity:0;
  transition:opacity .55s var(--ease), transform .9s var(--ease), filter .5s var(--ease);
}
.archive-grid.js-fade .archive-tile__img.is-loaded{ opacity:1; }
/* Once loaded, stop the shimmer to save paint work */
.archive-tile__fig:has(.archive-tile__img.is-loaded){ animation:none; }
/* Hover animation — gentle zoom + de-saturate, plus the overlay lifts */
.archive-tile__btn:hover .archive-tile__fig img{
  transform:scale(1.05);
  filter:grayscale(0);
}

/* ---- Name + details: ALWAYS visible over a permanent gradient grade ---- */
.archive-tile__overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:34px 14px 13px;
  /* Permanent gradient so the always-on text stays legible over any image */
  background:linear-gradient(to top, rgba(8,8,8,.88) 0%, rgba(8,8,8,.45) 50%, rgba(8,8,8,0) 100%);
  transition:transform .4s var(--ease);
  pointer-events:none;
}
/* Hover animation: details nudge up slightly */
.archive-tile__btn:hover .archive-tile__overlay{ transform:translateY(-3px); }
.archive-tile__name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(12px, .95vw, 15px);
  text-transform:uppercase;
  letter-spacing:.01em;
  color:#fff;
  line-height:1.15;
}
.archive-tile__tag{
  font-family:var(--display);
  font-weight:500;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  line-height:1.3;
}
/* Empty-state when a filter yields nothing (defensive — every sector has tiles) */
.archive-grid__empty{
  display:none;
  padding:48px 0;
  text-align:center;
  color:var(--fg-dim);
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:13px;
}

.project-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 64px);
  border-top:1px solid var(--line);
  /* Long-form padding so .container's horizontal var(--pad) survives the cascade */
  padding-top:clamp(48px, 6vw, 80px);
  padding-bottom:clamp(48px, 6vw, 80px);
}
.project-nav a{
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:transform .4s var(--ease);
}
.project-nav__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--fg-dim);
}
.project-nav__title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(22px, 2.4vw, 36px);
  letter-spacing:-.015em;
  line-height:1.1;
}
.project-nav a:hover{ transform:translateY(-2px); }
.project-nav a:hover .project-nav__title{ color:var(--fg); }
.project-nav .next{ text-align:right; align-items:flex-end; }
/* Mobile — single column with each link as a horizontal row card:
   label on the left, project title on the right. Fills the full row,
   no empty space, reads like a paginated index. */
@media (max-width:680px){
  .project-nav{
    grid-template-columns:1fr;
    gap:0;
    padding-top:clamp(28px, 6vw, 48px);
    padding-bottom:clamp(28px, 6vw, 48px);
    /* horizontal padding inherited from .container = var(--pad) */
  }
  .project-nav a{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
  }
  .project-nav a:last-child{ border-bottom:0; }
  .project-nav__label{
    font-size:11px;
    letter-spacing:.18em;
    flex-shrink:0;
  }
  .project-nav__title{
    font-size:18px;
    text-align:right;
    line-height:1.2;
    max-width:60%;
  }
  .project-nav .next{ text-align:right; align-items:center; }
  .project-nav a:hover{ transform:none; padding-left:4px; }
}

/* About-page additions */
/* About timeline — vertical line that draws from top as each entry enters
   the viewport. The line sits at the LEFT edge of the timeline column
   (inside the container, not floating in the gutter), and each entry has
   a deliberate padding-left so dates breathe away from the line.
   The line overlaps the border-tops (top:-1px, height:calc(100%+2px))
   so consecutive entries draw one continuous trail without segment gaps. */
.about-timeline{
  display:grid;
  grid-template-columns:140px 1fr clamp(180px, 24vw, 320px);
  gap:clamp(20px, 3vw, 48px);
  align-items:center;
  border-top:1px solid var(--line);
  padding:28px 0 28px clamp(20px, 2.4vw, 36px);
  position:relative;
}
.about-timeline__fig{
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#0c0c0c;
  border-radius:2px;
  justify-self:end;
  width:100%;
}
.about-timeline__fig img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.4s var(--ease);
  filter:grayscale(.1);
}
.about-timeline:hover .about-timeline__fig img{ transform:scale(1.04); filter:grayscale(0); }
.about-timeline + .about-timeline{ border-top:1px solid var(--line); }
.about-timeline::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:2px;
  height:0;
  background:var(--fg);
  transition:height 1.2s var(--ease-drop, cubic-bezier(.14,1,.34,1)) .3s;
}
.about-timeline.in::before{ height:calc(100% + 2px); }
@media (max-width:680px){
  .about-timeline{
    padding-left:18px;
    grid-template-columns:1fr;
    align-items:start;
  }
  .about-timeline__fig{
    justify-self:stretch;
    width:100%;
    aspect-ratio:16/10;
    margin-top:14px;
  }
}
.about-timeline__year{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(24px, 2.4vw, 36px);
  letter-spacing:-.015em;
  color:var(--fg);
}
.about-timeline__body{
  max-width:60ch;
}
.about-timeline__body h4{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(18px, 1.4vw, 22px);
  margin:0 0 6px;
  letter-spacing:-.005em;
}
.about-timeline__body p{
  font-size:16px;
  color:var(--fg-dim);
  margin:0;
}
@media (max-width:680px){
  .about-timeline{ grid-template-columns:1fr; gap:6px; }
}

/* Founder featured row — Manoj sits alone above the senior architects.
   Photo (or monogram) left, role + name + bio right. Per client comment 25. */
.team-founder{
  display:grid;
  grid-template-columns:minmax(260px, 38%) 1fr;
  gap:clamp(28px, 4vw, 64px);
  align-items:center;
  margin-top:clamp(40px, 5vw, 64px);
  margin-bottom:clamp(56px, 6vw, 88px);
}
.team-founder__photo{
  margin:0;
  aspect-ratio:1/1;
  background:#0c0c0c;
  overflow:hidden;
  position:relative;
}
.team-founder__photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.team-founder__role{
  font-family:var(--display);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--fg-dim);
  margin:0 0 12px;
}
.team-founder__name{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(36px, 4vw, 60px);
  letter-spacing:-.02em;
  margin:0 0 18px;
  line-height:1;
}
.team-founder__bio{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(17px, 1.3vw, 21px);
  line-height:1.5;
  color:var(--fg);
  margin:0;
  max-width:54ch;
}
@media (max-width:780px){
  .team-founder{
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:48px;
  }
  .team-founder__photo{ aspect-ratio:4/5; max-width:320px; }
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(28px, 4vw, 64px);
  margin-top:clamp(40px, 5vw, 64px);
}
.team-grid--juniors{
  grid-template-columns:repeat(2, 1fr);
  margin-top:0;
  max-width:880px;
}

/* Office photo block — placeholder until client provides a real shot. */
.team-office{
  margin:clamp(56px, 6vw, 88px) 0 0;
  aspect-ratio:21/9;
  background:#0c0c0c;
  position:relative;
  overflow:hidden;
}
.team-office__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px),
    radial-gradient(700px circle at 30% 40%, #1d1d1d, #0a0a0a 70%);
}
.team-office__label{
  font-family:var(--display);
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.32em;
  color:var(--fg-dim);
}
.team-office__caption{
  font-family:var(--display);
  font-style:italic;
  font-size:14px;
  color:var(--fg-dim);
}

/* Studio + team culture writeup */
.team-culture{
  margin:clamp(40px, 5vw, 64px) 0 0;
  max-width:62ch;
}
.team-culture__lede{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-size:clamp(22px, 2vw, 30px);
  line-height:1.25;
  color:var(--fg);
  margin:0 0 20px;
}
.team-culture p{
  font-size:16px;
  line-height:1.65;
  color:var(--fg-dim);
  margin:0 0 14px;
}

/* Larger monogram variant for the founder block when there is no photo */
.team-monogram--lg{
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.team-card h4{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(22px, 2.1vw, 32px);
  letter-spacing:-.015em;
  margin:0 0 6px;
}
.team-card p.role{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--fg-dim);
  margin:0 0 16px;
}
.team-card p.bio{
  font-size:15px;
  color:var(--fg-dim);
  margin:0;
  max-width:36ch;
}
@media (max-width:880px){
  .team-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .team-grid{ grid-template-columns:1fr; }
}

/* Services-page additions: each discipline gets a deep block */
.discipline{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:clamp(36px, 5vw, 80px);
  border-top:1px solid var(--line);
  padding:clamp(48px, 6vw, 80px) 0;
}
.discipline__head{
  position:sticky;
  top:120px;
  align-self:start;
}
.discipline__num{
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin:0 0 12px;
}
.discipline__name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(40px, 5vw, 76px);
  line-height:.98;
  letter-spacing:-.02em;
  margin:0 0 18px;
  text-transform:uppercase;
}
/* Tag — kept as Fraunces italic for the "lyrical accent" voice, but now
   small-caps tracked so it reads as a deliberate label, not a sentence. */
.discipline__tag{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(16px, 1.3vw, 20px);
  letter-spacing:.02em;
  color:var(--fg-dim);
  max-width:28ch;
  margin:0;
}
.discipline__body p{
  font-size:clamp(16px, 1.2vw, 19px);
  line-height:1.55;
  margin:0 0 1.2em;
  max-width:58ch;
}
.discipline__capabilities{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 24px;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.discipline__capabilities li{
  font-size:14px;
  color:var(--fg-dim);
  padding:4px 0;
  display:flex;
  align-items:center;
  gap:8px;
}
.discipline__capabilities li::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:var(--fg);
  opacity:.4;
}

/* Specialisms — the 5 disciplines nested inside the Design phase on
   /services. Compact 2-col grid (1-col mobile), strong name + Fraunces
   italic tagline, treated as a sub-section under Design. */
.specialisms{
  margin-top:clamp(36px, 4vw, 56px);
  padding-top:clamp(28px, 3vw, 40px);
  border-top:1px solid var(--line);
}
.specialisms__label{
  font-family:var(--display);
  font-weight:500;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin:0 0 clamp(20px, 2.4vw, 28px);
}
.specialisms__list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px clamp(20px, 2vw, 32px);
}
@media (max-width:560px){
  .specialisms__list{ grid-template-columns:1fr; }
}
.specialisms__list li{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.specialisms__list li strong{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(16px, 1.4vw, 19px);
  text-transform:uppercase;
  letter-spacing:-.005em;
  color:var(--fg);
}
.specialisms__list li em{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(14px, 1.1vw, 16px);
  color:var(--fg-dim);
  letter-spacing:.01em;
}
@media (max-width:880px){
  .discipline{ grid-template-columns:1fr; gap:24px; }
  .discipline__head{ position:static; }
}
@media (max-width:560px){
  .discipline{ padding:36px 0; }
  .discipline__name{ font-size:36px; }
  .discipline__capabilities{ grid-template-columns:1fr; }
}

/* =========================================================
   PILLAR — 2x2 grid block of strategic differentiators on /why-hao.
   Each pillar has a number, two-line name, body copy. Larger gap
   between pillars than between body paragraphs so they read as
   discrete propositions, not a continuous wall of text.
   ========================================================= */
.pillars{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(56px, 7vw, 112px) clamp(40px, 5vw, 80px);
  margin-top:clamp(40px, 5vw, 64px);
}
@media (max-width:880px){
  .pillars{ grid-template-columns:1fr; gap:clamp(40px, 6vw, 64px); }
}
.pillar__num{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(48px, 5vw, 80px);
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--fg-dim);
  margin:0 0 18px;
  background:linear-gradient(180deg, var(--fg) 30%, transparent);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:.55;
}
.pillar__name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(24px, 2.6vw, 36px);
  line-height:1.05;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0 0 clamp(18px, 2vw, 24px);
  color:var(--fg);
  max-width:18ch;
}
.pillar__body{
  font-size:clamp(15px, 1.15vw, 17px);
  line-height:1.6;
  color:var(--fg-dim);
  margin:0 0 1em;
  max-width:46ch;
}
.pillar__body:last-child{ margin-bottom:0; }

/* =========================================================
   GENERIC SECTION
   ========================================================= */
.section{
  padding:var(--section-y) 0;
  border-top:1px solid var(--line);
}
.section-no{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--fg-dim);
  margin:0 0 36px;
}
.display{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(40px, 6.4vw, 104px);
  line-height:.98;
  letter-spacing:-.025em;
  margin:0 0 56px;
  max-width:14ch;
  text-transform:uppercase;          /* loud architectural voice — italic accents below opt out */
}
/* Italic accents inside display heads stay in sentence/script case so
   the typographic counterpoint reads cleanly against the uppercase. */
.display .muted,
.display__italic,
.display em{
  text-transform:none;
}

/* Word-reveal — each word sits in an overflow:hidden span and its inner
   slides up from below when the heading enters the viewport. Stagger is
   applied per-word via inline transition-delay (set by JS).
   The padding-bottom MUST be big enough to clear the deepest descender
   on the page — Fraunces italic `g`, `p`, `y`, `j` extend ~0.2em below
   the baseline, so .22em keeps every glyph fully inside the clipping
   rectangle. (Was .08em — was clipping italic descenders site-wide.) */
.display__word{
  display:inline-block;
  vertical-align:bottom;
  /* overflow:clip + overflow-clip-margin is the definitive descender fix:
     it clips the word while it slides up from translateY(110%) (far below,
     well past the .55em margin) so the reveal still works, BUT it leaves a
     .55em band of overflow VISIBLE around the box — so the resting glyph's
     descender (g, p, y, j ≈ .21em below baseline) is NEVER clipped. This is
     CSS-only and has no dependency on animation timing.
     Fallback: browsers without overflow-clip-margin treat `overflow:clip`
     like `hidden`; the script.js transitionend handler then flips these to
     overflow:visible as a backstop. */
  overflow:clip;
  overflow-clip-margin:.55em;
}
.display__word-inner{
  display:inline-block;
  transform:translateY(110%);
  transition:transform 1s cubic-bezier(.14, 1, .34, 1);
  will-change:transform;
}
.display.is-revealed .display__word-inner{
  transform:translateY(0);
}
.display .muted{ color:var(--fg-dim); font-weight:500; font-style:italic; }
.h-sm{
  font-family:var(--display);
  font-weight:600;
  font-size:18px;
  letter-spacing:-.01em;
  margin:0 0 10px;
}
.lede{
  font-size:clamp(17px, 1.4vw, 21px);
  line-height:1.55;
  color:var(--fg);
  max-width:48ch;
}
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:36px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.22em;
  position:relative;
}
.link-arrow::after{
  content:"";
  position:absolute;
  left:0; right:38px; bottom:-6px;
  height:1px;
  background:currentColor;
  transform-origin:left;
  transition:transform .5s var(--ease);
}
.link-arrow svg{ transition:transform .4s var(--ease); }
.link-arrow:hover svg{ transform:translateX(6px); }
.link-arrow:hover::after{ transform:scaleX(.4); }

/* =========================================================
   INTRO
   ========================================================= */
.intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 80px);
  margin-bottom:8px;
}
@media (max-width:780px){
  .intro-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   SERVICES (text-mask hover swap)
   ========================================================= */
.service-list{
  border-top:1px solid var(--line);
}
.service{
  border-bottom:1px solid var(--line);
}
.service-row{
  display:grid;
  grid-template-columns:84px 1fr auto;
  align-items:center;
  gap:28px;
  padding:clamp(22px, 3vw, 38px) 0;
  transition:padding .4s var(--ease);
}
.service-row:hover{ padding-left:18px; }
.service-num{
  font-size:13px;
  letter-spacing:.22em;
  color:var(--fg-dim);
}
.service-name{
  position:relative;
  display:block;
  font-family:var(--display);
  font-weight:700;
  /* Reduced from 6vw/96px — the old size made single long words like
     "ARCHITECTURE" wider than their grid column, so the clip below
     chopped the final letter. This size keeps every discipline name
     inside the column at all viewport widths. */
  font-size:clamp(34px, 4.6vw, 76px);
  line-height:1;
  letter-spacing:-.02em;
  text-transform:uppercase;          /* match the loud architectural voice */
  /* The hover text-swap slides two stacked layers VERTICALLY, so we only
     need to clip top + bottom. Using clip-path with a huge negative right
     inset means the top/bottom are clipped (hiding the off-position layer)
     while horizontal overflow is NEVER clipped — so a long word can never
     have its last letter cut off again. (Was `overflow:hidden`, which
     clipped both axes and ate the "E" off "ARCHITECTURE".) */
  -webkit-clip-path:inset(0 -100vw 0 0);
  clip-path:inset(0 -100vw 0 0);
}
.service-name .layer{
  display:block;
  transition:transform .55s var(--ease);
}
.service-name .layer.bottom{
  position:absolute;
  top:100%;
  left:0;
  color:var(--fg-dim);
  font-style:italic;
  font-weight:500;
}
.service-row:hover .service-name .layer.top{ transform:translateY(-100%); }
.service-row:hover .service-name .layer.bottom{ transform:translateY(-100%); }
.service-tag{
  text-align:right;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--fg-dim);
  max-width:34ch;
}
@media (max-width:780px){
  /* Tighter row layout on mobile so the discipline name doesn't get
     pushed off the right edge by an oversized number column or gap. */
  .service-row{
    grid-template-columns:auto 1fr;
    gap:14px;                          /* down from 28px */
    padding:clamp(18px, 3.6vw, 26px) 0;
  }
  .service-row:hover{ padding-left:8px; }
  .service-num{
    font-size:11px;
    letter-spacing:.18em;
    align-self:start;
    padding-top:8px;                   /* visually align with the cap height of the name */
  }
  .service-name{
    /* Shrink the lower bound — was clamp(40px, 6vw, 96px), which
       floored at 40px and overflowed narrow viewports. The 7.6vw
       middle term smoothly scales down on phones. */
    font-size:clamp(26px, 7.6vw, 56px);
    letter-spacing:-.01em;
  }
  .service-tag{ display:none; }
}
@media (max-width:380px){
  /* Extra-narrow phones (iPhone SE, etc.) — drop the number column
     entirely so the discipline name has the full row to itself. */
  .service-row{ grid-template-columns:1fr; gap:4px; }
  .service-num{ font-size:10px; padding-top:0; opacity:.7; }
}

/* =========================================================
   WORK — shed.design list-item pattern
   ========================================================= */

/* --- Section header: small pills on the left, "See all" pill on right --- */
.work__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding-bottom:clamp(18px, 1.4vw, 28px);
  flex-wrap:wrap;
}
.work__header-left{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.work__see-all{ display:inline-flex; }

/* Italic display variant for headlines */
.display__italic{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  letter-spacing:-.015em;
  color:var(--fg-dim);
}

/* ─────────────────────────────────────────────────────────
   GLOBAL DESCENDER CLEARANCE — Fraunces italic glyphs
   (g, p, y, j, f, q) extend up to .22em below the baseline
   in Fraunces' italic axis. There are TWO problems we have
   to solve:

     1) Clipping — when an italic accent sits inside an
        overflow:hidden container (e.g. the word-reveal
        spans), the descender gets visually clipped.
     2) Line collision — when an italic accent runs to a
        second line (e.g. "shaping the / communities we
        work / in.") and the heading uses a tight
        line-height like .98, descenders from line N
        collide visibly with ascenders from line N+1.

   The rule below addresses both: padding-bottom for the
   clipping rectangle, and a bumped line-height so multi-
   line italic phrases have breathing room. The negative
   margin cancels the padding so single-line italic
   accents (e.g. "of building briefs.", "to HAO.") do not
   shift the layout above them.
   ───────────────────────────────────────────────────────── */
.display__italic,
.display em,
.display .muted,
.page-header__title em,
.why-teaser__title em,
.cta-block__title em,
.discipline__name em,
.archive-cat__title em,
.team-culture__lede,
.team-founder__name em,
.pull-quote__text em,
.sector-strip__title-em,
.list-item__title em{
  display:inline-block;
  /* 1.22 keeps multi-line italic phrases from colliding descender-to-
     ascender. The real guarantee against clipping is the JS that flips
     the word-reveal spans to overflow:visible once they finish
     animating (see script.js) — this line-height is purely for line
     rhythm now, not a clipping workaround. */
  line-height:1.22;
}
/* (Descender clearance for word-reveal spans is now handled universally by
   `.display__word { overflow:clip; overflow-clip-margin }` above — no
   per-word padding hacks needed.) */

/* --- Pills (shed's title-pill component, simplified to CSS border) --- */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:1.6rem;
  padding:0 .55rem;
  font-family:var(--display);
  font-weight:500;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg);
  line-height:1;
  white-space:nowrap;
}
.pill--bordered{
  border:1px solid currentColor;
  border-radius:999px;
}
.pill--lg{
  height:2.6rem;
  padding:0 .9rem;
  font-size:12px;
  letter-spacing:.08em;
}
.pill--solid-on-img{
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
@media (min-width:1024px){
  .pill{
    height:1.05vw;
    padding:0 .4vw;
    font-size:.72vw;
  }
  .pill--lg{
    height:1.625vw;
    padding:0 .6vw;
    font-size:.825vw;
  }
}

/* Hover state for the section's "See all" pill — fill on hover */
.work__see-all .pill{ transition:background-color .4s var(--ease), color .4s var(--ease); }
.work__see-all:hover .pill{ background:var(--fg); color:var(--bg); }

/* --- The grid --- */
.work-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(48px, 6vw, 96px) clamp(20px, 2.4vw, 36px);
  margin-top:clamp(28px, 4vw, 56px);
}
@media (min-width:1024px){
  .work-grid{ grid-template-columns:1fr 1fr; }
}
/* Cinematic cascade — work-grid tiles get a punchier reveal: bigger
   translate distance + longer duration so the stagger reads as a
   deliberate sequence rather than a quick fade. JS supplies --delay. */
.work-grid > .list-item.reveal{
  transform:translateY(64px);
  transition:opacity 1s cubic-bezier(.14, 1, .34, 1), transform 1.1s cubic-bezier(.14, 1, .34, 1);
}
.work-grid > .list-item.reveal.in{
  transform:translateY(0);
}

/* --- List item card --- */
.list-item{
  display:flex;
  flex-direction:column;
}
.list-item__link{
  display:flex;
  flex-direction:column;
  row-gap:clamp(14px, 1vw, 24px);
  color:inherit;
  text-decoration:none;
}

/* Image wrapper with absolute-positioned tags overlay */
.list-item__fig-wrapper{
  position:relative;
  width:100%;
  overflow:hidden;
}
.list-item__tags{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  padding:.8rem;
  margin:0;
  list-style:none;
}
@media (min-width:1024px){
  .list-item__tags{
    gap:.5vw;
    padding:.6vw .75vw;
  }
}
.list-item__fig{
  position:relative;
  width:100%;
  aspect-ratio: 374 / 231;     /* mobile — shed exact */
  margin:0;
  overflow:hidden;
  background:#1c1c1c1a;
}
@media (min-width:1024px){
  .list-item__fig{ aspect-ratio: 517 / 321; }   /* desktop — shed exact */
}
.list-item__fig img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.3s cubic-bezier(.14,1,.34,1);
}
.list-item__link:hover .list-item__fig--main img{
  transform:scale(1.04);
}

/* Curtain-drop hover reveal — same effect as the hero slide transition.
   The hover figure is fully clipped from the bottom (only top edge visible)
   by default, and on hover the bottom inset animates 100% → 0%, dropping
   the alternative image into view from top to bottom. */
.list-item__fig--hover{
  position:absolute;
  inset:0;
  z-index:1;
  -webkit-clip-path:inset(0 0 100% 0);
  clip-path:inset(0 0 100% 0);
  transition:
    -webkit-clip-path 1.2s cubic-bezier(.22, 1, .36, 1),
    clip-path 1.2s cubic-bezier(.22, 1, .36, 1);
  pointer-events:none;
  will-change:clip-path;
}
.list-item__fig--hover img{
  transform:scale(1.04);
  transition:transform 1.6s cubic-bezier(.14,1,.34,1);
}
.list-item__link:hover .list-item__fig--hover{
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
}
.list-item__link:hover .list-item__fig--hover img{ transform:scale(1); }

/* Touch devices skip the hover effect (no input mechanism for it) */
@media (hover:none){
  .list-item__fig--hover{ display:none; }
}

/* Typographic placeholder when we don't have a real render yet */
.list-item__fig--placeholder{
  background:
    radial-gradient(800px circle at 30% 20%, #1d1d1d 0%, transparent 55%),
    radial-gradient(700px circle at 80% 90%, #141414 0%, transparent 60%),
    #0c0c0c;
  display:flex;
  align-items:center;
  justify-content:center;
}
.list-item__fig--placeholder::after{
  content:attr(data-letters);
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(56px, 8vw, 132px);
  letter-spacing:-.04em;
  background:linear-gradient(180deg,#2a2a2a,#141414);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:transform 1.2s cubic-bezier(.14,1,.34,1);
}
.list-item__link:hover .list-item__fig--placeholder::after{ transform:scale(1.06); }

/* =========================================================
   HOVER GRADE — subtle filter punch on the image when hovering
   a project tile. The actual "VIEW" pill is the follow-cursor
   (see CURSOR section below) restyled to the client's spec —
   translucent white bubble with a thin black ring.
   ========================================================= */
.section.work .list-item__fig-wrapper{ isolation:isolate; }
.section.work .list-item__fig-wrapper .list-item__fig--main img{
  transition:transform 1.3s cubic-bezier(.14,1,.34,1),
             filter .55s var(--ease);
}
.section.work .list-item__link:hover .list-item__fig--main img{
  filter:contrast(1.05) saturate(1.1) brightness(.94);
}
.section.work .list-item__title{
  transition:letter-spacing .5s var(--ease), color .3s var(--ease);
}
.section.work .list-item__link:hover .list-item__title{
  letter-spacing:.1em;
  color:var(--fg);
}

/* Featured items: keep the bigger feature treatment for items 1 & 2 — shed uses
   asymmetric aspect ratios for the first row sometimes. We keep them uniform. */
.list-item--feature .list-item__fig{
  aspect-ratio: 374 / 231;
}
@media (min-width:1024px){
  .list-item--feature .list-item__fig{ aspect-ratio: 517 / 321; }
}

/* --- Content block below image: tiny title, big serif excerpt --- */
.list-item__content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5rem;
  max-width:60ch;
}
.list-item__title{
  font-family:var(--display);
  font-weight:800;                /* BOLD per client feedback */
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0;
  color:var(--fg);
  line-height:1.2;
}
@media (min-width:1024px){
  .list-item__title{
    font-size:.9vw;
    letter-spacing:.05em;
  }
}
/* Project tile DESCRIPTION — sans-serif, non-bold, per client request.
   The title above stays bold uppercase Inter Tight; the description sits
   below in lighter sans-serif Inter so the two read as a clear hierarchy
   (heading vs supporting line) and there is no serif "tail" font on the
   work cards anywhere they appear (home Selected Work + /work top band). */
.list-item__excerpt{
  font-family:var(--body);                   /* Inter — no more Fraunces */
  font-weight:400;
  font-size:15px;
  line-height:1.45;
  letter-spacing:-.005em;
  color:var(--fg-dim);                       /* lighter so title still leads */
  margin:0;
  max-width:46ch;
}
@media (min-width:1024px){
  .list-item__excerpt{
    font-size:clamp(14px, .98vw, 17px);
    line-height:1.45;
  }
}

/* Subtle hover lift on the whole card */
.list-item__link{
  transition:transform .5s var(--ease);
}
.list-item__link:hover{ transform:translateY(-3px); }

/* =========================================================
   ARCHIVE LIST — compact text-only project archive used on /work
   below the featured 6. Each row: name (bold) + tag (location · type).
   Hover reveals an arrow indicator. No images by design — fast to
   scan, fast to load, scales to 50+ projects.
   ========================================================= */
.archive-list{
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 clamp(20px, 3vw, 48px);
}
@media (max-width:780px){
  .archive-list{ grid-template-columns:1fr; }
}
.archive-list li{
  border-bottom:1px solid var(--line);
  position:relative;
}
.archive-list a{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  padding:18px 0;
  transition:padding .35s var(--ease);
}
.archive-list a:hover{ padding-left:10px; }
.archive-list__name{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(15px, 1.2vw, 18px);
  letter-spacing:-.005em;
  color:var(--fg);
  text-transform:uppercase;
}
.archive-list__tag{
  font-family:var(--display);
  font-weight:500;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  white-space:nowrap;
}
@media (max-width:560px){
  .archive-list a{ grid-template-columns:1fr; gap:4px; padding:14px 0; }
  .archive-list__tag{ font-size:10px; letter-spacing:.14em; }
}

/* Archive category headings */
.archive-cat{
  margin-top:clamp(48px, 6vw, 80px);
}
.archive-cat:first-child{ margin-top:0; }
.archive-cat__title{
  font-family:var(--display);
  font-weight:500;                /* unbold per client feedback */
  font-size:clamp(38px, 4.6vw, 72px);  /* bigger per client feedback */
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0 0 clamp(20px, 2.4vw, 32px);
  display:flex;
  align-items:baseline;
  gap:18px;
  color:#fff;                     /* always white per client feedback */
}
/* Count caption hidden — client asked to remove */
.archive-cat__count{ display:none; }

/* Mobile accordion — each .archive-cat collapses below 640px. Heading
   becomes a tap target with a + / × toggle; first category default-open. */
@media (max-width:640px){
  .archive-cat{
    margin-top:0;
    border-top:1px solid var(--line);
  }
  .archive-cat:last-of-type{ border-bottom:1px solid var(--line); }
  .archive-cat__title{
    cursor:pointer;
    margin:0;
    padding:18px 0;
    font-size:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    gap:12px;
  }
  .archive-cat__title::after{
    content:"";
    display:inline-block;
    width:13px; height:13px;
    flex-shrink:0;
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-size:13px 1px, 1px 13px;
    background-position:center;
    background-repeat:no-repeat;
    transition:transform .35s cubic-bezier(.14, 1, .34, 1);
    opacity:.65;
  }
  .archive-cat[data-open="true"] .archive-cat__title::after{
    transform:rotate(45deg);
    opacity:1;
  }
  .archive-cat__count{ font-size:.65em; }
  /* Body collapses */
  .archive-cat .archive-grid{
    max-height:0;
    overflow:hidden;
    margin:0;
    transition:max-height .5s cubic-bezier(.14, 1, .34, 1);
  }
  .archive-cat[data-open="true"] .archive-grid{
    max-height:4000px;
    padding-bottom:24px;
  }
}

/* =========================================================
   SECTOR STRIP — homepage 5-tile band that mirrors the work
   page's archive categories and the footer "Sectors" column.
   Each tile jumps to /work.html#cat-* on the work page.
   ========================================================= */
.sector-strip{
  border-top:1px solid var(--line);
  padding-top:clamp(48px,5vw,72px);
  padding-bottom:clamp(48px,5vw,72px);
}
.sector-strip .container{ padding-left:var(--pad); padding-right:var(--pad); }
.sector-strip__header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin-bottom:clamp(28px,3.5vw,44px);
  flex-wrap:wrap;
}
.sector-strip__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,3.6vw,46px);
  line-height:1.05;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  margin:0;
  color:var(--fg);
}
.sector-strip__title-em{
  font-family:var(--italic);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:-0.01em;
  color:var(--fg-dim);
  font-size:0.62em;
  display:inline-block;
  margin-left:0.2em;
}
.sector-strip__all{
  font-family:var(--ui);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:11px;
  font-weight:600;
  color:var(--fg-dim);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:color 0.3s var(--ease);
}
.sector-strip__all:hover{ color:var(--fg); }
.sector-strip__grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(8px,1vw,16px);
}
@media (max-width:1000px){
  .sector-strip__grid{ grid-template-columns:repeat(3,1fr); }
  .sector-strip__tile:nth-child(n+4){ /* keep all 5 visible */ }
}
@media (max-width:680px){
  .sector-strip__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:420px){
  .sector-strip__grid{ grid-template-columns:1fr; }
}
.sector-strip__tile{ position:relative; }
.sector-strip__tile > a{
  display:block;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  aspect-ratio:3/4;
  background:#0a0a0a;
  isolation:isolate;
}
.sector-strip__fig{
  margin:0;
  position:absolute;
  inset:0;
  z-index:1;
}
.sector-strip__fig img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.7s var(--ease), opacity 0.4s var(--ease);
  opacity:0.78;
  display:block;
}
.sector-strip__tile > a::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.72) 100%);
  z-index:2;
}
.sector-strip__tile > a:hover .sector-strip__fig img{
  transform:scale(1.06);
  opacity:1;
  filter:contrast(1.1) saturate(1.18);
}
.sector-strip__fig img{ filter:contrast(1) saturate(1); }

/* HUD corner brackets — same vocabulary as the work-grid hover, scaled
   down for the smaller sector tile (8px inset, 12px arms vs 10/18 on
   work). Drawn as 8 thin lines via layered gradients (2 per corner). */
.sector-strip__tile > a::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(90deg,#fff,#fff) left  top    / 12px 1px no-repeat,
    linear-gradient(0deg, #fff,#fff) left  top    / 1px 12px no-repeat,
    linear-gradient(90deg,#fff,#fff) right top    / 12px 1px no-repeat,
    linear-gradient(0deg, #fff,#fff) right top    / 1px 12px no-repeat,
    linear-gradient(90deg,#fff,#fff) left  bottom / 12px 1px no-repeat,
    linear-gradient(0deg, #fff,#fff) left  bottom / 1px 12px no-repeat,
    linear-gradient(90deg,#fff,#fff) right bottom / 12px 1px no-repeat,
    linear-gradient(0deg, #fff,#fff) right bottom / 1px 12px no-repeat;
  opacity:0;
  transform:scale(1.08);
  transition:opacity .45s var(--ease), transform .55s cubic-bezier(.22,1,.36,1);
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.4));
}
.sector-strip__tile > a:hover::before{
  opacity:1;
  transform:scale(1);
}

/* Scanline sweep across the figure — single pass on hover. */
.sector-strip__fig::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:1px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0) 8%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,0) 92%,
    transparent 100%);
  box-shadow:0 0 8px rgba(255,255,255,.6), 0 0 2px rgba(255,255,255,.85);
  opacity:0;
  mix-blend-mode:screen;
}
@keyframes hao-sector-scanline{
  0%   { opacity:0; top:0%; }
  10%  { opacity:.9; }
  90%  { opacity:.9; }
  100% { opacity:0; top:100%; }
}
.sector-strip__tile > a:hover .sector-strip__fig::after{
  animation:hao-sector-scanline 1.2s cubic-bezier(.55,.08,.32,1) both;
}

.sector-strip__label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:clamp(14px,1.6vw,22px);
  z-index:5;             /* above the HUD brackets and scanline */
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sector-strip__name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(15px,1.5vw,20px);
  line-height:1.1;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  color:#fff;
  transition:letter-spacing .5s var(--ease), padding-right .5s var(--ease);
  position:relative;
}
/* Arrow chevron that slides in from the left on hover — using ::after
   pseudo so no DOM change is needed. Starts hidden + offset, animates in. */
.sector-strip__name::after{
  content:"";
  display:inline-block;
  width:0;
  height:1px;
  background:#fff;
  vertical-align:middle;
  margin-left:0;
  opacity:0;
  transition:width .5s cubic-bezier(.22,1,.36,1) .1s,
             opacity .35s var(--ease),
             margin-left .5s var(--ease) .1s;
  box-shadow:0 0 4px rgba(255,255,255,.6);
}
.sector-strip__tile > a:hover .sector-strip__name{
  letter-spacing:.04em;
}
.sector-strip__tile > a:hover .sector-strip__name::after{
  width:clamp(18px,2.4vw,30px);
  opacity:1;
  margin-left:.6em;
}
.sector-strip__count{
  font-family:var(--ui);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.7);
  font-weight:500;
  transition:color .3s var(--ease);
}
.sector-strip__tile > a:hover .sector-strip__count{
  color:rgba(255,255,255,1);
}

/* Reduce-motion + touch fallbacks */
@media (prefers-reduced-motion:reduce){
  .sector-strip__tile > a:hover .sector-strip__fig::after{ animation:none; }
}
@media (hover:none){
  .sector-strip__tile > a::before,
  .sector-strip__fig::after{ display:none; }
}

/* =========================================================
   WHY HAO TEASER — homepage section linking to the full
   positioning page. Big number + statement + arrow.
   ========================================================= */
.why-teaser{
  border-top:1px solid var(--line);
  padding:var(--section-y) 0;
  position:relative;
}
.why-teaser__container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px, 5vw, 96px);
  align-items:end;
}
@media (max-width:880px){
  .why-teaser__container{ grid-template-columns:1fr; }
}
.why-teaser__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(40px, 6.4vw, 104px);
  line-height:.95;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:0;
  color:var(--fg);
}
.why-teaser__title em{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  letter-spacing:-.015em;
  color:var(--fg-dim);
  text-transform:none;
}
.why-teaser__body{
  max-width:42ch;
}
.why-teaser__body p{
  font-size:clamp(17px, 1.4vw, 21px);
  line-height:1.5;
  color:var(--fg-dim);
  margin:0 0 28px;
}

/* =========================================================
   STATS
   ========================================================= */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  margin-bottom:80px;
}
.stats li{
  position:relative;
  padding:28px 24px 28px 0;
  border-bottom:1px solid var(--line);
}
.stats li + li{ border-left:1px solid var(--line); padding-left:28px; }
.stat-num{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(48px, 6vw, 88px);
  line-height:1;
  letter-spacing:-.02em;
}
.plus{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(20px, 2vw, 32px);
  color:var(--fg-dim);
  margin-left:4px;
}
.stats p{
  margin:14px 0 0;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--fg-dim);
}
@media (max-width:780px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats li:nth-child(2){ border-left:1px solid var(--line); }
  .stats li:nth-child(3){ border-left:0; padding-left:0; }
}

.about-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px, 3vw, 56px);
}
@media (max-width:780px){
  .about-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   SECTORS
   ========================================================= */
.sectors-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 96px);
  border-top:1px solid var(--line);
  padding-top:32px;
}
.sectors-col li{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(20px, 2.2vw, 32px);
  letter-spacing:-.01em;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.sectors-col li::after{
  content:"";
  width:8px; height:8px;
  border-right:1px solid var(--fg-dim);
  border-top:1px solid var(--fg-dim);
  transform:rotate(45deg);
  opacity:.55;
}

/* =========================================================
   NEWS LIST
   ========================================================= */
.news-list{
  border-top:1px solid var(--line);
}
.news-list li{ border-bottom:1px solid var(--line); }
.news-list a{
  display:grid;
  /* Four columns: [thumb 80px] [date 140px] [title 1fr] [arrow auto] */
  grid-template-columns:80px 140px 1fr auto;
  gap:28px;
  align-items:center;
  padding:20px 0;
  transition:padding .35s var(--ease);
}
.news-list a:hover{ padding-left:14px; }
.news-date{
  font-size:13px;
  letter-spacing:.22em;
  color:var(--fg-dim);
  text-transform:uppercase;
}
.news-title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(20px, 2vw, 30px);
  letter-spacing:-.01em;
}
.news-arrow{
  font-size:22px;
  transition:transform .35s var(--ease);
}
.news-list a:hover .news-arrow{ transform:translateX(8px); }
@media (max-width:680px){
  .news-list a{ grid-template-columns:1fr auto; }
  .news-date{ grid-column:1 / -1; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(28px, 5vw, 80px);
  border-top:1px solid var(--line);
  padding-top:48px;
}
@media (max-width:880px){
  .contact-grid{ grid-template-columns:1fr; }
}
.contact-form label{
  display:block;
  margin-bottom:22px;
  position:relative;
}
.contact-form span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.26em;
  color:var(--fg-dim);
  margin-bottom:8px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--fg);
  padding:10px 0 12px;
  font:inherit;
  resize:vertical;
  transition:border-color .25s var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:0;
  border-bottom-color:var(--fg);
}
.contact-form .checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--fg-dim);
  margin:6px 0 28px;
}
.contact-form .checkbox input{
  width:auto;
  margin-top:4px;
}
.contact-form .checkbox span{
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
  color:var(--fg-dim);
  margin:0;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:18px 28px;
  border:1px solid var(--fg);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.22em;
  transition:background .3s var(--ease), color .3s var(--ease), padding .3s var(--ease);
}
.btn:hover{
  background:var(--fg);
  color:var(--bg);
  padding-right:36px;
}
.form-status{
  margin-top:18px;
  font-size:13px;
  color:var(--fg-dim);
}
.contact-info{
  display:grid;
  gap:28px;
  align-content:start;
  font-size:15px;
}
.contact-info a:hover{ color:var(--fg); }

/* =========================================================
   LEGAL DOC — privacy / terms page body layout. Single column,
   long-form text, easy to scan. Heading hierarchy: section
   number + heading, paragraph, optional bullet list.
   ========================================================= */
.legal-doc{
  max-width:68ch;
  margin:0 auto;
  font-size:clamp(16px, 1.15vw, 18px);
  line-height:1.65;
  color:var(--fg);
}
.legal-doc h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(20px, 1.6vw, 26px);
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:clamp(36px, 4vw, 56px) 0 14px;
  padding-top:clamp(28px, 3vw, 40px);
  border-top:1px solid var(--line);
}
.legal-doc h2:first-of-type{
  border-top:0;
  padding-top:0;
  margin-top:0;
}
.legal-doc p{
  margin:0 0 1em;
  color:var(--fg);
}
.legal-doc ul{
  padding-left:0;
  margin:0 0 1.2em;
  list-style:none;
}
.legal-doc ul li{
  position:relative;
  padding-left:20px;
  margin-bottom:.5em;
}
.legal-doc ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:6px; height:1px;
  background:var(--fg);
  opacity:.6;
}
.legal-doc a{
  border-bottom:1px solid currentColor;
  transition:opacity .25s var(--ease);
}
.legal-doc a:hover{ opacity:.6; }
.legal-doc__signoff{
  margin-top:clamp(40px, 4vw, 56px);
  padding-top:clamp(28px, 3vw, 40px);
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--fg-dim);
}

/* =========================================================
   SPAM PROTECTION — honeypot field. Visually + a11y hidden;
   bots will fill it in, real users won't.
   ========================================================= */
.honeypot{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}

/* Form validation states */
.contact-form input.is-error,
.contact-form textarea.is-error{
  border-bottom-color:#c44b2f;
}
.contact-form .field-error{
  display:block;
  font-size:11px;
  color:#c44b2f;
  letter-spacing:.04em;
  margin-top:6px;
  min-height:1em;
}

/* Form: project-type + timeline select styling */
.contact-form select{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--fg);
  padding:10px 0 12px;
  font:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 14px) calc(50% - 2px),
                      calc(100% - 8px) calc(50% - 2px);
  background-size:6px 6px;
  background-repeat:no-repeat;
}
.contact-form select:focus{
  outline:0;
  border-bottom-color:var(--fg);
}
.contact-form select option{
  background:var(--bg);
  color:var(--fg);
}

/* Two-column compact form layout on desktop */
.contact-form .field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px, 2vw, 32px);
}
@media (max-width:680px){
  .contact-form .field-row{ grid-template-columns:1fr; gap:0; }
}

/* =========================================================
   FOOTER — SEO-rich link grid
   ========================================================= */
.site-foot{
  border-top:1px solid var(--line);
  padding:60px 0 32px;
  position:relative;
  z-index:2;
}
.foot-marquee{
  overflow:hidden;
  border-bottom:1px solid var(--line);
  padding:18px 0 28px;
}
.foot-marquee .marquee-track span{
  color:var(--fg);
}

/* Five-column link grid. NOTE: horizontal padding comes from .container
   on this element (HTML: class="foot-grid container"). Using long-form
   padding-top/bottom here so we don't clobber .container's horizontal
   padding via the shorthand. */
.foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;
  gap:clamp(28px, 3.4vw, 56px);
  padding-top:clamp(48px, 6vw, 80px);
  padding-bottom:clamp(36px, 4vw, 56px);
}
.foot-col h4{
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--fg-dim);
  margin:0 0 18px;
}
.foot-col ul{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.foot-col a{
  font-size:14px;
  color:var(--fg);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
  display:inline-block;
}
.foot-col a:hover{
  color:var(--fg-dim);
  padding-left:4px;
}
.foot-col p{
  font-size:13px;
  line-height:1.5;
  color:var(--fg-dim);
  margin:0 0 14px;
}
.foot-col p a{
  color:var(--fg);
}
.foot-col--brand .foot-brand{
  display:inline-flex;
  align-items:baseline;
  font-family:var(--display);
  font-weight:700;
  font-size:26px;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--fg);
  margin-bottom:14px;
  line-height:1;
}
.foot-col--brand .foot-brand .brand-suffix{
  font-size:1em;
  letter-spacing:-.02em;
  font-weight:400;
  margin-left:.01em;
  opacity:1;
  text-transform:lowercase;
}
.foot-col--brand p{
  font-size:14px;
  line-height:1.55;
  color:var(--fg-dim);
  margin:0 0 22px;
  max-width:38ch;
}
.foot-social{
  display:flex;
  gap:14px;
  margin-top:6px;
}
.foot-social a{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:500;
  color:var(--fg-dim);
}
.foot-social a:hover{ color:var(--fg); padding-left:0; }

@media (max-width:1024px){
  .foot-grid{ grid-template-columns:1fr 1fr 1fr; }
  .foot-col--brand{ grid-column:1/-1; }
}

/* ---------- Mobile footer accordion ----------
   Below 640px the four link columns (Studio / Work / Disciplines / Studio
   info) collapse into a stacked accordion. Each h4 becomes a tap target;
   the contents under it max-height-animate open/closed. The brand column
   stays always-open (it has the brand statement + social, not link lists).
   IMPORTANT: keep the .container horizontal padding (var(--pad)) so the
   footer doesn't kiss the viewport edges. Only override vertical padding. */
@media (max-width:640px){
  .foot-grid{
    grid-template-columns:1fr;
    gap:0;
    padding-top:clamp(28px, 4vw, 40px);
    padding-bottom:clamp(20px, 3vw, 32px);
    /* horizontal padding inherited from .container = var(--pad) */
  }
  .foot-col{
    border-top:1px solid var(--line);
  }
  .foot-col:last-child{ border-bottom:1px solid var(--line); }
  .foot-col--brand{
    border-top:0;
    padding:clamp(20px, 4vw, 32px) 0 clamp(28px, 4vw, 40px);
  }
  /* Only non-brand columns become accordions */
  .foot-col:not(.foot-col--brand) > h4{
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    padding:18px 0;
    margin:0;
    font-size:13px;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .foot-col:not(.foot-col--brand) > h4::after{
    content:"";
    display:inline-block;
    width:11px; height:11px;
    background-image:
      linear-gradient(currentColor, currentColor),
      linear-gradient(currentColor, currentColor);
    background-size:11px 1px, 1px 11px;
    background-position:center;
    background-repeat:no-repeat;
    transition:transform .35s cubic-bezier(.14, 1, .34, 1);
    opacity:.6;
  }
  .foot-col[data-open="true"] > h4::after{
    transform:rotate(45deg);
    opacity:1;
  }
  /* Collapsible body — ul or p siblings of the h4. Use max-height for the
     reveal so we can animate without measuring children. */
  .foot-col:not(.foot-col--brand) ul,
  .foot-col:not(.foot-col--brand) > p{
    max-height:0;
    overflow:hidden;
    margin:0;
    padding:0;
    transition:max-height .5s cubic-bezier(.14, 1, .34, 1), padding .35s var(--ease);
  }
  .foot-col[data-open="true"] ul,
  .foot-col[data-open="true"] > p{
    max-height:600px;
    padding-bottom:18px;
  }
  .foot-col[data-open="true"] ul li:first-child{ padding-top:0; }
  /* Brand stays visible / unchanged on mobile */
  .foot-col--brand p{ margin:0 0 18px; max-width:none; }
  .foot-col--brand .foot-brand{ margin-bottom:10px; }
}

.foot-base{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  padding-top:32px;
  border-top:1px solid var(--line);
  font-size:13px;
  flex-wrap:wrap;
}
.foot-base p{ margin:0; color:var(--fg-dim); }
.foot-legal{
  display:flex;
  gap:18px;
}
.foot-legal a{
  color:var(--fg-dim);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.foot-legal a:hover{ color:var(--fg); }

/* WebClever credit — design + build attribution. Uses Fraunces italic
   for the studio name (echoes the headline italic-accent grammar used
   throughout the site) and an animated up-right arrow on hover. */
.foot-credit{
  font-size:12px;
  color:var(--fg-dim);
  letter-spacing:.04em;
  margin:0;
  display:inline-flex;
  align-items:baseline;
  gap:.45em;
}
.foot-credit__link{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:.3em;
  color:var(--fg);
  text-decoration:none;
  transition:color .3s var(--ease);
}
.foot-credit__name{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:1.2em;
  letter-spacing:0;
}
.foot-credit__arrow{
  display:inline-block;
  font-size:.95em;
  transition:transform .4s cubic-bezier(.14,1,.34,1);
}
.foot-credit__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease);
}
.foot-credit__link:hover{ color:#39ff14; }
.foot-credit__link:hover::after{ transform:scaleX(1); }
.foot-credit__link:hover .foot-credit__arrow{ transform:translate(3px, -3px); }

@media (max-width:680px){
  .foot-base{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* =========================================================
   BLUEPRINT GRID — subtle drafting-paper background that runs
   behind the entire site. Architects work on grid paper; this is
   a quiet nod to that craft without ever competing with content.
   Fixed position so it stays put as you scroll (the page reads as
   moving across the grid, not the grid scrolling with it). Sits
   at z:0 — below the ambient blobs (z:0 also, but layered later
   by source order — content is z:1+ above both).
   ========================================================= */
.blueprint-grid{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(244, 241, 236, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 241, 236, 0.04) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0;
  transition:opacity 1.8s cubic-bezier(.14, 1, .34, 1) .4s;
}
.is-loaded .blueprint-grid{ opacity:1; }
[data-theme="light"] .blueprint-grid{
  background-image:
    linear-gradient(to right, rgba(28, 28, 28, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 28, 28, 0.05) 1px, transparent 1px);
}
@media (max-width:640px){
  .blueprint-grid{ background-size:48px 48px; opacity:.6; }
  .is-loaded .blueprint-grid{ opacity:.6; }
}

/* =========================================================
   PLACEHOLDER VISUALS — typographic monograms (team, project
   placeholders) and atmosphere bands (full-bleed project shots
   used as visual relief between long-copy sections).
   ========================================================= */
.team-monogram{
  width:100%;
  aspect-ratio:1;
  background:
    radial-gradient(800px circle at 30% 20%, #1d1d1d 0%, transparent 55%),
    radial-gradient(700px circle at 80% 90%, #141414 0%, transparent 60%),
    #0c0c0c;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  transition:transform .6s cubic-bezier(.14,1,.34,1);
}
.team-monogram::before{
  content:attr(data-mono);
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(72px, 9vw, 132px);
  letter-spacing:-.05em;
  background:linear-gradient(180deg,#2c2c2c,#141414);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:transform 1.2s cubic-bezier(.14,1,.34,1);
}
.team-card:hover .team-monogram::before{ transform:scale(1.08); }
[data-theme="light"] .team-monogram{
  background:
    radial-gradient(800px circle at 30% 20%, #e8e3d8 0%, transparent 55%),
    radial-gradient(700px circle at 80% 90%, #efece5 0%, transparent 60%),
    #f3f0e9;
}
[data-theme="light"] .team-monogram::before{
  background:linear-gradient(180deg,#cdc7bb,#a8a298);
  -webkit-background-clip:text;
  background-clip:text;
}

/* Team photo — real portraits use this instead of the typographic monogram.
   Same 1:1 square footprint so the team grid stays even; object-fit:cover
   crops to centre-top for portrait shots. */
.team-photo{
  width:100%;
  aspect-ratio:1;
  margin:0 0 24px;
  overflow:hidden;
  background:#0c0c0c;
  border:1px solid var(--line);
  position:relative;
  transition:transform .6s cubic-bezier(.14,1,.34,1);
}
.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;       /* shift up so faces sit in the upper portion of the crop */
  display:block;
  transition:transform 1.2s cubic-bezier(.14,1,.34,1), filter .6s var(--ease);
  filter:grayscale(.2);
}
.team-card:hover .team-photo img{
  transform:scale(1.04);
  filter:grayscale(0);
}
[data-theme="light"] .team-photo{
  background:#efece5;
}

/* =========================================================
   PULL QUOTE — large Fraunces-italic quote block used between
   long-copy sections (replaces the old cropped atmosphere-band
   pattern which was cutting project images in half). Big quote
   mark hanging above the text, centered, with a small cite below.
   ========================================================= */
.pull-quote{
  margin:clamp(60px, 8vw, 120px) auto;
  max-width:1100px;
  padding:clamp(48px, 6vw, 88px) var(--pad);
  position:relative;
  text-align:center;
}
.pull-quote__mark{
  position:absolute;
  top:clamp(20px, 3vw, 36px);
  left:50%;
  transform:translateX(-50%);
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-size:clamp(96px, 14vw, 200px);
  line-height:.6;
  color:var(--fg-dim);
  opacity:.35;
  pointer-events:none;
  user-select:none;
}
.pull-quote__text{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-size:clamp(22px, 3vw, 42px);
  line-height:1.32;
  color:var(--fg);
  margin:0;
  letter-spacing:-.005em;
  position:relative;
  z-index:1;
}
.pull-quote__text em{
  font-family:var(--display);
  font-style:normal;
  font-weight:700;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:var(--fg);
}
.pull-quote__cite{
  display:block;
  margin-top:clamp(20px, 2.4vw, 32px);
  font-family:var(--display);
  font-weight:500;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-style:normal;
  color:var(--fg-dim);
  position:relative;
  z-index:1;
}
@media (max-width:640px){
  .pull-quote{ padding-top:clamp(32px, 5vw, 56px); padding-bottom:clamp(32px, 5vw, 56px); }
  .pull-quote__mark{ font-size:clamp(72px, 18vw, 96px); top:0; }
}

/* =========================================================
   STAT BAND — large typographic break: big numeral on the left,
   small italic caption on the right. Replaces the cropped
   atmosphere-band pattern with pure type.
   ========================================================= */
.stat-band{
  margin:clamp(60px, 8vw, 120px) 0;
  padding:clamp(48px, 6vw, 88px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.stat-band__container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(28px, 4vw, 72px);
  align-items:center;
}
.stat-band__num{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(96px, 13vw, 220px);
  line-height:.88;
  letter-spacing:-.04em;
  color:var(--fg);
  display:flex;
  align-items:baseline;
  gap:.05em;
  white-space:nowrap;
}
.stat-band__num strong{ font-weight:700; }
.stat-band__num em{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:.45em;
  color:var(--fg-dim);
  letter-spacing:0;
  margin-left:.15em;
}
.stat-band__caption{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(20px, 2.4vw, 32px);
  font-style:italic;
  line-height:1.32;
  color:var(--fg);
  max-width:30ch;
  margin:0;
}
.stat-band__caption em{
  color:var(--fg-dim);
}
@media (max-width:780px){
  .stat-band__container{ grid-template-columns:1fr; gap:14px; }
  .stat-band__num{ font-size:clamp(72px, 22vw, 140px); }
}

/* Atmosphere band — kept available for other pages, but the about page
   no longer uses it because cropped project images lose context.
   Use .pull-quote or .stat-band instead. */
.atmosphere-band{
  position:relative;
  width:100%;
  height:clamp(220px, 44vh, 520px);
  overflow:hidden;
  background:#0c0c0c;
  margin:clamp(48px, 7vw, 120px) 0;
}
@media (max-width:640px){
  .atmosphere-band{
    height:240px;
    margin:32px 0;
  }
  .atmosphere-band__caption{
    font-size:11px;
    bottom:14px;
    left:20px;
  }
}
.atmosphere-band img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.4) brightness(.82);
  animation:atmosphere-zoom 28s ease-in-out infinite alternate;
}
@keyframes atmosphere-zoom{
  from{ transform:scale(1.05); }
  to  { transform:scale(1.14); }
}
.atmosphere-band::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,0) 28%, rgba(10,10,10,0) 72%, rgba(10,10,10,.5) 100%);
  pointer-events:none;
}
.atmosphere-band__caption{
  position:absolute;
  bottom:clamp(18px, 2.4vw, 32px);
  left:clamp(18px, 4vw, 56px);
  right:auto;
  z-index:2;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(12px, .95vw, 14px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
}
.atmosphere-band__caption em{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:1.15em;
  letter-spacing:0;
  text-transform:none;
  margin-right:.6em;
  color:rgba(255,255,255,.8);
}
@media (prefers-reduced-motion: reduce){
  .atmosphere-band img{ animation:none; transform:scale(1.05); }
}

/* News list thumbnail (grid columns are defined in the main NEWS LIST
   section below; this rule just provides the visual styling). */
.news-thumb{
  width:80px;
  height:56px;
  overflow:hidden;
  background:#0c0c0c;
  border-radius:2px;
  position:relative;
}
.news-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.7) brightness(.9);
  transition:filter .5s var(--ease), transform 1s var(--ease);
}
.news-list a:hover .news-thumb img{
  filter:grayscale(0) brightness(1);
  transform:scale(1.06);
}
/* Typographic news-thumb fallback (when there's no image — same letter
   pattern as the project tile placeholder) */
.news-thumb--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(140px circle at 30% 20%, #1d1d1d 0%, transparent 55%),
    radial-gradient(120px circle at 80% 90%, #141414 0%, transparent 60%),
    #0c0c0c;
}
.news-thumb--placeholder::after{
  content:attr(data-letters);
  font-family:var(--display);
  font-weight:800;
  font-size:18px;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,#3a3a3a,#1c1c1c);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@media (max-width:680px){
  .news-list a{ grid-template-columns:64px 1fr auto; gap:16px; padding:16px 0; }
  .news-date{ display:none; }
  .news-thumb{ width:64px; height:48px; }
  .news-title{ font-size:17px; }
}

/* =========================================================
   CTA BLOCK — universal "have a brief in mind?" callout sitting
   above the footer on every inner page except /contact/. Injected
   by layout.js. Designed as a slow-reveal cinematic moment so each
   visit ends with a clear, low-pressure invitation to start a project.
   ========================================================= */
.cta-block{
  position:relative;
  z-index:2;
  border-top:1px solid var(--line);
  padding:clamp(80px, 10vw, 160px) 0;
  overflow:hidden;
}
.cta-block__container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(32px, 5vw, 96px);
  align-items:end;
}
.cta-block__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(48px, 8vw, 132px);
  line-height:.95;
  letter-spacing:-.025em;
  margin:0;
  text-transform:uppercase;
  color:var(--fg);
}
.cta-block__title em{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  color:var(--fg-dim);
  text-transform:none;
}
.cta-block__right{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.cta-block__lede{
  font-size:clamp(16px, 1.3vw, 19px);
  line-height:1.55;
  color:var(--fg-dim);
  margin:0;
  max-width:36ch;
}
.cta-block__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.cta-block .btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:18px 26px;
  border:1px solid var(--fg);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:500;
  background:var(--fg);
  color:var(--bg);
  transition:background .3s var(--ease), color .3s var(--ease), padding .3s var(--ease), transform .3s var(--ease);
}
.cta-block .btn:hover{
  background:var(--neon, #39ff14);
  color:#0a0a0a;
  padding-right:34px;
  transform:translateY(-1px);
}
.cta-block .btn--ghost{
  background:transparent;
  color:var(--fg);
}
.cta-block .btn--ghost:hover{
  background:var(--fg);
  color:var(--bg);
}
@media (max-width:880px){
  .cta-block__container{ grid-template-columns:1fr; }
}

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay:var(--delay, 0ms);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  .scroll-cue svg{ animation:none; }
  .eyebrow .dot{ animation:none; }
}

/* =========================================================
   TRUST BAND — slim credentials marquee right under the hero.
   Builds instant credibility (150+ projects, 21M sq ft, JW Marriott, etc.)
   without feeling like an ad. Same marquee language as the hero subtitle.
   ========================================================= */
.trust-band{
  position:relative;
  z-index:2;
  width:100%;
  overflow:hidden;
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(14px, 1.2vw, 22px) 0;
}
.trust-band__track{
  display:flex;
  align-items:center;
  white-space:nowrap;
  /* Width = sum of both groups; translate by exactly -50% to land
     on the start of group B (= visually identical to group A start),
     so the loop never visibly seams. */
  width:max-content;
  animation:trust-band-scroll 60s linear infinite;
  font-family:var(--display);
  font-size:clamp(13px, 1vw, 17px);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg);
}
.trust-band__group{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.trust-band__item{
  display:inline-flex;
  align-items:baseline;
  padding:0 clamp(16px, 1.4vw, 28px);
  gap:.3em;
}
.trust-band__item strong{
  font-weight:700;
  color:var(--fg);
  letter-spacing:-.01em;
  font-size:1.15em;
}
.trust-band__item em{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  font-size:1.05em;
  color:var(--fg-dim);
}
.trust-band__dot{
  display:inline-block;
  width:5px; height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:.4;
  flex-shrink:0;
}
/* --- Real client logos rendered as <img>. A CSS filter converts the
       coloured brand artwork to a monochrome version that matches the
       page's foreground color in either theme. Heights are tuned so all
       logos visually match across different aspect ratios. --- */
/* Logo + caption pair — sits together as one unit. The pair carries the
   outer margin (so logo and caption are tight together), the dot
   separator handles spacing between pairs. */
.trust-band__pair{
  display:inline-flex;
  align-items:center;
  gap:clamp(10px, .9vw, 16px);
  padding:0 clamp(22px, 1.8vw, 34px);
  flex-shrink:0;
  white-space:nowrap;
}
.trust-band__pair .trust-band__logo{
  margin:0;             /* outer pair handles the gap; no extra logo margin */
}
/* Brand name as editorial text (replaces logo — we don't hold IP rights
   to display third-party marks). Slightly bolder + tracked so it reads
   as a "credential" rather than a generic word in the marquee. */
.trust-band__name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(15px, 1.15vw, 19px);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--fg);
  line-height:1;
}
.trust-band__caption{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(13px, 1vw, 17px);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg);
  line-height:1;
}
.trust-band__caption em{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  font-size:1.1em;
  color:var(--fg-dim);
}

.trust-band__logo{
  display:inline-block;
  height:clamp(28px, 2.4vw, 38px);          /* bigger — was clamp(20, 1.8vw, 28) */
  width:auto;
  margin:0 clamp(18px, 1.6vw, 30px);
  flex-shrink:0;
  vertical-align:middle;
  filter:grayscale(1) invert(1) opacity(.9);
  mix-blend-mode:lighten;
  transition:filter .4s var(--ease);
}
.trust-band__logo--wide{
  height:clamp(30px, 2.6vw, 42px);          /* bigger — was clamp(22, 2vw, 32) */
}
/* JW Marriott — taller composition (griffin icon on top of wordmark) */
.trust-band__logo--jw{
  height:clamp(40px, 3.4vw, 52px);
}
/* Lamborghini — split into shield (left) + script wordmark (right), placed
   horizontally so both pieces read clearly. Shield is bigger now. */
.trust-band__lambo{
  display:inline-flex;
  align-items:center;
  gap:clamp(8px, .7vw, 14px);
  flex-shrink:0;
}
.trust-band__lambo-shield{
  display:inline-block;
  height:clamp(40px, 3.4vw, 54px);
  width:auto;
  vertical-align:middle;
  filter:grayscale(1) invert(1) opacity(.95);
  mix-blend-mode:lighten;
}
.trust-band__lambo-wordmark{
  display:inline-block;
  height:clamp(22px, 1.9vw, 30px);
  width:auto;
  vertical-align:middle;
  filter:grayscale(1) invert(1) opacity(.9);
  mix-blend-mode:lighten;
}
[data-theme="light"] .trust-band__lambo-shield,
[data-theme="light"] .trust-band__lambo-wordmark{
  filter:grayscale(1) opacity(.85);
  mix-blend-mode:multiply;
}
[data-theme="light"] .trust-band__logo{
  /* Light theme: grayscale + multiply darkens the artwork and drops the
     white background (white × white = white = invisible against light bg). */
  filter:grayscale(1) opacity(.82);
  mix-blend-mode:multiply;
}
@keyframes trust-band-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .trust-band__track{ animation:none; }
}

/* =========================================================
   FLOATING CONTACT CLUSTER — Phone / Email / WhatsApp.
   Theme-blended (no brand colors), three small chip-circles grouped
   together at the bottom-right. Slides in once scrolled past hero.
   ========================================================= */
/* Desktop: vertical stack pinned to the right side, no wrapper chrome */
.contact-float{
  position:fixed;
  right:clamp(16px, 1.4vw, 24px);
  bottom:calc(clamp(20px, 2.2vw, 36px) + 50px);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:610;
  padding:0;
  border:none;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity .55s cubic-bezier(.14,1,.34,1),
    transform .55s cubic-bezier(.14,1,.34,1);
  pointer-events:none;
}
body.is-scrolled-past-hero .contact-float{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
/* Stagger each chip in (top of stack appears first) */
.contact-float__item{
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .45s cubic-bezier(.14,1,.34,1),
    transform .45s cubic-bezier(.14,1,.34,1),
    background-color .35s var(--ease),
    color .35s var(--ease),
    border-color .35s var(--ease);
}
body.is-scrolled-past-hero .contact-float__item{
  opacity:1;
  transform:translateY(0);
}
body.is-scrolled-past-hero .contact-float__item:nth-child(1){ transition-delay:0s; }
body.is-scrolled-past-hero .contact-float__item:nth-child(2){ transition-delay:.08s; }
body.is-scrolled-past-hero .contact-float__item:nth-child(3){ transition-delay:.16s; }

/* Mobile: horizontal pill, centered at the bottom — easier to reach with
   the thumb. Outer pill carries the chrome, chips inside lose their borders. */
@media (max-width:640px){
  .contact-float{
    flex-direction:row;
    right:auto;
    left:50%;
    bottom:calc(clamp(20px, 2.2vw, 36px) + 50px);
    gap:10px;
    padding:6px;
    border:1px solid var(--line);
    border-radius:999px;
    background:color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter:blur(14px) saturate(1.5);
    -webkit-backdrop-filter:blur(14px) saturate(1.5);
    transform:translate(-50%, 16px);
  }
  body.is-scrolled-past-hero .contact-float{
    transform:translate(-50%, 0);
  }
  .contact-float__item{
    width:46px;
    height:46px;
    background:transparent;
    border:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .contact-float__item:hover{
    transform:scale(1.05);
  }
}
/* Desktop: individual chips carry their own border + bg + blur */
.contact-float__item{
  width:clamp(40px, 3vw, 46px);
  height:clamp(40px, 3vw, 46px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:50%;
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  text-decoration:none;
  transition:
    background-color .35s var(--ease),
    color .35s var(--ease),
    border-color .35s var(--ease),
    transform .35s cubic-bezier(.14,1,.34,1);
  position:relative;
}
.contact-float__item:hover{
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
  transform:translateY(-3px);
}
.contact-float__icon{
  width:48%;
  height:48%;
}
/* Accent item — WhatsApp gets a subtle neon-green pulse ring so it reads
   as the "live chat" option without taking on the WhatsApp brand color. */
.contact-float__item--accent::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:1.5px solid #39ff14;
  opacity:.5;
  animation:contact-pulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes contact-pulse{
  0%   { transform:scale(1);    opacity:.5; }
  100% { transform:scale(1.35); opacity:0;  }
}
@media (prefers-reduced-motion: reduce){
  .contact-float__item--accent::after{ animation:none; opacity:0; }
}

/* =========================================================
   SELECTION
   ========================================================= */
::selection{
  background:var(--fg);
  color:var(--bg);
}

/* =========================================================
   AMBIENT WATER BACKGROUND — 3 large blurred gradient orbs floating slowly
   in the background. position:fixed keeps them in the viewport ("follows
   you" as you scroll), CSS keyframes give them slow undulating motion.
   Very low opacity + heavy blur so they read as ambient atmosphere and
   never interfere with text readability.
   ========================================================= */
.ambient-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity 1.6s cubic-bezier(.14,1,.34,1);
}
.is-loaded .ambient-bg{ opacity:1; }
/* Main content sits ABOVE the ambient layer so type stays clean */
main, .site-foot{ position:relative; z-index:1; }

/* Ambient blob — heavily blurred coloured orbs. PERFORMANCE NOTES:
   filter:blur() is GPU-intensive at large radii; mix-blend-mode adds cost.
   We trade some softness for frame rate by capping blur at 60px and using
   `screen` instead of `plus-lighter` (both add to the underlying lightness
   on dark backgrounds, but `screen` is faster to composite). */
.ambient-bg__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  mix-blend-mode:screen;
  will-change:transform;
  transform:translateZ(0);              /* force GPU layer so blob doesn't repaint with page scroll */
  backface-visibility:hidden;
}
/* Light theme ambient — much subtler. The cream paper background can't
   carry saturated neon/terracotta blobs without looking tie-dyed; we tone
   them down to paper-ink tints and drop opacity so they read as atmosphere
   (not as color bleeding through). Blur capped at 90px on light too. */
[data-theme="light"] .ambient-bg__blob{
  filter:blur(90px);
  mix-blend-mode:multiply;
  opacity:.32;
}
[data-theme="light"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, var(--fg) 14%, transparent) 0%, transparent 65%);
}
[data-theme="light"] .ambient-bg__blob--2{
  background:radial-gradient(circle, color-mix(in srgb, #b06545 18%, transparent) 0%, transparent 65%);
}
[data-theme="light"] .ambient-bg__blob--3{
  background:radial-gradient(circle, color-mix(in srgb, #5a7855 16%, transparent) 0%, transparent 65%);
}

/* Discipline-aware ambient hue — also dialed back on light. Paper inks
   instead of neons so each discipline section reads as a quiet shift
   rather than a colour flood. */
[data-theme="light"] body[data-discipline="architecture"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, var(--fg) 14%, transparent) 0%, transparent 65%);
}
[data-theme="light"] body[data-discipline="interior"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, #8a6f9a 18%, transparent) 0%, transparent 65%);
}
[data-theme="light"] body[data-discipline="landscape"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, #5a7855 18%, transparent) 0%, transparent 65%);
}
[data-theme="light"] body[data-discipline="product"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, #b07a3a 18%, transparent) 0%, transparent 65%);
}
[data-theme="light"] body[data-discipline="consulting"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, #4a6b9a 16%, transparent) 0%, transparent 65%);
}

/* Blob 1 — large, neutral white, top-left, slow drift. Background is
   transitionable so the services page can swap hues per-discipline.
   Transition shortened (was 2.4s) to reduce per-frame gradient interpolation
   cost during discipline changes. */
.ambient-bg__blob--1{
  width:62vw;
  height:62vw;
  max-width:760px;
  max-height:760px;
  top:8%;
  left:-18vw;
  background:radial-gradient(circle, color-mix(in srgb, var(--fg) 22%, transparent) 0%, transparent 65%);
  animation:ambient-float-1 28s ease-in-out infinite;
  transition:background .9s cubic-bezier(.14, 1, .34, 1);
}
/* Discipline-aware ambient hue (services page) — as the user crosses each
   discipline section the upper ambient blob subtly shifts colour so each
   discipline reads as its own room. Set by JS via body[data-discipline]. */
body[data-discipline="architecture"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, var(--fg) 22%, transparent) 0%, transparent 65%);
}
body[data-discipline="interior"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, #c79edd 32%, transparent) 0%, transparent 65%);
}
body[data-discipline="landscape"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, #39ff14 24%, transparent) 0%, transparent 65%);
}
body[data-discipline="product"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, #ffb74a 32%, transparent) 0%, transparent 65%);
}
body[data-discipline="consulting"] .ambient-bg__blob--1{
  background:radial-gradient(circle, color-mix(in srgb, #4488ff 28%, transparent) 0%, transparent 65%);
}
/* Blob 2 — medium, terracotta hint, bottom-right, opposite-phase drift */
.ambient-bg__blob--2{
  width:48vw;
  height:48vw;
  max-width:620px;
  max-height:620px;
  bottom:5%;
  right:-12vw;
  background:radial-gradient(circle, color-mix(in srgb, #ff5938 35%, transparent) 0%, transparent 65%);
  animation:ambient-float-2 34s ease-in-out infinite -8s;
}
/* Blob 3 — smaller, neon-green hint, mid-center, longest cycle */
.ambient-bg__blob--3{
  width:40vw;
  height:40vw;
  max-width:520px;
  max-height:520px;
  top:42%;
  left:32%;
  background:radial-gradient(circle, color-mix(in srgb, #39ff14 22%, transparent) 0%, transparent 65%);
  animation:ambient-float-3 40s ease-in-out infinite -16s;
}

@keyframes ambient-float-1{
  0%, 100% { transform:translate3d(0, 0, 0) scale(1); }
  33%      { transform:translate3d(70px, 50px, 0) scale(1.08); }
  66%      { transform:translate3d(-30px, 90px, 0) scale(.95); }
}
@keyframes ambient-float-2{
  0%, 100% { transform:translate3d(0, 0, 0) scale(1); }
  50%      { transform:translate3d(-80px, -60px, 0) scale(1.1); }
}
@keyframes ambient-float-3{
  0%, 100% { transform:translate3d(0, 0, 0) scale(1); }
  25%      { transform:translate3d(60px, -80px, 0) scale(1.05); }
  75%      { transform:translate3d(-70px, 60px, 0) scale(.93); }
}

@media (prefers-reduced-motion: reduce){
  .ambient-bg__blob{ animation:none; }
}
@media (max-width:640px){
  /* Keep it on mobile but smaller/quieter — gives that water feel without overwhelming */
  .ambient-bg__blob{ filter:blur(60px); opacity:.65; }
}

/* =========================================================
   SCROLL NAVIGATOR — full-width bar pinned to the bottom of the viewport.
   Label on the left, thin neon progress line in the middle, percentage on
   the right. Slides up from below on first scroll past the hero. Designed
   to feel like a cinema scrubber — present but never in the way.
   ========================================================= */
.scroll-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:600;
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.6vw, 28px);
  padding:11px clamp(16px, 1.6vw, 28px);
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  color:var(--fg);
  font-family:var(--display);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  pointer-events:none;
  transform:translateY(100%);
  transition:
    transform .65s cubic-bezier(.14,1,.34,1),
    background-color .4s var(--ease),
    border-color .4s var(--ease),
    color .4s var(--ease);
}
body.is-scrolled-past-hero .scroll-nav{
  transform:translateY(0);
}

.scroll-nav__left,
.scroll-nav__right{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  white-space:nowrap;
}
.scroll-nav__num{
  font-weight:700;
  color:var(--fg);
  letter-spacing:.04em;
}
.scroll-nav__sep{
  opacity:.4;
  font-weight:400;
}
.scroll-nav__sep--slash{ margin:0 2px; }
.scroll-nav__label-wrap{
  position:relative;
  display:inline-block;
  overflow:hidden;
  height:1em;
  min-width:9ch;
}
.scroll-nav__label{
  display:block;
  transition:transform .55s cubic-bezier(.14,1,.34,1), opacity .35s var(--ease);
}
.scroll-nav__label.is-leaving{
  transform:translateY(-110%);
  opacity:0;
}
.scroll-nav__label.is-entering{
  transform:translateY(110%);
  opacity:0;
  transition:none;
}

/* The neon progress line — center, full flex, thin, scrubber-like. */
.scroll-nav__track{
  position:relative;
  flex:1;
  height:1px;
  background:var(--line);
  overflow:hidden;
}
.scroll-nav__bar{
  position:absolute;
  inset:0;
  background:#39ff14;
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .18s linear;
  box-shadow:0 0 10px rgba(57,255,20,.4);
}

@media (max-width:640px){
  .scroll-nav{
    padding:9px 14px;
    gap:12px;
    font-size:10px;
    letter-spacing:.12em;
  }
  .scroll-nav__right{ display:none; }
  .scroll-nav__label-wrap{ min-width:7ch; }
}

/* =========================================================
   CUSTOM FOLLOW-CURSOR (shed.design pattern)
   ========================================================= */
.cursor{
  position:fixed;
  top:0;
  left:0;
  width:4.5rem;
  height:4.5rem;
  margin-top:-2.25rem;
  margin-left:-2.25rem;
  pointer-events:none;
  z-index:400;
  display:none;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .cursor{ display:block; }
}
.cursor::before{
  content:"";
  position:absolute;
  inset:0;
  /* Translucent white bubble with a thin black ring — per client
     comment 15. Reads as a frosted lens over the photograph. */
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(6px) saturate(1.4);
  backdrop-filter:blur(6px) saturate(1.4);
  border:1.5px solid #0a0a0a;
  border-radius:50%;
  transform:scale(0);
  transition:transform .4s cubic-bezier(1, 0, .65, .61);
  box-shadow:0 8px 22px rgba(0,0,0,.18), 0 0 0 6px rgba(0,0,0,.06);
}
.cursor.is-visible::before{
  transform:scale(1);
  transition:transform .8s cubic-bezier(.14, 1, .34, 1);
}
.cursor__label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.4rem;                  /* breathing room around the text */
  font-family:var(--display);
  font-size:.95rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#0a0a0a;                  /* dark text — high contrast on neon green */
  opacity:0;
  transition:opacity .35s var(--ease);
}
.cursor.is-visible .cursor__label{
  opacity:1;
  transition:opacity .5s var(--ease) .15s;
}
/* When the cursor is over a list-item link, hide the native cursor on it */
@media (hover:hover) and (pointer:fine){
  .list-item__link{ cursor:none; }
}

/* =========================================================
   BIM, "how we deliver" band on the homepage + the dedicated
   /bim page (challenge cards, 3D-7D dimensions, process steps)
   and the profile / brochure download cards. Plus footer PDF links.
   ========================================================= */

/* ---- Homepage BIM band (between Services and Work) ---- */
.bim-band{ padding:clamp(56px,7vw,104px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bim-band__container{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,4vw,72px); align-items:center;
}
.bim-band__eyebrow{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:12px; font-weight:600; color:var(--fg-dim); margin:0 0 18px;
}
.bim-band__title{
  font-family:var(--display); font-weight:800; font-size:clamp(34px,4.4vw,62px);
  line-height:1.02; letter-spacing:-.025em; margin:0;
  overflow:clip; overflow-clip-margin:.4em;
}
.bim-band__title em{ font-style:italic; font-weight:600; }
.bim-band__lede{ margin:20px 0 0; max-width:48ch; color:var(--fg-dim); font-size:clamp(15px,1.05vw,17px); line-height:1.62; }
.bim-band__actions{ margin-top:28px; display:flex; gap:26px 30px; align-items:center; flex-wrap:wrap; }
.bim-band__dl, .foot-downloads a{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.01em;
  color:var(--fg-dim); transition:color .25s var(--ease);
}
.bim-band__dl:hover{ color:var(--fg); }
.bim-band__ext, .foot-dl__ext{
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  border:1px solid var(--line); border-radius:4px; padding:2px 5px; color:var(--fg-dim);
}
.bim-band__points{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,30px) clamp(20px,2.2vw,36px); }
.bim-band__points li{ border-top:1px solid var(--line); padding-top:16px; }
.bim-band__d{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(28px,2.6vw,42px); line-height:1; letter-spacing:-.02em; margin-bottom:10px; }
.bim-band__d-sm{ font-size:.5em; font-weight:600; color:var(--fg-dim); }
.bim-band__points p{ margin:0; font-size:13.5px; color:var(--fg-dim); line-height:1.5; }
@media (max-width:900px){
  .bim-band__container{ grid-template-columns:1fr; gap:clamp(28px,5vw,44px); }
}
@media (max-width:480px){
  .bim-band__points{ grid-template-columns:1fr 1fr; gap:20px 18px; }
}

/* ---- /bim page: challenge cards ---- */
.bim-cards, .bim-dims, .bim-steps{ list-style:none; margin:clamp(32px,4vw,52px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.5vw,22px); }
.bim-card{
  border:1px solid var(--line); border-radius:14px; padding:clamp(20px,2vw,30px);
  background:color-mix(in srgb, var(--fg) 2.5%, transparent);
}
.bim-card__no{ font-family:var(--display); font-weight:800; font-size:13px; color:var(--fg-dim); letter-spacing:.04em; }
.bim-card__title{ font-family:var(--display); font-weight:700; font-size:clamp(18px,1.5vw,22px); margin:12px 0 10px; letter-spacing:-.01em; }
.bim-card p{ margin:0; font-size:14px; color:var(--fg-dim); line-height:1.55; }

/* ---- /bim page: 3D-7D dimensions ---- */
.bim-dim{ border-top:2px solid var(--fg); padding-top:18px; }
.bim-dim__d{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(30px,3vw,46px); line-height:1; letter-spacing:-.02em; }
.bim-dim__d-sm{ font-size:.5em; font-weight:600; color:var(--fg-dim); }
.bim-dim__title{ font-family:var(--display); font-weight:700; font-size:clamp(16px,1.3vw,20px); margin:14px 0 8px; }
.bim-dim p{ margin:0; font-size:14px; color:var(--fg-dim); line-height:1.55; }

/* ---- /bim page: clash-avoidance steps ---- */
.bim-step{ position:relative; border-top:1px solid var(--line); padding-top:22px; }
.bim-step__no{ font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:600; color:var(--fg-dim); }
.bim-step h3{ font-family:var(--display); font-weight:700; font-size:clamp(17px,1.4vw,21px); margin:10px 0 8px; }
.bim-step p{ margin:0; font-size:14px; color:var(--fg-dim); line-height:1.55; }

@media (max-width:900px){
  .bim-cards, .bim-dims, .bim-steps{ grid-template-columns:1fr 1fr; gap:16px; }
}
@media (max-width:520px){
  .bim-cards, .bim-dims, .bim-steps{ grid-template-columns:1fr; }
}

/* ---- /bim page: download cards ---- */
.download-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,28px); margin-top:clamp(32px,4vw,52px); }
.download-card{
  display:flex; flex-direction:column; align-items:flex-start;
  border:1px solid var(--line); border-radius:16px; padding:clamp(24px,2.4vw,38px);
  text-decoration:none; color:var(--fg); background:color-mix(in srgb, var(--fg) 2.5%, transparent);
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.download-card:hover{
  border-color:color-mix(in srgb, var(--fg) 40%, transparent);
  transform:translateY(-3px);
  background:color-mix(in srgb, var(--fg) 5.5%, transparent);
}
.download-card__icon{ width:44px; height:44px; margin-bottom:22px; color:var(--fg-dim); }
.download-card__icon svg{ width:100%; height:100%; }
.download-card__kicker{ margin:0; font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:600; color:var(--fg-dim); }
.download-card__title{ font-family:var(--display); font-weight:700; font-size:clamp(19px,1.7vw,25px); margin:9px 0 11px; letter-spacing:-.01em; }
.download-card__desc{ margin:0; font-size:14.5px; color:var(--fg-dim); line-height:1.55; max-width:42ch; }
.download-card__meta{ margin:14px 0 0; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim); }
.download-card__cta{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-family:var(--display); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.09em; }
.download-card__cta svg{ transition:transform .3s var(--ease); }
.download-card:hover .download-card__cta svg{ transform:translateX(5px); }
@media (max-width:720px){ .download-grid{ grid-template-columns:1fr; } }

/* ---- Footer PDF download links ---- */
.foot-downloads{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-downloads a:hover{ color:var(--fg); }
.foot-dl__ic{ font-size:14px; line-height:1; }