/* Electrik Kettle site styles.
   Brand palette (Pierce, 2026-09-29, third version): blue 0539A8, black 191516, ice D1FAFF,
   green 34623F, orange EA9010. Black carries text, the problem band, and the footer.
   Blue is kept for actions, so buttons stand out.
   Orange never carries text on a light surface; it fails contrast there.
   Outfit for headings, Inter for body.
   Feel: Apple's approach. Size-specific tracking, translucent chrome, press feedback on
   touch-down, one critically damped spring for motion (motion.js). */

:root {
  --ink: #191516;
  --blue: #0539a8;
  --blue-bright: #0740f7;
  --green: #34623f;
  --orange: #ea9010;
  --ice: #d1faff;
  --ice-soft: #ebfdff;
  --grey: #56585e;
  --hair: #dadce0;
  --cell: #f0f3f5;
  --white: #ffffff;
  --on-band: rgba(255, 255, 255, 0.88);

  --display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 10vw, 8rem);
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
  /* Header sizes in rem, as plain numbers so the condensed scale can be computed. */
  --hh: 7.5;
  --hs: 4.25;
  --hpad: 1;
  --hpad-s: 0.5;
  --header-h: calc(var(--hh) * 1rem);
  --header-h-small: calc(var(--hs) * 1rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --press: 100ms;
  --hover: 200ms;
  --shadow: 0 1px 2px rgba(25, 21, 22, 0.04), 0 8px 24px rgba(25, 21, 22, 0.06);
  --shadow-lift: 0 2px 4px rgba(25, 21, 22, 0.05), 0 18px 40px rgba(25, 21, 22, 0.1);
}

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

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h-small) + 1rem);
}

body {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--body);
  padding-top: calc(var(--header-h) + env(safe-area-inset-top));
  color: var(--grey);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  font-optical-sizing: auto;
  text-wrap: balance;
}
/* Tracking tightens as type grows; leading tightens with it. */
h1 { font-size: clamp(2.5rem, 6.2vw, 4.5rem); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -0.025em; }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.012em; }
p { text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
.section { padding: var(--section) 0; }
.section-tint { background: var(--ice-soft); }
/* Bands: black for the problem, green for the plan, orange for the closing call. */
.section-black { background: var(--ink); color: var(--on-band); }
.section-green { background: var(--green); color: var(--on-band); }
.section-black h2, .section-black h3, .section-green h2, .section-green h3 { color: var(--white); }
.section-orange { background: var(--orange); color: var(--ink); }
.section-black :focus-visible, .section-green :focus-visible, .site-footer :focus-visible { outline-color: var(--ice); }
.section-orange :focus-visible { outline-color: var(--ink); }

.eyebrow {
  font: 600 0.8125rem/1.3 var(--body);
  letter-spacing: 0.04em;
  color: var(--green);
  margin-bottom: 1rem;
}
.section-black .eyebrow { color: var(--orange); }
.section-green .eyebrow { color: var(--ice); }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.5; max-width: 38em; }
/* A phrase that must stay on one line. The heading shrinks on narrow phones so it still fits. */
.one-line { white-space: nowrap; }
.fit-line { font-size: clamp(1.4rem, 7.4vw, 3.1rem); }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 + .lede, .lede-gap { margin-top: 1.25rem; }

/* Skip link */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--ink); color: var(--white); border-radius: var(--radius-sm); }
.skip:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px; }

/* Buttons: feedback lands on press, not release. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 62rem;
  font: 600 1rem/1.2 var(--body);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--press) var(--ease-out), background-color var(--hover) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:active { background: #042f8a; }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:active { background: var(--ice); }
.text-link { display: inline-flex; align-items: center; min-height: 3rem; font-weight: 600; text-decoration: none; touch-action: manipulation; }
.text-link::after { content: "\2192"; margin-left: 0.4em; transition: transform var(--hover) var(--ease-out); }
.section-black .text-link, .section-green .text-link { color: var(--white); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--blue-bright); }
  .btn-light:hover { background: var(--ice-soft); }
  .text-link:hover::after { transform: translateX(3px); }
  .vertical h3 a:hover::after { transform: translateX(3px); }
  .site-nav a:hover { color: var(--ink); }
  .footer-links a:hover, .footer-contact a:hover { color: var(--white); }
  .cookie-open:hover { color: var(--white); }
  .package:hover { transform: translateY(-4px); }
  .post-card:hover { transform: translateY(-4px); background: var(--white); }
  .package:hover::after, .post-card:hover::after { opacity: 1; }
}

/* Header: a translucent layer the page scrolls under. The edge appears only once content meets it. */
.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1.5rem; pointer-events: none; }

