/* ============================================================
   DESIGN DOMAIN
   Architectural & Interior Design Firm

   Light and airy. A warm off-white page, charcoal text, and a
   calm serif set light. Colour arrives in small doses only:
   brand yellow on a CTA and small marks, a softer ochre beside
   it, and a quiet sage for section variety. Nothing dominates.

   The signature is a drawing sheet: a faint column grid behind
   every page and section-cut markers that draw themselves at
   each boundary.
   ============================================================ */

/* ---- 1. TOKENS ------------------------------------------- */

:root{
  /* Canvas. Warm ivory, never white: a stark white page reads as
     clinical, which is the look 2026 palettes are moving away from.
     The ratio across the site is roughly 70 percent warm neutral,
     25 percent tinted band, 5 percent accent. */
  --canvas:#F8F5EE;       /* warm ivory */
  --panel:#FDFCF8;
  --stone:#EFE9DE;        /* warm oat band */
  --sage:#E7EDE4;         /* the cool leaf counterpoint */
  --clay:#F6E9E1;         /* warm earth band */
  --dark:#1F1C18;         /* warm espresso, hero and footer only */
  --dark-2:#2A2620;

  /* Ink, warmed to match the canvas */
  --ink:#1F1B16;          /* 15.7:1 on canvas */
  --ink-2:#6B6459;        /*  5.4:1 on canvas */
  --ink-3:#9C958A;        /* decorative only, never body text */
  --on-dark:#F3F0E8;
  --on-dark-2:#ABA598;

  /* Rules */
  --rule:#E3DDD0;
  --rule-2:#CDC5B6;
  --rule-dark:#37322A;

  /* Four quiet accents, none allowed to take over. Each has a
     decorative value and a darker value that is safe as text. */
  --yellow:#F0BE24;       /* fills only: the one CTA, small marks */
  --yellow-ink:#7A5F10;   /* 5.6:1 as text */
  --ochre:#C2921F;
  --ochre-ink:#82620F;    /* 5.2:1 */
  --terracotta:#C0674A;   /* the lift: warm earth against the sage */
  --terracotta-ink:#8E4429; /* 6.4:1 */
  --sage-mark:#8FA089;
  --sage-ink:#4B5647;     /* 7.1:1 */
  --on-yellow:#1F1B16;    /* 9.9:1 on the yellow fill */

  /* Type */
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  /* Spacing scale. Nothing outside this list. */
  --s4:4px;   --s8:8px;    --s12:12px;  --s16:16px;
  --s24:24px; --s32:32px;  --s48:48px;  --s64:64px;
  --s80:80px; --s96:96px;  --s128:128px; --s160:160px;

  /* Layout */
  --maxw:1300px;
  --gutter:clamp(20px,5vw,72px);
  --measure:64ch;

  /* Motion. Slow and eased: the site should feel like it flows. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-micro:240ms;
  --t-section:760ms;

  --tshadow:0 1px 2px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.4),0 8px 34px rgba(0,0,0,.34);
}

/* ---- 2. RESET -------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,.42vw + 13.8px,16.5px);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}

h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}

::selection{background:var(--yellow);color:var(--on-yellow)}

:focus-visible{outline:2px solid var(--ochre-ink);outline-offset:3px;border-radius:2px}
.dark-sec :focus-visible{outline-color:var(--yellow)}

.skip{
  position:absolute;left:var(--s16);top:-100px;z-index:200;
  background:var(--ink);color:var(--on-dark);
  padding:var(--s12) var(--s24);font-family:var(--mono);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  transition:top var(--t-micro) var(--ease);
}
.skip:focus{top:var(--s16)}

.vh{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- 3. THE DRAWING SHEET -------------------------------- */

.sheet{position:fixed;inset:0;z-index:0;pointer-events:none}
.sheet__grid{
  position:absolute;inset:-10% -10%;
  background-image:linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%;
  opacity:.5;
  animation:sheet-drift 110s linear infinite;
}
.sheet__wash{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 85% 55% at 50% 0%,rgba(194,146,31,.09),transparent 64%),
    radial-gradient(ellipse 65% 50% at 100% 100%,rgba(143,160,137,.10),transparent 66%),
    radial-gradient(ellipse 55% 45% at 0% 62%,rgba(192,103,74,.07),transparent 62%);
}
@keyframes sheet-drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-40px,0)}}
/* Lift only in-flow content. Never a universal child selector here:
   it outranks .menu / .lb / .wa and breaks every fixed element. */
main,.site-footer{position:relative;z-index:1}

/* ---- 4. LAYOUT ------------------------------------------- */

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:1560px}

.section{padding-block:clamp(72px,10vw,var(--s160));position:relative}
.section--tight{padding-block:clamp(56px,7vw,var(--s96))}
.section--flush-top{padding-top:0}

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

.measure{max-width:var(--measure)}
.measure-sm{max-width:48ch}

/* Section tints. Used sparingly so the page keeps breathing. */
.stone-band{background:var(--stone)}
.sage-band{background:var(--sage)}
.dark-sec{background:var(--dark);color:var(--on-dark)}
.dark-sec .lede,.dark-sec .body-copy{color:var(--on-dark-2)}
.dark-sec .cut__rule{background:var(--rule-dark)}
.dark-sec .cut__label{color:var(--yellow)}

/* ---- 5. TYPOGRAPHY --------------------------------------- */

.kicker{
  font-family:var(--mono);
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:500;color:var(--ink-2);
  display:flex;align-items:center;gap:var(--s12);
}
.kicker::before{content:"";width:22px;height:1px;background:var(--ochre);flex:none}
.kicker--plain::before{display:none}
.dark-sec .kicker{color:var(--on-dark-2)}

/* Light serif, sentence case. Nothing shouts. */
.display{
  font-family:var(--display);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.014em;
}
.d1{font-size:clamp(34px,4.9vw,68px)}
.d2{font-size:clamp(28px,3.5vw,50px)}
.d3{font-size:clamp(23px,2.4vw,34px)}
.d4{font-size:clamp(19px,1.7vw,25px);line-height:1.2}

.lede{font-size:clamp(16px,.8vw + 13px,19px);line-height:1.68;color:var(--ink-2)}
.body-copy{color:var(--ink-2)}
.body-copy p + p{margin-top:var(--s24)}

.pull{
  font-family:var(--display);font-weight:300;
  font-size:clamp(25px,3.1vw,46px);line-height:1.16;
  letter-spacing:-.014em;color:var(--ink);
}
.pull .hl,.display .hl{color:var(--ochre-ink);font-style:italic}

.meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.dark-sec .meta{color:var(--on-dark-2)}

/* ---- 6. SIGNATURE: SECTION-CUT MARKERS ------------------- */

.cut{display:flex;align-items:center;gap:var(--s16);margin-bottom:var(--s48)}
.cut__rule{
  flex:1;height:1px;background:var(--rule-2);
  transform-origin:left center;transform:scaleX(0);
  transition:transform 1100ms var(--ease);
}
.cut.in .cut__rule{transform:scaleX(1)}

.cut__mark{flex:none;width:28px;height:28px;color:var(--ochre)}
.cut__mark circle{
  stroke-dasharray:88;stroke-dashoffset:88;
  transition:stroke-dashoffset 1100ms var(--ease) 140ms;
}
.cut.in .cut__mark circle{stroke-dashoffset:0}
.cut__mark path{opacity:0;transition:opacity 500ms var(--ease) 820ms}
.cut.in .cut__mark path{opacity:1}

.cut__label{
  flex:none;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);
}

/* ---- 7. BUTTONS AND LINKS -------------------------------- */

