@charset "utf-8";

/* ===========================================================================
   Agnista landing page — v05
   Logo direction v2: deep forest green dominant, cream ground, oxblood accent.

   Mobile-first. Base styles are the 360px case; three breakpoints add to them
   (48em / 64em / 90em). The previous stylesheet was three append-only layers
   over a desktop-first cascade with five nested max-width blocks, which is why
   headings had six competing definitions and vertical rhythm accumulated dead
   space. Nothing here is appended: sections own their spacing, components read
   semantic tokens, and no component names a raw colour.

   Contrast for every semantic pair is verified in review/probe/contrast.html,
   which computes ratios from getComputedStyle rather than from these comments.
   =========================================================================== */


/* ============ 00  TOKENS ================================================== */

:root{
  color-scheme: light;      /* stop UA dark-mode inversion of form and scroll UI */

  /* --- brand palette, logo direction v2 --- */
  --green-900:#01302A;      /* dominant surface, and primary ink on cream */
  --green-800:#0A3E36;      /* raised surface on dark */
  --green-700:#17564B;
  --line-dark:#1C463D;      /* hairline on green */

  --cream-050:#FBF8F0;      /* page ground */
  --cream-100:#F4EFDF;      /* panel / alternate band; from the v2 logo sheet */
  --cream-200:#EAE3CE;      /* subtle fill, image placeholder */
  --line:#DED6C2;           /* hairline on cream */

  --ink:#01302A;
  --ink-soft:#40564F;       /* body copy on cream            7.43:1 */
  --on-dark:#F4EFDF;        /* cream copy on green          12.53:1 */
  --on-dark-soft:#D8D2C0;   /* secondary copy on green       9.54:1 */

  --oxblood:#960900;        /* accent — CREAM GROUNDS ONLY   8.47:1 */
  --oxblood-700:#7A0700;
  --sand:#D9B46A;           /* accent on green               7.33:1 */

  /* --- semantic, light context ---
     Components read these, never the palette above. One class flips the whole
     set for dark bands, which is what keeps oxblood off green: on green
     #960900 computes to 1.60:1 and would be unreadable. */
  --surface:var(--cream-050);
  --surface-alt:var(--cream-100);
  --text:var(--ink);
  --text-soft:var(--ink-soft);
  --accent:var(--oxblood);
  --accent-hover:var(--oxblood-700);
  --border:var(--line);
  --focus:var(--oxblood);
  --btn-bg:var(--green-900);
  --btn-fg:var(--cream-050);
  --btn-bg-hover:var(--green-800);

  /* --- type --- */
  --font-display:"Montserrat","Segoe UI",system-ui,sans-serif;
  --font-text:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",
              Arial,"Noto Sans","Liberation Sans",sans-serif;

  --fs-100:clamp(0.75rem,   0.72rem + 0.15vw, 0.8125rem);  /* 12–13  eyebrow, meta */
  --fs-200:clamp(0.875rem,  0.85rem + 0.12vw, 0.9375rem);  /* 14–15  nav, captions */
  --fs-300:clamp(1rem,      0.97rem + 0.15vw, 1.0625rem);  /* 16–17  body */
  --fs-400:clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);    /* 17–20  intro */
  --fs-500:clamp(1.25rem,   1.10rem + 0.75vw, 1.625rem);   /* 20–26  lead, h3 */
  --fs-600:clamp(1.5rem,    1.25rem + 1.25vw, 2.25rem);    /* 24–36  h3 large */
  --fs-700:clamp(1.875rem,  1.40rem + 2.40vw, 3.25rem);    /* 30–52  h2 */
  --fs-800:clamp(2.5rem,    1.60rem + 4.50vw, 5rem);       /* 40–80  h1 */

  --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.6; --lh-loose:1.75;
  /* -0.065em, as the old sheet used, is far too tight for a geometric face and
     actively damaging on Cyrillic. Capped here, and reset to 0 for Mongolian. */
  --tr-tight:-0.02em; --tr-none:0; --tr-wide:0.08em; --tr-wider:0.16em;
  --measure:62ch; --measure-narrow:46ch;

  /* --- space --- */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;  --sp-5:1.5rem;
  --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;   --sp-9:6rem;  --sp-10:8rem;

  --section-y:clamp(3.5rem, 2rem + 6vw, 7.5rem);   /* every band's padding-block */
  --gutter:clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --content-max:1280px;
  --header-height:72px;                            /* remeasured by script.js */

  /* --- shape, motion --- */
  --r-sm:2px; --r-md:6px; --r-lg:12px; --r-pill:999px;
  --dur-1:120ms; --dur-2:220ms; --dur-3:420ms; --dur-4:700ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --shadow-header:0 1px 0 var(--border), 0 10px 30px -22px rgba(1,48,42,.5);
}

