/* base reset (was inline in the page <head>) */
:root { color-scheme: light; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { overflow-x: clip; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ============================================================================
   KnitScout stylesheet — organised by COMPONENT, with each component's
   responsive rules CO-LOCATED at the end of its own block.

   HOW TO READ THIS FILE
   • Base rules (no @media) are the desktop look.
   • Smaller screens override downward. To see how a component behaves on a
     phone, scroll to the bottom of THAT component's block — its @media rules
     live right there. You never hunt the whole file for "the mobile rules".

   BREAKPOINT VOCABULARY (max-width unless noted)
     1000px  tablet landscape / small laptop — the top nav collapses to a menu
      860px  tablet portrait
      620px  phone              ← this is "mobile"
      480px  small phone (a couple of header tweaks)
      400px  very small phone
     (pointer: coarse)          touch devices, phones + tablets  → see GLOBAL
     (orientation: landscape) + short height   phone held sideways

   Rules that are genuinely cross-cutting (theme colours, motion & touch
   capability, the shared surface sheen) can't belong to one component, so they
   sit in clearly-labelled THEME / SHARED / GLOBAL blocks, not under a component.
   ========================================================================== */


/* ===== THEME TOKENS =======================================================
   Colours & effect tokens. Light is the default; dark comes from the OS
   preference or an explicit [data-theme]. Not responsive. */
  :root {
    --bg: #F3EDDF;          /* cream */
    --surface: #FBF6EB;
    --surface-2: #EBE3D1;
    --fg: #14211A;          /* near-black, green-tinted */
    --fg-soft: #3A4A41;
    --muted: #6B756D;
    --line: #DFD6C2;
    --accent: #0B7A4E;      /* emerald */
    --accent-deep: #086A42;
    --accent-soft: #E3EFE5;
    --trust: #0E7A66;
    --on-accent: #FBF6EB;   /* cream text on emerald */
    --shadow: 0 1px 2px rgba(20,33,26,.05), 0 14px 38px -22px rgba(20,33,26,.30);
    --glow: 0 0 0 rgba(11,122,78,0);
    --logo-glow: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 30%, transparent));
    --gold: #ab8753;
    --logo-fx: drop-shadow(0 1px 3px rgba(0,0,0,.2));
    --logo-fx-hover: drop-shadow(1px 0 0 #16b877) drop-shadow(-1px 0 0 #16b877) drop-shadow(0 1px 0 #16b877) drop-shadow(0 -1px 0 #16b877) drop-shadow(1px 1px 0 #16b877) drop-shadow(-1px -1px 0 #16b877) drop-shadow(1px -1px 0 #16b877) drop-shadow(-1px 1px 0 #16b877) drop-shadow(0 0 7px rgba(22,184,119,.5)) drop-shadow(0 0 13px rgba(171,135,83,.55)) drop-shadow(0 3px 6px rgba(0,0,0,.22));
    --brandmark: url("assets/logo.png");
    --brandmark-mark: url("assets/logo-mark.png");
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #070A08;        /* black, faint green */
      --surface: #0E1511;
      --surface-2: #141D17;
      --fg: #E9F1EB;
      --fg-soft: #B7C4BB;
      --muted: #7F8C83;
      --line: #203029;
      --accent: #19C07C;    /* vivid emerald */
      --accent-deep: #13A869;
      --accent-soft: #12231A;
      --trust: #2DB59A;
      --on-accent: #06140D;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 22px 46px -24px rgba(0,0,0,.85);
      --glow: 0 0 40px -6px rgba(25,192,124,.45);
      --logo-glow: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 80%, transparent)) drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent));
      --logo-fx: brightness(1.5) saturate(1.05) drop-shadow(0 1px 4px rgba(0,0,0,.55));
      --logo-fx-hover: brightness(1.45) saturate(1.1) drop-shadow(1px 0 0 #2bee90) drop-shadow(-1px 0 0 #2bee90) drop-shadow(0 1px 0 #2bee90) drop-shadow(0 -1px 0 #2bee90) drop-shadow(1px 1px 0 #2bee90) drop-shadow(-1px -1px 0 #2bee90) drop-shadow(1px -1px 0 #2bee90) drop-shadow(-1px 1px 0 #2bee90) drop-shadow(0 0 9px rgba(43,238,144,.65)) drop-shadow(0 0 16px rgba(214,178,95,.6)) drop-shadow(0 4px 8px rgba(0,0,0,.55));
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #070A08;
    --surface: #0E1511;
    --surface-2: #141D17;
    --fg: #E9F1EB;
    --fg-soft: #B7C4BB;
    --muted: #7F8C83;
    --line: #203029;
    --accent: #19C07C;
    --accent-deep: #13A869;
    --accent-soft: #12231A;
    --trust: #2DB59A;
    --on-accent: #06140D;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 22px 46px -24px rgba(0,0,0,.85);
    --glow: 0 0 40px -6px rgba(25,192,124,.45);
    --logo-glow: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 80%, transparent)) drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent));
    --logo-fx: brightness(1.5) saturate(1.05) drop-shadow(0 1px 4px rgba(0,0,0,.55));
    --logo-fx-hover: brightness(1.45) saturate(1.1) drop-shadow(1px 0 0 #2bee90) drop-shadow(-1px 0 0 #2bee90) drop-shadow(0 1px 0 #2bee90) drop-shadow(0 -1px 0 #2bee90) drop-shadow(1px 1px 0 #2bee90) drop-shadow(-1px -1px 0 #2bee90) drop-shadow(1px -1px 0 #2bee90) drop-shadow(-1px 1px 0 #2bee90) drop-shadow(0 0 9px rgba(43,238,144,.65)) drop-shadow(0 0 16px rgba(214,178,95,.6)) drop-shadow(0 4px 8px rgba(0,0,0,.55));
    color-scheme: dark;
  }


