/*
  Global stylesheet — single source of truth for the site.

  Structure:
    1) Reset and base
    2) Design tokens (:root) — palette and typography are owned by the
       `brand-guidelines` skill. Spacing, radii, shadows, motion, and layout
       tokens are owned here.
    3) Layout primitives
    4) Components (site-wide reusable primitives only — page-specific
       styles live with their page builds, not here)
    5) Utilities
*/

/* ===== 1) Reset and base ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* The CMS nav ships a mobile drawer: a position:fixed panel parked off-screen to
     the right with transform: translateX(360px). Chromium ignores it when working
     out scroll width, but iOS Safari lets it pan the whole page sideways, which is
     the horizontal overflow reported on phones. `clip` stops that WITHOUT creating
     a scroll container, so the sticky header keeps working — `overflow-x: hidden`
     here would break it. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 2) Design tokens ===== */
/* Palette and typography are written by the `brand-guidelines` skill from
   `build-assets/0-the-brand/tokens.json`. Spacing, radii, shadows, and
   transitions are owned here. */
:root {
  /* Palette (brand-guidelines) */
  --color-bg: #fff7f4;
  --color-surface: #ffffff;
  --color-surface-soft: #fdeaf0;
  --color-text: #241a22;
  --color-text-soft: #6f6270;
  --color-primary: #e0175f;
  --color-primary-dark: #ae1049;
  --color-primary-light: #ffd8e4;
  --color-accent: #8c1240;
  --color-focus: #e0175f;

  /* Typography (brand-guidelines) */
  --font-heading: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(60, 64, 67, 0.12);
  --shadow-md: 0 4px 14px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;

  /* Layout */
  --container-max: 72rem;

  /* Aesthetic dials — the `design-system` skill SETS these per brand to diverge
     the look (sharp vs soft, flat vs shadowed, square vs pill). Defaults below are
     a soft/rounded baseline; a brand's design stage should deliberately override
     them so two brands don't look like the same template reskinned. */
  --logo-height: 2.75rem;    /* prominent by default — the logo is a brand asset, not chrome */
  --logo-max-width: 22rem;   /* generous, so wide wordmarks stay tall (not width-starved) */
  --header-bg: var(--color-surface);   /* white — verified the logo reads cleanly on it */
  --header-fg: var(--color-text);      /* header text/nav colour — flips for a coloured band */
  --btn-radius: var(--radius-pill);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
  --chip-radius: var(--radius-pill);
}

/* Logo grows on wider screens — override the dial at the breakpoint, never per-page. */
@media (min-width: 1024px) {
  :root { --logo-height: 3.5rem; }
}

/* ===== 3) Layout primitives ===== */
.container {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.section {
  padding: var(--space-10) 0;
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== 4) Components ===== */

/* Site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The header logo is an <img src="{{logo.src}}"> whose REAL file is injected by the CMS
   at upload — its aspect ratio is unknown at build time. HEIGHT is the primary driver
   (a generous --logo-height), so every logo renders at a consistent, prominent height
   regardless of ratio; --logo-max-width is a generous, viewport-relative safety cap that
   only clamps a very wide logo on small screens (it then scales down proportionally, never
   distorts). Never pin width AND height. Tune the dials per brand — never a per-page size. */
.site-logo img {
  height: auto;
  width: auto;
  max-height: var(--logo-height);
  max-width: min(var(--logo-max-width, 22rem), 55vw);
  object-fit: contain;
}

.site-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.site-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* CMS-rendered menus — `{{menu.navigation}}` and `{{menu.footer}}` expand to
   <ul class="canvas-navigation-menu"> / <ul class="canvas-footer-menu"> with
   <li><a> children. Style the generated classes directly. */

.canvas-navigation-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.canvas-navigation-menu > li {
  margin: 0;
}

.canvas-navigation-menu a {
  color: var(--header-fg);
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.canvas-navigation-menu a:hover,
.canvas-navigation-menu a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.canvas-footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

/* Footers can carry many links. With 8+ items, flow them into responsive columns
   (auto-fill grid) instead of one long, sprawling wrapping row — multi-column on wide
   screens, collapsing toward a single column on mobile. Short footer menus keep the
   inline row above. Where :has() is unsupported it harmlessly stays the flex row. */
.canvas-footer-menu:has(> li:nth-child(8)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  align-items: start;
  gap: var(--space-2) var(--space-5);
}

.canvas-footer-menu > li {
  margin: 0;
}

.canvas-footer-menu a {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.canvas-footer-menu a:hover,
.canvas-footer-menu a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--color-primary);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-text-soft);
  opacity: 0.6;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--btn-radius);
  min-height: 2.75rem;
  padding: 0.78rem 1.4rem;
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline-offset: 3px; }

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
  box-shadow: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 75%, #fff);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
}

