/* =========================================================================
   Pure H
   Palette is the brand's own four:
     #244C39 forest (primary)   #677E73 sage (primary accent)
     #FAF1DB cream (secondary)  #CC8F33 gold (secondary accent)
   Radius: surfaces and images 16px, chips and controls full pill.
   ========================================================================= */
:root{
  color-scheme:light;
  --bg:#FAF1DB; --paper:#FFFCF3; --sunk:#F2E7CB;
  --band:#244C39; --band-ink:#F7F1DF; --band-line:#4A6C59;
  --ink:#16261E; --ink-2:#3A4C41; --muted:#4F6359;
  --sage:#677E73; --sage-soft:#E4E7DC;
  --line:#DED4B8; --line-strong:#6E7F73;
  --gold:#CC8F33; --gold-ink:#16261E; --gold-soft:#F0DFBB;
  --cream-fixed:#FAF1DB;
  --focus:#244C39;
  --shadow:0 22px 50px -30px rgba(22,38,30,.45);
  --shadow-lg:0 40px 80px -44px rgba(22,38,30,.55);
  --r:16px; --r-sm:10px;
  --w:1280px; --gut:clamp(20px,5vw,60px);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-gentle:cubic-bezier(.16,1,.3,1); /* exponential ease-out: settles very gradually at the end */
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --f-display:"Outfit","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
}
/* Light palette only: the cream design system is the brand default.
   (Automatic dark mode removed so system dark mode no longer turns the
   whole site forest green.) */

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#12211A; --paper:#1C2F26; --sunk:#0D1913;
  --band:#1A2F25; --band-ink:#F2EBD8; --band-line:#33513F;
  --ink:#F1EADA; --ink-2:#D5CFBE; --muted:#9EB2A5;
  --sage:#7F978A; --sage-soft:#22382C;
  --line:#2C4034; --line-strong:#63796B;
  --gold:#DFA85A; --gold-ink:#12211A; --gold-soft:#33291A;
  --shadow:0 22px 50px -28px rgba(0,0,0,.75);
  --shadow-lg:0 40px 80px -40px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation; -webkit-tap-highlight-color:rgba(36,76,57,.14);
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--f-display); text-wrap:balance; margin:0; color:var(--ink)}
h1{font-weight:600; letter-spacing:-.035em; line-height:1.05; font-size:clamp(2.05rem,4vw,3.5rem)}
h2{font-weight:600; letter-spacing:-.03em; line-height:1.1; font-size:clamp(1.8rem,3.2vw,2.85rem)}
h3{font-weight:600; letter-spacing:-.015em; line-height:1.22; font-size:1.22rem}
h4{font-weight:600; letter-spacing:-.01em; line-height:1.3; font-size:1.02rem}
p{margin:0}
a{color:inherit}
[id]{scroll-margin-top:88px}
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2.5px solid var(--focus); outline-offset:3px; border-radius:5px;
}
.skip{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--band); color:var(--band-ink); padding:12px 18px; border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0; top:0}
.wrap{max-width:var(--w); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:clamp(56px,7.5vw,108px)}
.sec-tight{padding-block:clamp(40px,5vw,68px)}
.lede{font-size:clamp(1.02rem,1.3vw,1.16rem); color:var(--ink-2); max-width:62ch}
.note{font-size:14.5px; color:var(--muted)}
.stack>*+*{margin-top:var(--s,18px)}

/* ---- chip: lifted straight off the label ---- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--band); color:var(--band-ink);
  font-family:var(--f-display); font-weight:600; font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:7px 15px; border-radius:999px;
}
.chip-gold{background:var(--gold); color:var(--gold-ink)}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-display); font-size:15.5px; font-weight:600; white-space:nowrap;
  text-decoration:none; padding:13px 26px; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gold); color:var(--cream-fixed)}
.btn-ghost{border-color:var(--line-strong); color:var(--ink)}
.btn-onband{border-color:var(--band-line); color:var(--band-ink)}
.btn-onband.btn-primary{border-color:transparent}
.btn-outline{border-color:var(--band); color:var(--band); background:transparent}
.btn-sm{padding:9.5px 19px; font-size:14.5px}
.btn-block{width:100%}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--gold); filter:brightness(1.06); transform:translateY(-2px)}
  .btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
  .btn-onband:hover{border-color:var(--band-ink); transform:translateY(-2px)}
  .btn-outline:hover{background:var(--sage-soft); border-color:var(--band); color:var(--band); transform:translateY(-2px)}
}
.tlink{
  display:inline-flex; align-items:center; gap:.45em; text-decoration:none; width:fit-content;
  font-family:var(--f-display); font-weight:600; font-size:15.5px; color:var(--ink);
  border-bottom:2px solid var(--gold); padding-bottom:3px;
  transition:gap 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .tlink:hover{gap:.8em} }
.tlink-onband{color:var(--band-ink)}

/* ---- masthead ---- */
.mast{position:sticky; top:0; z-index:50; background:var(--band); color:var(--band-ink);
  border-bottom:1px solid transparent; transition:border-color 200ms ease}
