/* ==========================================================================
   Shaly Foods Inc. — wholesale produce
   Palette sampled from the fruit-cluster badge logo (navy ring version,
   2026-08-07) — NOT the "Logo System.md" Crate A direction. See the token
   comments below and Website - Build Notes.md for how these were derived.
   Photography-led. No icon tiles, no stat panels, no uniform card grids.
   ========================================================================== */

:root {
  /* Palette pulled from the SECOND badge logo (2026-08-07, navy ring —
     supersedes the earlier green-ring version and its palette from earlier
     today). Sampled by quantizing the actual JPEG rather than eyeballing
     it: navy ring #001F4D, pomegranate red #991E36 (near-identical to the
     #8E1F2F already documented as "Direction 1: Rosette" in Logo System.md
     — used that exact value for continuity). Two colors only, by request:
     an amber/blood-orange third hue was tried and dropped — see
     --on-navy-muted below for how the "accent on a dark background" role
     is handled instead. Every pairing verified by computing WCAG ratios,
     same method as the earlier gold-deep/faint fixes. */
  --navy:       #0F2E5C;  /* primary */
  --navy-deep:  #041B42;  /* backgrounds: hero, footer, Coverage pillars */
  --navy-soft:  #1D4A85;  /* hover state */

  --red:         #8E1F2F;  /* pomegranate. CTAs, light-bg accents */
  --red-light:   #B23347;  /* hover state */
  /* Text on a light background needs 4.5:1; --red alone gives 8:1 so it
     already clears that, but this darker shade (10.9–11.9:1) is used for
     the smallest text (eyebrows), matching the old gold/gold-deep pattern. */
  --red-deep:    #6B1723;

  /* Two colors only, by request: navy + red. Neither red nor a third hue
     has usable contrast as small text/icons ON the navy-deep background
     (red: 1.9:1, an amber tried earlier: fails outside this exact use) —
     rather than force a color that doesn't work there, or add a third hue,
     that role uses plain white/light-neutral instead. See NEUTRAL-ON-DARK
     below for the one consistent tone used for all secondary text on navy. */
  --on-navy-muted: #C6CEDC;  /* secondary/body text on navy-deep, ~10.7:1 */

  --cream:       #F8F5EF;
  --cream-deep:  #F1ECE2;
  --paper:       #FFFFFF;
  --ink:         #14202C;
  --muted:       #5B6B7B;
  --faint:       #8B96A2;
  --border:      #E4DED2;
  --border-soft: #EFEAE0;

  --font-display: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 68px; --space-8: 104px;

  --radius:    6px;
  --radius-lg: 8px;
  --shadow:    0 1px 2px rgba(4,27,66,.05), 0 10px 30px rgba(4,27,66,.07);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 138px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--navy-deep);
}
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.75rem); }
h3 { font-size: 1.18rem; }

:focus-visible { outline: 3px solid var(--red-deep); outline-offset: 3px; border-radius: 3px; }

/* --red-deep reads fine as a focus ring on light surfaces (10.5:1+) but is
   too close in value to the dark navy backgrounds to be visible there
   (would be ~1.4:1). Anything focusable that lives on a navy-deep surface
   gets a white ring instead — two colors only, so white/neutral stands in
   for what would otherwise be a third accent hue. */
.utility :focus-visible,
.hero :focus-visible,
.reach :focus-visible,
.footer :focus-visible {
  outline-color: #FFFFFF;
}

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--navy-deep); color: #fff;
  padding: var(--space-3) var(--space-4); z-index: 200;
}
.skip-link:focus { inset-inline-start: 0; }

.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;
}

/* ------------------------------------------------------------- layout --- */

.wrap { width: min(1200px, 100% - var(--space-5) * 2); margin-inline: auto; }

.section { padding: var(--space-8) 0; }
.section--tight { padding: var(--space-7) 0; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--red-deep); margin-bottom: var(--space-3);
}

.section-head { max-width: 64ch; margin-bottom: var(--space-7); }
.section-head p:not(.eyebrow) { margin-top: var(--space-4); color: var(--muted); font-size: 1.06rem; }

/* Wide variant: heading left, supporting copy right. Breaks the repeated
   eyebrow-heading-paragraph stack that makes pages look machine-made. */
.section-head--split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--space-7); max-width: none; align-items: end;
}
.section-head--split p { margin-top: 0; }

