/* ==========================================================================
   johannacampos.com — shared styles
   Tokens + type follow johannacampos_redesign2.html; layout follows the Figma
   (designed on a 1024px frame). Breakpoints: ≤1000 / ≤900 small desktop,
   ≤860 case-study splits stack, ≤767 mobile menu + stacked bands, ≤480 phone.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #1A1A2E; --coral: #E8624A; --coral-hot: #F0512E; --slate: #4A5568;
  --muted: #8A8FA0; --bg: #F8F7F4; --white: #FFFFFF; --rule: #E2E0DC;
  --nav-bg: #0F0F0F; --black: #000000; --rose: #D5CFCF;
  --text-body: #737373; --text-strong: #202020; --text-soft: #848484;
  --card-soft: #F7F7F7; --about-bg: #F9F9F9;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nav-h: 70px;
  --gutter: 48px;
}
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 300; background: var(--coral); color: #fff; padding: 10px 16px; font-size: 13px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* Shared eyebrow (orange, letter-spaced caps) */
.eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral); }
.eyebrow--lg { font-size: 18px; font-weight: 500; letter-spacing: 0.12em; }
.plus { color: var(--coral); }

/* ==========================================================================
   1. NAV (shared)
   ========================================================================== */
.site-nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: var(--nav-bg); display: flex; align-items: center; justify-content: space-between; padding: 0 38px 0 48px; }
.nav-brand { display: flex; align-items: center; gap: 50px; text-decoration: none; }
.nav-mark { width: 27px; height: auto; }
.nav-wordmark { font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); white-space: nowrap; }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a { font-size: 13px; font-weight: 500; letter-spacing: 0.05em; color: #FFFFFF; text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--coral); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; margin-right: -10px; position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: #fff; border-radius: 1px; transition: transform 0.25s, opacity 0.2s, top 0.25s; }
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ==========================================================================
   2. CTA BAND (shared) — "Ready to build something that matters?"
   ========================================================================== */
.cta-band { background: var(--rose); padding: 92px 24px 86px; text-align: center; display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; column-gap: 48px; row-gap: 64px; }
.cta-col { display: flex; flex-direction: column; align-items: center; }
.cta-band h2 { font-family: var(--serif); font-size: clamp(30px, 3.1vw, 40px); font-weight: 400; line-height: 1.15; color: var(--ink); max-width: 400px; margin: 22px auto 22px; }
.cta-col .btn-primary { margin-top: auto; }
.btn-primary { background: var(--ink); color: var(--bg); padding: 16px 32px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: background 0.2s; display: inline-block; }
.btn-primary:hover { background: var(--coral); }
.btn-coral { background: var(--coral-hot); color: #fff; padding: 16px 32px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; display: inline-block; transition: background 0.2s; }
.btn-coral:hover { background: var(--coral); }

/* ==========================================================================
   3. FOOTER (shared)
   ========================================================================== */
.site-footer { background: var(--ink); padding: 44px 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.footer-logo { font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bg); text-decoration: none; }
.footer-links { display: flex; gap: 28px; }
.footer-links a { font-size: 12px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--coral); }
.footer-copy { font-size: 12px; color: var(--muted); justify-self: end; }

/* ==========================================================================
   4. HOME
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .chat-bubble, .chat-chip, .chat-input, .chat-typing span { animation: none !important; }
}

/* HOME HERO — from the homev3.1–3 Figma frames (1024px wide).
   The hero fills the window under the nav with the same white margin --m on
   every side: the photo grid spans the height between the top and bottom
   margins, the text starts at the left margin, the grid ends at the right one,
   and the gap between them flexes with the window. --u is one Figma pixel,
   sized so the grid fits that height (capped so it can't get silly on very
   large screens). The phone sits at the right of the stage, so its right edge
   lines up with the grid's, and hangs past the bottom where it's clipped.
   Portrait windows
   use a stacked 390×610 layout instead. --p is one Figma pixel inside the photo
   stage, and --px is the phone's left edge in the stage.
   Base styles are the finished state; the animations run from the phone
   state to it, so reduced motion shows the grid.
   Timeline: phone + "Less time" in (0–0.6s) · all 16 photos fade in over
   the apps one by one while the phone fades out behind them (1.8–4.8s) ·
   the headline changes to "More time being human." as the phone goes (3.9–4.9s)
   · the photos float out into the grid while the copy rises and the button
   arrives with it (5–6.4s) · a sparkle sweep turns "being human." orange (5s). */
.hero3 { position: relative; height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); min-height: 320px; background: var(--white); overflow: hidden; container-type: size; }
.hero3-inner {
  --u: min((100cqh - 112px) / 396, (100cqw - 112px) / 752, 1.45px);
  --m: max(56px, calc((100cqh - 396 * var(--u)) / 2));
  /* 286 text + 70 gap + 396 grid: the side margin takes whatever width is left
     over, so the gap between the text and the photos never closes up. */
  --mx: max(56px, calc((100cqw - 752 * var(--u)) / 2));
  /* The phone is scaled to the grid's own width (396 / 273) and sits in the same
     footprint, so the phone state and the finished grid keep identical margins. */
  --p: var(--u); --px: 0; --py: -10; --k: 1.4505;
  position: absolute; inset: 0;
}
/* Sits centred on the phone's app icons, then rises as the photos land so it
   ends up centred on the grid. */