/* The only colour switch in the system. Applied to a band, it re-points every
   semantic token; components below never need to know which ground they sit on. */
.band--green,
.hero,
.on-dark{
  --surface:var(--green-900);
  --surface-alt:var(--green-800);
  --text:var(--on-dark);
  --text-soft:var(--on-dark-soft);
  --accent:var(--sand);
  --accent-hover:#E6C88A;
  --border:var(--line-dark);
  --focus:var(--sand);
  --btn-bg:var(--cream-050);
  --btn-fg:var(--green-900);
  --btn-bg-hover:#FFFFFF;
  color:var(--text);
  background:var(--surface);
}


/* ============ 01  RESET + BASE =========================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + var(--sp-4));
}

body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--fs-300);
  line-height:var(--lh-normal);
  font-synthesis:none;          /* one display weight ships; never fake others */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;            /* belt and braces; nothing should need it */
}

img,svg,video{max-width:100%;height:auto;display:block}
img{background:var(--cream-200)}   /* reserves the box while a photo decodes */

a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);
  text-underline-offset:.22em}
a:hover{text-decoration-color:currentColor}

button,input,select,textarea{font:inherit;color:inherit}

/* One ring definition serves both grounds, because --focus is semantic:
   oxblood on cream at 8.47:1, sand on green at 7.33:1. */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
:focus:not(:focus-visible){outline:none}

::selection{background:var(--green-900);color:var(--cream-050)}

.skip{
  position:absolute;left:var(--sp-4);top:calc(-1 * var(--sp-10));
  z-index:100;padding:var(--sp-3) var(--sp-5);
  background:var(--green-900);color:var(--cream-050);
  border-radius:var(--r-md);font-size:var(--fs-200);font-weight:600;
  transition:top var(--dur-2) var(--ease-out);
}
.skip:focus{top:var(--sp-4)}

#main:focus{outline:none}


/* ============ 02  TYPOGRAPHY ============================================= */

/* Montserrat SemiBold is the display face for BOTH languages. Josefin Sans,
   which the v2 logo references, covers Latin only — verified empirically in
   review/probe/fonts.html — so it cannot set Mongolian headings. Using one face
   for both keeps the two language versions reading as one brand.
   local() first so it resolves with no fetch where the font is installed. */
