/* ==========================================================================
   Family Dental Center of Connecticut — design system
   Shared by every page. Edit here, not in page files.
   ========================================================================== */

:root{
  /* Core palette — matched to familydentalcenterofconnecticut.com */
  --ink:#1A1A1A;
  --ink-soft:#2D2D2D;
  --navy:#0D2235;
  --navy-deep:#1A1A2E;
  --gold:#C9A96E;
  --gold-bright:#DCC08E;
  --teal:#1A6B72;
  --stone:#E2DDD6;
  --cream:#FAF8F5;
  --white:#FFFFFF;
  --grey:#4A5568;
  --grey-light:#CCCCCC;
  --line:rgba(26,26,26,.12);
  --line-light:rgba(255,255,255,.16);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --wrap:1280px;
  --gutter:32px;
}

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

/* 1rem = 17px. Must live on html, not body — every rem below resolves against this. */
html{font-size:17px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--sans);
  font-weight:300;
  font-size:1rem;
  line-height:1.75;
  color:var(--ink-soft);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Typography ---------- */

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--ink);
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.75rem,5.2vw,4.25rem);font-weight:600}
h2{font-size:clamp(2rem,3.6vw,3.25rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.875rem);font-weight:400}
h4{font-size:1.25rem;font-weight:500}

h1 em,h2 em,h3 em{font-style:normal;color:var(--gold)}

p{margin-bottom:1.15rem}
p:last-child{margin-bottom:0}

a{color:inherit;text-decoration:none}

.eyebrow{
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-block;
  margin-bottom:1rem;
}
.eyebrow--dark{color:var(--teal)}

.lede{font-size:1.15rem;font-weight:300;line-height:1.7}

.muted{color:var(--grey)}

/* ---------- Layout ---------- */

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,8vw,112px)}
.section--tight{padding-block:clamp(48px,5vw,72px)}
.section--ink{background:var(--ink);color:rgba(255,255,255,.82)}
.section--navy{background:var(--navy);color:rgba(255,255,255,.82)}
.section--cream{background:var(--cream)}
.section--stone{background:var(--stone)}
.section--ink h1,.section--ink h2,.section--ink h3,
.section--navy h1,.section--navy h2,.section--navy h3{color:var(--white)}

.grid{display:grid;gap:clamp(24px,3vw,48px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--split{grid-template-columns:1.05fr .95fr;align-items:center}

.section-head{max-width:44rem;margin-bottom:clamp(40px,5vw,64px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin-bottom:1rem}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);
  font-size:.85rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:17px 32px;
  border:1.5px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#B8965B}
.btn--ink{background:var(--ink);color:var(--white)}
.btn--ink:hover{background:#000}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--white)}
.btn--ghost{border-color:rgba(255,255,255,.55);color:var(--white)}
.btn--ghost:hover{background:var(--white);color:var(--ink)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}

/* ---------- Top bar ---------- */

.topbar{background:var(--navy);color:rgba(255,255,255,.72);font-size:.85rem;padding:11px 0}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:space-between}
.topbar a{color:rgba(255,255,255,.88);font-weight:400}
.topbar a:hover{color:var(--gold)}
.topbar .tline{display:inline-flex;align-items:center;gap:7px}
.topbar .tline b{color:var(--gold);font-weight:500}
.topbar-links{display:flex;gap:22px}

/* ---------- Header ---------- */

.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;height:92px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:54px;width:auto;display:block}
.nav{display:flex;gap:30px}
.nav a{font-size:.9375rem;font-weight:400;color:var(--ink);padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{color:var(--teal);border-bottom-color:var(--gold)}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer;line-height:1}

/* ---------- Hero ---------- */

.hero{position:relative;background:var(--navy);color:rgba(255,255,255,.84);overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 560px at 84% 16%,rgba(201,169,110,.15),transparent 62%),
             radial-gradient(760px 540px at 8% 88%,rgba(26,107,114,.30),transparent 62%);
}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(72px,9vw,120px)}
.hero--compact .wrap{padding-block:clamp(52px,6.5vw,84px)}
.hero h1{color:var(--white);margin-bottom:1.25rem}
.hero .lede{color:rgba(255,255,255,.80);max-width:34rem}
.hero .tagline{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--gold);margin-bottom:1.5rem}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(201,169,110,.55);
  color:var(--gold);
  font-size:.8rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:8px 16px;border-radius:2px;margin-bottom:1.75rem;
}

/* ---------- Stat strip ---------- */

.stats{border-top:1px solid var(--line-light);background:rgba(0,0,0,.18)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:34px;text-align:center}
.stats .n{font-family:var(--serif);font-size:2.25rem;color:var(--gold);line-height:1}
.stats .l{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:6px}

/* ---------- Cards ---------- */

