/* Mosal Dental Care — build of client-approved mockups
   (refs/header.png + refs/g1.png). Playfair Display headlines,
   Poppins body, Style Script accents. Navy #0D2C4F / blue #1E6FE5. */

:root {
  --navy:       #0D2C4F;
  --navy-deep:  #0A1F3D;
  --navy-card:  #0E2748;
  --blue:       #1E6FE5;
  --blue-soft:  #E8F1FD;
  --blue-line:  #D9E7FB;
  --ink:        #21323F;
  --gray:       #5A6473;
  --bg:         #F7F9FC;
  --card:       #FFFFFF;

  --serif:  "Playfair Display", Georgia, serif;
  --sans:   "Poppins", system-ui, sans-serif;
  --script: "Style Script", cursive;

  --shadow-soft: 0 10px 40px rgba(13, 44, 79, 0.10);
  --shadow-card: 0 18px 60px rgba(13, 44, 79, 0.16);
  --r-blob: 46% 54% 52% 48% / 44% 46% 54% 56%;
}

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

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray);
  background:
    radial-gradient(80rem 40rem at 110% -10%, #EDF3FB 0%, transparent 60%),
    radial-gradient(60rem 30rem at -20% 20%, #F0F5FC 0%, transparent 55%),
    var(--bg);
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }

.wrap { max-width: calc(90rem + 2 * clamp(1.25rem, 4vw, 3rem)); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }

h1, h2, h3 { font-family: var(--serif); color: var(--navy); font-weight: 600; }

.icon { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}
.icon-badge .icon { width: 1.6rem; height: 1.6rem; }

/* ---------- nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.1rem;
}

.nav__logo img {
  height: 4.2rem;
  width: auto;
  /* Their logo asset is black ink on transparent; the mockup shows it in brand
     blue. Solved numerically (scripts/m-filter-solve.mjs) so pure black lands
     on #1E6FE5. The previous chain rendered #3068E8 -- hue 222 instead of 216,
     which read as purple. The leading brightness(0) saturate(100%) normalises
     the source to pure black first, so the result cannot drift if the asset is
     ever re-exported. */
  filter: brightness(0) saturate(100%) invert(0.290) sepia(1) saturate(22.06) hue-rotate(206.5deg) brightness(0.970) contrast(0.850);
}

.nav__links { display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); flex-wrap: wrap; }
.nav__links a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 0.4rem;
}
.nav__links a:hover { color: var(--blue); }
.nav__links a.active { color: var(--navy); border-bottom: 2px solid var(--navy); }

.nav__call {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--card);
  border-radius: 1.1rem;
  padding: 0.7rem 1.4rem 0.7rem 0.8rem;
  box-shadow: var(--shadow-soft);
}
.nav__call .disc {
  display: flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--blue); color: #fff;
}
.nav__call small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blue);
  text-transform: uppercase;
  line-height: 1.3;
}
.nav__call strong { font-size: 1.25rem; font-weight: 700; color: var(--navy); letter-spacing: 0.01em; }

/* ---------- hero ---------- */

