/* ==========================================================================
   NanoThrive - Design System
   Brand colours taken verbatim from NanoThrive Panthones.pdf
   #8FC04C green | #F39F11 orange | #15667B deep teal | #009FE3 cyan
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;

  /* Brand */
  --green:  #8FC04C;
  --orange: #F39F11;
  --teal:   #15667B;
  --cyan:   #009FE3;

  /* Derived neutrals (teal-biased so the page reads as one family) */
  --ink:     #0E2A33;  /* headings, on-colour text - 15.9:1 on white */
  --body:    #45636F;  /* body copy   - 6.2:1 on white, 5.4:1 on --sunk */
  --muted:   #4E6B77;  /* meta text   - 5.7:1 on white, 4.8:1 on --sunk.
                          Kept dark enough to clear 4.5:1 on the *tinted*
                          section background, not just on white. */
  --bg:      #FFFFFF;  /* page ground - white */
  --surface: #FFFFFF;  /* cards sit on white, so they are defined by a
                          hairline border rather than by a fill */
  --sunk:    #F6F8F3;  /* barely-there tint, only to mark section rhythm */

  /* Brand tints - light enough to sit behind --ink text at AA.
     These are the only places green, orange and cyan appear as fills; as
     text those three fail contrast on white, so teal carries every accent
     that has to be read. */
  --green-tint:  #EAF3DA;
  --orange-tint: #FDF0D8;
  --cyan-tint:   #E1F2FB;

  --line:        rgba(14, 42, 51, .13);
  --line-strong: rgba(14, 42, 51, .22);

  /* Type */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
  --fs-h1:      clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.25rem + 2.1vw, 2.625rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .8125rem;

  /* Spacing - 4/8 rhythm */
  --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;
  --section: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* Shape + elevation */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(14,42,51,.05), 0 2px 8px rgba(14,42,51,.04);
  --sh-2: 0 2px 4px rgba(14,42,51,.05), 0 8px 24px rgba(14,42,51,.07);
  --sh-3: 0 8px 16px rgba(14,42,51,.07), 0 24px 56px rgba(14,42,51,.11);

  --container: 1200px;
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 2.5rem);
  /* Height of the sticky header. The full-screen hero subtracts this so the
     first screen is header + hero with nothing below the fold. */
  --header-h: 76px;

  /* Motion - one shared rhythm */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 140ms; --t-mid: 240ms; --t-slow: 420ms;

  /* z-index scale */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-overlay: 100; --z-top: 1000;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  text-wrap: balance;
}
h3 { font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
p { text-wrap: pretty; }
a { color: var(--teal); text-underline-offset: .18em; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--green); color: var(--ink); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  z-index: var(--z-top);
  background: var(--ink); color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill); font-weight: 600; text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

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

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1360px; }
.section { padding-block: var(--section); }
.section--tint { background: var(--sunk); }
.section--tight { padding-block: var(--sp-7); }
.stack > * + * { margin-top: var(--sp-4); }
.measure { max-width: 62ch; }
/* Line length for a display-size heading. In rem, not ch - a ch would resolve
   against the heading's own large font-size and be far too wide. */
.measure-head { max-width: 46rem; }
.center { text-align: center; margin-inline: auto; }

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 4. Type helpers ---------- */
/* Section labels carry brand colour in every section: teal type, green dot.
   No pill on a white page - the type alone is cleaner and reads as a label. */
.eyebrow {
  display: inline-flex; align-items: flex-start; gap: var(--sp-3);
  background: none; border: 0; padding: 0;
  color: var(--teal); font-size: var(--fs-xs); font-weight: 700;
  line-height: 1.45; letter-spacing: .12em; text-transform: uppercase;
  width: fit-content;
}
/* Aligned to the first line rather than the block, so a label that wraps to
   two or three lines keeps its dot beside the opening word. */
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex: none;
  margin-top: calc((1.45em - 6px) / 2);
}
/* Over photography the label still needs a surface to sit on. */
/* A dark pill, not a light one. A translucent white wash lifts whatever is
   behind it, which is the wrong direction for white type: over a bright sky it
   measured 2.9:1. Carrying its own dark ground means the label holds up over
   any photograph, and the scrim above can stay light enough to keep the sky. */
