* ============================================================
   OTOS Continuity™ — otos.css  (FULL replacement — FINAL)
   Includes: site system + partner pages + lightbox + quote overlay
   (No further edits required.)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root{
  /* Backgrounds */
  --bg:#080a0f;
  --bg-2:#0d1118;
  --panel:#111821;
  --brown:#2d1f14;
  --brown-2:#3a2718;

  /* Cream / paper */
  --paper:#f7f1e7;
  --paper-2:#fbf7ee;
  --paper-3:#fff9f2;

  /* Text */
  --ink:#fbf7ee;           /* on dark */
  --muted:#aeb4c0;         /* on dark */
  --paper-ink:#1e1710;     /* on cream */
  --paper-muted:#6b5544;   /* on cream */

  /* Accent */
  --orange:#f26c0d;
  --orange-2:#ff8a1f;

  /* Status */
  --red:#f87171;
  --blue:#6495ed;

  /* Lines */
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.20);
  --line-paper:rgba(70,48,34,.13);

  /* Shadows */
  --shadow-sm:0 4px 16px rgba(64,42,22,.08);
  --shadow:0 12px 40px rgba(64,42,22,.12);
  --shadow-lg:0 24px 64px rgba(64,42,22,.16);
  --shadow-dark:0 22px 70px rgba(0,0,0,.22);
  --glow:0 0 0 1px rgba(255,255,255,.10), 0 28px 90px rgba(0,0,0,.38);

  /* Geometry */
  --radius:22px;
  --radius-sm:14px;
  --radius-lg:30px;
  --pill:999px;
  --max:1280px;
  --nav-h:80px;

  /* Type */
  --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Anchor offset for fixed header */
  scroll-padding-top:110px;
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  font-weight:500;
  line-height:1.7;
  letter-spacing:-.01em;
  color:var(--paper-ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:800;color:inherit}

/* ── CONTAINER ──────────────────────────────────────────── */
.container{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
}

/* ── NAVIGATION ─────────────────────────────────────────── */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:var(--nav-h);
  pointer-events:none;
}
.nav-shell{
  width:min(var(--max), calc(100% - 40px));
  height:58px;
  margin:12px auto 0;
  padding:0 8px 0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(18,22,30,.88),rgba(10,12,18,.78));
  border-radius:var(--pill);
  box-shadow:0 16px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  pointer-events:auto;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:var(--ink);
  font-size:15px;
  font-weight:900;
  letter-spacing:-.03em;
  white-space:nowrap;
  flex-shrink:0;
}
.brand-icon{
  width:22px;height:17px;
  background:url('../images/otos-brain-icon.png') center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(242,108,13,.4));
  flex-shrink:0;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
  flex-wrap:nowrap;
}
.nav-links a{
  color:rgba(251,247,238,.75);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  padding:8px 11px;
  border-radius:var(--pill);
  border:1px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.nav-links a:hover,
.nav-links a.active{
  color:#fff;
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.11);
}
.nav-links a.cta{
  color:#fff;
  background:var(--orange);
  border-color:transparent;
  padding:8px 16px;
  margin-left:4px;
}
.nav-links a.cta:hover{background:#ff7a1a}

/* ── SECTION TYPES ──────────────────────────────────────── */
.paper-section{
  padding:80px 0;
  background:var(--paper);
  color:var(--paper-ink);
}
.paper-section--alt{background:var(--paper-2)}
.dark-section{
  padding:80px 0;
  background:var(--bg);
  color:var(--ink);
}
.brown-section{
  padding:64px 0;
  background:var(--brown);
  color:var(--ink);
}
.hero{
  padding:calc(var(--nav-h) + 64px) 0 72px;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(242,108,13,.14), transparent 32rem),
    var(--bg);
  background-size:48px 48px, 48px 48px, auto, auto;
  background-attachment:fixed, fixed, scroll, scroll;
  color:var(--ink);
}

/* ── KICKER ─────────────────────────────────────────────── */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  border:1px solid rgba(242,108,13,.45);
  background:rgba(242,108,13,.09);
  border-radius:var(--pill);
  padding:7px 13px;
  margin-bottom:22px;
}
.kicker-icon{
  width:13px;height:10px;
  background:url('../images/otos-brain-icon.png') center/contain no-repeat;
  flex-shrink:0;
  opacity:.85;
}
.paper-section .kicker,
.kicker.on-paper{
  color:var(--orange);
  border-color:rgba(242,108,13,.35);
  background:rgba(242,108,13,.07);
}

