/* ==========================================================================
   Fonts — self-hosted

   Both families are variable fonts, so the whole weight axis is one file:
   two requests instead of a Google Fonts stylesheet that then chains to
   fonts.gstatic.com for the faces. That chain was the slowest thing on the
   page and it blocked rendering.

   Self-hosting also lets vercel.json's CSP drop fonts.googleapis.com and
   fonts.gstatic.com entirely, and means no visitor IP is handed to Google
   just to read the site.

   Weight ranges are the ones actually used. Montserrat never goes below 600
   here; Inter needs 700 for <strong>, which the old Google Fonts URL did not
   request — every bold word in body copy was being synthesised by the
   browser.

   Montserrat and Inter are both SIL Open Font License 1.1 — see
   assets/fonts/OFL.txt.
   ========================================================================== */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

/* ==========================================================================
   Shift & Shine Service — Design tokens
   ========================================================================== */
:root {
  --deep-teal:   #186262;
  --mid-teal:    #249393;
  --bright-teal: #30C4C4;
  --aqua:        #5AD7D7;
  /* Darker than --mid-teal / --bright-teal on purpose: those two fail WCAG AA
     contrast (~3.5:1 and ~2:1) when used as text on --bg/--white. This one
     passes 4.5:1+ everywhere it's used as foreground text/links. */
  --teal-text:   #167373;
  /* White button text on --mid-teal is only 3.70:1. This is the lightest
     teal that still clears 4.5:1 behind white, so hover reads as a lift
     without dropping below AA. */
  --teal-hover:  #1B7A7A;
  /* --aqua on --deep-teal is 4.10:1 — fine as a dot or a rule, not as text.
     This one passes at 4.73:1 for accent text on the dark cards. */
  --aqua-on-dark: #7FE3E3;

  --ink:     #20302F;
  --gray:    #5F6E6C;
  --bg:      #F5FAF9;
  --surface: #E9F5F3;
  --white:   #FFFFFF;

  --font-display: 'Montserrat', 'Arial Black', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1120px;
  --radius: 14px;

  --shadow-sm: 0 2px 10px rgba(24, 98, 98, 0.08);
  --shadow-md: 0 12px 32px rgba(24, 98, 98, 0.12);
  --shadow-lg: 0 22px 48px rgba(24, 98, 98, 0.16);
  --shadow-btn: 0 10px 22px rgba(24, 98, 98, 0.26);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--deep-teal);
  margin: 0 0 0.5em;
  line-height: 1.15;
}

p { margin: 0 0 1em; color: var(--gray); }

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

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

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--deep-teal); color: #fff; padding: 12px 20px; z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; border-radius: 8px; }

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

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin: 0 0 0.9em;
}
.eyebrow-center { text-align: center; }

.section-title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  max-width: 760px;
}
.section-inner > .section-title,
.section-inner > .eyebrow-center { text-align: center; margin-left: auto; margin-right: auto; }

.section-lead {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
}

.section { padding: 96px 0; }
.section-alt { background: var(--surface); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
/* Snap back on press, so the button acknowledges the click rather than
   staying lifted until the pointer leaves. */
.btn:active { transform: translateY(0); transition-duration: 0.05s; }
.btn-lg { padding: 15px 30px; font-size: 1rem; }

.btn-primary {
  background: var(--deep-teal);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--teal-hover); box-shadow: var(--shadow-btn); }

.btn-ghost {
  background: transparent;
  color: var(--deep-teal);
  border-color: var(--deep-teal);
}
.btn-ghost:hover { background: var(--deep-teal); color: #fff; }

.btn-onlight {
  background: #fff;
  color: var(--deep-teal);
}
.btn-onlight:hover { background: var(--bg); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16); }

/* ==========================================================================
   Nav
   ========================================================================== */
/* Near-opaque by default. A translucent bar is only safe where the browser
   can actually blur what scrolls under it — without the blur, nav text ends
   up sitting on arbitrary page content. */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 250, 249, 0.97);
  border-bottom: 1px solid rgba(24, 98, 98, 0.09);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .nav {
    background: rgba(245, 250, 249, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-logo { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.nav-logo-mark { width: 26px; height: 28px; }
.nav-logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--deep-teal);
}
.nav-logo-text .amp { color: var(--bright-teal); margin: 0 2px; }

.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--bright-teal); transition: width 0.2s ease;
}
.nav-links a:hover::after { width: 100%; }

