/* ── RESET ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;overflow-x:hidden;scrollbar-width:none;background:#F8F4EC}
::-webkit-scrollbar{display:none}
html,html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
em,i,cite,address,b,strong{font-style:normal}

/* ── TOKENS ────────────────────────────────────────────────────────── */
:root{
  --cream:      #F8F4EC;
  --cream-deep: #EDE5D4;
  --cocoa:      #5C3D2E;
  --cocoa-mid:  #7A5544;
  --cocoa-lt:   rgba(92,61,46,0.55);
  --cocoa-mu:   rgba(92,61,46,0.32);
  --cocoa-fa:   rgba(92,61,46,0.09);
  --ink:        #2A1810;
  --err:        #C0533A;
  --dark:       #180E08;
  --gold:       #B8860B;
  --g:          clamp(20px,5vw,80px);
  --max:        1320px;
  --nav-h:      62px;
  --mono:       'Courier New', Courier, monospace;
}

/* ── BASE ────────────────────────────────────────────────────────── */
body{
  background:var(--cream);color:var(--ink);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--nav-h);
  font-style:normal;
}
a{text-decoration:none;color:inherit}
button{cursor:none!important;font:inherit;border:none;background:none}
a,a:hover,a:active,a:focus{cursor:none!important}
*{font-style:normal!important}

/* ── SKIP LINK ───────────────────────────────────────────────── */
.skip-link{
  position:absolute;top:-100px;left:1rem;
  background:var(--ink);color:var(--cream);
  font:700 11px/1 'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.6rem 1rem;z-index:99999;
  transition:top .15s;
  border:1px solid var(--cocoa);
}
.skip-link:focus{top:1rem;outline:2px solid var(--cream);outline-offset:2px;}

/* ── MOBILE STICKY CTA ───────────────────────────────────────── */
#mobile-cta{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:var(--ink);color:var(--cream);
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  z-index:9000;
  border-top:1px solid var(--cocoa);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
#mobile-cta.visible{transform:translateY(0)}
#mobile-cta a{
  display:flex;align-items:center;justify-content:space-between;
  color:var(--cream);text-decoration:none;
  font:700 13px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
}
#mobile-cta .mcta-price{font-size:11px;opacity:.7;letter-spacing:.06em;}
@media(max-width:768px){#mobile-cta{display:block}}
@media(max-height:500px){
  #mobile-cta{position:sticky;transform:none!important}
}

html,body{cursor:none!important}
/* ── CURSOR ────────────────────────────────────────────────────────── */
*,*::before,*::after{cursor:none!important}
a,button,[role=button]{cursor:none!important}
input,select,textarea{cursor:none!important;caret-color:var(--ink,#2A1810)}
@media(pointer:coarse){*{cursor:none!important}a,button,[role=button]{cursor:none!important}input,select,textarea{cursor:none!important;caret-color:auto!important}}
#cur-dot{
  position:fixed;top:0;left:0;width:52px;height:36px;
  background:var(--cocoa);pointer-events:none;z-index:100001;
  /* Coffee bean — asymmetric oval, wider one side like real bean anatomy */
  border-radius:52% 48% 48% 52% / 58% 58% 42% 42%;
  transform:translate(-9999px,-9999px) rotate(-25deg);
  transition:background 0ms, opacity 160ms ease;
}
#cur-ring{
  position:fixed;top:0;left:0;width:224px;height:152px;
  border:2.5px solid var(--cocoa);pointer-events:none;z-index:100000;
  /* Coffee bean ring — elongated asymmetric oval, clear bean silhouette */
  border-radius:52% 48% 48% 52% / 58% 58% 42% 42%;
  transform:translate(-9999px,-9999px) rotate(-25deg);opacity:0.6;
  transition:width .22s cubic-bezier(.16,1,.3,1),
             height .22s cubic-bezier(.16,1,.3,1),
             opacity 160ms ease,
             border-color 0ms,
             border-radius .35s cubic-bezier(.16,1,.3,1);
}
/* Text insertion cursor blink */
@keyframes textCursorBlink{
  0%,100%{opacity:1}
  50%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  @keyframes textCursorBlink{0%,100%{opacity:1}}
}

/* ── BLOOM PARTICLES ─────────────────────────────────────────────── */
/* Invented for the specific act of 93°C water meeting Kochere       */
/* Five steam wisps — each unique in timing, height, lateral drift    */
.bloom-wrap{
  position:absolute;bottom:0;left:0;right:0;height:100%;
  pointer-events:none;overflow:hidden;z-index:2;
}
.bloom-p{
  position:absolute;bottom:18%;
  width:1px;height:0;
  background:linear-gradient(to top,transparent,rgba(248,244,236,0.18),transparent);
  border-radius:1px;
  opacity:0;
  animation:bloom-rise var(--dur,6s) var(--delay,0s) infinite ease-out;
}
.bloom-p:nth-child(1){left:22%; --dur:7.2s; --delay:0s;   --h:120px; --dx:8px;}
.bloom-p:nth-child(2){left:38%; --dur:5.8s; --delay:1.4s; --h:90px;  --dx:-6px;}
.bloom-p:nth-child(3){left:52%; --dur:8.1s; --delay:0.7s; --h:145px; --dx:12px;}
.bloom-p:nth-child(4){left:66%; --dur:6.4s; --delay:2.1s; --h:80px;  --dx:-9px;}
.bloom-p:nth-child(5){left:80%; --dur:7.7s; --delay:3.3s; --h:110px; --dx:5px;}
@keyframes bloom-rise{
  0%  {height:0;    opacity:0;   transform:translateX(0)           translateY(0);}
  8%  {opacity:1;}
  60% {opacity:0.6;}
  100%{height:var(--h,100px); opacity:0; transform:translateX(var(--dx,8px)) translateY(-20px);}
}
@media(prefers-reduced-motion:reduce){.bloom-p{animation:none;}}

/* ── COORDINATE LINE ── */
.hero-coord{
  position:absolute;top:50%;left:0;right:0;
  display:flex;align-items:center;gap:0;
  pointer-events:none;z-index:3;
  opacity:0.18;
}
.hero-coord-line{flex:1;height:1px;background:var(--cream);}
.hero-coord-label{
  font:600 11px/1 'Courier New',monospace;
  letter-spacing:.18em;color:var(--cream);
  padding:0 14px;white-space:nowrap;
}

/* ── GRAIN ────────────────────────────────────────────────────────── */
#grain{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px;
}

/* ── PROGRESS ────────────────────────────────────────────────────────── */
#prog{position:fixed;top:0;left:0;width:8px;height:0;background:var(--gold);z-index:9996}
#prog-r{position:fixed;top:0;right:0;width:8px;height:0;background:var(--gold);z-index:9996}

