/*
 * ════════════════════════════════════════════════════════
 *  THE RUG INDEX — DESIGN SYSTEM
 *  Version 2.0 · Darkin/Sky Blue palette
 *
 *  HOW THIS FILE WORKS
 *  ───────────────────
 *  Add this as the FIRST stylesheet link in every HTML page,
 *  before any existing <style> tags. It redefines the :root
 *  token block and adds the body texture, animation utilities,
 *  and component overrides. Existing class names are preserved.
 *
 *  <link rel="stylesheet" href="/design-system.css">
 * ════════════════════════════════════════════════════════
 */

/* ──────────────────────────────────────────────────────
   1. DESIGN TOKENS  (:root)
   
   WHAT CHANGED vs. original:
   · --n  : #001621  → UNCHANGED (was already Darkin)
   · --n2 : #021F59  → #04121c  (was Blue-Black, now Dark Teal surface)
   · --n3 : #152850  → #0a1e2b  (was Blue, now Teal Surface 2)
   · --g  : #FFB909  → #6BB8ED  ← THE KEY CHANGE (Gold → Sky Blue)
   · --g2 : #FFCB45  → #4A9ED8  (Gold hover → Sky Blue hover)
   · --c  : #FCFCFC  → UNCHANGED (was already Off White)
   · --b  : gold opacity → neutral white opacity (clean borders)
   · --b2 : gold opacity → neutral white opacity
   NEW: --n4, --cr, --cr2, --or-dim, --or-ring, --or-faint,
        --shadow-card, --shadow-lift, font vars, layout vars
─────────────────────────────────────────────────────── */
:root {

  /* ── BACKGROUND LAYERS (dark → light) ── */
  --n:   #001621;   /* Page background — Darkin */
  --n2:  #04121c;   /* Surface 1 — cards on dark */
  --n3:  #0a1e2b;   /* Surface 2 — elevated components */
  --n4:  #112435;   /* Surface 3 — highest elevation */

  /* ── PRIMARY ACCENT: ORANGE ── */
  --g:       #E0B83C;              /* Primary accent (was gold) */
  --g2:      #C9A32E;              /* Accent hover / pressed */
  --or-dim:  rgba(224,184,60,.12);   /* Sky Blue tint background */
  --or-ring: rgba(224,184,60,.30);   /* Sky Blue border / ring */
  --or-faint:rgba(224,184,60,.06);   /* Subtle sky blue wash */

  /* ── SECONDARY ACCENT: CRIMSON ── */
  --cr:      #E0B83C;              /* Antique Brass — certified badges, alerts */
  --cr2:     rgba(181,134,13,.14); /* Antique Brass tint */

  /* ── TEXT ── */
  --c:       #FCFCFC;                     /* Primary text — Off White */
  --c2:      rgba(252,252,252,.88);       /* Near-primary */
  --d1:      rgba(252,252,252,.56);       /* Secondary text */
  --d2:      rgba(252,252,252,.38);       /* Tertiary text */
  --d3:      rgba(252,252,252,.24);       /* Ghost text */
  --divider: rgba(252,252,252,.10);       /* Subtle dividers */

  /* ── BORDERS ── */
  --b:   rgba(252,252,252,.08);  /* Default border (was gold-tinted) */
  --b2:  rgba(252,252,252,.15);  /* Stronger border */
  --b3:  rgba(252,252,252,.24);  /* High-contrast border */

  /* ── TYPOGRAPHY ── */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'DM Mono', 'Courier New', monospace;

  /* ── TYPE SCALE ── */
  --size-display:  clamp(50px, 5.4vw, 82px);
  --size-h1:       clamp(42px, 6vw, 80px);
  --size-h2:       clamp(28px, 3.5vw, 48px);
  --size-h3:       clamp(20px, 2.4vw, 28px);
  --size-body-lg:  16px;
  --size-body:     14px;
  --size-sm:       13px;
  --size-label:    9.5px;
  --size-micro:    8.5px;

  /* ── LETTER SPACING ── */
  --ls-tight:  -.01em;
  --ls-normal:  .02em;
  --ls-wide:    .1em;
  --ls-wider:   .16em;
  --ls-widest:  .22em;

  /* ── LAYOUT ── */
  --max:     1260px;
  --px:       52px;
  --py-sec:   88px;

  /* ── ELEVATION / SHADOWS ── */
  --shadow-card:    0 8px 32px rgba(0,0,0,.40), 0 0 0 1px rgba(224,184,60,.08);
  --shadow-card-3d: -12px 16px 48px rgba(0,0,0,.55), 0 0 40px rgba(224,184,60,.12);
  --shadow-lift:    0 16px 40px rgba(0,0,0,.38);
  --shadow-step:    0 20px 40px rgba(0,0,0,.35);
  --shadow-glow:    0 0 30px rgba(224,184,60,.15);
  --shadow-5d:
    0 1px 2px rgba(0,0,0,.40),
    0 4px 8px rgba(0,0,0,.35),
    0 12px 24px rgba(0,0,0,.30),
    0 32px 64px rgba(0,0,0,.25),
    0 64px 120px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(224,184,60,.08),
    inset 0 -1px 0 rgba(0,0,0,.20);

  /* ── MOTION ── */
  --ease-card:    transform .15s ease, box-shadow .15s ease;
  --ease-ui:      all .18s ease;
  --ease-fast:    all .12s ease;
  --dur-anim:     0.65s;
  --dur-count:    1.4s;
}


