/* ============================================================
   Texoma Nephrology & Hypertension Clinic — shared stylesheet
   Design system: deep navy (#22405f brand anchor), cool off-white,
   one warm amber accent. WCAG 2.1 AA contrast throughout — every text pairing
   below was measured, not eyeballed; see the ratios noted per token.
   No external fonts, no CDNs — system font stack only.
   ============================================================ */

:root {
  /* Brand palette */
  --brand:        #22405f;  /* brand anchor — 10.7:1 on white */
  --brand-dark:   #17304a;  /* headings, hover states — 13.5:1 on white */
  --brand-deep:   #0f2138;  /* footer / dark panels — white on it is 16.2:1 */
  --brand-tint:   #eaeff5;  /* light section backgrounds */
  --brand-tint-2: #d5dfeb;  /* card borders on tinted areas */
  --paper:       #f7f9fc;  /* cool off-white page background */
  --white:       #ffffff;
  --ink:         #1b2733;  /* body text — 14.4:1 on paper */
  --ink-soft:    #4a5a6c;  /* secondary text — 7.1:1 on white */
  --amber:       #e08a1e;  /* decorative accent ONLY — 2.7:1, never text */
  --amber-deep:  #8a5410;  /* text-safe amber — 6.3:1 on white */
  --amber-tint:  #fdf0dc;
  --line:        #dde4ed;

  /* Type */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 6px rgba(34, 64, 63, 0.06), 0 12px 28px rgba(34, 64, 63, 0.07);
  --shadow-sm: 0 1px 3px rgba(34, 64, 63, 0.10);
  --maxw: 1120px;
  --maxw-text: 46rem;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;          /* 18px base — older patient base */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brand-dark);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; font-family: var(--font-body); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }

ul, ol { padding-left: 1.4em; margin: 0 0 1.1em; }
li { margin-bottom: 0.45em; }

strong { color: var(--brand-dark); }

hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* Visible focus states everywhere */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand-tint-2); }

/* Anchored sections clear the sticky header */
[id] { scroll-margin-top: 96px; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.narrow    { max-width: var(--maxw-text); }

.section       { padding: 3.5rem 0; }
.section-tint  { background: var(--brand-tint); }
.section-white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 0.75rem;
}

.lead { font-size: 1.25rem; color: var(--ink-soft); }
.small { font-size: 0.9rem; color: var(--ink-soft); }
.center { text-align: center; }

