/*
Theme Name:   PTANY GeneratePress Child
Theme URI:    https://ptany.com
Description:  Child theme for the PTANY marketing site refresh. Built from day 1 (not via Additional CSS) so all styling stays git-tracked and testable in small increments — see SPEC.md → Platform for why.
Author:       Stuart Yeh
Template:     generatepress
Version:      1.7.7
*/

/* ==========================================================================
   Known GeneratePress gotcha — read before adding padding/margin overrides
   ==========================================================================
   GeneratePress ships a sitewide rule: .inside-article { padding: 0 !important }
   ("flush hero" — a deliberate design choice, not a bug, so images can bleed
   to the edge of a post/page). Any rule that needs to add padding back to
   .inside-article (or a descendant like .single-post .inside-article) MUST
   also use !important, or GeneratePress's own rule silently wins the cascade.
   ========================================================================== */

/* ============================================================
   PTANY "quiet confidence" design system — v5, approved 2026-07-17.
   Source of truth: Design/Visual Identity.md in the Obsidian vault.
   Translated from the v5 HTML mockup: same class names, same rules,
   container queries swapped for real @media breakpoints since a real
   page has no "frame" wrapper the way the comparison mockup did.

   Type scale bumped one full step sitewide 2026-07-18 (v1.2.0) at
   Stuart's request ("a lot of fonts can be bigger") — every size moved
   together so the hierarchy keeps its proportions. Deliberately NOT
   bumped: photo-credit/placeholder tags and footer legal fine print,
   which read as metadata and should stay quiet.
   ============================================================ */
:root{
  --white:#FFFFFF;
  /* 2026-09-23 palette change — Stuart moved the site off the spring
     lime/green after comparing many options side by side on a preview copy
     of the homepage, and settled on a deep steel blue (#395B81). Why this
     one: white button text on it measures 7:1 contrast (the readability
     guideline is 4.5:1), so labels stay easy to read for an older audience,
     while it is still clearly a blue and not the near-black navy tried first.
     The lime/green tokens (--lime, --lime-deep, --green-deep, --green) were
     removed with the change; git history has them if that look is ever wanted.
     --gray is now a true neutral, so bands, cards and badges sit quietly
     with the blue instead of tinting mint. */
  --gray:#F2F2F2;
  --gray-neutral:#F2F2F2;
  --ink:#1A1A1A;
  /* --macoun/--macoun-deep keep their names (used all over for stars, the
     rating numeral, dots, hover states) but are now blues, not red or
     olive — the name is historical. --macoun-deep is also used for link
     hover text on white, so it must stay dark enough to read (7:1). */
  --macoun:#4C79AB;
  --macoun-deep:#395B81;
  --clay:#D98A7B;
  /* Blue family: buttons and thin rules (--blue, hover --blue-hover), the
     footer ground (--blue-deep), its top edge (--blue-edge), and the light
     blue used for footer headings/hovers so they read on the dark ground. */
  --blue:#395B81;
  --blue-hover:#2C4A6A;
  --blue-deep:#1B2A3A;
  --blue-edge:#618BB9;
  --blue-light:#A9C4E2;
  /* Soft-ink, 2026-07-19 — Stuart: pure Ink buttons read "too harsh."
     Was already the button hover shade; now the resting state, with
     hover deepening to full --ink instead of the reverse (buttons get
     more serious as you reach for them, not less). --ink itself is
     unchanged everywhere else (headings, body, footer, nav text). */
  --ink-soft:#333333;
  --disp:"Instrument Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Hanken Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,serif;
}

/* ==========================================================================
   Layout de-boxing (2026-07-18, v1.2.1) — measured on a 390px phone, the
   text column was only 207px wide because three padding layers stacked:
   GeneratePress's .inside-article (30px/side), the Group block's
   .wp-block-group__inner-container (30px/side — the customizer gotcha
   documented above), and .sec's own intended 24px. Only .sec's is design;
   the other two are theme chrome, zeroed here. Body goes white so GP's
   "separate containers" white-card-on-gray framing disappears — the mockup
   was a full-bleed white page, and the boxed card was the single biggest
   "default WordPress site" tell. Gray bands and the footer then pull
   themselves full-bleed with the 50vw margin trick, matching the mockup.
   ========================================================================== */
body{background-color:var(--white)}
html{overflow-x:clip} /* the 50vw full-bleed trick can overhang by the scrollbar width */
.page .inside-article{padding:0!important}
.ptany-page > .wp-block-group__inner-container{padding:0;max-width:none}
.gray-band,.ptany-foot{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* GP's own credit strip ("Built with GeneratePress") under our real footer —
   the page's .ptany-foot already carries the copyright/legal line. */
.site-footer{display:none}

.ptany-page{
  background:var(--white);
  color:var(--ink);
  font:400 18px/1.65 var(--body);
}
.ptany-page a{text-decoration:none}
.ptany-page :focus-visible{outline:2px solid var(--macoun-deep);outline-offset:2px;border-radius:3px}

/* ---- shared primitives ---- */
/* Section rhythm tightened 2026-09-23: was 72px / 124px each side, which left
   ~250px of blank space between sections (and between the two adjacent gray
   bands, which read as one band with a huge hole in it). */
.sec{padding:52px 24px}
.gray-band:has(+ .gray-band){padding-bottom:28px}
.gray-band + .gray-band{padding-top:28px}
.sec-in{max-width:1040px;margin:0 auto}
/* Inner pages: the first section sits right under the sticky header, so the
   homepage's generous section padding (72px/124px) left ~145px of dead space
   above the page heading. Homepage keeps its own rhythm. */
body:not(.home) .ptany-page > .sec:first-child,body:not(.home) .ptany-page > .wp-block-group__inner-container > .sec:first-child{padding-top:40px}
/* wpautop leaves empty <p></p> pairs around some raw-HTML pages; they add margin above headings. */
.ptany-page p:empty{display:none}
.gray-band{background:var(--gray)}

.eyebrow{font:600 12.5px/1.5 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:rgba(26,26,26,.55);margin:0 0 20px}

/* Full name + neighborhood — a brand moment, not a section label, so it
   doesn't use .eyebrow. Moved 2026-07-18 out of the narrow hero-copy column
   (where it read small/cramped next to the giant h1) to its own full-width
   bar below the whole hero row, echoing the rule-framed, centered treatment
   on PTANY's own printed letterhead (Design/Logo/PTANY-stationery-header.png).
   Section labels ("Why PTANY", "Services", "Our team") stay plain Instrument
   Sans caps — see Visual Identity.md "Labels label; they don't accent." */
.hero-identity{max-width:1040px;margin:44px auto 0;padding-top:26px;border-top:1px solid rgba(26,26,26,.12);text-align:center;font:400 20px/1.5 var(--serif);font-variant-caps:small-caps;letter-spacing:.04em;color:rgba(26,26,26,.68)}
.hero-identity .hero-identity-loc{color:rgba(26,26,26,.45)}

/* All .ptany-page h1s (services, how-we-practice, practitioner bios,
   our-team, etc.) echo the header masthead's serif voice
   (.ptany-name-line) — Stuart's ask, made sitewide after first trying
   it on our-team alone. */
.ptany-page h1{font:400 38px/1.12 var(--serif);color:var(--ink);margin:0 0 22px;font-variant-caps:small-caps;letter-spacing:.03em}
.ptany-page h2{font:520 29px/1.16 var(--disp);color:var(--ink);margin:0 0 16px;letter-spacing:-.008em}
/* Inner pages: subheadings speak in the same serif small-caps voice as the h1
   and the card titles, instead of the homepage's heavy sans h2. */
body:not(.home) .ptany-page h2{font:400 30px/1.2 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;margin:0 0 18px}
body:not(.home) .lede{margin-bottom:28px}
body .contact-page .lede{margin-bottom:44px}
.lede{margin:0 0 8px;max-width:56ch;color:rgba(26,26,26,.82)}

/* ---- simple content pages (services, how-we-practice, practitioner bios) —
   reuses .sec/.sec-in/.eyebrow/.tlink from the homepage system rather than
   inventing a parallel one, so a page built with this class instantly
   matches the site instead of looking like a second design. ---- */
.bio-body p{margin:0 0 20px;max-width:65ch;color:rgba(26,26,26,.82)}
.bio-shot{max-width:320px;aspect-ratio:4/5;margin-bottom:28px}
/* Small supporting photos under a bio. The source images are only ~240px
   tall, so they're shown at roughly native size rather than stretched. */
.bio-gallery{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;margin-top:36px}
.bio-gallery figure{margin:0}
.bio-gallery img{display:block;height:240px;width:auto;max-width:100%;object-fit:cover;border-radius:6px}

/* Service-page profile layout: intro + photos in the main column, the
   practitioner as one gray card in a sidebar (reuses .contact-info). */
.svc-detail{display:grid;grid-template-columns:1fr;gap:40px}
.svc-detail .bio-body p{max-width:60ch}
.bio-gallery--row{flex-wrap:nowrap;gap:12px;margin-top:32px}
.bio-gallery--row figure{flex-basis:0;flex-shrink:1;min-width:0}
.bio-gallery--row img{width:100%;height:auto;max-width:none}
.svc-cta{margin:36px 0 0}
.prac-card{padding:28px 26px 24px}
.prac-card .prac-label{margin:0 0 16px;font:600 11.5px/1.5 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:rgba(26,26,26,.5)}
.prac-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.prac-id{min-width:0}
.prac-photo{margin:0;width:112px;flex:none;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--white)}
.prac-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.prac-photo.ph-person{display:flex;align-items:center;justify-content:center}
.prac-photo.ph-person svg{width:34%;height:34%;color:rgba(26,26,26,.28)}
.prac-name{margin:0 0 4px;font:400 24px/1.2 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink)}
.prac-bio{margin:0 0 22px!important;font-size:15.5px!important;line-height:1.6!important;color:rgba(26,26,26,.75)!important}
.prac-creds{margin:0;font:600 12px/1.5 var(--disp);letter-spacing:.08em;color:rgba(26,26,26,.58)}
.svc-lists{display:grid;grid-template-columns:1fr;gap:28px;margin-top:36px;max-width:640px}
.svc-lists h5{font:600 11.5px/1.5 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:rgba(26,26,26,.5);margin:0 0 6px}
.svc-lists ul{margin:0;padding:0;list-style:none}
.svc-lists li{padding:9px 0;border-top:1px solid rgba(26,26,26,.12);font-size:16px;line-height:1.5;color:rgba(26,26,26,.82)}
@media (min-width:600px){.svc-lists{grid-template-columns:1fr 1fr;gap:36px}}
.prac-card .contact-block:last-child{padding-bottom:0}
.prac-card .contact-block p{word-break:break-word}
@media (max-width:599px){
  .bio-gallery--row{flex-wrap:wrap}
  .bio-gallery--row figure:first-child{flex:1 1 100%}
}
@media (min-width:840px){
  .svc-detail{grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
  .svc-side{margin-top:76px;position:sticky;top:208px}
}

.back-link{display:inline-block;margin-bottom:28px}

/* Buttons: blue with white sans-serif labels. (Serif small caps were tried
   in the preview and set aside — Stuart preferred the plainer sans label.) */
.btn{display:inline-block;font:600 16px/1 var(--disp);background:var(--blue);color:var(--white)!important;padding:16px 28px;border-radius:6px;transition:background .15s}
.btn:hover{background:var(--blue-hover)}
.btn.sm{font-size:14px;padding:12px 18px}

.tlink{font:600 17px/1.4 var(--body);color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(26,26,26,.35);transition:color .15s}
.tlink:hover{color:var(--macoun-deep);text-decoration-color:var(--macoun-deep)}

.divider{display:flex;align-items:center;gap:16px;margin:44px 0 24px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:rgba(26,26,26,.12)}
.divider span{font:600 12px/1.4 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:rgba(26,26,26,.5);text-align:center;max-width:34ch}

/* ---- photos — near-square corners: editorial and material, not sporty ---- */
.shot{position:relative;border-radius:6px;overflow:hidden;background:var(--gray)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .credit{position:absolute;left:10px;bottom:10px;font:600 9.5px/1.4 var(--disp);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.85);padding:4px 9px;border-radius:4px;backdrop-filter:blur(2px)}

/* ---- photo placeholders — warm tonality, unmistakably "to come" ---- */
.ph{position:relative;border-radius:6px;overflow:hidden;min-height:120px;
  background:
    radial-gradient(120% 95% at 72% 8%, rgba(255,238,205,.9) 0%, rgba(233,196,148,.5) 34%, rgba(233,196,148,0) 58%),
    linear-gradient(158deg,#DCAE7F 0%,#B47E55 46%,#69432D 100%)}
.ph::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),
             repeating-linear-gradient(25deg,rgba(30,20,12,.06) 0 1px,transparent 1px 8px)}
.ph::after{content:"";position:absolute;inset:7px;border:1.5px dashed rgba(255,255,255,.55);border-radius:4px;pointer-events:none}
.ph .ph-tag{position:absolute;left:14px;bottom:14px;font:600 9.5px/1.4 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.95);background:rgba(26,26,26,.5);padding:4px 9px;border-radius:4px}