.card{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:34px 30px}
.card--flat{border:0;padding:0}
.card--alert{border-left:3px solid var(--gold)}
.card h3{margin-bottom:.6rem}
.card p{font-size:1rem}
.card .num{font-family:var(--serif);font-size:.95rem;color:var(--gold);margin-bottom:1rem;display:block}
a.card{display:block;transition:border-color .18s ease,transform .18s ease}
a.card:hover{border-color:var(--gold);transform:translateY(-2px)}

.tile{background:var(--white);border:1px solid var(--line);padding:30px 28px}
.tile h3{font-size:1.15rem;margin-bottom:.5rem}
.tile p{font-size:.95rem;color:var(--grey)}
/* Doctor portraits. Source files are 456x552, so the exact ratio avoids any
   crop of the face. Dr.-Engelhardt.png has rounded corners baked into the file
   (transparent), so a matching radius is applied to both — otherwise one reads
   square and the other rounded when they sit side by side. */
.portrait{
  display:block;width:100%;aspect-ratio:456/552;object-fit:cover;object-position:top center;
  margin:-34px -30px 26px;width:calc(100% + 60px);
  border-radius:6px 6px 0 0;background:var(--stone);
}

/* Full-bleed supporting image, replacing the old placeholder panels. */
.panel{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:3px;background:var(--stone);
}

.tour{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.tour figure{margin:0;background:var(--white);border:1px solid var(--line)}
.tour iframe{display:block;width:100%;aspect-ratio:16/10;border:0}
.tour figcaption{padding:14px 18px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
@media(max-width:760px){.tour{grid-template-columns:1fr;gap:20px}}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.gal figure{overflow:hidden}
.gal img{transition:transform .35s ease}
.gal figure:hover img{transform:scale(1.03)}
.gal figure{margin:0;background:var(--white);border:1px solid var(--line)}
.gal img{display:block;width:100%;height:auto}
.gal figcaption{padding:16px 18px;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.gal--placeholder figure{aspect-ratio:4/3;background:var(--stone);border-color:transparent;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#A79E90;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:560px){.gal{grid-template-columns:1fr}}
.tile--muted{background:var(--stone);border-color:transparent}
.tile--muted p{color:var(--ink-soft)}

/* ---------- Checklist ---------- */

.checks{list-style:none}
.checks li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--line);font-size:1rem}
.checks li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:2px;background:var(--gold)}
.section--ink .checks li,.section--navy .checks li{border-bottom-color:var(--line-light)}

/* ---------- Locations ---------- */

.loc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.loc{background:var(--white);padding:38px 34px}
.loc .tag{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.75rem}
.loc address{font-style:normal;margin:.75rem 0 1.25rem;color:var(--ink)}
.loc table{width:100%;font-size:.95rem;border-collapse:collapse}
.loc td{padding:8px 0;border-bottom:1px solid var(--line)}
.loc td:last-child{text-align:right;color:var(--ink)}
.loc tr:last-child td{border-bottom:0}
.closed{color:#9A9189}
.loc .tel{display:inline-block;font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin-top:.5rem}
.loc .tel:hover{color:var(--teal)}

/* ---------- Reviews ---------- */

.review{border:1px solid var(--line-light);background:rgba(255,255,255,.05);padding:32px;border-radius:3px}
.review .stars{color:var(--gold);letter-spacing:3px;margin-bottom:1rem}
.review p{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.6;color:rgba(255,255,255,.88)}
.review .who{margin-top:1.25rem;font-family:var(--sans);font-style:normal;font-size:.85rem;color:rgba(255,255,255,.55)}

/* ---------- CTA band ---------- */

.cta-band{background:var(--gold);color:var(--ink)}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:36px;align-items:center;justify-content:space-between;padding-block:clamp(52px,6vw,76px)}
.cta-band h2{max-width:26rem}
.cta-band p{color:#4A3A18;max-width:28rem;margin-top:.75rem}
.cta-band .tel{display:block;font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.75rem);color:var(--ink)}
.cta-band .note{font-size:.85rem;color:#4A3A18;margin-top:.35rem}

/* ---------- FAQ ---------- */

.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--serif);font-size:1.2rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:20px;font-family:var(--sans);font-size:1.4rem;color:var(--gold);font-weight:300}
.faq details[open] summary::after{content:"\2013"}
.faq .answer{padding:0 0 24px;font-size:1rem;max-width:52rem}

/* ---------- Breadcrumb ---------- */

.crumb{font-size:.85rem;color:var(--grey);padding-block:18px;border-bottom:1px solid var(--line)}
.crumb a:hover{color:var(--teal)}
.crumb span{color:var(--grey-light);margin-inline:8px}

/* ---------- Article body ---------- */