.mast.stuck{border-bottom-color:var(--band-line)}
.mast-in{display:flex; align-items:center; gap:22px; height:70px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; flex:none}
.brand-leaf{width:11px; height:11px; border-radius:0 100% 0 100%; background:var(--gold); transform:rotate(-12deg)}
.brand-logo{height:34px; width:auto}
.brand-name{font-family:var(--f-display); font-weight:700; font-size:19.5px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--band-ink)}
.nav{display:flex; align-items:center; gap:10px; margin-left:auto}
.nav a{text-decoration:none; font-size:14.5px; font-weight:500; color:rgba(247,241,223,.82);
  padding:8px 13px; border-radius:999px; white-space:nowrap; transition:color 150ms ease, background-color 150ms ease}

.nav a[aria-current="page"]{color:var(--band-ink); font-weight:600; background:rgba(247,241,223,.12)}
@media (hover:hover) and (pointer:fine){ .nav a:hover{color:var(--band-ink); background:rgba(247,241,223,.10)} }
.mast-cta{margin-left:12px; flex:none}
.menu-btn{display:none; align-items:center; flex:none; background:transparent;
  border:1.5px solid var(--band-line); color:var(--band-ink); font-family:var(--f-display);
  font-weight:600; font-size:14.5px; padding:9px 16px; border-radius:999px; cursor:pointer}
@media (max-width:1090px){
  .nav{position:absolute; left:0; right:0; top:70px; margin:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--band); border-block:1px solid var(--band-line);
    padding:6px var(--gut) 16px; box-shadow:var(--shadow)}
  .nav[hidden]{display:none}
  .nav a{padding:13px 2px; font-size:16px; border-radius:0}
  .nav a+a{border-top:1px solid var(--band-line)}
  .menu-btn{display:inline-flex}
  .mast-cta{margin-left:auto}
}
@media (max-width:540px){ .mast-in{gap:10px} .mast-cta{display:none} }

/* ---- page head ---- */
.phead{padding-block:clamp(38px,5vw,64px) clamp(28px,3.5vw,44px); border-bottom:1px solid var(--line)}
.phead h1{max-width:20ch}
.phead .lede{margin-top:18px}
.phead .chip{margin-bottom:20px}

