/* Ash Recreation & Design
   Rebuilt from the live Weblium site, measured 2026-09-17.
   Live type scale: hero h2 74px/88.8px ls 3.03px, section h2 52px, h3 22px,
   lead 24px/38.4px, nav 15px bold, buttons 16.5px bold, radius 40px.
   Live palette: ink #575363, muted #767381, coral #EF655B, periwinkle #7781FF,
   green #155F1A, cream #FCFAF6, hero overlay rgba(252,250,246,0.8).
   Container 1200px. Fonts Fredoka (display) and Lato (body). */

:root {
  --ink: #575363;
  --ink-muted: #767381;
  --coral: #ef655b;
  --coral-dark: #d94f45;
  --periwinkle: #7781ff;
  --periwinkle-dark: #5b66eb;
  --green: #155f1a;
  --green-dark: #0e4713;
  --sun: #f5b53d;
  --sun-deep: #dd9a22;
  --cream: #fcfaf6;
  --white: #ffffff;
  --line: rgba(87, 83, 99, 0.14);
  --input-bg: rgba(87, 83, 99, 0.09);
  --shadow-card: 0 18px 46px rgba(87, 83, 99, 0.13);
  --shadow-soft: 0 8px 24px rgba(87, 83, 99, 0.09);
  --container: 1200px;
  --radius-pill: 40px;
  --radius-card: 22px;
  --header-h: 154px;
  --section-y: clamp(72px, 8vw, 116px);
}

@media (max-width: 960px) { :root { --header-h: 104px; } }
@media (max-width: 600px) { :root { --header-h: 88px; } }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  line-height: 1.5;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--periwinkle-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--periwinkle);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The live site uses fixed sizes that do not shrink until mobile, so the
   clamp floors here are deliberately high. Measured: display 74px/88.8,
   section h2 52px/62.4, about h2 47px, body 19px/28.5, hero lead 24px bold. */
h1, h2, h3, .display {
  font-family: Fredoka, "Trebuchet MS", sans-serif;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.2;
}

.display {
  font-size: clamp(42px, 5.4vw, 74px);
  letter-spacing: .03em;
  line-height: 1.2;
  margin-bottom: .3em;
}
.display-coral { color: var(--coral); }

h2 { font-size: clamp(34px, 3.9vw, 52px); letter-spacing: .015em; }
h3 { font-size: clamp(21px, 2.1vw, 28px); }

p { margin: 0 0 1.1em; }
/* Body copy on this site is full ink, not a muted grey. */
.lead { font-size: 19px; line-height: 1.5; color: var(--ink); }
.eyebrow {
  font-family: Fredoka, "Trebuchet MS", sans-serif;
  font-size: 16px; font-weight: 500; letter-spacing: .01em;
  color: var(--green); margin: 0 0 20px; line-height: 1.5;
}

/* Wave edges between colour bands, the signature transition on this site. */
/* Live site renders these around 170 to 190px tall. A shallow wave reads as a
   straight edge with a wobble and loses the whole look, so keep it deep. */
.wave {
  position: absolute; left: 0; width: 100%; height: clamp(72px, 12vw, 180px);
  display: block; z-index: 2; pointer-events: none;
}
.wave-top { top: -1px; }
.wave-bottom { bottom: -1px; }
/* Sits just above the band rather than inside it, so the band's own colour
   bulges up over whatever is behind. Used where a photo sits above the band. */
.wave-top-out { bottom: calc(100% - 1px); top: auto; }

/* The zigzag rule under centred headings. */
.squiggle { display: block; width: 76px; height: 16px; margin: 0 auto 26px; }
.center .squiggle, .band-about .squiggle { margin-left: auto; margin-right: auto; }
/* The problem row heading is left aligned, so its rule starts at the left edge
   of the copy instead of centring in the column. Sits after the centring rule
   above, which it has to beat at equal specificity. */
.squiggle-left { margin: -4px 0 22px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 820px; }
.center { text-align: center; }
.center .btn-row { justify-content: center; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Lato, sans-serif; font-size: 16.5px; font-weight: 700;
  line-height: 1.2; text-decoration: none; text-align: center;
  padding: 19px 36px; border-radius: var(--radius-pill); border: 2px solid transparent;
  cursor: pointer; transition: transform .16s ease, background-color .16s ease,
    box-shadow .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); color: #fff; }
