:root{
    /* ---- La Lotería palette (from brand deck) — cream/editorial ---- */
    --olive:#566031;
    --olive-deep:#3b4321;
    --cream:#f6f2d8;
    --cream-2:#ece5c2;
    --cream-3:#e2d9ae;
    --burgundy:#782023;
    --burgundy-bright:#94292d;
    --ink:#2b2416;
    --ink-soft:#5a5140;
    --flag-yellow:#fcd116;
    --flag-blue:#00338d;
    --flag-red:#ce1126;

    --text:var(--ink);
    --muted:rgba(43,36,22,.72);
    --glass-bg:rgba(255,255,255,.5);
    --glass-border:rgba(43,36,22,.14);
    --accent:#7d6a2e;
    --accent-soft:rgba(125,106,46,.12);

    --font-body:'Inter',sans-serif;
    --font-display:'Fraunces',Georgia,serif;

    --bg-inner:#fbf8e8;
    --bg-mid:#f2eccf;
    --bg-outer:#e6dcb8;
  }

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

  body{
    background:var(--bg-outer);
    color:var(--text);
    font-family:var(--font-body);
    overflow-x:hidden;
    min-height:100vh;
  }
  /* fixed backdrop layer — avoids background-attachment:fixed (breaks iOS + compositing) */
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;
    background:radial-gradient(circle at 50% 38%,var(--bg-inner) 0%,var(--bg-mid) 48%,var(--bg-outer) 100%);
    transition:background 1.2s cubic-bezier(.4,0,.2,1);
  }
  html{scroll-behavior:smooth}

  a{color:inherit}

  /* ---------- floating beans ---------- */
  #beans{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
  .bean{position:absolute;bottom:-80px;opacity:0;filter:drop-shadow(0 5px 9px rgba(43,36,22,.35))}
  .bean svg{width:100%;height:100%;display:block}
  @keyframes riseBean{
    0%{transform:translateY(0) translateX(0) rotate(0);opacity:0}
    12%{opacity:.7}
    88%{opacity:.7}
    100%{transform:translateY(-115vh) translateX(var(--drift,40px)) rotate(var(--turn,340deg));opacity:0}
  }

  /* ---------- header ---------- */
  .header{
    position:fixed;top:0;width:100%;z-index:1000;
    display:flex;justify-content:space-between;align-items:center;gap:1rem;
    padding:1.9rem 4%;
    transition:background .4s ease,padding .4s ease,backdrop-filter .4s ease;
  }
  .header.scrolled{
    background:rgba(250,246,228,.82);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    padding-top:1.1rem;padding-bottom:1.1rem;
  }

  .logo{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:600;font-size:1.3rem;letter-spacing:-.01em}
  .logo .flag{width:16px;height:24px;border-radius:2px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(43,36,22,.25)}
  .logo .flag i{display:block}
  .logo .flag i:nth-child(1){height:50%;background:var(--flag-yellow)}
  .logo .flag i:nth-child(2){height:25%;background:var(--flag-blue)}
  .logo .flag i:nth-child(3){height:25%;background:var(--flag-red)}

  .nav{
    display:flex;gap:.3rem;padding:.4rem;border-radius:100px;min-width:0;overflow:hidden;
    background:rgba(255,255,255,.55);border:1px solid rgba(43,36,22,.14);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 6px 22px rgba(43,36,22,.10);
  }
  .nav-item{
    font-family:'Manrope',sans-serif;font-size:.82rem;font-weight:500;
    color:var(--muted);text-decoration:none;padding:.5rem 1.15rem;border-radius:100px;
    transition:all .3s ease;white-space:nowrap;
  }
  .nav-item:hover,.nav-item.active{background:var(--accent);color:var(--cream)}

  .contact-btn{
    background:var(--burgundy);color:var(--cream);border:none;
    padding:.85rem 1.9rem;border-radius:100px;font-weight:600;font-size:.82rem;
    cursor:pointer;transition:all .3s ease;font-family:var(--font-body);
  }
  .contact-btn:hover{background:var(--burgundy-bright);transform:translateY(-2px)}

  .header-right{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
  .lang{display:flex;gap:.15rem;padding:.25rem;border-radius:100px;background:rgba(255,255,255,.55);border:1px solid rgba(43,36,22,.14)}
  .lang-btn{
    font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.06em;
    background:none;border:none;color:var(--muted);cursor:pointer;
    padding:.38rem .68rem;border-radius:100px;transition:all .25s ease;
  }
  .lang-btn:hover{color:var(--ink)}
  .lang-btn.active{background:var(--burgundy);color:var(--cream)}



  /* ---------- premium mobile furniture (styled inside the phone query) ---------- */
  .arch{display:none}
  .pull{display:none}
  .dock{display:none}


  /* ---------- keyboard focus (WCAG 2.4.7) ---------- */
  :where(a,button,input,textarea,[tabindex]):focus-visible{
    outline:2px solid var(--burgundy);
    outline-offset:3px;
    border-radius:6px;
  }
  .lang-btn:focus-visible,.belt-dot:focus-visible{outline-offset:4px}
  .cta:focus-visible,.contact-btn:focus-visible,.belt-arrow:focus-visible,
  .card-cta:focus-visible,.dock-cta:focus-visible{outline-offset:3px;border-radius:100px}
  .pick:focus-visible{outline-offset:3px;border-radius:18px}
  /* never remove the ring without replacing it */
  :where(a,button):focus:not(:focus-visible){outline:none}

  /* ---------- mobile menu ---------- */
  .burger{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:0 9px;cursor:pointer;
    background:rgba(255,255,255,.55);border:1px solid rgba(43,36,22,.14);border-radius:12px;
  }
  .burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
    transition:transform .3s ease,opacity .2s ease}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .mobile-menu{
    position:fixed;top:0;left:0;right:0;z-index:999;
    display:flex;flex-direction:column;gap:.25rem;
    padding:5.5rem 6% 2rem;
    background:var(--cream);border-bottom:1px solid var(--glass-border);
    box-shadow:0 20px 50px rgba(43,36,22,.14);
    transform:translateY(-100%);transition:transform .38s cubic-bezier(.4,0,.2,1);
  }
  .mobile-menu[hidden]{display:none}
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu a{
    font-family:var(--font-display);font-size:1.5rem;font-weight:600;
    color:var(--ink);text-decoration:none;padding:.6rem 0;
    border-bottom:1px solid rgba(43,36,22,.08);
  }
  .mobile-menu a:active{color:var(--burgundy)}
  .mm-cta{margin-top:1.4rem;align-self:flex-start}
  /* `.mobile-menu a` (0,1,1) outranks `.cta` (0,1,0) whatever the source order,
     so the pill was inheriting the nav links' display serif at 1.5rem with no
     side padding and a stray underline — the label sat flush on the rounded
     edge. Put the button's own type and padding back. */
  .mobile-menu a.mm-cta{
    font-family:var(--font-body);font-size:.95rem;font-weight:700;
    color:var(--cream);padding:.45rem .45rem .45rem 1.5rem;border-bottom:0;
  }
  body.menu-open{overflow:hidden}

  /* ---------- hero ---------- */
  .hero{height:100vh;display:flex;align-items:center;justify-content:center;padding:0 4%;padding-top:5rem}
  .hero-inner{position:relative;display:flex;justify-content:space-between;align-items:stretch;width:100%;height:100%}

  .hero-col{display:flex;flex-direction:column;height:100%;padding:6.5rem 0;z-index:100}
  .hero-left{gap:1.8rem;max-width:34%}
  .hero-right{align-items:flex-end;text-align:right;width:420px;pointer-events:none}

  .kicker{
    font-family:'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.3em;
    font-size:.68rem;font-weight:700;color:var(--accent);
  }

  .display{
    font-family:var(--font-display);font-weight:600;
    font-size:clamp(3.6rem,8.5vw,9rem);line-height:.86;letter-spacing:-.02em;
    color:var(--burgundy);
  }
  .display .thin{font-weight:400;font-style:italic;color:var(--muted)}

  .lead{color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:390px}

  .cta{
    display:inline-flex;align-items:center;gap:1.1rem;width:fit-content;
    background:var(--burgundy);color:var(--cream);border:none;
    padding:.45rem .45rem .45rem 1.5rem;border-radius:100px;
    font-weight:700;font-size:.95rem;cursor:pointer;font-family:var(--font-body);
    transition:all .3s ease;
  }
  .cta:hover{background:var(--burgundy-bright);transform:translateY(-3px)}
  .cta .dot{
    width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--cream);
    display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;
  }

  .badge{display:flex;align-items:center;gap:.9rem;margin-top:auto}
  .badge .score{
    font-family:var(--font-display);font-size:2.1rem;font-weight:600;line-height:1;
    color:var(--burgundy);
  }
  .badge .score small{display:block;font-family:'Manrope',sans-serif;font-size:.62rem;
    letter-spacing:.18em;font-weight:700;color:var(--muted);margin-top:.35rem}

  /* center product */
  .stage{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    z-index:1;pointer-events:none;
    background:radial-gradient(circle at 50% 52%,rgba(120,32,35,.07) 0%,transparent 60%);
  }
  .product-3d{
    width:62vw;height:80vh;position:fixed;top:50%;left:50%;
    transform:translate(-50%,-50%);
    --progress-bar-color:transparent;--poster-color:transparent;
    pointer-events:none;transition:opacity .6s ease;outline:none;
  }
  .product-fallback{
    position:fixed;top:50%;left:50%;
    height:78vh;width:auto;max-width:40vw;object-fit:contain;
    transform:translate(-50%,-50%);
    filter:drop-shadow(0 40px 60px rgba(43,36,22,.32));
    opacity:0;transition:opacity .8s ease,filter .4s ease;
    animation:floaty 6s ease-in-out infinite;
    z-index:1;pointer-events:none;
  }
  .product-fallback.show{opacity:1}
  @keyframes floaty{0%,100%{margin-top:0}50%{margin-top:-22px}}
  .product-3d.hidden,.product-fallback.hidden{opacity:0 !important;pointer-events:none}

  .decor{position:absolute;inset:0;pointer-events:none;z-index:110;transition:transform .12s ease-out}
  .decor-bg{z-index:0}
  .bean3d{position:absolute;filter:drop-shadow(0 12px 20px rgba(43,36,22,.34))}
  .bean3d svg{width:100%;height:100%;display:block}
  .c1{width:64px;height:64px;top:19%;left:23%}
  .c2{width:38px;height:38px;top:66%;left:32%;opacity:.9}
  .c3{width:78px;height:78px;top:29%;left:70%}
  .c4{width:30px;height:30px;top:13%;left:44%;opacity:.75}
  .c5{width:50px;height:50px;top:76%;left:17%;opacity:.92}
  .c6{width:36px;height:36px;top:52%;left:80%;opacity:.8}
  .c7{width:56px;height:56px;top:44%;left:12%;opacity:.85}
  .c8{width:26px;height:26px;top:83%;left:66%;opacity:.7}

  .side-cards{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-end;pointer-events:auto}
  .pack{
    position:relative;width:140px;padding:1rem;padding-top:4.5rem;border-radius:26px;
    background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(10px);
    display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center;cursor:pointer;
    transition:all .4s cubic-bezier(.175,.885,.32,1.275);
  }
  .pack:hover{background:rgba(255,255,255,.8);border-color:rgba(43,36,22,.3)}
  .pack{border-color:rgba(120,32,35,.4)}
  .pack img{
    width:118px;height:auto;margin-top:-6.5rem;display:block;pointer-events:none;
    filter:drop-shadow(0 18px 28px rgba(43,36,22,.35));
    transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  }
  .pack:hover img{transform:translateY(-24px) rotate(-8deg) scale(1.12)}
  .pack .p-name{font-weight:600;font-size:.8rem}
  .pack .p-meta{color:var(--muted);font-size:.72rem}






  /* ---------- hero product picker ---------- */
  .picker{display:flex;gap:.55rem;pointer-events:auto}
  .pick{
    position:relative;width:88px;padding:.6rem .4rem .7rem;border-radius:18px;cursor:pointer;
    background:rgba(255,255,255,.42);border:1px solid var(--glass-border);
    display:flex;flex-direction:column;align-items:center;gap:.15rem;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),border-color .3s,background .3s;
  }
  .pick img{width:100%;height:66px;object-fit:contain;display:block;pointer-events:none;
    filter:drop-shadow(0 8px 12px rgba(43,36,22,.28));transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
  .pick:hover{background:rgba(255,255,255,.78)}
  .pick:hover img{transform:translateY(-5px) scale(1.06)}
  .pick.on{border-color:var(--accent);background:rgba(255,255,255,.85)}
  .pick-name{font-family:'Manrope',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.02em;
    color:var(--ink);text-align:center;line-height:1.15}
  .pick-size{font-size:.58rem;color:var(--muted)}

  /* hero badge now carries score + price */
  .badge{gap:1.6rem;align-items:flex-end}
  .badge .score em{font-style:normal;font-size:1rem;color:var(--muted)}
  .badge .price{display:flex;flex-direction:column}
  .badge .price span{font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1;color:var(--accent)}
  .badge .price small{font-family:'Manrope',sans-serif;font-size:.58rem;letter-spacing:.16em;
    text-transform:uppercase;font-weight:700;color:var(--muted);margin-top:.4rem}
  #hero-shot{transition:opacity .19s ease,transform .4s ease}

  /* ---------- the range ---------- */
  .card-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
  .card-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
  .card-top h3{font-family:var(--font-display);font-size:1.22rem;font-weight:600;line-height:1.1}
  .card-size{font-family:'Manrope',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .card-meta{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted)}
  .card-meta .sca{color:var(--accent);font-weight:600}
  .dotsep{opacity:.5}
  .card-notes{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:.25rem 0 .2rem}
  .card-notes li{font-size:.7rem;padding:.3rem .6rem;border-radius:100px;
    background:var(--accent-soft);color:var(--ink);border:1px solid rgba(43,36,22,.08)}
  .card-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.7rem}
  .card-price{font-family:var(--font-display);font-size:1.05rem;font-weight:600}
  .card-price em{font-style:normal;font-family:'Manrope',sans-serif;font-size:.55rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-top:.15rem}
  .card-cta{
    background:none;border:1px solid var(--glass-border);border-radius:100px;cursor:pointer;
    padding:.45rem .95rem;font-family:'Manrope',sans-serif;font-size:.7rem;font-weight:700;
    color:var(--ink);transition:all .3s ease;white-space:nowrap;
  }
  .card-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--cream)}


  /* ================= 3D product belt ================= */
  .belt-wrap{
    position:relative;margin:2.4rem -50vw 0;padding:2rem 0 1.4rem;
    left:50%;right:50%;width:100vw;overflow:hidden;
  }
  /* the receding tail dissolves into the page on the left */
  .belt-wrap::before{
    content:"";position:absolute;top:0;bottom:0;left:0;width:26%;z-index:4;pointer-events:none;
    background:linear-gradient(90deg,var(--cream) 6%,rgba(246,242,216,.55) 55%,transparent 100%);
  }

  .belt-stage{
    position:relative;height:430px;
    perspective:1300px;perspective-origin:34% 44%;
    cursor:grab;touch-action:pan-y;outline:none;
  }
  .belt-stage:active{cursor:grabbing}
  .belt-stage:focus-visible{box-shadow:inset 0 0 0 2px rgba(120,32,35,.35)}
  /* The track is a full-bleed box at z=0, and every card except the centre one
     is pushed to NEGATIVE z — i.e. behind it — so the track swallowed the hit
     and only the front card could ever be clicked. Let pointers through it and
     put them back on the cards themselves. */
  .belt-track{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
  .bcard{pointer-events:auto}

  .bcard{
    position:absolute;top:50%;left:50%;
    width:var(--cardw,232px);height:var(--cardh,330px);
    margin:calc(var(--cardh,330px) / -2) 0 0 calc(var(--cardw,232px) / -2);
    transform-style:preserve-3d;will-change:transform,opacity;
    border-radius:20px;overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(246,242,216,.92) 100%);
    border:1px solid rgba(43,36,22,.14);
    box-shadow:0 24px 50px rgba(43,36,22,.22);
    display:flex;flex-direction:column;
  }
  .bcard.is-center{border-color:var(--bc,#782023);box-shadow:0 30px 60px rgba(43,36,22,.3)}
  .bcard-shot{
    flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;padding:1.1rem 1.1rem 0;
    background:radial-gradient(78% 66% at 50% 76%,var(--bcs,rgba(252,209,22,.16)) 0%,transparent 72%);
  }
  .bcard-shot img{max-height:100%;max-width:76%;object-fit:contain;
    filter:drop-shadow(0 14px 22px rgba(43,36,22,.32))}
  .bcard-body{padding:.85rem 1rem 1.05rem;color:var(--ink);display:flex;flex-direction:column;gap:.3rem}
  .bcard-name{font-family:var(--font-display);font-size:1.02rem;font-weight:600;line-height:1.12}
  .bcard-sub{font-family:'Manrope',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted)}
  .bcard-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-top:.25rem}
  .bcard-price{font-family:var(--font-display);font-size:1rem;font-weight:600}
  .bcard-sca{font-size:.68rem;font-weight:600;color:var(--bc,#782023)}

  .belt-hint{
    text-align:center;margin-top:1rem;font-family:'Manrope',sans-serif;
    font-size:.58rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
    color:var(--muted);position:relative;z-index:5;
  }
  .belt-ui{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.6rem;position:relative;z-index:5}
  .belt-arrow{
    width:42px;height:42px;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.55);border:1px solid var(--glass-border);
    color:var(--ink);font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;
    transition:background .3s,border-color .3s,transform .3s;
  }
  .belt-arrow:hover{background:rgba(255,255,255,.9);transform:translateY(-2px)}
  .belt-dots{display:flex;gap:.5rem}
  .belt-dot{
    position:relative;width:24px;height:24px;border-radius:50%;border:none;padding:0;cursor:pointer;
    background:none;display:grid;place-items:center;
  }
  .belt-dot::after{
    content:"";width:7px;height:7px;border-radius:50%;
    background:rgba(43,36,22,.28);transition:background .3s,transform .3s;
  }
  .belt-dot.on::after{background:var(--accent);transform:scale(1.45)}
  

  /* ---------- reduced motion ----------
     Previously this only silenced the belt cards while the beans, marquee,
     reveals and hero parallax all kept moving.                              */
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
    .bean,#beans{display:none}                 /* drifting beans */
    .marquee-track{animation:none;transform:none}
    .reveal{opacity:1 !important;transform:none !important}
    .bcard{transition:none !important}
    .mobile-menu{transition:none}
  }



  /* ---------- scroll-scrubbed product films ---------- */
  .scrub{position:relative;height:210vh}          /* scroll distance drives the film */
  .scrub-sticky{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .scrub-canvas{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:100%;height:100%;object-fit:cover;      /* 16:9 plate fills the screen */
  }
  .scrub-poster{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    height:62%;width:auto;max-width:none;object-fit:contain;
  }
  .scrub-poster{height:66%;width:auto;opacity:1;transition:opacity .4s ease}
  .scrub-canvas{opacity:0;transition:opacity .4s ease}
  .scrub.ready .scrub-canvas{opacity:1}
  .scrub.ready .scrub-poster{opacity:0}

  .scrub-copy{
    position:relative;z-index:2;max-width:520px;margin-left:6%;margin-right:auto;
    align-self:center;pointer-events:none;
  }
  /* the film's own flood never lands on a flat colour; this finishes it and
     hands off to the next section's exact opening tone (#46270b) */
  .scrub-flood{
    position:absolute;inset:0;z-index:2;pointer-events:none;
    background:#46270b;opacity:0;
  }

  /* scrim so the copy stays readable over the moving plate */
  .scrub-sticky::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(8,8,9,.82) 0%,rgba(8,8,9,.45) 42%,transparent 68%);
    opacity:var(--scrim,1);          /* must clear before the flood, or it bands the left side */
  }
  .scrub-copy .h2{margin-bottom:1rem}
  .scrub-copy .intro{max-width:34ch}
  .scrub-dark{background:linear-gradient(180deg,#0b0b0c 0%,#0b0b0c 78%,#46270b 100%);color:var(--cream)}
  .scrub-copy-dark .h2{color:var(--cream)}
  .scrub-copy-dark .intro{color:rgba(246,242,216,.75)}
  .scrub-copy-dark .label{color:var(--flag-yellow)}

  @media(max-width:900px){
    .scrub{height:185vh}
    .section.section-coffee{margin-top:-14vh}
    .scrub-copy{margin:0 6%;text-align:left}
  }
  @media(prefers-reduced-motion:reduce){
    .scrub{height:auto}
    .scrub-sticky{position:static;height:auto;padding:4rem 0;flex-direction:column;gap:2rem}
    .scrub-canvas{display:none}
    .scrub-poster{position:static;transform:none;opacity:1 !important;height:auto;max-height:52vh}
  }


  /* the cold-brew film ends on a flood of coffee; this section catches that colour
     for one screen, then the page returns to cream */
  /* compound selector on purpose: plain .section-coffee loses to the later
     .section{margin:0 auto} on source order and the pull-up silently vanishes */
  .section.section-coffee{
    position:relative;z-index:3;color:var(--cream);
    padding-top:7rem;padding-bottom:9rem;
    margin-top:-18vh;                /* rides up over the pinned film only after
                                        the fall and spill have finished playing */
    margin-left:auto;margin-right:auto;
  }
  /* .section is capped at 1180px, so painting the background on the element itself
     left a floating brown box with cream either side — bleed it to the viewport */
  .section-coffee::after{
    content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
    width:100vw;z-index:-1;
    background:linear-gradient(180deg,#46270b 0%,#46270b 22%,#3a2109 58%,var(--cream) 100%);
  }
  .section-coffee .label{color:var(--flag-yellow)}
  .section-coffee .label::after{background:rgba(246,242,216,.25)}
  .section-coffee .h2{color:var(--cream)}
  .section-coffee .intro{color:rgba(246,242,216,.78)}
  .section-coffee::before{color:rgba(246,242,216,.34)}
  .section-coffee .spec{background:rgba(0,0,0,.28);border-color:rgba(246,242,216,.18)}
  .section-coffee .cup div{background:rgba(0,0,0,.22);border-color:rgba(246,242,216,.18);color:var(--cream)}
  .section-coffee .cup b{color:var(--flag-yellow)}

  /* ---------- puntos de venta ---------- */
  .stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2.6rem 0 0;
    border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);
    padding:1.8rem 0;
  }
  .stat{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
  .stat b{font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:600;
    line-height:1;color:var(--burgundy)}
  .stat span{font-family:'Manrope',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted)}

  .map-shot{margin:2.6rem 0 0;line-height:0}
  .map-shot img{width:100%;height:auto;display:block;
    filter:drop-shadow(0 26px 44px rgba(43,36,22,.22))}

  .cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.6rem 1.4rem;margin-top:2.4rem}
  .city h3{
    font-family:var(--font-display);font-size:1.05rem;font-weight:600;margin-bottom:.7rem;
    padding-bottom:.5rem;border-bottom:1px solid var(--glass-border);
    display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  }
  .city-dept{font-family:'Manrope',sans-serif;font-size:.52rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .city ul{list-style:none;display:flex;flex-direction:column;gap:.4rem}
  .city li{position:relative;padding-left:.95rem;font-size:.86rem;line-height:1.4;color:var(--ink-soft)}
  .city li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;
    background:var(--burgundy);opacity:.6}

  /* ---------- catering ---------- */
  .cater-shot{
    position:relative;margin:2.6rem 0 0;border-radius:26px;overflow:hidden;
    border:1px solid var(--glass-border);line-height:0;
  }
  .cater-shot img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
  .cater{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;margin-top:2.8rem;align-items:start}
  .cater-price{margin:2rem 0 1.6rem}
  .cater-price small{display:block;font-family:'Manrope',sans-serif;font-size:.6rem;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
  .cater-price strong{font-family:var(--font-display);font-size:2.6rem;font-weight:600;line-height:1.1;
    color:var(--burgundy);display:block;margin-top:.3rem}
  .cater-lists{display:flex;flex-direction:column;gap:2.2rem}
  .cater-lists h4{font-family:'Manrope',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
  .cater-lists h4.mt{margin-top:1.8rem}
  .ticks{list-style:none;display:flex;flex-direction:column;gap:.6rem}
  .ticks li{position:relative;padding-left:1.5rem;font-size:.94rem;line-height:1.45}
  .ticks li::before{
    content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border-radius:50%;
    background:var(--burgundy);opacity:.85;
  }
  .cater-aud span{font-size:.82rem;padding:.5rem 1rem}

  /* ---------- extended site ---------- */
  .site{position:relative;z-index:200;background:var(--cream);transition:background 1.2s cubic-bezier(.4,0,.2,1)}

  .section{max-width:1180px;margin:0 auto;padding:8rem 6%}
  .label{
    font-family:'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.26em;
    font-size:.68rem;font-weight:700;color:var(--accent);display:block;margin-bottom:1.4rem;
  }
  .h2{font-family:var(--font-display);font-weight:600;font-size:clamp(2.6rem,6vw,4.8rem);line-height:.98;margin-bottom:1.4rem;letter-spacing:-.02em}
  .intro{color:var(--muted);font-size:1.08rem;line-height:1.75;max-width:560px}

  /* marquee */
  .marquee{overflow:hidden;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);background:rgba(255,255,255,.45);padding:1.1rem 0;white-space:nowrap}
  .marquee-track{display:inline-flex;animation:marquee 28s linear infinite;font-family:var(--font-display);font-size:1.7rem;font-style:italic;color:var(--muted)}
  .marquee-track span{padding:0 1.4rem}
  .marquee-track b{color:var(--accent);padding:0 .4rem}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* origen split */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
  .split .photo{border-radius:26px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--glass-border)}
  .split .photo img{width:100%;height:100%;object-fit:cover;display:block}

  /* spec grid */
  .spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem;margin-top:3.2rem}
  .spec{background:var(--burgundy);border-radius:20px;padding:1.6rem 1.5rem;border:1px solid rgba(0,0,0,.15)}
  .spec{color:var(--cream)}
  .spec .k{font-family:'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;font-weight:700;color:rgba(246,242,216,.72)}
  .spec .v{font-family:var(--font-display);font-size:1.35rem;font-weight:600;margin-top:.5rem;line-height:1.15}

  .cup{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}
  .cup div{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:100px;padding:.7rem 1.3rem;font-size:.86rem}
  .cup b{color:var(--accent);font-weight:600}


  /* single product feature */
  .product-feature{display:grid;grid-template-columns:.85fr 1fr;gap:4rem;align-items:center;margin-top:3.4rem}
  .pf-shot{
    position:relative;border-radius:26px;padding:2.5rem;
    background:radial-gradient(circle at 50% 42%,rgba(120,32,35,.08) 0%,transparent 68%),var(--glass-bg);
    border:1px solid var(--glass-border);
    display:flex;align-items:center;justify-content:center;
  }
  .pf-shot img{width:100%;max-width:300px;height:auto;display:block;filter:drop-shadow(0 26px 40px rgba(43,36,22,.32))}
  .pf-size{font-family:var(--font-display);font-size:clamp(3rem,7vw,5rem);font-weight:600;line-height:1;margin-bottom:1rem}
  .pf-specs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}
  .pf-specs div{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:1rem 1.2rem}
  .pf-specs span{display:block;font-family:'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.6rem;font-weight:700;color:var(--muted)}
  .pf-specs b{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:600;margin-top:.35rem}

  /* experience list */
  .xp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;margin-top:3rem}
  .xp{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:20px;padding:1.8rem}
  .xp .n{font-family:var(--font-display);color:var(--accent);font-size:1.2rem}
  .xp h4{margin:.6rem 0 .4rem;font-size:1rem}
  .xp p{color:var(--muted);font-size:.86rem;line-height:1.55}

  /* audience */
  .aud{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.6rem}
  .aud span{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:100px;padding:.8rem 1.4rem;font-size:.9rem}

  /* contact */
  .contact{max-width:960px;margin:0 auto 8rem;padding:4rem 6%;border-radius:34px;background:var(--burgundy);text-align:center}
  .contact h2{font-family:var(--font-display);font-weight:600;font-size:clamp(2.3rem,5vw,3.8rem);margin-bottom:.8rem}
  .contact{color:var(--cream)}
  .contact p{color:rgba(246,242,216,.82);margin-bottom:2.4rem}

  .contact-lines{display:flex;flex-direction:column;gap:.7rem;align-items:center;margin-top:.4rem}
  .cl-place{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:1rem;color:var(--cream)}
  .cl-pin{flex:0 0 auto;opacity:.9}
  .cl-flag{display:inline-flex;flex-direction:column;width:15px;height:11px;border-radius:2px;
    overflow:hidden;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
  .cl-flag i{display:block;width:100%}
  .cl-flag i:nth-child(1){height:50%;background:var(--flag-yellow)}
  .cl-flag i:nth-child(2){height:25%;background:var(--flag-blue)}
  .cl-flag i:nth-child(3){height:25%;background:var(--flag-red)}
  .contact .cta-wa{background:var(--cream);color:var(--burgundy);text-decoration:none}
  .contact .cta-wa:hover{background:#fff}
  .cl-note{font-family:'Manrope',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(246,242,216,.6)}

  /* footer */
  .footer{max-width:1180px;margin:0 auto;padding:4rem 6% 2.5rem}
  .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem}
  .footer-brand p{color:var(--muted);font-size:.9rem;line-height:1.6;max-width:280px;margin-top:1rem}
  .footer h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:1.1rem}
  .footer a{display:block;text-decoration:none;font-size:.9rem;padding:.28rem 0;margin-bottom:.2rem;opacity:.8;transition:opacity .3s,color .3s}
  .footer a:hover{opacity:1;color:var(--accent)}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:3.2rem;padding-top:2rem;border-top:1px solid var(--glass-border);color:var(--muted);font-size:.8rem;flex-wrap:wrap;gap:1rem}
  .footer-bottom .soc{display:flex;gap:1.1rem}
  .footer-bottom a{margin:0}

  .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}
  .reveal.in{opacity:1;transform:none}

  /* =========================================================
     Responsive — kept last so it wins on source order
     ========================================================= */
  @media(max-width:1200px){
    /* let every hero child become a direct flex item so we can order them freely */
    .hero{height:auto;min-height:auto;padding:6.5rem 7% 3.5rem;display:block}
    .hero-inner{flex-direction:column;align-items:stretch;height:auto;gap:0}
    .hero-col{display:contents}

    .kicker{order:1;margin-bottom:1rem}
    .hero-left .display{order:2}
    .hero-right .display{order:3;text-align:left !important;margin-bottom:.4rem}
    .stage{order:4}
    .lead{order:6}
    .cta{order:7}
    .badge{order:8}
    .side-cards{display:flex;order:5;width:100%;justify-content:flex-start;margin:.4rem 0 .2rem}
    .picker{width:100%;gap:.5rem}
    .pick{flex:1 1 0;width:auto;min-width:0}

    .display{font-size:clamp(3rem,15vw,4.6rem);line-height:.9}
    .lead{max-width:38ch;margin:0;font-size:1rem;line-height:1.6}
    .cta{margin-top:1.6rem}
    .badge{margin-top:2rem}

    .stage{
      position:relative;inset:auto;width:100%;height:auto;
      background:none;margin:1.8rem 0 .5rem;
    }
    .product-3d,.product-fallback{
      position:relative;top:auto;left:auto;transform:none;
      height:auto;width:auto;max-width:none;max-height:46vh;margin:0 auto;display:block;
    }
    /* <model-viewer> has no intrinsic size, so `height:auto` collapses it to nothing */
    .product-3d{width:100%;height:46vh;max-height:none}
    .product-fallback.hidden,.product-3d.hidden{opacity:1 !important}

    .decor,.decor-bg{display:none}
  }

  @media(max-width:1080px){
    .nav{display:none}
    .burger{display:flex}
    .logo{white-space:nowrap}
  }

  @media(max-width:900px){
    .split,.cater,.footer-top{grid-template-columns:1fr}
    .split{gap:2.5rem}
    .section{padding:5rem 6%}
    .footer-bottom{flex-direction:column;align-items:flex-start}
  }

  @media(max-width:760px){
    .header{padding:1.1rem 6%;gap:.6rem}
    .header.scrolled{padding-top:.85rem;padding-bottom:.85rem}
    .header-right{gap:.5rem}
    .header-right .contact-btn{display:none}
    .logo{font-size:1.1rem}
    .logo .flag{width:13px;height:20px}
    .lang-btn{padding:.34rem .55rem;font-size:.68rem}

    .hero{padding:5.5rem 6% 3rem}
    .kicker{font-size:.6rem;letter-spacing:.22em}
    .display{font-size:clamp(2.8rem,13.5vw,3.8rem)}
    .lead{font-size:.95rem;line-height:1.62}
    .cta{font-size:.9rem;padding:.4rem .4rem .4rem 1.3rem}
    .cta .dot{width:34px;height:34px;font-size:1.2rem}
    .badge .score{font-size:1.7rem}
    .badge .score small{font-size:.56rem;letter-spacing:.14em}
    .product-fallback{max-height:42vh}
    .product-3d{height:42vh}

    .section{padding:3.8rem 6%}
    /* headings carry desktop <br> tags; on a narrow column let them wrap naturally */
    .h2 br{display:none}   /* keep the hero's break — that one is the wordplay */
    .h2{font-size:clamp(1.9rem,8.2vw,2.5rem);line-height:1.06;text-wrap:balance}
    .intro{font-size:.95rem;line-height:1.65}
    .label{font-size:.6rem;letter-spacing:.2em;margin-bottom:1rem}

    .marquee-track{font-size:1.15rem}
    .marquee{padding:.85rem 0}

    .split{gap:2rem}
    .split .photo{aspect-ratio:3/2;border-radius:18px}

    /* six burgundy tiles in one column is a lot of scrolling — pair them up */
    .spec-grid{grid-template-columns:1fr 1fr;gap:.6rem;margin-top:2.2rem}
    .spec{padding:1rem .9rem;border-radius:14px}
    .spec .k{font-size:.55rem;letter-spacing:.1em}
    .spec .v{font-size:.92rem;margin-top:.3rem;line-height:1.2}

    .cup{gap:.5rem;margin-top:1.2rem}
    .cup div{font-size:.8rem;padding:.6rem 1rem}

    .product-feature{gap:2rem;margin-top:2.2rem}
    .pf-shot{padding:1.6rem;border-radius:20px}
    .pf-shot img{max-width:210px}
    .pf-size{font-size:2.8rem}
    .pf-specs{gap:.6rem;margin:1.4rem 0}
    .pf-specs div{padding:.75rem .9rem;border-radius:12px}
    .pf-specs b{font-size:.9rem}

    .xp-grid{grid-template-columns:1fr 1fr;gap:.7rem;margin-top:2rem}
    .xp{padding:1.1rem .95rem;border-radius:16px}
    .xp h4{font-size:.88rem;margin:.45rem 0 .3rem}
    .xp p{font-size:.76rem;line-height:1.45}

    .aud{gap:.5rem;margin-top:1.8rem}
    .aud span{font-size:.82rem;padding:.6rem 1rem}

    .belt-stage{height:350px}
    .belt-wrap{padding:2.4rem 0 1.6rem}
    .bcard-body{padding:.6rem .7rem .75rem;gap:.15rem}
    .bcard-name{font-size:.82rem;line-height:1.1}
    .bcard-sub{font-size:.5rem;letter-spacing:.12em}
    .bcard-price{font-size:.8rem;white-space:nowrap}
    .bcard-sca{font-size:.58rem;white-space:nowrap}
    .bcard-shot{padding:.7rem .7rem 0}
    .stats{grid-template-columns:1fr 1fr;gap:1.4rem;padding:1.4rem 0}
    .cities{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
    .city h3{font-size:.92rem;flex-direction:column;align-items:flex-start;gap:.15rem}
    .city li{font-size:.8rem}
    .map-shot{margin-top:2rem}
    .cater{gap:2.2rem}
    .cater-shot{margin-top:1.8rem;border-radius:18px}
    .cater-shot img{aspect-ratio:4/3}
    .cater-lists{gap:1.6rem}
    .cater-price{margin:1.6rem 0 1.2rem}
    .cater-price strong{font-size:2.2rem}
    .contact{border-radius:22px;padding:2.6rem 7%;margin:0 6% 4rem;width:auto}
    .contact h2{font-size:clamp(1.8rem,7.5vw,2.4rem)}
    .contact p{font-size:.9rem;margin-bottom:1.8rem}
    .contact input,.contact button{width:100%;min-width:0}

    .footer{padding:3rem 6% 2rem}
    .footer-top{grid-template-columns:1fr 1fr;gap:1.8rem}
    .footer-brand{grid-column:1 / -1}
    .footer-bottom{margin-top:2.2rem;font-size:.75rem}
    /* ---- editorial arch: echoes the arch in the bag's own label artwork ---- */
    .stage{position:relative}
    .arch{
      display:block;position:absolute;left:50%;bottom:0;transform:translateX(-50%);
      width:78%;height:82%;z-index:-1;
      border-radius:50% 50% 14% 14% / 62% 62% 6% 6%;
      background:
        radial-gradient(120% 90% at 50% 12%, rgba(120,32,35,.10) 0%, rgba(120,32,35,0) 62%),
        linear-gradient(180deg, var(--cream-3) 0%, rgba(226,217,174,.35) 68%, rgba(226,217,174,0) 100%);
    }
    .product-fallback,.product-3d{position:relative;z-index:1}

    /* ---- paper grain, so the cream reads like the kraft bag, not flat CSS ---- */
    body::after{
      content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
      mix-blend-mode:multiply;
    }

    /* ---- section labels become numbered editorial rules ---- */
    .section{position:relative}
    .label{
      display:flex;align-items:center;gap:.7rem;
      font-size:.58rem;letter-spacing:.24em;color:var(--burgundy);
    }
    .label::after{content:"";flex:1;height:1px;background:rgba(43,36,22,.18)}
    .section::before{
      counter-increment:sec;content:counter(sec,decimal-leading-zero);
      position:absolute;top:3.8rem;right:6%;
      font-family:var(--font-display);font-size:.8rem;font-style:italic;
      color:rgba(43,36,22,.34);
    }
    .site{counter-reset:sec}

    /* ---- specs: a snap carousel reads more premium than six stacked tiles ---- */
    .spec-grid{
      /* stays inside the content column: -6%/+6% resolve against different boxes and misalign */
      display:flex;gap:.7rem;margin:2.2rem 0 0;padding:.2rem 0 1rem;
      overflow-x:auto;scroll-snap-type:x mandatory;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;
      scroll-padding-left:0;
    }
    .spec-grid::-webkit-scrollbar{display:none}
    .spec{
      flex:0 0 62%;scroll-snap-align:start;
      display:flex;flex-direction:column;justify-content:flex-end;
      min-height:118px;border-radius:18px;padding:1.1rem 1.15rem;
    }
    .spec .v{font-size:1.05rem}

    /* ---- pull-quote ---- */
    .pull{
      display:block;position:relative;margin:1rem 6% 4.5rem;padding:2.4rem 0 0;
      border-top:1px solid rgba(43,36,22,.16);text-align:left;
    }
    .pull-mark{
      position:absolute;top:.7rem;left:-.2rem;
      font-family:var(--font-display);font-size:4.5rem;line-height:1;
      color:rgba(120,32,35,.16);
    }
    .pull p{
      font-family:var(--font-display);font-style:italic;font-weight:500;
      font-size:1.72rem;line-height:1.18;color:var(--burgundy);
      position:relative;text-wrap:balance;
    }
    .pull cite{
      display:block;margin-top:1rem;font-style:normal;
      font-family:'Manrope',sans-serif;font-size:.6rem;font-weight:700;
      letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
    }

    /* ---- sticky action dock ---- */
    .dock{
      display:block;position:fixed;left:0;right:0;bottom:0;z-index:900;
      padding:.7rem 6% calc(.7rem + env(safe-area-inset-bottom));
      background:linear-gradient(180deg, rgba(246,242,216,0) 0%, rgba(246,242,216,.92) 34%, var(--cream) 100%);
      transform:translateY(120%);transition:transform .4s cubic-bezier(.4,0,.2,1);
      pointer-events:none;
    }
    .dock.up{transform:translateY(0);pointer-events:auto}
    body.menu-open .dock{transform:translateY(120%)}
    .dock-cta{
      display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
      background:var(--burgundy);color:var(--cream);border:none;cursor:pointer;
      padding:.42rem .42rem .42rem 1.5rem;border-radius:100px;
      font-family:var(--font-body);font-weight:700;font-size:.95rem;
      box-shadow:0 10px 26px rgba(43,36,22,.22);
    }
    .dock-cta .dot{
      width:36px;height:36px;border-radius:50%;background:var(--flag-yellow);color:var(--ink);
      display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;flex:0 0 auto;
    }
    .contact{margin-bottom:6.5rem}   /* clear the dock */

    /* ---- form ---- */
  
  }

  @media(max-width:358px){
    .spec-grid,.xp-grid{grid-template-columns:1fr}
    .display{font-size:2.6rem}
  }

  /* =========================================================
     Multi-page: real logo, page-aware nav, club and gallery
     ========================================================= */
  .logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;flex:0 0 auto}
  .logo img{height:44px;width:auto;display:block}
  .footer-brand .logo img{height:64px}
  /* the swap itself is done in script (src -> logo-cream.png); this only keeps
     the pill readable where it now sits over black */
  .header.on-dark .nav,.header.on-dark .burger{border-color:rgba(246,242,216,.22)}
  @media(max-width:760px){ .logo img{height:36px} }

  .nav-item[aria-current="page"]{background:var(--accent);color:var(--cream)}
  .mobile-menu a[aria-current="page"]{color:var(--burgundy)}

  /* ---------- running club ---------- */
  .club-hero{margin:2.6rem 0 0;border-radius:26px;overflow:hidden;line-height:0;border:1px solid var(--glass-border)}
  .club-hero img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
  .club-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;margin-top:3rem;align-items:start}
  .club-info h3{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin-bottom:1.2rem}
  .club-dl{display:flex;flex-direction:column;gap:.9rem;margin-bottom:2rem}
  .club-dl > div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
    padding-bottom:.7rem;border-bottom:1px solid var(--glass-border)}
  .club-dl dt{font-family:'Manrope',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted)}
  .club-dl dd{font-family:var(--font-display);font-size:1.02rem;font-weight:600;text-align:right}
  .club-sub{font-family:'Manrope',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
  .club-note{font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin:1.8rem 0;max-width:44ch}
  .club-flyer{border-radius:22px;overflow:hidden;line-height:0;border:1px solid var(--glass-border);
    box-shadow:0 22px 44px rgba(43,36,22,.16)}
  .club-flyer img{width:100%;height:auto;display:block}
  /* three shots now, so three columns — two left the last one orphaned */
  .club-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
  .club-shots figure{border-radius:22px;overflow:hidden;line-height:0;border:1px solid var(--glass-border)}
  .club-shots img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}

  /* ---------- gallery ---------- */
  .gal{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:1.1rem;margin-top:3rem}
  .gal figure{border-radius:20px;overflow:hidden;line-height:0;border:1px solid var(--glass-border);
    transition:transform .5s cubic-bezier(.175,.885,.32,1.275)}
  .gal figure:hover{transform:translateY(-6px)}
  .gal img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:3/4}
  .gal-a{grid-column:span 2}
  .gal-a img,.gal-b img{aspect-ratio:3/2}
  .gal-b{grid-column:span 2}

  @media(max-width:900px){
    .club-shots{grid-template-columns:1fr 1fr}
    .club-grid{grid-template-columns:1fr;gap:2.2rem}
    .gal{grid-template-columns:1fr 1fr;gap:.8rem}
    .gal-a,.gal-b{grid-column:span 2}
  }
  @media(max-width:560px){
    .club-shots{grid-template-columns:1fr}
    .club-hero img{aspect-ratio:3/2}
    .club-dl > div{flex-direction:column;gap:.2rem}
    .club-dl dd{text-align:left}
  }

  .promesa-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.4rem}
  .cta-ghost{background:none;border:1px solid rgba(246,242,216,.4);color:var(--cream);
    padding:.85rem 1.5rem;border-radius:100px;font-weight:700;font-size:.9rem;
    font-family:var(--font-body);text-decoration:none;transition:background .3s,border-color .3s}
  .cta-ghost:hover{background:rgba(246,242,216,.12);border-color:rgba(246,242,216,.7)}

  /* ---------- podcast player ---------- */
  .pod{
    position:relative;overflow:hidden;margin:3rem 0 0;padding:2.4rem 2.4rem 2.2rem;
    border-radius:28px;background:linear-gradient(160deg,#241a10 0%,#150e07 100%);
    color:var(--cream);border:1px solid rgba(246,242,216,.14);
    box-shadow:0 26px 60px rgba(43,36,22,.26);
  }
  .pod-glow{
    position:absolute;inset:-40% -10% auto -10%;height:220%;pointer-events:none;
    background:radial-gradient(50% 40% at 22% 30%,rgba(252,209,22,.16) 0%,transparent 70%),
               radial-gradient(46% 38% at 82% 20%,rgba(152,32,42,.28) 0%,transparent 72%);
    opacity:.9;transition:opacity .6s ease;
  }
  .pod.playing .pod-glow{opacity:1;animation:podDrift 9s ease-in-out infinite alternate}
  @keyframes podDrift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,-2%,0)}}
  .pod-head{position:relative;z-index:1;margin-bottom:1.8rem}
  .pod-kicker{
    font-family:'Manrope',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.28em;
    text-transform:uppercase;color:var(--flag-yellow);display:block;margin-bottom:.7rem;
  }
  .pod-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600;line-height:1.1}
  .pod-sub{color:rgba(246,242,216,.7);font-size:.94rem;line-height:1.55;margin-top:.5rem;max-width:44ch}

  .pod-player{position:relative;z-index:1;display:flex;align-items:center;gap:1.3rem}
  .pod-play{
    flex:0 0 auto;width:64px;height:64px;border-radius:50%;cursor:pointer;
    background:var(--cream);color:#1b120a;border:none;
    display:grid;place-items:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s;
    box-shadow:0 10px 26px rgba(0,0,0,.4);
  }
  .pod-play:hover{transform:scale(1.06)}
  .pod-play svg{width:26px;height:26px}
  .pod-play .ic-pause{display:none}
  .pod.playing .pod-play .ic-play{display:none}
  .pod.playing .pod-play .ic-pause{display:block}

  .pod-body{flex:1;min-width:0}
  .pod-wave{display:flex;align-items:flex-end;gap:3px;height:34px;margin-bottom:.7rem}
  .pod-wave i{
    flex:1;background:rgba(246,242,216,.28);border-radius:2px;height:22%;
    transition:height .25s ease,background .25s ease;
  }
  .pod.playing .pod-wave i{background:rgba(246,242,216,.5);animation:podBar 1.1s ease-in-out infinite}
  @keyframes podBar{0%,100%{height:22%}50%{height:88%}}

  .pod-bar{
    position:relative;height:6px;border-radius:100px;background:rgba(246,242,216,.18);
    cursor:pointer;outline:none;
  }
  .pod-bar:focus-visible{box-shadow:0 0 0 3px rgba(252,209,22,.45)}
  .pod-fill{
    position:absolute;inset:0 auto 0 0;width:0%;border-radius:100px;
    background:linear-gradient(90deg,var(--flag-yellow),#e8a33a);
  }
  .pod-meta{
    display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.6rem;
    font-family:'Manrope',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.1em;
    color:rgba(246,242,216,.6);
  }
  .pod-hint{letter-spacing:.18em;text-transform:uppercase;font-size:.58rem;color:var(--flag-yellow);opacity:0;transition:opacity .4s}
  .pod.needs-tap .pod-hint{opacity:1}
  .pod.unavailable{display:none}

  @media(max-width:560px){
    .pod{padding:1.8rem 1.4rem 1.6rem;border-radius:22px}
    .pod-player{gap:1rem}
    .pod-play{width:56px;height:56px}
    .pod-wave{height:26px}
  }
  @media(prefers-reduced-motion:reduce){
    .pod.playing .pod-wave i,.pod.playing .pod-glow{animation:none}
  }

  /* ---------- video tiles (gallery + story) ----------
     Nothing downloads until it is asked for: the tile is a poster image and a
     button, and the <video> is only created on the click.                    */
  .gal-vid,.story-vid{position:relative;margin:0;cursor:pointer}
  .gal-vid img{display:block;width:100%;height:100%;object-fit:cover}
  .gal-vid video{display:block;width:100%;height:100%;object-fit:cover;background:#0b0b0c}
  .gal-vid video{aspect-ratio:3/4}

  .gal-play{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:66px;height:66px;border-radius:50%;cursor:pointer;
    border:1px solid rgba(246,242,216,.55);
    background:rgba(11,11,12,.42);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s ease;
    padding:0;
  }
  .gal-play::before{
    content:"";position:absolute;left:calc(50% + 2px);top:50%;
    transform:translate(-50%,-50%);
    border-left:16px solid var(--cream);
    border-top:10px solid transparent;border-bottom:10px solid transparent;
  }
  .gal-vid:hover .gal-play,.story-vid:hover .gal-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(11,11,12,.62)}
  .gal-play:focus-visible{outline:2px solid var(--flag-yellow);outline-offset:3px}

  /* The story's film is a 9:16 interview. It keeps that shape and sits in the
     photo column with the stills — forcing it into a wide banner cropped the
     speaker and blew a phone video up past its own resolution. */
  .story-vid{position:relative}
  .story-vid img,.story-vid video{
    width:100%;height:auto;max-width:340px;display:block;border-radius:10px;
    box-shadow:0 18px 40px rgba(43,36,22,.22);
  }
  .story-vid video{background:#0b0b0c}
  .story-vid .gal-play{left:min(50%,170px)}

  @media(max-width:860px){
    .gal-play{width:54px;height:54px}
    .gal-play::before{border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
    .story-vid img,.story-vid video{max-width:none}
  }

  /* ---------- story timeline (historia.html) ---------- */
  .story{list-style:none;counter-reset:beat;margin:3.4rem 0 0;padding:0;
         display:flex;flex-direction:column;gap:3.2rem}
  .story-beat{
    counter-increment:beat;position:relative;
    display:grid;grid-template-columns:1fr minmax(0,300px);gap:2.6rem;align-items:start;
    padding-top:2.2rem;border-top:1px solid rgba(43,36,22,.14);
  }
  .story-beat:has(.story-shot){align-items:center}
  .story-beat:not(:has(.story-shot)){grid-template-columns:1fr;max-width:74ch}
  .story-beat::before{
    content:counter(beat,decimal-leading-zero);
    position:absolute;top:1.5rem;right:0;
    font-family:var(--font-display);font-size:.8rem;font-style:italic;
    color:rgba(43,36,22,.34);letter-spacing:.06em;
  }
  .story-beat:has(.story-shot)::before{right:auto;left:0;top:-.4rem}
  .story-k{
    display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--accent);margin-bottom:.9rem;font-weight:600;
  }
  .story-body p{margin:0 0 1rem;color:var(--muted);font-size:1.02rem;line-height:1.72;max-width:62ch}
  .story-body p:last-child{margin-bottom:0}
  .story-triplet{
    font-family:var(--font-display);font-size:1.22rem;line-height:1.5;
    color:var(--ink) !important;padding-left:1.1rem;
    border-left:2px solid var(--accent);
  }

  /* the archive photographs are small family scans — frame them as such */
  .story-shot{margin:0}
  .story-shot img{
    width:100%;height:auto;display:block;border-radius:10px;
    box-shadow:0 18px 40px rgba(43,36,22,.22);
  }
  .story-shot.archive img{
    padding:9px;background:#fbf8ea;border:1px solid rgba(43,36,22,.12);
    filter:saturate(.86) contrast(.97);
  }
  .story-shot figcaption{
    margin-top:.7rem;font-size:.72rem;line-height:1.45;
    color:rgba(43,36,22,.55);font-style:italic;
  }

  /* ---------- the closing manifesto ---------- */
  .manifesto{
    position:relative;max-width:1180px;margin:5rem auto 0;padding:5rem 6% 5.4rem;
    border-radius:28px;color:var(--cream);
    background:linear-gradient(165deg,#241a0d 0%,#1a1209 55%,#120d06 100%);
    overflow:hidden;
  }
  .manifesto .label{color:var(--flag-yellow)}
  .manifesto .h2{color:var(--cream);margin:.6rem 0 1.3rem}
  .mf-lead{max-width:60ch;color:rgba(246,242,216,.8);font-size:1.05rem;line-height:1.7;margin:0}
  .mf-list{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:.55rem}
  .mf-list li{
    font-family:var(--font-display);font-size:clamp(1.15rem,2.3vw,1.5rem);
    line-height:1.35;color:var(--cream);padding-left:1.2rem;position:relative;
  }
  .mf-list li::before{content:"";position:absolute;left:0;top:.62em;
    width:6px;height:6px;border-radius:50%;background:var(--flag-yellow)}
  .mf-note{margin:2.4rem 0 0;max-width:56ch;color:rgba(246,242,216,.7);
           font-size:.96rem;line-height:1.7;font-style:italic}
  .mf-sign{margin:2.6rem 0 0;padding-top:1.6rem;border-top:1px solid rgba(246,242,216,.16)}
  .mf-sign b{display:block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
             color:rgba(246,242,216,.8)}
  .mf-sign em{display:block;margin-top:.6rem;font-family:var(--font-display);
              font-size:clamp(1rem,2vw,1.2rem);line-height:1.5;color:var(--flag-yellow);font-style:normal}

  @media(max-width:860px){
    .story{gap:2.6rem}
    .story-beat,.story-beat:has(.story-shot){grid-template-columns:1fr;gap:1.5rem}
    .story-beat:has(.story-shot)::before{left:auto;right:0;top:1.5rem}
    .story-shot{max-width:340px}
    .story-triplet{font-size:1.1rem}
    .manifesto{margin-top:3.4rem;padding:3.4rem 7% 3.6rem;border-radius:22px}
  }

  /* ---------- the film in a portrait window ----------
     Keyed to ASPECT, not width, and to the same 1.15/1 the script uses to pick
     the plate — if the two ever disagree, one of them is stretching a 16:9 film
     down a 9:16 screen. Below this ratio the engine serves the tall plate, so
     the canvas can simply cover the stage: the frames are black-backed and the
     section is black, so nothing reads as a letterbox.                        */
  @media(max-aspect-ratio:1.15/1){
    .scrub{height:240vh}                 /* more travel = more pixels per frame */
    .scrub-sticky{height:100svh;align-items:flex-end;background:#0b0b0c}
    /* The plate is 9:16 and the window is taller still, so cover crops the sides
       and shows the full height of the frame. The can sits centred in that frame
       with dead black above and below it, which puts its base right where the
       type wants to be — so lift the whole film. The black it uncovers at the
       bottom is the section's own black; nothing reads as a gap.               */
    .scrub-canvas{
      position:absolute;inset:0;top:0;left:0;
      width:100%;height:100%;object-fit:cover;
      transform:translateY(-7%);
    }
    .scrub-poster{top:41%;left:50%;transform:translate(-50%,-50%);height:auto;width:70%}
    /* type sits in the empty base of the frame, never across the can */
    .scrub-copy{
      width:100%;max-width:none;margin:0;align-self:flex-end;text-align:left;
      padding:0 7vw calc(5.5vh + env(safe-area-inset-bottom,0px));
    }
    .scrub-copy .label{font-size:.62rem;letter-spacing:.22em}
    .scrub-copy .h2{margin-bottom:.55rem;font-size:clamp(1.65rem,7.4vw,2.2rem);line-height:1.08}
    .scrub-copy .intro{max-width:30ch;font-size:.87rem;line-height:1.5}
    /* the scrim runs bottom-up here, not left-right: the copy moved */
    .scrub-sticky::after{
      background:linear-gradient(180deg,
        rgba(8,8,9,.62) 0%, rgba(8,8,9,0) 30%,
        rgba(8,8,9,.30) 58%, rgba(8,8,9,.90) 100%);
    }
  }
  @media(max-aspect-ratio:1.15/1) and (max-height:700px){
    .scrub-copy{padding-bottom:calc(5vh + env(safe-area-inset-bottom,0px))}
    .scrub-copy .intro{display:none}     /* a short screen keeps the headline only */
  }

  /* ---------- product card dialog ----------
     The client's own product flyers are dark and gold-ruled; this echoes them
     rather than the cream page, so the card reads as the flyer it is.       */
  body.pm-open{overflow:hidden}
  .pmodal{
    position:fixed;inset:0;z-index:1000;
    display:grid;place-items:center;padding:clamp(10px,3vw,34px);
    opacity:0;transition:opacity .2s ease;
  }
  /* MUST come after the rule above. `display:grid` beats the user-agent
     [hidden]{display:none}, so without this the dialog never actually closes:
     the blurred scrim stays over the page, eating every click beneath it. */
  .pmodal[hidden]{display:none}
  .pmodal.in{opacity:1}
  .pmodal-scrim{
    position:absolute;inset:0;background:rgba(8,8,9,.74);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .pmodal-card{
    position:relative;width:min(900px,100%);max-height:92svh;overflow:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:24px;border:1px solid rgba(246,242,216,.16);
    background:
      radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.06) 0%, transparent 60%),
      linear-gradient(165deg,#191309 0%,#120e07 52%,#0d0a06 100%);
    box-shadow:0 40px 90px rgba(0,0,0,.62), 0 0 0 1px var(--pm-accent,#7d6a2e) inset;
    color:var(--cream);
    transform:translateY(14px) scale(.985);
    transition:transform .24s cubic-bezier(.2,.7,.3,1);
  }
  .pmodal.in .pmodal-card{transform:none}
  .pmodal-x{
    position:absolute;top:14px;right:14px;z-index:3;
    width:40px;height:40px;min-width:44px;min-height:44px;border-radius:50%;
    border:1px solid rgba(246,242,216,.24);background:rgba(12,10,7,.6);
    cursor:pointer;padding:0;
  }
  .pmodal-x::before,.pmodal-x::after{
    content:"";position:absolute;left:50%;top:50%;width:15px;height:1.5px;
    background:var(--cream);border-radius:2px;
  }
  .pmodal-x::before{transform:translate(-50%,-50%) rotate(45deg)}
  .pmodal-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
  .pmodal-x:hover{background:rgba(246,242,216,.14)}

  .pmodal-inner{display:grid;grid-template-columns:.82fr 1.18fr;gap:0}
  .pm-shot{
    position:relative;display:grid;place-items:center;padding:2.4rem 1.4rem;
    background:radial-gradient(78% 58% at 50% 42%,
      color-mix(in srgb, var(--pm-accent,#7d6a2e) 34%, transparent) 0%, transparent 72%);
    border-right:1px solid rgba(246,242,216,.10);
  }
  .pm-shot img{width:min(100%,240px);height:auto;display:block;
               filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
  .pm-body{padding:2.4rem 2.2rem 2rem}

  .pm-kicker{display:block;font-family:var(--sans,inherit);font-size:.62rem;
             letter-spacing:.26em;text-transform:uppercase;color:var(--flag-yellow)}
  .pm-body h3{margin:.5rem 0 .1rem;font-family:var(--serif,inherit);
              font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.1;color:var(--cream)}
  .pm-size{margin:0;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
           color:rgba(246,242,216,.62)}
  .pm-price{margin:.85rem 0 1.3rem;font-size:1.32rem;font-weight:700;color:var(--cream)}
  .pm-price span{display:block;font-size:.6rem;font-weight:600;letter-spacing:.2em;
                 text-transform:uppercase;color:var(--flag-yellow);margin-top:.25rem}

  .pm-specs{margin:0 0 1.35rem;display:grid;gap:0}
  .pm-row{display:flex;gap:1rem;justify-content:space-between;align-items:baseline;
          padding:.56rem 0;border-top:1px solid rgba(246,242,216,.12)}
  .pm-row dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
             color:rgba(246,242,216,.55);flex:0 0 auto}
  .pm-row dd{margin:0;text-align:right;font-size:.92rem;color:var(--cream)}

  .pm-lbl{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
          color:rgba(246,242,216,.55);margin-bottom:.6rem}
  .pm-notes ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.42rem}
  .pm-notes li{
    font-size:.78rem;padding:.34rem .68rem;border-radius:999px;
    border:1px solid color-mix(in srgb, var(--pm-accent,#7d6a2e) 55%, rgba(246,242,216,.2));
    background:color-mix(in srgb, var(--pm-accent,#7d6a2e) 22%, transparent);
    color:var(--cream);
  }

  .pm-pillars{list-style:none;margin:1.5rem 0 0;padding:1.3rem 0 0;
              border-top:1px solid rgba(246,242,216,.12);
              display:grid;grid-template-columns:1fr 1fr;gap:1.1rem .9rem}
  .pm-pillars li{display:grid;grid-template-columns:22px 1fr;gap:.15rem .6rem;align-items:start}
  .pm-pillars svg{grid-row:span 2;color:var(--flag-yellow);margin-top:2px}
  .pm-pillars b{font-size:.74rem;letter-spacing:.04em;color:var(--cream)}
  .pm-pillars span{font-size:.74rem;line-height:1.4;color:rgba(246,242,216,.62)}

  .pm-foot{margin:1.5rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(246,242,216,.12)}
  .pm-foot b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
             color:rgba(246,242,216,.78)}
  .pm-foot em{display:block;margin-top:.3rem;font-family:var(--serif,inherit);
              font-size:.9rem;color:var(--flag-yellow)}

  /* the affordance on the front belt card */
  .bcard{cursor:pointer}
  .bcard:focus-visible{outline:2px solid var(--bc,#7d6a2e);outline-offset:4px;border-radius:14px}
  .bcard-hint{display:none}
  .bcard.is-center .bcard-hint{
    display:inline-block;margin-top:.5rem;font-size:.6rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--bc,#7d6a2e);
    border-bottom:1px solid currentColor;padding-bottom:1px;
  }

  @media(max-width:760px){
    .pmodal{padding:0;place-items:end stretch}
    .pmodal-card{
      width:100%;max-height:92svh;border-radius:22px 22px 0 0;
      border-bottom:0;transform:translateY(24px);
    }
    .pmodal-inner{grid-template-columns:1fr}
    .pm-shot{padding:1.9rem 1.4rem 1.1rem;border-right:0;
             border-bottom:1px solid rgba(246,242,216,.10)}
    .pm-shot img{width:min(58%,190px)}
    .pm-body{padding:1.6rem 1.35rem 2rem}
    .pm-pillars{grid-template-columns:1fr}
  }
  @media(prefers-reduced-motion:reduce){
    .pmodal,.pmodal-card{transition:none;transform:none}
  }

  /* Last word on the film, because the portrait block above is later in the
     sheet than the original reduced-motion rules and would otherwise win:
     no scrubbing means no scroll track to scrub, just the still.            */
  @media(prefers-reduced-motion:reduce){
    .scrub{height:auto}
    .scrub-sticky{position:static;height:auto;padding:4rem 0;flex-direction:column;
                  gap:2rem;background:none}
    .scrub-canvas{display:none}
    .scrub-poster{position:static;transform:none;opacity:1 !important;
                  height:auto;width:auto;max-height:52vh}
    .scrub-copy{padding:0 7vw;align-self:auto}
  }

/* ---------- cup-profile orbit (section-coffee) ---------- */
.orbit{position:relative;display:flex;align-items:center;justify-content:center;height:32rem;margin-top:2.4rem;perspective:1000px}
.orbit-hint{text-align:center;font-size:.85rem;color:rgba(246,242,216,.6);margin-top:.2rem}
.orbit-core{position:absolute;z-index:10;display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffe27a,var(--flag-yellow) 60%,#a98400);transition:opacity .4s,scale .4s}
.orbit-core.is-hidden{opacity:0;scale:.6}
.orbit-core-dot{width:1.6rem;height:1.6rem;border-radius:50%;background:rgba(70,39,11,.85)}
.orbit-core-ring{position:absolute;width:5.5rem;height:5.5rem;border-radius:50%;border:1px solid rgba(252,209,22,.45);animation:orbit-ping 2.8s cubic-bezier(0,0,.2,1) infinite}
.orbit-core-ring-2{width:7rem;height:7rem;animation-delay:.9s}
@keyframes orbit-ping{0%{transform:scale(.85);opacity:.8}70%,100%{transform:scale(1.7);opacity:0}}
.orbit-track{position:absolute;border-radius:50%;border:1px solid rgba(246,242,216,.16)}
.orbit-node{position:absolute;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s}
.orbit-dot{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid rgba(246,242,216,.35);background:#2a1707;color:var(--cream);cursor:pointer;transition:transform .3s,background .3s,color .3s,border-color .3s}
.orbit-dot svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.orbit-dot:hover,.orbit-dot:focus-visible{border-color:var(--flag-yellow);outline:none}
.orbit-dot.is-open{background:var(--flag-yellow);border-color:var(--flag-yellow);color:#46270b;transform:scale(1.3);box-shadow:0 0 0 .6rem rgba(252,209,22,.14)}
.orbit-label{position:absolute;top:3.4rem;left:50%;translate:-50% 0;white-space:nowrap;font:700 .64rem/1 'Manrope',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:rgba(246,242,216,.7);transition:color .3s}
.orbit-label.is-open{color:var(--flag-yellow)}
.orbit-card{position:absolute;z-index:300;width:min(17rem,70vw);padding:1.5rem;border-radius:20px;background:var(--cream);color:#2b2416;box-shadow:0 2rem 4rem -1.5rem rgba(0,0,0,.7);animation:orbit-card-in .45s cubic-bezier(.16,1,.3,1) both}
@keyframes orbit-card-in{from{opacity:0;scale:.94}}
.orbit-card-n{font:700 .7rem/1 'Manrope',sans-serif;letter-spacing:.16em;color:var(--burgundy)}
.orbit-card-k{font:700 .66rem/1 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6a604a;margin-top:.9rem}
.orbit-card-v{font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1.15;margin-top:.4rem}
@media (max-width:640px){.orbit{height:27rem}.orbit-label{font-size:.58rem;letter-spacing:.08em}}
@media (prefers-reduced-motion:reduce){.orbit-core-ring{animation:none;opacity:.35}.orbit-node{transition:none}}

.orbit-label{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center}
.orbit-label b{font:700 .62rem/1 'Manrope',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:rgba(246,242,216,.65);font-weight:700}
.orbit-label i{font:600 .95rem/1.1 var(--font-display);font-style:normal;color:var(--cream);white-space:nowrap}
.orbit-label.is-open b{color:var(--flag-yellow)}
@media (max-width:640px){.orbit-label i{font-size:.8rem}.orbit-label b{font-size:.56rem}}
.orbit-label{width:8.2rem;white-space:normal}
.orbit-label i{white-space:normal;text-transform:none;letter-spacing:0;font-weight:600;line-height:1.15}
@media (max-width:640px){.orbit{height:30rem}.orbit-label{width:6.6rem}.orbit-label i{font-size:.78rem}}

/* legal pages + footer links */
.legal{max-width:760px;padding-top:7rem;padding-bottom:5rem}
.legal h1{margin:.4rem 0 .4rem}
.legal h2{font-family:var(--font-display);font-size:1.25rem;margin:1.8rem 0 .5rem}
.legal p{line-height:1.7;margin:.5rem 0;color:var(--ink-soft,#3a3326)}
.legal-date{font-size:.85rem;opacity:.7;margin-bottom:1.2rem}
.legal-back{margin-top:2.5rem}
.legal a{color:var(--burgundy);text-underline-offset:3px}
.legal-links{display:flex;flex-wrap:wrap;gap:.3rem .5rem;font-size:.82rem;opacity:.85}
.legal-links a{color:inherit}