.btn{
  display:inline-flex;align-items:center;gap:var(--s12);
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:var(--s16) var(--s32);
  border:1px solid var(--ink);
  color:var(--ink);background:transparent;
  position:relative;overflow:hidden;
  transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 480ms var(--ease);z-index:0;
}
.btn>*{position:relative;z-index:1}
.btn:hover{color:var(--on-dark)}
.btn:hover::before{transform:scaleX(1)}
.btn .arrow{transition:transform var(--t-micro) var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* The one yellow moment per page. 10.7:1. */
.btn--solid{background:var(--yellow);color:var(--on-yellow);border-color:var(--yellow)}
.btn--solid::before{background:var(--ink)}
.btn--solid:hover{color:var(--on-dark);border-color:var(--ink)}

.dark-sec .btn{border-color:rgba(242,240,234,.5);color:var(--on-dark)}
.dark-sec .btn::before{background:var(--on-dark)}
.dark-sec .btn:hover{color:var(--ink);border-color:var(--on-dark)}
.dark-sec .btn--solid{background:var(--yellow);color:var(--on-yellow);border-color:var(--yellow)}
.dark-sec .btn--solid::before{background:var(--on-dark)}
.dark-sec .btn--solid:hover{color:var(--ink)}

.tlink{
  display:inline-flex;align-items:center;gap:var(--s8);
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);position:relative;padding-bottom:3px;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ochre);transform:scaleX(0);transform-origin:right center;
  transition:transform 420ms var(--ease);
}
.tlink:hover::after{transform:scaleX(1);transform-origin:left center}
.tlink .arrow{transition:transform var(--t-micro) var(--ease)}
.tlink:hover .arrow{transform:translateX(4px)}
.dark-sec .tlink{color:var(--on-dark)}
.dark-sec .tlink::after{background:var(--yellow)}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .tlink{min-height:44px;display:inline-flex;align-items:center}
  .fcol a,.fcol--contact a,.menu__foot a,.crumb a,.nav a,
  .site-footer__bar button,.cinfo__v a{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .logo{min-height:44px}
}

/* ---- 8. HEADER ------------------------------------------- */

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:background 480ms var(--ease),border-color 480ms var(--ease),
             padding 480ms var(--ease),backdrop-filter 480ms var(--ease);
  border-bottom:1px solid transparent;
  padding-block:var(--s24);
}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s32)}

/* Over the film: transparent, light text. The film ends on a pale
   sky, which washed the header out to 1.9:1, so the header carries
   its own local scrim. Only the top strip darkens; the rest of the
   frame stays clean. Measured worst case: 8.7:1 text, 6.1:1 nav. */
.site-header[data-mode="over"]{background:transparent}
.site-header[data-mode="over"]::before{
  content:"";position:absolute;left:0;right:0;top:0;height:150px;
  pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(10,10,9,.78) 0%,rgba(10,10,9,.56) 55%,rgba(10,10,9,0) 100%);
}
.site-header[data-mode="over"] .logo__type{color:var(--on-dark)}
.site-header[data-mode="over"] .logo__sub{color:rgba(242,240,234,.72)}
.site-header[data-mode="over"] .logo__mark{color:var(--yellow)}
.site-header[data-mode="over"] .nav a{color:var(--on-dark)}
/* Light, not yellow: yellow text measured 4.14:1 over the brighter
   time-lapse footage. The yellow underline below still marks the page. */
.site-header[data-mode="over"] .nav a[aria-current="page"]{color:var(--on-dark)}
.site-header[data-mode="over"] .nav a::after{background:var(--yellow)}
.site-header[data-mode="over"] .burger span{background:var(--on-dark)}
.site-header[data-mode="over"] .btn{border-color:rgba(242,240,234,.55);color:var(--on-dark)}
.site-header[data-mode="over"] .btn::before{background:var(--on-dark)}
.site-header[data-mode="over"] .btn:hover{color:var(--ink)}

/* Past the film: a quiet off-white sheet. */
.site-header[data-mode="solid"]{
  background:rgba(250,249,246,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--rule);
  padding-block:var(--s16);
}

.logo{display:flex;align-items:center;gap:var(--s16);flex:none}
.logo__mark{width:36px;height:36px;flex:none;color:var(--ochre);transition:color 480ms var(--ease)}
.logo__text{display:flex;flex-direction:column;line-height:1}
.logo__type{
  font-family:var(--display);font-size:26px;font-weight:400;
  letter-spacing:.004em;color:var(--ink);transition:color 480ms var(--ease);
}
.logo__sub{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-2);margin-top:6px;
  transition:color 480ms var(--ease);
}
@media (max-width:520px){
  .logo__mark{width:30px;height:30px}
  .logo__type{font-size:22px}
}

.nav{display:flex;align-items:center;gap:var(--s32)}
.nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
  position:relative;padding-block:6px;
  transition:color var(--t-micro) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ochre);transform:scaleX(0);transform-origin:right center;
  transition:transform 380ms var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left center}
.nav a[aria-current="page"]{color:var(--ochre-ink)}

.header-cta{flex:none}

.burger{
  display:none;width:44px;height:44px;
  flex-direction:column;justify-content:center;gap:5px;align-items:flex-end;flex:none;
}
.burger span{display:block;height:1.5px;background:var(--ink);transition:width var(--t-micro) var(--ease)}
.burger span:nth-child(1){width:24px}
.burger span:nth-child(2){width:16px}
.burger:hover span:nth-child(2){width:24px}

@media (max-width:1024px){
  .nav,.header-cta{display:none}
  .burger{display:flex}
}

/* ---- 9. MOBILE MENU -------------------------------------- */

.menu{
  position:fixed;inset:0;z-index:120;
  background:var(--canvas);color:var(--ink);
  display:flex;flex-direction:column;
  padding:var(--s24) var(--gutter) var(--s48);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity 460ms var(--ease),transform 560ms var(--ease),visibility 460ms;
}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s24)}
.menu__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:26px;line-height:1}
.menu__nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--s8);padding-block:var(--s48)}
.menu__nav a{
  font-family:var(--display);font-size:clamp(28px,7.6vw,44px);
  font-weight:300;line-height:1.3;
  display:flex;align-items:baseline;gap:var(--s16);
  opacity:0;transform:translateY(12px);
  transition:opacity 500ms var(--ease),transform 500ms var(--ease),color var(--t-micro);
  min-height:44px;
}
.menu.open .menu__nav a{opacity:1;transform:none}
.menu.open .menu__nav a:nth-child(1){transition-delay:120ms}
.menu.open .menu__nav a:nth-child(2){transition-delay:180ms}
.menu.open .menu__nav a:nth-child(3){transition-delay:240ms}
.menu.open .menu__nav a:nth-child(4){transition-delay:300ms}
.menu.open .menu__nav a:nth-child(5){transition-delay:360ms}
.menu__nav a:hover{color:var(--ochre-ink)}
.menu__nav .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--ochre-ink);flex:none}
.menu__foot{
  border-top:1px solid var(--rule);padding-top:var(--s24);
  display:flex;flex-direction:column;gap:var(--s12);
  opacity:0;transition:opacity 420ms var(--ease) 440ms;
}
.menu.open .menu__foot{opacity:1}
.menu__foot a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-2)}
.menu__foot a:hover{color:var(--ink)}

body.menu-open{overflow:hidden}

/* ---- 10. HERO -------------------------------------------- */

.hero{position:relative;background:var(--dark)}
/* 460vh gives a 360vh scroll range, which holds the 8.5s film at roughly
   the scroll-per-second pacing of the old 5s one. Three beats land at
   115 / 94 / 108vh plateaus. Keep in step with BANDS in hero.js. */
.hero__pin{height:460vh}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--dark)}

.hero__scene{position:absolute;inset:0;overflow:hidden;transition:opacity 700ms var(--ease)}
.hero__scene svg{
  position:absolute;top:50%;left:50%;width:132%;height:132%;
  transform:translate(-50%,-50%) scale(var(--zoom,1));
  will-change:transform;
}
.hero__poster{position:absolute;inset:0;background-size:cover;background-position:center 45%;opacity:0;transition:opacity 700ms var(--ease)}
/* The film also settles as you scroll: a slow scale from 1.07 to 1,
   so the scroll visibly moves the image even where the camera's own
   motion is subtle. Never below 1, or cover would reveal edges. */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1000ms var(--ease);
  will-change:transform;
  transform:translateZ(0) scale(var(--vscale,1.07));
}
.hero__stage.poster-on .hero__poster{opacity:1}
.hero__stage.poster-on .hero__scene{opacity:0}
.hero__stage.video-ready .hero__video{opacity:1}
.hero__stage.video-ready .hero__poster{opacity:0}

