/* ============================================================
   patina-brand.css — Patina Education platform styles

   Used by: patina-home.html, patina-mission.html,
            patina-citizenship.html,
            patina-digital-skills.html

   NOT shared with the existing citizenship practice pages.
   Source of truth: BRAND.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── Brand tokens ───────────────────────────────────────── */
:root {
  /* Palette — direct from BRAND.md */
  --patina-green:  #2D7A5E;
  --patina-dark:   #1F5741;
  --light-patina:  #9FE1CB;
  --patina-tint:   #E8F2EE;
  --raw-copper:    #8A6A30;
  --copper-light:  #FAC775;
  --copper-tint:   #FDF6E8;
  --parchment:     #F7F5F0;
  --deep-harbor:   #1A2820;
  --terracotta:    #D85A30;

  /* Text roles */
  --ink:           #1A2820;   /* Deep Harbor — primary text */
  --ink-mid:       #2C3B32;   /* warm green-gray — secondary text, darkened for readability */
  --ink-soft:      #4F6357;   /* muted — captions, labels, darkened from original */

  /* Structure */
  --border:        #D8D2C8;
  --border-green:  #AACFC0;

  /* Shadows — green-tinted for brand warmth */
  --shadow-sm: 0 1px 3px rgba(26,40,32,0.07), 0 0 0 1px rgba(26,40,32,0.04);
  --shadow:    0 2px 8px rgba(26,40,32,0.10), 0 0 0 1px rgba(26,40,32,0.04);
  --shadow-md: 0 4px 16px rgba(26,40,32,0.13), 0 0 0 1px rgba(26,40,32,0.05);

  /* Typography */
  --font-wordmark: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-display:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --radius:    14px;
  --radius-sm: 8px;
  --tap:       56px;
  --container: 920px;
  --wide:      1100px;

  /* ── Readability / accessibility scale (2026-06-30 mobile pass) ──────────
     One shared type & spacing scale so the student, volunteer, and teacher
     hubs read at the same comfortable level on a phone. Floors: body ≥16px,
     important card text ≥15px, paragraph line-height ~1.5–1.65, tap ≥44px.
     The standalone volunteer PORTAL (separate site) stays larger by design. */
  --fs-body:        18px;   /* base body copy */
  --fs-card-title:  19px;   /* card / module titles */
  --fs-card-desc:   16px;   /* card / module descriptions — readable floor */
  --fs-small:       15px;   /* secondary captions, sub-labels, helper text */
  --fs-eyebrow:     12px;   /* uppercase eyebrows & micro-labels (floor) */
  --lh-body:        1.65;   /* paragraphs */
  --lh-snug:        1.55;   /* tighter blocks (card descriptions) */
  --card-pad-y:     20px;   /* card vertical padding */
  --card-pad-x:     22px;   /* card horizontal padding */
  --btn-pad-x:      28px;   /* primary button side padding */
  --space-mobile:   44px;   /* mobile section rhythm */
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  /* Green-tint → parchment gradient site-wide: green band at the top of every
     page fading into the warm parchment. Length-anchored (not
     background-attachment:fixed, which janks on mobile). Hero sections with
     their own background sit on top of this; flat-parchment pages get the wash. */
  background-color: var(--parchment);
  background-image: linear-gradient(180deg, var(--patina-tint) 0%, var(--parchment) 520px);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ── Layout ─────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-wide {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Navigation ─────────────────────────────────────────── */
.patina-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--parchment);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border), 0 2px 10px rgba(26,40,32,0.05);
}
.patina-nav-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  gap: 20px;
}

/* Wordmark */
.patina-wordmark {
  font-family: var(--font-wordmark);
  font-size: 19px;
  font-weight: 400;
  color: var(--deep-harbor);
  text-decoration: none;
  letter-spacing: 0.015em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}
.patina-wordmark .wm-patina { color: var(--patina-green); }
.patina-wordmark .wm-sep {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--raw-copper);
  margin: 0 7px;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.patina-wordmark .wm-edu { color: var(--deep-harbor); }

/* Nav links */
.patina-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.patina-nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-mid);
  text-decoration: none;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  display: block;
}
.patina-nav-links a:hover {
  background: var(--patina-tint);
  color: var(--patina-green);
}
.patina-nav-links a.active {
  color: var(--patina-green);
  background: var(--patina-tint);
  font-weight: 600;
}

