:root{
  --bg-deep:#0F241F;
  --bg-deep-2:#153229;
  --bg-paper:#F6F1E3;
  --bg-paper-2:#EFE7D2;
  --sun:#E7A93E;
  --sun-soft:#F2C878;
  --rust:#C1592E;
  --ink:#12211D;
  --ink-soft:#4E655C;
  --cream:#F4EEDD;
  --cream-soft:#C9D6CC;
  --line:rgba(18,33,29,0.14);
  --line-dark:rgba(244,238,221,0.16);
  --radius:18px;
  --maxw:1180px;
  --cyber-glow:0 0 20px rgba(231,169,62,0.4);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  font-family:'Work Sans', sans-serif;
  background:var(--bg-paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  margin:0;
  letter-spacing:-0.01em;
  line-height:1.05;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--rust);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:16px;height:1px;background:var(--rust);display:inline-block;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:15px;
  padding:13px 24px;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-sun{ background:var(--sun); color:var(--ink); }
.btn-sun:hover{ background:var(--sun-soft); }
.btn-ghost-dark{ border-color:var(--line-dark); color:var(--cream); }
.btn-ghost-dark:hover{ background:rgba(244,238,221,0.08); }
.btn-ghost-light{ border-color:var(--line); color:var(--ink); }
.btn-ghost-light:hover{ background:rgba(18,33,29,0.06); }

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:padding .3s ease, background .3s ease, box-shadow .3s ease;
}
header.scrolled{
  padding:10px 0;
  background:rgba(246,241,227,0.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; }
.logo{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:19px;
  display:flex; align-items:center; gap:10px;
  white-space:nowrap;
}
.logo img{
  height:42px; width:auto; display:block; flex:none;
  transition:height .3s ease;
}
header.scrolled .logo img{ height:34px; }
.navlinks{ display:flex; align-items:center; gap:34px; }
.navlinks a{
  font-size:14.5px; font-weight:500; color:var(--ink);
  position:relative; padding:4px 0;
}
.navlinks a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0%;
  background:var(--rust); transition:width .25s ease;
}
.navlinks a:hover::after{ width:100%; }
.navcall{ display:flex; align-items:center; gap:16px; }
.navcall .btn{ padding:10px 20px; font-size:14px; }
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; }

@media (max-width:860px){
  .navlinks{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--bg-deep); flex-direction:column; justify-content:center; gap:30px;
    transform:translateX(100%); transition:transform .35s ease; padding:40px;
  }
  .navlinks.open{ transform:translateX(0); }
  .navlinks a{ color:var(--cream); font-size:19px; }
  .navlinks a::after{ background:var(--sun); }
  .menu-toggle{ display:block; }
  .navcall .btn.btn-ghost-light{ display:none; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:128px 0 70px;
  background:var(--bg-paper);
  overflow:hidden;
}

.hero-scene{
  position:relative; width:100%;
  height:clamp(250px,36vw,420px);
  margin-bottom:48px;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg,#F5E3BD 0%,#EDD3A3 46%,var(--bg-paper) 88%);
}
.hero-scene svg{ width:100%; height:100%; display:block; }

.scene-drift{ animation:sceneDrift 24s ease-in-out infinite; }
@keyframes sceneDrift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-5px,-2px) scale(1.01); } }
.scene-far{ animation:sceneDriftFar 28s ease-in-out infinite; }
@keyframes sceneDriftFar{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-3px,0); } }

.sun-glow{ transform-box:fill-box; transform-origin:center; animation:sunBreathe 8s ease-in-out infinite; }
@keyframes sunBreathe{ 0%,100%{ opacity:0.45; transform:scale(1); } 50%{ opacity:0.75; transform:scale(1.08); } }
.sun-core{ transform-box:fill-box; transform-origin:center; animation:sunBreathe 8s ease-in-out infinite; }

