/* ========== TYPE ==========
     Self-hosted, same origin, zero third-party font hosts. The subsets are the
     `latin` ones pulled from the Google css2 endpoint on 2026-07-30 by reading
     the real gstatic URL out of the live CSS, never by guessing a hash: a stale
     hash 404s and a 404 reads exactly like "the face does not exist".

     Both Fraunces faces are VARIABLE, not the four statics vendored in
     _lib/fonts/Fraunces/. The page sets font-variation-settings:"opsz" 144 on
     the h1, and the statics carry no optical-size axis, so they would have
     changed every display advance width on the page.

     Jost 400 and 500 are declared as two faces over one file, exactly as Google
     declares them, because that file is the variable face and mirroring the
     declaration is the only way to guarantee identical rendering to the build
     these widths were measured against.

     font-display: swap on all three, on purpose. They are preloaded and same
     origin, so the swap window is a few ms rather than a round trip; `optional`
     would let a cold visit ship without the brand face at all, and `block`
     would hide the h1 behind a font fetch, which is the failure BUILD-PITFALLS
     law 1 is about. main.js still refreshes ScrollTrigger on document.fonts.ready
     because a swap, however short, still moves trigger positions. */
  @font-face{
    font-family:'Fraunces';
    font-style:normal;
    font-weight:300 600;
    font-display:swap;
    src:url("assets/fonts/fraunces-v38-latin-variable.woff2") format("woff2");
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Fraunces';
    font-style:italic;
    font-weight:300 600;
    font-display:swap;
    src:url("assets/fonts/fraunces-v38-latin-italic-variable.woff2") format("woff2");
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Jost';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("assets/fonts/jost-v20-latin-variable.woff2") format("woff2");
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face{
    font-family:'Jost';
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url("assets/fonts/jost-v20-latin-variable.woff2") format("woff2");
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root{
    --paper:#f2e2cd;
    --paper-dim:rgba(242,226,205,.72);
    /* Raised from .38 on 2026-07-30. This is a practice whose patients include
       people over fifty; where legibility fights the art direction, legibility
       wins. .38 measured 3.01:1 against the cocoa ground on 24 painted runs,
       under the 4.5:1 AA floor for the sizes it is used at. */
    --paper-faint:rgba(242,226,205,.62);
    --tan:#d8a87d;
    --tan-ink:#8f5f34;
    --ink:#322718;
    --ink-dim:rgba(50,39,24,.78);
    /* Raised from .44 for the same reason: .44 measured 2.46:1 on cream. */
    --ink-faint:rgba(50,39,24,.68);
    --cta:#f7e8d3;
    --hairline:rgba(242,226,205,.22);
    --hairline-dark:rgba(50,39,24,.16);
    --bg:#2b2016;
    --bg-deep:#211811;
    --cream:#f2e2cd;
    --cream-soft:#ebe0cf;
    --disp:"Fraunces",Georgia,"Times New Roman",serif;
    --sans:"Jost","Helvetica Neue",Arial,sans-serif;
    --pad:clamp(20px,4vw,56px);
    --section-y:clamp(76px,11vw,148px);
    --ease:cubic-bezier(.22,1,.36,1);
    --header-h:88px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--bg);
    color:var(--paper);
    font-family:var(--sans);
    font-weight:400;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
  ul,ol{ margin:0; padding:0; list-style:none; }
  p{ margin:0; }
  h1,h2,h3,h4{ margin:0; font-weight:400; }

  ::selection{ background:var(--tan); color:var(--ink); }
  :focus-visible{ outline:2px solid var(--paper); outline-offset:3px; border-radius:2px; }
  .zone-light :focus-visible, .zone-soft :focus-visible{ outline-color:var(--ink); }

  .skip{
    position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
  }
  .skip:focus{
    position:fixed; left:16px; top:16px; z-index:10000;
    width:auto; min-height:44px; height:auto; padding:14px 18px; box-sizing:border-box;
    background:var(--cta); color:var(--ink); border-radius:999px;
    font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  }

  /* ========== SITE HEADER ========== */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    gap:clamp(16px,2vw,40px);
    padding:clamp(18px,2.4vw,28px) var(--pad);
    transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease), color .35s ease;
    color:var(--paper);
  }
  .site-header.is-scrolled{
    background:rgba(33,24,17,.88);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--hairline);
  }
  .site-header.on-light{
    color:var(--ink);
  }
  .site-header.on-light.is-scrolled{
    background:rgba(242,226,205,.9);
    box-shadow:0 1px 0 var(--hairline-dark);
  }
  .site-header.on-light .nav a{ color:rgba(50,39,24,.62); }
  .site-header.on-light .nav a:hover,
  .site-header.on-light .nav a:focus-visible{ color:var(--ink); }
  .site-header.on-light .nav a::after{ background:var(--ink); }
  .site-header.on-light .btn-ghost{
    border-color:rgba(50,39,24,.35); color:var(--ink);
  }
  .site-header.on-light .btn-ghost:hover,
  .site-header.on-light .btn-ghost:focus-visible{
    background:var(--ink); color:var(--paper); border-color:var(--ink);
  }
  .site-header.on-light .menu-toggle span{ background:var(--ink); }

  /* scroll progress, drawn on the header's own baseline */
  .site-header__prog{
    position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--tan); transform:scaleX(0); transform-origin:left center;
    opacity:0; transition:opacity .4s ease;
  }
  .site-header.is-scrolled .site-header__prog{ opacity:1; }

  /* ========== LOADER ==========
     A calm, centred lockup on the deep cocoa ground: the practice's own mark
     drawing itself stroke by stroke, the wordmark set exactly as it is in the
     header, and a short rule that fills as the page arrives. It leaves by
     lifting straight up off the hero, so the last thing you see is the mark
     settling into the position the header logo already occupies. */
  html.is-loading, html.is-loading body{ overflow:hidden; height:100%; }

  #loader{
    position:fixed; inset:0; z-index:9999; background:var(--bg-deep); color:var(--cream);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(22px,2.6vw,34px); --p:0;
    clip-path:inset(0 0 0 0);
    transition:clip-path .92s var(--ease);
  }
  /* Clipping a full-viewport fixed layer to zero height stops it painting, but
     it stays in the layout, keeps pointer-events:auto and keeps its box over
     the whole page. That is exactly what an occlusion probe reports, and it is
     not a false alarm: the element really is still there. So it is retired
     properly. pointer-events goes immediately, visibility follows on a 0s
     transition delayed by the length of the clip, so the loader is gone the
     frame after it has finished leaving and not one frame before. */
  #loader.is-gone{
    clip-path:inset(0 0 100% 0);
    pointer-events:none;
    visibility:hidden;
    transition:clip-path .92s var(--ease), visibility 0s linear .92s;
  }

  #loader__lock{
    display:flex; flex-direction:column; align-items:center; gap:clamp(18px,2vw,26px);
    transition:opacity .5s ease, transform .8s var(--ease);
  }
  #loader.is-done #loader__lock{ opacity:0; transform:translateY(-10px); }

  #lum-mark{ width:auto; height:clamp(56px,6vw,82px); color:var(--tan); display:block; }
  #lum-mark ellipse, #lum-mark path{
    stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
    animation:lum-draw 1.15s var(--ease) forwards;
  }
  #lum-mark ellipse{ --len:84; }
  #lum-mark path{ --len:26; }
  #lum-mark ellipse:nth-of-type(2){ animation-delay:.12s; }
  #lum-mark path:nth-of-type(1){ animation-delay:.30s; }
  #lum-mark path:nth-of-type(2){ animation-delay:.38s; }
  @keyframes lum-draw{ to{ stroke-dashoffset:0; } }

  #loader__wm{
    font-family:var(--disp); font-weight:400; font-size:clamp(15px,1.35vw,20px);
    letter-spacing:.44em; padding-left:.44em; color:var(--cream);
  }
  #loader__rule{
    width:clamp(150px,17vw,232px); height:1px; background:var(--hairline); position:relative;
  }
  #loader__rule i{
    position:absolute; inset:0; background:var(--tan);
    transform:scaleX(var(--p)); transform-origin:left center; will-change:transform;
  }
  /* the one editorial corner mark against an otherwise symmetric field,
     set in the same italic display face as the traject numeral */
  #loader__n{
    position:absolute; right:clamp(20px,4vw,56px); bottom:clamp(22px,3.4vw,48px);
    font-family:var(--disp); font-style:italic; font-weight:300; line-height:.86;
    font-size:clamp(52px,7vw,104px); color:var(--tan-ink);
    font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  }
  #loader__meta{
    position:absolute; left:clamp(20px,4vw,56px); bottom:clamp(22px,3vw,44px);
    font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--paper-faint);
    line-height:1.9;
  }
  @media (max-width:640px){ #loader__meta{ display:none; } }
  @media (prefers-reduced-motion:reduce){
    #loader{ transition:none; }
    #lum-mark ellipse, #lum-mark path{ animation:none; stroke-dashoffset:0; }
    #loader.is-dismissed{ opacity:0; transition:opacity .25s ease; }
    /* no clip transition here, so the retirement must not be delayed either */
    #loader.is-gone{ transition:none; }
  }

  .logo{ display:inline-flex; align-items:center; gap:14px; color:inherit; flex-shrink:0; min-height:44px; }
  .logo svg{ width:auto; height:40px; color:currentColor; }
  .logo__wm{
    font-family:var(--disp); font-weight:400; font-size:18px;
    letter-spacing:.38em; padding-left:.19em;
  }

  .nav{ display:flex; align-items:center; gap:clamp(20px,2.6vw,40px); }
  /* 44px minimum hit box everywhere. The nav sat at 34px and the footer link
     columns at 19-22px, which is a miss for anyone who is not using a mouse. */
  .nav a{
    position:relative;
    /* min-width as well: at 1024 the tracking tightens and "Over ons" measured
       40.2px wide, so the height alone did not make a 44px box. */
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; min-width:44px;
    font-size:13px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--paper-dim); padding:8px 0;
    transition:color .35s ease;
  }
  .nav a::after{
    content:""; position:absolute; left:0; bottom:8px;
    height:1px; width:100%; background:var(--paper);
    transform:scaleX(0); transform-origin:left;
    transition:transform .35s var(--ease);
  }
  .nav a:hover, .nav a:focus-visible{ color:var(--paper); }
  .nav a:hover::after, .nav a:focus-visible::after{ transform:scaleX(1); }

  .header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }

  .btn-ghost{
    display:inline-flex; align-items:center; gap:12px;
    border:1px solid rgba(242,226,205,.55); border-radius:999px;
    padding:14px 26px; font-size:13px; letter-spacing:.2em;
    text-transform:uppercase; color:inherit; white-space:nowrap;
    transition:background-color .35s ease, color .35s ease, border-color .35s ease;
  }
  .btn-ghost .arw{ transition:transform .35s var(--ease); }
  .btn-ghost:hover, .btn-ghost:focus-visible{
    background:var(--cta); color:var(--ink); border-color:var(--cta);
  }
  .btn-ghost:hover .arw{ transform:translateX(4px); }

  /* Header phone. Full number on wide screens, icon-only from 720px down where
     the header has no room, but always a real 44px target and always a tel:. */
  .btn-tel{
    display:inline-flex; align-items:center; gap:10px;
    min-height:44px; min-width:44px; padding:0 16px;
    border:1px solid currentColor; border-radius:999px;
    font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    color:inherit; white-space:nowrap;
    transition:background-color .35s ease, color .35s ease, border-color .35s ease;
  }
  .btn-tel svg{ width:17px; height:17px; flex-shrink:0; }
  .btn-tel__t b{ font-weight:500; letter-spacing:.08em; }
  .btn-tel:hover, .btn-tel:focus-visible{
    background:var(--cta); color:var(--ink); border-color:var(--cta);
  }
  .site-header.on-light .btn-tel{ border-color:rgba(50,39,24,.35); }
  .site-header.on-light .btn-tel:hover,
  .site-header.on-light .btn-tel:focus-visible{
    background:var(--ink); color:var(--paper); border-color:var(--ink);
  }

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

  .btn-solid{
    display:inline-flex; align-items:center; gap:14px;
    background:var(--cta); color:var(--ink); font-weight:500;
    font-size:13px; letter-spacing:.2em; text-transform:uppercase;
    padding:22px 42px; border-radius:999px;
    transition:transform .35s var(--ease), background .3s ease;
  }
  .btn-solid .arw{ transition:transform .35s var(--ease); }
  .btn-solid:hover, .btn-solid:focus-visible{ transform:translateY(-3px); }
  .btn-solid:hover .arw{ transform:translateX(4px); }

  .btn-ink{ background:var(--ink); color:var(--paper); }
  .btn-ink:hover, .btn-ink:focus-visible{ background:#241c12; }

  .btn-line{
    display:inline-flex; align-items:center; gap:12px;
    border-bottom:1px solid currentColor; padding:13px 0;
    min-height:44px;
    font-size:13px; letter-spacing:.18em; text-transform:uppercase;
    transition:opacity .3s ease;
  }
  .btn-line .arw{ transition:transform .35s var(--ease); }
  .btn-line:hover .arw{ transform:translateX(5px); }

  .menu-toggle{
    display:none; width:44px; height:44px; place-items:center;
    border:1px solid currentColor; border-radius:50%; position:relative;
  }
  .menu-toggle span{
    display:block; width:16px; height:1px; background:currentColor;
    position:absolute; left:50%; transform:translateX(-50%);
    transition:transform .35s var(--ease), opacity .25s ease, top .35s var(--ease);
  }
  .menu-toggle span:nth-child(1){ top:17px; }
  .menu-toggle span:nth-child(2){ top:21px; }
  .menu-toggle span:nth-child(3){ top:25px; }
  .menu-toggle.is-open span:nth-child(1){ top:21px; transform:translateX(-50%) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity:0; }
  .menu-toggle.is-open span:nth-child(3){ top:21px; transform:translateX(-50%) rotate(-45deg); }

  .mobile-nav{
    position:fixed; inset:0; z-index:99;
    background:var(--bg-deep);
    display:flex; flex-direction:column; justify-content:center;
    padding:var(--pad); gap:8px;
    opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .4s var(--ease), visibility .4s;
  }
  .mobile-nav.is-open{ opacity:1; pointer-events:auto; visibility:visible; }
  .mobile-nav a{
    font-family:var(--disp); font-size:clamp(32px,8vw,48px);
    letter-spacing:-.015em; color:var(--paper);
    padding:10px 0; border-bottom:1px solid var(--hairline);
  }
  .mobile-nav a em{ font-style:italic; color:var(--tan); }
  .mobile-nav__cta{ margin-top:28px; align-self:flex-start; }

  /* ========== HERO (unchanged) ========== */
  .hero{
    position:relative; width:100%; min-height:100svh;
    overflow:hidden; isolation:isolate;
  }
  .hero__photo{
    position:absolute; inset:0; z-index:0;
    background-color:#c9a988;
    background-image:url("assets/hero.webp");
    background-repeat:no-repeat; background-size:cover;
    background-position:72% 30%;
    transform-origin:70% 38%; will-change:transform;
  }
  .no-webp .hero__photo{ background-image:url("assets/hero.jpg"); }
  .shade{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(46,35,26,.88) 0%, rgba(46,35,26,.55) 28%, rgba(46,35,26,0) 62%),
      linear-gradient(to top, rgba(38,28,20,.82) 0%, rgba(38,28,20,.35) 26%, rgba(38,28,20,0) 52%),
      linear-gradient(to bottom, rgba(40,30,22,.45) 0%, rgba(40,30,22,0) 22%),
      linear-gradient(rgba(72,54,40,.28), rgba(72,54,40,.28));
  }

  .copy{
    position:relative; z-index:4;
    max-width:640px; margin-left:var(--pad);
    padding-top:clamp(100px,22svh,240px); padding-right:20px;
  }
  .hero__h1{
    margin:0; font-family:var(--disp); font-weight:400;
    font-variation-settings:"opsz" 144;
    font-size:clamp(48px,min(7.2vw,8.3svh),104px);
    line-height:1.03; letter-spacing:-.015em; color:var(--paper);
  }
  .hero__h1 .mask{
    display:block; overflow:hidden;
    padding-bottom:.1em; margin-bottom:-.1em;
  }
  .hero__h1 .ln{ display:inline-block; will-change:transform; }
  .hero__h1 em{ font-style:italic; color:var(--tan); }

  .hero__p{
    margin:30px 0 0; max-width:460px;
    font-size:16.5px; line-height:1.85; color:var(--paper-dim);
  }

  .stats{
    position:absolute; left:0; bottom:0; z-index:4;
    display:flex; align-items:flex-end; gap:clamp(22px,3.3vw,48px);
    padding:0 var(--pad) clamp(28px,4vw,48px);
  }
  .avatars{ display:flex; align-items:center; }
  .avatars .av{
    width:56px; height:56px; border-radius:50%; flex-shrink:0;
    border:2px solid rgba(46,35,26,.9);
    overflow:hidden; background:#8a6547;
  }
  .avatars .av img{ width:100%; height:100%; object-fit:cover; display:block; }
  .avatars .av + .av{ margin-left:-16px; }

  .stat{ display:flex; flex-direction:column; }
  .stat__num{
    font-family:var(--disp); font-size:clamp(28px,3vw,38px); line-height:1;
    color:var(--paper); display:flex; align-items:baseline; gap:.06em; white-space:nowrap;
  }
  .stat__num i{ font-style:normal; }
  .stars{ color:var(--tan); font-size:17px; letter-spacing:.1em; margin-left:.35em; }
  .stat__lab{ margin-top:6px; font-size:14px; color:var(--paper-dim); }
  .stat__div{ width:1px; height:64px; background:var(--hairline); align-self:center; }

  .badge{
    position:absolute; right:6.5%; bottom:7%; z-index:4;
    width:300px; height:300px; will-change:transform;
  }
  .badge__float{
    position:absolute; inset:0; display:grid; place-items:center;
    text-align:center; animation:float 7s ease-in-out infinite;
  }
  .badge__ring{
    position:absolute; inset:0;
    border:1px solid rgba(242,226,205,.5); border-radius:50%;
  }
  .badge__stack{ position:relative; padding:0 34px; }
  .badge__kicker{
    display:block; font-size:13px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--paper-faint); margin-bottom:12px;
  }
  .badge__main{
    display:block; font-size:16px; letter-spacing:.14em; text-transform:uppercase;
    line-height:1.5; color:var(--paper);
  }
  .badge__plus{
    position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
    width:48px; height:48px; border-radius:50%;
    background:rgba(40,30,22,.55);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    display:grid; place-items:center; font-size:20px; font-weight:300; color:var(--paper);
    transition:transform .45s var(--ease);
  }
  .badge__plus:hover, .badge__plus:focus-visible{ transform:translateX(-50%) rotate(90deg); }

  @keyframes float{
    0%,100%{ transform:translateY(-4px); }
    50%{ transform:translateY(4px); }
  }

  /* ========== SHARED PRIMITIVES ========== */
  .zone-dark{ background:var(--bg); color:var(--paper); }
  .zone-deep{ background:var(--bg-deep); color:var(--paper); }
  .zone-light{ background:var(--cream); color:var(--ink); }
  .zone-soft{ background:var(--cream-soft); color:var(--ink); }

  .section{ padding:var(--section-y) var(--pad); position:relative; }

  .sec-h{
    font-family:var(--disp); font-weight:400;
    font-size:clamp(38px,5.6vw,76px); line-height:1.03;
    letter-spacing:-.022em; max-width:15ch; text-wrap:balance;
  }
  .sec-h em{ font-style:italic; color:var(--tan); }
  .zone-light .sec-h em, .zone-soft .sec-h em{ color:var(--tan-ink); }

  .lede{
    font-size:clamp(16px,1.2vw,18px); line-height:1.75;
    max-width:46ch; color:var(--paper-dim); text-wrap:pretty;
  }
  .zone-light .lede, .zone-soft .lede{ color:var(--ink-dim); }

  /* the one head pattern that repeats, used on two sections only */
  .head-split{
    display:grid; gap:clamp(20px,3vw,40px);
    margin-bottom:clamp(46px,6vw,80px);
  }
  @media (min-width:900px){
    .head-split{ grid-template-columns:1.15fr .85fr; align-items:end; }
    .head-split .lede{ justify-self:end; }
  }

  /* The reveal's moving number. Registered so it computes to a percentage and
     interpolates: a bare custom property computes to its token stream, and a
     clip-path built from an un-registered one sits on its end value
     (BUILD-PITFALLS 42 and 45). Nothing here declares a from-state: parking is
     the helper's job in main.js, at boot, so a from-state can never be handed
     back to CSS and can never flash for a frame before JS catches it
     (REVEAL-LAWS 1 and 2). */
  @property --rv{ syntax:"<percentage>"; inherits:false; initial-value:0%; }
  .reveal{ will-change:transform, opacity; }

  /* ========== MARQUEE ========== */
  .marquee{
    border-block:1px solid var(--hairline);
    background:var(--bg-deep);
    overflow:hidden; padding:20px 0;
  }
  .marquee__track{
    display:flex; width:max-content; gap:0;
    animation:marquee 48s linear infinite;
  }
  .marquee__track:hover{ animation-play-state:paused; }
  .marquee__item{
    display:inline-flex; align-items:center; gap:34px;
    padding-inline:34px;
    font-family:var(--disp); font-style:italic; font-size:clamp(17px,1.8vw,22px);
    letter-spacing:.005em; color:var(--paper-dim); white-space:nowrap;
  }
  .marquee__item i{ font-style:normal; color:var(--tan); font-size:.62em; }
  @keyframes marquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  /* ========== 1. BEHANDELINGEN — list + sticky plate ========== */
  /* Block flow on narrow screens so the plate can stick against the whole
     wrapper; a one-column grid would trap it in its own row and it would
     never travel. On wide screens the grid row is as tall as the list, which
     gives sticky the same room. */
  .treat-wrap{ display:block; }
  @media (min-width:1000px){
    .treat-wrap{
      display:grid; grid-template-columns:1.12fr .88fr;
      gap:clamp(44px,5vw,84px); align-items:start;
    }
    .treat-col{ order:1; }
    .treat-plate{ order:2; }
  }

  /* Sticky ONLY on the two-column layout, where the grid row is as tall as the
     list and the plate has somewhere to travel. Stacked, there is nothing to
     travel against: it just parks under the header while the copy below it
     scrolls away behind the photo. So below 1000px it stays in flow. */
  .treat-plate{
    position:static; margin-bottom:clamp(30px,4vw,44px);
  }
  @media (min-width:1000px){
    .treat-plate{
      position:sticky; top:calc(var(--header-h) + 18px);
      align-self:start; margin-bottom:0;
    }
  }
  .treat-plate__frame{
    position:relative; overflow:hidden;
    aspect-ratio:16/9; background:#3a2c1e;
  }
  @media (min-width:1000px){ .treat-plate__frame{ aspect-ratio:4/5; } }
  .treat-plate__frame img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transform:scale(1.05);
    transition:opacity .8s var(--ease), transform 1.4s var(--ease);
  }
  .treat-plate__frame img.is-active{ opacity:1; transform:scale(1); }
  .treat-plate__cap{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding-top:14px; font-size:13px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--paper-faint);
  }
  .treat-plate__cap b{ font-weight:400; color:var(--paper-dim); }

  .treat-list{ border-top:1px solid var(--hairline); }
  .treat{ border-bottom:1px solid var(--hairline); }
  .treat__h{ font-weight:400; }
  .treat__head{
    width:100%; text-align:left; cursor:pointer;
    display:grid; grid-template-columns:1fr auto; gap:10px 20px; align-items:center;
    padding:clamp(22px,2.6vw,30px) 0;
  }
  @media (min-width:1000px){
    .treat__head{ grid-template-columns:52px 1fr auto; gap:22px; }
  }
  .treat__num{
    display:none; font-family:var(--disp); font-style:italic; font-size:17px;
    color:var(--tan); letter-spacing:.02em; align-self:start; padding-top:.35em;
  }
  @media (min-width:1000px){ .treat__num{ display:block; } }
  .treat__title{
    display:block; font-family:var(--disp);
    font-size:clamp(24px,2.7vw,38px); letter-spacing:-.02em; line-height:1.1;
    transition:color .35s ease, transform .5s var(--ease);
  }
  .treat__meta{
    font-size:13px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--paper-faint); white-space:nowrap; text-align:right; align-self:center;
  }
  .treat__head:hover .treat__title,
  .treat__head:focus-visible .treat__title{ color:var(--tan); transform:translateX(7px); }
  .treat.is-open .treat__title{ color:var(--tan); }
  .treat.is-open .treat__meta{ color:var(--tan); }

  .treat__body{
    display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease);
  }
  .treat.is-open .treat__body{ grid-template-rows:1fr; }
  .treat__body > div{ overflow:hidden; }
  .treat__detail{ padding:0 0 clamp(28px,3.2vw,40px); }
  @media (min-width:1000px){ .treat__detail{ padding-left:74px; } }
  .treat__detail p{
    font-size:16px; line-height:1.78; color:var(--paper-dim); max-width:52ch;
  }
  .treat__facts{
    display:flex; flex-wrap:wrap; gap:0 clamp(26px,3vw,44px);
    margin:22px 0 0; padding-top:18px; border-top:1px solid var(--hairline);
  }
  .treat__facts > div{ display:flex; align-items:baseline; gap:10px; padding:5px 0; }
  .treat__facts dt{
    font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-faint);
  }
  .treat__facts dd{ margin:0; font-size:16px; color:var(--paper); white-space:nowrap; }
  .treat__detail .btn-line{ margin-top:22px; }
  .treat-note{
    margin-top:clamp(26px,3vw,38px); font-size:16px; color:var(--paper-faint); line-height:1.65; max-width:56ch;
  }

  /* ========== 2. OVER ONS — portrait bleed + principles ledger ========== */
  .about{ overflow:hidden; }
  .about-top{ display:grid; gap:clamp(34px,4.5vw,64px); align-items:center; }
  @media (min-width:1000px){
    .about-top{ grid-template-columns:.82fr 1.18fr; gap:clamp(44px,5vw,80px); }
  }
  .about-photo{
    position:relative;
    margin:0 0 0 calc(var(--pad) * -1);
    width:calc(100% + var(--pad));
  }
  .about-photo img{
    width:100%; height:clamp(380px,54vw,640px); object-fit:cover; object-position:50% 26%;
  }
  .about-seal{
    position:absolute; right:clamp(18px,2.2vw,32px); bottom:clamp(18px,2.2vw,32px);
    width:clamp(104px,11vw,146px); aspect-ratio:1;
    border-radius:50%; background:var(--cream);
    box-shadow:0 0 0 1px rgba(50,39,24,.18), 0 18px 44px rgba(40,28,18,.22);
    display:grid; place-items:center;
  }
  .about-seal svg{ position:absolute; inset:0; width:100%; height:100%; }
  .about-seal__ring{ animation:spin 30s linear infinite; transform-origin:100px 100px; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .about-seal__core{
    font-family:var(--disp); font-style:italic;
    font-size:clamp(28px,3vw,38px); color:var(--ink); user-select:none; position:relative;
  }
  .about-statement{
    font-family:var(--disp); font-weight:400;
    font-size:clamp(30px,3.8vw,54px); line-height:1.12;
    letter-spacing:-.024em; max-width:20ch; text-wrap:balance;
  }
  .about-statement em{ font-style:italic; color:var(--tan-ink); }
  .about-sig{
    margin-top:clamp(20px,2.6vw,30px);
    font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
  }
  .about-principles{
    margin-top:clamp(52px,7vw,96px);
    display:grid; gap:0; border-top:1px solid var(--hairline-dark);
  }
  @media (min-width:860px){
    .about-principles{ grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); }
  }
  .principle{
    padding:clamp(24px,3vw,34px) 0;
    border-bottom:1px solid var(--hairline-dark);
  }
  @media (min-width:860px){ .principle{ border-bottom:0; } }
  .principle__t{
    font-family:var(--disp); font-size:clamp(21px,2vw,26px);
    letter-spacing:-.015em; margin-bottom:10px;
  }
  .principle__d{ font-size:16px; line-height:1.72; color:var(--ink-dim); max-width:38ch; }

  /* ========== 3. RESULTATEN — before/after compare + dossier index ========== */
  .results{ padding-inline:0; }
  .results__head{ padding-inline:var(--pad); }
  .results__intro{
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
    gap:18px 40px; margin-bottom:clamp(34px,4vw,52px);
  }
  .results__cred{
    font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-faint);
  }

  .cmp{
    position:relative; width:100%; aspect-ratio:3/2;
    max-height:82svh; overflow:hidden; background:#3a2c1e;
    --pos:50%;
  }
  .cmp img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; user-select:none; -webkit-user-drag:none;
  }
  .cmp__before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
  .cmp__div{
    position:absolute; top:0; bottom:0; left:var(--pos);
    width:1px; background:var(--cream); transform:translateX(-.5px);
    box-shadow:0 0 24px rgba(20,12,8,.5); pointer-events:none;
  }
  .cmp__grip{
    position:absolute; top:50%; left:var(--pos);
    transform:translate(-50%,-50%);
    width:clamp(56px,6vw,74px); aspect-ratio:1; border-radius:50%;
    border:1px solid rgba(242,226,205,.75);
    /* .34 left the glyphs at 2.31:1 over the brightest pixels of the after-photo, measured across 8281 source pixels. .86 puts the worst case at 10.9:1 and the ring still reads as glass. */
    background:rgba(33,24,17,.86);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    display:grid; place-items:center; gap:0; pointer-events:none;
    color:var(--paper); font-size:15px; letter-spacing:.28em;
    transition:transform .5s var(--ease), background .3s ease;
  }
  .cmp__range{
    position:absolute; inset:0; width:100%; height:100%; margin:0;
    appearance:none; -webkit-appearance:none; background:transparent;
    cursor:ew-resize; opacity:0;
  }
  .cmp__range::-webkit-slider-thumb{
    -webkit-appearance:none; width:60px; height:200px; cursor:ew-resize;
  }
  .cmp__range::-moz-range-thumb{
    width:60px; height:200px; border:0; background:transparent; cursor:ew-resize;
  }
  .cmp__range:focus-visible + .cmp__div + .cmp__grip{
    background:rgba(33,24,17,.7); transform:translate(-50%,-50%) scale(1.08);
  }
  .cmp__tag{
    position:absolute; bottom:clamp(16px,2.4vw,28px); z-index:3;
    font-size:13px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--paper); padding:9px 16px;
    background:rgba(33,24,17,.42);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    pointer-events:none;
  }
  .cmp__tag--a{ left:clamp(16px,2.4vw,28px); }
  .cmp__tag--b{ right:clamp(16px,2.4vw,28px); }

  .results__caption{
    padding:clamp(20px,2.6vw,30px) var(--pad) 0;
    display:flex; flex-wrap:wrap; gap:12px 36px; align-items:baseline;
    font-size:13.5px; color:var(--paper-faint);
  }
  .results__caption b{ font-weight:400; color:var(--paper-dim); }

  .dossier{
    width:100%; border-collapse:collapse;
    margin-top:clamp(48px,6vw,84px);
    font-size:16px;
  }
  .dossier caption{
    text-align:left; padding:0 var(--pad) 20px;
    font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--paper-faint);
  }
  .dossier th{
    text-align:left; font-weight:400;
    font-size:13px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--paper-faint); padding:0 0 14px;
  }
  .dossier td{
    padding:clamp(16px,2vw,22px) 0; border-top:1px solid var(--hairline);
    color:var(--paper-dim); vertical-align:baseline;
  }
  .dossier th:first-child, .dossier td:first-child{ padding-left:var(--pad); }
  .dossier th:last-child, .dossier td:last-child{ padding-right:var(--pad); text-align:right; }
  .dossier .d-no{
    font-family:var(--disp); font-style:italic; color:var(--tan); white-space:nowrap;
  }
  .dossier .d-name{ color:var(--paper); font-family:var(--disp); font-size:19px; letter-spacing:-.01em; }
  .dossier tr.is-featured td{ color:var(--paper); background:rgba(242,226,205,.045); }
  .dossier tr.is-featured .d-no::after{
    content:"↑ hierboven"; font-family:var(--sans); font-style:normal;
    display:block; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--paper-faint); margin-top:4px;
  }
  @media (max-width:760px){
    .dossier thead{ position:absolute; left:-9999px; }
    .dossier tr{ display:block; border-top:1px solid var(--hairline); padding:18px 0; }
    .dossier td{
      display:flex; justify-content:space-between; gap:20px;
      padding:5px var(--pad); border:0; text-align:left;
    }
    .dossier td:last-child{ text-align:left; }
    .dossier td::before{
      content:attr(data-l); flex:0 0 auto;
      font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-faint);
    }
    .dossier tr.is-featured .d-no::after{ display:inline; margin:0 0 0 10px; }
  }

  /* ========== 4. TRAJECT — pinned stepper ========== */
  .traject{
    padding:var(--section-y) var(--pad);
    display:flex; flex-direction:column; justify-content:center;
  }
  .traject__head{
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
    gap:16px 40px; margin-bottom:clamp(40px,5vw,68px);
  }
  .traject__count{
    font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
  }
  .traject__stage{ display:grid; gap:clamp(28px,4vw,56px); }
  @media (min-width:900px){
    .traject__stage{ grid-template-columns:.78fr 1.22fr; align-items:center; }
  }
  /* The running numeral and its rail only mean something while the section is
     pinned and showing one step at a time. Below the pin breakpoint the whole
     roll column is removed, not just its children: as a bare grid item holding
     two hidden divs it kept its row and contributed a full 36px gap of nothing
     (BUILD-PITFALLS 49). Under 900 the device becomes a timeline instead, which
     is a design of its own rather than the desktop one with parts missing. */
  .traject__num, .traject__rail, .traject__index{ display:none; }
  @media (max-width:899px){
    .traject__roll{ display:none; }
    .traject__stage{ grid-template-columns:1fr; }
    .tsteps{
      position:relative; gap:clamp(30px,5vw,40px);
      padding-left:clamp(44px,11vw,64px);
      border-left:1px solid var(--hairline-dark);
    }
    .tstep{ position:relative; }
    /* the numeral the pinned build rolls, printed once per step instead. It
       sits in the gutter just right of the rail, so the rail keeps reading as
       one continuous line with four stations on it. */
    .tstep::before{
      content:attr(data-n);
      position:absolute; left:calc(clamp(44px,11vw,64px) * -1 + 11px); top:-.06em;
      font-family:var(--disp); font-style:italic; font-weight:300;
      font-size:clamp(24px,6vw,32px); line-height:1;
      color:var(--tan-ink); letter-spacing:-.02em;
    }
    /* "Stap 03" is redundant next to the printed numeral, but it stays in the
       accessibility tree rather than being display:none'd out of it. */
    .tstep__k{
      position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
      overflow:hidden; clip-path:inset(50%); white-space:nowrap;
    }
    .tstep__t{ margin-bottom:12px; }
  }
  .traject.is-pinned .traject__num{ display:block; }
  .traject.is-pinned .traject__rail{ display:block; }
  /* The numeral is a column of all four figures inside a one-line mask, so it
     rolls with the scroll instead of popping. Item height and mask height are
     both exactly 1em, which is what keeps the figures registered. */
  .traject__num{
    font-family:var(--disp); font-style:italic; font-weight:300;
    font-size:clamp(84px,15.5vw,236px); line-height:1;
    color:var(--tan-ink); letter-spacing:-.03em;
    height:1em; overflow:hidden;
  }
  .traject__num i{ display:block; font-style:inherit; will-change:transform; }
  .traject__num i span{ display:block; height:1em; }
  .traject__rail{
    margin-top:clamp(18px,2.4vw,28px); height:1px; background:var(--hairline-dark);
    position:relative; max-width:280px;
  }
  /* driven per-frame from scroll position, so no transition to smear it */
  .traject__rail i{
    position:absolute; inset:0; background:var(--tan-ink);
    transform:scaleX(0); transform-origin:left center;
  }
  .tsteps{ display:grid; gap:clamp(26px,3vw,38px); }
  .tstep{ max-width:52ch; }
  .tstep__k{
    display:block; font-size:13px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:14px;
  }
  .tstep__t{
    font-family:var(--disp); font-size:clamp(28px,3.4vw,46px);
    letter-spacing:-.022em; line-height:1.08; margin-bottom:16px;
  }
  .tstep__d{ font-size:clamp(16px,1.15vw,17px); line-height:1.78; color:var(--ink-dim); }

  /* pinned mode: steps stack and crossfade. only added by JS on wide screens */
  .traject.is-pinned{ min-height:100svh; padding-block:clamp(96px,10vh,140px); }
  /* wide enough to carry a third column: the four titles double as a
     you-are-here index while the stage crossfades */
  @media (min-width:1200px){
    .traject.is-pinned .traject__stage{ grid-template-columns:.72fr 1.06fr .48fr; }
    .traject.is-pinned .traject__index{
      display:grid; gap:15px; align-content:center; align-self:stretch;
      border-left:1px solid var(--hairline-dark);
      padding-left:clamp(22px,2.4vw,36px);
    }
  }
  .traject__index li{
    font-size:16px; letter-spacing:.01em; color:var(--ink-faint);
    transition:color .45s ease, transform .55s var(--ease);
  }
  .traject__index li.is-on{ color:var(--ink); transform:translateX(6px); }
  .traject.is-pinned .tsteps{
    position:relative; display:block; min-height:clamp(230px,26vw,300px);
  }
  /* Opacity and offset are written per-frame from scroll position — a CSS
     transition here would fight that and reintroduce the lag. */
  .traject.is-pinned .tstep{
    position:absolute; inset:0 auto auto 0; width:100%;
    opacity:0; will-change:opacity, transform;
  }
  /* the step numbers are carried by the running numeral once pinned, but they
     stay readable to a screen reader rather than being display:none'd away */
  .traject.is-pinned .tstep__k{
    position:absolute; width:1px; height:1px; margin:-1px;
    padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }

  /* ========== 5. VERHALEN — photo + quote ledger ========== */
  .voices{ display:grid; gap:clamp(34px,4.5vw,64px); align-items:stretch; }
  @media (min-width:960px){
    .voices{ grid-template-columns:.86fr 1.14fr; gap:clamp(44px,5vw,80px); }
  }
  .voices__photo{ position:relative; }
  .voices__photo img{
    width:100%; height:100%; min-height:clamp(300px,38vw,520px);
    object-fit:cover; object-position:38% 50%;
  }
  /* Same reasoning as .contact-photo figcaption: a gradient scrim leaves the
     ratio a function of where in the fade a glyph lands, which is not a number
     anyone can hold. Solid plate, so the caption is resolvable from CSS alone
     and the measured worst case is the only case. */
  .voices__photo figcaption{
    position:absolute; left:0; bottom:0; right:0;
    padding:clamp(16px,2vw,24px);
    background:rgba(20,12,8,.86);
    font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper);
  }
  .voices__list{ display:flex; flex-direction:column; justify-content:center; }
  .voice{ padding:clamp(22px,2.8vw,32px) 0; border-top:1px solid var(--hairline); margin:0; }
  .voice:first-child{ border-top:0; padding-top:0; }
  .voice__q{
    font-family:var(--disp); font-weight:400; margin:0;
    font-size:clamp(19px,1.7vw,23px); line-height:1.45; letter-spacing:-.014em;
    text-wrap:pretty;
  }
  .voice:first-child .voice__q{ font-size:clamp(24px,2.6vw,34px); line-height:1.28; }
  .voice__q em{ font-style:italic; color:var(--tan); }
  .voice__by{
    display:flex; align-items:center; gap:12px; margin-top:16px;
    font-size:13px; color:var(--paper-faint); letter-spacing:.02em;
  }
  .voice__by i{
    font-style:normal; width:5px; height:5px; border-radius:50%; background:var(--tan);
  }
  .voice__by b{ font-weight:400; color:var(--paper-dim); }

  /* ========== 6. PRIJZEN — ledger rows ========== */
  .plans{ border-top:1px solid var(--hairline-dark); }
  .plan{
    display:grid; gap:clamp(18px,2.4vw,30px);
    padding:clamp(30px,3.6vw,48px) 0;
    border-bottom:1px solid var(--hairline-dark);
    align-items:start;
  }
  @media (min-width:960px){
    .plan{ grid-template-columns:.9fr 1.25fr .85fr; gap:clamp(30px,4vw,64px); align-items:center; }
  }
  .plan--lead{
    background:var(--bg); color:var(--paper);
    border-color:var(--bg);
    padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);
  }
  .plan__name{
    font-family:var(--disp); font-size:clamp(30px,3.2vw,44px);
    letter-spacing:-.022em; line-height:1.05;
  }
  .plan__tag{
    display:block; font-size:13px; letter-spacing:.26em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:12px;
  }
  .plan--lead .plan__tag{ color:var(--tan); }
  .plan__blurb{
    margin-top:12px; font-size:16px; line-height:1.68; color:var(--ink-dim); max-width:34ch;
  }
  .plan--lead .plan__blurb{ color:var(--paper-dim); }
  .plan__list{ display:grid; gap:9px; }
  .plan__list li{
    display:grid; grid-template-columns:9px 1fr; gap:14px; align-items:baseline;
    font-size:16px; line-height:1.55; color:rgba(50,39,24,.86);
  }
  .plan--lead .plan__list li{ color:var(--paper-dim); }
  .plan__list li::before{
    content:""; width:5px; height:5px; border-radius:50%;
    background:var(--tan-ink); transform:translateY(-2px);
  }
  .plan--lead .plan__list li::before{ background:var(--tan); }
  .plan__buy{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
  @media (min-width:960px){ .plan__buy{ align-items:flex-end; text-align:right; } }
  .plan__amount{
    font-family:var(--disp); font-size:clamp(36px,3.8vw,52px);
    letter-spacing:-.028em; line-height:1;
  }
  .plan__amount small{
    display:block; font-family:var(--sans); font-size:13px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--ink-faint); margin-top:9px;
  }
  .plan--lead .plan__amount small{ color:var(--paper-faint); }
  .plan__buy .btn-solid, .plan__buy .btn-ghost{ padding:16px 30px; font-size:13px; }
  .plan--lead .btn-ghost{ border-color:rgba(242,226,205,.5); }
  .price-footnote{
    margin-top:clamp(26px,3vw,36px);
    font-size:16px; color:var(--ink-faint);
    display:flex; align-items:baseline; gap:12px; max-width:62ch; line-height:1.7;
  }
  .price-footnote::before{
    content:""; width:6px; height:6px; border-radius:50%;
    border:1px solid var(--tan-ink); flex-shrink:0; transform:translateY(-2px);
  }

  /* ========== DEVICE 1 · DE RAMING ==========
     Built as a ledger, not a card: same hairlines, same measure, same amount
     type as the plans above it, so it reads as the last row of the price table
     rather than a widget dropped on top of one. */
  .raming{
    margin-top:clamp(52px,7vw,96px);
    border-top:1px solid var(--hairline-dark);
    padding-top:clamp(30px,3.6vw,46px);
    display:grid; gap:clamp(28px,3.4vw,46px);
  }
  @media (min-width:1000px){
    .raming{ grid-template-columns:1.28fr .72fr; column-gap:clamp(44px,5vw,88px); }
    .raming__intro{ grid-column:1; }
    .raming__opts{ grid-column:1; }
    .raming__out{ grid-column:2; grid-row:1 / span 2; align-self:start; position:sticky;
      top:calc(var(--header-h) + 24px); }
  }
  .raming__t{
    font-family:var(--disp); font-size:clamp(26px,3vw,40px);
    letter-spacing:-.022em; line-height:1.06;
  }
  .raming__t em{ font-style:italic; color:var(--tan-ink); }
  .raming__d{
    margin-top:clamp(14px,1.8vw,20px);
    font-size:16px; line-height:1.72; color:var(--ink-dim); max-width:58ch;
  }

  .raming__opts{ display:grid; border-top:1px solid var(--hairline-dark); }
  .ropt{
    display:grid; grid-template-columns:22px 1fr auto; gap:16px;
    align-items:center; text-align:left; width:100%;
    min-height:64px; padding:16px 0;
    border-bottom:1px solid var(--hairline-dark);
    color:var(--ink);
    transition:color .3s ease, padding-left .4s var(--ease);
  }
  .ropt__box{
    width:22px; height:22px; border:1px solid rgba(50,39,24,.42); border-radius:50%;
    position:relative; flex-shrink:0;
    transition:border-color .3s ease, background-color .3s ease;
  }
  .ropt__box::after{
    content:""; position:absolute; inset:5px; border-radius:50%;
    background:var(--tan-ink); transform:scale(0);
    transition:transform .28s var(--ease);
  }
  .ropt[aria-checked="true"] .ropt__box{ border-color:var(--tan-ink); }
  .ropt[aria-checked="true"] .ropt__box::after{ transform:scale(1); }
  .ropt__t{
    font-family:var(--disp); font-size:clamp(19px,1.9vw,25px);
    letter-spacing:-.016em; line-height:1.2;
  }
  .ropt__t small{
    display:block; font-family:var(--sans); font-size:13px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--ink-faint); margin-top:6px;
  }
  .ropt__p{
    font-family:var(--disp); font-size:clamp(18px,1.7vw,22px);
    letter-spacing:-.02em; color:var(--ink-dim); white-space:nowrap;
  }
  .ropt:hover, .ropt:focus-visible{ padding-left:10px; }
  .ropt[aria-checked="true"] .ropt__p{ color:var(--tan-ink); }

  .raming__out{
    background:var(--bg); color:var(--paper);
    padding:clamp(26px,3vw,38px);
  }
  .raming__amt{
    font-family:var(--disp); font-size:clamp(40px,5vw,66px);
    letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
  }
  .raming__amtlab{
    margin-top:12px; font-size:13px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--paper-faint);
  }
  .raming__facts{
    margin:clamp(22px,2.6vw,30px) 0 0; padding-top:18px;
    border-top:1px solid var(--hairline);
    display:grid; gap:12px;
  }
  .raming__facts > div{ display:flex; justify-content:space-between; gap:18px; align-items:baseline; }
  .raming__facts dt{ font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--paper-faint); }
  .raming__facts dd{ margin:0; font-family:var(--disp); font-size:20px; color:var(--paper); }
  .raming__live{
    margin-top:clamp(20px,2.4vw,26px);
    font-size:16px; line-height:1.6; color:var(--paper-dim); min-height:3.2em;
  }
  .raming__cta{ margin-top:clamp(20px,2.4vw,26px); }
  .raming__out .btn-ink{ background:var(--cta); color:var(--ink); }
  .raming__out .btn-ink:hover, .raming__out .btn-ink:focus-visible{ background:#fff2df; }
  .zone-light .raming__out :focus-visible{ outline-color:var(--paper); }

  /* ========== DEVICE 2 · DE WEEKKLOK ========== */
  .weekklok__rail{
    display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;
  }
  .wday{
    min-width:44px; min-height:44px; padding:0 6px;
    display:grid; place-items:center;
    border:1px solid var(--hairline-dark); border-radius:50%;
    font-size:13px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-dim);
    transition:background-color .3s ease, color .3s ease, border-color .3s ease;
  }
  .wday[aria-checked="true"]{
    background:var(--ink); color:var(--cream); border-color:var(--ink);
  }
  .wday[data-open=""], .wday:not([data-open]){ color:var(--ink-faint); }
  .wday.is-today::after{
    content:""; position:absolute; /* marker sits inside the button box */
  }
  .wday{ position:relative; }
  .wday.is-today{ border-color:var(--tan-ink); }
  .wday.is-today[aria-checked="true"]{ border-color:var(--ink); }

  .weekklok__scale{ margin-top:16px; display:grid; gap:7px; }
  .weekklok__bar{
    display:block; position:relative; height:9px;
    background:rgba(50,39,24,.1);
  }
  .weekklok__bar i{
    position:absolute; top:0; bottom:0;
    left:var(--band-l,0%); width:var(--band-w,0%);
    background:var(--tan-ink);
    transition:left .4s var(--ease), width .4s var(--ease);
  }
  .weekklok__bar b{
    position:absolute; top:-4px; bottom:-4px; width:2px;
    left:var(--now-l,0%); background:var(--ink);
    opacity:var(--now-o,0);
    transition:left .4s var(--ease), opacity .3s ease;
  }
  .weekklok__ticks{
    display:flex; justify-content:space-between;
    font-size:13px; letter-spacing:.16em; color:var(--ink-faint);
  }
  .weekklok__hours{
    margin-top:14px;
    font-family:var(--disp); font-size:clamp(21px,2vw,26px); letter-spacing:-.014em;
  }
  .weekklok__live{
    margin-top:8px; font-size:16px; line-height:1.6; color:var(--ink-dim); min-height:3.2em;
  }
  .weekklok__live b{ font-weight:400; color:var(--tan-ink); }

  /* ========== 7. FAQ ========== */
  .faq-grid{ display:grid; gap:clamp(40px,6vw,88px); }
  @media (min-width:960px){
    .faq-grid{ grid-template-columns:.8fr 1.2fr; align-items:start; }
    .faq-sticky{ position:sticky; top:calc(var(--header-h) + 32px); }
  }
  .faq-list{ border-top:1px solid var(--hairline); }
  .faq-item{ border-bottom:1px solid var(--hairline); }
  .faq-q{
    width:100%; text-align:left;
    display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
    padding:clamp(20px,2.4vw,28px) 0;
    color:var(--paper);
  }
  .faq-q__t{
    font-family:var(--disp);
    font-size:clamp(20px,2vw,27px); letter-spacing:-.015em; line-height:1.25;
    transition:color .3s ease;
  }
  .faq-q:hover .faq-q__t, .faq-q:focus-visible .faq-q__t{ color:var(--tan); }
  .faq-icon{
    width:34px; height:34px; position:relative; flex-shrink:0;
    transition:transform .5s var(--ease);
  }
  .faq-icon::before, .faq-icon::after{
    content:""; position:absolute; background:var(--paper-dim);
    transition:background .3s ease, opacity .25s ease;
  }
  .faq-icon::before{ left:50%; top:50%; width:14px; height:1px; transform:translate(-50%,-50%); }
  .faq-icon::after{ left:50%; top:50%; width:1px; height:14px; transform:translate(-50%,-50%); }
  .faq-item.is-open .faq-icon::before{ background:var(--tan); width:16px; }
  .faq-item.is-open .faq-icon::after{ opacity:0; }
  .faq-a{
    display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease);
  }
  .faq-item.is-open .faq-a{ grid-template-rows:1fr; }
  .faq-a > div{ overflow:hidden; }
  .faq-a p{
    padding:0 0 clamp(22px,2.6vw,28px); max-width:58ch;
    font-size:16px; line-height:1.78; color:var(--paper-dim);
  }

  /* ========== 8. CONTACT ========== */
  .contact-grid{ display:grid; gap:clamp(40px,5vw,76px); align-items:start; }
  @media (min-width:1000px){
    .contact-grid{ grid-template-columns:.92fr 1.08fr; }
  }
  .contact-photo{
    position:relative;
    margin:0 0 clamp(30px,3.6vw,44px) calc(var(--pad) * -1);
    width:calc(100% + var(--pad));
  }
  .contact-photo img{
    width:100%; height:clamp(300px,33vw,460px); object-fit:cover; object-position:52% 42%;
  }
  /* Text over a photograph cannot be checked by resolving CSS backgrounds, so
     this caption was measured against the real pixels of entree.webp: over the
     11.682 source pixels behind the box the mean ratio was 3.66 and the
     brightest region 1.5, both under AA. A text-shadow is not a contrast fix,
     it is a blur. The caption gets its own plate, which puts the measured
     worst case at 10:1 and reads as the survey chip it is meant to be. */
  .contact-photo figcaption{
    position:absolute; left:var(--pad); bottom:clamp(14px,2vw,22px);
    padding:6px 11px 5px;
    background:rgba(20,12,8,.86);
    font-size:13px; letter-spacing:.26em; text-transform:uppercase;
    color:var(--paper);
  }
  /* address, phone and hours run full width under the grid so the two
     columns above stay close in height and no dead band opens up */
  .contact-ledger{
    margin-top:clamp(46px,5.5vw,80px);
    border-top:1px solid var(--hairline-dark);
    display:grid;
  }
  @media (min-width:820px){
    .contact-ledger{ grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,60px); }
  }
  .contact-row{
    display:grid; gap:10px; align-content:start;
    padding:clamp(20px,2.4vw,30px) 0; border-bottom:1px solid var(--hairline-dark);
  }
  @media (min-width:820px){ .contact-row{ border-bottom:0; } }
  .contact-row h3{
    font-size:13px; letter-spacing:.26em; text-transform:uppercase;
    color:var(--ink-faint);
  }
  .contact-row p, .contact-row a{
    font-family:var(--disp); font-size:clamp(19px,1.7vw,23px);
    letter-spacing:-.014em; line-height:1.34;
  }
  .contact-row a{
    transition:color .3s ease;
    display:inline-flex; align-items:center; min-height:44px;
  }
  .contact-row a:hover, .contact-row a:focus-visible{ color:var(--tan-ink); }
  .contact-row .sub{
    font-family:var(--sans); font-size:16px; letter-spacing:0;
    line-height:1.75; color:var(--ink-dim);
  }

  .form{ border-top:1px solid var(--hairline-dark); padding-top:clamp(26px,3vw,36px); }
  .form__grid{ display:grid; gap:22px; }
  @media (min-width:640px){ .form__grid--2{ grid-template-columns:1fr 1fr; } }
  .field{ display:grid; gap:8px; }
  .field label{
    font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint);
  }
  /* --tan-ink itself stays where it is, it carries display type that only owes
     3:1. This asterisk is 13px, so it owes 4.5:1 and gets its own darker tone;
     measured on the form ground it was 4.29 before. */
  .field label .req{ color:#784c26; margin-left:2px; }
  .field input, .field select, .field textarea{
    width:100%; appearance:none; border:0; border-bottom:1px solid rgba(50,39,24,.26);
    background:transparent; padding:13px 0; border-radius:0;
    font-family:var(--sans); font-size:16px; color:var(--ink);
    transition:border-color .3s ease;
  }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(50,39,24,.42); }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-bottom-color:var(--ink);
  }
  .field textarea{ min-height:110px; resize:vertical; line-height:1.6; }
  .field select{
    background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%),
      linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position:calc(100% - 12px) calc(50% + 2px), calc(100% - 7px) calc(50% + 2px);
    background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
    padding-right:28px;
  }
  .form__foot{
    margin-top:32px; display:flex; flex-wrap:wrap; align-items:center;
    gap:18px 28px; justify-content:space-between;
  }
  .form__note{ font-size:16px; color:var(--ink-faint); max-width:30ch; line-height:1.6; }
  .form__status{ margin-top:18px; font-size:16px; min-height:1.4em; color:#2f5c37; }
  .form__status.is-error{ color:#8a3a2a; }
  .field.is-invalid input,
  .field.is-invalid select,
  .field.is-invalid textarea{ border-bottom-color:#8a3a2a; }

  /* ========== FOOTER ========== */
  .footer{
    background:var(--bg-deep); color:var(--paper);
    padding:clamp(56px,7vw,88px) var(--pad) 0;
    overflow:hidden;
  }
  .footer__top{
    display:grid; gap:clamp(32px,4vw,56px);
    padding-bottom:clamp(34px,4.4vw,52px);
    border-bottom:1px solid var(--hairline);
  }
  @media (min-width:900px){
    .footer__top{ grid-template-columns:1.4fr 1fr 1fr 1.1fr; }
  }
  .footer__brand .logo__wm{ font-size:16px; }
  .footer__tag{
    margin-top:20px; font-size:16px; line-height:1.72;
    color:var(--paper-dim); max-width:30ch;
  }
  .footer h4{
    font-size:13px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--paper-faint); margin-bottom:18px;
  }
  .footer__links{ display:grid; gap:11px; }
  .footer__links a, .footer__links span{
    font-size:16px; color:var(--paper-dim); transition:color .3s ease;
    display:inline-flex; align-items:center; min-height:44px;
  }
  .footer__links a:hover{ color:var(--paper); }
  .footer__bottom{
    display:flex; flex-wrap:wrap; gap:14px 28px;
    justify-content:space-between; align-items:center;
    padding:22px 0 0; font-size:13px; color:var(--paper-faint);
  }
  .footer__legal{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
  /* min-width as well as min-height: "Privacy" measured 38.6px wide, and a
     44px tap target is a box, not a height. */
  .footer__legal a{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }
  .footer__legal a:hover{ color:var(--paper-dim); }
  .footer__word{
    display:block; font-family:var(--disp); font-weight:300;
    font-size:19.2vw; line-height:.78; letter-spacing:.012em;
    color:rgba(242,226,205,.1);
    margin-top:clamp(24px,3vw,40px);
    transform:translateY(.1em);
    user-select:none; white-space:nowrap; text-align:center;
  }

  /* ========== FLOAT CTA ========== */
  .float-cta{
    position:fixed; right:var(--pad); bottom:24px; z-index:90;
    opacity:0; pointer-events:none; transform:translateY(14px);
    transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .float-cta.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .float-cta .btn-solid{
    box-shadow:0 12px 40px rgba(20,12,8,.4);
    padding:16px 26px; font-size:13px;
  }

  /* ========== RESPONSIVE ========== */
  @media (max-height:850px){
    .copy{ padding-top:clamp(88px,18svh,180px); }
    .hero__p{ margin-top:22px; }
    .copy .btn-solid{ margin-top:28px; padding:18px 36px; }
  }
  @media (max-width:1100px){
    .badge{ width:240px; height:240px; right:4%; bottom:12%; }
    .badge__main{ font-size:14px; }
    .nav{ gap:18px; }
    .nav a{ font-size:13px; letter-spacing:.14em; }
  }
  @media (max-width:960px){
    .nav{ display:none; }
    .header-actions .btn-ghost{ display:none; }
    .menu-toggle{ display:grid; }
    .badge{ display:none; }
    .hero__photo{ background-position:68% 25%; }
    .shade{
      background-image:
        linear-gradient(to right, rgba(46,35,26,.92) 0%, rgba(46,35,26,.68) 34%, rgba(46,35,26,.12) 74%),
        linear-gradient(to top, rgba(38,28,20,.9) 0%, rgba(38,28,20,.42) 32%, rgba(38,28,20,0) 60%),
        linear-gradient(to bottom, rgba(40,30,22,.5) 0%, rgba(40,30,22,0) 24%),
        linear-gradient(rgba(72,54,40,.34), rgba(72,54,40,.34));
    }
  }
  @media (max-width:720px){
    /* Anchored to the hero's bottom edge on wide screens, the stat block is
       one row and clears the call to action. As soon as it wraps it grows
       UPWARDS out of that anchor and lands on top of the button, so at the
       same width that wrapping starts it goes back into flow and simply
       makes the hero taller instead. */
    /* relative, not static: z-index only applies to positioned elements, and
       static would drop the block behind the .shade overlay that sits above
       the photo — in flow but unreadable. */
    .stats{
      position:relative; flex-wrap:wrap; row-gap:18px;
      padding-top:clamp(34px,7vw,52px);
    }
    .stat__div{ height:48px; }
    .contact-row{ grid-template-columns:1fr; gap:8px; }
    .contact-row h3{ padding-top:0; }
    .cmp{ aspect-ratio:4/3; }
    .footer__word{ font-size:20vw; }
  }
  @media (max-width:820px){
    /* the number stops fitting next to the burger; the icon and the tel: stay */
    .btn-tel{ padding:0; width:44px; justify-content:center; }
    .btn-tel__t{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
      border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  }
  @media (max-width:560px){
    .copy{ padding-top:18svh; max-width:none; }
    .hero__p br{ display:none; }
    .stats{ gap:16px 20px; }
    .stat__div{ display:none; }
    .avatars{ flex-basis:100%; }
    .float-cta{ right:16px; left:16px; bottom:16px; }
    .float-cta .btn-solid{ width:100%; justify-content:center; }
    .treat__meta{ display:none; }
  }

  @media (prefers-reduced-motion:reduce){
    .badge__float, .marquee__track, .about-seal__ring{ animation:none !important; }
    html{ scroll-behavior:auto; }
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }