/* ── 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}
*{font-style:normal!important}

/* ── TOKENS ─────────────────────────────────────────────────── */
:root{
  --cream:      #F8F4EC;
  --cream-deep: #EDE5D4;
  --cocoa:      #8B6840;
  --cocoa-mid:  #A8885A;
  --cocoa-lt:   rgba(139,104,64,0.55);
  --cocoa-mu:   rgba(139,104,64,0.32);
  --cocoa-fa:   rgba(139,104,64,0.09);
  --ink:        #4A3018;
  --err:        #C0533A;
  --teal:       #4A7C6F;
  --amber:      #8A6508;
  --gold:       #B8860B;
  --dark:       #6B4E2A;
  --sand:       #C8A97A;
  --sand-mid:   #D4B98A;
  --sand-deep:  #B8956A;
  --g:          clamp(20px,5vw,80px);
  --max:        1320px;
  --nav-h:      62px;
}

/* ── 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);
}
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}

/* ── 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){
  /* keyboard open — switch to sticky so it doesn't fight the keyboard */
  #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,#4A3018)}
@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:64px;height:70px;
  color:var(--cocoa);pointer-events:none;z-index:100001;
  /* grain tip down, gently tilted — same attitude as the actual-size mark */
  transform:translate(-9999px,-9999px) rotate(-12deg);
  transition:color 0ms, opacity 160ms ease;
  overflow:visible;
}
#cur-ring{
  display:none !important;
}
/* Text insertion cursor blink — matches system caret rhythm */
@keyframes textCursorBlink{
  0%,100%{opacity:1}
  50%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  @keyframes textCursorBlink{0%,100%{opacity:1}}
}


/* ── FORMATS SECTION ─────────────────────────────────────────────── */
.formats-section{
  padding:clamp(80px,10vw,140px) var(--g);
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
}
.formats-inner{max-width:var(--max);margin:0 auto;}

.formats-header{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:clamp(24px,3vw,48px) clamp(32px,4vw,64px);
  margin-bottom:clamp(48px,6vw,80px);
  border-bottom:1px solid rgba(248,244,236,0.12);
  padding-bottom:clamp(28px,3vw,40px);
}
.formats-eyebrow{
  font:700 10px/1 'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(248,244,236,0.45);white-space:nowrap;
  grid-column:1/-1;
}
.formats-h2{
  font:900 clamp(36px,5.5vw,72px)/1.0 'Helvetica Neue',Arial,sans-serif;
  letter-spacing:-.03em;text-transform:uppercase;color:var(--cream);
}
.formats-sub{
  font:400 14px/1.7 'Helvetica Neue',Arial,sans-serif;
  color:rgba(248,244,236,0.55);max-width:380px;
  align-self:end;padding-bottom:4px;
}
.formats-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  width:100%;
  min-width:0;
}
.format-card{
  padding:clamp(20px,2.5vw,40px) clamp(14px,1.8vw,28px);
  border-right:1px solid rgba(248,244,236,0.1);
  display:flex;flex-direction:column;gap:20px;
  min-width:0;
}
.format-card:last-child{border-right:none;}
.format-time{
  font:900 clamp(48px,6vw,80px)/1 'Helvetica Neue',Arial,sans-serif;
  letter-spacing:-.04em;color:var(--cream);
  display:block;
}
.format-unit{
  font:700 11px/1 'Courier New',monospace;
  letter-spacing:.14em;color:rgba(248,244,236,0.4);
  display:block;margin-top:6px;
}
.format-name{
  font:900 13px/1.2 'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);
}
.format-method{
  font:700 12px/1 'Courier New',monospace;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(248,244,236,0.35);
}
.format-desc{
  font:400 13px/1.7 'Helvetica Neue',Arial,sans-serif;
  color:rgba(248,244,236,0.55);
  margin-top:auto;
}
.format-ratio{
  font:700 11px/1 'Courier New',monospace;
  letter-spacing:.08em;color:rgba(248,244,236,0.3);
  border-top:1px solid rgba(248,244,236,0.1);
  padding-top:14px;margin-top:4px;
  white-space:nowrap;
}
.formats-note{
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(28px,3vw,40px);
  border-top:1px solid rgba(248,244,236,0.12);
  font:700 11px/1.6 'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(248,244,236,0.35);
  text-align:center;
}
@media(max-width:1100px){
  .formats-grid{grid-template-columns:repeat(3,1fr);}
  .format-card:nth-child(3){border-right:none;}
  .format-card:nth-child(1),.format-card:nth-child(2),.format-card:nth-child(3){border-bottom:1px solid rgba(248,244,236,0.1);}
}
@media(max-width:900px){
  .formats-grid{grid-template-columns:repeat(2,1fr);}
  .format-card:nth-child(2),.format-card:nth-child(4){border-right:none;}
  .format-card:nth-child(1),.format-card:nth-child(2),.format-card:nth-child(3),.format-card:nth-child(4){border-bottom:1px solid rgba(248,244,236,0.1);}
}
@media(max-width:540px){
  .formats-grid{grid-template-columns:1fr;}
  .format-card{border-right:none;border-bottom:1px solid rgba(248,244,236,0.1);}
  .format-card:last-child{border-bottom:none;}
  .formats-header{grid-template-columns:1fr;gap:16px;}
  .formats-sub{max-width:100%;}
}
.hero-coord{
  position:absolute;top:50%;left:0;right:0;
  display:flex;align-items:center;
  pointer-events:none;z-index:3;
  opacity:0.16;
}
.hero-coord-line{flex:1;height:1px;background:rgba(248,244,236,0.9);}
.hero-coord-label{
  font:600 11px/1 'Courier New',monospace;
  letter-spacing:.18em;color:rgba(248,244,236,0.9);
  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:#4A3018 !important;text-decoration:none;transition:color .2s,letter-spacing .3s cubic-bezier(.16,1,.3,1);
}
.nav-logo:hover{color:#8B6840 !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:#4A3018 !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:#4A3018 !important;color:#F8F4EC !important;border-color:transparent}
#site-nav .nav-link.active,.nav-link.active{background:#4A3018 !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:#4A3018;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:#8B6840}
@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(--cream);
  background-image:url("/img/bread-hero-v2.webp");
  background-size:cover;background-position:68% center;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(42,24,16,0.18) 0%, rgba(42,24,16,0.0) 18%, rgba(248,244,236,0.55) 60%, rgba(248,244,236,0.97) 80%, rgba(248,244,236,0.99) 100%),
    linear-gradient(to right, rgba(248,244,236,0.96) 0%, rgba(248,244,236,0.88) 20%, rgba(248,244,236,0.32) 44%, rgba(248,244,236,0.0) 62%);
  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(120px,24vw,440px);
  letter-spacing:-0.05em;line-height:1;
  color:rgba(92,61,46,0.11);white-space:nowrap;
  animation:driftIn 2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes driftIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

/* ── GRAIN COUNT — Design AC-03 ─────────────────────────────── */
/* One number. No label. Approximately 2.3 million buckwheat     */
/* grains per loaf. Purely visual. A judge pauses and looks.     */
.hero-grain-count{
  position:absolute;
  top:50%;right:-2%;
  transform:rotate(90deg) translateY(-50%);
  transform-origin:right center;
  font-family:'Courier New',monospace;
  font-size: clamp(11px,0.9vw,13px);
  font-weight:600;
  letter-spacing:0.42em;
  color:rgba(248,244,236,0.22);
  white-space:nowrap;
  pointer-events:none;user-select:none;
  animation:grainFade 3s 1.2s cubic-bezier(.16,1,.3,1) both;
  transition:color .6s;
}
@keyframes grainFade{from{opacity:0}to{opacity:1}}
@media(max-width:768px){.hero-grain-count{display:none}.hero-coord{display:none}}
@media(prefers-reduced-motion:reduce){.hero-grain-count{animation:none}}
.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);
  margin-bottom:clamp(14px,1.8vh,22px);
  animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .15s both;
  will-change:transform,opacity;
  position:relative;z-index:2;
}
.hero-bottom{will-change:transform,opacity;animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .25s 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:var(--ink);
  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:var(--cocoa-lt);
  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:var(--cocoa);
  max-width:520px;line-height:1.6;
  margin-bottom:clamp(32px,5vh,56px);
}
.hero-strip{
  display:flex;flex-wrap:wrap;gap:6px;max-width:700px;
  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:var(--cocoa);
  background:var(--cocoa-fa);
  border:1px solid rgba(92,61,46,0.12);
  border-left:3px solid rgba(92,61,46,0.28);
  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-primary{
  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:14px 28px;
  transition:background .18s;display:inline-block;min-height:44px;line-height:2;
}
.btn-primary:hover{background:var(--cocoa)}
.btn-ghost{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--cocoa-lt);border:1px solid var(--cocoa-fa);
  padding:13px 28px;transition:border-color .18s,color .18s;
  min-height:44px;line-height:2;display:inline-block;
}
.btn-ghost:hover{border-color:rgba(92,61,46,0.3);color:var(--ink)}
.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:var(--cocoa-mu);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:fadeUp 1s cubic-bezier(.16,1,.3,1) .45s both;
}
.hero-scroll-line{width:1px;height:44px;background:var(--cocoa-mu);animation:lineGrow 2.4s ease-in-out infinite}
@keyframes lineGrow{0%,100%{transform:scaleY(0.4);opacity:.25}50%{transform:scaleY(1);opacity:.6}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}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 ─────────────────────────────────────────────── */
.ship-badge{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,2.5vw,28px) var(--g);
  border-top:1px solid rgba(92,61,46,0.10);
  border-bottom:1px solid rgba(92,61,46,0.10);
  background:var(--cream);
}
.ship-badge[data-dark]{
  background:var(--cream);
  border-top:1px solid rgba(92,61,46,0.12);
  border-bottom:1px solid rgba(92,61,46,0.12);
}
.ship-badge-inner{
  display:flex;align-items:center;gap:clamp(16px,2.5vw,36px);
  max-width:var(--max);width:100%;justify-content:center;
}
.ship-rule{
  flex:1;max-width:200px;height:1px;
  background:linear-gradient(to right,transparent,#B8860B);
  opacity:0.6;
}
.ship-rule.r{
  background:linear-gradient(to left,transparent,#B8860B);
  opacity:0.6;
}
.ship-badge[data-dark] .ship-rule{
  background:linear-gradient(to right,transparent,#B8860B);
  opacity:0.6;
}
.ship-badge[data-dark] .ship-rule.r{
  background:linear-gradient(to left,transparent,#B8860B);
  opacity:0.6;
}
.ship-badge-content{
  display:flex;align-items:center;gap:clamp(10px,1.5vw,18px);
  flex-shrink:0;
}
@keyframes globeSpin{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}
.ship-globe{
  width:clamp(20px,2vw,26px);height:clamp(20px,2vw,26px);
  opacity:1;flex-shrink:0;
  /* gold tint via CSS filter — hue-rotate to amber */
  filter:sepia(1) saturate(2.5) hue-rotate(5deg) brightness(0.85);
  animation:globeSpin 8s linear infinite;
  transform-origin:center center;
}
.ship-badge[data-dark] .ship-globe{opacity:1;filter:sepia(1) saturate(2.5) hue-rotate(5deg) brightness(0.95);}
.ship-text{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;
  background:linear-gradient(90deg,#8A6508,#B8860B,#8A6508);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  white-space:nowrap;
}
.ship-badge[data-dark] .ship-text{
  background:linear-gradient(90deg,#B8860B,#E3B23A,#B8860B);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.ship-dot{
  width:3px;height:3px;border-radius:50%;
  background:#B8860B;flex-shrink:0;opacity:0.8;
}
.ship-badge[data-dark] .ship-dot{background:#B8860B;opacity:0.8;}
.ship-sub{
  font-family:'Courier New',monospace;font-size:12px;font-weight:600;
  letter-spacing:0.20em;text-transform:uppercase;
  color:rgba(139,105,20,0.60);white-space:nowrap;
}
.ship-badge[data-dark] .ship-sub{color:rgba(184,134,11,0.55);}
@media(max-width:600px){
  .ship-rule{display:none}
  .ship-text{font-size:12px;letter-spacing:0.20em}
  .ship-sub{display:none}
}

.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:20px;
}
.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;
}

/* ── INGREDIENTS ─────────────────────────────────────────────────── */
.ingredients{background:var(--sand);position:relative;overflow:hidden}
.ingredients::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:rgba(248,244,236,0.06);
}
.ingredients-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.ing-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
  padding-bottom:clamp(40px,6vw,72px);
  border-bottom:1px solid rgba(248,244,236,0.06);
  margin-bottom:0;
}
.ing-header-left{}
.ing-header-eyebrow{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.38em;text-transform:uppercase;
  color:var(--cocoa-mid);display:block;margin-bottom:16px;
}
.ing-header-h2{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(42px,6vw,96px);
  letter-spacing:-0.02em;line-height:0.88;
  color:rgba(248,244,236,0.92);
  text-transform:uppercase;
}
.ing-decree{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.32em;text-transform:uppercase;
  color:rgba(248,244,236,0.22);
  max-width:260px;line-height:2.2;text-align:right;
}

/* Row system */
.ing-rows{display:flex;flex-direction:column}
.ing-row{
  display:grid;
  grid-template-columns: clamp(52px,5vw,80px) 1fr clamp(180px,22vw,320px);
  gap:0;
  border-bottom:1px solid rgba(248,244,236,0.06);
  position:relative;overflow:hidden;
  cursor:none!important;
  transition:background .35s cubic-bezier(.16,1,.3,1);
}
.ing-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--cocoa);opacity:0.12;
  transition:width .5s cubic-bezier(.16,1,.3,1);
}
.ing-row:hover::before{width:100%}
.ing-row:hover{background:rgba(248,244,236,0.02)}

/* Left axis — vertical number */
.ing-axis{
  border-right:1px solid rgba(248,244,236,0.06);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:clamp(32px,4vw,52px);
}
.ing-axis-num{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:12px;letter-spacing:0.12em;
  color:rgba(248,244,236,0.2);
  writing-mode:vertical-rl;text-orientation:mixed;
  transform:rotate(180deg);
  user-select:none;
}

/* Center — main content */
.ing-main{
  padding:clamp(36px,5vw,72px) clamp(32px,4vw,60px);
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(180px,20vw,280px);
  position:relative;
}
.ing-tag{
  font-family:'Courier New',monospace;font-size:clamp(13px,1.2vw,15px);font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(248,244,236,0.55);margin-bottom:clamp(16px,2vw,28px);
  display:flex;align-items:center;gap:16px;
}
.ing-tag::after{
  content:'';display:block;height:1px;width:40px;
  background:rgba(248,244,236,0.18);flex-shrink:0;
}
.ing-subregion{
  display:block;font-family:'Courier New',monospace;
  font-size:clamp(12px,1.1vw,14px);font-weight:600;
  letter-spacing:0.26em;text-transform:uppercase;
  color:rgba(248,244,236,0.24);
  margin-top:10px;margin-bottom:clamp(16px,2vw,28px);
}
.ing-name{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;
  font-size:clamp(44px,6.5vw,110px);
  letter-spacing:-0.04em;line-height:0.88;
  color:rgba(248,244,236,0.92);
  transition:letter-spacing .4s cubic-bezier(.16,1,.3,1),color .35s;
}
.ing-row:hover .ing-name{
  letter-spacing:-0.02em;
  color:rgba(248,244,236,1);
}
.ing-desc{
  font-size:clamp(12px,1.3vw,15px);
  color:rgba(248,244,236,0.32);line-height:1.7;
  max-width:520px;
  margin-top:clamp(20px,2.5vw,32px);
  transition:color .35s;
}
.ing-row:hover .ing-desc{color:rgba(248,244,236,0.48)}
.ing-terroir{
  font-family:'Courier New',monospace;
  font-size: clamp(12.5px,1.15vw,14.5px);
  color:rgba(248,244,236,0.30);
  line-height:1.75;
  max-width:480px;
  margin-top:clamp(14px,1.8vw,22px);
  padding-top:clamp(12px,1.5vw,18px);
  border-top:1px solid rgba(248,244,236,0.07);
  transition:color .35s;
  letter-spacing:0.01em;
}
.ing-row:hover .ing-terroir{color:rgba(248,244,236,0.36)}

/* Right — provenance data panel */
.ing-data{
  border-left:1px solid rgba(248,244,236,0.06);
  padding:clamp(28px,3.5vw,52px) clamp(24px,3vw,44px);
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(20px,2.5vw,32px);
}
.ing-coords{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.2);line-height:2.2;
}
.ing-coords span{
  display:block;color:rgba(248,244,236,0.18);font-size:11px;
  letter-spacing:0.18em;margin-top:2px;
}
.ing-stat{
  display:flex;flex-direction:column;gap:4px;
}
.ing-stat-val{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(18px,2.2vw,32px);
  letter-spacing:-0.03em;color:rgba(248,244,236,0.65);
  line-height:1;
}
.ing-stat-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.18);
}