/* ──────────────────────────────────────────────────────
   2. GLOBAL BASE
─────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  background: var(--n, #001621);
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

body {
  background-color: var(--n);
  color: var(--c);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

  /* Fine technical grid — baked into the surface */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 71px,
      rgba(252,252,252,.032) 72px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 119px,
      rgba(252,252,252,.018) 120px
    );

  /* Atmospheric depth — radial glows over the same base grid */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(224,184,60,.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(224,184,60,.03) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 71px, rgba(252,252,252,.032) 72px),
    repeating-linear-gradient(90deg, transparent, transparent 119px, rgba(252,252,252,.018) 120px);
}

/* Film-grain overlay (fixed, sits above everything, pointer-events off) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .026;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* Remove old hero gradient — let the page background breathe */
.hero-bg-img,
.hero-bg {
  background: transparent !important;
  background-image: none !important;
}

/* Safety net: any <img> without its own sizing rules (e.g. raw uploaded
   photo grids — insurance claim photos, additional rug photos) must not
   overflow its container on narrow viewports. Element-selector specificity
   is low, so any class-based width/height rule elsewhere still wins. */
img {
  max-width: 100%;
  height: auto;
}

/* Base heading reset */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.08;
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }

/* Italic emphasis in headings pulls accent color */
h1 em, h2 em, h3 em,
.s-h em, .hero-h em {
  font-style: italic;
  color: var(--g);
}


/* ──────────────────────────────────────────────────────
   3. SCROLL ANIMATION SYSTEM
   
   Usage: add class "tri-anim" to any element.
   Optional stagger: data-d="1" through data-d="5"
   JS (tri-interactions.js) drives the IntersectionObserver.
─────────────────────────────────────────────────────── */
.tri-anim {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  var(--dur-anim) ease,
    transform var(--dur-anim) ease;
}
.tri-anim.tri-in {
  opacity: 1;
  transform: translateY(0);
}
.tri-anim[data-d="1"] { transition-delay: .10s; }
.tri-anim[data-d="2"] { transition-delay: .20s; }
.tri-anim[data-d="3"] { transition-delay: .30s; }
.tri-anim[data-d="4"] { transition-delay: .40s; }
.tri-anim[data-d="5"] { transition-delay: .50s; }


