:root{
    --terracotta:#C5613B;
    --terracotta-deep:#A94E2D;
    --cream:#F6EDE2;
    --cream-soft:#FBF6EF;
    --cream-deep:#EFE2D2;
    --brown:#33231A;
    --brown-soft:#4A382C;
    --clay:#E2A988;
    --clay-soft:#EFC9B1;
    --honey:#E0A55B;
    --ink:#2A1C14;
    --line:rgba(51,35,26,.12);
    --line-soft:rgba(51,35,26,.07);
    --shadow:0 24px 60px -28px rgba(51,35,26,.45);
    --shadow-sm:0 12px 30px -18px rgba(51,35,26,.42);
    --shadow-lg:0 50px 90px -40px rgba(51,35,26,.55);
    --serif:'DM Serif Display',Georgia,serif;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --ease:cubic-bezier(.22,.61,.18,1);
    --bounce:cubic-bezier(.34,1.56,.5,1);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans);
    color:var(--brown);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.012em}
  a{color:inherit;text-decoration:none}
  img{max-width:100%}
  section{position:relative}
  em{font-style:italic}

  ::selection{background:var(--terracotta);color:var(--cream-soft)}

  :focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:3px}

  .wrap{max-width:1240px;margin:0 auto;padding:0 40px;position:relative}
  .eyebrow{
    font-family:var(--sans);
    text-transform:uppercase;
    letter-spacing:.26em;
    font-size:11px;
    font-weight:600;
    color:var(--terracotta);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--terracotta);display:inline-block;opacity:.6}
  .snum{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--terracotta);opacity:.85}

  /* ---------- Grain overlay ---------- */
  .grain{
    position:fixed;inset:0;z-index:9000;pointer-events:none;
    opacity:.5;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  }

  /* ---------- Custom cursor ---------- */
  .cursor-dot,.cursor-ring{
    position:fixed;top:0;left:0;z-index:99990;pointer-events:none;
    border-radius:50%;mix-blend-mode:multiply;
    transform:translate(-50%,-50%);will-change:transform;
  }
  .cursor-dot{width:9px;height:9px;background:var(--terracotta)}
  .cursor-ring{
    width:42px;height:42px;border:1.5px solid rgba(197,97,59,.55);
    transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
  }
  body.cursor-active{cursor:none}
  body.cursor-active a,body.cursor-active button{cursor:none}
  .cursor-ring.hover{width:66px;height:66px;background:rgba(197,97,59,.1);border-color:rgba(197,97,59,.3)}
  .cursor-ring.hover-label{width:84px;height:84px;background:var(--terracotta);border-color:var(--terracotta)}
  .cursor-label{
    position:fixed;top:0;left:0;z-index:99991;pointer-events:none;
    transform:translate(-50%,-50%) scale(0);transform-origin:center;
    font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:var(--cream-soft);
    transition:transform .3s var(--bounce);white-space:nowrap;
  }
  .cursor-label.show{transform:translate(-50%,-50%) scale(1)}

  /* ---------- Preloader ---------- */
  .preloader{
    position:fixed;inset:0;z-index:99995;
    background:var(--brown);
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:26px;
    clip-path:inset(0 0 0 0);
    transition:clip-path 1s var(--ease);
  }
  .preloader.done{clip-path:inset(0 0 100% 0)}
  .pre-sun{position:relative;width:140px;height:140px}
  .pre-sun svg{width:100%;height:100%;overflow:visible}
  .pre-ray{transform-origin:70px 70px;opacity:0;animation:rayPop .5s var(--bounce) forwards}
  @keyframes rayPop{to{opacity:1}}
  .pre-disc{
    stroke-dasharray:340;stroke-dashoffset:340;
    animation:drawDisc 1s var(--ease) .15s forwards;
  }
  @keyframes drawDisc{to{stroke-dashoffset:0}}
  .pre-word{
    overflow:hidden;
  }
  .pre-word span{
    display:inline-block;
    font-family:var(--serif);font-size:30px;color:var(--cream-soft);
    letter-spacing:.02em;
    transform:translateY(110%);
    animation:preRise .8s var(--ease) .35s forwards;
  }
  @keyframes preRise{to{transform:translateY(0)}}
  .pre-word em{color:var(--clay-soft)}
  .pre-sub{
    font-family:var(--sans);font-size:10px;letter-spacing:.42em;text-transform:uppercase;
    color:rgba(246,237,226,.4);opacity:0;animation:fadeIn .6s ease .7s forwards;
  }
  @keyframes fadeIn{to{opacity:1}}
  .skip-pre{
    position:fixed;bottom:26px;right:30px;z-index:99996;
    font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(246,237,226,.45);background:none;border:none;cursor:pointer;
    transition:color .3s ease;
  }
  .skip-pre:hover{color:var(--cream-soft)}

  /* ---------- Reveal ---------- */
  .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal-clip{clip-path:inset(0 0 100% 0);transform:translateY(20px);opacity:0;transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease),opacity .8s ease}
  .reveal-clip.in{clip-path:inset(0 0 -10% 0);transform:none;opacity:1}
  [data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}[data-d="3"]{transition-delay:.24s}
  [data-d="4"]{transition-delay:.32s}[data-d="5"]{transition-delay:.4s}[data-d="6"]{transition-delay:.48s}

  /* ---------- Nav ---------- */
  .nav{
    position:sticky;top:0;z-index:8000;
    transition:background .5s var(--ease),box-shadow .5s var(--ease),border-color .5s ease;
    border-bottom:1px solid transparent;
  }
  .nav.solid{
    background:rgba(251,246,239,.97);
    border-bottom:1px solid var(--line-soft);
    box-shadow:0 18px 40px -32px rgba(51,35,26,.35);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:23px;letter-spacing:.01em}
  .brand .mark{width:38px;height:38px;flex-shrink:0}
  .brand em{color:var(--terracotta)}
  .nav-links{display:flex;align-items:center;gap:38px}
  .nav-links a{
    font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.02em;
    position:relative;padding:6px 0;color:var(--brown-soft);
    transition:color .3s ease;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
    background:var(--terracotta);transform:scaleX(0);transform-origin:right;
    transition:transform .45s var(--ease);
  }
  .nav-links a:hover{color:var(--terracotta)}
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav-cta{
    font-family:var(--sans);font-size:13px;font-weight:600;
    padding:11px 22px;border-radius:100px;
    background:var(--brown);color:var(--cream-soft);
    position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;
    transition:transform .4s var(--bounce);
  }
  .nav-cta span{position:relative;z-index:2;transition:color .4s ease}
  .nav-cta::before{
    content:"";position:absolute;inset:0;background:var(--terracotta);
    transform:translateY(101%);transition:transform .45s var(--ease);
  }
  .nav-cta:hover{transform:translateY(-2px)}
  .nav-cta:hover::before{transform:translateY(0)}
  .nav-toggle{display:none}

  /* ---------- Hero ---------- */
  .hero{
    padding:72px 0 90px;overflow:hidden;position:relative;
  }
  .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
  .sun-glow{
    position:absolute;left:50%;top:62%;width:1300px;height:1300px;transform:translate(-50%,-50%);
    background:radial-gradient(circle at center,rgba(224,165,91,.55) 0%,rgba(226,169,136,.32) 30%,rgba(246,237,226,0) 62%);
    will-change:transform;
  }
  .hero-hills{position:absolute;left:0;right:0;bottom:-2px;z-index:1}
  .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;min-height:62vh}
  .hero-copy{max-width:640px}
  .hero h1{
    font-size:clamp(3.4rem,8.2vw,7.4rem);line-height:.94;letter-spacing:-.025em;margin:26px 0 0;
  }
  .hero h1 .line{display:block;overflow:hidden}
  .hero h1 .line>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
  .hero.loaded h1 .line>span{transform:translateY(0)}
  .hero h1 .line:nth-child(2)>span{transition-delay:.1s}
  .hero h1 .line:nth-child(3)>span{transition-delay:.2s}
  .hero h1 em{color:var(--terracotta);position:relative}
  .hero h1 em::after{
    content:"";position:absolute;left:0;bottom:.08em;width:100%;height:.5em;z-index:-1;
    background:linear-gradient(120deg,rgba(224,165,91,.4),rgba(197,97,59,.22));
    border-radius:50%;transform:scaleX(0);transform-origin:left;
    transition:transform .9s var(--ease) .9s;
  }
  .hero.loaded h1 em::after{transform:scaleX(1)}
  .hero-lede{
    font-size:18px;color:var(--brown-soft);max-width:430px;margin:30px 0 36px;
    opacity:0;transform:translateY(16px);transition:opacity .9s ease .6s,transform .9s var(--ease) .6s;
  }
  .hero.loaded .hero-lede{opacity:1;transform:none}
  .hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;opacity:0;transition:opacity .9s ease .8s;}
  .hero.loaded .hero-actions{opacity:1}
  .btn{
    font-family:var(--sans);font-size:14px;font-weight:600;
    padding:15px 30px;border-radius:100px;display:inline-flex;align-items:center;gap:10px;
    position:relative;overflow:hidden;cursor:pointer;border:none;
    transition:transform .4s var(--bounce);
  }
  .btn-primary{background:var(--terracotta);color:var(--cream-soft)}
  .btn-primary span{position:relative;z-index:2}
  .btn-primary::before{content:"";position:absolute;inset:0;background:var(--brown);transform:translateY(101%);transition:transform .5s var(--ease)}
  .btn-primary:hover{transform:translateY(-3px)}
  .btn-primary:hover::before{transform:translateY(0)}
  .btn .arrow{position:relative;z-index:2;transition:transform .4s var(--bounce)}
  .btn:hover .arrow{transform:translateX(5px)}
  .btn-ghost{
    color:var(--brown);font-family:var(--sans);font-size:14px;font-weight:600;
    display:inline-flex;align-items:center;gap:10px;position:relative;padding:6px 2px;
  }
  .btn-ghost::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--brown);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
  .btn-ghost:hover::after{transform:scaleX(1);transform-origin:left}
  .btn-ghost .play{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:background .3s ease,border-color .3s ease}
  .btn-ghost:hover .play{background:var(--terracotta);border-color:var(--terracotta)}
  .btn-ghost:hover .play svg{stroke:var(--cream-soft);fill:var(--cream-soft)}

  /* Hero art */
  .hero-art{position:relative;height:520px;display:grid;place-items:center}
  .cup-stage{position:relative;width:100%;height:100%;will-change:transform}
  .cup-float{animation:floatY 6s ease-in-out infinite}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
  .steam path{
    stroke-dasharray:60;stroke-dashoffset:60;
    animation:steamDraw 3s ease-in-out infinite;
  }
  .steam path:nth-child(2){animation-delay:.6s}
  .steam path:nth-child(3){animation-delay:1.2s}
  @keyframes steamDraw{0%{stroke-dashoffset:60;opacity:0}30%{opacity:.7}100%{stroke-dashoffset:-60;opacity:0}}
  .bean-scatter{position:absolute;inset:0;pointer-events:none}
  .bean-scatter .bn{position:absolute;animation:beanFloat 7s ease-in-out infinite}
  @keyframes beanFloat{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-12px) rotate(calc(var(--r) + 12deg))}}
  .sun-rays{animation:spinSlow 60s linear infinite}
  @keyframes spinSlow{to{transform:rotate(360deg)}}
  .hero-badge{
    position:absolute;left:-6px;top:30px;z-index:3;
    background:var(--cream-soft);border:1px solid var(--line);border-radius:100px;
    padding:9px 16px 9px 9px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-sm);
    font-size:12px;font-weight:600;
  }
  .hero-badge .dot{width:30px;height:30px;border-radius:50%;background:var(--terracotta);display:grid;place-items:center;color:var(--cream-soft)}

  .hero-scroll{
    position:absolute;left:40px;top:16px;z-index:3;display:flex;align-items:center;gap:12px;
    font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--brown-soft);
    opacity:0;transition:opacity .9s ease 1.1s;
  }
  .hero.loaded .hero-scroll{opacity:.8}
  .hero-scroll .ln{width:1px;height:34px;background:var(--brown);position:relative;overflow:hidden}
  .hero-scroll .ln::after{content:"";position:absolute;inset:0;background:var(--terracotta);animation:scrollLn 2s ease-in-out infinite}
  @keyframes scrollLn{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

  /* ---------- Marquee ---------- */
  .marquee{
    background:var(--brown);color:var(--cream);overflow:hidden;
    padding:24px 0;border-top:1px solid rgba(246,237,226,.08);border-bottom:1px solid rgba(246,237,226,.08);
  }
  .marquee-track{display:flex;width:max-content;animation:scrollX 32s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  @keyframes scrollX{to{transform:translateX(-50%)}}
  .marquee-item{display:flex;align-items:center;gap:34px;padding:0 34px}
  .marquee-item span{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);white-space:nowrap}
  .marquee-item em{color:var(--clay)}
  .marquee-star{flex-shrink:0;color:var(--terracotta)}

  /* ---------- Section header ---------- */
  .sec{padding:120px 0}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:60px;flex-wrap:wrap}
  .sec-head h2{font-size:clamp(2.4rem,5vw,4.2rem);max-width:680px}
  .sec-head .meta{max-width:300px}
  .sec-head .meta p{font-size:15px;color:var(--brown-soft)}

  /* ---------- Values ---------- */
  .values{background:var(--cream-soft);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
  .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid var(--line-soft)}
  .val{padding:44px 38px;border-right:1px solid var(--line-soft);position:relative;overflow:hidden}
  .val::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
  .val:hover::before{transform:scaleX(1)}
  .val-ico{width:60px;height:60px;margin-bottom:28px;color:var(--terracotta);transition:transform .6s var(--bounce)}
  .val:hover .val-ico{transform:translateY(-5px) rotate(-4deg)}
  .val h3{font-size:1.5rem;margin-bottom:12px}
  .val p{font-size:14px;color:var(--brown-soft);line-height:1.65}
  .val .vn{position:absolute;right:30px;top:32px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--line);letter-spacing:.1em}

  /* ---------- Products ---------- */
  .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .prod{
    background:var(--cream-soft);border:1px solid var(--line-soft);border-radius:26px;
    padding:38px 32px 32px;position:relative;overflow:hidden;
    transition:transform .55s var(--bounce),box-shadow .55s var(--ease),border-color .4s ease;
    will-change:transform;
  }
  .prod:hover{transform:translateY(-12px);box-shadow:var(--shadow-lg);border-color:transparent}
  .prod-tag{
    position:absolute;right:26px;top:26px;font-family:var(--sans);font-size:10px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);
    background:rgba(197,97,59,.1);padding:5px 11px;border-radius:100px;
  }
  .bag-stage{height:280px;display:grid;place-items:center;margin-bottom:24px;position:relative}
  .bag-glow{position:absolute;width:250px;height:130px;bottom:26px;border-radius:50%;opacity:.45;transition:opacity .55s ease,transform .55s var(--ease)}
  .prod:hover .bag-glow{opacity:.85;transform:scale(1.05)}
  .coffee-bag{transition:transform .6s var(--bounce);will-change:transform}
  .prod:hover .coffee-bag{transform:translateY(-8px) rotate(-2deg)}
  .prod-origin{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brown-soft);opacity:.7;margin-bottom:8px}
  .prod h3{font-size:1.65rem;margin-bottom:14px}
  .notes{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
  .note{font-family:var(--sans);font-size:11px;font-weight:500;padding:5px 12px;border:1px solid var(--line);border-radius:100px;color:var(--brown-soft)}
  .prod-foot{display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid var(--line-soft)}
  .price{font-family:var(--serif);font-size:1.7rem}
  .price small{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--brown-soft);opacity:.7}
  .add-btn{
    width:46px;height:46px;border-radius:50%;background:var(--brown);color:var(--cream-soft);
    border:none;cursor:pointer;display:grid;place-items:center;position:relative;overflow:hidden;
    transition:transform .4s var(--bounce);
  }
  .add-btn::before{content:"";position:absolute;inset:0;background:var(--terracotta);transform:scale(0);border-radius:50%;transition:transform .4s var(--ease)}
  .add-btn svg{position:relative;z-index:2}
  .add-btn:hover{transform:rotate(90deg)}
  .add-btn:hover::before{transform:scale(1)}

  /* ---------- Origin journey (horizontal scroll) ---------- */
  .journey{background:var(--brown);color:var(--cream);overflow:hidden}
  .journey .sec-head h2{color:var(--cream-soft)}
  .journey .sec-head .meta p{color:rgba(246,237,226,.6)}
  .journey .eyebrow{color:var(--clay)}
  .journey .eyebrow::before{background:var(--clay)}
  .journey .snum{color:var(--clay)}
  .hscroll-outer{position:relative}
  .hscroll-prog{height:2px;background:rgba(246,237,226,.12);margin:0 40px 30px;border-radius:2px;max-width:1240px;margin-left:auto;margin-right:auto}
  .hscroll-prog .bar{height:100%;width:0;background:linear-gradient(90deg,var(--clay),var(--terracotta));border-radius:2px}
  .hscroll{
    display:flex;gap:30px;padding:0 40px 20px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  }
  .hscroll::-webkit-scrollbar{display:none}
  .hscroll.drag{cursor:grabbing}
  .jcard{
    flex:0 0 460px;scroll-snap-align:center;
    background:linear-gradient(160deg,rgba(246,237,226,.06),rgba(246,237,226,.02));
    border:1px solid rgba(246,237,226,.1);border-radius:26px;
    padding:40px;min-height:430px;display:flex;flex-direction:column;
    position:relative;overflow:hidden;
  }
  .jcard-art{height:180px;margin-bottom:30px;position:relative}
  .jcard .jn{font-family:var(--serif);font-size:5rem;line-height:1;color:rgba(246,237,226,.12);position:absolute;right:0;top:-10px}
  .jcard h3{font-size:2rem;color:var(--cream-soft);margin-bottom:14px;position:relative}
  .jcard p{font-size:14px;color:rgba(246,237,226,.66);line-height:1.7;margin-top:auto}
  .jcard .jstep{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin-bottom:18px}
  .hscroll-hint{display:flex;align-items:center;gap:12px;margin:26px 40px 0;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,237,226,.5);max-width:1240px;margin-left:auto;margin-right:auto}

  /* ---------- Subscription ---------- */
  .subscribe{background:var(--cream-soft)}
  .sub-card{
    background:linear-gradient(160deg,var(--cream) 0%,var(--cream-deep) 100%);
    border:1px solid var(--line-soft);border-radius:34px;padding:64px;
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;overflow:hidden;
    box-shadow:var(--shadow);
  }
  .sub-card .blob{position:absolute;right:-120px;top:-120px;width:420px;height:420px;opacity:.6;pointer-events:none}
  .sub-copy h2{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:20px}
  .sub-copy p{font-size:16px;color:var(--brown-soft);max-width:420px;margin-bottom:30px}
  .sub-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
  .sub-list li{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--brown-soft)}
  .sub-list .ck{width:24px;height:24px;border-radius:50%;background:var(--terracotta);display:grid;place-items:center;flex-shrink:0;color:var(--cream-soft)}
  .roast-panel{position:relative;z-index:2}
  .roast-panel .label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brown-soft);margin-bottom:18px;display:block}
  .roast-track{
    display:flex;gap:10px;padding:8px;background:var(--cream-soft);border:1px solid var(--line);border-radius:18px;margin-bottom:14px;
  }
  .roast-opt{
    flex:1;text-align:center;padding:18px 10px;border-radius:13px;cursor:pointer;position:relative;
    transition:background .4s var(--ease),transform .3s var(--bounce);background:transparent;border:none;font-family:var(--sans);
  }
  .roast-opt .rbean{width:34px;height:34px;margin:0 auto 12px;border-radius:50%;transition:transform .4s var(--bounce)}
  .roast-opt .rname{font-size:13px;font-weight:600;color:var(--brown);display:block}
  .roast-opt .rdesc{font-size:11px;color:var(--brown-soft);opacity:.7;margin-top:3px;display:block}
  .roast-opt.active{background:var(--brown)}
  .roast-opt.active .rname{color:var(--cream-soft)}
  .roast-opt.active .rdesc{color:rgba(246,237,226,.6)}
  .roast-opt:hover .rbean{transform:scale(1.12) translateY(-2px)}
  .roast-meter{height:8px;border-radius:8px;background:linear-gradient(90deg,#C99464,#9A5A38,#3A241A);position:relative;margin:22px 0 28px}
  .roast-meter .knob{
    position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--cream-soft);
    border:3px solid var(--terracotta);transform:translate(-50%,-50%);box-shadow:var(--shadow-sm);
    transition:left .5s var(--bounce);
  }
  .sub-price{display:flex;align-items:baseline;gap:10px;margin-bottom:24px}
  .sub-price .p{font-family:var(--serif);font-size:2.6rem}
  .sub-price .per{font-size:13px;color:var(--brown-soft)}
  .sub-price .strike{font-size:14px;color:var(--brown-soft);text-decoration:line-through;opacity:.55}

  /* ---------- Story band ---------- */
  .story{background:var(--cream);position:relative;overflow:hidden}
  .story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
  .story-visual{position:relative;height:520px}
  .story-visual .frame{
    position:absolute;inset:0;border-radius:30px;overflow:hidden;
    background:radial-gradient(circle at 30% 20%,var(--clay-soft),var(--clay) 40%,var(--terracotta) 100%);
    box-shadow:var(--shadow);
  }
  .story-visual .frame svg{position:absolute;inset:0;width:100%;height:100%}
  .story-stat{
    position:absolute;background:var(--cream-soft);border:1px solid var(--line);border-radius:20px;
    padding:20px 24px;box-shadow:var(--shadow-sm);
  }
  .story-stat .big{font-family:var(--serif);font-size:2rem;line-height:1;color:var(--terracotta)}
  .story-stat .lbl{font-size:11px;color:var(--brown-soft);letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
  .story-stat.s1{right:-24px;top:40px}
  .story-stat.s2{left:-30px;bottom:50px}
  .story-copy h2{font-size:clamp(2.2rem,4.6vw,3.8rem);margin-bottom:26px}
  .story-copy p{font-size:16px;color:var(--brown-soft);margin-bottom:20px;max-width:520px}
  .story-sign{display:flex;align-items:center;gap:16px;margin-top:34px}
  .story-sign .sig{font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--terracotta)}
  .story-sign .who{font-size:13px;color:var(--brown-soft)}
  .story-sign .who strong{display:block;color:var(--brown);font-weight:600;font-size:14px}

  /* ---------- Stats ---------- */
  .stats{background:var(--brown);color:var(--cream);position:relative;overflow:hidden}
  .stats-bg{position:absolute;inset:0;opacity:.5;pointer-events:none}
  .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative;z-index:2}
  .stat{text-align:center;padding:30px 20px;position:relative}
  .stat:not(:last-child)::after{content:"";position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(246,237,226,.12)}
  .stat .num{font-family:var(--serif);font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--cream-soft);display:flex;align-items:baseline;justify-content:center;gap:4px}
  .stat .num .suf{font-size:.5em;color:var(--clay)}
  .stat .lbl{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,237,226,.6);margin-top:16px}

  /* ---------- CTA ---------- */
  .cta{background:var(--cream-soft);position:relative;overflow:hidden}
  .cta-card{
    background:linear-gradient(155deg,var(--terracotta) 0%,var(--terracotta-deep) 60%,#8C3E22 100%);
    border-radius:38px;padding:90px 70px;text-align:center;position:relative;overflow:hidden;
    box-shadow:var(--shadow-lg);
  }
  .cta-sun{position:absolute;left:50%;top:-40%;width:900px;height:900px;transform:translateX(-50%);
    background:radial-gradient(circle,rgba(246,237,226,.28) 0%,rgba(246,237,226,0) 55%);pointer-events:none}
  .cta-marq{overflow:hidden;margin-bottom:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .cta-marq-track{display:flex;width:max-content;animation:scrollX 26s linear infinite}
  .cta-marq-track span{font-family:var(--serif);font-style:italic;font-size:clamp(2.4rem,6vw,4.6rem);color:rgba(246,237,226,.22);padding:0 26px;white-space:nowrap}
  .cta-card h2{font-size:clamp(2.6rem,6vw,5rem);color:var(--cream-soft);position:relative;z-index:2;margin-bottom:22px;line-height:1}
  .cta-card p{color:rgba(246,237,226,.85);font-size:17px;max-width:480px;margin:0 auto 40px;position:relative;z-index:2}
  .cta-card .btn-cta{
    background:var(--cream-soft);color:var(--brown);font-family:var(--sans);font-size:15px;font-weight:600;
    padding:17px 38px;border-radius:100px;display:inline-flex;align-items:center;gap:12px;position:relative;z-index:2;overflow:hidden;
    transition:transform .4s var(--bounce);
  }
  .btn-cta span{position:relative;z-index:2;transition:color .4s ease}
  .btn-cta::before{content:"";position:absolute;inset:0;background:var(--brown);transform:translateY(101%);transition:transform .5s var(--ease)}
  .btn-cta:hover{transform:translateY(-3px)}
  .btn-cta:hover span{color:var(--cream-soft)}
  .btn-cta:hover::before{transform:translateY(0)}
  .btn-cta .arrow{position:relative;z-index:2;transition:transform .4s var(--bounce)}
  .btn-cta:hover .arrow{transform:translateX(5px)}

  /* ---------- Footer ---------- */
  .footer{background:var(--brown);color:var(--cream);padding:90px 0 40px}
  .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:50px;padding-bottom:60px;border-bottom:1px solid rgba(246,237,226,.1)}
  .foot-brand .brand{color:var(--cream-soft);margin-bottom:22px}
  .foot-brand p{font-size:14px;color:rgba(246,237,226,.6);max-width:300px;line-height:1.7;margin-bottom:26px}
  .foot-social{display:flex;gap:12px}
  .foot-social a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(246,237,226,.18);display:grid;place-items:center;transition:background .4s var(--ease),border-color .4s ease,transform .4s var(--bounce);color:rgba(246,237,226,.7)}
  .foot-social a:hover{background:var(--terracotta);border-color:var(--terracotta);transform:translateY(-3px);color:var(--cream-soft)}
  .foot-col h4{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--clay);margin-bottom:22px}
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:13px}
  .foot-col a{font-size:14px;color:rgba(246,237,226,.62);transition:color .3s ease,transform .35s var(--ease);position:relative;display:inline-block}
  .foot-col a:hover{color:var(--cream-soft);transform:translateX(6px)}
  .foot-col address{font-style:normal;font-size:14px;color:rgba(246,237,226,.62);line-height:1.8}
  .foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:34px;flex-wrap:wrap;gap:16px}
  .foot-bottom p{font-size:12px;color:rgba(246,237,226,.45);letter-spacing:.04em}
  .foot-bottom .mini{display:flex;gap:24px}
  .foot-bottom .mini a{font-size:12px;color:rgba(246,237,226,.45);transition:color .3s ease}
  .foot-bottom .mini a:hover{color:var(--cream-soft)}

  /* ---------- Responsive ---------- */
  @media(max-width:980px){
    .hero-inner{grid-template-columns:1fr;gap:10px}
    .hero-art{height:380px;order:-1}
    .story-grid,.sub-card{grid-template-columns:1fr;gap:46px}
    .sub-card{padding:44px}
    .nav-links{display:none}
    .val-grid,.prod-grid,.stats-grid,.foot-top{grid-template-columns:1fr}
    .val{border-bottom:1px solid var(--line-soft)}
    .stat:not(:last-child)::after{display:none}
    .stat:not(:last-child){border-bottom:1px solid rgba(246,237,226,.1)}
    .foot-top{gap:40px}
    .cta-card{padding:60px 28px}
    .story-stat.s1{right:0}.story-stat.s2{left:0}
  }
  @media(max-width:640px){
    .wrap{padding:0 22px}
    .sec{padding:80px 0}
    .jcard{flex:0 0 84vw}
    .prod-grid{gap:20px}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    .reveal,.reveal-clip{opacity:1!important;transform:none!important;clip-path:none!important}
    .hero h1 .line>span{transform:none!important}
    .hero-lede,.hero-actions,.hero-scroll{opacity:1!important;transform:none!important}
    .cup-arch,.cup-arch .hero-vid,.cup-stamp,.cup-cap,.hero-badge,.hero-copy>.eyebrow{opacity:1!important;transform:none!important}
    .cup-stage::before{opacity:1!important}
    .cup-sheen{display:none!important}
    .pagehero .eyebrow,.pagehero h1,.pagehero .lead{opacity:1!important;transform:none!important}
    .reveal .postmark{opacity:1!important}
    .roastbar i.on::before{transform:scaleX(1)!important}
    .preloader{display:none}
    html{scroll-behavior:auto}
  }