/* ── NAV ─────────────────────────────────────────────────── */
#site-nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:200;
  padding:0 var(--g);display:flex;align-items:center;justify-content:space-between;
  background:rgba(248,244,236,0.98);border-bottom:1px solid rgba(92,61,46,0.09);
  will-change:transform;
}
#site-nav .nav-logo,
.nav-logo{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:#2A1810 !important;text-decoration:none;transition:color .2s,letter-spacing .3s cubic-bezier(.16,1,.3,1);
}
.nav-logo:hover{color:#5C3D2E !important;letter-spacing:0.28em}
#site-nav .nav-links,
.nav-links{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:0;
}
#site-nav .nav-link,
.nav-link{
  font-family:'Courier New',monospace;font-size: 14px;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#2A1810 !important;background:transparent;
  padding:7px 12px;margin:0 2px;
  border:1px solid rgba(92,61,46,0.15);
  text-decoration:none;
  transition:background .18s,color .18s,border-color .18s;
  display:inline-block;opacity:1;visibility:visible;
  white-space:nowrap;
}
#site-nav .nav-link:hover,.nav-link:hover{background:#2A1810 !important;color:#F8F4EC !important;border-color:transparent}
#site-nav .nav-link.active,.nav-link.active{background:#2A1810 !important;color:#F8F4EC !important;border-color:transparent}
#site-nav .nav-cta,
.nav-cta{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:14px;letter-spacing:0.20em;text-transform:uppercase;
  background:#2A1810;color:#F8F4EC !important;padding:11px 22px;
  text-decoration:none;margin-left:auto;margin-right:calc(var(--g) * -0.35);
  transition:background .18s;min-height:40px;line-height:1.8;display:inline-block;
}
.nav-cta:hover{background:#5C3D2E}

@media(max-width:768px){.hero-coord{opacity:0.06;}.hero-coord-label{display:none}}
@media(max-width:480px){
  .nav-links{display:none}
  .nav-cta{display:none}
}

/* ── HERO ────────────────────────────────────────────────────────── */
.hero{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--g) clamp(60px,10vh,120px);
  position:relative;overflow:hidden;
  background:var(--dark);
  background-image:url("/img/brew-hero.webp");
  background-size:cover;background-position:62% center;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(24,14,8,0.55) 0%, rgba(24,14,8,0.0) 35%),
    linear-gradient(to right, rgba(24,14,8,0.97) 0%, rgba(24,14,8,0.90) 28%, rgba(24,14,8,0.45) 55%, rgba(24,14,8,0.10) 80%, rgba(24,14,8,0.0) 100%);
  pointer-events:none;z-index:0;
}
.hero > *{position:relative;z-index:1}
.hero-wm{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;user-select:none;overflow:hidden;
}
.hero-wm-text{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(140px,28vw,520px);
  letter-spacing:-0.04em;line-height:1;
  color:rgba(248,244,236,0.09);white-space:nowrap;
  animation:driftIn 2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes driftIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
.hero-eyebrow{
  display:block;
  font-family:'Courier New',monospace;
  font-size:clamp(12px,1.2vw,16px);font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--cocoa-mid);
  margin-bottom:clamp(14px,1.8vh,22px);
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .1s both;
  opacity:1;
  position:relative;z-index:2;
}
.hero-bottom{animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .2s both;max-width:var(--max);display:flex;flex-direction:column}
.hero-headline{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(64px,10.5vw,168px);
  letter-spacing:-0.04em;line-height:0.86;
  color:rgba(248,244,236,0.94);
  margin-bottom:clamp(20px,3vh,36px);
  overflow:visible;
  padding-bottom:clamp(32px,4vh,52px);
}
.hero-headline span{
  display:block;font-weight:400;font-size:clamp(12px,1.3vw,16px);
  letter-spacing:0.28em;color:rgba(248,244,236,0.52);
  text-transform:uppercase;margin-top:clamp(20px,2.5vh,32px);
  font-family:'Courier New',monospace;
  line-height:1.6;
}
.hero-sub{
  font-size:clamp(15px,1.8vw,22px);
  color:rgba(248,244,236,0.45);
  max-width:520px;line-height:1.6;
  margin-bottom:clamp(32px,5vh,56px);
}
.hero-strip{
  display:grid;grid-template-columns:repeat(2,auto);justify-content:start;
  gap:6px;max-width:760px;
  margin-bottom:clamp(40px,6vh,60px);
}
.hs-pill{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.26em;text-transform:uppercase;
  color:rgba(248,244,236,0.90);
  background:rgba(248,244,236,0.10);
  border:1px solid rgba(248,244,236,0.14);
  border-left:3px solid rgba(248,244,236,0.38);
  padding:9px 14px 9px 13px;
  display:inline-flex;align-items:center;
}
.hs-pill.hl{
  color:#fff;
  background:var(--err);
  border-color:var(--err);
  border-left-color:rgba(0,0,0,0.18);
  font-weight:700;
}
.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-light{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;
  background:rgba(248,244,236,0.92);color:var(--dark);
  padding:17px 32px;transition:background .18s;
  display:inline-block;min-height:52px;line-height:1.4;
}
.btn-light:hover{background:var(--cream)}
.btn-ghost-dark{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(248,244,236,0.45);border:1px solid rgba(248,244,236,0.12);
  padding:16px 32px;transition:border-color .18s,color .18s;
  min-height:52px;line-height:1.4;display:inline-block;
}
.btn-ghost-dark:hover{border-color:rgba(248,244,236,0.3);color:rgba(248,244,236,0.7)}
.hero-scroll{
  position:absolute;right:var(--g);bottom:clamp(60px,10vh,100px);
  writing-mode:vertical-rl;
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.3em;text-transform:uppercase;color:rgba(248,244,236,0.2);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:fadeUp .9s cubic-bezier(.16,1,.3,1) .4s both;
}
.hero-scroll-line{width:1px;height:44px;background:rgba(248,244,236,0.12);animation:lineGrow 2s ease-in-out infinite}
@keyframes lineGrow{0%,100%{transform:scaleY(0.4);opacity:.25}50%{transform:scaleY(1);opacity:.55}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* ── TICKER ────────────────────────────────────────────────────────── */
.ticker{
  background:var(--cocoa);overflow:hidden;
  padding:16px 0;white-space:nowrap;
}
.ticker-inner{
  display:inline-flex;
  animation:tickerMove 42s linear infinite;
  will-change:transform;
}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{
  font-family:'Courier New',monospace;font-size:15px;font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(248,244,236,0.55);padding:0 44px;
}
.ticker-item.hl{color:rgba(248,244,236,0.95)}

/* ── SECTION BASE ────────────────────────────────────────────────────────── */
/* ── SHIPPING BADGE ─────────────────────────────────────────────── */


@keyframes globeSpin{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}


.section{padding:clamp(80px,12vw,160px) var(--g)}
.inner{max-width:var(--max);margin:0 auto}
.eyebrow{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.36em;text-transform:uppercase;color:var(--cocoa);
  display:block;margin-bottom:32px;
}
.h2{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(38px,5.5vw,82px);
  letter-spacing:0.01em;line-height:0.93;color:var(--ink);
  margin-bottom:24px;text-transform:uppercase;
}

/* ── TASTING NOTES ────────────────────────────────────────────────────────── */
.tasting{background:var(--cream)}
.tasting-inner{max-width:var(--max);margin:0 auto}
.tasting-header{margin-bottom:clamp(60px,8vw,100px)}
.tasting-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,12px);
}
@media(max-width:860px){.tasting-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tasting-grid{grid-template-columns:1fr}}
.tasting-note{
  background:var(--cream-deep);
  padding:clamp(40px,5vw,72px) clamp(28px,3vw,44px);
  border:1px solid var(--cocoa-fa);
  transition:background .2s,transform .2s;
  position:relative;overflow:hidden;
}
.tasting-note:hover{background:var(--cream);transform:translateY(-2px)}
.tn-num{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(60px,8vw,120px);
  letter-spacing:-0.05em;line-height:0.85;
  color:rgba(92,61,46,0.055);
  position:absolute;bottom:-10px;right:16px;
  pointer-events:none;user-select:none;
}
.tn-name{
  font-family:'Fraunces','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;
  font-style:italic;
  font-variation-settings:'opsz' 72,'WONK' 1;
  font-size:clamp(28px,3vw,48px);
  letter-spacing:-0.02em;line-height:0.9;
  color:var(--ink);margin-bottom:12px;
}
.tn-type{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.3em;text-transform:uppercase;
  color:var(--cocoa-mu);line-height:1.8;
}
.tn-when{
  font-family:'Courier New',monospace;font-size:12px;font-weight:400;
  letter-spacing:0.04em;line-height:1.55;
  color:var(--cocoa-mu);opacity:0.72;
  margin-top:16px;padding-top:16px;
  border-top:1px solid var(--cocoa-fa);
}
.tasting-certs{
  display:flex;flex-wrap:wrap;gap:2px;margin-top:clamp(40px,5vw,64px);
}
.cert-tag{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--cocoa);background:var(--cocoa-fa);
  border:1px solid rgba(92,61,46,0.1);
  padding:10px 18px;
}

/* ── PRODUCT ────────────────────────────────────────────────────────── */


/* ── SOURCE ────────────────────────────────────────────────────────── */
.source{
  background:var(--ink);
  position:relative;overflow:hidden;
  background-image:url('../assets/ethiopia-highlands.webp');
  background-size:cover;
  background-position:60% 40%;
}
.source::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(
      to right,
      rgba(18,8,4,0.97) 0%,
      rgba(18,8,4,0.92) 30%,
      rgba(18,8,4,0.60) 58%,
      rgba(18,8,4,0.12) 80%,
      rgba(18,8,4,0.00) 100%
    );
}
.source::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(248,244,236,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,244,236,0.025) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 75%);
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 75%);
}
.source-inner{
  max-width:var(--max);margin:0 auto;position:relative;z-index:1;
}
.source-headline{
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(52px,8vw,130px);
  letter-spacing:-0.04em;line-height:0.88;
  color:rgba(248,244,236,0.92);
  text-transform:uppercase;
  margin-bottom:clamp(40px,5vh,72px);
  max-width:65%;
}
.source-headline span{
  display:block;font-weight:200;font-size:clamp(12px,1.4vw,18px);
  letter-spacing:0.26em;color:rgba(248,244,236,0.28);
  text-transform:uppercase;font-family:'Courier New',monospace;
  margin-top:20px;
}
.source-grid{
  display:grid;grid-template-columns:1fr 1px 1fr;gap:0;
  border-top:1px solid rgba(248,244,236,0.07);
  max-width:65%;
}
@media(max-width:760px){.source-grid{grid-template-columns:1fr;max-width:100%}}
.source-divider{background:rgba(248,244,236,0.05)}
.source-col{padding:clamp(48px,6vw,80px) 0}
.source-col:first-child{padding-right:clamp(32px,4vw,64px)}
.source-col:last-child{padding-left:clamp(32px,4vw,64px)}
.sc-label{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.34em;text-transform:uppercase;
  color:var(--cocoa-mid);display:block;margin-bottom:20px;
}
.sc-title{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(28px,3.5vw,52px);
  letter-spacing:-0.03em;line-height:0.9;
  color:rgba(248,244,236,0.85);margin-bottom:20px;
}
.sc-text{
  font-size:clamp(14px,1.6vw,17px);
  color:rgba(248,244,236,0.52);line-height:1.78;
}
.source-stats{
  display:flex;gap:clamp(28px,4vw,56px);flex-wrap:wrap;
  margin-top:clamp(48px,6vw,80px);
  padding-top:clamp(32px,4vw,48px);
  border-top:1px solid rgba(248,244,236,0.07);
  max-width:65%;
}
@media(max-width:760px){.source-stats{max-width:100%}}
.ss-val{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(28px,4vw,52px);
  letter-spacing:-0.04em;line-height:0.9;
  color:rgba(248,244,236,0.85);display:block;
}
.ss-key{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(248,244,236,0.25);margin-top:6px;display:block;
}

/* ── BREW METHOD ────────────────────────────────────────────────────────── */

/* image panel — left 52%, natural height */

/* gradient: image fades to cream on right edge only */

/* right content column */


/* steps: open rows, right-aligned, no cards */


/* ── WHY ────────────────────────────────────────────────────────── */
/* ── SIX REASONS — consolidated section ──────────────────────────── */


/* Hero item spans all 4 columns */

/* The 4 bottom items sit in one row */


/* first non-hero item has no left padding, others get some */

/* last item no right border */


/* ── YCFCU hero card — full-width, horizontal layout ── */


