/* =========================================================
   Community Building Agency — Redesign v2 (style2.css)
   Warm · gradient · editorial · community-led
   ========================================================= */

:root {
  /* Base */
  --bg:        #ffffff;   /* white */
  --surface:   #ffffff;
  --ink:       #1d2a62;   /* delft blue */
  --muted:     #5b6486;   /* muted navy */
  --line:      #e6e9ef;   /* neutral line */

  /* Brand stops — Delft Blue / Carolina / Beige / Pistachio / Fern */
  --coral:     #437118;   /* fern green — text accents */
  --peach:     #87aece;   /* carolina blue */
  --rose:      #87aece;   /* carolina blue */
  --lav:       #1d2a62;   /* delft blue */
  --mint:      #afd06e;   /* pistachio */
  --gold:      #87aece;   /* carolina blue */

  /* Signature gradients */
  --grad-warm:   linear-gradient(120deg, #437118 0%, #87aece 55%, #1d2a62 100%);
  --grad-sun:    linear-gradient(120deg, #437118 0%, #87aece 100%);
  --grad-soft:   linear-gradient(150deg, #eef6db 0%, #e3edf7 50%, #ecf4dd 100%);
  --grad-mint:   linear-gradient(150deg, #e6f1cf, #dce9f4);
  --grad-ink:    linear-gradient(150deg, #141d44 0%, #1d2a62 60%, #243168 100%);

  --radius:   24px;
  --radius-sm:16px;
  --radius-pill: 999px;
  --maxw:     1160px;
  --pad:      clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 78px;

  --shadow:    0 2px 6px rgba(29,42,98,.06), 0 24px 60px -20px rgba(29,42,98,.18);
  --shadow-sm: 0 1px 3px rgba(29,42,98,.06), 0 12px 30px -16px rgba(29,42,98,.15);

  --ease: cubic-bezier(.21,.6,.35,1);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html { background: var(--bg); }

body {
  margin: 0;
  font-family: var(--font-body);
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* One single fixed background image for the whole site */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg) url("assets/CBA_bgPosterHQ.png") center center / cover no-repeat;
  scale: 1.7; /* hides blurred edges */
  filter: opacity(0.7);
  /* rotate: 180deg; adds subtle variation, makes it less "wallpaper-y" */
}

/* Pages that opt out of the poster and sit on flat white.
   The .section top border is white, so it also stops showing as a divider. */
body.page-white { background: var(--bg); }
body.page-white::before { content: none; }

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  font-optical-sizing: auto;
}
h1 { font-size: clamp(2.7rem, 6.2vw, 4.6rem); font-weight: 540; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: 1.35rem; font-weight: 560; }

p { margin: 0 0 1rem; }
.lead { font-size: 1.18rem; color: var(--muted); }
.body { color: var(--muted); }
.max-60 { max-width: 58ch; }

.grad-text {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--coral);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px; border-radius: 2px;
  background: var(--grad-warm);
}
.eyebrow.center { justify-content: center; }

a { color: inherit; }

/* ---------- Buttons ---------- */
.btn-primary, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  padding: 0.95rem 1.7rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), color .28s var(--ease);
}
.btn-primary {
  background: var(--grad-warm);
  background-size: 160% 160%;
  /* The 1.5px transparent border above sits outside the default padding-box
     origin, so the gradient would tile into it and show its end colour as a
     dark hairline along the top and left. Origin at the border box covers it. */
  background-origin: border-box;
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(29,42,98,.34);
}
.btn-primary:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 16px 34px -10px rgba(29,42,98,.4); }
.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover { transform: translateY(-3px); border-color: var(--coral); color: var(--coral); box-shadow: var(--shadow-sm); }
.btn-large { padding: 1.1rem 2.1rem; font-size: 0.98rem; }
.btn-full { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.90);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { max-width: none; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(.75rem, 3vw, 2rem); height: var(--header-h); }
/* min-width:0 lets the logo shrink instead of pushing the burger off-screen */
.logo { display: flex; align-items: center; gap: .7rem; min-width: 0; text-decoration: none; }
.logo-mark {
  width: 32px; height: 32px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.logo-text {
  /* same family as the nav links */
  font-family: var(--font-body);
  font-weight: 600;
  /* scales down on narrow screens so the wordmark stays on one line */
  font-size: clamp(.85rem, 4.6vw, 1.4rem);
  /* letter-spacing: 0.04em; */
  color: var(--ink);
  white-space: nowrap;
  /* last-resort guard: truncate rather than overflow the header */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-links { display: flex; align-items: center; gap: 1.2rem; }
.nav-links a { text-decoration: none; font-size: 0.9rem; font-weight: 500; color: var(--muted); transition: color .2s var(--ease); white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav-cta {
  color: #fff !important;
  background: var(--grad-warm);
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(29,42,98,.3);
}
.nav-cta:hover { transform: translateY(-2px); }

.nav-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px;
  /* 44px = iOS minimum tap target; never shrink or the burger clips */
  width: 44px; height: 44px; margin-right: -8px;
  flex-shrink: 0;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { transform: translateY(-0px) rotate(-45deg); }

/* ---------- Subpages ---------- */
/* symmetric top/bottom padding from .section, so the space below the button
   matches the space between the navbar and the eyebrow.
   .eyebrow is inline-flex site-wide, which puts it on a text line and adds
   ~10px of half-leading above it — enough to make the top gap visibly bigger
   than the bottom one. Block-level flex drops the line box; .eyebrow.center
   already supplies justify-content, so it still centres. */
.page-hero .eyebrow { display: flex; }
/* Subpage heroes are content-driven, so the gap above the eyebrow is just the
   section's top padding and reads the same on every page. (A min-height with
   centred content used to live here; on the shorter Services hero it created
   ~170px of extra free space above and below, making that page's spacing look
   nothing like Join Community's.)
   When the header is the hero's last element there's nothing below it to
   separate, so its 3rem margin would otherwise add to the bottom padding. */
.page-hero .section-header:last-child { margin-bottom: 0; }
/* likewise the last paragraph inside it, whose 1rem margin would otherwise
   sit on top of the hero's bottom padding */
.page-hero .section-header > :last-child { margin-bottom: 0; }
/* index's .hero carries no top border; subpage heroes use .section, so drop it here.
   #community-photos sits flush under the hero, so no divider between them either. */
.page-hero, #community-photos { border-top: 0; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page-hero .lead { margin-top: 1.2rem; }

/* hidden must win over any display set below */
[hidden] { display: none !important; }

/* auto-scrolling community photo strip — full-bleed, same 3/4 crops as the
   visual strip on the main page, but drifting sideways instead of static */
.marquee {
  position: relative; z-index: 1;
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 70s linear infinite;
}
/* the track holds two identical copies, so -50% lands exactly on the seam */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* uniform height, width follows each photo's own proportions — nothing is
   cropped, so wide shots stay wide and portrait shots stay narrow.
   max-width:none overrides the global img rule, which would otherwise
   fight the auto width inside a max-content flex track. */
.marquee-track img {
  flex: 0 0 auto;
  height: clamp(240px, 30vw, 400px);
  width: auto;
  max-width: none;
  display: block;
}

/* confirmation shown in place of the sign-up form */
.confirmation { text-align: center; }
/* focused programmatically so screen readers land on it — no visible ring */
.confirmation:focus:not(:focus-visible) { outline: none; }
.confirmation h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .9rem; }
.confirmation .lead { max-width: 46ch; margin: 0 auto; }
.confirmation-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--grad-sun); color: #fff;
  font-size: 1.7rem; font-weight: 700;
  margin-bottom: 1.3rem;
}