/* ──────────────────────────────────────────────────────
   4. NAVIGATION
─────────────────────────────────────────────────────── */
/* Shared nav shell */
nav,
.ri-nav {
  background: var(--n, #001621) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--b) !important;
  transition: background .3s ease, border-color .3s ease;
}

/* Scrolled state added by JS */
nav.scrolled,
.ri-nav.scrolled {
  background: var(--n, #001621) !important;
  border-bottom-color: var(--b2) !important;
}

/* Phone-bar breathing room (mobile) — #phone-bar/body/nav top offsets are
   hardcoded per-page inline styles (28px); bump all three together so the
   taller bar doesn't get clipped by a notch/status bar and doesn't overlap
   the nav below it. */
@media (max-width: 600px) {
  #phone-bar {
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    padding-bottom: 10px !important;
  }
  body {
    padding-top: calc(38px + env(safe-area-inset-top)) !important;
  }
  nav, .ri-nav {
    top: calc(38px + env(safe-area-inset-top)) !important;
  }
}

/* Mobile scroll-collapse: fixed header shows only background + logo +
   hamburger. Phone bar scrolls away with the page; nav reclaims top:0.
   Gated to the same <=900px breakpoint as the hamburger nav — desktop
   nav/phone-bar are untouched. Driven by body.ri-scrolled (tri-interactions.js). */
@media (max-width: 900px) {
  body.ri-scrolled #phone-bar {
    display: none !important;
  }
  body.ri-scrolled nav,
  body.ri-scrolled .ri-nav {
    top: 0 !important;
  }
}

/* Logo */
.nav-logo,
.ri-nav-logo,
.nav-brand {
  font-family: var(--font-mono) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--c) !important;
}

/* Nav ring — keep existing circle, update color */
.nav-ring,
.ri-nav-ring {
  border-color: var(--g) !important;
  color: var(--g) !important;
}

/* Nav links */
.nav-links a,
.ri-nav-links a,
.ri-nav-auth-link {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--d2) !important;
  transition: color .15s !important;
}
.nav-links a:hover,
.ri-nav-links a:hover { color: var(--d1) !important; }

/* CTA button in nav */
.nav-cta,
.ri-nav-cta {
  background: var(--g) !important;    /* auto-becomes sky blue via --g */
  color: var(--n) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  transition: background .15s !important;
}
.nav-cta:hover,
.ri-nav-cta:hover { background: var(--g2) !important; }

/* Secondary nav button */
.nav-btn { border-color: var(--b2) !important; color: var(--d1) !important; }
.nav-btn:hover { border-color: var(--g) !important; color: var(--g) !important; }