.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand-dark);
  color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 76px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--brand-dark);
  margin-right: auto;
  /* Never let the brand block be squeezed narrow enough to wrap. Without this, flex happily
     shrinks it to make room for the nav and the practice name breaks across rows — which is
     what Dr. Lal reported on 2026-09-03. */
  flex: none;
}
.brand-text { line-height: 1.15; }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--brand-dark);
  /* One line, always. Same rule the nav links carry, and for the same reason. */
  white-space: nowrap;
}
.brand-sub {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: 0.65rem 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-dark);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap; /* nav labels must never break mid-item */
}
.site-nav a:hover { background: var(--brand-tint); }
.site-nav a[aria-current="page"] {
  color: var(--brand);
  box-shadow: inset 0 -3px 0 var(--amber);
  border-radius: 8px 8px 0 0;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.5rem 1.1rem;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.header-phone:hover { background: var(--brand-dark); color: #fff; }
.header-phone svg { flex: none; }

.nav-toggle {
  display: none;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--brand-dark);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { background: var(--brand-tint); }

/* ---------- Hero ---------- */
.hero { padding: 3.5rem 0 4rem; overflow: hidden; }

/* ---------- Hero band ----------
   A warm photograph behind the headline, in the pattern of the competitor sites Dr. Lal
   referenced. The overlay does the load-bearing work: we do not control the pixels of a
   photograph, so the only way to guarantee the headline stays legible is to make the text side
   of the band effectively opaque navy. At 0.94 alpha the composite is within a hair of
   --brand-deep regardless of what is underneath, which is a measured 16.2:1 against white.
   Never lower the left-hand stop to let more photo through — that trades AA compliance for
   prettiness on a site that has an accessibility statement. */
.hero-band {
  position: relative;
  isolation: isolate;
  padding: 4.25rem 0 4.5rem;
  color: #fff;
  /* Solid ground behind the left of the band. On wide screens the photograph is inset from the
     left (below), so without this the copy would sit on nothing. */
  background: var(--brand-deep);
}
/* One column, since the portrait inset was removed on 2026-09-03. The copy is capped rather
   than allowed to span the container: long measure reads badly, and full-width text would cover
   the photograph the band exists to show. */
.hero-band .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-band .hero-grid > * { max-width: 34rem; }
.hero-band-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

@media (min-width: 901px) {
  /* Shift the photograph right so the couple clears the copy. object-position cannot do this:
     at wide viewports the band is a wider aspect than the image, so cover already fills the
     width edge to edge and there is no horizontal pan left to give. Insetting the media from
     the left is what actually moves the subjects across. The gradient is ~0.95 opaque at the
     seam, so the photo's left edge dissolves into the solid navy rather than showing a join. */
  .hero-band-media { left: 18%; }
}
.hero-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias toward the subjects, away from the sky. */
  object-position: 55% 42%;
}
.hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(15, 33, 56, 0.96) 0%,
    rgba(15, 33, 56, 0.94) 36%,
    rgba(15, 33, 56, 0.60) 52%,
    rgba(15, 33, 56, 0.34) 74%,
    rgba(15, 33, 56, 0.26) 100%
  );
}
.hero.hero-band h1,
.hero.hero-band .lead,
.hero.hero-band .lead strong,
.hero.hero-band .hero-note { color: #fff; }
.hero.hero-band .eyebrow { color: #f3c98a; }
.hero.hero-band .hero-note a,
.hero.hero-band .lead a { color: #fff; text-decoration-thickness: 2px; }


@media (max-width: 900px) {
  /* Stacked, the text no longer sits only on the left, so the overlay has to be uniformly
     dark rather than a gradient across the width. */
  .hero-band::after {
    background: linear-gradient(
      180deg,
      rgba(15, 33, 56, 0.95) 0%,
      rgba(15, 33, 56, 0.93) 55%,
      rgba(15, 33, 56, 0.88) 100%
    );
  }
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3rem;
  align-items: center;
}
.hero h1 { color: var(--brand-dark); margin-bottom: 0.5em; }
.hero .lead { margin-bottom: 1.6rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero-note { margin-top: 1.1rem; font-size: 0.95rem; color: var(--ink-soft); }


/* Page hero (interior pages) */
.page-hero {
  background:
    radial-gradient(circle at 90% -20%, rgba(201, 150, 46, 0.12), transparent 45%),
    var(--brand-tint);
  padding: 3rem 0 2.6rem;
  border-bottom: 1px solid var(--brand-tint-2);
}
.page-hero p.lead { max-width: var(--maxw-text); }

.breadcrumbs {
  font-size: 0.88rem;
  margin-bottom: 1.1rem;
  color: var(--ink-soft);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.35rem; color: var(--ink-soft); }
.breadcrumbs a { color: var(--brand); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.8rem 1.7rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-outline {
  background: transparent;
  color: var(--brand-dark);
  border-color: var(--brand);
}
.btn-outline:hover { background: var(--brand-tint); color: var(--brand-dark); }
.btn-light { background: #fff; color: var(--brand-dark); }
.btn-light:hover { background: var(--brand-tint); color: var(--brand-dark); }
/* White outline button, for the dark hero band only. It has to live HERE, after the base .btn
   rule that sets `border: 1.6px solid transparent` — declared earlier it lost the border-color
   on specificity ties and rendered as invisible-bordered text. */
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}
a.card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
a.card:hover {
  box-shadow: var(--shadow);
  border-color: var(--brand-tint-2);
  transform: translateY(-2px);
  color: var(--ink);
}
a.card:hover h3 { color: var(--brand); }
.card h3 { margin-bottom: 0.4em; }
.card .card-more {
  display: inline-block;
  margin-top: 0.6rem;
  font-weight: 700;
  color: var(--brand);
  font-size: 0.98rem;
}
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand-dark);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.card-icon svg { width: 28px; height: 28px; }

/* ---------- Photo placeholders (no stock, no AI people) ---------- */
.photo-ph {
  position: relative;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 20% 15%, rgba(201, 150, 46, 0.18), transparent 45%),
    linear-gradient(150deg, #3d648c 0%, var(--brand) 55%, var(--brand-dark) 100%);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.95);
  min-height: 240px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  padding: 1.5rem;
}
.photo-ph svg { width: 56px; height: 56px; opacity: 0.9; }
.ph-label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}
.photo-ph--wide { min-height: 220px; }

/* ---------- Physician portrait ----------
   Dr. Lal's headshot is a studio shot on a dark charcoal backdrop. Dropped in as a plain
   rectangle on the warm paper background it reads as pasted-on, and a hard circle crop cuts
   his shoulders off at an arbitrary line. So the portrait is composited onto the same teal
   panel the placeholder used, and its edges are dissolved with a radial mask: no crop line,
   no corner, the photograph just fades into brand colour.

   The mask is CSS rather than baked into the file on purpose — the stored asset stays an
   ordinary photograph we could hand back to the practice, and the framing can be retuned
   without re-exporting. Where masks are unsupported the image degrades to a rounded panel,
   which is tidy rather than broken. */
.doctor-portrait {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 12%, rgba(201, 150, 46, 0.20), transparent 46%),
    linear-gradient(150deg, #3d648c 0%, var(--brand) 55%, var(--brand-dark) 100%);
  box-shadow: var(--shadow-sm);
}

.doctor-portrait img {
  display: block;
  width: 100%;
  height: auto;
  /* Opaque through his face and shoulders, fully transparent BEFORE any edge.
     The radii are percentages of the box measured from the centre outwards, so 50% reaches
     the left/right edge exactly — anything larger and the fade runs off the box and you get
     the hard rectangle this treatment exists to avoid. Keeping the final stop at 90% of a
     50%/54% ellipse lands the last of the image ~45% out, leaving a clean band of panel all
     the way round. Centred at 42% height because the subject sits high in the frame. */
  -webkit-mask-image: radial-gradient(ellipse 50% 54% at 50% 42%,
              #000 30%, rgba(0, 0, 0, 0.6) 66%, rgba(0, 0, 0, 0) 90%);
          mask-image: radial-gradient(ellipse 50% 54% at 50% 42%,
              #000 30%, rgba(0, 0, 0, 0.6) 66%, rgba(0, 0, 0, 0) 90%);
}

/* Warms the dissolve. Without this the charcoal backdrop greys out as it fades; this pulls the
   transition toward the panel's teal so the two never disagree about colour. Sits above the
   image, transparent over the face, so it tints only what is already dark. */
.doctor-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 52% 56% at 50% 42%,
              rgba(68, 105, 105, 0) 34%, rgba(68, 105, 105, 0.45) 72%, rgba(47, 81, 81, 0.72) 95%);
  pointer-events: none;
}

/* A caption under the portrait, when one is used. */
.doctor-portrait figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.4rem 1.1rem 0.95rem;
  background: linear-gradient(to top, rgba(34, 64, 63, 0.82), rgba(34, 64, 63, 0));
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .doctor-portrait img { transition: transform 400ms ease; }
  .doctor-portrait:hover img { transform: scale(1.015); }
}

/* ---------- eGFR scale diagram ----------
   Sits where the "illustration coming soon" placeholder used to, and reuses the placeholder's
   own panel treatment so the section's composition is unchanged. Labels are SVG <text>, so they
   scale, stay selectable, and are read aloud in order — an exported PNG would be none of those. */
.egfr-scale {
  margin: 0;
  padding: 1.6rem 1.5rem 1.4rem;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 18% 12%, rgba(224, 138, 30, 0.16), transparent 46%),
    linear-gradient(150deg, #3d648c 0%, var(--brand) 55%, var(--brand-dark) 100%);
  box-shadow: var(--shadow-sm);
}
.egfr-scale svg { display: block; }

.egfr-title {
  fill: #fff;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}
/* 15.9:1 on the panel — these carry the meaning, so they are the highest contrast on the graphic. */
.egfr-stage-no {
  fill: #fff;
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}
.egfr-range {
  fill: #eaf1f8;
  font-size: 13px;
  text-anchor: middle;
}
.egfr-axis {
  fill: #d7e3f0;  /* 4.75:1 on the panel's lightest stop */
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.egfr-pointer {
  stroke: #f9e0b6;
  stroke-width: 2;
  stroke-linecap: round;
}
.egfr-callout {
  fill: #f9e0b6;  /* 4.81:1 on the panel's lightest stop */
  font-size: 14px;
  font-weight: 700;
}
.egfr-callout-sub {
  fill: #dbe6f2;
  font-size: 13px;
}

/* ---------- Collapsed request preview ----------
   The disabled appointment form is honest but it is not the action anyone came for, so it sits
   behind a <details> and the phone number leads instead. Native element on purpose: it works
   with JavaScript off, is keyboard operable and announced correctly, and needs no script on a
   site whose CSP blocks inline handlers anyway. */
.request-preview {
  border: 1px solid var(--brand-tint-2);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 0.9rem 1.1rem;
  margin-top: 1.6rem;
}
.request-preview > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-dark);
  /* A 44px target, per the same rule the sticky bar follows. */
  padding: 0.45rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.request-preview > summary:hover { color: var(--brand); }
.request-preview[open] > summary { margin-bottom: 0.4rem; }

/* ---------- Feature / checklist lists ---------- */
.check-list { list-style: none; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.7em;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* ---------- Notice / callout boxes ---------- */
.notice {
  border-left: 5px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
}
.notice-amber {
  border-left-color: var(--amber);
  background: var(--amber-tint);
}
.notice-amber strong { color: var(--amber-deep); }
.notice p { margin-bottom: 0.4em; }

/* Emergency strip */
.emergency {
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-top: 1px dashed var(--line);
  padding-top: 1rem;
  margin-top: 2rem;
}

/* ---------- Byline (medical review) ---------- */
.byline {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.2rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 1.4rem 0;
}
.byline .byline-mark {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  display: grid;
  place-items: center;
}

/* ---------- Location blocks ---------- */
.loc-card address { font-style: normal; margin-bottom: 0.8rem; }
.map-ph {
  border-radius: var(--radius-sm);
  min-height: 180px;
  background:
    linear-gradient(rgba(68, 105, 105, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68, 105, 105, 0.08) 1px, transparent 1px),
    linear-gradient(160deg, #eef4f3, #dcE8e6);
  background-size: 26px 26px, 26px 26px, cover;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4rem;
  color: var(--brand-dark);
  border: 1px solid var(--brand-tint-2);
  margin: 1rem 0;
  text-align: center;
}
.map-ph svg { width: 34px; height: 34px; }
.map-ph span { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.hours-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px dashed var(--line);
  padding: 0.4rem 0;
  margin: 0;
  font-size: 1rem;
}

/* ---------- Testimonials placeholder ---------- */
.review-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.review-stars {
  color: var(--amber-deep);
  letter-spacing: 0.15em;
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}
.review-card blockquote { margin: 0 0 0.8rem; font-style: italic; color: var(--ink-soft); }
.review-card cite { font-style: normal; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- FAQs (details/summary) ---------- */
details.faq {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.8rem;
  overflow: hidden;
}
details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.3rem;
  font-weight: 700;
  color: var(--brand-dark);
  position: relative;
  min-height: 44px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--amber-deep);
  font-family: var(--font-body);
}
details.faq[open] summary::after { content: "–"; }
details.faq summary:hover { background: var(--brand-tint); }
details.faq .faq-body { padding: 0 1.3rem 1.2rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: 1.4rem 0; }
table.data {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}
table.data th, table.data td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
table.data th { background: var(--brand-tint); color: var(--brand-dark); font-family: var(--font-body); }
table.data tr:last-child td { border-bottom: none; }

/* ---------- Forms (disabled mockup) ---------- */
.form-mock { max-width: 40rem; }
.form-mock fieldset { border: none; padding: 0; margin: 0; }
.form-row { margin-bottom: 1.1rem; }
.form-row label { display: block; font-weight: 700; margin-bottom: 0.35rem; color: var(--brand-dark); font-size: 1rem; }
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--brand-tint-2);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.form-row textarea { min-height: 100px; resize: vertical; }
.form-mock fieldset:disabled input,
.form-mock fieldset:disabled select,
.form-mock fieldset:disabled textarea,
.form-mock fieldset:disabled button {
  background: #f1efe9;
  cursor: not-allowed;
  color: var(--ink-soft);
}

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(circle at 85% 20%, rgba(201, 150, 46, 0.25), transparent 45%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 2.6rem 2rem;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.92); max-width: 42rem; margin-left: auto; margin-right: auto; }
.cta-band .btn { margin-top: 1rem; }
.cta-band a:not(.btn) { color: #fff; font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--brand-deep);
  color: #cfe0de;
  margin-top: 4rem;
  padding: 3rem 0 1.5rem;
  font-size: 0.98rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.9fr;
  gap: 2.2rem;
  padding-bottom: 2rem;
}
.site-footer h2, .site-footer h3 {
  color: #fff;
  font-size: 1.02rem;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.site-footer a { color: #e9f2f1; }
.site-footer a:hover { color: #fff; }
.site-footer address { font-style: normal; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5em; }
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 0.6rem;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: space-between;
  font-size: 0.88rem;
  color: #b7cdca;
}

/* ---------- Sticky mobile action bar ---------- */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: none;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(34, 64, 63, 0.14);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 60px;
  padding: 0.5rem 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: none;
}
.mobile-bar a svg { width: 22px; height: 22px; }
.mobile-bar a:hover { background: var(--brand-tint); }
.mobile-bar .bar-primary {
  background: var(--brand);
  color: #fff;
}
.mobile-bar .bar-primary:hover { background: var(--brand-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .site-nav a { padding: 0.6rem 0.45rem; font-size: 0.9rem; }
  .brand-sub { display: none; } /* reclaim width for the nav before it can crowd */
}

@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  /* Collapse to the menu button while labels still fit comfortably on one line */
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 0; }
  .site-nav a {
    display: block;
    padding: 0.85rem 1.5rem;
    font-size: 1.05rem;
    min-height: 48px;
    border-radius: 0;
    white-space: normal;
  }
  .site-nav a[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--amber);
    background: var(--brand-tint);
    border-radius: 0;
  }
  .brand-sub { display: block; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Collapsible nav */
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 0; }
  .site-nav a {
    display: block;
    padding: 0.85rem 1.5rem;
    font-size: 1.05rem;
    min-height: 48px;
    border-radius: 0;
  }
  .site-nav a[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--amber);
    background: var(--brand-tint);
    border-radius: 0;
  }
  .header-phone .phone-number { display: none; } /* icon + "Call" on small screens */
}

@media (max-width: 767px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mobile-bar { display: flex; }
  .section { padding: 2.6rem 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .cta-band { padding: 2rem 1.3rem; }
  .hero { padding: 2.4rem 0 2.8rem; }
}

@media (min-width: 768px) {
  .mobile-bar { display: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-bar, .cta-band, .nav-toggle { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
}