/* ======================================================================
   ============================================================
   GLOBAL — SHARED BY EVERY PAGE
   Design tokens (:root), resets, WP parent-theme override fixes, grain
   overlay, top marquee bar, main nav + mega dropdown, mobile nav panel.
   Nothing below this banner and above "HOMEPAGE" is page-specific —
   every template on the site (home, about, showroom, contact, partners,
   klantenservice, mijn-account, bedankt-offerte) depends on this block.
   ============================================================
   ====================================================================== */
:root{
    --stone-black:#141210;
    --stone-black-2:#1B1815;
    --slab-cream:#F5EFE4;
    --slab-cream-dim:#EAE2D3;
    --marble-muted:#B6AA99;
    --orange:#E2622A;
    --orange-2:#F0793C;
    --orange-deep:#B84A1E;
    --oxblood:#6E2E27;
    --line:rgba(245,239,228,0.14);
    --line-soft:rgba(20,18,16,0.12);
    --radius:3px;
    --ease:cubic-bezier(.16,.84,.44,1);
  }
  *, .topsteen-page *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  .topsteen-page li{padding-bottom:0;}
  .topsteen-page{
    margin:0;
    background:var(--stone-black);
    color:var(--slab-cream);
    font-family:'Manrope',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden; /* fallback for very old browsers without overflow:clip support */
    overflow-x:clip; /* prevents horizontal scroll WITHOUT turning body into a scroll
                         container — overflow-x:hidden here silently forces overflow-y:auto
                         on body too, and that breaks every position:sticky element on the
                         page (this is what was killing the .pv-sticky 01/02/03/04 stepper) */
  }
  /* ===== WP PARENT-THEME OVERRIDE NEUTRALIZATION =====
     The "teapoy" parent theme ships a global theme.css that (a) sets h1-h6 color
     directly to a CSS var that resolves to white — this wins over inherited color
     regardless of specificity, because a rule that directly targets an element
     always beats inheritance from an ancestor. That's what was making headings on
     light (.section-cream) sections render invisible/white-on-cream instead of dark.
     (b) forces text-transform:capitalize and its own line-height on every heading.
     (c) sets font-family on bare `button, input, select, textarea` tags, which
     leaks the theme's font into any of our custom buttons/inputs that don't
     explicitly set their own font-family. Everything below is !important specifically
     to stop this fight for good instead of chasing specificity ties one at a time.

     ADDED: the same fight was happening on plain p/li/span/div/a text (parent
     theme sets font-family directly on those tags, e.g. "body, p, li, a{font-family:...}"
     — a rule that directly targets an element always beats inherited font-family,
     no matter what font-family is set on body/.topsteen-page). Fixed the same way:
     .topsteen-page * uses the universal selector, which carries NO specificity of
     its own — so its specificity is just the one ".topsteen-page" class (same tier
     as .eyebrow, .logo-text, etc). Placed at the very TOP of this block, before
     those classes are defined below, so on any tie the later, more specific class
     rule still wins and keeps its own font (Fraunces headings, Space Mono eyebrow,
     etc) — this rule only fills in the default for everything else. */
  .topsteen-page *{font-family:'Manrope',sans-serif;}
  .topsteen-page h1,
  .topsteen-page h2,
  .topsteen-page h3,
  .topsteen-page h4,
  .topsteen-page h5,
  .topsteen-page h6{
    font-family:'Fraunces',serif; font-weight:500; margin:0;
    letter-spacing:-0.01em; text-transform:none; color:inherit;
  }
  .topsteen-page button,
  .topsteen-page input,
  .topsteen-page select,
  .topsteen-page textarea,
  .topsteen-page optgroup{font-family:'Manrope',sans-serif;}
  .topsteen-page a{color:inherit;text-decoration:none;}
  .topsteen-page img{max-width:100%;display:block;}
  ::selection{background:var(--orange); color:#fff;}

  .grain-overlay{position:fixed; inset:0; z-index:999; pointer-events:none; background:#fff; filter:url(#grain); mix-blend-mode:overlay;}

  /* glossy stone sheen — cheap realism pass on every marble surface */
  .stonebar-slab::after, .cat-card::after, .proof-card::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.09) 48%, transparent 62%);
  }
  .table-top::after, .pv-table::after, .config-shape::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, transparent 28%, rgba(255,255,255,.24) 46%, transparent 64%);
  }

  .eyebrow{
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--orange-2); display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--orange-2);display:inline-block;}
  .wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,64px);}

  .topsteen-page .btn{
    display:inline-flex !important; align-items:center; gap:10px;
    padding:16px 28px !important; font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:14px !important;
    line-height:normal !important; border-radius:100px !important; cursor:pointer; border:1px solid transparent;
    position:relative; overflow:hidden; text-decoration:none !important; box-shadow:none !important;
    transition:transform .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
  }
  .topsteen-page .btn-primary{background:var(--orange) !important; color:#fff !important;}
  .topsteen-page .btn-primary::before{
    content:"";position:absolute; inset:0; border-radius:100px;
    background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 40%, transparent 60%);
    transform:translateX(-120%); transition:transform .7s var(--ease);
  }
  .topsteen-page .btn-primary:hover::before{transform:translateX(120%);}
  .topsteen-page .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(226,98,42,.55) !important; color:#fff !important;}
  .topsteen-page .btn-ghost{border-color:var(--line); color:var(--slab-cream) !important; background:none !important;}
  .topsteen-page .btn-ghost:hover{border-color:var(--orange-2); color:var(--orange-2) !important; transform:translateY(-2px);}
  .topsteen-page .btn svg{width:14px;height:14px;transition:transform .3s var(--ease);}
  .topsteen-page .btn:hover svg{transform:translateX(3px);}

  .filter-defs{position:absolute;width:0;height:0;overflow:hidden;}

  /* reveal-on-scroll */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal-stagger.in > *{opacity:1; transform:translateY(0);}
  .reveal-stagger.in > *:nth-child(1){transition-delay:.02s;}
  .reveal-stagger.in > *:nth-child(2){transition-delay:.1s;}
  .reveal-stagger.in > *:nth-child(3){transition-delay:.18s;}
  .reveal-stagger.in > *:nth-child(4){transition-delay:.26s;}
  .reveal-stagger.in > *:nth-child(5){transition-delay:.34s;}
  .reveal-stagger.in > *:nth-child(6){transition-delay:.42s;}
  .reveal-stagger.in > *:nth-child(7){transition-delay:.5s;}
  .reveal-stagger.in > *:nth-child(8){transition-delay:.58s;}
  /* Zoom-in variant of .reveal — same IntersectionObserver (see the
     scroll-reveal script, which now also watches for this class),
     opacity+scale instead of opacity+translateY. Used across the
     Showroom page so each section arrives with its own visual "step
     forward" instead of a plain fade. */
  .reveal-zoom{opacity:0; transform:scale(.92); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal-zoom.in{opacity:1; transform:scale(1);}
  .reveal-zoom-stagger > *{opacity:0; transform:scale(.9); transition:opacity .6s var(--ease), transform .6s var(--ease);}
  .reveal-zoom-stagger.in > *{opacity:1; transform:scale(1);}
  .reveal-zoom-stagger.in > *:nth-child(1){transition-delay:.02s;}
  .reveal-zoom-stagger.in > *:nth-child(2){transition-delay:.1s;}
  .reveal-zoom-stagger.in > *:nth-child(3){transition-delay:.18s;}

  /* ===== PREMIUM MOTION LAYER — additive polish, desktop-only where noted ===== */

  /* Top scroll-progress bar */
  .scroll-progress{
    position:fixed; top:0; left:0; height:2.5px; width:0%; z-index:1001;
    background:linear-gradient(90deg, var(--orange-deep), var(--orange-2));
    pointer-events:none;
  }

  /* Custom magnetic cursor — desktop pointer devices only, native cursor kept as safe fallback */
  .cursor-dot, .cursor-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:1002; will-change:transform;}
  .cursor-dot{
    width:6px;height:6px;border-radius:50%; background:var(--orange-2);
    transform:translate(-50%,-50%); transition:opacity .2s var(--ease), background .2s var(--ease);
  }
  .cursor-ring{
    width:34px;height:34px;border-radius:50%; border:1px solid rgba(226,98,42,.45);
    transform:translate(-50%,-50%);
    transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), opacity .2s var(--ease);
  }
  .cursor-ring.is-hovering{width:58px; height:58px; background:rgba(226,98,42,.08); border-color:var(--orange-2);}
  .cursor-dot.is-hidden, .cursor-ring.is-hidden{opacity:0;}
  @media (hover:hover) and (pointer:fine){
    body.custom-cursor-active, body.custom-cursor-active a, body.custom-cursor-active button, body.custom-cursor-active .btn{cursor:none;}
    body.custom-cursor-active input, body.custom-cursor-active textarea{cursor:auto;}
  }

  /* Magnetic buttons */
  @media (hover:hover) and (pointer:fine){
    .btn.magnetic{transition:transform .25s var(--ease), border-color .35s var(--ease), color .35s var(--ease);}
  }

  /* Tilt + sheen cards (cat-card, proof-card, stonebar-slab) */
  @media (hover:hover) and (pointer:fine){
    .cat-card, .proof-card{transition:transform .5s var(--ease), box-shadow .5s var(--ease);}
    .cat-card{transform-style:preserve-3d;}
    .card-shine{
      position:absolute; inset:0; pointer-events:none; z-index:1; border-radius:inherit;
      background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.16), transparent 60%);
      opacity:0; transition:opacity .4s var(--ease);
    }
    .cat-card:hover .card-shine, .proof-card:hover .card-shine{opacity:1;}
    .stonebar-slab .card-shine{background:radial-gradient(220px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.22), transparent 60%);}
    .stonebar-slab:hover .card-shine{opacity:1;}
  }

  /* ===== TOP MARQUEE ===== */
  .topbar{background:var(--orange-deep); overflow:hidden; white-space:nowrap;}
  .topbar-track{display:inline-flex; animation:scroll-left 30s linear infinite;}
  .topbar-item{
    font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.06em;
    color:#fff; padding:9px 40px; display:inline-flex; align-items:center; text-transform:uppercase;
  }
  .topbar-item::after{content:"◆"; color:rgba(255,255,255,.6); font-size:8px; margin-left:40px;}
  @keyframes scroll-left{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  /* ===== NAV — matches TopSteen's orange bar ===== */
  nav.main-nav{
    position:sticky; top:0; z-index:60;
    background:var(--orange);
    transition:box-shadow .3s;
  }
  nav.main-nav.scrolled{box-shadow:0 10px 30px -10px rgba(0,0,0,.4);}
  /* ===== HEADER VERTICAL CENTERING - pinned, not inherited =====
     Every piece of the header (logo / nav links / icon buttons) now gets an
     explicit height:74px (matching .nav-inner) plus its own
     display:flex + align-items:center, all !important. Nothing here depends
     on the parent theme's font-size, line-height, or li margins to end up
     centered - each box is pinned to the same 74px, so whatever the parent
     theme injects, every item's visual center lands on the same line. This
     replaces the earlier fix (which only zeroed out li margin) because that
     assumed the misalignment came from margin stacking alone - on the live
     site it kept recurring, so this version no longer trusts any inherited
     sizing at all. */
  .nav-inner{position:relative; display:flex; align-items:center; justify-content:space-between; height:74px;}
  .topsteen-page .logo{display:flex !important; align-items:center !important; gap:10px; height:74px !important; margin:0 !important; padding:0 !important;}
  .logo-mark{width:34px; height:27px; flex-shrink:0; display:block;}
  /* height:104px is the target size; max-width:260px is a safety cap only —
     it matches .footer-brand p's own max-width so the logo can never overflow
     the footer column no matter how wide the source PNG's aspect ratio is.
     It will only ever kick in and shrink the logo below 104px if the source
     file is unusually wide relative to its height. */
  .topsteen-page .logo-img{height:104px !important; width:auto !important; max-width:260px !important; display:block !important;}
  .logo-text{font-family:'Fraunces',serif; font-weight:700; font-size:20px; color:#fff; line-height:1.1 !important; margin:0 !important;}
  .logo-sub{display:block; font-family:'Space Mono',monospace; font-size:8px; letter-spacing:.16em; color:rgba(255,255,255,.75); text-transform:uppercase; font-weight:400; line-height:1.4 !important; margin:0 !important;}
  .topsteen-page .nav-links{display:flex !important; align-items:center !important; gap:32px; list-style:none; margin:0 !important; padding:0 !important; font-size:13.5px; font-weight:700; height:74px;}
  .topsteen-page .nav-links li{position:relative; display:flex !important; align-items:center !important; height:74px !important; margin:0 !important; padding:0 !important; line-height:1 !important;}
  .topsteen-page .nav-links > li > a{color:#fff; display:flex !important; align-items:center !important; gap:5px; height:74px !important; padding:0 !important; margin:0 !important; opacity:.95; line-height:1 !important;}
  .nav-links > li > a svg{width:10px;height:10px; transition:transform .3s;}
  .nav-links li:hover > a svg{transform:rotate(180deg);}
  .dropdown{
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px);
    background:#fff; color:var(--stone-black); min-width:210px; border-radius:10px;
    box-shadow:0 26px 56px -14px rgba(0,0,0,.4);
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
    padding:10px;
  }
  .nav-links li:hover .dropdown{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
  .dropdown a{
    position:relative; display:flex; align-items:center; padding:11px 14px; font-size:13px; font-weight:600;
    border-radius:7px; color:#332c24; overflow:hidden; transition:color .3s var(--ease), padding-left .3s var(--ease);
  }
  .dropdown a::before{
    content:""; position:absolute; inset:0; border-radius:7px;
    background:linear-gradient(90deg, var(--slab-cream-dim), rgba(234,226,211,0));
    transform:translateX(-100%); transition:transform .38s var(--ease); z-index:0;
  }
  .dropdown a span{position:relative; z-index:1;}
  .dropdown a:hover{color:var(--orange-deep); padding-left:22px;}
  .dropdown a:hover::before{transform:translateX(0);}

  /* ===== MEGA DROPDOWN — full-width flyout, 4 image cards + view-all ===== */
  .dropdown-mega{
    position:fixed; left:0; width:100vw; top:0;
    background:var(--slab-cream); color:var(--stone-black);
    box-shadow:0 44px 90px -18px rgba(0,0,0,.42);
    opacity:0; pointer-events:none; transform:translateY(-12px);
    transition:opacity .32s var(--ease), transform .32s var(--ease);
    z-index:65; border-top:1px solid rgba(20,18,16,.06);
  }
  .nav-links li:hover .dropdown-mega{opacity:1; pointer-events:auto; transform:translateY(0);}
  .mega-full-inner{max-width:1320px; margin:0 auto; padding:34px clamp(20px,5vw,64px) 30px; display:flex; align-items:stretch; gap:20px; flex-wrap:wrap;}
  .mega-item{
    position:relative; flex:1 1 180px; min-width:180px; height:220px; border-radius:12px; overflow:hidden;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .mega-item:hover{transform:translateY(-5px); box-shadow:0 22px 44px -14px rgba(0,0,0,.32);}
  .mega-thumb{position:absolute; inset:0; background:#3a332b;}
  .mega-thumb-veins{position:absolute; inset:0; background:#fff; mix-blend-mode:overlay; opacity:.55;}
  .mega-thumb-shade{position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.62) 100%);}
  .mega-item:hover .mega-thumb{transition:transform .5s var(--ease);}
  .mega-item .mega-thumb{transition:transform .5s var(--ease);}
  .mega-item:hover .mega-thumb{transform:scale(1.05);}
  .mega-label{position:absolute; left:16px; bottom:14px; z-index:2; color:#fff; font-family:'Fraunces',serif; font-weight:700; font-size:18px; letter-spacing:-.01em;}
  .mega-tag{position:absolute; left:16px; bottom:-16px; z-index:2; opacity:0; color:rgba(255,255,255,.8); font-size:11px; transition:opacity .3s var(--ease), bottom .3s var(--ease); display:none;}
  .mega-full-viewall{
    flex:0 0 128px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    border-radius:12px; transition:background .3s var(--ease);
  }
  .mega-full-viewall:hover{background:rgba(20,18,16,.045);}
  .mega-full-viewall .chev-circle{
    width:54px;height:54px;border-radius:50%; border:1.5px solid rgba(20,18,16,.18);
    display:flex; align-items:center; justify-content:center; transition:background .3s var(--ease), border-color .3s var(--ease);
  }
  .mega-full-viewall .chev-circle svg{width:19px;height:19px; color:var(--stone-black); transition:color .3s var(--ease);}
  .mega-full-viewall:hover .chev-circle{background:var(--orange); border-color:var(--orange);}
  .mega-full-viewall:hover .chev-circle svg{color:#fff;}
  .mega-full-viewall span{font-family:'Fraunces',serif; font-size:13.5px; font-weight:600; text-align:center; color:var(--stone-black);}
  .mega-full-footer{
    max-width:1320px; margin:0 auto; padding:0 clamp(20px,5vw,64px) 26px;
    border-top:1px solid rgba(20,18,16,.08); padding-top:16px;
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .mega-full-footer span{font-size:12.5px; color:#8b7f6f;}
  .mega-full-footer a{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-deep); display:flex; align-items:center; gap:8px;}
  .mega-full-footer a svg{width:12px;height:12px; transition:transform .3s var(--ease);}
  .mega-full-footer a:hover svg{transform:translateX(4px);}
  @media (max-width:1180px){
    .mega-item{height:190px; flex-basis:150px; min-width:150px;}
    .mega-full-viewall{flex-basis:110px;}
  }
  .topsteen-page .nav-cta{display:flex !important; align-items:center !important; gap:20px; height:74px; margin:0 !important; padding:0 !important;}
  /* .nav-icon-btn is a <div>, so generic parent-theme selectors never touch it —
     it was never the one drifting. */
  .topsteen-page .nav-icon-btn{
    box-sizing:border-box !important; width:36px !important; height:36px !important; border-radius:50% !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    color:#fff; cursor:pointer; transition:background .3s; position:relative; margin:0 !important; padding:0 !important;
    flex:0 0 auto !important; align-self:center !important; vertical-align:middle !important; line-height:1 !important;
  }
  .topsteen-page .nav-icon-btn:hover{background:rgba(255,255,255,.18);}
  .topsteen-page .nav-icon-btn svg{width:18px;height:18px;}
  .topsteen-page .cart-count{
    position:absolute; top:-2px; right:-2px; background:#fff; color:var(--orange-deep);
    font-size:9px; font-weight:800; width:15px;height:15px;border-radius:50%;
    display:flex;align-items:center;justify-content:center; margin:0; padding:0; line-height:1;
  }
  /* .nav-burger is a real <button>, unlike the rest of the header pieces above.
     Every parent WordPress/Astra-style theme ships a global `button{...}` reset
     (padding, line-height, min-height, vertical-align, box-sizing, appearance)
     that loads AFTER this stylesheet and wins at equal specificity — the exact
     problem already called out at the top of this file for body/h1-h3/a/img/.btn.
     That reset was quietly puffing this button out to a taller box and nudging
     it down/off-center next to the cart icon, which is a plain <div> and so was
     never touched by it. Scoping under .topsteen-page + !important on every
     box-model property matches this file's own established fix pattern and
     makes this button immune the same way .nav-cta/.logo/.nav-links already are. */
  .topsteen-page .nav-burger{
    -webkit-appearance:none; appearance:none; font:inherit; line-height:1 !important;
    box-sizing:border-box !important; display:none; width:38px !important; height:38px !important;
    min-width:38px !important; min-height:38px !important; max-width:38px !important; max-height:38px !important;
    border-radius:50% !important; align-items:center !important; justify-content:center !important;
    cursor:pointer; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
    position:relative; z-index:80; margin:0 !important; padding:0 !important;
    flex:0 0 auto !important; align-self:center !important; vertical-align:middle !important;
    transition:background .3s, transform .35s var(--ease), border-color .3s;
  }
  .topsteen-page .nav-burger:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.32);}
  .topsteen-page .nav-burger span{display:block; width:18px; height:2px; background:#fff; position:relative; margin:0; transition:background .25s;}
  .topsteen-page .nav-burger span::before, .topsteen-page .nav-burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; border-radius:2px; transition:transform .35s var(--ease), top .35s var(--ease);}
  .topsteen-page .nav-burger span::before{top:-6px;}
  .topsteen-page .nav-burger span::after{top:6px;}
  .topsteen-page .nav-burger.open{background:rgba(255,255,255,.22); transform:rotate(90deg);}
  .topsteen-page .nav-burger.open span{background:transparent;}
  .topsteen-page .nav-burger.open span::before{top:0; transform:rotate(45deg);}
  .topsteen-page .nav-burger.open span::after{top:0; transform:rotate(-45deg);}

  /* ===== MOBILE NAV — glass panel, staggered motion ===== */
  .mobile-nav{
    position:fixed; inset:0; z-index:90;
    background:linear-gradient(155deg, rgba(24,20,16,.86) 0%, rgba(14,12,10,.94) 100%);
    backdrop-filter:blur(28px) saturate(160%); -webkit-backdrop-filter:blur(28px) saturate(160%);
    border-left:1px solid rgba(245,239,228,.09);
    box-shadow:-40px 0 90px -30px rgba(0,0,0,.6);
    display:flex; flex-direction:column; padding:112px 34px 40px 34px;
    transform:translateX(100%); transition:transform .55s var(--ease);
    overflow-y:auto; visibility:hidden;
  }
  .mobile-nav.open{transform:translateX(0); visibility:visible;}
  .mobile-nav-veins{position:absolute; inset:0; background:#fff; opacity:.045; mix-blend-mode:screen; pointer-events:none;}
  .mobile-nav-glow-1{position:absolute; width:340px;height:340px;border-radius:50%; top:-120px; right:-110px; background:radial-gradient(circle at 40% 40%, rgba(226,98,42,.24), transparent 70%); pointer-events:none;}
  .mobile-nav-glow-2{position:absolute; width:260px;height:260px;border-radius:50%; bottom:-90px; left:-90px; background:radial-gradient(circle at 60% 60%, rgba(245,239,228,.06), transparent 70%); pointer-events:none;}
  .mobile-nav .mnav-row{
    position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family:inherit;
    font-family:'Fraunces',serif; font-size:21px; padding:16px 6px; border-bottom:1px solid var(--line); color:var(--slab-cream);
    opacity:0; transform:translateX(28px);
    transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease), padding-left .3s var(--ease), background .3s var(--ease);
    border-radius:6px;
  }
  .mobile-nav .mnav-row svg.mnav-arrow{width:14px;height:14px; opacity:0; transform:translateX(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease); color:var(--orange-2); flex-shrink:0;}
  .mobile-nav.open .mnav-row{opacity:1; transform:translateX(0);}
  .mobile-nav .mnav-row:hover, .mobile-nav a.mnav-row:active{color:var(--orange-2); padding-left:14px; background:rgba(226,98,42,.08);}
  .mobile-nav .mnav-row:hover svg.mnav-arrow, .mobile-nav a.mnav-row:active svg.mnav-arrow{opacity:1; transform:translateX(0);}
  .mng-chev{width:15px;height:15px; color:var(--marble-muted); transition:transform .4s var(--ease), color .3s;}
  .mobile-nav-group.open > .mnav-row .mng-chev{transform:rotate(180deg); color:var(--orange-2);}
  .mobile-nav-group-panel{max-height:0; overflow:hidden; transition:max-height .5s var(--ease); padding-left:8px;}
  .mobile-nav-group.open .mobile-nav-group-panel{max-height:700px;}
  .mobile-nav-group-panel a{
    display:flex; align-items:center; gap:12px; padding:11px 10px; font-family:'Manrope',sans-serif;
    font-size:14.5px; font-weight:700; color:var(--marble-muted); border-radius:8px;
    transition:color .25s var(--ease), background .25s var(--ease), padding-left .25s var(--ease);
  }
  .mobile-nav-group-panel a:hover{color:var(--orange-2); background:rgba(226,98,42,.07); padding-left:16px;}
  .mng-thumb{width:30px;height:30px;border-radius:8px;flex-shrink:0;}
  .mobile-nav .btn{
    position:relative; z-index:2; margin-top:28px; width:fit-content;
    opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease) .5s, transform .5s var(--ease) .5s;
  }
  .mobile-nav.open .btn{opacity:1; transform:translateY(0);}
  .mobile-nav-social{position:relative; z-index:2; display:flex; gap:12px; margin-top:auto; padding-top:26px;
    opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease) .56s, transform .5s var(--ease) .56s;}
  .mobile-nav.open .mobile-nav-social{opacity:1; transform:translateY(0);}
  .mobile-nav-social a{width:36px;height:36px;border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; color:var(--marble-muted); padding:0; transition:border-color .3s, color .3s, transform .3s, background .3s;}
  .mobile-nav-social a svg{width:16px;height:16px;}
  .mobile-nav-social a:hover{border-color:var(--orange-2); color:var(--orange-2); transform:translateY(-2px); background:rgba(226,98,42,.08);}
  .mobile-nav-close{
    position:absolute; top:26px; right:26px; z-index:3; width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(245,239,228,.16); background:rgba(255,255,255,.05); backdrop-filter:blur(10px);
    color:var(--slab-cream); font-size:15px; cursor:pointer; transition:background .35s, transform .45s var(--ease), border-color .3s;
    /* The ✕ glyph is not centered in its own font box, and a <button> with no
       flex layout falls back to left-aligned inline text — that's what was
       pushing it off-center inside the circle. Flex + line-height:1 pins the
       glyph's visual center to the button's actual center regardless of font. */
    display:flex; align-items:center; justify-content:center; padding:0; line-height:1; box-sizing:border-box;
  }
  /* SVG icon (replaces the old "✕" text glyph) so it's centered independent
     of font — same fix as .cfg-arrow above. */
  .mobile-nav-close svg{width:16px; height:16px; display:block; flex-shrink:0;}
  .mobile-nav-close:hover{background:var(--orange); border-color:var(--orange); transform:rotate(90deg);}
  body.nav-locked{overflow:hidden;}

  /* ======================================================================
     ============================================================
     HOMEPAGE — page-topsteen.php
     Hero, stonebar, product-view scroll story, configurator, comparison,
     category grid, process, social proof, visit, FAQ, stone-edge/final
     CTA. Stacked sections + hover-driven cards + marquee is this page's
     motion language — deliberately different from About's scrollytelling,
     Showroom's hotspot world, and Contact's channel-switcher/deck.
     ============================================================
     ====================================================================== */
  /* ===== HERO ===== */
  .hero{
    position:relative; overflow:hidden;
    background:radial-gradient(ellipse 70% 60% at 22% 15%, #241f18 0%, var(--stone-black) 62%);
  }
  .hero-veins{position:absolute; inset:0; background:#fff; filter:url(#marble-hero); opacity:.10; mix-blend-mode:screen;}
  .hero-spot{
    position:absolute; inset:0; pointer-events:none; z-index:1;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%), rgba(226,98,42,.14), transparent 65%);
    transition:background .1s;
  }
  .hero-grid{
    position:relative; z-index:2; width:100%;
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;
    padding-top:64px; padding-bottom:70px;
  }
  .hero h1{font-size:clamp(38px,4.6vw,62px); line-height:1.08; color:var(--slab-cream);}
  .tw-char{opacity:0;}
  .tw-char.tw-visible{opacity:1;}
  .tw-cursor{
    display:inline-block; width:3px; height:0.85em; background:var(--orange-2);
    margin-left:3px; vertical-align:-0.08em; animation:tw-blink .9s steps(1) infinite;
  }
  .tw-cursor.tw-done{opacity:.55;}
  @keyframes tw-blink{0%,50%{opacity:1;} 50.01%,100%{opacity:0;}}
  @media (prefers-reduced-motion: reduce){
    .tw-char{opacity:1 !important;}
    .tw-cursor{display:none;}
  }
  .hero-sub{margin-top:24px; max-width:480px; font-size:16px; line-height:1.7; color:var(--marble-muted);}
  .hero-actions{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}
  .hero-stats{margin-top:48px; display:flex; gap:44px; border-top:1px solid var(--line); padding-top:26px; max-width:520px;}
  .stat-num{font-family:'Fraunces',serif; font-size:32px; color:var(--orange-2);}
  .stat-label{font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--marble-muted); margin-top:6px;}

  /* 360 viewer */
  .viewer-card{
    background:linear-gradient(180deg, #1d1a15 0%, #141210 100%);
    border:1px solid var(--line); border-radius:14px; padding:22px 22px 18px 22px;
    position:relative;
  }
  .viewer-badge{
    position:absolute; top:18px; right:18px; z-index:5;
    font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--orange-2);
    border:1px solid rgba(240,121,60,.4); border-radius:100px; padding:6px 12px;
    display:flex; align-items:center; gap:6px; background:rgba(226,98,42,.08);
  }
  .viewer-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--orange-2); animation:pulse-dot 1.6s infinite;}
  @keyframes pulse-dot{0%,100%{opacity:1;} 50%{opacity:.25;}}
  .viewer-toggle{display:flex; gap:4px; background:rgba(255,255,255,.05); border-radius:100px; padding:4px; width:fit-content; margin:0 auto 16px 0;}
  /* .viewer-toggle-btn is a real <button>, just like .nav-burger was — same
     parent-theme generic `button{padding/line-height}` desktop reset was
     winning at equal specificity here too, which is why "In een kamer" sat
     low in its box instead of centered. Same fix: scope under .topsteen-page
     and pin every box-model property with !important. */
  .topsteen-page .viewer-toggle-btn{
    -webkit-appearance:none; appearance:none; font-family:'Space Mono',monospace !important; box-sizing:border-box !important;
    background:none;border:none;color:var(--marble-muted);font-size:10px !important;letter-spacing:.05em;text-transform:uppercase;
    padding:7px 15px !important;margin:0 !important;line-height:1.4 !important;vertical-align:middle !important;
    border-radius:100px;cursor:pointer;transition:background .3s,color .3s;
  }
  .topsteen-page .viewer-toggle-btn:not(.active):hover{background:none;color:var(--marble-muted);}
  .topsteen-page .viewer-toggle-btn.active{background:var(--orange);color:#fff;}
  .viewer-wrap{height:360px; display:flex; align-items:center; justify-content:center; perspective:1300px; position:relative; border-radius:10px; overflow:hidden;}
  .viewer-tilt{transform:rotateX(60deg); transform-style:preserve-3d; transition:transform .55s var(--ease);}
  .viewer-room-scene{position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); pointer-events:none; z-index:0;}
  .viewer-card.room-mode .viewer-room-scene{opacity:1;}
  .viewer-card.room-mode .viewer-tilt{transform:rotateX(60deg) scale(.62) translateY(10%);}
  .viewer-room-wall{position:absolute; left:0;right:0;top:0;height:44%; background:linear-gradient(180deg,#28231c,#1c1915);}
  .viewer-room-floor{position:absolute; left:0;right:0;bottom:0;height:56%; background:linear-gradient(180deg,#3c3024,#221b14);}
  .viewer-room-floor::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg, rgba(0,0,0,0) 0 18px, rgba(0,0,0,.12) 18px 19px);}
  .viewer-room-window{position:absolute; top:9%; right:14%; width:60px; height:96px; background:linear-gradient(180deg, rgba(240,180,120,.4), rgba(240,180,120,.06)); border:1px solid rgba(255,255,255,.1); border-radius:3px;}
  .viewer-room-sofa{position:absolute; left:5%; bottom:10%; width:110px; height:46px; background:#2a251f; border-radius:14px 14px 5px 5px; box-shadow:0 12px 20px -8px rgba(0,0,0,.5);}
  .viewer-room-plant{position:absolute; right:6%; bottom:12%; width:16px; height:60px; background:linear-gradient(180deg,#4b5c47,#2f3a2c); border-radius:50% 50% 4px 4px;}
  .viewer-spin{width:280px;height:280px; position:relative; cursor:grab; touch-action:none;}
  .viewer-spin:active{cursor:grabbing;}
  .table-top{width:100%;height:100%;border-radius:50%; position:relative; box-shadow:0 0 0 7px rgba(0,0,0,.18) inset, 0 50px 90px rgba(0,0,0,.55);}
  .table-veins{position:absolute; inset:0; border-radius:50%; background:#fff; mix-blend-mode:overlay; opacity:.7;}
  .table-rim{position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(255,255,255,.08); pointer-events:none;}
  .viewer-shadow{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    width:230px; height:34px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 75%);
    filter:blur(2px);
  }
  .viewer-hint{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.05em; color:var(--marble-muted);
    margin-top:8px;
  }
  .viewer-hint svg{width:14px;height:14px; color:var(--orange-2);}
  .viewer-deg{color:var(--orange-2); font-weight:700;}
  .viewer-dots{display:flex; justify-content:center; gap:8px; margin-top:14px;}
  /* Same story again: a real <button>, this time getting puffed up into a
     full-size default button box instead of staying a small dash indicator.
     Scoped + pinned the same way as the two fixes above. */
  .topsteen-page .viewer-dots button{
    -webkit-appearance:none; appearance:none; box-sizing:border-box !important;
    width:26px !important; height:4px !important; min-width:26px !important; min-height:4px !important;
    max-width:26px !important; max-height:4px !important; border-radius:4px !important; border:none; background:var(--line);
    cursor:pointer; transition:background .3s; padding:0 !important; margin:0 !important; font:inherit;
  }
  .topsteen-page .viewer-dots button:hover{background:var(--line);}
  .topsteen-page .viewer-dots button.active{background:var(--orange-2);}

  /* purchase toast */
  .ptoast{
    position:fixed; left:22px; bottom:22px; z-index:70;
    background:var(--stone-black-2); border:1px solid var(--line); border-radius:12px;
    padding:14px 16px; display:flex; gap:12px; align-items:center;
    max-width:300px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    transform:translateY(140%); opacity:0; transition:transform .6s var(--ease), opacity .6s var(--ease);
  }
  .ptoast.show{transform:translateY(0); opacity:1;}
  .ptoast-thumb{width:44px;height:44px;border-radius:8px; flex-shrink:0; position:relative; overflow:hidden;}
  .ptoast-thumb .stonebar-veins{mix-blend-mode:overlay;}
  .ptoast-text{font-size:12px; line-height:1.5; color:var(--marble-muted);}
  .ptoast-text strong{display:block; color:var(--slab-cream); font-size:13.5px; font-family:'Fraunces',serif; font-weight:600;}
  .ptoast-close{
    margin-left:auto; width:20px;height:20px;border-radius:50%; background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; color:var(--marble-muted); font-size:11px;
  }

  /* ===== SECTION SHELL ===== */
  .section{padding:110px 0;}
  .section-cream{background:var(--slab-cream); color:var(--stone-black);}
  .section-cream .eyebrow{color:var(--orange-deep);}
  .section-cream .eyebrow::before{background:var(--orange-deep);}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap;}
  .section-head h2{font-size:clamp(30px,3.6vw,46px); line-height:1.12; max-width:640px;}
  .section-head p{max-width:340px; font-size:15px; line-height:1.6; color:var(--marble-muted); margin:0;}
  .section-cream .section-head p{color:#6b6255;}

  /* ===== STONEBAR ===== */
  .stonebar{display:flex; height:420px; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
  .stonebar-slab{position:relative; flex:1; overflow:hidden; cursor:pointer; transition:flex .6s var(--ease); border-right:1px solid var(--line);}
  .stonebar-slab:last-child{border-right:none;}
  .stonebar-slab:hover, .stonebar-slab.active{flex:3.4;}
  .stonebar-base{position:absolute;inset:0;}
  .stonebar-veins{position:absolute;inset:0;background:#fff;mix-blend-mode:overlay;}
  .stonebar-shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);}
  .stonebar-info{position:absolute; left:16px; right:16px; bottom:16px; color:#fff; z-index:2;}
  .stonebar-index{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; opacity:.75;}
  .stonebar-name{font-family:'Fraunces',serif; font-size:15px; margin-top:4px; white-space:nowrap; opacity:.95;}
  .stonebar-desc{font-size:11.5px; line-height:1.5; max-width:220px; margin-top:10px; opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease) .1s, transform .3s var(--ease) .1s;}
  .stonebar-slab:hover .stonebar-desc, .stonebar-slab.active .stonebar-desc{opacity:.88; transform:translateY(0);}
  .stonebar-note{margin-top:20px; font-size:13px; color:var(--marble-muted); display:flex; align-items:center; gap:10px;}

  /* ===== PRODUCT VIEW (scroll story) — restored, unchanged from the version you liked ===== */
  .productview{position:relative; height:380vh; background:var(--stone-black-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .pv-bg{position:absolute; inset:0; background:#fff; filter:url(#marble-3); opacity:.035; mix-blend-mode:screen;}
  .pv-sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center;}
  .pv-inner{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; width:100%; position:relative; z-index:2;}
  .pv-visual{display:flex; align-items:center; justify-content:center; perspective:1200px; position:relative;}
  .pv-eyebrow-fixed{position:absolute; top:-46px; left:0;}
  .pv-table{width:320px; height:320px; border-radius:50%; position:relative; background:#3a3128; box-shadow:0 0 0 8px rgba(0,0,0,.18) inset, 0 60px 100px -25px rgba(0,0,0,.6); transition:transform .1s linear;}
  .pv-table-veins{position:absolute; inset:0; border-radius:50%; background:#fff; mix-blend-mode:overlay; opacity:.75;}
  .pv-ring{position:absolute; inset:-18px; border:1px dashed rgba(245,239,228,.15); border-radius:50%;}
  .pv-callouts{position:relative; height:240px;}
  .pv-callout{position:absolute; inset:0; opacity:0; transform:translateY(28px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none;}
  .pv-callout.active{opacity:1; transform:translateY(0); pointer-events:auto;}
  .pv-callout-index{font-family:'Fraunces',serif; font-size:52px; color:rgba(240,121,60,.18); line-height:1; margin-bottom:6px;}
  .pv-callout h3{font-size:clamp(22px,2.4vw,30px); line-height:1.28; max-width:440px;}
  .pv-callout p{margin-top:14px; font-size:15px; line-height:1.75; color:var(--marble-muted); max-width:420px;}
  .pv-progress-track{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--line); z-index:3;}
  .pv-progress-bar{height:100%; width:0%; background:linear-gradient(90deg, var(--orange-deep), var(--orange-2));}
  .pv-stage-nums{position:absolute; bottom:16px; left:0; z-index:3; display:flex; gap:8px; font-family:'Space Mono',monospace; font-size:11px; color:var(--marble-muted);}
  .pv-stage-nums span{padding:4px 0;}
  .pv-stage-nums span.active{color:var(--orange-2);}

  /* ===== CONFIGURATOR — 3 sliding product samples + shared stone/size controls ===== */
  .configurator{
    display:grid; grid-template-columns:1.05fr 0.95fr;
    border:1px solid var(--line); border-radius:16px; overflow:hidden;
    background:linear-gradient(160deg, #1d1a15 0%, #141210 100%);
  }
  .cfg-panel, .config-controls{min-width:0;}
  .cfg-panel{position:relative; padding:44px 40px 34px 40px; display:flex; flex-direction:column; align-items:center; min-width:0;}
  .cfg-index-badge{align-self:flex-start; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-2); margin-bottom:20px;}
  .cfg-track-wrap{position:relative; overflow:hidden; border-radius:12px; width:100%; min-width:0;}
  .cfg-track{display:flex; transition:transform .6s var(--ease); min-width:0;}
  .cfg-slide{flex:0 0 100%; min-width:0; display:flex; flex-direction:column; align-items:center;}
  .cfg-preview{display:flex; align-items:center; justify-content:center; height:300px; width:100%; min-width:0;}
  .cfg-shape{position:relative; box-shadow:0 40px 80px -20px rgba(0,0,0,.55); transition:background .4s var(--ease), transform .4s var(--ease); max-width:100%;}
  .cfg-shape.rect{width:min(300px, 100%); aspect-ratio:5/3; height:auto; border-radius:8px;}
  .cfg-shape.round{width:min(240px, 62vw); max-width:240px; aspect-ratio:1/1; height:auto; border-radius:50%;}
  .cfg-shape.block{width:min(240px, 62vw); max-width:240px; aspect-ratio:4/3; height:auto; border-radius:6px;}
  .cfg-veins{position:absolute; inset:0; border-radius:inherit; background:#fff; mix-blend-mode:overlay; opacity:.72;}
  .cfg-name{font-family:'Fraunces',serif; font-size:19px; margin-top:20px; color:var(--slab-cream);}
  .cfg-arrow{
    /* Positioned relative to .cfg-track-wrap, but that box's total height also
       includes the model name caption below the image — so a top:% here was
       measuring against slide+caption height, not the image alone, and drifted
       the arrows down onto the lower part of the image. .cfg-preview has a
       fixed height (300px desktop / 260px at <=980px, set below), so anchoring
       to that exact pixel value keeps the arrows centered on the IMAGE itself,
       regardless of how tall the caption text underneath happens to render. */
    position:absolute; top:150px; transform:translateY(-50%); z-index:4;
    width:38px;height:38px;border-radius:50%; border:1px solid rgba(245,239,228,.18);
    background:rgba(20,18,16,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    color:var(--slab-cream); cursor:pointer; font-size:15px; transition:border-color .3s, color .3s, background .3s;
    /* Same root cause as .mobile-nav-close: the ← / → glyph was left-aligned
       inside the button box instead of centered, so it visually sat off to
       one side of the circle. Flex-centering fixes it at every breakpoint,
       including the 32px/13px mobile size set below. */
    display:flex; align-items:center; justify-content:center; padding:0; line-height:1; box-sizing:border-box;
  }
  /* SVG icon (replaces the old "←"/"→" text glyph, which centered
     differently depending on which font actually loaded). width/height set
     here instead of on the glyph itself, so the icon is always exactly
     centered in the circle at every breakpoint, independent of font. */
  .cfg-arrow svg{width:16px; height:16px; display:block; flex-shrink:0;}
  .cfg-arrow:hover{border-color:var(--orange-2); color:var(--orange-2); background:rgba(226,98,42,.16);}
  .cfg-arrow-left{left:8px;}
  .cfg-arrow-right{right:8px;}
  .cfg-carousel-nav{display:flex; align-items:center; justify-content:center; margin-top:18px;}
  .cfg-dots{display:flex; gap:8px;}
  .cfg-dots button{width:8px;height:8px;border-radius:50%; border:none; background:var(--line); cursor:pointer; transition:background .3s, transform .3s; padding:0;}
  .cfg-dots button:hover{background:var(--line);}
  .cfg-dots button.active{background:var(--orange-2); transform:scale(1.25);}
  .config-controls{padding:44px 40px; border-left:1px solid var(--line); background:rgba(255,255,255,.015); display:flex; flex-direction:column; gap:26px; justify-content:center;}
  .config-label{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--marble-muted); margin-bottom:12px;}
  .config-options{display:flex; gap:10px; flex-wrap:wrap;}
  .config-chip{background:none; border:1px solid var(--line); color:var(--slab-cream); padding:10px 18px; border-radius:100px; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .3s, color .3s;}
  .config-chip.active, .config-chip:hover{border-color:var(--orange-2); color:var(--orange-2); background:none;}
  .config-swatches{display:flex; gap:10px;}
  .config-swatch{width:38px;height:38px;border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; transition:transform .3s, border-color .3s;}
  .config-swatch.active{border-color:var(--orange-2); transform:scale(1.12);}
  .config-summary{font-family:'Fraunces',serif; font-size:16.5px; color:var(--marble-muted);}
  .config-summary strong{color:var(--slab-cream); font-weight:600;}

  /* ===== COMPARISON — checklist cards ===== */
  .compare-cards{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .compare-card{position:relative; border-radius:14px; padding:38px 34px; background:#fff; border:1px solid var(--line-soft);}
  .compare-card.us{background:linear-gradient(160deg, #fff 0%, #fbeee2 100%); border:1px solid rgba(226,98,42,.3); box-shadow:0 34px 64px -32px rgba(226,98,42,.4);}
  .compare-card.us::before{
    content:"Aanbevolen"; position:absolute; top:-13px; left:34px; background:var(--orange); color:#fff;
    font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    padding:6px 14px; border-radius:100px;
  }
  .compare-card h4{font-family:'Fraunces',serif; font-size:23px; margin:0;}
  .compare-sub{font-size:13px; color:#8a8073; margin-top:4px; margin-bottom:26px;}
  .compare-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:17px;}
  .compare-list li{display:flex; align-items:flex-start; gap:12px; font-size:14px; line-height:1.55; color:#4a4438; margin:0;}
  .compare-list .ico{width:20px;height:20px;border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; margin-top:1px;}
  .compare-card.us .ico{background:var(--orange); color:#fff;}
  .compare-card.standard .ico{background:#e7e0d2; color:#9a8f7d;}

  /* ===== CATEGORY GRID ===== */
  .cat-grid{display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:auto auto; gap:20px;}
  .cat-card{
    position:relative; border-radius:10px; overflow:hidden; min-height:340px;
    display:flex; align-items:flex-end; padding:28px;
    background:linear-gradient(160deg, #241f18 0%, #171410 100%);
  }
  .cat-card.tall{grid-row:span 2; min-height:704px;}
  .cat-texture{position:absolute;inset:0;background:#fff;opacity:.08; transition:transform .8s var(--ease);}
  .cat-card:hover .cat-texture{transform:scale(1.08);}
  .cat-card::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,16,0) 30%, rgba(20,18,16,.88) 100%);}
  .cat-content{position:relative; z-index:2;}
  .cat-content .eyebrow{color:var(--orange-2); margin-bottom:10px;}
  .cat-content .eyebrow::before{background:var(--orange-2);}
  .cat-card h3{font-size:26px; color:var(--slab-cream);}
  .cat-link{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; font-weight:600; color:var(--marble-muted); transition:gap .3s, color .3s;}
  .cat-card:hover .cat-link{color:var(--orange-2); gap:12px;}

  /* ===== PROCESS ===== */
  .process-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:70px;}
  .process-copy p{font-size:16px; line-height:1.75; color:var(--marble-muted); max-width:420px; margin-top:20px;}
  .process-list{list-style:none; margin:0; padding:0;}
  .process-item{display:flex; gap:26px; padding:30px 0; border-top:1px solid var(--line); transition:padding-left .4s var(--ease);}
  .process-item:hover{padding-left:10px;}
  .process-item:last-child{border-bottom:1px solid var(--line);}
  .process-num{font-family:'Fraunces',serif; font-size:15px; color:var(--orange-2); padding-top:2px;}
  .process-body h4{font-family:'Fraunces',serif; font-weight:500; font-size:19px; margin:0 0 8px 0;}
  .process-body p{font-size:14.5px; line-height:1.6; color:var(--marble-muted); margin:0; max-width:460px;}

  /* ===== SOCIAL PROOF ===== */
  .proof-head{display:flex; align-items:center; gap:18px; margin-bottom:44px; flex-wrap:wrap;}
  .proof-score{font-family:'Fraunces',serif; font-size:44px; color:var(--stone-black);}
  .proof-stars{color:var(--orange-deep); font-size:14px; letter-spacing:2px;}
  .proof-count{font-size:13px; color:#6b6255;}
  .proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .proof-card{background:#fff; border:1px solid var(--line-soft); padding:30px; border-radius:10px; position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
  .proof-card:hover{transform:translateY(-6px); box-shadow:0 30px 50px -20px rgba(0,0,0,.25);}
  .proof-quote{font-size:15px; line-height:1.65; color:#33302a; position:relative; z-index:2;}
  .proof-who{margin-top:20px; display:flex; align-items:center; gap:12px; position:relative; z-index:2;}
  .proof-avatar{width:36px;height:36px;border-radius:50%; background:linear-gradient(135deg, var(--orange), var(--oxblood));}
  .proof-name{font-size:13.5px; font-weight:700;}
  .proof-loc{font-size:12px; color:#8a8073;}

  /* ===== VISIT ===== */
  .visit{position:relative; background:var(--stone-black-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;}
  .visit-veins{position:absolute;inset:0;background:#fff;filter:url(#marble-2);opacity:.05;mix-blend-mode:screen;}
  /* padding-top/bottom only (not shorthand padding) — this element also
     carries the .wrap class, which sets the left/right side padding
     (clamp(20px,5vw,64px)). The old rule used shorthand "padding:70px 0",
     and because this rule loads after .wrap in the file, it silently zeroed
     out .wrap's horizontal padding on the same specificity — that's exactly
     what was pinning "Laat je inspireren…" flush to the screen edge with no
     side margin at all on mobile. */
  .visit-inner{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; padding-top:70px; padding-bottom:70px;}
  .visit-inner h2{font-size:clamp(26px,3vw,38px); max-width:520px;}
  .visit-meta{display:flex; gap:50px; flex-wrap:wrap; align-items:center;}
  .visit-meta-block .eyebrow{margin-bottom:8px;}
  .visit-meta-block p{margin:0; font-size:14.5px; color:var(--marble-muted); line-height:1.6;}
  /* Base rule above wraps by design for tablet/mobile. But flex-wrap:wrap
     with no lower bound also kicks in on plenty of ordinary desktop/laptop
     widths (1366px, 1440px, etc.) the moment the heading + the three meta
     items don't quite fit on one line, dropping the meta group onto its own
     row underneath the heading instead of staying inline beside it like the
     reference design. Locking it to a single row from 981px up (this file's
     existing desktop threshold) restores that without touching the
     tablet/mobile stacked layout below, which is unaffected either way. */
  @media (min-width:981px){
    .visit-inner{flex-wrap:nowrap;}
    .visit-meta{flex-wrap:nowrap;}
    /* Once the row is locked to one line, the button — a flex child with the
       browser default flex-shrink:1 — gets squeezed for space by the two
       text blocks next to it and its own text wraps inside. It should never
       shrink; it's the smallest, most important element in the row. */
    .visit-meta .btn{flex-shrink:0; white-space:nowrap;}
  }

  /* ===== FAQ ===== */
  .faq-list{max-width:820px;}
  .faq-item{border-top:1px solid var(--line);}
  .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-q{width:100%; background:none; border:none; color:var(--slab-cream); display:flex; justify-content:space-between; align-items:center; padding:24px 4px; font-family:'Fraunces',serif; font-size:18px; text-align:left; cursor:pointer;}
  .faq-q:hover{background:none; color:var(--slab-cream);}
  .faq-q .plus{font-family:'Manrope',sans-serif; font-size:20px; color:var(--orange-2); transition:transform .35s var(--ease); flex-shrink:0; margin-left:20px;}
  .faq-item.open .faq-q .plus{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
  .faq-a-inner{padding:0 4px 26px 4px; font-size:14.5px; line-height:1.7; color:var(--marble-muted); max-width:640px;}

  /* ===== STONE EDGE + FINAL CTA ===== */
  .stone-edge{
    height:46px;
    background:linear-gradient(120deg, var(--orange-deep), var(--orange) 55%, var(--orange-2));
    clip-path:polygon(0% 100%, 2% 35%, 7% 88%, 12% 15%, 18% 78%, 25% 8%, 32% 65%, 39% 22%, 46% 92%, 53% 12%, 60% 70%, 67% 20%, 74% 84%, 81% 30%, 88% 90%, 95% 18%, 100% 100%);
  }
  .final-cta{position:relative; background:linear-gradient(120deg, var(--orange-deep), var(--orange)); overflow:hidden; padding:80px 0;}
  .final-cta-veins{position:absolute; inset:0; background:#fff; filter:url(#marble-3); opacity:.09; mix-blend-mode:overlay;}
  .final-cta-inner{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
  .final-cta-inner .eyebrow{color:rgba(255,255,255,.85);}
  .final-cta-inner .eyebrow::before{background:rgba(255,255,255,.85);}
  .final-cta-inner h2{color:#fff; font-size:clamp(26px,3.4vw,42px); margin-top:14px; max-width:600px;}
  .final-cta-right{display:flex; flex-direction:column; align-items:flex-start; gap:18px;}
  .final-cta-badges{display:flex; gap:22px; flex-wrap:wrap;}
  .final-cta-badge{display:flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(255,255,255,.9); font-weight:600;}
  .final-cta-badge svg{width:16px;height:16px;}
  .topsteen-page .btn-cream{background:#fff !important; color:var(--orange-deep) !important;}
  .topsteen-page .btn-cream:hover{transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(0,0,0,.4) !important;}

  /* ======================================================================
     ============================================================
     GLOBAL — FOOTER (shared by every page)
     ============================================================
     ====================================================================== */
  /* ===== FOOTER ===== */
  .topsteen-page footer{position:relative; background:#0F0D0A; padding-top:76px; overflow:hidden;}
  .footer-spot{
    position:absolute; inset:0; pointer-events:none; z-index:1;
    background:radial-gradient(420px circle at var(--fx,50%) var(--fy,30%), rgba(226,98,42,.14), transparent 65%);
    transition:background .1s;
  }
  .footer-veins{position:absolute; inset:0; background:#fff; filter:url(#marble-2); opacity:.035; mix-blend-mode:screen; pointer-events:none;}
  .footer-shard{position:absolute; pointer-events:none;}
  .footer-shard-base{position:absolute; inset:0; background:#241f18;}
  .footer-shard-veins{position:absolute; inset:0; background:#fff; mix-blend-mode:overlay; opacity:.5;}
  .footer-shard-glow{position:absolute; inset:0; background:linear-gradient(135deg, rgba(226,98,42,.14) 0%, transparent 45%, rgba(0,0,0,.25) 100%);}
  .footer-shard-1{width:640px; height:560px; top:-190px; right:-160px; opacity:.85;
    clip-path:polygon(18% 0%, 100% 6%, 86% 52%, 100% 100%, 52% 82%, 8% 100%, 0% 44%);}
  .footer-shard-2{width:420px; height:400px; bottom:-140px; left:-110px; opacity:.7;
    clip-path:polygon(0% 22%, 42% 0%, 100% 18%, 82% 68%, 100% 100%, 22% 100%, 0% 62%);}
  .footer-glow-orange{position:absolute; width:520px; height:520px; border-radius:50%; top:-160px; right:-140px; background:radial-gradient(circle at 30% 30%, rgba(226,98,42,.10), transparent 70%); pointer-events:none;}
  .footer-contact-row{display:flex; align-items:flex-start; gap:10px;}
  .footer-contact-row svg{width:15px;height:15px; flex-shrink:0; margin-top:2px; color:var(--orange-2);}
  .footer-top{position:relative; z-index:2; display:grid; grid-template-columns:1.25fr 0.9fr 0.9fr 1fr 1.1fr; gap:36px; padding-bottom:56px; border-bottom:1px solid var(--line);}
  .footer-brand p{font-size:13.5px; line-height:1.7; color:var(--marble-muted); margin-top:16px; max-width:260px;}
  .topsteen-page .footer-newsletter{margin-top:24px; display:flex !important; max-width:280px; border:1px solid var(--line); border-radius:100px !important; overflow:hidden; background:rgba(255,255,255,.03); box-shadow:none !important;}
  .topsteen-page .footer-newsletter input{
    flex:1; background:none !important; border:none !important; box-shadow:none !important;
    padding:11px 16px !important; margin:0 !important; font-family:'Manrope',sans-serif !important;
    font-size:12.5px !important; line-height:normal !important; color:var(--slab-cream) !important;
    outline:none; -webkit-appearance:none; appearance:none; border-radius:0 !important; height:auto !important;
    width:auto !important; min-width:0;
  }
  .topsteen-page .footer-newsletter input::placeholder{color:var(--marble-muted); opacity:1;}
  .topsteen-page .footer-newsletter button{
    background:var(--orange) !important; border:none !important; box-shadow:none !important;
    width:38px !important; height:auto !important; flex-shrink:0; display:flex !important;
    align-items:center; justify-content:center; color:#fff !important; cursor:pointer;
    transition:background .3s; padding:0 !important; margin:0 !important; border-radius:0 !important;
    -webkit-appearance:none; appearance:none;
  }
  .topsteen-page .footer-newsletter button:hover{background:var(--orange-2) !important;}
  .topsteen-page .footer-newsletter button svg{width:15px;height:15px;}
  .footer-social{display:flex; gap:12px; margin-top:22px;}
  .footer-social a{width:34px;height:34px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .3s, color .3s, transform .3s, background .3s; color:var(--marble-muted);}
  .footer-social a svg{width:16px;height:16px;}
  .footer-social a:hover{border-color:var(--orange-2); color:var(--orange-2); transform:translateY(-3px); background:rgba(226,98,42,.08);}
  .footer-col h5, .footer-hours h5{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--marble-muted); margin-bottom:18px;}
  .footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .footer-col a{font-size:13.5px; color:var(--slab-cream); opacity:.85; transition:opacity .3s;}
  .footer-col a:hover{opacity:1; color:var(--orange-2);}
  /* margin:0 — same parent-theme li{margin-bottom:...} leak was stacking on
     top of .footer-col ul's own gap:12px, doubling the space between rows. */
  .footer-col li{font-size:13px; line-height:1.6; color:var(--marble-muted); margin:0;}
  /* .hours-list was losing to the parent theme's own global ul/li list
     styling — same recurring issue as .nav-burger, the viewer toggle,
     and the showroom floorplan dots earlier: an unscoped, non-!important
     rule loses a specificity tie against theme CSS that loads after it.
     Here that meant the theme's own numbered/bulleted marker (in its
     accent blue) was showing through instead of list-style:none, which
     is what actually looked like "blue ordered list numbers" on the
     live site even though nothing in this file ever styles anything
     blue. Scoped under .topsteen-page with !important, plus an explicit
     ::marker reset for browsers that target the marker directly rather
     than falling back to list-style. */
  .topsteen-page .hours-list{list-style:none !important; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
  .topsteen-page .hours-list li{list-style:none !important; display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--marble-muted); transition:color .3s, background .3s; padding:6px 8px; border-radius:6px; margin:0 -8px;}
  .topsteen-page .hours-list li::marker{content:none;}
  .hours-list li .htime{margin-left:auto; font-family:'Space Mono',monospace; font-size:11px;}
  .hdot{width:7px;height:7px;border-radius:50%;background:#5a5348; flex-shrink:0;}
  .hours-list li.open .hdot{background:#5fbf7a;}
  /* Sunday (the only closed day) uses the brand orange rather than an
     off-palette red, per request — a color already used everywhere else
     on the site for "this needs attention" accents. */
  .hours-list li.closed .hdot{background:var(--orange-2);}
  .hours-list li.today.open-now .hdot{background:#5fbf7a; box-shadow:0 0 0 3px rgba(95,191,122,.22); animation:hdot-pulse 1.8s infinite;}
  @keyframes hdot-pulse{0%,100%{box-shadow:0 0 0 3px rgba(95,191,122,.22);} 50%{box-shadow:0 0 0 5px rgba(95,191,122,.08);}}
  .hours-list li.today{color:var(--slab-cream); font-weight:700; background:rgba(95,191,122,.12);}
  .hours-list li.today .htime{color:#5fbf7a;}
  .hours-list li.today.closed{background:rgba(240,121,60,.14);}
  .hours-list li.today.closed .htime{color:var(--orange-2);}
  .hours-note{margin-top:16px; font-size:11.5px; color:var(--marble-muted); opacity:.7; line-height:1.5;}
  .footer-bottom{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:26px 0; font-size:12.5px; color:var(--marble-muted);}
  .payments{display:flex; gap:8px; flex-wrap:wrap;}
  .payment-badge{
    display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:6px;
    padding:6px 10px; font-size:10.5px; letter-spacing:.03em; color:var(--marble-muted); font-weight:600;
  }
  .payment-badge svg{width:14px;height:14px; flex-shrink:0;}

  @media (max-width: 980px){
    .hero-grid{grid-template-columns:1fr; gap:34px;}
    /* Must match (or beat) the !important + higher specificity of the desktop
       ".topsteen-page .nav-links{display:flex !important;}" rule above, or that
       rule wins regardless of this media query and the links never actually
       hide — which is exactly what was pushing the hamburger button off-screen. */
    .topsteen-page .nav-links{display:none !important;}
    .topsteen-page .nav-burger{display:flex !important;}
    .cat-grid{grid-template-columns:1fr;}
    .cat-card.tall{min-height:340px;}
    .process-wrap{grid-template-columns:1fr;}
    .proof-grid{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr 1fr; row-gap:40px;}
    .stonebar{height:340px; flex-wrap:wrap;}
    .ptoast{left:12px; bottom:12px; max-width:250px;}
    .productview{height:340vh;}
    .pv-inner{grid-template-columns:1fr; gap:18px; text-align:center; justify-items:center;}
    .pv-visual{transform:scale(.78); width:100%; min-width:0;}
    .pv-eyebrow-fixed{position:static; margin-bottom:14px; justify-content:center;}
    .pv-callouts{height:190px; width:100%; min-width:0;}
    .pv-callout{align-items:center;}
    .pv-callout h3{font-size:20px; max-width:320px; margin:0 auto;}
    .pv-callout p{font-size:13.5px; max-width:300px; margin:12px auto 0 auto;}
    .pv-stage-nums{left:50%; transform:translateX(-50%); bottom:8px;}
    .compare-cards{grid-template-columns:1fr;}
    .final-cta-inner{flex-direction:column; align-items:flex-start;}
    .configurator{grid-template-columns:1fr;}
    .config-controls{border-left:none !important; border-top:1px solid var(--line);}
    .cfg-panel{padding:36px 28px 26px 28px;}
    .cfg-preview{height:260px;}
    .cfg-arrow{top:130px;} /* half of .cfg-preview's 260px at this breakpoint */
    .config-options, .config-swatches{justify-content:center;}
    /* 360 viewer: badge no longer floats over the toggle at this width */
    .viewer-card{padding:20px 18px 16px 18px;}
    /* Badge and toggle used to just stack centered, one above the other.
       Floating them to opposite sides puts them back on one row — toggle on
       the left, badge on the right — matching the desktop layout instead of
       a different, centered mobile-only arrangement. viewer-wrap clears the
       float so the 360° stage itself still starts on its own line below. */
    .viewer-badge{position:static; float:right; margin:0 0 14px 0; width:fit-content;}
    .viewer-toggle{float:left; margin:0 0 14px 0;}
    .viewer-wrap{clear:both;}
    .viewer-wrap{height:320px;}
    .viewer-spin{width:250px;height:250px;}
  }
  @media (max-width:600px){
    .hero{padding-top:10px;}
    .hero-stats{gap:12px; flex-wrap:nowrap;}
    /* Flex:1 gives the three stats equal-width columns instead of each one
       being only as wide as its own content — combined with text-align:center
       that's what actually centers "40+" over "NATUURSTEENSOORTEN" etc.
       rather than everything sitting flush left. */
    .hero-stats > div{flex:1; min-width:0; text-align:center;}
    /* Previous pass shrank these to fit on one line, but ended up too small
       to read comfortably. Sizing them against equal flex columns (above)
       instead of shrinking the text into submission keeps them legible and
       still on one line. */
    .stat-num{font-size:26px;}
    .stat-label{font-size:9.5px; letter-spacing:.02em;}
    .hero-actions .btn{width:100%; justify-content:center;}
    .section{padding:60px 0;}
    .section-head{margin-bottom:36px;}
    .footer-top{grid-template-columns:1fr; gap:40px;}
    .stonebar{height:auto; flex-direction:column; gap:10px; border:none; overflow:visible;}
    /* Collapsed rows only ever show the index + name — but .stonebar-desc
       was still sitting in normal flow at opacity:0 (not display:none), so
       its invisible text box kept adding height to .stonebar-info. Since
       that block is bottom-anchored, the extra invisible height pushed the
       visible name flush against — and sometimes past — the top edge of its
       own 74px row, with zero breathing room above it. Hiding it here frees
       that space back up, and the small top margin on the index gives the
       heading itself a clean bit of headroom off the top edge. */
    .stonebar-slab{height:74px; flex:none !important; border-radius:10px; transition:height .4s var(--ease);}
    .stonebar-slab:hover{flex:none !important;}
    .stonebar-desc{display:none;}
    .stonebar-index{margin-top:14px;}
    /* Tapping a slab (see topsteen.js) adds .active — expand it into a proper
       open card instead of the fixed 74px collapsed row, and bring the
       description back so there's something to actually expand into. */
    .stonebar-slab.active{height:200px;}
    .stonebar-slab.active .stonebar-desc{display:block; max-width:none;}
    .visit-inner{flex-direction:column; align-items:flex-start;}
    .visit-meta{flex-direction:column; align-items:flex-start; gap:28px; width:100%;}
    .visit-meta .btn{width:100%; justify-content:center; align-self:stretch;}
    .viewer-wrap{height:270px;}
    .viewer-spin{width:200px;height:200px;}
    .viewer-hint{font-size:10px; gap:6px;}
    .topsteen-page .viewer-toggle-btn{padding:5px 9px !important; font-size:8px !important;}
    /* Badge + toggle now share one row (see the ≤980px rule above) — trimming
       the badge's own padding/font here just gives that row enough room to
       stay on one line on narrow phones instead of wrapping. */
    /* Badge + toggle now share one row (see the ≤980px rule above) — trimming
       the badge's own padding/font here just gives that row enough room to
       stay on one line on narrow phones instead of wrapping. Still too tight
       at the smallest phone widths, so shrinking further and adding a gap
       between the two floated pieces so they don't butt up against each
       other. */
    .viewer-badge{font-size:7px; padding:4px 7px; gap:4px; letter-spacing:.04em;}
    .viewer-toggle{margin:0 8px 14px 0;}
    .pv-table{width:240px;height:240px;}
    .footer-shard-1{width:340px; height:300px; top:-90px; right:-100px;}
    .footer-shard-2{width:260px; height:240px; bottom:-70px; left:-70px;}
    .footer-glow-orange{width:320px; height:320px;}
    .cfg-panel, .config-controls{padding:28px 18px;}
    .cfg-arrow{width:32px;height:32px; font-size:13px;}
    .cfg-arrow svg{width:14px; height:14px;}
    .cfg-arrow-left{left:2px;}
    .cfg-arrow-right{right:2px;}
    .config-summary{font-size:15px;}
  }
  @media (max-width:480px){
    .topsteen-page .nav-icon-btn:nth-of-type(1), .topsteen-page .nav-icon-btn:nth-of-type(2){display:none !important;}
    .topsteen-page .nav-cta{gap:10px;}
  }
  @media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}

  /* ===== STRAY "SCROLL TO TOP" WIDGET GUARD =====
     This file has no back-to-top / floating button of its own — grep the
     whole child theme and there is none. If a circular "TOP" badge with
     rotating text is still appearing on this page, it is being injected by
     your PARENT theme or a plugin via wp_footer(), which still fires on
     this template even though get_header()/get_footer() are skipped (see
     the note at the top of page-topsteen.php). The selectors below cover
     the class/ID names most of those widgets commonly use, scoped only to
     this page so nothing else on your site is affected. If the badge is
     still visible after this, open your browser's inspector, click the
     badge, copy its actual class or id, and send it over so this can be
     targeted exactly instead of guessed. */
  body.topsteen-page #ast-scroll-top,
  body.topsteen-page #back-to-top,
  body.topsteen-page #backtotop,
  body.topsteen-page #scroll-top,
  body.topsteen-page #scrollTop,
  body.topsteen-page .cd-top,
  body.topsteen-page .go-top,
  body.topsteen-page .scrolltotop,
  body.topsteen-page .scroll-to-top,
  body.topsteen-page .smoothscroll-top,
  body.topsteen-page [class*="scroll-to-top"],
  body.topsteen-page [id*="scroll-to-top"],
  body.topsteen-page [class*="back-to-top"],
  body.topsteen-page [id*="back-to-top"]{
    display:none !important;
  }

  /* ===================================================================
     ABOUT PAGE — page-about.php — INTENTIONALLY A DIFFERENT SYSTEM.
     The homepage's DNA is: two-column hero-grid, alternating .section/
     .section-cream blocks, icon-card grids, stat counters, a horizontal
     accordion bar. None of that is reused for layout here on purpose —
     only the underlying tokens (colors, .btn, .eyebrow, .reveal, the
     marble SVG filters, the .faq-item open/close mechanics) carry over,
     because those are brand identity, not page structure. Everything
     with an "ab-" prefix below is unique to this page: a sticky
     scroll-driven chapter narrative, a rotated marquee, a magazine
     index instead of a card grid, and a horizontal filmstrip instead
     of a vertical timeline. 'Bodoni Moda' is loaded only on this
     template (see functions.php) for the oversized display type,
     giving the page its own typographic voice instead of just a
     bigger version of the homepage's Fraunces headings.
     =================================================================== */

  .ab-page{position:relative;}
  .ab-page .eyebrow{color:var(--orange-2);}

  /* --- 00: cinematic opener --- */
  .ab-open{
    position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; overflow:hidden; background:radial-gradient(ellipse 80% 60% at 50% 20%, #241f18 0%, var(--stone-black) 65%);
    padding:120px 24px 80px;
  }
  .ab-open-veins{position:absolute; inset:0; background:#fff; opacity:.08; mix-blend-mode:screen;}
  .ab-open-inner{position:relative; z-index:1; max-width:900px;}
  .ab-kicker{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--orange-2); margin-bottom:28px;}
  .ab-open-title{
    font-family:'Bodoni Moda',serif; font-weight:500; font-size:clamp(42px,8vw,104px); line-height:1.02; letter-spacing:-0.01em; color:var(--slab-cream);
  }
  .ab-open-title .is-outline{color:transparent; -webkit-text-stroke:1.5px var(--slab-cream); text-stroke:1.5px var(--slab-cream);}
  .ab-open-title .is-fill{color:var(--slab-cream);}
  .ab-open-title .is-italic{font-style:italic; color:var(--orange-2); -webkit-text-stroke:0;}
  .ab-open-sub{margin-top:34px; font-family:'Manrope',sans-serif; font-size:16px; line-height:1.7; color:var(--marble-muted); max-width:440px; margin-left:auto; margin-right:auto;}
  .ab-scrollcue{
    position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:1;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--marble-muted);
  }
  .ab-scrollcue span{width:1px; height:34px; background:linear-gradient(var(--orange-2), transparent); animation:ab-cue 1.8s ease-in-out infinite;}
  @keyframes ab-cue{0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 50.01%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;}}

  /* --- I–IV: sticky scrollytelling chapters --- */
  .ab-chapters{background:var(--stone-black); padding:0 0 40px;}
  .ab-chapters-grid{display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:70px; align-items:start;}
  .ab-chapter-sticky{
    /* Sticky lives HERE now, on the wrapper around both the panel and the
       rail below it — not on the panel alone. Putting it only on the panel
       meant the panel pinned in place while the rail, a separate sibling
       still in normal flow right after it, kept scrolling with the page
       and drifted away underneath. Pinning the shared parent keeps both
       pieces moving (or not moving) together as one unit.

       align-items:start on the grid (above) matters just as much as the
       position:sticky here: the grid's default is align-items:stretch,
       which would stretch this wrapper to match the height of the much
       taller text column beside it — making the "sticky" element itself
       as tall as the entire scrollable range, with zero room left to
       actually travel and pin. Sticky only works when the sticky element
       is shorter than the space available to it; "start" keeps this
       wrapper at its own natural (short) height while the grid row
       itself still stays tall because of the text column, which is
       exactly the room this needs to stick properly. */
    position:-webkit-sticky; position:sticky; top:110px;
  }
  .ab-chapter-panel{
    position:relative; height:min(560px,70vh);
    border-radius:18px; overflow:hidden;
    background:linear-gradient(155deg,#4a4038,#221d18 65%); border:1px solid var(--line);
    display:flex; flex-direction:column; justify-content:flex-end; padding:32px;
  }
  .ab-chapter-veins{position:absolute; inset:0; background:#fff; opacity:.5; mix-blend-mode:soft-light; transition:opacity .5s var(--ease);}
  /* Crossfade: JS toggles .is-swapping on the panel a beat before it
     changes the numeral/caption/filter, and removes it right after — so
     the swap reads as a soft dissolve between chapters instead of an
     instant jump-cut. */
  .ab-chapter-panel.is-swapping .ab-chapter-veins{opacity:0;}
  .ab-chapter-panel.is-swapping .ab-chapter-numeral,
  .ab-chapter-panel.is-swapping .ab-chapter-caption{opacity:0; transform:translateY(6px);}
  .ab-chapter-numeral,.ab-chapter-caption{transition:opacity .35s var(--ease), transform .35s var(--ease);}
  /* A slow, continuous, barely-there drift on the texture itself, so the
     panel still feels alive during the long stretches between chapter
     swaps instead of sitting completely still. */
  .ab-chapter-veins{animation:ab-panel-drift 14s ease-in-out infinite alternate;}
  @keyframes ab-panel-drift{from{transform:scale(1) translateY(0);} to{transform:scale(1.06) translateY(-2%);}}
  .ab-chapter-numeral{
    position:relative; z-index:1; font-family:'Bodoni Moda',serif; font-size:110px; line-height:1; color:rgba(245,239,228,.9);
  }
  .ab-chapter-caption{position:relative; z-index:1; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-2); margin-top:10px;}

  /* Vertical progress rail beside the sticky panel — same rail language
     as the horizontal one in the process filmstrip further down, so the
     two scroll-driven moments on this page feel like one motion system. */
  .ab-chapter-rail{display:flex; align-items:center; gap:14px; margin-top:22px; padding:0 4px;}
  .ab-chapter-rail-track{flex:1; height:2px; background:var(--line-soft); border-radius:2px; overflow:hidden;}
  .ab-chapter-rail-fill{height:100%; width:0%; background:var(--orange-2); border-radius:2px; transition:width .3s var(--ease);}
  .ab-chapter-rail-labels{display:flex; gap:10px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--marble-muted);}
  .ab-chapter-rail-labels span{opacity:.4; transition:opacity .3s, color .3s;}
  .ab-chapter-rail-labels span.is-current{opacity:1; color:var(--orange-2);}

  .ab-chapter-copy{display:flex; flex-direction:column; gap:0;}
  .ab-chapter{padding:120px 0; border-bottom:1px solid var(--line-soft); opacity:.35; transition:opacity .5s var(--ease);}
  .ab-chapter:last-child{border-bottom:none;}
  .ab-chapter.is-active{opacity:1;}
  .ab-chapter-roman{font-family:'Bodoni Moda',serif; font-size:15px; color:var(--orange-deep); letter-spacing:.1em; margin-bottom:14px;}
  .ab-chapter h2{font-family:'Bodoni Moda',serif; font-weight:500; font-size:clamp(26px,3.2vw,40px); line-height:1.2; color:var(--slab-cream); margin-top:14px; max-width:480px;}
  .ab-chapter p{margin-top:20px; font-size:16px; line-height:1.75; color:var(--marble-muted); max-width:460px;}

  /* Mobile-only info card — lives inside .ab-chapter-sticky (see markup),
     hidden entirely on desktop where .ab-chapter-copy is the real content. */
  .ab-chapter-info{display:none;}

  /* --- manifesto marquee --- */
  .ab-manifesto{background:var(--orange); overflow:hidden; padding:34px 0; transform:rotate(-1.4deg) scale(1.03); margin:60px 0;}
  .ab-manifesto-track{display:flex; white-space:nowrap; animation:ab-marquee 22s linear infinite;}
  .ab-manifesto-track span{
    font-family:'Bodoni Moda',serif; font-style:italic; font-weight:500; font-size:clamp(28px,5vw,58px); color:#fff; padding-right:0;
  }
  @keyframes ab-marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

  /* --- value index (magazine contents page, not a card grid) --- */
  .ab-index{padding:110px 0;}
  .ab-index-head{margin-bottom:56px;}
  .ab-index-head h2{font-family:'Bodoni Moda',serif; font-weight:500; font-size:clamp(28px,3.4vw,42px); color:var(--stone-black); margin-top:14px;}
  .ab-index-list{border-top:1px solid var(--line-soft);}
  .ab-index-row{border-bottom:1px solid var(--line-soft);}
  .topsteen-page .ab-index-row .faq-q{
    width:100% !important; display:flex !important; align-items:center !important; gap:28px;
    background:none !important; border:none !important; cursor:pointer;
    padding:30px 0 !important; margin:0 !important; text-align:left; font-family:'Manrope',sans-serif !important;
    box-sizing:border-box !important; line-height:1.4 !important; transition:padding .3s var(--ease);
  }
  .ab-index-row.open .faq-q{padding-bottom:14px;}
  .ab-index-num{font-family:'Bodoni Moda',serif; font-size:22px; color:var(--orange-deep); min-width:44px;}
  .ab-index-label{flex:1; font-family:'Bodoni Moda',serif; font-size:clamp(22px,2.6vw,32px); color:var(--stone-black); transition:color .3s;}
  .ab-index-row.open .ab-index-label{color:var(--orange-deep);}
  .ab-index-row .plus{font-size:22px; color:var(--orange-deep); transition:transform .3s var(--ease); font-weight:300;}
  .ab-index-row.open .plus{transform:rotate(135deg);}
  .ab-index-row .faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
  .ab-index-row .faq-a-inner{padding:0 0 30px 72px; font-size:15px; line-height:1.7; color:#6b6255; max-width:560px;}

  /* --- process filmstrip: pinned scroll-jacked scene on desktop --- */
  .ab-film-outer{position:relative; height:280vh; background:var(--stone-black);}
  .ab-film-pin{
    position:-webkit-sticky; position:sticky; top:0; height:100vh; overflow:hidden;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:90px 0 50px; /* top clears nav.main-nav (also sticky at top:0) */
    box-sizing:border-box;
  }
  /* justify-content:space-between (not center) is what actually matters
     here: with 3 stacked children — heading, the card strip, the rail —
     "center" was centering the WHOLE stack inside the fixed 100vh box.
     Since that stack is taller than 100vh once you include the cards,
     the overflow got clipped off equally at both edges, which pushed the
     rail out through the bottom of the viewport, entirely invisible,
     even though it was still rendering. space-between instead pins the
     heading to the top and the rail to the bottom of this box by
     definition, with the cards filling whatever's left between them —
     so the rail can never end up clipped off-screen again regardless of
     how tall the cards end up being. */
  .ab-film-pin .ab-index-head h2{color:var(--slab-cream);}
  .ab-film-strip{
    display:flex; gap:20px; padding:0 clamp(20px,5vw,64px); will-change:transform;
  }
  .ab-film-card{
    flex:0 0 320px; background:var(--stone-black-2); border:1px solid var(--line);
    border-radius:14px; padding:34px 28px;
  }
  .ab-film-num{font-family:'Bodoni Moda',serif; font-size:44px; color:var(--orange-deep); opacity:.8;}
  .ab-film-card h3{font-size:19px; color:var(--slab-cream); margin:18px 0 10px;}
  .ab-film-card p{font-size:14px; line-height:1.65; color:var(--marble-muted); margin:0;}
  .ab-film-rail{height:2px; background:var(--line-soft); border-radius:2px; overflow:hidden;}
  .ab-film-rail-fill{height:100%; width:0%; background:var(--orange-2); border-radius:2px;}

  /* --- closing: asymmetric diagonal split --- */
  .ab-close{position:relative; display:grid; grid-template-columns:0.9fr 1.1fr; min-height:520px; background:var(--stone-black);}
  /* Real photograph now, per your request — a natural-stone workshop
     shot from Unsplash (free/commercial-use license), not the abstract
     marble-filter texture from before. .ab-close-veins is now a scrim
     gradient layered on top of the photo (same technique as the rest
     of the site: color layer + overlay layer, never combined onto one
     element) so the image reads dark and on-brand and the copy on the
     right stays legible, instead of the raw photo colors showing through. */
  .ab-close-visual{
    position:relative; overflow:hidden; clip-path:polygon(0 0, 100% 0, 82% 100%, 0% 100%);
    background-image:url('https://images.unsplash.com/photo-1566305977571-5666677c6e98?auto=format&fit=crop&w=1400&q=70');
    background-size:cover; background-position:center;
  }
  .ab-close-veins{position:absolute; inset:0; background:linear-gradient(155deg, rgba(74,64,56,.55) 0%, rgba(20,17,14,.9) 68%);}
  .ab-close-copy{display:flex; flex-direction:column; justify-content:center; padding:70px clamp(24px,6vw,90px);}
  .ab-close-copy h2{font-family:'Bodoni Moda',serif; font-weight:500; font-size:clamp(30px,3.6vw,48px); line-height:1.18; color:var(--slab-cream); margin-top:14px; max-width:520px;}
  .ab-close-copy p{margin-top:20px; font-size:16px; line-height:1.7; color:var(--marble-muted); max-width:420px;}
  .ab-close-actions{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}
  .ab-close-address{margin-top:30px; font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.05em; color:var(--marble-muted); opacity:.8;}
  /* Scroll-triggered reveal for the closing copy — every other section
     on this page fades/slides its text in on scroll; this one never had
     that treatment. JS toggles .is-visible on .ab-close-copy via the
     same IntersectionObserver pattern used elsewhere (see topsteen.js). */
  .ab-close-copy .eyebrow,
  .ab-close-copy h2,
  .ab-close-copy p,
  .ab-close-actions,
  .ab-close-address{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
  .ab-close-copy h2{transition-delay:.08s;}
  .ab-close-copy p{transition-delay:.16s;}
  .ab-close-actions{transition-delay:.24s;}
  .ab-close-address{transition-delay:.3s;}
  .ab-close-copy.is-visible .eyebrow,
  .ab-close-copy.is-visible h2,
  .ab-close-copy.is-visible p,
  .ab-close-copy.is-visible .ab-close-actions,
  .ab-close-copy.is-visible .ab-close-address{opacity:1; transform:translateY(0);}

  @media (max-width:980px){
    .ab-chapters-grid{
      grid-template-columns:1fr; gap:0;
      /* This is the sticky panel's scroll 'track', recreated for a single
         column. On desktop the tall .ab-chapter-copy column beside the
         panel naturally gives the shared grid row enough height for the
         sticky panel to travel through while pinned. Here .ab-chapter-copy
         is hidden instead, so nothing supplies that height automatically —
         this explicit min-height is what takes its place. Four chapters ×
         82vh gives each stage a comfortable amount of scroll before the
         numeral advances; align-items:start (inherited from the base rule
         above, not overridden here) is what lets .ab-chapter-sticky stay
         short and pin within this tall row instead of being stretched to
         fill it. */
      min-height:328vh;
    }
    .ab-chapter-sticky{
      /* Sticky again — kept on mobile like desktop, this time with an
         actual track to pin within (see min-height above) instead of the
         previous single-row stack that gave it none. The information that
         used to be a separate .ab-chapter-copy column scrolling underneath
         it (the overlap bug) now lives INSIDE this same pinned unit as
         .ab-chapter-info below, so there is nothing left that can scroll
         independently behind the panel. */
      position:-webkit-sticky; position:sticky; top:90px; margin-bottom:0;
    }
    .ab-chapter-panel{height:min(240px,38vh); padding:20px;}
    .ab-chapter-numeral{font-size:52px;}
    .ab-chapter-rail{margin-top:14px;}
    /* The real content column is replaced by .ab-chapter-info on mobile —
       still present in the DOM (JS reads its text, and it's there if CSS
       fails to load), just not displayed, so nothing renders twice and
       nothing is left in normal flow to scroll behind the pinned panel. */
    .ab-chapter-copy{display:none;}
    .ab-chapter-info{
      display:block; margin-top:18px; padding-top:18px;
      border-top:1px solid var(--line-soft);
      transition:opacity .35s var(--ease), transform .35s var(--ease);
    }
    .ab-chapter-info.is-swapping{opacity:0; transform:translateY(6px);}
    .ab-chapter-info .eyebrow{margin-bottom:10px;}
    .ab-chapter-info h3{font-family:'Bodoni Moda',serif; font-weight:500; font-size:20px; line-height:1.3; color:var(--slab-cream); margin:0;}
    .ab-chapter-info p{margin-top:10px; font-size:14px; line-height:1.65; color:var(--marble-muted);}
    .ab-close{grid-template-columns:1fr;}
    .ab-close-visual{clip-path:polygon(0 0,100% 0,100% 78%,0 100%); min-height:260px;}
    /* Reversing the earlier call here: you specifically want the same
       pinned/scroll-jacked behavior as desktop on mobile too — the
       section stays locked in place while you scroll, stepping through
       01→05, and only releases to the next section once the rail
       finishes. So instead of a native swipeable strip, we keep the
       real position:sticky pin at every width and just make each card
       full viewport width, so exactly one is ever visible — the "single
       image, info-changes-beneath-it" feel you're after — while the
       exact same JS scroll-progress math (see topsteen.js, isPinned())
       drives it via translateX regardless of screen size. */
    .ab-film-strip{padding:0 20px; gap:16px;}
    .ab-film-card{flex:0 0 100%; box-sizing:border-box;}
    .ab-film-rail{margin:18px clamp(20px,5vw,64px) 0; height:4px; background:var(--line);}
    .ab-film-rail-fill{box-shadow:0 0 8px rgba(230,120,60,.5);}
  }
  @media (max-width:600px){
    .ab-open{min-height:90vh; padding:100px 20px 60px;}
    .ab-open-title{font-size:clamp(34px,11vw,54px);}
    .ab-manifesto{margin:36px 0; padding:20px 0;}
    .ab-index{padding:70px 0;}
    .ab-index-row .faq-a-inner{padding-left:0;}
    .ab-film-pin{padding:70px 0 50px;}
    .ab-close-copy{padding:50px 20px;}
  }

  /* ===================================================================
     SHOWROOM PAGE — page-showroom.php — A THIRD, DIFFERENT SYSTEM.
     The homepage is stacked sections + card grids. The About page is a
     single pinned scroll-driven narrative. This page is neither: a
     real-time status strip, full-bleed real photography with a floating
     ticket/visit-pass card, a tap-to-reveal floorplan over a real photo,
     a parallax masonry gallery of real photos, a real embedded Google
     Map with a floating info card instead of a mirrored two-column
     split, and a stamp/seal close over a dimmed photo. Only the
     underlying tokens (colors, .btn, .eyebrow, .reveal, .section/
     .section-cream) carry over as shared brand identity. 'Space Grotesk'
     (loaded only on this template, see functions.php) handles numerals
     and wayfinding-style labels — a technical/signage register distinct
     from the homepage's Fraunces+Manrope and About's Bodoni Moda.
     =================================================================== */

  .sr-page{position:relative;}

  /* --- live status strip --- */
  .sr-status{
    position:relative; z-index:10; display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--stone-black-2); border-bottom:1px solid var(--line);
    padding:10px 16px; font-family:'Space Grotesk',sans-serif; font-size:12.5px; letter-spacing:.02em; color:var(--slab-cream);
    text-align:center; animation:sr-status-in .6s var(--ease) both;
  }
  @keyframes sr-status-in{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}
  .sr-status-dot{width:7px; height:7px; border-radius:50%; background:var(--marble-muted); flex-shrink:0;}
  .sr-status.is-open .sr-status-dot{background:#6FBF7A; box-shadow:0 0 0 4px rgba(111,191,122,.22); animation:sr-pulse 2s ease-in-out infinite;}
  .sr-status.is-closed .sr-status-dot{background:var(--orange-2); box-shadow:0 0 0 4px rgba(240,121,60,.2);}
  @keyframes sr-pulse{0%,100%{box-shadow:0 0 0 4px rgba(111,191,122,.22);} 50%{box-shadow:0 0 0 7px rgba(111,191,122,.08);}}

  /* --- hero: full-bleed photo, no split grid --- */
  .sr-hero{
    /* flex-direction was never set (default is row). On desktop that
       never mattered because .sr-pass is position:absolute there and
       drops out of the flex flow entirely — .sr-hero-content is the
       only real flex item. But on mobile .sr-pass switches to
       position:relative (back in normal flow) so the card can stack
       naturally below the text — except with no flex-direction set,
       "naturally" meant side-by-side in a row, squeezing both the text
       and the card into a sliver and effectively breaking the section.
       column fixes that. align-items is deliberately left at its
       default (stretch) rather than flex-start/flex-end: stretching
       each child to the container's full width is what lets
       .sr-hero-content's own .wrap class do its normal max-width+
       margin:auto centering exactly the way .wrap works everywhere
       else on the site, instead of fighting it. justify-content pins
       the stack to the bottom of the hero. */
    position:relative; min-height:88vh; display:flex; flex-direction:column;
    justify-content:flex-end; overflow:hidden; padding-bottom:120px;
  }
  .sr-hero-photo{
    position:absolute; inset:0; background-size:cover; background-position:center;
    animation:sr-hero-drift 18s ease-in-out infinite alternate;
  }
  @keyframes sr-hero-drift{from{transform:scale(1);} to{transform:scale(1.08);}}
  .sr-hero-scrim{position:absolute; inset:0; background:linear-gradient(0deg, var(--stone-black) 8%, rgba(20,18,16,.55) 55%, rgba(20,18,16,.25) 100%);}
  .sr-hero-content{position:relative; z-index:1; max-width:640px; animation:sr-fade-up 1s var(--ease) both;}
  @keyframes sr-fade-up{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);}}
  /* .sr-pass carries its own static rotate(2.5deg) tilt (set further down)
     so its entrance animates opacity only — animating "transform" here
     too would need to re-declare the rotation in every keyframe step or
     lose it the moment the animation finishes, since an animation's final
     keyframe otherwise replaces the element's transform outright. */
  @keyframes sr-fade-in{from{opacity:0;} to{opacity:1;}}
  .sr-hero-title{font-family:'Fraunces',serif; font-size:clamp(34px,4.6vw,58px); line-height:1.1; color:var(--slab-cream); margin-top:18px;}
  .sr-hero-sub{margin-top:22px; font-size:16px; line-height:1.75; color:var(--slab-cream-dim);}

  /* ticket/visit-pass, floating over the bottom-right of the photo */
  .sr-pass{
    position:absolute; z-index:2; right:clamp(20px,5vw,64px); bottom:-56px;
    background:var(--stone-black-2); border:1px solid var(--line); border-radius:16px;
    padding:26px 26px 22px; width:340px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
    transform:rotate(2.5deg); animation:sr-fade-in 1s var(--ease) both;
  }
  .sr-pass-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px;}
  .sr-pass-brand{font-family:'Fraunces',serif; font-size:15px; letter-spacing:.04em; color:var(--slab-cream);}
  .sr-pass-brand span{display:block; font-family:'Space Grotesk',sans-serif; font-size:9px; letter-spacing:.16em; color:var(--marble-muted); margin-top:4px;}
  .sr-pass-stamp{
    font-family:'Space Grotesk',sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-align:center; line-height:1.4;
    color:var(--orange-2); border:1.5px solid var(--orange-2); border-radius:50%; width:56px; height:56px;
    display:flex; align-items:center; justify-content:center; transform:rotate(8deg); opacity:.85; flex-shrink:0;
  }
  .sr-pass-row{display:flex; justify-content:space-between; align-items:baseline; padding:11px 0; border-top:1px dashed var(--line);}
  .sr-pass-row span{font-family:'Space Grotesk',sans-serif; font-size:11.5px; color:var(--marble-muted); letter-spacing:.03em;}
  .sr-pass-row strong{font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; color:var(--slab-cream);}
  .sr-pass-tear{position:relative; height:0; margin:18px -26px; border-top:2px dashed var(--line);}
  .sr-pass-tear::before,.sr-pass-tear::after{content:""; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--stone-black-2);}
  .sr-pass-tear::before{left:-9px;}
  .sr-pass-tear::after{right:-9px;}
  .sr-pass-bottom{display:flex; justify-content:space-between; align-items:center;}
  .sr-pass-barcode{
    flex:1; height:26px; margin-right:16px; opacity:.5;
    background:repeating-linear-gradient(90deg, var(--slab-cream) 0 2px, transparent 2px 5px, var(--slab-cream) 5px 6px, transparent 6px 11px);
  }
  .sr-pass-code{font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.08em; color:var(--marble-muted); white-space:nowrap;}

  /* --- floorplan: real photo base + hotspots --- */
  .sr-floor-wrap{position:relative; margin-top:106px;}
  .sr-floor{
    position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line-soft);
    aspect-ratio:16/9; background-size:cover; background-position:center;
  }
  /* Uses .reveal-zoom's own transition (already opacity+transform, 0.8s) rather
     than redeclaring "transition" here, which would silently drop the opacity
     half of that shorthand and break the fade-in. */
  .sr-floor:hover{transform:scale(1.015);}
  .sr-floor-scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,18,16,.55) 0%, rgba(20,18,16,.05) 45%);}
  /* .sr-dot is a real <button> — hardened against the same parent-theme
     generic button reset that hit .nav-burger, .viewer-toggle-btn, and
     the viewer dots earlier, rather than waiting for it to surface here
     too. */
  .topsteen-page .sr-dot{
    position:absolute; z-index:2; box-sizing:border-box !important;
    width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important;
    margin:-17px 0 0 -17px !important; padding:0 !important; border-radius:50% !important;
    background:var(--orange); color:#fff; border:3px solid rgba(255,255,255,.7);
    font-family:'Space Grotesk',sans-serif !important; font-weight:700; font-size:13px !important; line-height:1 !important;
    cursor:pointer; display:flex !important; align-items:center !important; justify-content:center !important;
    box-shadow:0 4px 14px rgba(0,0,0,.35); appearance:none; -webkit-appearance:none;
    transition:transform .3s var(--ease), background .3s;
  }
  .topsteen-page .sr-dot::after{content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid var(--orange); opacity:.5; animation:sr-dot-ring 2.4s ease-out infinite;}
  .topsteen-page .sr-dot:hover{transform:scale(1.12);}
  .topsteen-page .sr-dot.is-active{background:var(--stone-black);}
  @keyframes sr-dot-ring{0%{transform:scale(.7); opacity:.6;} 100%{transform:scale(1.6); opacity:0;}}
  .sr-zone-card{
    position:absolute; z-index:3; left:24px; bottom:24px; right:24px; max-width:360px;
    background:rgba(20,18,16,.92); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:14px;
    padding:22px 24px; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease);
  }
  .sr-zone-card.is-visible{opacity:1; transform:translateY(0); pointer-events:auto;}
  .sr-zone-num{font-family:'Fraunces',serif; font-size:13px; color:var(--orange-2); margin-bottom:6px;}
  .sr-zone-card h3{font-size:18px; color:var(--slab-cream); margin-bottom:8px;}
  .sr-zone-card p{font-size:13.5px; line-height:1.6; color:var(--marble-muted); margin:0;}

  /* --- parallax masonry gallery: real photos --- */
  .sr-gallery{overflow:hidden; padding-bottom:110px;}
  .sr-gallery-track{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; padding:0 clamp(20px,5vw,64px);}
  .sr-gallery-col{display:flex; flex-direction:column; gap:22px; will-change:transform;}
  .sr-tile{
    position:relative; overflow:hidden; border-radius:12px; display:flex; align-items:flex-end; padding:16px 18px;
    background-color:#3a322b; background-size:cover; background-position:center;
    transition:transform .5s var(--ease); cursor:default;
  }
  .sr-tile:hover{transform:scale(1.035) !important;}
  .sr-tile::before{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);}
  .sr-tile span:not(.sr-tile-big){position:relative; z-index:1; font-family:'Space Grotesk',sans-serif; font-size:12.5px; letter-spacing:.04em; color:var(--slab-cream);}
  .sr-tile-short{height:160px;}
  .sr-tile-med{height:220px;}
  .sr-tile-tall{height:300px;}
  .sr-tile-accent{background:var(--orange); flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:4px;}
  .sr-tile-accent::before{content:none;}
  .sr-tile-big{font-family:'Fraunces',serif; font-size:40px; color:#fff; line-height:1;}

  /* --- beschikbaarheid & route: real map + floating card --- */
  .sr-visit-map{position:relative; min-height:640px; background:var(--stone-black-2);}
  .sr-map-embed{position:absolute; inset:0;}
  .sr-map-embed iframe{display:block; width:100%; height:100%; filter:grayscale(.35) contrast(1.05);}
  .sr-hours-float{
    position:absolute; z-index:2; left:clamp(20px,5vw,64px); bottom:40px; width:380px; max-width:calc(100% - 40px);
    background:var(--stone-black); border:1px solid var(--line); border-radius:16px; padding:32px;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  }
  .sr-hours-float h2{font-family:'Fraunces',serif; font-size:24px; color:var(--slab-cream); margin:12px 0 22px;}
  /* .sr-hours-list now shares the exact same markup pattern (and CSS) as
     the footer's .hours-list — these are purely additive tweaks for the
     floating card's own look (font, row border), not a separate color
     system. The old rules here assumed a different <strong>-based markup
     and are gone now that both lists use the same structure. */
  .sr-hours-list li{font-family:'Space Grotesk',sans-serif; padding-top:10px; padding-bottom:10px; border-bottom:1px dashed var(--line);}
  .sr-hours-list li:last-child{border-bottom:none;}
  .sr-hours-list .htime{font-size:14px;}
  .sr-hours-note{font-size:12px; color:var(--marble-muted); font-style:italic; margin:0 0 20px;}

  /* --- closing: real photo + stamp/seal pulse rings --- */
  .sr-close{position:relative; overflow:hidden; text-align:center; padding:150px 0;}
  .sr-close-photo{position:absolute; inset:0; background-size:cover; background-position:center; animation:sr-hero-drift 20s ease-in-out infinite alternate;}
  .sr-close-scrim{position:absolute; inset:0; background:rgba(20,18,16,.82);}
  .sr-close-rings{position:absolute; top:50%; left:50%; width:1px; height:1px; z-index:1;}
  .sr-close-rings span{
    position:absolute; top:0; left:0; border:1px solid rgba(245,239,228,.3); border-radius:50%;
    width:120px; height:120px; margin:-60px 0 0 -60px; animation:sr-ring-out 5s ease-out infinite;
  }
  .sr-close-rings span:nth-child(2){animation-delay:1.6s;}
  .sr-close-rings span:nth-child(3){animation-delay:3.2s;}
  @keyframes sr-ring-out{0%{transform:scale(.4); opacity:0;} 15%{opacity:.6;} 100%{transform:scale(3.2); opacity:0;}}
  .sr-close-inner{position:relative; z-index:2; max-width:560px; margin:0 auto;}
  .sr-close h2{font-family:'Fraunces',serif; font-size:clamp(28px,3.4vw,42px); color:var(--slab-cream); margin:14px 0 16px;}
  .sr-close p{font-size:16px; color:var(--slab-cream-dim); margin-bottom:34px;}
  .sr-close-meta{margin-top:26px; font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.04em; color:var(--marble-muted);}

  @media (max-width:980px){
    .sr-hero{min-height:auto; padding:70px 0 90px;}
    .sr-pass{position:relative; right:auto; bottom:auto; width:auto; max-width:400px; margin:36px clamp(20px,5vw,64px) 0; transform:none;}
    .sr-hero-content{padding:0 clamp(20px,5vw,64px);}
    .sr-floor-wrap{margin-top:36px;}
    .sr-gallery-track{grid-template-columns:1fr 1fr;}
    .sr-gallery-col:nth-child(3){display:none;}
    .sr-visit-map{min-height:auto; display:flex; flex-direction:column;}
    .sr-map-embed{position:relative; height:340px;}
    .sr-hours-float{position:relative; left:auto; bottom:auto; width:auto; max-width:none; margin:-40px clamp(20px,5vw,64px) 0;}
  }
  @media (max-width:600px){
    .sr-hero{padding:50px 0 60px;}
    .sr-hero-photo{animation:none;}
    .sr-close-photo{animation:none;}
    .sr-status{font-size:11px; padding:9px 14px;}
    .sr-floor{aspect-ratio:4/5;}
    /* Static/in-flow instead of overlapping the photo — this is the
       actual fix for hotspot #4 being hidden: no matter how tall the
       card's text gets for a given zone, it can never cover a dot
       again, since it's no longer stacked on top of the photo at all. */
    .sr-zone-card{position:static; margin-top:14px; max-width:none; padding:18px 20px;}
    .sr-gallery-track{grid-template-columns:1fr; gap:16px;}
    .sr-gallery-col:nth-child(3){display:flex;}
    .sr-gallery-col{transform:none !important;}
    .sr-tile-tall{height:220px;}
    .sr-tile-med{height:180px;}
    .sr-tile-short{height:140px;}
    .sr-map-embed{height:280px;}
    .sr-hours-float{padding:26px 22px; margin:-30px 16px 0;}
    .sr-close{padding:90px 0;}
  }

/* ======================================================================
   CONTACT PAGE — ORIGINAL VERSION — page-contact.php — "ct-" prefix.
   Channel-switcher concept: a sliding pill
   indicator behind 4 tabs (WhatsApp/Bellen/E-mail/Bezoek), a single
   crossfading panel stage below it with kinetic character-by-character
   type-in on the active number/e-mail/heading, a real embedded Google
   Maps card for the "Bezoek" panel, and a calm secondary contact form.
   Deliberately NOT a hero-grid, NOT sticky scrollytelling, NOT a
   hotspot/parallax gallery, NOT a ticket card — see page-contact.php
   header comment for the full rationale.
   ====================================================================== */

  .ct-hero{position:relative; padding:150px 0 60px;}
  .ct-hero h1{font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:clamp(34px,5vw,58px); line-height:1.08; color:var(--slab-cream); margin-top:14px;}
  .ct-hero-sub{margin-top:20px; max-width:480px; font-size:16px; line-height:1.65; color:var(--marble-muted);}
  .ct-trust{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.03em; color:var(--orange-2);}
  .ct-trust svg{width:15px; height:15px;}

  .ct-switch-section{padding:20px 0 90px; position:relative;}

  /* ---- Channel switcher: sliding pill + 4 tabs ---- */
  .ct-switcher{
    position:relative; display:flex; gap:4px; padding:6px;
    background:var(--stone-black-2); border:1px solid var(--line); border-radius:100px;
    max-width:720px; margin:0 auto 0;
  }
  .ct-switch-pill{
    position:absolute; top:6px; left:6px; height:calc(100% - 12px);
    background:var(--orange); border-radius:100px; z-index:0;
    transition:transform .45s var(--ease), width .45s var(--ease);
    width:100px;
  }
  .topsteen-page button.ct-channel-btn{
    position:relative; z-index:1; flex:1;
    display:flex !important; align-items:center; justify-content:center; gap:8px;
    background:none !important; border:none !important; cursor:pointer;
    padding:13px 14px !important; margin:0 !important; border-radius:100px !important; box-sizing:border-box !important;
    font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; color:var(--marble-muted);
    white-space:nowrap; transition:color .35s var(--ease);
  }
  .topsteen-page button.ct-channel-btn svg{width:16px; height:16px; flex-shrink:0;}
  .topsteen-page button.ct-channel-btn.is-active{color:#fff;}
  .topsteen-page button.ct-channel-btn span{display:none;}
  @media (min-width:660px){ .topsteen-page button.ct-channel-btn span{display:inline;} }

  /* ---- Panel stage: crossfade between the 4 channel panels ---- */
  .ct-panel-stage{position:relative; margin-top:56px; min-height:340px;}
  .ct-panel{
    position:absolute; inset:0; opacity:0; pointer-events:none; transform:translateY(14px) scale(.985);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .ct-panel.is-active{position:relative; opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
  .ct-panel-grid{max-width:640px; margin:0 auto; text-align:center;}
  .ct-panel-grid-bezoek{max-width:1040px; display:grid; grid-template-columns:1fr 1fr; gap:48px; text-align:left; align-items:start;}
  .ct-panel-eyebrow{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-2); margin-bottom:14px;}
  .ct-panel-copy h2{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(24px,3vw,34px); color:var(--slab-cream); line-height:1.25;}
  .ct-kinetic-number{font-family:'Bricolage Grotesque',sans-serif; font-weight:600; letter-spacing:-.01em; word-break:break-word;}
  .ct-panel-copy p{margin-top:16px; font-size:15px; line-height:1.7; color:var(--marble-muted); max-width:460px;}
  .ct-panel-grid:not(.ct-panel-grid-bezoek) .ct-panel-copy p{margin-left:auto; margin-right:auto;}
  .ct-channel-cta{margin-top:26px;}
  .ct-email-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px;}
  .ct-panel-grid:not(.ct-panel-grid-bezoek) .ct-email-actions{margin-top:26px;}
  .ct-response-note{margin-top:20px; font-size:12.5px; color:var(--marble-muted); opacity:.85;}
  .ct-response-note strong{color:var(--orange-2); font-weight:700;}

  /* kinetic type-in characters — same reveal technique as the homepage
     hero, but replayed every time the channel switches, not just once */
  .ct-tw-char{opacity:0; display:inline-block;}
  .ct-tw-char.ct-tw-visible{opacity:1;}

  .topsteen-page button.ct-copy-btn{
    display:inline-flex !important; align-items:center; gap:8px;
    padding:16px 24px !important; border-radius:100px !important; box-sizing:border-box !important;
  }
  .ct-copy-btn svg{width:16px; height:16px;}
  .ct-copy-btn.is-copied{border-color:var(--orange-2) !important; color:var(--orange-2) !important;}

  /* ---- Bezoek panel: hours list (shared component) + real map card ---- */
  .ct-panel-grid-bezoek .hours-list{margin-top:22px; max-width:340px;}
  .ct-map-card{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--stone-black-2); box-shadow:0 30px 60px -30px rgba(0,0,0,.5);}
  .ct-map-frame{width:100%; height:320px; border:0; display:block; filter:grayscale(.35) sepia(.15) hue-rotate(-6deg) saturate(1.05) contrast(1.05) brightness(.92);}
  .ct-map-footer{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-top:1px solid var(--line); font-family:'Space Mono',monospace; font-size:11.5px; color:var(--marble-muted);}
  .ct-map-footer a{display:inline-flex; align-items:center; gap:6px; color:var(--orange-2); font-weight:700; white-space:nowrap;}
  .ct-map-footer a svg{width:13px; height:13px;}

  /* ---- Contact form (secondary, calm module) ---- */
  .ct-form-section{border-top:1px solid var(--line);}
  .ct-form{max-width:760px; margin:0 auto;}
  .ct-form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
  .ct-field{display:flex; flex-direction:column; gap:8px;}
  .ct-field-full{margin-bottom:20px;}
  .ct-field label{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--marble-muted);}
  .ct-field input, .ct-field select, .ct-field textarea{
    background:var(--stone-black-2) !important; border:1px solid var(--line) !important; border-radius:10px !important;
    padding:14px 16px !important; font-family:'Manrope',sans-serif !important; font-size:14.5px !important;
    color:var(--slab-cream) !important; outline:none; transition:border-color .3s;
  }
  .ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus{border-color:var(--orange-2) !important;}
  .ct-field textarea{resize:vertical; min-height:120px;}
  .ct-form-footer{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:8px;}
  .ct-form-note{font-size:12.5px; color:var(--marble-muted);}
  .ct-form-note strong{color:var(--orange-2);}
  .ct-cross-links{display:flex; flex-direction:column; gap:10px; margin-top:56px; text-align:center;}
  .ct-cross-links a{font-size:13.5px; color:var(--marble-muted); text-decoration:underline; text-underline-offset:3px; transition:color .3s;}
  .ct-cross-links a:hover{color:var(--orange-2);}

  @media (max-width:900px){
    .ct-panel-grid-bezoek{grid-template-columns:1fr; gap:32px;}
  }
  @media (max-width:660px){
    .ct-hero{padding:120px 0 40px;}
    .ct-switcher{flex-wrap:nowrap; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch;}
    .topsteen-page button.ct-channel-btn{flex:none; padding:13px 18px !important;}
    .ct-panel-stage{margin-top:40px;}
    .ct-form-row{grid-template-columns:1fr;}
    .ct-map-frame{height:240px;}
  }
/* ===================================================================
   PAGE: /partners — PREMIUM REDESIGN
   New hero uses ptx- prefix. Lower Partners sections continue to use pt-.
   This block replaces the old Partners CSS block while preserving the
   existing tiers, process rail, marquee and application styles.
   =================================================================== */

/* Prevent legacy Partners intro/grid decorations from rendering after the
   hero redesign. The markup may remain in page-partners.php safely. */
.pt-intro,
.pt-grid-back,
.pt-grid-fore{
  display:none !important;
}

/*
 * TOPSTEEN PARTNERS — AWARD HERO / MOTION LAYER
 * File: assets/partners-award.css
 *
 * Purpose:
 * - Replaces the visual language of the old .pt-hero without touching
 *   the shared TopSteen CSS or other pages.
 * - Designed for the replacement markup in partners-hero-replacement.php.
 * - Vanilla CSS only; no library required.
 */

:root{
  --ptx-ink:#0d0c0b;
  --ptx-paper:#f5efe4;
  --ptx-paper-dim:#d8cebe;
  --ptx-orange:#e2622a;
  --ptx-orange-2:#f0793c;
  --ptx-line:rgba(245,239,228,.14);
  --ptx-line-strong:rgba(245,239,228,.28);
  --ptx-ease:cubic-bezier(.16,.84,.44,1);
}

.ptx-hero{
  position:relative;
  min-height:calc(100svh - 74px);
  padding:clamp(48px,6vw,86px) 0 clamp(58px,7vw,92px);
  overflow:clip;
  isolation:isolate;
  background:
    radial-gradient(circle at 74% 42%, rgba(226,98,42,.12), transparent 24%),
    radial-gradient(circle at 85% 10%, rgba(245,239,228,.055), transparent 22%),
    var(--ptx-ink);
}

.ptx-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.36;
  background:
    linear-gradient(90deg, transparent 0 19.9%, rgba(245,239,228,.05) 20%, transparent 20.08% 39.9%, rgba(245,239,228,.05) 40%, transparent 40.08% 59.9%, rgba(245,239,228,.05) 60%, transparent 60.08% 79.9%, rgba(245,239,228,.05) 80%, transparent 80.08%),
    linear-gradient(0deg, transparent 0 24.9%, rgba(245,239,228,.045) 25%, transparent 25.08% 49.9%, rgba(245,239,228,.045) 50%, transparent 50.08% 74.9%, rgba(245,239,228,.045) 75%, transparent 75.08%);
}

.ptx-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    repeating-linear-gradient(90deg, transparent 0 74px, rgba(240,121,60,.09) 74px 75px),
    repeating-linear-gradient(0deg, transparent 0 74px, rgba(240,121,60,.09) 74px 75px);
  transform:translate3d(var(--ptx-grid-x,0),var(--ptx-grid-y,0),0);
  transition:transform .2s linear;
}

.ptx-hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(480px,.96fr);
  gap:clamp(36px,6vw,92px);
  align-items:center;
}

.ptx-copy{
  position:relative;
  z-index:4;
  padding-right:clamp(0px,3vw,34px);
}

.ptx-kicker{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-bottom:22px;
  color:var(--ptx-orange-2);
  font-family:'Space Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ptx-kicker::before{
  content:"";
  width:30px;
  height:1px;
  background:currentColor;
  box-shadow:10px 0 0 rgba(240,121,60,.28);
}

.ptx-title{
  position:relative;
  max-width:900px;
  margin:0;
  font-family:'Fraunces',serif;
  font-size:clamp(58px,8vw,122px);
  font-weight:500;
  line-height:.88;
  letter-spacing:-.045em;
  color:var(--ptx-paper);
}

.ptx-title-line{
  display:block;
  overflow:hidden;
}

.ptx-title-word{
  display:inline-block;
  transform:translateY(115%);
  opacity:0;
  transition:
    transform 1.05s var(--ptx-ease),
    opacity .9s ease;
}

.ptx-hero.ptx-ready .ptx-title-word:nth-child(1){transition-delay:.08s;}
.ptx-hero.ptx-ready .ptx-title-word:nth-child(2){transition-delay:.19s;}
.ptx-hero.ptx-ready .ptx-title-word:nth-child(3){transition-delay:.30s;}
.ptx-hero.ptx-ready .ptx-title-word:nth-child(4){transition-delay:.41s;}

.ptx-hero.ptx-ready .ptx-title-word{
  transform:translateY(0);
  opacity:1;
}

.ptx-title .accent{
  color:var(--ptx-orange-2);
  font-style:italic;
  padding-right:.04em;
}

.ptx-sub{
  max-width:610px;
  margin:30px 0 0;
  color:var(--ptx-paper-dim);
  font-size:clamp(15px,1.3vw,17px);
  line-height:1.72;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s ease .52s, transform .9s var(--ptx-ease) .52s;
}

.ptx-hero.ptx-ready .ptx-sub{
  opacity:1;
  transform:none;
}

.ptx-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease .68s, transform .8s var(--ptx-ease) .68s;
}

.ptx-hero.ptx-ready .ptx-actions{
  opacity:1;
  transform:none;
}

.ptx-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:26px;
  opacity:0;
  transition:opacity .8s ease .82s;
}

.ptx-hero.ptx-ready .ptx-meta{opacity:1;}

.ptx-meta span{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 9px;
  border:1px solid var(--ptx-line);
  border-radius:999px;
  color:rgba(245,239,228,.52);
  font-family:'Space Mono',monospace;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

.ptx-number{
  position:absolute;
  left:-.05em;
  bottom:-.20em;
  z-index:-1;
  pointer-events:none;
  font-family:'Space Mono',monospace;
  font-size:clamp(110px,18vw,285px);
  line-height:.7;
  letter-spacing:-.08em;
  color:transparent;
  -webkit-text-stroke:1px rgba(245,239,228,.055);
  transform:translate3d(var(--ptx-number-x,0),var(--ptx-number-y,0),0);
}

.ptx-stage{
  position:relative;
  min-height:min(680px,72svh);
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1400px;
}

.ptx-orbit{
  position:absolute;
  width:min(44vw,620px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(245,239,228,.09);
  transform:rotateX(62deg) rotateZ(-11deg) translateZ(0);
  box-shadow:0 0 90px rgba(226,98,42,.06);
}

.ptx-orbit::before,
.ptx-orbit::after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  border:1px dashed rgba(240,121,60,.18);
}

.ptx-orbit::after{
  inset:26%;
  border-style:solid;
  border-color:rgba(245,239,228,.06);
}

.ptx-orbit-2{
  width:min(34vw,470px);
  opacity:.72;
  transform:rotateX(64deg) rotateZ(19deg);
}

.ptx-orbit-3{
  width:min(23vw,320px);
  opacity:.46;
  transform:rotateX(58deg) rotateZ(-31deg);
}

.ptx-node{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--ptx-orange-2);
  box-shadow:0 0 0 7px rgba(240,121,60,.08), 0 0 36px rgba(240,121,60,.26);
}

.ptx-node::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(240,121,60,.35);
  border-radius:50%;
  animation:ptxPulse 2.4s ease-in-out infinite;
}

.ptx-node:nth-child(1){top:15%; left:25%;}
.ptx-node:nth-child(2){top:24%; right:12%; animation-delay:.6s;}
.ptx-node:nth-child(3){bottom:18%; left:19%; animation-delay:1s;}
.ptx-node:nth-child(4){bottom:11%; right:26%; animation-delay:1.4s;}

@keyframes ptxPulse{
  0%,100%{transform:scale(.85);opacity:.35;}
  50%{transform:scale(1.28);opacity:1;}
}

.ptx-object{
  position:relative;
  width:min(34vw,460px);
  aspect-ratio:1.1;
  transform-style:preserve-3d;
  transform:
    translate3d(var(--ptx-obj-x,0),var(--ptx-obj-y,0),0)
    rotateX(var(--ptx-rx,0deg))
    rotateY(var(--ptx-ry,0deg))
    rotateZ(-6deg);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}

.ptx-slab{
  position:absolute;
  left:9%;
  top:17%;
  width:82%;
  height:56%;
  border-radius:4px;
  transform:translateZ(72px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.34), transparent 32%),
    linear-gradient(110deg, rgba(226,98,42,.18), transparent 58%),
    #8d8579;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 36px 90px -26px rgba(0,0,0,.72),
    0 10px 0 -2px rgba(226,98,42,.22);
  overflow:hidden;
}

.ptx-slab::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    repeating-linear-gradient(117deg, transparent 0 23px, rgba(255,255,255,.18) 24px 26px, transparent 27px 43px),
    repeating-linear-gradient(62deg, transparent 0 68px, rgba(20,18,16,.18) 70px 72px, transparent 73px 120px);
  transform:rotate(4deg);
  opacity:.58;
  filter:blur(.2px);
}

.ptx-slab::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 28%, rgba(255,255,255,.24) 48%, transparent 65%);
  transform:translateX(-115%);
  animation:ptxSheen 4.8s var(--ptx-ease) infinite;
}

@keyframes ptxSheen{
  0%,52%{transform:translateX(-115%);}
  80%,100%{transform:translateX(115%);}
}

.ptx-apron{
  position:absolute;
  left:17%;
  top:67%;
  width:66%;
  height:6%;
  border-radius:2px;
  background:linear-gradient(180deg,#5c534a,#24211e);
  transform:translateZ(30px);
  box-shadow:0 14px 22px -12px rgba(0,0,0,.65);
}

.ptx-leg{
  position:absolute;
  top:67%;
  width:7%;
  height:22%;
  border-radius:2px;
  background:linear-gradient(90deg,#1a1714,#403832,#171513);
  box-shadow:0 12px 18px -12px rgba(0,0,0,.8);
  transform:translateZ(12px);
}

.ptx-leg.l{left:21%; transform:translateZ(12px) rotate(5deg);}
.ptx-leg.r{right:21%; transform:translateZ(12px) rotate(-5deg);}

.ptx-dimension{
  position:absolute;
  color:rgba(240,121,60,.88);
  font-family:'Space Mono',monospace;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.ptx-dimension::before{
  content:"";
  position:absolute;
  top:50%;
  height:1px;
  background:currentColor;
  opacity:.55;
}

.ptx-dimension.a{right:-8%; top:21%;}
.ptx-dimension.a::before{right:100%; width:88px; margin-right:12px;}

.ptx-dimension.b{left:-12%; bottom:23%;}
.ptx-dimension.b::before{left:100%; width:76px; margin-left:12px;}

.ptx-dimension.c{right:3%; bottom:6%;}
.ptx-dimension.c::before{right:100%; width:54px; margin-right:12px;}

.ptx-ticker{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  z-index:3;
  overflow:hidden;
  border-top:1px solid rgba(245,239,228,.10);
  border-bottom:1px solid rgba(245,239,228,.10);
  background:rgba(13,12,11,.55);
  backdrop-filter:blur(10px);
}

.ptx-ticker-track{
  display:flex;
  width:max-content;
  gap:42px;
  padding:12px 0;
  animation:ptxTicker 24s linear infinite;
}

.ptx-ticker:hover .ptx-ticker-track{animation-play-state:paused;}

.ptx-ticker span{
  display:flex;
  align-items:center;
  gap:42px;
  color:rgba(245,239,228,.62);
  font-family:'Space Mono',monospace;
  font-size:9px;
  letter-spacing:.10em;
  text-transform:uppercase;
  white-space:nowrap;
}

.ptx-ticker span::after{
  content:"◆";
  color:var(--ptx-orange-2);
  font-size:6px;
}

@keyframes ptxTicker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.ptx-scroll-cue{
  position:absolute;
  right:0;
  bottom:56px; /* sits in its own row clear above the ticker strip below it,
                  instead of sharing the ticker's bottom:18px and overlapping it */
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:rgba(245,239,228,.5);
  font-family:'Space Mono',monospace;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.ptx-scroll-cue-line{
  width:52px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ptx-orange-2));
  position:relative;
  overflow:hidden;
}

.ptx-scroll-cue-line::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:28%;
  background:#fff;
  animation:ptxCue 1.8s ease-in-out infinite;
}

@keyframes ptxCue{
  0%{transform:translateX(-100%);}
  55%,100%{transform:translateX(330%);}
}

.ptx-cursor{
  position:fixed;
  width:170px;
  height:170px;
  left:0;
  top:0;
  z-index:1003;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle, rgba(240,121,60,.15) 0, rgba(240,121,60,.05) 34%, transparent 68%);
  mix-blend-mode:screen;
  filter:blur(2px);
  transition:opacity .25s ease;
}

.ptx-cursor::after{
  content:"PARTNER / MOVE";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(245,239,228,.72);
  font-family:'Space Mono',monospace;
  font-size:7px;
  letter-spacing:.13em;
  white-space:nowrap;
}

.ptx-active .ptx-cursor{opacity:1;}

.ptx-hero .btn{position:relative; z-index:2;}

@media (max-width:1100px){
  .ptx-hero-inner{
    grid-template-columns:1fr;
    gap:28px;
  }
  .ptx-stage{
    min-height:520px;
    margin-top:-8px;
  }
  .ptx-object{width:min(68vw,520px);}
  .ptx-orbit{width:min(72vw,650px);}
  .ptx-orbit-2{width:min(58vw,500px);}
  .ptx-orbit-3{width:min(40vw,350px);}
  .ptx-number{bottom:-.08em;}
}

@media (max-width:700px){
  .ptx-hero{
    min-height:auto;
    padding:44px 0 78px;
  }
  .ptx-title{
    font-size:clamp(54px,16vw,92px);
  }
  .ptx-sub{margin-top:24px; font-size:14.5px;}
  .ptx-stage{
    min-height:420px;
    margin-top:4px;
  }
  .ptx-object{width:min(82vw,430px);}
  .ptx-orbit{width:min(91vw,540px);}
  .ptx-orbit-2{width:min(72vw,440px);}
  .ptx-orbit-3{width:min(49vw,300px);}
  .ptx-dimension{
    font-size:8px;
  }
  .ptx-dimension.a{right:-2%;}
  .ptx-dimension.b{left:-2%;}
  .ptx-dimension.c{right:0;}
  .ptx-ticker{
    bottom:0;
  }
  .ptx-scroll-cue{
    left:0; right:0; bottom:44px; justify-content:center; width:100%; font-size:8px;
  }
}

@media (prefers-reduced-motion:reduce){
  .ptx-title-word,
  .ptx-sub,
  .ptx-actions,
  .ptx-meta{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
  .ptx-slab::after,
  .ptx-ticker-track,
  .ptx-scroll-cue-line::after,
  .ptx-node::after{
    animation:none !important;
  }
  .ptx-cursor{display:none !important;}
}

/* ================================================================
   EXISTING PARTNERS LOWER SECTIONS
   ================================================================ */
/* -- tiers -- */
.pt-tiers-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.pt-tier-card{
  position:relative; border:1px dashed var(--line); border-radius:8px; padding:34px 28px;
  background:rgba(245,239,228,.02);
  clip-path:inset(0 0 0 0);
}
.pt-stamp{
  /* Base position — the authoritative, higher-specificity
     ".pt-tiers .pt-tier-card .pt-stamp" rule further down this file
     (search "REVISION STAMP POSITION FIX") is what actually controls
     placement on the live tiers grid; this is just a sane fallback. */
  position:absolute; top:16px; left:18px; font-family:'Space Mono',monospace; font-size:10px;
  color:var(--orange-2); border:1px solid var(--orange-2); background:var(--stone-black-2, #1B1815);
  padding:3px 9px; border-radius:3px; transform:rotate(-3deg); opacity:.95;
}
.pt-tier-head{display:flex; align-items:baseline; gap:12px; margin-bottom:14px;}
.pt-tier-num{font-family:'Space Mono',monospace; color:var(--orange-2); font-size:13px;}
.pt-tier-head h3{font-family:'Fraunces',serif; font-size:24px;}
.pt-tier-desc{color:var(--marble-muted); font-size:14.5px; line-height:1.6; margin-bottom:18px;}
.pt-tier-list{display:flex; flex-direction:column; gap:9px; margin-bottom:26px;}
.pt-tier-list li{font-size:13.5px; color:var(--slab-cream-dim); padding-left:16px; position:relative;}
.pt-tier-list li::before{content:"—"; position:absolute; left:0; color:var(--orange-2);}
.pt-tier-cta{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--orange-2);}
.pt-tier-cta svg{width:16px; height:16px; transition:transform .25s;}
.pt-tier-cta:hover svg{transform:translateX(4px);}

/* staggered corner-wipe reveal, distinct per card */
.pt-tier-card[data-corner="tl"]{ clip-path:inset(0 100% 100% 0); transition:clip-path .8s cubic-bezier(.16,1,.3,1); }
.pt-tier-card[data-corner="tr"]{ clip-path:inset(0 0 100% 100%); transition:clip-path .8s cubic-bezier(.16,1,.3,1) .12s; }
.pt-tier-card[data-corner="bl"]{ clip-path:inset(100% 100% 0 0); transition:clip-path .8s cubic-bezier(.16,1,.3,1) .24s; }
.pt-tier-card.in{ clip-path:inset(0 0 0 0); }


/* ================================================================
   PARTNERS TIERS — FAIL-SAFE MOTION OVERRIDE
   The cards are NEVER hidden by CSS. JavaScript only enhances the
   entrance/hover animation. This guarantees visible content even if
   an observer or another script fails.
   ================================================================ */
.pt-tiers .pt-tier-card,
.pt-tiers .pt-tier-card[data-corner="tl"],
.pt-tiers .pt-tier-card[data-corner="tr"],
.pt-tiers .pt-tier-card[data-corner="bl"],
.pt-page.ptx-js .pt-tier-card,
.pt-page.ptx-js .pt-tier-card.ptx-tier-visible{
  opacity:1 !important;
  visibility:visible !important;
  clip-path:inset(0 0 0 0) !important;
}

.pt-tiers .pt-tier-card{
  position:relative;
  overflow:hidden;
  transform:translate3d(0,0,0);
  transform-style:preserve-3d;
  will-change:transform;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    border-color .45s cubic-bezier(.16,.84,.44,1),
    box-shadow .45s cubic-bezier(.16,.84,.44,1),
    background .45s cubic-bezier(.16,.84,.44,1);
}

/* Entrance animation class. The element remains visible before and after it. */
.pt-tiers .pt-tier-card.ptx-motion-ready{
  animation:ptxTierEnter .9s cubic-bezier(.16,.84,.44,1) both;
}
.pt-tiers .pt-tier-card[data-corner="tl"].ptx-motion-ready{animation-delay:.03s;}
.pt-tiers .pt-tier-card[data-corner="tr"].ptx-motion-ready{animation-delay:.15s;}
.pt-tiers .pt-tier-card[data-corner="bl"].ptx-motion-ready{animation-delay:.27s;}

@keyframes ptxTierEnter{
  0%{
    opacity:1;
    transform:translate3d(0,34px,0) rotateX(7deg) scale(.975);
  }
  60%{
    opacity:1;
    transform:translate3d(0,-4px,0) rotateX(-1deg) scale(1.004);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) rotateX(0deg) scale(1);
  }
}

/* Bright architectural scan that occurs on entrance. */
.pt-tiers .pt-tier-card .ptx-card-scan{
  position:absolute;
  inset:-40% -65%;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(108deg,
    transparent 42%,
    rgba(240,121,60,.06) 47%,
    rgba(255,255,255,.28) 50%,
    rgba(240,121,60,.08) 53%,
    transparent 59%);
  transform:translateX(-120%) skewX(-10deg);
  opacity:0;
}

.pt-tiers .pt-tier-card.ptx-scan .ptx-card-scan{
  opacity:1;
  animation:ptxCardScan 1.05s cubic-bezier(.16,.84,.44,1) both;
}

@keyframes ptxCardScan{
  from{transform:translateX(-120%) skewX(-10deg);}
  to{transform:translateX(120%) skewX(-10deg);}
}

/* Tiny continuously moving technical glow after entrance. */
.pt-tiers .pt-tier-card.ptx-ambient::before{
  opacity:.18;
  animation:ptxTierAmbient 6s ease-in-out infinite;
}

@keyframes ptxTierAmbient{
  0%,100%{transform:translateX(-130%) skewX(-10deg);}
  45%{transform:translateX(130%) skewX(-10deg);}
  55%,100%{transform:translateX(130%) skewX(-10deg);}
}

/* Keep the card contents above decorative layers. */
.pt-tiers .pt-tier-card > *{
  position:relative;
  z-index:5;
}
/* ...except the stamp, which must stay taken out of flow — see the
   dedicated ".pt-tiers .pt-tier-card .pt-stamp" override further down
   ("REVISION STAMP POSITION FIX") that restores position:absolute. */

.pt-tiers .pt-tier-card::after{
  z-index:1;
}

/* Stronger desktop hover response. */
@media (hover:hover) and (pointer:fine){
  .pt-tiers .pt-tier-card:hover{
    border-color:rgba(240,121,60,.48);
    box-shadow:
      0 34px 82px -44px rgba(0,0,0,.72),
      0 0 0 1px rgba(240,121,60,.08),
      inset 0 0 55px rgba(240,121,60,.025);
  }
}

@media (prefers-reduced-motion:reduce){
  .pt-tiers .pt-tier-card,
  .pt-tiers .pt-tier-card.ptx-motion-ready{
    animation:none !important;
    transform:none !important;
    transition:none !important;
  }
  .pt-tiers .pt-tier-card .ptx-card-scan,
  .pt-tiers .pt-tier-card.ptx-scan .ptx-card-scan{
    animation:none !important;
    opacity:0 !important;
  }
}

/* -- process rail -- */
.pt-rail-wrap{position:relative; padding-top:10px;}
.pt-rail-svg{width:100%; height:60px; display:block; position:absolute; top:10px; left:0;}
.pt-rail-nodes{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; padding-top:40px;}
.pt-rail-node{text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;}
.pt-rail-num{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--orange-2); color:var(--orange-2);
  display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:12px;
  background:var(--stone-black-2); margin-bottom:6px;
}
.pt-rail-node strong{font-family:'Fraunces',serif; font-size:16px;}
.pt-rail-node small{color:var(--marble-muted); font-size:12px;}

/* -- marquee -- */
.pt-marquee-wrap{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; background:var(--stone-black-2);}
.pt-marquee-track{display:flex; gap:44px; width:max-content; animation:ptMarquee 32s linear infinite;}
.pt-marquee-wrap:hover .pt-marquee-track{animation-play-state:paused;}
.pt-marquee-item{font-family:'Fraunces',serif; font-style:italic; font-size:20px; color:var(--marble-muted); white-space:nowrap;}
@keyframes ptMarquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* -- application panel: a blueprint-styled "spec sheet" frame around
      the whole apply section, with corner ticks matching the hero's
      architectural-drawing language, icon rows for WhatsApp/e-mail,
      and boxed inputs with labels above (never inside/overlapping the
      placeholder), instead of the old bare underlined fields. -- */
.pt-apply-panel{
  position:relative; border:1px solid var(--line); border-radius:20px; padding:clamp(28px,4vw,56px);
  background:linear-gradient(160deg, rgba(245,239,228,.03), rgba(245,239,228,.01));
  overflow:clip;
}
.pt-apply-tag{
  position:absolute; top:20px; right:24px; font-family:'Space Mono',monospace; font-size:10px;
  letter-spacing:.12em; color:var(--marble-muted); border:1px solid var(--line); border-radius:3px;
  padding:3px 9px; opacity:.8;
}
.pt-apply-corner{ position:absolute; width:22px; height:22px; pointer-events:none; opacity:.55; }
.pt-apply-corner::before, .pt-apply-corner::after{ content:""; position:absolute; background:var(--orange-2); }
.pt-apply-corner::before{ width:100%; height:1px; }
.pt-apply-corner::after{ width:1px; height:100%; }
.pt-apply-corner.tl{ top:14px; left:14px; }
.pt-apply-corner.tr{ top:14px; right:14px; }
.pt-apply-corner.bl{ bottom:14px; left:14px; }
.pt-apply-corner.br{ bottom:14px; right:14px; }
.pt-apply-corner.tl::before, .pt-apply-corner.tl::after{ top:0; left:0; }
.pt-apply-corner.tr::before{ top:0; right:0; }
.pt-apply-corner.tr::after{ top:0; right:0; }
.pt-apply-corner.bl::before{ bottom:0; left:0; }
.pt-apply-corner.bl::after{ bottom:0; left:0; }
.pt-apply-corner.br::before{ bottom:0; right:0; }
.pt-apply-corner.br::after{ bottom:0; right:0; }

.pt-apply-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; position:relative; z-index:1;}
.pt-apply-copy h2{ margin-top:8px; }
.pt-apply-sub{color:var(--marble-muted); margin:16px 0 26px; max-width:420px; line-height:1.7;}

.pt-apply-contact{display:flex; flex-direction:column; gap:10px; margin-bottom:22px;}
.pt-contact-row{
  position:relative; display:flex; align-items:center; gap:14px; padding:13px 15px;
  border-radius:14px; border:1px solid var(--line); text-decoration:none;
  background:rgba(245,239,228,.03); transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.pt-contact-row:hover, .pt-contact-row:focus-visible{
  border-color:var(--orange-2); background:rgba(245,239,228,.06); transform:translateX(4px);
}
.pt-contact-icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(245,239,228,.07); border:1px solid var(--line); color:var(--orange-2);
}
.pt-contact-icon svg{ width:18px; height:18px; }
.pt-contact-icon-wa{ background:rgba(37,211,102,.14); border-color:rgba(37,211,102,.3); color:#3ddc74; }
.pt-contact-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pt-contact-text strong{ font-family:'Fraunces',serif; font-weight:500; font-size:15.5px; color:var(--slab-cream); }
.pt-contact-text small{ font-family:'Space Mono',monospace; font-size:11px; color:var(--marble-muted); }
.pt-contact-arrow{ margin-left:auto; flex:0 0 auto; width:15px; height:15px; color:var(--marble-muted); transition:transform .3s ease, color .3s ease; }
.pt-contact-row:hover .pt-contact-arrow{ transform:translate(3px,-3px); color:var(--orange-2); }

.pt-apply-note{
  display:inline-flex; align-items:center; gap:9px; font-family:'Space Mono',monospace; font-size:11.5px;
  letter-spacing:.03em; color:var(--orange-2); opacity:.9;
}
.pt-apply-note svg{ width:15px; height:15px; flex:0 0 auto; }

.pt-form{display:flex; flex-direction:column; gap:18px; position:relative; z-index:1;}
.pt-field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.pt-field label{
  display:flex; align-items:center; gap:7px; font-family:'Space Mono',monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--marble-muted); margin-bottom:9px;
}
.pt-field label svg{ width:13px; height:13px; flex:0 0 auto; opacity:.8; }
.pt-field input, .pt-field select, .pt-field textarea{
  width:100%; background:rgba(245,239,228,.04); border:1px solid var(--line); border-radius:10px;
  color:var(--slab-cream); font-family:'Manrope',sans-serif; font-size:14.5px; padding:14px 14px;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.pt-field input::placeholder, .pt-field textarea::placeholder{ color:var(--marble-muted); opacity:.5; }
.pt-field input:focus, .pt-field select:focus, .pt-field textarea:focus{
  outline:none; border-color:var(--orange-2); background:rgba(245,239,228,.07);
  box-shadow:0 0 0 4px rgba(240,121,60,.14);
}
.pt-field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6AA99' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px; padding-right:36px;
}
.pt-field textarea{ resize:vertical; min-height:88px; }
.pt-apply-submit{ margin-top:4px; justify-content:center; }
.pt-revline{ font-family:'Space Mono',monospace; font-size:10px; opacity:.5; margin-left:10px; }

@media (max-width:640px){
  .pt-apply-tag{ top:14px; right:16px; font-size:9px; }
  .pt-apply-corner{ display:none; }
  .pt-apply-panel{ padding:22px 18px; border-radius:16px; }
}

@media (max-width:980px){
  .pt-hero-grid{grid-template-columns:1fr; gap:40px;}
  .pt-tiers-grid{grid-template-columns:1fr;}
  .pt-rail-nodes{grid-template-columns:1fr 1fr; row-gap:28px;}
  .pt-rail-svg{display:none;}
  .pt-apply-grid{grid-template-columns:1fr;}
  .pt-field-row{grid-template-columns:1fr;}
}
/* ===================================================================
   PAGE: Klantenservice (page-klantenservice.php) — prefix "cs-"
   DNA: calm help desk / airport information board. Deliberately the
   quietest, least ornamented page on the site — flat cream, almost no
   marble texture. The one loud detail is the split-flap status strip;
   everything else is calm, warm, damped easing (cubic-bezier(.22,1,.36,1)).
   =================================================================== */

.cs-page{ background:var(--slab-cream); color:var(--stone-black); }

/* ---- Hero ---- */
.cs-hero{
  padding:150px 0 60px;
  background:var(--slab-cream);
  text-align:center;
}
.cs-hero-inner{ max-width:720px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.cs-hero .eyebrow{ color:var(--orange-deep); justify-content:center; }
.cs-hero-title{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(34px,5vw,58px);
  line-height:1.08;
  color:var(--stone-black);
  margin:14px 0 18px;
}
.cs-hero-sub{
  font-size:16.5px;
  line-height:1.6;
  color:rgba(20,18,16,.68);
  max-width:520px;
  margin:0 auto 30px;
}

/* ---- Split-flap status strip (signature move, this page only) ---- */
.cs-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--stone-black);
  color:var(--slab-cream);
  border-radius:100px;
  padding:10px 20px;
  font-family:'Space Mono',monospace;
  font-size:12.5px;
  letter-spacing:.02em;
  margin-bottom:34px;
}
.cs-status-dot{
  width:7px; height:7px; border-radius:50%;
  background:#4CAF6D;
  box-shadow:0 0 0 0 rgba(76,175,109,.6);
  animation:cs-pulse 2.2s ease-in-out infinite;
  flex:none;
}
@keyframes cs-pulse{
  0%{ box-shadow:0 0 0 0 rgba(76,175,109,.5); }
  70%{ box-shadow:0 0 0 6px rgba(76,175,109,0); }
  100%{ box-shadow:0 0 0 0 rgba(76,175,109,0); }
}
.cs-status-label{ opacity:.65; }
.cs-flap-strip{ display:inline-flex; gap:2px; }
.cs-flap-char{
  position:relative;
  display:inline-block;
  width:9px;
  height:15px;
  perspective:120px;
  overflow:hidden;
}
.cs-flap-char .cs-flap-face{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--slab-cream);
  backface-visibility:hidden;
}
.cs-flap-char.cs-flap-space{ width:5px; }

/* ---- Hero search ---- */
.cs-hero-search{
  position:relative;
  max-width:520px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:100px;
  padding:14px 20px;
  box-shadow:0 10px 30px -18px rgba(20,18,16,.25);
}
.cs-hero-search svg{ width:18px; height:18px; color:rgba(20,18,16,.4); flex:none; }
.cs-hero-search input{
  border:0; outline:0; background:none;
  flex:1; font-family:'Manrope',sans-serif; font-size:14.5px;
  color:var(--stone-black);
}
.cs-hero-search input::placeholder{ color:rgba(20,18,16,.38); }
.cs-hero-search-clear{
  display:none; cursor:pointer; opacity:.5;
  transition:opacity .2s var(--ease);
}
.cs-hero-search-clear svg{ width:15px; height:15px; }
.cs-hero-search-clear:hover{ opacity:.9; }
.cs-hero-search.has-value .cs-hero-search-clear{ display:flex; }

/* ---- Quick-path tiles ---- */
.cs-tiles-section{ padding-top:0; }
.cs-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.cs-tile{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:6px;
  padding:30px 28px 26px;
  text-decoration:none;
  color:var(--stone-black);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), border-color .5s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.cs-tile:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 46px -30px rgba(20,18,16,.28);
  border-color:rgba(226,98,42,.3);
}
.cs-tile-icon{
  width:46px; height:46px;
  border-radius:50%;
  background:var(--slab-cream-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--orange-deep);
  margin-bottom:18px;
  transition:background .5s cubic-bezier(.22,1,.36,1);
}
.cs-tile-icon svg{ width:21px; height:21px; }
.cs-tile:hover .cs-tile-icon{ background:var(--orange); color:#fff; }
.cs-tile h3{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:19px; margin:0 0 8px;
}
.cs-tile p{
  font-size:14px; line-height:1.55;
  color:rgba(20,18,16,.6);
  margin:0 0 18px;
}
.cs-tile-arrow{
  margin-top:auto;
  width:30px; height:30px;
  border-radius:50%;
  border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--stone-black);
  transition:transform .5s cubic-bezier(.22,1,.36,1), background .5s cubic-bezier(.22,1,.36,1), color .5s cubic-bezier(.22,1,.36,1);
}
.cs-tile-arrow svg{ width:15px; height:15px; }
.cs-tile:hover .cs-tile-arrow{ background:var(--stone-black); color:#fff; transform:translateX(4px); }

/* ---- Sidebar + accordion layout ---- */
.cs-faq-section{ padding-top:70px; }
.cs-faq-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:64px;
  align-items:start;
}
.cs-sidebar{ position:sticky; top:110px; }
.cs-sidebar-label{
  font-family:'Space Mono',monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(20,18,16,.4);
  margin-bottom:14px;
}
.cs-sidebar-nav{ display:flex; flex-direction:column; gap:2px; }
.cs-sidebar-link{
  display:block;
  padding:9px 0 9px 14px;
  border-left:2px solid transparent;
  font-size:14.5px;
  color:rgba(20,18,16,.55);
  text-decoration:none;
  transition:color .4s cubic-bezier(.22,1,.36,1), border-color .4s cubic-bezier(.22,1,.36,1), padding-left .4s cubic-bezier(.22,1,.36,1);
}
.cs-sidebar-link:hover{ color:var(--stone-black); }
.cs-sidebar-link.is-active{
  color:var(--orange-deep);
  border-left-color:var(--orange);
  padding-left:18px;
  font-weight:600;
}

.cs-faq-main{ min-width:0; }
.cs-faq-group{ margin-bottom:56px; scroll-margin-top:100px; }
.cs-faq-group-title{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(22px,2.4vw,28px);
  margin:0 0 20px;
  color:var(--stone-black);
}

.cs-accordion{ border-top:1px solid var(--line-soft); }
.cs-acc-item{
  border-bottom:1px solid var(--line-soft);
  transition:opacity .4s cubic-bezier(.22,1,.36,1);
}
.cs-acc-item.is-dimmed{ opacity:.15; }
.cs-acc-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  background:none; border:0; cursor:pointer;
  padding:20px 4px;
  text-align:left;
  font-family:'Manrope',sans-serif;
  font-size:15.5px; font-weight:600;
  color:var(--stone-black);
}
.cs-acc-icon{
  position:relative;
  width:18px; height:18px; flex:none;
}
.cs-acc-icon::before, .cs-acc-icon::after{
  content:''; position:absolute;
  background:var(--stone-black);
  top:50%; left:50%;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.cs-acc-icon::before{ width:14px; height:2px; transform:translate(-50%,-50%); }
.cs-acc-icon::after{ width:2px; height:14px; transform:translate(-50%,-50%); }
.cs-acc-trigger[aria-expanded="true"] .cs-acc-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.cs-acc-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s cubic-bezier(.22,1,.36,1);
}
.cs-acc-panel-inner{ padding:0 4px 22px; }
.cs-acc-panel-inner p{
  font-size:14.5px; line-height:1.7;
  color:rgba(20,18,16,.68);
  margin:0;
  max-width:640px;
}
.cs-acc-panel-inner a{ color:var(--orange-deep); text-decoration:underline; }

/* ---- Contact closing block ---- */
.cs-contact-group{ margin-bottom:20px; }
.cs-contact-lead{
  font-size:15px; color:rgba(20,18,16,.6);
  margin:-8px 0 26px;
}
.cs-contact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.cs-contact-card{
  display:block;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:6px;
  padding:24px 22px;
  text-decoration:none;
  color:var(--stone-black);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.cs-contact-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -28px rgba(20,18,16,.25);
}
.cs-contact-card-static{ cursor:default; }
.cs-contact-card-static:hover{ transform:none; box-shadow:none; }
.cs-contact-icon{
  width:38px; height:38px; border-radius:50%;
  background:var(--slab-cream-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--orange-deep);
  margin-bottom:14px;
}
.cs-contact-icon svg{ width:17px; height:17px; }
.cs-contact-card h3{ font-family:'Fraunces',serif; font-weight:500; font-size:16.5px; margin:0 0 6px; }
.cs-contact-card p{ font-size:14px; color:rgba(20,18,16,.62); margin:0 0 4px; }
.cs-contact-note{ display:block; font-size:12px; color:var(--orange-deep); margin-top:8px; }

/* ---- Responsive ---- */
@media (max-width:980px){
  .cs-hero{ padding:120px 0 44px; }
  .cs-tiles{ grid-template-columns:1fr; }
  .cs-faq-layout{ grid-template-columns:1fr; gap:30px; }
  .cs-sidebar{ position:static; }
  .cs-sidebar-nav{ flex-direction:row; flex-wrap:wrap; gap:8px; }
  .cs-sidebar-link{ border-left:0; border-bottom:2px solid transparent; padding:6px 10px; background:var(--slab-cream-dim); border-radius:100px; }
  .cs-sidebar-link.is-active{ padding-left:10px; background:var(--stone-black); color:var(--slab-cream); border-bottom-color:transparent; }
  .cs-contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .cs-hero{ padding:110px 0 36px; }
  .cs-hero-search{ padding:12px 16px; }
  .cs-status{ font-size:11px; padding:8px 14px; flex-wrap:wrap; justify-content:center; }
}

  /* ============================================================
     ===== PAGE: Mijn Account (page-mijn-account.php) — "ac-" =====
     DNA: personal dashboard / permanent membership pass. Signature
     move: tab content switches via a genuine 3D card flip
     (rotateY), never a fade/slide/fold — distinct from every other
     tab or step transition on the site. Own easing personality:
     crisp UI easing (--ac-ease). Own background treatment: a
     low-opacity marble watermark that is genuinely position:fixed
     and never parallaxes, unlike every other textured page.
     ============================================================ */
  .ac-page{ --ac-ease:cubic-bezier(.2,.8,.2,1); position:relative; }

  /* --- fixed, non-parallax marble watermark --- */
  .ac-watermark{
    position:fixed; inset:0; z-index:0; opacity:.035; pointer-events:none; overflow:hidden;
  }
  .ac-watermark svg{width:100%; height:100%; display:block;}
  .ac-page, footer{position:relative; z-index:1;}

  /* --- nav account icon, marked current on this page only --- */
  .nav-icon-btn.is-current{color:var(--orange-2) !important;}
  .mnav-row.mnav-current{color:var(--orange-2) !important;}

  /* --- hero: headline + permanent pass card, side by side --- */
  .ac-hero{padding:74px 0 40px;}
  .ac-hero-inner{display:flex; align-items:flex-end; justify-content:space-between; gap:48px; flex-wrap:wrap;}
  .ac-hero-content{max-width:520px;}
  .ac-hero-content h1{font-family:'Fraunces',serif; font-size:clamp(30px,3.6vw,46px); line-height:1.12; color:var(--slab-cream); margin-top:16px;}
  .ac-hero-content p{margin-top:16px; font-size:16px; line-height:1.7; color:var(--slab-cream-dim);}

  /* card language borrowed from .sr-pass, evolved: no tear, static
     tilt for tactility, marble-vein watermark inside via filter,
     avatar initials replace the visit stamp. */
  .ac-pass{
    position:relative; z-index:1; flex-shrink:0; width:340px;
    background:var(--stone-black-2); border:1px solid var(--line); border-radius:16px;
    padding:26px 26px 22px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
    transform:rotate(-1.4deg); overflow:hidden;
  }
  .ac-pass-veins{position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay; pointer-events:none;}
  .ac-pass-top{position:relative; display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px;}
  .ac-pass-brand{font-family:'Fraunces',serif; font-size:15px; letter-spacing:.04em; color:var(--slab-cream);}
  .ac-pass-brand span{display:block; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.16em; color:var(--marble-muted); margin-top:4px;}
  .ac-pass-avatar{
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, var(--orange), var(--orange-deep));
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Mono',monospace; font-size:13px; font-weight:700; letter-spacing:.03em; color:#fff;
  }
  .ac-pass-name{position:relative; font-family:'Fraunces',serif; font-size:19px; color:var(--slab-cream); margin-bottom:6px;}
  .ac-pass-row{position:relative; display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-top:1px dashed var(--line);}
  .ac-pass-row span{font-family:'Space Mono',monospace; font-size:11px; color:var(--marble-muted); letter-spacing:.02em;}
  .ac-pass-row strong{font-family:'Space Mono',monospace; font-size:13.5px; font-weight:700; color:var(--slab-cream);}
  .ac-pass-bottom{position:relative; display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:16px; border-top:1px dashed var(--line);}
  .ac-pass-barcode{
    flex:1; height:24px; margin-right:16px; opacity:.5;
    background:repeating-linear-gradient(90deg, var(--slab-cream) 0 2px, transparent 2px 5px, var(--slab-cream) 5px 6px, transparent 6px 11px);
  }
  .ac-pass-code{font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--marble-muted); white-space:nowrap;}

  /* --- tab bar with sliding underline indicator --- */
  .ac-dash{padding-top:20px;}
  .ac-tabbar{position:relative; display:flex; gap:6px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;}
  .ac-tabbar::-webkit-scrollbar{display:none;}
  .ac-tab{
    flex-shrink:0; background:none; border:none; cursor:pointer; padding:16px 18px;
    font-family:'Manrope',sans-serif; font-size:14.5px; font-weight:600; color:var(--marble-muted);
    transition:color .3s var(--ac-ease);
  }
  .ac-tab:hover{color:var(--slab-cream);}
  .ac-tab.is-active{color:var(--slab-cream);}
  .ac-tab-underline{
    position:absolute; bottom:-1px; left:0; height:2px; width:0;
    background:linear-gradient(90deg, var(--orange-deep), var(--orange-2));
    transition:transform .4s var(--ac-ease), width .4s var(--ac-ease);
  }

  /* --- flip container: two absolutely-stacked faces, JS-driven
     height + rotateY. .no-transition briefly disables the transform
     transition so the post-flip reset to 0deg never visibly plays. --- */
  .ac-flip{position:relative; margin-top:36px; perspective:1800px; transition:height .5s var(--ac-ease);}
  .ac-flip-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .65s var(--ac-ease);}
  .ac-flip-inner.is-flipping{transform:rotateY(180deg);}
  .ac-flip-inner.no-transition{transition:none !important;}
  .ac-flip-face{position:absolute; inset:0; width:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
  .ac-flip-front{transform:rotateY(0deg);}
  .ac-flip-back{transform:rotateY(180deg);}
  @media (prefers-reduced-motion: reduce){
    .ac-flip, .ac-flip-inner{transition:none !important;}
  }

  .ac-panel{padding:2px 0 8px;}

  /* --- Bestellingen: vertical timeline --- */
  .ac-orders{display:flex; flex-direction:column; gap:0;}
  .ac-order{position:relative; display:flex; gap:20px; padding:26px 0; border-top:1px solid var(--line);}
  .ac-order:first-child{border-top:none; padding-top:4px;}
  .ac-order-marker{flex-shrink:0; width:10px; height:10px; margin-top:6px; border-radius:50%; background:var(--orange-2); box-shadow:0 0 0 4px rgba(240,121,60,.16);}
  .ac-order-body{flex:1; min-width:0;}
  .ac-order-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;}
  .ac-order-num{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--marble-muted);}
  .ac-order-title{font-family:'Fraunces',serif; font-size:19px; color:var(--slab-cream); margin-top:4px;}
  .ac-order-date{font-family:'Space Mono',monospace; font-size:12px; color:var(--marble-muted); white-space:nowrap; padding-top:4px;}
  .ac-order-meta{margin-top:6px; font-size:13.5px; color:var(--slab-cream-dim);}

  /* status rail: nodes light up sequentially like a departure board */
  .ac-status-rail{position:relative; display:flex; margin-top:22px; padding-top:2px;}
  .ac-status-track{position:absolute; top:5px; left:5px; right:5px; height:2px; background:var(--line);}
  .ac-status-track-fill{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--orange-deep), var(--orange-2)); transition:width .5s var(--ac-ease);}
  .ac-status-step{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;}
  .ac-status-step:first-child{align-items:flex-start;}
  .ac-status-step:last-child{align-items:flex-end;}
  .ac-status-node{width:12px; height:12px; border-radius:50%; background:var(--stone-black-2); border:2px solid var(--line); transition:background .3s var(--ac-ease), border-color .3s var(--ac-ease), box-shadow .3s var(--ac-ease), transform .3s var(--ac-ease);}
  .ac-status-node.is-lit{background:var(--orange-2); border-color:var(--orange-2); box-shadow:0 0 0 4px rgba(240,121,60,.18); transform:scale(1.1);}
  .ac-status-label{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.03em; color:var(--marble-muted); text-align:center;}

  /* --- Offertes: swatch summary cards --- */
  .ac-quotes{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .ac-quote-card{background:var(--stone-black-2); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column;}
  .ac-quote-thumb{position:relative; height:140px; overflow:hidden;}
  .ac-quote-thumb-veins{position:absolute; inset:0; background:#fff; mix-blend-mode:overlay; opacity:.5;}
  .ac-quote-info{padding:18px 20px 20px;}
  .ac-quote-status{display:inline-block; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:100px; margin-bottom:10px;}
  .ac-quote-status--concept{background:rgba(182,170,153,.16); color:var(--marble-muted);}
  .ac-quote-status--verstuurd{background:rgba(240,121,60,.16); color:var(--orange-2);}
  .ac-quote-title{font-family:'Fraunces',serif; font-size:17px; color:var(--slab-cream);}
  .ac-quote-meta{margin-top:6px; font-size:13px; color:var(--slab-cream-dim);}
  .ac-quote-updated{margin-top:8px; font-family:'Space Mono',monospace; font-size:11px; color:var(--marble-muted);}
  .ac-quote-actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
  .ac-btn-sm{padding:10px 16px !important; font-size:12.5px !important;}

  /* --- shared empty state --- */
  .ac-empty{text-align:center; max-width:380px; margin:30px auto 20px; padding:20px;}
  .ac-empty-icon{width:56px; height:56px; margin:0 auto 20px; border-radius:50%; background:var(--stone-black-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--orange-2);}
  .ac-empty-icon svg{width:24px; height:24px;}
  .ac-empty h3{font-family:'Fraunces',serif; font-size:20px; color:var(--slab-cream);}
  .ac-empty p{margin-top:10px; font-size:14px; line-height:1.7; color:var(--slab-cream-dim);}
  .ac-empty .btn{margin-top:22px;}

  /* --- floating-label form fields (Adresgegevens) --- */
  .ac-form{display:grid; grid-template-columns:1fr 1fr; gap:22px 24px;}
  .ac-field{position:relative; grid-column:span 1;}
  .ac-field-wide{grid-column:1 / -1;}
  .ac-field input, .ac-field select{
    width:100%; background:none; border:none; border-bottom:1px solid var(--line);
    padding:22px 0 10px; font-family:'Manrope',sans-serif; font-size:15px; color:var(--slab-cream);
    transition:border-color .3s var(--ac-ease); appearance:none; -webkit-appearance:none; border-radius:0;
  }
  .ac-field select{cursor:pointer;}
  .ac-field input:focus, .ac-field select:focus{outline:none; border-color:var(--orange-2);}
  .ac-field label{
    position:absolute; left:0; top:22px; font-family:'Manrope',sans-serif; font-size:15px; color:var(--marble-muted);
    pointer-events:none; transition:top .25s var(--ac-ease), font-size .25s var(--ac-ease), color .25s var(--ac-ease);
  }
  .ac-field input:focus + label,
  .ac-field input:not(:placeholder-shown) + label,
  .ac-field select:focus + label,
  .ac-field label.is-select{ top:0; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-2); }
  .ac-field select ~ label{top:0; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-2);}
  .ac-form-actions{grid-column:1 / -1; margin-top:8px;}

  /* --- toggle switches + preferences (Voorkeuren) --- */
  .ac-pref-group{display:flex; flex-direction:column;}
  .ac-pref-row{display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 0; border-top:1px solid var(--line);}
  .ac-pref-group .ac-pref-row:first-child{border-top:none; padding-top:0;}
  .ac-pref-title{font-family:'Manrope',sans-serif; font-size:15px; font-weight:700; color:var(--slab-cream);}
  .ac-pref-desc{margin-top:4px; font-size:13px; color:var(--slab-cream-dim); max-width:420px;}
  .ac-toggle{position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0; cursor:pointer;}
  .ac-toggle input{position:absolute; opacity:0; width:0; height:0;}
  .ac-toggle-track{position:absolute; inset:0; border-radius:999px; background:rgba(245,239,228,.12); transition:background .3s var(--ac-ease);}
  .ac-toggle-thumb{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--marble-muted); transition:transform .3s var(--ac-ease), background .3s var(--ac-ease);}
  .ac-toggle input:checked ~ .ac-toggle-track{background:var(--orange);}
  .ac-toggle input:checked ~ .ac-toggle-track .ac-toggle-thumb{transform:translateX(18px); background:#fff;}
  .ac-prefs .ac-field{margin-top:28px;}

  @media (max-width:980px){
    .ac-hero{padding:56px 0 30px;}
    .ac-hero-inner{align-items:flex-start;}
    .ac-pass{width:100%; max-width:380px;}
    .ac-quotes{grid-template-columns:1fr;}
    .ac-form{grid-template-columns:1fr;}
    .ac-field{grid-column:1 / -1;}
  }
  @media (max-width:600px){
    .ac-order{flex-direction:column; gap:10px;}
    .ac-order-marker{display:none;}
    .ac-status-rail{flex-wrap:nowrap;}
    .ac-status-label{font-size:9px;}
    .ac-pass{padding:22px 20px 18px;}
    .ac-tab{padding:14px 14px; font-size:13.5px;}
  }

/* ===== PAGE: BEDANKT-OFFERTE (bd-) =====
   DNA: a single wax-stamp confirmation moment. Zero background texture —
   the only page on the site with none — so every ounce of attention sits
   on the stamp/seal/shard sequence. No custom cursor here (full-bleed
   moment, not a browsing page). Two-stage easing throughout: sharp/fast
   for impact, soft for settle — never elastic, never bouncy on entry. */

.bd-page{min-height:100dvh; display:flex; flex-direction:column;}
.bd-scene{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; min-height:calc(100dvh - 260px); padding:70px 20px 60px; text-align:center;
  background:var(--stone-black); overflow:hidden; isolation:isolate;
}

/* ---- The rig: stamp + ring + seal + shards share one coordinate space ---- */
.bd-rig{
  position:relative; width:220px; height:220px; margin-bottom:34px;
  perspective:900px; flex-shrink:0;
}

/* Pressure-ring flash on impact */
.bd-ring{
  position:absolute; inset:0; margin:auto; width:220px; height:220px; border-radius:50%;
  border:2px solid var(--orange-2); opacity:0; transform:scale(.4); pointer-events:none;
}
.bd-ring.bd-ring-fire{
  animation:bdRingFlash .55s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes bdRingFlash{
  0%{opacity:.75; transform:scale(.4);}
  100%{opacity:0; transform:scale(1.9);}
}

/* The inked seal, revealed once the stamp lifts */
.bd-seal{position:absolute; inset:0; width:220px; height:220px; opacity:0; transition:opacity .2s linear;}
.bd-seal.bd-seal-visible{opacity:1;}
.bd-seal-ring{stroke-dasharray:578; stroke-dashoffset:578; transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1);}
.bd-seal.bd-seal-visible .bd-seal-ring{stroke-dashoffset:0;}
.bd-seal-check{stroke-dasharray:130; stroke-dashoffset:130; transition:stroke-dashoffset .35s cubic-bezier(.4,0,.2,1) .38s;}
.bd-seal.bd-seal-visible .bd-seal-check{stroke-dashoffset:0;}

/* The stamp itself */
.bd-stamp{
  position:absolute; left:50%; top:50%; width:150px; height:150px; margin:-75px 0 0 -75px;
  transform-style:preserve-3d; will-change:transform, opacity;
  transform:translateY(-220px) translateZ(0) rotateX(38deg) scale(1.18); opacity:0;
}
.bd-stamp-handle{
  position:absolute; left:50%; top:-30px; width:14px; height:34px; margin-left:-7px;
  background:linear-gradient(180deg, var(--marble-muted), var(--stone-black-2)); border-radius:4px 4px 2px 2px;
}
.bd-stamp-face{
  width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--orange-2), var(--orange) 55%, var(--orange-deep) 100%);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,255,255,.25), inset 0 -10px 22px rgba(0,0,0,.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:2px solid rgba(255,255,255,.18);
}
.bd-stamp-face-top{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.16em; color:#fff;}
.bd-stamp-face-bottom{font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:.1em; color:rgba(255,255,255,.85); text-align:center; padding:0 14px;}

/* Descend (0 -> contact) */
.bd-stamp.bd-stamp-descend{
  animation:bdDescend .5s cubic-bezier(.5,0,.75,0) forwards;
}
@keyframes bdDescend{
  0%{transform:translateY(-220px) rotateX(38deg) scale(1.18); opacity:0;}
  70%{opacity:1;}
  100%{transform:translateY(0) rotateX(0deg) scale(1); opacity:1;}
}
/* Impact: sharp squash, then a soft rebound settle — the two-stage easing
   called for in the brief (mechanical snap, never elastic) */
.bd-stamp.bd-stamp-impact{
  animation:bdImpact .38s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes bdImpact{
  0%{transform:translateY(0) rotateX(0) scale(1);}
  35%{transform:translateY(4px) rotateX(0) scale(1.03,.9);}
  100%{transform:translateY(0) rotateX(0) scale(1);}
}
/* Lift away — reverse of descend, slightly faster */
.bd-stamp.bd-stamp-lift{
  animation:bdLift .38s cubic-bezier(.5,0,.75,0) forwards;
}
@keyframes bdLift{
  0%{transform:translateY(0) rotateX(0) scale(1); opacity:1;}
  100%{transform:translateY(-260px) rotateX(-34deg) scale(1.1); opacity:0;}
}

/* Marble confetti shards — base look only; position/rotation/opacity are
   driven per-frame from JS (real velocity + gravity, not a CSS guess) */
.bd-shards{position:absolute; inset:0; pointer-events:none;}
.bd-shard{
  position:absolute; left:50%; top:50%; width:16px; height:16px;
  clip-path:polygon(50% 0%, 100% 38%, 78% 100%, 22% 100%, 0% 38%);
  will-change:transform, opacity;
}
.bd-shard-base{position:absolute; inset:0; background:var(--orange-2);}
.bd-shard-veins{position:absolute; inset:0; opacity:.6; mix-blend-mode:overlay;}

/* Content — fades/rises in sequence right after the seal finishes */
.bd-content{max-width:560px; display:flex; flex-direction:column; align-items:center;}
.bd-content .eyebrow{justify-content:center;}
.bd-content h1{font-size:clamp(28px,4.4vw,44px); line-height:1.14; margin:14px 0 14px;}
.bd-content p{color:var(--marble-muted); font-size:16px; line-height:1.65; max-width:460px; margin:0 auto 26px;}
.bd-item{opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);}
.bd-item.bd-item-visible{opacity:1; transform:translateY(0);}

/* Reference code — styled like the showroom pass's barcode+code footer */
.bd-ref{
  display:inline-flex; align-items:center; gap:12px; position:relative;
  background:var(--stone-black-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 18px; margin-bottom:30px; cursor:pointer; font-family:'Space Mono',monospace;
  transition:border-color .3s var(--ease), transform .2s var(--ease);
}
.bd-ref:hover{border-color:var(--orange-2); transform:translateY(-1px);}
.bd-ref-label{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--marble-muted);}
.bd-ref-barcode{
  width:46px; height:22px;
  background:repeating-linear-gradient(90deg, var(--slab-cream) 0 2px, transparent 2px 4px, var(--slab-cream) 4px 5px, transparent 5px 9px, var(--slab-cream) 9px 12px, transparent 12px 14px);
  opacity:.8; flex-shrink:0;
}
.bd-ref-code-text{font-size:14px; letter-spacing:.06em; color:var(--slab-cream);}
.bd-ref-copied{
  position:absolute; right:-6px; top:50%; transform:translate(100%,-50%); display:inline-flex; align-items:center; gap:5px;
  font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; color:var(--orange-2);
  background:var(--stone-black); border:1px solid var(--orange-2); border-radius:20px; padding:4px 10px 4px 8px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  white-space:nowrap;
}
.bd-ref-copied svg{width:12px; height:12px;}
.bd-ref-copied.bd-ref-copied-visible{opacity:1;}

.bd-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:24px;}
.bd-meta{font-size:12.5px; color:var(--marble-muted); letter-spacing:.02em;}

