/* ============================================================
   Legacy Wealth — Reusable Organisms
   Three site-wide assets, built to the provided spec sheets:
     1. Tabbed Card Deck   [data-tab-deck]
     2. Medium Card Carousel [data-card-carousel data-variant="medium"]
     3. Large Card Carousel  [data-card-carousel data-variant="large"]
   Behavior lives in organisms.js. Depends on tokens in styles.css.
   ============================================================ */

/* ---------------------------------------------------------------
   1. TABBED CARD DECK
   - Click a tab => it expands (stays solid), others invert colors,
     and the heading/body beside the deck swaps to that tab.
   - Tabs can sit on the right (default) or left of the content.
   --------------------------------------------------------------- */
.tab-deck {
  display: flex;
  gap: 44px;
  align-items: center;
  flex-wrap: wrap;
}
.tab-deck--tabs-left { flex-direction: row-reverse; }

.tab-deck__content {
  flex: 1 1 360px;
  min-width: 280px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tab-deck__content.is-out { opacity: 0; transform: translateY(6px); }
.tab-deck__heading { margin-bottom: 0.5em; }
.tab-deck__text p { color: var(--ink-soft); }

.tab-deck__tabs {
  flex: 0 0 330px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tab-deck__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 15px 22px;
  border-radius: 999px;
  cursor: pointer;
  /* inactive = inverted (outline) for visibility */
  background: #fff;
  color: var(--blue);
  border: 1.6px solid var(--blue);
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease,
    box-shadow 0.25s ease, padding 0.25s ease;
}
.tab-deck__tab:hover { transform: translateX(-2px); }
.tab-deck--tabs-left .tab-deck__tab:hover { transform: translateX(2px); }

/* active tab = solid + expanded toward the content */
.tab-deck__tab.is-active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  padding-block: 18px;
  box-shadow: 0 10px 24px rgba(37, 99, 217, 0.28);
  transform: scale(1.02);
}
.tab-deck__tab .td-plus { font-size: 1.25rem; line-height: 1; }

/* "View All" CTA: sits under the tab column, aligned to the tabs (same width) */
.tab-deck__cta { display: flex; justify-content: flex-end; margin-top: 16px; }
.tab-deck__cta .btn { flex: 0 0 330px; max-width: min(330px, 100%); }
@media (max-width: 760px) {
  .tab-deck__cta { justify-content: center; }
  .tab-deck__cta .btn { flex: 1 1 auto; width: 100%; }
}

/* ---------------------------------------------------------------
   2 + 3. CARD CAROUSELS (shared mechanic)
   --------------------------------------------------------------- */
.card-carousel { position: relative; padding: 0 58px; }