.hero3-copy { position: absolute; left: var(--mx); top: calc(var(--m) + 107 * var(--u)); animation: hero3-copy-rise 1.1s cubic-bezier(0.6, 0, 0.2, 1) 5.1s both; }
@keyframes hero3-copy-rise { from { transform: translateY(calc(62 * var(--u))); } to { transform: none; } }
.hero3-title { display: grid; font-family: var(--sans); font-size: calc(44 * var(--u)); font-weight: 500; line-height: calc(50 * var(--u)); color: #000; white-space: nowrap; }
.hero3-before, .hero3-after { grid-area: 1 / 1; }
.hero3-before { opacity: 0; animation: hero3-in 0.6s ease both, hero3-out 0.6s ease 3.9s forwards; }
.hero3-after { animation: hero3-in 0.8s ease 4.1s both; }
.hero3-btn { position: absolute; left: 0; top: calc(135 * var(--u)); padding: calc(13.6 * var(--u)) calc(32 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(20 * var(--u)); white-space: nowrap; animation: hero3-rise 0.8s ease 5.2s both; }
/* The sparkle sweep: a gold glint slides across the black text, leaving it
   orange, and two small stars twinkle as it passes. */
.hero3-accent { position: relative; color: var(--coral-hot); }
.hero3-after .hero3-accent {
  background: linear-gradient(105deg, var(--coral-hot) 40%, #FFB36B 46%, #FFF4E0 50%, #FFB36B 54%, #000 60%) 0 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hero3-shine 1.3s ease-in-out 5s both;
}
.hero3-after .hero3-accent::before, .hero3-after .hero3-accent::after {
  content: ""; position: absolute; scale: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23FF9A3D' d='M10 0c.8 5.6 4.4 9.2 10 10-5.6.8-9.2 4.4-10 10-.8-5.6-4.4-9.2-10-10 5.6-.8 9.2-4.4 10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero3-after .hero3-accent::before { left: 30%; top: -0.3em; width: 0.36em; height: 0.36em; animation: hero3-twinkle 0.8s ease-out 5.4s; }
.hero3-after .hero3-accent::after { right: -0.5em; top: -0.22em; width: 0.52em; height: 0.52em; animation: hero3-twinkle 0.9s ease-out 5.8s; }
.hero3-stage { position: absolute; right: var(--mx); top: var(--m); width: calc(396 * var(--p)); height: calc(396 * var(--p)); pointer-events: none; }
.hero3-phone { position: absolute; left: calc(var(--px) * var(--p)); top: calc(var(--py) * var(--p)); width: calc(273 * var(--k) * var(--p)); height: auto; max-width: none; opacity: 0; transform-origin: 50% 32%; animation: hero3-phone 4.8s linear both; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.hero3-tile {
  position: absolute; width: calc(88 * var(--p)); height: calc(88 * var(--p)); object-fit: cover; border-radius: calc(20 * var(--p));
  left: calc(var(--c) * 102.67 * var(--p)); top: calc(var(--r) * 102.67 * var(--p));
  animation:
    hero3-in 0.9s ease-in-out calc(1.8s + var(--i) * 0.14s) both,
    hero3-float 1.2s cubic-bezier(0.6, 0, 0.2, 1) calc(5s + var(--i) * 0.04s) both;
}
@keyframes hero3-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero3-out { to { opacity: 0; } }
@keyframes hero3-rise { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes hero3-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes hero3-twinkle { 0% { scale: 0; rotate: 0deg; } 45% { scale: 1; } 100% { scale: 0; rotate: 90deg; } }
/* 0.6s in, holds to 1.6s, fades out behind the photos by 4.8s. */
@keyframes hero3-phone {
  0% { opacity: 0; scale: 1; }
  12.5%, 33.3% { opacity: 1; }
  82% { opacity: 0.12; scale: 1; }
  100% { opacity: 0; scale: 0.86; }
}
/* From the app icon at (sc, sr) to the tile's own grid cell. The icon grid was
   measured off phone.webp itself: 38.4px icons 55.45px/64.9px apart, the first
   35px in from the phone's left edge and 60px below its top; the tile is a
   touch larger so no sliver of the icon shows around it. --px/--py place the phone and --k sizes it, so portrait layouts
   can sit it higher and larger without the icons drifting off it.
   Size and position animate rather than transform: scale, which phones
   (Safari especially) leave blurry at full size. */
@keyframes hero3-float {
  from {
    left: calc((var(--px) + (34.8 + 55.45 * var(--sc)) * var(--k)) * var(--p)); top: calc((var(--py) + (59.8 + 64.9 * var(--sr)) * var(--k)) * var(--p));
    width: calc(38.8 * var(--k) * var(--p)); height: calc(38.8 * var(--k) * var(--p)); border-radius: calc(8.8 * var(--k) * var(--p));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero3 *, .hero3 *::before, .hero3 *::after { animation: none !important; }
  .hero3-phone, .hero3-before { opacity: 0; }
}
/* Portrait and near-square windows (phones, tablets): headline and button
   centred at the top, photos at the bottom edge with the phone centred on
   the grid. */
@container (max-aspect-ratio: 7 / 5) {
  .hero3-inner {
    --u: min(100cqw / 390, 100cqh / 610, 2.2px); --p: calc(var(--u) * 342 / 396); --px: 0; --py: 25; --k: 1.4505;
    /* One spacing --s sits above the headline, between headline and photos,
       between photos and button, and below the button: 4 gaps plus the headline
       (86), the grid (396 stage units) and the button (47) fill the height. */
    --s: max(24px, calc((100cqh - 133 * var(--u) - 396 * var(--p)) / 4));
    --gt: calc(2 * var(--s) + 86 * var(--u));
    position: static; width: auto; height: auto; transform: none;
  }
  .hero3-copy { animation: none; left: 50%; top: calc(var(--s) + 43 * var(--u)); transform: translate(-50%, -50%); text-align: center; }
  /* Under the photos rather than under the headline, so no space is held open
     for it while the phone is up. It still lives inside .hero3-copy, so its
     offset is measured back from the bottom of the hero. */
  .hero3-btn { left: 50%; top: calc(2 * var(--s) + 86 * var(--u) + 396 * var(--p)); translate: -50% 0; }
  .hero3-title { font-size: calc(38 * var(--u)); line-height: calc(43 * var(--u)); }
  .hero3-stage { left: 50%; right: auto; top: var(--gt); bottom: auto; transform: translateX(-50%); }
}

/* Intro */
.home-intro { background: var(--white); padding: 88px 24px 92px; }
.home-intro p { max-width: 840px; margin: 0 auto; text-align: center; font-size: 22px; font-weight: 300; line-height: 1.7; color: var(--slate); }
.home-intro p + p { margin-top: 1.4em; }
/* Opening paragraph of the intro, sized from the CMS (Home > Opening paragraph). */
.home-intro p.home-lead { max-width: 840px; margin: 0 auto 1.4em; font-weight: 400; line-height: 1.45; color: var(--text-strong); }
.home-intro p.home-lead--l { font-size: clamp(22px, 2.2vw, 26px); }
.home-intro p.home-lead--xl { font-size: clamp(24px, 2.6vw, 30px); }
.home-intro p.home-lead--xxl { font-size: clamp(27px, 3.2vw, 36px); }
/* Alignment is chosen in the CMS; phones always get left-aligned text (see 767px block). */
.home-intro--left p { text-align: left; }
.home-intro--right p { text-align: right; }

/* How I can help band */
.help-band { background: var(--black); padding: 44px var(--gutter) 80px; }
.help-band .eyebrow { text-align: center; margin-bottom: 44px; }
.help-cards { max-width: 928px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 29px; }
.help-card { background: var(--white); padding: 44px 32px 50px; display: flex; flex-direction: column; min-height: 286px; }
.help-card h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; color: #000; line-height: 1.3; margin-bottom: 14px; }
.help-card p { font-size: 14.5px; font-weight: 300; line-height: 1.8; color: var(--slate); margin-bottom: 36px; }
.link-more { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); text-decoration: none; border-bottom: 1px solid var(--coral); padding-bottom: 3px; align-self: flex-start; margin-top: auto; }
.link-more span { display: inline-block; transition: transform 0.2s; }
.link-more:hover span { transform: translateX(3px); }
/* The whole service card is clickable: its Learn more link stretches over it. */
.help-card { position: relative; transition: transform 0.2s, box-shadow 0.2s; }
.help-card .link-more::after { content: ""; position: absolute; inset: 0; }
.help-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.help-card:hover .link-more span { transform: translateX(3px); }
.help-card .link-more:focus-visible { outline: none; }
.help-card:has(.link-more:focus-visible) { outline: 2px solid var(--coral); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .help-card, .help-card:hover { transition: none; transform: none; } }
.help-book { text-align: center; margin-top: 60px; }
.help-band .help-book .eyebrow { font-size: 15px; margin-bottom: 10px; }
.help-book h3 { font-family: var(--serif); font-size: clamp(26px, 3vw, 32px); font-weight: 400; line-height: 1.2; color: #fff; margin-bottom: 30px; }
.btn-book { display: inline-block; min-width: min(294px, 100%); padding: 17px 32px; background: var(--coral-hot); color: #000; font-size: 18px; font-weight: 500; text-decoration: none; transition: background 0.2s; }
.btn-book:hover { background: var(--coral); }

/* Selected work */
.work { background: var(--white); padding: 58px var(--gutter) 66px; }
.work .eyebrow { text-align: center; margin-bottom: 64px; }
.work-grid { max-width: 830px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 121px; row-gap: 56px; }
.work-card { text-decoration: none; display: block; }
.work-card-img { overflow: hidden; aspect-ratio: 354 / 306; background: #eee; }
.work-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.work-card:hover .work-card-img img { transform: scale(1.04); }
.work-card h3 { font-size: 17px; font-weight: 600; color: var(--slate); margin: 14px 0 2px; line-height: 1.4; }
.work-card:hover h3 { color: var(--coral); }
.work-card p { font-size: 14.5px; color: var(--slate); line-height: 1.4; }

/* About band */
.about-band { background: var(--black); padding: 96px var(--gutter) 46px; }
.about-band-inner { max-width: 830px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 570px) 100px; column-gap: 80px; align-items: start; }
.about-band .eyebrow { margin-bottom: 8px; }
.about-band p { font-size: 16.5px; font-weight: 300; line-height: 1.9; color: #FFFFFF; margin-bottom: 26px; }
.about-band .btn-coral { margin-top: 12px; }
.about-band-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-top: 30px; margin-right: 0; }

/* ==========================================================================
   5. ABOUT ME
   ========================================================================== */
.about-page { background: var(--about-bg); padding: 60px 24px 58px; }
.about-page h1 { font-family: var(--sans); font-size: 21px; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; color: #000; margin-bottom: 56px; }
.stat-grid { max-width: 830px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 16px; row-gap: 22px; }
.stat-card { background: var(--white); min-height: 252px; padding: 28px 24px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.stat-num { font-family: var(--serif); font-variant-numeric: lining-nums; font-size: 88px; font-weight: 500; line-height: 1; color: var(--coral-hot); margin-bottom: 14px; }
.stat-label { font-size: 16px; font-weight: 600; line-height: 1.35; color: #333; max-width: 200px; margin-bottom: 20px; }
.stat-detail { font-size: 15px; line-height: 1.5; color: var(--text-soft); max-width: 215px; }
.stat-product { width: 46px; height: auto; margin-top: -2px; }
.stat-card--wide { grid-column: 1 / -1; min-height: 156px; flex-direction: row; justify-content: center; gap: 38px; padding: 24px 48px; margin-top: 0; }
.stat-card--wide .stat-num { font-size: 102px; margin: 0; flex: none; width: 96px; text-align: center; }
.stat-card--wide .stat-text { font-size: 15px; line-height: 1.5; color: #333; text-align: left; max-width: 380px; }
.stat-card--wide .stat-text strong { font-weight: 600; }
.stat-card--wide img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; margin-left: 34px; }

/* ==========================================================================
   6. HOW I CAN HELP (tabbed)
   ========================================================================== */
.help-hero { background: linear-gradient(105deg, #000 0%, #050505 30%, #262626 55%, #4a4a4a 80%, #5a5a5a 100%); padding: 56px 24px 0; }
.help-hero .eyebrow { text-align: center; margin-bottom: 46px; }
.tablist { max-width: 896px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.tab { font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.15; color: #FFFFFF; background: rgba(255,255,255,0.13); border: 0; min-height: 73px; padding: 12px 16px; cursor: pointer; transition: background 0.2s; }
.tab:hover { background: rgba(255,255,255,0.2); }
.tab[aria-selected="true"] { background: var(--white); color: var(--ink); cursor: default; }
.tab .tab-line { display: inline; }
.help-body { background: var(--white); padding: 64px 24px 56px; }
.help-panel { max-width: 668px; margin: 0 auto; }
.js .help-panel:not(.is-active) { display: none; }
.help-panel + .help-panel { margin-top: 96px; } /* no-JS fallback: panels stack */
.js .help-panel + .help-panel { margin-top: 0; }
.help-panel .help-preamble { font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--text-strong); margin-bottom: 42px; }
.help-preamble strong { font-weight: 600; }
.help-panel h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; color: #000; margin-bottom: 14px; }
.help-panel p, .help-panel li { font-size: 17px; line-height: 1.7; color: var(--text-strong); }
.help-section { margin-bottom: 44px; }
.help-section > p + p { margin-top: 20px; }
.help-list { list-style: disc; padding-left: 27px; margin-top: 24px; display: grid; gap: 22px; }
.help-list strong { font-weight: 600; color: #000; }
.text-link { color: var(--coral-hot); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.text-link:hover { color: var(--ink); }
.case-card { background: var(--card-soft); padding: 52px 56px 80px; margin: 58px 37px 0; }
.case-card h3 { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--coral-hot); text-align: center; margin-bottom: 36px; }
.case-card p + p { margin-top: 27px; }

/* ==========================================================================
   7. CASE STUDY template
   ========================================================================== */
.cs-hero { position: relative; padding: 56px 24px 0; text-align: center; background: #ccc; overflow: hidden; }
.cs-hero--telehealth { background:
    radial-gradient(circle, rgba(255,255,255,0.5) 1.6px, transparent 2.2px) 12px 12px / 31px 27px,
    linear-gradient(180deg, #BAB2CC 0%, #ABD0D0 100%); }
.cs-hero--cancercompass { background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, #607752 0 22.3%, #DA8F50 22.3% 50.1%, #C86647 50.1% 77.8%, #EEDDBC 77.8% 100%); }
.cs-hero--symptom { background: #B0BFD2 url("../img/symptom-checker/symptom-checker-hero-bg.jpg") center / cover no-repeat; }
.cs-hero--lakatta { background: #E1EAF7 url("../img/lakatta/lakatta-hero-hills.svg") right top / auto 330px no-repeat; }
.cs-hero .cs-eyebrow { font-size: 18px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #000; margin-bottom: 6px; }
.cs-hero h1 { font-family: var(--sans); font-size: 36px; font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; color: #000; margin-bottom: 30px; }
.cs-tagbox { position: relative; background: var(--white); max-width: 825px; margin: 0 auto; padding: 24px 32px 22px; }
.cs-tags { list-style: none; max-width: 540px; margin: 0 auto; font-size: 15px; line-height: 1.68; color: var(--slate); }
.cs-tags li { display: inline; }
.cs-tags li:not(:last-child)::after { content: "·"; color: var(--coral); margin: 0 0.85em 0 0.75em; }
.cs-body { background: var(--white); padding: 70px 0 72px; }
.cs-section { max-width: 728px; margin: 0 auto; padding: 0 24px; }
.cs-section + .cs-section, .cs-section + .cs-split, .cs-split + .cs-section, .cs-figure + .cs-section, .cs-quote + .cs-section, .cs-section + .cs-figure, .cs-quote + .cs-video-split, .cs-video-split + .cs-split, .cs-video-split + .cs-section { margin-top: 72px; }
.cs-section h2 { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; color: #000; margin-bottom: 12px; }
.cs-section p { font-size: 17px; line-height: 1.7; color: var(--text-body); }
.cs-section p + p { margin-top: 24px; }

/* Image + text split (image bleeds off the left edge) */
.cs-video-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; column-gap: 40px; max-width: 728px; margin: 0 auto; padding: 0 24px; }
.cs-video-split .cs-section { max-width: none; margin: 0; padding: 0; }
.cs-video { margin: 0; }
.cs-video video { width: 100%; height: auto; display: block; background: #000; }
.cs-video figcaption { margin-top: 10px; font-size: 11px; line-height: 1.62; color: var(--text-strong); }
.cs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 488px); align-items: center; column-gap: 44px; padding-right: max(24px, calc((100% - 680px) / 2)); }
.cs-split-img { justify-self: start; width: clamp(240px, 28vw, 380px); }
.cs-split-img img { width: 100%; height: auto; }
/* Two device shots side by side: flex-grow is set from each image's intrinsic
   width (inline --w) so both render at the same height. */
.cs-split-img--pair { display: flex; align-items: flex-start; gap: 3%; }
.cs-split-img--pair img { flex: var(--w) 1 0; min-width: 0; width: auto; }
.cs-split .cs-section { max-width: none; margin: 0; padding: 0; }

/* Figures */
.cs-figure { margin: 72px auto 0; padding: 0 24px; }
.cs-figure img { margin: 0 auto; height: auto; }
.cs-figure--telehealth img { width: 614px; }
.cs-figure--bodymap img { width: 567px; }
.cs-figure--lakatta-desktop img { width: 681px; }
.cs-figure-pair { max-width: 690px; margin: 72px auto 0; padding: 0 24px; display: grid; grid-template-columns: 292fr 307fr; column-gap: 50px; align-items: start; }
.cs-figure-pair img { width: 100%; height: auto; }
.cs-figure-pair + .cs-figure { margin-top: 62px; }

/* CancerCompass pull-quote band */
.cs-quote { max-width: 697px; margin: 70px auto 0; border-top: 1px solid #C9C9C9; border-bottom: 1px solid #C9C9C9; padding: 52px 24px 58px; text-align: center; }
.cs-quote p { font-size: 22px; font-weight: 600; line-height: 1.4; color: #000; }
.cs-quote-accent { color: var(--coral-hot); }
.cs-quote + .cs-section { margin-top: 104px; }

/* CancerCompass collage (positions measured from the Figma frame, 709x536) */
.cs-collage { position: relative; max-width: 709px; margin: 72px auto 0; aspect-ratio: 709 / 536; }
.cs-collage img { position: absolute; height: auto; }
/* The website and brand-tile exports carry their own drop shadows as
   transparent padding, so these offsets are negative to line the visible card
   edges up with the Figma positions. */
.cs-collage .c-web { left: -6.0%; top: -1.0%; width: 73.9%; }
.cs-collage .c-chars { left: 70.5%; top: 0; width: 29.3%; }
.cs-collage .c-brand { left: 35.7%; top: 38.0%; width: 69.7%; }
.cs-collage .c-social { left: 2.8%; top: 72.2%; width: 35.8%; }
.cs-credit { position: absolute; left: 44.4%; top: 91.8%; width: 52%; margin: 0; font-size: 11px; line-height: 1.62; color: var(--text-strong); }

/* ==========================================================================
   8. OTHER SELECTED WORK (bottom of every case study)
   ========================================================================== */
.other-work { background: var(--white); padding: 0 24px 66px; }
.other-work > * { max-width: 692px; margin-left: auto; margin-right: auto; }
.other-work h2 { border-top: 1px solid #C5C5C5; padding-top: 44px; font-size: 18px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #000; text-align: center; margin-bottom: 45px; }
.work-grid--three { grid-template-columns: repeat(3, 1fr); column-gap: 29px; row-gap: 29px; }

/* ==========================================================================
   9. CONTACT
   ========================================================================== */
.contact-page { background: var(--ink); padding: 84px 24px 96px; }
.contact-inner { max-width: 830px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: start; }
.contact-page h1 { font-family: var(--serif); font-size: clamp(34px, 4.4vw, 48px); font-weight: 400; line-height: 1.12; color: var(--bg); margin: 18px 0 20px; }
.contact-lede { font-size: 16.5px; font-weight: 300; line-height: 1.85; color: rgba(248,247,244,0.65); }
.contact-direct { font-size: 14.5px; line-height: 1.8; color: rgba(248,247,244,0.65); margin-top: 26px; }
.contact-direct a { color: var(--coral); text-decoration: underline; text-underline-offset: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 22px; }
.form-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(248,247,244,0.5); margin-bottom: 8px; }
.form-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--bg); font-family: var(--sans); font-size: 14px; font-weight: 300; padding: 12px 16px; outline: none; transition: border-color 0.2s; appearance: none; -webkit-appearance: none; border-radius: 0; }
.form-input:focus { border-color: var(--coral); }
.form-input::placeholder { color: rgba(248,247,244,0.25); }
.form-textarea { resize: vertical; min-height: 110px; }
.form-checks { display: flex; flex-direction: column; gap: 10px; }
.form-check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 300; color: rgba(248,247,244,0.7); cursor: pointer; }
.form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--coral); cursor: pointer; flex-shrink: 0; }
.form-submit { background: var(--coral-hot); color: #fff; border: none; padding: 15px 36px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; width: 100%; margin-top: 4px; }
.form-submit:hover { background: var(--coral); }
select.form-input option { background: #1A1A2E; color: var(--bg); }
.form-submit:disabled { opacity: 0.6; cursor: default; }
.form-error { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--bg); }
.form-error a { color: var(--coral); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.form-success { padding: 22px 24px; background: rgba(248,247,244,0.08); border: 1px solid rgba(248,247,244,0.15); font-size: 14px; color: var(--bg); line-height: 1.75; }

/* ==========================================================================
   9b. SCRIPTED CHAT (home page test at /v2)
   ========================================================================== */
.chat-band { background: var(--bg); padding: 72px 24px 80px; }
.chat-eyebrow { text-align: center; font-size: 15px; margin-bottom: 22px; }
.chat { max-width: 640px; margin: 0 auto; background: var(--white); border: 1px solid var(--rule); box-shadow: 0 18px 40px -24px rgba(26,26,46,0.25); }
.chat-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.chat-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.chat-name { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.1; color: var(--ink); }
.chat-status { font-size: 13px; line-height: 1.4; color: var(--muted); }
.chat-log { height: 420px; overflow-y: auto; padding: 22px 22px 8px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.chat-row { display: flex; gap: 10px; align-items: flex-start; }
.chat-row--you { justify-content: flex-end; }
.chat-row-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; margin-top: 2px; }
.chat-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 82%; }
.chat-bubble { font-size: 16px; line-height: 1.55; padding: 10px 15px; border-radius: 18px; background: #F1EFEA; color: var(--text-strong); animation: chat-in 0.25s ease-out; }
.chat-stack .chat-bubble:first-child { border-top-left-radius: 6px; }
.chat-bubble strong { font-weight: 600; }
.chat-bubble a { color: var(--coral-hot); text-decoration: underline; text-underline-offset: 2px; }
.chat-row--you .chat-bubble { max-width: 82%; background: var(--ink); color: #fff; border-top-right-radius: 6px; }
.chat-typing { display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 18px; border-top-left-radius: 6px; background: #F1EFEA; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #A7A39B; animation: chat-dot 1.1s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
.chat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chat-action { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--coral-hot); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.2s; }
.chat-action:hover { background: var(--ink); }
.chat-choices { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 22px 22px; min-height: 22px; }
.chat-chip { font-family: var(--sans); font-size: 14.5px; line-height: 1.35; text-align: left; padding: 9px 15px; border-radius: 20px; border: 1px solid var(--coral-hot); background: var(--white); color: var(--ink); cursor: pointer; transition: background 0.2s, color 0.2s; animation: chat-in 0.25s ease-out; }
.chat-chip--quiet { border-color: var(--rule); color: var(--muted); }
@media (hover: hover) {
  .chat-chip:hover { background: var(--coral-hot); color: #fff; }
  .chat-chip--quiet:hover { background: var(--rule); color: var(--ink); }
}
.chat-chip--note { border-color: var(--ink); }
.chat-input { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; animation: chat-in 0.25s ease-out; }
.chat-field { width: 100%; font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--text-strong); background: var(--white); border: 1px solid #CFCBC3; border-radius: 14px; padding: 10px 14px; resize: vertical; }
.chat-field:focus { outline: none; border-color: var(--coral-hot); box-shadow: 0 0 0 3px rgba(240,81,46,0.15); }
.chat-input-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.chat-send { font-family: var(--sans); font-size: 14.5px; font-weight: 500; padding: 9px 20px; border: 0; border-radius: 20px; background: var(--coral-hot); color: #fff; cursor: pointer; transition: background 0.2s; }
.chat-send:hover { background: var(--ink); }
@keyframes chat-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
/* Without JavaScript: a plain question-and-answer list instead. */
.chat-fallback { padding: 22px; }
.chat-fallback details { border-top: 1px solid var(--rule); padding: 12px 0; }
.chat-fallback summary { cursor: pointer; font-weight: 500; }
.chat-fallback p { margin: 10px 0; font-size: 16px; line-height: 1.55; }
.js .chat-fallback, html:not(.js) .chat-log, html:not(.js) .chat-choices { display: none; }

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  :root { --gutter: 40px; }
  .work-grid { column-gap: 72px; }
}

@media (max-width: 900px) {
  .help-cards { gap: 18px; }
  .help-card { padding: 36px 24px 40px; }
  .work-grid { column-gap: 40px; }
  .tab { font-size: 21px; }
}

/* Image + text splits stack before the image column gets too narrow */
@media (max-width: 860px) {
  .cs-split { grid-template-columns: 1fr; padding-right: 0; row-gap: 28px; }
  .cs-video-split { grid-template-columns: 1fr; row-gap: 24px; }
  .cs-split-img { width: min(78vw, 340px); }
  .cs-split .cs-section { max-width: 728px; margin: 0 auto; padding: 0 24px; width: 100%; }
}

/* Tablet portrait & below: mobile menu, stacked bands */
@media (max-width: 767px) {
  :root { --nav-h: 60px; --gutter: 24px; }
  .site-nav { padding: 0 20px; }
  .nav-brand { gap: 16px; }
  .nav-mark { width: 24px; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--nav-bg); flex-direction: column; gap: 0; padding: 8px 20px 20px; border-top: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 24px rgba(0,0,0,0.35); }
  .nav-open .nav-links { display: flex; }
  .nav-links li + li { border-top: 1px solid rgba(255,255,255,0.08); }
  .nav-links a { display: block; padding: 16px 0; font-size: 15px; }

  .home-intro { padding: 60px 24px; }
  .chat-band { padding: 52px 16px 60px; }
  .chat-head { padding: 14px 16px; }
  .chat-log { height: 380px; padding: 18px 14px 6px; }
  .chat-stack { max-width: 88%; }
  .chat-choices { padding: 10px 14px 18px; }
  .home-intro p { font-size: 20px; text-align: left; }
  .help-band { padding: 44px var(--gutter) 56px; }
  .help-band .eyebrow, .work .eyebrow { margin-bottom: 32px; }
  .help-cards { grid-template-columns: 1fr; max-width: 480px; }
  .help-card { min-height: 0; }
  .work { padding: 52px var(--gutter) 60px; }
  .work-grid { grid-template-columns: 1fr; max-width: 480px; row-gap: 44px; }
  .about-band { padding: 64px var(--gutter) 56px; }
  .about-band-inner { grid-template-columns: 1fr; }
  .about-band-photo { grid-row: 1; margin: 0 0 28px; }

  .cta-band { padding: 64px 24px 68px; grid-template-columns: minmax(0, 420px); }

  .other-work { padding: 0 24px 52px; }
  .other-work h2 { padding-top: 40px; margin-bottom: 30px; font-size: 16px; }
  .work-grid--three { grid-template-columns: 1fr 1fr; max-width: 420px; margin-left: auto; margin-right: auto; gap: 16px; }
  .contact-page { padding: 56px 24px 64px; }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 36px 20px; gap: 18px; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
  .footer-copy { justify-self: center; }

  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card--wide { flex-wrap: wrap; gap: 16px 24px; padding: 28px 24px; }
  .stat-card--wide img { margin-left: 0; }

  .help-hero { padding-top: 40px; }
  .help-hero .eyebrow { margin-bottom: 30px; }
  .tablist { gap: 6px; }
  .tab { font-size: 19px; min-height: 64px; padding: 10px 8px; }
  .tab .tab-line { display: block; }
  .help-body { padding: 44px 24px 48px; }
  .case-card { margin: 48px 0 0; padding: 40px 28px 48px; }

  .cs-hero { padding-top: 44px; }
  .cs-hero h1 { font-size: 30px; margin-bottom: 24px; }
  .cs-hero--lakatta { background-size: auto 250px; }
  .cs-tagbox { padding: 18px 20px; }
  .cs-tags { font-size: 14px; }
  .cs-body { padding: 52px 0 56px; }
  .cs-section + .cs-section, .cs-section + .cs-split, .cs-split + .cs-section, .cs-figure + .cs-section, .cs-quote + .cs-section, .cs-section + .cs-figure, .cs-quote + .cs-video-split, .cs-video-split + .cs-split, .cs-video-split + .cs-section { margin-top: 52px; }
  .cs-figure, .cs-figure-pair { margin-top: 52px; }
  .cs-figure-pair { grid-template-columns: 1fr; row-gap: 20px; max-width: 420px; }
  .cs-quote { margin: 52px 24px 0; padding: 36px 8px 40px; }
  .cs-quote p { font-size: 17px; }
  .cs-quote + .cs-section { margin-top: 64px; }
  .cs-collage { aspect-ratio: auto; max-width: 480px; padding: 0 24px; display: grid; gap: 20px; }
  .cs-collage img { position: static; width: 100% !important; }
  .cs-collage .c-chars { width: 78% !important; justify-self: center; }
  .cs-collage .c-social { width: 72% !important; justify-self: center; }
  .cs-credit { position: static; width: auto; }
}

@media (max-width: 480px) {
  .nav-wordmark { font-size: 12px; letter-spacing: 0.1em; }
  .stat-grid { grid-template-columns: 1fr; max-width: 340px; }
  .stat-card { min-height: 0; padding: 24px 20px 28px; }
  .stat-card--wide { flex-direction: column; text-align: center; }
  .stat-card--wide .stat-text { text-align: center; }
  .tab { font-size: 16px; }
  .help-list { padding-left: 20px; }
  .case-card { padding: 34px 22px 40px; }
  .cs-hero h1 { font-size: 27px; }
}