/* ==========================================================================
   CERES — site.css
   Page-specific layout for index.html. Loaded AFTER design-system.css.
   Shared tokens/components (colors, type, buttons, cards, stats, forms)
   live in design-system.css — this file only lays them out on the page.
   ========================================================================== */

/* NAV */
nav#nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  background:linear-gradient(to bottom, rgba(7,7,7,.92), transparent);
  transition:background .3s, padding .3s;
}
nav#nav.scrolled { background:rgba(7,7,7,.96); padding:15px var(--gutter); border-bottom:1px solid var(--border); }
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo img.nav-mark { height:32px; width:auto; display:block; }
.nav-logo img.nav-word { height:17px; width:auto; display:block; opacity:.95; }
nav#nav.scrolled .nav-mark { height:28px; }
nav#nav.scrolled .nav-word { height:15px; }
.nav-right { display:flex; align-items:center; gap:28px; }
.nav-link { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-70); text-decoration:none; transition:color .2s; }
.nav-link:hover { color:var(--ink); }
.nav-ctas { display:flex; align-items:center; gap:10px; }
.nav-cta-outline { font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-decoration:none; border:1px solid var(--border-2); border-radius:var(--r-control); padding:10px 18px; transition:all .25s var(--ease); }
.nav-cta-outline:hover { border-color:var(--ink); }
.nav-cta-fill { font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); text-decoration:none; background:var(--accent); border-radius:var(--r-control); padding:10px 18px; transition:all .25s var(--ease); }
.nav-cta-fill:hover { background:var(--accent-hi); }
.nav-burger { display:none; }

/* HERO */
.hero { position:relative; height:100vh; min-height:700px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:var(--black); }
.hero-media { position:absolute; inset:0; }
.hero-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero-grad { position:absolute; inset:0; background:linear-gradient(to top, var(--black) 4%, rgba(7,7,7,.32) 46%, rgba(7,7,7,.5) 100%); pointer-events:none; }
.hero-content { position:relative; z-index:2; padding:0 var(--gutter) var(--sp-8); max-width:920px; }
.hero-content .cs-eyebrow { display:inline-block; border-left:2px solid var(--accent); padding-left:14px; margin-bottom:26px; opacity:0; animation:fadeUp .8s ease .25s forwards; }
.hero-content h1 { margin-bottom:28px; opacity:0; animation:fadeUp .8s ease .4s forwards; }
.hero-content .hero-sub { font-size:17px; font-weight:300; color:var(--ink-70); line-height:1.75; max-width:540px; margin-bottom:40px; opacity:0; animation:fadeUp .8s ease .55s forwards; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; opacity:0; animation:fadeUp .8s ease .7s forwards; }
.hero-stats-row { display:flex; gap:var(--sp-9); flex-wrap:wrap; opacity:0; animation:fadeUp .8s ease .85s forwards; }
.hero-icons { position:relative; z-index:2; border-top:1px solid var(--border); padding:22px var(--gutter); background:rgba(7,7,7,.35); }

/* WATCH — walkthrough video panel (see-more, not autoplaying background video) */
.s-watch .video-panel { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--border); background:var(--black); cursor:pointer; }
.s-watch .video-panel img { width:100%; height:100%; object-fit:cover; display:block; }
.s-watch .video-panel iframe { display:block; background:var(--black); }
.video-panel-grad { position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 50%, rgba(7,7,7,.15) 0%, rgba(7,7,7,.55) 100%); pointer-events:none; }
.video-play {
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:50%; border:1.5px solid var(--accent);
  background:rgba(7,7,7,.55); backdrop-filter:blur(2px); color:var(--accent);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s var(--ease), background .2s;
}
.video-play svg { width:28px; height:28px; margin-left:4px; }
.video-play:hover { background:var(--accent); color:var(--accent-ink); transform:translate(-50%,-50%) scale(1.06); }

@keyframes fadeUp { from {opacity:0; transform:translateY(26px);} to {opacity:1; transform:translateY(0);} }

/* GALLERY STRIP (compact, mid-page) */
.gallery-strip { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3px; height:520px; }
.gallery-strip .iw { overflow:hidden; position:relative; cursor:pointer; }
.gallery-strip .iw img { width:100%; height:100%; object-fit:cover; transition:transform .9s ease; }
.gallery-strip .iw:hover img { transform:scale(1.05); }
.gallery-col { display:grid; grid-template-rows:1fr 1fr; gap:3px; }