/* Full-screen mobile menu overlay — nav v4 2026-08-11 */
@media (max-width: 900px) {
  .ri-nav-menu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--n, #001621);
    z-index: 1002;
    padding: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: none;
    overflow-y: auto;
    border-bottom: none;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity .2s ease-out, transform .2s ease-out;
  }

  .ri-nav-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Toggle button stays above the overlay. !important: nav_public.html's
     base (non-media) .ri-nav-toggle{z-index:2} rule is declared later in
     document order (inline <style> in <body> vs this <head> stylesheet)
     and ties on specificity — without !important it wins the tie and the
     X renders behind the overlay, invisible/unclickable. */
  .ri-nav-toggle {
    position: relative;
    z-index: 1003 !important;
  }

  /* Hide the logo when menu is open — only the X stays visible */
  .ri-nav--open .ri-nav-logo {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
  }

  /* Nav links — large centered italic serif, no borders, no row-style */
  .ri-nav-menu .ri-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-bottom: 32px;
  }

  .ri-nav-menu .ri-nav-links a {
    font-family: 'DM Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--c, #FCFCFC) !important;
    text-decoration: none;
    padding: 10px 24px !important;
    border: none !important;
    border-left: none !important;
    background: none !important;
    min-height: auto !important;
    display: block;
    text-align: center;
    justify-content: center;
    transition: color .15s;
  }

  .ri-nav-menu .ri-nav-links a:hover {
    color: var(--g, #E0B83C) !important;
    background: none !important;
  }

  /* CTA button centered below the links */
  .ri-nav-menu .ri-nav-cta {
    margin: 8px 0 0 !important;
    padding: 14px 48px !important;
    font-size: 11px !important;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Auth links — small, below CTA */
  .ri-nav-menu .ri-nav-auth {
    margin-top: 24px;
    flex-direction: row;
    justify-content: center;
    border-top: none !important;
    padding-top: 0 !important;
    width: auto;
  }

  .ri-nav-menu .ri-nav-auth-sep {
    display: inline-block !important;
  }

  .ri-nav-menu .ri-nav-auth-dot {
    display: inline !important;
  }

  .ri-nav-menu .ri-nav-auth-link {
    font-size: 11px !important;
    color: rgba(252,252,252,.45) !important;
    padding: 4px !important;
  }
}


/* ──────────────────────────────────────────────────────
   5. SECTION LABELS (EYEBROWS)
─────────────────────────────────────────────────────── */
.eyebrow,
.hero-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: var(--size-label) !important;
  letter-spacing: var(--ls-widest) !important;
  text-transform: uppercase !important;
  color: var(--g) !important;    /* auto-becomes sky blue */
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Line before eyebrow */
.eyebrow::before,
.hero-eyebrow::before {
  content: '' !important;
  display: block !important;
  width: 28px !important;
  height: 1px !important;
  background: var(--g) !important;
  flex-shrink: 0 !important;
}

/* Section headings */
.s-h { font-family: var(--font-serif) !important; font-weight: 300 !important; }
.s-sub { color: var(--d1) !important; font-weight: 300 !important; }


/* ──────────────────────────────────────────────────────
   6. BUTTONS
─────────────────────────────────────────────────────── */
/* Primary CTA button */
.btn-p {
  display: inline-block !important;
  background: var(--g) !important;
  color: #fff !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 13px 26px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .15s, transform .1s !important;
  text-decoration: none !important;
}
.btn-p:hover { background: var(--g2) !important; transform: translateY(-1px) !important; }

/* Secondary / ghost button */
.btn-s {
  display: inline-block !important;
  background: transparent !important;
  color: var(--d1) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 12px 22px !important;
  border: 1px solid var(--b2) !important;
  cursor: pointer !important;
  transition: border-color .15s, color .15s !important;
  text-decoration: none !important;
}
.btn-s:hover { border-color: var(--g) !important; color: var(--c) !important; }


/* ──────────────────────────────────────────────────────
   7. HERO SECTION
─────────────────────────────────────────────────────── */
.hero-h {
  font-family: var(--font-serif) !important;
  font-size: var(--size-h1) !important;
  font-weight: 300 !important;
  line-height: 1.03 !important;
  letter-spacing: var(--ls-tight) !important;
  color: var(--c) !important;
}
.hero-sub {
  color: var(--d1) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
}

/* Hero stats strip (was display:none — now show it) */
.hero-stats { display: grid !important; }

/* Hero stat items */
.hs {
  border-right: 1px solid var(--b) !important;
  padding-right: 28px !important;
}
.hs-n {
  font-family: var(--font-serif) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: var(--g) !important;   /* auto-becomes sky blue */
  line-height: 1 !important;
  text-shadow: var(--shadow-glow) !important;
}
.hs-l {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--d3) !important;
  margin-top: 4px !important;
}


/* ──────────────────────────────────────────────────────
   8. SURFACE CARDS (services, how-it-works, testimonials)
   These use --n2 (now #04121c) as background.
   3D hover lift added.
─────────────────────────────────────────────────────── */
.svc-card,
.hiw-step,
.testi,
.pillar-card,
.nt-card {
  background: var(--n2) !important;  /* auto-gets new dark teal */
  border: 1px solid var(--b) !important;
  transition: background .2s, transform .25s, box-shadow .25s !important;
  transform-style: preserve-3d !important;
}
.svc-card:hover,
.hiw-step:hover,
.testi:hover,
.pillar-card:hover {
  background: var(--n3) !important;
  transform: perspective(500px) translateY(-4px) translateZ(6px) !important;
  box-shadow: var(--shadow-lift) !important;
}

