/* ==========================================================================
   Clearbite — style.css
   --------------------------------------------------------------------------
   Art direction is taken from the Mednix "laboratory" theme: Mona Sans for
   everything, a teal (#06BBB5) against deep navy (#0F1E4C / #07112F), an amber
   accent used sparingly, very tight display tracking (-0.04em at large sizes),
   pill badges with a leading dot, a paired button + square arrow, and the
   theme's signature asymmetric corner (one square, one 50px).

   Sections
     1. Tokens and reset          13. Steps
     2. Typography                14. Split feature / tabs
     3. Layout and section heads  15. Team and reviews
     4. Buttons and links         16. Word marquee
     5. Header                    17. FAQ
     6. Hero                      18. Forms and consent
     7. Stat column               19. CTA band
     8. Care cards (dark)         20. Footer
     9. Check list                21. Back to top
    10. Figure panels             22. Animation utilities
    11. Info cards                23. Interior pages
    12. Full-bleed band           24. Responsive

   Colours come from the tokens in section 1. Do not hard-code a hex in a rule.
   ========================================================================== */

/* --- 1. Tokens and reset -------------------------------------------------- */

:root{
  /* Mednix's palette, read off the rendered theme. */
  --navy:        #0F1E4C;   /* headings, dark type */
  --navy-deep:   #07112F;   /* dark sections, footer */
  --navy-card:   #0A1534;   /* a card on a dark section */
  --teal:        #06BBB5;   /* the primary accent */
  --teal-dark:   #05A09B;   /* hover */
  --teal-wash:   #E6F8F7;   /* tinted fills */
  --amber:       #FFB300;   /* used sparingly: ratings, one highlight */
  --mint:        #F1F7F3;   /* the pale warm tint */
  --haze:        #F3F6FB;   /* the pale cool tint — alternates with mint */
  --white:       #FFFFFF;
  --text:        #444444;
  --text-dim:    #6B7280;
  --on-dark:     rgba(255, 255, 255, .72);
  --line:        rgba(15, 30, 76, .10);
  --line-dark:   rgba(255, 255, 255, .12);

  --wrap:        1320px;
  --gutter:      24px;
  --r-sm:        8px;
  --r-md:        12px;
  --r-lg:        20px;
  --r-xl:        30px;
  --r-pill:      100px;
  /* The theme's signature: one corner square, the opposite one deeply cut. */
  --r-cut:       0 50px 0 50px;

  --ease:        cubic-bezier(.22, .61, .36, 1);
  --shadow:      0 18px 48px rgba(15, 30, 76, .08);
  --shadow-lift: 0 28px 64px rgba(15, 30, 76, .14);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

/* No scroll-behavior: smooth on html — a long animated scroll is abandoned by
   Chrome when lazy images settle, which silently breaks in-page CTA jumps. */

body{
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}

img{ max-width: 100%; height: auto; display: block; }
svg{ display: block; }
a{ color: var(--teal); text-decoration: none; transition: color .3s var(--ease); }
a:hover{ color: var(--navy); }
button{ font: inherit; }
[hidden]{ display: none !important; }

:focus-visible{ outline: 3px solid var(--teal); outline-offset: 3px; border-radius: var(--r-sm); }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--navy); color: var(--white); padding: 12px 20px;
}
.skip-link:focus{ left: 0; color: var(--white); }

.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;
}

/* --- 2. Typography -------------------------------------------------------- */

h1, h2, h3, h4, h5{
  margin: 0 0 .55em;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.08;
  /* The theme runs display type very tight — -4px at 80px. */
  letter-spacing: -.04em;
}
h1{ font-size: clamp(2.5rem, 5vw, 4.6rem); }
h2{ font-size: clamp(2rem, 3.6vw, 3.4rem); }
h3{ font-size: clamp(1.2rem, 1.6vw, 1.5rem); letter-spacing: -.025em; line-height: 1.25; }
h4{ font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.3; }

p{ margin: 0 0 1.15em; }
p:last-child{ margin-bottom: 0; }
.lead{ font-size: 1.1rem; line-height: 1.7; }

strong{ color: var(--navy); font-weight: 600; }

/* The theme sets one phrase of a heading in teal italic. One per heading. */
.tint{ color: var(--teal); font-style: italic; }