@font-face{
  font-family:"Montserrat";
  src:local("Montserrat SemiBold"), local("Montserrat-SemiBold"),
      url("assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-tight);
  margin:0;
  text-wrap:balance;            /* no orphan word on a heading's last line */
}

h1{font-size:var(--fs-800)}
h2{font-size:var(--fs-700);line-height:1.08}
h3{font-size:var(--fs-500);line-height:var(--lh-snug);letter-spacing:var(--tr-none)}

p{margin:0;max-width:var(--measure);text-wrap:pretty}

.eyebrow{
  font-family:var(--font-display);
  font-size:var(--fs-100);
  font-weight:600;
  letter-spacing:var(--tr-wider);
  text-transform:uppercase;
  color:var(--text-soft);
  margin:0;
  display:flex;align-items:center;gap:var(--sp-3);
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:var(--r-pill);
  background:var(--accent);flex:none;
}

.lead{font-size:var(--fs-500);line-height:1.35;color:var(--text);
      max-width:var(--measure-narrow);font-family:var(--font-display);font-weight:600;
      letter-spacing:var(--tr-none)}
.intro{font-size:var(--fs-400);color:var(--text-soft);line-height:1.5}

/* Renamed from .red: the old class hard-coded a colour, which on the green
   philosophy band would have computed to 1.60:1. */
.accent{color:var(--accent)}

.signature{font-family:var(--font-display);font-weight:600;font-size:var(--fs-400);
           letter-spacing:var(--tr-none)}


/* ============ 03  LAYOUT PRIMITIVES ====================================== */

/* max-width + padding, not width:min(1320px, calc(100% - 112px)). With
   border-box this removes a whole class of horizontal-overflow bug. */
.wrap{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Every band owns its rhythm through padding-block and contributes no margin.
   The old sheet stacked .at-home margin-top 50 + .collection padding-bottom 90
   + .philosophy padding-block 78 into ~218px of dead space between two
   sections; that cannot recur here. */
/* position:relative so a decorative absolute child is placed against its own
   band rather than against the initial containing block; overflow:hidden so a
   sprig that bleeds past the edge is clipped by the band instead of relying on
   body{overflow-x:hidden} to hide a page-wide scrollbar. */
.band{position:relative;overflow:hidden;
      padding-block:var(--section-y);background:var(--surface);color:var(--text)}
.band--alt{--surface:var(--cream-100)}
.band > .wrap > * + *{margin-top:var(--sp-6)}

.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.stack--wide{gap:var(--sp-6)}

.section-head{display:grid;gap:var(--sp-5)}
.section-head .eyebrow{margin-bottom:var(--sp-2)}


/* ============ 04  COMPONENTS ============================================= */

/* --- header --- */
.header-shell{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--cream-050) 92%,transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  box-shadow:var(--shadow-header);
}
.header{
  display:flex;align-items:center;gap:var(--sp-4);
  min-height:var(--header-height);
  padding-block:var(--sp-3);
}
.brand{display:block;flex:none;color:var(--green-900);line-height:0}
/* The artboard carries generous internal margin, so the mark reads a good deal
   smaller than its box; these widths are set from the optical size, not the SVG. */
.brand svg{width:112px;height:auto}

.desktop-nav{display:none}
.header-link{display:none}

.language-switch{
  display:flex;align-items:center;margin-left:auto;
  border:1px solid var(--border);border-radius:var(--r-pill);overflow:hidden;
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-100);letter-spacing:var(--tr-wide);
}
.language-switch a{
  display:flex;align-items:center;justify-content:center;
  min-width:52px;min-height:44px;      /* pointer target, comfortably over 24px */
  padding-inline:var(--sp-3);
  text-decoration:none;color:var(--text-soft);
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
.language-switch a[aria-current="page"]{background:var(--green-900);color:var(--cream-050)}
.language-switch a:not([aria-current]):hover{background:var(--cream-100);color:var(--text)}

.mobile-menu{position:relative;flex:none}
.mobile-menu summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:var(--sp-2);
  min-height:44px;padding-inline:var(--sp-3);
  border:1px solid var(--border);border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-100);
  letter-spacing:var(--tr-wide);text-transform:uppercase;
}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu[open] summary{background:var(--green-900);color:var(--cream-050);
                           border-color:var(--green-900)}
.mobile-menu nav{
  position:absolute;right:0;top:calc(100% + var(--sp-3));
  min-width:220px;padding:var(--sp-3);
  background:var(--cream-050);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:0 24px 48px -28px rgba(1,48,42,.45);
  display:flex;flex-direction:column;
}
.mobile-menu nav a{
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  text-decoration:none;font-family:var(--font-display);font-weight:600;
}
.mobile-menu nav a:hover{background:var(--cream-100)}

/* --- buttons and links --- */
.button{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  min-height:48px;padding:var(--sp-3) var(--sp-6);
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-200);
  letter-spacing:var(--tr-wide);text-transform:uppercase;text-decoration:none;
  transition:background var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);
}
.button:hover{background:var(--btn-bg-hover);transform:translateY(-1px)}
.button:active{transform:translateY(0)}
.button--ghost{background:transparent;color:var(--text);border-color:var(--border)}
.button--ghost:hover{background:var(--surface-alt)}

