/* ==========================================================================
   QUMIS MARKETING SITE — shared stylesheet
   Derived from Qumis Design System (Brand Book v2.4-Live)
   Paper & Ink · Lora display · Inter body · Dawn gradient accent
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Primary surfaces */
  --paper: #f1f0ed;
  --paper-100: #eae8e4;
  --ink: #242423;
  --ink-soft: #2e2e2c;
  --white: #ffffff;

  /* Text */
  --text: #242423;
  --text-secondary: #4a4a4a;
  --text-muted: #737373;
  --text-light: #9b9b9b;
  --text-on-ink: #f1f0ed;
  --text-on-ink-muted: rgba(241, 240, 237, 0.64);

  /* Accent scales */
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --rose-300: #fda4af;
  --rose-500: #f43f5e;
  --dawn: linear-gradient(100deg, #fda4af 0%, #60a5fa 100%);

  /* Borders */
  --hairline: rgba(36, 36, 35, 0.1);
  --hairline-strong: rgba(36, 36, 35, 0.22);
  --hairline-on-ink: rgba(241, 240, 237, 0.16);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(36, 36, 35, 0.05);
  --shadow-sm:
    0 1px 3px rgba(36, 36, 35, 0.08), 0 1px 2px rgba(36, 36, 35, 0.04);
  --shadow-md:
    0 4px 10px rgba(36, 36, 35, 0.08), 0 2px 4px rgba(36, 36, 35, 0.04);
  --shadow-doc: 0 11px 56px rgba(0, 0, 0, 0.18);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* Layout */
  --container: 1140px;
  --container-wide: 1240px;
  --nav-h: 72px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 17px;
  line-height: 1.7;
  font-feature-settings:
    "ss01" on,
    "cv05" on;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
p {
  margin: 0 0 1em;
}
h1,
h2,
h3,
h4 {
  margin: 0;
}
::selection {
  background: rgba(96, 165, 250, 0.3);
}

/* ---------- Typography ---------- */
.display,
.h-hero {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(42px, 6.2vw, 76px);
  color: var(--text);
}
.h-section {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(30px, 4vw, 48px);
}
.h-sub {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-size: clamp(22px, 2.6vw, 30px);
}
.h-card {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.on-ink .eyebrow {
  color: var(--text-on-ink-muted);
}
.lede {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 720px;
}
.on-ink .lede,
.bg-ink .lede {
  color: var(--text-on-ink-muted);
}
.body-sm {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.muted {
  color: var(--text-muted);
}
.serif-italic {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
}

/* Dawn gradient text accent — one per surface, max */
.dawn-text {
  background: var(--dawn);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dawn-underline {
  background-image: linear-gradient(100deg, #fda4af, #60a5fa);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 96%;
  padding-bottom: 2px;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 28px;
}
.section {
  padding: 104px 0;
}
.section-sm {
  padding: 72px 0;
}
.section-head {
  max-width: 760px;
  margin-bottom: 64px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head.center .lede {
  margin-left: auto;
  margin-right: auto;
}

/* Surfaces */
.bg-paper {
  background: var(--paper);
}
.bg-white {
  background: var(--white);
}
.bg-ink {
  background: var(--ink);
  color: var(--text-on-ink);
}
.bg-ink .h-section,
.bg-ink .h-hero,
.bg-ink .h-sub {
  color: var(--text-on-ink);
}
.on-ink {
  color: var(--text-on-ink);
}

/* Subtle illustration backdrop on ink sections */
.ink-illustrated {
  position: relative;
  overflow: hidden;
}
.ink-illustrated > .container,
.ink-illustrated > .container-wide {
  position: relative;
  z-index: 1;
}
.ink-illustration {
  position: absolute;
  pointer-events: none;
  opacity: 0.22;
  z-index: 0;
}

/* ---------- Grid helpers ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 980px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .section {
    padding: 72px 0;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    opacity 200ms ease-out,
    transform 150ms ease-out,
    background 200ms ease-out;
  white-space: nowrap;
}
.btn:active {
  transform: scale(0.98);
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover {
  background: #3a3a38;
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn-secondary:hover {
  background: rgba(36, 36, 35, 0.05);
}
.btn-on-ink-primary {
  background: var(--paper);
  color: var(--ink);
}
.btn-on-ink-primary:hover {
  opacity: 0.9;
}
.btn-on-ink-secondary {
  background: transparent;
  color: var(--paper);
  border-color: var(--hairline-on-ink);
}
.btn-on-ink-secondary:hover {
  background: rgba(241, 240, 237, 0.08);
}
.btn-lg {
  padding: 18px 32px;
  font-size: 16px;
}
.btn-sm {
  padding: 11px 20px;
  font-size: 14px;
}
.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.text-link {
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
}
.text-link:hover {
  border-bottom-color: currentColor;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(241, 240, 237, 0.88);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 28px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-logo img {
  height: 26px;
  width: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  flex: 1;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 150ms ease-out;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
}
.nav-cta {
  display: flex;
  gap: 12px;
  align-items: center;
}
.nav-cta .login {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-right: 4px;
}
.nav-cta .login:hover {
  color: var(--ink);
}

/* Dropdown */
.nav-drop {
  position: relative;
}
.nav-drop > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 18px;
}
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 250px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 180ms ease-out;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-drop-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  color: var(--text);
}
.nav-drop-menu a:hover {
  background: var(--paper);
}
.nav-drop-menu .desc {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
}

/* Mobile nav */
.nav-burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
}
@media (max-width: 980px) {
  .nav-links {
    display: none;
  }
  .nav-cta .btn-secondary,
  .nav-cta .login,
  .nav-cta .btn.btn-primary.btn-sm {
    display: none;
  }
  .nav-burger {
    display: block;
  }
  .nav-inner {
    gap: 16px;
    justify-content: space-between;
  }
}
.mobile-menu {
  display: none;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  padding: 16px 28px 28px;
  height: 100dvh;
}
.mobile-menu.open {
  display: block;
}
.mobile-menu a {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}
.mobile-menu .group-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 18px 0 4px;
  border: 0;
  font-weight: 600;
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
}
.card .icon-chip {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--paper);
  margin-bottom: 22px;
  color: var(--ink);
}
.card h3 {
  margin-bottom: 10px;
}
.card p:last-child {
  margin-bottom: 0;
}

.card-ink {
  background: var(--ink-soft);
  border: 1px solid var(--hairline-on-ink);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  color: var(--text-on-ink);
}
.card-ink .body-sm,
.card-ink p {
  color: var(--text-on-ink-muted);
}
.card-ink .icon-chip {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: rgba(241, 240, 237, 0.07);
  margin-bottom: 22px;
  color: var(--text-on-ink);
}

/* Numbered / ledger rows */
.ledger {
  border-top: 1px solid var(--hairline);
}
.ledger-row {
  display: grid;
  grid-template-columns: 72px 280px 1fr;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.ledger-row .num {
  font-family: "Lora", serif;
  font-size: 18px;
  color: var(--text-light);
}
.ledger-row h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ledger-row p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15.5px;
}
.on-ink .ledger {
  border-color: var(--hairline-on-ink);
}
.on-ink .ledger-row {
  border-color: var(--hairline-on-ink);
}
.on-ink .ledger-row p {
  color: var(--text-on-ink-muted);
}
@media (max-width: 860px) {
  .ledger-row {
    grid-template-columns: 48px 1fr;
  }
  .ledger-row p {
    grid-column: 2;
  }
}

/* ---------- Stats ---------- */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
@media (max-width: 980px) {
  .stat-band {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 28px;
  }
}
.stat .num {
  font-family: "Lora", serif;
  font-weight: 500;
  font-size: clamp(44px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 12px;
}
.stat .label {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 240px;
}
.on-ink .stat .label {
  color: var(--text-on-ink-muted);
}

/* ---------- Quote / testimonial ---------- */
.quote {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.quote-attr {
  margin-top: 24px;
  font-family: "Inter", sans-serif;
}
.quote-attr .name {
  font-weight: 600;
  font-size: 15px;
}
.quote-attr .role {
  font-size: 14px;
  color: var(--text-muted);
}

/* ---------- Mock UI primitives (product visuals built in HTML) ---------- */
.mock-window {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-doc);
  overflow: hidden;
  font-size: 13.5px;
}
.mock-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  background: #fafaf9;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
}
.mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e3e2de;
}
.mock-body {
  padding: 20px;
}
.mock-line {
  height: 9px;
  border-radius: 4px;
  background: #ecebe7;
  margin-bottom: 10px;
}
.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--paper);
  color: var(--text-secondary);
  border: 1px solid var(--hairline);
}
.mock-chip.cite {
  background: #eff6ff;
  color: var(--blue-600);
  border-color: rgba(37, 99, 235, 0.18);
}
.mock-chip.ok {
  background: #f0fdf4;
  color: #15803d;
  border-color: rgba(21, 128, 61, 0.18);
}
.mock-chip.warn {
  background: #fff7ed;
  color: #c2410c;
  border-color: rgba(194, 65, 12, 0.18);
}
.mock-chip.rose {
  background: #fff1f2;
  color: #be123c;
  border-color: rgba(190, 18, 60, 0.18);
}

