/* ========= Reset ========= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@400;500&family=Roboto+Mono:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap');
/* Global canvas — pure black base */
html, body {
  background: #000 !important;
  color: #fff; /* default text */
  min-height: 100%;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0}

/* ========= Tokens ========= */
:root{
  --black:#000;
  --ink:#0B0B0B;
  --white:#fff;
  --muted:rgba(255,255,255,.80);
  --line:rgba(255,255,255,.10);
  --silver:#C0C0C0;
  --ember:#ffffff;
  --pad-x:clamp(16px,4vw,48px);
  --e-luxe:cubic-bezier(.20,.70,.20,1);
}

/* ========= Base ========= */
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--black);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Utility */
.container{width:min(1100px,92%);margin-inline:auto}
.hidden{display:none !important}

/* Placeholder for future full-bleed scene */
#app{min-height:100svh;display:grid;place-items:center}
/* ===== Minimal top bar ===== */
.nav{
  position: fixed; inset: 0 0 auto 0; height: 72px;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 0 var(--pad-x);
  z-index: 10; background: transparent;
}


.brand{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px; letter-spacing: .04em;
}


/* ===== Hero scene ===== */

/* ===== Hero scene (true fullscreen video) ===== */
/* ===== Hero: true fullscreen, no zoom, centered text ===== */
.hero{
  position: relative;
  width: 100%;
  height: 100svh;            /* stable fullscreen incl. mobile toolbars */
  overflow: hidden;

  /* keep content centered */
  display: grid;
  place-items: center;
}

.hero-video{
  position: absolute;
  inset: 0;                  /* top:0 right:0 bottom:0 left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;         /* fills without distortion */
  object-position: center;   /* prevents weird off-center crops */
  z-index: 0;
}

.hero-overlay{
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 50% 45%,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,.85) 100%);
  pointer-events: none;
}
.hero-dim{
  position: absolute; inset:0; background:#000; opacity:0; z-index:2; pointer-events:none;
}
.hero-content{
  position: relative; z-index: 3; text-align: center; padding: 0 20px;
  max-width: 1100px;
}
.headline{
  font-family: 'Roboto Mono', monospace;
  font-size: clamp(35px, 6vw, 100px);
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px;
}
.subhead{
  font-family: 'Roboto Mono', monospace;
  font-size: clamp(12px, 1.5vw, 16px);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 28px;
}


/* badges */

