/* Zion Care Services — homepage brand layer
 *
 * Purpose: neutralise the inherited dermatology template's decoration (peach
 * arches, swirls, leaves, glitter) and present the brand kit's white / gold /
 * charcoal palette in a calm, professional way.
 *
 * Design language is taken from the logo: warm gold, deep charcoal, generous
 * white space, softly rounded forms. Gold is an accent — rules, toppers, one
 * CTA — never a frame around everything.
 */

:root {
  /* Brand kit. The gold runs bright — it is a lit metal, not a flat ochre —
     with a specular top (`lite`) and a shaded bottom (`edge`) so gradients
     can read as a curved, polished surface rather than a colour wash.
     `deep` stays dark: it is the only one used for small text on white
     (4.7:1), and brightening it would take that below AA. */
  --zion-gold: #e0b23f;
  --zion-gold-bright: #f2cf6d;
  --zion-gold-lite: #fdf1c8;   /* specular highlight */
  --zion-gold-edge: #c08f28;   /* shaded lower edge */
  --zion-gold-deep: #946d26;   /* accessible on white for small text */
  --zion-gold-pale: #f6ecd0;
  --zion-charcoal: #242c2c;
  --zion-black: #141414;
  --zion-white: #ffffff;
  --zion-cream: #f6f7f8;       /* very light neutral grey — alternating section tone
                                  (name kept for compatibility; no longer cream) */
  --zion-cream-deep: #eef0f2;
  /* Half-and-half band used by #why-choose-us */
  --zion-band-top: #f6f7f8;
  --zion-band-bottom: #ffffff;
  --zion-ink: #4c5352;
  --zion-ink-soft: #6b7271;
  --zion-rule: rgba(36, 44, 44, 0.12);
  --zion-rule-gold: rgba(224, 178, 63, 0.32);

  /* Polished gold face, lit from above: specular cap, body, shaded edge.
     The shading is kept to the bottom fifth — spread any further and the
     pill reads brown rather than bright. */
  --zion-gloss: linear-gradient(
    180deg,
    var(--zion-gold-lite) 0%,
    var(--zion-gold-bright) 32%,
    var(--zion-gold) 80%,
    var(--zion-gold-edge) 100%
  );
  --zion-gloss-shadow:
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.85),
    inset 0 -0.0625rem 0 rgba(140, 102, 24, 0.32),
    0 0.375rem 0.75rem rgba(180, 132, 28, 0.22);
  --zion-gloss-shadow-hover:
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.95),
    inset 0 -0.0625rem 0 rgba(140, 102, 24, 0.26),
    0 0.5rem 1.125rem rgba(180, 132, 28, 0.32);

  /* One period of an ECG trace, used as a mask so the fill colour still comes
     from `background`. Tile is 88x12 user units == 5.5rem x 0.75rem at 16px,
     so it repeats seam-to-seam at its natural size. */
  --zion-ecg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 H26 L29 4.5 L31.5 7.5 L34 1.2 L36.5 10.8 L39 6 L41.5 5 L44 6 H72' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --zion-ecg-tile: 4.5rem;

  /* Softly rounded, not arched and not chamfered */
  --zion-r-lg: 0.875rem;
  --zion-r-md: 0.625rem;
  --zion-r-sm: 0.5rem;

  --zion-shadow: 0 1.25rem 2.5rem rgba(20, 20, 20, 0.09);
  --zion-shadow-sm: 0 0.5rem 1.25rem rgba(20, 20, 20, 0.06);

  /* Template variables remapped onto the brand */
  --primary: #e0b23f;
  --primaryLight: #f6ecd0;
  --secondary: #e0b23f;
  --secondaryLight: #fdf1c8;
  --headerColor: #242c2c;
  --bodyTextColor: #4c5352;
  --bodyTextColorWhite: #ffffff;
  --dark: #141414;
  --medium: #242c2c;
  --accent: #f2cf6d;
  --light: #ffffff;
  --lightGrey: #f3f3f0;
  --tertiary: #fdf6e6;
  --primaryShade: #a97f22;
  --secondaryShade: #a97f22;
  --secondaryDark: #a97f22;
  --headerColorWhite: #ffffff;
  --darkText: #242c2c;
}

body {
  background: var(--zion-white);
  color: var(--zion-ink);
}

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

.cs-topper {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--zion-gold-deep);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cs-topper::before {
  content: "";
  width: 1.5rem;
  height: 0.125rem;
  background: var(--zion-gold);
  border-radius: 1px;
  flex: none;
}

/* Centred sections need the rule centred with the text, not floated left */
#why-choose-us .cs-topper,
#services .cs-topper,
#reviews .cs-topper,
#faq .cs-topper {
  justify-content: center;
}

.cs-title {
  color: var(--zion-charcoal);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.cs-text,
.cs-text-large,
.cs-item-text {
  color: var(--zion-ink);
}

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

/* Pill CTAs — the template's signature button, recast in brand colors.
 * Solid: polished gold pill, charcoal label.
 * Transparent (hero "Call Us"): gold circle bubble with a white ring; its
 * white pill backing grows across the whole button on hover.
 *
 * The pill is glossy rather than flat: a vertical gradient from a specular
 * cap down to a shaded edge, a hairline white bevel along the top, a soft
 * gold ground-glow, and a diagonal glare that sweeps across on hover.
 *
 * The label is charcoal, not white, in both states — on this gold white
 * lands at 1.9:1, charcoal at 7.2:1. This layer owns both pseudo-elements
 * outright (root.css defines its own sweep on them; home-brand loads after,
 * so redefining them here is what actually reaches the screen).
 */
.cs-button-solid,
#navigation .cs-button-solid {
  min-height: 3.25rem;
  padding: 0 1.875rem;
  background: var(--zion-gloss);
  color: var(--zion-charcoal);
  border: 0;
  border-radius: 6.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  line-height: 3.25rem;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--zion-gloss-shadow);
  position: relative;
  z-index: 1;
  transition: color 0.3s, box-shadow 0.3s, transform 0.2s;
}

/* Specular cap: the top half of the pill catching the light. Its lower
   corners are rounded off so the highlight fades into the body instead of
   ending on a hard horizon. */
.cs-button-solid::before,
#navigation .cs-button-solid::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: 52%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.12) 62%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 6.25rem 6.25rem 50% 50% / 6.25rem 6.25rem 100% 100%;
  opacity: 1;
  transform: none;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: -1;
}

/* Glare: a narrow diagonal band parked off the left edge, thrown across the
   face on hover. Overscanned on both axes so the band clears the corners. */
.cs-button-solid::after,
#navigation .cs-button-solid::after {
  content: "";
  display: block;
  position: absolute;
  inset: -25% -60%;
  background: linear-gradient(
    102deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0;
  transform: translateX(-85%);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s;
  pointer-events: none;
  z-index: -1;
}

.cs-button-solid:hover,
#navigation .cs-button-solid:hover {
  color: var(--zion-charcoal);
  box-shadow: var(--zion-gloss-shadow-hover);
  transform: translateY(-0.0625rem);
}

.cs-button-solid:hover::before,
#navigation .cs-button-solid:hover::before {
  opacity: 0.75;
}

.cs-button-solid:hover::after,
#navigation .cs-button-solid:hover::after {
  opacity: 1;
  transform: translateX(85%);
}

.cs-button-solid:active,
#navigation .cs-button-solid:active {
  transform: translateY(0);
  box-shadow: var(--zion-gloss-shadow);
}