/* ---------- Badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  background: var(--white);
  color: var(--text-secondary);
}
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-500);
}
.on-ink .pill {
  background: transparent;
  border-color: var(--hairline-on-ink);
  color: var(--text-on-ink-muted);
}

/* ---------- Logo strip ---------- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 48px;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  padding: 72px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.footer h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.footer a {
  display: block;
  font-size: 14.5px;
  color: var(--text-secondary);
  padding: 5px 0;
}
.footer a:hover {
  color: var(--ink);
}
.footer .addr {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.footer-bottom {
  border-top: 1px solid var(--hairline);
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--text-muted);
}
.footer-bottom .links {
  display: flex;
  gap: 22px;
}
.footer-logo img {
  height: 24px;
  margin-bottom: 18px;
}

/* ---------- Misc ---------- */
.divider-hair {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.kicker-rule {
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--dawn);
  margin-bottom: 28px;
}
.icon-inline {
  vertical-align: -3px;
}
[data-lucide] {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}

/* Reveal on scroll (progressive enhancement) */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 500ms ease-out,
    transform 500ms ease-out;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   v2 PREMIUM IMAGE-LED ADDITIONS
   ========================================================================== */

/* Cohesion treatment for all photography */
.photo-treated {
  filter: saturate(0.84) contrast(1.03);
}

/* ---------- Full-bleed photographic hero ---------- */
.hero-full {
  position: relative;
  min-height: min(86vh, 860px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--ink);
}
.hero-full .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.84) contrast(1.03);
  transform: scale(1.02);
}
.hero-full .hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 36, 35, 0.5) 0%,
    rgba(36, 36, 35, 0.34) 38%,
    rgba(36, 36, 35, 0.62) 100%
  );
}
.hero-full .hero-content {
  position: relative;
  z-index: 1;
  max-width: 880px;
  padding: 140px 28px 150px;
  color: var(--text-on-ink);
}
.hero-full .h-hero {
  color: #ffffff;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
.hero-full .lede {
  color: rgba(241, 240, 237, 0.86);
  margin: 26px auto 40px;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}
.hero-full .eyebrow {
  color: rgba(241, 240, 237, 0.72);
}
.hero-full .hero-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 22px 28px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(241, 240, 237, 0.62);
  border-top: 1px solid rgba(241, 240, 237, 0.14);
  background: linear-gradient(
    180deg,
    rgba(36, 36, 35, 0) 0%,
    rgba(36, 36, 35, 0.42) 100%
  );
}
@media (max-width: 640px) {
  .hero-full {
    min-height: 92vh;
  }
  .hero-full .hero-content {
    padding: 110px 22px 130px;
  }
  .hero-full .hero-foot {
    gap: 18px;
    font-size: 12px;
  }
}

/* ---------- Full-width image bands ---------- */
.img-band {
  position: relative;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.img-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 36, 35, 0.06) 30%,
    rgba(36, 36, 35, 0.55) 100%
  );
}
.img-band .band-caption {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 36px 0;
  color: #ffffff;
}
.img-band .band-caption .quote,
.img-band .band-caption .h-sub {
  color: #ffffff;
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.4);
}
.img-band .band-caption .body-sm {
  color: rgba(241, 240, 237, 0.8);
}
.img-band-tall {
  min-height: 620px;
}
@media (max-width: 640px) {
  .img-band {
    min-height: 380px;
  }
}

/* ---------- Editorial feature rows (replace card grids) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 72px 0;
}
.feature-row + .feature-row {
  border-top: 1px solid var(--hairline);
}
.feature-row .fr-media img {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-doc);
}
@media (max-width: 980px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px 0;
  }
}

/* Plain editorial list — replaces mini-card grids */
.plain-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 56px;
}
.plain-list .pl-item {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 16.5px;
}
.plain-list .pl-item strong {
  font-weight: 600;
  white-space: nowrap;
}
.plain-list .pl-item span {
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .plain-list {
    grid-template-columns: 1fr;
  }
}
.on-ink .plain-list .pl-item {
  border-color: var(--hairline-on-ink);
}
.on-ink .plain-list .pl-item span {
  color: var(--text-on-ink-muted);
}

/* Oversized single quote */
.quote-xl {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 980px;
}