/* ---- logo lockup ---- */
.ptany-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.ptany-logo img{height:30px;width:auto;flex:none;mix-blend-mode:multiply}
.ptany-logo-word{font:600 20px/1 var(--disp);letter-spacing:.045em}

/* ---- hero ---- */
/* padding-bottom tightened 2026-07-18 — the hero used to end with the
   .hero-identity bar filling this space; now that it's removed (redundant
   with the header masthead), the section's standard 72px/124px bottom
   padding read as a big empty gap before Services. */
.hero{padding-top:44px;padding-bottom:16px}
.hero-copy p{margin:0 0 32px;max-width:52ch;color:rgba(26,26,26,.82)}
.hero-ctas{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
/* Widened from 5/4 (1.25:1) toward the new photo's own ~3:2 ratio --
   object-fit:cover crops to match the container's shape, so the taller/
   narrower 5:4 box was cropping away more of the photo than needed.
   Stuart: "a little too zoomed in... pull back a bit more." */
.hero-shot{aspect-ratio:4/3}
/* Reset to center — the previous 62% 26% was tuned for the old photo's
   composition (a person's face/upper body, upper-right). The new hands
   photo is a close, roughly centered crop; re-tune this once the new
   photo's actual crop is checked visually at both hero widths. */
.hero-shot img{object-position:50% 45%}

/* ---- differentiators — light gray band, Ink numbers, short Macoun tick above each ---- */
.stat-grid{display:grid;grid-template-columns:1fr;gap:36px;margin-top:36px}
.stat{padding:0}
.stat::before{content:"";display:block;width:30px;height:3px;border-radius:2px;background:var(--blue);margin-bottom:18px}
.stat .stat-num{font:500 36px/1 var(--disp);color:var(--ink);letter-spacing:-.01em;margin:0 0 10px}
.stat h3{font:600 18px/1.35 var(--disp);color:var(--ink);margin:0 0 6px}
.stat p{margin:0;font-size:16px;line-height:1.55;color:rgba(26,26,26,.72)}

/* ---- services, 2026-07-18 ----
   First rebuild flattened this to 4 equal peer cards. Stuart's follow-up:
   Physical Therapy should keep the larger presence it had originally,
   the other 3 underneath as a smaller row — hierarchy restored, but with
   the new content (centered, practitioner named, whole card a link to
   its own page) carried over from the flattened version. Card content
   order in both: title, then practitioner, then description. */
/* The section's own "Services" heading stayed Instrument Sans (the
   sitewide h2 default) while the card titles below it went serif —
   two headings within inches of each other, at nearly the same size
   (29/38px vs 30/40px), in two different typefaces. Read as a clash,
   not a hierarchy. Brought the section heading into the same serif
   voice so "Services" reads as one coherent world with its own cards,
   instead of competing with them. Scoped to #services so the rest of
   the page's h2s (Why PTANY, Our team, Cost & coverage) stay Instrument
   Sans as before.
   2026-09-24: no longer italic — Stuart flagged it. Upright small caps now
   matches the other serif headings on the site (Who We Are, Contact, the
   card titles just below), which were never italic. */
#services h1,#services h2{font:400 29px/1.2 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em}
.svc-primary{margin-top:28px}
/* .svc-hero-card is a plain container, not the <a> itself — Michael's
   and Stuart's photos need to link to their own practitioner pages,
   while the title/description link to /how-we-practice/, and nesting
   <a> inside <a> isn't valid HTML. Order corrected 2026-07-18: title,
   description, THEN photos+names at the bottom (not sandwiched between
   title and description) — title+description now sit adjacent inside
   one single .svc-hero-card-link, with .svc-people as a plain sibling
   after it, since nothing needs to interrupt them anymore. */
.svc-hero-card{background:var(--gray-neutral);border-radius:10px;padding:36px 28px;text-align:center;color:var(--ink);transition:background .15s}
.svc-hero-card:has(.svc-hero-card-link:hover){background:#ECECEC}
.svc-hero-card-link{display:block;color:inherit!important}
/* Serif small-caps, matching the header masthead's title treatment
   (.ptany-name-line) — Stuart: "match the font of the services to the
   same font as our title." Was Instrument Sans like the rest of the
   page headings; these two now intentionally echo the masthead instead. */
.svc-hero-card h3{font:400 30px/1.2 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink);margin:0 0 10px}
.svc-hero-card p{margin:0 auto;max-width:56ch;color:rgba(26,26,26,.8)}

.svc-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px;align-items:stretch}
/* Secondary cards keep their original single-anchor structure unchanged —
   only these three needed no restructuring, since each just gets one
   decorative (non-linked) photo of its one practitioner. */
/* display:flex + flex-direction:column, so the photo+name can be pinned
   to the bottom (margin-top:auto below) regardless of how long that
   card's own description runs. height:100% is the actual fix for the
   three cards rendering at different heights (grid's align-items:stretch
   should equalize them by default, but didn't reliably apply through the
   flex-column child — explicit height:100% forces it) — Stuart: "cards
   should be uniform in dimension." */