/* ===== GLOBAL BASE & HELPERS ==============================================
   Document-wide resets, the responsive gutter container, and small text
   helpers used across sections. */
  * { box-sizing: border-box; }
  html { overflow-x: clip; overscroll-behavior-x: none; max-width: 100%; }
  body { background: var(--bg); color: var(--fg); font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; overscroll-behavior-x: none; max-width: 100%; width: 100%; position: relative; }
  h1, h2, h3 { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.12; text-wrap: balance; margin: 0; }
  p { margin: 0; }
  a { color: inherit; }

  /* one gutter token drives every container edge, so hero text, card borders,
     the header and the footer all land on the same vertical line at every width.
     The gutter scales with the viewport (16px on small phones -> 30px on desktop). */
  :root { --maxw: 1140px; --gutter: clamp(16px, 4.2vw, 30px); }
  .wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }

  /* responsive hardening: the UI auto-fits any device width, nothing forces a horizontal scroll */
  body { overflow-wrap: break-word; }
  svg, canvas, video { max-width: 100%; }
  .card, .prod, .node, .step, .stat, .gtile, .gmeta, .why, .why > div, .contact-info, form, label.fl { min-width: 0; }

  /* yarn ball that rolls down a thread spanning the page */
  .ballbar { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }
  .ballbar canvas { display: block; width: 100%; height: 100%; }

  /* text helpers */
  .ph { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .82em; color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 5px; padding: 0 .36em; white-space: nowrap; }
  .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
  .eyebrow { font-family: "IBM Plex Mono", monospace; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; }
  .eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .6; }
  /* › phone: let placeholders & the eyebrow wrap instead of running off the edge */
  @media (max-width: 620px) {
    .ph { white-space: normal; overflow-wrap: anywhere; }
    .eyebrow { letter-spacing: .1em; font-size: .66rem; flex-wrap: wrap; }
  }