/* Split with photo */
.photo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}
.photo-split .ps-img img {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-doc);
  filter: saturate(0.84) contrast(1.03);
}
@media (max-width: 980px) {
  .photo-split {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

/* Looser premium rhythm */
.section-xl {
  padding: 140px 0;
}
@media (max-width: 640px) {
  .section-xl {
    padding: 88px 0;
  }
}

/* ==========================================================================
   v3 STUDIO POLISH LAYER — precision, motion, affordance
   ========================================================================== */

/* Typographic discipline */
h1,
h2,
h3,
.h-hero,
.h-section,
.h-sub {
  text-wrap: balance;
}
.lede,
.quote,
.quote-xl {
  text-wrap: pretty;
}
.h-hero {
  letter-spacing: -0.025em;
}
.h-section {
  letter-spacing: -0.022em;
}
.eyebrow {
  letter-spacing: 0.1em;
  font-size: 12.5px;
}

/* Focus — branded, never the default ring */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible {
  outline-offset: 2px;
}

/* Buttons — real hover affordance, 150ms ease-out */
.btn {
  transition:
    background 150ms ease-out,
    color 150ms ease-out,
    border-color 150ms ease-out,
    box-shadow 150ms ease-out,
    transform 150ms ease-out;
}
.btn-primary:hover {
  background: #3a3a38;
  box-shadow:
    0 1px 2px rgba(36, 36, 35, 0.18),
    0 6px 18px rgba(36, 36, 35, 0.22);
  transform: translateY(-1px);
}
.btn-on-ink-primary:hover {
  opacity: 1;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
.btn-secondary:hover {
  border-color: var(--ink);
}
.btn-on-ink-secondary:hover {
  border-color: rgba(241, 240, 237, 0.55);
}

/* Text links — finished underlines */
.text-link {
  transition: color 150ms ease-out;
  border-bottom: 0;
  text-decoration: underline transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.text-link:hover {
  text-decoration-color: currentColor;
}
.text-link [data-lucide] {
  transition: transform 150ms ease-out;
}
.text-link:hover [data-lucide] {
  transform: translateX(3px);
}
.footer a {
  transition: color 150ms ease-out;
}
.nav-links a {
  transition: color 150ms ease-out;
}

/* Two-layer document shadow (was single) */
:root {
  --shadow-doc: 0 2px 6px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.16);
}

/* Photography — locked ratios, no reflow */
.ps-img img,
.fr-media img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}
.ar-16-9 img,
img.ar-16-9 {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover;
}
.ar-21-9 img,
img.ar-21-9 {
  aspect-ratio: 21 / 9 !important;
  object-fit: cover;
}

/* Reveal — 300ms ease-out, staggered grids */
.reveal {
  transition:
    opacity 300ms ease-out,
    transform 300ms ease-out;
  transform: translateY(12px);
}
.reveal-group > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 300ms ease-out,
    transform 300ms ease-out;
}
.reveal-group.in > * {
  opacity: 1;
  transform: none;
}
.reveal-group.in > *:nth-child(1) {
  transition-delay: 0ms;
}
.reveal-group.in > *:nth-child(2) {
  transition-delay: 60ms;
}
.reveal-group.in > *:nth-child(3) {
  transition-delay: 120ms;
}
.reveal-group.in > *:nth-child(4) {
  transition-delay: 180ms;
}
.reveal-group.in > *:nth-child(5) {
  transition-delay: 240ms;
}
.reveal-group.in > *:nth-child(6) {
  transition-delay: 300ms;
}
.reveal-group.in > *:nth-child(n + 7) {
  transition-delay: 360ms;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-group > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Signature moment — the citation chip. Real affordance on hover. */
.mock-chip {
  transition:
    box-shadow 150ms ease-out,
    transform 150ms ease-out,
    border-color 150ms ease-out;
}
.mock-window:hover .mock-chip.cite {
  border-color: rgba(37, 99, 235, 0.35);
}
.mock-chip.cite:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(37, 99, 235, 0.1),
    0 4px 12px rgba(37, 99, 235, 0.14);
  cursor: pointer;
}
.trail-link {
  transition: color 150ms ease-out;
}
.trail-link:hover {
  color: var(--blue-500);
}
.trail-link:hover [data-lucide] {
  transform: translateX(3px);
}
.trail-link [data-lucide] {
  transition: transform 150ms ease-out;
}

/* Cards that are links get lift; informational cards stay still */
a.card {
  transition:
    box-shadow 150ms ease-out,
    transform 150ms ease-out,
    border-color 150ms ease-out;
  display: block;
}
a.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--hairline-strong);
}

/* Pills — quiet hover for the agent cloud */
.pill {
  transition:
    border-color 150ms ease-out,
    background 150ms ease-out;
}
.pill-cloud .pill:hover {
  border-color: var(--hairline-strong);
  background: var(--white);
}
.on-ink .pill-cloud .pill:hover {
  border-color: rgba(241, 240, 237, 0.4);
  background: rgba(241, 240, 237, 0.06);
}

/* Contrast corrections */
.hero-full .hero-foot {
  color: rgba(241, 240, 237, 0.78);
}
.on-ink .stat .label,
.card-ink p {
  color: rgba(241, 240, 237, 0.72);
}

/* Icon-to-text rhythm */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.plain-list .pl-item {
  gap: 12px;
}

/* Mobile as first-class */
@media (max-width: 640px) {
  .h-hero {
    font-size: clamp(34px, 9.6vw, 42px);
  }
  .hero-full .lede {
    font-size: 17px;
  }
  .btn-row .btn {
    flex: 1 1 auto;
    text-align: center;
  }
  .section-head {
    margin-bottom: 44px;
  }
  .ledger-row {
    padding: 22px 0;
  }
  .photo-split .ps-img {
    order: -1;
  }
  .footer-grid {
    gap: 36px;
  }
}

/* ==========================================================================
   v4 ROGO/HARVEY REBUILD — global anatomy
   ========================================================================== */

/* Rectangular buttons (harvey grammar) */
.btn {
  border-radius: var(--r-sm);
}
.btn-lg {
  padding: 17px 30px;
}

/* Announcement bar */
.bar-announce {
  background: #161615;
  color: rgba(241, 240, 237, 0.85);
  font-size: 13px;
  text-align: center;
  padding: 9px 44px;
  position: relative;
  z-index: 60;
  display: flex;
}
.bar-announce a {
  font-weight: 600;
  color: #ffffff;
  margin-left: 10px;
  text-decoration: underline transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 150ms ease-out;
}
.bar-announce a:hover {
  text-decoration-color: #ffffff;
}
.bar-announce .bar-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: rgba(241, 240, 237, 0.6);
  cursor: pointer;
  padding: 6px;
}
.bar-announce .bar-close:hover {
  color: #ffffff;
}