.prose{max-width:46rem}
.prose h2{margin:2.5rem 0 1rem}
.prose h3{margin:2rem 0 .75rem}
.prose ul,.prose ol{margin:0 0 1.25rem 1.25rem}
.prose li{margin-bottom:.5rem}
.prose strong{font-weight:500;color:var(--ink)}

/* ---------- Footer ---------- */

.site-footer{background:var(--ink);color:rgba(255,255,255,.58);font-size:.95rem;padding-block:64px 36px}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
.site-footer h4{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:1.1rem}
.site-footer a{display:block;padding:5px 0;color:rgba(255,255,255,.58)}
.site-footer a:hover{color:var(--gold)}
.site-footer .addr{margin-bottom:1rem;line-height:1.7}
.site-footer .addr b{color:var(--white);font-weight:500}
.footer-bottom{border-top:1px solid var(--line-light);margin-top:48px;padding-top:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.85rem}

/* ---------- Utilities ---------- */

.center{text-align:center}
.mt-0{margin-top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:12px 20px;z-index:100}
.skip:focus{left:12px;top:12px}

/* ---------- Responsive ---------- */

@media(max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:28px}
  .site-footer .cols{grid-template-columns:1fr 1fr;gap:36px}
}

@media(max-width:860px){
  :root{--gutter:22px}
  .nav{display:none}
  .nav-toggle{display:block}
  .grid--2,.grid--3,.grid--split,.loc-grid{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .topbar .wrap{justify-content:flex-start}
  .topbar-links{display:none}
}

@media(max-width:560px){
  html{font-size:16px}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .site-footer .cols{grid-template-columns:1fr}
  .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Phone hierarchy ----------
   860-430-4388 is the primary number for BOTH offices.
   860-763-5522 is kept as the Enfield direct line, deliberately quieter. */
.tline--alt{opacity:.72;font-size:.85rem}
.note--alt{margin-top:.5rem;opacity:.78}
.note--alt a{border-bottom:1px solid currentColor}
.alt-tel{font-size:.85rem;opacity:.75}


/* ---------- Appointment form band ----------
   The form itself is an Elementor global widget, so Elementor owns its
   internal styling. These rules only govern the band around it and correct
   the few places where Elementor's own styles fight the new design.
   Everything is scoped to .fdc-form so nothing here can leak onto the
   Elementor-built pages that still render the original footer. */

.fdc-form{scroll-margin-top:90px}
.fdc-form .wrap{align-items:start}
.fdc-form h2{margin-bottom:.75rem}
.fdc-form .tel{font-size:1.75rem}

.fdc-form__widget{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:30px;
}

.fdc-form__widget .elementor-field-group>label{
  font-family:var(--sans);
  font-size:.9375rem;
  letter-spacing:.01em;
}
.fdc-form__widget input:not([type=submit]),
.fdc-form__widget textarea,
.fdc-form__widget select{
  background:var(--white);
  border-radius:10px;
  font-family:var(--sans);
}
.fdc-form__widget textarea{min-height:120px}

.fdc-form__widget button[type=submit],
.fdc-form__widget .elementor-button[type=submit]{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:999px;
  padding:14px 30px;
}

.fdc-form__widget .cf-turnstile,
.fdc-form__widget iframe{max-width:100%}

@media(max-width:860px){
  .fdc-form__widget{padding:22px}
  .fdc-form .tel{font-size:1.5rem}
}


/* Footer directions links. Replaces the Google Maps iframe the old
   Elementor footer carried — same job, none of the page weight. */
.site-footer .fdc-directions{display:inline-block;margin:.35rem 0 .1rem;font-size:.875rem;opacity:.8;border-bottom:1px solid currentColor;text-decoration:none}
.site-footer .fdc-directions:hover{opacity:1}

/* Six-photo teaser grid on /about/, linking through to the full gallery. */
.gal--teaser{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:560px){.gal--teaser{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Blog index ----------
   Rendered by the [fdc_posts] shortcode, not by page content. */

.postlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.postcard{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.postcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.09)}
.postcard__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.postcard img,.postcard__noimg{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.postcard__noimg{background:linear-gradient(135deg,var(--stone),var(--cream))}
.postcard__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.postcard__body time{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.postcard__body h3{font-family:var(--serif);font-size:1.25rem;line-height:1.25;margin:.5rem 0 .6rem}
.postcard__body p{font-size:.9375rem;margin:0 0 1rem}
.postcard__more{margin-top:auto;font-size:.875rem;font-weight:500;color:var(--teal)}

.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:44px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);text-decoration:none;font-size:.9375rem}
.pagination .page-numbers:hover{border-color:var(--teal)}
.pagination .page-numbers.current{background:var(--ink);color:var(--white);border-color:var(--ink)}
.pagination .dots{border:0;background:none}

@media(max-width:1024px){.postlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.postlist{grid-template-columns:1fr}}

/* ---------- Hero photograph ----------
   Deliberately NOT .panel: that forces aspect-ratio 4/5 with object-fit:cover,
   which crops a portrait of two people through the head and shoulders. Here the
   image keeps its natural proportions and is bottom-aligned so the figures stand
   in the hero rather than floating in a cropped box. */

.hero__photo{display:block;width:100%;height:auto;border-radius:3px;align-self:end}
.hero .grid--split{align-items:end;gap:clamp(28px,4vw,56px)}

@media(min-width:861px){
  /* The source file is 900x620, so the image is allowed to fill its column but
     never to upscale past its natural width, which would soften it. */
  .hero .grid--split{grid-template-columns:1fr 1fr}
  .hero__photo{width:100%;max-width:900px;height:auto}
}

@media(max-width:860px){
  .hero .grid--split{align-items:start}
  .hero__photo{max-width:460px;margin-inline:auto}
}

/* Both office numbers now sit in the top bar, labelled, at equal weight. */
.topbar .tline b{white-space:nowrap}

/* ---------- Mobile navigation ----------
   The toggle button rendered and took focus but had no behaviour attached:
   there was no script to open the menu, so on every page below 860px the
   navigation was unreachable. These rules style the button and its open
   state; the script in template-fdc.php flips .is-open and aria-expanded. */

.site-header .nav-toggle{
  display:none;background:none;background-color:transparent;border:0;box-shadow:none;
  cursor:pointer;font-size:1.5rem;line-height:1;color:var(--ink);
  padding:8px 10px;border-radius:8px;-webkit-appearance:none;appearance:none;
}
.site-header .nav-toggle:hover{color:var(--teal);background-color:transparent}
.site-header .nav-toggle:focus,
.site-header .nav-toggle:active{background-color:transparent;color:var(--teal)}
.site-header .nav-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

@media(max-width:860px){
  /* Explicit grid rather than flex-wrap: the toggle belongs top right, beside
     the logo, not stacked underneath it where it reads as page content. */
  .site-header .wrap{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:'brand . toggle' 'cta cta cta' 'nav nav nav';
    align-items:center;row-gap:10px;height:auto;padding-block:12px;gap:0 12px;
  }
  .site-header .brand{grid-area:brand}
  .site-header .nav-toggle{grid-area:toggle;display:block;justify-self:end;font-size:1.65rem}
  .site-header .btn--gold{grid-area:cta;width:100%;text-align:center}
  .site-header .nav{
    grid-area:nav;display:none;flex-direction:column;gap:0;width:100%;
    border-top:1px solid var(--line);padding:4px 0 0;
  }
  .site-header .nav.is-open{display:flex}
  .site-header .nav a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:1.0625rem}
  .site-header .nav a:last-child{border-bottom:0}
  .brand img{height:44px}
}

/* ---------- Single blog article ----------
   Layout comes from fdc_post_layout() in functions.php, which routes posts
   through template-fdc.php. Measure is kept near 68 characters so long
   articles stay readable. */

.post-head{padding-bottom:0}
.post-head .wrap{max-width:52rem}
.post-head h1{margin-bottom:.5rem}
.post-meta{
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  opacity:.6;display:flex;gap:10px;align-items:center;margin:0;
}
.post-hero{
  display:block;width:100%;height:auto;border-radius:14px;
  margin-top:2.25rem;background:var(--stone);
}

.post-body{padding-top:2.5rem}
.post-body .prose{max-width:38rem}
.post-body .prose > *:first-child{margin-top:0}
.post-body .prose h2{font-size:1.65rem;margin:2.5rem 0 .85rem}
.post-body .prose h3{font-size:1.25rem;margin:2rem 0 .7rem}
.post-body .prose p,
.post-body .prose li{font-size:1.0625rem;line-height:1.8}
.post-body .prose ul,
.post-body .prose ol{margin:1.1rem 0 1.1rem 1.15rem}
.post-body .prose li{margin-bottom:.5rem}
.post-body .prose img{max-width:100%;height:auto;border-radius:12px;margin:1.75rem 0}
.post-body .prose a{color:var(--teal);border-bottom:1px solid rgba(26,107,114,.35)}
.post-body .prose a:hover{border-bottom-color:var(--teal)}
.post-body .prose blockquote{
  margin:2rem 0;padding:.35rem 0 .35rem 1.35rem;
  border-left:3px solid var(--gold);font-family:var(--serif);
  font-size:1.2rem;font-style:italic;
}
.post-body .prose table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-size:.9375rem}
.post-body .prose th,.post-body .prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.post-body .prose th{background:var(--cream);font-weight:500}

@media(max-width:640px){
  .post-body .prose p,.post-body .prose li{font-size:1rem}
  .post-body .prose h2{font-size:1.4rem}
  .post-hero{margin-top:1.5rem;border-radius:10px}
}

/* =====================================================================
   Header, hero and sticky booking bar — Sept 2026
   Matches the treatment on familydentalcenterofconnecticut.com, which the
   practice prefers: email in the top bar, logo carrying its tagline, larger
   nav, and a duotone hero built from mix-blend-mode rather than a grayscale
   filter, so the photograph picks up the navy instead of going flat grey.
   ===================================================================== */

/* ---- Top bar ---- */
.topbar .wrap{gap:6px 26px}
.topbar-contact{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}
.topbar .tmail{display:inline-flex;align-items:center;gap:7px}
.topbar .tmail a{border-bottom:1px solid rgba(255,255,255,.28)}
.topbar .tmail a:hover{border-bottom-color:var(--gold)}

/* ---- Brand lockup: logo plus tagline ---- */
/* The logo image carries the name; the tagline sits beside it, separated by a
   hairline rule so it reads as part of the same lockup. */
/* Tagline sits under the logo. Beside it, the 7-item nav and the call button
   ran out of room at 1280px and the two collided. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-decoration:none}
.brand img{height:46px}
.brand-tag{
  font-family:var(--sans);font-size:.4875rem;font-weight:500;
  letter-spacing:.155em;text-transform:uppercase;color:var(--teal);
  white-space:nowrap;line-height:1;padding-left:2px;
}
@media(max-width:1180px){.brand-tag{display:none}}

/* ---- Navigation ---- */
.nav{gap:34px}
.nav a{font-size:1rem;font-weight:400;letter-spacing:.005em}

/* ---- Duotone hero ---- */
.hero--duotone{position:relative;padding:0;overflow:hidden;
  background:linear-gradient(135deg,#163248 0%,#0d2235 100%)}
.hero--duotone::after{display:none}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:30% 18%;
  opacity:.75;mix-blend-mode:luminosity;display:block;
}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,#0d2235 0%,rgba(13,34,53,.42) 7%,rgba(13,34,53,.10) 20%,rgba(13,34,53,0) 42%);
}

/* On desktop the photograph is confined to the right of the hero, as on the
   reference site, so both doctors sit in the visible area rather than being
   cropped by the copy overlay. */
@media(min-width:861px){
  .hero-media{left:48%}
  .hero-media img{object-position:38% 8%}
  .hero--duotone .hero-copy{max-width:31rem}
}
.hero--duotone .wrap{position:relative;z-index:2;padding-block:clamp(84px,11vw,150px);max-width:1180px}
.hero--duotone .hero-copy{max-width:36rem}
.hero--duotone h1{color:#fff}
.hero--duotone .lede{color:rgba(255,255,255,.86)}
.hero-kicker{
  font-family:var(--serif);font-style:italic;font-size:1.35rem;
  color:var(--gold);margin:0 0 1.1rem;
}

@media(max-width:860px){
  .hero-media::after{background:linear-gradient(to bottom,rgba(13,34,53,.72) 0%,rgba(13,34,53,.9) 55%,#0d2235 100%)}
  .hero-media img{object-position:50% 14%}
  .hero--duotone .wrap{padding-block:64px 72px}
}

/* ---- Sticky booking bar ---- */
.bookbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#0d2235;color:rgba(255,255,255,.82);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(110%);transition:transform .32s ease;
  padding:11px 0;
}
.bookbar.is-visible{transform:translateY(0)}
.bookbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.bookbar-facts{
  font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;
}
.bookbar-facts b{color:#fff;font-weight:500}
.bookbar-actions{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.bookbar-tel{font-family:var(--serif);font-size:1.3rem;color:#fff;white-space:nowrap}
.bookbar-tel:hover{color:var(--gold)}
.bookbar .btn{padding:11px 22px;font-size:.8rem;white-space:nowrap}

@media(max-width:860px){
  .bookbar{padding:9px 0}
  .bookbar-facts{display:none}
  .bookbar .wrap{justify-content:center;gap:12px}
  .bookbar-actions{width:100%;justify-content:space-between}
  .bookbar-tel{font-size:1.15rem}
  .bookbar .btn{flex:0 0 auto}
}

@media(prefers-reduced-motion:reduce){.bookbar{transition:none}}

/* =====================================================================
   Home-page polish, Sept 2026 — patterns borrowed from the sister site:
   stats floated on the hero, a trust strip, location cards with a solid
   header block, and richer review cards.
   ===================================================================== */

/* ---- Stats sitting on the hero rather than in a band below ---- */
.hero--duotone .stats{
  position:relative;z-index:2;border:0;background:transparent;
  padding:0 0 clamp(40px,5vw,64px);
}
.hero--duotone .stats .wrap{
  max-width:1180px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:22px 8px;
}
.hero--duotone .stats > .wrap > div{text-align:center;padding:4px 10px;position:relative}
.hero--duotone .stats > .wrap > div + div::before{
  content:'';position:absolute;left:0;top:14%;height:72%;width:1px;
  background:rgba(255,255,255,.16);
}
.hero--duotone .stats .n{font-size:2rem;color:var(--gold)}
.hero--duotone .stats .l{
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-top:4px;
}
@media(max-width:860px){
  .hero--duotone .stats .wrap{grid-template-columns:repeat(2,1fr);row-gap:18px;padding:18px 6px}
  .hero--duotone .stats > .wrap > div:nth-child(3)::before{display:none}
}

/* ---- Trust strip ---- */
.trustbar{background:var(--cream);border-bottom:1px solid var(--line)}
.trustbar .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding-block:20px;
}
.trustbar-item{
  display:flex;align-items:center;justify-content:center;gap:11px;
  text-align:left;padding:4px 16px;position:relative;
  font-size:.875rem;line-height:1.35;color:var(--ink);
}
.trustbar-item + .trustbar-item::before{
  content:'';position:absolute;left:0;top:10%;height:80%;width:1px;background:var(--line);
}
.trustbar-item svg{flex:0 0 auto;color:var(--teal)}
@media(max-width:860px){
  .trustbar .wrap{grid-template-columns:repeat(2,1fr);row-gap:16px}
  .trustbar-item:nth-child(3)::before{display:none}
  .trustbar-item{font-size:.8125rem;padding:4px 10px}
}
@media(max-width:480px){
  .trustbar .wrap{grid-template-columns:1fr}
  .trustbar-item + .trustbar-item::before{display:none}
  .trustbar-item{justify-content:flex-start}
}

/* ---- Location cards with a solid header block ---- */
.loc{
  padding:0;border-radius:14px;overflow:hidden;background:var(--white);
  border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .2s ease,box-shadow .2s ease;
}
.loc:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.09)}
.loc .tag{
  background:linear-gradient(135deg,#163248,#0d2235);color:var(--gold);
  margin:0;padding:22px 26px 0;border:0;border-radius:0;
  font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;display:block;
}
.loc h3{
  background:linear-gradient(135deg,#163248,#0d2235);color:#fff;
  margin:0;padding:6px 26px 24px;font-size:1.55rem;
}
.loc address,.loc table,.loc .tel,.loc .note,.loc .btn-row{margin-inline:26px}
.loc address{margin-top:22px;display:block}
.loc table{width:calc(100% - 52px);margin-top:16px}
.loc .tel{margin-top:14px}
.loc .note{margin-bottom:0}
.loc .btn-row{margin-bottom:26px;margin-top:16px}
.loc > *:last-child{margin-bottom:26px}

/* ---- Review cards ---- */
.review{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:30px 28px;position:relative;
}
.review::before{
  content:'\201C';position:absolute;top:6px;right:22px;
  font-family:var(--serif);font-size:4.5rem;line-height:1;
  color:rgba(201,169,110,.22);pointer-events:none;
}
.review .stars{color:var(--gold);letter-spacing:.14em;font-size:.95rem;margin-bottom:.9rem}

/* ---- Meet the doctors (home) ---- */
.docs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.doc{
  display:grid;grid-template-columns:210px 1fr;
  background:var(--white);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  transition:transform .25s ease,box-shadow .25s ease;
}
.doc:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(13,34,53,.10)}
.doc-photo{
  width:100%;height:100%;min-height:300px;display:block;
  object-fit:cover;object-position:top center;background:var(--stone);
}
.doc-body{padding:30px 30px 28px;display:flex;flex-direction:column}
.doc-body .eyebrow{margin-bottom:.5rem}
.doc-body h3{font-family:var(--serif);font-size:1.6rem;line-height:1.15;margin:0 0 .75rem}
.doc-body p{font-size:.95rem;line-height:1.65;color:var(--grey);margin:0 0 .85rem}
.doc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:14px}
.doc-tags span{
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--teal);
  background:var(--cream);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;line-height:1;
}
@media(max-width:1080px){.docs-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .doc{grid-template-columns:1fr}
  .doc-photo{min-height:0;aspect-ratio:3/2;object-position:center 20%}
  .doc-body{padding:24px 22px 22px}
}

/* ---- Compact header chrome on small screens ----
   At 375px the topbar + header stacked to 300px, which is 37% of an
   iPhone viewport spent before the visitor sees any content. Phones stay
   (they are the conversion), the email drops below 600px only. */
@media(max-width:860px){
  .topbar{padding:7px 0;font-size:.78rem}
  .topbar .wrap{justify-content:center;gap:3px 18px}
  .topbar-contact{width:100%;justify-content:center;gap:3px 18px}
  .topbar .tline,.topbar .tmail{font-size:.78rem}
  .site-header .btn--gold{padding:13px 20px !important;font-size:.72rem !important;letter-spacing:.11em !important}
}
@media(max-width:600px){
  .topbar .tmail{display:none}
}

/* ---- Hero duotone: deeper navy blend ----
   The photo sat at .75 opacity, which kept it reading as a photograph pasted
   on navy. Dropping it and warming the scrim lets the navy own the panel and
   the faces sit inside the brand colour instead of on top of it.
   These rules come after the originals, so they win on source order. */
.hero--duotone .hero-media img{opacity:.46}
.hero--duotone .hero-media::after{
  background:
    linear-gradient(to right,#0d2235 0%,rgba(13,34,53,.72) 9%,rgba(13,34,53,.34) 26%,rgba(13,34,53,.16) 52%,rgba(13,34,53,.30) 100%),
    linear-gradient(to bottom,rgba(13,34,53,.34) 0%,rgba(13,34,53,0) 30%,rgba(13,34,53,.42) 100%);
}

/* ---- Inside the practice ----
   Real photographs of the office. They are phone shots taken at different
   times in different light, so a single 4:5 crop plus a shared, slightly
   muted treatment is what makes them read as a set rather than a camera roll. */
.inside-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.inside-tile{
  position:relative;display:block;border-radius:14px;overflow:hidden;
  background:var(--navy);border:1px solid var(--line);
}
.inside-tile img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.82) contrast(1.04) brightness(.97);
  transition:transform .5s ease,filter .4s ease;
}
.inside-tile:hover img{transform:scale(1.045);filter:saturate(1) contrast(1.04) brightness(1)}
.inside-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 18px 15px;color:#fff;
  font-family:var(--sans);font-size:.78rem;font-weight:500;
  letter-spacing:.055em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(13,34,53,.86),rgba(13,34,53,0));
}
@media(max-width:860px){
  .inside-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .inside-tile:last-child{grid-column:1/-1}
  .inside-tile:last-child img{aspect-ratio:16/9}
}
@media(max-width:520px){
  .inside-grid{grid-template-columns:1fr}
  .inside-tile:last-child img{aspect-ratio:4/5}
}