/* ------------------------------------------------------------ buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 50px; padding: 0 var(--space-5);
  border-radius: var(--radius); border: 1.5px solid transparent;
  font-family: var(--font-display); font-size: .98rem; font-weight: 500;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--red); color: #FFFFFF; border-color: var(--red); }
.btn--primary:hover { background: var(--red-light); border-color: var(--red-light); }
.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-soft); border-color: var(--navy-soft); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--border); }
.btn--outline:hover { border-color: var(--navy); background: var(--paper); }

/* ------------------------------------------------------------ utility --- */

.utility { background: var(--navy-deep); color: var(--on-navy-muted); font-size: .85rem; }
.utility__inner {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  align-items: center; justify-content: space-between;
  min-height: 44px; padding-block: var(--space-2);
}
.utility__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; }
.utility__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.utility__item svg { width: 15px; height: 15px; color: #FFFFFF; flex: none; }
.utility a:hover { color: #fff; text-decoration: underline; }
.lang-switch { display: inline-flex; gap: var(--space-1); align-items: center; }
.lang-btn {
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--on-navy-muted); font: inherit; font-size: .85rem;
  padding: 3px var(--space-2); cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.lang-btn:hover { color: #fff; }
.lang-btn[aria-pressed="true"] {
  color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25);
  font-weight: 600;
}

/* ------------------------------------------------------------- header --- */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248,245,239,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: 0 4px 22px rgba(4,27,66,.08); }
.header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 128px; }

/* The badge carries the full name ("SHALY FOODS / ENTERPRISE INC.") baked into
   its own ring art, so there is no separate text wordmark any more — the
   mark has to be big enough for that ring text to actually read, not just
   sit there as a small icon. Accessible name comes from .brand's own
   aria-label, so the <img> correctly keeps alt="". */
.brand { display: flex; align-items: center; flex: none; }
.brand__mark { height: 72px; width: auto; flex: none; }

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav__link { font-size: .95rem; font-weight: 500; color: var(--ink); padding: var(--space-2) 0; position: relative; white-space: nowrap; }
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }

.header__cta { flex: none; }
.nav__cta { display: none; }

.nav-toggle {
  display: none; width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius); margin-inline-start: auto;
}
.nav-toggle svg { width: 22px; height: 22px; color: var(--navy); }

/* ---------------------------------------------------------------- hero --- */
/* Type only. Carries on scale and contrast, so it needs room to breathe. */

.hero { background: var(--navy-deep); color: #fff; overflow: hidden; }
.hero__inner {
  padding: var(--space-8) 0 calc(var(--space-8) + var(--space-4));
  text-align: center;
}
.hero h1 { color: #fff; text-wrap: balance; max-width: 20ch; margin-inline: auto; }
.hero__lede {
  margin: var(--space-5) auto 0;
  font-size: 1.2rem; color: var(--on-navy-muted); max-width: 58ch;
}
.hero__flag {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: .76rem;
  letter-spacing: .18em; text-transform: uppercase; color: #FFFFFF;
  margin-bottom: var(--space-5);
}
.hero__rule { width: 34px; height: 1px; background: #FFFFFF; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.hero__note { margin-top: var(--space-5); font-size: .88rem; color: var(--on-navy-muted); }

/* -------------------------------------------------------------- origins --- */
/* Replaces the removed catalogue: hints at sourcing, does not list product. */

.origins { background: var(--cream); }

.origin-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}
.origin {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 230px;
  display: flex;
  align-items: flex-end;
  background: var(--navy-deep);
}
/* Egypt is the deepest supply line, so it gets the larger tile. */
.origin--lead { grid-column: span 3; min-height: 340px; }
.origin--wide { grid-column: span 3; min-height: 340px; }
.origin--third { grid-column: span 2; }

/* Image, then scrim, then text: normal stacking order, no negative z-index. */
.origin img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.origin::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(4,27,66,.9) 0%, rgba(4,27,66,.45) 45%, rgba(4,27,66,.12) 100%);
}
.origin:hover img { transform: scale(1.04); }