.on-dark, .on-dark p{ color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark strong{ color: var(--white); }

/* --- 3. Layout and section heads ------------------------------------------ */

.wrap{ width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.section{ position: relative; padding: clamp(60px, 7.5vw, 110px) 0; scroll-margin-top: 96px; }
/* Every section sits on a named surface and no two neighbours share one. A
   page that is mostly white reads as one undifferentiated field however well
   the blocks inside it are set — which is exactly how this looked. The order
   is set in build-pages.py; these are just the surfaces. */
.section--mint{ background: var(--mint); }
.section--haze{ background: var(--haze); }
.section--tight{ padding-top: clamp(36px, 4vw, 56px); }

/* The dark block is a slab, not a stripe: rounded top and bottom so it reads
   as laid over the page rather than cut out of it. Same move the footer makes. */
.section--dark{
  background: var(--navy-deep); color: var(--on-dark);
  border-radius: var(--r-xl);
  margin: clamp(10px, 1.5vw, 22px) clamp(10px, 1.5vw, 22px);
}

/* A hairline where two light surfaces meet, so the join is legible even
   between two tints that are close in value. */
.section--mint + .section--haze,
.section--haze + .section--mint,
.section--mint + .section--mint,
.section--haze + .section--haze{ border-top: 1px solid var(--line); }

/* The pill badge with a leading dot that heads every section in the theme. */
.badge{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 18px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy);
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
}
.badge::before{
  content: ""; width: 7px; height: 7px; flex: 0 0 7px;
  border-radius: 50%; background: var(--teal);
}
.section--mint .badge,
.section--haze .badge{ background: var(--white); }
.on-dark .badge, .section--dark .badge{
  background: rgba(255, 255, 255, .06);
  border-color: var(--line-dark);
  color: var(--white);
}

.section-head{ max-width: 720px; margin: 0 0 clamp(32px, 4vw, 54px); }
.section-head--center{ margin-inline: auto; text-align: center; }
.section-head p{ font-size: 1.05rem; }

.head-split{
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(32px, 4vw, 54px);
}
.head-split .section-head{ margin-bottom: 0; }

.grid{ display: grid; gap: 24px; }
.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)); }

.split{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 70px); align-items: center;
}
/* Centring only works when the two columns are roughly the same height. Beside
   a twelve-item accordion or a long form, a short column ends up stranded in
   the middle of a tall empty space — which is exactly how it looked. These
   pin the short column to the top and, where there is room, keep it in view. */
.split--top{ align-items: start; }
.split--sticky > *:first-child{ position: sticky; top: 104px; }

/* A long prose column beside one landscape photograph leaves the photo floating
   in the middle of a tall void — the "blank side" complaint, mirrored. Cropping
   the photo to fill the column is the wrong fix here: every portrait crop of a
   group shot cuts a face in half. Shorten the prose instead, and give what came
   off it a full-width band under both columns. */
