/* ─── FONTS ─────────────────────────────────────── */
@font-face { font-family: 'Clash Display'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fonts/clash-display-400.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-weight: 500; font-style: normal; font-display: swap; src: url('assets/fonts/clash-display-500.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-weight: 600; font-style: normal; font-display: swap; src: url('assets/fonts/clash-display-600.woff2') format('woff2'); }
@font-face { font-family: 'Clash Display'; font-weight: 700; font-style: normal; font-display: swap; src: url('assets/fonts/clash-display-700.woff2') format('woff2'); }


/* ─── RESET ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: auto; }
body {
  font-family: var(--body-sans);
  background: #0D3B5E;
  color: #F4F7F9;
  line-height: 1.5;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; padding: 0; }
::selection { background: #E84D1A; color: #FFFFFF; }

/* ─── TOKENS ───────────────────────────────────── */
:root {
  /* Night-first: the page field is black; sections opt into light via
     .theme-light and float as lit posters. */
  --bg:        #0D3B5E;
  --bg-2:      rgba(255,255,255,.06);
  --text:      #F4F7F9;
  --dim:       rgba(255,255,255,.6);
  --muted:     rgba(255,255,255,.52);
  --faint:     rgba(255,255,255,.4);
  --hover:     rgba(255,255,255,.05);
  --accent-text: #F58A5E;   /* vermillion lightened for small text on navy (AA) */
  --green:     #E84D1A;
  --green-dot: #E84D1A;
  --border:    rgba(255,255,255,.12);
  --border-2:  rgba(255,255,255,.07);
  --border-dark: rgba(255,255,255,0.12);
  --nav-h:     clamp(3.5rem, .5vw + 3.25rem, 4.5rem);
  --sp:        clamp(3rem, 2.14vw + 2.57rem, 4.5rem);
  --body-sans: -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ease:      cubic-bezier(.625,.05,0,1);
  --ease-out:  cubic-bezier(.19,1,.22,1);

  /* Extended palette. --card is the raised card surface; --sand the alternate
     section tone. Both are re-declared inside .theme-dark. */
  --ink:        #092C47;   /* photo scrims, hero backdrop — deep navy */
  --card:       #114A75;   /* raised card surface on the navy page */
  --sand:       #0F4269;   /* alternate tone, a step up from --bg */
  --green-deep: #C9400F;   /* pressed/!deep vermillion */
  --on-dark:    #FFFFFF;
  --on-dark-dim: rgba(255,255,255,.62);
  --border-on-dark: rgba(255,255,255,.14);
}

/* ── Lit posters — light sections on the night page. Components inherit
     these tokens, so a section flips theme with a single class. ── */
.theme-light {
  --accent-text: #C9400F;   /* vermillion darkened for small text on paper (AA) */
  --bg:        #F7F6F3;
  --bg-2:      rgba(20,41,60,.04);
  --text:      #14293C;
  --dim:       rgba(20,41,60,.6);
  --muted:     rgba(20,41,60,.52);
  --faint:     rgba(20,41,60,.4);
  --hover:     rgba(20,41,60,.04);
  --border:    rgba(20,41,60,.12);
  --border-2:  rgba(20,41,60,.07);
  --card:      #FFFFFF;
  --sand:      #EFECE7;
  background: var(--bg);
  color: var(--text);
}

/* ── VISTA: nav mix-blend-mode ── */
.nav { mix-blend-mode: difference; background: transparent !important; }
.nav.is-scrolled { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav * { color: #fff !important; }
.nav .nav-cta { border-color: rgba(255,255,255,0.3) !important; }
.nav .nav-inner { border-bottom-color: rgba(255,255,255,0.15) !important; }
.nav .nav-div { background: rgba(255,255,255,0.15) !important; }

/* ── VISTA: Logo text ── */
.nav-logo-text {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.04em;
  color: #fff;
}
.footer-nav-logo {
  font-family: 'Clash Display', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  letter-spacing: -.04em !important;
  color: rgba(255,255,255,.45) !important;
}

/* ── VISTA: headings use Clash Display ── */
h1, h2, h3, h4,
.hero-h1, .section-h, .s-title, .footer-tagline,
.overview-tab-header h2 {
  font-family: 'Clash Display', sans-serif !important;
  letter-spacing: -.03em;
}

/* ── Body text: system sans, matching every OOH reference site ── */
.body-secondary, .footer-copy {
  font-family: var(--body-sans) !important;
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* ─── DECORATIVE LINES & DOTS ──────────────────── */
.u-line {
  position: absolute;
  background: var(--border);
  pointer-events: none;
  z-index: 2;
}
.u-line-h { left: 0; right: 0; height: .5px; top: 0; }
.u-line-v { top: 0; bottom: 0; width: .5px; left: 0; }
.u-line-b  { top: auto !important; bottom: 0 !important; }
.u-line-r  { left: auto !important; right: 0 !important; }

.u-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg);
  border: .5px solid var(--border);
  z-index: 4;
  pointer-events: none;
}
.dot-tl { top: -4px;    left: -4px;  }
.dot-tr { top: -4px;    right: -4px; }
.dot-bl { bottom: -4px; left: -4px;  }
.dot-br { bottom: -4px; right: -4px; }

/* ─── UTILITY ──────────────────────────────────── */
.section-h {
  font-size: clamp(1.125rem, 1vw + .9rem, 1.625rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--text);
}
.body-secondary {
  font-size: .9375rem;
  line-height: 1.7;
  letter-spacing: .015em;
  color: var(--muted);
}

/* ─── VERMILLION BUTTON ─────────────────────────── */
.btn-green {
  display: inline-flex; align-items: center;
  padding: .75rem 1.125rem;
  background: #E84D1A;
  color: #FFFFFF !important;
  font-family: 'Clash Display', sans-serif;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  clip-path: inset(0 round 0px);
  transition: clip-path .5s var(--ease), background .25s;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
}
@media (hover: hover) {
  .btn-green:hover { clip-path: inset(.15rem round 3px); background: #c73d12; }
}

/* ═══════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s ease, backdrop-filter .35s ease;
}

.nav-inner {
  display: flex; align-items: stretch;
  height: var(--nav-h);
  border-bottom: .5px solid rgba(255,255,255,0.15);
}

.nav-home {
  display: flex; align-items: center;
  padding: 0 2rem;
  flex-shrink: 0;
  border-right: .5px solid rgba(255,255,255,0.15);
  transition: opacity .2s;
}
.nav-home:hover { opacity: .75; }

.nav-links {
  display: flex; align-items: stretch; flex: 1;
}
.nav-div {
  width: .5px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.nav-link {
  display: flex; align-items: center;
  padding: 0 1.5rem;
  font-size: .875rem; letter-spacing: .02em;
  color: rgba(255,255,255,.6) !important;
  transition: color .2s;
  position: relative;
}
.nav-link:hover { color: #fff !important; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.5px;
  background: #E84D1A;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease-out);
}
.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  display: flex; align-items: center;
  padding: 0 2rem;
  font-size: .875rem; letter-spacing: .02em;
  color: #fff !important;
  flex-shrink: 0;
  border-left: .5px solid rgba(255,255,255,0.3);
  transition: color .2s;
  margin-left: auto;
}
.nav-cta:hover { color: #E84D1A !important; }

.nav-menu-btn {
  display: none;
  width: var(--nav-h);
  height: var(--nav-h);
  border-left: .5px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  position: relative;
}
.menu-dot {
  position: absolute;
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  transition: background .2s, transform .3s var(--ease);
}
.md-ul { top: calc(50% - 8px);   left: calc(50% - 8px); }
.md-ur { top: calc(50% - 8px);   left: calc(50% + 4.5px); }
.md-c  { top: calc(50%);          left: calc(50% - 1.75px); }
.md-ll { top: calc(50% + 4.5px); left: calc(50% - 8px); }
.md-lr { top: calc(50% + 4.5px); left: calc(50% + 4.5px); }
.nav-menu-btn:hover .menu-dot { background: #E84D1A; }

.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
  z-index: 90;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: all; }

.mobile-nav {
  display: flex;
  flex-direction: column;
  background: #092C47;
  border-top: .5px solid rgba(255,255,255,.12);
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 101;
  transform: translateY(-110%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .5s var(--ease), visibility 0s .5s;
}
.mobile-nav.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: all;
  transition: transform .5s var(--ease), visibility 0s 0s;
}
.mobile-link {
  padding: 1.25rem 2rem;
  font-size: 1rem;
  color: rgba(255,255,255,.5) !important;
  border-bottom: .5px solid rgba(255,255,255,.1);
  transition: color .2s;
}
.mobile-link:hover { color: #FFFFFF !important; }
.mobile-link-cta {
  color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero-section {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding-top: var(--nav-h);
  background: var(--ink);
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg-img { object-position: center 35%; }
/* .hero-scrim is defined in the REBUILT HOMEPAGE SECTIONS block — it ends in
   var(--bg) so the photo melts into whatever the page field is. */

.hero-layout {
  position: relative; z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  grid-template-rows: 1fr auto;
  margin: 0 clamp(1.5rem, 4vw, 4rem);
  border-left: .5px solid rgba(255,255,255,.18);
  border-right: .5px solid rgba(255,255,255,.18);
}

.hero-section .u-line { background: rgba(255,255,255,.18) !important; }
.hero-section .u-dot {
  background: var(--ink) !important;
  border-color: rgba(255,255,255,.18) !important;
}

.hero-corner { position: relative; }
.hero-corner.cc-tl { grid-column: 1; grid-row: 1; }
.hero-corner.cc-tr { grid-column: 3; grid-row: 1; }

.hero-heading-col {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: clamp(3rem, 8vh, 7rem) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 5vh, 3.5rem);
  text-align: left;
  position: relative;
}
.hero-h1 {
  font-family: 'Clash Display', sans-serif !important;
  font-size: clamp(3.25rem, 9vw + .5rem, 9rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .94;
  color: #FFFFFF;
  max-width: 20ch;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(18px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.hero-h1.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.hero-accent { color: #FFFFFF; }

/* ── Hero scroll hint ── */
.hero-scroll-hint {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  right: clamp(1.5rem, 3vw, 3rem);
  display: flex;
  align-items: center;
  gap: .875rem;
  opacity: 0;
  transition: opacity 1s var(--ease) .9s;
}
.hero-scroll-hint.is-visible { opacity: 1; }
.hero-scroll-label {
  font-family: 'Clash Display', sans-serif;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.hero-scroll-line {
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,.2);
  position: relative;
  overflow: hidden;
}
.hero-scroll-bar {
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: rgba(255,255,255,.7);
  animation: scrollBar 2s var(--ease-out) infinite 1.5s;
}
@keyframes scrollBar {
  0%   { left: -100%; }
  50%  { left: 0; }
  100% { left: 100%; }
}

/* ── Hero stats bar (kept for fallback) ── */
.hero-logos-bar {
  grid-column: 1 / 4;
  border-top: .5px solid rgba(255,255,255,.18);
  padding: 1.375rem clamp(1.5rem, 3vw, 3rem);
  display: flex; align-items: center; gap: 2rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s var(--ease) .7s, transform .8s var(--ease) .7s;
}
.hero-logos-bar.is-visible { opacity: 1; transform: translateY(0); }

.hero-stat-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 0 2rem;
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat-num {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: #FFFFFF;
  letter-spacing: -.04em;
}
.hero-stat-suf { font-size: .75em; }
.hero-stat-label {
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.hero-stat-sep {
  width: .5px;
  height: 2.5rem;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   OUR LOCATIONS (overview section)
══════════════════════════════════════════════ */
.overview-section {
  border-top: .5px solid var(--border);
  background: var(--bg);
}
.overview-section .u-line { background: var(--border) !important; }
.overview-section .u-dot {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}

.overview-row {
  display: flex;
  min-height: 0;
}

.overview-left {
  width: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border-right: .5px solid var(--border);
  position: relative;
}

.overview-hover {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  cursor: default;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .08s ease-out;
}

.overview-grid {
  display: grid;
  grid-template-columns: 140fr 463fr 115fr;
  grid-template-rows: 305fr 260fr 305fr;
  gap: .5px;
  background: var(--border);
  width: 110%;
  height: 110%;
  position: absolute;
  top: -5%; left: -5%;
  transition:
    grid-template-columns .9s var(--ease),
    grid-template-rows    .9s var(--ease);
}

.ov-cell {
  overflow: hidden;
  position: relative;
  background: var(--bg);
}

.overview-mask {
  position: absolute;
  inset: -5%;
  width: 110%; height: 110%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.ov-mask-img {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .95s var(--ease);
  will-change: clip-path;
}
.ov-mask-img.is-active {
  clip-path: inset(0% 0 0 0);
}
.ov-mask-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.ov-vr {
  position: absolute; top: 0; bottom: 0;
  right: 0; width: .5px;
  background: var(--border);
  pointer-events: none;
  z-index: 3;
}

.overview-right {
  flex: 1;
  display: flex; flex-direction: column;
}

.overview-tab-header {
  padding: var(--sp) clamp(1.5rem, 3vw, 3rem) 2rem;
  border-bottom: .5px solid var(--border);
}

.tab-nav {
  display: flex;
  border-bottom: .5px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 1;
  padding: 1.125rem 1.25rem;
  text-align: left;
  font-size: .875rem;
  font-family: 'Clash Display', sans-serif;
  letter-spacing: .02em;
  color: var(--faint);
  border-right: .5px solid var(--border);
  border-bottom: 1.5px solid transparent;
  transition: color .2s, background .2s;
  white-space: nowrap;
  position: relative;
  min-width: 0;
}
.tab-btn:last-child { border-right: none; }
.tab-btn:hover { color: var(--text); background: var(--hover); }
.tab-btn.is-active { color: var(--text); }
.tab-btn.is-active::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1.5px; background: #E84D1A;
}

.tab-panes { flex: 1; }
.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

/* ── Locations bottom CTA ── */
.overview-cta-row {
  margin-top: auto;
  padding: 1.5rem clamp(1.5rem, 3vw, 3rem);
  border-top: .5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap;
}
.overview-cta-text {
  font-family: var(--body-sans);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 30ch;
}

/* Accordion items */
.acc-item {
  position: relative;
  border-bottom: .5px solid var(--border);
  overflow: hidden;
}
.acc-item:last-child { border-bottom: none; }

.acc-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.125rem clamp(1.5rem, 3vw, 3rem);
  cursor: pointer;
  position: relative;
  transition: padding-left .5s var(--ease), background .2s;
}
.acc-top:hover { background: var(--hover); }
.acc-item.is-active .acc-top {
  padding-left: calc(clamp(1.5rem, 3vw, 3rem) + 1.25rem);
  background: transparent;
}
.acc-item.is-active .acc-top::before {
  content: '';
  position: absolute;
  left: clamp(1.5rem, 3vw, 3rem); top: 50%;
  transform: translateY(-50%);
  width: .5rem; height: .5rem;
  background: #E84D1A; border-radius: 50%;
}

.acc-name {
  font-size: 1rem; font-weight: 400; letter-spacing: -.005em;
  color: var(--text);
  font-family: 'Clash Display', sans-serif;
}
.acc-item.is-active .acc-name { color: #E84D1A; }

.acc-right {
  display: flex; align-items: center; gap: .625rem;
  color: var(--faint); font-size: .8125rem;
  flex-shrink: 0;
}
.acc-label { font-size: .8125rem; color: var(--faint); }
.acc-icon {
  width: 1.125rem; height: 1.125rem; flex-shrink: 0;
  transition: transform .5s var(--ease);
  color: var(--faint);
}
.acc-item.is-active .acc-icon { transform: rotate(45deg); }

.acc-body {
  height: 0; overflow: hidden;
  transition: height .6s var(--ease);
}
.acc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: .5rem clamp(1.5rem, 3vw, 3rem) 1.5rem;
}
.acc-cell { display: flex; flex-direction: column; gap: .25rem; }
.acc-cell-label { font-size: .8125rem; color: var(--muted); }
.acc-val {
  font-size: 1.0625rem;
  color: var(--text);
}
.acc-val strong {
  font-size: clamp(1.25rem, 1.5vw + .75rem, 1.75rem);
  font-weight: 400;
  letter-spacing: -.02em;
}

/* ═══════════════════════════════════════════════
   FOOTER  (dark background)
══════════════════════════════════════════════ */
.footer {
  border-top: .5px solid rgba(255,255,255,.1);
  background: var(--card);
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--nav-h) + 1px);
}

.footer-hero {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: none;
  min-height: clamp(220px, 55vh, 520px);
}

.footer-dots-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.footer-dots-container {
  position: absolute; inset: 1em;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
  font-size: 9px;
}
.fdot {
  width: .5em; height: .5em;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
  pointer-events: none;
  transition: background .25s;
  will-change: background;
}

/* Footer cursor glow */
.footer-cursor {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,77,26,.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: opacity .4s;
  opacity: 0;
}
.footer-hero:hover .footer-cursor { opacity: 1; }

.footer-tagline-wrap {
  position: relative; z-index: 1;
  padding: var(--sp) clamp(1.5rem, 4vw, 4rem) var(--sp);
  pointer-events: none;
}

.footer-tagline {
  font-family: 'Clash Display', sans-serif !important;
  font-size: clamp(3rem, 7.14vw + 1.57rem, 8rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .95;
  max-width: 14ch;
  color: #FFFFFF;
}

.footer-divider {
  position: relative;
  margin-top: 0;
  background: rgba(255,255,255,.08) !important;
}

.footer .u-dot {
  background: var(--card) !important;
  border-color: rgba(255,255,255,.15) !important;
}
.footer .u-line { background: rgba(255,255,255,.08) !important; }

.footer-nav {
  border-top: .5px solid rgba(255,255,255,.1);
  border-bottom: .5px solid rgba(255,255,255,.1);
}
.footer-nav-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.75rem clamp(1.5rem, 4vw, 4rem);
  gap: 2rem; flex-wrap: wrap;
}

.footer-brand-col {
  display: flex; flex-direction: column; gap: .875rem;
}
.footer-logo-link { display: inline-flex; transition: opacity .2s; }
.footer-logo-link:hover { opacity: .6; }
.footer-logo-link::after { display: none; }

.footer-links-col {
  display: flex; flex-direction: column; gap: .5rem;
}

.footer-link {
  font-size: .875rem;
  color: rgba(255,255,255,.45);
  transition: color .2s;
  position: relative;
  display: inline-block;
}
.footer-link:hover { color: #FFFFFF; }
.footer-link::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: .5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.footer-link:hover::after { transform: scaleX(1); transform-origin: left; }

.footer-legal-col {
  display: flex; gap: 1.75rem; align-items: center;
  flex-wrap: wrap;
}

.footer-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.125rem clamp(1.5rem, 4vw, 4rem);
  gap: 1rem;
  border-top: .5px solid rgba(255,255,255,.08);
}
.footer-copy {
  font-family: var(--body-sans) !important;
  font-size: .8125rem;
  color: rgba(255,255,255,.35);
}
.footer-bar .footer-link { font-size: .8125rem; color: rgba(255,255,255,.35); }
.footer-bar .footer-link:hover { color: rgba(255,255,255,.6); }

/* ═══════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════ */
[data-reveal-heading],
[data-reveal] { overflow: hidden; }
[data-reveal-heading] .reveal-line,
[data-reveal] .reveal-line {
  display: block;
  transform: translateY(105%);
  transition: transform .95s var(--ease);
}
[data-reveal-heading].is-revealed .reveal-line,
[data-reveal].is-revealed .reveal-line { transform: translateY(0); }

[data-reveal-paragraph] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .75s ease, transform .75s ease;
}
[data-reveal-paragraph].is-revealed { opacity: 1; transform: none; }

/* ─── FADE LOAD ────────────────────────────────── */
.u-load {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.u-load.is-loaded { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════
   FILM GRAIN OVERLAY
   Handled by the single viewport-sized .grain element (see below). The old
   body::after version was a 500%×500% layer repainting twice a second —
   it doubled the grain and cost a lot of paint work, so it was removed.
══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .overview-left { width: 45%; }
}

@media (max-width: 768px) {
  :root {
    --sp: 2.25rem;
    --nav-h: 4rem;
  }

  /* Nav */
  .nav-links { display: none; }
  .nav-cta   { display: none; }
  .nav-menu-btn { display: flex; align-items: center; justify-content: center; }
  .nav-home { flex: 1; border-right: none; }

  /* Hero */
  .hero-layout {
    grid-template-columns: 1fr;
    margin: 0;
    border-left: none; border-right: none;
  }
  .hero-corner { display: none; }
  .hero-heading-col {
    grid-column: 1; grid-row: 1;
    padding: 3rem 1.5rem 2rem;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .hero-logos-bar {
    grid-column: 1; grid-row: 2;
    flex-direction: column; align-items: flex-start;
    gap: 1rem; padding: 1.5rem;
  }
  /* Overview */
  .overview-row { flex-direction: column; min-height: auto; }
  .overview-left { display: none; }
  .overview-right { width: 100%; }
  .overview-tab-header { padding: 2rem 1.5rem 1.5rem; }
  .acc-top { padding: 1.125rem 1.5rem; }
  .acc-item.is-active .acc-top { padding-left: calc(1.5rem + 1.25rem); }
  .acc-item.is-active .acc-top::before { left: 1.5rem; }
  .acc-grid { grid-template-columns: 1fr 1fr; padding: .5rem 1.5rem 1.25rem; }

  /* Footer */
  .footer-hero { padding: 2rem 1.5rem 0; }
  .footer-nav-inner {
    padding: 1.5rem; flex-direction: column; align-items: flex-start;
  }
  .footer-bar { padding: 1rem 1.5rem; }
  .footer-legal-col { gap: 1.25rem; }
}

/* ── Why VISTA numbered list ── */
.vista-why-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.75rem 0 2rem;
}
.vista-why-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: .75rem;
  align-items: start;
  padding: 1rem 0;
  border-top: .5px solid var(--border);
}
.vista-why-item:last-child { border-bottom: .5px solid var(--border); }
.vista-why-num {
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--green);
  padding-top: .1rem;
}
.vista-why-text {
  font-family: var(--body-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Footer CTA button ── */
.footer-cta-btn {
  position: relative;
  z-index: 2;
  margin-top: 2.5rem;
  margin-left: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  align-self: flex-start;
}
.footer-tagline-wrap + .footer-cta-btn { margin-top: 2rem; }

@media (max-width: 480px) {
  .hero-h1 { letter-spacing: -.03em; }
  .acc-grid { grid-template-columns: 1fr; }
  .tab-btn { font-size: .8125rem; padding: 1rem 1.125rem; }
  .footer-tagline { font-size: clamp(2rem, 10vw, 3.5rem); }
}

/* ═══════════════════════════════════════════════
   CONTACT PAGE — nav, hero, form, footer
══════════════════════════════════════════════ */

/* ── Contact page nav ── */
.nav-wordmark {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.04em;
  color: inherit;
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.nav-hamburger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .3s;
}
.nav-hamburger.is-open span:first-child { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:last-child  { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 90;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem clamp(1.5rem, 5vw, 4rem);
  gap: 1rem;
}
.mobile-nav-overlay.is-open { display: flex; }
.mobile-nav-link {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1;
}
.mobile-nav-link-cta {
  margin-top: 1.5rem;
  font-size: 1rem;
  letter-spacing: .02em;
}

/* ── Contact hero ── */
.contact-hero {
  min-height: 45vh;
  background: var(--card);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--nav-h) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 6vh, 4rem);
}
.contact-hero-h1 {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(3rem, 7vw + .5rem, 7rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .95;
  color: var(--text);
  margin: 0;
}
.contact-hero-sub {
  font-family: var(--body-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255,255,255,.55);
  margin-top: 1.25rem;
  max-width: 40ch;
}

/* ── Contact body ── */
.contact-body {
  padding: clamp(3rem, 6vh, 5rem) clamp(1.5rem, 5vw, 4rem);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(3rem, 5vw, 6rem);
  max-width: 1280px;
  margin: 0 auto;
}

/* Left panel */
.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: .5rem;
}
.contact-co-name {
  font-family: 'Clash Display', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
}
.contact-details { display: flex; flex-direction: column; gap: 0; }
.contact-detail-item {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: .5rem;
  padding: .875rem 0;
  border-top: .5px solid var(--border);
}
.contact-detail-item:last-child { border-bottom: .5px solid var(--border); }
.contact-detail-label {
  font-family: 'Clash Display', sans-serif;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .15rem;
}
.contact-detail-value {
  font-family: var(--body-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.contact-detail-value a { color: var(--green); }
.contact-detail-value a:hover { opacity: .75; }

/* Why VISTA mini-list (contact page) */
.contact-why-list { display: flex; flex-direction: column; gap: 0; }
.contact-why-label {
  font-family: 'Clash Display', sans-serif;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .75rem;
}
.contact-why-item {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  padding: .625rem 0;
  border-top: .5px solid var(--border);
}
.contact-why-item:last-child { border-bottom: .5px solid var(--border); }
.contact-why-dot {
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  margin-top: .35rem;
}
.contact-why-text {
  font-family: var(--body-sans);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Contact form ── */
.contact-form-panel { padding-top: .5rem; }

.cf-success {
  display: none;
  padding: 2rem;
  border: .5px solid var(--border);
  background: var(--bg-2);
}
.cf-success.is-shown { display: block; }
.cf-success-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.cf-success-text { font-family: var(--body-sans); font-size: 1rem; color: var(--muted); }

.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
}
.cf-field { display: flex; flex-direction: column; gap: .375rem; padding: 1.25rem 0; border-top: .5px solid var(--border); }
.cf-field.span-2 { grid-column: span 2; }
.cf-label {
  font-family: 'Clash Display', sans-serif;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cf-input, .cf-select, .cf-textarea {
  font-family: var(--body-sans);
  font-size: 1.0625rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: .5px solid var(--border);
  padding: .5rem 0;
  width: 100%;
  outline: none;
  transition: border-color .25s;
  -webkit-appearance: none;
  appearance: none;
}
.cf-input::placeholder, .cf-textarea::placeholder { color: var(--faint); }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus { border-color: var(--green); }
.cf-select { cursor: pointer; }
.cf-textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }

.cf-submit {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  background: var(--green);
  color: #FFFFFF;
  font-family: 'Clash Display', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .875rem 2rem;
  border: none;
  cursor: pointer;
  transition: opacity .2s;
}
.cf-submit:hover { opacity: .85; }

/* ═══════════════════════════════════════════════
   CONTACT PAGE FOOTER
   (its own markup — needs explicit styling, otherwise it renders
   dark-on-dark with no padding)
══════════════════════════════════════════════ */
.footer-hero-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3rem);
  padding: clamp(4rem, 10vh, 7rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 7vh, 5rem);
}
.footer-hero-area .footer-tagline { color: var(--text); }

.footer-sep {
  height: .5px !important;
  background: var(--border-dark) !important;
  margin: 0 clamp(1.5rem, 5vw, 4rem);
}

.footer-nav-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  padding: clamp(2rem, 4vh, 3rem) clamp(1.5rem, 5vw, 4rem);
}
.footer-brand { display: flex; flex-direction: column; gap: 1.25rem; }
.footer-wordmark {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.45) !important;
  transition: color .25s;
}
.footer-wordmark:hover { color: rgba(255,255,255,.9) !important; }
.footer-nav-links,
.footer-legal-links { display: flex; flex-direction: column; gap: .625rem; }
.footer-legal-links { align-items: flex-end; }
.footer-slogan {
  font-family: var(--body-sans);
  font-size: .875rem;
  color: rgba(255,255,255,.4);
}

/* ── btn-primary (contact page footer CTA + mobile nav CTA) ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.5rem;
  background: var(--green);
  color: #FFFFFF !important;
  font-family: 'Clash Display', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .2s;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(232,77,26,.3);
  background: #d34415;
}
.btn-primary:active { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232,77,26,.22); }
.btn-primary svg { flex-shrink: 0; }
/* Mobile nav CTA keeps button styling but sits in the stacked list */
.mobile-nav-link-cta.btn-primary { margin-top: 1.5rem; font-size: .875rem; }

/* ── Form validation errors ── */
.cf-error {
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--green);
  margin-top: .5rem;
}
.cf-field.has-error .cf-input,
.cf-field.has-error .cf-select,
.cf-field.has-error .cf-textarea {
  border-color: var(--green);
}
.cf-field.has-error .cf-label { color: var(--green); }

/* ── Responsive: contact page ── */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .nav-hamburger { display: flex; }
}
@media (max-width: 640px) {
  .contact-hero-h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
  .cf-grid { grid-template-columns: 1fr; }
  .cf-field.span-2 { grid-column: span 1; }
  .contact-detail-item { grid-template-columns: 5rem 1fr; }
}

/* ═══════════════════════════════════════════════
   INTERACTIVE POLISH & SMOOTH IMPROVEMENTS
══════════════════════════════════════════════ */

/* ── Nav: frosted glass on scroll ── */
.nav.is-scrolled {
  background: rgba(9,44,71,.85) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important;
  mix-blend-mode: normal !important;
}
.nav.is-scrolled * { color: #FFFFFF !important; }
.nav.is-scrolled .nav-cta {
  border-color: rgba(255,255,255,0.2) !important;
  color: #FFFFFF !important;
}
.nav.is-scrolled .nav-inner { border-bottom-color: rgba(255,255,255,0.08) !important; }
.nav.is-scrolled .nav-div   { background: rgba(255,255,255,0.12) !important; }
.nav.is-scrolled .nav-logo-text { color: #FFFFFF !important; }
.nav { transition: background .45s var(--ease), backdrop-filter .45s var(--ease), box-shadow .45s var(--ease), mix-blend-mode 0s .45s; }

/* ── Nav links: underline slide ── */
.nav-link {
  position: relative;
  overflow: hidden;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── btn-green: magnetic lift ── */
.btn-green {
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .2s;
  will-change: transform;
}
.btn-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(232,77,26,.28);
}
.btn-green:active { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232,77,26,.2); }


/* ── Accordion items: smooth border color ── */
.acc-item { transition: background .25s; }
.acc-top { transition: color .25s; }
.acc-item.is-active .acc-top { color: var(--green); }
.acc-icon { transition: transform .4s var(--ease-out); }
.acc-item.is-active .acc-icon { transform: rotate(45deg); }

/* ── Tab buttons: active underline (keep existing ::after, no overflow:hidden) ── */
.tab-btn { transition: color .25s, background .25s; }


/* ── Reveal lines: per-line stagger delay ── */
[data-reveal-heading].is-revealed .reveal-line:nth-child(2),
[data-reveal].is-revealed .reveal-line:nth-child(2) {
  transition-delay: .12s;
}
[data-reveal-heading].is-revealed .reveal-line:nth-child(3),
[data-reveal].is-revealed .reveal-line:nth-child(3) {
  transition-delay: .24s;
}


/* ── Overview grid: smooth mosaic morph ── */
.overview-grid { transition: grid-template-columns .6s var(--ease-out), grid-template-rows .6s var(--ease-out); }

/* ── Overview mask images: cross-fade ── */
.ov-mask-img {
  transition: opacity .6s var(--ease-out);
}

/* ── Parallax images: hardware accelerated ── */
.u-parallax-img { will-change: transform; }

/* ── Footer CTA button: glow pulse ── */
.footer-cta-btn {
  position: relative;
}
.footer-cta-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--green);
  opacity: 0;
  transition: opacity .4s;
  z-index: -1;
  filter: blur(16px);
}
.footer-cta-btn:hover::after { opacity: .35; }