/* Nav: transparent over dark hero → solid paper on scroll */
.nav.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background 300ms ease-out,
    border-color 300ms ease-out;
}
.nav.nav-overlay .nav-links a {
  color: rgba(241, 240, 237, 0.85);
}
.nav.nav-overlay .nav-links a:hover,
.nav.nav-overlay .nav-links a.active {
  color: #ffffff;
}
.nav.nav-overlay .nav-cta .login {
  color: rgba(241, 240, 237, 0.85);
}
.nav.nav-overlay .nav-cta .login:hover {
  color: #ffffff;
}
.nav.nav-overlay .btn-secondary {
  color: #ffffff;
  border-color: rgba(241, 240, 237, 0.4);
}
.nav.nav-overlay .btn-secondary:hover {
  border-color: #ffffff;
  background: rgba(241, 240, 237, 0.08);
}
.nav.nav-overlay .btn-primary {
  background: var(--paper);
  color: var(--ink);
}
.nav.nav-overlay .btn-primary:hover {
  background: #ffffff;
}
.nav.nav-overlay .logo-dark {
  display: none;
}
.nav.nav-overlay .logo-light {
  display: block;
}
.nav .logo-light {
  display: none;
}
.nav.nav-overlay .nav-burger {
  color: #ffffff;
}
/* scrolled state */
.nav.nav-overlay.nav-solid {
  background: rgba(241, 240, 237, 0.92);
  border-bottom-color: var(--hairline);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
}
.nav.nav-overlay.nav-solid .nav-links a {
  color: var(--text-secondary);
}
.nav.nav-overlay.nav-solid .nav-links a:hover,
.nav.nav-overlay.nav-solid .nav-links a.active {
  color: var(--ink);
}
.nav.nav-overlay.nav-solid .nav-cta .login {
  color: var(--text-secondary);
}
.nav.nav-overlay.nav-solid .btn-secondary {
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.nav.nav-overlay.nav-solid .btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.nav.nav-overlay.nav-solid .logo-dark {
  display: block;
}
.nav.nav-overlay.nav-solid .logo-light {
  display: none;
}
.nav.nav-overlay.nav-solid .nav-burger {
  color: var(--ink);
}

/* Cinematic dark hero (harvey) */
.hero-cine {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #141413;
  overflow: hidden;
}
.hero-cine .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: saturate(0.8) contrast(1.05) brightness(0.9);
  transform: skew(1deg) scale(1.1);
}
.hero-cine .hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(20, 20, 19, 0.86) 0%,
      rgba(20, 20, 19, 0.55) 48%,
      rgba(20, 20, 19, 0.3) 100%
    ),
    linear-gradient(
      180deg,
      rgba(20, 20, 19, 0.45) 0%,
      rgba(20, 20, 19, 0.15) 40%,
      rgba(20, 20, 19, 0.82) 100%
    );
}
.hero-cine .hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container-wide);
  margin: 0 auto;
  width: 100%;
}
.hero-cine h1 {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: clamp(54px, 8.4vw, 118px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #ffffff;
  max-width: 10ch;
  text-wrap: balance;
}
.hero-cine .hero-sub {
  margin: 30px 0 44px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  color: rgba(241, 240, 237, 0.84);
  max-width: 480px;
}
.hero-cine .hero-logos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 26px 28px;
  background: linear-gradient(
    180deg,
    rgba(20, 20, 19, 0) 0%,
    rgba(20, 20, 19, 0.55) 100%
  );
}
.hero-cine .hero-logos span {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(241, 240, 237, 0.66);
  padding: 0 28px;
  border-right: 1px solid rgba(241, 240, 237, 0.18);
}
.hero-cine .hero-logos span:last-child {
  border-right: 0;
}
@media (max-width: 760px) {
  .hero-cine {
    min-height: 92vh;
  }
  .hero-cine .hero-content {
    padding: 130px 22px 170px;
  }
  .hero-cine .hero-logos span {
    padding: 0 14px;
    font-size: 12px;
  }
}

/* Harvey rotating use-case wall */
.rotator-section {
  padding: 150px 0;
}
.rotator-grid {
  display: grid;
  grid-template-columns: 220px 1fr 180px;
  gap: 40px;
  align-items: center;
}
.rotator-label {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.rotator-cta {
  justify-self: end;
}
.rotator {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rotator .rot-item {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--ink);
  opacity: 0.14;
  transition: opacity 300ms ease-out;
  cursor: default;
  white-space: nowrap;
}
.rotator .rot-item.near {
  opacity: 0.34;
}
.rotator .rot-item.focus {
  opacity: 1;
}
.rotator .rot-item:hover {
  opacity: 0.6;
}
.rotator .rot-item.focus:hover {
  opacity: 1;
}
@media (max-width: 980px) {
  .rotator-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .rotator-cta {
    justify-self: start;
  }
  .rotator .rot-item {
    white-space: normal;
  }
}

/* Rogo sticky-left "why" section */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: start;
}
.why-grid .why-head {
  position: sticky;
  top: 140px;
}
.why-rows .why-row {
  padding: 56px 0;
  border-bottom: 1px solid var(--hairline);
}
.why-rows .why-row:first-child {
  padding-top: 8px;
}
.why-rows .why-row:last-child {
  border-bottom: 0;
}
.why-row .icon-chip {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 24px;
}
.bg-white .why-row .icon-chip {
  background: var(--paper);
}
.why-row h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.why-row p {
  margin: 0;
  color: var(--text-secondary);
  max-width: 56ch;
}
@media (max-width: 980px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
  .why-grid .why-head {
    position: static;
  }
  .why-rows .why-row {
    padding: 40px 0;
  }
}

/* Rogo giant stat rows */
.stat-rows {
  border-top: 1px solid var(--hairline);
}
.stat-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: center;
  padding: 34px 0;
  border-bottom: 1px solid var(--hairline);
}
.stat-row .num {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat-row .label {
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 220px;
}
@media (max-width: 760px) {
  .stat-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 28px 0;
  }
}
.on-ink .stat-rows,
.on-ink .stat-row {
  border-color: var(--hairline-on-ink);
}
.on-ink .stat-row .num {
  color: var(--text-on-ink);
}
.on-ink .stat-row .label {
  color: var(--text-on-ink-muted);
}