/* Current page. build.js sets aria-current, so the marker follows the real
   page rather than a class someone has to remember to add. */
.nav-links a[aria-current="page"] { color: var(--teal-text); }
.nav-links a[aria-current="page"]::after { width: 100%; background: var(--deep-teal); }
.nav-mobile a[aria-current="page"] { color: var(--teal-text); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; width: 22px; background: var(--deep-teal); }

.nav-mobile { display: none; flex-direction: column; gap: 4px; padding: 8px 24px 20px; }
.nav-mobile a {
  font-family: var(--font-display); font-weight: 600; padding: 12px 4px;
  border-bottom: 1px solid rgba(24,98,98,0.08); color: var(--ink);
}
.nav-mobile .btn { margin-top: 12px; text-align: center; }

@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav.open .nav-mobile { display: flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Soft mesh: three offset radial washes rather than one flat fill, so the top
   of the page has depth behind the headline. It lives on .hero-band, which is
   full width — putting it on .hero would clip it to the 1120px content column
   and draw a visible rectangle. */
.hero-band {
  position: relative;
  overflow: hidden;
}
.hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 62% at 76% 14%, rgba(48, 196, 196, 0.30), transparent 72%),
    radial-gradient(34% 54% at 14% 0%, rgba(36, 147, 147, 0.18), transparent 70%),
    radial-gradient(46% 70% at 58% 100%, rgba(90, 215, 215, 0.18), transparent 74%);
  /* overflow:hidden cuts the washes off square at the bottom of the band,
     which leaves a faint horizontal seam against the page background. Fade
     the last stretch out so the hero dissolves into the page instead. */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.hero {
  position: relative;
  padding: 88px 0 60px;
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: 24px; padding-right: 24px;
}
.hero-inner { max-width: 700px; position: relative; z-index: 2; }

/* Sized so the forced second line ("before they ever walk in.") fits on one
   line at desktop widths rather than orphaning the last word. */
.hero-headline {
  font-size: clamp(2.05rem, 4vw, 3rem);
  letter-spacing: -0.01em;
}
.hero-highlight { color: var(--teal-text); }

.hero-sub {
  font-size: 1.1rem;
  max-width: 520px;
  margin-bottom: 2em;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 2em; }

.hero-trust {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--teal-text);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hero-trust .dot { color: var(--aqua); }

.hero-graphic {
  flex: 1;
  min-width: 260px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}
/* ---------- Hero mockup ----------
   Decorative SVG. Everything animates from a visible resting state, so if
   the animations are suppressed (reduced motion, or an engine that ignores
   SMIL-free CSS on SVG children) the graphic is still complete. */
.hero-mockup { width: 100%; max-width: 400px; height: auto; overflow: visible; }

.mockup-frame {
  animation: mockup-in 0.7s var(--ease-out) both;
}
.mockup-card {
  transform-box: view-box;
  transform-origin: center;
  animation: mockup-card-in 0.7s var(--ease-out) 0.35s both, mockup-float 7s ease-in-out 1.1s infinite;
}

.mockup-el {
  transform-box: fill-box;
  transform-origin: left center;
  animation: mockup-el-in 0.5s var(--ease-out) both;
}
.mockup-el-1 { animation-delay: 0.30s; }
.mockup-el-2 { animation-delay: 0.38s; }
.mockup-el-3 { animation-delay: 0.44s; }
.mockup-el-4 { animation-delay: 0.50s; }
.mockup-el-5 { animation-delay: 0.56s; }
.mockup-el-6 { animation-delay: 0.62s; }
.mockup-el-7 { animation-delay: 0.68s; }

.mockup-trend {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: mockup-draw 1.1s var(--ease-out) 0.75s both;
}
.mockup-trend-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: mockup-pop 0.4s var(--ease-out) 1.7s both;
}

