/* ============================================================
   Payne Detailing Group — v3 Design System
   "Ivory & Gold" — light luxury automotive, motion-forward
   ============================================================ */

:root{
  --bg:#faf7f2;                 /* main page background — warm ivory white */
  --bg-alt:#f2ebdf;              /* alternating section background */
  --panel:#ffffff;               /* card / panel surface */
  --glass: rgba(24,20,14,0.035);
  --glass-border: rgba(24,20,14,0.12);
  --line: rgba(156,117,48,0.28);
  --gold:#9c7530;                 /* text / icon gold — AA-legible on light bg */
  --gold-bright:#c9a253;          /* fills, borders, decorative gold */
  --gold-dim: rgba(156,117,48,0.30);
  --ink:#18140f;                  /* primary text color */
  --muted: rgba(24,20,15,0.64);
  --muted-2: rgba(24,20,15,0.44);
  --line-soft: rgba(24,20,15,0.09);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-width:320px;
}
h1,h2,h3,.serif{ font-family:'Cormorant Garamond', serif; font-weight:500; letter-spacing:0.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{ max-width:1220px; margin:0 auto; padding:0 32px; position:relative; z-index:2;}
.eyebrow{
  text-transform:uppercase; letter-spacing:0.28em; font-size:11px; color:var(--gold);
  font-weight:500;
}
.btn{
  display:inline-block; padding:16px 36px; border:1px solid var(--gold);
  color:var(--ink); text-transform:uppercase; letter-spacing:0.18em; font-size:11.5px;
  font-weight:500; transition:all .4s var(--ease); background:transparent; cursor:pointer;
  position:relative; overflow:hidden;
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; background:var(--gold-bright); transform:translateY(101%);
  transition:transform .45s var(--ease); z-index:1;
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:var(--ink); }
.btn-solid{ background:var(--gold-bright); color:var(--ink); border:1px solid var(--gold-bright); }
.btn-solid::before{ background:transparent; }
.btn-solid:hover{ color:var(--ink); opacity:0.82; }
.divider{ width:56px; height:1px; background:var(--gold); margin:22px 0; }
.divider.center{ margin:22px auto; }

section{ padding:150px 0; position:relative; }
section.tight{ padding:100px 0; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:1; transform:translateY(0); }
.reveal-in{ opacity:1; transform:translateY(0); transition:opacity 1s var(--ease), transform 1s var(--ease); }

/* ---------- glass panel ---------- */
.glass{
  background:var(--panel);
  border:1px solid var(--glass-border);
  box-shadow:0 20px 60px rgba(24,20,14,0.06);
}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 48px; padding-top:max(26px, env(safe-area-inset-top));
  padding-left:max(48px, env(safe-area-inset-left)); padding-right:max(48px, env(safe-area-inset-right));
  transition:all .4s var(--ease);
  background:linear-gradient(to bottom, rgba(250,247,242,0.92), rgba(250,247,242,0));
}
header.scrolled{ background:rgba(250,247,242,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:16px 48px; padding-top:max(16px, env(safe-area-inset-top)); padding-left:max(48px, env(safe-area-inset-left)); padding-right:max(48px, env(safe-area-inset-right)); border-bottom:1px solid var(--line); box-shadow:0 4px 24px rgba(24,20,14,0.05); }
.logo-mark{ display:flex; align-items:center; gap:12px; }
.logo-mark img{ height:38px; width:auto; }
.logo{ font-family:'Cormorant Garamond', serif; font-size:20px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink); }
.logo span{ color:var(--gold); }
nav ul{ list-style:none; display:flex; gap:38px; }
nav a{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.15em; color:var(--muted); transition:color .3s; position:relative; padding-bottom:4px;}
nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .35s var(--ease); }
nav a:hover{ color:var(--gold); }
nav a:hover::after, nav a.active::after{ width:100%; }
nav a.active{ color:var(--gold); }
.nav-cta{ display:flex; align-items:center; gap:30px; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; z-index:210; padding:10px; margin:-10px;}
.menu-toggle span{ width:22px; height:1px; background:var(--ink); display:block; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.menu-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---- mobile nav: dropdown panel from under the header, not a full-screen
   takeover — quicker to scan, and the page underneath stays visible so it
   reads as "menu open" rather than "new screen". ---- */
.mobile-nav-scrim{
  position:fixed; inset:0; background:rgba(20,16,10,0.28); z-index:198;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.mobile-nav-scrim.open{ opacity:1; pointer-events:all; }
.mobile-nav{
  position:fixed; top:0; left:0; right:0; z-index:199;
  background:rgba(250,247,242,0.98); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  box-shadow:0 20px 50px rgba(24,20,14,0.14);
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:96px 24px 28px;
  padding-top:max(96px, calc(70px + env(safe-area-inset-top)));
  padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right));
  transform:translateY(-100%); opacity:0; pointer-events:none;
  transition:transform .38s var(--ease), opacity .3s var(--ease);
  max-height:100vh; overflow-y:auto;
}
.mobile-nav.open{ transform:translateY(0); opacity:1; pointer-events:all; }
/* Tiles, matching the .product-card / bento-card language used elsewhere
   on the site, rather than an underlined link list. */