/* ===== HEADER / NAV / BUTTONS =============================================
   Sticky bar, logo, desktop nav, buttons, and the mobile hamburger menu. */
  header.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--line); }
  .bar-in { display: flex; align-items: center; gap: 18px; height: 64px; }
  .brand { display: inline-flex; align-items: center; gap: 13px; }
  .brandmark { position: relative; height: 50px; aspect-ratio: 3 / 1; background: var(--brandmark) left center / contain no-repeat; display: block; filter: var(--logo-fx); }
  footer .brandmark { height: 44px; }
  /* a light-shine sweep, clipped to the logo's shape */
  .brandmark::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    -webkit-mask: var(--brandmark) left center / contain no-repeat;
    mask: var(--brandmark) left center / contain no-repeat;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.92) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%; background-position: 220% 0;
    animation: logoShine 9s ease-in-out 2s infinite;
  }
  @keyframes logoShine { 0%, 100% { background-position: 220% 0; } 30% { background-position: -70% 0; } }
  nav.links { margin-left: auto; display: flex; gap: 26px; }
  nav.links a { text-decoration: none; color: var(--fg-soft); font-size: .95rem; font-weight: 500; position: relative; }
  nav.links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1.5px; background: var(--accent); transition: right .25s ease; }
  nav.links a:hover { color: var(--accent-deep); }
  nav.links a:hover::after { right: 0; }

  /* buttons (used in header, hero, mobile menu, contact) */
  .btn { font-family: "Figtree", sans-serif; font-weight: 600; font-size: .95rem; border-radius: 999px; padding: 11px 21px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; line-height: 1; transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease, border-color .18s ease, box-shadow .18s ease; }
  .btn-primary { background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover { background: var(--accent-deep); color: var(--on-accent); transform: translateY(-2px); box-shadow: var(--glow); }
  .btn-ghost { background: transparent; color: var(--fg); border-color: var(--line); }
  .btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  /* button polish: soft gradient, inner highlight, gold-kissed hover */
  .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px -12px color-mix(in srgb, var(--accent) 75%, transparent); }
  .btn-primary:hover { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent); }
  .btn-ghost:hover { box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--fg) 40%, transparent); }

  .icon-btn { margin-left: 4px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .88rem; font-weight: 600; transition: border-color .2s ease; }
  .icon-btn:hover { border-color: var(--accent); }
  .icon-btn svg { flex: none; }

  /* mobile navigation (hamburger -> slide-down menu) */
  .navtoggle { display: none; margin-left: 4px; width: 40px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; align-items: center; justify-content: center; }
  .navtoggle:hover { border-color: var(--accent); }
  .navtoggle svg { display: block; }
  .mobnav { position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 48; background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 16px 14px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s; }
  .mobnav.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .mobnav a { padding: 13px 12px; border-radius: 10px; text-decoration: none; color: var(--fg); font-weight: 600; font-size: 1.02rem; }
  .mobnav a:not(.btn) { border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
  .mobnav a:not(.btn):active, .mobnav a:not(.btn):hover { color: var(--accent-deep); }
  .mobnav a.btn { margin-top: 10px; justify-content: center; }

  /* › tablet/laptop: swap the inline nav for the hamburger menu */
  @media (max-width: 1000px) {
    nav.links { display: none; }
    .navtoggle { display: inline-flex; margin-left: auto; }
    .bar-cta { display: none; }
  }
  /* › phone: tighter bar, smaller logo, shorter menu offset, compact buttons */
  @media (max-width: 620px) {
    .bar-in { gap: 10px; height: 58px; }
    .brandmark { height: 36px; }
    .mobnav { top: calc(58px + env(safe-area-inset-top, 0px)); }
    .btn { padding: 9px 15px; }
  }
  /* › small phone: drop the theme-toggle label to just the icon */
  @media (max-width: 480px) {
    .icon-btn .tlabel { display: none; }
    .icon-btn { padding: 0; width: 38px; justify-content: center; }
  }
  /* › very small phone */
  @media (max-width: 400px) {
    .brandmark { height: 30px; }
    .btn { font-size: .85rem; }
  }


/* ===== HERO ===============================================================*/
  .hero { position: relative; overflow: hidden; padding-block: clamp(34px, 6vw, 60px) clamp(26px, 4vw, 44px); min-height: clamp(380px, 50vh, 540px); display: flex; flex-direction: column; justify-content: center; }
  /* hero shares the standard container width so its text aligns with the card edges below;
     line length is governed per element (headline via .line breaks, lede via its own max-width) */
  .hero-inner { max-width: none; }
  .hero h1 { font-family: "Figtree", system-ui, sans-serif; font-weight: 800; font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 1.04; letter-spacing: -.03em; }
  .hero h1 .line { display: block; }
  .hero h1 em { font-style: normal; color: var(--accent-deep); position: relative; white-space: nowrap; }
  .hero h1 em .ul { position: absolute; left: 0; right: 0; bottom: .04em; height: .09em; background: linear-gradient(90deg, var(--accent), var(--trust)); border-radius: 2px; transform-origin: left; transform: scaleX(1); }
  .anim .hero h1 em .ul { animation: drawul 1.1s .35s cubic-bezier(.65,0,.35,1) both; }
  @keyframes drawul { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .lede { margin-top: 18px; font-size: clamp(1.04rem, 1.6vw, 1.22rem); color: var(--fg-soft); max-width: 42ch; }
  .tagline { margin-top: 10px; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--gold); letter-spacing: .01em; }
  .hero-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
  .hero-note { margin-top: 20px; font-size: .9rem; color: var(--muted); line-height: 1.9; }
  .mkt { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--fg-soft); font-weight: 500; }
  .flag { width: 20px; height: 14px; border-radius: 2px; flex: none; vertical-align: middle; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
  .scrollcue { margin-top: clamp(28px, 4vw, 44px); display: inline-flex; align-items: center; gap: 10px; font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .scrollcue .sew { width: 44px; height: 10px; }
  /* a faint emerald depth-glow behind the hero */
  /* soft lighting wash behind the hero: a warm gold glow (centre-right, near India on the map)
     layered over the original emerald glow (left). Pure CSS, so it's weightless and theme-aware. */
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60% 62% at 64% 44%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
      radial-gradient(58% 68% at 22% 42%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 72%); }
  /* world trade-routes map, radiating from India to the export markets — subtle hero backdrop,
     anchored right and faded out on the left so it never fights the headline */
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("assets/hero-routes.png") no-repeat center / contain;
    opacity: .85;
    /* light theme: the arcs are pale gold, so deepen them to read on the cream background */
    filter: brightness(.6) saturate(1.45); }
  /* dark theme: the pale gold already glows on black — no deepening needed */
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::after { filter: none; opacity: .8; } }
  :root[data-theme="dark"] .hero::after { filter: none; opacity: .8; }

  /* › phone: shorter hero, bigger relative headline, stacked full-width CTAs,
       wrap the "knitwear capital" phrase, and hide the desktop-only scroll cue */
  @media (max-width: 620px) {
    .hero { min-height: auto; padding-block: 26px 22px; }
    .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
    .hero h1 em { white-space: normal; }
    .hero h1 em .ul { display: none; }
    .lede { font-size: 1rem; margin-top: 14px; }
    .tagline { font-size: 1.1rem; }
    .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .scrollcue { display: none; }
    .hero::after { opacity: .55; }
  }
  /* › phone held sideways (short landscape): don't let the hero fill the screen */
  @media (orientation: landscape) and (max-height: 540px) {
    .hero { min-height: auto; padding-block: 22px; }
  }