.svc-card{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--white);border:1px solid rgba(26,26,26,.12);border-radius:8px;padding:26px 22px 30px;text-align:center;color:var(--ink)!important;transition:border-color .15s,box-shadow .15s}
.svc-card:hover{border-color:var(--macoun-deep);box-shadow:0 2px 14px rgba(26,26,26,.07)}
/* Neutral echo of the differentiators' signature red tick — same shape, ink
   instead of Macoun, centered here, so the cards join that family without
   spending the rationed red budget (4 appearances, counted — see Visual
   Identity.md). Turns Macoun on hover, the site's one reach-for-it accent. */
.svc-card::before{content:"";display:block;width:30px;height:3px;border-radius:2px;background:var(--blue);margin:0 0 16px;transition:background .15s}
.svc-card:hover::before{background:var(--blue-hover)}
.svc-card h4{font:400 20px/1.3 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink);margin:0 0 8px}
.svc-card p{margin:0 0 20px;font-size:15.5px;line-height:1.55;color:rgba(26,26,26,.72)}

/* Decorative practitioner photo on the 3 secondary cards — not a separate
   link (the whole card already links to that service's own page, which
   has the practitioner's bio — clicking anywhere in the card's border
   still goes there, unchanged). Rectangular/near-square, matching the
   site's established .shot photo treatment. margin-top:auto pins it (and
   the name after it) to the bottom of the now-equal-height .svc-card, so
   all three land at the same distance from the bottom, edge to edge.
   Sized up again (52->68px) per Stuart's "I think they should be bigger." */
.svc-card-photo{display:block;width:68px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;margin-top:auto;flex:none}
.svc-card-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Generic silhouette placeholder, 2026-07-19 — replaces the warm-gradient
   .ph treatment (dashed border, diagonal texture, tiny "Photo to come"
   label) for these small inline card photos. That treatment was designed
   for much larger placeholder blocks (the old Team grid); shrunk down to
   card-photo size it read as busy/distracting. This is deliberately plain:
   a flat neutral tile with a simple person-outline icon, nothing else. */
.svc-card-photo.ph-person{background:var(--gray-neutral);display:flex;align-items:center;justify-content:center}
.svc-card-photo.ph-person svg{width:44%;height:44%;color:rgba(26,26,26,.28)}
.svc-card-photo-name{display:block;margin-top:8px;font:400 13px/1.3 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink)}

/* Physical Therapy card only — two clickable photo+name links to
   Michael's and Stuart's own practitioner pages. Dropped the white
   bordered "frame" around each (Stuart: "size/placement... don't seem
   right" — on reflection this was a card nested inside a card; simpler
   now, just photo + name directly on the gray background, matching how
   the secondary cards' photos have no per-photo frame either). Bigger
   photo (92->104px) since PT is meant to keep the larger presence, more
   horizontal room between the two. */
.svc-people{display:flex;justify-content:center;gap:56px;margin-top:26px}
.svc-person{display:flex;flex-direction:column;align-items:center;gap:0;color:inherit!important;width:120px}
.svc-person-photo{width:104px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;flex:none}
.svc-person-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Same generic silhouette treatment as .svc-card-photo.ph-person, applied
   here too — Stuart: use it for all 5 practitioners for now (Michael,
   Stuart, Mary included, not just the 2 with no photo on file yet), so
   the section reads as one consistent "coming soon" set rather than a
   mix of real temp snapshots and placeholders. */
.svc-person-photo.ph-person{background:var(--gray-neutral);display:flex;align-items:center;justify-content:center}
.svc-person-photo.ph-person svg{width:40%;height:40%;color:rgba(26,26,26,.28)}
.svc-person-name{margin-top:10px;font:400 15px/1.3 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink)}
.svc-person-creds{display:block;font:600 10px/1.5 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:rgba(26,26,26,.5)}
.svc-person:hover .svc-person-name{color:var(--macoun-deep)}

/* Same generic silhouette treatment again, scaled up to fill the large
   full-width featured-image slot on a practitioner's own single page when
   no real photo is set yet (see ptany_practitioner_photo_placeholder() in
   functions.php). 3/2 to match the aspect ratio real practitioner photos
   are cropped to, so nothing reflows when a real photo replaces it. Kept
   small relative to the box (space over impact, per Visual Identity.md)
   rather than scaling the icon up 1:1 with the small-card version. */
.featured-image.ph-person-large{background:var(--gray-neutral);display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;border-radius:6px}
.featured-image.ph-person-large svg{width:15%;height:15%;color:rgba(26,26,26,.28)}

/* ---- team ---- */
.founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
/* Centered column layout (was left-aligned block, photo filling the full
   grid column) so a narrower, capped photo doesn't look stranded on the
   left of its column — reads as a centered headshot card instead. */
.founder{display:flex;flex-direction:column;align-items:center;text-align:center}
/* Capped narrower than the grid column (was filling it — up to ~358px
   wide at desktop, noticeably larger than the guest practitioners'
   photos below despite both being headshots) so Michael and Stuart
   read as a professional headshot pair, not oversized portraits. */
.founder .shot{aspect-ratio:4/5;margin-bottom:12px;max-width:230px;width:100%}
.founder h3{font:400 21px/1.3 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink);margin:0}
.creds{font:600 12px/1.6 var(--disp);letter-spacing:.08em;color:rgba(26,26,26,.58);margin:2px 0 0}
/* Plain-English line under a credential abbreviation (e.g. DScPT, OCS) */
.creds-note{display:block;margin-top:6px;font:400 14px/1.5 var(--body);letter-spacing:.01em;color:rgba(26,26,26,.62)}
/* Credential abbreviations in small labels explain themselves on hover, but
   without the browser's default dotted underline cluttering the label. */
.svc-person-creds abbr,.prac-creds abbr,.sched-role abbr{text-decoration:none;border-bottom:0;cursor:help}
.partner-line{margin:20px 0 0;max-width:56ch;color:rgba(26,26,26,.8)}
.guestppl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guestppl .shot,.guestppl .ph{aspect-ratio:4/5;margin-bottom:9px;min-height:0;border-radius:5px}
.guestppl h4{font:400 17px/1.3 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink);margin:0}
.guestppl p{margin:1px 0 0;font-size:14.5px;color:rgba(26,26,26,.64)}
.team-link{display:inline-block;margin-top:26px}

/* ---- social proof — one serif moment (Newsreader italic), one red numeral ---- */
.proof-grid{display:flex;flex-direction:column;gap:28px}
.big-rating{font:500 52px/1 var(--disp);color:var(--macoun);letter-spacing:-.01em;margin:0}
.stars{color:var(--ink);font-size:15px;letter-spacing:.14em;margin-top:8px}
/* Per-review stars inside the testimonial slider (added 2026-07-19, matching
   imaginetulum.com's stars-above-quote review card layout) — red, not Ink,
   grouped with the 4.9 numeral as one "rating" accent moment rather than a
   new 5th counted appearance (same logic as the differentiators' repeated tick). */
.testi-stars{color:var(--macoun);font-size:14px;letter-spacing:.14em;margin-bottom:14px}
.rating-line{font:600 16px/1.5 var(--body);color:var(--ink);margin:6px 0 0}
.rating-sub{font-size:14.5px;color:rgba(26,26,26,.6);margin:1px 0 0}

/* Google review QR code, /review/ page only (added 2026-08-30) — a real
   scannable alternative to the "Review us on Google" button for patients
   reviewing from a printed card/in-clinic signage rather than their own
   phone browser. Same 6px radius as every other framed element on the
   site; a hairline border (rgba, no new named color) instead of a filled
   Gray tile since the QR code itself already needs to sit on plain white
   to stay scannable. */
.review-qr{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:28px}
.review-qr img{width:132px;height:132px;border:1px solid rgba(26,26,26,.14);border-radius:6px;padding:10px;background:var(--white)}
.review-qr-caption{font:400 13.5px/1.4 var(--body);color:rgba(26,26,26,.6);margin:0}
.quote{font:italic 400 25px/1.42 var(--serif);color:var(--ink);margin:0;max-width:24em;letter-spacing:.002em}
.quote-attr{font:600 12px/1.5 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:rgba(26,26,26,.55);margin:16px 0 0}

/* Testimonial slider — 2026-07-18, replacing the single static quote once
   Stuart supplied a real bank of Google/Yelp reviews, built to match the
   fade-carousel pattern on imaginetulum.com (Splide there; plain vanilla
   JS here — same visual technique, no extra dependency for one slider).
   The fix: inactive slides are position:absolute + opacity:0 (stacked,
   removed from flow); the active slide is position:relative + opacity:1,
   which is what actually reserves the container's height — copied
   directly from Imagine Tulum's own Splide fade-carousel CSS fix.
   Deliberately no auto-advance (a trust-building quote shouldn't change
   out from under someone mid-read) and no dates shown — the reviews span
   2009–2024, and PTANY is only now restarting the habit of asking for
   them; a visible date would read as "have they gotten worse," not as
   history. */
/* Arrows moved 2026-07-19 to flank the slider on either side (Stuart:
   "arrows on either side of the section"), vertically centered — closer
   to Imagine Tulum's actual hero-arrow pattern (position:absolute,
   top:50%, left/right edges) than the original bottom-row placement.
   .testi-slider gets side padding to reserve room for them at every
   width, rather than pushing them outside the column (which would clip
   or overlap neighboring content on narrower screens). */