/* PHILOSOPHY / INTRO */
.s-intro { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-9); align-items:center; }
.cert-badge { display:inline-flex; align-items:center; gap:14px; border:1px solid var(--border); padding:18px 26px; margin-top:var(--sp-6); border-radius:var(--r-control); }
.cert-icon { width:40px; height:40px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; font-size:12px; color:var(--accent-ink); flex-shrink:0; }
.cert-text { font-size:11px; line-height:1.5; color:var(--ink-46); }
.cert-text strong { display:block; color:var(--ink); font-weight:500; font-size:12.5px; margin-bottom:2px; }

/* FEATURES 01–06 */
.feat-head { border-top:1px solid var(--border); padding-top:var(--sp-7); margin-bottom:var(--sp-7); display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--border); }
.feat { background:var(--black); padding:42px 36px; transition:background .3s; }
.feat:hover { background:var(--card); }
.feat h4 { font-size:17px; font-weight:500; margin-bottom:12px; letter-spacing:.3px; }
.feat p { font-size:13px; line-height:1.7; color:var(--ink-46); }

/* SHOWCASE FULL IMG */
.s-showcase { position:relative; height:80vh; min-height:560px; overflow:hidden; display:flex; align-items:center; }
.s-showcase img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.5); }
.s-showcase .sc-grad { position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,7,7,.85) 0%, transparent 70%); }
.sc-content { position:relative; z-index:2; padding:0 var(--gutter); max-width:640px; }
.sc-content p { margin-top:var(--sp-5); }

/* SPECS */
.specs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); }
.specs-grid .cell { background:var(--dark); padding:38px 32px; transition:background .3s; }
.specs-grid .cell:hover { background:var(--card); }

/* STORY */
.s-story { display:grid; grid-template-columns:1fr 1.1fr; gap:var(--sp-9); align-items:center; }
.story-visual { position:relative; height:600px; overflow:hidden; }
.story-visual img { width:100%; height:100%; object-fit:cover; }
.story-visual::after { content:''; position:absolute; inset:0; border:1px solid var(--border); pointer-events:none; }
.story-quote { font-family:var(--font-body); font-style:italic; font-weight:300; font-size:22px; line-height:1.55; color:var(--ink); margin:28px 0; padding-left:22px; border-left:2px solid var(--accent); }
.story-sign { font-size:12px; letter-spacing:1px; color:var(--ink-46); margin-top:30px; }
.story-sign b { color:var(--ink); font-weight:500; display:block; font-size:13px; margin-bottom:2px; }

/* MODELS / RANGE */
.models-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.models-note { text-align:center; margin-top:var(--sp-7); font-size:13px; color:var(--ink-46); letter-spacing:.5px; }
.pkg-mentions { display:flex; gap:var(--sp-6); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-5); }
.pkg-mention { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-46); }
.pkg-mention b { color:var(--accent); }

/* FULL GALLERY GRID */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.gallery-grid .iw { position:relative; overflow:hidden; cursor:pointer; aspect-ratio:4/3; }
.gallery-grid .iw img { width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.gallery-grid .iw:hover img { transform:scale(1.06); }

/* CONFIGURATOR CTA */
.s-configurator { position:relative; overflow:hidden; padding:var(--sp-10) var(--gutter); text-align:center; background:var(--dark); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.s-configurator::before {
  content:''; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(60% 90% at 50% 0%, rgba(200,169,110,.10), transparent 70%);
  pointer-events:none;
}
.cfg-inner { position:relative; z-index:1; max-width:720px; margin:0 auto; }
.cfg-inner h2 { margin:20px 0 18px; }
.cfg-inner p { margin-bottom:var(--sp-6); }
.cfg-steps { display:flex; justify-content:center; gap:var(--sp-7); flex-wrap:wrap; margin:var(--sp-7) 0 var(--sp-6); }
.cfg-step { font-family:var(--font-mono); font-size:11px; color:var(--ink-46); letter-spacing:.06em; text-transform:uppercase; }
.cfg-step b { display:block; color:var(--accent); font-family:var(--font-display); font-size:26px; letter-spacing:.5px; margin-bottom:4px; }

/* DEALER STRIP */
.s-dealer { padding:64px var(--gutter); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:32px; }
.dealer-left { max-width:560px; }
.dealer-left h3 { margin:14px 0 12px; }
.dealer-left p { font-size:14px; color:var(--ink-70); line-height:1.7; }

/* CONTACT */
.s-contact { padding:80px var(--gutter); background:var(--dark); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:40px; }
.c-label { font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-46); margin-bottom:12px; font-family:var(--font-mono); }
.c-persons { display:flex; gap:48px; flex-wrap:wrap; }
.c-person .name { font-size:13px; font-weight:600; margin-bottom:6px; }
.c-person a { display:block; font-size:13px; color:var(--ink-70); text-decoration:none; line-height:1.8; transition:color .2s; }
.c-person a:hover { color:var(--accent); }

/* FOOTER */
footer { padding:34px var(--gutter); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-logo { display:flex; align-items:center; gap:10px; }
.footer-logo img { display:block; }
footer p { font-size:11px; color:var(--ink-46); letter-spacing:.5px; }
.footer-links { display:flex; gap:18px; }
.footer-links a { font-size:11px; color:var(--ink-46); text-decoration:underline; }
.footer-links a:hover { color:var(--ink); }

/* LIGHTBOX */
.lb-overlay { position:fixed; inset:0; z-index:1000; background:rgba(5,5,5,.94); display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; }
.lb-overlay.open { display:flex; opacity:1; }
.lb-overlay img { max-width:92vw; max-height:88vh; object-fit:contain; box-shadow:0 20px 80px rgba(0,0,0,.6); }
.lb-close { position:absolute; top:24px; right:32px; width:44px; height:44px; border:1px solid var(--border-2); background:transparent; color:var(--ink); font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; border-radius:var(--r-control); }
.lb-close:hover { border-color:var(--ink); background:rgba(255,255,255,.08); }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:1px solid var(--border-2); background:rgba(0,0,0,.3); color:var(--ink); font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; user-select:none; border-radius:var(--r-control); }
.lb-nav:hover { border-color:var(--ink); background:rgba(255,255,255,.1); }
.lb-prev { left:24px; } .lb-next { right:24px; }
.lb-counter { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--ink-70); }