/* Provenance bar */
.ing-bar-wrap{margin-top:auto}
.ing-bar-label{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(248,244,236,0.16);margin-bottom:8px;
  display:flex;justify-content:space-between;
}
.ing-bar{
  height:2px;background:rgba(248,244,236,0.07);
  position:relative;overflow:hidden;
}
.ing-bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:var(--cocoa-mid);opacity:0.7;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
.ing-row.in-view .ing-bar-fill{transform:scaleX(1)}

/* ── INGREDIENT ROW — staggered child entrance ──────────────────────── */
/* Each inner element starts hidden; cascades in when row enters viewport */
.ing-tag,
.ing-subregion,
.ing-name,
.ing-desc,
.ing-terroir,
.ing-axis-num,
.ing-data {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s cubic-bezier(.16,1,.3,1),
    transform 0.55s cubic-bezier(.16,1,.3,1);
}
.ing-row.in-view .ing-tag       { opacity:1; transform:none; transition-delay: 0.04s; }
.ing-row.in-view .ing-axis-num  { opacity:1; transform:none; transition-delay: 0.08s; }
.ing-row.in-view .ing-subregion { opacity:1; transform:none; transition-delay: 0.12s; }
.ing-row.in-view .ing-name      { opacity:1; transform:none; transition-delay: 0.18s; }
.ing-row.in-view .ing-desc      { opacity:1; transform:none; transition-delay: 0.28s; }
.ing-row.in-view .ing-terroir   { opacity:1; transform:none; transition-delay: 0.36s; }
.ing-row.in-view .ing-data      { opacity:1; transform:none; transition-delay: 0.22s; }

/* Mobile */
@media(max-width:760px){
  .ing-row{grid-template-columns:40px 1fr;grid-template-rows:auto auto}
  .ing-data{grid-column:1/-1;border-left:none;border-top:1px solid rgba(248,244,236,0.06);
    flex-direction:row;flex-wrap:wrap;gap:16px}
  .ing-name{font-size:clamp(36px,11vw,60px)}
  .ing-bar-wrap{display:none}
}

/* ── RITUAL ─────────────────────────────────────────────────── */
.ritual{background:var(--sand-mid)}
.ritual-inner{max-width:var(--max);margin:0 auto}
.ritual-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:20px;
}
.ritual-h2{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(38px,5.5vw,82px);
  letter-spacing:-0.03em;line-height:0.93;
  color:rgba(248,244,236,0.9);
  margin-bottom:clamp(60px,8vw,100px);
}
.steps{display:flex;flex-direction:column;gap:2px}
.step{
  display:grid;
  grid-template-columns:clamp(48px,5vw,72px) 1fr clamp(100px,12vw,180px);
  gap:clamp(24px,3.5vw,56px);align-items:start;
  background:rgba(248,244,236,0.025);
  border:1px solid rgba(248,244,236,0.04);
  padding:clamp(32px,4vw,56px) clamp(24px,3vw,40px);
  transition:background .2s;
}
.step:hover{background:rgba(248,244,236,0.04)}
.step > div{min-width:0}
@media(max-width:700px){
  .step{grid-template-columns:clamp(36px,8vw,52px) 1fr;grid-template-rows:auto auto}
  .step-meta{grid-column:2;margin-top:12px}
}
.step-num{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(13px,1.4vw,18px);
  letter-spacing:0.04em;color:rgba(248,244,236,0.22);
  line-height:1;padding-top:6px;
}
.step-meta{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.26em;text-transform:uppercase;
  color:rgba(248,244,236,0.28);text-align:right;
  padding-top:6px;white-space:nowrap;
  line-height:1.8;
}
.step-title{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(20px,2.5vw,38px);
  letter-spacing:-0.03em;line-height:0.95;
  color:rgba(248,244,236,0.82);margin-bottom:10px;
}
.step-text{
  font-size:clamp(13px,1.5vw,16px);
  color:rgba(248,244,236,0.32);line-height:1.7;
}
.step-alts{
  display:flex;flex-wrap:wrap;gap:2px;
  margin-top:16px;
  border-top:1px solid rgba(248,244,236,0.06);
  padding-top:14px;
}
.step-alt{
  display:flex;align-items:baseline;gap:8px;
  font-family:'Courier New',monospace;
  padding:6px 14px;
  border:1px solid rgba(248,244,236,0.07);
  background:rgba(248,244,236,0.03);
}
.step-alt-time{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(13px,1.4vw,17px);
  letter-spacing:-0.02em;
  color:rgba(248,244,236,0.65);
  white-space:nowrap;
}
.step-alt-label{
  font-size:11px;font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;
  color:rgba(248,244,236,0.25);
  white-space:nowrap;
}


/* ── NUTRITION ─────────────────────────────────────────────────── */
.nutrition{background:var(--cream)}
.nutrition-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);
  align-items:start;
}
@media(max-width:860px){.nutrition-inner{grid-template-columns:1fr}}
.nutrition-left{}
.nutrition-right{}
.nutr-headline{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(52px,7vw,110px);
  letter-spacing:-0.04em;line-height:0.85;
  color:var(--ink);margin-bottom:clamp(24px,3vh,40px);
}
.nutr-intro{
  font-size:clamp(14px,1.6vw,18px);
  color:var(--cocoa-lt);line-height:1.75;
  max-width:420px;
  margin-bottom:clamp(32px,4vh,48px);
}
.nutr-table{
  width:100%;border-collapse:collapse;
}
.nutr-table tr{border-bottom:1px solid var(--cocoa-fa)}
.nutr-table tr:last-child{border-bottom:none}
.nutr-table th,.nutr-table td{
  padding:13px 0;vertical-align:middle;
}
.nutr-table th{font-weight:inherit;text-align:left}
.nutr-table tr>:first-child{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.26em;text-transform:uppercase;color:var(--cocoa-mu);
  width:55%;padding-right:16px;
}
.nutr-table tr>:last-child{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:clamp(14px,1.6vw,18px);
  letter-spacing:-0.01em;color:var(--ink);text-align:right;
}
.nutr-note{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--cocoa-mu);margin-top:20px;line-height:1.8;
}
.nutr-tags{display:flex;flex-direction:column;gap:8px;margin-top:32px}
.nutr-tags-row{display:flex;flex-wrap:nowrap;gap:8px}
.nutr-tag{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.26em;text-transform:uppercase;
  color:var(--cocoa);background:var(--cocoa-fa);
  border:1px solid rgba(92,61,46,0.12);
  border-left:3px solid rgba(92,61,46,0.28);
  padding:9px 14px 9px 13px;
}
.nutr-tag.nt-orange{
  color:#fff;
  background:var(--err);
  border-color:var(--err);
  border-left-color:rgba(0,0,0,0.18);
  font-weight:700;
}
/* Celiac Safe — teal left accent: medical precision, zero cross-contamination */
.nutr-tag.nt-celiac{
  border-left:3px solid var(--teal);
  background:rgba(74,124,111,0.06);
  color:var(--cocoa);
}
/* High Fibre — amber-brown left accent: plant origin, roughage, natural */
.nutr-tag.nt-fibre{
  border-left:3px solid var(--amber);
  background:rgba(139,105,20,0.06);
  color:var(--cocoa);
}
/* High Vitamin — gold left accent: vitality, nutritional density */
.nutr-tag.nt-vitamin{
  border-left:3px solid var(--gold);
  background:rgba(184,134,11,0.07);
  color:var(--cocoa);
}

/* ── ORIGINS ─────────────────────────────────────────────────── */
.origins{background:var(--sand);position:relative;overflow:hidden}
.origins::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  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;
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 15%, rgba(0,0,0,0.6) 85%, transparent 100%);
}
.origins-inner{max-width:var(--max);margin:0 auto;position:relative;z-index:1}
.origins-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:20px;
}
.origins-h2{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(38px,5.5vw,82px);
  letter-spacing:-0.03em;line-height:0.93;
  color:rgba(248,244,236,0.9);
  margin-bottom:clamp(60px,8vw,100px);
}
.origin-items{display:flex;flex-direction:column;gap:0}
.origin-item{
  display:grid;
  grid-template-columns:clamp(48px,5vw,72px) 1fr;
  gap:0 clamp(24px,3.5vw,56px);align-items:start;
  padding:clamp(40px,5vw,72px) 0;
  border-bottom:1px solid rgba(248,244,236,0.05);
}
.origin-item:last-child{border-bottom:none}
.oi-num{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(12px,1.2vw,15px);
  letter-spacing:0.1em;color:rgba(248,244,236,0.2);
  line-height:1;padding-top:8px;
}
.oi-content{min-width:0}
.oi-label{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--cocoa-mid);display:block;margin-bottom:14px;
}
.oi-name{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(48px,7vw,110px);
  letter-spacing:-0.04em;line-height:0.88;
  color:rgba(248,244,236,0.88);margin-bottom:16px;
}
.oi-geo{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.26em;text-transform:uppercase;
  color:rgba(248,244,236,0.22);margin-bottom:20px;
}
.oi-quote{
  font-size:clamp(14px,1.6vw,18px);
  color:rgba(248,244,236,0.38);line-height:1.75;
  max-width:620px;
}

/* ── WHO ─────────────────────────────────────────────────── */
.who{background:var(--cream-deep)}
.who-inner{max-width:var(--max);margin:0 auto}
.who-header{margin-bottom:clamp(60px,8vw,100px)}
.who-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
@media(max-width:760px){.who-cols{grid-template-columns:1fr}}
.who-col{
  background:var(--cream);
  padding:clamp(36px,4.5vw,64px) clamp(24px,3vw,40px);
  border:1px solid var(--cocoa-fa);
  transition:background .2s;
}
.who-col:hover{background:rgba(248,244,236,0.7)}
.wc-icon{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(48px,6vw,88px);
  letter-spacing:-0.04em;line-height:0.9;
  color:rgba(92,61,46,0.1);margin-bottom:20px;display:block;
}
.wc-title{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(18px,2.2vw,30px);
  letter-spacing:-0.02em;line-height:1.1;
  color:var(--ink);margin-bottom:14px;
}
.wc-text{
  font-size:clamp(13px,1.5vw,16px);
  color:var(--cocoa-lt);line-height:1.75;
}

/* ── RITUAL SUMMARY ─────────────────────────────────────────────────── */
.summary{background:linear-gradient(180deg,#B98A4E 0%,#8A5F3A 55%,#5C3D2E 100%);position:relative;overflow:hidden}
.summary::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;
}
.summary-inner{
  max-width:var(--max);margin:0 auto;position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:stretch;
}
@media(max-width:760px){.summary-inner{grid-template-columns:1fr}}
.sum-item{
  padding:clamp(52px,7vw,96px) clamp(28px,3.5vw,52px);
  border-right:1px solid rgba(248,244,236,0.08);
  display:flex;flex-direction:column;
}
.sum-item:last-child{border-right:none}
/* Panel header */
.sum-num{
  font-family:'Courier New',monospace;font-size:13px;font-weight:700;
  letter-spacing:0.28em;color:rgba(248,244,236,0.30);
  display:block;margin-bottom:18px;
}
.sum-label{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(64px,8vw,120px);
  letter-spacing:-0.04em;line-height:0.85;
  color:rgba(248,244,236,0.92);display:block;margin-bottom:20px;
}
.sum-val{
  font-family:'Courier New',monospace;font-size:clamp(13px,1.1vw,14px);
  font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(248,244,236,0.45);display:block;margin-bottom:8px;
}
.sum-desc{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.22);line-height:2;
}
/* Alt time badges */
.sum-alts{
  display:flex;flex-direction:column;gap:2px;
  margin-top:clamp(20px,2.5vw,32px);
}
.sum-alt{
  display:flex;align-items:baseline;gap:8px;
  padding:8px 14px;
  border:1px solid rgba(248,244,236,0.18);
  background:rgba(248,244,236,0.06);
}
.sum-alt-primary{
  border-color:rgba(248,244,236,0.22);
  background:rgba(248,244,236,0.08);
}
.sum-alt-primary .sum-alt-time{color:rgba(248,244,236,0.9)}
.sum-alt-primary .sum-alt-label{color:rgba(248,244,236,0.45)}
.sum-alt-time{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(13px,1.3vw,17px);
  letter-spacing:-0.02em;color:rgba(248,244,236,0.85);white-space:nowrap;
}
.sum-alt-label{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.55);white-space:nowrap;
}
/* Steps block */
.sum-steps{
  margin-top:auto;
  padding-top:clamp(28px,3.5vw,48px);
  border-top:1px solid rgba(248,244,236,0.1);
  display:flex;flex-direction:column;
}
.sum-step{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:0 14px;align-items:start;
  padding:clamp(14px,1.8vw,22px) 0;
  border-bottom:1px solid rgba(248,244,236,0.06);
}
.sum-step:last-child{border-bottom:none}
.sum-step > div{min-width:0}
.sum-step-num{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:12px;
  letter-spacing:0.08em;color:rgba(248,244,236,0.3);
  padding-top:3px;display:block;
}
.sum-step-title{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:clamp(13px,1.3vw,16px);
  letter-spacing:-0.01em;line-height:1.15;
  color:rgba(248,244,236,0.8);margin-bottom:4px;
}
.sum-step-text{
  font-size:clamp(12px,1.1vw,14px);
  color:rgba(248,244,236,0.3);line-height:1.6;
}
.sum-step-meta{
  font-family:'Courier New',monospace;
  font-size:11px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(248,244,236,0.2);
  white-space:nowrap;padding-top:3px;display:block;
  text-align:right;
}
/* Break panel — quote treatment */
.sum-break-quote{
  margin-top:auto;
  padding-top:clamp(28px,3.5vw,48px);
  border-top:1px solid rgba(248,244,236,0.1);
}
.sum-break-line{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(22px,2.8vw,38px);
  letter-spacing:-0.03em;line-height:1.1;
  color:rgba(248,244,236,0.55);display:block;
  margin-bottom:clamp(12px,1.5vw,20px);
}
.sum-break-body{
  font-size:clamp(12px,1.1vw,14px);
  color:rgba(248,244,236,0.28);line-height:1.7;max-width:280px;
}
.sum-step-spacer{
  flex:1;
}

