, which draws a native tooltip) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* BUG 2: the demo head let the toggle clip off the right edge on narrow widths */ .nerve-demo-head { align-items: flex-start; } .nerve-demo-head h3 { flex: 1 1 220px; min-width: 0; } .nerve-toggle { flex: 0 0 auto; max-width: 100%; } @media (max-width: 640px) { .nerve-demo-head { flex-direction: column; align-items: stretch; } .nerve-toggle { width: 100%; } .nerve-btn { flex: 1 1 0; padding: 9px 10px; font-size: 0.8rem; } } /* Never let the diagram itself force horizontal scroll */ .nerve-stage { overflow: hidden; } .nerve-stage svg { max-width: 100%; } /* Hand-off notice is informational, not an error */ .form-notice:not(.form-notice--warn) { background: #EEF3FA; border-left-color: var(--navy); } .form-notice:not(.form-notice--warn) h3, .form-notice:not(.form-notice--warn) p { color: var(--navy-deep); } .form-notice:not(.form-notice--warn) a { color: var(--navy); } /* ---------- Image icons (replace the line-art SVGs) ---------- */ /* No overflow:hidden here — the ::after glow is deliberately larger than the tile (inset:-30%) and was being clipped to nothing. The image itself is rounded via its own border-radius instead. */ .icon-img { width: 64px; height: 64px; border-radius: 14px; background: var(--navy-deep); flex-shrink: 0; margin-bottom: var(--sp-4); box-shadow: 0 4px 14px rgba(2,50,112,0.18); position: relative; isolation: isolate; } .icon-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; position: relative; z-index: 1; } .icon-img--lg { width: 84px; height: 84px; border-radius: 18px; } .therapy-icon.icon-img { width: 72px; height: 72px; margin-bottom: 0; border-radius: 16px; } .card-icon.icon-img { background: var(--navy-deep); padding: 0; } /* ================================================================ MOBILE OPTIMISATION Audience skew matters here: most visitors are older adults, many with neuropathy in the hands. Reduced fine-motor control and presbyopia mean touch targets and text size need more headroom than a typical site. Targets follow WCAG 2.2 SC 2.5.8 (24px floor) with a 44px comfort target. ================================================================ */ /* ---- Touch targets ---- */ .nerve-btn { min-height: 44px; } /* was 40px */ .brand { min-height: 44px; display: inline-flex; align-items: center; } .svc-link { min-height: 44px; align-items: center; } .faq-q { min-height: 48px; } .footer-links a, .nav-menu a { min-height: 44px; display: flex; align-items: center; } /* Checkboxes and radios: 18px is too small to hit reliably with numb fingers */ .consent-row input[type="checkbox"], .check-item input[type="checkbox"] { width: 24px; height: 24px; } .consent-row { align-items: center; gap: 14px; } .consent-row input { margin-top: 0; } /* Give the checkbox its own comfortable hit area on the label */ .check-item span { min-height: 60px; } .check-item span::before { width: 26px; height: 26px; } /* ---- Readable text floor on small screens ---- */ @media (max-width: 820px) { body { font-size: 17px; line-height: 1.7; } .lede { font-size: 1.12rem; } /* Nothing informational drops below 14px on a phone */ .small, .hint, figcaption, .testimonial-meta, .video-note, .citation-source, .footer-disclaimer, .checker-count, .support-role, .therapy-tag, .readout-label { font-size: 0.875rem; } .eyebrow { font-size: 0.8rem; letter-spacing: 0.06em; padding: 6px 15px; } .clinic-status { font-size: 0.82rem; } .topbar { font-size: 0.85rem; } /* Form text must be >=16px or iOS zooms the viewport on focus */ .field input, .field select, .field textarea { font-size: 16px; } .field label { font-size: 0.95rem; } .check-item span, .consent-row label { font-size: 0.95rem; } /* Comfortable reading measure and rhythm */ p, li { max-width: 100%; } .card, .therapy-block, .checker, .callback-panel { padding: var(--sp-5); } .cred-list > div { grid-template-columns: 1fr; gap: 2px; } } /* ---- Very small phones ---- */ @media (max-width: 420px) { .nerve-toggle { flex-direction: column; } .nerve-btn { width: 100%; } .hero-stats { grid-template-columns: 1fr 1fr; } .lead-person-name { font-size: 1.75rem; } } /* ---- Landscape phones: reclaim vertical space ---- */ @media (max-height: 500px) and (orientation: landscape) { .hero { padding: var(--sp-6) 0; } .topbar { display: none; } } /* ---- Larger tap feedback on touch devices ---- */ @media (hover: none) { .card:hover, .svc-card:hover, a.card:hover { transform: none; } .btn:active { transform: scale(0.98); } .check-item:active span, .time-opt:active span { background: var(--bg-alt); } } /* ---- Corrections to the mobile block above ---- 1. `rem` resolves against <html>, not <body>. Setting body{17px} scaled nothing that used rem — which is nearly every small label. Scale the root instead so the whole type system moves together. 2. `.check-item input` is visually hidden and the <label> is the real target; giving it a 24px box turned it into an invisible overlay. Only the visible consent checkbox needs a real 24px box. */ @media (max-width: 820px) { html { font-size: 17px; } body { font-size: 1rem; } .eyebrow { font-size: 0.84rem; } .clinic-status { font-size: 0.84rem; } .small, .hint, figcaption, .testimonial-meta, .video-note, .citation-source, .footer-disclaimer, .checker-count, .support-role, .therapy-tag, .readout-label, .checker-disclaimer, .checker-urgent { font-size: 0.85rem; } } .check-item input[type="checkbox"] { width: 0; height: 0; } /* Final mobile floors — form microcopy and the consent control. The consent checkbox at 24px already meets WCAG 2.2 SC 2.5.8, but this audience has reduced fine-motor control, so give it real comfort room. */ @media (max-width: 820px) { .callback-badge, .field-error, .field .hint, .consent-row label { font-size: 0.85rem; } .consent-row input[type="checkbox"] { width: 28px; height: 28px; } } /* Topbar phone link was 22px tall — 2px under WCAG 2.2 SC 2.5.8 (24px floor). */ .topbar a { display: inline-flex; align-items: center; min-height: 24px; } /* ================================================================ ICON ANIMATION The icons are lit subjects on a dark ground, so they animate best as *light* rather than motion — a slow breathing glow, with the subject itself drifting almost imperceptibly. Entrance is staggered on scroll. All of it collapses to a static icon under prefers-reduced-motion. ================================================================ */ .icon-img { position: relative; isolation: isolate; transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); } /* Ambient glow that breathes behind the icon */ .icon-img::after { content: ""; position: absolute; inset: -55%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(0,136,224,0.55) 0%, rgba(0,136,224,0.22) 38%, rgba(255,115,0,0.10) 58%, transparent 72%); opacity: 0; transform: scale(0.72); } .icon-img img { transform-origin: 50% 55%; will-change: transform; } /* Only animate once the icon has actually scrolled into view. `.icon-img` alone is the fallback for the handful of icons that sit outside a .reveal wrapper — previously those never animated at all. */ .reveal.is-visible .icon-img::after, .icon-img.is-lit::after, .icon-img:not(.reveal *)::after { animation: iconGlow 4.6s ease-in-out infinite; } .reveal.is-visible .icon-img img, .icon-img.is-lit img, .icon-img:not(.reveal *) img { animation: iconDrift 6.2s ease-in-out infinite; } /* The tile itself breathes. The old version animated only the image inside an opaque tile and a glow hidden behind it, so nothing was perceptible — the measured drift was 2.5px under a cover-fitted image. */ .reveal.is-visible .icon-img, .icon-img.is-lit, .icon-img:not(.reveal *) { animation: iconBreathe 6.2s ease-in-out infinite; } @keyframes iconGlow { 0%, 100% { opacity: 0.34; transform: scale(0.86); } 50% { opacity: 1; transform: scale(1.28); } } @keyframes iconDrift { 0%, 100% { transform: translateY(0) scale(1); filter: saturate(1) brightness(1); } 50% { transform: translateY(-4px) scale(1.075); filter: saturate(1.25) brightness(1.14); } } @keyframes iconBreathe { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 14px rgba(2,50,112,0.18); } 50% { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 26px rgba(0,136,224,0.34); } } /* Stagger so a grid of icons ripples rather than pulsing in unison */ .grid > *:nth-child(1) .icon-img::after, .grid > *:nth-child(1) .icon-img img { animation-delay: 0s; } .grid > *:nth-child(2) .icon-img::after, .grid > *:nth-child(2) .icon-img img { animation-delay: .42s; } .grid > *:nth-child(3) .icon-img::after, .grid > *:nth-child(3) .icon-img img { animation-delay: .84s; } .grid > *:nth-child(4) .icon-img::after, .grid > *:nth-child(4) .icon-img img { animation-delay: 1.26s; } .grid > *:nth-child(5) .icon-img::after, .grid > *:nth-child(5) .icon-img img { animation-delay: 1.68s; } .grid > *:nth-child(6) .icon-img::after, .grid > *:nth-child(6) .icon-img img { animation-delay: 2.10s; } /* Hover / focus: lift the icon and brighten its glow */ .card:hover .icon-img, .therapy-block:hover .icon-img, .card:focus-within .icon-img { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(2,50,112,0.30); } .card:hover .icon-img::after, .therapy-block:hover .icon-img::after { animation-duration: 2.4s; } @media (prefers-reduced-motion: reduce) { .icon-img::after { animation: none !important; opacity: 0.34; transform: scale(0.9); } .icon-img img { animation: none !important; transform: none !important; } .card:hover .icon-img, .therapy-block:hover .icon-img { transform: none; } } /* Touch devices get the ambient glow but no hover lift */ @media (hover: none) { .card:hover .icon-img, .therapy-block:hover .icon-img { transform: none; box-shadow: none; } } /* ---------- Video transcripts ---------- The site's videos are silent — their narration is burned-in text. A <track> would caption audio that isn't there, so the accessible equivalent (WCAG 1.2.1) is a real transcript. Collapsed by default so it doesn't crowd the card, but it is in the DOM and reachable by keyboard and screen reader. */ .transcript { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); } .transcript > summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: var(--navy); min-height: 24px; display: flex; align-items: center; gap: 6px; } .transcript > summary:focus-visible { outline: 3px solid var(--blue-accent); outline-offset: 3px; border-radius: 4px; } .transcript > summary::marker { color: var(--orange-text); } .transcript-list { margin: var(--sp-3) 0 0; padding-left: 1.3em; font-size: 0.85rem; color: var(--ink-soft); } .transcript-list li { margin-bottom: 6px; line-height: 1.55; } .section--navy .transcript, .hero .transcript { border-color: rgba(255,255,255,0.2); } .section--navy .transcript > summary, .hero .transcript > summary { color: #fff; } .section--navy .transcript-list, .hero .transcript-list { color: var(--on-navy-300); } @media print { .transcript[open] .transcript-list { display: block; } .transcript > summary { display: none; } } /* Honeypot: off-screen rather than display:none, because some bots skip fields that are display:none. Real users never see or tab into it (tabindex=-1). */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Video chrome ---------- Every film on this site is silent — ffprobe shows a single h264 stream, no audio. The native control bar still renders a mute/unmute button, which is a false affordance: pressing it does nothing a viewer can perceive. WebKit lets us drop just that control and keep the rest of the native bar, so playback stays fully keyboard- and screen-reader-accessible. */ .media-frame video::-webkit-media-controls-mute-button, .video-frame video::-webkit-media-controls-mute-button, .media-frame video::-webkit-media-controls-volume-slider, .video-frame video::-webkit-media-controls-volume-slider { display: none; } /* The control bar was running square to the edges of a --radius-lg frame and breaking the rounded corner. */ .media-frame, .video-frame { overflow: hidden; } .media-frame video, .video-frame video { display: block; border-radius: inherit; } /* --------------------------------------------------------------------------- MOBILE DENSITY .section and .hero both used `padding: var(--sp-9) 0` — 96px top AND bottom — at every width. On a 375px phone that is 192px of empty space per section; across the homepage's sections it pushed the page to 17 screens, put the intro film below the fold at 1070px, and left the first service card ~4 screens down. Desktop keeps the generous rhythm; phones get a proportionate one. --------------------------------------------------------------------------- */ @media (max-width: 820px) { .section { padding: var(--sp-7) 0; } /* 96px -> 48px */ .hero { padding: var(--sp-6) 0 var(--sp-7); } .section[style*="padding-top:64px"], .section[style*="padding-top:56px"], .section[style*="padding-top:72px"] { padding-top: var(--sp-6) !important; padding-bottom: var(--sp-6) !important; } /* The hero lede ran seven lines before the first button. */ .hero .lede { font-size: 1.02rem; line-height: 1.55; } .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.35rem); line-height: 1.14; } .hero-inner { gap: var(--sp-5); } .hero-stats { margin-top: var(--sp-4); } /* Section intros carried the same 48px bottom margin as desktop. */ .center[style*="margin:0 auto 48px"] { margin-bottom: var(--sp-5) !important; } h2 { font-size: clamp(1.55rem, 6.4vw, 1.9rem); } .grid { gap: var(--sp-5); } } @media (max-width: 420px) { .section { padding: var(--sp-6) 0; } .hero .lede { font-size: 0.98rem; } /* Three lines of uppercase in a pill is a banner, not an eyebrow. */ .eyebrow { font-size: 0.72rem; letter-spacing: 0.05em; padding: 5px 12px; } } /* The fixed call bar is 57px plus the iOS home indicator; the old 56px reserve left the last element on every page tucked underneath it. */ @media (max-width: 820px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .mobile-call-bar { padding-bottom: env(safe-area-inset-bottom, 0px); } } /* Service cards on phones. Stacked full-width, each card ran 483px (a 213px 16:10 image plus body) and six of them made a 4.4-screen block — the single biggest thing on the mobile homepage. A thumbnail beside the text is the conventional pattern for a service list at this width and roughly halves the card. */ @media (max-width: 640px) { .svc-card { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; } .svc-media { aspect-ratio: auto; height: 100%; min-height: 100%; } .svc-media img { width: 100%; height: 100%; object-fit: cover; } .svc-body { padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4); } .svc-body h3 { font-size: 1.02rem; margin-bottom: 6px; } .svc-body p { font-size: 0.9rem; line-height: 1.5; margin-bottom: var(--sp-3); } .svc-link { font-size: 0.88rem; } } @media (max-width: 380px) { .svc-card { grid-template-columns: 92px 1fr; } .svc-body { padding: var(--sp-3); } }

/* NeuroRenew Clinics — Design System Brand colors sampled directly from the official NeuroRenew Clinics logo. Palette validated for WCAG AA contrast — see comments below on safe usage. ── BREAKPOINT SCALE ─────────────────────────────────────────────────────── Five steps. Nothing else. CSS custom properties cannot be used inside a @media condition, so the literals below are the single source of truth — if you add a query, use one of these five values. xs max-width: 420px very small phones sm max-width: 640px phones (grids collapse to 1 column) md max-width: 820px large phones / portrait tablets (mobile type scale + sticky call bar start here) lg max-width: 1024px landscape tablets / small laptops (navigation collapses to the hamburger drawer) xl max-width: 1240px desktop Mirror queries use the next pixel up: min-width 641 / 1025 / 1241. ─────────────────────────────────────────────────────────────────────────── */ /* Fonts load via + in layout.html. An @import here would chain a second render-blocking request behind this file. */ :root { /* Brand core (sampled from logo) */ --navy: #023270; /* 12.4:1 on white — safe for all text & solid buttons */ --navy-deep: #001A3D; /* darkest navy, footer / gradients */ --navy-mid: #0A4A96; /* hover / lighter accents */ --orange: #FF7300; /* brand accent — DECORATIVE ONLY (2.7:1 on white, fails AA as text/button label) */ --orange-text: #C2410C; /* accessible orange — 5.18:1 on white, safe for links/labels/small text */ --blue-accent: #0088E0; /* logo swoosh accent — large graphic use only (3.75:1, not body text) */ /* Neutrals */ --ink: #1E293B; /* primary body text */ --ink-soft: #475569; /* secondary / muted text */ --bg: #FFFFFF; --bg-alt: #F5F8FC; /* section alternation, faint navy tint */ --bg-deep: #EEF3FA; --border: #E2E8F0; /* decorative hairlines only — 1.23:1, NOT for control boundaries */ --border-control: #7C8CA3;/* 3.42:1 on white — boundary of any control whose state must read */ --white: #FFFFFF; /* Muted text tiers for use on navy grounds (all AA on --navy or darker) */ --on-navy-100: #D6E2F5; --on-navy-200: #C9D8EE; --on-navy-300: #AEC3E4; --on-navy-400: #9BB0CE; --on-navy-500: #8195B4; /* Semantic */ --success: #15803D; --danger: #B91C1C; /* Type */ --font-head: 'Figtree', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* Spacing scale (4/8pt) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* Layout */ --container: 1200px; --header-h: 74px; /* sticky header height; drawer offset + scroll-padding key off this */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; /* Motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 220ms; /* Elevation */ --shadow-sm: 0 1px 2px rgba(2,50,112,0.06), 0 1px 1px rgba(2,50,112,0.04); --shadow-md: 0 8px 24px rgba(2,50,112,0.10), 0 2px 6px rgba(2,50,112,0.06); --shadow-lg: 0 24px 64px rgba(2,50,112,0.16), 0 4px 12px rgba(2,50,112,0.08); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* The header is sticky, so an anchor jump used to park the target heading underneath it. Keep every #anchor landing clear of the bar. */ scroll-padding-top: calc(var(--header-h) + 12px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* The UA default is `margin: 1em 40px`. Left in place inside a card it cost 80px of an already narrow column and set quotes ~15 characters to a line. */ blockquote { margin: 0; } a { color: var(--navy); text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy-deep); line-height: 1.2; margin: 0 0 var(--sp-4); font-weight: 700; } h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.01em; } h3 { font-size: 1.375rem; } p { margin: 0 0 var(--sp-4); max-width: 68ch; color: var(--ink-soft); } ul, ol { padding-left: 1.25em; color: var(--ink-soft); } .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; } /* Focus visibility (WCAG) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--blue-accent); outline-offset: 2px; border-radius: 4px; } /* ---------- Layout helpers ---------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); } .section { padding: var(--sp-9) 0; } .section--alt { background: var(--bg-alt); } .section--navy { background: linear-gradient(160deg, var(--navy-deep), var(--navy)); color: #fff; } .section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; } .section--navy p, .section--navy .lede { color: var(--on-navy-200); } .grid { display: grid; gap: var(--sp-6); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .stack { display: flex; flex-direction: column; } .center { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; } .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); background: var(--bg-alt); border: 1px solid var(--border); padding: var(--sp-1) var(--sp-4); border-radius: 999px; margin-bottom: var(--sp-4); } .section--navy .eyebrow { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #fff; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-head); font-weight: 700; font-size: 1rem; padding: 14px 28px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); min-height: 44px; text-align: center; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-mid); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); } .btn-outline:hover { background: var(--navy); color: #fff; } .section--navy .btn-outline, .hero .btn-outline, .offer-panel .btn-outline, .panel-gradient .btn-outline, .on-dark .btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); } .section--navy .btn-outline:hover, .hero .btn-outline:hover { background: #fff; color: var(--navy); } .btn-accent { background: var(--orange); color: var(--navy-deep); box-shadow: var(--shadow-sm); } /* navy-on-orange passes 4.55:1 */ .btn-accent:hover { background: #E56600; } .btn-block { width: 100%; } /* ---------- Cards ---------- */ .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .card-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--bg-alt); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); color: var(--navy); } .card-icon svg { width: 26px; height: 26px; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border); } /* The frosted blur lives on a pseudo-element, NEVER on .site-header itself. Per CSS Filter Effects L2 a backdrop-filter creates a containing block for fixed-position descendants — and the mobile nav drawer (.nav-links, below) is a fixed-position descendant of this header. With the filter on the header, the drawer's `inset: 64px 0 0 0` resolved against the ~74px header instead of the viewport and collapsed it to a 64px sliver, hiding most of the menu on every phone and tablet. Keep the filter on ::before. */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Fallback for browsers without backdrop-filter (older Firefox): opaque bar, otherwise the header would be 8% transparent over scrolling content. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header::before { background: #fff; } } .nav-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) 0; gap: var(--sp-5); } .brand { display: flex; align-items: center; gap: var(--sp-2); } .brand img { height: 40px; width: auto; } .nav-links { display: flex; align-items: center; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; } .nav-links a { font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; color: var(--ink); padding: var(--sp-2) 0; border-bottom: 2px solid transparent; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--navy); border-color: var(--orange); } .nav-cta { display: flex; align-items: center; gap: var(--sp-4); } .nav-phone { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 0.95rem; white-space: nowrap; } .nav-toggle { display: none; } @media (max-width: 1024px) { .nav-links { position: fixed; inset: var(--header-h) 0 0 0; background: #fff; flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: var(--sp-6); /* Clear the fixed call bar at the bottom, or the last nav item ('Contact') sits behind it and cannot be tapped. env() adds the iOS home indicator. */ padding-bottom: calc(var(--sp-6) + 64px + env(safe-area-inset-bottom, 0px)); gap: var(--sp-5); transform: translateX(100%); transition: transform var(--dur) var(--ease), visibility var(--dur); overflow-y: auto; overscroll-behavior: contain; /* Closed drawer is off-screen but was still focusable — tabbing walked into an invisible menu and focus vanished. visibility:hidden removes it from the tab order; it still animates because visibility is transitioned. */ visibility: hidden; } .nav-links.is-open { transform: translateX(0); visibility: visible; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; } .nav-phone-desktop { display: none; } } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-deep); color: var(--on-navy-200); padding: var(--sp-8) 0 var(--sp-6); } .site-footer a { color: #fff; } /* Footer column headings are

for correct document outline (they used to be

after a page

, skipping a level) but must still look like small labels. / .site-footer h4, .site-footer .footer-h { color: #fff; font-size: 1rem; margin-bottom: var(--sp-4); font-family: var(--font-head); font-weight: 700; line-height: 1.2; margin-top: 0; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: var(--sp-7); padding-top: var(--sp-5); font-size: 0.85rem; color: var(--on-navy-400); } .footer-disclaimer { font-size: 0.8rem; color: var(--on-navy-500); max-width: 90ch; margin-top: var(--sp-3); } / ---------- Hero ---------- / .hero { position: relative; overflow: hidden; padding: var(--sp-9) 0; background: linear-gradient(165deg, var(--navy-deep), var(--navy) 55%, var(--navy-mid)); color: #fff; } .hero::after { content: ""; position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: screen; pointer-events: none; background-position: center; background-size: cover; } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); align-items: center; } @media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; } } .hero h1 { color: #fff; } .hero .lede { color: var(--on-navy-100); } .hero-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.15); } .hero-stats { display: flex; gap: var(--sp-7); margin-top: var(--sp-6); flex-wrap: wrap; } .hero-stat strong { display: block; font-family: var(--font-head); font-size: 2rem; color: #fff; } .hero-stat span { font-size: 0.85rem; color: var(--on-navy-300); } / ---------- Testimonials ---------- / .testimonial { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-6); box-shadow: var(--shadow-sm); } .testimonial-stars { color: var(--orange-text); font-size: 1rem; margin-bottom: var(--sp-3); letter-spacing: 2px; } .testimonial-name { font-family: var(--font-head); font-weight: 700; color: var(--navy-deep); margin-top: var(--sp-3); } .testimonial-meta { font-size: 0.85rem; color: var(--ink-soft); } / ---------- Media / video ---------- / .media-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; } .media-frame video, .media-frame img { width: 100%; display: block; } / ---------- Tables (research citations) ---------- / .citation { border-left: 3px solid var(--orange); padding: var(--sp-4) var(--sp-5); background: var(--bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: var(--sp-4); } .citation p { margin-bottom: var(--sp-2); } .citation a { color: var(--orange-text); font-weight: 600; } .citation a:hover { text-decoration: underline; } .citation-source { font-size: 0.85rem; color: var(--ink-soft); } / ---------- Forms ---------- / .field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); } .field label { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--navy-deep); } .field input, .field select, .field textarea { font-family: var(--font-body); font-size: 1rem; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); min-height: 44px; background: #fff; color: var(--ink); } .field textarea { min-height: 120px; } .field .hint { font-size: 0.82rem; color: var(--ink-soft); } .required::after { content: " "; color: var(--danger); } /* ---------- Badges / pills ---------- / .pill { display: inline-flex; align-items: center; gap: var(--sp-1); background: var(--orange); color: var(--navy-deep); font-family: var(--font-head); font-weight: 700; font-size: 0.78rem; padding: 4px 12px; border-radius: 999px; } .pill-outline { background: transparent; border: 1.5px solid var(--navy); color: var(--navy); } / ---------- Alt image aspect boxes (prevent CLS) ---------- / .img-box { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-alt); } .img-box.sq { aspect-ratio: 1/1; } .img-box.tall { aspect-ratio: 3/4; } .img-box.wide { aspect-ratio: 16/9; } .img-box img { width: 100%; height: 100%; object-fit: cover; } / ---------- Reveal-on-scroll (respects reduced motion) ---------- / .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } / ---------- Utility ---------- / .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .text-soft { color: var(--ink-soft); } .small { font-size: 0.875rem; } .divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-7) 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } / ---------- Top bar ---------- / .topbar { background: var(--navy-deep); color: var(--on-navy-200); font-size: 0.85rem; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: 8px var(--sp-5); flex-wrap: wrap; } .topbar a { color: #fff; font-weight: 600; } .topbar a:hover { text-decoration: underline; } / Below 640px only the service-area sentence is dropped. The previous rule hid EVERY span in the bar, which took the live open/closed pill and the phone link with it and left an empty navy strip that read as a rendering glitch. / @media (max-width: 640px) { .topbar-inner > span:first-child { display: none; } .topbar-inner { justify-content: center; } .topbar-inner .topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } } / ---------- Nav (expanded page set) ---------- There used to be an unscoped `.nav-links { flex-wrap: wrap }` here. It sits after the mobile drawer rules and media queries add no specificity, so it beat the drawer's `nowrap` and let the column-direction drawer wrap its items into a second, off-screen column on short viewports. Removed rather than scoped: the desktop nav is set to `nowrap` further down (the min-width:1025px density block), so wrapping was never wanted at any width. / .nav-links a { font-size: 0.9rem; white-space: nowrap; } @media (min-width: 1025px) and (max-width: 1240px) { .nav-links { gap: var(--sp-4); } .nav-links a { font-size: 0.85rem; } } / ---------- Image captions (AI disclosure lives here, visibly) ---------- / figure { margin: 0; } figcaption { font-size: 0.78rem; color: var(--ink-soft); margin-top: var(--sp-2); line-height: 1.5; } .section--navy figcaption, .hero figcaption { color: var(--on-navy-300); } / ---------- Condition / benefit lists ---------- / .condition-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); } .condition-list li { position: relative; padding-left: 30px; color: var(--ink-soft); } .condition-list li::before { / Was a 14px rounded square at 32% opacity, which read as an empty checkbox — a column of them looked like an unfilled form. / content: ""; position: absolute; left: 0; top: 0.42em; width: 3px; height: 1.05em; border-radius: 2px; background: var(--navy); opacity: 1; } .condition-list strong { color: var(--navy-deep); font-family: var(--font-head); } / ---------- FAQ accordion ---------- / .faq { border-top: 1px solid var(--border); } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy-deep); padding: var(--sp-5) 40px var(--sp-5) 0; position: relative; min-height: 44px; } .faq-q::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--orange-text); font-weight: 400; line-height: 1; } .faq-q[aria-expanded="true"]::after { content: "–"; } .faq-a { padding: 0 0 var(--sp-5); } .faq-a p:last-child { margin-bottom: 0; } / ---------- Steps / numbered process ---------- / .step { display: flex; gap: var(--sp-4); align-items: flex-start; } .step-num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 1rem; } .step h3 { margin-bottom: var(--sp-2); font-size: 1.1rem; } .step p { margin-bottom: 0; } / ---------- Results-vary note (kept adjacent to testimonials) ---------- / .results-note { font-size: 0.85rem; color: var(--ink-soft); border-top: 1px solid var(--border); margin-top: var(--sp-6); padding-top: var(--sp-4); max-width: 80ch; } / ---------- Offer / highlight panel ---------- / .offer-panel { background: linear-gradient(150deg, var(--navy-deep), var(--navy)); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-8); box-shadow: var(--shadow-lg); } .offer-panel h2, .offer-panel h3 { color: #fff; } .offer-panel p { color: var(--on-navy-100); } / ---------- Mobile sticky call bar ---------- / .mobile-call-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--orange); color: var(--navy-deep); font-family: var(--font-head); font-weight: 700; font-size: 1rem; align-items: center; justify-content: center; gap: var(--sp-2); padding: 14px; min-height: 52px; box-shadow: 0 -4px 16px rgba(0,0,0,0.18); } @media (max-width: 820px) { .mobile-call-bar { display: flex; } body { padding-bottom: 56px; } .nav-cta .btn { padding: 10px 16px; font-size: 0.85rem; } } / ---------- Footer logo ---------- / .footer-logo { margin-bottom: var(--sp-4); filter: brightness(0) invert(1); opacity: 0.95; } .site-footer p { color: var(--on-navy-300); } / 40ch belongs to the columns. Applied to every footer
it outranked .footer-disclaimer's 90ch and squeezed the legal block into a 323px sliver. / .footer-grid p { max-width: 40ch; } .site-footer .small { font-size: 0.85rem; } / ---------- Nav density tuning for the full page set ---------- / @media (min-width: 1025px) { .nav-row { gap: var(--sp-4); } .nav-links { flex-wrap: nowrap; gap: 18px; } .nav-links a { font-size: 0.86rem; } .brand img { height: 34px; } .nav-cta .btn { padding: 11px 18px; font-size: 0.88rem; } } @media (min-width: 1241px) { .nav-links { gap: 22px; } .nav-links a { font-size: 0.9rem; } .brand img { height: 38px; } } / Hero stats: keep on one row where there's space / .hero-stats { gap: var(--sp-6); } .hero-stat { min-width: 0; } / Hero stats sit in the narrower left column — allow them to wrap gracefully / .hero-stats { display: grid; grid-template-columns: repeat(3, auto); gap: var(--sp-5) var(--sp-6); justify-content: start; } @media (max-width: 640px) { .hero-stats { grid-template-columns: repeat(2, auto); } } .hero-stat span { display: block; max-width: 16ch; } / ================================================================ PATIENT EDUCATION — interactive nerve diagram, videos, therapies ================================================================ / / ---------- Fluid type & spacing (site-wide responsiveness) ---------- / :root { --sp-fluid-section: clamp(56px, 8vw, 96px); } .section { padding: var(--sp-fluid-section) 0; } .container { padding-inline: clamp(16px, 4vw, 24px); } / ---------- Interactive nerve demo ---------- / .nerve-demo { background: linear-gradient(155deg, var(--navy-deep), #06254F 60%, var(--navy)); border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 36px); box-shadow: var(--shadow-lg); overflow: hidden; } .nerve-demo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); } .nerve-demo-head h3 { color: #fff; font-size: clamp(1.05rem, 2.2vw, 1.3rem); } .nerve-toggle { display: inline-flex; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 4px; gap: 4px; } .nerve-btn { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; color: var(--on-navy-200); padding: 9px 18px; border-radius: 999px; min-height: 40px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nerve-btn:hover { color: #fff; } .nerve-btn.is-active { background: #fff; color: var(--navy-deep); } .nerve-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } .nerve-stage svg { width: 100%; height: auto; display: block; } .nerve-stage .axon { stroke: #3E6FA8; stroke-width: 5; stroke-linecap: round; } .nerve-stage .myelin { fill: #6FA8DC; opacity: 0.9; transition: opacity var(--dur) var(--ease), fill var(--dur) var(--ease); } .nerve-stage .soma { fill: var(--blue-accent); } .nerve-stage .terminal line { stroke: #6FA8DC; stroke-width: 4; stroke-linecap: round; } .nerve-stage .signal { fill: #7FE3FF; filter: drop-shadow(0 0 8px #7FE3FF); } / healthy: fast clean pulse / .nerve-stage[data-state="healthy"] .signal { animation: nerveTravel 1.9s linear infinite; } / damaged: broken myelin + slow stuttering pulse / .nerve-stage[data-state="damaged"] .m-gap, .nerve-stage[data-state="damaged"] .m-gap2 { opacity: 0.18; fill: #C2703C; } .nerve-stage[data-state="damaged"] .signal { fill: #FFB067; filter: drop-shadow(0 0 6px #FF8A3D); animation: nerveTravelDamaged 4.4s ease-in-out infinite; } @keyframes nerveTravel { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(640px); opacity: 0; } } @keyframes nerveTravelDamaged { 0% { transform: translateX(0); opacity: 0; } 6% { opacity: 1; } 22% { transform: translateX(150px); opacity: 1; } 30% { transform: translateX(165px); opacity: 0.25; } 40% { transform: translateX(210px); opacity: 0.8; } 55% { transform: translateX(370px); opacity: 0.5; } 63% { transform: translateX(385px); opacity: 0.15; } 75% { transform: translateX(470px); opacity: 0.6; } 100% { transform: translateX(640px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .nerve-stage .signal { animation: none !important; opacity: 1; } .nerve-stage[data-state="damaged"] .signal { transform: translateX(300px); } } .nerve-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,0.16); } @media (max-width: 640px) { .nerve-readout { grid-template-columns: 1fr; gap: var(--sp-3); } } .readout-label { display: block; font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--on-navy-400); font-family: var(--font-head); font-weight: 700; margin-bottom: 3px; } .readout-value { color: #fff; font-family: var(--font-head); font-size: 1rem; } .nerve-caption { color: var(--on-navy-100); margin: var(--sp-5) 0 0; max-width: 70ch; font-size: 0.95rem; } / ---------- Callouts ---------- / .callout { border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-6); border-left: 4px solid var(--orange); background: var(--bg-alt); margin-top: var(--sp-5); } .callout p:last-child { margin-bottom: 0; } .callout--warn { background: #FFF7ED; border-left-color: var(--orange-text); } .callout--important { background: #EEF3FA; border-left-color: var(--navy); } .section--alt .callout--warn { background: #FFF7ED; } / ---------- Video cards ---------- / .video-card { margin: 0; display: flex; flex-direction: column; } .video-frame { aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #000; box-shadow: var(--shadow-md); } .video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-card figcaption { margin-top: var(--sp-4); } .video-card figcaption h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); } .video-card figcaption p { font-size: 0.94rem; margin-bottom: var(--sp-2); } .video-note { font-size: 0.76rem; color: var(--ink-soft); display: block; } / ---------- Therapy blocks ---------- / .therapy-block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); margin-bottom: var(--sp-6); box-shadow: var(--shadow-sm); } .therapy-head { display: flex; gap: var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-5); } .therapy-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--bg-alt); color: var(--navy); display: flex; align-items: center; justify-content: center; } .therapy-icon svg { width: 26px; height: 26px; } .therapy-head h3 { margin-bottom: 4px; } .therapy-tag { font-size: 0.82rem; color: var(--ink-soft); } .therapy-block h4 { font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--navy); margin-bottom: var(--sp-3); } / ---------- Expectations list ---------- / .expectations { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); } .expect-item { display: flex; gap: var(--sp-4); align-items: flex-start; } .expect-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: var(--navy-deep); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 0.95rem; } .expect-item h3 { font-size: 1.08rem; margin-bottom: var(--sp-2); } .expect-item p { margin-bottom: 0; } / ---------- Site-wide responsive polish ---------- / @media (max-width: 640px) { .btn { width: 100%; } .hero-stats { gap: var(--sp-4); } .card { padding: var(--sp-5); } } / Wide content never forces horizontal page scroll / table { display: block; overflow-x: auto; max-width: 100%; } @media (min-width: 641px) { table { display: table; } } / ---------- Grouped dropdown nav ---------- / .nav-group { position: relative; } .nav-group-btn { appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-2) 0; border-bottom: 2px solid transparent; min-height: 44px; } .nav-group-btn:hover, .nav-group-btn[aria-expanded="true"] { color: var(--navy); } .nav-group-btn[data-contains-current="true"] { color: var(--navy); border-color: var(--orange); } .nav-group-btn svg { transition: transform var(--dur) var(--ease); } .nav-group-btn[aria-expanded="true"] svg { transform: rotate(180deg); } .nav-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--sp-3); min-width: 250px; z-index: 120; display: flex; flex-direction: column; gap: 2px; } .nav-menu a { font-size: 0.9rem; padding: 10px 14px; border-radius: var(--radius-sm); border-bottom: 0; white-space: nowrap; min-height: 44px; display: flex; align-items: center; } .nav-menu a:hover { background: var(--bg-alt); color: var(--navy); } .nav-menu a[aria-current="page"] { background: var(--bg-alt); color: var(--navy); font-weight: 700; } @media (max-width: 1024px) { .nav-group { width: 100%; } .nav-group-btn { width: 100%; justify-content: space-between; font-size: 1rem; } .nav-menu { position: static; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--border); border-radius: 0; padding: 0 0 0 var(--sp-4); margin-top: var(--sp-2); min-width: 0; } .nav-links a { font-size: 1rem; } } / `display:flex` on .nav-menu would otherwise defeat the [hidden] attribute / .nav-menu[hidden] { display: none; } / ---------- Education teaser list (homepage) ---------- / .edu-teaser { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); } .edu-teaser li { position: relative; padding: 14px 18px 14px 46px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: var(--on-navy-100); font-size: 0.95rem; } .edu-teaser li::before { content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 3px; background: var(--orange); } / ================================================================ VIDEO BACKGROUNDS + CALL-BACK REQUEST ================================================================ / / ---------- Ambient video backgrounds ---------- / .has-video-bg { position: relative; isolation: isolate; overflow: hidden; } .video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; } / Scrim keeps headline text at AA contrast over any frame of the loop / .has-video-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(165deg, rgba(0,20,48,0.90), rgba(2,50,112,0.86) 55%, rgba(10,74,150,0.88)); } .section--navy.has-video-bg::after { background: linear-gradient(160deg, rgba(0,18,42,0.92), rgba(2,50,112,0.88)); } / Users who ask for less motion get the poster still, never the loop / / Reduced motion gets the poster still, not a blank panel: keep the element in flow (display:none would drop the poster too) and stop it painting motion. / @media (prefers-reduced-motion: reduce) { .video-bg video { display: none; } .video-bg { background-size: cover; background-position: center; } } / ---------- Call-back request ---------- / .callback-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-lg); } .callback-panel h2, .callback-panel h3 { margin-top: 0; } .callback-badge { display: inline-flex; align-items: center; gap: 8px; background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; font-family: var(--font-head); font-weight: 700; font-size: 0.78rem; padding: 6px 14px; border-radius: 999px; margin-bottom: var(--sp-4); } .callback-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #10B981; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } @media (max-width: 640px) { .field-row { grid-template-columns: 1fr; gap: 0; } } .time-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); } @media (max-width: 640px) { .time-options { grid-template-columns: 1fr; } } .time-opt { position: relative; } .time-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .time-opt span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 10px 12px; border: 1.5px solid var(--border-control); border-radius: var(--radius-sm); font-family: var(--font-head); font-weight: 600; font-size: 0.88rem; color: var(--ink); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .time-opt input:hover + span { border-color: var(--navy-mid); } .time-opt input:checked + span { border-color: var(--navy); background: var(--bg-alt); color: var(--navy); border-width: 2px; } .time-opt input:focus-visible + span { outline: 3px solid var(--blue-accent); outline-offset: 2px; } .field-error { color: var(--danger); font-size: 0.82rem; margin-top: 4px; display: none; } .field.has-error .field-error { display: block; } .field.has-error input, .field.has-error select { border-color: var(--danger); } .callback-success { text-align: center; padding: var(--sp-6) var(--sp-4); } .callback-success .tick { width: 62px; height: 62px; border-radius: 50%; background: #ECFDF5; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-4); color: var(--success); } .consent-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--sp-5); } .consent-row input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; } .consent-row label { font-size: 0.85rem; color: var(--ink-soft); font-weight: 400; line-height: 1.5; } / ---------- Sticky CTA rail (desktop) ---------- / .cta-rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 2px; } @media (max-width: 1240px) { .cta-rail { display: none; } } .cta-rail a { writing-mode: vertical-rl; background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; padding: 18px 12px; letter-spacing: 0.04em; border-radius: 10px 0 0 10px; transition: background var(--dur) var(--ease); } .cta-rail a:first-child { background: var(--orange); color: var(--navy-deep); } .cta-rail a:hover { background: var(--navy-mid); color: #fff; } .cta-rail a:first-child:hover { background: #E56600; color: var(--navy-deep); } / Header now carries two CTAs — keep them from crowding the nav / .nav-cta { gap: var(--sp-3); } .nav-callback { padding: 11px 16px; font-size: 0.85rem; } @media (max-width: 1240px) { .nav-callback { display: none; } } / Background loops are ambience, not content: push them back so headlines lead. Blur + desaturate + dim at the element level, then a heavier scrim on top. / / Background-loop treatment. These were previously scrimmed at 0.93 alpha over brightness(0.42) — so dark that the clips were paying bandwidth and decode cost while being essentially invisible. Measured against the BRIGHTEST pixel in the loops (pure white), the values below still put white headline text at 12:1 and the lede at 8.2:1 — above AAA, let alone the 4.5:1 AA floor — while letting the anatomy read. / .video-bg { filter: blur(2px) saturate(0.82) brightness(0.68); transform: scale(1.06); / hides blur feathering at the edges / } .has-video-bg::after { background: linear-gradient(165deg, rgba(0,16,38,0.78), rgba(2,44,100,0.74) 55%, rgba(8,60,124,0.76)); } .section--navy.has-video-bg::after { background: linear-gradient(160deg, rgba(0,14,34,0.80), rgba(2,44,100,0.76)); } / `fieldset` defaults to min-inline-size:min-content, so it refuses to shrink and blows its grid column out on narrow screens. Same for grid/flex children. / fieldset { min-inline-size: 0; } .grid > , .field-row > , .hero-inner > { min-width: 0; } .callback-panel { max-width: 100%; } /* ---------- Symptom self-check ---------- / .checker { max-width: 940px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow-md); } .checker fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; } .checker-legend { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy-deep); padding: 0; margin-bottom: var(--sp-5); } .check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } @media (max-width: 820px) { .check-grid { grid-template-columns: 1fr; } } .check-item { position: relative; display: block; cursor: pointer; } .check-item input { position: absolute; opacity: 0; width: 0; height: 0; } .check-item span { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; color: var(--ink); line-height: 1.4; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .check-item span::before { content: ""; flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; / --border (#E2E8F0) is 1.24:1 on white — an unchecked box was invisible. --ink-soft (#475569) is 7.5:1, well clear of the 3:1 in WCAG 1.4.11. / border: 2px solid var(--ink-soft); background: #fff; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .check-item:hover span { border-color: var(--navy-mid); } .check-item input:checked + span { border-color: var(--navy); background: var(--bg-alt); } .check-item input:checked + span::before { background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/15px no-repeat; border-color: var(--navy); } .check-item input:focus-visible + span { outline: 3px solid var(--blue-accent); outline-offset: 2px; } .checker-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); } .checker-count { font-size: 0.9rem; color: var(--ink-soft); font-family: var(--font-head); font-weight: 600; } .checker-result { border-top: 1px solid var(--border); margin-top: var(--sp-6); padding-top: var(--sp-6); } .checker-result:focus { outline: none; } .checker-result h3 { font-size: 1.4rem; } .pattern { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); } .pattern:last-of-type { border-bottom: 0; } .pattern-tag { flex-shrink: 0; font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); background: var(--bg-alt); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; min-width: 92px; text-align: center; } .pattern p { margin: 0; font-size: 0.95rem; } .pattern strong { color: var(--navy-deep); } .checker-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-6) 0 var(--sp-5); } .checker-disclaimer { font-size: 0.85rem; color: var(--ink-soft); background: var(--bg-alt); border-left: 4px solid var(--navy); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .checker-urgent { font-size: 0.85rem; color: #7C2D12; background: #FFF7ED; border-left: 4px solid var(--orange-text); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 0; } / ---------- Display-scale moment: the numbers deserve real size ---------- / .hero-stat strong { font-size: clamp(2.1rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .hero-stat span { margin-top: 6px; } / ---------- Service cards: give them an image and a reason to click ---------- / .svc-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .svc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: #CBD9EC; } .svc-media { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); } .svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); } .svc-card:hover .svc-media img { transform: scale(1.05); } .svc-body { padding: var(--sp-5) var(--sp-5) var(--sp-6); display: flex; flex-direction: column; flex: 1; } .svc-body h3 { font-size: 1.15rem; margin-bottom: var(--sp-2); } .svc-body p { font-size: 0.94rem; flex: 1; } .svc-link { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-3); } .svc-card:hover .svc-link { color: var(--navy-mid); gap: 10px; } .svc-link svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); } / Whole card is clickable, but the visible link is the real focus target / .svc-card a.svc-stretch::after { content: ""; position: absolute; inset: 0; } .svc-card:focus-within { box-shadow: var(--shadow-lg); border-color: var(--blue-accent); } / ---------- Honest form states ---------- / .form-notice { border-radius: var(--radius-md); padding: var(--sp-5); margin-bottom: var(--sp-5); border-left: 4px solid var(--orange-text); background: #FFF7ED; } .form-notice h3 { font-size: 1.05rem; margin-bottom: var(--sp-2); color: #7C2D12; } .form-notice p { color: #7C2D12; font-size: 0.92rem; } .form-notice a { color: #7C2D12; text-decoration: underline; } .form-notice:focus { outline: 3px solid var(--blue-accent); outline-offset: 2px; } / ================================================================ TYPE SCALE & SECTION RHYTHM Previously every section shared one padding value and every h2 one size, so the page read as a metronome. These give the page dynamics. ================================================================ / :root { --fs-display: clamp(2.6rem, 6vw, 4.2rem); --sp-tight: clamp(36px, 5vw, 56px); --sp-vast: clamp(88px, 13vw, 168px); } .section--tight { padding: var(--sp-tight) 0; } .section--vast { padding: var(--sp-vast) 0; } / A display-scale statement, used sparingly — once per page at most / .statement { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.03em; color: var(--navy-deep); text-wrap: balance; max-width: 18ch; margin: 0 0 var(--sp-5); } .section--navy .statement { color: #fff; } .statement em { font-style: normal; color: var(--orange-text); } .section--navy .statement em { color: var(--orange); } / Left-aligned section lead replaces the repeated centered max-width divs / .section-lead { max-width: 62ch; margin: 0 0 var(--sp-7); } .section-lead.is-centered { margin-inline: auto; text-align: center; } / ---------- Accent discipline ---------- --orange now means one thing only: "act now". Decorative uses that previously competed with the CTAs are demoted to navy. / .condition-list li::before { background: var(--navy); opacity: 1; } .edu-teaser li::before { background: rgba(255,255,255,0.55); } .citation { border-left-color: var(--navy); } .nav-links a:hover, .nav-links a[aria-current="page"] { border-color: var(--navy); } .nav-group-btn[data-contains-current="true"] { border-color: var(--navy); } .testimonial-stars { color: var(--navy-mid); } .callout { border-left-color: var(--navy); } .callout--warn { border-left-color: var(--orange-text); } .expect-num { background: var(--navy); color: #fff; } / ---------- Hover-lift only where the card is actually a link ---------- / .card:hover { box-shadow: var(--shadow-sm); transform: none; } a.card:hover, .card--link:hover, .svc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .svc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } / ---------- Print ---------- / @media print { .topbar, .site-header, .cta-rail, .mobile-call-bar, .video-bg, .checker-actions, .nerve-toggle { display: none !important; } .has-video-bg::after { display: none !important; } body { padding-bottom: 0; color: #000; } .section, .section--alt, .section--navy, .hero { background: #fff !important; color: #000 !important; padding: 18pt 0 !important; } .section--navy h1, .section--navy h2, .section--navy h3, .hero h1, .section--navy p, .section--navy .lede, .hero .lede { color: #000 !important; } .card, .svc-card, .checker, .therapy-block, .callback-panel { box-shadow: none !important; border: 1pt solid #999 !important; break-inside: avoid; } .reveal { opacity: 1 !important; transform: none !important; } .faq-a { display: block !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; } .site-footer { background: #fff !important; color: #000 !important; } / Gradient/tinted panels forced to white kept their white text and printed blank. Force ink on every descendant, not just the headings. / .offer-panel, .callback-panel, .stat-band, .cta-band, .panel-gradient, .offer-panel , .callback-panel , .stat-band , .cta-band , .panel-gradient { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .site-footer a, .site-footer h2, .site-footer h3 { color: #000 !important; } .site-footer a, .footer-disclaimer { color: #000 !important; } } /* ---------- Live open / closed indicator ---------- / .topbar-right { display: inline-flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .clinic-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; padding: 3px 12px; border-radius: 999px; } .clinic-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; } .clinic-status.is-open { background: rgba(16,185,129,0.16); color: #6EE7B7; } .clinic-status.is-open::before { background: #10B981; } .clinic-status.is-closed { background: rgba(255,255,255,0.10); color: var(--on-navy-300); } .clinic-status.is-closed::before { background: var(--on-navy-400); } @media (max-width: 640px) { .clinic-status { display: none; } } / ---------- Lead clinician: typographic, not a stock avatar ---------- / .lead-person { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(28px, 4.5vw, 52px); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-6); } @media (max-width: 820px) { .lead-person { grid-template-columns: 1fr; gap: var(--sp-6); } } .lead-person-name { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--navy-deep); margin: 0 0 6px; text-wrap: balance; } .lead-person-post { font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orange-text); margin-bottom: var(--sp-4); } .cred-list { margin: 0; display: grid; gap: 0; } .cred-list > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--sp-4); padding: 13px 0; border-bottom: 1px solid var(--border); } .cred-list > div:first-child { border-top: 1px solid var(--border); } .cred-list dt { font-family: var(--font-head); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .cred-list dd { margin: 0; color: var(--navy-deep); font-weight: 600; font-size: 0.95rem; } @media (max-width: 420px) { .cred-list > div { grid-template-columns: 1fr; gap: 2px; } } / Supporting team: deliberately lighter weight than the lead clinician / .support-team { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); } @media (max-width: 820px) { .support-team { grid-template-columns: 1fr; } } .support-person { padding: var(--sp-5) 0 0; border-top: 3px solid var(--navy); } .support-person h3 { font-size: 1.2rem; margin-bottom: 2px; } .support-person--warm { border-top-color: var(--orange); } .support-role { font-family: var(--font-head); font-weight: 600; font-size: 0.82rem; color: var(--ink-soft); margin-bottom: var(--sp-3); } / Screen-reader-only text (replaces SVG , which draws a native tooltip) / .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } / BUG 2: the demo head let the toggle clip off the right edge on narrow widths / .nerve-demo-head { align-items: flex-start; } .nerve-demo-head h3 { flex: 1 1 220px; min-width: 0; } .nerve-toggle { flex: 0 0 auto; max-width: 100%; } @media (max-width: 640px) { .nerve-demo-head { flex-direction: column; align-items: stretch; } .nerve-toggle { width: 100%; } .nerve-btn { flex: 1 1 0; padding: 9px 10px; font-size: 0.8rem; } } / Never let the diagram itself force horizontal scroll / .nerve-stage { overflow: hidden; } .nerve-stage svg { max-width: 100%; } / Hand-off notice is informational, not an error / .form-notice:not(.form-notice--warn) { background: #EEF3FA; border-left-color: var(--navy); } .form-notice:not(.form-notice--warn) h3, .form-notice:not(.form-notice--warn) p { color: var(--navy-deep); } .form-notice:not(.form-notice--warn) a { color: var(--navy); } / ---------- Image icons (replace the line-art SVGs) ---------- / / No overflow:hidden here — the ::after glow is deliberately larger than the tile (inset:-30%) and was being clipped to nothing. The image itself is rounded via its own border-radius instead. / .icon-img { width: 64px; height: 64px; border-radius: 14px; background: var(--navy-deep); flex-shrink: 0; margin-bottom: var(--sp-4); box-shadow: 0 4px 14px rgba(2,50,112,0.18); position: relative; isolation: isolate; } .icon-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; position: relative; z-index: 1; } .icon-img--lg { width: 84px; height: 84px; border-radius: 18px; } .therapy-icon.icon-img { width: 72px; height: 72px; margin-bottom: 0; border-radius: 16px; } .card-icon.icon-img { background: var(--navy-deep); padding: 0; } / ================================================================ MOBILE OPTIMISATION Audience skew matters here: most visitors are older adults, many with neuropathy in the hands. Reduced fine-motor control and presbyopia mean touch targets and text size need more headroom than a typical site. Targets follow WCAG 2.2 SC 2.5.8 (24px floor) with a 44px comfort target. ================================================================ / / ---- Touch targets ---- / .nerve-btn { min-height: 44px; } / was 40px / .brand { min-height: 44px; display: inline-flex; align-items: center; } .svc-link { min-height: 44px; align-items: center; } .faq-q { min-height: 48px; } .footer-links a, .nav-menu a { min-height: 44px; display: flex; align-items: center; } / Checkboxes and radios: 18px is too small to hit reliably with numb fingers / .consent-row input[type="checkbox"], .check-item input[type="checkbox"] { width: 24px; height: 24px; } .consent-row { align-items: center; gap: 14px; } .consent-row input { margin-top: 0; } / Give the checkbox its own comfortable hit area on the label / .check-item span { min-height: 60px; } .check-item span::before { width: 26px; height: 26px; } / ---- Readable text floor on small screens ---- / @media (max-width: 820px) { body { font-size: 17px; line-height: 1.7; } .lede { font-size: 1.12rem; } / Nothing informational drops below 14px on a phone / .small, .hint, figcaption, .testimonial-meta, .video-note, .citation-source, .footer-disclaimer, .checker-count, .support-role, .therapy-tag, .readout-label { font-size: 0.875rem; } .eyebrow { font-size: 0.8rem; letter-spacing: 0.06em; padding: 6px 15px; } .clinic-status { font-size: 0.82rem; } .topbar { font-size: 0.85rem; } / Form text must be >=16px or iOS zooms the viewport on focus / .field input, .field select, .field textarea { font-size: 16px; } .field label { font-size: 0.95rem; } .check-item span, .consent-row label { font-size: 0.95rem; } / Comfortable reading measure and rhythm / p, li { max-width: 100%; } .card, .therapy-block, .checker, .callback-panel { padding: var(--sp-5); } .cred-list > div { grid-template-columns: 1fr; gap: 2px; } } / ---- Very small phones ---- / @media (max-width: 420px) { .nerve-toggle { flex-direction: column; } .nerve-btn { width: 100%; } .hero-stats { grid-template-columns: 1fr 1fr; } .lead-person-name { font-size: 1.75rem; } } / ---- Landscape phones: reclaim vertical space ---- / @media (max-height: 500px) and (orientation: landscape) { .hero { padding: var(--sp-6) 0; } .topbar { display: none; } } / ---- Larger tap feedback on touch devices ---- / @media (hover: none) { .card:hover, .svc-card:hover, a.card:hover { transform: none; } .btn:active { transform: scale(0.98); } .check-item:active span, .time-opt:active span { background: var(--bg-alt); } } / ---- Corrections to the mobile block above ---- 1. `rem` resolves against <html>, not <body>. Setting body{17px} scaled nothing that used rem — which is nearly every small label. Scale the root instead so the whole type system moves together. 2. `.check-item input` is visually hidden and the <label> is the real target; giving it a 24px box turned it into an invisible overlay. Only the visible consent checkbox needs a real 24px box. / @media (max-width: 820px) { html { font-size: 17px; } body { font-size: 1rem; } .eyebrow { font-size: 0.84rem; } .clinic-status { font-size: 0.84rem; } .small, .hint, figcaption, .testimonial-meta, .video-note, .citation-source, .footer-disclaimer, .checker-count, .support-role, .therapy-tag, .readout-label, .checker-disclaimer, .checker-urgent { font-size: 0.85rem; } } .check-item input[type="checkbox"] { width: 0; height: 0; } / Final mobile floors — form microcopy and the consent control. The consent checkbox at 24px already meets WCAG 2.2 SC 2.5.8, but this audience has reduced fine-motor control, so give it real comfort room. / @media (max-width: 820px) { .callback-badge, .field-error, .field .hint, .consent-row label { font-size: 0.85rem; } .consent-row input[type="checkbox"] { width: 28px; height: 28px; } } / Topbar phone link was 22px tall — 2px under WCAG 2.2 SC 2.5.8 (24px floor). / .topbar a { display: inline-flex; align-items: center; min-height: 24px; } / ================================================================ ICON ANIMATION The icons are lit subjects on a dark ground, so they animate best as light rather than motion — a slow breathing glow, with the subject itself drifting almost imperceptibly. Entrance is staggered on scroll. All of it collapses to a static icon under prefers-reduced-motion. ================================================================ / .icon-img { position: relative; isolation: isolate; transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); } / Ambient glow that breathes behind the icon / .icon-img::after { content: ""; position: absolute; inset: -55%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(0,136,224,0.55) 0%, rgba(0,136,224,0.22) 38%, rgba(255,115,0,0.10) 58%, transparent 72%); opacity: 0; transform: scale(0.72); } .icon-img img { transform-origin: 50% 55%; will-change: transform; } / Only animate once the icon has actually scrolled into view. `.icon-img` alone is the fallback for the handful of icons that sit outside a .reveal wrapper — previously those never animated at all. / .reveal.is-visible .icon-img::after, .icon-img.is-lit::after, .icon-img:not(.reveal )::after { animation: iconGlow 4.6s ease-in-out infinite; } .reveal.is-visible .icon-img img, .icon-img.is-lit img, .icon-img:not(.reveal ) img { animation: iconDrift 6.2s ease-in-out infinite; } / The tile itself breathes. The old version animated only the image inside an opaque tile and a glow hidden behind it, so nothing was perceptible — the measured drift was 2.5px under a cover-fitted image. / .reveal.is-visible .icon-img, .icon-img.is-lit, .icon-img:not(.reveal ) { animation: iconBreathe 6.2s ease-in-out infinite; } @keyframes iconGlow { 0%, 100% { opacity: 0.34; transform: scale(0.86); } 50% { opacity: 1; transform: scale(1.28); } } @keyframes iconDrift { 0%, 100% { transform: translateY(0) scale(1); filter: saturate(1) brightness(1); } 50% { transform: translateY(-4px) scale(1.075); filter: saturate(1.25) brightness(1.14); } } @keyframes iconBreathe { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 14px rgba(2,50,112,0.18); } 50% { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 26px rgba(0,136,224,0.34); } } /* Stagger so a grid of icons ripples rather than pulsing in unison / .grid > :nth-child(1) .icon-img::after, .grid > :nth-child(1) .icon-img img { animation-delay: 0s; } .grid > :nth-child(2) .icon-img::after, .grid > :nth-child(2) .icon-img img { animation-delay: .42s; } .grid > :nth-child(3) .icon-img::after, .grid > :nth-child(3) .icon-img img { animation-delay: .84s; } .grid > :nth-child(4) .icon-img::after, .grid > :nth-child(4) .icon-img img { animation-delay: 1.26s; } .grid > :nth-child(5) .icon-img::after, .grid > :nth-child(5) .icon-img img { animation-delay: 1.68s; } .grid > :nth-child(6) .icon-img::after, .grid > :nth-child(6) .icon-img img { animation-delay: 2.10s; } / Hover / focus: lift the icon and brighten its glow / .card:hover .icon-img, .therapy-block:hover .icon-img, .card:focus-within .icon-img { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(2,50,112,0.30); } .card:hover .icon-img::after, .therapy-block:hover .icon-img::after { animation-duration: 2.4s; } @media (prefers-reduced-motion: reduce) { .icon-img::after { animation: none !important; opacity: 0.34; transform: scale(0.9); } .icon-img img { animation: none !important; transform: none !important; } .card:hover .icon-img, .therapy-block:hover .icon-img { transform: none; } } / Touch devices get the ambient glow but no hover lift / @media (hover: none) { .card:hover .icon-img, .therapy-block:hover .icon-img { transform: none; box-shadow: none; } } / ---------- Video transcripts ---------- The site's videos are silent — their narration is burned-in text. A <track> would caption audio that isn't there, so the accessible equivalent (WCAG 1.2.1) is a real transcript. Collapsed by default so it doesn't crowd the card, but it is in the DOM and reachable by keyboard and screen reader. / .transcript { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); } .transcript > summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: var(--navy); min-height: 24px; display: flex; align-items: center; gap: 6px; } .transcript > summary:focus-visible { outline: 3px solid var(--blue-accent); outline-offset: 3px; border-radius: 4px; } .transcript > summary::marker { color: var(--orange-text); } .transcript-list { margin: var(--sp-3) 0 0; padding-left: 1.3em; font-size: 0.85rem; color: var(--ink-soft); } .transcript-list li { margin-bottom: 6px; line-height: 1.55; } .section--navy .transcript, .hero .transcript { border-color: rgba(255,255,255,0.2); } .section--navy .transcript > summary, .hero .transcript > summary { color: #fff; } .section--navy .transcript-list, .hero .transcript-list { color: var(--on-navy-300); } @media print { .transcript[open] .transcript-list { display: block; } .transcript > summary { display: none; } } / Honeypot: off-screen rather than display:none, because some bots skip fields that are display:none. Real users never see or tab into it (tabindex=-1). / .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } / ---------- Video chrome ---------- Every film on this site is silent — ffprobe shows a single h264 stream, no audio. The native control bar still renders a mute/unmute button, which is a false affordance: pressing it does nothing a viewer can perceive. WebKit lets us drop just that control and keep the rest of the native bar, so playback stays fully keyboard- and screen-reader-accessible. / .media-frame video::-webkit-media-controls-mute-button, .video-frame video::-webkit-media-controls-mute-button, .media-frame video::-webkit-media-controls-volume-slider, .video-frame video::-webkit-media-controls-volume-slider { display: none; } / The control bar was running square to the edges of a --radius-lg frame and breaking the rounded corner. / .media-frame, .video-frame { overflow: hidden; } .media-frame video, .video-frame video { display: block; border-radius: inherit; } / --------------------------------------------------------------------------- MOBILE DENSITY .section and .hero both used `padding: var(--sp-9) 0` — 96px top AND bottom — at every width. On a 375px phone that is 192px of empty space per section; across the homepage's sections it pushed the page to 17 screens, put the intro film below the fold at 1070px, and left the first service card ~4 screens down. Desktop keeps the generous rhythm; phones get a proportionate one. --------------------------------------------------------------------------- / @media (max-width: 820px) { .section { padding: var(--sp-7) 0; } / 96px -> 48px / .hero { padding: var(--sp-6) 0 var(--sp-7); } .section[style="padding-top:64px"], .section[style="padding-top:56px"], .section[style="padding-top:72px"] { padding-top: var(--sp-6) !important; padding-bottom: var(--sp-6) !important; } /* The hero lede ran seven lines before the first button. / .hero .lede { font-size: 1.02rem; line-height: 1.55; } .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.35rem); line-height: 1.14; } .hero-inner { gap: var(--sp-5); } .hero-stats { margin-top: var(--sp-4); } / Section intros carried the same 48px bottom margin as desktop. / .center[style="margin:0 auto 48px"] { margin-bottom: var(--sp-5) !important; } h2 { font-size: clamp(1.55rem, 6.4vw, 1.9rem); } .grid { gap: var(--sp-5); } } @media (max-width: 420px) { .section { padding: var(--sp-6) 0; } .hero .lede { font-size: 0.98rem; } /* Three lines of uppercase in a pill is a banner, not an eyebrow. / .eyebrow { font-size: 0.72rem; letter-spacing: 0.05em; padding: 5px 12px; } } / The fixed call bar is 57px plus the iOS home indicator; the old 56px reserve left the last element on every page tucked underneath it. / @media (max-width: 820px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .mobile-call-bar { padding-bottom: env(safe-area-inset-bottom, 0px); } } / Service cards on phones. Stacked full-width, each card ran 483px (a 213px 16:10 image plus body) and six of them made a 4.4-screen block — the single biggest thing on the mobile homepage. A thumbnail beside the text is the conventional pattern for a service list at this width and roughly halves the card. */ @media (max-width: 640px) { .svc-card { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; } .svc-media { aspect-ratio: auto; height: 100%; min-height: 100%; } .svc-media img { width: 100%; height: 100%; object-fit: cover; } .svc-body { padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4); } .svc-body h3 { font-size: 1.02rem; margin-bottom: 6px; } .svc-body p { font-size: 0.9rem; line-height: 1.5; margin-bottom: var(--sp-3); } .svc-link { font-size: 0.88rem; } } @media (max-width: 380px) { .svc-card { grid-template-columns: 92px 1fr; } .svc-body { padding: var(--sp-3); } }