/* responsive tweaks */
@media (max-width: 768px){
  .nav{ height: 64px }
  .inquire-btn{ display: none }        /* CTA already in hero */
  .trust-badges{ bottom: 16px; gap: 12px; font-size: 10px }
}
/* overlays stay above video */
.hero-overlay{ z-index: 1; }
.hero-dim{ z-index: 2; }
.hero-content{ z-index: 3; }  /* text stays centered */
.trust-badges{ z-index: 3; }/* Headlines + Logo */
.headline,
.brand,
.section-head {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Body copy */
body,
.subhead,
.about-copy,
.contact p {
  font-family: 'Roboto Mono', monospace;
}

/* Technical + CTAs */
.inquire-btn,
.pill,
.quick,
.inq-field span
 {
  font-family: 'Roboto Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
}
/* ===== Chevron bounce (fixed) ===== */
/* CTA group becomes the anchor */
.hero-ctas { position: relative; padding-bottom: 72px; } /* room for bounce */

/* Chevron sits exactly below the CTA, centered */
.hero-chevron{
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);   /* just below the button */
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

/* Visual chevron */
.hero-chevron .chev-wrap{ display:inline-block; will-change: transform, opacity; }
.hero-chevron .chev{
  display:block; width:18px; height:18px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform: rotate(-45deg); /* shape only */
  opacity: 0;                /* JS controls opacity */
}
/* ===== LAYOUT RESET (keeps chevron as-is) ===== */

/* 1) Keep hero perfectly centered */
.hero{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

/* 2) Hero content: center, no accidental offsets */
.hero-content{
  position: relative;              /* anchor for anything absolute INSIDE */
  max-width: 1100px;
  width: min(1100px, 92vw);
  padding: 0 20px;
  margin: 0 auto;
  text-align: center;
  z-index: 3;
}

/* 3) Headline / subhead / CTA spacing (tight, premium) */
.headline{ margin: 0 0 5px !important; }
.subhead{  margin: 0 0 28px !important; }
.hero-ctas{
  position: static !important;     /* no absolute anchors here */
  padding: 0 !important;           /* kill any leftover padding-bottom */
  margin: 0 !important;
  display: flex; justify-content: center; gap: 20px;
}

/* 4) Trust badges fixed to bottom (won’t push content) */
/* Micro-lines: bottom whisper style */

/* 5) Video + overlays (for completeness) */
.hero-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.hero-overlay{ position: absolute; inset: 0; z-index: 1; }
.hero-dim{ position: absolute; inset: 0; z-index: 2; opacity: 0; }

/* 6) Nuke any stray transforms that could shift layout */
.hero-content, .hero-ctas, .headline, .subhead{
  translate: none !important;
}

/* 7) Mobile tweaks */
@media (max-width: 768px){
  .hero-ctas{ gap: 12px; }
}
/* ensure hero is the positioning context */
.hero { position: relative; }

/* bottom whisper line — forced to top layer */
/* anchor hero for absolute children */
.hero { position: relative; }

/* micro-lines: bottom whisper, safely above the chevron */
/* Hero must be positioning context */
.hero { position: relative; }

/* Premium microtext: top-right, stacked, tiny, muted */
/* ===== Premium wipe (L→R), ultra-smooth ===== */
/* Base CTA */
.pill,
.inquire-btn {
  position: relative;
  padding: 0 26px;
  height: 44px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .4s ease, color .4s ease,  border-color .4s ease;
}

/* Hover: invert */
.pill:hover,
.pill:focus-visible,
.inquire-btn:hover,
.inquire-btn:focus-visible {
  background-color: #ffffff;   /* solid black */
  color: #fff;              /* text to white */
  border-color: #ffffff;       /* border blends with bg */
 /* micro-lift */
}

/* Active: settle down */
.pill:active,
.inquire-btn:active {
  transform: translateY(0);
}
/* Base CTA (rail style) */
.pill,
.inquire-btn {
  --cta-h: 44px;
  padding: 0 26px;
  height: var(--cta-h);
  border-left: 2px solid #fff;                        /* thicker sides */
  border-right: 2px solid #fff;
  border-top: 1px solid rgba(255,255,255,.6);         /* thinner top/bottom */
  border-bottom: 1px solid rgba(255,255,255,.6);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .4s ease, color .4s ease, transform .2s ease, border-color .4s ease;
}

/* Hover: invert cleanly */
.pill:hover,
.pill:focus-visible,
.inquire-btn:hover,
.inquire-btn:focus-visible {
  background-color: #ffffff;
  color: #000000;
  border-color: #fffcfc;   /* hide borders on black background */
  transform: translateY(-1px);
}

/* Active press */
/* === NAV BEHAVIOR: hairline over hero, solid after === */
.nav{
  position: fixed; inset: 0 0 auto 0;
  height: 72px;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 0 var(--pad-x);
  z-index: 1000;
  background: transparent;
  transition: background-color .35s ease, backdrop-filter .35s ease;
}

/* hairline (only visible when .nav is over the hero) */
/* hairline under nav, trimmed edges, ultra-thin */
/* NAV HAIRLINE — reveal from center outwards */
.nav::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  height:0.5px;
  width:0; /* start collapsed */
  background: rgba(215, 211, 211, 0.521);
  transform: translateX(-50%); /* anchor at center */
  opacity:0;
  transition:
    width 2.3s cubic-bezier(.22,.61,.36,1),
    opacity 0.6s ease;
}

/* After loader: hairline animates in */
body.herofx-go .nav::after{
  width:90%;
  opacity:1;
  transition-delay:1.0s; /* adjust: 0.8s–1.2s feels elegant */
}


/* State: over hero -> glassy + hairline on */
.nav.over-hero{
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(0px) saturate(120%);
}
.nav.over-hero::after{ opacity: 1; }

/* State: scrolled past hero -> sticky solid black, no hairline */
.nav.solid{
  background: #000;
  backdrop-filter: none;
}
.nav.solid::after{ opacity: 0; }

/* If your nav is shorter on mobile, adjust here */
@media (max-width: 768px){
  .nav{ height: 64px; }
}
/* ===== Site-wide veil fade ===== */
/* =========================
   Ferrari-style Page Loader with Logo
   ========================= */
.brand-loader {
  position: fixed;
  inset: 0;
  background: #000;
  display: grid;
  place-items: center;
  z-index: 9999;
  transition: opacity .8s ease, visibility .8s ease;
}

.brand-loader__logo {
  width: clamp(70px, 10vw, 100px);
  opacity: 0;
  animation: fadeUp .9s cubic-bezier(.22,.61,.36,1) .2s forwards;
}

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

.brand-loader.fade-out {
  opacity: 0;
  visibility: hidden;
}
/* ===== Premium text bring-up (scoped, no layout shifts) ===== */
/* We animate only when .textfx-run is on <body>. */

/* ===== Hero text animations (post-loader) ===== */
/* We use the same flags you already wired: body.herofx-init -> body.herofx-go */

/* HEADLINE — base-up mask reveal (no layout shift) */
.herofx-init .hero .headline{
  /* start fully masked from the bottom */
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  letter-spacing: 0.06em;      /* slightly airy at start */
  will-change: clip-path, -webkit-clip-path, letter-spacing;
}

/* Play: unmask upward + relax tracking */
.herofx-go .hero .headline{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition:
    clip-path 1.4s cubic-bezier(.22,.61,.36,1),
    -webkit-clip-path 1.4s cubic-bezier(.22,.61,.36,1),
    letter-spacing 1.4s cubic-bezier(.22,.61,.36,1);
  letter-spacing: 0.04em;
}

/* SUBHEAD — smooth left→right wipe (keep it readable, no bounce) */
.herofx-init .hero .subhead{
  clip-path: inset(0 100% 0 0);      /* fully clipped from the right */
  -webkit-clip-path: inset(0 100% 0 0);
  will-change: clip-path, -webkit-clip-path;
}
.herofx-go .hero .subhead{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.9s cubic-bezier(.22,.61,.36,1) 0.80s,
    -webkit-clip-path 0.9s cubic-bezier(.22,.61,.36,1) 0.80s;
}

/* CTA — slide up from below + fade */
.herofx-init .hero .hero-ctas{
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.herofx-go .hero .hero-ctas{
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.8s cubic-bezier(.22,.61,.36,1) 1.40s,
    transform 0.8s cubic-bezier(.22,.61,.36,1) 1.40s;
}

/* Mobile tune: slightly faster, smaller movement */
@media (max-width: 600px){
  .herofx-init .hero .hero-ctas{ transform: translateY(12px); }
  .herofx-go .hero .headline{ transition-duration: 0.9s; }
  .herofx-go .hero .subhead { transition-duration: 0.52s; }
  .herofx-go .hero .hero-ctas{ transition-duration: 0.42s; }
}

/* Reduced motion: show instantly in final state */
@media (prefers-reduced-motion: reduce){
  .hero .headline{
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
    letter-spacing: 0.04em !important;
  }
  .hero .subhead{
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
  }
  .hero .hero-ctas{
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ===== ABOUT (plaque-style, premium) ===== */
/* ===== About: video with aligned bottom-left/right text ===== */
/* ===== About: framed/letterboxed video (Bugatti-style) ===== */
.about-stage{
  padding: clamp(72px, 10vh, 120px) 0;
  background: #ffffff;
}

.stage{
  width: min(1400px, 200vw);          /* generous gutters */
  margin: 0 auto;
  position: relative;
  border-radius: 5px;               /* soft, premium corners */
  overflow: clip;                    /* clip overlay/veil to frame */
  /* precision hairline */
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset,
              0 8px 40px rgba(0,0,0,.45);
  /* fixed aspect ratio like a cinema frame */
  aspect-ratio: 21 / 9;              /* fallback handled below */
  background: #ffffff;
}

/* fallback if some older browser lacks aspect-ratio */
@supports not (aspect-ratio: 21 / 9){
  .stage::before{
    content:""; display:block; padding-top: calc(100% * 9 / 21);
  }
  .stage__media, .stage__overlay{ position:absolute; inset:0; }
}

.stage__media{
  position: absolute; inset: 0;
}
.stage__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  
  transform: scale(1.02);            /* tiny push-in for richness */
}

.stage__veil{
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.08) 60%, rgba(0,0,0,0)),
    radial-gradient(120% 120% at 50% 100%, rgba(0,0,0,.50), transparent 60%);
  pointer-events: none;
}

/* Overlay grid: bottom aligned, split left/right */
.stage__overlay{
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(20px, 3.2vw, 36px);
}

.stage__head{
  grid-column: 1; align-self: end; margin: 0;
  font-family: "Prata", serif;   /* CHANGED */
  font-weight: 300;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: .04em;
  line-height: 1.15;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(193, 190, 190, 0.592);
}

.stage__copy{
  grid-column: 2; align-self: end; margin: 0;
  justify-self: end; max-width: 52ch;
  font-family: "Roboto Mono", monospace;   /* CHANGED */
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.8;
  color: rgba(255,255,255,.86);
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}


/* Entrance polish (optional but premium) */
.about-stage .stage{
  opacity: 0; transform: translateY(16px);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
}
body.aboutstage-in .about-stage .stage{
  opacity: 1; transform: translateY(0);
}

/* Responsive: stack text on small screens */
@media (max-width: 900px){
  .stage__overlay{ grid-template-columns: 1fr; }
  .stage__copy{ grid-column: 1; justify-self: start; margin-top: 10px; max-width: 65ch; }
}
.stage__video{
  filter: brightness(.72) contrast(1.84) saturate(1.05);
  transform: scale(1.02);
}
/* ===== About text: blur + fade on scroll ===== */

/* Initial (before the section is in view) */
.about-stage .stage__head,
.about-stage .stage__copy{
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
  will-change: opacity, filter, transform;
}

/* Play state when the section intersects (triggered by JS) */
body.aboutstage-in .about-stage .stage__head{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity 1.2s cubic-bezier(.22,.61,.36,1) 0.3s,
    filter  1.2s cubic-bezier(.22,.61,.36,1) 0.3s,
    transform 1.2s cubic-bezier(.22,.61,.36,1) 0.3s;
}

body.aboutstage-in .about-stage .stage__copy{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity 1.4s cubic-bezier(.22,.61,.36,1) 0.8s,
    filter  1.4s cubic-bezier(.22,.61,.36,1) 0.8s,
    transform 1.4s cubic-bezier(.22,.61,.36,1) 0.8s;
}


/* Mobile: slightly faster + smaller shift */
@media (max-width: 900px){
  .about-stage .stage__head,
  .about-stage .stage__copy{ transform: translateY(6px); }
  body.aboutstage-in .about-stage .stage__head{ transition-duration: 0.60s; }
  body.aboutstage-in .about-stage .stage__copy{ transition-duration: 0.68s; }
}

/* Reduced motion: show instantly */
@media (prefers-reduced-motion: reduce){
  .about-stage .stage__head,
  .about-stage .stage__copy{
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

.pill{
  display: inline-flex;              /* flex container */
  align-items: center;               /* vertical center align */
  gap: 8px;                          /* spacing between icon and text */
}

.pill svg{
  width: 18px; height: 18px;         /* keep consistent size */
  flex-shrink: 0;                    /* prevent squish */
}
/* Make the button a flex row and normalize line metrics */
.pill, .inquire-btn{
  display: inline-flex;
  align-items: center;         /* vertical center */
  gap: 8px;                    /* space between icon and text */
  line-height: 1;              /* kill extra text baseline slack */
}

/* Remove SVG baseline wobble */
.pill svg, .inquire-btn svg{
  display: block;              /* no inline baseline */
  width: 18px; height: 18px;
  flex: 0 0 auto;
}

/* Ensure the text box itself has clean metrics */
.pill .label, .inquire-btn .label{
  display: inline-block;
  line-height: 1;
}
/* ===== Scoped, conflict-proof cinematic block ===== */
#cinematic{
  /* isolate this section from global layout / transforms */
  position: relative;
  margin: 0;
  padding: clamp(64px, 10vh, 96px) 0;
  background: #0b0b0b;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: visible;       /* the inner frame handles overflow */
  contain: content;        /* sandbox layout/paint for safety */
}

/* Centered “letterboxed” frame with fixed aspect (prevents stretch) */
#cinematic .cin-frame{
  position: relative;
  width: min(1200px, 92vw);
  margin: 0 auto;
  aspect-ratio: 16 / 9;            /* keeps height correct even while loading */
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 12px 48px rgba(0,0,0,.55);
}

/* Hard fallback if some browser lacks aspect-ratio */
@supports not (aspect-ratio: 16 / 9){
  #cinematic .cin-frame::before{
    content:""; display:block; padding-top:56.25%;
  }
  #cinematic .cin-frame{ height:auto; }
}