.note-band{
  margin-top: clamp(32px, 4vw, 52px);
  padding: clamp(24px, 3vw, 34px) clamp(26px, 3.5vw, 40px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  /* Haze, not mint: the section that follows is mint, and two mint blocks
     either side of a white gutter read as one interrupted block. */
  background: var(--haze);
  display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, .68fr);
  gap: clamp(16px, 3vw, 40px); align-items: start;
}
.note-band h3{ margin: 0; font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
.note-band p{ margin: 0; }
@media (max-width: 860px){ .note-band{ grid-template-columns: minmax(0, 1fr); } }
/* An asymmetric split reads as deliberate where a 50/50 one reads as a gap. */
.split--aside{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

/* --- 4. Buttons and links ------------------------------------------------- */

/* One continuous pill with the arrow in a disc at its right end, and a
   coloured circle that wipes out from behind that disc to fill the button on
   hover. The two-piece label-plus-separate-tile button the theme ships is
   what every sibling site already uses in one form or another, and a small
   square tile butted against a pill reads as a mistake rather than a detail.

   Stacking matters here: .btn sets z-index 0, which makes it a stacking
   context, so the wipe CANNOT sit at z-index -1 — it would paint behind the
   button's own background and never be seen. Background, then ::before at 0,
   then the content at 1. */
.btn{
  position: relative; z-index: 0; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 26px;
  border-radius: var(--r-pill);
  border: none; cursor: pointer;
  background: var(--teal); color: var(--white);
  font-size: .95rem; font-weight: 600; line-height: 1;
  transition: color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn > span{ position: relative; z-index: 1; }
.btn > i{
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-style: normal;
  transition: background .35s var(--ease), color .35s var(--ease),
              transform .45s var(--ease);
}
.btn > i svg{ width: 17px; height: 17px; }

/* The seed is the arrow disc's own size and sits on its centre — 6px of
   padding plus half of 42 — so the fill looks like it grows out of the disc
   rather than appearing behind it. 26x covers the widest button on the site
   (.btn--wide in a form panel) from that off-centre origin. */
.btn::before{
  content: ""; position: absolute; z-index: 0;
  top: 50%; right: 27px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy);
  transform: translate(50%, -50%) scale(0);
  transition: transform .6s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before{ transform: translate(50%, -50%) scale(26); }
/* The label colour has to be restated on hover. `a:hover{ color: var(--navy) }`
   further up is (0,1,1) and outranks a bare `.btn` at (0,1,0), so without this
   the label turns navy on the navy fill and disappears. The old two-piece
   button hid this by colouring its inner span. */
.btn:hover,
.btn:focus-visible{ color: var(--white); }
.btn:hover > i,
.btn:focus-visible > i{ background: var(--teal); transform: translateX(3px); }

/* Outlined. The ring is on the button itself now, not on two pieces. */
.btn--ghost{
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost > i{ background: rgba(15, 30, 76, .07); color: var(--navy); }
.btn--ghost::before{ background: var(--teal); }
.btn--ghost:hover,
.btn--ghost:focus-visible{ color: var(--white); box-shadow: inset 0 0 0 1.5px transparent; }
.btn--ghost:hover > i,
.btn--ghost:focus-visible > i{ background: rgba(255, 255, 255, .22); color: var(--white); }

.btn--light{ background: var(--white); color: var(--navy); }
.btn--light > i{ background: rgba(15, 30, 76, .08); color: var(--navy); }
.btn--light::before{ background: var(--teal); }
.btn--light:hover,
.btn--light:focus-visible{ color: var(--white); }
.btn--light:hover > i,
.btn--light:focus-visible > i{ background: rgba(255, 255, 255, .22); color: var(--white); }

/* On a dark band the ghost has to wipe to teal. Left at the default navy it
   fills navy-on-navy and the hover simply does not read. */
.on-dark .btn--ghost,
.section--dark .btn--ghost{ color: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-dark); }
.on-dark .btn--ghost > i,
.section--dark .btn--ghost > i{ background: rgba(255, 255, 255, .16); color: var(--white); }
.on-dark .btn--ghost::before,
.section--dark .btn--ghost::before{ background: var(--teal); }
.on-dark .btn--ghost:hover,
.on-dark .btn--ghost:focus-visible,
.section--dark .btn--ghost:hover,
.section--dark .btn--ghost:focus-visible{ color: var(--white); box-shadow: inset 0 0 0 1.5px transparent; }

.btn--wide{ width: 100%; }
.btn--wide > span{ flex: 1; text-align: center; }

.btn-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }

.arrow-link{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--navy); font-weight: 600; font-size: .93rem;
}
.arrow-link i{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--teal-wash); color: var(--teal);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.arrow-link i svg{ width: 14px; height: 14px; }
.arrow-link:hover{ color: var(--teal); }
.arrow-link:hover i{ background: var(--teal); color: var(--white); transform: translateX(3px); }
.on-dark .arrow-link{ color: var(--white); }
.on-dark .arrow-link i{ background: rgba(255, 255, 255, .1); color: var(--white); }

/* The phone pairing in the header and beside a CTA. */
.call{ display: flex; align-items: center; gap: 12px; }
.call .ic{
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--teal-wash); color: var(--teal);
}
.call .ic svg{ width: 20px; height: 20px; }
.call small{ display: block; font-size: .76rem; color: var(--text-dim); line-height: 1.3; }
.call strong{ display: block; font-size: .98rem; color: var(--navy); }
.on-dark .call .ic{ background: rgba(255, 255, 255, .08); color: var(--white); }
.on-dark .call small{ color: var(--on-dark); }
.on-dark .call strong{ color: var(--white); }

/* --- 5. Header ------------------------------------------------------------ */