/* ── ORDER ─────────────────────────────────────────────────── */
.order-section{background:var(--dark);position:relative;overflow:hidden}
/* ── ORDER SECTION GRID (fades in toward footer) ─── */
.order-section::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(248,244,236,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,134,11,0.12) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,1) 100%);
  pointer-events:none;z-index:0;
}
.order-inner{position:relative;z-index:1;}

.order-inner{max-width:var(--max);margin:0 auto}
.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:20px;
}
.order-h2{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(48px,7vw,110px);
  letter-spacing:-0.02em;line-height:0.88;
  color:rgba(248,244,236,0.9);
  text-transform:uppercase;
  margin-bottom:clamp(48px,6vh,80px);
}
.order-grid{
  display:grid;grid-template-columns:1fr 1px 1fr;gap:0;
  margin-bottom:clamp(48px,6vw,80px);
}
@media(max-width:760px){.order-grid{grid-template-columns:1fr}}
.order-divider{background:rgba(248,244,236,0.05)}
.order-info{padding-right:clamp(32px,4vw,64px)}
.order-info-right{padding-left:clamp(32px,4vw,64px)}
@media(max-width:760px){.order-info{padding:0;margin-bottom:40px}.order-info-right{padding:0}}
.oi-sub{
  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);margin-bottom:28px;line-height:1.8;
}
.price-block{
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:8px;
}
.price-main{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;font-size:clamp(52px,7vw,100px);
  letter-spacing:-0.04em;line-height:0.9;
  color:rgba(248,244,236,0.9);
}
.price-unit{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.26em;text-transform:uppercase;
  color:rgba(248,244,236,0.28);
}
.price-note{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.22);margin-bottom:32px;line-height:1.8;
}
.order-form{display:flex;flex-direction:column;gap: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.3);display:block;margin-bottom:6px;
}
.form-row input,.form-row select{
  width:100%;background:rgba(248,244,236,0.05);
  border:1px solid rgba(248,244,236,0.1);
  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 .18s;
  -webkit-appearance:none;appearance:none;
  caret-color:rgba(248,244,236,0.85);
}
.form-row input:-webkit-autofill,
.form-row input:-webkit-autofill:hover,
.form-row input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px rgba(24,14,8,0.95) inset!important;
  -webkit-text-fill-color:rgba(248,244,236,0.85)!important;
  caret-color:rgba(248,244,236,0.85);
}
.form-row input:focus,.form-row select:focus{border-color:rgba(92,61,46,0.5)}
.form-row select option{background:var(--dark);color:var(--cream)}
.form-note{
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(248,244,236,0.55);line-height:1.8;
}
.btn-order{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:700;font-size:12px;letter-spacing:0.20em;text-transform:uppercase;
  background:var(--cocoa);color:var(--cream);
  padding:18px 40px;border:none;min-height:52px;
  display:inline-block;width:100%;
  text-align:center;
  position:relative;overflow:hidden;
  transition:color .28s ease, letter-spacing .28s ease;
  cursor:none!important;
}
.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;
}
.btn-order span, .btn-order:not(:has(span)) {
  position:relative;z-index:1;
}
@media (hover:hover) {
  .btn-order:hover::before { transform:translateY(0); }
  .btn-order:hover { letter-spacing:0.26em; }
}
.btn-order:disabled{opacity:0.5;pointer-events:none}

#order-msg{
  margin-top:16px;
  font-family:'Courier New',monospace;font-size:13px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  min-height:20px;line-height:1.8;
}
#order-msg.ok{color:var(--cocoa-mid)}
#order-msg.err{color:var(--err)}



/* ── 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.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,244,236,0.03) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;z-index:0;
}
.footer-links,.footer-logo,.footer-copy{position:relative;z-index:1;background:transparent!important;}
footer *{background:transparent!important;}
footer nav,footer p,footer a{background:transparent!important;background-color: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(20px);
  will-change:transform,opacity;
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);
}
.reveal.visible{opacity:1;transform:translateY(0);will-change:auto}
.reveal-d1{transition-delay:.12s}
.reveal-d2{transition-delay:.24s}
.reveal-d3{transition-delay:.36s}

/* ── 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}

  /* Hero — full viewport, content readable */
  .hero{padding-bottom:clamp(40px,8vh,80px);padding-top:clamp(80px,14vh,120px)}
  .hero-top{position:relative;top:auto;left:auto;margin-bottom:clamp(20px,4vh,36px);animation:none;opacity:1;transform:none}
  .hero-headline{font-size:clamp(44px,13vw,72px);line-height:0.88}
  .hero-headline span{font-size:clamp(15px,4vw,22px);margin-top:12px}
  .hero-sub{font-size:clamp(14px,3.8vw,18px);margin-bottom:20px}
  .hero-decree{font-size:11px;letter-spacing:0.18em;line-height:1.9;margin-bottom:16px}
  .hero-products{max-width:100%;gap:3px}

  /* Product cards */
  .hero-product{padding:clamp(20px,5vw,28px)}
  .hp-name{font-size:clamp(32px,9vw,48px);margin-bottom:8px}
  .hp-origin{font-size:11px;letter-spacing:0.16em;margin-bottom:10px;white-space:normal;overflow:visible;text-overflow:clip}
  .hp-desc{font-size:13px;line-height:1.6;margin-bottom:14px}
  .hp-stats{gap:clamp(12px,4vw,20px);margin-bottom:14px;padding-top:12px}
  .hp-stat-val{font-size:clamp(18px,5vw,26px)}
  .hp-stat-key{font-size:11px;letter-spacing:0.18em}
  .hp-footer{padding-top:12px}

  /* 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.18em}
  .footer-link:last-child{border-bottom:none}
  .footer-copy{text-align:left;padding-top:20px;font-size:11px}

  /* Ticker — slower on mobile, slightly 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}
  .hero-cta-row{flex-direction:column;gap:8px}
}

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

/* ── BREAD — MOBILE SPECIFIC ─────────────────────────────────────── */
@media(max-width:480px){
  .ing-terroir{font-size:12px;padding-top:14px;margin-top:14px}
  .ing-name{font-size:clamp(36px,10vw,56px)}
  .step{padding:24px 16px;gap:12px}
  .step-title{font-size:clamp(18px,5.5vw,28px)}
  .step-meta{white-space:normal;letter-spacing:0.16em;line-height:1.7}
  .nutr-headline{font-size:clamp(44px,13vw,72px)}
  .origin-item{padding:28px 0;gap:16px}
  .oi-name{font-size:clamp(26px,7.5vw,40px)}
  .oi-quote{font-size:13px}
  .who-cols{gap:2px}
  .who-col{padding:28px 20px}
  .summary-inner{gap:0}
  .sum-item{padding:40px 24px;border-right:none;border-bottom:1px solid rgba(248,244,236,0.08)}
  .sum-item:last-child{border-bottom:none}
  .sum-break-quote{padding-top:32px}
  .sum-item:last-child{border-bottom:none}
  .order-form{gap:8px}
  .price-main{font-size:clamp(44px,13vw,72px)}
}

/* ── 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,#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-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){
  .tasting-note,.pillar,.who-col{
    transition:background .2s,transform .2s cubic-bezier(.16,1,.3,1);
  }
  .tasting-note:hover,.pillar:hover,.who-col:hover{
    transform:translateY(-2px);
  }
}

/* Supply chain steps — left accent on hover */
.chain-step{
  transition:padding-left .2s cubic-bezier(.16,1,.3,1);
  border-left:2px solid transparent;
}
@media(hover:hover){
  .chain-step:hover{padding-left:12px;border-left-color:var(--cocoa-mid)}
}

/* Step items (ritual/brew method) — same treatment */
.step{transition:background .2s,padding-left .2s}
@media(hover:hover){
  .step:hover{padding-left:calc(clamp(24px,3vw,40px) + 8px)}
}

/* 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;
}
@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;}
}

/* ── GRAIN SCATTER — Creativity AC-02 ───────────────────────────────── */
/* The three ingredients scatter like grains thrown on linen.            */
/* Still the cursor over the hero. Wait. Then: flour disperses wide,    */
/* psyllium husk drifts and tumbles, Alpine salt crystals fall short.   */
/* Each physics profile exists only because of what the ingredient is.  */

.hero-ingredients-scatter{
  position:absolute;inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:3;
}
.scatter-word{
  position:absolute;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;
  font-size:clamp(13px,1.5vw,20px);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(248,244,236,0);
  white-space:nowrap;
  pointer-events:none;
  will-change:transform,opacity,color;
  transition:none;
  transform:translate(-50%,-50%) rotate(0deg) scale(1);
}

/* ── STATES ── */
.scatter-word.settled{
  color:rgba(248,244,236,0.22);
  transition:transform 3s cubic-bezier(.16,1,.3,1),
             color 1.4s ease;
}
.scatter-word.scattered{
  color:rgba(248,244,236,0.72);
  transition:transform var(--scatter-dur,1.6s) cubic-bezier(.16,1,.3,1),
             color 0.5s ease;
}
.scatter-word.returning{
  color:rgba(248,244,236,0.22);
  transition:transform 3.2s cubic-bezier(.16,1,.3,1),
             color 2.4s ease 0.6s;
}

/* ── HINT ── */
.hero-scatter-hint{
  position:absolute;
  bottom:22%;left:50%;
  transform:translateX(-50%);
  font-family:'Courier New',monospace;
  font-size: 11px;
  letter-spacing:0.38em;
  text-transform:uppercase;
  color:rgba(248,244,236,0);
  pointer-events:none;
  z-index:4;
  white-space:nowrap;
  transition:color 0.8s ease, opacity 0.8s ease;
  opacity:0;
}
.hero-scatter-hint.hinting{
  color:rgba(248,244,236,0.22);
  opacity:1;
}
.hero-scatter-hint.gone{
  color:rgba(248,244,236,0) !important;
  opacity:0 !important;
  transition:color 0.25s ease, opacity 0.25s ease !important;
}

/* ── HOLD PROGRESS RING ── */
/* Replaces the existing cursor ring during hold — sits at cursor position */
.scatter-hold-ring{
  position:fixed;
  width:52px;height:52px;
  pointer-events:none;
  z-index:9996;
  opacity:0;
  transition:opacity .25s ease;
  transform:translate(-50%,-50%);
  top:0;left:0;
}
.scatter-hold-ring.active{opacity:1;}
.scatter-hold-ring circle.track{
  fill:none;
  stroke:rgba(248,244,236,0.12);
  stroke-width:1;
}
.scatter-hold-ring circle.fill{
  fill:none;
  stroke:rgba(248,244,236,0.55);
  stroke-width:1;
  stroke-dasharray:141.4;
  stroke-dashoffset:141.4;
  stroke-linecap:round;
  transform-origin:50% 50%;
  transform:rotate(-90deg);
  transition:stroke-dashoffset 1.5s linear;
}
.scatter-hold-ring.filling circle.fill{
  stroke-dashoffset:0;
}

@media(prefers-reduced-motion:reduce){
  .scatter-word,
  .scatter-hold-ring,
  .hero-scatter-hint{display:none!important}
}
@media(max-width:480px){
  .scatter-word{font-size:clamp(11px,3.5vw,15px);}
}
@media(max-width:600px){
  .scatter-word{font-size:clamp(14px,4.5vw,20px);}
}

/* ── 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;}
}


/* ========== */



