/* ══════════════════════════════════════════════════════════════════ THEME — every colour and typeface on the site is defined here. Nothing below this block contains a raw colour value. HOW IT'S ORGANISED 1. Core palette the seven colours everything derives from 2. Derived colours variants needed for contrast in specific places 3. Top bar the coral header 4. Dark sections About us and Where we're licensed 5. Editor highlights the yellow fill-in markers (delete when done) 6. Type CHANGING THE LOOK · Whole site: edit the seven core colours in section 1, then check the derived colours in section 2 still read against them. · One region: edit sections 3 or 4 on their own. · Alternative palettes are listed after this block. CONTRAST — check any colour you change at webaim.org/resources/contrastchecker. Aim for 4.5:1 minimum on text, 7:1 where you can. Current values all clear 4.5:1. ══════════════════════════════════════════════════════════════════ */ :root{ /* ── 1 · CORE PALETTE — Linen & Coral ──────────────────────── */ --paper:#FAFAFF; /* page background — wheat */ --paper-deep:#D0E1D4; /* bands — LIGHTER than the page. Going darker than wheat drops moss links to 4.1:1. */ --ink:#1A3A3A; /* body text, and the dark section ground */ --moss:#294D4A; /* primary buttons and links */ --marigold:#835257; /* coral — accents, labels, secondary buttons */ --line:#C0D3C6; /* borders and dividers */ --quiet:#45605E; /* secondary text */ /* ── 2 · DERIVED — variants needed for contrast ────────────── */ --card:#FFFFFF; /* raised cards inside the shaded bands */ --card-line:#C0D3C6; --card-soft:#EDF3E4; /* Approach cards — lighter than the page, so they lift rather than recede */ --card-soft-line:#C0D3C6; --marigold-deep:#5B3438; /* hover on coral-filled buttons */ --marigold-on-dark:#E6BEAE;/* coral is 2.2:1 on --ink; this is 4.6:1 */ --alert:#8E2318; /* crisis blocks — deliberately redder than --marigold so an emergency never reads as brand accent */ --alert-bg:#F6E0D6; --hero-bg:#FAFAFF; /* hero band — currently the same as --paper, so the hero reads continuous with the page. Change it here to band the hero separately. */ --hero-scrim:250,250,255; /* RGB of --hero-bg, for the photo veil */ --shadow:rgba(26,58,58,.06); --white:#FFFFFF; --paper-rgb:250,250,255; /* RGB of --paper, for translucent overlays */ /* ── 3 · TOP BAR ───────────────────────────────────────────── */ --bar-bg:#32213A; /* deep aubergine — independent of --marigold */ --bar-text:#F9EDE6; /* 5.9:1 on the bar */ --bar-text-hover:#FFFFFF; --bar-accent:#E6BEAE; /* the + in the wordmark — 8.7:1 on the bar */ --bar-edge:rgba(0,0,0,.14); /* ── 4 · DARK SECTIONS ─────────────────────────────────────── */ --dark-bg:#294D4A; --dark-head:#EFF4EA; /* 11.9:1 */ --dark-body:#C9DCD4; /* 8.9:1 */ --dark-quiet:#AFC6BE; /* 7.2:1 */ --dark-label:#A6BDB4; /* 6.2:1 — table headers */ --dark-card:#35605C; --dark-card-line:rgba(239,244,234,.26); --dark-rule:rgba(239,244,234,.22); --dark-btn-hover:#F0D2C2; --moss-on-dark:#A9D8B8; /* moss is 2.4:1 on --ink; this is 4.7:1 */ /* ── 5 · EDITOR HIGHLIGHTS — remove once the copy is final ─── */ --flag-bg:#FFF0B8; --flag-text:#5A4A12; --flag-bg-dark:#4A4326; --flag-text-dark:#F6E9B8; /* ── 6 · TYPE ──────────────────────────────────────────────── */ --display:'Fraunces',Georgia,serif; --body:'Karla',system-ui,-apple-system,sans-serif; /* --type-root scales EVERYTHING at once. Raise to 18px or 19px to enlarge the whole site. The three below override single levels. */ --type-root:17px; --type-h1:clamp(2.4rem,6vw,4rem); --type-h2:clamp(1.7rem,3.6vw,2.5rem); --type-h3:1.2rem; --measure:64ch; } /* ─── ALTERNATIVE PALETTES ──────────────────────────────────────── Each set is a drop-in replacement for the seven colour lines above. A · LIMESTONE & MOSS — the original warm cream --paper:#F7F5F0; --paper-deep:#EFEBE1; --ink:#23282A; --moss:#3F5A4E; --marigold:#9D4232; --line:#DBD5C8; --quiet:#63696A; (with --card:#FCFAF6; --card-line:#D3CCBB; --alert:#B5442E; --alert-bg:#F6EDE9) B · RIVERSTONE — cool, quiet, more clinical than warm --paper:#F5F6F7; --paper-deep:#E7EAEC; --ink:#1E2429; --moss:#2F4858; --marigold:#B07D4A; --line:#D2D7DB; --quiet:#5E676D; C · FERN & INK — green-forward, more organic --paper:#F4F6F1; --paper-deep:#E6EBE0; --ink:#1F2620; --moss:#3A5133; --marigold:#B8892B; --line:#D4DACC; --quiet:#5C6459; D · HARBOR — blue-grey with a soft warm accent --paper:#F6F7F9; --paper-deep:#E8EBF0; --ink:#1C222B; --moss:#33455E; --marigold:#C0785E; --line:#D3D8E0; --quiet:#5D656F; E · DUSK — the moodiest of the four, still light enough to read --paper:#F6F4F5; --paper-deep:#EBE6E9; --ink:#231F26; --moss:#4A3B57; --marigold:#B08339; --line:#D9D2D8; --quiet:#655E69; Contrast note: --ink on --paper and --paper-deep clears WCAG AA in all five sets. If you invent your own, check it at webaim.org/ resources/contrastchecker before publishing — low-contrast grey text is one of the most common accessibility failures on the web, and it hits exactly the clients you're building this for. ────────────────────────────────────────────────────────────────── */ /* ─── ALTERNATIVE TYPE PAIRINGS ─────────────────────────────────── Replace BOTH the two variables above AND the Google Fonts . 2 · NEWSREADER + INTER TIGHT — quieter, more editorial --display:'Newsreader',Georgia,serif; --body:'Inter Tight',system-ui,sans-serif; 3 · INSTRUMENT SERIF + WORK SANS — sharper, more contemporary --display:'Instrument Serif',Georgia,serif; --body:'Work Sans',system-ui,sans-serif; 4 · FRAUNCES + ATKINSON HYPERLEGIBLE — keeps your display face and swaps the body text for a typeface designed at the Braille Institute to maximise letter distinguishability for low vision. Worth a serious look given who reads this site. It sets slightly wider, so check the card text doesn't run long. --display:'Fraunces',Georgia,serif; --body:'Atkinson Hyperlegible',system-ui,sans-serif; ────────────────────────────────────────────────────────────────── */ *{box-sizing:border-box} html{scroll-behavior:smooth;font-size:var(--type-root)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-weight:400; font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.15;margin:0 0 .5em} h1{font-size:var(--type-h1);letter-spacing:-.02em} h2{font-size:var(--type-h2);letter-spacing:-.01em} h3{font-size:var(--type-h3);font-weight:550} p{margin:0 0 1.1em;max-width:var(--measure)} a{color:var(--moss);text-underline-offset:3px;text-decoration-thickness:1px} a:hover{color:var(--marigold)} :focus-visible{outline:2.5px solid var(--marigold);outline-offset:3px;border-radius:2px} .tick{color:var(--marigold)} .quiet{color:var(--quiet);font-size:.95rem} .eyebrow{ font-family:var(--body);font-size:.72rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--marigold); margin:0 0 14px; } /* highlighted fill-in fields — delete the class when you fill each one */ .placeholder{background:var(--flag-bg);padding:1px 5px;border-radius:3px;font-weight:500;color:var(--flag-text)} /* ── layout ─────────────────────────────────────────── */ .wrap{max-width:1000px;margin:0 auto;padding:0 26px} section{padding:76px 0;border-top:0} .section-inner{max-width:1000px;margin:0 auto;padding:0 26px} /* ── nav ────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════ TOP BAR — coral. Everything inside it flips to light, because ink, moss and the gold logo all fail contrast against coral (1.1:1 to 2.2:1). To go back to a pale bar, restore background:rgba(230,235,224,.92) and delete the block of nav overrides below it. ══════════════════════════════════════════════════════ */ header.nav{ position:sticky;top:0;z-index:50; background:var(--bar-bg); border-bottom:1px solid var(--bar-edge); } header.nav .wordmark{color:var(--white)} header.nav .wordmark em{color:var(--bar-accent)} header.nav .brand:hover .wordmark{color:var(--bar-text-hover)} header.nav .nav-links a{color:var(--bar-text)} header.nav .nav-links a:hover{color:var(--bar-text-hover)} header.nav .nav-links a[aria-current="page"]{color:var(--bar-text-hover);text-decoration:underline;text-underline-offset:5px} /* Moss and coral are almost identical in luminance (1.07:1), so the button's edge would vanish against the bar. The ring restores the shape — remove it and this reads as floating text, not a button. */ .nav .btn-portal{ background:var(--moss);color:var(--bar-text); box-shadow:0 0 0 1.5px var(--bar-text); } .nav .btn-portal:hover{background:var(--ink);color:var(--white);box-shadow:0 0 0 1.5px var(--white)} @media(max-width:720px){ .nav-links{border-top-color:rgba(255,255,255,.3)} /* nav divider on mobile */ } .nav-inner{max-width:1000px;margin:0 auto;padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px} .wordmark{font-family:var(--display);font-size:1.12rem;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap} .wordmark em{color:var(--marigold);font-style:normal} .nav-links{display:flex;gap:22px;flex-wrap:wrap} .nav-links a{font-size:.86rem;color:var(--quiet);text-decoration:none;font-weight:500} .nav-links a:hover{color:var(--moss)} @media(max-width:720px){.nav-links{display:none}} /* ── hero ───────────────────────────────────────────── */ .hero{padding:96px 0 60px} .hero h1{max-width:15ch} .hero h1 .softer{color:var(--moss)} .hero-note{font-size:1.16rem;color:var(--quiet);max-width:52ch;margin-top:18px} .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px} .btn{ display:inline-block;padding:13px 24px;border-radius:999px; font-size:.92rem;font-weight:600;text-decoration:none; transition:transform .15s ease,background .15s ease; } .btn-solid{background:var(--moss);color:var(--paper)} .btn-solid:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)} .btn-ghost{background:var(--marigold);color:var(--bar-text);border:none} .btn-ghost:hover{background:var(--marigold-deep);color:var(--white);transform:translateY(-1px)} /* ── the sojourn path (signature element) ───────────── */ .waypoint{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0} .waypoint svg{width:44px;height:66px;opacity:.85} .waypoint svg{color:var(--marigold)} .waypoint svg path{stroke:var(--marigold)} .waypoint .mark{ font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; color:var(--quiet);font-weight:600; } /* ── cards / grids ──────────────────────────────────── */ .col-2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:28px} .col-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px} @media(max-width:820px){.col-2,.col-3{grid-template-columns:1fr}} .col-card{ background:var(--card-soft);border:1px solid var(--card-soft-line); border-radius:14px;padding:26px 24px; box-shadow:0 1px 2px var(--shadow); } /* icon and heading share a centre axis; body text stays left-aligned because centred paragraphs are harder to track line-to-line. To centre the body text too, add: .col-card p{text-align:center} */ .col-card h3{text-align:center} .col-card p{margin-bottom:.8em} .col-card p:last-child{margin-bottom:0} .band{background:var(--paper-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* ══════════════════════════════════════════════════════ SECTION BACKGROUND IMAGES Add class="section-bg" to any
and set the image inline. The scrim keeps the text readable over it:
To make the photo show through more, lower the last number in --bg-scrim (0 = no scrim, 1 = solid): style="--bg-image:url('/assets/who-bg.jpg'); --bg-scrim:rgba(230,235,224,.75)" Always check contrast after — text over photos is where readability quietly dies. ══════════════════════════════════════════════════════ */ .section-bg{position:relative;isolation:isolate} .section-bg::before{ content:"";position:absolute;inset:0;z-index:-2; background-image:var(--bg-image); background-size:cover;background-position:center; } .section-bg::after{ content:"";position:absolute;inset:0;z-index:-1; background:var(--bg-scrim,rgba(var(--paper-rgb),.92)); } /* ══════════════════════════════════════════════════════ ABOUT — reversed out: dark ground, light type. The coral eyebrow drops to 2.2:1 on this ground, so it switches to --marigold-on-dark here. Cards lift one step and carry a hairline, because a fill-only step of 1.2:1 would leave their edges invisible. ══════════════════════════════════════════════════════ */ .section-dark{background:var(--dark-bg);color:var(--dark-head)} .section-dark h2, .section-dark h3{color:var(--dark-head)} .section-dark p{color:var(--dark-body)} .section-dark .quiet{color:var(--dark-quiet)} .section-dark .eyebrow, .section-dark .tick{color:var(--marigold-on-dark)} .section-dark em{color:var(--dark-head)} .section-dark .col-card{ background:var(--dark-card); border-color:var(--dark-card-line); } .section-dark .col-card h3{color:var(--dark-head)} .section-dark .col-card p{color:var(--dark-body)} .section-dark .placeholder{background:var(--flag-bg-dark);color:var(--flag-text-dark)} .section-dark .btn-ghost{background:var(--marigold-on-dark);color:var(--ink)} .section-dark .btn-ghost:hover{background:var(--dark-btn-hover);color:var(--ink)} .section-dark th{color:var(--dark-label)} .section-dark th, .section-dark td{border-bottom-color:var(--dark-rule)} .section-dark .notice{ background:var(--dark-card); border-left-color:var(--marigold-on-dark); } .section-dark strong{color:var(--dark-head)} .section-dark a{color:var(--marigold-on-dark)} .section-dark .ico{stroke:var(--marigold-on-dark);color:var(--marigold-on-dark)} .section-dark .res-group > summary h2{border-bottom-color:var(--marigold-on-dark)} .section-dark .res-list li{border-bottom-color:var(--dark-rule)} .section-dark .res-list .name{color:var(--dark-head)} .section-dark .res-list .desc{color:var(--dark-body)} .section-dark .res-list .tag{color:var(--marigold-on-dark)} /* Filled buttons carry their own background, so on a dark ground it's the button's EDGE that disappears — moss sits at 2.4:1 and coral at 2.2:1 against --ink. Both lift to lighter variants here, with dark labels. */ .section-dark .btn-solid, .section-dark .spwidget-button{background:var(--moss-on-dark);color:var(--ink)} .section-dark .btn-solid:hover, .section-dark .spwidget-button:hover{background:var(--dark-head);color:var(--ink)} .section-dark .spwidget-button.alt{background:var(--marigold-on-dark);color:var(--ink)} .section-dark .spwidget-button.alt:hover{background:var(--dark-btn-hover);color:var(--ink)} /* The crisis block stays a light box on the dark ground — that contrast is the point. Its text has to be pulled back to dark. */ .section-dark .crisis{color:var(--ink)} .section-dark .crisis h3, .section-dark .crisis p, .section-dark .crisis strong{color:var(--ink)} .section-dark .crisis .quiet{color:var(--quiet)} /* ══════════════════════════════════════════════════════ IMAGE PANELS — two shapes for adding photos These use CSS background-image rather than . That matters: if the file is missing you get the fallback colour, not a broken-image icon. Add photos whenever you're ready and nothing looks wrong in the meantime. 1 · SPLIT PANEL — text one side, photo the other

Label

Heading

Body copy.

Add class="flip" to put the photo on the left instead. On phones it stacks: text first, photo below. 2 · IMAGE BAND — full-width photo with a line over it

One sentence.

A supporting line.

The dark veil over the photo is --band-scrim. Raise the last number toward 1 if your photo is busy or pale: style="--panel-img:url('...'); --band-scrim:rgba(0,0,0,.7)" PHOTOS: 2000px wide is plenty. Compress at squoosh.app to under 300KB each. Lowercase filenames, no spaces — servers treat Photo.JPG and photo.jpg as different files. ══════════════════════════════════════════════════════ */ .split{ display:grid;grid-template-columns:1fr 1fr; align-items:stretch;min-height:460px; } .split-text{ display:flex;flex-direction:column;justify-content:center; padding:56px 44px; } .split-text > *:last-child{margin-bottom:0} .split-img{ background-color:var(--paper-deep); background-image:var(--panel-img); background-size:cover;background-position:center; min-height:100%; } .split.flip .split-img{order:-1} /* ── photo panel using a real ────────────────────── Preferred over .split-img: an carries alt text, gets indexed by image search, and lazy-loads. Use object-position to keep a face in frame when the panel crops. ──────────────────────────────────────────────────────── */ .split-photo{ background-color:var(--paper-deep); overflow:hidden; min-height:100%; } .split-photo img{ display:block;width:100%;height:100%; object-fit:cover;object-position:center 28%; } @media(max-width:820px){ .split-photo{min-height:0;order:0!important} .split-photo img{height:auto;aspect-ratio:4/3} } @media(max-width:820px){ .split{grid-template-columns:1fr;min-height:0} .split-text{padding:40px 26px} .split-img{min-height:260px;order:0!important} } .image-band{ position:relative;isolation:isolate; display:flex;align-items:center;justify-content:center; text-align:center;min-height:400px; background-color:var(--dark-bg); background-image:var(--panel-img); background-size:cover;background-position:center; } .image-band::before{ content:"";position:absolute;inset:0;z-index:-1; background:var(--band-scrim,rgba(20,44,42,.62)); } .band-inner{max-width:56ch;padding:64px 26px} .band-inner h2{color:#FFFFFF;margin-bottom:.5em} .band-inner p{color:#E4EDE6;margin:0 auto;font-size:1.05rem} @media(max-width:820px){.image-band{min-height:320px}.band-inner{padding:48px 22px}} /* ══════════════════════════════════════════════════════ SWAPPED CARDS Approach sits in a dark section but takes LIGHT cards; Who we see sits on the light page but takes DARK cards. Both override the defaults, so the id selectors here are deliberate — they need to outrank .section-dark. ══════════════════════════════════════════════════════ */ /* Cards size to their own content instead of stretching to match the tallest in the row — otherwise short cards trail dead space below. */ #about .col-2{align-items:start} #approach .col-card{ background:var(--card); border-color:var(--card-line); } #approach .col-card h3{color:var(--ink)} #approach .col-card p{color:var(--quiet)} #approach .col-card .ico{stroke:var(--marigold);color:var(--marigold)} #who .cards-tinted .col-card{ background:var(--dark-card); border-color:rgba(239,244,234,.20); } #who .cards-tinted .col-card h3{color:var(--dark-head)} #who .cards-tinted .col-card p{color:var(--dark-body)} #who .cards-tinted .col-card .ico{stroke:#F0D2C2;color:#F0D2C2} ul.plain{list-style:none;padding:0;margin:0 0 1.1em;max-width:var(--measure)} ul.plain li{padding:5px 0 5px 22px;position:relative} ul.plain li::before{content:"";position:absolute;left:4px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--marigold)} .section-dark ul.plain li::before{background:var(--marigold-on-dark)} /* ── expandable notice ─────────────────────────────── */ .notice-toggle{padding-top:20px;padding-bottom:20px} .notice-toggle > summary{list-style:none;cursor:pointer;display:block} .notice-toggle > summary::-webkit-details-marker{display:none} .notice-toggle > summary:focus-visible{outline:2.5px solid var(--marigold);outline-offset:5px;border-radius:4px} .notice-toggle .lede-line{margin-bottom:10px} .notice-toggle .more-link{ display:inline-flex;align-items:center;gap:7px; font-size:.86rem;font-weight:600;color:var(--moss); } .notice-toggle .more-link::after{content:"\25BE";font-size:.7rem} .notice-toggle[open] .more-link::after{content:"\25B4"} .notice-toggle[open] .more-link{margin-bottom:4px} .notice-toggle .notice-body{margin-top:16px} .notice-toggle .notice-body p:last-child{margin-bottom:0} .section-dark .notice-toggle .more-link{color:var(--marigold-on-dark)} /* ── card icons ─────────────────────────────────────── */ .ico{ display:block;width:30px;height:30px;margin:0 auto 12px; stroke:var(--marigold);color:var(--marigold);stroke-width:1.6;fill:none; stroke-linecap:round;stroke-linejoin:round; } /* ── tinted cards (Who we see) ──────────────────────── */ .cards-tinted .col-card{ background:var(--card); border-color:var(--card-line); box-shadow:0 1px 2px var(--shadow); } /* ── hero photo ─────────────────────────────────────── */ .hero-media{ position:relative; background:var(--hero-bg); overflow:hidden; } .hero-img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 60%; z-index:0; } .hero-scrim{ position:absolute;inset:0;z-index:1; background:linear-gradient(100deg, rgba(var(--hero-scrim),.97) 0%, rgba(var(--hero-scrim),.93) 38%, rgba(var(--hero-scrim),.62) 70%, rgba(var(--hero-scrim),.38) 100%); } .hero-media .hero{position:relative;z-index:2} @media(max-width:820px){ .hero-scrim{background:linear-gradient(to bottom, rgba(var(--hero-scrim),.95) 0%, rgba(var(--hero-scrim),.90) 60%, rgba(var(--hero-scrim),.80) 100%)} .hero-img{object-position:center center} } /* ── logo in nav ────────────────────────────────────── */ .brand{display:flex;align-items:center;gap:11px;text-decoration:none} .brand:hover .wordmark{color:var(--moss)} .logo-mark{height:40px;width:auto;display:block} @media(max-width:520px){.logo-mark{height:32px}} .footer-logo{height:120px;width:auto;display:block;margin:0 0 22px;opacity:.95} /* ── expandable clinician cards ─────────────────────── */ .clinician{ background:var(--card);border:1px solid var(--card-line);border-radius:14px; padding:26px 24px;box-shadow:0 1px 2px var(--shadow); } .clinician summary{ list-style:none;cursor:pointer;display:block; } .clinician summary::-webkit-details-marker{display:none} .clinician summary:focus-visible{outline:2.5px solid var(--marigold);outline-offset:6px;border-radius:6px} .clinician h3{margin-bottom:.35em} .clinician .role{font-weight:600;font-size:.92rem;margin-bottom:.7em} .supervision-note{ margin-top:20px;padding-top:16px; border-top:1px solid var(--line); font-size:.88rem;color:var(--quiet); } .section-dark .supervision-note{border-top-color:var(--dark-rule);color:var(--dark-quiet)} .clinician .pronouns{ font-size:.82rem;letter-spacing:.06em;color:var(--quiet); margin:-.2em 0 .6em;font-weight:500; } .section-dark .supervision-note{ margin-top:20px;padding-top:16px; border-top:1px solid var(--line); font-size:.88rem;color:var(--quiet); } .section-dark .supervision-note{border-top-color:var(--dark-rule);color:var(--dark-quiet)} .clinician .pronouns{color:var(--dark-quiet)} .disclose{ display:inline-flex;align-items:center;gap:7px; margin-top:12px;font-size:.86rem;font-weight:600;color:var(--moss); } .disclose::after{content:"\25BE";font-size:.7rem;transition:transform .18s ease} .clinician[open] .disclose::after{transform:rotate(180deg)} .disclose .label-closed{display:inline} .disclose .label-open{display:none} .clinician[open] .disclose .label-closed{display:none} .clinician[open] .disclose .label-open{display:inline} .clinician-more{ margin-top:20px;padding-top:20px;border-top:1px solid var(--line); } .clinician-more h4{ font-family:var(--body);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--marigold);font-weight:600; margin:18px 0 6px; } .clinician-more h4:first-child{margin-top:0} .clinician-more ul{margin:0 0 4px;padding-left:18px} .clinician-more li{margin-bottom:4px;font-size:.93rem} @media (prefers-reduced-motion:reduce){.disclose::after{transition:none}} .clinician-wrap{display:flex;flex-direction:column} .clinician-wrap .clinician{flex:1} .clinician-wrap .sp-row{margin-top:14px} /* ── clinician portraits ────────────────────────────── */ .portrait{ width:110px;height:130px;object-fit:cover;object-position:center top; border-radius:10px;border:1px solid var(--line); display:block;margin:0 0 16px;background:var(--paper-deep); } /* ── contact form ───────────────────────────────────── */ .contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:34px;margin-top:28px;align-items:start} @media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:26px}} .form-card{ background:var(--card);border:1px solid var(--card-line);border-radius:14px; padding:28px 26px;box-shadow:0 1px 2px var(--shadow); } .contact-detail{margin-bottom:18px} .contact-detail .k{ font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--marigold);font-weight:600;margin:0 0 3px; } .contact-detail .v{margin:0;font-size:1rem;font-weight:500} /* ══════════════════════════════════════════════════════ SIMPLEPRACTICE WIDGET BUTTONS The embed code SimplePractice gives you ships with its own