/* GDPR CONSENT BANNER */
.gdpr-banner {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:2000; max-width:640px; margin:0 auto;
  background:var(--card); border:1px solid var(--border-2); border-radius:var(--r-control);
  padding:22px 24px; box-shadow:var(--shadow-lift);
  display:none; flex-direction:column; gap:14px;
}
.gdpr-banner.show { display:flex; }
.gdpr-banner p { font-size:12.5px; color:var(--ink-70); line-height:1.6; }
.gdpr-banner a { color:var(--accent); text-decoration:underline; }
.gdpr-actions { display:flex; gap:10px; flex-wrap:wrap; }
.gdpr-actions button { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:11px 18px; border-radius:var(--r-control); cursor:pointer; }
.gdpr-accept { background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); }
.gdpr-reject { background:transparent; color:var(--ink-70); border:1px solid var(--border-2); }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media (max-width:900px) {
  nav#nav, nav#nav.scrolled { padding:16px var(--gutter-m); }
  .nav-right .nav-link { display:none; }
  .nav-cta-outline { display:none; }
  .nav-burger { display:block; }
  /* Mobile hero: the desktop treatment (full-bleed 100vh photo, text overlaid on top)
     crops a wide landscape shot down to a sliver on tall narrow screens — you'd lose
     the trailer entirely. Below 900px the photo instead sits as its own fixed-aspect
     block up top (shows the full width of the trailer, no crop-driven guesswork), and
     the headline moves into its own solid panel underneath instead of overlaying it. */
  .hero { height:auto; min-height:0; }
  .hero-media { position:relative; inset:auto; width:100%; aspect-ratio:3/2; }
  .hero-grad { display:none; }
  .hero-content { position:relative; padding:28px var(--gutter-m) 28px; background:var(--black); }
  .hero-content .cs-eyebrow { margin-bottom:14px; }
  .hero-content h1 { margin-bottom:16px; }
  .hero-content .hero-sub { margin-bottom:22px; font-size:15px; }
  .hero-actions { margin-bottom:0; gap:12px; }
  .hero-stats-row { display:none; }
  .hero-icons { padding:14px var(--gutter-m); }
  .cs-icon-row { gap:var(--sp-4) var(--sp-5); }
  .cs-icon-item .ico { width:18px; height:18px; }
  .cs-icon-item .tx { font-size:10px; }
  .video-play { width:64px; height:64px; }
  .video-play svg { width:22px; height:22px; }
  .gallery-strip { height:340px; grid-template-columns:1.5fr 1fr; }
  .gallery-strip .gallery-col:last-child { display:none; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .s-intro, .s-story { grid-template-columns:1fr; gap:40px; }
  .story-visual { height:360px; order:-1; }
  .story-quote { font-size:19px; }
  .feat-grid { grid-template-columns:1fr; }
  .s-showcase { height:60vh; }
  .sc-content { padding:0 var(--gutter-m); }
  .specs-grid { grid-template-columns:repeat(2,1fr); }
  .models-grid { grid-template-columns:1fr; }
  .s-dealer, .s-contact { padding:56px var(--gutter-m); }
  footer { padding:24px var(--gutter-m); }
  .cfg-steps { gap:var(--sp-5); }
}