/* Outline pills fill with the same polished gold. Their resting label has to
   stay `deep` — the bright gold is 2.1:1 on white as text. */
.cs-button-outline,
.button-transparent,
.cs-button-solid.cs-outline {
  color: var(--zion-gold-deep);
}

.cs-button-outline:hover,
.button-transparent:hover,
.cs-button-solid.cs-outline:hover {
  background: var(--zion-gloss);
  border-color: var(--zion-gold-edge);
  color: var(--zion-charcoal);
  box-shadow: var(--zion-gloss-shadow);
}

.cs-button-transparent {
  width: auto;
  min-width: 0;
  height: clamp(2.875rem, 5.5vw, 3.5rem);
  padding: 0 1.5rem 0 0;
  background: transparent;
  color: var(--zion-charcoal);
  border: 0;
  border-radius: 6.25rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: clamp(2.875rem, 5.5vw, 3.5rem);
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  z-index: 1;
}

.cs-button-transparent::before {
  content: "";
  display: block;
  width: clamp(2.875rem, 5.5vw, 3.5rem);
  background: var(--zion-white);
  opacity: 1;
  border-radius: 6.25rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: width 0.3s, box-shadow 0.3s;
}

.cs-button-transparent:hover::before {
  width: 100%;
  box-shadow: var(--zion-shadow-sm);
}

/* root.css turns this button gold-on-white on hover, which fights the white
 * pill growing underneath it — the label disappeared as the pill arrived.
 * Keep the ground clear and the label charcoal, in both themes: the pill is
 * white either way, so the text must be dark either way. The #hero copy wins
 * on specificity so it does not depend on stylesheet load order. */
#hero .cs-button-transparent:hover,
.cs-button-transparent:hover {
  color: var(--zion-charcoal);
  background-color: transparent;
  border-color: transparent;
}

.cs-button-picture,
#hero .cs-button-picture {
  width: clamp(2.875rem, 5.5vw, 3.5rem);
  height: clamp(2.875rem, 5.5vw, 3.5rem);
  margin-right: 0.75rem;
  box-sizing: border-box;
  /* Lit from the upper left so the bubble reads as a sphere, not a disc */
  background: radial-gradient(
    circle at 33% 27%,
    var(--zion-gold-lite) 0%,
    var(--zion-gold-bright) 34%,
    var(--zion-gold) 68%,
    var(--zion-gold-edge) 100%
  );
  border: 6px solid var(--zion-white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  box-shadow: 0 0.375rem 0.875rem rgba(196, 145, 32, 0.38);
  transition: transform 0.3s, box-shadow 0.3s;
}

.cs-button-transparent:hover .cs-button-picture {
  transform: scale(1.06);
  box-shadow: 0 0.5rem 1.25rem rgba(196, 145, 32, 0.5);
}

.cs-button-image {
  width: 1rem;
  height: auto;
  display: block;
}

.cs-button-solid:focus-visible,
.cs-button-transparent:focus-visible,
#faq .cs-button:focus-visible,
#contact .cs-input:focus-visible,
.cs-li-link:focus-visible {
  outline: 3px solid var(--zion-gold-bright);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------- Navigation */

#navigation {
  background: var(--zion-white);
  border-bottom: 1px solid var(--zion-rule);
  box-shadow: 0 0.25rem 1.25rem rgba(20, 20, 20, 0.05);
}

#navigation .cs-mobile-phone {
  background: var(--zion-charcoal);
  border-bottom: 1px solid var(--zion-gold);
}

#navigation .cs-phone {
  color: var(--zion-white);
  font-weight: 600;
  letter-spacing: 0.03em;
}

#navigation .cs-line {
  border-radius: 2px;
  background: var(--zion-charcoal);
}

#navigation .cs-toggle {
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-sm);
}

/* A hairline and a real shadow do the separating here. The gold in this
   panel belongs on the item you are pointing at, not welded to its top edge. */
#navigation .cs-drop-ul {
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-sm);
  box-shadow: var(--zion-shadow);
  overflow: hidden;
}

#navigation .cs-li-link.cs-drop-link:hover,
#navigation .cs-li-link.cs-drop-link:focus {
  background: var(--zion-cream);
  color: var(--zion-charcoal);
}

#navigation .cs-li-link:hover,
#navigation .cs-li-link.cs-active {
  color: var(--zion-gold-deep);
}

/* ----------------------------------------------- Heartbeat nav underline
 * The desktop underline is an ECG trace rather than a plain rule: the flat
 * 2px bar is swapped for a taller strip masked by one period of a cardiac
 * waveform, so the "line" is the trace itself and the gold comes from
 * `background` (the mask only carves the shape).
 *
 * Two things happen on hover: the strip still wipes open left-to-right, and
 * the mask scrolls by exactly one tile per cycle, which makes the pulse run
 * along the underline continuously with no visible seam.
 *
 * Scoped to the top-level links only — dropdown items get a background tint
 * instead, and local.css already hides their ::before on desktop.
 */
@media only screen and (min-width: 64rem) {
  #navigation .cs-ul > .cs-li > .cs-li-link::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -0.6rem;
    width: 0;
    height: 0.75rem;
    background: var(--zion-gold);
    opacity: 1;
    -webkit-mask-image: var(--zion-ecg);
    mask-image: var(--zion-ecg);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: var(--zion-ecg-tile) 0.75rem;
    mask-size: var(--zion-ecg-tile) 0.75rem;
    -webkit-mask-position: 0 center;
    mask-position: 0 center;
    transition: width 0.32s ease;
  }

  #navigation .cs-ul > .cs-li > .cs-li-link:hover::before,
  #navigation .cs-ul > .cs-li > .cs-li-link:focus-visible::before,
  #navigation .cs-ul > .cs-li > .cs-li-link.cs-active::before {
    width: 100%;
  }

  /* Only the hovered link beats — a permanently animating current-page
     marker would pull the eye off whatever the visitor is pointing at. */
  #navigation .cs-ul > .cs-li > .cs-li-link:hover::before,
  #navigation .cs-ul > .cs-li > .cs-li-link:focus-visible::before {
    animation: zion-ecg-run 1.15s linear infinite;
  }

  body.dark-mode #navigation .cs-ul > .cs-li > .cs-li-link::before {
    background: var(--zion-gold-bright);
  }
}

/* One tile per cycle — any other distance would show a seam on the loop. */
@keyframes zion-ecg-run {
  from {
    -webkit-mask-position: 0 center;
    mask-position: 0 center;
  }
  to {
    -webkit-mask-position: calc(var(--zion-ecg-tile) * -1) center;
    mask-position: calc(var(--zion-ecg-tile) * -1) center;
  }
}

/* One clean row: logo | links | language | theme toggle | CTA.
 * The template never made .cs-nav a flex row, so the cart button and the
 * language switcher stacked underneath the links as a ragged second tier. */
#navigation .cs-nav {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: nowrap;
}

/* Mobile cluster reads flag | moon | hamburger, all centred on one row */
@media only screen and (max-width: 63.999rem) {
  #navigation .cs-toggle {
    order: 99;
    margin: 0;
  }
}

/* A retail cart has no business in a home-care header (the shop stays
 * reachable from its own pages) */
#navigation .cs-cart-icon {
  display: none !important;
}

/* Compact flag-only language toggle (full names stay in the dropdown) */
#navigation .language-switcher {
  flex: none;
}

#navigation .language-switcher-toggle {
  height: 2.5rem;
  padding: 0 0.375rem;
  background: transparent;
  border: 0;
  color: var(--zion-ink);
}

