/* ==========================================================================
   Delta Ankara — delta-ankara.com.tr
   Design tokens → base → layout → components → motion → responsive
   ========================================================================== */

:root{
  /* Colour */
  --ink:        #0D1117;
  --ink-2:      #161C24;
  --ink-3:      #1F2731;
  --paper:      #FFFFFF;
  --mist:       #F4F6F8;
  --line:       #E1E6EB;
  --line-soft:  #EDF0F3;
  --line-dark:  rgba(255,255,255,.13);
  --text:       #101720;
  --muted:      #5C6874;
  --muted-light:#9BA8B5;
  --accent:     #1B6CB4;
  --accent-2:   #2E8ACB;
  --accent-tint:#EBF3FA;

  /* Brand gradient, taken from the logo mark */
  --grad: linear-gradient(90deg,#5B4BA8 0%,#2E86C8 22%,#3FA7E0 40%,#E0518A 68%,#F0913C 88%,#5B4BA8 100%);

  /* Type */
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space */
  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(80px, 11vw, 156px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.022em; line-height:1.1; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,textarea{ font:inherit; color:inherit; }
address{ font-style:normal; }
::selection{ background:var(--accent); color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:2px; }

/* ── Layout primitives ───────────────────────────────────────────────────── */
.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); position:relative; }
.section--mist{ background:var(--mist); }

.section__head{ margin-bottom:clamp(40px,5vw,68px); }
.section__head .h-display{ max-width:14ch; }
.section__head--row{
  max-width:none;
  display:grid; gap:8px 48px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .section__head--row{ grid-template-columns:160px minmax(0,1fr); align-items:baseline; }
  .section__head--row .h-mid{ max-width:20ch; }
}

/* ── Type helpers ────────────────────────────────────────────────────────── */
.mono{ font-family:var(--mono); font-weight:400; font-variant-numeric:tabular-nums; }

.eyebrow{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:currentColor; opacity:.5; flex:none;
}
.eyebrow--light{ color:var(--muted-light); }
.hero .eyebrow--light{ color:rgba(255,255,255,.78); text-shadow:0 1px 12px rgba(13,17,23,.55); }
.hero__lede{ text-shadow:0 1px 16px rgba(13,17,23,.45); }
.hero__title{ text-shadow:0 2px 26px rgba(13,17,23,.42); }
.hero .facts{ color:rgba(255,255,255,.72); text-shadow:0 1px 12px rgba(13,17,23,.6); }

.h-display{ font-size:clamp(34px,5.2vw,62px); letter-spacing:-.032em; }
.h-display em{ font-style:normal; color:var(--muted); }
.h-display--light{ color:#fff; }
.h-display--light em{ color:var(--muted-light); }
.h-mid{ font-size:clamp(26px,3.1vw,40px); letter-spacing:-.028em; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:15px 26px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:2px;
  font-size:14.5px; font-weight:500; letter-spacing:.01em;
  cursor:pointer; overflow:hidden;
  transition:background .38s var(--ease), color .38s var(--ease), border-color .38s var(--ease), transform .38s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--accent);
  transform:translateY(101%); transition:transform .44s var(--ease-out); z-index:0;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ border-color:var(--accent); }
.btn:hover::after{ transform:translateY(0); }
.btn:active{ transform:translateY(1px); }

.btn--primary{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.34);
}
.btn--ghost:hover{ color:#fff; }
.btn--block{ width:100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--h, 92px);
  transition:height .45s var(--ease);
}
/* Three layers share one box. The mark sits at the same x/y as the mark
   inside the full lockup, so the crossfade reads as the wordmark simply
   dropping away while the box collapses around the triangle.
   Ratios: lockup 822/348 = 2.362, mark 372/348 = 1.069 */
.header__brand{
  position:relative; display:block; flex:none;
  height:var(--logo-h, 46px);
  width:calc(var(--logo-h, 46px) * 2.362);
  transition:height .45s var(--ease), width .5s var(--ease);
}
.header__logo{
  position:absolute; left:0; top:0;
  height:100%; width:auto;
  transition:opacity .38s var(--ease);
}
.header__logo--dark,
.header__logo--mark{ opacity:0; }
.header__rule{
  display:block; height:1px; background:var(--line);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}