/* The film must stay watchable. Only the lower third is darkened,
   and only as much as the small caption needs. */
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(12,12,10,.34) 0%,rgba(12,12,10,.06) 22%,rgba(12,12,10,0) 44%,rgba(12,12,10,.42) 76%,rgba(12,12,10,.72) 100%);
}
.hero__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay;
}

.hero__bands{position:absolute;inset:0}

/* Small, low in the frame, so the camera move stays visible.
   Each beat drifts slowly upward across its own range, so the change
   from one to the next is a vertical dissolve rather than a blink. */
.band{
  position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:15%;
  max-width:800px;
  text-align:left;color:#F7F5EF;
  text-shadow:var(--tshadow);
  opacity:0;pointer-events:none;
  transform:translate3d(0,var(--drift,0px),0);
  will-change:transform,opacity;
}
.band.live{pointer-events:auto}
.band::before{
  content:"";position:absolute;inset:-60% -20% -80% -12%;pointer-events:none;z-index:-1;
  opacity:calc(.35 + .65*var(--k,1));
  background:radial-gradient(ellipse 70% 62% at 30% 62%,rgba(6,6,5,.62) 0%,rgba(6,6,5,.34) 52%,rgba(6,6,5,0) 78%);
}
.band .btn{text-shadow:none}
/* The hero band sits on dark footage but is not a .dark-sec, so .tlink
   inherited --ink and rendered charcoal-on-dark at 1.41:1. Light text,
   yellow underline, same as the dark sections get. */
.band .tlink{color:#F7F5EF}
.band .tlink::after{background:var(--yellow)}

/* Yellow text at 10px measured 3.25:1 over the time-lapse. The label goes
   light and the brand yellow becomes the dash beside it, where it is a
   graphic rather than small text. */
.band__kicker{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:#F7F5EF;margin-bottom:var(--s16);
  display:inline-flex;align-items:center;gap:var(--s12);
}
.band__kicker::before{
  content:"";width:22px;height:2px;background:var(--yellow);flex:none;
}
.band__h{
  font-family:var(--display);font-weight:300;
  font-size:clamp(24px,3.1vw,46px);line-height:1.14;
  letter-spacing:-.014em;max-width:22ch;
}
.band__h .hl{font-style:italic;color:#FBE9A8}
.band__sub{
  margin-top:var(--s16);font-size:clamp(14px,.6vw + 12px,16.5px);
  line-height:1.6;color:rgba(247,245,239,.86);max-width:46ch;
}
.band__cta{margin-top:var(--s24);display:flex;gap:var(--s16);flex-wrap:wrap;align-items:center}

.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.2,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-9px));
}
.e-depth .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:scale(calc(.9 + .1*var(--kc)));
}
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.2,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*10px));
}
.e-rise .band__sub{--ks:clamp(0,(var(--k,0) - .5)*2.4,1);opacity:var(--ks)}
.e-rise .band__cta{--kb:clamp(0,(var(--k,0) - .66)*2.6,1);opacity:var(--kb)}

.hero__cue{
  position:absolute;right:var(--gutter);bottom:var(--s32);
  display:flex;flex-direction:column;align-items:center;gap:var(--s8);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(247,245,239,.75);
  transition:opacity 500ms var(--ease);
}
.hero__cue .line{
  width:1px;height:36px;background:linear-gradient(rgba(247,245,239,.8),transparent);
  animation:cue 3.2s var(--ease-soft) infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.35}50%{transform:scaleY(1);opacity:1}}

.hero__ring{position:absolute;right:var(--gutter);top:calc(50% - 22px);width:40px;height:40px;color:rgba(247,245,239,.8)}
.hero__ring circle{transition:stroke-dashoffset 220ms linear}

.hero__hud{display:none}   /* the readout was noise on a calm hero */

.hero__prog{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--s24);
  height:1px;background:rgba(247,245,239,.24);overflow:hidden;
}
.hero__prog span{
  display:block;height:100%;background:var(--yellow);
  transform-origin:left center;transform:scaleX(var(--pp,0));
}
.hero--static .hero__prog{display:none}
@media (max-height:560px){.hero__prog{display:none}}

/* Static hero: a composed layout, not an apology. */
.hero--static .hero__pin{height:auto}
.hero--static .hero__stage{position:relative;height:auto;min-height:92svh;display:grid}
.hero--static .hero__bands{position:relative;display:grid;align-items:end;padding:var(--s128) 0 var(--s64)}
.hero--static .band{position:relative;left:auto;right:auto;bottom:auto;opacity:1!important;pointer-events:auto;padding-inline:var(--gutter);transform:none!important}
.hero--static .band:not([data-static]){display:none}
.hero--static .band .c,.hero--static .band .w{opacity:1!important;transform:none!important}
.hero--static .band__sub,.hero--static .band__cta{opacity:1!important}
.hero--static .hero__cue,.hero--static .hero__ring{display:none}
.hero--static .hero__scene svg{--zoom:1.06}

@media (max-height:560px){.hero__cue,.hero__ring{display:none}}

/* ---- 11. REVEALS ----------------------------------------- */

.rv{opacity:0;transform:translateY(18px);
    transition:opacity var(--t-section) var(--ease),transform var(--t-section) var(--ease)}
.rv.in{opacity:1;transform:none}

.stag > *{opacity:0;transform:translateY(16px);
          transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.stag.in > *{opacity:1;transform:none}
.stag.in > *:nth-child(1){transition-delay:0ms}
.stag.in > *:nth-child(2){transition-delay:80ms}
.stag.in > *:nth-child(3){transition-delay:160ms}
.stag.in > *:nth-child(4){transition-delay:240ms}
.stag.in > *:nth-child(5){transition-delay:320ms}
.stag.in > *:nth-child(6){transition-delay:400ms}
.stag.in > *:nth-child(n+7){transition-delay:460ms}
/* Retire the delays once the entrance is done, or every later hover
   lags by the stagger forever. Must outrank the :nth-child rules. */
.stag.done > *:nth-child(n){transition-delay:0ms!important}

.reveal-img{position:relative;overflow:hidden;background:var(--stone)}
.reveal-img::after{
  content:"";position:absolute;inset:0;background:var(--canvas);
  transform-origin:right center;transition:transform 1100ms var(--ease);
}
.reveal-img.in::after{transform:scaleX(0)}

/* ---- 12. IMAGE PLACEHOLDER ------------------------------- */

.ph{
  position:relative;overflow:hidden;
  background:linear-gradient(140deg,rgba(201,162,39,.05),transparent 60%),var(--stone);
  border:1px solid var(--rule);
  display:grid;place-items:center;
  aspect-ratio:var(--ar,4/3);
}
.ph::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(26,26,24,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,26,24,.045) 1px,transparent 1px);
  background-size:44px 44px;
}
.ph::after{content:"";position:absolute;inset:var(--s16);border:1px solid rgba(201,162,39,.28)}
.ph__label{
  position:relative;z-index:1;text-align:center;padding:var(--s24);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:#5E5B53;
  display:flex;flex-direction:column;gap:var(--s8);align-items:center;
}
.ph__label svg{width:24px;height:24px;color:var(--ochre);opacity:.8}
.dark-sec .ph{background:var(--dark-2);border-color:var(--rule-dark)}
.dark-sec .ph::before{background-image:
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)}
.dark-sec .ph__label{color:var(--on-dark-2)}

