/* ============================================================
   Speciality Dental Clinic — v4
   Editorial yellow / navy system
   Display: Fraunces  ·  Text: Instrument Sans
   ============================================================ */

:root{
  /* ---- colour ---- */
  --ink:        #243B8C;   /* deep royal blue */
  --ink-deep:   #182A66;   /* one step down, for the footer */
  --ink-soft:   #3A52A8;
  --muted:      #566188;
  --faint:      #7480A6;

  --yellow:     #FFD645;   /* the spark on the badge, opened up */
  --yellow-dp:  #E8BE12;
  --yellow-pale:#FFF2C4;

  --cream:      #F4FAFB;   /* page ground — soft aqua */
  --hero-grad:  linear-gradient(155deg,#DCF1F3 0%,#E7F1FB 34%,#FBEBEF 68%,#F4EDFA 100%);
  --doodle-tint:#6E9FC4;
  --paper:      #FFFFFF;

  --line:       rgba(36,59,140,.15);
  --line-hard:  rgba(36,59,140,.30);
  --line-onyel: rgba(36,59,140,.22);

  --wa:         #1FA855;

  /* ---- shape ---- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow: 0 1px 2px rgba(24,42,102,.05), 0 12px 28px -14px rgba(24,42,102,.22);
  --shadow-lift: 0 2px 4px rgba(24,42,102,.06), 0 22px 46px -18px rgba(24,42,102,.30);

  --ease: cubic-bezier(.22,.75,.28,1);

  --pad: clamp(18px, 5vw, 32px);
  --maxw: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ============================================================
   TYPE
   ============================================================ */

h1,h2,h3,h4,.display{
  font-family:'Fraunces', 'Newsreader', Georgia, 'Times New Roman', serif;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 40;
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.35rem, 8.4vw, 4.4rem); line-height:1.02; letter-spacing:-.03em; }
h2{ font-size:clamp(1.85rem, 5.6vw, 3rem); }
h3{ font-size:clamp(1.15rem, 3vw, 1.45rem); letter-spacing:-.012em; }

p{ margin:0; }
.lead{ font-size:clamp(1.02rem,2.5vw,1.16rem); color:var(--muted); line-height:1.68; max-width:60ch; }

.eyebrow{
  font-family:'Instrument Sans', sans-serif;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--faint);
}
.eyebrow.on-yellow{ color:rgba(36,59,140,.62); }
.eyebrow.on-ink{ color:rgba(255,255,255,.58); }

/* ============================================================
   SECTIONS
   ============================================================ */

section{ padding-block:clamp(52px, 10vw, 92px); }

.sec-head{ max-width:34ch; margin-bottom:clamp(28px,5vw,42px); }
@media (min-width:900px){ .sec-head{ max-width:40ch; } }
.sec-head .eyebrow{ margin-bottom:14px; }
.sec-head p{ margin-top:16px; color:var(--muted); font-size:1rem; max-width:52ch; }