/* ── Bread qty card grid (US2-AC1) ──────────────────────── */
.qty-label{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#6b6560;margin-bottom:.5rem}
.bread-qty-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:.25rem}
.bread-qty-card{background:#fff;border:1.5px solid #e2ddd8;border-radius:0;padding:.65rem .25rem .55rem;cursor:none!important;display:flex;flex-direction:column;align-items:center;gap:.15rem;transition:border-color .18s,background .18s,transform .2s cubic-bezier(.16,1,.3,1);font-family:inherit;color:inherit}
.bread-qty-card:hover{border-color:#b8a898;transform:translateY(-2px)}
.bread-qty-card.selected{border-color:#3b2a1a;background:#3b2a1a;color:#fff}
.bread-qty-card.selected .bqc-price{color:#e8d5b0}
.bqc-count{font-size:1.1rem;font-weight:700;line-height:1}
.bqc-unit{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.bqc-price{font-size:.78rem;font-weight:600;margin-top:.15rem}
@media(max-width:420px){.bread-qty-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Baker's Blessing (US4-AC4) ─────────────────────────────────── */
.blessing{
  background:var(--ink);
  padding:clamp(96px,13vw,160px) var(--g);
  position:relative;
  overflow:hidden;
}
/* Subtle grain texture overlay */
.blessing::before{
  content:'';
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:0.4;
  pointer-events:none;
}
.blessing-inner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr clamp(600px,82vw,1100px) 1fr;
  align-items:center;
  gap:clamp(24px,3vw,40px);
}
@media(max-width:760px){
  .blessing-inner{
    grid-template-columns:1fr;
    gap:40px;
  }
}
.blessing-rule{
  height:1px;
  background:rgba(248,244,236,0.10);
}
@media(max-width:760px){
  .blessing-rule{display:none;}
}
.blessing-body{
  text-align:center;
  position:relative;z-index:1;
}
.blessing-eyebrow{
  display:block;
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(248,244,236,0.40);
  margin-bottom:clamp(28px,3.5vw,44px);
}
.blessing-quote{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:900;
  line-height:0.93;
  color:var(--cream);
  letter-spacing:-.03em;
  text-transform:uppercase;
  font-style:normal;
  margin-bottom:0;
}
/* MY BREAD — intimate opener, slightly smaller */
.blessing-quote:first-of-type{
  font-size:clamp(2.4rem,5.5vw,5.2rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:rgba(248,244,236,0.80);
  line-height:1;
}
/* PANEM NOSTRUM COTIDIANUM — the centrepiece */
.blessing-quote:nth-of-type(2){
  font-size:clamp(3.8rem,8.5vw,9rem);
}
.blessing-sub{
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(248,244,236,0.40);
  line-height:1.8;
  margin-top:clamp(20px,2.5vw,32px);
}
/* Tighter gap between MY BREAD and centrepiece; more air before translation */
.blessing-quote + .blessing-quote{margin-top:clamp(6px,0.8vw,10px);}
.blessing-quote + .blessing-quote + .blessing-quote{margin-top:clamp(20px,2.5vw,32px);}
.blessing-translation{
  font-size:clamp(.8rem,1.4vw,1.1rem) !important;
  font-weight:600 !important;
  letter-spacing:.18em !important;
  color:rgba(248,244,236,0.38) !important;
  font-family:'Courier New',monospace !important;
  line-height:1.6 !important;
}

/* ── 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, background-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, background-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;
}
/* Fire only after preloader lifts (body.pnc-revealed added by pnc-preloader.js) */
/* On return visits, script.js adds pnc-revealed on DOMContentLoaded */
body.pnc-revealed .hero-headline .hl-clip:nth-child(1) .hl-inner {
  animation: hlRise 1.1s cubic-bezier(.16,1,.3,1) 0.05s forwards;
}
body.pnc-revealed .hero-headline .hl-clip:nth-child(2) .hl-inner {
  animation: hlRise 1.1s cubic-bezier(.16,1,.3,1) 0.18s forwards;
}
body.pnc-revealed .hero-headline .hl-clip:nth-child(3) .hl-inner {
  animation: hlRise 1.1s cubic-bezier(.16,1,.3,1) 0.30s forwards;
}
@keyframes hlRise {
  to { transform: translateY(0); opacity: 1; }
}
.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);
  opacity: 0;
  transform: translateY(12px);
}
body.pnc-revealed .hero-headline .hl-sub {
  animation: hlSubFade 1.2s cubic-bezier(.16,1,.3,1) 0.44s forwards;
}
@keyframes hlSubFade {
  to { 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;
  }
}

/* ── SAND PALETTE OVERRIDES — ingredients / ritual / origins ─────── */
/* These sections now use warm sand backgrounds; flip cream text to ink */

/* ingredients */
.ingredients .ing-header-h2         { color: var(--ink) }
.ingredients .ing-decree            { color: rgba(74,48,24,0.38) }
.ingredients .ing-header            { border-bottom-color: rgba(74,48,24,0.1) }
.ingredients .ing-row               { border-bottom-color: rgba(74,48,24,0.1) }
.ingredients .ing-row::before       { background: var(--cocoa); opacity: 0.18 }
.ingredients .ing-row:hover         { background: rgba(74,48,24,0.04) }
.ingredients .ing-axis              { border-right-color: rgba(74,48,24,0.1) }
.ingredients .ing-axis-num          { color: rgba(74,48,24,0.22) }
.ingredients .ing-tag               { color: rgba(74,48,24,0.55) }
.ingredients .ing-tag::after        { background: rgba(74,48,24,0.18) }
.ingredients .ing-subregion         { color: rgba(74,48,24,0.3) }
.ingredients .ing-name              { color: var(--ink) }
.ingredients .ing-row:hover .ing-name { color: var(--ink) }
.ingredients .ing-desc              { color: rgba(74,48,24,0.5) }
.ingredients .ing-row:hover .ing-desc { color: rgba(74,48,24,0.7) }
.ingredients .ing-terroir           { color: rgba(74,48,24,0.4); border-top-color: rgba(74,48,24,0.1) }
.ingredients .ing-row:hover .ing-terroir { color: rgba(74,48,24,0.55) }
.ingredients .ing-data              { border-left-color: rgba(74,48,24,0.1) }
.ingredients .ing-coords            { color: rgba(74,48,24,0.28) }
.ingredients .ing-coords span       { color: rgba(74,48,24,0.2) }
.ingredients .ing-stat-val          { color: rgba(74,48,24,0.65) }
.ingredients .ing-stat-label        { color: rgba(74,48,24,0.22) }
.ingredients .ing-bar-label         { color: rgba(74,48,24,0.22) }
.ingredients .ing-bar               { background: rgba(74,48,24,0.1) }
.ingredients .ing-bar-fill          { background: var(--cocoa); opacity: 0.8 }
.ingredients::after                 { background: rgba(74,48,24,0.08) }

/* ritual */
.ritual .ritual-h2                  { color: var(--ink) }
.ritual .step                       { background: rgba(74,48,24,0.04); border-color: rgba(74,48,24,0.08) }
.ritual .step:hover                 { background: rgba(74,48,24,0.08) }
.ritual .step-num                   { color: rgba(74,48,24,0.25) }
.ritual .step-meta                  { color: rgba(74,48,24,0.3) }
.ritual .step-title                 { color: var(--ink) }
.ritual .step-text                  { color: rgba(74,48,24,0.5) }
.ritual .step-alts                  { border-top-color: rgba(74,48,24,0.08) }
.ritual .step-alt                   { border-color: rgba(74,48,24,0.1); background: rgba(74,48,24,0.04) }
.ritual .step-alt-time              { color: rgba(74,48,24,0.7) }
.ritual .step-alt-label             { color: rgba(74,48,24,0.3) }

/* origins */
.origins .origins-h2                { color: var(--ink) }
.origins .origin-item               { border-bottom-color: rgba(74,48,24,0.08) }
.origins .oi-num                    { color: rgba(74,48,24,0.22) }
.origins .oi-name                   { color: var(--ink) }
.origins .oi-geo                    { color: rgba(74,48,24,0.28) }
.origins .oi-quote                  { color: rgba(74,48,24,0.5) }
.origins::before                    {
  background-image:
    linear-gradient(rgba(74,48,24,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,48,24,0.06) 1px, transparent 1px);
}

/* ── SUMMARY (ritual summary) — sand background text fix ─────────── */
.summary .sum-label          { color: var(--ink) }
.summary .sum-val            { color: rgba(74,48,24,0.55) }
.summary .sum-desc           { color: rgba(74,48,24,0.38) }
.summary .sum-item           { border-right-color: rgba(74,48,24,0.12) }
.summary .sum-alt            { border-color: rgba(74,48,24,0.12); background: rgba(74,48,24,0.06) }
.summary .sum-alt-primary    { border-color: rgba(74,48,24,0.2); background: rgba(74,48,24,0.1) }
.summary .sum-alt-primary .sum-alt-time { color: var(--ink) }
.summary .sum-alt-primary .sum-alt-label { color: rgba(74,48,24,0.5) }
.summary .sum-alt-time       { color: rgba(74,48,24,0.8) }
.summary .sum-alt-label      { color: rgba(74,48,24,0.45) }
.summary .sum-steps          { border-top-color: rgba(74,48,24,0.12) }
.summary .sum-step           { border-bottom-color: rgba(74,48,24,0.08) }
.summary .sum-step-num       { color: rgba(74,48,24,0.3) }
.summary .sum-step-title     { color: var(--ink) }
.summary .sum-step-text      { color: rgba(74,48,24,0.4) }
.summary .sum-step-meta      { color: rgba(74,48,24,0.25) }
.summary .sum-break-quote    { border-top-color: rgba(74,48,24,0.12) }
.summary .sum-break-line     { color: rgba(74,48,24,0.6) }
.summary .sum-break-body     { color: rgba(74,48,24,0.38) }
.summary::before             {
  background-image:
    linear-gradient(rgba(74,48,24,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,48,24,0.05) 1px, transparent 1px);
}

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

.statement-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  overflow: hidden;
  padding: clamp(4rem,8vw,7rem) clamp(1.5rem,4vw,4rem);
}

/* Subtle grid atmosphere */
.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;
}

/* Warm amber glow from below */
.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.12) 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);
}

/* Eyebrow line */
.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, var(--sand));
}
.stmt-rule:last-child {
  background: linear-gradient(90deg, var(--sand), transparent);
}

.stmt-eye-text {
  font: 400 10px/1 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: 0.7;
}

/* The headline — the wall */
.stmt-headline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  line-height: 0.88;
  color: var(--cream);
}

.stmt-line {
  display: block;
  overflow: hidden;
}

.stmt-line--sm {
  display: flex;
  gap: 0.3em;
}

/* "OUR DAILY" — medium weight, generous tracking */
.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.55);
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* "BREAD." — wall-to-wall, warm earth gradient — flour dust to crust */
.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(236,218,188,0.96) 48%,
    rgba(190,152,96,0.76) 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;
}

/* When in view: letters rise */
.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;
}

/* Fluid font-size that truly fills the viewport width */
@supports (font-size: clamp(1px, 1vw, 100px)) {
  .stmt-line--lg .stmt-word {
    font-size: clamp(5rem, 23.5vw, 30rem);
  }
}

/* Footer — small sub-copy beneath the headline */
.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.38);
}
.stmt-foot-sep {
  color: rgba(248,244,236,0.18);
  font-size: 8px;
}

/* Horizontal rule at bottom */
.stmt-bg-rule {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,134,11,0.4), transparent);
}

/* Mobile tightening */
@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; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO — AWWWARDS ELEVATION
   Cinema-grade: full-bleed immersion, light leak, scan pulse,
   split-axis depth, editorial coordinate drama, parallax hint
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Full-bleed cinematic backdrop ─────────────────────────── */
.hero {
  background-position: 60% 38% !important;
}

/* Vignette — corners recede, draws eye to copy */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 90% 90% at 50% 50%,
    transparent 42%,
    rgba(42,24,16,0.38) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Horizontal scan line — subtle, just barely perceptible */
.hero::before {
  background:
    linear-gradient(to bottom,
      rgba(42,24,16,0.55) 0%,
      rgba(42,24,16,0.08) 14%,
      rgba(248,244,236,0.28) 55%,
      rgba(248,244,236,0.91) 78%,
      rgba(248,244,236,0.99) 100%
    ),
    linear-gradient(to right,
      rgba(248,244,236,0.98) 0%,
      rgba(248,244,236,0.91) 22%,
      rgba(248,244,236,0.22) 48%,
      rgba(248,244,236,0.0) 64%
    ) !important;
}

