:root{
    --cinema:#141114;
    --velvet:#1D181B;
    --velvet-2:#262023;
    --velvet-3:#342b2e;
    --limestone:#EDE8DF;
    --limestone-2:#E3DDD1;
    --ink:#1A1719;
    --ink-muted:#5E574F;
    --screen:#F7F3EC;
    --screen-muted:#C9C1B6;
    --brass:#C9B68A;
    --brass-2:#DCCBA3;
    --hair-dark:rgba(243,238,230,.14);
    --hair-light:rgba(26,23,25,.16);
    --display:"Instrument Serif", "Didot", "Bodoni 72", Georgia, serif;
    --sans:"Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
    --measure:62ch;
    --gutter:clamp(20px, 5vw, 4.25rem);
    --wrap:78rem;
  }
  *{box-sizing:border-box}
  html{font-size:clamp(1.0625rem, .78rem + .3125vw, 1.25rem)}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  body{
    margin:0;
    background:var(--cinema);
    color:var(--screen);
    font-family:var(--sans);
    font-weight:400;
    font-size:1rem;
    line-height:1.6;
    text-rendering:geometricPrecision;
  }
  a{color:inherit}
  h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em;color:var(--screen)}
  .light h1,.light h2,.light h3{color:var(--ink)}
  p{margin:0}
  img{max-width:100%}
  :focus-visible{outline:2px solid var(--brass);outline-offset:4px}
  section[id]{scroll-margin-top:84px}

  .wrap{width:min(100% - 2*var(--gutter), var(--wrap));margin-inline:auto}

  /* ---------- Labels & type scale ---------- */
  .label{
    font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--brass);
  }
  .light .label{color:var(--ink-muted)}
  .h2{font-size:clamp(2.5rem, 5vw, 4.5rem);line-height:1.02}
  .h3{font-size:clamp(1.4rem, 1.8vw, 1.75rem);line-height:1.15}
  .lede{font-size:clamp(1.1rem, 1.4vw, 1.3rem);line-height:1.5;font-weight:400;max-width:var(--measure)}
  .muted{color:var(--screen-muted)}
  .light .muted{color:var(--ink-muted)}
  .prose{max-width:var(--measure)}

  /* ---------- Navigation ---------- */
  .nav{
    position:fixed;inset:0 0 auto 0;z-index:50;
    padding-block:18px;
    transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{background:rgba(20,17,20,.82);backdrop-filter:blur(14px);border-color:var(--hair-dark)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .wordmark{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
  .wordmark img{height:30px;width:auto;display:block}
  @media (max-width:900px){ .wordmark img{height:26px} }
  .menu{display:flex;gap:clamp(14px, 2vw, 34px);list-style:none;margin:0;padding:0}
  .menu a{text-decoration:none;font-size:.92rem;letter-spacing:.04em;font-weight:500;color:var(--screen);opacity:.9;transition:opacity .2s;white-space:nowrap;position:relative;padding-bottom:4px}
  .menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .menu a.is-current::after{transform:scaleX(1)}
  @media (hover:hover){ .menu a:hover::after{transform:scaleX(1)} }
  @media (min-width:901px) and (max-width:1099px){ .nav .btn{display:none} }   /* five menu items: the pill returns from 1100px */
  .menu a:hover{opacity:1}
  .btn{
    display:inline-flex;align-items:center;gap:.6em;
    font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
    text-decoration:none;padding:.95em 1.6em;border:1px solid var(--brass);color:var(--brass);
    background:transparent;cursor:pointer;transition:background .25s, color .25s;white-space:nowrap;flex:0 0 auto;
  }
  .btn:hover{background:var(--brass);color:var(--cinema)}
  .btn--solid{background:var(--brass);color:var(--cinema)}
  .btn--solid:hover{background:var(--brass-2)}
  .btn--quiet{border-color:transparent;padding-inline:.2em}
  .btn--quiet:hover{background:transparent;color:var(--brass-2)}
  .light .btn{border-color:var(--ink);color:var(--ink)}
  .light .btn:hover{background:var(--ink);color:var(--limestone)}
  .light .btn--solid{background:var(--ink);color:var(--limestone)}
  .light .btn--solid:hover{background:#000}
  .nav-toggle{display:none;background:none;border:1px solid var(--hair-dark);color:var(--screen);font:inherit;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;padding:.7em 1em;cursor:pointer}
  @media (max-width:900px){
    .menu{display:none}
    .nav .btn{display:none}
    .nav-toggle{display:inline-block}
    .nav.open .menu{display:flex;position:absolute;inset:100% 0 auto 0;flex-direction:column;gap:0;background:var(--cinema);border-bottom:1px solid var(--hair-dark);padding:8px var(--gutter) 20px;max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain}
    .nav.open .menu li{border-top:1px solid var(--hair-dark)}
    .nav.open .menu a{display:block;padding:16px 0;font-size:1rem}
    .nav.open{background:var(--cinema)}
  }

  /* ---------- Motion primitives ---------- */
  .js .reveal{opacity:0}
  .js .reveal.in{opacity:1;animation:reveal .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
  @keyframes reveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1} .js .reveal.in{animation:none} }
  .nav{transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1)}
  .nav.away{transform:translateY(-100%)}
  .nav.kb-focus{transform:none}
  @media (prefers-reduced-motion:reduce){ .nav{transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease} .nav.away{transform:none} }

  @media print{
    :root{--cinema:#fff;--velvet:#fff;--velvet-2:#fff;--velvet-3:#fff;--limestone:#fff;--limestone-2:#fff;--screen:#000;--screen-muted:#3d3833;--brass:#5f5133;--brass-2:#5f5133;--hair-dark:rgba(0,0,0,.2)}
    body{background:#fff}
    .js .reveal{opacity:1;animation:none}
    .nav,.hero-bg,.hero canvas,.interlude,.marquee-wrap,.editbar,.lightbox,.scroll-cue,.motion-toggle{display:none !important}
    .hero{min-height:auto;padding-top:24px}
    .hero h1,.hero .lede,.hero-eyebrow,.hero .hero-ctas{text-shadow:none}
    .story-text,.service,.faq-item{grid-template-rows:auto 1fr}
    .story-text p,.service p,.faq-a{opacity:1;transform:none;visibility:visible}
    .story-text p,.service p{padding-top:10px}
    .bio{display:grid} .bio-hint{display:none}
  }
  .still .marquee{animation-play-state:paused}
  .still .hero-bg img.is-active{animation-play-state:paused}
  .still .scroll-cue i{animation:none}
  .motion-toggle{all:unset;cursor:pointer;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--screen-muted);border-bottom:1px solid var(--hair-dark);padding-bottom:2px;white-space:nowrap}
  .motion-toggle:hover{color:var(--screen)}
  .motion-toggle:focus-visible{color:var(--screen);outline:2px solid var(--brass);outline-offset:4px}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* Disclosure buttons inside headings (expertise, story chapters, straight answers) */
  .disc{all:unset;display:block;width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
  .disc:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
  .editing .disc{cursor:text}
  .editing .story li,.editing .story-text,.editing .service,.editing .faq-item{grid-template-rows:auto 1fr}
  .editing .story-text p,.editing .service p,.editing .faq-a{opacity:1;transform:none;visibility:visible}
  .editing .story-text p,.editing .service p{padding-top:10px}

  /* ---------- Hero ---------- */
  .hero{position:relative;overflow:hidden;background:var(--cinema);min-height:92vh;display:grid;align-items:end;padding-block:150px 0}
  .hero-bg{position:absolute;inset:0;overflow:hidden;isolation:isolate;z-index:0}
  .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;z-index:0;transform:scale(1.08);transition:opacity 2.2s ease}
  .hero-bg img.is-active{opacity:1;z-index:2;animation:hero-settle 11s cubic-bezier(.2,.6,.2,1) forwards}
  .hero-bg img.is-leaving{opacity:1;z-index:1;transition:none;animation:none}
  .hero-bg img.slide--bright{filter:brightness(.72) saturate(.9)}
  .hero-bg::after{content:"";position:absolute;inset:0;z-index:5;background:
    linear-gradient(180deg, rgba(20,17,20,.62) 0%, rgba(20,17,20,.18) 38%, rgba(20,17,20,.55) 72%, rgba(20,17,20,.97) 100%),
    linear-gradient(90deg, rgba(20,17,20,.72) 0%, rgba(20,17,20,.28) 50%, rgba(20,17,20,.08) 100%)}
  @keyframes hero-settle{to{transform:scale(1)}}
  @media (prefers-reduced-motion:reduce){ .hero-bg img{animation:none;transform:none;transition:none} }
  .hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:.7;mix-blend-mode:screen;z-index:1}
  .scroll-cue{display:inline-flex;align-items:center;gap:12px;color:var(--screen-muted)}
  .scroll-cue i{display:block;width:1px;height:38px;background:linear-gradient(var(--brass), transparent);animation:cue 2.2s ease-in-out infinite}
  @keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
  @media (prefers-reduced-motion:reduce){ .scroll-cue i{animation:none} }
  .hero .wrap{position:relative;z-index:2}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;padding-bottom:72px}
  .hero h1,.hero .lede,.hero-eyebrow,.hero .hero-ctas{text-shadow:0 1px 24px rgba(0,0,0,.35)}
  .hero h1{font-size:clamp(3.2rem, 7.4vw, 7.4rem);line-height:.96;letter-spacing:-.015em;max-width:12ch}
  .hero h1 em{font-style:italic;font-weight:400}
  .hero-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:34px}
  .hero-eyebrow::before{content:"";flex:0 0 44px;width:44px;height:1px;background:var(--brass)}
  .hero-aside{display:grid;gap:30px;max-width:46ch;justify-self:end;padding-bottom:10px}
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
  .hero-frame{
    border-top:1px solid var(--hair-dark);
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;
    padding-block:20px 22px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--screen-muted)
  }
  .hero-frame ol{display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;margin:0;padding:0}
  .hero-frame ol li+li::before{content:"·";margin-right:28px;color:var(--brass)}
  .hero-tools{display:flex;align-items:center;gap:28px}
  @media (max-width:900px){
    .hero{padding-top:120px;min-height:auto}
    .hero-grid{grid-template-columns:1fr;gap:38px;padding-bottom:64px}
    .hero-aside{justify-self:start}
    .hero-eyebrow{align-items:flex-start}
    .hero-eyebrow::before{margin-top:.7em}
    .hero-frame ol li+li::before{display:none}
  }
  @media (max-width:600px){
    .hero{padding-top:104px}
    .hero-eyebrow{gap:12px;margin-bottom:26px;font-size:.68rem;letter-spacing:.16em;line-height:1.5}
    .hero-eyebrow::before{flex:0 0 28px;width:28px;margin-top:.55em}
    .hero h1{font-size:clamp(2.85rem, 13.5vw, 3.2rem)}
    .hero-aside{gap:22px}
    .hero .hero-ctas{order:-1}
    .hero .hero-ctas .btn--solid{width:100%;justify-content:center;box-sizing:border-box}
  }

  /* ---------- Full-bleed interludes ---------- */
  .interlude{position:relative;height:74vh;min-height:440px;overflow:hidden;display:grid;place-items:center;text-align:center;background:var(--cinema)}
  .interlude picture{position:absolute;inset:0;display:block}
  .interlude img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;display:block;will-change:transform}
  .interlude::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(20,17,20,.15) 0%, rgba(20,17,20,.72) 100%)}
  .interlude .inner{position:relative;z-index:1;display:grid;gap:22px;justify-items:center;padding-inline:var(--gutter)}
  .interlude .label{color:var(--brass-2)}
  .interlude p.big{font-family:var(--display);font-size:clamp(2.4rem, 6vw, 5.6rem);line-height:1;letter-spacing:-.012em;color:var(--screen);max-width:16ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.45)}
  .interlude p.big em{font-style:italic}
  @media (max-width:800px){ .interlude{height:62vh;min-height:360px} }

  /* ---------- Sections ---------- */
  .section{padding-block:clamp(84px, 10vw, 150px)}
  .dark{background:var(--cinema);color:var(--screen)}
  .velvet{background:var(--velvet);color:var(--screen)}
  .light{background:var(--limestone);color:var(--ink)}
  .sheet{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:40px clamp(40px, 6vw, 110px);align-items:start}
  .sheet-title{position:sticky;top:110px;display:grid;gap:14px}
  .sheet-title::after{content:"";width:44px;height:1px;background:currentColor;opacity:.45}
  .sheet-body{display:grid;gap:clamp(40px, 5vw, 72px)}
  .sheet-head{display:grid;gap:26px}
  @media (max-width:1100px){
    .sheet{grid-template-columns:1fr;gap:26px}
    .sheet-title{position:static}
  }

  /* Marques band */
  .marquee-wrap{position:relative;overflow:hidden;background:var(--limestone);padding-block:30px;contain:paint}
  .marquee-wrap{--edge:90px}
  @media (max-width:800px){ .marquee-wrap{--edge:34px} }
  .marquee-wrap::before,.marquee-wrap::after{content:"";position:absolute;top:0;bottom:0;width:var(--edge);z-index:1;pointer-events:none}
  .marquee-wrap::before{left:0;background:linear-gradient(90deg, var(--limestone), rgba(237,232,223,0))}
  .marquee-wrap::after{right:0;background:linear-gradient(270deg, var(--limestone), rgba(237,232,223,0))}
  .marquee{display:flex;width:max-content;will-change:transform;backface-visibility:hidden;animation:marquee 80s linear infinite}
  @media (hover:hover){ .marquee:hover{animation-play-state:paused} }
  .marquee-track{list-style:none;margin:0;padding:0;display:flex;align-items:center;white-space:nowrap;flex:0 0 auto}
  .marquee-track li{padding:0;display:flex;align-items:center;flex:0 0 auto}
  .marquee-track li img{height:clamp(22px, 2.2vw, 34px);width:auto;max-width:190px;display:block;object-fit:contain}
  @keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  @media (prefers-reduced-motion:reduce){ .marquee{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:18px 0} .marquee-track[aria-hidden="true"]{display:none} .marquee-track{flex:0 1 100%;max-width:100%;flex-wrap:wrap;justify-content:center;gap:18px 0;white-space:normal} .marquee{margin-left:0 !important} .marquee-wrap::before,.marquee-wrap::after,.mq-panel::before{display:none} }

  /* three facts under hero */
  .facts{border-top:1px solid var(--hair-dark);border-bottom:1px solid var(--hair-dark)}
  .facts .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .fact{padding:40px clamp(24px, 3vw, 48px) 44px;display:grid;gap:14px;align-content:start}
  .fact+.fact{border-left:1px solid var(--hair-dark)}
  .fact:first-child{padding-left:0}
  .fact:last-child{padding-right:0}
  .fact h3{font-size:1.8rem}
  .fact p{color:var(--screen-muted);font-size:1rem}
  @media (max-width:900px){
    .facts .wrap{grid-template-columns:1fr}
    .fact{padding:28px 0}
    .fact+.fact{border-left:0;border-top:1px solid var(--hair-dark)}
  }

  /* About: the story */
  .story{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--hair-dark)}
  .story li{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:12px clamp(28px, 4vw, 64px);padding:26px 0;border-bottom:1px solid var(--hair-dark);cursor:default;transition:padding .4s ease}
  .story li.is-open{padding-bottom:32px}
  @media (hover:hover){ .story li:hover{padding-bottom:32px} }
  .story-when{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);padding-top:.55em;font-weight:600}
  .story-text{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
  .story li.is-open .story-text{grid-template-rows:auto 1fr}
  @media (hover:hover){ .story li:hover .story-text{grid-template-rows:auto 1fr} }
  .story-text h3{font-size:clamp(1.5rem, 2vw, 1.9rem);transition:color .3s}
  .story li.is-open h3{color:var(--brass-2)}
  @media (hover:hover){ .story li:hover h3{color:var(--brass-2)} }
  .story-text p{color:var(--screen-muted);max-width:var(--measure);min-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity .4s ease .1s, transform .4s ease .1s, padding .3s ease, visibility 0s linear .5s;padding-top:0}
  .story li.is-open p{opacity:1;transform:none;padding-top:10px;visibility:visible;transition-delay:.1s,.1s,0s,0s}
  @media (hover:hover){ .story li:hover p{opacity:1;transform:none;padding-top:10px;visibility:visible;transition-delay:.1s,.1s,0s,0s} }
  @media (prefers-reduced-motion:reduce){ .story li,.story-text,.story-text p,.story-text h3{transition:none} }
  .pull{margin:0;display:grid;gap:14px;padding:clamp(28px, 4vw, 48px) 0 0;justify-items:start}
  .pull blockquote{margin:0}
  .pull blockquote p{font-family:var(--display);font-style:italic;font-size:clamp(1.8rem, 3.4vw, 3rem);line-height:1.12;color:var(--screen);max-width:22ch;text-wrap:balance}
  .pull figcaption{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
  @media (max-width:800px){ .story li{grid-template-columns:1fr;gap:6px} .story-when{padding-top:0} }

  /* RIBA stages */
  .stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--hair-light);border-bottom:1px solid var(--hair-light);font-variant-numeric:tabular-nums}
  .stage{padding:22px 16px 26px 0;display:grid;gap:10px;align-content:start;position:relative;min-width:0}
  .stage+.stage{border-left:1px solid var(--hair-light);padding-left:16px}
  .stage .num{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--ink-muted)}
  .stage .name{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);line-height:1.4}
  .stage .role{font-size:.9rem;line-height:1.45;color:var(--ink)}
  .stage.on::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ink)}
  .stage.on .num{color:var(--ink)}
  .stage.off .role{color:var(--ink-muted);font-style:italic}
  .stages-key{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:.78rem;letter-spacing:.08em;color:var(--ink-muted)}
  .stages-key i{display:inline-block;width:26px;height:2px;background:var(--ink);vertical-align:middle;margin-right:10px}
  .stage:nth-child(5){border-left:0;padding-left:0} .stage:nth-child(n+5){border-top:1px solid var(--hair-light)}
  @media (max-width:600px){ .stages{grid-template-columns:repeat(2,minmax(0,1fr))} .stage:nth-child(odd){border-left:0;padding-left:0} .stage:nth-child(n+3){border-top:1px solid var(--hair-light)} .stage:nth-child(5){border-left:0} }

  /* Expertise grid */
  .services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair-dark)}
  .service{padding:26px 40px 26px 0;border-bottom:1px solid var(--hair-dark);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 0fr;gap:0 28px;align-content:start;position:relative;cursor:default;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1), padding .4s ease}
  .service.is-open{grid-template-rows:auto 1fr;padding-bottom:34px}
  @media (hover:hover){ .service:hover{grid-template-rows:auto 1fr;padding-bottom:34px} }
  .service p{grid-column:2;grid-row:2;min-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity .4s ease .1s, transform .4s ease .1s, visibility 0s linear .5s;padding-top:0}
  .service.is-open p{opacity:1;transform:none;padding-top:10px;visibility:visible;transition-delay:.1s,.1s,0s}
  @media (hover:hover){ .service:hover p{opacity:1;transform:none;padding-top:10px;visibility:visible;transition-delay:.1s,.1s,0s} }
  .service h3{transition:color .3s}
  .service.is-open h3{color:var(--brass-2)}
  @media (hover:hover){ .service:hover h3{color:var(--brass-2)} }
  .service:nth-child(even){padding-left:40px;padding-right:0;border-left:1px solid var(--hair-dark)}
  .service .idx{font-family:var(--display);font-size:1rem;color:var(--brass);padding-top:.35em;min-width:2.4em;font-variant-numeric:tabular-nums;grid-row:1 / span 2;grid-column:1}
  .service h3{grid-column:2;grid-row:1}
  .service h3{font-size:1.9rem}
  .service p{color:var(--screen-muted);max-width:44ch;font-size:.98rem}
  .service::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--brass);transition:width .5s cubic-bezier(.2,.7,.2,1)}
  .service:nth-child(even)::after{left:40px}
  .service.is-open::after{width:calc(100% - 40px)}
  @media (hover:hover){ .service:hover::after{width:calc(100% - 40px)} }
  @media (prefers-reduced-motion:reduce){ .service,.service p,.service h3,.service::after{transition:none} }
  @media (max-width:900px){
    .services{grid-template-columns:1fr}
    .service,.service:nth-child(even){padding:26px 0;border-left:0}
    .service.is-open,.service:nth-child(even).is-open{padding-bottom:34px}
    .service::after,.service:nth-child(even)::after{left:0}
    .service.is-open::after{width:100%}
    @media (hover:hover){ .service:hover,.service:nth-child(even):hover{padding-bottom:34px} .service:hover::after{width:100%} }
  }

  /* Protection pillars */
  .pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair-dark);border:1px solid var(--hair-dark)}
  .pillar{background:var(--velvet);padding:34px 28px 40px;display:grid;gap:16px;align-content:start}
  .pillar .glyph{width:38px;height:38px;color:var(--brass)}
  .pillar h3{font-size:1.8rem}
  .pillar p{color:var(--screen-muted);font-size:.96rem}
  @media (max-width:1300px){ .pillars{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:560px){ .pillars{grid-template-columns:1fr} }

  /* Projects */
  .projects{display:grid;gap:0;border-top:1px solid var(--hair-light)}
  .project{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px 48px;padding:38px 0 42px;border-bottom:1px solid var(--hair-light)}
  .project .where{display:grid;gap:8px;align-content:start}
  .project .where .label{color:var(--ink-muted)}
  .project h3{font-size:2.1rem}
  .project p{max-width:58ch}
  .project .tags{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
  @media (max-width:800px){ .project{grid-template-columns:1fr} }

  /* Featured project gallery */
  .featured{display:grid;gap:28px;padding-bottom:42px;border-bottom:1px solid var(--hair-light)}
  .featured+.featured{padding-top:8px}
  .gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .gallery figure{margin:0;overflow:hidden;background:var(--limestone-2)}
  .gallery img{width:100%;height:100%;object-fit:cover;display:block}
  .gallery .g1{grid-column:1 / span 4;aspect-ratio:3 / 2}
  .gallery .g2{grid-column:5 / span 2;aspect-ratio:3 / 4}
  .gallery .g3{grid-column:1 / span 3;aspect-ratio:3 / 2}
  .gallery .g4{grid-column:4 / span 3;aspect-ratio:3 / 2}
  .gallery .g5,.gallery .g6,.gallery .g7{grid-column:span 2;aspect-ratio:1 / 1}
  .featured-text{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px 48px;align-items:start}
  .featured-text .where{display:grid;gap:8px}
  .featured-text h3{font-size:2.1rem}
  .featured-text p{max-width:58ch}
  .featured-text .tags{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
  @media (max-width:800px){
    .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
    .gallery .g1{grid-column:1 / span 2}.gallery .g2{grid-column:1 / span 1;aspect-ratio:3 / 4}.gallery .g3{grid-column:2 / span 1;aspect-ratio:3 / 4}.gallery .g4{grid-column:1 / span 2}
    .gallery .g5,.gallery .g6{grid-column:span 1}.gallery .g7{grid-column:1 / span 2;aspect-ratio:3 / 2}
    .featured-text{grid-template-columns:1fr}
  }

  /* Photographs develop rather than slide */
  .js .featured .gallery img{opacity:0;transform:scale(1.06);transition:opacity 1.4s ease, transform 2.4s cubic-bezier(.2,.6,.2,1)}
  .js .featured.in .gallery img{opacity:1;transform:none}
  .gallery .g2 img{transition-delay:90ms}.gallery .g3 img{transition-delay:180ms}.gallery .g4 img{transition-delay:270ms}.gallery .g5 img{transition-delay:360ms}.gallery .g6 img{transition-delay:450ms}.gallery .g7 img{transition-delay:540ms}
  @media (prefers-reduced-motion:reduce){ .js .featured .gallery img{opacity:1;transform:none;transition:none} }

  /* Vision: the process in four steps, then the rooms now on the drawing board (CGIs, labelled as such) */
  .vsteps{list-style:none;margin:0;padding:36px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:1px solid var(--hair-dark)}
  .vstep{display:grid;gap:10px;align-content:start}
  .vstep-n{font-family:var(--display);font-size:1.05rem;color:var(--brass);font-variant-numeric:tabular-nums}
  .vstep h3{font-size:1.6rem}
  .vstep p{color:var(--screen-muted);font-size:.97rem}
  @media (max-width:1300px){ .vsteps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px} }
  @media (max-width:560px){ .vsteps{grid-template-columns:1fr} }
  .vsets{display:grid;gap:clamp(44px, 6vw, 80px)}
  .vsets-head{display:grid;gap:12px;border-top:1px solid var(--hair-dark);padding-top:36px}
  .vsets-note{color:var(--screen-muted);max-width:var(--measure);font-size:1rem}
  .vset{display:grid;gap:22px}
  .vgrid{display:grid;gap:12px}
  .vgrid--trio{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:1fr 1fr}
  .vgrid--trio .v-main{grid-row:1 / span 2}
  .vgrid--pair,.vgrid--pano{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vgrid--pano .v-wide{grid-column:1 / -1}
  .vgrid figure{margin:0;position:relative;overflow:hidden;background:var(--velvet-2);cursor:zoom-in}
  .vgrid img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16 / 9;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .vgrid .v-main img{aspect-ratio:auto}
  .vgrid .v-wide img{aspect-ratio:32 / 11}
  @media (hover:hover){ .vgrid figure:hover img{transform:scale(1.03)} }
  .vgrid figure::after{content:"CGI";position:absolute;left:12px;bottom:10px;font-size:.62rem;font-weight:600;letter-spacing:.24em;color:rgba(247,243,236,.92);text-shadow:0 1px 8px rgba(0,0,0,.75);pointer-events:none}
  .vgrid figure:focus-within{outline:2px solid var(--brass);outline-offset:3px}
  .vset-text{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:12px 48px;align-items:start}
  .vset-text .where{display:grid;gap:8px}
  .vset-text h3{font-size:1.9rem}
  .vset-text p{color:var(--screen-muted);max-width:58ch}
  @media (max-width:800px){
    .vgrid--trio,.vgrid--pair,.vgrid--pano{grid-template-columns:1fr;grid-template-rows:none}
    .vgrid--trio .v-main{grid-row:auto}.vgrid .v-main img{aspect-ratio:16 / 9}
    .vset-text{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){ .vgrid img{transition:none} .vgrid figure:hover img{transform:none} }

  /* Detail grids */
  .details{display:grid;gap:16px;padding-top:8px}
  .details-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
  .details-grid figure{margin:0;overflow:hidden;cursor:zoom-in;background:var(--limestone-2)}
  .details-grid img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .details-grid figure:hover img{transform:scale(1.05)}
  @media (prefers-reduced-motion:reduce){ .details-grid img{transition:none} .details-grid figure:hover img{transform:none} }
  @media (max-width:800px){ .details-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} }

  /* Lightbox */
  .lightbox[hidden]{display:none !important}
  .lightbox{position:fixed;inset:0;z-index:100;background:rgba(14,12,13,.9);-webkit-backdrop-filter:blur(18px) saturate(.8);backdrop-filter:blur(18px) saturate(.8);display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;padding:56px var(--gutter) 28px;opacity:0;transition:opacity .5s ease}
  .lightbox figure{opacity:0;transform:scale(.965);transition:opacity .5s ease .1s, transform .9s cubic-bezier(.2,.7,.2,1) .1s}
  @media (prefers-reduced-motion:reduce){ .lightbox figure{transform:none;transition:opacity .5s ease .1s} }
  .lightbox.is-open figure{opacity:1;transform:none}
  .lightbox img{transition:opacity .35s ease}
  .lightbox img.is-swapping{opacity:0}
  .lightbox:not(.is-open){pointer-events:none}
  .lightbox.is-open{opacity:1}
  .lightbox img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;display:block;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .lightbox figcaption{color:var(--screen-muted);font-size:.85rem;letter-spacing:.06em;margin-top:16px;text-align:center;max-width:60ch}
  .lightbox button{all:unset;cursor:pointer;position:absolute;color:var(--screen);font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;padding:14px 18px;opacity:.8}
  .lightbox button:hover{opacity:1}
  .lightbox button:focus-visible{opacity:1;outline:2px solid var(--brass);outline-offset:4px}
  .lightbox .lb-close{top:14px;right:var(--gutter)}
  .lightbox .lb-prev{left:var(--gutter);top:50%;transform:translateY(-50%)}
  .lightbox .lb-next{right:var(--gutter);top:50%;transform:translateY(-50%)}
  .lightbox .lb-count{position:absolute;top:22px;left:var(--gutter);color:var(--screen-muted);font-size:.74rem;letter-spacing:.2em;font-variant-numeric:tabular-nums}
  body.lb-open{overflow:hidden}
  .gallery figure{cursor:zoom-in}
  .zoom{all:unset;display:block;width:100%;height:100%;cursor:zoom-in;box-sizing:border-box}
  .zoom:focus-visible{outline:none}
  .gallery figure:focus-within,.details-grid figure:focus-within{outline:2px solid var(--ink);outline-offset:3px}
  .light :focus-visible{outline-color:var(--ink)}
  @media (max-width:800px){ .lightbox{padding-bottom:72px} .lightbox img{max-height:calc(100vh - 190px)} .lightbox .lb-prev,.lightbox .lb-next{top:auto;bottom:18px;transform:none} }

  /* Hero choreography */
  .js .hero-eyebrow,.js .hero h1,.js .hero-aside,.js .hero-frame{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both;animation-play-state:paused}
  .js.hero-ready .hero-eyebrow,.js.hero-ready .hero h1,.js.hero-ready .hero-aside,.js.hero-ready .hero-frame{animation-play-state:running}
  .js .hero h1{animation-delay:.25s}.js .hero-aside{animation-delay:.55s}.js .hero-frame{animation-delay:.85s}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .js .hero-eyebrow,.js .hero h1,.js .hero-aside,.js .hero-frame{animation:none} }

  /* Standard */
  .statement{font-family:var(--display);font-size:clamp(2.3rem, 5vw, 4.8rem);line-height:1.04;max-width:22ch;letter-spacing:-.012em;color:var(--screen)}
  .statement em{font-style:italic;color:var(--brass-2)}
  .holds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid var(--hair-dark);padding-top:40px}
  .hold{display:grid;gap:12px;align-content:start}
  .hold h3{font-size:1.75rem}
  .hold p{color:var(--screen-muted);font-size:.97rem}
  @media (max-width:800px){ .holds{grid-template-columns:1fr;gap:28px} }

  /* Contact */
  .contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px clamp(48px, 7vw, 120px)}
  .contact-side{display:grid;gap:30px;align-content:start;font-size:.98rem}
  .contact-side dl{margin:0;display:grid;gap:18px}
  .contact-side dt{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:6px}
  .contact-side dd{margin:0}
  .contact-side a{text-decoration:none;border-bottom:1px solid var(--hair-light)}
  form{display:grid;gap:26px}
  .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
  .field{display:grid;gap:8px}
  .field label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted)}
  .field input,.field select,.field textarea{
    font:inherit;font-weight:300;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);
    border-radius:0;padding:10px 0;width:100%;
  }
  .field select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%),linear-gradient(135deg, var(--ink) 50%, transparent 50%);background-position:calc(100% - 14px) 55%, calc(100% - 8px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:32px}
  .field textarea{min-height:120px;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
  .form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
  .form-foot small{color:var(--ink-muted);font-size:.86rem;max-width:40ch}
  @media (max-width:1100px){ .contact{grid-template-columns:1fr} }

  /* People */
  .people{display:grid;gap:36px;padding-bottom:clamp(40px, 5vw, 72px);border-bottom:1px solid var(--hair-dark);order:-1}
  .headshots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,190px));gap:28px 24px}
  .person{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;text-align:left;cursor:pointer;display:grid;gap:10px;width:100%;color:var(--screen);-webkit-tap-highlight-color:transparent}
  .person *{pointer-events:none}
  .person:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
  .bio:focus{outline:none}
  .bio:focus-visible{outline:2px solid var(--brass);outline-offset:12px}
  .person .portrait{display:block;aspect-ratio:4 / 5;overflow:hidden;border:1px solid var(--hair-dark);transition:border-color .25s, transform .3s}
  .person .portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.02);transition:filter .3s, opacity .3s;opacity:.82}
  .person .portrait--pending{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%, var(--velvet-3) 0%, var(--velvet) 62%, var(--cinema) 100%)}
  .person .portrait--pending .initial{font-family:var(--display);font-style:italic;font-size:2.8rem;line-height:1;color:var(--screen-muted);opacity:.85;transition:color .3s, opacity .3s;transform:translateY(-4%)}
  .person:hover .portrait--pending .initial,.person.is-open .portrait--pending .initial{color:var(--brass-2);opacity:1}
  .person:hover .portrait img,.person.is-open .portrait img{opacity:1}
  .person.is-open .portrait{border-color:var(--brass)}
  .person-name{font-family:var(--display);font-size:1.35rem;line-height:1.1}
  .person-role{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--screen-muted)}
  .person.is-open .person-role{color:var(--brass)}
  .bio-panel{border-top:1px solid var(--hair-dark);padding-top:32px;min-height:1px}
  .bio-hint{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--screen-muted)}
  .bio-panel.has-open .bio-hint{display:none}
  .bio{display:none;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:20px clamp(32px, 5vw, 80px);align-items:start}
  .bio.is-open{display:grid}
  .bio-who{display:grid;gap:8px}
  .bio-name{font-family:var(--display);font-style:italic;font-size:1.9rem;line-height:1.05;color:var(--screen)}
  .bio-role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--screen-muted)}
  .bio-text{display:grid;gap:18px}
  .bio-text p{max-width:var(--measure);font-size:clamp(1.05rem, 1.3vw, 1.2rem);line-height:1.6}
  @media (prefers-reduced-motion:no-preference){ .bio.is-open{animation:bio-in .35s ease} }
  @keyframes bio-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (max-width:800px){ .bio{grid-template-columns:1fr} .headshots{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))} }
  @media (min-width:801px){ .headshots{grid-template-columns:repeat(4,minmax(0,190px))} }

  /* Marques */
  .marques{display:grid;gap:34px;border-top:1px solid var(--hair-dark);padding-top:40px}
  .marques-head{display:grid;gap:14px}
  .marques-head p:not(.label){color:var(--screen-muted);max-width:var(--measure);font-size:1rem}
  .marques-head p.mq-hint{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--screen-muted)}
  /* The band is the way in: select a logo and its reason opens out of the band, in the same stone */
  .mq-stage{display:grid}
  .mq-logo{all:unset;box-sizing:border-box;display:flex;align-items:center;padding:12px 46px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mq-logo:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
  .mq-logo img{transition:opacity .35s ease}
  .marquee.is-held .mq-logo:not(.is-selected) img{opacity:.55}   /* on the image, never the button: the focus ring stays at full strength */
  @media (hover:hover){ .mq-stage:hover .marquee{animation-play-state:paused} }
  .marquee.is-held{animation-play-state:paused}
  .marquee{transition:margin-left .6s cubic-bezier(.2,.7,.2,1)}
  /* still layouts: keyboard focus inside the band, or the site's own Pause motion. Every logo in view, nothing moving. */
  .marquee.is-static,.still .marquee{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:18px 0;margin-left:0 !important}
  .marquee.is-static .marquee-track[aria-hidden="true"],.still .marquee-track[aria-hidden="true"]{display:none}
  .marquee.is-static .marquee-track,.still .marquee-track{flex:0 1 100%;max-width:100%;flex-wrap:wrap;justify-content:center;gap:18px 0;white-space:normal}
  .marquee-wrap.is-static::before,.marquee-wrap.is-static::after,.still .marquee-wrap::before,.still .marquee-wrap::after{display:none}
  .marquee-wrap.is-static ~ .mq-panel::before,.still .mq-panel::before{display:none}   /* the rising line only makes sense under a single row */
  .mq-panel{position:relative;background:var(--limestone);color:var(--ink);--mq-pad:clamp(24px, 4vw, 56px)}
  .mq-panel::before{content:"";position:absolute;left:var(--caret-x,50%);top:-16px;width:1px;height:16px;background:var(--ink);opacity:0;transition:opacity .3s ease}
  .mq-panel::after{content:"";position:absolute;left:var(--mq-pad);right:var(--mq-pad);top:0;height:1px;background:var(--hair-light);opacity:0;transition:opacity .3s ease}
  .mq-panel.is-open::before,.mq-panel.is-open::after{opacity:1}
  .mq-panel-inner{height:0;overflow:hidden;display:grid;position:relative;transition:height .55s cubic-bezier(.2,.7,.2,1)}
  .mq-item{grid-area:1 / 1;align-self:start;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:10px clamp(28px, 4vw, 64px);align-content:start;padding:30px var(--mq-pad) 48px;opacity:0;visibility:hidden;transition:opacity .35s ease, visibility 0s linear .35s}
  .mq-item.is-on{opacity:1;visibility:visible;transition-delay:.08s, 0s}
  .mq-when{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);padding-top:.55em;font-weight:600}
  .mq-text{display:grid;gap:10px}
  .mq-text h3{font-size:clamp(1.5rem, 2vw, 1.9rem);color:var(--ink)}
  .mq-text p{color:var(--ink-muted);max-width:var(--measure)}
  .mq-close{all:unset;box-sizing:border-box;position:absolute;right:var(--mq-pad);bottom:4px;min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);text-decoration:underline;text-decoration-color:var(--hair-light);text-underline-offset:5px;opacity:0;visibility:hidden;transition:opacity .3s ease}
  .mq-panel.is-pinned .mq-close{opacity:1;visibility:visible}
  .mq-close:hover{color:var(--ink)} .mq-close:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
  @media (max-width:800px){ .mq-panel{--mq-pad:20px} .mq-item{grid-template-columns:1fr;gap:6px;padding-bottom:52px} .mq-when{padding-top:0} .mq-logo{padding:12px 30px} }
  @media (prefers-reduced-motion:reduce){ .marquee,.mq-panel-inner,.mq-item,.mq-logo img,.mq-panel::before,.mq-panel::after{transition:none} }
  html:not(.js) .mq-panel-inner,.editing .mq-panel-inner{height:auto !important}
  html:not(.js) .mq-item,.editing .mq-item{grid-area:auto;opacity:1;visibility:visible}
  html:not(.js) .mq-close,.editing .mq-close,html:not(.js) .mq-hint{display:none}
  @media print{ .mq-panel-inner{height:auto !important} .mq-item{grid-area:auto;opacity:1;visibility:visible} .mq-close,.mq-hint{display:none} }   /* after the rules it overrides */

  /* FAQ: hover or tap to reveal */
  .faq{display:grid;border-top:1px solid var(--hair-dark)}
  .faq-item{display:grid;grid-template-rows:auto 0fr;border-bottom:1px solid var(--hair-dark);padding:22px 0;cursor:default;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1), padding .4s ease}
  .faq-item.is-open{grid-template-rows:auto 1fr;padding-bottom:30px}
  @media (hover:hover){ .faq-item:hover{grid-template-rows:auto 1fr;padding-bottom:30px} }
  .faq-q{font-size:clamp(1.3rem, 1.7vw, 1.65rem);line-height:1.2;transition:color .3s}
  .faq-q .disc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline}
  .faq-q .disc::after{content:"+";font-family:var(--sans);font-weight:300;font-size:1.4rem;color:var(--brass);transition:transform .3s}
  .faq-item.is-open .faq-q{color:var(--brass-2)}
  @media (hover:hover){ .faq-item:hover .faq-q{color:var(--brass-2)} }
  .faq-item.is-open .faq-q .disc::after{transform:rotate(45deg)}
  @media (hover:hover){ .faq-item:hover .faq-q .disc::after{transform:rotate(45deg)} }
  .faq-a{min-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity .4s ease .1s, transform .4s ease .1s, visibility 0s linear .5s}
  .faq-item.is-open .faq-a{opacity:1;transform:none;visibility:visible;transition-delay:.1s,.1s,0s}
  @media (hover:hover){ .faq-item:hover .faq-a{opacity:1;transform:none;visibility:visible;transition-delay:.1s,.1s,0s} }
  @media (prefers-reduced-motion:reduce){ .faq-item,.faq-q,.faq-q .disc::after,.faq-a{transition:none} }
  .faq-a p{color:var(--screen-muted);max-width:var(--measure);font-size:1rem;padding:12px 0 0}
  .faq-a p+p{padding-top:14px}

  /* Turnstile + admin editing */
  .turnstile{min-height:0;line-height:0}
  .turnstile:empty{margin:0}
  .editing [data-edit]{outline:1px dashed rgba(201,182,138,.55);outline-offset:3px;cursor:text;min-width:1ch}
  .editing [data-edit]:hover,.editing [data-edit]:focus{outline:2px solid var(--brass);background:rgba(201,182,138,.08)}
  .editing [data-edit].is-changed{outline-color:#6FBF8A}
  .editing .nav{transform:none !important}
  .editbar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:14px var(--gutter);background:rgba(20,17,20,.94);backdrop-filter:blur(12px);border-top:1px solid var(--brass);color:var(--screen);font-size:.9rem}
  .editbar-who b{font-weight:500}
  .editbar-status{color:var(--brass-2);margin-left:auto}
  .editing body{padding-bottom:160px}

  /* Form states */
  .form-status{font-size:.95rem;color:var(--ink);max-width:48ch}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* Club */
  .club{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px clamp(48px, 7vw, 120px);align-items:center}
  .club-mark{width:100%;max-width:340px;height:auto;display:block;justify-self:center}
  .club-body{display:grid;gap:26px}
  .club-points{display:grid;gap:14px;margin:0;padding:0;list-style:none;color:var(--screen-muted);font-size:.98rem;max-width:52ch}
  .club-points li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline}
  .club-points li::before{content:"";width:22px;height:1px;background:var(--brass);transform:translateY(-.35em)}
  @media (max-width:800px){ .club{grid-template-columns:1fr} .club-mark{max-width:240px;justify-self:start} }

  /* Group */
  .group{border-top:1px solid var(--hair-dark);padding-block:56px}
  .group .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px clamp(32px, 5vw, 72px);align-items:center}
  .group img{height:64px;width:auto;display:block}
  .group p{max-width:var(--measure);color:var(--screen-muted);font-size:.98rem}
  .group p b{font-weight:400;color:var(--screen)}
  @media (max-width:600px){ .group .wrap{grid-template-columns:1fr} .group img{height:52px} }

  /* Footer */
  footer{border-top:1px solid var(--hair-dark);padding-block:44px 48px;font-size:.84rem;color:var(--screen-muted)}
  footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;align-items:center}
  footer .foot-brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  footer .foot-legal{flex:1 0 100%;font-size:.72rem;line-height:1.5;color:var(--screen-muted);opacity:.78;border-top:1px solid var(--hair-dark);padding-top:18px;margin-top:4px}
  footer .foot-brand img{height:22px;width:auto;display:block;opacity:.9}
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
  footer a{text-decoration:none}
  footer a:hover{color:var(--screen)}

  /* ================= Multi-page additions ================= */
  .menu a[aria-current="page"]{opacity:1}
  .menu a[aria-current="page"]::after{transform:scaleX(1)}
  .editbar-pages{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.78rem;letter-spacing:.08em}
  .editbar-pages a{color:var(--screen-muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
  .editbar-pages a:hover{color:var(--screen)} .editbar-pages a[aria-current="page"]{color:var(--brass-2);border-bottom-color:var(--brass)}

  /* Inner page opening: the hero's voice at two-thirds the height, one still image */
  .page-head{position:relative;overflow:hidden;background:var(--cinema);display:grid;align-items:end;min-height:min(64vh, 660px);padding-block:180px 72px}
  .page-head-bg{position:absolute;inset:0}
  .page-head-bg img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.74) saturate(.9);transform:scale(1.05);animation:hero-settle 9s cubic-bezier(.2,.6,.2,1) forwards}
  .page-head-bg::after{content:"";position:absolute;inset:0;background:
    linear-gradient(180deg, rgba(20,17,20,.66) 0%, rgba(20,17,20,.28) 40%, rgba(20,17,20,.7) 78%, rgba(20,17,20,.98) 100%),
    linear-gradient(90deg, rgba(20,17,20,.76) 0%, rgba(20,17,20,.3) 55%, rgba(20,17,20,.1) 100%)}
  .page-head .wrap{position:relative;z-index:1;display:grid;gap:26px;justify-items:start}
  .page-head .hero-eyebrow{margin-bottom:0}
  /* the page's title is never left waiting on a scroll observer: it rises on load, like the home hero, and is simply there without motion */
  .js .page-head .wrap > *{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
  .js .page-head .wrap > :nth-child(2){animation-delay:.2s} .js .page-head .wrap > :nth-child(3){animation-delay:.45s}
  @media (prefers-reduced-motion:reduce){ .js .page-head .wrap > *{animation:none} }
  .page-head h1{font-size:clamp(2.8rem, 6.2vw, 5.8rem);line-height:.98;letter-spacing:-.015em;max-width:15ch;text-shadow:0 1px 24px rgba(0,0,0,.35)}
  .page-head .lede{max-width:54ch;color:var(--screen);text-shadow:0 1px 24px rgba(0,0,0,.35)}
  .still .page-head-bg img{animation-play-state:paused}
  @media (prefers-reduced-motion:reduce){ .page-head-bg img{animation:none;transform:none} }
  @media (max-width:900px){ .page-head{min-height:auto;padding-block:130px 52px} }
  @media print{ .page-head-bg{display:none} .page-head{min-height:auto;padding-block:24px} }

  /* Home: four facts */
  .facts--four .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
  .facts--four .fact h3{font-size:1.6rem}
  @media (min-width:901px) and (max-width:1300px){
    .facts--four .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
    .facts--four .fact:nth-child(odd){border-left:0;padding-left:0}
    .facts--four .fact:nth-child(even){padding-right:0}
    .facts--four .fact:nth-child(n+3){border-top:1px solid var(--hair-dark)}
  }
  @media (max-width:900px){ .facts--four .wrap{grid-template-columns:1fr} }

  /* Home: three photographs into the work page */
  .home-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .tile{position:relative;display:block;overflow:hidden;aspect-ratio:4 / 5;background:var(--limestone-2);text-decoration:none;color:var(--screen)}
  .tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .tile::after{content:"";position:absolute;inset:50% 0 0 0;background:linear-gradient(180deg, rgba(20,17,20,0), rgba(20,17,20,.74))}
  .tile-label{position:absolute;left:18px;bottom:16px;z-index:1;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
  @media (hover:hover){ .tile:hover img{transform:scale(1.04)} }
  .light .tile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  @media (max-width:800px){ .home-tiles{grid-template-columns:1fr} .tile{aspect-ratio:3 / 2} }
  @media (prefers-reduced-motion:reduce){ .tile img{transition:none} .tile:hover img{transform:none} }

  /* Home: the disciplines as a plain index into the expertise page */
  .disc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair-dark)}
  .disc-list li{border-bottom:1px solid var(--hair-dark)}
  .disc-list li:nth-child(even){border-left:1px solid var(--hair-dark)}
  .disc-list a{display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:0 16px;align-items:baseline;padding:17px 0;text-decoration:none;font-family:var(--display);font-size:clamp(1.3rem, 1.7vw, 1.6rem);line-height:1.15;color:var(--screen);transition:color .3s}
  .disc-list li:nth-child(even) a{padding-left:40px}
  .disc-list .idx{font-family:var(--display);font-size:.95rem;color:var(--brass);font-variant-numeric:tabular-nums}
  @media (hover:hover){ .disc-list a:hover{color:var(--brass-2)} }
  @media (max-width:800px){ .disc-list{grid-template-columns:1fr} .disc-list li:nth-child(even){border-left:0} .disc-list li:nth-child(even) a{padding-left:0} }
  .home-band{display:grid;gap:22px;justify-items:start}
  .home-band .marquee-wrap{width:100%}
  .marquee-track li.mq-plain{padding:12px 46px}
  @media (max-width:800px){ .marquee-track li.mq-plain{padding:12px 30px} }

  /* Home: picture beside words */
  .split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px clamp(40px, 6vw, 96px);align-items:center}
  .split-media{margin:0}
  .split-media img{width:100%;height:auto;display:block}
  .split-media figcaption{margin-top:12px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--screen-muted)}
  .split-text{display:grid;gap:22px;justify-items:start}
  @media (max-width:900px){ .split{grid-template-columns:1fr} }

  /* Home: the team at a glance */
  .team-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:22px 16px}
  .team-strip li{display:grid;gap:8px;align-content:start}
  .team-strip .portrait{display:block;aspect-ratio:4 / 5;overflow:hidden;border:1px solid var(--hair-dark)}
  .team-strip .portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.02)}
  .team-strip .portrait--pending{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%, var(--velvet-3) 0%, var(--velvet) 62%, var(--cinema) 100%)}
  .team-strip .initial{font-family:var(--display);font-style:italic;font-size:1.9rem;line-height:1;color:var(--screen-muted);opacity:.85}
  .team-strip .person-name{font-size:1.05rem}
  .team-strip .person-role{font-size:.6rem;letter-spacing:.14em;line-height:1.5}
  .team-strip li{min-width:0}
  .team-strip .person-name,.team-strip .person-role{overflow-wrap:anywhere}
  @media (max-width:1400px){ .team-strip{grid-template-columns:repeat(4,minmax(0,1fr))} }
  @media (max-width:560px){ .team-strip{grid-template-columns:repeat(2,minmax(0,1fr))} }

  /* Closing invitation on every page but Contact */
  .cta-inner{display:grid;gap:24px;justify-items:center;text-align:center}
  .cta-inner .lede{max-width:46ch}
  /* long button labels may wrap on the narrowest phones rather than push the page sideways */
  @media (max-width:480px){ .btn{white-space:normal;text-align:center;line-height:1.35} }
  .sheet-body > *{min-width:0}
  /* anchors reached from another page clear the fixed header */
  .service[id],#marques,#enquiry,#drawing-board,#answers{scroll-margin-top:104px}
  /* Home's logo band is decoration, not navigation: when motion is off it simply stops, one row, never the many-row "every logo in view" layout */
  .still .home-band .marquee{animation:none;flex-wrap:nowrap;width:max-content;justify-content:flex-start}
  .still .home-band .marquee-track,.still .home-band .marquee-track[aria-hidden="true"]{display:flex;flex:0 0 auto;flex-wrap:nowrap;max-width:none;white-space:nowrap;gap:0}
  .still .home-band .marquee-wrap::before,.still .home-band .marquee-wrap::after{display:block}
  @media (prefers-reduced-motion:reduce){
    .home-band .marquee{animation:none;flex-wrap:nowrap;width:max-content;justify-content:flex-start;gap:0}
    .home-band .marquee-track,.home-band .marquee-track[aria-hidden="true"]{display:flex;flex:0 0 auto;flex-wrap:nowrap;max-width:none;white-space:nowrap;gap:0}
    .home-band .marquee-wrap::before,.home-band .marquee-wrap::after{display:block}
  }
  /* Print, last so that it wins: everything open, no pictures behind text, no controls */
  @media print{
    .story-text,.service,.faq-item{grid-template-rows:auto 1fr !important}
    .story-text p,.service p,.faq-a{opacity:1 !important;transform:none !important;visibility:visible !important}
    .mq-panel-inner{height:auto !important} .mq-item{grid-area:auto !important;opacity:1 !important;visibility:visible !important}
    .bio{display:grid !important} .bio-hint,.mq-close,.mq-hint,.cta-band,.home-band,.tile::after{display:none !important}
    .js .reveal,.js .page-head .wrap > *{opacity:1 !important;animation:none !important}
    .tile{aspect-ratio:auto;color:#000} .tile-label{position:static}
    .hero{min-height:auto !important;padding-block:24px 0 !important}
    .hero h1,.hero .lede,.hero-eyebrow,.hero .hero-ctas,.page-head h1,.page-head .lede{text-shadow:none !important}
    .js .featured .gallery img{opacity:1 !important;transform:none !important;transition:none !important}
  }
  /* the not-found page has no menu, so its header keeps the button wherever it fits */
  .nav--bare .btn{display:inline-flex}
  @media (max-width:600px){ .nav--bare .btn{display:none} }