@keyframes mockup-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mockup-card-in {
  from { opacity: 0; transform: translateY(20px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mockup-el-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mockup-draw { to { stroke-dashoffset: 0; } }
@keyframes mockup-pop {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes mockup-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* The animations above all start from opacity 0. When motion is suppressed
   the global reduce block collapses their duration, which lands them on the
   end state — but be explicit rather than relying on that. */
@media (prefers-reduced-motion: reduce) {
  .mockup-frame, .mockup-card, .mockup-el, .mockup-trend-dot { opacity: 1; animation: none; }
  .mockup-trend { stroke-dashoffset: 0; animation: none; }
}

@media (max-width: 860px) {
  .hero { flex-direction: column; padding-top: 56px; }
  /* The forced break reads badly once the headline is only a few words per
     line — let it wrap naturally on narrow screens. */
  .hero-headline br { display: none; }
  .hero-inner { max-width: 100%; text-align: left; }
  .hero-graphic { order: -1; max-width: 220px; margin: 0 auto 8px; }
}

/* ==========================================================================
   Cards / Services
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 3rem;
}
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.card.in-view { opacity: 1; transform: translateY(0); }

/* Stretched link: the anchor in the heading covers the whole card, so the
   card is clickable without a second duplicate anchor in the tab order. */
.card-linked { position: relative; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.card-linked h3 a { color: inherit; }
.card-linked h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card-linked:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card-linked:has(h3 a:focus-visible) { box-shadow: var(--shadow-md); }
/* The stretched ::after swallows the focus ring, so put it on the card. */
.card-linked h3 a:focus-visible { outline: none; }
.card-linked:has(h3 a:focus-visible) { outline: 3px solid var(--bright-teal); outline-offset: 2px; }

.card-arrow {
  display: inline-block;
  color: var(--teal-text);
  transition: transform 0.25s var(--ease-out);
}
.card-linked:hover .card-arrow { transform: translateX(5px); }
.card-bar { width: 44px; height: 6px; border-radius: 4px; margin-bottom: 20px; }
.card-bar-1 { background: var(--deep-teal); }
.card-bar-2 { background: var(--mid-teal); }
.card-bar-3 { background: var(--bright-teal); }
.card h3 { font-size: 1.2rem; margin-bottom: 0.5em; }
.card p { margin: 0; font-size: 0.96rem; }

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Process
   ========================================================================== */
.process {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 3rem;
}
.process-step { flex: 1; text-align: center; padding: 0 16px; }
.process-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  background: var(--deep-teal);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.process-step:nth-child(3) .process-num { background: var(--mid-teal); }
.process-step:nth-child(5) .process-num { background: var(--bright-teal); }
.process-step h3 { font-size: 1.15rem; }
.process-step p { font-size: 0.94rem; max-width: 240px; margin: 0 auto; }
.process-connector {
  flex: 0 0 60px; height: 2px; background: linear-gradient(90deg, var(--mid-teal), var(--bright-teal));
  margin-top: 20px;
}

@media (max-width: 860px) {
  .process { flex-direction: column; gap: 32px; }
  .process-connector { display: none; }
  .process-step { text-align: left; padding: 0; }
  .process-step p { margin-left: 0; }
}

/* ==========================================================================
   Why local
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.why-lead { font-size: 1.05rem; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.why-list li {
  background: var(--white);
  border-left: 4px solid var(--bright-teal);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  font-size: 0.96rem;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.why-list strong { color: var(--deep-teal); }

@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 3rem;
}
/* Deliberately not glassmorphic. A translucent card over the section
   gradient makes text contrast depend on whatever happens to be behind it;
   the gradient hairline border below buys the same lift with a background
   that stays a known, measurable colour. */
.price-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1.5px;
  background: linear-gradient(150deg, var(--bright-teal), rgba(48, 196, 196, 0) 55%);
  /* Mask out the middle so only the 1.5px ring paints. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card-featured {
  background: linear-gradient(155deg, #1B6E6E, var(--deep-teal) 55%, #144F4F);
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}
.price-card-featured::before {
  background: linear-gradient(150deg, rgba(127, 227, 227, 0.85), rgba(127, 227, 227, 0) 60%);
}
.price-card-featured:hover { transform: translateY(-16px); }
.price-card-featured .price-kicker,
.price-card-featured p,
.price-card-featured h3,
.price-card-featured .price-amount { color: #fff; }
.price-card-featured .price-amount span { color: var(--aqua-on-dark); }

.price-kicker {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-text); margin-bottom: 0.6em;
}
.price-card h3 { font-size: 1.15rem; margin-bottom: 0.3em; }
.price-amount { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--deep-teal); margin-bottom: 0.4em; }
.price-amount span { font-size: 0.9rem; font-weight: 600; color: var(--gray); }
.price-detail { font-size: 0.9rem; margin: 0; }

.pricing-note { text-align: center; font-size: 0.92rem; margin-top: 2.5rem; color: var(--gray); }

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card-featured { transform: none; }
}

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #125454, var(--deep-teal) 42%, var(--mid-teal) 100%);
  padding: 64px 0;
}
/* Two soft highlights over the linear base — enough depth that the band
   doesn't read as a flat rectangle, without lightening it under the text. */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 120% at 88% 12%, rgba(90, 215, 215, 0.42), transparent 70%),
    radial-gradient(40% 100% at 8% 96%, rgba(48, 196, 196, 0.24), transparent 72%);
}
.cta-banner-inner { position: relative; z-index: 1; }
.cta-banner-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-banner h2 { color: #fff; margin: 0; max-width: 560px; font-size: clamp(1.4rem, 2.6vw, 1.8rem); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
}
.contact-details { display: grid; gap: 14px; margin-top: 1.6rem; }
.contact-details div { display: flex; gap: 10px; }
.contact-details dt { font-family: var(--font-display); font-weight: 700; color: var(--deep-teal); width: 80px; }
.contact-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.contact-details a { color: var(--teal-text); text-decoration: underline; }

.contact-form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 18px;
}
.form-row { display: grid; gap: 6px; }
.form-row label { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; color: var(--deep-teal); }
.form-row input, .form-row textarea {
  font-family: var(--font-body);
  font-size: 0.96rem;
  padding: 11px 14px;
  border: 1.5px solid #D7E8E6;
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--bright-teal);
}
.form-submit { justify-self: start; }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.form-status { font-size: 0.9rem; font-weight: 600; min-height: 1.2em; color: var(--mid-teal); margin: 0; }

/* Honeypot — off-screen rather than display:none, since some bots skip
   hidden fields but happily fill in ones that are merely out of view. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Very narrow phones: let long button labels and the contact list wrap
   rather than pushing the page sideways. */
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; }
  .btn-lg { padding: 14px 22px; }
  .contact-details div { flex-direction: column; gap: 2px; }
  .contact-details dt { width: auto; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--deep-teal); padding: 48px 0; }
