/* SYNOPTIS site.css — v3
   Base: v2 artefact tokens, nudged towards our own identity:
     palette B — deeper sea-green teal (keeps pale, keeps navy)
     type   B — Source Serif 4 Variable replaces Playfair Display (Inter stays)
     motif    — thin swath-line device, used under tags and in the study panel
   Content changes:
     Where-we-work section between Approach and Study
     Our approach rebuilt around ingredients (three cards)
     Pillars gain two labelled lists each
     Footer wording updated
   Fonts bundled locally; no CDN; no trackers; AA contrast throughout.
*/

/* ── Fonts, bundled locally ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-variable-latin.woff2') format('woff2-variations'),
       url('../fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-variable-latin.woff2') format('woff2-variations'),
       url('../fonts/source-serif-4-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ── */
:root {
  /* Palette B — deep sea-green */
  --teal:         #1F6B5E;   /* base teal (deeper than v2) */
  --teal-dark:    #164A42;   /* panels / buttons */
  --teal-deeper:  #0E302A;   /* footer */
  --teal-card:    #175246;   /* dark card background */
  --teal-inner:   #2E8B7B;   /* hero centre glow */
  --pale:         #F2F4D0;
  --pale-dark:    #E8EABB;
  --navy:         #1A2B3C;
  --white:        #FFFFFF;
  --cream:        242, 237, 228;   /* v4i: one tone for text on teal (titles stay white) */

  /* Text tones — v4l rule A (supersedes v4i rule α):
       titles                → white
       body on plain teal    → white (pillar card body, Where body, contact body, footer wordmark)
       hero sub-line         → cream (sits on the gradient's bright band under a white title)
       secondary on teal     → cream (pillar card example, Where notes, footer tag/links/note)
     Opacity still gives the mute/faint steps for secondary tones. */
  --text-on-teal:        rgba(var(--cream), 0.92);
  --text-mute-on-teal:   rgba(var(--cream), 0.90);
  --text-faint-on-teal:  rgba(var(--cream), 0.65);
  --text-on-pale:        rgba(26,43,60,0.86);
  --text-mute-on-pale:   rgba(26,43,60,0.78);
  --rule-on-pale:        rgba(26,43,60,0.30);
  --rule-on-teal:        rgba(var(--cream), 0.28);

  --serif: 'Source Serif 4', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
           Roboto, sans-serif;

  --max-content: 1100px;
  --focus:       #FFCC00;

  /* v5: pill-height tracks the fixed nav pill; anchor jumps leave room for it. */
  --pill-height: 72px;
}

@media (max-width: 800px) {
  :root { --pill-height: 56px; }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pill-height) + 1.5rem); }