/* ── HEADINGS ───────────────────────────────────────────── */
h1,h2,h3,h4{
  font-weight:900;
  line-height:.96;
  letter-spacing:-.055em;
  margin:0;
}
h1{
  font-size:clamp(38px,4.8vw,68px);
  color:var(--ink);
}
h2{
  font-size:clamp(26px,2.8vw,40px);
  color:var(--paper-ink);
  letter-spacing:-.04em;
}
.dark-section h2,
.brown-section h2{color:var(--ink)}
h3{
  font-size:20px;
  letter-spacing:-.025em;
  line-height:1.15;
  color:var(--paper-ink);
}
.dark-section h3,
.brown-section h3{color:var(--ink)}
.accent{color:var(--orange)}

.lede{
  font-size:18px;
  font-weight:500;
  line-height:1.7;
  color:rgba(251,247,238,.72);
  max-width:760px;
  margin:20px 0 0;
}
.paper-section .lede{color:var(--paper-muted)}

.section-head{max-width:820px;margin-bottom:40px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head p{
  font-size:17px;
  color:var(--paper-muted);
  line-height:1.72;
  margin-top:14px;
}
.dark-section .section-head p{color:var(--muted)}

/* ── HERO ACTIONS ───────────────────────────────────────── */
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn,.btn-primary,.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 22px;
  border-radius:var(--pill);
  font-size:14px;
  font-weight:800;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:transform .15s, box-shadow .15s, background .15s;
  cursor:pointer;
  font-family:var(--font);
  border:none;
}
.btn-primary,.btn.primary{
  background:var(--orange);
  color:#fff;
  box-shadow:0 8px 28px rgba(242,108,13,.28);
}
.btn-primary:hover,.btn.primary:hover{
  background:#ff7a1a;
  transform:translateY(-1px);
  box-shadow:0 12px 36px rgba(242,108,13,.34);
}
.btn,.btn-secondary{
  background:rgba(255,255,255,.07);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.22);
}
.btn:hover,.btn-secondary:hover{
  background:rgba(255,255,255,.11);
  transform:translateY(-1px);
}
.btn.outline{
  background:transparent;
  color:var(--paper-ink);
  border:1px solid var(--line-paper);
}
.btn.outline:hover{
  background:rgba(64,42,22,.05);
  border-color:rgba(64,42,22,.22);
}

/* ── CARD SYSTEM ────────────────────────────────────────── */
.card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line-paper);
  border-radius:var(--radius);
  padding:26px 24px;
  background:var(--paper-3);
  box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:rgba(242,108,13,.18);
}
.card h3{margin-bottom:10px}
.card p{font-size:15px;color:var(--paper-muted);line-height:1.7;margin:0}
.card::after{
  content:'';
  position:absolute;
  right:-40px;bottom:-44px;
  width:120px;height:92px;
  background:url('../images/otos-brain-icon.png') center/contain no-repeat;
  opacity:.04;
  pointer-events:none;
}

/* Dark glass card */
.card.glass{
  background:linear-gradient(180deg,rgba(18,26,38,.82),rgba(10,14,22,.68));
  border-color:var(--line);
  box-shadow:var(--shadow-dark);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.card.glass h3{color:var(--ink)}
.card.glass p{color:var(--muted)}
.card.glass::after{opacity:.04;filter:invert(1)}

/* ── CARD GRIDS ─────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.five{grid-template-columns:repeat(5,1fr)}

/* ── STAT DISPLAY ───────────────────────────────────────── */
.stat{
  display:block;
  font-size:clamp(30px,3.5vw,48px);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:.92;
  color:var(--orange);
  margin-bottom:12px;
}
.dark-section .stat{color:var(--orange-2)}
.stat-card{min-height:180px;display:flex;flex-direction:column;justify-content:space-between}

/* ── LABEL / META ───────────────────────────────────────── */
.label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:8px;
}
.dark-section .label{color:var(--orange-2)}

/* ── CALLOUT BLOCK ──────────────────────────────────────── */
.callout{
  border-left:3px solid var(--orange);
  background:rgba(242,108,13,.07);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:20px 24px;
  color:var(--paper-ink);
  font-size:17px;
  font-style:italic;
  font-weight:700;
  line-height:1.65;
  margin:24px 0;
}
.dark-section .callout{
  color:var(--ink);
  background:rgba(242,108,13,.09);
}