#navigation .language-switcher-toggle .language-flag {
  font-size: 1.375rem;
}

#navigation .language-code,
#navigation .language-chevron {
  display: none;
}

/* The theme toggle now lives inside the nav cluster — in flow, not pinned
   to hard-coded offsets. Its icons are absolutely centred within it, so it
   stays position:relative. */
#navigation #dark-mode-toggle {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

@media only screen and (min-width: 64rem) {
  #navigation .cs-container {
    gap: 1rem;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 5.25rem;
  }

  /* The link row must actually fit its box — slightly smaller type, tighter
     gaps, and no "Home" link (the logo is the home link) */
  #navigation .cs-ul {
    gap: clamp(0.625rem, 1.2vw, 1.5rem);
    flex-wrap: nowrap;
  }

  #navigation .cs-li-link {
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  #navigation .cs-li:first-child {
    display: none;
  }

  #navigation .cs-logo {
    padding-right: 1rem;
  }

  #navigation .cs-nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }

  /* True-centre the link row in the bar. Centring it inside the leftover
     flex space would bias it, because the logo and the CTA are different
     widths — so pin it to the container's midpoint instead. The dropdown
     panel styling only exists below 64rem, so nothing here conflicts. */
  #navigation .cs-container {
    position: relative;
  }

  #navigation .cs-ul-wrapper {
    width: auto;
    background: transparent;
    box-shadow: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Between the hamburger breakpoint and full desktop there is not enough
   width for links + CTA; the assessment CTA is duplicated in the hero, so
   the bar keeps the links and drops the button */
@media only screen and (min-width: 64rem) and (max-width: 79.999rem) {
  #navigation .cs-nav-button {
    display: none;
  }
}

/* --------------------------------------------------------------- Logo lockup
 * The brand kit ships a square stacked lockup, too tall for a nav bar. We use
 * the mark on its own beside a typeset wordmark that mirrors the logo's
 * charcoal "Zion" / gold "Care" split.
 */

#navigation .cs-logo {
  width: auto;
  max-width: none;
  justify-content: flex-start;
  flex: none;
  padding-right: 1.5rem;
  text-decoration: none;
}

.cs-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  line-height: 1;
  white-space: nowrap;
  /* Anchor + clipping box for the glare below. The padding buys room for the
     mark's glow, and the matching negative margin keeps the lockup occupying
     exactly the space it did before. */
  position: relative;
  padding: 0.375rem 0.5rem;
  margin: -0.375rem -0.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  isolation: isolate;
}

/* Glare across the whole lockup on hover — mark and wordmark together, so it
   reads as light moving over one object rather than two effects firing. */
.cs-logo-lockup::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    104deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(255, 255, 255, 0) 58%
  );
  opacity: 0;
  transform: translateX(-80%);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s;
  pointer-events: none;
  z-index: 2;
}

.cs-logo:hover .cs-logo-lockup::after,
.cs-logo:focus-visible .cs-logo-lockup::after {
  opacity: 1;
  transform: translateX(80%);
}

/* local.css sets `#navigation .cs-logo img{width:100%;height:100%}` and a
   dark-mode invert filter — both have to be beaten here. (Dark mode is
   handled separately further down, where the nav lockup's filters are
   untangled from the wordmark.) */
/* The mark is a PNG, so its polish has to come from filters.
 *
 * The artwork's gold is #BF9245 — hue 38°, a good five degrees warmer than
 * the brand gold #E0B23F beside it, which is why it reads orange rather than
 * gold. Saturating it (the obvious "make it brighter" move) only drives that
 * amber harder: saturate(1.45) took it to hue 38° at 87% saturation, i.e.
 * straight orange.
 *
 * So the correction is mostly hue, not saturation. This chain solves to
 * rgb(225,174,63) — hue 41°, within ~2° of the wordmark's gold — instead of
 * the rgb(239,163,33) the saturation-led version produced.
 * (The `!important` beats local.css's greyscale/invert on the anchor.)
 */
.cs-logo-mark,
#navigation .cs-logo img.cs-logo-mark,
#footer .cs-logo img.cs-logo-mark {
  height: 2.625rem !important;
  width: auto !important;
  max-width: none;
  flex: none;
  display: block;
  object-fit: contain;
  filter: saturate(1.15) hue-rotate(4deg) brightness(1.18)
          drop-shadow(0 0.0625rem 0.1875rem rgba(180, 132, 28, 0.35)) !important;
  transition: filter 0.35s;
}

.cs-logo:hover .cs-logo-mark {
  filter: saturate(1.2) hue-rotate(4deg) brightness(1.24)
          drop-shadow(0 0.0625rem 0.3125rem rgba(196, 145, 32, 0.5)) !important;
}

.cs-logo-word {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cs-logo-name {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cs-logo-zion { color: var(--zion-charcoal); font-weight: 400; }

/* "Care" is the gold half of the lockup, so it carries the gloss: a metal
   gradient painted through the glyphs, drifting slowly so the highlight
   travels across the word.
   The gradient repeats on an 8em period and the animation shifts it by
   exactly 8em, which is what makes the loop seamless — hence em stops and a
   90deg axis, where an x-shift maps 1:1 onto gradient phase. The solid
   `color` underneath is the fallback wherever background-clip:text is not
   honoured. */
.cs-logo-care {
  color: var(--zion-gold);
  font-weight: 800;
  background: repeating-linear-gradient(
    90deg,
    var(--zion-gold) 0em,
    var(--zion-gold-bright) 1.4em,
    var(--zion-gold-lite) 2.2em,
    var(--zion-gold-bright) 3em,
    var(--zion-gold) 4.4em,
    var(--zion-gold) 8em
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: zion-gold-drift 7s linear infinite;
}

@keyframes zion-gold-drift {
  from { background-position: 0 0; }
  to   { background-position: 8em 0; }
}

.cs-logo-sub {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--zion-ink-soft);
}

#footer .cs-logo-lockup .cs-logo-zion { color: var(--zion-white); }
#footer .cs-logo-lockup .cs-logo-sub { color: rgba(255, 255, 255, 0.62); }

/* Same gloss, pitched up a stop: the footer ground is charcoal, where the
   shaded end of the nav gradient would read as a dead spot in the word. */
#footer .cs-logo-lockup .cs-logo-care {
  color: var(--zion-gold-bright);
  background: repeating-linear-gradient(
    90deg,
    var(--zion-gold-bright) 0em,
    var(--zion-gold-lite) 2.2em,
    var(--zion-gold-bright) 4.4em,
    var(--zion-gold) 6.2em,
    var(--zion-gold-bright) 8em
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* local.css whites out the entire nav lockup in dark mode with a filter on
 * the anchor — and a filter on an ancestor takes the wordmark's gold with it,
 * whatever colour the type is given. Scope the white-out to the mark image,
 * whose charcoal figures would otherwise disappear against the charcoal bar,
 * and let the type keep its own colours. */
body.dark-mode #navigation .cs-logo {
  filter: none !important;
}

body.dark-mode #navigation .cs-logo img.cs-logo-mark {
  filter: grayscale(1) brightness(1000%) !important;
}

/* Footer lockup runs much larger — the column has the vertical room, so the
   footer itself doesn't grow */
#footer .cs-logo img.cs-logo-mark { height: 8.5rem !important; }

/* Wider inset than the nav lockup: the footer mark carries a much broader
   glow, and the lockup clips its own overflow for the glare sweep. */
#footer .cs-logo-lockup-footer {
  gap: 1.25rem;
  padding: 1rem;
  margin: -1rem;
}