/* Service card specifics */
.svc-title {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--c) !important;
}
.svc-price {
  font-family: var(--font-serif) !important;
  color: var(--g) !important;
  font-weight: 300 !important;
}
.svc-link {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--g) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--or-ring) !important;
  padding-bottom: 1px !important;
  transition: color .15s !important;
}
.svc-link:hover { color: var(--c) !important; }

/* How-it-works number */
.hiw-n {
  font-family: var(--font-serif) !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  color: var(--g) !important;
  opacity: .45 !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
}
.hiw-title {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--c) !important;
  margin-bottom: 8px !important;
}
.hiw-txt { color: var(--d1) !important; font-size: 13.5px !important; font-weight: 300 !important; }


/* ──────────────────────────────────────────────────────
   9. STATS BAND
─────────────────────────────────────────────────────── */
.stats-band,
.stats-grid {
  background: var(--n2) !important;
  border-top: 1px solid var(--b) !important;
  border-bottom: 1px solid var(--b) !important;
}

.stat-n {
  font-family: var(--font-serif) !important;
  font-size: 40px !important;
  font-weight: 300 !important;
  color: var(--g) !important;   /* auto-becomes sky blue */
  line-height: 1 !important;
  text-shadow: var(--shadow-glow) !important;
}
.stat-l {
  font-family: var(--font-mono) !important;
  font-size: var(--size-micro) !important;
  letter-spacing: var(--ls-wider) !important;
  text-transform: uppercase !important;
  color: var(--d3) !important;
  margin-top: 4px !important;
}

/* Hover accent line on stat cells */
.stat {
  position: relative !important;
  overflow: hidden !important;
  transition: background .2s !important;
}
.stat::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0 !important;
  width: 0; height: 2px !important;
  background: var(--g) !important;
  transition: width .4s ease !important;
}
.stat:hover::after { width: 100% !important; }
.stat:hover { background: rgba(224,184,60,.04) !important; }


/* ──────────────────────────────────────────────────────
   10. PROBLEM / COMPLEXITY SECTION
─────────────────────────────────────────────────────── */
.prob-n {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  color: var(--g) !important;
  opacity: .4 !important;
  transition: opacity .2s !important;
}
.prob-item:hover .prob-n { opacity: 1 !important; }
.prob-item {
  transition: background .15s !important;
  border-left: 3px solid transparent !important;
  transition: border-color .2s, background .2s, padding-left .2s !important;
}
.prob-item:hover {
  border-left-color: var(--g) !important;
  padding-left: 12px !important;
  background: var(--n2) !important;
}
.prob-title { font-size: 13.5px !important; font-weight: 500 !important; color: var(--c) !important; }
.prob-txt { color: var(--d1) !important; font-size: 13px !important; font-weight: 300 !important; }


/* ──────────────────────────────────────────────────────
   11. AUDIENCE / WHO WE SERVE
─────────────────────────────────────────────────────── */
.aud-card {
  background: var(--n2) !important;
  border: 1px solid var(--b) !important;
  transition: background .2s, transform .2s, border-color .2s !important;
  cursor: pointer !important;
}
.aud-card:hover,
.aud-card.active {
  background: var(--n3) !important;
  border-color: var(--or-ring) !important;
  transform: perspective(400px) translateZ(4px) !important;
}
.aud-card.active { border-top: 2px solid var(--g) !important; }
.aud-title {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  color: var(--c) !important;
}
.aud-cta {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--g) !important;
}


/* ──────────────────────────────────────────────────────
   12. TESTIMONIALS
─────────────────────────────────────────────────────── */
.testi {
  background: var(--n2) !important;
  border: 1px solid var(--b) !important;
}
.testi-text {
  font-family: var(--font-serif) !important;
  font-size: 18px !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--c) !important;
  line-height: 1.55 !important;
  margin-bottom: 20px !important;
}
.testi-name {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--d1) !important;
}
.testi-title {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: .06em !important;
  color: var(--d2) !important;
  margin-top: 3px !important;
}


