/* Prime PT
   Framed-screen layout with folder-tab header, Anton headlines and Inter body.
   Brand colours live in :root. Change a colour once and it updates everywhere. */

@font-face { font-family: "Anton"; src: url("/assets/fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Brand (from the Prime PT logo and old site) */
  --frame: #000000;
  --black: #0c0e12;
  --black-2: #14171d;
  --surface: #1c2028;
  --line-dark: #2a2f39;
  --white: #ffffff;
  --paper: #f3f4f6;
  --grey: #e7e9ee;
  --line: #d9dde4;
  --text: #f5f6f8;
  --muted: #a6abb5;
  --ink: #0c0e12;
  --ink-muted: #545b68;
  --accent: #00bfff;          /* Prime PT electric blue */
  --accent-hover: #4dd2ff;
  --accent-ink: #00658a;      /* blue text on light backgrounds */
  --deep: #00bfff;            /* Prime PT blue panels (dark text sits on these) */
  --on-deep: #0c0e12;
  --deep-soft: rgba(12, 14, 18, .72); /* secondary text on blue panels */
  --blue-text: #0077b6;       /* Prime PT blue, deepened for small text on white (passes AA) */
  --blue-display: #0095d9;    /* Prime PT blue for big headline words on white */
  --aqua: #0c0e12;            /* accents on blue panels */
  --ok: #7fd1a1;

  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --f: 0.625rem;                  /* frame thickness */
  --tab-h: 3.875rem;              /* height of the header tabs */
  --r: 1.375rem;                  /* screen corner radius */
  --wrap: 77.5rem;
  --gutter: clamp(1.125rem, 4.5vw, 4rem);
  --section: clamp(5rem, 10vw, 9.375rem);
  --radius: 1rem;
  --radius-sm: 0.625rem;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* long, soft Apple-style settle */
}

/* Big screens: everything scales up in proportion, so a 27 inch monitor looks like a 13 inch laptop, just bigger */
@media (min-width: 1480px) { html { font-size: calc(100vw / 92.5); } }

@view-transition { navigation: auto; }
/* Page transitions: the frame and tabs stay put, the page underneath fades and slides */
::view-transition-group(root) { animation-duration: .8s; }
::view-transition-old(root) { animation: vt-out .45s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .9s var(--ease-out) .08s both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-2rem) scale(.98); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(3rem); } }
.frame { view-transition-name: frame; }
.tab-logo { view-transition-name: tab-logo; }
.tab-menu { view-transition-name: tab-menu; }
.tab-cta { view-transition-name: tab-cta; }
/* Browsers without view transitions get a simple fade instead (see site.js) */
.no-vt main, .no-vt .insta, .no-vt .site-footer { animation: vt-in .9s var(--ease-out) both; }
.no-vt.is-leaving main, .no-vt.is-leaving .insta, .no-vt.is-leaving .site-footer { animation: vt-out .4s var(--ease-out) both; }