.btn-ghost:hover {
  background: color-mix(in srgb, var(--color-surface-soft) 65%, transparent);
}

/* Header CTAs follow the header foreground so they stay legible on a coloured band
   (no-op on the neutral default where --header-fg == --color-text). */
.site-header .btn-ghost {
  color: var(--header-fg);
  border-color: color-mix(in srgb, var(--header-fg) 20%, transparent);
}

.btn-sm {
  min-height: 2.2rem;
  padding: 0.55rem 1rem;
  font-size: 0.87rem;
}

.btn-lg {
  min-height: 3rem;
  padding: 0.9rem 1.7rem;
  font-size: 1.04rem;
}

.btn-block { width: 100%; }

.btn-icon {
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border-radius: 50%;
}

/* Card */
.card {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  padding: var(--space-5);
}

.card-title {
  margin: 0 0 var(--space-2);
  font-size: 1.08rem;
}

.card-text {
  margin: 0;
  color: var(--color-text-soft);
}

/* Chip — pill-shaped tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--chip-radius);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.chip-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Site footer */
.site-footer {
  padding: var(--space-10) 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* Member profile */
.profile-head {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-6);
}
.profile-avatar {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.profile-id {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.profile-headline {
  font-size: 1.15rem;
  font-weight: 600;
}
.profile-bio {
  color: var(--color-text-soft);
  max-width: 60ch;
}
.profile-interests {
  margin-top: var(--space-3);
}

/* ===== 5) Utilities ===== */
.text-center { text-align: center; }
.muted { color: var(--color-text-soft); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ===== 6) Page components (web-page-builder) ===== */

/* Desktop-only CTAs in the header. The CMS nav renders login/join inside its own
   mobile drawer, so showing them in the header below 1024px duplicates them. */
@media (max-width: 1023px) {
  .desktop-only { display: none; }
}

/* Header on narrow phones: logo + Join + hamburger all have to fit on one row, so
   the logo gives up a little height and the button tightens rather than wrapping. */
/* The CMS nav takes width:100%, so it squeezes the logo and the button. Give the
   logo a hard cap in rem rather than letting flex shrink its anchor: the anchor is
   inline-flex and sizes to the image, so a shrinking anchor lets the image spill
   out and the Join button paints over it — which reads as a clipped wordmark. */
@media (max-width: 560px) {
  .site-header-row { gap: var(--space-2); }
  .site-logo { flex: 0 0 auto; }
  .site-logo img { max-height: 2.1rem; max-width: 9.5rem; }
  .site-cta { flex: 0 0 auto; }
  .site-cta .btn-sm {
    padding: 0.5rem 0.85rem;
    font-size: 0.84rem;
    white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .site-logo img { max-height: 1.9rem; max-width: 8rem; }
  .site-cta .btn-sm { padding: 0.45rem 0.7rem; font-size: 0.8rem; }
}

/* Canvas nav (menu.navigation.default) theming.
   Every selector is >= 0,2,0 so it beats the snippet's inline <style>. */
.hs-canvas-nav .hs-canvas-nav__drawer {
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  /* Measured at 360px even on a 320px viewport, so clamp it: on a narrow phone the
     panel should stop at the screen edge rather than hang past it. */
  max-width: 100vw;
}
.hs-canvas-nav .hs-canvas-nav__overlay {
  background: color-mix(in srgb, var(--color-text) 40%, transparent);
}
/* Join now lives in the header itself, immediately left of the hamburger, so the
   copy the snippet puts inside its drawer would be a duplicate. Hide that one and
   keep the drawer's Login, which is the only CTA not in the header on mobile. */
.hs-canvas-nav .hs-canvas-nav__cta--primary { display: none; }
.hs-canvas-nav .hs-canvas-nav__cta--secondary {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-text) 22%, transparent);
}
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__link,
.hs-canvas-nav .hs-canvas-nav__menu--mobile .hs-canvas-nav__summary {
  color: var(--color-text);
  font-family: var(--font-heading);
}
.hs-canvas-nav .hs-canvas-nav__menu--desktop .hs-canvas-nav__link {
  color: var(--color-text);
  font-weight: 600;
}
.hs-canvas-nav .hs-canvas-nav__menu--desktop .hs-canvas-nav__link:hover {
  color: var(--color-primary);
}

/* Content widths — two only, used consistently across every page. */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose h2 { margin: var(--space-10) 0 var(--space-3); }
.prose h3 { margin: var(--space-6) 0 var(--space-2); font-size: 1.12rem; }

/* Section scaffolding */
.sec-head { max-width: 60ch; margin-bottom: var(--space-8); }
.sec-head h2 { margin: var(--space-2) 0 var(--space-3); font-size: clamp(1.5rem, 3.4vw, 2rem); }
.sec-head p { margin: 0; color: var(--color-text-soft); }
.sec-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.section-soft { background: var(--color-surface-soft); }

/* Hero */
.hero { padding: var(--space-12) 0; background: var(--color-surface-soft); }
.hero-grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { margin: var(--space-3) 0 var(--space-4); font-size: clamp(2rem, 5.2vw, 3rem); }
.hero-lede { margin: 0 0 var(--space-6); font-size: 1.1rem; color: var(--color-text-soft); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-note { margin: var(--space-4) 0 0; font-size: 0.87rem; color: var(--color-text-soft); }
.hero-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

/* Page head for interior (non-landing) pages */
.page-head { padding: var(--space-10) 0 var(--space-6); }
.page-head h1 { margin: var(--space-2) 0 var(--space-4); font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
.page-lede { margin: 0; font-size: 1.08rem; color: var(--color-text-soft); max-width: 62ch; }

/* Card grids — auto-fit so they never overflow their container */
.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.feature-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-5);
}
.feature-card h3,
.feature-card h4 { margin: var(--space-2) 0; font-size: 1.05rem; }
.feature-card p { margin: 0 0 var(--space-3); color: var(--color-text-soft); font-size: 0.94rem; }
.feature-card p:last-child { margin-bottom: 0; }
.feature-card .feature-guard,
.entity-card .feature-guard {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  font-size: 0.88rem;
  color: var(--color-text);
}
.feature-icon { font-size: 1.5rem; line-height: 1; }

/* Numbered steps */
.steps {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.step {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.step h3 { margin: 0 0 var(--space-2); font-size: 1.02rem; }
.step p { margin: 0; color: var(--color-text-soft); font-size: 0.94rem; }

/* Two-entity cards (who is responsible for what) */
.entity-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: var(--card-radius);
  padding: var(--space-6);
}
.entity-card h3 { margin: var(--space-2) 0 var(--space-1); font-size: 1.1rem; }
.entity-role { margin: 0 0 var(--space-4); font-size: 0.86rem; font-weight: 700; color: var(--color-primary-dark); }
.entity-card dl { margin: 0 0 var(--space-4); font-size: 0.92rem; }
.entity-card dt { font-weight: 700; margin-top: var(--space-2); }
.entity-card dd { margin: 0; color: var(--color-text-soft); }
.entity-card ul { margin: 0; padding-left: var(--space-5); font-size: 0.92rem; color: var(--color-text-soft); }
.entity-card li { margin-bottom: var(--space-1); }

/* Responsibility table */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.data-table th, .data-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  vertical-align: top;
}
.data-table th { font-family: var(--font-heading); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* Callouts */
.callout {
  border-left: 4px solid var(--color-primary);
  border-radius: 0;
  background: var(--color-surface);
  padding: var(--space-5);
}
.callout h2, .callout h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.callout p { margin: 0 0 var(--space-3); }
.callout p:last-child { margin-bottom: 0; }
.callout-urgent { border-left-color: var(--color-accent); background: var(--color-primary-light); }

/* FAQ — CSS-only disclosure, no JavaScript */
.faq { display: grid; gap: var(--space-3); max-width: 68ch; }
.faq-item {
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-4) var(--space-5);
}
.faq-item > summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1rem;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  float: right;
  color: var(--color-primary);
  font-weight: 700;
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item > p { margin: var(--space-3) 0 0; color: var(--color-text-soft); }

/* Closing CTA band */
.cta-band { background: var(--color-primary); color: #fff; padding: var(--space-12) 0; }
.cta-band-inner { max-width: 54ch; margin-inline: auto; text-align: center; }
.cta-band h2 { margin: 0 0 var(--space-3); font-size: clamp(1.5rem, 3.6vw, 2rem); }
.cta-band p { margin: 0 0 var(--space-6); color: color-mix(in srgb, #fff 82%, transparent); }
.cta-band .btn-secondary { background: #fff; color: var(--color-primary-dark); border: 0; }
.cta-band .btn-secondary:hover { background: var(--color-primary-light); }

/* Inline link list */
.link-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: 0; padding: 0; list-style: none; }
.link-row a { color: var(--color-primary); font-weight: 600; }
.link-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== 7) Homepage hero — full-bleed image with the headline over it =====
   Same shape as the CitaSeria home hero: the photo is a background on the section,
   a gradient scrim sits between it and the text, and the content rides on top.
   Nothing here needs JavaScript, so the page still imports cleanly from a ZIP. */
.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(84vh, 760px);
  overflow: hidden;
  isolation: isolate;
  /* Painted before the photo decodes, so the white headline never lands on a pale
     background for a frame. Matches the darkest corner of the image. */
  background-color: #2a1020;
  background-image: image-set(
      url('img/home/expat-skyline-1200.webp') type('image/webp'),
      url('img/home/expat-skyline.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center 42%;
}
@media (min-width: 1280px) {
  .home-hero {
    background-image: image-set(
        url('img/home/expat-skyline-1672.webp') type('image/webp'),
        url('img/home/expat-skyline.jpg') type('image/jpeg'));
  }
}
@media (max-width: 767px) {
  .home-hero {
    /* Taller than the desktop ratio would give, so the gap the auto margin opens
       between the eyebrow and the headline is wide enough to clear both faces. */
    min-height: min(92vh, 760px);
    background-image: image-set(
        url('img/home/expat-skyline-768.webp') type('image/webp'),
        url('img/home/expat-skyline.jpg') type('image/jpeg'));
    background-position: center 38%;
  }
}

/* Scrim. Vertical on small screens; on wide screens it runs left-to-right so the
   couple on the right of the photo stays visible behind clear space. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
      rgba(26,10,20,.74) 0%,
      rgba(26,10,20,.44) 42%,
      rgba(26,10,20,.66) 100%);
}
/* On wide screens the copy sits left and the couple is centre-right in the photo,
   so the scrim stays heavy across the whole text column and only clears past 58%. */
@media (min-width: 900px) {
  .home-hero::after {
    background: linear-gradient(90deg,
        rgba(26,10,20,.92) 0%,
        rgba(26,10,20,.84) 26%,
        rgba(26,10,20,.58) 44%,
        rgba(26,10,20,.12) 64%,
        rgba(26,10,20,.42) 100%);
  }
}

.home-hero > .container { position: relative; z-index: 1; }
.home-hero-content {
  color: #fff;
  max-width: 44ch;
  margin-inline: auto;
  padding: var(--space-12) 0;
  text-align: center;
}
@media (min-width: 900px) {
  .home-hero-content { text-align: left; margin-inline: 0; }
}

/* On phones the couple's faces sit in the upper third of the crop, so the copy is
   pushed apart: the eyebrow pins to the very top, everything else drops to the
   bottom, and the gap the auto margin opens is exactly where the faces are. */
@media (max-width: 899px) {
  .home-hero { align-items: stretch; }
  .home-hero > .container { display: flex; }
  .home-hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-5) 0 var(--space-10);
  }
  .home-hero-content .home-eyebrow { margin-bottom: auto; }
  .home-hero-content h1 { margin-top: 0; }
}
.home-hero-content h1 {
  color: #fff;
  margin: var(--space-3) 0 var(--space-4);
  font-size: clamp(2.05rem, 5.4vw, 3.3rem);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 26px rgba(0,0,0,.55);
}
.home-hero-sub {
  color: #fff;
  margin: 0 0 var(--space-6);
  font-size: clamp(1rem, 2.1vw, 1.18rem);
  text-shadow: 0 1px 16px rgba(0,0,0,.6);
}
.home-hero-note {
  margin: var(--space-4) 0 0;
  font-size: 0.87rem;
  color: rgba(255,255,255,.86);
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.home-hero .hero-actions { justify-content: center; }
@media (min-width: 900px) { .home-hero .hero-actions { justify-content: flex-start; } }

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
}

/* ===== 8) Textured bands =====
   Two tinted backgrounds with different weaves, to break up a run of plain blocks.
   Pure CSS gradients: no images, no extra requests, no JavaScript. Deliberately
   faint — they interrupt the monotony without costing legibility. */
.band-dots {
  background-color: var(--color-surface-soft);
  background-image: radial-gradient(circle at center,
      color-mix(in srgb, var(--color-primary) 18%, transparent) 1.8px,
      transparent 2.2px);
  background-size: 22px 22px;
}
.band-diag {
  background-color: var(--color-surface-soft);
  background-image: repeating-linear-gradient(135deg,
      transparent 0 11px,
      color-mix(in srgb, var(--color-primary) 9%, transparent) 11px 13px);
}
.band-grid {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-primary) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 7%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Paper-plane trails over the closing band. Decorative, very faint, SVG inline so
   it costs no request and survives the ZIP import. */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cpath d='M20 44l38-14-14 38-6-16z' fill='%23fff' fill-opacity='.12'/%3E%3Cpath d='M126 118l26-10-10 26-4-11z' fill='%23fff' fill-opacity='.09'/%3E%3Cpath d='M104 30l18-7-7 18-3-8z' fill='%23fff' fill-opacity='.10'/%3E%3Ccircle cx='60' cy='128' r='2.5' fill='%23fff' fill-opacity='.10'/%3E%3Ccircle cx='150' cy='58' r='2' fill='%23fff' fill-opacity='.09'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.cta-band > .container { position: relative; z-index: 1; }

/* ===== 9) People strip — horizontally scrolling profile cards =====
   A static strip built from real profile data pulled from the platform at build
   time, not a live CMS block. Scrolling is native overflow with scroll-snap, so
   there is no carousel script. No description line is emitted on these cards. */
.people-block { max-width: calc(6 * 13rem + 5 * 1rem); margin-inline: auto; }
.people-strip {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-primary) 55%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
}
.people-strip::-webkit-scrollbar { height: 8px; }
.people-strip::-webkit-scrollbar-track { background: var(--color-surface-soft); border-radius: var(--radius-pill); }
.people-strip::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-primary) 55%, transparent); border-radius: var(--radius-pill); }