.testi-slider{position:relative;padding:0 54px}
.testi-slides{position:relative}
.testi-slide{position:absolute;top:0;left:0;width:100%;opacity:0;transition:opacity .4s ease;pointer-events:none}
.testi-slide.is-active{position:relative;opacity:1;pointer-events:auto}
.testi-nav{display:flex;align-items:center;justify-content:center;margin-top:22px}
/* Translucent arrow buttons (revised 2026-07-19 — Stuart: the solid ink-soft
   fill read as too heavy/charcoal next to the reference; wanted "more
   translucent, cleaner"). Bold angle-bracket characters, not a drawn/rotated
   shape or inline SVG — both hit real rendering problems here (SVG width
   collapsed to ~4px for reasons not worth chasing further; a rotated
   border-corner chevron came out pointing the wrong way). A plain bold
   character has no layout geometry to get wrong.
   No hover/focus/active color change (revised 2026-07-20) — Stuart: "you
   can leave it light grey throughout." First pass only removed :hover, but
   a solid charcoal fill still appeared after a click and held until the
   next click or key press — that's the browser's own native <button>
   press/focus rendering showing through, not anything declared here (no
   :active/:focus background rule exists in this file). appearance:none
   hands full control to our own CSS so nothing but this rule ever paints
   the background; the shared :focus-visible outline rule below still gives
   keyboard users a visible ring, just no fill change. */
.testi-arrow{position:absolute;top:50%;transform:translateY(-50%);appearance:none;-webkit-appearance:none;background:rgba(26,26,26,.07);border:1px solid rgba(26,26,26,.15);border-radius:6px;width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);font:700 24px/1 var(--disp);-webkit-tap-highlight-color:transparent;z-index:2}
.testi-arrow:hover,.testi-arrow:active,.testi-arrow:focus{background:rgba(26,26,26,.07);border-color:rgba(26,26,26,.15);color:var(--ink)}
.testi-prev{left:0}
.testi-next{right:0}
.testi-dots{display:flex;gap:8px}
.testi-dot{width:7px;height:7px;border-radius:50%;background:rgba(26,26,26,.2);border:none;padding:0;cursor:pointer;transition:background .15s}
.testi-dot.is-active{background:var(--macoun)}

/* ---- cost & insurance — gray band, plain facts on neutral hairlines ---- */
.fact-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:32px}
.fact{border-top:1px solid rgba(26,26,26,.22);padding:12px 0 2px;font-size:16.5px;line-height:1.55;color:rgba(26,26,26,.8)}
.fact strong{color:var(--ink);font-weight:700}
/* Jotform iframes carry ~20px of internal left inset; pull them back so form
   content lines up with the page's own left edge (back link, headings). */
/* Patient forms: one centered column (back link + form), the form sitting in a
   soft card so its type has even margins instead of hugging the left edge. */
.form-page .sec-in{max-width:816px}
.form-frame{padding:24px 24px 16px;border:1px solid rgba(26,26,26,.12);border-radius:10px;background:var(--white)}
.form-frame iframe{display:block;width:100%;margin:0}
/* After a booking request is sent, Jotform's thank-you screen replaces the form
   inside this iframe, but the iframe would stay as tall as the long form (about
   3,000px). The /book/ page adds .jf-thanks on the iframe's second load to shrink
   it. Heights are generous because the iframe cannot scroll. */
.form-frame iframe.jf-thanks{height:620px!important;scroll-margin-top:215px}
@media (max-width:599px){.form-frame iframe.jf-thanks{height:780px!important;scroll-margin-top:170px}}
/* Short version for the new patient-request form (2026-09-26): its confirmation
   is one green band plus at most one card (about 315px desktop, 505px phone),
   so the box can be much shorter than the old three-card confirmation above. */
.form-frame iframe.jf-thanks-s{height:380px!important;scroll-margin-top:215px}
@media (max-width:599px){.form-frame iframe.jf-thanks-s{height:640px!important;scroll-margin-top:170px}}
/* Fit-to-content version (2026-09-26): the new request form's confirmations vary from
   about 180px (Massage) to over 800px (Step 2 questionnaire buttons on a phone). Jotform's
   embed handler already sizes the iframe to whatever the thank-you screen needs, so this
   class sets no height at all; it only keeps the sticky header off the confirmation. */
.form-frame iframe.jf-thanks-fit{scroll-margin-top:215px}
@media (max-width:599px){.form-frame iframe.jf-thanks-fit{scroll-margin-top:170px}}
/* scroll-margin-top keeps the sticky header (about 186px desktop, 145px phone)
   from covering the top of the thank-you screen when the page scrolls to it. */
/* Upload-documents page: larger type and a clear step list for older patients */
.upload-page .lede{font-size:20px;max-width:none;margin-bottom:22px}
.secure-badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 30px;padding:10px 18px;border:1px solid rgba(26,26,26,.15);border-radius:999px;background:var(--gray);font:600 15px/1.3 var(--body);color:var(--ink)}
.secure-badge svg{width:20px;height:20px;flex:none}
.upload-steps{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:16px;counter-reset:step}
.upload-steps li{counter-increment:step;display:flex;gap:16px;align-items:flex-start;font-size:19px;line-height:1.5;color:rgba(26,26,26,.88)}
.upload-steps li::before{content:counter(step);flex:none;width:38px;height:38px;border-radius:50%;background:var(--blue);color:var(--white);font:600 19px/38px var(--disp);text-align:center}
.upload-steps li span{padding-top:4px}
/* On phones every form page (not just Upload Documents) trims the frame's side
   padding, so the embedded Jotform gets the width it needs (e.g. the signature pad). */
@media (max-width:599px){.form-page .form-frame{padding:14px 6px 8px}}
/* New Patient page (page 180) sidebar (2026-09-27): the Jotform now covers
   Physical Therapy only - HIPAA-safe notification emails forwarded to Mary/
   Yongseok carried no useful information for them, so routing those services
   through this form no longer made sense. Links go straight to each
   practitioner's own booking page/card instead (same URLs as the Scheduling
   page). Overrides .form-page's 816px cap (same specificity, later in the
   cascade) since this page needs room for a second column. */
.book-page .sec-in{max-width:1040px}
.new-patient-layout{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media (min-width:760px){.new-patient-layout{grid-template-columns:1fr 280px}}
.new-patient-sidebar{display:flex;flex-direction:column;gap:16px}
.np-sidebar-title{margin:0 0 -6px;font:400 20px/1.3 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink)}
/* Embedded third-party scheduling page (Everseat) */
.embed-frame{margin-top:8px;border:1px solid rgba(26,26,26,.12);border-radius:10px;overflow:hidden;background:var(--white)}
.embed-frame iframe{display:block;width:100%;height:calc(100vh - 150px);min-height:620px;max-height:900px;border:0}
@media (min-width:840px){.embed-frame iframe{height:1100px;max-height:none}}
.embed-alt{margin:18px 0 0;font-size:16px;color:rgba(26,26,26,.7)}
.embed-alt a{color:var(--ink);border-bottom:1px solid rgba(26,26,26,.3)}
/* FAQ: every answer visible — with only a few questions, an accordion just hides content */
.faq-page .sec-in,.cost-page .sec-in{max-width:816px}
.faq-q{padding:38px 0 34px;border-top:1px solid rgba(26,26,26,.12)}
.faq-q:first-of-type{margin-top:20px}
.faq-q h2{margin:0 0 18px;font:400 27px/1.28 var(--serif) !important;font-variant-caps:normal !important;letter-spacing:0 !important;color:var(--ink)}
.faq-q>p,.faq-def p{margin:0 0 14px;font-size:18px;line-height:1.65;color:rgba(26,26,26,.86);max-width:66ch}
.faq-q>p strong{color:var(--ink)}
.faq-key{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:20px 0;padding:20px 26px;background:var(--gray);border-radius:10px}
.faq-key strong{font:400 30px/1.2 var(--serif);color:var(--ink)}
.faq-key span{font-size:17.5px;line-height:1.5;color:rgba(26,26,26,.8);flex:1 1 260px}
.faq-defs{display:grid;grid-template-columns:1fr;gap:16px;margin:4px 0 22px}
@media (min-width:700px){.faq-defs{grid-template-columns:1fr 1fr;gap:20px}}
.faq-def{padding:26px 28px 14px;background:var(--gray);border-radius:10px}
.faq-term{display:block;font:400 26px/1.2 var(--serif);color:var(--ink)}
.faq-def .faq-aka{margin:4px 0 16px;font:600 11.5px/1.5 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:rgba(26,26,26,.5)}
.faq-def ul{margin:0 0 14px;padding-left:22px;font-size:17.5px;line-height:1.6;color:rgba(26,26,26,.86)}
.faq-note{margin:0;padding:0;font-size:17.5px !important;line-height:1.6;color:rgba(26,26,26,.86)}
.faq-note::before{content:"Good to know";display:block;margin-bottom:6px;font:600 11.5px/1.5 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:rgba(26,26,26,.5)}
.faq-page .form-help{margin-top:8px}
/* Cost & Insurance page */
.cost-page h2{margin-top:52px}
.cost-page .lede+h2,.cost-page .eyebrow+h1{margin-top:0}
.cost-page .lede{max-width:none;margin-bottom:0}
.fee-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
@media (min-width:640px){.fee-grid{grid-template-columns:1fr 1fr;gap:20px}}
.fee-card{display:flex;flex-direction:column;gap:4px;padding:26px 28px;background:var(--gray);border-radius:10px}
.fee-name{font:600 11.5px/1.5 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:rgba(26,26,26,.5)}
.fee-price{font:400 42px/1.15 var(--serif);color:var(--ink)}
.fee-meta{font-size:16px;line-height:1.45;color:rgba(26,26,26,.75)}
.cost-note{margin:16px 0 0;font-size:17.5px;color:rgba(26,26,26,.8)}
.cost-lead{margin:0 0 16px;max-width:66ch;font-size:18px;line-height:1.65;color:rgba(26,26,26,.86)}
.cost-page .faq-defs{margin-top:8px}
.why-list{display:grid;gap:26px;margin-top:8px}
.why-item h3{margin:0 0 6px;font:600 19px/1.4 var(--body);color:var(--ink)}
.why-item p{margin:0;max-width:66ch;font-size:18px;line-height:1.65;color:rgba(26,26,26,.86)}
.cost-questions{margin:0 0 18px;padding-left:24px;max-width:66ch;font-size:18px;line-height:1.65;color:rgba(26,26,26,.86)}
.cost-questions li{margin-bottom:8px}
/* "Need a hand?" box on the patient-form pages */
.form-help{margin-top:34px;padding:26px 30px;background:var(--gray);border-radius:10px}
.form-help h2{margin:0 0 10px}
.form-help p{margin:0 0 16px;font-size:18px;line-height:1.55;color:rgba(26,26,26,.85)}
.form-help p:last-child{margin-bottom:0}
.form-help p a:not(.btn){color:var(--ink);font-weight:600;border-bottom:1px solid rgba(26,26,26,.35)}
.form-page .lede{font-size:19px;max-width:none;margin-bottom:20px}
.upload-help .btn{margin-top:0}