.text-link{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-200);
  letter-spacing:var(--tr-wide);text-transform:uppercase;
  text-decoration:none;color:var(--text);
  border-bottom:1px solid var(--accent);padding-bottom:var(--sp-1);
  transition:gap var(--dur-2) var(--ease-out);
}
.text-link:hover{gap:var(--sp-3)}

/* --- media --- */
.figure{margin:0;position:relative}
.figure img{
  width:100%;border-radius:var(--r-lg);
  object-fit:cover;aspect-ratio:4/3;
}
.figure--portrait img{aspect-ratio:3/4}
.figure figcaption{
  margin-top:var(--sp-3);
  font-size:var(--fs-100);letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:var(--text-soft);
}

/* --- accordion --- */
.faq-list{border-top:1px solid var(--border)}
.faq-list details{border-bottom:1px solid var(--border)}
.faq-list summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
  padding-block:var(--sp-5);min-height:44px;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-500);
  line-height:var(--lh-snug);letter-spacing:var(--tr-none);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{
  flex:none;width:32px;height:32px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  border:1px solid var(--border);color:var(--accent);
  font-size:var(--fs-300);line-height:1;
  transition:transform var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);
}
.faq-list details[open] summary span{transform:rotate(45deg);background:var(--surface-alt)}
.faq-list p{padding-bottom:var(--sp-6);color:var(--text-soft)}


/* ============ 05  SECTIONS =============================================== */

/* --- hero ---
   min-height, not 100vh. A viewport-height hero forced a max-height patch, made
   the mobile copy panel fight the fold, and made honest full-page capture
   impossible. Copy sits on a flat green field rather than over the photograph,
   so its 12.53:1 contrast is structural and survives any image swap. */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;gap:var(--sp-7);min-height:clamp(520px,78svh,760px)}
.hero-copy{
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:var(--sp-5);
  padding-block:var(--section-y);
  position:relative;z-index:2;
}
.hero-copy h1{max-width:14ch}
.hero-copy .intro{max-width:42ch;color:var(--text-soft)}

.hero-figure{position:relative;margin:0;padding-bottom:var(--section-y)}
.hero-figure img{
  width:100%;
  /* crops the empty plaster wall on the left, keeps the apron and the room */
  object-fit:cover;object-position:62% center;
  aspect-ratio:4/5;border-radius:var(--r-lg);background:var(--green-800);
}
.hero-figure figcaption{
  position:absolute;left:var(--sp-4);bottom:calc(var(--section-y) + var(--sp-4));
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--green-900) 82%,transparent);
  color:var(--text-soft);
  font-size:var(--fs-100);letter-spacing:var(--tr-wide);text-transform:uppercase;
}

/* The hero previously also carried an oversized wordmark as ground texture.
   It was removed when the sprig arrived: two decorative layers in the same
   corner read as clutter, and one confident mark beats two faint ones. */

/* --- promise strip ---
   The one place oxblood carries real surface area, and it does so as a shape
   rather than as text on green — exactly how the packaging uses it. */
.promise{background:var(--oxblood);color:var(--cream-050);overflow:hidden}
.promise p{
  margin:0;max-width:none;
  padding-block:var(--sp-4);padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:center;gap:var(--sp-5);
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-100);letter-spacing:var(--tr-wider);text-transform:uppercase;
  text-align:center;
}
.promise b{font-weight:inherit}
.promise .sep{opacity:.5}
/* One phrase on narrow screens. Repeating it there only produced a line that
   ran off the edge and was clipped, which reads as breakage rather than rhythm. */
.promise .repeat{display:none}

/* --- story --- */
.story-grid{display:grid;gap:var(--sp-7)}
.story-copy{display:flex;flex-direction:column;gap:var(--sp-5)}
.story-copy p{color:var(--text-soft)}
.story-copy .lead{color:var(--text)}

/* --- food --- */
.food-nav{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);
  padding-block:var(--sp-2);
}
.food-nav a{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:44px;padding-inline:var(--sp-5);
  border:1px solid var(--border);border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-100);
  letter-spacing:var(--tr-wide);text-transform:uppercase;text-decoration:none;
  transition:background var(--dur-1) var(--ease-out);
}
.food-nav a:hover{background:var(--surface-alt)}
.food-nav a span{color:var(--accent)}