.btn-periwinkle { background: var(--periwinkle); color: #fff; }
.btn-periwinkle:hover { background: var(--periwinkle-dark); color: #fff; }
.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-dark); color: #fff; }
.btn-outline, .btn-outline-coral {
  background: transparent; color: var(--coral); border-color: var(--coral);
}
.btn-outline:hover, .btn-outline-coral:hover { background: var(--coral); color: #fff; }
.btn-outline-coral { padding: 14px 30px; font-size: 15.5px; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline-light:hover { background: #fff; color: var(--coral); border-color: #fff; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ---------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}
/* The blur lives on a pseudo element. backdrop-filter on the header itself
   makes it the containing block for the fixed mobile nav, which then sizes
   against the 104px header instead of the viewport and collapses to nothing. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(252, 250, 246, .94);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.site-header.scrolled { box-shadow: 0 2px 18px rgba(87,83,99,.1); border-bottom-color: var(--line); }

.header-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
  height: var(--header-h); display: flex; align-items: center; gap: 24px;
}
.logo-link { display: flex; align-items: center; flex: 0 0 auto; }
.logo-link img { height: clamp(56px, 6vw, 78px); width: auto; }

.main-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.main-nav > ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.main-nav a, .nav-parent {
  font-family: Lato, sans-serif; font-size: 16px; font-weight: 700;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer; line-height: 1.4;
  transition: color .15s ease;
}
.main-nav a:hover, .nav-parent:hover, .main-nav a.active { color: var(--green); }

.has-dropdown { position: relative; display: flex; align-items: center; gap: 5px; }
.caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-muted); transition: transform .18s ease;
}
.has-dropdown:hover .caret, .has-dropdown.open .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 205px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card);
  list-style: none; margin: 0; padding: 12px 0; opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.dropdown li { display: block; }
.dropdown a { display: block; padding: 9px 22px; white-space: nowrap; }

.nav-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--periwinkle); color: #fff; flex: 0 0 auto;
}
.nav-social:hover { background: var(--periwinkle-dark); color: #fff; }

.nav-toggle {
  display: none; margin-left: auto; width: 46px; height: 46px; flex: 0 0 auto;
  background: none; border: 0; cursor: pointer; padding: 11px 9px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 3px; border-radius: 3px; background: var(--ink); transition: transform .22s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--cream); flex-direction: column; align-items: stretch;
    gap: 0; padding: 18px 24px 40px; overflow-y: auto;
    transform: translateX(100%); visibility: hidden; margin-left: 0;
    transition: transform .26s ease, visibility 0s linear .26s;
  }
  .main-nav.open { transform: translateX(0); visibility: visible; transition: transform .26s ease; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li { border-bottom: 1px solid var(--line); }
  .main-nav > ul > li > a, .nav-parent { display: block; padding: 17px 2px; font-size: 17px; width: 100%; text-align: left; }
  .has-dropdown { flex-wrap: wrap; }
  .has-dropdown > a, .has-dropdown > .nav-parent { flex: 1; }
  .caret { margin-left: auto; }
  .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; background: transparent; width: 100%; padding: 0 0 12px 16px;
    display: none; min-width: 0;
  }
  .has-dropdown.open .dropdown { display: block; transform: none; }
  .dropdown a { padding: 11px 2px; font-weight: 400; }
  .nav-social { margin: 22px 0 0; }
}

/* ---------------------------------------------------------- doodles */
.doodles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.dd { position: absolute; opacity: .85; }
.dd-1 { width: 74px; top: 16%; left: 2.5%; }
.dd-2 { width: 62px; top: 9%; right: 6%; }
.dd-3 { width: 30px; top: 40%; left: 5.5%; }
.dd-4 { width: 26px; bottom: 16%; right: 9%; }
.dd-5 { width: 13px; top: 6%; left: 3.5%; }
.dd-6 { width: 11px; bottom: 24%; left: 9%; }
.dd-7 { width: 15px; top: 28%; right: 3%; }
.dd-8 { width: 46px; bottom: 9%; right: 2.5%; }
@media (max-width: 860px) { .dd-3, .dd-4, .dd-6, .dd-8 { display: none; } .dd { opacity: .6; } }

/* The two stickers, a crown closing the banner and a gift on the call to
   action. Each takes a top corner of its band, so the squiggle that would sit
   under it steps aside. Full opacity, unlike the confetti, because these read
   as objects rather than marks. Declared after the mobile rule above so the
   fade there does not catch them. */
.dd-sticker {
  width: clamp(46px, 5.2vw, 68px); opacity: 1;
  filter: drop-shadow(0 7px 11px rgba(87, 83, 99, .2));
}
.has-sticker .dd-1, .has-sticker .dd-2 { display: none; }
.dd-crown { top: 8%; right: 4.5%; }
/* Held clear of the top wave, which is up to 180px deep. A percentage would
   ride up into it as the band grows. */
.dd-gift { top: clamp(118px, 15vw, 210px); left: 4%; }

/* The doodle layer is positioned, so any content wrapper that is not itself
   positioned paints underneath the confetti. Lifting each one means a doodle
   that reaches past the margin slides behind the copy instead of over it.
   The hero, the page head and the state hero already do this for their own
   reasons. */
.band-problem .split, .band-about .container, .band-solutions .container,
.band-testimonials .container, .band-cta .split, .band-banner .container {
  position: relative; z-index: 1;
}
@media (max-width: 860px) {
  .dd-crown { top: 5%; right: 4%; }
  .dd-gift { display: none; }
}

/* ---------------------------------------------------------- bands */
.band, .hero-home, .page-head, .hero-state { position: relative; }
.band { padding: var(--section-y) 0; }
.band-about {
  background: var(--periwinkle); color: #fff;
  padding: clamp(96px, 11vw, 150px) 0 clamp(96px, 11vw, 150px);
}
.band-solutions { background: var(--cream); }
.band-testimonials { background: var(--cream); }
.band-gallery { background: var(--white); padding-top: clamp(40px, 5vw, 64px); }
/* Padding on both ends has to clear the waves, which are up to 180px tall,
   or the cards sit on top of the curve. */
.band-cta {
  background: var(--coral); color: #fff;
  padding: clamp(110px, 13vw, 200px) 0 clamp(110px, 13vw, 200px);
  z-index: 1;
}
/* When the top wave sits outside the band it does not eat into the padding,
   so the top can come back to a normal rhythm. */
.band-cta.over-photo { padding-top: clamp(56px, 7vw, 100px); }
.band-locations { background: var(--white); }
.band-banner { background: var(--cream); }
.band-legal, .band-404 { background: var(--white); padding: clamp(56px, 7vw, 92px) 0; }

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px); align-items: center;
}
.split-media img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); width: 100%; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------- hero home */
.hero-home { padding: clamp(52px, 7vw, 92px) 0 clamp(56px, 7vw, 96px); background: var(--cream); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(30px, 5vw, 56px); align-items: center; position: relative; z-index: 1;
}
/* Live site breaks this as two lines: "Designing Joy." / "Building Futures." */
.hero-copy .display { max-width: 18ch; }
/* The hero lead is noticeably larger and bolder than ordinary body copy. */
/* Measured 503px wide on the live site, which wraps it to two lines. A ch
   based limit is far too tight at this size and broke it into four. */
.hero-copy .lead {
  max-width: 510px; font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.6; font-weight: 700; color: var(--ink);
}
@media (max-width: 860px) { .hero-copy .display { max-width: none; } }
.hero-media img {
  width: 100%; border-radius: var(--radius-card);
  border: 12px solid #fff; box-shadow: var(--shadow-card);
  aspect-ratio: 3 / 2; object-fit: cover;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------- hero state */
/* Extra bottom padding so the coral wave rising out of the band below does not
   cover the form card. The wave is up to 180px tall. */
.hero-state {
  padding: clamp(56px, 7vw, 96px) 0 clamp(120px, 14vw, 220px);
  overflow: hidden;
}
.hero-state-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("/images/hero-playground.webp") center / cover no-repeat;
}
.hero-state-bg::after { content: ""; position: absolute; inset: 0; background: rgba(252, 250, 246, .8); }
.hero-state-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 420px);
  gap: clamp(30px, 5vw, 60px); align-items: center;
}
@media (max-width: 860px) { .hero-state-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------- page head */
.page-head { padding: clamp(52px, 6.5vw, 88px) 0 clamp(24px, 3vw, 40px); background: var(--cream); }
.page-head .container { position: relative; z-index: 1; }
.page-head .lead { max-width: 720px; }

/* Past Projects leads with a photo beside the heading. The head is otherwise a
   single column, so the grid and the extra bottom padding only apply when one
   is there. */
.page-head.has-media { padding-bottom: clamp(36px, 4.5vw, 62px); }
.page-head-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 5vw, 56px); align-items: center;
}
.page-head-grid .display { margin-bottom: .22em; }
.page-head-grid .lead { margin-bottom: 0; }
/* Same treatment as the home hero photo: white mount, card shadow, cropped to
   a fixed ratio so a portrait file cannot stretch the row. */