/* Neutralize global img/video rules and lock fit */
#cinematic .cin-video{
  position: absolute; inset: 0;
  display: block;                 /* kills baseline gaps */
  width: 100%; height: 100%;
  object-fit: cover;              /* no stretch; fill frame */
  object-position: center;
  background: #111;               /* visible while buffering */
  transform: translateZ(0);       /* GPU path */
  filter: brightness(.78) contrast(1.12) saturate(1.06);
  /* guard against global filters/transforms */
  mix-blend-mode: normal;
}

/* If ANY global selector targets video/img, this keeps ours safe */
#cinematic video, 
#cinematic img{
  max-width: none !important;
  height: auto;
  border: 0;
  margin: 0;
  padding: 0;
}

/* Optional: make the frame a bit taller on small phones */
@media (max-width: 768px){
  #cinematic .cin-frame{ aspect-ratio: 9 / 16; }
}
/* ===== Canvas-black seam killer (drop-in patch) ===== */

/* Always-black page base */
html, body {
  background: #000 !important;
  color: #fff;
}

/* Force all full-width sections to pure black with no edges */
#hero,
.about,
.about-stage,
#cinematic,
.process,
.process-timeline,
.world,
.contact-slab,
.signature-footer,
.contact,
.manifesto {
  background: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Remove any hairlines/borders we added earlier */
section + section { margin-top: 0 !important; }
.navbar::after,
.section-rule,
.hairline {
  display: none !important;
}

/* Nuke pseudo-element strips/veils that can draw faint bands */
section::before, section::after,
.wrap::before, .wrap::after,
.about::before, .about::after,
.process::before, .process::after,
#cinematic::before, #cinematic::after,
.world::before, .world::after,
footer::before, footer::after {
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Make common wrappers transparent */
.wrap,
.container,
.band,
.slab,
.panel {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Keep only framed elements black inside themselves (not full width) */
.proc-card .proc-media,
.timeline-stage,
.cin-frame {
  background: #000; /* inner frames only */
}
/* Overlay positioning above the video */
#cinematic .cin-frame{ position: relative; }
#cinematic .cin-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }

/* Grid overlay */
#cinematic .cin-overlay.pro{
  position: absolute; inset: 0;
  z-index: 2;
  display: grid; place-items: center;   /* centers the grid as a whole */
  padding: clamp(20px, 4vw, 32px);
  pointer-events: none;                 /* re-enable per element where needed */
}
#cinematic .cin-grid{
  pointer-events: auto;
  width: min(1200px, 95vw);
  display: grid;
  grid-template-columns: 1.1fr .15fr 1fr;  /* left form | gutter | right ctas */
  grid-auto-rows: auto;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

/* Headline spans across columns at top */
#cinematic .cin-headline{
  grid-column: 1 / -1;
  margin: 0 0 clamp(6px, 1.2vw, 10px);
  text-align: center;
  font-family: "Prata", serif;          /* or Montserrat */
  font-weight: 400;
  font-size: clamp(22px, 4.2vw, 44px);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* Form card (left) */
#cinematic .inq-form{
  grid-column: 1;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: clamp(16px, 2.6vw, 22px);
}
#cinematic .inq-form .fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.8vw, 16px);
}
#cinematic .inq-form .field.full{ grid-column: 1 / -1; }
#cinematic .inq-form .label{
  display:block;
  margin: 0 0 6px;
  font: 11px "Roboto Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
