/* Self-hosted. Instrument Serif and IBM Plex are both SIL Open Font License 1.1,
     which permits redistribution and self-hosting. Six files, 126 KB total.
     Only the faces the site actually renders — no unused weights, no Google
     Fonts round-trip, no render-blocking third-party stylesheet. */
  @font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
    font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
  @font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
    font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
  @font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
    font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
  @font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-latin-400-italic.woff2') format('woff2');
    font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
  @font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
    font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
  @font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
    font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}


  :root{
    color-scheme:dark;
    --ground:#0E1013; --surface:#171A1F; --surface-2:#20242B;
    --ink:#E9EAEE; --ink-2:#A8AEB8; --ink-3:#7C838E; --line:#2A2F37;
    --amber:#D99B4E; --amber-lift:#E7AE63; --dusk:#7FA3C0;
    --invert-bg:#1B1F26; --invert-fg:#E9EAEE; --invert-2:#A8AEB8; --invert-line:#39404A;
    --logo-filter:grayscale(1) invert(1) brightness(1.45);
    --serif:"Instrument Serif",Georgia,serif;
    --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
    --wrap:1140px; --gut:clamp(20px,4.5vw,56px); --pad:clamp(38px,5vw,70px);
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
    font-weight:400;font-size:16.5px;line-height:1.58;-webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility}
  .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
  section{padding-block:var(--pad)}
  h1,h2,h3,h4{text-wrap:balance;margin:0}
  p{margin:0 0 12px}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--amber);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    html{scroll-behavior:auto}
    .faq .ans{transition:none!important}
    .faq details.open .ans{grid-template-rows:1fr}
  }
  [hidden]{display:none!important}
  b,strong{font-weight:500}
  /* faux-bold guard: these two families ship a single weight */
  .eyebrow,.crumb,.art-meta,.pposts .n,.pposts .go,.more b,.bleed figcaption,
  .statline span,.spec td:first-child,.tgrid h3,.pcats span,.caps .tag,
  .playlist span,.callnote,.sig,.steps .num,.nyc-more a,.art-foot h3{font-weight:400}
  .h-serif b,.h-serif strong,.statline b,.p-h1,.art-h1,
  .logo b,.logo i,.pcs h2,.pcs h4,footer .foot-h{font-weight:400}
  .h-serif{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.01em}
  .eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:9px;margin-bottom:14px}
  .eyebrow::before{content:"";width:20px;height:1px;background:var(--amber);flex:none}

  /* media with graceful fallback */
  .media{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
  .media .fb{position:absolute;inset:0}
  .media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .media .ph,.hero-shot .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:22px;
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:color-mix(in srgb,var(--ink) 52%,transparent);z-index:2}
  .media .slot{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;font-family:var(--mono);
    font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
    background:color-mix(in srgb,var(--ground) 82%,transparent);border-top:1px solid var(--line);z-index:3}
  .g1{background:radial-gradient(90% 70% at 25% 80%,color-mix(in srgb,var(--amber) 46%,transparent),transparent 62%),radial-gradient(80% 80% at 85% 10%,color-mix(in srgb,var(--dusk) 34%,transparent),transparent 60%)}
  .g2{background:linear-gradient(160deg,color-mix(in srgb,var(--dusk) 40%,transparent),transparent 58%),radial-gradient(70% 60% at 70% 75%,color-mix(in srgb,var(--amber) 40%,transparent),transparent 65%)}
  .g3{background:radial-gradient(100% 90% at 50% 100%,color-mix(in srgb,var(--amber) 38%,transparent),transparent 60%),linear-gradient(200deg,color-mix(in srgb,var(--dusk) 30%,transparent),transparent 50%)}
  .g4{background:radial-gradient(80% 70% at 15% 25%,color-mix(in srgb,var(--dusk) 42%,transparent),transparent 60%),radial-gradient(90% 80% at 90% 85%,color-mix(in srgb,var(--amber) 34%,transparent),transparent 62%)}
  .g5{background:linear-gradient(120deg,color-mix(in srgb,var(--amber) 34%,transparent),transparent 55%),radial-gradient(70% 70% at 80% 25%,color-mix(in srgb,var(--dusk) 36%,transparent),transparent 60%)}
  .g6{background:radial-gradient(110% 80% at 70% 15%,color-mix(in srgb,var(--amber) 42%,transparent),transparent 58%),linear-gradient(190deg,color-mix(in srgb,var(--dusk) 26%,transparent),transparent 60%)}

  /* top bar */
  .bar{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
    background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:saturate(140%) blur(10px)}
  .bar .wrap{display:flex;align-items:center;gap:26px;height:60px}
  .logo{font-family:var(--serif);font-size:22px;text-decoration:none;white-space:nowrap}
  .logo i{font-style:italic;color:var(--amber)}
  .nav{display:flex;gap:21px;margin-inline-start:auto;font-size:14px;color:var(--ink-2)}
  .nav a{text-decoration:none}.nav a:hover{color:var(--ink)}
  .bar .book{font-size:13.5px;padding:8px 15px;border:1px solid var(--ink);text-decoration:none;white-space:nowrap}
  .bar .book:hover{background:var(--ink);color:var(--ground)}
  @media(max-width:1020px){.nav{display:none}.bar .book{margin-inline-start:auto}}

  /* hero */
  .hero{padding:0}
  .hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,49vw);
    min-height:clamp(430px,58vh,610px)}
  .hero-copy{display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(36px,5vw,60px);
    padding-inline:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) clamp(22px,2.4vw,38px)}
  .hero-shot{position:relative;overflow:hidden;background:var(--surface)}
  .hero-shot img,.hero-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .hero-shot .fb{position:absolute;inset:0}
  @media(max-width:940px){
    .hero-split{grid-template-columns:1fr}
    .hero-copy{padding-inline:var(--gut);padding-block:clamp(30px,6vw,48px) clamp(24px,4vw,34px)}
    .hero-shot{height:clamp(280px,52vw,400px)}}
  @media(max-width:700px){
    /* image directly under the headline, copy beneath it */
    .hero-split{display:flex;flex-direction:column}
    .hero-copy{display:contents}
    .hero-copy h1{order:1;padding-inline:var(--gut);padding-top:clamp(26px,7vw,40px);margin:0}
    .hero-shot{order:2;margin-top:clamp(20px,5vw,28px);height:clamp(230px,56vw,330px)}
    .hero-copy .lede{order:3;padding-inline:var(--gut);margin-top:clamp(20px,5vw,26px)}
    .hero-copy .rating{order:4;padding-inline:var(--gut)}
    .hero-copy .hero-cta{order:5;padding-inline:var(--gut)}
    .hero-copy .callnote{order:6;padding-inline:var(--gut);padding-bottom:clamp(24px,6vw,34px)}}

  .hero-tag{position:absolute;left:clamp(16px,2vw,24px);bottom:clamp(16px,2vw,24px);
    display:flex;align-items:center;z-index:3;pointer-events:none}
  .hero-tag .dot{width:9px;height:9px;border-radius:50%;background:var(--amber-lift);flex:none;
    box-shadow:0 0 0 5px rgba(10,12,15,.32)}
  .hero-tag .txt{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;margin-left:0;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#EEF0F3;
    transition:max-width .55s cubic-bezier(.3,0,.2,1),opacity .3s,margin-left .55s cubic-bezier(.3,0,.2,1);
    text-shadow:0 1px 8px rgba(0,0,0,.6)}
  .hero-shot:hover .hero-tag .txt{max-width:460px;opacity:1;margin-left:11px}
  @media(max-width:940px){.hero-tag .txt{max-width:460px;opacity:1;margin-left:11px}}

  h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.9vw,52px);line-height:1.03;letter-spacing:-.016em}
  h1 i{font-style:italic;color:var(--amber)}
  .lede{font-size:clamp(16px,1.35vw,17.5px);color:var(--ink-2);max-width:47ch;margin-top:15px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-top:22px}
  .btn{display:inline-block;text-decoration:none;font-size:14.5px;padding:12px 24px;
    background:var(--ink);color:var(--ground);border:1px solid var(--ink);transition:background .18s,color .18s}
  .btn:hover{background:transparent;color:var(--ink)}
  .btn-ghost{background:transparent;color:var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:var(--ground)}
  .callnote{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:13px}
  .callnote a{color:var(--ink-2)}
  .rating{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
  .stars{display:flex;gap:2px}
  .stars svg{width:15px;height:15px;fill:var(--amber)}
  .rating b{font-weight:500;font-size:15px}
  .rating span{font-size:13.5px;color:var(--ink-3)}

  /* credential band */
  .auth{border-block:1px solid var(--line);background:var(--surface)}
  .authrow{display:flex;align-items:center;justify-content:space-between;
    gap:clamp(24px,4vw,60px);flex-wrap:wrap;padding-block:clamp(17px,2vw,23px)}
  .tier{display:flex;align-items:center;gap:12px;flex:none}
  .tier .dot{width:8px;height:8px;background:var(--amber);border-radius:50%;flex:none;
    box-shadow:0 0 0 5px color-mix(in srgb,var(--amber) 18%,transparent)}
  .tier b{font-weight:500;font-size:15.5px;letter-spacing:.005em}
  .tier small{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-3);margin-top:4px}
  .brands{display:flex;align-items:center;gap:0}
  .brandbox{display:grid;place-items:center;width:clamp(84px,8vw,112px);height:32px;
    padding-inline:clamp(8px,1vw,14px);border-left:1px solid var(--line)}
  .brandbox:first-child{border-left:0}
  .brandbox img{max-width:100%;max-height:var(--h,100%);width:auto;height:auto;object-fit:contain;
    filter:var(--logo-filter);opacity:.72;transition:opacity .2s}
  .brandbox:hover img{opacity:1}
  .brandbox .lf{display:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-3);text-align:center;line-height:1.2}
  .brandbox .lf.show{display:block}
  @media(max-width:900px){
    .authrow{gap:14px}
    .brands{flex-wrap:wrap;gap:0}
    .brandbox{width:clamp(70px,20vw,94px);height:26px;padding-inline:clamp(6px,1.6vw,12px)}
    .brandbox:nth-child(4){border-left:0}}

  .statline{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,48px);
    border-top:1px solid var(--line);padding-block:clamp(26px,3.4vw,42px)}
  .statline > div{position:relative;padding-left:clamp(0px,1.4vw,18px)}
  .statline > div + div{border-left:1px solid var(--line)}
  .statline b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,52px);
    line-height:.95;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .statline span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-3);margin-top:12px;line-height:1.4;white-space:nowrap}
  @media(max-width:680px){.statline{grid-template-columns:1fr 1fr;gap:20px 18px;padding-block:22px}
    .statline > div + div{border-left:0}
    .statline > div:nth-child(n+2){padding-left:0}
    .statline b{font-size:24px}}


  .more{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:18px}
  .more a{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
  .more img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.35) brightness(.72);
    transition:filter .5s ease,transform .7s cubic-bezier(.22,1,.36,1)}
  .more a:hover img{filter:grayscale(0) brightness(.85);transform:scale(1.04)}
  .more b{position:absolute;left:14px;bottom:12px;color:#fff;font-weight:500;font-size:14.5px;
    letter-spacing:-.01em;text-shadow:0 1px 12px rgba(0,0,0,.6)}
  @media(max-width:760px){.more{grid-template-columns:1fr 1fr}.more a:last-child{display:none}}

  .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,48px);
    margin:clamp(26px,3.4vw,40px) 0 clamp(22px,2.8vw,32px)}
  .tgrid h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--invert-2);padding-bottom:11px;border-bottom:1px solid var(--invert-line);margin:0}
  .tgrid ul{list-style:none;margin:13px 0 0;padding:0}
  .tgrid li{font-size:15px;line-height:1.5;padding:6px 0 6px 15px;position:relative;color:var(--invert-fg)}
  .tgrid li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:1px;background:var(--amber-lift)}
  .nw{white-space:nowrap}
  .tgrid .tnote p{font-size:14.5px;line-height:1.6;color:var(--invert-2);margin:13px 0 0}
  .tgrid .tnote a{color:var(--amber-lift);font-family:var(--mono);font-size:11.5px;
    letter-spacing:.05em;text-decoration:underline;text-underline-offset:3px}
  @media(max-width:760px){.tgrid{grid-template-columns:1fr;gap:24px}}

  .pg-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-2);max-width:54ch;margin-top:16px}
  .p-hero.pg{padding-bottom:clamp(6px,1vw,14px)}
  .pg-body.wide .pb-in{grid-template-columns:minmax(0,1fr)}
  .pg-body.wide .pb-in > div{max-width:82ch}
  .pg-body.wide .pblock:first-child .pb-in{padding-top:clamp(10px,1.4vw,20px)}
  .pg-body.wide .pb-in > h2{display:none}
  .pblock{border-top:1px solid var(--line)}
  .pblock:first-child{border-top:0}
  .pb-in{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:clamp(20px,4vw,64px);
    padding-block:clamp(38px,5vw,66px)}
  .pb-in > h2{position:sticky;top:86px;align-self:start;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--ink-3);margin:6px 0 0;font-weight:400}
  .pb-in p{font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.62;color:var(--ink-2);margin:0 0 15px;max-width:66ch}
  .pb-in p:last-child{margin-bottom:0}
  .pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,40px)}
  .pgrid h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.1vw,26px);
    line-height:1.15;margin:0 0 9px;letter-spacing:-.01em}
  .pgrid p{font-size:15px;line-height:1.58}
  .plist{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(24px,4vw,56px)}
  .plist li{break-inside:avoid;padding:11px 0 11px 22px;position:relative;font-size:16px;
    line-height:1.45;border-bottom:1px solid var(--line)}
  .plist li::before{content:counter(pl,decimal-leading-zero);counter-increment:pl;position:absolute;
    left:0;top:13px;font-family:var(--mono);font-size:10px;color:var(--amber)}
  .plist{counter-reset:pl}
  .pquote{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.9vw,36px);line-height:1.18;
    letter-spacing:-.015em;max-width:24ch;margin:0;color:var(--ink)}
  .pbio{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,30px);align-items:start}
  .pbio .av{width:clamp(56px,6vw,76px);aspect-ratio:1;border-radius:50%;background:var(--surface-2);
    border:1px solid var(--line);display:grid;place-items:center;font-family:var(--serif);
    font-size:clamp(21px,2.4vw,28px);color:var(--amber)}
  .pbio b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.3vw,28px);line-height:1.1}
  .pbio .role{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-3);margin:7px 0 14px}
  .pposts{list-style:none;margin:0;padding:0}
  .pposts li{border-bottom:1px solid var(--line)}
  .pposts a{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.4vw,34px);align-items:baseline;
    padding-block:clamp(15px,1.8vw,22px);text-decoration:none;color:var(--ink);
    transition:padding-left .35s cubic-bezier(.3,0,.2,1)}
  .pposts a:hover{padding-left:clamp(0px,1vw,14px)}
  .pposts .n{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
  .pposts .t{font-family:var(--serif);font-size:clamp(18px,1.9vw,24px);line-height:1.2}
  .pposts .go{font-family:var(--mono);font-size:11.5px;color:var(--amber);opacity:0;transition:opacity .3s}
  .pposts a:hover .go{opacity:1}
  .pposts .pdek{display:block;font-style:normal;font-family:var(--sans);font-size:14.5px;
    line-height:1.5;color:var(--ink-3);margin-top:7px;max-width:62ch}
  .pcats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
  .pcats span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    border:1px solid var(--line);padding:6px 11px;color:var(--ink-3)}
  .pcats span:first-child{border-color:var(--amber);color:var(--amber)}
  @media(max-width:820px){
    .pb-in{grid-template-columns:1fr;gap:14px;padding-block:32px}
    .pb-in > h2{position:static}
    .pgrid,.plist{grid-template-columns:1fr;columns:1}
    .pposts a{grid-template-columns:auto 1fr}.pposts .go{display:none}}
  .shroom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:start}
  .shroom-copy p{color:var(--ink-2);max-width:48ch;margin-top:14px;font-size:16px;line-height:1.6}
  .shroom-note{border-top:1px solid var(--line);padding-top:14px;font-size:15px!important}
  .shroom-copy .hero-cta{margin-top:22px}
  .shroom-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
  .shroom-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding-block:clamp(14px,1.7vw,19px);
    border-bottom:1px solid var(--line);align-items:baseline}
  .shroom-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);
    transform:translateY(-3px)}
  .shroom-list b{font-weight:500;font-size:16px;display:block}
  .shroom-list span{display:block;color:var(--ink-3);font-size:14.5px;line-height:1.5;margin-top:4px;
    grid-column:2}
  .shroom-list li{grid-template-areas:"dot title" ". desc"}
  @media(max-width:860px){.shroom{grid-template-columns:1fr;gap:26px}}

  .art-head{max-width:74ch}
  .art{padding-top:clamp(26px,3.4vw,44px)}
  .art-h1{font-size:clamp(30px,4.1vw,50px);line-height:1.06;letter-spacing:-.018em;margin:6px 0 0}
  .art-h1 em{font-style:italic;color:var(--amber)}
  .art-dek{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink-2);margin-top:16px;max-width:52ch}
  .art-meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--ink-3);margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
  .art-hero{margin-top:20px;aspect-ratio:16/7}
  .art-body{max-width:70ch;padding-block:clamp(26px,3.4vw,42px)}
  .art-body p{font-size:clamp(16px,1.42vw,17.8px);line-height:1.68;color:var(--ink-2);margin:0 0 20px}
  .art-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3vw,36px);line-height:1.15;
    letter-spacing:-.012em;color:var(--ink);margin:clamp(30px,3.4vw,44px) 0 14px}
  .art-body ul{list-style:none;margin:0 0 22px;padding:0}
  .art-body ul li{position:relative;padding:8px 0 8px 22px;font-size:16px;line-height:1.6;color:var(--ink-2);
    border-bottom:1px solid var(--line)}
  .art-body ul li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:1px;background:var(--amber)}
  .art-note{border-left:2px solid var(--amber);background:var(--surface);padding:16px 20px;margin:0 0 22px;
    font-size:15.5px!important;line-height:1.6;color:var(--ink)!important}
  .art-foot{max-width:70ch;padding-bottom:clamp(30px,4vw,50px)}
  .art-foot h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-3);margin:0 0 10px;font-weight:400}
  .art-src{list-style:none;margin:0 0 26px;padding:16px 0 0;border-top:1px solid var(--line)}
  .art-src li{font-size:13.5px;line-height:1.5;padding:5px 0;color:var(--ink-3)}
  .art-src a{color:var(--dusk)}
  .art-rel{display:flex;flex-wrap:wrap;gap:10px}
  .art-rel a{font-size:14px;border:1px solid var(--line);padding:9px 14px;text-decoration:none;color:var(--ink-2)}
  .art-rel a:hover{border-color:var(--amber);color:var(--ink)}
  @media(max-width:700px){.art-hero{aspect-ratio:4/3}.art-body ul li{font-size:15px}}
  /* One full-bleed photograph, used as material. Not a decorative band. */
  .bleed{position:relative;margin:0;width:100%;overflow:hidden;background:var(--surface)}
  .bleed img{display:block;width:100%;height:clamp(320px,52vh,600px);object-fit:cover;
    filter:saturate(.86) contrast(1.04)}
  .bleed figcaption{position:absolute;left:0;right:0;bottom:0;
    padding:clamp(28px,4vw,44px) var(--gut) clamp(16px,2vw,22px);
    background:linear-gradient(to top,rgba(8,9,11,.82),transparent);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
    color:rgba(255,255,255,.72)}
  .bleed figcaption span{color:var(--amber-lift);margin-right:12px}
  @media(max-width:700px){
    .bleed img{height:clamp(200px,30vh,260px)}
    .bleed figcaption{padding-top:18px;font-size:9.5px;letter-spacing:.09em}}
  /* New York: an editorial setting rather than another left-aligned stack. */
  .nyc-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(30px,6vw,96px);align-items:start}
  .nyc-head h2{font-size:clamp(30px,4.6vw,58px);line-height:1.02;letter-spacing:-.022em;margin:0}
  .nyc-rule{display:block;width:clamp(48px,7vw,96px);height:1px;background:var(--amber);
    margin-top:clamp(20px,2.6vw,32px)}
  .nyc-body p{color:var(--ink-2);font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.66;
    max-width:60ch;margin:0 0 18px}
  .nyc-body p:first-child{margin-top:6px}
  .nyc-more{margin-top:4px!important}
  .nyc-more a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--amber);
    text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
  .nyc-more a:hover{border-bottom-color:var(--amber)}
  @media(max-width:860px){.nyc-grid{grid-template-columns:1fr;gap:20px}
    .nyc-rule{margin-top:16px}}
  @media(max-width:560px){
    .hero-cta{display:grid;grid-template-columns:1fr;gap:9px}
    .hero-cta .btn{width:100%;text-align:center;justify-content:center}}
  .scopenote{max-width:68ch;margin-top:clamp(20px,2.6vw,30px);padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
    border-left:2px solid var(--amber);background:var(--surface);font-size:15.5px;line-height:1.6;color:var(--ink-2)}
  .scopenote b{color:var(--ink);font-weight:500}

  .statement{background:var(--invert-bg);color:var(--invert-fg);text-align:center;
    padding-block:clamp(52px,7.5vw,104px);border-block:1px solid var(--line)}
  .statement p{font-weight:400;font-size:clamp(27px,4.6vw,60px);line-height:1.1;
    letter-spacing:-.018em;max-width:15ch;margin:0 auto;text-wrap:balance}
  .statement em{display:block;font-style:italic;color:var(--amber-lift);margin-top:.18em}
  .statement .sig{display:block;margin-top:clamp(24px,3vw,38px);font-family:var(--mono);
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--invert-2)}
  @media(max-width:820px){.statement p{max-width:16ch}}

  .band-surface{background:var(--surface);border-block:1px solid var(--line)}

  /* audience fork */
  .fork{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
  @media(max-width:820px){.fork{grid-template-columns:1fr}}
  .door{border:1px solid var(--line);padding:clamp(22px,2.8vw,32px);display:flex;flex-direction:column;
    gap:10px;text-decoration:none;background:var(--ground);transition:border-color .2s,transform .2s}
  .door:hover{border-color:var(--amber);transform:translateY(-2px)}
  .door h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.12}
  .door p{margin:0;color:var(--ink-2);font-size:15.5px}
  .door .go{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--amber);margin-top:auto;padding-top:4px}

  /* expanding project rail */
  .rail{display:flex;gap:5px;height:clamp(380px,44vw,500px);margin-top:22px}
  .pane{position:relative;flex:1;min-width:0;overflow:hidden;text-decoration:none;
    border:1px solid var(--line);background:var(--surface);transition:flex .55s cubic-bezier(.4,0,.2,1)}
  .pane .fb{z-index:0}
  /* The pane photograph is a real <img>, not a CSS background, so it can carry
     srcset and a phone never downloads the desktop-sized file. Visually identical. */
  .pane-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
    transition:transform .8s cubic-bezier(.3,0,.2,1)}
  .pane::before{content:"";position:absolute;inset:0;z-index:2;
    background:linear-gradient(0deg,rgba(6,8,10,.9) 8%,rgba(6,8,10,.34) 46%,rgba(6,8,10,.12) 100%)}
  .pane.open{flex:3.6}
  .rail:hover .pane{flex:1}
  .rail:hover .pane:hover{flex:3.6}
  .pane:hover .pane-img{transform:scale(1.045)}
  .pane-in{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px;opacity:0;
    transform:translateY(8px);transition:opacity .35s .12s,transform .35s .12s;pointer-events:none}
  .pane.open .pane-in,.rail:hover .pane:hover .pane-in{opacity:1;transform:none}
  .rail:hover .pane.open:not(:hover) .pane-in{opacity:0;transform:translateY(8px)}
  .pane-in b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(21px,2vw,27px);
    color:#F6F7F8;line-height:1.1}
  .pane-in em{display:block;font-style:normal;font-size:14.5px;color:#C3C8D0;margin-top:4px}
  .pane-in i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--amber-lift);margin-top:12px}
  .pane-rot{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%) rotate(180deg);
    writing-mode:vertical-rl;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:#D6DAE0;white-space:nowrap;transition:opacity .3s}
  .pane.open .pane-rot,.rail:hover .pane:hover .pane-rot{opacity:0}
  .rail:hover .pane.open:not(:hover) .pane-rot{opacity:1}
  @media(max-width:820px){
    .rail{height:auto;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;padding-bottom:8px;margin-inline:calc(-1 * var(--gut));
      padding-inline:var(--gut);scrollbar-width:none}
    .rail::-webkit-scrollbar{display:none}
    .pane{flex:0 0 76%!important;height:clamp(300px,68vw,380px);scroll-snap-align:start}
    .pane-in{opacity:1!important;transform:none!important}
    .pane-rot{display:none}}
  .railbar{display:none}
  @media(max-width:820px){
    .railbar{display:block;height:1px;background:var(--line);margin-top:14px;position:relative}
    .railbar i{position:absolute;inset:0 auto 0 0;display:block;height:1px;background:var(--amber);
      width:30%;transform-origin:left;transition:transform .12s linear}}

  /* video player */
  .player{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(10px,1.4vw,16px);margin-top:22px}
  @media(max-width:860px){.player{grid-template-columns:1fr}}
  .player .stage{aspect-ratio:16/9}
  .playlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
    background:var(--line);border:1px solid var(--line);max-height:clamp(300px,34vw,420px);overflow:auto}
  .playlist button{width:100%;text-align:left;background:var(--ground);border:0;cursor:pointer;
    padding:12px 14px;font-family:var(--sans);display:block;border-left:2px solid transparent;
    transition:background .18s,border-color .18s}
  .playlist button:hover{background:var(--surface)}
  .playlist button.on{background:var(--surface-2);border-left-color:var(--amber)}
  .playlist button.on span{color:var(--ink-2)}
  .playlist b{display:block;font-weight:400;font-size:15px;color:var(--ink)}
  .playlist span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3);margin-top:3px}

  /* services */
  .caps{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
  .caps li{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3.4vw,54px);
    align-items:baseline;padding-block:clamp(22px,2.8vw,34px);border-bottom:1px solid var(--line);
    transition:padding-left .35s cubic-bezier(.3,0,.2,1)}
  .caps li:hover{padding-left:clamp(0px,1.2vw,18px)}
  .caps .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--ink-3);
    padding-top:9px;transition:color .25s}
  .caps li:hover .n{color:var(--amber)}
  .caps h2{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;
    font-size:clamp(27px,3.6vw,44px);line-height:1.05;margin:0 0 8px}
  .caps h2 a{color:inherit;text-decoration:none}
  .caps h2 a:hover{color:var(--amber)}
  .caps h2 em{font-style:italic;color:inherit}
  .caps p{margin:0;color:var(--ink-2);font-size:15.5px;max-width:58ch}
  .caps .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-3);white-space:nowrap;padding-top:11px}
  @media(max-width:760px){
    .caps li{grid-template-columns:auto 1fr;gap:14px;padding-block:18px}
    .caps .tag{grid-column:2;padding-top:10px;white-space:normal}
    .caps h2{font-size:clamp(24px,7vw,32px)}
    .caps p{font-size:14.5px}
    .caps li:hover{padding-left:0}}

  /* process */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px);
    margin-top:clamp(26px,3.2vw,40px);position:relative}
  .steps::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line)}
  @media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.steps{grid-template-columns:1fr}}
  .steps > div{border-top:0;padding-top:26px;position:relative}
  .steps > div::before{content:"";position:absolute;top:1px;left:0;width:9px;height:9px;
    border-radius:50%;background:var(--ground);border:1px solid var(--amber)}
  .steps > div:first-child::before{background:var(--amber)}
  .steps .num{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;color:var(--ink-3);margin-bottom:9px}
  .steps h3{margin:0 0 5px;font-size:16.5px;font-weight:500}
  .steps p{margin:0;font-size:14.5px;color:var(--ink-2)}
  .steps .you{margin-top:8px;font-size:13.5px;color:var(--ink-3);font-style:italic}

  /* pricing */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,54px);
    margin-top:clamp(26px,3.2vw,38px)}
  @media(max-width:820px){.tiers{grid-template-columns:1fr}}
  .tier-card{border:0;border-top:1px solid var(--ink-3);padding:clamp(14px,1.8vw,20px) 0 0;background:none}
  .tier-card h3{font-family:var(--sans);font-weight:500;font-size:clamp(16px,1.5vw,17.5px);
    line-height:1.3;margin:0 0 11px;max-width:20ch;letter-spacing:-.005em}
  .tier-card p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
  .tier-card ul{list-style:none;margin:12px 0 0;padding:0;font-size:14px;color:var(--ink-2);
    display:flex;flex-direction:column;gap:5px}
  .tier-card li::before{content:"— ";color:var(--amber)}

  /* faq accordion */
  .faq{margin-top:20px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;
    gap:clamp(16px,2.4vw,34px);align-items:start;padding-block:clamp(17px,1.9vw,23px);
    font-size:clamp(16px,1.5vw,18.5px);line-height:1.38;letter-spacing:-.005em;
    transition:color .25s ease}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--amber-lift)}
  .faq summary:focus-visible{outline:1px solid var(--amber);outline-offset:4px}
  .faq .ic{position:relative;width:15px;height:15px;flex:none;margin-top:5px}
  .faq .ic::before,.faq .ic::after{content:"";position:absolute;background:var(--amber);
    transition:transform .4s cubic-bezier(.4,0,.2,1)}
  .faq .ic::before{left:0;right:0;top:7px;height:1px}
  .faq .ic::after{top:0;bottom:0;left:7px;width:1px}
  .faq details.open .ic::after{transform:scaleY(0)}
  .faq details.open summary{color:var(--amber-lift)}
  .faq .ans{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1),opacity .3s ease;opacity:0}
  .faq details.open .ans{grid-template-rows:1fr;opacity:1}
  .faq .ans > div{overflow:hidden;min-height:0}
  .faq .ans p{margin:0;padding:2px 0 clamp(20px,2.4vw,28px);color:var(--ink-2);
    font-size:clamp(15px,1.35vw,16.5px);line-height:1.62;max-width:68ch;
    padding-right:clamp(16px,2.4vw,50px)}

  /* nyc */
  .know{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px);margin-top:22px}
  @media(max-width:820px){.know{grid-template-columns:1fr}}
  .know div{border-top:2px solid var(--amber);padding-top:13px}
  .know h4{margin:0 0 5px;font-size:16px;font-weight:500}
  .know p{margin:0;font-size:14.5px;color:var(--ink-2)}

  /* trade band */
  .band-invert{background:var(--invert-bg);color:var(--invert-fg)}
  .band-invert .eyebrow{color:var(--invert-2)}
  .band-invert p{color:var(--invert-2)}
  .ceu{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .band-invert .ceu span{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
    border:1px solid var(--invert-line);padding:6px 11px;color:var(--invert-fg)}
  .band-invert .btn{margin-top:22px;background:var(--amber-lift);border-color:var(--amber-lift);color:#14161A}
  .band-invert .btn:hover{background:transparent;color:var(--invert-fg);border-color:var(--invert-fg)}

  /* closing cta */
  .formband{background:var(--surface);border-block:1px solid var(--line)}
  .close{text-align:center}
  .close .eyebrow{justify-content:center}
  .close h2{max-width:18ch;margin-inline:auto}
  .close p{color:var(--ink-2);max-width:52ch;margin:14px auto 0}
  .close .hero-cta{justify-content:center}

  /* footer */
  footer{border-top:1px solid var(--line);background:var(--surface);font-size:14px;color:var(--ink-2)}
  footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:26px;padding-block:32px}
  @media(max-width:1000px){footer .wrap{grid-template-columns:1fr 1fr}}
  @media(max-width:660px){
    footer .wrap{grid-template-columns:1fr 1fr;gap:26px 20px}
    footer .wrap > div:first-child{grid-column:1 / -1}
    footer .wrap > .news{grid-column:1 / -1}}
  footer .foot-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--ink-3);margin:0 0 9px;font-weight:400}
  footer a{text-decoration:none}
  footer a:hover{color:var(--ink)}
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
  .addr{font-style:normal}
  .social{display:flex;gap:9px;margin-top:16px}
  .social a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);
    color:var(--ink-3);transition:color .18s,border-color .18s}
  .social a:hover{color:var(--amber);border-color:var(--amber)}
  .social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round}
  .social svg .fill{fill:currentColor;stroke:none}
  .social a.todo{opacity:.4}
  .news form{display:flex;gap:8px;max-width:340px;margin-top:10px}
  .news input{flex:1;padding:9px 11px;border:1px solid var(--line);background:var(--ground);
    color:var(--ink);font-family:var(--sans);font-size:14px}
  .news button{padding:9px 16px;border:1px solid var(--ink);background:var(--ink);color:var(--ground);
    font-size:14px;cursor:pointer;font-family:var(--sans)}

  /* modal */
  .modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
  .modal-back{position:absolute;inset:0;background:rgba(8,10,13,.62);backdrop-filter:blur(3px)}
  .modal-box{position:relative;background:var(--ground);border:1px solid var(--line);max-width:450px;
    width:100%;padding:clamp(24px,3.4vw,34px);max-height:92vh;overflow:auto;
    box-shadow:0 24px 60px rgba(0,0,0,.3);animation:pop .22s cubic-bezier(.2,.7,.3,1) both}
  @keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
  .modal-x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--ink-3);
    font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
  .modal-x:hover{color:var(--ink)}
  form.lead{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
  @media(max-width:520px){form.lead{grid-template-columns:1fr}}
  form.lead .full{grid-column:1/-1}
  form.lead label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
  form.lead label .req{color:var(--amber)}
  form.lead input{width:100%;padding:11px 12px;border:1px solid var(--line);background:var(--ground);
    color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:400}
  form.lead button{background:var(--ink);color:var(--ground);border:1px solid var(--ink);
    padding:13px 26px;font-size:15px;font-family:var(--sans);cursor:pointer}
  form.lead button:hover{background:transparent;color:var(--ink)}

  /* project view */
  .crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:14px}
  .crumb a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .p-hero .media{aspect-ratio:16/7}
  .chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0;list-style:none}
  .chips span,.chips li{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
    border:1px solid var(--line);padding:5px 10px;color:var(--ink-2)}
  .pcs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px)}
  @media(max-width:860px){.pcs{grid-template-columns:1fr}}
  .pcs h2,.pcs h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--amber);margin:0 0 8px}
  .pcs p{color:var(--ink-2);font-size:15.5px;margin:0}
  .pgal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.3vw,15px)}
  @media(max-width:640px){.pgal{grid-template-columns:1fr}}
  .pgal .media{aspect-ratio:5/4}
  .case-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,48px);align-items:start}
  @media(max-width:900px){.case-grid{grid-template-columns:1fr}}
  .spec{width:100%;border-collapse:collapse;margin-top:16px;font-family:var(--mono);font-size:12.5px}
  .spec td{border-top:1px solid var(--line);padding:8px 0;vertical-align:top}
  .spec td:first-child{color:var(--ink-3);width:42%;letter-spacing:.05em;text-transform:uppercase;
    font-size:11.5px;padding-top:10px}
  .credits{margin-top:18px;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px}
  .credits b{font-weight:500;color:var(--ink)}

  /* --- mobile density --- */
  @media(max-width:820px){
    :root{--pad:clamp(26px,6vw,38px)}
    .hero-shot{height:clamp(240px,46vw,320px)}
    .lede{margin-top:13px}
    .hero-cta{margin-top:18px}
    .steps{gap:0}
    .steps div{border-top:1px solid var(--line);padding-block:11px}
    .steps .you{display:none}
    .steps p{font-size:14px}
    .tiers{gap:0}
    .tier-card{border-top:1px solid var(--line);padding:14px 0 0}
    .tier-card h3{margin-bottom:6px;font-size:21px}
    .know{gap:0}
    .know div{border-top:1px solid var(--line);padding-top:11px;padding-bottom:11px}
    .know div:first-child{border-top:2px solid var(--amber)}
    .ceu{gap:6px}
    .band-invert .ceu span{font-size:11.5px;padding:5px 9px}
    .faq summary{padding:12px 0;font-size:15.5px}
    .player{gap:8px}
    .door{padding:18px}
    .door h3{font-size:23px}
    .door p{font-size:14.5px}
    .playlist{max-height:238px}
  }
  @media(max-width:520px){
    h1{font-size:clamp(36px,10vw,46px)}
    .btn{padding:11px 20px;font-size:14px}
  }
  @media(max-width:700px){
    .tiers{gap:0}
    .tier-card{padding-block:16px;border-top:1px solid var(--line);border-left:0;border-right:0;border-bottom:0}
    .tier-card h3{margin-bottom:5px}
    .tier-card p{font-size:14.5px;line-height:1.5}
  .scopenote{font-size:14.5px;padding:14px 16px}
    .shroom-list li{padding-block:12px}
    .shroom-list span{font-size:13.8px}
    .shroom-list li:nth-child(n+5){display:none}
    .shroom-copy p{font-size:15px;margin-top:11px}
    .tgrid li{font-size:14.5px;padding-block:5px}
    #showroom section,#cost{padding-block:clamp(30px,6vw,44px)}
  }
  /* Mobile IA: the homepage points, the inner pages explain. Each service now
     has a full page, so the homepage list carries the name and the brands only. */
  @media(max-width:700px){
    .caps li{grid-template-columns:auto 1fr;gap:13px;padding-block:17px}
    .caps li p{font-size:14.3px;line-height:1.52;margin-top:7px;
      display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .caps h2{font-size:clamp(21px,6.4vw,26px)}
    .caps .tag{grid-column:2;font-size:11.5px;margin-top:7px}
    .faq details:nth-of-type(n+5){display:none}
    .process li p{font-size:14.5px;line-height:1.5}
  }
  @media(max-width:560px){
    body{font-size:15.4px}
    .hero-cta .btn{padding-block:13px}
  }


/*
 * Loaded straight after app.css and concatenated with it at build time, so the
 * browser still fetches exactly one stylesheet. Kept as a separate source file
 * so the approved design system in app.css stays readable and untouched.
 *
 * Everything here is either (a) a class replacing an inline style the static
 * prototype carried, at the same values, or (b) a component the prototype did
 * not need because it was one page: mobile navigation, forms, breadcrumbs.
 */

/* ---- accessibility furniture ------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:#14161a;
  padding:10px 16px;text-decoration:none}
.skip:focus{left:8px;top:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---- headings that were inline styles in the prototype ------------------ */
.p-h1{font-size:clamp(32px,4.4vw,54px)}
.p-h1-narrow{max-width:17ch}
.h-work{font-size:clamp(26px,3.2vw,38px);max-width:24ch}
.h-work.w22{max-width:22ch}
.h-cost{font-size:clamp(26px,3.4vw,40px);max-width:22ch}
.h-trade{font-size:clamp(28px,3.6vw,42px);max-width:22ch}
.h-shroom{font-size:clamp(28px,3.7vw,44px);max-width:17ch}
.close-h{font-size:clamp(30px,4.2vw,50px)}
.pj-note-h{font-size:clamp(23px,2.7vw,31px)}
.modal-h{font-size:clamp(24px,2.8vw,31px)}
.modal-sub{color:var(--ink-2);font-size:15px;margin-top:8px}
.cost-lede{color:var(--ink-2);max-width:64ch;margin-top:12px}
.cost-cta{margin-top:20px}
.trade-lede{max-width:58ch;margin-top:14px}
.faq-more{margin-top:22px}
.pb{padding-block:0}
.pcs-band{padding-top:0}
.t-lg{font-size:clamp(17px,1.7vw,21px)}

/* ---- breadcrumbs -------------------------------------------------------
   The prototype drew these by hand on each view. As an ordered list they are
   navigable, and the BreadcrumbList JSON-LD is generated from the same array. */
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0}
.crumb li{display:flex;align-items:center}
.crumb li+li::before{content:"/";margin:0 9px;color:var(--ink-3);opacity:.6}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--amber)}
.crumb [aria-current]{color:var(--ink-2)}