.band-yellow{ background:var(--yellow); }
.band-paper { background:var(--paper); border-block:1px solid var(--line); }
.band-ink   { background:var(--ink); color:#fff; }
.band-ink .sec-head p{ color:rgba(255,255,255,.72); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:14px 26px;
  background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bd); border-radius:var(--r-pill);
  font:600 .95rem/1 'Instrument Sans', sans-serif;
  letter-spacing:.005em;
  text-decoration:none; cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .18s, color .18s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

.btn-line{ --bg:transparent; --fg:var(--ink); --bd:var(--line-hard); }
.btn-line:hover{ --bd:var(--ink); }
.btn-onyellow{ --bg:var(--ink); --fg:var(--yellow); --bd:var(--ink); }
.btn-white{ --bg:#fff; --fg:var(--ink); --bd:#fff; }
.btn-ghost{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.42); }
.btn-ghost:hover{ --bd:#fff; }
.btn-yellow{ --bg:var(--yellow); --fg:var(--ink); --bd:var(--yellow); }
.btn-wa{ --bg:var(--wa); --fg:#fff; --bd:var(--wa); }
.btn-block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:520px){
  .btn-row{ flex-direction:column; }
  .btn-row .btn{ width:100%; }
}

/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:sticky; top:0; z-index:60;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.stuck{
  background:rgba(253,251,243,.92);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 8px 24px -20px rgba(36,59,140,.5);
}
.nav-in{
  max-width:var(--maxw); margin-inline:auto;
  padding:12px var(--pad);
  display:flex; align-items:center; gap:20px;
}

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.brand img{ width:34px; height:34px; border-radius:50%; flex:none; }
.brand .tx{ display:flex; flex-direction:column; line-height:1.14; }
.brand .tx b{
  font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:1.02rem;
  letter-spacing:-.02em;
}
.brand .tx span{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }

.nav-links{ display:none; gap:26px; }
.nav-links a{
  text-decoration:none; font-size:.9rem; font-weight:500;
  padding-block:6px; position:relative; color:var(--ink);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:currentColor; transition:right .28s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right:0; }

.nav-cta{ display:none; min-height:44px; padding:11px 20px; font-size:.88rem; }

.burger{
  display:grid; place-content:center; gap:5px;
  width:46px; height:46px; padding:0;
  background:transparent; border:1.5px solid var(--line-hard); border-radius:12px;
  cursor:pointer;
}
.burger i{ display:block; width:19px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

@media (min-width:900px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .burger{ display:none; }
}

.drawer{
  position:fixed; inset:64px 0 auto 0; z-index:55;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  padding:14px var(--pad) 26px;
  display:flex; flex-direction:column; gap:2px;
  transform:translateY(-115%);
  transition:transform .42s var(--ease);
  box-shadow:0 26px 46px -28px rgba(36,59,140,.45);
  max-height:calc(100dvh - 64px); overflow-y:auto;
}
.drawer.on{ transform:translateY(0); }
.drawer a:not(.btn){
  text-decoration:none; padding:15px 2px;
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.22rem;
  border-bottom:1px solid var(--line);
}
.drawer .btn{ margin-top:18px; }
@media (min-width:900px){ .drawer{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  background:var(--hero-grad);
  --_hero-on:var(--ink);
  padding-block:clamp(38px,9vw,72px) clamp(44px,9vw,78px);
  position:relative; overflow:hidden;
}

.hero .wrap{ position:relative; z-index:1; }
.hero:not(.hero--page) .wrap{ text-align:center; }
.hero:not(.hero--page) h1,
.hero:not(.hero--page) .hero-motto,
.hero:not(.hero--page) .hero-sub{ margin-inline:auto; }
.hero:not(.hero--page) .btn-row{ justify-content:center; }

.hero-mark{
  width:clamp(132px,32vw,198px);
  margin:0 auto clamp(20px,4.5vw,30px);
}
.hero-mark img{ width:100%; height:auto; }

.hero h1{ max-width:13ch; }
.hero h1 em{
  display:block; font-style:normal; font-weight:400;
  font-size:clamp(.95rem,3.4vw,1.35rem);
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(36,59,140,.58);
  margin-top:18px;
  font-family:'Instrument Sans',sans-serif;
}
.hero-motto{
  margin-top:24px;
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.05rem,3.4vw,1.4rem);
  font-style:italic; font-weight:400;
  color:var(--ink-soft);
  max-width:26ch;
}
.hero-sub{ margin-top:14px; color:rgba(36,59,140,.7); font-size:clamp(.94rem,2.4vw,1.02rem); max-width:44ch; }
.hero .btn-row{ margin-top:clamp(26px,5vw,34px); }

@media (min-width:900px){
  .hero{ padding-block:clamp(56px,7vw,86px) clamp(60px,7vw,92px); }
  .hero--page h1{ max-width:17ch; }
  .hero--page .hero-sub{ max-width:56ch; }
}

/* the little open/closed pill */
.status{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:22px; padding:9px 16px;
  background:rgba(255,255,255,.80); border:1px solid var(--line-onyel);
  border-radius:var(--r-pill);
  font-size:.84rem; font-weight:500;
}
.status i{ width:8px; height:8px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px rgba(31,168,85,.18); flex:none; }
.status.shut i{ background:#C6552F; box-shadow:0 0 0 4px rgba(198,85,47,.16); }
.status b{ font-weight:600; }

/* hero side card */
.hero-card{
  background:var(--ink); color:#fff;
  border-radius:var(--r-lg); padding:26px 24px;
  box-shadow:0 30px 60px -30px rgba(36,59,140,.6);
}
.hero-card h2{ font-size:1.3rem; color:var(--yellow); }
.hero-card ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:0; }
.hero-card li{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 0; border-top:1px solid rgba(255,255,255,.16);
  font-size:.92rem;
}
.hero-card li b{ font-weight:600; color:rgba(255,255,255,.95); }
.hero-card li span{ color:rgba(255,255,255,.62); text-align:right; }
.hero-card .btn{ margin-top:22px; width:100%; }

/* ============================================================
   FACT STRIP
   ============================================================ */

.strip{ background:var(--ink); color:#fff; }
.strip .wrap{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; padding-block:0;
}
.strip .cell{ padding:24px 4px 24px 0; }
.strip .cell + .cell{ }
.strip b{
  display:block;
  font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(1.7rem,6vw,2.3rem); color:var(--yellow);
  letter-spacing:-.02em; line-height:1;
}
.strip span{ display:block; margin-top:8px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }
@media (min-width:760px){ .strip .wrap{ grid-template-columns:repeat(4,1fr); } }

/* ============================================================
   RULE LIST  (the mockup's price-row motif, without prices)
   ============================================================ */

.rules{ border-top:1.5px solid var(--ink); }
.rules > li, .rules > .row{
  list-style:none;
  display:grid; grid-template-columns:1fr auto; gap:6px 20px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.rules h3{ grid-column:1; font-size:clamp(1.08rem,3.2vw,1.3rem); }
.rules .tag{
  grid-column:2; grid-row:1;
  align-self:baseline;
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap;
}
.rules p{ grid-column:1 / -1; color:var(--muted); font-size:.95rem; margin-top:2px; max-width:62ch; }
.rules{ margin:0; padding:0; }

/* ============================================================
   CARDS
   ============================================================ */

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px 24px;
}
.card-lift{ transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card-lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--line-hard); }

.grid-2{ display:grid; gap:16px; }
.grid-3{ display:grid; gap:16px; }
@media (min-width:760px){ .grid-2{ grid-template-columns:1fr 1fr; } .grid-3{ grid-template-columns:repeat(3,1fr); } }

/* ---- founders ---- */
.founders{ display:grid; gap:18px; }
@media (min-width:860px){ .founders{ grid-template-columns:1fr 1fr; } }

.founder{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.portrait{
  aspect-ratio:4/3;
  background:
    linear-gradient(150deg, var(--yellow-pale), #FFF8DC 62%, #FFFDF4);
  display:grid; place-content:center; gap:6px; text-align:center;
  border-bottom:1px solid var(--line);
  position:relative;
}
.portrait .mono{
  font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:clamp(2.6rem,8vw,3.4rem); letter-spacing:-.03em;
  color:var(--ink); opacity:.9; line-height:1;
}
.portrait small{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(36,59,140,.45); }
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.founder-body{ padding:24px 22px 26px; display:flex; flex-direction:column; flex:1; }
.role{
  font-size:.68rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink); background:var(--yellow);
  display:inline-block; padding:5px 11px; border-radius:var(--r-pill);
  align-self:flex-start; margin-bottom:14px;
}
.qual{ margin-top:8px; color:var(--muted); font-size:.92rem; }
.bio{ margin-top:14px; color:var(--muted); font-size:.95rem; }

.dl{ margin:20px 0 0; display:grid; gap:0; }
.dl > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:11px 0; border-top:1px solid var(--line);
  font-size:.9rem;
}
.dl dt{ color:var(--faint); letter-spacing:.02em; }
.dl dd{ margin:0; font-weight:600; text-align:right; }
.dl dd a{ text-decoration:none; border-bottom:1.5px solid var(--yellow-dp); }

/* ---- people ---- */
.people{ display:grid; gap:12px; }
@media (min-width:620px){ .people{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .people{ grid-template-columns:repeat(3,1fr); } }

.person{ display:flex; align-items:center; gap:14px; padding:16px 18px; }
.av{
  flex:none; width:46px; height:46px; border-radius:50%;
  display:grid; place-content:center;
  background:var(--yellow); color:var(--ink);
  font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:.94rem; letter-spacing:-.01em;
}
.person .who{ min-width:0; flex:1; }
.person .who strong{ display:block; font-size:.98rem; font-weight:600; letter-spacing:-.005em; }
.person .who span{ display:block; font-size:.82rem; color:var(--faint); }
.person .yrs{ flex:none; text-align:right; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.person .yrs b{ display:block; font-family:'Fraunces',Georgia,serif; font-size:1.15rem; color:var(--ink); letter-spacing:-.02em; }

/* ============================================================
   GALLERY
   ============================================================ */

.gal{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px){
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal .wide{ grid-column:1 / -1; }
}
@media (min-width:1000px){
  .gal{ grid-template-columns:repeat(3,1fr); }
  .gal .wide{ grid-column:span 2; }
  .gal .tall{ grid-row:span 2; }
}

.shot{
  margin:0; position:relative; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--paper); cursor:zoom-in;
}
.shot img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s var(--ease); }
.shot.tall img{ aspect-ratio:3/4; }
.shot.wide img{ aspect-ratio:16/9; }
.shot:hover img{ transform:scale(1.045); }
.shot .cap{
  position:absolute; left:12px; bottom:12px;
  padding:7px 14px; border-radius:var(--r-pill);
  background:rgba(253,251,243,.93); backdrop-filter:blur(8px);
  font-size:.78rem; font-weight:600; letter-spacing:.01em;
}

.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(12,22,56,.95);
  display:grid; place-items:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox.on{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(96vw,1100px); max-height:80dvh; width:auto; border-radius:var(--r); }
.lightbox .lb-cap{ margin-top:16px; color:rgba(255,255,255,.8); font-size:.9rem; text-align:center; }
.lb-x{
  position:absolute; top:16px; right:16px; width:46px; height:46px;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.32);
  background:transparent; color:#fff; font-size:1.4rem; cursor:pointer; line-height:1;
}

/* ============================================================
   CLINICS
   ============================================================ */

.clinics{ display:grid; gap:16px; }
@media (min-width:860px){ .clinics{ grid-template-columns:1fr 1fr; } }

.clinic .tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--r-pill);
  background:var(--yellow); color:var(--ink); margin-bottom:14px;
}
.crow{
  display:grid; grid-template-columns:104px 1fr; gap:12px;
  padding:13px 0; border-top:1px solid var(--line); font-size:.93rem;
}
.crow .k{ color:var(--faint); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; padding-top:2px; }
.crow .v a{ text-decoration:none; border-bottom:1.5px solid var(--yellow-dp); font-weight:600; }
@media (max-width:480px){ .crow{ grid-template-columns:1fr; gap:3px; } }