.person-card {
  flex: 0 0 auto;
  width: 12.5rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.person-card:hover,
.person-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* The platform serves these photos square (480x480), so the card frame is square
   too: object-fit has nothing to crop and every face survives at every width. */
.person-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: var(--color-surface-soft);
}
.person-card__name {
  margin: var(--space-3) var(--space-3) 0;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-card__where {
  margin: 0 var(--space-3) var(--space-3);
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--color-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-card__cta {
  margin-top: auto;
  padding: var(--space-3);
  text-align: center;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
}
.person-card__cta:hover { background: var(--color-primary-dark); }
.person-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.16rem 0.5rem;
  border-radius: var(--chip-radius);
  color: #fff;
  background: color-mix(in srgb, var(--color-primary) 92%, #000);
}
.person-card--join { justify-content: center; min-height: 8rem; }
.person-card--join .person-card__cta {
  display: grid;
  place-items: center;
  height: 100%;
  background: var(--color-surface-soft);
  color: var(--color-text);
  font-family: var(--font-heading);
}
.person-card--join .person-card__cta:hover { background: var(--color-primary-light); }
.people-strip a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -2px; }
.people-caption {
  margin: var(--space-4) auto 0;
  max-width: 68ch;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

/* ===== 10) Destination cards =====
   Deliberately NOT links. The country and city pages are not built yet, and a card
   that looks clickable but goes nowhere is worse than plain text. When the pages
   ship, the <h3> becomes an <a> and the city chips become links. */
.dest-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.dest-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-5);
}
.dest-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.02rem;
}
.dest-card p {
  margin: 0 0 var(--space-4);
  font-size: 0.92rem;
  color: var(--color-text-soft);
}
.dest-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}
.dest-cities span {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: var(--chip-radius);
}
.dest-note {
  margin: var(--space-6) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-text-soft);
}

