/* CROP-HEADS FIX (2026-08-19). Every cover-crop surface now reads its focal point from --focal, defaulting to `center 30%` instead of `center`. The default biases UP because a face is usually above the vertical middle of a photo; centre-cropping is what sliced heads on 2026-07-28. A photo whose subject sits LOW (e.g. a treatment-table shot) must override --focal per image via the catalog record's `focal:` field, because a blanket upward bias would crop that photo to the ceiling. Focal point is per image, never global. */ /* Stillwater Spine & Sports Center — design-rework styling (2026-07-27). Light-reads-as-competent: dark-band stacking retired, two section grounds (paper + ground) plus a light footer, a self-hosted Cormorant Garamond display face, a video hero, photographic CTA boxes, and full §7 modality pages. Built to UX_design-system-spec_2026-07-27 (§3 type, §4 tokens, §5 hero, §6 home, §7 modality pages, §8 testimonials). Self-hosted fonts only (no Google Fonts — the verify gate forbids them). */ /* ---------- self-hosted display face (OFL, §3) ---------- */ @font-face{ font-family:'Cormorant Garamond';font-weight:300;font-style:normal;font-display:swap; src:url('https://media.beargrassai.com/stillwater/fonts/CormorantGaramond-Light.woff2') format('woff2'); } @font-face{ font-family:'Cormorant Garamond';font-weight:400;font-style:normal;font-display:swap; src:url('https://media.beargrassai.com/stillwater/fonts/CormorantGaramond-Regular.woff2') format('woff2'); } :root{ /* Brand accent */ --teal:#4d8480; /* primary accent — nav active, badges, links */ --teal-light:#6ba09c; /* hover states, light accents */ --teal-dark:#375f5c; /* darker states, focus rings, CTA band */ --teal-wash:#edf2f1; /* very light teal tint — feature section */ /* Text */ --ink:#2c3430; /* body text — warm charcoal */ --muted:#687068; /* secondary text, captions */ /* Backgrounds */ --paper:#ffffff; /* primary — most content sections */ --ground:#f5f7f5; /* alternate light sections */ --line:#dde1de; /* dividers, borders */ /* Footer */ --footer-bg:#cdd1cc; /* light taupe-sage */ --footer-deep:#bdc2bc; /* legal band */ /* Actions: unified into the --teal family (§7c, 2026-07-28). The former --appt/--appt-deep clinic-green pair is RETIRED — one green system now. */ /* Type stacks */ --display:'Cormorant Garamond',Georgia,serif; --body:"Helvetica Neue",Helvetica,Arial,sans-serif; /* Layout */ --container:1120px; --content:760px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font:16px/1.7 var(--body);color:var(--ink);background:var(--paper)} img{max-width:100%;height:auto;display:block} a{color:var(--teal-dark)} h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.25;margin:0 0 .6em} h2{letter-spacing:.14em;text-transform:uppercase;font-size:1.55rem;color:var(--ink)} body:not([data-page^="catalog/"]) main>*{scroll-margin-top:120px} /* ---------- header ---------- */ header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100} header.site .bar{display:flex;align-items:center;gap:24px;max-width:var(--container);margin:0 auto;padding:12px 24px} header.site .logo{flex:none} header.site .logo img{height:56px;width:auto} header.site nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap} header.site nav a{color:var(--muted);text-decoration:none;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:4px} header.site nav a:hover{color:var(--ink)} :where(body[data-page="home"]) header.site nav a[href="/"], :where(body[data-page="about"]) header.site nav a[href="/about"], :where(body[data-page="new-patient-forms"]) header.site nav a[href="/new-patient-forms"], :where(body[data-page="testimonials"]) header.site nav a[href="/testimonials"], :where(body[data-page="catalog/chiropractic-sports-medicine"],body[data-page="catalog/extracorporeal-shock-wave-therapy"],body[data-page="catalog/physical-therapy-athletic-rehab"],body[data-page="catalog/strength-and-conditioning"],body[data-page="treatments"]) header.site nav a[href="/treatments"]{color:var(--teal-dark);font-weight:700} header.site .head-right{display:flex;align-items:center;gap:16px} header.site .phone{color:var(--muted);text-decoration:none;font-size:.85rem;letter-spacing:.06em;white-space:nowrap} header.site .billpay{color:var(--muted);text-decoration:none;font-size:.85rem;letter-spacing:.06em;white-space:nowrap} header.site .appt{display:inline-block;background:var(--teal-dark);color:#fff;text-decoration:none;padding:10px 18px;border-radius:4px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap} header.site .appt:hover{background:var(--teal)} /* ---------- header, responsive (2026-08-19) ---------- The bar was a single non-wrapping flex row and no media query in this file touched it, so its min-content width (664px: logo 121 + nav + head-right 337 + gaps + padding) forced every route to scroll sideways below 664px. At 390px the appointment CTA — the clinic's whole conversion path — sat 274px past the right edge and a patient never saw it. The bar now wraps. At 760px the nav drops to a full-width row of its own; at 680px the phone and the CTA take a second full-width row, with the CTA flexing to fill whatever the phone number leaves. Nothing is hidden, the tap targets go to 44px, and there is no JavaScript. Above 760px not one declaration below applies, so desktop is byte-for-byte what it was. */ @media(max-width:760px){ header.site .bar{flex-wrap:wrap;justify-content:space-between;gap:10px 14px;padding:10px 16px} header.site .logo img{height:44px} header.site nav{order:3;flex:1 0 100%;justify-content:center;gap:2px} /* 10px, not the desktop 8px: the smaller mobile face shrinks the line box, and 8px would have left the nav links a 36px target — under the 38px they have on desktop. 10px puts them at 40px. */ header.site nav a{font-size:.72rem;letter-spacing:.08em;padding:10px 9px} header.site .head-right{flex-wrap:wrap;justify-content:flex-end;gap:8px 12px;min-width:0} header.site .phone{font-size:.95rem;min-height:44px;display:inline-flex;align-items:center} header.site .appt{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:11px 16px} } @media(max-width:680px){ header.site .bar{padding:8px 14px;gap:8px 12px} header.site .head-right{order:2;flex:1 0 100%;justify-content:space-between;gap:10px} /* nowrap is what made the CTA an unshrinkable 225px block; at this width it may take a second line rather than push the row off-screen. */ header.site .appt{flex:1 1 auto;white-space:normal;text-align:center;letter-spacing:.05em;padding:11px 12px} } /* ---------- Now Hiring PT banner (§G10) — slim, dismissible, all pages ---------- */ .hiring-banner{background:var(--teal);color:#fff;text-align:center;font-size:.82rem;letter-spacing:.05em;position:relative} .hiring-banner .inner{max-width:var(--container);margin:0 auto;padding:9px 44px 9px 24px} .hiring-banner a{color:#fff;text-decoration:underline;font-weight:700} .hiring-banner .dismiss{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;padding:4px 8px;opacity:.85} .hiring-banner .dismiss:hover{opacity:1} .hiring-banner[hidden]{display:none} /* ---------- hero (§5) — poster-first still, JS-gated video, light overlay ---------- */ .hero{position:relative;min-height:540px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--ink)} .hero-still,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-still{object-position:center} /* the LCP paint, every viewport — NO brightness filter */ .hero-video{object-position:center top;opacity:0;transition:opacity .6s ease} .hero--video.video-on .hero-video{opacity:1} /* fades in only once hero.js starts playback */ .hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.16) 0%,rgba(0,0,0,.28) 100%)} .hero-toggle{position:absolute;z-index:3;right:16px;bottom:16px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:20px;padding:7px 16px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer} .hero-toggle:hover{background:rgba(0,0,0,.6)} .hero-toggle[hidden]{display:none} /* skip-to-content (WCAG 2.4.1) — first focusable, visible on focus */ .skip-link{position:absolute;left:8px;top:-52px;z-index:200;background:var(--teal-dark);color:#fff;padding:10px 18px;border-radius:0 0 6px 6px;text-decoration:none;letter-spacing:.04em;transition:top .15s} .skip-link:focus{top:0} #main{scroll-margin-top:120px} #main:focus{outline:none} .hero-inner{position:relative;z-index:2;color:#fff;padding:72px 24px;max-width:920px} .hero h1{font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,5.5vw,4rem);letter-spacing:.32em;text-transform:uppercase;text-shadow:0 2px 20px rgba(0,0,0,.32);margin-bottom:.4em} .hero .sub{font-size:1.1rem;letter-spacing:.08em;margin-bottom:2.2em;text-shadow:0 1px 12px rgba(0,0,0,.4);font-style:italic} .appt-btn,.hero .appt-btn{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.75);color:#fff;text-decoration:none;padding:14px 32px;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;border-radius:3px} .appt-btn:hover{background:rgba(255,255,255,.28)} /* ---------- modality tiles (§6.1) ---------- */ .modalities{background:var(--ground);border-bottom:1px solid var(--line)} .tile-grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)} .tile{display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 22px;text-decoration:none;color:var(--teal-dark);letter-spacing:.16em;text-transform:uppercase;font-size:.88rem;border-right:1px solid var(--line);border-bottom:3px solid transparent;transition:background .18s,color .18s,border-color .18s} .tile:last-child{border-right:0} .tile:hover{background:var(--paper);color:var(--ink);border-bottom-color:var(--teal)} /* ---------- value bands (§6.2/6.3) — light ---------- */ .value-band{background:var(--paper);color:var(--ink)} .value-band .inner{max-width:var(--container);margin:0 auto;padding:56px 24px} .value-band h2{color:var(--ink);font-family:var(--display);font-weight:300} .value-band p{color:var(--ink);max-width:var(--content)} .value-band a{color:var(--teal)} .value-band+.value-band{border-top:1px solid var(--line)} /* ---------- did you know (§6.4) — light, teal heading ---------- */ .didyouknow{background:var(--paper);border-top:1px solid var(--line)} .didyouknow .inner{max-width:var(--container);margin:0 auto;padding:52px 24px} .didyouknow h2{color:var(--teal-dark);font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:.2em;text-transform:uppercase} .didyouknow p{font-size:1.15rem;color:var(--ink);max-width:640px} .didyouknow .learn{display:inline-block;margin-top:14px;color:var(--teal);text-decoration:none;letter-spacing:.08em} .didyouknow .learn:hover{text-decoration:underline} /* ---------- cta photo boxes (§6.5) — photographic ---------- */ .cta-boxes{background:var(--ink);padding:0} .box-row{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:3px} /* 2026-09-29 R4: the photograph is its own band. The label sits on paper below it, so type is not painted across a face. Per-image --focal (the u- classes) is unchanged. */ .cta-box{position:relative;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:center;padding:0;text-decoration:none;color:var(--teal-dark);letter-spacing:.16em;text-transform:uppercase;font-family:var(--display);font-size:1.05rem;font-weight:300;overflow:hidden;background:var(--ground)} .cta-box::before{content:'';position:relative;inset:auto;height:210px;flex:none;background-image:var(--box-bg);background-size:cover;background-position:var(--focal,center 30%);transition:transform .4s ease} .cta-box::after{content:none} .cta-box:hover::before{transform:scale(1.04)} .cta-box span{position:static;z-index:auto;display:block;line-height:1.3;background:var(--ground);color:var(--teal-dark);padding:12px 16px 0} .cta-box span:last-child{padding-bottom:16px} /* ---------- associations (§6.6) ---------- */ .associations{background:var(--paper);text-align:center;padding:52px 24px;border-top:1px solid var(--line)} .associations .kicker{letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-size:.78rem;margin-bottom:32px} .associations.has-lede .kicker{margin-bottom:.9em} .associations .lede{font-size:1rem;color:var(--muted);max-width:620px;margin:0 auto 32px;font-style:italic} .assoc-row{max-width:var(--container);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:36px 48px} .assoc img{max-height:46px;width:auto;filter:grayscale(.2) opacity(.85);transition:filter .2s} .assoc:hover img{filter:none} /* ---------- page title band ---------- */ .page-title{text-align:center;padding:56px 24px 8px;background:var(--paper)} .page-title h1{color:var(--teal-dark);font-family:var(--display);font-weight:300;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:.4em} /* the band's intro line (2026-08-21) — matches .treatments-hub-header .sub */ .page-title .sub{font-size:1.05rem;color:var(--muted);max-width:620px;margin:0 auto .9em;font-style:italic} .page-title .rule{display:inline-block;width:64px;height:2px;background:var(--teal)} /* ---------- prose bands (treatments) — all light (§9) ---------- */ .prose-band{background:var(--paper)} .prose-band .inner{max-width:var(--container);margin:0 auto;padding:44px 24px} .prose-band h2{color:var(--ink)} .prose-band ul{padding-left:1.2em;margin:.4em 0 1em} .prose-band li{margin:.25em 0} .prose-band .band-cta{display:inline-block;margin-top:12px;background:var(--teal);color:#fff;text-decoration:none;padding:11px 22px;border-radius:4px;letter-spacing:.06em;font-size:.85rem} .prose-band .band-cta:hover{background:var(--teal-dark)} .prose-band+.prose-band{border-top:1px solid var(--line)} /* badge callout (§9 — inline, larger badge) */ .badge-callout{max-width:var(--container);margin:0 auto;padding:8px 24px 40px;display:flex;align-items:center;gap:28px} .badge-callout .badge-circle{flex:none;width:140px;height:140px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase} .badge-callout p{margin:0;color:var(--muted);font-style:italic} @media(max-width:680px){.badge-callout{flex-direction:column;text-align:center}} /* ESWT band (§G8) — olive retired → light ground */ .prose-band.eswt{background:var(--ground);border-top:1px solid var(--line)} .prose-band.eswt .inner{display:flex;gap:40px;align-items:flex-start} .prose-band.eswt h2{color:var(--teal-dark)} .prose-band.eswt .eswt-txt{flex:1} .prose-band.eswt ul{color:var(--ink)} .eswt-links{display:flex;flex-direction:column;gap:6px;margin-top:14px} .eswt-links a{color:var(--teal);text-decoration:underline} .eswt-media{flex:none;width:200px;text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center} .eswt-photo{max-height:280px;width:auto} .eswt-logo img{max-height:60px;width:auto} @media(max-width:760px){.prose-band.eswt .inner{flex-direction:column}.eswt-media{width:100%}} /* accordion */ .accordion{background:var(--paper)} .accordion .inner{max-width:var(--container);margin:0 auto;padding:44px 24px} .accordion .lead{color:var(--muted)} .accordion details{border-bottom:1px solid var(--line)} .accordion summary{cursor:pointer;padding:16px 0;list-style:none;color:var(--ink);letter-spacing:.04em;font-family:var(--display);font-size:1.15rem;display:flex;justify-content:space-between;align-items:center} .accordion summary::-webkit-details-marker{display:none} .accordion summary::after{content:"\25BE";color:var(--teal);font-size:.8rem} .accordion details[open] summary::after{content:"\25B4"} .accordion details>p,.accordion details>ul{color:var(--muted);padding:0 0 14px} /* ---------- nat intro layout (legacy class names) ---------- */ .nat-intro .inner{max-width:var(--container);margin:0 auto;padding:44px 24px;display:flex;gap:44px;align-items:flex-start} .nat-intro h1{color:var(--teal-dark);font-family:var(--display);font-weight:300;letter-spacing:.18em;text-transform:uppercase;font-size:clamp(1.8rem,3vw,2.4rem)} .nat-intro .nat-txt{flex:1} .nat-photo{flex:none;width:260px;margin:0} .nat-photo img{border-radius:2px} .nat-photo figcaption{text-align:center;color:var(--muted);font-size:.85rem;margin-top:8px} @media(max-width:760px){.nat-intro .inner{flex-direction:column}.nat-photo{width:100%;max-width:320px;margin:0 auto}} .service-list{max-width:var(--container);margin:0 auto;padding:20px 24px 44px} .service-list h2{color:var(--ink);font-size:1.05rem} .service-list ul{padding-left:1.2em} .svc-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .svc-group h3{color:var(--teal-dark);letter-spacing:.08em;text-transform:uppercase;font-size:.85rem} @media(max-width:760px){.svc-groups{grid-template-columns:1fr}} /* ---------- about / staff bios ---------- */ body[data-page="about"] .page-title{margin-bottom:12px} .staff-bio{max-width:var(--container);margin:0 auto;padding:34px 24px;display:flex;gap:36px;align-items:flex-start;border-bottom:1px solid var(--line)} .staff-bio.flip{flex-direction:row-reverse} .staff-bio .portrait{flex:none;width:220px} .staff-bio .portrait img{border-radius:2px} .staff-bio .bio{flex:1} .staff-bio h2{color:var(--ink);letter-spacing:.1em;font-size:1.2rem;margin-bottom:.15em} .staff-bio .role{color:var(--teal-dark);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;margin:0 0 .8em} .staff-bio p{color:var(--muted);font-size:.95rem} /* short/long bio toggle (§9) — five doctor bios, CSS-only
*/ .staff-bio .bio-more{margin-top:.2em} .staff-bio .bio-more>summary{cursor:pointer;list-style:none;color:var(--teal-dark);letter-spacing:.06em;text-transform:uppercase;font-size:.76rem;font-weight:700;padding:.3em 0} .staff-bio .bio-more>summary::-webkit-details-marker{display:none} .staff-bio .bio-more>summary::after{content:" \25BE"} .staff-bio .bio-more[open]>summary::after{content:" \25B4"} .staff-bio .bio-more[open]>summary .more-label{display:none} .staff-bio .bio-more>summary .less-label{display:none} .staff-bio .bio-more[open]>summary .less-label{display:inline} .staff-bio.coming .portrait{width:220px;height:270px;background:var(--ground);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center} .staff-bio .coming-mark{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem} @media(max-width:680px){.staff-bio,.staff-bio.flip{flex-direction:column}.staff-bio .portrait{width:100%;max-width:240px}} /* ---------- testimonials (§8) ---------- */ .testimonial{max-width:var(--container);margin:0 auto;padding:32px 24px 32px 32px;border-left:3px solid var(--teal-light);border-bottom:1px solid var(--line)} .testimonial h2{color:var(--ink);letter-spacing:.1em;font-size:1.15rem} .testimonial blockquote{margin:0 0 1em;color:var(--ink);font-style:italic} .testimonial p{color:var(--muted)} .t-links{display:flex;flex-wrap:wrap;gap:16px;font-size:.85rem} /* feature testimonial — teal circle qmark + wash panel */ .testimonial.feature{background:var(--teal-wash);border-left:0;position:relative;display:grid;grid-template-columns:96px 1fr;gap:32px;align-items:start;padding:52px 24px;max-width:var(--container);margin:0 auto} .testimonial.feature .qmark-circle{width:96px;height:96px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0} .testimonial.feature .qmark{font-size:2.6rem;color:#fff;line-height:1;margin-top:-.1em} .testimonial.feature h2{color:var(--teal-dark);font-family:var(--display);font-weight:300} .testimonial.feature blockquote{font-size:1.08rem;font-style:italic;color:var(--ink);margin:0 0 .8em} .testimonial.feature .t-body{min-width:0} .testimonial.feature .t-gallery{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px} .testimonial.feature .t-gallery img{aspect-ratio:1/1;object-fit:cover;border-radius:2px} @media(max-width:680px){.testimonial.feature{grid-template-columns:1fr}.testimonial.feature .qmark-circle{width:72px;height:72px}.testimonial.feature .t-gallery{grid-template-columns:repeat(2,1fr)}} /* ---------- forms (§9 — teal buttons) ---------- */ .forms{background:var(--ground)} .forms .inner{max-width:820px;margin:0 auto;padding:44px 24px;text-align:center} .forms h2{color:var(--ink);letter-spacing:.12em;font-size:1.1rem} .forms p{color:var(--muted);text-align:left} .form-links{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:26px 0} .form-link{background:var(--teal);color:#fff;text-decoration:none;padding:14px 26px;border-radius:3px;letter-spacing:.06em;font-size:.85rem} .form-link:hover{background:var(--teal-dark)} .forms-logo{max-width:200px;margin:20px auto 0} /* ---------- footer / tail (§9 — lighter) ---------- */ .tail{background:var(--footer-bg);color:#2c3430} .appt-band{text-align:center;padding:44px 24px 8px} .appt-band h2{color:var(--ink);letter-spacing:.06em;text-transform:none;font-size:1.15rem;font-weight:400} .appt-band a{color:var(--teal-dark)} .appt-band p{color:var(--ink)} footer{max-width:var(--container);margin:0 auto;padding:20px 24px 48px} .fcols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px} .fcols h3{color:var(--ink);letter-spacing:.2em;text-transform:uppercase;font-size:1rem;margin-bottom:1em} .services-col ul{list-style:none;margin:0;padding:0} .services-col li{margin:.4em 0;font-size:.9rem} .services-col a{color:var(--ink);text-decoration:none} .services-col a:hover{color:var(--teal-dark);text-decoration:underline} .clinic p{margin:.4em 0;font-size:.9rem;color:var(--ink)} .clinic a{color:var(--teal-dark)} .clinic .soc .icon{width:22px;height:22px;background:var(--ink)} .contact-col form{display:flex;flex-direction:column;gap:12px} .contact-col .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .contact-col label{display:block;font-size:.7rem;letter-spacing:.06em;color:var(--muted);margin-bottom:4px} .contact-col input,.contact-col textarea{width:100%;padding:10px;border:1px solid rgba(0,0,0,.18);background:#fff;border-radius:2px;font:inherit;font-size:.9rem} .contact-col textarea{min-height:110px;resize:vertical} .contact-col button{background:var(--teal-dark);color:#fff;border:0;padding:12px;border-radius:2px;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem} .contact-col button:hover{background:var(--teal)} .cform-status{font-size:.85rem;min-height:1em} .cform-status.is-ok{color:var(--teal-dark)} .cform-status.is-err{color:#a23} /* footer map card (§9/§14) — styled static-map link-out, NOT the Google iframe */ .map-card{display:block;margin-top:14px;border-radius:6px;overflow:hidden;text-decoration:none;border:1px solid rgba(0,0,0,.12);background: radial-gradient(circle at 30% 40%, rgba(77,132,128,.16), transparent 60%), radial-gradient(circle at 72% 70%, rgba(93,138,95,.14), transparent 55%), repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 26px), repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 26px), #e7ebe6} .map-card .map-face{position:relative;height:150px;display:flex;align-items:flex-end;justify-content:flex-start} .map-card .pin{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);width:20px;height:20px;border-radius:50% 50% 50% 0;background:var(--teal-dark);rotate:-45deg;box-shadow:0 2px 5px rgba(0,0,0,.3)} .map-card .pin::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:#fff} .map-card .map-label{position:relative;width:100%;background:rgba(255,255,255,.92);color:var(--ink);font-size:.78rem;letter-spacing:.04em;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px} .map-card .map-label .go{color:var(--teal-dark);font-weight:700;white-space:nowrap} .legal{background:var(--footer-deep);color:var(--ink);text-align:center;padding:16px 24px;font-size:.78rem} .legal a{color:var(--teal-dark)} /* ---------- treatments hub (§7b — first-class hub template) ---------- */ /* §7b Section 1 — hub header: clean text header in the display register, no photo hero (the card grid is the visual entry), no CTA (the grid carries the action). */ .treatments-hub-header{background:var(--paper);text-align:center;padding:64px 24px 48px;border-bottom:1px solid var(--line)} .treatments-hub-header .kicker{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 .6em} /* 2026-10-08: this heading is Barbara's sentence, shown as she wrote it. The wide letter-spacing belonged to the capital style. Every other heading stays in capitals. */ .treatments-hub-header h1{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:normal;line-height:1.35;text-transform:none;color:var(--ink);margin:0 0 .6em} .treatments-hub-header .sub{font-size:1.05rem;color:var(--muted);max-width:560px;margin:0 auto;font-style:italic} /* §7b Section 2 — 5-card photo grid (background image via --card-bg per card) */ .services-hub{background:var(--ground);padding:48px 24px} .svc-hub-grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:3px} /* 2026-09-29 R4: photo band, then the name on paper. overflow-wrap stays normal so EXTRACORPOREAL wraps only at spaces at 1280 (five columns in a 1120px container). */ .svc-hub-card{position:relative;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:0;text-decoration:none;overflow:hidden;background:var(--paper);border-radius:2px} .svc-hub-card::before{content:'';position:relative;inset:auto;height:180px;flex:none;background-image:var(--card-bg);background-size:cover;background-position:var(--focal,center 30%);transition:transform .4s ease} .svc-hub-card:hover::before{transform:scale(1.04)} .svc-hub-card::after{content:none} .svc-hub-card .card-name{overflow-wrap:normal;word-break:normal;position:static;z-index:auto;font-family:var(--display);font-weight:300;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-dark);padding:14px 16px 0} /* The description the hub never carried. Gradient below is deepened so it stays legible. */ .svc-hub-card .card-desc{position:static;z-index:auto;font-size:.86rem;line-height:1.45;color:var(--muted);padding:6px 16px 16px} .svc-hub-card.no-photo .card-desc{color:var(--muted)} /* no-photo fallback: teal-wash card, dark label, no photo/gradient layers */ .svc-hub-card.no-photo::before{display:none} .svc-hub-card.no-photo::after{display:none} .svc-hub-card.no-photo .card-name{color:var(--teal-dark)} @media(max-width:680px){.svc-hub-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:420px){.svc-hub-grid{grid-template-columns:1fr} .svc-hub-card::before{height:240px}} /* ---------- services listing (/catalog/, §9) ---------- */ body[data-page="catalog"] main{max-width:var(--container);margin:0 auto;padding:48px 24px} body[data-page="catalog"] main h1{margin-bottom:.8em;font-family:var(--display);font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-dark)} body[data-page="catalog"] main .cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} body[data-page="catalog"] main .card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff} body[data-page="catalog"] main .card a{text-decoration:none;color:var(--ink);display:block} body[data-page="catalog"] main .card img{width:100%;height:240px;object-fit:cover;object-position:var(--focal,center 30%);display:block} body[data-page="catalog"] main .card .pad{padding:18px} body[data-page="catalog"] main .card h2{font-size:1.2rem;margin-bottom:.4em;color:var(--ink)} body[data-page="catalog"] main .card p{margin:0;color:var(--muted);font-size:.92rem} /* ---------- record detail / modality page (§7) ---------- */ .subnav{background:var(--ground);border-bottom:1px solid var(--line);max-width:100%;padding:12px 24px;display:flex;gap:12px;align-items:center;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase} .subnav .brand{color:var(--teal-dark);text-decoration:none} .subnav .cur{color:var(--muted)} /* §7 Section 1 — photo hero (light treatment) */ .rec-hero-photo{position:relative;height:clamp(300px,40vh,420px);overflow:hidden;background:var(--ground)} .rec-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focal,center 30%)} .rec-hero-photo .ph-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(20,35,30,.55) 0%,rgba(20,35,30,.15) 60%,transparent 100%)} .rec-hero-photo.nophoto{background:linear-gradient(120deg,var(--teal-dark),var(--teal))} .rec-hero-photo.nophoto .ph-overlay{display:none} .rec-hero-photo .ph-inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:48px 24px;color:#fff;height:100%;display:flex;flex-direction:column;justify-content:flex-end} .rec-hero-photo .kicker{letter-spacing:.22em;text-transform:uppercase;font-size:.78rem;color:rgba(255,255,255,.85);margin:0 0 .6em} .rec-hero-photo h1{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,3.5vw,2.6rem);letter-spacing:.18em;text-transform:uppercase;margin:0;text-shadow:0 2px 14px rgba(0,0,0,.3)} /* portrait-aware variant (EC Finding 2): a tall image is contained beside the title, never force-cropped. LIGHT ground (§7c, 2026-07-28): teal-dark is no longer a hero-section background — a teal-wash band with dark title resolves the cross-template "heavy dark-green hero" clash while keeping the contained image crisp (no upscaling small/portrait stand-ins into a blurry cover). Swaps to full-bleed cover with the graduated .ph-overlay for landscape. */ .rec-hero-photo.portrait{height:auto;overflow:visible;background:var(--teal-wash);border-bottom:1px solid var(--line)} .rec-hero-photo.portrait .ph-inner{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;height:auto;padding:44px 24px;color:var(--ink)} .rec-hero-photo.portrait .ph-copy{min-width:0} .rec-hero-photo.portrait .kicker{color:var(--muted)} .rec-hero-photo.portrait h1{color:var(--teal-dark);text-shadow:none} .rec-hero-photo.portrait .ph-figure{margin:0} .rec-hero-photo.portrait .ph-figure img{position:static;inset:auto;width:190px;height:auto;max-height:300px;object-fit:cover;object-position:var(--focal,center 25%);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.28)} @media(max-width:680px){.rec-hero-photo.portrait .ph-inner{grid-template-columns:1fr;justify-items:start;gap:20px}.rec-hero-photo.portrait .ph-figure img{width:150px}} /* §7 Section 2 — intro (text + optional photo) */ body[data-page^="catalog/"] main .rec-intro .inner{max-width:var(--container);margin:0 auto;padding:48px 24px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start} body[data-page^="catalog/"] main .rec-intro.nophoto .inner{grid-template-columns:1fr;max-width:var(--content)} body[data-page^="catalog/"] main .rec-intro p{margin:0 0 1em} body[data-page^="catalog/"] main .rec-photo{margin:0} body[data-page^="catalog/"] main .rec-photo img{width:100%;border-radius:8px;display:block} /* §7 Section 3 — what to expect (light ground) */ .rec-expect{background:var(--ground);border-top:1px solid var(--line)} .rec-expect .inner{max-width:var(--container);margin:0 auto;padding:52px 24px} .rec-expect h2{font-family:var(--display);font-weight:300;color:var(--teal-dark);letter-spacing:.14em;text-transform:uppercase;font-size:1.5rem;margin-bottom:.8em} .rec-expect h3{color:var(--ink);font-size:1.05rem;letter-spacing:.04em;margin:1.2em 0 .3em} .rec-expect ul{padding-left:1.2em;margin:.2em 0} .rec-expect li{margin:.4em 0} .rec-expect p{max-width:var(--content);color:var(--ink)} /* §7 Section 4 — conditions/techniques (specs grid, ground) */ body[data-page^="catalog/"] main .rec-specs{background:var(--paper);border-top:1px solid var(--line)} body[data-page^="catalog/"] main .rec-specs .inner{max-width:var(--container);margin:0 auto;padding:48px 24px;display:grid;grid-template-columns:repeat(2,1fr);gap:32px} body[data-page^="catalog/"] main .rec-specs .spec h2{font-size:1.1rem;margin-bottom:.5em;color:var(--ink)} body[data-page^="catalog/"] main .rec-specs .spec ul{margin:0;padding-left:1.2em} body[data-page^="catalog/"] main .rec-specs .spec li{margin:.3em 0} /* §7 Section 4b — related services (internal links, light ground) */ .rec-related{background:var(--ground);border-top:1px solid var(--line)} .rec-related .inner{max-width:var(--container);margin:0 auto;padding:40px 24px} .rec-related h2{font-family:var(--display);font-weight:300;color:var(--teal-dark);letter-spacing:.14em;text-transform:uppercase;font-size:1.3rem;margin-bottom:.6em} .rec-related .rel-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px} .rec-related .rel-links a{color:var(--teal-dark);text-decoration:none;letter-spacing:.04em;font-size:.95rem;border-bottom:1px solid var(--teal-light);padding-bottom:2px} .rec-related .rel-links a:hover{color:var(--teal)} /* §7 Section 5 — CTA band (teal, full width) */ .rec-cta-band{background:var(--teal-dark);color:#fff;text-align:center;padding:56px 24px} .rec-cta-band h2{font-family:var(--display);font-weight:300;font-size:1.8rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:.5em} .rec-cta-band p{color:rgba(255,255,255,.85);margin-bottom:1.6em;font-style:italic} .appt-btn--large{display:inline-block;background:#fff;color:var(--teal-dark);text-decoration:none;padding:16px 36px;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;border-radius:3px;font-family:var(--body)} .appt-btn--large:hover{background:var(--teal-wash)} /* ---------- responsive ---------- */ @media(max-width:900px){body[data-page="catalog"] main .cards{grid-template-columns:repeat(2,1fr)}body[data-page^="catalog/"] main .rec-intro .inner{grid-template-columns:1fr}body[data-page^="catalog/"] main .rec-specs .inner{grid-template-columns:1fr}} @media(max-width:680px){.fcols{grid-template-columns:1fr}.contact-col .row2{grid-template-columns:1fr}.tile-grid{grid-template-columns:repeat(2,1fr)}.box-row{grid-template-columns:1fr}body[data-page="catalog"] main .cards{grid-template-columns:1fr}.rec-cta-band{padding:36px 24px}} /* 420px — the last two things holding the page wider than the phone once the header stopped doing it. Both are min-content floors, not layout choices: a two-up .tile row needs 410px because "EXTRACORPOREAL" gives the widest tile a 205px min-content and a `1fr` track will not go under it, and the same word gives the ESWT record hero a 333px h1. `anywhere` (not `break-word`) because only `anywhere` lowers the intrinsic minimum, which is the number that was doing the damage. Both are inert above 420px. */ @media(max-width:420px){ .tile-grid{grid-template-columns:1fr} .tile{border-right:0;border-bottom:1px solid var(--line);padding:26px 22px} .tile:last-child{border-bottom:0} /* The clamp floor of 1.8rem/.18em gives "EXTRACORPOREAL" a 333px h1, which is wider than a 320px phone can hold. Step the floor down so the term sets whole; `anywhere` then stays inert and only exists so a longer word can never put the page back into sideways scroll. */ .rec-hero-photo h1{font-size:1.5rem;letter-spacing:.1em} .rec-hero-photo h1,.rec-hero-photo .kicker{overflow-wrap:anywhere} } /* ---------- reduced motion (WCAG 2.2.2) ---------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero-video{display:none} /* belt + suspenders: never show the loop; hero.js also skips it */ .hero--video.video-on .hero-video{opacity:0} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ---------- location photo band (2026-08-19) ---------- */ .location-photo{background:var(--ground);padding:40px 24px} .location-photo h2{max-width:var(--content);margin:0 auto .8em;font-family:var(--display);font-weight:300;font-size:1.3rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-dark);text-align:center} .location-photo figure{max-width:var(--content);margin:0 auto} .location-photo img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.18)} .location-photo figcaption{margin-top:.9em;text-align:center;font-size:.92rem;color:var(--muted);font-style:italic} /* Legal pages read as prose, not as a services grid. service-list defaults to --container (1120px), which ran ~140-char lines on /privacy-policy/ and /sms-terms/ (STW-EC MeatCheck 2026-08-19). Clamp to the reading token. */ body[data-page="privacy-policy"] main .service-list,body[data-page="sms-terms"] main .service-list{max-width:var(--content);margin-left:auto;margin-right:auto} /* ══ ADDITIONS, stillwater build 1, 2026-09-11 ══════════════════════════════════════════════════════════════ Written by mkcss.py. Every rule restores something v1 drew with markup or with script that the closed v2 vocabulary cannot carry. Nothing here is new design and nothing here is a client preference. */ /* ── THE HIRING-BANNER DISMISS IS A , NOT A