.godray{ transform-box:fill-box; transform-origin:450px 45px; animation:godrayBreathe 11s ease-in-out infinite; }
.godray-b{ animation-delay:2s; } .godray-c{ animation-delay:4s; } .godray-d{ animation-delay:6s; }
@keyframes godrayBreathe{ 0%,100%{ opacity:0.12; transform:rotate(-0.8deg) scaleX(1); } 50%{ opacity:0.24; transform:rotate(0.8deg) scaleX(1.05); } }

.bead-trail-1 circle{ opacity:0; animation:beadTravel1 5.5s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 450 45 C 340 70, 220 110, 160 170'); }
.bead-trail-2 circle{ opacity:0; animation:beadTravel2 5.8s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 450 45 C 380 80, 310 120, 275 160'); }
.bead-trail-3 circle{ opacity:0; animation:beadTravel3 6.2s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 450 45 C 420 90, 400 130, 395 165'); }
.bead-trail-4 circle{ opacity:0; animation:beadTravel4 6.5s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 450 45 C 470 90, 500 130, 515 168'); }
.bead-trail-5 circle{ opacity:0; animation:beadTravel5 6.8s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 450 45 C 520 80, 590 120, 635 158'); }
.bead-trail-6 circle{ opacity:0; animation:beadTravel6 7.2s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 450 45 C 580 70, 710 110, 770 172'); }

.bead-trail-1 circle:nth-child(1) { animation-delay: 0.0s; } .bead-trail-1 circle:nth-child(2) { animation-delay: 0.2s; }
.bead-trail-2 circle:nth-child(1) { animation-delay: 1.0s; } .bead-trail-2 circle:nth-child(2) { animation-delay: 1.2s; }
.bead-trail-3 circle:nth-child(1) { animation-delay: 2.0s; } .bead-trail-3 circle:nth-child(2) { animation-delay: 2.2s; }
.bead-trail-4 circle:nth-child(1) { animation-delay: 3.0s; } .bead-trail-4 circle:nth-child(2) { animation-delay: 3.2s; }
.bead-trail-5 circle:nth-child(1) { animation-delay: 4.0s; } .bead-trail-5 circle:nth-child(2) { animation-delay: 4.2s; }
.bead-trail-6 circle:nth-child(1) { animation-delay: 4.8s; } .bead-trail-6 circle:nth-child(2) { animation-delay: 5.0s; }

@keyframes beadTravel1{ 0%{ offset-distance:0%; opacity:0; } 12%{ opacity:0.95; } 68%{ offset-distance:100%; opacity:0.95; } 72%,100%{ offset-distance:100%; opacity:0; } }
@keyframes beadTravel2{ 0%{ offset-distance:0%; opacity:0; } 12%{ opacity:0.95; } 68%{ offset-distance:100%; opacity:0.95; } 72%,100%{ offset-distance:100%; opacity:0; } }
@keyframes beadTravel3{ 0%{ offset-distance:0%; opacity:0; } 12%{ opacity:0.95; } 68%{ offset-distance:100%; opacity:0.95; } 72%,100%{ offset-distance:100%; opacity:0; } }
@keyframes beadTravel4{ 0%{ offset-distance:0%; opacity:0; } 12%{ opacity:0.95; } 68%{ offset-distance:100%; opacity:0.95; } 72%,100%{ offset-distance:100%; opacity:0; } }
@keyframes beadTravel5{ 0%{ offset-distance:0%; opacity:0; } 12%{ opacity:0.95; } 68%{ offset-distance:100%; opacity:0.95; } 72%,100%{ offset-distance:100%; opacity:0; } }
@keyframes beadTravel6{ 0%{ offset-distance:0%; opacity:0; } 12%{ opacity:0.95; } 68%{ offset-distance:100%; opacity:0.95; } 72%,100%{ offset-distance:100%; opacity:0; } }

.current-pulse-1{ opacity:0; animation:currentTravel1 5.5s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 160 170 L 160 215'); }
.current-pulse-2{ opacity:0; animation:currentTravel2 5.8s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 275 160 L 275 200'); }
.current-pulse-3{ opacity:0; animation:currentTravel3 6.2s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 395 165 L 395 205'); }
.current-pulse-4{ opacity:0; animation:currentTravel4 6.5s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 515 168 L 515 205'); }
.current-pulse-5{ opacity:0; animation:currentTravel5 6.8s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 635 158 L 635 210'); }
.current-pulse-6{ opacity:0; animation:currentTravel6 7.2s cubic-bezier(.25,0,.3,1) infinite; offset-path:path('M 770 172 L 770 215'); }

@keyframes currentTravel1{ 0%,62%{ offset-distance:0%; opacity:0; } 67%{ opacity:1; } 80%{ offset-distance:100%; opacity:1; } 84%,100%{ offset-distance:100%; opacity:0; } }
@keyframes currentTravel2{ 0%,62%{ offset-distance:0%; opacity:0; } 67%{ opacity:1; } 80%{ offset-distance:100%; opacity:1; } 84%,100%{ offset-distance:100%; opacity:0; } }
@keyframes currentTravel3{ 0%,62%{ offset-distance:0%; opacity:0; } 67%{ opacity:1; } 80%{ offset-distance:100%; opacity:1; } 84%,100%{ offset-distance:100%; opacity:0; } }
@keyframes currentTravel4{ 0%,62%{ offset-distance:0%; opacity:0; } 67%{ opacity:1; } 80%{ offset-distance:100%; opacity:1; } 84%,100%{ offset-distance:100%; opacity:0; } }
@keyframes currentTravel5{ 0%,62%{ offset-distance:0%; opacity:0; } 67%{ opacity:1; } 80%{ offset-distance:100%; opacity:1; } 84%,100%{ offset-distance:100%; opacity:0; } }
@keyframes currentTravel6{ 0%,62%{ offset-distance:0%; opacity:0; } 67%{ opacity:1; } 80%{ offset-distance:100%; opacity:1; } 84%,100%{ offset-distance:100%; opacity:0; } }

.vwindow-1{ fill:#3A5A50; animation:glowCycle1 5.5s ease-in-out infinite; } .vwindow-1-bloom{ opacity:0; animation:bloomCycle1 5.5s ease-in-out infinite; }
.vwindow-2{ fill:#3A5A50; animation:glowCycle2 5.8s ease-in-out infinite; } .vwindow-2-bloom{ opacity:0; animation:bloomCycle2 5.8s ease-in-out infinite; }
.vwindow-3{ fill:#3A5A50; animation:glowCycle3 6.2s ease-in-out infinite; } .vwindow-3-bloom{ opacity:0; animation:bloomCycle3 6.2s ease-in-out infinite; }
.vwindow-4{ fill:#3A5A50; animation:glowCycle4 6.5s ease-in-out infinite; } .vwindow-4-bloom{ opacity:0; animation:bloomCycle4 6.5s ease-in-out infinite; }
.vwindow-5{ fill:#3A5A50; animation:glowCycle5 6.8s ease-in-out infinite; } .vwindow-5-bloom{ opacity:0; animation:bloomCycle5 6.8s ease-in-out infinite; }
.vwindow-6{ fill:#3A5A50; animation:glowCycle6 7.2s ease-in-out infinite; } .vwindow-6-bloom{ opacity:0; animation:bloomCycle6 7.2s ease-in-out infinite; }

@keyframes glowCycle1{ 0%,76%{ fill:#3A5A50; } 80%,96%{ fill:#F2C878; } 100%{ fill:#3A5A50; } } @keyframes bloomCycle1{ 0%,76%{ opacity:0; } 80%,96%{ opacity:0.65; } 100%{ opacity:0; } }
@keyframes glowCycle2{ 0%,76%{ fill:#3A5A50; } 80%,96%{ fill:#F2C878; } 100%{ fill:#3A5A50; } } @keyframes bloomCycle2{ 0%,76%{ opacity:0; } 80%,96%{ opacity:0.65; } 100%{ opacity:0; } }
@keyframes glowCycle3{ 0%,76%{ fill:#3A5A50; } 80%,96%{ fill:#F2C878; } 100--->{ fill:#3A5A50; } } @keyframes bloomCycle3{ 0%,76%{ opacity:0; } 80%,96%{ opacity:0.65; } 100%{ opacity:0; } }
@keyframes glowCycle4{ 0%,76%{ fill:#3A5A50; } 80%,96%{ fill:#F2C878; } 100%{ fill:#3A5A50; } } @keyframes bloomCycle4{ 0%,76%{ opacity:0; } 80%,96%{ opacity:0.65; } 100%{ opacity:0; } }
@keyframes glowCycle5{ 0%,76%{ fill:#3A5A50; } 80%,96%{ fill:#F2C878; } 100%{ fill:#3A5A50; } } @keyframes bloomCycle5{ 0%,76%{ opacity:0; } 80%,96%{ opacity:0.65; } 100%{ opacity:0; } }
@keyframes glowCycle6{ 0%,76%{ fill:#3A5A50; } 80%,96%{ fill:#F2C878; } 100%{ fill:#3A5A50; } } @keyframes bloomCycle6{ 0%,76%{ opacity:0; } 80%,96%{ opacity:0.65; } 100%{ opacity:0; } }

.sheen-fast { animation:sheenAction 4.5s ease-in-out infinite; }
@keyframes sheenAction{ 0%,35%{ transform:translateX(-45px); opacity:0; } 50%{ opacity:0.45; } 65%,100%{ transform:translateX(45px); opacity:0; } }
.scene-vignette{ mix-blend-mode:multiply; }

.car-right-1{ animation:carDriveRight 19s linear infinite; }
.car-right-2{ animation:carDriveRight 23s linear infinite; animation-delay: 7s; }
.car-right-3{ animation:carDriveRight 16s linear infinite; animation-delay: 13s; }
.car-left-1{ animation:carDriveLeft 21s linear infinite; animation-delay: 2s; }
.car-left-2{ animation:carDriveLeft 25s linear infinite; animation-delay: 9s; }
.car-left-3{ animation:carDriveLeft 17s linear infinite; animation-delay: 14s; }

@keyframes carDriveRight{ 0%{ transform:translate(-60px,264px); } 100%{ transform:translate(960px,264px); } }
@keyframes carDriveLeft{ 0%{ transform:translate(960px,272px) scale(-1,1); } 100%{ transform:translate(-60px,272px) scale(-1,1); } }

.hero-content{ max-width:700px; margin:0 auto; text-align:center; }
.hero h1{ font-size:clamp(36px,5vw,60px); font-weight:600; color:var(--ink); margin-top:16px; }
.hero h1 em{ font-style:italic; color:var(--rust); font-weight:500; }
.hero p.lede{ font-size:17.5px; line-height:1.6; color:var(--ink-soft); max-width:520px; margin:20px auto 0; }
.hero-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; justify-content:center; }

/* ---------- MARQUEE STRIP ---------- */
.strip{
  background:linear-gradient(90deg, var(--bg-deep), var(--bg-deep-2), var(--bg-deep));
  color:var(--cream); padding:20px 0;
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{ display:flex; align-items:center; width:max-content; animation:marquee 26s linear infinite; }
.strip:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.strip-item{ display:flex; align-items:baseline; gap:10px; white-space:nowrap; padding:0 34px; border-right:1px solid var(--line-dark); }
.strip-item .num{ font-family:'IBM Plex Mono', monospace; font-size:20px; color:var(--sun-soft); font-weight:500;}
.strip-item .label{ font-size:13px; color:var(--cream-soft); letter-spacing:.02em; }

/* ---------- SECTION HEAD ---------- */
section{ padding:110px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(30px,3.6vw,46px); font-weight:600; margin-top:16px; color:var(--ink); }
.section-head p{ margin-top:16px; color:var(--ink-soft); font-size:16.5px; line-height:1.6; }

/* ---------- PRODUCT TABS ---------- */
.tabbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; border-bottom:1px solid var(--line); padding-bottom:2px; }
.tabbtn{
  font-family:'IBM Plex Mono', monospace; font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  padding:12px 4px; margin-right:26px; background:none; border:none; cursor:pointer;
  color:var(--ink-soft); position:relative; border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.tabbtn:hover{ color:var(--ink); }
.tabbtn.active{ color:var(--rust); border-color:var(--rust); }
.panel{ display:none; }
.panel.active{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:flex-start; }
.panel-media{ border-radius:var(--radius); overflow:hidden; background:var(--bg-paper-2); aspect-ratio:4/3.6; display:flex; align-items:center; justify-content:center; }
.panel-media img{ width:100%; height:100%; object-fit:cover; }
.panel-title{ font-size:28px; font-weight:600; }
.panel-desc{ margin-top:14px; color:var(--ink-soft); line-height:1.6; font-size:15.5px; }
.spec-list{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; }
.spec-list li{ display:flex; gap:12px; font-size:14.5px; color:var(--ink); padding-bottom:12px; border-bottom:1px solid var(--line); }
.spec-list li::before{ content:'—'; color:var(--rust); flex:none; }
.models{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.model-chip{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; padding:8px 14px; border:1px solid var(--line); border-radius:100px; color:var(--ink-soft); }
.panel-cta{ margin-top:30px; }
@media (max-width:820px){ .panel.active{ grid-template-columns:1fr; } }

/* ---------- ABOUT ---------- */
.about-bg{ background:var(--bg-paper-2); }
.about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.about-card{ background:var(--bg-paper); border-radius:var(--radius); padding:34px 28px; border:1px solid var(--line); }
.about-card .tag{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--rust); }
.about-card h3{ font-size:22px; font-weight:600; margin-top:14px; }
.about-card p{ margin-top:14px; color:var(--ink-soft); font-size:14.8px; line-height:1.65; }
@media (max-width:960px) and (min-width:601px){ .about-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .about-grid{ grid-template-columns:1fr; } }

/* ---------- FUTURISTIC LINEAR CAROUSEL GALLERY ---------- */
.gallery-section { background: var(--bg-paper); padding-bottom: 60px; overflow: hidden; position: relative; }
.carousel-outer-container { position: relative; display: flex; align-items: center; width: 100%; }

.gallery-carousel {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 40px 0;
  scrollbar-width: none; /* Firefox */
  perspective: 1200px;
}
.gallery-carousel::-webkit-scrollbar { display: none; /* Chrome/Safari */ }

.gallery-item {
  flex: 0 0 260px;
  position: relative;
  border-radius: calc(var(--radius) - 4px);
  overflow: visible; /* Allows image element projection outside bounds */
  aspect-ratio: 1;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease, box-shadow 0.5s ease;
  filter: grayscale(0.2) brightness(0.9);
}
.gallery-item::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--sun);
  opacity: 0;
  border-radius: calc(var(--radius) - 2px);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.gallery-item::after {
  content: 'PROJECT LIVE';
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--sun);
  background: rgba(15, 36, 31, 0.9);
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  transform: translateZ(30px) translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 4;
}

/* Linear Projective Mouse Hover State */
.gallery-item:hover {
  transform: scale(1.02);
  border-color: var(--sun);
  z-index: 10;
}
.gallery-item:hover img {
  transform: translateZ(45px) scale(1.12); /* Clean forward displacement projection */
  filter: grayscale(0) brightness(1.05);
  box-shadow: var(--cyber-glow), 0 15px 35px rgba(0,0,0,0.35);
}
.gallery-item:hover::before { opacity: 1; }
.gallery-item:hover::after { opacity: 1; transform: translateZ(55px) translateY(0); }

/* Carousel Control Minimalist Arrow Buttons */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 1px solid var(--line-dark);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.carousel-arrow:hover {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
  transform: translateY(-50%) scale(1.08);
}
.carousel-arrow svg { width: 20px; height: 20px; fill: currentColor; }
.carousel-arrow-left { left: -26px; }
.carousel-arrow-right { right: -26px; }

@media(max-width: 1240px) {
  .carousel-arrow-left { left: 10px; }
  .carousel-arrow-right { right: 10px; }
}

/* ---------- CONTACT & SHOP ANIMATION ---------- */
.contact{ background:var(--bg-deep); color:var(--cream); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.contact h2{ color:var(--cream); }
.contact .section-head p{ color:var(--cream-soft); }
.info-row{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-dark); }
.info-row .tag{ font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--sun-soft); width:110px; flex:none; padding-top:2px; }
.info-row .val{ font-size:16.5px; line-height:1.5; }
.info-row .val a:hover{ color:var(--sun-soft); }
.contact-ctas{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

.shop-box {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 0.95;
  cursor: pointer;
  background: var(--bg-deep-2);
  border: 1px solid var(--line-dark);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.shop-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}
.shop-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,36,31,0.2) 0%, rgba(15,36,31,0.85) 90%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
  z-index: 2;
}
.shop-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--sun); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 6px; }
.shop-title { font-family: 'Fraunces', serif; font-size: 24px; color: var(--cream); font-weight: 600; }
.shop-box:hover { box-shadow: var(--cyber-glow); border-color: var(--sun-soft); }
.shop-box:hover img { transform: scale(1.04); filter: brightness(1.05); }
.shop-box.warping { animation: spatialWarp 0.65s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards; }

@keyframes spatialWarp {
  0% { transform: scale(1); filter: blur(0px); opacity: 1; }
  40% { transform: scale(1.03); filter: blur(1px); opacity: 0.9; }
  100% { transform: scale(0.85) cubic-bezier(0.6, 0, 0.735, 1); filter: blur(12px); opacity: 0; box-shadow: 0 0 50px var(--sun); }
}

/* ---------- FOOTER ---------- */
footer{ background:var(--bg-deep); color:var(--cream-soft); border-top:1px solid var(--line-dark); }
.foot-wrap{ padding:30px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:13px; }
.foot-wrap a:hover{ color:var(--sun-soft); }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

::selection{ background:var(--sun); color:var(--ink); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
@media (max-width:760px){
  .hero-scene{ height:220px; margin-bottom:34px; }
  .hero p.lede{ max-width:100%; }
  .wrap{ padding:0 20px; }
  .hero{ padding:128px 0 64px; }
  section{ padding:72px 0; }
  .section-head{ margin-bottom:38px; }
  .about-card{ padding:28px 22px; }
  .strip-item{ padding:0 22px; }
  .contact-ctas .btn{ flex:1 1 auto; justify-content:center; }
  .gallery-item { flex: 0 0 200px; }
}
@media (max-width:480px){
  .hero-scene{ height:180px; border-radius:14px; }
  .wrap{ padding:0 16px; }
  .logo{ font-size:16px; gap:8px; }
  .logo img{ height:34px; }
  header.scrolled .logo img{ height:28px; }
  .navcall{ gap:10px; }
  .hero{ padding:112px 0 52px; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ justify-content:center; }
  .strip-item .num{ font-size:17px; }
  .strip-item .label{ font-size:12px; }
  .strip-item{ padding:0 16px; }
  .info-row{ flex-direction:column; gap:4px; }
  .info-row .tag{ width:auto; }
  .foot-wrap{ flex-direction:column; text-align:center; justify-content:center; }
  .model-chip{ font-size:11.5px; padding:7px 12px; }
}