.mobile-nav a:not(.btn){
  font-family:'Cormorant Garamond',serif; font-size:19px; color:var(--ink);
  padding:20px 8px; text-align:center; border:1px solid var(--line-soft);
  background:var(--panel); transition:background .3s, border-color .3s;
}
.mobile-nav a:not(.btn):active,
.mobile-nav a:not(.btn):hover{ background:#faf3e4; border-color:var(--gold-dim); }
.mobile-nav .btn{ grid-column:1 / -1; margin-top:8px; text-align:center; }

/* ---------- Garage Door Entrance (click-to-enter) ---------- */
/* The door itself (.garage-door, below) is the only opaque surface here —
   deliberately kept dark/cinematic regardless of site theme, since it's a
   literal metal garage door, not a page background. This outer wrapper stays
   transparent so that as the door lifts, the real page underneath is what
   gets revealed immediately (not a black gap before the site "loads in") —
   the page is already rendered behind it the whole time.
   Click-driven again (scroll-linked version was scrapped) — the door only
   lifts when the Enter button is pressed. */
.garage-enter{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:transparent; pointer-events:auto;
  transition:opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.garage-enter.closed{
  opacity:0; visibility:hidden; pointer-events:none;
}
.garage-door{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:56px;
  background:linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 50%, #1a1a1a 100%);
  transform:translateY(0); transition:transform 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow:inset 0 0 80px rgba(0,0,0,0.95), inset 0 0 200px rgba(0,0,0,0.6);
}
.garage-enter.lifted .garage-door{
  transform:translateY(-105%);
}
/* Horizontal garage door panel lines */
.garage-door::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(0,0,0,0.4) 60px, rgba(0,0,0,0.4) 64px, transparent 64px, transparent 120px);
  pointer-events:none; z-index:2;
}
/* Weathered/rust texture overlay */
.garage-door::after{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(200,140,80,0.08) 2px, rgba(200,140,80,0.08) 4px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 4px, rgba(180,100,60,0.06) 4px, rgba(180,100,60,0.06) 6px);
  opacity:0.6; pointer-events:none;
}
.garage-logo{
  position:relative; z-index:3; width:78%; max-width:300px;
}
.garage-logo img{
  width:100%; height:auto; filter:drop-shadow(0 10px 24px rgba(0,0,0,0.6));
}
.garage-btn{
  position:relative; z-index:10; padding:18px 52px; border:2px solid #f0d9a3;
  color:#f0d9a3; background:transparent; font-family:'Cormorant Garamond', serif;
  font-size:20px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  cursor:pointer; transition:all 0.4s var(--ease); user-select:none;
}
.garage-btn:hover{
  background:#f0d9a3; color:#08080a; box-shadow:0 0 40px rgba(240,217,163,0.4);
}
.garage-btn:active{ transform:scale(0.95); }

/* Rustic hanging shop light (dual-tube fluorescent fixture on cables, pull
   chain and junction box included — see inline SVG in the markup) — ambient
   flicker on the tubes while the door is up, shuts off (flicker-then-dark)
   the moment Enter is pressed, keyed off the same .lifted class the door
   transform already uses. */
.shop-light{
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:4;
  opacity:1;
}
.shop-light svg{ display:block; }
.shop-light-tubes{
  animation:shopLightFlicker 4.5s infinite ease-in-out;
  transform-origin:center;
}
@keyframes shopLightFlicker{
  0%, 100%   { opacity:1; }
  4%         { opacity:0.45; }
  6%         { opacity:1; }
  8%         { opacity:0.6; }
  10%        { opacity:1; }
  52%        { opacity:1; }
  54%        { opacity:0.4; }
  56%        { opacity:1; }
  70%        { opacity:0.75; }
  72%        { opacity:1; }
}
/* Shuts off in step with the door lift (same trigger, .lifted) — a few quick
   flickers then dark, rather than an abrupt disappearance. */
.garage-enter.lifted .shop-light{
  animation:shopLightShutoff 0.7s linear forwards;
}
@keyframes shopLightShutoff{
  0%   { opacity:1; }
  12%  { opacity:0.1; }
  24%  { opacity:0.85; }
  36%  { opacity:0.05; }
  50%  { opacity:0.6; }
  70%  { opacity:0.08; }
  100% { opacity:0; }
}
@media (max-width:640px){
  .shop-light svg{ width:200px; height:100px; }
}