.frame{position:relative;overflow:hidden;background:var(--stone)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- 13. INTRO ------------------------------------------- */

.intro{align-items:start}
.intro__media{grid-column:1 / span 6;position:relative}
.intro__body{grid-column:8 / span 5;padding-top:var(--s64)}
.intro__stamp{
  position:absolute;right:-36px;bottom:-26px;z-index:2;
  background:var(--canvas);border:1px solid var(--rule-2);
  padding:var(--s24) var(--s32);
  display:flex;flex-direction:column;gap:var(--s4);
}
.intro__stamp .n{font-family:var(--display);font-size:40px;font-weight:300;line-height:1;color:var(--ochre-ink)}
.intro__stamp .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

@media (max-width:900px){
  .intro__media{grid-column:1 / -1}
  .intro__body{grid-column:1 / -1;padding-top:var(--s32)}
  .intro__stamp{right:var(--s16);bottom:-22px;padding:var(--s16) var(--s24)}
  .intro__stamp .n{font-size:30px}
}

/* ---- 14. CATEGORY ROWS ----------------------------------- */

.cats{border-top:1px solid var(--rule)}
.cat{
  display:grid;grid-template-columns:88px 1fr auto;
  align-items:center;gap:var(--s24);
  padding-block:clamp(20px,2.6vw,var(--s32));
  border-bottom:1px solid var(--rule);
  position:relative;overflow:hidden;
  transition:padding-left 520ms var(--ease);
}
.cat::before{
  content:"";position:absolute;inset:0;background:var(--stone);
  transform:scaleY(0);transform-origin:bottom center;z-index:-1;
  transition:transform 520ms var(--ease);
}
.cat:hover::before{transform:scaleY(1);transform-origin:top center}
.cat:hover{padding-left:var(--s24)}
.cat__num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--terracotta-ink)}
.cat__name{
  font-family:var(--display);font-weight:300;
  font-size:clamp(23px,3vw,42px);line-height:1.1;letter-spacing:-.014em;
  transition:transform 520ms var(--ease);
}
.cat:hover .cat__name{transform:translateX(8px)}
.cat__go{
  display:flex;align-items:center;gap:var(--s12);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
  opacity:0;transform:translateX(-10px);
  transition:opacity 440ms var(--ease),transform 440ms var(--ease);
}
.cat:hover .cat__go{opacity:1;transform:none}
.cat__count{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);letter-spacing:.1em}

@media (max-width:720px){
  .cat{grid-template-columns:52px 1fr;gap:var(--s16)}
  .cat__go{display:none}
  .cat__count{grid-column:2;margin-top:var(--s4)}
}

/* ---- 15. STATS ------------------------------------------- */

.stats{background:var(--stone)}
.stats__glow{display:none}
.stats__row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s48)}
.stat{display:flex;flex-direction:column;gap:var(--s8);padding-left:var(--s24);border-left:1px solid var(--rule-2)}
.stat__n{
  font-family:var(--display);font-weight:300;
  font-size:clamp(46px,6vw,92px);line-height:.95;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.stat__n .sfx{color:var(--ochre-ink)}
.stat__l{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:760px){.stats__row{grid-template-columns:1fr;gap:var(--s32)}}

/* ---- 16. PROJECT CARDS ----------------------------------- */

.pcard{display:block;position:relative}
.pcard__media{position:relative;overflow:hidden;aspect-ratio:var(--ar,4/3)}
.pcard__media .ph{aspect-ratio:var(--ar,4/3);height:100%;width:100%}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1100ms var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.04)}
.pcard__media .ph::after{transition:inset 800ms var(--ease),border-color 800ms var(--ease)}
.pcard:hover .ph::after{inset:var(--s8);border-color:rgba(201,162,39,.55)}

/* Also sized for a bright photograph: the hover label needs 4.5:1
   against whatever the project image turns out to be. */
.pcard__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,9,.78),rgba(10,10,9,.4) 42%,transparent 68%);
  opacity:0;transition:opacity 560ms var(--ease);
}
.pcard:hover .pcard__veil{opacity:1}

.pcard__plan{position:absolute;inset:0;pointer-events:none;color:rgba(255,255,255,.9)}
.pcard__plan rect{
  fill:none;stroke:currentColor;stroke-width:1;
  stroke-dasharray:var(--len,800);stroke-dashoffset:var(--len,800);
  transition:stroke-dashoffset 900ms var(--ease);
  vector-effect:non-scaling-stroke;
}
.pcard:hover .pcard__plan rect{stroke-dashoffset:0}

.pcard__go{
  position:absolute;right:var(--s16);bottom:var(--s16);
  display:flex;align-items:center;gap:var(--s8);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#F7F5EF;
  opacity:0;transform:translateY(8px);
  transition:opacity 500ms var(--ease),transform 500ms var(--ease);
}
.pcard:hover .pcard__go{opacity:1;transform:none}

.pcard__body{padding-top:var(--s16);display:flex;flex-direction:column;gap:var(--s4)}
.pcard__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(18px,1.3vw,24px);line-height:1.18;letter-spacing:-.008em;
  transition:color var(--t-micro) var(--ease);
}
.pcard:hover .pcard__title{color:var(--ochre-ink)}
.pcard__meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:var(--s8);align-items:baseline;
}
.pcard__meta .sep{color:var(--rule-2)}
.pcard__cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta-ink)}

/* ---- 17. CIRCULAR GALLERY -------------------------------- */

.ring-sec{overflow:hidden}
.ring{
  position:relative;height:clamp(400px,54vh,560px);
  perspective:1800px;margin-top:var(--s48);
  cursor:grab;touch-action:pan-y;
}
.ring.dragging{cursor:grabbing}
.ring__stage{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(var(--rot,0deg));will-change:transform;
}
.ring__item{
  position:absolute;left:50%;top:50%;
  width:var(--cardw,280px);height:var(--cardh,364px);
  margin-left:calc(var(--cardw,280px) / -2);
  margin-top:calc(var(--cardh,364px) / -2);
  transform:rotateY(var(--a,0deg)) translateZ(var(--r,500px));
  transform-style:preserve-3d;backface-visibility:hidden;
}
.ring__card{
  position:relative;width:100%;height:100%;overflow:hidden;
  background:var(--stone);border:1px solid var(--rule-2);
  transition:border-color 320ms var(--ease);
}
.ring__item:hover .ring__card{border-color:var(--ochre)}
.ring__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ring__card .ph{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0}
/* The scrim is sized for a BRIGHT photograph, not for the dark
   placeholder plates. Measured worst case over a near-white card:
   yellow number 7.7:1, title and meta 11.3:1. */
.ring__cap{
  position:absolute;left:0;bottom:0;width:100%;padding:var(--s48) var(--s16) var(--s16);
  background:linear-gradient(to top,
    rgba(10,10,9,.95) 0%,rgba(10,10,9,.88) 38%,
    rgba(10,10,9,.62) 66%,rgba(10,10,9,0) 100%);
  color:#F7F5EF;
}
.ring__cap .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--yellow)}
.ring__cap h3{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.16;margin-top:var(--s4)}
.ring__cap p{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,239,.78);margin-top:var(--s4)}

.ring__ctrl{display:flex;align-items:center;gap:var(--s16);margin-top:var(--s32);flex-wrap:wrap}
.ring__btn{
  width:46px;height:46px;border:1px solid var(--rule-2);
  display:grid;place-items:center;color:var(--ink);
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.ring__btn:hover{border-color:var(--ink);background:var(--stone)}
.ring__hint{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.ring__now{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ochre-ink);font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .ring{height:clamp(340px,48vh,440px);perspective:1300px}
  .ring__item{--cardw:200px;--cardh:264px;--r:370px}
}
@media (max-width:560px){
  .ring__item{--cardw:164px;--cardh:218px;--r:296px}
  .ring__now{margin-left:0;width:100%}
}

/* ---- 18. FEATURED ROWS ----------------------------------- */

.feat{display:flex;flex-direction:column;gap:clamp(48px,7vw,var(--s128))}
.feat__row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s32);align-items:end}
.feat__row--a .pcard:nth-child(1){grid-column:1 / span 7;--ar:16/10}
.feat__row--a .pcard:nth-child(2){grid-column:9 / span 4;--ar:3/4}
.feat__row--b .pcard:nth-child(1){grid-column:1 / span 12;--ar:21/9}
.feat__row--c .pcard:nth-child(1){grid-column:1 / span 5;--ar:4/5}
.feat__row--c .pcard:nth-child(2){grid-column:7 / span 6;--ar:4/3}
@media (max-width:900px){
  .feat__row{grid-template-columns:1fr;gap:var(--s48)}
  .feat__row .pcard{grid-column:1 / -1!important;--ar:4/3!important}
}