/* ── Smooth page transitions ──
   Opacity only, deliberately: a transform on <body> (with fill-mode: both)
   would persist and make body the containing block for every position:fixed
   element — which breaks the nav, grain, scroll bar and mobile nav overlay. */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Custom text cursor caret ── */
::selection { background: var(--green); color: var(--bg); }

/* ═══════════════════════════════════════════════
   PHOTO SHOWCASE STRIP
══════════════════════════════════════════════ */
.photo-strip {
  overflow: hidden;
  border-top: .5px solid var(--border);
  border-bottom: .5px solid var(--border);
  height: clamp(220px, 38vh, 420px);
  position: relative;
}
.photo-strip-track {
  display: flex;
  height: 100%;
  width: max-content;
  animation: stripScroll 55s linear infinite;
  gap: 2px;
}
.photo-strip:hover .photo-strip-track { animation-play-state: paused; }
.photo-strip-item {
  width: clamp(260px, 38vw, 520px);
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.photo-strip-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
  transform: scale(1.04);
}
.photo-strip-item:hover img { transform: scale(1.0); }
@keyframes stripScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════════════════════════ */
#scrollProgress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--green);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 99998;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   FILM GRAIN OVERLAY
══════════════════════════════════════════════ */
.grain {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .03;
  pointer-events: none;
  z-index: 99990;
  animation: grainShift 8s steps(8) infinite;
}
@keyframes grainShift {
  0%   { background-position: 0 0; }
  100% { background-position: 180px 180px; }
}