/* ── 2. Light leak — top-left amber bloom, fires once on load ── */
.hero-light-leak {
  position: absolute;
  top: -10%;
  left: -8%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(
    circle,
    rgba(184,134,11,0.09) 0%,
    rgba(184,134,11,0.03) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
  animation: leakPulse 8s ease-in-out infinite alternate;
}
@keyframes leakPulse {
  from { transform: scale(1) translate(0,0); opacity: 0.6; }
  to   { transform: scale(1.12) translate(2%,1.5%); opacity: 1; }
}

/* ── 3. Floating rule lines — left-edge editorial marks ─────── */
.hero-edge-marks {
  position: absolute;
  left: var(--g);
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero-edge-marks::before,
.hero-edge-marks::after {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(184,134,11,0.5), transparent);
  animation: markSlide 3.5s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-edge-marks::before {
  top: 18%;
  height: 0;
  animation-delay: 0.6s;
}
.hero-edge-marks::after {
  top: 44%;
  height: 0;
  animation-delay: 0.9s;
}
@keyframes markSlide {
  from { height: 0; }
  to   { height: clamp(40px, 6vh, 80px); }
}

/* ── 4. Coord element — upgraded dramatic positioning ────────── */
.hero-coord {
  left: var(--g) !important;
  bottom: clamp(140px, 18vh, 200px) !important;
  top: auto !important;
  opacity: 0;
  animation: coordAppear 1.4s cubic-bezier(.16,1,.3,1) 1.1s forwards;
}
@keyframes coordAppear {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 5. Hero headline — pushed harder, more dramatic scale ────── */
.hero-headline {
  font-size: clamp(72px, 12vw, 200px) !important;
  letter-spacing: -0.05em !important;
  line-height: 0.84 !important;
}

/* ── 6. Hero watermark — larger, slower drift ─────────────────── */
.hero-wm-text {
  font-size: clamp(160px, 36vw, 600px) !important;
  opacity: 0;
  animation: wmDrift 2.4s cubic-bezier(.16,1,.3,1) 0.3s forwards;
}
@keyframes wmDrift {
  from { opacity: 0; transform: scale(1.08) translateY(2%); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── 7. Grain count — right-axis, now with appear + pulse ─────── */
.hero-grain-count {
  animation: grainFade 1.8s 1.4s cubic-bezier(.16,1,.3,1) both,
             grainFloat 6s 3.5s ease-in-out infinite alternate !important;
}
@keyframes grainFloat {
  from { transform: rotate(90deg) translateY(-50%) translateX(0); }
  to   { transform: rotate(90deg) translateY(-50%) translateX(-6px); }
}

/* ── 8. Hero sub — refined opacity, slight blur reveals ──────── */
.hero-sub {
  animation: subReveal 1.4s cubic-bezier(.16,1,.3,1) 0.55s both !important;
}
@keyframes subReveal {
  from { opacity: 0; filter: blur(4px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ── 9. Pills — staggered float-up ──────────────────────────── */
.hero-strip {
  opacity: 0;
  animation: pillsFade 1s cubic-bezier(.16,1,.3,1) 0.7s forwards;
}
@keyframes pillsFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 10. CTA row — last to appear ────────────────────────────── */
.hero-cta-row {
  opacity: 0;
  animation: ctaRise 1s cubic-bezier(.16,1,.3,1) 0.9s forwards;
}
@keyframes ctaRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 11. Scroll indicator — refined ──────────────────────────── */
.hero-scroll {
  opacity: 0;
  animation: scrollFade 1.2s ease 1.4s forwards;
}
@keyframes scrollFade {
  to { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   SECTION 2 — EDITORIAL DECOMPRESSION
   Strip border-grid density, breathe, let typography lead
   ══════════════════════════════════════════════════════════════════ */

/* Larger section padding — more air entering the page */
.formats-section {
  padding: clamp(120px, 16vw, 200px) var(--g) !important;
}

/* Header: remove bottom border, increase gap */
.formats-header {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: clamp(80px, 10vw, 140px) !important;
  gap: clamp(32px, 4vw, 64px) !important;
}

/* Single editorial rule line between header and grid */
.formats-header::after {
  content: '';
  display: block;
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(248,244,236,0.1);
  margin-top: clamp(32px, 4vw, 56px);
}

/* Grid: switch to gap-based breathing, no borders */
.formats-grid {
  gap: 0 clamp(32px, 4vw, 64px) !important;
}

/* Cards: no borders, more padding, let whitespace divide */
.format-card {
  border-right: none !important;
  border-bottom: none !important;
  border-top: 1px solid rgba(248,244,236,0.08) !important;
  padding: clamp(32px, 4vw, 56px) 0 !important;
  gap: 24px !important;
}

/* Formats note — more air above */
.formats-note {
  margin-top: clamp(60px, 8vw, 100px) !important;
  border-top: 1px solid rgba(248,244,236,0.08) !important;
}

/* Responsive: keep border only on top */
@media(max-width:1100px) {
  .format-card:nth-child(1),
  .format-card:nth-child(2),
  .format-card:nth-child(3) {
    border-bottom: none !important;
  }
}
@media(max-width:768px) {
  .format-card:nth-child(1),
  .format-card:nth-child(2),
  .format-card:nth-child(3),
  .format-card:nth-child(4) {
    border-bottom: none !important;
  }
  .format-card { border-right: none !important; }
}
@media(max-width:580px) {
  .format-card { border-bottom: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   MANIFESTO SECTION
   Editorial bridge between photo hero and content below.
   Large copy at reading scale, three essential numbers, one CTA.
   No boxes, no pills, no borders competing for attention.
   ══════════════════════════════════════════════════════════════════ */
.manifesto {
  padding: clamp(100px, 13vw, 180px) var(--g);
  background: var(--cream);
  color: var(--ink);
}
.manifesto--dark {
  background: var(--ink);
  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(42,24,16,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
   Formats: card grid → typographic schedule.
   Philosophy: big numbers, open rows, no boxes. Like a design archive.
   ══════════════════════════════════════════════════════════════════ */

/* — 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;
}

/* — Formats section: header redesign — */
.formats-section {
  padding: clamp(120px, 15vw, 200px) var(--g) !important;
}
.formats-header {
  grid-template-columns: 1fr 1fr !important;
  gap: 0 clamp(40px, 5vw, 80px) !important;
  margin-bottom: clamp(60px, 8vw, 100px) !important;
  border-bottom: 1px solid rgba(248,244,236,0.1) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
  align-items: end !important;
}
.formats-h2 {
  font-size: clamp(48px, 6.5vw, 96px) !important;
  line-height: 1 !important;
}

/* — Editorial formats list — */
.formats-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(248,244,236,0.1);
}
.format-row {
  display: grid;
  grid-template-columns: clamp(100px,11vw,160px) 1fr auto;
  gap: 0 clamp(40px, 5vw, 80px);
  align-items: start;
  padding: clamp(40px,5vw,72px) 0;
  border-bottom: 1px solid rgba(248,244,236,0.08);
  transition: background .28s cubic-bezier(.16,1,.3,1);
}
@media(hover:hover) {
  .format-row:hover {
    background: rgba(248,244,236,0.025);
  }
  .format-row:hover .fr-num {
    opacity: 0.55;
    letter-spacing: -0.06em;
  }
  .format-row:hover .fr-name {
    letter-spacing: 0.18em;
  }
}
.fr-time {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.fr-num {
  font: 900 clamp(64px,8vw,104px)/1 'Helvetica Neue',Arial,sans-serif;
  letter-spacing: -0.05em;
  color: var(--cream);
  display: block;
  transition: opacity .35s cubic-bezier(.16,1,.3,1), letter-spacing .35s cubic-bezier(.16,1,.3,1);
}
.fr-unit {
  font: 700 11px/1 'Courier New',monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.3);
  align-self: flex-end;
  padding-bottom: 8px;
}
.fr-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
}
.fr-name {
  font: 900 clamp(13px,1.4vw,17px)/1.2 'Helvetica Neue',Arial,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  transition: letter-spacing .28s cubic-bezier(.16,1,.3,1);
}
.fr-method {
  font: 700 12px/1 'Courier New',monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.3);
}
.fr-desc {
  font: 400 13px/1.72 'Helvetica Neue',Arial,sans-serif;
  color: rgba(248,244,236,0.52);
  max-width: 520px;
  margin-top: 6px;
}
.fr-spec {
  font: 700 12px/1.8 'Courier New',monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.25);
  text-align: right;
  padding-top: 16px;
  white-space: nowrap;
}

/* Responsive */
@media(max-width:860px) {
  .format-row {
    grid-template-columns: clamp(80px,14vw,120px) 1fr;
  }
  .fr-spec {
    display: none;
  }
}
@media(max-width:540px) {
  .format-row {
    grid-template-columns: 80px 1fr;
    gap: 0 20px;
  }
  .fr-num {
    font-size: clamp(52px,14vw,80px) !important;
  }
  .formats-header {
    grid-template-columns: 1fr !important;
  }
}

/* SS4: Remove gold divider line in statement-hero */
.stmt-divider-line {
  display: none !important;
}
/* SS4: MY BREAD italic */
.blessing-quote:first-of-type {
  font-style: italic !important;
}

/* SS1: formats section — ensure fully horizontal layout */
.formats-section { overflow: visible; }
.formats-header {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: end !important;
  gap: 0 clamp(48px, 6vw, 96px) !important;
  border-bottom: 1px solid rgba(248,244,236,0.08) !important;
  padding-bottom: clamp(48px, 6vw, 72px) !important;
  margin-bottom: clamp(0px, 0vw, 0px) !important;
}
.formats-eyebrow {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin-bottom: clamp(16px, 2vw, 28px) !important;
}
.formats-h2 {
  grid-column: 1 !important;
  grid-row: 2 !important;
  font-size: clamp(36px, 4.8vw, 72px) !important;
  line-height: 1.02 !important;
  align-self: end !important;
}
.formats-sub {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: end !important;
  max-width: 420px !important;
  padding-bottom: 6px !important;
}
.formats-header::after { display: none !important; }
@media (max-width: 760px) {
  .formats-header {
    grid-template-columns: 1fr !important;
  }
  .formats-h2, .formats-sub { grid-column: 1 !important; }
}

/* ── PRE-FOOTER TYPOGRAPHIC STATEMENT ──────────────────────────────── */
.pre-footer-statement {
  background: var(--ink);
  padding: clamp(80px, 12vw, 160px) var(--g) clamp(48px, 6vw, 80px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pre-footer-statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(184,134,11,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.pfs-eyebrow {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.22);
  margin-bottom: clamp(20px, 3vw, 36px);
}
.pfs-main {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 5.5vw, 88px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: rgba(248,244,236,0.88);
  user-select: none;
}
.pfs-word {
  display: inline-block;
  white-space: pre;
  will-change: opacity, filter, transform;
  transition: color 1.2s ease;
}
@media (hover: hover) {
  .pre-footer-statement:hover .pfs-word {
    color: rgba(196,168,84,0.72);
    transition: color 1.8s ease;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FORMATS — HORIZONTAL SCROLL TRACK (7 meal types)
═══════════════════════════════════════════════════════════════════ */
.formats-track-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(248,244,236,0.18) transparent;
  padding-bottom: 16px;
  cursor:none!important;
}
.formats-track-wrap:active { cursor:none!important; }
.formats-track-wrap::-webkit-scrollbar { height: 3px; }
.formats-track-wrap::-webkit-scrollbar-track { background: transparent; }
.formats-track-wrap::-webkit-scrollbar-thumb { background: rgba(248,244,236,0.15); border-radius: 2px; }

.formats-track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  width: max-content;
  min-width: 100%;
}

.format-card {
  flex: 0 0 clamp(200px, 22vw, 280px);
  background: rgba(248,244,236,0.04);
  border: 1px solid rgba(248,244,236,0.09);
  border-top: 2px solid rgba(248,244,236,0.15);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
}
.format-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,134,11,0.3), transparent);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}
.format-card:hover { background: rgba(248,244,236,0.07); border-top-color: rgba(184,134,11,0.6); transform: translateY(-3px); }
.format-card:hover::before { transform: scaleX(1); }

.format-card--fastest {
  border-top-color: rgba(184,134,11,0.5);
}

.fc-time {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}
.fc-num {
  font: 900 clamp(2.5rem, 5vw, 3.5rem)/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--cream, #F8F4EC);
  letter-spacing: -0.03em;
}
.fc-unit {
  font: 600 11px/1 'Courier New', monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.45);
}
.fc-name {
  font: 700 clamp(0.9rem, 1.5vw, 1.05rem)/1.1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream, #F8F4EC);
}
.fc-method {
  font: 600 11px/1 'Courier New', monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.38);
}
.fc-desc {
  font: 300 clamp(12px, 1.1vw, 13px)/1.55 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(248,244,236,0.60);
  flex: 1;
}
.fc-spec {
  font: 600 11px/1.4 'Courier New', monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.28);
  border-top: 1px solid rgba(248,244,236,0.08);
  padding-top: 0.75rem;
  margin-top: auto;
}

/* Hide old vertical list styles if still present */
.format-row { display: none !important; }

@media (max-width: 600px) {
  .format-card { flex: 0 0 clamp(180px, 70vw, 240px); }
}

/* ── Formats: fix overflow for horizontal scroll track ── */
.formats-section {
  overflow: visible !important;
}
.formats-inner {
  max-width: 100%;
  width: 100%;
  padding: 0 var(--g);
}
.formats-track-wrap {
  margin: 0 calc(-1 * var(--g));
  padding: 0 var(--g);
}

/* ══════════════════════════════════════════════════════════════════════
   THE SCHEDULE — FMTS — God-mode editorial seven-meal section
   Award-winning typographic data visualisation
══════════════════════════════════════════════════════════════════════ */
.fmts {
  background: var(--ink, #2A1810);
  color: var(--cream, #F8F4EC);
  padding: clamp(100px,13vw,180px) var(--g) clamp(80px,10vw,140px);
  position: relative;
  overflow: hidden;
}
.fmts::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;
}
.fmts::after {
  content: '7';
  position: absolute;
  right: calc(var(--g) * -0.2);
  bottom: -0.1em;
  font: 900 clamp(280px,40vw,600px)/1 'Helvetica Neue', sans-serif;
  letter-spacing: -0.08em;
  color: rgba(248,244,236,0.03);
  pointer-events: none;
  user-select: none;
  line-height: 0.85;
}

.fmts-inner {
  max-width: var(--max, 1320px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.fmts-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px,5vw,80px);
  align-items: end;
  margin-bottom: clamp(60px,8vw,100px);
  padding-bottom: clamp(40px,5vw,64px);
  border-bottom: 1px solid rgba(248,244,236,0.08);
}
.fmts-head-left { display: flex; flex-direction: column; gap: 20px; }
.fmts-eyebrow {
  font: 700 12px/1 'Courier New', monospace;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.32);
}
.fmts-h2 {
  font: 900 clamp(52px,7vw,108px)/0.95 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.04em;
  color: var(--cream, #F8F4EC);
  margin: 0;
}
.fmts-sub {
  font: 300 clamp(15px,1.35vw,18px)/1.74 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(248,244,236,0.50);
  margin: 0;
  align-self: end;
  padding-bottom: 6px;
  max-width: 520px;
}
@media (max-width: 760px) {
  .fmts-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .fmts-sub { max-width: 100%; }
}

/* ── Rows ── */
.fmts-rows {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fmts-row {
  display: grid;
  grid-template-columns: clamp(88px,11vw,148px) 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(28px,4vw,64px);
  padding: clamp(28px,4vw,52px) 0;
  border-bottom: 1px solid rgba(248,244,236,0.06);
  position: relative;
  cursor:none!important;
  transition: background 0.35s cubic-bezier(0.16,1,0.3,1);
}
.fmts-row::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--g, 40px));
  right: calc(-1 * var(--g, 40px));
  top: 0; bottom: 0;
  background: rgba(248,244,236,0.0);
  transition: background 0.35s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
@media(hover:hover) {
  .fmts-row:hover::before { background: rgba(248,244,236,0.018); }
  .fmts-row:hover .fmts-time span { color: rgba(248,244,236,0.70); letter-spacing: -0.09em; }
  .fmts-row:hover .fmts-name { letter-spacing: 0.14em; color: rgba(248,244,236,1); }
  .fmts-row:hover .fmts-desc { opacity: 1; transform: translateY(0); }
  .fmts-row:hover .fmts-fill { background: linear-gradient(90deg, rgba(184,134,11,0.9), rgba(184,134,11,0.2)); }
}

/* Time column */
.fmts-time {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 14px;
}
.fmts-time span {
  font: 900 clamp(72px,9vw,120px)/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.07em;
  color: rgba(248,244,236,0.17);
  display: block;
  transition: color 0.4s cubic-bezier(0.16,1,0.3,1), letter-spacing 0.4s cubic-bezier(0.16,1,0.3,1);
  user-select: none;
  line-height: 0.88;
}
.fmts-time em {
  font: 700 11px/1 'Courier New', monospace;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.18);
  display: block;
  margin-top: 8px;
}
.fmts-row--gold .fmts-time em { color: rgba(184,134,11,0.50); }

/* Body */
.fmts-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 14px;
  position: relative;
  z-index: 1;
}
.fmts-name {
  font: 700 clamp(19px,1.9vw,26px)/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.86);
  transition: letter-spacing 0.3s cubic-bezier(0.16,1,0.3,1), color 0.3s;
}
.fmts-method {
  font: 700 11px/1 'Courier New', monospace;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.24);
  margin-top: 2px;
}
.fmts-desc {
  font: 300 clamp(13px,1.05vw,15px)/1.72 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(248,244,236,0.46);
  max-width: 560px;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.38s cubic-bezier(0.16,1,0.3,1), transform 0.38s cubic-bezier(0.16,1,0.3,1);
}
@media (max-width: 640px) { .fmts-desc { display: none; } }
@media (pointer: coarse) and (min-width: 641px) {
  .fmts-desc { opacity: 1; transform: translateY(0); }
}

/* Bar */
.fmts-bar {
  grid-column: 2;
  grid-row: 2;
  height: 2px;
  background: rgba(248,244,236,0.06);
  border-radius: 1px;
  margin-top: 22px;
  overflow: hidden;
}
.fmts-fill {
  height: 100%;
  width: var(--w, 50%);
  background: linear-gradient(90deg, rgba(184,134,11,0.65), rgba(184,134,11,0.15));
  border-radius: 1px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.fmts-row.bar-on .fmts-fill { transform: scaleX(1); }
.fmts-row--gold .fmts-fill {
  background: linear-gradient(90deg, rgba(184,134,11,0.9), rgba(184,134,11,0.35));
}

/* Note */
.fmts-note {
  font: 700 11px/1.7 'Courier New', monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(248,244,236,0.18);
  text-align: center;
  padding-top: clamp(40px,5vw,64px);
  border-top: 1px solid rgba(248,244,236,0.06);
  margin-top: clamp(16px,2vw,28px);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 540px) {
  .fmts-row { grid-template-columns: 76px 1fr; column-gap: 20px; }
  .fmts-time span { font-size: clamp(56px,16vw,80px); }
}

/* ══════════════════════════════════════════════════════════════════════
   MANIFESTO — God-mode split editorial layout
══════════════════════════════════════════════════════════════════════ */
.manifesto-eyebrow {
  display: block;
  font: 700 12px/1 'Courier New', monospace;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(42,24,16,0.32);
  margin-bottom: 28px;
}
.manifesto-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px,7vw,120px);
  align-items: start;
}
.manifesto-split-left {
  position: sticky;
  top: clamp(80px,10vw,120px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.manifesto-num-stack {
  overflow: hidden;
  line-height: 0.82;
  margin-bottom: 32px;
}
.man-n {
  display: block;
  font: 900 clamp(160px,22vw,320px)/0.82 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.08em;
  color: rgba(42,24,16,0.08);
  user-select: none;
}
.manifesto-origins {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(42,24,16,0.08);
}
.man-origin {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(42,24,16,0.06);
}
.man-origin-num {
  font: 700 11px/1 'Courier New', monospace;
  letter-spacing: 0.22em;
  color: rgba(42,24,16,0.28);
  grid-column: 1;
  grid-row: 1 / -1;
  padding-top: 3px;
}
.man-origin-name {
  font: 700 clamp(13px,1.1vw,15px)/1.1 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(42,24,16,0.80);
  grid-column: 2;
  grid-row: 1;
}
.man-origin-loc {
  font: 400 11px/1.4 'Courier New', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(42,24,16,0.36);
  grid-column: 2;
  grid-row: 2;
  margin-top: 4px;
}
.manifesto-split-right {
  display: flex;
  flex-direction: column;
  gap: clamp(48px,6vw,80px);
}
@media (max-width: 760px) {
  .manifesto-split { grid-template-columns: 1fr; gap: 40px; }
  .manifesto-split-left { position: static; }
  .man-n { font-size: clamp(100px,30vw,200px); }
}

/* ══ NAV — bread 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) */

/* ── FMTS rows: staggered entrance from reveal ─────────────── */
.fmts-row.reveal {
  transition-delay: 0s;
}
.fmts-rows .fmts-row.reveal:nth-child(1) { transition-delay: 0.00s; }
.fmts-rows .fmts-row.reveal:nth-child(2) { transition-delay: 0.07s; }
.fmts-rows .fmts-row.reveal:nth-child(3) { transition-delay: 0.14s; }
.fmts-rows .fmts-row.reveal:nth-child(4) { transition-delay: 0.21s; }
.fmts-rows .fmts-row.reveal:nth-child(5) { transition-delay: 0.28s; }
.fmts-rows .fmts-row.reveal:nth-child(6) { transition-delay: 0.35s; }
.fmts-rows .fmts-row.reveal:nth-child(7) { transition-delay: 0.42s; }

/* ── fmts-head: stagger eyebrow → h2 → sub ────────────────── */
.fmts-eyebrow.reveal { transition-delay: 0s; }
.fmts-h2.reveal      { transition-delay: 0.10s; }
.fmts-sub.reveal     { transition-delay: 0.20s; }

/* ── fmts-row first child: no top border ─────────────────────*/
.fmts-rows .fmts-row:first-child {
  border-top: 1px solid rgba(248,244,236,0.06);
}

/* ── Manifesto origins: staggered entrance ─────────────────── */
.manifesto-origins .man-origin.reveal:nth-child(1) { transition-delay: 0.10s; }
.manifesto-origins .man-origin.reveal:nth-child(2) { transition-delay: 0.20s; }
.manifesto-origins .man-origin.reveal:nth-child(3) { transition-delay: 0.30s; }
.manifesto-eyebrow.reveal { transition-delay: 0s; }
.man-n.reveal { transition-delay: 0.05s; }

/* ── Manifesto copy + stats: stagger ───────────────────────── */
.manifesto-copy.reveal       { transition-delay: 0.05s; }
.manifesto-foot.reveal       { transition-delay: 0.20s; }

/* ── fmts-head stagger: eyebrow first, h2 second, sub third ── */
.fmts-head .fmts-eyebrow.reveal  { transition-delay: 0s; }
.fmts-head .fmts-h2.reveal       { transition-delay: 0.12s; }
.fmts-head .fmts-sub.reveal      { transition-delay: 0.24s; }
.fmts-note.reveal                { transition-delay: 0s; }

/* ═══ BOTTOM-UP RAMP — BREAD (lightest of the three pages) ═══════════════
   order → blessing → footer: footer darkest + strongest grid, brightening
   upward; shared boundary colors make the three sections one seamless ramp. */
.order-section{ background:linear-gradient(180deg,#46311D 0%,#3A2614 100%); }
.order-section::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,#3A2614 0%,#2C1A0A 100%);
  padding:clamp(100px,14vw,180px) var(--g) clamp(60px,8vw,100px);
}
.pre-footer-statement::before{
  background:none;
  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;
}
.pre-footer-statement > *{ position:relative; z-index:1; }
footer{ background:linear-gradient(180deg,#2C1A0A 0%,#221206 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{
  font-size:clamp(40px,7vw,112px);
  letter-spacing:-0.03em;
  line-height:0.95;
  color:rgba(248,244,236,0.92);
}
.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}

/* ═══ FORMATS — HORIZONTAL ASSEMBLY ══════════════════════════════════════
   The schedule reads as a horizontal editorial rail: seven tall panels,
   ghost time numerals up top, name/method/description seated at the base,
   gold time-bar as the panel's baseline. Snap-scrolls, drags with the
   mouse, swipes on touch, arrow-keys when focused. Edge fades hint at
   more content beyond the frame. */
.fmts-rows{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(300px,26vw,380px);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  border-top:1px solid rgba(248,244,236,0.10);
}
.fmts-rows::-webkit-scrollbar{display:none}
.fmts-rows.dragging{scroll-snap-type:none;user-select:none}
.fmts-rows:focus-visible{outline:2px solid rgba(248,244,236,0.40);outline-offset:6px}

.fmts-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  scroll-snap-align:start;
  min-height:clamp(440px,56vh,580px);
  padding:clamp(32px,3.4vw,48px) clamp(24px,2.4vw,36px) clamp(28px,3vw,40px);
  border-right:1px solid rgba(248,244,236,0.08);
  border-bottom:none;
}
.fmts-row:last-child{border-right:none}
.fmts-row::before{left:0;right:0}

.fmts-time{padding-top:0;margin-bottom:clamp(28px,4vh,52px)}
.fmts-time span{font-size:clamp(88px,8.5vw,150px)}
.fmts-body{padding-top:0;margin-top:auto;gap:9px}
.fmts-desc{opacity:1;transform:none;max-width:100%}
@media(max-width:640px){.fmts-desc{display:block}}
.fmts-bar{grid-column:auto;grid-row:auto;width:100%;margin-top:clamp(20px,2.6vh,30px)}

@media(max-width:760px){
  .fmts-rows{grid-auto-columns:min(78vw,340px);scroll-snap-type:x mandatory}
  .fmts-row{min-height:clamp(380px,55vh,480px)}
}
@media(max-width:540px){
  .fmts-row{grid-template-columns:none;column-gap:0}
  .fmts-time span{font-size:clamp(72px,20vw,96px)}
}

/* ═══ INGREDIENTS 02 & 04 — SALT + YEAST, mirrored right-bound ═══════════
   Flipped rows reverse the editorial axis: data block left, copy right-
   aligned against the page edge, index number on the far right. Desktop
   only — mobile keeps the stacked flow. */
@media(min-width:761px){
  .ing-row--flip{grid-template-columns:clamp(180px,22vw,320px) 1fr clamp(52px,5vw,80px)}
  .ing-row--flip .ing-data{order:1}
  .ing-row--flip .ing-main{
    order:2;
    text-align:right;
    display:flex;flex-direction:column;align-items:flex-end;
  }
  .ing-row--flip .ing-desc,
  .ing-row--flip .ing-terroir{margin-left:auto}
  .ing-row--flip .ing-axis{order:3;text-align:right;display:flex;justify-content:flex-end}
}

/* ═══ FOOTER — canonical (mirrors BREW): watermark, creed, coords ═══ */
.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;
}
.footer-links{border-top:none;padding-top:0;justify-content:center;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);
}
.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);
  width:100%;text-align:center;padding-top:16px;margin-bottom:0;
  border-top:1px solid rgba(248,244,236,0.04);
}
footer{
  padding:clamp(40px,6vw,60px) var(--g) clamp(32px,5vw,52px);
  flex-direction:column;align-items:center;justify-content:center;gap:0;
  border-top:1px solid rgba(248,244,236,0.04);
}