.upload-help{margin-top:34px;padding:28px 30px;background:var(--gray);border-radius:10px}
.upload-help h2{margin:0 0 12px}
.upload-help ul{margin:0 0 18px;padding-left:22px;font-size:18px;line-height:1.6;color:rgba(26,26,26,.85)}
.upload-help .upload-call{margin:0;font-size:19px}
.upload-help .upload-call a{color:var(--ink);font-weight:600;border-bottom:1px solid rgba(26,26,26,.35)}

@media (min-width:600px){.form-frame{padding:28px 32px 20px}}
.fact a{color:var(--ink);border-bottom:1px solid rgba(26,26,26,.3);transition:color .15s,border-color .15s}
.fact a:hover{color:var(--macoun-deep);border-color:var(--macoun-deep)}
/* Inner pages left-align the facts grid with the heading above it; only the
   homepage's Cost & coverage band keeps it centered. */
body:not(.home) .fact-grid{margin-left:0!important;margin-right:0!important}

/* Practitioner pages: GeneratePress prints the featured image full-width
   (1120x685 landscape) above the content, misaligned with the text column.
   Capped to a portrait and lined up with the text (sec padding 24px mobile,
   48px desktop). */
.single-practitioner .featured-image:not(.ph-person-large){max-width:1120px;padding:32px 24px 0;box-sizing:border-box}
.single-practitioner .featured-image:not(.ph-person-large) img{display:block;width:100%;max-width:300px;aspect-ratio:4/5;object-fit:cover;object-position:45% 25%;border-radius:6px}
.single-practitioner .featured-image.ph-person-large{width:300px;max-width:calc(100% - 48px);aspect-ratio:4/5;margin:32px 0 0 24px}
body.single-practitioner .ptany-page > .sec:first-child{padding-top:32px!important}

/* Training box (post 16 only, see ptany_stuart_training_box() in
   functions.php) — quiet fact-box styling, same family as .bio-body but
   set off with a border so it reads as reference material, not prose. */
.training-box{max-width:300px;margin:24px 24px 28px;padding:18px 20px;border:1px solid rgba(26,26,26,.12);border-radius:6px;background:var(--gray)}
.training-box h2{font:600 12px/1.4 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:rgba(26,26,26,.55);margin:0 0 12px}
.training-box h3{font:600 12px/1.4 var(--disp);letter-spacing:.04em;color:var(--ink);margin:14px 0 6px}
.training-box h3:first-of-type{margin-top:0}
.training-box ul{margin:0;padding:0;list-style:none}
.training-box li{font:400 14.5px/1.5 var(--body);color:rgba(26,26,26,.82);padding:5px 0;border-top:1px solid rgba(26,26,26,.12)}
.training-box li:first-child{border-top:none;padding-top:0}

/* ---- contact page — info column + native Contact Form 7 form, first
   plain HTML form on the site (the six patient-intake forms are
   Jotform iframes with their own theme), so inputs/labels/button are
   styled fresh here to match the sitewide system rather than reusing
   anything Jotform-specific. ---- */
.contact-page .lede{margin-bottom:44px}
.contact-layout{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
/* Gray card, same treatment as the Services cards, so the details read as
   one anchored object beside the form instead of loose text. */
.contact-info{background:var(--gray-neutral);border-radius:10px;padding:32px 28px 28px}
.contact-block{padding:20px 0;border-top:1px solid rgba(26,26,26,.12)}
.contact-block:first-child{padding-top:0;border-top:0}
.contact-block h5,.contact-form h5{font:600 11.5px/1.5 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:rgba(26,26,26,.5);margin:0 0 8px}
.contact-block p{margin:0;font-size:16px;line-height:1.6;color:rgba(26,26,26,.82)}
.contact-block .contact-big{font:400 22px/1.35 var(--serif);letter-spacing:.01em;color:var(--ink)}
.contact-block a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(26,26,26,.25);transition:color .15s,border-color .15s}
.contact-block a:hover{color:var(--macoun-deep);border-color:var(--macoun-deep)}
.contact-block.contact-map{padding-bottom:0}
.contact-map iframe{display:block;width:100%;height:200px;border:0;border-radius:6px}
.contact-form{padding:8px 0 0}
.contact-form h5{margin-bottom:22px}
.contact-note{margin:18px 0 0;font-size:14px;line-height:1.55;color:rgba(26,26,26,.6);max-width:52ch}
.contact-note a{color:var(--ink);border-bottom:1px solid rgba(26,26,26,.25)}
.ptany-cf7 p{margin:0 0 22px}
.ptany-cf7 br{display:none}
.ptany-cf7 .wpcf7-form-control-wrap{display:block}
.ptany-cf7 label{display:block;font:600 12px/1.5 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:rgba(26,26,26,.62);margin-bottom:8px}
.ptany-cf7 input[type=text],.ptany-cf7 input[type=email],.ptany-cf7 input[type=tel],.ptany-cf7 textarea{width:100%;font:400 16px/1.4 var(--body);color:var(--ink);background:var(--white);border:1px solid rgba(26,26,26,.22);border-radius:6px;padding:14px 16px;transition:border-color .15s,box-shadow .15s}
.ptany-cf7 textarea{height:150px;min-height:120px;resize:vertical}
.ptany-cf7 input:focus,.ptany-cf7 textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(57,91,129,.28)}
.ptany-cf7 input[type=submit]{display:inline-block;font:600 16px/1 var(--disp);background:var(--blue);color:var(--white);border:0;padding:16px 28px;border-radius:6px;cursor:pointer;transition:background .15s}
.ptany-cf7 input[type=submit]:hover{background:var(--blue-hover)}
/* Friendly form messages: a calm steel blue for "sent", a warm amber (not red)
   for "needs another look". The message text is always shown, so color is
   never the only cue. */
.ptany-cf7 .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:13px;color:#7A4A00}
.ptany-cf7 input.wpcf7-not-valid,.ptany-cf7 textarea.wpcf7-not-valid{border-color:#B7791F}
.ptany-cf7 .wpcf7-response-output{margin:20px 0 0;padding:14px 16px;border-radius:6px;font-size:15px;border:1px solid rgba(26,26,26,.15)}
.ptany-cf7 form.sent .wpcf7-response-output{border-color:rgba(57,91,129,.35);background:rgba(57,91,129,.08);color:var(--blue-deep)}
.ptany-cf7 form.invalid .wpcf7-response-output,.ptany-cf7 form.unaccepted .wpcf7-response-output,.ptany-cf7 form.spam .wpcf7-response-output,.ptany-cf7 form.failed .wpcf7-response-output,.ptany-cf7 form.aborted .wpcf7-response-output{border-color:rgba(183,121,31,.45);background:rgba(214,150,30,.10);color:#7A4A00}

/* ---- Who We Are — one equal card per person ---- */
.people-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 20px;margin-top:32px}
.person-card{display:flex;flex-direction:column;color:var(--ink)!important}
.person-photo{display:block;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--gray-neutral)}
.person-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .35s ease}
.person-card:hover .person-photo img{transform:scale(1.03)}
.person-photo.ph-person{display:flex;align-items:center;justify-content:center}
.person-photo.ph-person svg{width:34%;height:34%;color:rgba(26,26,26,.28)}
.person-name{margin-top:14px;font:400 21px/1.25 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink);transition:color .15s}
.person-card:hover .person-name{color:var(--macoun-deep)}
.person-title{margin-top:3px;font:500 13.5px/1.4 var(--body);color:rgba(26,26,26,.62)}
.who-page .partner-line{margin:48px 0 0;padding:28px 0;max-width:none;text-align:center;font:italic 400 24px/1.45 var(--serif);color:var(--ink);border-top:1px solid rgba(26,26,26,.15);border-bottom:1px solid rgba(26,26,26,.15)}
@media (min-width:600px){.people-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.people-grid{grid-template-columns:repeat(5,1fr);gap:32px 20px}}

