/* ==========================================================================
   Venkat & Venkat, Advocates & Solicitors
   Design system: Classic Prestige. Deep navy, metallic gold, ivory paper.
   Type: EB Garamond (display) / Lato (text).
   No frameworks, no build step. Animations are transform/opacity only.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Colour */
  --navy-950: #0C0F26;
  --navy-900: #131737;
  --navy-800: #1A2048;
  --navy-700: #232A5C;
  --navy-100: #C9CCE0;
  --navy-060: #9CA1C2;

  --gold-200: #F0DFA8;
  --gold-300: #E6C87A;
  --gold-400: #D9B65C;
  --gold-500: #C9A227;
  --gold-600: #A9861F;

  --ivory: #FAF7F0;
  --paper: #FFFFFF;
  --ink: #1A1D33;
  --ink-soft: #4A4F6B;
  --line: #E5DFCE;
  --line-navy: rgba(217, 182, 92, 0.18);

  --grad-gold: linear-gradient(115deg, #A9861F 0%, #D9B65C 30%, #F0DFA8 50%, #D9B65C 70%, #A9861F 100%);

  /* Type */
  --font-display: "EB Garamond", "Georgia", serif;
  --font-text: "Lato", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --text-hero: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);

  /* Space (4/8 rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --section-pad: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* Misc */
  --container: 76rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-med: 320ms;
  --dur-slow: 700ms;
  --shadow-card: 0 18px 40px -24px rgba(12, 15, 38, 0.35);
  --z-header: 100;
  --z-menu: 200;
  --z-assistant: 500;
  --z-modal: 1000;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--ivory);
  /* Faint woven-paper grain on light surfaces */
  background-image:
    repeating-linear-gradient(135deg, rgba(20, 24, 56, 0.016) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(45deg, rgba(169, 134, 31, 0.014) 0 1px, transparent 1px 9px);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  animation: page-in 600ms var(--ease-out) both;
}

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.nav-open,
body.modal-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  color: inherit;
}

p { margin: 0 0 var(--space-4); }

a {
  color: var(--gold-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--gold-500); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

::selection { background: var(--gold-400); color: var(--navy-950); }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { position: relative; padding-block: var(--section-pad); }

.section--navy {
  background:
    radial-gradient(50rem 30rem at 110% 0%, rgba(201, 162, 39, 0.09), transparent 60%),
    radial-gradient(40rem 26rem at -10% 100%, rgba(35, 42, 92, 0.55), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);
  color: var(--navy-100);
}

.section--navy h1, .section--navy h2, .section--navy h3 { color: #F4F1E8; }

.section--paper { background: var(--paper); }

.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--space-6);
}

.section--navy .eyebrow { color: var(--gold-400); }

.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.lede {
  font-size: var(--text-md);
  color: var(--ink-soft);
  max-width: 46rem;
}

.section--navy .lede { color: var(--navy-100); }

.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-inline: auto;
  color: var(--gold-500);
}

.ornament-divider::before,
.ornament-divider::after {
  content: "";
  width: 4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}

.ornament-divider::after {
  background: linear-gradient(90deg, currentColor, transparent);
}

.ornament-divider .diamond { font-size: 0.6rem; line-height: 1; }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-modal) + 1);
  padding: var(--space-3) var(--space-6);
  background: var(--navy-950);
  color: var(--ivory);
  border-radius: 0 0 4px 4px;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible { top: 0; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0.8rem 1.9rem;
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn:active { transform: scale(0.98); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500) 55%, var(--gold-600));
  color: var(--navy-950);
  box-shadow: 0 10px 24px -12px rgba(201, 162, 39, 0.55);
}

/* Shine sweep across gold buttons on hover */
.btn--gold::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 600ms var(--ease-out);
  pointer-events: none;
}

.btn--gold:hover::after { left: 130%; }

.btn--gold:hover {
  color: var(--navy-950);
  box-shadow: 0 14px 30px -12px rgba(201, 162, 39, 0.75);
  transform: translateY(-2px);
}

.btn--ghost {
  border-color: rgba(217, 182, 92, 0.5);
  color: var(--gold-400);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--gold-400);
  color: var(--gold-300);
  background: rgba(217, 182, 92, 0.08);
  transform: translateY(-2px);
}

.btn--ghost-dark {
  border-color: rgba(26, 29, 51, 0.35);
  color: var(--ink);
  background: transparent;
}