/* ═══ 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)}
.fmts-eyebrow{color:rgba(248,244,236,0.42)}
.fmts-sub{color:rgba(248,244,236,0.62)}
.fmts-method{color:rgba(248,244,236,0.40)}
.fmts-desc{color:rgba(248,244,236,0.58)}
.fmts-note{color:rgba(248,244,236,0.34)}
.sum-num{color:rgba(248,244,236,0.40)}
.sum-val{color:rgba(248,244,236,0.56)}
.ing-terroir{color:rgba(248,244,236,0.52)}
.ing-desc{color:rgba(248,244,236,0.60)}
: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}
}

/* ═══ FORMATS RAIL — performance pass ════════════════════════════════════
   The edge-fade mask on the scroll container forced Safari to re-composite
   the entire rail every frame — the lag. Removed; the rail gets its own
   compositor layer and each card contains its paint. Tighter columns so
   the rail reads dense and intentional. */
.fmts-rows{
  -webkit-mask-image:none;
  mask-image:none;
  transform:translateZ(0);
  grid-auto-columns:clamp(280px,22vw,340px);
}
.fmts-row{
  min-height:clamp(400px,48vh,520px);
  contain:layout paint;
}
@media(max-width:760px){
  .fmts-rows{grid-auto-columns:min(78vw,320px)}
  .fmts-row{min-height:clamp(360px,50vh,440px)}
}

/* Formats rail — equal alignment: names share one top line (number block
   is fixed-height), bars share the bottom baseline; desc varies between. */
.fmts-time{margin-bottom:0;height:clamp(120px,16vh,170px)}
.fmts-body{margin-top:0}
.fmts-bar{margin-top:auto}
.fmts-body .fmts-desc{margin-bottom:clamp(18px,2.4vh,28px)}

/* Statement hero — drop the gold seam hairline at the section boundary */
.stmt-bg-rule{display:none}

/* ═══ ORDER — begins on the page's brightest brown (sand) and fades into
   the dark ramp toward the end of the page ═══ */