/* Language selector — auto-injected into .patina-nav-inner by js/i18n.js */
.patina-nav-inner .lang-select {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--deep-harbor);
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-height: 44px;
  max-width: 46vw;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-appearance: menulist;
  appearance: menulist;
}
.patina-nav-inner .lang-select:hover { border-color: var(--patina-green); }
.patina-nav-inner .lang-select:focus-visible {
  outline: 2px solid var(--patina-green);
  outline-offset: 1px;
}

/* Small screens: the wordmark + 3 links stop fitting on one row below ~500px.
   Rather than let them wrap raggedly (or hide 3 short links behind a hamburger),
   stack into two tidy rows — wordmark centered on top, links centered below. */
@media (max-width: 600px) {
  .patina-nav-inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .patina-nav-links {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2px;
  }
}

/* ── Hero — full (home page) ───────────────────────────── */
.hero-full {
  position: relative;
  padding: 52px 0 32px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}
/* Top accent — echoes the "Three steps" timeline gradient (copper → green) so the
   warm copper brand color appears deliberately, as a repeated motif. */
.hero-full::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--raw-copper) 0%, var(--copper-light) 32%, var(--light-patina) 64%, var(--patina-green) 100%);
}
.hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
/* English headline */
.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--deep-harbor);
  margin: 0 0 8px;
}
/* Spanish headline — equal visual weight */
.hero-heading-es {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--patina-green);
  margin: 0 0 28px;
}
/* Concrete product specs line */
.hero-stats {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 36px;
  line-height: 1.6;
}
.hero-stats strong {
  color: var(--ink);
  font-weight: 600;
}
/* ── [i18n] Multilingual reserved classes ───────────────────
   These classes (.hero-heading-es, .hero-tagline-es,
   .bc-pullquote-es, .step-title-es) are intentionally kept
   for future language support. They are not currently used
   in any template. When a translation system is added,
   populate these via JS or a server-side rendering layer.
   ─────────────────────────────────────────────────────────── */

/* Keep for compatibility — hidden by default */
.hero-tagline {
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 600;
  color: var(--ink-mid);
  margin: 0 0 6px;
  line-height: 1.45;
}
.hero-tagline-es {
  font-size: 16px;
  font-weight: 600;
  color: var(--patina-green);
  margin: 0 0 28px;
  line-height: 1.5;
}
.hero-body {
  font-size: 17px;
  color: var(--ink-mid);
  max-width: 500px;
  line-height: 1.75;
  margin: 0 0 36px;
}

/* Hero CTA group */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--patina-green);
  color: #fff;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  padding: 0 28px;
  min-height: var(--tap);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(45,122,94,0.30);
  transition: background 0.13s, box-shadow 0.13s;
  border: none;
  cursor: pointer;
  letter-spacing: -0.01em;
}
.btn-primary:hover {
  background: var(--patina-dark);
  box-shadow: 0 4px 16px rgba(45,122,94,0.38);
}
.btn-primary:active { background: var(--patina-dark); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--ink-mid);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  padding: 0 20px;
  min-height: var(--tap);
  border-radius: var(--radius);
  text-decoration: none;
  border: 1.5px solid var(--border);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  cursor: pointer;
}
.btn-ghost:hover {
  border-color: var(--border-green);
  color: var(--patina-green);
  background: var(--patina-tint);
}

/* ── Hero — compact (section pages) ────────────────────── */
.hero-compact {
  padding: 52px 0 44px;
  background: linear-gradient(180deg, var(--patina-tint) 0%, var(--parchment) 100%);
  border-bottom: 1px solid var(--border);
}
.hero-compact .hc-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--patina-green);
  margin: 0 0 12px;
}
.hero-compact h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--deep-harbor);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.hero-compact .hc-sub {
  font-size: 18px;
  color: var(--ink-mid);
  max-width: 540px;
  line-height: 1.65;
  margin: 0;
}

/* ── Page sections ──────────────────────────────────────── */
.section {
  padding: 60px 0;
}
.section + .section {
  border-top: 1px solid var(--border);
}
.section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 700;
  color: var(--deep-harbor);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.section-sub {
  font-size: 17px;
  color: var(--ink-mid);
  max-width: 520px;
  line-height: 1.7;
  margin: 0 0 44px;
}

/* ── Product cards ──────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px 22px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.13s;
  position: relative;
  overflow: hidden;
}

/* Top accent stripe */
.product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.product-card.pc-active::before  { background: var(--patina-green); }
.product-card.pc-copper::before  { background: var(--raw-copper); }

.product-card.pc-active {
  border-color: var(--border-green);
}
@media (hover: hover) {
  .product-card.pc-active:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--light-patina);
    transform: translateY(-2px);
  }
}