/* ============================================================
   SUBPAGE SYSTEM (multi-page demo)
   ============================================================ */
html:not(.intro-play) .preloader,html:not(.intro-play) .skip-pre{display:none!important}
.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--terracotta)}
.nav-links a.active::after{transform:scaleX(1);transform-origin:left}

.pagehero{position:relative;padding:clamp(116px,15vw,184px) 0 clamp(46px,7vw,82px);background:var(--cream);overflow:hidden;border-bottom:1px solid var(--line)}
.pagehero .wrap{position:relative;z-index:2}
.pagehero .eyebrow{margin-bottom:20px}
.pagehero h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,8vw,108px);line-height:1.0;letter-spacing:-.015em;color:var(--brown)}
.pagehero h1 em{font-style:italic;color:var(--terracotta)}
.pagehero .lead{max-width:560px;margin-top:24px;color:var(--brown-soft);font-size:clamp(15px,1.3vw,18px);line-height:1.75}

.dsec{padding:clamp(58px,9vw,116px) 0;position:relative}
.dsec.cream{background:var(--cream-soft)}
.dsec.brown{background:var(--brown);color:var(--cream)}
.dsec.brown h2,.dsec.brown h3,.dsec.brown h4{color:var(--cream-soft)}
.dsec.brown p{color:rgba(246,237,226,.76)}
.dsec.brown .eyebrow{color:var(--clay)}