.page-head-media img {
  width: 100%; border-radius: var(--radius-card);
  border: 12px solid #fff; box-shadow: var(--shadow-card);
  aspect-ratio: 3 / 2; object-fit: cover;
}
/* Stacked, the heading stays first and the photo follows it. */
@media (max-width: 860px) { .page-head-grid { grid-template-columns: minmax(0, 1fr); } }

.band-problem { background: var(--cream); }
/* The photo sits in a padded white card, not flush to the image edge. */
.band-problem .split-media {
  background: #fff; padding: 14px; border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.band-problem .split-media img { border-radius: 14px; box-shadow: none; }

/* Periwinkle about band: white copy, coral squiggle, three white photo cards. */
.band-about h2 { color: #fff; font-size: clamp(32px, 3.6vw, 47px); }
.band-about .lead { color: #fff; max-width: 62ch; margin: 0 auto; }
.about-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 26px; margin: 46px 0 44px; text-align: center;
}
.about-card {
  margin: 0; background: #fff; border-radius: var(--radius-card);
  padding: 16px 16px 24px; box-shadow: var(--shadow-card);
}
.about-card img { border-radius: 13px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.about-card figcaption {
  font-family: Fredoka, sans-serif; font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 500; color: var(--periwinkle); line-height: 1.5; margin-top: 18px;
}

/* ------------------------------------------- featured solutions rows */
/* Full width white rows, image and copy swapping sides on each one. */
.sol-rows { display: flex; flex-direction: column; gap: 30px; margin-top: 12px; }
.sol-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fff; border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-soft); align-items: stretch;
}
.sol-row.flipped .sol-media { order: 2; }
.sol-media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.sol-copy {
  padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
}
.sol-copy h3 {
  color: var(--periwinkle); font-size: clamp(22px, 2.6vw, 30px); margin-bottom: .45em;
}
.sol-copy p { color: #767676; font-size: 17px; line-height: 1.6; margin-bottom: 1.5em; }
@media (max-width: 760px) {
  .sol-row, .sol-row.flipped { grid-template-columns: minmax(0, 1fr); }
  .sol-row.flipped .sol-media { order: 0; }
  .sol-media img { min-height: 220px; }
}

/* ---------------------------------------------------------- testimonials */
/* One testimonial at a time, chevrons at the container edges, like the live
   site. Slides all sit in a flex track so the viewport takes the height of the
   longest quote and nothing jumps between slides. */
.carousel { position: relative; padding: 0 clamp(34px, 5vw, 72px); }
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex; align-items: stretch;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
.carousel-track > * { flex: 0 0 100%; min-width: 100%; }
/* On mobile the quotes differ a lot in length, so the viewport follows the
   active slide instead of holding the longest one. main.js sets the height. */
@media (max-width: 760px) {
  .carousel-viewport { transition: height .3s ease; }
  .carousel-track { align-items: flex-start; }
}

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink-muted); transition: color .15s ease, background .15s ease;
}
.carousel-arrow:hover { color: var(--ink); background: rgba(87, 83, 99, .07); }
.carousel-arrow.prev { left: 0; }
.carousel-arrow.next { right: 0; }
@media (max-width: 560px) { .carousel-arrow { width: 38px; height: 38px; } }