/* ---- media captions ----------------------------------------------------- */
.mcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#D6DAE1;background:linear-gradient(0deg,rgba(6,8,10,.82),rgba(6,8,10,0))}

/* ---- project page side column ------------------------------------------ */
.pj-side .btn{margin-top:8px}

/* ---- the work index ----------------------------------------------------
   Not a card grid. A list of large plates with the systems named underneath,
   which is the same register as the project rail on the homepage. */
.worklist-band{padding-top:0}
.worklist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,42px)}
.worklist li{margin:0}
.worklist a{display:block;text-decoration:none;color:inherit}
.wl-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:var(--surface);border:1px solid var(--line)}
.wl-media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) contrast(1.04);transition:transform .8s cubic-bezier(.3,0,.2,1)}
.worklist a:hover .wl-media img{transform:scale(1.035)}
.wl-text{display:block;padding-top:14px}
.wl-text b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.1vw,28px);line-height:1.12;color:var(--ink)}
.wl-sys{display:block;font-size:14px;color:var(--ink-3);margin-top:6px}
.wl-go{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);margin-top:10px;opacity:0;transition:opacity .3s}
.worklist a:hover .wl-go,.worklist a:focus-visible .wl-go{opacity:1}
@media(max-width:760px){.worklist{grid-template-columns:1fr}}