/* ═══════════════════════════════════════════════
   FLOATING CTA
══════════════════════════════════════════════ */
.floating-cta {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  background: var(--green);
  color: #FFFFFF !important;
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .875rem 1.625rem;
  box-shadow: 0 8px 24px rgba(232,77,26,.3);
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .3s;
  pointer-events: none;
}
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.floating-cta:hover {
  box-shadow: 0 16px 40px rgba(232,77,26,.45);
  transform: translateY(-3px) scale(1.02);
}
.floating-cta svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .floating-cta { bottom: 1.25rem; right: 1.25rem; font-size: .6875rem; padding: .75rem 1.25rem; }
}

/* ═══════════════════════════════════════════════
   NAV ACTIVE LINK
══════════════════════════════════════════════ */
.nav-link.is-active { opacity: 1 !important; }
.nav-link.is-active::after { transform: scaleX(1) !important; transform-origin: left !important; }

/* ═══════════════════════════════════════════════
   SECTION POLISH
══════════════════════════════════════════════ */


/* Overview mask image transitions */
.ov-mask-img { transition: opacity .7s var(--ease-out); }

/* Acc-item active label */
.acc-item.is-active .acc-label { color: var(--green); transition: color .25s; }
.acc-label { transition: color .25s; }


/* Footer tagline bigger */
.footer-tagline {
  font-size: clamp(3rem, 7vw + 1rem, 9rem) !important;
  letter-spacing: -.04em !important;
  line-height: .9 !important;
}