.eyebrow--onDark {
  background: rgba(8,26,33,.58); border: 1px solid rgba(255,255,255,.34);
  color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  backdrop-filter: blur(2px);
}

/* ---- Emphasis system -------------------------------------------------
   Three levels, applied by rule rather than ad hoc, so emphasis stays
   consistent across every page:
     1. .accent      - one key phrase per heading            (teal text)
     2. .mark        - one key phrase per section lead       (brand tint)
     3. .figure-hl   - numbers and measures in running text  (teal, tabular)
   Green and orange cannot be read as text on white (2.1:1), so they carry
   emphasis as tints *behind* --ink text, where they measure 13:1. */

/* Colour only - no backgrounds, boxes, underlines or other effects.
   Which brand colour is used depends on the size of the text it sits in.
   Measured on white: green 2.1:1, orange 2.2:1, teal 6.5:1. Green and orange
   carry real presence at display sizes but wash out in body copy, so they take
   the headings and leads while teal takes anything small. */

/* Headings only (28px and up). */
.accent { color: var(--green); }

/* Lead paragraphs (17-20px), lifted to 700 to hold its weight. */
.mark {
  color: var(--orange);
  font-weight: 700;
  background: none;
}
.mark--green { color: var(--green); }

/* Below lead size the orange drops away entirely, so emphasis in card and
   body copy falls back to teal, which holds its contrast at any size. */
.card .mark,
p:not(.lead) .mark { color: var(--teal); }

/* The lead scales down to 17px on narrow screens, below the size at which
   orange can carry emphasis, so it falls back there too. */
@media (max-width: 780px) { .lead .mark { color: var(--teal); } }

/* Figures and technical terms, which mostly sit in 14-16px copy. */
.figure-hl {
  color: var(--teal);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* On the dark photographic panels green measures 6.8:1, so it reads cleanly
   there and keeps the warm orange for the CTA alone. */
/* The descendant selector needs a matching element in it to outrank
   `p:not(.lead) .mark` above, which is (0,2,1) because :not() counts its
   argument. Without this the hero mark falls back to teal, which measures
   1.4:1 over a photograph. */
.hero-copy p .mark, .showcase-panel p .mark { color: var(--green); }

.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--body); }
.display { font-size: var(--fs-display); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.meta { font-size: var(--fs-sm); color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }

.section-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: end; gap: var(--sp-6); }
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
  letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.975); }
.btn .icon { width: 18px; height: 18px; }

/* orange behind --ink text = 7.0:1 */
.btn-primary { background: var(--orange); color: var(--ink); box-shadow: var(--sh-1); }
.btn-primary:hover { background: #E08F06; box-shadow: var(--sh-2); }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--sunk); border-color: var(--ink); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--teal); }

.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.45); }
.btn-ghost:hover { background: rgba(255,255,255,.24); border-color: #fff; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; color: var(--teal);
  text-decoration: none; min-height: 44px; width: fit-content;
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- 6. Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  /* The hairline is a box-shadow, not a border: a border would add 1px to the
     header's height and push the full-screen hero past the fold. */
  box-shadow: 0 1px 0 rgba(14, 42, 51, 0);
  transition: box-shadow var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line); background: rgba(255,255,255,.96); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex: none; }
.brand img { width: 40px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
/* Wordmark colours match the supplied logo exactly: "Nano" orange, "Thrive"
   green. As a logotype this is exempt from the WCAG contrast minimum, and the
   brand mark sits beside it, so the name is never carried by colour alone. */
.brand-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3125rem;
  letter-spacing: -.03em; color: var(--orange); line-height: 1;
}
.brand-name span { color: var(--green); }