.drow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,82px);align-items:center}
.drow+.drow{margin-top:clamp(52px,8vw,100px)}
.drow.rev .drow-media{order:2}
.drow-media{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);border-radius:16px}
.drow-media img{width:100%;height:100%;object-fit:cover}
.drow-body .eyebrow{margin-bottom:18px}
.drow-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,50px);line-height:1.05;margin-bottom:18px}
.drow-body h3 em{font-style:italic;color:var(--terracotta)}
.drow-body p{color:var(--brown-soft);line-height:1.8;max-width:48ch;margin-bottom:16px}
@media(max-width:860px){.drow{grid-template-columns:1fr}.drow.rev .drow-media{order:0}}

/* sunrise CSS-art panel (for image-free feature media) */
.dpanel{background:linear-gradient(165deg,var(--clay-soft),var(--terracotta))}
.dpanel::before{content:"";position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:48%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 42% 36%,var(--honey),var(--terracotta-deep) 72%);box-shadow:0 0 70px rgba(224,165,91,.5)}
.dpanel::after{content:"";position:absolute;left:8%;right:8%;bottom:27%;height:1.5px;background:var(--cream-soft);opacity:.45}

/* form */
.dform{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dfield{display:flex;flex-direction:column;gap:9px}
.dfield.full{grid-column:1/-1}
.dfield label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brown-soft)}
.dfield input,.dfield select,.dfield textarea{background:var(--cream-soft);border:1px solid var(--line);color:var(--ink);padding:14px 16px;font-family:var(--sans);font-size:15px;border-radius:8px}
.dfield input:focus,.dfield select:focus,.dfield textarea:focus{outline:none;border-color:var(--terracotta)}
.dfield textarea{min-height:128px;resize:vertical}
@media(max-width:680px){.dform{grid-template-columns:1fr}}