/* ===== STATS (hero strip) =================================================*/
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow); }
  .stat { background: var(--surface); padding: 18px 18px; transition: background .25s ease; }
  .stat:hover { background: var(--surface-2); }
  .stat .n { font-family: "Newsreader", Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -.01em; }
  .stat .l { font-size: .82rem; color: var(--muted); margin-top: 4px; }
  /* › phone: 4 columns -> 2, tighter padding */
  @media (max-width: 620px) {
    .stats { grid-template-columns: 1fr 1fr; }
    .stat { padding: 14px 13px; }
  }
  /* › very small phone: smaller stat number */
  @media (max-width: 400px) {
    .stat .n { font-size: 1.5rem; }
  }


/* ===== PHILOSOPHY (balance scale) ========================================*/
  #philosophy .philo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 5vw, 56px); align-items: center; }
  .philo-copy h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); letter-spacing: -.01em; }
  .philo-lead { margin-top: 16px; color: var(--fg-soft); font-size: 1.05rem; max-width: 48ch; }
  .promise { margin-top: clamp(22px, 3vw, 30px); padding-top: clamp(18px, 2.4vw, 24px); border-top: 1px solid var(--line); }
  .promise-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
  .promise-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; font-family: "Newsreader", Georgia, serif; font-weight: 600; line-height: 1.12; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
  .promise-lines .pl-accent { color: var(--accent-deep); }
  .promise-lines .pl-gold { color: var(--gold); font-style: italic; }

  .scale { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
    background: radial-gradient(58% 54% at 50% 40%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%); }
  .scale-svg { width: 100%; max-width: 390px; height: auto; color: var(--accent); overflow: visible; }
  .scale-frame { fill: none; stroke: currentColor; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
  .scale-beam { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; }
  .scale-fulcrum { fill: var(--gold); }
  .scale-string { fill: none; stroke: currentColor; stroke-width: 2; opacity: .65; }
  .scale-solid { fill: currentColor; stroke: none; }
  .scale-shadow { fill: currentColor; opacity: .12; }
  .scale-pan { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: currentColor; stroke-width: 2.6; }
  .scale-pan-line { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
  .w-gold { fill: var(--gold); }
  .w-accent { fill: var(--accent); }
  .w-coin { fill: #241a10; font-family: "Figtree", sans-serif; font-weight: 700; font-size: 14px; }
  .w-icon { fill: none; stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .w-icon-dot { fill: var(--on-accent); }
  .scale-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 16px; font-weight: 500; letter-spacing: .01em; }
  .scale-label-gold { fill: var(--gold); }
  .scale-label-accent { fill: var(--accent-deep); }
  .scale-cap { font-family: "IBM Plex Mono", monospace; font-size: .76rem; color: var(--muted); text-align: center; letter-spacing: .02em; }

  /* the beam sways gently and continuously, like a scale forever seeking balance */
  .scale-arm { transform-box: view-box; transform-origin: 210px 86px; animation: scaleSway 5.5s ease-in-out infinite; }
  @keyframes scaleSway {
    0%   { transform: rotate(3.2deg); }
    28%  { transform: rotate(-2.6deg); }
    52%  { transform: rotate(3.6deg); }
    78%  { transform: rotate(-3.2deg); }
    100% { transform: rotate(3.2deg); }
  }

  /* › tablet portrait & below: stack the copy above the scale */
  @media (max-width: 860px) {
    #philosophy .philo { grid-template-columns: 1fr; gap: 26px; }
    .scale-svg { max-width: 300px; }
  }


/* ===== SECTIONS / COMPARTMENTS / SPOTLIGHT / REVEALS ======================
   The shared section scaffolding: each section is a rounded "compartment",
   the one centred in the viewport gets the spotlight, and content reveals in. */
  .weave { display: block; width: 100%; height: 16px; color: var(--accent); opacity: .85; }

  section { padding-block: clamp(60px, 8vw, 112px); position: relative; }
  main > section:not(.hero) { padding-block: clamp(18px, 2.2vw, 32px); }
  main > section:not(.hero):not(#compliance):not(#contact) > .wrap {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: clamp(22px, 3vw, 40px);
    box-shadow: var(--shadow);
  }
  /* compliance & contact are already single cards — let them be the compartment */
  #compliance > .wrap > .compliance, #contact > .wrap > .contact-card { border-radius: 22px; }
  /* drop the wrapper's side padding so these cards span the full width and align edge-to-edge with the other compartments */
  #compliance > .wrap, #contact > .wrap { padding-inline: 0; }

  /* spotlight: the compartment centred in the viewport lights up, the rest dim back */
  .panel { transition: box-shadow .45s ease, border-color .45s ease, transform .45s ease, opacity .45s ease; }
  main > section:not(.hero) .panel:not(.spot) { opacity: .66; }
  .panel.spot {
    opacity: 1 !important;
    border-color: color-mix(in srgb, var(--accent) 65%, var(--line)) !important;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),    /* crisp neon edge */
      0 0 12px -3px color-mix(in srgb, var(--accent) 62%, transparent), /* bright inner glow */
      0 0 26px -12px color-mix(in srgb, var(--accent) 55%, transparent),/* radiant halo, stays within the gutter */
      0 22px 42px -24px rgba(0,0,0,.6) !important;                      /* depth shadow -> 3D lift */
    transform: translateY(-4px) scale(1.006) !important;
  }
  main > .wrap { display: none; }   /* retire the stitch dividers; compartments separate the sections */
  .sec-head { max-width: 62ch; margin-bottom: clamp(18px, 2.4vw, 30px); }
  .sec-head h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -.01em; }
  .sec-head p { margin-top: 16px; color: var(--fg-soft); font-size: 1.1rem; }

  /* reveal — visible by default; .anim pre-hides then intersection reveals */
  .anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
  .anim .reveal.in { opacity: 1; transform: none; }
  .anim .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
  .anim .stagger.in > * { opacity: 1; transform: none; }
  .anim .stagger.in > *:nth-child(2) { transition-delay: .07s; }
  .anim .stagger.in > *:nth-child(3) { transition-delay: .14s; }
  .anim .stagger.in > *:nth-child(4) { transition-delay: .21s; }
  .anim .stagger.in > *:nth-child(5) { transition-delay: .28s; }
  .anim .stagger.in > *:nth-child(6) { transition-delay: .35s; }
  /* each section's label stitches its thread when it enters */
  .anim .reveal .eyebrow::before { width: 0; transition: width .6s cubic-bezier(.2,.8,.2,1) .15s; }
  .anim .reveal.in .eyebrow::before { width: 24px; }

  /* › tablet portrait: the spotlight glow is tuned to stay within the card edge */
  @media (max-width: 860px) {
    .panel.spot {
      transform: translateY(-5px) !important;
      border-color: color-mix(in srgb, var(--accent) 62%, var(--line)) !important;
      box-shadow: var(--shadow),
        0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
        0 0 12px -3px color-mix(in srgb, var(--accent) 65%, transparent),
        0 0 20px -10px color-mix(in srgb, var(--accent) 60%, transparent),
        0 16px 28px -18px color-mix(in srgb, var(--accent) 50%, transparent) !important;
    }
  }
  /* › phone: compact compartments & section headings */
  @media (max-width: 620px) {
    main > section:not(.hero) { padding-block: 9px; }
    main > section:not(.hero):not(#compliance):not(#contact) > .wrap { padding: 18px 15px; border-radius: 18px; }
    .sec-head { margin-bottom: 14px; }
    .sec-head h2 { font-size: clamp(1.55rem, 6.6vw, 2rem); }
    .sec-head p { margin-top: 9px; font-size: .97rem; }
  }


/* ===== SERVICES CARDS =====================================================*/
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease; }
  .card::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: linear-gradient(var(--accent), var(--trust)); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; }
  .card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .card:hover::before { transform: scaleY(1); }
  .card .num { font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: var(--accent-deep); letter-spacing: .1em; }
  .card h3 { font-size: 1.22rem; margin-top: 9px; }
  .card p { margin-top: 10px; color: var(--fg-soft); font-size: .97rem; }
  /* › tablet portrait: 3 columns -> 2 */
  @media (max-width: 860px) { .cards { grid-template-columns: 1fr 1fr; } }
  /* › phone: single column, tighter gap & padding */
  @media (max-width: 620px) {
    .cards { grid-template-columns: 1fr; gap: 12px; }
    .card { padding: 17px 15px; }
  }