/* Rogo testimonial spread: one open card + companions */
.testi-spread {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.testi-card {
  background: #ecebe8;
  border-radius: var(--r-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.bg-paper .testi-card {
  background: var(--white);
}
.testi-card .t-logo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-light);
  text-transform: uppercase;
}
.testi-card blockquote {
  margin: 36px 0 auto;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
}
.testi-card .t-attr {
  margin-top: 40px;
  font-size: 15px;
}
.testi-card .t-attr .role {
  color: var(--text-muted);
  font-size: 14px;
}
.testi-card.compact blockquote {
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-top: 28px;
}
@media (max-width: 980px) {
  .testi-spread {
    grid-template-columns: 1fr;
  }
  .testi-card {
    min-height: 0;
  }
}

/* Dark compliance cell grid (rogo security band) */
.cell-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--hairline-on-ink);
}
.cell-grid .cell {
  border-right: 1px solid var(--hairline-on-ink);
  padding: 44px 20px 28px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-on-ink-muted);
}
.cell-grid .cell:last-child {
  border-right: 0;
}
.cell-grid .cell [data-lucide] {
  width: 30px;
  height: 30px;
  stroke-width: 1.25;
  margin: 0 auto 18px;
  display: block;
  color: rgba(241, 240, 237, 0.55);
}
@media (max-width: 980px) {
  .cell-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cell-grid .cell {
    border-bottom: 1px solid var(--hairline-on-ink);
  }
}

/* Monumental ink footer with CTA inside (rogo) */
.footer-ink {
  background: #161615;
  color: var(--text-on-ink);
  padding: 0;
}
.footer-ink .footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: 120px 0 90px;
}
.footer-ink .footer-cta h2 {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-on-ink);
  max-width: 14ch;
}
.footer-ink .footer-grid {
  border-top: 1px solid var(--hairline-on-ink);
  padding-top: 64px;
  margin-bottom: 64px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-ink h4 {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(241, 240, 237, 0.5);
  margin-bottom: 18px;
}
.footer-ink a {
  display: block;
  font-size: 14.5px;
  color: rgba(241, 240, 237, 0.74);
  padding: 5px 0;
  transition: color 150ms ease-out;
}
.footer-ink a:hover {
  color: #ffffff;
}
.footer-ink .addr {
  font-size: 14.5px;
  color: rgba(241, 240, 237, 0.6);
  line-height: 1.7;
}
.footer-ink .footer-logo img {
  height: 112px;
  width: auto;
  margin-bottom: 0;
}
.footer-ink .footer-bottom {
  border-top: 1px solid var(--hairline-on-ink);
  padding: 28px 0 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(241, 240, 237, 0.5);
}
.footer-ink .footer-bottom .links {
  display: flex;
  gap: 22px;
}
@media (max-width: 860px) {
  .footer-ink .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-ink .footer-cta {
    padding: 80px 0 60px;
  }
}

/* Light page hero (harvey subpage grammar: left serif, generous) */
.hero-page {
  padding: 150px 0 110px;
}
.hero-page h1 {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: clamp(46px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  max-width: 14ch;
  text-wrap: balance;
}
.hero-page .lede {
  margin-top: 28px;
}

.lede.reveal {
  text-align: center;
  font-size: 2rem;
}
@media (max-width: 640px) {
  .hero-page {
    padding: 100px 0 70px;
  }
}

/* ==========================================================================
   v5 MATERIAL LAYER — the filed opinion
   ========================================================================== */

/* Surface flatness: no pure-white section grounds */
.bg-white {
  background: #fbfbfa;
}

/* Typographic tightening at display sizes */
.hero-cine h1 {
  letter-spacing: -0.035em;
}
.h-section {
  letter-spacing: -0.026em;
}
.stat-row .num {
  letter-spacing: -0.035em;
}
.footer-ink .footer-cta h2 {
  letter-spacing: -0.03em;
}

/* Grain — felt, not seen. Linen on ink chambers, fiber on paper. */
.bg-ink,
.footer-ink,
.hero-cine,
.rotator-section {
  position: relative;
}
.bg-ink::after,
.footer-ink::after,
.hero-cine::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  z-index: 2;
}
.hero-cine::after {
  z-index: 0;
}
.hero-cine .hero-content,
.hero-cine .hero-logos {
  z-index: 3;
}
.rotator-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.028;
  mix-blend-mode: multiply;
  z-index: 0;
}
.rotator-section > .container-wide {
  position: relative;
  z-index: 1;
}
.bg-ink > .container,
.bg-ink > .container-wide {
  position: relative;
  z-index: 3;
}
.footer-ink > .container-wide {
  position: relative;
  z-index: 3;
}

/* The lit-document staging: paper objects inside ink chambers carry the light */
.bg-ink .layer-top,
.bg-ink .cell-grid {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 24px 64px rgba(0, 0, 0, 0.42);
}

/* Rotator terms are doors, not decoration */
.rotator a.rot-item {
  display: block;
  color: var(--ink);
}
.rotator a.rot-item:focus-visible {
  outline-offset: 6px;
  border-radius: 4px;
}
.rotator a.rot-item.focus {
  cursor: pointer;
}

/* Stat numbers arrive */
.stat-row .num {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   v6 FEEDBACK FIXES
   ========================================================================== */

/* 1 — Dropdown menus over the transparent hero nav: panel text must stay ink */
.nav.nav-overlay .nav-drop-menu {
  background: var(--white);
}
.nav.nav-overlay .nav-drop-menu a {
  color: var(--text);
}
.nav.nav-overlay .nav-drop-menu a:hover {
  color: var(--ink);
  background: var(--paper);
}
.nav.nav-overlay .nav-drop-menu .desc {
  color: var(--text-muted);
}
.nav.nav-overlay.nav-solid .nav-drop-menu a {
  color: var(--text);
}

/* 5 — Stat labels read with the number, not across the page */
.stat-row {
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: center;
}
.stat-row .label {
  max-width: 300px;
  font-size: 16px;
}
@media (max-width: 860px) {
  .stat-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* 6 — Footer CTA button: bigger, true white, properly lit */
.footer-ink .footer-cta .btn {
  padding: 21px 42px;
  font-size: 17px;
  background: #ffffff;
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 12px 36px rgba(0, 0, 0, 0.45);
}
.footer-ink .footer-cta .btn:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 18px 48px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   v7 SUBPAGE HERO — composed, not empty
   ========================================================================== */
.hero-page {
  padding: 92px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero-page > .container,
.hero-page > .container-wide {
  position: relative;
  z-index: 1;
}
.hero-page .hero-art {
  position: absolute;
  right: clamp(24px, 7vw, 140px);
  top: 50%;
  width: clamp(440px, 40vw, 620px);
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    black 42%,
    transparent 74%
  );
  mask-image: radial-gradient(circle at 50% 50%, black 42%, transparent 74%);
  transform: translateY(-46%);
}
.hero-page .lede {
  max-width: 560px;
}
.hero-page::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hairline);
}
@media (max-width: 980px) {
  .hero-page {
    padding: 72px 0 52px;
  }
  .hero-page .hero-art {
    opacity: 0.16;
    width: 70vw;
    right: -20vw;
  }
}

/* Bands breathe less emptily */
.img-band {
  min-height: 440px;
}
.img-band-tall {
  min-height: 560px;
}

/* ==========================================================================
   v8 HERO ART — balance + motion
   ========================================================================== */