/* ---- hero ---- */
.hero{padding-block:clamp(28px,3.5vw,56px) clamp(48px,6vw,84px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(24px,4vw,64px); align-items:center}
.hero-copy{min-width:0; container-type:inline-size}
.hero-title{
  max-width:none; margin-top:20px;
  /* The whole heading scales from its actual column width, not the viewport.
     This keeps the first sentence intact at every breakpoint. */
  font-size:clamp(1rem,6.25cqi,3rem);
  white-space:normal; text-wrap:wrap;
}
.hero-title-lock,.hero-title-line{display:block}
.hero-title-lock{white-space:nowrap; text-wrap:nowrap}
.hero .lede{margin-top:20px; max-width:46ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; font-size:14.5px; color:var(--muted)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-title{font-size:clamp(1rem,6.25cqi,2.65rem)}
}

/* Tablet sizing: keep hero and split images from looking oversized */
@media (max-width:900px) and (min-width:641px){
  .viewer{max-width:min(480px, 72%); margin-inline:auto}
  .split img{max-width:min(540px, 80%); margin-inline:auto}
  .split-narrow img{max-width:min(480px, 80%)}
}

/* ---- the canister viewer: the packaging is the centrepiece ---- */
.viewer{display:grid; gap:14px}
.plinth{
  position:relative; background:var(--cream-fixed); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.plinth img{width:100%; grid-area:1/1; transition:opacity 380ms var(--ease-gentle), transform 380ms var(--ease-gentle), filter 380ms ease}
.plinth .frames{display:grid}
.plinth img[data-off]{opacity:0; transform:scale(.985); filter:blur(3px); pointer-events:none}

/* ---- duo: the pack and the raw ingredients, one in front of the other ---- */
.duo{position:relative; padding-bottom:9%}
.duo-card{transition:transform 480ms var(--ease-gentle), filter 480ms ease; will-change:transform}
.duo-pack{position:relative; z-index:2; width:86%; transform-origin:left center}
.duo-ing{
  position:absolute; right:0; bottom:0; width:54%; z-index:1; cursor:pointer;
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg);
  background:var(--cream-fixed); transform-origin:right bottom;
}
.duo-ing img{display:block; width:100%; height:auto}
.duo-ing:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.duo[data-front="ing"] .duo-ing{z-index:3; transform:scale(1.06)}
.duo[data-front="ing"] .duo-pack{transform:scale(.97); filter:saturate(.92) brightness(.98)}
@media (max-width:900px){ .duo-pack{width:78%} .duo-ing{width:50%} }
@media (max-width:520px){ .duo{padding-bottom:14%} .duo-pack{width:78%} .duo-ing{width:50%} }

.vtabs{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.vtab{
  font-family:var(--f-display); font-weight:600; font-size:13.5px; cursor:pointer;
  padding:8px 16px; border-radius:999px; background:transparent;
  border:1.5px solid var(--line-strong); color:var(--ink);
  transition:transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.vtab:active{transform:scale(.97)}
.vtab[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
@media (hover:hover) and (pointer:fine){ .vtab:not([aria-selected="true"]):hover{border-color:var(--ink)} }
/* on the forest band the unselected tabs need the cream ink to stay legible */
.forest .vtab{color:var(--band-ink); border-color:color-mix(in srgb, var(--band-ink) 55%, transparent)}
.forest .vtab[aria-selected="true"]{background:var(--band-ink); border-color:var(--band-ink); color:var(--band)}
@media (hover:hover) and (pointer:fine){ .forest .vtab:not([aria-selected="true"]):hover{border-color:var(--band-ink); background:color-mix(in srgb, var(--band-ink) 12%, transparent)} }

/* ---- forest section: the second section on each page ---- */
.forest{background:var(--band); color:var(--band-ink); border-block:1px solid var(--band-line)}
.forest h1,.forest h2,.forest h3,.forest h4{color:var(--band-ink)}
.forest .card h3{color:var(--band)}
.forest>.wrap>.lede,.forest .lede,.forest .note{color:var(--band-ink); opacity:.92}
.forest .step figcaption,.forest .step b{color:var(--band-ink)}
.forest .step img{border-color:var(--band-line)}
.forest .chip{background:var(--gold); color:var(--gold-ink)}
.forest .btn-ghost{border-color:var(--band-line); color:var(--band-ink)}
.forest .tlink{color:var(--band-ink)}
.forest .stat-l{color:var(--band-ink)}

/* ---- band ---- */
.band{background:var(--bg); color:var(--ink); border-block:1px solid var(--line)}
.band h1,.band h2,.band h3,.band h4{color:var(--band)}
.band .lede,.band .note{color:var(--ink-2); opacity:.92}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px)}
.stat-n{font-family:var(--f-display); font-weight:600; color:var(--gold);
  font-size:clamp(2.5rem,4.6vw,3.9rem); line-height:.98; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.stat-n[data-count]{font-variant-numeric:tabular-nums}
.stat-l{margin-top:10px; font-size:15px; max-width:26ch; opacity:.88}
@media (max-width:720px){
  .stats{grid-template-columns:1fr; gap:22px}
  .stats>div{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center}
  .stat-l{margin-top:0}
}

/* ---- pillars, straight from the label's three green chips ---- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line)}
.pillar{padding:clamp(26px,3vw,40px) clamp(18px,2.4vw,34px); border-bottom:1px solid var(--line)}
.pillar+.pillar{border-left:1px solid var(--line)}
.pillar .chip{margin-bottom:16px; background:var(--band); color:var(--band-ink)}
.pillar p{color:var(--ink-2); font-size:15.5px}
.pillar p+p{margin-top:12px}
@media (max-width:820px){
  .pillars{grid-template-columns:1fr}
  .pillar+.pillar{border-left:0}
}

/* ---- cards, echoing the label's white rounded panels ---- */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.4vw,30px)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,22px)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px)}
@media (max-width:860px){ .grid-3{grid-template-columns:1fr} }
@media (max-width:640px){ .grid-2{grid-template-columns:1fr} }

/* ---- split ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4.5vw,68px); align-items:center}
.split-narrow{grid-template-columns:.85fr 1.15fr}
.split-recipe{grid-template-columns:.72fr 1.28fr}
.split img{border-radius:var(--r); box-shadow:var(--shadow); width:100%}
@media (max-width:860px){ .split,.split-narrow,.split-recipe{grid-template-columns:1fr} }

/* ---- nine ingredients ---- */
.nine{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,16px)}
.ing{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; display:grid; gap:8px; align-content:start; justify-items:center; text-align:center;
  transition:transform 200ms var(--ease-out), border-color 200ms ease}