/* The logo sits large at the top of the page and the header condenses once you scroll.
   The header's box never changes size. The glass, the logo, and the nav move with transforms,
   so condensing costs no layout. Clicks pass through the empty band below the condensed glass. */
.site-header {
  --h: var(--header-h);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  pointer-events: none;
}
.site-header.scrolled { --h: var(--header-h-small); }
.site-header::before, .site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 0; }
.site-header::before {
  height: 100%;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transform-origin: top;
  transition: transform 280ms var(--ease-out);
  pointer-events: auto;
}
.site-header.scrolled::before { transform: scaleY(calc(var(--hs) / var(--hh))); }
/* The edge where content meets the glass. It fades in; its shadow is never animated. */
.site-header::after {
  top: calc(var(--header-h-small) + env(safe-area-inset-top));
  height: 1.25rem;
  background: linear-gradient(rgba(25, 21, 22, 0.1), rgba(25, 21, 22, 0));
  border-top: 1px solid rgba(25, 21, 22, 0.08);
  opacity: 0;
  transition: opacity var(--hover) var(--ease-out);
}
.site-header.scrolled::after { opacity: 1; }
.header-inner { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; height: var(--header-h); }
.header-inner > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; touch-action: manipulation; transform-origin: top left; transition: transform 280ms var(--ease-out); }
.brand-logo { height: calc((var(--hh) - 2 * var(--hpad)) * 1rem); width: auto; }
.site-header.scrolled .brand { transform: translateY(calc((var(--hpad-s) - var(--hpad)) * 1rem)) scale(calc((var(--hs) - 2 * var(--hpad-s)) / (var(--hh) - 2 * var(--hpad)))); }
/* The menu button rides up to the condensed centre line. `translate` leaves `transform` free
   for its press state. */
.site-header.scrolled .menu-toggle { translate: 0 calc((var(--hs) - var(--hh)) / 2 * 1rem); }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.5rem; color: var(--grey); font-weight: 500; font-size: 0.9375rem; text-decoration: none; touch-action: manipulation; transition: color var(--hover) var(--ease-out); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav .nav-cta { min-height: 2.75rem; margin-left: 0.5rem; padding: 0.5rem 1.2rem; color: var(--white); }

.menu-toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; touch-action: manipulation; transition: transform var(--press) var(--ease-out), translate 280ms var(--ease-out), background-color var(--hover) var(--ease-out); }
.menu-toggle:active { transform: scale(0.94); background: rgba(25, 21, 22, 0.06); }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 1.25rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms var(--ease-out), opacity 140ms var(--ease-out); }
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(90deg); }
.menu-toggle[aria-expanded="true"] span::after { opacity: 0; }

/* Hero */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-sub { margin-top: 1.5rem; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: 2rem; }