.carousel-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.carousel-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(87, 83, 99, .26); transition: background .15s ease, transform .15s ease;
}
.carousel-dots button[aria-selected="true"] { background: var(--periwinkle); transform: scale(1.25); }
.carousel-dots:has(button:only-child) { display: none; }

.testimonial {
  margin: 0; background: transparent; padding: 8px 18px;
  text-align: center; position: relative;
}
.testimonial-mark { height: 54px; width: auto; margin: 0 auto 14px; }
.testimonial p { color: #767676; font-size: 17px; margin: 0; }
.testimonial cite {
  display: block; font-style: normal; font-weight: 500; color: var(--periwinkle);
  font-family: Fredoka, sans-serif; font-size: 24px; margin-bottom: 12px;
}

/* ---------------------------------------------------------- gallery */
.gallery { columns: 3 260px; column-gap: 18px; }
.shot { margin: 0 0 18px; break-inside: avoid; }
.shot img {
  width: 100%; border-radius: 16px; box-shadow: var(--shadow-soft);
  background: var(--input-bg); min-height: 120px;
}

/* ---------------------------------------------------------- locations */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 30px; }
.loc-card { background: var(--cream); border-radius: var(--radius-card); padding: 36px 32px; box-shadow: var(--shadow-soft); }
.loc-card h2 { font-size: clamp(26px, 3vw, 34px); }
.loc-rep { font-weight: 700; color: var(--ink); margin-bottom: .4em; }
.loc-card p { color: var(--ink-muted); }
.loc-card .btn { margin-top: 10px; }