/* ── ORDER ────────────────────────────────────────────────────────── */
.order{background:var(--dark);position:relative;overflow:hidden}
.order::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(248,244,236,0.028) 1px,transparent 1px),linear-gradient(90deg,rgba(184,134,11,0.12) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.6) 20%,rgba(0,0,0,0.6) 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.6) 20%,rgba(0,0,0,0.6) 100%);
  pointer-events:none;z-index:0;
}
.order-inner{
  position:relative;z-index:1;
  max-width:var(--max);margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto;
  gap:0 clamp(48px,6vw,100px);
  align-items:start;
}
.order-left{
  grid-column:1;
  grid-row:1 / 4;
  display:flex;flex-direction:column;
  border-right:1px solid rgba(248,244,236,0.06);
  padding-right:clamp(48px,6vw,100px);
}
.order-right{
  grid-column:2;
  grid-row:1 / 4;
  display:flex;flex-direction:column;
  padding-top:clamp(4px,0.5vw,8px);
}
.order-eyebrow{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.36em;text-transform:uppercase;color:var(--cocoa-mid);
  display:block;margin-bottom:24px;
  padding-top:clamp(20px,3vw,32px);
  border-top:1px solid rgba(248,244,236,0.07);
}
.order-h2{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(64px,9vw,140px);
  letter-spacing:-0.02em;line-height:0.86;
  color:rgba(248,244,236,0.92);
  text-transform:uppercase;
  margin-bottom:clamp(12px,2vw,20px);
}
.order-sub{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.52);
  margin-bottom:clamp(28px,3.5vw,44px);
  line-height:1.9;
}
/* Quantity strip — 4 tiles in a horizontal row */
.qty-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(248,244,236,0.06);
  border:1px solid rgba(248,244,236,0.06);
  margin-bottom:clamp(32px,4vw,52px);
}
.qty-card{
  background:var(--dark);
  padding:clamp(20px,2.5vw,32px) clamp(12px,1.5vw,20px);
  transition:background .18s,border-color .18s;
  position:relative;overflow:hidden;cursor:none;
  display:flex;flex-direction:column;align-items:flex-start;
}
.qty-card:hover{background:rgba(248,244,236,0.05)}
.qty-card.selected{background:rgba(92,61,46,0.22)}
.qty-card.selected::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--cocoa-mid);
}
.qty-tag{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.52);margin-bottom:10px;display:block;
}
.qty-card.selected .qty-tag{color:var(--cocoa-mid)}
.qty-num{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(28px,3.5vw,52px);
  letter-spacing:-0.04em;line-height:0.88;
  color:rgba(248,244,236,0.88);display:block;margin-bottom:8px;
}
.qty-price{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:clamp(12px,1.4vw,18px);
  letter-spacing:-0.01em;
  color:rgba(248,244,236,0.42);
}
.qty-per{display:none}
/* Value callout under the grid */
.order-value{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(248,244,236,0.55);
  line-height:2;
  margin-bottom:0;
  padding-top:clamp(20px,2.5vw,28px);
  border-top:1px solid rgba(248,244,236,0.06);
}
/* Right col — form */
/* WHY €1 SECTION */


@media(max-width:900px){
  
}
@media(max-width:540px){
  
}
.order-form{width:100%;text-align:left}
.form-row{margin-bottom:10px}
.form-row label{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(248,244,236,0.28);display:block;margin-bottom:6px;
}
.form-row input,.form-row select{
  width:100%;background:rgba(248,244,236,0.04);
  border:1px solid rgba(248,244,236,0.08);
  color:rgba(248,244,236,0.85);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:14px;padding:14px 16px;
  outline:none;transition:border-color .2s,background .2s;
  -webkit-appearance:none;appearance:none;border-radius:0;
  caret-color:rgba(248,244,236,0.85);
}
.form-row input:focus,.form-row select:focus{
  border-color:rgba(92,61,46,0.55);background:rgba(248,244,236,0.07);
}
.form-row input::placeholder{color:rgba(248,244,236,0.2)}
.form-row select option{background:var(--dark);color:var(--cream)}
.form-note{
  font-family:'Courier New',monospace;font-size:11px;font-weight:600;
  letter-spacing:0.26em;text-transform:uppercase;
  color:rgba(248,244,236,0.55);margin-bottom:24px;line-height:2;
  padding-bottom:20px;
  border-bottom:1px solid rgba(248,244,236,0.06);
  text-align:right;
}
.btn-order{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
  background:rgba(92,61,46,0.9);color:rgba(248,244,236,0.95);
  padding:20px 40px;border:none;min-height:56px;
  display:block;width:100%;text-align:center;
  cursor:none;
  border:1px solid rgba(92,61,46,0.6);
  position:relative;overflow:hidden;
  transition:color .28s ease, letter-spacing .28s ease;
}
.btn-order::before {
  content:'';
  position:absolute;inset:0;
  background:var(--ink);
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(0.45,0,0.15,1);
  z-index:0;
}
@media (hover:hover) {
  .btn-order:hover::before { transform:translateY(0); }
  .btn-order:hover { letter-spacing:0.30em; }
}
.btn-order:disabled{opacity:0.4;pointer-events:none}
#order-msg{
  margin-top:14px;
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  min-height:18px;line-height:1.8;
}
#order-msg.ok{color:var(--cocoa-mid)}
#order-msg.err{color:var(--err)}
/* Order responsive */
@media(max-width:800px){
  .order-inner{grid-template-columns:1fr;gap:clamp(40px,6vw,60px) 0}
  .order-left{grid-column:1;grid-row:1;border-right:none;padding-right:0;border-bottom:1px solid rgba(248,244,236,0.06);padding-bottom:clamp(40px,6vw,60px)}
  .order-right{grid-column:1;grid-row:2}
  .qty-grid{grid-template-columns:repeat(4,1fr)}
}

/* ── FOOTER ────────────────────────────────────────────────────────── */
footer{
  background:var(--dark);color:rgba(248,244,236,0.4);
  padding:clamp(40px,6vw,60px) var(--g) clamp(32px,5vw,52px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  border-top:1px solid rgba(248,244,236,0.04);
  position:relative;overflow:hidden;
}
footer::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(248,244,236,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,244,236,0.028) 1px, transparent 1px);
  background-size:80px 80px;
  pointer-events:none;z-index:0;
}
.footer-links,.footer-logo,.footer-copy{position:relative;z-index:1;background:transparent!important;}
.footer-logo{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:12px;letter-spacing:0.32em;text-transform:uppercase;
  color:rgba(248,244,236,0.5);
}
.footer-links{background:transparent !important;background-color:transparent !important;display:flex;flex-wrap:wrap;gap:4px 0}
.footer-link{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.25);padding:4px 14px;
  border-right:1px solid rgba(248,244,236,0.08);
  transition:color .18s;
}
.footer-link:last-child{border-right:none}
.footer-link:hover{color:rgba(248,244,236,0.7)}
.footer-copy{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.18);background:transparent;
  width:100%;text-align:center;padding-top:16px;
  border-top:1px solid rgba(248,244,236,0.04);
}


/* ── BTN GHOST PALE (dark backgrounds) ─────────────────────────────── */
.btn-ghost-pale{
  color:rgba(248,244,236,0.45)!important;
  border-color:rgba(248,244,236,0.15)!important;
}
.btn-ghost-pale:hover{
  color:rgba(248,244,236,0.8)!important;
  border-color:rgba(248,244,236,0.35)!important;
}

/* ── REVEAL ────────────────────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}

/* ── MOBILE NAV ─────────────────────────────────────────────────── */
.nav-hamburger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  width:44px;height:44px;gap:6px;
  background:none;border:none;padding:4px;
  -webkit-tap-highlight-color:transparent;
}
.nav-hamburger span{
  display:block;width:22px;height:1.5px;background:var(--ink);
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s,width .2s;
  transform-origin:center;
}
.nav-hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;width:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.nav-drawer{
  position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
  background:var(--cream);
  padding:clamp(32px,6vw,56px) var(--g) clamp(32px,6vw,56px);
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateX(100%);opacity:0;pointer-events:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s;
  z-index:199;overflow-y:auto;overscroll-behavior:none;
}
.nav-drawer.open{transform:translateX(0);opacity:1;pointer-events:auto}
.nav-drawer-links{display:flex;flex-direction:column;gap:0}
.nav-drawer-link{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(40px,10vw,64px);
  letter-spacing:-0.04em;line-height:0.95;color:var(--ink);
  padding:16px 0;border-bottom:1px solid var(--cocoa-fa);
  transition:color .18s,padding-left .18s;display:block;
  -webkit-tap-highlight-color:transparent;
}
.nav-drawer-link:active{color:var(--cocoa);padding-left:8px}
.nav-drawer-link:last-of-type{border-bottom:none}
.nav-drawer-bottom{
  padding-top:32px;
  display:flex;flex-direction:column;gap:16px;
}
.nav-drawer-sub{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--cocoa-mu);line-height:1.8;
}
.nav-drawer-cta{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:12px;letter-spacing:0.20em;text-transform:uppercase;
  background:var(--ink);color:var(--cream);
  padding:18px 32px;display:inline-block;
  transition:background .18s;align-self:flex-start;
  -webkit-tap-highlight-color:transparent;
}
.nav-drawer-cta:active{background:var(--cocoa)}

@media(max-width:480px){
  #site-nav .nav-links,
.nav-links{display:none}
  .nav-hamburger{display:flex}
  #site-nav .nav-cta,
.nav-cta{display:none}
}

/* ── TABLET (720px) ─────────────────────────────────────────────────── */
@media(max-width:720px){
  :root{--nav-h:56px}
  .section{padding:clamp(60px,10vw,100px) var(--g)}
}

/* ── MOBILE (480px) ─────────────────────────────────────────────────── */
@media(max-width:480px){
  /* iOS form zoom fix */
  input,select,textarea{font-size:16px!important}

  /* No custom cursor on touch */
  .hero-scroll{display:none}

  /* Brew hero — full-bleed, legible on small screens */
  .hero{padding-bottom:clamp(40px,8vh,80px);padding-top:clamp(80px,14vh,120px)}
  .hero-headline{font-size:clamp(52px,16vw,80px);line-height:0.86}
  .hero-headline span{font-size:clamp(12px,3vw,15px);letter-spacing:0.28em;margin-top:16px}
  .hero-sub{font-size:clamp(15px,4vw,18px);line-height:1.55;margin-bottom:24px;max-width:100%}
  .hero-decree{font-size:11px;letter-spacing:0.18em;line-height:1.9;margin-bottom:16px}
  .hero-products{max-width:100%;gap:2px}

  /* Pill strip — wrap nicely, more readable */
  .hero-strip{gap:3px;margin-bottom:clamp(28px,5vh,44px)}
  .hs-pill{font-size:12px;padding:10px 16px;letter-spacing:0.16em}

  /* CTA buttons */
  .btn-light{font-size:12px;padding:15px 22px;min-height:48px}
  .btn-ghost-dark{font-size:12px;padding:15px 22px;min-height:48px}
  .hero-cta-row{flex-direction:column;gap:8px;width:100%}

  /* Product cards (not used on brew hero but included for consistency) */
  .hero-product{padding:24px 20px}
  .hp-name{font-size:clamp(32px,9vw,48px)}
  .hp-stats{gap:16px}
  .hp-stat-val{font-size:clamp(18px,5vw,26px)}

  /* Philosophy */
  .phil-quote{font-size:clamp(24px,7.5vw,38px);line-height:0.95}
  .phil-text{font-size:14px}

  /* Footer */
  footer{flex-direction:column;align-items:flex-start;gap:16px;padding:40px var(--g)}
  .footer-links{background:transparent !important;flex-direction:column;gap:0;width:100%}
  .footer-link{border-right:none;border-bottom:1px solid rgba(248,244,236,0.06);padding:10px 0;font-size:12px;letter-spacing:0.16em}
  .footer-link:last-child{border-bottom:none}
  .footer-copy{text-align:left;padding-top:20px;font-size:11px}

  /* Ticker — slower on mobile, taller */
  .ticker-inner{animation-duration:55s}
  .ticker{padding:14px 0}

  /* Buttons — full width on mobile */
  .btn-primary,.btn-ghost,.btn-light,.btn-cream{width:100%;text-align:center;justify-content:center}
}

