/* Site chrome and content blocks.
   Depends on css/tokens.css for palette, type scale and spacing scale.

   Rules of the house:
   - every margin and pad comes from a --sp-* token, never a magic number
   - full-width bands use --section-y so the vertical rhythm never drifts
   - mobile first; media queries only ever add, never undo */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}  /* clears the sticky nav on anchor jumps */
body{
  margin:0;background:var(--pearl);color:var(--ash-black);
  font-family:var(--font-body);font-size:var(--t-body);line-height:1.65;font-weight:500;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
[hidden]{display:none !important}   /* author display: rules otherwise beat the UA [hidden] rule */
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--ibiza-blue);outline-offset:3px;border-radius:4px}

.wrap{width:min(1120px, 100% - (var(--sp-5) * 2));margin-inline:auto}
.narrow{width:min(720px, 100% - (var(--sp-5) * 2));margin-inline:auto}
@media(min-width:900px){
  .wrap{width:min(1120px, 100% - (var(--sp-7) * 2))}
  .narrow{width:min(720px, 100% - (var(--sp-7) * 2))}
}

.eyebrow{
  font-family:var(--font-label);font-size:var(--t-tiny);letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;margin:0 0 var(--sp-2);
}

/* ================================================================ nav === */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--pine-forest);color:var(--pearl);
  border-bottom:var(--line) solid var(--ash-black);
}
.nav .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:64px}
.nav .bar > a:first-child{display:flex;align-items:center;min-height:44px}
.nav .wordmark{width:92px;height:auto}
.nav-links{display:none;align-items:center;gap:var(--sp-5)}
@media(min-width:880px){.nav-links{display:flex}}
.nav-links a{
  font-family:var(--font-label);font-weight:700;font-size:var(--t-small);
  text-decoration:none;padding:var(--sp-1) 0;border-bottom:2px solid transparent;
  transition:border-color .16s var(--ease);
}
.nav-links a:hover,.nav-links a.is-active{border-bottom-color:var(--butter)}
.nav-cta{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-label);font-weight:700;font-size:var(--t-small);text-decoration:none;
  background:var(--soft-rust);color:var(--pearl);
  border:var(--line) solid var(--ash-black);border-radius:999px;
  padding:var(--sp-2) var(--sp-4);box-shadow:var(--hard-xs);white-space:nowrap;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease);
}
.nav-cta:hover{transform:translate(2px,2px);box-shadow:none}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:inherit;
  width:44px;height:44px;margin-right:calc(var(--sp-2) * -1);
}
@media(min-width:880px){.nav-toggle{display:none}}
.nav-toggle svg{width:24px;height:24px}
.nav-drawer{display:none;padding-bottom:var(--sp-3)}
.nav-drawer.open{display:block}
@media(min-width:880px){.nav-drawer{display:none !important}}
.nav-drawer a{
  display:flex;align-items:center;min-height:48px;padding:var(--sp-2) 0;text-decoration:none;
  font-family:var(--font-label);font-weight:700;font-size:var(--t-small);
  border-top:1px solid rgba(242,234,229,.2);
}

