:root{
    --ink:      #0C0C0B;   /* asphalt black */
    --bone:     #EBE8E1;   /* warm paper */
    --panel:    #DBD7CE;   /* taupe panel */
    --graphite: #5C5850;   /* muted text on light — AA (~5:1 on bone/panel) */
    --graphite-inv: #ADA99F; /* muted text on dark — AA (~8:1 on ink) */
    --white:    #FFFFFF;
    --footer-muted: #8B877E; /* muted labels on dark footer — AA (~4.9:1 on ink) */
    --hairline: rgba(12,12,11,.16);
    --hairline-light: rgba(235,232,225,.22);

    --font-display: "Archivo", system-ui, sans-serif;
    --font-body: "Inter Tight", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --pad: clamp(1.25rem, 4vw, 4.5rem);
    --maxw: 1600px;

    /* unified vertical rhythm — one scale, applied everywhere */
    --section-y: clamp(4.5rem, 10vh, 9rem);
    --head-gap:  clamp(2.75rem, 6.5vh, 5rem);
    --block-gap: clamp(2rem, 5vh, 3.2rem);
  }

  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

  html{ -webkit-text-size-adjust:100%; }
  html.no-scroll{ overflow:hidden; }

  body{
    background: var(--bone);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight:400;
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  img{ display:block; max-width:100%; height:auto; }
  a{ color:inherit; text-decoration:none; }

  ::selection{ background: var(--ink); color: var(--bone); }

  /* ---------- shared type ---------- */
  .eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--graphite);
  }
  /* section label that is also the section's heading — keep the label look, drop h2 defaults */
  .eyebrow-h{ font-size:.72rem; font-weight:500; line-height:1.2; }
  /* eyebrows/labels sitting on the dark sections need the lighter muted tone for AA contrast */
  .hero .eyebrow, .approach .eyebrow, .whyme .eyebrow, #loader .loader-tag{ color:var(--graphite-inv); }

  /* ---------- loader ---------- */
  #loader{
    position:fixed; inset:0; z-index:1000;
    background:var(--ink);
    display:flex; align-items:center; justify-content:center;
    will-change:transform;
  }
  /* The turning mark is the load. It fades up out of the black, holds while it
     turns, then the whole panel fades off to leave the same mark standing still
     on the page beneath — the motion resolves into the stillness you land on. */
  .loader-3d{ opacity:0; }
  #loader .logo3d{
    width:clamp(190px, 36vw, 400px);
    perspective:1000px;
  }
  /* faster than the footer mark: a full turn has to read inside the load */
  #loader .logo3d-spin{ animation-duration:3.4s; }
  #loader .loader-tag{
    position:absolute;
    bottom:clamp(1.5rem,5vh,3rem);
    left:0; right:0;
    text-align:center;
    color:var(--graphite-inv);
    opacity:0;
  }
  .loader-run .loader-3d{
    animation: fadeIn .85s ease .1s forwards;
  }
  /* lands well after the mark, so the two arrivals read as separate beats */
  .loader-run #loader .loader-tag{
    animation: fadeIn .6s ease 1.15s forwards;
  }
  .loader-run #loader{
    animation: loaderOut .8s ease 2.3s forwards;
  }
  @keyframes loaderOut{
    to{ opacity:0; visibility:hidden; }
  }
  @keyframes fadeIn{ to{ opacity:1; } }

  /* ---------- hero ---------- */
  /* No fixed nav on this site, so the hero starts hard at the top of the viewport
     and the logo-mark band is the first thing in the frame. */
  /* Padding is deliberately equal top and bottom, and .hero-foot is taken out of
     flow below — together that puts the centre of .hero-body on the centre of the
     viewport, so the mark lands dead centre rather than centred-minus-the-cue. */
  .hero{
    position:relative; background:var(--ink); color:var(--bone);
    min-height:100svh; display:flex; flex-direction:column;
    padding: clamp(1.5rem,4vh,2.5rem) var(--pad);
    overflow:hidden;
  }
  /* ---------- 3D wordmark ----------
     Slices are stacked on the Z axis by buildLogo3D() in app.js. The outer
     .logo3d holds the perspective; .logo3d-spin carries the rotation so the
     stack keeps its own 3D context. */
  /* width and perspective are set by whichever block hosts the mark */
  .logo3d{ width:100%; }
  .logo3d-spin{
    position:relative; margin-inline:auto;
    width:100%;
    aspect-ratio: 557.4 / 185.44;
    transform-style:preserve-3d;
    animation: logoSpin 9s linear infinite;
  }
  .logo3d-extrude{ position:absolute; inset:0; transform-style:preserve-3d; }
  .logo3d-slice{ position:absolute; inset:0; }
  .logo3d-slice svg{ width:100%; height:100%; display:block; }
  @keyframes logoSpin{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }
  @media (prefers-reduced-motion: reduce){
    .logo3d-spin{ animation:none; transform:rotateY(24deg); }
  }
  /* short viewports: shrink the mark so the wordmark still clears the cue */
  @media (max-height: 760px){
    .hero-mark{ width:min(56vw, 320px); }
  }
  /* out of flow so it doesn't shift the mark off the viewport's centre line */
  .hero-foot{
    position:absolute; left:var(--pad); right:var(--pad);
    bottom:clamp(1.5rem,4vh,2.5rem);
  }
  /* The rule lives on this row, so the mask directly above it is clipped exactly
     at the line — the wordmark appears to come up out of the rule itself. */
  .hero-cue-row{
    display:flex; justify-content:center; align-items:flex-end; gap:1rem;
    border-top:1px solid var(--hairline-light); padding-top:1.1rem;
  }
  .wordmark-mask{ overflow:hidden; }
  .scroll-cue{ display:flex; align-items:center; gap:.6rem; }
  .scroll-cue .arrow{
    width:1px; height:34px; background:var(--bone); position:relative; overflow:hidden;
  }
  .scroll-cue .arrow::after{
    content:""; position:absolute; inset:0; background:var(--ink);
    animation: cue 1.8s ease-in-out infinite;
  }
  @keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }

  /* reveal-on-enter */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,.84,.44,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
  .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

  /* ---------- section frame ---------- */
  section{ padding: var(--section-y) var(--pad); }
  /* small breathing gap above an anchored heading when jumping to it */
  section[id], main[id]{ scroll-margin-top: clamp(1.5rem, 3vh, 2.5rem); }
  .wrap{ max-width:var(--maxw); margin:0 auto; }

  .sec-head{
    display:grid; grid-template-columns: 1.5fr 1fr; gap:2rem;
    align-items:end; margin-bottom: var(--head-gap);
  }
  .sec-head h2{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    font-size:clamp(2.4rem,7vw,6rem); line-height:.9; letter-spacing:-.035em;
  }
  .sec-head .aside{ max-width:32ch; color:var(--graphite); font-size:1rem; }
  .sec-head .aside .eyebrow{ display:block; margin-bottom:.7rem; }

  /* stacked hairline motif (odin's crow) */
  .rules{ margin:0; }
  .rules span{ display:block; height:1px; background:var(--ink); opacity:.35; margin-top:3px; }
  .rules span:first-child{ margin-top:0; }

  /* ---------- services ---------- */
  .services{ background:var(--bone); }
  .svc{
    display:grid; grid-template-columns: 4.2rem 1fr; gap:clamp(1rem,4vw,3rem);
    padding: clamp(1.6rem,4vh,2.6rem) 0;
    border-top:1px solid var(--hairline);
    align-items:start;
  }
  .svc:last-child{ border-bottom:1px solid var(--hairline); }
  .svc .num{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(2.2rem,5vw,3.4rem); line-height:.85; letter-spacing:-.04em;
  }
  .svc-body{ display:grid; grid-template-columns: 1fr 1.3fr; gap:clamp(1rem,4vw,3rem); align-items:baseline; }
  /* single-line rows (what we do): let the sentence run wide, no empty title column */
  .svc-body:has(> .desc:only-child){ grid-template-columns:1fr; }
  .svc-body > .desc:only-child{ max-width:52ch; font-size:clamp(1.1rem,2vw,1.4rem); color:var(--ink); }
  /* group lead-in between numbered rows — spoken aside, not a tag */
  .svc-group{ margin-top: clamp(2.4rem,6vh,4rem); margin-bottom:1rem; }
  .svc-group:first-of-type{ margin-top:0; }
  .svc-group .lead-in{
    font-family:var(--font-display); font-weight:700; font-style:italic;
    font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:-.01em; line-height:1.2;
  }
  .svc-body .desc{ color:var(--graphite); font-size:1.02rem; max-width:46ch; }

  /* ---------- process (dark) ---------- */
  .approach{ background:var(--ink); color:var(--bone); }
  .approach .sec-head h2{ color:var(--bone); }
  .approach .sec-head .aside{ color:var(--graphite-inv); }
  .approach .rules span{ background:var(--bone); }
  .approach .svc{ border-top-color:var(--hairline-light); }
  .approach .svc:last-child{ border-bottom-color:var(--hairline-light); }
  .approach .svc-body .desc{ color:var(--graphite-inv); }
  /* single-line steps on dark: sentence is the content — keep it bright */
  .approach .svc-body > .desc:only-child{ color:var(--bone); }

  /* ---------- contact ---------- */
  .contact{ background:var(--bone); }
  .contact-inner{
    display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start;
  }
  .contact h2{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    font-size:clamp(2rem,6vw,5.5rem); line-height:.88; letter-spacing:-.04em; text-wrap:balance;
  }
  .contact .lead{ color:var(--graphite); font-size:1.1rem; max-width:36ch; margin:1.4rem 0 2.2rem; }
  .contact-meta{ display:grid; gap:1.3rem; }
  .contact-meta .item .eyebrow{ display:block; margin-bottom:.35rem; }
  .contact-meta .item a,.contact-meta .item span{ font-size:1.05rem; }
  .contact-meta .item a{ position:relative; }
  .contact-meta .item a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--ink); transition:width .35s ease; }
  .contact-meta .item a:hover::after,.contact-meta .item a:focus-visible::after{ width:100%; }

  /* ---------- enquiry form ---------- */
  .enquire{ display:grid; gap:clamp(1.1rem,2.4vw,1.5rem); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.1rem,2.4vw,1.5rem); }
  .field{ display:grid; gap:.45rem; }
  .field label{
    font-family:var(--font-mono); font-size:.68rem; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; color:var(--graphite);
  }
  .field label .req{ color:var(--ink); }
  .enquire input,.enquire select,.enquire textarea{
    font-family:var(--font-body); font-size:1.02rem; color:var(--ink);
    background:transparent; border:0; border-bottom:1px solid rgba(12,12,11,.32);
    padding:.55rem 0; width:100%; border-radius:0;
    transition:border-color .25s ease;
  }
  .enquire select{
    appearance:none; -webkit-appearance:none; padding-right:1.6rem; cursor:pointer;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C5850' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .2rem center/.72rem;
  }
  .enquire textarea{ resize:vertical; min-height:5.5rem; line-height:1.5; }
  .enquire input::placeholder,.enquire textarea::placeholder{ color:rgba(12,12,11,.6); }
  .enquire input:focus,.enquire select:focus,.enquire textarea:focus{ outline:none; border-bottom-color:var(--ink); }
  .enquire input:focus-visible,.enquire select:focus-visible,.enquire textarea:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
  .enquire input:user-invalid,.enquire select:user-invalid,.enquire textarea:user-invalid{ border-bottom:2px solid var(--ink); }
  .enquire .submit{
    justify-self:center; margin-top:.3rem;
    display:inline-flex; align-items:center; gap:.7rem;
    background:var(--ink); color:var(--bone);
    font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
    font-size:1rem; padding:.9rem 1.5rem; border:0; border-radius:2px; cursor:pointer;
  }
  .enquire .submit .ar{ transition:transform .4s cubic-bezier(.16,.84,.44,1); }
  .enquire .submit:hover .ar,.enquire .submit:focus-visible .ar{ transform:translate(.3rem,-.3rem); }
  .form-status{ font-size:.95rem; color:var(--graphite); min-height:1.2em; }
  .form-status.ok{ color:var(--ink); }

  /* ---------- footer ---------- */
  /* no overflow:hidden — perspective scales the mark's near edge past its own box
     as it turns, and clipping would shave the corners off mid-rotation */
  footer{ background:var(--ink); color:var(--bone); padding: clamp(3rem,7vh,5rem) var(--pad) 0; }

  /* ---------- footer layout ----------
     Text held to the left, turning mark parked bottom-right. Both sit on the same
     baseline so the block reads as one row rather than two stacked things. */
  .foot-inner{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:clamp(2rem,6vw,5rem); flex-wrap:wrap;
    padding-bottom:clamp(2rem,5vh,3rem);
  }
  .foot-text{
    display:grid; gap:clamp(1.2rem,3.5vh,2rem);
    text-align:left; justify-items:start;
  }
  .foot-mark{ flex:none; }
  .foot-mark .logo3d{
    width:clamp(120px, 17vw, 200px);
    perspective:560px;   /* tuned to this size — 1400px here reads almost flat */
  }
  /* lateral footer nav — one horizontal run, not stacked columns */
  .foot-nav{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
    gap:.9rem clamp(1.6rem,4vw,3.2rem);
  }
  .foot-nav a{
    position:relative; color:var(--bone);
    font-family:var(--font-mono); font-size:.78rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase;
    padding:.35rem 0;
  }
  .foot-nav a::after{ content:""; position:absolute; left:0; bottom:.1rem; height:1px; width:0; background:var(--bone); transition:width .35s cubic-bezier(.16,.84,.44,1); }
  .foot-nav a:hover::after,.foot-nav a:focus-visible::after{ width:100%; }
  .foot-nav a[aria-current="page"]::after{ width:100%; }
  /* Fine print — quiet, but still legible. No opacity here: footer-muted alone is
     5.47:1 on asphalt, and layering 0.62 on top dropped it to 2.76:1, under the
     4.5:1 floor. This is the company registration; it has to stay readable. */
  .foot-fine{
    text-align:left;
    font-family:var(--font-mono); font-size:.7rem; font-weight:400;
    font-style:italic;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--footer-muted); line-height:1.7;
  }
  .foot-fine .sl{ margin:0 .5em; opacity:.55; }
  /* ---------- hero body ----------
     One object in the middle of an empty screen. The mark is the whole statement;
     the wordmark is a caption underneath it, not a second headline competing with
     a logo that already says the same words. */
  .hero-body{ flex:1; display:grid; place-items:center; text-align:center; }
  .hero-mark{ width:min(78vw, 460px); }
  /* source PNG is black artwork — invert it to sit on the asphalt hero */
  .hero-logo{ display:block; width:100%; height:auto; filter:brightness(0) invert(1); }
  .hero-wordmark{
    /* real IBM Plex Mono italic — the ital axis is in the font request, so this
       is a drawn italic rather than a browser-slanted fake */
    font-family:var(--font-mono); font-weight:400; font-style:italic; font-size:.7rem;
    letter-spacing:clamp(.24em,1.1vw,.42em); text-transform:uppercase;
    /* nudge right by one tracking step: trailing letter-space offsets the centring */
    text-indent:clamp(.24em,1.1vw,.42em);
    color:var(--graphite-inv); white-space:nowrap;
    text-align:center; padding-bottom:1.1rem;
    /* sits below the mask's edge until the first scroll */
    transform:translateY(120%);
    transition:transform .85s cubic-bezier(.16,.84,.44,1);
  }
  .wordmark-out .hero-wordmark{ transform:none; }
  @media (prefers-reduced-motion: reduce){
    .hero-wordmark{ transform:none; transition:none; }
  }
  .hero-cta{
    align-self:flex-start; display:inline-flex; align-items:center; gap:.7rem; margin-top:.3rem;
    background:var(--bone); color:var(--ink);
    font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
    font-size:1rem; padding:.95rem 1.6rem; border-radius:2px;
  }
  .hero-cta .ar{ transition:transform .4s cubic-bezier(.16,.84,.44,1); }
  .hero-cta:hover .ar,.hero-cta:focus-visible .ar{ transform:translateX(.35rem); }

  /* ---------- services / offerings grid ---------- */
  .offerings{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:clamp(2rem,5vw,5rem); row-gap:0;
    margin-top:var(--block-gap);
  }
  .offering{
    padding:clamp(1.8rem,3.4vw,2.8rem) 0; display:grid; gap:.8rem; align-content:start;
    border-top:1px solid var(--hairline);
  }
  .offering h3{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1; letter-spacing:-.02em; }
  .offering p{ color:var(--graphite); font-size:1rem; line-height:1.55; }

  /* ---------- page head (secondary pages: specialists, shop) ----------
     Not a second hero — no marquee, no full viewport. A dark masthead that
     names the page, then hands straight over to the content. */
  .page-head{
    background:var(--ink); color:var(--bone);
    padding: clamp(8rem,17vh,11rem) var(--pad) clamp(2.5rem,6vh,4rem);
  }
  .page-head .wrap{
    display:grid; gap:clamp(1.1rem,2.6vh,1.8rem);
    justify-items:center; text-align:center;
  }
  /* justify-items:center sizes each child to max-content, which lets a long word
     overrun the column and drag the centre axis off. Cap every child at the
     column width so the centred stack stays true. */
  .page-head .wrap > *{ max-width:100%; }
  .page-head .crumb{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem;
    color:var(--graphite-inv);
  }
  .page-head .crumb a{ position:relative; }
  .page-head .crumb a::after{
    content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0;
    background:var(--bone); transition:width .35s cubic-bezier(.16,.84,.44,1);
  }
  .page-head .crumb a:hover,.page-head .crumb a:focus-visible{ color:var(--bone); }
  .page-head .crumb a:hover::after,.page-head .crumb a:focus-visible::after{ width:100%; }
  .page-title{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    /* 2.2rem floor: at 2.8rem the word PERFORMANCE is wider than a 375px column */
    font-size:clamp(2.2rem,9vw,6rem); line-height:.88; letter-spacing:-.04em;
    text-wrap:balance; margin-inline:auto;
  }
  .page-lead{
    color:var(--graphite-inv); font-size:clamp(1rem,1.5vw,1.2rem);
    line-height:1.65; max-width:52ch; margin-inline:auto;
  }
  .page-meta{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:.7rem clamp(1.4rem,4vw,3rem);
    border-top:1px solid var(--hairline-light);
    padding-top:1.1rem; margin-top:clamp(.4rem,1.6vh,1rem);
    font-family:var(--font-mono); font-size:.72rem; font-weight:500;
    letter-spacing:.18em; text-transform:uppercase; color:var(--graphite-inv);
    width:100%;   /* grid justify-items:center would otherwise shrink the rule */
  }
  .page-head a:focus-visible{ outline-color:var(--bone); }

  /* italic wordmark variant of the page title */
  .page-title-italic{ font-style:italic; }
  /* this page is masthead-only, so the head carries the full viewport itself */
  .page-head-solo{ min-height:100svh; display:flex; align-items:center; }
  .page-head-solo .wrap{ width:100%; }   /* flex child would otherwise shrink-wrap */
  .page-cta{ margin-top:clamp(.6rem,2vh,1.4rem); }

  /* trigger for the contact dialog. Default is asphalt-on-bone for light
     sections; on the dark masthead it flips to bone-on-asphalt, or it would be
     black type on a black ground. */
  .contact-open{
    display:inline-flex; align-items:center; gap:.7rem;
    background:var(--ink); color:var(--bone); border:0; cursor:pointer;
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    letter-spacing:-.01em; font-size:1rem;
    padding:.95rem 1.6rem; border-radius:2px; min-height:44px;
  }
  .page-head .contact-open{ background:var(--bone); color:var(--ink); }
  .page-head .contact-open:focus-visible{ outline-color:var(--bone); }

  /* ---------- contact section (landing) ----------
     The second screen of the landing page: an eyebrow and the trigger, centred,
     on bone so it flips against the asphalt hero above and footer below. */
  .contact-sec{
    background:var(--bone);
    min-height:78svh; display:flex; align-items:center;
  }
  /* Offerings left, the way in right, wordmark closing bottom right. The list is
     the widest thing here, so it takes the larger column. */
  .contact-grid{
    width:100%; display:grid;
    grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
    gap: clamp(2rem,5vw,4.5rem);
    align-items:center;
  }
  .contact-sec .eyebrow{ color:var(--graphite); }

  /* A list, not a card grid — one line per offering on a hairline, so the set
     reads as a short menu rather than four boxes competing for attention. */
  .offer-list{ list-style:none; border-top:1px solid var(--hairline); }
  .offer-list li{
    border-bottom:1px solid var(--hairline);
    padding: clamp(.85rem,2.2vh,1.35rem) 0;
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    font-size:clamp(1.15rem,2.6vw,2rem); line-height:1.05; letter-spacing:-.02em;
    color:var(--ink);
  }
  /* not open yet — graphite is the tested muted tone, so it recedes clearly
     against the near-black active items while still clearing AA. The Soon tag
     sits where the arrow sits on the live rows, so every row shares a right edge. */
  .offer-list li.offer-soon{
    color:var(--graphite);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  .offer-tag{
    flex:none;
    font-family:var(--font-mono); font-weight:500; font-size:.62rem;
    letter-spacing:.18em; text-transform:uppercase; color:var(--graphite);
  }

  /* The live offerings are buttons that open the contact dialog. They inherit the
     row's type completely — the only thing marking them as interactive is the
     arrow, which slides in on hover. The whole row is the target. */
  /* The row's padding moves onto the button so the whole row is the target, not
     just the glyph height — otherwise this is a ~19px tap target, well under the
     44px floor. min-height carries the same guarantee where :has() is missing. */
  .offer-list li:has(> .offer-trigger){ padding:0; }
  .offer-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
    background:none; border:0; cursor:pointer; text-align:left;
    padding: clamp(.85rem,2.2vh,1.35rem) 0;
    min-height:44px;                 /* WCAG 2.5.8 target size */
    font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  }
  /* Visible at rest, not hover-only. There is no hover on a phone, so a hidden
     arrow left these rows looking as inert as the greyed ones to half the
     traffic. Faint at rest, full and nudged forward on hover or focus. */
  .offer-trigger .ar{
    opacity:.35; flex:none;
    transition:opacity .35s cubic-bezier(.16,.84,.44,1), transform .35s cubic-bezier(.16,.84,.44,1);
  }
  .offer-trigger:hover .ar,
  .offer-trigger:focus-visible .ar{ opacity:1; transform:translateX(.25rem); }
  .offer-trigger:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; border-radius:1px; }
  @media (prefers-reduced-motion: reduce){
    .offer-trigger .ar{ transition:opacity .2s linear; transform:none; }
  }

  .contact-sec-cta{ display:grid; gap:clamp(1rem,2.6vh,1.6rem); justify-items:start; }

  .contact-sec-mark{
    grid-column:1 / -1; justify-self:end;
    margin-top: clamp(2.5rem,7vh,4.5rem);
    font-family:var(--font-mono); font-weight:400; font-style:italic;
    font-size:.7rem; letter-spacing:clamp(.16em,.8vw,.3em); text-transform:uppercase;
    text-indent:clamp(.16em,.8vw,.3em);   /* offset the trailing letter-space */
    color:var(--graphite);
  }

  /* visually hidden, still read aloud */
  .vh{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }

  @media (max-width: 760px){
    .contact-grid{ grid-template-columns:1fr; gap:clamp(2rem,5vh,3rem); }
    .contact-sec-mark{ grid-column:auto; }
  }
  .contact-open .ar{ transition:transform .4s cubic-bezier(.16,.84,.44,1); }
  .contact-open:hover .ar,.contact-open:focus-visible .ar{ transform:translateX(.35rem); }

  /* ---------- contact dialog ---------- */
  .contact-modal{
    border:1px solid var(--hairline); border-radius:2px; padding:0;
    background:var(--bone); color:var(--ink);
    width:min(92vw, 760px); max-height:88vh; overflow:auto;
    margin:auto;   /* centres in the top layer in every engine */
  }
  .contact-modal::backdrop{ background:rgba(12,12,11,.74); }
  .contact-modal[open]{ animation: modalIn .4s cubic-bezier(.16,.84,.44,1); }
  @keyframes modalIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  /* Heading, status and footer centre with the rest of the site. Field labels and
     inputs stay left: a centred label floating over a full-width input breaks the
     line the eye follows down a form. */
  .contact-modal-inner{
    position:relative;
    padding: clamp(1.8rem,4.5vw,3.2rem);
    display:grid; gap:clamp(.9rem,2.2vh,1.4rem);
    text-align:center;
  }
  .contact-modal-inner h2{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.9rem,5vw,3.2rem); line-height:.95; letter-spacing:-.03em;
  }
  .contact-modal-inner .lead{ color:var(--graphite); line-height:1.6; max-width:46ch; margin-inline:auto; }
  /* shown only when the dialog was opened from one of the offerings */
  .contact-modal-context{
    font-family:var(--font-mono); font-size:.72rem; font-weight:500;
    letter-spacing:.18em; text-transform:uppercase; color:var(--graphite);
  }
  .contact-modal-context[hidden]{ display:none; }
  .contact-modal-inner .enquire{ margin-top:clamp(.6rem,1.6vh,1.2rem); }
  .contact-modal-inner .field{ text-align:left; }
  .contact-modal-inner .enquire input,
  .contact-modal-inner .enquire select,
  .contact-modal-inner .enquire textarea{ text-align:left; }
  .contact-modal-close{
    position:absolute; top:clamp(1rem,2.4vw,1.6rem); right:clamp(1rem,2.4vw,1.6rem);
    background:none; border:1px solid var(--hairline); color:var(--ink); cursor:pointer;
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    padding:.5rem .8rem; border-radius:2px;
    min-height:44px; min-width:44px;   /* WCAG 2.5.8 target size */
  }
  .contact-modal-close:hover{ background:var(--ink); color:var(--bone); }
  .contact-modal-meta{
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:.5rem 1rem;
    border-top:1px solid var(--hairline); padding-top:1.1rem;
    margin-top:clamp(.6rem,1.6vh,1.2rem);
  }
  .contact-modal-meta .eyebrow{ color:var(--graphite); }
  html.no-scroll{ overflow:hidden; }   /* page behind the open dialog stays put */
  @media (prefers-reduced-motion: reduce){
    .contact-modal[open]{ animation:none; }
  }

  /* ---------- partner wall (specialists) ----------
     Hairline-gap grid: each cell draws its own right/bottom rule so a part-filled
     last row leaves clean space instead of a stranded strip of hairline. */
  .partners{ background:var(--bone); }
  .partner-grid{
    /* min(190px,45%) keeps two columns on a phone instead of one tall stack,
       without needing a breakpoint */
    display:grid; grid-template-columns:repeat(auto-fill,minmax(min(190px,45%),1fr));
    margin-top:clamp(2rem,5vh,3rem);
    border-top:1px solid var(--hairline);
    border-left:1px solid var(--hairline);
    border-radius:2px;
  }
  .partner-cell{
    aspect-ratio:3/2;
    display:flex; align-items:center; justify-content:center;
    padding:clamp(1.1rem,2.6vw,2rem);
    border-right:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
  }
  .partner-cell img{
    width:auto; max-width:100%; max-height:100%; object-fit:contain;
    filter:grayscale(1); opacity:.78;
    transition:opacity .35s ease;
  }
  .partner-cell:hover img{ opacity:1; }
  .partner-cell span{
    font-family:var(--font-mono); font-size:.68rem; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; color:var(--graphite);
  }

  /* ---------- A–Z of marques (specialists) ----------
     A directory, not a card grid: a sticky index letter in the gutter, the
     marques stacked against it, vetted names hung underneath each badge. */
  .az-sec{ background:var(--bone); }

  /* jump index */
  .marque-index{
    display:flex; flex-wrap:wrap; gap:0 clamp(1rem,2.4vw,1.8rem);
    border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
    padding:.35rem 0; margin-bottom:clamp(2rem,5vh,3.2rem);
  }
  .marque-index a{
    display:inline-flex; align-items:center; min-height:44px;   /* WCAG 2.5.8 target size */
    font-family:var(--font-mono); font-size:.72rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase; color:var(--graphite);
    position:relative; transition:color .25s ease;
  }
  .marque-index a::after{
    content:""; position:absolute; left:0; bottom:.65rem; height:1px; width:0;
    background:var(--ink); transition:width .35s cubic-bezier(.16,.84,.44,1);
  }
  .marque-index a:hover,.marque-index a:focus-visible{ color:var(--ink); }
  .marque-index a:hover::after,.marque-index a:focus-visible::after{ width:100%; }

  /* letter groups */
  .az-group{
    display:grid; grid-template-columns:clamp(3.5rem,9vw,9rem) 1fr;
    gap:clamp(1rem,3vw,2.5rem);
    padding:clamp(1.8rem,4.5vh,3rem) 0;
    border-top:1px solid var(--hairline);
  }
  .az-group:last-child{ border-bottom:1px solid var(--hairline); }
  .az-letter{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(2.2rem,6vw,4.5rem); line-height:.8; letter-spacing:-.04em;
    position:sticky; top:clamp(6rem,10vh,7.5rem); align-self:start;
  }
  .marque[id]{ scroll-margin-top:clamp(5.5rem,9vh,7rem); }
  .marque + .marque{
    margin-top:clamp(1.2rem,3vh,2rem); padding-top:clamp(1.2rem,3vh,2rem);
    border-top:1px solid var(--hairline);
  }
  .marque-name{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.5rem,3.6vw,2.4rem); line-height:.95; letter-spacing:-.03em;
  }
  .marque-note{ margin-top:.55rem; color:var(--graphite); font-size:.98rem; max-width:46ch; }

  /* the vetted names under each badge */
  .specialist-list{ list-style:none; display:grid; gap:.6rem; }
  .specialist-list:not(:empty){ margin-top:clamp(.9rem,2.2vh,1.4rem); }
  .specialist{
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
    gap:.2rem 2rem;
  }
  .specialist-name{ font-weight:600; font-size:1.05rem; letter-spacing:.01em; }
  .specialist-kind{
    font-family:var(--font-mono); font-size:.72rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase; color:var(--graphite);
  }
  .specialist-empty{
    margin-top:clamp(.9rem,2.2vh,1.4rem);
    font-family:var(--font-mono); font-size:.7rem; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; color:var(--graphite);
  }

  /* ---------- vetting / ordering criteria ----------
     Bone by default; .tint when the section above it is already bone and the
     page needs the flip. Two identical surfaces must never sit back to back. */
  .vetting{ background:var(--bone); }

  /* ---------- closing CTA band (dark) ---------- */
  .cta-band{ background:var(--ink); color:var(--bone); }
  .cta-band .wrap{ display:grid; justify-items:start; gap:clamp(1.2rem,3vh,1.8rem); }
  .cta-band h2{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    font-size:clamp(2.2rem,6.5vw,5rem); line-height:.9; letter-spacing:-.04em;
    text-wrap:balance; max-width:16ch;
  }
  .cta-band p{ color:var(--graphite-inv); font-size:1.05rem; line-height:1.65; max-width:52ch; }
  .cta-band .hero-cta{ margin-top:clamp(.4rem,1.4vh,1rem); }
  .cta-band a:focus-visible{ outline-color:var(--bone); }

  /* ---------- specialist areas (taupe panel — grows over time) ---------- */
  .specialisms{ background:var(--panel); }
  .spec-list{ list-style:none; margin:clamp(2rem,5vh,3rem) 0 0; }
  .spec-item{
    display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.5rem 2rem;
    padding:clamp(1.3rem,3.4vh,2.1rem) 0;
    border-top:1px solid var(--hairline);
  }
  .spec-item:last-of-type{ border-bottom:1px solid var(--hairline); }
  .spec-name{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.6rem,4.4vw,3rem); line-height:.92; letter-spacing:-.03em;
  }
  .spec-kind{
    font-family:var(--font-mono); font-size:.74rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase; color:var(--graphite);
    text-align:right; white-space:nowrap;
  }
  .spec-more{
    margin-top:clamp(1.4rem,3vh,2rem); max-width:54ch;
    color:var(--graphite); font-size:1.02rem; line-height:1.55;
  }
  .spec-more a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

  /* ---------- why me (dark) ---------- */
  .whyme{ background:var(--ink); color:var(--bone); }
  .whyme .sec-head h2{ color:var(--bone); }
  .whyme .rules span{ background:var(--bone); }
  .whyme-body{ max-width:62ch; margin-top:var(--block-gap); display:grid; gap:1.3rem; }
  .whyme-body p{ color:var(--graphite-inv); font-size:1.05rem; line-height:1.65; }
  .whyme-body .whyme-punch{ color:var(--bone); font-weight:600; font-size:1.15rem; }

  /* ---------- shop / storefront ---------- */
  .shop{ background:var(--bone); }
  .shop-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:clamp(1rem,2.4vw,1.8rem);
    margin-top:clamp(2rem,5vh,3rem);
  }
  .product{ display:grid; gap:.9rem; align-content:start; }
  .product-media{
    position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px;
    background:var(--panel); border:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:center;
  }
  .product-media img{ width:100%; height:100%; object-fit:cover; }
  .product-media .ph{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--graphite);
  }
  .product-media .badge{
    position:absolute; top:.7rem; left:.7rem;
    font-family:var(--font-mono); font-size:.62rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase;
    background:var(--ink); color:var(--bone); padding:.32rem .55rem; border-radius:2px;
  }
  .product-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
  .product-name{
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    font-size:clamp(1.15rem,2vw,1.5rem); line-height:1; letter-spacing:-.02em;
  }
  .product-price{
    font-family:var(--font-mono); font-size:.9rem; font-weight:500;
    color:var(--ink); white-space:nowrap;
  }
  .product-desc{ color:var(--graphite); font-size:.95rem; line-height:1.5; }
  .product .buy{
    justify-self:start; margin-top:.2rem;
    display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    min-height:44px;   /* WCAG 2.5.8 target size — matches nav/menu buttons */
    background:transparent; color:var(--ink); border:1px solid var(--ink);
    font-family:var(--font-mono); font-size:.7rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase;
    padding:.55rem 1.1rem; border-radius:2px; cursor:pointer;
    transition:background .3s ease, color .3s ease;
  }
  .product .buy:not(:disabled):hover,.product .buy:not(:disabled):focus-visible{ background:var(--ink); color:var(--bone); }
  .product .buy:disabled{
    border-color:var(--hairline); color:var(--graphite);
    cursor:not-allowed; background:transparent;
  }

  /* ---------- form: optional label ---------- */
  .field label .opt{ color:var(--graphite); font-weight:400; letter-spacing:.1em; }

  /* ---------- surface flip utility ----------
     Last in the cascade on purpose: any section that would otherwise repeat the
     surface above it takes .tint and steps onto the taupe panel instead. */
  .tint{ background:var(--panel); }

  /* ---------- skip link ---------- */
  /* Parked above the viewport and slid down on focus. Moved on transform rather
     than top — animating a layout property forces a reflow on every frame. */
  .skip{
    position:fixed; left:var(--pad); top:1rem; z-index:200;
    transform:translateY(calc(-100% - 1.5rem));
    background:var(--ink); color:var(--bone);
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    padding:.85rem 1.1rem; border-radius:2px;
    transition:transform .2s ease;
  }
  .skip:focus{ transform:none; }

  /* ---------- focus ---------- */
  a:focus-visible,button:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:1px; }
  .hero a:focus-visible{ outline-color:var(--bone); }

  /* ---------- responsive ---------- */
  @media (max-width: 900px){
    .sec-head{ grid-template-columns:1fr; align-items:start; gap:1.2rem; }
    .svc-body{ grid-template-columns:1fr; }
    .contact-inner{ grid-template-columns:1fr; align-items:start; gap:2.5rem; }
    .field-row{ grid-template-columns:1fr; }
  }
  @media (max-width: 560px){
    .svc{ grid-template-columns:1fr; gap:.6rem; }
    .offerings{ grid-template-columns:1fr; }
    .spec-item{ grid-template-columns:1fr; }
    .spec-kind{ text-align:left; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    .reveal{ opacity:1; transform:none; }
    #loader{ display:none; }
    .scroll-cue .arrow::after{ display:none; }
  }