*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--tab-h) + var(--f)); background: var(--frame); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
body { margin: 0; background: var(--black); color: var(--text); font: 400 1.0625rem/1.65 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 0.25rem; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0 0 .5em; text-wrap: balance; }
h1, h2, .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .92; }
h1 { font-size: clamp(3.1rem, 8.6vw, 8.4rem); }
h2 { font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
h3 { font: 600 clamp(1.15rem, 1.6vw, 1.35rem)/1.25 var(--font-body); letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; color: var(--accent); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.skip { position: fixed; left: -9999px; top: 0.875rem; z-index: 200; background: var(--accent); color: var(--ink); padding: 0.625rem 1rem; border-radius: 0.375rem; font-weight: 700; }
.skip:focus { left: 1.25rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 55rem; }
.section { padding: var(--section) 0; position: relative; }
.label, .eyebrow { font: 500 .98rem/1.3 var(--font-body); color: var(--accent); margin: 0 0 1.125rem; letter-spacing: 0; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 58ch; }
.muted { color: var(--muted); }
.small-print { font-size: .85rem; color: var(--muted); }
.center { text-align: center; }
.center .title, .center .lead { margin-left: auto; margin-right: auto; }
.center .btn-row { justify-content: center; }
.title { max-width: 16ch; }
.sec-head { display: grid; gap: 1.25rem 3.75rem; align-items: end; margin-bottom: clamp(2.25rem, 5vw, 4rem); }
.sec-head .title { margin: 0; }
.sec-head .lead { margin: 0; }
@media (min-width: 960px) { .sec-head { grid-template-columns: 1.3fr 1fr; } }

/* Section colour themes */
.s-dark { background: var(--black); color: var(--text); }
.s-darker { background: var(--black-2); color: var(--text); }
.s-light { background: var(--white); color: var(--ink); }
.s-paper { background: var(--paper); color: var(--ink); }
.s-blue { background: var(--deep); color: var(--on-deep); }
.s-light .lead, .s-paper .lead, .s-light .muted, .s-paper .muted, .s-light .small-print, .s-paper .small-print { color: var(--ink-muted); }
.s-light .label, .s-paper .label, .s-light .eyebrow, .s-paper .eyebrow { color: var(--accent-ink); }
.s-light h1 em, .s-light h2 em, .s-paper h2 em { color: var(--blue-display); }
.s-blue .label, .s-blue .eyebrow { color: var(--aqua); }
.s-blue .lead, .s-blue .muted { color: var(--deep-soft); }
.s-blue h2 em { color: var(--aqua); }

/* ===== The frame ===== */
.frame { position: fixed; inset: var(--f) var(--f) var(--f) var(--f); border-radius: var(--r); box-shadow: 0 0 0 3.75rem var(--frame); pointer-events: none; z-index: 70; }

.tab { position: fixed; z-index: 80; background: var(--frame); display: flex; align-items: center; }
.tab::before, .tab::after { content: ""; position: absolute; width: var(--r); height: var(--r); pointer-events: none; }
.tab-logo { top: 0; left: 0; height: calc(var(--tab-h) + var(--f)); padding: var(--f) 1.625rem 0 calc(var(--f) + 1rem); border-bottom-right-radius: var(--r); gap: 0.75rem; text-decoration: none; color: #fff; }
.tab-logo::before { left: 100%; top: var(--f); background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - .5px), var(--frame) var(--r)); }
.tab-logo::after { left: var(--f); top: 100%; background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - .5px), var(--frame) var(--r)); }
.brand-logo { width: 2.375rem; height: 2.375rem; object-fit: contain; border-radius: 0.5625rem; }
.brand-name { font: 400 1.5rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.brand-name span { color: var(--accent); }

.tab-menu { top: 0; right: 0; height: calc(var(--tab-h) + var(--f)); padding: var(--f) calc(var(--f) + 0.625rem) 0 1.375rem; border-bottom-left-radius: var(--r); gap: 0.25rem; }
.tab-menu::before { right: 100%; top: var(--f); background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - .5px), var(--frame) var(--r)); }
.tab-menu::after { right: var(--f); top: 100%; background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - .5px), var(--frame) var(--r)); }
.tab-link { color: #d7dae0; text-decoration: none; font: 500 .95rem/1 var(--font-body); padding: 0.75rem 0.875rem; border-radius: 0.5rem; }
.tab-link:hover { color: var(--accent); }
.nav-toggle { display: inline-flex; align-items: center; gap: 0.75rem; height: 2.75rem; padding: 0 0.5rem 0 1rem; margin-left: 0.375rem; border: 0; border-radius: 62.4375rem; background: #1a1d24; color: #fff; font: 600 .95rem/1 var(--font-body); cursor: pointer; }
.nav-toggle:hover { background: #242833; }
.burger { position: relative; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.burger span { position: absolute; width: 0.75rem; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease); }
.burger span:first-child { transform: translateY(-3px); }
.burger span:last-child { transform: translateY(3px); }
.nav-toggle[aria-expanded="true"] .burger span:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger span:last-child { transform: rotate(-45deg); }

.tab-cta { right: 0; bottom: 0; height: calc(3.625rem + var(--f)); padding: 0 calc(var(--f) + 0.25rem) var(--f) 1.375rem; border-top-left-radius: var(--r); }
.tab-cta::before { right: var(--f); bottom: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--frame) var(--r)); }
.tab-cta::after { right: 100%; bottom: var(--f); background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--frame) var(--r)); }
.cta-slant { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.875rem; background: var(--accent); color: var(--ink); text-decoration: none; font: 700 .95rem/1 var(--font-body); clip-path: polygon(0.75rem 0, 100% 0, calc(100% - 0.75rem) 100%, 0 100%); transition: background .25s, padding .35s var(--ease); }
.cta-slant:hover { background: #fff; padding: 0 2.25rem; }
.cta-slant:focus-visible { outline: none; background: #fff; }


/* Full-screen menu */
.site-menu { position: fixed; inset: var(--f); border-radius: var(--r); background: var(--deep); color: var(--on-deep); z-index: 75; padding: calc(var(--tab-h) + 2.5rem) var(--gutter) 5.625rem; overflow-y: auto; clip-path: inset(0 0 100% 0 round var(--r)); visibility: hidden; transition: clip-path .7s var(--ease), visibility 0s .7s; }
.site-menu.is-open { clip-path: inset(0 0 0 0 round var(--r)); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
.menu-inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 3rem; }
@media (min-width: 900px) { .menu-inner { grid-template-columns: 1.6fr 1fr; align-items: end; } }
.menu-links { list-style: none; }
.menu-links a { display: inline-block; font: 400 clamp(2rem, min(5vw, 6vh), 4.4rem)/1.06 var(--font-display); text-transform: uppercase; text-decoration: none; color: var(--on-deep); transition: color .2s, background .2s, transform .35s var(--ease); }
.menu-links a:hover { transform: translateX(0.625rem); color: #fff; }
.menu-links a[aria-current="page"] { background: #fff; padding: 0 .12em; }
.site-menu.is-open .menu-links li { animation: menuIn .7s var(--ease) both; }
.site-menu.is-open .menu-links li:nth-child(2) { animation-delay: .04s; } .site-menu.is-open .menu-links li:nth-child(3) { animation-delay: .08s; }
.site-menu.is-open .menu-links li:nth-child(4) { animation-delay: .12s; } .site-menu.is-open .menu-links li:nth-child(5) { animation-delay: .16s; }
.site-menu.is-open .menu-links li:nth-child(6) { animation-delay: .2s; } .site-menu.is-open .menu-links li:nth-child(7) { animation-delay: .24s; }
.site-menu.is-open .menu-links li:nth-child(8) { animation-delay: .28s; } .site-menu.is-open .menu-links li:nth-child(9) { animation-delay: .32s; }
.site-menu.is-open .menu-links li:nth-child(10) { animation-delay: .36s; } .site-menu.is-open .menu-links li:nth-child(11) { animation-delay: .4s; }
@keyframes menuIn { from { opacity: 0; transform: translateY(2.5rem); } }
.menu-side .label { color: var(--aqua); margin-top: 1.625rem; margin-bottom: 0.625rem; }
.menu-side ul { list-style: none; display: grid; gap: 0.375rem; }
.menu-side a { color: var(--on-deep); text-decoration: none; font-size: 1.05rem; font-weight: 500; }
.menu-side a:hover { text-decoration: underline; }
.menu-side .btn { margin-top: 1.875rem; }
body.menu-open { overflow: hidden; }
html:not(.js) .site-menu { position: relative; inset: auto; clip-path: none; visibility: visible; border-radius: 0; padding-top: 6.875rem; }

@media (max-width: 899px) {
  .tab-link { display: none; }
}
@media (max-width: 767px) {
  :root { --f: 0.375rem; --tab-h: 3.375rem; --r: 1.125rem; }
  .tab-logo { padding-left: calc(var(--f) + 0.75rem); padding-right: 1.125rem; }
  .brand-name { font-size: 1.3rem; }
  .brand-logo { width: 2rem; height: 2rem; }
  .nav-toggle { height: 2.5rem; }
  .tab-cta { display: none; }
  /* No bottom edge on phones: the frame runs off the bottom of the screen so the page meets the browser bar */
  .frame { bottom: calc(-1 * var(--r) - 0.25rem); }
  .site-menu { bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
  .site-menu { clip-path: inset(0 0 100% 0 round var(--r) var(--r) 0 0); }
  .site-menu.is-open { clip-path: inset(0 0 0 0 round var(--r) var(--r) 0 0); }
}

/* ===== Buttons ===== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 3.25rem; padding: 0.875rem 1.875rem; border: 0; background: transparent; font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; clip-path: polygon(0.75rem 0, 100% 0, calc(100% - 0.75rem) 100%, 0 100%); transition: background .25s, color .25s, padding .35s var(--ease); }
.btn .icon { transition: transform .3s var(--ease); }
.btn:hover .icon-arrow-right { transform: translateX(0.25rem); }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: #fff; color: var(--ink); }
.btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .2); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--accent); color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--ink); color: #fff; }
.s-light .btn-ghost, .s-paper .btn-ghost, .band-light .btn-ghost { background: rgba(12, 14, 18, .07); color: var(--ink); }
.s-light .btn-ghost:hover, .s-paper .btn-ghost:hover { background: rgba(12, 14, 18, .14); }
.s-light .btn-primary:hover, .s-paper .btn-primary:hover { background: var(--ink); color: #fff; }
.s-blue .btn-primary { background: #fff; color: var(--ink); }
.s-blue .btn-primary:hover { background: var(--ink); color: #fff; }
.btn-sm { min-height: 2.625rem; padding: 0.625rem 1.375rem; font-size: .92rem; }
.btn-lg { min-height: 3.75rem; padding: 1rem 2.375rem; font-size: 1.08rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.875rem; }
.text-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.s-light .text-link, .s-paper .text-link { color: var(--blue-text); }

/* Missing photo placeholder (only until real photos are added) */
.img-missing { display: grid; place-items: center; aspect-ratio: 4 / 5; width: 100%; background: repeating-linear-gradient(135deg, #1c2028, #1c2028 0.75rem, #232833 0.75rem, #232833 1.5rem); color: var(--muted); font: 500 .8rem/1.3 var(--font-body); text-align: center; padding: 0.75rem; }

/* Bracket tags */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.tags li { font: 600 .78rem/1 var(--font-body); padding: 0.4375rem 0.625rem; background: rgba(12, 14, 18, .85); color: #fff; border-radius: 0.25rem; }
.s-light .tags li, .s-paper .tags li { background: var(--grey); color: var(--ink); }

/* ===== Home hero ===== */
.hero { position: relative; min-height: max(40rem, 100svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: var(--black); }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg picture { display: block; width: 100%; height: 100%; }
.hero-bg img, .hero-bg .img-missing { width: 100%; height: 100%; object-fit: cover; object-position: 72% 18%; aspect-ratio: auto; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 14, 18, .96) 0%, rgba(12, 14, 18, .82) 34%, rgba(12, 14, 18, .25) 68%, rgba(12, 14, 18, .1) 100%), linear-gradient(0deg, rgba(12, 14, 18, .9) 0%, rgba(12, 14, 18, 0) 45%); }
.hero-inner { width: 100%; max-width: 87.5rem; margin: 0 auto; padding: calc(var(--tab-h) + 4.375rem) var(--gutter) clamp(5.625rem, 9vw, 7.5rem); display: grid; gap: 1.875rem; align-items: end; }
.hero h1 { max-width: 12ch; margin: 1.375rem 0 0; font-size: clamp(3rem, 6.6vw, 6.8rem); }
.hero .lead { color: #d6d9df; margin: 1.375rem 0 0; max-width: 46ch; }
.proof-chip { display: inline-flex; align-items: center; gap: 0.875rem; padding: 0.5rem 1rem 0.5rem 0.5rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 62.4375rem; backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); font-size: .88rem; line-height: 1.3; }
.avatars { display: flex; }
.avatars img, .avatars .img-missing { width: 2.375rem; height: 2.375rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--black); aspect-ratio: 1; padding: 0; }
.avatars > * + * { margin-left: -12px; }
.proof-chip strong { display: block; font-weight: 700; }
.proof-chip span { color: #c5c9d1; }
.hero-card { justify-self: end; display: grid; grid-template-columns: 6rem 1fr; gap: 0.875rem; align-items: center; padding: 0.625rem 1.125rem 0.625rem 0.625rem; background: rgba(255, 255, 255, .92); color: var(--ink); border-radius: 0.875rem; text-decoration: none; max-width: 18.75rem; transition: transform .35s var(--ease); }
.hero-card:hover { transform: translateY(-4px); }
.hero-card img, .hero-card .img-missing { width: 6rem; height: 4.5rem; object-fit: cover; border-radius: 0.5rem; aspect-ratio: auto; }
.hero-card strong { display: block; font: 400 1.15rem/1.05 var(--font-display); text-transform: uppercase; }
.hero-card span { font-size: .85rem; color: var(--ink-muted); }
@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1fr auto; }
  .hero-bg { left: 36%; }
  .hero::before { background: linear-gradient(90deg, var(--black) 0%, var(--black) 36%, rgba(12, 14, 18, .55) 48%, rgba(12, 14, 18, 0) 70%), linear-gradient(0deg, rgba(12, 14, 18, .85) 0%, rgba(12, 14, 18, 0) 35%); }
  .hero-bg img { object-position: 50% 20%; }
}
@media (max-width: 767px) {
  .hero { min-height: 92svh; }
  .hero::before { background: linear-gradient(0deg, rgba(12, 14, 18, .98) 0%, rgba(12, 14, 18, .85) 45%, rgba(12, 14, 18, .2) 80%); }
  .hero-bg img { object-position: 55% 50%; }
  .hero-card { justify-self: start; }
}

/* Marquee ticker */
.ticker { background: var(--accent); color: var(--ink); overflow: hidden; padding: 1rem 0; border-top: 1px solid rgba(0, 0, 0, .1); }
.ticker-track { display: flex; width: max-content; animation: tick 40s linear infinite; }
.ticker ul { list-style: none; display: flex; flex: none; }
.ticker li { display: flex; align-items: center; gap: 1.75rem; padding-right: 1.75rem; font: 400 clamp(1.3rem, 2.2vw, 1.8rem)/1 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.ticker li::after { content: ""; width: 0.625rem; height: 0.625rem; background: var(--ink); transform: rotate(45deg); }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker.is-paused .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; flex-wrap: wrap; } .ticker ul + ul { display: none; } }

/* ===== Inner page hero ===== */
.page-hero { position: relative; background: var(--black); overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(0, 191, 255, .18), transparent); pointer-events: none; }
.page-hero-inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: calc(var(--tab-h) + clamp(3.125rem, 7vw, 6.25rem)) var(--gutter) clamp(3.75rem, 7vw, 6.25rem); display: grid; gap: 2.5rem; align-items: end; }
.page-hero h1 { max-width: 14ch; font-size: clamp(2.9rem, 7vw, 6.6rem); }
.page-hero .lead { color: #c9cdd4; }
.page-hero.has-image .page-hero-media img, .page-hero.has-image .page-hero-media .img-missing { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 960px) { .page-hero.has-image .page-hero-inner { grid-template-columns: 1.25fr .75fr; gap: 4rem; } .page-hero.has-image .page-hero-media { max-width: 26.25rem; justify-self: end; width: 100%; } }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; font-size: .88rem; color: var(--muted); margin-bottom: 1.625rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.375rem; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text); }

/* ===== Coach intro ===== */
.coach { display: grid; gap: 3.125rem; align-items: end; }
@media (min-width: 960px) { .coach { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.coach-media { position: relative; }
.coach-media img, .coach-media .img-missing { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.coach-badge { position: absolute; left: 1.125rem; bottom: 1.125rem; background: var(--deep); color: var(--on-deep); padding: 0.875rem 1.125rem; border-radius: 0.75rem; font-size: .9rem; line-height: 1.3; max-width: 14.375rem; }
.coach-badge strong { display: block; font: 400 2rem/1 var(--font-display); color: var(--aqua); margin-bottom: 0.25rem; }
.coach-text p { color: var(--muted); }
.coach-text .quote-line { color: #fff; }

/* Stats */
.stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 2.5rem 0 0.875rem; border-top: 1px solid var(--line-dark); }
.stats li { padding: 1.375rem 1rem 0 0; }
.stats strong { display: block; font: 400 clamp(2.6rem, 5vw, 4.2rem)/1 var(--font-display); color: #fff; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; }
.stats span { font-size: .9rem; color: var(--muted); line-height: 1.3; display: block; }
.s-light .stats, .s-paper .stats { border-color: var(--line); }
.s-light .stats strong, .s-paper .stats strong { color: var(--ink); }
.s-light .stats span, .s-paper .stats span { color: var(--ink-muted); }

.quote-line { font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--font-display); text-transform: uppercase; border-left: 0.25rem solid var(--accent); padding-left: 1.25rem; margin: 1.875rem 0; }
.s-light .quote-line, .s-paper .quote-line { color: var(--ink); border-color: var(--accent); }

/* ===== Services: pinned horizontal cards ===== */
.services { background: var(--white); color: var(--ink); }
.services .label { color: var(--accent-ink); }
.services .lead { color: var(--ink-muted); }
.services h2 em { color: var(--blue-display); }
.svc-track { list-style: none; display: grid; gap: 1.125rem; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.svc { display: grid; border-radius: var(--radius); overflow: hidden; background: var(--deep); color: var(--on-deep); min-height: 28.75rem; }
.svc-body { padding: clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; }
.svc-num { font: 500 .95rem/1 var(--font-body); color: var(--aqua); margin-bottom: 1.5rem; }
.svc h3 { font: 400 clamp(2.2rem, 3.8vw, 3.4rem)/.95 var(--font-display); text-transform: uppercase; letter-spacing: .005em; margin-bottom: 1.125rem; }
.svc p { color: var(--deep-soft); max-width: 40ch; }
.svc-meta { list-style: none; display: grid; gap: 0.375rem; margin: 0.5rem 0 1.125rem; font-size: .95rem; }
.svc-meta b { font-weight: 600; color: var(--deep-soft); margin-right: 0.375rem; }
.svc .tags { margin-bottom: 1.75rem; }
.svc .btn { margin-top: auto; align-self: flex-start; }
.svc-media { position: relative; min-height: 17.5rem; overflow: hidden; }
.svc-media img, .svc-media .img-missing { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; transition: transform 1s var(--ease); }
.svc:hover .svc-media img { transform: scale(1.05); }
.svc:nth-child(2) { background: var(--black); }
.svc:nth-child(2) .svc-num { color: var(--accent); }
.svc:nth-child(2) { color: #fff; }
.svc:nth-child(2) p, .svc:nth-child(2) .svc-meta b { color: rgba(255, 255, 255, .75); }
.svc:nth-child(2) .tags li { background: rgba(255, 255, 255, .12); color: #fff; }
.svc:nth-child(3) { background: var(--paper); color: var(--ink); }
.svc:nth-child(3) p, .svc:nth-child(3) .svc-meta b { color: rgba(12, 14, 18, .75); }
.svc:nth-child(3) .svc-num { color: var(--blue-text); }
.svc:nth-child(3) .tags li { background: rgba(12, 14, 18, .14); color: var(--ink); }
.svc:nth-child(3) .btn-white { background: var(--ink); color: #fff; }
@media (min-width: 900px) { .svc { grid-template-columns: 1fr 1.1fr; } }
/* Pinned version: the section is tall, the cards slide sideways while it's on screen */
@media (min-width: 900px) {
  .js .services.is-pinned { height: var(--pin-h, 300vh); padding: 0; }
  .js .services.is-pinned .pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: calc(var(--tab-h) + 2.5rem) 0 5rem; }
  .js .services.is-pinned .sec-head .title { font-size: clamp(2.4rem, 4.2vw, 4.2rem); }
  .js .services.is-pinned .sec-head .label { margin-bottom: 0.75rem; }
  .js .services.is-pinned .sec-head { margin-bottom: 2.125rem; }
  .js .services.is-pinned .svc-track { display: flex; gap: 1.375rem; padding: 0 var(--gutter); max-width: none; margin: 0; width: max-content; will-change: transform; }
  .js .services.is-pinned .svc { width: min(62.5rem, 78vw); height: min(48vh, 28.75rem); min-height: 0; flex: none; }
  .js .services.is-pinned .svc p { font-size: .98rem; }
  .js .services.is-pinned .svc-meta { display: none; }
  .js .services.is-pinned .svc-num { margin-bottom: 0.875rem; }
  .js .services.is-pinned .svc .tags { margin-bottom: 1.25rem; }
  .svc-progress { height: 3px; background: var(--grey); margin: 1.875rem var(--gutter) 0; max-width: 18.75rem; border-radius: 3px; overflow: hidden; }
  .svc-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); }
}
.svc-progress { display: none; }
.js .services.is-pinned .svc-progress { display: block; }

/* ===== Reasons ===== */
.reasons { display: grid; gap: 3.125rem; }
@media (min-width: 1000px) { .reasons { grid-template-columns: .9fr 1.1fr; gap: 5rem; align-items: start; } .reasons-media { position: sticky; top: 6.25rem; } }
.reasons-media img, .reasons-media .img-missing { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.reason-list { list-style: none; counter-reset: r; }
.reason-list li { counter-increment: r; display: grid; grid-template-columns: 4rem 1fr; gap: 0.625rem 1.25rem; padding: 1.875rem 0; border-top: 1px solid var(--line); }
.reason-list li:last-child { border-bottom: 1px solid var(--line); }
.reason-list li::before { content: "0" counter(r); font: 400 2.2rem/1 var(--font-display); color: var(--blue-display); }
.reason-list h3 { font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--font-display); text-transform: uppercase; margin: 0 0 0.625rem; }
.reason-list p { color: var(--ink-muted); margin: 0; }
.reason-list a { color: var(--blue-text); font-weight: 600; }
.s-dark .reason-list li, .s-darker .reason-list li { border-color: var(--line-dark); }
.s-dark .reason-list p { color: var(--muted); }
.s-dark .reason-list li::before { color: var(--accent); }

/* ===== Split sections ===== */
.split { display: grid; gap: clamp(2.25rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.reverse > :first-child { order: 2; } }
.split-media { overflow: hidden; border-radius: var(--radius); }
.split-media > img, .split-media > .img-missing { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.split-media.landscape > img, .split-media.landscape > .img-missing { aspect-ratio: 4 / 3; }
.split-media:has(.ba) { overflow: visible; border-radius: 0; }
.split-text > p:not(.label):not(.eyebrow):not(.quote-line) { color: var(--muted); }
.s-light .split-text > p:not(.label):not(.eyebrow):not(.quote-line), .s-paper .split-text > p:not(.label):not(.eyebrow):not(.quote-line) { color: var(--ink-muted); }
.s-blue .split-text > p:not(.label):not(.eyebrow):not(.quote-line) { color: var(--deep-soft); }

/* Cards */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr)); margin-top: 2.75rem; }
.card { position: relative; background: var(--surface); border-radius: var(--radius); padding: 1.875rem 1.625rem; display: flex; flex-direction: column; transition: transform .4s var(--ease); overflow: hidden; }
.card:hover { transform: translateY(-4px); }
.card .icon { width: 2rem; height: 2rem; color: var(--accent); margin-bottom: 1.25rem; }
.card h3 { font: 400 1.7rem/1 var(--font-display); text-transform: uppercase; margin-bottom: 0.75rem; }
.card p { color: var(--muted); font-size: 1rem; }
.card-link { margin-top: auto; font-weight: 600; color: var(--accent); text-decoration: none; display: inline-flex; gap: 0.5rem; align-items: center; }
.card-link .icon { width: 1.1em; height: 1.1em; margin: 0; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-media { margin: -1.875rem -1.625rem 1.5rem; overflow: hidden; }
.card-media img, .card-media .img-missing { aspect-ratio: 16 / 11; width: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.s-light .card, .s-paper .card, .band-light .card { background: var(--paper); color: var(--ink); }
.s-paper .card { background: #fff; }
.s-light .card p, .s-paper .card p, .band-light .card p { color: var(--ink-muted); }
.s-light .card .icon, .s-paper .card .icon, .s-light .card-link, .s-paper .card-link, .band-light .card .icon { color: var(--blue-text); }
.cards .card:nth-child(4n+2) { background: var(--deep); color: var(--on-deep); }
.cards .card:nth-child(4n+2) p { color: var(--deep-soft); }
.cards .card:nth-child(4n+2) .icon, .cards .card:nth-child(4n+2) .card-link { color: var(--aqua); }

.ticks { list-style: none; display: grid; gap: 0.625rem; margin: 1.125rem 0 1.5rem; }
.ticks li { display: flex; gap: 0.625rem; align-items: flex-start; }
.ticks .icon { color: var(--accent); margin-top: .22em; }
.s-light .ticks .icon, .s-paper .ticks .icon { color: var(--blue-text); }
.ticks a { color: inherit; font-weight: 600; }

/* Feature rows */
.features { display: grid; gap: 1px; grid-template-columns: 1fr; margin-top: 3rem; list-style: none; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; }
.features li { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.875rem 1.625rem; background: var(--black); }
.features .icon { width: 1.875rem; height: 1.875rem; color: var(--accent); }
.features h3 { font: 400 1.55rem/1 var(--font-display); text-transform: uppercase; margin: 0 0 0.5rem; }
.features p { color: var(--muted); margin: 0; font-size: 1rem; }
.s-darker .features li { background: var(--black-2); }
.s-light .features, .s-paper .features { background: var(--line); border-color: var(--line); }
.s-light .features li { background: #fff; }
.s-paper .features li { background: var(--paper); }
.s-light .features p, .s-paper .features p { color: var(--ink-muted); }
.s-light .features .icon, .s-paper .features .icon { color: var(--blue-text); }
.s-blue .features { background: rgba(12, 14, 18, .15); border-color: rgba(12, 14, 18, .15); }
.s-blue .features li { background: var(--deep); }
.s-blue .features p { color: var(--deep-soft); }
.s-blue .features .icon { color: var(--aqua); }

/* ===== Before / after slider ===== */
.ba { margin: 0; }
.ba-frame { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; background: var(--surface); --pos: 50%; touch-action: pan-y; }
.ba-img { position: absolute; inset: 0; }
.ba-img img, .ba-img .img-missing { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; aspect-ratio: auto; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-tag { position: absolute; top: 1rem; left: 1rem; background: rgba(12, 14, 18, .85); color: #fff; padding: 0.5rem 0.875rem; font: 400 1.1rem/1 var(--font-display); text-transform: uppercase; clip-path: polygon(0.5rem 0, 100% 0, calc(100% - 0.5rem) 100%, 0 100%); }
.ba-tag::before { content: "Age "; }
.ba-tag-after { left: auto; right: 1rem; background: var(--accent); color: var(--ink); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--accent); z-index: 2; pointer-events: none; }
.ba-handle .icon { position: absolute; top: 50%; left: 50%; width: 3.125rem; height: 3.125rem; padding: 0.75rem; transform: translate(-50%, -50%); background: var(--accent); color: var(--ink); border-radius: 50%; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .4); }
.ba-range:focus-visible ~ .ba-handle .icon { outline: 3px solid #fff; outline-offset: 3px; }
.ba figcaption { font-size: .85rem; color: var(--muted); margin-top: 0.75rem; }
.s-light .ba figcaption, .s-paper .ba figcaption { color: var(--ink-muted); }
html:not(.js) .ba-frame { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
html:not(.js) .ba-img { position: relative; aspect-ratio: 4 / 5; }
html:not(.js) .ba-before { clip-path: none; order: -1; }
html:not(.js) .ba-range, html:not(.js) .ba-handle { display: none; }

/* ===== Boardroom to barbells story ===== */
.story { background: var(--black); }
.story-wrap { display: grid; gap: 2.5rem; }
.story-visual { display: none; }
.chapter { padding: 1.875rem 0 1.875rem 1.75rem; border-left: 2px solid var(--line-dark); position: relative; transition: border-color .4s, opacity .4s; }
.chapter::before { content: ""; position: absolute; left: -0.5rem; top: 2.375rem; width: 0.875rem; height: 0.875rem; background: var(--black); border: 2px solid var(--line-dark); transform: rotate(45deg); transition: background .4s, border-color .4s; }
.chapter-label { font: 500 .95rem/1 var(--font-body); color: var(--accent); margin-bottom: 0.75rem; }
.chapter p:last-child { color: var(--muted); margin: 0; }
.chapter h3 { font: 400 clamp(1.9rem, 3vw, 2.6rem)/1 var(--font-display); text-transform: uppercase; }
.js .story.is-ready .chapter h3 { color: #8b909a; transition: color .4s; }
.js .story.is-ready .chapter.is-active h3 { color: #fff; }
.js .story.is-ready .chapter.is-active { opacity: 1; border-color: var(--accent); }
.js .story.is-ready .chapter.is-active::before { background: var(--accent); border-color: var(--accent); }
@media (min-width: 900px) {
  .story-wrap { grid-template-columns: .9fr 1.1fr; gap: 5rem; }
  .story-visual { display: block; }
  .story-sticky { position: sticky; top: 6.875rem; display: grid; place-items: center; gap: 1.5rem; padding: 2.5rem 1.25rem; border-radius: var(--radius); background: radial-gradient(closest-side, rgba(0, 191, 255, .22), transparent); }
  .story-svg { width: min(100%, 21.25rem); height: auto; stroke: var(--text); stroke-width: 3; }
  .story-svg .fig { transition: opacity .5s var(--ease), transform .6s var(--ease); transform-origin: 50% 100%; }
  .story-svg .fig-lift { stroke: var(--accent); }
  .story { --p: 1; }
  .js .story.is-ready .fig-suit { opacity: calc(1 - var(--p)); transform: translateY(calc(var(--p) * 0.625rem)) scale(calc(1 - var(--p) * .04)); }
  .js .story.is-ready .fig-lift { opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 0.875rem)); }
  html:not(.js) .fig-suit, .story:not(.is-ready) .fig-suit { opacity: 0; }
  .story-years { display: flex; align-items: center; gap: 0.875rem; font: 400 3rem/1 var(--font-display); width: min(100%, 20rem); }
  .story-years .y-line { flex: 1; height: 3px; background: linear-gradient(90deg, var(--accent) calc(var(--p) * 100%), var(--line-dark) 0); }
  .story-years .y-to { color: var(--accent); }
}

/* ===== Pricing ===== */
.plans { margin-top: 0.625rem; }
.plan-toggle { display: none; }
.js .plan-toggle { display: inline-flex; padding: 0.3125rem; background: var(--surface); border-radius: 62.4375rem; margin-bottom: 1.875rem; }
.plan-toggle label { position: relative; cursor: pointer; }
.plan-toggle input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.plan-toggle span { display: block; padding: 0.6875rem 1.375rem; border-radius: 62.4375rem; font: 600 .95rem/1.2 var(--font-body); color: var(--muted); transition: background .3s, color .3s; }
.plan-toggle em { font-style: normal; font-size: .72rem; margin-left: 0.375rem; padding: 3px 0.5rem; border-radius: 62.4375rem; background: rgba(127, 209, 161, .16); color: var(--ok); }
.plan-toggle input:checked + span { background: var(--accent); color: var(--ink); }
.plan-toggle input:checked + span em { background: rgba(0, 0, 0, .12); color: var(--ink); }
.s-light .plan-toggle em, .s-paper .plan-toggle em { background: rgba(23, 115, 63, .1); color: #17733f; }
.plan-toggle input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.s-light .js .plan-toggle, .s-light .plan-toggle, .s-paper .plan-toggle { background: var(--grey); }
.s-light .plan-toggle span, .s-paper .plan-toggle span { color: var(--ink-muted); }
.plan-grid { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: stretch; }
@media (min-width: 1100px) { .plan-grid { grid-template-columns: repeat(4, 1fr); } }
.plan { position: relative; background: var(--surface); border-radius: var(--radius); padding: 1.875rem 1.5rem; display: flex; flex-direction: column; color: var(--text); }
.plan.is-featured { background: var(--deep); color: var(--on-deep); }
.plan-badge { position: absolute; top: -11px; left: 1.375rem; background: var(--ink); color: #fff; font: 700 .7rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 0.4375rem 0.625rem; margin: 0; clip-path: polygon(0.375rem 0, 100% 0, calc(100% - 0.375rem) 100%, 0 100%); }
.plan-name { font: 400 2.1rem/1 var(--font-display); text-transform: uppercase; margin-bottom: 0.375rem; }
.plan-sessions { color: var(--muted); font-size: .92rem; margin-bottom: 1.375rem; }
.plan.is-featured .plan-sessions, .plan.is-featured .plan-summary, .plan.is-featured .plan-per { color: var(--deep-soft); }
.plan-price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.plan-amount { font: 400 3.6rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.plan-per { color: var(--muted); }
.plan-alt { font-size: .9rem; color: var(--ok); min-height: 3em; }
.plan.is-featured .plan-alt { color: var(--aqua); }
.plan-summary { color: var(--muted); font-size: .98rem; }
.plan .ticks { font-size: .95rem; padding-top: 1.125rem; border-top: 1px solid var(--line-dark); }
.plan.is-featured .ticks { border-color: rgba(12, 14, 18, .18); }
.plan.is-featured .ticks .icon { color: var(--aqua); }
.plan .btn { margin-top: auto; padding-left: 1.125rem; padding-right: 1.125rem; }
.plan.is-featured .btn-primary { background: var(--ink); color: #fff; }
.plan.is-featured .btn-primary:hover { background: #fff; color: var(--ink); }
.plans-note { margin-top: 1.375rem; color: var(--muted); font-size: .95rem; }
.plans-note a { color: var(--accent); }
.s-light .plans-note, .s-paper .plans-note { color: var(--ink-muted); }
.s-light .plans-note a, .s-paper .plans-note a { color: var(--blue-text); }
.price-flash { animation: flash .5s var(--ease); }
@keyframes flash { from { opacity: .3; transform: translateY(-4px); } to { transform: none; } }
.extra-plans { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
.extra-plans .plan-amount { font-size: 2.8rem; }
.s-light .plan, .s-paper .plan { background: var(--paper); color: var(--ink); }
.s-paper .plan { background: #fff; }
.s-light .plan:not(.is-featured) .plan-sessions, .s-light .plan:not(.is-featured) .plan-summary, .s-light .plan:not(.is-featured) .plan-per, .s-paper .plan:not(.is-featured) .plan-sessions, .s-paper .plan:not(.is-featured) .plan-summary, .s-paper .plan:not(.is-featured) .plan-per { color: var(--ink-muted); }
.s-light .plan:not(.is-featured) .ticks, .s-paper .plan:not(.is-featured) .ticks { border-color: var(--line); }
.s-light .plan:not(.is-featured) .plan-alt, .s-paper .plan:not(.is-featured) .plan-alt { color: #1d7a45; }
.s-light .plan.is-featured, .s-paper .plan.is-featured { color: var(--on-deep); }

/* ===== Quiz ===== */
.quiz-section { background: var(--paper); color: var(--ink); }
.quiz-section .label, .quiz-section .eyebrow { color: var(--accent-ink); }
.quiz-section .quiz-intro p:not(.label):not(.eyebrow) { color: var(--ink-muted); }
.quiz-wrap { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .quiz-wrap { grid-template-columns: .85fr 1.15fr; gap: 4.375rem; align-items: start; } }
.quiz { background: #fff; border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.75rem); position: relative; }
.quiz fieldset { border: 0; padding: 0; margin: 0 0 1.625rem; display: grid; gap: 0.625rem; }
.quiz legend { font: 400 clamp(1.7rem, 2.6vw, 2.3rem)/1 var(--font-display); text-transform: uppercase; margin-bottom: 1.25rem; padding: 0; }
.quiz-count { display: block; font: 500 .9rem/1 var(--font-body); text-transform: none; color: var(--accent-ink); margin-bottom: 0.75rem; }
.quiz label { position: relative; display: block; cursor: pointer; }
.quiz label input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.quiz label span { display: block; padding: 1rem 1.125rem 1rem 3.25rem; background: var(--paper); border: 2px solid transparent; border-radius: 0.75rem; font-weight: 500; transition: border-color .2s, background .2s, transform .2s var(--ease); position: relative; }
.quiz label span::before { content: ""; position: absolute; left: 1.125rem; top: 50%; width: 1.125rem; height: 1.125rem; margin-top: -0.5625rem; border: 2px solid #a5adbb; border-radius: 50%; transition: border .2s; }
.quiz label:hover span { transform: translateX(0.25rem); }
.quiz input:checked + span { border-color: var(--blue-text); background: #e6f8ff; }
.quiz input:checked + span::before { border: 0.375rem solid var(--blue-text); }
.quiz input:focus-visible + span { outline: 3px solid var(--blue-text); outline-offset: 2px; }
.quiz-progress { display: none; }
.quiz-nav { display: flex; justify-content: space-between; gap: 0.75rem; }
.quiz .btn-ghost { background: var(--paper); color: var(--ink); }
.quiz .btn-primary { background: var(--accent); color: var(--ink); }
.quiz .btn-primary:hover { background: var(--ink); color: #fff; }
.js .quiz.is-stepped .quiz-progress { display: block; height: 0.25rem; background: var(--grey); border-radius: 0.25rem; margin-bottom: 1.75rem; overflow: hidden; }
.js .quiz.is-stepped .quiz-progress span { display: block; height: 100%; width: 25%; background: var(--accent); transition: width .5s var(--ease); }
.js .quiz.is-stepped .quiz-step { display: none; }
.js .quiz.is-stepped .quiz-step.is-current { display: grid; animation: stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } }
.quiz-result { animation: stepIn .45s var(--ease); }
.quiz-result .result-label { font: 500 .9rem/1 var(--font-body); color: var(--accent-ink); }
.quiz-result h3 { font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--font-display); text-transform: uppercase; margin: 0.625rem 0 0.375rem; }
.quiz-result .result-price { font-weight: 700; font-size: 1.15rem; margin-bottom: 0.875rem; }
.quiz-result p { color: var(--ink-muted); }
.quiz-result .btn-row { margin-top: 1.125rem; }
.quiz-result .ticks .icon { color: var(--blue-text); }

/* ===== Testimonials ===== */
.testimonials { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(18.125rem, 1fr)); }
.testimonial { margin: 0; background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 1.875rem; display: flex; flex-direction: column; min-height: 20rem; }
.testimonial:nth-child(3n+2) { background: var(--deep); color: var(--on-deep); }
.testimonial:nth-child(3n) { background: var(--black); color: #fff; }
.testimonial .stars { display: inline-flex; gap: 3px; color: var(--blue-text); margin-bottom: 1.125rem; }
.testimonial:nth-child(3n+2) .stars { color: var(--aqua); }
.testimonial:nth-child(3n) .stars { color: var(--accent); }
.testimonial .stars .icon { width: 1.125rem; height: 1.125rem; fill: currentColor; stroke: none; }
.testimonial blockquote { margin: 0 0 1.375rem; font-size: 1.05rem; line-height: 1.6; }
.testimonial figcaption { margin-top: auto; padding-top: 1.125rem; border-top: 1px solid rgba(127, 127, 127, .25); font-size: .92rem; }
.testimonial figcaption strong { display: block; font: 400 1.3rem/1.1 var(--font-display); text-transform: uppercase; }
.testimonial figcaption span { opacity: .7; }
.review-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.125rem; margin-top: 1.875rem; }
.rating { display: flex; align-items: center; gap: 0.625rem; margin: 0; }
.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars .icon { fill: currentColor; stroke: none; }
.s-dark .testimonial:nth-child(3n) { background: var(--surface); }

/* ===== Steps: stacking cards ===== */
.steps-section { background: var(--deep); color: var(--on-deep); }
.steps-section .label, .steps-section .eyebrow { color: var(--aqua); }
.steps-layout { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .steps-layout { grid-template-columns: .85fr 1.15fr; gap: 5rem; align-items: start; } .steps-intro { position: sticky; top: 7.5rem; } }
.steps-intro p:not(.label) { color: var(--deep-soft); max-width: 44ch; }
.steps { list-style: none; display: grid; gap: 1.125rem; }
.steps li { position: relative; padding: clamp(1.625rem, 3.5vw, 2.5rem); background: var(--black); border-radius: var(--radius); min-height: 17.5rem; display: flex; flex-direction: column; box-shadow: 0 -1.25rem 3.125rem rgba(0, 0, 0, .25); }
.step-num { font: 500 .95rem/1 var(--font-body); color: var(--accent); margin-bottom: auto; padding-bottom: 3.125rem; }
.step-num::before { content: "Step "; }
.steps h3 { font: 400 clamp(2rem, 3.4vw, 3rem)/.95 var(--font-display); text-transform: uppercase; margin-bottom: 0.75rem; }
.steps p { color: var(--muted); margin: 0; max-width: 46ch; }
@media (min-width: 960px) {
  .steps li { position: sticky; top: calc(6.875rem + var(--i, 0) * 1.375rem); }
  .steps li:nth-child(1) { --i: 0; } .steps li:nth-child(2) { --i: 1; } .steps li:nth-child(3) { --i: 2; } .steps li:nth-child(4) { --i: 3; }
}

/* ===== FAQ ===== */
.faq-section { background: var(--deep); color: var(--on-deep); }
.faq-section .label, .faq-section .eyebrow { color: var(--aqua); }
.faq-layout { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .faq-layout { grid-template-columns: .8fr 1.2fr; gap: 4.375rem; align-items: start; } .faq-intro { position: sticky; top: 6.875rem; } }
.faq-intro p:not(.label) { color: var(--deep-soft); }
.faq-intro .faq-img img, .faq-intro .faq-img .img-missing { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-top: 1.625rem; }
.accordion { display: grid; gap: 0.625rem; }
.accordion details { background: #fff; color: var(--ink); border-radius: 0.75rem; overflow: hidden; }
.accordion summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.125rem; padding: 1.25rem 1.375rem; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary h3 { margin: 0; font: 600 1.05rem/1.35 var(--font-body); }
.acc-icon { width: 1.875rem; height: 1.875rem; padding: 0.375rem; border-radius: 50%; background: var(--paper); color: var(--blue-text); transition: transform .35s var(--ease), background .3s; flex: none; }
.accordion details[open] .acc-icon { transform: rotate(180deg); background: var(--accent); color: var(--ink); }
.acc-body { padding: 0 4rem 1.375rem 1.375rem; color: var(--ink-muted); }
.acc-body p { margin: 0; }
.acc-body a { color: var(--blue-text); }

/* ===== Related links ===== */
.related { list-style: none; display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); }
.related a { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 1.375rem 1.375rem; background: var(--surface); border-radius: 0.75rem; text-decoration: none; font-weight: 600; transition: background .25s, color .25s, transform .35s var(--ease); }
.related a:hover { background: var(--accent); color: var(--ink); transform: translateY(-3px); }
.related .icon { color: var(--accent); }
.related a:hover .icon { color: var(--ink); }
.s-light .related a, .s-paper .related a { background: var(--paper); color: var(--ink); }
.s-paper .related a { background: #fff; }
.s-light .related .icon, .s-paper .related .icon { color: var(--blue-text); }

/* ===== CTA band ===== */
.cta-band { position: relative; background: var(--black); padding: var(--section) 0; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; left: 50%; bottom: -60%; width: 90%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 191, 255, .25), transparent); pointer-events: none; }
.cta-inner { position: relative; text-align: center; }
.cta-inner .label { color: var(--accent); }
.cta-band .cta-title { font-size: clamp(3rem, 9vw, 8.6rem); max-width: 12ch; margin: 0 auto 1.625rem; }
.cta-band p.cta-copy { color: #c9cdd4; max-width: 54ch; margin: 0 auto; font-size: 1.1rem; }
.cta-actions { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.cta-alt { display: flex; flex-wrap: wrap; gap: 0.625rem 1.625rem; justify-content: center; }
.cta-alt a { text-decoration: none; font-weight: 600; display: inline-flex; gap: 0.5rem; align-items: center; color: #fff; }
.cta-alt a:hover { color: var(--accent); }
.cta-alt .icon { color: var(--accent); }

/* ===== Galleries ===== */
.gallery { display: grid; gap: 0.625rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.75rem; }
@media (min-width: 800px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 0.75rem; }
.gallery img, .gallery .img-missing { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.4375rem 0.75rem; background: rgba(12, 14, 18, .82); color: #fff; font: 400 1.05rem/1 var(--font-display); text-transform: uppercase; clip-path: polygon(0.375rem 0, 100% 0, calc(100% - 0.375rem) 100%, 0 100%); }

/* ===== Contact ===== */
.contact-grid { display: grid; gap: 2.75rem; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: .85fr 1.15fr; gap: 4.375rem; align-items: start; } }
.contact-methods { list-style: none; display: grid; gap: 0.625rem; margin: 1.75rem 0; }
.contact-methods a, .contact-methods div { display: flex; gap: 0.875rem; align-items: center; padding: 1.125rem 1.25rem; background: var(--surface); border-radius: 0.75rem; text-decoration: none; transition: background .25s; }
.contact-methods a:hover { background: #262b35; }
.contact-methods .icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.contact-methods strong { display: block; }
.contact-methods span span { color: var(--muted); font-size: .92rem; }
.form-box { background: var(--black-2); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.75rem); }
.form-box h2 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.form-box > p { color: var(--muted); }
.form { display: grid; gap: 1.125rem; }
.form-row { display: grid; gap: 1.125rem; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form label { display: block; font-weight: 500; font-size: .95rem; margin-bottom: 0.5rem; }
.form label .opt { font-weight: 400; color: var(--muted); font-size: .88rem; }
.form input, .form select, .form textarea { width: 100%; min-height: 3.25rem; padding: 0.8125rem 0.9375rem; border: 2px solid transparent; border-radius: 0.625rem; background: var(--surface); color: #fff; font: 400 1rem/1.4 var(--font-body); }
.form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2300bfff' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.form textarea { min-height: 7.5rem; resize: vertical; }
.form ::placeholder { color: #7d838f; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.form .btn-primary { width: 100%; }
.form-note { font-size: .88rem; color: var(--muted); margin: 0; }
.form-note a { color: var(--accent); }
.hp { position: absolute; left: -9999px; }

/* ===== Answer pages ===== */
.answer { background: var(--white); color: var(--ink); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--ink-muted); font-size: .95rem; margin-bottom: 1.625rem; }
.byline .icon { color: var(--blue-text); }
.byline a { color: var(--blue-text); }
.short-answer { background: var(--deep); color: var(--on-deep); border-radius: var(--radius); padding: 1.75rem 1.875rem; margin-bottom: 2.75rem; font-size: 1.15rem; }
.short-answer p:last-child { margin: 0; }
.short-label { font: 600 .95rem/1 var(--font-body); color: var(--deep-soft); }
.prose h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-top: 1.4em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--blue-text); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .98rem; }
.prose th, .prose td { text-align: left; padding: 0.8125rem 0.625rem; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; }
.s-dark .prose th, .s-dark .prose td { border-color: var(--line-dark); }
.s-dark .prose a { color: var(--accent); }
.sources { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.sources h2 { font-size: 1.6rem; }
.sources ul { padding-left: 1.2em; color: var(--ink-muted); font-size: .95rem; }
.sources a { color: var(--ink-muted); }
.disclaimer { margin-top: 1.625rem; font-size: .88rem; color: var(--ink-muted); }
.answer-list { list-style: none; display: grid; gap: 0.75rem; }
.answer-list a { display: grid; gap: 0.625rem; padding: 1.75rem; background: var(--paper); border-radius: var(--radius); text-decoration: none; transition: background .3s, color .3s, transform .35s var(--ease); }
.answer-list a:hover { background: var(--deep); color: var(--on-deep); transform: translateY(-3px); }
.answer-list h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin: 0; }
.answer-list p { color: var(--ink-muted); margin: 0; font-size: 1rem; }
.answer-list a:hover p { color: var(--deep-soft); }

/* Qualifications */
.quals { list-style: none; display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); margin-top: 1.875rem; }
.quals li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1.125rem 1.25rem; background: var(--paper); border-radius: 0.75rem; font-size: .98rem; color: var(--ink); }
.quals li.is-highlight { background: var(--deep); color: var(--on-deep); }
.quals .icon { color: var(--blue-text); margin-top: .15em; }
.quals li.is-highlight .icon { color: var(--aqua); }
.insurer { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.5rem; color: var(--ink-muted); font-size: .95rem; }
.insurer img, .insurer .img-missing { width: 4rem; height: 4rem; border-radius: 0.625rem; object-fit: cover; aspect-ratio: auto; }

.legal h2 { font-size: 2rem; margin-top: 1.6em; }
.legal.s-light .prose p, .legal.s-light .prose li { color: var(--ink-muted); }

/* ===== Instagram strip and footer ===== */
.insta { background: var(--deep); color: var(--on-deep); }
.insta-head { padding: clamp(3.125rem, 6vw, 5rem) var(--gutter) 1.875rem; max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.625rem; }
.insta-head .label { color: var(--aqua); margin: 0; }
.insta-title { margin: 0; font-size: clamp(2.6rem, 6vw, 5.6rem); }
.insta-title a { text-decoration: none; }
.insta-title a:hover { color: #fff; }
.insta-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 900px) { .insta-grid { grid-template-columns: repeat(6, 1fr); } }
.insta-grid a { display: block; overflow: hidden; }
.insta-grid img, .insta-grid .img-missing { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease), filter .4s; filter: grayscale(.25); }
.insta-grid a:hover img { transform: scale(1.07); filter: none; }

.site-footer { background: var(--white); color: var(--ink); padding: clamp(3.75rem, 7vw, 5.625rem) 0 0; overflow: hidden; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 2.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: 1.4fr 1.1fr .8fr .9fr; } }
.footer-logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.footer-logo .brand-name { color: var(--ink); font-size: 1.9rem; }
.footer-logo .brand-name span { color: var(--blue-display); }
.footer-brand p { color: var(--ink-muted); margin: 1.125rem 0; max-width: 40ch; }
.footer-contact { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; font-weight: 600; }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { color: var(--blue-text); }
.footer-title { font-weight: 600; color: var(--blue-text); margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: grid; gap: 0.5625rem; }
.footer-col a { text-decoration: none; color: var(--ink); }
.footer-col a:hover { color: var(--blue-text); }
.social { list-style: none; display: flex; gap: 0.5rem; margin-top: 1.375rem; }
.social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--paper); color: var(--ink); transition: background .25s, color .25s; }
.social a:hover { background: var(--accent); color: var(--ink); }
.footer-mega { margin: 0.625rem 0 0; padding: 0 0.75rem; overflow: hidden; font: 400 clamp(2.2rem, 9vw, 11rem)/.85 var(--font-display); text-transform: uppercase; color: var(--blue-display); white-space: nowrap; text-align: center; letter-spacing: -.005em; }
.footer-base { max-width: var(--wrap); margin: 0 auto; padding: 1.375rem var(--gutter) calc(1.875rem + var(--f)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; color: var(--ink-muted); font-size: .88rem; border-top: 1px solid var(--line); }
.footer-base p { margin: 0; }
@media (min-width: 768px) { .footer-base { padding-bottom: calc(4.375rem + var(--f)); } }

/* ===== Motion (only with JavaScript and when motion is allowed) ===== */
.reveal { opacity: 0; transform: translateY(2.75rem); transition: opacity 1.2s var(--ease-out) var(--d, 0s), transform 1.4s var(--ease-out) var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }
/* Photos: the frame opens from the bottom while the picture settles from a gentle zoom */
.reveal-img { clip-path: inset(14% 0 0 0 round var(--radius)); opacity: 0; transition: clip-path 1.5s var(--ease-out) var(--d, 0s), opacity 1s var(--ease-out) var(--d, 0s); }
.reveal-img:not(.zoom) img { transform: scale(1.14); transition: transform 1.8s var(--ease-out) var(--d, 0s); }
.reveal-img.is-visible { clip-path: inset(0 0 0 0 round var(--radius)); opacity: 1; }
.reveal-img.is-visible:not(.zoom) img { transform: none; }
/* Firefox repaints clip-path animations on every frame, so there the photos fade and rise instead (same feel, much lighter) */
@supports (-moz-appearance: none) {
  .reveal-img { clip-path: inset(0 0 0 0 round var(--radius)); transform: translateY(2rem); transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.4s var(--ease-out) var(--d, 0s); }
  .reveal-img.is-visible { transform: none; }
}
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.split-words .w > span { display: inline-block; transform: translateY(110%) rotate(2deg); transform-origin: 0 100%; transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--wi, 0) * 55ms + var(--d, 0s)); }
.split-words.is-visible .w > span { transform: none; }
.zoom { overflow: hidden; }
.zoom img { will-change: transform; }

@media print {
  .site-header, .frame, .tab, .cta-band, .insta, .site-footer, .site-menu { display: none; }
  body { background: #fff; color: #000; }
}
@media (max-width: 560px) {
  .js .plan-toggle { display: flex; width: 100%; }
  .plan-toggle label { flex: 1; }
  .plan-toggle span { padding: 0.6875rem 0.375rem; text-align: center; font-size: .92rem; white-space: nowrap; }
  .plan-toggle em { display: none; }
}
@media (max-width: 959px) { .faq-img { display: none; } }
.s-light .plan.is-featured, .s-paper .plan.is-featured { background: var(--deep); color: var(--on-deep); }
.steps-section + .faq-section { background: var(--black-2); }
.steps-section + .faq-section .label { color: var(--accent); }
.steps-section + .faq-section .acc-icon { background: var(--paper); }
@media (max-width: 959px) { .page-hero.has-image .page-hero-media img, .page-hero.has-image .page-hero-media .img-missing { aspect-ratio: 4 / 3; } }

/* Above-the-fold headlines rise on load (transform only, so they still count as painted straight away) */
.js .hero h1, .js .page-hero h1, .js .hero .lead, .js .page-hero .lead, .js .hero .btn-row, .js .page-hero .btn-row, .js .proof-chip, .js .hero-card, .js .crumbs, .js .page-hero .label { animation: rise 1.3s var(--ease-out) both; }
.js .page-hero-media { animation: rise 1.5s var(--ease-out) .12s both; }
.js .hero .lead, .js .page-hero .lead { animation-delay: .08s; }
.js .hero .btn-row, .js .hero-card { animation-delay: .16s; }
@keyframes rise { from { transform: translateY(2.25rem); } }
@media (max-width: 767px) {
  .tab-logo { right: 0; border-bottom-right-radius: 0; }
  .tab-logo::before, .tab-menu::before { display: none; }
  .tab-menu { border-bottom-left-radius: 0; background: transparent; }
}
@media (max-width: 767px) { .hero-card { display: none; } }
.steps li { color: #fff; }
.steps-section + .faq-section { color: #fff; }
.steps-section + .faq-section .faq-intro p:not(.label) { color: var(--muted); }
.nowrap { white-space: nowrap; }
a[href^="tel:"] { white-space: nowrap; }

/* ===== Home page: a little more breathing room (about 5 to 10% more space between and inside sections) ===== */
.page-home { --section: clamp(5.5rem, 11vw, 10.25rem); --gutter: clamp(1.25rem, 4.9vw, 4.375rem); }
.page-home main p { line-height: 1.72; }
.page-home .sec-head { margin-bottom: clamp(2.5rem, 5.5vw, 4.5rem); }
.page-home .label { margin-bottom: 1.25rem; }
.page-home .coach, .page-home .reasons { gap: 3.5rem; }
@media (min-width: 1000px) { .page-home .reasons { gap: 5.5rem; } }
.page-home .reason-list li { padding: 2.0625rem 0; }
.page-home .svc-track { gap: 1.25rem; }
.js .page-home .services.is-pinned .svc-track { gap: 1.5rem; }
.page-home .steps { gap: 1.25rem; }
@media (min-width: 960px) { .page-home .steps-layout { gap: 5.5rem; } .page-home .faq-layout { gap: 4.875rem; } }
.page-home .testimonials, .page-home .extra-plans, .page-home .plan-grid { gap: 1rem; }
.page-home .plan { padding: 2.0625rem 1.625rem; }
.page-home .testimonial { padding: 2.0625rem; }
.page-home .btn-row { gap: 0.875rem 1rem; }

/* ===== Notes for Glenn: only shown on the preview, never on the live site ===== */
.glenn-note { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 2px dashed var(--accent); border-radius: var(--radius-sm); background: rgba(0, 191, 255, .08); font-size: .95rem; line-height: 1.55; color: inherit; }
.glenn-note strong { display: block; font-weight: 700; margin-bottom: 0.25rem; color: inherit; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
.s-dark .glenn-note strong, .s-darker .glenn-note strong { color: var(--accent); }
.section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-tight .sources { margin-top: 0; }

/* ===== Areas: drive-time groups and town cards ===== */
.area-groups { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); list-style: none; margin-top: 2.5rem; }
.area-groups li { background: var(--black-2); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 1.75rem 1.625rem; }
.area-groups h3 { font: 400 1.6rem/1 var(--font-display); text-transform: uppercase; margin: 0 0 0.375rem; }
.area-groups .drive { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); font-weight: 600; font-size: .95rem; margin: 0 0 0.875rem; }
.area-groups .drive .icon { width: 1.125rem; height: 1.125rem; }
.area-groups p { color: var(--muted); margin: 0; font-size: .98rem; }
.town-facts { list-style: none; display: grid; gap: 0.75rem; margin: 1.75rem 0 0; }
.town-facts li { display: flex; gap: 0.875rem; align-items: flex-start; }
.town-facts .icon { flex: none; width: 1.375rem; height: 1.375rem; color: var(--blue-text); margin-top: 0.1875rem; }
.s-dark .town-facts .icon { color: var(--accent); }
.town-facts strong { display: block; }
.compare-table { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: .98rem; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 1rem 0.875rem; border-bottom: 1px solid var(--line-dark); }
.compare-table thead th { font: 400 1.35rem/1 var(--font-display); text-transform: uppercase; color: var(--accent); }
.compare-table tbody th { font-weight: 600; color: #fff; width: 22%; }
.compare-table td { color: var(--muted); }
@media (max-width: 640px) { .compare-table { font-size: .9rem; } .compare-table th, .compare-table td { padding: 0.75rem 0.5rem; } }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.s-light .area-groups li { background: var(--paper); border-color: var(--line); }
.s-paper .area-groups li { background: #fff; border-color: var(--line); }
.s-light .area-groups p, .s-paper .area-groups p { color: var(--ink-muted); }
.s-light .area-groups .drive, .s-paper .area-groups .drive { color: var(--blue-text); }
.related a small { display: block; margin-top: 0.3125rem; font-size: .85rem; font-weight: 500; }
.site-menu .btn-primary { background: var(--ink); color: #fff; }
.site-menu .btn-primary:hover { background: #fff; color: var(--ink); }
img.pos-top { object-position: 50% 12%; }

/* Qualifications: certificate photo beside the intro */
.quals-split { align-items: start; margin-bottom: 2.5rem; }
.certs-figure { margin: 0; }
.certs-figure img { aspect-ratio: auto !important; }
.certs-figure figcaption, .progress-strip + * figcaption { font-size: .85rem; color: var(--ink-muted); margin-top: 0.625rem; }

/* Results: one photo a year, side by side */
.progress-strip { margin: 0 0 3rem; }
.progress-strip img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.progress-ages { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); margin: 0.75rem 0 0; text-align: center; font: 400 clamp(1.1rem, 2vw, 1.6rem)/1 var(--font-display); }
.progress-now h3 { font: 400 clamp(1.8rem, 3vw, 2.4rem)/1 var(--font-display); text-transform: uppercase; margin: 0 0 1rem; }

/* ===== New client offer ===== */
.offer-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0 0 2rem; padding: 1.125rem 1.375rem; border-radius: var(--radius); background: var(--accent); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease); }
.offer-strip:hover { transform: translateY(-2px); }
.offer-strip-badge { font: 700 .72rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 0.4375rem 0.625rem; clip-path: polygon(0.375rem 0, 100% 0, calc(100% - 0.375rem) 100%, 0 100%); }
.offer-strip-text { flex: 1 1 22rem; font-size: 1rem; line-height: 1.45; }
.offer-strip-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; white-space: nowrap; }
.offer-strip-cta .icon { width: 1.125rem; height: 1.125rem; }
.offer-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.offer-card .plan-badge { background: var(--ink); }
.offer-starts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1rem; }
.offer-start { position: relative; display: grid; gap: 0.375rem; padding: 1.375rem 3.25rem 1.375rem 1.375rem; border-radius: var(--radius); background: var(--black-2); border: 1px solid var(--line-dark); color: var(--muted); text-decoration: none; transition: border-color .25s, transform .3s var(--ease); }
.offer-start:hover { border-color: var(--accent); transform: translateY(-2px); }
.offer-start-label { font: 400 1.5rem/1 var(--font-display); text-transform: uppercase; color: #fff; }
.offer-start .icon { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); width: 1.375rem; height: 1.375rem; color: var(--accent); }
.offer-terms { margin: 1.25rem 0 0; font-size: .88rem; color: var(--muted); }
.s-light .offer-start, .s-paper .offer-start { background: #fff; border-color: var(--line); color: var(--ink-muted); }
.s-light .offer-start-label, .s-paper .offer-start-label { color: var(--ink); }
.s-light .offer-terms, .s-paper .offer-terms { color: var(--ink-muted); }
.menu-offer { margin: 1.5rem 0 0; font-weight: 700; } .menu-offer a { color: var(--on-deep); text-decoration: underline; text-underline-offset: 3px; }
.photo-figure { margin: 0; } .photo-figure figcaption { font-size: .85rem; color: var(--ink-muted); margin-top: 0.625rem; }

/* Google reviews on the results page: the long review takes a tall card on the left */
.google-reviews .testimonial { min-height: 0; }
.google-reviews blockquote p { margin: 0 0 .85em; }
.google-reviews blockquote p:last-child { margin-bottom: 0; }
.google-reviews blockquote ul { margin: 0 0 .85em; padding-left: 1.2em; }
.google-reviews .review-title { font-weight: 700; }
.reviews-section .rating { margin-bottom: .75rem; }
.reviews-section .btn-row { margin-top: 1.875rem; }
@media (min-width: 900px) {
  .google-reviews { grid-template-columns: 1.15fr 1fr; }
  .google-reviews .is-long { grid-row: span 3; }
}
.reviews-section .rating { flex-wrap: wrap; }
.offer-strip-small { margin: 0.25rem 0 1.25rem; padding: 0.875rem 1.125rem; }
.offer-strip-small .offer-strip-text { flex-basis: 16rem; font-size: .95rem; }

/* Daily log screenshots: full width on desktop, swipe sideways on phones so the text stays readable */
.log-shots { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.log-shots figure { margin: 0; }
.log-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); background: #000; }
.log-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.log-scroll img { display: block; width: 100%; height: auto; min-width: 52rem; }
.log-shots figcaption { margin-top: 0.625rem; font-size: .92rem; opacity: .75; }
.log-note { margin-top: 1.5rem; }
@media (min-width: 900px) { .log-swipe { display: none; } }

/* Feature grids: fixed column counts so a row never ends with an empty grey cell */
@media (min-width: 600px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .features > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .features { grid-template-columns: repeat(4, 1fr); }
  .features > li:last-child:nth-child(odd) { grid-column: auto; }
  .features:has(> li:nth-child(3):last-child), .features:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* Small phones (320px wide): keep the contact list and answer tables inside the screen */
.contact-grid > *, .log-shots > * { min-width: 0; }
.log-shots { grid-template-columns: minmax(0, 1fr); }
.contact-methods strong { overflow-wrap: anywhere; }
.contact-methods a { white-space: normal; }
.contact-methods > li, .contact-methods a > span, .contact-methods div > span { min-width: 0; }
@media (max-width: 400px) {
  .contact-methods a, .contact-methods div { padding: 1rem; gap: 0.75rem; }
  .prose table, .compare-table { font-size: .9rem; }
  .prose th, .prose td, .compare-table th, .compare-table td { padding-left: 0.4rem; padding-right: 0.4rem; overflow-wrap: anywhere; }
}
/* Small labels at least 12px */
.plan-badge, .offer-strip-badge, .offer-card .plan-badge { font-size: .75rem; }
.testimonial blockquote p { margin: 0 0 .75em; }
.testimonial blockquote p:last-child { margin-bottom: 0; }