:root{
    /* ---- Brand palette (exact) ----------------------------------------
       60% neutral foundation · 25% burgundy · 10% champagne · 5% gold   */
    --ink:#1D1D1E;
    --burgundy-deep:#53131E;
    --burgundy:#770523;
    --gold:#D2932A;
    --champagne:#F4D9B5;
    --white:#FFFFFF;

    /* ---- Derived neutrals: tints of --ink, so the 60% foundation stays
       genuinely neutral rather than drifting warm/cream ---------------- */
    --neutral-50:#F7F6F6;
    --neutral-100:#EDECEC;
    --ink-soft:#6B6B6D;

    /* ---- Surfaces (these are what dark mode re-points) ---------------- */
    --surface:#FFFFFF;
    --surface-alt:var(--neutral-50);
    --surface-card:#FFFFFF;
    --text:var(--ink);
    --text-soft:var(--ink-soft);

    /* ---- Structure. Borders are NEUTRAL, not gold: gold is the 5%
       accent and must not outline every card on the page. -------------- */
    --line:rgba(29,29,30,.14);
    --line-gold:rgba(210,147,42,.45);
    --shadow:rgba(29,29,30,.18);

    /* ---- Legacy aliases so existing rules keep working ---------------- */
    --maroon-900:var(--burgundy-deep);
    --maroon-700:var(--burgundy);
    --maroon-600:var(--burgundy);
    --gold-light:var(--champagne);
    --cream:var(--surface-alt);
    --cream-deep:var(--champagne);

    /* ---- Buttons ------------------------------------------------------ */
    --btn-primary:var(--burgundy);
    --btn-hover-gold:var(--gold);
    --btn-pressed-gold:#A87422;
    --btn-processing:rgba(119,5,35,.62);
    --btn-disabled-bg:var(--neutral-100);
    --btn-disabled-text:#78767A;
    --btn-radius:999px;

    /* ---- Shape -------------------------------------------------------- */
    --radius-card:10px;
    --radius-field:8px;

    --header-h:clamp(66px,7vw,88px);
    /* Decorative backdrop: colour and strength per theme */
    --wave-color:var(--champagne);
    --wave-opacity:.42;
    --container-pad:clamp(20px,4.5vw,72px);
    --content-max:1440px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  /* Decorative elements (card leaves) sit outside their frames, so make
     sure nothing can push the page sideways on narrow screens. */
  html{overflow-x:hidden;}
  body{overflow-x:hidden;max-width:100%;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--text);
    background:var(--surface);
    -webkit-font-smoothing:antialiased;
    /* Column flex + flex:1 on <main> pushes the footer to the bottom of the
       viewport on short pages, without pinning it there on long ones.
       100dvh first so mobile browser chrome doesn't leave a gap. */
    display:flex;
    flex-direction:column;
    min-height:100vh;
    min-height:100dvh;
  }
  main{flex:1 0 auto;}
  footer.site-footer{flex-shrink:0;}
  h1,h2,h3,.serif{font-family:'Playfair Display',serif;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  /* ---- Decorative backdrop --------------------------------------------
     The wave SVG is used as a MASK, not an image, so a single asset can be
     tinted per theme. Fixed and inset beyond the viewport on every side so
     its cut edges are never visible, and pushed behind content with a
     negative z-index. pointer-events:none keeps it from catching clicks. */
  .bg-wave{
    position:fixed;
    top:-14vh;
    left:-8vw;
    width:116vw;
    height:128vh;
    z-index:-1;
    pointer-events:none;
    background-color:var(--wave-color);
    opacity:var(--wave-opacity);
    -webkit-mask-image:url('/assets/img/backdrop-wave.svg');
    mask-image:url('/assets/img/backdrop-wave.svg');
    /* Size by WIDTH, not cover. The artwork is 2.11:1; `cover` against a
       tall layer scales to the height and magnifies it enormously. This
       spans the full 116vw so both ends sit outside the viewport while the
       wave keeps its own proportions. */
    -webkit-mask-size:100% auto;
    mask-size:100% auto;
    -webkit-mask-position:center center;
    mask-position:center center;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    will-change:transform;
    transition:opacity .4s ease;
  }
  /* No mask support: hide it rather than show an untinted block */
  @supports not ((-webkit-mask-image:url('')) or (mask-image:url(''))){
    .bg-wave{display:none;}
  }
  @media(prefers-reduced-motion:reduce){
    .bg-wave{transform:none!important;}
  }

  /* ===== Site header ===== */
  /* Fixed and translucent so the hero photograph reads through it.
     `main` is padded by the same height; the hero cancels that padding
     with a negative margin so its image runs up behind the header. */
  /* Logo left, nav centre, and the three controls grouped hard right so the
     logo keeps its room. The group shrinks naturally: the CTA drops out
     under 600px and the desktop nav under 1200px, leaving the toggle
     docked beside the hamburger. */
  .header-actions{
    display:flex;
    align-items:center;
    gap:clamp(8px,1.2vw,14px);
    /* Explicit column. Without it the group auto-flows into column 2 as soon
       as the nav is hidden, and ends up aligned to the middle of the bar. */
    grid-column:3;
    justify-self:end;
    flex:0 0 auto;
  }
  .site-header{
    /* Three columns so the nav is centred against the VIEWPORT, not against
       whatever space the logo and action group happen to leave. The side
       columns are equal 1fr, so the middle stays put as they change width. */
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    min-height:var(--header-h);
    padding:clamp(10px,1.8vw,16px) var(--container-pad);
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(16px);
    backdrop-filter:saturate(1.4) blur(16px);
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    gap:16px;
    /* the dropdown panel hangs below the bar, so nothing may clip it */
    overflow:visible;
  }
  .logo-lockup{display:flex;align-items:center;cursor:pointer;grid-column:1;justify-self:start;}
  /* Brand mark: one <symbol> reused by header and footer. The source artwork is
     a single near-black fill, which would disappear on the dark footer, so no
     fill is baked in - `fill:currentColor` lets each placement set its own
     colour through the inherited `color` property. */
  .logo-svg{
    display:block;
    height:clamp(26px,3.6vw,36px);
    /* An inline <svg> does not derive its width from the viewBox: `width:auto`
       resolves to 100% of the container and the mark blows out. aspect-ratio
       pins the width to the artwork's own 141.75 x 21.66 proportions. */
    aspect-ratio:141.75/21.66;
    width:auto;
    flex:0 0 auto;
    fill:currentColor;
    color:var(--maroon-700);
  }
  @supports not (background:color-mix(in srgb,red 50%,transparent)){
    .site-header{background:var(--surface);}
  }
  main{padding-top:var(--header-h);}
  .mobile-menu{top:100%;}

  nav.main-nav{display:flex;gap:clamp(16px,1.8vw,34px);align-items:center;flex-wrap:nowrap;grid-column:2;justify-self:center;}
  nav.main-nav a{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    letter-spacing:.06em;
    color:var(--ink);
    text-transform:uppercase;
    padding-bottom:4px;
    border-bottom:2px solid transparent;
    transition:all .15s;
  }
  nav.main-nav a:hover, nav.main-nav a.active{color:var(--maroon-700);border-bottom-color:var(--gold);}
  /* Buttons follow the Digital section of the brand guide: pill shape, bold
     sentence-case sans label, and the five states (enabled / disabled / hover /
     pressed / processing). Hover goes to brand gold, pressed to a deeper gold. */
  /* ---- Services dropdown ------------------------------------------------
     Opens on hover and on keyboard focus (:focus-within), so it is reachable
     by tab as well as pointer. The panel is padded away from the trigger by
     a transparent bridge, otherwise the gap between them closes the menu as
     the pointer travels down. */
  .nav-group{position:relative;display:flex;align-items:center;}
  .nav-drop{
    position:absolute;
    top:100%;
    left:-18px;
    min-width:190px;
    padding:10px 0;
    margin-top:14px;
    background:var(--surface-card);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    box-shadow:0 20px 40px -22px var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    z-index:120;
  }
  /* Transparent bridge across the gap so the pointer can reach the panel */
  .nav-drop::before{
    content:"";
    position:absolute;
    top:-16px;left:0;right:0;height:16px;
  }
  .nav-group:hover .nav-drop,
  .nav-group:focus-within .nav-drop{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .nav-drop a{
    display:block;
    padding:9px 20px;
    border-bottom:none;
    white-space:nowrap;
    transition:color .2s ease, background-color .2s ease;
  }
  .nav-drop a:hover,.nav-drop a.active{
    color:var(--maroon-700);
    background:var(--surface-alt);
    border-bottom-color:transparent;
  }
  /* Small caret on the trigger */
  .nav-group > a::after{
    content:"";
    display:inline-block;
    width:5px;height:5px;
    margin-left:7px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .22s ease;
  }
  .nav-group:hover > a::after,
  .nav-group:focus-within > a::after{transform:translateY(0) rotate(225deg);}
  @media(prefers-reduced-motion:reduce){
    .nav-drop,.nav-group > a::after{transition:none;}
  }
  /* Mobile menu: Approach reads as a child of Services */
  .mobile-menu a.sub{
    padding-left:20px;
    font-size:12px;
    opacity:.85;
    position:relative;
  }
  .mobile-menu a.sub::before{
    content:"";
    position:absolute;
    left:2px;top:50%;
    width:10px;height:1px;
    background:var(--gold);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
    padding:12px 26px;
    border:1px solid var(--btn-primary);
    color:var(--btn-primary);
    cursor:pointer;
    background:var(--surface-card);
    transition:background-color .18s, border-color .18s, color .18s;
    border-radius:var(--btn-radius);
    white-space:nowrap;
  }
  /* Secondary / outlined */
  .btn:hover{background:var(--btn-hover-gold);border-color:var(--btn-hover-gold);color:var(--maroon-900);}
  .btn:active{background:var(--btn-pressed-gold);border-color:var(--btn-pressed-gold);color:var(--maroon-900);}

  /* Primary / contained */
  .btn-solid{background:var(--btn-primary);color:var(--white);border-color:var(--btn-primary);}
  .btn-solid:hover{background:var(--btn-hover-gold);border-color:var(--btn-hover-gold);color:var(--maroon-900);}
  .btn-solid:active{background:var(--btn-pressed-gold);border-color:var(--btn-pressed-gold);color:var(--maroon-900);}

  /* On dark backgrounds (CTA banner, maroon cards) */
  .btn-ghost-light{background:transparent;border-color:var(--gold-light);color:var(--cream-deep);}
  .btn-ghost-light:hover{background:var(--gold);border-color:var(--gold);color:var(--maroon-900);}
  .btn-ghost-light:active{background:var(--gold-light);border-color:var(--gold-light);color:var(--maroon-900);}

  /* Disabled */
  .btn:disabled,.btn[aria-disabled="true"]{
    background:var(--btn-disabled-bg);
    border-color:var(--btn-disabled-bg);
    color:var(--btn-disabled-text);
    cursor:not-allowed;
  }
  /* Processing: muted maroon plus a spinner, per the guide's fifth state.
     Wins over :disabled because the button is disabled while it submits. */
  .btn.is-processing,.btn.is-processing:disabled{
    background:var(--btn-processing);
    border-color:var(--btn-processing);
    color:var(--white);
    cursor:progress;
  }
  .btn-text.is-processing .ico-arrow{opacity:0;}
  .btn.is-processing::before{
    content:"";
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,.55);
    border-top-color:var(--white);
    border-radius:50%;
    animation:btn-spin .7s linear infinite;
    flex:0 0 auto;
  }
  @keyframes btn-spin{to{transform:rotate(360deg);}}
  @media(prefers-reduced-motion:reduce){
    .btn.is-processing::before{animation:none;}
  }

  /* Reset for logo-lockup when rendered as a real <button> for accessibility */
  button.logo-lockup{background:none;border:none;padding:0;font:inherit;text-align:left;}

  :focus-visible{outline:2px solid var(--maroon-700);outline-offset:3px;}

  /* ---- Button system ----------------------------------------------------
     Four variants, matching the brand guide's Components sheet:
       .btn-solid      CONTAINED  primary action, one per view
       .btn            OUTLINED   secondary action
       .btn-text       TEXT       tertiary / navigational, carries an arrow
       .btn-icon-only  ICON ONLY  circular, label lives in aria-label
     States are enabled / disabled / hover / pressed / processing, as per
     the guide. Hover uses brand gold by explicit client instruction; the
     guide's own specimen lightens the burgundy instead. */

  /* TEXT (tertiary) */
  .btn-text{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:10px 14px;
    margin-left:-14px;            /* optical alignment to the text column */
    font-family:'Inter',sans-serif;
    font-size:13.5px;
    font-weight:600;
    color:var(--btn-primary);
    background:transparent;
    border:none;
    border-radius:var(--btn-radius);
    cursor:pointer;
    white-space:nowrap;
    transition:background-color .2s ease, color .2s ease;
  }
  .ico-arrow{
    width:17px;height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:0 0 auto;
    transition:transform .25s cubic-bezier(.22,1,.36,1);
  }
  .ico-arrow.flip{transform:rotate(180deg);}
  @media(hover:hover){
    .btn-text:hover{background:rgba(210,147,42,.14);}
    .btn-text:hover .ico-arrow{transform:translateX(3px);}
    .btn-text:hover .ico-arrow.flip{transform:rotate(180deg) translateX(3px);}
  }
  .btn-text:active{background:rgba(210,147,42,.24);}
  .btn-text:disabled,.btn-text[aria-disabled="true"]{
    color:var(--btn-disabled-text);background:transparent;cursor:not-allowed;
  }

  /* ICON ONLY */
  .btn-icon-only{
    width:48px;
    height:48px;
    min-height:48px;
    padding:0;
    gap:0;
    border-radius:50%;
  }
  .btn-icon-only svg{
    width:20px;height:20px;
    fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;
  }

  /* Back to top */
  .to-top{
    position:fixed;
    right:clamp(16px,3vw,32px);
    bottom:clamp(16px,3vw,32px);
    z-index:95;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .28s ease, transform .28s ease, visibility .28s,
               background-color .18s ease, border-color .18s ease, color .18s ease;
    box-shadow:0 14px 30px -14px var(--shadow);
  }
  .to-top.show{opacity:1;visibility:visible;transform:none;}
  @media(prefers-reduced-motion:reduce){
    .to-top{transition:opacity .01s, visibility .01s;transform:none;}
    .ico-arrow{transition:none;}
  }

  /* Leading icon inside a contained or outlined button */
  .ico-btn{
    width:16px;height:16px;
    fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;
    flex:0 0 auto;
    margin-right:-2px;
  }
  /* In the register the text button sits in its own grid cell, so the
     optical offset used in body copy would misalign it. */
  .doc-entry .btn-text{margin-left:0;}
  /* Document pages: one contained button per view. The foot return is
     outlined so it does not compete with a document's own primary action. */
  .doc-foot .btn{margin:0;}

  /* ---- Legal register: rows are links to the document pages ------------ */
  .doc-register{margin-top:clamp(36px,5vw,58px);}
  .doc-entry{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px clamp(24px,4vw,56px);
    align-items:center;
    padding:clamp(38px,4.4vw,58px) 0;
    border-top:1px solid var(--line);
    color:inherit;
    transition:padding-left .3s ease, background-color .3s ease;
  }
  .doc-register .doc-entry:last-of-type{border-bottom:1px solid var(--line);}
  @media(hover:hover){
    .doc-entry:hover{padding-left:10px;}
    .doc-entry:hover .btn-text{background:rgba(210,147,42,.14);}
    .doc-entry:hover .ico-arrow{transform:translateX(3px);}
  }
  .doc-entry:focus-visible{outline:2px solid var(--maroon-700);outline-offset:4px;}
  .doc-entry-text{display:block;min-width:0;}
  .doc-title{
    display:block;
    font-family:'Playfair Display',serif;
    font-size:clamp(18px,2vw,21px);
    color:var(--maroon-700);
    margin:0 0 9px;
    line-height:1.25;
  }

  @media(prefers-reduced-motion:reduce){
    .doc-entry{transition:none;}
  }

  /* ---- Document page layout --------------------------------------------
     Two columns on wide screens: a sticky control/contents rail, and the
     reading column. The prose stays at a readable measure - widening the
     text itself would make a long legal document harder to read, not
     easier - so the recovered space goes to persistent navigation. */
  .doc-layout{
    display:grid;
    grid-template-columns:minmax(230px,300px) minmax(0,1fr);
    gap:clamp(32px,5vw,80px);
    align-items:start;
    margin-top:clamp(20px,3vw,32px);
  }
  .doc-layout.wide{grid-template-columns:minmax(230px,280px) minmax(0,1fr);}
  /* No sidebar content: give the whole width to the document */
  .doc-layout.no-aside{grid-template-columns:1fr;}
  .doc-layout.no-aside .doc-aside{display:none;}
  .doc-aside{
    position:sticky;
    top:calc(var(--header-h) + 24px);
    display:flex;
    flex-direction:column;
    gap:24px;
    max-height:calc(100vh - var(--header-h) - 48px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .doc-control-panel .doc-control{
    display:block;
    margin:0;
    padding:20px 20px 6px;
  }
  .doc-control-panel .doc-control div{margin-bottom:15px;}

  /* Contents list, generated from the document's own headings */
  .doc-toc ol{list-style:none;margin:0;padding:0;}
  .doc-toc li{margin:0;}
  .doc-toc .toc-head{
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--gold);
    margin:0 0 12px;
  }
  .doc-toc a{
    display:block;
    font-size:13px;
    line-height:1.45;
    color:var(--ink-soft);
    padding:7px 0 7px 14px;
    border-left:2px solid var(--line);
    transition:color .2s ease, border-color .2s ease, padding-left .2s ease;
  }
  .doc-toc a:hover,.doc-toc a:focus-visible{
    color:var(--maroon-700);
    border-left-color:var(--gold);
    padding-left:18px;
  }
  .doc-toc a[aria-current="true"]{
    color:var(--maroon-700);
    border-left-color:var(--gold);
    font-weight:600;
  }

  .doc-main{min-width:0;}
  /* Measure stays readable; the layout, not the line length, uses the width */
  .doc-main .doc-body{max-width:min(74ch,100%);padding:0;}
  .doc-layout.wide .doc-main .doc-body{max-width:none;}
  .doc-body h4{
    scroll-margin-top:calc(var(--header-h) + 24px);
    position:relative;
    border-radius:4px;
  }
  /* Target highlight: the heading briefly lifts on a gold wash with a rule
     drawn in beside it, so the eye lands on the right section after a jump. */
  .doc-body h4.flash{animation:head-flash 1.5s ease-out 1;}
  .doc-body h4.flash::before{
    content:"";
    position:absolute;
    left:-14px;
    top:6%;
    bottom:6%;
    width:3px;
    border-radius:2px;
    background:var(--gold);
    animation:head-flash-bar 1.5s ease-out 1;
  }
  @keyframes head-flash{
    0%   {background:rgba(210,147,42,.32);box-shadow:0 0 0 7px rgba(210,147,42,.32);}
    35%  {background:rgba(210,147,42,.22);box-shadow:0 0 0 7px rgba(210,147,42,.22);}
    100% {background:transparent;box-shadow:0 0 0 7px transparent;}
  }
  @keyframes head-flash-bar{
    0%   {opacity:0;transform:scaleY(.2);}
    22%  {opacity:1;transform:scaleY(1);}
    100% {opacity:0;transform:scaleY(1);}
  }
  @media(prefers-reduced-motion:reduce){
    /* No sweep: hold a static marker briefly instead of animating */
    .doc-body h4.flash{animation:none;background:rgba(210,147,42,.22);}
    .doc-body h4.flash::before{animation:none;opacity:1;}
  }

  @media(max-width:980px){
    .doc-layout,.doc-layout.wide{grid-template-columns:1fr;gap:28px;}
    .doc-aside{position:static;max-height:none;overflow:visible;}
    .doc-toc{display:none;}          /* in-page nav is noise on a phone */
    .doc-main .doc-body{max-width:none;}
  }
  @media(prefers-reduced-motion:reduce){
    .doc-toc a{transition:none;}
  }

  /* ---- Document page --------------------------------------------------- */
  .doc-back-nav{margin-bottom:clamp(18px,2.4vw,26px);}
  .doc-head{margin-bottom:clamp(20px,3vw,30px);}
  .doc-head .section-title{margin-bottom:10px;}
  .doc-foot{
    margin-top:clamp(36px,5vw,56px);
    padding-top:clamp(24px,3vw,32px);
    border-top:1px solid var(--line);
  }
  @media(max-width:640px){
    /* Stacked, with the action pulled to the bottom-right corner: the row
       is already tall enough to hold it, and the title keeps the full
       width instead of being squeezed beside the link. */
    .doc-entry{grid-template-columns:1fr;align-items:start;gap:4px;}
    .doc-entry .btn-text{
      justify-self:end;
      margin-right:-14px;   /* optical alignment to the row's right edge */
      margin-top:2px;
    }
  }

  /* ---- Legal & Compliance ----------------------------------------------
     Presented as a controlled-document register rather than an article
     page: each row shows the document's own control metadata (code,
     version, status) and links through to that document's own page, so a
     legal document can be linked, bookmarked and printed on its own. */
  /* Inter, matching body copy. Fields are separated by a middot rather
     than by gaps alone, so the line reads as one string of metadata. */
  .doc-meta{
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:400;
    letter-spacing:0;
    line-height:1.5;
    color:var(--ink-soft);
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:2px 0;
  }
  .doc-meta span + span::before{
    content:"·";
    margin:0 9px;
    opacity:.55;
  }

  /* Document body */
  .doc-body{
    padding:4px 0 clamp(28px,4vw,40px);
    max-width:min(76ch,100%);
  }
  .doc-body h4{
    font-family:'Playfair Display',serif;
    font-size:16px;
    color:var(--maroon-700);
    margin:26px 0 8px;
  }
  .doc-body h4:first-child{margin-top:8px;}
  .doc-body p,.doc-body li{
    font-size:14px;
    line-height:1.72;
    color:var(--ink-soft);
    margin:0 0 12px;
  }
  .doc-body ul{margin:0 0 12px;padding-left:20px;}
  .doc-body li{margin-bottom:6px;}
  /* Unfilled fields in the supplied source, shown rather than hidden */
  .doc-gap{
    font-family:'IBM Plex Mono',monospace;
    font-size:.86em;
    padding:1px 7px;
    border-radius:3px;
    border:1px dashed var(--line-gold);
    color:var(--gold);
    white-space:nowrap;
  }
  .doc-body ol{margin:0 0 12px;padding-left:22px;}
  .doc-body ol li{margin-bottom:8px;}
  .doc-embed{
    display:block;
    width:100%;
    height:min(78vh,860px);
    margin-top:22px;
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    background:var(--surface-alt);
  }
  .doc-embed p{padding:22px;margin:0;}
  @media(max-width:700px){
    /* An inline PDF is unusable at phone width; the buttons above remain */
    .doc-embed{display:none;}
  }
  /* Control block at the head of each document */
  .doc-control{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
    gap:14px clamp(20px,3vw,36px);
    padding:18px 20px;
    margin:8px 0 22px;
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    background:var(--surface-alt);
  }
  .doc-control div{min-width:0;}
  .doc-control dt{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:5px;
  }
  .doc-control dd{
    margin:0;
    font-size:13px;
    color:var(--text);
    line-height:1.45;
  }
  .doc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}

  /* Footer legal disclosure line */
  .foot-reg{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid rgba(244,217,181,.18);
    font-size:12px;
    line-height:1.6;
    color:var(--cream-deep);
    opacity:.8;
  }
  .foot-reg .k{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--gold-light);
    margin-bottom:6px;
    opacity:.9;
  }

  /* ---- Theme toggle ----------------------------------------------------
     One SVG that morphs between sun and moon: a mask circle slides across
     the disc to bite a crescent out of it while the rays retract. */
  .theme-toggle{
    flex:0 0 auto;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0;
    background:none;
    border:1px solid var(--line);
    border-radius:50%;
    cursor:pointer;
    color:var(--maroon-700);
    transition:color .3s ease, border-color .3s ease, background-color .3s ease;
  }
  .theme-toggle:hover{border-color:var(--gold);color:var(--gold);}
  .theme-toggle svg{width:19px;height:19px;overflow:visible;}
  .theme-toggle .disc{
    fill:currentColor;
    transition:transform .45s cubic-bezier(.22,1,.36,1);
    transform-origin:center;
  }
  .theme-toggle .cutout{
    fill:#000;
    transform:translate(26px,-14px);
    transition:transform .45s cubic-bezier(.22,1,.36,1);
  }
  .theme-toggle .rays{
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    transform-origin:center;
    transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  }
  /* Moon state: the cutout slides in, the disc shrinks a touch, rays fold away */
  :root[data-theme="dark"] .theme-toggle .cutout,
  :root:not([data-theme="light"]) .theme-toggle .cutout{transform:translate(7px,-6px);}
  :root[data-theme="dark"] .theme-toggle .rays,
  :root:not([data-theme="light"]) .theme-toggle .rays{opacity:0;transform:scale(.35) rotate(-45deg);}
  :root[data-theme="dark"] .theme-toggle .disc,
  :root:not([data-theme="light"]) .theme-toggle .disc{transform:scale(1.18);}
  /* In a light-preference OS, undo the moon unless dark is explicitly chosen */
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]) .theme-toggle .cutout{transform:translate(26px,-14px);}
    :root:not([data-theme="dark"]) .theme-toggle .rays{opacity:1;transform:none;}
    :root:not([data-theme="dark"]) .theme-toggle .disc{transform:none;}
  }
  :root[data-theme="light"] .theme-toggle .cutout{transform:translate(26px,-14px);}
  :root[data-theme="light"] .theme-toggle .rays{opacity:1;transform:none;}
  :root[data-theme="light"] .theme-toggle .disc{transform:none;}
  @media(prefers-reduced-motion:reduce){
    .theme-toggle .disc,.theme-toggle .cutout,.theme-toggle .rays{transition:none;}
  }

  /* ===== Mobile navigation (hamburger + dropdown menu) ===== */
  .hamburger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px;
    height:40px;
    background:none;
    border:1px solid var(--line);
    border-radius:var(--btn-radius);
    cursor:pointer;
    padding:0;
    flex-shrink:0;
  }
  .hamburger span{
    display:block;
    width:20px;
    height:2px;
    margin:0 auto;
    background:var(--maroon-700);
    transition:transform .2s ease, opacity .2s ease;
  }
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:8px var(--container-pad) 22px;
    box-shadow:0 18px 34px -20px var(--shadow);
    z-index:90;
  }
  .mobile-menu.open{display:flex;animation:fade .18s ease;}
  .mobile-menu a{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--ink);
    padding:14px 2px;
    border-bottom:1px solid var(--line);
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .mobile-menu a:last-of-type{border-bottom:none;}
  .mobile-menu a.active, .mobile-menu a:hover{color:var(--maroon-700);}
  .mobile-menu .btn{margin-top:14px;width:100%;}

  /* ===== Page shell ===== */
  .page{display:none;}
  .page.active{display:block;animation:fade .25s ease;}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  section{padding:clamp(48px,8vw,80px) var(--container-pad);}
  .narrow{max-width:var(--content-max);margin:0 auto;}
  h2.section-title{font-size:clamp(24px,3.2vw,34px);font-weight:600;color:var(--maroon-700);margin:0 0 16px;line-height:1.25;}
  p.lede{font-size:clamp(15px,1.6vw,17px);color:var(--ink-soft);line-height:1.7;max-width:min(64ch,100%);}
  hr.gold{border:none;border-top:1px solid var(--line);margin:0;}

  /* ===== Hero (page 1) ===== */
  /* Hero: photograph at the top, dissolving into the page colour by the
     bottom edge, so there is no hard seam between image and content. */
  .hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:var(--surface-alt);
    margin-top:calc(-1 * var(--header-h));
    padding:calc(var(--header-h) + clamp(56px,10vw,100px)) var(--container-pad) clamp(48px,8vw,90px);
    border-bottom:none;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background-image:url('/assets/img/hero-light.webp');
    background-size:cover;
    background-position:center 38%;
    filter:saturate(1.06) contrast(1.04);
  }
  /* Light mode: a warm white wash keeps the dark hero type readable and
     carries the image down into the page background. */
  /* Light mode needs two washes, not one. A flat white veil strong enough
     to carry dark text also erases the photograph. Instead: a horizontal
     wash that protects the left-hand text column, and a much lighter
     vertical one that only handles the dissolve into the page. The right
     side of the frame stays close to the original image. */
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
      linear-gradient(to right,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.80) 32%,
        rgba(255,255,255,.34) 62%,
        rgba(255,255,255,.10) 100%),
      linear-gradient(to bottom,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,.06) 40%,
        rgba(247,246,246,.80) 84%,
        var(--surface-alt) 100%);
  }
  .hero h1{
    font-size:clamp(30px,5.2vw,52px);
    line-height:1.18;
    font-weight:600;
    color:var(--ink);
    margin:0 0 26px;
    /* The explicit <br> tags already set the three lines; the cap only needs
       to clear the longest of them ("Strengthening governance." at 25
       characters) so it never wraps a second time. */
    max-width:26ch;
    overflow-wrap:break-word;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--maroon-700);
    font-weight:600;
  }
  .hero .lede{margin-bottom:36px;}
  .hero .cta-row{display:flex;flex-wrap:wrap;gap:16px;}

  /* ===== Cards / grids ===== */
  /* Three cards read best as a true 3-up; auto-fit was dropping to an
     awkward 2 + 1 at laptop widths. */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);margin-top:44px;max-width:1240px;}
  @media(max-width:900px){.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));}}

  /* ---- Revenue-stream cards -------------------------------------------
     Outer .stream-card keeps overflow visible so the leaves can break out
     of the frame; the inner .sc-inner clips the photo to the radius. */
  .stream-card{
    position:relative;
    isolation:isolate;
    background:none;
    border:none;
    padding:0;
    overflow:visible;
  }
  .sc-inner{
    position:relative;
    z-index:1;
    aspect-ratio:3/4;
    border-radius:16px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:26px 26px 28px;
    background:var(--burgundy-deep);
    box-shadow:0 14px 34px -20px var(--shadow);
    transition:box-shadow .45s ease, transform .45s ease;
  }
  /* Photo layer: desaturated and dark at rest, full colour on hover */
  .sc-media{
    position:absolute;
    inset:0;
    z-index:-2;
    background-size:cover;
    background-position:center;
    /* Fallback if a card photo is missing: a burgundy field rather than
       an empty box, so cards 02/03 still look intentional pre-artwork. */
    background-color:var(--burgundy-deep);
    filter:grayscale(1) brightness(.42) contrast(1.05);
    transform:scale(1.04);
    transition:filter .55s ease, transform .55s ease;
  }
  /* Burgundy wash that deepens on hover so white text stays readable */
  .sc-inner::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(to top,rgba(29,29,30,.92) 0%,rgba(29,29,30,.45) 45%,rgba(29,29,30,.15) 100%);
    transition:background .55s ease;
  }
  .stream-card .num{
    font-family:'Playfair Display',serif;
    font-size:clamp(38px,4vw,54px);
    line-height:1;
    color:var(--white);
    font-weight:600;
    margin:0;
    text-shadow:0 2px 14px rgba(0,0,0,.4);
  }
  .sc-text{position:relative;}
  .stream-card h3,.svc-card h3,h2.section-title{overflow-wrap:break-word;}
  .stream-card h3{
    font-family:'Playfair Display',serif;
    font-size:clamp(24px,2.4vw,31px);
    line-height:1.12;
    margin:0 0 14px;
    color:var(--white);
    text-shadow:0 2px 14px rgba(0,0,0,.4);
  }
  .sc-rule{
    display:block;
    height:2px;
    width:100%;
    background:var(--gold);
    transform-origin:left;
    transition:width .45s ease;
  }
  .stream-card p{
    font-size:14px;
    color:rgba(255,255,255,.9);
    line-height:1.6;
    margin:0;
    /* Collapsed at rest; expanding it pushes the title and rule upward,
       which is the "text moves up to reveal body copy" effect. */
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(8px);
    transition:max-height .5s ease, opacity .4s ease .1s, transform .5s ease, padding-top .5s ease;
  }
  /* ---- Leaves: sit behind the card and push outward on hover ---------- */
  .sc-leaf{
    position:absolute;
    z-index:0;
    width:min(44%,150px);
    max-width:210px;
    pointer-events:none;
    opacity:0;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
    transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .45s ease;
  }
  .sc-leaf.l{left:-6%;top:-4%;transform:translate(14%,16%) rotate(-12deg) scale(.82);}
  .sc-leaf.r{right:-6%;top:-7%;transform:translate(-14%,18%) rotate(18deg) scale(.82) scaleX(-1);}

  /* Hover state, only where hovering actually exists */
  @media(hover:hover){
    .stream-card:hover .sc-inner{transform:translateY(-4px);box-shadow:0 26px 50px -26px var(--shadow);}
    .stream-card:hover .sc-media{filter:grayscale(0) brightness(.72) contrast(1);transform:scale(1);}
    .stream-card:hover .sc-inner::after{
      background:linear-gradient(to top,rgba(119,5,35,.94) 0%,rgba(83,19,30,.72) 50%,rgba(29,29,30,.35) 100%);
    }
    .stream-card:hover p{max-height:240px;opacity:1;transform:translateY(0);padding-top:14px;}
    .stream-card:hover .sc-leaf{opacity:1;}
    .stream-card:hover .sc-leaf.l{transform:translate(-30%,-26%) rotate(-26deg) scale(1);}
    .stream-card:hover .sc-leaf.r{transform:translate(30%,-30%) rotate(30deg) scale(1) scaleX(-1);}
  }
  /* Touch devices have no hover, so show the full card by default */
  @media(hover:none){
    .stream-card p{max-height:240px;opacity:1;transform:none;padding-top:14px;}
    .stream-card .sc-leaf{opacity:1;}
    .stream-card .sc-media{filter:grayscale(0) brightness(.6);}
  }
  @media(prefers-reduced-motion:reduce){
    .sc-inner,.sc-media,.sc-leaf,.stream-card p,.sc-inner::after{transition:none;}
  }

  .tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
  .tag-chip{
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    letter-spacing:.04em;
    padding:8px 15px;
    background:var(--champagne);
    color:var(--burgundy);
    border:1px solid transparent;
    border-radius:var(--btn-radius);
  }

  /* Deliverables grid: icon + label + one-line description, replacing the
     bare chip row. Auto-fit so 7 items reflow cleanly at every width. */
  .deliv-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
    grid-auto-rows:1fr;
    gap:4px 36px;
    margin-top:34px;
  }
  .deliv-item{
    height:100%;
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:18px 16px 18px 0;
    border-top:1px solid var(--line);
  }
  .deliv-item .ico{
    flex:0 0 auto;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-card);
    background:var(--champagne);
    color:var(--burgundy);
  }
  .deliv-item .ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .deliv-item h4{
    font-family:'Inter',sans-serif;
    font-size:14.5px;
    font-weight:600;
    color:var(--maroon-700);
    margin:2px 0 5px;
    line-height:1.3;
  }
  .deliv-item p{
    font-size:12.5px;
    color:var(--ink-soft);
    line-height:1.55;
    margin:0;
  }
  @media(max-width:520px){
    .deliv-grid{gap:0;}
  }

  /* ---- Client segments -------------------------------------------------
     Each segment carries a short line on what it typically needs. Hover
     fills the tile with burgundy, echoing the revenue cards without
     repeating their layout. */
  /* Deliverables reveal: the text slides in from the left first, then the
     icon tile pops in a beat later with a slight overshoot. */
  .deliv-item.reveal > div{
    opacity:0;
    transform:translateX(-30px);
  }
  .deliv-item.reveal .ico{
    opacity:0;
    transform:scale(.3);
  }
  .deliv-item.reveal.in > div{
    opacity:1;
    transform:none;
    transition:opacity .45s ease var(--d,0ms), transform .55s cubic-bezier(.22,1,.36,1) var(--d,0ms);
  }
  .deliv-item.reveal.in .ico{
    opacity:1;
    transform:scale(1);
    /* back-out easing gives the pop; the delay lets the text land first */
    transition:opacity .25s ease calc(var(--d,0ms) + 220ms),
               transform .45s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0ms) + 220ms);
  }
  @media(prefers-reduced-motion:reduce){
    .deliv-item.reveal > div,.deliv-item.reveal .ico,
    .deliv-item.reveal.in > div,.deliv-item.reveal.in .ico{
      opacity:1;transform:none;transition:none;
    }
  }

  .seg-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));
    /* grid-auto-rows:1fr sizes every row to the tallest item in the grid,
       so cards match the biggest one rather than only matching their own
       row. Cards stretch to fill their cell by default. */
    grid-auto-rows:1fr;
    gap:14px;
    margin-top:32px;
  }
  /* Segment tiles: a restrained rise with a barely-there scale. Slower and
     shallower than the service cards, so the page doesn't read as the same
     motion three times over. */
  .seg-card.reveal{
    opacity:0;
    transform:translateY(14px) scale(.985);
  }
  .seg-card.reveal.in{
    opacity:1;
    transform:none;
    transition:opacity .62s ease var(--d,0ms),
               transform .7s cubic-bezier(.22,1,.36,1) var(--d,0ms),
               background-color .3s ease,
               border-color .3s ease;
  }
  @media(prefers-reduced-motion:reduce){
    .seg-card.reveal,.seg-card.reveal.in{opacity:1;transform:none;transition:none;}
  }

  /* Glass: the tiles sit over the decorative wave, so a translucent fill
     plus a backdrop blur lets it read faintly through them. The inset
     highlight on the top edge is what stops it looking like plain opacity. */
  .seg-card{
    position:relative;
    height:100%;
    border:1px solid rgba(29,29,30,.10);
    border-radius:var(--radius-card);
    padding:22px 22px 24px;
    background:rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(14px) saturate(1.35);
    backdrop-filter:blur(14px) saturate(1.35);
    box-shadow:0 1px 0 rgba(255,255,255,.65) inset,
               0 10px 26px -18px var(--shadow);
    transition:background-color .3s ease, border-color .3s ease,
               transform .3s ease, box-shadow .3s ease;
  }
  /* Without backdrop-filter a translucent panel just looks washed out */
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .seg-card{background:var(--surface-card);border-color:var(--line);}
  }
  /* Soft crimson halo bleeding past the card edge. Sits behind the tile on
     its own layer so it can blur without touching the content. */
  /* Content sits above the card's own background layers */
  .seg-card h3,.seg-card p{position:relative;z-index:1;}

  .seg-card h3{
    font-family:'Playfair Display',serif;
    font-size:18px;
    line-height:1.25;
    color:var(--maroon-700);
    margin:0 0 8px;
    transition:color .3s ease;
  }
  .seg-card p{
    font-size:12.5px;
    line-height:1.6;
    color:var(--ink-soft);
    margin:0;
    transition:color .3s ease;
  }
  @media(hover:hover){
    .seg-card:hover{
      /* Stays translucent on hover so the glass reads as tinted, not swapped */
      background:color-mix(in srgb, var(--burgundy) 88%, transparent);
      /* Thin gold outline. The extra hairline is drawn with box-shadow
         rather than by thickening the border, so the card does not shift
         by a pixel as the outline appears. */
      border-color:var(--gold);
      transform:translateY(-3px);
      box-shadow:0 1px 0 rgba(255,255,255,.18) inset,
                 0 0 0 1px rgba(210,147,42,.5),
                 0 18px 34px -20px var(--shadow);
    }
    /* Brand gold sits at 4.34:1 on the burgundy hover fill, just under the
       threshold, and this title is fractionally below the large-text
       exemption. One step brighter clears it and still reads as the gold. */
    .seg-card:hover h3{color:#DCA23C;}
    .seg-card:hover p{color:rgba(255,255,255,.88);}
  }
  @media(prefers-reduced-motion:reduce){
    .seg-card,.seg-card h3,.seg-card p{transition:none;}
  }

  /* No fill: the band sits on the page surface, so its type uses the normal
     page colours rather than the on-burgundy set. */
  .cta-banner{
    background:none;
    color:var(--text);
    padding:clamp(48px,8vw,70px) var(--container-pad);
    text-align:center;
  }
  .cta-banner h2{color:var(--maroon-700);font-size:clamp(22px,3vw,30px);margin:0 0 14px;}
  .cta-banner p{color:var(--ink-soft);max-width:560px;margin:0 auto 30px;font-size:15.5px;line-height:1.7;}

  /* ===== Services page ===== */
  .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));grid-auto-rows:1fr;gap:26px;margin-top:46px;}
  /* Flex column + margin-top:auto on the deliverables line pins the dashed
     rule and its italic list to the bottom of every card, so they align
     across a row regardless of how long each description runs. */
  .svc-card{
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:26px 24px;
    background:var(--surface-card);
    box-shadow:0 2px 10px -6px var(--shadow);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  /* Entrance: cards start slightly low and faded, then settle as they
     scroll into view. JS adds .in and staggers the delay per card. */
  .svc-card.reveal{opacity:0;transform:translateY(18px);}
  .svc-card.reveal.in{opacity:1;transform:none;transition:opacity .5s ease var(--d,0ms),transform .5s cubic-bezier(.22,1,.36,1) var(--d,0ms),box-shadow .3s ease,border-color .3s ease;}
  @media(hover:hover){
    .svc-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 34px -18px var(--shadow);
      border-color:var(--gold);
    }
    .svc-card:hover h3{color:var(--gold);}
  }
  .svc-card h3{transition:color .3s ease;}
  @media(prefers-reduced-motion:reduce){
    .svc-card,.svc-card.reveal,.svc-card.reveal.in{transition:none;opacity:1;transform:none;}
  }
  .svc-card h3{font-size:17px;color:var(--maroon-700);margin:0 0 8px;font-family:'Playfair Display',serif;}
  .svc-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 18px;}
  .svc-card .deliv{margin-top:auto;font-size:11.5px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:12px;font-style:italic;line-height:1.55;}

  .quote-box{
    margin-top:60px;
    border-left:3px solid var(--gold);
    padding:8px 0 8px 30px;
  }
  .quote-box p{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(17px,2.2vw,22px);color:var(--maroon-700);line-height:1.5;margin:0;}

  /* ===== Approach page ===== */
  /* ---- Approach timeline ------------------------------------------------
     Single column: the sequence is a line drawing itself downward, which a
     two-column layout can't express. Each step owns the line SEGMENT that
     runs from its own circle to the next one, so the line always lands
     exactly on a circle rather than relying on guessed percentages.

     Per step i, everything hangs off one delay (--i * 0.5s):
       0.00s  the segment above has just landed -> circle pulses
       0.12s  step label and heading slide out from the circle
       0.30s  body copy fades up
       0.00s  this step's own segment starts drawing toward the next
  */
  .timeline{margin-top:50px;position:relative;padding-left:32px;}
  .t-item{position:relative;padding-bottom:34px;}
  .t-item:last-child{padding-bottom:0;}

  /* Line segment: spans this step and reaches the next circle */
  .t-item::before{
    content:"";
    position:absolute;
    left:-26px;
    top:6px;
    bottom:-6px;
    width:1px;
    background:var(--line);
    transform:scaleY(1);
    transform-origin:top;
  }
  .t-item:last-child::before{display:none;}

  .t-item .marker{
    position:absolute;left:-32px;top:0;width:13px;height:13px;border-radius:50%;
    background:var(--surface);border:2px solid var(--gold);
  }
  .t-item .step-num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:.08em;margin-bottom:4px;}
  .t-item h3{font-size:17px;color:var(--maroon-700);margin:0 0 6px;font-family:'Playfair Display',serif;}
  .t-item p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.6;max-width:min(70ch,100%);}

  /* Armed state: hidden until the section scrolls into view */
  .timeline.seq .t-item::before{transform:scaleY(0);}
  .timeline.seq .t-item .marker{transform:scale(0);}
  .timeline.seq .t-item .step-num,
  .timeline.seq .t-item h3{opacity:0;transform:translateX(-26px);}
  .timeline.seq .t-item p{opacity:0;transform:translateY(6px);}

  /* Playing */
  .timeline.seq.play .t-item::before{
    transform:scaleY(1);
    transition:transform .5s linear calc(var(--i) * .5s);
  }
  .timeline.seq.play .t-item .marker{
    animation:marker-pulse .7s cubic-bezier(.22,1,.36,1) calc(var(--i) * .5s) both;
  }
  .timeline.seq.play .t-item .step-num{
    opacity:1;transform:none;
    transition:opacity .4s ease calc(var(--i) * .5s + .12s),
               transform .5s cubic-bezier(.22,1,.36,1) calc(var(--i) * .5s + .12s);
  }
  .timeline.seq.play .t-item h3{
    opacity:1;transform:none;
    transition:opacity .4s ease calc(var(--i) * .5s + .18s),
               transform .5s cubic-bezier(.22,1,.36,1) calc(var(--i) * .5s + .18s);
  }
  .timeline.seq.play .t-item p{
    opacity:1;transform:none;
    transition:opacity .45s ease calc(var(--i) * .5s + .3s),
               transform .45s ease calc(var(--i) * .5s + .3s);
  }
  /* The circle arrives, overshoots, and throws off a single expanding ring */
  @keyframes marker-pulse{
    0%   {transform:scale(0);  box-shadow:0 0 0 0 rgba(210,147,42,.55);}
    55%  {transform:scale(1.35);box-shadow:0 0 0 7px rgba(210,147,42,0);}
    100% {transform:scale(1);  box-shadow:0 0 0 0 rgba(210,147,42,0);}
  }
  @media(prefers-reduced-motion:reduce){
    .timeline.seq .t-item::before,.timeline.seq .t-item .marker,
    .timeline.seq .t-item .step-num,.timeline.seq .t-item h3,.timeline.seq .t-item p{
      transform:none;opacity:1;animation:none;transition:none;
    }
    .timeline.seq .t-item::before{transform:scaleY(1);}
  }


  /* ---- About page -------------------------------------------------------
     The most editorial page on the site. Alternating blocks left large dead
     zones once the artwork came out, so each statement is now a two-column
     row: the word on the left, the statement on the right, separated by a
     hairline. It reads as a formal register of intent, which suits the
     content better than three floating paragraphs. */
  .about-lead{
    max-width:min(62ch,100%);
    margin-bottom:clamp(40px,6vw,72px);
  }
  .about-lead h2{
    font-family:'Playfair Display',serif;
    font-size:clamp(28px,4vw,46px);
    line-height:1.14;
    font-weight:600;
    color:var(--maroon-700);
    margin:0 0 20px;
  }
  .about-lead p{
    font-size:clamp(15px,1.6vw,17.5px);
    line-height:1.75;
    color:var(--ink-soft);
    margin:0;
  }

  .vmp{margin-top:clamp(8px,2vw,20px);}
  .vmp-row{
    display:grid;
    grid-template-columns:minmax(180px,.32fr) 1fr;
    gap:clamp(24px,5vw,72px);
    align-items:start;
    padding:clamp(30px,4vw,46px) 0;
    border-top:1px solid var(--line);
  }
  .vmp-row:last-child{border-bottom:1px solid var(--line);}
  .vmp-row h3{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-weight:600;
    font-size:clamp(26px,3.4vw,40px);
    line-height:1;
    color:var(--maroon-700);
    margin:0;
    position:relative;
  }
  /* A short gold tick against each term, echoing the timeline markers */
  .vmp-row h3::after{
    content:"";
    display:block;
    width:34px;
    height:2px;
    background:var(--gold);
    margin-top:16px;
  }
  .vmp-row p{
    font-size:clamp(15px,1.5vw,16.5px);
    line-height:1.75;
    color:var(--ink-soft);
    margin:0;
    max-width:min(58ch,100%);
  }
  @media(max-width:760px){
    .vmp-row{grid-template-columns:1fr;gap:16px;}
    .vmp-row h3::after{margin-top:12px;}
  }

  /* ---- Values: a list, not another card grid. The site already leans hard
     on cards; a ruled list keeps this page quieter and more document-like. */
  .values-head{
    font-family:'Playfair Display',serif;
    font-size:clamp(22px,2.6vw,30px);
    color:var(--maroon-700);
    margin:clamp(50px,7vw,84px) 0 8px;
  }
  .values-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
    grid-auto-rows:1fr;
    gap:0 clamp(32px,5vw,72px);
    margin-top:26px;
  }
  .value-item{
    height:100%;
    padding:22px 0 22px 20px;
    border-top:1px solid var(--line);
    border-left:2px solid transparent;
    transition:border-left-color .3s ease, padding-left .3s ease;
  }
  .value-item h4{
    font-family:'Playfair Display',serif;
    font-size:17px;
    color:var(--maroon-700);
    margin:0 0 7px;
  }
  .value-item p{
    font-size:13.5px;
    line-height:1.65;
    color:var(--ink-soft);
    margin:0;
    max-width:min(46ch,100%);
  }
  @media(hover:hover){
    .value-item:hover{border-left-color:var(--gold);padding-left:26px;}
  }

  /* Reveal, in the motion language used elsewhere */
  .vmp-row.reveal,.value-item.reveal{opacity:0;transform:translateY(18px);}
  .vmp-row.reveal.in,.value-item.reveal.in{
    opacity:1;transform:none;
    transition:opacity .6s ease var(--d,0ms),
               transform .7s cubic-bezier(.22,1,.36,1) var(--d,0ms),
               border-left-color .3s ease, padding-left .3s ease;
  }
  @media(prefers-reduced-motion:reduce){
    .vmp-row.reveal,.vmp-row.reveal.in,
    .value-item.reveal,.value-item.reveal.in{opacity:1;transform:none;transition:none;}
  }

  .contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px);margin-top:44px;max-width:1180px;}
  form.mock-form{display:flex;flex-direction:column;gap:18px;}
  .field label{
    display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--maroon-700);margin-bottom:7px;
  }
  .field input, .field select, .field textarea{
    width:100%;min-height:44px;border:1px solid var(--line);border-radius:var(--radius-field);padding:12px 14px;font-family:'Inter',sans-serif;
    font-size:16px;color:var(--text);background:var(--surface-card);outline:none;transition:border-color .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--gold);}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .field{min-width:0;}

  .contact-panel{border-left:1px solid var(--line);padding-left:44px;}
  .contact-panel .ci{margin-bottom:26px;}
  .contact-panel .ci .k{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
  .contact-panel .ci .v{font-size:14.5px;color:var(--ink);}
  .ci-link{
    color:inherit;
    border-bottom:1px solid var(--line-gold);
    padding-bottom:1px;
    transition:color .2s ease, border-color .2s ease;
  }
  .ci-link:hover,.ci-link:focus-visible{color:var(--gold);border-bottom-color:var(--gold);}

  .form-status{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    letter-spacing:.03em;
    padding:12px 16px;
    border:1px solid var(--line);
    border-radius:var(--radius-field);
    display:none;
  }
  .form-status.show{display:block;}
  .form-status.success{border-color:var(--gold);color:var(--burgundy);background:var(--surface-alt);}
  .form-status.error{border-color:#B4453F;color:#B4453F;background:#FBF0EF;}
  .field.honeypot{position:absolute;left:-9999px;top:-9999px;}

  /* ===== Site footer ===== */
  footer.site-footer{
    /* Deep burgundy #53131E */
    background:var(--burgundy-deep);
    color:var(--cream-deep);
    padding:clamp(36px,6vw,56px) var(--container-pad) clamp(20px,3vw,28px);
  }
  .foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(244,217,181,.25);}
  .foot-brand .logo-svg{color:var(--gold-light);}
  .foot-brand p{font-size:12.5px;color:var(--cream-deep);opacity:.75;max-width:280px;margin-top:16px;line-height:1.6;}
  .foot-col h5{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--gold-light);margin:0 0 16px;
  }
  .foot-col a, .foot-col .foot-text{display:block;font-size:13px;color:var(--cream-deep);opacity:.85;margin-bottom:10px;}
  .foot-col a{transition:color .2s ease, opacity .2s ease;}
  .foot-col a:hover,.foot-col a:focus-visible{color:var(--gold);opacity:1;}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-top:22px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.58);}

  /* Footer: the wrap leaves a lone column stranded on its own row at
     phone widths, so stack the groups into a single column instead. */
  @media(max-width:700px){
    .foot-top{
      flex-direction:column;
      flex-wrap:nowrap;
      gap:30px;
      padding-bottom:30px;
    }
    .foot-brand p{max-width:none;}
    .foot-col h5{margin-bottom:12px;}
    .foot-col a,.foot-col .foot-text{margin-bottom:8px;}
    .foot-bottom{flex-direction:column;gap:10px;line-height:1.6;}
  }

  /* Collapse to hamburger before the desktop nav can collide with the logo/CTA button
     (measured to avoid overlap through the 1024–1180px laptop/tablet-landscape range) */
  @media(max-width:1200px){
    nav.main-nav{display:none;}
    .hamburger{display:flex;}
  }
  /* Hide the header's full-width CTA label on narrow phones; it remains in the mobile menu */
  @media(max-width:600px){
    .header-cta{display:none;}
  }
  /* Stack layouts that are only comfortable as two columns from tablet width up */
  @media(max-width:880px){
    .contact-grid{grid-template-columns:1fr;gap:40px;}
    .contact-panel{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:32px;}
  }
  /* Small mobile: stack paired form fields for comfortable touch input */
  @media(max-width:480px){
    .field-row{grid-template-columns:1fr;}
    .cta-row{flex-direction:column;align-items:stretch;}
  }

  /* ================= DARK MODE ==================================
     Placed last so these rules win the cascade against the light
     rules above (same specificity = source order decides).

     The guide's ratio inverts here. Charcoal becomes the 60% neutral
     foundation, so burgundy can no longer hold 25% as flat fill: it
     drops to roughly 15%, used for the CTA band, footer and buttons.
     Champagne rises to about 20% and carries headings and accents,
     because burgundy text on charcoal is unreadable. Gold holds 5%.
     Per the guide, the logo becomes the WHITE mark on charcoal. */
  /* Dark theme. Applied when the OS asks for it AND the visitor has not
     explicitly chosen light, or whenever they explicitly choose dark. */
  @media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
      /* Foundation: charcoal, with each surface a visible step lighter
         so cards separate from the page instead of merging into it. */
      --surface:#1D1D1E;
      --surface-alt:#252527;
      --surface-card:#2C2C2F;

      /* --ink is the text colour throughout, so it must invert */
      --ink:#F2F0ED;
      --ink-soft:#B4B1AD;
      --text:#F2F0ED;
      --text-soft:#B4B1AD;

      /* Headings/links: champagne replaces burgundy, which is
         illegible at this size on charcoal */
      --maroon-700:var(--champagne);
      --maroon-600:var(--champagne);

      /* Burgundy still fills bands and buttons, lifted for contrast */
      --burgundy:#8E0B2C;
      --maroon-900:#53131E;

      --line:rgba(244,217,181,.18);
      --shadow:rgba(0,0,0,.6);
      --btn-disabled-bg:#333336;
      --btn-disabled-text:#8B888D;
    }:root:not([data-theme="light"]) /* Guide: white master artwork on charcoal fields */
    .logo-svg{color:var(--white);}:root:not([data-theme="light"]) /* Body copy sits on charcoal, :root:not([data-theme="light"]) so lighten rather than inherit ink */
    :root:not([data-theme="light"]) p.lede, :root:not([data-theme="light"]) .stream-card p, :root:not([data-theme="light"]) .svc-card p, :root:not([data-theme="light"]) .t-item p, :root:not([data-theme="light"]) .value-item p, :root:not([data-theme="light"]) .vmp-row p{color:var(--text-soft);}:root:not([data-theme="light"]) .svc-card .deliv{color:var(--text-soft);}:root:not([data-theme="light"]) .seg-card p{color:var(--text-soft);}
    :root:not([data-theme="light"]) .seg-card{
      background:rgba(255,255,255,.055);
      border-color:rgba(244,217,181,.14);
      box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
                 0 10px 26px -18px rgba(0,0,0,.6);
    }:root:not([data-theme="light"]) /* Outlined button: champagne outline reads better than burgundy */
    .btn{color:var(--champagne);border-color:var(--champagne);background:transparent;}:root:not([data-theme="light"]) .btn-solid{background:var(--burgundy);border-color:var(--burgundy);color:var(--white);}:root:not([data-theme="light"]) .hamburger span{background:var(--champagne);}
    :root:not([data-theme="light"]) .theme-toggle{color:var(--champagne);}
    :root:not([data-theme="light"]) .nav-drop a:hover,:root:not([data-theme="light"]) .nav-drop a.active{color:var(--champagne);}:root:not([data-theme="light"]) /* Chips: champagne at low alpha, :root:not([data-theme="light"]) not a solid champagne slab */
    .tag-chip{background:rgba(244,217,181,.13);color:var(--champagne);}:root:not([data-theme="light"]) .deliv-item .ico{background:rgba(244,217,181,.13);color:var(--champagne);}:root:not([data-theme="light"]) /* The maroon feature cards need a lighter fill on charcoal */
    .svc-card[style*="--maroon-700"]{background:var(--burgundy)!important;border-color:var(--burgundy)!important;}:root:not([data-theme="light"]) .form-status.success{background:var(--surface-alt);color:var(--champagne);}:root:not([data-theme="light"]) .form-status.error{background:#2E1F1F;border-color:#C96A63;color:#E8A9A3;}:root:not([data-theme="light"]) /* Night hero: the dusk photograph, :root:not([data-theme="light"]) dissolving into charcoal */
    .hero::before{background-image:url('/assets/img/hero-dark.webp');filter:none;}:root:not([data-theme="light"]) .hero::after{
      background:linear-gradient(to bottom,
        rgba(29,29,30,.42) 0%,
        rgba(29,29,30,.68) 42%,
        rgba(29,29,30,.92) 78%,
        var(--surface) 100%);
    }:root:not([data-theme="light"]) .hero{background:var(--surface);}:root:not([data-theme="light"]) .site-header{background:color-mix(in srgb, var(--surface) 62%, transparent);}:root:not([data-theme="light"]){--wave-color:#8E0B2C;--wave-opacity:.30;}:root:not([data-theme="light"]) /* Keep the two burgundy bands at their brand values in dark mode;
       --burgundy is lifted globally for text contrast, :root:not([data-theme="light"]) which would make
       the CTA band brighter than intended. */
    :root:not([data-theme="light"]) footer.site-footer{background:#53131E;}
  
  }

  /* Same rules again, driven by the manual toggle */
:root[data-theme="dark"]{
      /* Foundation: charcoal, with each surface a visible step lighter
         so cards separate from the page instead of merging into it. */
      --surface:#1D1D1E;
      --surface-alt:#252527;
      --surface-card:#2C2C2F;

      /* --ink is the text colour throughout, so it must invert */
      --ink:#F2F0ED;
      --ink-soft:#B4B1AD;
      --text:#F2F0ED;
      --text-soft:#B4B1AD;

      /* Headings/links: champagne replaces burgundy, which is
         illegible at this size on charcoal */
      --maroon-700:var(--champagne);
      --maroon-600:var(--champagne);

      /* Burgundy still fills bands and buttons, lifted for contrast */
      --burgundy:#8E0B2C;
      --maroon-900:#53131E;

      --line:rgba(244,217,181,.18);
      --shadow:rgba(0,0,0,.6);
      --btn-disabled-bg:#333336;
      --btn-disabled-text:#8B888D;
    }:root[data-theme="dark"] /* Guide: white master artwork on charcoal fields */
    .logo-svg{color:var(--white);}:root[data-theme="dark"] /* Body copy sits on charcoal, :root[data-theme="dark"] so lighten rather than inherit ink */
    :root[data-theme="dark"] p.lede, :root[data-theme="dark"] .stream-card p, :root[data-theme="dark"] .svc-card p, :root[data-theme="dark"] .t-item p, :root[data-theme="dark"] .value-item p, :root[data-theme="dark"] .vmp-row p{color:var(--text-soft);}:root[data-theme="dark"] .svc-card .deliv{color:var(--text-soft);}:root[data-theme="dark"] .seg-card p{color:var(--text-soft);}
    :root[data-theme="dark"] .seg-card{
      background:rgba(255,255,255,.055);
      border-color:rgba(244,217,181,.14);
      box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
                 0 10px 26px -18px rgba(0,0,0,.6);
    }:root[data-theme="dark"] /* Outlined button: champagne outline reads better than burgundy */
    .btn{color:var(--champagne);border-color:var(--champagne);background:transparent;}:root[data-theme="dark"] .btn-solid{background:var(--burgundy);border-color:var(--burgundy);color:var(--white);}:root[data-theme="dark"] .hamburger span{background:var(--champagne);}
:root[data-theme="dark"] .btn-text{color:var(--champagne);}
:root[data-theme="dark"] .doc-meta{color:var(--text-soft);}
:root[data-theme="dark"] .theme-toggle{color:var(--champagne);}
:root[data-theme="dark"] .nav-drop a:hover,:root[data-theme="dark"] .nav-drop a.active{color:var(--champagne);}:root[data-theme="dark"] /* Chips: champagne at low alpha, :root[data-theme="dark"] not a solid champagne slab */
    .tag-chip{background:rgba(244,217,181,.13);color:var(--champagne);}:root[data-theme="dark"] .deliv-item .ico{background:rgba(244,217,181,.13);color:var(--champagne);}:root[data-theme="dark"] /* The maroon feature cards need a lighter fill on charcoal */
    .svc-card[style*="--maroon-700"]{background:var(--burgundy)!important;border-color:var(--burgundy)!important;}:root[data-theme="dark"] .form-status.success{background:var(--surface-alt);color:var(--champagne);}:root[data-theme="dark"] .form-status.error{background:#2E1F1F;border-color:#C96A63;color:#E8A9A3;}:root[data-theme="dark"] /* Night hero: the dusk photograph, :root[data-theme="dark"] dissolving into charcoal */
    .hero::before{background-image:url('/assets/img/hero-dark.webp');filter:none;}:root[data-theme="dark"] .hero::after{
      background:linear-gradient(to bottom,
        rgba(29,29,30,.42) 0%,
        rgba(29,29,30,.68) 42%,
        rgba(29,29,30,.92) 78%,
        var(--surface) 100%);
    }:root[data-theme="dark"] .hero{background:var(--surface);}:root[data-theme="dark"] .site-header{background:color-mix(in srgb, var(--surface) 62%, transparent);}:root[data-theme="dark"]{--wave-color:#8E0B2C;--wave-opacity:.30;}:root[data-theme="dark"] /* Keep the two burgundy bands at their brand values in dark mode;
       --burgundy is lifted globally for text contrast, :root[data-theme="dark"] which would make
       the CTA band brighter than intended. */
    :root[data-theme="dark"] footer.site-footer{background:#53131E;}

  /* ---- Dark-theme button hover / active -------------------------------
     The dark theme styles resting buttons as `:root:not([data-theme="light"])
     .btn` — specificity (0,3,0) — which outranks the base `.btn:hover` at
     (0,2,0). Hover and active therefore never painted in dark mode. These
     rules restore them at (0,4,0). They must stay AFTER the dark blocks
     above; if this file is regenerated, re-add them. */
  :root:not([data-theme="light"]) .btn:hover,
  :root[data-theme="dark"] .btn:hover,
  :root:not([data-theme="light"]) .btn-solid:hover,
  :root[data-theme="dark"] .btn-solid:hover,
  :root:not([data-theme="light"]) .btn-ghost-light:hover,
  :root[data-theme="dark"] .btn-ghost-light:hover{
    background:var(--btn-hover-gold);
    border-color:var(--btn-hover-gold);
    color:var(--maroon-900);
  }
  :root:not([data-theme="light"]) .btn:active,
  :root[data-theme="dark"] .btn:active,
  :root:not([data-theme="light"]) .btn-solid:active,
  :root[data-theme="dark"] .btn-solid:active,
  :root:not([data-theme="light"]) .btn-ghost-light:active,
  :root[data-theme="dark"] .btn-ghost-light:active{
    background:var(--btn-pressed-gold);
    border-color:var(--btn-pressed-gold);
    color:var(--maroon-900);
  }
  /* Disabled buttons must not pick up the hover fill. */
  :root:not([data-theme="light"]) .btn:disabled:hover,
  :root[data-theme="dark"] .btn:disabled:hover,
  :root:not([data-theme="light"]) .btn[aria-disabled="true"]:hover,
  :root[data-theme="dark"] .btn[aria-disabled="true"]:hover{
    background:var(--btn-disabled-bg);
    border-color:var(--btn-disabled-bg);
    color:var(--btn-disabled-text);
  }


/* ===========================================================================
   Local style fixes, appended to the extracted stylesheet by build.js.
   Kept out of src/index.html deliberately: that file is regenerated and pasted
   in wholesale, so anything written into it is lost on the next round.
   =========================================================================== */

/* ---- Make position:sticky work at all -------------------------------------
   html and body carry overflow-x:hidden (to contain the decorative wave, which
   bleeds past the viewport). `hidden` establishes a scroll container, and a
   sticky element inside one sticks to that container rather than the viewport
   — which silently does nothing. `clip` gives the same overflow containment
   without creating a scroll container, so sticky works again. */
html,
body {
  overflow-x: clip;
}

/* ---- Legal document sidebar ----------------------------------------------
   The aside was position:sticky with a max-height and overflow-y:auto, so the
   whole sidebar scrolled inside itself and showed its own scrollbar. It now
   scrolls with the page like ordinary content, and only the contents list is
   pinned. */
.doc-aside {
  position: static;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}

@media (min-width: 981px) {
  /* display:contents promotes the aside's children to grid items, which lets
     the contents list take its own right-hand column without touching the
     markup. Scoped away from .no-aside, which still needs display:none. */
  .doc-layout:not(.no-aside) > .doc-aside { display: contents; }

  .doc-layout:not(.no-aside),
  .doc-layout.wide:not(.no-aside) {
    grid-template-columns: minmax(200px, 270px) minmax(0, 1fr) minmax(190px, 230px);
    column-gap: clamp(24px, 3vw, 56px);
  }

  /* All three share row 1. Without an explicit row the auto-placement
     algorithm pushes .doc-main to row 2, because the contents list precedes it
     in source order and already occupies column 3. That also collapses the
     contents list's grid area to its own height, leaving sticky no room to
     travel — which is why it must be stated rather than left to auto. */
  .doc-layout:not(.no-aside) > .doc-aside > .doc-control-panel { grid-column: 1; grid-row: 1; }
  .doc-layout:not(.no-aside) > .doc-main { grid-column: 2; grid-row: 1; }

  /* Contents: right column, pinned below the header while the body scrolls. */
  .doc-layout:not(.no-aside) > .doc-aside > .doc-toc {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    /* Scrolls only if the list is taller than the viewport, and the bar itself
       stays hidden — the visible scrollbar was the thing to remove. */
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .doc-layout:not(.no-aside) > .doc-aside > .doc-toc::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}