/* faq */
.dfaq{border-top:1px solid var(--line)}
.dfaq-item{border-bottom:1px solid var(--line);padding:26px 0}
.dfaq-item h4{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,27px);margin-bottom:10px}
.dfaq-item p{color:var(--brown-soft);line-height:1.75;max-width:72ch}

/* grid */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.dgrid-item{background:var(--cream);padding:clamp(28px,3.4vw,42px)}
.dsec.brown .dgrid{background:rgba(246,237,226,.13)}
.dsec.brown .dgrid-item{background:var(--brown-soft)}
.dgrid-item .snum,.dgrid-item .eyebrow{display:block;margin-bottom:14px}
.dgrid-item h4{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,27px);margin-bottom:12px}
.dgrid-item p{color:var(--brown-soft);font-size:14.5px;line-height:1.7}
@media(max-width:860px){.dgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.dgrid{grid-template-columns:1fr}}

/* reviews */
.dreviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dreview{border:1px solid var(--line);border-radius:16px;padding:30px 28px;background:var(--cream-soft);display:flex;flex-direction:column}
.dreview .stars{color:var(--honey);letter-spacing:2px;margin-bottom:16px}
.dreview blockquote{font-family:var(--serif);font-size:clamp(18px,1.5vw,22px);line-height:1.45;margin-bottom:18px;flex:1}
.dreview .who{font-size:13px;color:var(--brown);font-weight:600}
.dreview .who span{display:block;font-weight:400;color:var(--brown-soft);font-size:12px;margin-top:4px}
@media(max-width:860px){.dreviews{grid-template-columns:1fr}}