/* Hero picture: the promise, drawn. A month that fills with booked work. */
.calendar { padding: 1.25rem; border-radius: 1.75rem; background: var(--white); box-shadow: var(--shadow-lift); border: 1px solid rgba(25, 21, 22, 0.06); }
.calendar-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.25rem 0.25rem 1rem; }
.calendar-title { font: 600 1.05rem/1.2 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.calendar-note { font-size: 0.8125rem; color: var(--green); font-weight: 600; }
.calendar-days, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.calendar-days { margin-bottom: 0.4rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: #8a8d94; text-align: center; }
.day { position: relative; aspect-ratio: 1 / 1; border-radius: 0.6rem; background: var(--cell); }
.day.off { background: transparent; }
.day b { position: absolute; inset: 0; border-radius: inherit; background: var(--blue); }
.day b.green { background: var(--green); }
.day b.orange { background: var(--orange); }
.day b.soft { background: var(--ice); }

/* Photos. Every photo is cropped to its slot's shape and served at the size it is shown. */
.photo { display: block; width: 100%; height: auto; border-radius: var(--radius); object-fit: cover; background: var(--cell); }
.hero-photo { aspect-ratio: 4 / 3; border-radius: 1.75rem; box-shadow: var(--shadow-lift); }
.page-hero.has-photo .hero-copy { max-width: none; }
.verticals { padding-top: 0; }
.vertical-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.vertical-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vertical { margin: 0; }
.vertical .photo { aspect-ratio: 4 / 3; }
.vertical figcaption { padding: 1.1rem 0.25rem 0; }
.vertical h3 + p { margin-top: 0.35rem; }
.vertical h3 a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration: none; }
.vertical h3 a::after { content: "\2192"; margin-left: 0.4em; color: var(--blue); transition: transform var(--hover) var(--ease-out); }

/* Proof bar */
.proof { padding: 0 0 var(--section); }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.stat { padding: 1.75rem; border-radius: var(--radius); background: var(--ice); }
.stat-figure { font: 600 clamp(2.1rem, 4vw, 3rem)/1 var(--display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat p { margin-top: 0.75rem; font-size: 0.9688rem; line-height: 1.5; }

/* Stakes */
.stakes-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.stakes-list li { position: relative; padding: 1.35rem 0 1.35rem 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.22); font-size: 1.125rem; line-height: 1.45; color: var(--white); }
.stakes-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.stakes-list li::before { content: ""; position: absolute; left: 0; top: 1.95rem; width: 0.6rem; height: 0.6rem; border-radius: 0.15rem; background: var(--orange); }

/* Card grids */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.card { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.section:not(.section-tint) .card { background: var(--ice-soft); box-shadow: none; }
.card h3 + p { margin-top: 0.6rem; }
.card-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1.25rem; border-radius: 0.75rem; background: var(--ice); color: var(--blue); }
.card-mark svg { width: 1.25rem; height: 1.25rem; }

/* Guide */
.guide-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.guide-copy p + p { margin-top: 1.1rem; }
.guide-copy .lede { color: var(--ink); }
.founder { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--ice-soft); }
.section-tint .founder { background: var(--white); box-shadow: var(--shadow); }
.founder h3 { margin-bottom: 0.2rem; }
.founder-role { font-size: 0.9375rem; color: var(--green); font-weight: 600; }
.founder .founder-bio { margin-top: 1rem; }
.founder-bio a { font-weight: 600; }
.founder-photo { width: 100%; max-width: 20rem; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 auto 1.5rem; border-radius: var(--radius); background: var(--hair); }
.founder-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.founder-photo-small { width: 6rem; margin: 0; border-radius: 1rem; }
.founder-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: 0.75rem; }

/* Plan */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: step; }
.step { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); counter-increment: step; }
.step::before { content: counter(step); display: block; margin-bottom: 1.5rem; font: 600 2.75rem/1 var(--display); letter-spacing: -0.03em; color: var(--ice); }
.step h3 + p { margin-top: 0.6rem; }
.agreement { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1rem 3rem; align-items: center; margin-top: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--white); color: var(--grey); }
.agreement h3 { color: var(--ink); }
.agreement .eyebrow { color: var(--green); }
.agreement ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.agreement li { padding: 0.55rem 1rem; border-radius: 62rem; background: var(--ice); color: var(--ink); font-weight: 500; font-size: 0.9375rem; }

/* Packages */
.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.package { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); color: inherit; text-decoration: none; touch-action: manipulation; transition: transform var(--hover) var(--ease-out); }
/* The lifted shadow lives on its own layer and fades in, so hover never repaints a shadow. */
.package::after, .post-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-lift); opacity: 0; pointer-events: none; transition: opacity var(--hover) var(--ease-out); }
.package:active { transform: scale(0.985); }
.package-price { margin: 0.35rem 0 1rem; font: 600 1.05rem/1.3 var(--display); color: var(--blue); font-variant-numeric: tabular-nums; }
.package p { flex: 1; }
.package .text-link { margin-top: 1.25rem; min-height: 0; color: var(--blue); }