.ing img{height:70px; width:auto; object-fit:contain; margin:0 auto 2px}
.ing b{font-family:var(--f-display); font-weight:600; font-size:16.5px}
.ing span{font-size:13.5px; color:var(--muted)}

@media (hover:hover) and (pointer:fine){ .ing:hover{transform:translateY(-3px); border-color:var(--gold)} }
@media (max-width:820px){ .nine{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){
  .nine{grid-template-columns:1fr}
  .ing{grid-template-columns:auto 1fr; align-items:center; column-gap:16px; justify-items:start; text-align:left}
  .ing img{height:52px; grid-row:span 2; margin:0}

}

/* ---- recipe steps: real photographs of the real method ---- */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.4vw,16px)}
.step figure{margin:0}
.step img{border-radius:var(--r-sm); width:100%; border:1px solid var(--line)}
.step figcaption{margin-top:12px; font-size:14.5px; color:var(--ink-2)}
.step b{display:block; font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--ink); margin-bottom:2px}
.steps6{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.3vw,16px); align-content:start}
.steps6 img{max-width:100%}
.recipe-split{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,2.5vw,30px); align-items:start;
}
.recipe-picture-grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(8px,1vw,12px);
}
.recipe-picture-grid .step,.recipe-picture-grid figure{min-width:0}
.recipe-picture-grid img{
  width:100%; max-width:none; aspect-ratio:4/3; object-fit:cover;
  border-color:var(--band-line);
}
.recipe-info{min-width:0}
.recipe-card{
  background:var(--paper); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:clamp(24px,3vw,40px);
  box-shadow:var(--shadow); text-align:left;
}
.forest .recipe-card h2{color:var(--ink)}
.forest .recipe-card .lede{color:var(--ink-2); margin-top:12px; opacity:1}
.recipe-section-title{
  margin-top:clamp(24px,3vw,34px); margin-bottom:14px;
  color:var(--band) !important;
}
.recipe-ingredients{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 32px; color:var(--ink-2);
}
.recipe-ingredients ul{margin:0; padding-left:20px; display:grid; gap:9px}
.recipe-instructions{display:grid; gap:12px; color:var(--ink-2)}
@media (max-width:760px){
  .recipe-picture-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .recipe-ingredients{grid-template-columns:1fr; gap:9px}
}
@media (max-width:460px){
  .recipe-picture-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .steps{grid-template-columns:1fr} .steps6{grid-template-columns:repeat(2,1fr)} }

/* ---- nutrition panel ---- */
.nutri{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.nutri table{width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums}
.nutri caption{text-align:left; padding:20px 22px 4px; font-family:var(--f-display);
  font-weight:600; font-size:1.2rem; color:var(--ink)}
.nutri th,.nutri td{padding:9px 22px; text-align:left; border-bottom:1px solid var(--line)}
.nutri td:last-child,.nutri th:last-child{text-align:right}
.nutri tbody tr:last-child td{border-bottom:0}
.nutri .ind td:first-child{padding-left:44px; color:var(--ink-2)}
.nutri .ind2 td:first-child{padding-left:64px; color:var(--ink-2)}
.nutri .maj td{font-weight:600}
.nutri .rule td{border-bottom:3px solid var(--ink); padding:0}

/* ---- price ladder ---- */
.ladder{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,18px)}
.tier{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.2vw,26px); display:flex; flex-direction:column; gap:6px; position:relative}
.tier[data-best]{border-color:var(--gold); border-width:2px}
.tier .qty{font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--muted)}
.tier .total{font-family:var(--f-display); font-weight:600; font-size:2.15rem; letter-spacing:-.035em;
  line-height:1; font-variant-numeric:tabular-nums; color:var(--ink)}