.footer-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer-logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; }
.footer-links a { color: rgba(255,255,255,0.85); font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; }
.footer-links a:hover { color: #fff; }
/* 0.6 alpha over --deep-teal lands at 3.04:1. 0.8 clears AA at 5.22:1. */
.footer-copy { color: rgba(255,255,255,0.8); font-size: 0.82rem; margin: 0; width: 100%; text-align: center; }

@media (min-width: 861px) {
  .footer-copy { width: auto; text-align: left; }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Legal pages (privacy.html)
   ========================================================================== */
.nav-back { margin-left: auto; }

.legal .section-inner { max-width: 760px; }
.legal .section-title,
.legal .section-lead { text-align: left; margin-left: 0; }
.legal h2 { margin-top: 2em; font-size: 1.3rem; }
.legal a { color: var(--teal-text); text-decoration: underline; }

/* ==========================================================================
   Page header — the intro band on every page except the home page
   ========================================================================== */
.page-header {
  position: relative;
  overflow: hidden;
  padding: 72px 0 56px;
  background: var(--surface);
  border-bottom: 1px solid rgba(24, 98, 98, 0.07);
}
.page-header::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  pointer-events: none;
  background:
    radial-gradient(42% 60% at 82% 6%, rgba(48, 196, 196, 0.26), transparent 70%),
    radial-gradient(38% 54% at 6% 96%, rgba(36, 147, 147, 0.16), transparent 70%);
}
.page-header .section-inner { position: relative; z-index: 1; }
.page-header h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  letter-spacing: -0.01em;
  max-width: 780px;
}
.page-header-lead {
  font-size: 1.06rem;
  max-width: 640px;
  margin-bottom: 1.2em;
}
.page-header .btn { margin-top: 0.8em; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list {
  max-width: 760px;
  margin: 2.5rem auto 0;
  border-top: 1px solid rgba(24, 98, 98, 0.12);
}
.faq-item { border-bottom: 1px solid rgba(24, 98, 98, 0.12); }
.faq-item summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--deep-teal);
  padding: 20px 44px 20px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}