.site-header{
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck{ box-shadow: 0 10px 30px rgba(15, 30, 76, .07); border-bottom-color: var(--line); }

/* Laid over a full-bleed hero: transparent, white text, nothing under it.
   `is-stuck` (set in main.js past 20px) hands it back to the solid state, so
   the two rules have to fight in the right order — --over first, is-stuck
   after, or the header stays transparent over white content. */
.site-header--over{
  position: absolute; left: 0; right: 0; top: 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header--over .brand b,
.site-header--over .site-nav a,
.site-header--over .nav-toggle{ color: var(--white); border-color: rgba(255, 255, 255, .3); }
.site-header--over .site-nav a:hover,
.site-header--over .site-nav a[aria-current="page"]{ color: var(--teal); }

.site-header--over.is-stuck{
  position: fixed;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.site-header--over.is-stuck .brand b,
.site-header--over.is-stuck .site-nav a{ color: var(--navy); }
.site-header--over.is-stuck .nav-toggle{ color: var(--navy); border-color: var(--line); }
.site-header--over.is-stuck .site-nav a:hover,
.site-header--over.is-stuck .site-nav a[aria-current="page"]{ color: var(--teal); }
/* One row: mark, wordmark, nav, CTA. The phone block used to sit between the
   nav and the CTA and it was the thing that did not fit — with a three-word
   brand and seven nav items the row was already touching at 2016px. The
   number is still in the footer, on the contact page, and behind every CTA. */
.site-header .wrap{ display: flex; align-items: center; gap: 22px; min-height: 80px; }

.brand{ display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand svg{ width: 40px; height: 40px; flex: 0 0 40px; }
.brand b{ color: var(--navy); font-size: 1.32rem; font-weight: 700; letter-spacing: -.035em;
  white-space: nowrap; }   /* un nombre de marca no se parte en dos líneas */

.site-nav > ul{ display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.site-nav a{
  color: var(--navy); font-size: .88rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em;
  position: relative; padding: 8px 0;
}
.site-nav a::after{
  content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 2px;
  background: var(--teal); transition: width .3s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"]{ color: var(--teal); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after{ width: 100%; }

/* A touch smaller in the header. The padding is on the button now, and the
   ::before seed has to follow the disc, or the wipe starts off-centre. */
.header-cta{ padding: 5px 5px 5px 20px; gap: 11px; font-size: .88rem; }
.header-cta > i{ width: 36px; height: 36px; flex: 0 0 36px; }
.header-cta::before{ right: 23px; width: 36px; height: 36px; }

.nav-toggle{
  display: none; width: 46px; height: 46px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--navy); cursor: pointer;
}
.nav-toggle span{ display: block; width: 19px; height: 2px; margin: 4px auto; background: currentColor;
  transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* --- 6. Hero -------------------------------------------------------------- */

/* A full-bleed photograph with the copy on the left, over a scrim: the shape
   the theme's dentist demo uses. The header lays on top of it (see
   .site-header--over), so the image starts at y=0 and the copy clears the
   header with padding rather than a margin. */
.hero--full{
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: clamp(540px, 82vh, 840px);
  padding: 120px 0 clamp(56px, 7vw, 96px);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
  color: var(--white);
}
.hero-bg{ position: absolute; inset: 0; z-index: -2; }
.hero-bg img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
}

/* Three stacked gradients, not one: the first carries the left edge, the
   second settles the bottom, the third takes the last of the top. A single
   ramp dark enough to hold white text flattens the photograph. */
.hero-scrim{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(274deg, rgba(7, 17, 47, 0) 30%, rgba(7, 17, 47, .72) 58%, rgba(7, 17, 47, .97)),
    linear-gradient(1deg, rgba(7, 17, 47, 0) 55%, rgba(7, 17, 47, .24) 83%, rgba(7, 17, 47, .74)),
    linear-gradient(rgba(7, 17, 47, .40), rgba(7, 17, 47, 0) 42%);
}

.hero-lede{ max-width: 660px; }
.hero-lede h1{
  margin: 0 0 22px;
  font-size: clamp(2.5rem, 5.6vw, 4.9rem);
  line-height: 1.03;
  color: var(--white);
}
.hero-lede .lead{ color: rgba(255, 255, 255, .84); margin: 0; max-width: 54ch; }
.hero-lede .btn-row{ margin-top: 30px; }

/* The reference sets its eyebrow as a small tinted chip followed by the
   label, both inside one low-contrast pill. */
.eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 22px; padding: 7px 16px 7px 7px;
  /* Both boxes take the same small radius. A square-cornered chip inside a
     fully round pill is the thing that reads as broken. */
  border-radius: 11px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--white);
}
.eyebrow i{
  font-style: normal; padding: 4px 10px; border-radius: 7px;
  background: var(--teal); color: var(--white);
  font-size: .72rem; letter-spacing: .1em;
}

/* On the photograph the ghost is a white ring, and it wipes to white rather
   than to teal so it does not end up identical to the primary on hover. */
.hero--full .btn--ghost{
  color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.hero--full .btn--ghost > i{ background: rgba(255, 255, 255, .2); color: var(--white); }
.hero--full .btn--ghost::before{ background: var(--white); }
.hero--full .btn--ghost:hover,
.hero--full .btn--ghost:focus-visible{ color: var(--navy); }
.hero--full .btn--ghost:hover > i,
.hero--full .btn--ghost:focus-visible > i{ background: var(--navy); color: var(--white); }

@media (max-width: 860px){
  .hero--full{ min-height: 0; padding: 116px 0 clamp(44px, 9vw, 64px); }
  .hero-bg img{ object-position: 68% center; }
  .hero-lede .lead{ max-width: none; }
}

/* --- 7. Stat column ------------------------------------------------------- */

/* A horizontal band under the split. Stacked in a column beside a photograph
   they made the section twice as tall as it needed to be. */
.stat-list{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
@media (max-width: 680px){ .stat-list{ grid-template-columns: 1fr; gap: 26px; } }
.stat b{
  display: block; color: var(--navy);
  font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 500;
  line-height: 1; letter-spacing: -.05em;
}
.stat span{ display: block; margin-top: 6px; font-size: .95rem; }

/* --- 8. Care cards (dark) ------------------------------------------------- */

.care{
  position: relative; display: flex; flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  background: var(--navy-card);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.care:hover{ transform: translateY(-7px); border-color: rgba(6, 187, 181, .55); }
.care-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.care-top h3{ margin: 0; color: var(--white); max-width: 11ch; }
.care .ic{
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .07); color: var(--teal);
}
.care .ic svg{ width: 22px; height: 22px; }
.care p{ margin: 18px 0 22px; font-size: .95rem; flex: 1; }
.care-foot{ padding-top: 18px; border-top: 1px solid var(--line-dark); }

/* --- 9. Check list -------------------------------------------------------- */

.checks{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 22px 0 28px; padding: 0; list-style: none; }
.checks li{ display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--navy); }
.checks svg{ flex: 0 0 18px; width: 18px; height: 18px; color: var(--teal); margin-top: 4px; }
.on-dark .checks li{ color: var(--white); }

/* --- 10. Figure panels ---------------------------------------------------- */

.figure{ position: relative; }
.figure img{ width: 100%; border-radius: var(--r-xl); object-fit: cover; }
.figure--cut img{ border-radius: var(--r-cut); }
.figure .tag{
  position: absolute; right: 18px; bottom: 18px;
  padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--white); box-shadow: var(--shadow);
  font-size: .86rem; font-weight: 600; color: var(--navy);
}
.figure .line-art{
  position: absolute; left: -34px; top: -28px; width: 110px;
  color: var(--teal); opacity: .5; pointer-events: none;
}

/* --- 11. Info cards ------------------------------------------------------- */

.info{
  padding: 30px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--white);
  height: 100%;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.info:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.info .ic{
  width: 52px; height: 52px; margin-bottom: 20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--teal-wash); color: var(--teal);
}
.info .ic svg{ width: 24px; height: 24px; }
.info h3{ font-size: 1.15rem; }
.info p{ font-size: .95rem; margin-bottom: 0; }

/* --- 12. Full-bleed band -------------------------------------------------- */

.band{ position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 380px; display: flex; align-items: flex-end; }
.band img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 17, 47, .1) 30%, rgba(7, 17, 47, .88) 100%); }
.band-body{ position: relative; z-index: 2; padding: clamp(26px, 3vw, 44px); max-width: 660px; }
.band-body h2{ color: var(--white); }
.band-body p{ color: rgba(255, 255, 255, .82); margin: 0; }

