/* ==========================================================================
   Bethesda Scoliosis & Posture - v3 (taste-skill / high-end-visual-design)
   Vibe: Soft Structuralism (white/silver, bold grotesk, diffused ambient shadows).
   Layout: Asymmetrical Bento + Editorial Split hero.
   Signatures: double-bezel hardware cards, fluid island nav, custom cubic-bezier,
   blur-scroll entries, button-in-button CTAs. Crimson is the single accent.
   Type: Clash Display (display) + Plus Jakarta Sans (UI/body).
   ========================================================================== */

:root {
  --paper:   #fbfbfc;
  --silver:  #f1f2f4;
  --silver2: #e9ebee;
  --ink:     #101319;
  --ink-70:  rgba(16,19,25,.70);
  --ink-55:  rgba(16,19,25,.55);
  --ink-40:  rgba(16,19,25,.40);
  --ink-08:  rgba(16,19,25,.08);
  --ink-05:  rgba(16,19,25,.05);
  --line:    rgba(16,19,25,.09);
  --crimson: #c4152b;
  --crimson2:#a3101f;
  --crimson-wash: rgba(196,21,43,.06);

  --font-display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --e:  cubic-bezier(0.32, 0.72, 0, 1);
  --e2: cubic-bezier(0.22, 1, 0.36, 1);

  --r-out: 30px; --r-in: 23px; --r-pill: 999px;

  --sh-soft: 0 30px 60px -30px rgba(16,19,25,.22), 0 10px 24px -14px rgba(16,19,25,.10);
  --sh-lift: 0 48px 90px -34px rgba(16,19,25,.30), 0 14px 30px -14px rgba(16,19,25,.14);
  --wrap: 1300px;
  --pad: clamp(1.15rem, 4vw, 3rem);
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { overflow-x: clip; }
body {
  margin: 0; font-family: var(--font); background: var(--paper); color: var(--ink);
  font-size: 1.0625rem; line-height: 1.6; overflow-x: clip;
  background-image: radial-gradient(120% 60% at 50% -10%, #ffffff 0%, var(--paper) 40%, var(--silver) 130%);
  background-attachment: fixed;
}
::selection { background: var(--crimson); color: #fff; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 6px; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: .96; letter-spacing: -.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(5rem, 11vw, 10rem); position: relative; }
.section-sm { padding-block: clamp(3rem, 6vw, 5.5rem); position: relative; }

.h-hero { font-size: clamp(3rem, 8.6vw, 7.6rem); line-height: .9; letter-spacing: -.035em; }
.h-xl { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: .96; letter-spacing: -.03em; }
.h-lg { font-size: clamp(1.75rem, 3.2vw, 2.9rem); line-height: 1.0; letter-spacing: -.025em; }
.crimson { color: var(--crimson); }
.body-lg { font-size: clamp(1.02rem, 1.25vw, 1.22rem); line-height: 1.55; color: var(--ink-55); }
.measure { max-width: 56ch; }

/* Eyebrow badge */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid var(--line); background: var(--ink-05); border-radius: var(--r-pill);
  padding: .38rem .95rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .22em;
  font-weight: 600; color: var(--ink-70);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); }
.eyebrow.on-dark { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); }

/* ---------- Double-bezel card ---------- */
.bezel { background: var(--ink-05); border: 1px solid var(--line); border-radius: var(--r-out); padding: 7px; height: 100%; transition: transform .6s var(--e), box-shadow .6s var(--e); }
.bezel-in { background: #fff; border-radius: var(--r-in); box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 0 0 1px rgba(16,19,25,.02); height: 100%; padding: clamp(1.5rem, 2.4vw, 2.4rem); position: relative; overflow: hidden; }
.bezel:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }

/* ---------- Buttons (button-in-button) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .85rem; border: none; cursor: pointer;
  background: var(--crimson); color: #fff; border-radius: var(--r-pill);
  padding: .5rem .55rem .5rem 1.4rem; font-family: var(--font); font-weight: 600; font-size: .98rem;
  transition: transform .5s var(--e), background-color .45s var(--e), color .45s var(--e);
  will-change: transform;
}
.btn .knob { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; transition: background .45s var(--e); flex: none; }
.btn .knob svg { width: 17px; height: 17px; stroke: currentColor; transition: transform .55s var(--e); }
.btn:hover { transform: translateY(-2px); background: var(--crimson2); }
.btn:hover .knob svg { transform: translate(3px, -1px); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost .knob { background: var(--ink-05); }
.btn.ghost:hover { background: var(--crimson); color: #fff; box-shadow: none; }
.btn.ghost:hover .knob { background: rgba(255,255,255,.14); }
.btn.on-dark { background: var(--paper); color: var(--ink); }
.btn.on-dark .knob { background: var(--ink-08); }
.btn.on-dark:hover { background: var(--crimson); color: #fff; }
.btn.on-dark:hover .knob { background: rgba(255,255,255,.16); }
.btn.lg { padding: .6rem .65rem .6rem 1.7rem; font-size: 1.05rem; }
.btn.lg .knob { width: 42px; height: 42px; }

.tlink { display: inline-flex; align-items: center; gap: .5rem; color: var(--crimson2); font-weight: 600; }
.tlink svg { width: 16px; height: 16px; stroke: currentColor; transition: transform .45s var(--e); }
.tlink:hover svg { transform: translateX(5px); }

/* ---------- Fluid island nav ---------- */
.island { position: fixed; top: 1rem; left: 0; right: 0; z-index: 300; display: flex; justify-content: center; pointer-events: none; padding-inline: 1rem; }
.island-in {
  pointer-events: auto; display: flex; align-items: center; gap: 1.7rem; max-width: 100%;
  background: rgba(255,255,255,.93); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(16,19,25,.08); border-radius: var(--r-pill);
  padding: .5rem .5rem .5rem 1.25rem; box-shadow: 0 14px 40px -18px rgba(16,19,25,.28);
}
.island .brand { display: flex; align-items: center; gap: .55rem; }
.island .brand img { height: 56px; width: auto; }
.island .brand b { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; white-space: nowrap; }
.island .links { display: flex; align-items: center; gap: 1.5rem; }
.island .links a { font-size: .9rem; font-weight: 500; color: var(--ink-70); transition: color .3s var(--e); white-space: nowrap; }
.island .links a:hover, .island .links a.active { color: var(--crimson); }
.island .btn.nav-cta { padding: .42rem .48rem .42rem 1.05rem; font-size: .88rem; }
.island .btn.nav-cta .knob { width: 30px; height: 30px; }
.burger { display: none; width: 42px; height: 42px; border-radius: 50%; background: var(--crimson); border: none; cursor: pointer; place-items: center; }
.burger span { display: block; width: 16px; height: 1.5px; background: var(--paper); position: relative; transition: transform .4s var(--e), opacity .3s var(--e); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--paper); transition: transform .4s var(--e); }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }
.island.open .burger span { background: transparent; }
.island.open .burger span::before { transform: translateY(5px) rotate(45deg); }
.island.open .burger span::after { transform: translateY(-5px) rotate(-45deg); }

.island-menu { display: none; }
@media (max-width: 880px) {
  .island .links, .island .btn.nav-cta { display: none; }
  .burger { display: grid; }
  .island-in { gap: 1rem; }
  .island-menu {
    display: flex; position: fixed; inset: 0; z-index: 250; flex-direction: column; justify-content: center; gap: 1.2rem;
    padding: var(--pad); background: rgba(251,251,252,.86); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px);
    opacity: 0; pointer-events: none; transition: opacity .5s var(--e);
  }
  .island.open ~ .island-menu, body.menu-open .island-menu { opacity: 1; pointer-events: auto; }
  .island-menu a { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.2rem); color: var(--ink); transform: translateY(20px); opacity: 0; transition: transform .6s var(--e), opacity .6s var(--e); }
  body.menu-open .island-menu a { transform: none; opacity: 1; }
  body.menu-open .island-menu a:nth-child(2){ transition-delay:.06s } body.menu-open .island-menu a:nth-child(3){ transition-delay:.12s } body.menu-open .island-menu a:nth-child(4){ transition-delay:.18s } body.menu-open .island-menu a:nth-child(5){ transition-delay:.24s }
  .island-menu a:hover { color: var(--crimson); }
}