/* Icon container */
.pc-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.pc-active  .pc-icon { background: var(--patina-tint); color: var(--patina-green); }
.pc-copper  .pc-icon { background: var(--copper-tint); color: var(--raw-copper); }

/* Status label */
.pc-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 7px;
  display: block;
}
.pc-active .pc-status  { color: var(--patina-green); }
.pc-copper .pc-status  { color: var(--raw-copper); }

/* Title */
.pc-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--deep-harbor);
  margin: 0 0 10px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

/* Description */
.pc-desc {
  font-size: var(--fs-small);
  color: var(--ink-mid);
  line-height: 1.6;
  flex: 1;
  margin: 0 0 20px;
}

/* CTA line */
.pc-cta {
  font-size: var(--fs-small);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pc-active .pc-cta { color: var(--patina-green); }
.pc-copper .pc-cta { color: var(--raw-copper); }

/* Coming-soon badge */
.badge-soon {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--raw-copper);
  background: var(--copper-tint);
  border: 1px solid rgba(138,106,48,0.22);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 9px;
}

/* ── Brand story callout (dark panel) ───────────────────── */
.brand-callout {
  background: var(--deep-harbor);
  border-radius: var(--radius);
  padding: 52px 48px;
  position: relative;
  overflow: hidden;
}
/* Warm copper glow in the corner */
.brand-callout::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250,199,117,0.15) 0%, transparent 65%);
  pointer-events: none;
}
.bc-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--copper-light);
  margin: 0 0 20px;
  opacity: 0.75;
}
.bc-quote {
  font-family: var(--font-body);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  margin: 0 0 20px;
  letter-spacing: 0;
  max-width: 680px;
}
.bc-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bc-pullquote {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--light-patina);
  margin: 0;
}
.bc-pullquote-es {
  font-size: 15px;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  margin: 0;
}

/* ── Platform values grid ───────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 480px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 800px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}

.value-item {
  padding: 18px 20px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
@media (hover: hover) {
  .value-item:hover {
    background: var(--patina-tint);
    border-color: var(--light-patina);
    box-shadow: var(--shadow-md);
  }
  .value-item:hover .vi-icon { background: var(--patina-green); color: #fff; }
}
.vi-icon {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: var(--patina-tint);
  color: var(--patina-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: background 0.15s, color 0.15s;
}
.vi-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--deep-harbor);
  margin: 0 0 4px;
  display: block;
}
.vi-desc {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* ── Info cards (mission/about) ─────────────────────────── */
.info-stack > * + * { margin-top: 16px; }

.info-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--patina-green);
}
.info-card.ic-copper::before { background: var(--raw-copper); }

.ic-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--patina-green);
  margin: 0 0 12px;
}
.info-card.ic-copper .ic-eyebrow { color: var(--raw-copper); }
.info-card h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--deep-harbor);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.info-card p {
  font-size: 17px;
  color: var(--ink-mid);
  line-height: 1.72;
  margin: 0 0 14px;
}
.info-card p:last-child { margin-bottom: 0; }
.info-card p em {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 15px;
  display: block;
  margin-top: 6px;
  line-height: 1.6;
}

/* Pull quote inside info cards */
.pull-quote {
  border-left: 3px solid var(--patina-green);
  padding: 8px 0 8px 22px;
  margin: 20px 0;
}
.pull-quote p {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--deep-harbor);
  margin: 0 0 4px;
  font-style: normal;
}
.pull-quote cite {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: normal;
}

/* ── Notice box ─────────────────────────────────────────── */
.notice-box {
  background: var(--copper-tint);
  border: 1.5px solid rgba(138,106,48,0.25);
  border-left: 3px solid var(--raw-copper);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.65;
}
.notice-box .nb-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--raw-copper);
  display: block;
  margin-bottom: 4px;
}
.notice-box em {
  display: block;
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ── Practice links + groups (shared by the student / volunteer / teacher hubs)
   These layout + label classes live here (not inline per page) so every hub
   renders the same comfortable, tappable card. Per-hub accent color is the
   only thing the individual pages override. ──────────────────────────────── */
.practice-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.practice-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.practice-group-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--patina-green);
  margin: 0;
}
.practice-group-sub {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 0 0 2px;
  line-height: var(--lh-snug);
}
.practice-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.practice-link {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: var(--card-pad-y) var(--card-pad-x);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.13s, box-shadow 0.13s, background 0.13s;
  min-height: var(--tap);
}
/* Highlight on hover / tap: card turns green, icon fills green with a white symbol */
@media (hover: hover) {
  .practice-link:hover {
    background: var(--patina-tint);
    border-color: var(--light-patina);
    box-shadow: var(--shadow-md);
  }
  .practice-link:hover .pl-icon {
    background: var(--patina-green);
    color: #fff;
  }
}
.practice-link:active { background: var(--patina-tint); }
.practice-link:active .pl-icon {
  background: var(--patina-green);
  color: #fff;
}