.origin__body { position: relative; z-index: 2; padding: var(--space-5); color: #fff; }
.origin__place {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 500;
  letter-spacing: .01em; color: #fff; margin-bottom: 6px;
}
.origin--lead .origin__place, .origin--wide .origin__place { font-size: 1.9rem; }
.origin__what { font-size: .95rem; color: var(--on-navy-muted); max-width: 40ch; }
.origin__link {
  display: inline-block; margin-top: var(--space-2); font-size: .88rem;
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
.origin__link:hover { color: var(--on-navy-muted); }

.origins__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-4);
}
.origins__foot p { color: var(--muted); max-width: 62ch; }
.origins__foot strong { color: var(--ink); font-weight: 500; }

/* ----------------------------------------------------------------- why --- */
/* Three pillars, centred. Line icons only: no tinted tiles behind them. */

.why { background: var(--paper); }

.section-head--center {
  max-width: 62ch; margin-inline: auto; text-align: center;
  margin-bottom: var(--space-7);
}

.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}
.pillar { text-align: center; }
.pillar__icon {
  width: 38px; height: 38px;
  color: var(--red); /* light paper bg here — plain red clears 3:1 fine, unlike on navy-deep */
  margin: 0 auto var(--space-4);
}
.pillar h3 {
  font-size: 1.3rem; font-weight: 500;
  color: var(--navy-deep); margin-bottom: var(--space-3);
}
.pillar p {
  color: var(--muted); font-size: .99rem;
  max-width: 34ch; margin-inline: auto;
}

/* -------------------------------------------------------------- reach --- */
/* Coverage, as four pillars. Same pattern as "why", inverted for the navy
   field so the page keeps its light / dark / light rhythm down the page. */