:target, [id] { scroll-margin-top: calc(var(--pill-height) + 1.5rem); }
body {
  background: var(--teal);
  color: var(--navy);
  font: 400 1.125rem/1.6 var(--sans);  /* step 3 — body = 18 px */
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ── Accessibility: skip + focus ── */
.skip {
  position: absolute; top: -40px; left: 1rem;
  background: var(--white); color: var(--navy);
  padding: 0.5rem 1rem; border-radius: 4px; z-index: 500;
}
.skip:focus { top: 1rem; outline: 3px solid var(--focus); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ── Floating pill nav ── */
.nav-wrap {
  position: fixed;
  top: 1.2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: calc(100% - 3rem);
  max-width: var(--max-content);
}
nav.site-nav {
  background: var(--white);
  border-radius: 999px;
  padding: 0.375rem 1.6rem;   /* v5: shrunk to keep pill ≈56 px with 44 px children */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 20px rgba(0,0,0,0.10);
}
.nav-brand { display: flex; align-items: center; gap: 0; color: var(--navy); }
.nav-logo {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-sep { width: 1px; height: 1.1rem; background: rgba(26,43,60,0.28); margin: 0 1rem; }
.nav-tag {
  font-size: 0.9rem;        /* v4i: one step below wordmark (1rem) */
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--navy);
  text-transform: uppercase;
}
.nav-cta {
  background: var(--navy);
  color: var(--white);
  border-radius: 999px;
  padding: 0.48rem 1.3rem;
  font-size: 0.78rem;       /* step 1 */
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}
.nav-cta:hover, .nav-cta:focus { opacity: 0.85; }

/* ── Swath-line motif, used under section tags and as the footer divider ── */
.motif-swath {
  display: block;
  width: 48px;
  height: 10px;
  margin-top: 0.55rem;
  opacity: 0.75;
}
.motif-swath path { stroke-width: 1; fill: none; stroke-linecap: round; }
.on-teal .motif-swath path { stroke: rgba(var(--cream),0.72); }
.on-pale .motif-swath path { stroke: rgba(26,43,60,0.42); }

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 2rem 3.5rem;
  /* v4h: bright centre lifted so the sub-line rests on the plainer teal below */
  background: radial-gradient(ellipse 110% 55% at 50% 15%,
                              var(--teal-inner) 0%,
                              var(--teal) 55%,
                              var(--teal-dark) 100%);
  position: relative;
  overflow: hidden;
}
.hero-tag {
  display: inline-block;
  border: 1px solid #7DA69A;   /* v4l item 2: bumped from #69988D to match Where ring on the lifted gradient */
  border-radius: 999px;
  padding: 0.42rem 1.05rem;
  font-size: 0.95rem;       /* step 2 (v4f) */
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--white);          /* v4l item 3 rule A: labels on plain teal land on white */
  text-transform: uppercase;
  margin-bottom: 2.4rem;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  line-height: 1.08;
  color: var(--white);
  max-width: 840px;
  margin: 0 auto 1.8rem;
  text-wrap: balance;
}
.hero-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.125rem;  /* step 3 */
  line-height: 1.6;
  color: var(--text-on-teal);   /* v4i: single cream token for all body on teal */
  max-width: 58ch;      /* v4h: 56-60 chars */
  margin: 0 auto 3rem;
}
.hero-actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}

/* ── Buttons ── */
.btn-primary {
  background: var(--white);
  color: var(--teal-dark);
  border: none; border-radius: 999px;
  padding: 0.82rem 2rem;
  font: 600 0.78rem var(--sans);   /* step 1 */
  letter-spacing: 0.04em;
  cursor: pointer; transition: opacity 0.2s;
  display: inline-block;
}
.btn-primary:hover, .btn-primary:focus { opacity: 0.88; }
.btn-outline {
  /* v5 phase 0: filled pale pill, weight 600 (bold); reads as a piece of the mission panel placed in the hero. */
  background: var(--pale);
  color: var(--navy);
  border: none;
  border-radius: 999px;
  padding: 0.48rem 1.3rem;         /* matches .nav-cta header pill */
  font: 600 0.78rem var(--sans);   /* step 1, matches .nav-cta */
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s;
  display: inline-block;
}
.btn-outline:hover, .btn-outline:focus {
  background: var(--pale-dark);
}
.btn-dark {
  background: var(--navy);
  color: var(--white);
  border: none; border-radius: 999px;
  padding: 0.9rem 2.2rem;
  font: 600 0.78rem var(--sans);   /* step 1 */
  letter-spacing: 0.04em;
  cursor: pointer; transition: opacity 0.2s;
  display: inline-block;
}
.btn-dark:hover, .btn-dark:focus { opacity: 0.85; }

/* ── Pale panel (Mission) ── */
.pale-panel-wrap { padding: 3.4rem 0; }
.pale-panel {
  background: var(--pale);
  margin: 0 auto;
  max-width: var(--max-content);
  border-radius: 1.5rem;
  padding: 5rem 4rem;
  position: relative;
}
.pale-panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.pale-panel-inner-single {
  max-width: 920px;
  margin: 0 auto;
}
.pale-panel-inner-single .panel-body { max-width: 68ch; }
.pale-panel-inner-single .panel-body p + p { margin-top: 1rem; }

/* Mission statement: serif, matched to .where-statement so the two set-apart
   statements read as a pair. v6b: both at step 3 serif with extra air + rule.
   Max-width widened to 70ch so the "as clear ..." line (joined via NBSP) stays
   whole on one line and the break lands at ", as" — never at "as" itself. */
.mission-statement {
  font-family: var(--serif);
  font-size: 1.4rem;               /* v6e: step 4; sized so "Our mission is to put Earth observation to work beside the field survey," fits one line in the 772 px panel column, and matches .where-statement */
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
  margin-top: 2.2rem !important;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(26,43,60,0.18);
  max-width: 70ch;
  text-wrap: balance;
}