.order-section{
  background:linear-gradient(180deg,
    #C8A97A 0%,
    #6B4E2E 16%,
    #46311D 42%,
    #3A2614 100%);
}

/* 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}

/* ORDER → BLESSING — tighter vertical rhythm (was a void) */
.order-grid{margin-bottom:clamp(20px,2.5vw,36px)}
.section.order-section{padding-bottom:clamp(48px,6vw,80px)}
.pre-footer-statement{padding-top:clamp(64px,8vw,110px)}

/* ═══ FORMATS — RITUAL SCROLLYTELLING ════════════════════════════════════
   The section pins while vertical scroll drives the rail horizontally —
   one format per beat. Desktop/fine-pointer only; touch keeps the native
   swipe rail. JS sets the section height to the rail's travel. */
.fmts::after{content:none} /* the stray ghost 7 — gone */
.fmts--scrolly{padding-top:0;padding-bottom:0}
.fmts--scrolly .fmts-inner{
  position:sticky;top:0;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  padding-top:calc(var(--nav-h) + 12px);
}
.fmts--scrolly .fmts-head{margin-bottom:clamp(28px,4vh,52px);padding-bottom:clamp(24px,3vh,40px)}
.fmts--scrolly .fmts-rows{
  overflow:visible;
  scroll-snap-type:none;
  will-change:transform;
}

/* ═══ TYPOGRAPHY MASTERPASS II — formats + banner ═══ */
.fmts-name{color:rgba(248,244,236,0.95)}
.fmts-method{font-size:13px;color:rgba(248,244,236,0.46)}
.fmts-desc{font-size:clamp(14px,1.15vw,16px);color:rgba(248,244,236,0.66);line-height:1.7}
.fmts-sub{color:rgba(248,244,236,0.68)}
.fmts-note{color:rgba(248,244,236,0.38);font-size:12px;letter-spacing:0.22em}
.desk-banner-label,.desk-banner-sub{font-size:12px!important}

/* 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}

/* Scrolly fix: the section's overflow:hidden was defeating position:sticky —
   the inner never pinned and the spacer scrolled past empty. The inner
   viewport keeps overflow:hidden, so the rail still clips correctly. */
.fmts--scrolly{overflow:visible}
.fmts--scrolly .fmts-note{margin-top:clamp(20px,3vh,36px);padding-top:clamp(20px,3vh,32px)}

/* ═══ SCROLLY v2 — deterministic JS pin (sticky was unreliable here) ═══ */
.fmts--scrolly{position:relative}
.fmts--scrolly .fmts-inner{
  position:absolute;top:0;left:0;right:0;
  height:100svh;min-height:0;
  max-width:none;margin:0;
  padding:calc(var(--nav-h) + 12px) var(--g) 20px;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.fmts--scrolly .fmts-inner.is-pinned{position:fixed}
.fmts--scrolly .fmts-inner.is-bottom{top:auto;bottom:0;position:absolute}

/* ═══ MS STATS — stop '3–55' wrapping onto itself ═══ */
.ms-num{white-space:nowrap}
.ms-item{min-width:0}
.manifesto-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ═══ SUMMARY → BADGE → ORDER: one continuous warm ramp ══════════════════
   The cream badge band was snapping the dark stack apart, and the order
   gradient jumped from sand to murk. Now: summary fades down INTO sand,
   the badge sits ON sand, and the order section ramps through even, warm
   stops into the blessing's brown. */
.summary{background:linear-gradient(180deg,#8B6840 0%,#A98A5C 62%,#C8A97A 100%)}
.ship-badge{
  background:#C8A97A;
  border-top:1px solid rgba(61,40,16,0.16);
  border-bottom:1px solid rgba(61,40,16,0.16);
}
.order-section{
  background:linear-gradient(180deg,
    #C8A97A 0%,
    #B2905C 20%,
    #8F6C3F 42%,
    #62452A 66%,
    #46311D 84%,
    #3A2614 100%);
  transform:translateZ(0);
}

/* (ritual sweep removed — reveals remain as before) */

/* ═══ ORDER — voices on the left ═══ */
.order-quotes{
  margin-top:clamp(36px,5vw,64px);
  display:flex;flex-direction:column;
  gap:clamp(20px,2.6vw,32px);
  max-width:540px;
}
.oq{
  font-family:'Courier New',monospace;
  font-style:normal!important;
  font-weight:600;
  font-size:clamp(15px,1.3vw,18px);
  line-height:1.7;
  color:rgba(248,244,236,0.80);
  padding-left:18px;
  border-left:1px solid rgba(248,244,236,0.22);
}

/* ═══ HERO GRAIN — the heart, upper right ════════════════════════════════ */
.hero-grain{
  position:absolute;
  top:calc(var(--nav-h) + clamp(24px,5vh,64px));
  right:clamp(28px,6vw,110px);
  width:clamp(130px,17vw,260px);
  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(46vw,200px)}
}

/* ═══ HERO HEART — structural two-column hero, grain large on the RIGHT
   (mirror of brew), never hidden by animation/bfcache states. ═══ */
.statement-hero{display:flex;align-items:center;justify-content:center;gap:clamp(28px,5vw,90px)}
.hero-grain{
  position:relative;top:auto;right:auto;
  order:2;
  flex-shrink:0;
  width:min(27vw,440px);
  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{order:0;width:min(58vw,300px);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 GRAIN — positional perfection pass ═══════════════════════════
   Contained inside the right margin (no edge clipping), optically centred
   against the headline block, caption tucked close beneath. */
.statement-hero{gap:clamp(24px,4vw,64px)}
.statement-hero .stmt-inner{flex:0 1 auto;min-width:0}
.hero-grain{
  width:min(23vw,390px);
  align-self:center;
  margin:4vh clamp(8px,2vw,32px) 0 0;
}
.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(26vw,320px)}}

/* Formats numerals — digits no longer overlap (the -0.07em tracking at
   150px made translucent strokes cross and double up) */
.fmts-time span{letter-spacing:-0.02em!important}
@media(hover:hover){.fmts-row:hover .fmts-time span{letter-spacing:-0.02em!important}}

/* ═══ INGREDIENTS HEADER — the oath, elevated ════════════════════════════
   "Nothing else." at full display scale; the three ingredients become a
   numbered, linked index that jumps to its chapter; sealed by the decree. */
.ing-header{align-items:flex-end;gap:clamp(32px,5vw,80px);padding-bottom:clamp(48px,7vw,88px)}
.ing-header-h2{
  font-size:clamp(64px,10vw,168px)!important;
  letter-spacing:-0.035em!important;
  line-height:0.85!important;
}
.ing-decree{max-width:none;line-height:normal;display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.ing-idx{
  display:flex;align-items:baseline;justify-content:flex-end;gap:16px;
  font-family:'Courier New',monospace;font-weight:700;
  font-size:clamp(15px,1.35vw,19px);
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(61,40,16,0.62);
  text-decoration:none;
  padding-bottom:10px;
  border-bottom:1px solid rgba(61,40,16,0.18);
  transition:color .22s,border-color .22s,letter-spacing .3s cubic-bezier(.16,1,.3,1);
}
.ing-idx-num{font-size:0.72em;color:rgba(61,40,16,0.40)}
.ing-idx:hover{color:rgba(61,40,16,0.95);border-color:rgba(61,40,16,0.45);letter-spacing:0.26em}
.ing-idx:focus-visible{outline:2px solid rgba(61,40,16,0.45);outline-offset:4px}
.ing-idx-seal{
  margin-top:8px;text-align:right;
  font-family:'Courier New',monospace;font-weight:700;
  font-size:clamp(12px,1vw,14px);
  letter-spacing:0.30em;text-transform:uppercase;
  color:rgba(61,40,16,0.45);
}

/* ═══ BREAK — "The Best of Bread." in display Helvetica ═══ */
.sum-val{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important;
  font-weight:900!important;
  font-size:clamp(22px,2.4vw,36px)!important;
  letter-spacing:0.04em!important;
  color:rgba(248,244,236,0.88)!important;
}

/* ═══ 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;
}

/* ═══ HERO GRAIN — larger, optically balanced (final) ═══ */
.hero-grain{
  width:min(31vw,540px)!important;
  align-self:center!important;
  margin:0 clamp(8px,2vw,40px) 0 0!important;
}
.hero-grain figcaption{margin-top:6px}
@media(max-width:1100px){.hero-grain{width:min(34vw,420px)!important}}
@media(max-width:760px){.hero-grain{width:min(64vw,340px)!important;margin:36px auto 0!important}}

/* ═══════════════════════════════════════════════════════════════════════
   INGREDIENTS — PNC SIGNATURE TREATMENT (the unmistakable version)
   Each chapter is a distinct tonal band with a colossal ghost numeral,
   country line flanked by hairlines, display-scale name, and a framed
   data card. Pure static CSS — zero runtime cost.
═══════════════════════════════════════════════════════════════════════ */

/* Chapter bands — alternating tonal plates, hairline-separated */
.ing-row{
  position:relative;
  border-bottom:1px solid rgba(61,40,16,0.16)!important;
  background:rgba(61,40,16,0.045);
  transition:background .5s ease;
}
.ing-row--flip{background:rgba(61,40,16,0.10)}
#ing-psyllium{background:rgba(61,40,16,0.045)}
@media(hover:hover){.ing-row:hover{background:rgba(61,40,16,0.14)}}

/* Colossal ghost numerals — the chapter's monument */
.ing-axis{position:relative}
.ing-axis-num{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important;
  font-weight:900!important;
  font-size:clamp(110px,15vw,250px)!important;
  letter-spacing:-0.05em!important;
  line-height:0.8!important;
  color:rgba(61,40,16,0.10)!important;
  writing-mode:horizontal-tb!important;
  transform:none!important;
  display:block;
  position:absolute;
  top:clamp(24px,3vw,48px);
  left:0;
  pointer-events:none;user-select:none;
  white-space:nowrap;
}
.ing-row--flip .ing-axis-num{left:auto;right:0}

/* Country — a full line, flanked */
.ing-tag{
  display:flex!important;align-items:center;gap:clamp(14px,1.6vw,24px);
  font-size:clamp(14px,1.2vw,17px)!important;
  letter-spacing:0.34em!important;
  color:rgba(61,40,16,0.72)!important;
}
.ing-tag::after{
  content:'';flex:1;height:1px;background:rgba(61,40,16,0.25);
}
.ing-row--flip .ing-tag{flex-direction:row-reverse}

/* Name — display scale */
.ing-name{
  font-size:clamp(56px,7.5vw,136px)!important;
  letter-spacing:-0.035em!important;
  line-height:0.9!important;
}

/* Data column — framed specimen card */
.ing-data{
  border:1px solid rgba(61,40,16,0.22);
  padding:clamp(20px,2.2vw,34px)!important;
  background:rgba(248,244,236,0.06);
}
.ing-coords{color:#8A6508!important}

/* Generous chapter breathing room */
.ing-main{padding-top:clamp(56px,7vw,110px)!important;padding-bottom:clamp(56px,7vw,110px)!important}

/* ═══ "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;
}



/* ── WHO IT IS FOR — supper reveal (clip-path + fixed layer; GPU-safe,
   does NOT disable Safari async scrolling like background-attachment) ── */
.who{
  position:relative;
  background:var(--cream-deep) !important;
  clip-path:inset(0 0 0 0);
}
.who::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(237,229,212,0.90), rgba(237,229,212,0.82) 45%, rgba(237,229,212,0.90)),
    url('/img/supper.webp') center/cover no-repeat;
  pointer-events:none;
}
.who-inner{position:relative;z-index:1}
@media(pointer:coarse){
  .who{clip-path:none}
  .who::before{position:absolute}
}

/* ── 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}

/* ── INGREDIENTS (Nothing else.) — buckwheat field background ─────── */
.ingredients{
  background:
    linear-gradient(180deg, rgba(244,238,226,0.88), rgba(244,238,226,0.78) 45%, rgba(244,238,226,0.88)),
    url('/img/buckwheat-field.webp') center/cover no-repeat !important;
}

/* ── MANIFESTO (The Ingredients) — mill background ────────────────── */
.manifesto{
  background:
    linear-gradient(180deg, rgba(248,244,236,0.88), rgba(248,244,236,0.80) 45%, rgba(248,244,236,0.88)),
    url('/img/mill.webp') center/cover no-repeat !important;
}

/* ── NUTRITION (What It Gives.) — loaf prep background ────────────── */
.nutrition{
  background:
    linear-gradient(105deg, rgba(248,244,236,0.90) 0%, rgba(248,244,236,0.74) 48%, rgba(248,244,236,0.84) 100%),
    url('/img/loaf-prep.webp') center/cover no-repeat !important;
}

/* THE BEST OF BREAD. — brown, matching the Break headline */
.summary .sum-val{color:#4A3018 !important}

/* ── BLEND/BAKE/BREAK — colossal ghost numerals, unified with the
   01/02/03 treatment used in the other sections ─────────────────── */
.summary .sum-num{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;
  font-weight:900 !important;
  font-size:clamp(90px,10vw,180px) !important;
  letter-spacing:-0.05em !important;
  line-height:0.9 !important;
  color:rgba(248,244,236,0.16) !important;
  display:block !important;
  margin-bottom:clamp(8px,1vw,16px);
  pointer-events:none;user-select:none;
}

/* ── ORDER SECTION — bread checkout background ────────────────────── */
.order-section{
  background:
    linear-gradient(180deg,
      rgba(200,169,122,0.90) 0%,
      rgba(107,78,46,0.88) 16%,
      rgba(70,49,29,0.90) 42%,
      rgba(58,38,20,0.93) 100%),
    url('/img/order-bg.webp') center/cover no-repeat !important;
}

/* ═══ MOBILE MASTERPASS (perf + UX on touch) ═══════════════════════ */
@media (pointer:coarse), (max-width:768px) {
  /* iOS zooms the page when focusing inputs under 16px — never again */
  .form-row input, .form-row select { font-size:16px !important; }
  /* formats rail: full-card swipe panels, gentle snap, no pinning */
  .fmts-rows{
    grid-auto-columns:min(84vw,340px) !important;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--g,20px);
  }
  .fmts-row{scroll-snap-align:start;min-height:clamp(400px,52svh,520px)}
  /* section backgrounds: never fixed geometry tricks on touch */
  .who{clip-path:none !important}
  .who::before{position:absolute !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   WHITE PASS — entire bread page on white. All background images removed,
   all section grounds white, every cream-on-dark text remapped to ink.
═══════════════════════════════════════════════════════════════════════ */
html,body{background:#fff !important}
.statement-hero,.fmts,.fmts--scrolly .fmts-inner,.section,.nutrition,.ingredients,.who,
.summary,.order-section,.pre-footer-statement,footer,.ship-badge{
  background:#fff !important;background-image:none !important;
}
.who{clip-path:none !important}
.who::before{display:none !important}
/* kill decorative grid/gridline pseudo layers on former dark sections */
.statement-hero::before,.statement-hero::after,
.fmts::before,.fmts::after,
.summary::before,.summary::after,
.order-section::before,.order-section::after,
.pre-footer-statement::before,.pre-footer-statement::after,
footer::before,footer::after{display:none !important}

/* ── statement hero ── */
.stmt-line--sm .stmt-word{color:rgba(42,24,16,0.5) !important}
.stmt-line--lg .stmt-word{
  background:none !important;-webkit-text-fill-color:#2A1810 !important;color:#2A1810 !important;
}
.stmt-eye-text{color:#7A5544 !important;opacity:1 !important}
.stmt-rule{background:linear-gradient(90deg,transparent,rgba(92,61,46,0.45)) !important}
.stmt-rule:last-child{background:linear-gradient(90deg,rgba(92,61,46,0.45),transparent) !important}
.stmt-foot-item{color:rgba(92,61,46,0.7) !important}
.stmt-foot-sep{color:rgba(92,61,46,0.4) !important}
.hero-grain figcaption{color:rgba(92,61,46,0.65) !important}
.stmt-bg-rule{background:rgba(42,24,16,0.08) !important}

/* ── formats rail ── */
.fmts-eyebrow{color:rgba(92,61,46,0.6) !important}
.fmts-h2{color:#2A1810 !important}
.fmts-sub{color:rgba(92,61,46,0.75) !important}
.fmts-rows{border-top-color:rgba(42,24,16,0.12) !important}
.fmts-row{border-right-color:rgba(42,24,16,0.10) !important;border-bottom-color:rgba(42,24,16,0.10) !important}
.fmts-time span{color:rgba(42,24,16,0.14) !important}
.fmts-time em{color:rgba(92,61,46,0.55) !important}
.fmts-name{color:#2A1810 !important}
.fmts-method{color:rgba(92,61,46,0.6) !important}
.fmts-desc{color:rgba(92,61,46,0.8) !important}
.fmts-note{color:rgba(92,61,46,0.55) !important}
.fmts-fill{background:var(--gold) !important}
.fmts-bar{background:rgba(42,24,16,0.08) !important}

/* ── nutrition / ingredients / who: already light text, ensure ink ── */
.nutrition,.ingredients,.who{color:inherit}

/* ── summary (Blend/Bake/Break) ── */
.summary .sum-num{color:rgba(42,24,16,0.10) !important}
.summary .sum-label{color:#2A1810 !important}
.summary .sum-val{color:#4A3018 !important}
.summary .sum-desc,.summary .sum-alt{color:rgba(92,61,46,0.75) !important}
.summary .sum-item{border-right-color:rgba(42,24,16,0.10) !important}

/* ── ship badge ── */
.ship-badge .ship-text{color:#8a6a1f !important}
.ship-badge .ship-rule{background:rgba(42,24,16,0.15) !important}

/* ── order section ── */
.order-eyebrow{color:rgba(92,61,46,0.6) !important}
.order-h2{color:#2A1810 !important}
.order-sub,.order-info p,.order-meta,.order-meta span{color:rgba(92,61,46,0.8) !important}
.order-divider{background:rgba(42,24,16,0.10) !important}
.oq{color:rgba(92,61,46,0.85) !important;border-left:2px solid #B8860B !important}
.form-row label{color:rgba(92,61,46,0.7) !important}
.form-row input,.form-row select{
  background:#fff !important;border:1px solid rgba(42,24,16,0.22) !important;
  color:#2A1810 !important;caret-color:#2A1810 !important;
  -webkit-text-fill-color:#2A1810 !important;
}
.form-row input::placeholder{color:rgba(92,61,46,0.45) !important}
.order-trust,.order-trust span{color:rgba(92,61,46,0.55) !important}

/* ── blessing pre-footer ── */
.pfs-eyebrow{color:rgba(92,61,46,0.55) !important}
.pfs-mybread{color:rgba(92,61,46,0.6) !important}
.pfs-main{color:#2A1810 !important}
.pfs-translation,.pfs-prayer{color:rgba(92,61,46,0.7) !important}
.pfs-word{color:inherit !important}

/* ── footer ── */
.ft-statement,.ft-statement-line{color:rgba(42,24,16,0.07) !important}
.ft-creed{color:rgba(92,61,46,0.7) !important}
footer .footer-link,.ft-link{color:rgba(92,61,46,0.6) !important;border-color:rgba(42,24,16,0.10) !important}
footer .footer-link:hover,.ft-link:hover{color:#2A1810 !important}
.footer-logo{color:rgba(42,24,16,0.6) !important}
.footer-copy{color:rgba(92,61,46,0.45) !important;border-top-color:rgba(42,24,16,0.08) !important}
.ft-coords{color:rgba(92,61,46,0.4) !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;
}

/* ── FORMATTING FIX: keep the "same buckwheat…" note inside the pinned
   formats viewport so it never bleeds into the shipping badge below ── */
.fmts--scrolly .fmts-inner{padding-bottom:clamp(44px,7vh,84px)}
.fmts--scrolly .fmts-note{
  position:absolute;left:0;right:0;bottom:clamp(16px,3vh,32px);
  margin:0 auto !important;padding-top:clamp(14px,2vh,22px) !important;
  max-width:min(900px,92vw);
}
.ship-badge{position:relative;z-index:2}

/* ═══ FORMATS RAIL — dish glyphs: the seven meals legible at a glance ═══ */
.fmts-icon{
  display:block;
  width:clamp(26px,2.2vw,32px);height:clamp(26px,2.2vw,32px);
  color:rgba(92,61,46,0.55);
  margin-bottom:clamp(8px,1.2vh,14px);
  transition:color 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.fmts-icon svg{width:100%;height:100%;display:block}
@media(hover:hover){.fmts-row:hover .fmts-icon{color:var(--gold)}}

/* ═══ NUTRITION — the grain itself behind WHAT IT GIVES ══════════════════
   Buckwheat groats on paper; warm veil keeps the table and the amino
   note at full AA contrast. Wins over palette.css via .section.nutrition. */
.section.nutrition{
  background:
    linear-gradient(180deg, #FAF5EA 0%, rgba(250,245,234,0.92) 14%, rgba(250,245,234,0.88) 55%, #FAF5EA 100%),
    url('/img/buckwheat-groats.webp') center 40%/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}

/* ═══ INGREDIENT ORIGINS — the land behind each row ══════════════════════
   Subtle terroir photography per row, veiled to paper so the editorial
   text keeps full contrast. Veil leans toward the copy side: normal rows
   (01/03) clear toward the right data rail, flipped rows (02/04) toward
   the left. Id specificity beats the light-pass bg blanket + row tints. */
#ing-buckwheat{
  background:
    linear-gradient(90deg, rgba(250,245,234,0.97) 0%, rgba(250,245,234,0.94) 55%, rgba(250,245,234,0.84) 100%),
    url('/img/buckwheat-field.webp') center 60%/cover no-repeat var(--pp-paper,#FAF5EA) !important;
}
#ing-salt{
  background:
    linear-gradient(270deg, rgba(250,245,234,0.97) 0%, rgba(250,245,234,0.94) 55%, rgba(250,245,234,0.84) 100%),
    url('/img/origin-altaussee.webp') center 38%/cover no-repeat var(--pp-paper,#FAF5EA) !important;
}
#ing-yeast{
  background:
    linear-gradient(270deg, rgba(250,245,234,0.97) 0%, rgba(250,245,234,0.94) 55%, rgba(250,245,234,0.84) 100%),
    url('/img/origin-yeast.webp') center 45%/cover no-repeat var(--pp-paper,#FAF5EA) !important;
}
#ing-psyllium{
  background:
    linear-gradient(90deg, rgba(250,245,234,0.97) 0%, rgba(250,245,234,0.94) 55%, rgba(250,245,234,0.84) 100%),
    url('/img/origin-gujarat.webp') center 55%/cover no-repeat var(--pp-paper,#FAF5EA) !important;
}

/* ═══ WHO — the table itself behind EVERYONE AT THE TABLE ════════════════ */
.section.who{
  background:
    linear-gradient(180deg, #FAF5EA 0%, rgba(237,229,212,0.88) 16%, rgba(237,229,212,0.84) 50%, #FAF5EA 100%),
    url('/img/table-loaf.webp') center 55%/cover no-repeat var(--pp-paper,#FAF5EA) !important;
}

/* ═══ SUMMARY — supper behind BLEND · BAKE · BREAK ═══════════════════════ */
div.summary{
  background:
    linear-gradient(180deg, #FAF5EA 0%, rgba(250,245,234,0.90) 16%, rgba(250,245,234,0.85) 50%, #FAF5EA 100%),
    url('/img/supper.webp') center 40%/cover no-repeat var(--pp-paper,#FAF5EA) !important;
}

/* ═══ HERO GRAIN — specimen label: name the grain, give it scale ═════════ */
.hero-grain .hg-spec{
  position:absolute;
  bottom:calc(100% + clamp(10px,1.2vw,18px));
  left:calc(-1*clamp(10px,2vw,34px));
  z-index:3;
  font:700 11px/1.7 'Courier New',monospace;
  letter-spacing:0.20em;text-transform:uppercase;
  color:rgba(92,61,46,0.58);
  width:max-content;max-width:min(40ch,46vw);
  text-align:left;
}
@media(max-width:640px){.hero-grain .hg-spec{position:static;margin:0 0 12px;max-width:100%}}
.hg-dot{
  display:inline-block;width:17px;height:16px;
  vertical-align:middle;margin-left:5px;
  transform:rotate(-12deg);
}

/* ═══ NUTRITION NOTE — full-bleed across both columns ════════════════════ */
.nutrition-inner > .nutr-note{
  grid-column:1 / -1;max-width:none;
  border-top:1px solid rgba(92,61,46,0.16);
  padding-top:clamp(16px,2.2vh,26px);
  margin-top:clamp(6px,1.2vh,14px);
  line-height:2.05;
}
.nutr-note .nn-line{display:block}
.nutr-note .nn-line + .nn-line{margin-top:0.55em}
.nutr-note .nn-seg{white-space:nowrap}
@media(max-width:760px){.nutr-note .nn-seg{white-space:normal}}

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

/* ═══ NUTRITION TABLE HEADS — two deliberate lines, no mid-word wraps ════ */
.nutr-table .nth{display:block;white-space:nowrap;line-height:1.35}
.nutr-table .nth-sub{font-weight:400;font-size:0.85em;color:rgba(92,61,46,0.65);margin-top:2px}

/* ═══ MOBILE PASS 2026-06-12 ═════════════════════════════════════════════ */
@media(max-width:760px){
  /* table heads may wrap as words (never mid-word) on narrow columns */
  .nutr-table .nth{white-space:normal}
  .nutr-table tr>:first-child{width:40%;letter-spacing:0.18em}
  /* specimen label: in flow above the grain, never absolute over hero copy */
  .hero-grain .hg-spec{position:static;margin:0 auto 12px;max-width:100%;text-align:center;width:auto}
  /* origin rows: calmer zoom — keep texture readable on tall stacked rows */
  #ing-buckwheat,#ing-salt,#ing-psyllium,#ing-yeast{background-position:center top !important}
}
@media(max-width:760px){
  /* origin rows: flat veil on stacked layout — data rails never sit on the
     weak end of a side-leaning gradient */
  #ing-buckwheat{background:linear-gradient(180deg,rgba(250,245,234,0.96),rgba(250,245,234,0.90)),url('/img/buckwheat-field.webp') center top/cover no-repeat var(--pp-paper,#FAF5EA) !important}
  #ing-salt{background:linear-gradient(180deg,rgba(250,245,234,0.96),rgba(250,245,234,0.90)),url('/img/origin-altaussee.webp') center top/cover no-repeat var(--pp-paper,#FAF5EA) !important}
  #ing-psyllium{background:linear-gradient(180deg,rgba(250,245,234,0.96),rgba(250,245,234,0.90)),url('/img/origin-gujarat.webp') center top/cover no-repeat var(--pp-paper,#FAF5EA) !important}
  #ing-yeast{background:linear-gradient(180deg,rgba(250,245,234,0.96),rgba(250,245,234,0.90)),url('/img/origin-yeast.webp') center top/cover no-repeat var(--pp-paper,#FAF5EA) !important}
}
@media(max-width:760px){
  /* coords + data labels: one notch up from ghost — phone screens, sunlight */
  .ing-coords{color:rgba(92,61,46,0.62) !important}
  .ing-coords span{color:rgba(92,61,46,0.55) !important}
  .ing-stat-label,.ing-bar-label{color:rgba(92,61,46,0.6) !important}
}

/* ═══ NUTRITION TABLE — column air + value integrity ═════════════════════
   Heads were colliding across columns and values wrapped mid-figure. */
.nutr-table tr>*+*{padding-left:clamp(14px,1.8vw,32px);white-space:nowrap}
.nutr-table tr:first-child td{vertical-align:bottom}
@media(max-width:400px){.nutr-table tr>:first-child{width:32%;letter-spacing:0.12em}}

/* ═══ NUTRITION — the Lembas pull-quote under the tags ═══════════════════ */
.nutr-quote{
  margin:clamp(30px,4.5vh,56px) 0 0;
  position:relative;
  padding-left:clamp(20px,2.2vw,30px);
  border-left:3px solid var(--gold,#B8860B);
  max-width:44ch;
}
.nutr-quote blockquote{
  text-indent:-0.42ch;
  margin:0;
  font-family:'Courier New',Courier,monospace;font-weight:700;
  font-size:clamp(16px,1.45vw,21px);line-height:1.7;
  letter-spacing:0.02em;
  color:#3A2614;
}
@media(max-width:760px){.nutr-quote{max-width:100%;margin-top:30px}}

/* ═══ WATER BADGES — warm for the breads, cold for the pan-quick ═════════ */
.fmts-water{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:11px;padding:6px 10px;
  font:700 10px/1 'Courier New',monospace;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;width:max-content;position:relative;
}
.fmts-water--warm{background:var(--err,#C0533A)}
.fmts-water--cold{background:#4E7385}


/* ═══ TIME BAR = ONE HOUR — make the scale legible ═══════════════════════ */
.fmts-bar{position:relative;overflow:visible;
  background-image:
    linear-gradient(90deg, transparent calc(25% - .5px), rgba(42,24,16,.28) calc(25% - .5px), rgba(42,24,16,.28) calc(25% + .5px), transparent calc(25% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(42,24,16,.28) calc(50% - .5px), rgba(42,24,16,.28) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(75% - .5px), rgba(42,24,16,.28) calc(75% - .5px), rgba(42,24,16,.28) calc(75% + .5px), transparent calc(75% + .5px)) !important;
  background-color:rgba(42,24,16,0.08) !important;
}
.fmts-bar::before{content:'0';position:absolute;left:0;top:calc(100% + 5px);
  font:700 9px/1 'Courier New',monospace;letter-spacing:.18em;color:rgba(92,61,46,.6)}
.fmts-bar::after{content:'60 MIN';position:absolute;right:0;top:calc(100% + 5px);
  font:700 9px/1 'Courier New',monospace;letter-spacing:.18em;color:rgba(92,61,46,.6)}

/* water badges: bottom-anchored — one shared baseline above every time bar */
.fmts-body .fmts-water{margin-top:auto}

/* FIX — warm/cold badge clipped on tall-copy cards in the pinned rail.
   The pinned .fmts-inner is overflow:hidden; the badge used to flow right
   after a variable-length description, so longer cards (Classic Loaf, Pizza,
   Flatbread) pushed it past the bottom edge. Make the body fill the row so
   the badge's margin-top:auto pins it to ONE baseline just above the time
   bar on every card; the description yields (shrinks/clips) first, the badge
   never does. Scoped to the desktop scrolly rail — mobile/reduced-motion
   use the content-sized swipe rail and were never affected. */
.fmts--scrolly .fmts-body{flex:1 1 auto;min-height:0}
.fmts--scrolly .fmts-body .fmts-desc{flex:0 1 auto;min-height:0;overflow:hidden}
.fmts--scrolly .fmts-body .fmts-water{flex:0 0 auto;margin-top:auto}
.fmts-body .fmts-desc{margin-bottom:clamp(12px,1.6vh,18px)}
.fmts-waternote{
  margin:14px 0 0;max-width:640px;
  font:700 11px/1.7 'Courier New',monospace;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(92,61,46,.62);
}
.wn-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-right:9px;border-radius:50%;
  border:1px solid rgba(92,61,46,.5);
  font:italic 700 10px/1 Georgia,serif;color:rgba(92,61,46,.7);
  transform:translateY(2px);
}

/* ═══ SCROLLY FIT — the pinned composition must FIT the viewport ═════════
   justify-content:center let tall content spill ABOVE the nav (the
   clipped "Any meal.") and BELOW the fold — water badges, the time bar
   and the rail note rode outside the frame for the whole horizontal
   ride. Now: the head takes its height, THE RAIL TAKES EXACTLY WHAT
   REMAINS, cards bottom-anchor their body, and the note returns to the
   flow — name, method, badge, bar and note inside the frame on every
   viewport height. The shipping badge then meets the eye the moment
   the travel completes. */
.fmts--scrolly .fmts-inner{justify-content:flex-start;padding-bottom:clamp(14px,2.2vh,28px)}
.fmts--scrolly .fmts-rows{flex:1 1 auto;min-height:0}
.fmts--scrolly .fmts-row{min-height:0;height:100%}
.fmts--scrolly .fmts-note{position:static;margin:0 auto !important;max-width:min(900px,92vw);
  padding:clamp(10px,1.6vh,18px) 0 0 !important;flex:0 0 auto}

/* head + numerals compress on short viewports so the cards keep room */
@media(max-height:940px){
  .fmts--scrolly .fmts-h2{font-size:clamp(40px,7.2vh,84px)}
  .fmts--scrolly .fmts-head{margin-bottom:clamp(14px,2.4vh,32px);padding-bottom:clamp(12px,2vh,26px)}
  .fmts--scrolly .fmts-sub{font-size:clamp(13px,1.9vh,16px);line-height:1.6}
  .fmts--scrolly .fmts-waternote{font-size:11.5px}
  .fmts--scrolly .fmts-time{height:clamp(86px,12vh,150px)}
  .fmts--scrolly .fmts-time span{font-size:clamp(60px,10vh,118px)}
}
@media(max-height:800px){
  .fmts--scrolly .fmts-h2{font-size:clamp(34px,6.2vh,60px)}
  .fmts--scrolly .fmts-desc{font-size:12.5px;line-height:1.5}
  .fmts--scrolly .fmts-time{height:clamp(64px,9.5vh,110px)}
  .fmts--scrolly .fmts-time span{font-size:clamp(48px,8vh,88px)}
  .fmts--scrolly .fmts-body{gap:6px}
}


/* ── 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}
}


/* MOBILE RITUAL (2026-06-16) — run the pinned scroll-driven rail on touch too,
   identical to desktop. When .fmts--scrolly is active, neutralise the mobile
   swipe-rail rules (scroll-snap container) so the JS can translate the track. */
@media (max-width:600px){
  .fmts--scrolly .fmts-rows{ scroll-snap-type:none !important; overflow:visible !important; }
  .fmts--scrolly .fmts-row{ min-height:0 !important; height:100% !important; scroll-snap-align:none !important; }
}