.cards{display:grid;gap:var(--sp-7)}
.cards article{display:flex;flex-direction:column;gap:var(--sp-4)}
.card-title{display:flex;flex-direction:column;gap:var(--sp-2)}
.card-title span{
  font-size:var(--fs-100);letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:var(--text-soft);order:-1;
}
.cards article p{color:var(--text-soft)}

/* --- philosophy ---
   The old grid left its first column empty at every width because the eyebrow
   occupied a column of its own. It now sits on its own row, above. */
.philosophy-head{display:grid;gap:var(--sp-5)}
.philosophy-head .eyebrow{grid-column:1/-1}
.philosophy-head p{color:var(--text-soft)}

.values{
  display:grid;gap:var(--sp-6);
  margin-top:var(--sp-8);
}
.values article{
  display:flex;flex-direction:column;gap:var(--sp-3);
  padding-top:var(--sp-5);border-top:1px solid var(--border);
}
.values article > span{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-200);
  color:var(--accent);letter-spacing:var(--tr-wide);
}
.values article p{color:var(--text-soft)}

/* --- visit --- */
.visit-grid{display:grid;gap:var(--sp-6)}
.visit dl{margin:0;display:grid;gap:var(--sp-5)}
.visit dt{
  font-size:var(--fs-100);letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:var(--text-soft);margin-bottom:var(--sp-2);
}
.visit dd{margin:0;font-family:var(--font-display);font-weight:600;
          font-size:var(--fs-400);letter-spacing:var(--tr-none)}
.note{
  padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);color:var(--text-soft);font-size:var(--fs-200);
  max-width:none;
}

/* --- footer --- */
.site-footer{padding-block:var(--section-y) var(--sp-7)}
.footer-grid{display:grid;gap:var(--sp-7)}
.footer-brand{display:block;color:var(--on-dark);line-height:0}
.footer-brand svg{width:132px;height:auto}
.site-footer nav{display:flex;flex-direction:column;gap:var(--sp-3)}
.site-footer nav a{text-decoration:none;font-family:var(--font-display);font-weight:600}
.site-footer nav a:hover{color:var(--accent)}
.footer-note{
  margin-top:var(--sp-8);padding-top:var(--sp-5);
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6);
  justify-content:space-between;align-items:baseline;
}
.footer-note p{font-size:var(--fs-100);color:var(--text-soft);max-width:none}


/* ============ 06  UTILITIES ============================================== */

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ============ 07  BREAKPOINTS ============================================ */

@media (min-width:48em){          /* 768 — tablet portrait */
  :root{--header-height:84px}

  .brand svg{width:148px}

  .story-grid{grid-template-columns:1.15fr .85fr;align-items:center}
  .story-grid .figure{order:2}

  .cards{grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
  .cards article:last-child{grid-column:1/-1;flex-direction:row;align-items:center;
                            gap:var(--sp-7)}
  .cards article:last-child .figure{flex:1 1 50%}
  .cards article:last-child .figure img{aspect-ratio:16/10}
  .cards article:last-child > :not(.figure){flex:1 1 50%}

  .values{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
  .visit-grid{grid-template-columns:1.2fr .8fr;align-items:start}
  .visit dl{grid-template-columns:repeat(2,1fr)}

  .footer-grid{grid-template-columns:1.4fr .6fr .6fr;align-items:start}
  .site-footer nav{gap:var(--sp-2)}
}

@media (min-width:64em){          /* 1024 — small laptop and up */
  :root{--header-height:96px}

  .desktop-nav{
    display:flex;gap:var(--sp-6);margin-inline:auto;
    font-family:var(--font-display);font-weight:600;font-size:var(--fs-200);
  }
  .desktop-nav a{text-decoration:none;padding-block:var(--sp-2)}
  .desktop-nav a:hover{color:var(--accent)}

  .header-link{
    display:inline-flex;align-items:center;gap:var(--sp-2);
    font-family:var(--font-display);font-weight:600;font-size:var(--fs-200);
    letter-spacing:var(--tr-wide);text-transform:uppercase;text-decoration:none;
    border-bottom:1px solid var(--accent);padding-bottom:var(--sp-1);
  }
  .language-switch{margin-left:0}
  .mobile-menu{display:none}

  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--sp-8)}
  .hero-copy{padding-inline-end:var(--sp-6)}
  /* A fixed ratio and a centred row, rather than stretching the photo to an
     auto-height row: a percentage height against an indefinite row resolved
     unpredictably and let the image spill past the section into the strip below. */
  .hero-figure{padding-bottom:0}
  .hero-figure img{aspect-ratio:4/5;max-height:clamp(460px,70svh,680px)}
  .hero-figure figcaption{bottom:var(--sp-4)}
  .promise .repeat{display:inline}

  .section-head{grid-template-columns:1.1fr .9fr;align-items:end;gap:var(--sp-8)}
  .story-grid{gap:var(--sp-9)}

  .cards{grid-template-columns:repeat(3,1fr)}
  .cards article:last-child{grid-column:auto;flex-direction:column;align-items:stretch;
                            gap:var(--sp-4)}
  .cards article:last-child .figure img{aspect-ratio:4/3}

  .philosophy-head{grid-template-columns:1.1fr .9fr;gap:var(--sp-8);align-items:start}
  .values{gap:var(--sp-7);margin-top:var(--sp-9)}
}