/* v6: Where invitation set apart as a serif statement, white on teal.
   Mirrors .mission-statement but inverted for the teal ground. */
.where-statement {
  font-family: var(--serif);
  font-size: 1.4rem;               /* v6e: step 4; sized so "If you have a site in mind, we would be glad to hear from you." fits one line in the 649 px right column, and matches .mission-statement */
  font-weight: 400;
  line-height: 1.3;
  color: var(--white);
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--cream),0.26);
  max-width: none;
  text-wrap: normal;
}
.panel-tag {
  display: inline-block;
  border: 1px solid #A6AE9C;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  font-size: 0.95rem;       /* step 2 (v4f) */
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(0,0,0,0.68);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.panel-title {
  font-family: var(--serif);
  font-size: 1.75rem;       /* step 5 */
  font-weight: 400;         /* v4i: aligned with every other section title */
  color: var(--navy);
  line-height: 1.18;
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  text-wrap: balance;
  max-width: 48ch;          /* v6: breaks at ", beside" with balance */
}
.panel-body {
  font-size: 1.125rem;      /* step 3 (body) */
  color: var(--text-on-pale);
  line-height: 1.6;
  max-width: 60ch;
}
.panel-body p + p { margin-top: 1rem; }

/* ── Goal list (now in Mission right column) ── */
.goal-list { display: flex; flex-direction: column; gap: 1.8rem; }
.goal-item { display: flex; gap: 1rem; align-items: flex-start; }
.goal-icon {
  width: 2.4rem; height: 2.4rem; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--rule-on-pale);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-dark);
  margin-top: 0.1rem;
}
.goal-title {
  font-weight: 600; font-size: 0.95rem; color: var(--navy);
  margin-bottom: 0.3rem;
}
.goal-desc {
  font-size: 0.92rem; color: var(--text-on-pale); line-height: 1.65;
}

/* ── Teal section (card grid; two cards for pillars) ── */
.teal-section { padding: 3.4rem 1.5rem; }
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.5rem;
}
.section-tag {
  display: inline-block;
  border: 1px solid #69988D;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  font-size: 0.95rem;       /* step 2 (v4f) */
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-on-teal);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.section-title {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1.14;
  text-wrap: balance;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.section-lead {
  font-size: 1rem;
  color: var(--text-on-teal);
  line-height: 1.75;
}

.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 980px;
  margin: 0 auto;
}
.app-card {
  background: var(--teal-card);
  border-radius: 1.2rem;
  padding: 2.8rem 2.4rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(255,255,255,0.06);
}
.card-tag {
  display: inline-block;
  border: 1px solid #69988D;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  font-size: 0.95rem;       /* step 2 (v4f) */
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-on-teal);
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 0.5rem;
}
.card-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.22;
  margin-top: 0.2rem;
}
.card-def {
  font-size: 0.92rem;
  color: var(--text-on-teal);
  line-height: 1.7;
  margin-bottom: 0.6rem;
}
.card-para {
  font-size: 1.125rem;      /* step 3 (body) */
  color: var(--white);      /* v4l item 3 rule A: body on plain teal lands on white */
  line-height: 1.6;
  max-width: 32em;          /* ≈55-60 chars at step 3 */
}
.card-para + .card-para { margin-top: 0.9rem; }
.card-rule {
  border: 0;
  height: 1px;
  background: rgba(var(--cream),0.30);
  margin: 1.6rem 0;         /* more air around the rule */
  width: 100%;
}
.card-example {
  font-size: 0.95rem;       /* step 2 (secondary) */
  color: var(--text-mute-on-teal);
  line-height: 1.5;
  max-width: 32em;
}
.card-sub {
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  margin-top: 0.4rem;
}
.card-list {
  list-style: none;
  padding: 0;
  margin: 0.1rem 0 0;
}
.card-list li {
  font-size: 0.88rem;
  color: var(--text-mute-on-teal);
  line-height: 1.6;
  padding: 0.25rem 0 0.25rem 1rem;
  position: relative;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.75em;
  width: 0.45rem; height: 1px;
  background: rgba(255,255,255,0.42);
}