/* ── SUPPORT NOTE (partner pages) ───────────────────────── */
.support-note{
  background:var(--paper-3);
  border:1px solid var(--line-paper);
  border-left:4px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:28px 32px;
  box-shadow:var(--shadow);
}
.support-note-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
}
.support-note-copy{
  font-family:Georgia,'Times New Roman',serif;
  font-size:16px;
  font-style:italic;
  line-height:1.75;
  color:var(--paper-ink);
  margin-bottom:20px;
  max-width:720px;
}
.support-note-hint{
  font-size:13px;
  font-weight:600;
  color:var(--paper-muted);
  margin-bottom:16px;
}

/* ── IMAGE TREATMENTS ───────────────────────────────────── */
.image-contained{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  flex-shrink:0;
}
.image-contained img{width:100%;display:block;object-fit:cover}

.image-thumbnail{
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid var(--line-paper);
  box-shadow:var(--shadow-sm);
}
.image-thumbnail img{width:100%;display:block}

/* ── HERO IMAGE CARD (index) ────────────────────────────── */
.hero-image-card{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--glow);
  position:relative;
  min-height:480px;
}
.hero-image-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.hero-image-card-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(8,10,15,.9) 0%, rgba(8,10,15,.72) 30%, rgba(8,10,15,.3) 65%, transparent 100%);
}
.hero-image-card-content{
  position:absolute;
  inset:0;
  padding:44px 48px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  max-width:680px;
}

/* ── INDEX: “home” components used by your current file ─── */
.home-stats-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  margin-top:8px;
}
.home-stat-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.home-stat-card .stat{
  font-size:clamp(34px,3vw,48px);
  line-height:.92;
  white-space:nowrap;
  letter-spacing:-.03em;
  margin-bottom:16px;
}
.home-stat-card p{
  margin:0;
  font-size:14px;
  line-height:1.42;
  color:var(--muted);
}
.home-stat-card strong{
  display:block;
  margin-top:10px;
  font-size:11px;
  line-height:1.25;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(251,247,238,.76);
}

.home-intro-head{
  max-width:1040px;
  margin:0 auto 30px;
  text-align:center;
}
.home-intro-head .kicker{margin-left:auto;margin-right:auto}
.home-intro-head h2{
  max-width:1040px;
  margin:18px auto 0;
  font-size:clamp(28px,4vw,48px);
  line-height:.98;
  letter-spacing:-.045em;
  color:var(--paper-ink);
}
.home-intro-head p{
  max-width:1040px;
  margin:14px auto 0;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.45;
  font-weight:750;
  color:var(--orange);
}

.home-intro-layout{
  max-width:1180px;
  margin:0 auto 30px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,460px);
  gap:36px;
  align-items:start;
}
.home-intro-copy{padding-top:6px}
.home-intro-copy p{
  margin:0 0 17px;
  font-size:17px;
  line-height:1.68;
  color:var(--paper-muted);
}
.home-intro-copy .lead-copy{
  font-size:18px;
  line-height:1.62;
  color:var(--paper-ink);
  font-weight:700;
}
.home-intro-copy .lead-copy strong{
  font-weight:900;
  color:var(--paper-ink);
}
.home-intro-signoff{
  margin-top:2px !important;
  font-size:21px !important;
  line-height:1.3 !important;
  font-weight:900 !important;
  color:var(--paper-ink) !important;
}
.home-intro-visual{
  margin:0;
  width:100%;
  max-width:460px;
  justify-self:end;
}
.home-intro-visual img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  background:#0b0b0b;
}

.home-next-steps{
  max-width:1180px;
  margin:18px auto 0;
  text-align:center;
  border-top:1px solid rgba(37,26,18,.10);
  padding-top:18px;
}
.home-next-steps h3{
  margin:0 0 8px;
  font-size:17px;
  line-height:1.2;
  color:var(--paper-ink);
}
.home-next-steps p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--paper-muted);
  font-weight:650;
}
.home-next-steps strong{color:var(--paper-ink);font-weight:850}

.home-route-wrap{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}

/* Scroll cue */
.scroll-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin:28px auto 0;
  width:fit-content;
  color:rgba(242,108,13,.72);
  text-decoration:none;
  font-size:10px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:900;
}
.scroll-cue span:last-child{
  font-size:18px;
  letter-spacing:0;
  animation:otosScrollBounce 1.8s ease-in-out infinite;
}
@keyframes otosScrollBounce{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(5px);opacity:1}
}