/* --- 13. Steps ------------------------------------------------------------ */

.step{
  position: relative; overflow: hidden;
  padding: 30px 30px 62px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--white);
  height: 100%;
}
.step h3{ font-size: 1.2rem; }
.step p{ font-size: .95rem; margin-bottom: 0; }
.step .line-art{ position: absolute; left: 26px; bottom: 16px; width: 62px; color: var(--navy); opacity: .28; }
.step .no{
  position: absolute; right: 0; bottom: 0;
  width: 62px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-lg) 0 var(--r-lg) 0;
  background: var(--teal-wash);
  color: var(--navy); font-weight: 600; font-size: .95rem;
}

/* The panel that closes the steps row: photograph on one side, the promises
   and the CTA on the other, inside one rounded surface. It replaces a second
   text-left/image-right split that read as a repeat of the hero. */
.promise{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; align-items: stretch;
  margin-top: clamp(30px, 3.5vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
}
.promise-media{ min-height: 300px; }
.promise-media img{ width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.promise-body{ padding: clamp(28px, 3.4vw, 48px); align-self: center; }
.promise-body h3{ margin-bottom: 18px; }
.promise-body .checks{ margin: 0 0 26px; }
@media (min-width: 981px) and (max-width: 1200px){
  .site-header .wrap{ gap: 16px; }
  .site-nav > ul{ gap: 17px; }
  .site-nav a{ font-size: .8rem; letter-spacing: 0; }
  .brand b{ font-size: 1.16rem; }
  .brand svg{ width: 34px; height: 34px; flex: 0 0 34px; }
  .header-cta{ padding: 5px 5px 5px 18px; gap: 10px; font-size: .84rem; }
  .header-cta > i{ width: 34px; height: 34px; flex: 0 0 34px; }
  .header-cta::before{ right: 22px; width: 34px; height: 34px; }
}

@media (max-width: 980px){
  .promise{ grid-template-columns: 1fr; }
  .promise-media{ min-height: 220px; }
  .promise-media img{ min-height: 220px; }
}

/* --- 14. Split feature / tabs --------------------------------------------- */

.tabs{
  display: inline-flex; padding: 6px; margin: 4px 0 22px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white);
}
.tabs button{
  padding: 11px 24px; border: none; border-radius: var(--r-pill);
  background: transparent; color: var(--navy);
  font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.tabs button[aria-selected="true"]{ background: var(--teal); color: var(--white); }
.tab-panel[hidden]{ display: none; }

/* --- 15. Team and reviews ------------------------------------------------- */

.review{
  padding: 30px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--white);
  height: 100%; display: flex; flex-direction: column;
}
.stars{ display: flex; gap: 3px; color: var(--amber); margin-bottom: 16px; }
.stars svg{ width: 16px; height: 16px; }
.review blockquote{ margin: 0 0 22px; flex: 1; font-size: 1rem; color: var(--navy); line-height: 1.65; }
.review-by{ display: flex; align-items: center; gap: 13px; padding-top: 20px; border-top: 1px solid var(--line); }
/* No object-position: the files are already square headshots, cropped around
   the face by tools/crop-avatars.py. object-position could not have fixed this
   anyway — a square crop of a 320x213 landscape takes the full height, so the
   vertical half of the rule does nothing whatsoever. */
.review-by img{
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 50%; object-fit: cover;
  background: var(--mint);
}
.review-by b{ display: block; color: var(--navy); font-size: .96rem; }
.review-by span{ display: block; font-size: .85rem; color: var(--text-dim); }

/* --- 16. Word marquee ----------------------------------------------------- */

/* The theme closes with a row of very large words separated by a starburst. */
.word-marquee{ overflow: hidden; white-space: nowrap; padding: clamp(26px, 3vw, 44px) 0; }
.word-track{ display: inline-flex; align-items: center; gap: 46px; padding-right: 46px; animation: slide 42s linear infinite; }
.word-marquee:hover .word-track{ animation-play-state: paused; }
.word-track b{
  font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 600;
  letter-spacing: -.045em; color: var(--navy); line-height: 1;
}
.word-track b:nth-child(4n+3){ color: var(--teal); }
.word-track i{ flex: 0 0 34px; width: 34px; color: var(--teal); opacity: .55; }
.on-dark .word-track b{ color: var(--white); }
.on-dark .word-track b:nth-child(4n+3){ color: var(--teal); }
@keyframes slide{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* --- 17. FAQ -------------------------------------------------------------- */

.faq-item{
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); margin-bottom: 12px; overflow: hidden;
}
.faq-item.is-open{ border-color: rgba(6, 187, 181, .5); }
.faq-q{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; border: none; background: transparent;
  color: var(--navy); font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer;
}
.faq-q .mark{
  flex: 0 0 28px; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--teal-wash); color: var(--teal);
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.faq-item.is-open .faq-q .mark{ transform: rotate(45deg); background: var(--teal); color: var(--white); }
.faq-q .mark svg{ width: 13px; height: 13px; }
.faq-a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq-item.is-open .faq-a{ grid-template-rows: 1fr; }
.faq-a > div{ overflow: hidden; }
.faq-a p{ padding: 0 24px 22px; margin: 0; font-size: .96rem; }

/* --- 18. Forms and consent ------------------------------------------------ */

.panel{
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-lift);
  padding: clamp(26px, 3.4vw, 44px);
}
.field{ margin-bottom: 18px; }
.field label{ display: block; margin-bottom: 7px; color: var(--navy); font-size: .9rem; font-weight: 600; }
.field input, .field select, .field textarea{
  width: 100%; padding: 14px 18px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); color: var(--navy); font: inherit; font-size: 1rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-wash);
}
.field-2{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

.check{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 17px; margin-bottom: 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-size: .86rem; line-height: 1.6;
}
.check input{ flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--teal); }
.check.is-invalid{ border-color: #C1392B; background: rgba(193, 57, 43, .04); }
.check b{ display: block; color: var(--navy); font-size: .92rem; margin-bottom: 3px; }

.fine{
  margin: 18px 0 22px; padding: 16px 20px;
  border-radius: var(--r-sm); background: var(--mint);
  font-size: .8rem; line-height: 1.65;
}

.form-error{
  display: none; margin-bottom: 16px; padding: 13px 16px;
  border-radius: var(--r-sm); background: rgba(193, 57, 43, .08);
  color: #9E2B1F; font-size: .9rem; font-weight: 600;
}
.form-error.is-shown{ display: block; }

.form-done{
  display: none; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(18px, 3vw, 34px) 0 clamp(10px, 2vw, 20px);
}
.form-done h3{ margin-bottom: 10px; }
.form-done p{ max-width: 44ch; margin: 0 auto; }
.form-done.is-shown{ display: flex; }
.form-done .ic{
  width: 62px; height: 62px; margin-bottom: 20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--teal); color: var(--white);
}
.form-done .ic svg{ width: 28px; height: 28px; }