/* ── Approach: open columns on a pale panel (v4b: no cards) ── */
.how-section { padding: 3.75rem 0; }
.how-section .section-header {
  max-width: 720px;
  margin: 0 auto 2.6rem;
}
.how-section .section-tag {
  border: 1px solid #A6AE9C;
  color: rgba(0,0,0,0.68);
}
.how-section .section-title { color: var(--navy); }
.how-section .motif-swath path { stroke: rgba(26,43,60,0.42); }
.how-panel {
  background: var(--pale);
  margin: 0 auto;
  max-width: var(--max-content);
  border-radius: 1.5rem;
  padding: 4rem 4rem 3.6rem;
  position: relative;
}
.how-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  max-width: 960px;
  margin: 0 auto;
}
.how-card {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(26,43,60,0.20);
  border-radius: 0;
  padding: 1.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.how-num {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: rgba(26,43,60,0.55);
  line-height: 1;
}
.how-title {
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin-top: 0.2rem;
}
.how-desc {
  font-size: 1.125rem;
  color: var(--text-on-pale);
  line-height: 1.6;
}

/* ── Our approach: title left, stacked list right (v4d) ── */
.approach-section { padding: 3.4rem 1.5rem; }
.approach-panel {
  max-width: var(--max-content);
  margin: 0 auto;
  background: var(--pale);
  border-radius: 2rem;
  padding: 4rem 3.5rem;
}
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}
.approach-head { position: sticky; top: 6.5rem; }
.approach-head .section-tag { color: var(--navy); border-color: #A6AE9C; }
.approach-head .motif-swath path { stroke: rgba(26,43,60,0.42); stroke-width: 1; fill: none; stroke-linecap: round; }
.approach-head .section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;       /* step 5 */
  line-height: 1.15;
  color: var(--navy);
  margin-top: 1.2rem;
  text-wrap: balance;
  max-width: 17ch;          /* v4i: forces break at "to" */
}
.approach-list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.approach-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
}
.approach-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;       /* step 5 */
  line-height: 1;
  color: var(--teal);
}
.approach-body {}
.approach-item-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.4rem;        /* step 4 */
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 0.55rem;
}
.approach-text {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.125rem;      /* step 3 */
  line-height: 1.6;
  color: var(--navy);
  max-width: 60ch;
}
@media (max-width: 800px) {
  .approach-panel { padding: 2.5rem 1.5rem; margin: 0 1rem; border-radius: 1.5rem; }
  .approach-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .approach-head { position: static; }
  .approach-head .section-title { max-width: none; }
  .approach-item { grid-template-columns: 2.6rem 1fr; gap: 0.9rem; }
  .approach-num { font-size: 1.4rem; }
  .approach-item-title { font-size: 1.2rem; }
  .approach-text { font-size: 1.0625rem; }
  .where-statement { font-size: 1.2rem; overflow-wrap: anywhere; }    /* v6e: step 4 mobile scaled down to match desktop step reduction; matches .mission-statement; overflow-wrap keeps sentence 1's NBSP triplet from overflowing the narrow column at 390 */
}


/* ── Where we work: title-beside-content on page teal (v4g restored) ── */
.where-section {
  padding: 3.4rem 1.5rem;
  background: var(--teal);
}
.where-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;    /* v6d: restored to v6a values; statement lines set by hand via NBSPs and <br> so the right column width no longer drives phrasing */
  gap: 4rem;
  align-items: start;
}
.where-head { position: sticky; top: 6.5rem; }
.where-head .section-tag {
  color: var(--text-on-teal);
  border: 1px solid #69988D;
  background: transparent;
}
.where-head .motif-swath path {
  stroke: rgba(var(--cream),0.55);
  stroke-width: 1; fill: none; stroke-linecap: round;
}
.where-head .section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;       /* step 5 */
  line-height: 1.15;
  color: var(--white);
  margin-top: 1.2rem;
  text-wrap: balance;
  max-width: 14ch;
}
.where-content {}
.where-body {
  font-weight: 400;
  font-size: 1.125rem;      /* step 3 (body) */
  color: var(--white);      /* v4l item 3 rule A: body on plain teal lands on white */
  line-height: 1.6;
  margin: 0 0 1.2rem;
  max-width: 60ch;
}
.where-body + .where-body { margin-top: 1.2rem; }
.where-notes {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--cream),0.26);
  max-width: 60ch;
}
.where-notes p {
  font-size: 0.95rem;       /* step 2 */
  color: var(--text-mute-on-teal);
  line-height: 1.5;
}