/* ---- forms index — link cards, grouped ---- */
body:not(.home) .forms-page h2{margin-top:56px}
body:not(.home) .forms-page h1+h2{margin-top:32px}
.form-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
.form-card{display:flex;flex-direction:column;gap:6px;background:var(--white);border:1px solid rgba(26,26,26,.12);border-radius:8px;padding:24px 24px 22px;color:var(--ink)!important;transition:border-color .15s,box-shadow .15s}
.form-card::before{content:"";display:block;width:30px;height:3px;border-radius:2px;background:var(--blue);margin-bottom:10px;transition:background .15s}
.form-card:hover{border-color:var(--macoun-deep);box-shadow:0 2px 14px rgba(26,26,26,.07)}
.form-card:hover::before{background:var(--macoun)}
.form-card-title{font:400 21px/1.3 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink)}
.form-card-desc{font-size:15.5px;line-height:1.55;color:rgba(26,26,26,.72)}
.form-card-go{margin-top:auto;padding-top:12px;font:600 14px/1.4 var(--body);color:var(--ink)}
.form-card:hover .form-card-go{color:var(--macoun-deep)}

/* ---- persistent contact tab: slim edge tab on desktop, floating pill on phones ---- */
.ptany-tab{position:fixed;z-index:90;font-family:var(--body)}
.ptany-tab-btn{position:fixed;right:0;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;background:var(--blue);color:var(--white);border:0;border-radius:8px 0 0 8px;padding:20px 11px;font:400 17px/1 var(--serif);font-variant-caps:small-caps;letter-spacing:.08em;cursor:pointer;transition:background .15s;box-shadow:0 2px 12px rgba(26,26,26,.18)}
.ptany-tab-btn:hover{background:var(--blue-hover)}
.ptany-tab-btn:focus-visible{outline:2px solid var(--macoun-deep);outline-offset:2px}
.ptany-tab-panel{position:fixed;right:0;top:50%;width:300px;max-width:calc(100vw - 24px);background:var(--white);border-radius:10px 0 0 10px;box-shadow:0 8px 32px rgba(26,26,26,.2);padding:28px 28px 24px;transform:translate(100%,-50%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.ptany-tab.is-open .ptany-tab-panel{transform:translate(0,-50%);visibility:visible;transition:transform .25s ease}
.ptany-tab.is-open .ptany-tab-btn{visibility:hidden}
.ptany-tab-close{position:absolute;top:8px;right:10px;width:34px;height:34px;border:0;background:none;font:400 26px/1 var(--body);color:rgba(26,26,26,.55);cursor:pointer;border-radius:6px}
.ptany-tab-close:hover{color:var(--ink);background:var(--gray)}
.ptany-tab-panel h5{font:600 11.5px/1.5 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:rgba(26,26,26,.5);margin:0 0 16px}
.ptany-tab-panel dl{margin:0}
.ptany-tab-panel dl>div{padding:12px 0;border-top:1px solid rgba(26,26,26,.12)}
.ptany-tab-panel dt{font:600 11px/1.5 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:rgba(26,26,26,.5);margin:0 0 2px}
.ptany-tab-panel dd{margin:0;font:400 20px/1.35 var(--serif);color:var(--ink)}
.ptany-tab-panel dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(26,26,26,.25);transition:color .15s,border-color .15s}
.ptany-tab-panel dd a:hover{color:var(--macoun-deep);border-color:var(--macoun-deep)}
.ptany-tab-more{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(26,26,26,.12);font:600 15px/1.4 var(--body)}
.ptany-tab-more a{color:var(--ink);text-decoration:none}
.ptany-tab-more a:hover{color:var(--macoun-deep)}
/* On phones the tab moves to the top-right corner, above the hamburger
   toggle (which sits at right:24px, full header height, ~42-102px on a
   390px-wide phone) instead of floating over the bottom of the screen,
   where it sat over the keyboard/submit buttons while filling out a form.
   z-index above the sticky header's 100 so it renders on top of it instead
   of being hidden underneath. */
@media (max-width:839px){
  .ptany-tab{z-index:110}
  .ptany-tab-btn{top:5px;bottom:auto;right:16px;transform:none;writing-mode:horizontal-tb;border-radius:999px;padding:8px 14px;font-size:15px}
  .ptany-tab-panel{top:42px;bottom:auto;left:12px;right:12px;width:auto;max-width:none;border-radius:12px;transform:translateY(-16px)}
  .ptany-tab.is-open .ptany-tab-panel{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.ptany-tab-panel,.ptany-tab.is-open .ptany-tab-panel{transition:none}}

/* ---- footer — Ink, soft white text, red only on hover ---- */
.ptany-foot{background:var(--blue-deep);border-top:4px solid var(--blue-edge);color:rgba(255,255,255,.75);padding:64px 24px 28px}
.ptany-foot .ptany-logo{color:var(--white)}
.ptany-foot .ptany-logo-chip{height:42px;width:42px;flex:none;border-radius:6px;background:var(--white);display:inline-flex;align-items:center;justify-content:center}
.ptany-foot .ptany-logo-chip img{height:32px;width:auto;mix-blend-mode:multiply}
.foot-tag{font:600 11px/1.6 var(--disp);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:12px 0 0}
.foot-brand{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px;justify-content:space-between;margin-bottom:44px}
.foot-cta{font:600 17px/1.4 var(--body);color:var(--white)!important;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.4)}
.foot-cta:hover{color:var(--blue-light)!important;text-decoration-color:var(--blue-light)}
.foot-cols{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:44px}
.foot-col h5{font:600 11.5px/1.5 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-light);margin:0 0 14px}
.foot-col p{margin:0 0 6px;font-size:16px;line-height:1.6}
.foot-col a{color:rgba(255,255,255,.78)!important;font-size:16px;line-height:2;display:block}
/* Fax isn't a link (nobody dials a fax number by hand) — same size/line-
   height as its neighbors, slightly muted since it's the secondary
   lookup after phone. Kept out of the header masthead per Stuart: three
   lines read as too big there. */
.foot-fax{display:block;color:rgba(255,255,255,.55);font-size:16px;line-height:2}
.foot-col a:hover{color:var(--blue-light)!important}
/* Real Google Maps embed (replaced the .ph.map placeholder 2026-07-18,
   same iframe pattern as imaginetulum.com's footer map). A full-width band
   between the link columns and the legal line — it first lived inside the
   Visit column, which made that column twice the height of its neighbors
   and visibly tilted the footer. Grayscale at rest so it sits quietly on
   the Ink footer — full color when you reach for it, same logic as the
   site's links showing their red only on hover. */
.foot-map{margin:0 0 40px}
.foot-map iframe{display:block;width:100%;height:200px;border:0;border-radius:6px}
.foot-map a{color:rgba(255,255,255,.78)!important;font-size:15px;line-height:2}
.foot-map a:hover{color:var(--blue-light)!important}
.ptany-foot .ph.map .ph-tag{background:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}
.foot-legal{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.5)}
.foot-legal a{color:rgba(255,255,255,.72)!important}
.foot-legal a:hover{color:var(--blue-light)!important}
.ptany-foot :focus-visible{outline-color:var(--blue-light)}

/* ============================================================
   NAV — styling GeneratePress's real header/menu markup (verified
   via view-source, not guessed) to match the mockup's .nav design:
   white ground, Ink links/logo, Ink "button" on the CTA item.
   ============================================================ */
/* Fixed/sticky header, like imaginetulum.com — position:sticky instead of
   fixed so it stays in normal document flow (no manual top-padding needed
   elsewhere to compensate for overlap, unlike position:fixed). GeneratePress's
   own sticky header is a Premium-only feature, so this is plain CSS instead. */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid rgba(26,26,26,.1)}
/* Mobile hamburger pinned to the corner, out of normal flow, instead of
   sitting in the flex row beside the branding block. As the masthead's
   logo/name/contact type has grown, the branding block got wide enough
   at phone widths that the toggle button no longer fit beside it and
   wrapped onto its own row below — a ~70px dead-space gap before the
   hero. Position:absolute removes it from flex-wrap flow entirely, so
   it can't get pushed down no matter how wide the text runs. */