/* Instagram / WhatsApp button pair */
.social-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }
.btn-icon { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }
/* Both social buttons share one look. The supplied icons are solid black
   glyphs, so the fill has to stay light for them to read — the brand gradient
   is dropped here (the shorthand clears it, since a gradient is an image).
   A hairline border separates them on light backgrounds. */
.social-actions .btn-primary {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.social-actions .btn-primary:hover { background: #f4f6fa; border-color: var(--line); }
/* on the dark band the white fill separates on its own */
.section-cta .social-actions .btn-primary { border-color: transparent; }
.section-cta .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.section-cta .btn-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }

.field-optional { font-weight: 500; color: var(--muted); }

/* the default .section-header caps at 60ch, which left this hero's headline
   wrapping to six lines inside a 747px column with 167px empty either side.
   The headline takes the full container; the body copy stays a touch narrower
   so lines don't get uncomfortably long to read. */
.page-hero .section-header { max-width: 100%; }
.page-hero .hero-intro { max-width: 880px; margin-left: auto; margin-right: auto; }

/* multi-paragraph hero copy (Join Community). Paragraphs carry .lead — the same
   token the services hero uses — so size/colour stay defined in exactly one
   place. Only spacing is set here. */
.hero-intro { margin-top: 1.2rem; }
.hero-intro p { margin-bottom: 1rem; }
.hero-intro p:last-child { margin-bottom: 0; }

/* standalone form container (Join Community) */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-sm);
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ---------- Sections ---------- */
/* keeps anchored headings clear of the sticky header */
.section, .hero { scroll-margin-top: var(--header-h); }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; border-top: 1.5px solid rgba(255,255,255,.85); }
.section-header { margin-bottom: 3rem; max-width: 60ch; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header h2 { margin-top: .4rem; }
.section-header .lead { margin-top: 1rem; }

.bg-soft, .bg-mint { background: transparent; }

/* Sections with a solid white background — the rest let the poster show through,
   so the page alternates poster / white / poster as you scroll. */
#about-us, #what-we-do, #why-community, #why-us, #founder { background: var(--surface); }
/* Founder and Trusted By are both white and sit next to each other, so their
   two paddings stack into a gap twice the size of any other — with no change of
   background to explain it. Drop the second one; the adjacent-sibling selector
   means this stops applying by itself if the sections are ever reordered. */
#founder + #why-us { padding-top: 0; }

/* decorative blobs — hidden site-wide (single fixed bg handles this), kept only in CTA */
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7; pointer-events: none; z-index: 0; display: none; }
.section-cta .blob { display: block; }
.blob-1 { width: 460px; height: 460px; background: radial-gradient(circle, #afd06e, transparent 70%); top: -120px; right: -80px; }
.blob-2 { width: 420px; height: 420px; background: radial-gradient(circle, #87aece, transparent 70%); bottom: -140px; left: -90px; }
.blob-3 { width: 380px; height: 380px; background: radial-gradient(circle, #87aece, transparent 70%); top: 30%; left: -120px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4.5rem, 9vw, 7rem); overflow: hidden; }
.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-copy h1 { margin-bottom: 1.5rem; }
.hero-subtitle { font-size: 1.18rem; color: var(--muted); max-width: 46ch; margin-bottom: 2.2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: .5rem 1rem .5rem .6rem;
  border-radius: var(--radius-pill);
  font-size: .85rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.6rem;
}
.hero-badge .dotmark { width: 22px; height: 22px; border-radius: 50%; background: var(--grad-warm); }

.hero-visual { position: relative; }
.hero-video-frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 6px solid #fff;
  aspect-ratio: 4 / 5;
  background: var(--grad-soft);
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-card {
  position: absolute;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow);
}
.hero-card-main { left: -7%; bottom: 7%; max-width: 280px; }
.card-label { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); margin-bottom: .4rem; font-weight: 700; }
.hero-card-main h3 { font-size: 1.1rem; margin-bottom: .7rem; }
.hero-card-main p { font-size: .82rem; color: var(--muted); margin: 0 0 .5rem; }
.hero-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.hero-pills span { font-size: .7rem; background: linear-gradient(120deg,#eaf2d4,#e1eef6); color: #437118; padding: .3rem .7rem; border-radius: var(--radius-pill); font-weight: 600; }
.hero-card-secondary { right: -6%; top: 6%; text-align: center; }
.card-stat-label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; font-weight: 600; }
.card-stat-number { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; margin: .1rem 0; background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-stat-note { font-size: .7rem; color: var(--muted); margin: 0; max-width: 150px; }

/* ---------- Who We Help (marquee-ish strip) ---------- */
.who-strip { text-align: center; max-width: 72ch; margin: 0 auto; position: relative; z-index: 1; }
.who-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.6rem; }
.who-tags span {
  font-size: 1rem; font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: .6rem 1.3rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease);
}
.who-tags span:hover { transform: translateY(-3px); }

/* ---------- Frameworks ---------- */
.framework-block { text-align: center; max-width: 780px; margin: 0 auto; position: relative; z-index: 1; }

/* Strategic frameworks — large items in gradient rectangles */
.framework-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .8rem;
  text-align: center;
  max-width: 560px;
}
.framework-list li {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  padding: 1rem 1.6rem;
  border-radius: var(--radius-sm);
  background-image: linear-gradient(120deg, #141d44 0%, #1d2a62 55%, #2a3a7e 100%);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.framework-list li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pill-list { display: flex; flex-wrap: wrap; gap: .65rem; }
.pill-list.center { justify-content: center; }
.pill-list span {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: .6rem 1.2rem;
  border-radius: var(--radius-pill);
  font-size: .95rem;
  font-weight: 500;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pill-list span:hover { border-color: transparent; transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ---------- Process ---------- */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; position: relative; z-index: 1; }
.process-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem 1.8rem;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
  overflow: hidden;
}
.process-step::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-warm); opacity: 0; transition: opacity .28s var(--ease);
}
.process-step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.process-step:hover::after { opacity: 1; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  color: #fff; background: var(--grad-sun);
  margin-bottom: 1.1rem;
}
.process-step h3 { margin-bottom: .5rem; }
.process-step p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ---------- Visual strip ---------- */
.visual-strip { position: relative; z-index: 1; width: 100vw; margin-left: calc(50% - 50vw); padding: 0; }
.visual-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; margin: 0; padding: 0; }
.visual-strip-grid img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }

/* ---------- Services ---------- */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; position: relative; z-index: 1; }
.service-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 2rem;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.service-card.featured {
  background: var(--grad-ink);
  border: none;
  color: #fff;
}
.service-card.featured .body,
.service-card.featured .service-outcome { color: rgba(255,255,255,.8); }
.service-card.featured .service-outcome { background: rgba(255,255,255,.08); }
.service-card.featured .service-outcome strong { color: #fff; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.service-card h3 { margin-bottom: .8rem; }
.service-tag {
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  background: var(--grad-sun); color: #fff;
}
.service-list { color: var(--muted); font-size: .95rem; padding-left: 1.1rem; margin: 0 0 1rem; }
.service-list li { margin-bottom: .45rem; }
.service-outcome { font-size: .93rem; background: var(--grad-soft); border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin: auto 0 1.5rem; }
.service-card .btn-primary, .service-card .btn-outline { width: 100%; }
.service-price { text-align: center; }
.service-price .price {
  display: block;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}
.service-price .price-note { display: block; font-size: .85rem; color: var(--muted); margin-top: .25rem; }
.service-card.featured .service-price .price { color: #fff; }
.service-card.featured .service-price .price-note { color: rgba(255,255,255,.7); }
.service-card.featured .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.service-card.featured .btn-outline:hover { background: #fff; color: var(--ink); }

/* ---------- Why community ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; z-index: 1; }
.benefit-list { display: flex; flex-direction: column; gap: .9rem; }
.benefit-list .benefit {
  display: flex; align-items: center; gap: .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .9rem 1.2rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.benefit .tick {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-warm); color: #fff; font-size: .8rem; font-weight: 700;
}

/* ---------- Why us ---------- */
/* The logo strip reuses the photo marquee (full-bleed track, two copies, -50%
   scroll); it only needs a smaller image height and a quicker cycle. */
.marquee-logos .marquee-track { animation-duration: 45s; }
.marquee-logos .marquee-track img { height: clamp(30px, 3.6vw, 48px); }

/* ---------- Founder ---------- */
.founder-inner {
  display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 4vw, 2.8rem);
  position: relative; z-index: 1;
}
.founder-photo-wrap { position: relative; width: 280px; max-width: 100%; }
.founder-photo { position: relative; z-index: 1; width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 22px; }
.founder-text { max-width: 70ch; text-align: center; }
.founder-text p { font-size: 1.08rem; color: var(--muted); line-height: 1.75; margin-bottom: 1.2rem; }
.founder-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }

/* ---------- CTA ---------- */
.section-cta { background: var(--grad-ink); color: #fff; position: relative; overflow: hidden; }
.section-cta .blob { opacity: .35; }
.section-cta .eyebrow { color: var(--peach); }
.section-cta .eyebrow::before { background: var(--grad-sun); }
.cta-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.2rem; align-items: stretch; position: relative; z-index: 1; }
/* Matches the height of the community photo strip (.marquee-logos aside, the
   photo strip's images use this same clamp), with the content centred in it.
   Below ~640px the copy is taller than 240px, so the section grows to fit
   rather than clipping. */
.cta-compact {
  min-height: clamp(240px, 30vw, 400px);
  display: flex;
  align-items: center;
  /* keeps the button clear of the bottom edge at the widths where the copy
     wraps and the section becomes content-driven rather than min-height-driven */
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* single-column variant, for a CTA with no contact card beside it */
.cta-layout-center { grid-template-columns: 1fr; text-align: center; }
.cta-layout-center .cta-box { max-width: 820px; margin: 0 auto; }
/* wide enough for the "Follow us on Instagram…" line to stay on one line
   (it needs 898px); below ~1000px the container is narrower and it wraps */
.cta-compact .cta-box { max-width: 920px; }
.cta-box h2 { margin-bottom: 1rem; }
.cta-box .body { color: rgba(255,255,255,.78); }
.cta-actions { margin-top: 1.8rem; }
.cta-note { font-size: .92rem; color: rgba(255,255,255,.6); margin-top: 1rem; max-width: 42ch; }
.contact-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 2.2rem; }
.contact-card h3 { margin-bottom: 1.4rem; }
.contact-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); margin: 0 0 .3rem; font-weight: 700; }
.contact-card a { color: #fff; text-decoration: none; word-break: break-all; }
.contact-card a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 2.4rem 0; background: var(--bg); }
.footer-meta { font-size: .88rem; color: var(--muted); margin: 0; text-align: center; }