#cinematic .inq-form input,
#cinematic .inq-form textarea{
  width: 100%;
  padding: 12px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #fff;
  font: 14px/1.4 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
#cinematic .inq-form textarea{ resize: vertical; min-height: 120px; }
#cinematic .inq-form input:focus,
#cinematic .inq-form textarea:focus{
  border-color: #fff;
  background: rgba(255,255,255,.06);
}
#cinematic .inq-form .btn-submit{
  margin-top: clamp(10px, 1.6vw, 14px);
  height: 44px;
  padding: 0 22px;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-top: 1px solid rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(255,255,255,.6);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: 12px "Roboto Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .28s ease, color .28s ease, transform .2s ease;
}
#cinematic .inq-form .btn-submit:hover{ background:#fff; color:#000; transform: translateY(-1px); }

/* Right CTAs */
#cinematic .side-ctas{
  grid-column: 3;
  display: grid;
  gap: 12px;
  align-content: start;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  border-radius: 0px;
  padding: clamp(16px, 2.6vw, 22px);
}
#cinematic .cta-link{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
#cinematic .cta-link svg{ flex: 0 0 18px; opacity:.9; }
#cinematic .cta-link:hover{
  background:#fff; color:#000; border-color:#fff; transform: translateY(-1px);
}

#cinematic .location{
  margin-top: 6px;
  font: 12px "Roboto Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* Small “lower third” glow behind both cards for readability */