/* ── Pale CTA panel (Study) ── */
.cta-panel-wrap { padding: 3.4rem 0; }
.cta-panel {
  background: var(--pale);
  margin: 0 auto;
  max-width: var(--max-content);
  border-radius: 1.5rem;
  padding: 5rem 4rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  position: relative;
}
.cta-title {
  font-family: var(--serif);
  font-size: 1.75rem;       /* step 5 */
  font-weight: 400;         /* v4i: aligned with every other section title */
  color: var(--navy);
  line-height: 1.16;
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  text-wrap: balance;
  max-width: 22ch;          /* v4i: forces break at "available" */
}
.cta-body {
  font-size: 1.125rem;      /* step 3 (body) */
  color: var(--text-on-pale);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 48ch;
}
.cta-image-box {
  background: rgba(26,43,60,0.05);
  border-radius: 1rem;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.cta-image-box svg { width: 100%; height: 100%; display: block; }

/* ── Teal contact band ── */
.contact-band {
  padding: 3.4rem 1.5rem;
  background: var(--teal-dark);
  text-align: center;
}
.contact-inner { max-width: 580px; margin: 0 auto; }
.contact-title {
  font-family: var(--serif);
  font-size: 1.75rem;       /* step 5 */
  font-weight: 400;
  color: var(--white);
  line-height: 1.16;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.contact-title { margin-bottom: 2rem; }

/* ── Footer ── */
footer.site-footer {
  background: var(--teal-deeper);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--white);
}
.footer-divider {
  display: block;
  width: 60px;
  height: 10px;
  margin: 0 auto 1rem;
  opacity: 0.6;
}
.footer-divider path {
  stroke: rgba(var(--cream),0.55);
  stroke-width: 1; fill: none; stroke-linecap: round;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 1rem;
}
.footer-logo {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--white);           /* v4i: title tone */
  text-transform: uppercase;
}
.footer-sep { width: 1px; height: 1.1rem; background: rgba(var(--cream),0.28); margin: 0 1rem; }
.footer-tag {
  font-size: 0.9rem;             /* v4i: matches nav-tag */
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--text-on-teal);
  text-transform: uppercase;
}
.footer-links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.footer-links a {
  color: var(--text-on-teal);
  font-size: 0.95rem;            /* step 2 */
  transition: color 0.2s;
}
.footer-links a:hover, .footer-links a:focus { color: var(--white); text-decoration: underline; }
.footer-note {
  /* v5: 14 px floor on the footnote line — read as fine print, still ≥ 14 px. */
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-faint-on-teal);
  letter-spacing: 0.03em;
}
.footer-note + .footer-note { margin-top: 0.25rem; }