/* ============================================================
   REVIEWS
   ============================================================ */

.revs{ display:grid; gap:14px; }
@media (min-width:820px){ .revs{ grid-template-columns:repeat(3,1fr); } }

.rev{ display:flex; flex-direction:column; }
.rev .quote-mk{
  font-family:'Fraunces',Georgia,serif; font-size:2.6rem; line-height:.6;
  color:var(--yellow-dp); margin-bottom:14px;
}
.rev blockquote{
  margin:0; flex:1;
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:1.06rem; line-height:1.5; letter-spacing:-.008em;
}
.rev .stars{ color:var(--yellow-dp); letter-spacing:.16em; font-size:.9rem; margin-top:16px; }
.rev .by{ display:flex; align-items:center; gap:11px; margin-top:12px; padding-top:16px; border-top:1px solid var(--line); }
.rev .by b{ display:block; font-size:.9rem; font-weight:600; }
.rev .by span{ display:block; font-size:.76rem; color:var(--faint); }

/* ============================================================
   FAQ
   ============================================================ */

.faqs{ border-top:1.5px solid var(--ink); }
.faq{ border-bottom:1px solid var(--line); }
.faq > button{
  width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding:20px 0; background:none; border:0; cursor:pointer; text-align:left;
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(1.02rem,2.9vw,1.16rem); color:var(--ink); letter-spacing:-.01em;
}
.faq .pm{ flex:none; width:22px; height:22px; position:relative; margin-top:3px; }
.faq .pm::before,.faq .pm::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--ink);
  transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .2s;
}
.faq .pm::before{ width:14px; height:1.8px; }
.faq .pm::after{ width:1.8px; height:14px; }
.faq button[aria-expanded="true"] .pm::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq .a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq .a p{ padding-bottom:20px; color:var(--muted); font-size:.96rem; max-width:64ch; }