/* ---- Service-area diagram ---- */
.areamap,.fdcfig{display:block;width:100%;line-height:0;border-radius:14px;overflow:hidden;
  box-shadow:0 8px 28px rgba(13,34,53,.16)}
.areamap svg,.fdcfig svg{display:block;width:100%;height:auto}

/* ---- Brand lockup ----
   The roundel is cropped out of the logo PNG (it is the leftmost square of the
   file) by clipping a 46px window over an image left at full height. The
   wordmark below is live text, so "of Connecticut" can take the teal used for
   every other eyebrow on the site instead of the near-white cyan baked into the
   raster, and the whole lockup stays sharp on high-density screens.
   The .site-header prefix is needed to outrank the mobile critical CSS that
   prints after this file and sizes .site-header .brand img. */
.brand{flex-direction:row;align-items:center;gap:11px}
.brand-mark{display:block;width:47px;height:46px;overflow:hidden;flex:none}
.site-header .brand .brand-mark img{display:block;height:46px;width:auto;max-width:none}
.brand-words{display:flex;flex-direction:column;gap:2px;line-height:1;min-width:0}
.brand-name{font-family:var(--sans);font-size:1.0625rem;font-weight:700;
  letter-spacing:.012em;color:var(--navy);white-space:nowrap}
.brand-state{font-family:var(--sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--teal);white-space:nowrap}
.brand:hover .brand-name{color:var(--navy)}
.brand:hover .brand-state{color:var(--gold)}
@media(max-width:860px){
  .brand{gap:9px}
  .brand-mark{width:42px;height:42px}
  .site-header .brand .brand-mark img{height:42px}
  .brand-name{font-size:.9375rem}
  .brand-state{font-size:.625rem;letter-spacing:.17em}
}
@media(max-width:400px){
  .brand-name{font-size:.875rem}
  .brand-mark{width:38px;height:38px}
  .site-header .brand .brand-mark img{height:38px}
}