/* two-col info */
.dinfo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,76px);align-items:start}
@media(max-width:760px){.dinfo{grid-template-columns:1fr}}

/* page CTA */
.dcta{padding:clamp(76px,11vw,144px) 0;text-align:center;background:var(--terracotta);color:var(--cream-soft)}
.dcta h2{font-family:var(--serif);font-weight:400;color:var(--cream-soft);font-size:clamp(36px,5.4vw,72px);line-height:1.05;margin-bottom:20px}
.dcta h2 em{font-style:italic;color:var(--brown)}
.dcta p{color:rgba(246,237,226,.88);max-width:520px;margin:0 auto 32px;line-height:1.8}
.dcta .btn-primary{background:var(--brown);color:var(--cream-soft)}

/* ===== Shop: real product photos ===== */
.bag-stage.has-photo{height:auto;aspect-ratio:4/5;border-radius:14px;overflow:hidden;margin-bottom:24px;place-items:stretch;background:var(--cream-deep)}
.bag-stage.has-photo .bag-photo{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--bounce)}
.prod:hover .bag-stage.has-photo .bag-photo{transform:scale(1.06) rotate(2deg)}
.bag-stage.frame{height:auto;aspect-ratio:4/5;border-radius:14px;background:var(--cream-deep);margin-bottom:24px}