/* ── SMALL MOBILE (380px) ─────────────────────────────────────────────── */
@media(max-width:380px){
  .hero-headline{font-size:clamp(44px,14vw,64px)}
  .hp-name{font-size:clamp(28px,8.5vw,40px)}
}

/* ── BREW — MOBILE SPECIFIC ─────────────────────────────────────── */
@media(max-width:480px){
  .tasting-note{padding:28px 20px}
  .tn-name{font-size:clamp(24px,7vw,36px)}
  
  
  .source-headline{font-size:clamp(44px,13vw,72px)}
  .sc-title{font-size:clamp(24px,7vw,36px)}
  .source-stats{gap:20px}
  .ss-val{font-size:clamp(26px,7.5vw,40px)}
  
  
  
  .pillars{grid-template-columns:1fr}
  .pillars-divider{display:none}
  .pillar-col:first-child .pillar{padding-right:0}
  .pillar-col:last-child .pillar{padding-left:0}
  .pillar{padding-top:28px;padding-bottom:28px}
  .pillar-title{font-size:clamp(18px,5.5vw,28px)}
  .qty-grid{gap:1px;grid-template-columns:repeat(2,1fr)}
  .qty-card{padding:16px 10px}
  .qty-num{font-size:clamp(24px,7vw,40px)}
  .order-h2{font-size:clamp(56px,14vw,90px)}
}

/* ── CRAFT REFINEMENTS ──────────────────────────────────────────────── */

/* Smooth page entry */
@keyframes bodyShow{from{opacity:0}to{opacity:1}}
body:not(.ready){animation:bodyShow .5s .1s both}
body.ready{animation:none;opacity:1}

/* Nav — subtle border appears on scroll */
nav{transition:border-color .3s,box-shadow .3s}
nav.scrolled{border-bottom-color:rgba(92,61,46,0.14);box-shadow:0 1px 24px rgba(42,24,16,0.06)}

/* Hero product cards — equal height via flex */
.hero-products{align-items:stretch}

/* Ticker — pause on hover */
.ticker:hover .ticker-inner{animation-play-state:paused}

/* Reveal — stagger children automatically when parent is .reveal-group */
.reveal-group .reveal:nth-child(1){transition-delay:0s}
.reveal-group .reveal:nth-child(2){transition-delay:.08s}
.reveal-group .reveal:nth-child(3){transition-delay:.16s}
.reveal-group .reveal:nth-child(4){transition-delay:.24s}

/* Selection color */
::selection{background:var(--cocoa);color:var(--cream)}
::-moz-selection{background:var(--cocoa);color:var(--cream)}

/* Focus visible — keyboard nav accessibility */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--cocoa);
  outline-offset:3px;
}

/* Dark sections: cocoa outline is invisible — switch to cream */
[data-dark] a:focus-visible,
[data-dark] button:focus-visible,
[data-dark] input:focus-visible,
[data-dark] select:focus-visible,
[data-dark] textarea:focus-visible {
  outline: 2px solid rgba(248,244,236,0.7);
  outline-offset: 3px;
}

/* Reduce motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  body:not(.ready){animation:none;opacity:1}
}

/* Print — hide decorative elements */
@media print{
  #grain,#prog,#prog-r,#cur-dot,#cur-ring,nav,.ticker{display:none!important}
  body{padding-top:0}
}

/* ── FINAL POLISH ──────────────────────────────────────────── */

/* Nav logo hover handled in main nav block above */

/* Hero product cards — lift on hover desktop */
@media(hover:hover){
  .hero-product{transition:background .2s,border-color .2s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
  .hero-product:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(42,24,16,0.08)}
}

/* Drawer links — stagger in when drawer opens */
.nav-drawer.open .nav-drawer-link:nth-child(1){transition-delay:.04s}
.nav-drawer.open .nav-drawer-link:nth-child(2){transition-delay:.08s}
.nav-drawer.open .nav-drawer-link:nth-child(3){transition-delay:.12s}
.nav-drawer.open .nav-drawer-link:nth-child(4){transition-delay:.16s}
.nav-drawer-link{
  opacity:0;transform:translateX(16px);
  transition:color .18s,padding-left .18s,opacity .3s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-drawer.open .nav-drawer-link{opacity:1;transform:translateX(0)}

/* Scroll progress — rounded cap */
#prog{border-radius:0 1px 1px 0}
#prog-r{border-radius:1px 0 0 1px}

/* Order form inputs — focus ring matches brand */
.form-row input:focus,.form-row select:focus{
  outline:none;
  border-color:var(--cocoa)!important;
  box-shadow:0 0 0 3px rgba(92,61,46,0.12);
}
.form-row input:focus-visible,.form-row select:focus-visible{
  outline:2px solid var(--cocoa);
  outline-offset:2px;
  border-color:var(--cocoa)!important;
  box-shadow:0 0 0 3px rgba(92,61,46,0.18);
}

/* Brew qty cards — hover lift */
@media(hover:hover){
  .qty-card{transition:background .18s,border-color .18s,transform .2s cubic-bezier(.16,1,.3,1)}
  .qty-card:hover{transform:translateY(-2px)}
}

/* Ingredient/origin/tasting items — consistent hover across all pages */
@media(hover:hover){
  .ing-col,.tasting-note,.pillar,.who-col{
    transition:background .2s,transform .2s cubic-bezier(.16,1,.3,1);
  }
  .ing-col:hover,.tasting-note:hover,.pillar:hover,.who-col:hover{
    transform:translateY(-2px);
  }
}


/* Mobile — ensure drawer CTA is always full width */
@media(max-width:720px){
  .nav-drawer-cta{width:100%;text-align:center;align-self:stretch}
}

/* ── SCREENSHOT FIXES ──────────────────────────────────────────────── */


/* Fix 8: Order form — Connecting state button needs cocoa bg */
.btn-order[disabled]{
  background:var(--cocoa-mid);
  opacity:1;
}

/* Fix 9: Who-col icon display tweak (images 8-9) — wc-icon too light */
.wc-icon{color:rgba(92,61,46,0.15)}

/* Fix 10: Source col padding on left side (brew image 16) */
@media(max-width:760px){
  .source-col:first-child{padding-right:0}
  .source-col:last-child{padding-left:0}
}

/* ── COOKIE CONSENT — Content AC-03 ─────────────────────────── */
/* Same voice as the rest: states what it does, trusts the reader */
#cookie-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--ink);color:var(--cream);
  border-top:1px solid rgba(92,61,46,0.4);
  padding:14px 24px calc(14px + env(safe-area-inset-bottom));
  z-index:9999;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  font-family:'Helvetica Neue',Arial,sans-serif;
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
#cookie-bar.visible{transform:translateY(0)}
/* Push mobile CTA above cookie bar when both visible */
body.cookie-visible #mobile-cta{bottom:var(--cookie-h,80px);}

/* ── DESKTOP ORDER BANNER ───────────────────────────────────────── */
#desk-banner{
  display:none; /* mobile: never shown */
}
@media(hover:hover) and (min-width:769px){
  #desk-banner{
    display:block;
    position:fixed;
    right:clamp(20px,2.5vw,36px);
    bottom:clamp(20px,2.5vw,36px);
    width:148px;
    height:148px;
    background:var(--ink);
    border:1px solid var(--cocoa);
    z-index:8000;
    pointer-events:none;
    opacity:0;
    transform:translateY(16px) scale(0.96);
    transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  }
  #desk-banner.visible{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .desk-banner-link{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
    width:100%;height:100%;
    padding:16px 18px;
    color:var(--cream);text-decoration:none;
    position:relative;
    overflow:hidden;
  }
  .desk-banner-link::before{
    content:'';
    position:absolute;inset:0;
    background:var(--cocoa);
    transform:scaleY(0);transform-origin:bottom;
    transition:transform .32s cubic-bezier(.16,1,.3,1);
  }
  .desk-banner-link:hover::before{transform:scaleY(1);}
  .desk-banner-label{
    font-family:'Courier New',monospace;
    font-size: 12px;font-weight:600;
    letter-spacing:0.28em;text-transform:uppercase;
    color:rgba(248,244,236,0.42);
    position:relative;z-index:1;
    margin-bottom:auto;
  }
  .desk-banner-cta{
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight:900;font-size:17px;
    letter-spacing:-0.02em;line-height:1;
    color:var(--cream);
    position:relative;z-index:1;
    margin-bottom:6px;
    transition:letter-spacing .2s;
  }
  .desk-banner-link:hover .desk-banner-cta{letter-spacing:0.02em;}
  .desk-banner-sub{
    font-family:'Courier New',monospace;
    font-size: 11px;font-weight:600;
    letter-spacing:0.22em;text-transform:uppercase;
    color:rgba(248,244,236,0.38);
    position:relative;z-index:1;
    transition:color .2s;
  }
  .desk-banner-link:hover .desk-banner-sub{color:rgba(248,244,236,0.65);}
}
#cookie-bar p{
  font-size:12px;letter-spacing:.06em;line-height:1.5;
  color:rgba(248,244,236,0.75);margin:0;flex:1;min-width:200px;
}
#cookie-bar p strong{color:var(--cream);font-weight:700;}
.cookie-btns{display:flex;gap:8px;flex-shrink:0;}
.cookie-btn{
  font:700 11px/1 'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
  padding:9px 16px;border:1px solid rgba(92,61,46,0.5);
  background:transparent;color:var(--cream);
  cursor:none!important;
  transition:background .2s,border-color .2s;
}
.cookie-btn:hover{background:var(--cocoa);border-color:var(--cocoa);}
.cookie-btn.primary{background:var(--cocoa-mid);border-color:var(--cocoa-mid);}
.cookie-btn.primary:hover{background:var(--cocoa);border-color:var(--cocoa);}
@media(max-width:600px){
  #cookie-bar{flex-direction:column;align-items:flex-start;}
  .cookie-btns{width:100%;}
  .cookie-btn{flex:1;text-align:center;}
}