/* ---- 19. PORTFOLIO GRID AND FILTERS ---------------------- */

.filters{
  display:flex;gap:var(--s8);flex-wrap:wrap;
  border-bottom:1px solid var(--rule);
  padding-bottom:var(--s16);margin-bottom:var(--s48);
}
.filter{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
  padding:var(--s8) var(--s16);border:1px solid transparent;
  position:relative;white-space:nowrap;
  transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.filter:hover{color:var(--ink);border-color:var(--rule-2)}
.filter[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.filter .n{margin-left:var(--s8);font-size:9.5px;color:var(--ochre-ink)}

@media (max-width:720px){
  .filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);
  }
  .filters::-webkit-scrollbar{display:none}
  .filter{min-height:44px;display:inline-flex;align-items:center}
}

.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(28px,3.4vw,var(--s64)) var(--s32)}
.pgrid .pcard{grid-column:span 2;--ar:4/3}
.pgrid .pcard:nth-child(12n+1){grid-column:span 3;--ar:16/10}
.pgrid .pcard:nth-child(12n+2){grid-column:span 3;--ar:16/10}
.pgrid .pcard:nth-child(12n+6){grid-column:span 3;--ar:3/2}
.pgrid .pcard:nth-child(12n+7){grid-column:span 3;--ar:3/2}
.pgrid .pcard:nth-child(12n+11){grid-column:span 4;--ar:2/1}

.pcard{transition:opacity 380ms var(--ease),transform 380ms var(--ease)}
.pcard.hide{display:none}
.pcard.fading{opacity:0;transform:translateY(10px)}

@media (max-width:1023px){
  .pgrid{grid-template-columns:repeat(4,1fr)}
  .pgrid .pcard,
  .pgrid .pcard:nth-child(12n+1),.pgrid .pcard:nth-child(12n+2),
  .pgrid .pcard:nth-child(12n+6),.pgrid .pcard:nth-child(12n+7),
  .pgrid .pcard:nth-child(12n+11){grid-column:span 2;--ar:4/3}
}
@media (max-width:719px){
  .pgrid{grid-template-columns:1fr;gap:var(--s48)}
  .pgrid .pcard,
  .pgrid .pcard:nth-child(12n+1),.pgrid .pcard:nth-child(12n+2),
  .pgrid .pcard:nth-child(12n+6),.pgrid .pcard:nth-child(12n+7),
  .pgrid .pcard:nth-child(12n+11){grid-column:1 / -1;--ar:4/3}
}

.empty{grid-column:1 / -1;padding:var(--s96) var(--s24);text-align:center;border:1px dashed var(--rule-2)}
.empty .t{font-family:var(--display);font-size:clamp(20px,2.2vw,28px);font-weight:300}
.empty .s{margin-top:var(--s12);color:var(--ink-2);font-size:15px}

/* ---- 20. LEADERSHIP -------------------------------------- */

.leader{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s48);align-items:start}
.leader__media{grid-column:1 / span 5}
.leader__body{grid-column:7 / span 6}
.leader--flip .leader__media{grid-column:8 / span 5;order:2}
.leader--flip .leader__body{grid-column:1 / span 6;order:1}
.leader + .leader{margin-top:clamp(64px,9vw,var(--s160))}
.leader__name{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.2vw,46px);line-height:1.08;letter-spacing:-.016em}
.leader__role{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ochre-ink);margin-top:var(--s12)}
.leader__bio{margin-top:var(--s24);color:var(--ink-2)}
.leader__bio p + p{margin-top:var(--s16)}
.leader__phil{
  margin-top:var(--s32);padding-left:var(--s24);border-left:1px solid var(--ochre);
  font-family:var(--display);font-size:clamp(18px,1.6vw,25px);font-weight:300;
  line-height:1.36;color:var(--ink);font-style:italic;
}
.leader__tags{display:flex;flex-wrap:wrap;gap:var(--s8);margin-top:var(--s24)}
.tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--rule-2);padding:7px var(--s12);
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.tag:hover{border-color:var(--ochre);color:var(--ochre-ink)}
.dark-sec .tag{border-color:var(--rule-dark);color:var(--on-dark-2)}

@media (max-width:900px){
  .leader__media,.leader__body,
  .leader--flip .leader__media,.leader--flip .leader__body{grid-column:1 / -1;order:unset}
  .leader{gap:var(--s24)}
}

/* ---- 21. WHY CHOOSE US ----------------------------------- */

.reasons{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.reason{
  padding:clamp(24px,2.6vw,var(--s48));
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  position:relative;overflow:hidden;
  transition:background var(--t-micro) var(--ease);
}
.reason::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--ochre);
  transform:scaleX(0);transform-origin:left center;transition:transform 600ms var(--ease);
}
.reason:hover::before{transform:scaleX(1)}
.reason:hover{background:var(--panel)}
.reason__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--terracotta-ink)}
.reason__t{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.4vw,23px);line-height:1.2;margin-top:var(--s16)}
.reason__b{margin-top:var(--s12);color:var(--ink-2);font-size:14.5px;line-height:1.66}

@media (max-width:1023px){.reasons{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.reasons{grid-template-columns:1fr}}

.clients{display:flex;flex-wrap:wrap;gap:var(--s12)}
.client{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
  border:1px solid var(--rule-2);padding:var(--s12) var(--s16);background:var(--panel);
  transition:border-color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease);
}
.client:hover{border-color:var(--ochre);transform:translateY(-2px)}

/* ---- 22. APPROACH ---------------------------------------- */

.approach-sec{background:var(--sage)}
.principles{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--rule-2)}
.principle{
  padding:var(--s24) var(--s12);border-right:1px solid var(--rule-2);
  text-align:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  transition:color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.principle:last-child{border-right:0}
.principle:hover{color:var(--sage-ink);background:rgba(147,160,143,.16)}
@media (max-width:900px){
  .principles{grid-template-columns:repeat(2,1fr);border-left:1px solid var(--rule-2)}
  .principle{border-bottom:1px solid var(--rule-2)}
}

.creed{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s32)}
.creed__item{
  font-family:var(--display);font-weight:300;
  font-size:clamp(21px,2.4vw,36px);line-height:1.12;letter-spacing:-.016em;
  padding-top:var(--s24);border-top:1px solid var(--ochre);
}
@media (max-width:760px){.creed{grid-template-columns:1fr;gap:var(--s24)}}

/* ---- 23. AWARDS AND PUBLICATIONS ------------------------- */

.awards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s48)}
.award__media{--ar:3/4}
.award__year{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ochre-ink);margin-top:var(--s16)}
.award__t{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.4vw,23px);line-height:1.2;margin-top:var(--s8)}
.award__d{margin-top:var(--s8);color:var(--ink-2);font-size:14px}
@media (max-width:860px){.awards{grid-template-columns:1fr;gap:var(--s48)}}

.pubs{
  display:flex;gap:var(--s32);overflow-x:auto;padding-bottom:var(--s24);
  scrollbar-width:thin;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);
  scroll-snap-type:x mandatory;
}
.pub{flex:0 0 clamp(240px,26vw,330px);scroll-snap-align:start}
.pub__media{--ar:3/4}
.pub__n{font-family:var(--display);font-size:21px;font-weight:400;margin-top:var(--s16)}
.pub__d{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:var(--s4)}

/* ---- 24. TESTIMONIALS ------------------------------------ */

.tst{background:var(--sage)}
.tst__inner{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s48);align-items:start}
.tst__mark{grid-column:1 / span 2}
.tst__mark svg{width:60px;height:60px;color:var(--ochre);opacity:.42}
.tst__body{grid-column:3 / span 6}
.tst__who{grid-column:10 / span 3}

.tst__q{
  font-family:var(--display);font-weight:300;
  font-size:clamp(18px,1.7vw,27px);line-height:1.42;color:var(--ink);
}
.tst__q p + p{margin-top:var(--s24)}

.tst__slide{display:none}
.tst__slide.active{display:block;animation:tstin 700ms var(--ease)}
@keyframes tstin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.tst__name{font-family:var(--display);font-size:23px;font-weight:400}
.tst__role{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:var(--s8);line-height:1.6}
.tst__media{--ar:1/1;margin-bottom:var(--s24)}