#footer .cs-logo-lockup-footer .cs-logo-name {
  font-size: 2rem;
}

#footer .cs-logo-lockup-footer .cs-logo-sub {
  font-size: 0.875rem;
  letter-spacing: 0.4em;
}

body.dark-mode .cs-logo-zion { color: var(--zion-white); }
body.dark-mode .cs-logo-sub { color: rgba(255, 255, 255, 0.62); }

/* The template greyscales any footer logo image — keep the mark in colour,
   and give it the same lift as the nav mark (the white-on-dark artwork takes
   a warmer glow so it does not read as a flat cutout). */
#footer .cs-logo {
  filter: none !important;
}

/* Same hue correction as the nav mark — the artwork is the same amber, and
   next to the wordmark's gold it reads orange here too. */
#footer .cs-logo .cs-logo-mark {
  filter: saturate(1.15) hue-rotate(4deg) brightness(1.18)
          drop-shadow(0 0 0.75rem rgba(242, 207, 109, 0.4)) !important;
}

@media only screen and (max-width: 63.9375rem) {
  #navigation .cs-logo img.cs-logo-mark { height: 2.25rem !important; }
  .cs-logo-name { font-size: 1rem; }
  .cs-logo-sub { font-size: 0.5938rem; letter-spacing: 0.3em; }
}

/* ------------------------------------------------------ Shared image treatment
 * One consistent frame: soft radius, hairline, gentle shadow. No gold plating,
 * no notched corners, no 260px arches.
 */

#hero .cs-picture,
#side-by-side .cs-picture,
#why-choose-us .cs-image,
#services .cs-item,
#reviews .cs-picture,
#faq .cs-picture,
#contact .cs-picture {
  border-radius: var(--zion-r-lg) !important;
  border: 0 !important;
  clip-path: none !important;
  overflow: hidden;
  box-shadow: var(--zion-shadow);
  background: var(--zion-cream-deep);
}

/* Strip every inherited decorative graphic and background plate */
.cs-graphic,
.cs-floater,
#hero .cs-brown-lines,
#reviews .cs-flower,
#reviews .cs-sense,
#reviews .cs-waves,
#services .cs-graphic1,
#services .cs-graphic2,
#side-by-side .cs-glitter,
#hero .cs-background,
#why-choose-us .cs-background,
#services .cs-background,
#contact .cs-background {
  display: none !important;
}

/* Videos on this page all point at the previous owner's CDN — hide the
   play affordance so nothing invites a click into dermatology footage. */
.cs-play,
.cs-toggle-subtitles,
#hero .cs-video-wrapper {
  display: none !important;
}

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

/* The nav is fixed and stacks to ~173px below 64rem, so the hero must clear
   that or the topper slides underneath it. */
#hero {
  padding-top: 13rem;
  background: var(--zion-white);
  background-image: none;
}

@media only screen and (min-width: 64rem) {
  #hero {
    padding-top: clamp(9rem, 11vw, 11rem);
  }
}

#hero::before {
  background: linear-gradient(180deg, var(--zion-cream) 0%, var(--zion-white) 62%);
  opacity: 1;
}

#hero .cs-content {
  border-left: 0;
  padding-left: 0;
}

#hero .cs-title {
  max-width: 15ch;
  margin-bottom: 1.5rem;
}

#hero .cs-text {
  max-width: 46ch;
}

#hero .cs-buttons {
  gap: 0.75rem;
}

#hero .cs-info {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--zion-rule-gold);
}

#hero .cs-address {
  color: var(--zion-charcoal);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}

#hero .cs-picture {
  width: 32.625em;
  height: 100%;
  inset: 0 0 auto auto;
  border-radius: var(--zion-r-lg) !important;
}

/* A single restrained gold rule offset behind the hero photo */
#hero .cs-image-group::after {
  content: "";
  width: 62%;
  height: 62%;
  border: 1px solid var(--zion-gold);
  border-radius: var(--zion-r-lg);
  position: absolute;
  right: -1.25em;
  bottom: -1.25em;
  z-index: -1;
  pointer-events: none;
}

/* ------------------------------------------------- Trust strip (was logo wall) */

/* Sits directly under the hero, so it is banded top and bottom: the section
   that follows it (#services) is white too, and without the lower rule the
   strip would bleed into the services heading. */
#hero-2 {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--zion-white);
  border-top: 1px solid var(--zion-rule);
  border-bottom: 1px solid var(--zion-rule);
}

#hero-2 .cs-container {
  max-width: 80rem;
  margin: auto;
}

#hero-2 .cs-logo-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}

/* A rule beside text is a typographic convention rather than an accent bar,
   so it stays — but it fades out down its length instead of sitting there as
   a solid gold slab. */
#hero-2 .cs-trust {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-left: 1rem;
  border-left: 2px solid transparent;
  border-image: linear-gradient(
      180deg,
      var(--zion-gold) 0%,
      rgba(224, 178, 63, 0.22) 100%
    ) 1;
}

#hero-2 .cs-trust-title {
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--zion-charcoal);
}

#hero-2 .cs-trust-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--zion-ink-soft);
  margin: 0;
}

/* Five columns only once there is real width for them; at tablet sizes the
   strip runs 3-up (2 + 3) rather than squeezing five 150px columns. */
@media only screen and (min-width: 48rem) {
  #hero-2 .cs-logo-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (min-width: 75rem) {
  #hero-2 .cs-logo-wrapper {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* -------------------------------------------------------------------- About */

/* Opens the tinted band that carries through to #why-choose-us */
#side-by-side {
  background: var(--zion-band-top);
  position: relative;
}

#side-by-side .cs-picture-small {
  clip-path: none !important;
  border-radius: var(--zion-r-lg) !important;
  border: 4px solid var(--zion-white) !important;
}

#side-by-side .cs-logo-container {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--zion-rule);
}

#side-by-side .cs-logo-title {
  color: var(--zion-charcoal);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}

/* ------------------------------------------------------------ Why choose us */

/* The tinted band stops partway down, so the cards and the centre photo
 * straddle the colour change instead of sitting in a closed box — the page
 * reads as one continuous flow rather than a stack of panels. */
#why-choose-us {
  padding-bottom: clamp(4rem, 8vw, 7rem);
  background: linear-gradient(
    to bottom,
    var(--zion-band-top) 0 52%,
    var(--zion-band-bottom) 52% 100%
  ) !important;
}

#why-choose-us .cs-item {
  background: var(--zion-white);
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-lg);
  box-shadow: var(--zion-shadow-sm);
  transition: box-shadow 0.25s, transform 0.25s;
}

#why-choose-us .cs-item:hover {
  box-shadow: var(--zion-shadow);
  transform: translateY(-2px);
}

#why-choose-us .cs-item-group {
  align-items: center;
  gap: 0.875rem;
}

/* Reason icons are rendered as CSS masks, so the tint IS the glyph — a chip
   background would be clipped away. Keep them as clean gold line icons. */
#why-choose-us .cs-icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  background-color: var(--zion-gold) !important;
  flex: none;
}

#why-choose-us .cs-h3 {
  color: var(--zion-charcoal);
}

#why-choose-us .cs-image {
  border-radius: var(--zion-r-lg);
  overflow: hidden;
  box-shadow: var(--zion-shadow);
}

#why-choose-us .cs-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The centre photo is absolutely positioned behind the two card columns —
   keep it clear of the section heading. */