/* ---- contact details ---------------------------------------------------- */
.contact-card{border-top:1px solid var(--line)}
.contact-line{display:grid;grid-template-columns:minmax(0,10ch) minmax(0,1fr);gap:16px;
  margin:0;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:clamp(15.5px,1.35vw,17.5px);color:var(--ink-2)}
.contact-line .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.contact-line a{color:var(--amber);text-underline-offset:3px}
@media(max-width:560px){.contact-line{grid-template-columns:1fr;gap:3px}}

/* ---- the article footer headings --------------------------------------- */
.art-foot h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;margin:0 0 4px}

/* ---- forms --------------------------------------------------------------
   Labels are always visible. Errors are text next to the field, announced,
   never colour alone. */
.lead-full{margin-top:8px}
.lead select,.lead textarea{width:100%;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);padding:11px 12px;font:inherit;font-size:15.5px;border-radius:0}
.lead select:focus-visible,.lead textarea:focus-visible,.lead input:focus-visible{
  outline:2px solid var(--amber);outline-offset:1px}
.lead textarea{resize:vertical;min-height:88px}
.lead .err{display:block;font-size:12.5px;color:#E2856B;margin-top:5px}
.lead [aria-invalid="true"]{border-color:#E2856B}
.form-msg{margin:12px 0 0;font-size:15px;color:var(--ink-2);min-height:1.2em}
.form-msg.ok{color:var(--amber-lift)}
.form-msg.bad{color:#E2856B}
.lead button[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ---- footer ------------------------------------------------------------- */
footer .wrap ul{list-style:none;margin:0;padding:0}
.addr{margin-top:11px}
.foot-area{margin-top:11px;font-size:13px;color:var(--ink-3)}
.news p{font-size:13.5px;color:var(--ink-3);margin:0}
.nform{display:flex;gap:8px;margin-top:11px}
.nform input{flex:1;min-width:0;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);padding:9px 11px;font:inherit;font-size:14px;border-radius:0}
.nform button{background:none;border:1px solid var(--ink-3);color:var(--ink);
  padding:9px 15px;font:inherit;font-size:13px;cursor:pointer}
.nform button:hover{border-color:var(--amber);color:var(--amber)}
.nform-msg{font-size:13px;margin-top:8px;color:var(--ink-3);min-height:1.1em}
.nform-msg.ok{color:var(--amber-lift)}
.nform-msg.bad{color:#E2856B}
/* The copyright line sat inside footer's four-column grid, so it was laid out
   in a 1.3fr column and wrapped onto two lines. It is one line of text; it gets
   the full width. */
/* `footer .wrap` is the four-column grid, and it matched this element too, so
   the one-line copyright was laid out in a 1.3fr column and wrapped. Needs the
   same specificity to win, not less. */
footer .foot-legal{display:block;border-top:1px solid var(--line);
  margin-top:clamp(24px,3vw,38px);padding-top:16px}
.foot-legal p{font-size:12.5px;color:var(--ink-3);margin:0}
@media(max-width:560px){.foot-legal p{font-size:12px}}

/* ---- primary navigation ------------------------------------------------- */
/* Nine items, a logo and a button. Two of the labels are two words, and when
   the row ran short of space they broke onto a second line and the bar went
   ragged. Links never wrap; instead the whole row gives way to the menu button
   below 1100px, where it stops fitting comfortably. A tidy menu button beats a
   squeezed row. */
.navlist{display:flex;gap:17px;margin:0;padding:0;list-style:none;align-items:center}
.navlist li{margin:0;padding:0}
.navlist a{display:block;white-space:nowrap;text-decoration:none;color:var(--ink-2);font-size:13.5px}
.navlist a:hover,.navlist [aria-current]{color:var(--ink)}
.navlist [aria-current]{border-bottom:1px solid var(--amber);padding-bottom:2px}
@media(min-width:1101px) and (max-width:1300px){.navlist{gap:14px}}
@media(max-width:1100px){.navlist{display:none}}

/* ---- mobile navigation -------------------------------------------------
   The prototype was one page and needed none. A site with twenty-odd pages
   does. Quiet by default: a control and a list, not an animated overlay. */
.menubtn{display:none;background:none;border:0;cursor:pointer;padding:10px 0 10px 16px;
  margin-inline-start:14px;color:var(--ink)}
.menubtn-l,.menubtn-l::before,.menubtn-l::after{display:block;width:20px;height:1px;
  background:currentColor;transition:transform .3s cubic-bezier(.3,0,.2,1),opacity .2s}
.menubtn-l{position:relative}
.menubtn-l::before,.menubtn-l::after{content:"";position:absolute;left:0}
.menubtn-l::before{top:-6px}
.menubtn-l::after{top:6px}
.menubtn[aria-expanded="true"] .menubtn-l{background:transparent}
.menubtn[aria-expanded="true"] .menubtn-l::before{transform:translateY(6px) rotate(45deg)}
.menubtn[aria-expanded="true"] .menubtn-l::after{transform:translateY(-6px) rotate(-45deg)}
.mobilenav{display:none;border-top:1px solid var(--line);background:var(--ground)}
.mobilenav ul{list-style:none;margin:0;padding:0 var(--gut)}
.mobilenav li{border-bottom:1px solid var(--line)}
.mobilenav li:last-child{border-bottom:0}
.mobilenav a{display:block;padding:15px 0;text-decoration:none;color:var(--ink);font-size:17px}
.mobilenav [aria-current]{color:var(--amber)}
.mobilenav-call{display:block;padding:15px var(--gut);font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;color:var(--amber);text-decoration:none;border-top:1px solid var(--line)}
/* On a narrow phone the bar carries a logo, a call to action and a menu
   control. At 360px those do not fit at full length, so the button says the
   short version rather than being dropped — the visit is the point of the bar. */
.book-short{display:none}
@media(max-width:560px){
  .book-long{display:none}
  .book-short{display:inline}
}
@media(max-width:440px){
  .menubtn{padding-left:10px;margin-inline-start:6px}
}
@media(max-width:1100px){
  .menubtn{display:block}
  .mobilenav{display:block}
  .bar .wrap{gap:0}
  .bar .book{margin-inline-start:auto;font-size:12.5px;padding:7px 12px}
}

/* The FAQ block inside a page sits flush to the block rule above it. */
.faq-flush{margin-top:0;border-top:1px solid var(--line)}

/* ---- video ------------------------------------------------------------
   A YouTube video shows as our own poster and a play control until someone
   presses it. Nothing loads from another domain before that click, and the
   box is a fixed aspect ratio so swapping in the player moves nothing. */
.ytlite{position:relative;width:100%;aspect-ratio:var(--ratio,16/9);overflow:hidden;
  background:var(--surface);cursor:pointer}
.ytlite .ytlite-poster,.ytlite picture{position:absolute;inset:0;width:100%;height:100%}
.ytlite img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) contrast(1.04)}
.ytlite iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ytlite-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  width:100%;height:100%;background:rgba(6,8,10,.28);border:0;cursor:pointer;
  transition:background .3s cubic-bezier(.3,0,.2,1)}
.ytlite-play:hover{background:rgba(6,8,10,.14)}
.ytlite-play:focus-visible{outline:2px solid var(--amber);outline-offset:-4px}
.ytlite-tri{display:block;width:clamp(52px,6vw,68px);height:clamp(52px,6vw,68px);
  border:1px solid rgba(233,234,238,.72);position:relative;
  transition:border-color .3s,transform .3s cubic-bezier(.3,0,.2,1)}
.ytlite-play:hover .ytlite-tri{border-color:var(--amber);transform:scale(1.04)}
.ytlite-tri::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-44%,-50%);border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--ink)}
.ytlite-play:hover .ytlite-tri::after{border-left-color:var(--amber)}
.ytlite.on .ytlite-play,.ytlite.on .ytlite-poster{display:none}
@media(prefers-reduced-motion:reduce){
  .ytlite-play,.ytlite-tri{transition:none}
  .ytlite-play:hover .ytlite-tri{transform:none}
}