/* ===== Hero: macro pour video — the cup stage ===== */
/* Arch-shaped stage: a quiet nod to the Bristol railway arch the brand roasts in. */
.cup-arch{
  position:absolute;inset:0;overflow:hidden;
  border-radius:999px 999px 26px 26px;
  background:var(--cream-deep);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(34px) scale(.96);
  transition:opacity 1s ease .45s,transform 1.2s var(--ease) .45s;
}
.hero.loaded .cup-arch{opacity:1;transform:none}
.cup-arch .hero-vid{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.14);transition:transform 2.2s var(--ease) .45s;
}
.hero.loaded .cup-arch .hero-vid{transform:scale(1)}
/* offset keyline echoing the arch */
.cup-stage::before{
  content:"";position:absolute;inset:-13px;pointer-events:none;z-index:1;
  border:1.5px solid rgba(197,97,59,.32);
  border-radius:999px 999px 34px 34px;
  opacity:0;transition:opacity .9s ease 1.05s;
}
.hero.loaded .cup-stage::before{opacity:1}
/* one-shot steam-like shimmer sweeping the pour (transform/opacity only) */
.cup-sheen{
  position:absolute;top:-22%;bottom:-22%;left:0;width:44%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(251,246,239,0) 0%,rgba(251,246,239,.3) 50%,rgba(251,246,239,0) 100%);
  transform:translateX(-150%) rotate(9deg);
}
.hero.loaded .cup-sheen{animation:sheenSweep 1.6s var(--ease) 1.6s 1 forwards}
@keyframes sheenSweep{from{transform:translateX(-150%) rotate(9deg)}to{transform:translateX(360%) rotate(9deg)}}
/* caption chip inside the arch */
.cup-cap{
  position:absolute;left:16px;bottom:16px;z-index:3;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-soft);background:rgba(42,28,20,.6);
  padding:9px 14px;border-radius:100px;
  opacity:0;transform:translateY(10px);
  transition:opacity .8s ease 1.35s,transform .8s var(--ease) 1.35s;
}
.hero.loaded .cup-cap{opacity:1;transform:none}
/* rotating roast stamp overlapping the arch */
.cup-stamp{
  position:absolute;right:-16px;bottom:-12px;z-index:4;width:118px;height:118px;
  opacity:0;transform:rotate(-12deg) scale(.5);
  transition:opacity .7s ease 1.5s,transform .7s var(--bounce) 1.5s;
}
.hero.loaded .cup-stamp{opacity:1;transform:rotate(-12deg) scale(1)}
.cup-stamp .stamp-rot{animation:spinSlow 26s linear infinite;transform-origin:60px 60px}
.cup-stamp text{font-family:var(--sans);font-size:10.4px;font-weight:600;letter-spacing:2.6px;fill:#F6EDE2}
/* hero copy entrances */
.hero-copy>.eyebrow{opacity:0;transform:translateY(14px);transition:opacity .8s ease .2s,transform .8s var(--ease) .2s}
.hero.loaded .hero-copy>.eyebrow{opacity:1;transform:none}
.hero-badge{opacity:0;transform:translateY(14px) scale(.9);transition:opacity .7s ease 1.2s,transform .7s var(--bounce) 1.2s}
.hero.loaded .hero-badge{opacity:1;transform:none}

/* ============================================================
   LEVEL-UP v4 — warm craft + sharp ecommerce
   All motion added here is transform/opacity only.
   ============================================================ */

/* ---------- Pause infinite animations off-viewport ---------- */
.anim-off,.anim-off *{animation-play-state:paused!important}

/* ---------- Micro: press states ---------- */
.btn:active,.btn-cta:active,.nav-cta:active{transform:translateY(1px) scale(.97)}
.btn-ghost:active{transform:translateY(1px)}
.add-btn:active{transform:rotate(90deg) scale(.86)}
.roast-opt:active{transform:scale(.96)}
.foot-social a:active{transform:scale(.92)}

/* ---------- Micro: link underlines (legal links) ---------- */
.foot-bottom .mini a{position:relative;padding:4px 0}
.foot-bottom .mini a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.foot-bottom .mini a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Shop feel: premium card hover ---------- */
.prod.reveal{transition:transform .55s var(--bounce),box-shadow .55s var(--ease),border-color .4s ease,opacity .7s ease}
.prod-tag{transition:transform .45s var(--bounce)}
.prod:hover .prod-tag{transform:translateY(-2px) rotate(2deg) scale(1.05)}
.price{display:inline-block;transition:transform .45s var(--bounce)}
.prod:hover .price{transform:translateY(-3px) rotate(-3deg) scale(1.08)}
.pricewrap{display:flex;align-items:center;gap:10px;min-width:0}

/* add-to-bag feedback (demo only) */
.add-btn .ic{position:absolute;inset:0;display:grid;place-items:center;z-index:2;transition:opacity .25s ease,transform .45s var(--bounce)}
.add-btn .ic-check{opacity:0;transform:scale(.3) rotate(-45deg)}
.add-btn.added::before{transform:scale(1)}
.add-btn.added .ic-plus{opacity:0;transform:scale(.3) rotate(60deg)}
.add-btn.added .ic-check{opacity:1;transform:scale(1) rotate(0deg)}
.add-btn.added:hover{transform:none}
.add-btn::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--terracotta);opacity:0;pointer-events:none}
.add-btn.added::after{animation:addPulse .7s var(--ease) 1}
@keyframes addPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.65)}}