#why-choose-us .cs-content {
  position: relative;
  z-index: 3;
}

@media only screen and (min-width: 64rem) {
  #why-choose-us .cs-image-group {
    height: 52%;
    bottom: clamp(2rem, 4vw, 3.5rem);
    z-index: 0;
  }

  #why-choose-us .cs-image-group .cs-image,
  #why-choose-us .cs-image-group .cs-image img {
    height: 100%;
    width: auto;
  }

  /* Cards sit in front of the photo */
  #why-choose-us .cs-card-group {
    position: relative;
    z-index: 2;
  }
}

/* ------------------------------------------------------------------ Services
 * Reworked as illustrated cards (no stock photography): a tinted panel with
 * flat brand artwork, then title, copy, and a link. Sits second on the page,
 * between the white trust strip and the grey About band, so it stays white.
 */

#services {
  background: var(--zion-white);
  background-image: none;
}

#services::before {
  background: var(--zion-white) !important;
  background-image: none !important;
  opacity: 1;
}

/* The template built these cards around a full-bleed photo — undo all of it */
#services .cs-item {
  height: auto !important;
  padding-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

#services .cs-item::before,
#services .cs-item::after {
  display: none !important;
}

#services .cs-link {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  text-decoration: none;
}

#services .cs-ill {
  width: 100%;
  display: block;
  background: #efe7da;
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-md);
  overflow: hidden;
}

#services .cs-ill img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.45s ease;
}

#services .cs-item:hover .cs-ill img {
  transform: scale(1.04);
}

#services .cs-h3 {
  width: 100%;
  margin: 0.25rem 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--zion-charcoal);
  display: block;
  transition: color 0.25s;
}

#services .cs-item:hover .cs-h3 {
  color: var(--zion-gold-deep);
}

#services .cs-item-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--zion-ink);
  text-align: left;
}

#services .cs-more {
  margin-top: auto;
  padding-top: 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--zion-gold-deep);
  font-size: 0.9375rem;
  font-weight: 700;
}

#services .cs-more svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform 0.25s;
}

#services .cs-item:hover .cs-more svg {
  transform: translateX(4px);
}

body.dark-mode #services .cs-item-text {
  color: rgba(255, 255, 255, 0.78);
}

body.dark-mode #services .cs-h3 {
  color: var(--zion-white);
}

/* Six cards, two rows of three. local.css lays these out 4-up (span 3 of 12)
   from 64rem, which would strand two cards on a second row. */
@media only screen and (min-width: 64rem) {
  #services .cs-item {
    grid-column: span 4;
  }
}

/* --------------------------------------------------------------- Testimonials */

#reviews,
#reviews-2 {
  background: var(--zion-white);
}

#reviews .cs-picture {
  border-radius: var(--zion-r-lg) !important;
  border: 0 !important;
}

/* The group was sized to leave room for a decorative flower that is now gone */
@media only screen and (min-width: 48rem) {
  #reviews .cs-image-group {
    width: 35.625em;
  }

  #reviews .cs-picture {
    width: 100%;
  }
}

#reviews .cs-review-group {
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 2px solid transparent;
  border-image: linear-gradient(
      180deg,
      var(--zion-gold) 0%,
      rgba(224, 178, 63, 0.22) 100%
    ) 1;
}

#reviews .cs-icon {
  background-color: var(--zion-gold) !important;
}

#reviews-2 .cs-item {
  background: var(--zion-white);
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-lg);
  box-shadow: var(--zion-shadow-sm);
}

#reviews-2 .cs-date {
  color: var(--zion-ink-soft);
}

/* Initial monogram in place of a stock face standing in for a named reviewer */
#reviews-2 .cs-avatar {
  width: 3.125rem;
  height: 3.125rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zion-cream-deep);
  color: var(--zion-gold-deep);
  border: 1px solid var(--zion-rule-gold);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

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

#faq {
  background: var(--zion-cream);
}

#faq .cs-picture {
  border-radius: var(--zion-r-lg) !important;
  border: 0 !important;
}

#faq .cs-faq-group {
  gap: 0.625rem;
}

#faq .cs-faq-item {
  background: var(--zion-white);
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-md);
  overflow: hidden;
  transition: border-color 0.25s;
}

#faq .cs-faq-item:hover {
  border-color: var(--zion-rule-gold);
}

#faq .cs-button {
  padding: 1.0625rem 1.25rem 1.0625rem 3.25rem;
  background: var(--zion-white);
  color: var(--zion-charcoal);
  font-weight: 600;
  border-radius: 0;
}

#faq .cs-faq-item.active .cs-button {
  background: var(--zion-charcoal);
  color: var(--zion-white);
  box-shadow: none;
}

#faq .cs-faq-item.active .cs-button::before,
#faq .cs-faq-item.active .cs-button::after {
  background: var(--zion-gold);
}

#faq .cs-item-text {
  background: var(--zion-white);
  border-radius: 0;
}

/* ------------------------------------------------------------------- Contact */

#contact {
  background: var(--zion-white);
  background-image: none;
}

#contact .cs-picture {
  border-radius: var(--zion-r-lg) !important;
  border: 0 !important;
}

/* Warmth instead of a stripe: a wash that fades out over the first few
   inches of the card, so the top reads warm without a hard gold edge drawn
   across it. The card's own gold lives in the field focus states and the
   submit button, where it is telling you something. */
#contact .cs-form {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background:
    linear-gradient(
      180deg,
      rgba(224, 178, 63, 0.09) 0%,
      rgba(224, 178, 63, 0) 9rem
    ),
    var(--zion-white);
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-lg);
  box-shadow: var(--zion-shadow);
}

#contact .cs-input,
#contact .cs-select,
#contact .cs-textarea {
  background: var(--zion-cream);
  color: var(--zion-charcoal);
  border: 1px solid var(--zion-rule);
  border-radius: var(--zion-r-sm);
  transition: border-color 0.2s, background-color 0.2s;
}

#contact .cs-input:hover,
#contact .cs-select:hover {
  border-color: var(--zion-rule-gold);
}

#contact .cs-input:focus,
#contact .cs-select:focus {
  background: var(--zion-white);
  border-color: var(--zion-gold);
}

#contact .cs-input::placeholder {
  color: var(--zion-ink-soft);
  opacity: 0.75;
}

#contact .cs-label {
  color: var(--zion-charcoal);
  font-weight: 600;
}

/* ------------------------------------------------- Floating labels, stable
 * root.css builds the float by collapsing the label to `font-size: 0;
 * line-height: 0` while the placeholder shows and expanding it to
 * 0.78rem/1.2 on focus. That is a real box growing from nothing, so every
 * field gains ~0.94rem the moment you click it and the whole form — and
 * everything below it — jumps.
 *
 * The fix reserves that line box as padding while the text is collapsed, and
 * drops the padding as the text grows into it. 0.78rem x 1.2 = 0.936rem, so
 * the two swap exactly: the label's total height never changes and, more to
 * the point, neither does the input's position within it.
 *
 * Note the input lives INSIDE the label, so the collapse cannot be done by
 * hiding the label — opacity or visibility here takes the field with it. Only
 * the text may be touched, which is why this rides on root's own font-size
 * mechanism rather than replacing it.
 *
 * The `html` prefix is load-bearing — root's collapsed rule carries
 * `!important`, and this has to out-specify it to win.
 */