.btn--ghost-dark:hover {
  border-color: var(--navy-900);
  color: var(--navy-900);
  background: rgba(19, 23, 55, 0.05);
  transform: translateY(-2px);
}

/* ---------- Brand logo (the firm's actual logo artwork) ----------
   The source artwork is a wide banner (wordmark + trailing double
   gold rule) at roughly a 9.3:1 aspect ratio, so it is sized down
   for the compact header and given flex-shrink:0 so it never
   competes with the nav for space and pushes things off-screen. */
.brand {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--gold-400);
}

.brand:hover { color: var(--gold-300); }

.brand-logo {
  display: block;
  /* The artwork is a ~9.3:1 banner, so height drives width fast. This
     ramp is tuned to consume the header's spare width at each breakpoint
     while always leaving clearance beside the nav. */
  height: clamp(2.9rem, 0.975rem + 2.42vw, 3.9rem);
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

/* In the footer the logo sits in a narrow column, so constrain by width
   and let the height follow the artwork's own ratio. */
.brand--footer .brand-logo {
  height: auto;
  width: 100%;
  max-width: 24rem;
}

.disclaimer-logo {
  display: inline-block;
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800));
  border: 1px solid var(--line-navy);
  padding: 0.7rem 0.9rem;
  margin-bottom: var(--space-4);
}

.disclaimer-logo .brand-logo { height: 2rem; }

/* ---------- Background photography ---------- */
.bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  mix-blend-mode: luminosity;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}

.page-head .bg-photo { opacity: 0.26; }

.bg-photo--plain {
  mix-blend-mode: normal;
  opacity: 0.22;
}

.hero .hero-inner,
.page-head .container,
.section--navy .container {
  position: relative;
  z-index: 1;
}

/* ---------- Plate figure ----------
   Capped so the photograph is never shown much larger than half its own
   pixel width, which keeps it sharp on retina screens. Right-aligned in
   its column so it stays anchored to the section's outer edge. */
.figure-plate {
  position: relative;
  margin: 0 0 0 auto;
  max-width: 25rem;
  border: 1px solid var(--line-navy);
  background: var(--navy-950);
  overflow: hidden;
}

.figure-plate img { will-change: transform; }

.figure-plate img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}

.figure-plate::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid rgba(217, 182, 92, 0.35);
  pointer-events: none;
}

.figure-plate figcaption {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.brand-scales {
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
  margin: -0.95rem 0 -0.55rem;
}

.brand-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-400) 18%, var(--gold-400) 82%, transparent);
}

.brand-sub {
  font-family: var(--font-text);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-300);
  white-space: nowrap;
  padding-left: 0.4em; /* optically balance the trailing letter-space */
}

.brand--footer .brand-word { font-size: 1.5rem; }
.brand--footer .brand-scales { width: 3.7rem; height: 3.7rem; margin: -1.2rem 0 -0.7rem; }
.brand--footer .brand-sub { font-size: 0.66rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-gold);
  background-size: 200% 100%;
  animation: gold-flow 9s linear infinite;
}

@keyframes gold-flow {
  to { background-position: 200% 0; }
}

.site-header.is-scrolled {
  background: rgba(12, 15, 38, 0.93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-navy);
  box-shadow: 0 18px 40px -30px rgba(12, 15, 38, 0.9);
}

/* While the menu is open the header must NOT carry backdrop-filter:
   a filtered ancestor becomes the containing block for position:fixed,
   which would pin the full-screen nav overlay to the header box. */
body.nav-open .site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* The header spans wider than the body's reading column so the logo and
   nav use the space that would otherwise sit empty on large screens.
   Declared after .container so this max-width wins at equal specificity. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 6rem;
  max-width: 96rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.05vw, 1.5rem);
}

.site-nav a:not(.btn) {
  position: relative;
  padding: var(--space-2) 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #E8E6DC;
}

.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn).is-active { color: var(--gold-300); }

.site-nav a:not(.btn):hover::after,
.site-nav a:not(.btn).is-active::after { transform: scaleX(1); }