/* Explainer */
.explainer { max-width: 44rem; }
.explainer p { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.65; }
.explainer p.close { color: var(--ink); font-weight: 600; }

/* Final call */
.final { text-align: center; }
.final h2 { max-width: 20em; margin: 0 auto; }
.final .lede { margin: 1.25rem auto 2rem; }

/* Service pages */
.page-hero .hero-copy { max-width: 52rem; }
.page-hero .price { margin-top: 0; }
.package-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price { margin-top: 1.5rem; font: 600 1.2rem/1.3 var(--display); letter-spacing: -0.01em; color: var(--blue); font-variant-numeric: tabular-nums; }
.section-tint .stat { background: var(--white); box-shadow: var(--shadow); }
.proof-copy { max-width: 44rem; margin-top: 2rem; font-size: 1.125rem; line-height: 1.65; }
.runs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.runs .card h3 + p { margin-top: 0.6rem; }

.proof-grid-one { grid-template-columns: minmax(0, 22rem); margin-top: 1rem; }
.proof-grid-two { grid-template-columns: repeat(2, minmax(0, 22rem)); }
.also { margin-top: 1.5rem; }
.card .text-link { margin-top: 0.75rem; min-height: 2.75rem; }
.link-list { margin-top: 0.4rem; }
.link-list a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; text-decoration: none; touch-action: manipulation; }
.card-title { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.012em; }
.card-title + p, .card-title + ul { margin-top: 0.6rem; }
.check-list li { position: relative; padding-left: 1.5rem; }
.check-list li + li { margin-top: 0.6rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--orange); }

/* Quotes */
.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.quote { margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--ice-soft); }
.quote-long { grid-column: 1 / -1; }
.quote blockquote { margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.6; }
.quote blockquote p + p { margin-top: 1rem; }
.quote figcaption { margin-top: 1.25rem; font-weight: 600; color: var(--green); font-size: 0.9375rem; }

/* Forms on light surfaces */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact { padding-top: 0; }
.contact-info { display: grid; gap: 1rem; }
.contact-info h2 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.012em; margin-bottom: 0.5rem; }
.contact-info a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.field + .field { margin-top: 1.25rem; }
.field label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.field input, .field textarea { display: block; width: 100%; min-height: 3.25rem; padding: 0.85rem 1rem; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font: 400 max(16px, 1rem)/1.4 var(--body); transition: border-color var(--hover) var(--ease-out); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(5, 57, 168, 0.14); }
.form .btn { margin-top: 1.75rem; }
.form-note { min-height: 1.5em; margin-top: 0.75rem; font-size: 0.9375rem; }