/* ============================================================ buttons === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  text-decoration:none;text-align:center;
  font-family:var(--font-label);font-weight:700;font-size:1rem;line-height:1.2;
  background:var(--soft-rust);color:var(--pearl);
  border:var(--line) solid var(--ash-black);border-radius:999px;
  padding:var(--sp-3) var(--sp-6);min-height:48px;      /* comfortable tap target */
  box-shadow:var(--hard-sm);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease);
}
.btn:hover{transform:translate(2px,2px);box-shadow:var(--hard-xs)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn.butter{background:var(--butter);color:var(--ash-black)}
.btn.pink{background:var(--candy-pink);color:var(--ash-black)}
.btn.ghost{background:transparent;color:var(--pearl);border-color:var(--pearl);box-shadow:none}
.btn.ghost:hover{background:rgba(242,234,229,.12);transform:none;box-shadow:none}
.btn.small{
  font-size:var(--t-tiny);padding:var(--sp-1) var(--sp-4);min-height:36px;
  box-shadow:none;border-width:2px;
}
.btn-row{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}
.btn-row .btn{width:100%}
@media(min-width:480px){
  .btn-row{flex-direction:row;flex-wrap:wrap}
  .btn-row .btn{width:auto}
}

/* =========================================================== sections === */
.section{padding-block:var(--section-y)}
.section.tint{background:var(--pine-forest);color:var(--pearl)}
.section.tint .section-head h2{color:var(--butter)}
.section.tint .section-head .lede{color:rgba(242,234,229,.88)}
.section.pinkish{background:var(--candy-pink)}
.section.cream{background:#FBF7F4}

.section-head{margin-bottom:var(--block-y);max-width:62ch}
.section-head.centred{text-align:center;margin-inline:auto}
.section-head h2{font-size:var(--t-h2);color:var(--pine-forest)}
.section-head .lede{font-size:var(--t-lede);margin:var(--sp-4) 0 0}
.pill{
  display:inline-block;background:var(--butter);color:var(--pine-forest);
  border:var(--line) solid var(--ash-black);border-radius:999px;
  padding:var(--sp-1) var(--sp-4);margin-bottom:var(--sp-4);
  font-family:var(--font-label);font-weight:700;font-size:var(--t-tiny);
  letter-spacing:.12em;text-transform:uppercase;box-shadow:var(--hard-xs);
}

/* ============================================================== cards === */
.card{
  background:#fff;border:var(--line) solid var(--ash-black);
  border-radius:var(--radius);padding:var(--sp-5);box-shadow:var(--hard-sm);
  color:var(--ash-black);
}
.card h3{font-size:var(--t-h3);margin-bottom:var(--sp-2)}
.card p{font-size:var(--t-small)}

.grid{display:grid;gap:var(--sp-4)}
.grid.two,.grid.three{grid-template-columns:1fr}
@media(min-width:680px){.grid.two,.grid.three{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.grid.three{grid-template-columns:repeat(3,1fr)}}

/* ======================================================== ingredients === */
/* Flex, not grid: with seven cards the last row is always short, and
   justify-content centres it instead of leaving an orphan on the left.
   Card widths reproduce the old 1 / 2 / 3-column grid exactly. */
.ing-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4)}
.ing-grid .ing{width:100%}
@media(min-width:560px){.ing-grid .ing{width:calc((100% - var(--sp-4)) / 2)}}
@media(min-width:960px){.ing-grid .ing{width:calc((100% - var(--sp-4) * 2) / 3)}}
.ing{
  background:#fff;border:var(--line) solid var(--ash-black);border-radius:var(--radius);
  padding:var(--sp-5);box-shadow:var(--hard-sm);
  display:flex;flex-direction:column;align-items:flex-start;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.ing:hover{transform:translate(-2px,-2px);box-shadow:var(--hard)}
.ing img{width:72px;height:72px;margin:0 0 var(--sp-4)}
.ing .tag{
  font-family:var(--font-label);font-weight:700;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--butter);color:var(--ash-black);
  border:2px solid var(--ash-black);border-radius:999px;
  padding:2px var(--sp-3);margin-bottom:var(--sp-3);
}
.ing h3{font-size:var(--t-h3)}
.ing .latin{font-style:italic;font-size:var(--t-tiny);opacity:.6;margin:var(--sp-1) 0 0}
.ing .lede{font-size:var(--t-small);margin:var(--sp-3) 0 0}
.ing ul{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-2);font-size:var(--t-small);width:100%}
.ing li{display:flex;gap:var(--sp-2);align-items:flex-start;line-height:1.45}
.ing li::before{
  content:"";flex:none;width:.7rem;height:.7rem;margin-top:.42rem;border-radius:50%;
  background:var(--lime-glow);border:2px solid var(--ash-black);
}