/* ===== PRODUCT RANGE ======================================================*/
  .range { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .prod { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease; }
  .prod:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .prod .top { display: flex; align-items: center; gap: 14px; }
  .swatch { width: 52px; height: 52px; border-radius: 12px; flex: none; border: 1px solid var(--line); position: relative; overflow: hidden; }
  .swatch::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 32%, transparent) 0 2px, transparent 2px 7px); opacity: 0; transition: opacity .3s ease; }
  .prod:hover .swatch::after { opacity: 1; }
  .prod h3 { font-size: 1.4rem; }
  .prod ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
  .prod li { font-size: .82rem; font-family: "IBM Plex Mono", monospace; color: var(--fg-soft); background: var(--surface-2); border-radius: 6px; padding: 4px 9px; }
  .prod p { color: var(--fg-soft); font-size: .96rem; }
  .prod { cursor: pointer; }
  .prod:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .gal-cue { margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--accent-deep); transition: gap .2s ease; }
  .prod:hover .gal-cue { gap: 10px; }
  /* › phone: single column, tighter gap & padding */
  @media (max-width: 620px) {
    .range { grid-template-columns: 1fr; gap: 12px; }
    .prod { padding: 17px 15px; }
  }


/* ===== GALLERY MODAL ======================================================*/
  .gallery { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 18px; }
  .gal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(5px); }
  .gal-panel { position: relative; width: min(980px, 100%); max-height: 88vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: clamp(20px, 3vw, 34px); }
  .gal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .gal-head h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
  .gal-close { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: 1rem; cursor: pointer; flex: none; }
  .gal-close:hover { border-color: var(--accent); color: var(--accent-deep); }
  .gal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .gtab { font: inherit; font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg-soft); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
  .gtab:hover { border-color: var(--accent); }
  .gtab.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .gal-note { margin-top: 14px; font-size: .82rem; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
  .gal-note svg { flex: none; margin-top: 1px; color: var(--accent-deep); }
  .gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
  .gtile { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg); transition: transform .2s ease, border-color .2s ease; }
  .gtile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .gthumb { aspect-ratio: 4 / 5; display: grid; place-items: center; color: rgba(20,33,26,.5); }
  .gthumb svg { width: 40%; height: 40%; }
  .gmeta { padding: 12px 14px; }
  .gmeta h4 { font-family: "Newsreader", Georgia, serif; font-size: 1.02rem; font-weight: 600; }
  .gmeta span { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--muted); }
  .gtile { cursor: pointer; }
  .gtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .gal-sub { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
  .gback { font: inherit; font-size: .84rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; }
  .gback:hover { border-color: var(--accent); color: var(--accent-deep); }
  .gcrumb { font-family: "IBM Plex Mono", monospace; font-size: .76rem; letter-spacing: .04em; color: var(--muted); }
  .gslot { border: 1.5px dashed color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 14px; aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); text-align: center; padding: 10px; }
  .gslot svg { width: 30%; height: 30%; opacity: .55; }
  .gslot .n { font-family: "IBM Plex Mono", monospace; font-size: .72rem; }
  /* horizontal scrollable rail for a style's photos */
  .gal-grid.rail { display: flex; overflow-x: auto; gap: 16px; padding-bottom: 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .gal-grid.rail .gslot { flex: 0 0 auto; width: clamp(150px, 42vw, 210px); scroll-snap-align: start; }
  /* › small tablet / large phone: 3-up grid -> 2-up */
  @media (max-width: 700px) { .gal-grid:not(.rail) { grid-template-columns: repeat(2, 1fr); } }
  /* › small phone: single column */
  @media (max-width: 440px) { .gal-grid { grid-template-columns: 1fr; } }


/* ===== PROCESS STEPS ======================================================*/
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 26px; }
  .step { position: relative; padding-top: 32px; }
  .step::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; border-top: 2px dashed color-mix(in srgb, var(--accent) 48%, var(--line)); }
  .step .k { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 600; display: grid; place-items: center; box-shadow: var(--glow); }
  .step h3 { font-size: 1.16rem; }
  .step p { margin-top: 8px; color: var(--fg-soft); font-size: .95rem; }
  /* › tablet portrait: 3 columns -> 2 */
  @media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
  /* › phone: single column, tighter gap, smaller top offset */
  @media (max-width: 620px) {
    .steps { grid-template-columns: 1fr; gap: 12px; }
    .step { padding-top: 26px; }
  }