/* ---- the enquiry modal must never scroll --------------------------------
   A dialog with its own scrollbar reads as a page inside a page: the Send
   button hides below the fold and people do not find it. So the box is a
   column and everything in it is sized against the viewport height — the
   message field, the type, the spacing and finally the sub-heading give up
   room in that order, rather than the dialog growing a scrollbar. Tested
   down to 360x480 and to landscape on a phone, which is the worst case:
   a short viewport that is also narrow.

   `overflow` stays on the box as a last resort. It should never be reached. */
.modal-box{display:flex;flex-direction:column;max-height:100%}
.modal-box>form.lead{min-height:0}
.modal-box .modal-h{font-size:clamp(22px,2.5vw,28px)}
.modal-box .modal-sub{margin-top:6px}
.modal-box form.lead{margin-top:14px;gap:12px}
.modal-box textarea{min-height:0;height:clamp(48px,9vh,92px);resize:none}
.modal-box .form-msg{margin-top:8px;min-height:0}

@media(max-height:660px){
  .modal{padding:12px}
  .modal-box{padding:20px}
  .modal-box .eyebrow{display:none}
  .modal-box .modal-h{font-size:21px}
  .modal-box form.lead{margin-top:12px;gap:10px}
  /* Phone and email stay side by side however narrow it gets: on a short
     screen a second row costs more than a narrow field does. */
  .modal-box form.lead{grid-template-columns:1fr 1fr}
  .modal-box form.lead button{padding:11px 22px}
}
@media(max-height:560px){
  .modal-box{padding:16px 18px}
  .modal-box .modal-sub{display:none}
  .modal-box .modal-h{font-size:19px}
  .modal-box form.lead{margin-top:10px;gap:8px}
  .modal-box label{margin-bottom:3px}
  .modal-box input{padding:8px 10px;font-size:14px}
  .modal-box textarea{height:44px;padding:8px 10px;font-size:14px}
}