/* =========================================================== benefits === */
.benefit{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media(min-width:680px){.benefit{grid-template-columns:1fr 1fr}}
.benefit .card h3{color:var(--pine-forest)}
.benefit .card b{color:var(--soft-rust)}

/* ============================================================== steps === */
.steps{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media(min-width:680px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  background:var(--butter);border:var(--line) solid var(--ash-black);
  border-radius:var(--radius);padding:var(--sp-5);box-shadow:var(--hard-sm);
}
.step-art{
  width:88px;height:88px;object-fit:contain;object-position:left center;
  margin-bottom:var(--sp-3);mix-blend-mode:multiply;   /* line art sits on Butter */
}
.step .num{
  display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--pine-forest);color:var(--pearl);
  font-family:var(--font-heading);font-weight:800;font-size:1rem;
  border:var(--line) solid var(--ash-black);margin-bottom:var(--sp-4);
}
.step h3{font-size:var(--t-h3);margin-bottom:var(--sp-2)}
.step p{font-size:var(--t-small)}

/* ==================================================== constituents === */
/* One native <dialog> holding the nutrition table, the lab report PDFs and
   the label artwork. Colours are set explicitly: the dialog sits inside the
   dark-green quality section and would otherwise inherit pearl text. */
.modal{
  border:0;padding:0;background:transparent;
  width:min(680px, calc(100% - var(--sp-5) * 2));max-height:min(86vh, 900px);
  color:var(--ash-black);overflow:visible;
}
.modal::backdrop{background:rgba(49,47,44,.62)}
.modal-card{
  display:flex;flex-direction:column;max-height:inherit;
  background:var(--pearl);border:var(--line) solid var(--ash-black);
  border-radius:var(--radius-lg);box-shadow:var(--hard);overflow:hidden;
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);background:var(--butter);
  border-bottom:var(--line) solid var(--ash-black);
}
.modal-head h3{font-size:var(--t-h3)}
.modal-close{
  flex:none;width:36px;height:36px;display:grid;place-items:center;
  background:var(--pearl);border:2px solid var(--ash-black);border-radius:999px;
  font-size:1.3rem;line-height:1;
}
.modal-close:hover{background:#fff;box-shadow:var(--hard-xs)}

.modal-tabs{
  display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4) 0;flex-wrap:wrap;
  background:var(--pearl);border-bottom:2px solid rgba(49,47,44,.18);
}
.modal-tabs button{
  background:transparent;border:2px solid transparent;border-bottom:0;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  padding:var(--sp-2) var(--sp-4);min-height:40px;
  font-family:var(--font-label);font-weight:700;font-size:var(--t-tiny);
  letter-spacing:.06em;text-transform:uppercase;color:var(--pine-forest);
}
.modal-tabs button:hover{background:rgba(14,128,67,.08)}
.modal-tabs button[aria-selected="true"]{
  background:#fff;border-color:var(--ash-black);color:var(--ash-black);
  margin-bottom:-2px;padding-bottom:calc(var(--sp-2) + 2px);
}
.modal-body{padding:var(--sp-5);overflow-y:auto;background:#fff;flex:1 1 auto}
.modal-note{font-size:var(--t-small);margin-bottom:var(--sp-4)}
.label-art{
  width:100%;height:auto;border:2px solid var(--ash-black);
  border-radius:var(--radius-sm);background:var(--pine-forest);
}

/* lab report links (also used inside the dialog) */
.lab-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.lab-list a{
  display:grid;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4);
  background:var(--pearl);border:2px solid var(--ash-black);border-radius:var(--radius-sm);
  text-decoration:none;transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lab-list a:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--hard-xs)}
.lab-name{font-family:var(--font-heading);font-weight:800;font-size:var(--t-body)}
.lab-name::after{content:" \2197";font-weight:600;color:var(--pine-forest)}
.lab-meta{
  font-family:var(--font-label);font-weight:700;font-size:var(--t-tiny);
  letter-spacing:.08em;text-transform:uppercase;color:var(--pine-forest);
}
.lab-result{font-size:var(--t-small);opacity:.85}
.labs-fine{margin:var(--sp-4) 0 0;font-size:var(--t-tiny);opacity:.75}