/* ── PARTNER CARDS (index-style) ────────────────────────── */
.route-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.route-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  border:1px solid var(--line-paper);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper-3);
  box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s, border-color .18s;
  color:var(--paper-ink);
}
.route-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  border-color:rgba(242,108,13,.22);
}
.route-card-logo{
  padding:22px 20px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:72px;
  gap:10px;
  flex-wrap:wrap;
  background:#fff;
  border-bottom:1px solid var(--line-paper);
}
.route-card-logo img{max-height:36px;max-width:140px;object-fit:contain}
.route-card-body{
  flex:1;
  padding:16px 18px;
  font-size:13px;
  font-weight:600;
  color:var(--paper-muted);
  line-height:1.6;
}
.route-card-footer{
  padding:12px 18px;
  border-top:1px solid var(--line-paper);
  font-size:12px;
  font-weight:800;
  color:var(--orange);
}

/* ── PARTNER PAGE HERO (generic) ────────────────────────── */
.partner-hero{
  padding:calc(var(--nav-h) + 48px) 0 56px;
  background:var(--bg);
  color:var(--ink);
}
.partner-hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,560px);
  gap:clamp(36px,5vw,64px);
  align-items:center;
}
.partner-hero h1{
  font-size:clamp(30px,3.8vw,52px);
  margin-bottom:16px;
}
.partner-hero p.lede{
  font-size:17px;
  color:rgba(251,247,238,.68);
  line-height:1.7;
}
.partner-hero-image{
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 28px 72px rgba(0,0,0,.34);
}
.partner-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* ── LIST STYLES ────────────────────────────────────────── */
.list{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:15px;
  font-weight:600;
  color:var(--paper-muted);
  line-height:1.55;
}
.dark-section .list li{color:var(--muted)}
.list li::before{
  content:'';
  width:18px;height:14px;
  background:url('../images/otos-brain-icon.png') center/contain no-repeat;
  flex-shrink:0;
  margin-top:3px;
  opacity:.75;
}

/* ── TABLES ─────────────────────────────────────────────── */
.table-wrap{overflow:auto;border:1px solid var(--line-paper);border-radius:var(--radius)}
.dark-section .table-wrap{border-color:var(--line)}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{
  padding:16px 18px;
  border-bottom:1px solid var(--line-paper);
  text-align:left;
  vertical-align:top;
  font-size:15px;
  line-height:1.55;
}
.dark-section th,.dark-section td{border-color:var(--line)}
th{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  background:rgba(242,108,13,.05);
}
td{color:var(--paper-muted);font-weight:500}
.dark-section td{color:var(--muted)}

/* ── CTA ROW ────────────────────────────────────────────── */
.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.cta-row.center{justify-content:center}

/* ── FOOTER ─────────────────────────────────────────────── */
.page-footer{
  background:var(--brown);
  border-top:1px solid rgba(255,255,255,.06);
  padding:28px 0 32px;
}
.page-footer-inner{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
.page-footer img{height:26px;width:auto}
.page-footer-meta{font-size:12px;color:rgba(255,255,255,.36);font-weight:600}
.page-footer a{
  font-size:13px;
  font-weight:800;
  color:var(--orange-2);
  text-decoration:none;
}
.page-footer a:hover{color:#fff}

/* ── INLINE VISUALS / LIGHTBOX ─────────────────────────── */
.inline-visual{
  position:relative;
  float:right;
  width:min(44%,520px);
  margin:8px 0 22px 28px;
  border:1px solid var(--line-paper);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper-3);
  box-shadow:var(--shadow-sm);
  cursor:zoom-in;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.inline-visual:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:rgba(242,108,13,.24);
}
.inline-visual--left{float:left;margin:8px 28px 22px 0}
.inline-visual img{width:100%;display:block;object-fit:cover}
.inline-visual-label{
  position:absolute;
  top:12px;left:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:var(--pill);
  background:rgba(8,10,15,.78);
  color:rgba(251,247,238,.94);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter:blur(14px);
}
.inline-visual figcaption{
  padding:12px 14px 14px;
  font-size:13px;
  line-height:1.52;
  color:var(--paper-muted);
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.52));
}
.inline-visual figcaption strong{display:block;margin-bottom:4px;color:var(--paper-ink)}
.inline-visual figcaption span{display:inline-block;margin-top:4px;color:var(--orange);font-weight:800}