/* The form's confirmation is one sentence and belongs on one line. It sits
   inside page copy, whose paragraphs are capped at a reading measure, and that
   cap was breaking it after "business". */
.pb-in .form-msg,.form-msg{max-width:none}
/* ---- one type scale ------------------------------------------------
   Reading text had drifted to eleven sizes between 13.5px and 21px, so a
   15px paragraph sat next to a 17.5px one and read as a different face.
   Three sizes now, used everywhere, on every breakpoint:
     --t-body   running text in every block, grid, list and answer
     --t-lead   the one intro paragraph under a page title
     --t-small  secondary lines under an item (a dek, a caption, a note)
   Instrument Serif is kept for headlines only (24px and up); the small
   headings that sat directly above body text are set in Plex Sans 500,
   so a heading and its paragraph read as one family. */
:root{--t-body:15px;--t-lead:clamp(17.5px,1.45vw,19.5px);--t-small:14px;--t-art:clamp(16.5px,1.3vw,18px)}
html body{font-size:16px}
html body :is(.pb-in p,.pgrid p,.plist li,.nyc-body p,.scopenote,.caps p,.caps li p,.tier-card p,.faq .ans p,.know p,.shroom-copy p,.door p,.pcs p,.contact-line,.tgrid li,.tgrid .tnote p,.steps p,.process li p,.close p,.cost-lede,.trade-lede,.shroom-list span,.pj-side p,.modal-sub){font-size:var(--t-body);line-height:1.58}
html body :is(.art-body p,.art-body ul li,.art-body ol li){font-size:var(--t-art);line-height:1.7}
html body :is(.pg-lead,.lede){font-size:var(--t-lead);line-height:1.55}
html body :is(.pposts .pdek,.pane-in em,.steps .you,.tier-card ul,.art-src li,.news p,.shroom-note){font-size:var(--t-small)!important;line-height:1.55}
html body :is(.pposts .t,.t-lg){font-size:clamp(22px,2vw,26px);line-height:1.15}
html body .faq summary{font-size:clamp(16.5px,1.35vw,18px)}
html body .pb-in .pquote p{font-size:inherit;line-height:inherit}
html body .art-dek{font-size:var(--t-lead);line-height:1.55}
html body .art-note{font-size:var(--t-body)}
html body :is(.art-rel a,.art-rel){font-size:var(--t-small)}
html body .pj-note-h{font-size:clamp(24px,2.7vw,31px)}