/* ===== COTTON → CARTON CHAIN =============================================*/
  .chain-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: clamp(30px, 4vw, 50px); }
  .chain-intro .from, .chain-intro .to { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--accent-deep); }
  .chain-intro .arrow { color: var(--accent); flex: none; }
  .chain-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 18px; }
  .node { position: relative; padding-top: 34px; }
  .node::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; border-top: 2px dashed color-mix(in srgb, var(--accent) 48%, var(--line)); }
  .node .k { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: "IBM Plex Mono", monospace; font-size: .66rem; font-weight: 600; display: grid; place-items: center; box-shadow: var(--glow); z-index: 1; }
  .node .ic { width: 58px; height: 58px; border-radius: 15px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); color: var(--accent-deep); display: grid; place-items: center; margin-bottom: 15px; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
  .node:hover .ic { transform: translateY(-5px) rotate(-4deg); box-shadow: var(--glow); }
  .node h3 { font-size: 1.05rem; letter-spacing: -.01em; }
  .node p { margin-top: 6px; color: var(--fg-soft); font-size: .88rem; }
  /* › tablet portrait: 5 columns -> 3 */
  @media (max-width: 860px) { .chain-grid { grid-template-columns: repeat(3, 1fr); } }
  /* › phone: -> 2 columns, tighter gap, smaller icon & top offset */
  @media (max-width: 620px) {
    .chain-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .node { padding-top: 30px; }
    .node .ic { width: 50px; height: 50px; }
  }