/* Honeypot: reachable by a bot reading the HTML, invisible to everyone else.
   display:none is a tell — plenty of bots skip those. */
.hp{ position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- 19. CTA band --------------------------------------------------------- */

.cta{
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--navy-deep);
  padding: clamp(38px, 5vw, 70px);
  text-align: center;
}
.cta::before{
  content: ""; position: absolute; inset: auto -10% -70% -10%; height: 150%;
  background: radial-gradient(48% 52% at 50% 50%, rgba(6, 187, 181, .32) 0%, rgba(6, 187, 181, 0) 70%);
}
.cta > *{ position: relative; z-index: 1; }
.cta h2{ color: var(--white); max-width: 22ch; margin-inline: auto; }
.cta p{ color: rgba(255, 255, 255, .78); max-width: 60ch; margin-inline: auto; }
.cta .btn-row{ justify-content: center; margin-top: 28px; }

/* --- 20. Footer ----------------------------------------------------------- */

.site-footer{
  background: var(--navy-deep); color: var(--on-dark);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: clamp(40px, 5vw, 70px);
  padding: clamp(46px, 5vw, 72px) 0 0;
  overflow: hidden;
}
.footer-grid{ display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 34px; }
.footer-card{
  padding: 26px; border-radius: var(--r-lg);
  background: var(--navy-card); border: 1px solid var(--line-dark);
}
.footer-card .brand b{ color: var(--white); }
.footer-card p{ font-size: .92rem; margin: 16px 0 18px; }
.hours{ display: grid; gap: 8px; font-size: .88rem; }
.hours div{ display: flex; justify-content: space-between; gap: 14px; padding-top: 8px; border-top: 1px solid var(--line-dark); }
.hours span:last-child{ color: var(--white); }
.footer-grid h4{ color: var(--white); font-size: 1rem; margin-bottom: 18px; }
.footer-grid ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-grid a{ color: var(--on-dark); font-size: .93rem; }
.footer-grid a:hover{ color: var(--teal); }