/* ---------- Fade-in ---------- */
.fade-in, .fade-in-delayed { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.fade-in-delayed { transition-delay: .15s; }
.fade-in.visible, .fade-in-delayed.visible { opacity: 1; transform: none; }

/* =========================================================
   Modal (survey)
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.is-open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(34,29,42,.55); backdrop-filter: blur(4px); }
/* Concentric corners: for the dialog's curve to run parallel to the submit
   button's rather than cut across it, the outer radius must be the inner
   radius plus the gap between them.
     inner = 28px  — the button is a pill, so half its 56px height
     gap   = .modal-content's padding, which is responsive, so this is too */
.modal-dialog {
  position: relative;
  /* one source of truth: .modal-content pads by this, and the concentric
     border-radius below is derived from it */
  --modal-pad: clamp(1.25rem, 4vw, 2.8rem);
  /* the width keeps a gutter on narrow screens, where max-width alone would
     let the dialog run edge to edge */
  width: calc(100% - 2rem);
  max-width: 660px;
  overflow-y: auto;
  /* vh on iOS Safari measures the viewport with the toolbars hidden, so
     5vh + 90vh + 5vh is taller than what is actually on screen and the submit
     button ends up below the fold. dvh tracks the real visible height. */
  margin: 5vh auto;  max-height: 90vh;
  margin: 5dvh auto; max-height: 90dvh;
  background: var(--surface);
  border-radius: calc(28px + var(--modal-pad));
  box-shadow: 0 40px 90px rgba(0,0,0,.35);
}
.modal-close {
  position: absolute; top: 1.2rem; right: 1.2rem; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ink); z-index: 2;
}
.modal-content { padding: var(--modal-pad); }
.modal-eyebrow { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--coral); font-weight: 700; margin: 0 0 .6rem; }
.modal-content h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.modal-subtitle { margin: 1.8rem 0 .6rem; font-size: 1.2rem; }
.modal-body { color: var(--muted); font-size: .98rem; }