/* ===== COMPLIANCE =========================================================*/
  .compliance { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow); }
  .certs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
  .cert { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: .9rem; font-weight: 500; background: var(--bg); transition: transform .2s ease, border-color .2s ease; }
  .cert:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
  .cert .tk { width: 8px; height: 8px; border-radius: 50%; background: var(--trust); }
  .note { margin-top: 22px; font-size: .88rem; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
  .note svg { flex: none; margin-top: 2px; color: var(--accent-deep); }
  /* › phone: compact card */
  @media (max-width: 620px) { .compliance { padding: 18px 15px; border-radius: 18px; } }
  /* › very small phone: smaller cert chips */
  @media (max-width: 400px) { .cert { font-size: .82rem; padding: 7px 12px; } }


/* ===== WHY / SPLIT ========================================================*/
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
  .why-list { display: grid; gap: 22px; }
  .why { display: flex; gap: 16px; }
  .why .b { width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
  .why h3 { font-size: 1.14rem; }
  .why p { margin-top: 5px; color: var(--fg-soft); font-size: .96rem; }
  /* › tablet portrait: two columns -> stacked */
  @media (max-width: 860px) { .split { grid-template-columns: 1fr; } }


/* ===== CONTACT ============================================================*/
  .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; }
  .contact-info { padding: clamp(22px, 3vw, 40px); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 72%); border-right: 1px solid var(--line); }
  .contact-info h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
  .contact-info p { margin-top: 12px; color: var(--fg-soft); }
  .rowline { margin-top: 28px; display: grid; gap: 18px; }
  .field .lab { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-family: "IBM Plex Mono", monospace; }
  .copyrow { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
  .copyrow .val { font-size: 1.02rem; font-weight: 500; word-break: break-word; }
  .copy { font-size: .74rem; border: 1px solid var(--line); background: var(--bg); color: var(--fg-soft); border-radius: 7px; padding: 4px 9px; cursor: pointer; font-family: "IBM Plex Mono", monospace; transition: border-color .2s ease, color .2s ease; }
  .copy:hover { border-color: var(--accent); color: var(--accent-deep); }
  /* › tablet portrait: side-by-side -> stacked, info panel divider moves to the bottom */
  @media (max-width: 860px) {
    .contact-card { grid-template-columns: 1fr; }
    .contact-info { border-right: 0; border-bottom: 1px solid var(--line); }
  }
  /* › phone: compact info panel */
  @media (max-width: 620px) { .contact-info { padding: 18px 15px; } }


/* ===== CONTACT FORM =======================================================*/
  form { padding: clamp(22px, 3vw, 40px); display: grid; gap: 14px; }
  .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  label.fl { display: grid; gap: 6px; font-size: .82rem; color: var(--fg-soft); font-weight: 600; }
  input, select, textarea { font: inherit; font-size: .95rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; width: 100%; transition: border-color .2s ease, box-shadow .2s ease; }
  input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  textarea { resize: vertical; min-height: 92px; }
  .form-note { font-size: .82rem; color: var(--muted); }
  .form-msg { font-size: .92rem; color: var(--trust); font-weight: 600; min-height: 1.2em; }
  /* › phone: two-up field rows -> stacked, compact padding */
  @media (max-width: 620px) {
    .f2 { grid-template-columns: 1fr; }
    form { padding: 18px 15px; }
  }


/* ===== FOOTER =============================================================*/
  footer { border-top: 1px solid var(--line); padding-block: 44px 52px; color: var(--muted); font-size: .9rem; }
  .foot-in { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
  .foot-in .brand { font-size: 1.05rem; color: var(--fg); }
  /* › phone: shorter footer */
  @media (max-width: 620px) { footer { padding-block: 28px 34px; } }


/* ===== SHARED SURFACE TREATMENTS ==========================================
   Cross-component polish that must apply AFTER each surface sets its own
   background, so it lives here rather than inside one component. Not responsive. */
  main > section:not(.hero):not(#compliance):not(#contact) > .wrap,
  .card, .prod, .compliance, .contact-card, .stat {
    background-image: linear-gradient(180deg, color-mix(in srgb, #fff 6%, transparent), transparent 46%);
  }
  .card:hover, .prod:hover { box-shadow: var(--shadow), 0 20px 44px -24px color-mix(in srgb, var(--accent) 45%, transparent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }


/* ===== GLOBAL — SCROLL, MOTION & TOUCH ====================================
   Device-capability and whole-document behaviour. These are intentionally NOT
   per-component: changing them affects the whole page across all breakpoints. */
  html { scroll-padding-top: 86px; }
  /* › phone: the sticky header is shorter, so offset anchor scrolls to match */
  @media (max-width: 620px) {
    html { scroll-padding-top: calc(66px + env(safe-area-inset-top, 0px)); }
  }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
  /* comfortable 44px touch targets on touch devices (phones + tablets) */
  @media (pointer: coarse) {
    .btn { min-height: 44px; }
    .icon-btn, .navtoggle { height: 44px; min-width: 44px; }
    .gal-close { width: 44px; height: 44px; }
    .mobnav a:not(.btn) { padding-block: 15px; }
  }