/* Zodiak (headline face per the Symbios brand guide), self-hosted from Fontshare under the ITF Free Font License */ @font-face{font-family:'Zodiak';src:url('/assets/fonts/zodiak-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'Zodiak';src:url('/assets/fonts/zodiak-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;} @font-face{font-family:'Zodiak';src:url('/assets/fonts/zodiak-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Zodiak';src:url('/assets/fonts/zodiak-700-italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap;} /* Symbios Health — shared stylesheet (Symbios Fit rebrand build) Palette + type sourced from live site (Impreza theme custom props). Per-brand accents are set via a body class: .brand-main — Symbios Health (coral) .brand-fit — SymbiosFit (brand-guide blue #2f6fa3; darker blue for headings/links) .brand-pc — Primary Care (green) .brand-physio— Physio Therapy (magenta) .brand-aria — Aria med spa (cyan; light gray page bg) */ :root { --brand: #f15b57; /* buttons, topbar CTA, accent bands */ --brand-deep: #bd3d39; /* text-only coral (headings h3/h4/h6, links, eyebrows): brand coral darkened to pass WCAG AA on white and cream */ --color-bg: #F1ECE8; /* cream (header + alt sections) */ --color-content-bg: #ffffff; --color-heading: #121212; --color-text: #4d4c4d; --color-text-soft: #494949; --color-header-text: #4e5859; --color-border: #d6d6d6; --color-btn-dark: #4a4a4a; --font-body: 'Montserrat', sans-serif; --font-heading: 'Zodiak', 'Cormorant Garamond', serif; } body.brand-fit { --brand: #2f6fa3; --brand-deep: #25598a; } body.brand-pc { --brand: #4fa317; --brand-deep: #4fa317; } body.brand-physio { --brand: #a7228b; --brand-deep: #a7228b; } body.brand-aria { --brand: #08bed5; --brand-deep: #08bed5; --color-bg: #f0f0f0; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: #2b2b2b; background: var(--color-content-bg); font-size: 17px; line-height: 26px; font-weight: 400; } h1, h2, h3 { font-family: var(--font-heading); color: var(--color-heading); line-height: 1.1; } h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); font-weight: 400; } h1 i, h1 em { font-style: italic; } h2 { font-size: clamp(1.9rem, 4vw, 3.05rem); font-weight: 600; } h3 { font-size: 1.75rem; font-weight: 400; color: var(--brand-deep); } h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; letter-spacing: .07em; line-height: 1.2; color: var(--brand-deep); } p { margin-bottom: 1em; } p, li { font-weight: 500; } a { color: var(--brand-deep); text-decoration: none; transition: color .2s; } a:hover { color: #050505; } img { max-width: 100%; height: auto; display: block; } /* ---------- Campus gateway: intro animation overlay ---------- */ html.intro-lock { overflow: hidden; scrollbar-gutter: stable; } .intro { position: fixed; inset: 0; z-index: 9999; background: #F1ECE8; display: none; align-items: center; justify-content: center; overflow: hidden; opacity: 1; transition: opacity 1.2s cubic-bezier(.4,0,.2,1); will-change: opacity; } .intro.done { opacity: 0; pointer-events: none; } .intro.done .intro-stage { transform: translateY(-22px); } .intro-stage { position: relative; width: min(880px, 94vw); height: 480px; transition: transform 1.2s cubic-bezier(.4,0,.2,1); will-change: transform; } /* kicker + hairline rule */ .intro-kicker { position: absolute; top: 6%; left: 0; right: 0; text-align: center; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: #8a7f72; opacity: 0; } .intro.run .intro-kicker { animation: introFadeIn 1s ease .2s forwards, introFadeOut .7s ease 7.15s forwards; } .intro-rule { position: absolute; top: calc(6% + 30px); left: 50%; width: 64px; height: 1px; background: #b9ac9c; transform: translateX(-50%) scaleX(0); } .intro.run .intro-rule { animation: introRule .9s cubic-bezier(.2,.7,.2,1) .6s forwards, introFadeOut .7s ease 7.15s forwards; } @keyframes introRule { to { transform: translateX(-50%) scaleX(1); } } @keyframes introFadeIn { to { opacity: 1; } } @keyframes introFadeOut { to { opacity: 0; } } /* sequential brand carousel — each logo large, centered, readable */ .intro-carousel { position: absolute; inset: 0; } .intro-brand { position: absolute; left: 50%; top: 44%; width: min(440px, 84vw); opacity: 0; transform: translate(-50%, -50%) translateY(18px); } .intro.run .intro-brand { animation: introBrandSeq 1.5s cubic-bezier(.25,.6,.25,1) forwards; } .intro.run .ib-1 { animation-delay: 1.1s; } .intro.run .ib-2 { animation-delay: 2.35s; } .intro.run .ib-3 { animation-delay: 3.6s; } .intro.run .ib-4 { animation-delay: 4.85s; } .intro.run .ib-5 { animation-delay: 6.1s; } @keyframes introBrandSeq { 0% { opacity: 0; transform: translate(-50%, -50%) translateY(18px); } 14% { opacity: 1; transform: translate(-50%, -50%) translateY(0); } 80% { opacity: 1; transform: translate(-50%, -50%) translateY(0); } 100% { opacity: 0; transform: translate(-50%, -50%) translateY(-12px); } } /* word-by-word tagline */ .intro-tag { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); width: min(90vw, 820px); text-align: center; font-family: var(--font-heading); font-size: clamp(1.7rem, 4.5vw, 2.9rem); line-height: 1.25; color: #121212; text-wrap: balance; } .intro-tag .w { display: inline-block; opacity: 0; transform: translateY(16px); } .intro-tag .w.em { font-style: italic; color: var(--brand, #f15b57); } .intro.run .intro-tag .w { animation: introWord .65s cubic-bezier(.2,.7,.2,1) forwards; } .intro.run .intro-tag .w:nth-child(1) { animation-delay: 7.7s; } .intro.run .intro-tag .w:nth-child(2) { animation-delay: 7.8s; } .intro.run .intro-tag .w:nth-child(3) { animation-delay: 7.9s; } .intro.run .intro-tag .w:nth-child(4) { animation-delay: 8.0s; } .intro.run .intro-tag .w:nth-child(5) { animation-delay: 8.1s; } .intro.run .intro-tag .w:nth-child(6) { animation-delay: 8.25s; } .intro.run .intro-tag .w:nth-child(7) { animation-delay: 8.35s; } @keyframes introWord { to { opacity: 1; transform: translateY(0); } } /* closing Symbios lockup */ .intro-logo { position: absolute; left: 50%; top: 56%; width: min(400px, 76vw); opacity: 0; transform: translate(-50%, 0) translateY(26px); } .intro.run .intro-logo { animation: introLogoUp 1s cubic-bezier(.2,.7,.2,1) 9.15s forwards; } @keyframes introLogoUp { to { opacity: 1; transform: translate(-50%, 0) translateY(0); } } .intro-skip { position: absolute; bottom: 26px; right: 30px; background: transparent; border: 1px solid #b5aca1; color: #6f675e; padding: 9px 20px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } .intro-skip:hover { background: #fff; color: #121212; } @media (prefers-reduced-motion: reduce) { .intro { display: none !important; } } /* ---------- Campus gateway: brand door panels ---------- */ .door-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 48px; } /* five cards need more room than the 1200px column: let this one band grow to 1440px on wide screens */ @media (min-width: 1240px) { .door-grid { margin-inline: calc(50% - min(720px, 50vw - 30px)); } } .door { background: #fff; border: 1px solid var(--color-border); border-top: 5px solid var(--door, var(--brand)); display: flex; flex-direction: column; padding: 30px 24px 26px; text-align: left; transition: transform .25s ease, box-shadow .25s ease; } /* line up logo, blurb, list, phone and button across the cards so each row starts at the same height */ @supports (grid-template-rows: subgrid) { .door { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; } .door ul { align-self: start; } .door .door-tel { align-self: end; } } .door:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.12); } .door .door-logo { height: 54px; display: flex; align-items: center; margin-bottom: 20px; } .door .door-logo img { max-height: 54px; width: auto; } .door p.door-blurb { font-size: .92rem; line-height: 1.6; color: var(--color-text-soft); margin: 0 0 18px; } .door ul { list-style: none; margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--color-border); flex: 1; } .door li { font-size: .86rem; line-height: 1.45; color: var(--color-text-soft); padding: 5px 0 5px 18px; position: relative; } .door li::before { content: '›'; position: absolute; left: 2px; top: 5px; color: var(--door); font-weight: 700; } .door .door-tel { font-size: .86rem; font-weight: 600; margin-bottom: 14px; color: var(--color-heading); } .door .door-btn { display: block; text-align: center; background: var(--door); color: #fff; padding: 12px 10px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; } /* The five buttons always break the same way: one line when "Visit PhysioTherapy" fits, otherwise "Visit" over the practice name on every card. Measured on the button itself, so it holds at any window size and column count. */ .door .door-btn { container-type: inline-size; padding: 0; } .door .door-btn-in { display: block; padding: 13px 8px; line-height: 1.5; white-space: nowrap; } @container (max-width: 194px) { .door-btn-in { font-size: clamp(10px, 7.4cqi, .78rem); padding: 11px 6px; } .door-btn-name { display: block; } } .door .door-btn:hover { filter: brightness(.9); color: #fff; } @media (max-width: 1100px) { .door-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .door-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .door-grid { grid-template-columns: 1fr; } } /* ---------- Campus brand-switcher bar (persistent cross-brand nav) ---------- */ .brand-bar { background: #3d3d3d; font-size: 12px; } .brand-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 22px; min-height: 34px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .brand-bar-inner::-webkit-scrollbar { display: none; } .brand-bar-label { color: #b8b8b8; text-transform: uppercase; letter-spacing: .1em; font-weight: 500; font-size: 10.5px; } .brand-bar a { color: #e6e2dd; font-weight: 500; letter-spacing: .04em; padding: 8px 0; } .brand-bar a:hover { color: #fff; } .brand-bar a.current { color: #fff; font-weight: 700; box-shadow: inset 0 -2px 0 var(--brand); } /* the practice's own home page: already there, so the link does nothing. On its sub pages it stays a link back home. */ .brand-bar a.current.here { pointer-events: none; cursor: default; } /* ---------- Top utility bar (live: .l-subheader.at_top — cream, 41px) ---------- */ .topbar { background: var(--color-bg); color: var(--color-header-text); font-size: 13px; } .topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 41px; } .topbar a { color: var(--color-header-text); font-weight: 500; } .topbar a:hover { color: var(--brand); } .topbar .cta-links { display: flex; margin-left: auto; } .topbar .cta-links a { color: #fff; font-size: 13px; line-height: 1.2; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; padding: 1em 2em; } .topbar .cta-links a:hover { opacity: .88; color: #fff; } .topbar .cta-brand { background: var(--brand); } .topbar .cta-dark { background: var(--color-btn-dark); } /* ---------- Header (live: .l-subheader.at_middle — WHITE, 120px, logo 80px, static) ---------- */ header.site-header { background: #ffffff; position: relative; z-index: 100; } .header-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 120px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: flex; align-items: center; gap: 10px; } /* Live spec: the main site logo is 80px and each sub-brand lockup is 100px on wide desktop (>=1381px), which lands every brand's header logo at ~322px wide. */ .logo img { height: 80px; width: auto; object-fit: contain; object-position: left center; } /* never squished when the header is narrower than the logo */ @media (min-width: 1381px) { body.brand-fit .logo img, body.brand-pc .logo img, body.brand-physio .logo img, body.brand-aria .logo img { height: 100px; } } nav.main-nav { display: flex; gap: 28px; align-items: center; } nav.main-nav > .nav-item { position: relative; } nav.main-nav a.nav-link { color: var(--color-header-text); font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; padding: 24px 0; display: inline-block; } nav.main-nav a.nav-link:hover { color: var(--brand); } /* live: dropdown lists use the cream header bg, brand-color hover */ /* Dropdown unrolls from the top edge — matches the live nav's Impreza "dropdown_height" style: transform:scaleY(0)->1 + fade, .3s */ .dropdown { position: absolute; top: 100%; left: -14px; background: var(--color-bg); min-width: 250px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px 0; z-index: 50; visibility: hidden; opacity: 0; transform: scaleY(0) translateZ(0); transform-origin: 50% 0; transition: transform .3s, opacity .3s, visibility .3s; } .nav-item:hover .dropdown, .nav-item:focus-within .dropdown { visibility: visible; opacity: 1; transform: scaleY(1) translateZ(0); } @media (prefers-reduced-motion: reduce) { .dropdown { transition: none; } } /* Dropdown items share the top-level nav's size, weight and letter-spacing, but stay mixed case so the one-word brand names keep their camelCase break (PrimaryCare, not PRIMARYCARE) */ .dropdown a { display: block; padding: 9px 18px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: .05em; color: var(--color-header-text); } .dropdown a:hover { color: var(--brand); } .menu-toggle { display: none; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 560px; display: flex; align-items: center; background-size: cover; background-position: center; } .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,16,12,.5) 0%, rgba(20,16,12,.2) 65%, rgba(20,16,12,.02) 100%); } /* Rotating hero slides (live: Royal Slider, fade 1s, autoplay 3s, loop) */ .hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; } .hero-slide.active { opacity: 1; } .hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 80px 20px 120px; width: 100%; } .hero-content .hero-box { max-width: 520px; } .hero h1 { color: #fff; margin-bottom: .6em; } .hero p { color: #f3efe9; font-size: 1rem; max-width: 500px; } .hero.hero-inner-page { min-height: 320px; } .hero.hero-inner-page .hero-content { padding-bottom: 80px; } /* Inner-page title band (live: .l-section.height_small.color_primary — flat brand color, h1 only) */ .hero-band { background: var(--brand); padding: 52px 0; } .hero-band h1 { color: #fff; margin: 0; } /* Curved bottom divider (live: .l-section-shape.type_curve.pos_bottom) */ .hero-curve { position: absolute; bottom: -1px; left: 0; right: 0; height: 15vmin; color: #fff; pointer-events: none; z-index: 3; } .hero-curve.to-cream { color: var(--color-bg); } .hero-curve svg { display: block; width: 100%; height: 100%; } /* ---------- Sections ---------- */ section { padding: 72px 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 500; color: var(--brand-deep); margin-bottom: 10px; } .section-title { margin-bottom: .5em; } .section-lead { max-width: 780px; color: var(--color-text-soft); } .center { text-align: center; } .center .section-lead { margin: 0 auto; } .bg-cream { background: var(--color-bg); } .bg-brand { background: var(--brand); } .bg-brand h2, .bg-brand h3, .bg-brand p, .bg-brand h4 { color: #fff; } .bg-brand .eyebrow { color: #363636; } .bg-brand li, .bg-brand ul.checklist li::before { color: #fff; } /* list text and ticks were grey/brand-colored on the brand band */ .nb { white-space: nowrap; } /* ---------- Icon boxes (live: .w-iconbox iconpos_top align_center) ---------- */ .iconbox { text-align: center; } .iconbox .icon { display: flex; justify-content: center; margin-bottom: 18px; color: var(--color-heading); } .iconbox .icon svg { width: 50px; height: 50px; } .iconbox h4 { margin-bottom: .6em; } .iconbox p { color: var(--color-text-soft); font-size: .95rem; } .learn-more { display: inline-block; margin-top: 4px; color: #000; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; } .learn-more:hover { color: var(--brand-deep); } /* ---------- Cards / grids ---------- */ .grid { display: grid; gap: 28px; margin-top: 44px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: #fff; border: 1px solid var(--color-border); display: flex; flex-direction: column; } .card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; } .card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .card-body p { color: var(--color-text-soft); font-size: .92rem; flex: 1; } .card h4 { font-size: 1.12rem; } /* ---------- Buttons (live Impreza button styles) ---------- */ .btn, .btn-outline, .btn-light, .btn-ghost { display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; line-height: 1.2; padding: 1.1em 2em; transition: all .3s ease; border-radius: 0; cursor: pointer; font-family: var(--font-body); border: 0; } /* style_6: solid brand */ .btn { background: var(--brand); color: #fff; } .btn:hover { background: var(--color-btn-dark); color: #fff; } /* style_1: white with gray border, fills dark on hover */ .btn-outline { background: #fff; border: 1px solid #7a7a7a; color: #7a7a7a; } .btn-outline:hover { background: var(--color-text); border-color: transparent; color: #fff; } .btn-light { background: #fff; color: var(--color-heading); } /* ghost: transparent with white border, for use on photo heroes */ .btn-ghost { background: transparent; border: 2px solid #fff; color: #fff; } .btn-ghost:hover { background: #fff; color: var(--color-heading); } .btn-light:hover { background: var(--color-bg); color: var(--color-heading); } .btn-dark { background: var(--color-btn-dark); color: #fff; } .btn-dark:hover { background: var(--brand); color: #fff; } /* ---------- Split (image + text) ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } .split:has(> img:first-child) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .split:has(> img:last-child) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .split img { width: 100%; object-fit: cover; } /* photo stays in view while a longer text column scrolls past; a shorter text column centers against it */ .split > img { position: sticky; top: 28px; } .split > div { align-self: center; } .split .section-title { font-size: clamp(1.8rem, 3.3vw, 2.65rem); text-wrap: balance; } /* lead paragraph of an opening block */ .split .section-title + p, .intro2 .section-title + p, .intro2 > div:last-child > p:first-child { font-size: 1.14rem; line-height: 1.62; color: #2b2b2b; } /* ---------- Testimonials ---------- */ .testimonial { background: #fff; border: 1px solid var(--color-border); padding: 30px; } .testimonial p { font-size: .92rem; color: var(--color-text-soft); font-style: italic; } .testimonial .who { font-weight: 600; font-style: normal; color: var(--color-heading); margin: 0; } /* ---------- Checklist ---------- */ ul.checklist { list-style: none; margin: 20px 0; } ul.checklist li { padding-left: 30px; position: relative; margin-bottom: 12px; } ul.checklist li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; position: absolute; left: 4px; top: .62em; background: var(--brand); } /* ---------- Forms ---------- */ form.contact-form { display: grid; gap: 16px; max-width: 640px; } form.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } input, select, textarea { font-family: var(--font-body); font-size: .95rem; padding: 12px 14px; background: #f7f7f7; border: 1px solid #cfcfcf; width: 100%; } label { font-size: .82rem; font-weight: 500; color: var(--color-text-soft); } /* ---------- Brand strip ---------- */ .brand-strip { display: flex; justify-content: center; align-items: center; gap: 56px; flex-wrap: wrap; margin-top: 40px; } /* Constrain by width, not height (live uses max-width on every brand logo) so the wider SymbiosHealth lockup doesn't out-scale the sub-brand lockups beside it */ .brand-strip img { max-width: 260px; width: auto; height: auto; filter: none; } /* ---------- Newsletter band (live: color_primary section + image button) ---------- */ .newsletter { background: var(--brand); color: #fff; text-align: center; } .newsletter .eyebrow { color: #363636; } .newsletter h2 { color: #fff; } /* Newsletter prompt: real text instead of the old 420px screenshot of a form, so it stays sharp on every screen. It links to the sign-up page. */ .newsletter .signup { display: flex; width: min(520px, 100%); margin: 26px auto 0; background: #fff; border: 2px solid #1f1f1f; text-decoration: none; line-height: 1.2; } .newsletter .signup-field { flex: 1; min-width: 0; padding: 17px 18px; text-align: left; font-size: .95rem; font-weight: 500; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .newsletter .signup-btn { padding: 17px 26px; border-left: 2px solid #1f1f1f; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f1f1f; transition: background .2s, color .2s; } .newsletter .signup:hover .signup-btn, .newsletter .signup:focus-visible .signup-btn { background: #1f1f1f; color: #fff; } /* ---------- Map embed ---------- */ .map-band { padding: 0; } .map-band iframe { display: block; width: 100%; height: 350px; border: 0; } /* ---------- Footer (live: logo left; right-aligned address, socials, copyright) ---------- */ footer.site-footer { background: #fff; padding: 40px 0; } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; } .footer-logo img { max-width: 220px; height: auto; } .footer-right { text-align: right; font-size: 15px; } .footer-right p { margin-bottom: 10px; color: #050505; } .footer-right .footer-brandname { font-weight: 600; font-size: 1.05rem; color: var(--brand-deep); margin-bottom: 2px; } .footer-right a { color: #050505; } .footer-right a:hover { color: var(--brand); } .footer-right .copyright { margin: 10px 0 0; font-size: .85rem; color: var(--color-text-soft); } .social-links { display: flex; gap: 14px; margin-top: 12px; justify-content: flex-end; } .social-links a { display: inline-flex; color: var(--color-heading); } .social-links a:hover { color: var(--brand); } .social-links svg { width: 22px; height: 22px; } /* ---------- View Bio popups (live: w-popup modals) ---------- */ .view-bio { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); color: #000; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; } .view-bio:hover { color: var(--brand-deep); } .bio-modal-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 24px; } .bio-modal { position: relative; background: #fff; max-width: 640px; max-height: 85vh; overflow-y: auto; padding: 36px; } .bio-modal img { max-width: 180px; margin-bottom: 16px; } .bio-modal .bio-role { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-soft); } .bio-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--color-text-soft); } .bio-close:hover { color: var(--color-heading); } /* ---------- Utility layouts ---------- */ ul.checklist.cols-2 { columns: 2; column-gap: 48px; } ul.checklist.cols-2 li { break-inside: avoid; } @media (max-width: 600px) { ul.checklist.cols-2 { columns: 1; } } .post-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; border-top: 1px solid var(--color-border); padding-top: 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; } /* ---------- Scroll animations (live: us_animate_this afb/afl) ---------- */ .anim { opacity: 0; transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; } .anim-fb { transform: translateY(36px); } .anim-fl { transform: translateX(-42px); } .anim.anim-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .anim { opacity: 1; transform: none; transition: none; } } /* ---------- Back to top (live: .w-toplink) ---------- */ .toplink { position: fixed; right: 22px; bottom: 22px; z-index: 200; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease, visibility .3s; } .toplink svg { width: 20px; height: 20px; } .toplink:hover { color: #fff; background: var(--color-btn-dark); } .toplink.show { opacity: 1; visibility: visible; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .split, .split:has(> img:first-child), .split:has(> img:last-child) { grid-template-columns: 1fr; gap: 32px; } .split > img { position: static; } .footer-inner { grid-template-columns: 1fr; } nav.main-nav { display: none; } .menu-toggle { display: block; background: none; border: 0; font-size: 1.6rem; color: var(--color-header-text); cursor: pointer; } nav.main-nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); padding: 16px 24px; gap: 4px; align-items: flex-start; box-shadow: 0 12px 24px rgba(0,0,0,.12); z-index: 90; } nav.main-nav.open a.nav-link { padding: 10px 0; } nav.main-nav.open .dropdown { display: block; position: static; box-shadow: none; background: transparent; padding-left: 14px; min-width: 0; visibility: visible; opacity: 1; transform: none; transition: none; } header.site-header { position: relative; } .header-inner { position: relative; } } @media (max-width: 560px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } form.contact-form .row2 { grid-template-columns: 1fr; } .topbar-inner { justify-content: center; } .topbar .cta-links { margin-left: 0; } } /* ===================================================================== Brand voice components (2026-09 copy refresh from the Kirchner Marketing redesign). Coral italic accents appear only on light or dark solid backgrounds, never over photos, to keep contrast AA. ===================================================================== */ h1 em, h2 em, h3 em, .section-title em { font-style: italic; font-weight: 400; color: #bd3d39; } .hero h1 em, .hero-band h1 em, .band-photo h2 em { color: inherit; } .band-dark h2 em { color: #f58a86; } body.brand-pc h2 em, body.brand-pc h3 em { color: #3d7f12; } body.brand-physio h2 em, body.brand-physio h3 em { color: #a7228b; } body.brand-fit h2 em, body.brand-fit h3 em { color: #2f6fa3; } body.brand-aria h2 em, body.brand-aria h3 em { color: #0b7d8c; } .hero .hero-sub { font-size: 1.05rem; color: #fff; max-width: 540px; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; } .cta-row .tel-link { font-weight: 600; letter-spacing: .04em; color: inherit; } .hero .cta-row .tel-link { color: #fff; } /* trust strip under hero */ .trust-strip { border-bottom: 1px solid var(--color-border); background: #fff; padding: 22px 0; } .trust-strip .container { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 16px 32px; } .trust-strip span { font-family: var(--font-heading); font-style: italic; font-size: 1.05rem; color: #3a3a3a; } .trust-strip span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; background: var(--brand); } /* stats */ .stats { background: #fff; border-bottom: 1px solid var(--color-border); padding: 30px 0; } .stats .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stats .stat { display: flex; align-items: baseline; gap: 12px; justify-content: center; } .stats .num { font-family: var(--font-heading); font-size: 2.3rem; color: #121212; line-height: 1; } .stats .lbl { font-size: .95rem; color: #4d4c4d; max-width: 12em; line-height: 1.35; } /* two-column intro */ .intro2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .intro2 p { font-size: 1.05rem; } .pullquote { border-left: 3px solid #bd3d39; padding: 6px 0 6px 22px; margin: 26px 0 0; font-family: var(--font-heading); font-style: italic; font-size: 1.25rem; color: #2b2b2b; line-height: 1.45; } .pullquote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #555; margin-top: 10px; } /* photo band with a dark scrim so white text keeps AA contrast */ .band-photo { position: relative; background-size: cover; background-position: center; color: #fff; padding: 96px 0; } .band-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,14,10,.80) 0%, rgba(18,14,10,.60) 60%, rgba(18,14,10,.45) 100%); } .band-photo .container { position: relative; } .band-photo h2 { color: #fff; max-width: 16em; } .band-photo p { color: #fff; max-width: 38em; font-size: 1.08rem; } .band-photo .eyebrow { color: #fff; } /* dark band */ .band-dark { background: #2b2b2b; color: #e9e6e1; } .band-dark h2, .band-dark h3 { color: #fff; } .band-dark p { color: #e9e6e1; } .band-dark .eyebrow { color: #f58a86; } /* Seven Essentials */ /* Seven Essentials orbit: Symbios mark at the center, seven points on the ring, label beside each point. --R is the ring radius, --cy the ring center measured from the top of the diagram, --lw the label width. */ .orbit { --R: 230px; --cy: calc(var(--R) + 56px); --lw: 270px; position: relative; max-width: 1100px; height: calc(var(--R) * 2 + 150px); margin: 30px auto 0; text-align: left; } .orbit-ring { position: absolute; left: 50%; top: var(--cy); width: calc(var(--R) * 2); aspect-ratio: 1; border: 1px solid rgba(40,40,40,.13); border-radius: 50%; transform: translate(-50%, -50%); } .orbit-ring.inner { width: calc(var(--R) * 1.44); border-color: rgba(40,40,40,.09); } .orbit-core { position: absolute; left: 50%; top: var(--cy); width: calc(var(--R) * .82); aspect-ratio: 1; border-radius: 50%; background: #fffdf8; box-shadow: 0 14px 40px rgba(60,40,30,.07); display: grid; place-items: center; transform: translate(-50%, -50%); } .orbit-core img { width: 36%; height: auto; } .orbit-list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; } .orbit-list li { position: absolute; left: calc(50% + var(--x) * var(--R)); top: calc(var(--cy) + var(--y) * var(--R)); width: 0; height: 0; } .orbit-list li::before { content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #f15b57; box-shadow: 0 0 0 6px rgba(241,91,87,.16); } .orbit-txt { position: absolute; top: 0; width: var(--lw); transform: translateY(-50%); } .orbit-list li.r .orbit-txt { left: 32px; } .orbit-list li.l .orbit-txt { right: 32px; text-align: right; } .orbit-list li.b .orbit-txt { left: 0; top: 28px; transform: translateX(-50%); text-align: center; width: 340px; } /* diagonal points: the ring curves toward the text, so lift labels above the upper points and drop them below the lower ones */ .orbit-list li.u .orbit-txt { transform: translateY(-66%); } .orbit-list li.d .orbit-txt { transform: translateY(-34%); } .orbit-list li.u.r .orbit-txt, .orbit-list li.d.r .orbit-txt { left: 38px; } .orbit-list li.u.l .orbit-txt, .orbit-list li.d.l .orbit-txt { right: 38px; } .orbit-txt b { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #bd3d39; margin-bottom: 4px; } .orbit-txt span { display: block; font-size: 1rem; line-height: 1.5; color: #3a3a3a; } @media (max-width: 1180px) { .orbit { --R: 195px; --lw: 230px; } } /* below 980px there is no room for labels on both sides: stack the essentials as a dotted list under the mark */ @media (max-width: 979px) { .orbit { height: auto; max-width: 460px; padding-top: 128px; } .orbit-list li.u .orbit-txt, .orbit-list li.d .orbit-txt { transform: none; } .orbit-ring { display: none; } .orbit-core { top: 0; width: 104px; transform: translateX(-50%); } .orbit-list { position: relative; inset: auto; } .orbit-list li:not(:last-child)::after { content: ''; position: absolute; left: 6.5px; top: 19px; bottom: -5px; width: 1px; background: rgba(241,91,87,.35); } .orbit-list li { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 0 0 22px 36px; } .orbit-list li::before { left: 0; top: 5px; } .orbit-txt, .orbit-list li.l .orbit-txt, .orbit-list li.r .orbit-txt, .orbit-list li.b .orbit-txt { position: static; width: auto; transform: none; text-align: left; } } /* numbered steps */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; text-align: left; } .steps .step { border: 1px solid var(--color-border); background: #fff; padding: 26px 24px; } .band-dark .steps .step { background: transparent; border-color: #555; } .steps .n { font-family: var(--font-heading); font-size: 1rem; color: #bd3d39; display: block; margin-bottom: 10px; } .band-dark .steps .n { color: #f58a86; } .steps h3 { font-size: 1.3rem; margin-bottom: 8px; } .steps p { font-size: .98rem; margin: 0; } /* who it's for / what you get */ .twolist { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 96px; max-width: 1060px; margin: 48px auto 0; text-align: left; } .twolist::before { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: rgba(40,40,40,.16); } .twolist .box { background: none; border: 0; } .twolist .box h3 { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 400; line-height: 1.15; color: var(--color-heading); padding: 0 0 16px; margin: 0; border-bottom: 2px solid var(--brand-deep); } .twolist ul { list-style: none; margin: 0; padding: 0; } .twolist li { padding: 15px 0; border-bottom: 1px solid rgba(40,40,40,.13); font-size: 1.02rem; line-height: 1.5; font-weight: 500; color: #2b2b2b; } .twolist li:last-child { border-bottom: 0; } /* second column is the reader speaking ("You want..."), so it takes the serif italic voice */ /* the patient quote that closes the block */ .pullquote.closing { border-left: 0; padding: 0; margin: 60px auto 0; max-width: 31em; text-align: center; font-size: 1.6rem; line-height: 1.36; text-wrap: balance; } .pullquote.closing::before { content: ''; display: block; width: 56px; height: 2px; margin: 0 auto 30px; background: var(--brand-deep); } .pullquote.closing cite { margin-top: 18px; } /* quote cards */ .quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; text-align: left; } .quotes figure { background: #fff; border: 1px solid var(--color-border); padding: 22px; margin: 0; } .band-dark .quotes figure { background: #fffdf6; border-color: #fffdf6; } .quotes .stars { color: #8a5d00; letter-spacing: 2px; font-size: .85rem; } .quotes blockquote { font-family: var(--font-heading); font-style: italic; font-size: 1.08rem; color: #2b2b2b; margin: 10px 0 12px; line-height: 1.45; } .quotes figcaption { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #555; } /* FAQ */ .faq { max-width: 820px; margin: 30px auto 0; text-align: left; } .faq details { border-bottom: 1px solid var(--color-border); padding: 4px 0; } .faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font-size: 1.08rem; font-weight: 500; color: #1d1d1d; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: 6px; top: 14px; font-size: 1.5rem; color: #bd3d39; } .faq details[open] summary::after { content: '\2212'; } .faq details p { margin: 0 0 16px; font-size: 1rem; } /* care team */ .care-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; text-align: left; } .care-team div { background: #fff; border: 1px solid var(--color-border); padding: 16px 18px; } .care-team b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 1.1rem; color: #121212; } .care-team span { font-size: .9rem; color: #4d4c4d; } /* care path list */ .care-path { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--color-border); text-align: left; } .care-path li a { display: flex; align-items: center; gap: 18px; padding: 18px 6px; border-bottom: 1px solid var(--color-border); color: #121212; font-size: 1.2rem; } .care-path li a:hover { background: #fff; } .care-path .idx { font-family: var(--font-heading); color: #bd3d39; width: 2em; } .care-path .go { margin-left: auto; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #4d4c4d; } /* service summaries on the services hub */ .svc { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; padding: 48px 0; border-top: 1px solid var(--color-border); } .svc:first-child { border-top: 0; } .svc img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .svc .brandtag { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #555; } .svc h3 { font-size: 1.9rem; margin: 6px 0 10px; } .align-logo { max-width: 300px; width: 100%; margin: 0 0 30px; } /* program intro: one centered column (logo, heading, description, quote) */ .program-intro { max-width: 860px; text-align: center; } .program-intro .align-logo { max-width: 340px; margin: 0 auto 40px; } .program-intro .section-title { max-width: 17em; margin: 0 auto .7em; text-wrap: balance; } .program-intro p { max-width: 37em; margin-left: auto; margin-right: auto; } .program-intro p.lead { font-size: 1.22rem; line-height: 1.6; color: #2b2b2b; } .program-intro .pullquote.closing { font-size: 1.42rem; margin-top: 46px; max-width: 27em; } @media (max-width: 1100px) { .quotes, .care-team { grid-template-columns: repeat(2, 1fr); } .stats .container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .intro2, .twolist, .svc { grid-template-columns: 1fr; gap: 28px; } .twolist { row-gap: 46px; margin-top: 36px; } .twolist::before { display: none; } .twolist .box h3 { font-size: 1.45rem; } .pullquote.closing { font-size: 1.32rem; margin-top: 48px; } .steps { grid-template-columns: 1fr; } } @media (max-width: 560px) { .quotes, .care-team, .stats .container { grid-template-columns: 1fr; } .stats .stat { justify-content: flex-start; } .band-photo { padding: 64px 0; } } .band-dark a:not(.btn), .band-photo a:not(.btn) { color: #fff; text-decoration: none; font-weight: 600; text-underline-offset: 3px; } .band-dark a:not(.btn):hover, .band-photo a:not(.btn):hover { text-decoration: underline; } .band-dark .steps a:not(.btn) { color: #f8b4b1; } ul.xlist { list-style: none; margin: 14px 0 18px; padding: 0; } ul.xlist li { position: relative; padding: 8px 0 8px 28px; border-bottom: 1px solid #eee; } ul.xlist li::before { content: '\2715'; position: absolute; left: 2px; top: 8px; color: #bd3d39; font-weight: 700; } .band-photo ul.onphoto { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px; max-width: 900px; } .band-photo ul.onphoto li { color: #fff; padding-left: 26px; position: relative; font-size: 1.02rem; } .band-photo ul.onphoto li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; position: absolute; left: 4px; top: .62em; background: #fff; } .mini3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 30px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); text-align: left; } .mini3 div { padding: 22px 24px; border-left: 1px solid var(--color-border); } .mini3 div:first-child { border-left: 0; } .mini3 b { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #bd3d39; margin-bottom: 6px; } .mini3 span { font-family: var(--font-heading); font-size: 1.2rem; color: #121212; } @media (max-width: 900px) { .band-photo ul.onphoto, .mini3 { grid-template-columns: 1fr; } .mini3 div { border-left: 0; border-top: 1px solid var(--color-border); } } a[href^="tel:"] { white-space: nowrap; } .band-photo h2 { margin-bottom: .45em; } .band-photo .cta-row { margin-top: 22px; } /* heading-level look-alikes: keep the visual style when a heading's level is corrected for document order */ .h3 { font-family: var(--font-heading); color: var(--color-heading); line-height: 1.1; } .h3 { font-size: 1.75rem; font-weight: 400; color: var(--brand-deep); } .bg-brand .h3 { color: #fff; } .h3 em { font-style: italic; font-weight: 400; color: #bd3d39; } body.brand-pc .h3 em { color: #3d7f12; } body.brand-physio .h3 em { color: #a7228b; } body.brand-fit .h3 em { color: #2f6fa3; } body.brand-aria .h3 em { color: #0b7d8c; } .band-dark .h3 { color: #fff; } .steps .h3 { font-size: 1.3rem; margin-bottom: 8px; } .svc .h3 { font-size: 1.9rem; margin: 6px 0 10px; } .h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; letter-spacing: .07em; line-height: 1.2; color: var(--brand-deep); } .bg-brand .h4 { color: #fff; } .iconbox .h4 { margin-bottom: .6em; } .card .h4 { font-size: 1.12rem; } /* inline links are underlined so they do not rely on color alone (WCAG 1.4.1) */ p a:not(.btn):not(.tel-link), li a:not(.btn), .faq a, .footer-right .copyright a { text-decoration: none; font-weight: 600; text-underline-offset: 2px; } p a:not(.btn):not(.tel-link):hover, li a:not(.btn):hover, .faq a:hover, .footer-right .copyright a:hover { text-decoration: underline; } .care-path li a, .door li a, nav a, .dropdown a { text-decoration: none; } .care-path li a, .door li a, nav a, .dropdown a, .chips a, .pager a, .crumbs a, .post-nav a { font-weight: inherit; } main { display: block; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #121212; color: #fff; padding: 12px 18px; font-weight: 600; } .skip-link:focus { left: 12px; top: 12px; color: #fff; } /* ---------- Blog: listings, topic chips, pagination, article pages ---------- */ .blog-list { padding-top: 48px; } .blog-intro { max-width: 760px; font-size: 1.05rem; color: var(--color-text-soft); margin-bottom: 22px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .chips a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; font-size: .82rem; font-weight: 500; line-height: 1.3; color: var(--color-heading); text-decoration: none; } .chips a span { font-size: .72rem; color: var(--color-text-soft); } .chips a:hover { border-color: var(--brand-deep); color: var(--brand-deep); } .chips a.on { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; } .chips a.on span { color: #fff; } .post-card img { aspect-ratio: 1 / 1; object-fit: cover; } .post-card .h4 { font-family: var(--font-heading); font-weight: 600; font-size: 1.22rem; letter-spacing: 0; line-height: 1.25; } .post-card .h4 a { color: var(--color-heading); } .post-card .h4 a:hover { color: var(--brand-deep); } .post-card { transition: box-shadow .25s ease, transform .25s ease; } .post-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.09); transform: translateY(-3px); } .pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--color-border); } .pager-step { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; } .pager-step.off { color: #767676; } .pager-nums { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .pager-nums a, .pager-nums span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: .88rem; font-weight: 500; color: var(--color-heading); border: 1px solid transparent; } .pager-nums a:hover { border-color: var(--color-border); } .pager-nums .on { background: var(--brand-deep); color: #fff; } .post-head { padding: 44px 0 48px; } .post-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; } .post-head h1 { font-size: clamp(1.9rem, 3.5vw, 2.85rem); font-weight: 600; line-height: 1.14; text-wrap: balance; } .post-hero { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: 0 18px 44px rgba(60,40,30,.14); } .crumbs { font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; } .crumbs a { text-decoration: none; } .crumbs span { margin: 0 9px; color: #a8a8a8; } .post-meta { margin: 18px 0 0; font-size: .9rem; color: var(--color-text-soft); } .post-meta span { margin: 0 9px; color: #a8a8a8; } .post-body { max-width: 780px; padding-top: 52px; font-size: 1.06rem; line-height: 1.72; } .post-body > :first-child { margin-top: 0; } .post-body p { margin-bottom: 1.15em; } .post-body h2 { font-size: 1.7rem; font-weight: 600; line-height: 1.2; margin: 1.7em 0 .55em; } .post-body h3 { font-size: 1.32rem; font-weight: 600; line-height: 1.25; color: var(--color-heading); margin: 1.5em 0 .45em; } .post-body h4 { font-size: 1.02rem; letter-spacing: .04em; margin: 1.4em 0 .4em; } .post-body ul, .post-body ol { margin: 0 0 1.2em 1.35em; } .post-body li { margin-bottom: .45em; padding-left: .2em; } .post-body li > ul, .post-body li > ol { margin-top: .45em; margin-bottom: .2em; } .post-body img { margin: 1.6em auto; } .post-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand); font-family: var(--font-heading); font-size: 1.22rem; font-style: italic; line-height: 1.5; color: var(--color-heading); } .post-body blockquote p:last-child { margin-bottom: 0; } .post-body a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; font-weight: inherit; } .post-body p a:not(.btn), .post-body li a:not(.btn), .post-body blockquote a { text-decoration: underline; font-weight: inherit; } .post-body sup, .post-body sub { font-size: .72em; line-height: 0; } .post-body .video { position: relative; aspect-ratio: 16 / 9; margin: 1.8em 0; background: #111; } .post-body .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .post-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.6em 0; } .post-gallery img { margin: 0; width: 100%; } .post-foot { max-width: 780px; padding-bottom: 72px; } .post-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-top: 44px; padding: 28px 30px; background: var(--color-bg); border-left: 4px solid var(--brand); } .post-cta > div:first-child { flex: 1 1 280px; } .post-cta p { margin: 0; color: var(--color-text-soft); } .post-cta .post-cta-h { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 600; line-height: 1.2; color: var(--color-heading); margin-bottom: 4px; } .post-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; } .post-cta-actions .tel-link { font-size: .9rem; font-weight: 600; } .post .post-nav { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; line-height: 1.35; } .post .post-nav a { max-width: 46%; text-decoration: none; color: var(--color-heading); } .post .post-nav a:hover { color: var(--brand-deep); } .post .post-nav a span { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-deep); margin-bottom: 4px; } .post .post-nav a.r { text-align: right; margin-left: auto; } .post-related .grid { margin-top: 28px; } @media (max-width: 900px) { .post-head-grid { grid-template-columns: 1fr; gap: 28px; } .post-hero { max-width: 420px; } .post-body { padding-top: 36px; } .blog-list .grid-3, .post-related .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .blog-list .grid-3, .post-related .grid-3 { grid-template-columns: 1fr; } /* 22 topics would fill the first screen on a phone: one swipeable row instead */ .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 8px; padding: 2px 20px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { display: none; } .chips a { flex: 0 0 auto; } .post .post-nav { flex-direction: column; } .post .post-nav a { max-width: none; } .post .post-nav a.r { text-align: left; margin-left: 0; } .post-cta-actions { align-items: flex-start; } } /* speed pass */ .hero { background-color: #3d362f; } /* shown for the instant before the first hero photo paints */ .band-photo { background-color: #2f2a25; } /* photo bands load their picture when scrolled near */ /* A photo band that dissolves into the dark band below it, so the two read as one block */ .band-photo.fade-dark { padding-bottom: 170px; background-color: #2b2b2b; } .band-photo.fade-dark::before { background: linear-gradient(180deg, rgba(43,43,43,0) 0%, rgba(43,43,43,0) 38%, rgba(43,43,43,.82) 78%, #2b2b2b 100%), linear-gradient(90deg, rgba(18,14,10,.80) 0%, rgba(18,14,10,.60) 60%, rgba(18,14,10,.45) 100%); } .band-dark.after-fade { padding-top: 8px; } @media (max-width: 700px) { .band-photo.fade-dark { padding-bottom: 120px; } } /* First-visit block: intro on the left, the three steps as a ruled list on the right */ .visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; } .visit-intro .section-title { margin-bottom: .5em; } .visit-intro p { font-size: 1.08rem; max-width: 30em; } .visit-intro .cta-row { margin-top: 26px; } .visit-steps { list-style: none; margin: 0; padding: 0; } .visit-steps li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 6px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.17); } .visit-steps li:first-child { padding-top: 6px; border-top: 0; } .visit-num { font-family: var(--font-heading); font-size: 3.1rem; line-height: .95; color: #f58a86; } .visit-label { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #b8b1a8; margin-bottom: 7px; } .visit-steps h3 { font-size: 1.5rem; font-weight: 400; color: #fff; margin-bottom: 6px; } .visit-steps p { margin: 0; color: #e9e6e1; } .band-dark .visit-steps a { color: #f8b4b1; } @media (max-width: 900px) { .visit { grid-template-columns: 1fr; gap: 36px; } } /* Three statements without boxes or numbers: a short brand rule above each */ .steps.plain { gap: 44px; } .steps.plain .step { background: transparent; border: 0; border-top: 2px solid var(--brand); padding: 20px 0 0; } /* A dark band that continues the dark band above it: no gap, just a hairline where it starts */ .band-dark.joined { padding-top: 0; } .band-dark.joined > .container { border-top: 1px solid rgba(255,255,255,.17); padding-top: 68px; } .band-dark .steps.plain .step { border-top-color: #f58a86; } .band-dark .steps.plain h3 { color: #fff; } /* Numbered steps as a ruled list (replaces the three-bordered-boxes pattern on inner pages). Light backgrounds by default; .band-dark keeps the light-on-dark colors set for .visit-steps above. */ .visit-steps.steplist { max-width: 860px; margin: 34px auto 0; text-align: left; } .visit-steps.steplist li { border-top-color: var(--color-border); } .visit-steps.steplist h3 { color: var(--color-heading); } .visit-steps.steplist p { color: var(--color-text-soft); } .visit-steps.steplist .visit-num { color: #bd3d39; } .band-dark .visit-steps.steplist li { border-top-color: rgba(255,255,255,.17); } .band-dark .visit-steps.steplist h3 { color: #fff; } .band-dark .visit-steps.steplist p { color: #e9e6e1; } .band-dark .visit-steps.steplist .visit-num { color: #f58a86; } /* left-aligned sections (SymbiosAlign "Your path forward") keep the list flush with the heading */ .container:not(.center) > .visit-steps.steplist { margin-left: 0; } .visit-steps.steplist + .cta-row { margin-top: 28px; } /* six unboxed statements: two rows of three need a row gap as well */ .steps.plain.six { row-gap: 40px; } /* Inner-page pass, 2026-10-06 */ .care-path.plain li a { padding-left: 2px; } /* practices are not steps: no index numbers */ .grid.lead-team { display: flex; flex-wrap: wrap; justify-content: center; } /* 7 leaders: 4 across, remaining 3 centered */ .grid.lead-team > .card { flex: 0 1 calc(25% - 21px); min-width: 230px; } @media (max-width: 600px) { .grid.lead-team > .card { flex-basis: 100%; } } .care-team.flow { display: flex; flex-wrap: wrap; justify-content: center; } /* an uneven last row centers instead of leaving a hole */ .care-team.flow > div { flex: 0 1 calc(25% - 11px); min-width: 220px; } @media (max-width: 600px) { .care-team.flow > div { flex-basis: 100%; } } /* ActiveCampaign form (request-an-appointment): appearance only. Their embed injects its own