@media (max-width: 839px){
  .site-header .inside-header{position:relative}
  .mobile-menu-control-wrapper{position:absolute;top:0;right:24px;height:100%;display:flex!important;align-items:center}
  .site-branding-container{max-width:calc(100% - 60px)}
}
.site-header .inside-header{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;padding:18px 24px;max-width:1040px}
.site-branding-container{display:flex;align-items:center;gap:14px}
/* flex-shrink:0 matters here — .site-logo is a flex child of
   .site-branding-container, and the default flex-shrink:1 let it get
   compressed narrower than its natural width whenever the masthead
   name/contact text next to it needed the room (mobile, tighter widths
   especially). Since the <img> has height fixed at 63px but width:auto
   capped by the theme's max-width:100% image reset, the shrunk parent
   squashed the logo out of its true aspect ratio instead of just
   clipping or wrapping. Never happened on desktop, where there's
   always slack in the row. */
.site-logo{margin:0;flex-shrink:0}
.site-logo img{height:63px;width:auto;flex:none;mix-blend-mode:multiply}
.site-branding{margin:0}
/* Full name masthead (2026-07-18) replaced the short "PTANY" wordmark —
   see the ptany_masthead_output filter in functions.php for the markup
   this styles. Serif small-caps echoes the hero identity line and the
   real letterhead (same words, same voice, on purpose — see the redundancy
   note left for Stuart in Visual Identity.md/Work Log). */
.site-branding .main-title{margin:0;font-size:1em;line-height:1}
/* Direct-child combinator (>) matters here: without it, this also matched
   the phone <a> nested inside .ptany-contact-line (a descendant, not a
   child, of .main-title) and forced THAT link to display:block too —
   dropping "(212) 366-4450" onto its own line no matter what white-space
   the contact span had. Real bug, not a caching issue (confirmed after
   ruling out HCDN/browser cache first). */
.site-branding .main-title > a{display:block;color:var(--ink)!important}
.ptany-name-line{display:block;font:400 18px/1.3 var(--serif);font-variant-caps:small-caps;letter-spacing:.03em}
/* white-space:nowrap here too, not just the desktop media query below —
   a browser window narrower than 840px (or an actual phone) falls back
   to these base rules, and without nowrap here the contact line was
   free to wrap onto two lines there even though it fit fine at 1440px. */
.ptany-contact-line{display:block;margin-top:4px;font:400 14px/1.4 var(--serif);font-variant-caps:small-caps;letter-spacing:.03em;color:rgba(26,26,26,.55);white-space:nowrap}
.ptany-contact-line a{color:inherit!important;text-decoration:none}
.ptany-contact-line a:hover{color:var(--macoun-deep)!important}

.main-navigation{background:transparent}
.main-navigation .inside-navigation{max-width:1040px}
/* NOTE: menu display:flex lives in the desktop @media block below, not here.
   An earlier version set it globally with an ID selector (#primary-menu .menu),
   which outranked GeneratePress's own mobile "hide the menu until toggled"
   rule on specificity and forced the full menu list open on every screen size —
   the "list of choices instead of a hamburger" bug. Below 840px, GP's native
   toggle behavior now runs completely untouched. */
#primary-menu .menu-item a{font:600 15.5px/1 var(--body);color:var(--ink)!important;padding:8px 0}
#primary-menu .menu-item a:hover{color:var(--macoun-deep)!important}
#primary-menu .menu-item.ptany-nav-cta{margin-left:6px}
/* Nav CTA button: same blue as .btn, keeping the plain menu-link font from
   the rule above (sans, 15.5px) so it sits naturally in the menu row. */
#primary-menu .menu-item.ptany-nav-cta a{background:var(--blue);color:var(--white)!important;padding:12px 22px;border-radius:6px;transition:background .15s}
#primary-menu .menu-item.ptany-nav-cta a:hover{background:var(--blue-hover);color:var(--white)!important}

/* ============================================================
   DESKTOP — real breakpoint (mockup used a container query since
   it had no true viewport; a real page just needs a media query).
   ============================================================ */
@media (min-width: 840px){
  #primary-menu .menu{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

  /* Masthead spans full width, centered as a unit; nav drops to its own
     row below with a thin rule — Stuart's ask, echoing a letterhead
     (logo + centered name + contact line beneath) rather than logo/nav
     sharing one inline row. First tried spreading name-left/contact-right
     across the row — Stuart's call was centered instead, contact stacked
     below the name, not beside it. */
  /* Logo above the name was tried 2026-07-18 (letterhead-style, per
     Stuart's own reference file) and measured 283px tall — 31% of a
     900px viewport for a sticky header. Stuart's own call per his
     stated fallback: too deep, reverted to side-by-side. */
  .site-branding-container{width:100%;justify-content:center}
  .site-branding{flex:none}
  .site-branding .main-title{display:flex;flex-direction:column;align-items:center;gap:3px}
  /* Name reads as one line at this width — the block-stacked spans were
     only for the mobile wrap ("Physical Therapy Associates" / "of New
     York"); a plain space (in the markup, functions.php) joins them here. */
  .ptany-name-line{display:inline;font-size:28px;letter-spacing:.04em}
  .ptany-contact-line{margin-top:0;font-size:18px;white-space:nowrap}
  /* Two levels needed, not one: .inside-navigation is itself a flex row,
     and .main-nav (#primary-menu) is a flex ITEM in it that doesn't grow
     by default (flex-grow:0) — so it was shrink-wrapped to 718px instead
     of filling the ~992px nav bar, leaving the <ul> inside nothing to
     center within regardless of its own width:100%. flex:1 on .main-nav
     is the actual fix; width:100% on the <ul> then has real room to use. */
  .main-nav{flex:1}
  #primary-menu .menu{width:100%;justify-content:center}

  #site-navigation{width:100%;border-top:1px solid rgba(26,26,26,.1);margin-top:16px}
  #site-navigation .inside-navigation{padding-top:14px}

  .ptany-page{font-size:19px}
  .sec{padding:80px 48px}
  .gray-band:has(+ .gray-band){padding-bottom:40px}
  .gray-band + .gray-band{padding-top:40px}
  body:not(.home) .ptany-page > .sec:first-child,body:not(.home) .ptany-page > .wp-block-group__inner-container > .sec:first-child{padding-top:56px}
  .hero{padding-top:20px;padding-bottom:28px}
  .eyebrow{font-size:13.5px}
  /* Was 56px — dominated one/two-word titles (Services, Our Team)
     before any real content, especially reinforced by the small-caps
     serif treatment reading larger than its pixel size. 44px keeps it
     the clear biggest text on the page without overpowering the
     29px/38px h2s below it. */
  .ptany-page h1{font-size:44px}
  .ptany-page h2{font-size:38px}
  body:not(.home) .ptany-page h2{font-size:34px}
  #services h1,#services h2{font-size:38px}
  .hero-identity{font-size:22px}

  .hero .sec-in{display:flex;align-items:center;gap:72px}
  .hero-copy{flex:1}
  .hero-shot{flex:1;min-height:400px;align-self:stretch;aspect-ratio:auto}

  .stat-grid{grid-template-columns:repeat(4,1fr);gap:0 40px;margin-top:48px}
  .stat::before{margin-bottom:22px}
  .stat .stat-num{font-size:46px;margin-bottom:12px}

  .pt-card{padding:60px 64px;border-radius:12px}
  .pt-card-grid{flex-direction:row;align-items:stretch;gap:56px}
  .pt-copy{flex:1.05}
  .pt-shot{flex:1;aspect-ratio:auto;min-height:320px;align-self:stretch}
  .pt-card h3{font-size:42px}
  .svc-hero-card{padding:56px 60px}
  .svc-hero-card h3{font-size:40px}
  .svc-people{gap:80px;margin-top:32px}
  .svc-person{width:150px}
  .svc-person-photo{width:130px}
  .svc-person-name{font-size:17px}
  .svc-card-photo{width:80px}
  .svc-grid{grid-template-columns:repeat(3,1fr);gap:20px}

  /* This is the full roster (5 people), not a sampler — center the card
     groups and open up the gaps so the section reads as a complete team
     presented deliberately, not a left-stacked list with leftover space.
     Section heading stays left-aligned like every other section's. */
  .founder-grid{grid-template-columns:1fr 1fr;gap:44px;max-width:760px;margin-left:auto;margin-right:auto}
  .guestppl-grid{grid-template-columns:repeat(3,1fr);gap:32px;max-width:760px;margin-left:auto;margin-right:auto}
  .partner-line{max-width:56ch;margin-left:auto;margin-right:auto;text-align:center}
  .team-link{display:block;text-align:center}

  .proof-grid{flex-direction:row;gap:80px;align-items:flex-start}
  .proof-badge{flex:0 0 220px;padding-top:8px}
  .big-rating{font-size:64px}
  .quote{font-size:32px}

  /* margin auto matters here — max-width:820px inside the 1040px .sec-in
     column with no centering left it flush against the left edge, with
     220px of unbalanced whitespace on the right. Stuart: the whole
     section "leans left." */
  .fact-grid{grid-template-columns:1fr 1fr;gap:22px 44px}
  .contact-layout{grid-template-columns:minmax(0,360px) 1fr;gap:56px}
  .form-grid{grid-template-columns:1fr 1fr;gap:20px}
  .single-practitioner .featured-image:not(.ph-person-large){padding:40px 48px 0}
  .single-practitioner .featured-image.ph-person-large{margin:40px 0 0 48px}
  .contact-info{padding:36px 32px 32px}
  .divider span{white-space:nowrap;max-width:none}
  .ptany-foot{padding:84px 48px 30px}
  .foot-cols{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:44px}
  .foot-map iframe{height:280px}
}