@media (max-width:640px){
  .bd-rig{width:170px; height:170px; margin-bottom:24px;}
  .bd-stamp{width:118px; height:118px; margin:-59px 0 0 -59px;}
  .bd-ring, .bd-seal{width:170px; height:170px;}
  .bd-content h1{margin:10px 0 12px;}
  .bd-ref-copied{position:static; transform:none; display:none;}
  .bd-ref-copied.bd-ref-copied-visible{display:inline-flex; margin-left:4px;}
}

/* No-JS / reduced-motion fallback: jump straight to the fully-settled end
   state, matching what topsteen.js does when it detects the same query */
@media (prefers-reduced-motion: reduce){
  .bd-stamp{display:none;}
  .bd-ring{display:none;}
  .bd-seal{opacity:1;}
  .bd-seal-ring, .bd-seal-check{stroke-dashoffset:0; transition:none;}
  .bd-item{opacity:1; transform:none; transition:none;}
}

/* ======================================================================
   ============================================================
   CONTACT PAGE — EXTRAORDINARY REDESIGN — page-contact-extraordinary.php
   "ctx-" prefix (kept separate from the original "ct-" pill-switcher
   above so both versions can coexist in this file without collisions —
   assign whichever template you want live via Page Attributes).

   DNA: a physical DECK OF STONE SLABS you fan through and pull toward
   you. Four contact channels rendered as tiltable, cursor-reactive
   marble cards stacked at an angle; hovering fans/tilts them in 3D,
   clicking one "pulls" it forward into a full detail sheet with a
   kinetic type-in of the number/e-mail. Also includes: word-mask
   kinetic hero headline, cursor-follow ambient blob, reversed double
   marquee, count-up stat tiles with fill-wipe hover, and a cursor-
   spotlight glass form paired with a 3D-tilting visit/map card.
   ============================================================
   ====================================================================== */