#cinematic .cin-grid::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: clamp(8px, 2vh, 16px);
  width: min(1200px, 96vw);
  height: clamp(160px, 28vh, 320px);
  background: radial-gradient(80% 120% at 50% 100%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
  z-index: -1;
}

/* Make the overlay grid positioning context absolute-safe */
#cinematic .cin-grid{ position: relative; }

/* Responsive: stack on narrow screens */
@media (max-width: 1000px){
  #cinematic .cin-grid{
    grid-template-columns: 1fr;
  }
  #cinematic .side-ctas,
  #cinematic .inq-form{
    grid-column: 1;
  }
}
/* Maserati-style Footer (full-bleed, pure black) */
.ft{
  background:#000;   /* PURE black */
  color:#fff;
  font-family:"Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing:.05em;
  width:100%;
  font-size: 2px;
}

.ft .ft-brand{
  display:flex; justify-content:center;
  padding:40px 0 20px;
}
.ft .ft-logo{
  height:50px; width:auto; opacity:.95;
}

.ft .ft-rule{
  width:100%;
  margin:0 auto;
  border:0;
  height:1px;
  background:rgb(255, 255, 255);
}

.ft .ft-grid{
  width:min(1200px,92%);
  margin:0 auto;
  padding:32px 0;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:40px;
  align-items:start;
}