/* Figure shown on its own, rather than opposite a column of copy. */
.fig-wrap{max-width:500px;margin-inline:auto}

/* ---- Services mega menu ----
   The panel hangs off the Services item and is centred under it. The li gets
   position:relative so the panel follows the item rather than the header, and
   a transparent bridge above the panel keeps it open while the pointer travels
   down from the link. Hidden below 861px on purpose: the mobile drawer already
   works, and twenty-two extra links in it would be worse than the services page. */
/* flex:none stops the item being squeezed — when it was, the caret wrapped
   onto a second line and doubled the height of the whole nav row. */
/* The panel is positioned against the header row, not the Services item.
   Centred on the item it hung off the left edge between 861px and about
   1100px, where the nav sits well left of centre. Hover still works because
   the panel is still inside the li in the DOM — only its containing block moved. */
.site-header .wrap{position:relative}
.nav .has-mega{position:static;flex:none}
/* nowrap belongs on the link only. On the li it inherited into the panel and
   stopped the columns wrapping, so long labels ran past the right edge. */
.nav .has-mega > a{white-space:nowrap}
.nav .has-mega > a::after{
  content:'';display:inline-block;width:6px;height:6px;margin-left:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.6;transition:transform .2s ease
}
.nav .has-mega:hover > a::after,.nav .has-mega:focus-within > a::after,.nav .has-mega.is-open > a::after{transform:translateY(-4px) rotate(225deg)}
.mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(900px,100%);
  background:linear-gradient(160deg,#173a54,#0b1e2f);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  box-shadow:0 22px 60px rgba(9,20,32,.42);
  padding:30px 32px 0;z-index:80;white-space:normal;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s
}
/* The link sits 40px above the panel, and that gap belongs to the header, not
   to the menu item — so the pointer left the item on the way down and the panel
   closed before it could be reached. This bridges the whole gap. It starts below
   the nav links, so it never blocks hovering the other items. */