.tst__ctrl{display:flex;align-items:center;gap:var(--s16);margin-top:var(--s48)}
.tst__btn{
  width:46px;height:46px;border:1px solid var(--rule-2);
  display:grid;place-items:center;color:var(--ink);
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.tst__btn:hover{border-color:var(--ink);background:var(--panel)}
.tst__dots{display:flex;gap:var(--s8);margin-left:var(--s8)}
.tst__dot{width:28px;height:2px;background:var(--rule-2);transition:background var(--t-micro) var(--ease)}
.tst__dot[aria-current="true"]{background:var(--ochre)}
.tst__count{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-2);margin-left:auto;font-variant-numeric:tabular-nums}

@media (max-width:1023px){
  .tst__inner{grid-template-columns:1fr;gap:var(--s32)}
  .tst__mark,.tst__body,.tst__who{grid-column:1 / -1}
  .tst__mark svg{width:44px;height:44px}
  .tst__who{display:grid;grid-template-columns:110px 1fr;gap:var(--s24);align-items:center}
  .tst__media{margin-bottom:0}
}
@media (max-width:520px){.tst__who{grid-template-columns:1fr}}

/* ---- 25. PROJECT DETAIL ---------------------------------- */

.pj-hero{padding-top:calc(var(--s128) + var(--s32))}
.pj-hero__media{--ar:21/9;margin-top:var(--s48)}
.pj-title{font-family:var(--display);font-weight:300;font-size:clamp(34px,5.4vw,78px);line-height:1.04;letter-spacing:-.02em}

.pj-spec{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin-top:var(--s48)}
.pj-spec__i{padding:var(--s24) var(--s24) var(--s24) 0;border-right:1px solid var(--rule)}
.pj-spec__i:last-child{border-right:0}
.pj-spec__l{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.pj-spec__v{font-family:var(--display);font-size:clamp(17px,1.6vw,25px);font-weight:400;margin-top:var(--s8);line-height:1.16}
@media (max-width:760px){
  .pj-spec{grid-template-columns:repeat(2,1fr)}
  .pj-spec__i{border-bottom:1px solid var(--rule);padding-right:var(--s16)}
  .pj-spec__i:nth-child(2n){border-right:0}
}

.pj-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s24)}
.pj-gallery__i{grid-column:span 6;--ar:4/3}
.pj-gallery__i--wide{grid-column:span 12;--ar:21/9}
@media (max-width:760px){.pj-gallery__i,.pj-gallery__i--wide{grid-column:1 / -1;--ar:4/3}}

.note{
  border:1px solid var(--rule-2);border-left:2px solid var(--ochre);
  padding:var(--s32);display:flex;gap:var(--s16);align-items:flex-start;
  color:var(--ink-2);font-size:14.5px;line-height:1.64;background:var(--panel);
}
.note svg{width:20px;height:20px;flex:none;color:var(--ochre);margin-top:2px}

/* ---- 26. LIGHTBOX ---------------------------------------- */

.lb{
  position:fixed;inset:0;z-index:140;background:rgba(16,16,14,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity 340ms var(--ease),visibility 340ms;
}
.lb.open{opacity:1;visibility:visible}
.lb__stage{max-width:min(1200px,92vw);max-height:80vh;width:100%;display:grid;place-items:center}
.lb__stage img{max-width:100%;max-height:80vh;object-fit:contain}
.lb__stage .ph{width:min(900px,88vw);--ar:4/3}
.lb__btn{
  position:absolute;width:50px;height:50px;display:grid;place-items:center;
  color:#F7F5EF;border:1px solid rgba(247,245,239,.3);
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.lb__btn:hover{border-color:#F7F5EF;background:rgba(247,245,239,.08)}
.lb__prev{left:var(--s24);top:50%;transform:translateY(-50%)}
.lb__next{right:var(--s24);top:50%;transform:translateY(-50%)}
.lb__close{right:var(--s24);top:var(--s24)}
.lb__count{position:absolute;left:var(--s24);top:var(--s24);font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:rgba(247,245,239,.85);font-variant-numeric:tabular-nums}
.lb__cap{position:absolute;left:50%;bottom:var(--s24);transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,239,.75);text-align:center;padding-inline:var(--s24)}
@media (max-width:720px){
  .lb__prev{left:var(--s8)}.lb__next{right:var(--s8)}
  .lb__btn{width:44px;height:44px}
}

/* ---- 27. FORMS ------------------------------------------- */

.form{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s24)}
.field{display:flex;flex-direction:column;gap:var(--s8)}
.field--full{grid-column:1 / -1}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.field .req{color:var(--ochre-ink)}
.field input,.field select,.field textarea{
  background:var(--panel);border:1px solid var(--rule-2);
  padding:var(--s16);min-height:54px;font-size:16px;color:var(--ink);border-radius:0;
  transition:border-color var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ochre-ink);box-shadow:0 0 0 3px rgba(201,162,39,.16);
}
.field .err{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#96321F}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#96321F}
.field .hint{font-size:13px;color:var(--ink-2)}

.form__foot{grid-column:1 / -1;display:flex;align-items:center;gap:var(--s24);flex-wrap:wrap;margin-top:var(--s8)}
.form__note{font-size:13px;color:var(--ink-2);max-width:44ch;line-height:1.55}
.form__msg{
  grid-column:1 / -1;padding:var(--s24);
  border-left:2px solid var(--ochre);background:var(--panel);
  font-size:15px;line-height:1.6;color:var(--ink);
}
.form__msg[hidden]{display:none}
.form__msg.err{border-left-color:#96321F}
@media (max-width:720px){.form{grid-template-columns:1fr}}

/* ---- 28. CONTACT ----------------------------------------- */

.cinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s32);border-top:1px solid var(--rule)}
.cinfo__i{padding-top:var(--s24);display:flex;flex-direction:column;gap:var(--s8)}
.cinfo__l{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.cinfo__v{font-family:var(--display);font-size:clamp(17px,1.5vw,24px);font-weight:400;line-height:1.24}
.cinfo__v a{transition:color var(--t-micro) var(--ease)}
.cinfo__v a:hover{color:var(--ochre-ink)}
@media (max-width:820px){.cinfo{grid-template-columns:1fr;gap:var(--s24)}}

.mapbox{position:relative;aspect-ratio:21/9;overflow:hidden;border:1px solid var(--rule-2);background:var(--stone)}
.mapbox iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(.94) opacity(.88)}
@media (max-width:720px){.mapbox{aspect-ratio:4/3}}

/* ---- 29. FINAL CTA --------------------------------------- */

.cta{position:relative;overflow:hidden;background:var(--clay)}
.cta__glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 90% at 78% 100%,rgba(192,103,74,.16),transparent 66%);
  animation:ctaglow 18s var(--ease-soft) infinite alternate;animation-delay:-6s;
}
@keyframes ctaglow{0%{opacity:.5}100%{opacity:1}}
.cta__h{font-family:var(--display);font-weight:300;font-size:clamp(29px,4.3vw,62px);line-height:1.1;letter-spacing:-.018em}
.cta__h .hl{font-style:italic;color:var(--ochre-ink)}
.cta__s{margin-top:var(--s24);color:var(--ink-2);font-size:clamp(16px,.8vw + 13px,19px);max-width:52ch}
.cta__row{margin-top:var(--s48);display:flex;gap:var(--s16);flex-wrap:wrap;align-items:center}
.cta__line{margin-top:var(--s48);padding-top:var(--s24);border-top:1px solid var(--rule-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}

/* ---- 30. FOOTER ------------------------------------------ */

.site-footer{background:var(--dark);color:var(--on-dark);padding-block:var(--s96) var(--s32)}
.site-footer__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s48)}
.site-footer__brand{grid-column:1 / span 4}
.site-footer__links{grid-column:6 / span 3}
.site-footer__contact{grid-column:9 / span 4}
.site-footer .logo__type{color:var(--on-dark)}
.site-footer .logo__sub{color:var(--on-dark-2)}
.site-footer .logo__mark{color:var(--yellow)}
.site-footer__desc{margin-top:var(--s24);color:var(--on-dark-2);font-size:14.5px;line-height:1.7;max-width:38ch}