/* ── PAYMENT TRUST BLOCK ──────────────────────────────────────── */
.trust-block{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(248,244,236,0.08);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
}
.trust-item{
  padding:0 10px;
  border-right:1px solid rgba(248,244,236,0.08);
  text-align:center;
}
.trust-item:first-child{padding-left:0;text-align:left;}
.trust-item:last-child{border-right:none;padding-right:0;text-align:right;}
.trust-val{
  display:block;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;
  font-size:clamp(13px,1.3vw,16px);
  letter-spacing:-0.02em;
  color:var(--cream);
  line-height:1;
  margin-bottom:5px;
}
.trust-label{
  display:block;
  font-family:'Courier New',monospace;
  font-size:8.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(248,244,236,0.36);
  line-height:1.4;
}
.trust-sub{
  margin-top:12px;
  font-family:'Courier New',monospace;
  font-size: 11px;
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:rgba(248,244,236,0.26);
  line-height:1.6;
}
@media(max-width:480px){
  .trust-block{grid-template-columns:1fr;gap:12px;}
  .trust-item,.trust-item:first-child,.trust-item:last-child{
    padding:0;border-right:none;text-align:left;
    border-bottom:1px solid rgba(248,244,236,0.08);
    padding-bottom:12px;
  }
  .trust-item:last-child{border-bottom:none;padding-bottom:0;}
}

/* ── Live form validation states ─────────────────────────────────── */
.form-row input.field-ok,
.form-row select.field-ok {
  border-color: rgba(120, 160, 90, 0.55) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(120,180,90,0.8)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 14px) center;
  background-size: 14px;
  padding-right: 38px;
  transition: border-color 0.25s ease;
}
.form-row input.field-error,
.form-row select.field-error {
  border-color: rgba(200, 80, 60, 0.55) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(220,80,60,0.8)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 14px) center;
  background-size: 14px;
  padding-right: 38px;
  transition: border-color 0.25s ease;
}

/* ── Watermark text — Helvetica Neue (tight, architectural) ─────── */
.hero-wm-text {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-variation-settings: normal;
  letter-spacing: -0.06em;
}
.btn-order > span { position:relative; z-index:1; }

/* ── Hero headline clip-mask wipe (matches home page) ──────────────
   GSAP drives the actual animation. This is the base state.          */
.hero-headline .hl-clip {
  display: block;
  overflow: hidden;
  line-height: 0.88;
  padding-bottom: 0.06em;
}
.hero-headline .hl-inner {
  display: block;
  transform: translateY(108%);
  opacity: 0;
  will-change: transform, opacity;
}
.hero-headline .hl-sub {
  display: block;
  font-weight: 300;
  font-size: clamp(13px, 1.3vw, 17px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--cocoa-lt);
  margin-top: clamp(18px, 2.5vh, 28px);
  /* Preloader/GSAP handles entry animation — start visible as safe fallback */
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion:reduce) {
  .hero-headline .hl-inner,
  .hero-headline .hl-sub {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   STATEMENT HERO — OUR DAILY BREW.
   Full-viewport typographic monument. Helvetica Neue, wall-to-wall.
   ═══════════════════════════════════════════════════════════════════ */


/* Subtle grid atmosphere */


/* Brew: warm gold glow from below-right */


/* Eyebrow line */


/* The headline */


/* "OUR DAILY" */


/* "BREW." — wall-to-wall, warm coffee-amber gradient */


/* Reveals */


/* Footer sub-copy */


/* Bottom rule */


/* Mobile */


/* ═══════════════════════════════════════════════
   CLOSED BATCH — ORDER SECTION OVERRIDES
   ═══════════════════════════════════════════════ */

/* Dimmed, non-interactive qty cards */
.qty-grid--closed { pointer-events: none; }
.qty-card--closed {
  opacity: 0.28;
  filter: grayscale(0.5);
  cursor:none!important;
  border-color: rgba(248,244,236,0.08) !important;
}
.qty-card--closed.selected,
.qty-card--closed:focus { box-shadow: none; outline: none; }

/* Closed order form container */
.order-form--closed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem 2rem;
}

/* Freshness seal — circular SVG badge */
.freshness-seal { display: flex; flex-direction: column; align-items: center; }
.freshness-ring {
  position: relative;
  width: 160px;
  height: 160px;
}
.freshness-arc {
  width: 160px;
  height: 160px;
  animation: sealSpin 20s linear infinite;
  transform-origin: center;
}
@keyframes sealSpin { to { transform: rotate(360deg); } }
.arc-text {
  font-family: 'Courier New', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  fill: rgba(184,134,11,0.7);
  text-transform: uppercase;
}
.freshness-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.freshness-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.freshness-days {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--cream, #F8F4EC);
  text-align: center;
}
.freshness-days small {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  font-weight: 400;
  opacity: 0.6;
  margin-top: 0.1rem;
}

/* Batch notice block */
.batch-notice {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.batch-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(184,134,11,0.1);
  border: 1px solid rgba(184,134,11,0.25);
  border-radius: 99px;
  padding: 0.35rem 0.9rem;
  width: fit-content;
}
.batch-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B8860B;
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
.batch-badge-label {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B8860B;
}
.batch-headline {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.1;
  color: var(--cream, #F8F4EC);
  margin: 0;
}
.batch-body {
  font-family: 'Courier New', monospace;
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: rgba(248,244,236,0.65);
  margin: 0;
}
.batch-email-row {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}
.batch-email-row input[type="email"] {
  flex: 1;
  background: rgba(248,244,236,0.06);
  border: 1px solid rgba(248,244,236,0.2);
  border-radius: 4px;
  color: var(--cream, #F8F4EC);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.2s;
}
.batch-email-row input[type="email"]:focus {
  border-color: rgba(184,134,11,0.7);
}
.batch-email-row input[type="email"]::placeholder { opacity: 0.4; }
.batch-notify-btn {
  background: #B8860B;
  color: #1A0C00;
  border: none;
  border-radius: 4px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.75rem 1.2rem;
  cursor:none!important;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.batch-notify-btn:hover { opacity: 0.85; }
.batch-confirmed {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #B8860B;
  padding: 0.75rem 0;
}
.batch-note {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.3);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   TASTING SECTION — EDITORIAL DECOMPRESSION
   Transparent cards, air-based grid, borders stripped, type leads
   ══════════════════════════════════════════════════════════════════ */

/* More section padding */
.tasting {
  padding: clamp(120px, 16vw, 200px) var(--g) !important;
}
.tasting-inner { padding: 0; }

/* Header — more air below */
.tasting-header {
  margin-bottom: clamp(80px, 10vw, 140px) !important;
}

/* Grid: generous gap, no box borders */
.tasting-grid {
  gap: 0 clamp(48px, 6vw, 96px) !important;
}

/* Cards: transparent, no background boxes, just a top rule */
.tasting-note {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(92,61,46,0.12) !important;
  padding: clamp(40px, 5vw, 64px) 0 !important;
  transform: none !important;
  transition: none !important;
}
.tasting-note:hover {
  background: transparent !important;
  transform: none !important;
}

/* tn-when border — lighten to match new open feel */
.tn-when {
  border-top: 1px solid rgba(92,61,46,0.08) !important;
}

/* Certs strip — more space above, no tile borders */
.tasting-certs {
  margin-top: clamp(60px, 8vw, 100px) !important;
  border-top: 1px solid rgba(92,61,46,0.1) !important;
  padding-top: clamp(32px, 4vw, 56px) !important;
  gap: 6px !important;
}
.cert-tag {
  background: transparent !important;
  border: 1px solid rgba(92,61,46,0.15) !important;
}

/* ══════════════════════════════════════════════════════════════════
   MANIFESTO SECTION (BREW)
   Editorial bridge: large copy, three altitude numbers, one CTA.
   Dark treatment — continuous from photo hero.
   ══════════════════════════════════════════════════════════════════ */
.manifesto {
  padding: clamp(100px, 13vw, 180px) var(--g);
  background: var(--cream);
  color: var(--ink);
}
.manifesto--dark {
  background: var(--dark);
  color: var(--cream);
}
.manifesto-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 104px);
}
.manifesto-copy {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(22px, 3vw, 46px);
  line-height: 1.44;
  letter-spacing: -0.02em;
  color: inherit;
  max-width: 880px;
  opacity: 0.9;
}
.manifesto-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 64px);
  border-top: 1px solid rgba(248,244,236,0.1);
  padding-top: clamp(40px, 5vw, 64px);
}
.manifesto-stats {
  display: flex;
  gap: clamp(40px, 6vw, 96px);
}
.ms-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms-num {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 4.5vw, 64px);
  letter-spacing: -0.05em;
  line-height: 1;
  color: inherit;
}
.ms-label {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.4;
}
.manifesto-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .manifesto-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .manifesto-actions { justify-content: flex-start; }
  .manifesto-stats { gap: clamp(28px, 8vw, 56px); }
}

/* ══════════════════════════════════════════════════════════════════
   SECTION 2 — EDITORIAL LIST REDESIGN (BREW)
   Tasting notes: card grid → typographic tasting sequence.
   Philosophy: big Fraunces names, open rows, no boxes.
   ══════════════════════════════════════════════════════════════════ */