.nav-links { display: none; list-style: none; padding: 0; margin: 0; }
@media (min-width: 1160px) {
  .nav-links { display: flex; align-items: center; gap: var(--sp-1); }
  .nav-links a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 var(--sp-4); border-radius: var(--r-pill);
    font-size: .9375rem; font-weight: 500; color: var(--ink);
    text-decoration: none; transition: background-color var(--t-fast) var(--ease);
  }
  .nav-links a:hover { background: rgba(14,42,51,.06); }
  .nav-links a[aria-current="page"] { font-weight: 700; color: var(--teal); background: var(--sunk); }
}
.nav-cta { display: none; }
@media (min-width: 1160px) { .nav-cta { display: inline-flex; flex: none; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; min-width: 44px; padding: 0 var(--sp-4);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); cursor: pointer; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  touch-action: manipulation;
}
@media (min-width: 1160px) { .nav-toggle { display: none; } }
.nav-toggle .icon { width: 20px; height: 20px; }

.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--bg);
  display: grid; grid-template-rows: auto 1fr;
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.mobile-nav-list { display: grid; gap: var(--sp-2); padding-block: var(--sp-4) var(--sp-8); align-content: start; list-style: none; padding-inline: 0; margin: 0; }
.mobile-nav-list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding: 0 var(--sp-5);
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1);
}
.mobile-nav-list a[aria-current="page"] { background: var(--green-tint); }
.mobile-nav-list .icon { width: 20px; height: 20px; color: var(--muted); }
.mobile-nav .btn { margin-top: var(--sp-4); }

/* ---------- 7. Hero ----------
   Full-bleed and full-height: the media runs edge to edge with no radius,
   shadow or surrounding padding, and fills the viewport below the sticky
   header. dvh rather than vh so mobile browser chrome cannot clip it; the vh
   line above is the fallback for browsers without dvh. */
.hero { padding: 0; }
.hero-media {
  position: relative; overflow: hidden;
  background: var(--teal);
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: grid;
}
.hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  /* Weighted to the band the headline occupies. The top stays lighter than the
     middle so the sky in the photograph survives, but not so light that a
     bright horizon can drop the white type under 3:1. */
  background: linear-gradient(to top, rgba(8,26,33,.92) 0%, rgba(8,26,33,.76) 42%, rgba(8,26,33,.52) 74%, rgba(8,26,33,.46) 100%);
}
/* The shell is the grid item now, so it carries the alignment. Its horizontal
   padding comes from .container, which is what keeps the copy lined up with
   the nav and the sections below. */
.hero-shell { position: relative; z-index: 2; align-self: end; width: 100%; }
.hero-inner {
  padding-block: var(--sp-7);
  display: grid; gap: var(--sp-6);
}
@media (min-width: 960px) {
  .hero-inner { padding-block: var(--sp-8); grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-7); }
}
/* Short laptop screens (e.g. 1024x768): the hero content is taller than the
   space available, so tighten its own padding rather than let it run past
   the fold. */
@media (min-width: 960px) and (max-height: 780px) {
  .hero-inner { padding-block: var(--sp-6); gap: var(--sp-5); }
}
/* max-width in rem, not ch: a ch here would resolve against this element's
   16px font-size, not the 72px display size of the heading inside it. */
.hero-copy { display: grid; gap: var(--sp-4); max-width: 46rem; }
.hero-copy h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero-copy p { color: rgba(255,255,255,.94); font-size: var(--fs-lead); text-shadow: 0 1px 12px rgba(0,0,0,.45); max-width: 36rem; }

.hero-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--sh-3);
  display: grid; gap: var(--sp-4);
  width: 100%; max-width: 340px;
}
.hero-card-top { display: flex; align-items: center; gap: var(--sp-4); }
.hero-card-top img { width: 76px; height: 76px; border-radius: var(--r-md); object-fit: cover; flex: none; }
.hero-card-title { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.0625rem; line-height: 1.25; }
.hero-card-list { display: grid; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.hero-card-list li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--body); }
.hero-card-list .icon { width: 16px; height: 16px; color: var(--teal); }