.nav-cta {
  padding: 0.55rem 1.2rem;
  min-height: 2.75rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  width: 2.75rem;
  height: 2.75rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.nav-toggle span {
  width: 1.6rem;
  height: 2px;
  background: var(--gold-400);
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}

body.nav-open .nav-toggle span:first-child { transform: translateY(4.5px) rotate(45deg); }
body.nav-open .nav-toggle span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* Below this the full horizontal nav plus a legible logo no longer fit
   side by side, so switch to the overlay menu rather than cramming. */
@media (max-width: 1340px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-6);
    background:
      radial-gradient(40rem 30rem at 85% 10%, rgba(201, 162, 39, 0.1), transparent 60%),
      linear-gradient(160deg, var(--navy-950), var(--navy-800));
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
  }

  body.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .site-nav a:not(.btn) {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }

  body.nav-open .site-nav a:not(.btn) {
    opacity: 1;
    transform: none;
  }

  body.nav-open .site-nav a:nth-child(1) { transition-delay: 60ms; }
  body.nav-open .site-nav a:nth-child(2) { transition-delay: 110ms; }
  body.nav-open .site-nav a:nth-child(3) { transition-delay: 160ms; }
  body.nav-open .site-nav a:nth-child(4) { transition-delay: 210ms; }
  body.nav-open .site-nav a:nth-child(5) { transition-delay: 260ms; }
  body.nav-open .site-nav a:nth-child(6) { transition-delay: 310ms; }
  body.nav-open .site-nav a:nth-child(7) { transition-delay: 360ms; }
  body.nav-open .site-nav .nav-cta { transition-delay: 410ms; }

  .site-nav .nav-cta {
    opacity: 0;
    transform: translateY(14px);
    margin-top: var(--space-4);
  }

  body.nav-open .site-nav .nav-cta { opacity: 1; transform: none; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: 9rem 5rem;
  background:
    radial-gradient(58rem 34rem at 85% -10%, rgba(201, 162, 39, 0.14), transparent 60%),
    radial-gradient(40rem 30rem at -5% 110%, rgba(35, 42, 92, 0.6), transparent 65%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color: var(--navy-100);
  overflow: hidden;
}

.hero-ornament {
  position: absolute;
  top: -6rem;
  left: -6rem;
  width: clamp(20rem, 40vw, 34rem);
  opacity: 0.55;
  pointer-events: none;
  animation: ornament-spin 240s linear infinite;
  transform-origin: 0 0;
}

@keyframes ornament-spin {
  to { rotate: 360deg; }
}

.hero-scales {
  position: absolute;
  right: clamp(-6rem, -2vw, 2rem);
  bottom: -4rem;
  width: clamp(18rem, 34vw, 30rem);
  opacity: 0.07;
  pointer-events: none;
}

.hero-inner { position: relative; }

.hero-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy-060);
  margin-bottom: var(--space-8);
}

.hero-kicker strong { color: var(--gold-400); font-weight: 700; }

.hero-title {
  font-size: var(--text-hero);
  font-weight: 500;
  color: #F7F4EA;
  margin-bottom: var(--space-6);
  line-height: 1.12;
}

.hero-title .line {
  display: block;
  overflow: hidden;
  /* EB Garamond's italic swashes (f, y, g) draw ink below the font's
     own line-box metrics; 0.06em clipped those descenders flat.
     0.3em gives real headroom without visibly loosening the stack. */
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}

.hero-title .line > span {
  display: block;
  transform: translateY(112%);
  animation: line-rise 1000ms var(--ease-out) forwards;
}

.hero-title .line:nth-child(1) > span { animation-delay: 150ms; }
.hero-title .line:nth-child(2) > span { animation-delay: 330ms; }
.hero-title .line:nth-child(3) > span { animation-delay: 510ms; }

@keyframes line-rise {
  to { transform: translateY(0); }
}

.hero-title .accent {
  font-style: italic;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  font-size: var(--text-md);
  max-width: 40rem;
  color: var(--navy-100);
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: clamp(3rem, 6vh, 5rem);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) clamp(2rem, 6vw, 5rem);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line-navy);
}

.stat .stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  font-weight: 500;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}

.stat .stat-label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-060);
}

.hero [data-entrance] {
  opacity: 0;
  transform: translateY(26px);
  animation: entrance 900ms var(--ease-out) forwards;
}

.hero [data-entrance="1"] { animation-delay: 80ms; }
.hero [data-entrance="4"] { animation-delay: 700ms; }
.hero [data-entrance="5"] { animation-delay: 860ms; }

@keyframes entrance {
  to { opacity: 1; transform: none; }
}