.survey-form { margin-top: 1.6rem; }
.field { display: block; margin-bottom: 1.4rem; }
.field-label { display: block; font-size: .93rem; font-weight: 600; margin-bottom: .55rem; color: var(--ink); }
.survey-form textarea,
.survey-form input[type="email"],
.survey-form input[type="text"] {
  width: 100%; font: inherit; font-size: .96rem; padding: .85rem .95rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); resize: vertical;
}
.survey-form textarea:focus, .survey-form input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(175,208,110,.32); }
.radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; border: 0; padding: 0; margin: 0; }
.radio-grid label { font-size: .92rem; display: flex; align-items: center; gap: .5rem; color: var(--muted); }
fieldset.field { border: 0; padding: 0; }
.consent { display: flex; gap: .7rem; font-size: .88rem; color: var(--muted); align-items: flex-start; margin-bottom: 1.2rem; }
.consent input { margin-top: .3rem; }
.divider { height: 1px; background: var(--line); margin: 1.8rem 0; }

/* community agreement — fixed height with its own scrollbar, so the full text
   is readable in the form without making the dialog enormous. tabindex=0 in the
   markup lets keyboard users scroll it. */
.agreement-box {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 1rem 1.15rem;
  margin: 0 0 1.2rem;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--muted);
}
.agreement-box:focus-visible { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(175,208,110,.32); }
.agreement-box h4 { margin: 0 0 .7rem; font-family: var(--font-body); font-size: .92rem; font-weight: 700; color: var(--ink); }
.agreement-box h5 { margin: 1.2rem 0 .4rem; font-family: var(--font-body); font-size: .86rem; font-weight: 700; color: var(--ink); }
.agreement-box ul { margin: 0 0 .7rem; padding-left: 1.1rem; }
.agreement-box li { margin-bottom: .35rem; }
.agreement-box p { margin: 0 0 .7rem; }
.agreement-box > :last-child { margin-bottom: 0; }
.agreement-box a { color: var(--coral); }
.form-status { font-size: .92rem; color: var(--coral); margin-top: .9rem; text-align: center; font-weight: 600; }
/* Until it has a message this sits empty under the submit button, but still
   carries .9rem above and the global p's 1rem below — which made the gap under
   the button larger than the padding at the sides. Collapse it while empty;
   it stays in the DOM so the aria-live announcement still works. */