.reach { background: var(--navy-deep); color: #fff; }
.reach h2 { color: #fff; }
.reach .eyebrow { color: #FFFFFF; } /* red-deep fails on navy-deep (1.4:1); two-color rule uses white here instead of a third hue */
.reach .section-head--center p:not(.eyebrow) { color: var(--on-navy-muted); }

.pillars--4 { grid-template-columns: repeat(4, 1fr); }
.reach .pillar__icon { color: #FFFFFF; }
.reach .pillar h3 { color: #fff; }
.reach .pillar p { color: var(--on-navy-muted); }

/* -------------------------------------------------------------- buyers --- */

.buyers { background: var(--paper); }
.buyer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.buyer h3 { margin-bottom: var(--space-3); padding-top: var(--space-4); border-top: 2px solid var(--navy); }
.buyer p { color: var(--muted); font-size: .97rem; margin-bottom: var(--space-4); }
.buyer ul { margin: 0; padding: 0; list-style: none; }
.buyer li { font-size: .92rem; color: var(--muted); padding: var(--space-2) 0; border-top: 1px solid var(--border-soft); }

/* --------------------------------------------------------------- steps --- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.step { padding-top: var(--space-4); border-top: 2px solid var(--border); }
.step__num { font-family: var(--font-display); font-size: 2.3rem; font-weight: 400; color: var(--red-deep); line-height: 1; margin-bottom: var(--space-3); }
.step h3 { margin-bottom: var(--space-2); }
.step p { color: var(--muted); font-size: .96rem; }

/* ----------------------------------------------------------------- faq --- */

.faq { background: var(--paper); }
.faq-list { display: grid; gap: var(--space-3); max-width: 76ch; }
.faq-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.faq-item + .faq-item { margin-top: 0; }
.faq-item summary {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 500;
  color: var(--navy-deep); cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; flex: none; font-family: var(--font-display); font-size: 1.4rem;
  color: var(--red-deep); transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: var(--space-3); color: var(--muted); font-size: .96rem; max-width: 68ch; }

/* ------------------------------------------------------------- contact --- */

.contact { background: var(--paper); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-8); align-items: start; }

.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: 6px; }
.field label { font-size: .9rem; font-weight: 500; }
.field .hint { font-size: .83rem; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; min-height: 50px; padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--cream); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 122px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,46,92,.11);
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.form__legend { font-size: .86rem; color: var(--muted); margin-bottom: var(--space-1); }
.field__req { color: var(--red-deep); margin-inline-start: 3px; }

.phone-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.form__status {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: #F7E6E4; border-inline-start: 3px solid var(--red-deep);
  font-size: .93rem; color: #5C1E22;
}
.form__status[hidden] { display: none; }

.form__done {
  display: grid; gap: var(--space-3); padding: var(--space-6);
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.form__done[hidden] { display: none; }
.form__done p { color: var(--muted); }

.contact-card { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.contact-card h3 { margin-bottom: var(--space-4); }
.contact-line { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border); align-items: baseline; }
.contact-line__label { font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-line__value { font-size: .99rem; }
.contact-line__value a:hover { color: var(--navy); text-decoration: underline; }

.placeholder-flag {
  display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 3px;
  background: #F6E2E0; border: 1px solid #E3B3AE; color: #6B1D28;
  font-size: .66rem; font-family: var(--font-display);
  letter-spacing: .1em; text-transform: uppercase; vertical-align: middle;
}

/* -------------------------------------------------------------- footer --- */

.footer { background: #020D24; color: var(--on-navy-muted); padding: var(--space-7) 0 var(--space-5); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__brand-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: .05em; color: #fff; }
.footer__blurb { margin-top: var(--space-3); font-size: .93rem; max-width: 46ch; }
.footer h4 { font-family: var(--font-display); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #FFFFFF; margin: 0 0 var(--space-4); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer a { font-size: .93rem; }
.footer a:hover { color: #fff; }
.footer__bottom { padding-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; font-size: .85rem; }

/* ----------------------------------------------------------- animation --- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- RTL --- */
/* Arabic and Farsi read right-to-left. html[dir] is set by i18n.js on
   every language switch. Grid/flex column order and text-align flip
   automatically with dir — the three things that do NOT flip on their
   own are covered below. */

:root[lang="fa"], :root[lang="ar"] {
  /* Jost/Inter carry no Arabic-script glyphs; browsers would silently
     fall back to a generic system sans. Naming a real Arabic/Farsi
     typeface keeps weight and spacing consistent instead of leaving it
     to whatever the OS default happens to be. */
  --font-display: 'Noto Sans Arabic', 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --font-body:    'Noto Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[dir="rtl"] body { line-height: 1.85; } /* Arabic-script text needs more vertical room */

/* Letter-spacing breaks joined Arabic/Farsi letterforms — every component
   that sets it (.eyebrow, .hero__kicker, .footer h4, mono labels) needs it
   removed, and letter-spacing isn't inherited, so a
   blanket reset is the only reliable way to catch all of them. */
html[lang="fa"] *, html[lang="ar"] * { letter-spacing: normal !important; }

[dir="rtl"] .nav__link::after { transform-origin: right; }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1024px) {
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .section-head--split { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  .origin-grid { grid-template-columns: repeat(2, 1fr); }
  .origin--lead, .origin--wide { grid-column: span 2; }
  .origin--third { grid-column: span 1; }

  .pillars { grid-template-columns: 1fr; gap: var(--space-6); }
  .pillars--4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .buyer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .steps { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---------------------------------------------------------- sticky CTA --- */
/* Hidden on desktop, where the header's own CTA is always visible. Shown
   below the 1140px nav breakpoint (see the media query below), where the
   header CTA drops into the hamburger drawer and a persistent CTA would
   otherwise be gone from view entirely. */

.sticky-cta { display: none; }

@media (max-width: 1140px) {
  :root { --space-8: 68px; --space-7: 48px; }

  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }

  .sticky-cta {
    display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    padding: var(--space-3) var(--space-4);
    background: var(--paper); border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(4,27,66,.1);
    transition: transform .25s var(--ease);
  }
  .sticky-cta.is-hidden { transform: translateY(100%); }
  .sticky-cta .btn { display: block; width: 100%; text-align: center; }

  .nav {
    position: fixed; inset: 129px 0 auto; background: var(--cream);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
    padding: var(--space-4) var(--space-5) var(--space-6); margin: 0; display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-soft); font-size: 1.05rem; }
  .nav__link::after { display: none; }
  .nav__cta { display: block; margin-top: var(--space-4); }
  .nav__cta .btn { width: 100%; }


  .utility__inner { justify-content: center; text-align: center; }
}

@media (max-width: 620px) {
  .wrap { width: calc(100% - var(--space-4) * 2); }
  .field--row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .origin-grid { grid-template-columns: 1fr; }
  .origin--lead, .origin--wide, .origin--third { grid-column: span 1; }
  .origins__foot .btn, .contact-card { width: 100%; }
  .pillars--4 { grid-template-columns: 1fr; }
}

@media print {
  .header, .utility, .nav-toggle, .hero__actions, .form, .sticky-cta { display: none; }
}