/* ---------- Page head (interior pages) ---------- */
.page-head {
  position: relative;
  padding: 11rem 0 4.5rem;
  background:
    radial-gradient(44rem 26rem at 90% -20%, rgba(201, 162, 39, 0.14), transparent 60%),
    radial-gradient(36rem 24rem at -5% 120%, rgba(35, 42, 92, 0.55), transparent 65%),
    linear-gradient(160deg, var(--navy-950), var(--navy-800));
  color: var(--navy-100);
  overflow: hidden;
}

.page-head .hero-ornament { top: -8rem; opacity: 0.4; }

.page-head h1 {
  font-size: var(--text-2xl);
  color: #F7F4EA;
  max-width: 22ch;
}

.page-head .lede { color: var(--navy-100); }

.page-head [data-entrance] {
  opacity: 0;
  transform: translateY(26px);
  animation: entrance 900ms var(--ease-out) forwards;
}

.page-head [data-entrance="1"] { animation-delay: 100ms; }
.page-head [data-entrance="2"] { animation-delay: 240ms; }
.page-head [data-entrance="3"] { animation-delay: 380ms; }
.page-head [data-entrance="4"] { animation-delay: 520ms; }

.page-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-navy);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-060);
}

.page-head-meta strong { color: var(--gold-400); font-weight: 700; }

/* ---------- Forum marquee ---------- */
.marquee {
  background: var(--navy-950);
  border-block: 1px solid var(--line-navy);
  padding-block: var(--space-4);
  overflow: hidden;
  position: relative;
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6rem;
  z-index: 1;
  pointer-events: none;
}

.marquee::before { left: 0; background: linear-gradient(90deg, var(--navy-950), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--navy-950), transparent); }

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 80s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-group {
  display: flex;
  gap: var(--space-8);
  padding-right: var(--space-8);
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-400);
  white-space: nowrap;
}

.marquee-item::after {
  content: "◆";
  font-size: 0.55rem;
  color: var(--navy-060);
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* ---------- Section header row ---------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head h2 {
  font-size: var(--text-xl);
  max-width: 24ch;
  margin: 0;
}

.section-link {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.section-link .arrow { transition: transform var(--dur-fast) var(--ease-out); }

.section-link:hover .arrow { transform: translateX(4px); }

/* ---------- Practice cards ---------- */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .practice-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.practice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper);
  color: inherit;
  transition: background-color var(--dur-med) var(--ease-out);
}

.practice-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

.practice-card:hover { background: var(--ivory); }
.practice-card:hover::after { transform: scaleX(1); }

.practice-card .card-index {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  color: var(--gold-600);
}

.practice-card h3 {
  font-size: var(--text-lg);
  margin: 0;
  color: var(--navy-900);
}

.practice-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.practice-card .card-more {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.practice-card:hover .card-more { opacity: 1; transform: none; }

/* ---------- Practice detail blocks ---------- */
.practice-detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.practice-detail:last-of-type { border-bottom: 1px solid var(--line); }

/* Group emblem: line engraving in the same idiom as the brand mark,
   sitting above the section number so each group is identifiable at a
   glance without the icon competing with the heading. */
.practice-icon {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--gold-500);
  margin-bottom: var(--space-4);
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}

.practice-detail:hover .practice-icon {
  color: var(--gold-600);
  transform: translateY(-2px);
}

.practice-detail .detail-num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.26em;
  color: var(--gold-600);
  margin-bottom: var(--space-3);
}

.practice-detail h2 {
  font-size: var(--text-xl);
  color: var(--navy-900);
}

.practice-detail .detail-summary { color: var(--ink-soft); }

.handle-list-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--space-4);
}

.handle-list li {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  transition: padding-left var(--dur-med) var(--ease-out);
}

.handle-list li:hover { padding-left: var(--space-2); }

.handle-list li:first-of-type { border-top: 1px solid var(--line); }

.handle-list .num {
  font-family: var(--font-display);
  color: var(--gold-600);
  min-width: 1.6rem;
}