/* Condensed state, once the hero has started to leave: the bar draws itself in
   and goes translucent, so the page reads through it rather than under a slab.
   The blur is what keeps the navigation legible over whatever is passing
   beneath — without it the tint would have to be near-opaque, which is the
   thing being avoided. */
.site-header.is-stuck{
  background:rgba(255,255,255,.58);
  backdrop-filter:saturate(1.5) blur(20px);
  -webkit-backdrop-filter:saturate(1.5) blur(20px);
}
/* No blur support (older Firefox, blur disabled): fall back to a tint solid
   enough to read against, rather than letting the type sit on open content. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.is-stuck{ background:rgba(255,255,255,.92); }
}
.site-header.is-stuck .header__inner{ --h:58px; }
.site-header.is-stuck .header__brand{
  --logo-h:32px;
  width:calc(var(--logo-h) * 1.069);
}
.site-header.is-stuck .header__logo--light,
.site-header.is-stuck .header__logo--dark{ opacity:0; }
.site-header.is-stuck .header__logo--mark{ opacity:1; }
.site-header.is-stuck .header__rule{ transform:scaleX(1); }
.site-header.is-stuck .nav a{ color:var(--text); }
.site-header.is-stuck .nav a::after{ background:var(--text); }
.site-header.is-stuck .nav__cta{ border-color:var(--line); }
.site-header.is-stuck .nav__cta:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.site-header.is-stuck .burger span{ background:var(--text); }

.nav{ display:none; align-items:center; gap:6px; }
@media (min-width:1000px){ .nav{ display:flex; } }
.nav a{
  position:relative; padding:8px 14px;
  font-size:14.5px; color:rgba(255,255,255,.86);
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:1px;
  background:#fff; transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease-out);
}
.nav a:hover::after, .nav a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav a:hover{ color:#fff; }
.nav__cta{
  margin-left:10px; padding:9px 20px;
  border:1px solid rgba(255,255,255,.3); border-radius:2px;
  transition:background .34s var(--ease), color .34s var(--ease), border-color .34s var(--ease);
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* Burger */
.burger{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  width:44px; height:44px; padding:0 10px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
@media (min-width:1000px){ .burger{ display:none; } }
.burger span{
  display:block; height:1.5px; width:100%; background:#fff; border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s var(--ease), background .45s var(--ease);
}
.burger[aria-expanded="true"] span{ background:var(--text); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--paper);
  padding:130px var(--gutter) 48px;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; }
.mobile-nav nav{ display:flex; flex-direction:column; }
.mobile-nav a{
  display:flex; align-items:baseline; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line);
  font-size:clamp(24px,7vw,34px); font-weight:500; letter-spacing:-.02em;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.mobile-nav.is-open a{ opacity:1; transform:none; }