.pl-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--patina-tint);
  color: var(--patina-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.13s, color 0.13s;
}
.pl-icon svg { width: 26px; height: 26px; }
.pl-body { flex: 1; min-width: 0; }
.pl-title {
  font-weight: 700;
  font-size: var(--fs-card-title);
  color: var(--deep-harbor);
  display: block;
  margin-bottom: 4px;
  line-height: 1.3;
}
.pl-desc {
  font-size: var(--fs-card-desc);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}
.pl-arrow {
  color: #bab4ac;
  flex-shrink: 0;
  transition: color 0.12s;
}
.practice-link:hover .pl-arrow { color: var(--patina-green); }

/* ── Placeholder page ───────────────────────────────────── */
.placeholder-section {
  padding: 80px 0;
  text-align: center;
}
.placeholder-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--copper-tint);
  color: var(--raw-copper);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
}
.placeholder-section h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 700;
  color: var(--deep-harbor);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.placeholder-section p {
  font-size: 17px;
  color: var(--ink-mid);
  max-width: 420px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

/* ── Disclaimer bar ─────────────────────────────────────── */
.disclaimer-bar {
  margin-top: 52px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.7;
}
.disclaimer-bar em { font-style: italic; }
.disclaimer-bar a { color: var(--patina-green); text-decoration: none; }
.disclaimer-bar a:hover { text-decoration: underline; }

/* ── Footer ─────────────────────────────────────────────── */
.patina-footer {
  background: var(--deep-harbor);
  padding: 52px 0 0;
  margin-top: 0;
}
.patina-footer-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}
.footer-brand .fb-wordmark {
  font-family: var(--font-wordmark);
  font-size: 20px;
  font-weight: 400;
  color: rgba(255,255,255,0.90);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.footer-brand .fb-wordmark .fw-green { color: var(--light-patina); }
.footer-brand .fb-tagline {
  font-size: 14px;
  font-style: italic;
  color: rgba(255,255,255,0.50);
  margin: 0 0 18px;
  line-height: 1.6;
  max-width: 300px;
}
.footer-brand .fb-disclaimer {
  font-size: 13px;
  color: rgba(255,255,255,0.38);
  line-height: 1.65;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.footer-nav a {
  font-size: 14px;
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  transition: color 0.12s;
  white-space: nowrap;
}
.footer-nav a:hover { color: var(--light-patina); }

.footer-bottom {
  max-width: var(--wide);
  margin: 36px auto 0;
  padding: 18px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.28);
}

/* ── Hero split layout (homepage) ──────────────────────── */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: center;
}
.hero-img-col {
  border-radius: var(--radius);
  overflow: hidden;
  height: 380px;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
.hero-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
@media (max-width: 820px) {
  .hero-split {
    grid-template-columns: 1fr;
  }
  /* Optimized hero image (~200KB) is now light enough to show on mobile.
     Render it as a short banner above the headline. */
  .hero-img-col {
    order: -1;
    height: 190px;
  }
}

/* ── Section photo (mission page) ───────────────────────── */
.section-photo {
  margin: 0 0 36px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.section-photo img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.section-photo figcaption {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 8px 4px 0;
  text-align: right;
}

/* ── Featured product card (homepage Citizenship) ──────── */
.featured-card {
  background: #fff;
  border: 2px solid var(--border-green);
  border-top: 4px solid var(--patina-green);
  border-radius: var(--radius);
  padding: 32px 30px 28px;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}
.fc-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--patina-green);
  margin: 0 0 10px;
  display: block;
}
.fc-title {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  color: var(--deep-harbor);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.fc-desc {
  font-size: 16px;
  color: var(--ink-mid);
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 520px;
}
.fc-modules {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
}
@media (max-width: 500px) {
  .fc-modules { grid-template-columns: 1fr; }
}
.fc-module-item {
  font-size: 15px;
  color: var(--ink-mid);
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.45;
}
.fc-module-item::before {
  content: '→';
  color: var(--patina-green);
  font-weight: 600;
  flex-shrink: 0;
  font-size: 13px;
}

/* Featured-card CTA — a text link, not a second green pill (the hero already owns
   the primary green button). The whole card is the link; this is its affordance. */
.fc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--patina-green);
  letter-spacing: -0.01em;
}
.fc-cta svg { transition: transform 0.14s ease; }
@media (hover: hover) {
  .featured-card { transition: box-shadow 0.15s, transform 0.13s, border-color 0.15s; }
  .featured-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--light-patina);
  }
  .featured-card:hover .fc-cta svg { transform: translateX(3px); }
}