/* Compact hero for interior pages */
.page-hero { padding-top: var(--sp-6); padding-bottom: var(--sp-7); }
/* The hero already supplies the breathing room above the first section, so
   the section's own top padding would otherwise double the gap. */
.page-hero + .section { padding-top: var(--sp-6); }
.page-hero-inner { display: grid; gap: var(--sp-5); max-width: 60ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); color: var(--muted); list-style: none; padding: 0; margin: 0; }
/* Padding brings the link to the 24x24 CSS px minimum without changing how
   the breadcrumb reads (WCAG 2.2 target size). */
.breadcrumb a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; padding-inline: 2px; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--line-strong); }

/* ---------- 8. Cards ----------
   One surface recipe shared by every card-like element, so they read as a
   family: flat white, a hairline border, no fill and no resting shadow.
   On a white page the border does the work - colour enters only through the
   hexagon badge tint and the brand rule that appears on hover. */
.card, .quote {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}

/* A single solid brand rule along the top edge on hover. Inset from the
   corners so it sits inside the radius rather than fighting it. */
.card::before, .quote::before {
  content: "";
  position: absolute; top: -1px; left: 24px; right: 24px; height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-slow) var(--ease);
}
.card:hover::before, .quote:hover::before { transform: scaleX(1); }

.card:hover, .quote:hover {
  border-color: var(--line-strong);
  box-shadow: var(--sh-1);
}

.card { padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; }
.card h3 { font-size: 1.125rem; }
.card p { font-size: var(--fs-sm); }

/* Technical index label: tabular numerals, wide tracking, and a rule that
   runs out to the edge of the card. */
.card-num {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xs);
  color: var(--teal); letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
}
.card-num::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }

/* Hexagon icon badge - echoes the logo mark.
   drop-shadow (not box-shadow) so the shadow follows the clipped hexagon
   rather than the element's rectangle. */
.hexbadge {
  width: 52px; height: 58px; flex: none;
  display: grid; place-items: center;
  background: var(--green-tint);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* One icon colour throughout - the tint carries the variation, so the icons
   stay consistent and every one of them clears contrast. */
.hexbadge .icon { width: 24px; height: 24px; color: var(--teal); }
.hexbadge--orange { background: var(--orange-tint); }
.hexbadge--cyan { background: var(--cyan-tint); }

.icon { width: 24px; height: 24px; stroke-width: 1.75; flex: none; }

/* ---------- 9. Trust strip ---------- */
.trust { display: grid; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* auto-fit rather than a fixed four, so adding or removing a fact does not
   leave an empty column behind. */
@media (min-width: 800px) { .trust { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.trust-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); }
@media (min-width: 800px) { .trust-item + .trust-item { border-left: 1px solid var(--line); } }
@media (max-width: 799px) { .trust-item + .trust-item { border-top: 1px solid var(--line); } }
.trust-item .icon { width: 22px; height: 22px; color: var(--teal); }
.trust-item strong { display: block; font-family: var(--font-display); color: var(--teal); font-size: 1rem; line-height: 1.3; }
.trust-item span { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 10. Inline-image headline (reference motif) ---------- */
.inline-statement {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, .85rem + 2.3vw, 2.4rem);
  line-height: 1.34; letter-spacing: -.02em; color: var(--ink);
  text-wrap: pretty;
}
/* A laboratory image, shown whole rather than cropped to a ratio: the scale
   bar and the measurement labels are the point, so nothing may be trimmed. */
.tem-figure { margin: 0; display: grid; gap: var(--sp-3); align-content: start; }
.tem-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--sunk);
}