.mobile-nav a:nth-child(1){ transition-delay:.06s }
.mobile-nav a:nth-child(2){ transition-delay:.12s }
.mobile-nav a:nth-child(3){ transition-delay:.18s }
.mobile-nav a:nth-child(4){ transition-delay:.24s }
.mobile-nav a:nth-child(5){ transition-delay:.30s }
.mobile-nav a .mono{ font-size:12px; color:var(--muted-light); }
.mobile-nav a:hover{ color:var(--accent); }
.mobile-nav__mail{ margin:0; font-family:var(--mono); font-size:14px; color:var(--muted); }
body.nav-open{ overflow:hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; isolation:isolate;
  min-height:min(100svh, 900px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(150px,20vh,220px) clamp(30px,5vh,48px);
  background:var(--ink);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:62% 50%;
  filter:saturate(.94) contrast(1.03) brightness(.94);
  transform:scale(1.1);
  animation:heroIn 2.4s var(--ease-out) forwards;
}
@keyframes heroIn{ to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0;
  /* Weighted to the left and bottom, where the type sits, so the sunrise
     on the right-hand side survives. */
  background:
    linear-gradient(180deg, rgba(13,17,23,.72) 0%, rgba(13,17,23,.20) 30%, rgba(13,17,23,.44) 70%, rgba(13,17,23,.88) 100%),
    linear-gradient(90deg, rgba(13,17,23,.88) 0%, rgba(13,17,23,.55) 32%, rgba(13,17,23,.12) 62%, rgba(13,17,23,0) 82%);
}

.hero__inner{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
.hero__title{
  font-size:clamp(36px,6.6vw,86px);
  letter-spacing:-.038em; line-height:1.03;
  color:#fff; margin:0 0 clamp(22px,3vw,32px); max-width:20ch; text-wrap:balance;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.04em; margin-bottom:-.04em; }
.hero__title .line > span{ display:block; }

.hero__lede{
  max-width:52ch; color:rgba(255,255,255,.76);
  font-size:clamp(16px,1.15vw,19px); line-height:1.66;
  margin-bottom:clamp(30px,4vw,42px);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.hero__actions .btn--primary{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }
.hero__actions .btn--primary:hover{ --btn-fg:#fff; }

.hero__foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding-top:clamp(40px,7vh,72px);
}
.facts{
  display:flex; flex-wrap:wrap; gap:8px 34px;
  font-size:13.5px; color:rgba(255,255,255,.6);
}
.facts li{ display:flex; align-items:baseline; gap:9px; }
.facts .mono{ font-size:11px; color:var(--accent-2); }

.scroll-hint{
  display:none; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
@media (min-width:820px){ .scroll-hint{ display:flex; } }
.scroll-hint i{
  display:block; width:1px; height:34px; background:rgba(255,255,255,.25); position:relative; overflow:hidden;
}
.scroll-hint i::after{
  content:""; position:absolute; inset:0; background:var(--accent-2);
  animation:scrollTick 2.2s var(--ease) infinite;
}
@keyframes scrollTick{
  0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) }
}

/* ==========================================================================
   PRODUCT
   ========================================================================== */
.shot{
  position:relative; margin:0 0 clamp(48px,6vw,80px);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:var(--mist);
}
.shot img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  transform:scale(1.04); transition:transform 1.6s var(--ease-out);
}
.shot.is-in img{ transform:scale(1); }
.shot__cap{
  position:absolute; inset:auto 0 0 0;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  padding:clamp(16px,2.4vw,26px) clamp(18px,2.6vw,30px);
  background:linear-gradient(180deg, rgba(13,17,23,0), rgba(13,17,23,.78));
}
.shot__cap .mono{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.9);
}
.shot__cap .tag{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff; }

/* ── Full-bleed plan-view band ────────────────────────────────────────────
   Two layers, both derived from one photograph:

     band__plate  the track, with the wagon taken out — never moves
     band__wagon  the wagon, cut out   — driven by the scroll position

   The wagon's transform is written by the script on every scroll event, not
   by a transition: it rolls in from the left as the band comes up the screen,
   stands still through the middle of its pass, and rolls off to the right as
   the band leaves — and the whole pass runs backwards if you scroll back up.
   Nothing else changes at any point: no fade, no swap, no shift in lighting.

   Everything is positioned in percentages of the scene, and the plate is
   pre-cropped to the band's own 2.6:1 ratio, so no object-fit cropping can
   pull the two layers out of register. */
.band{ position:relative; background:var(--ink); overflow:hidden; }
.band__scene{ position:relative; width:100%; line-height:0; }
.band__plate{ display:block; width:100%; height:auto; }
.band__wagon{
  position:absolute;
  left:11.0455%; top:31.5603%; width:77.8636%; height:auto;
  will-change:transform;
  transform:translate3d(-118%,0,0);
  /* The script writes a new transform on every scroll event; this short linear
     glide fills the gaps between them, so a notched mouse wheel reads as
     rolling stock rather than as a series of jumps. */
  transition:transform .14s linear;
}
/* On a phone the 2.6:1 strip is too shallow to read, so the scene is scaled
   up and centre-clipped — everything stays proportional to the scene. */
@media (max-width:760px){
  .band__scene{ width:200%; margin-left:-50%; }
}

.band__cap{
  position:absolute; left:0; right:0; bottom:0; margin:0; z-index:2;
  padding:clamp(16px,2.4vw,28px) var(--gutter);
  background:linear-gradient(180deg, rgba(13,17,23,0), rgba(13,17,23,.72));
  line-height:1.5;
}
.band__cap span{
  display:block; max-width:var(--shell); margin-inline:auto;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85);
}

.prose-grid{
  display:grid; gap:clamp(20px,3vw,56px);
  margin-bottom:clamp(56px,7vw,92px);
}
@media (min-width:860px){ .prose-grid{ grid-template-columns:1fr 1fr; } }
.prose-grid__lead{
  font-size:clamp(19px,1.7vw,25px); line-height:1.45; letter-spacing:-.018em;
  color:var(--text); font-weight:500;
}
.prose-grid__body{ color:var(--muted); }