.news-form{ position: relative; margin-top: 14px; }
.news-form input{
  width: 100%; padding: 15px 58px 15px 18px;
  border: 1px solid var(--line-dark); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05); color: var(--white); font: inherit; font-size: .93rem;
}
.news-form input::placeholder{ color: rgba(255, 255, 255, .45); }
.news-form input:focus{ outline: none; border-color: var(--teal); }
.news-form button{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: none; border-radius: 50%; background: var(--teal); color: var(--white); cursor: pointer;
}
.news-form button svg{ width: 17px; height: 17px; }
.news-note{ font-size: .78rem; margin-top: 10px; }
.news-error{ margin: 10px 0 0; font-size: .82rem; }
.news-done{ padding: 0; align-items: flex-start; text-align: left; }
.news-done.is-shown{ display: block; }
.news-done p{ margin: 10px 0 0; font-size: .88rem; }

.footer-contact{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: 40px 0 0; padding: 26px 0; border-top: 1px solid var(--line-dark);
}
.footer-contact div{ display: flex; align-items: center; gap: 13px; }
.footer-contact .ic{
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--teal);
}
.footer-contact .ic svg{ width: 19px; height: 19px; }
.footer-contact small{ display: block; font-size: .78rem; }
.footer-contact strong{ display: block; font-size: .93rem; color: var(--white); }

/* The footer is dark but carries no .on-dark, so the global
   `strong{ color: var(--navy) }` reached the lead-in and painted it navy on
   near-navy. This is the safety disclaimer: it has to be the most readable
   small print on the page, not the least. */
.disclaimer{ padding: 4px 0 24px; font-size: .82rem; line-height: 1.7; color: rgba(255, 255, 255, .64); max-width: 940px; }
.disclaimer strong{ color: var(--white); }
.footer-legal{ border-top: 1px solid var(--line-dark); padding: 20px 0 26px; font-size: .84rem; }
.footer-legal .wrap{ display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; }
.footer-legal p{ margin: 0; }

/* --- 21. Back to top ------------------------------------------------------ */