.cc-viewport { overflow: hidden; }
.cc-track {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.cc-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0c1118; /* dark fallback — never flash blue before media loads */
  color: #fff;
  cursor: pointer;
  /* animate flex-grow (interpolatable) instead of flex-basis:auto (which snapped) */
  flex: 1 1 0;
  min-width: 70px;
  transition: flex-grow 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.cc-card.is-active {
  flex-grow: 9;
  min-width: 0;
  cursor: default;
}
/* subtle hover grow on collapsed cards (spec: "very subtle by a few pixels") */
.cc-card.is-collapsed:hover { flex-grow: 1.5; }

.card-carousel[data-variant="medium"] .cc-card { height: 340px; }
.card-carousel[data-variant="large"] .cc-card { height: 460px; }
/* Picture cards REVEAL (not zoom) when expanded: the photo is locked to the
   expanded card width and centered, so a collapsed card just clips it — the
   image never rescales. JS sets --cc-media-w to the expanded card width. */
.card-carousel[data-variant="medium"] .cc-media {
  left: 50%;
  right: auto;
  width: var(--cc-media-w, 100%);
  transform: translateX(-50%);
}

/* Media layer */
.cc-media {
  position: absolute;
  inset: 0;
  background: #0c1118 center/cover no-repeat; /* dark fallback; poster set inline */
  transition: opacity 0.5s ease;
}
/* video mounts here and fades in over the poster (no blue flash) */
.cc-video-holder {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #000;
  transition: opacity 0.6s ease;
}
.cc-card.is-active .cc-video-holder { opacity: 1; }
.cc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  background: #000;
}
/* Our own controls for self-hosted MP4 cards (same icons as the home banner) */
.cc-vid-controls {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  gap: 12px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
/* Only real pointer devices reveal controls on hover. On touch, :hover is
   "sticky" after a tap and would keep these icons stuck on — so gate it. */
@media (hover: hover) and (pointer: fine) {
  .cc-card.is-active:hover .cc-vid-controls { opacity: 1; pointer-events: auto; }
}
.cc-vid-controls .hv-icon { color: #fff; }

/* Vertical title — "locked in place" on every card */
.cc-title {
  position: absolute;
  top: 18px;
  right: 16px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  white-space: nowrap;
}
/* the active card's title shows as a caption beneath the carousel, not over the video */
.cc-card.is-active .cc-title { display: none; }
/* medium (people) carousel never shows the vertical name — it flashes during the crossfade */
.card-carousel[data-variant="medium"] .cc-title { display: none; }
/* portrait headshots: frame from the top so faces aren't cropped by the square crop */
.card-carousel[data-variant="medium"] .cc-media { background-position: center top; }
.cc-vid-title {
  text-align: center;
  margin-top: 14px;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
}

/* Plus button on collapsed cards (hidden on the active/expanded card) */
.cc-plus {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  background: none;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(20, 34, 59, 0.45);
  /* fade the plus IN only after the card has finished collapsing (flex-grow is
     0.85s) so it doesn't snap onto a still-collapsing card */
  opacity: 1;
  transition: opacity 0.3s ease 0.6s;
}
/* on the expanding (active) card the plus disappears immediately — no delay */
.cc-card.is-active .cc-plus { opacity: 0; transition-delay: 0s; }

/* Large variant: real, scrubbable video controls (revealed on hover / when paused) */
.cc-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .cc-card.is-active:hover .cc-controls { opacity: 1; pointer-events: auto; }
}
/* touch: controls are hidden until the video is tapped (toggled via .show-controls) */
.cc-card.show-controls .cc-controls,
.cc-card.show-controls .cc-vid-controls { opacity: 1; pointer-events: auto; }
.cc-controls .cc-play { cursor: pointer; line-height: 0; background: none; border: 0; padding: 0; color: #fff; display: grid; place-items: center; }
.cc-controls .cc-play svg { width: 18px; height: 18px; display: block; }
.cc-controls .cc-bar {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.32);
  position: relative;
  cursor: pointer;
  touch-action: none;
}
.cc-controls .cc-bar > i { display: block; width: 0; height: 100%; border-radius: 4px; background: #fff; position: relative; }
.cc-controls .cc-bar > i::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
}
.cc-controls .cc-time { font-size: 0.75rem; opacity: 0.9; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Nav arrows */
.cc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
}
.cc-nav:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.cc-nav:disabled { opacity: 0.35; cursor: default; }
.cc-prev { left: 6px; }
.cc-next { right: 6px; }

/* Dots — centered (medium) / right-aligned (large) */
.cc-dots { display: flex; gap: 8px; margin-top: 16px; }
.card-carousel[data-variant="medium"] .cc-dots { justify-content: center; }
.card-carousel[data-variant="large"] .cc-dots { justify-content: flex-end; }

/* feature caption below a carousel — updates to the active card */
.cc-feature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}
.cc-feature .person-feature h3 { margin: 0 0 2px; color: var(--blue); }
.cc-feature .person-feature .role { color: var(--muted); font-size: 0.95rem; }
/* Bio variant: name/role/bio swap with the active card, button stays on the right */
.cc-feature--bio { align-items: flex-start; }
.cc-feature--bio .person-feature { flex: 1 1 540px; max-width: 720px; }
.cc-feature--bio .person-feature .role { display: block; margin-bottom: 10px; }
.cc-feature--bio .person-bio { color: var(--ink-soft); }
.cc-feature--bio .person-bio p { margin: 0; }
/* clamp the bio to 3 lines until "View more" is tapped */
.cc-feature--bio .person-bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-feature--bio.is-expanded .person-bio {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.bio-toggle {
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bio-toggle:hover { text-decoration: underline; }

/* Split layout: carousel on the left, heading + live feature on the right.
   The narrower carousel column makes the portrait cards fit without heavy crop. */
.card-carousel.hc-split { display: grid; grid-template-columns: 1.85fr 1fr; gap: clamp(24px, 3vw, 52px); align-items: center; padding: 0; }
.card-carousel.hc-split .hc-left { position: relative; padding: 0 50px; } /* gutter clears the 40px nav arrows */
/* thinner collapsed thumbnails leave more room, so the active card opens large */
.card-carousel.hc-split .cc-card { min-width: 52px; }
.card-carousel.hc-split .hc-left .cc-prev { left: 0; }
.card-carousel.hc-split .hc-left .cc-next { right: 0; }
/* card height tracks the EXPANDED width (set by JS via --cc-card-h) so the active
   card matches the photo aspect (square advisors / portrait team) and shows the
   full image uncropped; collapsed cards become tall, thin thumbnails. */
.card-carousel.hc-split .cc-card { height: var(--cc-card-h, 400px); }
.card-carousel.hc-split .cc-media { background-position: center; }
.card-carousel.hc-split .hc-right h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
.card-carousel.hc-split .hc-right .section-sub { margin-bottom: 20px; }
.card-carousel.hc-split .cc-feature { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (max-width: 820px) {
  .card-carousel.hc-split { grid-template-columns: 1fr; gap: 28px; }
  .card-carousel.hc-split .hc-left { padding: 0 50px; order: 2; } /* clear the 40px nav arrows */
  .card-carousel.hc-split .hc-right { order: 1; text-align: center; }
  .card-carousel.hc-split .cc-feature { align-items: center; }
}

/* Stacked layout: heading on top, a compact centered carousel, then the live
   bio spanning wide and centered underneath. Keeps the copy from bunching into
   a narrow side column and keeps the whole section short. */
.card-carousel.hc-stacked { display: block; padding: 0; }
.card-carousel.hc-stacked .hc-head { text-align: center; max-width: 760px; margin: 0 auto 22px; }
.card-carousel.hc-stacked .hc-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 0 0 8px; }
.card-carousel.hc-stacked .hc-head .section-sub { margin: 0 auto; color: var(--muted); }
.card-carousel.hc-stacked .hc-left { position: relative; padding: 0 50px; max-width: 680px; margin: 0 auto; }
.card-carousel.hc-stacked .cc-card { min-width: 52px; height: var(--cc-card-h, 340px); }
.card-carousel.hc-stacked .hc-left .cc-prev { left: 0; }
.card-carousel.hc-stacked .hc-left .cc-next { right: 0; }
.card-carousel.hc-stacked .cc-media { background-position: center; }
.card-carousel.hc-stacked .hc-right { max-width: 820px; margin: 20px auto 0; }
.card-carousel.hc-stacked .cc-feature { margin-top: 0; flex-direction: column; align-items: center; gap: 8px; }
.card-carousel.hc-stacked .cc-feature--bio { align-items: center; }
.card-carousel.hc-stacked .cc-feature--bio .person-feature { flex: 1 1 auto; max-width: 820px; text-align: center; }
.card-carousel.hc-stacked .cc-feature--bio .person-bio { text-align: left; }
.card-carousel.hc-stacked .bio-toggle { display: inline-block; margin-top: 10px; }

/* Staggered carousels: a wider breakout wrapper so each column keeps the carousel
   at its original size (~592px viewport), with the team column dropped lower so
   the two interlock — advisors higher/left, team lower/right, tongue and groove.
   min-width:0 lets each grid column measure the carousel viewport correctly. */
.stagger-wrap { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.stagger-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: start; }
.stagger-grid .stagger-col { min-width: 0; }
.stagger-grid .stagger-col--right { margin-top: clamp(140px, 18vw, 280px); }
.stagger-grid .hc-stacked .hc-head,
.stagger-grid .hc-stacked .hc-left,
.stagger-grid .hc-stacked .hc-right { max-width: none; }
.stagger-grid .hc-stacked .hc-left { padding: 0 50px; }
@media (max-width: 900px) {
  .stagger-wrap { padding: 0 16px; }
  .stagger-grid { grid-template-columns: 1fr; row-gap: 8px; }
  .stagger-grid .stagger-col--right { margin-top: 44px; }
  /* wider gutter so the 40px nav arrows clear the photo (matches the home carousel) */
  .stagger-grid .hc-stacked .hc-left { padding: 0 50px; }
}

/* Profile split (About advisors/team): ONE full photo on the left, bio on the right.
   The card aspect is set per carousel via --cc-ar so square or portrait headshots
   show in full (no cropping). One photo at a time, crossfaded. */
.card-carousel.cc-split { display: grid; grid-template-columns: minmax(0, 0.8fr) 1.2fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding: 0; }
.card-carousel.cc-split .cc-left { position: relative; padding: 0 48px; }
.card-carousel.cc-split .cc-left .cc-prev { left: 0; }
.card-carousel.cc-split .cc-left .cc-next { right: 0; }
.card-carousel.cc-split .cc-viewport { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: var(--cc-ar, 1); height: auto; }
.card-carousel.cc-split .cc-track { display: block; position: relative; height: 100%; }
.card-carousel.cc-split .cc-card { position: absolute; inset: 0; width: 100%; height: 100%; flex: none; min-width: 0; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.card-carousel.cc-split .cc-card.is-active { opacity: 1; pointer-events: auto; }
.card-carousel.cc-split .cc-card .cc-plus { display: none; }
.card-carousel.cc-split .cc-media { left: 0; right: 0; width: 100%; transform: none; background-size: cover; background-position: center; }
.card-carousel.cc-split .cc-dots { justify-content: center; margin-top: 18px; }
.card-carousel.cc-split .cc-feature { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (max-width: 820px) {
  .card-carousel.cc-split { grid-template-columns: 1fr; gap: 24px; }
  .card-carousel.cc-split .cc-left { padding: 0 40px; }
}

/* Name caption beneath a carousel card (home "Our Advisors") */
.cc-caption { text-align: center; margin-top: 14px; }
.cc-caption h3 { margin: 0 0 2px; color: var(--blue); font-size: 1.2rem; }
.cc-caption .role { color: var(--muted); font-size: 0.95rem; }

.cc-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.cc-dots span.on { background: var(--blue); }

@media (max-width: 720px) {
  .tab-deck, .tab-deck--tabs-left { flex-direction: column; align-items: stretch; }
  .tab-deck__tabs { flex-basis: auto; }
  .card-carousel { padding: 0 40px; }
  .cc-prev { left: 2px; }
  .cc-next { right: 2px; }

  /* Large (video) carousel: vertical stack, skinny bars until clicked (saves space) */
  .card-carousel[data-variant="large"] { padding: 0 8px; }
  .card-carousel[data-variant="large"] .cc-nav { display: none; }
  .card-carousel[data-variant="large"] .cc-track { flex-direction: column; gap: 12px; }
  .card-carousel[data-variant="large"] .cc-card {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: 58px; /* skinny until clicked */
    transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .card-carousel[data-variant="large"] .cc-card.is-active {
    height: 56vw;
    max-height: 62vh;
  }
  .card-carousel[data-variant="large"] .cc-card.is-collapsed .cc-title {
    writing-mode: horizontal-tb;
    transform: none;
    inset: 0 auto 0 16px;
    display: flex;
    align-items: center;
    font-size: 0.98rem;
  }
  .card-carousel[data-variant="large"] .cc-card.is-collapsed .cc-plus {
    bottom: auto;
    top: 50%;
    left: auto;
    right: 14px;
    transform: translateY(-50%);
  }

  /* Medium (people) carousel on phones: one photo at a time with a crossfade
     (the desktop accordion deck collapses to a single full card here). */
  .card-carousel[data-variant="medium"] { padding: 0 40px; }
  .card-carousel[data-variant="medium"] .cc-viewport { position: relative; aspect-ratio: 1 / 1; }
  .card-carousel[data-variant="medium"] .cc-track { display: block; position: relative; height: 100%; }
  .card-carousel[data-variant="medium"] .cc-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    flex: none;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.9s ease;
  }
  .card-carousel[data-variant="medium"] .cc-card.is-active { opacity: 1; pointer-events: auto; }
  .card-carousel[data-variant="medium"] .cc-card .cc-plus { display: none; }
  /* on phones the single card is full-width, so show the photo normally (no reveal-clip) */
  .card-carousel[data-variant="medium"] .cc-media { left: 0; right: 0; width: 100%; transform: none; }
}

/* ---------------------------------------------------------------
   4. AD BANNER  [data-ad-banner]
   Gradient strip, rotating messages + CTA, dots on the right.
   Default: scrolls away with the page. On the home video hero it
   becomes fixed + dissolves on scroll (see hero rules below).
   --------------------------------------------------------------- */
/* Header link group (used by the overlay menu) */
.nav-links { display: flex; align-items: center; gap: 28px; }
@media (max-width: 900px) {
  .nav.open .nav-links { flex-direction: column; align-items: flex-end; text-align: right; gap: 14px; }
  /* mobile dropdown is white — make links dark (was white-on-white over the hero) */
  body .site-header .nav.open a:not(.btn) { color: var(--ink); }

  /* Home only: the big spinning logo overhangs the (taller, 2-line) mobile ad
     banner. Float it to the horizontal middle of the page and drop it below the
     banner so it rests over the hero instead of covering the banner. Reverts to
     the normal top-left bar once scrolled. Homepage-scoped via .has-hero-video. */
  body.has-hero-video:not(.is-scrolled) .site-header .brand {
    position: absolute;
    left: 50%;
    top: 64px;
    transform: translateX(-50%);
    margin-top: 0;
  }
  /* the brand is now out of the flex flow, so keep the hamburger pinned right */
  body.has-hero-video .nav-toggle { margin-left: auto; }
  /* white hamburger over the hero video; stays dark on the scrolled white bar */
  body.has-hero-video:not(.is-scrolled) .nav-toggle span { background: #fff; }
}

.ad-banner {
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #185ebc 0%, #2f6fd6 45%, #609ae9 100%);
  color: #fff;
  overflow: hidden;
}
.ad-banner__track {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 64px;
}
.ad-slide {
  display: flex;
  align-items: center;
  gap: 16px;
  animation: ad-fade 0.5s ease;
}
@keyframes ad-fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.ad-text { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.01em; }
.ad-cta {
  background: #fff;
  color: #185ebc;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.ad-banner__dots {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
}
.ad-banner__dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); cursor: pointer; }
.ad-banner__dots span.on { background: #fff; }
/* Mobile: the desktop layout (centered slide, 64px side padding) clips the long
   text and tucks it under the dots. Shrink padding/font, let it wrap + center. */
@media (max-width: 640px) {
  .ad-banner__track { padding: 7px 40px 7px 14px; }
  .ad-slide { flex-wrap: wrap; gap: 4px 10px; justify-content: center; }
  .ad-text { font-size: 0.74rem; line-height: 1.3; text-align: center; }
  .ad-cta { font-size: 0.62rem; padding: 3px 10px; }
}

/* ---------------------------------------------------------------
   5. HERO VIDEO + MAIN MENU  (home)
   Full-screen autoplay video with the site menu overlaid. Idle
   dissolve, proximity-lit icons, and the scroll -> "menu 2" change.
   Activated by <body class="has-hero-video">.
   --------------------------------------------------------------- */
.hero-video {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #0c1424;
  color: #fff;
}
.hero-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video__media:empty,
.hero-video__media:not([src]) {
  background: radial-gradient(120% 120% at 70% 20%, #2a3a5e, #0c1424 70%);
}
.hero-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 32, 0.45), rgba(8, 16, 32, 0.15) 40%, rgba(8, 16, 32, 0.35));
  pointer-events: none;
}
.hero-video__brandmark {
  position: absolute;
  right: 26px;
  bottom: 84px;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 1.4rem;
  opacity: 0.7;
}
.hv-controls {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  gap: 14px;
  z-index: 4;
  transition: opacity 0.4s ease;
}
.hv-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.05rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.hv-icon:hover { transform: translateY(-1px); }
.hv-icon.is-near { color: #fff; background: rgba(255, 255, 255, 0.3); } /* within ~50px */
.hv-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; display: block; }
/* mute button swaps between crossed (muted) and open (unmuted) */
.hv-mute .ic-unmuted { display: none; }
.hv-mute:not(.is-muted) .ic-muted { display: none; }
.hv-mute:not(.is-muted) .ic-unmuted { display: block; }

/* Icons appear after a click / in fullscreen; otherwise idle-hide with menu */
body.hero-idle .hv-controls { opacity: 0; }
.hero-video.controls-on .hv-controls { opacity: 1; }

/* --- Header as overlay menu over the video --- */
body.has-hero-video .site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 40px; /* below the ad banner */
  background: transparent;
  border-bottom: none;
  z-index: 50; /* above the ad banner (45) so the overhanging logo shows in front, not clipped */
  transition: opacity 0.4s ease, background 0.3s ease, top 0.3s ease, box-shadow 0.3s ease;
}
/* the 92px logo overhangs the 70px bar; nudge it down a touch so it clears the ad banner */
body.has-hero-video .site-header .brand { margin-top: 8px; }
/* belt-and-suspenders: keep the logo above the ad banner on every page */
.site-header .brand { position: relative; z-index: 60; }
.ad-banner { z-index: 1; }
body.has-hero-video .site-header .nav a { color: #fff; }
/* signed-in chip follows the hero nav: white over the video... */
body.has-hero-video .site-header .lw-account,
body.has-hero-video .site-header .lw-account a { color: #fff; }
body.has-hero-video .site-header .brand-name { color: #fff; }
body.has-hero-video .header-inner { position: relative; }
/* center the menu links over the video; keep actions on the right */
body.has-hero-video .nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 26px;
}
body.has-hero-video .nav-links a { font-size: 1.15rem; font-weight: 600; white-space: nowrap; }
body.has-hero-video .nav-links a:hover { color: #609ae9; } /* hover light blue */

/* Idle: dissolve the whole menu until input (only when not scrolled) */
body.has-hero-video.hero-idle:not(.is-scrolled) .site-header { opacity: 0; pointer-events: none; }

/* Ad banner fixed over the hero, dissolves on scroll */
body.has-hero-video .ad-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 45;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
body.has-hero-video.is-scrolled .ad-banner { transform: translateY(-100%); opacity: 0; }

/* --- "Menu 2": after scroll -> solid white bar, blue, tight, right --- */
body.has-hero-video.is-scrolled .site-header {
  top: 0;
  background: #fff;
  box-shadow: 0 2px 14px rgba(20, 34, 59, 0.08);
}
body.has-hero-video.is-scrolled .site-header .brand-name { color: var(--ink); }
body.has-hero-video.is-scrolled .nav-links {
  position: static;
  transform: none;
  margin-left: auto;
  gap: 20px; /* closer together */
}
body.has-hero-video.is-scrolled .nav-links a {
  color: #185ebc; /* turn blue */
  font-size: 0.82rem; /* shrink to Body 2 */
  font-weight: 600;
}
/* ...and blue on the solid white bar after scrolling (so it stays readable) */
body.has-hero-video.is-scrolled .site-header .lw-account,
body.has-hero-video.is-scrolled .site-header .lw-account a { color: #185ebc; }
body.has-hero-video.is-scrolled .header-inner { justify-content: space-between; }

/* hero sits behind the fixed chrome; content after it clears the menu-2 bar */
body.has-hero-video { padding-top: 0; }
body.has-hero-video main { padding-top: 72px; }

/* ---------------------------------------------------------------
   6. PEELING PAGE  [data-peel]
   A curled bottom-right page corner that:
   - flutters subtly when idle ("blow in the wind")
   - lifts as the cursor comes within ~10px
   - peels further as the user scrolls past the page bottom
   - peels fully open on click -> reveals "Legacy Vision Overview"
   Sits inside a position:relative hero. Label + colors configurable.
   --------------------------------------------------------------- */
.peel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--peel, 124px);
  height: var(--peel, 124px);
  z-index: 36;
  --peel-ink: #14223b;
  --peel-paper: #ffffff;
  transition: width 0.35s ease, height 0.35s ease;
}
.peel__corner {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
/* the page-behind, shown in the lifted upper-left wedge */
.peel__back {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(315deg, #ffffff, #eef1f6);
  pointer-events: none;
}
.peel--dark { --peel-ink: #ffffff; }
.peel--dark .peel__back { background: linear-gradient(315deg, #0b1220, #243049); }
.peel__label { z-index: 1; }
/* the page-behind label, revealed in the lifted wedge (upper-left of the box) */
.peel__label {
  position: absolute;
  left: 9px;
  top: 9px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.01em;
  font-size: 1.02rem;
  color: var(--peel-ink);
  text-align: left;
  pointer-events: none;
  opacity: 0.95;
}
/* the folded flap — curved SVG page-curl */
.peel__flap {
  position: absolute;
  inset: 0;
  background: none;
  transform-origin: bottom right;
  pointer-events: none;
}
.peel__curl-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* nav variant: make the <a> behave like the old <div> */
.peel--nav {
  display: block;
  text-decoration: none;
}
.peel--nav:hover .peel__flap,
.peel--nav:focus .peel__flap {
  transform: scale(1.08) translate(-3%, -3%);
  transition: transform 0.3s ease;
}
.peel--nav .peel__label {
  transition: transform 0.3s ease;
}
.peel--nav:hover .peel__label,
.peel--nav:focus .peel__label {
  transform: translate(2px, 2px);
}
/* idle "blow in the wind" flutter (only when not interacting/open) */
@keyframes peel-flutter {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  50% { transform: rotate(-1.4deg) translate(-1px, -1px); }
}
.peel:not(.is-near):not(.is-open) .peel__flap {
  animation: peel-flutter 3.6s ease-in-out infinite;
}
/* proximity lift */
.peel.is-near { width: 172px; height: 172px; }
.peel.is-near .peel__flap { box-shadow: -14px -14px 30px rgba(20, 34, 59, 0.3); }

/* full reveal on click — the page behind (Legacy Vision Overview) */
.peel__reveal {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px;
  clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
  transition: clip-path 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.peel.is-open .peel__reveal {
  clip-path: polygon(-40% 100%, 140% -40%, 140% 140%, -40% 140%);
  pointer-events: auto;
}
.peel.is-open { width: 100%; height: 100%; }
.peel.is-open .peel__flap,
.peel.is-open .peel__label { opacity: 0; transition: opacity 0.3s ease; }
.peel__reveal-inner { max-width: 560px; }
.peel__close {
  margin-top: 18px;
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Vision peel variant (home): white VISION card with a real page-curl corner ── */
.peel--vision {
  --peel: clamp(220px, 30vw, 400px);
  width: var(--peel);
  height: calc(var(--peel) * 0.62);
}
.peel--vision .peel__under {
  position: absolute;
  inset: 0;
  background: #fff;
  border-top-left-radius: 12px;
  display: grid;
  place-items: center;
  padding: 9% 11%;
  box-shadow: -12px -12px 34px rgba(20, 34, 59, 0.20);
}
.peel--vision .peel__logo {
  width: 90%;
  max-height: 70%;
  object-fit: contain;
}
/* the page-curl PNG = lifted bottom-right corner of the card */
.peel--vision .peel__curl {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  height: 68%;
  object-fit: contain;
  object-position: bottom right;
  transform-origin: bottom right;
  filter: drop-shadow(-6px -6px 9px rgba(20, 34, 59, 0.18));
  pointer-events: none;
  transition: transform 0.4s ease, filter 0.3s ease;
}
.peel--vision .peel__corner {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 3;
}
/* idle "blow in the wind" flutter on the curl */
@keyframes vision-peel-flutter {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  50% { transform: rotate(-2.5deg) translate(-2px, -2px); }
}
.peel--vision:not(.is-near):not(.is-open) .peel__curl {
  animation: vision-peel-flutter 3.8s ease-in-out infinite;
}
/* hover within ~10px: the corner lifts further */
.peel--vision.is-near .peel__curl {
  transform: translate(-6%, -8%) rotate(-4deg) scale(1.12);
  filter: drop-shadow(-12px -12px 18px rgba(20, 34, 59, 0.28));
}
.peel--vision.is-open .peel__curl {
  transform: translate(-10%, -12%) rotate(-7deg) scale(1.2);
}
/* keep this variant a fixed size (override old .peel size jumps) */
.peel--vision.is-near,
.peel--vision.is-open {
  width: var(--peel);
  height: calc(var(--peel) * 0.62);
}

@media (max-width: 900px) {
  body.has-hero-video .nav-links { position: static; transform: none; }
  .peel--vision { --peel: clamp(170px, 46vw, 260px); }
}

/* ============================================================
   Legacy Wealth — Cube intro logo (home). Scoped under .lw-brand.
   ============================================================ */
@property --lw-d { syntax:'<length>'; inherits:true; initial-value:0px; }

.lw-brand{
  --lw-S:92px;                 /* resting (final) logo size */
  --lw-T:4.6s;                 /* intro duration */
  --lw-big:300px;              /* center-stage size (set by JS too) */
  --lw-tx:0px; --lw-ty:0px; --lw-sc:1;   /* JS-computed fly offset + scale */
  width:var(--lw-S); height:var(--lw-S);
  perspective:1100px;
  transform-origin:center center;
  display:inline-block; vertical-align:middle;
  cursor:pointer;
}
.lw-brand *{box-sizing:border-box;}

.lw-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;--lw-d:0px;}

.lw-face{
  /* faces are inset by -1px so adjacent faces overlap slightly — closes the
     sub-pixel seams that let a sliver of the bright background show through */
  position:absolute;inset:-1.5px;border-radius:0;overflow:hidden;
  backface-visibility:hidden;
}
.lw-face img{width:100%;height:100%;object-fit:cover;display:block;}
.lw-grad{background:radial-gradient(150% 150% at 100% 100%,#5b94e0 0%,#2a64c0 40%,#185dbc 74%);}

.lw-ftext{background:radial-gradient(150% 150% at 100% 100%,#5b94e0 0%,#2a64c0 40%,#185dbc 74%);}
.lw-words{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:10% 6%;text-align:center;}
.lw-words span{font-family:'Poppins',sans-serif;font-weight:600;color:#fff;font-size:12.5px;line-height:1;letter-spacing:.02em;text-shadow:0 1px 5px rgba(0,28,80,.45);}

.lw-front {transform:translateZ(var(--lw-d));}                          /* LOGO */
.lw-left  {transform:rotateY(-90deg) translateZ(var(--lw-d));}          /* TEXT */
.lw-right {transform:rotateY(90deg)  translateZ(var(--lw-d));filter:brightness(.96);}
.lw-back  {transform:rotateY(180deg) translateZ(var(--lw-d));filter:brightness(.92);}
.lw-top   {transform:rotateX(90deg)  translateZ(var(--lw-d));filter:brightness(1.04);}
.lw-bottom{transform:rotateX(-90deg) translateZ(var(--lw-d));filter:brightness(.92);}

.lw-side,.lw-left{opacity:0;}  /* non-front faces hidden at rest (no edge slivers) */

.lw-brand.lw-play{animation:lw-fly var(--lw-T) cubic-bezier(.74,0,.18,1) forwards;}
.lw-brand.lw-play .lw-cube{animation:lw-spin var(--lw-T) cubic-bezier(.55,0,.2,1) forwards,
                                     lw-depth var(--lw-T) cubic-bezier(.55,0,.2,1) forwards;}
.lw-brand.lw-play .lw-side,
.lw-brand.lw-play .lw-left{animation:lw-fade var(--lw-T) cubic-bezier(.55,0,.2,1) forwards;}

.lw-brand.lw-abort{transition:transform .42s cubic-bezier(.5,0,.2,1);}

@keyframes lw-fly{
  0%,76%{transform:translate(var(--lw-tx),var(--lw-ty)) scale(var(--lw-sc));}
  100%{transform:none;}
}
@keyframes lw-spin{
  0%   {transform:rotateX(-15deg) rotateY(-630deg);animation-timing-function:cubic-bezier(.16,.7,.2,1);}
  30%  {transform:rotateX(-15deg) rotateY(90deg);  animation-timing-function:linear;}
  42%  {transform:rotateX(-15deg) rotateY(90deg);  animation-timing-function:cubic-bezier(.6,0,.25,1);}
  56%  {transform:rotateX(0deg)   rotateY(0deg);   animation-timing-function:linear;}
  100% {transform:rotateX(0deg)   rotateY(0deg);}
}
@keyframes lw-depth{0%,76%{--lw-d:calc(var(--lw-S)/2);}100%{--lw-d:0px;}}
@keyframes lw-fade {0%,76%{opacity:1;}100%{opacity:0;}}

/* In-place spin (returning visitors): the cube inflates, turns a full 360 in the
   nav, then collapses back to the flat logo — no fly-out to center. */
.lw-brand.lw-spinplace .lw-cube{animation:lw-ip-spin 1.5s cubic-bezier(.5,0,.2,1) forwards, lw-ip-depth 1.5s cubic-bezier(.5,0,.2,1) forwards;}
.lw-brand.lw-spinplace .lw-side,
.lw-brand.lw-spinplace .lw-left{animation:lw-ip-fade 1.5s cubic-bezier(.5,0,.2,1) forwards;}
/* finish the full turn by 80% (while still inflated), THEN flatten 80–100% while
   facing front — so the cube is never rotating as it collapses (no end seam). */
@keyframes lw-ip-spin{0%{transform:rotateX(0) rotateY(0);}80%{transform:rotateX(0) rotateY(-360deg);}100%{transform:rotateX(0) rotateY(-360deg);}}
@keyframes lw-ip-depth{0%{--lw-d:0px;}12%{--lw-d:calc(var(--lw-S)/2);}80%{--lw-d:calc(var(--lw-S)/2);}100%{--lw-d:0px;}}
@keyframes lw-ip-fade{0%{opacity:0;}12%{opacity:1;}80%{opacity:1;}100%{opacity:0;}}

@media (prefers-reduced-motion: reduce){
  .lw-brand.lw-play,.lw-brand.lw-play .lw-cube,.lw-brand.lw-play .lw-side,.lw-brand.lw-play .lw-left,
  .lw-brand.lw-spinplace .lw-cube,.lw-brand.lw-spinplace .lw-side,.lw-brand.lw-spinplace .lw-left{animation:none;}
}

/* ============================================================
   "Float into place" — page sections rise + fade in as they
   enter the viewport. Initial hidden state is here (so there is
   no flash); organisms.js adds .lw-in on scroll-in. The homepage
   hero video is excluded. Disabled for reduced-motion users.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  main > section:not(.hero-video),
  .site-footer {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
                transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
  }
  main > section.lw-in,
  .site-footer.lw-in {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Team directory — left-scrolling marquee of employee cards
   (about page). Cards duplicated in JS for a seamless loop.
   ============================================================ */
.team-marquee { position: relative; width: 100%; padding: 10px 0 6px; margin-top: 36px; }
/* scrollable viewport (auto-scrolls via JS; arrows + drag let users navigate manually) */
.tm-viewport {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.tm-viewport::-webkit-scrollbar { display: none; }
.tm-track { display: flex; gap: 22px; width: max-content; padding: 14px 11px; }
/* manual nav arrows */
.tm-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line, #e6ebf3);
  background: #fff; color: var(--blue); font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tm-arrow:hover { background: var(--blue); color: #fff; box-shadow: var(--shadow-lg); }
.tm-prev { left: 6px; }
.tm-next { right: 6px; }
@media (max-width: 760px) { .tm-arrow { width: 40px; height: 40px; font-size: 1.4rem; } }
.tm-card {
  flex: 0 0 256px; background: #fff; border: 1px solid var(--line, #e6ebf3); border-radius: 18px;
  padding: 28px 24px 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease;
}
.tm-card:hover { transform: translateY(-6px); border-color: var(--blue); box-shadow: var(--shadow-lg); }
.tm-avatar {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: center top;
  margin-bottom: 18px; background: #e9edf3;
  box-shadow: 0 0 0 1px var(--line, #e6ebf3), 0 10px 24px rgba(20,34,59,.12);
}
.tm-name { font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.tm-role { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.tm-stamp { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line, #e6ebf3); width: 100%; display: flex; align-items: center; justify-content: center; }
.tm-stamp img { width: 46%; max-width: 66px; height: auto; object-fit: contain; opacity: .9; }

/* ===== Dynamic corner peel (page hero) — curl reacts to cursor proximity ===== */
.peel-corner { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; --paper: #ffffff; }
.peel-corner .pc-reveal { position: absolute; inset: 0; background: var(--paper); clip-path: polygon(0 0,0 0,0 0); }
.peel-corner .pc-os { position: absolute; right: clamp(12px,1.8vw,28px); bottom: clamp(8px,1.4vw,22px); text-align: right; line-height: .88; font-weight: 700; letter-spacing: -.01em; font-size: clamp(17px,3.3vmin,36px); }
.peel-corner .pc-os .our { color: var(--blue); display: block; }
.peel-corner .pc-os .story { color: var(--ink); display: block; }
.peel-corner .pc-shadow { position: absolute; inset: 0; opacity: 0; clip-path: polygon(0 0,0 0,0 0); background: linear-gradient(135deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.20) 100%); }
.peel-corner .pc-curl { position: absolute; right: 0; bottom: 0; width: 0; height: auto; pointer-events: none; will-change: width, filter; filter: drop-shadow(2px 3px 5px rgba(0,0,0,.30)); }
.peel-corner .pc-link { position: absolute; right: 0; bottom: 0; pointer-events: auto; cursor: pointer; background: transparent; border: 0; outline-offset: -3px; }
.peel-hint { position: absolute; right: clamp(72px,11vw,150px); bottom: clamp(64px,9vw,132px); width: clamp(46px,6vw,74px); z-index: 21; pointer-events: none; color: #fff; opacity: .5; transition: opacity .5s ease; animation: peel-hint-bob 1.8s ease-in-out infinite; }
.peel-hint.is-hidden { opacity: 0; }
.peel-hint svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 5px rgba(0,0,0,.45)); }
@keyframes peel-hint-bob { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(6px,6px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .peel-hint { animation: none; } }

/* ===== Services page ===== */
.tab-deck__heading:empty { display: none; }
.svc-heading { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.06; color: var(--blue-dark); margin-bottom: 28px; }
.svc-logo-box { display: block; width: min(260px, 60%); height: auto; margin: 0 0 22px; }
/* Call-to-action — solid blue band */
.cta-bars { background: var(--blue); padding: 84px 0; }
.cta-bars h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 0; }
.cta-bars h2 em { font-style: italic; }
@media (max-width: 760px) {
  .cta-bars .two-col { text-align: center; }
  .cta-bars .two-col > div { text-align: center !important; }
}

/* Single-video carousel (no nav/dots needed) */
.card-carousel.cc-solo { padding: 0; }
.card-carousel.cc-solo .cc-nav,
.card-carousel.cc-solo .cc-dots { display: none; }

/* Request-a-quote picklist */
.quote-widget { display: inline-block; }
.cta-bars .two-col .quote-widget { justify-self: end; text-align: right; }
.quote-picker { margin: 16px 0 0 auto; display: flex; flex-direction: column; gap: 10px; text-align: left; max-width: 340px; background: #fff; border: 1px solid var(--line, #e6ebf3); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.quote-picker[hidden] { display: none; }
.quote-picker label { font-weight: 600; color: var(--ink); font-size: .95rem; }
.quote-select { font: inherit; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line, #e6ebf3); background: #fff; color: var(--ink); cursor: pointer; }
.quote-select:focus { outline: none; border-color: var(--blue); }
.quote-picker .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
@media (max-width: 760px) {
  .cta-bars .two-col .quote-widget { justify-self: center; text-align: center; }
  .quote-picker { margin-left: auto; margin-right: auto; }
}

/* Request-a-quote pop-up modal */
.quote-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.quote-modal[hidden] { display: none; }
.quote-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 34, 59, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.quote-modal__dialog { position: relative; z-index: 1; width: min(520px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 30px; text-align: left; }
.quote-modal__x { position: absolute; top: 8px; right: 14px; background: none; border: 0; font-size: 1.9rem; line-height: 1; color: var(--muted, #6b7686); cursor: pointer; }
.quote-modal h3 { margin: 0 0 4px; color: var(--ink); }
.quote-modal__svc { color: var(--muted, #6b7686); margin: 0 0 18px; font-size: .95rem; }
.quote-form { display: flex; flex-direction: column; gap: 12px; }
.quote-form .qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quote-form .field { margin: 0; }
.qf-check { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: .95rem; cursor: pointer; }
.qf-check input { width: 18px; height: 18px; accent-color: var(--blue); }
.quote-form [hidden] { display: none; }

/* Quote modal — success screen */
.quote-success { text-align: center; padding: 22px 6px 8px; }
.quote-success[hidden] { display: none; }
.quote-success__check { width: 104px; height: 104px; margin: 0 auto 16px; }
.qs-check-svg { width: 100%; height: 100%; }
.qs-check-circle { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: qs-draw .5s ease forwards; }
.qs-check-mark { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: qs-draw .35s .42s ease forwards; }
@keyframes qs-draw { to { stroke-dashoffset: 0; } }
.quote-success h3 { color: var(--blue); font-size: 1.7rem; margin: 0 0 6px; }
.quote-success p { color: var(--ink-soft); margin: 0; }
@media (prefers-reduced-motion: reduce) { .qs-check-circle, .qs-check-mark { animation: none; stroke-dashoffset: 0; } }