/* project gallery: editorial stagger instead of an equal 2x2 grid */
@media(min-width:861px){
html body .pgal{grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,28px);row-gap:0;align-items:start}
html body .pgal>.media{aspect-ratio:auto}
html body .pgal>.media img{width:100%;height:100%;object-fit:cover}
html body .pgal>.media:nth-child(1){grid-column:1/9;aspect-ratio:3/2}
html body .pgal>.media:nth-child(2){grid-column:9/13;aspect-ratio:4/5;align-self:end;transform:translateY(clamp(32px,4.5vw,72px))}
html body .pgal>.media:nth-child(3){grid-column:2/7;aspect-ratio:4/5;margin-top:clamp(28px,3.5vw,56px)}
html body .pgal>.media:nth-child(4){grid-column:8/13;aspect-ratio:5/4;align-self:start;margin-top:clamp(96px,11vw,176px)}
}
@media(min-width:641px) and (max-width:860px){
html body .pgal{grid-template-columns:repeat(6,1fr);gap:14px}
html body .pgal>.media:nth-child(1){grid-column:1/7;aspect-ratio:3/2}
html body .pgal>.media:nth-child(2){grid-column:1/4;aspect-ratio:4/5}
html body .pgal>.media:nth-child(3){grid-column:4/7;aspect-ratio:4/5;margin-top:48px}
html body .pgal>.media:nth-child(4){grid-column:2/6;aspect-ratio:5/4}
}
@media(max-width:640px){
html body .pgal>.media:nth-child(2),html body .pgal>.media:nth-child(3){width:78%}
html body .pgal>.media:nth-child(3){margin-left:auto}
html body .pgal>.media:nth-child(1),html body .pgal>.media:nth-child(4){aspect-ratio:4/3}
html body .pgal>.media:nth-child(2),html body .pgal>.media:nth-child(3){aspect-ratio:4/5}
}