/* nutrition facts table */
.nutri-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nutri{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.nutri th,.nutri td{
  padding:var(--sp-2) var(--sp-3);text-align:right;
  border-bottom:1px solid rgba(49,47,44,.18);white-space:nowrap;
}
.nutri th:first-child,.nutri td:first-child{text-align:left;font-weight:700;white-space:normal}
.nutri thead th{
  font-family:var(--font-label);font-size:var(--t-tiny);letter-spacing:.06em;
  text-transform:uppercase;color:var(--pine-forest);border-bottom:2px solid var(--ash-black);
}
.nutri .nutri-hero td{
  background:rgba(205,242,141,.45);color:var(--pine-forest);
  font-weight:700;border-bottom:0;
}
.diet-badges{
  list-style:none;margin:var(--sp-4) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
}
.diet-badges li{
  background:var(--pearl);border:2px solid var(--ash-black);border-radius:999px;
  padding:var(--sp-1) var(--sp-3);
  font-family:var(--font-label);font-weight:700;font-size:var(--t-tiny);
  letter-spacing:.04em;color:var(--pine-forest);
}
.label-row{justify-content:center;margin-top:var(--sp-6)}

/* ================================================================ faq === */
.faq{display:grid;gap:var(--sp-3)}
.faq details{
  background:#fff;border:var(--line) solid var(--ash-black);
  border-radius:var(--radius-sm);box-shadow:var(--hard-xs);overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--sp-4);min-height:52px;
  font-family:var(--font-label);font-weight:700;font-size:var(--t-small);
  display:flex;justify-content:space-between;gap:var(--sp-4);align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:none;font-family:var(--font-heading);font-size:1.35rem;
  line-height:1;color:var(--pine-forest);
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{background:var(--butter);border-bottom:var(--line) solid var(--ash-black)}
.faq .answer{padding:var(--sp-4);font-size:var(--t-small)}
.faq .answer ul{margin:var(--sp-3) 0 0;padding-left:var(--sp-5);display:grid;gap:var(--sp-2)}

/* ============================================================= values === */
.values{display:grid;gap:var(--sp-3);grid-template-columns:1fr}
@media(min-width:560px){.values{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.values{grid-template-columns:repeat(3,1fr)}}
.value{
  background:var(--butter);border:var(--line) solid var(--ash-black);
  border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);box-shadow:var(--hard-xs);
  font-family:var(--font-label);font-weight:700;font-size:var(--t-small);color:var(--pine-forest);
}

/* ============================================================= bubble === */
.bubble{
  position:relative;background:var(--butter);border:var(--line) solid var(--ash-black);
  border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--hard-sm);
  color:var(--ash-black);
}
.bubble::after{
  content:"";position:absolute;left:var(--sp-6);bottom:-20px;width:0;height:0;
  border-left:24px solid var(--butter);border-bottom:20px solid transparent;
  filter:drop-shadow(-2px 2px 0 var(--ash-black));
}
.bubble p{font-size:var(--t-small)}

/* ============================================================= footer === */
.site-footer{
  background:var(--pine-forest);color:var(--pearl);
  padding-block:var(--sp-7) var(--sp-6);border-top:var(--line) solid var(--ash-black);
}
.site-footer .cols{display:grid;gap:var(--sp-6);grid-template-columns:1fr}
/* Brand takes the free space; the two link columns hug their content and
   finish flush with the right edge of the wrap — no dead tracks between. */
@media(min-width:680px){.site-footer .cols{grid-template-columns:1.4fr auto auto;column-gap:clamp(var(--sp-7), 7vw, var(--sp-9))}}
.site-footer .wordmark{width:124px;height:auto;margin-bottom:var(--sp-3)}
.site-footer h4{
  font-family:var(--font-label);font-size:var(--t-tiny);letter-spacing:.14em;
  text-transform:uppercase;color:var(--butter);margin-bottom:var(--sp-3);
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-1);font-size:var(--t-small)}
.site-footer li a{display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-1) 0}
.site-footer a{text-decoration:none;opacity:.9}
.site-footer a:hover{opacity:1;text-decoration:underline}
.site-footer p{font-size:var(--t-small)}
.site-footer .fine{
  margin:var(--sp-7) 0 0;padding-top:var(--sp-5);
  border-top:1px solid rgba(242,234,229,.22);
  font-size:var(--t-tiny);line-height:1.6;color:rgba(242,234,229,.72);
}
.site-footer .fine span{display:block;max-width:76ch}

/* ============================================================= motion === */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ========================================================= utilities === */
.skip{
  position:absolute;left:var(--sp-4);top:calc(var(--sp-4) * -4);z-index:100;
  background:var(--butter);color:var(--ash-black);border:var(--line) solid var(--ash-black);
  border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-4);
  font-family:var(--font-label);font-weight:700;text-decoration:none;
  transition:top .16s var(--ease);
}
.skip:focus{top:var(--sp-4)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* one-line statement that closes a section */
.kicker-line{
  margin:var(--block-y) 0 0;text-align:center;
  font-family:var(--font-label);font-weight:700;font-size:var(--t-lede);
  color:var(--pine-forest);
}
.footnote{
  margin:var(--block-y) auto 0;max-width:62ch;text-align:center;
  font-size:var(--t-small);opacity:.72;
}
.sub-head{
  font-size:var(--t-h3);color:var(--pine-forest);
  margin:var(--section-y) 0 var(--sp-4);text-align:center;
}
.story-art{
  width:min(200px,52%);height:auto;margin:0 auto var(--sp-4);mix-blend-mode:multiply;
}
.story-split .sub-head{text-align:left;margin-top:0}
.story-split{display:grid;gap:var(--sp-6);grid-template-columns:1fr;margin-top:var(--section-y);align-items:start}
@media(min-width:780px){.story-split{grid-template-columns:1.15fr .85fr;gap:var(--sp-7)}}