.form-status:empty { margin: 0; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card-main { left: 0; }
  .hero-card-secondary { right: 0; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .founder-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cta-layout { grid-template-columns: 1fr; }

}

/* ---------- Nav collapse ----------
   Logo + 3 links + CTA need ~900px on one line, so the burger takes over below 940px. */
@media (max-width: 940px) {
  .nav-links {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem var(--pad) 1.25rem;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav-links.open { opacity: 1; transform: none; pointer-events: auto; }
  /* full-width rows give each link a comfortable tap target */
  .nav-links a { padding: .85rem 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links .nav-cta { text-align: center; margin-top: 1rem; padding: .95rem 1.3rem; }
  .nav-toggle { display: flex; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .process-grid { grid-template-columns: 1fr; }
  .visual-strip-grid { grid-template-columns: 1fr; }
  .visual-strip-grid img { aspect-ratio: 4 / 5; }
  .radio-grid { grid-template-columns: 1fr; }

  /* Phone dialogs: use more of the screen and spend less height per row, so a
     long form needs less scrolling to reach Submit. */
  .modal-dialog { margin: 2dvh auto; max-height: 96dvh; }
  .survey-form { margin-top: 1.1rem; }
  .field { margin-bottom: 1rem; }
  .field-label { margin-bottom: .35rem; }
  .survey-form textarea,
  .survey-form input[type="email"],
  .survey-form input[type="text"] { padding: .7rem .85rem; }
  .radio-grid { gap: .45rem; }
  .agreement-box { max-height: 170px; padding: .85rem 1rem; margin-bottom: 1rem; }
  .divider { margin: 1.2rem 0; }
  .consent { margin-bottom: .9rem; }
  .modal-content h2 { font-size: 1.5rem; }
  .modal-body { font-size: .92rem; }
  .btn-large { padding: .95rem 1.7rem; }

  /* the copy wraps to several lines here, so the section is content-driven and
     1.25rem left the button almost touching the bottom edge */
  .cta-compact { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* respect a reduced-motion preference: stop the drift, allow manual swiping */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}