/* ---------- 11. Before / after comparison ---------- */
.compare-wrap { display: grid; gap: var(--sp-4); }
.compare {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-2); background: var(--sunk);
  aspect-ratio: 3 / 2;
}
@media (min-width: 900px) { .compare { aspect-ratio: 16 / 10; } }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; background: #fff; transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(14,42,51,.25); pointer-events: none; z-index: 2;
}
.compare-divider::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #fff; box-shadow: var(--sh-2);
}
.compare-tag {
  position: absolute; bottom: var(--sp-4); z-index: 3;
  background: rgba(8,26,33,.82); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
}
.compare-tag--before { left: var(--sp-4); }
.compare-tag--after  { right: var(--sp-4); background: var(--green); color: var(--ink); }
.compare-control { display: grid; gap: var(--sp-2); }
.compare-control input[type="range"] { width: 100%; height: 44px; accent-color: var(--teal); cursor: ew-resize; }

/* Two photographs side by side, for pairs where a wipe slider would hide the
   thing being compared rather than reveal it. Tags reuse the slider's pill,
   pinned bottom-left on both shots so the eye reads them in the same place. */
.pair { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } }
.pair figure { margin: 0; display: grid; gap: var(--sp-3); }
.pair-shot { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); background: var(--sunk); }
.pair-shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.pair .compare-tag { left: var(--sp-4); right: auto; }

/* ---------- 12. Showcase (stats over image) ---------- */
.showcase { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); min-height: 540px; display: grid; }
.showcase > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(8,26,33,.90) 0%, rgba(8,26,33,.74) 44%, rgba(8,26,33,.32) 100%); }
.showcase-panel { position: relative; z-index: 2; align-self: end; padding: var(--sp-6) var(--sp-5); display: grid; gap: var(--sp-5); max-width: 660px; }
@media (min-width: 900px) { .showcase-panel { padding: var(--sp-8); } }
.showcase-panel h2, .showcase-panel h3 { color: #fff; }
.showcase-panel p { color: rgba(255,255,255,.92); }
.statgrid { display: grid; gap: var(--sp-5); }
@media (min-width: 560px) { .statgrid { grid-template-columns: repeat(3, 1fr); } }
.stat-val { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); color: #fff; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-val small { font-size: .5em; font-weight: 700; margin-left: .1em; }
.stat-lab { font-size: var(--fs-xs); color: rgba(255,255,255,.82); margin-top: var(--sp-2); line-height: 1.45; }

/* ---------- 13. Quote ---------- */
/* Surface, ring and hover come from the shared card recipe in section 8. */
.quote { padding: var(--sp-6); display: grid; gap: var(--sp-4); }
.quote blockquote { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--ink); line-height: 1.35; letter-spacing: -.015em; margin: 0; }
.quote .icon { width: 30px; height: 30px; color: var(--green); }
.quote figcaption { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- 13b. Field media: portrait video + photo grid ----------
   The footage is phone-shot at 480x848, so it gets a narrow portrait column
   rather than a banner. aspect-ratio reserves the space before it loads. */
.field-media { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
  .field-media { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
}
/* The cap matters below 900px, where .field-media collapses to one column.
   Without it a 480x848 portrait clip stretches to the full container width and
   stands roughly 1.8 times as tall, which on a scaled-up laptop display fills
   the screen and pushes everything else off it. */
.video-frame {
  margin: 0 auto; display: grid; gap: var(--sp-3);
  width: 100%; max-width: 300px;
}
.video-frame video {
  width: 100%; height: auto; display: block;
  aspect-ratio: 480 / 848;
  border-radius: var(--r-lg);
  background: var(--ink);
}
.photo-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
/* Standing on its own rather than beside the video, the grid gets four across. */
@media (min-width: 1000px) { .photo-grid--wide { grid-template-columns: repeat(4, 1fr); } }
/* A comparison pair stacks on a phone. Two plants side by side in a 160px
   column is too small to see the difference the photograph exists to show,
   which is not true of the gallery, where a thumbnail is only a thumbnail. */
@media (max-width: 620px) { .photo-grid--pair { grid-template-columns: 1fr; } }
.photo-grid figure { margin: 0; display: grid; gap: var(--sp-2); }
.photo-grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-lg); display: block;
}