/* — Manifesto: breathe more — */
.manifesto {
  padding: clamp(140px, 18vw, 240px) var(--g) !important;
}
.manifesto-inner {
  gap: clamp(80px, 11vw, 140px) !important;
}
.manifesto-copy {
  font-size: clamp(24px, 3.2vw, 50px) !important;
  line-height: 1.46 !important;
  max-width: 960px !important;
}
.manifesto-foot {
  border-top: none !important;
  padding-top: 0 !important;
}
.manifesto-stats {
  gap: clamp(64px, 9vw, 140px) !important;
  align-items: flex-end !important;
}
.ms-num {
  font-size: clamp(48px, 6vw, 80px) !important;
  letter-spacing: -0.06em !important;
}

/* — Tasting section: air — */
.tasting {
  padding: clamp(120px, 16vw, 200px) var(--g) !important;
}
.tasting-inner { padding: 0; }
.tasting-header {
  margin-bottom: clamp(80px, 10vw, 130px) !important;
}

/* — Editorial tasting list — */
.tasting-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(42,24,16,0.1);
}
.tl-row {
  display: grid;
  grid-template-columns: clamp(52px,6vw,80px) 1fr 1fr;
  gap: 0 clamp(36px, 5vw, 72px);
  align-items: center;
  padding: clamp(44px, 6vw, 80px) 0;
  border-bottom: 1px solid rgba(42,24,16,0.07);
  transition: background .28s cubic-bezier(.16,1,.3,1);
}
@media(hover:hover) {
  .tl-row:hover {
    background: rgba(42,24,16,0.02);
  }
  .tl-row:hover .tl-name {
    letter-spacing: -0.025em;
  }
  .tl-row:hover .tl-num {
    color: var(--cocoa);
  }
}
.tl-num {
  font: 600 11px/1 'Courier New',monospace;
  letter-spacing: .22em;
  color: rgba(42,24,16,0.22);
  padding-top: 4px;
  align-self: start;
  transition: color .28s;
}
.tl-name {
  font-family: 'Fraunces','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight: 900;
  font-style: italic;
  font-variation-settings: 'opsz' 72,'WONK' 1;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--ink);
  transition: letter-spacing .32s cubic-bezier(.16,1,.3,1),
              font-variation-settings .4s cubic-bezier(.16,1,.3,1);
}
@media (hover:hover) {
  .tl-row:hover .tl-name {
    letter-spacing: -0.025em;
    font-variation-settings: 'opsz' 144, 'WONK' 1;
  }
}
.tl-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tl-type {
  font: 700 12px/1 'Courier New',monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cocoa-mu);
}
.tl-when {
  font: 400 13px/1.65 'Helvetica Neue',Arial,sans-serif;
  color: rgba(42,24,16,0.48);
  max-width: 340px;
}

/* — Cert strip: inline, spaced, minimal — */
.tasting-certs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: clamp(64px, 9vw, 110px) !important;
  border-top: 1px solid rgba(42,24,16,0.08) !important;
  padding-top: clamp(36px, 4vw, 52px) !important;
}
.cert-tag {
  font: 600 12px/1 'Courier New',monospace !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: rgba(42,24,16,0.4) !important;
  background: transparent !important;
  border: 1px solid rgba(42,24,16,0.1) !important;
  padding: 10px 16px !important;
  transition: color .22s, border-color .22s;
}
@media(hover:hover) {
  .cert-tag:hover {
    color: var(--cocoa) !important;
    border-color: var(--cocoa-mu) !important;
  }
}

/* Responsive */
@media(max-width:860px) {
  .tl-row {
    grid-template-columns: clamp(40px,8vw,60px) 1fr;
    grid-template-rows: auto auto;
  }
  .tl-num { grid-row: 1; }
  .tl-name { grid-row: 1; }
  .tl-meta { grid-column: 1/-1; padding-left: clamp(40px,8vw,60px); margin-top: -8px; }
}
@media(max-width:480px) {
  .tl-row {
    grid-template-columns: 40px 1fr;
  }
}

/* SS5: brew watermark — force Helvetica Neue, not Fraunces */
.hero-wm-text {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-variation-settings: normal !important;
}


/* ── BREW HERO AMBIENT EFFECTS ───────────────────────────────────────
   Three atmospheric layers that make 2,400 metres feel real.
   All GPU-composited (opacity + transform only).
──────────────────────────────────────────────────────────────────── */

/* Light leak — warm gold bloom from top-right, like highland sun */
.hero-light-leak {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 55%;
  height: 70%;
  background: radial-gradient(
    ellipse 80% 70% at 85% 15%,
    rgba(184,134,11,0.06) 0%,
    rgba(184,134,11,0.02) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  animation: lightLeakPulse 8s ease-in-out infinite;
  will-change: opacity;
}
@keyframes lightLeakPulse {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1.0; }
}

/* Altitude fog — cool blue-grey haze at bottom of hero, like cloud layer */
.hero-altitude-fog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(
    to top,
    rgba(20,30,48,0.22) 0%,
    rgba(20,30,48,0.08) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  animation: fogDrift 7s ease-in-out infinite;
}

@keyframes fogDrift {
  0%, 100% { transform: translateY(0);    opacity: 1;    }
  50%       { transform: translateY(-9px); opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-altitude-fog { animation: none; }
}

/* Edge marks — fine registration-mark corners, like a photographic print */
.hero-edge-marks {
  position: absolute;
  inset: clamp(16px,2.5vw,32px);
  pointer-events: none;
  z-index: 3;
}
.hero-edge-marks::before,
.hero-edge-marks::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: rgba(248,244,236,0.12);
  border-style: solid;
  border-width: 0;
}
.hero-edge-marks::before {
  top: 0; left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}
.hero-edge-marks::after {
  bottom: 0; right: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-light-leak { animation: none; }
}

/* ── PRE-FOOTER TYPOGRAPHIC STATEMENT ──────────────────────────────── */


@media (hover: hover) {
  
}

/* ── NEW: order-why — collapsed €1 rationale ──────────────────────── */
.order-why{
  list-style:none;padding:0;margin:clamp(20px,3vh,28px) 0;
  display:flex;flex-direction:column;gap:10px;
}
.order-why li{
  font-family:var(--mono);font-size:clamp(11px,1.1vw,13px);
  letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(248,244,236,0.55);
  padding-left:1.4em;position:relative;
}
.order-why li::before{
  content:'—';position:absolute;left:0;
  color:rgba(248,244,236,0.28);
}

/* ── NEW: order-method — single brew spec block ────────────────────── */
.order-method{
  margin:clamp(20px,3vh,28px) 0;
  padding:16px 20px;
  border:1px solid rgba(248,244,236,0.10);
  border-radius:3px;
}
.order-method-label{
  display:block;
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.38);
  margin-bottom:8px;
}
.order-method p{
  margin:0;
  font-family:var(--mono);font-size:clamp(11px,1.1vw,13px);
  letter-spacing:0.08em;
  color:rgba(248,244,236,0.60);
  line-height:1.65;
}

/* ── NEW: source--slim — tighter top padding (statement-hero removed) ─ */
.source--slim{
  padding-top:clamp(60px,8vw,100px);
}