/* ===== 11) Cloud band =====
   Soft cloud field for the profile strip — the travel note the other weaves don't
   carry. Inline SVG tiled at two sizes so the repeat is not obvious, faint enough
   that white cards still read clearly on top. No image request, no JavaScript. */
.band-clouds {
  background-color: var(--color-surface-soft);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150'%3E%3Cg fill='%23e0175f' fill-opacity='0.085'%3E%3Cpath d='M42 74c-10 0-18-8-18-18s8-18 18-18c3-12 14-21 26-21 10 0 19 6 24 14 2-1 5-1 7-1 10 0 18 8 18 18s-8 18-18 18H42z'/%3E%3Cpath d='M162 132c-7 0-13-6-13-13s6-13 13-13c2-9 10-15 19-15 8 0 14 4 18 11 1-1 3-1 5-1 7 0 13 6 13 13s-6 13-13 13h-42z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='260' viewBox='0 0 380 260'%3E%3Cg fill='%23e0175f' fill-opacity='0.055'%3E%3Cpath d='M250 78c-12 0-22-10-22-22s10-22 22-22c4-14 17-25 32-25 12 0 23 7 29 17 2-1 6-1 8-1 12 0 22 10 22 22s-10 22-22 22h-69z'/%3E%3Cpath d='M48 214c-9 0-16-7-16-16s7-16 16-16c3-11 12-18 23-18 9 0 17 5 21 13 2-1 4-1 6-1 9 0 16 7 16 16s-7 16-16 16H48z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 150px, 380px 260px;
  background-position: 0 0, 120px 60px;
}