/* ==========================================================================
   Implantello — design system
   Brand: navy #0E2740 + implant orange #E96E26 (from the logo).
   Signature: the slanted, stepped geometry of the logo mark (≈ 62° slant),
   used for buttons, the hero photo mask and step markers. Nowhere else.
   ========================================================================== */

@font-face {
  font-family: "Lexend";
  src: url("/assets/fonts/lexend-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900; font-style: italic; font-display: swap;
}

:root {
  --navy: #0E2740;
  --navy-2: #1A3E62;
  --navy-deep: #091B2D;
  --orange: #E96E26;
  --orange-d: #B9521A;          /* orange used as text on white (AA) */
  --ink: #18293A;
  --slate: #52657A;
  --line: #D8E0E8;
  --line-2: #E8EDF2;
  --mist: #EDF2F6;
  --mist-2: #F6F8FA;
  --tint: #FDF0E7;
  --white: #FFFFFF;

  --font-d: "Lexend", "Avenir Next", system-ui, sans-serif;
  --font-b: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 40px);
  --sec: clamp(64px, 8.5vw, 120px);
  --r: 6px;
  --slant: 14px;                /* horizontal offset of slanted edges */
  --shadow: 0 1px 2px rgba(14, 39, 64, .06), 0 12px 32px -12px rgba(14, 39, 64, .22);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr-h: 84px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 1.125rem/1.62 var(--font-b);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
figure { margin: 0; }
[hidden] { display: none !important; }
a { color: var(--navy-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange-d); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-d); color: var(--navy); margin: 0 0 .5em; font-weight: 600; letter-spacing: -.018em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 4.4vw, 3.9rem); line-height: 1.04; letter-spacing: -.028em; }
h2 { font-size: clamp(1.9rem, 3.1vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); letter-spacing: -.01em; line-height: 1.25; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
strong { font-weight: 650; }
small { font-size: .875rem; }
address { font-style: normal; }
::selection { background: var(--orange); color: var(--navy); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--xl { width: 56px; height: 56px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r); }
.skip:focus { top: 12px; color: #fff; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: calc(860px + var(--gut) * 2); }

/* ---------- Buttons (slanted like the logo mark) ---------- */
.btn {
  --bg: var(--orange); --fg: var(--navy); --bd: transparent;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 54px; padding: .7em 1.7em; border: 0; background: none; color: var(--fg); cursor: pointer;
  font: 600 1.0625rem/1.15 var(--font-d); letter-spacing: -.005em; text-decoration: none; text-align: center;
  transition: color .2s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg); border: 2px solid var(--bd);
  border-radius: 4px; transform: skewX(-16deg); transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .25s var(--ease);
}
.btn:hover { color: var(--fg); }
.btn:hover::before { transform: skewX(-16deg) translateX(2px); }
.btn:active::before { transform: skewX(-16deg) scale(.98); }
.btn .ico { width: 1.05em; height: 1.05em; }
.btn--primary:hover { --bg: #F07F3A; }
.btn--navy { --bg: var(--navy); --fg: #fff; }
.btn--navy:hover { --bg: var(--navy-2); color: #fff; }
.btn--ghost { --bg: transparent; --fg: var(--navy); --bd: var(--navy); }
.btn--ghost:hover { --bg: var(--navy); color: #fff; }
.btn--light { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .55); }
.btn--light:hover { --bg: #fff; color: var(--navy); }
.btn--text { --bg: transparent; min-height: 44px; padding-inline: .5em; color: var(--slate); }
.btn--text::before { display: none; }
.btn--text:hover { color: var(--navy); }
.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: .55em 1.25em; font-size: .975rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 28px; }

.lnk { display: inline-flex; align-items: center; gap: .45em; font: 600 1.0625rem/1.2 var(--font-d); color: var(--navy); text-decoration: none; }
.lnk .ico { color: var(--orange); transition: transform .2s var(--ease); }
.lnk:hover { color: var(--navy); }
.lnk:hover .ico { transform: translateX(4px); }

/* ---------- Top bar ---------- */
.topbar { background: var(--navy-deep); color: #C9D5E2; font-size: .9375rem; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; }
.topbar__offer { display: flex; align-items: center; gap: .55em; margin: 0; }
.topbar__offer .ico { color: var(--orange); }
.topbar__locs { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.topbar__locs a { color: #fff; text-decoration: none; }
.topbar__locs a:hover { color: var(--orange); }
.topbar__right { display: flex; align-items: center; gap: 28px; }
.topbar__phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 600 .975rem/1 var(--font-d); }
.topbar__phone .ico { color: var(--orange); }
.topbar__phone:hover { color: var(--orange); }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 90; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line-2); backdrop-filter: saturate(1.4) blur(8px); transition: box-shadow .25s var(--ease); }
.hdr.is-stuck { box-shadow: 0 10px 30px -18px rgba(14, 39, 64, .35); }
.hdr__in { display: flex; align-items: center; gap: 28px; height: var(--hdr-h); }
.hdr__logo { flex: none; display: block; }
.hdr__logo img { width: 232px; height: auto; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 500 1rem/1 var(--font-d); color: var(--navy); text-decoration: none; letter-spacing: -.005em; border-radius: 4px;
}
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--orange-d); }
.nav__link.is-active { box-shadow: inset 0 -3px 0 var(--orange); border-radius: 0; }
.ico--chev { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .2s var(--ease); }
.nav__item.is-open .ico--chev { transform: rotate(180deg); }
.drop, .mega {
  position: absolute; top: calc(100% + 18px); left: -8px; z-index: 5; visibility: hidden; opacity: 0; transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
  background: #fff; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow);
}
.nav__item.is-open > .drop, .nav__item.is-open > .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.drop::before, .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.drop { min-width: 250px; list-style: none; margin: 0; padding: 10px; }
.drop a { display: block; padding: 10px 14px; border-radius: 5px; color: var(--navy); text-decoration: none; font-weight: 600; font-size: 1.0625rem; }
.drop a:hover, .drop a[aria-current] { background: var(--mist); color: var(--navy); }
.mega { left: -180px; width: min(880px, 92vw); padding: 26px; }
.mega__in { display: grid; grid-template-columns: 1fr 1fr 250px; gap: 26px; }
.mega__title { margin: 0 0 8px 12px; font: 600 .8125rem/1 var(--font-d); color: var(--slate); letter-spacing: .08em; text-transform: uppercase; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a { display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none; }
.mega li a strong { display: block; color: var(--navy); font: 600 1.0625rem/1.25 var(--font-d); }
.mega li a span { display: block; color: var(--slate); font-size: .9375rem; line-height: 1.35; margin-top: 2px; }
.mega li a:hover, .mega li a[aria-current] { background: var(--mist); }
.mega__card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 8px; background: var(--navy); color: #fff; text-decoration: none; }
.mega__card img { border-radius: 4px; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 6px; }
.mega__card-t { font: 600 1.0625rem/1.25 var(--font-d); }
.mega__card-s { font-size: .9375rem; line-height: 1.4; color: #C9D5E2; }
.mega__card:hover { color: #fff; background: var(--navy-2); }

.hdr__actions { display: flex; align-items: center; gap: 22px; }
.hdr__phone { display: none; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font: 600 1.0625rem/1.1 var(--font-d); white-space: nowrap; }
.hdr__phone small { display: block; font: 400 .8125rem/1.2 var(--font-b); color: var(--slate); }
.hdr__phone .ico { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--tint); color: var(--orange-d); }
.hdr__phone:hover { color: var(--orange-d); }
.hdr__cta { white-space: nowrap; }

.burger { display: none; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; padding: 12px; border-radius: 6px; }
.burger span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile nav */
.mnav { position: fixed; inset: var(--mnav-top, 64px) 0 0 0; z-index: 85; background: #fff; overflow-y: auto; overscroll-behavior: contain; }
.mnav__in { padding: 12px var(--gut) 110px; }
.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__list > li { border-bottom: 1px solid var(--line-2); }
.mnav__top, .mnav summary { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; font: 600 1.1875rem/1.2 var(--font-d); color: var(--navy); text-decoration: none; cursor: pointer; list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav details[open] .ico--chev { transform: rotate(180deg); }
.mnav details ul { list-style: none; margin: -4px 0 14px; padding: 0 0 0 14px; border-left: 2px solid var(--orange); }
.mnav details a { display: block; padding: 9px 0; color: var(--ink); text-decoration: none; font-size: 1.0625rem; }
.mnav__foot { display: grid; gap: 14px; margin-top: 26px; }

/* Mobile action bar */
.mbar { display: none; }

/* ---------- Sections ---------- */
.sec { padding-block: var(--sec); }
.sec--mist { background: var(--mist); }
.sec--soft { background: var(--mist-2); }
.sec--navy { background: var(--navy); color: #D3DEEA; }
.sec--navy h2, .sec--navy h3 { color: #fff; }
.sec--tight { padding-block: clamp(48px, 6vw, 80px); }
.sec + .sec--flush { padding-top: 0; }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.sec-head--split h2 { margin: 0; }
.sec-head p { color: var(--slate); font-size: 1.1875rem; }
.sec--navy .sec-head p { color: #B9C8D8; }
.kicker { display: block; margin-bottom: 14px; font: 500 .9375rem/1.3 var(--font-d); color: var(--orange-d); letter-spacing: 0; }
.sec--navy .kicker, .hero--dark .kicker { color: #F7A06C; }
.lede { font-size: clamp(1.1875rem, 1.5vw, 1.3125rem); line-height: 1.55; color: var(--slate); }
.measure { max-width: 68ch; }
.center { text-align: center; }

/* ---------- Home hero ---------- */
.hero { position: relative; padding: clamp(40px, 5vw, 72px) 0 0; background: linear-gradient(180deg, var(--mist-2) 0%, #fff 100%); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero__copy { padding-bottom: clamp(28px, 4vw, 60px); }
.hero__place { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 500 1rem/1.3 var(--font-d); color: var(--slate); }
.hero__place .ico { color: var(--orange); }
.hero h1 { margin-bottom: 22px; }
.hero h1 .l2 { display: block; color: var(--orange-d); }
.hero .lede { max-width: 34em; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 32px 0 0; padding: 0; color: var(--ink); font-weight: 600; }
.hero__trust li { display: flex; align-items: center; gap: 9px; }
.hero__trust .ico { color: var(--orange); width: 22px; height: 22px; }
.hero__media { position: relative; align-self: stretch; min-height: 520px; }
.slant-photo { position: absolute; inset: 0 0 0 0; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.slant-photo picture, .slant-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero .slant-photo img { object-position: 62% 30%; }
.hero__chip { position: absolute; left: 4%; bottom: 52px; z-index: 2; max-width: 300px; padding: 18px 20px; background: #fff; border-radius: 8px; box-shadow: var(--shadow); }
.hero__chip strong { display: block; font: 600 1.0625rem/1.25 var(--font-d); color: var(--navy); margin-bottom: 4px; }
.hero__chip p { margin: 0; font-size: .975rem; line-height: 1.4; color: var(--slate); }
.hero__chip a { position: absolute; inset: 0; }
.hero__bar { position: relative; z-index: 3; margin-top: 0; background: var(--navy); color: #fff; }
.hero__bar-in { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: stretch; }
.hero__bar-lbl { display: flex; align-items: center; padding: 22px 30px 22px 0; font: 500 1rem/1.3 var(--font-d); color: #B9C8D8; max-width: 200px; }
.hero__bar a { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 20px 26px; border-left: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; transition: background-color .2s; }
.hero__bar a strong { font: 600 1.125rem/1.2 var(--font-d); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero__bar a span { color: #B9C8D8; font-size: .975rem; }
.hero__bar a span b { font-weight: 600; color: #fff; white-space: nowrap; }
.hero__bar a .ico { color: var(--orange); }
.hero__bar a:hover { background: var(--navy-2); }

/* ---------- Inner page hero ---------- */
.phero { position: relative; background: var(--mist); overflow: hidden; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; min-height: 460px; }
.phero__copy { padding: clamp(36px, 5vw, 72px) 0 clamp(44px, 5vw, 76px); align-self: center; }
.phero h1 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); margin-bottom: 20px; }
.phero .lede { max-width: 36em; }
.phero__media { position: relative; margin-right: calc(var(--gut) * -1); min-height: 300px; }
.phero__media .slant-photo { clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.phero--plain .phero__grid { grid-template-columns: 1fr; min-height: 0; }
.phero--plain .phero__copy { max-width: 820px; }
.crumbs { margin-bottom: 22px; font-size: .9375rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; color: var(--slate); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #9AAABB; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }

/* ---------- Split (text + media) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--rev .split__media { order: -1; }
.split--top { align-items: start; }
.split__media img { width: 100%; border-radius: var(--r); aspect-ratio: 4 / 3.1; object-fit: cover; }
.split__media--tall img { aspect-ratio: 4 / 4.6; }
.split__media figcaption { margin-top: 12px; font-size: .9375rem; color: var(--slate); }
.split h2 { margin-bottom: .55em; }
.split .lede { margin-bottom: 1.1em; }
.framed { position: relative; }
.framed::after { content: ""; position: absolute; z-index: -1; right: -18px; bottom: -18px; width: 46%; height: 42%; background: var(--orange); clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
.framed--l::after { right: auto; left: -18px; }
.framed { isolation: isolate; }

/* Ruled split (adapted from the reference's center rule) */
.ruled { position: relative; }
@media (min-width: 981px) {
  .ruled::before { content: ""; position: absolute; top: calc(var(--sec) * -1); bottom: calc(var(--sec) * -1); left: 50%; width: 1px; background: var(--line); }
}

/* ---------- Lists ---------- */
.checks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 36px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9521A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.sec--navy .checks li::before { background-color: rgba(233, 110, 38, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7A06C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.checks strong { color: var(--navy); }
.sec--navy .checks strong { color: #fff; }

/* ---------- Treatment cards ---------- */
.tcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.tcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .25s var(--ease); }
.tcard:hover { border-color: var(--line); box-shadow: var(--shadow); }
.tcard__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tcard__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
.tcard h3 { margin-bottom: .45em; }
.tcard h3 a { color: inherit; text-decoration: none; }
.tcard h3 a::after { content: ""; position: absolute; inset: 0; }
.tcard p { color: var(--slate); }
.tcard .lnk { margin-top: auto; padding-top: 14px; }
.tcard__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 14px; padding: 0; list-style: none; font-size: .9375rem; color: var(--ink); }
.tcard__meta li { display: flex; align-items: center; gap: 6px; }
.tcard__meta .ico { color: var(--orange); width: 18px; height: 18px; }

/* ---------- Function bars (compare) ---------- */
.fbars { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.fbar { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 8px 26px; align-items: center; }
.fbar__name { font: 600 1.0625rem/1.25 var(--font-d); color: var(--navy); }
.fbar__name small { display: block; font: 400 .9375rem/1.35 var(--font-b); color: var(--slate); margin-top: 3px; }
.fbar__track { position: relative; height: 46px; background: var(--mist); border-radius: 4px; overflow: hidden; }
.fbar__fill { position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--navy-2); display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; color: #fff; font: 600 1rem/1 var(--font-d); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.fbar--best .fbar__fill { background: var(--orange); color: var(--navy); }
.js .fbars .fbar__fill { width: 0; transition: width 1.1s var(--ease); }
.js .fbars.is-in .fbar__fill { width: var(--v); }
.fbars-note { margin-top: 18px; font-size: .9375rem; color: var(--slate); }
.sec--navy .fbar__name { color: #fff; }
.sec--navy .fbar__name small { color: #B9C8D8; }
.sec--navy .fbar__track { background: rgba(255, 255, 255, .08); }
.sec--navy .fbar__fill { background: #3D6E9C; }
.sec--navy .fbar--best .fbar__fill { background: var(--orange); }

/* ---------- Compare table ---------- */
.ctable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.ctable { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 1.0625rem; }
.ctable th, .ctable td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.ctable thead th { font: 600 1.0625rem/1.25 var(--font-d); color: var(--navy); background: var(--mist-2); border-bottom: 1px solid var(--line); }
.ctable thead th.is-best { background: var(--navy); color: #fff; }
.ctable tbody th { font-weight: 600; color: var(--navy); width: 22%; }
.ctable td.is-best { background: #FFF8F3; }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }
.yes, .no, .mid { display: inline-flex; align-items: center; gap: 6px; }
.yes .ico { color: #2C8A5B; } .no .ico { color: #B4443A; } .mid .ico { color: #B07A15; }

/* ---------- Steps (real sequences only) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: st; }
.step { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 26px; padding-bottom: 44px; counter-increment: st; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(st); display: grid; place-items: center; width: 64px; height: 52px; margin-left: 10px; color: var(--navy);
  font: 650 1.375rem/1 var(--font-d); background: var(--orange); border-radius: 4px; transform: skewX(-16deg);
}
.step::after { content: ""; position: absolute; left: 42px; top: 66px; bottom: 10px; width: 2px; background: var(--line); }
.step:last-child::after { display: none; }
.step__body { padding-top: 10px; }
.step h3 { margin-bottom: .4em; }
.step__when { display: inline-block; margin-bottom: 10px; font: 500 .9375rem/1.2 var(--font-d); color: var(--orange-d); }
.step p, .step li { color: var(--slate); }
.step ul { margin-top: .4em; }
.sec--navy .step::before { color: var(--navy); }
.sec--navy .step::after { background: rgba(255, 255, 255, .16); }
.sec--navy .step p, .sec--navy .step li { color: #B9C8D8; }
.steps--row { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.steps--row .step { grid-template-columns: 1fr; gap: 18px; padding: 0; }
.steps--row .step::before { margin-left: 6px; }
.steps--row .step::after { left: 92px; right: -20px; top: 26px; bottom: auto; width: auto; height: 2px; }
.steps--row .step__body { padding-top: 0; }

/* ---------- Feature (icon) list ---------- */
.feats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); list-style: none; margin: 0; padding: 0; }
.feat .ico { width: 44px; height: 44px; padding: 10px; margin-bottom: 18px; border-radius: 6px; background: var(--tint); color: var(--orange-d); stroke-width: 1.7; }
.sec--navy .feat .ico { background: rgba(233, 110, 38, .16); color: #F7A06C; }
.feat h3 { margin-bottom: .4em; }
.feat p { color: var(--slate); margin: 0; }
.sec--navy .feat p { color: #B9C8D8; }

/* ---------- Doctor ---------- */
.doc { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.doc__photo { position: sticky; top: calc(var(--hdr-h) + 24px); }
.doc__photo img { width: 100%; border-radius: var(--r); aspect-ratio: 4 / 4.8; object-fit: cover; object-position: 50% 20%; }
.doc__name { font-size: clamp(2rem, 3vw, 2.6rem); margin-bottom: 4px; }
.doc__role { font: 500 1.0625rem/1.4 var(--font-d); color: var(--orange-d); margin-bottom: 24px; }
.creds { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.creds li { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.4; color: var(--slate); }
.creds li strong { display: block; color: var(--navy); font: 600 1.0625rem/1.3 var(--font-d); margin-bottom: 2px; }

/* ---------- Stories ---------- */
.stories { position: relative; }
.stories__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 28px) / 3); gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.stories__track::-webkit-scrollbar { display: none; }
.story { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: var(--r); overflow: hidden; }
.story__img img { width: 100%; aspect-ratio: 1 / .82; object-fit: cover; object-position: 50% 30%; }
.story__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.story blockquote { margin: 0 0 18px; font: 400 1.1875rem/1.5 var(--font-b); color: var(--ink); }
.story blockquote::before { content: "“"; display: block; height: 30px; font: 600 3.4rem/1 var(--font-d); color: var(--orange); }
.story footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.story footer strong { font: 600 1.0625rem/1.25 var(--font-d); color: var(--navy); }
.story footer span { font-size: .9375rem; color: var(--slate); }
.stories__ctrl { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.stories__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .4); background: none; color: #fff; cursor: pointer; transition: background-color .2s, border-color .2s; }
.stories__btn:hover { background: #fff; color: var(--navy); border-color: #fff; }
.stories__btn:disabled { opacity: .35; cursor: default; background: none; color: #fff; }
.stories__count { font: 500 1rem/1 var(--font-d); color: #B9C8D8; min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
.sec:not(.sec--navy) .stories__btn { border-color: var(--line); color: var(--navy); }
.sec:not(.sec--navy) .stories__btn:hover { background: var(--navy); color: #fff; }
.sec:not(.sec--navy) .stories__count { color: var(--slate); }
.story--card { border: 1px solid var(--line-2); }
.stories-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

/* ---------- Before / after ---------- */
.ba { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 3 / 2; background: var(--mist); user-select: none; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba picture { position: absolute; inset: 0; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; box-shadow: 0 0 0 1px rgba(14, 39, 64, .12); }
.ba__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2740' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__range:focus-visible + .ba__handle::after { outline: 3px solid #fff; outline-offset: 3px; }
.ba__tag { position: absolute; top: 14px; padding: 5px 10px; border-radius: 3px; background: rgba(9, 27, 45, .78); color: #fff; font: 500 .875rem/1 var(--font-d); pointer-events: none; }
.ba__tag--b { left: 14px; } .ba__tag--a { right: 14px; }
.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
.ba-case h3 { margin: 18px 0 4px; font-size: 1.25rem; }
.ba-case p { margin: 0; color: var(--slate); font-size: 1rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font: 600 clamp(1.0625rem, 1.3vw, 1.1875rem)/1.35 var(--font-d); color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2740' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s var(--ease), background-color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--tint); }
.faq summary:hover { color: var(--orange-d); }
.faq__a { padding: 0 60px 24px 0; color: var(--slate); }
.faq__a ul { margin-top: .5em; }
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-layout .sec-head, .sticky-lg { position: sticky; top: calc(var(--hdr-h) + 32px); }

/* ---------- CTA band ---------- */
.band { position: relative; overflow: hidden; background: var(--navy); color: #C9D5E2; isolation: isolate; }
.band::before { content: ""; position: absolute; z-index: -1; right: -6%; top: -40%; width: 46%; height: 180%; background: var(--navy-2); transform: skewX(-24deg); }
.band::after { content: ""; position: absolute; z-index: -1; right: 30%; bottom: -1px; width: 140px; height: 18px; background: var(--orange); transform: skewX(-24deg); }
.band__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 56px; align-items: center; padding-block: clamp(48px, 6vw, 76px); }
.band h2 { color: #fff; margin-bottom: .3em; font-size: clamp(1.75rem, 2.7vw, 2.4rem); }
.band p { margin: 0; font-size: 1.1875rem; max-width: 46em; }
.band .btn-row { margin-top: 0; }

/* ---------- Offer strip ---------- */
.offer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: 30px clamp(24px, 3vw, 40px); background: var(--tint); border-radius: var(--r); border-left: 6px solid var(--orange); }
.offer__big { font: 650 clamp(2.4rem, 4vw, 3.2rem)/1 var(--font-d); color: var(--navy); letter-spacing: -.03em; }
.offer h3 { margin-bottom: .25em; }
.offer p { margin: 0; color: var(--slate); }

/* ---------- Locations ---------- */
.locs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.locc { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.locc__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.locc__body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 24px 26px 28px; }
.locc h3 { margin: 0; }
.locc h3 a { color: inherit; text-decoration: none; }
.locc h3 a:hover { color: var(--orange-d); }
.locc__row { display: flex; gap: 12px; align-items: flex-start; margin: 0; color: var(--ink); line-height: 1.45; }
.locc__row .ico { margin-top: 3px; color: var(--orange); }
.locc__row a { color: var(--navy); font-weight: 600; text-decoration: none; }
.locc__row a:hover { color: var(--orange-d); }
.locc__acts { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: auto; padding-top: 8px; }
.locc__tag { align-self: flex-start; padding: 4px 10px; border-radius: 3px; background: var(--navy); color: #fff; font: 500 .8125rem/1.2 var(--font-d); }
.hours { width: 100%; border-collapse: collapse; font-size: 1rem; }
.hours th, .hours td { padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line-2); font-weight: 400; }
.hours th { color: var(--navy); font-weight: 600; width: 45%; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--orange-d); font-weight: 650; }
.map { position: relative; border-radius: var(--r); overflow: hidden; background: var(--mist); aspect-ratio: 4 / 3; border: 1px solid var(--line-2); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; }

/* ---------- Forms ---------- */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld--full { grid-column: 1 / -1; }
.fld > span { font: 500 .9375rem/1.2 var(--font-d); color: var(--navy); }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 54px; padding: 12px 15px; border: 1.5px solid #C5D1DC; border-radius: 5px; background: #fff; color: var(--ink);
  font-size: 1.0625rem; transition: border-color .15s, box-shadow .15s;
}
.fld textarea { min-height: 120px; resize: vertical; }
.fld select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2740' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; padding-right: 44px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px rgba(26, 62, 98, .14); }
.fld input[aria-invalid="true"], .fld select[aria-invalid="true"] { border-color: #B4443A; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: .9375rem; line-height: 1.45; color: var(--slate); cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--navy); }
.form__error { margin: 16px 0 0; padding: 12px 14px; border-radius: 5px; background: #FBEDEC; color: #8E2D25; font-size: 1rem; }
.form__done { text-align: center; padding: 20px 0; }
.form__done .ico { margin: 0 auto 16px; color: #2C8A5B; }
.form-card { background: #fff; border-radius: 8px; padding: clamp(24px, 3.4vw, 44px); box-shadow: var(--shadow); border: 1px solid var(--line-2); }
.form-card h2, .form-card h3 { margin-bottom: .3em; }
.form-card > p { color: var(--slate); }
.form-card .btn { margin-top: 22px; }

/* Radio "option cards" */
.opts { display: grid; gap: 10px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border: 1.5px solid #C5D1DC; border-radius: 6px; background: #fff; font-size: 1.0625rem; line-height: 1.3; transition: border-color .15s, background-color .15s; }
.opt span::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #9AAABB; background: #fff; transition: border-color .15s, box-shadow .15s; }
.opt input[type="checkbox"] + span::before { border-radius: 4px; }
.opt:hover span { border-color: var(--navy-2); }
.opt input:checked + span { border-color: var(--navy); background: #F3F6FA; }
.opt input:checked + span::before { border-color: var(--navy); box-shadow: inset 0 0 0 5px var(--orange); }
.opt input[type="checkbox"]:checked + span::before { background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2740' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: none; }
.opt input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- Quiz ---------- */
.quiz { position: relative; background: var(--navy); color: #C9D5E2; padding-block: var(--sec); overflow: hidden; isolation: isolate; }
.quiz::before { content: ""; position: absolute; z-index: -1; left: -14%; bottom: -10%; width: 44%; height: 52%; background: var(--navy-2); transform: skewX(-24deg); opacity: .55; }
.quiz__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.quiz__intro h2 { color: #fff; }
.quiz__intro > p { font-size: 1.1875rem; color: #C9D5E2; }
.quiz__perks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.quiz__perks li { display: flex; gap: 12px; align-items: center; color: #fff; font-weight: 600; }
.quiz__perks .ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--orange); color: var(--navy); stroke-width: 3; }
.quiz__fig { margin: 34px 0 0; max-width: 360px; }
.quiz__fig img { border-radius: var(--r); aspect-ratio: 1; object-fit: cover; }
.quiz__card { position: relative; background: #fff; color: var(--ink); border-radius: 10px; padding: clamp(24px, 3.4vw, 44px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.quiz__progress { height: 6px; border-radius: 3px; background: var(--mist); overflow: hidden; margin-bottom: 14px; }
.quiz__progress span { display: block; height: 100%; width: var(--p, 14%); background: var(--orange); transition: width .35s var(--ease); }
.quiz__count { margin: 0 0 18px; font: 500 .9375rem/1 var(--font-d); color: var(--slate); }
.quiz__step { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.quiz__step legend { padding: 0; margin-bottom: 8px; font: 600 clamp(1.3rem, 1.8vw, 1.55rem)/1.25 var(--font-d); color: var(--navy); letter-spacing: -.01em; }
.quiz__help { margin: 0 0 18px; color: var(--slate); font-size: 1rem; }
.quiz__step > .opts { margin-top: 16px; }
.quiz__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.quiz__nav [data-quiz-next], .quiz__nav [data-quiz-submit] { margin-left: auto; }
.js .quiz__step { display: none; }
.js .quiz__step.is-current { display: block; animation: stepIn .35s var(--ease); }
.js .quiz [data-quiz-submit] { display: none; }
.js .quiz.is-last [data-quiz-submit] { display: inline-flex; }
.js .quiz.is-last [data-quiz-next] { display: none; }
html:not(.js) .quiz__progress, html:not(.js) .quiz__count, html:not(.js) [data-quiz-next], html:not(.js) [data-quiz-prev] { display: none; }
.quiz__done { text-align: center; padding: 30px 6px; }
.quiz__done .ico { margin: 0 auto 18px; color: #2C8A5B; }
.quiz__done h3 { font-size: 1.6rem; }
.quiz__done p { color: var(--slate); }
.quiz--inline { background: none; color: var(--ink); padding: 0; }
.quiz--inline::before { display: none; }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---------- Media band (photo + overlay text) ---------- */
.mband { position: relative; min-height: 520px; display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; }
.mband__img, .mband__img picture, .mband__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mband::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9, 27, 45, .86) 0%, rgba(9, 27, 45, .55) 45%, rgba(9, 27, 45, 0) 75%); }
.mband__in { padding-block: clamp(56px, 7vw, 96px); max-width: 640px; }
.mband h2 { color: #fff; }
.mband p { font-size: 1.1875rem; color: #DCE5EE; }

/* ---------- Prose / legal ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose p, .prose li { color: #34475A; }
.prose li + li { margin-top: .35em; }

/* ---------- Pricing tiles ---------- */
.ptiles { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.ptile { padding: 28px 26px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.ptile:last-child { border-right: 0; }
.ptile h3 { font-size: 1.1875rem; margin: 0; }
.ptile__range { font: 650 1.6rem/1.15 var(--font-d); color: var(--navy); letter-spacing: -.02em; }
.ptile__unit { font-size: .9375rem; color: var(--slate); }
.ptile p { font-size: 1rem; color: var(--slate); margin: 6px 0 0; }
.ptile--best { background: var(--navy); color: #C9D5E2; }
.ptile--best h3, .ptile--best .ptile__range { color: #fff; }
.ptile--best .ptile__unit, .ptile--best p { color: #B9C8D8; }

/* ---------- Misc ---------- */
.note { padding: 18px 22px; border-radius: var(--r); background: var(--mist); color: var(--slate); font-size: 1rem; }
.sec--mist .note { background: #fff; }
.fineprint { font-size: .9375rem; color: var(--slate); }
.h3-size { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.contact-rows > * + * { margin-top: 12px; }
.split--main { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.pill-list li { padding: 7px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 1rem; color: var(--navy); }
.sec--mist .pill-list li { border-color: transparent; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.panel { padding: clamp(24px, 3vw, 36px); border-radius: var(--r); background: #fff; border: 1px solid var(--line-2); }
.sec--mist .panel { border-color: transparent; }
.panel h3 { margin-bottom: .45em; }
.panel h3 .ico { display: inline-block; vertical-align: -3px; margin-right: 6px; width: 24px; height: 24px; color: var(--orange-d); }
.panel p { color: var(--slate); }
.mt-0 { margin-top: 0 !important; } .mt-l { margin-top: clamp(40px, 5vw, 64px); } .mb-0 { margin-bottom: 0 !important; }
.e404 { padding-block: clamp(80px, 12vw, 160px); }

/* ---------- Footer ---------- */
.ftr { position: relative; background: var(--navy-deep); color: #A9B9CA; font-size: 1rem; overflow: hidden; isolation: isolate; }
.ftr__mark { position: absolute; z-index: -1; right: -60px; top: 40px; width: 520px; height: 400px; background: url("/assets/img/brand/mark-outline.svg") center / contain no-repeat; opacity: .07; }
.ftr a { color: #DCE5EE; text-decoration: none; }
.ftr a:hover { color: var(--orange); }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; padding: clamp(56px, 7vw, 88px) 0 48px; }
.ftr__logo img { width: 230px; }
.ftr__tag { margin: 10px 0 18px; font: 500 .8125rem/1 var(--font-d); letter-spacing: .26em; text-transform: uppercase; color: #8FA3B8; }
.ftr__about { max-width: 34em; }
.ftr__contact { display: grid; gap: 10px; margin-top: 22px; }
.ftr__contact a { display: inline-flex; align-items: center; gap: 10px; }
.ftr__contact .ico { color: var(--orange); }
.ftr__phone { font: 600 1.25rem/1.2 var(--font-d); color: #fff !important; }
.ftr__social { display: flex; gap: 10px; list-style: none; padding: 0; margin: 18px 0 0; }
.ftr__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ftr__h { margin: 0 0 16px; font: 600 1.0625rem/1.2 var(--font-d); color: #fff; }
.ftr__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr__locs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 36px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.ftr__loc p, .ftr__loc address { margin: 0 0 6px; }
.ftr__loc-n { font: 600 1.125rem/1.25 var(--font-d); margin-bottom: 10px !important; }
.ftr__loc-n a { color: #fff; }
.ftr__hours { font-size: .9375rem; color: #8FA3B8; }
.ftr__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 26px 0 34px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .9375rem; }
.ftr__bottom p { margin: 0; }
.ftr__bottom ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.ftr__legal { flex-basis: 100%; font-size: .875rem; color: #7E93A8; max-width: 90ch; }

/* ---------- Reveal (single, subtle) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) {
  .hdr__phone small { display: none; }
  .hdr__logo img { width: 200px; }
  .nav__link { padding: 0 9px; font-size: .975rem; }
  .hdr__in { gap: 18px; }
}
@media (max-width: 1120px) {
  :root { --hdr-h: 72px; }
  .nav, .hdr__phone span { display: none; }
  .hdr__phone { display: flex; }
  .hdr__phone .ico { width: 44px; height: 44px; padding: 11px; }
  .hdr__actions { margin-left: auto; gap: 12px; }
  .burger { display: block; }
  .topbar__locs { display: none; }
  .topbar__right { gap: 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
  .tcards, .locs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stories__track { grid-auto-columns: calc((100% - 28px) / 2); }
  .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptile:nth-child(2n) { border-right: 0; }
  .ptile:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 980px) {
  .hero__grid, .phero__grid, .split, .doc, .quiz__in, .faq-layout, .sec-head--split, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .hero__media { min-height: 0; aspect-ratio: 4 / 3.2; margin-inline: calc(var(--gut) * -1); }
  .hero .slant-photo { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .hero__chip { left: var(--gut); bottom: 22px; max-width: 280px; }
  .hero__bar-in { grid-template-columns: minmax(0, 1fr); }
  .hero__bar-lbl { padding: 20px 0 6px; max-width: none; }
  .hero__bar a { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding: 16px 0; }
  .hero__bar a strong { justify-content: space-between; }
  .phero__media { margin-inline: calc(var(--gut) * -1); aspect-ratio: 16 / 9; min-height: 0; }
  .phero__media .slant-photo { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .phero__copy { padding-bottom: 8px; }
  .split--rev .split__media { order: 0; }
  .split__media { max-width: 680px; }
  .doc__photo { position: static; max-width: 520px; }
  .faq-layout .sec-head, .sticky-lg { position: static; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps--row .step { grid-template-columns: 92px minmax(0, 1fr); gap: 26px; padding-bottom: 36px; }
  .steps--row .step::after { left: 42px; top: 66px; bottom: 10px; right: auto; width: 2px; height: auto; }
  .steps--row .step:last-child::after { display: none; }
  .steps--row .step__body { padding-top: 10px; }
  .band__in, .offer { grid-template-columns: minmax(0, 1fr); }
  .ftr__top { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .framed::after { right: -10px; bottom: -10px; }
  .quiz__fig { display: none; }
  .ruled::before { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 1.0625rem; padding-bottom: 68px; }
  .topbar { display: none; }
  :root { --hdr-h: 64px; }
  .hdr__logo img { width: 168px; }
  .hdr__cta { display: none; }
  .tcards, .locs, .feats, .grid-3, .stories-grid, .ba-grid, .fgrid, .ftr__locs, .checks--2, .creds { grid-template-columns: minmax(0, 1fr); }
  .stories__track { grid-auto-columns: 86%; gap: 16px; }
  .fbar { grid-template-columns: minmax(0, 1fr); }
  .ptiles { grid-template-columns: minmax(0, 1fr); }
  .ptile { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .ptile:last-child { border-bottom: 0; }
  .ftr__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__nav > div:last-child { grid-column: 1 / -1; }
  .faq__a { padding-right: 0; }
  .step, .steps--row .step { grid-template-columns: 70px minmax(0, 1fr); gap: 16px; }
  .step::before { width: 52px; height: 44px; margin-left: 6px; font-size: 1.2rem; }
  .step::after, .steps--row .step::after { left: 31px; top: 56px; }
  .hero__trust { gap: 10px 20px; }
  .btn-row .btn { flex: 1 1 100%; }
  .band::before { width: 80%; right: -50%; }
  .mbar { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.35fr 1.1fr; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(14, 39, 64, .25); padding-bottom: env(safe-area-inset-bottom); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 60px; font: 600 .9375rem/1.1 var(--font-d); color: var(--navy); text-decoration: none; border-right: 1px solid var(--line-2); }
  .mbar a .ico { color: var(--orange-d); }
  .mbar .mbar__cta { background: var(--orange); color: var(--navy); border: 0; }
  .ba-case h3 { font-size: 1.15rem; }
}
@media (max-width: 420px) {
  .hero__chip { display: none; }
  .mbar a { font-size: .875rem; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .fbars .fbar__fill { width: var(--v); }
}

@media print {
  .topbar, .hdr, .mbar, .quiz, .band, .ftr__mark { display: none !important; }
  body { padding: 0; }
}