/* Portrait team photograph, shown whole rather than cropped. */
.team-photo { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }

/* ---------- 14. Split feature ---------- */
.split { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-8); } }
.split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); aspect-ratio: 4/3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .split--flip .split-media { order: 1; } }
.split-body { display: grid; gap: var(--sp-4); }

/* ---------- 15. Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.checklist .icon { width: 22px; height: 22px; color: var(--teal); margin-top: 3px; }
.checklist strong { color: var(--teal); font-family: var(--font-display); }

/* ---------- 16. Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: var(--sp-5); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.step-num {
  counter-increment: step; width: 44px; height: 50px; flex: none;
  display: grid; place-items: center; background: var(--teal); color: #fff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step-body { display: grid; gap: var(--sp-2); }

/* ---------- 17. Team ---------- */
.person-loc { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.person-loc .icon { width: 16px; height: 16px; }

/* Leadership cards carry a photograph, so the body sits under a full-bleed
   square image. Own recipe rather than .card, whose top accent bar would be
   clipped by the overflow needed to round the photograph's corners. */
.person-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.person-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }
/* 4:5 rather than square. A square crop of a close headshot has to cut either
   the hair or the chin, because it cannot be wider than the source. */
.person-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--sunk); }
.person-body { padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; }

/* ---------- 18. Timeline ---------- */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; }
.tl-item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); padding-bottom: var(--sp-6); }
.tl-item:last-child { padding-bottom: 0; }
.tl-rail { display: grid; justify-items: center; grid-template-rows: auto 1fr; }
.tl-dot { width: 20px; height: 22px; background: var(--green); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); margin-top: 6px; }
.tl-line { width: 2px; background: var(--line-strong); height: 100%; border-radius: 2px; margin-top: var(--sp-2); }
.tl-item:last-child .tl-line { display: none; }
.tl-body { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-2); }
.tl-when { font-family: var(--font-display); font-weight: 800; color: var(--teal); font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- 19. CTA band ---------- */
.cta-band {
  background: var(--teal); color: #fff;
  border-radius: var(--r-xl); padding: clamp(2rem, 1rem + 4vw, 4rem);
  display: grid; gap: var(--sp-5); position: relative; overflow: hidden;
 
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.90); }
.cta-band::before {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 320px; height: 356px; opacity: .14;
  background: var(--green);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  pointer-events: none;
}
.cta-band > * { position: relative; }

/* ---------- 20. Forms ---------- */
.form { display: grid; gap: var(--sp-5); }
.field { display: grid; gap: var(--sp-2); }
.field label { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.field .req { color: #A6410E; }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.field input, .field select, .field textarea {
  min-height: 48px; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,159,227,.25);
}
.field .err { display: none; font-size: var(--fs-sm); color: #A6410E; font-weight: 500; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #A6410E; }
.field.is-invalid .err { display: flex; align-items: flex-start; gap: var(--sp-2); }
.field.is-invalid .err .icon { width: 18px; height: 18px; margin-top: 2px; }
/* Grid at every width, so the two stacked fields keep their gap on mobile
   instead of running together. */
.form-row { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .form-row { grid-template-columns: repeat(2, 1fr); } }

.form-summary {
  background: #FDF1EC; border: 1.5px solid #E8A98F; border-left-width: 5px;
  border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2);
}
.form-summary[hidden] { display: none; }
.form-summary h2 { font-size: 1.0625rem; color: #7A3009; }
.form-summary ul { margin: 0; padding-left: 1.15rem; display: grid; gap: var(--sp-1); }
.form-summary a { color: #8A3A0C; font-weight: 600; }
.form-status { display: grid; gap: var(--sp-2); }
.form-status:empty { display: none; }
.form-ok {
  background: var(--green-tint); border: 1.5px solid var(--green); border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5); color: var(--ink); display: flex; gap: var(--sp-3); align-items: flex-start;
}
.form-ok .icon { color: var(--teal); margin-top: 2px; }
.form-note { background: var(--cyan-tint); border-radius: var(--r-sm); padding: var(--sp-4); font-size: var(--fs-sm); display: flex; gap: var(--sp-3); align-items: flex-start; }
.form-note .icon { width: 20px; height: 20px; color: var(--teal); margin-top: 2px; }

/* ---------- 21. Footer ---------- */
.site-footer { background: var(--teal); color: rgba(255,255,255,.86); margin-top: var(--section); }
.footer-top { display: grid; gap: var(--sp-7); padding-block: var(--sp-8); }
@media (min-width: 900px) { .footer-top { grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: var(--sp-6); } }
.footer-brand { display: grid; gap: var(--sp-4); align-content: start; max-width: 40ch; }
.footer-logo { background: #fff; border-radius: var(--r-md); padding: var(--sp-3); width: fit-content; }
.footer-logo img { width: 112px; height: auto; }
.footer-tagline { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.0625rem; }
.footer-col h3 { color: #fff; font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--sp-3); font-weight: 700; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; }
.footer-col a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: rgba(255,255,255,.86); text-decoration: none; font-size: var(--fs-sm);
  transition: color var(--t-fast) var(--ease);
}
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255,255,255,.80);
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
}