/* Practitioner pages, desktop: photo beside the bio instead of stacked above
   it (2026-09-24). Both are direct children of .inside-article. */
@media (min-width:840px){
  .single-practitioner .inside-article{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:24px;align-items:start;max-width:1120px;margin:0 auto;padding:0}
  .single-practitioner .featured-image:not(.ph-person-large),.single-practitioner .featured-image.ph-person-large{grid-column:1;grid-row:1;margin:0;padding:0;width:300px;max-width:300px;position:sticky;top:208px;margin-top:104px;margin-left:48px}
  .single-practitioner .entry-content{grid-column:2;grid-row:1;min-width:0}
  /* Stuart's page only: .featured-image and .training-box are wrapped in
     .stuart-sidebar (see ptany_stuart_sidebar_open/close() in
     functions.php), which becomes the one grid item that's
     position:sticky — carrying the exact margin/top the photo used to
     carry on its own. Two independently sticky elements sharing one grid
     row didn't stay in sync while scrolling (see git history): each
     un-sticks once it nears its row's bottom edge, and the box's larger
     top offset meant it hit that limit sooner than the photo, so past a
     certain scroll depth the box kept scrolling while the photo stayed
     pinned, and the two crossed. Making the wrapper the only sticky
     element removes the problem rather than fixing the offsets. */
  .stuart-sidebar{grid-column:1;grid-row:1;width:300px;margin:104px 0 0 48px;position:sticky;top:208px}
  .stuart-sidebar .featured-image{position:static!important;margin:0!important;top:auto!important}
  .stuart-sidebar .training-box{margin:24px 0 0 0}
}
.single-practitioner .creds:empty{display:none}
.single-practitioner .creds{margin-bottom:28px!important}
.single-practitioner .bio-body:last-of-type p:only-child:empty{display:none}

/* Scheduling button, top-right corner of a practitioner's card (2026-09-26).
   Phone: pinned to the top-right of the whole card, in the band above the photo,
   so it is on screen the moment the page opens (its right edge lines up with the
   photo's). From 840px the photo sits beside the text, so the button moves to the
   top-right of the text column, level with the "back" link. Markup comes from
   ptany_practitioner_schedule_button() in functions.php. */
.single-practitioner .inside-article{position:relative}
.single-practitioner .prac-book{position:absolute;top:12px;right:54px;z-index:3;text-decoration:none}
@media (min-width:840px){
  .single-practitioner .sec-in{position:relative}
  .single-practitioner .prac-book{top:-2px;right:0}
}

/* Physical Therapy hero card: split layout with round portraits (2026-09-24) */
.svc-hero-card .svc-people{display:flex;justify-content:center;gap:32px;margin-top:28px}
.svc-hero-card .svc-person{width:132px}
.svc-hero-card .svc-person-photo{width:112px;border-radius:12px;aspect-ratio:1}
.svc-hero-card .svc-person-name{margin-top:14px;font-size:17px}
@media (min-width:840px){
  .svc-hero-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:64px;text-align:left;padding:56px 64px}
  .svc-hero-card p{margin:0;max-width:46ch}
  .svc-hero-card h3{font-size:40px;margin-bottom:14px}
  .svc-hero-card .svc-people{margin-top:0;gap:40px}
  .svc-hero-card .svc-person{width:172px}
  .svc-hero-card .svc-person-photo{width:156px}
  .svc-hero-card .svc-person-name{font-size:19px}
}

/* Hero: give the copy column a little more room (2026-09-25) */
@media (min-width:840px){
  .hero .sec-in{gap:56px}
  .hero-copy{flex:1.22}
  .hero-copy p{max-width:60ch}
}

/* Hero proof line + "What we treat" list (2026-09-25) */
.hero-proof{margin:22px 0 0;font:500 15.5px/1.4 var(--body);color:rgba(26,26,26,.75)}
.hero-stars{color:var(--macoun);letter-spacing:.12em;margin-right:6px}
#treat h2{font:400 29px/1.2 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em}
.treat-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:26px}
.treat-card{background:var(--white);border:1px solid rgba(26,26,26,.12);border-radius:8px;padding:26px 28px 20px}
.treat-card::before{content:"";display:block;width:30px;height:3px;border-radius:2px;background:var(--blue);margin:0 0 14px}
.treat-card h3{margin:0 0 10px;font:400 23px/1.25 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink)}
.treat-card ul{list-style:none;margin:0;padding:0}
.treat-card li{padding:10px 0;border-top:1px solid rgba(26,26,26,.09);font-size:16.5px;line-height:1.4;color:rgba(26,26,26,.88)}
.treat-card li:first-child{border-top:0}
@media (min-width:700px){.treat-grid{grid-template-columns:1fr 1fr;gap:24px}}
@media (min-width:960px){#treat h2{font-size:38px}}

/* Subway line badges (MTA colors) */
.mta{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;font:700 .82em/1 var(--disp);color:#fff;vertical-align:middle;margin:0 1px}
.mta-y{background:#FCCC0A;color:#000}
.mta-o{background:#FF6319}
.mta-g{background:#00933C}
.mta-r{background:#EE352E}
.mta-l{background:#A7A9AC}

/* Our Story: success statement in a side box beside the intro */
.story-top{display:grid;grid-template-columns:1fr;gap:24px;margin:6px 0 8px}
.story-promise{order:-1;margin:0;padding:28px 32px;background:#EAF0F6;border-radius:10px}
.story-promise-label{display:block;margin:0 0 10px;font:600 11.5px/1.5 var(--disp);letter-spacing:.13em;text-transform:uppercase;color:rgba(57,91,129,.85)}
.story-promise p{margin:0;max-width:none;font:italic 400 28px/1.3 var(--serif);color:var(--blue)}
@media (min-width:840px){
  .story-top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
  .story-promise{order:0;margin-top:0}
  .story-promise p{font-size:32px}
  .story-intro .lede{margin:0;max-width:none;font-size:21px;line-height:1.6}
}

/* Our Story: headings left, text right on wide screens */
@media (min-width:900px){
  .story-page .sec-in{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,2fr);column-gap:56px;row-gap:0;align-items:start}
  .story-page .sec-in>*{grid-column:1/-1}
  .story-page .sec-in>h2{grid-column:1;margin:52px 0 0!important}
  .story-page .sec-in>.bio-body{grid-column:2;margin:52px 0 0!important}
  .story-page .sec-in>div:not(.bio-body):not(.story-top){margin-top:44px}
  .story-page .sec-in>.bio-body p:last-child{margin-bottom:0}
}

/* Scheduling hub */
.sched-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:34px}
@media (min-width:760px){.sched-grid{grid-template-columns:1fr 1fr;gap:24px}}
.sched-card{display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(26,26,26,.12);border-radius:10px;padding:30px 30px 28px}
.sched-card--primary{border-color:rgba(57,91,129,.45);box-shadow:0 2px 14px rgba(26,26,26,.06)}
.sched-card--new{background:#EAF0F6;border-color:transparent}
.sched-card p{margin:0 0 20px;max-width:46ch;color:rgba(26,26,26,.85)}
.sched-who{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.sched-photo{flex:none;width:84px;height:84px;border-radius:12px;overflow:hidden;background:var(--gray-neutral)}
.sched-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sched-name{display:block;font:400 26px/1.15 var(--serif);font-variant-caps:small-caps;letter-spacing:.02em;color:var(--ink)}
.sched-role{display:block;margin-top:6px;font:600 11.5px/1.4 var(--disp);letter-spacing:.11em;text-transform:uppercase;color:rgba(26,26,26,.55)}
.sched-title{margin:0 0 14px!important;font:400 28px/1.2 var(--serif)!important;font-variant-caps:small-caps!important;letter-spacing:.02em!important;color:var(--ink)}
.sched-page .lede{max-width:66ch}
.sched-actions{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.sched-card .btn.alt{background:var(--white);color:var(--blue)!important;box-shadow:inset 0 0 0 1.5px var(--blue)}
.sched-card .btn.alt:hover{background:#EAF0F6}
.sched-list{list-style:none;margin:2px 0 0;padding:0}
.sched-list li{border-top:1px solid rgba(26,26,26,.1)}
.sched-list li:first-child{border-top:0}
.sched-list a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;color:var(--ink)!important;text-decoration:none}
.sched-list a strong{display:block;font:600 16.5px/1.3 var(--body)}
.sched-list a span:first-child{font:400 14.5px/1.35 var(--body);color:rgba(26,26,26,.65)}
.sched-go{flex:none;font:600 14.5px/1 var(--body);color:var(--blue)}
.sched-list a:hover .sched-go{text-decoration:underline}
.sched-notes{display:grid;grid-template-columns:1fr;gap:10px 40px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(26,26,26,.12)}
@media (min-width:760px){.sched-notes{grid-template-columns:1fr 1fr}}
.sched-notes p{margin:0;font-size:16px;line-height:1.5;color:rgba(26,26,26,.82)}
.sched-notes strong{display:block;margin-bottom:2px;font:600 11.5px/1.5 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:rgba(26,26,26,.55)}