/* Entrance: the mark develops like ink settling */
@keyframes art-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.1;
  }
}
/* Ambient: circular marks turn imperceptibly */
@keyframes art-spin {
  from {
    transform: translateY(-46%) rotate(0deg);
  }
  to {
    transform: translateY(-46%) rotate(360deg);
  }
}
/* Ambient: directional marks breathe */
@keyframes art-drift {
  0% {
    transform: translateY(-48%) rotate(-1.2deg);
  }
  100% {
    transform: translateY(-44%) rotate(1.2deg);
  }
}
.hero-page .hero-art {
  animation: art-in 1100ms ease-out both;
}
.hero-page .hero-art[src*="circles"],
.hero-page .hero-art[src*="star"] {
  animation:
    art-in 1100ms ease-out both,
    art-spin 140s linear infinite;
}
.hero-page .hero-art[src*="eye"],
.hero-page .hero-art[src*="art-deco"],
.hero-page .hero-art[src*="lines"] {
  animation:
    art-in 1100ms ease-out both,
    art-drift 9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .hero-page .hero-art {
    animation: none;
    opacity: 0.1;
    transform: translateY(-46%);
  }
}
@media (max-width: 980px) {
  .hero-page::before {
    width: 70vw;
    right: -10vw;
    opacity: 0.6;
  }
  .hero-page .hero-art {
    animation: none;
    opacity: 0.07;
    transform: translateY(-46%);
  }
}

/* ==========================================================================
   v9 CENTERED HEROES
   ========================================================================== */

/* Subpage heroes: centered composition, watermark as a seal behind the text */
.hero-page {
  text-align: center;
}
.hero-page h1 {
  margin-left: auto;
  margin-right: auto;
}
.hero-page .lede {
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
}
.hero-page .btn-row {
  justify-content: center;
}
.hero-page .pill {
  margin-top: 8px;
}
.hero-page .hero-art {
  right: auto;
  left: 50%;
  transform: translate(-50%, -46%);
  width: clamp(480px, 44vw, 680px);
  opacity: 0.08;
}
@keyframes art-spin {
  from {
    transform: translate(-50%, -46%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -46%) rotate(360deg);
  }
}
@keyframes art-drift {
  0% {
    transform: translate(-50%, -48%) rotate(-1.2deg);
  }
  100% {
    transform: translate(-50%, -44%) rotate(1.2deg);
  }
}
@keyframes art-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.08;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-page .hero-art {
    animation: none;
    opacity: 0.08;
    transform: translate(-50%, -46%);
  }
}
@media (max-width: 980px) {
  .hero-page .hero-art {
    animation: none;
    opacity: 0.06;
    transform: translate(-50%, -46%);
    width: 90vw;
    left: 50%;
  }
}

