/* Zirker Marine Design — shared site styles */
/* ---------- Typography — final (type mood-room decision, supersedes Arial/Helvetica/Courier New) ---------- */
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/PinyonScript-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Amarante';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/Amarante-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/Marcellus-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Karla-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Karla-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Karla-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2');
}
:root {
  --font-name:   'Pinyon Script', serif;
  --font-number: 'Amarante', serif;
  --font-header: 'Amarante', serif;
  --font-spec:   'Marcellus', serif;
  --font-body:   'Karla', sans-serif;
  --font-ui:     'Inter', sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #0B0D0E;
  font-family: var(--font-body);
  color: #EDEEEA;
}
a { text-decoration: none; color: inherit; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: rgba(11,13,14,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(122,166,169,0.15);
}
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand img { height: 54px; width: auto; display: block; }
.brand span { font-family: var(--font-ui); font-weight: 600; font-size: 18px; letter-spacing: 1px; white-space: nowrap; }

.main-nav { display: flex; gap: 26px; font-size: 14.5px; font-family: var(--font-ui); }
.main-nav a { white-space: nowrap; padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color 0.2s, color 0.2s; }
.main-nav a:hover, .main-nav a.active { color: #B23A20; border-bottom-color: #B23A20; }

/* Transparent header floating over a scroll-scrubbed hero, solid once scrolled past it.
   Taken out of flow (fixed) so the hero renders full-bleed underneath it instead of
   being pushed down by the header's normal flow height. */
.site-header.on-hero {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: transparent;
  border-bottom-color: transparent;
  transition: background 0.3s, border-color 0.3s;
}
.site-header.on-hero.scrolled { background: #19393D; border-bottom-color: rgba(122,166,169,0.15); }

.nav-toggle { display: none; width: 24px; height: 18px; flex-direction: column; justify-content: space-between; cursor: pointer; background: none; border: none; padding: 0; flex-shrink: 0; }
.nav-toggle span { display: block; height: 2px; background: #EDEEEA; border-radius: 1px; }

.mobile-nav {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 94px; left: 0; right: 0;
  background: #0B0D0E;
  border-bottom: 1px solid rgba(122,166,169,0.15);
  z-index: 99;
}
.mobile-nav a { padding: 16px 24px; font-size: 16px; font-family: var(--font-ui); border-bottom: 1px solid rgba(122,166,169,0.1); }
.mobile-nav.open { display: flex; }

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 480px) {
  .site-header { padding: 16px 20px; }
  .brand span { display: none; }
  .mobile-nav { top: 86px; }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(122,166,169,0.15);
  padding: 56px 40px 0;
}
.footer-watermark {
  position: absolute;
  top: 0;
  right: -70px;
  height: 360px;
  width: auto;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.footer-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(122,166,169,0.15);
}
.footer-logo { height: 56px; width: auto; display: block; margin: 0 0 16px; }
.footer-tagline { font-size: 13px; line-height: 1.7; color: #7AA6A9; max-width: 320px; margin: 0 0 22px; }
.social-icons { display: flex; gap: 12px; }
.social-icon {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(122,166,169,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #7AA6A9;
}
.social-icon svg { width: 16px; height: 16px; }
.footer-nav, .footer-contact { display: flex; flex-direction: column; gap: 11px; }
.footer-nav h3, .footer-contact h3 { margin: 0 0 6px; }
.footer-nav a, .footer-contact a { font-family: var(--font-ui); font-size: 13.5px; color: #B7C2C2; transition: color 0.2s; }
.footer-nav a:hover, .footer-contact a:hover { color: #B23A20; }
.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0;
  font-size: 12px;
  color: #7AA6A9;
}
.footer-script { font-family: var(--font-header); font-size: 24px; color: #E3B36B; line-height: 1; }

@media (max-width: 700px) {
  .footer-main { grid-template-columns: 1fr; gap: 30px; }
  .footer-watermark { height: 260px; top: 0; right: -40px; }
}

/* ---------- Shared content elements ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 56px 32px 80px; }
.eyebrow { font-family: var(--font-spec); font-size: 18px; letter-spacing: 1px; color: #B23A20; text-transform: uppercase; margin: 0 0 12px; }
h1 { font-family: var(--font-header); font-size: 38px; font-weight: 400; margin: 0 0 24px; letter-spacing: 0.3px; }
.lead { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: #D7DEDE; margin: 0 0 40px; max-width: 620px; }
h2 { font-family: var(--font-header); font-size: 22px; font-weight: 400; margin: 0 0 4px; color: #EDEEEA; }
h3 { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #7AA6A9; margin: 0 0 16px; }
p { font-family: var(--font-body); font-size: 15px; line-height: 1.75; color: #B7C2C2; margin: 0 0 20px; max-width: 620px; }
section.block { margin-bottom: 48px; padding-top: 4px; }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 28px; }
.gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; display: block; }
.gallery-cap { font-family: var(--font-ui); font-size: 11px; color: #7AA6A9; margin-top: 8px; }

.deliverables { border-top: 1px solid rgba(122,166,169,0.2); border-bottom: 1px solid rgba(122,166,169,0.2); padding: 20px 0; margin: 0 0 8px; }
.deliverables ul { margin: 0; padding: 0; }
.deliverables li {
  font-family: var(--font-spec);
  font-size: 18px;
  color: #D7DEDE;
  padding: 6px 0;
  list-style: none;
  border-left: 2px solid #781B0C;
  padding-left: 14px;
  margin-bottom: 6px;
}
.deliverables li.pending-spec { color: #4E5C5C; font-style: italic; border-left-color: rgba(122,166,169,0.25); }
.statement-panel .deliverables li, .config-specs li { border-left-color: #7AA6A9; }
.statement-panel .deliverables li.pending-spec, .config-specs li.pending-spec { border-left-color: rgba(122,166,169,0.25); }

.cta-btn {
  display: inline-block;
  background: transparent;
  border: 1px solid #781B0C;
  color: #EDEEEA;
  padding: 13px 28px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.4px;
  font-weight: 500;
  margin-top: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.cta-btn:hover { background: rgba(120,27,12,0.2); }

/* ---------- Scroll-scrubbed hero (image-sequence, sticky-pinned) ---------- */
.hero-scroll-stage { height: 400vh; position: relative; }
.hero-pin { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; background: #14181A; }
.hero-pin canvas { display: block; width: 100%; height: 100%; }
.hero-pin::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5,6,7,0.05) 0%, rgba(5,6,7,0.1) 35%, rgba(5,6,7,0.55) 75%, rgba(5,6,7,0.85) 100%);
  pointer-events: none;
}
.hero-pin .hero-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 40px 56px; max-width: 620px; }
.hero-pin .hero-content h1 { font-size: clamp(24px, 6vw, 42px); line-height: 1.2; text-transform: uppercase; }
.hero-pin .hero-content .sub { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: #B7C2C2; margin: 0 0 32px; max-width: 460px; }
.hero-pin .ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero-pin .loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #7AA6A9; background: #14181A; z-index: 3;
}
.hero-pin .progress-track { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(122,166,169,0.2); z-index: 2; }
.hero-pin .progress-fill { height: 100%; width: 0%; background: #781B0C; }
@media (max-width: 700px) {
  /* Text can't be trusted to overlay the image on mobile — the boat's
     position varies across the frame sequence and there's no crop position
     that keeps it clear at every scroll point. Split the pinned section
     into two stacked, non-overlapping zones instead: image on top, a solid
     panel with the text below it. They physically can't collide. */
  .hero-pin canvas { position: absolute; top: 0; left: 0; height: 58vh; }
  .hero-pin::after { bottom: 42vh; }
  .hero-pin .hero-content {
    position: absolute; top: 58vh; left: 0; right: 0; bottom: 0;
    background: #0B0D0E;
    display: flex; flex-direction: column; justify-content: center;
    padding: 24px 24px 40px; max-width: none;
  }
  /* The full eyebrow + headline + paragraph + buttons block doesn't fit in
     the panel's ~42vh — the paragraph alone runs 120-160px. Dropping it is
     more robust than fighting increasingly tight spacing that could break
     again on a shorter phone; the same copy is covered again further down
     the page anyway. */
  .hero-pin .hero-content .sub { display: none; }
}
.spec-strip { display: flex; gap: 32px; padding: 20px 40px; background: #14181A; border-top: 1px solid rgba(122,166,169,0.15); flex-wrap: wrap; }
.spec-item { font-family: var(--font-spec); font-size: 18px; color: #7AA6A9; }
.spec-item b { font-family: var(--font-ui); color: #EDEEEA; font-weight: 600; display: block; font-size: 15px; margin-bottom: 2px; }

/* ---------- Portfolio cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.card-grid a.card-link { display: block; }
.card { background: #14181A; border: 1px solid rgba(122,166,169,0.15); border-radius: 10px; overflow: hidden; }
.card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.card-imgs { display: grid; grid-template-columns: 1fr 1fr; }
.card-imgs img { height: 160px; }
.card-body { padding: 16px 18px 20px; }
.model-number { font-family: var(--font-number); font-size: 30px; font-weight: 400; color: #EDEEEA; letter-spacing: 0.5px; line-height: 1; margin: 0 0 4px; }
.model-number .num { color: #EDEEEA; }
.model-number .flourish { font-family: var(--font-name); font-size: 40px; margin-left: 6px; color: #E3B36B; }
.model-number .tbd { color: #7AA6A9; font-size: 15px; font-weight: 400; }
.vessel-type { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #7AA6A9; margin: 0 0 12px; }
.spec-line { font-family: var(--font-ui); font-size: 11px; color: #B7C2C2; border-top: 1px solid rgba(122,166,169,0.15); padding-top: 9px; }
.status { display: inline-block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #E3B36B; margin-top: 8px; }
.placeholder-card { display: flex; align-items: center; justify-content: center; height: 160px; background: repeating-linear-gradient(135deg, #14181A, #14181A 10px, #1A1F21 10px, #1A1F21 20px); color: #4E5C5C; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }

/* ---------- Portfolio: full-bleed vertical stack ---------- */
/* Each tile is now the whole <a> — no separate "View" button. Text sits at
   the top (gradient flipped to match) so it reads against sky/background
   rather than the boat itself. Hover grows the whole tile slightly, with a
   z-index bump so it pops above its stacked neighbors instead of being
   covered by whichever one comes next in source order. */
.vessel-section {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-start;
  background-image: var(--vessel-img, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease;
}
.vessel-section:hover, .vessel-section:focus-visible {
  transform: scale(1.035);
  z-index: 3;
}
.vessel-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,13,14,0.9) 0%, rgba(11,13,14,0.5) 40%, rgba(11,13,14,0.05) 75%);
}
.vessel-section.placeholder {
  background-image: repeating-linear-gradient(135deg, #14181A, #14181A 10px, #1A1F21 10px, #1A1F21 20px);
}
.vessel-content { position: relative; z-index: 1; padding: 64px 40px 0; max-width: 760px; }
.vessel-index { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.vessel-index .idx-num { font-family: var(--font-ui); color: #B23A20; font-size: 14px; letter-spacing: 2px; }
.vessel-index .idx-line { width: 60px; height: 1px; background: #781B0C; flex-shrink: 0; }
.vessel-index .idx-label { font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #7AA6A9; }
.vessel-headline { font-size: clamp(44px, 8vw, 92px); font-weight: 700; line-height: 1; margin: 0 0 14px; color: #EDEEEA; letter-spacing: 0.2px; }
.vessel-headline .flourish { font-family: var(--font-name); font-weight: 400; color: #E3B36B; font-size: 1.15em; margin-left: 0.15em; }
.vessel-headline .num { font-family: var(--font-number); font-size: 0.42em; font-weight: 400; letter-spacing: 1px; color: #7AA6A9; vertical-align: 0.5em; }
.vessel-spec { font-family: var(--font-spec); font-size: 18px; color: #D7DEDE; border-left: 2px solid #781B0C; padding-left: 14px; margin: 0; }
.vessel-status-tag { display: inline-block; font-family: var(--font-ui); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #E3B36B; }

@media (max-width: 700px) {
  /* Size the section to match each photo's actual aspect ratio instead of a
     fixed vh height — with the box and image proportions identical, a plain
     cover fit needs zero crop AND leaves zero letterbox margin, since there's
     nothing left over on either axis. */
  .vessel-section { min-height: 0; aspect-ratio: var(--vessel-ratio, 16/9); background-size: cover; }
  .vessel-content { padding: 20px 24px 0; }
  .vessel-index { margin-bottom: 8px; }
  .vessel-index .idx-line { width: 32px; }
  .vessel-index .idx-num { font-size: 12px; }
  .vessel-index .idx-label { font-size: 10px; }
  .vessel-headline { font-size: clamp(24px, 8vw, 32px); margin: 0 0 6px; }
  .vessel-spec { font-size: 13px; padding-left: 10px; }
}

/* ---------- Page loading splash (pulsing white silhouette) ---------- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #14181A;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader img { width: 140px; height: auto; animation: loader-pulse 1.8s ease-in-out infinite; }
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes loader-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.93); }
  50% { opacity: 1; transform: scale(1); }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Placeholder page ---------- */
.coming-soon { color: #7AA6A9; font-style: italic; font-size: 14px; }

/* ---------- Model page: full-bleed looping video hero ---------- */
.model-hero {
  position: relative;
  min-height: 100vh;
  background: #050607;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.model-hero.placeholder {
  background-image: repeating-linear-gradient(135deg, #14181A, #14181A 10px, #1A1F21 10px, #1A1F21 20px);
}
.model-hero-pending-tag {
  position: absolute; z-index: 2; bottom: 32px; left: 40px;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #4E5C5C;
}
.model-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 0;
}
.model-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,7,0.35) 0%, rgba(5,6,7,0.1) 30%, rgba(5,6,7,0.15) 60%, rgba(5,6,7,0.75) 100%);
  pointer-events: none;
  z-index: 1;
}
.model-hero .back-link { position: absolute; top: 28px; left: 40px; z-index: 3; color: #EDEEEA; text-shadow: 0 1px 4px rgba(0,0,0,0.65); font-family: var(--font-ui); }
.model-hero .back-link:hover { color: #7AA6A9; }
.model-hero-content { position: absolute; z-index: 2; top: 58px; left: 40px; max-width: 520px; }
.model-hero-eyebrow { font-family: var(--font-spec); font-size: 18px; letter-spacing: 1px; color: #B23A20; text-transform: uppercase; margin: 0 0 18px; }
.model-hero-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2em; font-size: clamp(56px, 10vw, 150px); font-weight: 800; line-height: 1; margin: 0; color: #EDEEEA; letter-spacing: -1.5px; }
.model-hero-headline .num { font-family: var(--font-number); font-weight: 400; letter-spacing: 2px; color: #B7C2C2; font-size: 0.65em; }
.model-hero-headline .flourish { font-family: var(--font-name); font-weight: 400; color: #E3B36B; }
.model-hero-lead { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: #D7DEDE; max-width: 460px; margin: 22px 0 0; }
.model-hero-cta-corner { position: absolute; z-index: 3; top: 32px; right: 40px; display: flex; align-items: center; gap: 30px; }
.hero-nav-link {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 16px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
  color: #EDEEEA; transition: color 0.2s;
}
.hero-nav-link:hover { color: #7AA6A9; }
.model-hero-scroll {
  position: absolute; bottom: 32px; right: 40px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #7AA6A9;
}
.model-hero-scroll .line { width: 1px; height: 32px; background: #7AA6A9; animation: scroll-pulse 1.8s ease-in-out infinite; }
@keyframes scroll-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (max-width: 700px) {
  /* Video becomes a normal-flow element sized to its own aspect ratio
     (matches the real 1920x1080 source) instead of an absolutely-positioned
     layer stretched to fill a locked 100vh section — with the box and video
     ratio identical, cover fit needs zero crop and leaves zero letterbox
     margin. Text (already static/flowing on mobile) follows below it, so the
     100px top padding that used to shove it clear of the tall video area
     isn't needed any more, and the darkening scrim (built for text sitting
     ON TOP of the video) isn't either. */
  .model-hero { min-height: 0; }
  .model-hero-video { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; }
  .model-hero::after { display: none; }
  .model-hero-content { position: static; max-width: none; padding: 14px 24px 0; }
  .model-hero-headline { font-size: clamp(24px, 9vw, 34px); }
  .model-hero-cta-corner { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 12px 0 16px 24px; }
  .hero-nav-link { font-size: 13px; letter-spacing: 1.5px; }
  .model-hero-scroll { display: none; }
}

/* ---------- Model page: 3D viewer stage (used standalone on the configurator page) ---------- */
.viewer-stage { position: relative; max-width: 1100px; margin: 0 auto; }
.viewer-stage model-viewer { width: 100%; height: 68vh; display: block; background: #14181A; border-radius: 10px; --poster-color: transparent; }
.viewer-placeholder {
  width: 100%; height: 68vh; border-radius: 10px;
  background-image: repeating-linear-gradient(135deg, #14181A, #14181A 10px, #1A1F21 10px, #1A1F21 20px);
  display: flex; align-items: center; justify-content: center;
}
.viewer-placeholder span { font-family: var(--font-ui); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: #4E5C5C; }
.viewer-config-title {
  position: absolute; z-index: 1; top: 24px; left: 28px;
  max-width: calc(100% - 56px);
  display: flex; flex-direction: column; gap: 2px;
  pointer-events: none;
}
.viewer-config-headline { display: flex; align-items: baseline; gap: 0.15em; }
.viewer-config-headline .num { font-family: var(--font-number); font-weight: 400; font-size: clamp(42px, 7vw, 78px); line-height: 1; color: #EDEEEA; }
.viewer-config-headline .name { font-family: var(--font-name); font-weight: 400; font-size: clamp(50px, 9vw, 106px); line-height: 1; color: #E3B36B; }
.viewer-config-title .type { font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #7AA6A9; margin-top: -2px; }
.viewer-loader {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #14181A; border-radius: 10px;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.viewer-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.viewer-loader img { width: 84px; height: auto; margin-bottom: 24px; animation: loader-pulse 1.8s ease-in-out infinite; }
.viewer-loader-pct { font-family: var(--font-ui); font-size: 11px; letter-spacing: 1px; color: #7AA6A9; margin-bottom: 14px; }
.viewer-progress-track { width: 200px; height: 2px; background: rgba(122,166,169,0.2); }
.viewer-progress-fill { height: 100%; width: 0%; background: #7AA6A9; transition: width 0.2s ease; }
.viewer-hint { text-align: center; margin: 14px auto 0; max-width: none; font-family: var(--font-ui); font-size: 11px; color: #7AA6A9; }
.config-switcher {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 20px;
}
.config-btn {
  display: flex; align-items: center; gap: 8px;
  background: rgba(6,8,9,0.55); backdrop-filter: blur(4px);
  border: 1px solid rgba(122,166,169,0.3); border-radius: 999px;
  padding: 8px 16px 8px 10px; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.5px; color: #D7DEDE;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.config-btn:hover { border-color: rgba(122,166,169,0.6); color: #EDEEEA; }
.config-btn.active { border-color: #7AA6A9; color: #EDEEEA; background: rgba(122,166,169,0.1); }
.config-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); flex-shrink: 0; }
.config-note { text-align: center; margin: 10px auto 0; max-width: none; font-family: var(--font-ui); font-size: 10.5px; font-style: italic; color: #4E5C5C; }
@media (max-width: 700px) {
  .viewer-stage model-viewer { height: 52vh; }
  .viewer-placeholder { height: 52vh; }
}
@media (max-width: 480px) {
  .viewer-config-headline .num { font-size: clamp(30px, 11vw, 42px); }
  .viewer-config-headline .name { font-size: clamp(34px, 13vw, 50px); }
}

/* ---------- Model page: full-bleed static image ---------- */
.model-full-image { position: relative; width: 100%; overflow: hidden; background: #0F1213; border-bottom: 1px solid rgba(122,166,169,0.1); }
.model-full-image img { width: 100%; height: auto; display: block; }
.model-full-image.placeholder { background-image: repeating-linear-gradient(135deg, #14181A, #14181A 10px, #1A1F21 10px, #1A1F21 20px); display: flex; align-items: center; justify-content: center; }
.model-full-image-pending { font-family: var(--font-ui); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: #4E5C5C; }
.model-full-image-caption {
  position: absolute; z-index: 1; right: 40px; top: 32px; margin: 0;
  font-family: var(--font-header);
  font-size: clamp(32px, 5vw, 64px); font-weight: 400; line-height: 1;
  letter-spacing: 0; color: #14181A; text-align: right; text-transform: uppercase;
}
@media (max-width: 700px) {
  .model-full-image-caption { right: 24px; top: 24px; }
}

/* ---------- Model page: statement panels ---------- */
.statement-panel { padding: 100px 40px; border-bottom: 1px solid rgba(122,166,169,0.1); }
.statement-panel.alt { background: #0F1213; }
.statement-inner { max-width: 900px; margin: 0 auto; }
.statement-eyebrow { font-family: var(--font-spec); font-size: 18px; letter-spacing: 1px; color: #7AA6A9; text-transform: uppercase; margin: 0 0 20px; }
.statement-text { font-family: var(--font-body); font-size: clamp(24px, 3.6vw, 42px); font-weight: 600; line-height: 1.25; color: #EDEEEA; margin: 0; letter-spacing: -0.3px; max-width: none; }
.statement-text.pending { color: #4E5C5C; font-style: italic; font-weight: 500; font-size: clamp(18px, 2.2vw, 26px); }
@media (max-width: 700px) { .statement-panel { padding: 64px 24px; } }

/* ---------- Model page: giant stat band ---------- */
.stat-band { background: #060809; padding: 90px 40px; text-align: center; }
.stat-band .statement-eyebrow { text-align: center; }
.stat-band-row { display: flex; flex-wrap: wrap; gap: 60px; justify-content: center; margin-top: 20px; }
.stat-band .stat { min-width: 220px; }
.stat-band .stat-num { font-family: var(--font-number); font-weight: 400; font-size: clamp(48px, 8vw, 100px); line-height: 1; color: #EDEEEA; letter-spacing: 0; }
.stat-band .stat-num .accent { color: #7AA6A9; }
.stat-band .stat-label { font-family: var(--font-ui); margin-top: 14px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #7AA6A9; }

/* ---------- Model page: cinematic evidence grid ---------- */
.evidence-strip { padding: 36px 0 100px; background: #060809; border-bottom: 1px solid rgba(122,166,169,0.1); }
.evidence-strip .statement-inner { max-width: none; padding: 0 40px; margin-bottom: 20px; }
.evidence-strip .statement-eyebrow { font-size: 22px; letter-spacing: 1px; }
.evidence-grid { column-count: 3; column-gap: 4px; padding: 0 4px; }
.evidence-grid button { display: block; width: 100%; padding: 0; margin: 0 0 4px; border: none; cursor: zoom-in; background: none; break-inside: avoid; }
.evidence-grid img { width: 100%; height: auto; display: block; filter: grayscale(15%) contrast(1.08); transition: filter 0.3s, transform 0.3s; }
.evidence-grid button:hover img { filter: grayscale(0%) contrast(1.15); transform: scale(1.02); }
@media (max-width: 900px) { .evidence-grid { column-count: 2; } }
@media (max-width: 560px) { .evidence-grid { column-count: 1; } }

/* ---------- Model page: CTA band ---------- */
.model-cta-band { padding: 110px 40px; text-align: center; background: linear-gradient(180deg, #0B0D0E 0%, #14181A 100%); }
.model-cta-band .statement-text { margin-bottom: 32px; }

/* ---------- Back link (non-nav pages) ---------- */
.back-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #7AA6A9;
  text-decoration: none;
  margin-bottom: 20px;
}
.back-link:hover { color: #EDEEEA; }