@media (max-width: 800px) {
  .practice-detail { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---------- Feature trio ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.feature .feature-num {
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: 0.2em;
  color: var(--gold-400);
  margin-bottom: var(--space-3);
}

.section--paper .feature .feature-num,
.section .feature .feature-num { color: var(--gold-600); }

.section--navy .feature .feature-num { color: var(--gold-400); }

.feature h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.feature p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.section--navy .feature p { color: var(--navy-100); }

/* ---------- Split section ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.split h2 { font-size: var(--text-xl); }

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

/* ---------- Stats band ---------- */
/* Four equal columns with the figure and its label centred inside each,
   so the run of stats reads evenly across the panel. Left-aligning them
   made the spacing look lopsided, because the labels differ in length
   ("Partners" vs "Reported Judgments") and every cell is the same width. */
.stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-8);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.stats-band .stat-value { display: block; }

/* ---------- People: preview cards (home) ---------- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.people-grid--partners { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.person-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.person-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.person-photo {
  position: relative;
  aspect-ratio: 4 / 4.6;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(24rem 16rem at 80% -20%, rgba(201, 162, 39, 0.16), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800));
  overflow: hidden;
}

.person-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}

.person-card:hover .person-img { transform: scale(1.04); }

.person-monogram {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  letter-spacing: 0.08em;
  color: var(--gold-400);
}

.person-photo::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid rgba(217, 182, 92, 0.3);
  pointer-events: none;
}

.person-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }

.person-body h3 {
  font-size: var(--text-lg);
  margin: 0;
  color: var(--navy-900);
}

.person-role {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.person-bio {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* ---------- People: full profiles (People page) ---------- */
/* The portrait column is capped at 18rem so that even the smallest
   supplied headshot (573px wide) still provides ~2x the displayed
   pixels on a retina screen -- sizing past the source only looks soft. */
.profile {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.profile:first-of-type { border-top: 0; padding-top: 0; }

.profile-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(20rem 14rem at 80% -20%, rgba(201, 162, 39, 0.16), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo::after {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid rgba(217, 182, 92, 0.35);
  pointer-events: none;
}

.profile-photo .person-monogram { position: relative; }

.profile-role {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--space-2);
}

.profile-body h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  color: var(--navy-900);
  margin-bottom: var(--space-4);
}

.profile-body p {
  color: var(--ink-soft);
  max-width: 60ch;
}

.profile-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.profile-more > div { overflow: hidden; }

.profile.is-open .profile-more { grid-template-rows: 1fr; }

.profile-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0.55rem 1.4rem;
  border: 1px solid rgba(26, 29, 51, 0.3);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy-900);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.profile-toggle:hover {
  border-color: var(--gold-500);
  background: rgba(201, 162, 39, 0.08);
}

.profile-toggle .chev { transition: transform var(--dur-med) var(--ease-out); font-size: 0.7rem; }

.profile.is-open .profile-toggle .chev { transform: rotate(180deg); }

@media (max-width: 760px) {
  .profile { grid-template-columns: 1fr; }
  .profile-photo { max-width: 22rem; }
}

/* ---------- Insights ---------- */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.insight-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-500);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.insight-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.insight-meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--space-4);
}

.insight-meta .date { color: var(--ink-soft); }

.insight-card h3 {
  font-size: var(--text-lg);
  color: var(--navy-900);
  margin-bottom: var(--space-3);
}

.insight-card .excerpt {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin: 0;
}

.insight-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.insight-body > div { overflow: hidden; }

.insight-card.is-open .insight-body { grid-template-rows: 1fr; }

.insight-body p {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin: var(--space-4) 0 0;
}

.insight-toggle {
  margin-top: var(--space-6);
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.insight-toggle:hover { color: var(--gold-500); }

.insight-toggle .chev { transition: transform var(--dur-med) var(--ease-out); }

.insight-card.is-open .insight-toggle .chev { transform: rotate(180deg); }

/* ---------- Client reviews ---------- */
.rating-panel {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-500);
  background: var(--ivory);
  box-shadow: var(--shadow-card);
}

@media (max-width: 820px) {
  .rating-panel { grid-template-columns: 1fr; }
}

.rating-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding-right: clamp(0rem, 2vw, 2rem);
  border-right: 1px solid var(--line);
}

@media (max-width: 820px) {
  .rating-score {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 var(--space-6);
  }
}

.rating-value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rating-stars {
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: var(--gold-500);
}

.rating-count {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rating-note p { color: var(--ink-soft); }

/* ---------- CTA bands ---------- */
.cta-band {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.cta-band h2 {
  font-size: var(--text-2xl);
  max-width: 24ch;
  margin-inline: auto;
}

.cta-band .hero-scales {
  right: auto;
  left: 50%;
  bottom: -10rem;
  translate: -50% 0;
  width: clamp(22rem, 40vw, 34rem);
  opacity: 0.05;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* ---------- Careers ---------- */
.role-list { display: grid; gap: var(--space-4); }

.role-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-500);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.role-card h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); color: var(--navy-900); }