/* ---------- HERO ---------- */
.hero{
  height:100vh; min-height:680px; display:flex; align-items:center; position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(250,247,242,0.85) 0%, rgba(244,236,221,0.75) 55%, rgba(250,247,242,0.85) 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:0.4; pointer-events:none;
  background-image: repeating-linear-gradient(115deg, rgba(24,20,15,0.02) 0px, rgba(24,20,15,0.02) 1px, transparent 1px, transparent 90px);
}
#hero-canvas{ position:absolute; top:0; right:0; width:56%; height:100%; z-index:2; opacity:0.6; mix-blend-mode:overlay;}
.hero-inner{ position:relative; z-index:2; max-width:450px; padding:48px 40px; margin-left:32px; margin-right:auto; background:rgba(14,11,8,0.92); border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.hero h1{ font-size:clamp(42px, 5.6vw, 78px); line-height:1.05; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,0.4); }
.hero h1 em{ font-style:italic; color:#c9a86a; }
.hero p{ margin-top:26px; color:rgba(255,255,255,0.9); font-size:16px; max-width:460px; text-shadow:0 1px 8px rgba(0,0,0,0.3); }
.hero-cta{ margin-top:44px; display:flex; gap:18px; flex-wrap:wrap; }
.hero-cta .btn:not(.btn-solid){ background:rgba(250,247,242,0.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hero-mobile-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:1; opacity:1;
  background:#000;
}
.scroll-cue{
  position:absolute; bottom:38px; left:64px;
  font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted-2);
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; z-index:2;
}
.scroll-cue::after{ content:""; width:1px; height:34px; background:linear-gradient(var(--gold), transparent); }

/* ---------- Panoramic parallax bands ---------- */
.panorama{
  height:78vh; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  margin-top:0; width:100vw; margin-left:calc(-50vw + 50%);
}
.panorama .layer{ position:absolute; inset:-10% -5%; will-change:transform; }
.pano-1{ background:
  radial-gradient(ellipse at 20% 30%, rgba(156,117,48,0.12), transparent 45%),
  radial-gradient(ellipse at 80% 70%, rgba(156,117,48,0.07), transparent 50%),
  linear-gradient(115deg, #f4ecdd, #f9f4ea 45%, #f4ecdd);
}
.pano-2{ background:
  repeating-linear-gradient(100deg, rgba(24,20,15,0.02) 0 2px, transparent 2px 140px);
}
.pano-3{ background: radial-gradient(circle at 50% 120%, rgba(156,117,48,0.15), transparent 60%); }
.panorama-caption{ position:relative; z-index:3; max-width:640px; padding:38px 40px; }

/* ---------- video-backed panorama bands ---------- */
/* Pushed brighter again + contrast eased down to lift shadow detail —
   footage was still reading too dark/muddy at the previous settings. */
.pano-video{ width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(0.97) brightness(1.28); }
.pano-overlay{
  background:linear-gradient(180deg, rgba(20,16,10,0.02) 0%, rgba(20,16,10,0.06) 55%, rgba(20,16,10,0.24) 100%);
  z-index:2;
}
/* Frosted light card behind the caption text so it stays legible regardless
   of what's happening in the video underneath, without needing a heavy tint. */
.panorama-caption{
  background:rgba(250,247,242,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.5); border-radius:2px;
  box-shadow:0 20px 50px rgba(20,16,10,0.18);
}

/* ---------- interactive video reel ---------- */
.reel{ height:86vh; min-height:560px; position:relative; overflow:hidden; display:flex; align-items:flex-end; }
.reel-video-wrap{ position:absolute; inset:0; z-index:0; }
.reel-video{ width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(0.98) brightness(1.24); transition:opacity .5s var(--ease); }
.reel-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,16,10,0.0) 0%, rgba(20,16,10,0.0) 40%, rgba(20,16,10,0.20) 80%, rgba(20,16,10,0.40) 100%);
}
.reel-content{ position:relative; z-index:2; width:100%; padding:26px 30px 30px; }
.reel-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px; margin-bottom:34px; }
.reel-head h2{ font-size:clamp(28px,4vw,46px); max-width:520px; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,0.5); }
.reel-caption{ text-align:right; }
.reel-caption .clip-title{ font-family:'Cormorant Garamond',serif; font-size:22px; color:#f0d9a3; }
.reel-caption .clip-veh{ font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.72); margin-top:4px; }
.reel-controls{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.reel-vehicles{ display:flex; gap:10px; flex-wrap:wrap; }
.reel-veh-btn{
  padding:12px 22px; border:1px solid rgba(255,255,255,0.35); background:rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:0.14em; font-size:10.5px;
  cursor:pointer; transition:all .35s var(--ease); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.reel-veh-btn:hover{ border-color:#f0d9a3; color:#fff; }
.reel-veh-btn.active{ border-color:#f0d9a3; color:#1a1408; background:#f0d9a3; }
.reel-nav{ display:flex; gap:10px; align-items:center; }
.reel-dots{ display:flex; gap:7px; }
.reel-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; transition:background .3s; border:none; padding:0; }
.reel-dot.active{ background:#f0d9a3; }
.reel-arrow{
  width:38px; height:38px; border:1px solid rgba(255,255,255,0.35); background:rgba(255,255,255,0.14);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.reel-arrow:hover{ border-color:#f0d9a3; color:#f0d9a3; }
@media (max-width: 760px){
  .reel{ height:auto; min-height:640px; padding:70px 0 40px; align-items:stretch; }
  .reel-head{ flex-direction:column; align-items:flex-start; }
  .reel-caption{ text-align:left; }
  .reel-arrow{ width:44px; height:44px; }
}
.panorama-caption .eyebrow{ display:block; margin-bottom:18px; }
.panorama-caption h2{ font-size:clamp(30px,4.4vw,54px); }
.panorama-caption p{ color:var(--muted); margin-top:20px; font-size:15.5px; }

/* ---------- INTRO / stats ---------- */
.intro{ text-align:center; }
.intro .wrap{ max-width:760px; }
.intro h2{ font-size:clamp(28px,3.6vw,42px); margin-top:10px; }
.intro p{ color:var(--muted); margin-top:24px; font-size:16px; }
.intro-stats{ display:flex; justify-content:center; gap:70px; margin-top:64px; flex-wrap:wrap; }
.stat b{ display:block; font-family:'Cormorant Garamond',serif; font-size:34px; color:var(--gold); font-weight:500; }
.stat span{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-2); }

/* ---------- BENTO / SERVICES GRID ---------- */
#services-teaser{ padding-bottom:60px; }
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:70px; }
#services-teaser .bento-card:nth-child(6){ display:none; }
.bento-card{
  grid-column:span 2; padding:44px 34px; border-radius:2px; position:relative; overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.bento-card:hover{ transform:translateY(-6px); border-color:var(--gold-dim); box-shadow:0 24px 50px rgba(24,20,14,0.10); }
.bento-card.wide{ grid-column:span 3; }
.bento-card.tall{ grid-row:span 2; }
.bento-num{ font-family:'Cormorant Garamond',serif; color:var(--gold); font-size:14px; letter-spacing:0.1em; }
.bento-card h3{ font-size:25px; margin-top:16px; }
.bento-card p{ color:var(--muted); font-size:14px; margin-top:14px; }
.bento-price{ margin-top:20px; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); }
/* Cards that are also cal.com booking links (Essential/Premium/Signature on
   the homepage teaser) — a subtle CTA that brightens on hover so the card
   reads as clickable without adding a second visible button. */
.bento-book{ display:block; cursor:pointer; }
.bento-cta{
  margin-top:14px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted-2); transition:color .35s var(--ease);
}
.bento-book:hover .bento-cta{ color:var(--gold-bright); }

/* ---------- BOOKING MODAL (cal.com iframe overlay) ---------- */
.booking-modal{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.booking-modal.open{ opacity:1; visibility:visible; }
.booking-modal-backdrop{
  position:absolute; inset:0; background:rgba(14,11,8,0.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.booking-modal-panel{
  position:relative; z-index:1; width:min(1180px, 94vw); height:min(840px, 88vh);
  background:var(--panel); border-radius:8px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.4);
  transform:translateY(16px) scale(0.98); transition:transform .35s var(--ease);
  overscroll-behavior:contain;
}
.booking-modal.open .booking-modal-panel{ transform:translateY(0) scale(1); }
.booking-modal-close{
  position:absolute; top:10px; right:14px; z-index:2; width:36px; height:36px;
  border:none; background:rgba(20,16,10,0.08); border-radius:50%; color:#181410;
  font-size:22px; line-height:1; cursor:pointer; transition:background .25s var(--ease);
  display:flex; align-items:center; justify-content:center;
}
.booking-modal-close:hover{ background:rgba(20,16,10,0.16); }
.booking-modal-panel iframe{ width:100%; height:100%; border:none; display:block; }
@media (max-width:760px){
  .booking-modal-panel{ width:100vw; height:100vh; height:100dvh; border-radius:0; }
}

/* ---------- EMERGENCY BANNER ---------- */
/* Kept as a deliberate dark contrast band — a common luxury-site device
   (Rolex/Porsche use this) to punctuate an otherwise light page with a bold CTA. */
.emergency{
  background: radial-gradient(ellipse at 30% 50%, rgba(201,168,106,0.14), transparent 60%), #14110c;
  text-align:center; color:#f4f0e8;
}
.emergency .wrap{ max-width:700px; }
.badge{
  display:inline-block; border:1px solid var(--gold-bright); color:var(--gold-bright); font-size:10px;
  letter-spacing:0.2em; text-transform:uppercase; padding:7px 16px; margin-bottom:26px;
}
.emergency h2{ font-size:clamp(30px,4vw,48px); color:#f4f0e8; }
.emergency p{ color:rgba(244,240,232,0.72); margin-top:22px; font-size:16px; }
.emergency .btn{ border-color:var(--gold-bright); color:#f4f0e8; }
.emergency .btn::before{ background:var(--gold-bright); }
.emergency .btn:hover{ color:#14110c; }
.emergency .btn-solid{ background:var(--gold-bright); color:#14110c; }

/* ---------- PROCESS ---------- */
.proc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:44px; margin-top:70px; }
.proc-step{ text-align:left; }
.proc-step .n{ font-family:'Cormorant Garamond',serif; font-size:48px; color:var(--gold); line-height:1; }
.proc-step h3{ font-size:20px; margin-top:20px; }
.proc-step p{ color:var(--muted); font-size:14px; margin-top:12px; }
/* Modifier for 6-item process grids (e.g. products.html exterior process) —
   a class instead of an inline style so the responsive breakpoints below
   can actually override it (inline styles beat external stylesheet rules
   regardless of media query, which was silently breaking this on mobile). */
.proc-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .proc-grid.cols-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .proc-grid.cols-3{ grid-template-columns:1fr; } }

/* ---------- BOOKING ---------- */
.booking{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; z-index:5; isolation:isolate; }
.booking-grid{ display:grid; grid-template-columns:1fr; gap:70px; align-items:start; }
.booking-info h2{ font-size:clamp(28px,3.6vw,42px); }
.booking-info p{ color:var(--muted); margin-top:20px; font-size:15.5px; }
/* Note: this box is NOT given the .reveal treatment — GSAP leaves a lingering
   inline transform on animated elements, and any transform on an ancestor of
   the Cal.com iframe/overlay breaks its internal positioning and causes it to
   render in the wrong place / overlap neighboring sections. Keep this element
   (and its ancestors) transform-free. */
.booking-embed{
  min-height:1000px; border:1px solid var(--glass-border); background:var(--panel);
  position:relative; overflow:auto; isolation:isolate; z-index:1;
  box-shadow:0 20px 60px rgba(24,20,14,0.08);
}
#cal-inline{ width:100%; height:1000px; max-width:100%; overflow:hidden; }
#cal-inline iframe{ width:100% !important; height:100% !important; border:0 !important; display:block; }
.booking-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px; gap:16px; color:var(--muted-2); font-size:13px;
}
.booking-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.booking-card{
  grid-column:span 1; padding:40px 28px; border-radius:2px; position:relative; overflow:hidden;
  border:1px solid var(--glass-border); background:var(--panel); box-shadow:0 10px 30px rgba(24,20,14,0.05);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.booking-card:hover{ transform:translateY(-6px); border-color:var(--gold-dim); box-shadow:0 24px 50px rgba(24,20,14,0.10); }
.booking-num{ font-family:'Cormorant Garamond',serif; color:var(--gold); font-size:14px; letter-spacing:0.1em; }
.booking-card h3{ font-size:22px; margin-top:14px; }
.booking-card p{ color:var(--muted); font-size:14px; margin-top:12px; margin-bottom:24px; }
.btn-booking{ display:inline-block; font-size:12px; }
@media (max-width: 900px){
  .booking-embed, #cal-inline{ min-height:850px; height:850px; }
  .booking-tiles{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px){
  .booking-tiles{ grid-template-columns:1fr; }
  .booking-card{ padding:32px 24px; }
}

/* ---------- GALLERY (legacy tile classes removed — see .reel below) ---------- */

/* ---------- FOUNDER ---------- */
.founder .wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:center; }
.founder-photo{
  aspect-ratio:4/5; background:linear-gradient(160deg,#f2ebdf,#faf7f2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted-2); font-size:11px;
  letter-spacing:0.15em; text-transform:uppercase; text-align:center; padding:20px;
  overflow:hidden; position:relative; box-shadow:0 24px 60px rgba(24,20,14,0.10);
}
.founder-photo img{
  width:100%; height:100%; object-fit:cover; animation:boomerang 3.5s ease-in-out infinite;
}
@keyframes boomerang{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}
.founder-text .eyebrow{ margin-bottom:4px; }
.founder-text h2{ font-size:clamp(26px,3.4vw,38px); }
.founder-text p{ color:var(--muted); margin-top:22px; font-size:15.5px; }
.signature{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold); font-size:24px; margin-top:30px; }
.timeline{ margin-top:40px; display:flex; flex-direction:column; gap:0; }
.timeline-item{ display:grid; grid-template-columns:90px 1fr; gap:20px; padding:20px 0; border-top:1px solid var(--line-soft); }
.timeline-item:first-child{ border-top:none; }
.timeline-item .yr{ color:var(--gold); font-family:'Cormorant Garamond',serif; font-size:17px; }
.timeline-item h4{ font-size:15.5px; font-weight:500; }
.timeline-item p{ color:var(--muted); font-size:13.5px; margin-top:4px; }

/* ---------- PRODUCTS ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:70px; }
.product-grid .product-card:last-child:nth-child(3n+1){ grid-column:1 / -1; }
.product-card{ background:var(--panel); padding:46px 36px; transition:background .4s; }
.product-card:hover{ background:#faf3e4; }
.product-card .mark{ font-family:'Cormorant Garamond',serif; font-size:26px; color:var(--gold); }
.product-card h3{ font-size:20px; margin-top:14px; }
.product-card p{ color:var(--muted); font-size:14px; margin-top:12px; }
.product-card .eyebrow{ color:var(--gold); font-size:10.5px; letter-spacing:0.22em; margin-top:0; }

/* ---------- CONTACT ---------- */
.contact{ background:var(--bg-alt); border-top:1px solid var(--line); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.contact-info h2{ font-size:clamp(28px,3.6vw,42px); }
.contact-info p{ color:var(--muted); margin-top:20px; font-size:15.5px; max-width:420px; }
.info-row{ margin-top:38px; display:flex; flex-direction:column; gap:22px; }
.info-item .k{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); }
.info-item .v{ margin-top:6px; font-size:15px; color:var(--ink); word-break:break-word; }
.social-row{ display:flex; gap:20px; margin-top:40px; flex-wrap:wrap; }
.social-row a{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:4px; color:var(--muted); }
.social-row a:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- CONTACT — emergency box + detail grid ----------
   Pulled out of inline styles on contact.html so the phone number and
   two-column layout actually respond at small widths (inline styles can't
   be overridden by a media query without !important). */
.emergency-box{ text-align:center; padding:40px; border:2px solid var(--gold-bright); border-radius:8px; }
.emergency-box .label{ font-size:13px; letter-spacing:2px; color:var(--gold); font-weight:500; margin-bottom:16px; text-transform:uppercase; }
.emergency-phone{
  display:inline-block; font-size:clamp(26px,7vw,48px); font-weight:600; color:var(--gold-bright);
  text-decoration:none; margin-bottom:20px; font-family:'Cormorant Garamond',serif; word-break:break-word;
}
.emergency-box p{ color:var(--muted); margin-bottom:24px; }
.contact-details-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; text-align:center; }
@media (max-width:480px){
  .emergency-box{ padding:26px 18px; }
  .contact-details-grid{ grid-template-columns:1fr; gap:26px; }
}

form{ display:flex; flex-direction:column; gap:22px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
label{ font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-2); display:block; margin-bottom:9px; }
input, select, textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-soft);
  color:var(--ink); font-family:'Inter',sans-serif; font-size:14.5px; font-weight:300;
  padding:10px 2px; outline:none; transition:border-color .3s;
}
input:focus, select:focus, textarea:focus{ border-color:var(--gold); }
select{ appearance:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%239c7530"/></svg>'); background-repeat:no-repeat; background-position:right 4px center; }
select option{ background:#ffffff; color:var(--ink); }
textarea{ resize:vertical; min-height:70px; }
.form-note{ font-size:12px; color:var(--muted-2); margin-top:-6px; }
.addon-row{ display:flex; flex-wrap:wrap; gap:14px 26px; }
.addon-check{
  display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:0.02em;
  text-transform:none; color:var(--ink); cursor:pointer; margin-bottom:0;
}
.addon-check input{ width:auto; accent-color:var(--gold); cursor:pointer; }

footer{ padding:60px 0 34px; text-align:center; border-top:1px solid var(--line); background:var(--bg-alt); }
footer .logo{ justify-content:center; display:flex; }
footer p{ color:var(--muted-2); font-size:12px; margin-top:18px; }
.foot-links{ display:flex; justify-content:center; gap:28px; margin-top:26px; flex-wrap:wrap; }
.foot-links a{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.foot-links a:hover{ color:var(--gold); }
.social-links{ display:flex; justify-content:center; gap:20px; margin-top:24px; flex-wrap:wrap; }
.social-links a{ font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-2); }
.social-links a:hover{ color:var(--gold); text-decoration:underline; }

/* ---------- CHATBOT ---------- */
#chatbot-launcher{
  position:fixed; bottom:max(28px, env(safe-area-inset-bottom)); right:max(28px, env(safe-area-inset-right)); z-index:300;
  width:60px; height:60px; border-radius:50%; background:var(--gold-bright); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 8px 30px rgba(156,117,48,0.30); border:none; transition:transform .3s var(--ease);
}
#chatbot-launcher:hover{ transform:scale(1.08); }
#chatbot-launcher svg{ width:26px; height:26px; }
#chatbot-panel{
  position:fixed; bottom:max(100px, calc(72px + env(safe-area-inset-bottom))); right:max(28px, env(safe-area-inset-right)); width:340px; max-width:88vw; height:440px; z-index:300;
  border-radius:4px; display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(16px) scale(0.98); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  background:rgba(255,255,255,0.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border); box-shadow:0 24px 60px rgba(24,20,14,0.18);
}
#chatbot-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.chat-head{ padding:18px 20px; border-bottom:1px solid var(--glass-border); }
.chat-head .eyebrow{ display:block; }
.chat-head h4{ font-family:'Cormorant Garamond',serif; font-size:19px; margin-top:4px; color:var(--ink); }
.chat-head p{ font-size:11.5px; color:var(--muted-2); margin-top:4px; }
.chat-body{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.chat-msg{ font-size:13px; line-height:1.5; max-width:88%; padding:10px 14px; border-radius:2px; }
.chat-msg.bot{ background:var(--bg-alt); color:var(--ink); align-self:flex-start; }
.chat-msg.user{ background:var(--gold-bright); color:var(--ink); align-self:flex-end; }
.chat-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; }
.chat-quick button{
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; padding:7px 12px;
  border:1px solid var(--glass-border); background:transparent; color:var(--muted); cursor:pointer; transition:.3s;
}
.chat-quick button:hover{ border-color:var(--gold); color:var(--gold); }
.chat-input-row{ display:flex; border-top:1px solid var(--glass-border); }
.chat-input-row input{ flex:1; border:none; padding:14px 16px; font-size:13px; background:transparent; color:var(--ink); }
.chat-input-row button{ background:var(--gold-bright); color:var(--ink); border:none; padding:0 18px; cursor:pointer; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; }

/* ---------- Page hero (sub pages) ---------- */
.page-hero{
  padding:180px 0 100px; text-align:center;
  background: radial-gradient(ellipse at 50% 0%, rgba(156,117,48,0.10), transparent 60%);
}
.page-hero h1{ font-size:clamp(38px,5vw,64px); }
.page-hero p{ color:var(--muted); margin-top:18px; max-width:560px; margin:18px auto 0; }

.section-head{ text-align:center; max-width:640px; margin:0 auto 70px; }
.section-head h2{ font-size:clamp(28px,3.6vw,44px); margin-top:10px; }
.section-head p{ color:var(--muted); margin-top:18px; }

@media (max-width: 980px){
  #hero-canvas{ width:100%; opacity:0.35; }
  .hero-inner{ padding-left:24px; max-width:100%; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento-card, .bento-card.wide{ grid-column:span 2; grid-row:auto;}
  .proc-grid{ grid-template-columns:1fr 1fr; }
  .founder .wrap{ grid-template-columns:1fr; gap:40px; }
  .contact-grid{ grid-template-columns:1fr; gap:60px; }
  .booking-grid{ grid-template-columns:1fr; gap:50px; }
  .intro-stats{ gap:40px; }
  .product-grid{ grid-template-columns:1fr; }
}

/* ---- tablet / small-laptop nav: switch to hamburger before items collide ----
   iPad portrait (768px), iPad landscape / common laptop width (1024px —
   measured at exactly zero slack: logo + 6 nav links + CTA sum to precisely
   the available width there, so anything lower wraps), and narrow browser
   windows all fall in this band. Breakpoint set well above that measured
   collision point rather than to a device-name guess. */
@media (max-width: 1100px){
  nav, .nav-cta .btn{ display:none; }
  .menu-toggle{ display:flex; }
  header{ padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right)); }
}

@media (max-width: 760px){
  /* Solid from the first frame on mobile — the fade-from-transparent header
     is a desktop flourish that assumes a light page background right under
     it. On mobile the hero can be a dark video, and the logo (dark ink
     text) needs a reliable light backdrop to stay legible regardless of
     what's scrolled underneath, so skip the transparent state entirely. */
  header{
    padding:20px 24px; padding-top:max(20px, env(safe-area-inset-top)); padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right));
    background:rgba(250,247,242,0.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line); box-shadow:0 4px 24px rgba(24,20,14,0.05);
  }
  section{ padding:90px 0; }
  .proc-grid{ grid-template-columns:1fr; gap:40px; }
  .form-row{ grid-template-columns:1fr; }
  .wrap{ padding:0 22px; }
  #chatbot-panel{ right:16px; bottom:88px; }
  #chatbot-launcher{ right:16px; bottom:20px; }
  .garage-door{ gap:40px; }
  .garage-logo{ max-width:220px; }
  .garage-btn{ padding:15px 40px; font-size:16px; }

  /* Mobile hero: a real vertical clip instead of the sparse three.js canvas,
     with a dark scrim so the white type stays readable over it. Capped
     shorter than full-viewport-height so the next section peeks into view —
     a hint to keep scrolling rather than a wall of video. */
  .hero{ height:auto; min-height:0; max-height:640px; aspect-ratio:9/14; }
  #hero-canvas{ display:none; }
  .hero-mobile-video{
    display:block; position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 30%; z-index:0;
  }
  .hero::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(14,11,8,0.62) 0%, rgba(14,11,8,0.5) 45%, rgba(14,11,8,0.72) 100%);
  }
  /* Desktop's opaque hero-inner card (rgba(14,11,8,0.92), 450px box) would
     blot out almost the whole vertical clip on a phone-width screen — drop
     it here and lean on the .hero::after gradient scrim + text-shadow above
     for legibility instead, so the footage actually reads behind the type. */
  .hero-inner{
    max-width:none; width:100%; padding:0 24px; margin:0;
    background:none; border-radius:0; box-shadow:none;
  }
  .hero .eyebrow{ color:#f0d9a3; text-shadow:0 1px 12px rgba(0,0,0,0.5); }
  .hero h1{ color:#fff; text-shadow:0 2px 20px rgba(0,0,0,0.55); }
  .hero p{ color:rgba(255,255,255,0.9); text-shadow:0 1px 10px rgba(0,0,0,0.4); }

  /* Landing page, kept lean on phones: the video reel (busy multi-control
     portfolio browser), the second product-callout panorama, and the
     "coming soon" emergency teaser all get cut so a phone visitor lands on
     Hero -> quick hook video -> stats -> packages -> process ->
     booking -> footer, instead of a long scroll of marketing extras. */
  .reel, .panorama-secondary, #comingSoonTeaser{ display:none; }
  /* Services teaser: all 5 bookable packages show on mobile too (Essential
     through Exterior are each a direct cal.com booking link now, not just
     info cards — hiding Interior/Exterior here would hide two working
     booking buttons from every phone visitor). Only Add-Ons, which isn't a
     booking link, stays hidden — same as desktop's "view full menu" path. */
  #services-teaser .bento-card:nth-child(6){ display:none; }
  /* Tighter card padding/type on mobile so 5 stacked cards scan faster —
     same content, less dead space between them. */
  #services-teaser .bento-card{ padding:26px 22px; }
  #services-teaser .bento-card h3{ font-size:20px; margin-top:10px; }
  #services-teaser .bento-card p{ margin-top:8px; }
  #services-teaser .bento-price{ margin-top:14px; }
  #services-teaser .bento-cta{ margin-top:10px; }
  .bento{ gap:12px; margin-top:44px; }

  /* Footer link/social tap targets: text alone is a thin target for a
     thumb — pad each one into a real tappable area instead of just the
     glyph width. */
  .foot-links a, .social-links a{ padding:8px 4px; display:inline-block; }
  .foot-links{ gap:8px 22px; }
  .social-links{ gap:8px 16px; }
}

/* Larger phones (Pro Max / most Android flagships: ~414-430pt wide, taller
   viewport) — the hero's 640px cap leaves a bigger plain gap before
   Services than on a standard-size phone, since the video has more room to
   grow but stops early. Let it use more of that extra height. */
@media (max-width:760px) and (min-width:414px) and (min-height:800px){
  .hero{ max-height:760px; }
}

/* ---- phones: tighter type + spacing so nothing feels cramped, down to
   the smallest common devices (iPhone SE, small Android ~360px). ---- */
@media (max-width: 480px){
  section{ padding:64px 0; }
  section.tight{ padding:52px 0; }
  .page-hero{ padding:130px 0 60px; }
  .hero{ min-height:580px; }
  .logo{ font-size:15px; letter-spacing:0.12em; }
  .bento-card{ padding:30px 22px; }
  .bento-card h3{ font-size:21px; }
  .bento{ gap:14px; margin-top:50px; }
  .proc-grid{ gap:32px; }
  .proc-step .n{ font-size:38px; }
  .timeline-item{ grid-template-columns:66px 1fr; gap:14px; padding:16px 0; }
  .founder-photo{ aspect-ratio:1/1; }
  .intro-stats{ gap:26px 34px; margin-top:44px; }
  .stat b{ font-size:25px; }
  .garage-logo{ max-width:170px; }
  .garage-btn{ padding:13px 32px; font-size:14px; }
  .btn{ padding:14px 28px; font-size:10.5px; }
  /* Cal.com's own layout stacks calendar + time-slots vertically on narrow
     viewports (they sit side-by-side on desktop), which needs MORE height
     here, not less — this was accidentally shortened below the tablet
     value, which brought back the internal-scroll problem inside the
     widget that was deliberately fixed earlier. */
  .booking-embed, #cal-inline{ min-height:1150px; height:1150px; }
  #chatbot-panel{ width:calc(100vw - 32px); height:60vh; max-height:480px; }
}

@media (max-width: 360px){
  .wrap{ padding:0 16px; }
  .hero h1{ font-size:32px; }
  .page-hero h1{ font-size:28px; }
  .btn{ padding:13px 22px; font-size:10px; letter-spacing:0.12em; }
}

/* ---- short / landscape viewports (phones rotated, shallow browser
   windows) — shrink vertical-heavy sections so nothing gets pushed off
   screen and the garage door's Enter button always stays reachable. ---- */
@media (max-height: 520px) and (orientation: landscape){
  .hero{ height:auto; min-height:460px; padding:110px 0 50px; }
  .page-hero{ padding:110px 0 44px; }
  .garage-door{ gap:18px; }
  .garage-logo{ max-width:130px; }
  .garage-btn{ padding:11px 28px; font-size:13px; }
  #chatbot-panel{ height:80vh; max-height:320px; bottom:max(84px, calc(60px + env(safe-area-inset-bottom))); }
}

/* ---- large / ultra-wide screens — a touch more breathing room instead
   of content feeling narrow in the middle of a big monitor. ---- */
@media (min-width: 1600px){
  .wrap{ max-width:1320px; }
}