.mega::before{content:'';position:absolute;top:-44px;left:0;right:0;height:44px}
.nav .has-mega:hover .mega,.nav .has-mega:focus-within .mega,.nav .has-mega.is-open .mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)
}
.mega-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 26px}
.mega-col{min-width:0}
.mega-head{
  display:block;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  margin-bottom:14px;line-height:1.5
}
.site-header .mega-col a{
  display:block;padding:7px 0;font-family:var(--sans);font-size:.9375rem;
  font-weight:400;line-height:1.35;color:rgba(255,255,255,.80);
  border:0;text-decoration:none
}
.site-header .mega-col a:hover{color:var(--gold-bright)}
.mega-foot{margin-top:24px;border-top:1px solid rgba(255,255,255,.12);padding:16px 0 20px}
.site-header .mega-foot a{
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);text-decoration:none
}
.site-header .mega-foot a:hover{color:var(--gold-bright)}
@media(max-width:1199px){.mega{display:none}.nav .has-mega > a::after{display:none}}

/* ---- Nav breakpoint ----
   The desktop header needs about 1200px to lay out: logo, seven links and the
   call button. Below that it was silently overflowing the viewport and giving
   the whole page a horizontal scrollbar, so the drawer now takes over at
   1080px (set in the critical CSS in template-fdc.php) and the row is tightened
   between there and 1280 to buy the slack it needs. */