.fcol__h{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);margin-bottom:var(--s24)}
.fcol li + li{margin-top:var(--s12)}
.fcol a{font-size:14.5px;color:var(--on-dark-2);transition:color var(--t-micro) var(--ease)}
.fcol a:hover{color:var(--on-dark)}
.fcol--contact a,.fcol--contact span{display:block;font-size:14.5px;color:var(--on-dark-2);line-height:1.7}
.fcol--contact a:hover{color:var(--on-dark)}

.site-footer__bar{
  margin-top:var(--s96);padding-top:var(--s24);border-top:1px solid var(--rule-dark);
  display:flex;justify-content:space-between;gap:var(--s24);flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.site-footer__bar button{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.site-footer__bar button:hover{color:var(--on-dark)}

@media (max-width:900px){
  .site-footer__grid{grid-template-columns:1fr;gap:var(--s48)}
  .site-footer__brand,.site-footer__links,.site-footer__contact{grid-column:1 / -1}
  .site-footer{padding-block:var(--s64) var(--s24)}
  .site-footer__bar{margin-top:var(--s48)}
}

/* ---- 31. FLOATING WHATSAPP ------------------------------- */

.wa{
  position:fixed;right:20px;z-index:80;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--canvas);border:1px solid var(--ink);
  box-shadow:0 6px 22px rgba(26,26,24,.2);
  transition:transform 320ms var(--ease),background 320ms var(--ease);
}
.wa:hover{transform:translateY(-3px);background:var(--ochre-ink);border-color:var(--ochre-ink)}
.wa svg{width:23px;height:23px}
@media (max-width:720px){
  .wa{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:46px;height:46px}
}

/* ---- 32. COOKIE NOTICE ----------------------------------- */

.cookie{
  position:fixed;left:20px;z-index:85;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  max-width:min(420px,calc(100vw - 40px));
  background:var(--panel);border:1px solid var(--rule-2);
  padding:var(--s24);box-shadow:0 12px 40px rgba(26,26,24,.14);
  transform:translateY(14px);opacity:0;visibility:hidden;
  transition:opacity 460ms var(--ease),transform 460ms var(--ease),visibility 460ms;
}
.cookie.show{opacity:1;transform:none;visibility:visible}
.cookie__t{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.cookie__b{margin-top:var(--s12);font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.cookie__row{margin-top:var(--s16);display:flex;gap:var(--s12);flex-wrap:wrap}
.cookie .btn{padding:var(--s12) var(--s24);font-size:10.5px}
@media (max-width:720px){
  .cookie{left:16px;right:16px;max-width:none;bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* ---- 33. PAGE HEAD (interior pages) ---------------------- */

.phead{padding-top:calc(var(--s128) + var(--s48));padding-bottom:clamp(48px,6vw,var(--s96));position:relative}
.phead__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s32);align-items:end}
.phead__t{grid-column:1 / span 7}
.phead__s{grid-column:9 / span 4;padding-bottom:var(--s12)}
@media (max-width:900px){
  .phead__t,.phead__s{grid-column:1 / -1}
  .phead__s{padding-bottom:0}
}

.crumb{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s24);
  display:flex;gap:var(--s8);flex-wrap:wrap;align-items:center;
}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--rule-2)}

/* ---- 34. 404 --------------------------------------------- */

.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding-block:var(--s128)}
.nf__code{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ochre-ink)}
.nf__h{font-family:var(--display);font-weight:300;font-size:clamp(27px,4.2vw,58px);line-height:1.1;letter-spacing:-.018em;margin-top:var(--s24);max-width:18ch}
.nf__row{margin-top:var(--s48);display:flex;gap:var(--s16);flex-wrap:wrap;justify-content:center}

/* ---- 35. HERO SCENE LAYERS (drawn fallback) -------------- */

.hero__scene .l-far{transform:translateY(calc(var(--p,0) * -14px))}
.hero__scene .l-mid{
  transform:translateY(calc(var(--p,0) * -40px));
  animation:heroBreathe 16s var(--ease-soft) infinite alternate;animation-delay:-5s;
}
.hero__scene .l-near{transform:translateY(calc(var(--p,0) * -96px))}
.hero__scene .dd-open{animation:none;opacity:calc(.28 + var(--p,0) * .72)}
@keyframes heroBreathe{0%{opacity:.46}100%{opacity:.64}}

/* ---- 36. THE INTERACTIVE MOMENT -------------------------- */

.draw__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s48);align-items:center}
.draw__side{grid-column:1 / span 5}
.draw__plate{grid-column:7 / span 6;position:relative}

.draw__btn{
  margin-top:var(--s32);position:relative;overflow:hidden;
  border:1px solid var(--ink);padding:var(--s16) var(--s32);min-height:50px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
.draw__fill{
  position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--yellow);
  transform:scaleX(var(--dp,0));transform-origin:left center;
}
.draw__label{position:relative;z-index:1}

.draw__svg{width:100%;height:auto;color:var(--ochre)}
.draw__svg .dl{stroke-dasharray:var(--len,600);stroke-dashoffset:calc(var(--len,600) * (1 - var(--dp,0)))}
.draw__ticks{opacity:calc(var(--dp,0) * .7);color:var(--ink-2)}

.draw__creed{margin-top:var(--s32);display:flex;flex-direction:column;gap:var(--s12)}
.draw__creed li{
  font-family:var(--display);font-weight:300;
  font-size:clamp(19px,1.9vw,29px);line-height:1.14;letter-spacing:-.014em;
  opacity:0;transform:translateY(10px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease);
}
.draw.done .draw__creed li{opacity:1;transform:none}
.draw.done .draw__creed li:nth-child(1){transition-delay:90ms}
.draw.done .draw__creed li:nth-child(2){transition-delay:240ms}
.draw.done .draw__creed li:nth-child(3){transition-delay:390ms}
.draw.done .draw__btn{pointer-events:none}

@media (max-width:900px){
  .draw__side,.draw__plate{grid-column:1 / -1}
  .draw__grid{gap:var(--s32)}
}

/* ---- 37. REDUCED MOTION ---------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
  }
  .rv,.stag > *{opacity:1!important;transform:none!important}
  .reveal-img::after{transform:scaleX(0)!important}
  .cut__rule{transform:scaleX(1)!important}
  .cut__mark circle{stroke-dashoffset:0!important}
  .cut__mark path{opacity:1!important}
  .band .c,.band .w{opacity:1!important;transform:none!important}
  .band__sub,.band__cta{opacity:1!important}
  .sheet__grid{animation:none!important}
  .draw__creed li{opacity:1!important;transform:none!important}
}

.pinned .rv,.pinned .stag > *,.pinned .mask-up{opacity:1!important;transform:none!important}
.pinned .reveal-img::after{transform:scaleX(0)!important}
.pinned .cut__rule{transform:scaleX(1)!important}
.pinned .cut__mark circle{stroke-dashoffset:0!important}
.pinned .cut__mark path{opacity:1!important}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---- 38. PRINT ------------------------------------------- */

@media print{
  .site-header,.menu,.wa,.cookie,.hero__pin,.lb,.ring{display:none!important}
  body{background:#fff;color:#000}
}

/* ============================================================
   39. THE INTERACTION LAYER
   Additive only. Every module here is gated on a real mouse
   (any-hover + pointer: fine, never screen width) and folds
   away completely under prefers-reduced-motion.
   ============================================================ */

/* ---- 39a. CURSOR COMPANION ------------------------------- */
/* The native cursor is NEVER replaced: hiding it breaks the
   system cursor-size setting for anyone who enlarged theirs.
   This is a label that follows alongside it instead. */

.cursor{
  position:fixed;top:0;left:0;z-index:130;pointer-events:none;
  display:flex;align-items:center;gap:var(--s8);
  padding:9px 15px;border-radius:999px;
  background:var(--ink);color:var(--canvas);
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.7);
  transition:opacity 260ms var(--ease),transform 320ms var(--ease),background 260ms var(--ease);
  will-change:transform,opacity;
}
.cursor.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.cursor[data-tone="accent"]{background:var(--yellow);color:var(--on-yellow)}
.cursor[data-tone="light"]{background:var(--canvas);color:var(--ink)}
.cursor .arrow{transition:transform var(--t-micro) var(--ease)}
.cursor.on .arrow{transform:translateX(2px)}