@supports selector(label:has(> input)) {
  /* Floated: the text occupies the line, no padding needed. */
  html body:not(.pb-floating-labels-off) form label:has(> input:not([type="checkbox"]):not([type="radio"])),
  html body:not(.pb-floating-labels-off) form label:has(> textarea),
  html body:not(.pb-floating-labels-off) form label:has(+ input:not([type="checkbox"]):not([type="radio"])),
  html body:not(.pb-floating-labels-off) form label:has(+ textarea) {
    padding-top: 0;
    transition: color 180ms ease, font-size 180ms ease, transform 180ms ease,
      padding-top 180ms ease;
  }

  /* Collapsed: padding stands in for the line the text is not occupying. */
  html body:not(.pb-floating-labels-off) form label:has(> input[placeholder]:not(:focus):placeholder-shown),
  html body:not(.pb-floating-labels-off) form label:has(> textarea[placeholder]:not(:focus):placeholder-shown),
  html body:not(.pb-floating-labels-off) form label:has(+ input[placeholder]:not(:focus):placeholder-shown),
  html body:not(.pb-floating-labels-off) form label:has(+ textarea[placeholder]:not(:focus):placeholder-shown) {
    padding-top: 0.936rem;
  }

  @media (prefers-reduced-motion: reduce) {
    html body:not(.pb-floating-labels-off) form label:has(> input),
    html body:not(.pb-floating-labels-off) form label:has(> textarea),
    html body:not(.pb-floating-labels-off) form label:has(+ input),
    html body:not(.pb-floating-labels-off) form label:has(+ textarea) {
      transition: none;
    }
  }
}

/* The floated label is painted `var(--primary) !important` by root.css, which
   on the brightened gold is 2.1:1 on white. Rather than out-specify a dozen
   selectors, redefine the variable on the label itself so root's own
   declaration resolves to the accessible gold — then put it back for the
   field inside, which is not text. */
form label {
  --primary: var(--zion-gold-deep);
}

form label > :is(input, textarea, select) {
  --primary: var(--zion-gold);
}

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

/* The rule still marks the seam, but it is drawn rather than stamped: 2px
   that carries its weight across the middle of the page and falls away
   before either edge. Same idea on #veterans, so the two charcoal bands
   read as one device instead of two accent bars. */
#footer {
  background-color: var(--zion-charcoal);
  background-image: none;
  border-top: 2px solid transparent;
  border-image: linear-gradient(
      90deg,
      rgba(224, 178, 63, 0) 0%,
      rgba(224, 178, 63, 0.85) 26%,
      rgba(242, 207, 109, 0.95) 50%,
      rgba(224, 178, 63, 0.85) 74%,
      rgba(224, 178, 63, 0) 100%
    ) 1;
  /* The enlarged logo column adds 46px to the content row; give that back
     from the 100px top padding so the footer's overall height is unchanged */
  padding-top: 3.375rem;
}

/* Bright gold, not the pale wash — on charcoal the pale tone read as cream
   rather than as part of the gold family (7.8:1, so still comfortably legible) */
#footer .cs-header {
  color: var(--zion-gold-bright);
}

#footer .cs-link,
#footer .cs-li,
#footer .cs-nav-link,
#footer .cs-copyright {
  color: rgba(255, 255, 255, 0.86);
}

#footer .cs-link:hover,
#footer .cs-nav-link:hover {
  color: var(--zion-gold-bright);
}

#footer .cs-bottom {
  border-color: rgba(255, 255, 255, 0.14);
}

#footer .cs-social-link {
  background: transparent;
  border: 1px solid rgba(201, 160, 60, 0.55);
  border-radius: var(--zion-r-sm);
}

/* ------------------------------------------------- Wide viewports: no plates
 * The template swaps in fixed cream-ripple photographs above 100rem. */

@media only screen and (min-width: 100rem) {
  #hero,
  #services,
  #contact {
    background-image: none !important;
    background-attachment: initial !important;
  }

  #hero { background-color: var(--zion-white) !important; }
  #services { background-color: var(--zion-cream) !important; }
  #contact { background-color: var(--zion-white) !important; }

  /* #why-choose-us is excluded above so its half-and-half band survives */
  #why-choose-us { background-attachment: initial !important; }
}

/* ----------------------------------------------------------------- Dark mode */

body.dark-mode {
  background: var(--zion-black);
}

body.dark-mode .cs-topper {
  color: var(--zion-gold-bright);
}

body.dark-mode #navigation,
body.dark-mode #navigation .cs-ul-wrapper {
  background: var(--zion-charcoal);
}

body.dark-mode #navigation .cs-li-link {
  color: var(--zion-white);
}

body.dark-mode #navigation .cs-line {
  background: var(--zion-white);
}

body.dark-mode #hero::before {
  background: linear-gradient(180deg, #1b2222 0%, var(--zion-black) 62%);
}

body.dark-mode #hero-2,
body.dark-mode #reviews,
body.dark-mode #reviews-2,
body.dark-mode #contact {
  background: var(--zion-black);
}

body.dark-mode #side-by-side {
  background: var(--zion-band-top);
}

body.dark-mode #services,
body.dark-mode #services::before,
body.dark-mode #faq {
  background: var(--zion-charcoal) !important;
}

/* #why-choose-us keeps its half-and-half band in dark mode — charcoal above,
   black below, matching the section that follows it */
body.dark-mode {
  --zion-band-top: #242c2c;
  --zion-band-bottom: #141414;
}

body.dark-mode #hero-2 .cs-trust-title,
body.dark-mode #why-choose-us .cs-h3,
body.dark-mode #services .cs-h3,
body.dark-mode #side-by-side .cs-logo-title {
  color: var(--zion-white);
}

/* Call button on dark ground: white text beside the bubble, charcoal once
   the white pill has grown underneath it */
body.dark-mode .cs-button-transparent {
  color: var(--zion-white);
}

body.dark-mode .cs-button-transparent:hover {
  color: var(--zion-charcoal);
}

body.dark-mode .cs-button-picture,
body.dark-mode #hero .cs-button-picture {
  border-color: rgba(255, 255, 255, 0.92);
}

body.dark-mode #hero-2 .cs-trust-text,
body.dark-mode #reviews-2 .cs-date {
  color: rgba(255, 255, 255, 0.72);
}

body.dark-mode #hero .cs-address,
body.dark-mode #contact .cs-label {
  color: var(--zion-white);
}

/* The white inset on the small about image reads as a light gap in dark mode */
body.dark-mode #side-by-side .cs-picture-small {
  border-color: var(--zion-black) !important;
}

body.dark-mode #why-choose-us .cs-item,
body.dark-mode #reviews-2 .cs-item,
body.dark-mode #contact .cs-form,
body.dark-mode #faq .cs-faq-item {
  background: var(--zion-charcoal);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode #services .cs-flex,
body.dark-mode #faq .cs-button,
body.dark-mode #faq .cs-item-text,
body.dark-mode #contact .cs-input,
body.dark-mode #contact .cs-select {
  background: var(--zion-black);
  color: var(--zion-white);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode #faq .cs-faq-item.active .cs-button {
  background: var(--zion-gold);
  color: var(--zion-black);
}

body.dark-mode #faq .cs-faq-item.active .cs-button::before,
body.dark-mode #faq .cs-faq-item.active .cs-button::after {
  background: var(--zion-black);
}

body.dark-mode #reviews-2 .cs-avatar {
  background: var(--zion-black);
  color: var(--zion-gold-bright);
}

body.dark-mode #footer {
  background-color: var(--zion-charcoal);
}

/* ------------------------------------------------------------------- Mobile */