/* brand blue (from theautom8group.com navy #0A336B, softened for a dark site). Used sparingly: buttons, links, open/active states. Gold stays for light and small marks. */
:root{--blue:#2F67AE;--blue-deep:#244F88;--blue-lift:#86B2E4}
html body .btn:not(.btn-ghost){background:var(--blue);border-color:var(--blue);color:#fff}
html body .btn:not(.btn-ghost):hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
html body .band-invert .btn{background:var(--blue);border-color:var(--blue);color:#fff}
html body .band-invert .btn:hover{background:transparent;color:var(--invert-fg);border-color:var(--invert-fg)}
html body :focus-visible{outline-color:var(--blue-lift)}
html body :is(.crumb a,.contact-line a,.pposts .go,.door .go,.wl-go,.nyc-more a){color:var(--blue-lift)}
html body .crumb a:hover{color:#fff}
html body :is(.faq summary:hover,.faq details.open summary,.caps h2 a:hover){color:var(--blue-lift)}
html body .navlist [aria-current]{border-bottom-color:var(--blue-lift)}
html body .mobilenav [aria-current]{color:var(--blue-lift)}

/* ---- One accent: brand blue for actions only. Gold/amber retired. ----
   Load AFTER brand-blue.css. Blue = buttons, links, active/open/focus states.
   Everything decorative is neutral; emphasis in headlines comes from the italic, not colour. */

/* 1. Retarget every remaining amber use (links, hovers, focus rings, FAQ icon,
      form states, playlist/active borders) to the blue text tone. */
html:root{--amber:#86B2E4;--amber-lift:#86B2E4;--mark:#6B727D;--rule:#4A515C}

/* 2. Serif italics + logo: white italic, no colour */
html body :is(.logo i,h1 i,.statement em,.art-h1 em){color:var(--ink)}

/* 3. Google stars: white */
html body .stars svg{fill:var(--ink)}

/* 4. Decorative marks: neutral grey (non-text, decorative) */
html body .eyebrow::before,html body .tgrid li::before,html body .shroom-list li::before,
html body .art-body ul li::before,html body .nyc-rule,html body .railbar i,
html body .steps > div:first-child::before{background:var(--mark)}
html body .steps > div::before{border-color:var(--mark)}
html body :is(.hero-tag .dot,.tier .dot){background:#C3C8D0;box-shadow:0 0 0 5px rgba(195,200,208,.16)}
html body :is(.art-note,.scopenote){border-left-color:var(--rule)}
html body :is(.know div,.know div:first-child){border-top-color:var(--rule)}

/* 5. Small text-like marks: ink-2 (#A8AEB8, >= 6.9:1 on every surface) */
html body .plist li::before,html body .tier-card li::before,html body .pbio .av,
html body .bleed figcaption span,html body .pane-in i,html body .pcs h2,html body .pcs h4,
html body form.lead label .req{color:var(--ink-2)}

/* 6. Image placeholders are stand-ins for warm lamp-lit photography: keep them warm */
html body .fb{--amber:#D99B4E}

/* The company logo (from Alon's brand files): grey wordmark, blue 8. */
.logo img{display:block;height:clamp(13px,3.4vw,18px);width:auto}
footer .logo img{height:20px}

/* Pause / play for the homepage hero video (WCAG 2.2.2). Shown by app.js only
   when the video is attached; sits opposite the caption in the corner. */
.vidctl{position:absolute;right:clamp(16px,2vw,24px);bottom:clamp(16px,2vw,24px);z-index:2;display:inline-flex;align-items:center;gap:9px;
  min-height:40px;padding:0 16px 0 13px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(14,16,19,.64);color:#fff;
  font:inherit;font-size:13px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vidctl[hidden]{display:none}
.vidctl:hover{background:rgba(14,16,19,.86)}
.vidctl-ic{flex:none;box-sizing:border-box;width:11px;height:13px;border-left:3.5px solid currentColor;border-right:3.5px solid currentColor}
.vidctl.paused .vidctl-ic{width:0;height:0;border-right:0;border-left:11px solid currentColor;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}

/* ---- polish pass (critique) -------------------------------------------- */

/* Meaningful mono labels carry --ink-2; --ink-3 stays for decoration and
   secondary asides. (.band-invert .eyebrow keeps its own colour: higher
   specificity.) */
html body :is(.eyebrow,.crumb,.statline span,.tier small,footer .foot-h,.caps .tag,.steps .num,
  form.lead label,.contact-line .lbl,.art-foot h2,.spec td:first-child,.pposts .n){color:var(--ink-2)}

/* Mobile menu: the phone number as a full-width button, not a bare mono line. */
.mobilenav a.mobilenav-call{display:flex;align-items:center;justify-content:center;
  min-height:44px;margin:14px var(--gut) 18px;padding:0 var(--gut);border:1px solid var(--blue);
  background:var(--blue);color:#fff;font-family:var(--sans);font-size:17px;letter-spacing:.02em}
.mobilenav a.mobilenav-call:hover{background:var(--blue-deep);border-color:var(--blue-deep)}

/* Header tap-to-call: phones and narrow tablets only (where the nav is a menu). */
.callbtn{display:none}
.callbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* Enquiry modal: Send is a .btn; the phone is the quiet alternative. */
html body form.lead button[type=submit]{background:var(--blue);border-color:var(--blue);color:#fff}
html body form.lead button[type=submit]:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.modal-alt{margin:12px 0 0;font-size:14px;color:var(--ink-2)}
.modal-alt a{color:var(--blue-lift);display:inline-block;padding:8px 0}
@media(max-height:560px){.modal-alt{display:none}}

/* Hero video control: 44px. */
.vidctl{min-height:44px}

@media(max-width:1100px){
  .callbtn{display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;margin-inline-start:2px;color:var(--ink);text-decoration:none}
}

/* ---- tap targets, 44px, phones and small tablets ------------------------ */
@media(max-width:768px){
  .logo{display:inline-flex;align-items:center;min-height:44px}
  footer .logo img{height:20px}
  /* 20px tall when the bar has room; shrinks so logo, Book, call and Menu
     always fit on one line down to 360px. */
  .bar .logo img{height:clamp(11px,calc((100vw - 222px) / 12.8),20px)}
  .bar .book{padding-inline:10px}
  .bar .book{min-height:44px;display:inline-flex;align-items:center}
  .menubtn{min-width:44px;min-height:44px;padding:0 12px;margin-inline-start:0;
    display:inline-flex;align-items:center;justify-content:center}
  .crumb a{display:inline-block;padding-block:10px;margin-block:-10px}
  footer ul{gap:0}
  footer li a{display:block;padding:12px 0}
  .addr a{display:inline-block;padding:10px 0}
  .social a{width:44px;height:44px}
  .social{gap:6px}
}

/* ---- home, phones ------------------------------------------------------- */
@media(max-width:560px){
  /* One tidy row that scrolls, rather than two rows with CEDIA left on its own. */
  .brands{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    min-width:0;max-width:100%;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .brands::-webkit-scrollbar{display:none}
  .brandbox{flex:none}
  .brandbox:nth-child(4){border-left:1px solid var(--line)}
}
@media(max-width:680px){
  /* Equal columns, however many figures the content carries (2, 3 or 4). */
  .statline{display:grid;grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);gap:0;padding-block:22px}
  .statline > div:nth-child(n+2){padding-left:12px}
  .statline > div:first-child{padding-left:0}
  .statline > div + div{border-left:1px solid var(--line)}
  .statline b{font-size:clamp(22px,7vw,28px)}
  .statline span{white-space:normal;margin-top:8px}
}

/* Floating booking button: every page, bottom corner, above everything but the form */
.book-fab{position:fixed;z-index:60;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));
  border-radius:999px;padding:14px 24px;font-weight:600;box-shadow:0 10px 28px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25)}
html body .book-fab:not(.btn-ghost):hover{transform:translateY(-1px)}
footer{padding-bottom:76px}
@media(max-width:700px){.book-fab{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));text-align:center;padding:15px 20px}}
@media print{.book-fab{display:none}}