/* Homepage hero: centered, rogo-style */
.hero-cine .hero-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-cine h1 {
  max-width: none;
}
.hero-cine .hero-sub {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   v10 — subpage heroes: no texture, smaller scale
   ========================================================================== */
.hero-page {
  padding: 84px 0 60px;
}
.hero-page h1 {
  font-size: clamp(38px, 4.8vw, 64px);
}
.hero-page .lede {
  font-size: clamp(17px, 1.4vw, 19px);
  max-width: 600px;
  margin-top: 22px;
}
@media (max-width: 980px) {
  .hero-page {
    padding: 64px 0 48px;
  }
}

/* ==========================================================================
   v11 — nav: rogo proportions
   ========================================================================== */
/* Wordmark at link-scale (tight crop = true letterform height) */
.nav-logo img {
  height: 18px !important;
}
.footer-logo img,
.footer-ink .footer-logo img {
  height: 112px !important;
  width: auto;
}

/* Links centered in the bar, logo left, actions right — rogo composition */
.nav-links {
  justify-content: center;
}

/* ==========================================================================
   v12 — rogo proportions: wider canvas, airier bar, calmer hero type
   ========================================================================== */

/* Wider page overall */
:root {
  --container: 1200px;
  --container-wide: 1400px;
  --nav-h: 80px;
}
.container,
.container-wide {
  padding: 0 36px;
}

/* Nav spans wider than content, breathes more */
.nav-inner {
  max-width: 1560px;
  padding: 0 40px;
  gap: 44px;
}
.nav-links a {
  font-size: 15px;
}
.nav-cta {
  gap: 14px;
}
.nav-logo img {
  height: 20px !important;
}

/* Hero type at rogo scale — large, not monumental */
.hero-cine h1 {
  font-size: clamp(46px, 5.4vw, 82px);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.hero-cine .hero-sub {
  margin: 26px auto 38px;
  font-size: clamp(17px, 1.4vw, 19px);
}

/* Subpage heroes inherit the calmer scale */
.hero-page h1 {
  font-size: clamp(36px, 4.4vw, 58px);
}

/* ==========================================================================
   v13 — nav: true three-zone grid (logo | centered links | actions)
   ========================================================================== */
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-logo {
  justify-self: start;
}
.nav-links {
  justify-self: center;
  flex: none;
}
.nav-cta {
  justify-self: end;
}
.nav-burger {
  display: none;
}
@media (max-width: 980px) {
  .nav-inner {
    display: flex;
    justify-content: space-between;
  }
  .nav-burger {
    display: block;
  }
}

/* ==========================================================================
   v14 — rogo restraint: smaller type, fewer elements, bigger gaps
   ========================================================================== */
.hero-cine h1 {
  font-size: clamp(42px, 4.7vw, 68px);
  line-height: 1.07;
}
.hero-cine .hero-sub {
  margin: 32px auto 48px;
  font-size: clamp(16px, 1.3vw, 19px);
  max-width: 520px;
  color: rgba(241, 240, 237, 0.78);
}
.hero-cine .btn-lg {
  padding: 16px 30px;
  font-size: 15px;
}

/* Nav: links calmer; right side = two text links + one button (rogo) */
.nav-links a {
  font-weight: 450;
}
.nav.nav-overlay .nav-links a {
  color: rgba(241, 240, 237, 0.78);
}
.nav-cta .login {
  margin-right: 2px;
}
.nav-cta {
  gap: 22px;
}

/* ==========================================================================
   v15 — hero video (rogo treatment)
   ========================================================================== */
.hero-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-cine .hero-poster {
  display: none;
  filter: none;
}
video.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  background: #141413;
}
@media (max-width: 760px) {
  .hero-cine .hero-poster {
    display: block;
  }
  video.hero-video {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cine .hero-poster {
    display: block;
  }
  video.hero-video {
    display: none;
  }
}

/* ==========================================================================
   v16 — hero video color: let the footage speak
   ========================================================================== */
video.hero-video {
  filter: none;
}
.hero-cine .hero-veil {
  background:
    linear-gradient(
      90deg,
      rgba(20, 20, 19, 0.42) 0%,
      rgba(20, 20, 19, 0.26) 48%,
      rgba(20, 20, 19, 0.14) 100%
    ),
    linear-gradient(
      180deg,
      rgba(20, 20, 19, 0.3) 0%,
      rgba(20, 20, 19, 0.08) 40%,
      rgba(20, 20, 19, 0.58) 100%
    );
}

/* ==========================================================================
   v17 — hero caption: balanced wrap, no orphan
   ========================================================================== */
.hero-cine .hero-sub {
  max-width: 600px;
  text-wrap: balance;
}
.hero-cine h1 {
  max-width: none;
}

/* ==========================================================================
   v18 — hero contrast: light the subject, not the room
   ========================================================================== */

/* Global veil nearly gone; an elliptical scrim sits only behind the text.
   Reads as lens vignette, not as an overlay. Edges of the footage stay alive. */
.hero-cine .hero-veil {
  background:
    radial-gradient(
      ellipse 58% 46% at 50% 45%,
      rgba(20, 20, 19, 0.55) 0%,
      rgba(20, 20, 19, 0.32) 46%,
      rgba(20, 20, 19, 0) 74%
    ),
    linear-gradient(180deg, rgba(20, 20, 19, 0.34) 0%, rgba(20, 20, 19, 0) 26%),
    linear-gradient(0deg, rgba(20, 20, 19, 0.52) 0%, rgba(20, 20, 19, 0) 20%);
}

/* The type carries its own contrast envelope — soft atmospheric halo */
.hero-cine h1 {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 48px rgba(0, 0, 0, 0.5);
}
.hero-cine .hero-sub {
  color: rgba(245, 244, 241, 0.92);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 6px 28px rgba(0, 0, 0, 0.45);
}
.hero-cine .hero-logos span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   v19 — scrim: half the weight, twice the feather
   ========================================================================== */
.hero-cine .hero-veil {
  background:
    radial-gradient(
      ellipse 72% 58% at 50% 45%,
      rgba(20, 20, 19, 0.3) 0%,
      rgba(20, 20, 19, 0.16) 48%,
      rgba(20, 20, 19, 0) 80%
    ),
    linear-gradient(180deg, rgba(20, 20, 19, 0.3) 0%, rgba(20, 20, 19, 0) 24%),
    linear-gradient(0deg, rgba(20, 20, 19, 0.46) 0%, rgba(20, 20, 19, 0) 18%);
}

/* ==========================================================================
   v20 — text shadows off; the scrim alone carries contrast (rogo/harvey)
   ========================================================================== */
.hero-cine h1,
.hero-cine .hero-sub,
.hero-cine .hero-logos span {
  text-shadow: none;
}

/* ==========================================================================
   v21 — feathered glass: the video softens behind the words, edgelessly
   ========================================================================== */
.hero-cine .hero-content {
  position: relative;
}
/* Glass replaces the scrim's radial; keep only functional top/bottom gradients */
.hero-cine .hero-veil {
  background:
    linear-gradient(180deg, rgba(20, 20, 19, 0.3) 0%, rgba(20, 20, 19, 0) 24%),
    linear-gradient(0deg, rgba(20, 20, 19, 0.46) 0%, rgba(20, 20, 19, 0) 18%);
}
/* Fallback: no backdrop-filter support → restore the soft scrim */
@supports not (backdrop-filter: blur(1px)) {
  .hero-cine .hero-veil {
    background:
      radial-gradient(
        ellipse 72% 58% at 50% 45%,
        rgba(20, 20, 19, 0.34) 0%,
        rgba(20, 20, 19, 0.18) 48%,
        rgba(20, 20, 19, 0) 80%
      ),
      linear-gradient(
        180deg,
        rgba(20, 20, 19, 0.3) 0%,
        rgba(20, 20, 19, 0) 24%
      ),
      linear-gradient(0deg, rgba(20, 20, 19, 0.46) 0%, rgba(20, 20, 19, 0) 18%);
  }
}

/* ==========================================================================
   v22 — hero left-set; glass squared to the text column; frosted nav on load
   ========================================================================== */

/* Left-justified hero (harvey composition) */
.hero-cine .hero-content {
  text-align: left;
  align-items: flex-start;
}
.hero-cine h1 {
  max-width: 12ch;
}
.hero-cine .hero-sub {
  margin-left: 0;
  margin-right: 0;
  max-width: 520px;
}

/* Nav over the video: frosted from first paint */
.nav.nav-overlay {
  backdrop-filter: blur(12px) brightness(0.96);
  -webkit-backdrop-filter: blur(12px) brightness(0.96);
  background: rgba(20, 20, 19, 0.14);
}
.nav.nav-overlay.nav-solid {
  background: rgba(241, 240, 237, 0.92);
}

/* Nav: blur only, no tint, rogo height */
:root {
  --nav-h: 64px;
}
.nav.nav-overlay {
  background: transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav.nav-overlay.nav-solid {
  background: rgba(241, 240, 237, 0.92);
}
.nav-logo img {
  height: 18px !important;
}
.btn-sm {
  padding: 10px 18px;
}

/* ==========================================================================
   v27 — customer logo marquee over the hero video (rogo)
   ========================================================================== */
.hero-cine .logo-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  padding: 30px 0 26px;
  background: linear-gradient(
    180deg,
    rgba(20, 20, 19, 0) 0%,
    rgba(20, 20, 19, 0.5) 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}
.logo-marquee .track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marquee 55s linear infinite;
}
.logo-marquee img {
  height: 26px;
  width: auto;
  opacity: 0.8;
  flex: none;
}
.logo-marquee img.tall {
  height: 34px;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.logo-marquee:hover .track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee .track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
  .logo-marquee .track img:nth-child(n + 17) {
    display: none;
  }
}
@media (max-width: 760px) {
  .logo-marquee img {
    height: 20px;
  }
  .logo-marquee .track {
    gap: 44px;
  }
}

/* ==========================================================================
   v28 — hero fits the viewport with the announcement bar
   ========================================================================== */
.bar-announce {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
body.has-announce .hero-cine {
  min-height: calc(100vh - 40px);
}
body:not(.has-announce) .hero-cine {
  min-height: 100vh;
}
/* keep the text block clear of the marquee on shorter screens */
@media (max-height: 820px) {
  .hero-cine .hero-content {
    padding: 72px 28px 200px;
  }
  .hero-cine h1 {
    font-size: clamp(40px, 4.2vw, 58px);
  }
}

/* ==========================================================================
   v29 — dropdown panel colors immune to overlay-nav cascade (final word)
   ========================================================================== */
.nav.nav-overlay .nav-links .nav-drop-menu {
  background: var(--white);
}
.nav.nav-overlay .nav-links .nav-drop-menu a {
  color: var(--text);
}
.nav.nav-overlay .nav-links .nav-drop-menu a:hover {
  color: var(--ink);
  background: var(--paper);
}
.nav.nav-overlay .nav-links .nav-drop-menu .desc {
  color: var(--text-muted);
}

/* ==========================================================================
   v30 — hero type: two lines, rogo scale
   ========================================================================== */
.hero-cine h1 {
  max-width: none;
  font-size: clamp(40px, 4.3vw, 60px);
  line-height: 1.08;
}
.hero-cine .hero-sub {
  font-size: clamp(16px, 1.25vw, 18px);
  margin: 28px 0 42px;
  max-width: 480px;
}
@media (max-height: 820px) {
  .hero-cine h1 {
    font-size: clamp(38px, 4vw, 54px);
  }
}

/* ==========================================================================
   v31 — harvey-style full-width mega dropdowns
   ========================================================================== */
.nav .nav-drop {
  position: static;
}
.nav .nav-drop-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: 0 32px 64px rgba(36, 36, 35, 0.1);
  padding: 44px 0 48px;
  transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
}
.nav .nav-drop:hover > .nav-drop-menu,
.nav .nav-drop:focus-within > .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mega-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 72px;
  align-items: start;
}
.mega-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 36px;
  align-content: start;
}
.nav .nav-drop-menu .mega-links a {
  display: block;
  padding: 14px 16px;
  margin: 0;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  transition: background 0.15s ease;
}
.nav .nav-drop-menu .mega-links a:hover {
  background: #f6f5f3;
}
.nav .nav-drop-menu .mega-links a .desc {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
  white-space: normal;
}
.nav .nav-drop-menu a.mega-feature {
  display: block;
  padding: 1rem;
  margin: 0;
}
.mega-feature .mf-img {
  height: 180px;
  border-radius: var(--r-md);
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
  transition: opacity 0.2s ease;
}
.mega-feature:hover .mf-img {
  opacity: 0.9;
}
.nav .nav-drop-menu a.mega-feature strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}
.nav .nav-drop-menu a.mega-feature span {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  white-space: normal;
}
.nav.nav-overlay .nav-drop-menu .mega-links a,
.nav.nav-overlay .nav-drop-menu a.mega-feature strong {
  color: var(--text);
}
@media (max-width: 1100px) {
  .mega-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mega-feature .mf-img {
    height: 140px;
  }
}