/* sampler fan-out on hover (shop) */
.fan{transform-box:fill-box;transform-origin:50% 88%;transition:transform .6s var(--bounce)}
.prod:hover .fan-l{transform:translateX(-9px) rotate(-6deg)}
.prod:hover .fan-r{transform:translateX(9px) rotate(6deg)}

/* toast */
.dawn-toast{
  position:fixed;left:50%;bottom:26px;z-index:99989;display:flex;align-items:center;gap:11px;
  background:var(--brown);color:var(--cream-soft);
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:12px 22px 12px 13px;border-radius:100px;box-shadow:var(--shadow);
  max-width:calc(100vw - 32px);pointer-events:none;
  opacity:0;transform:translate(-50%,18px) scale(.94);
  transition:opacity .35s ease,transform .5s var(--bounce);
}
.dawn-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.dawn-toast .tick{width:24px;height:24px;border-radius:50%;background:var(--terracotta);display:grid;place-items:center;flex-shrink:0}

/* ---------- Journey cards: quiet lift ---------- */
.jcard{transition:transform .5s var(--ease),border-color .4s ease}
.jcard:hover{transform:translateY(-6px);border-color:rgba(246,237,226,.24)}

/* ---------- Subpage hero entrance ---------- */
.pagehero .eyebrow,.pagehero h1,.pagehero .lead{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s var(--ease)}
.pagehero h1{transition-delay:.1s}
.pagehero .lead{transition-delay:.2s}
.pagehero.loaded .eyebrow,.pagehero.loaded h1,.pagehero.loaded .lead{opacity:1;transform:none}

