/* --- style block attrs: --- */

  /* The browser's own `[hidden] { display: none }` is the weakest rule there
     is, so any class that sets `display` beats it — .mg-gallery and .mg-empty
     both do. That silently broke every `el.hidden = true` in script.js: the
     Media Gallery's empty state stayed on screen underneath the photo grid,
     still reading "No videos yet" from whichever filter was last empty.
     Making the attribute authoritative fixes all of those toggles at once. */
  [hidden] { display: none !important; }

  :root {
    --gold: #B5562C;
    --gold-light: #D17A4F;
    --gold-dark: #8A3F1E;
    --cream: #F0E6D4;
    --cream-dark: #E3D5BC;
    --navy: #2B2622;
    --navy-light: #3D3631;
    --white: #FFFFFF;
    --off-white: #FAF5EC;
    --text-muted: #6B7280;
    --text-dark: #2B2622;
    --border-gold: rgba(181,86,44,0.3);
    --glass-bg: rgba(255,255,255,0.08);
    --glass-border: rgba(255,255,255,0.15);
    --shadow-gold: 0 20px 60px rgba(181,86,44,0.15);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
    --navbar-h: 76px;
    /* Rendered height of #hero-stats: 16px vertical padding × 2 plus a
       single row whose tallest element is the 30px icon — reduced
       further now that icon/number/label/sub-label all sit inline in
       one row instead of stacking. A small buffer is kept above the
       raw sum to stay safe against sub-pixel/line-height rounding
       differences across browsers. Used by #hero's bottom padding so
       hero copy is never centered into the space the stats bar
       occupies — keep this in sync if #hero-stats spacing changes
       again, or the two can drift apart and overlap. */
    --hero-stats-h: 74px;

    /* Subtle tonal variants of the existing navy/off-white palette used to
       give adjacent Services-page sections gentle visual separation
       without introducing any new hues. Each is just navy blended at a
       low opacity into white/off-white. */
    --tint-explore: color-mix(in srgb, var(--off-white) 92%, var(--navy) 8%);
    --tint-process: color-mix(in srgb, var(--white) 96%, var(--navy) 4%);
    --tint-pricing: color-mix(in srgb, var(--off-white) 97%, var(--navy) 3%);
    --tint-availability: color-mix(in srgb, var(--white) 90%, var(--navy) 10%);

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --font-mono:    'DM Mono', monospace;
    /* Same number typography as the website hero page's stats (.stat-num) */
    --dash-metric-font-family: var(--font-display);
    --dash-metric-font-weight: 600;
    --dash-metric-letter-spacing: -0.01em;
    --dash-metric-font-feature: 'pnum' 1, 'lnum' 1, 'kern' 1;
    --dash-metric-font-variant: proportional-nums lining-nums;

    /* ══════════════════════════════════════════════════════════════
       GLOBAL TYPOGRAPHY SYSTEM — single source of truth for every
       page and the dashboard. Do not hardcode font-sizes/families in
       individual sections; reference these tokens instead so the
       whole site scales and updates together.
       (Hero heading/eyebrow/sub on the homepage hero and the main
       site navbar are intentionally left on their original,
       pre-existing values and are not driven by these tokens.)

       Standardized type scale — 7 tokens cover every case on the site:
       display  → hero headings (other page heroes, not the homepage one)
       h1       → page headings
       h2       → section headings
       h3       → card headings
       h4       → small headings
       body     → paragraphs, descriptions, nav text, buttons, forms,
                  labels, lists and general UI text
       caption  → captions, helper text, metadata, badges, timestamps,
                  micro text
       ══════════════════════════════════════════════════════════════ */
    --fs-display:     57px;
    --fs-h1:          45px;
    --fs-h2:          36px;
    --fs-h3:          28px;
    --fs-h4:          22px;
    --fs-body:        16px;
    --fs-caption:     12px;

    --lh-display:     1.15;
    --lh-body:        1.7;
    --ls-eyebrow:     0.25em;
  }

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

  html { scroll-behavior: auto; font-size: 16px; }

  body {
    font-family: var(--font-body);
    background: var(--off-white);
    color: var(--text-dark);
    overflow-x: hidden;
    line-height: 1.8;
    font-size: var(--fs-body);
    font-weight: 300;
    letter-spacing: normal;
  }

  /* ─── UTILITIES ─── */
  .gold { color: var(--gold); }
  .serif {
    font-family: var(--font-display);
  }
  .serif-display {
    font-family: var(--font-display);
  }
  .eyebrow {
    font-size: var(--fs-caption);
    font-weight: 500;
    font-family: var(--font-mono);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }
  .eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1.5px;
    background: var(--gold);
  }
  .section-pad { padding: 100px 0; }
  .container { max-width: 1260px; margin: 0 auto; padding: 0 40px; }
  .reveal { opacity: 0; transform: translateY(40px) scale(0.97); filter: blur(6px); }

  /* ─── NAVBAR ─── */
  #navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    padding: 9px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateY(0);
    opacity: 1;
    background: rgba(43,38,34,0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
  }
  #navbar.scrolled {
    background: rgba(43,38,34,0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 2px 24px rgba(0,0,0,0.2);
    padding: 6px 40px;
  }
  /* ---------- BRAND MARK ----------
     The logo file is the full portrait lockup (shield above the wordmark) on
     a white JPEG background, which is far too tall for a nav bar and carries
     a wordmark the markup already renders as live text. So the square slots
     show only the shield, cropped out of the same file with background-size
     and background-position rather than a second image — one asset, no
     duplication, and it stays crisp because the source is 886px wide.

     The numbers: the shield occupies a ~496px square at (198,46) in an
     886x846 image. Scaling that square to the box means sizing the whole
     image to 886/496 = 178.6% of the box, and offsetting proportionally. */
  .vl-mark {
    background-image: url('../img/VlookAsset_Logo.jpeg');
    background-size: 178.6% auto;
    background-position: 50.8% 13.1%;
    background-repeat: no-repeat;
    /* The source has no transparency, so the white ground is part of the
       image — the badge simply owns it rather than fighting it. */
    background-color: #fff;
    flex: none;
  }
  .nav-logo { display: flex; align-items: center; gap: 11px; }
  .nav-logo .vl-mark {
    width: 42px; height: 42px;
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  }
  .nav-logo__text { display: flex; flex-direction: column; }
  .nav-logo .brand {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.04em;
  }
  .nav-logo .tagline {
    font-size: 10.5px;
    font-family: var(--font-mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 2px;
  }
  .nav-links { display: flex; align-items: center; gap: 42px; }
  .nav-links a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    transition: color 0.2s;
    position: relative;
    text-transform: uppercase;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-links a.active { color: #fff; }
  .nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; right: 0;
    height: 1.5px;
    background: var(--gold);
  }
  .nav-ctas { display: flex; align-items: center; gap: 12px; }

  /* The links + buttons wrapper takes no part in layout on desktop, so the
     bar is still logo | links | buttons. Below 1100px the links no longer
     fit on one row, so they fold into a drop-down panel behind a menu button. */
  .nav-menu { display: contents; }
  .nav-toggle {
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
  }
  @media (max-width: 1100px) {
    #navbar { padding-left: 20px; padding-right: 20px; }
    #navbar.scrolled { padding-left: 20px; padding-right: 20px; }
    .nav-toggle { display: inline-flex; }
    .nav-menu {
      display: none;
      position: absolute;
      top: 100%; left: 0; right: 0;
      flex-direction: column;
      gap: 18px;
      padding: 18px 20px 22px;
      background: #2B2622;
      box-shadow: 0 12px 24px rgba(0,0,0,0.25);
      max-height: calc(100vh - 100%);
      overflow-y: auto;
    }
    #navbar.nav-open .nav-menu { display: flex; }
    .nav-menu .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-menu .nav-links a {
      padding: 14px 4px;
      font-size: 13px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .nav-menu .nav-links a.active::after { display: none; }
    .nav-menu .nav-links a.active { color: var(--gold); }
    .nav-menu .nav-ctas { flex-direction: column; align-items: stretch; }
    .nav-menu .nav-ctas button { width: 100%; padding: 13px 22px; }
  }
  @media (max-width: 400px) {
    .nav-logo .tagline { display: none; }
    .nav-logo .brand { font-size: 21px; }
  }
  .btn-outline-white {
    padding: 9px 22px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 3px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    background: transparent;
    transition: all 0.25s;
  }
  .btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
  .btn-gold {
    padding: 9px 22px;
    background: var(--gold);
    border: none;
    border-radius: 3px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s;
  }
  .btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }

  /* ─── HERO ───
     Rebuilt on a fluid, content-driven box instead of a height-capped
     slab: `min-height: 100vh` gives a full, roomy frame with a floor
     that guarantees space on any viewport, and — critically — there is
     NO `max-height` anymore. A max-height + overflow:hidden combo is
     exactly what caused the previous pancaking bug: once real content
     needed more room than the capped box allowed, it had nowhere to go
     and started overlapping itself. Letting the section grow with its
     content (rather than clipping it) is what actually guarantees zero
     overlap. `--hero-stats-h` reserves real space for the absolutely
     positioned stats bar docked at the bottom, so hero copy is never
     centered into the zone that bar sits on top of. */
  #hero {
    position: relative;
    /* Locked to the viewport (rather than just a min-height floor) so the
       stats strip — anchored to the bottom of this section — is always
       guaranteed to land inside the first viewport alongside the hero
       copy and both CTAs, with no scroll required on load. */
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-top: 104px;
    /* Reduced reserve below the compact stats bar (was 76px) to free up
       vertical room now that the hero fits a hard 100vh, while still
       keeping #how-it-works from reading as an abrupt stack. */
    padding-bottom: calc(52px + var(--hero-stats-h));
  }
  @media (max-height: 820px) {
    /* Shorter browser viewports (laptops with visible chrome) get a
       tighter top gap; the reserved bottom space for the stats bar is
       untouched so content always clears it. */
    #hero { padding-top: 76px; }
  }
  @media (max-width: 1200px) and (min-width: 981px) {
    /* Small-desktop / laptop band: ease the top gap down a touch so the
       two-column grid has more vertical room to breathe before the
       layout switches to a single column at 980px. */
    #hero { padding-top: 92px; }
  }
  #hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=1800&q=85');
    background-size: cover;
    background-position: center;
    filter: blur(1.5px) brightness(0.8) contrast(0.92);
  }
  #hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(26,22,19,0.97) 0%, rgba(28,24,21,0.9) 32%, rgba(30,26,23,0.62) 62%, rgba(32,28,25,0.22) 100%);
  }
  #hero-layer2 {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=70');
    background-size: 35%;
    background-position: top right;
    background-repeat: no-repeat;
    opacity: 0.25;
  }
  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 660px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.85rem;
  }
  .hero-eyebrow {
    font-size: 15px;
    font-family: var(--font-body);
    letter-spacing: 0.16em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .hero-eyebrow::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--gold);
    display: inline-block;
  }
  .hero-h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 4vw, 3.6rem);
    color: #fff;
    line-height: 1.28;
    font-weight: 300;
    letter-spacing: -0.015em;
    max-width: 620px;
    opacity: 0;
  }
  .hero-h1 em {
    font-style: normal;
    color: var(--gold);
    font-family: var(--font-display);
  }
  .hero-h1-line2 {
    /* Locks line 2 to a single line at standard desktop widths so the
       heading can never accidentally spill onto a 3rd line. */
    white-space: nowrap;
  }
  .hero-sub {
    color: rgba(255,255,255,0.78);
    font-family: var(--font-body);
    font-size: 21px;
    line-height: 1.75;
    max-width: 480px;
    font-weight: 300;
    opacity: 0;
  }
  .hero-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; opacity: 0; }
  .btn-hero-primary {
    padding: 13px 28px;
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
    border: none;
    border-radius: 4px;
    color: #25201D;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 10px 34px rgba(181,86,44,0.4), 0 2px 8px rgba(0,0,0,0.25);
  }
  .btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(181,86,44,0.55), 0 4px 16px rgba(0,0,0,0.3); filter: brightness(1.06); }
  .btn-hero-secondary {
    padding: 13px 24px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    color: rgba(255,255,255,0.9);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
  }
  .btn-hero-secondary:hover { border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.13); transform: translateY(-2px); }
  .play-icon {
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .play-icon::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid rgba(255,255,255,0.8);
    border-top: 2.5px solid transparent;
    border-bottom: 2.5px solid transparent;
    margin-left: 1px;
  }
  @media (max-width: 520px) {
    /* Below phone width, stack the two CTAs vertically instead of trying to
       fit them side by side — keeps tap targets full-width and legible. */
    .hero-btns { flex-direction: column; align-items: stretch; gap: 16px; }
    .btn-hero-primary, .btn-hero-secondary { width: 100%; }
  }

  /* ─── HERO CONTAINER GRID — editorial two-column framing ───
     Text column + story-box column, vertically centered as a pair so
     the hero reads as one deliberately composed frame rather than two
     independently-placed elements. */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    align-items: center;
    /* Widened further so the story-box card sits well clear of the
       headline/buttons, giving the hero an open, luxurious feel. Trimmed
       slightly (was 120px) now that the container itself is wider, so the
       extra width goes to the columns — and the visual card — rather than
       purely to the gap between them. */
    gap: 100px;
    padding: 0 64px;
  }
  @media (max-width: 1400px) {
    /* Eases the gap down early so the transition into the 1200px
       breakpoint below feels like one continuous scale rather than a
       sudden jump. */
    .hero-grid { gap: 88px; }
  }
  @media (max-width: 1200px) {
    /* Small-desktop / laptop band. Side padding also shrinks here —
       80px of inline padding was stealing width from the text column
       right as the gap and visual column were already narrowing,
       which is what pushed copy into wrapping harder and colliding. */
    .hero-grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 75px; padding: 0 40px; }
  }
  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; padding: 0 32px; }
    /* Single column stacks the copy above the journey visual, which no
       longer fits a locked 100vh — let the hero grow instead of clipping. */
    #hero { height: auto; }
  }
  @media (max-width: 600px) {
    #hero { padding-top: 96px; }
    .hero-grid { padding: 0 20px; gap: 36px; }
    .hero-eyebrow { font-size: 12px; }
    /* The 3rem floor and the no-wrap second line were sized for desktop;
       on a phone "You Can't Always Visit" ran off the right edge. */
    .hero-h1 { font-size: clamp(2.1rem, 9.5vw, 3rem); line-height: 1.2; }
    .hero-h1-line2 { white-space: normal; }
    .hero-sub { font-size: 17px; line-height: 1.6; }
  }

  #hero-visual {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: min(3176px, calc((100vh - 204px - var(--hero-stats-h)) * 4 / 3));
    margin: 24px 0 0 auto;
    opacity: 0;
    will-change: transform;
  }
  .hv-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* Softer, more premium corner radius. */
    border-radius: 32px;
    overflow: hidden;
    background: var(--navy-light);
    box-shadow:
      0 48px 108px rgba(0,0,0,0.45),
      0 10px 32px rgba(0,0,0,0.3),
      inset 0 0 0 1px rgba(255,255,255,0.09);
  }
  .hv-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .hv-slide:first-child { opacity: 1; }
  .hv-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .hv-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(43,38,34,0.05) 30%, rgba(43,38,34,0.55) 68%, rgba(43,38,34,0.95) 100%);
  }
  .hv-slide-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(181,86,44,0.16) 0%, rgba(43,38,34,0) 45%);
  }
  .hv-slide-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    /* Scaled up again in step with the larger frame so the caption block
       still feels proportioned to the card rather than lost inside it. */
    padding: 3.6rem 3.4rem 3.4rem;
    box-sizing: border-box;
  }
  .hv-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-light);
    background: rgba(30,26,23,0.4);
    border: 1px solid rgba(209,122,79,0.3);
    padding: 8px 19px;
    border-radius: 24px;
    margin-bottom: 21px;
  }
  .hv-badge::before { content: ''; width: 21px; height: 1px; background: var(--gold-light); display: inline-block; }
  .hv-title {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.3vw, 30px);
    font-weight: 300;
    color: #fff;
    line-height: 1.32;
    letter-spacing: -0.008em;
    max-width: 92%;
  }
  .hv-progress {
    display: flex;
    gap: 8px;
    margin-top: 42px;
  }
  .hv-progress-seg {
    flex: 1;
    height: 5px;
    border-radius: 2.5px;
    background: rgba(255,255,255,0.2);
    overflow: hidden;
  }
  .hv-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  }
  @media (max-width: 1200px) {
    #hero-visual { max-width: min(2414px, calc((100vh - 204px - var(--hero-stats-h)) * 4 / 3)); margin: 24px 0 0 auto; }
  }
  @media (max-width: 980px) {
    #hero-visual { display: none; }
  }
  @media (max-height: 820px) {
    /* Mirrors #hero's own padding-top drop (104px → 76px) at this same
       breakpoint, so the height-derived half of the max-width formula
       stays accurate to the real vertical budget instead of under- or
       over-estimating it. */
    #hero-visual { max-width: min(3176px, calc((100vh - 176px - var(--hero-stats-h)) * 4 / 3)); }
  }
  @media (max-width: 1200px) and (max-height: 820px) {
    #hero-visual { max-width: min(2414px, calc((100vh - 176px - var(--hero-stats-h)) * 4 / 3)); }
  }
  @media (max-height: 760px) {
    .hero-content { gap: 1.35rem; }
  }

  #hero-stats {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(30,26,23, 0.94);
    backdrop-filter: blur(14px);
    z-index: 3;
    padding: 16px 80px;
    display: flex;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid rgba(181,86,44,0.22);
    box-shadow: 0 -16px 32px rgba(0,0,0,0.25);
  }
  /* Accent line between the hero and the stats bar: solid terracotta, fading out at both
     ends, so the two sections read as clearly separate. */
  #hero-stats::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #B5562C 18%, #D17A4F 50%, #B5562C 82%, transparent 100%);
    box-shadow: 0 0 14px rgba(209,122,79,0.55);
    pointer-events: none;
  }
  .stat-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: 1;
    padding: 0 24px;
    border-right: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
  }
  .stat-item:first-child { padding-left: 0; }
  .stat-item:last-child { border-right: none; }
  .stat-icon svg, .why-feat-icon svg, .why-metric-icon svg, .cred-icon svg,
  .bac-card-icon svg, .cp-iico svg, .fab-icon svg,
  .ico svg, .pp-badge svg, .phone-download svg { display: block; }
  .stat-icon {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(181,86,44,0.4);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 15px;
    flex-shrink: 0;
  }
  .stat-num {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: proportional-nums lining-nums;
    font-feature-settings: 'pnum' 1, 'lnum' 1, 'kern' 1;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.1;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .stat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .stat-label {
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
  }
  .stat-sub {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 300;
    color: rgba(255,255,255,0.38);
    line-height: 1.35;
  }

  /* ─── HOW IT WORKS ─── */
  #how-it-works {
    background: #FAF5EC;
    padding: 72px 0 96px;
    overflow: hidden;
  }
  .how-header { margin-bottom: 0; }
  .how-title {
    font-family: var(--font-display);
    font-size: clamp(2.94rem, 3.92vw, 3.528rem);
    font-weight: 300;
    letter-spacing: -0.015em;
    color: var(--navy);
    line-height: 1.28;
    margin-bottom: 18px;
  }
  .how-title .accent {font-size: clamp(2.94rem, 3.92vw, 3.528rem); 
    color: var(--gold);
    font-style: italic;
    font-family: var(--font-display);
  }
  .how-sub {
    font-family: var(--font-body);
    font-size: 15.7px;
    color: #2B2622;
    max-width: 580px;
    line-height: 1.75;
    margin-bottom: 60px;
    font-weight: 300;
  }
  /* Uniform vertical rhythm for the Journey section's stacked heading text:
     eyebrow → title → subtitle now share the same line-height/margin scale
     used by every other section header on the site (see .services-header). */
  .how-header .eyebrow { line-height: 1; margin-bottom: 16px; }
  /* ─── JOURNEY — all seven steps visible at once ───
     Replaced a walking-figure animation that revealed one narrow,
     sentence-long card at a time (~30s to see every step). Each step is
     now an icon, a short title and a five-word line, readable at a glance. */
  .jg-steps {
    /* Room above the row for the step picture that pops up. */
    --jg-stage: 262px;
    list-style: none;
    margin: -40px 0 0;
    padding: var(--jg-stage) 0 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 18px;
    position: relative;
  }
  /* The line joining the step icons, from the first centre to the last. */
  .jg-steps::before {
    content: '';
    position: absolute;
    top: calc(var(--jg-stage) + 29px);
    left: calc(100% / 14);
    right: calc(100% / 14);
    height: 2px;
    background: linear-gradient(90deg, rgba(181,86,44,0.25), var(--gold));
  }
  .jg-step { position: relative; text-align: center; -webkit-tap-highlight-color: transparent; }
  .jg-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 12px; }
  .jg-dot {
    position: relative;
    z-index: 1;
    width: 58px; height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1.5px solid rgba(181,86,44,0.5);
    color: var(--gold);
    font-size: 21px;
    box-shadow: 0 6px 18px rgba(43,38,34,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  /* The destination step is filled in. */
  .jg-step:last-child .jg-dot { background: var(--gold); border-color: var(--gold); color: #fff; }
  /* The step currently being shown (cycled by script.js, or hovered). */
  .jg-step.is-active .jg-dot {
    transform: scale(1.14);
    background: var(--gold); border-color: var(--gold); color: #fff;
    box-shadow: 0 10px 26px rgba(181,86,44,0.4);
  }
  .jg-step.is-active .jg-title { color: var(--gold-dark, #8f6f22); }

  /* Step picture: pops up above its own step, then settles back. */
  .jg-pop {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    z-index: 2;
    opacity: 0;
    transform: translate(-50%, 14px) scale(0.86);
    transform-origin: bottom center;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
    pointer-events: none;
  }
  .jg-pop img {
    display: block;
    height: 230px;
    width: auto;
    max-width: calc(100vw - 32px);
    object-fit: cover;
    border-radius: 14px;
    border: 4px solid #fff;
    box-shadow: 0 18px 40px rgba(43,38,34,0.22);
    background: #fff;
  }
  /* Little pointer from the picture down to its step. */
  .jg-pop::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -7px;
    width: 14px; height: 14px;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 3px 3px 6px rgba(43,38,34,0.08);
  }
  .jg-step.is-active .jg-pop { opacity: 1; transform: translate(-50%, 0) scale(1); }
  /* Keep the first and last pictures inside the page instead of centring them. */
  .jg-step:first-child .jg-pop { left: 0; transform: translate(0, 14px) scale(0.86); transform-origin: bottom left; }
  .jg-step:first-child.is-active .jg-pop { transform: translate(0, 0) scale(1); }
  .jg-step:first-child .jg-pop::after { left: 29px; }
  .jg-step:last-child .jg-pop { left: auto; right: 0; transform: translate(0, 14px) scale(0.86); transform-origin: bottom right; }
  .jg-step:last-child.is-active .jg-pop { transform: translate(0, 0) scale(1); }
  .jg-step:last-child .jg-pop::after { left: auto; right: 22px; transform: rotate(45deg); }
  .jg-num {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--gold);
    margin-bottom: 6px;
  }
  .jg-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--navy);
    margin: 0 0 6px;
  }
  .jg-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.45;
    color: #5b6472;
    margin: 0;
  }
  /* Tablet: two rows of four; the connecting line no longer runs straight. */
  @media (max-width: 1024px) {
    .jg-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; }
    .jg-steps::before { display: none; }
    /* Steps wrap onto several rows here, so every picture pops up in one
       shared spot centred above the steps instead of above its own step. */
    .jg-step { position: static; }
    .jg-pop,
    .jg-step:first-child .jg-pop,
    .jg-step:last-child .jg-pop {
      top: 0; bottom: auto; left: 50%; right: auto;
      transform: translate(-50%, 14px) scale(0.86);
      transform-origin: center;
    }
    .jg-step.is-active .jg-pop,
    .jg-step:first-child.is-active .jg-pop,
    .jg-step:last-child.is-active .jg-pop { transform: translate(-50%, 0) scale(1); }
    .jg-pop::after { display: none; }
  }
  /* Phone: a vertical list, icon on the left, line running down the icons. */
  @media (max-width: 640px) {
    .jg-steps { --jg-stage: 236px; grid-template-columns: 1fr; row-gap: 0; }
    .jg-pop img { height: 214px; }
    .jg-steps::before {
      display: block;
      top: calc(var(--jg-stage) + 26px); bottom: 26px;
      left: 25px; right: auto;
      width: 2px; height: auto;
      background: linear-gradient(180deg, rgba(181,86,44,0.25), var(--gold));
    }
    .jg-step {
      display: grid;
      grid-template-columns: 52px 1fr;
      column-gap: 16px;
      align-items: center;
      text-align: left;
      padding: 10px 0;
    }
    .jg-dot { grid-row: 1 / span 3; width: 52px; height: 52px; margin: 0; font-size: 19px; }
    .jg-num { margin-bottom: 2px; }
    .jg-title { font-size: 19px; margin-bottom: 2px; }
  }

  /* ─── SERVICES → BEFORE & AFTER (single-viewport redesign) ─── */
  #services { background: #fff; padding: 56px 0; overflow: hidden; }

  /* ─── TESTIMONIALS — AUTO-SCROLLING SUCCESS STORIES ─── */
  #testimonials { background: #fff; padding: 100px 0; overflow: hidden; }
  .testimonials-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }
  .testimonials-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--navy);
    line-height: 1.06;
    font-weight: 300;
  }
  .testimonials-controls { display: flex; gap: 10px; }
  .t-nav-btn {font-family: var(--font-body); 
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(181,86,44,0.3);
    background: #fff;
    color: var(--navy);
    font-size: var(--fs-body);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.25s;
   font-weight: 600; letter-spacing: 0.02em;}
  .t-nav-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

  /* Viewport that masks the moving track */
  .testimonial-wrapper {
    position: relative;
    overflow: hidden;
    padding: 30px 4px 46px;
    margin: -30px -4px -46px;
  }
  .testimonial-track {
    display: flex;
    gap: 0;
    will-change: transform;
  }
  .testimonial-track.dragging { transition: none !important; cursor: grabbing; }

  /* Large horizontal card */
  .testimonial-slide {
    flex: 0 0 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(43,38,34,0.07);
    border: 1px solid rgba(181,86,44,0.12);
    transform: scale(0.96);
    opacity: 0.6;
    transition: transform 0.6s cubic-bezier(.65,0,.35,1), opacity 0.6s cubic-bezier(.65,0,.35,1), box-shadow 0.6s ease;
  }
  .testimonial-slide.t-active {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 30px 70px rgba(43,38,34,0.13);
  }
  .testimonial-slide.t-float { animation: tFloat 5s ease-in-out infinite; }
  @keyframes tFloat { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1) translateY(-7px); } }

  .t-image { position: relative; overflow: hidden; min-height: 360px; }
  .t-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
    transform: scale(1.04);
    transition: transform 4s ease;
  }
  .testimonial-slide.t-active .t-image img { transform: scale(1.1); }
  .t-image-badge {
    position: absolute;
    bottom: 18px;
    left: 18px;
    background: rgba(43,38,34,0.78);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: var(--fs-caption);
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 36px);
    font-family: var(--font-mono);
  }
  .t-image-badge::before {font-family: var(--font-mono); 
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUgMTNsNCA0TDE5IDciIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMy4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
    width: 16px;
    height: 16px;
    padding: 4px;
    box-sizing: border-box;
    background: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-caption);
    flex-shrink: 0;
  }
  .t-content {
    padding: 46px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .t-quote-icon {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    color: var(--gold);
    line-height: 0.5;
    margin-bottom: 14px;
    opacity: 0.75;
  }
  .t-quote {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--navy);
    line-height: 1.55;
    margin-bottom: 28px;
    font-style: italic;
    letter-spacing: -0.01em;
  }
  .t-divider { width: 40px; height: 1px; background: var(--gold); margin-bottom: 18px; }
  .t-author { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .t-author-id { display: flex; align-items: center; gap: 12px; }
  .t-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(181,86,44,0.35);
  }
  .t-name {font-family: var(--font-display); 
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--navy);
  }
  .t-role {font-family: var(--font-mono);  font-size: var(--fs-caption); color: #3D3631; opacity: 0.6; }
  .t-plan {
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 4px;
    padding: 7px 14px;
    white-space: nowrap;
    font-family: var(--font-mono);
  }

  /* Progress dots */
  .t-dots { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }
  .t-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(181,86,44,0.3); cursor: pointer; transition: all 0.3s; }
  .t-dot.t-dot-active { background: var(--gold); transform: scale(1.3); width: 22px; border-radius: 4px; }

  /* Marquee */
  .marquee-section { padding: 40px 0; border-top: 1px solid rgba(0,0,0,0.06); margin-top: 60px; overflow: hidden; }
  .marquee-label {
    text-align: center;
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 24px;
    font-family: var(--font-mono);
  }
  .marquee-track { display: flex; gap: 0; will-change: transform; }
  .marquee-list {
    display: flex;
    gap: 0;
    animation: marquee 24s linear infinite;
    flex-shrink: 0;
  }
  .marquee-list:hover, .marquee-list:focus-within { animation-play-state: paused; }
  @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
  .marquee-item {font-family: var(--font-body); 
    padding: 0 56px;
    font-size: var(--fs-body);
    font-weight: 600;
    color: rgba(43,38,34,0.4);
    white-space: nowrap;
    transition: color 0.3s;
    cursor: default;
    letter-spacing: 0.02em;
    border-right: 1px solid rgba(0,0,0,0.08);
  }
  .marquee-item:hover { color: var(--gold); }

  /* ─── WHY VLOOKASSET (compacted to fit one viewport) ─── */
  #why { background: var(--cream); padding: 60px 0; overflow: hidden; }
  .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .why-eyebrow { margin-bottom: 14px; }
  #ab-team .eyebrow,
  #ab-trust .eyebrow,
  #cp-cta .eyebrow,
  #cp-form-section .eyebrow,
  #cp-faq .eyebrow {
    font-size: 15px;
  }
  #how-it-works .eyebrow,
  #testimonials .eyebrow,
  #before-after .eyebrow,
  .why-eyebrow {
    font-size: 15px;
  }
  .why-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 4vw, 3.6rem);
    font-weight: 300;
    letter-spacing: -0.015em;
    color: var(--navy);
    line-height: 1.28;
    margin-bottom: 14px;
  }
  .why-sub {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: #3D3631;
    line-height: 1.75;
    margin-bottom: 26px;
    max-width: 440px;
    font-weight: 300;
  }
  .why-features { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
  .why-feature { display: flex; align-items: flex-start; gap: 14px; }
  .why-feat-icon {
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.3s;
  }
  .why-feature:hover .why-feat-icon { background: var(--gold); transform: rotate(5deg); }
  .why-feat-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 3px;
  }
  .why-feat-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: #3D3631;
    line-height: 1.6;
    font-weight: 300;
  }
  .why-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
  .why-metric {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(181,86,44,0.15);
    text-align: center;
  }
  .why-metric-icon {
    width: 32px;
    height: 32px;
    background: rgba(181,86,44,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: var(--gold);
    font-size: 15px;
  }
  .why-metric-val {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 400;
    color: var(--navy);
  }
  .why-metric-label {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    font-family: var(--font-mono);
   font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}

  /* Right side visual */
  .why-visual { position: relative; height: 480px; }
  .why-villa {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.15);
    will-change: transform;
    height: 100%;
  }
  .why-villa img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* The frame takes the dashboard photo's own proportions, so the whole
     picture shows with nothing cropped at any width. */
  .why-visual { height: auto; align-self: center; }
  .why-villa { height: auto; aspect-ratio: 1600 / 893; }
  .why-phone {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 170px;
    background: #2B2622;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    will-change: transform;
    border: 3px solid rgba(255,255,255,0.1);
  }
  .phone-screen {
    padding: 14px 12px;
    background: #fff;
    margin: 7px;
    border-radius: 16px;
    font-size: var(--fs-caption);
    color: var(--navy);
  }
  .phone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .phone-logo {
    font-weight: 500;
    font-size: var(--fs-caption);
    color: var(--gold);
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
  }
  .phone-status {
    font-size: var(--fs-caption);
    color: #16A34A;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-mono);
  }
  .phone-status::before { content: ''; width: 5px; height: 5px; background: #16A34A; border-radius: 50%; }
  .phone-img-thumb {
    height: 64px;
    border-radius: 9px;
    background-size: cover;
    background-position: center;
    margin-bottom: 8px;
    background-image: url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=400&q=70');
  }
  .phone-location {
    font-size: var(--fs-caption);
    color: var(--text-muted);
    margin-bottom: 7px;
    font-family: var(--font-mono);
  }
  .phone-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 8px; }
  .phone-thumb { height: 36px; border-radius: 6px; background-size: cover; background-position: center; }
  .phone-thumb-plus {font-family: var(--font-mono); 
    height: 36px;
    border-radius: 6px;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-caption);
    font-weight: 500;
  }
  .phone-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
  .phone-stat { background: var(--cream); border-radius: 6px; padding: 5px; text-align: center; }
  .phone-stat-val {font-family: var(--font-mono); 
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--navy);
  }
  .phone-stat-label {font-family: var(--font-mono);  font-size: var(--fs-caption); color: var(--text-muted);  font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}
  .phone-download {
    background: var(--gold);
    color: #fff;
    text-align: center;
    padding: 7px;
    border-radius: 8px;
    font-size: var(--fs-caption);
    font-weight: 500;
    margin-top: 8px;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
  }

  /* ─── TRUST CREDENTIALS ───
     Compacted ~25% in overall height: top/bottom padding trimmed, the
     title-to-grid gap tightened, and card internal spacing eased back
     slightly. Now driven by the shared type-scale tokens like every
     other section. */
  #trust-creds { background: var(--off-white); padding: 58px 0; }
  .creds-title-wrap { text-align: center; margin-bottom: 34px; }
  .creds-title {
    font-size: var(--fs-h3);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-family: var(--font-display);
  }
  .creds-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
  @media (max-width: 900px) { .creds-grid { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 600px) { .creds-grid { grid-template-columns: 1fr; } }
  .cred-card {
    background: #fff;
    border-radius: 14px;
    padding: 19px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s;
  }
  .cred-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-card); border-color: rgba(181,86,44,0.2); }
  .cred-icon {
    width: 40px;
    height: 40px;
    background: var(--navy);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
  }
  .cred-title {font-family: var(--font-display); 
    font-size: var(--fs-h4);
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 3px;
  }
  .cred-desc {
    font-size: var(--fs-body);
    color: var(--text-muted);
    line-height: 1.5;
    font-family: var(--font-body);
    font-weight: 300;
  }

  /* ─── BEFORE & AFTER CARDS (rendered inside #services) ─── */
  .ba-header { margin-bottom: 32px; }
  .ba-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--navy);
    line-height: 1.08;
    margin-bottom: 12px;
  }
  .ba-sub {
    font-size: var(--fs-body);
    color: #3D3631;
    max-width: 540px;
    line-height: 1.6;
    opacity: 0.85;
    font-family: var(--font-body);
    font-weight: 300;
  }
  .ba-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
  .ba-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .ba-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 24px 48px rgba(0,0,0,0.12); }
  .ba-slider-wrap {
    position: relative;
    height: 220px;
    cursor: col-resize;
    user-select: none;
    overflow: hidden;
  }
  .ba-before, .ba-after {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }
  .ba-after {
    clip-path: inset(0 0 0 50%);
    transition: clip-path 0.05s;
  }
  .ba-badge {
    position: absolute;
    top: 14px;
    z-index: 2;
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-mono);
  }
  .ba-badge-before { left: 14px; background: rgba(75,58,38,0.88); }
  .ba-badge-after { right: 14px; background: rgba(22,101,52,0.88); }
  .ba-handle {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: #fff;
    cursor: col-resize;
    z-index: 3;
  }
  .ba-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  .ba-handle::after {
    content: '⟨⟩';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    z-index: 1;
  }
  .ba-card-body { padding: 18px 20px 20px; }
  .ba-card-icon-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 2px; }
  .ba-card-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(181,86,44,0.35);
    background: rgba(181,86,44,0.06);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    font-size: 16px;
    flex-shrink: 0;
  }
  .ba-card-text { flex: 1; min-width: 0; }
  .ba-case-title {font-family: var(--font-display); 
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 4px;
    line-height: 1.3;
  }
  .ba-case-desc {
    font-size: var(--fs-body);
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-weight: 300;
  }
  .ba-view-link {font-family: var(--font-body); 
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--gold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
  }
  .ba-view-link:hover { gap: 9px; }

  /* ─── COMPLETE PROPERTY CARE SECTION ─── */
  #property-care { background: var(--off-white); padding: 100px 0; }
  .services-header { margin-bottom: 52px; }
  .services-eyebrow {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-family: var(--font-mono);
  }
  .services-eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1.5px;
    background: var(--gold);
  }
  .services-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3rem, 4vw, 3.6rem);
    color: var(--navy);
    line-height: 1.28;
    letter-spacing: -0.015em;
    max-width: 600px;
    margin-bottom: 18px;
  }
  .services-subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--text-muted);
    max-width: 520px;
    line-height: 1.75;
    font-weight: 300;
  }
  .services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
  .service-card {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.4s ease;
    cursor: pointer;
    position: relative;
    will-change: transform;
  }
  .service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 64px rgba(0,0,0,0.1), 0 0 0 1px rgba(181,86,44,0.2);
  }
  .service-img {
    height: 220px;
    overflow: hidden;
    position: relative;
    border-radius: 12px 12px 0 0;
  }
  /* Product Solutions section: slightly more rounded corners for a more polished feel (image size/crop/shadow/spacing unchanged) */
  .product-overview-grid .service-img { border-radius: 16px 16px 0 0; }
  .service-card:hover .service-img-inner { transform: scale(1.06); }
  .service-img-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
  }
  .service-body { padding: 28px 24px 26px; }
  .service-num {
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 0.25em;
    margin-bottom: 10px;
    font-family: var(--font-mono);
   text-transform: uppercase;}
  .service-name {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 12px;
    line-height: 1.22;
  }
  .service-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--text-muted);
    line-height: 1.7;
    font-weight: 300;
  }
  .service-cta {font-family: var(--font-body); 
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(6px);
    margin-top: 16px;
  }
  .service-card:hover .service-cta { opacity: 1; transform: translateY(0); }
  .service-cta-arrow { transition: transform 0.25s; }
  .service-cta:hover .service-cta-arrow { transform: translateX(4px); }

  /* ─── BEFORE & AFTER TRANSFORMATIONS — INTERACTIVE COMPARISON GRID ─── */
  #before-after { background: #fff; padding: 100px 0; overflow: hidden; }
  .bac-header { margin-bottom: 56px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
  .bac-header .eyebrow { justify-content: flex-start; }
  .bac-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--navy);
    line-height: 1.08;
    margin-bottom: 14px;
  }
  .bac-sub {
    font-size: var(--fs-body);
    color: #3D3631;
    max-width: 560px;
    line-height: 1.7;
    opacity: 0.85;
    font-family: var(--font-body);
    font-weight: 300;
  }

  .bac-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .bac-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(43,38,34,0.07);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.5s cubic-bezier(.65,0,.35,1), box-shadow 0.5s cubic-bezier(.65,0,.35,1);
  }
  .bac-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(43,38,34,0.14);
  }

  /* Draggable comparison slider */
  .bac-compare {
    position: relative;
    height: 280px;
    overflow: hidden;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
  }
  .bac-compare-before, .bac-compare-after {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
  }
  .bac-card:hover .bac-compare-before,
  .bac-card:hover .bac-compare-after { transform: scale(1.04); }
  .bac-compare-after {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.4s cubic-bezier(.65,0,.35,1);
  }
  .bac-compare.bac-ready .bac-compare-after { transition: clip-path 0.05s linear; }

  .bac-badge-row {
    position: absolute;
    top: 16px;
    left: 0; right: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    pointer-events: none;
  }
  .bac-badge {
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #fff;
    padding: 7px 15px;
    border-radius: 20px;
    font-family: var(--font-mono);
  }
  .bac-badge-before { background: rgba(75,58,38,0.88); }
  .bac-badge-after { background: rgba(22,101,52,0.88); }

  .bac-handle {
    position: absolute;
    top: 0; bottom: 0;
    left: 100%;
    transform: translateX(-50%);
    width: 3px;
    background: #fff;
    z-index: 3;
    cursor: col-resize;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  }
  .bac-handle::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 38px; height: 38px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0,0,0,0.32);
  }
  .bac-handle::after {
    content: '⟨ ⟩';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--navy);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -1px;
    z-index: 1;
  }

  .bac-card-body { padding: 24px 26px 28px; }
  .bac-card-icon-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 4px; }
  .bac-card-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(181,86,44,0.35);
    background: rgba(181,86,44,0.06);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    font-size: 18px;
    flex-shrink: 0;
  }
  .bac-card-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 8px;
    line-height: 1.25;
    margin-top: 4px;
  }
  .bac-card-desc {
    font-size: var(--fs-body);
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-weight: 300;
  }
  .bac-cta-link {font-family: var(--font-body); 
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--gold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
  }
  .bac-cta-link span.arrow { transition: transform 0.25s; }
  .bac-cta-link:hover span.arrow { transform: translateX(4px); }
  .bac-cta-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0;
    height: 1.5px;
    background: var(--gold);
    transition: width 0.3s cubic-bezier(.65,0,.35,1);
  }
  .bac-cta-link:hover::after { width: calc(100% - 18px); }

  /* Gold divider animated reveal */
  .gold-divider {
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin: 14px 0 28px;
    transition: width 0.8s ease;
  }
  .gold-divider.revealed { width: 80px; }

  /* ─── FLOATING ACTIONS ─── */
  .fab-group {
    position: fixed;
    right: 24px;
    bottom: 80px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
  }
  .fab-btn {font-family: var(--font-body); 
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-body);
    color: rgba(255,255,255,0.92);
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    overflow: visible;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
   font-weight: 600; letter-spacing: 0.02em;}
  .fab-btn:hover { width: auto; padding: 0 16px 0 40px; border-radius: 50px; }
  .fab-btn .fab-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
  .fab-label {font-family: var(--font-mono); 
    white-space: nowrap;
    font-size: var(--fs-caption);
    font-weight: 500;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.3s;
    padding-left: 4px;
   letter-spacing: 0.25em; text-transform: uppercase;}
  .fab-btn:hover .fab-label { opacity: 1; width: auto; }
  /* Phones: a vertical stack of four buttons sat on top of the hero's
     full-width call-to-action buttons, so lay them in a row along the
     bottom edge instead. Touch screens also get no hover-expanding label
     (a tap leaves :hover stuck on, which widened the button). */
  @media (max-width: 600px) {
    .fab-group { flex-direction: row; right: 12px; bottom: 12px; gap: 8px; }
    .fab-btn { width: 38px; height: 38px; }
    .fab-btn .fab-icon { left: 50%; transform: translate(-50%, -50%); }
  }
  @media (hover: none) {
    .fab-btn:hover { width: 40px; padding: 0; border-radius: 50%; }
    .fab-btn:hover .fab-label { opacity: 0; width: 0; }
  }
  @media (hover: none) and (max-width: 600px) {
    .fab-btn:hover { width: 38px; }
  }
  .fab-call { background: rgba(197,90,74,0.55); }
  .fab-whatsapp { background: rgba(46,139,101,0.5); }
  .fab-chat { background: rgba(58,101,163,0.5); }
  .fab-assistant { background: rgba(181,86,44,0.75); }
  /* "Ask us": a plain circle that, on its own, grows into a pill to show its
     label and then shrinks back. Works on touch (no hover needed) and is
     right-anchored, so it grows leftwards. The icon and label are pinned so
     only the pill's width animates. */
  .fab-btn.fab-assistant { justify-content: flex-start; animation: vlFabPill 3.4s ease-in-out both; }
  .fab-btn.fab-assistant .fab-icon { left: 12px; transform: translateY(-50%); }
  .fab-btn.fab-assistant .fab-label,
  .fab-btn.fab-assistant:hover .fab-label {
    position: absolute; left: 36px; top: 50%; transform: translateY(-50%);
    width: auto; padding: 0; overflow: visible; opacity: 0;
    animation: vlFabLabel 3.4s ease-in-out both;
  }
  .fab-btn.fab-assistant:hover { padding: 0; }
  /* Opens fully expanded, holds ~2.4s, then shrinks to a circle for good. */
  @keyframes vlFabPill {
    0%, 70%  { width: 118px; border-radius: 50px; }
    100%     { width: 40px; border-radius: 50px; }
  }
  @keyframes vlFabLabel {
    0%, 55%  { opacity: 1; }
    75%, 100% { opacity: 0; }
  }
  @media (max-width: 600px) {
    .fab-btn.fab-assistant .fab-icon { left: 11px; transform: translateY(-50%); }
    .fab-btn.fab-assistant .fab-label { left: 35px; }
    @keyframes vlFabPill {
      0%, 70%  { width: 116px; border-radius: 50px; }
      100%     { width: 38px; border-radius: 50px; }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .fab-btn.fab-assistant, .fab-btn.fab-assistant .fab-label { animation: none; }
  }

  /* ─── WEBSITE ASSISTANT PANEL (js/chat-widget.js) ─── */
  .vl-chat {
    position: fixed; right: 76px; bottom: 80px; z-index: 950;
    width: 360px; max-width: calc(100vw - 32px);
    height: 500px; max-height: calc(100vh - 120px);
    display: flex; flex-direction: column;
    background: #fff; color: var(--navy);
    border: 1px solid var(--border-gold); border-radius: 16px;
    box-shadow: 0 18px 48px rgba(43,38,34,0.22);
    overflow: hidden; font-family: var(--font-body);
  }
  .vl-chat[hidden] { display: none; }
  .vl-chat__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; background: var(--navy); color: #fff;
  }
  .vl-chat__title { font-family: var(--font-display); font-size: 19px; line-height: 1.1; }
  .vl-chat__sub { font-size: 11.5px; color: rgba(255,255,255,0.65); margin-top: 2px; }
  .vl-chat__close {
    background: none; border: 0; color: rgba(255,255,255,0.8); font-size: 24px; line-height: 1;
    cursor: pointer; padding: 4px 8px; border-radius: 6px;
  }
  .vl-chat__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .vl-chat__list {
    flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
    background: var(--cream);
  }
  .vl-chat__msg {
    max-width: 85%; padding: 9px 13px; border-radius: 14px;
    font-size: 13.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
  }
  .vl-chat__msg--assistant { align-self: flex-start; background: #fff; border: 1px solid #E5E0D3; border-bottom-left-radius: 4px; }
  .vl-chat__msg--user { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
  .vl-chat__msg.is-typing { color: var(--text-muted); font-style: italic; }
  .vl-chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; background: var(--cream); }
  .vl-chat__chips[hidden] { display: none; }
  .vl-chat__chip {
    font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 999px; cursor: pointer;
    background: #fff; color: var(--gold-dark); border: 1px solid var(--border-gold);
  }
  .vl-chat__chip:hover { background: var(--gold); color: #fff; }
  .vl-chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #E5E0D3; background: #fff; }
  .vl-chat__input {
    flex: 1; min-width: 0; font: inherit; font-size: 13.5px; padding: 9px 12px;
    border: 1px solid #E5E0D3; border-radius: 10px; color: var(--navy); background: #fff;
  }
  .vl-chat__input:focus { outline: none; border-color: var(--gold); }
  .vl-chat__send {
    font: inherit; font-size: 13px; font-weight: 600; padding: 0 16px; border: 0; border-radius: 10px;
    background: var(--gold); color: #fff; cursor: pointer;
  }
  .vl-chat__send:disabled { opacity: 0.55; cursor: default; }
  @media (max-width: 600px) {
    .vl-chat { right: 16px; left: 16px; width: auto; bottom: 16px; height: 70vh; }
  }
  .fab-pulse {
    animation: fabPulse 6s ease-in-out infinite;
  }
  @keyframes fabPulse {
    0%, 85%, 100% { box-shadow: 0 4px 12px rgba(46,139,101,0.18); }
    90% { box-shadow: 0 4px 12px rgba(46,139,101,0.18), 0 0 0 6px rgba(46,139,101,0.1), 0 0 0 12px rgba(46,139,101,0.04); }
  }

  /* ─── LEGAL MODAL ─── */
  .legal-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(43,38,34,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10500;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .legal-modal-backdrop.is-open { opacity: 1; visibility: visible; }
  .legal-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -46%);
    width: min(600px, calc(100vw - 40px));
    max-height: min(78vh, 640px);
    z-index: 10501;
    opacity: 0; visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }
  .legal-modal.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, -50%);
  }
  .legal-modal-inner {
    background: var(--off-white);
    border-radius: 6px;
    border: 1px solid var(--border-gold);
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    padding: 44px 40px 36px;
    max-height: min(78vh, 640px);
    overflow-y: auto;
    position: relative;
  }
  .legal-modal-close {
    position: absolute;
    top: 16px; right: 18px;
    width: 32px; height: 32px;
    border: 1px solid var(--border-gold);
    border-radius: 50%;
    background: transparent;
    color: var(--navy);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
  }
  .legal-modal-close:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
  .legal-modal-eyebrow {
    font-size: var(--fs-caption);
    font-weight: 500;
    font-family: var(--font-mono);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
  }
  .legal-modal-title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 18px;
  }
  .legal-modal-body p {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-muted);
    margin-bottom: 14px;
  }
  .legal-modal-body p:last-child { margin-bottom: 0; }

  /* ─── FOOTER / CTA SECTION ─── */
  #cta-section {
    background: #201B18;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  #cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
  }
  #cta-section::after {
    content: '';
    position: absolute;
    bottom: -200px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 500px;
    background: radial-gradient(ellipse at center, rgba(181,86,44,0.12) 0%, transparent 65%);
    pointer-events: none;
  }
  .cta-inner { text-align: center; position: relative; z-index: 1; }
  .cta-slot-label {
    display: inline-block;
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(181,86,44,0.4);
    border-radius: 2px;
    padding: 6px 16px;
    margin-bottom: 28px;
    background: rgba(181,86,44,0.06);
    font-family: var(--font-mono);
  }
  .cta-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.08;
    margin-bottom: 20px;
  }
  .cta-title em {font-size: var(--fs-h2); 
    font-style: italic;
    color: var(--gold);
    font-family: var(--font-display);
  }
  .cta-sub {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: rgba(255,255,255,0.55);
    margin-bottom: 52px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
    font-weight: 300;
  }
  .cta-btns { display: flex; justify-content: center; gap: 16px; }
  .btn-cta-primary {
    padding: 20px 48px;
    background: linear-gradient(135deg, #8A3F1E 0%, var(--gold) 100%);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(181,86,44,0.3);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .btn-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(181,86,44,0.45); filter: brightness(1.08); }
  .btn-cta-secondary {
    padding: 20px 40px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    color: rgba(255,255,255,0.8);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
  }
  .btn-cta-secondary:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); }

  /* ─── PREMIUM FOOTER ─── */
  footer {
    background: #1C1815;
    padding: 80px 0 32px;
    border-top: 1px solid rgba(181,86,44,0.15);
  }
  .footer-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
  }
  @media (max-width: 900px) {
    .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
    .footer-main > :first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 480px) {
    .footer-main { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
  }
  .footer-brand { }
  .footer-brand-name {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }
  .footer-brand-tag {
    font-size: var(--fs-caption);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    display: block;
    font-family: var(--font-mono);
   font-weight: 500;}
  .footer-brand-desc {
    font-size: var(--fs-caption);
    color: rgba(255,255,255,0.4);
    line-height: 1.7;
    max-width: 280px;
    font-family: var(--font-body);
    font-weight: 300;
  }
  .footer-col-title {
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 20px;
    font-family: var(--font-body);
  }
  .footer-col-links { display: flex; flex-direction: column; gap: 12px; }
  .footer-col-links a {font-family: var(--font-body); 
    font-size: var(--fs-caption);
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1;
  }
  .footer-col-links a:hover { color: var(--gold); }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-logo {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.02em;
    font-weight: 400;
  }
  .footer-copy {
    font-size: var(--fs-caption);
    color: rgba(255,255,255,0.25);
    font-family: var(--font-body);
  }
  .footer-links { display: flex; gap: 24px; }
  .footer-links a {
    font-size: var(--fs-caption);
    color: rgba(255,255,255,0.25);
    text-decoration: none;
    transition: color 0.2s;
    font-family: var(--font-body);
  }
  .footer-links a:hover { color: var(--gold); }
  .footer-hq {
    font-size: var(--fs-caption);
    color: rgba(255,255,255,0.25);
    margin-top: 8px;
    font-family: var(--font-body);
  }

  /* ─── RESPONSIVE: TESTIMONIALS & BEFORE/AFTER ─── */
  @media (max-width: 900px) {
    .testimonial-slide { grid-template-columns: 1fr; }
    .t-image { min-height: 240px; }
    .t-content { padding: 32px 28px; }
    .bac-grid { grid-template-columns: 1fr; gap: 22px; }
  }
  @media (max-width: 560px) {
    .t-content { padding: 26px 22px; }
    .t-quote {font-family: var(--font-body);  font-size: var(--fs-body); }
  }
  /* ─── SERVICES PAGE ─── */

  /* Hero */
  #sp-hero {
    position: relative;
    min-height: 60vh;
    background: var(--navy);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 128px 0 56px;
  }
  #sp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1560185007-c5ca9d2c014d?w=1800&q=80');
    background-size: cover;
    background-position: center;
    opacity: 0.12;
  }
  #sp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 60% 50%, rgba(181,86,44,0.08) 0%, transparent 70%);
    pointer-events: none;
  }

  /* Products Hero — compact ~60vh introduction; the plan banner beneath is
     deliberately left peeking into view so the first screen never reads as
     "the end of the page". */
  #pr-hero {
    position: relative;
    min-height: 60vh;
    height: 60vh;
    background: var(--navy);
    overflow: hidden;
    padding-top: var(--navbar-h);
    display: flex;
    flex-direction: column;
  }
  #pr-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1800&q=80');
    background-size: cover;
    background-position: center;
    opacity: 0.08;
  }
  #pr-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 55% at 18% 40%, rgba(181,86,44,0.12) 0%, transparent 70%);
    pointer-events: none;
  }
  /* Soft fade at the very base of the hero so it dissolves into the Essential banner
     beneath rather than cutting off abruptly — both are navy, so the seam disappears. */

  .pr-hero-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 110px;
    background: linear-gradient(to bottom, rgba(43,38,34,0) 0%, rgba(43,38,34,0.55) 55%, rgba(43,38,34,0.97) 100%);
    pointer-events: none;
    z-index: 3;
  }
  /* Two-column shell — copy on the left, the ecosystem animation on the right,
     both vertically centred within the reduced-height hero. */
  .pr-hero-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 32px;
    flex: 1;
    min-height: 0;
  }
  /* Left column */
  .pr-hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    width: 100%;
    max-width: 620px;
    padding: 0 24px 44px 80px;
  }
  #pr-hero .sp-hero-eyebrow { justify-content: flex-start; margin-bottom: 16px; }
  #sp-hero .sp-hero-eyebrow { font-size: 15px; }
  #pr-hero .sp-hero-h1 {font-family: var(--font-display);  max-width: 560px; text-align: left; font-size: var(--fs-h1); margin-bottom: 18px; }
  #pr-hero .sp-hero-sub {font-family: var(--font-body);  margin: 0; text-align: left; max-width: 480px; font-size: var(--fs-body); line-height: 1.7; margin-bottom: 0; }
  #pr-hero .sp-btn-primary { margin-bottom: 0; }

  /* Right column — premium looping ecosystem animation */
  .pr-hero-right {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 60px 44px 0;
  }

  @media (max-width: 980px) {
    #pr-hero { height: auto; min-height: auto; padding-top: calc(var(--navbar-h) + 8px); }
    .pr-hero-split { grid-template-columns: 1fr; min-height: auto; gap: 8px; }
    .pr-hero-left { padding: 28px 28px 12px; max-width: 100%; }
    .pr-hero-right { padding: 0 24px 28px; min-height: 240px; }
  }
  @media (max-width: 640px) {
    #pr-hero { padding-top: calc(var(--navbar-h) + 4px); }
    .pr-hero-left { padding: 24px 24px 8px; }
    .pr-hero-right { min-height: 200px; padding: 0 16px 24px; }
  }
  /* ── Hero ecosystem animation — "your property, continuously protected" ──
     A glass dashboard card at the centre, orbited by four verification
     touchpoints (site visit, protection, visual scan, documentation) linked
     by a slow-drawing gold ring, with a verification chip that surfaces on
     loop. Built entirely from the page's own line-icon language, gold, and
     glass tokens — no external art. */
  .pr-hero-visual {
    position: relative;
    width: min(380px, 90%);
    aspect-ratio: 1 / 1;
  }
  .phv-glow {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181,86,44,0.32) 0%, rgba(181,86,44,0.08) 55%, transparent 75%);
    filter: blur(6px);
    animation: phvGlowPulse 5s ease-in-out infinite;
  }
  @keyframes phvGlowPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.04); }
  }
  .phv-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .phv-ring-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 1; }
  .phv-ring-progress {
    fill: none;
    stroke: url(#phvRingGradient);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 26 14;
    animation: phvRingDraw 22s linear infinite;
  }
  @keyframes phvRingDraw {
    to { stroke-dashoffset: -1000; }
  }

  /* Centre glass dashboard card */
  .phv-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 46%;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    animation: phvCardFloat 6s ease-in-out infinite;
    z-index: 3;
  }
  @keyframes phvCardFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-6px); }
  }
  .phv-card-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); margin-bottom: 10px; box-shadow: 0 0 8px rgba(209,122,79,0.8); }
  .phv-card-line { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.16); margin-bottom: 7px; }
  .phv-card-line.w1 { width: 78%; }
  .phv-card-line.w2 { width: 55%; margin-bottom: 12px; }
  .phv-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(181,86,44,0.16);
    border: 1px solid rgba(181,86,44,0.4);
  }
  .phv-card-chip svg { width: 8px; height: 8px; flex-shrink: 0; }
  .phv-card-chip span {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-light);
    white-space: nowrap;
  }

  /* Floating "Property Verified" notification — pops gently on loop */
  .phv-notify {
    position: absolute;
    top: 6%; right: 2%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    background: rgba(43,38,34,0.72);
    border: 1px solid rgba(181,86,44,0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    z-index: 4;
    animation: phvNotify 6s ease-in-out infinite;
  }
  .phv-notify-check {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--gold);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .phv-notify-check svg { width: 8px; height: 8px; }
  .phv-notify span {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
  }
  @keyframes phvNotify {
    0%, 14% { opacity: 0; transform: translateY(6px) scale(0.96); }
    22%, 78% { opacity: 1; transform: translateY(0) scale(1); }
    88%, 100% { opacity: 0; transform: translateY(-4px) scale(0.98); }
  }

  /* Orbit nodes — house / shield / scan / document */
  .phv-node {
    position: absolute;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(181,86,44,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(0,0,0,0.3);
    animation: phvFloat 4.5s ease-in-out infinite;
    z-index: 2;
  }
  .phv-node svg { width: 22px; height: 22px; overflow: visible; }
  .phv-node-house  { top: -2%;  left: 50%; transform: translate(-50%, 0); animation-delay: 0s; }
  .phv-node-shield { top: 50%;  right: -4%; transform: translate(0, -50%); animation-delay: 0.9s; }
  .phv-node-doc    { bottom: -2%; left: 50%; transform: translate(-50%, 0); animation-delay: 1.8s; }
  .phv-node-scan   { top: 50%;  left: -4%; transform: translate(0, -50%); animation-delay: 2.7s; }
  @keyframes phvFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -7px; }
  }
  .phv-node-check {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--gold);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--navy);
    opacity: 0;
    animation: phvCheckIn 6.4s ease-in-out infinite;
  }
  .phv-node-check svg { width: 7px; height: 7px; }
  .phv-node-house .phv-node-check  { animation-delay: 0.4s; }
  .phv-node-shield .phv-node-check { animation-delay: 1.9s; }
  .phv-node-doc .phv-node-check    { animation-delay: 3.4s; }
  .phv-node-scan .phv-node-check   { animation-delay: 4.9s; }
  @keyframes phvCheckIn {
    0%, 6% { opacity: 0; transform: scale(0.5); }
    12%, 80% { opacity: 1; transform: scale(1); }
    90%, 100% { opacity: 0; transform: scale(0.5); }
  }

  @media (max-width: 980px) {
    .pr-hero-visual { width: min(300px, 78%); }
    .phv-node { width: 46px; height: 46px; }
    .phv-node svg { width: 18px; height: 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .phv-glow, .phv-ring-progress, .phv-card, .phv-notify, .phv-node, .phv-node-check { animation: none !important; }
  }

  .sp-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .sp-hero-eyebrow {
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-family: var(--font-mono);
  }
  .sp-hero-eyebrow::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--gold);
    display: inline-block;
  }
  .sp-hero-h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 300;
    color: #fff;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
  }
  .sp-hero-h1 em { font-style: italic; color: var(--gold); }
  .sp-hero-sub {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: rgba(255,255,255,0.65);
    line-height: 1.8;
    max-width: 480px;
    margin-bottom: 44px;
    font-weight: 300;
  }
  .sp-plan-pills {
    position: relative;
    display: inline-flex;
    gap: 4px;
    margin-bottom: 40px;
    padding: 5px;
    border: 1px solid rgba(181,86,44,0.28);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(6px);
  }
  .sp-pill-underline {
    position: absolute;
    top: 5px; left: 5px;
    height: calc(100% - 10px);
    width: 90px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
    box-shadow: 0 6px 18px rgba(181,86,44,0.35);
    z-index: 0;
    pointer-events: none;
    transition: left 0.4s cubic-bezier(0.65,0,0.35,1), width 0.4s cubic-bezier(0.65,0,0.35,1);
  }
  .sp-plan-pill {
    position: relative;
    z-index: 1;
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    border: none;
    border-radius: 5px;
    padding: 10px 22px;
    background: transparent;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: color 0.35s ease;
  }
  .sp-plan-pill:hover { color: #fff; }
  .sp-plan-pill.active { color: var(--navy); }
  .sp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 44px;
    background: linear-gradient(135deg, #8A3F1E 0%, var(--gold) 100%);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 8px 32px rgba(181,86,44,0.35);
  }
  .sp-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(181,86,44,0.5); filter: brightness(1.08); }

  /* Hero orb visual */
  .sp-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
  .sp-hero-orb { position: relative; width: 440px; height: 440px; }
  .sp-orb-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(181,86,44,0.2);
    animation: sp-orbit 18s linear infinite;
  }
  .sp-orb-ring:nth-child(1) { inset: 0; animation-duration: 18s; }
  .sp-orb-ring:nth-child(2) { inset: 40px; animation-duration: 13s; animation-direction: reverse; border-color: rgba(181,86,44,0.12); }
  .sp-orb-ring:nth-child(3) { inset: 80px; animation-duration: 9s; border-color: rgba(181,86,44,0.08); }
  @keyframes sp-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .sp-orb-center {
    position: absolute; inset: 120px;
    background: radial-gradient(ellipse at center, rgba(181,86,44,0.18) 0%, rgba(43,38,34,0.6) 70%);
    border-radius: 50%; border: 1px solid rgba(181,86,44,0.3);
    display: flex; align-items: center; justify-content: center;
  }
  .sp-orb-icon { font-family: var(--font-display); font-size: 42px; color: var(--gold); opacity: 0.8; text-align: center; line-height: 1; }
  .sp-orb-dot { position: absolute; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 12px rgba(181,86,44,0.6); }
  .sp-orb-ring:nth-child(1) .sp-orb-dot { top: -4px; left: 50%; transform: translateX(-50%); }
  .sp-orb-ring:nth-child(2) .sp-orb-dot { bottom: -4px; right: 20%; }
  .sp-orb-ring:nth-child(3) .sp-orb-dot { top: 10%; right: -4px; }

  /* ─── PLAN SECTIONS ─── */
  .sp-plan-section { padding: 120px 0; position: relative; overflow: hidden; }
  .sp-plan-section:nth-of-type(odd)  { background: var(--off-white); }
  .sp-plan-section:nth-of-type(even) { background: #fff; }

  /* Plan-level descriptions (badge, title, tagline, desc, stats, illustration) are
     removed from the Services page per design — only the service content itself remains. */
  .sp-plan-header { display: none !important; }
  .sp-plan-header.reverse { direction: rtl; }
  .sp-plan-header.reverse > * { direction: ltr; }

  .sp-plan-number {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    font-weight: 500;
    color: rgba(181,86,44,0.07);
    line-height: 1;
    position: absolute;
    top: 40px;
    right: 40px;
    pointer-events: none;
    letter-spacing: 0.25em;
   text-transform: uppercase;}
  .sp-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    font-family: var(--font-mono);
  }
  .sp-plan-badge::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
  .sp-plan-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 300;
    color: var(--navy);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
  }
  .sp-plan-tagline {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-style: italic;
    color: var(--gold);
    margin-bottom: 24px;
    line-height: 1.3;
  }
  .sp-plan-divider { width: 56px; height: 1.5px; background: linear-gradient(90deg, var(--gold), transparent); margin-bottom: 24px; }
  .sp-plan-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: #3D3631;
    line-height: 1.8;
    max-width: 440px;
    font-weight: 300;
  }
  .sp-plan-includes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-mono);
  }
  .sp-plan-includes::before { content: ""; width: 24px; height: 1px; background: var(--text-muted); }

  /* Service group cards */
  .sp-groups-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  .sp-groups-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
  .sp-groups-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
  .sp-groups-grid.cols-6 { grid-template-columns: repeat(3,1fr); }

  .sp-group-card {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(181,86,44,0.2);
    border-radius: 16px; padding: 28px 26px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease, border-color 0.3s ease;
    position: relative; overflow: hidden;
  }
  .sp-plan-section:nth-of-type(even) .sp-group-card { background: rgba(249,245,239,0.9); }
  .sp-group-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent); opacity: 0; transition: opacity 0.3s;
  }
  .sp-group-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(181,86,44,0.12), 0 0 0 1px rgba(181,86,44,0.3); border-color: rgba(181,86,44,0.4); }
  .sp-group-card:hover::before { opacity: 1; }
  .sp-group-icon {
    width: 44px; height: 44px; background: rgba(181,86,44,0.08);
    border: 1px solid rgba(181,86,44,0.25); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 16px; transition: background 0.3s;
  }
  .sp-group-card:hover .sp-group-icon { background: rgba(181,86,44,0.15); }
  .sp-group-name {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    color: var(--navy);
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    line-height: 1.2;
  }
  .sp-group-items { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .sp-group-items li {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: #3D3631;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    opacity: 0.82;
    font-weight: 300;
  }
  .sp-group-items li::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--gold); flex-shrink: 0; margin-top: 6px;
  }

  /* Plan CTA Panel */
  .sp-plan-cta {
    margin-top: 72px; background: var(--navy); border-radius: 20px;
    padding: 60px 72px; display: flex; align-items: center;
    justify-content: space-between; gap: 48px; position: relative; overflow: hidden;
  }
  .sp-plan-cta::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(181,86,44,0.1) 0%, transparent 70%);
    pointer-events: none;
  }
  .sp-plan-cta::after {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 40px 40px; pointer-events: none;
  }
  .sp-plan-cta-text { position: relative; z-index: 1; }
  .sp-plan-cta-heading {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 300;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  .sp-plan-cta-sub {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: rgba(255,255,255,0.55);
    line-height: 1.65;
    font-weight: 300;
  }
  .sp-plan-cta-btn {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 40px;
    background: linear-gradient(135deg, rgba(26,95,168,0.9) 0%, var(--gold) 100%);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 8px 28px rgba(181,86,44,0.3);
    white-space: nowrap;
  }
  .sp-plan-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(181,86,44,0.5); filter: brightness(1.1); }

  /* ─── ADDON SERVICES SECTION ─── */
  #sp-addons { background: var(--navy); padding: 120px 0; position: relative; overflow: hidden; }
  #sp-addons::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px; pointer-events: none;
  }
  #sp-addons::after {
    content: ""; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
    width: 900px; height: 600px;
    background: radial-gradient(ellipse at center, rgba(181,86,44,0.09) 0%, transparent 65%);
    pointer-events: none;
  }
  .sp-addons-header { text-align: center; margin-bottom: 64px; position: relative; z-index: 1; }
  .sp-addons-eyebrow {
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    font-family: var(--font-mono);
  }
  .sp-addons-eyebrow::before, .sp-addons-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--gold); display: inline-block; }
  .sp-addons-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 300;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin-bottom: 18px;
  }
  .sp-addons-sub {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: rgba(255,255,255,0.5);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.75;
    font-weight: 300;
  }
  .sp-addons-grid {
    display: grid; grid-template-columns: repeat(5,1fr); gap: 16px;
    position: relative; z-index: 1; margin-bottom: 64px;
  }
  .sp-addon-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(181,86,44,0.18);
    border-radius: 16px; padding: 32px 24px; text-align: center;
    transition: all 0.35s cubic-bezier(0.34,1.2,0.64,1); position: relative; overflow: hidden;
  }
  .sp-addon-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity 0.3s;
  }
  .sp-addon-card:hover { background: rgba(181,86,44,0.07); border-color: rgba(181,86,44,0.4); transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0,0,0,0.3); }
  .sp-addon-card:hover::before { opacity: 1; }
  .sp-addon-icon { font-size: 32px; margin-bottom: 16px; display: block; }
  .sp-addon-name {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .sp-addons-cta { text-align: center; position: relative; z-index: 1; }
  .sp-addons-cta-label {
    font-size: var(--fs-caption);
    color: rgba(255,255,255,0.4);
    margin-bottom: 20px;
    font-family: var(--font-mono);
    font-weight: 500;
   letter-spacing: 0.25em; text-transform: uppercase;}
  .sp-btn-quote {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 20px 52px;
    background: transparent;
    border: 1.5px solid rgba(181,86,44,0.6);
    border-radius: 4px;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
  }
  .sp-btn-quote:hover { background: var(--gold); color: #fff; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(181,86,44,0.35); }

  @media (max-width: 1024px) {
    .sp-plan-header { grid-template-columns: 1fr; gap: 36px; }
    .sp-plan-header.reverse { direction: ltr; }
    .sp-groups-grid { grid-template-columns: repeat(2,1fr); }
    .sp-groups-grid.cols-4 { grid-template-columns: repeat(2,1fr); }
    .sp-addons-grid { grid-template-columns: repeat(3,1fr); }
    .sp-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .sp-hero-visual { display: none; }
    .sp-plan-cta { flex-direction: column; padding: 48px 40px; text-align: center; }
  }
  @media (max-width: 680px) {
    .sp-plan-section { padding: 80px 0; }
    .sp-groups-grid, .sp-groups-grid.cols-2, .sp-groups-grid.cols-4 { grid-template-columns: 1fr; }
    .sp-addons-grid { grid-template-columns: repeat(2,1fr); }
    .sp-plan-cta { padding: 36px 28px; }
    .sp-plan-title {
    font-size: var(--fs-h3);
    font-family: var(--font-display);
    font-weight: 300;
  }
  }

  /* ─── SERVICE CATEGORY TABS ─── */
  #sp-tab-nav {
    background: var(--off-white);
    border-bottom: 1px solid rgba(181,86,44,0.15);
    position: sticky;
    top: 60px;
    z-index: 90;
    padding: 0;
    box-shadow: 0 2px 20px rgba(43,38,34,0.06);
  }
  .sp-tab-nav-inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 0;
  }
  .sp-tab-label {
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 28px 32px 28px 0;
    white-space: nowrap;
    border-right: 1px solid rgba(181,86,44,0.2);
    margin-right: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
  }
  .sp-tab-label::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--gold);
    display: inline-block;
  }
  .sp-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 0;
    flex: 1;
  }
  .sp-tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 28px;
    border: 1.5px solid rgba(181,86,44,0.22);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    transition: background 0.3s ease,
      color 0.3s ease,
      border-color 0.3s ease,
      transform 0.3s cubic-bezier(0.34,1.2,0.64,1),
      box-shadow 0.3s ease;
    white-space: nowrap;
    text-align: left;
    outline: none;
  }
  .sp-tab-btn .sp-tab-icon {
    font-size: 16px;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
  }
  .sp-tab-btn .sp-tab-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .sp-tab-btn .sp-tab-name {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
    transition: color 0.3s ease;
    color: var(--navy);
  }
  .sp-tab-btn .sp-tab-sub {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.3s ease;
    opacity: 0.75;
  }
  .sp-tab-btn:hover:not(.active) {
    border-color: rgba(181,86,44,0.45);
    background: rgba(181,86,44,0.04);
    color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(181,86,44,0.1);
  }
  .sp-tab-btn:hover:not(.active) .sp-tab-icon { opacity: 1; transform: scale(1.1); }
  .sp-tab-btn.active {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
    border-color: var(--gold);
    color: var(--navy);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 32px rgba(181,86,44,0.35), 0 2px 8px rgba(181,86,44,0.2);
  }
  .sp-tab-btn.active .sp-tab-name { color: var(--navy); }
  .sp-tab-btn.active .sp-tab-sub { color: rgba(43,38,34,0.65); }
  .sp-tab-btn.active .sp-tab-icon { opacity: 1; }
  /* Active indicator dot */
  .sp-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(181,86,44,0.6);
  }

  /* ─── TAB CONTENT PANELS ─── */
  .sp-tab-panel {
    display: none;
    opacity: 0;
  }
  .sp-tab-panel.active {
    display: block;
    opacity: 1;
  }
  .sp-tab-panel.fade-in {
    animation: spTabFadeIn 0.38s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .sp-tab-panel.fade-out {
    animation: spTabFadeOut 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  @keyframes spTabFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes spTabFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
  }

  /* ─── PLAN STATS (service page header) ─── */
  .sp-plan-stats { display: flex; gap: 36px; margin-top: 28px; }
  .sp-plan-stat { display: flex; flex-direction: column; gap: 2px; }
  .sp-plan-stat-num {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--gold);
    line-height: 1;
    letter-spacing: 0.25em;
   text-transform: uppercase;}
  .sp-plan-stat-label {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
   font-weight: 500;}

  /* ─── PLAN ILLUSTRATION (replaces stock photo) ─── */
  .sp-plan-illus-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 64px rgba(43,38,34,0.14);
    border: 1px solid rgba(181,86,44,0.18);
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease;
  }
  .sp-plan-illus-wrap:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 80px rgba(43,38,34,0.2);
  }
  .vl-plan-illus { display: block; width: 100%; height: auto; }
  .vl-icon { display: block; flex-shrink: 0; }

  /* ─── SERVICE CATALOGUE CARDS ─── */
  .svc-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 28px;
    margin-top: 56px;
  }
  .svc-cat-card {
    background: #fff;
    border: 1px solid rgba(181,86,44,0.16);
    border-radius: 16px;
    padding: 32px 30px 28px;
    box-shadow: 0 4px 24px rgba(43,38,34,0.05);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, border-color 0.4s ease;
  }
  .svc-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 48px rgba(43,38,34,0.1);
    border-color: rgba(181,86,44,0.4);
  }
  .svc-cat-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
  .svc-cat-num {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 3px;
   font-weight: 500;}
  .svc-cat-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .svc-cat-full-title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 10px 0 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(181,86,44,0.14);
  }
  .svc-items { display: flex; flex-direction: column; gap: 18px; }
  .svc-item {
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(181,86,44,0.18);
  }
  .svc-item:last-child { border-bottom: none; padding-bottom: 0; }
  .svc-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
  }
  .svc-item-name {
    font-family: var(--font-display);
    font-size: 17.64px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.35;
  }
  .svc-item-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.65;
  }
  .svc-badge {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    margin-top: 2px;
  }
  .svc-badge-novisit { background: rgba(39,174,96,0.12); color: #1d8348; }
  .svc-badge-quote { background: rgba(181,86,44,0.12); color: var(--gold-dark); }

  .sp-addon-card {
    border: none;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform 0.3s ease, background 0.3s ease;
  }
  .sp-addon-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.09); }

  @media (max-width: 640px) {
    .svc-cats-grid { grid-template-columns: 1fr; }
    .sp-plan-stats { gap: 24px; }
  }

  /* Contextual CTA bar at bottom of every panel */
  .sp-contextual-cta {
    background: var(--off-white);
    border-top: 1px solid rgba(181,86,44,0.12);
    padding: 40px 0;
  }
  .sp-contextual-cta-inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .sp-cta-question {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 300;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .sp-cta-hint {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--text-muted);
    line-height: 1.55;
    font-weight: 300;
  }
  .sp-cta-pricing-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: var(--navy);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(43,38,34,0.25);
  }
  .sp-cta-pricing-btn:hover {
    background: var(--navy-light);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(43,38,34,0.35);
  }
  .sp-cta-pricing-btn .sp-cta-arrow {
    transition: transform 0.25s ease;
  }
  .sp-cta-pricing-btn:hover .sp-cta-arrow { transform: translateX(4px); }

  @media (max-width: 768px) {
    .sp-tabs { gap: 4px; overflow-x: auto; padding-bottom: 4px; }
    .sp-tab-btn { padding: 10px 18px; }
    .sp-tab-btn .sp-tab-sub { display: none; }
    .sp-contextual-cta-inner { flex-direction: column; align-items: flex-start; }
    .sp-tab-label { display: none; }
  }

  /* ─── PRODUCT PLANS ─── */
  #product-plans { padding: 110px 0; background: var(--off-white); }
  .pp-header { text-align: center; max-width: 640px; margin: 0 auto 60px; }
  .pp-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 18px;
  }
  .pp-title .accent { color: var(--gold); font-style: italic; }
  .pp-sub {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-muted);
  }

  .pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .pp-card {
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(181,86,44,0.12);
    transition: transform 0.45s var(--ease, ease), box-shadow 0.45s ease, border-color 0.4s ease;
    display: flex;
    flex-direction: column;
  }
  .pp-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-gold);
    border-color: var(--border-gold);
  }
  .pp-card-featured { border-color: var(--gold); box-shadow: 0 24px 70px rgba(181,86,44,0.22); }
  .pp-card-img { position: relative; height: 220px; overflow: hidden; }
  .pp-card-img-inner {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 0.7s var(--ease-expo, ease);
  }
  .pp-card:hover .pp-card-img-inner { transform: scale(1.08); }
  .pp-card-img::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(43,38,34,0.05) 0%, rgba(43,38,34,0.55) 100%);
  }
  .pp-card-tier {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.25em;
    text-transform: uppercase;
   font-weight: 500;}
  .pp-card-body { padding: 30px 28px 32px; display: flex; flex-direction: column; flex: 1; }
  .pp-card-name {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 4px;
  }
  .pp-card-line {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .pp-card-inherits {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 10px;
  }
  .pp-card-highlights { list-style: none; margin-bottom: 24px; flex: 1; }
  .pp-card-highlights li {
    position: relative;
    padding-left: 18px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 9px;
  }
  .pp-card-highlights li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 6px; height: 1.5px;
    background: var(--gold);
  }
  .pp-card-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--navy);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--gold);
    transition: color 0.25s, gap 0.25s;
  }
  .pp-card-cta:hover { color: var(--gold); gap: 12px; }

  /* ─── PRODUCT PLAN MODAL ─── */
  .pp-modal-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(43,38,34,0.7);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }
  .pp-modal-overlay.open { opacity: 1; visibility: visible; }
  .pp-modal {
    background: var(--white);
    width: 100%; max-width: 760px; max-height: 86vh;
    border-radius: 16px;
    box-shadow: 0 40px 120px rgba(0,0,0,0.35);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-gold);
  }
  .pp-modal-scroll { max-height: 86vh; overflow-y: auto; padding: 48px 48px 44px; }
  .pp-modal-close {
    position: absolute; top: 18px; right: 18px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--off-white); border: 1px solid var(--border-gold);
    color: var(--navy); font-size: 20px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.25s;
  }
  .pp-modal-close:hover { background: var(--gold); color: #fff; transform: rotate(90deg); }
  .pp-modal-head { margin-bottom: 32px; border-bottom: 1px solid var(--cream-dark); padding-bottom: 28px; }
  .pp-modal-title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 300;
    color: var(--navy);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
  }
  .pp-modal-line {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .pp-modal-inherits {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }
  .pp-modal-cat { margin-bottom: 28px; }
  .pp-modal-cat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 14px;
  }
  .pp-modal-cat-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
   font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}
  .pp-modal-items { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .pp-modal-item-name {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 3px;
  }
  .pp-modal-item-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.65;
    color: var(--text-muted);
  }
  .pp-modal-pricing {
    margin-top: 12px; padding-top: 28px;
    border-top: 1px solid var(--cream-dark);
    text-align: center;
  }
  .pp-modal-pricing-label {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
   font-weight: 500;}
  .pp-modal-pricing-amount {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 300;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .pp-modal-pricing-note {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--text-muted);
    max-width: 420px;
    margin: 0 auto;
  }

  @media (max-width: 980px) {
    .pp-grid { grid-template-columns: 1fr; }
    .pp-modal-items { grid-template-columns: 1fr; }
    .pp-modal-scroll { padding: 38px 24px 32px; }
  }

  /* ═══════════════════════════════════════════════════
     PRODUCTS PAGE
  ═══════════════════════════════════════════════════ */

  /* ═══════════════════════════════════════════════
     PRODUCTS PAGE — CINEMATIC PLAN EXPERIENCE
  ═══════════════════════════════════════════════ */

  /* Section wrapper */
  .pr-plans-section {
    background: var(--navy);
    padding: 0 0 0;
    position: relative;
    scroll-margin-top: var(--navbar-h, 76px);
  }

  /* ── Sticky Plan Tabs — sits above the active plan's banner heading; scrolls
     in flow at first, then sticks just beneath the main navbar once reached,
     and unsticks naturally once the whole Product Plans section scrolls past. ── */
  /* ── Floating sticky tab bar — no white strip, just the three pills ── */
  .pr-plan-tabsbar {
    position: sticky;
    top: calc(var(--navbar-h, 76px) + 14px);
    z-index: 500;
    /* No background, no border, no shadow — just the pills float */
    display: flex;
    justify-content: center;
    padding: 0;
    pointer-events: none; /* let clicks pass through the gap, not the bar itself */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .pr-plan-tabsbar.pr-tabsbar-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .pr-plan-tabsbar-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    /* Fully transparent — no container, no border, no shadow; only the pills float */
    background: transparent;
    pointer-events: all; /* re-enable clicks on the pill cluster itself */
  }
  .pr-plan-tab {
    position: relative;
    padding: 8px 22px;
    border-radius: 100px;
    border: 1px solid rgba(181,86,44,0.28);
    /* Each pill carries its own faint frosted fill (not a container/strip) so it
       stays legible floating over both navy and light sections as the page scrolls. */
    background: rgba(43,38,34,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,0.72);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
      box-shadow 0.3s ease, transform 0.28s cubic-bezier(0.34,1.2,0.64,1);
  }
  .pr-plan-tab:hover:not(.active) {
    background: rgba(181,86,44,0.12);
    border-color: rgba(181,86,44,0.55);
    color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(181,86,44,0.18);
  }
  .pr-plan-tab.active {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 6px 22px rgba(181,86,44,0.42);
    transform: translateY(-1px);
  }
  .pr-plan-tab.active::after { display: none; }

  /* Panel — only the active plan is displayed at a time; switching crossfades
     with a short upward slide instead of reloading or scrolling between stacked panels. */
  .pr-tab-panel { display: none; scroll-margin-top: 150px; }
  .pr-tab-panel.active { display: block; }
  .pr-tab-panel.pr-panel-fade-in {
    animation: prPanelFadeIn 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
  }
  .pr-tab-panel.pr-panel-fade-out {
    animation: prPanelFadeOut 0.28s cubic-bezier(0.4,0,0.2,1) forwards;
  }
  @keyframes prPanelFadeIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes prPanelFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-16px); }
  }
  @media (max-width: 640px) {
    .pr-plan-tabsbar-inner { padding: 6px 10px; gap: 7px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
    .pr-plan-tab {font-family: var(--font-body);  padding: 7px 14px; font-size: var(--fs-body); letter-spacing: 0.02em;  font-weight: 600;}
  }

  /* ── Plan Hero Banner ── */
  .pr-plan-banner {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--navy);
  }
  .pr-plan-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transform-origin: center center;
    transition: transform 8s ease;
  }
  .pr-plan-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
      rgba(30,26,23,0.96) 0%,
      rgba(30,26,23,0.78) 45%,
      rgba(30,26,23,0.42) 100%);
  }
  .pr-plan-banner-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 0 80px;
  }
  .pr-plan-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
   font-weight: 500;}
  .pr-plan-eyebrow::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--gold);
    flex-shrink: 0;
  }
  .pr-plan-banner-h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 300;
    color: #fff;
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
  }
  .pr-plan-banner-h1 em {
    font-style: italic;
    color: var(--gold);
  }
  .pr-plan-banner-sub {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    color: rgba(255,255,255,0.62);
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 42px;
  }
  .pr-plan-inherits-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(181,86,44,0.1);
    border: 1px solid rgba(181,86,44,0.3);
    border-radius: 3px;
    padding: 8px 20px;
    margin-bottom: 32px;
  }
  /* View Pricing CTA — filled gold, primary action on the plan pricing card */
  .pr-view-pricing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    background: var(--gold);
    border: 1.5px solid var(--gold);
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  .pr-view-pricing-btn:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(181,86,44,0.35);
  }
  .pr-view-pricing-arrow { display: inline-block; transition: transform 0.3s ease; }
  .pr-view-pricing-btn:hover .pr-view-pricing-arrow { transform: translateX(3px); }

  /* Secondary "View Pricing" CTA — outlined companion action shown beneath
     the Essential plan's banner description, in place of the pricing card's
     button that previously served the same purpose. */
  .pr-view-pricing-btn-secondary {
    background: transparent;
    border: 1.5px solid var(--gold);
    color: var(--gold);
  }
  .pr-view-pricing-btn-secondary:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    transform: translateY(-2px);
  }

  /* ── Plan Pricing Card — premium summary card that overlaps the banner's
     lower edge, surfacing plan name, description, key benefits and CTA in
     one glanceable unit before the reader commits to scrolling further. ── */
  .pr-plan-card-wrap {
    position: relative;
    z-index: 4;
    background: var(--off-white);
    padding-bottom: 64px;
  }
  .pr-plan-card {
    position: relative;
    max-width: 1100px;
    margin: -68px auto 0;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--border-gold);
    box-shadow: 0 30px 70px rgba(43,38,34,0.16), var(--shadow-gold);
    padding: 44px 52px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
  }
  .pr-plan-card::before {
    content: '';
    position: absolute;
    top: 0; left: 32px; right: 32px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  }
  .pr-plan-card-main { max-width: 620px; }
  .pr-plan-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .pr-plan-card-badge::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--gold);
  }
  .pr-plan-card-name {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--navy);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  .pr-plan-card-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 26px;
    max-width: 560px;
  }
  .pr-plan-card-benefits {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
  }
  .pr-plan-card-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--text-dark);
    line-height: 1.55;
  }
  .pr-plan-card-benefits .pr-feature-check {
    width: 17px; height: 17px;
    margin-top: 1px;
  }
  .pr-plan-card-benefits .pr-feature-check svg { width: 8px; height: 8px; }
  .pr-plan-card-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .pr-plan-card-cta-note {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  @media (max-width: 980px) {
    .pr-plan-card { grid-template-columns: 1fr; margin: -48px 24px 0; padding: 36px 30px; text-align: left; }
    .pr-plan-card-benefits { grid-template-columns: 1fr; }
    .pr-plan-card-cta { align-items: flex-start; margin-top: 8px; }
  }
  @media (max-width: 640px) {
    .pr-plan-card { margin: -36px 16px 0; padding: 30px 22px; border-radius: 14px; }
  }

  /* ── Story Sections ── */
  .pr-story {
    background: var(--off-white);
  }

  /* Alternating image + content rows — editorial layout: image height scales with
     how much content sits beside it, instead of every row sharing one fixed height.
     Image column is intentionally the smaller partner (≈40%) so the copy carries
     the section, with no separate navy heading bar breaking the flow between rows. */
  .pr-story-row {
    display: grid;
    grid-template-columns: 40% 60%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(43,38,34,0.06);
  }
  .pr-story-row.h-compact { min-height: 240px; }
  .pr-story-row.h-standard { min-height: 320px; }
  .pr-story-row.h-tall { min-height: 400px; }
  .pr-story-row.reverse { direction: rtl; }
  .pr-story-row.reverse > * { direction: ltr; }
  .pr-story-img {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
  }
  .pr-story-img-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
    will-change: transform;
  }
  .pr-story-row:hover .pr-story-img-inner {
    transform: scale(1.04);
  }
  .pr-story-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(30,26,23,0.18) 0%, transparent 70%);
    pointer-events: none;
  }
  .pr-story-content {
    background: #fff;
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  /* Elegant section numbering — replaces the small gold uppercase eyebrow
     label. The number stands alone as a quiet, premium marker; the section
     title itself is carried by the heading beneath it. */
  .pr-story-content-eyebrow {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
  }
  .pr-story-content-eyebrow::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--border-gold);
    flex-shrink: 0;
    align-self: center;
  }
  .pr-story-num {
    font-family: var(--font-mono);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-caption);
    letter-spacing: 0.25em;
    color: var(--gold);
    opacity: 0.85;
   text-transform: uppercase;}
  .pr-story-h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 300;
    color: var(--navy);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 24px;
  }
  .pr-story-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.82;
    margin-bottom: 32px;
    max-width: 440px;
  }

  /* Feature list */
  .pr-feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .pr-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(43,38,34,0.07);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--navy);
    line-height: 1.5;
  }
  .pr-feature-list li:last-child { border-bottom: none; }
  .pr-feature-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .pr-feature-check svg {
    width: 10px;
    height: 10px;
  }
  .pr-feature-name { font-weight: 500; }
  .pr-feature-desc {font-family: var(--font-body); 
    font-size: var(--fs-body);
    color: var(--text-muted);
    line-height: 1.55;
    margin-top: 3px;
  }

  /* Premium / NRI tier rows: every service of a plan tier as a compact grid
     (section heading + short check items) beside a photo that stretches to
     the height of the grid. */
  .pr-story-row.pr-tier-row { grid-template-columns: 36% 64%; min-height: 0; }
  .pr-tier-row .pr-story-content { padding: 48px 52px; }
  .pr-tier-row .pr-story-h2 { margin-bottom: 20px; }
  .pr-tier-grid { column-count: 2; column-gap: 44px; }
  .pr-tier-sec { break-inside: avoid; margin-bottom: 22px; }
  .pr-tier-sec-title {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .pr-tier-list { list-style: none; margin: 0; padding: 0; }
  .pr-tier-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--navy);
    line-height: 1.4;
  }
  @media (max-width: 980px) {
    .pr-story-row.pr-tier-row { grid-template-columns: 1fr; }
    .pr-tier-row .pr-story-content { padding: 40px 28px; }
  }
  @media (max-width: 720px) {
    .pr-tier-grid { column-count: 1; }
  }

  /* Wide feature (for single-item categories) — content gets even more room */
  .pr-story-row.wide-content {
    grid-template-columns: 32% 68%;
  }
  .pr-story-row.wide-image {
    grid-template-columns: 50% 50%;
  }
  /* Rows whose picture must be seen whole (the full laptop inspection report):
     the frame takes the picture's own proportions instead of being cropped to
     whatever height the copy beside it happens to need. The row grows to fit. */
  .pr-story-row.img-full .pr-story-img {
    aspect-ratio: var(--img-ar, 3 / 2);
    min-height: 0;
    align-self: center;
  }
  /* Simplified per-plan pricing section — copy only, no cards, tables, tabs or matrices */
  .pr-pricing-section {
    background: var(--navy);
    padding: 120px 80px;
    display: flex;
    justify-content: center;
    text-align: center;
    scroll-margin-top: 140px;
    border-top: 1px solid rgba(181,86,44,0.15);
  }
  .pr-pricing-inner { max-width: 720px; }
  .pr-pricing-eyebrow {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
   font-weight: 500;}
  .pr-pricing-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 300;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 24px;
  }
  .pr-pricing-title em { color: var(--gold); font-style: italic; }
  .pr-pricing-body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255,255,255,0.62);
    margin-bottom: 40px;
  }
  .pr-pricing-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 36px;
    background: var(--gold);
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  .pr-pricing-cta:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(181,86,44,0.35);
  }

  /* Gold floating letter watermark — removed per design (no alphabet decoration) */
  .pr-cat-watermark {
    display: none;
  }

  @media (max-width: 980px) {
    .pr-story-row,
    .pr-story-row.reverse,
    .pr-story-row.wide-content,
    .pr-story-row.wide-image {
      grid-template-columns: 1fr;
      direction: ltr;
    }
    .pr-story-img { min-height: 260px; }
    .pr-story-content { padding: 48px 32px; }
    .pr-plan-banner-content { padding: 0 32px; }
    .pr-pricing-section { padding: 60px 32px; }
  }
  @media (max-width: 640px) {
    .pr-story-row,
    .pr-story-row.h-compact,
    .pr-story-row.h-standard,
    .pr-story-row.h-tall { min-height: auto; }
  }


  /* ═══════════════════════════════════════════════════════════════
     SERVICES PAGE — ON-DEMAND JOURNEY (Sections 1–8)
  ═══════════════════════════════════════════════════════════════ */

  .sp2-eyebrow {
    font-size: var(--fs-caption); font-family: var(--font-mono); font-weight: 500;
    letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold);
    display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  }
  .sp2-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--gold); }
  .sp2-eyebrow.center { justify-content: center; }
  .sp2-eyebrow.center::before { display: inline-block; }
  .sp2-eyebrow.center::after { content: ''; width: 32px; height: 1px; background: var(--gold); }
  .sp2-eyebrow.on-dark { color: var(--gold-light); }
  #sp-process .sp2-eyebrow,
  #sp-pricing2 .sp2-eyebrow,
  #sp-availability .sp2-eyebrow,
  #sp-final-cta .sp2-eyebrow {
    font-size: 15px;
  }

  /* ── SECTION 2 — EXPLORE SERVICES ──────────────────────────── */
  /* This is now the first section after the hero (Beyond Our Plans was
     removed), so top padding is trimmed to bring it closer to the hero
     while keeping a premium amount of breathing room. Header block is
     left-aligned (was centered) per the refreshed hierarchy. */
  #sp-explore { background: var(--tint-explore); padding: 72px 0 100px; }
  .sp2-explore-head { text-align: left; max-width: 640px; margin: 0 0 48px; }
  .sp2-explore-head .sp2-eyebrow { justify-content: flex-start; }
  .sp2-explore-head h2 { font-family: var(--font-display); font-size: clamp(3rem, 4vw, 3.6rem); line-height: 1.28; font-weight: 300; color: var(--navy); letter-spacing: -0.015em; margin-bottom: 16px; }
  .sp2-explore-head h2 em { font-style: italic; color: var(--gold); }
  .sp2-explore-head p { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height: 1.75; font-weight: 300; }
  .sp2-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .sp2-cat-card {
    background: #fff; border: 1px solid rgba(181,86,44,0.16); border-radius: 20px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(43,38,34,0.05);
    transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .sp2-cat-card:hover { border-color: rgba(181,86,44,0.45); box-shadow: 0 28px 64px rgba(43,38,34,0.12); transform: translateY(-4px); }
  .sp2-cat-trigger { width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; display: block; }
  .sp2-cat-img { position: relative; height: 190px; overflow: hidden; }
  .sp2-cat-img-inner { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); }
  .sp2-cat-card:hover .sp2-cat-img-inner { transform: scale(1.08); }
  .sp2-cat-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,38,34,0.05) 0%, rgba(43,38,34,0.55) 100%); }
  .sp2-cat-count {
    position: absolute; top: 16px; right: 16px; z-index: 1;
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.25em; text-transform: uppercase;
    color: #fff; background: rgba(43,38,34,0.55); border: 1px solid rgba(255,255,255,0.25);
    border-radius: 100px; padding: 5px 12px; backdrop-filter: blur(6px);
   font-weight: 500;}
  .sp2-cat-body { padding: 26px 28px 28px; display: flex; align-items: flex-start; gap: 16px; }
  .sp2-cat-icon { flex-shrink: 0; margin-top: 2px; }
  .sp2-cat-text { flex-grow: 1; min-width: 0; }
  .sp2-cat-title { font-family: var(--font-display); font-size: 27.4px; font-weight: 500; color: var(--navy); letter-spacing: -0.01em; margin-bottom: 6px; line-height: 1.2; }
  .sp2-cat-desc { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height: 1.6; font-weight: 300; }
  .sp2-cat-arrow {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; margin-top: 2px;
    border: 1px solid rgba(181,86,44,0.35); display: flex; align-items: center; justify-content: center;
    color: var(--gold); transition: transform 0.4s cubic-bezier(0.34,1.4,0.64,1), background 0.3s ease, border-color 0.3s ease;
  }
  .sp2-cat-card.open .sp2-cat-arrow { transform: rotate(180deg); background: var(--gold); color: #fff; border-color: var(--gold); }
  .sp2-cat-arrow svg { width: 14px; height: 14px; }

  .sp2-cat-accordion { max-height: 0; overflow: hidden; transition: max-height 0.6s cubic-bezier(0.16,1,0.3,1); }
  .sp2-cat-card.open .sp2-cat-accordion { max-height: 12000px; }
  .sp2-cat-accordion-inner { padding: 6px 28px 32px; border-top: 1px solid rgba(181,86,44,0.14); margin: 0 28px; }
  .sp2-cat-accordion-inner .svc-items { padding-top: 22px; }
  .sp2-svc-check {
    flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%; margin-top: 1px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
    display: inline-flex; align-items: center; justify-content: center; margin-right: 8px;
  }
  .sp2-svc-check svg { width: 9px; height: 9px; }
  .sp2-cat-accordion .svc-item-top { align-items: center; }
  .sp2-cat-accordion .svc-item-name { display: inline-flex; align-items: center; }

  /* "Book this service" CTA revealed inside each expanded category card */
  .sp2-book-cta-wrap { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(181,86,44,0.14); }
  .sp2-book-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 30px; border-radius: 8px; border: 1.5px solid var(--gold);
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
    color: #fff; font-family: var(--font-body); font-size: var(--fs-body);
    font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; transition: all 300ms ease;
    box-shadow: 0 8px 24px rgba(181,86,44,0.28);
  }
  .sp2-book-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(181,86,44,0.4); filter: brightness(1.05); }

  @media (max-width: 1024px) {
    .sp2-cat-grid { grid-template-columns: 1fr; }
  }

  /* ── SECTION 3 — HOW IT WORKS TIMELINE ─────────────────────── */
  #sp-process { background: var(--tint-process); padding: 68px 0 64px; overflow: hidden; }
  .sp2-process-head { text-align: center; max-width: 560px; margin: 0 auto 56px; }
  .sp2-process-head h2 { font-family: var(--font-display); font-size: clamp(3rem, 4vw, 3.6rem); line-height: 1.28; font-weight: 300; color: var(--navy); letter-spacing: -0.015em; }
  .sp2-process-head h2 em { font-style: italic; color: var(--gold); }
  .sp2-timeline { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
  .sp2-timeline-track {
    position: absolute; top: 21px; left: calc(100%/14); right: calc(100%/14);
    height: 2px; background: rgba(181,86,44,0.16); z-index: 0;
  }
  .sp2-timeline-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }
  .sp2-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .sp2-step.in { opacity: 1; transform: translateY(0); }
  .sp2-step-dot {
    width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(181,86,44,0.35);
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
    font-family: var(--font-display); font-size: var(--fs-body); color: var(--gold); transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
  }
  .sp2-step.in .sp2-step-dot { background: linear-gradient(135deg, var(--gold-dark), var(--gold-light)); border-color: var(--gold); color: #fff; box-shadow: 0 10px 26px rgba(181,86,44,0.35); }
  .sp2-step-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--navy); line-height: 1.4; padding: 0 4px; }
  @media (max-width: 900px) {
    .sp2-timeline { grid-template-columns: 1fr; gap: 30px; }
    .sp2-timeline-track { top: 0; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; }
    .sp2-timeline-fill { width: 100%; height: 0%; }
    .sp2-step { flex-direction: row; text-align: left; padding-left: 0; }
    .sp2-step-dot { margin-bottom: 0; margin-right: 20px; }
  }

  /* ── SECTION 4 — QUOTE BASED PRICING ───────────────────────── */
  /* min-height (not a fixed height) + flex centering means the section
     settles at ~60vh on typical screens while still growing gracefully
     to fit its content on shorter viewports — content is never clipped. */
  #sp-pricing2 {
    background: var(--tint-pricing);
    min-height: 60vh;
    padding: 56px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  #sp-pricing2 .container { width: 100%; }
  .sp2-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .sp2-pricing-left h2 {
    font-family: var(--font-display); font-weight: 300; letter-spacing: -0.015em;
    font-size: clamp(3rem, 4vw, 3.6rem); line-height: 1.28; color: var(--navy); margin-bottom: 24px;
  }
  .sp2-pricing-left h2 em { font-style: italic; color: var(--gold); }
  .sp2-pricing-left p { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height: 1.8; font-weight: 300; max-width: 420px; }
  .sp2-glass-card {
    background: var(--navy); border-radius: 22px; padding: 40px 38px; position: relative; overflow: hidden;
    box-shadow: 0 40px 80px rgba(43,38,34,0.25);
  }
  .sp2-glass-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(181,86,44,0.16) 0%, transparent 70%); pointer-events: none; }
  .sp2-glass-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .sp2-glass-list-item { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: var(--fs-body); color: #fff; font-weight: 400; }
  .sp2-glass-list-item .sp2-svc-check { margin-right: 0; }
  .sp2-glass-factors { position: relative; z-index: 1; }
  .sp2-glass-factors-label { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 16px;  font-weight: 500;}
  .sp2-glass-factors ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  .sp2-glass-factors li { font-family: var(--font-body); font-size: var(--fs-body); color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 9px; }
  .sp2-glass-factors li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-light); flex-shrink: 0; }
  .sp2-pricing-note {
    margin-top: 20px; display: flex; gap: 14px; align-items: flex-start;
    background: #fff; border: 1px solid rgba(181,86,44,0.2); border-radius: 14px; padding: 18px 22px;
  }
  .sp2-pricing-note-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: rgba(181,86,44,0.1); display: flex; align-items: center; justify-content: center; color: var(--gold); }
  .sp2-pricing-note-icon svg { width: 15px; height: 15px; }
  .sp2-pricing-note p { font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height: 1.65; font-weight: 300; }
  @media (max-width: 1024px) { .sp2-pricing-grid { grid-template-columns: 1fr; gap: 48px; } }
  @media (max-width: 640px) { .sp2-glass-factors ul { grid-template-columns: 1fr; } }

  /* ── SECTION 5 — SERVICE AVAILABILITY ──────────────────────── */
  #sp-availability {
    background: var(--tint-availability);
    min-height: 60vh;
    padding: 56px 0;
    display: flex;
    align-items: center;
  }
  #sp-availability .container { width: 100%; }
  .sp2-avail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .sp2-avail-left h2 {
    font-family: var(--font-display); font-weight: 300; letter-spacing: -0.015em;
    font-size: clamp(3rem, 4vw, 3.6rem); line-height: 1.28; color: var(--navy);
  }
  .sp2-avail-right { background: #fff; border: 1px solid rgba(181,86,44,0.18); border-radius: 20px; padding: 12px 8px; box-shadow: 0 24px 56px rgba(43,38,34,0.07); }
  .sp2-avail-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px dashed rgba(181,86,44,0.16); }
  .sp2-avail-row:last-child { border-bottom: none; }
  .sp2-avail-row-label { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--navy);  font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}
  .sp2-avail-check { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-dark), var(--gold-light)); display: flex; align-items: center; justify-content: center; }
  .sp2-avail-check svg { width: 12px; height: 12px; }
  .sp2-avail-badge {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 16px 26px;
    background: var(--navy); border-radius: 100px; color: #fff; font-family: var(--font-mono);
    font-size: var(--fs-caption); font-weight: 400;
  }
  .sp2-avail-badge svg { width: 16px; height: 16px; color: var(--gold-light); flex-shrink: 0; }
  @media (max-width: 1024px) { .sp2-avail-grid { grid-template-columns: 1fr; gap: 44px; } }

  /* ── SECTION 6 — LUXURY CTA ────────────────────────────────── */
  #sp-final-cta { background: var(--navy); padding: 150px 0; position: relative; overflow: hidden; }
  .sp2-mesh { position: absolute; inset: 0; pointer-events: none; }
  .sp2-mesh span {
    position: absolute; border-radius: 50%; filter: blur(70px);
    background: radial-gradient(circle, rgba(181,86,44,0.55) 0%, transparent 70%);
    animation: sp2-mesh-drift 14s ease-in-out infinite;
  }
  .sp2-mesh span:nth-child(1) { width: 480px; height: 480px; top: -160px; left: 8%; }
  .sp2-mesh span:nth-child(2) { width: 380px; height: 380px; bottom: -140px; right: 10%; animation-delay: -5s; }
  .sp2-mesh span:nth-child(3) { width: 320px; height: 320px; top: 30%; right: 30%; opacity: 0.6; animation-delay: -9s; }
  @keyframes sp2-mesh-drift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-20px) scale(1.12); } }
  .sp2-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; text-align: center; }
  .sp2-cta-inner h2 {
    font-family: var(--font-display); font-weight: 300; letter-spacing: -0.015em;
    font-size: clamp(3rem, 4vw, 3.6rem); line-height: 1.28; color: #fff; margin-bottom: 24px;
  }
  .sp2-cta-inner p { font-family: var(--font-body); font-size: var(--fs-body); color: rgba(255,255,255,0.6); line-height: 1.8; font-weight: 300; max-width: 520px; margin: 0 auto 48px; }
  .sp2-cta-btns { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
  .sp2-cta-btn-primary {
    display: inline-flex; align-items: center; gap: 10px; padding: 19px 42px;
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 55%, var(--gold-light) 100%);
    border: none; border-radius: 4px; color: #fff; font-family: var(--font-body); font-size: var(--fs-body);
    font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; text-decoration: none;
    box-shadow: 0 10px 34px rgba(181,86,44,0.35); position: relative;
  }
  .sp2-cta-btn-secondary {
    display: inline-flex; align-items: center; gap: 10px; padding: 19px 42px;
    background: transparent; border: 1px solid rgba(255,255,255,0.35); border-radius: 4px;
    color: #fff; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.02em;
    text-transform: uppercase; cursor: pointer; text-decoration: none; position: relative;
  }
  @media (max-width: 640px) {
    #sp-final-cta { padding: 110px 0; }
    .sp2-cta-btns { flex-direction: column; align-items: center; }
  }

  /* ══════════════════════════════════════════════════════════════
     PRICING PAGE — all rules scoped to #pricing-page so they
     cannot bleed into or conflict with the main-page styles.
  ══════════════════════════════════════════════════════════════ */
  #pricing-page { display: none; }

  /* PRICING HERO */
  #pricing-page .pp-hero {
    position: relative;
    z-index: 2;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--navbar-h, 76px) + 46px) 40px 48px;
    background: radial-gradient(120% 100% at 50% 0%, var(--navy-light, #3D3631) 0%, var(--navy, #2B2622) 62%, #1E1A17 100%);
    overflow: hidden;
    text-align: center;
  }
  #pricing-page .pp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 85%);
  }
  #pricing-page .pp-orb {
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181,86,44,0.2) 0%, transparent 70%);
    top: -160px; right: -100px;
    pointer-events: none;
  }
  #pricing-page .pp-orb.two {
    top: auto; bottom: -170px; left: -130px; right: auto;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(181,86,44,0.1) 0%, transparent 70%);
  }
  #pricing-page .pp-hero-inner { position: relative; z-index: 5; max-width: 720px; }
  #pricing-page .pp-eyebrow {
    font-size: 15px;
    font-family: var(--font-mono);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold, #B5562C);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
    opacity: 0;
   font-weight: 500;}
  #pricing-page .pp-eyebrow::before,
  #pricing-page .pp-eyebrow::after {
    content: '';
    width: 28px; height: 1px;
    background: var(--gold, #B5562C);
    display: inline-block;
  }
  #pricing-page .pp-h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    color: #fff;
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    opacity: 0;
  }
  #pricing-page .pp-h1 em { font-style: italic; color: var(--gold-light, #D17A4F); }
  #pricing-page .pp-sub {
    color: rgba(255,255,255,0.72);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-weight: 300;
    max-width: 560px;
    margin: 0 auto;
    opacity: 0;
  }

  /* PRICING CARDS */
  #pricing-page .pp-cards {
    position: relative;
    background: var(--off-white, #FAF5EC);
    padding: 136px 40px 110px;
    z-index: 3;
    overflow: visible;
  }
  #pricing-page .pp-cards-grid {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
    overflow: visible;
  }
  /* Once JS has measured the natural content height, the grid switches to
     bottom-aligned cards inside a track that is PERMANENTLY sized to fit
     the tallest (featured/active) state. Because the track size never
     changes — only which single card is drawn at the taller height inside
     it — hovering never reflows a sibling card or the page below. */
  #pricing-page .pp-cards-grid.pp-heights-ready {
    align-items: end;
  }
  #pricing-page .pp-card {
    position: relative;
    background: var(--white, #fff);
    border: 1px solid rgba(181,86,44,0.3);
    border-radius: 20px;
    padding: 38px 30px 32px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 1;
    transform: translateY(0);
    transition: height 420ms cubic-bezier(0.45,0,0.15,1),
                transform 420ms cubic-bezier(0.45,0,0.15,1),
                box-shadow 420ms cubic-bezier(0.45,0,0.15,1),
                border-color 350ms ease;
    will-change: height, transform;
    backface-visibility: hidden;
  }
  /* Normal (non-featured) height, locked once measured. */
  #pricing-page .pp-cards-grid.pp-heights-ready .pp-card {
    height: var(--pp-h, 100%);
  }
  /* Featured/active card sits at the taller, pre-reserved height and lifts
     slightly — the grid row is already sized to fit this, so nothing else
     in the row (or the page below) ever moves. Exactly one card carries
     .pp-active at a time (JS-enforced), so there's never a double-tall
     state. */
  #pricing-page .pp-cards-grid.pp-heights-ready .pp-card.pp-active {
    height: var(--pp-row-h, 100%);
  }
  #pricing-page .pp-card.pp-active {
    transform: translateY(-8px);
    z-index: 50;
    border-color: var(--gold-light, #D17A4F);
    box-shadow: 0 34px 78px rgba(43,38,34,0.20), 0 0 0 1.5px var(--gold-light,#D17A4F), 0 0 46px rgba(181,86,44,0.30);
  }
  #pricing-page .pp-card.pp-active .pp-check svg { stroke: var(--gold-light, #D17A4F); }
  #pricing-page .pp-card.pp-active .pp-check { background: rgba(181,86,44,0.16); }
  /* CTA becomes slightly more prominent while its card is active */
  #pricing-page .pp-card.pp-active .pp-cta.primary {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(181,86,44,0.45);
  }
  #pricing-page .pp-card.pp-active .pp-cta:not(.primary) {
    border-color: var(--gold-light, #D17A4F);
    box-shadow: 0 10px 24px rgba(181,86,44,0.2);
  }

  #pricing-page .pp-badge {
    position: absolute;
    top: -16px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gold-light,#D17A4F), var(--gold,#B5562C));
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--fs-caption); font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 30px;
    box-shadow: 0 8px 22px rgba(181,86,44,0.4);
    white-space: nowrap;
    z-index: 2;
  }
  #pricing-page .pp-name {
    font-family: var(--font-display);
    font-size: var(--fs-h3); font-weight: 500;
    color: var(--navy, #2B2622);
    margin-bottom: 8px;
  }
  #pricing-page .pp-desc {font-family: var(--font-body); 
    font-size: var(--fs-body); color: var(--text-muted, #6B7280);
    line-height: 1.6; margin-bottom: 22px; min-height: 58px;
  }
  #pricing-page .pp-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 3px; }
  #pricing-page .pp-price .pp-amount {
    font-family: var(--font-display); font-size: var(--fs-h4); color: var(--navy,#2B2622); font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: proportional-nums lining-nums;
    font-feature-settings: 'pnum' 1, 'lnum' 1, 'kern' 1;
  }
  #pricing-page .pp-price .pp-period {font-family: var(--font-display);  font-size: var(--fs-h4); color: var(--text-muted,#6B7280); }
  #pricing-page .pp-price-note { font-size: var(--fs-h4); font-family: var(--font-display); color: var(--gold,#B5562C); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; }

  #pricing-page .pp-cta {
    display: block; text-align: center; text-decoration: none;
    padding: 14px 20px; border-radius: 8px;
    font-family: var(--font-body);
    font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
    cursor: pointer; margin-bottom: 26px;
    transition: all 300ms ease;
    border: 1.5px solid var(--gold,#B5562C);
    background: transparent; color: var(--gold-dark,#8A3F1E);
  }
  #pricing-page .pp-cta:hover { background: var(--gold,#B5562C); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(181,86,44,0.35); }
  #pricing-page .pp-cta.primary {
    background: linear-gradient(135deg, var(--navy-light,#3D3631) 0%, var(--gold,#B5562C) 130%);
    color: #fff; border: none;
    box-shadow: 0 10px 28px rgba(181,86,44,0.3);
  }
  #pricing-page .pp-cta.primary:hover { filter: brightness(1.1); transform: translateY(-3px); box-shadow: 0 16px 38px rgba(181,86,44,0.45); }

  #pricing-page .pp-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 28px; }
  #pricing-page .pp-features li {font-family: var(--font-body);  display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body); color: var(--text-dark,#2B2622); line-height: 1.45; }
  #pricing-page .pp-check { flex: none; width: 17px; height: 17px; border-radius: 50%; background: rgba(181,86,44,0.1); display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: background 300ms ease; }
  #pricing-page .pp-check svg { width: 9.5px; height: 9.5px; stroke: var(--gold,#B5562C); transition: stroke 300ms ease; }

  /* PRICING FOOTER */
  #pricing-page footer { background: var(--navy,#2B2622); padding: 80px 0 0; }
  #pricing-page .footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  #pricing-page .footer-brand-name { font-family: var(--font-body); font-size: var(--fs-caption); color: #fff; margin-bottom: 6px; }
  #pricing-page .footer-brand-tag { font-size: var(--fs-caption); font-family: var(--font-mono); letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold,#B5562C);  font-weight: 500;}
  #pricing-page .footer-brand-desc {font-family: var(--font-body);  font-size: var(--fs-caption); color: rgba(255,255,255,0.55); line-height: 1.8; margin-top: 16px; max-width: 320px; }
  #pricing-page .footer-col-title { font-size: var(--fs-caption); font-family: var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold,#B5562C); margin-bottom: 18px; }
  #pricing-page .footer-col-links { display: flex; flex-direction: column; gap: 12px; }
  #pricing-page .footer-col-links a {font-family: var(--font-body);  color: rgba(255,255,255,0.6); text-decoration: none; font-size: var(--fs-caption); transition: color 0.2s; }
  #pricing-page .footer-col-links a:hover { color: var(--gold,#B5562C); }
  #pricing-page .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; flex-wrap: wrap; gap: 12px; }
  #pricing-page .footer-copy {font-family: var(--font-body);  font-size: var(--fs-caption); color: rgba(255,255,255,0.45); }
  #pricing-page .footer-hq {font-family: var(--font-body);  font-size: var(--fs-caption); color: rgba(255,255,255,0.3); margin-top: 4px; }
  #pricing-page .footer-links { display: flex; gap: 24px; }
  #pricing-page .footer-links a {font-family: var(--font-body);  color: rgba(255,255,255,0.45); text-decoration: none; font-size: var(--fs-caption); }
  #pricing-page .footer-links a:hover { color: var(--gold,#B5562C); }

  /* Pricing-page responsive */
  @media (max-width: 992px) {
    #pricing-page .pp-cards-grid { grid-template-columns: repeat(2, 1fr); row-gap: 64px; align-items: stretch; }
    #pricing-page .pp-card.pp-featured { grid-column: auto; justify-self: stretch; width: 100%; order: 0; margin-top: 0; }
    #pricing-page .pp-cards { padding: 128px 40px 100px; }
    /* Tablet & mobile: no height/lift animation (would cause layout shift) —
       use a subtle uniform scale instead. */
    #pricing-page .pp-card { height: 100% !important; transform: none; }
    #pricing-page .pp-card.pp-active { transform: scale(1.02); box-shadow: 0 24px 54px rgba(43,38,34,0.16), 0 0 0 1.5px var(--gold-light,#D17A4F), 0 0 30px rgba(181,86,44,0.22); }
  }
  @media (max-width: 640px) {
    #pricing-page .pp-hero { padding: calc(var(--navbar-h,76px) + 32px) 24px 40px; }
    #pricing-page .pp-cards { padding: 120px 20px 80px; }
    #pricing-page .pp-cards-grid { grid-template-columns: 1fr; gap: 22px; }
    #pricing-page .pp-card.pp-featured { grid-column: 1 / 2; width: 100%; order: 0; margin-top: 0; }
    #pricing-page .pp-cta { width: 100%; }
  }
  @media (max-width: 900px) {
    #pricing-page .footer-main { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    #pricing-page .footer-main { grid-template-columns: 1fr; }
    #pricing-page .footer-bottom { flex-direction: column; align-items: flex-start; }
  }


/* --- style block attrs:id="vl-dashboard-styles" --- */

  /* ============================================================
     VLOOKASSET AUTHENTICATED DASHBOARD — PHASE 1
     Namespaced under #vlookasset-dashboard-root / .dash-* so it
     never collides with the homepage's own selectors. Reuses the
     homepage's existing :root tokens (colors, fonts, shadows).
  ============================================================ */

  :root{
    --dash-sidebar-w: 284px;
    --dash-topbar-h: 84px;
    --dash-content-max: 1360px;
    --dash-radius-lg: 20px;
    --dash-radius-md: 14px;
    --dash-radius-sm: 8px;
    --dash-navy-glow: radial-gradient(120% 140% at 0% 0%, #332D29 0%, #2B2622 55%, #221D1A 100%);
    --dash-card-shadow: 0 2px 4px rgba(43,38,34,0.04), 0 12px 32px rgba(43,38,34,0.07);
    --dash-card-shadow-hover: 0 8px 20px rgba(43,38,34,0.08), 0 20px 48px rgba(43,38,34,0.10);
    --dash-crit: #B4432E;
    --dash-crit-bg: rgba(180,67,46,0.08);
    --dash-high: #B5562C;
    --dash-high-bg: rgba(181,86,44,0.10);
    --dash-med: #6B7280;
    --dash-med-bg: rgba(107,114,128,0.08);
    --dash-good: #3F6B4F;
    --dash-good-bg: rgba(63,107,79,0.10);
  }

  /* ---------- Homepage fade choreography (non-destructive) ---------- */
  body.vl-dash-transitioning > *:not(#vlookasset-dashboard-root){
    transition: opacity .55s ease, filter .55s ease;
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
  }
  body.vl-dash-active{ overflow: hidden; }
  body.vl-dash-active > *:not(#vlookasset-dashboard-root){
    display: none;
  }

  #vlookasset-dashboard-root{font-size: var(--fs-body); 
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
    font-family: var(--font-body);
    color: var(--text-dark);
  }
  #vlookasset-dashboard-root.is-visible{
    opacity: 1;
    visibility: visible;
  }
  #vlookasset-dashboard-root *{ box-sizing: border-box; }
  #vlookasset-dashboard-root button{font-size: var(--fs-body);  font-family: var(--font-body); cursor: pointer; }
  #vlookasset-dashboard-root a{ text-decoration:none; color: inherit; }
  #vlookasset-dashboard-root ::selection{ background: rgba(181,86,44,0.25); }

  /* ---------- Layout shell ---------- */
  .dash-shell{
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--cream);
  }

  /* ---------- Sidebar ---------- */
  .dash-sidebar{
    width: var(--dash-sidebar-w);
    flex: 0 0 var(--dash-sidebar-w);
    height: 100%;
    background: var(--dash-navy-glow);
    display: flex;
    flex-direction: column;
    padding: 28px 20px 22px;
    position: relative;
    border-right: 1px solid rgba(181,86,44,0.18);
  }
  .dash-sidebar::after{
    content:'';
    position:absolute; top:0; right:-1px; width:1px; height:100%;
    background: linear-gradient(180deg, transparent, rgba(181,86,44,0.35) 30%, rgba(181,86,44,0.35) 70%, transparent);
  }

  .dash-brand{
    display:flex; align-items:center; gap:11px;
    padding: 4px 8px 26px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 22px;
  }
  /* Carries .vl-mark for the shield crop; the dark sidebar is why it keeps a
     light tile rather than sitting on the navy directly. */
  .dash-brand__mark{
    width: 38px; height: 38px; flex:0 0 38px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  }
  .dash-brand__text{ display:flex; flex-direction:column; line-height:1.15; }
  .dash-brand__text .name{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--white); letter-spacing:.2px; }
  .dash-brand__text .sub{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); opacity:.85; margin-top:3px; }

  .dash-plan-badge{
    display:inline-flex; align-items:center; gap:7px;
    background: rgba(181,86,44,0.14); border:1px solid rgba(181,86,44,0.3);
    color: var(--gold-light); font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; padding:5px 12px 5px 10px; border-radius:20px;
    margin: -6px 0 22px; width:fit-content;
  }
  .dash-plan-badge .d{ width:6px; height:6px; border-radius:50%; background:#6FCF97; box-shadow:0 0 0 3px rgba(111,207,151,0.25); }

  .dash-upsell-card{
    background: linear-gradient(160deg, rgba(181,86,44,0.16), rgba(181,86,44,0.05));
    border: 1px solid rgba(181,86,44,0.25);
    border-radius: var(--dash-radius-md);
    padding: 15px 16px;
    margin-bottom: 12px;
  }
  .dash-upsell-card .t{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:700; color: var(--white); margin-bottom:5px; }
  .dash-upsell-card .s{ font-family: var(--font-body); font-size: var(--fs-caption); color: rgba(245,240,232,0.62); line-height:1.5; margin-bottom:12px; }
  .dash-upsell-card__btn{
    width:100%; background: var(--gold-light); color: var(--navy); border:none; border-radius:9px;
    padding:9px; font-family: var(--font-body); font-size: var(--fs-caption); font-weight:700; cursor:pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .dash-upsell-card__btn:hover{ background: var(--white); transform: translateY(-1px); }

  .dash-profile{
    display:flex; align-items:center; gap:12px;
    padding: 12px 10px;
    border-radius: var(--dash-radius-md);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 26px;
  }
  .dash-profile__avatar{
    width: 42px; height:42px; flex:0 0 42px; border-radius:50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-size:17px; font-weight:600; color: var(--white);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18);
  }
  .dash-profile__meta{ min-width:0; }
  .dash-profile__meta .p-name{ font-family: var(--font-body); font-weight:600; font-size: var(--fs-body); color: var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dash-profile__meta .p-tier{
    display:inline-flex; align-items:center; gap:5px;
    font-family: var(--font-body); font-size: var(--fs-body); letter-spacing:.06em; text-transform:uppercase;
    color: var(--gold-light); margin-top: 4px;
  }
  .dash-profile__meta .p-tier::before{
    content:''; width:5px; height:5px; border-radius:50%; background: var(--gold-light);
    box-shadow: 0 0 6px var(--gold-light);
  }

  .dash-nav{
    display:flex; flex-direction:column; gap:3px; flex:1;
    /* min-height:0 lets the list shrink inside the column and scroll on its
       own; without it the whole sidebar overflowed and jumped. */
    min-height:0;
    overflow-y:auto; overflow-x:hidden;
    /* Wheel / touch scrolling stays in the list instead of chaining to the
       page behind it (that chaining was the up-and-down jitter). */
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 2px 0;
    /* Items fade out at the top and bottom edge instead of being cut in half
       right under the plan badge. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .dash-nav::-webkit-scrollbar{ width:0; }
  .dash-nav-group-label{
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.25em; text-transform: uppercase;
    color: rgba(255,255,255,0.32); padding: 14px 12px 8px;
   font-weight: 500;}
  .dash-nav-item{font-family: var(--font-body); 
    display:flex; align-items:center; gap:13px;
    padding: 11px 13px;
    border-radius: 11px;
    color: rgba(245,240,232,0.72);
    font-size: var(--fs-body); font-weight: 500;
    border: 1px solid transparent;
    background: transparent;
    width:100%; text-align:left;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    position: relative;
  }
  .dash-nav-item .dash-nav-icon{ width:18px; height:18px; flex:0 0 18px; opacity:.85; }
  .dash-nav-item .dash-nav-icon svg{ width:100%; height:100%; display:block; }
  .dash-nav-item:hover{
    background: rgba(255,255,255,0.06);
    color: var(--white);
    /* No sideways nudge on hover: while the list scrolls under the pointer
       it made rows twitch. The background change is enough. */
  }
  .dash-nav-item.active{
    background: linear-gradient(90deg, rgba(181,86,44,0.22), rgba(181,86,44,0.05));
    border-color: rgba(181,86,44,0.35);
    color: var(--white);
  }
  .dash-nav-item.active::before{
    content:'';
    position:absolute; left:-20px; top:50%; transform:translateY(-50%);
    width:3px; height:20px; border-radius:2px;
    background: var(--gold-light);
    box-shadow: 0 0 10px var(--gold-light);
  }
  .dash-nav-item .dash-nav-badge{
    margin-left:auto;
    font-family: var(--font-mono); font-size: var(--fs-caption);
    background: rgba(180,67,46,0.85); color: var(--white);
    border-radius: 20px; padding: 1px 7px; line-height:1.5;
  }

  .dash-sidebar__footer{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display:flex; flex-direction:column; gap:6px;
  }
  .dash-logout-btn{font-family: var(--font-body); 
    display:flex; align-items:center; gap:11px;
    padding: 11px 13px;
    border-radius: 11px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(245,240,232,0.78);
    font-size: var(--fs-body); font-weight: 600;
    width:100%;
    transition: all .2s ease;
   letter-spacing: 0.02em;}
  .dash-logout-btn:hover{
    background: rgba(180,67,46,0.14);
    border-color: rgba(180,67,46,0.4);
    color: #F3D9D2;
  }
  .dash-logout-btn svg{ width:16px; height:16px; flex:0 0 16px; }
  .dash-sidebar__footnote{
    font-family: var(--font-body); font-size: var(--fs-caption); color: rgba(255,255,255,0.28);
    text-align:center; letter-spacing:.05em; padding-top:4px;
  }

  /* ---------- Main column ---------- */
  .dash-main{
    flex: 1 1 auto;
    height: 100%;
    display:flex; flex-direction:column;
    min-width: 0;
  }

  /* ---------- Topbar ---------- */
  .dash-topbar{
    height: var(--dash-topbar-h);
    flex: 0 0 var(--dash-topbar-h);
    display:flex; align-items:center; gap:18px;
    padding: 0 34px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(181,86,44,0.16);
    position: relative;
    z-index: 5;
  }
  .dash-search{
    flex: 1 1 auto;
    max-width: 440px;
    display:flex; align-items:center; gap:10px;
    background: var(--white);
    border: 1px solid rgba(181,86,44,0.22);
    border-radius: 12px;
    padding: 10px 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .dash-search:focus-within{
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(181,86,44,0.12);
  }
  .dash-search svg{ width:16px; height:16px; color: var(--text-muted); flex:0 0 16px; }
  .dash-search input{
    border:none; outline:none; background:transparent;
    font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-dark);
    width:100%;
  }
  .dash-search input::placeholder{ color: var(--text-muted); }
  .dash-search__kbd{
    font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted);
    border: 1px solid rgba(107,114,128,0.25); border-radius: 5px; padding: 2px 6px;
    flex: 0 0 auto;
  }

  .dash-sidebar-toggle{
    display:none;
    width:42px; height:42px; flex:0 0 42px;
    border-radius: 12px; border: 1px solid rgba(43,38,34,0.10);
    background: var(--white); align-items:center; justify-content:center; color: var(--navy);
  }
  .dash-sidebar-toggle svg{ width:18px; height:18px; }
  .dash-sidebar-backdrop{
    display:none; position:fixed; inset:0; background: rgba(30,26,23,0.5);
    z-index:25; opacity:0; pointer-events:none; transition: opacity .25s ease;
  }
  .dash-sidebar-backdrop.is-open{ opacity:1; pointer-events:auto; }

  /* ---------- Collapsible sidebar (toggleDashSidebar in script.js) ---------- */
  .dash-collapse-toggle{
    margin-left:auto; flex:0 0 34px; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid transparent; border-radius:9px; color: rgba(245,240,232,0.72);
    transition: background .15s ease, color .15s ease;
  }
  .dash-collapse-toggle svg{ width:19px; height:19px; }
  .dash-collapse-toggle:hover, .dash-collapse-toggle:focus-visible{ background: rgba(255,255,255,0.1); color: var(--white); outline:none; }
  .dash-sidebar{ transition: width .2s ease, flex-basis .2s ease, padding .2s ease; }
  @media (min-width: 981px){
    .dash-shell.is-collapsed .dash-sidebar{ width:80px; flex-basis:80px; padding-left:18px; padding-right:18px; }
    .dash-shell.is-collapsed .dash-brand{ flex-direction:column; gap:10px; padding:4px 0 18px; }
    .dash-shell.is-collapsed .dash-brand__mark{ cursor:pointer; }
    .dash-shell.is-collapsed .dash-collapse-toggle{ margin-left:0; }
    .dash-shell.is-collapsed .dash-brand__text,
    .dash-shell.is-collapsed .dash-plan-badge,
    .dash-shell.is-collapsed .dash-nav-label,
    .dash-shell.is-collapsed .dash-sidebar__footnote{ display:none; }
    .dash-shell.is-collapsed .dash-nav-item,
    .dash-shell.is-collapsed .dash-logout-btn{ justify-content:center; padding:11px 0; }
    .dash-shell.is-collapsed .dash-nav-item:hover{ transform:none; }
    .dash-shell.is-collapsed .dash-nav-item.active::before{ left:-18px; }
  }
  @media (max-width: 980px){
    .dash-collapse-toggle{ display:none; }
  }
  /* Sidebar name tooltips (client dashboard + admin share the look). Above the
     dashboard root's z-index:10000. */
  .sidebar-tip{
    position:fixed; z-index:10050; transform:translateY(-50%); pointer-events:none;
    background:#000; color:#fff; font-family: var(--font-body); font-size:12.5px; font-weight:600; white-space:nowrap;
    padding:6px 10px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.25);
    opacity:0; transition:opacity .12s ease;
  }
  .sidebar-tip.is-visible{ opacity:1; }

  .dash-topbar__spacer{ flex: 1 1 auto; }

  .dash-topbar__actions{ display:flex; align-items:center; gap:10px; }
  .dash-icon-btn{
    position: relative;
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(43,38,34,0.10);
    background: var(--white);
    display:flex; align-items:center; justify-content:center;
    color: var(--navy);
    transition: all .2s ease;
  }
  .dash-icon-btn:hover{ border-color: rgba(181,86,44,0.4); box-shadow: var(--dash-card-shadow); transform: translateY(-1px); }
  .dash-icon-btn svg{ width:18px; height:18px; }
  .dash-icon-btn .dash-count{
    position:absolute; top:-5px; right:-5px;
    min-width: 18px; height:18px; padding: 0 4px;
    border-radius: 20px;
    background: var(--dash-crit);
    color: var(--white);
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600;
    display:flex; align-items:center; justify-content:center;
    border: 2px solid var(--off-white);
  }
  .dash-icon-btn.is-open{ border-color: var(--gold); background: var(--cream); }

  .dash-topbar__divider{ width:1px; height:28px; background: rgba(43,38,34,0.10); }

  .dash-topbar__mini-profile{ display:flex; align-items:center; gap:10px; padding-left:2px; }
  .dash-topbar__mini-profile .mini-avatar{
    width: 36px; height:36px; border-radius:50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-weight:600; color: var(--white); font-size:14px;
  }
  .dash-topbar__mini-profile .mini-meta{ line-height:1.2; }
  .dash-topbar__mini-profile .mini-meta .mn{font-family: var(--font-body); display:flex; align-items:center; gap:7px; font-size: var(--fs-body); font-weight:600; color: var(--text-dark); }
  .dash-topbar__mini-profile .mini-meta .mr{font-family: var(--font-body);  font-size: var(--fs-caption); color: var(--text-muted); margin-top:1px; }
  .dash-tier-tag{
    background: var(--cream); color: var(--gold-dark); font-family: var(--font-mono); font-size: 9.5px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:20px; line-height:1.6;
  }

  /* Dropdown panel (notifications) */
  .dash-dropdown{
    position:absolute; top: calc(var(--dash-topbar-h) - 12px); right: 34px;
    width: 368px; max-height: 420px; overflow-y:auto;
    background: var(--white);
    border-radius: var(--dash-radius-md);
    border: 1px solid rgba(43,38,34,0.08);
    box-shadow: 0 24px 64px rgba(43,38,34,0.18);
    z-index: 40;
    opacity:0; transform: translateY(-8px) scale(.98);
    pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .dash-dropdown.is-open{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
  .dash-dropdown__head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 15px 18px 12px; border-bottom: 1px solid rgba(43,38,34,0.06);
  }
  .dash-dropdown__head h4{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight:600; color: var(--navy); }
  .dash-dropdown__head button{
    background:none; border:none; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
    color: var(--gold-dark); letter-spacing: 0.02em;
  }
  .dash-dropdown__head button:hover{ text-decoration: underline; }
  .dash-notif-item{
    display:flex; gap:11px; padding: 13px 18px;
    border-bottom: 1px solid rgba(43,38,34,0.05);
    transition: background .15s ease;
  }
  .dash-notif-item:last-child{ border-bottom:none; }
  .dash-notif-item:hover{ background: var(--off-white); }
  .dash-notif-item.is-unread{ background: rgba(181,86,44,0.05); }
  .dash-notif-item__icon{
    width:34px; height:34px; flex:0 0 34px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background: var(--cream);
    color: var(--gold-dark);
  }
  .dash-notif-item__icon svg{ width:16px; height:16px; }
  .dash-notif-item__body p{font-family: var(--font-body);  font-size: var(--fs-body); line-height:1.45; color: var(--text-dark); }
  .dash-notif-item__body span{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); display:block; margin-top:4px; }
  /* Seen notifications keep the default body colour above. Unseen ones go to
     solid black at a heavier weight, so "unread" is legible from the text
     itself rather than only from the small gold dot beside it. Cleared the
     moment the item is clicked — renderNotifications() drops .is-unread. */
  .dash-notif-item.is-unread .dash-notif-item__body p{ color:#000; font-weight:600; }
  .dash-notif-item__dot{ width:7px; height:7px; border-radius:50%; background: var(--gold); flex:0 0 7px; margin-top:6px; }

  /* ---------- Content area ---------- */
  .dash-content{
    flex: 1 1 auto;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: 34px 34px 70px;
  }
  .dash-content-inner{ max-width: var(--dash-content-max); margin: 0 auto; }

  .dash-view{ display:none; animation: dashFadeIn .5s ease backwards; } /* backwards, not both: a retained transform would trap position:fixed modals inside the view */
  .dash-view.is-active{ display:block; }
  @keyframes dashFadeIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:translateY(0); } }

  /* Welcome header */
  .dash-welcome{
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
    margin-bottom: 30px; flex-wrap: wrap;
  }
  .dash-welcome__eyebrow{
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--gold-dark); margin-bottom: 8px; display:flex; align-items:center; gap:8px;
   font-weight: 500;}
  .dash-welcome__eyebrow::before{ content:''; width:16px; height:1px; background: var(--gold); }
  .dash-welcome h1{
    font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); color: var(--navy);
    line-height:1.15;
  }
  .dash-welcome h1 em{ font-style: italic; color: var(--gold-dark); }
  .dash-welcome p{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); margin-top: 8px; max-width: 520px; line-height:1.55; }
  .dash-welcome__cta{font-family: var(--font-body); 
    display:flex; align-items:center; gap:10px;
    background: var(--navy); color: var(--white);
    padding: 12px 20px; border-radius: 11px;
    font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.02em;
    border: 1px solid var(--navy);
    transition: all .22s ease;
    white-space:nowrap;
  }
  .dash-welcome__cta:hover{ background: var(--navy-light); box-shadow: 0 10px 26px rgba(43,38,34,0.28); transform: translateY(-1px); }
  .dash-welcome__cta svg{ width:15px; height:15px; }

  /* Stat cards row */
  .dash-stats-row{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin-bottom: 22px;
  }
  .dash-stat-card{
    background: var(--white);
    border-radius: var(--dash-radius-lg);
    border: 1px solid rgba(43,38,34,0.06);
    box-shadow: var(--dash-card-shadow);
    padding: 26px 26px 28px;
    display:flex; flex-direction:column; gap: 16px;
    align-items: flex-start; text-align: left;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
  }
  .dash-stat-card::after{
    content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
    background: radial-gradient(circle, rgba(181,86,44,0.10), transparent 70%);
  }
  .dash-stat-card:hover{ box-shadow: var(--dash-card-shadow-hover); transform: translateY(-2px); border-color: rgba(181,86,44,0.25); }
  .dash-stat-card__top{ display:flex; align-items:center; justify-content:space-between; }
  .dash-stat-card__icon{
    width: 42px; height:42px; border-radius:12px;
    background: linear-gradient(135deg, var(--cream), var(--cream-dark));
    border: 1px solid rgba(181,86,44,0.25);
    display:flex; align-items:center; justify-content:center;
    color: var(--gold-dark);
  }
  .dash-stat-card__icon svg{ width:19px; height:19px; }
  .dash-stat-card__trend{
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600;
    display:flex; align-items:center; gap:4px;
    padding: 4px 9px; border-radius: 20px;
  }
  .dash-stat-card__trend.up{ color: var(--dash-good); background: var(--dash-good-bg); }
  .dash-stat-card__trend.down{ color: var(--dash-crit); background: var(--dash-crit-bg); }
  .dash-stat-card__trend.flat{ color: var(--dash-med); background: var(--dash-med-bg); }
  .dash-stat-card__trend svg{ width:11px; height:11px; }
  .dash-stat-card__value{ font-family: var(--dash-metric-font-family); font-size: 32px; font-weight: var(--dash-metric-font-weight); font-variant-numeric: var(--dash-metric-font-variant); font-feature-settings: var(--dash-metric-font-feature); letter-spacing: var(--dash-metric-letter-spacing); color: var(--navy); line-height:1; }
  .dash-stat-card__label{font-family: var(--font-display);  font-size: 19px; color: var(--navy); font-weight: 600; letter-spacing: 0; text-transform: none;}
  .dash-stat-card__sub{ font-family: var(--font-body); font-size: 15.5px; color: var(--text-muted); opacity:.85; line-height:1.5; }

  /* Analytics row */
  .dash-analytics-row{
    display:grid; grid-template-columns: 1.75fr 1fr; gap: 18px;
    margin-bottom: 18px; align-items: stretch;
  }
  .dash-card{
    background: var(--white);
    border-radius: var(--dash-radius-lg);
    border: 1px solid rgba(43,38,34,0.06);
    box-shadow: var(--dash-card-shadow);
    padding: 24px 26px;
  }
  .dash-card__head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom: 6px; }
  .dash-card__head h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); }
  .dash-card__head p{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); margin-top:3px; }
  .dash-card__pill{
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600; letter-spacing:.03em;
    background: var(--dash-good-bg); color: var(--dash-good);
    padding: 5px 10px; border-radius: 20px; white-space:nowrap;
  }

  .dash-chart-wrap{ position:relative; margin-top: 12px; }
  .dash-chart-wrap svg{ width:100%; height:auto; overflow: visible; }
  .dash-chart-tooltip{
    position:absolute; pointer-events:none;
    background: var(--navy); color: var(--white);
    padding: 8px 12px; border-radius: 9px;
    font-family: var(--font-body); font-size: var(--fs-body);
    box-shadow: 0 12px 28px rgba(43,38,34,0.3);
    transform: translate(-50%, -115%);
    opacity: 0; transition: opacity .12s ease;
    white-space: nowrap;
    z-index: 6;
  }
  .dash-chart-tooltip.is-visible{ opacity:1; }
  .dash-chart-tooltip .tt-month{font-family: var(--font-mono);  color: var(--gold-light); font-weight:600; display:block; font-size: var(--fs-caption); letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; }
  .dash-chart-point{ cursor: pointer; }
  .dash-chart-gridline{ stroke: rgba(43,38,34,0.07); stroke-width:1; stroke-dasharray: 3 4; }
  .dash-chart-axis-label{ font-family: var(--font-mono); font-size: var(--fs-caption); fill: var(--text-muted);  font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}
  .dash-chart-axis-y{ font-family: var(--font-mono); font-size: var(--fs-caption); fill: var(--text-muted); text-anchor:end; }

  /* Allocation donut */
  .dash-allocation-card{ display:flex; flex-direction:column; }
  .dash-donut-wrap{ display:flex; align-items:center; gap: 18px; margin-top: 10px; flex: 1; }
  .dash-donut-wrap svg{ flex: 0 0 auto; }
  .dash-donut-center-value{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; fill: var(--navy); }
  .dash-donut-center-label{ font-family: var(--font-mono); font-size: var(--fs-caption); fill: var(--text-muted); letter-spacing: 0.25em;  font-weight: 500; text-transform: uppercase;}
  .dash-legend{ display:flex; flex-direction:column; gap: 11px; flex:1; min-width:0; }
  .dash-legend-item{font-family: var(--font-body);  display:flex; align-items:center; gap:9px; font-size: var(--fs-body); }
  .dash-legend-swatch{ width:10px; height:10px; border-radius:3px; flex:0 0 10px; }
  .dash-legend-item .ll-label{ flex:1; color: var(--text-dark); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dash-legend-item .ll-pct{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }

  /* Lower row: activity + alerts */
  .dash-lower-row{
    display:grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items:start;
  }

  .dash-activity-list{ margin-top: 10px; display:flex; flex-direction:column; }
  .dash-activity-item{
    display:flex; gap: 14px; padding: 14px 4px;
    border-bottom: 1px solid rgba(43,38,34,0.06);
  }
  .dash-activity-item:last-child{ border-bottom:none; padding-bottom:4px; }
  .dash-activity-item__rail{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
  .dash-activity-item__dot{
    width: 34px; height:34px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    flex:0 0 34px;
  }
  .dash-activity-item__dot svg{ width:16px; height:16px; }
  .dash-activity-item__dot.t-inspection{ background: var(--dash-good-bg); color: var(--dash-good); }
  .dash-activity-item__dot.t-document{ background: rgba(181,86,44,0.12); color: var(--gold-dark); }
  .dash-activity-item__dot.t-payment{ background: rgba(43,38,34,0.07); color: var(--navy); }
  .dash-activity-item__dot.t-legal{ background: var(--dash-crit-bg); color: var(--dash-crit); }
  .dash-activity-item__dot.t-system{ background: var(--dash-med-bg); color: var(--dash-med); }
  .dash-activity-item__body{ flex:1; min-width:0; }
  .dash-activity-item__body .ai-title{font-family: var(--font-body);  font-size: var(--fs-body); font-weight: 600; color: var(--text-dark); }
  .dash-activity-item__body .ai-desc{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); margin-top:2px; line-height:1.5; }
  .dash-activity-item__body .ai-meta{ display:flex; gap:8px; align-items:center; margin-top:6px; }
  .dash-activity-item__body .ai-time{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); }
  .dash-activity-item__body .ai-tag{ font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.25em; color: var(--gold-dark); background: var(--cream); padding:2px 7px; border-radius:20px;  font-weight: 500;}

  /* Critical alerts panel */
  .dash-alerts-card .dash-card__head{ margin-bottom: 2px; }
  .dash-alert-list{ display:flex; flex-direction:column; gap:12px; margin-top: 14px; }
  .dash-alert-item{
    border: 1px solid rgba(43,38,34,0.08);
    border-radius: var(--dash-radius-md);
    padding: 14px 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .dash-alert-item:hover{ border-color: rgba(181,86,44,0.35); box-shadow: var(--dash-card-shadow); }
  .dash-alert-item__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .dash-alert-item__prop{font-family: var(--font-body);  font-size: var(--fs-body); font-weight:700; color: var(--navy); }
  .dash-alert-item__type{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); margin-top:2px; }
  .dash-sev-badge{
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    padding: 3px 9px; border-radius: 20px; white-space:nowrap; flex:0 0 auto;
  }
  .dash-sev-badge.critical{ background: var(--dash-crit-bg); color: var(--dash-crit); }
  .dash-sev-badge.high{ background: var(--dash-high-bg); color: var(--dash-high); }
  .dash-sev-badge.medium{ background: var(--dash-med-bg); color: var(--dash-med); }
  .dash-alert-item__desc{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); line-height:1.55; margin-top: 9px; }
  .dash-alert-item__foot{ display:flex; align-items:center; justify-content:space-between; margin-top: 11px; }
  .dash-alert-item__date{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); }
  .dash-alert-review{font-family: var(--font-body); 
    font-size: var(--fs-body); font-weight:700; color: var(--gold-dark);
    background: none; border:none; display:flex; align-items:center; gap:4px;
  }
  .dash-alert-review svg{ width:11px; height:11px; transition: transform .2s ease; }
  .dash-alert-item.is-expanded .dash-alert-review svg{ transform: rotate(180deg); }
  .dash-alert-item__detail{font-family: var(--font-body); 
    display:none; margin-top: 11px; padding-top: 11px; border-top: 1px dashed rgba(43,38,34,0.12);
    font-size: var(--fs-body); color: var(--text-muted); line-height:1.6;
  }
  .dash-alert-item.is-expanded .dash-alert-item__detail{ display:block; }
  .dash-alerts-view-all{font-family: var(--font-body); 
    display:block; text-align:center; margin-top: 16px; padding: 11px;
    border-radius: 10px; border: 1px dashed rgba(181,86,44,0.4);
    font-size: var(--fs-body); font-weight:600; color: var(--gold-dark);
    background: transparent; width:100%;
    transition: all .2s ease;
  }
  .dash-alerts-view-all:hover{ background: var(--cream); }

  /* Empty-state stub views (for tabs beyond Phase 1) */
  .dash-empty-state{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding: 90px 30px;
    background: var(--white); border-radius: var(--dash-radius-lg);
    border: 1px solid rgba(43,38,34,0.06); box-shadow: var(--dash-card-shadow);
  }
  .dash-empty-state__icon{
    width:56px; height:56px; border-radius:16px; margin-bottom:20px;
    background: var(--cream); border:1px solid rgba(181,86,44,0.25);
    display:flex; align-items:center; justify-content:center; color: var(--gold-dark);
  }
  .dash-empty-state__icon svg{ width:24px; height:24px; }
  .dash-empty-state h2{ font-family: var(--font-display); font-size: var(--fs-h2); color: var(--navy); font-weight:600; }
  .dash-empty-state p{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); max-width: 380px; margin-top: 10px; line-height:1.6; }
  .dash-empty-state__tag{
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--gold-dark); background: var(--cream); border:1px solid rgba(181,86,44,0.3);
    padding: 6px 14px; border-radius:20px; margin-top: 18px;
   font-weight: 500;}

  /* ---------- Alerts modal ---------- */
  .dash-modal-backdrop{
    position: fixed; inset:0; background: rgba(30,26,23,0.55);
    backdrop-filter: blur(3px);
    z-index: 50; opacity:0; pointer-events:none; transition: opacity .25s ease;
  }
  .dash-modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
  .dash-modal{
    position: fixed; top: 50%; left:50%;
    transform: translate(-50%, -46%) scale(.97);
    width: min(560px, 92vw);
    max-height: 78vh; overflow-y:auto;
    background: var(--white); border-radius: var(--dash-radius-lg);
    box-shadow: 0 40px 100px rgba(43,38,34,0.35);
    z-index: 51; opacity:0; pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .dash-modal-backdrop.is-open + .dash-modal,
  .dash-modal.is-open{ opacity:1; transform: translate(-50%, -50%) scale(1); pointer-events:auto; }
  .dash-modal__head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 22px 26px; border-bottom: 1px solid rgba(43,38,34,0.07);
    position: sticky; top:0; background: var(--white);
  }
  .dash-modal__head h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); }
  .dash-modal__head span{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); display:block; margin-top:3px; }
  .dash-modal__close{
    width:34px; height:34px; border-radius:50%; border:1px solid rgba(43,38,34,0.1);
    background: var(--off-white); display:flex; align-items:center; justify-content:center; color: var(--navy);
  }
  .dash-modal__close:hover{ background: var(--dash-crit-bg); color: var(--dash-crit); border-color: rgba(180,67,46,0.3); }
  .dash-modal__close svg{ width:15px; height:15px; }
  .dash-modal__body{ padding: 20px 26px 26px; display:flex; flex-direction:column; gap:12px; }

  /* ---------- Scrollbars (dashboard only) ---------- */
  .dash-content::-webkit-scrollbar, .dash-dropdown::-webkit-scrollbar, .dash-modal::-webkit-scrollbar{ width:8px; }
  .dash-content::-webkit-scrollbar-thumb, .dash-dropdown::-webkit-scrollbar-thumb, .dash-modal::-webkit-scrollbar-thumb{
    background: rgba(181,86,44,0.3); border-radius:20px;
  }
  .dash-content::-webkit-scrollbar-track, .dash-dropdown::-webkit-scrollbar-track, .dash-modal::-webkit-scrollbar-track{ background: transparent; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1180px){
    .dash-analytics-row{ grid-template-columns: 1fr; }
    .dash-lower-row{ grid-template-columns: 1fr; }
  }
  @media (max-width: 980px){
    .dash-sidebar{ position: fixed; left:0; top:0; height:100%; transform: translateX(-100%); transition: transform .3s ease; z-index: 30; }
    .dash-sidebar.is-open{ transform: translateX(0); box-shadow: 20px 0 60px rgba(0,0,0,0.35); }
    .dash-sidebar-toggle{ display:flex; }
    .dash-sidebar-backdrop{ display:block; }
    .dash-main{ width:100%; }
    .dash-stats-row{ grid-template-columns: 1fr; }
    .dash-topbar{ padding: 0 18px; }
    .dash-content{ padding: 22px 18px 60px; }
    .dash-search{ max-width: none; }
    .dash-search__kbd{ display:none; }
  }
  @media (max-width: 640px){
    .dash-welcome h1{font-family: var(--font-display);  font-size: var(--fs-h2); }
    .dash-welcome__cta{ display:none; }
    .dash-dropdown{ right: 12px; width: calc(100vw - 24px); }
  }

  @media (prefers-reduced-motion: reduce){
    #vlookasset-dashboard-root, body.vl-dash-transitioning > *, .dash-view, .dash-nav-item, .dash-stat-card{
      transition: none !important; animation: none !important;
    }
  }

  /* ============================================================
  /* ============================================================
     OVERVIEW PAGE — COMMAND CENTER REDESIGN (v3)
     A true dashboard, not a scrolling content page: one dense,
     responsive grid, sized and weighted by importance. Every id
     the script layer depends on (dash-welcome-date, dash-welcome-cta,
     dash-stats-row, dash-chart-*, dash-donut-wrap, dash-activity-list,
     dash-alert-list-panel, dash-alerts-view-all) is preserved.
  ============================================================ */

  #dash-view-overview{
    --ov-gap: 16px;
    --ov-pad: 22px;
    --ov-radius: 16px;
    padding-bottom: 8px;
  }

  #dash-view-overview .dash-card{
    padding: var(--ov-pad);
    border-radius: var(--ov-radius);
    border: 1px solid rgba(43,38,34,0.07);
    box-shadow: none;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  }
  #dash-view-overview .dash-card:hover{
    box-shadow: 0 12px 30px rgba(43,38,34,0.08);
    border-color: rgba(43,38,34,0.11);
    transform: translateY(-2px);
  }
  #dash-view-overview .dash-card__head{ margin-bottom: 2px; }
  #dash-view-overview .dash-card__head h3{font-family: var(--font-display);  font-size: var(--fs-h4); }
  #dash-view-overview .dash-card__head p{font-family: var(--font-body);  font-size: var(--fs-body); }

  /* ---- Compact top bar: greeting + date + one action, single line ---- */
  .ov-topbar{
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: var(--ov-gap); padding: 2px 2px 6px;
  }
  .ov-topbar__eyebrow{
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--text-muted);
   font-weight: 500;}
  .ov-topbar h1{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; color: var(--navy); margin-top: 2px; letter-spacing: -0.01em; }
  .ov-topbar h1 em{ font-style: normal; color: var(--gold-dark); }
  .ov-topbar__cta{font-family: var(--font-body); 
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
    font-size: var(--fs-body); font-weight: 600; color: var(--navy);
    background: transparent; border: 1px solid rgba(43,38,34,0.14);
    padding: 10px 16px; border-radius: 30px; white-space: nowrap; transition: all .2s ease;
   letter-spacing: 0.02em;}
  .ov-topbar__cta svg{ width: 14px; height: 14px; }
  .ov-topbar__cta:hover{ background: var(--navy); color: var(--white); border-color: var(--navy); }

  /* ---- Focal row: hero (wide) + next inspection + manager (narrow) ---- */
  .ov-focal-row{
    display: grid; grid-template-columns: 1.9fr 1fr 1fr; gap: var(--ov-gap);
    align-items: stretch; margin-bottom: var(--ov-gap);
  }
  @media (max-width: 1180px){ .ov-focal-row{ grid-template-columns: 1fr 1fr; } .ov-hero-compact{ grid-column: 1 / -1; } }
  @media (max-width: 760px){ .ov-focal-row{ grid-template-columns: 1fr; } }

  .ov-hero-compact{
    display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
    background: linear-gradient(165deg, var(--white) 0%, var(--off-white) 100%);
  }
  .ov-hero-compact__ring{ display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
  .ov-hero-compact__ring svg{ width: 108px; height: 108px; }
  .ov-hero-compact__ring-track{ stroke: rgba(43,38,34,0.07); }
  .ov-hero-compact__ring-value{ stroke-linecap: round; }
  .ov-hero-compact__ring-num{ font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500; fill: var(--navy);  letter-spacing: 0.25em; text-transform: uppercase;}
  .ov-hero-compact__ring-lbl{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.25em; fill: var(--text-muted);  font-weight: 500; text-transform: uppercase;}
  .ov-hero-compact__status{
    font-family: var(--font-body); font-size: var(--fs-body); letter-spacing: .06em; text-transform: uppercase;
    color: var(--dash-good); background: var(--dash-good-bg); padding: 4px 10px; border-radius: 20px; white-space: nowrap;
  }
  .ov-hero-compact__body{ min-width: 0; }
  .ov-hero-compact__badge{
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--dash-good); background: var(--dash-good-bg); padding: 5px 11px; border-radius: 20px; margin-bottom: 10px;
  }
  .ov-hero-compact__badge svg{ width: 11px; height: 11px; }
  .ov-hero-compact__body h2{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; color: var(--navy); line-height: 1.15; }
  .ov-hero-compact__meta{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); margin-top: 6px; line-height: 1.55; }
  .ov-hero-compact__meta b{ color: var(--text-dark); font-weight: 600; }

  .ov-hero-compact__chips{
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(43,38,34,0.07);
  }
  .ov-chip{ display: flex; align-items: center; gap: 8px; }
  .ov-chip__dot{ width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--dash-good); }
  .ov-chip__dot.is-crit{ background: var(--dash-crit); }
  .ov-chip__label{font-family: var(--font-mono);  font-size: var(--fs-caption); color: var(--text-muted); flex: 1;  font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}
  .ov-chip__pct{ font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 700; color: var(--navy); }

  .ov-hero-compact__ctas{ display: flex; gap: 8px; margin-top: 16px; }
  .ov-hero-compact__cta{font-family: var(--font-body); 
    font-size: var(--fs-body); font-weight: 600; padding: 9px 16px; border-radius: 30px;
    border: 1px solid rgba(43,38,34,0.14); background: transparent; color: var(--navy); white-space: nowrap;
   letter-spacing: 0.02em;}
  .ov-hero-compact__cta.is-primary{ background: var(--navy); color: var(--white); border-color: var(--navy); }
  .ov-hero-compact__cta:hover{ border-color: var(--navy); }
  .ov-hero-compact__cta.is-primary:hover{ background: var(--navy-light); }
  @media (max-width: 1180px){
    .ov-hero-compact{ grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .ov-hero-compact__chips{ text-align: left; }
  }

  /* ---- Next inspection & manager: compact secondary cards, same rhythm ---- */
  .ov-mini-card{ display: flex; flex-direction: column; justify-content: center; gap: 10px; }
  .ov-mini-card__eyebrow{
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted);
    display: flex; align-items: center; gap: 6px;
   font-weight: 500;}
  .ov-mini-card__eyebrow svg{ width: 13px; height: 13px; color: var(--gold-dark); }
  .ov-next-insp__time{ font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; color: var(--navy); line-height: 1.1; }
  .ov-next-insp__date{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-dark); font-weight: 600; }
  .ov-next-insp__sub{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); }

  .ov-manager-mini__top{ display: flex; align-items: center; gap: 12px; }
  .ov-manager-mini__avatar{
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    color: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
  }
  .ov-manager-mini__name{font-family: var(--font-body);  font-size: var(--fs-body); font-weight: 700; color: var(--navy); }
  .ov-manager-mini__role{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); }
  .ov-manager-mini__actions{ display: flex; gap: 8px; }
  .ov-manager-mini__actions a, .ov-manager-mini__actions button{
    flex: 1; display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 10px;
    background: var(--off-white); border: 1px solid rgba(43,38,34,0.08); color: var(--navy);
    transition: all .2s ease;
  }
  .ov-manager-mini__actions svg{ width: 15px; height: 15px; }
  .ov-manager-mini__actions a:hover, .ov-manager-mini__actions button:hover{ background: var(--cream); border-color: rgba(181,86,44,0.35); }

  /* ---- Quick stats strip: compact horizontal tiles, one line each ---- */
  #dash-view-overview .dash-stats-row{ grid-template-columns: repeat(3, 1fr); gap: var(--ov-gap); margin-bottom: var(--ov-gap); }
  @media (max-width: 760px){ #dash-view-overview .dash-stats-row{ grid-template-columns: 1fr; } }
  #dash-view-overview .dash-stat-card{
    padding: 16px 20px; border-radius: var(--ov-radius); border: 1px solid rgba(43,38,34,0.07);
    box-shadow: none; flex-direction: row; align-items: center; gap: 14px;
  }
  #dash-view-overview .dash-stat-card::after{ display: none; }
  #dash-view-overview .dash-stat-card:hover{ box-shadow: 0 10px 26px rgba(43,38,34,0.06); border-color: rgba(43,38,34,0.11); transform: none; }
  #dash-view-overview .dash-stat-card__top{ display: contents; }
  #dash-view-overview .dash-stat-card__icon{
    width: 36px; height: 36px; background: var(--off-white); border-color: rgba(43,38,34,0.08); color: var(--navy); order: 0;
  }
  #dash-view-overview .dash-stat-card__icon svg{ width: 16px; height: 16px; }
  #dash-view-overview .dash-stat-card__value{font-family: var(--font-display);  font-size: var(--fs-h4); order: 1; }
  #dash-view-overview .dash-stat-card__label{font-family: var(--font-mono);  font-size: var(--fs-caption); order: 2;  font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}
  #dash-view-overview .dash-stat-card__sub{ display: none; }
  #dash-view-overview .dash-stat-card__trend{font-family: var(--font-mono);  order: 3; margin-left: auto; padding: 3px 8px; font-size: var(--fs-caption); }

  /* ---- Secondary tile row: report / activity / alerts / vault ---- */
  .ov-tile-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ov-gap); margin-bottom: var(--ov-gap); align-items: stretch; }
  @media (max-width: 1180px){ .ov-tile-row{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px){ .ov-tile-row{ grid-template-columns: 1fr; } }

  .ov-tile{ display: flex; flex-direction: column; min-height: 0; }
  .ov-tile__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .ov-tile__title{font-family: var(--font-body);  font-size: var(--fs-body); font-weight: 700; color: var(--navy); }
  .ov-tile__link{font-family: var(--font-body);  font-size: var(--fs-body); font-weight: 600; color: var(--gold-dark); white-space: nowrap; }
  .ov-tile__link:hover{ text-decoration: underline; }

  .ov-tile-report__thumb{
    position: relative; border-radius: 10px; overflow: hidden; min-height: 88px;
    background: linear-gradient(135deg, var(--cream-dark), var(--cream));
    display: flex; align-items: center; justify-content: center; color: var(--gold-dark); margin-bottom: 10px;
  }
  .ov-tile-report__thumb svg{ width: 22px; height: 22px; opacity: .8; }
  .ov-tile-report__pill{
    position: absolute; top: 8px; left: 8px;
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .03em;
    background: var(--dash-good-bg); color: var(--dash-good); padding: 4px 9px; border-radius: 20px;
  }
  .ov-tile-report__prop{font-family: var(--font-body);  font-size: var(--fs-body); font-weight: 700; color: var(--navy); }
  .ov-tile-report__meta{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); margin-top: 2px; }

  .ov-tile-activity{ display: flex; flex-direction: column; gap: 10px; }
  .ov-tile-activity .dash-activity-item{ padding: 0 !important; border: none !important; gap: 10px !important; }
  .ov-tile-activity .dash-activity-item__dot{ width: 26px !important; height: 26px !important; flex: 0 0 26px !important; }
  .ov-tile-activity .dash-activity-item__dot svg{ width: 12px; height: 12px; }
  .ov-tile-activity .ai-title{font-family: var(--font-body);  font-size: var(--fs-body); font-weight: 600; }
  .ov-tile-activity .ai-desc{ display: none !important; }
  .ov-tile-activity .ai-meta{font-family: var(--font-body);  font-size: var(--fs-body); margin-top: 1px !important; }

  .ov-tile-alerts{ display: flex; flex-direction: column; }
  #dash-view-overview .ov-tile .dash-alert-list{ display: flex; flex-direction: column; gap: 8px; }
  #dash-view-overview .ov-tile .dash-alert-item{
    padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(43,38,34,0.07);
  }
  #dash-view-overview .ov-tile .dash-alert-item__prop{font-family: var(--font-body);  font-size: var(--fs-body); }
  #dash-view-overview .ov-tile .dash-alert-item__type{font-family: var(--font-body);  font-size: var(--fs-body); }
  #dash-view-overview .ov-tile .dash-alert-item__desc{font-family: var(--font-body);  font-size: var(--fs-body); -webkit-line-clamp: 2; }
  #dash-view-overview .ov-tile .dash-alert-item__detail,
  #dash-view-overview .ov-tile .dash-alert-item__foot .dash-alert-item__date{ display: none !important; }
  #dash-view-overview .ov-tile .dash-alert-review{font-family: var(--font-body);  font-size: var(--fs-body); padding: 0; }
  #dash-view-overview .ov-tile .dash-alerts-view-all{font-family: var(--font-body); 
    margin-top: 10px; border-radius: 10px; padding: 9px; font-size: var(--fs-body);
  }

  .ov-tile-vault{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; }
  .ov-tile-vault__count{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: var(--navy); line-height: 1; }
  .ov-tile-vault__label{font-family: var(--font-mono);  font-size: var(--fs-caption); color: var(--text-muted); margin-top: 4px;  font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}
  .ov-tile-vault__types{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .ov-tile-vault__type{font-family: var(--font-body); 
    font-size: var(--fs-body); font-weight: 600; color: var(--text-dark);
    background: var(--off-white); border: 1px solid rgba(43,38,34,0.07); padding: 4px 10px; border-radius: 20px;
  }

  /* ---- Tertiary row: analytics, compact, last on the page ---- */
  .ov-analytics-row{ display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--ov-gap); margin-bottom: var(--ov-gap); align-items: stretch; }
  @media (max-width: 900px){ .ov-analytics-row{ grid-template-columns: 1fr; } }
  #dash-view-overview .dash-chart-wrap{ margin-top: 4px; }
  #dash-view-overview .dash-donut-wrap{ margin-top: 4px; gap: 12px; }
  #dash-view-overview .dash-legend-item{font-family: var(--font-body);  font-size: var(--fs-body); }
  #dash-view-overview .dash-donut-center-value{font-family: var(--font-display);  font-size: var(--fs-h4); }

  /* ---- Slim support strip, footer-weight, not a feature card ---- */
  .ov-support-strip{
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: var(--navy); border-radius: var(--ov-radius); padding: 14px 22px;
  }
  .ov-support-strip__text{font-family: var(--font-body);  font-size: var(--fs-body); color: rgba(245,240,232,0.85); }
  .ov-support-strip__text b{ color: var(--white); }
  .ov-support-strip__actions{ display: flex; gap: 8px; flex-wrap: wrap; }
  .ov-support-btn{font-family: var(--font-body); 
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--fs-body); font-weight: 600; color: var(--white);
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
    padding: 8px 14px; border-radius: 20px; white-space: nowrap; transition: background .2s ease;
   letter-spacing: 0.02em;}
  .ov-support-btn svg{ width: 13px; height: 13px; }
  .ov-support-btn.is-gold{ background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); border-color: transparent; color: var(--navy); font-weight: 700; }
  .ov-support-btn:hover{ background: rgba(255,255,255,0.16); }
  .ov-support-btn.is-gold:hover{ filter: brightness(1.05); }

  /* ============================================================
     OVERVIEW PAGE — EXECUTIVE REDESIGN (v4)
     Replaces the v3 "command center" body above with the premium
     modules below. The v3 selectors above (.ov-*, .dash-stats-row,
     .dash-chart-*, .dash-donut-*, .dash-activity-list, .dash-alert-*)
     are left in place — they still back the notifications dropdown,
     alerts modal, and shared .dash-card/.dash-stat-card primitives —
     but are no longer rendered inside #dash-view-overview itself.
  ============================================================ */
  #dash-view-overview .ov2-header{ padding: 4px 0 26px; }
  #dash-view-overview .ov2-header__eyebrow{
    display:block; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500;
    letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 8px;
  }
  #dash-view-overview .ov2-header__title{
    font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); line-height: 1.15;
    color: var(--navy); letter-spacing: 0.01em;
  }
  #dash-view-overview .ov2-header__title em{ font-style: normal; color: var(--gold-dark); }

  /* ---- Row 1: property summary + stacked mini cards ---- */
  #dash-view-overview .ov2-row1{ display: grid; grid-template-columns: 1.9fr 1fr; gap: 18px; margin-bottom: 18px; align-items: stretch; }
  @media (max-width: 900px){ #dash-view-overview .ov2-row1{ grid-template-columns: 1fr; } }

  #dash-view-overview .ov2-property-card{ display:flex; padding:0; overflow:hidden; }
  @media (max-width: 720px){ #dash-view-overview .ov2-property-card{ flex-direction: column; } }
  #dash-view-overview .ov2-property-card__media{ position:relative; flex: 0 0 40%; min-height: 220px; }
  #dash-view-overview .ov2-property-card__media img{ width:100%; height:100%; object-fit: cover; display:block; }
  #dash-view-overview .ov2-property-card__media-tag{font-family: var(--font-mono); 
    position:absolute; left:14px; bottom:14px; background: rgba(43,38,34,0.72); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); color:#fff; font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.25em;
    padding:6px 12px; border-radius: 20px;
   text-transform: uppercase;}
  #dash-view-overview .ov2-property-card__body{ flex:1; padding: 26px 28px; display:flex; flex-direction:column; }
  #dash-view-overview .ov2-property-card__status{ display:flex; align-items:center; gap:10px; margin-bottom: 14px; }
  #dash-view-overview .ov2-status-pulse{
    width:11px; height:11px; border-radius:50%; background: var(--dash-good); flex:0 0 11px;
    animation: ov2Pulse 2.2s infinite;
  }
  @keyframes ov2Pulse{
    0%{ box-shadow: 0 0 0 0 rgba(63,107,79,0.35); }
    70%{ box-shadow: 0 0 0 9px rgba(63,107,79,0); }
    100%{ box-shadow: 0 0 0 0 rgba(63,107,79,0); }
  }
  #dash-view-overview .ov2-property-card__status h2{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight:600; color: var(--navy); }
  #dash-view-overview .ov2-property-card__matrix{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:20px; }
  #dash-view-overview .ov2-property-card__matrix li{font-family: var(--font-body);  display:flex; align-items:center; gap:9px; font-size: var(--fs-body); color: var(--text-muted); }
  #dash-view-overview .ov2-property-card__matrix li svg{ width:16px; height:16px; flex:0 0 16px; color: var(--gold-dark); }
  #dash-view-overview .ov2-property-card__matrix b{ color: var(--text-dark); font-weight:600; }
  #dash-view-overview .ov2-btn-navy{font-family: var(--font-body); 
    margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
    background: var(--navy); color:#fff; border:none; padding:11px 22px; border-radius: 8px;
    font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.02em; cursor:pointer; transition: all .25s ease;
  }
  #dash-view-overview .ov2-btn-navy:hover{ background: var(--navy-light); transform: translateY(-2px); box-shadow: var(--dash-card-shadow-hover); }
  #dash-view-overview .ov2-btn-navy svg{ width:15px; height:15px; }

  #dash-view-overview .ov2-stack{ display:flex; flex-direction:column; gap:18px; }
  #dash-view-overview .ov2-mini-card{ flex:1; display:flex; flex-direction:column; padding: 20px 22px; }
  #dash-view-overview .ov2-mini-card__eyebrow{font-family: var(--font-mono); 
    display:flex; align-items:center; gap:8px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--gold-dark); margin-bottom:14px;
  }
  #dash-view-overview .ov2-mini-card__eyebrow svg{ width:14px; height:14px; }

  #dash-view-overview .ov2-next-inspection__time{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--navy); display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  #dash-view-overview .ov2-next-inspection__time svg{ width:18px; height:18px; color: var(--gold-dark); }
  #dash-view-overview .ov2-next-inspection__row{font-family: var(--font-body);  display:flex; align-items:center; gap:9px; font-size: var(--fs-body); color: var(--text-muted); padding: 7px 0; border-top: 1px solid rgba(43,38,34,0.06); }
  #dash-view-overview .ov2-next-inspection__row:first-of-type{ border-top:none; }
  #dash-view-overview .ov2-next-inspection__row svg{ width:15px; height:15px; flex:0 0 15px; color: var(--gold-dark); }

  #dash-view-overview .ov2-manager-card__top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  #dash-view-overview .ov2-manager-card__avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--border-gold); }
  #dash-view-overview .ov2-manager-card__name{font-family: var(--font-body);  font-size: var(--fs-body); font-weight:600; color: var(--navy); }
  #dash-view-overview .ov2-manager-card__role{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); margin-top:1px; }
  #dash-view-overview .ov2-manager-card__status{font-family: var(--font-body);  display:flex; align-items:center; gap:6px; font-size: var(--fs-body); font-weight:600; color: var(--dash-good); margin-top:5px; }
  #dash-view-overview .ov2-dot{ width:7px; height:7px; border-radius:50%; background: var(--dash-good); flex:0 0 7px; }
  #dash-view-overview .ov2-manager-card__actions{ display:flex; gap:8px; margin-top:auto; }
  #dash-view-overview .ov2-pill-btn{font-family: var(--font-body); 
    flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    background: var(--navy); color:#fff; border:none; padding:10px 12px; border-radius: 20px;
    font-size: var(--fs-body); font-weight: 600; cursor:pointer; transition: all .25s ease; white-space:nowrap;
   letter-spacing: 0.02em;}
  #dash-view-overview .ov2-pill-btn svg{ width:13px; height:13px; }
  #dash-view-overview .ov2-pill-btn:hover{ transform: translateY(-2px); box-shadow: var(--dash-card-shadow-hover); }
  #dash-view-overview .ov2-pill-btn--ghost{ background: transparent; border:1px solid rgba(43,38,34,0.14); color: var(--navy); }
  #dash-view-overview .ov2-pill-btn--ghost:hover{ border-color: var(--border-gold); background: rgba(181,86,44,0.06); }

  /* ---- 4-column metric grid ---- */
  #dash-view-overview .ov2-metrics{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:18px; }
  @media (max-width: 900px){ #dash-view-overview .ov2-metrics{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 480px){ #dash-view-overview .ov2-metrics{ grid-template-columns: 1fr; } }
  #dash-view-overview .ov2-metric-card{ padding: 18px 20px; display:flex; flex-direction:column; gap:5px; transition: all .25s ease; }
  #dash-view-overview .ov2-metric-card:hover{ transform: translateY(-2px); }
  #dash-view-overview .ov2-metric-card__icon{
    width:34px; height:34px; border-radius:9px; background: var(--dash-good-bg); color: var(--dash-good);
    display:flex; align-items:center; justify-content:center; margin-bottom:6px;
  }
  #dash-view-overview .ov2-metric-card__icon svg{ width:17px; height:17px; }
  #dash-view-overview .ov2-metric-card__title{font-family: var(--font-body);  font-size: var(--fs-body); font-weight:600; color: var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
  #dash-view-overview .ov2-metric-card__value{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); }
  #dash-view-overview .ov2-metric-card__sub{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); }

  /* ---- Hero: Last Visit Report suite ---- */
  #dash-view-overview .ov2-report-card{ padding: 26px 28px; margin-bottom:18px; }
  #dash-view-overview .ov2-report-card__head{ margin-bottom:18px; }
  #dash-view-overview .ov2-report-card__head h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); margin-bottom:8px; }
  #dash-view-overview .ov2-report-card__meta{ display:flex; flex-wrap:wrap; gap:14px; }
  #dash-view-overview .ov2-report-card__meta span{font-family: var(--font-body);  display:flex; align-items:center; gap:6px; font-size: var(--fs-body); color: var(--text-muted); }
  #dash-view-overview .ov2-report-card__meta svg{ width:14px; height:14px; color: var(--gold-dark); }

  #dash-view-overview .ov2-report-card__media{ display:grid; grid-template-columns: 1.5fr 1fr; gap:14px; margin-bottom:22px; }
  @media (max-width: 760px){ #dash-view-overview .ov2-report-card__media{ grid-template-columns:1fr; } }
  #dash-view-overview .ov2-report-card__video{ position:relative; border-radius: var(--dash-radius-md); overflow:hidden; aspect-ratio: 16/10; }
  #dash-view-overview .ov2-report-card__video img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
  #dash-view-overview .ov2-report-card__video:hover img{ transform: scale(1.03); }
  #dash-view-overview .ov2-play-btn{
    position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:56px; height:56px; border-radius:50%;
    background: rgba(255,255,255,0.92); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition: all .25s ease; box-shadow: 0 8px 24px rgba(43,38,34,0.25);
  }
  #dash-view-overview .ov2-play-btn:hover{ transform: translate(-50%,-50%) scale(1.08); }
  #dash-view-overview .ov2-play-btn svg{ width:20px; height:20px; color: var(--navy); margin-left:2px; }
  #dash-view-overview .ov2-video-stamp{font-family: var(--font-mono); 
    position:absolute; left:12px; bottom:12px; background: rgba(43,38,34,0.72); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); color:#fff; font-size: var(--fs-caption); font-weight:600; padding:6px 11px; border-radius:20px;
  }
  #dash-view-overview .ov2-report-card__grid{ display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap:8px; }
  #dash-view-overview .ov2-grid-cell{ position:relative; border-radius: var(--dash-radius-sm); overflow:hidden; aspect-ratio: 1 / 1; }
  #dash-view-overview .ov2-grid-cell img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
  #dash-view-overview .ov2-grid-cell:hover img{ transform: scale(1.06); }
  #dash-view-overview .ov2-grid-cell--more img{ filter: brightness(0.45); }
  #dash-view-overview .ov2-grid-cell--more span{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600;
  }

  #dash-view-overview .ov2-report-card__observations{
    list-style:none; display:grid; grid-template-columns: repeat(2,1fr); gap: 9px 24px; margin-bottom:22px;
    padding: 18px 20px; background: var(--off-white); border-radius: var(--dash-radius-md);
  }
  @media (max-width: 600px){ #dash-view-overview .ov2-report-card__observations{ grid-template-columns:1fr; } }
  #dash-view-overview .ov2-report-card__observations li{font-family: var(--font-body);  display:flex; align-items:center; gap:9px; font-size: var(--fs-body); color: var(--text-dark); }
  #dash-view-overview .ov2-report-card__observations svg{ width:15px; height:15px; flex:0 0 15px; color: var(--dash-good); }

  #dash-view-overview .ov2-report-card__actions{ display:flex; gap:10px; flex-wrap:wrap; }
  #dash-view-overview .ov2-btn-outline{font-family: var(--font-body); 
    display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:8px;
    border:1px solid rgba(43,38,34,0.14); background:transparent; color: var(--navy);
    font-size: var(--fs-body); font-weight: 600; cursor:pointer; transition: all .25s ease;
   letter-spacing: 0.02em;}
  #dash-view-overview .ov2-btn-outline svg{ width:14px; height:14px; }
  #dash-view-overview .ov2-btn-outline:hover{ border-color: var(--border-gold); background: rgba(181,86,44,0.06); transform: translateY(-2px); }

  /* ---- Bottom: health score + activity timeline ---- */
  #dash-view-overview .ov2-bottom{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  @media (max-width: 900px){ #dash-view-overview .ov2-bottom{ grid-template-columns:1fr; } }
  #dash-view-overview .ov2-health-card,
  #dash-view-overview .ov2-activity-card{ padding: 24px 26px; }
  #dash-view-overview .ov2-health-card__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; }
  #dash-view-overview .ov2-health-card__head h3,
  #dash-view-overview .ov2-activity-card > h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); }
  #dash-view-overview .ov2-health-card__score{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:700; color: var(--gold-dark); }
  #dash-view-overview .ov2-health-card__bars{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
  #dash-view-overview .ov2-health-bar__label{font-family: var(--font-mono);  display:flex; justify-content:space-between; font-size: var(--fs-caption); color: var(--text-muted); margin-bottom:6px;  font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}
  #dash-view-overview .ov2-health-bar__label span:last-child{ color: var(--text-dark); font-weight:600; }
  #dash-view-overview .ov2-health-bar__track{ height:6px; border-radius:4px; background: rgba(43,38,34,0.07); overflow:hidden; }
  #dash-view-overview .ov2-health-bar__fill{ height:100%; border-radius:4px; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }
  #dash-view-overview .ov2-health-card__banner{font-family: var(--font-body); 
    display:flex; align-items:center; gap:9px; font-size: var(--fs-body); font-weight:600; color: var(--dash-good);
    background: var(--dash-good-bg); padding:12px 16px; border-radius: var(--dash-radius-sm);
  }
  #dash-view-overview .ov2-health-card__banner svg{ width:16px; height:16px; flex:0 0 16px; }

  #dash-view-overview .ov2-activity-card > h3{ margin-bottom:20px; }
  #dash-view-overview .ov2-timeline{ display:flex; flex-direction:column; }
  #dash-view-overview .ov2-timeline__item{ position:relative; display:flex; align-items:flex-start; gap:14px; padding-bottom:22px; }
  #dash-view-overview .ov2-timeline__item:last-child{ padding-bottom:0; }
  #dash-view-overview .ov2-timeline__item::before{
    content:''; position:absolute; left:5px; top:16px; bottom:0; width:1.5px; background: rgba(43,38,34,0.1);
  }
  #dash-view-overview .ov2-timeline__item:last-child::before{ display:none; }
  #dash-view-overview .ov2-timeline__dot{
    width:11px; height:11px; border-radius:50%; background: var(--white); border:2.5px solid var(--gold-dark);
    flex:0 0 11px; margin-top:3px; z-index:1;
  }
  #dash-view-overview .ov2-timeline__body{ flex:1; }
  #dash-view-overview .ov2-timeline__date{font-family: var(--font-body);  font-size: var(--fs-body); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold-dark); margin-bottom:3px; }
  #dash-view-overview .ov2-timeline__title{font-family: var(--font-body);  font-size: var(--fs-body); font-weight:600; color: var(--navy); margin-bottom:2px; }
  #dash-view-overview .ov2-timeline__detail{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); }
  #dash-view-overview .ov2-badge{font-family: var(--font-mono); 
    align-self:flex-start; font-size: var(--fs-caption); font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    padding:4px 10px; border-radius:20px; white-space:nowrap;
  }
  #dash-view-overview .ov2-badge--upcoming{ color: var(--dash-high); background: var(--dash-high-bg); }
  #dash-view-overview .ov2-badge--done{ color: var(--dash-good); background: var(--dash-good-bg); }
  #dash-view-overview .ov2-badge--completed{ color: var(--dash-med); background: var(--dash-med-bg); }

  /* ============================================================
     OVERVIEW PAGE — PROPERTY COMMAND CENTER (v5)
     Full redesign of layout/hierarchy/information-architecture only.
     Reuses existing tokens (colors, type, radii, shadows, icon
     language) from the v4 block below — introduces no new palette,
     font, or component style, only new structure under the
     ov3- namespace. Page is intentionally ~2.2 screen heights and
     scrolls naturally; nothing is compressed to fit one viewport.
  ============================================================ */
  #dash-view-overview .ov3-header{ padding: 4px 0 24px; }
  #dash-view-overview .ov3-header__eyebrow{
    display:block; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500;
    letter-spacing:0.25em; text-transform:uppercase; color: var(--gold-dark); margin-bottom:8px;
  }
  #dash-view-overview .ov3-header__title{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight:600; color: var(--navy); }
  #dash-view-overview .ov3-header__title em{ font-style: normal; color: var(--gold-dark); }
  #dash-view-overview .ov3-section-label{
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600; letter-spacing:0.22em;
    text-transform:uppercase; color: var(--text-muted); margin: 40px 0 14px; display:flex; align-items:center; gap:10px;
  }
  #dash-view-overview .ov3-section-label::after{ content:''; flex:1; height:1px; background: rgba(43,38,34,0.08); }
  #dash-view-overview .ov3-section-label:first-of-type{ margin-top: 8px; }

  /* ---------- 1. HERO — Property Protected command strip ---------- */
  #dash-view-overview .ov3-hero{
    background: var(--dash-navy-glow); border-radius: var(--dash-radius-lg); padding: 30px 34px 26px;
    box-shadow: var(--dash-card-shadow); position: relative; overflow: hidden; margin-bottom: 28px;
    min-height: 260px;
  }
  #dash-view-overview .ov3-hero__bg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
    transform: scale(1.06); animation: ov3HeroKenBurns 16s ease-in-out infinite alternate; opacity: .55;
  }
  #dash-view-overview .ov3-hero::after{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background: linear-gradient(180deg, rgba(43,38,34,0.55) 0%, rgba(43,38,34,0.88) 75%, var(--navy) 100%),
                radial-gradient(60% 90% at 100% 0%, rgba(181,86,44,0.22), transparent 70%);
  }
  @keyframes ov3HeroKenBurns{ from{ transform: scale(1.06); } to{ transform: scale(1.14); } }
  #dash-view-overview .ov3-hero__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; z-index:1; }
  #dash-view-overview .ov3-hero__status{ display:flex; align-items:flex-start; gap:16px; }
  #dash-view-overview .ov3-hero__shield{
    flex:0 0 52px; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background: rgba(107,182,135,0.16); border:1px solid rgba(107,182,135,0.4); color:#6FCF97;
  }
  #dash-view-overview .ov3-hero__shield svg{ width:26px; height:26px; }
  #dash-view-overview .ov3-hero__label{
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
    color:#8FD9AC; display:flex; align-items:center; gap:7px; margin-bottom:6px;
  }
  #dash-view-overview .ov3-hero__pulse{ width:7px; height:7px; border-radius:50%; background:#6FCF97; box-shadow:0 0 0 3px rgba(111,207,151,0.25); }
  #dash-view-overview .ov3-hero__title{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight:600; color: var(--white); }
  #dash-view-overview .ov3-hero__sub{ font-family: var(--font-body); font-size: var(--fs-body); color: rgba(255,255,255,0.62); margin-top:5px; max-width:480px; }
  #dash-view-overview .ov3-hero__actions{ display:flex; gap:10px; flex:0 0 auto; flex-wrap:wrap; }
  #dash-view-overview .ov3-btn-navy{font-family: var(--font-body);
    display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:999px; border:none; cursor:pointer;
    background: var(--gold-light); color: var(--navy); font-weight:700; font-size: var(--fs-body); letter-spacing:0.01em;
    transition: all .2s ease; white-space:nowrap;
  }
  #dash-view-overview .ov3-btn-navy:hover{ background: var(--white); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.25); }
  #dash-view-overview .ov3-btn-navy svg{ width:15px; height:15px; }
  #dash-view-overview .ov3-btn-ghost{font-family: var(--font-body);
    display:inline-flex; align-items:center; gap:9px; padding:13px 20px; border-radius:999px; cursor:pointer;
    background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.28); color: var(--white);
    font-weight:600; font-size: var(--fs-body); transition: all .2s ease; white-space:nowrap;
  }
  #dash-view-overview .ov3-btn-ghost:hover{ background: rgba(255,255,255,0.18); transform: translateY(-2px); }
  #dash-view-overview .ov3-btn-ghost svg{ width:14px; height:14px; }

  #dash-view-overview .ov3-hero__stats{
    position:relative; z-index:1; display:grid; grid-template-columns: repeat(5,1fr); gap: 12px;
    margin-top:26px;
  }
  #dash-view-overview .ov3-hero__stat{
    background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius: var(--dash-radius-md);
    padding: 14px 16px; transition: transform .2s ease, background .2s ease;
  }
  #dash-view-overview .ov3-hero__stat:hover{ background: rgba(255,255,255,0.12); transform: translateY(-3px); }
  #dash-view-overview .ov3-hero__stat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  #dash-view-overview .ov3-hero__stat-icon{ flex:0 0 30px; width:30px; height:30px; border-radius:9px; background: rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color: var(--gold-light); }
  #dash-view-overview .ov3-hero__stat-icon svg{ width:15px; height:15px; }
  #dash-view-overview .ov3-hero__stat-trend{ font-family: var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8FD9AC; background:rgba(111,207,151,0.14); padding:3px 8px; border-radius:20px; }
  #dash-view-overview .ov3-hero__stat-val{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--white); line-height:1.15; }
  #dash-view-overview .ov3-hero__stat-label{ font-family: var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color: rgba(255,255,255,0.5); margin-top:3px; }
  #dash-view-overview .ov3-hero__stat-bar{ height:4px; border-radius:3px; background: rgba(255,255,255,0.12); overflow:hidden; margin-top:11px; }
  #dash-view-overview .ov3-hero__stat-bar span{ display:block; height:100%; border-radius:3px; background: var(--gold-light); }
  @media (max-width: 1100px){ #dash-view-overview .ov3-hero__stats{ grid-template-columns: repeat(3,1fr); } }
  @media (max-width: 640px){ #dash-view-overview .ov3-hero__stats{ grid-template-columns: repeat(2,1fr); } #dash-view-overview .ov3-hero__top{ flex-direction:column; } }

  /* ---------- 2. TWO-COLUMN: Latest Inspection (65%) + Visit/Manager (35%) ---------- */
  #dash-view-overview .ov3-row2{ display:grid; grid-template-columns: 1.85fr 1fr; gap: 24px; align-items:start; }
  @media (max-width: 980px){ #dash-view-overview .ov3-row2{ grid-template-columns: 1fr; } }

  #dash-view-overview .ov3-report-card{ padding: 28px 30px; }
  #dash-view-overview .ov3-report-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
  #dash-view-overview .ov3-report-card__head h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); }
  #dash-view-overview .ov3-report-card__head p{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); margin-top:3px; }
  #dash-view-overview .ov3-verified-row{ display:flex; flex-wrap:wrap; gap:12px; }
  #dash-view-overview .ov3-verified-pill{font-family: var(--font-body);
    display:flex; align-items:center; gap:6px; font-size: var(--fs-body); color: var(--dash-good); background: var(--dash-good-bg);
    padding:6px 12px; border-radius:20px; font-weight:600;
  }
  #dash-view-overview .ov3-verified-pill svg{ width:13px; height:13px; }

  #dash-view-overview .ov3-report-card__media{ display:grid; grid-template-columns: 1.5fr 1fr; gap:14px; margin-bottom:22px; }
  @media (max-width: 720px){ #dash-view-overview .ov3-report-card__media{ grid-template-columns:1fr; } }
  #dash-view-overview .ov3-report-card__video{ position:relative; border-radius: var(--dash-radius-md); overflow:hidden; aspect-ratio: 16/10; }
  #dash-view-overview .ov3-report-card__video img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
  #dash-view-overview .ov3-report-card__video:hover img{ transform: scale(1.04); }
  #dash-view-overview .ov3-play-btn{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%;
    background: rgba(255,255,255,0.94); display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.28); transition: transform .2s ease;
  }
  #dash-view-overview .ov3-play-btn:hover{ transform: translate(-50%,-50%) scale(1.08); }
  #dash-view-overview .ov3-play-btn svg{ width:22px; height:22px; color: var(--navy); margin-left:3px; }
  #dash-view-overview .ov3-video-stamp{font-family: var(--font-mono);
    position:absolute; left:12px; bottom:12px; background: rgba(43,38,34,0.72); color: var(--white); font-size: var(--fs-caption);
    padding:5px 10px; border-radius:20px; letter-spacing:0.04em;
  }
  #dash-view-overview .ov3-report-card__grid{ display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap:8px; }
  #dash-view-overview .ov3-grid-cell{ position:relative; border-radius: var(--dash-radius-sm); overflow:hidden; aspect-ratio: 1/1; }
  #dash-view-overview .ov3-grid-cell img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
  #dash-view-overview .ov3-grid-cell:hover img{ transform: scale(1.06); }
  #dash-view-overview .ov3-grid-cell--more img{ filter:brightness(0.45); }
  #dash-view-overview .ov3-grid-cell--more span{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--white);
    font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600;
  }

  #dash-view-overview .ov3-ai-summary{
    display:flex; gap:12px; padding:16px 18px; background: var(--cream); border-radius: var(--dash-radius-md); margin-bottom:22px;
  }
  #dash-view-overview .ov3-ai-summary__icon{
    flex:0 0 32px; width:32px; height:32px; border-radius:9px; background: var(--navy); color: var(--gold-light);
    display:flex; align-items:center; justify-content:center;
  }
  #dash-view-overview .ov3-ai-summary__icon svg{ width:16px; height:16px; }
  #dash-view-overview .ov3-ai-summary__body span{
    display:block; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600; letter-spacing:0.18em;
    text-transform:uppercase; color: var(--gold-dark); margin-bottom:4px;
  }
  #dash-view-overview .ov3-ai-summary__body p{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-dark); line-height:1.6; }

  #dash-view-overview .ov3-checklist-label{ font-family: var(--font-display); font-size: var(--fs-body); font-weight:600; color: var(--navy); margin-bottom:12px; }
  #dash-view-overview .ov3-checklist{ display:grid; grid-template-columns: 1fr 1fr; gap:10px 20px; margin-bottom:24px; }
  @media (max-width: 600px){ #dash-view-overview .ov3-checklist{ grid-template-columns:1fr; } }
  #dash-view-overview .ov3-check-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid rgba(43,38,34,0.06); }
  #dash-view-overview .ov3-check-item__left{ display:flex; align-items:center; gap:10px; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-dark); font-weight:500; }
  #dash-view-overview .ov3-check-item__dot{
    flex:0 0 22px; width:22px; height:22px; border-radius:50%; background: var(--dash-good-bg); color: var(--dash-good);
    display:flex; align-items:center; justify-content:center;
  }
  #dash-view-overview .ov3-check-item__dot svg{ width:12px; height:12px; }
  #dash-view-overview .ov3-check-item__status{ font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color: var(--dash-good); }

  #dash-view-overview .ov3-report-card__actions{ display:flex; gap:10px; flex-wrap:wrap; }
  #dash-view-overview .ov3-btn-outline{font-family: var(--font-body);
    display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; border:1px solid rgba(43,38,34,0.14);
    background: transparent; color: var(--navy); font-weight:600; font-size: var(--fs-body); cursor:pointer; transition: all .2s ease;
  }
  #dash-view-overview .ov3-btn-outline svg{ width:14px; height:14px; }
  #dash-view-overview .ov3-btn-outline:hover{ border-color: var(--border-gold); background: rgba(181,86,44,0.06); transform: translateY(-2px); }
  #dash-view-overview .ov3-btn-outline--primary{ background: var(--navy); color: var(--white); border-color: var(--navy); }
  #dash-view-overview .ov3-btn-outline--primary:hover{ background: var(--navy-light); }

  /* ---- right stack: upcoming visit + manager ---- */
  #dash-view-overview .ov3-stack{ display:flex; flex-direction:column; gap:24px; }
  #dash-view-overview .ov3-mini-card{ padding: 22px 24px; }
  #dash-view-overview .ov3-mini-card__eyebrow{font-family: var(--font-mono);
    display:flex; align-items:center; gap:8px; font-size: var(--fs-caption); font-weight:600; letter-spacing:0.2em;
    text-transform:uppercase; color: var(--gold-dark); margin-bottom:16px;
  }
  #dash-view-overview .ov3-mini-card__eyebrow svg{ width:14px; height:14px; }
  #dash-view-overview .ov3-visit__time{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight:600; color: var(--navy); display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
  #dash-view-overview .ov3-visit__time span{ font-family: var(--font-mono); font-size: var(--fs-body); font-weight:500; color: var(--text-muted); }
  #dash-view-overview .ov3-visit__row{font-family: var(--font-body);
    display:flex; align-items:center; gap:10px; font-size: var(--fs-body); color: var(--text-muted); padding:8px 0; border-top:1px solid rgba(43,38,34,0.06);
  }
  #dash-view-overview .ov3-visit__row:first-of-type{ border-top:none; }
  #dash-view-overview .ov3-visit__row svg{ width:15px; height:15px; flex:0 0 15px; color: var(--gold-dark); }
  #dash-view-overview .ov3-visit__row b{ color: var(--text-dark); font-weight:600; }

  #dash-view-overview .ov3-manager__top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  #dash-view-overview .ov3-manager__avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--border-gold); }
  #dash-view-overview .ov3-manager__name{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:700; color: var(--navy); }
  #dash-view-overview .ov3-manager__role{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); margin-top:1px; }
  #dash-view-overview .ov3-manager__status{ font-family: var(--font-body); display:flex; align-items:center; gap:6px; font-size: var(--fs-caption); font-weight:600; color: var(--dash-good); margin-top:5px; }
  #dash-view-overview .ov3-dot{ width:7px; height:7px; border-radius:50%; background: var(--dash-good); flex:0 0 7px; }
  #dash-view-overview .ov3-manager__chat-btn{font-family: var(--font-body);
    width:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:12px 16px; border-radius:999px;
    border:none; cursor:pointer; background: var(--navy); color: var(--white); font-weight:700; font-size: var(--fs-body);
    transition: all .2s ease; margin-bottom:10px;
  }
  #dash-view-overview .ov3-manager__chat-btn:hover{ background: var(--navy-light); transform: translateY(-2px); }
  #dash-view-overview .ov3-manager__chat-btn svg{ width:15px; height:15px; }
  #dash-view-overview .ov3-manager__channels{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
  #dash-view-overview .ov3-channel-btn{
    display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:12px;
    border:1px solid rgba(43,38,34,0.12); background: transparent; cursor:pointer; color: var(--navy); transition: all .2s ease;
    font-family: var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none;
  }
  #dash-view-overview .ov3-channel-btn svg{ width:16px; height:16px; }
  #dash-view-overview .ov3-channel-btn:hover{ border-color: var(--border-gold); background: rgba(181,86,44,0.06); transform: translateY(-2px); }

  /* ---------- 3. THREE EQUAL CARDS ---------- */
  #dash-view-overview .ov3-triple{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
  @media (max-width: 980px){ #dash-view-overview .ov3-triple{ grid-template-columns:1fr 1fr; } }
  @media (max-width: 640px){ #dash-view-overview .ov3-triple{ grid-template-columns:1fr; } }
  #dash-view-overview .ov3-triple .dash-card{ padding: 24px 26px; display:flex; flex-direction:column; }
  #dash-view-overview .ov3-card-head{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); margin-bottom:18px; }

  /* health score ring */
  #dash-view-overview .ov3-ring-wrap{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
  #dash-view-overview .ov3-ring{ position:relative; flex:0 0 96px; width:96px; height:96px; }
  #dash-view-overview .ov3-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  #dash-view-overview .ov3-ring-track{ fill:none; stroke: rgba(43,38,34,0.07); stroke-width:9; }
  #dash-view-overview .ov3-ring-fill{ fill:none; stroke: var(--gold-dark); stroke-width:9; stroke-linecap:round; }
  #dash-view-overview .ov3-ring-num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  #dash-view-overview .ov3-ring-num b{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight:700; color: var(--navy); line-height:1; }
  #dash-view-overview .ov3-ring-num span{ font-family: var(--font-mono); font-size:9px; color: var(--text-muted); letter-spacing:0.1em; text-transform:uppercase; margin-top:2px; }
  #dash-view-overview .ov3-ring-tag{ font-family: var(--font-body); font-weight:700; font-size: var(--fs-body); color: var(--dash-good); }
  #dash-view-overview .ov3-ring-tag small{ display:block; font-family: var(--font-body); font-weight:400; font-size: var(--fs-caption); color: var(--text-muted); margin-top:3px; }
  #dash-view-overview .ov3-bars{ display:flex; flex-direction:column; gap:12px; margin-top:auto; }
  #dash-view-overview .ov3-bar__label{font-family: var(--font-mono);
    display:flex; justify-content:space-between; font-size:10px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
    color: var(--text-muted); margin-bottom:5px;
  }
  #dash-view-overview .ov3-bar__label span:last-child{ color: var(--text-dark); font-weight:700; }
  #dash-view-overview .ov3-bar__track{ height:5px; border-radius:4px; background: rgba(43,38,34,0.07); overflow:hidden; }
  #dash-view-overview .ov3-bar__fill{ height:100%; border-radius:4px; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }

  /* attention center */
  #dash-view-overview .ov3-attn-list{ display:flex; flex-direction:column; gap:4px; }
  #dash-view-overview .ov3-attn-item{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(43,38,34,0.06); }
  #dash-view-overview .ov3-attn-item:last-child{ border-bottom:none; padding-bottom:0; }
  #dash-view-overview .ov3-attn-icon{ flex:0 0 32px; width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
  #dash-view-overview .ov3-attn-icon svg{ width:15px; height:15px; }
  #dash-view-overview .ov3-attn-icon.high{ background: var(--dash-high-bg); color: var(--dash-high); }
  #dash-view-overview .ov3-attn-icon.good{ background: var(--dash-good-bg); color: var(--dash-good); }
  #dash-view-overview .ov3-attn-icon.med{ background: var(--dash-med-bg); color: var(--dash-med); }
  #dash-view-overview .ov3-attn-body{ flex:1; min-width:0; }
  #dash-view-overview .ov3-attn-body .t{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--text-dark); }
  #dash-view-overview .ov3-attn-body .d{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-top:1px; }
  #dash-view-overview .ov3-attn-pill{font-family: var(--font-mono);
    font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:4px 9px; border-radius:20px; white-space:nowrap;
  }
  #dash-view-overview .ov3-attn-pill.high{ background: var(--dash-high-bg); color: var(--dash-high); }
  #dash-view-overview .ov3-attn-pill.good{ background: var(--dash-good-bg); color: var(--dash-good); }
  #dash-view-overview .ov3-attn-empty{ display:flex; align-items:center; gap:10px; font-family: var(--font-body); font-size: var(--fs-body); color: var(--dash-good); font-weight:600; padding: 4px 0 12px; }
  #dash-view-overview .ov3-attn-empty svg{ width:17px; height:17px; }

  /* recent activity timeline */
  #dash-view-overview .ov3-timeline{ display:flex; flex-direction:column; }
  #dash-view-overview .ov3-timeline__item{ position:relative; display:flex; align-items:flex-start; gap:13px; padding-bottom:18px; }
  #dash-view-overview .ov3-timeline__item:last-child{ padding-bottom:0; }
  #dash-view-overview .ov3-timeline__item::before{
    content:''; position:absolute; left:5px; top:16px; bottom:-2px; width:1px; background: rgba(43,38,34,0.1);
  }
  #dash-view-overview .ov3-timeline__item:last-child::before{ display:none; }
  #dash-view-overview .ov3-timeline__dot{ flex:0 0 11px; width:11px; height:11px; border-radius:50%; background: var(--gold); margin-top:4px; box-shadow:0 0 0 3px var(--cream); }
  #dash-view-overview .ov3-timeline__body{ flex:1; min-width:0; }
  #dash-view-overview .ov3-timeline__date{ font-family: var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color: var(--gold-dark); margin-bottom:3px; }
  #dash-view-overview .ov3-timeline__title{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--navy); }
  #dash-view-overview .ov3-timeline__detail{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-top:2px; }

  /* ---------- 4. SECOND VIEWPORT: Calendar + Document Vault ---------- */
  #dash-view-overview .ov3-row4{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; }
  @media (max-width: 900px){ #dash-view-overview .ov3-row4{ grid-template-columns:1fr; } }
  #dash-view-overview .ov3-row4 .dash-card{ padding:26px 28px; }
  #dash-view-overview .ov3-card-head-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  #dash-view-overview .ov3-view-all{font-family: var(--font-body);
    display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-caption); font-weight:700; color: var(--gold-dark);
    background:none; border:none; cursor:pointer; letter-spacing:0.03em; text-transform:uppercase;
  }
  #dash-view-overview .ov3-view-all svg{ width:11px; height:11px; }
  #dash-view-overview .ov3-view-all:hover{ text-decoration:underline; }

  #dash-view-overview .ov3-cal-strip{ display:flex; flex-direction:column; gap:10px; }
  #dash-view-overview .ov3-cal-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius: var(--dash-radius-md); border:1px solid rgba(43,38,34,0.08); transition: all .2s ease; }
  #dash-view-overview .ov3-cal-row:hover{ border-color: var(--border-gold); box-shadow: var(--dash-card-shadow); }
  #dash-view-overview .ov3-cal-row.is-today{ background: var(--cream); border-color: var(--border-gold); }
  #dash-view-overview .ov3-cal-date{
    flex:0 0 50px; width:50px; height:50px; border-radius:12px; background: var(--navy); color: var(--white);
    display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  }
  #dash-view-overview .ov3-cal-date b{ font-family: var(--font-display); font-size:18px; font-weight:700; }
  #dash-view-overview .ov3-cal-date span{ font-family: var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:0.08em; color: var(--gold-light); margin-top:2px; }
  #dash-view-overview .ov3-cal-body{ flex:1; min-width:0; }
  #dash-view-overview .ov3-cal-body .t{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--text-dark); }
  #dash-view-overview .ov3-cal-body .d{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-top:1px; }
  #dash-view-overview .ov3-cal-badge{font-family: var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:5px 10px; border-radius:20px; white-space:nowrap; }
  #dash-view-overview .ov3-cal-badge.upcoming{ background: var(--dash-high-bg); color: var(--dash-high); }
  #dash-view-overview .ov3-cal-badge.done{ background: var(--dash-good-bg); color: var(--dash-good); }

  #dash-view-overview .ov3-doc-summary{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background: var(--cream); border-radius: var(--dash-radius-md); margin-bottom:16px; font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); }
  #dash-view-overview .ov3-doc-summary b{ color: var(--text-dark); }
  #dash-view-overview .ov3-doc-list{ display:flex; flex-direction:column; gap:2px; }
  #dash-view-overview .ov3-doc-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(43,38,34,0.06); }
  #dash-view-overview .ov3-doc-row:last-child{ border-bottom:none; padding-bottom:0; }
  #dash-view-overview .ov3-doc-icon{ flex:0 0 36px; width:36px; height:36px; border-radius:10px; background: var(--cream); color: var(--gold-dark); display:flex; align-items:center; justify-content:center; }
  #dash-view-overview .ov3-doc-icon svg{ width:16px; height:16px; }
  #dash-view-overview .ov3-doc-body{ flex:1; min-width:0; }
  #dash-view-overview .ov3-doc-body h5{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--text-dark); display:flex; align-items:center; gap:6px; }
  #dash-view-overview .ov3-doc-body h5 svg{ width:12px; height:12px; color: var(--dash-good); flex:0 0 12px; }
  #dash-view-overview .ov3-doc-body p{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-top:1px; }
  #dash-view-overview .ov3-doc-dl{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid rgba(43,38,34,0.12); background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--navy); transition: all .2s ease; }
  #dash-view-overview .ov3-doc-dl:hover{ border-color: var(--border-gold); background: rgba(181,86,44,0.06); }
  #dash-view-overview .ov3-doc-dl svg{ width:14px; height:14px; }

  /* ---------- 5. BOTTOM: Inspection History + AI Insights ---------- */
  #dash-view-overview .ov3-row5{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; margin-bottom:8px; }
  @media (max-width: 900px){ #dash-view-overview .ov3-row5{ grid-template-columns:1fr; } }
  #dash-view-overview .ov3-row5 .dash-card{ padding:26px 28px; }

  #dash-view-overview .ov3-hist-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid rgba(43,38,34,0.06); }
  #dash-view-overview .ov3-hist-row:last-child{ border-bottom:none; padding-bottom:0; }
  #dash-view-overview .ov3-hist-date{ flex:0 0 44px; text-align:center; font-family: var(--font-display); color: var(--navy); line-height:1.1; }
  #dash-view-overview .ov3-hist-date b{ display:block; font-size:19px; font-weight:700; }
  #dash-view-overview .ov3-hist-date span{ display:block; font-family: var(--font-mono); font-size:9px; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-muted); margin-top:1px; }
  #dash-view-overview .ov3-hist-body{ flex:1; min-width:0; }
  #dash-view-overview .ov3-hist-body h5{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--text-dark); }
  #dash-view-overview .ov3-hist-body p{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-top:1px; }
  #dash-view-overview .ov3-hist-badge{font-family: var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:5px 10px; border-radius:20px; white-space:nowrap; }
  #dash-view-overview .ov3-hist-badge.completed{ background: var(--dash-good-bg); color: var(--dash-good); }
  #dash-view-overview .ov3-hist-badge.resolved{ background: var(--dash-med-bg); color: var(--dash-med); }

  #dash-view-overview .ov3-insight-banner{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius: var(--dash-radius-md); background: var(--dash-good-bg); margin-bottom:18px; }
  #dash-view-overview .ov3-insight-banner svg{ width:20px; height:20px; color: var(--dash-good); flex:0 0 20px; }
  #dash-view-overview .ov3-insight-banner p{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-dark); }
  #dash-view-overview .ov3-insight-banner b{ color: var(--dash-good); }
  #dash-view-overview .ov3-rec-list{ display:flex; flex-direction:column; gap:12px; }
  #dash-view-overview .ov3-rec-item{ display:flex; gap:12px; }
  #dash-view-overview .ov3-rec-num{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; background: var(--cream); color: var(--gold-dark); font-family: var(--font-mono); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  #dash-view-overview .ov3-rec-body h5{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--text-dark); }
  #dash-view-overview .ov3-rec-body p{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-top:2px; line-height:1.5; }


  /* ============================================================
     SHARED VIEW HEADER + BUTTONS
     Reusable across Visit History, Reports & Media, Document Vault
     and Property HealthScore. Uses the same tokens as the Overview
     view above, but is not scoped to #dash-view-overview so it can
     be reused across any dash-view.
  ============================================================ */
  .dvh-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
  .dvh-header__eyebrow{
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--gold-dark); margin-bottom:8px; display:flex; align-items:center; gap:8px;
   font-weight: 500;}
  .dvh-header__eyebrow::before{ content:''; width:16px; height:1px; background: var(--gold); }
  .dvh-header h1{ font-family: var(--font-display); font-weight:500; font-size: var(--fs-h2); color: var(--navy); line-height:1.15; }
  .dvh-header p{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); margin-top:6px; max-width:480px; line-height:1.55; }

  .dvh-btn-navy{font-family: var(--font-body); 
    display:inline-flex; align-items:center; gap:8px; background: var(--navy); color: var(--white);
    padding:12px 22px; border-radius:11px; font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.02em;
    border:1px solid var(--navy); transition: all .22s ease; white-space:nowrap;
  }
  .dvh-btn-navy:hover{ background: var(--navy-light); transform: translateY(-2px); box-shadow: var(--dash-card-shadow-hover); }
  .dvh-btn-navy svg{ width:15px; height:15px; }
  .dvh-btn-outline{font-family: var(--font-body); 
    display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:8px;
    border:1px solid rgba(43,38,34,0.14); background:transparent; color: var(--navy);
    font-size: var(--fs-body); font-weight: 600; cursor:pointer; transition: all .25s ease; white-space:nowrap;
   letter-spacing: 0.02em;}
  .dvh-btn-outline:hover{ border-color: var(--border-gold); background: rgba(181,86,44,0.06); transform: translateY(-2px); }
  .dvh-btn-outline svg{ width:14px; height:14px; }

  /* ============================================================
     VISIT HISTORY
  ============================================================ */
  .vh-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
  .vh-filter{
    font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; letter-spacing:.03em;
    padding:8px 16px; border-radius:20px; border:1px solid rgba(43,38,34,0.12);
    background:transparent; color: var(--text-muted); cursor:pointer; transition: all .2s ease;
  }
  .vh-filter:hover{ border-color: var(--border-gold); color: var(--navy); }
  .vh-filter.active{ background: var(--navy); border-color: var(--navy); color: var(--white); }
  .vh-timeline{ display:flex; flex-direction:column; }
  .vh-item{
    display:flex; align-items:center; gap:16px; padding:15px 10px;
    border-bottom:1px solid rgba(43,38,34,0.06); border-radius:10px; transition: background .15s ease;
  }
  .vh-item:last-child{ border-bottom:none; }
  .vh-item:hover{ background: var(--cream); }
  /* Only rows built from real data carry a date key and open the visit modal
     (see wireVisitHistoryTimeline). The static demo rows in index.html have
     no key, so they must not advertise a click that does nothing. */
  .vh-item[data-vh-key]{ cursor:pointer; }
  .vh-item[data-vh-key]:focus-visible{ background: var(--cream); outline:2px solid var(--gold); outline-offset:-2px; }
  .vh-item[hidden]{ display:none; }
  .vh-item__date{
    flex:0 0 48px; width:48px; height:52px; border-radius:10px; background: var(--cream);
    border:1px solid rgba(43,38,34,0.07); display:flex; flex-direction:column;
    align-items:center; justify-content:center;
  }
  .vh-item__date .dd{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:700; color: var(--navy); line-height:1; }
  .vh-item__date .mm{ font-family: var(--font-body); font-size: var(--fs-body); text-transform:uppercase; letter-spacing:.06em; color: var(--text-muted); margin-top:3px; }
  .vh-item__body{ flex:1; min-width:0; }
  .vh-item__body h5{font-family: var(--font-body);  font-size: var(--fs-body); font-weight:600; color: var(--navy); margin-bottom:2px; }
  .vh-item__body p{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); }
  .vh-badge{
    flex:0 0 auto; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; padding:4px 11px; border-radius:20px; white-space:nowrap;
  }
  .vh-badge--upcoming{ color: var(--dash-high); background: var(--dash-high-bg); }
  .vh-badge--completed{ color: var(--dash-good); background: var(--dash-good-bg); }
  /* Visit types: green like every completed entry; the label tells them apart. */
  .vh-badge--additional{ color: var(--dash-good); background: var(--dash-good-bg); }
  .vh-badge--ondemand{ color: var(--dash-good); background: var(--dash-good-bg); }
  .vh-badge--resolved{ color: var(--dash-good); background: var(--dash-good-bg); }

  /* ============================================================
     PROPERTY NEWS — Discover/News-style toolbar (search + chips)
  ============================================================ */
  .pn-toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
  .pn-search{ position:relative; flex:1 1 260px; max-width:380px; }
  .pn-search svg{
    position:absolute; left:15px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color: var(--text-muted); pointer-events:none;
  }
  .pn-search input{
    width:100%; font-family: var(--font-body); font-size: var(--fs-body); color: var(--navy);
    background: var(--off-white); border:1px solid rgba(43,38,34,0.1); border-radius:22px;
    padding:11px 16px 11px 40px; transition: all .22s ease;
  }
  .pn-search input::placeholder{ color: var(--text-muted); }
  .pn-search input:focus{
    outline:none; background: var(--white); border-color: var(--border-gold);
    box-shadow: 0 0 0 3px rgba(181,86,44,0.12);
  }
  .pn-toolbar .vh-filters{ margin-bottom:0; flex:1 1 auto; }

  /* ============================================================
     PROPERTY NEWS — Discover/News-style card grid
  ============================================================ */
  .pn-empty{
    display:none; text-align:center; padding:60px 20px; font-family: var(--font-body);
    color: var(--text-muted); font-size: var(--fs-body);
  }
  .pn-empty.is-visible{ display:block; }
  .pn-list{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap:22px; align-items:stretch;
  }
  .pn-item{
    display:flex; flex-direction:column; min-width:0; overflow:hidden; cursor:pointer;
    background: var(--white); border:1px solid rgba(43,38,34,0.07); border-radius: var(--dash-radius-lg);
    box-shadow: var(--dash-card-shadow); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .pn-item:hover{ transform: translateY(-5px); box-shadow: var(--dash-card-shadow-hover); border-color: rgba(181,86,44,0.28); }
  .pn-item[hidden]{ display:none; }
  .pn-item--featured{ grid-column: 1 / -1; flex-direction:row; }
  @media (max-width: 760px){
    .pn-item--featured{ flex-direction:column; }
  }
  .pn-item__media{
    position:relative; flex:0 0 auto; overflow:hidden; aspect-ratio: 16/10; background: var(--off-white);
  }
  .pn-item--featured .pn-item__media{ flex:0 0 44%; aspect-ratio:auto; min-height:300px; }
  .pn-item__media img{
    width:100%; height:100%; object-fit:cover; display:block; transition: transform .55s ease;
  }
  .pn-item:hover .pn-item__media img{ transform: scale(1.07); }
  .pn-item__badge{
    position:absolute; top:14px; left:14px; font-family: var(--font-mono); font-size: var(--fs-caption);
    font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:20px;
    background: var(--dash-good-bg); color: var(--dash-good); backdrop-filter: blur(6px);
  }
  .pn-item__icon{ display:none; }
  .pn-item__body{ flex:1; min-width:0; display:flex; flex-direction:column; padding:18px 20px 20px; }
  .pn-item--featured .pn-item__body{ padding:26px 32px; justify-content:center; }
  .pn-item__meta{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
  .pn-item__date{font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); }
  .pn-item__body h5{
    font-family: var(--font-display); font-weight:500; font-size: var(--fs-h4); line-height:1.32;
    color: var(--navy); margin-bottom:8px;
  }
  .pn-item--featured .pn-item__body h5{ font-size: var(--fs-h3); }
  .pn-item__body p{
    font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted);
    line-height:1.6; margin-bottom:16px; flex:1;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .pn-item--featured .pn-item__body p{ -webkit-line-clamp:4; }
  .pn-item__readmore{
    align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-family: var(--font-body);
    font-size: var(--fs-body); font-weight:600; color: var(--navy); background:transparent;
    border:1px solid rgba(43,38,34,0.14); padding:9px 18px; border-radius:20px; cursor:pointer;
    transition: all .22s ease;
  }
  .pn-item__readmore svg{ width:13px; height:13px; transition: transform .22s ease; }
  .pn-item__readmore:hover{ background: var(--navy); border-color: var(--navy); color: var(--white); }
  .pn-item__readmore:hover svg{ transform: translateX(3px); }

  /* ============================================================
     MEDIA GALLERY — Google Photos–style browsing, VLOOKASSET aesthetic
  ============================================================ */
  .mg-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
  .mg-tabs{ display:inline-flex; gap:4px; padding:4px; background: var(--off-white); border:1px solid rgba(43,38,34,0.08); border-radius:30px; }
  .mg-tab{
    font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; letter-spacing:.02em;
    padding:8px 20px; border-radius:24px; border:none; background:transparent; color: var(--text-muted);
    cursor:pointer; transition: all .2s ease;
  }
  .mg-tab:hover{ color: var(--navy); }
  .mg-tab.is-active{ background: var(--navy); color: var(--white); box-shadow: 0 4px 14px rgba(43,38,34,0.18); }
  .mg-toolbar__count{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); }

  .mg-gallery{ display:flex; flex-direction:column; gap:34px; }
  .mg-group__label{
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600; letter-spacing:0.2em;
    text-transform:uppercase; color: var(--gold-dark); margin-bottom:14px; display:flex; align-items:center; gap:10px;
  }
  .mg-group__label::after{ content:''; flex:1 1 auto; height:1px; background: rgba(43,38,34,0.08); }

  .mg-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:14px; }
  @media (max-width:1180px){ .mg-grid{ grid-template-columns: repeat(4, 1fr); } }
  @media (max-width:760px){ .mg-grid{ grid-template-columns: repeat(3, 1fr); gap:10px; } }
  @media (max-width:520px){ .mg-grid{ grid-template-columns: repeat(2, 1fr); gap:8px; } }

  .mg-item{
    position:relative; display:block; width:100%; aspect-ratio:1/1; padding:0; border:none;
    border-radius: var(--dash-radius-md); overflow:hidden; cursor:pointer; background: var(--off-white);
    box-shadow: 0 2px 10px rgba(43,38,34,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .mg-item:hover, .mg-item:focus-visible{
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 28px rgba(43,38,34,0.18);
    z-index:2;
  }
  .mg-item__img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
  .mg-item:hover .mg-item__img{ transform: scale(1.06); }

  .mg-item__overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
    padding:10px; background: linear-gradient(180deg, rgba(43,38,34,0) 45%, rgba(43,38,34,0.72) 100%);
    opacity:0; transition: opacity .22s ease;
  }
  .mg-item:hover .mg-item__overlay, .mg-item:focus-visible .mg-item__overlay{ opacity:1; }
  .mg-item__title{ font-family: var(--font-body); font-size:12.5px; font-weight:600; color: var(--white); line-height:1.25; }
  .mg-item__meta{ font-family: var(--font-mono); font-size:10.5px; color: rgba(255,255,255,0.82); margin-top:2px; }

  .mg-item__play{
    position:absolute; left:10px; bottom:10px; width:26px; height:26px; border-radius:50%;
    background: rgba(255,255,255,0.92); color: var(--navy); display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 10px rgba(43,38,34,0.25);
  }
  .mg-item__play svg{ width:11px; height:11px; margin-left:1px; }
  .mg-item--video:hover .mg-item__play{ opacity:0; }
  .mg-item__duration{
    position:absolute; right:8px; bottom:8px; background: rgba(43,38,34,0.72); color: var(--white);
    font-family: var(--font-mono); font-size:10px; font-weight:600; padding:3px 7px; border-radius:6px; letter-spacing:.02em;
  }

  /* "Visiting soon" — Visit History + Overview timeline before any visit is logged */
  .vl-visit-empty{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
    padding:36px 20px; border-radius: var(--dash-radius-lg); border:1px dashed rgba(43,38,34,0.14); background: var(--off-white);
  }
  .vl-visit-empty__icon{
    width:48px; height:48px; border-radius:50%; background: var(--cream); color: var(--gold-dark);
    display:flex; align-items:center; justify-content:center; margin-bottom:4px;
  }
  .vl-visit-empty__icon svg{ width:22px; height:22px; }
  .vl-visit-empty h4{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); }
  .vl-visit-empty p{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); max-width:340px; line-height:1.55; }

  .mg-empty{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
    padding:70px 20px; border-radius: var(--dash-radius-lg); border:1px dashed rgba(43,38,34,0.14); background: var(--off-white);
  }
  .mg-empty__icon{
    width:56px; height:56px; border-radius:50%; background: var(--cream); color: var(--gold-dark);
    display:flex; align-items:center; justify-content:center; margin-bottom:4px;
  }
  .mg-empty__icon svg{ width:24px; height:24px; }
  .mg-empty h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); }
  .mg-empty p{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); max-width:340px; line-height:1.55; }

  /* ---- Lightbox ---- */
  .mg-lightbox{
    position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
    opacity:0; pointer-events:none; transition: opacity .28s ease;
  }
  .mg-lightbox.is-open{ opacity:1; pointer-events:auto; }
  /* Opened from the visit popup (z-index 10500), so it has to sit above it. */
  .mg-lightbox.over-modal{ z-index:10600; }
  #voVisitModal #voModalThumbs img{ cursor:zoom-in; }
  .mg-lightbox__backdrop{ position:absolute; inset:0; background: rgba(30,26,23,0.94); backdrop-filter: blur(6px); }
  .mg-lightbox__top{
    position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    padding:22px 26px; flex-wrap:wrap;
  }
  .mg-lightbox__title{ font-family: var(--font-display); font-size:19px; font-weight:600; color: var(--white); }
  .mg-lightbox__meta{ font-family: var(--font-mono); font-size: var(--fs-caption); color: rgba(255,255,255,0.6); margin-top:4px; letter-spacing:.04em; }
  .mg-lightbox__actions{ display:flex; align-items:center; gap:8px; }
  .mg-lb-btn{
    width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08); color: var(--white); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: all .2s ease;
  }
  .mg-lb-btn svg{ width:17px; height:17px; }
  .mg-lb-btn:hover{ background: rgba(255,255,255,0.18); transform: translateY(-2px); }
  .mg-lb-btn[aria-pressed="true"]{ background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .mg-lb-btn--close{ margin-left:4px; }

  .mg-lightbox__stage{
    position:relative; flex:1 1 auto; display:flex; align-items:center; justify-content:center;
    padding: 10px 90px 40px; min-height:0; overflow:hidden;
  }
  .mg-lightbox__img{
    max-width:100%; max-height:100%; object-fit:contain; border-radius:6px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5); transition: transform .3s ease; cursor: zoom-in;
    display:none;
  }
  .mg-lightbox__img.is-zoomed{ transform: scale(1.65); cursor: zoom-out; }
  .mg-lightbox__video{
    max-width:100%; max-height:100%; border-radius:6px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); display:none; background:#000;
  }

  .mg-lightbox__nav{
    position:absolute; top:50%; transform: translateY(-50%); z-index:2;
    width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08); color: var(--white); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: all .2s ease;
  }
  .mg-lightbox__nav:hover{ background: rgba(255,255,255,0.2); }
  .mg-lightbox__nav svg{ width:20px; height:20px; }
  .mg-lightbox__nav--prev{ left:22px; }
  .mg-lightbox__nav--next{ right:22px; }
  .mg-lightbox__nav[hidden]{ display:none; }

  .mg-lightbox__counter{
    position:relative; z-index:2; text-align:center; padding-bottom:20px;
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.1em; color: rgba(255,255,255,0.6);
  }

  @media (max-width:760px){
    .mg-lightbox__stage{ padding:10px 16px 30px; }
    .mg-lightbox__nav{ width:38px; height:38px; }
    .mg-lightbox__nav--prev{ left:8px; }
    .mg-lightbox__nav--next{ right:8px; }
    .mg-lightbox__title{ font-size:16px; }
    .mg-lb-btn{ width:36px; height:36px; }
  }

  /* ---- Report Preview modal ---- */
  .rp-modal{
    position:fixed; inset:0; z-index:10600; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition: opacity .25s ease; padding:24px;
  }
  .rp-modal.is-open{ opacity:1; pointer-events:auto; }
  .rp-modal__backdrop{ position:absolute; inset:0; background: rgba(30,26,23,0.6); backdrop-filter: blur(4px); }
  .rp-modal__box{
    position:relative; z-index:2; width:100%; max-width:560px; max-height:86vh; overflow:auto;
    background: var(--white, #fff); border-radius: var(--dash-radius-lg, 16px); box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    transform: translateY(10px) scale(.98); transition: transform .25s ease;
  }
  .rp-modal.is-open .rp-modal__box{ transform: translateY(0) scale(1); }
  .rp-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; border-bottom:1px solid rgba(43,38,34,0.08); }
  .rp-modal__head-left{ display:flex; align-items:center; gap:12px; min-width:0; }
  .rp-modal__icon{ width:40px; height:40px; border-radius:10px; background: var(--cream); border:1px solid rgba(181,86,44,0.25); display:flex; align-items:center; justify-content:center; color: var(--gold-dark); flex:0 0 40px; }
  .rp-modal__icon svg{ width:19px; height:19px; }
  .rp-modal__title{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); line-height:1.25; }
  .rp-modal__meta{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-top:2px; }
  .rp-modal__close{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(43,38,34,0.12); background:#fff; color: var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 34px; }
  .rp-modal__close svg{ width:15px; height:15px; }
  .rp-modal__close:hover{ background: var(--cream); }
  .rp-modal__body{ padding:26px 24px; }
  .rp-modal__page{
    background: var(--off-white); border:1px solid rgba(43,38,34,0.08); border-radius:10px; padding:22px;
    font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-dark); line-height:1.7;
  }
  .rp-modal__page p{ margin-bottom:10px; }
  .rp-modal__page p:last-child{ margin-bottom:0; }
  .rp-modal__foot{ display:flex; justify-content:flex-end; gap:10px; padding:0 24px 24px; }

  .rs-field{ margin-bottom:16px; }
  .rs-field label{ display:block; font-family: var(--font-body); font-size: var(--fs-caption); font-weight:600; color: var(--navy); margin-bottom:6px; }
  .rs-field label span{ font-weight:400; color: var(--text-muted); }
  .rs-field input, .rs-field textarea{
    width:100%; font-family: var(--font-body); font-size: var(--fs-body); color: var(--navy);
    border:1px solid rgba(43,38,34,0.14); border-radius:10px; padding:10px 12px; background:#fff;
    transition: border-color .15s ease;
  }
  .rs-field input:focus, .rs-field textarea:focus{ outline:none; border-color: var(--gold-dark); }
  .rs-field select{
    width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--border-gold, #d9cdbd);
    border-radius:10px; background:#fff; color: var(--navy); font-family: var(--font-body); font-size: var(--fs-body);
  }
  .rs-field select:focus{ outline:none; border-color: var(--gold-dark); }
  .rs-field select:disabled{ opacity:.55; cursor:not-allowed; }
  .rs-field[hidden]{ display:none; }
  .rs-field textarea{ resize:vertical; min-height:70px; font-family: var(--font-body); }
  .rs-error{ font-family: var(--font-body); font-size: var(--fs-caption); color:#c0392b; margin:-6px 0 4px; }
  .rs-success{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--dash-good); background: var(--dash-good-bg); border-radius:10px; padding:12px 14px; margin:0; }
  .rs-btn{ font-family: var(--font-body); padding:10px 18px; border-radius:30px; font-size: var(--fs-body); font-weight:600; border:none; cursor:pointer; transition: all .2s ease; letter-spacing:0.02em; }
  .rs-btn:disabled{ opacity:.6; cursor:not-allowed; }
  .rs-btn-primary{ background: var(--gold); color:#fff; }
  .rs-btn-primary:hover:not(:disabled){ background: var(--gold-dark); }
  .rs-btn-outline{ background:#fff; border:1px solid rgba(43,38,34,0.12); color: var(--navy); }
  .rs-btn-outline:hover{ background: var(--off-white); }

  .rm-report-row{ display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid rgba(43,38,34,0.06); }
  .rm-report-row:last-child{ border-bottom:none; }
  .rm-report-row__icon{
    width:36px; height:36px; border-radius:10px; background: var(--cream); border:1px solid rgba(181,86,44,0.25);
    display:flex; align-items:center; justify-content:center; color: var(--gold-dark); flex:0 0 36px;
  }
  .rm-report-row__icon svg{ width:16px; height:16px; }
  .rm-report-row__body{ flex:1; min-width:0; }
  .rm-report-row__body h5{font-family: var(--font-body);  font-size: var(--fs-body); font-weight:600; color: var(--navy); margin-bottom:2px; }
  .rm-report-row__body p{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); }
  .rm-report-row__dl{
    flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:1px solid rgba(43,38,34,0.1);
    background:transparent; display:flex; align-items:center; justify-content:center; color: var(--navy); transition: all .2s ease;
  }
  .rm-report-row__dl:hover{ border-color: var(--border-gold); background: var(--cream); color: var(--gold-dark); }
  .rm-report-row__dl svg{ width:15px; height:15px; }

  /* ============================================================
     DOCUMENT VIEWER (Report cards)
  ============================================================ */
  .docv-viewer{
    position:fixed; inset:0; z-index:230; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition: opacity .3s ease; padding:28px;
  }
  .docv-viewer.is-open{ opacity:1; pointer-events:auto; }
  .docv-viewer__backdrop{ position:absolute; inset:0; background: rgba(30,26,23,0.62); backdrop-filter: blur(5px); }
  .docv-viewer__box{
    position:relative; width:100%; max-width:880px; height:min(86vh,760px); background: var(--white);
    border-radius: var(--dash-radius-lg); box-shadow: 0 24px 64px rgba(30,26,23,0.35), 0 4px 14px rgba(30,26,23,0.12);
    display:flex; flex-direction:column; overflow:hidden;
    transform: translateY(18px) scale(.96); opacity:0;
    transition: transform .32s cubic-bezier(.2,.9,.25,1.1), opacity .28s ease;
  }
  .docv-viewer.is-open .docv-viewer__box{ transform: translateY(0) scale(1); opacity:1; }
  .docv-viewer.is-fullscreen .docv-viewer__box{ max-width:none; width:100vw; height:100vh; border-radius:0; }
  .docv-viewer__toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px;
    border-bottom:1px solid rgba(43,38,34,0.08); background: var(--white); flex:0 0 auto;
  }
  .docv-viewer__titlewrap{ min-width:0; }
  .docv-viewer__title{
    font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px;
  }
  .docv-viewer__meta{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); margin-top:2px; letter-spacing:.02em; }
  .docv-viewer__controls{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
  .docv-viewer__zoomgroup{
    display:flex; align-items:center; gap:2px; background: var(--cream); border:1px solid rgba(181,86,44,0.22);
    border-radius:10px; padding:3px;
  }
  .docv-viewer__zoomlevel{
    font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--navy); font-weight:600;
    width:44px; text-align:center; user-select:none;
  }
  .docv-viewer__divider{ width:1px; height:22px; background: rgba(43,38,34,0.1); margin:0 4px; }
  .docv-viewer__btn{
    width:34px; height:34px; border-radius:9px; border:1px solid rgba(43,38,34,0.1); background:transparent;
    color: var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .18s ease; flex:0 0 34px;
  }
  .docv-viewer__btn svg{ width:16px; height:16px; }
  .docv-viewer__btn:hover{ border-color: var(--border-gold); background: var(--cream); color: var(--gold-dark); }
  .docv-viewer__btn:focus-visible{ outline:2px solid var(--gold-dark); outline-offset:2px; }
  .docv-viewer__btn:disabled{ opacity:.35; cursor:not-allowed; }
  .docv-viewer__btn:disabled:hover{ background:transparent; border-color: rgba(43,38,34,0.1); color: var(--navy); }
  .docv-viewer__zoomgroup .docv-viewer__btn{ border:none; background:transparent; width:26px; height:26px; }
  .docv-viewer__zoomgroup .docv-viewer__btn:hover{ background: var(--cream-dark); }
  .docv-viewer__btn--close{ border-radius:50%; }
  .docv-viewer__btn--close:hover{ border-color: rgba(180,67,46,0.35); background: rgba(180,67,46,0.08); color: var(--dash-crit); }
  .docv-viewer__canvas{
    flex:1; min-height:0; overflow:auto; background:#E7EAEE;
    display:flex; justify-content:center; padding:32px 24px;
  }
  .docv-viewer__page{
    width:600px; max-width:100%; flex:0 0 auto; background: var(--white); border-radius:4px;
    box-shadow: 0 2px 6px rgba(43,38,34,0.08), 0 14px 34px rgba(43,38,34,0.12);
    padding:40px 44px; transform-origin: top center; transition: transform .18s ease;
  }
  .docv-viewer__page-header{
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:16px; margin-bottom:22px;
    border-bottom:2px solid var(--navy);
  }
  .docv-viewer__page-brand{ font-family: var(--font-mono); font-size:11px; letter-spacing:.16em; color: var(--gold-dark); font-weight:600; white-space:nowrap; }
  .docv-viewer__page-doctitle{ font-family: var(--font-display); font-size:17px; color: var(--navy); font-weight:600; text-align:right; }
  .docv-viewer__skeleton-block{ height:120px; border-radius:8px; background: linear-gradient(135deg, var(--cream), var(--cream-dark)); margin-bottom:20px; }
  .docv-viewer__skeleton-line{ height:10px; border-radius:5px; background: rgba(43,38,34,0.08); margin-bottom:12px; width:100%; }
  .docv-viewer__skeleton-line--w80{ width:80%; }
  .docv-viewer__skeleton-line--w95{ width:95%; }
  .docv-viewer__skeleton-line--w70{ width:70%; }
  .docv-viewer__skeleton-line--w90{ width:90%; }
  .docv-viewer__skeleton-line--w60{ width:60%; }
  .docv-viewer__skeleton-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
  .docv-viewer__skeleton-box{ height:70px; border-radius:8px; background: rgba(43,38,34,0.05); border:1px solid rgba(43,38,34,0.06); }
  .docv-viewer__page-footer{
    margin-top:26px; padding-top:14px; border-top:1px solid rgba(43,38,34,0.08);
    font-family: var(--font-mono); font-size:11px; color: var(--text-muted); text-align:center;
  }
  @media (max-width:640px){
    .docv-viewer{ padding:0; }
    .docv-viewer__box{ max-width:none; width:100%; height:100%; border-radius:0; }
    .docv-viewer__title{ max-width:150px; }
    .docv-viewer__toolbar{ padding:12px 14px; flex-wrap:wrap; row-gap:10px; }
    .docv-viewer__canvas{ padding:20px 14px; }
    .docv-viewer__page{ padding:26px 20px; }
  }

  /* ============================================================
     DOCUMENT VAULT
  ============================================================ */
  .docv-summary{
    display:flex; align-items:center; justify-content:space-between; gap:16px; background: var(--white);
    border:1px solid rgba(43,38,34,0.06); box-shadow: var(--dash-card-shadow); border-radius: var(--dash-radius-lg);
    padding:16px 22px; margin-bottom:20px; flex-wrap:wrap;
  }
  .docv-summary__text{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .docv-summary__text b{ color: var(--navy); font-weight:600; }
  .docv-summary__encrypted{ display:inline-flex; align-items:center; gap:5px; color: var(--dash-good); font-weight:600; }
  .docv-summary__encrypted svg{ width:13px; height:13px; }
  .docv-verified-tag{
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;
    color: var(--dash-good); background: var(--dash-good-bg); padding:6px 13px; border-radius:20px; white-space:nowrap;
  }
  /* align-items:start stops the two columns stretching to match each other,
     so a short column's cards keep their own height instead of the taller
     side dictating it. */
  .docv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; align-items:start; }
  @media (max-width:760px){ .docv-grid{ grid-template-columns:1fr; } }

  /* Each side of the vault: inspection output on the left, the standing
     legal/annual paperwork on the right. The columns are the grid's two
     cells, so the existing breakpoint above stacks them on mobile. */
  .docv-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
  .docv-col__label{
    display:flex; align-items:center; gap:9px; margin:0;
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600;
    letter-spacing:0.18em; text-transform:uppercase; color: var(--gold-dark);
  }
  .docv-col__count{
    font-family: var(--font-body); letter-spacing:0; font-size:11px; font-weight:600;
    min-width:20px; height:20px; padding:0 6px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    background: var(--cream); color: var(--gold-dark);
  }
  .docv-col__note{
    margin:-8px 0 0; font-family: var(--font-body); font-size: var(--fs-caption);
    color: var(--text-muted); line-height:1.5;
  }
  .docv-col__empty{
    margin:0; padding:26px 18px; text-align:center;
    font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted);
    border:1px dashed rgba(43,38,34,0.14); border-radius: var(--dash-radius-lg); background: var(--off-white);
  }
  .docv-card{
    display:flex; align-items:center; gap:14px; background: var(--white); border:1px solid rgba(43,38,34,0.06);
    box-shadow: var(--dash-card-shadow); border-radius: var(--dash-radius-lg); padding:17px 18px; cursor:pointer;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  }
  .docv-card:hover{ box-shadow: var(--dash-card-shadow-hover); transform: translateY(-2px); border-color: rgba(181,86,44,0.25); }
  .docv-card:focus-visible{ outline:2px solid var(--gold-dark); outline-offset:2px; }
  .docv-card__body{ flex:1; min-width:0; }
  .docv-card__body h5{font-family: var(--font-body);  font-size: var(--fs-body); font-weight:600; color: var(--navy); margin-bottom:3px; display:flex; align-items:center; gap:6px; }
  .docv-card__body h5 svg{ width:13px; height:13px; color: var(--dash-good); flex:0 0 13px; }
  .docv-card__meta{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); line-height:1.4; margin-bottom:3px; }
  .docv-card__date{font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:0.03em; color: var(--text-muted); opacity:.75; }
  .docv-card__dl{
    flex:0 0 auto; width:36px; height:36px; border-radius:10px; border:1px solid rgba(43,38,34,0.1);
    background:transparent; display:flex; align-items:center; justify-content:center; color: var(--navy); transition: all .2s ease;
  }
  .docv-card__dl:hover{ border-color: var(--border-gold); background: var(--cream); color: var(--gold-dark); }
  .docv-card__dl svg{ width:16px; height:16px; }

  /* ============================================================
     PROPERTY HEALTHSCORE
  ============================================================ */
  .hs-hero{
    position:relative; overflow:hidden; background: var(--dash-navy-glow); border-radius: var(--dash-radius-lg);
    padding:38px 40px; display:flex; gap:40px; align-items:center; margin-bottom:20px; color: var(--white);
  }
  @media (max-width:760px){ .hs-hero{ flex-direction:column; text-align:center; padding:32px 26px; } }
  .hs-hero__grid{
    position:absolute; inset:0; opacity:.05; pointer-events:none;
    background-image: repeating-linear-gradient(var(--gold) 0 1px, transparent 1px 64px),
                       repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 64px);
  }
  .hs-hero__score{ position:relative; z-index:1; text-align:center; flex:0 0 auto; }
  .hs-hero__score .num{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:700; color: var(--gold-light); line-height:1; }
  .hs-hero__score .of{font-family: var(--font-display);  font-size: var(--fs-h4); color: rgba(255,255,255,0.5); margin-top:4px; }
  .hs-hero__score .tag{font-family: var(--font-mono);  font-size: var(--fs-caption); font-weight: 500; color: #8FD8A8; margin-top:8px;  letter-spacing: 0.25em; text-transform: uppercase;}
  .hs-hero__body{ position:relative; z-index:1; flex:1; }
  .hs-hero__body h2{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight:600; margin-bottom:10px; }
  .hs-hero__body p{font-family: var(--font-body);  font-size: var(--fs-body); color: rgba(255,255,255,0.55); line-height:1.7; max-width:520px; }
  .hs-hero__cta{ margin-top:16px; background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .hs-hero__cta:hover{ background: var(--gold-light); border-color: var(--gold-light); }
  .hs-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
  @media (max-width:900px){ .hs-grid{ grid-template-columns:repeat(2,1fr); } }
  .hs-card{ text-align:center; padding:22px 16px; }
  .hs-card__label{font-family: var(--font-mono);  font-size: var(--fs-caption); font-weight: 500; color: var(--navy); margin-bottom:10px;  letter-spacing: 0.25em; text-transform: uppercase;}
  .hs-card__score{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; }
  .hs-card__pct{font-family: var(--font-mono);  font-size: var(--fs-caption); color: var(--text-muted); margin-top:4px; }
  .hs-card__warn{font-family: var(--font-body);  font-size: var(--fs-body); color: var(--dash-high); margin-top:7px; font-weight:600; line-height:1.4; }

  /* ---------- HealthScore: actionable recommendations ---------- */
  .hs-rec-list{ display:flex; flex-direction:column; margin-top:6px; }
  .hs-rec-item{ display:flex; align-items:flex-start; gap:15px; padding:16px 4px; border-bottom:1px solid rgba(43,38,34,0.06); }
  .hs-rec-item:last-child{ border-bottom:none; padding-bottom:4px; }
  .hs-rec-item__icon{
    width:36px; height:36px; border-radius:10px; flex:0 0 36px; display:flex; align-items:center; justify-content:center;
  }
  .hs-rec-item__icon svg{ width:16px; height:16px; }
  .hs-rec-item__icon.high{ background: var(--dash-high-bg); color: var(--dash-high); }
  .hs-rec-item__icon.med{ background: var(--dash-med-bg); color: var(--dash-med); }
  .hs-rec-item__icon.good{ background: var(--dash-good-bg); color: var(--dash-good); }
  .hs-rec-item__body{ flex:1; min-width:0; }
  .hs-rec-item__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .hs-rec-item__top h5{font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--navy); }
  .hs-rec-item__body p{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); margin-top:3px; line-height:1.55; max-width:560px; }
  .hs-rec-pill{
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:3px 10px; border-radius:20px; white-space:nowrap;
  }
  .hs-rec-pill.high{ color: var(--dash-high); background: var(--dash-high-bg); }
  .hs-rec-pill.med{ color: var(--dash-med); background: var(--dash-med-bg); }
  .hs-rec-pill.good{ color: var(--dash-good); background: var(--dash-good-bg); }
  .hs-rec-item__go{
    flex:0 0 auto; background:none; border:none; font-family: var(--font-body); font-size: var(--fs-body); font-weight:600;
    color: var(--gold-dark); display:flex; align-items:center; gap:4px; margin-top:6px; padding:0;
  }
  .hs-rec-item__go svg{ width:12px; height:12px; }
  .hs-rec-item__go:hover{ text-decoration: underline; }

  /* ============================================================
     RAISE ALERT (EMERGENCY)
  ============================================================ */
  .ra-hotline{
    display:flex; align-items:center; gap:18px; padding:20px 26px; border-radius: var(--dash-radius-lg);
    background: linear-gradient(120deg, var(--dash-crit), #8A3323); color: var(--white); margin-bottom:22px;
    box-shadow: 0 12px 30px rgba(180,67,46,0.25); flex-wrap:wrap;
  }
  .ra-hotline__icon{
    width:46px; height:46px; border-radius:50%; flex:0 0 46px; background: rgba(255,255,255,0.16);
    display:flex; align-items:center; justify-content:center;
  }
  .ra-hotline__icon svg{ width:21px; height:21px; }
  .ra-hotline__body{ flex:1; min-width:200px; }
  .ra-hotline__body h4{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; }
  .ra-hotline__body p{font-family: var(--font-body); font-size: var(--fs-body); color: rgba(255,255,255,0.78); margin-top:3px; }
  .ra-hotline__cta{font-family: var(--font-body);
    flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; background: var(--white); color: var(--dash-crit);
    padding:12px 24px; border-radius:10px; font-weight:700; font-size: var(--fs-body); border:none; transition: all .22s ease; white-space:nowrap;
  }
  .ra-hotline__cta:hover{ background: rgba(255,255,255,0.9); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
  .ra-hotline__cta svg{ width:15px; height:15px; }

  .ra-grid{ display:grid; grid-template-columns: 1.7fr 1fr; gap:20px; align-items:start; }
  @media (max-width:900px){ .ra-grid{ grid-template-columns:1fr; } }

  .ra-form-card h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); margin-bottom:22px; display:flex; align-items:center; gap:10px; }
  .ra-form-card h3 svg{ width:19px; height:19px; color: var(--dash-crit); }
  .ra-field{ margin-bottom:18px; }
  .ra-field label{
    display:block; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:500; letter-spacing:.2em; text-transform:uppercase;
    color: var(--text-muted); margin-bottom:9px;
  }
  .ra-field select, .ra-field textarea{
    width:100%; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-dark);
    border:1px solid rgba(43,38,34,0.14); border-radius:10px; padding:13px 14px; background: var(--white);
    transition: border-color .2s ease, box-shadow .2s ease; appearance:none;
  }
  .ra-field select{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat; background-position: right 14px center; background-size:16px; padding-right:38px;
  }
  .ra-field textarea{ resize:vertical; min-height:104px; line-height:1.6; }
  .ra-field select:focus, .ra-field textarea:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(181,86,44,0.14); }
  .ra-urgency-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
  @media (max-width:560px){ .ra-urgency-row{ grid-template-columns:1fr; } }
  .ra-urgency{
    font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; text-align:center; cursor:pointer;
    padding:12px 8px; border-radius:10px; border:1.5px solid rgba(43,38,34,0.12); color: var(--text-muted);
    background: var(--white); transition: all .2s ease;
  }
  .ra-urgency:hover{ border-color: rgba(181,86,44,0.4); }
  .ra-urgency.is-active{ border-color: var(--dash-crit); background: var(--dash-crit-bg); color: var(--dash-crit); }
  .ra-submit-btn{font-family: var(--font-body);
    width:100%; display:flex; align-items:center; justify-content:center; gap:9px; margin-top:6px;
    background: var(--dash-crit); color: var(--white); border:none; border-radius:11px; padding:16px 20px;
    font-size: var(--fs-body); font-weight:700; letter-spacing:.02em; transition: all .22s ease;
  }
  .ra-submit-btn:hover{ background: #963a29; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(180,67,46,0.3); }
  .ra-submit-btn svg{ width:16px; height:16px; }
  .ra-form-note{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); text-align:center; margin-top:12px; }

  .ra-success{ display:none; text-align:center; padding:26px 10px 8px; }
  .ra-success.show{ display:block; }
  .ra-success__icon{
    width:58px; height:58px; border-radius:50%; margin:0 auto 18px; background: var(--dash-good-bg); color: var(--dash-good);
    display:flex; align-items:center; justify-content:center;
  }
  .ra-success__icon svg{ width:26px; height:26px; }
  .ra-success h4{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); }
  .ra-success p{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); margin-top:8px; max-width:400px; margin-left:auto; margin-right:auto; line-height:1.6; }
  .ra-success__ticket{
    display:inline-block; margin-top:14px; font-family: var(--font-mono); font-size: var(--fs-body); font-weight:600; color: var(--navy);
    background: var(--cream); border:1px solid rgba(181,86,44,0.3); padding:8px 18px; border-radius:20px; letter-spacing:.04em;
  }
  .ra-success__reset{font-family: var(--font-body);
    display:inline-flex; margin-top:20px; background:none; border:1px solid rgba(43,38,34,0.14); color: var(--navy);
    padding:10px 20px; border-radius:9px; font-size: var(--fs-body); font-weight:600; transition: all .2s ease;
  }
  .ra-success__reset:hover{ border-color: var(--border-gold); background: var(--cream); }

  .ra-side{ display:flex; flex-direction:column; gap:16px; }
  .ra-oncall-card{ display:flex; flex-direction:column; }
  .ra-oncall-card__label{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.25em; text-transform:uppercase; color: var(--gold-dark); margin-bottom:14px; font-weight:500; }
  .ra-oncall-card__top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .ra-oncall-card__avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--border-gold); flex:0 0 52px; }
  .ra-oncall-card__name{font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--navy); }
  .ra-oncall-card__role{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); margin-top:1px; }
  .ra-oncall-card__status{font-family: var(--font-body); display:flex; align-items:center; gap:6px; font-size: var(--fs-body); font-weight:600; color: var(--dash-good); margin-top:5px; }
  .ra-dot{ width:7px; height:7px; border-radius:50%; background: var(--dash-good); flex:0 0 7px; }
  .ra-oncall-card__actions{ display:flex; gap:8px; }
  .ra-pill-btn{font-family: var(--font-body);
    flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 14px; border-radius:9px;
    font-size: var(--fs-body); font-weight:600; background: var(--navy); color: var(--white); border:1px solid var(--navy); transition: all .22s ease;
  }
  .ra-pill-btn svg{ width:13px; height:13px; }
  .ra-pill-btn:hover{ transform: translateY(-2px); box-shadow: var(--dash-card-shadow-hover); }
  .ra-pill-btn--ghost{ background:transparent; border:1px solid rgba(43,38,34,0.14); color: var(--navy); }
  .ra-pill-btn--ghost:hover{ border-color: var(--border-gold); background: rgba(181,86,44,0.06); }

  .ra-sla-note{
    background: var(--dash-crit-bg); border:1px solid rgba(180,67,46,0.22); border-radius: var(--dash-radius-lg); padding:18px 20px;
  }
  .ra-sla-note__head{ display:flex; align-items:center; gap:8px; font-family: var(--font-body); font-size: var(--fs-body); font-weight:700; color: var(--dash-crit); margin-bottom:6px; }
  .ra-sla-note__head svg{ width:15px; height:15px; }
  .ra-sla-note p{font-family: var(--font-body); font-size: var(--fs-body); color: #8A4535; line-height:1.6; }

  .ra-what-list{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:12px; }
  .ra-what-list li{font-family: var(--font-body); display:flex; align-items:center; gap:9px; font-size: var(--fs-body); color: var(--text-muted); }
  .ra-what-list li svg{ width:14px; height:14px; flex:0 0 14px; color: var(--dash-crit); }

  /* ============================================================
     MY PROPERTY MANAGER
  ============================================================ */
  .pm-grid{ display:grid; grid-template-columns: 320px 1fr; gap:20px; align-items:start; }
  @media (max-width:860px){ .pm-grid{ grid-template-columns:1fr; } }

  .pm-profile-card{ display:flex; flex-direction:column; text-align:center; }
  .pm-profile-card__label{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.25em; text-transform:uppercase; color: var(--gold-dark); margin-bottom:16px; font-weight:500; }
  .pm-profile-card__avatar{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:3px solid var(--border-gold); margin:0 auto 14px; }
  .pm-profile-card__name{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); }
  .pm-profile-card__role{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); margin-top:3px; }
  .pm-profile-card__status{font-family: var(--font-body); display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-body); font-weight:600; color: var(--dash-good); margin:10px auto 18px; }
  /* LAUNCH-AUDIT-001 */
  .pm-profile-card__pending-note{font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); line-height:1.6; margin:-10px auto 18px; max-width:260px; }
  .pm-dot{ width:7px; height:7px; border-radius:50%; background: var(--dash-good); flex:0 0 7px; }
  .pm-profile-card__contacts{ display:flex; flex-direction:column; gap:10px; text-align:left; margin-bottom:18px; padding-top:16px; border-top:1px solid rgba(43,38,34,0.06); }
  .pm-contact-row{font-family: var(--font-body); display:flex; align-items:center; gap:10px; font-size: var(--fs-body); color: var(--text-dark); }
  .pm-contact-row svg{ width:15px; height:15px; flex:0 0 15px; color: var(--gold-dark); }
  .pm-profile-card__actions{ display:flex; flex-direction:column; gap:8px; }
  .pm-btn-navy{font-family: var(--font-body);
    display:inline-flex; align-items:center; justify-content:center; gap:8px; background: var(--navy); color: var(--white);
    padding:12px 18px; border-radius:10px; font-size: var(--fs-body); font-weight:600; border:1px solid var(--navy); transition: all .22s ease;
  }
  .pm-btn-navy:hover{ background: var(--navy-light); transform: translateY(-2px); box-shadow: var(--dash-card-shadow-hover); }
  .pm-btn-navy svg{ width:14px; height:14px; }
  .pm-btn-outline{font-family: var(--font-body);
    display:inline-flex; align-items:center; justify-content:center; gap:8px; background: transparent; color: var(--navy);
    padding:11px 18px; border-radius:10px; font-size: var(--fs-body); font-weight:600; border:1px solid rgba(43,38,34,0.14); transition: all .22s ease;
  }
  .pm-btn-outline:hover{ border-color: var(--border-gold); background: rgba(181,86,44,0.06); }
  .pm-btn-outline svg{ width:14px; height:14px; }

  .pm-stack{ display:flex; flex-direction:column; gap:18px; }
  .pm-about p{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height:1.75; margin-bottom:18px; }
  .pm-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  @media (max-width:640px){ .pm-stat-grid{ grid-template-columns:repeat(2,1fr); } }
  /* LAUNCH-AUDIT-001: My Manager's "About Your Manager" card now has 2 real
     stat tiles, not 4 (2 unmeasured ones were removed). */
  .pm-stat-grid--2up{ grid-template-columns:repeat(2,1fr); }
  .pm-stat-tile{ background: var(--cream); border-radius: var(--dash-radius-md); padding:15px 16px; }
  .pm-stat-tile__label{font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); margin-bottom:5px; letter-spacing:.15em; text-transform:uppercase; font-weight:500; }
  .pm-stat-tile__value{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); }
  .pm-stat-tile__value.good{ color: var(--dash-good); }

  .pm-hours-list{ display:flex; flex-direction:column; margin-top:6px; }
  .pm-hours-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px solid rgba(43,38,34,0.06); }
  .pm-hours-row:last-child{ border-bottom:none; }
  .pm-hours-row__day{font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--navy); }
  .pm-hours-row__time{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); }
  .pm-hours-row__time.live{ color: var(--dash-good); font-weight:600; display:flex; align-items:center; gap:6px; }

  /* Chat mockup */
  .pm-chat-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
  .pm-chat-head{ display:flex; align-items:center; gap:11px; padding:18px 20px; background: var(--dash-navy-glow); }
  .pm-chat-head img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(181,86,44,0.5); }
  .pm-chat-head__name{font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--white); }
  .pm-chat-head__status{font-family: var(--font-body); font-size: var(--fs-body); color: var(--gold-light); display:flex; align-items:center; gap:5px; margin-top:1px; }
  .pm-chat-body{ padding:20px; display:flex; flex-direction:column; gap:10px; max-height:260px; overflow-y:auto; }
  .pm-msg{font-family: var(--font-body); font-size: var(--fs-body); line-height:1.55; padding:10px 15px; border-radius:14px; max-width:82%; }
  .pm-msg-bot{ background: var(--cream); color: var(--text-dark); border-bottom-left-radius:4px; align-self:flex-start; }
  .pm-msg-user{ background: var(--navy); color: var(--white); border-bottom-right-radius:4px; align-self:flex-end; }
  .pm-chat-quickreplies{ display:flex; flex-wrap:wrap; gap:7px; padding:0 20px 18px; }
  .pm-qr-btn{font-family: var(--font-body);
    font-size: var(--fs-body); font-weight:600; padding:7px 14px; border-radius:20px; border:1px solid var(--border-gold);
    color: var(--gold-dark); background: transparent; transition: all .18s ease;
  }
  .pm-qr-btn:hover{ background: var(--gold); color: var(--navy); border-color: var(--gold); }
  .pm-chat-input{ display:flex; gap:9px; padding:14px 20px; border-top:1px solid rgba(43,38,34,0.06); }
  .pm-chat-input input{font-family: var(--font-body);
    flex:1; border:1px solid rgba(43,38,34,0.14); border-radius:20px; padding:9px 16px; font-size: var(--fs-body); background: var(--white);
  }
  .pm-chat-input input:focus{ outline:none; border-color: var(--gold); }
  .pm-chat-send{
    width:36px; height:36px; border-radius:50%; background: var(--gold); border:none; color: var(--navy); display:flex;
    align-items:center; justify-content:center; flex:0 0 36px; transition: all .18s ease;
  }
  .pm-chat-send:hover{ background: var(--gold-light); }
  .pm-chat-send svg{ width:15px; height:15px; }

  /* ============================================================
     REFER & EARN
  ============================================================ */
  .rf-hero{
    position:relative; overflow:hidden; background: var(--dash-navy-glow); border-radius: var(--dash-radius-lg);
    padding:44px 30px; text-align:center; margin-bottom:20px; color: var(--white);
  }
  .rf-hero__grid{ position:absolute; inset:0; opacity:.05; pointer-events:none;
    background-image: repeating-linear-gradient(var(--gold) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 64px);
  }
  .rf-hero__inner{ position:relative; z-index:1; }
  .rf-hero__icon{
    width:60px; height:60px; border-radius:50%; margin:0 auto 16px; background: rgba(181,86,44,0.16);
    border:1px solid rgba(181,86,44,0.35); display:flex; align-items:center; justify-content:center; color: var(--gold-light);
  }
  .rf-hero__icon svg{ width:27px; height:27px; }
  .rf-hero__inner h2{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight:600; margin-bottom:10px; }
  .rf-hero__inner p{font-family: var(--font-body); font-size: var(--fs-body); color: rgba(255,255,255,0.6); max-width:440px; margin:0 auto 26px; line-height:1.7; }
  .rf-link-box{
    display:inline-flex; align-items:center; gap:14px; background: rgba(255,255,255,0.06); border:1px solid var(--border-gold);
    border-radius:12px; padding:14px 14px 14px 22px; flex-wrap:wrap; justify-content:center;
  }
  .rf-link-box span{ font-family: var(--font-mono); font-size: var(--fs-body); color: var(--gold-light); letter-spacing:.02em; }
  .rf-copy-btn{font-family: var(--font-body);
    display:inline-flex; align-items:center; gap:8px; background: var(--gold); color: var(--navy); border:none;
    padding:10px 20px; border-radius:9px; font-size: var(--fs-body); font-weight:700; transition: all .2s ease; white-space:nowrap;
  }
  .rf-copy-btn:hover{ background: var(--gold-light); transform: translateY(-2px); }
  .rf-copy-btn svg{ width:14px; height:14px; }
  .rf-copy-btn.is-copied{ background: var(--dash-good); color: var(--white); }

  .rf-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
  @media (max-width:760px){ .rf-stats-row{ grid-template-columns:repeat(2,1fr); } }

  .rf-how{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
  @media (max-width:760px){ .rf-how{ grid-template-columns:1fr; } }
  .rf-how-card{ text-align:center; }
  .rf-how-card__num{
    width:34px; height:34px; border-radius:50%; margin:0 auto 14px; background: var(--cream); border:1px solid rgba(181,86,44,0.3);
    color: var(--gold-dark); font-family: var(--font-display); font-weight:700; font-size: var(--fs-h4); display:flex; align-items:center; justify-content:center;
  }
  .rf-how-card h5{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--navy); margin-bottom:6px; }
  .rf-how-card p{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height:1.55; }

  .rf-share-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .rf-share-row span{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.2em; text-transform:uppercase; color: var(--text-muted); font-weight:500; }
  .rf-share-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid rgba(43,38,34,0.12); background: var(--white); color: var(--navy);
    display:flex; align-items:center; justify-content:center; transition: all .2s ease;
  }
  .rf-share-btn svg{ width:16px; height:16px; }
  .rf-share-btn:hover{ border-color: var(--border-gold); background: var(--cream); color: var(--gold-dark); transform: translateY(-2px); }

  /* ============================================================
     SUBSCRIPTION
  ============================================================ */
  .sub-hero{
    position:relative; overflow:hidden; background: var(--dash-navy-glow); border-radius: var(--dash-radius-lg);
    padding:34px 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:20px; color: var(--white); flex-wrap:wrap;
  }
  .sub-hero__grid{ position:absolute; inset:0; opacity:.05; pointer-events:none;
    background-image: repeating-linear-gradient(var(--gold) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 64px);
  }
  .sub-hero__left{ position:relative; z-index:1; }
  .sub-hero__eyebrow{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.25em; text-transform:uppercase; color: var(--gold-light); margin-bottom:8px; font-weight:500; }
  .sub-hero__plan{ font-family: var(--font-display); font-size: var(--fs-h1); font-weight:600; }
  .sub-hero__meta{font-family: var(--font-body); font-size: var(--fs-body); color: rgba(255,255,255,0.55); margin-top:8px; }
  .sub-hero__right{ position:relative; z-index:1; text-align:right; }
  .sub-hero__days{ font-family: var(--font-display); font-size: var(--fs-display); font-weight:600; color: var(--gold-light); line-height:1; }
  .sub-hero__days-label{font-family: var(--font-mono); font-size: var(--fs-caption); color: rgba(255,255,255,0.5); margin-top:4px; letter-spacing:.15em; text-transform:uppercase; }
  .sub-hero__cta{ margin-top:14px; }

  .sub-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-bottom:18px; }
  @media (max-width:800px){ .sub-row{ grid-template-columns:1fr; } }

  .sub-feature-list{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-top:14px; }
  .sub-feature-list li{font-family: var(--font-body); display:flex; align-items:center; gap:10px; font-size: var(--fs-body); color: var(--text-dark); }
  .sub-feature-list li svg{ width:16px; height:16px; flex:0 0 16px; color: var(--dash-good); }

  .sub-payment-row{ display:flex; align-items:center; gap:14px; padding:16px 4px; }
  .sub-payment-icon{
    width:46px; height:32px; border-radius:6px; background: linear-gradient(135deg, var(--navy), var(--navy-light));
    display:flex; align-items:center; justify-content:center; color: var(--gold-light); flex:0 0 46px;
  }
  .sub-payment-icon svg{ width:20px; height:20px; }
  .sub-payment-info{ flex:1; }
  .sub-payment-info .pm-name{font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--navy); }
  .sub-payment-info .pm-sub{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); margin-top:2px; }

  .sub-billing-list{ display:flex; flex-direction:column; margin-top:8px; }
  .sub-billing-item{ display:flex; align-items:center; gap:16px; padding:14px 4px; border-bottom:1px solid rgba(43,38,34,0.06); }
  .sub-billing-item:last-child{ border-bottom:none; }
  .sub-billing-item__date{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); flex:0 0 100px; }
  .sub-billing-item__desc{ flex:1; font-family: var(--font-body); font-size: var(--fs-body); color: var(--navy); font-weight:500; min-width:0; }
  .sub-billing-item__amt{font-family: var(--font-body); font-size: var(--fs-body); font-weight:700; color: var(--navy); flex:0 0 auto; }
  .sub-billing-item__dl{
    flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:1px solid rgba(43,38,34,0.1);
    background:transparent; display:flex; align-items:center; justify-content:center; color: var(--navy); transition: all .2s ease;
  }
  .sub-billing-item__dl:hover{ border-color: var(--border-gold); background: var(--cream); color: var(--gold-dark); }
  .sub-billing-item__dl svg{ width:15px; height:15px; }

  .sub-plans-teaser{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .sub-plans-teaser__text h5{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); margin-bottom:4px; }
  .sub-plans-teaser__text p{font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); }

  /* ============================================================
     OVERVIEW PAGE — "Essential" layout port
     Namespaced to #dash-view-overview .vo-*. Ported from the
     essential-dashboard reference: page header, hero, stat cards,
     two-column grid (visit timeline / alerts / property intel and
     calendar / manager / tax-id / activity feed) + visit modal.
  ============================================================ */
  #dash-view-overview .vo-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
  #dash-view-overview .vo-header__eyebrow{font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:0.25em; text-transform:uppercase; color: var(--text-muted); font-weight:500; }
  #dash-view-overview .vo-header__row{ display:flex; align-items:center; gap:12px; margin-top:4px; }
  #dash-view-overview .vo-header h1{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-h2); color: var(--navy); letter-spacing:-0.01em; }
  #dash-view-overview .vo-tier-tag{ background: var(--cream); color: var(--gold-dark); font-size: var(--fs-caption); font-weight:700; letter-spacing:0.06em; padding:4px 11px; border-radius:20px; text-transform:uppercase; }

  #dash-view-overview .vo-hero{ position:relative; border-radius: var(--dash-radius-lg); overflow:hidden; margin-bottom:20px; min-height:250px; display:flex; align-items:flex-end; box-shadow: var(--dash-card-shadow); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); }
  #dash-view-overview .vo-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation: voKenBurns 16s ease-in-out infinite alternate; }
  /* The hero background is a live map embed of the client's actual property address (set in JS from
     their onboarding submission), not a stock photo — falls back to the plain navy gradient above
     when there's no property on file yet to point the map at. */
  #dash-view-overview .vo-hero iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; pointer-events:none; }
  #dash-view-overview .vo-hero::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(43,38,34,0.08) 0%, rgba(43,38,34,0.88) 100%); }
  #dash-view-overview .vo-hero-content{ position:relative; z-index:2; padding:26px 30px; width:100%; color:#fff; }
  #dash-view-overview .vo-status-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  #dash-view-overview .vo-status-pulse{ width:9px; height:9px; border-radius:50%; background:#7FD99B; animation: voRadiate 2s infinite; flex:0 0 9px; }
  #dash-view-overview .vo-badge{ background: rgba(255,255,255,0.16); backdrop-filter: blur(4px); font-size: var(--fs-caption); padding:5px 12px; border-radius:20px; font-weight:500; font-family: var(--font-body); }
  #dash-view-overview .vo-hero-content h2{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-h3); margin-bottom:6px; }
  #dash-view-overview .vo-hero-content p{ font-family: var(--font-body); font-size: var(--fs-body); color: rgba(255,255,255,0.85); max-width:540px; margin-bottom:16px; line-height:1.5; }
  #dash-view-overview .vo-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  /* Split hero: message on the left, live map on the right half (no overlay on the map). */
  #dash-view-overview .vo-hero{ display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; min-height:320px; }
  #dash-view-overview .vo-hero::after{ display:none; }
  #dash-view-overview .vo-hero-content{ grid-column:1; grid-row:1; display:flex; flex-direction:column; justify-content:center; padding:32px 34px; }
  #dash-view-overview .vo-hero iframe{ position:relative; inset:auto; grid-column:2; grid-row:1; width:100%; height:100%; min-height:320px; pointer-events:auto; }
  @media (max-width: 760px){
    #dash-view-overview .vo-hero{ grid-template-columns: 1fr; }
    #dash-view-overview .vo-hero iframe{ grid-column:1; grid-row:1; min-height:240px; }
    #dash-view-overview .vo-hero-content{ grid-column:1; grid-row:2; padding:22px 20px; }
  }
  #dash-view-overview .vo-btn, #voVisitModal .vo-btn, #rpModal .vo-btn{ font-family: var(--font-body); padding:10px 18px; border-radius:30px; font-size: var(--fs-body); font-weight:600; border:none; cursor:pointer; transition: all .2s ease; letter-spacing:0.02em; }
  #dash-view-overview .vo-btn:active, #voVisitModal .vo-btn:active, #rpModal .vo-btn:active{ transform: scale(0.97); }
  #dash-view-overview .vo-btn-primary, #voVisitModal .vo-btn-primary, #rpModal .vo-btn-primary{ background: var(--gold); color:#fff; }
  #dash-view-overview .vo-btn-primary:hover, #voVisitModal .vo-btn-primary:hover, #rpModal .vo-btn-primary:hover{ background: var(--gold-dark); transform: translateY(-2px); }
  #dash-view-overview .vo-btn-ghost, #voVisitModal .vo-btn-ghost, #rpModal .vo-btn-ghost{ background: rgba(255,255,255,0.14); color:#fff; border:1px solid rgba(255,255,255,0.3); }
  #dash-view-overview .vo-btn-ghost:hover, #voVisitModal .vo-btn-ghost:hover, #rpModal .vo-btn-ghost:hover{ background: rgba(255,255,255,0.22); transform: translateY(-2px); }
  #dash-view-overview .vo-btn-outline, #voVisitModal .vo-btn-outline, #rpModal .vo-btn-outline{ background:#fff; border:1px solid rgba(43,38,34,0.12); color: var(--navy); }
  #dash-view-overview .vo-btn-outline:hover, #voVisitModal .vo-btn-outline:hover, #rpModal .vo-btn-outline:hover{ background: var(--off-white); }

  /* "Please check your property's pin", under the hero map. */
  #dash-view-overview .vo-pin-check{ display:flex; align-items:center; gap:14px; background:#FFF8E6; border:1.5px solid var(--gold); border-radius: var(--dash-radius-lg); padding:14px 18px; margin:-6px 0 20px; }
  #dash-view-overview .vo-pin-check[hidden]{ display:none; }
  #dash-view-overview .vo-pin-check__icon{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; }
  #dash-view-overview .vo-pin-check__body{ flex:1; display:flex; flex-direction:column; gap:3px; font-size:13px; color:var(--text-soft); line-height:1.5; }
  #dash-view-overview .vo-pin-check__body strong{ font-size:14.5px; color:var(--navy); }
  #dash-view-overview .vo-pin-check__btn{ flex:0 0 auto; background:#fff; border:1.5px solid var(--gold); color:var(--gold-dark); font-weight:700; font-size:13px; padding:9px 16px; border-radius:999px; cursor:pointer; }
  #dash-view-overview .vo-pin-check__btn:hover{ background:var(--gold); color:#fff; }
  @media (max-width: 600px){ #dash-view-overview .vo-pin-check{ flex-wrap:wrap; } #dash-view-overview .vo-pin-check__btn{ width:100%; } }
  #dash-view-overview .vo-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; align-items:stretch; }
  @media (max-width: 900px){ #dash-view-overview .vo-stats{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 480px){ #dash-view-overview .vo-stats{ grid-template-columns: 1fr; } }
  #dash-view-overview .vo-stat-card{ background: var(--white); border:1px solid rgba(43,38,34,0.07); border-radius: var(--ov-radius); padding:26px 26px 28px; box-shadow: var(--dash-card-shadow); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1), border-color .3s ease; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:16px; height:100%; }
  #dash-view-overview .vo-stat-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 30px rgba(43,38,34,0.10), 0 26px 54px rgba(43,38,34,0.12); border-color: rgba(181,86,44,0.3); }
  #dash-view-overview .vo-stat-top{ display:flex; justify-content:space-between; align-items:flex-start; width:100%; }
  #dash-view-overview .vo-stat-icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; transition: transform .3s cubic-bezier(.22,1,.36,1); }
  #dash-view-overview .vo-stat-card:hover .vo-stat-icon{ transform: scale(1.12); }
  #dash-view-overview .vo-stat-icon svg{ width:19px; height:19px; }
  #dash-view-overview .vo-stat-trend{font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:700; padding:3px 8px; border-radius:20px; background: var(--dash-good-bg); color: var(--dash-good); letter-spacing:0.02em; white-space:nowrap; }
  #dash-view-overview .vo-stat-card p.vo-value{ font-family: var(--dash-metric-font-family); font-size: 33px; font-weight: var(--dash-metric-font-weight); font-variant-numeric: var(--dash-metric-font-variant); font-feature-settings: var(--dash-metric-font-feature); letter-spacing: var(--dash-metric-letter-spacing); color: var(--navy); line-height:1; margin:0; }
  #dash-view-overview .vo-stat-card p.vo-label{font-family: var(--font-display); font-size: 19px; color: var(--navy); margin:0; letter-spacing:0; text-transform:none; font-weight:600; }
  #dash-view-overview .vo-stat-card p.vo-sub{ font-family: var(--font-body); font-size: 15.5px; color: var(--text-muted); margin:0; line-height:1.5; }

  /* ---- Request Additional Service CTA ---- */
  #dash-view-overview .vo-svc-cta{ display:flex; align-items:center; gap:20px; background: linear-gradient(135deg, var(--cream) 0%, var(--off-white) 100%); border:1px solid var(--border-gold); border-radius: var(--dash-radius-lg); padding:22px 26px; margin-bottom:20px; box-shadow: var(--dash-card-shadow); }
  #dash-view-overview .vo-svc-cta__icon{ width:52px; height:52px; border-radius:14px; flex-shrink:0; background: var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; }
  #dash-view-overview .vo-svc-cta__icon svg{ width:24px; height:24px; }
  #dash-view-overview .vo-svc-cta__body{ flex:1; min-width:0; }
  #dash-view-overview .vo-svc-cta__body h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); margin-bottom:4px; }
  #dash-view-overview .vo-svc-cta__body p{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height:1.5; max-width:520px; margin:0; }
  #dash-view-overview .vo-svc-cta .vo-btn{ flex-shrink:0; white-space:nowrap; }
  @media (max-width: 720px){
    #dash-view-overview .vo-svc-cta{ flex-direction:column; align-items:flex-start; text-align:left; }
    #dash-view-overview .vo-svc-cta .vo-btn{ width:100%; text-align:center; }
  }

  #dash-view-overview .vo-content-grid{ display:grid; grid-template-columns: 1.5fr 1fr; gap:20px; align-items:start; }
  @media (max-width: 980px){ #dash-view-overview .vo-content-grid{ grid-template-columns: 1fr; } }
  #dash-view-overview .vo-panel{ margin-bottom:18px; }
  #dash-view-overview .vo-panel h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; color: var(--navy); }
  #dash-view-overview .vo-panel h3 a, #dash-view-overview .vo-panel h3 .vo-see-all{font-family: var(--font-body); font-size: var(--fs-caption); font-weight:600; color: var(--gold-dark); background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:4px; }
  #dash-view-overview .vo-panel h3 a:hover, #dash-view-overview .vo-panel h3 .vo-see-all:hover{ text-decoration: underline; }

  #dash-view-overview .vo-timeline{ display:flex; flex-direction:column; gap:10px; }
  #dash-view-overview .vo-tl-item{ display:flex; gap:12px; align-items:stretch; }
  #dash-view-overview .vo-tl-indicator-col{ display:flex; flex-direction:column; align-items:center; padding-top:20px; flex-shrink:0; }
  #dash-view-overview .vo-tl-dot{ width:9px; height:9px; border-radius:50%; background: var(--dash-good); box-shadow:0 0 0 3px rgba(111,207,151,0.18); flex-shrink:0; }
  #dash-view-overview .vo-tl-dot.is-upcoming{ background: var(--gold); box-shadow:0 0 0 3px rgba(181,86,44,0.18); }
  #dash-view-overview .vo-tl-connector{ width:1px; flex:1; min-height:14px; background: rgba(43,38,34,0.08); margin-top:6px; }
  #dash-view-overview .vo-tl-item:last-child .vo-tl-connector{ display:none; }
  #dash-view-overview .vo-tl-card{ flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:18px; background: var(--white); border:1px solid rgba(43,38,34,0.07); border-radius:18px; box-shadow: var(--dash-card-shadow); padding:15px 18px; cursor:pointer; transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, background .28s ease; }
  #dash-view-overview .vo-tl-card:hover{ transform: translateY(-5px); box-shadow: 0 18px 38px rgba(59,130,196,0.2), 0 32px 62px rgba(59,130,196,0.14); border-color: rgba(59,130,196,0.45); background: #EEF6FF; }
  #dash-view-overview .vo-tl-card:hover .vo-tl-title{ color: #3B82C4; }
  #dash-view-overview .vo-tl-left{ flex:1; min-width:0; }
  #dash-view-overview .vo-tl-top{ display:flex; align-items:center; gap:10px; margin-bottom:7px; }
  #dash-view-overview .vo-tl-date{font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
  #dash-view-overview .vo-tl-badge{font-family: var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:4px 10px; border-radius:20px; flex-shrink:0; white-space:nowrap; }
  #dash-view-overview .vo-tl-badge.is-completed{ background: var(--dash-good-bg); color: var(--dash-good); }
  #dash-view-overview .vo-tl-badge.is-additional{ background: var(--dash-good-bg); color: var(--dash-good); }
  #dash-view-overview .vo-tl-badge.is-ondemand{ background: var(--dash-good-bg); color: var(--dash-good); }
  #dash-view-overview .vo-tl-badge.is-upcoming{ background: rgba(181,86,44,0.14); color: var(--gold-dark); }
  #dash-view-overview .vo-tl-badge.is-report{ background:#EAF2FA; color:#3B82C4; }
  #dash-view-overview .vo-tl-title{font-family: var(--font-body); font-weight:600; font-size: var(--fs-body); color: var(--text-dark); margin-bottom:8px; transition: color .25s ease; }
  #dash-view-overview .vo-tl-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:0; }
  #dash-view-overview .vo-tl-meta-item{ display:flex; align-items:center; gap:5px; font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); }
  #dash-view-overview .vo-tl-meta-item svg{ width:13px; height:13px; flex-shrink:0; color: var(--gold-dark); }
  #dash-view-overview .vo-thumb-row{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
  #dash-view-overview .vo-thumb{ width:48px; height:48px; border-radius:9px; object-fit:cover; border:1px solid rgba(43,38,34,0.08); transition: transform .25s ease, box-shadow .25s ease; }
  #dash-view-overview .vo-tl-card:hover .vo-thumb{ transform: scale(1.04); box-shadow: 0 4px 10px rgba(43,38,34,0.12); }
  #dash-view-overview .vo-thumb-video{ width:48px; height:48px; border-radius:9px; position:relative; overflow:hidden; border:1px solid rgba(43,38,34,0.08); transition: transform .25s ease, box-shadow .25s ease; }
  #dash-view-overview .vo-tl-card:hover .vo-thumb-video{ transform: scale(1.04); box-shadow: 0 4px 10px rgba(43,38,34,0.12); }
  #dash-view-overview .vo-thumb-video img{ width:100%; height:100%; object-fit:cover; }
  #dash-view-overview .vo-thumb-video{ background:#2B2622; }
  #dash-view-overview .vo-thumb-video::after{ content:''; position:absolute; inset:0; background:rgba(43,38,34,.28); pointer-events:none; }
  #dash-view-overview .vo-thumb-video svg{ z-index:1; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:16px; height:16px; color:#fff; }
  #dash-view-overview .vo-thumb-doc{ width:48px; height:48px; border-radius:9px; background: var(--cream); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform .25s ease, box-shadow .25s ease; }
  #dash-view-overview .vo-tl-card:hover .vo-thumb-doc{ transform: scale(1.04); box-shadow: 0 4px 10px rgba(43,38,34,0.12); }
  #dash-view-overview .vo-thumb-doc svg{ width:18px; height:18px; color: var(--gold-dark); }
  @media (max-width: 640px){
    #dash-view-overview .vo-tl-card{ flex-wrap:wrap; }
    #dash-view-overview .vo-thumb-row{ width:100%; justify-content:flex-start; margin-top:4px; }
  }


  #dash-view-overview .vo-alert-row{ display:flex; gap:12px; padding:11px 0; border-bottom:1px dashed rgba(43,38,34,0.09); }
  #dash-view-overview .vo-alert-row:last-child{ border-bottom:none; }
  #dash-view-overview .vo-alert-icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #dash-view-overview .vo-alert-icon svg{ width:15px; height:15px; }
  #dash-view-overview .vo-alert-title{font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--text-dark); }
  #dash-view-overview .vo-alert-meta{font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-top:2px; }
  #dash-view-overview .vo-alert-status{font-family: var(--font-mono); margin-left:auto; font-size: var(--fs-caption); font-weight:700; padding:3px 8px; border-radius:20px; flex-shrink:0; height:fit-content; }
  #dash-view-overview .vo-alert-clear{ background: var(--dash-good-bg); color: var(--dash-good); }
  #dash-view-overview .vo-alert-watch{ background: var(--dash-high-bg); color: var(--dash-high); }
  #dash-view-overview .vo-empty-note{font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); padding:6px 0; }

  #dash-view-overview .vo-doc-row{ display:flex; align-items:center; gap:12px; padding:11px 12px; margin:0 -12px; border-radius:10px; transition: background .15s ease; }
  #dash-view-overview .vo-doc-row:hover{ background: var(--off-white); }
  #dash-view-overview .vo-doc-icon{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background: var(--cream); color: var(--gold-dark); }
  #dash-view-overview .vo-doc-icon svg{ width:15px; height:15px; }
  #dash-view-overview .vo-doc-name{font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--text-dark); }
  #dash-view-overview .vo-doc-meta{font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-top:2px; }
  #dash-view-overview .vo-doc-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
  #dash-view-overview .vo-doc-actions a{font-family: var(--font-body); font-size: var(--fs-caption); color: var(--gold-dark); font-weight:600; }
  #dash-view-overview .vo-doc-actions svg{ width:15px; height:15px; color: var(--text-muted); cursor:pointer; }

  #dash-view-overview .vo-cal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  #dash-view-overview .vo-cal-header span{ font-family: var(--font-body); font-weight:600; font-size: var(--fs-body); color: var(--text-dark); }
  #dash-view-overview .vo-cal-nav{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; color: var(--navy); background: var(--white); border:1px solid rgba(43,38,34,0.08); box-shadow: 0 2px 6px rgba(43,38,34,0.08); cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; user-select:none; }
  #dash-view-overview .vo-cal-nav:hover{ background: var(--cream); color: var(--gold-dark); border-color: rgba(181,86,44,0.3); box-shadow: 0 4px 12px rgba(43,38,34,0.12); transform: translateY(-1px); }
  #dash-view-overview .vo-cal-nav:active{ transform: translateY(0) scale(0.94); }
  #dash-view-overview .vo-cal-nav svg{ width:14px; height:14px; }
  #dash-view-overview .vo-cal-grid{ transition: opacity .26s ease, transform .26s ease; }
  #dash-view-overview #voCalMonthLabel{ transition: opacity .2s ease; }
  #dash-view-overview .vo-cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; text-align:center; }
  #dash-view-overview .vo-cal-grid .vo-dow{font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); font-weight:600; padding-bottom:5px; }
  #dash-view-overview .vo-cal-day{font-family: var(--dash-metric-font-family); font-size: var(--fs-caption); font-weight: var(--dash-metric-font-weight); font-variant-numeric: var(--dash-metric-font-variant); font-feature-settings: var(--dash-metric-font-feature); letter-spacing: var(--dash-metric-letter-spacing); padding:6px 0; border-radius:8px; position:relative; }
  #dash-view-overview .vo-cal-day.vo-blank{ visibility:hidden; }
  #dash-view-overview .vo-cal-day.vo-today{ background: var(--navy); color:#fff; font-weight: var(--dash-metric-font-weight); }
  #dash-view-overview .vo-cal-day.vo-visit{ background: var(--cream); color: var(--gold-dark); font-weight: var(--dash-metric-font-weight); cursor:pointer; transition: transform .2s ease, box-shadow .2s ease; }
  #dash-view-overview .vo-cal-day.vo-completed{ background: var(--dash-good-bg); color: var(--dash-good); font-weight: var(--dash-metric-font-weight); cursor:pointer; transition: transform .2s ease, box-shadow .2s ease; }
  #dash-view-overview .vo-cal-day.vo-completed:hover,
  #dash-view-overview .vo-cal-day.vo-visit:hover{ transform: translateY(-2px) scale(1.08); box-shadow: 0 6px 14px rgba(43,38,34,0.14); z-index:1; }
  /* Today's cell only stays black/navy when there's no visit on it — a
     visit's own color (green/gold) always takes priority over the plain
     "today" marker, so today's number reads the same way any other day
     with a visit would. */
  #dash-view-overview .vo-cal-day.vo-today.vo-completed{ background: var(--dash-good-bg); color: var(--dash-good); }
  #dash-view-overview .vo-cal-day.vo-today.vo-visit{ background: var(--cream); color: var(--gold-dark); }
  #dash-view-overview .vo-cal-legend{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(43,38,34,0.07); }
  #dash-view-overview .vo-cal-legend-item{ font-family: var(--font-body); font-size: var(--fs-caption); font-weight:600; }
  #dash-view-overview .vo-cal-legend-item--green{ color: var(--dash-good); }
  #dash-view-overview .vo-cal-legend-item--gold{ color: var(--gold-dark); }
  #dash-view-overview .vo-next-visit-strip{ margin-top:14px; padding:12px; border-radius:10px; background: var(--cream); border:1px solid var(--border-gold); display:flex; flex-direction:column; gap:8px; }
  #dash-view-overview .vo-next-visit-strip__eyebrow{font-family: var(--font-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color: var(--gold-dark); font-weight:700; }
  #dash-view-overview .vo-next-visit-strip__row{ display:flex; justify-content:space-between; align-items:center; }
  #dash-view-overview .vo-next-visit-strip .vo-d{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--gold-dark); }
  #dash-view-overview .vo-next-visit-strip .vo-t{font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-dark); opacity:.85; }
  #dash-view-overview .vo-next-visit-strip .vo-m{font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-top:2px; }
  #dash-view-overview .vo-countdown-pill{ background:#fff; color: var(--gold-dark); font-size: var(--fs-caption); font-weight:600; padding:5px 10px; border-radius:20px; font-family: var(--font-mono); border:1px solid var(--border-gold); }

  #dash-view-overview .vo-rm-card{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  #dash-view-overview .vo-rm-photo{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--cream); }
  #dash-view-overview .vo-rm-name{font-family: var(--font-body); font-weight:700; font-size: var(--fs-body); color: var(--navy); }
  #dash-view-overview .vo-rm-role{font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); }
  #dash-view-overview .vo-rm-online{ display:flex; align-items:center; gap:5px; font-size: var(--fs-caption); color: var(--dash-good); margin-top:2px; font-family: var(--font-body); }
  #dash-view-overview .vo-rm-online .vo-d{ width:6px; height:6px; border-radius:50%; background: var(--dash-good); }
  #dash-view-overview .vo-rm-actions{ display:flex; gap:8px; }
  #dash-view-overview .vo-rm-actions .vo-btn{ flex:1; font-size: var(--fs-caption); padding:9px; display:flex; align-items:center; justify-content:center; gap:6px; }
  #dash-view-overview .vo-rm-actions .vo-btn svg{ width:14px; height:14px; }

  #dash-view-overview .vo-tid-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(43,38,34,0.07); }
  #dash-view-overview .vo-tid-row:last-child{ border-bottom:none; }
  #dash-view-overview .vo-tid-l{font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); }
  #dash-view-overview .vo-tid-v{font-family: var(--font-body); font-size: var(--fs-caption); font-weight:600; color: var(--text-dark); }
  #dash-view-overview .vo-tid-tag{font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:700; padding:3px 8px; border-radius:20px; }

  #dash-view-overview .vo-feed-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed rgba(43,38,34,0.09); }
  #dash-view-overview .vo-feed-item:last-child{ border-bottom:none; }
  #dash-view-overview .vo-feed-dot{ width:7px; height:7px; border-radius:50%; margin-top:5px; flex-shrink:0; }
  #dash-view-overview .vo-feed-text{font-family: var(--font-body); font-size: var(--fs-caption); line-height:1.4; color: var(--text-dark); }
  #dash-view-overview .vo-feed-time{font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); margin-top:2px; }

  @keyframes voKenBurns{ from{ transform:scale(1.06); } to{ transform:scale(1.14); } }
  @keyframes voRadiate{ 0%{ box-shadow:0 0 0 0 rgba(127,217,155,0.55);} 70%{ box-shadow:0 0 0 8px rgba(127,217,155,0);} 100%{ box-shadow:0 0 0 0 rgba(127,217,155,0);} }
  @keyframes voPulseDot{ 0%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.3); opacity:.6;} 100%{ transform:scale(1); opacity:1;} }

  /* ---- Visit detail modal ---- */
  #voVisitModal{
    position:fixed; inset:0; background: rgba(43,38,34,0); display:none; align-items:center; justify-content:center; z-index:10500; padding:30px;
    opacity:0; transition: background .3s ease, opacity .3s ease;
  }
  #voVisitModal.is-visible{ display:flex; }
  #voVisitModal.is-open{ background: rgba(43,38,34,0.55); opacity:1; }
  #voVisitModal .vo-modal-box{
    background:#fff; border-radius:18px; width:100%; max-width:740px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(43,38,34,0.25);
    transform: translateY(18px) scale(.96); opacity:0;
    transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .28s ease;
  }
  #voVisitModal.is-open .vo-modal-box{ transform: translateY(0) scale(1); opacity:1; }
  #voVisitModal .vo-modal-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid rgba(43,38,34,0.08); position:sticky; top:0; background:#fff; border-radius:18px 18px 0 0; }
  #voVisitModal .vo-modal-back{ display:flex; align-items:center; gap:8px; font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--text-muted); cursor:pointer; background:none; border:none; }
  #voVisitModal .vo-modal-back svg{ width:15px; height:15px; }
  #voVisitModal .vo-modal-close{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(43,38,34,0.1); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--text-dark); }
  #voVisitModal .vo-modal-close svg{ width:14px; height:14px; }
  #voVisitModal .vo-modal-body{ padding:20px 24px 24px; }
  #voVisitModal .vo-modal-date-badge{font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--gold-dark); font-weight:700; margin-bottom:4px; letter-spacing:0.04em; }
  #voVisitModal .vo-modal-title{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; margin-bottom:18px; color: var(--navy); }
  /* The write-up sits directly under the title. Pulled up against the title's
     own bottom margin so the two read as one block, with the section spacing
     restored below it. */
  #voVisitModal .vo-modal-notes{
    font-family: var(--font-body); font-size: var(--fs-body); line-height:1.6;
    color: var(--text-muted); margin:-10px 0 18px; max-width:62ch; white-space:pre-line;
  }
  #voVisitModal .vo-modal-next{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); padding:12px 14px; background: var(--cream); border-radius:10px; border:1px solid var(--border-gold); }
  #voVisitModal .vo-modal-next strong{ color: var(--navy); font-weight:600; }
  #voVisitModal .vo-modal-section{ margin-bottom:20px; }
  #voVisitModal .vo-modal-section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  #voVisitModal .vo-modal-section-head span{ display:flex; align-items:center; gap:7px; font-family: var(--font-body); font-size: var(--fs-caption); font-weight:600; color: var(--text-muted); }
  #voVisitModal .vo-modal-section-head span svg{ width:15px; height:15px; color: var(--gold-dark); }
  #voVisitModal .vo-modal-dl{ display:flex; align-items:center; gap:6px; font-family: var(--font-body); font-size: var(--fs-caption); font-weight:600; color: var(--gold-dark); background: var(--cream); border:none; padding:6px 12px; border-radius:20px; cursor:pointer; }
  #voVisitModal .vo-modal-dl svg{ width:13px; height:13px; }
  #voVisitModal .vo-modal-thumbs{ display:grid; grid-template-columns: repeat(5,1fr); gap:8px; }
  #voVisitModal .vo-modal-thumbs img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid rgba(43,38,34,0.08); }
  #voVisitModal .vo-modal-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background: var(--off-white); }
  #voVisitModal .vo-modal-video img,
  #voVisitModal .vo-modal-video video{ width:100%; height:100%; object-fit:cover; display:block; }
  #dash-view-overview .vo-thumb-video video{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
  .mg-item video.mg-item__img{ pointer-events:none; background:#2B2622; }
  #voVisitModal .vo-modal-video svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; color: var(--navy); }
  /* Several videos on one visit: the 16:9 frame moves onto each item and the
     wrapper becomes a plain stack, so nothing is cropped or hidden. */
  #voVisitModal .vo-modal-video.is-multi{ aspect-ratio:auto; overflow:visible; background:none; display:flex; flex-direction:column; gap:12px; }
  #voVisitModal .vo-vid-item{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background: var(--off-white); }
  #voVisitModal .vo-vid-item img,
  #voVisitModal .vo-vid-item video{ width:100%; height:100%; object-fit:cover; display:block; }
  #voVisitModal .vo-vid-label{ position:absolute; left:10px; top:10px; padding:3px 9px; border-radius:999px; background:rgba(43,38,34,0.72); color:#fff; font-size:11px; font-weight:600; letter-spacing:0.02em; pointer-events:none; }
  #voVisitModal .vo-modal-video .vo-play-circle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%; background: rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; }
  #voVisitModal .vo-modal-empty{ padding:18px; text-align:center; font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); background: var(--off-white); border-radius:12px; border:1px dashed rgba(43,38,34,0.1); }
  #voVisitModal .vo-modal-report{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:12px; background: var(--dash-good-bg); }
  #voVisitModal .vo-modal-report svg{ width:18px; height:18px; color: var(--dash-good); }
  #voVisitModal .vo-modal-report .vo-name{ font-family: var(--font-body); font-weight:600; font-size: var(--fs-body); color: var(--text-dark); }
  #voVisitModal .vo-modal-report .vo-meta{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); }

  /* ============================================================
     CALENDAR PAGE (dedicated "Calendar" nav view)
     Prefix: vcal-  |  Blue accent used for "Today": #2F6FA8
  ============================================================ */
  #dash-view-calendar .dvh-header{ margin-bottom: 22px; }
  #dash-view-calendar{ --vcal-blue: #2F6FA8; --vcal-blue-bg: rgba(47,111,168,0.10); }

  .vcal-layout{ width:95%; max-width:1280px; margin:0 auto; }

  /* Legend */
  .vcal-legend{ display:flex; flex-wrap:wrap; gap:18px; margin: 2px 0 18px; }
  .vcal-legend-item{ display:flex; align-items:center; gap:8px; font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); font-weight:600; }
  .vcal-legend-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; box-shadow: 0 0 0 3px rgba(0,0,0,0.03); }

  /* Calendar card */
  .vcal-card{ padding: 34px 36px 38px; position:relative; min-height:720px; }
  .vcal-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 26px; }
  .vcal-month-label{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight:600; color: var(--navy); min-width:260px; text-align:center; letter-spacing:0.01em; }
  .vcal-nav-btn{
    display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
    color: var(--navy); background:#fff; border:1px solid rgba(43,38,34,0.1); box-shadow: 0 2px 6px rgba(43,38,34,0.06);
    cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; user-select:none;
  }
  .vcal-nav-btn:hover{ background: var(--cream); color: var(--gold-dark); border-color: rgba(181,86,44,0.3); box-shadow: 0 6px 16px rgba(43,38,34,0.12); transform: translateY(-1px); }
  .vcal-nav-btn:active{ transform: translateY(0) scale(0.94); }
  .vcal-nav-btn svg{ width:18px; height:18px; }
  .vcal-today-btn{
    font-family: var(--font-body); font-size: var(--fs-caption); font-weight:600; color: var(--gold-dark);
    background: var(--cream); border:1px solid var(--border-gold); padding:9px 18px; border-radius:20px; cursor:pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .vcal-today-btn:hover{ background: #fff; transform: translateY(-1px); }

  .vcal-grid-wrap{ overflow:hidden; }
  .vcal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:12px; transition: opacity .28s ease, transform .28s ease; }
  .vcal-dow{ font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; text-align:center; padding-bottom:14px; }
  .vcal-day{
    position:relative; min-height:112px; border-radius: 14px; background: var(--off-white);
    border:1px solid rgba(43,38,34,0.06); padding:14px 14px 30px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display:flex; align-items:flex-start;
  }
  .vcal-day.is-blank{ visibility:hidden; }
  .vcal-day .vcal-day-num{ font-family: var(--dash-metric-font-family); font-size: 20px; font-weight: var(--dash-metric-font-weight); font-variant-numeric: var(--dash-metric-font-variant); font-feature-settings: var(--dash-metric-font-feature); letter-spacing: var(--dash-metric-letter-spacing); color: var(--text-dark); }
  .vcal-day.has-visit{ cursor:pointer; }
  .vcal-day.has-visit:hover{ transform: translateY(-3px); box-shadow: 0 10px 22px rgba(43,38,34,0.12); z-index:2; border-color: rgba(181,86,44,0.35); }
  .vcal-day.is-completed{ background: var(--dash-good-bg); }
  .vcal-day.is-completed .vcal-day-num{ color: var(--dash-good); }
  .vcal-day.is-upcoming{ background: var(--dash-high-bg); }
  .vcal-day.is-upcoming .vcal-day-num{ color: var(--dash-high); }
  .vcal-day.is-today{ box-shadow: inset 0 0 0 2px var(--vcal-blue); }
  .vcal-day.is-today .vcal-day-num{ color: var(--vcal-blue); font-weight: var(--dash-metric-font-weight); }
  .vcal-day.is-today::before{
    content:'TODAY'; position:absolute; top:12px; right:12px; font-family: var(--font-mono); font-size:10px; font-weight:700;
    letter-spacing:0.09em; color: var(--vcal-blue);
  }
  .vcal-day-status{
    position:absolute; left:14px; bottom:12px; width:9px; height:9px; border-radius:50%; flex-shrink:0;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.6);
  }
  .vcal-day.is-completed .vcal-day-status{ background: var(--dash-good); }
  .vcal-day.is-upcoming .vcal-day-status{ background: var(--dash-high); }
  .vcal-day-label{
    position:absolute; left:30px; right:14px; bottom:9px; font-family: var(--font-body); font-size:var(--fs-caption); font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:2px 0;
  }
  .vcal-day.is-completed .vcal-day-label{ color: var(--dash-good); }
  .vcal-day.is-upcoming .vcal-day-label{ color: var(--dash-high); }
  @media (max-width: 640px){
    .vcal-day{ padding:8px 6px 24px; min-height:64px; }
    .vcal-day .vcal-day-num{ font-size: 15px; }
    .vcal-day-label{ display:none; }
    .vcal-day-status{ left:50%; transform:translateX(-50%); }
  }

  /* Floating date popover — replaces the old side details panel */
  .vcal-popover-backdrop{
    position:fixed; inset:0; z-index:39; background:transparent; display:none;
  }
  .vcal-popover-backdrop.is-open{ display:block; }
  .vcal-popover{
    position:absolute; z-index:40; width:340px; max-width: calc(100% - 24px);
    background:#fff; border-radius: var(--dash-radius-lg); border:1px solid rgba(43,38,34,0.08);
    box-shadow: 0 24px 56px rgba(43,38,34,0.20), 0 8px 22px rgba(43,38,34,0.10);
    padding: 24px 26px 26px; opacity:0; visibility:hidden; pointer-events:none;
    transform: translateY(8px) scale(0.98); transform-origin: top left;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .vcal-popover.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0) scale(1); }
  .vcal-popover::before{
    content:''; position:absolute; width:14px; height:14px; background:#fff; top:-8px; left: var(--vcal-caret-left, 32px);
    border-left:1px solid rgba(43,38,34,0.08); border-top:1px solid rgba(43,38,34,0.08); transform:rotate(45deg);
  }
  .vcal-popover.vcal-popover--flip::before{ top:auto; bottom:-8px; border-left:none; border-top:none; border-right:1px solid rgba(43,38,34,0.08); border-bottom:1px solid rgba(43,38,34,0.08); }
  .vcal-popover-close{
    position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color: var(--text-muted); cursor:pointer;
    background: var(--off-white); border:1px solid rgba(43,38,34,0.06); transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .vcal-popover-close:hover{ background:#fff; color: var(--navy); transform: rotate(90deg); }
  .vcal-popover-close svg{ width:13px; height:13px; }
  .vcal-panel-badge{ font-family: var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:5px 11px; border-radius:20px; display:inline-block; margin-bottom:12px; }
  .vcal-panel-badge.is-completed{ background: var(--dash-good-bg); color: var(--dash-good); }
  .vcal-panel-badge.is-upcoming{ background: var(--dash-high-bg); color: var(--dash-high); }
  .vcal-panel-title{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); margin-bottom:4px; padding-right:22px; }
  .vcal-panel-date{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); margin-bottom:16px; }
  .vcal-panel-row{ display:flex; align-items:flex-start; gap:10px; padding: 10px 0; border-top:1px solid rgba(43,38,34,0.07); }
  .vcal-panel-row:first-of-type{ border-top:none; }
  .vcal-panel-row svg{ width:16px; height:16px; color: var(--gold-dark); flex-shrink:0; margin-top:2px; }
  .vcal-panel-row .vcal-l{ font-family: var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-muted); display:block; margin-bottom:2px; }
  .vcal-panel-row .vcal-v{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-dark); font-weight:600; }
  .vcal-panel-notes{ font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-muted); line-height:1.6; background: var(--off-white); border-radius:12px; padding:13px 15px; border:1px solid rgba(43,38,34,0.06); margin-top:14px; }
  .vcal-panel-notes[hidden], .vcal-media-row[hidden]{ display:none !important; }
  #dash-view-overview .vo-tl-card.is-flash{ animation: voFlash 2.4s ease; }
  @keyframes voFlash{ 0%,100%{ box-shadow:var(--dash-card-shadow); } 20%,70%{ box-shadow:0 0 0 3px rgba(181,86,44,.55), 0 14px 34px rgba(181,86,44,.25); } }
  .vcal-media-row{ display:flex; align-items:center; gap:8px; margin:12px 0 4px; flex-wrap:wrap; }
  .vcal-media-thumb{ position:relative; width:52px; height:52px; border-radius:10px; overflow:hidden; border:1px solid rgba(43,38,34,0.08); background:#2B2622; flex:0 0 52px; }
  .vcal-media-thumb img, .vcal-media-thumb video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
  .vcal-media-thumb--video::after{ content:''; position:absolute; inset:0; background:rgba(43,38,34,.28); }
  .vcal-media-thumb--video svg{ position:absolute; top:50%; left:50%; width:18px; height:18px; transform:translate(-50%,-50%); color:#fff; z-index:1; }
  .vcal-media-more{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(43,38,34,.55); color:#fff; font-weight:600; font-size:13px; }
  .vcal-media-report{ display:inline-flex; align-items:center; gap:6px; height:52px; padding:0 14px; border-radius:10px; border:1px solid rgba(181,86,44,0.35); background:var(--cream, #f4efe6); color:var(--gold-dark, #8a6d2b); font-weight:600; font-size:13px; cursor:pointer; font-family:var(--font-body); }
  .vcal-media-report svg{ width:18px; height:18px; }
  .vcal-media-report:hover{ background:#fff; }
  .vcal-popover-btn{
    width:100%; margin-top:16px; font-family: var(--font-body); font-size: var(--fs-caption); font-weight:700;
    letter-spacing:0.02em; color:#fff; background: var(--gold); border:none; border-radius:24px; padding:11px 18px;
    cursor:pointer; transition: background .2s ease, transform .2s ease;
  }
  .vcal-popover-btn:hover{ background: var(--gold-light); transform: translateY(-1px); }
  .vcal-popover-btn.is-pending{ background: var(--off-white); color: var(--text-muted); cursor:default; }
  .vcal-popover-btn.is-pending:hover{ transform:none; }

  @media (max-width: 640px){
    .vcal-popover{ width: calc(100% - 24px); }
  }

  /* ============================================================
     DASHBOARD TOUR — floating button + guided-tour modal
  ============================================================ */
  .dt-fab{
    position: fixed; right: 30px; bottom: 30px; z-index: 60;
    display:flex; align-items:center; gap:10px; padding: 14px 22px 14px 16px;
    background: var(--dash-navy-glow); color:#fff; border:1px solid rgba(181,86,44,0.4);
    border-radius: 40px; cursor:pointer; box-shadow: 0 12px 30px rgba(43,38,34,0.28), 0 0 0 1px rgba(181,86,44,0.1);
    font-family: var(--font-body); font-size: var(--fs-caption); font-weight:700; letter-spacing:0.02em;
    transition: transform .25s ease, box-shadow .25s ease; opacity:0; pointer-events:none;
  }
  .dt-fab.is-visible{ opacity:1; pointer-events:auto; animation: dtFabIn .5s ease both; }
  .dt-fab:hover{ transform: translateY(-3px); box-shadow: 0 18px 38px rgba(43,38,34,0.34), 0 0 0 1px rgba(181,86,44,0.25); }
  .dt-fab__icon{
    width:32px; height:32px; border-radius:50%; background: rgba(181,86,44,0.22); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .dt-fab__icon svg{ width:16px; height:16px; color: var(--gold-light); }
  @keyframes dtFabIn{ from{ opacity:0; transform: translateY(16px) scale(.9); } to{ opacity:1; transform: translateY(0) scale(1); } }
  @media (max-width: 640px){
    .dt-fab{ right:16px; bottom:16px; padding:14px; border-radius:50%; }
    .dt-fab__label{ display:none; }
  }

  .dt-modal-backdrop{
    position: fixed; inset:0; background: rgba(30,26,23,0.62); backdrop-filter: blur(3px); z-index: 200;
    opacity:0; pointer-events:none; transition: opacity .3s ease;
  }
  .dt-modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
  .dt-modal{
    position: fixed; top:50%; left:50%; transform: translate(-50%,-50%) scale(.94); width: min(560px, 92vw);
    max-height: 86vh; background:#fff; border-radius: 22px; z-index: 201; overflow:hidden;
    box-shadow: 0 30px 80px rgba(43,38,34,0.35); opacity:0; pointer-events:none;
    transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column;
  }
  .dt-modal.is-open{ opacity:1; pointer-events:auto; transform: translate(-50%,-50%) scale(1); }
  .dt-modal__head{
    background: var(--dash-navy-glow); color:#fff; padding: 22px 26px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .dt-modal__head h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; }
  .dt-modal__head span{ display:block; font-family: var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color: var(--gold-light); margin-bottom:4px; }
  .dt-modal__close{
    width:32px; height:32px; border-radius:50%; background: rgba(255,255,255,0.12); border:none; color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition: background .2s ease;
  }
  .dt-modal__close:hover{ background: rgba(255,255,255,0.22); }
  .dt-modal__close svg{ width:14px; height:14px; }
  .dt-modal__body{ padding: 28px 26px 10px; overflow-y:auto; flex:1; }
  .dt-step{ display:none; animation: dashFadeIn .4s ease both; }
  .dt-step.is-active{ display:block; }
  .dt-step__icon{
    width:56px; height:56px; border-radius:16px; background: var(--cream); display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .dt-step__icon svg{ width:26px; height:26px; color: var(--gold-dark); }
  .dt-step h4{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight:600; color: var(--navy); margin-bottom:10px; }
  .dt-step p{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height:1.65; }
  .dt-modal__foot{ padding: 18px 26px 26px; flex-shrink:0; }
  .dt-progress{ display:flex; gap:6px; margin-bottom:18px; }
  .dt-progress-dot{ height:5px; flex:1; border-radius:6px; background: rgba(43,38,34,0.09); cursor:pointer; transition: background .25s ease; }
  .dt-progress-dot.is-active{ background: var(--gold); }
  .dt-progress-dot.is-done{ background: rgba(181,86,44,0.45); }
  .dt-modal__nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .dt-btn{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; padding:11px 22px; border-radius:30px; border:none; cursor:pointer; transition: all .2s ease; }
  .dt-btn-ghost{ background: transparent; color: var(--text-muted); }
  .dt-btn-ghost:hover{ color: var(--text-dark); }
  .dt-btn-primary{ background: var(--gold); color:#fff; display:flex; align-items:center; gap:8px; }
  .dt-btn-primary:hover{ background: var(--gold-dark); transform: translateY(-2px); }
  .dt-btn-primary svg{ width:14px; height:14px; }
  .dt-step__label{ font-family: var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color: var(--gold-dark); font-weight:700; margin-bottom:8px; display:block; }
  @media (max-width: 640px){
    .dt-modal{ width: 94vw; max-height: 90vh; }
    .dt-modal__body{ padding: 22px 20px 6px; }
    .dt-modal__foot{ padding: 14px 20px 22px; }
  }

  /* ============================================================
     DESIGN-SYSTEM ALIGNMENT — brings dashboard typography in line
     with the public site so the dashboard reads as an extension of
     it rather than a separate product. Only typeface weight,
     tracking and line-height are touched here — no font-size,
     color, markup, id, class or script changes — so nothing above
     needs to change and no existing behavior is affected.

     - Page-level headings     → same treatment as the Homepage
       "Complete Property Care" (Services) section heading
       (.services-title): light serif display face, tight tracking,
       generous line-height.
     - Card/component headings → same treatment as that section's
       individual service card titles (.service-name): serif
       display face, regular weight, slightly tighter line-height.
     - KPI values, scores and stat numbers → same treatment as the
       Homepage Hero stat numbers (.stat-num): serif display face
       with tabular/lining numerals and tightened tracking, so every
       number in the dashboard reads consistently with the numbers
       on the homepage.
  ============================================================ */

  /* Page-level headings (mirrors .services-title) */
  .dash-welcome h1,
  .ov-topbar h1,
  .dvh-header h1,
  .dash-empty-state h2,
  .ov-hero-compact__body h2,
  .hs-hero__body h2,
  .rf-hero__inner h2,
  .sub-hero__plan,
  #dash-view-overview .vo-header h1,
  #dash-view-overview .ov3-header__title,
  #dash-view-overview .ov3-hero__title,
  #dash-view-overview .ov2-property-card__status h2{
    font-weight: 300;
    letter-spacing: -0.015em;
    line-height: 1.28;
  }

  /* Card / component headings (mirrors .service-name) */
  .dash-dropdown__head h4,
  .dash-card__head h3,
  .dash-modal__head h3,
  .rm-report-card__head h3,
  .ra-hotline__body h4,
  .ra-form-card h3,
  .ra-success h4,
  .pm-profile-card__name,
  .sub-plans-teaser__text h5,
  #voVisitModal .vo-modal-title,
  #dash-view-overview .vo-panel h3,
  #dash-view-overview .vo-hero-content h2,
  #dash-view-overview .ov2-report-card__head h3,
  #dash-view-overview .ov2-activity-card > h3,
  #dash-view-overview .ov3-report-card__head h3,
  #dash-view-overview .ov3-card-head{
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.22;
  }

  /* KPI values, scores & stat numbers (mirrors .stat-num) */
  .dash-stat-card__value,
  .dash-donut-center-value,
  .ov-tile-vault__count,
  .hs-card__score,
  .pm-stat-tile__value,
  .sub-hero__days,
  #dash-view-overview .ov2-metric-card__value,
  #dash-view-overview .ov2-health-card__score,
  #dash-view-overview .ov3-hero__stat-val,
  #dash-view-overview .ov3-ring-num b,
  #dash-view-overview .vo-stat-card p.vo-value,
  #dash-view-overview .vo-next-visit-strip .vo-d,
  .hs-hero__score .num{
    font-weight: 600;
    font-variant-numeric: proportional-nums lining-nums;
    font-feature-settings: 'pnum' 1, 'lnum' 1, 'kern' 1;
    letter-spacing: -0.01em;
  }

  /* Google's address-suggestion dropdown is appended to <body> with
     z-index 1000, which put it behind the onboarding modal (10000) — the
     suggestions were fetched but nobody could see or click them. */
  .pac-container {
    z-index: 10050 !important;
    border-radius: 10px;
    margin-top: 4px;
    font-family: inherit;
  }

  /* ============================================================
     ONBOARDING / LOGIN MODAL (merged from login_page_connector.html)
     Everything below is scoped under #onboarding-modal-overlay so it
     cannot collide with the rest of the site's styles or class names.
  ============================================================ */
  #onboarding-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.55;
    /* Local design-token overrides, matched 1:1 to the original
       onboarding connector so its look stays pixel-faithful even if
       the host site's tokens ever drift. */
    --text-soft: #5B6577;
    --border-soft: #E5E0D3;
    --border-gold: rgba(181,86,44,0.32);
    --shadow-card: 0 4px 24px rgba(43,38,34,0.08);
  }
  #onboarding-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
  }
#onboarding-modal-overlay a {color:inherit;text-decoration:none;}
  #onboarding-modal-overlay button {font-family:var(--font-body);}
  #onboarding-modal-overlay .mono-num {font-family:var(--font-mono);font-variant-numeric:proportional-nums lining-nums;}
  /* ============ PORTAL SHELL ============ */

  #onboarding-modal-overlay .portal {display:flex;height:100vh;width:100%;overflow:hidden;}
  /* ============ LEFT: VISUAL PANEL ============ */

  #onboarding-modal-overlay .portal-visual {position:relative;width:50%;height:100vh;flex-shrink:0;overflow:hidden;background:var(--navy);}
  #onboarding-modal-overlay .bg-layer {position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.15s ease;}
  #onboarding-modal-overlay .bg-layer.visible {opacity:1;}
  #onboarding-modal-overlay .visual-scrim {position:absolute;inset:0;z-index:2;
    background:linear-gradient(180deg, rgba(43,38,34,0.78) 0%, rgba(43,38,34,0.28) 32%, rgba(43,38,34,0.18) 55%, rgba(43,38,34,0.92) 100%);}
  #onboarding-modal-overlay .visual-brand {position:absolute;top:40px;left:48px;z-index:3;}
  #onboarding-modal-overlay .visual-brand .b-scene {display:block;width:222px;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,0.35));}
  #onboarding-modal-overlay .visual-brand .sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  #onboarding-modal-overlay .visual-brand .b-name {font-family:var(--font-display);font-size:25px;font-weight:500;color:#fff;letter-spacing:0.02em;}
  #onboarding-modal-overlay .visual-brand .b-name em {font-style:normal;color:var(--gold-light);}
  #onboarding-modal-overlay .visual-brand .b-tag {font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold-light);margin-top:5px;font-variant-numeric:proportional-nums lining-nums;}
  #onboarding-modal-overlay .visual-caption {position:absolute;left:48px;right:56px;bottom:64px;z-index:3;transition:opacity 0.28s ease, transform 0.28s ease;}
  #onboarding-modal-overlay .visual-caption.fade {opacity:0;transform:translateY(10px);}
  #onboarding-modal-overlay .visual-eyebrow {font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:0.26em;text-transform:uppercase;color:var(--gold-light);margin-bottom:16px;font-variant-numeric:proportional-nums lining-nums;}
  #onboarding-modal-overlay .visual-title {font-family:var(--font-display);font-weight:500;font-size:36px;line-height:1.16;color:#fff;margin-bottom:14px;max-width:430px;}
  #onboarding-modal-overlay .visual-sub {font-size:14px;line-height:1.65;color:rgba(255,255,255,0.8);max-width:390px;}
  /* ============ RIGHT: FORM PANEL ============ */

  #onboarding-modal-overlay .portal-form {width:50%;height:100vh;overflow-y:auto;background:var(--off-white);display:flex;flex-direction:column;}
  #onboarding-modal-overlay .form-topbar {display:flex;justify-content:flex-end;padding:26px 48px 0;}
  #onboarding-modal-overlay .btn-exit {display:flex;align-items:center;gap:7px;background:none;border:none;font-size:11.5px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;padding:9px 12px;border-radius:8px;transition:all 0.2s ease;}
  #onboarding-modal-overlay .btn-exit:hover {color:var(--navy);background:var(--cream);}
  #onboarding-modal-overlay .btn-exit i {font-size:12px;}
  #onboarding-modal-overlay .form-scroll {flex:1;display:flex;justify-content:center;padding:6px 48px 60px;}
  #onboarding-modal-overlay .form-inner {width:100%;max-width:460px;}
  /* Stepper */

  #onboarding-modal-overlay .stepper-wrap {margin-bottom:34px;}
  #onboarding-modal-overlay .stepper-row {display:flex;align-items:flex-start;}
  #onboarding-modal-overlay .step-node {flex:1;text-align:center;position:relative;}
  #onboarding-modal-overlay .step-node::before {content:'';position:absolute;top:13px;left:-50%;width:100%;height:1.5px;background:var(--border-soft);z-index:1;}
  #onboarding-modal-overlay .step-node:first-child::before {display:none;}
  #onboarding-modal-overlay .step-node.done::before {background:var(--gold);}
  #onboarding-modal-overlay .step-dot {width:26px;height:26px;border-radius:50%;background:#fff;border:1.5px solid var(--border-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 7px;font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--text-muted);position:relative;z-index:2;font-variant-numeric:proportional-nums lining-nums;}
  #onboarding-modal-overlay .step-node.active .step-dot {background:var(--navy);border-color:var(--navy);color:#fff;}
  #onboarding-modal-overlay .step-node.done .step-dot {background:var(--gold);border-color:var(--gold);color:#fff;}
  #onboarding-modal-overlay .step-node-label {font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;}
  #onboarding-modal-overlay .step-node.active .step-node-label,
  #onboarding-modal-overlay .step-node.done .step-node-label {color:var(--navy);}
  /* Panels */

  #onboarding-modal-overlay .step-panel {display:none;}
  #onboarding-modal-overlay .step-panel.show {display:block;animation:panelIn 0.45s ease forwards;}
  @keyframes panelIn {
  from {opacity:0;transform:translateY(14px);}
  to {opacity:1;transform:translateY(0);}
  }

  #onboarding-modal-overlay .step-eyebrow {font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:10px;font-variant-numeric:proportional-nums lining-nums;}
  #onboarding-modal-overlay .step-title {font-family:var(--font-display);font-weight:500;font-size:29px;color:var(--navy);margin-bottom:18px;line-height:1.2;}
  #onboarding-modal-overlay .why-box {display:flex;gap:12px;background:#E3F3E3;border:1px solid #A9D8AC;border-radius:10px;padding:14px 16px;margin-bottom:28px;}
  #onboarding-modal-overlay .why-box p {font-size:12.6px;line-height:1.6;color:var(--text-soft);}
  /* Kept as a no-op alias: the review step still carries this class, and the
     base .why-box is now this same green everywhere. */
  #onboarding-modal-overlay .why-box--green {background:#E3F3E3;border-color:#A9D8AC;}
  /* Fields */

  #onboarding-modal-overlay .field {margin-bottom:18px;}
  #onboarding-modal-overlay .field label {display:block;font-size:12px;font-weight:600;color:var(--text-soft);margin-bottom:7px;}
  #onboarding-modal-overlay .field label .opt {font-weight:400;color:var(--text-muted);}
  #onboarding-modal-overlay .field-icon-wrap {position:relative;}
  #onboarding-modal-overlay .field-icon-wrap>i {position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:14px;pointer-events:none;}
  #onboarding-modal-overlay .field-icon-wrap.top>i {top:16px;transform:none;}
  #onboarding-modal-overlay .field-icon-wrap #accPassword {padding-right:42px;}
  .pw-toggle {position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;}
  .pw-toggle:hover,.pw-toggle:focus-visible {color:var(--gold-dark);outline:none;}
  #onboarding-modal-overlay .field-icon-wrap>.pw-toggle>i {position:static;transform:none;color:inherit;pointer-events:none;}
  #onboarding-modal-overlay .field input,
  #onboarding-modal-overlay .field select,
  #onboarding-modal-overlay .field textarea {width:100%;border:1.5px solid var(--border-soft);border-radius:9px;padding:12px 14px;font-size:13.5px;font-family:var(--font-body);color:var(--text-dark);background:#fff;transition:border-color 0.15s ease, box-shadow 0.15s ease;}
  #onboarding-modal-overlay .field-icon-wrap input,
  #onboarding-modal-overlay .field-icon-wrap select {padding-left:40px;}
  #onboarding-modal-overlay .field-icon-wrap.top textarea {padding-left:40px;}
  #onboarding-modal-overlay .field input:focus,
  #onboarding-modal-overlay .field select:focus,
  #onboarding-modal-overlay .field textarea:focus {outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(181,86,44,0.14);}
  #onboarding-modal-overlay .field textarea {resize:vertical;min-height:76px;}
  #onboarding-modal-overlay .field-row {display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  #onboarding-modal-overlay .field-row>.field {min-width:0;}
  #onboarding-modal-overlay .field select:disabled {background:#f6f2ec;color:var(--text-muted);cursor:not-allowed;}
  #onboarding-modal-overlay .plot-size-wrap {display:flex;gap:10px;}
  #onboarding-modal-overlay .plot-size-wrap .field-icon-wrap {flex:1;min-width:0;}
  #onboarding-modal-overlay .plot-size-wrap select {width:130px;flex:0 0 130px;padding:12px 10px;}
  #onboarding-modal-overlay .hint {font-size:11.5px;color:var(--text-muted);margin-top:6px;line-height:1.5;}

  /* Login vs. signup mode — same step-1 markup, toggled by a class on the
     overlay so Login (email+password only) and Get Started (full 5-step
     wizard) can share one form without duplicating its wiring. */
  /* ---------- OTP VERIFICATION (wizard Account step) ---------- */
  #onboarding-modal-overlay .otp-block{
    background:#FAF8F4; border:1px solid rgba(181,86,44,0.28);
    border-radius:12px; padding:14px 16px 12px; margin-bottom:18px;
  }
  #onboarding-modal-overlay .otp-block.is-verified{
    background:#F1F8F2; border-color:rgba(46,125,50,0.32);
  }
  #onboarding-modal-overlay .otp-req{
    font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--gold-dark);
    background:rgba(181,86,44,0.14); padding:2px 7px; border-radius:20px; margin-left:6px;
  }
  #onboarding-modal-overlay .otp-actions,
  #onboarding-modal-overlay .otp-entry{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  #onboarding-modal-overlay .otp-entry{ margin-top:10px; }
  #onboarding-modal-overlay .otp-entry input{
    width:130px; padding:9px 12px; border:1.5px solid rgba(43,38,34,0.16); border-radius:8px;
    font-family:var(--font-mono); font-size:15px; letter-spacing:.22em; text-align:center;
  }
  #onboarding-modal-overlay .otp-entry input:focus{
    outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(181,86,44,0.15);
  }
  #onboarding-modal-overlay .otp-btn{
    padding:9px 15px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600;
    font-family:var(--font-body); border:1.5px solid rgba(43,38,34,0.16);
    background:#fff; color:var(--navy); transition:border-color .15s ease, background .15s ease, color .15s ease;
  }
  #onboarding-modal-overlay .otp-btn:hover:not(:disabled){ border-color:var(--gold); background:#fff; }
  #onboarding-modal-overlay .otp-btn:disabled{ opacity:.55; cursor:default; }
  #onboarding-modal-overlay .otp-btn--primary{ background:var(--navy); border-color:var(--navy); color:#fff; }
  /* The shared hover above whitens the background — without this the
     primary button's white label vanishes into it. */
  #onboarding-modal-overlay .otp-btn--primary:hover:not(:disabled){ color:#000; }
  #onboarding-modal-overlay .otp-btn--quiet{ border-color:transparent; color:var(--text-muted,#767676); }
  #onboarding-modal-overlay .otp-status{
    font-size:12.5px; line-height:1.5; margin:9px 0 0; color:var(--text-muted,#767676); min-height:1px;
  }
  #onboarding-modal-overlay .otp-status.is-error{ color:#c0392b; }
  #onboarding-modal-overlay .otp-status.is-ok{ color:#2E7D32; font-weight:600; }

  #onboarding-modal-overlay .login-only {display:none;}
  #onboarding-modal-overlay.is-login-mode .signup-only {display:none;}
  #onboarding-modal-overlay.is-login-mode .login-only {display:block;}
  #onboarding-modal-overlay.is-login-mode #accBtn .login-only {display:inline;}
  #onboarding-modal-overlay.is-login-mode #stepperWrap {display:none;}
  #onboarding-modal-overlay.is-login-mode .btn-exit {display:none;}
  /* Nothing left to save once a request is submitted — the success screens carry their own way out. */
  #onboarding-modal-overlay:has(.step-panel.show[data-step^="success"]) .btn-exit {display:none;}
  #onboarding-modal-overlay.is-login-mode .field-row {grid-template-columns:1fr;}
  #onboarding-modal-overlay .otp-row {display:flex;gap:9px;}
  #onboarding-modal-overlay .otp-row input {text-align:center;font-family:var(--font-mono);font-variant-numeric:proportional-nums lining-nums;font-size:18px;font-weight:500;width:46px;padding:11px 0;flex:none;}
  /* Intent list */

  #onboarding-modal-overlay .intent-list {display:flex;flex-direction:column;gap:12px;margin-bottom:6px;}
  #onboarding-modal-overlay .intent-card {display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--border-soft);border-radius:12px;padding:16px 18px;cursor:pointer;transition:all 0.2s ease;background:#fff;}
  #onboarding-modal-overlay .intent-card:hover {border-color:var(--gold-light);}
  #onboarding-modal-overlay .intent-card.selected {border-color:var(--gold);background:var(--cream);}
  #onboarding-modal-overlay .intent-icon {width:38px;height:38px;border-radius:9px;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold-dark);font-size:16px;transition:all 0.2s ease;}
  #onboarding-modal-overlay .intent-card.selected .intent-icon {background:var(--gold);color:#fff;}
  #onboarding-modal-overlay .intent-card h4 {font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--navy);margin-bottom:4px;}
  #onboarding-modal-overlay .intent-card p {font-size:12px;color:var(--text-muted);line-height:1.55;}
  /* Map */

  #onboarding-modal-overlay .map-box {position:relative;width:100%;height:168px;border-radius:12px;overflow:hidden;border:1.5px solid var(--border-soft);cursor:crosshair;background:#DCE3D8;margin-bottom:10px;}
  #onboarding-modal-overlay .map-box img {width:100%;height:100%;object-fit:cover;opacity:0.92;}
  #onboarding-modal-overlay .map-pin {position:absolute;width:26px;height:26px;transform:translate(-50%,-100%);display:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,0.35));}
  #onboarding-modal-overlay .map-hint-tag {position:absolute;bottom:10px;left:10px;background:rgba(43,38,34,0.85);color:#fff;font-size:11px;font-weight:600;padding:6px 12px;border-radius:20px;display:flex;align-items:center;gap:6px;}
  /* Property step on wide screens: the pin map fills the left panel. */
  #onboarding-modal-overlay .map-hint {display:none;}
  #onboarding-modal-overlay .portal.map-in-visual .map-label {display:none;}
  #onboarding-modal-overlay .portal.map-in-visual .map-hint {
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;margin-bottom:12px;
    background:var(--cream);border:1px solid var(--border-gold);border-radius:12px;
    font-size:14px;font-weight:600;color:var(--navy);
  }
  #onboarding-modal-overlay .map-hint i {
    flex-shrink:0;width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--gold);color:#fff;font-size:15px;
    animation:vlMapHintNudge 1.4s ease-in-out infinite;
  }
  /* The most important thing on the property step: pulled a little left,
     out of the form column toward the map it points at. */
  #onboarding-modal-overlay .portal.map-in-visual .map-hint {margin-left:-28px;box-shadow:0 6px 18px rgba(139,106,37,0.14);}
  #onboarding-modal-overlay .map-hint small {display:block;margin-top:3px;font-size:12px;font-weight:500;color:var(--text-soft);}
  #onboarding-modal-overlay .portal.map-in-visual .map-hint.is-missing {border-color:#c0392b;background:#FCEFEC;}
  #onboarding-modal-overlay .portal.map-in-visual .map-hint.is-set {border-color:rgba(63,107,79,0.35);background:#EDF5EF;}
  #onboarding-modal-overlay .map-hint.is-set i {background:#3F6B4F;animation:none;}
  #onboarding-modal-overlay .field .req {color:#c0392b;font-weight:700;}
  #onboarding-modal-overlay .field-icon-wrap.is-invalid input,
  #onboarding-modal-overlay .field-icon-wrap.is-invalid select {border-color:#c0392b;}
  #onboarding-modal-overlay .prop-error {color:#c0392b;font-size:13px;margin:0 0 12px;}
  @keyframes vlMapHintNudge { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-6px); } }
  @media (prefers-reduced-motion: reduce) { #onboarding-modal-overlay .map-hint i { animation:none; } }
  #onboarding-modal-overlay .portal.map-in-visual .portal-visual .map-box {
    position:absolute;inset:0;z-index:3;
    height:auto;margin:0;border:0;border-radius:0;
  }
  #onboarding-modal-overlay .portal.map-in-visual .portal-visual #mapCanvas {height:100% !important;border-radius:0 !important;}
  /* The photo's brand and caption would sit on top of the map, so hide them. */
  #onboarding-modal-overlay .portal.map-in-visual .visual-brand,
  #onboarding-modal-overlay .portal.map-in-visual .visual-caption,
  #onboarding-modal-overlay .portal.map-in-visual .visual-scrim {display:none;}
  #onboarding-modal-overlay .satellite-check {display:none;background:var(--cream);border:1px solid var(--border-gold);border-radius:10px;padding:12px 14px;margin-bottom:16px;align-items:center;gap:12px;}
  #onboarding-modal-overlay .satellite-check.show {display:flex;}
  /* "Yes, the pin is on my exact plot" — required for a pin the client didn't place by hand. */
  #onboarding-modal-overlay .pin-confirm, #onboarding-modal-overlay .field label.pin-confirm {display:flex;align-items:flex-start;gap:10px;background:#FFF8E6;border:1.5px solid var(--gold);border-radius:10px;padding:12px 14px;margin:-6px 0 16px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;line-height:1.45;}
  #onboarding-modal-overlay .field label.pin-confirm[hidden] {display:none;}
  #onboarding-modal-overlay .pin-confirm input {width:18px;height:18px;margin-top:1px;flex-shrink:0;accent-color:var(--gold-dark);cursor:pointer;}
  #onboarding-modal-overlay .pin-confirm small {display:block;font-weight:500;font-size:12px;color:var(--text-soft);margin-top:2px;}
  #onboarding-modal-overlay .field label.pin-confirm.is-missing {border-color:#c0392b;background:#FCEFEC;}
  #onboarding-modal-overlay .satellite-check i {font-size:19px;color:var(--gold-dark);flex-shrink:0;}
  #onboarding-modal-overlay .satellite-check .t {font-size:12.5px;font-weight:600;color:var(--navy);}
  #onboarding-modal-overlay .satellite-check .s {font-size:11.5px;color:var(--text-soft);}
  #onboarding-modal-overlay .toggle-row {display:flex;align-items:center;justify-content:space-between;background:#fff;border:1.5px solid var(--border-soft);border-radius:11px;padding:13px 16px;margin-bottom:16px;cursor:pointer;}
  #onboarding-modal-overlay .toggle-row .t1 {font-size:13px;font-weight:600;color:var(--navy);}
  #onboarding-modal-overlay .toggle-row .t1 .opt {font-weight:400;color:var(--text-muted);}
  #onboarding-modal-overlay .toggle-row .t2 {font-size:11.5px;color:var(--text-muted);}
  #onboarding-modal-overlay .switch {width:38px;height:22px;border-radius:20px;background:var(--border-soft);position:relative;transition:background 0.2s ease;flex-shrink:0;}
  #onboarding-modal-overlay .switch::after {content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform 0.2s ease;}
  #onboarding-modal-overlay .toggle-row.on .switch {background:var(--gold);}
  #onboarding-modal-overlay .toggle-row.on .switch::after {transform:translateX(16px);}
  #onboarding-modal-overlay .collapse {max-height:0;overflow:hidden;transition:max-height 0.3s ease;}
  #onboarding-modal-overlay .collapse.open {max-height:400px;}
  #onboarding-modal-overlay .collapse-inner {padding-top:6px;}
  #onboarding-modal-overlay .upload-box {border:1.5px dashed var(--border-soft);border-radius:11px;padding:16px;text-align:center;cursor:pointer;background:#fff;}
  #onboarding-modal-overlay .upload-box i {font-size:21px;color:var(--gold);margin-bottom:7px;display:block;}
  #onboarding-modal-overlay .upload-box .t {font-size:12.5px;font-weight:600;color:var(--text-soft);}
  #onboarding-modal-overlay .upload-box .s {font-size:11px;color:var(--text-muted);margin-top:2px;}
  /* Plans */

  #onboarding-modal-overlay .plan-list {display:flex;flex-direction:column;gap:12px;margin-bottom:6px;}
  #onboarding-modal-overlay .plan-card {border:1.5px solid var(--border-soft);border-radius:12px;padding:18px 20px;cursor:pointer;transition:all 0.2s ease;background:#fff;}
  #onboarding-modal-overlay .plan-card:hover {border-color:var(--gold-light);}
  #onboarding-modal-overlay .plan-card.selected {border-color:var(--gold);box-shadow:0 6px 20px rgba(181,86,44,0.14);}
  #onboarding-modal-overlay .plan-head {display:flex;justify-content:space-between;align-items:center;}
  #onboarding-modal-overlay .plan-head-l {display:flex;align-items:center;gap:12px;}
  #onboarding-modal-overlay .plan-icon {width:34px;height:34px;border-radius:9px;background:var(--cream);color:var(--gold-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;}
  #onboarding-modal-overlay .plan-card.selected .plan-icon {background:var(--gold);color:#fff;}
  #onboarding-modal-overlay .plan-name {font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--navy);}
  #onboarding-modal-overlay .plan-price {font-size:12px;color:var(--text-muted);}
  #onboarding-modal-overlay .plan-price b {color:var(--navy);font-size:14px;}
  #onboarding-modal-overlay .plan-head-r {display:flex;align-items:center;gap:6px;}
  #onboarding-modal-overlay .plan-info-btn {background:none;border:0;padding:4px;cursor:pointer;color:var(--gold-dark);font-size:17px;line-height:1;border-radius:50%;}
  #onboarding-modal-overlay .plan-info-btn:hover, #onboarding-modal-overlay .plan-info-btn:focus-visible {color:var(--navy);background:var(--cream);outline:none;}
  /* "What's included" panel (showPlanIncludes in script.js) */
  #onboarding-modal-overlay .plan-includes {position:fixed;inset:0;z-index:50;background:rgba(43,38,34,0.45);display:flex;align-items:center;justify-content:center;padding:16px;}
  #onboarding-modal-overlay .plan-includes[hidden] {display:none;}
  #onboarding-modal-overlay .plan-includes__box {background:#fff;border-radius:16px;width:560px;max-width:100%;max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(43,38,34,0.3);overflow:hidden;}
  #onboarding-modal-overlay .plan-includes__head {display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--border-soft);}
  #onboarding-modal-overlay .plan-includes__title {font-family:var(--font-display);font-size:24px;color:var(--navy);line-height:1.15;}
  #onboarding-modal-overlay .plan-includes__price {font-size:13px;color:var(--gold-dark);font-weight:600;margin-top:4px;}
  #onboarding-modal-overlay .plan-includes__close {background:none;border:0;font-size:26px;line-height:1;color:var(--text-muted);cursor:pointer;padding:2px 8px;border-radius:8px;}
  #onboarding-modal-overlay .plan-includes__close:hover {background:var(--cream);color:var(--navy);}
  #onboarding-modal-overlay .plan-includes__body {overflow-y:auto;padding:14px 22px 6px;}
  #onboarding-modal-overlay .plan-includes__inherits {font-size:13px;font-weight:600;color:var(--navy);background:var(--cream);padding:8px 12px;border-radius:8px;margin:0 0 12px;}
  #onboarding-modal-overlay .plan-includes__cat {margin-bottom:14px;}
  #onboarding-modal-overlay .plan-includes__cat h4 {font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-dark);margin:0 0 8px;}
  #onboarding-modal-overlay .plan-includes__cat ul {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
  #onboarding-modal-overlay .plan-includes__cat li {display:flex;gap:10px;align-items:flex-start;}
  #onboarding-modal-overlay .plan-includes__cat li > i {color:var(--gold);font-size:12px;margin-top:4px;}
  #onboarding-modal-overlay .plan-includes__cat b {display:block;font-size:13.5px;font-weight:600;color:var(--navy);}
  #onboarding-modal-overlay .plan-includes__cat span {display:block;font-size:12.5px;line-height:1.5;color:var(--text-muted);}
  #onboarding-modal-overlay .plan-includes__foot {padding:14px 22px;border-top:1px solid var(--border-soft);}
  #onboarding-modal-overlay .plan-includes__foot .btn-primary {width:100%;}
  #onboarding-modal-overlay .plan-free-tag {background:var(--cream);color:var(--gold-dark);font-size:9.5px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;text-transform:uppercase;letter-spacing:0.05em;}
  #onboarding-modal-overlay .plan-benefits {max-height:0;overflow:hidden;transition:max-height 0.3s ease;}
  #onboarding-modal-overlay .plan-card.selected .plan-benefits {max-height:220px;}
  #onboarding-modal-overlay .plan-benefits-inner {padding-top:14px;margin-top:14px;border-top:1px solid var(--border-soft);display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;}
  #onboarding-modal-overlay .plan-benefits-inner li {list-style:none;font-size:11.5px;color:var(--text-soft);display:flex;align-items:center;gap:7px;}
  #onboarding-modal-overlay .plan-benefits-inner li i {color:var(--gold);font-size:11px;}
  /* Service categories */

  #onboarding-modal-overlay .cat-list {display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
  #onboarding-modal-overlay .cat-tile {display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:10px;border:1.5px solid var(--border-soft);cursor:pointer;transition:all 0.2s ease;background:#fff;}
  #onboarding-modal-overlay .cat-tile:hover {border-color:var(--gold-light);}
  #onboarding-modal-overlay .cat-tile.selected {border-color:var(--gold);background:var(--cream);}
  #onboarding-modal-overlay .cat-tile .ic {width:34px;height:34px;border-radius:8px;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold-dark);font-size:14px;}
  #onboarding-modal-overlay .cat-tile.selected .ic {background:var(--gold);color:#fff;}
  #onboarding-modal-overlay .cat-hint {font-size:12px;color:var(--text-muted,#767676);margin:0 0 8px;}
  #onboarding-modal-overlay .cat-tile {position:relative;}
  #onboarding-modal-overlay .cat-tile.selected::after {content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:50%;right:14px;transform:translateY(-50%);font-size:12px;color:var(--gold-dark);}
  #onboarding-modal-overlay .cat-tile h4 {padding-right:18px;font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.35;}
  /* Review */

  #onboarding-modal-overlay .review-block {background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:16px 18px;margin-bottom:14px;}
  #onboarding-modal-overlay .review-block h5 {font-family:var(--font-mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.13em;color:var(--gold-dark);margin-bottom:10px;}
  #onboarding-modal-overlay .review-row {display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--cream-dark);}
  #onboarding-modal-overlay .review-row:last-child {border-bottom:none;}
  #onboarding-modal-overlay .review-row span:first-child {color:var(--text-muted);}
  #onboarding-modal-overlay .review-row.rv-total {font-size:14px;font-weight:700;color:var(--navy);}
  #onboarding-modal-overlay .review-row.rv-total span:first-child {color:var(--navy);}

  /* Plan step: the free-trial line under "Continue to subscription". */
  #onboarding-modal-overlay .plan-trial-note {
    display:flex;align-items:center;justify-content:center;gap:8px;
    margin:12px 0 0;font-size:13px;font-weight:600;color:var(--gold-dark);text-align:center;
  }

  /* Subscription step: card form (card data goes straight to Razorpay). */
  #onboarding-modal-overlay .pay-box {
    border:1px solid var(--border-gold);background:var(--cream);border-radius:12px;
    padding:16px 18px;margin:4px 0 18px;
  }
  /* Test deployments only: tells the tester the card check can be skipped. */
  #onboarding-modal-overlay .pay-box__testnote {background:#FFF3CD;border:1px dashed #B5562C;border-radius:8px;padding:9px 12px;margin:0 0 10px;font-size:12.5px;color:#6b5314;line-height:1.45;}
  #onboarding-modal-overlay .pay-box__testnote[hidden] {display:none;}
  #onboarding-modal-overlay .pay-box__head {display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px;}
  #onboarding-modal-overlay .pay-box__head i {color:var(--gold-dark);}
  #onboarding-modal-overlay .pay-box__text {font-size:12.5px;line-height:1.55;color:var(--text-soft);margin:0 0 10px;}
  #onboarding-modal-overlay .pay-box__methods {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
  #onboarding-modal-overlay .pay-box__methods span {
    font-size:11px;font-weight:600;color:var(--navy);background:#fff;
    border:1px solid var(--border-soft);border-radius:6px;padding:4px 8px;
  }
  #onboarding-modal-overlay .pay-box__secure {display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted);margin:0;}
  #onboarding-modal-overlay .pay-box__secure i {color:#2e8b65;}
  #onboarding-modal-overlay .pay-box__err {margin:10px 0 0;font-size:12.5px;color:#c0392b;}
  #onboarding-modal-overlay .pay-form {display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin:0 0 12px;}
  #onboarding-modal-overlay .pay-field {display:flex;flex-direction:column;gap:5px;min-width:0;}
  #onboarding-modal-overlay .pay-field--full {grid-column:1 / -1;}
  #onboarding-modal-overlay .pay-field > span {font-size:12px;font-weight:600;color:var(--navy);}
  #onboarding-modal-overlay .pay-field input {
    width:100%;box-sizing:border-box;padding:11px 12px;font-size:14px;color:var(--navy);
    background:#fff;border:1px solid var(--border-soft);border-radius:8px;outline:none;
    font-variant-numeric:tabular-nums;
  }
  #onboarding-modal-overlay .pay-field input:focus {border-color:var(--gold-dark);box-shadow:0 0 0 3px rgba(181,86,44,.15);}
  #onboarding-modal-overlay .pay-field input.is-invalid {border-color:#c0392b;}
  #onboarding-modal-overlay .pay-input-wrap {position:relative;}
  #onboarding-modal-overlay .pay-input-wrap input {padding-right:92px;}
  #onboarding-modal-overlay .pay-brand {
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    font-style:normal;font-size:11px;font-weight:700;color:var(--gold-dark);letter-spacing:.02em;
  }
  #onboarding-modal-overlay .pay-autopay-note {
    display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;
    font-size:12.5px;line-height:1.5;color:var(--text-soft);
  }
  #onboarding-modal-overlay .pay-autopay-note i {color:var(--gold-dark);margin-top:3px;}

  #onboarding-modal-overlay .review-row span:last-child {font-weight:600;color:var(--navy);text-align:right;max-width:60%;}
  /* Buttons */

  #onboarding-modal-overlay .btn-row {display:flex;gap:12px;margin-top:30px;}
  #onboarding-modal-overlay .btn-back-icon {flex:none;width:48px;height:48px;border-radius:10px;background:#fff;border:1.5px solid var(--border-soft);color:var(--text-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;font-size:15px;}
  #onboarding-modal-overlay .btn-back-icon:hover {border-color:var(--gold);color:var(--gold-dark);}
  #onboarding-modal-overlay .btn-primary {flex:1;padding:14px;border-radius:10px;font-size:12.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;border:none;background:var(--gold);color:#fff;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:9px;}
  #onboarding-modal-overlay .btn-primary:hover {background:var(--gold-light);transform:translateY(-1px);}
  #onboarding-modal-overlay .btn-primary:disabled {opacity:0.4;cursor:not-allowed;transform:none;}
  #onboarding-modal-overlay .btn-primary i {font-size:12px;}
  #onboarding-modal-overlay .btn-save-exit {width:100%;padding:15px;border-radius:10px;background:var(--gold);color:#fff;border:none;font-weight:700;font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:all 0.2s ease;margin-bottom:12px;}
  #onboarding-modal-overlay .btn-save-exit:hover {background:var(--gold-light);transform:translateY(-1px);}
  #onboarding-modal-overlay .btn-ghost {width:100%;padding:15px;border-radius:10px;background:none;border:1.5px solid var(--border-soft);color:var(--text-soft);font-weight:600;font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:all 0.2s ease;}
  #onboarding-modal-overlay .btn-ghost:hover {border-color:var(--navy);color:var(--navy);}
  #onboarding-modal-overlay .prop-skip-note {margin:-6px 0 18px;font-size:13px;color:var(--text-soft);}
  #onboarding-modal-overlay .prop-skip-note a {color:var(--gold-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
  /* Success — Track A (post-submit dashboard handoff): "Open my dashboard" is the
     primary, visually highlighted CTA; "Save and exit to homepage" is de-emphasized
     as a secondary action (DOM order is swapped alongside this so the primary CTA
     also appears first). Scoped to this panel only so Track B / Track C, which
     share the same .btn-save-exit / .btn-ghost classes, are unaffected. */
  #onboarding-modal-overlay [data-step="successA"] .btn-save-exit {background:none;border:1.5px solid var(--border-soft);color:var(--text-soft);font-weight:600;letter-spacing:0.06em;}
  #onboarding-modal-overlay [data-step="successA"] .btn-save-exit:hover {background:none;border-color:var(--navy);color:var(--navy);transform:none;}
  #onboarding-modal-overlay [data-step="successA"] .btn-ghost {background:var(--gold);border:none;color:#fff;font-weight:700;letter-spacing:0.1em;margin-bottom:12px;}
  #onboarding-modal-overlay [data-step="successA"] .btn-ghost:hover {background:var(--gold-light);border-color:transparent;color:#fff;transform:translateY(-1px);}
  /* Success screens */

  #onboarding-modal-overlay .success-wrap {text-align:center;padding:6px 0 4px;}
  #onboarding-modal-overlay .success-icon {width:62px;height:62px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--gold-dark);font-size:26px;}
  #onboarding-modal-overlay .success-wrap h2 {font-family:var(--font-display);font-size:25px;font-weight:500;color:var(--navy);margin-bottom:10px;}
  #onboarding-modal-overlay .success-wrap p {font-size:13px;color:var(--text-soft);max-width:380px;margin:0 auto 26px;line-height:1.6;}
  #onboarding-modal-overlay .status-preview {background:#fff;border:1px solid var(--border-soft);border-radius:14px;padding:18px 20px;text-align:left;margin-bottom:22px;}
  #onboarding-modal-overlay .status-preview .sp-title {font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--navy);margin-bottom:14px;}
  #onboarding-modal-overlay .track-line {display:flex;align-items:center;}
  #onboarding-modal-overlay .track-dot-wrap {flex:1;text-align:center;position:relative;}
  #onboarding-modal-overlay .track-dot-wrap::before {content:'';position:absolute;top:9px;left:-50%;width:100%;height:1.5px;background:var(--border-soft);z-index:1;}
  #onboarding-modal-overlay .track-dot-wrap:first-child::before {display:none;}
  #onboarding-modal-overlay .track-dot-wrap.on::before {background:var(--gold);}
  #onboarding-modal-overlay .track-dot {width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--border-soft);margin:0 auto 6px;position:relative;z-index:2;}
  #onboarding-modal-overlay .track-dot-wrap.on .track-dot {background:var(--gold);border-color:var(--gold);}
  #onboarding-modal-overlay .track-dot-wrap.current .track-dot {background:var(--navy);border-color:var(--navy);box-shadow:0 0 0 4px rgba(43,38,34,0.15);}
  #onboarding-modal-overlay .track-lbl {font-size:9.5px;font-weight:600;color:var(--text-muted);}
  #onboarding-modal-overlay .track-dot-wrap.on .track-lbl,
  #onboarding-modal-overlay .track-dot-wrap.current .track-lbl {color:var(--navy);}
  /* Scrollbar polish */

  #onboarding-modal-overlay .portal-form::-webkit-scrollbar {width:7px;}
  #onboarding-modal-overlay .portal-form::-webkit-scrollbar-thumb {background:var(--border-soft);border-radius:10px;}
  #onboarding-modal-overlay .portal-form::-webkit-scrollbar-thumb:hover {background:var(--gold-light);}
  @media(max-width:980px) {
  #onboarding-modal-overlay .portal {flex-direction:column;height:auto;min-height:100vh;overflow:visible;}
  #onboarding-modal-overlay .portal-visual {width:100%;height:260px;}
  #onboarding-modal-overlay .visual-brand {top:22px;left:24px;}
  #onboarding-modal-overlay .visual-brand .b-scene {width:150px;}
  #onboarding-modal-overlay .visual-caption {left:24px;right:24px;bottom:22px;}
  #onboarding-modal-overlay .visual-title {font-size:24px;}
  #onboarding-modal-overlay .visual-sub {display:none;}
  #onboarding-modal-overlay .portal-form {width:100%;height:auto;overflow:visible;}
  #onboarding-modal-overlay .form-topbar {padding:16px 22px 0;}
  #onboarding-modal-overlay .form-scroll {padding:10px 22px 50px;}
  #onboarding-modal-overlay .field-row {grid-template-columns:1fr;}
  #onboarding-modal-overlay .plan-benefits-inner {grid-template-columns:1fr;}
  }

  @media(max-width:480px) {
  #onboarding-modal-overlay .step-node-label {display:none;}
  }


/* --- style block attrs: --- */

  /* Shared editorial helpers for the About / Contact pages */
  .ed-divider { width: 56px; height: 1.5px; background: var(--gold); margin: 28px 0; border: none; }
  .ed-serif-num { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--gold); font-style: italic;  font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}

  /* ───────────────────── ABOUT PAGE ───────────────────── */
  #about-page section { position: relative; }

  /* --- About Hero (60vh) --- */
  #ab-hero { min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy); }
  #ab-hero-bg { position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1800&q=85'); background-size: cover; background-position: center 40%; opacity: 0.42; }
  #ab-hero::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(43,38,34,0.35) 0%, rgba(43,38,34,0.94) 92%); }
  .ab-hero-inner { position: relative; z-index: 2; padding: 160px 0 72px; width:100%; }
  .ab-hero-eyebrow { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); display:flex; align-items:center; gap:12px; margin-bottom: 22px;  font-weight: 500;}
  .ab-hero-eyebrow::before { content:''; width: 40px; height: 1.5px; background: var(--gold); }
  .ab-hero-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: 1.05; color: #fff; max-width: 820px; }
  .ab-hero-h1 em { color: var(--gold-light); font-style: italic; }
  .ab-hero-sub { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body); line-height: 1.75; color: rgba(255,255,255,0.72); max-width: 560px; margin-top: 26px; }

  /* --- Our Story — Horizontal Milestone Grid --- */
  #ab-story { background: var(--off-white); padding: 120px 0; }
  .ab-story-head { max-width: 620px; margin: 0 auto 70px; text-align: center; }
  .ab-story-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); color: var(--navy); line-height: 1.15; }

  /* Horizontal milestone grid — elevated into premium achievement cards
     strung along an animated gold connector line. The connector is drawn
     as two layers: a faint static ::before track (as before) and a
     `.ab-timeline-fill` sibling that grows from 0 → 100% width once the
     row scrolls into view, so the line feels like it "draws itself" in
     sync with the cards lighting up left to right. */
  .ab-milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
  .ab-milestones::before {
    content: '';
    position: absolute;
    top: 32px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-gold) 8%, var(--border-gold) 92%, transparent);
  }
  .ab-timeline-fill {
    position: absolute;
    left: 0; height: 1.5px; width: 0;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    transition: width 1.5s cubic-bezier(.65,0,.35,1);
    z-index: 0; pointer-events: none;
  }
  .ab-milestones .ab-timeline-fill { top: 32px; }
  .ab-milestones-row2 .ab-timeline-fill { bottom: 32px; }
  .ab-milestones.line-in .ab-timeline-fill,
  .ab-milestones-row2.line-in .ab-timeline-fill { width: 100%; }
  .ab-milestone {
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .ab-milestone.in { opacity: 1; transform: translateY(0); }
  .ab-milestone-dot {
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px var(--off-white), 0 0 0 5.5px var(--border-gold);
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
  }
  /* The achievement card itself */
  .ab-milestone-card {
    background: var(--white);
    border: 1px solid var(--border-gold);
    border-radius: 20px;
    padding: 26px 22px 28px;
    box-shadow: 0 4px 20px rgba(43,38,34,0.05), 0 14px 34px rgba(43,38,34,0.05);
    transition: transform 350ms cubic-bezier(.34,0,.2,1), box-shadow 350ms cubic-bezier(.34,0,.2,1), border-color 350ms ease;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .ab-milestone-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 10px 26px rgba(181,86,44,0.14), 0 26px 52px rgba(43,38,34,0.10);
    border-color: rgba(181,86,44,0.55);
  }
  .ab-milestone-year {
    font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.25em;
    color: var(--gold); margin-bottom: 10px; text-transform: uppercase;
   font-weight: 500;}
  .ab-milestone-title {
    font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500;
    color: var(--navy); margin-bottom: 10px; line-height: 1.25;
  }
  .ab-milestone-desc {font-family: var(--font-body);  font-size: var(--fs-body); line-height: 1.75; color: var(--text-muted); font-weight: 300; }
  /* Second row — bottom-aligned dots */
  .ab-milestones-row2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; margin-top: 60px; }
  .ab-milestones-row2::before {
    content: '';
    position: absolute;
    bottom: 32px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-gold) 8%, var(--border-gold) 92%, transparent);
  }
  .ab-milestone-b { position: relative; opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; display: flex; flex-direction: column; height: 100%; }
  .ab-milestone-b.in { opacity: 1; transform: translateY(0); }
  .ab-milestone-b .ab-milestone-card { margin-bottom: 22px; }
  .ab-milestone-b .ab-milestone-dot { margin-bottom: 0; }

  @media (max-width: 1100px) {
    .ab-milestones { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
    .ab-milestones::before, .ab-milestones .ab-timeline-fill { display: none; }
    .ab-milestones-row2 { grid-template-columns: repeat(2, 1fr); margin-top: 0; row-gap: 32px; }
    .ab-milestones-row2::before, .ab-milestones-row2 .ab-timeline-fill { display: none; }
  }
  @media (max-width: 600px) {
    .ab-milestones, .ab-milestones-row2 { grid-template-columns: 1fr; }
  }

  /* --- Mission & Vision — two symmetric executive statement cards --- */
  #ab-mv { background: var(--white); padding: 76px 0; }
  .ab-mv-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
  .ab-mv-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, #ffffff 0%, #fdfaf4 100%);
    border: 1px solid var(--border-gold);
    border-radius: 22px;
    padding: 34px 38px;
    display: flex;
    flex-direction: column;
    transition: transform 450ms cubic-bezier(.25,.8,.25,1), box-shadow 450ms cubic-bezier(.25,.8,.25,1), border-color 450ms ease;
  }
  .ab-mv-card::before {
    content: '';
    position: absolute;
    top: -22%; right: -12%;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181,86,44,0.09) 0%, transparent 70%);
    pointer-events: none;
  }
  .ab-mv-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 18px 44px rgba(43,38,34,0.09), 0 6px 18px rgba(181,86,44,0.12);
    border-color: rgba(181,86,44,0.5);
  }
  .ab-mv-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .ab-mv-icon {
    position: relative; z-index: 1;
    width: 42px; height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    border: 1px solid var(--border-gold);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-dark);
    background: rgba(181,86,44,0.05);
  }
  .ab-mv-icon svg { width: 19px; height: 19px; }
  .ab-mv-col-title { position: relative; z-index: 1; font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0; }
  .ab-mv-big { position: relative; z-index: 1; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; font-style: italic; color: var(--navy); line-height: 1.5; margin: 0; }
  @media (max-width: 900px) { .ab-mv-grid { grid-template-columns: 1fr; gap: 18px; } .ab-mv-card { padding: 30px 28px; } }

  /* --- Services Overview (About) — ultra-soft ivory canvas with premium icon cards ---
     Tightened wrapper padding, larger/denser cards, and an icon-top /
     title-bottom layout (space-between) so the vertical gap inside each
     card reads as intentional composition rather than leftover air —
     this also keeps all five cards visually even despite 1- vs 2-line
     titles, without stretching a huge blank gap under the shorter ones. */
  #ab-services { background: #FBF7F0; padding: 64px 0; border-top: 1px solid rgba(181,86,44,0.1); border-bottom: 1px solid rgba(181,86,44,0.1); }
  .ab-svc-head { display:flex; justify-content: space-between; align-items:flex-end; gap: 30px; margin-bottom: 28px; flex-wrap: wrap; }
  .ab-svc-title { font-family: var(--font-display); font-weight:500; font-size: var(--fs-h3); color: var(--navy); }
  .ab-svc-link { color: var(--gold-dark); font-size: var(--fs-body); letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; font-family: var(--font-body); font-weight:500; border-bottom: 1px solid transparent; transition: border-color .25s; }
  .ab-svc-link:hover { border-color: var(--gold-dark); }
  .ab-svc-row { display:grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .ab-svc-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 184px;
    background: var(--white);
    border: 1px solid rgba(181,86,44,0.16);
    border-radius: 16px;
    padding: 28px 24px 24px;
    transition: transform 350ms cubic-bezier(.4,0,.2,1), box-shadow 350ms cubic-bezier(.4,0,.2,1), border-color 350ms ease;
  }
  .ab-svc-cell:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(43,38,34,0.07), 0 4px 14px rgba(181,86,44,0.1);
    border-color: rgba(181,86,44,0.42);
  }
  .ab-svc-cell .ico {
    width: 52px; height: 52px;
    border-radius: 13px;
    border: 1px solid var(--border-gold);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-dark);
    background: linear-gradient(160deg, rgba(181,86,44,0.07), transparent);
    transition: background 350ms ease, color 350ms ease, transform 350ms cubic-bezier(.4,0,.2,1);
  }
  .ab-svc-cell .ico svg { width: 23px; height: 23px; }
  .ab-svc-cell:hover .ico { background: var(--gold); color: #fff; transform: scale(1.06) rotate(-3deg); }
  .ab-svc-cell h4 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; color: var(--navy); letter-spacing:0.02em; line-height: 1.18; margin-top: 20px; }
  @media (max-width: 900px) { .ab-svc-row { grid-template-columns: repeat(2, 1fr); } .ab-svc-cell { min-height: 160px; } }
  @media (max-width: 560px) { .ab-svc-row { grid-template-columns: 1fr; } .ab-svc-cell { min-height: 0; } }

  /* --- Meet Our Team --- */
  #ab-team { background: var(--off-white); padding: 130px 0; }
  .ab-team-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1080px; margin: 0 auto; }
  .ab-team-card { text-align:left; }
  .ab-team-photo { position:relative; overflow:hidden; aspect-ratio: 3/3.6; margin-bottom: 20px; }
  .ab-team-photo img { width:100%; height:100%; object-fit:cover; filter: grayscale(85%) contrast(1.02); transform: scale(1.03); transition: filter .55s ease, transform .7s ease; }
  .ab-team-photo::after { content:''; position:absolute; inset:0; border: 1px solid transparent; transition: border-color .4s ease; }
  .ab-team-card:hover .ab-team-photo img { filter: grayscale(0%) contrast(1); transform: scale(1.08); }
  .ab-team-card:hover .ab-team-photo::after { border-color: var(--gold); }
  .ab-team-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight:500; color: var(--navy); }
  .ab-team-role { font-family: var(--font-body); font-size: var(--fs-body); letter-spacing:0.14em; text-transform:uppercase; color: var(--gold); margin-top: 4px; margin-bottom: 12px; }
  .ab-team-bio {font-family: var(--font-body);  font-size: var(--fs-body); line-height:1.7; color: var(--text-muted); font-weight:300; }
  @media (max-width: 900px) { .ab-team-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .ab-team-grid { grid-template-columns: 1fr; } }

  /* --- Trust & Credentials (About, with counters) --- */
  #ab-trust { background: var(--white); padding: 130px 0; }
  .ab-trust-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items:center; }
  .ab-trust-copy .eyebrow { margin-bottom: 20px; }
  .ab-trust-copy h2 { font-family: var(--font-display); font-weight:500; font-size: var(--fs-h2); color: var(--navy); margin-bottom: 22px; line-height:1.2; }
  .ab-trust-copy p {font-family: var(--font-body);  font-size: var(--fs-body); line-height:1.8; color: var(--text-muted); font-weight:300; }
  .ab-stat-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 40px 30px; }
  .ab-stat { border-left: 2px solid var(--border-gold); padding-left: 20px; }
  .ab-stat-num { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-caption); color: var(--navy); line-height:1; display:flex; align-items:baseline; gap:2px;  letter-spacing: 0.25em; text-transform: uppercase;}
  .ab-stat-num .suffix {font-family: var(--font-mono);  font-size: var(--fs-caption); color: var(--gold);  font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}
  .ab-stat-label {font-family: var(--font-mono);  font-size: var(--fs-caption); letter-spacing: 0.25em; color: var(--text-muted); margin-top: 10px; font-weight: 500;  text-transform: uppercase;}
  @media (max-width: 900px) { .ab-trust-grid { grid-template-columns: 1fr; gap: 46px; } }

  /* --- Final CTA (About) --- */
  #ab-final-cta { background: var(--navy); padding: 130px 0; text-align:center; overflow:hidden; position:relative; }
  #ab-final-cta::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(181,86,44,0.16), transparent 55%), radial-gradient(circle at 75% 80%, rgba(181,86,44,0.1), transparent 55%); }
  .ab-cta-inner { position:relative; z-index:2; max-width: 660px; margin:0 auto; }
  .ab-cta-eyebrow { color: var(--gold-light); font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom:22px;  font-weight: 500;}
  .ab-cta-title { font-family: var(--font-display); font-weight:500; font-size: var(--fs-h2); color:#fff; line-height:1.15; margin-bottom: 26px; }
  .ab-cta-title em { color: var(--gold-light); font-style: italic; }
  .ab-cta-sub {font-family: var(--font-body);  color: rgba(255,255,255,0.68); font-size: var(--fs-body); font-weight:300; margin-bottom: 40px; }
  .ab-cta-btns { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

  /* Reveal timing helper: alternates delay so staggered children feel intentional */
  .stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

  /* ───────────────────── CONTACT & FAQ PAGE ───────────────────── */

  /* --- Contact Page — Photo Banner (dark overlay, matches About-page hero style) --- */
  #cp-banner { position: relative; overflow: hidden; background: var(--navy); }
  #cp-banner-bg {
    position: absolute; inset: 0;
    background-image: url('https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=1800&q=85');
    background-size: cover; background-position: center 45%;
    opacity: 0.46;
  }
  #cp-banner::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(43,38,34,0.55) 0%, rgba(43,38,34,0.88) 100%);
  }
  .cp-banner-inner { position: relative; z-index: 2; padding: 96px 0; max-width: 760px; }
  .cp-banner-eyebrow {
    font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 12px;
    margin-bottom: 22px; font-weight: 500;
  }
  .cp-banner-eyebrow::before { content:''; width: 36px; height: 1px; background: var(--gold); display:inline-block; }
  .cp-banner-h2 {
    font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1);
    line-height: 1.08; color: #fff;
  }
  .cp-banner-h2 em { color: var(--gold-light); font-style: italic; }
  .cp-banner-sub {
    font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body);
    line-height: 1.8; color: rgba(255,255,255,0.72); max-width: 560px; margin-top: 22px;
  }
  @media (max-width: 880px) {
    .cp-banner-inner { padding: 72px 0; }
  }

  /* --- Contact Info Cards — single-row premium grid ---
     All four cards now sit side-by-side in one strict row (rather than
     wrapping into a 2×2 square), spanning the container's full width so
     the row reads as one deliberate, edge-to-edge block. Gaps and card
     padding are tightened in step to match the luxury, high-density grid
     aesthetic used elsewhere on the site. */
  #cp-info { background: var(--white); padding: 56px 0 0; }
  .cp-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    width: 100%;
    margin: 0 auto;
  }
  .cp-info-card {
    background: var(--white);
    border: 1px solid rgba(181,86,44,0.22);
    border-radius: 18px;
    padding: 26px 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 2px 16px rgba(43,38,34,0.05), 0 8px 32px rgba(43,38,34,0.04);
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  /* Gold top accent bar */
  .cp-info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(.65,0,.35,1);
  }
  .cp-info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(43,38,34,0.12), 0 8px 24px rgba(181,86,44,0.14);
    border-color: rgba(181,86,44,0.5);
  }
  .cp-info-card:hover::before { transform: scaleX(1); }

  /* Icon container with hover fill */
  .cp-info-icon-wrap {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    position: relative;
    transition: background 0.35s cubic-bezier(.65,0,.35,1), box-shadow 0.35s ease;
    background: transparent;
  }
  .cp-info-icon-wrap .cp-iico {
    font-size: 16px;
    line-height: 1;
    color: var(--gold);
    transition: color 0.35s ease;
  }
  .cp-info-card:hover .cp-info-icon-wrap {
    background: var(--gold);
    box-shadow: 0 6px 20px rgba(181,86,44,0.36);
  }
  .cp-info-card:hover .cp-info-icon-wrap .cp-iico { color: #fff; }

  .cp-info-cat {
    font-family: var(--font-mono);
    font-size: var(--fs-caption); letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--gold);
    margin-bottom: 8px;
   font-weight: 500;}
  .cp-info-value {
    font-family: var(--font-body);
    font-size: var(--fs-body); font-weight: 500;
    color: var(--navy); line-height: 1.3;
    margin-bottom: 6px;
  }
  .cp-info-sub {font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); font-weight: 300; margin-bottom: 14px; line-height: 1.5; flex: 1; }
  .cp-info-action {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-body); font-weight: 500;
    color: var(--gold-dark);
    text-decoration: none;
    font-family: var(--font-body);
    letter-spacing: 0.04em;
    transition: gap 0.25s ease, color 0.25s ease;
    border: none; background: none; cursor: pointer; padding: 0;
  }
  .cp-info-action:hover { gap: 10px; color: var(--gold); }
  .cp-info-action .arr { transition: transform 0.25s ease; }
  .cp-info-action:hover .arr { transform: translateX(3px); }
  @media (max-width: 1080px) { .cp-info-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; } }
  @media (max-width: 560px) { .cp-info-grid { grid-template-columns: 1fr; max-width: 440px; } }

  /* --- Intentional whitespace window after cards ---
     Shrunk from 120px to a much smaller breathing gap — still keeps the
     gradient hand-off from white to ivory, but no longer reads as dead
     space between the info cards and the CTA below. */
  #cp-cards-spacer { height: 36px; background: linear-gradient(180deg, var(--white) 0%, #fdfaf4 100%); }

  /* --- Concierge CTA --- */
  #cp-cta {
    background: #fdfaf4;
    padding: 0 0 48px;
  }
  .cp-cta-inner {
    max-width: 620px;
    margin: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  }
  .cp-cta-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); color: var(--navy); line-height: 1.15; }
  .cp-cta-sub {font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); font-weight: 300; line-height: 1.6; max-width: 500px; }
  .cp-cta-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; margin-top: 6px; }
  .cp-cta-trust { display: flex; gap: 30px; flex-wrap: wrap; justify-content: flex-start; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--border-gold); }
  .cp-cta-trust-item {font-family: var(--font-body); 
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-body); color: var(--text-muted); font-weight: 400;
  }
  .cp-cta-trust-item::before {
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTUgMTNsNCA0TDE5IDciIGZpbGw9Im5vbmUiIHN0cm9rZT0iJTIzQjg5MjNBIiBzdHJva2Utd2lkdGg9IjMuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+");
    width: 18px; height: 18px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(181,86,44,0.12);
    color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
  }

  /* --- Floating Contact Form --- */
  #cp-form-section { background: var(--tint-explore, var(--off-white)); padding: 110px 0; }
  .cp-form-wrap { max-width: 760px; margin: 0 auto; background: var(--white); border: 1px solid var(--border-gold); box-shadow: var(--shadow-card); padding: 56px; position: relative; border-radius: 8px; }
  .cp-form-head { text-align:center; margin-bottom: 42px; }
  .cp-form-head h2 { font-family: var(--font-display); font-weight:500; font-size: var(--fs-h2); color: var(--navy); }
  .cp-form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .cp-field { position:relative; grid-column: span 1; }
  .cp-field.full { grid-column: 1 / -1; }
  .cp-field input, .cp-field textarea {
    width:100%; background:transparent; border:none; border-bottom: 1.5px solid var(--border-gold);
    padding: 14px 2px 10px; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-dark);
    transition: border-color .3s ease; font-weight:300;
  }
  .cp-field textarea { resize: vertical; min-height: 96px; }
  .cp-field input:focus, .cp-field textarea:focus { outline:none; border-color: var(--gold); }
  .cp-field label {font-family: var(--font-mono); 
    position:absolute; left:2px; top:14px; font-size: var(--fs-caption); color: var(--text-muted); font-weight: 500;
    pointer-events:none; transition: transform .28s cubic-bezier(.4,0,.2,1), font-size .28s ease, color .28s ease;
    transform-origin: left top;
   letter-spacing: 0.25em; text-transform: uppercase;}
  .cp-field input:focus + label, .cp-field input:not(:placeholder-shown) + label,
  .cp-field textarea:focus + label, .cp-field textarea:not(:placeholder-shown) + label {font-family: var(--font-mono); 
    transform: translateY(-22px); font-size: var(--fs-caption); letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold);
   font-weight: 500;}
  .cp-field.invalid input, .cp-field.invalid textarea { border-color: #C0392B; }
  .cp-field-error {font-family: var(--font-mono);  font-size: var(--fs-caption); color: #C0392B; margin-top: 6px; min-height: 14px; display:block; opacity:0; transition: opacity .2s ease; }
  .cp-field.invalid .cp-field-error { opacity:1; }
  .cp-submit-btn { grid-column: 1/-1; margin-top: 6px; justify-self:start; }
  .cp-success-overlay {
    position:absolute; inset:0; background: var(--navy); display:flex; flex-direction:column; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition: opacity .5s ease; text-align:center; padding: 40px; border-radius: 8px;
  }
  .cp-success-overlay.show { opacity:1; pointer-events:auto; }
  .cp-success-check { width:74px; height:74px; margin-bottom: 26px; }
  .cp-success-check circle { stroke: var(--gold); stroke-width:2; fill:none; stroke-dasharray: 166; stroke-dashoffset:166; transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1); }
  .cp-success-check path { stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: 48; stroke-dashoffset:48; transition: stroke-dashoffset .5s ease .8s; }
  .cp-success-overlay.show .cp-success-check circle { stroke-dashoffset:0; }
  .cp-success-overlay.show .cp-success-check path { stroke-dashoffset:0; }
  .cp-success-title { font-family: var(--font-display); color:#fff; font-size: var(--fs-h3); font-weight:500; margin-bottom:10px; }
  .cp-success-sub {font-family: var(--font-body);  color: rgba(255,255,255,0.65); font-size: var(--fs-body); font-weight:300; }
  @media (max-width: 700px) { .cp-form-wrap { padding: 34px 24px; } .cp-form-grid { grid-template-columns: 1fr; } }

  /* --- Office & Service Coverage --- */
  #cp-coverage { background: var(--navy); padding: 120px 0; }
  .cp-cov-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; gap:26px; flex-wrap:wrap; }
  .cp-cov-title { font-family: var(--font-display); font-weight:500; font-size: var(--fs-h3); color:#fff; }
  .cp-cov-sub {font-family: var(--font-body);  color: rgba(255,255,255,0.6); font-size: var(--fs-body); max-width:340px; font-weight:300; }
  .cp-cov-grid { display:grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.12); }
  .cp-cov-cell { background: var(--navy); padding: 30px 20px; transition: background .3s ease; }
  .cp-cov-cell:hover { background: var(--navy-light); }
  .cp-cov-zone { font-family: var(--font-body); font-size: var(--fs-body); color:#fff; margin-bottom:8px; }
  .cp-cov-status { font-family: var(--font-body); font-size: var(--fs-body); letter-spacing:0.12em; text-transform:uppercase; color: var(--gold-light); }
  @media (max-width: 900px) { .cp-cov-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .cp-cov-grid { grid-template-columns: 1fr; } }

  /* --- FAQ Accordion --- */
  #cp-faq { background: var(--off-white); padding: 120px 0; }
  .cp-faq-head { max-width:620px; margin: 0 auto 60px; text-align:center; }
  .cp-faq-title { font-family: var(--font-display); font-weight:500; font-size: var(--fs-h3); color: var(--navy); }
  .cp-faq-list { max-width: 820px; margin:0 auto; }
  .faq-item { border-bottom: 1px solid var(--border-gold); }
  .faq-question { width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; background:none; border:none; cursor:pointer; padding: 26px 4px; text-align:left; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--navy); font-weight:500; }
  .faq-chevron { flex:0 0 auto; width:20px; height:20px; color: var(--gold); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
  .faq-item.open .faq-chevron { transform: rotate(180deg); }
  .faq-answer { max-height:0; overflow:hidden; transition: max-height .5s cubic-bezier(.65,0,.35,1); }
  .faq-answer-inner {font-family: var(--font-body);  padding: 0 4px 26px; font-size: var(--fs-body); line-height:1.8; color: var(--text-muted); font-weight:300; max-width: 680px; }

  /* --- Still Need Help / Support Stats --- */
  #cp-support { background: var(--white); padding: 90px 0 120px; }
  .cp-support-inner { display:flex; justify-content:space-between; align-items:center; gap: 40px; flex-wrap:wrap; border-top:1px solid var(--border-gold); border-bottom:1px solid var(--border-gold); padding: 44px 0; }
  .cp-support-copy h3 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight:500; color:var(--navy); margin-bottom:8px; }
  .cp-support-copy p {font-family: var(--font-body);  font-size: var(--fs-body); color: var(--text-muted); font-weight:300; }
  .cp-support-stats { display:flex; gap: 46px; }
  .cp-support-stat-num { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500; color: var(--gold);  letter-spacing: 0.25em; text-transform: uppercase;}
  .cp-support-stat-label {font-family: var(--font-mono);  font-size: var(--fs-caption); color: var(--text-muted); margin-top:4px;  font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;}
  @media (max-width: 760px) { .cp-support-inner { flex-direction:column; align-items:flex-start; } .cp-support-stats { gap:30px; } }

  /* --- Premium Glassmorphism Floating Dock --- */
  #cp-concierge {
    position: fixed;
    right: 28px; bottom: 28px;
    z-index: 1200;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  }
  .cp-concierge-menu {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 4px;
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    pointer-events: none;
    transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.4,.64,1);
  }
  #cp-concierge.open .cp-concierge-menu { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
  .cp-concierge-menu a {font-family: var(--font-body); 
    display: flex; align-items: center; gap: 11px;
    background: rgba(43,38,34,0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 11px 20px;
    border-radius: 40px;
    text-decoration: none;
    font-size: var(--fs-body); font-weight: 500;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
    white-space: nowrap;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
  }
  .cp-concierge-menu a:hover {
    background: rgba(43,38,34,0.92);
    border-color: rgba(181,86,44,0.45);
    transform: translateX(-4px) scale(1.02);
  }
  .cp-concierge-menu a .ico { color: var(--gold-light); font-size: 14px; }
  .cp-concierge-toggle {font-family: var(--font-body); 
    width: 58px; height: 58px;
    border-radius: 50%;
    background: rgba(43,38,34,0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(181,86,44,0.4);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-light); font-size: var(--fs-body);
    box-shadow: 0 10px 32px rgba(0,0,0,0.22), 0 4px 12px rgba(181,86,44,0.18);
    transition: transform .3s cubic-bezier(.34,1.4,.64,1), background .3s ease, border-color .3s ease;
   font-weight: 600; letter-spacing: 0.02em;}
  .cp-concierge-toggle:hover {
    transform: scale(1.08);
    background: rgba(43,38,34,0.92);
    border-color: var(--gold);
  }
  .cp-concierge-toggle .icon-plus { display:inline-block; transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
  #cp-concierge.open .cp-concierge-toggle .icon-plus { transform: rotate(135deg); }

  /* Respect reduced motion across both new pages */
  @media (prefers-reduced-motion: reduce) {
    #about-page *, #contact-page * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  }



/* ---- Dashboard onboarding progress (renderProgressTracker in script.js) ---- */
.dash-progress{
  --prog-done: var(--dash-good, #3F6B4F);
  --prog-todo: #D9C4A3;
  --prog-todo-bg: #F5EEE2;
  display: flex; list-style: none; margin: 0 0 18px; padding: 16px 12px;
  background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px;
}
.dash-progress:empty{ display: none; }
.dash-progress__step{
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 0 4px;
}
/* Connector line to the previous step, green once this step is reached. */
.dash-progress__step + .dash-progress__step::before{
  content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px;
  background: var(--prog-todo); z-index: 0;
}
.dash-progress__step.is-done + .dash-progress__step::before{ background: var(--prog-done); }
.dash-progress__dot{
  position: relative; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff;
  background: var(--prog-todo-bg); border: 2px solid var(--prog-todo);
}
.dash-progress__step.is-done .dash-progress__dot{ background: var(--prog-done); border-color: var(--prog-done); }
.dash-progress__step.is-current .dash-progress__dot{
  background: var(--prog-todo); border-color: var(--prog-todo);
  animation: dash-progress-blink 1.2s ease-in-out infinite;
}
.dash-progress__label{ font-size: 12px; font-weight: 600; color: var(--navy, #3D3631); line-height: 1.3; margin-top: 4px; }
.dash-progress__status{ font-size: 11px; color: var(--text-muted, #767676); }
.dash-progress__step.is-done .dash-progress__status{ color: var(--prog-done); }
.dash-progress__step.is-current .dash-progress__status{ color: #8a6d1a; }
@keyframes dash-progress-blink{
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(181,86,44,0.45); }
  50%      { opacity: 0.45; box-shadow: 0 0 0 6px rgba(181,86,44,0); }
}
@media (prefers-reduced-motion: reduce){
  .dash-progress__step.is-current .dash-progress__dot{ animation: none; }
}
@media (max-width: 560px){
  .dash-progress{ padding: 12px 4px; }
  .dash-progress__label{ font-size: 10.5px; }
  .dash-progress__status{ display: none; }
}

/* ---- Free trial / payment pending banner (renderTrialBanner in script.js) ---- */
.dash-trial-banner{
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 12px; padding: 12px 16px; border-radius: 10px;
  font-size: 13px; line-height: 1.45;
}
.dash-trial-banner[hidden]{ display: none; }
.dash-trial-banner i{ font-size: 16px; margin-top: 2px; flex: 0 0 auto; }
.dash-trial-banner strong{ display: block; font-size: 14px; }
.dash-trial-banner span{ display: block; opacity: .9; }
.dash-trial-banner.is-trial{ background: #F5EEE2; color: #6B5320; border: 1px solid #E6D6B8; }
.dash-trial-banner.is-pending{ background: #FBEAEA; color: #8E2A22; border: 1px solid #F0C8C4; }
.dash-trial-banner > div{ flex: 1 1 auto; min-width: 0; }
.dash-trial-banner__cta{
  flex: 0 0 auto; align-self: center;
  padding: 8px 14px; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: #B3261E;
}
.dash-trial-banner__cta:hover{ background: #8E2A22; }

/* ---- "Free tier service completed" note under the visit timelines (vlFreeServiceDoneNoteHtml) ---- */
.vl-free-done-note{
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: #F5EEE2; border: 1px solid #E6D6B8; color: #6B5320;
  font-size: 13px; line-height: 1.45;
}
.vl-free-done-note > i{ font-size: 16px; color: var(--dash-good, #3F6B4F); flex: 0 0 auto; }
.vl-free-done-note > div{ flex: 1 1 200px; min-width: 0; }
.vl-free-done-note strong{ display: block; font-size: 14px; color: var(--navy, #3D3631); }
.vl-free-done-note span{ display: block; }
.vl-free-done-note button{
  flex: 0 0 auto; padding: 8px 14px; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: #B5562C;
}
.vl-free-done-note button:hover{ background: #9C7A2E; }
@media (max-width: 560px){
  .dash-trial-banner{ flex-wrap: wrap; }
  .dash-trial-banner__cta{ width: 100%; }
}

/* ─── RESPONSIVE FIXES: hero stats bar + service cards ───
   The stats bar used to be absolutely positioned over the bottom of a
   locked-height hero, so on short or narrow screens it covered the CTA
   buttons. It now sits in normal flow beneath the hero copy, so the two
   can never overlap, and wraps into a grid on small screens. */
#hero {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
  min-height: 100vh;
  padding-bottom: 0;
}
#hero .hero-grid {
  flex: 1 0 auto;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 40px;
}
#hero-stats {
  position: relative;
  flex: 0 0 auto;
  bottom: auto; left: auto; right: auto;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  #hero-stats { padding: 16px 32px; flex-wrap: wrap; row-gap: 16px; }
  .stat-item { flex: 1 1 30%; min-width: 200px; padding: 0 16px; border-right: none; }
  .stat-item:first-child { padding-left: 16px; }
}
@media (max-width: 600px) {
  /* 2-column × 3-row grid: six stats, two per row. Cells are about
     half the bar wide, so each card stacks icon, number, label and the
     short sub-line. */
  #hero-stats { padding: 18px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat-item {
    min-width: 0; padding: 16px 10px; flex: none;
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; text-align: center;
    /* Elevated card with rounded corners and a faint outline. The glow
       comes from the same accent line used above the stats bar — solid
       terracotta fading out at both ends, with a soft halo — drawn along
       the top and bottom edges (::before / ::after below). */
    position: relative;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    background: linear-gradient(160deg, #3A312B 0%, #26201C 100%);
    box-shadow:
      0 12px 24px rgba(0,0,0,0.5),
      0 3px 8px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .stat-item:first-child { padding-left: 10px; }
  /* The base rule drops the last item's right border; keep the full outline. */
  .stat-item:last-child { border-right: 1px solid rgba(255,255,255,0.07); }
  .stat-item::before, .stat-item::after {
    content: '';
    position: absolute;
    left: 10px; right: 10px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #B5562C 18%, #D17A4F 50%, #B5562C 82%, transparent 100%);
    box-shadow: 0 0 10px rgba(209,122,79,0.6);
    pointer-events: none;
  }
  .stat-item::before { top: -1px; }
  .stat-item::after { bottom: -1px; }
  .stat-num { min-width: 0; font-size: 18px; }
  .stat-text { align-items: center; }
  .stat-sub, .stat-sub h3 { font-size: 10.5px; line-height: 1.35; }
  .stat-label h2, .stat-sub h3 { margin: 0; }
}
@media (max-height: 700px) and (min-width: 981px) {
  /* Short laptop windows: drop the fixed viewport height entirely. */
  #hero { min-height: 0; }
}
/* Portrait screens (tablets held upright, phones): the viewport is far taller than
   the hero content, and a 100vh floor left big empty bands above and below it. Let
   the hero size to its content instead, with modest breathing room. */
@media (orientation: portrait) {
  #hero { min-height: 0; padding-top: 88px; }
  #hero .hero-grid { padding-top: 32px; padding-bottom: 48px; }
}

/* Service cards: 3 columns on desktop, 2 on tablet, a single stacked
   column (image, then its info, then the next card) on phones. */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  #property-care { padding: 72px 0; }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; gap: 20px; }
  #property-care { padding: 56px 0; }
  .services-header { margin-bottom: 32px; }
  .services-title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .service-card { min-width: 0; }
  .service-card:hover { transform: none; }
  .service-img { height: 200px; }
  .service-body { padding: 20px 20px 22px; }
  .service-name { font-size: 22px; overflow-wrap: anywhere; }
  /* No hover on touch: keep the call-to-action visible. */
  .service-cta { opacity: 1; transform: none; }
}
@media (hover: none) {
  .service-cta { opacity: 1; transform: none; }
}

/* ─── JOURNEY, PHONE: each step's picture opens right under that step ───
   A single shared picture at the top of a seven-row list was usually
   scrolled out of view when a lower step was tapped, so every tap looked
   like it showed the same image. */
@media (max-width: 640px) {
  .jg-steps { --jg-stage: 0px; margin-top: 0; padding-top: 0; }
  .jg-steps::before { top: 36px; bottom: 36px; }
  .jg-step { cursor: pointer; }
  .jg-pop,
  .jg-step:first-child .jg-pop,
  .jg-step:last-child .jg-pop,
  .jg-step.is-active .jg-pop,
  .jg-step:first-child.is-active .jg-pop,
  .jg-step:last-child.is-active .jg-pop {
    position: static;
    grid-column: 2;
    grid-row: 4;
    transform: none;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.3s ease, margin 0.3s ease;
  }
  .jg-step.is-active .jg-pop,
  .jg-step:first-child.is-active .jg-pop,
  .jg-step:last-child.is-active .jg-pop {
    max-height: 260px;
    opacity: 1;
    margin-top: 12px;
  }
  .jg-pop img { width: 100%; max-width: 100%; height: 190px; object-fit: cover; }
  /* Step 7's picture is portrait; keep the person and laptop in the cropped band. */
  .jg-step:last-child .jg-pop img { object-position: 50% 45%; }
  .jg-pop::after { display: none; }
}

/* ─── RESPONSIVE: WHY SECTION, CTA, TESTIMONIALS, STATS (all phone sizes) ─── */
@media (max-width: 900px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .why-visual { height: 340px; margin-bottom: 24px; }
  .why-phone { right: 12px; bottom: -24px; width: 150px; }
  .why-metrics { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .why-feat-title, .why-feat-desc { overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  .cta-btns { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 4px; }
  .btn-cta-primary, .btn-cta-secondary {
    padding: 16px 20px; width: 100%; box-sizing: border-box;
    justify-content: center; text-align: center;
  }
  .cta-title, .cta-title em { overflow-wrap: break-word; }
  .testimonial-slide { min-width: 0; }
  .t-content { min-width: 0; }
  .stat-num { min-width: 56px; }
}
@media (max-width: 380px) {
  .why-visual { height: 280px; }
  .why-phone { width: 132px; }
  .hero-sub { font-size: 16px; }
}

/* Why section visual on small screens: the status-phone tucks under the
   photo in normal flow instead of floating over the metrics above it. */
@media (max-width: 900px) {
  .why-visual { height: auto; margin-bottom: 0; }
  .why-villa { height: auto; }
  .why-phone {
    position: relative; right: auto; bottom: auto;
    width: 200px; max-width: 70%;
    margin: -56px 16px 0 auto;
  }
}
@media (max-width: 900px) {
  .why-phone .phone-screen { overflow: hidden; }
  .why-phone .phone-screen * { min-width: 0; overflow-wrap: anywhere; }
}

/* ─── RESPONSIVE: inner pages on phones (Services, Products, About, Contact) ─── */
@media (max-width: 700px) {
  /* Footer bottom bar: copyright above the legal links instead of side by side. */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-links { flex-wrap: wrap; gap: 8px 20px; }
  .footer-copy, .footer-hq { overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
  /* Hero banners lost their side padding to a `padding: Npx 0` override. */
  .ab-hero-inner, .cp-banner-inner { padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
  .ab-hero-inner { padding-top: 120px; padding-bottom: 56px; }
  .ab-hero-eyebrow, .cp-banner-eyebrow { font-size: 12px; letter-spacing: 0.18em; }
  .ab-hero-h1, .cp-banner-h2 { font-size: clamp(2rem, 9vw, 2.6rem); }

  /* Centred section heads: drop the stray eyebrow rule that skewed them. */
  .ab-story-head { margin-bottom: 40px; }
  .ab-story-head .eyebrow::before, .ab-story-head .eyebrow::after { display: none; }
  .ab-story-head .eyebrow { justify-content: center; text-align: center; }
  #ab-story { padding: 64px 0; }

  /* Timeline cards were touching where the two rows meet. */
  .ab-milestones-row2 { margin-top: 32px; }
  .ab-stat-label, .ab-stat-num .suffix { letter-spacing: 0.12em; }
  .ab-stat-grid { gap: 28px 16px; }

  /* Services category cards: icon + chevron on one line, text below at full width. */
  .sp2-cat-body { flex-wrap: wrap; padding: 20px 20px 22px; gap: 12px 14px; align-items: center; }
  .sp2-cat-icon { order: 1; margin-top: 0; }
  .sp2-cat-arrow { order: 2; margin-left: auto; }
  .sp2-cat-text { order: 3; flex: 1 1 100%; }
  .sp2-cat-title { font-size: 22px; }
  .sp2-cat-accordion-inner { margin: 0 20px; padding: 6px 0 24px; }
  .sp2-cat-img { height: 170px; }
  .svc-item-top { flex-wrap: wrap; row-gap: 6px; }
  .svc-item-name { font-size: 16px; }
  .sp2-book-cta { width: 100%; justify-content: center; box-sizing: border-box; padding: 13px 18px; }
}

/* ─── DASHBOARD: Visit Calendar on phones ───
   The 260px month label and 36px card padding pushed the 7-column grid
   wider than the screen, cutting off Saturday and the next-month arrow. */
@media (max-width: 640px) {
  .vcal-layout { width: 100%; }
  .vcal-card { padding: 20px 14px 24px; min-height: 0; }
  .vcal-toolbar { gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
  .vcal-month-label { min-width: 0; flex: 1 1 auto; font-size: 20px; }
  .vcal-grid { gap: 6px; }
  .vcal-grid > * { min-width: 0; }
  .vcal-day { padding: 6px 2px 18px; min-height: 48px; }
  .vcal-day .vcal-day-num { font-size: 14px; }
  .vcal-dow { letter-spacing: 0.02em; font-size: 9px; }
}
@media (max-width: 640px) {
  .vcal-day.is-today::before { display: none; }
}

/* ─── FEATURE PARITY ON PHONES ───
   Things that exist on desktop but were switched off on small screens. */
@media (max-width: 980px) {
  /* The 7-step hero picture journey shows under the hero text. */
  #hero-visual {
    display: block;
    max-width: 560px;
    width: 100%;
    margin: 8px auto 0;
  }
  #hero-visual .hv-frame { border-radius: 20px; }
  #hero .hero-grid { gap: 32px; }
  #hv-progress { margin-top: 12px; }
}
@media (max-width: 640px) {
  .dash-welcome__cta { display: inline-flex; margin-top: 12px; }
}
@media (max-width: 560px) {
  .dash-progress__status { display: block; }
}
@media (hover: none) {
  /* Gallery captions are otherwise only reachable by hovering. */
  .mg-item__overlay { opacity: 1; }
}

/* Sign-in / onboarding on phones: a close button that is always reachable
   (login mode hides "Save & exit", and there is no Esc key on a phone) and a
   shorter brand panel so the form starts higher up the screen. */
#onboarding-modal-overlay .onb-close-btn { display: none; }
@media (max-width: 980px) {
  #onboarding-modal-overlay .onb-close-btn {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 12px; right: 12px; z-index: 20;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(43,38,34,0.65); color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #onboarding-modal-overlay .portal-visual { height: 190px; }
  #onboarding-modal-overlay .visual-title { font-size: 21px; }
}

/* Notification dropdown on phones: it was anchored to the bell button and
   opened off the left edge of the screen. Pin it to the viewport instead. */
@media (max-width: 640px) {
  #dash-notif-dropdown {
    position: fixed !important;
    top: 72px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 96px) !important;
  }
}

/* Calendar visit details on phones: the popover is anchored to the tapped
   date, which left most of it below the visible screen. Show it as a bottom
   sheet instead, always fully on screen and scrollable. */
@media (max-width: 640px) {
  .vcal-popover {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-width: none !important;
    max-height: 78vh; overflow-y: auto;
    border-radius: 20px 20px 0 0;
    transform: translateY(24px) !important;
    z-index: 60;
    box-sizing: border-box;
  }
  .vcal-popover.is-open { transform: translateY(0) !important; }
  .vcal-popover::before { display: none !important; }
}
@media (max-width: 640px) { .vcal-popover { padding-bottom: 84px; } }

/* Pricing cards: the "Most Popular" badge sits half outside the card, so the
   card must not clip it; leave room above the featured card on phones. */
#pricing-page .pp-card { overflow: visible; }
@media (max-width: 1024px) {
  #pricing-page .pp-card.pp-featured { margin-top: 28px; }
}
@media (max-width: 640px) {
  #pricing-page .pp-badge { font-size: 11px; padding: 6px 14px; letter-spacing: 0.1em; }
  #pricing-page .pp-cards-grid { row-gap: 28px; }
}


/* ─── TYPOGRAPHY TWEAKS (homepage) ───
   1. No decorative dash lines before eyebrows / labels / the slide counter.
   2. Hero paragraph a size smaller.
   3. Hero stat headings white (matching the stat numbers) and larger, in the
      same face as the "Property Intelligence & Protection Platform" eyebrow. */
[class*="eyebrow"]::before,
[class*="eyebrow"]::after,
.hv-badge::before,
.sp-tab-label::before { display: none !important; }
.eyebrow, .hero-eyebrow, [class*="eyebrow"] { gap: 0; }

.hero-sub { font-size: 18px; line-height: 1.7; }

#hero-stats .stat-label,
#hero-stats .stat-label h2 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .hero-sub { font-size: 16px; }
  #hero-stats .stat-label, #hero-stats .stat-label h2 { font-size: 10px; letter-spacing: 0.06em; line-height: 1.35; }
}

/* ─── Products plan banner: size to its content ───
   The banner used to be 78vh tall with its copy centred, which left big empty
   bands above and below a short block of text. It now wraps the copy with
   modest padding; the floating plan tabs still clear the top edge. */
.pr-plan-banner {
  min-height: 0;
  padding: 88px 0 56px;
}
@media (max-width: 760px) {
  .pr-plan-banner { padding: 78px 0 40px; }
  .pr-plan-banner-content { padding: 0 24px; }
}

/* The plan banner photos are bright, wide (3:1) artwork with the copy side
   left open on the left and the subject on the right. A dark wash over the
   whole picture would dull it, so the overlay now only darkens the copy side
   and fades to clear before the subject. */
.pr-plan-banner-bg { background-position: right center; }
.pr-plan-banner-overlay {
  background: linear-gradient(90deg,
    rgba(30,26,23,0.92) 0%,
    rgba(30,26,23,0.82) 30%,
    rgba(30,26,23,0.42) 52%,
    rgba(30,26,23,0) 72%);
}
@media (max-width: 760px) {
  /* Narrow screens crop the wide picture, so keep the subject (right side)
     in frame and darken evenly enough for the stacked copy to stay legible. */
  .pr-plan-banner-bg { background-position: 78% center; }
  .pr-plan-banner-overlay {
    background: linear-gradient(180deg, rgba(30,26,23,0.82) 0%, rgba(30,26,23,0.7) 55%, rgba(30,26,23,0.45) 100%);
  }
}

/* ─── Services hero: size to its content ───
   Was min-height 60vh with 128px/56px padding and a 440px orb, which left
   large empty bands above and below the copy. Padding now just clears the
   fixed navbar, and the orb is scaled down (visual only) so it no longer
   props the banner open. */
#sp-hero { min-height: 0; padding: 104px 0 44px; }
#sp-hero .sp-hero-orb { transform: scale(0.78); margin: -48px 0; }
@media (max-width: 760px) {
  #sp-hero { padding: 92px 0 36px; }
}

/* "Everything in Essential, plus:" chip — sits between the intro line and the
   View Pricing button, clearly readable on the photo banner. */
.pr-plan-banner .pr-plan-inherits-badge {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #FAF5EC;
  background: rgba(43,38,34,0.55);
  border: 1px solid rgba(240,230,212,0.38);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.pr-plan-banner .pr-plan-inherits-badge::before {
  content: '';
  flex: 0 0 18px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ─── Dashboard overview hero: text on a left-to-right fade over the map ───
   Map fills the card; a dark gradient on the left (solid behind the copy,
   fading to nothing by the right third) keeps every word readable while the
   pin and streets stay visible on the right. Supersedes the earlier hard
   50/50 split. */
#dash-view-overview .vo-hero {
  display: flex;
  align-items: center;
  min-height: 320px;
}
#dash-view-overview .vo-hero iframe {
  position: absolute;
  /* The embed centres the map on the pin. Making the frame 150% as wide and
     pinning it to the left edge puts that centre — the pin — at 75% of the
     card's width (the overflow is clipped by the card), clear of the dark
     copy side instead of sitting in the middle of the fade. */
  top: 0; bottom: 0; left: 0; right: auto;
  grid-column: auto; grid-row: auto;
  width: 150%; height: 100%; min-height: 0;
  pointer-events: auto;
}
#dash-view-overview .vo-hero::after {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(30,26,23,0.97) 0%,
    rgba(30,26,23,0.92) 32%,
    rgba(30,26,23,0.55) 48%,
    rgba(30,26,23,0.12) 60%,
    rgba(30,26,23,0) 68%);
}
#dash-view-overview .vo-hero-content {
  grid-column: auto; grid-row: auto;
  width: auto;
  max-width: 58%;
  padding: 32px 36px;
  display: block;
  z-index: 2;
}
#dash-view-overview .vo-hero-content h2,
#dash-view-overview .vo-hero-content p { text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
#dash-view-overview .vo-hero-content p { max-width: 460px; }
@media (max-width: 760px) {
  #dash-view-overview .vo-hero { align-items: flex-end; min-height: 380px; }
  #dash-view-overview .vo-hero::after {
    background: linear-gradient(180deg,
      rgba(30,26,23,0) 0%,
      rgba(30,26,23,0) 38%,
      rgba(30,26,23,0.85) 62%,
      rgba(30,26,23,0.97) 100%);
  }
  /* Stacked layout: copy sits in the lower part, so lift the pin to ~28% of
     the card's height: a frame 144% as tall, starting 44% above the card,
     centres the pin there and still reaches the bottom edge. Still 150%
     wide so the pin stays toward the right (75% across), as on desktop. */
  #dash-view-overview .vo-hero iframe { width: 150%; top: -44%; bottom: auto; height: 144%; }
  #dash-view-overview .vo-hero-content { max-width: 100%; padding: 22px 20px; }
}


/* Overview stat cards: "latest" count on the left, "total" on the right. */
#dash-view-overview .vo-stat-body { width: 100%; display: flex; flex-direction: column; gap: 10px; }
#dash-view-overview .vo-stat-pair {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
#dash-view-overview .vo-stat-pair > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#dash-view-overview .vo-stat-pair-right {
  align-items: flex-end;
  text-align: right;
  padding-left: 16px;
  border-left: 1px solid rgba(43,38,34,0.1);
}
#dash-view-overview .vo-stat-pair-right p.vo-label { color: var(--text-muted); font-size: 16px; }

/* ─── Calendar: clearer status colours ───
   Completed = a proper green, Upcoming = brown, both noticeably stronger than
   before (the old 10% tints and muted green read as pale / near-black next to
   ordinary days). Scoped to the calendar view so other screens keep their palette. */
#dash-view-calendar {
  --dash-good: #1E7B45;
  --dash-good-bg: rgba(30,123,69,0.22);
  --dash-high: #8A4A22;
  --dash-high-bg: rgba(138,74,34,0.20);
}
#dash-view-calendar .vcal-day.is-completed { border-color: rgba(30,123,69,0.45); }
#dash-view-calendar .vcal-day.is-upcoming  { border-color: rgba(138,74,34,0.40); }
#dash-view-calendar .vcal-day.is-completed .vcal-day-num,
#dash-view-calendar .vcal-day.is-upcoming  .vcal-day-num { font-weight: 700; }


/* Contact page: message shown when "Speak to Concierge" is clicked on a device that cannot call. */
.cp-concierge-msg {
  margin: 14px 0 4px;
  padding: 12px 16px;
  max-width: 560px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--charcoal-light, #3D3631);
  background: rgba(181,86,44,0.08);
  border: 1px solid rgba(181,86,44,0.32);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
}
.cp-concierge-msg strong { color: var(--gold-dark); white-space: nowrap; }
.cp-concierge-msg.is-shown { animation: cpMsgIn .25s ease; }
@keyframes cpMsgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ─── Pricing: one filled "Get Started" at a time ───
   All three buttons share one look (outlined terracotta). Only the card that
   is currently active — Investor by default, or whichever card the pointer is
   on — gets the filled button, so there is a single clear call to action
   instead of three different styles competing. On narrow screens, where cards
   don't take the active state, the featured (Investor) card keeps the fill. */
#pricing-page .pp-card .pp-cta,
#pricing-page .pp-card .pp-cta.primary {
  background: #fff;
  color: var(--gold, #B5562C);
  border: 1.5px solid var(--gold, #B5562C);
  box-shadow: none;
  filter: none;
}
#pricing-page .pp-card.pp-active .pp-cta,
#pricing-page .pp-card.pp-active .pp-cta.primary,
#pricing-page .pp-cards-grid:not(:has(.pp-active)) .pp-card.pp-featured .pp-cta {
  /* the rich dark-to-terracotta gradient Investor's button always had */
  background: linear-gradient(135deg, var(--navy-light, #3D3631) 0%, var(--gold, #B5562C) 130%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(181,86,44,0.3);
}
#pricing-page .pp-card.pp-active .pp-cta:hover,
#pricing-page .pp-card.pp-active .pp-cta.primary:hover,
#pricing-page .pp-cards-grid:not(:has(.pp-active)) .pp-card.pp-featured .pp-cta:hover {
  filter: brightness(1.1);
  box-shadow: 0 16px 38px rgba(181,86,44,0.45);
}
/* an outlined button fills with plain terracotta only while it is hovered */
#pricing-page .pp-card:not(.pp-active) .pp-cta:hover {
  background: var(--gold, #B5562C);
  color: #fff;
  border-color: var(--gold, #B5562C);
}

/* ─── Products banner: the plan name tag, highlighted ───
   "ESSENTIAL PLAN" / "INVESTOR PLAN" / "PREMIUM PLAN" was small dim terracotta
   text that disappeared into the photo. It is now a clear filled tag — the same
   for all three plans — and the View Pricing button text is brightened to match. */
.pr-plan-banner .pr-plan-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  margin-bottom: 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--gold-light, #D17A4F) 0%, var(--gold, #B5562C) 100%);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(181,86,44,0.45);
}
.pr-plan-banner .pr-plan-eyebrow::before {
  /* a small marker dot in place of the old dash line */
  display: inline-block !important;
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.28);
  flex: 0 0 8px;
}
.pr-plan-banner .pr-view-pricing-btn-secondary {
  color: #FAF5EC;
  border-color: rgba(240,230,212,0.7);
}
.pr-plan-banner .pr-view-pricing-btn-secondary:hover {
  background: var(--gold, #B5562C);
  border-color: var(--gold, #B5562C);
  color: #fff;
}

/* =========================================================================
   RESPONSIVE HARDENING
   Cross-device fixes only: no colours, fonts or brand styling change here, so
   the theme stays identical on every screen. Touch rules are scoped to
   coarse pointers, so mouse-driven desktop layouts are untouched.
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; -webkit-tap-highlight-color: transparent; }
img, video, svg, canvas { max-width: 100%; }
img, video { height: auto; }

/* Notched phones / landscape: keep fixed controls out of the safe areas. */
.fab-group {
  right: max(24px, env(safe-area-inset-right));
  bottom: max(80px, calc(env(safe-area-inset-bottom) + 16px));
}
@media (max-width: 600px) {
  .fab-group {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (hover: none) and (pointer: coarse) {
  /* 16px minimum stops iOS Safari zooming the page when a field is focused. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px !important; }

  /* Visual size is unchanged; the tappable area grows to 44px. */
  .fab-btn::after, .t-nav-btn::after {
    content: ''; position: absolute; inset: -4px;
  }
  .t-nav-btn { position: relative; }
  .service-cta, .bac-cta-link {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer-col-links { gap: 0; }
  .footer-col-links a, #pricing-page .footer-col-links a {
    display: flex; align-items: center; min-height: 44px;
  }
  .footer-links { gap: 0 8px; }
  .footer-links a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  }
  .jg-num { font-size: 12px; }
}


/* Plan banners: new artwork on desktop, original photos on phones (set per plan in script.js). */
.pr-plan-banner-bg { background-image: var(--banner-desktop); }
@media (max-width: 760px) {
  .pr-plan-banner-bg { background-image: var(--banner-mobile); background-position: center; }
}


/* About page hero: italic phrase drops to its own line on desktop only. */
@media (min-width: 761px) {
  .ab-hero-h1 em { display: block; }
}

/* Contact banner: on desktop, line the text up with the cards below (same container edges). */
@media (min-width: 761px) {
  .cp-banner-inner { max-width: 1260px; padding-left: 40px; padding-right: 40px; }
}

/* Contact + About hero banners: bright artwork with the copy side left open.
   Overlay only darkens the text side; subject stays in frame on phones. */
#cp-banner-bg { background-image: url('../img/pages/contact-hero.jpg?v=1'); background-size: cover; background-position: right center; opacity: 1; }
#ab-hero-bg   { background-image: url('../img/pages/about-hero.jpg?v=1');   background-size: cover; background-position: right center; opacity: 1; }
#cp-banner::after, #ab-hero::after {
  background: linear-gradient(90deg, rgba(43,38,34,0.92) 0%, rgba(43,38,34,0.80) 30%, rgba(43,38,34,0.38) 52%, rgba(43,38,34,0) 72%);
}
@media (max-width: 760px) {
  #cp-banner-bg, #ab-hero-bg { background-position: 78% center; }
  #cp-banner::after, #ab-hero::after {
    background: linear-gradient(180deg, rgba(43,38,34,0.82) 0%, rgba(43,38,34,0.7) 55%, rgba(43,38,34,0.45) 100%);
  }
}
/* Contact banner: italic phrase on its own line on desktop (same as About). */
@media (min-width: 761px) {
  .cp-banner-h2 em { display: block; }
}

/* Phones: no terracotta plan pill; the heading reads e.g. "Vlookasset Essential Plan" instead. */
.pr-plan-suffix { display: none; }
@media (max-width: 760px) {
  .pr-plan-banner .pr-plan-eyebrow { display: none; }
  .pr-plan-suffix { display: inline; }
}

/* Phones: with the plan pill gone, push the heading below the Essential/Investor/Premium tabs. */
@media (max-width: 760px) {
  .pr-plan-banner { padding-top: 128px; }
}


/* ─── HERO: app store badges ─── */
.hero-apps { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-apps[hidden], .hero-app-badge[hidden] { display: none; }
.hero-app-badge { display: inline-flex; align-items: center; line-height: 0; transition: transform .2s ease, opacity .2s ease; }
.hero-app-badge:hover { transform: translateY(-2px); opacity: .92; }
.hero-app-badge img { display: block; width: auto; max-width: none; }
.hero-app-badge#hero-app-android img { height: 56px; }
.hero-app-badge#hero-app-ios img { height: 40px; }
/* Google's badge file carries transparent padding; trim it so both badges look the same size. */
.hero-app-badge#hero-app-android { margin: -8px -9px; }
@media (max-width: 600px) { .hero-apps { margin-top: 20px; } }


/* ─── Home page Products: four plans in one row ─── */
.services-grid.product-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1100px) { .services-grid.product-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .services-grid.product-overview-grid { grid-template-columns: 1fr; } }
.service-tag, .pp-name-tag, .plan-name-tag { font-family: var(--font-body); font-size: 0.55em; font-style: normal; letter-spacing: 0.02em; color: var(--gold, #B5562C); white-space: nowrap; }
/* Recommended / Exclusive tags sit on their own line so all four card titles line up. */
.product-overview-grid .service-name { min-height: 2.9em; }
.product-overview-grid .service-tag { display: block; margin-top: 2px; }


/* ─── One-time services: categories, service list with Add to cart, cart ─── */
#onboarding-modal-overlay .cat-tile { position: relative; }
#onboarding-modal-overlay .cat-tile h4 { flex: 1; }
#onboarding-modal-overlay .cat-count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--gold); color: #fff;
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
#onboarding-modal-overlay .cat-count[hidden] { display: none; }
#onboarding-modal-overlay .cat-tile.has-items { border-color: var(--gold-light); }
#onboarding-modal-overlay .svc-list { border: 1.5px solid var(--border-soft); border-radius: 10px; background: #fff; margin: -4px 0 16px; padding: 6px 14px 10px; max-height: 280px; overflow-y: auto; }
#onboarding-modal-overlay .svc-list[hidden], #onboarding-modal-overlay .cart-panel[hidden] { display: none; }
#onboarding-modal-overlay .svc-list__title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark); margin: 8px 0 4px; }
#onboarding-modal-overlay .svc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
#onboarding-modal-overlay .svc-row:last-child { border-bottom: none; }
#onboarding-modal-overlay .svc-row__name { font-size: 14px; color: var(--navy); }
#onboarding-modal-overlay .svc-add { flex-shrink: 0; border: 1.5px solid var(--gold); background: #fff; color: var(--gold-dark); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
#onboarding-modal-overlay .svc-add:hover { background: var(--cream); }
#onboarding-modal-overlay .svc-add.added { background: var(--gold); color: #fff; }
#onboarding-modal-overlay .cart-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
#onboarding-modal-overlay .cart-bar__btn { border: 1.5px solid var(--gold); background: var(--cream); color: var(--gold-dark); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
#onboarding-modal-overlay .cart-bar__btn:disabled { opacity: .5; cursor: not-allowed; }
#onboarding-modal-overlay .cart-panel { border: 1.5px solid var(--gold-light); background: var(--cream); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; max-height: 260px; overflow-y: auto; }
#onboarding-modal-overlay .cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: var(--navy); }
#onboarding-modal-overlay .cart-clear { background: none; border: none; color: var(--gold-dark); font-size: 12.5px; cursor: pointer; text-decoration: underline; }
#onboarding-modal-overlay .cart-group h5 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-dark); margin: 10px 0 2px; }
#onboarding-modal-overlay .cart-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; color: var(--navy); }
#onboarding-modal-overlay .cart-remove { background: none; border: none; cursor: pointer; color: var(--text-muted, #767676); padding: 4px 6px; }
#onboarding-modal-overlay .cart-remove:hover { color: #b3261e; }


/* ─── Services page: Add to cart ─── */
.svc-cart-btn {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--gold, #B5562C); background: #fff; color: var(--gold-dark, #8F3F1D);
  border-radius: 999px; padding: 6px 14px; font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.svc-cart-btn:hover { background: var(--cream, #F5EBDD); }
.svc-cart-btn.added { background: var(--gold, #B5562C); color: #fff; }
.sp2-cat-accordion .svc-item-top { gap: 12px; flex-wrap: wrap; }
.svc-cartbar { position: fixed; left: 0; right: 0; bottom: 18px; z-index: 950; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.svc-cartbar[hidden], .svc-cartmodal[hidden] { display: none; }
.svc-cartbar__inner {
  pointer-events: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;
  background: var(--navy, #2B2622); color: #fff; border-radius: 999px; padding: 10px 12px 10px 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35); font-family: var(--font-body); font-size: 14px;
}
.svc-cartbar__count i { color: var(--gold-light, #D17A4F); margin-right: 4px; }
.svc-cartbar__actions { display: inline-flex; gap: 8px; }
.svc-cartbar__view { border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.svc-cartbar__go { border: none; background: var(--gold, #B5562C); color: #fff; border-radius: 999px; padding: 9px 18px; font-weight: 600; cursor: pointer; font-family: var(--font-body); }
.svc-cartmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.svc-cartmodal__backdrop { position: absolute; inset: 0; background: rgba(20,16,12,.6); }
.svc-cartmodal__box { position: relative; background: #fff; border-radius: 16px; width: min(560px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.svc-cartmodal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(181,86,44,.18); }
.svc-cartmodal__head h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--navy); margin: 0; }
.svc-cartmodal__x { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-muted, #767676); }
.svc-cartmodal__body { padding: 8px 22px 12px; overflow-y: auto; }
.svc-cartmodal__body h5 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark, #8F3F1D); margin: 16px 0 4px; font-family: var(--font-body); }
.svc-cartmodal__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(43,38,34,.07); font-size: 14.5px; color: var(--navy); font-family: var(--font-body); }
.svc-cartmodal__rm { background: none; border: none; cursor: pointer; color: var(--text-muted, #767676); padding: 4px 6px; }
.svc-cartmodal__rm:hover { color: #b3261e; }
.svc-cartmodal__empty { padding: 30px 0; text-align: center; color: var(--text-muted, #767676); }
.svc-cartmodal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid rgba(181,86,44,.18); }
.svc-cartmodal__clear { background: none; border: none; color: var(--gold-dark, #8F3F1D); text-decoration: underline; cursor: pointer; font-size: 14px; }


/* ─── Services page hero: animated video (replaces the orbit animation) ─── */
.sp-hero-video {
  width: 100%; max-width: 620px; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  background: #0b1626; border: 1px solid rgba(181,86,44,0.35);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 60px rgba(181,86,44,0.12);
}
.sp-hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Keyed hero video: no card, just the animated logo. The whole frame is shown, with no
   edge fade, so the top of the shield and the lettering at the bottom are never cut. */
.sp-hero-video { position: relative; }
.sp-hero-video.is-keyed { background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
.sp-hero-video.is-keyed canvas { display: block; width: 100%; height: 100%; }
.sp-hero-video.is-keyed video { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

/* ============================================================
   DASHBOARD — PLANS & SERVICES (Explore + Cart, as in the app)
   ============================================================ */
.ps-nav-count{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background: var(--gold); color:#fff; font-family: var(--font-mono); font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.ps-nav-count[hidden]{ display:none; }
.dash-shell.is-collapsed .ps-nav-count{ position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px; font-size:10px; }

/* "New" dot on a sidebar item: something arrived there since the customer
   last opened it. No number — the bell keeps the count. The ring matches
   the sidebar so the dot reads cleanly over the icon when collapsed. */
.dash-nav-dot{ margin-left:auto; flex:0 0 10px; width:10px; height:10px; border-radius:50%; background:#D32F2F; box-shadow:0 0 0 2px #2B2622; }
.dash-nav-dot__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (min-width: 981px){
  .dash-shell.is-collapsed .dash-nav-dot{ position:absolute; top:7px; left:calc(50% + 4px); margin:0; }
}

#dash-view-plans-services .ps-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
#dash-view-plans-services .ps-header__eyebrow{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:0.25em; text-transform:uppercase; color: var(--text-muted); font-weight:500; }
#dash-view-plans-services .ps-header h1{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-h2); color: var(--navy); letter-spacing:-0.01em; margin-top:4px; }
.ps-cart-btn{ position:relative; width:46px; height:46px; border-radius:50%; border:1px solid rgba(43,38,34,0.12); background:#fff; color: var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; }
.ps-cart-btn:hover{ background: var(--cream); }
.ps-cart-btn svg{ width:20px; height:20px; }
.ps-cart-btn__count{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background: var(--gold); color:#fff; font-family: var(--font-mono); font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.ps-cart-btn__count[hidden], .ps-tab__count[hidden]{ display:none; }

.ps-tabs{ display:inline-flex; gap:4px; padding:4px; border-radius:30px; background: var(--off-white); border:1px solid rgba(43,38,34,0.08); margin-bottom:18px; }
.ps-tab{ font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--text-muted); background:transparent; border:none; padding:9px 22px; border-radius:30px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition: background .2s ease, color .2s ease; }
.ps-tab:hover{ color: var(--navy); }
.ps-tab.is-active{ background:#fff; color: var(--navy); box-shadow: 0 1px 3px rgba(43,38,34,0.12); }
.ps-tab__count{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background: var(--gold); color:#fff; font-family: var(--font-mono); font-size:10.5px; display:inline-flex; align-items:center; justify-content:center; }
.ps-panel[hidden]{ display:none; }

.ps-intro{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); line-height:1.55; margin:0 0 14px; max-width:720px; }
.ps-info{ font-family: var(--font-body); font-size:13px; color: var(--text-muted); background: var(--off-white); border:1px solid rgba(43,38,34,0.07); border-radius:12px; padding:12px 16px; margin-top:16px; max-width:880px; }
.ps-eyebrow{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:0.18em; text-transform:uppercase; color: var(--text-muted); margin:0 0 10px; }

.ps-search{ position:relative; max-width:880px; margin-bottom:14px; }
.ps-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color: var(--text-muted); }
.ps-search input{ width:100%; box-sizing:border-box; padding:12px 14px 12px 42px; border:1px solid rgba(43,38,34,0.14); border-radius:12px; font-family: var(--font-body); font-size: var(--fs-body); background:#fff; color: var(--navy); }
.ps-search input:focus{ outline:none; border-color: var(--gold-dark); }

.ps-svc-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; max-width:880px; }
@media (max-width: 900px){ .ps-svc-list{ grid-template-columns:1fr; } }
.ps-svc{ display:flex; align-items:flex-start; gap:14px; text-align:left; width:100%; background:#fff; border:1px solid rgba(43,38,34,0.08); border-radius:16px; padding:16px; cursor:pointer; box-shadow: var(--dash-card-shadow); transition: border-color .2s ease, transform .2s ease; font-family: var(--font-body); }
.ps-svc:hover{ border-color: var(--border-gold); transform: translateY(-2px); }
.ps-svc__icon{ width:42px; height:42px; flex:0 0 42px; border-radius:12px; background: var(--cream); color: var(--gold-dark); display:flex; align-items:center; justify-content:center; }
.ps-svc__icon svg{ width:20px; height:20px; }
.ps-svc__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ps-svc__title{ display:block; font-size:15px; font-weight:600; color: var(--navy); margin:0; }
.ps-svc__meta{ display:block; font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold-dark); margin:0; }
.ps-svc__sub{ display:block; font-size:13px; color: var(--text-muted); line-height:1.45; margin-top:4px; }
.ps-svc__add, .ps-svc__added{ flex:0 0 auto; font-size:13px; font-weight:600; padding:6px 12px; border-radius:20px; white-space:nowrap; }
.ps-svc__add{ color: var(--gold-dark); border:1px solid var(--border-gold); }
.ps-svc__added{ color:#1e7b3a; background:#e7f5ec; }

.ps-empty{ background:#fff; border:1px dashed rgba(43,38,34,0.18); border-radius:16px; padding:32px 24px; text-align:center; max-width:880px; font-family: var(--font-body); color: var(--text-muted); }
.ps-empty__title{ font-family: var(--font-display); font-size: var(--fs-h4); color: var(--navy); font-weight:600; margin-bottom:6px; }
.ps-empty .rs-btn{ margin-top:16px; }

/* Plans tab */
.ps-plans{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; align-items:start; }
@media (max-width: 1280px){ .ps-plans{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .ps-plans{ grid-template-columns:1fr; } }
.ps-plan{ background:#fff; border:1px solid rgba(43,38,34,0.08); border-radius:18px; padding:20px; box-shadow: var(--dash-card-shadow); display:flex; flex-direction:column; gap:8px; font-family: var(--font-body); }
.ps-plan.is-popular{ border-color: var(--gold); }
.ps-plan.is-current{ border-color:#1e7b3a; background: linear-gradient(180deg, #f3faf5 0%, #fff 40%); }
.ps-plan__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ps-plan__name{ font-family: var(--font-display); font-size:22px; font-weight:600; color: var(--navy); }
.ps-plan__tag{ font-family: var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px; border-radius:20px; background: var(--cream); color: var(--gold-dark); font-weight:600; }
.ps-plan.is-current .ps-plan__tag{ background:#e7f5ec; color:#1e7b3a; }
.ps-plan__line{ font-size:13.5px; color: var(--text-muted); margin:0; }
.ps-plan__price{ margin:4px 0 0; display:flex; align-items:baseline; gap:6px; color: var(--navy); }
.ps-plan__price strong{ font-family: var(--font-display); font-size:28px; font-weight:600; }
.ps-plan__price span{ font-size:13px; color: var(--text-muted); }
.ps-plan__price .ps-plan__price-soon{ font-size:15px; font-weight:600; color: var(--gold-dark); }
.ps-plan__inherits{ font-size:12.5px; font-weight:600; color: var(--gold-dark); margin:4px 0 0; }
.ps-plan__heads{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ps-plan__heads li{ position:relative; padding-left:22px; font-size:13.5px; color: var(--navy); line-height:1.4; }
.ps-plan__heads li::before{ content:"\2713"; position:absolute; left:0; top:0; color:#1e7b3a; font-weight:700; }
.ps-plan__more{ border-top:1px solid rgba(43,38,34,0.08); padding-top:8px; margin-top:4px; }
.ps-plan__more summary{ cursor:pointer; font-size:13px; font-weight:600; color: var(--gold-dark); list-style:none; }
.ps-plan__more summary::-webkit-details-marker{ display:none; }
.ps-plan__more summary::after{ content:" \25BE"; }
.ps-plan__more[open] summary::after{ content:" \25B4"; }
.ps-plan__group{ margin-top:10px; }
.ps-plan__group p{ font-size:12px; font-weight:700; color: var(--navy); margin:0 0 4px; }
.ps-plan__group ul{ margin:0; padding-left:16px; }
.ps-plan__group li{ font-size:12.5px; color: var(--text-muted); line-height:1.5; }
.ps-plan__btn{ margin-top:8px; width:100%; }

/* Cart tab */
.ps-cart{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; max-width:1080px; }
@media (max-width: 1000px){ .ps-cart{ grid-template-columns:1fr; } }
.ps-cart__main{ display:flex; flex-direction:column; gap:12px; }
.ps-cart-item{ background:#fff; border:1px solid rgba(43,38,34,0.08); border-radius:16px; box-shadow: var(--dash-card-shadow); overflow:hidden; font-family: var(--font-body); }
.ps-cart-item__head{ display:flex; align-items:center; gap:12px; padding:14px 12px 12px 16px; }
.ps-cart-item__head > div{ flex:1; min-width:0; }
.ps-x{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(43,38,34,0.12); background:#fff; color: var(--text-muted); font-size:20px; line-height:1; cursor:pointer; flex:0 0 auto; }
.ps-x:hover{ background: var(--cream); color: var(--navy); }
.ps-cart-item__list{ list-style:none; margin:0; padding:12px 16px 4px; border-top:1px solid rgba(43,38,34,0.06); }
.ps-cart-item__list li{ position:relative; padding-left:24px; margin-bottom:8px; font-size:13.5px; color: var(--navy); line-height:1.4; }
.ps-cart-item__list li::before{ content:"\2713"; position:absolute; left:2px; top:0; color:#1e7b3a; font-weight:700; }
.ps-cart-item__edit{ width:100%; border:none; border-top:1px solid rgba(43,38,34,0.06); background:transparent; padding:12px; font-family: var(--font-body); font-size:13.5px; font-weight:600; color: var(--gold-dark); cursor:pointer; }
.ps-cart-item__edit:hover{ background: var(--off-white); }
.ps-cart__note{ margin-top:4px; }
.ps-cart__side{ background:#fff; border:1px solid rgba(43,38,34,0.08); border-radius:16px; padding:18px; box-shadow: var(--dash-card-shadow); position:sticky; top:16px; font-family: var(--font-body); }
.ps-summary{ border-bottom:1px solid rgba(43,38,34,0.08); padding-bottom:14px; margin-bottom:16px; }
.ps-summary__row{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; color: var(--text-muted); }
.ps-summary__total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; font-weight:600; color: var(--navy); }
.ps-summary__total strong{ font-family: var(--font-display); font-size:28px; }
.ps-steps{ margin:0 0 16px; padding:0; list-style:none; counter-reset: ps; }
.ps-steps li{ counter-increment: ps; position:relative; padding-left:34px; margin-bottom:10px; font-size:13.5px; color: var(--navy); line-height:24px; }
.ps-steps li::before{ content: counter(ps); position:absolute; left:0; top:0; width:24px; height:24px; box-sizing:border-box; border-radius:50%; border:1px solid #E2C3AF; color: var(--gold-dark); font-family: var(--font-mono); font-size:11px; display:flex; align-items:center; justify-content:center; line-height:1; }
.ps-cart__send{ width:100%; }

/* Overview card */
#dash-view-overview .ps-ov-card{ background: var(--white); border:1px solid rgba(43,38,34,0.06); border-radius: var(--dash-radius-lg); box-shadow: var(--dash-card-shadow); padding:20px 0 20px 24px; margin-bottom:20px; }
.ps-ov-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-right:24px; margin-bottom:14px; }
.ps-ov-card__head h3{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; color: var(--navy); margin:0 0 3px; }
.ps-ov-card__head p{ font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-muted); margin:0; }
.ps-link{ background:none; border:none; padding:4px 0; font-family: var(--font-body); font-size: var(--fs-body); font-weight:600; color: var(--gold-dark); cursor:pointer; white-space:nowrap; }
.ps-link:hover{ text-decoration:underline; }
.ps-ov-chips{ display:flex; gap:10px; overflow-x:auto; padding:2px 24px 6px 0; scrollbar-width:thin; }
.ps-chip{ position:relative; flex:0 0 148px; min-height:112px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; text-align:left; background: var(--off-white); border:1px solid rgba(43,38,34,0.08); border-radius:14px; padding:12px; cursor:pointer; font-family: var(--font-body); transition: border-color .2s ease, transform .2s ease; }
.ps-chip:hover{ border-color: var(--border-gold); transform: translateY(-2px); }
.ps-chip .ps-svc__icon{ width:34px; height:34px; flex-basis:34px; border-radius:10px; background:#fff; }
.ps-chip .ps-svc__icon svg{ width:17px; height:17px; }
.ps-chip__label{ font-size:13px; font-weight:600; color: var(--navy); line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ps-chip__badge{ position:absolute; top:10px; right:10px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#1e7b3a; color:#fff; font-family: var(--font-mono); font-size:11px; display:flex; align-items:center; justify-content:center; }

/* Tick lists: shared by the service picker and the request form */
.rs-checklist{ display:flex; flex-direction:column; border:1px solid rgba(43,38,34,0.12); border-radius:12px; max-height:340px; overflow-y:auto; }
.rs-field .rs-check, .rs-check{ display:flex; align-items:flex-start; gap:12px; padding:11px 14px; margin:0; border-top:1px solid rgba(43,38,34,0.06); cursor:pointer; font-family: var(--font-body); font-size:14px; font-weight:400; color: var(--navy); line-height:1.4; }
.rs-check:first-child{ border-top:none; }
.rs-check:hover{ background: var(--off-white); }
.rs-field .rs-check input, .rs-check input{ width:18px; height:18px; margin:1px 0 0; padding:0; accent-color: var(--gold); flex:0 0 auto; cursor:pointer; }
.rs-check span{ flex:1; }
.rs-check em{ font-style:normal; font-size:12.5px; color: var(--text-muted); }
.rs-field .rs-check--all, .rs-check--all{ background: var(--off-white); font-weight:600; }
.ps-sheet__count{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; font-family: var(--font-body); font-size:14px; color: var(--navy); }
.ps-sheet__count span{ font-size:12.5px; color: var(--text-muted); }
.rs-btn.rs-btn-danger{ background:#b42318; color:#fff; }
.rs-picked{ background: var(--off-white); border:1px solid rgba(43,38,34,0.08); border-radius:12px; padding:12px 14px; margin-bottom:16px; font-family: var(--font-body); }
.rs-picked[hidden]{ display:none; }
.rs-picked__title{ font-size:12.5px; font-weight:700; color: var(--navy); margin:0 0 8px; }
.rs-picked__row{ display:flex; align-items:flex-start; gap:10px; padding:6px 0; border-top:1px solid rgba(43,38,34,0.06); }
.rs-picked__row:first-of-type{ border-top:none; }
.rs-picked__row div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:13px; }
.rs-picked__row strong{ color: var(--navy); }
.rs-picked__row span{ color: var(--text-muted); line-height:1.4; }
.rs-picked__row button{ border:none; background:none; font-size:18px; line-height:1; color: var(--text-muted); cursor:pointer; padding:0 4px; }
.rs-picked__row button:hover{ color:#b42318; }

.ps-toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); background: var(--navy); color:#fff; font-family: var(--font-body); font-size:14px; padding:12px 20px; border-radius:30px; box-shadow:0 12px 30px rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; z-index:10700; max-width:calc(100vw - 32px); }
.ps-toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

/* ============================================================
   DASHBOARD — MY REQUESTS (same layout as the app's My requests)
   ============================================================ */
.mr-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:#fff; border:1px solid rgba(43,38,34,0.08); border-radius:16px; }
.mr-tab{ font-family: var(--font-body); font-size:14px; font-weight:600; color: var(--text-muted); background:transparent; border:none; border-radius:12px; padding:11px 12px; cursor:pointer; transition: background .2s ease, color .2s ease; }
.mr-tab:hover{ color: var(--navy); }
.mr-tab.is-active{ background: var(--navy); color:#fff; }
.mr-empty{ font-family: var(--font-body); font-size:14px; color: var(--text-muted); text-align:center; padding:28px 16px; }
.mr-card{ background:#fff; border:1px solid rgba(43,38,34,0.06); border-radius:18px; padding:18px 20px; box-shadow: var(--dash-card-shadow); font-family: var(--font-body); }
.mr-card__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.mr-card__date{ font-family: var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-muted); }
.mr-card__title{ font-family: var(--font-body); font-size:17px; font-weight:600; color: var(--navy); margin:0 0 4px; }
.mr-card__desc{ font-size:13.5px; color: var(--text-muted); line-height:1.55; margin:0; white-space:pre-line; }
.mr-pill{ flex:0 0 auto; font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.mr-pill--slate{ background:#EAECF1; color:#4A5468; }
.mr-pill--ember{ background:rgba(236,124,66,0.16); color: var(--gold-dark); }
.mr-pill--good{ background:#e7f5ec; color:#1e7b3a; }
.mr-pill--neutral{ background: var(--off-white); color: var(--text-muted); }
.mr-track{ display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; margin-top:14px; }
.mr-track__bar{ height:5px; border-radius:3px; background:#E8DECE; }
.mr-track__bar.is-current{ background: var(--gold); }
.mr-track__bar.is-done{ background:#2f8a4c; }
.mr-track__labels{ display:flex; justify-content:space-between; margin-top:6px; font-size:12px; color: var(--text-muted); }
.mr-track__labels .is-current{ font-weight:600; color: var(--gold-dark); }
.mr-quote{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(43,38,34,0.07); }
.mr-quote__label{ display:block; font-size:12px; color: var(--text-muted); }
.mr-quote__amount{ font-family: var(--font-display); font-size:24px; font-weight:600; color: var(--navy); }
.mr-quote__actions{ display:flex; gap:8px; }
.mr-quote__notes{ font-size:13px; color: var(--text-dark, var(--navy)); line-height:1.5; margin:8px 0 0; }
.mr-btn{ font-family: var(--font-body); font-size:13.5px; font-weight:600; padding:9px 18px; border-radius:30px; cursor:pointer; transition: background .2s ease; }
.mr-btn:disabled{ opacity:.6; cursor:not-allowed; }
.mr-btn--primary{ background: var(--gold); color:#fff; border:none; }
.mr-btn--primary:hover:not(:disabled){ background: var(--gold-dark); }
.mr-btn--outline{ background:#fff; color: var(--navy); border:1px solid rgba(43,38,34,0.14); }
.mr-btn--outline:hover:not(:disabled){ background: var(--off-white); }
.mr-note{ font-size:12.5px; color: var(--text-muted); line-height:1.5; margin:10px 0 0; }
.mr-note--due{ background:#FFF6E5; border:1px solid #F1D9A8; color:#7a4a00; border-radius:10px; padding:10px 12px; }
.mr-note--good{ color:#1e7b3a; }
.mr-visit-link{ background:none; border:none; padding:0; font:inherit; font-weight:600; color: var(--navy); text-decoration:underline; cursor:pointer; }
/* The service request an additional / on-demand visit carried out, under its badge. */
.vl-visit-request{ font-size:12.5px; font-weight:600; color:#1A4E8A; margin:4px 0 2px; }
.mr-proof{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(43,38,34,0.07); }
.mr-proof__title{ font-size:12.5px; font-weight:600; color: var(--navy); margin:0; }
.mr-proof__media{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mr-proof__thumb{ position:relative; display:block; width:64px; height:64px; border-radius:8px; overflow:hidden; background: var(--cream, #f4efe6); }
.mr-proof__thumb img, .mr-proof__thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.mr-proof__thumb--video svg{ position:absolute; top:50%; left:50%; width:22px; height:22px; transform:translate(-50%,-50%); color:#fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.mr-proof__notes{ font-size:13px; color: var(--text-dark, var(--navy)); line-height:1.5; margin:8px 0 0; }