/* ──────────────────────────────────────────────────────
   13. CTA BAND
─────────────────────────────────────────────────────── */
.cta-band { position: relative !important; overflow: hidden !important; }

/* Ghosted "Certified" watermark text in CTA background */
.cta-bg::before {
  content: 'Certified' !important;
  position: absolute !important;
  right: -2% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: var(--font-serif) !important;
  font-size: 180px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(224,184,60,.07) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  z-index: 0 !important;
}


/* ──────────────────────────────────────────────────────
   14. FOOTER
─────────────────────────────────────────────────────── */
footer, .ri-footer-v2 {
  background: var(--n) !important;
  border-top: 1px solid var(--b) !important;
}

.footer-brand,
.ri-fbrand {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--g) !important;   /* auto-becomes sky blue */
}

.footer-col-title,
.ri-fhead {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--d3) !important;
  margin-bottom: 14px !important;
}

.footer-links a,
.ri-flink {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  color: var(--d2) !important;
  transition: color .12s !important;
}
.footer-links a:hover,
.ri-flink:hover { color: var(--d1) !important; }

.footer-desc,
.ri-fmuted {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .05em !important;
  color: var(--d3) !important;
  line-height: 1.65 !important;
}

/* Footer ring badge */
.ri-fring {
  border-color: var(--g) !important;
  color: var(--g) !important;
}

.footer-bottom,
.ri-footer-bottom {
  border-top: 1px solid var(--b) !important;
}


/* ──────────────────────────────────────────────────────
   15. APPRAISAL CARD (the .hs / hero stats panel)
   3D surface with hover tilt and gloss.
   JS adds mouse tracking — CSS sets the base.
─────────────────────────────────────────────────────── */
.tri-card-3d {
  position: relative !important;
  background: var(--n2) !important;
  border: 1px solid var(--b2) !important;
  border-top: 3px solid var(--g) !important;
  transform-style: preserve-3d !important;
  transition: var(--ease-card) !important;
  box-shadow: var(--shadow-card) !important;
  will-change: transform !important;
}

/* Physical depth illusion — darker edge below/right */
.tri-card-3d::after {
  content: '' !important;
  position: absolute !important;
  right: -5px; bottom: -5px !important;
  width: 100%; height: 100% !important;
  background: #010c14 !important;
  border: 1px solid var(--or-ring) !important;
  z-index: -1 !important;
  transition: var(--ease-card) !important;
}

/* Gloss layer — positioned by JS mousemove */
.tri-card-gloss {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
  transition: background .08s !important;
  mix-blend-mode: screen !important;
}

/* Certified badge */
.cert-badge,
[class*="cert"] {
  font-family: var(--font-mono) !important;
  font-size: 8.5px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--cr) !important;
  border: 1px solid rgba(181,134,13,.3) !important;
  padding: 3px 9px !important;
  background: var(--cr2) !important;
}


/* ──────────────────────────────────────────────────────
   16. TICKER / LIVE MARKET STRIP
─────────────────────────────────────────────────────── */
.tri-ticker {
  background: var(--n2) !important;
  border-bottom: 1px solid var(--b) !important;
  overflow: hidden !important;
}
.tri-ticker-label {
  font-family: var(--font-mono) !important;
  font-size: 8.5px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--g) !important;
  opacity: .7 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.tri-ticker-track {
  display: flex !important;
  white-space: nowrap !important;
  animation: tri-tick 34s linear infinite !important;
}
@keyframes tri-tick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tri-ticker-item {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--d2) !important;
  padding-right: 52px !important;
}


/* ──────────────────────────────────────────────────────
   17. BOOKING WIDGET (for consult scheduling)
   Add class .tri-booking-widget to your booking container.
─────────────────────────────────────────────────────── */
.tri-booking-widget {
  background: var(--n) !important;
  border: 1px solid var(--b2) !important;
  border-top: 3px solid var(--g) !important;
}


/* ──────────────────────────────────────────────────────
   18. DIVIDERS & BORDERS
─────────────────────────────────────────────────────── */
hr, .divider { border: none !important; border-top: 1px solid var(--b) !important; }