.to-top{
  position: fixed; right: 22px; bottom: 22px; z-index: 800;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: none; border-radius: var(--r-sm);
  background: var(--teal); color: var(--white); cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s var(--ease);
}
.to-top.is-shown{ opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover{ background: var(--navy); }
.to-top svg{ width: 17px; height: 17px; }

/* --- 22. Animation utilities ---------------------------------------------- */

/* The theme's headings light up word by word as the block crosses the
   viewport. Spans are wrapped by main.js; spaces stay as text nodes so the
   line can still break. */
/* Every DARK surface that carries a heading has to be listed here, or the
   words paint navy on navy and the heading is invisible. Check the surface
   before adding one: .page-hero is mint on this site, and listing it here
   would paint every interior heading white on a light band. */
.reveal-words span{ color: rgba(15, 30, 76, .18); transition: color .3s linear; }
.on-dark .reveal-words span,
.section--dark .reveal-words span,
.hero--full .reveal-words span{ color: rgba(255, 255, 255, .22); }
.reveal-words span.on{ color: var(--navy); }
.on-dark .reveal-words span.on,
.section--dark .reveal-words span.on,
.hero--full .reveal-words span.on{ color: var(--white); }
/* Last, so it outranks the dark-surface rules above: the tinted phrase stays
   teal on every background. */
.reveal-words .tint.on,
.reveal-words span.tint,
.hero--full .reveal-words .tint.on,
.hero--full .reveal-words span.tint{ color: var(--teal); }

.fade-up{ opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fade-up.in{ opacity: 1; transform: none; }

.img-reveal{ clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); }
.img-reveal.in{ clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .fade-up{ opacity: 1; transform: none; }
  .img-reveal{ clip-path: none; }
  .reveal-words span{ color: inherit; }
}

/* --- 23. Interior pages --------------------------------------------------- */

.page-hero{
  position: relative; overflow: hidden;
  background: var(--mint);
  padding: clamp(50px, 6vw, 84px) 0 clamp(46px, 5vw, 72px);
}
.page-hero h1{ max-width: 18ch; }
.page-hero p{ max-width: 62ch; font-size: 1.08rem; }
.crumbs{ display: flex; gap: 9px; align-items: center; margin-bottom: 16px; font-size: .84rem; color: var(--text-dim); }
.crumbs a{ color: var(--navy); }

.prose{ max-width: 780px; }
.prose h2{ font-size: clamp(1.5rem, 2.2vw, 2rem); margin-top: 1.9em; }
.prose h2:first-child{ margin-top: 0; }
.prose h3{ font-size: 1.14rem; margin-top: 1.6em; }
.prose ul, .prose ol{ margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li{ margin-bottom: .5em; }
.prose table{ width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .93rem; }
.prose th, .prose td{ text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th{ color: var(--navy); font-weight: 600; }

.toc{ padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mint); margin-bottom: 32px; }
.toc h4{ margin-bottom: 12px; }
.toc ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }

.callout{
  padding: 20px 24px; margin: 0 0 1.6em;
  border-left: 3px solid var(--teal); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--teal-wash); font-size: .95rem;
}
.callout strong{ display: block; margin-bottom: 4px; }

/* --- 24. Responsive ------------------------------------------------------- */

@media (max-width: 1180px){
  .grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  .site-nav{
    position: fixed; inset: 80px 0 auto 0; max-height: calc(100vh - 80px); overflow-y: auto;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 24px;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .site-nav.is-open{ opacity: 1; transform: none; pointer-events: auto; }
  .site-nav > ul{ flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li{ border-bottom: 1px solid var(--line); }
  .site-nav a{ display: block; padding: 15px 0; font-size: .95rem; }
  .site-nav a::after{ display: none; }
  .nav-toggle{ display: block; order: 3; }
  /* "Dental Care Finder" wrapped to three lines next to a 40px mark. Keep it
     on one line and let the mark and the type come down instead. Nothing to
     do with the phone block: that was already hidden at this width. */
  .site-header .wrap{ gap: 10px; }
  .brand{ gap: 8px; }
  .brand svg{ width: 32px; height: 32px; flex: 0 0 32px; }
  .brand b{ font-size: 1.02rem; white-space: nowrap; }
  .header-cta{ order: 2; }
  .header-cta{ padding: 4px 4px 4px 15px; gap: 9px; font-size: .82rem; }
  .header-cta > span{ white-space: nowrap; }
  .header-cta > i{ width: 32px; height: 32px; flex: 0 0 32px; }
  .header-cta::before{ right: 20px; width: 32px; height: 32px; }
  .brand{ order: 1; }

  /* The drop-down panel is white whatever the header is doing, so the links
     have to come back to navy — otherwise a transparent header over the hero
     leaves white text on a white panel. */
  .site-header--over .site-nav{ background: var(--white); }
  .site-header--over .site-nav a{ color: var(--navy); }
  .site-header--over .site-nav a:hover,
  .site-header--over .site-nav a[aria-current="page"]{ color: var(--teal); }
  .split{ grid-template-columns: 1fr; }
  .split--flip > *:first-child{ order: 2; }
  .grid--3, .grid--2{ grid-template-columns: 1fr; }
  .footer-contact{ grid-template-columns: 1fr; }
}

@media (max-width: 680px){
  :root{ --gutter: 18px; }
  .grid--4{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .field-2{ grid-template-columns: 1fr; }
  .checks{ grid-template-columns: 1fr; }
  .tabs{ width: 100%; }
  .tabs button{ flex: 1; padding: 11px 10px; font-size: .85rem; }
}