.site-lightbox{
  position:fixed;
  inset:0;
  z-index:2500;
  display:none;
  place-items:center;
  padding:28px;
  background:rgba(8,10,15,.92);
}
.site-lightbox.open{display:grid}
.site-lightbox-panel{
  position:relative;
  width:min(1240px,100%);
}
.site-lightbox-panel img{
  width:100%;
  max-height:88vh;
  object-fit:contain;
  border-radius:var(--radius);
  box-shadow:0 34px 100px rgba(0,0,0,.52);
  background:rgba(255,255,255,.02);
}
.site-lightbox-caption{
  margin-top:12px;
  color:rgba(251,247,238,.76);
  font-size:14px;
  line-height:1.5;
  text-align:center;
}
.site-lightbox-close{
  position:absolute;
  top:-14px;right:-14px;
  width:42px;height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,10,15,.9);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

/* ── QUOTE OVERLAY (solid background, Inter, big) ───────── */
.quote-overlay{
  position:fixed;
  inset:0;
  z-index:5000;
  background:#080a0f;          /* no site visible behind */
  display:none;
  place-items:center;
  padding:28px;
}
.quote-overlay.show{display:grid}
.quote-card{
  width:min(1100px,100%);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(18,26,38,.92), rgba(10,14,22,.86));
  box-shadow:0 34px 100px rgba(0,0,0,.60);
  padding:36px 42px 34px;
  position:relative;
  overflow:hidden;
}
.quote-timer-bar{
  height:8px;
  width:100%;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  margin-bottom:24px;
}
.quote-timer-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--orange), var(--orange-2));
}
.quote-text{
  margin:0 0 18px;
  font-family:var(--font);
  font-style:normal;
  font-size:clamp(22px, 2.2vw, 34px);
  line-height:1.25;
  letter-spacing:-.03em;
  color:rgba(251,247,238,.92);
  font-weight:850;
}
.quote-text em{
  font-style:normal;
  color:#fff;
  font-weight:950;
}
.quote-attribution{
  margin:0 0 22px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(251,247,238,.52);
}
.quote-skip{
  min-height:52px;
  padding:0 26px;
  font-size:15px;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1220px){
  .home-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .home-intro-layout{grid-template-columns:1fr;max-width:860px}
  .home-intro-visual{justify-self:center;max-width:560px}
  .partner-hero-inner{grid-template-columns:1fr}
  .partner-hero-image{max-width:680px;margin:0 auto}
}
@media (max-width:760px){
  .home-route-wrap{padding:0 18px}
}
@media (max-width:700px){
  body{font-size:16px}
  .cards,.cards.two,.cards.four,.cards.five{grid-template-columns:1fr}
  .route-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .hero{padding-top:80px}
  .paper-section,.dark-section,.brown-section{padding:56px 0}
  .support-note{padding:22px 20px}
  .quote-card{padding:26px 18px 22px}
  .quote-text{line-height:1.28}
}
@media (max-width:980px){
  .inline-visual,
  .inline-visual--left{
    float:none;
    width:100%;
    max-width:620px;
    margin:18px auto 20px;
  }

   /* =========================================================
   HERO PATCH ONLY — static hero image, text scrolls over it
   Paste at END of css/otos.css
   No HTML changes required
   ========================================================= */

.hero{
  position:relative;
  min-height:140svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      rgba(10,10,10,.12) 0%,
      rgba(10,10,10,.22) 35%,
      rgba(10,10,10,.46) 68%,
      rgba(10,10,10,.72) 100%
    ),
    var(--hero) center center / cover no-repeat fixed;
}

/* if you use the shorter hero variant */
.hero--short{
  min-height:120svh;
}

/* hero text container */
.hero .container,
.hero .hero-inner,
.hero .hero__inner{
  position:relative;
  z-index:2;
  padding-top:74svh;
  padding-bottom:8svh;
}

/* keep text readable over image */
.hero h1,
.hero p,
.hero .eyebrow,
.hero .kicker{
  position:relative;
  z-index:2;
}

/* mobile / tablet fallback */
@media (max-width: 920px){
  .hero{
    min-height:112svh;
    background-attachment:scroll; /* fixed is unreliable on iPhone */
  }

  .hero--short{
    min-height:96svh;
  }

  .hero .container,
  .hero .hero-inner,
  .hero .hero__inner{
    padding-top:56svh;
    padding-bottom:7svh;
  }
}
}