/* Smoother page load (opacity only — see note at @keyframes pageFadeIn) */
body { animation: pageFadeIn .6s var(--ease-out) both; }


/* Section dividers — subtle vertical rhythm */
.stats-band,
.formats-section,
.network-section,
.why-section,
.coverage-section,
.clients-section,
.contact-section,
.overview-section { scroll-margin-top: var(--nav-h); }

/* Better accordion active top */
.acc-item.is-active .acc-top .acc-name { color: var(--green); }
.acc-name { transition: color .25s; }


/* ═══════════════════════════════════════════════
   FOCUS VISIBILITY (keyboard users)
══════════════════════════════════════════════ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}
.nav :focus-visible { outline-color: #fff; }
.footer :focus-visible { outline-color: var(--green); outline-offset: 4px; }
/* Skip-link-style affordance for the keyboard-operable panel headers */
.acc-top { cursor: pointer; }

/* ═══════════════════════════════════════════════
   REFINEMENT PASS — depth, rhythm, interaction
══════════════════════════════════════════════ */


/* ── Location rows: quieter, more precise ── */
.acc-item { transition: background .35s var(--ease); }
.acc-item:not(.is-active):hover { background: var(--hover); }
.acc-name { transition: color .3s var(--ease), transform .4s var(--ease-out); }
.acc-item:not(.is-active):hover .acc-name { transform: translateX(3px); }