/* Blog. Every card carries the same four parts in the same order: tag, title, excerpt, byline. */
.blog { padding-top: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.post-card { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2rem); border-radius: var(--radius); background: var(--ice-soft); color: inherit; text-decoration: none; touch-action: manipulation; transition: transform var(--hover) var(--ease-out), background-color var(--hover) var(--ease-out); }
.post-card:active { transform: scale(0.985); }
.post-image { aspect-ratio: 3 / 2; margin-bottom: 1.25rem; border-radius: var(--radius-sm); }
.post-featured .post-image { grid-column: 2; grid-row: 1 / span 3; margin-bottom: 0; align-self: stretch; height: 100%; }
.post-featured .post-excerpt { grid-column: 1; grid-row: auto; align-self: start; margin-top: 1rem; }
.article-photo { max-width: 44rem; aspect-ratio: 3 / 2; margin-bottom: clamp(2rem, 4vw, 3rem); }
.post-tag { font: 600 0.8125rem/1.3 var(--body); letter-spacing: 0.04em; color: var(--green); }
.post-card h2 { margin: 0.75rem 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.015em; }
.post-excerpt { flex: 1; font-size: 0.9688rem; line-height: 1.55; }
.post-meta { font-size: 0.875rem; font-weight: 500; color: #6b6e75; }
.post-sep { margin: 0 0.35em; color: #9a9da3; }
.post-when { white-space: nowrap; }
.post-card .post-by { display: block; color: var(--ink); font-weight: 600; }
.post-card .post-by + .post-sep { display: none; }
.post-featured .post-by { display: inline; }
.post-featured .post-by + .post-sep { display: inline; }
.post-card .post-meta { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(25, 21, 22, 0.1); }
.post-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; align-content: center; padding: clamp(2rem, 4vw, 3rem); background: var(--ice); }
.post-featured .post-tag, .post-featured h2 { grid-column: 1; }
.post-featured h2 { margin-bottom: 0; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.1; letter-spacing: -0.025em; }
.post-featured .post-excerpt { font-size: 1.0625rem; }
.post-featured .post-meta { grid-column: 1 / -1; }
.post-kicker { margin-top: 1rem; font: 500 clamp(1.2rem, 2vw, 1.45rem)/1.3 var(--display); letter-spacing: -0.012em; color: var(--ink); }
.article { padding: clamp(3rem, 6vw, 5rem) 0 var(--section); }
.article-head, .prose { max-width: 44rem; }
.article-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.article-head h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.028em; }
.article-head .lede { margin: 1.25rem 0 1.5rem; }
.article-head .eyebrow a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding-right: 0.6rem; }
.article-head .eyebrow span { margin-right: 0.6rem; color: #9a9da3; }
.prose { font-size: 1.125rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { margin-top: 3rem; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; }
.prose h3 { margin-top: 2.5rem; font-size: 1.45rem; letter-spacing: -0.015em; }
.prose h4 { margin-top: 2rem; font: 600 1.15rem/1.3 var(--display); color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { overflow-wrap: anywhere; }
.page-head + .article { padding-top: 0; }
.case-proof { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.case-list { padding-top: 0; }
.case-body { padding-top: 0; }
.page-head .eyebrow a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-right: 0.6rem; color: inherit; text-decoration: none; }
.page-head .eyebrow span { margin-right: 0.6rem; color: #9a9da3; }
.related-links { max-width: 44rem; margin-top: 3rem; padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius); background: var(--ice-soft); }
.related-links h2 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.012em; }
.related-links ul { margin-top: 0.5rem; }
.related-links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-decoration: none; }
.related-links a::after { content: "\2192"; margin-left: 0.4em; }
.related-reading .post-card h3 { margin-top: 0.6rem; font-size: 1.25rem; line-height: 1.25; }

/* Booking page */
.page-head { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.page-head .lede { margin-top: 1.25rem; }
.page-head-only { padding-bottom: var(--section); }
.booking { padding-bottom: var(--section); }
.booking iframe { display: block; width: 100%; min-height: 46rem; border: 0; border-radius: var(--radius); background: var(--ice-soft); }

/* Footer */
.site-footer { padding: clamp(3.5rem, 7vw, 5.5rem) 0 calc(2rem + env(safe-area-inset-bottom)); background: var(--ink); color: var(--on-band); font-size: 0.9688rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 2.5rem 2rem; }
.footer-logo { height: 11rem; width: auto; margin-bottom: 1.5rem; }
.footer-brand p { max-width: 22em; }
.site-footer h3 { margin-bottom: 1rem; font: 600 0.8125rem/1.3 var(--body); letter-spacing: 0.04em; color: var(--white); }
.footer-links a, .footer-contact a, .footer-base a { display: inline-flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--on-band); text-decoration: none; transition: color var(--hover) var(--ease-out); }
.signup-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.signup input { flex: 1 1 12rem; min-width: 0; min-height: 3rem; padding: 0 1.1rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 62rem; background: rgba(255, 255, 255, 0.12); color: var(--white); font: 400 max(16px, 1rem)/1.2 var(--body); }
.signup input::placeholder { color: rgba(255, 255, 255, 0.75); }
.signup-note { min-height: 1.5em; margin-top: 0.75rem; font-size: 0.875rem; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.24); font-size: 0.875rem; }
.footer-base a { color: var(--on-band); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.cookie-open { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--on-band); font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; touch-action: manipulation; }