/* Sky Blue accent rule — use for section breaks */
.tri-rule-or {
  width: 40px !important;
  height: 2px !important;
  background: var(--g) !important;
  display: block !important;
}

/* Sky Blue left-border accent block */
.tri-accent-block {
  border-left: 2px solid var(--g) !important;
  background: var(--or-faint) !important;
  padding: 10px 14px !important;
}


/* ──────────────────────────────────────────────────────
   19. UTILITY CLASSES
─────────────────────────────────────────────────────── */
.text-or    { color: var(--g) !important; }
.text-cr    { color: var(--cr) !important; }
.text-muted { color: var(--d1) !important; }
.text-faint { color: var(--d2) !important; }
.text-mono  { font-family: var(--font-mono) !important; }
.text-serif { font-family: var(--font-serif) !important; }
.text-italic-or { font-style: italic !important; color: var(--g) !important; }

.bg-surface  { background: var(--n2) !important; }
.bg-raised   { background: var(--n3) !important; }
.border-or   { border-color: var(--or-ring) !important; }

.label-style {
  font-family: var(--font-mono) !important;
  font-size: var(--size-label) !important;
  letter-spacing: var(--ls-widest) !important;
  text-transform: uppercase !important;
  color: var(--g) !important;
}


/* ──────────────────────────────────────────────────────
   20. RESPONSIVE BREAKPOINTS
─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --px: 20px;
    --py-sec: 60px;
  }
  .tri-anim {
    /* Reduce animation distance on mobile */
    transform: translateY(12px) !important;
  }
}

@media (max-width: 480px) {
  :root { --px: 16px; }
  .hero-h { font-size: 36px !important; line-height: 1.06 !important; }
}


/* ──────────────────────────────────────────────────────
   21. 5D DEPTH EFFECTS
─────────────────────────────────────────────────────── */

/* Card hover — 5D lift. !important on transform/box-shadow/border-color:
   sections 8/10/11 above already declare those !important on these same
   :hover selectors (base --shadow-lift lift) — without matching
   !important here this block would be dead weight, silently outranked
   by the earlier rules despite appearing later in the file. */
.svc-card:hover,
.hiw-step:hover,
.pillar-card:hover,
.aud-card:hover,
.g-card:hover,
.testi:hover,
.prob-item:hover {
  transform: perspective(500px) translateY(-8px) translateZ(16px) !important;
  box-shadow: var(--shadow-5d) !important;
  border-color: rgba(224,184,60,.22) !important;
  transition: transform .25s cubic-bezier(.34,1.1,.64,1),
              box-shadow .25s ease,
              border-color .25s ease !important;
}

/* Stat number glow. !important: .stat-n/.hs-n already set
   text-shadow:var(--shadow-glow)!important above — needs matching
   !important to actually replace it with the deeper glow. */
.stat-n,
.hs-n,
.hero-stat-n {
  text-shadow:
    0 0 20px rgba(224,184,60,.40),
    0 0 40px rgba(224,184,60,.18),
    0 2px 4px rgba(0,0,0,.50) !important;
}

/* Eyebrow depth marker */
.eyebrow,
.hero-eyebrow,
.sec-lbl {
  text-shadow:
    0 0 24px rgba(224,184,60,.28),
    0 2px 4px rgba(0,0,0,.40);
}

/* Float animation — deeper travel */
@keyframes tri-float {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50%       { transform: translateY(-18px) rotate(0.4deg); }
}

@keyframes bounce-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-18px) rotate(0.3deg); }
}

@keyframes tri-shadow {
  0%, 100% { transform: scaleX(1); opacity: .35; }
  50%       { transform: scaleX(.55); opacity: .08; }
}

/* 3D card — increase depth */
.tri-card-3d::after {
  right: -10px !important;
  bottom: -10px !important;
}

.card-glow {
  position: absolute;
  inset: -80px;
  background: radial-gradient(
    ellipse at 55% 50%,
    rgba(224,184,60,.16) 0%,
    rgba(224,184,60,.05) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}