/* ── Photo strip: cleaner edges, subtle vignette ── */
.photo-strip { position: relative; }
.photo-strip::before,
.photo-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 7vw, 110px);
  z-index: 2;
  pointer-events: none;
}
.photo-strip::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.photo-strip::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.photo-strip-item { filter: saturate(.92); transition: filter .6s var(--ease); }
.photo-strip-item:hover { filter: saturate(1.05); }

/* ── Buttons: arrow nudge ── */
.btn-primary svg,
.footer-cta-btn svg { transition: transform .4s var(--ease-out); }
.btn-primary:hover svg,
.footer-cta-btn:hover svg { transform: translateX(4px); }

/* ── Section headings: subtle accent rule ── */
.section-h { position: relative; }

/* ── Locations: nicer tab bar ── */
.tab-btn { transition: color .3s var(--ease), background .3s var(--ease); }
.tab-btn:not(.is-active):hover { background: var(--hover); color: var(--text); }


/* ── Nav: tighter, more confident ── */
.nav-cta { transition: background .3s var(--ease), color .3s var(--ease), border-color .3s; }
.nav.is-scrolled .nav-cta:hover { background: var(--green); border-color: var(--green) !important; color: #FFFFFF !important; }

/* ── Selection + scrollbar polish ── */
::selection { background: var(--green); color: #FFFFFF; }
html { scrollbar-color: rgba(128,124,116,.5) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(128,124,116,.45);
  border-radius: 10px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(128,124,116,.65); }

/* ── Respect reduced motion across the refinements ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════
   CONTACT PAGE NAV — align with the home page
   The wordmark had no padding, so it sat flush against the viewport edge
   while the home page insets it by 2rem inside a bordered cell.
══════════════════════════════════════════════ */
#vistanav .nav-inner { align-items: stretch; }

#vistanav .nav-wordmark {
  display: flex;
  align-items: center;
  padding: 0 clamp(1.5rem, 3vw, 2rem);
  border-right: .5px solid rgba(255,255,255,.15);
  flex-shrink: 0;
  transition: opacity .2s;
}
#vistanav .nav-wordmark:hover { opacity: .75; }

#vistanav .nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  padding: 0 clamp(1.5rem, 3vw, 2rem);
}

#vistanav .nav-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 0 clamp(1.5rem, 3vw, 2rem);
  border-left: .5px solid rgba(255,255,255,.15);
  flex-shrink: 0;
}

#vistanav .nav-hamburger { align-self: center; margin-right: clamp(1.25rem, 3vw, 2rem); }

/* Scrolled state — the contact nav never had one because the scroll handler
   only looked for #nav. */
#vistanav.is-scrolled { background: rgba(9,44,71,.85) !important; backdrop-filter: blur(18px) saturate(180%) !important; -webkit-backdrop-filter: blur(18px) saturate(180%) !important; mix-blend-mode: normal !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) !important; }
#vistanav.is-scrolled * { color: #FFFFFF !important; }
#vistanav.is-scrolled .nav-wordmark { border-right-color: rgba(255,255,255,.1) !important; }
#vistanav.is-scrolled .nav-cta { border-left-color: rgba(255,255,255,.1) !important; }
#vistanav.is-scrolled .nav-inner { border-bottom-color: rgba(255,255,255,.08) !important; }

@media (max-width: 900px) {
  /* These need the #vistanav prefix too, otherwise the rules above (ID
     specificity) keep the links visible and shove the hamburger off-screen. */
  #vistanav .nav-cta   { display: none; }
  #vistanav .nav-links { display: none; }
  #vistanav .nav-hamburger { display: flex; margin-left: auto; }
}


/* ═══════════════════════════════════════════════
   REBUILT HOMEPAGE SECTIONS
   Hero copy · stats band · formats grid · network strip ·
   case studies · coverage notes · clients + testimonials · contact band
══════════════════════════════════════════════ */

/* ── Shared section chrome ── */
.s-eyebrow {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.25rem;
}
.s-title {
  font-family: 'Clash Display', sans-serif !important;
  font-size: clamp(1.75rem, 2.5vw + .75rem, 3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--text);
}
.s-head {
  padding: clamp(3.5rem, 8vh, 5.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2rem, 4vh, 3rem);
}

/* ── Placeholder chrome — clearly fake, swap before publishing ── */
.ph-note {
  display: inline-block;
  font-family: var(--body-sans);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--dim);
  border: 1px dashed rgba(232,77,26,.55);
  background: rgba(232,77,26,.05);
  padding: .625rem .875rem;
  margin-top: 1.25rem;
}
.ph-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  z-index: 2;
  font-family: 'Clash Display', sans-serif;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(9,44,71,.78);
  border: 1px dashed rgba(255,255,255,.65);
  padding: .375rem .625rem;
}