/* ---------- Hero (editorial split) ---------- */
.hero { min-height: 100dvh; display: flex; align-items: center; padding-top: 8rem; padding-bottom: 4rem; }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; width: 100%; }
.hero h1 { font-size: clamp(3rem, 8.4vw, 7.4rem); line-height: .9; letter-spacing: -.035em; }
.hero .sub { max-width: 42ch; color: var(--ink-55); margin-top: 1.9rem; font-size: clamp(1.05rem, 1.3vw, 1.28rem); line-height: 1.5; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.3rem; align-items: center; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-glow { position: absolute; inset: -14% -20% -14% -8%; z-index: -1; background: radial-gradient(52% 54% at 55% 47%, rgba(196,21,43,.17), transparent 72%); filter: blur(28px); }
@media (prefers-reduced-motion: no-preference) { .hero-glow { animation: glowPulse 7s ease-in-out infinite; } }
@keyframes glowPulse { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.hero-visual .hero-img {
  width: 132%; height: auto; margin: 0 -26% 0 -6%; will-change: transform;
  filter: contrast(1.05) saturate(1.03);
  -webkit-mask-image: radial-gradient(94% 90% at 52% 47%, #000 55%, transparent 100%);
  mask-image: radial-gradient(94% 90% at 52% 47%, #000 55%, transparent 100%);
}

/* Hero word underline (draw-in) - signature detail */
.uword { position: relative; color: var(--crimson); white-space: nowrap; }
.uword .underline { position: absolute; left: -2%; width: 104%; bottom: -.18em; height: .4em; overflow: visible; pointer-events: none; }
.uword .underline path { fill: none; stroke: var(--crimson); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 640; stroke-dashoffset: 640; }
@media (prefers-reduced-motion: no-preference) { .uword .underline path { animation: draw 1.2s var(--e) 1.15s forwards; } }
@media (prefers-reduced-motion: reduce) { .uword .underline path { stroke-dashoffset: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; margin-inline: auto; }
  .hero-visual .hero-img { width: 100%; margin: 0; }
  .hero { min-height: auto; padding-top: 7.5rem; }
}

/* ---------- Full-screen hero ---------- */
.hero-full { position: relative; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; }
.hero-full .hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-full .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: 62% 45%; }
@media (prefers-reduced-motion: no-preference) { .hero-full .hero-bg img { animation: kenburns 26s ease-in-out infinite alternate; } }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.15); } }
.hero-full .scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(12,14,18,.88) 0%, rgba(12,14,18,.58) 34%, rgba(12,14,18,.16) 62%, rgba(12,14,18,0) 100%),
    linear-gradient(0deg, rgba(12,14,18,.58), transparent 46%),
    radial-gradient(72% 62% at 16% 44%, rgba(196,21,43,.24), transparent 60%);
}
.hero-full .wrap { width: 100%; max-width: 1600px; }
.hero-full .hero-content { color: #fff; max-width: 680px; padding-top: 5rem; }
.hero-full h1 { color: #fff; font-size: clamp(3rem, 8.6vw, 7.6rem); line-height: .9; letter-spacing: -.035em; }
.hero-full .sub { color: rgba(255,255,255,.86); max-width: 44ch; margin-top: 1.7rem; font-size: clamp(1.05rem, 1.3vw, 1.28rem); line-height: 1.5; }
.hero-full .hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; align-items: center; }
.hero-full .tlink { color: #fff; }
.hero-full .tlink:hover { color: #ffd9dd; }
@media (max-width: 640px) { .hero-full .hero-content { padding-top: 6rem; } }

/* ---------- Bento grid ---------- */
.split-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: end; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
@media (max-width: 820px) { .split-head { grid-template-columns: 1fr; gap: 1.2rem; } }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
@media (max-width: 880px) { .c2, .c3, .c4 { grid-column: span 3; } }
@media (max-width: 560px) { .c2, .c3, .c4 { grid-column: span 6; } }

/* condition / generic tile */
.tile { display: flex; flex-direction: column; height: 100%; }
.tile .tnum { font-family: var(--font); font-size: .72rem; letter-spacing: .16em; color: var(--ink-40); font-weight: 600; }
.tile .tname { font-family: var(--font-display); font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.0; margin-top: .5rem; letter-spacing: -.02em; }
.tile .tname .crimson { transition: color .4s var(--e); }
.tile .tdesc { color: var(--ink-55); font-size: .95rem; line-height: 1.5; margin-top: .7rem; }
.tile .tgo { margin-top: auto; padding-top: 1.4rem; color: var(--crimson); display: inline-flex; align-items: center; gap: .4rem; opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--e), transform .4s var(--e); }
.tile .tgo svg { width: 16px; height: 16px; stroke: currentColor; }
.bezel:hover .tile .tgo { opacity: 1; transform: none; }
.tile.feature { justify-content: flex-end; }
.tile.feature .tname { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.tile.feature .tdesc { max-width: 40ch; }
.bezel.feature-bezel .bezel-in { background: linear-gradient(150deg, #fff, #f6eef0); }
.tile .badge { position: absolute; top: 1.4rem; right: 1.4rem; width: 46px; height: 46px; border-radius: 14px; background: var(--crimson-wash); color: var(--crimson); display: grid; place-items: center; }
.tile .badge svg { width: 24px; height: 24px; stroke: currentColor; }

/* ---------- Dark treatments band ---------- */
.dark { background: linear-gradient(160deg, #c4152b, #9c1020); color: #fff; border-radius: clamp(28px, 4vw, 48px); padding: clamp(2.25rem, 5vw, 4.5rem); }
.dark .h-lg, .dark h2 { color: #fff; }
.dark .body-lg { color: rgba(255,255,255,.82); }
.dark .eyebrow.on-dark { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }
.dark .eyebrow .dot { background: #fff; }
.dark .bezel { background: rgba(0,0,0,.16); border-color: rgba(255,255,255,.18); }
.dark .bezel:hover { box-shadow: 0 40px 70px -30px rgba(70,0,8,.55); }
.dark .bezel-in { background: rgba(0,0,0,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.12); }
.dark .tile .tnum { color: rgba(255,255,255,.6); }
.dark .tile .tname { color: #fff; }
.dark .tile .ttag { font-size: .68rem; text-transform: uppercase; letter-spacing: .2em; color: #ffd9dd; font-weight: 600; }
.dark .tile .tdesc { color: rgba(255,255,255,.78); }
.dark .tile .badge { background: rgba(0,0,0,.22); color: #fff; }

/* ---------- Doctor ---------- */
.doctor-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.doctor-photo .bezel-in { padding: 6px; }
.doctor-photo img { width: 100%; aspect-ratio: 4/4.6; object-fit: cover; object-position: center top; border-radius: 18px; filter: grayscale(1) contrast(1.04); transition: filter .8s var(--e); }
.doctor-photo:hover img { filter: grayscale(0) contrast(1.02); }
.pull { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.14; letter-spacing: -.02em; }
.pull .crimson { color: var(--crimson); }
.attrib { margin-top: 1.8rem; }
.attrib b { font-family: var(--font-display); font-weight: 600; display: block; font-size: 1.1rem; }
.attrib span { color: var(--ink-55); font-size: .92rem; }
.doc-creds { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.doc-creds span { font-size: .8rem; border: 1px solid var(--line); background: var(--ink-05); border-radius: var(--r-pill); padding: .4rem .95rem; color: var(--ink-70); }
@media (max-width: 820px) { .doctor-grid { grid-template-columns: 1fr; } .doctor-photo { max-width: 380px; } }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.step .snum { font-family: var(--font-display); font-size: 1rem; color: var(--crimson); font-weight: 600; }
.step h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 1rem 0 .5rem; }
.step p { color: var(--ink-55); font-size: .93rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .steps { grid-template-columns: 1fr; } }

/* ---------- CTA ---------- */
.cta-wrap .bezel { background: var(--ink-05); }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.cta-grid .body-lg { color: var(--ink-55); }
.cta-phone { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); display: inline-block; margin-top: 1.4rem; }
.cta-phone:hover { color: var(--crimson); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .8rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-55); font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: var(--font); font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; transition: border-color .3s var(--e), box-shadow .3s var(--e);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-40); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 3px var(--crimson-wash); }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { background: linear-gradient(180deg, #c4152b, #8e1020); color: rgba(255,255,255,.8); border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0; margin-top: 2rem; padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; }
.foot a { color: rgba(255,255,255,.8); transition: color .3s var(--e); } .foot a:hover { color: #fff; }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 2.5rem; }
.foot h4 { font-family: var(--font); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 1.1rem; font-weight: 600; }
.foot .flist { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .95rem; }
.foot .fbrand b { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; display: block; line-height: .95; }
.foot .fbrand p { max-width: 32ch; margin-top: 1rem; font-size: .95rem; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.22); font-size: .82rem; color: rgba(255,255,255,.72); }
.foot-bottom a { color: #fff; font-weight: 600; }
@media (max-width: 820px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .foot-top { grid-template-columns: 1fr; } }

/* ---------- Interior page ---------- */
.page-hero { padding-top: 9rem; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.crumbs { font-size: .8rem; letter-spacing: .04em; color: var(--ink-40); display: flex; gap: .55rem; margin-bottom: 1.6rem; }
.crumbs a:hover { color: var(--crimson); }
.wide-img .bezel-in { padding: 7px; }
.wide-img img { width: 100%; aspect-ratio: 16/6.4; object-fit: cover; object-position: center 32%; border-radius: 18px; filter: grayscale(.16) contrast(1.03); }
.prose h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0 0 1.1rem; letter-spacing: -.02em; }
.prose p { color: var(--ink-70); font-size: 1.08rem; line-height: 1.7; margin-bottom: 1.1rem; max-width: 66ch; }
.prose .lead-p { font-size: 1.28rem; color: var(--ink); }
.rule-red { width: 60px; height: 3px; background: var(--crimson); border-radius: 2px; margin-bottom: 1.5rem; }
.callout .bezel-in { padding: 1.6rem 1.8rem; }
.callout p { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.32; color: var(--ink); margin: 0; max-width: none; }
.sym-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.sym { display: flex; gap: .85rem; padding: .85rem 0; border-bottom: 1px solid var(--line); color: var(--ink-70); align-items: baseline; }
.sym .n { color: var(--crimson); font-size: .78rem; font-weight: 600; }
@media (max-width: 700px) { .sym-grid { grid-template-columns: 1fr; } }
.aside .bezel-in { padding: 1.7rem; }
.aside h3 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 1rem; }
.aside .alist { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.aside .alist li { border-bottom: 1px solid var(--line); }
.aside .alist a { display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; font-size: .95rem; color: var(--ink-70); }
.aside .alist a:hover { color: var(--crimson); }
.aside .alist svg { width: 15px; height: 15px; stroke: currentColor; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.faq summary { font-family: var(--font-display); font-size: 1.28rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { color: var(--crimson); font-size: 1.4rem; line-height: 1; transition: transform .4s var(--e); }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .fa-body { color: var(--ink-55); line-height: 1.6; padding-top: 1rem; max-width: 68ch; }
.aside-sticky { position: sticky; top: 100px; }

/* ---------- Scroll reveal (bulletproof, blur entry) ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { transition: opacity .9s var(--e), transform .9s var(--e), filter .9s var(--e); }
 .php.reveal-on [data-reveal]:not(.in) { opacity: 0; transform: translateY(40px) scale(.986); filter: blur(8px); }
  .d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }
}

.mt-x { margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.grain { display: none; }

/* staggered reveal for grids */
@media (prefers-reduced-motion: no-preference) {
  .bento > .bezel:nth-child(2) { transition-delay: .08s; }
  .bento > .bezel:nth-child(3) { transition-delay: .16s; }
  .bento > .bezel:nth-child(4) { transition-delay: .24s; }
  .bento > .bezel:nth-child(5) { transition-delay: .32s; }
  .steps > .bezel:nth-child(2) { transition-delay: .08s; }
  .steps > .bezel:nth-child(3) { transition-delay: .16s; }
  .steps > .bezel:nth-child(4) { transition-delay: .24s; }
}

/* ---------- Page-load choreography (hero + nav) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* nav island drops in from the top */
  .island-in { animation: navDrop 1s var(--e2) .1s both; }

  /* hero image fades up behind the scrim */
  .hero-full .hero-bg { animation: heroBgIn 1.3s var(--e2) both; }

  /* hero copy rises in, one line at a time */
  .hero-full .hero-content > * { animation: heroRise 1.1s var(--e2) both; }
  .hero-full .hero-content > .eyebrow  { animation-delay: .30s; }
  .hero-full .hero-content > h1        { animation-delay: .44s; }
  .hero-full .hero-content > .sub      { animation-delay: .68s; }
  .hero-full .hero-content > .hero-cta { animation-delay: .84s; }
}
@keyframes navDrop  { from { opacity: 0; transform: translateY(-22px); } }
@keyframes heroBgIn { from { opacity: 0; } }
@keyframes heroRise { from { opacity: 0; transform: translateY(36px); filter: blur(9px); } }


/* Studioality interior build components — 2026-07-21 */
.content-image{display:block;width:100%;max-height:34rem;object-fit:cover;border-radius:1.15rem;margin:1.5rem 0 1.75rem;border:1px solid rgba(22,22,22,.1); object-position: top;}
.content-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.25rem;padding:0;margin:1.4rem 0 0;list-style:none}
.content-list li{position:relative;padding:1rem 1rem 1rem 2.4rem;background:var(--paper,#f6f2ec);border:1px solid rgba(22,22,22,.08);border-radius:.8rem;color:var(--ink-70)}
.content-list li:before{content:"✓";position:absolute;left:1rem;color:var(--crimson);font-weight:700}
.resource-links{display:grid;gap:.75rem;margin-top:1.4rem}.resource-links .tlink{width:fit-content}
.media-frame{position:relative;overflow:hidden;border-radius:1.1rem;margin-top:1.6rem;background:#101010;aspect-ratio:16/9}.media-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.online-card{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(.5rem,2vw,1.5rem)}
.online-card h3{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05;margin:1rem 0}.online-card p{color:var(--ink-70);line-height:1.65}.portal-note{font-size:.9rem;margin-top:1rem}.portal-note a{color:inherit;font-weight:700}
.article-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:1.5rem}.article-card{overflow:hidden;border:1px solid rgba(22,22,22,.1);border-radius:1.1rem;background:#fff;box-shadow:0 14px 45px rgba(22,22,22,.05)}
.article-card>img{width:100%;aspect-ratio:16/9;object-fit:cover}.article-card-body{padding:1.35rem}.article-card h2{font-size:1.35rem;margin:.85rem 0}.article-card p{font-size:.96rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.article-image{display:block;max-width:100%;height:auto;border-radius:1rem;margin:1.3rem 0}.prose blockquote{border-left:3px solid var(--crimson);padding-left:1.25rem;color:var(--ink-70)}
@media(max-width:767px){.content-list,.article-grid{grid-template-columns:1fr}.article-card h2{font-size:1.25rem}}


/* 2026-07-21 hero QA fixes */
.article-hero-title{font-size:clamp(2.7rem,5.6vw,5.5rem)!important;max-width:24ch!important;overflow-wrap:anywhere}
.crumbs{flex-wrap:wrap}
@media(max-width:767px){.page-hero h1{overflow-wrap:anywhere}.article-hero-title{font-size:clamp(2.2rem,10vw,3.4rem)!important;line-height:.98}.crumbs{white-space:normal;row-gap:.35rem}}

/* 2026-07-31 current-site navigation + lead-path build */
.island .links{gap:.35rem}
.nav-group{position:relative}
.nav-group-toggle{display:inline-flex;align-items:center;gap:.35rem;border:0;background:transparent;color:var(--ink-70);font:500 .87rem/1 var(--font);padding:.72rem .62rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .3s var(--e),background-color .3s var(--e)}
.nav-group-toggle span{font-size:.78rem;transform:translateY(-1px);transition:transform .3s var(--e)}
.nav-group:hover .nav-group-toggle,.nav-group:focus-within .nav-group-toggle,.nav-group.open .nav-group-toggle,.nav-group.active .nav-group-toggle{color:var(--crimson);background:var(--crimson-wash)}
.nav-group:hover .nav-group-toggle span,.nav-group:focus-within .nav-group-toggle span,.nav-group.open .nav-group-toggle span{transform:rotate(180deg) translateY(1px)}
.nav-panel{position:absolute;top:calc(100% + .7rem);left:50%;min-width:250px;padding:.6rem;background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-soft);opacity:0;visibility:hidden;transform:translate(-50%,-8px);transition:opacity .25s var(--e),transform .25s var(--e),visibility .25s;z-index:320}
.nav-group:nth-last-child(-n+2) .nav-panel{left:auto;right:0;transform:translateY(-8px)}
.nav-group:hover .nav-panel,.nav-group:focus-within .nav-panel,.nav-group.open .nav-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-group:nth-last-child(-n+2):hover .nav-panel,.nav-group:nth-last-child(-n+2):focus-within .nav-panel,.nav-group:nth-last-child(-n+2).open .nav-panel{transform:translateY(0)}
.island .nav-panel a{display:block;padding:.68rem .78rem;border-radius:11px;font-size:.84rem;line-height:1.25;color:var(--ink-70);white-space:normal}
.island .nav-panel a:hover,.island .nav-panel a.active{color:var(--crimson);background:var(--crimson-wash)}

.lead-paths{padding-top:clamp(3.5rem,7vw,6.5rem);padding-bottom:clamp(3rem,6vw,5.5rem);background:linear-gradient(180deg,#fff 0%,var(--paper) 100%)}
.lead-paths-head{margin-bottom:clamp(2rem,4vw,3rem)}
.lead-path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.lead-path .bezel-in{display:flex;flex-direction:column;min-height:360px;padding:clamp(1.6rem,2.8vw,2.6rem)}
.lead-path-kicker{font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-40);font-weight:700}
.lead-path h3{font-size:clamp(1.9rem,3.2vw,2.5rem);margin-top:auto;padding-top:3rem;line-height:.95}
.lead-path p{margin-top:1.1rem;color:var(--ink-55);font-size:.96rem;line-height:1.58}
.lead-path-action{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--crimson);font-size:.88rem;font-weight:700}
.lead-path:hover .lead-path-action span{transform:translateX(4px)}
.lead-path-action span{transition:transform .35s var(--e)}
.lead-path-cta{display:flex;justify-content:flex-end;align-items:center;gap:1.2rem;margin-top:1.4rem}
.lead-path-cta p{color:var(--ink-55)}

/* Evidence and supportive-care imagery */
.evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.evidence-grid figure{margin:0;padding:1rem;border:1px solid var(--line);border-radius:20px;background:#fff}
.evidence-grid img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:12px;background:#f6f7f8}
.evidence-grid figcaption{margin-top:.75rem;color:var(--ink-55);font-size:.82rem;line-height:1.45}
.support-photo{margin:0;display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);overflow:hidden;border-radius:28px;background:#111821;color:#fff}
.support-photo img{width:100%;height:100%;min-height:360px;object-fit:cover}
.support-photo figcaption{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,4.5rem)}
.support-photo figcaption p{max-width:50ch;color:rgba(255,255,255,.72);margin-top:1rem}
.support-photo .eyebrow{color:rgba(255,255,255,.72);margin-bottom:1rem}
@media(max-width:760px){.evidence-grid,.support-photo{grid-template-columns:1fr}.support-photo img{min-height:260px}}

/* Current-site care imagery retained inside the approved design */
.photo-story-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(260px,.72fr) 132px;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.4rem)}
.recognition-badge{width:118px;max-height:184px;object-fit:cover;object-position:top;border-radius:18px;justify-self:end;box-shadow:0 14px 36px rgba(18,22,30,.12)}
.photo-story-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.5vw,1.25rem)}
.photo-story-card{margin:0;position:relative;overflow:hidden;border-radius:24px;background:#131922;min-height:300px;box-shadow:0 18px 44px rgba(18,22,30,.1)}
.photo-story-card img{width:100%;height:100%;min-height:300px;object-fit:cover;transition:transform .5s ease}
.photo-story-card::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent,rgba(9,13,18,.82));pointer-events:none}
.photo-story-card figcaption{position:absolute;z-index:1;left:1.1rem;right:1.1rem;bottom:1rem;color:#fff;font-weight:650;line-height:1.25}
.photo-story-card:hover img{transform:scale(1.035)}
@media(max-width:980px){.photo-story-head{grid-template-columns:1fr minmax(100px,132px)}.photo-story-head .body-lg{grid-column:1}.recognition-badge{grid-column:2;grid-row:1 / span 2}.photo-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.photo-story-head{grid-template-columns:1fr 92px;align-items:start}.recognition-badge{width:84px;border-radius:14px}.photo-story-grid{grid-template-columns:1fr}.photo-story-card,.photo-story-card img{min-height:260px}}

@media(max-width:1100px){
  body.menu-open{overflow:hidden}
  .island .links,.island .btn.nav-cta{display:none}
  .burger{display:grid}
  .island-in{gap:1rem}
  .island-menu{display:flex;position:fixed;inset:0;z-index:250;padding:6.8rem var(--pad) 2rem;background:rgba(251,251,252,.98);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px);opacity:0;pointer-events:none;transition:opacity .5s var(--e);overflow:auto}
  .island.open~.island-menu,body.menu-open .island-menu{opacity:1;pointer-events:auto}
  .mobile-nav-scroll{width:min(760px,100%);margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem;padding-bottom:2rem}
  .mobile-nav-group{display:flex;flex-direction:column;gap:.48rem}
  .mobile-nav-group>span{font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:var(--crimson);font-weight:700;margin-bottom:.35rem}
  .island-menu .mobile-nav-group a,.island-menu .mobile-nav-actions a{font-family:var(--font-display);font-size:clamp(1.1rem,3vw,1.55rem);line-height:1.15;color:var(--ink);opacity:1;transform:none;transition:color .3s var(--e)}
  .island-menu a:hover,.island-menu a.active{color:var(--crimson)}
  .mobile-nav-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.7rem;padding-top:1.4rem;border-top:1px solid var(--line)}
  .island-menu .mobile-nav-actions a{font-family:var(--font);font-size:.92rem;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:.72rem 1rem}
}
@media(max-width:860px){.lead-path-grid{grid-template-columns:1fr}.lead-path .bezel-in{min-height:300px}.lead-path h3{padding-top:2rem}.lead-path-cta{justify-content:flex-start;flex-wrap:wrap}}
@media(max-width:620px){.mobile-nav-scroll{grid-template-columns:1fr;gap:1.45rem}.island-menu{padding-top:6.5rem}.mobile-nav-actions{grid-column:auto}.lead-path-cta{align-items:flex-start;flex-direction:column}}

/* 2026-08-04 request-appointment conversion path */
.island .nav-book-link{
  margin-left:.15rem;padding:.58rem .72rem;border-left:1px solid var(--line);
  color:var(--ink-55);font-size:.78rem;font-weight:650;letter-spacing:.02em
}
.island .nav-book-link:hover{color:var(--crimson)}
.mobile-nav-actions .mobile-request-link{background:var(--crimson);border-color:var(--crimson)!important;color:#fff!important}
.mobile-nav-actions .mobile-request-link:hover{background:var(--crimson2);color:#fff!important}
.mobile-nav-actions .mobile-book-link{background:#fff;color:var(--ink)!important}

.appointment-hero{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.appointment-hero .h-hero{max-width:12ch}
.appointment-hero .body-lg{max-width:58ch;color:rgba(16,19,25,.62)}
.appointment-hero>.wrap>.eyebrow{margin-bottom:clamp(1rem,2vw,1.5rem)}
.appointment-section{padding-top:clamp(1rem,3vw,2.5rem);padding-bottom:clamp(4rem,8vw,7rem)}
.appointment-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.appointment-form-card{min-width:0}
.appointment-form-card:hover{transform:none;box-shadow:var(--sh-soft)}
.appointment-form-card .bezel-in{min-width:0;padding:clamp(1.1rem,4vw,2.8rem);overflow:visible}
#appointment-request-form{width:100%;min-width:0;max-width:100%}
.form-heading{padding-bottom:clamp(1.5rem,3vw,2.4rem);margin-bottom:clamp(1.5rem,3vw,2.2rem);border-bottom:1px solid var(--line)}
.form-heading h2,.appointment-option h2,.appointment-call h2{font-size:clamp(1.9rem,3.5vw,3.1rem);margin-top:1rem}
.form-heading p,.appointment-option p,.appointment-call p{color:rgba(16,19,25,.62);line-height:1.6;margin-top:.75rem}
.appointment-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 1rem}
.appointment-field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.appointment-field-wide{grid-column:1/-1}
.appointment-field[hidden]{display:none!important}
.appointment-field label{font-size:.73rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-70);font-weight:700}
.appointment-field label span{color:var(--crimson)}
.appointment-field input,.appointment-field select,.appointment-field textarea{
  width:100%;min-width:0;font:500 1rem/1.4 var(--font);color:var(--ink);background:var(--paper);
  border:1px solid rgba(16,19,25,.48);border-radius:15px;padding:.9rem 1rem;
  transition:border-color .25s var(--e),box-shadow .25s var(--e),background-color .25s var(--e)
}
.appointment-field textarea{resize:vertical;min-height:130px}
.appointment-field input::placeholder,.appointment-field textarea::placeholder{color:rgba(16,19,25,.62)}
.appointment-field input:hover,.appointment-field select:hover,.appointment-field textarea:hover{border-color:rgba(16,19,25,.62);background:#fff}
.appointment-field input:focus,.appointment-field select:focus,.appointment-field textarea:focus{
  outline:none;border-color:var(--crimson);background:#fff;box-shadow:0 0 0 4px var(--crimson-wash)
}
.appointment-captcha{width:100%;min-width:0;max-width:100%;margin-top:1.5rem;overflow:hidden}
.appointment-captcha .g-recaptcha{width:304px;max-width:100%;transform-origin:0 0}
.appointment-submit-row{display:flex;gap:1.2rem;align-items:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.appointment-submit-row p{max-width:34ch;color:rgba(16,19,25,.62);font-size:.8rem;line-height:1.5}
.appointment-submit-row .btn{flex:none}
.appointment-aside{position:sticky;top:7.5rem;display:grid;gap:1rem}
.appointment-option .bezel-in{padding:clamp(1.5rem,3vw,2.2rem)}
.appointment-option h2,.appointment-call h2{font-size:clamp(1.7rem,2.6vw,2.35rem)}
.appointment-book-link{margin-top:1.25rem}
.appointment-call{padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--line);border-radius:var(--r-out);background:linear-gradient(145deg,var(--silver),#fff)}
.appointment-call .cta-phone{font-size:clamp(1.65rem,3vw,2.2rem);margin-top:1.2rem}

@media(max-width:1100px){
  .island .nav-book-link{display:none}
}
@media(max-width:920px){
  .appointment-layout{grid-template-columns:1fr}
  .appointment-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .appointment-fields{grid-template-columns:1fr}
  .appointment-field-wide{grid-column:auto}
  .appointment-aside{grid-template-columns:1fr}
  .appointment-submit-row{align-items:flex-start;flex-direction:column}
  .appointment-submit-row .btn{width:100%;justify-content:space-between}
}
@media(max-width:420px){
  .appointment-page{--pad:.8rem}
  .appointment-form-card .bezel-in{padding:.75rem}
  .form-heading{padding:1rem .15rem 1.25rem;margin-bottom:1.25rem}
  .appointment-fields{gap:1rem}
  .appointment-captcha{height:64px}
  .appointment-captcha .g-recaptcha{max-width:none;transform:scale(.82)}
}