.hero { position: relative; padding-top: clamp(1.5rem, 4vw, 3.5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.hero__grid > div:first-child { padding-block: clamp(1rem, 3vw, 3.5rem) 6.5rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before { content: ""; width: 2.2rem; height: 2px; background: var(--blue); }

.hero h1 {
  margin-top: 1.2rem;
  font-size: clamp(2.3rem, 4.3vw, 3.9rem);
  line-height: 1.16;
  letter-spacing: 0.005em;
}
.hero h1 .blue { color: var(--blue); }

.hero__deck { margin-top: 1.4rem; max-width: 40ch; font-size: 1.05rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.2rem;
  padding: 1.05rem 2rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2B7BF3, var(--blue));
  color: #fff;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(30, 111, 229, 0.35);
}
.btn:hover { filter: brightness(1.06); }
.btn .icon { width: 1.1rem; height: 1.1rem; }

/* hero photo + badge */

.hero__media { position: relative; }
.hero__media > img {
  width: 100%;
  height: clamp(22rem, 36vw, 31rem);
  object-fit: cover;
  object-position: center 30%;
  border-radius: 13rem 2rem 1.5rem 4rem;
}

.hero__badge {
  position: absolute;
  left: -3.2rem;
  bottom: 6.5rem;
  width: 11.5rem;
  height: 11.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #14355E, var(--navy-deep));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  border: 4px solid rgba(255, 255, 255, 0.92);
  outline: 1px solid var(--blue-line);
  box-shadow: var(--shadow-card);
  padding: 1rem;
}
.hero__badge .icon { color: #9CC1F5; width: 1.3rem; height: 1.3rem; }
.hero__badge small {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9CC1F5;
}
.hero__badge strong {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
}

/* ---------- request band ---------- */

.request {
  position: relative;
  z-index: 2;
  margin-top: -3.2rem;
  background: linear-gradient(120deg, #0A1F3D 0%, #0E2748 55%, #123058 100%);
  border-radius: 1.6rem;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) 3.2fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  box-shadow: var(--shadow-card);
}

.request__intro { color: #B9C8DE; position: relative; }
.request__intro::after {
  content: "";
  position: absolute;
  right: calc(-0.5 * clamp(1.4rem, 3vw, 2.6rem));
  top: 8%;
  height: 84%;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.request__intro .disc {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #8FB8F2;
  margin-bottom: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
/* index.html uses <h2> here while the generated pages use <h3>; without both
   the homepage heading fell through to the global navy and rendered dark
   navy on the dark navy band at 1.06:1 -- effectively invisible. */
.request__intro h2,
.request__intro h3 { color: #fff; font-size: 1.55rem; font-weight: 500; line-height: 1.25; }
.request__intro p { margin-top: 0.6rem; font-size: 0.8rem; line-height: 1.6; }

.request__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.3rem;
}

.field {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid #33507E;
  border-radius: 0.8rem;
  padding: 0.85rem 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  color: #8FB8F2;
}
.field input {
  border: 0;
  background: transparent;
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: #fff;
  outline: none;
}
.field input::placeholder { color: #E6EEF9; }
.field .req { font-size: 0.8rem; color: #4D8DF0; white-space: nowrap; }

.request .submit {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 2.1rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.request .submit:hover { background: var(--blue-soft); }

/* ---------- G1 welcome section ---------- */

.g1 { padding-block: clamp(3rem, 7vw, 6rem); }

.g1__grid {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.g1__media { position: relative; padding: 1.5rem 0 3.5rem 1.5rem; }
.g1__media::before {  /* dot grid */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 9rem; height: 12rem;
  background-image: radial-gradient(var(--blue) 1.5px, transparent 1.6px);
  background-size: 1.6rem 1.6rem;
  opacity: 0.35;
}
.g1__media img {
  position: relative;
  width: 100%;
  height: clamp(26rem, 44vw, 38rem);
  object-fit: cover;
  object-position: center top;
  background:
    radial-gradient(120% 90% at 70% 15%, #FDFEFF 0%, #E9F0F8 48%, #D7E3F0 100%);
  border-radius: 15rem 15rem 2rem 6rem;
}

.g1__card {
  position: absolute;
  left: -1rem;
  bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: linear-gradient(120deg, #0A1F3D, #123058);
  border-radius: 999px;
  padding: 0.7rem 1.7rem 0.7rem 0.8rem;
  box-shadow: var(--shadow-card);
}
.g1__card .disc {
  display: flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #8FB8F2;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.g1__card strong { display: block; color: #fff; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.03em; }
.g1__card small { display: block; color: #4D8DF0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.g1__kicker { display: flex; align-items: center; gap: 0.9rem; }
.g1__kicker .t {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--blue);
}
.g1__kicker::after { content: ""; width: 2.4rem; height: 2px; background: var(--blue); }

.g1 h2 {
  margin-top: 1rem;
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  line-height: 1.16;
}
.g1 h2 .blue { color: var(--blue); }

.g1__script {
  font-family: var(--script);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--blue);
  margin-top: 0.4rem;
}

.g1__body p { margin-top: 1.3rem; font-size: 0.95rem; }
.g1__body strong { color: var(--ink); font-weight: 600; }

/* ---------- homepage service cards ---------- */

.svc4 {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.svc4__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--card);
  border: 1px solid #E7EDF5;
  border-radius: 1.2rem;
  box-shadow: var(--shadow-soft);
  padding: 1.7rem 1.5rem 1.5rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.svc4__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #0A1F3D, #123058);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.svc4__card > * { position: relative; }
.svc4__card h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--navy); transition: color 0.3s ease; }
.svc4__card p { font-size: 0.84rem; line-height: 1.6; transition: color 0.3s ease; }
.svc4__card .icon-badge { transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.svc4__card .more {
  margin-top: auto;
  padding-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  transition: color 0.3s ease, gap 0.3s ease;
}
.svc4__card .more .icon { width: 1rem; height: 1rem; }
.svc4__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}
.svc4__card:hover::before { opacity: 1; }
.svc4__card:hover h3 { color: #fff; }
.svc4__card:hover p { color: #B9C8DE; }
.svc4__card:hover .icon-badge { background: var(--blue); color: #fff; transform: scale(1.08); }
.svc4__card:hover .more { color: #7FB0F5; gap: 0.7rem; }

/* ---------- process (scroll-scrubbed video) ---------- */

.process {
  position: relative;
  height: 320vh;
  background: #071730;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.process__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.process__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.process__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(7, 23, 48, 0.94) 0%,
    rgba(7, 23, 48, 0.72) 38%,
    rgba(7, 23, 48, 0.25) 66%,
    rgba(7, 23, 48, 0.45) 100%);
}
.process__content {
  position: absolute;
  inset: 0;
  display: flex;
  /* NOT align-items:center — when the copy is taller than the pinned 100vh
     box, centering overflows both ends and overflow:hidden eats the heading.
     flex-start + auto block margins centres when there IS free space and
     falls back to top-aligned when there isn't, so nothing clips off the top. */
  align-items: flex-start;
  padding-block: clamp(1rem, 3vh, 2.5rem);
}
.process__copy { max-width: 30rem; color: #B9C8DE; margin-block: auto; }

.eyebrow--light { color: #7FB0F5; }
.eyebrow--light::after, .eyebrow--light::before { background: #7FB0F5; }

/* Every vertical measure below is min(width-based, height-based) so the block
   scales down continuously on short viewports instead of jumping at one
   breakpoint. Safari's taller browser chrome makes this bite first there. */
.process__copy h2 {
  font-family: var(--serif);
  color: #fff;
  font-weight: 550;
  font-size: clamp(1.6rem, min(3.6vw, 5vh), 3.2rem);
  line-height: 1.15;
  margin-top: clamp(0.45rem, 1.2vh, 1rem);
}
.process__copy h2 .lt { color: #4D8DF0; }
.process__deck {
  margin-top: clamp(0.45rem, 1.2vh, 1rem);
  font-size: clamp(0.8rem, 1.7vh, 0.95rem);
  max-width: 40ch;
}

.process__steps {
  list-style: none;
  margin-top: clamp(0.8rem, 2.4vh, 2rem);
  position: relative;
  --ring: clamp(2.4rem, 4.4vh, 3.2rem);
}
.process__steps::before {
  content: "";
  position: absolute;
  left: calc(var(--ring) / 2);
  top: 1.6rem;
  bottom: 1.6rem;
  width: 1px;
  background: rgba(77, 141, 240, 0.35);
}
.process__steps li {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding-block: clamp(0.35rem, 1.1vh, 0.9rem);
  position: relative;
}
.process__steps .ring {
  display: flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--ring); height: var(--ring);
  border-radius: 50%;
  border: 1.5px solid rgba(77, 141, 240, 0.6);
  background: rgba(7, 23, 48, 0.75);
  color: #4D8DF0;
  position: relative;
  z-index: 1;
}
.process__steps .ring .icon { width: clamp(1.05rem, 1.9vh, 1.4rem); height: clamp(1.05rem, 1.9vh, 1.4rem); }
.process__steps .n { color: #4D8DF0; font-weight: 700; font-size: 0.9rem; }
.process__steps h3 { font-family: var(--serif); color: #fff; font-size: clamp(1.02rem, 2.2vh, 1.25rem); font-weight: 550; margin-top: 0.1rem; }
.process__steps p { font-size: clamp(0.76rem, 1.5vh, 0.85rem); line-height: 1.6; margin-top: clamp(0.15rem, 0.6vh, 0.35rem); max-width: 34ch; }

.process__badge {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: clamp(0.7rem, 1.8vh, 1.4rem);
  padding: clamp(0.7rem, 1.6vh, 1.1rem) 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background: rgba(7, 23, 48, 0.55);
  backdrop-filter: blur(4px);
}
.process__badge > .icon { width: 2rem; height: 2rem; color: #4D8DF0; flex: none; }
.process__badge strong { display: block; font-family: var(--serif); color: #fff; font-size: 1.05rem; }
.process__badge small { display: block; font-size: 0.8rem; margin-top: 0.15rem; }

/* staged reveal driven by scroll progress (js adds .on) */
.js .pstep { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.22,.7,.3,1); }
.js .pstep.on { opacity: 1; transform: none; }

.process__hint {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  transition: opacity 0.4s ease;
}
.process__hint .icon { width: 1.1rem; height: 1.1rem; }
.process__hint .icon:last-child { animation: hintbob 1.6s ease-in-out infinite; }
@keyframes hintbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.process__hint.hide { opacity: 0; }

@media (max-width: 860px) {
  .process { height: 260vh; }
  .process__copy { max-width: 100%; padding-block: 4.5rem; }
  .process__shade { background: linear-gradient(180deg, rgba(7,23,48,.92) 0%, rgba(7,23,48,.72) 60%, rgba(7,23,48,.5) 100%); }
  .process__content { align-items: flex-start; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pstep { opacity: 1; transform: none; transition: none; }
  .process { height: auto; }
  .process__stick { position: relative; height: auto; min-height: 100vh; }
  .process__hint { display: none; }
}

/* ---------- G2 services ---------- */

.g2 { padding-block: clamp(3rem, 7vw, 6rem) 0; }

.g2__grid {
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.eyebrow--tail::before { display: none; }
.eyebrow--tail::after { content: ""; width: 2.2rem; height: 2px; background: var(--blue); }

.g2__title {
  margin-top: 1rem;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.2;
}
.g2__title em { color: var(--blue); font-style: italic; font-weight: 500; }

.g2__lead { margin-top: 1.2rem; max-width: 52ch; }

.g2__cards {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.g2__cards li {
  list-style: none;
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid #EAF0F8;
  border-radius: 1.1rem;
  box-shadow: var(--shadow-soft);
  padding: 1.6rem 1.5rem 2.2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.g2__cards li:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.g2__cards h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--navy); margin-top: 1rem; }
.g2__cards p { font-size: 0.85rem; line-height: 1.7; margin-top: 0.6rem; }
.g2__cards .tab {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--blue);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-top-left-radius: 0.9rem;
}

.g2__media { position: relative; }
.g2__frame {
  overflow: hidden;
  border-radius: 8rem 1.5rem 1.5rem 8rem;
  height: clamp(30rem, 52vw, 46rem);
}
/* source photo has old blue decorations baked into its edges — zoom past them */
.g2__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 38%;
  transform: scale(1.24);
}
.g2__media::after {  /* dot grid, right edge */
  content: "";
  position: absolute;
  right: -1rem;
  top: 38%;
  width: 6rem;
  height: 9rem;
  background-image: radial-gradient(var(--blue) 1.5px, transparent 1.6px);
  background-size: 1.6rem 1.6rem;
  opacity: 0.3;
}

.g2__brand {
  position: absolute;
  top: 0;
  right: 1.5rem;
  background: linear-gradient(160deg, #123058, var(--navy-deep));
  color: #fff;
  text-align: center;
  padding: 1.6rem 1.5rem 1.4rem;
  border-radius: 0 0 1.4rem 1.4rem;
  border-top: 0;
  box-shadow: var(--shadow-card);
  max-width: 12rem;
}
.g2__brand img {
  height: 3rem;
  width: auto;
  margin-inline: auto;
  filter: invert(1) brightness(2);
}
.g2__brand p {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.4;
}

.g2__trust {
  position: absolute;
  left: 1.5rem;
  bottom: 2.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--card);
  border-radius: 1.1rem;
  padding: 0.9rem 1.6rem 0.9rem 1rem;
  box-shadow: var(--shadow-card);
}
.g2__trust .disc {
  display: flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--blue); color: #fff;
}
.g2__trust .disc .icon { width: 1.5rem; height: 1.5rem; }
.g2__trust strong { display: block; font-size: 1.02rem; font-weight: 700; color: var(--navy); }
.g2__trust em { display: block; font-family: var(--serif); font-style: italic; color: var(--blue); font-size: 0.95rem; }

/* ---------- why choose band ---------- */

.why {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(120deg, #0A2A56 0%, #0C3163 60%, #0A2A56 100%);
  color: #C7D6EA;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.why__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.why__head::before, .why__head::after { content: ""; width: 2.6rem; height: 1px; background: rgba(255, 255, 255, 0.4); }

.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.why__grid li {
  list-style: none;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding-inline: clamp(0.5rem, 1.5vw, 1.4rem);
}
.why__grid li + li { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.why__grid .disc {
  display: flex; align-items: center; justify-content: center;
  flex: none;
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: #fff; color: var(--blue);
}
.why__grid .disc .icon { width: 1.7rem; height: 1.7rem; }
.why__grid h3 { font-family: var(--sans); color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.why__grid p { font-size: 0.82rem; line-height: 1.65; margin-top: 0.5rem; }

@media (max-width: 1100px) {
  .g2__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr 1fr; row-gap: 1.8rem; }
  .why__grid li:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
  .g2__cards { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .why__grid li { border-left: 0 !important; }
  .g2__brand { right: 0.5rem; max-width: 10rem; padding: 1.1rem 1rem 1rem; }
  .g2__trust { left: 0.5rem; }
}

/* ---------- G3 why choose (editorial, gold accents) ---------- */

.g3 {
  --gold: #B08D4F;
  --gold-soft: #E7D7B4;
  overflow-x: clip;
  padding-block: clamp(3rem, 7vw, 6rem) 0;
  background: linear-gradient(180deg, #FCFBF8 0%, var(--bg) 100%);
}

.eyebrow--gold { color: var(--gold); }
.eyebrow--gold::after, .eyebrow--gold::before { background: var(--gold); }

.g3__grid {
  display: grid;
  grid-template-columns: minmax(0, 55%) minmax(0, 45%);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.g3__title { margin-top: 1rem; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.14; }
.g3__title .blue { color: var(--blue); }

.g3__rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  color: var(--gold);
  max-width: 26rem;
}
.g3__rule::before, .g3__rule::after { content: ""; flex: 1; height: 1px; background: var(--gold-soft); }
.g3__rule .icon { width: 1.3rem; height: 1.3rem; }

.g3__points {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.g3__points li {
  list-style: none;
  padding: 1.4rem clamp(0.9rem, 1.6vw, 1.5rem);
}
.g3__points li:nth-child(2), .g3__points li:nth-child(3),
.g3__points li:nth-child(5), .g3__points li:nth-child(6) { border-left: 1px solid #E9E4D8; }
.g3__points li:nth-child(n+4) { border-top: 1px solid #E9E4D8; }

.g3__points .disc {
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: #fff; color: var(--blue);
  box-shadow: 0 6px 18px rgba(13, 44, 79, 0.10);
}
.g3__points .disc .icon { width: 1.6rem; height: 1.6rem; }
.g3__points .disc--solid { background: var(--blue); color: #fff; }
.g3__points .disc--solid .icon path[stroke="#fff"] { stroke: var(--blue); }

.g3__points h3 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
  margin-top: 1rem;
}
.g3__points h3::after { content: ""; display: block; width: 2rem; height: 2px; background: var(--gold); margin-top: 0.6rem; }
.g3__points p { font-size: 0.82rem; line-height: 1.7; margin-top: 0.8rem; }

/* right: circular building photo bleeding off the edge */

.g3__media { position: relative; min-height: clamp(28rem, 46vw, 42rem); }

.g3__circle {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(30rem, 52vw, 52rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  outline: 3px solid var(--gold-soft);
  outline-offset: 8px;
}
.g3__circle img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 45%; }

.g3__logo-badge {
  position: absolute;
  top: 1rem;
  left: -1.5rem;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #14355E, var(--navy-deep));
  border: 3px solid var(--gold-soft);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.g3__logo-badge img { height: 3.6rem; width: auto; filter: invert(1) brightness(2); }

.g3__serving {
  position: absolute;
  bottom: 2rem;
  left: 45%;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: linear-gradient(120deg, #0A1F3D, #123058);
  border-radius: 1.2rem;
  padding: 1.3rem 2rem;
  box-shadow: var(--shadow-card);
}
.g3__serving .icon { width: 2.4rem; height: 2.4rem; color: var(--gold-soft); }
.g3__serving small {
  display: block;
  color: #C7D6EA;
  font-size: 0.85rem;
}
.g3__serving strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* bottom quote strip */

.g3__foot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid #E9E4D8;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  align-items: center;
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
}

.g3__quote { display: flex; gap: 1.2rem; align-items: flex-start; padding-right: clamp(1.5rem, 3vw, 3rem); }
.g3__quote .q {
  font-family: var(--serif);
  font-size: 4.2rem;
  line-height: 0.7;
  color: var(--gold);
  transform: translateY(0.32em);
}
.g3__quote p {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.55;
  color: var(--ink);
}

.g3__passion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-left: 1px solid #E9E4D8;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  text-align: left;
}
.g3__passion .icon { width: 2rem; height: 2rem; color: var(--gold); }
.g3__passion span {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

@media (max-width: 1100px) {
  .g3__grid { grid-template-columns: 1fr; }
  .g3__media { min-height: 0; margin-top: 1rem; }
  .g3__circle { position: relative; width: 100%; max-width: 34rem; }
  .g3__serving { left: auto; right: 0.5rem; bottom: 1rem; }
  .g3__points { grid-template-columns: 1fr 1fr; }
  .g3__points li:nth-child(3) { border-left: 0; }
  .g3__points li:nth-child(5) { border-left: 0; }
  .g3__points li:nth-child(3), .g3__points li:nth-child(4) { border-top: 1px solid #E9E4D8; }
  .g3__foot { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .g3__passion { border-left: 0; justify-content: flex-start; padding-left: 0; }
}
@media (max-width: 640px) {
  .g3__points { grid-template-columns: 1fr; }
  .g3__points li { border-left: 0 !important; border-top: 1px solid #E9E4D8; }
  .g3__points li:first-child { border-top: 0; }
  .g3__logo-badge { width: 7rem; height: 7rem; left: 0; }
  .g3__logo-badge img { height: 2.4rem; }
  .g3__serving { position: relative; inset: auto; margin-top: 1rem; }
}

/* ---------- mega menu + dropdowns ---------- */

.nav { position: relative; z-index: 30; }
.nav__item { position: relative; }
.nav__item > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav__item .caret { width: 0.85rem; height: 0.85rem; transition: transform 0.25s ease; }
.nav__item:hover > a .caret, .nav__item:focus-within > a .caret { transform: rotate(180deg); }

.drop, .mega {
  position: absolute;
  top: calc(100% + 0.9rem);
  background: var(--card);
  border: 1px solid #EAF0F8;
  border-radius: 1.1rem;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 40;
}
/* invisible hover bridge so the pointer can travel down */
.drop::before, .mega::before {
  content: "";
  position: absolute;
  top: -1rem; left: 0; right: 0; height: 1rem;
}
.nav__item:hover > .drop, .nav__item:focus-within > .drop,
.nav__item:hover > .mega, .nav__item:focus-within > .mega {
  opacity: 1; visibility: visible; transform: none;
}

.drop { left: 50%; translate: -50% 0; min-width: 13.5rem; padding: 0.7rem; }
.nav__item:hover > .drop, .nav__item:focus-within > .drop { transform: none; }
.drop a {
  display: block;
  padding: 0.6rem 0.9rem;
  border-radius: 0.6rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.drop a:hover { background: var(--blue-soft); color: var(--blue); }

.nav__item--mega { position: static; }
.mega {
  left: 0;
  right: 0;
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 15.5rem;
  gap: clamp(1.2rem, 2vw, 2rem);
}
.mega__col { min-width: 0; display: flex; flex-direction: column; }
.mega__col + .mega__col { border-left: 1px solid #EEF2F8; padding-left: clamp(1.2rem, 2vw, 2rem); }
.mega__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 0.7rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid var(--blue-soft);
}
.mega__head .icon-badge { width: 2.1rem; height: 2.1rem; }
.mega__head .icon-badge .icon { width: 1.05rem; height: 1.05rem; }
.mega__col > a {
  display: block;
  padding: 0.42rem 0.4rem;
  border-radius: 0.5rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--gray);
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.15s ease, background 0.15s ease, padding-left 0.15s ease;
}
.mega__col > a:hover { color: var(--blue); background: var(--blue-soft); padding-left: 0.7rem; }

/* per-column "View All" — pinned to the bottom so uneven columns still line up */
.mega__all {
  margin-top: auto;
  padding: 0.6rem 0.4rem 0.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}
.mega__all .icon { width: 0.85rem; height: 0.85rem; transition: transform 0.15s ease; }
.mega__all:hover .icon { transform: translateX(3px); }

.mega__feature {
  background: linear-gradient(150deg, #0A1F3D, #123058);
  border-radius: 1rem;
  color: #B9C8DE;
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.mega__feature > .icon { width: 2rem; height: 2rem; color: #4D8DF0; }
.mega__feature .t { color: #fff; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; }
.mega__feature p:not(.t) { font-size: 0.82rem; line-height: 1.6; }
.mega__feature .mega__tel { color: #7FB0F5; font-size: 1.3rem; font-weight: 700; margin-top: 0.3rem; }
.mega__feature .mega__tel:hover { color: #fff; }
.mega__feature small { font-size: 0.75rem; color: #8FA5C4; }

/* conversion CTA in the mega menu feature card */
.mega__cta {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 0.7rem;
  border-radius: 0.7rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(30, 111, 229, 0.9);
  transition: background 0.18s ease, transform 0.18s ease;
}
.mega__cta .icon { width: 1rem; height: 1rem; flex: none; }
.mega__cta .icon:last-child { transition: transform 0.15s ease; }
.mega__cta:hover { background: #1760CC; color: #fff; transform: translateY(-1px); }
.mega__cta:hover .icon:last-child { transform: translateX(3px); }

/* drawer "View All" */
.drawer__all {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  color: #7FB0F5 !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.drawer__all .icon { width: 0.85rem; height: 0.85rem; }

/* drawer services accordion */
.drawer__acc {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding-block: 0.95rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  color: #E6EEF9;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.drawer__acc .icon { width: 1.3rem; height: 1.3rem; color: #4D8DF0; }
.drawer__acc .pm { margin-left: auto; color: #4D8DF0; font-size: 1.4rem; line-height: 1; }
.drawer__sub { display: none; padding: 0.4rem 0 0.8rem 2.3rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.drawer__sub.open { display: block; }
.drawer__cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4D8DF0;
  margin-top: 0.9rem;
}
.drawer__sub a {
  display: block;
  padding-block: 0.45rem;
  color: #C7D6EA;
  font-size: 0.95rem;
}

/* service page layout */
.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.svc-body .g1__body p { margin-top: 1.1rem; }
.svc-side { position: sticky; top: 1.5rem; display: grid; gap: 1.4rem; }
.svc-card {
  background: var(--card);
  border: 1px solid #EAF0F8;
  border-radius: 1.1rem;
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.4rem;
}
.svc-card h3 { font-family: var(--sans); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); padding-bottom: 0.8rem; margin-bottom: 0.6rem; border-bottom: 2px solid var(--blue-soft); }
.svc-card > a { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.42rem; font-size: 0.9rem; font-weight: 500; color: var(--gray); }
.svc-card > a .icon { width: 0.8rem; height: 0.8rem; color: var(--blue); }
.svc-card > a:hover, .svc-card > a.cur { color: var(--blue); }
.svc-card > a.cur { font-weight: 700; }
.svc-card--navy { background: linear-gradient(150deg, #0A1F3D, #123058); border: 0; color: #B9C8DE; }
.svc-card--navy .big { width: 2rem; height: 2rem; color: #4D8DF0; }
.svc-card--navy .t { color: #fff; font-family: var(--serif); font-size: 1.15rem; margin-top: 0.6rem; }
.svc-card--navy .tel { display: block; color: #7FB0F5; font-size: 1.35rem; font-weight: 700; margin-top: 0.4rem; }
.svc-card--navy .tel:hover { color: #fff; }
.svc-card--navy small { display: block; margin-top: 0.4rem; font-size: 0.78rem; color: #8FA5C4; }

.team-plate img { width: 100%; height: clamp(18rem, 40vw, 32rem); object-fit: cover; border-radius: 1.4rem; }

.article { max-width: 46rem; }
.article h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 2.2rem; }
.article p { margin-top: 1.1rem; font-size: 0.98rem; line-height: 1.8; }

.pull-quote {
  margin: 1.4rem 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--blue);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--navy);
}

@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .svc-side { grid-template-columns: 1fr; }
}

/* ---------- inner pages ---------- */

.page-hero {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
}
.page-hero .eyebrow { justify-content: center; }
.page-hero .eyebrow::after { content: ""; width: 2.2rem; height: 2px; background: var(--blue); }
.page-hero h1 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.12;
  margin-top: 1rem;
}
.page-hero h1 .blue { color: var(--blue); }
.page-hero .script {
  font-family: var(--script);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--blue);
  margin-top: 0.5rem;
}
.page-hero .crumb { margin-top: 1.3rem; font-size: 0.82rem; letter-spacing: 0.05em; }
.page-hero .crumb a { color: var(--gray); }
.page-hero .crumb a:hover { color: var(--blue); }
.page-hero .crumb span { color: var(--blue); font-weight: 600; }

/* service category grids (3-up variant of g2 cards) */
.cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2rem;
  list-style: none;
}
.cards3 li {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid #EAF0F8;
  border-radius: 1.1rem;
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.4rem 2.1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cards3 li:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.cards3 h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--navy); margin-top: 0.9rem; }
.cards3 p { font-size: 0.84rem; line-height: 1.65; margin-top: 0.5rem; }
.cards3 .tab {
  position: absolute; right: 0; bottom: 0;
  background: var(--blue); color: #fff;
  font-size: 0.8rem; font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-top-left-radius: 0.9rem;
}

.cat-head { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; align-items: center; gap: 1.1rem; }
.cat-head:first-of-type { margin-top: 0; }
.cat-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; white-space: nowrap; }
.cat-head::after { content: ""; flex: 1; height: 1px; background: #DCE5F1; }
.cat-head .icon-badge { width: 2.9rem; height: 2.9rem; }

/* numbered process steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  list-style: none;
  margin-top: 2rem;
  counter-reset: step;
}
.steps li {
  background: var(--card);
  border: 1px solid #EAF0F8;
  border-radius: 1.1rem;
  box-shadow: var(--shadow-soft);
  padding: 1.6rem 1.4rem 1.8rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.steps li:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.steps .n {
  display: block;
  font-weight: 700;
  color: var(--blue);
  font-size: 0.95rem;
  margin-top: 1rem;
}
.steps h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; color: var(--navy); margin-top: 0.3rem; }
.steps p { font-size: 0.85rem; line-height: 1.65; margin-top: 0.5rem; }

/* contact info cards */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  list-style: none;
}
.info-cards li {
  background: var(--card);
  border: 1px solid #EAF0F8;
  border-radius: 1.1rem;
  box-shadow: var(--shadow-soft);
  padding: 1.8rem 1.6rem;
  text-align: center;
}
.info-cards .icon-badge { margin-inline: auto; }
.info-cards h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; color: var(--navy); margin-top: 1rem; }
.info-cards p { font-size: 0.9rem; line-height: 1.7; margin-top: 0.5rem; }
.info-cards a { color: var(--blue); font-weight: 600; }
/* .info-cards a (0,1,1) outranks .btn (0,1,0), so a button inside one of
   these cards rendered blue-on-blue and was invisible. Live bug, both themes. */
.info-cards a.btn { color: #fff; }
.info-cards a:hover { text-decoration: underline; }

/* map */
.map { margin-top: clamp(2rem, 4vw, 3rem); border-radius: 1.4rem; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid #EAF0F8; }
.map iframe { display: block; width: 100%; height: clamp(20rem, 34vw, 28rem); border: 0; }

/* CTA band */
.cta-band {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(120deg, #0A1F3D 0%, #0E2748 55%, #123058 100%);
  border-radius: 1.6rem;
  padding: clamp(2.2rem, 5vw, 3.5rem);
  text-align: center;
  color: #B9C8DE;
  box-shadow: var(--shadow-card);
}
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 500; }
.cta-band h2 em { font-style: italic; color: #7FB0F5; }
.cta-band p { max-width: 52ch; margin: 0.9rem auto 0; }
.cta-band .btn { margin-top: 1.8rem; }

@media (max-width: 1100px) {
  .cards3, .steps, .info-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cards3, .steps, .info-cards { grid-template-columns: 1fr; }
  .cat-head h2 { white-space: normal; }
}

/* ---------- footer ---------- */

.footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(70rem 30rem at 15% 0%, #0E2C55 0%, transparent 55%),
    linear-gradient(160deg, #081D3A 0%, #061630 100%);
  color: #A9BCD6;
  font-size: 0.9rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr 1.25fr 1.25fr;
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.2rem, 4vw, 3.2rem);
}

.footer h3 {
  font-family: var(--sans);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer h3::after { content: ""; display: block; width: 2.2rem; height: 2px; background: var(--blue); margin-top: 0.7rem; }

.footer__brand img { height: 4.6rem; width: auto; filter: invert(1) brightness(2); }
.footer__brand > p { margin-top: 1.4rem; line-height: 1.75; }

.footer__contact { margin-top: 1.5rem; list-style: none; display: grid; gap: 0.9rem; }
.footer__contact li { display: flex; gap: 0.8rem; align-items: flex-start; }
.footer__contact .icon { color: var(--blue); width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; }
.footer__contact a { color: #E6EEF9; }
.footer__contact a:hover { color: #fff; text-decoration: underline; }

.footer__col ul { list-style: none; margin-top: 1.4rem; display: grid; gap: 0.75rem; }
.footer__col ul a { display: flex; align-items: center; gap: 0.5rem; color: #A9BCD6; transition: color 0.2s ease, transform 0.2s ease; }
.footer__col ul a:hover { color: #fff; transform: translateX(3px); }
.footer__col ul .icon { width: 0.85rem; height: 0.85rem; color: var(--blue); }

.footer__hours table { margin-top: 1.4rem; border-collapse: collapse; width: 100%; max-width: 17rem; }
.footer__hours td { padding-block: 0.28rem; }
.footer__hours td:first-child { padding-right: 1.2rem; }
.footer__hours td:first-child { color: #E6EEF9; }
.footer__hours td:last-child { text-align: right; white-space: nowrap; }

.footer__call {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__call .disc {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--blue); color: #fff;
  flex: none;
}
.footer__call small { display: block; color: #A9BCD6; }
.footer__call strong { display: block; color: #4D8DF0; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.footer__call:hover strong { color: #7FB0F5; }

.footer__news > p { margin-top: 1.4rem; line-height: 1.75; }

.footer__sub {
  margin-top: 1.4rem;
  display: flex;
  border: 1px solid #2C4A78;
  border-radius: 0.8rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.footer__sub input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.9rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: #fff;
  outline: none;
}
.footer__sub input::placeholder { color: #8FA5C4; }
.footer__sub button {
  border: 0;
  width: 3.6rem;
  background: linear-gradient(135deg, #2B7BF3, var(--blue));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s ease;
}
.footer__sub button:hover { filter: brightness(1.12); }
.footer__sub button .icon { width: 1.3rem; height: 1.3rem; }

.footer__privacy { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; font-size: 0.85rem; }
.footer__privacy .icon { width: 1.05rem; height: 1.05rem; color: var(--blue); }

/* values strip */

.footer__values { background: rgba(255, 255, 255, 0.035); border-block: 1px solid rgba(255, 255, 255, 0.08); }
.footer__values ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: 1.8rem;
}
.footer__values li { display: flex; align-items: center; gap: 1.1rem; padding-inline: clamp(0.8rem, 2vw, 1.8rem); }
.footer__values li + li { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.footer__values .ring {
  display: flex; align-items: center; justify-content: center;
  flex: none;
  width: 3.8rem; height: 3.8rem;
  border-radius: 50%;
  border: 1.5px solid #2E5A9E;
  color: #4D8DF0;
}
.footer__values .ring .icon { width: 1.7rem; height: 1.7rem; }
.footer__values strong { display: block; color: #fff; font-size: 0.98rem; font-weight: 600; }
.footer__values small { display: block; margin-top: 0.25rem; line-height: 1.5; }

/* bottom bar */

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.6rem;
}
.footer__legal { list-style: none; display: flex; flex-wrap: wrap; }
.footer__legal li { display: flex; align-items: center; }
.footer__legal li + li::before { content: "|"; margin-inline: 1.1rem; color: #33507E; }
.footer__legal a { color: #A9BCD6; }
.footer__legal a:hover { color: #fff; }

.footer__social { list-style: none; display: flex; gap: 0.8rem; }
.footer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #E6EEF9;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.footer__social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-3px); }
.footer__social .icon { width: 1.2rem; height: 1.2rem; }
.footer__social .g { font-weight: 700; font-size: 1.05rem; font-family: var(--sans); }

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__values ul { grid-template-columns: 1fr 1fr; row-gap: 1.4rem; }
  .footer__values li:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__values ul { grid-template-columns: 1fr; }
  .footer__values li { border-left: 0 !important; }
  .footer__bar { justify-content: center; text-align: center; }
}

/* ---------- motion ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* hero entrance (pure CSS, on load) */
.hero__grid > div:first-child > * { animation: rise 0.8s cubic-bezier(.22,.7,.3,1) both; }
.hero__grid .eyebrow      { animation-delay: 0.05s; }
.hero__grid h1            { animation-delay: 0.15s; }
.hero__grid .hero__deck   { animation-delay: 0.28s; }
.hero__grid .btn          { animation-delay: 0.4s; }
.hero__media              { animation: rise 0.9s cubic-bezier(.22,.7,.3,1) 0.2s both; }

.hero__badge { animation: float 6s ease-in-out 1.2s infinite; }

/* scroll reveals (JS adds .in; .js gate keeps content visible if JS fails) */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.7,.3,1); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="1"] { transition-delay: 0.08s; }
.js [data-reveal="2"] { transition-delay: 0.16s; }
.js [data-reveal="3"] { transition-delay: 0.24s; }
.js [data-reveal="4"] { transition-delay: 0.32s; }

/* hover life */
.btn, .request .submit { transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, background 0.25s ease; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(30, 111, 229, 0.42); }
.request .submit:hover { transform: translateY(-3px); }
.nav__call { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.nav__call:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.nav__links a { transition: color 0.2s ease; }
.icon-badge { transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; }
.field { transition: border-color 0.25s ease, background 0.25s ease; }
.field:focus-within { border-color: #5E93EC; background: rgba(255, 255, 255, 0.07); }
.hero__media > img, .g1__media img { transition: transform 0.6s ease; }
.hero__media:hover > img { transform: scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  .hero__grid > div:first-child > *, .hero__media, .hero__badge { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .request .submit, .nav__call, .svc4__card, .icon-badge { transition: none; }
}

/* ---------- mobile menu ---------- */

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.8rem;
  height: 2.8rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.4rem;
}
.nav__burger span { display: block; height: 2.5px; border-radius: 2px; background: var(--navy); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(50rem 24rem at 80% 0%, #10305C 0%, transparent 55%),
    linear-gradient(165deg, #0A2141 0%, #071730 100%);
  color: #C7D6EA;
  padding: 1.4rem clamp(1.4rem, 6vw, 2.2rem) 2.2rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(.25,.8,.35,1), visibility 0.35s;
}
.drawer.open { transform: none; visibility: visible; }

.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__top img { height: 3.6rem; width: auto; filter: invert(1) brightness(2); }
.drawer__close {
  display: flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}
.drawer__close .icon { width: 1.4rem; height: 1.4rem; }

.drawer__nav { margin-top: 2rem; display: grid; }
.drawer__nav a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.95rem;
  color: #E6EEF9;
  font-size: 1.05rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.drawer__nav a:first-child { color: #4D8DF0; }
.drawer__nav .icon { width: 1.3rem; height: 1.3rem; color: #4D8DF0; }

.drawer__call {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.drawer__call .disc {
  display: flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--blue); color: #fff;
  flex: none;
}
.drawer__call small { display: block; font-size: 0.85rem; }
.drawer__call a { color: #4D8DF0; font-size: 1.45rem; font-weight: 700; white-space: nowrap; }

.drawer__cta { justify-content: center; width: 100%; margin-top: 1.6rem; }

.drawer__social { list-style: none; display: flex; justify-content: center; gap: 1rem; margin-top: 1.8rem; }
.drawer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #E6EEF9;
}
.drawer__social .icon { width: 1.3rem; height: 1.3rem; }
.drawer__social .g { font-weight: 700; font-size: 1.1rem; }

/* ---------- sticky mobile quick-contact bar ---------- */

.mobilebar {
  display: none;
  position: fixed;
  left: 0.8rem;
  right: 0.8rem;
  bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 10px 40px rgba(7, 23, 48, 0.35);
  /* the centre action is the dominant one, so it gets the most width */
  grid-template-columns: 1fr 1.35fr 1fr;
}
.mobilebar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.75rem 0.4rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}
.mobilebar a + a { border-left: 1px solid #E3E9F2; }
.mobilebar .icon { width: 1.4rem; height: 1.4rem; color: var(--blue); }


/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .request { grid-template-columns: 1fr; }
  .request__intro::after { display: none; }
  .svc4 { grid-template-columns: 1fr 1fr; }
}

/* the full nav needs ~1150px; below that, burger + drawer */
@media (max-width: 1100px) {
  .nav { justify-content: space-between; padding-block: 0.8rem; }
  .nav__links, .nav__call { display: none; }
  .nav__burger { display: flex; }
  .nav__logo img { height: 3.4rem; }
}

/* process section on short viewports: compact so nothing clips */
/* The vh-aware clamps above handle the shrink continuously; only the things
   that can't be expressed that way are stepped. */
@media (max-height: 780px) {
  .process__steps p { max-width: 40ch; }
  .process__badge strong { font-size: 0.95rem; }
  .process__badge small { font-size: 0.75rem; }
  .process__hint { bottom: 0.8rem; }
}
/* Very short windows (small laptop + Safari's tall chrome): squeeze the
   remaining gaps so the badge still clears the bottom of the pinned box. */
@media (max-height: 720px) {
  .process__content { padding-block: 0.6rem; }
  /* trade horizontal room for vertical: wider measure = fewer wrapped lines */
  .process__copy { max-width: 38rem; }
  .process__deck, .process__steps p { max-width: 100%; }
  .process__copy h2 { line-height: 1.08; }
  .process__steps { margin-top: 0.55rem; --ring: 2.25rem; }
  .process__steps li { padding-block: 0.22rem; }
  .process__steps p { margin-top: 0.1rem; line-height: 1.45; }
  .process__deck { line-height: 1.45; margin-top: 0.35rem; }
  .process__badge { margin-top: 0.5rem; padding: 0.5rem 0.9rem; }
  .process__badge > .icon { width: 1.5rem; height: 1.5rem; }
  .process__hint { display: none; }
}

@media (max-width: 860px) {
  body { padding-bottom: 5.6rem; }  /* clear the sticky quick-contact bar */

  .mobilebar { display: grid; }

  .hero__grid, .g1__grid { grid-template-columns: 1fr; }
  .hero__grid > div:first-child { padding-block: 0.5rem 1rem; text-align: center; }
  .eyebrow { justify-content: center; }
  .hero h1 { margin-inline: auto; }
  .hero__deck { margin-inline: auto; }
  .hero__media { margin-top: 1.5rem; }
  .hero__media > img { height: 19rem; border-radius: 6rem 1.2rem 1.2rem 2rem; }
  .hero__badge { left: 0.6rem; bottom: -1.2rem; width: 8.5rem; height: 8.5rem; border-width: 3px; }
  .hero__badge strong { font-size: 0.95rem; }

  .request { margin-top: 2.4rem; padding: 1.4rem; }
  .request__fields { grid-template-columns: 1fr; }
  .request .submit { width: 100%; justify-content: center; }

  .svc4 { grid-template-columns: 1fr; }

  .g1__media { padding: 1rem 0 3rem 1rem; }
  .g1__media img { height: clamp(22rem, 90vw, 28rem); }
  .g1__card { left: 0; }
  .g1__kicker .t { font-size: 0.92rem; }

  .g2__cards { gap: 1.1rem; }
  .g3__title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .g3__quote .q { font-size: 3rem; }

  /* footer accordions */
  .footer__grid { grid-template-columns: 1fr; padding-block: 2.4rem 1.6rem; gap: 0; }
  .footer__brand { padding-bottom: 1.6rem; }
  .footer__col.acc { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .footer__col.acc > h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .footer__col.acc > h3::after {
    content: "+";
    width: auto; height: auto;
    background: none;
    margin: 0;
    color: #4D8DF0;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
  }
  .footer__col.acc.open > h3::after { content: "\2212"; }
  .footer__col.acc > *:not(h3) { display: none; }
  .footer__col.acc.open > *:not(h3) { display: block; }
  .footer__col.acc.open { padding-bottom: 1.4rem; }
  .footer__col.acc.open > ul { display: grid; }
  .footer__col.acc > h3, .footer__col.acc > * { margin-top: 0; }
  .footer__col ul { margin-top: 0.2rem; }
  .footer__hours table { margin-top: 0.2rem; }
  .footer__news > p { margin-top: 0.2rem; }
  .footer__sub, .footer__call { margin-top: 1.1rem; }
}

/* ============================================================
   Homepage restructure (ChatGPT UX review, 2026-08-12)
   ============================================================ */

/* visually-hidden label text — real labels instead of placeholder-only fields */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* secondary/ghost button next to the primary CTA */
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--blue-line);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero__cta .btn { margin-top: 0; }
.hero__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 1.6rem;
  font-size: 0.83rem;
  color: var(--gray);
}
.hero__meta li { display: flex; align-items: center; gap: 0.5rem; }
.hero__meta .icon { width: 1rem; height: 1rem; color: var(--blue); flex: none; }

/* trust bar under the hero */
.trustbar {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--card);
  border: 1px solid #EAF0F8;
  border-radius: 1.2rem;
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.trustbar li + li { border-left: 1px solid #EEF2F8; }
.trustbar strong {
  display: block;
  font-family: var(--serif);
  color: var(--navy);
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  font-weight: 550;
  line-height: 1.2;
}
.trustbar span { display: block; font-size: 0.8rem; margin-top: 0.25rem; }

/* inline arrow link */
.linky {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--blue);
}
.linky .icon { width: 0.95rem; height: 0.95rem; transition: transform 0.15s ease; }
.linky:hover .icon { transform: translateX(3px); }
.linky--lg { margin-top: 1.6rem; font-size: 0.92rem; }
.g1__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.8rem; }
.g1__cta .btn { margin-top: 0; }

/* history timeline */
.timeline-sec { margin-top: clamp(3rem, 6vw, 5rem); }
.timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: 2rem;
  counter-reset: none;
}
.timeline li {
  position: relative;
  padding: 1.8rem 1.6rem;
  background: var(--card);
  border: 1px solid #EAF0F8;
  border-radius: 1.1rem;
  box-shadow: var(--shadow-soft);
}
.timeline li::before {
  content: "";
  position: absolute;
  top: 0; left: 1.6rem; right: 1.6rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--blue);
}
.timeline__year {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 550;
  color: var(--blue);
  line-height: 1;
}
.timeline h3 { font-family: var(--serif); color: var(--navy); font-size: 1.15rem; font-weight: 550; margin-top: 0.6rem; }
.timeline p { font-size: 0.87rem; margin-top: 0.5rem; }

/* reviews */
.reviews-sec { margin-top: clamp(3rem, 6vw, 5rem); }
.reviews {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  background: var(--card);
  border: 1px solid #EAF0F8;
  border-radius: 1.4rem;
  box-shadow: var(--shadow-soft);
}
.reviews__score { text-align: center; padding-right: clamp(1rem, 2vw, 2rem); border-right: 1px solid #EEF2F8; }
.reviews__stars { display: block; color: #F5A623; font-size: 1.15rem; letter-spacing: 0.12em; }
.reviews__score strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 550;
  color: var(--navy);
  line-height: 1.1;
  margin-top: 0.3rem;
}
.reviews__score small { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }
.reviews__copy h2 { font-family: var(--serif); color: var(--navy); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 550; }
.reviews__copy p { margin-top: 0.7rem; font-size: 0.92rem; }
.reviews__copy .btn { margin-top: 1.3rem; }

/* new patients block */
.newpat-sec { margin-top: clamp(3rem, 6vw, 5rem); }
.newpat {
  background: linear-gradient(120deg, #0A1F3D 0%, #0E2748 55%, #123058 100%);
  border-radius: 1.6rem;
  padding: clamp(2rem, 4vw, 3rem);
  color: #B9C8DE;
  box-shadow: var(--shadow-card);
}
.newpat__intro h2 { font-family: var(--serif); color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; margin-top: 0.8rem; line-height: 1.2; }
.newpat__intro h2 .lt { color: #4D8DF0; }
.newpat__intro p { margin-top: 0.7rem; font-size: 0.92rem; }
.newpat__links {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.8rem;
}
.newpat__links a {
  display: block;
  height: 100%;
  padding: 1.3rem 1.2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.newpat__links a:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(77, 141, 240, 0.7); transform: translateY(-2px); }
.newpat__links .icon-badge { background: rgba(77, 141, 240, 0.16); }
.newpat__links .icon-badge .icon { color: #7FB0F5; }
.newpat__links strong { display: block; color: #fff; font-size: 0.98rem; margin-top: 0.8rem; }
.newpat__links small { display: block; font-size: 0.79rem; margin-top: 0.2rem; line-height: 1.5; }

/* visit us */
.visit-sec { margin-top: clamp(3rem, 6vw, 5rem); }
.g2__grid--flip { direction: ltr; }
.visit__facts { list-style: none; display: grid; gap: 1rem; margin-top: 1.6rem; }
.visit__facts li { display: flex; align-items: center; gap: 1rem; }
.visit__facts strong { display: block; font-family: var(--serif); color: var(--navy); font-size: 1.1rem; font-weight: 550; }
.visit__facts small { display: block; font-size: 0.84rem; }
.visit__media .g2__frame { border-radius: 1.5rem; }

/* footer: plain list column */
.footer__plain { list-style: none; }
.footer__plain li { margin-bottom: 0.7rem; font-size: 0.88rem; line-height: 1.6; }
.footer__plain a { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer__plain .icon { width: 1rem; height: 1rem; }

@media (max-width: 1000px) {
  .trustbar { grid-template-columns: repeat(2, 1fr); }
  .trustbar li:nth-child(odd) { border-left: 0; }
  .trustbar li:nth-child(n+3) { border-top: 1px solid #EEF2F8; padding-top: 1rem; }
  .newpat__links { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr; }
  .reviews { grid-template-columns: 1fr; }
  .reviews__score { border-right: 0; border-bottom: 1px solid #EEF2F8; padding-right: 0; padding-bottom: 1.2rem; }
}
@media (max-width: 640px) {
  .trustbar { grid-template-columns: 1fr; text-align: left; }
  .trustbar li { border-left: 0 !important; }
  .trustbar li + li { border-top: 1px solid #EEF2F8; padding-top: 0.9rem; }
  .newpat__links { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* header appointment CTA */
.nav__book {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.15rem;
  border-radius: 0.7rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(30, 111, 229, 0.9);
  transition: background 0.18s ease, transform 0.18s ease;
}
.nav__book:hover { background: #1760CC; color: #fff; transform: translateY(-1px); }
@media (max-width: 1180px) { .nav__book { display: none; } }

/* visit section: keep the office photo a sane height beside the facts */
.visit__media .g2__frame img { aspect-ratio: 5 / 4; object-fit: cover; height: auto; }
.visit-sec .g2__grid { align-items: center; }

/* footer hours: stop the day range wrapping onto two lines */
.footer__hours table { width: 100%; }
.footer__hours td:first-child { white-space: nowrap; padding-right: 1.2rem; }
.footer__hours td:last-child { white-space: nowrap; text-align: right; }

/* keyboard focus — was entirely missing; mega menu and drawer are keyboard-driven */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 0.35rem;
}
.footer :focus-visible,
.newpat :focus-visible,
.process :focus-visible,
.mega__feature :focus-visible,
.drawer :focus-visible { outline-color: #7FB0F5; }
/* keep the mega menu open while tabbing through it (already true for hover) */
.nav__item:focus-within > .mega,
.nav__item:focus-within > .drop { opacity: 1; visibility: visible; transform: none; }

/* ---------- mobile drawer: nested service accordions ---------- */
.drawer__sub { padding-left: 0; }
.drawer__sub > a,
.drawer__sub--deep > a {
  display: block;
  padding: 1rem 0 1rem 3.3rem;      /* >=44px row, whole row tappable */
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #C7D6EA;
  font-size: 0.95rem;
}
.drawer__acc--sub {
  padding-left: 2.3rem;
  font-size: 0.98rem;
  color: #E6EEF9;
}
.drawer__acc--sub .icon { width: 1.15rem; height: 1.15rem; }
.drawer__sub--deep > a { padding-left: 4.3rem; font-size: 0.9rem; }
.drawer__all {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
  padding-block: 1rem;
  color: #7FB0F5 !important;
  font-size: 0.76rem !important;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.drawer__all--top { padding-left: 2.3rem; }
.drawer__acc[aria-expanded="true"] { color: #7FB0F5; }

/* the sticky conversion bar and the drawer are two navigations — show one */
body.drawer-open .mobilebar { display: none !important; }

@media (max-width: 860px) {
  /* Restored 2026-08-20: the sticky bar is now scroll-activated, so on load
     the hero is the only tap-to-call on the page. Kept visually secondary and
     compact so the team photo still lands inside the first screen. */
  .hero__cta .btn--ghost { padding-block: 0.78rem; font-size: 0.8rem; }
  .hero__meta { font-size: 0.8rem; gap: 0.45rem 1.1rem; }

  /* the pinned 260vh process section costs ~3 screens of scroll on a phone
     to explain three self-evident steps */
  .process { display: none; }
}

/* make the appointment action the dominant one in the sticky bar */
.mobilebar__primary { background: var(--blue); border-radius: 1.2rem; color: #fff !important; }
.mobilebar__primary .icon { color: #fff; }
.mobilebar a.mobilebar__primary + a { border-left: 0; }

/* ============================================================
   Mobile optimisation pass (client review, 2026-08-20)

   Homepage-only, <=860px only. Desktop is untouched.
   Everything is scoped to homepage-only hooks (.hero, #about,
   #services, #visit, .timeline-sec, .newpat-sec, .request-sec)
   because the g2 and g1 component classes are shared with 27 other pages.
   The one deliberate site-wide change is the sticky bar height,
   which appears on every page and should stay consistent.

   Goals: photo becomes a primary hero element and moves above the
   fold, ~25% tighter section rhythm, three compact service cards,
   shorter sticky bar that can never cover content.
   ============================================================ */

/* mobile-only alternate copy (paired with .m-trim) */
.m-only { display: none; }

/* replaces an inline style that used to sit on this section */
.request-sec { margin-top: clamp(3rem, 6vw, 5rem); }

@media (max-width: 860px) {

  /* ---- 1 + 2. hero: photo directly under the CTA, tighter rhythm ----
     `display: contents` dissolves the text column so the photo can be
     ordered between the CTA and the meta list without touching markup. */
  .hero { padding-top: 0.6rem; }
  .hero__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    text-align: center;
  }
  .hero__grid > div:first-child { display: contents; }

  .hero .eyebrow { order: 1; }
  .hero h1       { order: 2; margin-top: 0.7rem; }
  .hero__deck    { order: 3; margin-top: 0.8rem; font-size: 1rem; }
  .hero__cta     { order: 4; margin-top: 1.3rem; justify-content: center; }
  .hero__media   { order: 5; margin-top: 1.4rem; }
  .hero__meta    { order: 6; margin-top: 1.3rem; justify-content: center; }

  /* 8. mobile drops the trailing clause; desktop keeps the full sentence */
  .m-trim { display: none; }
  .m-only { display: inline; }

  /* ---- 1. the photo: wider than the text column, ~34% more area, and a
     crop that lands in the gaps between people instead of through a face.
     Height drives the cover scale, so the full frame height always shows
     and nobody is cut off at the head or shoulders. ---- */
  .hero__media { margin-inline: calc(0.375rem - clamp(1.25rem, 4vw, 3rem)); }
  .hero__media > img {
    height: clamp(20rem, 97vw, 24rem);
    object-position: 52% 50%;
    border-radius: 2.25rem 1.5rem 1.5rem 2.25rem;
  }
  /* the badge repeats the eyebrow ("Trusted in Ridgeland since 1974") and,
     now that the photo runs to the screen edges, it covers the team and
     collides with the sticky bar. The photo is the message here. */
  .hero__badge { display: none; }

  /* ---- 4. section rhythm, ~25% tighter ---- */
  #about             { padding-block: 2.25rem; }
  #services          { padding-block: 2.25rem 0; }
  .why               { margin-top: 2.25rem; padding-block: 1.9rem; }
  .timeline-sec,
  .reviews-sec,
  .newpat-sec,
  .visit-sec,
  .request-sec       { margin-top: 2.25rem; }

  /* headline -> copy -> cards spacing */
  #about h2,
  #services .g2__title,
  .timeline-sec .g2__title { margin-top: 0.7rem; }
  #services .g2__lead      { margin-top: 0.8rem; }
  #services .g2__cards     { margin-top: 2rem; gap: 0.85rem; }
  .timeline                { margin-top: 1.4rem; gap: 1.4rem; }
  .newpat__links           { margin-top: 1.4rem; gap: 0.75rem; }

  /* ---- 4. images were reserving far more height than their content needs ---- */
  #about .g1__media     { padding: 0.75rem 0 2.25rem 0.75rem; }
  #about .g1__media img { height: clamp(17rem, 68vw, 21rem); }
  #services .g2__frame  { height: clamp(17rem, 70vw, 22rem); border-radius: 3rem 1.25rem 1.25rem 3rem; }
  /* shorter frame than desktop, so pull the crop up to keep her head in shot */
  #services .g2__frame img { object-position: 52% 20%; }
  /* the frame kept its 46rem desktop height while the image inside is
     aspect-ratio'd, leaving a tall blank strip under the office photo */
  #visit .g2__frame { height: auto; }
  #visit .g2__frame img { aspect-ratio: 4 / 3; }

  /* ---- 5. services: three compact icon-left cards, then View all ---- */
  #services .g2__cards > li:nth-child(4) { display: none; }
  #services .g2__cards li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    align-items: start;
    padding: 1rem 3.1rem 1rem 1rem;   /* right pad clears the number tab */
  }
  #services .g2__cards .icon-badge { grid-row: 1 / span 2; margin-top: 0.1rem; }
  #services .g2__cards h3 { margin-top: 0; align-self: center; }
  #services .g2__cards p  { margin-top: 0.3rem; line-height: 1.55; }
  #services .g2__cards .tab {
    top: 0; bottom: auto;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0.9rem;
  }
  #services .linky--lg { margin-top: 1.2rem; }

  /* ---- 7. rhythm: make services image-led rather than one more
     eyebrow -> heading -> copy -> cards -> photo repeat ---- */
  #services .g2__grid { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  #services .g2__grid > div:first-child { display: contents; }
  #services .eyebrow   { order: 1; }
  #services .g2__title { order: 2; }
  #services .g2__lead  { order: 3; }
  #services .g2__media { order: 4; margin-top: 1.4rem; }
  #services .g2__cards { order: 5; }
  #services .linky--lg { order: 6; }

  /* the overlays were scaled for a 46rem desktop frame and swallowed the
     photo once it shrank. The logo lockup is redundant (it is already in
     the header) and the dot grid is noise at this size. */
  #services .g2__brand { display: none; }
  #services .g2__media::after { display: none; }
  #services .g2__trust {
    left: 0.5rem;
    right: 0.5rem;
    bottom: -0.9rem;
    padding: 0.7rem 1rem 0.7rem 0.7rem;
    gap: 0.75rem;
  }
  #services .g2__trust .disc { width: 2.4rem; height: 2.4rem; }
  #services .g2__trust .disc .icon { width: 1.25rem; height: 1.25rem; }
  #services .g2__trust strong { font-size: 0.94rem; }
  #services .g2__trust em { font-size: 0.88rem; }

  /* ---- 4. timeline + new-patient cards were carrying desktop padding ---- */
  .timeline li { padding: 1.15rem 1.15rem 1.25rem; }
  .timeline li::before { left: 1.15rem; right: 1.15rem; }
  .timeline h3 { margin-top: 0.35rem; }
  .timeline p  { margin-top: 0.35rem; }

  .newpat { padding: 1.6rem 1.25rem; }
  .newpat__links a {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 1rem;
  }
  .newpat__links .icon-badge { grid-row: 1 / span 2; }
  .newpat__links strong { margin-top: 0; }
  .newpat__links small  { margin-top: 0.1rem; }

  /* ---- 9. sticky bar ~15% shorter (site-wide, it is on every page), and
     the page reserves enough room under it that it can never sit on top
     of content. The old 5.6rem was less than the bar's own footprint. ---- */
  .mobilebar a { padding: 0.55rem 0.35rem; gap: 0.22rem; }
  .mobilebar .icon { width: 1.2rem; height: 1.2rem; }

  body { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   Mobile polish pass 2 (client review, 2026-08-20)

   Refinement only, no structural change. Homepage-scoped except the
   sticky-bar and back-to-top rules, which are deliberately site-wide.
   ============================================================ */

/* ---- 4. Back to top. The button is injected by js/main.js on every page
   rather than pasted into 40+ HTML files, so the behaviour stays identical
   site-wide. Base state is display:none; only mobile turns it on. ---- */
.totop {
  position: fixed;
  right: 0.9rem;
  /* sits above the sticky bar: its measured height (published as --bar-h by
     main.js) + the bar's own inset + the iPhone safe area + a gap */
  bottom: calc(var(--bar-h, 0px) + 0.8rem + env(safe-area-inset-bottom, 0px) + 0.7rem);
  z-index: 49;                      /* below .mobilebar (50), above content */
  display: grid;
  place-items: center;
  width: 2.9rem;                    /* 46px */
  height: 2.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 8px 24px rgba(7, 23, 48, 0.34);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.55rem);
  transition: opacity 0.26s ease, transform 0.3s cubic-bezier(.22,.7,.3,1), visibility 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.totop svg { width: 1.25rem; height: 1.25rem; display: block; }
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
/* steps aside instantly when it would sit on a form control (see main.js) */
.totop.guarded { opacity: 0 !important; visibility: hidden !important; transition: none; }
.totop:hover { background: var(--navy-deep); }
/* Shown at every width (2026-08-20). --bar-h is 0 above 860px because the
   sticky bar is display:none there, so the button simply drops to the
   normal corner inset instead of clearing a bar that is not present. */
@media (min-width: 861px) { .totop { right: 1.4rem; width: 3rem; height: 3rem; } }
/* only one navigation on screen at a time */
body.drawer-open .totop { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .totop, .mobilebar { transition: none; }
}

@media (max-width: 860px) {

  /* ---- 1. hero: one more notch of tightening so more of the team photo
     arrives sooner, without making the hero itself taller ---- */
  .hero { padding-top: 0.45rem; }
  .hero h1     { margin-top: 0.55rem; }
  .hero__deck  { margin-top: 0.65rem; }
  .hero__cta   { margin-top: 1.05rem; }
  .hero__media { margin-top: 1.15rem; }
  .hero__meta  { margin-top: 1.1rem; }

  /* ---- 2. the sticky bar is now scroll-activated (see main.js). Hidden on
     load so the hero photo owns the first screen and "Request Appointment"
     is not duplicated on it. ---- */
  .mobilebar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + 1.2rem));
    transition: opacity 0.28s ease,
                transform 0.34s cubic-bezier(.22,.7,.3,1),
                visibility 0.34s;
  }
  .mobilebar.is-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /* ---- 3. bar ~13% shorter again (70px -> ~61px). Each cell still fills the
     full bar height and a third of its width, so tap targets stay well over
     the 44px minimum. ---- */
  .mobilebar a { padding: 0.42rem 0.3rem; gap: 0.16rem; font-size: 0.69rem; }
  .mobilebar .icon { width: 1.1rem; height: 1.1rem; }


  /* ---- 10. another ~20% off section rhythm ---- */
  #about             { padding-block: 1.8rem; }
  #services          { padding-block: 1.8rem 0; }
  .why               { margin-top: 1.8rem; padding-block: 1.5rem; }
  .timeline-sec,
  .reviews-sec,
  .newpat-sec,
  .visit-sec,
  .request-sec       { margin-top: 1.8rem; }
  .footer            { margin-top: 1.8rem; }

  #about h2,
  #services .g2__title,
  .timeline-sec .g2__title { margin-top: 0.55rem; }
  #services .g2__lead      { margin-top: 0.65rem; }
  #services .g2__cards     { margin-top: 1.7rem; gap: 0.7rem; }
  .timeline                { margin-top: 1.15rem; gap: 1.1rem; }
  .newpat__links           { margin-top: 1.15rem; gap: 0.6rem; }

  /* ---- 5. doctor section: close the gap so the photograph and "Meet Your
     Dentist" read as one unit ---- */
  #about .g1__grid  { gap: 1.15rem; }
  #about .g1__media { padding: 0.6rem 0 1.7rem 0.6rem; }
  #about .g1__body p { margin-top: 0.9rem; }
  #about .g1__cta   { margin-top: 1.2rem; gap: 1rem; }
  #about .g1__script { margin-top: 0.5rem; }

  /* ---- 8. why-we're-chosen: let the four headlines carry it ---- */
  .why__head { margin-bottom: 1.3rem; }
  .why__grid { row-gap: 1.05rem; }
  .why__grid li { padding-inline: 0; gap: 0.9rem; }
  .why__grid .disc { width: 3rem; height: 3rem; }
  .why__grid .disc .icon { width: 1.45rem; height: 1.45rem; }
  .why__grid p { margin-top: 0.3rem; line-height: 1.55; }

  /* ---- 12. footer: it does not need marketing-section breathing room ---- */
  .footer__grid { padding-block: 1.8rem 1rem; }
  .footer__brand { padding-bottom: 1.1rem; }
  .footer__col.acc > h3 { padding-block: 0.85rem; }
  .footer__col.acc.open { padding-bottom: 1rem; }
  .footer__bar { padding-block: 1rem; gap: 0.7rem; }
  .footer__legal li + li::before { margin-inline: 0.7rem; }
  .footer__social { gap: 0.6rem; }

  /* ---- 10 (cont). the three blocks the first spacing sweep missed ---- */

  /* trust bar under the hero */
  .trustbar { margin-top: 1.5rem; padding: 1.15rem 1.2rem; gap: 0.7rem; }
  .trustbar li + li { padding-top: 0.65rem; }

  /* visit section: it was not covered by the #services/.timeline-sec rules */
  #visit .g2__grid { gap: 1.15rem; }
  #visit .g2__title { margin-top: 0.55rem; }
  #visit .visit__facts { margin-top: 1.05rem; gap: 0.7rem; }
  #visit .visit__facts li { gap: 0.8rem; }

  /* appointment form */
  .request { margin-top: 1.9rem; padding: 1.15rem; }
  .request__intro h2,
  .request__intro h3 { font-size: 1.35rem; }
  .request__intro p { margin-top: 0.45rem; }
  .request__fields { gap: 0.7rem; }

  /* ---- 13. the last of the page must clear the fixed bar completely ---- */
  body { padding-bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   Dark theme (2026-08-20) — homepage only, opt-in.

   Everything here is scoped to html[data-theme="dark"], so light mode is
   untouched by construction. The palette is the navy already used by the
   footer / why-band / appointment form, so dark Mosal is not a new look.

   Two roles for blue: text/rules use the pale --blue (>=5.5:1 on every dark
   surface), while anything carrying white text keeps the light-mode
   --blue-fill so buttons look identical in both modes. Light mode's own
   baseline is 4.71:1 (brand blue on a white card) and dark clears it.

   Sections that are already dark (why, new patients, appointment form) LIFT
   to a lighter navy rather than staying darkest, or the page's light/dark
   rhythm collapses into one flat field.
   ============================================================ */

html[data-theme="dark"] {
  --bg:         #0A1F3D;
  --card:       #123058;
  --navy:       #FFFFFF;   /* headings + icons that were near-black */
  --navy-deep:  #071730;
  --navy-card:  #16365E;
  --ink:        #EAF1FB;
  --gray:       #A9BCD6;
  --blue:       #7FB0F5;   /* links, rules, accents ON dark */
  --blue-fill:  #1E6FE5;   /* surfaces that carry white text */
  --blue-soft:  #16365E;   /* icon-badge backgrounds */
  --blue-line:  #23446F;   /* hairlines */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.38);
  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.50);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(80rem 40rem at 110% -10%, #10294C 0%, transparent 60%),
    radial-gradient(60rem 30rem at -20% 20%, #0E2547 0%, transparent 55%),
    var(--bg);
}

/* the logo is black ink recoloured by filter; on dark it goes white, matching
   how it already appears in the footer and drawer */
html[data-theme="dark"] .nav__logo img { filter: brightness(0) invert(1); }

/* --- surfaces that carry white text keep the light-mode blue --- */
html[data-theme="dark"] .nav__call .disc,
html[data-theme="dark"] .nav__book,
html[data-theme="dark"] .g2__cards .tab,
html[data-theme="dark"] .cards3 .tab,
html[data-theme="dark"] .g2__trust .disc,
html[data-theme="dark"] .g3__points .disc--solid,
html[data-theme="dark"] .footer__call .disc,
html[data-theme="dark"] .drawer__call .disc,
html[data-theme="dark"] .mobilebar__primary,
html[data-theme="dark"] .svc4__card:hover .icon-badge,
html[data-theme="dark"] .footer__social a:hover { background: var(--blue-fill); color: #fff; }
html[data-theme="dark"] .btn { background: linear-gradient(135deg, #2B7BF3, var(--blue-fill)); }
html[data-theme="dark"] .btn--ghost { background: transparent; color: var(--navy); }
html[data-theme="dark"] .btn--ghost:hover { background: var(--navy-card); border-color: var(--blue); color: #fff; }

/* --- already-dark bands lift so the page keeps its rhythm --- */
html[data-theme="dark"] .why      { background: linear-gradient(120deg, #16365E 0%, #193C68 60%, #16365E 100%); }
html[data-theme="dark"] .newpat   { background: linear-gradient(150deg, #16365E, #193C68); }
html[data-theme="dark"] .request  { background: linear-gradient(120deg, #16365E 0%, #17395F 55%, #193C68 100%); }
html[data-theme="dark"] .footer {
  background: linear-gradient(160deg, #071730 0%, #050F22 100%);
  /* inset shadow, not border-top: a border adds 1px of height and shifts
     the whole footer down, which is the only geometric difference the
     two themes would otherwise have. */
  box-shadow: inset 0 1px 0 var(--blue-line);
}
html[data-theme="dark"] .g2__brand { background: linear-gradient(160deg, #193C68, #123058); }

/* --- hairlines and dividers that were hardcoded light --- */
html[data-theme="dark"] .g2__cards li,
html[data-theme="dark"] .timeline li,
html[data-theme="dark"] .trustbar,
html[data-theme="dark"] .reviews,
html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .cards3 li,
html[data-theme="dark"] .info-cards li,
html[data-theme="dark"] .map            { border-color: var(--blue-line); }
html[data-theme="dark"] .trustbar li + li,
html[data-theme="dark"] .trustbar li,
html[data-theme="dark"] .reviews__score,
html[data-theme="dark"] .mobilebar a + a,
html[data-theme="dark"] .mega__col + .mega__col,
html[data-theme="dark"] .footer__col.acc { border-color: var(--blue-line); }

/* --- fixed furniture --- */
html[data-theme="dark"] .mobilebar { background: var(--card); }
html[data-theme="dark"] .mobilebar a { color: var(--ink); }
/* .totop uses var(--navy), which is white on dark -- it would vanish */
html[data-theme="dark"] .totop { background: var(--blue-fill); color: #fff; }
html[data-theme="dark"] .totop:hover { background: #1760CC; }

/* --- header / drawer / dropdowns --- */
html[data-theme="dark"] .drop,
html[data-theme="dark"] .mega { background: var(--card); border-color: var(--blue-line); }
html[data-theme="dark"] .drop a:hover,
html[data-theme="dark"] .mega__col > a:hover { background: var(--navy-card); color: #fff; }
html[data-theme="dark"] .request .submit:hover { background: var(--navy-card); }

/* ---------- the toggle itself (injected by js/main.js) ---------- */
.nav__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1.5px solid var(--blue-line);
  border-radius: 50%;
  background: var(--card);
  color: var(--blue);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav__theme:hover { border-color: var(--blue); color: var(--navy); }
.nav__theme svg { width: 1.15rem; height: 1.15rem; display: block; }
.nav__theme .sun { display: none; }
html[data-theme="dark"] .nav__theme .sun { display: block; }
html[data-theme="dark"] .nav__theme .moon { display: none; }

/* Only animate the swap itself; a permanent global transition would also
   fire on first paint and on every hover. main.js adds .theme-anim for
   ~320ms around a toggle. */
html.theme-anim,
html.theme-anim body,
html.theme-anim .why,
html.theme-anim .newpat,
html.theme-anim .request,
html.theme-anim .footer,
html.theme-anim .mobilebar,
html.theme-anim .trustbar,
html.theme-anim .reviews,
html.theme-anim .g2__cards li,
html.theme-anim .timeline li,
html.theme-anim .nav__call,
html.theme-anim .nav__theme { transition: background 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim * { transition: none !important; }
  .nav__theme { transition: none; }
}

/* ---- calibration fixes from scripts/m-theme-audit.mjs ---- */

/* The white pill keeps its light-mode look, but its label used var(--navy),
   which is white on dark -- it rendered white on white. */
html[data-theme="dark"] .request .submit { background: #fff; color: var(--navy-deep); }
html[data-theme="dark"] .request .submit:hover { background: #DCE9FB; color: var(--navy-deep); }

/* These discs stay white circles, so their icon needs the saturated blue;
   the pale --blue would sit at 2.2:1 on white. */
html[data-theme="dark"] .why__grid .disc,
html[data-theme="dark"] .g3__points .disc { color: var(--blue-fill); }

/* #4D8DF0 was chosen against the light theme's darker bands. On the lifted
   dark bands it drops to ~3:1, so these promote to the pale --blue. */
html[data-theme="dark"] .field .req,
html[data-theme="dark"] .g1__card small,
html[data-theme="dark"] .newpat__intro h2 .lt,
html[data-theme="dark"] .process__copy h2 .lt,
html[data-theme="dark"] .process__steps .n,
html[data-theme="dark"] .process__badge > .icon,
html[data-theme="dark"] .footer__call strong,
html[data-theme="dark"] .footer__col.acc > h3::after,
html[data-theme="dark"] .mega__feature > .icon,
html[data-theme="dark"] .svc-card--navy .big,
html[data-theme="dark"] .drawer__acc .icon,
html[data-theme="dark"] .drawer__acc .pm,
html[data-theme="dark"] .drawer__nav a:first-child,
html[data-theme="dark"] .drawer__nav .icon,
html[data-theme="dark"] .drawer__call a { color: var(--blue); }

/* ================= launch-review pass ================= */

/* skip link (keyboard users) */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy-deep);
  color: #fff;
  padding: 0.85rem 1.3rem;
  border-radius: 0 0 0.7rem 0;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #4D8DF0;
  outline-offset: 2px;
}

/* accessible appointment form */
.request__main { display: grid; gap: 1.1rem; align-content: start; }
.fwrap { margin: 0; }
.fwrap--full { grid-column: 1 / -1; }
.flabel {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #C7D6EA;
  margin-bottom: 0.4rem;
}
.flabel .req { color: #7FB0F5; font-weight: 500; }
.field { min-height: 48px; }
.field--area { align-items: flex-start; }
.field--area .icon { margin-top: 0.35rem; }
.field textarea {
  border: 0;
  background: transparent;
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: #fff;
  outline: none;
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}
.fwrap.invalid .field { border-color: #F87171; }
.ferr { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: #FCA5A5; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.request__privacy { font-size: 0.78rem; line-height: 1.6; color: #8FA5C4; }
.request__privacy a { color: #7FB0F5; }
.fstatus {
  border-radius: 0.8rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  outline: none;
}
.fstatus.ok { background: rgba(34, 197, 94, 0.12); color: #86EFAC; border: 1px solid rgba(34, 197, 94, 0.35); }
.fstatus.bad { background: rgba(248, 113, 113, 0.1); color: #FCA5A5; border: 1px solid rgba(248, 113, 113, 0.3); }
.request .submit { min-height: 50px; }
.request .submit[disabled] { opacity: 0.6; cursor: default; transform: none; }
@media (max-width: 767px) {
  .request .submit { width: 100%; justify-content: center; }
  .request__fields { grid-template-columns: 1fr; }
}

/* review item 7: compact process on mobile — no pinning, no video scrub */
@media (max-width: 767px) {
  .process { height: auto; background: linear-gradient(165deg, #0A2141, #071730); }
  .process__stick { position: static; height: auto; overflow: visible; }
  .process__vid, .process__shade, .process__hint, .process__badge { display: none; }
  .process__content { position: static; display: block; overflow: visible; }
  .process__copy { max-width: 100%; padding: 3rem 0 3.25rem; margin: 0; }
  .process__copy h2 { font-size: 1.75rem; }
  .process__deck { display: none; }
  .process__steps { margin-top: 1.3rem; }
  .process__steps::before { display: none; }
  .process__steps li { padding-block: 0.6rem; gap: 0.95rem; align-items: center; }
  .process__steps .ring { width: 2.5rem; height: 2.5rem; }
  .process__steps h3 { font-size: 1.05rem; }
  .process__steps p { font-size: 0.83rem; margin-top: 0.15rem; }
  .js .pstep { opacity: 1; transform: none; transition: none; }
}

/* the hidden attribute must always win over the display rules above */
.ferr[hidden], .fstatus[hidden] { display: none; }