/* ── FOOTER TYPOGRAPHIC STATEMENT ──────────────────────────────── */
.ft-statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: clamp(20px, 3vw, 32px);
  position: relative;
  z-index: 1;
}
.ft-statement-line {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 10vw, 160px);
  letter-spacing: -0.055em;
  line-height: 0.88;
  color: rgba(248,244,236,0.04);
  text-transform: uppercase;
  user-select: none;
  display: block;
}
.ft-creed {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.22);
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 36px);
  position: relative;
  z-index: 1;
}
.ft-coords {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.08);
  text-align: center;
  margin-top: clamp(16px, 2vw, 24px);
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   STATEMENT HERO — OUR DAILY BREW (matches bread statement-hero)
═══════════════════════════════════════════════════════════════════ */
.statement-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink, #2A1810);
  overflow: hidden;
  padding: clamp(4rem,8vw,7rem) clamp(1.5rem,4vw,4rem);
}
.statement-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(248,244,236,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,244,236,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.statement-hero::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(184,134,11,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.stmt-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.stmt-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.statement-hero.is-visible .stmt-eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}
.stmt-rule {
  display: block;
  height: 1px;
  width: clamp(30px, 5vw, 60px);
  background: linear-gradient(90deg, transparent, rgba(248,244,236,0.25));
}
.stmt-rule:last-child {
  background: linear-gradient(90deg, rgba(248,244,236,0.25), transparent);
}
.stmt-eye-text {
  font: 400 10px/1 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.5);
}
.stmt-headline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  line-height: 0.88;
  color: var(--cream, #F8F4EC);
}
.stmt-line {
  display: block;
  overflow: hidden;
}
.stmt-line--sm {
  display: flex;
  gap: 0.3em;
}
.stmt-line--sm .stmt-word {
  display: inline-block;
  font: 300 clamp(3rem, 8.5vw, 9rem)/0.88 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.50);
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.stmt-line--lg .stmt-word {
  font-weight: 900;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(6rem, 22.5vw, 26rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  background: linear-gradient(
    162deg,
    rgba(248,244,236,1.0) 0%,
    rgba(212,185,140,0.90) 48%,
    rgba(160,110,60,0.70) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  display: block;
  white-space: nowrap;
}
.statement-hero.is-visible .stmt-line--sm .stmt-word { transform: translateY(0); }
.statement-hero.is-visible .stmt-line--sm .stmt-word:nth-child(2) { transition-delay: 0.08s; }
.statement-hero.is-visible .stmt-line--lg .stmt-word { transform: translateY(0); transition-delay: 0.18s; }
@supports (font-size: clamp(1px, 1vw, 100px)) {
  .stmt-line--lg .stmt-word { font-size: clamp(5rem, 23.5vw, 30rem); }
}
.stmt-footer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.statement-hero.is-visible .stmt-footer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}
.stmt-foot-item {
  font: 400 9px/1 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.35);
}
.stmt-foot-sep {
  color: rgba(248,244,236,0.15);
  font-size: 8px;
}
.stmt-bg-rule {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,134,11,0.35), transparent);
}
@media (max-width: 600px) {
  .stmt-line--sm .stmt-word { font-size: clamp(2.2rem, 9vw, 4rem); }
  .stmt-line--lg .stmt-word { font-size: clamp(4.5rem, 24vw, 8rem); }
  .stmt-footer { gap: 0.5rem; }
  .stmt-foot-sep { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   BREW MANIFESTO — God-mode data-split section
══════════════════════════════════════════════════════════════════════ */
.brew-manifesto {
  background: var(--dark, #180E08);
  color: var(--cream, #F8F4EC);
  padding: clamp(100px,13vw,180px) var(--g) clamp(100px,13vw,180px);
  position: relative;
  overflow: hidden;
}
.brew-manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(248,244,236,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,244,236,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.brm-wm {
  position: absolute;
  bottom: -0.12em;
  left: -0.04em;
  font: 900 clamp(120px,22vw,380px)/1 'Helvetica Neue', sans-serif;
  letter-spacing: -0.06em;
  color: rgba(248,244,236,0.028);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.brm-inner {
  max-width: var(--max, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(48px,6vw,100px);
  align-items: start;
  position: relative;
  z-index: 1;
}
.brm-rule {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(184,134,11,0.5) 20%, rgba(184,134,11,0.35) 80%, transparent);
  align-self: stretch;
  min-height: 300px;
}

/* Data column */
.brm-eyebrow {
  display: block;
  font: 700 12px/1 'Courier New', monospace;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.30);
  margin-bottom: 36px;
}
.brm-facts {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.brm-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(20px,2.5vw,32px) 0;
  border-bottom: 1px solid rgba(248,244,236,0.06);
  position: relative;
}
.brm-fact::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 0;
  height: 1px;
  background: rgba(184,134,11,0.4);
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}
@media(hover:hover) { .brm-fact:hover::before { width: 100%; } }
.brm-fact-val {
  font: 900 clamp(48px,5.5vw,76px)/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.05em;
  color: rgba(248,244,236,0.15);
}
.brm-fact-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}
.brm-fact-unit {
  font: 700 11px/1 'Courier New', monospace;
  letter-spacing: 0.18em;
  color: rgba(248,244,236,0.20);
  text-transform: uppercase;
}
.brm-fact--gold .brm-fact-val { color: rgba(184,134,11,0.82); }
.brm-fact--gold .brm-fact-unit { color: rgba(184,134,11,0.45); }
.brm-fact-label {
  font: 400 11px/1.5 'Courier New', monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.28);
  margin-top: 6px;
}
.brm-coords {
  font: 700 11px/1 'Courier New', monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.16);
  margin-top: clamp(24px,3vw,36px);
  border-top: 1px solid rgba(248,244,236,0.06);
  padding-top: 20px;
}

/* Copy column */
.brm-copy-col {
  display: flex;
  flex-direction: column;
  gap: clamp(40px,5vw,64px);
  padding-top: 38px;
}
.brm-copy {
  font: 300 clamp(17px,1.6vw,22px)/1.80 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(248,244,236,0.60);
  letter-spacing: -0.01em;
}
.brm-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .brm-inner {
    grid-template-columns: 1fr;
    gap: clamp(48px,7vw,80px);
  }
  .brm-rule { display: none; }
  .brm-copy-col { padding-top: 0; }
  .brm-fact-val { font-size: clamp(40px,10vw,64px); }
}

/* ══ NAV — brew page ══════════════════════════════════════════════════ */
#site-nav {
  padding: 0 clamp(20px,3vw,48px) !important;
  height: 62px !important;
}
.nav-logo {
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
}
/* (removed: rogue #site-nav nav-link sizing that broke nav uniformity) */

/* ── brm-facts: staggered entrance ─────────────────────────── */
.brm-fact.reveal:nth-child(1) { transition-delay: 0.00s; }
.brm-fact.reveal:nth-child(2) { transition-delay: 0.10s; }
.brm-fact.reveal:nth-child(3) { transition-delay: 0.20s; }
.brm-fact.reveal:nth-child(4) { transition-delay: 0.30s; }

/* ── brm-fact-val: stronger presence ───────────────────────── */
.brm-fact-val {
  font: 900 clamp(52px,6vw,88px)/1 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  letter-spacing: -0.05em;
  color: rgba(248,244,236,0.28) !important;
}
.brm-fact--gold .brm-fact-val {
  color: rgba(184,134,11,0.80) !important;
}

/* ── brm-copy: stronger, easier to read ────────────────────── */
.brm-copy {
  font: 300 clamp(16px,1.5vw,21px)/1.86 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: rgba(248,244,236,0.65) !important;
}

/* ── brm-eyebrow top spacing ───────────────────────────────── */
.brm-data {
  padding-top: 6px;
}

/* ── brm-fact first: top border ───────────────────────────── */
.brm-facts .brm-fact:first-child {
  border-top: 1px solid rgba(248,244,236,0.06);
}