.role-card .role-meta {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.role-card p { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--ink-soft); max-width: 38rem; }

/* ---------- Contact ---------- */
/* With the enquiry form removed, the chamber details and the map share
   the row evenly rather than the old form-heavy 7/5 split. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.map-label {
  font-family: var(--font-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--space-3);
}

.map-frame--tall { aspect-ratio: 4 / 3.6; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }

.form-field { display: flex; flex-direction: column; gap: var(--space-2); }

.form-field--full { grid-column: 1 / -1; }

.form-field label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy-900);
}

.form-field label .req { color: var(--gold-600); }

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  min-height: 3rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.form-field textarea { resize: vertical; min-height: 9rem; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

.form-field .field-error {
  display: none;
  font-size: var(--text-sm);
  color: #B3261E;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: #B3261E; }

.form-field.has-error .field-error { display: block; }

.form-note {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-top: var(--space-4);
}

.form-status {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--gold-500);
  background: rgba(201, 162, 39, 0.08);
  font-size: var(--text-sm);
  color: var(--navy-900);
}

.form-status.is-visible { display: block; }

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

.chamber-info { display: grid; gap: var(--space-8); }

.chamber-info h3 {
  font-size: var(--text-xs);
  font-family: var(--font-text);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--space-3);
}

.chamber-info address {
  font-style: normal;
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--navy-900);
}

.chamber-info a.tel {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--navy-900);
}

.chamber-info a.tel:hover { color: var(--gold-600); }

.map-frame {
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.9) sepia(0.12);
}

/* ---------- Footer ---------- */
.site-footer {
  background:
    radial-gradient(40rem 20rem at 90% 0%, rgba(201, 162, 39, 0.06), transparent 60%),
    var(--navy-950);
  color: var(--navy-100);
  border-top: 1px solid var(--line-navy);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.5fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: var(--space-16) var(--space-12);
}

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

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

.footer-brand p {
  font-size: var(--text-sm);
  color: var(--navy-060);
  max-width: 24rem;
  margin-top: var(--space-6);
}

.footer-col h3 {
  font-family: var(--font-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--space-4);
}

.footer-col li { margin-bottom: var(--space-2); }

.footer-col a {
  font-size: var(--text-sm);
  color: var(--navy-100);
}

.footer-col a:hover { color: var(--gold-300); }

.footer-col address {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--navy-100);
  line-height: 1.8;
}

.footer-bar {
  border-top: 1px solid var(--line-navy);
  padding-block: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--navy-060);
}

.footer-bar button {
  font-size: var(--text-xs);
  color: var(--navy-060);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}

.footer-bar button:hover { color: var(--gold-300); }

.footer-disclaimer {
  padding-block: 0 var(--space-8);
  font-size: var(--text-xs);
  line-height: 1.8;
  color: rgba(156, 161, 194, 0.75);
  max-width: 62rem;
}

/* ---------- Disclaimer modal ---------- */
.disclaimer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(8, 10, 26, 0.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}

.disclaimer-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.disclaimer-modal {
  width: min(40rem, 100%);
  max-height: min(85svh, 44rem);
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border-top: 3px solid var(--gold-500);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6);
  transform: translateY(18px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-out);
}

.disclaimer-overlay.is-visible .disclaimer-modal { transform: none; }

.disclaimer-head { padding: var(--space-8) var(--space-8) 0; }

.disclaimer-head .brand-lockup { align-items: flex-start; margin-bottom: var(--space-6); }
.disclaimer-head .brand-word { font-size: 1rem; }
.disclaimer-head .brand-scales { width: 2.4rem; height: 2.4rem; margin: -0.8rem 0 -0.45rem; }
.disclaimer-head .brand-sub { font-size: 0.5rem; color: var(--gold-600); }

.disclaimer-head h2 {
  font-size: var(--text-lg);
  color: var(--navy-900);
  margin-bottom: var(--space-2);
}

.disclaimer-body {
  padding: var(--space-4) var(--space-8);
  overflow-y: auto;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.disclaimer-body p { margin-bottom: var(--space-3); }

.disclaimer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-6) var(--space-8) var(--space-8);
  border-top: 1px solid var(--line);
}

/* ---------- AI Assistant ---------- */
.vv-assistant { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: var(--z-assistant); }