/* ── Contact + Notice page scaffold ── */
main.page {
  padding: 7rem 1.5rem 3rem;
  min-height: 100vh;
  background: var(--teal);
  color: var(--white);
}
.page-inner { max-width: 760px; margin: 0 auto; }
.page-tag {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.95rem;        /* v5: lifted to step 2 — matches section-tag */
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.page-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.12;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.page-lede {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  margin-bottom: 2.4rem;
  max-width: 60ch;
}

/* ── Contact form (pale panel on teal page) ── */
.form-panel {
  background: var(--pale);
  color: var(--navy);
  border-radius: 1.5rem;
  padding: 3rem 2.6rem;
  margin-bottom: 2rem;
}
.form-field { margin-bottom: 1.4rem; }
.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;       /* step 2 (sentence-case labels) */
  margin-bottom: 0.4rem;
  color: var(--navy);
}
.form-field .hint { font-weight: 400; color: rgba(26,43,60,0.72); margin-left: 0.3em; }
.form-field input[type=text],
.form-field input[type=email],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--white);
  border: 1px solid rgba(26,43,60,0.18);
  border-radius: 999px;
  font: 400 1.125rem var(--sans);  /* step 3 */
  color: var(--navy);
}
.form-field textarea {
  border-radius: 1rem;
  resize: vertical;
  min-height: 7rem;
  line-height: 1.6;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--teal-dark);
  outline-offset: 1px;
  border-color: var(--teal-dark);
}
.form-field .err {
  display: block;
  color: #B33;
  font-size: 0.95rem;       /* step 2 */
  margin-top: 0.35rem;
  min-height: 1em;
}
.form-field .consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;       /* step 2 */
  font-weight: 400;
  color: var(--text-on-pale);
  line-height: 1.5;
}
.form-field .consent input {
  margin-top: 0.25rem;
  width: 1rem; height: 1rem;
  accent-color: var(--teal-dark);
}
.form-honeypot {
  position: absolute;
  left: -5000px; width: 1px; height: 1px;
  overflow: hidden;
}
.form-submit {
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 0.9rem 2.2rem;
  font: 600 0.875rem var(--sans);  /* v5: 14 px floor */
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.form-submit:hover, .form-submit:focus { opacity: 0.85; }
.form-feedback {
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.8rem;
  font-size: 0.95rem;       /* step 2 */
  line-height: 1.5;
  display: none;
}
.form-feedback.ok {
  display: block;
  background: rgba(31,107,94,0.1);
  color: var(--teal-dark);
  border: 1px solid rgba(31,107,94,0.25);
}
.form-feedback.err {
  display: block;
  background: rgba(179,51,51,0.08);
  color: #8E2A2A;
  border: 1px solid rgba(179,51,51,0.25);
}
.contact-tail {
  font-size: 0.95rem;       /* step 2 */
  color: rgba(255,255,255,0.95);
  text-align: center;
  margin-top: 1rem;
}
.contact-tail code { color: var(--white); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Notice page ── */
.notice-content {
  background: var(--pale);
  color: var(--navy);
  border-radius: 1.5rem;
  padding: 3rem 2.6rem;
}
.notice-content h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.4rem;        /* step 4 (card/item title) */
  line-height: 1.2;
  margin-top: 1.8rem;
  margin-bottom: 0.7rem;
  color: var(--navy);
}
.notice-content h2:first-child { margin-top: 0; }
.notice-content p {
  font-size: 1.125rem;      /* step 3 (body) */
  color: var(--text-on-pale);
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 62ch;
}
.notice-content a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.notice-content a:hover, .notice-content a:focus { text-decoration-thickness: 2px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .pale-panel { padding: 4rem 2.5rem; margin: 0 1.5rem; }
  .cta-panel { padding: 4rem 2.5rem; grid-template-columns: 1fr; margin: 0 1.5rem; }
  .cta-image-box { max-width: 460px; margin: 0 auto; width: 100%; }
  .how-panel { padding: 3rem 2.5rem; margin: 0 1.5rem; }
  .how-grid-3 { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 800px) {
  .pale-panel { padding: 3rem 1.5rem; margin: 0 1rem; }
  .pale-panel-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .card-grid-2 { grid-template-columns: 1fr; max-width: 480px; }
  .how-panel { padding: 2.6rem 1.5rem; margin: 0 1rem; }
  .how-grid-3 { grid-template-columns: 1fr; gap: 1.6rem; }
  .cta-panel { grid-template-columns: 1fr; padding: 3rem 1.5rem; gap: 2rem; margin: 0 1rem; }

  /* Type-scale mobile step-down (v4e) */
  body { font-size: 1.0625rem; }  /* step 3 mobile */
  .hero-tag,
  .section-tag,
  .panel-tag,
  .card-tag { font-size: 0.9rem; padding: 0.38rem 0.85rem; }  /* step 2 mobile (v4f) */
  .section-title { font-size: 1.4rem; }  /* step 5 → step 4 on mobile */
  .panel-title { font-size: 1.4rem; }
  .cta-title { font-size: 1.4rem; }
  .contact-title { font-size: 1.4rem; }
  .mission-statement { font-size: 1.2rem; }     /* v6e: step 4 mobile scaled down to match desktop step reduction; matches .where-statement */
  .mission-statement br { display: none; }      /* v6c: desktop-only forced comma break; mobile flows naturally */
  .card-title { font-size: 1.2rem; }
  .card p, .card-para { font-size: 1.0625rem; }
  .card-example { font-size: 0.9rem; }
  .hero-sub { font-size: 1.0625rem; }
  .where-body { font-size: 1.0625rem; }
  .where-notes p { font-size: 0.9rem; }
  .panel-body { font-size: 1.0625rem; }
  .cta-body { font-size: 1.0625rem; }
  .footer-note { font-size: 0.9rem; }
  .footer-links a { font-size: 0.9rem; }
  .notice-content h2 { font-size: 1.2rem; }
  .notice-content p { font-size: 1.0625rem; }
  .form-field label { font-size: 0.9rem; }
  .form-field input[type=text],
  .form-field input[type=email],
  .form-field select,
  .form-field textarea { font-size: 1.0625rem; }

  nav.site-nav { padding: 0.65rem 1rem; }
  .nav-tag, .nav-sep { display: none; }
  .nav-logo { font-size: 0.95rem; letter-spacing: 0.16em; }
  main.page { padding: 6rem 1rem 2.5rem; }
  .form-panel, .notice-content { padding: 2.2rem 1.6rem; }
  .form-field input[type=text],
  .form-field input[type=email],
  .form-field select { border-radius: 1.2rem; }

  /* Where panel on mobile — stacks title first */
  .where-section { padding: 2.6rem 1rem; }
  .where-panel { padding: 2.5rem 1.5rem; margin: 0; border-radius: 1.5rem; }
  .where-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .where-head { position: static; }
  .where-head .section-title { max-width: none; }
  /* v4g section gaps at mobile — proportional tightening */
  .pale-panel-wrap { padding-block: 2.6rem; }
  .teal-section { padding: 2.6rem 1rem; }
  .approach-section { padding: 2.6rem 1rem; }
  .cta-panel-wrap { padding-block: 2.6rem; }
  .contact-band { padding: 2.6rem 1rem; }
}

@media (max-width: 440px) {
  .hero { padding: 7rem 1rem 3rem; }
  .teal-section { padding: 2.6rem 1rem; }
  .where-section { padding: 2.6rem 1rem; }
  .how-section { padding: 2.6rem 1rem; }
  .contact-band { padding: 2.6rem 1rem; }
}

/* ── Prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01s !important;
    animation-duration: 0.01s !important;
  }
}

/* ────────────────────────────────────────────────
   v5: Print stylesheet — A4-friendly reader view.
   ──────────────────────────────────────────────── */
@media print {
  :root { --pill-height: 0px; }
  html, body {
    background: #FFFFFF !important;
    color: var(--navy) !important;
    font-size: 11pt;
  }
  .nav-wrap, .site-nav, .hero-actions, .btn-primary, .btn-outline, .btn-dark, .cta-panel .btn-primary, .contact-band .btn-primary { display: none !important; }
  .site-footer { background: #FFFFFF !important; color: var(--navy) !important; padding: 1rem 0 !important; }
  .site-footer * { color: var(--navy) !important; opacity: 1 !important; }
  .hero, .teal-section, .where-section, .contact-band, .pillar-section, section[class*="on-teal"] {
    background: #FFFFFF !important;
    color: var(--navy) !important;
    padding: 1.2rem 0 !important;
    page-break-inside: avoid;
  }
  .hero-tag, .section-tag, .card-tag, .panel-tag, .hero-title, .section-title, .mission-statement, .card-para, .where-body, .footer-note {
    color: var(--navy) !important;
    background: transparent !important;
  }
  .pale-panel, .cta-panel, .how-section { background: #FFFFFF !important; box-shadow: none !important; border: 1px solid rgba(26,43,60,0.12); }
  .teal-card, .card { background: #FFFFFF !important; border: 1px solid rgba(26,43,60,0.12); color: var(--navy) !important; }
  a { color: var(--navy) !important; text-decoration: underline; }
  * { box-shadow: none !important; }
  .motif-swath, .footer-divider, .hero-attractor { display: none !important; }
  h1, h2, h3 { page-break-after: avoid; }
}

/* ────────────────────────────────────────────────
   v5 phase 1: touch-target floor (44 x 44 px) + text ≥ 14 px.
   Hit area expanded invisibly; visual proportions preserved.
   ──────────────────────────────────────────────── */
.nav-cta, .btn-primary, .btn-outline, .btn-dark, .btn-pale {
  font-size: 0.875rem;        /* 14 px floor — accessibility, not type scale */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button[type="submit"], .form-submit {
  min-height: 44px;
}
.nav-brand {
  min-height: 44px;           /* wordmark hit area inside the pill */
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
}
.footer-links {
  gap: 0.25rem;               /* keeps 8 px between tappable targets */
}
.skip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}