/* ── Hero: sub line + CTA row ── */
.hero-scrim {
  background: linear-gradient(180deg,
    rgba(9,44,71,.42) 0%,
    rgba(9,44,71,.16) 40%,
    rgba(9,44,71,.34) 74%,
    var(--bg) 100%);          /* hero photo resolves into the light page */
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.5vh, 1.75rem);
}
.hero-sub {
  font-family: var(--body-sans);
  font-size: clamp(1rem, .5vw + .9rem, 1.1875rem);
  line-height: 1.6;
  color: rgba(255,255,255,.8);
  max-width: 44ch;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease) .35s, transform .9s var(--ease) .35s;
}
.hero-sub.is-visible { opacity: 1; transform: none; }
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease) .55s, transform .9s var(--ease) .55s;
}
.hero-cta-row.is-visible { opacity: 1; transform: none; }
.hero-secondary-link {
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.65);
  padding: .8em 1.5em;
  transition: background .25s, color .25s, border-color .25s;
}
.hero-secondary-link:hover { background: #fff; color: #0D3B5E; border-color: #fff; }

/* ── Stats band — plain and immediate ── */
.stats-band {
  background: var(--bg);
  border-top: .5px solid var(--border);
  padding: clamp(3.5rem, 8vh, 6rem) clamp(1.5rem, 5vw, 4.5rem);
}
.stats-inner {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) 1.6fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  min-width: 0;
  padding: .25rem clamp(1rem, 2vw, 2rem);
  border-left: .5px solid var(--border);
}
.stat-num-row {
  display: flex;
  align-items: baseline;
  gap: .12em;
  margin-bottom: .5rem;
}
.stats-band .kpi-num {
  font-family: 'Clash Display', sans-serif !important;
  font-size: clamp(2.5rem, 3vw + 1.25rem, 4.25rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .9;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(1.125rem, 1.4vw + .4rem, 1.75rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--green);
}
.stat-label {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(.6875rem, .4vw + .625rem, .8125rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.3;
}

/* ── Formats — card grid ── */
.formats-section {
  background: var(--bg);
  border-top: .5px solid var(--border);
  padding-bottom: clamp(4rem, 8vh, 6rem);
}
.format-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5px;                       /* hairline joints via the backdrop */
  background: var(--border);
  border-top: .5px solid var(--border);
  border-bottom: .5px solid var(--border);
}
.format-card {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.format-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.format-media img {
  transform: scale(1.04);
  transition: transform .8s var(--ease-out);
}
.format-card:hover .format-media img { transform: scale(1); }
.format-body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
  padding: 1.5rem clamp(1.25rem, 1.8vw, 1.75rem) 1.75rem;
}
.format-num {
  font-family: 'Clash Display', sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--green);
}
.format-name {
  font-family: 'Clash Display', sans-serif !important;
  font-size: clamp(1.25rem, 1.2vw + .8rem, 1.625rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}
.format-desc {
  font-family: var(--body-sans);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--dim);
}
.format-meta {
  font-family: 'Clash Display', sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: auto;
  padding-top: .75rem;
}

/* ── Network — showcase strip ── */
.network-section {
  background: var(--bg);
  border-top: .5px solid var(--border);
}
.photo-strip-item { position: relative; }
.photo-strip-item::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(9,44,71,.55), transparent);
  pointer-events: none;
}
.strip-code {
  position: absolute;
  left: 1.125rem; bottom: 1rem;
  z-index: 2;
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark);
}

/* ── Case studies — placeholder cards ── */
.cases-section {
  background: var(--sand);
  border-top: .5px solid var(--border);
  padding-bottom: clamp(4rem, 8vh, 6rem);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
}
.case-card {
  background: var(--card);
  border: .5px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.case-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.case-media img {
  transform: scale(1.04);
  transition: transform .8s var(--ease-out);
}
.case-card:hover .case-media img { transform: scale(1); }
.case-body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
  padding: 1.5rem 1.5rem 1.75rem;
}
.case-brand {
  font-family: 'Clash Display', sans-serif !important;
  font-size: clamp(1.25rem, 1vw + .9rem, 1.5rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}
.case-line {
  font-family: var(--body-sans);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--dim);
}
.case-kicker {
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}
.case-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.125rem;
  border-top: .5px solid var(--border);
}
.case-meta-cell dt {
  font-family: 'Clash Display', sans-serif;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .25rem;
}
.case-meta-cell dd {
  font-family: var(--body-sans);
  font-size: .875rem;
  color: var(--text);
  margin: 0;
}

/* ── Coverage: eyebrow + audience placeholder ── */
.overview-tab-header .s-eyebrow { margin-bottom: .875rem; }
.audience-note {
  margin: 1.5rem clamp(1.5rem, 3vw, 3rem) 0;
}
.acc-val-pending { color: var(--dim); }
.acc-val-pending strong { color: var(--dim); }

/* ── Clients + testimonials — placeholder ── */
.clients-section {
  background: var(--sand);
  border-top: .5px solid var(--border);
  padding-bottom: clamp(4rem, 8vh, 6rem);
}
.logo-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .625rem;
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
  margin-bottom: clamp(2rem, 4vh, 3rem);
}
.logo-ph {
  min-height: 84px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--faint);
  background: var(--bg-2);
  font-family: 'Clash Display', sans-serif;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
  padding: .5rem;
}
.t-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
}
.t-card {
  margin: 0;
  background: var(--card);
  border: .5px solid var(--border);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.t-quote {
  font-family: var(--body-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--dim);
}
.t-attr {
  font-family: 'Clash Display', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  margin-top: auto;
}
.t-attr span {
  display: block;
  font-family: var(--body-sans);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--dim);
  margin-top: .25rem;
}

/* ── Contact band ── */
.contact-section {
  background: var(--bg);
  border-top: .5px solid var(--border);
  padding: clamp(4rem, 9vh, 7rem) clamp(1.5rem, 5vw, 4.5rem);
}
.contact-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.contact-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-lead-text {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: 1.0625rem;
}
.contact-lead .vista-why-list { width: 100%; }
.contact-side { padding-top: .5rem; }