/* ---------- Editorial: postmark origin stamps ---------- */
.postmark{
  position:absolute;right:20px;top:20px;z-index:2;width:106px;aspect-ratio:1;border-radius:50%;
  border:1.5px dashed rgba(51,35,26,.6);color:var(--brown);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-align:center;transform:rotate(-8deg);pointer-events:none;
}
.postmark::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(51,35,26,.35)}
.postmark strong{font-family:var(--serif);font-weight:400;font-size:15px;line-height:1;letter-spacing:.04em}
.postmark span{font-family:var(--sans);font-size:7.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;opacity:.9}
.reveal .postmark{opacity:0}
.reveal.in .postmark{opacity:1;animation:stampIn .55s var(--bounce) .5s backwards}
@keyframes stampIn{0%{opacity:0;transform:rotate(4deg) scale(1.6)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}

/* ---------- Roast-level indicator (one-shot fill on reveal) ---------- */
.roastbar{display:flex;align-items:center;gap:5px;margin:16px 0 2px}
.roastbar i{width:26px;height:7px;border-radius:6px;background:rgba(51,35,26,.1);position:relative;overflow:hidden}
.roastbar i.on::before{
  content:"";position:absolute;inset:0;border-radius:6px;
  background:linear-gradient(90deg,var(--honey),var(--terracotta));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.reveal.in .roastbar i.on::before{transform:scaleX(1)}
.reveal.in .roastbar i:nth-child(1).on::before{transition-delay:.3s}
.reveal.in .roastbar i:nth-child(2).on::before{transition-delay:.42s}
.reveal.in .roastbar i:nth-child(3).on::before{transition-delay:.54s}
.reveal.in .roastbar i:nth-child(4).on::before{transition-delay:.66s}
.reveal.in .roastbar i:nth-child(5).on::before{transition-delay:.78s}
.roastbar .rlabel{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brown-soft);opacity:.75;margin-left:7px}
.prod .roastbar{margin:0 0 16px}

/* ---------- Subscribe: the pricing moment ---------- */
.plan{display:flex;flex-direction:column}
.plan .prod-foot{margin-top:auto}
.plan-popular{border-color:rgba(197,97,59,.45);box-shadow:var(--shadow)}
.plan-popular::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--honey),var(--terracotta));z-index:3}
.plan-popular .prod-tag{background:var(--terracotta);color:var(--cream-soft)}
@media(min-width:981px){
  .plan-popular{margin-top:-14px;margin-bottom:14px}
}
.save-chip{
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--terracotta-deep);background:rgba(224,165,91,.18);border:1px solid rgba(197,97,59,.22);
  padding:4px 10px;border-radius:100px;white-space:nowrap;
  transition:transform .45s var(--bounce);
}
.prod:hover .save-chip{transform:translateY(-2px) rotate(2deg)}

/* ---------- Subscribe: roast list form ---------- */
.dfield input:focus,.dfield select:focus,.dfield textarea:focus{
  outline:none;border-color:var(--terracotta);
  box-shadow:0 0 0 4px rgba(197,97,59,.13);
}
.dfield:focus-within label{color:var(--terracotta)}
.dfield input::placeholder,.dfield textarea::placeholder{color:rgba(51,35,26,.35)}
.roastform{position:relative}
.roastform .dfield,.roastform .form-actions{transition:opacity .4s ease}
.roastform .form-actions{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.roastform .form-note{font-size:12px;color:var(--brown-soft);opacity:.7}
.roastform.sent .dfield,.roastform.sent .form-actions{opacity:.16;pointer-events:none}
.form-done{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;pointer-events:none;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease .15s,transform .6s var(--ease) .15s;
}
.roastform.sent .form-done{opacity:1;transform:none}
.form-done .ck{width:44px;height:44px;border-radius:50%;background:var(--terracotta);display:grid;place-items:center;color:var(--cream-soft)}
.form-done .big{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);color:var(--brown);line-height:1.15}
.form-done p{font-size:13px;color:var(--brown-soft)}

/* ---------- Mobile polish (375-first) ---------- */
@media(max-width:640px){
  .nav-inner{height:70px}
  .nav-cta{padding:13px 20px}
  .brand{font-size:20px;padding:6px 0}
  .brand .mark{width:34px;height:34px}
  .hero{padding:56px 0 84px}
  .hero-art{height:340px}
  .cup-stamp{width:88px;height:88px;right:-4px;bottom:-8px}
  .cup-cap{left:12px;bottom:12px;padding:8px 12px;letter-spacing:.14em}
  .hero-badge{left:2px;top:16px}
  .hero-scroll{display:none}
  .sub-card{padding:38px 24px}
  .roast-opt{padding:16px 8px}
  .foot-col a{padding:11px 0}
  .foot-col address a{padding:11px 0;display:inline-block}
  .foot-bottom .mini a{padding:13px 2px}
  .foot-social a{width:44px;height:44px}
  .skip-pre{padding:14px;bottom:14px;right:14px}
  .postmark{width:88px;right:14px;top:14px}
  .postmark strong{font-size:13px}
  .dawn-toast{bottom:18px;font-size:12px}
  .story-visual{height:440px}
  .plan-popular{margin-top:0}
}