/* ── Brew statement-hero bg — deep roast, not generic ink ──── */
.statement-hero {
  background: var(--dark, #180E08) !important;
}

/* ═══ BOTTOM-UP RAMP — BREW (darkest of the three pages) ═════════════════
   order → blessing → footer: footer darkest + strongest grid, brightening
   upward; shared boundary colors make the three sections one seamless ramp. */
.order{ background:linear-gradient(180deg,#2A1809 0%,#201006 100%); }
.order::before{
  background-image:
    linear-gradient(rgba(248,244,236,0.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(248,244,236,0.022) 1px,transparent 1px);
  background-size:72px 72px;
}
.pre-footer-statement{
  background:linear-gradient(180deg,#201006 0%,#150A03 100%);
  padding:clamp(100px,14vw,180px) var(--g) clamp(60px,8vw,100px);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.pre-footer-statement::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(248,244,236,0.034) 1px,transparent 1px),
    linear-gradient(90deg,rgba(248,244,236,0.034) 1px,transparent 1px);
  background-size:72px 72px;
  pointer-events:none;
}
.pre-footer-statement > *{ position:relative; z-index:1; }
footer{ background:linear-gradient(180deg,#150A03 0%,#0E0602 100%); }
footer::before{
  background-image:
    linear-gradient(rgba(248,244,236,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(248,244,236,0.05) 1px,transparent 1px);
  background-size:72px 72px;
}

/* ═══ BAKER'S BLESSING — unified block + readable type scale ═══ */
.pfs-eyebrow{
  display:block;
  font-family:'Courier New',monospace;
  font-size:clamp(11px,1vw,14px);
  font-weight:700;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:rgba(248,244,236,0.30);
  margin-bottom:clamp(28px,4vw,48px);
}
.pfs-mybread{
  display:block;
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;
  font-style:italic!important;
  font-size:clamp(1.8rem,3.5vw,3.4rem);
  letter-spacing:-0.01em;
  line-height:1;
  color:rgba(248,244,236,0.55);
  margin-bottom:clamp(8px,1vw,14px);
}
.pfs-main{
  display:block;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;
  font-size:clamp(40px,7vw,112px);
  letter-spacing:-0.03em;
  line-height:0.95;
  color:rgba(248,244,236,0.92);
  user-select:none;
}
.pfs-translation{
  display:block;
  font-family:'Courier New',monospace;
  font-size:clamp(0.85rem,1.3vw,1.1rem);
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(248,244,236,0.42);
  line-height:1.6;
  margin-top:clamp(20px,2.6vw,36px);
}
.pfs-prayer{
  display:block;
  font-family:'Courier New',monospace;
  font-size:clamp(11px,0.9vw,14px);
  font-weight:700;
  letter-spacing:0.30em;
  text-transform:uppercase;
  color:rgba(248,244,236,0.40);
  margin:clamp(16px,2vw,28px) auto 0;
  position:relative;
  padding-top:clamp(12px,1.5vw,20px);
  width:fit-content;
}
.pfs-prayer::before{
  content:'';
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:40px;height:1px;
  background:rgba(248,244,236,0.18);
}

/* ═══ PERIMETER PROGRESS — corner bars ═══════════════════════════════════
   At the bottom of the page the two rails turn the corner and run along the
   bottom edge, meeting in the middle at full scroll. After that meeting,
   scrolling back up plays the same meeting along the top edge. */
#prog-b-l{position:fixed;bottom:0;left:0;height:8px;width:0;background:var(--gold);z-index:9996}
#prog-b-r{position:fixed;bottom:0;right:0;height:8px;width:0;background:var(--gold);z-index:9996}
#prog-t-l{position:fixed;top:0;left:0;height:8px;width:0;background:var(--gold);z-index:9996}
#prog-t-r{position:fixed;top:0;right:0;height:8px;width:0;background:var(--gold);z-index:9996}

/* ═══ TYPOGRAPHY MASTERPASS — contrast & readability, dark sections ═══
   Secondary type lifted out of the murk: eyebrows and codas clearly
   legible, reading text at comfortable contrast, whisper marks kept as
   whispers by intent. */
.pfs-eyebrow{color:rgba(248,244,236,0.36)}
.pfs-mybread{color:rgba(248,244,236,0.62)}
.pfs-translation{color:rgba(248,244,236,0.52)}
.pfs-prayer{color:rgba(248,244,236,0.46)}
.ft-creed{color:rgba(248,244,236,0.34)}
.footer-link{color:rgba(248,244,236,0.42)}
.footer-link:hover{color:rgba(248,244,236,0.85)}
.footer-copy{color:rgba(248,244,236,0.30)}
:root{--cocoa-lt:rgba(92,61,46,0.68);--cocoa-mu:rgba(92,61,46,0.46)}
body{font-size:16px}

/* ═══ MOBILE MASTERPASS ══════════════════════════════════════════════════
   Slimmer rails, true 44px touch targets, no iOS focus-zoom, tuned
   small-screen display type. */
@media (max-width:640px){
  #prog,#prog-r{width:4px}
  #prog-b-l,#prog-b-r,#prog-t-l,#prog-t-r{height:4px}
  .footer-link{padding:10px 14px}
  .pfs-main{font-size:clamp(34px,11vw,44px)}
  .ft-statement-line{font-size:clamp(44px,15vw,72px)}
}
@media (max-width:480px){
  .nav-logo{font-size:12px;letter-spacing:0.24em}
}
@media (pointer:coarse){
  /* inputs at 16px+ so iOS never zoom-jumps on focus */
  input,select,textarea{font-size:16px!important}
  .cookie-btn{min-height:44px;padding:12px 18px}
  .nav-hamburger{min-width:44px;min-height:44px}
  .footer-link{display:inline-block;padding:10px 14px}
  .btn-ghost,.nav-drawer-cta{min-height:44px;display:inline-flex;align-items:center}
}

/* ═══ SMOOTH TRANSITION — statement hero → manifesto ═════════════════════
   The hero now ends on exactly the manifesto's colour, the gold seam line
   and bottom glow band are gone, and both grids share one intensity — the
   two sections read as one continuous surface. */
.statement-hero{background:linear-gradient(180deg,#2A1810 0%,#20130A 62%,#180E08 100%)}
.statement-hero::after{display:none}
.stmt-bg-rule{display:none}
.statement-hero::before{
  background-image:
    linear-gradient(rgba(248,244,236,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(248,244,236,0.025) 1px,transparent 1px);
}

/* NAV — larger for readability */
.nav-logo{font-size:18px!important}
.nav-link{font-size:15px!important;padding:9px 16px}
.nav-cta{font-size:15px!important}

/* Batch email input + button — square edges */
.batch-email-row input,#batch-email{border-radius:0!important}
.batch-notify-btn{border-radius:0!important}

/* Five quantity tiers */
.qty-grid{grid-template-columns:repeat(5,1fr)}
@media(max-width:560px){.qty-grid{grid-template-columns:repeat(3,1fr)}}

/* NAV — PNC monogram + larger links */
.nav-logo{font-size:26px!important;letter-spacing:0.30em!important}
.nav-link{font-size:17px!important;padding:11px 20px!important}
/* Globe — true 3D spin around the vertical middle axis */
.ship-badge-content{perspective:400px}
.ship-globe{transform-style:preserve-3d;backface-visibility:visible}
/* No horizontal panning — ever */
html,body{overflow-x:clip!important}

/* ═══ HERO BEAN — the heart, upper right ═══ */
.hero-grain{
  position:absolute;
  top:calc(var(--nav-h) + clamp(24px,5vh,64px));
  right:clamp(28px,6vw,110px);
  width:clamp(140px,18vw,280px);
  margin:0;text-align:center;
  z-index:2;pointer-events:none;
}
.hero-grain img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,0.5));
  animation:grainFloat 7s ease-in-out infinite alternate;
}
@keyframes grainFloat{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.hero-grain figcaption{
  margin-top:16px;
  font-family:'Courier New',monospace;
  font-size:clamp(11px,0.95vw,13px);font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.58);
}
@media(prefers-reduced-motion:reduce){.hero-grain img{animation:none}}
@media(max-width:760px){
  .hero-grain{position:relative;top:auto;right:auto;margin:36px auto 0;width:min(48vw,210px)}
}

/* ═══ HERO HEART — structural two-column hero (the layout you saw and
   liked is now intentional): heart large beside the statement, never
   hidden by animation or back/forward cache states. ═══ */
.statement-hero{display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,90px)}
.hero-grain{
  position:relative;top:auto;right:auto;
  flex-shrink:0;
  width:min(40vw,620px);
  margin:0;text-align:center;
  pointer-events:none;z-index:2;
  opacity:1!important;visibility:visible!important;transform:none!important;
}
.hero-grain img{opacity:1!important;visibility:visible!important}
@media(max-width:760px){
  .statement-hero{flex-direction:column;gap:28px}
  .hero-grain{width:min(64vw,340px);margin:0 auto}
}

/* ═══ NAV — UNIFORM ACROSS ALL PAGES (final spec) ═══ */
:root{--nav-h:64px}
.nav-logo{font-size:26px!important;letter-spacing:0.30em!important;font-weight:900!important}
.nav-link{
  font-size:17px!important;font-weight:700!important;
  letter-spacing:0.18em!important;
  padding:11px 20px!important;margin:0 2px!important;
}
.nav-cta{font-size:15px!important;padding:12px 24px!important;min-height:44px!important}

/* ═══ HERO BEAN — positional perfection pass ═══ */
.statement-hero{gap:clamp(24px,4vw,72px)}
.statement-hero .stmt-inner{flex:0 1 auto;min-width:0}
.hero-grain{
  width:min(34vw,560px);
  align-self:center;
  margin:2vh 0 0 clamp(8px,2vw,32px);
}
.hero-grain img{margin:0 auto;max-width:100%}
.hero-grain figcaption{margin-top:10px;letter-spacing:0.18em;white-space:nowrap}
@media(max-width:1100px){.hero-grain{width:min(36vw,420px)}}

/* ═══ NAV LINKS — FINAL UNIFORM SIZE (16px everywhere, all pages) ═══ */
.nav-link{
  font-family:"Courier New",monospace!important;
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:0.18em!important;
  padding:10px 18px!important;
  margin:0 2px!important;
  line-height:1.2!important;
}

/* ═══ MANIFESTO — Kochere coffee-plant background under a deep scrim ═══ */
.brew-manifesto{
  background:
    linear-gradient(180deg,
      rgba(24,14,8,0.94) 0%,
      rgba(24,14,8,0.86) 45%,
      rgba(24,14,8,0.92) 100%),
    url('/img/coffee-bg.webp') center / cover no-repeat;
}

/* ═══ "My Bread." — exact gate typography (Fraunces text-cut, not the
   auto display cut): weight 400, opsz 72, WONK 1, true italic ═══ */
.pfs-mybread{
  font-family:"Fraunces","Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-weight:400!important;
  font-style:italic!important;
  font-variation-settings:"WONK" 1,"opsz" 72!important;
  letter-spacing:-0.01em!important;
}

/* ── PERIMETER PROGRESS — GPU transforms (no per-frame layout) ────── */
#prog{height:100%!important;transform:scaleY(0);transform-origin:top center;will-change:transform}
#prog-r{height:100%!important;transform:scaleY(0);transform-origin:top center;will-change:transform}
#prog-b-l{width:50%!important;transform:scaleX(0);transform-origin:left center;will-change:transform}
#prog-b-r{width:50%!important;transform:scaleX(0);transform-origin:right center;will-change:transform}
#prog-t-l{width:50%!important;transform:scaleX(0);transform-origin:left center;will-change:transform}
#prog-t-r{width:50%!important;transform:scaleX(0);transform-origin:right center;will-change:transform}

/* ═══ MOBILE MASTERPASS ════════════════════════════════════════════ */
@media (pointer:coarse), (max-width:768px) {
  .batch-email-row input, #batch-email { font-size:16px !important; }
}

/* My Bread. — matches the gate's exact Fraunces cut (gate loads italic 900 only) */
.pfs-mybread{
  font-family:'Fraunces',Georgia,serif !important;
  font-weight:900 !important;
  font-style:italic !important;
  font-variation-settings:'WONK' 1,'opsz' 72 !important;
}

/* ═══ TASTING NOTES — the coffee plant behind WHAT YOU TASTE ═════════════
   Paper veil keeps the note rows at full contrast; .section.tasting
   two-class !important outranks palette.css .tasting paper fill. */
.section.tasting{
  background:
    linear-gradient(180deg, #FAF5EA 0%, rgba(250,245,234,0.90) 16%, rgba(250,245,234,0.86) 55%, #FAF5EA 100%),
    url('/img/coffee-bg.webp') center 30%/cover no-repeat var(--pp-paper,#FAF5EA) !important;
}

/* ═══ PERIMETER CORNER-RUN — restored, riding OVER the ready banner ══════
   Same meeting as HOME: bottom bars race in and meet mid-edge at full
   scroll, top bars replay the meeting on the way back up. Deep gold so
   the run stays visible across paper AND across the #B8860B banner. */
#prog-b-l,#prog-b-r,#prog-t-l,#prog-t-r{display:block !important;background:#8A6508 !important;z-index:9994}

/* ═══ HERO HEART — melt the cut-out's white ground into the paper ════════ */
.hero-grain img{mix-blend-mode:multiply}

/* ═══ ORDER — dissolve in from the certs paper above: no hard seam ═══════ */
.section.order{
  background:linear-gradient(180deg,
    #FAF5EA 0%,
    var(--pp-parch,#EDE5D4) clamp(140px,20vh,260px),
    var(--pp-parch,#EDE5D4) 100%) !important;
}

/* ═══ MOBILE PASS 2026-06-12 ═════════════════════════════════════════════ */
@media(max-width:860px){
  /* tasting rows: simple editorial stack — number, name, meta. No grid
     auto-placement subtleties, no negative pulls, no overlap. */
  .tl-row{display:flex !important;flex-direction:column;align-items:flex-start;gap:10px}
  .tl-num{padding-top:0}
  .tl-meta{padding-left:0 !important;margin-top:2px !important}
}
@media(max-width:760px){
  /* kochere line: never wider than the viewport */
  .order-sub{letter-spacing:0.14em;max-width:100%;overflow-wrap:break-word}
}


/* ── Shipping notice — order-form geo-restriction callout ─────────────── */
.order-geonote{
  display:flex;align-items:flex-start;gap:10px;
  width:100%;max-width:none;margin:16px 0 4px;
  padding:11px 14px;
  background:#FAF5EA;
  border:1px solid rgba(192,83,58,.32);
  border-left:3px solid var(--err,#C0533A);
  border-radius:4px;
  font:500 11.5px/1.6 'Courier New',monospace;
  letter-spacing:.04em;color:#5C3D2E;text-align:left;
}
.order-geonote::before{
  content:'!';flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-top:.5px;
  border-radius:50%;
  background:var(--err,#C0533A);color:#fff;
  font:700 11px/1 'Courier New',monospace;
}
@media(max-width:600px){.order-geonote{font-size:11px;padding:10px 12px}}


/* MOBILE FIX (2026-06-16) — the desktop scroll-progress edge frame (#prog*)
   and the vestigial #ready-banner read as clutter on a phone. Hide on touch/
   coarse pointers; desktop (fine pointer) keeps the ritual frame. */
@media (pointer:coarse){
  #prog,#prog-r,#prog-b-l,#prog-b-r,#prog-t-l,#prog-t-r{display:none!important}
  #ready-banner{display:none!important}
}