/* ---------------------------------------------------------- forms */
.form-card, .cta-card {
  background: #fff; border-radius: var(--radius-card); padding: clamp(26px, 3.2vw, 44px);
  box-shadow: var(--shadow-card);
}
.band-cta .split { align-items: stretch; }
.cta-card h2 { color: var(--coral); }
.cta-card p { color: var(--ink-muted); }
.form-card-title { font-size: 22px; margin-bottom: 20px; }

/* LeadConnector embed. form_embed.js parks the iframe offscreen until the form
   reports its height, so the wrapper has to hold the space itself or the card
   collapses on load and everything under it jumps.

   372px is the height the form actually settles at, measured in a browser, not
   the 432 that LeadConnector puts in data-height. Reserving 432 leaves 60px of
   dead white space under the submit button for the life of the page, because
   min-height is a floor the wrapper never drops below. Reserving the measured
   height means no shift and no gap, and it is still only a floor, so a taller
   form, a validation message or the thank you state all push it out normally.
   Remeasure if fields are added to the form in LeadConnector.

   The iframe is left visually alone otherwise. It paints its own white
   background, which is what the white .form-card behind it agrees with. */
.form-embed { min-height: 372px; }
.form-embed iframe { display: block; width: 100%; border: none; }
/* The form pads itself inside the iframe, so on phones the card drops its own
   side padding and the fields get the full card width. */
@media (max-width: 600px) {
  .form-card { padding-left: 0; padding-right: 0; }
  .form-card > :not(.form-embed) { padding-left: 22px; padding-right: 22px; }
}
.form-fallback { font-size: 16px; color: var(--ink); margin: 0; }
.form-fallback a { color: var(--coral-dark); font-weight: 700; }

.contact-details { margin-top: 28px; }
.contact-details h3 { margin-bottom: 18px; }
.detail { margin-bottom: 18px; }
.detail-label {
  display: block; font-family: Fredoka, sans-serif; font-size: 15px;
  font-weight: 600; color: var(--ink); margin-bottom: 2px;
}
.detail p { margin: 0; color: var(--ink-muted); }
.detail a { color: var(--ink-muted); text-decoration: none; }
.detail a:hover { color: var(--green); text-decoration: underline; }

/* ---------------------------------------------------------- banner */
.band-banner h2 { max-width: 15ch; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------- prose / legal */
.prose h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 1.8em; }
.prose p, .prose li { color: var(--ink-muted); }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: .5em; }
.prose .updated { font-size: 14px; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------- footer */
.site-footer {
  position: relative; background: var(--coral); color: #fff;
  padding-top: clamp(96px, 10vw, 150px);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 36px 28px; padding-bottom: 46px;
}
/* Brand block sits in a white card, matching the cards in the coral CTA band. */
.footer-brand {
  background: #fff; border-radius: var(--radius-card); padding: 28px 26px;
  box-shadow: var(--shadow-card); align-self: start; text-align: center;
}
.footer-brand img { height: 74px; width: auto; margin: 0 auto; }
.footer-tagline {
  font-family: Fredoka, sans-serif; font-style: italic; font-size: 16px;
  color: var(--ink); margin: 16px 0;
}
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--periwinkle); color: #fff;
}
.footer-social:hover { background: var(--coral-dark); color: #fff; }
.footer-col h2 { font-size: 19px; font-family: Fredoka, sans-serif; color: #fff; margin-bottom: 14px; }
.footer-col h2.mt { margin-top: 22px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a, .footer-col p { color: rgba(255,255,255,.93); text-decoration: none; font-size: 15px; }
.footer-col p { margin: 0; }
.footer-col a:hover { color: #fff; text-decoration: underline; }

.footer-bar { border-top: 1px solid rgba(255,255,255,.28); padding: 20px 0; margin-top: 12px; }
.footer-bar-inner { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; }
.footer-bar p { margin: 0; font-size: 14px; color: rgba(255,255,255,.9); }
.legal-links { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.legal-links a { font-size: 14px; color: rgba(255,255,255,.9); text-decoration: none; }
.legal-links a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-bar-inner { justify-content: flex-start; }
  .gallery { columns: 2 150px; }
}