.vv-assistant-btn {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(217, 182, 92, 0.55);
  box-shadow:
    0 0 18px rgba(201, 162, 39, 0.45),
    0 0 44px rgba(201, 162, 39, 0.2),
    0 18px 30px -18px rgba(0, 0, 0, 0.7);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.vv-assistant-btn:hover {
  transform: scale(1.08) rotate(4deg);
  box-shadow:
    0 0 26px rgba(201, 162, 39, 0.65),
    0 0 60px rgba(201, 162, 39, 0.3),
    0 18px 30px -18px rgba(0, 0, 0, 0.7);
}

.vv-assistant-btn svg { width: 2.1rem; height: 2.1rem; }

.vv-assistant-btn .halo {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(217, 182, 92, 0.5);
  animation: halo-ping 2.6s var(--ease-out) infinite;
  pointer-events: none;
}

@keyframes halo-ping {
  0% { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}

.vv-chat {
  position: absolute;
  right: 0;
  bottom: 5.25rem;
  width: min(24rem, calc(100vw - 2.5rem));
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, rgba(26, 32, 72, 0.97), rgba(12, 15, 38, 0.98));
  border: 1px solid rgba(217, 182, 92, 0.35);
  border-radius: 14px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.75), 0 0 40px rgba(201, 162, 39, 0.12);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transform-origin: bottom right;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}

.vv-chat.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.vv-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(217, 182, 92, 0.2);
}

.vv-chat-head .who {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #F4F1E8;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.vv-chat-head .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  50% { opacity: 0.5; }
}

.vv-chat-head .tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
  border: 1px solid rgba(217, 182, 92, 0.4);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.vv-chat-close {
  color: var(--navy-060);
  padding: 0.3rem;
  border-radius: 6px;
  line-height: 0;
}

.vv-chat-close:hover { color: var(--gold-300); background: rgba(217, 182, 92, 0.1); }

.vv-chat-log {
  height: 19rem;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 182, 92, 0.35) transparent;
}

.vv-msg {
  max-width: 88%;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.55;
  animation: msg-in 300ms var(--ease-out) both;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.vv-msg--bot {
  align-self: flex-start;
  background: rgba(217, 182, 92, 0.1);
  border: 1px solid rgba(217, 182, 92, 0.22);
  color: #E9E7DB;
  border-bottom-left-radius: 4px;
}

.vv-msg--bot a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 2px; }

.vv-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-950);
  font-weight: 500;
  border-bottom-right-radius: 4px;
}

.vv-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: 0.8rem 1rem;
  background: rgba(217, 182, 92, 0.1);
  border: 1px solid rgba(217, 182, 92, 0.22);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}

.vv-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-300);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.vv-typing i:nth-child(2) { animation-delay: 0.15s; }
.vv-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.vv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 1.1rem 0.75rem;
}

.vv-chip {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold-300);
  border: 1px solid rgba(217, 182, 92, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.vv-chip:hover {
  background: rgba(217, 182, 92, 0.14);
  transform: translateY(-1px);
}

.vv-chat-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid rgba(217, 182, 92, 0.2);
}

.vv-chat-input input {
  flex: 1;
  background: rgba(12, 15, 38, 0.6);
  border: 1px solid rgba(217, 182, 92, 0.25);
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font: inherit;
  font-size: 0.85rem;
  color: #F4F1E8;
  min-height: 2.75rem;
}

.vv-chat-input input::placeholder { color: var(--navy-060); }

.vv-chat-input input:focus {
  outline: none;
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}

.vv-send {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  color: var(--navy-950);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.vv-send:hover {
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(201, 162, 39, 0.5);
}

.vv-send svg { width: 1.1rem; height: 1.1rem; }

.vv-chat-foot {
  padding: 0.5rem 1.1rem 0.8rem;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--navy-060);
  text-align: center;
}

@media (max-width: 640px) {
  .vv-assistant { right: 1rem; bottom: 1rem; }
  .vv-chat { bottom: 4.75rem; }
  .vv-chat-log { height: 16rem; }
}

/* ---------- Reveal animations ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="fade"] { transform: none; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }

  .hero-title .line > span { transform: none; animation: none; }

  .marquee-track { animation: none; width: auto; }
  .marquee-group { flex-wrap: wrap; }
  .marquee-group[aria-hidden="true"] { display: none; }

  [data-parallax] { transform: none !important; }
}