/* ---------- 22. Scroll reveal ----------
   Gated behind .js (set by icons.js) so that with JavaScript disabled the
   content is simply visible rather than stuck at opacity 0. */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:active { transform: none; }
  /* Cards keep the border and rule response; it just appears rather than
     wiping across. */
  .card::before, .quote::before { transition: none; }
}

/* Fallback shown only when the browser cannot play the file. It sits on the
   player's dark background, so it needs light text of its own. */
.video-fallback { color: #fff; padding: var(--sp-5); }
.video-fallback a { color: var(--green); }

/* ---------- Statement line ----------
   A short declarative line between sections. Display type, no decoration -
   the emphasis comes from the brand colour on the closing clause. */
.statement {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: var(--sp-8);
  text-wrap: balance;
}
.statement--center { text-align: center; margin-inline: auto; }
.statement--sm { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); margin-top: var(--sp-5); }

/* ---------- 24. Prose-only sections ----------
   A section that is one column of running text with no media beside it.
   Centred in the page so the empty space sits on both sides rather than
   collecting on the right, where it reads as a column that lost its partner. */
.section-prose { max-width: 46rem; margin-inline: auto; }
.section-prose .section-head { margin-bottom: var(--sp-5); }

/* ---------- 25. Feature rows ----------
   Everything a card carried, minus the box. A hairline above each item, tipped
   with a short brand rule, does the separating. Six or eight points in a row
   then read as an editorial list rather than a wall of containers. Cards are
   kept only where the item really is an object: a photograph of a person, or
   an image tile that leads somewhere. */
.featlist { display: grid; gap: var(--sp-6) var(--sp-7); }
@media (min-width: 700px)  { .featlist { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .featlist--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1000px) { .featlist--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
/* Declared after the media queries so a stacked list stays stacked at every
   width, which is what a narrow sidebar column needs. */
.featlist--stack { grid-template-columns: minmax(0,1fr); gap: var(--sp-5); }

.feat {
  position: relative;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: grid; gap: var(--sp-3); align-content: start;
}
/* The accent the cards used to show on hover, now permanent, because there is
   no border left to tell one item from the next. */
.feat::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 40px; height: 2px; background: var(--green);
}
.feat--o::before { background: var(--orange); }
.feat--c::before { background: var(--cyan); }

/* The badge shrinks without a card around it, so it sits with the type rather
   than dominating a column that no longer has edges. */
.feat .hexbadge { width: 44px; height: 49px; }
.feat .hexbadge .icon { width: 21px; height: 21px; }
.feat-num {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xs);
  letter-spacing: .16em; color: var(--teal); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .feat { transition: border-color var(--t-mid) var(--ease); }
}