@media(min-width:1200px) and (max-width:1360px){
  .site-header .wrap{gap:22px}
  .nav{gap:20px}
  .nav a{font-size:.875rem}
  .site-header .btn--gold{padding:14px 20px;font-size:.72rem;letter-spacing:.1em}
}

/* ---- Hero, second pass ----
   The new photograph is shot on the practice navy with the doctors grouped to
   the right and clear space to the left, so it no longer needs the duotone
   treatment that was there to force a mismatched photo into the palette. The
   image now runs the full width at full strength and a horizontal scrim carries
   its own navy across to meet the headline. Panel colour sampled from the file
   (#062141) so the two meet without a seam. */
.hero--duotone{background:linear-gradient(135deg,#0b2a4d 0%,#062141 60%,#04182f 100%)}
@media(min-width:861px){
  .hero--duotone .hero-media{left:0}
  .hero--duotone .hero-media img{
    opacity:1;mix-blend-mode:normal;object-position:center center;
  }
  .hero--duotone .hero-media::after{
    background:linear-gradient(to right,
      #062141 0%,rgba(6,33,65,.98) 28%,rgba(6,33,65,.80) 44%,
      rgba(6,33,65,.34) 58%,rgba(6,33,65,0) 74%);
  }
  .hero--duotone .hero-copy{max-width:34rem}
}
/* On a phone the photo sits behind the headline rather than beside it, so it
   stays dimmed — legibility beats showing the faces at that size. */
@media(max-width:860px){
  .hero--duotone .hero-media img{opacity:.38;mix-blend-mode:luminosity;object-position:72% center}
  /* Narrow screens put the copy directly over the faces, so the scrim here is
     even rather than side-weighted — the headline has to win. */
  .hero--duotone .hero-media::after{
    background:linear-gradient(to bottom,rgba(6,33,65,.74) 0%,rgba(6,33,65,.58) 42%,rgba(6,33,65,.80) 100%);
  }
}

/* The new mark is a square roundel on transparency, not the leftmost square of
   a wide lockup, so the crop window that used to trim the old file goes back to
   a plain square. */
.brand-mark{width:46px}