/* ── How it works — 3 steps ─────────────────────────────── */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 600px) {
  .steps-row { grid-template-columns: 1fr; gap: 16px; }
}
.step-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--patina-green);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--deep-harbor);
  margin: 0;
  line-height: 1.3;
}
.step-title-es {
  font-size: 14px;
  font-weight: 600;
  color: var(--patina-green);
  margin: 0;
  line-height: 1.3;
}
.step-desc {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* ── Coming-soon bar (minimal) ──────────────────────────── */
.coming-soon-bar {
  padding: 18px 20px;
  background: var(--parchment);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.6;
}
.coming-soon-bar strong {
  font-weight: 600;
  color: var(--ink-mid);
}
.coming-soon-bar a {
  color: var(--ink-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.coming-soon-bar a:hover { color: var(--patina-green); border-color: var(--patina-green); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-full { padding: 52px 0 32px; }
  .section { padding: 44px 0; }
  .brand-callout { padding: 36px 24px; }
  .patina-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  .patina-nav-links a {
    font-size: 14px;
    padding: 8px 10px;
  }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .btn-primary, .btn-ghost { width: 100%; justify-content: center; }
}

/* ── Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; transform: none !important; }
}

/* ── Focus ──────────────────────────────────────────────── */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--patina-green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Patina "hover" interaction for icon cards (site-wide, canonical) ==========
   On hover the card background AND its icon sweep copper -> verdigris in tandem
   (~1.5s). Rest = finished green icon on a WHITE chip. The homepage hero "vi-icon"
   set re-draws (carries .ln/.f/.w1-3/.pop + pathLength + per-fill --g); any other
   currentColor line-icon (pc-icon, pl-icon) gets the lighter copper->green colour
   sweep with zero path rewrites. Reduced-motion / touch keeps the static green
   hover from the rules above. See patina-activities-proto/BRAND_TRANSFORMATION.md. */
.vi-icon { width: 56px; height: 56px; border-radius: 13px; }
.vi-icon, .pc-icon, .pl-icon { background: #fff; box-shadow: 0 1px 4px rgba(26,40,32,.10); }
.vi-icon .ln  { stroke-dasharray: 1; stroke-dashoffset: 0; }
.vi-icon .f   { fill: var(--g); transform-box: fill-box; transform-origin: center; }
.vi-icon .pop { transform-box: fill-box; transform-origin: center; }
@keyframes patinaCardBg    { from { background-color:#EAD7C2; border-color:#DCC0A0; } to { background-color:#E3F0EA; border-color:#AACFC0; } }
@keyframes patinaIconColor { from { color:#A35E2C; } to { color:#1F5741; } }
@keyframes patinaDraw      { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes patinaStroke    { from { stroke:#A35E2C; } to { stroke:#1F5741; } }
@keyframes patinaBloom     { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
@keyframes patinaFill      { from { fill:#C57A42; } to { fill:var(--g); } }
@keyframes patinaPop       { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .value-item:hover, .product-card:hover, .practice-link:hover { animation: patinaCardBg 1.5s ease both; }
  .value-item:hover .vi-icon,
  .product-card:hover .pc-icon,
  .practice-link:hover .pl-icon { background:#fff; animation: patinaIconColor 1.5s ease both; }
  /* premium draw-on icons (homepage hero) */
  .value-item:hover .vi-icon .ln { animation: patinaDraw .6s ease both, patinaStroke .5s ease both; }
  .value-item:hover .vi-icon .f  { animation: patinaBloom .4s ease both, patinaFill .5s ease both; }
  .value-item:hover .vi-icon .w1 { animation-delay: 0s, .5s; }
  .value-item:hover .vi-icon .w2 { animation-delay: .12s, .75s; }
  .value-item:hover .vi-icon .w3 { animation-delay: .24s, 1s; }
  .value-item:hover .vi-icon .pop{ animation: patinaPop .4s ease 1.1s both; }
}