/* ── Responsive: rebuilt sections ── */
@media (max-width: 1024px) {
  .format-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-row { grid-template-columns: repeat(3, 1fr); }
  .t-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .stats-inner { grid-template-columns: 1fr; gap: 2rem; }
  .case-grid { grid-template-columns: 1fr; }
  .contact-cols { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 700px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
  .s-head { padding: 2.5rem 1.5rem 1.75rem; }
  .stats-band { padding: 2.5rem 1.5rem; }
  .case-grid, .t-grid, .logo-row { padding: 0 1.5rem; }
  .contact-section { padding: 3rem 1.5rem; }
  .audience-note { margin: 1.25rem 1.5rem 0; }
}
@media (max-width: 640px) {
  .format-grid { grid-template-columns: 1fr; }
  .logo-row { grid-template-columns: repeat(2, 1fr); }
  .hero-cta-row { flex-wrap: wrap; gap: 1.25rem; }
}

/* ═══════════════════════════════════════════════
   CLIENT LOGO WALL — demo wordmarks (fictional brands)
   Six CSS-only wordmarks with distinct typography so the wall reads like a
   finished monochrome logo row. Swap each .logo-mark for a real <img> logo
   (grayscale) when actual clients land.
══════════════════════════════════════════════ */
.logo-mark {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .5px solid var(--border);
  background: var(--card);
  color: var(--dim);
  text-align: center;
  padding: .5rem 1rem;
  font-family: 'Clash Display', sans-serif;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.logo-mark:hover { color: var(--text); }

.logo-mark-1 { font-size: 1.125rem; font-weight: 700; letter-spacing: .22em; }
.lm-sup { font-weight: 400; font-size: .7em; transform: translateY(-30%); margin-left: .1em; }

.logo-mark-2 { font-size: 1.375rem; font-weight: 500; letter-spacing: -.03em; }
.lm-dot { color: var(--green); transform: translateY(18%); }

.logo-mark-3 {
  font-size: 1.25rem; font-weight: 700; letter-spacing: .12em;
  color: transparent;
  -webkit-text-stroke: 1px var(--dim);
}
.logo-mark-3:hover { -webkit-text-stroke-color: var(--text); }

.logo-mark-4 { font-size: 1.1875rem; font-weight: 600; letter-spacing: .06em; }
.lm-plus { font-weight: 400; }

.logo-mark-5 { font-size: 1rem; font-weight: 400; letter-spacing: .3em; }

.logo-mark-6 { font-size: 1.125rem; font-weight: 600; }
.lm-bar { color: var(--faint); font-weight: 300; margin: 0 .25em; }

.clients-demo-note {
  margin: clamp(1.5rem, 3vh, 2rem) clamp(1.5rem, 5vw, 4.5rem) 0;
}

@media (max-width: 640px) {
  .logo-mark { min-height: 64px; }
  .logo-mark-1 { font-size: 1rem; }
  .logo-mark-2 { font-size: 1.1875rem; }
  .logo-mark-3 { font-size: 1.0625rem; }
  .logo-mark-4 { font-size: 1.0625rem; }
  .logo-mark-5 { font-size: .875rem; letter-spacing: .2em; }
  .logo-mark-6 { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════
   MOUNTED PANELS
   The dark theme is no longer a page stripe — it's an object. Each .panel
   section floats on the white page like a billboard face on a structure:
   white gutters around it, a vermillion mounting tab top-left, sharp corners.
   The footer stays full-bleed: it's the ground the panels stand on.
══════════════════════════════════════════════ */
.panel {
  margin: clamp(2.5rem, 6vh, 4.5rem) clamp(1rem, 3.5vw, 3.5rem);
  border-radius: 3px;
  border-top: none;
  overflow: hidden;
  position: relative;
}
.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(1.5rem, 5vw, 4.5rem);
  width: 3rem;
  height: .3125rem;
  background: var(--green);
}

/* The stats band is now the first panel: white numerals on black — a
   billboard face. A little extra breathing room so it reads as one. */
.stats-band.panel { padding: clamp(4rem, 9vh, 6.5rem) clamp(1.5rem, 5vw, 4.5rem); }

/* Panels sit close to the hero's white fade — pull the first one up a touch. */
.hero-section + .panel { margin-top: clamp(1.5rem, 4vh, 2.5rem); }

/* Formats follows a panel, not a section edge — no hairline needed. */


@media (max-width: 700px) {
  .panel { margin: 1.75rem .75rem; }
  .stats-band.panel { padding: 2.75rem 1.5rem; }
}


/* ── Section titles centered, JCDecaux-style ── */
.s-head { text-align: center; }
.clients-demo-note { display: table; margin-left: auto; margin-right: auto; }

/* Stats: heading centered above the numbers row */
.stats-inner { display: block; }
.stats-head { text-align: center; margin-bottom: clamp(2rem, 5vh, 3rem); }
.stats-row { max-width: 62rem; margin: 0 auto; text-align: left; }




/* ═══════════════════════════════════════════════
   LAUNCH POLISH
   Footnotes, legal pages, and vermillion tuned for small text.
══════════════════════════════════════════════ */

/* Source/footnote lines — quiet, no placeholder chrome */
.src-note {
  display: block;
  font-family: var(--body-sans);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 1.5rem;
  padding: 0;
  border: none;
  background: none;
}
.audience-note.src-note { margin: 1.5rem clamp(1.5rem, 3vw, 3rem) 0; }
.clients-demo-note.src-note { display: table; margin-left: auto; margin-right: auto; text-align: center; }

/* Legal pages */
.legal-body { max-width: 72ch; margin: 0 auto; }
.legal-body h2 {
  font-family: 'Clash Display', sans-serif !important;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 2.25rem 0 .75rem;
}
.legal-body p {
  font-family: var(--body-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--dim);
}
.legal-body p + p { margin-top: .875rem; }
.legal-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .15em; }
.legal-updated { font-size: .8125rem !important; color: var(--faint) !important; margin-top: 1.25rem; }
.legal-body .ph-note { margin-top: 0; }

/* Small vermillion text uses the contrast-safe shade for its surface.
   Buttons and the large mounting tab keep the full brand vermillion. */
.s-eyebrow, .format-num, .case-kicker, .vista-why-num, .stat-unit,
.contact-detail-value a, .lm-dot, .cf-error, .contact-why-label,
.acc-item.is-active .acc-name, .acc-item.is-active .acc-top .acc-name,
.acc-item.is-active .acc-label, .acc-item.is-active .acc-top,
.tab-btn.is-active { color: var(--accent-text); }


/* ═══════════════════════════════════════════════
   SECTION 2 — WhatsApp, six-format grid, responsive images
══════════════════════════════════════════════ */
picture { display: contents; }   /* <picture> wrappers must not add a box */

.wa-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-left: 1rem;
  padding: .3rem .7rem;
  border: 1px solid var(--accent-text);
  border-radius: 999px;
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-text) !important;
  vertical-align: middle;
  transition: background .25s, color .25s;
}
.wa-link svg { width: 1rem; height: 1rem; }
.wa-link:hover { background: var(--accent-text); color: #fff !important; }
.contact-detail-value { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0; }

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


/* ═══════════════════════════════════════════════
   WHY OUTDOOR — proof points instead of case-study cards
══════════════════════════════════════════════ */
.why-section {
  background: var(--sand);
  border-top: .5px solid var(--border);
  padding-bottom: clamp(4rem, 8vh, 6rem);
}
.s-intro {
  max-width: 58ch;
  margin: 1.25rem auto 0;
  font-family: var(--body-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--dim);
}
.proof-grid, .results-grid {
  display: grid;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
}
.proof-grid   { grid-template-columns: repeat(3, 1fr); }
.results-grid { grid-template-columns: repeat(2, 1fr); }
.proof-card {
  background: var(--card);
  border: .5px solid var(--border);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}
.proof-stat {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(2.75rem, 3.5vw + 1rem, 4.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .9;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.proof-claim {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text);
}
.proof-why {
  font-family: var(--body-sans);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--dim);
}
.proof-src {
  font-family: var(--body-sans);
  font-size: .75rem;
  color: var(--faint);
  margin-top: auto;
  padding-top: .875rem;
  border-top: .5px solid var(--border);
}
.results-head { text-align: center; padding: clamp(2.5rem, 5vh, 3.5rem) 1.5rem 1.25rem; }
.results-label {
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
}
.proof-card-result {
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.proof-card-result > div { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 0; }
.proof-card-result .proof-stat { flex-shrink: 0; min-width: 5.5ch; }
.proof-card-result .proof-src { margin-top: .25rem; }

@media (max-width: 1024px) { .proof-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .results-grid { grid-template-columns: 1fr; }
  .proof-grid, .results-grid { padding: 0 1.5rem; }
  .proof-card-result { flex-direction: column; gap: .75rem; }
}


/* ═══════════════════════════════════════════════
   FORMATS — one at a time (segmented control + stage)
══════════════════════════════════════════════ */
.formats-section .s-head { padding-bottom: clamp(1.5rem, 3vh, 2.25rem); }

.fmt-switch-wrap {
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fmt-switch-wrap::-webkit-scrollbar { display: none; }
.fmt-switch {
  display: inline-flex;
  gap: .25rem;
  padding: .3rem;
  margin: 0 auto;
  background: var(--bg-2);
  border-radius: 999px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.fmt-tab {
  font-family: 'Clash Display', sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--muted);
  padding: .6rem 1.05rem;
  border-radius: 999px;
  transition: background .25s var(--ease-out), color .25s, box-shadow .25s;
}
.fmt-tab:hover { color: var(--text); }
.fmt-tab.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(20,41,60,.10), 0 4px 14px rgba(20,41,60,.08);
}

.fmt-stage {
  display: grid;                 /* panels share one cell; height = tallest */
  padding: clamp(2rem, 4vh, 3rem) clamp(1.5rem, 5vw, 4.5rem) clamp(3rem, 6vh, 4.5rem);
}
.fmt-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events: none;
}
.fmt-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.fmt-panel[hidden] { display: grid; visibility: hidden; }   /* keep it in the grid for height */
.fmt-panel.is-active[hidden] { visibility: visible; }

.fmt-visual {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg-2);
}
.fmt-copy { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.fmt-family {
  font-family: 'Clash Display', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.fmt-name {
  font-family: 'Clash Display', sans-serif !important;
  font-size: clamp(2.25rem, 3.4vw + .5rem, 3.75rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .98;
  color: var(--text);
}
.fmt-desc {
  font-family: var(--body-sans);
  font-size: clamp(1.0625rem, .4vw + .95rem, 1.25rem);
  line-height: 1.6;
  color: var(--dim);
  max-width: 40ch;
}
.fmt-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
  margin-top: .75rem;
  padding-top: 1.5rem;
  border-top: .5px solid var(--border);
}
.fmt-spec dt {
  font-family: 'Clash Display', sans-serif;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .3rem;
}
.fmt-spec dd {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0;
}

@media (max-width: 900px) {
  .fmt-panel { grid-template-columns: 1fr; gap: 1.5rem; }
  .fmt-switch { left: 0; transform: none; }
}
@media (max-width: 700px) {
  .fmt-switch-wrap { padding: 0 1.5rem; }
  .fmt-stage { padding: 1.5rem 1.5rem 2.5rem; }
  .fmt-visual { border-radius: 10px; }
  .fmt-specs { grid-template-columns: 1fr 1fr; gap: 1rem; }
}


/* ═══════════════════════════════════════════════
   APPLE PASS — one idea per section, big type, rounded photography
══════════════════════════════════════════════ */

/* Hero: centred */
.hero-centered .hero-layout { grid-template-columns: 1fr; border-left: none; border-right: none; }
.hero-centered .hero-heading-col {
  grid-column: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: clamp(4rem, 12vh, 8rem);
}
.hero-centered .hero-copy { align-items: center; }
.hero-centered .hero-h1 { max-width: 12ch; }
.hero-centered .hero-sub { max-width: 46ch; }
.hero-centered .hero-cta-row { justify-content: center; }
.hero-centered .hero-secondary-link {
  border: none;
  padding: 0;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
.hero-centered .hero-secondary-link::after { content: '\203A'; margin-left: .35em; font-size: 1.1em; }
.hero-centered .hero-secondary-link:hover { background: none; text-decoration: underline; text-underline-offset: .2em; }

/* Section intros + titles share one voice */
.s-intro { max-width: 52ch; }

/* Network: gallery */
.network-section { padding-bottom: clamp(3rem, 6vh, 4.5rem); }
.gal { position: relative; }
.gal-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(1.5rem, 5vw, 4.5rem);
  padding: .5rem clamp(1.5rem, 5vw, 4.5rem) 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.gal-card {
  flex: 0 0 clamp(280px, 42vw, 640px);
  aspect-ratio: 4 / 3;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  scroll-snap-align: start;
  background: var(--card);
}
.gal-card::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(to top, rgba(9,44,71,.6), transparent);
  pointer-events: none;
}
.gal-cap {
  position: absolute; left: 1.25rem; bottom: 1.1rem; z-index: 1;
  font-family: 'Clash Display', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}
.gal-nav {
  display: flex;
  gap: .625rem;
  justify-content: flex-end;
  padding: .75rem clamp(1.5rem, 5vw, 4.5rem) 0;
}
.gal-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  display: grid; place-items: center;
  transition: background .25s, opacity .25s;
}
.gal-btn svg { width: 20px; height: 20px; }
.gal-btn:hover { background: rgba(255,255,255,.22); }
.gal-btn:disabled { opacity: .3; cursor: default; }

/* Why outdoor: no boxes for the three proof points; soft tiles for results */
.proof-grid .proof-card {
  background: transparent;
  border: none;
  padding: 1rem clamp(.5rem, 1.5vw, 1.5rem);
  text-align: center;
  align-items: center;
}
.proof-grid .proof-stat { font-size: clamp(3.25rem, 4.5vw + 1rem, 5.5rem); }
.proof-grid .proof-claim { max-width: 26ch; }
.proof-grid .proof-why { max-width: 34ch; }
.proof-grid .proof-src { border-top: none; padding-top: .25rem; }
.results-grid .proof-card { border: none; border-radius: 18px; padding: clamp(1.75rem, 2.5vw, 2.5rem); }

/* Coverage: chips + 3-up specs + centred CTA */
.chips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: .25rem 0 0; padding: 0;
}
.chips li {
  font-family: 'Clash Display', sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-2);
  border-radius: 999px;
  padding: .45rem .85rem;
}
.fmt-specs-3 { grid-template-columns: repeat(3, 1fr); }
.cov-cta {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 0 1.5rem clamp(3rem, 6vh, 4.5rem);
  text-align: center;
}
.cov-cta-line { font-family: var(--body-sans); font-size: .9375rem; color: var(--muted); }