@media (min-width:90em){          /* 1440 — design target and wider */
  .hero-copy{padding-inline-end:var(--sp-9)}
  .cards{gap:var(--sp-7)}
}


/* ============ 07b  BOTANICAL SPRIG ======================================= */

/* Line illustration in the spirit of the sparse leaf drawing on the v2
   packaging. Decorative and aria-hidden: it carries no meaning, so it is safe
   for it to be absent under reduced motion or without JavaScript. */
.sprig{
  position:absolute;pointer-events:none;z-index:0;
  fill:none;
  stroke:var(--accent);
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.32;
}
.sprig--hero{
  left:calc(-1 * var(--sp-6));bottom:calc(-1 * var(--sp-7));
  width:clamp(150px,22vw,260px);height:auto;
}
/* Bottom right rather than top right: at the top it crossed the supporting
   paragraph, and the band carries genuinely empty space below the values row
   that this fills instead. */
.sprig--philosophy{
  right:calc(-1 * var(--sp-6));bottom:calc(-1 * var(--sp-7));
  width:clamp(130px,16vw,210px);height:auto;
  transform:scaleX(-1);
  opacity:.26;
}
@media (min-width:64em){
  .sprig--hero{left:calc(-1 * var(--sp-7));bottom:calc(-1 * var(--sp-6))}
}


/* ============ 08  MOTION ================================================= */

/* NOTHING here hides content and waits for a script to bring it back.
   Reveal-on-scroll is run by script.js with the Web Animations API, which
   animates over an element whose resting state is already visible. An earlier
   version of this section did gate visibility on a .js-motion class plus an
   IntersectionObserver callback, and it failed exactly as that pattern always
   does: where the observer never delivered, the page stayed blank. The rule is
   simple - motion may add to a finished page, never stand between the reader
   and it.

   .js-motion is still set by script.js, but only as a gate for decorative
   effects. Losing every one of them costs the reader nothing. */

/* --- sprig draw-on ---
   The resting state is DRAWN. The keyframes supply the undrawn start, so if the
   animation never runs the illustration is simply there. */