/* Cookie choice: a quiet panel at the bottom corner, never a wall over the page. */
.consent { position: fixed; left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; max-width: 44rem; margin: 0 auto; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-lift); border: 1px solid rgba(25, 21, 22, 0.08); font-size: 0.9375rem; }
.consent[hidden] { display: none; }
.consent p { flex: 1 1 16rem; color: var(--ink); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent .btn { min-height: 2.75rem; padding: 0.5rem 1.25rem; }
.consent .btn-light { background: var(--cell); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Motion gate: <head> sets html.motion before first paint and motion.js takes over the hero,
   so the headline never flashes before its reveal. The head script drops the class after
   1.5 s if motion.js never runs. */
.motion .hero:not(.page-hero) h1, .motion .calendar .day b { opacity: 0; }
/* splitText clip wrappers: the tight line-height is shorter than Outfit's descenders, so the clip
   box grows and matching negative margins keep the line box unchanged. */
.hero h1 > span { display: inline-block; padding: 0.1em 0 0.2em; margin: -0.1em 0 -0.2em; }

/* Layout steps. Kept last so they win on source order. */
@media (max-width: 60rem) {
  .hero-grid, .stakes-grid, .guide-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-photo { max-width: 34rem; }
  .vertical-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar { max-width: 26rem; }
  .plan-grid, .package-grid, .package-grid-two, .runs { grid-template-columns: minmax(0, 1fr); }
  .agreement { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62.0625rem) {
  .site-nav { transition: translate 280ms var(--ease-out); }
  .site-header.scrolled .site-nav { translate: 0 calc((var(--hs) - var(--hh)) / 2 * 1rem); }
}

@media (max-width: 62rem) {
  .menu-toggle { display: inline-flex; }
  /* The menu drops from the header it belongs to and leaves the same way. */
  .site-nav {
    position: absolute;
    top: calc(var(--h) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100svh - var(--h) - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem max(var(--gutter), env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 24px 40px -20px rgba(25, 21, 22, 0.3);
    transform-origin: top right;
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    visibility: hidden;
    transition: transform 160ms var(--ease-out), opacity 140ms var(--ease-out), visibility 0s linear 160ms;
  }
  .site-nav.open { transform: none; opacity: 1; visibility: visible; transition: transform 220ms var(--ease-out), opacity 180ms var(--ease-out), visibility 0s; }
  .site-nav.instant { transition: none; }
  .site-nav a { justify-content: flex-start; min-height: 3.25rem; padding: 0; font-size: 1.125rem; color: var(--ink); border-bottom: 1px solid rgba(25, 21, 22, 0.08); }
  .site-nav .nav-cta { justify-content: center; margin: 1rem 0 0; min-height: 3rem; border-bottom: 0; color: var(--white); }
}

@media (max-width: 47.5rem) {
  .proof-grid, .proof-grid-two, .card-grid, .quote-grid, .blog-grid, .post-featured, .vertical-grid, .vertical-grid-four { grid-template-columns: minmax(0, 1fr); }
  .post-featured .post-excerpt { grid-column: 1; grid-row: auto; margin-top: 0.75rem; }
  .post-featured .post-image { grid-column: 1; grid-row: 1; height: auto; margin-bottom: 1.25rem; }
  .post-featured h2 { margin-bottom: 0; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .booking iframe { min-height: 52rem; }
}

/* Phones turned sideways: a short screen gets a compact header and a menu that lays out in rows. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --hh: 4.75; --hs: 3.5; --hpad: 0.375; --hpad-s: 0.375; }
  .site-nav a { min-height: 2.75rem; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 62rem) {
  .site-nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 1.75rem; padding-top: 0.25rem; padding-bottom: 1rem; }
  .site-nav a { border-bottom: 0; font-size: 1rem; }
  .site-nav .nav-cta { margin: 0; padding: 0.5rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, .package:active, .package:hover, .post-card:active, .post-card:hover, .menu-toggle:active { transform: none; }
  .site-nav, .site-nav.open { transform: none; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .site-nav.open { transition: opacity 200ms ease, visibility 0s; }
  .text-link::after, .site-header::before, .site-header::after, .brand, .menu-toggle, .package::after, .post-card::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header::before, .site-nav { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header::before, .site-nav { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--ink); }
  body { color: #33353a; }
  .card, .stat, .founder, .package, .quote, .post-card, .photo { border: 1px solid var(--ink); }
}