.ft .ft-col{
  display:flex; flex-direction:column; gap:12px;
}
.ft .ft-col a{
  color:rgb(255, 255, 255);
  text-decoration:none;
  font-size:14px;
  transition: color .2s ease;
}
.ft .ft-col a:hover{ color:#fff; }
.ft .stay{
  font-size:13px;
  text-transform:uppercase;
  color:rgb(255, 255, 255);
  margin:0 0 8px;
}

/* Social icons */
.ft .socials{
  display:flex; gap:18px;
}
.ft .socials a{
  color:#fff;
  text-decoration:none;
  font-size:18px;
  transition:opacity .2s ease, transform .2s ease;
}
.ft .socials a:hover{
  opacity:.65;
  transform: translateY(-2px);
}

/* bottom row */

/* ===== Giant Brand Spotlight (scoped) ===== */
.footer {
  background: #000;
  color: #fff;
  font-family: 'Roboto Mono', monospace;
  font-weight: 200;
  width: 100%;
  padding: 60px clamp(16px, 6vw, 80px) 30px;
}

/* Top columns */
.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-col h4 {
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.footer-col p {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 16px;
}

/* CTA pill (your style) */
.footer-col .pill {
  --cta-h: 42px;
  padding: 0 24px;
  height: var(--cta-h);
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-top: 1px solid rgba(255,255,255,.6);
  border-bottom: 1px solid rgba(255,255,255,.6);
  background: transparent;
  color: #fff;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s ease;
}
.footer-col .pill:hover {
  background: #fff;
  color: #000;
}

/* Icons row */
.footer-icons {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  size: 15px;
}
.footer-icons a {
  color: #fff;
  transition: color .3s ease;
}
.footer-icons a:hover { color: #ccc; }

/* Mid section aligned under */
/* ==== PRATIK FOOTER — LAYOUT FIX (top/mid/bottom aligned) ==== */
.footer{
  background:#000;
  color:#fff;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  width:100%;
  padding:60px clamp(16px,6vw,80px) 30px;
}

/* shared container width for all rows */
.footer-top,
.footer-mid,
.footer-bottom{
  width:min(1500px,100%);
  margin:0 auto;
}

/* --- TOP (you can keep your existing styles; this is safe) --- */
.footer-top{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,3fr));
  gap:48px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-col h4{ font-size:16px; text-transform:uppercase; margin:0 0 10px; }
.footer-col p{ font-size:14px; color:rgba(255,255,255,.68); margin:0 0 16px; }

/* CTA pill (your thick L/R borders + thin T/B) */
.footer .pill{
  --cta-h:42px;
  height:var(--cta-h);
  padding:0 24px;
  border-left:2px solid #fff;
  border-right:2px solid #fff;
  border-top:1px solid rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.6);
  background:transparent;
  color:#fff;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, transform .2s ease;
}
.footer .pill:hover{ background:#fff; color:#000; transform:translateY(-1px); }

/* icons row in top-right */
.footer-icons{ display:flex; gap:16px; margin-top:12px; }
.footer-icons a{ color:#fff; display:inline-flex; transition:opacity .2s ease, filter .2s ease; }
.footer-icons a:hover{ opacity:.75; filter:drop-shadow(0 0 6px rgba(255,255,255,.18)); }

/* --- MID (3 columns aligned under TOP) --- */
.footer-mid{
  display:grid;
  grid-template-columns: 1fr;      /* mobile default */
  gap:18px 36px;
  padding:32px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (min-width:960px){
  .footer-mid{ grid-template-columns:repeat(3,1fr); }
}
.footer-mid h5{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.footer-mid ul{ list-style:none; padding:0; margin:0; }
.footer-mid li{ margin:6px 0; }
.footer-mid a{
  color:rgba(255,255,255,.68);
  text-decoration:none;
  font-size:14px;
  transition:color .2s ease;
}
.footer-mid a:hover{ color:#fff; }

/* --- BOTTOM (centered flag + line) --- */
.footer-bottom{
  padding:16px 0 34px;
  display:flex;
  justify-content:center;   /* center the whole row */
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,.62);
}
.footer-flag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
}
.footer-flag svg{ display:block; transform:translateY(1px); }  /* baseline tweak */

/* responsive niceties */
@media (max-width:520px){
  .footer{ padding-left:18px; padding-right:18px; }
}
/* shared container width */
.footer-top,
.footer-mid,
.footer-bottom{
  width:min(1200px,92%);
  margin:0 auto;
}

/* TOP grid (safe if already defined) */
.footer-top{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px,1fr));
  gap:48px;
  padding-bottom:40px;
  border-bottom:1px solid rgb(255, 255, 255);
}

/* If .footer-mid/.footer-bottom are INSIDE the top grid, make them span all cols */
.footer-top .footer-mid,
.footer-top .footer-bottom{
  grid-column: 1 / -1;
  width:100%;                     /* take full grid width */
}

/* MID row: 3 even columns under the top row */
.footer-mid{
  display:grid;
  grid-template-columns: 1fr;     /* mobile */
  gap:18px 36px;
  padding:32px 0;
  border-bottom:1px solid rgb(255, 255, 255);
  
}
@media (min-width:960px){
  .footer-mid{ grid-template-columns: repeat(3, 1fr); }
}
.footer-mid h5{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgb(255, 255, 255);
}
.footer-mid ul{ list-style:none; margin:0; padding:0; }
.footer-mid li{ margin:6px 0; }
.footer-mid a{ color:rgba(255,255,255,.68); text-decoration:none; }
.footer-mid a:hover{ color:#fff; }

/* BOTTOM row: perfectly centered flag + line */
.footer-bottom{
  padding:40px 15 50px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  text-align:center;
  font-size:13px;
  color:rgb(255, 255, 255);
}
.footer-bottom .footer-flag{
  display:inline-flex; align-items:bottom; gap:8px;
  text-transform:uppercase;
}

/* === FOOTER FONT SYSTEM (scoped to .footer only) === */
/* Imports: headings = Barlow Condensed, body = Inter, micro = Roboto Mono */


/* 1) Set footer font tokens */
.footer{
  --ft-head: "Roboto Mono", monospace, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ft-body: "Montserrat", sans-serif, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ft-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 2) Apply */
.footer,
.footer p,
.footer a,
.footer li,
.footer .pill{
  font-family: var(--ft-body);
  font-weight: 200;

}

.footer h4,
.footer h5{
  font-family: var(--ft-head);
  font-weight: 700;            /* bold, condensed like Porsche */
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* micro/utility text (© line, small labels) */
.footer-bottom,
.footer .micro,
.footer .fine,
.footer .legal,
.footer .country,
.footer-flag span{
  font-family: var(--ft-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* optional: tweak sizes to feel tighter/luxury */
.footer h4{ font-size: 18px; }
.footer h5{ font-size: 14px; }
.footer p, .footer a, .footer li{ font-size: 14px; }
.footer-bottom{ font-size: 12.5px; }
/* ===== Global section reveals (after #about) ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .16s cubic-bezier(.2,.7,.2,1),
    filter .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* optional, harmless */
:root { --header-h: 90px; }
[id] { scroll-margin-top: var(--header-h); }
/* ==== MOBILE QUICK ACCESSIBILITY PATCH (minimal tweaks) ==== */
@media (max-width: 820px){
  /* 1) Navigation / tap targets */
  .nav{ position: sticky; top: 0; height: 64px; backdrop-filter: blur(4px); background: rgba(0,0,0,.55); z-index: 50; }
  .inquire-btn{ height: 44px; padding: 0 18px; }

  /* 2) Hero: keep full-screen, make text fit, stack CTAs */
  #hero{ min-height: 100svh; }
  .headline{ font-size: clamp(28px, 10vw, 56px); line-height: 1.1; }
  .subhead{ font-size: clamp(11px, 3.2vw, 14px); letter-spacing: .12em; max-width: 80ch; margin-inline: auto; }
  .hero-ctas{ gap: 10px; flex-wrap: wrap; justify-content: center; }
  .hero-ctas .pill{ width: 100%; max-width: 320px; }

  /* 3) Videos: ensure containment; keep cinematic dim */
  .hero-video{ object-fit: cover; }
  .media-frame{ width: 92vw; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; }
  .media-frame > video{ object-fit: cover; }
  .hero-dim{ background: rgba(0,0,0,.38); }

  /* 4) About-over-video overlay: stack and bottom-align */
  #section2{ padding: 16px 0 24px; }
  #section2 .stage__overlay{
    position: absolute; inset: 0; display: grid; align-content: end;
    grid-template-columns: 1fr; gap: 10px; padding: 16px;
  }
  #section2 .stage__head{ font-size: clamp(22px, 6vw, 30px); }
  #section2 .stage__copy{ font-size: 13px; line-height: 1.6; }

  /* 5) “Tell us what you need” overlay: single column, big inputs, tappable CTAs */
  #cinematic .cin-grid{ display: grid; grid-template-columns: 1fr; gap: 14px; }
  .inq-form .fields{ display: grid; gap: 10px; }
  .inq-form input, .inq-form textarea{ width: 100%; font-size: 16px; } /* iOS: prevents zoom */
  .btn-submit, .cta-link{ height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .side-ctas{ display: grid; gap: 10px; }

  /* 6) Disable heavy desktop-only effects on touch (smoother) */
  #brand-spot .side-light, #brand-spot .spotlight{ display: none !important; }
  .hero-chevron{ display: none; }  /* save vertical space */
  .side-nav{ display: none; }      /* if you had dot nav */

  /* 7) Footer: stack columns nicely */
  .footer-top, .footer-mid{ grid-template-columns: 1fr; gap: 20px; }
  .footer-bottom{ justify-content: center; text-align: center; }
}

/* Small touch niceties for all phones */
@media (hover:none), (pointer:coarse){
  .reveal{ filter: blur(4px); }             /* lighter blur */
  .pill:hover{ transform: none; }           /* avoid jump on tap */
  a, button{ -webkit-tap-highlight-color: transparent; }
}
/* ==== MOBILE QUICK ACCESSIBILITY PATCH (minimal tweaks) ==== */
@media (max-width: 820px){
  /* 1) Navigation / tap targets */
  .nav{ position: sticky; top: 0; height: 64px; backdrop-filter: blur(4px); background: rgba(0,0,0,.55); z-index: 50; }
  .inquire-btn{ height: 44px; padding: 0 18px; }

  /* 2) Hero: keep full-screen, make text fit, stack CTAs */
  #hero{ min-height: 100svh; }
  .headline{ font-size: clamp(28px, 10vw, 56px); line-height: 1.1; }
  .subhead{ font-size: clamp(11px, 3.2vw, 14px); letter-spacing: .12em; max-width: 80ch; margin-inline: auto; }
  .hero-ctas{ gap: 10px; flex-wrap: wrap; justify-content: center; }
  .hero-ctas .pill{ width: 100%; max-width: 320px; }

  /* 3) Videos: ensure containment; keep cinematic dim */
  .hero-video{ object-fit: cover; }
  .media-frame{ width: 92vw; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; }
  .media-frame > video{ object-fit: cover; }
  .hero-dim{ background: rgba(0,0,0,.38); }

  /* 4) About-over-video overlay: stack and bottom-align */
  #section2{ padding: 16px 0 24px; }
  #section2 .stage__overlay{
    position: absolute; inset: 0; display: grid; align-content: end;
    grid-template-columns: 1fr; gap: 10px; padding: 16px;
  }
  #section2 .stage__head{ font-size: clamp(22px, 6vw, 30px); }
  #section2 .stage__copy{ font-size: 13px; line-height: 1.6; }

  /* 5) “Tell us what you need” overlay: single column, big inputs, tappable CTAs */
  #cinematic .cin-grid{ display: grid; grid-template-columns: 1fr; gap: 14px; }
  .inq-form .fields{ display: grid; gap: 10px; }
  .inq-form input, .inq-form textarea{ width: 100%; font-size: 16px; } /* iOS: prevents zoom */
  .btn-submit, .cta-link{ height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .side-ctas{ display: grid; gap: 10px; }

  /* 6) Disable heavy desktop-only effects on touch (smoother) */
  #brand-spot .side-light, #brand-spot .spotlight{ display: none !important; }
  .hero-chevron{ display: none; }  /* save vertical space */
  .side-nav{ display: none; }      /* if you had dot nav */

  /* 7) Footer: stack columns nicely */
  .footer-top, .footer-mid{ grid-template-columns: 1fr; gap: 20px; }
  .footer-bottom{ justify-content: center; text-align: center; }
}

/* Small touch niceties for all phones */
@media (hover:none), (pointer:coarse){
  .reveal{ filter: blur(4px); }             /* lighter blur */
  .pill:hover{ transform: none; }           /* avoid jump on tap */
  a, button{ -webkit-tap-highlight-color: transparent; }
}
/* === MOBILE FIXES === */

/* Navbar: stack or shrink */
@media (max-width: 768px) {
  .nav {
    grid-template-columns: 1fr; /* single column */
    text-align: center;
    height: auto;
    padding: 12px;
  }
  .brand {
    font-size: 22px;
  }
  .inquire-btn {
    margin-top: 8px;
    width: 100%;
  }
}

/* Hero: reduce text size */
@media (max-width: 600px) {
  .headline {
    font-size: clamp(22px, 8vw, 36px);
  }
  .subhead {
    font-size: clamp(10px, 3.5vw, 14px);
  }
}

/* About section: stack text */
@media (max-width: 900px) {
  .stage__overlay {
    grid-template-columns: 1fr !important;
    text-align: left;
  }
  .stage__copy {
    justify-self: start !important;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
  }
}

/* Contact section: stack form + CTAs */
@media (max-width: 1000px) {
  #cinematic .cin-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  #cinematic .inq-form,
  #cinematic .side-ctas {
    grid-column: 1 !important;
  }
}

/* Footer: stack columns */
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-col {
    align-items: center;
  }
}