.tier .per{font-size:14.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.tier .save{font-size:13.5px; font-weight:600; color:var(--ink); background:var(--gold-soft);
  padding:3px 10px; border-radius:999px; align-self:flex-start; margin-top:4px}
.tier .btn{margin-top:auto}
.tier .save+.btn,.tier .note+.btn{margin-top:auto}
.tier>.btn{margin-block-start:18px}
.subcard{margin-top:clamp(18px,2.4vw,26px); display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center}
@media (max-width:700px){ .subcard{grid-template-columns:1fr} .subcard .btn{justify-self:start} }
.subpick{margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; font-size:15px; color:var(--ink-2)}
.subpick label{font-weight:600}
.subpick select{font:inherit; color:var(--ink); background:var(--bg); border:1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius:10px; padding:8px 12px}
.subpick select:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

@media (max-width:980px){ .ladder{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .ladder{grid-template-columns:1fr} }

/* ---- reviews ---- */
.revs{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,22px)}
.rev{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,32px); display:grid; gap:14px; align-content:start}
.rev-lead{grid-column:span 7; grid-row:span 2; align-self:stretch; align-content:space-between; gap:24px}
.rev-a{grid-column:span 5}
.rev-b{grid-column:8/-1}
.stars{color:var(--gold); font-size:14px; letter-spacing:.22em}
.rev q{color:var(--sage); quotes:"\201C" "\201D"; font-family:var(--f-display); font-weight:500;
  letter-spacing:-.012em; line-height:1.34; font-size:1.05rem}
.rev-lead q{font-size:clamp(1.18rem,1.8vw,1.5rem)}
.rev footer{font-size:14px; color:var(--muted)}
.forest .rev footer{color:var(--muted)}
.forest .rev footer b{color:var(--ink)}
.rev footer b{color:var(--ink); font-weight:600}
@media (max-width:860px){ .revs>.rev{grid-column:1/-1 !important; grid-row:auto !important} }

/* ---- forms ---- */
.field{display:grid; gap:7px}
.field label{font-size:14px; font-weight:600; color:var(--ink)}
.field input,.field textarea{
  font-family:var(--f-body); font-size:16px; padding:12px 15px; border-radius:var(--r-sm);
  border:1.5px solid var(--line-strong); background:var(--paper); color:var(--ink); width:100%;
}
.field textarea{resize:vertical; min-height:130px}
.field .help{font-size:13px; color:var(--muted)}
.field .err{font-size:13px; font-weight:600; color:var(--ink); background:var(--gold-soft);
  padding:6px 11px; border-radius:var(--r-sm)}
.field .err[hidden]{display:none}
.form-ok{background:var(--sage-soft); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px; font-size:15.5px}
.onband .field label{color:var(--band-ink)}
.onband .field .help{color:var(--band-ink); opacity:.75}
.onband .field input{background:rgba(255,255,255,.07); border-color:#8AA394; color:var(--band-ink)}
.onband .field input::placeholder{color:rgba(247,241,223,.6)}
.onband .field input:focus-visible{outline-color:var(--gold)}

/* ---- footer ---- */
.foot{background:var(--band); color:var(--band-ink); padding-block:clamp(52px,6.5vw,82px) 30px}
.foot-grid{display:grid; grid-template-columns:1.3fr .8fr .9fr 1fr; gap:clamp(26px,3.5vw,48px)}
.foot h2{font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--cream-fixed); opacity:1; margin-bottom:15px}
.foot-logo{height:32px; width:auto; margin-bottom:16px}
.flinks{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.flinks a{font-size:15px; text-decoration:none; opacity:.88}
.fcontact{font-size:15px; opacity:.88; display:grid; gap:9px; font-style:normal}
.fcontact a{text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .flinks a:hover,.fcontact a:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}
}
.foot-bottom{margin-top:clamp(40px,5vw,62px); padding-top:24px; border-top:1px solid var(--band-line);
  display:grid; gap:12px; font-size:13px; opacity:.78}
.foot-bottom .row{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center}
.foot-bottom a{text-decoration:none}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .foot-grid{grid-template-columns:1fr} }

/* ---- reveal: longer, gentler curve that eases into the final state ---- */
.js .rv{opacity:0; transform:translateY(14px)}
.js .rv.in{opacity:1; transform:none;
  transition:opacity 1000ms var(--ease-gentle), transform 1000ms var(--ease-gentle); transition-delay:var(--d,0ms)}
.js.no-anim .rv{opacity:1 !important; transform:none !important; transition:none !important}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1; transform:none}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .plinth img{transition:none}
  .duo-card{transition:none}
  .duo[data-front="ing"] .duo-ing,.duo[data-front="ing"] .duo-pack{transform:none}
}

/* ---- review invitation ---- */
.invite{margin-top:clamp(26px,3vw,40px); background:var(--gold-soft); border:1px solid var(--gold);
  border-radius:var(--r); padding:clamp(18px,2.2vw,26px); text-align:center;
  font-family:var(--f-display); font-weight:600; font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink)}
.invite small{display:block; margin-top:6px; font-family:var(--f-body); font-weight:400; font-size:14px; color:var(--ink-2)}