@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-normal-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-normal-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-italic-500.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;} @font-face{font-family:'Outfit';src:url('assets/fonts/outfit-normal-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'Outfit';src:url('assets/fonts/outfit-normal-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Outfit';src:url('assets/fonts/outfit-normal-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:'Great Vibes';src:url('assets/fonts/great-vibes-normal-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} /* ============================================================================ Kerry Phillippi Remedial Massage — v2 (2026-08-20) Rebuilt around Kerry's dragonfly artwork on black. The v1 hero was her flyer as a raster image with the wording baked into the pixels, which is why it needed a separate mobile crop and still could not be read on a phone: a 1693px-wide image of type, shown 390px wide, is 23% scale type. v2 has no baked type anywhere. The artwork is art, the words are words, and every size on the page is a clamp() against the viewport — so the layout is the same design at 320px and at 1920px rather than two designs with a seam between them. The dragonfly sits on black in the source file, so it is composited with mix-blend-mode: screen: black is the identity colour for screen, so the background drops out completely against any dark ground and no cut-out PNG with a hard edge is needed. ========================================================================== */ :root { /* Palette sampled from Kerry's artwork — forest green, gold, paper */ --forest: #145c3a; --forest-deep: #023727; --night: #041a12; --gold: #c9b24a; --gold-soft: #f3e4a8; --gold-deep: #a78422; /* --gold-deep is a BORDER/FILL gold: on --paper it measures 2.97:1, which fails WCAG AA for body text (4.5:1) and is marginal even for large text (3:1). --gold-ink is the same hue taken down to 6.1:1 for any gold-coloured TEXT sitting on paper. */ --gold-ink: #6f5410; --paper: #f6f0d8; --paper-2: #ebe3c4; --ink: #0b3a28; --muted: #4d675c; --white: #fffdf8; --line: rgba(201, 178, 74, 0.38); --radius: 10px; --serif: "Cormorant Garamond", Georgia, serif; --sans: "Outfit", system-ui, sans-serif; --script: "Great Vibes", "Segoe Script", cursive; --max: 1180px; --header-h: 76px; --ease-out: cubic-bezier(.22, 1, .36, 1); /* One fluid type ramp, used everywhere. Every step is viewport-relative between its floor and ceiling, so nothing needs a breakpoint to stay in proportion. */ --step-hero: clamp(2.7rem, 11vw, 6rem); --step-h2: clamp(2rem, 5.2vw, 3.4rem); --step-h3: clamp(1.3rem, 2.4vw, 1.6rem); --step-lead: clamp(1.02rem, 1.5vw, 1.18rem); --step-body: clamp(1rem, 1.2vw, 1.06rem); --step-small: clamp(.84rem, 1vw, .92rem); --gutter: clamp(1rem, 4vw, 2rem); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + .75rem); text-wrap: pretty; accent-color: var(--gold); caret-color: var(--gold); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; color: var(--ink); font-family: var(--sans); font-size: var(--step-body); background: var(--paper); line-height: 1.65; -webkit-font-smoothing: antialiased; /* No overflow-x:hidden here on purpose. It makes a scroll container, which takes the sticky header's containing block with it — the header then detaches and repaints in the wrong place mid-scroll. Overflow is prevented at the source instead: every grid uses minmax(min(100%, …), 1fr) and every decorative overlay is clipped by its own section. */ } ::selection { background: var(--gold); color: var(--forest-deep); } :focus:not(:focus-visible) { outline: none; } ::marker { color: var(--gold); } img, svg, iframe { max-width: 100%; display: block; } a { color: inherit; } :focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; } .site-header :focus-visible, .hero :focus-visible, .section-green :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; } p { margin: 0; } .skip { position: absolute; left: -999px; top: 0; } .skip:focus { left: 12px; top: 12px; z-index: 80; background: var(--gold); color: var(--forest-deep); padding: .6rem 1rem; border-radius: var(--radius); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .muted { color: var(--muted); } .wrap { width: min(calc(100% - (var(--gutter) * 2)), var(--max)); margin-inline: auto; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(4, 26, 18, 0.96); border-bottom: 1px solid var(--line); } .nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: .7rem; min-height: 44px; text-decoration: none; color: var(--white); } /* Her own dragonfly, cut from the same original the hero uses, so the header and the first screen carry one mark rather than two drawings of one. Transparent PNG (alpha taken from the artwork's own luminance) — it only ever sits on the dark header, where that holds up; the favicon needs a solid ground instead, because a browser tab can be light or dark and luminance-alpha washes out on white. */ .brand-mark { width: 34px; height: 34px; flex: none; /* ⛔ DO NOT give this mix-blend-mode: screen, however tempting — the hero uses exactly that and it looks right in isolation. Adding a SECOND blended layer, inside the sticky header's stacking context, made the HERO dragonfly vanish completely: not dimmed, gone, while every property on it still read correct (complete, opacity 1, display block, visible, right rect). Flipping this one line to `normal` brought it straight back, which is how it was pinned down. A blended element in a composited sticky layer resolves the other blended layer's backdrop wrongly, and the hero screened black-on-black. So this mark is a transparent PNG instead — alpha taken from the artwork's own luminance, then +18% brightness / +45% saturation baked in to undo the dimming that alpha causes, which lands within a hair of the blended look. No blend mode, no compositing risk, and it composites correctly over the header's own 96%-opaque background whatever is scrolling behind it. */ } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-text strong { font-family: var(--script); font-size: 1.55rem; font-weight: 400; } .brand-text span { font-size: .78rem; color: var(--gold-soft); margin-top: .2rem; } .nav-links { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; } .nav-links a { text-decoration: none; color: var(--paper); font-size: .92rem; } .nav-links a:hover { color: var(--gold-soft); } .nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--gold-soft); width: 44px; height: 44px; border-radius: 10px; position: relative; } .nav-toggle::before { content: ""; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; padding: .75rem 1.4rem; border-radius: var(--radius); text-decoration: none; border: 1px solid transparent; cursor: pointer; font-weight: 500; white-space: nowrap; transition: transform .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(.97); } .btn-gold { background: var(--gold); color: var(--forest-deep); font-weight: 600; } .btn-gold:hover { background: var(--gold-soft); } .btn-line { border-color: var(--gold); color: var(--gold-soft); } .btn-line:hover { background: rgba(201, 178, 74, 0.12); } .nav-book { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.1rem; border-radius: var(--radius); background: var(--gold); color: var(--forest-deep) !important; font-weight: 600; } .nav-book:active { transform: scale(.97); } /* ---------- Hero ---------- One hero for every width. The artwork stacks above the words on a phone and sits beside them from 900px, but it is the same type at the same proportion either way — there is no separate mobile hero to fall out of sync. */ .hero { position: relative; isolation: isolate; background: radial-gradient(120% 90% at 62% 18%, #0a3626 0%, var(--night) 62%, #020d09 100%); color: var(--white); padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(2.2rem, 6vw, 4rem); /* clip, not hidden — same reason as .section-glow below. */ overflow: clip; } /* The warm light behind the lotus in Kerry's artwork, rebuilt in CSS so the dark ground is lit from where the art is lit. */ .hero-glow { position: absolute; inset: auto; top: -18%; left: 58%; width: min(120vw, 1100px); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(201,178,74,.30) 0%, rgba(201,178,74,.10) 38%, transparent 68%); z-index: -1; pointer-events: none; } .hero-inner { display: grid; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; } .hero-art { margin: 0; } .hero-art img { width: 100%; height: auto; /* The source artwork is on black. Screen makes black transparent against the dark ground, so the dragonfly floats without a cut-out edge and without a second alpha-channel asset to keep in sync. */ mix-blend-mode: screen; /* No aspect-ratio here: the ratio comes from the img's own width/height attributes (1536x1024), which also reserve the box and keep the LCP element from shifting. Re-cutting the plate means updating those two attributes, not this rule. */ } .hero-copy { display: grid; justify-items: start; gap: clamp(.7rem, 1.6vw, 1rem); } .hero-name { font-size: var(--step-hero); line-height: .92; display: grid; margin: 0; } .hero-kerry { font-family: var(--script); font-weight: 400; color: var(--gold-soft); /* Great Vibes sets a very tall em box for its swashes, so the two lines read as unrelated at the natural leading. Pull them together — but only to the point where the K's swash still clears the cap height of the line below; past about -.04em the 'y' descender lands on top of "Massage". */ line-height: 1.02; margin-bottom: -.03em; } .hero-trade { font-family: var(--serif); font-size: .62em; line-height: 1.05; letter-spacing: .005em; color: var(--white); } .hero-tag { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.35; color: rgba(247, 242, 230, .88); max-width: 26ch; } .hero-place { display: flex; align-items: center; gap: .8rem; font-size: var(--step-small); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); } /* The gold rule either side of "Glenbrook" is lifted from her own flyer. */ .hero-place .rule { display: block; width: clamp(1.5rem, 6vw, 3rem); height: 1px; background: var(--line); } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .35rem; } .hero-proof { display: inline-flex; align-items: center; gap: .55rem; color: rgba(247, 242, 230, .82); font-size: var(--step-small); } .stars { display: flex; gap: .1rem; color: var(--forest); font-size: 1.05rem; } .stars span { width: 1em; text-align: center; } .stars span::before { content: "\2605"; } .stars-gold { color: var(--gold-soft); } @media (min-width: 900px) { .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } /* Words first in the source for screen readers and for the phone stack; art to the right of them once there is room for both. */ .hero-copy { grid-column: 1; grid-row: 1; } .hero-art { grid-column: 2; grid-row: 1; } .hero-art img { transform: translateX(3%); } } /* ---------- Sections ---------- */ .section { padding-block: clamp(2.8rem, 6vw, 4.8rem); } .section-tight { padding-top: 0; } .section-paper { background: var(--paper); } .section-green { background: var(--forest-deep); color: var(--paper); } /* `overflow: clip`, not `hidden`. `hidden` makes the section a scroll container, which becomes the scrollport for any `position: sticky` descendant — and since that container never scrolls, the sticky rail head in #reviews simply never engaged (measured: it scrolled off to -212px instead of holding at 111px, while #pricing, which carries no glow and so no overflow, held correctly). `clip` clips the decorative ::before without creating a scrollport. */ .section-glow { position: relative; isolation: isolate; overflow: clip; } .section-glow::before { content: ""; position: absolute; top: -40%; left: 50%; translate: -50% 0; width: min(130vw, 1200px); aspect-ratio: 1; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(201,178,74,.14) 0%, transparent 62%); } .section-quote { padding-block: clamp(2rem, 4vw, 3rem); } .section-head { max-width: 36rem; margin: 0 0 clamp(1.8rem, 4vw, 2.6rem); } .section-head h2 { font-size: var(--step-h2); letter-spacing: -.012em; margin-bottom: .6rem; text-wrap: balance; } .lede { color: var(--muted); font-size: var(--step-lead); } .section-green .lede { color: rgba(247, 242, 230, .78); } .from-table { max-width: 42rem; margin: 0; padding: 0; } .from-table p { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 3.2vw, 2rem); line-height: 1.35; color: var(--ink); } .from-table footer { margin-top: .8rem; color: var(--muted); font-size: var(--step-small); font-weight: 600; } /* ---------- Treatments ---------- auto-fit + minmax is the whole responsive story: 1 column on a phone, 2 on a tablet, 3 on a desktop, with no breakpoint deciding which. min() stops the 17rem floor from overflowing a 320px screen. */ .treat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.4rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.6rem); } .treat { display: grid; gap: .5rem; align-content: start; } .treat h3 { font-size: var(--step-h3); color: var(--gold-soft); } .treat p { color: rgba(247, 242, 230, .8); } .treat-note { margin-top: clamp(1.8rem, 4vw, 2.6rem); padding-top: clamp(1.2rem, 3vw, 1.8rem); border-top: 1px solid rgba(201, 178, 74, .22); color: rgba(247, 242, 230, .8); max-width: 46rem; } .treat-note a { color: var(--gold-soft); text-underline-offset: .18em; } /* ---------- Prices ---------- A three-column row that collapses to two lines on a phone: length and figure stay on one line together (they are the pair people compare), and the note drops beneath them. */ .price-table { display: grid; max-width: 46rem; } .price-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "len fig" "note note"; gap: .2rem clamp(1rem, 4vw, 2rem); align-items: baseline; padding-block: clamp(.95rem, 2.4vw, 1.25rem); border-bottom: 1px solid rgba(17, 69, 56, .14); } .price-len { grid-area: len; font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1; font-variant-numeric: tabular-nums; } .price-len span { font-family: var(--sans); font-size: .5em; color: var(--muted); margin-left: .15em; } .price-fig { grid-area: fig; justify-self: end; font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--forest); } .price-note { grid-area: note; color: var(--muted); font-size: var(--step-small); } .price-row.is-popular { border-bottom-color: var(--gold); } .price-row.is-popular .price-fig { color: var(--gold-ink); } .tag { display: inline-block; margin-left: .5rem; border: 1px solid var(--line); border-radius: 999px; padding: .05rem .55rem; font-size: .78em; color: var(--gold-ink); white-space: nowrap; } .center-note { color: var(--muted); margin-top: clamp(1.2rem, 3vw, 1.8rem); font-size: var(--step-small); max-width: 46rem; } @media (min-width: 640px) { .price-row { grid-template-columns: 7.5rem minmax(0, 1fr) auto; grid-template-areas: "len note fig"; align-items: center; gap: 1.5rem; } .price-note { font-size: var(--step-small); } } /* ---------- Reviews ---------- */ .google-score { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; margin-bottom: 1.6rem; border-bottom: 1px solid rgba(201, 178, 74, .22); } .google-score-num { font-family: var(--serif); font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; } .section-green .google-score .stars { color: var(--gold-soft); } .section-green .muted { color: rgba(247, 242, 230, .7); } .google-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-soft); font-weight: 600; text-underline-offset: .18em; text-decoration-thickness: .08em; } .quote-lead { margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); padding: 0; max-width: 30ch; font-size: clamp(1.5rem, 4vw, 2.4rem); } .quote-lead p { font-family: var(--serif); font-style: italic; /* The measure has to be computed against the type it is measuring: put the display size on the container and let the p inherit it, or a max-width in ch resolves against the 1rem container and lays out one word per line. */ font-size: 1em; line-height: 1.3; color: var(--white); } .quote-lead footer { margin-top: .8rem; font-family: var(--sans); font-size: var(--step-small); font-weight: 600; color: var(--gold-soft); } .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.2rem, 3vw, 2rem); } .quotes blockquote { margin: 0; padding: 0; } .quotes p { font-family: var(--serif); color: rgba(247, 242, 230, .88); font-size: 1.1rem; line-height: 1.45; } .quotes footer { margin-top: .7rem; color: var(--gold-soft); font-weight: 600; font-size: var(--step-small); } /* ---------- Health funds ---------- */ .claim-list { max-width: 42rem; margin: 0; padding-left: 1.25rem; display: grid; gap: .7rem; color: var(--muted); } .note { margin-top: 1.1rem; font-size: var(--step-small); color: var(--muted); } .note a, .lede a, .meta a, .tiny a, .foot-meta a { text-underline-offset: .18em; text-decoration-thickness: .08em; } /* ---------- FAQ ---------- */ .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0 clamp(2rem, 4vw, 3rem); align-items: start; } .faq-item { border-bottom: 1px solid rgba(43, 32, 26, .12); } .faq-item summary { cursor: pointer; list-style: none; padding: .95rem 0; font-weight: 600; color: rgba(11, 58, 40, .94); min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; flex: none; width: .42rem; height: .42rem; border-right: 2px solid var(--forest); border-bottom: 2px solid var(--forest); transform: rotate(45deg) translate(-2px, -2px); } .faq-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .faq-item p { padding: 0 0 .95rem; color: var(--muted); } /* ---------- Facts strip ---------- */ .facts { background: var(--paper-2); padding-block: clamp(1.6rem, 3.5vw, 2.2rem); } .facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(1rem, 2.5vw, 1.6rem); } .fact { text-decoration: none; display: grid; gap: .15rem; align-content: start; color: var(--ink); } .fact-label { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .fact strong { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; } .fact span:last-child { color: var(--muted); font-size: var(--step-small); } /* ---------- Visit + book ---------- */ .visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1rem, 2.5vw, 1.4rem); align-items: start; } .map-card, .book-card { background: var(--white); border: 1px solid rgba(17, 69, 56, .1); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.6rem); } .map-card { display: flex; flex-direction: column; } .map-card h2, .book-card h2 { font-size: var(--step-h3); margin-bottom: .3rem; } .map-embed { border: 0; width: 100%; flex: 1; min-height: 280px; max-height: 420px; border-radius: var(--radius); margin-top: 1rem; } .meta { color: var(--muted); margin-top: .35rem; font-size: var(--step-small); } .bmv-embed { margin-top: 1rem; min-height: 320px; } .bmv-embed iframe { width: 100%; border: 0; display: block; border-radius: var(--radius); } .bmv-note { margin-top: .9rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--night); color: var(--paper); padding: clamp(1.8rem, 4vw, 2.4rem) 0 1.5rem; } .foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem; padding-bottom: 1.3rem; border-bottom: 1px solid rgba(201, 178, 74, .2); } .foot-meta { color: rgba(247, 242, 230, .7); font-size: var(--step-small); } .social { display: flex; gap: 1rem; align-items: center; } .social a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); text-underline-offset: .18em; text-decoration-thickness: .08em; } .fund-note { border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .75rem; font-size: .82rem; color: var(--paper); } .tiny { margin-top: 1rem; color: rgba(247, 242, 230, .72); font-size: .82rem; } /* ---------- Narrow layout ---------- */ @media (max-width: 899px) { .nav-toggle { display: grid; place-items: center; } .nav-links { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--forest); flex-direction: column; align-items: flex-start; padding: 1rem var(--gutter) 1.3rem; overscroll-behavior: contain; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow: auto; } .nav.open .nav-links { display: flex; } .nav-links a { min-height: 44px; display: flex; align-items: center; width: 100%; } body.nav-open { overflow: hidden; } /* The 3:2 plate is 250px tall at 375px wide, which pushed the Google proof line 6px below the fold on a 667px-tall phone. Everything above the fold — Book, Call and the rating — is the bar this page already held, so the art yields instead: clamped against viewport HEIGHT, it gives back exactly as much as a short screen needs and nothing on a tall one (at 812px the clamp computes above the natural height and does not bite). object-fit keeps the aspect while the height is constrained. */ /* Measured at 375x667: header 77 + hero padding 59 + gap 16 + the copy block 338 (the two CTAs stack on a phone and are 117 of that) = 490px that is not negotiable, because Book, Call and the rating all inside the first viewport is the bar this page holds at every width. So the art takes what is left and no more. A flat svh fraction cannot do this: any fraction small enough to rescue a 667px screen also shrinks the art on an 812px one, where there was never a problem. Subtracting the fixed cost instead means the clamp computes above the natural 250px on a modern phone and never bites there. */ .hero-art img { max-height: max(92px, calc(100svh - 510px)); object-fit: contain; } .hero-copy { justify-items: center; text-align: center; } .hero-name { justify-items: center; } .hero-tag { max-width: 26ch; } .hero-actions { justify-content: center; } .quote-lead { max-width: none; } } /* ---------- Wide layout: keep the right half of the page from reading empty ---------- */ @media (min-width: 1040px) { #pricing .wrap, #reviews .wrap, #health-funds .wrap { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 4rem); align-items: start; } #pricing .section-head, #reviews .section-head, #health-funds .section-head { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 2.2rem); } /* The rail heads live in a 22rem column — the full display size breaks them. */ #pricing .section-head h2, #reviews .section-head h2, #health-funds .section-head h2 { font-size: clamp(1.9rem, 2.7vw, 2.7rem); } #pricing .price-table, #pricing .center-note, #reviews .google-score, #reviews .quote-lead, #reviews .quotes, #health-funds .claim-list, #health-funds .note { grid-column: 2; } #pricing .price-table, #reviews .quotes, #health-funds .claim-list { max-width: none; } } /* ---------- Touch + motion ---------- */ @media (pointer: coarse) { .btn, .nav-book, .faq-item summary, .google-link, .fact { min-height: 44px; } } @media (pointer: coarse) and (min-width: 900px) { .nav-links a { min-height: 44px; display: inline-flex; align-items: center; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .nav-book { transition: none; } .btn:hover, .nav-book:hover, .btn:active, .nav-book:active { transform: none; } .hero-art img { transform: none; } }