/* Replace the native disclosure triangle with a marker we control. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--teal-text);
  border-bottom: 2.5px solid var(--teal-text);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.22s var(--ease-out);
}
.faq-item[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq-item summary:hover { color: var(--teal-text); }
.faq-item p {
  margin: 0 0 22px;
  max-width: 68ch;
  font-size: 0.98rem;
}

/* ==========================================================================
   Founding-client offer panel (/work)
   ========================================================================== */
.offer-panel {
  position: relative;
  overflow: hidden;
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 44px 40px;
  border-radius: 20px;
  background: linear-gradient(155deg, #1B6E6E, var(--deep-teal) 55%, #144F4F);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.offer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 90% at 85% 8%, rgba(90, 215, 215, 0.34), transparent 70%);
}
.offer-panel > * { position: relative; z-index: 1; }
.offer-panel .eyebrow { color: var(--aqua-on-dark); }
.offer-panel h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin-bottom: 0.6em;
}
.offer-panel p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
.offer-panel .btn { margin-top: 1.2em; }

@media (max-width: 620px) {
  .offer-panel { padding: 32px 24px 28px; }
}

/* ==========================================================================
   Form extras
   ========================================================================== */
.form-optional { font-weight: 500; color: var(--gray); text-transform: none; letter-spacing: 0; }
.form-hint { font-size: 0.82rem; color: var(--gray); margin: 2px 0 0; }

/* ==========================================================================
   Lead magnet — the checklist offer, and the checklist itself once fetched
   ========================================================================== */
.magnet {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  background: var(--white);
  border-radius: 20px;
  padding: 44px;
  box-shadow: var(--shadow-md);
}
.magnet-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 0.5em; }
.magnet-copy p { margin-bottom: 0.9em; }
.magnet-smallprint { font-size: 0.88rem; color: var(--gray); margin: 0; }

.magnet-form { display: grid; gap: 16px; }
.magnet-form .btn { justify-self: start; }

@media (max-width: 860px) {
  .magnet { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
  .magnet-form .btn { justify-self: stretch; }
}

/* ---------- The checklist, once it comes back ---------- */
.checklist-result {
  max-width: 760px;
  margin: 40px auto 0;
  background: var(--white);
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: var(--shadow-md);
}
/* :focus-visible, not :focus — script.js focuses this container so keyboard
   users land on what they asked for, and a mouse user should not get a ring
   drawn round the whole panel for it. */
.checklist-result:focus { outline: none; }
.checklist-result:focus-visible { outline: 3px solid var(--bright-teal); outline-offset: 4px; }
.checklist-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--deep-teal);
  margin: 0 0 0.4em;
}
.checklist-subtitle { font-size: 0.98rem; margin-bottom: 2em; }

.checklist-section { margin-bottom: 30px; }
.checklist-section h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--deep-teal);
  margin: 0 0 0.3em;
}
.checklist-note { font-size: 0.88rem; margin: 0 0 0.9em; }

.checklist-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist-items li {
  position: relative;
  padding-left: 30px;
  font-size: 0.96rem;
  color: var(--ink);
  line-height: 1.55;
}
/* An empty checkbox rather than a bullet — this is meant to be worked through. */
.checklist-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--bright-teal);
  border-radius: 4px;
}

.checklist-footer {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(24, 98, 98, 0.12);
  font-size: 0.92rem;
}

@media (max-width: 620px) {
  .checklist-result { padding: 28px 22px; border-radius: 16px; }
}

@media print {
  /* Someone who just got the checklist is quite likely to print it. */
  .nav, .footer, .magnet, .hero-band, .cta-banner, .section:not(.magnet-section) { display: none !important; }
  .checklist-result { box-shadow: none; padding: 0; max-width: 100%; }
  .magnet-section { padding: 0; background: none; }
}