@media only screen and (max-width: 47.999rem) {
  #hero .cs-buttons,
  #hero .cs-button-solid,
  #hero .cs-button-transparent {
    width: 100%;
  }

  #hero .cs-image-group::after {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  #services .cs-item,
  #why-choose-us .cs-item,
  #services .cs-picture img {
    transition: none;
  }

  /* The gloss stays; only its motion stops. The heartbeat underline still
     appears on hover — it just holds one frame instead of running, so the
     hover cue itself is not lost. */
  .cs-logo-care,
  #navigation .cs-ul > .cs-li > .cs-li-link:hover::before,
  #navigation .cs-ul > .cs-li > .cs-li-link:focus-visible::before {
    animation: none;
  }

  .cs-logo-lockup::after,
  .cs-button-solid::after,
  #navigation .cs-button-solid::after {
    display: none;
  }
}

/* ================================================================ Personality
 * The brand's own clinical marks — a stethoscope looped into a heart, and a
 * heartbeat trace running through a heart — set large and faint beside image
 * corners. Static, no drift.
 *
 * Both are solid-fill illustrations rather than the hairline glyphs that were
 * here before, so they run at lower opacity to stay decoration; and their
 * aspect ratios changed (the stethoscope is now taller than wide, the pulse
 * shorter and blunter), so the sizes below are retuned to match.
 */

.zion-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  height: auto;
}

/* Hero image-group is em-scaled, so size in em to track it */
#hero .zion-hero-pulse {
  width: 19em;
  bottom: -2.5em;
  left: -7em;
  opacity: 0.3;
  z-index: -1;
}

/* About — the stethoscope moved here; the Approach section carries the
   oversized watermark on its own and was getting crowded */
#side-by-side .zion-about-stetho {
  width: 8.5rem;
  top: -3.75rem;
  right: -3rem;
  opacity: 0.2;
  z-index: -1;
}

/* Reviews image-group is em-scaled too */
#reviews .zion-rev-pulse {
  width: 17em;
  bottom: -2em;
  left: -3.5em;
  opacity: 0.26;
  z-index: -1;
}

/* FAQ */
#faq {
  position: relative;
}

/* Contact */
#contact .zion-contact-stetho {
  width: 9.5rem;
  bottom: -3.5rem;
  left: -2.75rem;
  opacity: 0.22;
  z-index: -1;
}

/* ------------------------------------------------------------ Wave dividers
 * Each cream section opens with a soft wave in the colour of the section
 * above it — a mask, so dark mode recolours it with a variable swap.
 */
:root {
  --zion-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C220 64 440 4 720 22 C1000 40 1220 10 1440 34 L1440 0 L0 0 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* The wave opens the tinted band at the About section. From there the grey
 * runs unbroken into #why-choose-us and fades to white halfway down it, so
 * there is no second divider between the two. */
#side-by-side::after {
  content: "";
  width: 100%;
  height: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--zion-white);
  -webkit-mask: var(--zion-wave) center top / 100% 100% no-repeat;
  mask: var(--zion-wave) center top / 100% 100% no-repeat;
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

body.dark-mode #side-by-side::after {
  background: var(--zion-black);
}

/* Heartrate divider — an EKG trace straddling the section boundary,
 * alternating with the wave so the rhythm of the page isn't monotonous.
 * Both host sections leave overflow visible, so the line can sit half above
 * the edge; #services and #why-choose-us clip, hence the wave there.
 *
 * Two things keep it from reading as clip art. The tile is long and its
 * beats are unevenly spaced, so the repeat does not land in the same place
 * twice on a normal screen. And it is masked to nothing at both ends rather
 * than running into the viewport edges — the same "drawn, not stamped" rule
 * as the footer and veterans hairlines. */
#faq::after {
  content: "";
  width: 100%;
  height: 3.75rem;
  background: url("/assets/images/zion-divider-ekg.svg") repeat-x center center / auto 100%;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 15%,
    #000 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 15%,
    #000 85%,
    transparent 100%
  );
  opacity: 0.42;
  position: absolute;
  top: -1.875rem;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

/* ------------------------------------------------------------ Veterans band
 * A dedicated charcoal strip between services and testimonials — this
 * section is not in the template, so it carries its own layout.
 */
#veterans {
  padding: var(--sectionPadding);
  background: var(--zion-charcoal);
  border-top: 2px solid transparent;
  border-image: linear-gradient(
      90deg,
      rgba(224, 178, 63, 0) 0%,
      rgba(224, 178, 63, 0.85) 26%,
      rgba(242, 207, 109, 0.95) 50%,
      rgba(224, 178, 63, 0.85) 74%,
      rgba(224, 178, 63, 0) 100%
    ) 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* A full-bleed flag at low opacity — texture, not decoration. `cover` crops
   the 1.9:1 flag to whatever shape the band ends up, so the stripes always
   run edge to edge. A charcoal veil over the top keeps the white stripes
   from lifting the band's contrast far enough to hurt the body copy. */
#veterans::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/zion-flag.svg") center center / cover no-repeat;
  opacity: 0.11;
  pointer-events: none;
  z-index: -1;
}

/* Veiled under the copy column, left clear beside the photograph, so the
   stripe banding never runs behind a line of body text at full strength. */
#veterans::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(36, 44, 44, 0) 0%,
    rgba(36, 44, 44, 0.3) 44%,
    rgba(36, 44, 44, 0.45) 100%
  );
  pointer-events: none;
  z-index: -1;
}

#veterans .cs-container {
  width: 100%;
  max-width: 80rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  z-index: 1;
}

#veterans .cs-image-group {
  width: 100%;
  max-width: 28rem;
  position: relative;
}

#veterans .cs-picture {
  display: block;
  border-radius: var(--zion-r-lg);
  overflow: hidden;
  box-shadow: var(--zion-shadow);
  background: #1b2222;
}

#veterans .cs-picture img {
  width: 100%;
  height: auto;
  display: block;
}

#veterans .cs-content {
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#veterans .cs-topper {
  color: var(--zion-gold-bright);
}

#veterans .cs-title {
  color: var(--zion-white);
  max-width: 22ch;
}

#veterans .cs-text {
  color: rgba(255, 255, 255, 0.84);
  margin-bottom: 1rem;
}

#veterans .cs-button-solid {
  margin-top: 1rem;
}

@media only screen and (min-width: 48rem) {
  #veterans .cs-container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  #veterans .cs-image-group {
    flex: none;
    width: 38%;
  }
}

/* Stacked, the section is tall and narrow, so `cover` crops the 1.9:1 flag to
   a thin vertical slice. Anchored left that slice still contains the canton,
   which reads as a flag; centred it would be nothing but stripes. The veil is
   flattened too — its left-to-right ramp only makes sense beside the photo. */
@media only screen and (max-width: 47.999rem) {
  #veterans::before {
    background-position: left center;
  }

  #veterans::after {
    background: rgba(36, 44, 44, 0.28);
  }
}

body.dark-mode #veterans {
  background: var(--zion-charcoal);
}

/* ------------------------------------------------- Condition-led side bands
 * Three alternating bands below the veterans strip — dementia, Alzheimer's,
 * hospice. They reuse the retired Approach section's design (rounded photo
 * with a charcoal pull-quote card lapped over its corner, copy column
 * beside it), but as a reusable class rather than an id: the template's
 * layout for that section is keyed to #side-by-side-2, which no longer
 * exists on this page.
 */
.zion-sbs {
  width: 100%;
  padding: var(--sectionPadding);
  background: var(--zion-white);
  position: relative;
}