.sprig .sprig-stem,
.sprig use{stroke-dasharray:100}
.js-motion .sprig.is-in .sprig-stem,
.js-motion .sprig.is-in use{
  animation:sprig-draw 1100ms var(--ease-out) both;
}
.js-motion .sprig.is-in .sprig-stem{animation-duration:1600ms}
/* Leaves follow the stem outward, one after another. */
.js-motion .sprig.is-in use:nth-child(2){animation-delay:420ms}
.js-motion .sprig.is-in use:nth-child(3){animation-delay:520ms}
.js-motion .sprig.is-in use:nth-child(4){animation-delay:620ms}
.js-motion .sprig.is-in use:nth-child(5){animation-delay:720ms}
.js-motion .sprig.is-in use:nth-child(6){animation-delay:820ms}
.js-motion .sprig.is-in use:nth-child(7){animation-delay:920ms}
.js-motion .sprig.is-in use:nth-child(8){animation-delay:1020ms}
.js-motion .sprig.is-in use:nth-child(9){animation-delay:1120ms}
.js-motion .sprig.is-in use:nth-child(10){animation-delay:1220ms}
.js-motion .sprig.is-in use:nth-child(11){animation-delay:1320ms}
@keyframes sprig-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* --- scroll-driven effects ---
   Native scroll-driven animations: the compositor runs these, so they cost no
   main-thread work and cannot fall behind the scroll the way a scroll listener
   does. Where the browser lacks support the page simply holds still, which is
   why every one of them is decorative. All are transform-only and clamped -
   the v04 hero's scroll-zoom was removed for causing motion discomfort, and
   this is deliberately an order of magnitude gentler. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference){

    /* Hero photograph drifts against the page. Range is 4% of its own height. */
    .js-motion .hero-figure img{
      animation:drift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes drift{
      from{transform:translateY(-2%) scale(1.04)}
      to  {transform:translateY(2%)  scale(1.04)}
    }

    /* Card photographs ease out of a very slight zoom as they come into view. */
    .js-motion .cards .figure img{
      animation:settle linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 40%;
    }
    @keyframes settle{
      from{transform:scale(1.07)}
      to  {transform:scale(1)}
    }

    /* The promise strip travels with the page instead of looping on a timer,
       so it only ever moves while the reader is moving. */
    .promise p{
      animation:strip-travel linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes strip-travel{
      from{transform:translateX(3%)}
      to  {transform:translateX(-3%)}
    }

    /* Section rules draw themselves across as their band is read. */
    .js-motion .values article,
    .js-motion .faq-list details{
      animation:rule-draw linear both;
      animation-timeline:view();
      animation-range:entry 20% cover 25%;
    }
    @keyframes rule-draw{
      from{border-top-color:transparent}
      to  {border-top-color:var(--border)}
    }
  }
}

/* Two selectors share one rule list on purpose. Chrome has no reliable CLI flag
   to force prefers-reduced-motion, so the attribute hook is what makes the
   reduced-motion presentation testable in review/shots.ps1 -ReducedMotion.
   Do not delete it as dead code. */

/* Two selectors share one rule list on purpose. Chrome has no reliable CLI flag
   to force prefers-reduced-motion, so the attribute hook is what makes the
   reduced-motion presentation testable in review/shots.ps1 -ReducedMotion.
   Do not delete it as dead code. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .button:hover{transform:none}
}
html[data-motion="reduce"]{scroll-behavior:auto}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important;
}
html[data-motion="reduce"] .button:hover{transform:none}

/* [data-reveal] is deliberately NOT hidden here. script.js animates it in with
   the Web Animations API, so with JavaScript off, or where WAAPI is missing,
   the content is simply present. Hiding in CSS and revealing in JS would make
   the page depend on script to be readable. */


/* ============ 09  LANGUAGE OVERRIDES ===================================== */

/* Mongolian strings run roughly 15–25% longer than the English, and Cyrillic
   carries taller ascenders and more diacritics. Negative tracking, which suits
   the Latin display setting, is actively harmful here. */
html[lang="mn"] h1,
html[lang="mn"] h2,
html[lang="mn"] h3,
html[lang="mn"] .lead,
html[lang="mn"] .display{
  letter-spacing:var(--tr-none);
  line-height:1.12;
}
html[lang="mn"] h1{font-size:clamp(2.125rem,1.4rem + 3.6vw,4rem)}
html[lang="mn"] h2{font-size:clamp(1.75rem,1.3rem + 2.1vw,2.875rem)}
/* Cyrillic capitals are wider; 0.16em reads as sparse rather than considered. */
html[lang="mn"] .eyebrow,
html[lang="mn"] .promise p{letter-spacing:.1em}
html[lang="mn"] .button,
html[lang="mn"] .text-link,
html[lang="mn"] .food-nav a,
html[lang="mn"] .language-switch{letter-spacing:.04em}
html[lang="mn"] .hero-copy h1{max-width:16ch}

:where(h1,h2,h3,p,summary,dd){overflow-wrap:break-word;hyphens:none}