/* ============================================================
   BOOK FORM (navy panel, like the mockup)
   ============================================================ */

.book-panel{
  background:var(--ink); color:#fff;
  border-radius:var(--r-lg);
  padding:clamp(26px,6vw,44px);
  box-shadow:0 40px 80px -44px rgba(36,59,140,.7);
}
.book-panel h2{ color:#fff; }
.book-panel .eyebrow{ color:var(--yellow); }
.book-panel .sub{ color:rgba(255,255,255,.7); margin-top:14px; font-size:.98rem; max-width:46ch; }

.book-grid{ display:grid; gap:26px; margin-top:clamp(24px,5vw,34px); }
@media (min-width:900px){ .book-grid{ grid-template-columns:1.25fr .75fr; gap:44px; } }

.fg{ margin-bottom:14px; }
.fg label{
  display:block; margin-bottom:7px;
  font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.fg input,.fg select,.fg textarea{
  width:100%; min-height:52px; padding:14px 16px;
  background:#334994; color:#fff;
  border:1.5px solid rgba(255,255,255,.2); border-radius:var(--r);
  font:400 1rem/1.5 'Instrument Sans', sans-serif;
  transition:border-color .2s, background .2s;
}
.fg textarea{ min-height:112px; resize:vertical; }
.fg input::placeholder,.fg textarea::placeholder{ color:rgba(255,255,255,.4); }
.fg input:focus,.fg select:focus,.fg textarea:focus{
  outline:none; border-color:var(--yellow); background:#3D5199;
}
.fg select{ appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23ffffff' stroke-opacity='.65' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px;
  padding-right:42px;
}
.fg select option{ background:var(--ink); color:#fff; }
.fg.bad input,.fg.bad select{ border-color:#FF9A7B; }
.err{ display:none; margin-top:6px; font-size:.8rem; color:#FFB79E; }
.fg.bad .err{ display:block; }

.fine{ margin-top:16px; font-size:.82rem; color:rgba(255,255,255,.52); line-height:1.6; }
.f-ok{
  display:none; margin-top:16px; padding:14px 16px;
  border-radius:var(--r); background:rgba(31,168,85,.16); border:1px solid rgba(31,168,85,.4);
  font-size:.88rem; color:#BEF0D2;
}
.f-ok.on{ display:block; }

.aside-note{
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r);
  padding:24px 22px; background:#2F4692;
}
.aside-note h3{ color:var(--yellow); font-size:1.15rem; }
.aside-note p{ color:rgba(255,255,255,.7); font-size:.93rem; margin-top:10px; }
.big-call{
  display:flex; align-items:center; gap:11px; margin-top:20px;
  font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:1.34rem; letter-spacing:-.02em;
}
.big-call a{ text-decoration:none; color:#fff; border-bottom:2px solid var(--yellow); }

/* ============================================================
   CTA BAND
   ============================================================ */

.cta{ background:var(--yellow); text-align:center; }
.cta h2{ max-width:18ch; margin-inline:auto; }
.cta p{ margin-top:14px; color:rgba(36,59,140,.68); }
.cta .btn-row{ justify-content:center; margin-top:26px; }

/* ============================================================
   FOOTER
   ============================================================ */

.foot{ background:var(--ink-deep); color:rgba(255,255,255,.68); padding-block:clamp(44px,8vw,66px) 26px; font-size:.9rem; }
.foot a{ color:inherit; text-decoration:none; }
.foot a:hover{ color:#fff; }
.foot .brand .tx b{ color:#fff; }
.foot .brand .tx span{ color:rgba(255,255,255,.5); }
.foot .brand img{ box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.foot-top{ display:grid; gap:30px; }
@media (min-width:760px){ .foot-top{ grid-template-columns:1.6fr 1fr 1fr; gap:40px; } }
.foot-top p{ margin-top:16px; max-width:44ch; line-height:1.65; }
.foot h4{ font-family:'Instrument Sans',sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); margin-bottom:14px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-btm{
  margin-top:38px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  font-size:.79rem; color:rgba(255,255,255,.48);
}

/* ============================================================
   REVEAL
   ============================================================ */

.r{ opacity:0; transform:translateY(18px); }
.r.in{ opacity:1; transform:none; transition:opacity .7s var(--ease) calc(var(--d,0) * 70ms), transform .7s var(--ease) calc(var(--d,0) * 70ms); }
@media (prefers-reduced-motion: reduce){
  .r{ opacity:1; transform:none; }
  .btn:hover,.card-lift:hover{ transform:none; }
  .shot:hover img{ transform:none; }
}

/* skip link */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; }


/* ============================================================
   YELLOW, RATIONED
   The homepage hero is the one full field of yellow. Everywhere
   else it works as an accent: rules, pills, stars, underlines.
   ============================================================ */

.hero--page{
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.hero--page::before{
  content:''; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--yellow);
}
.hero--page .eyebrow{ color:var(--faint); }
.hero--page .hero-sub{ color:var(--muted); }

/* closing band goes deep, not bright — with a hairline so it
   reads separately from the navy footer beneath it */
.cta{ background:var(--ink); color:#fff; border-bottom:4px solid var(--yellow); }
.cta h2{ color:#fff; }
.cta p{ color:rgba(255,255,255,.7); }
.cta .btn{ --bg:var(--yellow); --fg:var(--ink); --bd:var(--yellow); }
.cta .btn-line{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.42); }
.cta .btn-line:hover{ --bd:#fff; }

/* the status pill no longer sits on yellow everywhere */
.hero--page .status,
.band-paper .status{ background:var(--paper); border-color:var(--line-hard); }

/* portrait placeholder: a whisper of the accent, not a wash */
.portrait{
  background:linear-gradient(150deg,#FFFBEA,#FFFDF6 70%,var(--paper));
}


/* ============================================================
   REAL PORTRAITS
   ============================================================ */

.portrait.has-photo{
  aspect-ratio:4/5;
  background:var(--paper);
}
.portrait.has-photo img{
  position:static;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 18%;
}

/* On the doctors page the founder card turns side-by-side, so the
   photograph keeps its shape instead of being cropped to a strip. */
@media (min-width:760px){
  .founder-side{ display:grid; grid-template-columns:minmax(240px,34%) 1fr; align-items:stretch; }
  .founder-side .portrait{
    display:block; height:100%; aspect-ratio:auto;
    border-bottom:0; border-right:1px solid var(--line);
  }
  .founder-side .portrait img{ width:100%; height:100%; object-fit:cover; }
  .founder-side .founder-body{ padding:clamp(26px,3vw,34px); }
}


/* ============================================================
   TEAM PHOTOGRAPHS
   The round chip holds a photograph when there is one and the
   person's initials when there isn't, so a half-photographed
   team still reads as one grid.
   ============================================================ */

.av-photo{
  padding:0; overflow:hidden;
  background:var(--yellow-pale);
  box-shadow:inset 0 0 0 1px rgba(36,59,140,.12);
}
.av-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 22%;
  display:block;
}

/* a touch larger once there are faces to see */
.person .av{ width:52px; height:52px; }


/* A letterbox photograph — the street sign — runs the full width of the
   gallery at its own proportions rather than being cropped to a tile. */
.gal .banner{ grid-column:1 / -1; }
.gal .banner img{ aspect-ratio:auto; height:auto; }

/* ============================================================
   DOODLES
   One white line-art pattern, reused on every coloured surface.
   Each surface sets its own opacity, so the same drawing reads
   as pale yellow on the hero and pale lilac on the purple.
   ============================================================ */

:root{
  --doodles:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'><g fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(92,86) rotate(-12) scale(3.0) translate(-12,-12)' stroke-width='0.833'><path d='M8 3.2C5.4 3.2 4 5.1 4 7.6c0 2.4 1 3.9 1.5 6.3.4 2 .5 3.9 1.7 3.9s1.2-1.9 1.4-3.4c.1-.8.3-1.2.7-1.2s.6.4.7 1.2c.2 1.5.2 3.4 1.4 3.4s1.3-1.9 1.7-3.9c.5-2.4 1.5-3.9 1.5-6.3 0-2.5-1.4-4.4-4-4.4-1.1 0-1.5.5-1.9.5s-.8-.5-1.9-.5z'/></g><g transform='translate(278,62) rotate(20) scale(2.0) translate(-12,-12)' stroke-width='1.25'><path d='M12 3.5l1.5 5.2 5.2 1.5-5.2 1.5L12 17l-1.5-5.3L5.3 10.2l5.2-1.5z'/></g><g transform='translate(452,104) rotate(14) scale(2.7) translate(-12,-12)' stroke-width='0.926'><path d='M3.5 19.5l7.2-7.2M11.6 11.3l3.6-3.6a2.1 2.1 0 0 1 3 3l-3.6 3.6zM13.2 6.6l1.2-1.2M15 8.4l1.2-1.2M16.8 10.2l1.2-1.2'/></g><g transform='translate(66,250) rotate(9) scale(2.4) translate(-12,-12)' stroke-width='1.042'><path d='M4 9.5a8 8 0 0 0 16 0zM9.4 9.5v3.4M14.6 9.5v3.4'/></g><g transform='translate(246,218) rotate(-8) scale(3.1) translate(-12,-12)' stroke-width='0.806'><path d='M8 3.6C5.6 3.6 4.3 5.4 4.3 7.7c0 2.3.9 3.7 1.4 5.9.4 1.9.5 3.7 1.6 3.7s1.1-1.8 1.3-3.2c.1-.8.3-1.1.7-1.1s.5.3.6 1.1c.2 1.4.2 3.2 1.3 3.2s1.2-1.8 1.6-3.7c.5-2.2 1.4-3.6 1.4-5.9 0-2.3-1.3-4.1-3.7-4.1-1 0-1.4.5-1.8.5s-.7-.5-1.7-.5zM3 10.4h14M8.2 8.9v3M12.4 8.9v3'/></g><g transform='translate(452,276) rotate(-20) scale(2.2) translate(-12,-12)' stroke-width='1.136'><path d='M12 3.6s4.8 5.9 4.8 8.9a4.8 4.8 0 0 1-9.6 0c0-3 4.8-8.9 4.8-8.9z'/></g><g transform='translate(118,420) rotate(17) scale(2.6) translate(-12,-12)' stroke-width='0.962'><path d='M4.5 19.5l6.2-6.2M17.2 5.4a3.4 3.4 0 1 1-4.9 4.7 3.4 3.4 0 0 1 4.9-4.7z'/></g><g transform='translate(300,402) rotate(-14) scale(2.3) translate(-12,-12)' stroke-width='1.087'><path d='M12 3.4a8.6 8.6 0 1 1 0 17.2 8.6 8.6 0 0 1 0-17.2zM8.1 12.2l2.6 2.6 5.2-5.2'/></g><g transform='translate(478,452) rotate(10) scale(2.9) translate(-12,-12)' stroke-width='0.862'><path d='M8 3.2C5.4 3.2 4 5.1 4 7.6c0 2.4 1 3.9 1.5 6.3.4 2 .5 3.9 1.7 3.9s1.2-1.9 1.4-3.4c.1-.8.3-1.2.7-1.2s.6.4.7 1.2c.2 1.5.2 3.4 1.4 3.4s1.3-1.9 1.7-3.9c.5-2.4 1.5-3.9 1.5-6.3 0-2.5-1.4-4.4-4-4.4-1.1 0-1.5.5-1.9.5s-.8-.5-1.9-.5z'/></g><g transform='translate(20,152) rotate(26) scale(1.7) translate(-12,-12)' stroke-width='1.471'><path d='M12 3.5l1.5 5.2 5.2 1.5-5.2 1.5L12 17l-1.5-5.3L5.3 10.2l5.2-1.5z'/></g><g transform='translate(386,348) rotate(-26) scale(1.7) translate(-12,-12)' stroke-width='1.471'><path d='M12 3.5l1.5 5.2 5.2 1.5-5.2 1.5L12 17l-1.5-5.3L5.3 10.2l5.2-1.5z'/></g><g transform='translate(30,520) rotate(-6) scale(2.0) translate(-12,-12)' stroke-width='1.25'><path d='M12 3.6s4.8 5.9 4.8 8.9a4.8 4.8 0 0 1-9.6 0c0-3 4.8-8.9 4.8-8.9z'/></g><g transform='translate(206,520) rotate(12) scale(2.7) translate(-12,-12)' stroke-width='0.926'><path d='M3.5 19.5l7.2-7.2M11.6 11.3l3.6-3.6a2.1 2.1 0 0 1 3 3l-3.6 3.6zM13.2 6.6l1.2-1.2M15 8.4l1.2-1.2M16.8 10.2l1.2-1.2'/></g><g transform='translate(414,552) rotate(22) scale(2.1) translate(-12,-12)' stroke-width='1.19'><path d='M4 9.5a8 8 0 0 0 16 0zM9.4 9.5v3.4M14.6 9.5v3.4'/></g></g></svg>");
}

.hero:not(.hero--page)::before,
.strip::before,
.book-panel::before,
.cta::before{
  content:'';
  position:absolute; inset:0;
  background-image:var(--doodles);
  background-repeat:repeat;
  pointer-events:none;
}

/* --- the hero: bright, and cleared from behind the headline --- */
.hero:not(.hero--page)::before{
  inset:-40px;
  background-image:none;
  background-color:var(--doodle-tint);
  opacity:.30;
  -webkit-mask-image:var(--doodles);  mask-image:var(--doodles);
  -webkit-mask-size:420px 420px;      mask-size:420px 420px;
  -webkit-mask-repeat:repeat;         mask-repeat:repeat;
}
@media (max-width:700px){
  .hero:not(.hero--page)::before{
    -webkit-mask-size:300px 300px;  mask-size:300px 300px;
  }
}

/* --- the purple surfaces --- */
.strip, .cta{ position:relative; overflow:hidden; }
.book-panel{ position:relative; overflow:hidden; }

.strip::before     { background-size:340px 340px; opacity:.16; }
.book-panel::before{ background-size:400px 400px; opacity:.12; }
.cta::before       { background-size:400px 400px; opacity:.18; }

/* keep the type above the pattern */
.strip .wrap, .cta .wrap{ position:relative; z-index:1; }
.book-panel > *{ position:relative; z-index:1; }