.ctx-page{ position:relative; }

/* ---------- cursor-follow ambient blob (hero) ---------- */
.ctx-blob{
  position:fixed; top:0; left:0; width:560px; height:560px; z-index:0;
  pointer-events:none; border-radius:50%; opacity:.35;
  background:radial-gradient(circle at 30% 30%, var(--orange-2, #F0793C), transparent 65%);
  filter:blur(70px); transform:translate(-50%,-50%);
  transition:opacity .6s var(--ease, ease);
  will-change:transform;
}

/* ============================= HERO ============================= */
.ctx-hero{ position:relative; padding:150px 0 70px; overflow:clip; }
.ctx-hero-inner{ position:relative; z-index:1; }
.ctx-hero-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .85fr;
  gap:clamp(28px,5vw,64px); align-items:center;
}
.ctx-hero-copy{ min-width:0; }
.ctx-hero-h1{
  margin-top:18px; font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(38px,5.2vw,72px); line-height:1.02; letter-spacing:-0.02em;
  color:var(--slab-cream, #F5EFE4);
}
.ctx-word{ display:inline-block; overflow:hidden; vertical-align:top; margin-right:.28em; }
.ctx-word span{
  display:inline-block; transform:translateY(115%); opacity:0;
  transition:transform 1s var(--ease, cubic-bezier(.16,.84,.44,1)), opacity .8s ease;
}
.ctx-hero-h1.ctx-in .ctx-word span{ transform:translateY(0); opacity:1; }
.ctx-hero-h1.ctx-in .ctx-word:nth-child(1) span{ transition-delay:.05s; }
.ctx-hero-h1.ctx-in .ctx-word:nth-child(2) span{ transition-delay:.16s; }
.ctx-hero-h1.ctx-in .ctx-word:nth-child(3) span{ transition-delay:.27s; }
.ctx-hero-h1.ctx-in .ctx-word:nth-child(4) span{ transition-delay:.38s; }
.ctx-word-accent span{ color:var(--orange-2, #F0793C); font-style:italic; }

.ctx-hero-sub{ margin-top:26px; max-width:480px; font-size:16px; line-height:1.65; color:var(--marble-muted, #B6AA99); }
.ctx-hero-row{ display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:34px; }
.ctx-trust{ display:inline-flex; align-items:center; gap:8px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.03em; color:var(--orange-2, #F0793C); }
.ctx-trust svg{ width:15px; height:15px; }

.ctx-scroll-cue{
  display:inline-flex; align-items:center; gap:10px; background:none; border:1px solid var(--line, rgba(245,239,228,.14));
  color:var(--slab-cream, #F5EFE4); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 18px; border-radius:999px; cursor:pointer; transition:border-color .3s, transform .3s;
}
.ctx-scroll-cue svg{ width:15px; height:15px; animation:ctxBounce 1.8s ease-in-out infinite; }
.ctx-scroll-cue:hover{ border-color:var(--orange-2, #F0793C); transform:translateY(2px); }
@keyframes ctxBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }

/* ---------- hero quick-contact rail ---------- */
.ctx-hero-rail{
  display:flex; flex-direction:column; gap:12px; padding:16px;
  border:1px solid var(--line, rgba(245,239,228,.14)); border-radius:22px;
  background:linear-gradient(160deg, rgba(27,24,21,.65), rgba(20,18,16,.65));
  backdrop-filter:blur(10px);
}
.ctx-rail-item{
  position:relative; display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:14px; border:1px solid transparent; text-decoration:none;
  background:rgba(245,239,228,.03); transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.ctx-rail-item:hover, .ctx-rail-item:focus-visible{
  border-color:var(--orange-2, #F0793C); background:rgba(245,239,228,.06); transform:translateX(4px);
}
.ctx-rail-icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(245,239,228,.07); border:1px solid var(--line, rgba(245,239,228,.14)); color:var(--orange-2, #F0793C);
}
.ctx-rail-icon svg{ width:20px; height:20px; }
.ctx-rail-whatsapp .ctx-rail-icon{ background:rgba(37,211,102,.14); border-color:rgba(37,211,102,.3); color:#3ddc74; }
.ctx-rail-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ctx-rail-text strong{ font-family:'Fraunces',serif; font-weight:500; font-size:16.5px; color:var(--slab-cream, #F5EFE4); }
.ctx-rail-text small{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.02em; color:var(--marble-muted, #B6AA99); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctx-rail-arrow{
  margin-left:auto; flex:0 0 auto; width:16px; height:16px; color:var(--marble-muted, #B6AA99);
  transition:transform .3s ease, color .3s ease;
}
.ctx-rail-item:hover .ctx-rail-arrow{ transform:translate(3px,-3px); color:var(--orange-2, #F0793C); }

/* ============================= DECK ============================= */
.ctx-deck-section{ position:relative; padding:60px 0 10px; z-index:1; }
.ctx-deck-pin{ position:relative; }
.ctx-deck-progress{ display:none; }
.ctx-deck-stage{ position:relative; margin-top:60px; min-height:460px; perspective:1400px; }

.ctx-deck{
  position:relative; width:100%; max-width:920px; margin:0 auto; height:400px;
}
.ctx-card{
  position:absolute; top:0; left:50%; width:min(78vw,300px); height:380px;
  border-radius:20px; border:1px solid var(--line, rgba(245,239,228,.14));
  background:linear-gradient(160deg, var(--stone-black-2, #1B1815), var(--stone-black, #141210));
  cursor:pointer; overflow:hidden; text-align:left; padding:0; appearance:none;
  transform-style:preserve-3d; will-change:transform;
  transition:transform .7s var(--ease, cubic-bezier(.16,.84,.44,1)), box-shadow .5s ease, opacity .7s ease;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.ctx-card::before{
  /* marble vein texture layer — the SVG turbulence filter is applied ONLY
     to this decorative pseudo-element (never to .ctx-card itself), so the
     icon/label/text content on top always renders crisp and legible. */
  content:""; position:absolute; inset:0; opacity:.32; mix-blend-mode:soft-light;
  background:#fff; z-index:0;
}
.ctx-card[data-channel="whatsapp"]::before{ filter:url(#marble-1); }
.ctx-card[data-channel="bellen"]::before{ filter:url(#marble-2); }
.ctx-card[data-channel="email"]::before{ filter:url(#marble-3); }
.ctx-card[data-channel="bezoek"]::before{ filter:url(#marble-hero-top); }
.ctx-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.1) 48%, transparent 62%);
}
/* fanned resting positions — 4 cards, index 0..3 */
.ctx-card[data-index="0"]{ transform:translate(-50%,0) rotate(-9deg) translateX(-130px); z-index:4; }
.ctx-card[data-index="1"]{ transform:translate(-50%,0) rotate(-3deg) translateX(-44px); z-index:3; }
.ctx-card[data-index="2"]{ transform:translate(-50%,0) rotate(3deg) translateX(44px); z-index:2; }
.ctx-card[data-index="3"]{ transform:translate(-50%,0) rotate(9deg) translateX(130px); z-index:1; }

/* staggered "deal from the deck" entrance once the stage scrolls into view */
.ctx-deck-stage .ctx-card{ opacity:0; }
.ctx-deck-stage.is-visible .ctx-card{ opacity:1; }
.ctx-deck-stage.is-visible .ctx-card[data-index="0"]{ transition-delay:.05s; }
.ctx-deck-stage.is-visible .ctx-card[data-index="1"]{ transition-delay:.16s; }
.ctx-deck-stage.is-visible .ctx-card[data-index="2"]{ transition-delay:.27s; }
.ctx-deck-stage.is-visible .ctx-card[data-index="3"]{ transition-delay:.38s; }

.ctx-card:hover, .ctx-card.ctx-hover{
  z-index:10; /* always bring the hovered/pressed card to the very front,
                 regardless of its resting stack order, so its full
                 content is readable instead of sitting behind a neighbor */
  box-shadow:0 44px 80px -30px rgba(0,0,0,.72), 0 0 0 1px var(--orange-2, #F0793C);
}
.ctx-card:focus-visible{
  z-index:10;
  outline:none; box-shadow:0 44px 80px -30px rgba(0,0,0,.72), 0 0 0 2px var(--orange-2, #F0793C);
}
@media (hover:hover) and (pointer:fine){
  /* desktop only: pull the hovered card fully forward and level, rather
     than just outshadowing its neighbors while still sitting rotated
     and tucked partway behind them. On touch devices the mobile pinned
     deck already controls each card's transform, so this stays desktop-only. */
  .ctx-card:hover, .ctx-card.ctx-hover, .ctx-card:focus-visible{
    transform:translate(-50%,-14px) rotate(0deg) scale(1.05);
  }
}
.ctx-card[data-index="0"]:hover{ transform:translate(-50%,-18px) rotate(-9deg) translateX(-150px) scale(1.04); }
.ctx-card[data-index="1"]:hover{ transform:translate(-50%,-18px) rotate(-3deg) translateX(-56px) scale(1.04); }
.ctx-card[data-index="2"]:hover{ transform:translate(-50%,-18px) rotate(3deg) translateX(56px) scale(1.04); }
.ctx-card[data-index="3"]:hover{ transform:translate(-50%,-18px) rotate(9deg) translateX(150px) scale(1.04); }

/* ---------- large bespoke line-art illustration per channel (the "image") ---------- */
.ctx-card-visual{
  position:absolute; inset:0 0 44% 0; z-index:1; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.ctx-card-illustration{ width:66%; height:66%; overflow:visible; opacity:.22; }
.ctx-card-illustration .ci-stroke{ fill:none; stroke:var(--slab-cream, #F5EFE4); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.ctx-card-illustration .ci-accent{ fill:var(--orange-2, #F0793C); }
.ctx-card-illustration .ci-fill{ fill:rgba(245,239,228,.1); stroke:var(--slab-cream, #F5EFE4); stroke-width:1.8; }
.ctx-card-illustration .ci-ring{ fill:none; stroke:var(--orange-2, #F0793C); stroke-width:1.8; opacity:0; transform-box:fill-box; transform-origin:center; }
.ctx-card:hover .ctx-card-illustration, .ctx-card.ctx-hover .ctx-card-illustration{ opacity:.34; }
.ctx-card:hover .ctx-card-illustration .ci-ring,
.ctx-card.ctx-hover .ctx-card-illustration .ci-ring{ animation:ciPulseRing 1.7s ease-out infinite; }
@keyframes ciPulseRing{
  0%{ opacity:.65; transform:scale(.7); }
  80%{ opacity:0; transform:scale(1.4); }
  100%{ opacity:0; transform:scale(1.4); }
}

/* ---------- quick-launch badge — the direct, one-tap action ---------- */
.ctx-card-badge{
  position:absolute; top:16px; right:16px; z-index:3; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,18,16,.55); border:1px solid var(--line, rgba(245,239,228,.18));
  backdrop-filter:blur(6px); color:var(--slab-cream, #F5EFE4); text-decoration:none;
  transition:transform .35s var(--ease, ease), background .35s ease, color .35s ease, box-shadow .35s ease;
}
.ctx-card-badge svg{ width:15px; height:15px; transition:transform .35s var(--ease, ease); }
.ctx-card-badge:hover, .ctx-card-badge:focus-visible{
  background:var(--orange-2, #F0793C); color:#141210; transform:scale(1.1);
}
.ctx-card-badge:hover svg, .ctx-card-badge:focus-visible svg{ transform:translate(2px,-2px); }
.ctx-card-badge-live{ animation:ciBadgeBreathe 2.6s ease-in-out infinite; }
@keyframes ciBadgeBreathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(240,121,60,.45); }
  50%{ box-shadow:0 0 0 9px rgba(240,121,60,0); }
}
@media (prefers-reduced-motion: reduce){ .ctx-card-badge-live{ animation:none; } }

.ctx-card-face{
  position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; z-index:2; transform-style:preserve-3d; will-change:transform;
  transition:transform .35s var(--ease, ease);
}
.ctx-card-icon{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(245,239,228,.08); border:1px solid var(--line, rgba(245,239,228,.14));
  color:var(--orange-2, #F0793C); margin-bottom:auto;
}
.ctx-card-icon svg{ width:24px; height:24px; }
.ctx-card-label{ font-family:'Fraunces',serif; font-weight:500; font-size:26px; color:var(--slab-cream, #F5EFE4); margin-top:18px; }
.ctx-card-tag{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--marble-muted, #B6AA99); margin-top:8px; }

/* ---------- explicit "what happens if I tap this" guidance line ---------- */
.ctx-card-hint{
  display:flex; align-items:center; gap:6px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line, rgba(245,239,228,.12));
  font-family:'Space Mono',monospace; font-size:10.5px; line-height:1.4; letter-spacing:.01em;
  color:var(--marble-muted, #B6AA99); opacity:.8; transition:opacity .3s ease, color .3s ease;
}
.ctx-card-hint svg{ width:12px; height:12px; flex:0 0 auto; transition:transform .3s var(--ease, ease); }
.ctx-card:hover .ctx-card-hint, .ctx-card.ctx-hover .ctx-card-hint{ opacity:1; color:var(--orange-2, #F0793C); }
.ctx-card:hover .ctx-card-hint svg, .ctx-card.ctx-hover .ctx-card-hint svg{ transform:translate(2px,-2px); }

.ctx-deck-hint{
  text-align:center; margin-top:26px; font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--marble-muted, #B6AA99); opacity:.7;
}
.ctx-hint-mobile{ display:none; }

/* ---------- expanded panel overlay (pulled forward from deck) ---------- */
.ctx-panel-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(10,9,8,.72); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.ctx-panel-overlay.is-open{ opacity:1; pointer-events:auto; }
.ctx-panel-sheet{
  position:relative; width:min(920px,94vw); max-height:88vh; overflow-y:auto;
  background:linear-gradient(180deg, var(--stone-black-2, #1B1815), var(--stone-black, #141210));
  border:1px solid var(--line, rgba(245,239,228,.14)); border-bottom:none;
  border-radius:28px 28px 0 0; padding:56px clamp(24px,5vw,64px) 48px;
  transform:translateY(100%); transition:transform .55s var(--ease, cubic-bezier(.16,.84,.44,1));
}
.ctx-panel-overlay.is-open .ctx-panel-sheet{ transform:translateY(0); }
.ctx-panel-close{
  position:absolute; top:18px; right:18px; z-index:5; width:44px; height:44px; border-radius:50%;
  background:var(--stone-black-2, #1B1815); border:1px solid var(--line, rgba(245,239,228,.2));
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5);
  color:var(--slab-cream, #F5EFE4); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .3s, transform .3s;
}
.ctx-panel-close:hover, .ctx-panel-close:focus-visible{ background:var(--orange-2, #F0793C); color:#141210; transform:rotate(90deg); }
.ctx-panel-close svg{ width:18px; height:18px; }

.ctx-panel{ display:none; }
.ctx-panel.is-active{ display:block; animation:ctxPanelFade .5s ease; }
@keyframes ctxPanelFade{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
.ctx-panel-grid{ max-width:640px; margin:0 auto; text-align:center; }
.ctx-panel-grid-bezoek{ max-width:1040px; display:grid; grid-template-columns:1fr 1fr; gap:48px; text-align:left; align-items:start; }
.ctx-panel-eyebrow{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-2, #F0793C); margin-bottom:14px; }
.ctx-panel-copy h2{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(24px,3vw,34px); color:var(--slab-cream, #F5EFE4); line-height:1.25; }
.ctx-kinetic-number{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; letter-spacing:-.01em; word-break:break-word; }
.ctx-panel-copy p{ margin-top:16px; font-size:15px; line-height:1.7; color:var(--marble-muted, #B6AA99); max-width:460px; }
.ctx-panel-grid:not(.ctx-panel-grid-bezoek) .ctx-panel-copy p{ margin-left:auto; margin-right:auto; }
.ctx-panel-copy .btn{ margin-top:26px; }
.ctx-email-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }
.ctx-panel-grid:not(.ctx-panel-grid-bezoek) .ctx-email-actions{ margin-top:26px; }
.ctx-response-note{ margin-top:20px; font-size:12.5px; color:var(--marble-muted, #B6AA99); opacity:.85; }
.ctx-response-note strong{ color:var(--orange-2, #F0793C); font-weight:700; }
.ctx-tw-char{ opacity:0; display:inline-block; }
.ctx-tw-char.ctx-tw-visible{ opacity:1; }
.ctx-copy-btn svg{ width:16px; height:16px; }
.ctx-copy-btn.is-copied{ border-color:var(--orange-2, #F0793C) !important; color:var(--orange-2, #F0793C) !important; }
.ctx-panel-grid-bezoek .hours-list{ margin-top:22px; max-width:340px; }

/* ---------- generic tiltable card (map / visit card) ---------- */
.ctx-tilt-card{
  position:relative; transform-style:preserve-3d; will-change:transform;
  transition:transform .4s var(--ease, ease), box-shadow .4s ease;
}
.ctx-map-card{ border-radius:16px; overflow:hidden; border:1px solid var(--line, rgba(245,239,228,.14)); background:var(--stone-black-2, #1B1815); box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
.ctx-map-card:hover{ box-shadow:0 44px 80px -30px rgba(0,0,0,.7); }
.ctx-map-frame{ width:100%; height:320px; border:0; display:block; filter:grayscale(.35) sepia(.15) hue-rotate(-6deg) saturate(1.05) contrast(1.05) brightness(.92); }
.ctx-map-footer{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-top:1px solid var(--line, rgba(245,239,228,.14)); font-family:'Space Mono',monospace; font-size:11.5px; color:var(--marble-muted, #B6AA99); }
.ctx-map-footer span{ display:flex; align-items:center; gap:7px; }
.ctx-map-footer span svg{ width:13px; height:13px; flex:0 0 auto; color:var(--orange-2, #F0793C); }
.ctx-map-footer a{ display:inline-flex; align-items:center; gap:6px; color:var(--orange-2, #F0793C); font-weight:700; white-space:nowrap; }
.ctx-map-footer a svg{ width:13px; height:13px; }

/* ============================= MARQUEE ============================= */
.ctx-marquee-section{ position:relative; padding:56px 0; border-top:1px solid var(--line, rgba(245,239,228,.14)); border-bottom:1px solid var(--line, rgba(245,239,228,.14)); overflow:hidden; z-index:1; }
.ctx-marquee{ overflow:hidden; white-space:nowrap; }
.ctx-marquee-track{
  display:inline-flex; gap:22px; font-family:'Fraunces',serif; font-weight:500; font-style:italic;
  font-size:clamp(22px,3.6vw,42px); color:var(--slab-cream, #F5EFE4); opacity:.85;
  animation:ctxMarqueeLeft 34s linear infinite;
}
.ctx-marquee-track span{ flex:0 0 auto; }
.ctx-marquee-track span:nth-child(odd){ color:var(--orange-2, #F0793C); font-style:normal; font-family:'Space Mono',monospace; font-size:.4em; letter-spacing:.1em; align-self:center; }
.ctx-marquee-2{ margin-top:14px; }
.ctx-marquee-2 .ctx-marquee-track{ animation:ctxMarqueeRight 40s linear infinite; opacity:.55; }
@keyframes ctxMarqueeLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes ctxMarqueeRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* ============================= STAT TILES ============================= */
.ctx-stats-section{ position:relative; z-index:1; }
.ctx-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ctx-stat-tile{
  position:relative; padding:44px 30px; border-radius:20px; overflow:hidden;
  border:1px solid var(--line, rgba(245,239,228,.14)); background:var(--stone-black-2, #1B1815);
  transition:transform .4s var(--ease, ease), border-color .4s ease;
}
.ctx-stat-tile::before{
  content:""; position:absolute; inset:0; background:linear-gradient(135deg, var(--orange, #E2622A), var(--orange-deep, #B84A1E));
  transform:translateY(101%); transition:transform .5s var(--ease, cubic-bezier(.16,.84,.44,1)); z-index:0;
}
.ctx-stat-tile:hover{ transform:translateY(-6px); border-color:transparent; }
.ctx-stat-tile:hover::before{ transform:translateY(0); }
.ctx-stat-num{
  position:relative; z-index:1; display:block; font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(40px,5vw,64px); color:var(--slab-cream, #F5EFE4); line-height:1;
  /* Fraunces' default oldstyle digits make a lone "1" read as a lowercase "l"
     next to a suffix like "u" (e.g. "< 1u" misreading as "< lu"). Force
     lining, tabular, non-oldstyle numerals so every digit is unambiguous. */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1, "onum" 0;
}
.ctx-stat-label{ position:relative; z-index:1; display:block; margin-top:14px; font-size:13.5px; line-height:1.5; color:var(--marble-muted, #B6AA99); transition:color .4s ease; }
.ctx-stat-tile:hover .ctx-stat-label{ color:rgba(255,255,255,.92); }
.ctx-stat-tile:hover .ctx-stat-num{ color:#fff; }
.ctx-stat-label sup{ font-size:9px; opacity:.6; }

/* ============================= FORM + VISIT CARD ============================= */
.ctx-form-section{ border-top:1px solid var(--line, rgba(245,239,228,.14)); position:relative; z-index:1; }
.ctx-form-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:stretch; }

.ctx-spotlight{ position:relative; overflow:hidden; }
.ctx-spot{
  position:absolute; width:340px; height:340px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(226,98,42,.16), transparent 70%);
  transform:translate(-50%,-50%); opacity:0; transition:opacity .4s ease;
}
.ctx-form.ctx-spotlight:hover .ctx-spot{ opacity:1; }

.ctx-form{
  position:relative; z-index:1; padding:36px; border-radius:20px;
  border:1px solid var(--line, rgba(245,239,228,.14));
  background:linear-gradient(160deg, rgba(27,24,21,.6), rgba(20,18,16,.6));
  backdrop-filter:blur(10px);
  display:grid; grid-template-columns:1fr 1fr; gap:20px; align-content:start;
}
/* ---------- modern stacked fields: label ALWAYS sits above the box,
   never overlapping the placeholder text inside it ---------- */
.ctx-field-float{
  position:relative; grid-column:span 1; display:flex; flex-direction:column; gap:9px;
}
.ctx-field-full{ grid-column:1 / -1; }
.ctx-field-float label{
  order:-1; display:flex; align-items:center; gap:7px;
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--marble-muted, #B6AA99); transition:color .25s ease;
}
.ctx-field-float label svg{ width:13px; height:13px; flex:0 0 auto; opacity:.8; }
.ctx-field-float input,
.ctx-field-float select,
.ctx-field-float textarea{
  width:100%; background:rgba(245,239,228,.04); border:1px solid var(--line, rgba(245,239,228,.14));
  border-radius:10px; padding:15px 14px; color:var(--slab-cream, #F5EFE4); font-size:14.5px;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.ctx-field-float textarea{ resize:vertical; min-height:96px; }
.ctx-field-float input::placeholder,
.ctx-field-float textarea::placeholder{ color:var(--marble-muted, #B6AA99); opacity:.45; font-style:italic; }
.ctx-field-float input:focus,
.ctx-field-float select:focus,
.ctx-field-float textarea:focus{
  border-color:var(--orange-2, #F0793C); outline:none; background:rgba(245,239,228,.07);
  box-shadow:0 0 0 4px rgba(240,121,60,.14);
}
.ctx-field-float:focus-within label{ color:var(--orange-2, #F0793C); }
.ctx-field-float select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6AA99' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px; padding-right:36px;
}
.ctx-form-footer{ grid-column:1 / -1; display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:4px; }
.ctx-form-note{ font-size:12.5px; color:var(--marble-muted, #B6AA99); }
.ctx-form-note strong{ color:var(--orange-2, #F0793C); }

.ctx-visit-card{
  position:relative; border-radius:20px; overflow:hidden; padding:36px;
  border:1px solid var(--line, rgba(245,239,228,.14));
  background:linear-gradient(160deg, var(--stone-black-2, #1B1815), var(--stone-black, #141210));
  display:flex; align-items:flex-end;
}
.ctx-visit-veins{ position:absolute; inset:0; opacity:.4; mix-blend-mode:soft-light; background:#fff; }
.ctx-visit-body{ position:relative; z-index:1; }
.ctx-visit-body h3{ font-family:'Fraunces',serif; font-weight:500; font-size:24px; color:var(--slab-cream, #F5EFE4); margin-top:10px; line-height:1.3; }
.ctx-visit-hours{ margin-top:10px; margin-bottom:26px; }
.ctx-icon-eyebrow{ display:flex; align-items:center; gap:8px; }
.ctx-icon-eyebrow svg{ width:14px; height:14px; }
.ctx-hours-heading{
  display:flex; align-items:center; gap:8px; margin-top:22px; font-family:'Space Mono',monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--marble-muted, #B6AA99);
}
.ctx-hours-heading svg{ width:14px; height:14px; color:var(--orange-2, #F0793C); }

/* ---------- magnetic buttons ---------- */
.ctx-magnetic{ display:inline-flex; will-change:transform; transition:transform .25s var(--ease, ease); }

/* shared reveal hookups (mirrors topsteen.css .reveal/.reveal-zoom pattern) */
.ctx-page .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease, ease), transform .8s var(--ease, ease); }
.ctx-page .reveal.is-visible{ opacity:1; transform:translateY(0); }
.ctx-page .reveal-zoom{ opacity:0; transform:scale(.96); transition:opacity .9s var(--ease, ease), transform .9s var(--ease, ease); }
.ctx-page .reveal-zoom.is-visible{ opacity:1; transform:scale(1); }

/* ============================= RESPONSIVE ============================= */
@media (max-width:1000px){
  .ctx-form-layout{ grid-template-columns:1fr; }
  .ctx-stats-grid{ grid-template-columns:1fr; }
  .ctx-blob{ display:none; }
}

/* ---- 640px and below: the fanned "deal from the deck" interaction
       becomes a pinned scroll-locked sequence. The stage sticks to the
       viewport for a tall spacer while the 4 cards are revealed one at
       a time as the page scrolls — the next card only slides in once
       the current one has held its full turn, and the next section
       below only arrives once all 4 cards have been shown. Tilt/fan/3D
       hover transforms only ever made sense with a mouse, so cards sit
       flat and centered here instead. ---- */
@media (max-width:640px){
  .ctx-hint-desktop{ display:none; }
  .ctx-hint-mobile{ display:inline; }

  .ctx-hero{ padding:112px 0 36px; }
  .ctx-hero-grid{ grid-template-columns:1fr; gap:32px; }
  .ctx-hero-sub{ font-size:15px; }
  .ctx-hero-row{ gap:16px; }
  .ctx-scroll-cue{ padding:11px 16px; }
  .ctx-hero-rail{ padding:12px; gap:10px; }
  .ctx-rail-item{ padding:12px 14px; }
  .ctx-rail-icon{ width:40px; height:40px; }

  .ctx-deck-section{ padding:44px 0 6px; }
  .ctx-deck-pin{ position:relative; }
  .ctx-deck-pin.is-pinned .ctx-deck-stage{
    position:sticky; top:0; height:100svh; margin-top:0; perspective:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;
  }
  .ctx-deck-stage{ min-height:auto; }
  .ctx-deck{
    position:relative; height:400px; width:100%; max-width:340px; margin:0 auto; flex:0 0 auto;
  }
  .ctx-deck-stage.is-visible .ctx-card{ transition-delay:0s !important; }
  .ctx-card{
    position:absolute; top:50%; left:50%; width:min(82vw,320px); height:400px;
    transform:translate(-50%,-50%) translateX(var(--cx,0)) !important;
    opacity:var(--co,1) !important;
    transition:transform .55s var(--ease, cubic-bezier(.16,.84,.44,1)), opacity .5s ease, box-shadow .3s ease;
  }
  .ctx-card:active, .ctx-card.ctx-hover{
    box-shadow:0 34px 64px -28px rgba(0,0,0,.7), 0 0 0 1px var(--orange-2, #F0793C);
  }
  .ctx-card-face{ padding:22px; }
  .ctx-card-label{ font-size:23px; }
  .ctx-card-badge{ width:40px; height:40px; } /* comfortable 44px+ tap target incl. padding */

  /* the free-floating hint paragraph would sit centered in the same
     sticky viewport as the card (since .ctx-deck collapses to 0 height
     with only absolutely-positioned children) — hidden here in favour
     of the progress dots below, which show the same "swipe on" cue
     without ever overlapping the card content. */
  .ctx-deck-pin.is-pinned .ctx-deck-hint{ display:none; }

  .ctx-deck-progress{
    display:flex; align-items:center; justify-content:center; gap:9px; margin-top:18px; flex:0 0 auto;
  }
  .ctx-deck-pin.is-pinned .ctx-deck-progress{
    position:relative; z-index:5; margin-top:28px;
  }
  .ctx-deck-dot{
    width:7px; height:7px; border-radius:50%; background:var(--line, rgba(245,239,228,.22));
    transition:background .3s ease, transform .3s ease, width .3s ease;
  }
  .ctx-deck-dot.is-active{ background:var(--orange-2, #F0793C); width:22px; border-radius:4px; }

  .ctx-panel-sheet{ padding:70px 18px 32px; max-height:92vh; }
  .ctx-panel-close{ top:14px; right:14px; }
  .ctx-panel-grid-bezoek{ grid-template-columns:1fr; gap:28px; }
  .ctx-panel-copy h2{ font-size:clamp(22px,6vw,30px); }
  .ctx-map-frame{ height:220px; }
  .ctx-email-actions{ flex-direction:column; align-items:stretch; }
  .ctx-email-actions .btn{ justify-content:center; width:100%; }

  .ctx-marquee-track{ font-size:clamp(18px,5.4vw,28px); gap:16px; }

  .ctx-stat-tile{ padding:34px 22px; }
  .ctx-stat-num{ font-size:clamp(34px,10vw,48px); }

  .ctx-form{ grid-template-columns:1fr; padding:24px; gap:16px; }
  .ctx-form-footer{ flex-direction:column; align-items:stretch; gap:14px; }
  .ctx-form-footer .btn{ width:100%; justify-content:center; }
  .ctx-visit-card{ padding:28px; }
}

/* ---- legacy breakpoint kept for tablet-ish widths between 640–720 that
       still benefit from a slightly smaller (but still fanned) deck ---- */
@media (max-width:720px) and (min-width:641px){
  .ctx-deck{ height:440px; }
  .ctx-card{ width:min(64vw,240px); height:320px; }
  .ctx-card[data-index="0"]{ transform:translate(-50%,-60px) rotate(-8deg) translateX(-56px); }
  .ctx-card[data-index="1"]{ transform:translate(-50%,-20px) rotate(-3deg) translateX(-20px); }
  .ctx-card[data-index="2"]{ transform:translate(-50%,20px) rotate(3deg) translateX(20px); }
  .ctx-card[data-index="3"]{ transform:translate(-50%,60px) rotate(8deg) translateX(56px); }
  .ctx-panel-grid-bezoek{ grid-template-columns:1fr; gap:32px; }
  .ctx-form{ grid-template-columns:1fr; padding:26px; }
  .ctx-panel-sheet{ padding:44px 20px 36px; }
}

@media (max-width:400px){
  .ctx-hero-h1{ font-size:clamp(32px,10vw,44px); }
  .ctx-card{ flex-basis:84vw; height:310px; }
  .ctx-stats-grid{ gap:14px; }
}

@media (prefers-reduced-motion: reduce){
  .ctx-word span, .ctx-card, .ctx-stat-tile, .ctx-tilt-card, .ctx-magnetic, .ctx-marquee-track,
  .ctx-card-illustration, .ctx-card-badge{ transition:none !important; animation:none !important; }
}
@media (hover:none){
  /* devices with no real hover (touch) — never leave a :hover state visually
     "stuck", and don't rely on hover to reveal the guidance line */
  .ctx-card-hint{ opacity:1; }
}


/* ================================================================
   PARTNERS — REVISION STAMP POSITION FIX
   Keep REV. A / B / C completely clear of the title.
   The stamp sits in the true upper-left corner of each card,
   while the card heading gets dedicated top space.
   ================================================================ */

.pt-tiers .pt-tier-card{
  padding:80px 28px 34px;
}

.pt-tiers .pt-tier-card .pt-stamp{
  position:absolute !important; /* the broader ".pt-tier-card > *" rule below
    forces position:relative on every direct child (to layer content above the
    decorative scan/ambient effects); without this !important that rule wins
    and silently turns the stamp back into an in-flow element sitting right
    above the heading, which is what was causing the overlap. */
  top:20px !important;
  left:20px !important;
  right:auto !important;

  z-index:12 !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:24px;
  margin:0;

  transform:rotate(-3deg);
  transform-origin:left center;

  font-family:'Space Mono',monospace;
  font-size:10px;
  line-height:1;
  letter-spacing:.05em;
}

.pt-tiers .pt-tier-card:hover .pt-stamp{
  transform:
    rotate(-3deg)
    translate3d(0,-2px,0);
}

/* Keep the number + heading in a clean, separate row, with a visible
   gap below the stamp — not just numeric non-overlap. */
.pt-tiers .pt-tier-head{
  position:relative;
  z-index:6;
  margin-top:6px;
  padding-top:0;
  align-items:baseline;
}

.pt-tiers .pt-tier-head h3{
  position:relative;
  z-index:7;
  margin:0;
}

@media (max-width:600px){
  .pt-tiers .pt-tier-card{
    padding:74px 22px 30px;
  }

  .pt-tiers .pt-tier-card .pt-stamp{
    top:16px !important;
    left:16px !important;
  }
}

/* ======================================================================
   ============================================================
   OFFERTE AANVRAGEN — page-offerte-aanvragen.php
   Award-tier configurator wizard. Everything here is scoped under
   .of-page so it can never leak onto other templates. Motion language:
   stone-slab weight + marble-turbulence fills (reusing the shared
   #marble-* SVG filters) + a spring/elastic easing curve reserved for
   this page only, so every step change feels like a physical object
   settling rather than a generic fade.
   ============================================================
   ====================================================================== */
.of-page{ --of-ease-spring:cubic-bezier(.34,1.56,.64,1); --of-ease-settle:cubic-bezier(.16,.84,.44,1); position:relative; }

/* ---------- Intro ---------- */
.of-intro{padding:180px 0 64px;}
.of-intro-title{font-size:clamp(34px,5vw,58px); line-height:1.05; margin:18px 0 14px; max-width:16ch;}
.of-intro-sub{font-size:16.5px; line-height:1.6; color:var(--marble-muted); max-width:52ch;}

/* ---------- Wizard shell ---------- */
.of-wizard-section{padding:0 0 140px;}
.of-wizard{position:relative;}

/* ---------- Progress rail ---------- */
.of-rail-wrap{position:sticky; top:0; z-index:20; padding:22px 0 34px; background:linear-gradient(var(--stone-black) 72%, transparent); backdrop-filter:blur(6px);}
.of-rail{list-style:none; margin:0 0 14px; padding:0; display:flex; justify-content:space-between; gap:6px;}
.of-node{display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; flex:1; outline:none;}
.of-node-slab{
  width:44px; height:44px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:13px; color:var(--marble-muted);
  background:var(--stone-black-2); border:1px solid var(--line);
  transition:transform .5s var(--of-ease-spring), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.of-node-label{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--marble-muted); transition:color .35s var(--ease); text-align:center;}
.of-node.is-done .of-node-slab{background:var(--orange-deep); border-color:var(--orange-deep); color:#fff;}
.of-node.is-active .of-node-slab{background:var(--orange); border-color:var(--orange); color:#fff; transform:scale(1.12); box-shadow:0 10px 26px -8px rgba(226,98,42,.6);}
.of-node.is-active .of-node-label, .of-node.is-done .of-node-label{color:var(--slab-cream);}
.of-node:focus-visible .of-node-slab{outline:2px solid var(--orange-2); outline-offset:2px;}
.of-rail-track{position:relative; height:2px; background:var(--line); border-radius:2px; margin:0 22px;}
.of-rail-fill{
  position:absolute; inset:0 auto 0 0; width:0%; border-radius:2px;
  background:linear-gradient(90deg, var(--orange-deep), var(--orange-2));
  filter:url(#of-fill-marble);
  transition:width .7s var(--of-ease-settle);
}

/* ---------- Growing receipt strip ---------- */
.of-receipt{display:flex; flex-direction:column; gap:0; margin:0 0 28px; max-width:640px;}
.of-receipt:empty{margin:0;}
.of-receipt-row{
  display:flex; justify-content:space-between; gap:16px; padding:11px 4px;
  border-bottom:1px dashed var(--line); font-family:'Space Mono',monospace; font-size:12.5px;
  color:var(--marble-muted); cursor:pointer; opacity:0; transform:translateY(-8px);
  animation:ofReceiptIn .5s var(--of-ease-settle) forwards;
}
.of-receipt-row:hover{color:var(--orange-2);}
.of-receipt-row span:first-child{color:var(--slab-cream);}
@keyframes ofReceiptIn{to{opacity:1; transform:translateY(0);}}

/* ---------- Steps ---------- */
.of-steps{position:relative;}
.of-step{border:none; margin:0; padding:0; display:none;}
.of-step.is-active{display:block; animation:ofStepIn .6s var(--of-ease-settle) both;}
@keyframes ofStepIn{ from{opacity:0; transform:translateY(22px) scale(.985);} to{opacity:1; transform:translateY(0) scale(1);} }
.of-step.is-leaving{animation:ofStepOut .35s var(--ease) both;}
@keyframes ofStepOut{ to{opacity:0; transform:translateY(-14px) scale(.98);} }
.of-step-eyebrow{display:block; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-2); margin-bottom:10px;}
.of-step-legend{font-family:'Fraunces',serif; font-size:clamp(24px,3vw,34px); font-weight:500; margin:0 0 32px; padding:0; max-width:24ch;}
.of-step-hint{color:var(--marble-muted); font-size:14px; margin:-18px 0 26px; max-width:56ch;}

/* Step actions */
.of-step-actions{display:flex; justify-content:space-between; align-items:center; margin-top:40px; gap:14px;}

/* ---------- Step 1: type cards ---------- */
.of-type-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.of-type-card{
  position:relative; border:1px solid var(--line); border-radius:6px; padding:22px 16px 20px; cursor:pointer;
  display:flex; flex-direction:column; gap:14px; overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--of-ease-spring), background .4s var(--ease);
}
.of-type-card input{position:absolute; opacity:0; width:0; height:0;}
.of-type-card:hover{transform:translateY(-4px); border-color:rgba(226,98,42,.4);}
.of-type-card:has(input:checked){border-color:var(--orange); background:rgba(226,98,42,.07); box-shadow:0 16px 34px -14px rgba(226,98,42,.5);}
.of-type-shape{display:block; width:100%; height:64px; border-radius:3px; background:linear-gradient(135deg,#3a352c,#1f1c17); position:relative;}
.of-type-shape::after{content:""; position:absolute; inset:0; filter:url(#marble-2); opacity:.5;}
.of-type-eettafel{clip-path:polygon(6% 30%,94% 30%,94% 70%,6% 70%);}
.of-type-salontafel{border-radius:50%;}
.of-type-bloktafel{clip-path:polygon(15% 10%,85% 10%,100% 90%,0% 90%);}
.of-type-tuinset{clip-path:polygon(0 20%,60% 20%,100% 60%,40% 60%);}
.of-type-name{font-family:'Fraunces',serif; font-size:18px;}
.of-type-desc{font-size:12.5px; line-height:1.5; color:var(--marble-muted);}
.of-type-card:has(input:checked)::before{
  content:""; position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 0 4px rgba(226,98,42,.18);
}

/* ---------- Step 2: stone swatches + museum tooltip ---------- */
.of-stone-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.of-stone{
  position:relative; aspect-ratio:1; border-radius:5px; cursor:pointer; overflow:hidden;
  border:2px solid transparent; transition:transform .35s var(--of-ease-spring), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.of-stone input{position:absolute; opacity:0; width:0; height:0;}
.of-stone-veins{position:absolute; inset:0; opacity:.65; mix-blend-mode:overlay;}
.of-stone:hover{transform:translateY(-5px) scale(1.03); box-shadow:0 16px 30px -12px rgba(0,0,0,.55);}
.of-stone:has(input:checked){border-color:var(--orange-2); box-shadow:0 0 0 3px rgba(226,98,42,.22), 0 16px 30px -12px rgba(0,0,0,.55);}
.of-stone-check{
  position:absolute; bottom:8px; right:8px; width:22px; height:22px; border-radius:50%;
  background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.4) rotate(-30deg); transition:opacity .3s var(--ease), transform .4s var(--of-ease-spring);
}
.of-stone-check svg{width:12px; height:12px;}
.of-stone:has(input:checked) .of-stone-check{opacity:1; transform:scale(1) rotate(0);}
.of-stone-tooltip{
  position:fixed; z-index:60; pointer-events:none; padding:8px 13px; background:var(--slab-cream); color:var(--stone-black);
  font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.03em; border-radius:3px;
  opacity:0; transform:translate(-50%,10px); transition:opacity .25s var(--ease), transform .25s var(--of-ease-settle);
  box-shadow:0 12px 26px -8px rgba(0,0,0,.5);
}
.of-stone-tooltip.is-visible{opacity:1; transform:translate(-50%,0);}

/* ---------- Step 3: live sizer diagram ---------- */
.of-sizer{display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center;}
.of-sizer-viz{
  border:1px solid var(--line); border-radius:8px; padding:24px; background:var(--stone-black-2);
  position:relative;
}
.of-sizer-svg{width:100%; height:auto; overflow:visible;}
.of-sizer-rect{transition:x .45s var(--of-ease-spring), y .45s var(--of-ease-spring), width .45s var(--of-ease-spring), height .45s var(--of-ease-spring);}
.of-sizer-rect-outline{fill:none; stroke:var(--orange-2); stroke-width:1.5; transition:x .45s var(--of-ease-spring), y .45s var(--of-ease-spring), width .45s var(--of-ease-spring), height .45s var(--of-ease-spring);}
.of-dim line{stroke:var(--marble-muted); stroke-width:1;}
.of-dim text{font-family:'Space Mono',monospace; font-size:11px; fill:var(--slab-cream); transition:transform .1s linear;}
.of-range-group{margin-bottom:26px;}
.of-range-label{display:flex; justify-content:space-between; font-family:'Space Mono',monospace; font-size:12px; margin-bottom:10px; color:var(--marble-muted);}
.of-range-label strong{color:var(--orange-2); font-size:14px;}
.of-range{
  -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--line); border-radius:2px; outline:none;
}
.of-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--orange);
  border:3px solid var(--slab-cream); cursor:pointer; transition:transform .25s var(--of-ease-spring), box-shadow .25s var(--ease);
  box-shadow:0 4px 12px -3px rgba(226,98,42,.6);
}
.of-range::-webkit-slider-thumb:hover, .of-range:active::-webkit-slider-thumb{transform:scale(1.25);}
.of-range::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--orange); border:3px solid var(--slab-cream); cursor:pointer;}
.of-sizer-note{font-size:12.5px; color:var(--marble-muted); line-height:1.6; margin-top:6px;}

/* ---------- Step 4: chips ---------- */
.of-chip-group{margin-bottom:30px;}
.of-chip-label{font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--marble-muted); margin-bottom:14px;}
.of-chip-row{display:flex; flex-wrap:wrap; gap:10px;}
.of-chip{position:relative; cursor:pointer;}
.of-chip input{position:absolute; opacity:0; width:0; height:0;}
.of-chip span{
  display:inline-block; padding:11px 18px; border:1px solid var(--line); border-radius:30px; font-size:13.5px;
  transition:all .3s var(--of-ease-spring);
}
.of-chip:hover span{border-color:rgba(226,98,42,.5); transform:translateY(-2px);}
.of-chip input:checked + span{background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:0 8px 20px -8px rgba(226,98,42,.6);}

/* ---------- Step 5: contact fields ---------- */
.of-field-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;}
.of-field{display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--marble-muted);}
.of-field-full{grid-column:1/-1;}
.of-field input, .of-field textarea{
  background:var(--stone-black-2); border:1px solid var(--line); border-radius:4px; padding:13px 14px;
  color:var(--slab-cream); font-size:14.5px; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.of-field input:focus, .of-field textarea:focus{outline:none; border-color:var(--orange-2); box-shadow:0 0 0 3px rgba(226,98,42,.15);}
.of-consent{display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--marble-muted); margin-top:24px; cursor:pointer;}
.of-consent input{margin-top:3px;}
.of-consent a{color:var(--orange-2); text-decoration:underline;}

/* ---------- Fold-to-ticket ---------- */
.of-ticket-stage{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(10,9,8,0); pointer-events:none; opacity:0; transition:background .5s var(--ease), opacity .5s var(--ease);
  perspective:1400px;
}
.of-ticket-stage.is-active{opacity:1; pointer-events:auto; background:rgba(10,9,8,.86); backdrop-filter:blur(4px);}
.of-ticket{
  position:relative; width:min(360px,80vw); height:200px; transform-style:preserve-3d;
}
.of-ticket-half{
  position:absolute; left:0; right:0; height:50%; background:var(--slab-cream); border-radius:6px;
  transform-origin:center; box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.of-ticket-top{top:0; border-radius:6px 6px 0 0;}
.of-ticket-bottom{bottom:0; border-radius:0 0 6px 6px;}
.of-ticket-stage.is-folding .of-ticket-top{animation:ofFoldTop .9s var(--of-ease-spring) forwards;}
.of-ticket-stage.is-folding .of-ticket-bottom{animation:ofFoldBottom .9s var(--of-ease-spring) forwards;}
@keyframes ofFoldTop{ 0%{transform:rotateX(0);} 100%{transform:rotateX(-180deg);} }
@keyframes ofFoldBottom{ 0%{transform:rotateX(0);} 100%{transform:rotateX(180deg);} }
.of-ticket-face{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; opacity:0; transition:opacity .4s var(--ease) .5s;
}
.of-ticket-stage.is-folding .of-ticket-face{opacity:1;}
.of-ticket-brand{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--stone-black);}
.of-ticket-brand span{display:block; font-size:9px; letter-spacing:.14em; color:var(--orange-deep); margin-top:2px;}
.of-ticket-check{
  width:44px; height:44px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center;
  transform:scale(0); transition:transform .5s var(--of-ease-spring) .7s;
}
.of-ticket-stage.is-folding .of-ticket-check{transform:scale(1);}
.of-ticket-check svg{width:22px; height:22px;}
.of-ticket-face p{font-size:12px; color:var(--marble-muted); margin:0;}

/* confetti particles spawned on submit */
.of-confetti{position:fixed; z-index:210; top:0; left:0; width:6px; height:10px; pointer-events:none; border-radius:1px;}

/* ---------- Errors / a11y ---------- */
.of-field.has-error input, .of-field.has-error textarea{border-color:#c94b3a;}
.of-node.has-error .of-node-slab{border-color:#c94b3a;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .of-type-grid{grid-template-columns:repeat(2,1fr);}
  .of-stone-grid{grid-template-columns:repeat(4,1fr);}
  .of-sizer{grid-template-columns:1fr; gap:28px;}
  .of-field-grid{grid-template-columns:1fr;}
  .of-node-label{display:none;}
}
@media (max-width:560px){
  .of-stone-grid{grid-template-columns:repeat(3,1fr);}
  .of-rail-wrap{padding:14px 0 22px;}
  .of-intro{padding:140px 0 44px;}
}
@media (prefers-reduced-motion:reduce){
  .of-step.is-active, .of-node-slab, .of-type-card, .of-stone, .of-chip span, .of-ticket-top, .of-ticket-bottom, .of-ticket-check{animation:none !important; transition:none !important;}
}

/* ======================================================================
   ============================================================
   ALGEMENE VOORWAARDEN — page-voorwaarden.php ("av-" prefix)
   DNA: matches Klantenservice ("cs-") on purpose — same calm, warm,
   flat-cream register, same damped easing (cubic-bezier(.22,1,.36,1)),
   same sticky-sidebar + content pattern, same white-card contact block.
   This is the second "quiet document" page on the site next to
   Klantenservice, so it deliberately reuses that visual language rather
   than the dark stone/marble register of the marketing pages.
   ============================================================
   ====================================================================== */
.av-page{ background:var(--slab-cream); color:var(--stone-black); }

/* ---------- Hero (mirrors .cs-hero) ---------- */
.av-hero{
  position:relative; overflow:hidden; padding:150px 0 60px;
  background:var(--slab-cream); text-align:left;
}
.av-hero-veins{ opacity:.05; mix-blend-mode:multiply; }
.av-hero-content{ position:relative; z-index:2; max-width:760px; }
.av-hero .eyebrow{ color:var(--orange-deep); }
.av-hero-title{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(34px,5vw,58px); line-height:1.08;
  color:var(--stone-black); margin:14px 0 18px;
  opacity:0; transform:translateY(18px); animation:avTitleIn .7s cubic-bezier(.22,1,.36,1) .1s forwards;
}
@keyframes avTitleIn{ to{opacity:1; transform:translateY(0);} }
.av-hero-sub{
  font-size:16px; line-height:1.6; color:rgba(20,18,16,.66); max-width:62ch; margin-bottom:30px;
}
.av-hero-facts{
  display:flex; flex-wrap:wrap; gap:28px; margin-bottom:34px; padding-top:22px; border-top:1px solid var(--line-soft);
}
.av-hero-fact{
  display:flex; flex-direction:column; gap:6px;
  opacity:0; transform:translateY(8px); animation:avFactIn .5s cubic-bezier(.22,1,.36,1) forwards;
}
.av-hero-fact:nth-child(1){ animation-delay:.2s; }
.av-hero-fact:nth-child(2){ animation-delay:.3s; }
.av-hero-fact:nth-child(3){ animation-delay:.4s; }
@keyframes avFactIn{ to{opacity:1; transform:translateY(0);} }
.av-fact-label{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-deep); }
.av-fact-value{ font-size:14px; color:var(--stone-black); }
.av-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.av-page .btn-ghost{ border-color:var(--line-soft); color:var(--stone-black) !important; }
.av-page .btn-ghost:hover{ border-color:var(--orange-deep); color:var(--orange-deep) !important; }

/* ---------- Document body: sticky index + articles (mirrors .cs-faq-layout) ---------- */
.av-body{ display:grid; grid-template-columns:220px 1fr; gap:64px; padding:60px 0 120px; align-items:start; }

.av-index{ position:sticky; top:110px; align-self:start; }
.av-index-inner{ border-left:none; padding-left:0; }
.av-index-label{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(20,18,16,.4); display:block; margin-bottom:14px;
}
.av-index-list{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:2px; }
.av-index-pill{ display:none; } /* replaced by simple border-left highlight, matching cs-sidebar-link */

.av-index-list a{
  display:block; padding:9px 0 9px 14px; border-left:2px solid transparent;
  font-size:14px; line-height:1.4; color:rgba(20,18,16,.55);
  transition:color .4s cubic-bezier(.22,1,.36,1), border-color .4s cubic-bezier(.22,1,.36,1), padding-left .4s cubic-bezier(.22,1,.36,1);
}
.av-index-num{ font-family:'Space Mono',monospace; font-size:10.5px; color:rgba(20,18,16,.4); opacity:.8; margin-right:8px; }
.av-index-list a:hover{ color:var(--stone-black); }
.av-index-list a.is-active{
  color:var(--orange-deep); border-left-color:var(--orange); padding-left:18px; font-weight:600;
}
.av-index-list a.is-active .av-index-num{ color:var(--orange-deep); opacity:1; }

.av-index-contact{
  display:flex; flex-direction:column; gap:6px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:rgba(20,18,16,.6);
}
.av-index-contact-label{ font-size:11.5px; margin-bottom:2px; }
.av-index-contact a{ color:var(--orange-deep); transition:opacity .3s var(--ease); }
.av-index-contact a:hover{ opacity:.75; }

/* ---------- Articles (mirrors cs-acc-panel-inner reading register) ---------- */
.av-articles{ max-width:740px; }
.av-article{
  position:relative; padding:38px 0; border-bottom:1px solid var(--line-soft); scroll-margin-top:110px;
}
.av-article:first-child{ padding-top:0; }
.av-article:last-child{ border-bottom:none; }
.av-article-num{
  display:block; font-family:'Fraunces',serif; font-size:14px; font-weight:600;
  color:var(--orange-deep); letter-spacing:.02em; margin-bottom:10px;
}
.av-article h2{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(19px,2.2vw,24px); margin:0 0 14px; color:var(--stone-black); max-width:28ch; }
.av-article p{ font-size:14.5px; line-height:1.7; color:rgba(20,18,16,.68); margin:0 0 14px; }
.av-article p:last-child{ margin-bottom:0; }
.av-article strong{ color:var(--stone-black); font-weight:600; }
.av-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.av-list li{ position:relative; padding-left:20px; font-size:14.5px; line-height:1.65; color:rgba(20,18,16,.68); }
.av-list li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--orange-deep); }
.av-list li strong{ color:var(--stone-black); }

.av-article.is-current::before{
  content:""; position:absolute; left:-22px; top:8px; bottom:8px; width:2px; background:var(--orange); opacity:.4;
}

/* ---------- Closing card (mirrors .cs-contact-card) ---------- */
.av-closing-card{
  margin-top:8px; padding:26px 28px; border-radius:6px; background:#fff; border:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  transition:box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.av-closing-card:hover{ box-shadow:0 20px 40px -28px rgba(20,18,16,.25); }
.av-closing-card p{ margin:0; max-width:42ch; color:rgba(20,18,16,.62); }

/* ---------- Responsive (mirrors .cs-faq-layout breakpoints) ---------- */
@media (max-width:980px){
  .av-hero{ padding:120px 0 44px; }
  .av-body{ grid-template-columns:1fr; gap:30px; }
  .av-index{ position:static; }
  .av-index-list{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  .av-index-list a{
    border-left:0; border-bottom:2px solid transparent; padding:6px 10px;
    background:var(--slab-cream-dim); border-radius:100px; font-size:12.5px;
  }
  .av-index-list a.is-active{ padding-left:10px; background:var(--stone-black); color:var(--slab-cream); border-bottom-color:transparent; }
  .av-index-list a.is-active .av-index-num{ color:var(--slab-cream); }
  .av-index-contact{ border-top:none; padding-top:0; }
}
@media (max-width:600px){
  .av-hero{ padding:110px 0 36px; }
  .av-closing-card{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Print ---------- */
@media print{
  .topbar, .main-nav, .mobile-nav, .scroll-progress, .grain-overlay, .av-hero-actions,
  .av-index, footer, .cursor-ring{ display:none !important; }
  .av-hero{ padding:20px 0 !important; }
  .av-body{ grid-template-columns:1fr !important; padding:0 !important; }
  .av-article{ break-inside:avoid; }
}

/* ======================================================================
   ===== PAGE: Materialen (page-materialen.php) — prefix "mt-" =====
   Specimen catalog / library drawer. DNA: dense, browsable, tactile,
   the most motion-rich page on the site. Three pillars: (1) layered
   --slab-cream atmosphere, (2) advanced specimen-card system, (3)
   FLIP-choreographed filtering. Everything below is scoped to .mt-page
   and does not touch any shared/global rule above this banner.
   ====================================================================== */

.mt-page{ position:relative; background:var(--slab-cream); color:var(--stone-black); isolation:isolate; }

/* ---------- Background atmosphere (award-level, layered) ---------- */
.mt-atmosphere{ position:absolute; inset:0; z-index:0; overflow:clip; pointer-events:none; }

.mt-atmo-base{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 85% 60% at 50% 8%, #FAF5EA 0%, var(--slab-cream) 46%, var(--slab-cream-dim) 100%);
}

.mt-grain-layer{
  position:absolute; inset:0;
  background:#fff; filter:url(#mt-grain); mix-blend-mode:multiply; opacity:.5;
}

.mt-blob{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.045; will-change:transform;
  background:radial-gradient(circle, #8a7a5c 0%, transparent 70%);
  animation:mtBlobDrift 36s ease-in-out infinite alternate;
}
.mt-blob-1{ width:640px; height:640px; top:-140px; left:-120px; background:radial-gradient(circle, #6E2E27 0%, transparent 70%); animation-duration:38s; }
.mt-blob-2{ width:560px; height:560px; top:35%; right:-160px; background:radial-gradient(circle, #3F5240 0%, transparent 70%); animation-duration:44s; animation-delay:-8s; }
.mt-blob-3{ width:520px; height:520px; bottom:-180px; left:28%; background:radial-gradient(circle, #B6AA99 0%, transparent 70%); animation-duration:32s; animation-delay:-18s; }
@keyframes mtBlobDrift{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(18px,-14px); }
}

.mt-vignette-top{
  position:absolute; top:0; left:0; right:0; height:340px;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(226,98,42,.06) 0%, transparent 72%);
  transition:opacity .9s var(--ease);
}
.mt-vignette-top.mt-breathe{ animation:mtVignetteBreathe 1.1s var(--ease); }
@keyframes mtVignetteBreathe{
  0%{ opacity:1; } 45%{ opacity:.55; } 100%{ opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .mt-blob{ animation:none; }
}

/* ---------- Hero ---------- */
.mt-hero{ position:relative; z-index:1; padding:146px 0 0; text-align:center; }
.mt-hero-inner{ max-width:720px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.mt-hero .eyebrow{ color:var(--orange-deep); justify-content:center; }
.mt-hero-title{
  font-family:'Fraunces',serif; font-weight:500; font-size:clamp(36px,5.4vw,64px);
  line-height:1.05; letter-spacing:-.01em; color:var(--stone-black); margin:16px 0 18px;
}
.mt-hero-sub{ font-size:16.5px; line-height:1.6; color:rgba(20,18,16,.68); max-width:520px; margin:0 auto 32px; }

.mt-counter{
  display:inline-flex; align-items:baseline; gap:10px; padding:13px 24px; border-radius:100px;
  background:rgba(255,255,255,.55); border:1px solid var(--line-soft);
  box-shadow:0 18px 30px -24px rgba(20,18,16,.3);
}
.mt-counter-digits{
  font-family:'Fraunces',serif; font-weight:600; font-size:27px; color:var(--orange-deep);
  display:inline-flex; letter-spacing:.01em;
}
.mt-counter-digit-roll{ display:inline-block; overflow:hidden; height:1em; vertical-align:top; }
.mt-counter-digit-roll span{ display:block; }
.mt-counter-suffix{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:rgba(20,18,16,.55); }

/* Decorative catalog-motif ticker — a slow, endless marquee of specimen
   names, standing in for the "drawer full of specimens" feeling before
   the eye reaches the filter bar. Pure CSS, reuses the global
   @keyframes scroll-left already defined for .topbar-track. */
.mt-hero-ticker{
  position:relative; z-index:1; margin-top:46px; padding:14px 0;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.mt-hero-ticker-track{ display:inline-flex; animation:scroll-left 48s linear infinite; }
.mt-hero-ticker-item{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(20,18,16,.4); padding:0 22px; display:inline-flex; align-items:center; gap:22px;
}
.mt-hero-ticker-item::after{ content:"·"; color:var(--orange-2); }
@media (prefers-reduced-motion:reduce){ .mt-hero-ticker-track{ animation:none; } }

/* ---------- Sticky filter bar ---------- */
/* top offset = the sticky main-nav's fixed 74px height (see nav.main-nav /
   .nav-inner in the GLOBAL block) — without this the filter bar sticks at
   the very top of the viewport and gets buried under the nav bar the
   instant the topbar scrolls out of view. */
.mt-filterbar{
  position:sticky; top:74px; z-index:20; padding:16px 0;
  background:rgba(245,239,228,.86); backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s var(--ease), padding .3s var(--ease);
}
.mt-filterbar.is-stuck{ box-shadow:0 12px 28px -20px rgba(20,18,16,.4); padding:11px 0; }
.mt-filterbar-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }

.topsteen-page .mt-pillrail{
  position:relative; display:inline-flex; gap:2px; padding:4px; border-radius:100px;
  background:rgba(20,18,16,.055); border:1px solid rgba(20,18,16,.06);
}
.topsteen-page .mt-pill{
  position:relative; z-index:1; appearance:none; -webkit-appearance:none;
  border:none !important; background:none !important; box-shadow:none !important;
  padding:9px 17px; margin:0; border-radius:100px;
  font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700; color:rgba(20,18,16,.58) !important;
  cursor:pointer; transition:color .35s var(--ease); white-space:nowrap; line-height:1.2;
}
.topsteen-page .mt-pill:hover{ color:var(--stone-black) !important; }
.topsteen-page .mt-pill.is-active{ color:#fff !important; }
.mt-pill-liquid{
  position:absolute; z-index:0; top:4px; left:4px; height:calc(100% - 8px); border-radius:100px;
  background:linear-gradient(135deg, var(--stone-black), var(--stone-black-2));
  box-shadow:0 4px 14px -6px rgba(20,18,16,.5);
  transition:transform .5s cubic-bezier(.34,1.32,.4,1), width .5s cubic-bezier(.34,1.32,.4,1);
  will-change:transform, width;
}

.mt-search{
  display:flex; align-items:center; gap:9px; flex:1; min-width:200px; max-width:360px; margin-left:auto;
  padding:10px 16px; border-radius:100px; background:rgba(255,255,255,.7); border:1px solid var(--line-soft);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.topsteen-page .mt-search-toggle{
  all:unset; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.mt-search:focus-within{ border-color:var(--orange-2); background:#fff; }
.mt-search svg{ width:16px; height:16px; color:rgba(20,18,16,.45); flex-shrink:0; }
.mt-search input{
  border:none; background:none; outline:none; width:100%; font-family:'Manrope',sans-serif; font-size:13px; color:var(--stone-black);
}
.mt-search input::placeholder{ color:rgba(20,18,16,.4); }

/* ---------- Grid ---------- */
.mt-grid-section{ position:relative; z-index:1; padding-top:56px; }
.mt-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
}
.mt-empty{ text-align:center; padding:60px 0; color:rgba(20,18,16,.5); font-size:14.5px; }

/* ---------- Specimen card ---------- */
.mt-card{
  --mt-rx:0deg; --mt-ry:0deg; --mt-mx:50%; --mt-my:50%;
  position:relative; border-radius:14px; cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23141210' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") 15 15, zoom-in;
}
.mt-card-surface{
  position:relative; border-radius:14px; overflow:hidden; background:#fff;
  transform:perspective(800px) rotateX(var(--mt-rx)) rotateY(var(--mt-ry));
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:0 14px 30px -22px rgba(20,18,16,.25);
  will-change:transform;
}
.mt-card:hover .mt-card-surface, .mt-card.mt-is-tilting .mt-card-surface{
  box-shadow:
    calc((var(--mt-ry, 0deg) * -1.4)) 26px 34px -20px rgba(110,46,39,.28),
    0 4px 10px -6px rgba(20,18,16,.2);
}
.mt-card-swatch{ position:relative; aspect-ratio:4/3.1; overflow:hidden; }
.mt-card-veins{ position:absolute; inset:-10%; }
.mt-card-sheen{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s var(--ease);
  background:radial-gradient(circle 220px at var(--mt-mx) var(--mt-my), rgba(255,255,255,.55), transparent 60%);
  mix-blend-mode:overlay;
}
.mt-card:hover .mt-card-sheen{ opacity:.9; }
.mt-card-grainbleed{
  position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(20,18,16,.06);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='4' height='4' filter='url(%23n)'/></svg>");
  opacity:.5; mix-blend-mode:multiply;
}
.mt-card-body{ padding:16px 16px 18px; position:relative; }
.mt-card-index{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.04em; color:var(--orange-deep);
  text-shadow:0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(20,18,16,.15);
}
.mt-card-name{ font-family:'Fraunces',serif; font-weight:500; font-size:18px; margin:6px 0 4px; color:var(--stone-black); }
.mt-card-type{ font-size:12px; color:rgba(20,18,16,.55); }
.mt-card-expand-btn{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:none;
  background:rgba(245,239,228,.9); color:var(--stone-black); display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transform:translateY(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.mt-card-expand-btn svg{ width:15px; height:15px; }
.mt-card:hover .mt-card-expand-btn{ opacity:1; transform:translateY(0); top:-46px; }

/* Entrance stagger (blur-to-focus baseline reveal language) */
.mt-card{ opacity:0; transform:translateY(24px); filter:blur(6px); transition:opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); }
.mt-card.mt-in{ opacity:1; transform:translateY(0); filter:blur(0); }
.mt-card.mt-filtered-out{ display:none; }

/* FLIP animation state (JS toggles transform via inline style + this class) */
.mt-card.mt-flip-anim{ transition:transform .5s var(--ease), opacity .4s var(--ease); }

/* ---------- Expand-in-place detail strip ---------- */
.mt-card.mt-expanded{ grid-column:1 / -1; z-index:5; }
.mt-card.mt-expanded .mt-card-surface{ display:none; }
.mt-detail{
  position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:0; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 30px 60px -30px rgba(20,18,16,.35);
  animation:mtDetailIn .5s var(--ease);
}
@keyframes mtDetailIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:scale(1); } }
.mt-detail-close{
  position:absolute; top:14px; right:14px; z-index:3; width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(20,18,16,.6); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.mt-detail-close:hover{ background:var(--stone-black); transform:rotate(90deg); }
.mt-detail-close svg{ width:15px; height:15px; }

.mt-detail-carousel{ position:relative; aspect-ratio:5/4; overflow:hidden; touch-action:pan-y; cursor:grab; }
.mt-detail-carousel.mt-dragging{ cursor:grabbing; }
.mt-detail-track{ display:flex; height:100%; width:300%; will-change:transform; }
.mt-detail-slide{ position:relative; width:33.333%; flex-shrink:0; overflow:hidden; }
.mt-detail-slide .mt-card-veins{ inset:-10%; }
.mt-detail-dots{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
.mt-detail-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); transition:background .3s var(--ease), transform .3s var(--ease); }
.mt-detail-dots span.is-active{ background:#fff; transform:scale(1.3); }

.mt-detail-info{ padding:34px 34px 34px 30px; display:flex; flex-direction:column; align-items:flex-start; }
.mt-detail-index{ position:relative; cursor:help; }
.mt-detail-name{ font-family:'Fraunces',serif; font-weight:500; font-size:28px; margin:8px 0 6px; color:var(--stone-black); }
.mt-detail-blurb{ font-size:14.5px; line-height:1.65; color:rgba(20,18,16,.68); margin:16px 0 22px; max-width:42ch; }
.mt-detail-cta{ margin-top:auto; }

.mt-detail-origin-tip{
  position:absolute; left:0; top:26px; z-index:4; padding:8px 14px; border-radius:8px;
  background:var(--stone-black); color:var(--slab-cream); font-family:'Fraunces',serif; font-style:italic; font-size:13px;
  white-space:nowrap; opacity:0; pointer-events:none; transform:translateY(4px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.mt-detail-index:hover + .mt-detail-blurb ~ .mt-detail-origin-tip,
.mt-detail-index.mt-tip-show ~ .mt-detail-origin-tip{ opacity:1; transform:translateY(0); }

@media (max-width:980px){
  .mt-detail{ grid-template-columns:1fr; }
  .mt-detail-info{ padding:24px; }
}

/* ---------- Responsive grid ---------- */
@media (max-width:1180px){ .mt-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:820px){ .mt-grid{ grid-template-columns:repeat(2, 1fr); } }

/* ---------- Mobile: compact filter bar + per-category snap rows ---------- */
@media (max-width:768px){
  .mt-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
}
@media (max-width:600px){
  .mt-hero{ padding:98px 0 0; }
  .mt-hero-title{ font-size:clamp(28px,8vw,36px); }
  .mt-hero-sub{ font-size:14.5px; margin-bottom:22px; }
  .mt-counter{ padding:10px 18px; }
  .mt-hero-ticker{ margin-top:24px; padding:11px 0; }
  .mt-grid-section{ padding-top:26px; }

  /* Filter bar: one compact row. Kleur + Type pills share a single
     fading horizontal scroller (divided by a hairline) instead of two
     full-height rows, and search collapses to an icon button that
     expands in place — together this reclaims roughly a full screen's
     worth of height on a small phone before the specimens even start. */
  .mt-filterbar{ top:74px; padding:10px 0; }
  .mt-filterbar-inner{ flex-direction:row; align-items:center; flex-wrap:nowrap; gap:8px; }

  .mt-filterbar-pills{
    display:flex; align-items:center; gap:6px; flex:1; min-width:0; overflow-x:auto;
    -ms-overflow-style:none; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
  }
  .mt-filterbar-pills::-webkit-scrollbar{ display:none; }
  .topsteen-page .mt-pillrail{ flex-shrink:0; padding:3px; }
  .mt-pillrail + .mt-pillrail{ position:relative; margin-left:8px; padding-left:14px; }
  .mt-pillrail + .mt-pillrail::before{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:1px; height:18px; background:var(--line-soft);
  }
  .topsteen-page .mt-pill{ padding:7px 13px; font-size:11.5px; flex-shrink:0; }

  /* Search collapses to a round icon button; tapping it expands an
     input in place. Kept in the DOM/markup exactly as-is — this is a
     pure CSS + tiny JS state toggle via .mt-search-open on the bar. */
  .mt-search{
    flex-shrink:0; max-width:none; margin-left:0; width:38px; padding:0; border-color:transparent;
    background:rgba(20,18,16,.06); overflow:hidden; transition:width .35s var(--ease), background .35s var(--ease), padding .35s var(--ease);
  }
  .mt-search svg{ margin:0 9px; flex-shrink:0; }
  .mt-search input{ opacity:0; width:0; transition:opacity .2s var(--ease); }
  .mt-filterbar.mt-search-open .mt-search{
    width:100%; padding:0 14px 0 0; background:#fff; border-color:var(--line-soft);
    box-shadow:0 8px 20px -14px rgba(20,18,16,.3);
  }
  .mt-filterbar.mt-search-open .mt-search input{ opacity:1; width:100%; }
  .mt-filterbar.mt-search-open .mt-filterbar-pills{ display:none; }

  /* ---- Default browsing state: cards grouped into snap-scroll rows
     per category (Type), built by JS (#mtGrid.mt-grouped). ---- */
  .mt-grid.mt-grouped{ display:block; grid-template-columns:none; }
  .mt-mobile-row{ margin-bottom:26px; }
  .mt-mobile-row:last-child{ margin-bottom:0; }
  .mt-mobile-row-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 2px 10px; }
  .mt-mobile-row-title{ font-family:'Fraunces',serif; font-weight:500; font-size:17px; color:var(--stone-black); }
  .mt-mobile-row-count{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:rgba(20,18,16,.42); }
  .mt-mobile-row-scroll{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:2px 2px 6px; margin:0 -2px; -ms-overflow-style:none; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 30px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 30px), transparent 100%);
  }
  .mt-mobile-row-scroll::-webkit-scrollbar{ display:none; }
  .mt-mobile-row-scroll .mt-card{ flex:0 0 62%; scroll-snap-align:start; }

  /* ---- Filtered/searched state: plain flat snap-scroll grid ---- */
  .mt-grid:not(.mt-grouped){
    display:flex; grid-template-columns:none; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 4px 10px; margin:0 -4px; -ms-overflow-style:none; scrollbar-width:none;
  }
  .mt-grid:not(.mt-grouped)::-webkit-scrollbar{ display:none; }
  .mt-grid:not(.mt-grouped) .mt-card{ flex:0 0 70%; scroll-snap-align:start; }

  .mt-card.mt-expanded{ flex-basis:100% !important; }
  .mt-card-name{ font-size:18px; }
  .mt-card-body{ padding:14px 14px 18px; }

  /* Expand button: was drifting to top:-46px (a leftover hover-reveal
     offset meant for desktop) which pushed it off the card entirely on
     mobile. It now sits inside the card, always visible, like a proper
     tap target. */
  .mt-card-expand-btn{
    opacity:1; transform:none; top:10px; right:10px; width:32px; height:32px;
    background:rgba(255,255,255,.88); box-shadow:0 6px 14px -8px rgba(20,18,16,.4);
  }

  /* No cursor-tracked tilt on touch — tap-triggered settle pulse instead */
  .mt-card-surface{ transform:none !important; }
  .mt-card.mt-tap-settle .mt-card-surface{ animation:mtTapSettle .38s var(--ease); }
  @keyframes mtTapSettle{
    0%{ transform:scale(1); } 45%{ transform:scale(.97); box-shadow:0 6px 14px -10px rgba(20,18,16,.4); } 100%{ transform:scale(1); }
  }
  .mt-card-sheen{ display:none; }

  /* Kills the jarring native orange text-selection flash on tap/long-press
     across the catalog UI (pills, index tags, card labels) — those are
     controls, not copyable text, on a touch device. */
  .mt-filterbar, .mt-card-index, .mt-card-name, .mt-card-type,
  .mt-mobile-row-title, .mt-mobile-row-count, .mt-hero-ticker{
    -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .mt-card, .mt-detail, .mt-pill-liquid, .mt-vignette-top{ animation:none !important; transition:opacity .3s linear !important; }
  .mt-card{ transform:none !important; filter:none !important; }
  .mt-grid{ scroll-behavior:auto; }
}