/* Clients: marks, not tiles */
.logo-row { gap: 1.5rem clamp(1rem, 2vw, 2.5rem); align-items: center; }
.logo-mark { background: transparent; border: none; min-height: 56px; padding: .25rem .5rem; }

/* Contact: centred call to action on the navy */
.contact-section { padding: clamp(5rem, 12vh, 9rem) clamp(1.5rem, 5vw, 4.5rem); }
.cta-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; max-width: 60rem; margin: 0 auto; }
.cta-title { font-size: clamp(2.25rem, 3.6vw + .6rem, 4.25rem); }
.cta-wrap .s-intro { margin-top: 0; }
.cta-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.wa-link-lg { margin-left: 0; padding: .75rem 1.25rem; font-size: .875rem; }
.wa-link-lg svg { width: 1.125rem; height: 1.125rem; }
.cta-specs {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 1rem clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-top: 1.75rem;
  border-top: .5px solid var(--border);
  text-align: left;
}
.cta-specs dd a { color: var(--text); }
.cta-specs dd a:hover { color: var(--accent-text); }

@media (max-width: 900px) {
  .cta-specs { grid-template-columns: repeat(2, 1fr); text-align: left; }
}
@media (max-width: 700px) {
  .hero-centered .hero-heading-col { padding: 3rem 1.5rem 4rem; }
  .gal-track { gap: .75rem; padding: .5rem 1.5rem 1rem; scroll-padding-left: 1.5rem; }
  .gal-card { flex-basis: 80vw; border-radius: 14px; }
  .gal-nav { padding: .5rem 1.5rem 0; }
  .fmt-specs-3 { grid-template-columns: 1fr 1fr; }
  .cta-specs { grid-template-columns: 1fr; }
  .contact-section { padding: 4rem 1.5rem; }
}


/* ═══════════════════════════════════════════════
   BRAND SHOWCASE — one board at a time, logo in front, auto-advancing
══════════════════════════════════════════════ */
.showcase { padding-bottom: clamp(3rem, 6vh, 4.5rem); }
.showcase .s-head { padding-bottom: clamp(1.5rem, 3vh, 2.25rem); }

.sc-stage {
  position: relative;
  margin: 0 clamp(1.5rem, 5vw, 4.5rem);
  aspect-ratio: 16 / 8;
  min-height: 360px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  isolation: isolate;
}
.sc-bg { position: absolute; inset: 0; }
.sc-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .7s var(--ease-out), transform 5.5s linear;
}
.sc-img.is-shown { opacity: 1; transform: scale(1.0); }
.sc-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,44,71,.78) 0%, rgba(9,44,71,.28) 45%, rgba(9,44,71,0) 70%);
}
.sc-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.sc-brand {
  display: flex; flex-direction: column; gap: .35rem;
  min-width: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.sc-brand.is-swapping { opacity: 0; transform: translateY(6px); }
.sc-logo {
  width: auto; height: auto;
  max-width: min(300px, 46vw); max-height: 92px;
  object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.35));
  margin-bottom: .25rem;
}
.sc-name {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(1.75rem, 3vw + .5rem, 3.25rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.sc-logo.is-color { filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.sc-name.is-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sc-cap {
  font-family: var(--body-sans);
  font-size: .9375rem;
  color: rgba(255,255,255,.8);
}
.sc-controls { display: flex; gap: .5rem; flex-shrink: 0; }
.sc-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  display: grid; place-items: center;
  transition: background .2s, transform .2s var(--ease-out);
}
.sc-btn svg { width: 20px; height: 20px; }
.sc-btn:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.sc-ico-play { display: none; }
.showcase.is-user-paused .sc-ico-play  { display: block; }
.showcase.is-user-paused .sc-ico-pause { display: none; }

.sc-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,.18);
}
.sc-bar {
  display: block; width: 100%; height: 100%;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
}
.showcase.is-paused .sc-progress { opacity: .5; }

.sc-strip-wrap {
  margin-top: 1rem;
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sc-strip-wrap::-webkit-scrollbar { display: none; }
.sc-strip {
  list-style: none; margin: 0; padding: .25rem 0;
  display: flex; gap: .5rem;
  width: max-content;
}
.sc-chip {
  font-family: 'Clash Display', sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.08);
  border: .5px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .55rem 1rem;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.sc-chip:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.sc-chip.is-active { background: #fff; border-color: #fff; color: #0D3B5E; }

@media (max-width: 900px) {
  .sc-stage { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 700px) {
  .sc-stage { margin: 0 1.25rem; border-radius: 14px; }
  .sc-overlay { padding: 1rem; align-items: flex-end; }
  .sc-controls { gap: .375rem; }
  .sc-btn { width: 38px; height: 38px; }
  .sc-btn svg { width: 18px; height: 18px; }
  .sc-logo { max-height: 64px; max-width: 52vw; }
  .sc-strip-wrap { padding: 0 1.25rem; }
}