/* ---- 39b. CATEGORY HOVER PREVIEW ------------------------- */
/* Hovering a category row floats a plate near the pointer. */

.peek{
  position:fixed;top:0;left:0;z-index:70;pointer-events:none;
  width:290px;height:200px;overflow:hidden;
  background:var(--stone);border:1px solid var(--rule-2);
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.9) rotate(-2deg);
  transition:opacity 320ms var(--ease),transform 420ms var(--ease);
  will-change:transform,opacity;
  box-shadow:0 18px 50px rgba(26,26,24,.16);
}
.peek.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1) rotate(-2deg)}
.peek img{width:100%;height:100%;object-fit:cover}
.peek__plate{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:var(--s16);
  background:
    linear-gradient(140deg,rgba(201,162,39,.09),transparent 62%),
    var(--stone);
}
.peek__plate::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(26,26,24,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,26,24,.05) 1px,transparent 1px);
  background-size:34px 34px;
}
/* --ochre-ink is tuned for the lighter canvas and lands at 4.23:1 on
   this plate. The darker yellow-ink gives 5.1:1 here. */
.peek__num{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--yellow-ink)}
.peek__name{position:relative;font-family:var(--display);font-weight:300;font-size:26px;line-height:1.1}
.peek__count{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

/* ---- 39c. MAGNETIC BUTTONS ------------------------------- */

.mag{will-change:transform}
.mag > *{display:inline-flex;align-items:center;gap:inherit}

/* ---- 39d. CLIENT MARQUEE --------------------------------- */
/* Real client names, moving. Duplicated once for a seamless
   loop; the copy is aria-hidden so it is not read twice. */

.marquee{
  position:relative;overflow:hidden;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding-block:var(--s24);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;align-items:center;flex:none}
.marquee__item{
  display:flex;align-items:center;gap:var(--s32);
  padding-inline:var(--s32);
  font-family:var(--display);font-weight:300;
  font-size:clamp(20px,2vw,30px);line-height:1;color:var(--ink);
  white-space:nowrap;
}
.marquee__item::after{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--terracotta);flex:none;
}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---- 39e. MASKED HEADLINE REVEAL ------------------------- */
/* A wipe rather than a fade. Resize-safe: no line splitting. */

/* A clip-path wipe lived here and hid headlines on a real browser
   that this environment could not reproduce. Reliability beats the
   effect: this is the proven fade-and-rise, slightly longer for the
   big headings, with no clipping that can strand text invisible. */
.mask-up{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 820ms var(--ease),transform 900ms var(--ease);
}
.mask-up.in{opacity:1;transform:none}

/* ---- 39f. IMAGE PARALLAX --------------------------------- */
/* The plate is oversized so it can move inside its frame
   without ever exposing an edge. */

.par{overflow:hidden}
.par > .par__in{
  height:114%;margin-top:-7%;
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}
.par > .par__in > *{height:100%}

/* ---- 39g. SITE SCROLL PROGRESS --------------------------- */

.sprog{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:95;
  pointer-events:none;background:transparent;
}
.sprog span{
  display:block;height:100%;background:var(--ochre);
  transform-origin:left center;transform:scaleX(var(--sp,0));
}

/* ---- 39h. GATES ------------------------------------------ */
/* Pointer-based, not width-based: a small window with a mouse
   still gets these, a large touchscreen never does. */

@media not all and (any-hover: hover) and (pointer: fine){
  .cursor,.peek{display:none!important}
}
@media (hover: none),(pointer: coarse){
  .cursor,.peek{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .cursor,.peek{display:none!important}
  .marquee__track{animation:none!important;transform:none!important}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .mask-up{opacity:1!important;transform:none!important}
  .par > .par__in{transform:none!important;height:100%;margin-top:0}
  .sprog{display:none}
}

/* ---- 40. THE SUPPLIED LOGO ------------------------------- */
/* The brand mark is gold on transparent. Gold on the ivory canvas
   measures 1.48:1, so on light surfaces it is darkened into the
   ochre range: same hue, 5.3:1, legible. On the dark hero header,
   the footer and the menu it is shown exactly as supplied.
   To ship it untouched everywhere, delete the .logo__img filter. */

.logo__img{
  width:auto;
  height:58px;
  filter:brightness(.52) saturate(1.15);
  transition:filter 480ms var(--ease),height 480ms var(--ease);
}
/* it shrinks a little once the header goes solid, so the bar stays slim */
.site-header[data-mode="solid"] .logo__img{height:46px}
.site-footer .logo__img{height:64px}
.site-header[data-mode="over"] .logo__img,
.site-footer .logo__img,
.menu .logo__img{filter:none}

@media (max-width:900px){
  .logo__img,.site-header[data-mode="solid"] .logo__img{height:44px}
  .site-footer .logo__img{height:52px}
}
@media (max-width:420px){
  .logo__img,.site-header[data-mode="solid"] .logo__img{height:38px}
}

/* ---- 41. PROJECT WALKTHROUGH FILM ------------------------ */
/* preload="none" on the element, so the file is only fetched
   when a visitor actually presses play. */

.pvideo{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--dark);
  border:1px solid var(--rule-2);
}
.pvideo video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  background:var(--dark);
}
.pvideo__note{
  margin-top:var(--s12);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
@media (max-width:560px){.pvideo{aspect-ratio:4/3}}

/* ---- 42. THE LOGO LOCKUP --------------------------------- */
/* Mark, hairline, descriptor. The descriptor carries the trade
   without repeating the word "Domain" that is already in the
   mark. It is aria-hidden: the link's aria-label already says
   "Design Domain, home", so this is decoration to a reader. */

.logo{align-items:center;gap:var(--s16)}

.logo__rule{
  width:1px;height:34px;flex:none;
  background:var(--rule-2);
  transition:background 480ms var(--ease),height 480ms var(--ease);
}
.logo__desc{
  flex:none;
  font-family:var(--mono);font-size:8.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  line-height:1.7;color:var(--ink-2);
  transition:color 480ms var(--ease);
  white-space:nowrap;
}

.site-header[data-mode="over"] .logo__rule{background:rgba(243,240,232,.4)}
.site-header[data-mode="over"] .logo__desc{color:rgba(243,240,232,.86)}
.site-header[data-mode="solid"] .logo__rule{height:28px}

.site-footer .logo__rule{background:var(--rule-dark);height:38px}
.site-footer .logo__desc{color:var(--on-dark-2)}

.menu .logo__rule{background:var(--rule)}
.menu .logo__desc{color:var(--ink-2)}

/* Tight headers drop the descriptor rather than crowd the mark. */
@media (max-width:1180px){
  .site-header .logo__rule,.site-header .logo__desc{display:none}
}
@media (max-width:560px){
  .logo__rule,.logo__desc{display:none}
}

/* ---------------------------------------------------------------
   Client logo wall
   The marks come out of the company profile on white, so each tile
   is white too and the seam disappears. Greyscale at rest keeps 58
   competing brand palettes from shouting over the page; colour
   returns on hover, and always for anyone who prefers reduced motion.
   --------------------------------------------------------------- */
.logo-wall{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--s12);
}
.logo-wall__i{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s16);
  min-height:82px;
}
.logo-wall__i img{
  width:100%;
  height:auto;
  max-height:50px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.72;
  transition:filter .35s ease,opacity .35s ease;
}
.logo-wall__i:hover img{filter:grayscale(0);opacity:1}

@media (prefers-reduced-motion:reduce){
  .logo-wall__i img{filter:none;opacity:1;transition:none}
}
@media (max-width:560px){
  .logo-wall{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .logo-wall__i{min-height:68px;padding:var(--s12)}
  .logo-wall__i img{max-height:40px}
}