/* v31.1 — keep mega menu open while traveling to it */
/* invisible bridge across the gap between the trigger link and the panel */
.nav .nav-drop:hover::after,
.nav .nav-drop:focus-within::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 26px);
  height: 26px;
}
/* forgiving close: brief delay so a clipped corner doesn't shut it */
.nav .nav-drop-menu {
  transition:
    opacity 0.16s ease 0.12s,
    visibility 0.16s ease 0.12s;
}
.nav .nav-drop:hover > .nav-drop-menu,
.nav .nav-drop:focus-within > .nav-drop-menu {
  transition-delay: 0s, 0s;
}

/* v31.2 — adaptive mega panel: dark glass over the hero, white once nav solidifies */
.nav.nav-overlay:not(.nav-solid) .nav-drop-menu {
  background: rgba(26, 26, 25, 0.88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.35);
}
.nav.nav-overlay:not(.nav-solid) .nav-drop-menu .mega-links a {
  color: #f4f3f1;
}
.nav.nav-overlay:not(.nav-solid) .nav-drop-menu .mega-links a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav.nav-overlay:not(.nav-solid) .nav-drop-menu .mega-links a .desc {
  color: rgba(244, 243, 241, 0.55);
}
.nav.nav-overlay:not(.nav-solid) .nav-drop-menu a.mega-feature strong {
  color: #f4f3f1;
}
.nav.nav-overlay:not(.nav-solid) .nav-drop-menu a.mega-feature span {
  color: rgba(244, 243, 241, 0.55);
}

.nav.nav-overlay:not(.nav-solid) .nav-drop-menu a.mega-feature:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* v31.3 — opaque panel, matched to the hero video's night sky (#1A1621) */
.nav.nav-overlay:not(.nav-solid) .nav-drop-menu {
  background: #1a1621;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* v31.4 — nav and panel fuse into one solid slab while a menu is open.
   The video is dynamic, so matching it with a static color always drifts;
   instead the open menu solidifies the nav to the same ink as the panel. */
.nav.nav-overlay:not(.nav-solid) {
  transition: background 0.18s ease;
}
.nav.nav-overlay:not(.nav-solid):has(.nav-drop:hover),
.nav.nav-overlay:not(.nav-solid):has(.nav-drop:focus-within) {
  background: #16121a;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav.nav-overlay:not(.nav-solid) .nav-drop-menu {
  background: #16121a;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   v32 — rogo nav proportions: smaller, quieter chrome
   ========================================================================== */
.nav-links a {
  font-size: 14px;
}
.nav-cta .login {
  font-size: 14px;
}
.nav-cta .btn-sm {
  font-size: 13.5px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.bar-announce {
  font-size: 11px;
  color: rgba(241, 240, 237, 0.75);
}
.bar-announce a {
  font-weight: 500;
}

@media (min-width: 980px) {
  .bar-announce {
    font-size: 14px;
  }
}

/* v33 — stat row labels: larger, closer to the number's weight class */
.stat-row .label {
  font-size: 24px;
  line-height: 1.45;
  max-width: 320px;
  color: var(--text-secondary);
}

/* v34 — testimonial cards: firm logos instead of name text */
.testi-card .t-logo-img {
  display: block;
  align-self: flex-start; /* flex column was stretching these full-width */
  width: auto;
  opacity: 0.7;
}

/* ==========================================================================
   v35 — hero pinned left-set: consistent gutter at any width / resolution.
   Previously the content was capped at --container-wide and centered
   (margin:0 auto), so on a maximized high-res window the text drifted toward
   the middle. Now it tracks the nav's left edge at normal widths, then caps
   the gutter so the block stays left-set on ultra-wide screens.
   ========================================================================== */
.hero-container {
  max-width: 1560px;
  padding: 0 40px;
  margin: 0 auto;
  width: 100%;
}
.hero-cine .hero-content {
  width: fit-content;
  margin: 0;
  position: relative;
  padding: 10rem 0 25rem 8rem;
  /*border-radius: var(--r-xl);
  corner-shape: squircle;
  padding: 3rem 3rem;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.25);*/
}

@media (min-width: 1560px) {
  .hero-container {
    max-width: 1560px;
  }
}

@media (min-width: 1980px) {
  .hero-container {
    max-width: 2200px;
  }
}

@media (max-width: 760px) {
  .hero-cine .hero-content {
    margin: 0 auto;
    padding: 10rem 0rem 28rem 0rem;
  }
}