/* Alternating ground so three bands in a row don't read as one long slab */
.zion-sbs-alt {
  background: var(--zion-cream);
}

.zion-sbs .cs-container {
  width: 100%;
  max-width: 80rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3rem, 6vw, 4.5rem);
}

.zion-sbs .cs-image-group {
  width: 100%;
  max-width: 30rem;
  flex: none;
  position: relative;
}

.zion-sbs .cs-picture {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: var(--zion-r-lg);
  overflow: hidden;
  box-shadow: var(--zion-shadow);
  background: var(--zion-cream-deep);
  position: relative;
}

.zion-sbs .cs-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pull-quote card, lapped over the photo's lower corner on the side facing
   the copy — as the retired Approach section had it. The reverse variant
   mirrors it so the pair reads symmetrically down the page. It overhangs by
   0.75rem against a column gap of at least 3rem, so it never reaches the
   text. */
/* The gold marker is inset and short — a tick against the first line of the
   pull-quote — rather than a full-height bar welded to the card's edge. Drawn
   as a pseudo-element because a border-image would square off the radius. */
.zion-sbs .cs-info {
  width: 82%;
  max-width: 20rem;
  padding: 1.375em 1.625em;
  background: var(--zion-charcoal);
  border-radius: var(--zion-r-md);
  box-shadow: var(--zion-shadow);
  position: absolute;
  right: -0.75rem;
  bottom: -1.5rem;
}

.zion-sbs .cs-info::before {
  content: "";
  position: absolute;
  left: 0.6875em;
  top: 1.5em;
  width: 2px;
  height: 2.25em;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    var(--zion-gold-bright) 0%,
    rgba(224, 178, 63, 0.15) 100%
  );
}

.zion-sbs-reverse .cs-info {
  right: auto;
  left: -0.75rem;
}

/* Stacked, there is no copy column to lap toward and the overhang lands
   about 4px off the viewport edge. Inset the card into the photo instead and
   let it overhang only downward. */
@media only screen and (max-width: 63.999rem) {
  .zion-sbs .cs-info,
  .zion-sbs-reverse .cs-info {
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: none;
    bottom: -1.25rem;
  }
}

.zion-sbs .cs-info-text {
  margin: 0;
  color: var(--zion-white);
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
}

.zion-sbs .cs-bold {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  color: var(--zion-gold-bright);
}

.zion-sbs .cs-content {
  width: 100%;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.zion-sbs .cs-title {
  max-width: 20ch;
  margin-bottom: 1rem;
}

.zion-sbs .cs-text-large {
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  color: var(--zion-charcoal);
}

.zion-sbs .cs-text {
  margin-bottom: 0.75rem;
}

.zion-sbs .cs-text:last-of-type {
  margin-bottom: 2rem;
}

@media only screen and (min-width: 64rem) {
  .zion-sbs .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: clamp(3rem, 6vw, 5.5rem);
  }

  .zion-sbs-reverse .cs-container {
    flex-direction: row-reverse;
  }

  .zion-sbs .cs-image-group {
    width: 42%;
  }
}

body.dark-mode .zion-sbs {
  background: var(--zion-black);
}

body.dark-mode .zion-sbs-alt {
  background: var(--zion-charcoal);
}

body.dark-mode .zion-sbs .cs-title,
body.dark-mode .zion-sbs .cs-text-large {
  color: var(--zion-white);
}

body.dark-mode .zion-sbs .cs-text {
  color: rgba(255, 255, 255, 0.78);
}

/* The card is charcoal, which is the alt band's own colour in dark mode —
   lift it off the ground with the deeper black instead */
body.dark-mode .zion-sbs-alt .cs-info {
  background: var(--zion-black);
}

/* ---------------------------------------------------------------- Watermark
 * The mark at architectural scale, desaturated and barely there. It anchors
 * the bottom-left of the About section, where the image column runs out well
 * before the copy column does and leaves a large hole in the layout.
 */
#side-by-side {
  overflow: hidden;
}

#side-by-side .cs-container {
  position: relative;
  z-index: 1;
}

/* The container stops short of the section edge by the section's own bottom
   padding, so pulling the mark down by exactly that amount lands it flush on
   the section's bottom edge — as low as it can sit without the clip cutting
   the hand off. Width is trimmed to buy the extra downward travel. */
.zion-watermark {
  width: 34rem;
  height: auto;
  position: absolute;
  left: -9.5rem;
  bottom: calc(clamp(3.75rem, 7.82vw, 6.25rem) * -1);
  filter: grayscale(1);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

body.dark-mode .zion-watermark {
  filter: grayscale(1) invert(1);
  opacity: 0.05;
}

@media only screen and (max-width: 63.999rem) {
  .zion-watermark {
    width: 22rem;
    left: -6.5rem;
  }
}

/* ------------------------------------------------------------- Call pill FAB
 * Replaces the scroll-to-top button. The scroll-progress indicator is kept,
 * redrawn as a rounded rect so it traces the pill instead of a circle.
 */
.pb-fab {
  background: var(--zion-charcoal);
  color: var(--zion-white);
  transition: background-color 0.25s, color 0.25s;
}

.pb-fab:hover,
.pb-fab:focus-visible {
  background: var(--zion-gloss);
  color: var(--zion-charcoal);
  box-shadow: var(--zion-gloss-shadow);
}

.pb-fab:focus-visible {
  outline: 3px solid var(--zion-gold-bright);
  outline-offset: 3px;
}

.pb-progress-ring-track {
  stroke: rgba(36, 44, 44, 0.16);
}

.pb-progress-ring-fill {
  stroke: var(--zion-gold);
}

body.dark-mode .pb-fab {
  background: var(--zion-gloss);
  color: var(--zion-charcoal);
  box-shadow: var(--zion-gloss-shadow);
}

body.dark-mode .pb-fab:hover,
body.dark-mode .pb-fab:focus-visible {
  background: var(--zion-white);
  color: var(--zion-charcoal);
}

body.dark-mode .pb-progress-ring-track {
  stroke: rgba(255, 255, 255, 0.2);
}

body.dark-mode .pb-progress-ring-fill {
  stroke: var(--zion-gold-bright);
}

/* --------------------------------------------------------------- Footer bleed
 * Two layers, both barely there: an ECG trace running the full width behind
 * everything, and the heart-in-hand mark anchoring the right corner.
 */
#footer {
  position: relative;
  overflow: hidden;
}

/* The trace photograph is a cyan line on near-black. `screen` drops the black
   ground into the charcoal so only the line survives, and the sepia chain
   turns the cyan gold — left as-is it would put the one colour on the page
   that is in no part of the brand. Kept under 8% so it reads as texture. */
#footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/zion-ecg-trace.webp") center / cover no-repeat;
  filter: grayscale(1) sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.1);
  mix-blend-mode: screen;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

#footer::before {
  content: "";
  width: 34rem;
  height: 31rem;
  background: url("/assets/images/zion-mark.png") center / contain no-repeat;
  opacity: 0.05;
  position: absolute;
  right: -5rem;
  bottom: -7rem;
  pointer-events: none;
  z-index: 1;
}

#footer > * {
  position: relative;
  z-index: 2;
}

/* Restraint on small screens: keep only the hero accent */
@media only screen and (max-width: 47.999rem) {
  .zion-deco {
    display: none;
  }

  .zion-deco.zion-keep {
    display: block;
  }

  #footer::before {
    width: 22rem;
    height: 20rem;
    right: -6rem;
    bottom: -6rem;
  }
}