.specs{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
}
@media (min-width:760px){ .specs{ grid-template-columns:repeat(3,1fr); } }
.specs li{
  background:var(--paper); padding:clamp(26px,3.2vw,40px);
  transition:background .45s var(--ease);
}
.specs li:hover{ background:var(--accent-tint); }
.specs__val{
  display:block; font-size:clamp(38px,4.6vw,58px); font-weight:600;
  letter-spacing:-.045em; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.specs__val small{ font-size:.36em; font-weight:500; letter-spacing:-.01em; color:var(--muted); margin-left:.12em; }
.specs__key{
  display:block; margin:16px 0 10px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.specs li p{ color:var(--muted); font-size:14.8px; line-height:1.6; }

/* ==========================================================================
   PRODUCTION
   ========================================================================== */
.keyvals{ display:grid; gap:1px; margin:0; background:var(--line); border-block:1px solid var(--line); }
@media (min-width:560px){ .keyvals{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .keyvals{ grid-template-columns:repeat(4,1fr); } }
.keyvals > div{ background:var(--paper); padding:22px 0 22px 22px; }
@media (min-width:900px){ .keyvals > div:first-child{ padding-left:0; } }
.keyvals dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted-light); margin-bottom:6px;
}
.keyvals dd{ margin:0; font-weight:500; font-size:clamp(16px,1.4vw,19px); letter-spacing:-.015em; }

/* ==========================================================================
   MISSION
   ========================================================================== */
.mission{ background:var(--ink); color:#fff; }
.mission__inner{ max-width:900px; }
.mission__body{
  margin-top:clamp(24px,3vw,34px);
  font-size:clamp(16.5px,1.25vw,20px); line-height:1.66;
  color:rgba(255,255,255,.72); max-width:62ch;
}
.rule-gradient{
  display:block; height:2px; margin-top:clamp(44px,6vw,72px);
  background:var(--grad); background-size:200% 100%;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.5s var(--ease-out);
}
.rule-gradient.is-in{ transform:scaleX(1); animation:gradShift 9s linear 1.4s infinite; }
@keyframes gradShift{ to{ background-position:200% 0; } }

/* ==========================================================================
   VALUES
   ========================================================================== */
.cards{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
@media (min-width:680px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  position:relative; background:var(--paper);
  padding:clamp(28px,3vw,40px) clamp(24px,2.6vw,36px) clamp(34px,3.4vw,46px);
  transition:background .5s var(--ease);
}
.card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.card:hover{ background:#FAFCFE; }
.card:hover::after{ transform:scaleX(1); }
.card__no{ display:block; font-size:11.5px; letter-spacing:.14em; color:var(--muted-light); margin-bottom:20px; }
.card h3{ font-size:19px; letter-spacing:-.018em; margin-bottom:12px; }
.card p{ color:var(--muted); font-size:14.8px; line-height:1.62; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ background:var(--ink); color:#fff; padding-bottom:0; }
.contact__inner{
  display:grid; gap:clamp(44px,5vw,80px);
  padding-bottom:var(--section-y);
}
@media (min-width:940px){ .contact__inner{ grid-template-columns:1fr .85fr; } }
.contact__lead p{ color:rgba(255,255,255,.66); max-width:42ch; margin-top:20px; }

.maillink{
  display:inline-block; position:relative; margin-top:30px;
  font-size:clamp(17px,1.7vw,22px); font-weight:500; letter-spacing:-.015em;
}
.maillink span{ position:relative; }
.maillink span::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--accent-2); transform:scaleX(1); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.maillink:hover span::after{ transform:scaleX(0); }

.contact__addr{
  margin-top:36px; padding-top:24px; border-top:1px solid var(--line-dark);
  color:rgba(255,255,255,.66); font-size:15px; line-height:1.7;
}
.contact__addr .mono{
  display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-light); margin-bottom:10px;
}

/* Form */
.form{ display:grid; gap:18px; align-content:start; }
.field{ display:grid; gap:8px; }
.field label{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-light);
}
.field input,.field textarea{
  width:100%; padding:13px 15px;
  background:rgba(255,255,255,.04); color:#fff;
  border:1px solid var(--line-dark); border-radius:2px;
  font-size:15.5px; resize:vertical;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.3); }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--accent-2); background:rgba(255,255,255,.07);
}
.field.is-invalid input,.field.is-invalid textarea{ border-color:#E0518A; }
.form .btn--primary{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; margin-top:6px; }
.form .btn--primary:hover{ --btn-fg:#fff; }
.form__note{
  min-height:1.2em; margin:0; font-size:13.5px; color:var(--muted-light);
}
.form__note.is-error{ color:#F08AB0; }

.contact__band{ line-height:0; border-top:1px solid var(--line-dark); }
.contact__band img{
  width:100%; height:clamp(150px,20vw,260px); object-fit:cover; object-position:50% 50%;
  filter:saturate(.86) brightness(.9);
  transition:filter 1s var(--ease), transform 1.4s var(--ease-out);
}
.contact__band:hover img{ filter:saturate(1) brightness(1); transform:scale(1.02); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--ink-2); color:#fff; padding-top:clamp(56px,7vw,88px); }
.footer__inner{
  display:grid; gap:clamp(34px,4vw,56px);
  padding-bottom:clamp(40px,5vw,64px);
}
@media (min-width:820px){ .footer__inner{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer__brand img{ height:38px; width:auto; filter:brightness(0) invert(1); }
.footer__brand p{ margin-top:18px; color:var(--muted-light); font-size:14.5px; max-width:30ch; }
.footer__nav{ display:flex; flex-direction:column; gap:11px; font-size:14.5px; }
.footer__nav a{ color:rgba(255,255,255,.72); width:fit-content; transition:color .3s; }
.footer__nav a:hover{ color:#fff; }
.footer__meta{ font-size:14.5px; color:var(--muted-light); }
.footer__meta a{ display:inline-block; margin-bottom:14px; color:#fff; border-bottom:1px solid rgba(255,255,255,.25); }
.footer__meta a:hover{ border-color:var(--accent-2); }
.footer__meta p{ line-height:1.7; }

.footer__legal{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding-block:22px; border-top:1px solid var(--line-dark);
  font-size:13px; color:var(--muted-light);
}
.footer__legal p{ margin:0; }
.to-top{ transition:color .3s; }
.to-top:hover{ color:#fff; }

/* ==========================================================================
   SCROLL MOTION
   ========================================================================== */
[data-anim]{ --d:0ms; }

[data-anim="fade"],[data-anim="rise"],[data-anim="stage"]{
  opacity:0;
  transition:
    opacity .85s var(--ease-out) var(--d),
    transform .95s var(--ease-out) var(--d),
    clip-path .95s var(--ease-out) var(--d);
}
[data-anim="fade"]{ transform:translateY(10px); }
[data-anim="rise"]{ transform:translateY(24px); }
[data-anim="stage"]{ transform:translateY(30px) scale(.985); }

[data-anim].is-in{ opacity:1; transform:none; }

[data-anim="line"] > span{
  display:block; transform:translateY(105%);
  transition:transform 1.05s var(--ease-out) var(--d);
}
[data-anim="line"].is-in > span{ transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-anim]{ opacity:1 !important; transform:none !important; }
  [data-anim="line"] > span{ transform:none !important; }
  .rule-gradient{ transform:scaleX(1) !important; }
  .hero__media img{ transform:none; }
}


/* ==========================================================================
   SPECIFICATION TABLES
   ========================================================================== */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.datasheet{ display:grid; gap:clamp(28px,3.4vw,52px); align-items:start; }
@media (min-width:940px){ .datasheet{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); } }

.spec-table{
  width:100%; border-collapse:collapse;
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  overflow:hidden; font-variant-numeric:tabular-nums;
}
.spec-table th,.spec-table td{
  text-align:left; padding:13px clamp(14px,1.6vw,22px);
  border-bottom:1px solid var(--line-soft); vertical-align:baseline;
}
.spec-table tr:last-child th,.spec-table tr:last-child td{ border-bottom:0; }
.spec-table th[scope="row"]{
  font-weight:400; color:var(--muted); font-size:14.6px; padding-right:20px;
}
.spec-table td{
  font-weight:500; font-size:15px; white-space:nowrap;
  font-family:var(--mono); letter-spacing:-.01em;
}
.spec-table tbody tr{ transition:background .3s var(--ease); }
.spec-table tbody tr:hover{ background:var(--accent-tint); }
.spec-table tbody tr:hover th[scope="row"]{ color:var(--text); }



.datasheet__aside{
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:clamp(22px,2.4vw,30px);
}
.datasheet__aside img{ width:100%; mix-blend-mode:multiply; margin-bottom:14px; }
.datasheet__aside .mono{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-light); margin-bottom:16px;
}
.datasheet__aside p:not(.mono){ color:var(--muted); font-size:14.6px; margin-bottom:20px; }

/* ==========================================================================
   THE RANGE — the other three cars, side by side
   ========================================================================== */
.range__intro{
  max-width:64ch; color:var(--muted);
  margin:-16px 0 clamp(38px,4.6vw,58px);
}
@media (min-width:900px){ .range__intro{ margin-left:208px; } }

.range__grid{
  display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:3px;
  overflow:hidden;
}
@media (min-width:820px){ .range__grid{ grid-template-columns:repeat(3,1fr); } }

.rangecard{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper);
  padding:clamp(28px,3vw,40px) clamp(24px,2.6vw,34px) clamp(26px,2.8vw,34px);
  transition:background .5s var(--ease);
}
.rangecard::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.rangecard:hover{ background:#FAFCFE; }
.rangecard:hover::after{ transform:scaleX(1); }

.rangecard__code{
  display:block; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin-bottom:9px;
}
.rangecard h3{ font-size:clamp(19px,1.8vw,23px); letter-spacing:-.022em; margin-bottom:14px; }
.rangecard > p{ color:var(--muted); font-size:14.8px; line-height:1.62; margin-bottom:26px; }

.rangecard__figs{
  margin:auto 0 0; display:grid; gap:0;
  border-top:1px solid var(--line-soft);
}
.rangecard__figs > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
}
.rangecard__figs > div:last-child{ border-bottom:0; padding-bottom:0; }
.rangecard__figs dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted-light);
}
.rangecard__figs dd{
  margin:0; font-family:var(--mono); font-size:14.5px; font-weight:500;
  letter-spacing:-.01em; white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* the invitation that closes the section */
.invite{
  position:relative; overflow:hidden;
  display:grid; gap:clamp(22px,2.6vw,44px); align-items:center;
  margin-top:clamp(18px,2.2vw,28px);
  padding:clamp(30px,3.4vw,46px) clamp(26px,3vw,46px);
  background:var(--accent-tint);
  border:1px solid rgba(27,108,180,.22); border-radius:3px;
}
/* a hairline of the brand gradient, so the invitation reads as a door
   rather than a fourth product card */
.invite::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--grad);
}
@media (min-width:860px){ .invite{ grid-template-columns:minmax(0,1fr) auto; } }
.invite h3{ font-size:clamp(20px,2vw,26px); letter-spacing:-.024em; margin-bottom:12px; }
.invite p{ color:#43566B; max-width:60ch; }
.invite .btn{ white-space:nowrap; }

/* ── Status pills ────────────────────────────────────────────────────────── */
.tag{
  flex:none; align-self:flex-start;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:100px;
  padding:5px 12px; background:var(--paper); white-space:nowrap;
}
.tag--live{
  color:var(--accent); border-color:rgba(27,108,180,.34); background:var(--accent-tint);
}

/* ── Production ──────────────────────────────────────────────────────────── */
.production__body{
  max-width:62ch; color:var(--muted);
  margin:-16px 0 clamp(36px,4.4vw,56px);
}
@media (min-width:900px){ .production__body{ margin-left:208px; } }


/* ── Contact form extras ─────────────────────────────────────────────────── */
.form__trap{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.form.is-sent{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:260px; padding:36px;
  border:1px solid var(--line-dark); border-radius:3px;
  background:rgba(255,255,255,.03);
}
.form.is-sent p{ margin:0; color:rgba(255,255,255,.8); font-size:16.5px; max-width:34ch; }
.form.is-sent .mono{
  display:block; margin-bottom:12px; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent-2);
}
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn[disabled]::after{ transform:translateY(101%) !important; }


/* Someone who asked for less motion gets the wagon already parked. */
@media (prefers-reduced-motion:reduce){
  .band__wagon{ transform:translate3d(0,0,0) !important; transition:none !important; }
}