/* ============================================================
   AUTOLUXX — Precision Mobile Detailing, Dubai
   Local rebuild. Geometry and type matched to the Framer
   build measured at a 1440px viewport (1425px content width).
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:"Panchang"; src:url("../assets/fonts/Panchang-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../assets/fonts/Inter-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../assets/fonts/Inter-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../assets/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --ink:        #070707;
  --ink-raised: #0a0a0a;
  --ink-form:   #080808;
  --ink-deep:   #050505;
  --bone:       #f0f0ec;
  --bone-84:    rgba(240,240,236,.84);
  --bone-78:    rgba(240,240,236,.78);
  --bone-62:    rgba(240,240,236,.62);
  --bone-56:    rgba(240,240,236,.56);
  --smoke:      #a2a29e;
  --line:       rgba(255,255,255,.08);
  --line-soft:  rgba(255,255,255,.05);
  --tint:       rgba(255,255,255,.04);

  --display:"Panchang","Times New Roman",serif;
  --text:"Inter",system-ui,-apple-system,Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--text);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
picture{display:contents}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:500}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit}

.skip-link{
  position:absolute;top:-100px;left:24px;z-index:20;
  display:inline-flex;align-items:center;min-height:44px;
  padding:12px 18px;background:var(--bone);color:#090909;
  font-size:11px;font-weight:600;letter-spacing:.6px;
}
.skip-link:focus{top:16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}

/* inner width resolves to 1080px, matching the source build */
.shell{width:100%;max-width:1128px;margin:0 auto;padding:0 24px}
.center-row{display:flex;justify-content:center}

/* ---------- Type primitives ---------- */
.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;line-height:1;color:var(--smoke)}
.note{font-size:11px;line-height:1.5;color:var(--smoke)}

.rule{
  display:block;width:110px;height:1px;margin-top:20px;
  background:linear-gradient(90deg,#f0f0ec 0%,#777774 100%);
}

/* ---------- Focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--bone);outline-offset:3px;border-radius:1px;
}
.field input:focus-visible{outline-offset:6px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:.6px;line-height:1;
  padding:16px 20px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease);
}
.btn--solid{background:var(--bone);color:#090909}
.btn--solid:hover{background:#fff;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--bone);font-weight:500;border-color:var(--line)}
/* In the hero the ghost CTA sits on the bodywork, so it needs its own
   ground. Reads as a glass button rather than a veil over the photo. */
.hero .btn--ghost{
  background:rgba(7,7,7,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-color:rgba(255,255,255,.20);
}
.hero .btn--ghost:hover{background:rgba(7,7,7,.72)}
.hero__copy .note{
  color:var(--bone-62);
  text-shadow:0 1px 2px rgba(7,7,7,.95),0 0 10px rgba(7,7,7,.9),0 0 22px rgba(7,7,7,.75);
}
.btn--ghost:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.03)}
.btn--line{
  background:var(--tint);color:var(--bone);border-radius:0;border-color:var(--line-soft);
  letter-spacing:.8px;padding:13px 20px;
}
.btn--line:hover{background:rgba(255,255,255,.08)}
.btn--full{width:100%;padding:15px 22px;letter-spacing:.8px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   HERO — full-bleed image, nav + copy overlaid
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  /* one viewport on desktop too. svh keeps mobile browser chrome out of it.
     min keeps the copy from crowding on short laptops; max stops very tall
     screens from cropping the 16:9 photo so hard the car loses its sides. */
  height:100vh;height:100svh;
  min-height:680px;max-height:1000px;
}
.hero__media{position:absolute;inset:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  /* A full-viewport hero crops the 16:9 photo horizontally. The car sits
     right of centre, so bias the crop to take from the left, which is
     empty studio backdrop, rather than clipping the car's tail. */
  object-position:82% center;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  /* Desktop copy sits left and the car sits right, so the scrim runs
     horizontally: dense behind the text, clear across the car. A vertical
     gradient dimmed the whole subject for no reason. The second, very light
     vertical pass only settles the top and bottom edges. */
  background:
    linear-gradient(90deg,
      rgba(7,7,7,.96) 0%,
      rgba(7,7,7,.94) 46%,
      rgba(7,7,7,.66) 55%,
      rgba(7,7,7,.12) 62%,
      rgba(7,7,7,0)   68%),
    linear-gradient(180deg,
      rgba(7,7,7,.22) 0%,
      rgba(7,7,7,0)   20%,
      rgba(7,7,7,0)   100%);
}

.nav{
  position:absolute;top:32px;left:64px;right:64px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav__brand{font-size:13px;font-weight:600;letter-spacing:4px;line-height:1;color:var(--bone)}
.nav__meta{font-size:10px;font-weight:500;letter-spacing:2px;line-height:1;color:var(--smoke)}

.hero__copy{position:absolute;top:193px;left:128px;width:456px;z-index:2}
.hero__copy h1{margin-top:20px;font-size:32px;line-height:1.12;letter-spacing:-.45px}
.hero__copy .lede{margin-top:20px;font-size:16px;line-height:1.5;color:var(--smoke)}
.hero__copy .note{margin-top:18px}
.hero__copy .btn-row{margin-top:18px}

/* ============================================================
   THE AUTOLUXX STANDARD
   ============================================================ */
.standard{background:var(--ink-raised);height:478px}
.standard__grid{
  display:grid;grid-template-columns:544px 480px;column-gap:69px;
  padding-left:70px;padding-right:70px;align-items:start;
}
.standard__media{margin-top:60px}
.standard__media img{width:544px;height:373px;object-fit:cover}
.standard__copy{margin-top:132px}
.standard__copy h2{margin-top:18px;font-size:38px;line-height:1.08;letter-spacing:-1px}
.standard__copy .body{margin-top:18px;font-size:16px;line-height:1.65;color:var(--smoke)}

/* ============================================================
   THE DETAILING JOURNEY — pinned scroll gallery
   ============================================================ */
.journey{padding:80px 0 88px}
.journey__head h2{margin-top:14px;max-width:680px;font-size:42px;line-height:1.1;letter-spacing:-1px}

.journey__track{position:relative;height:4200px;margin-top:32px}
.journey__sticky{position:sticky;top:100px;height:600px}

.steps{position:relative;height:600px}
.step{
  position:absolute;inset:0;
  display:grid;grid-template-columns:567px 397px;column-gap:48px;
  align-items:center;padding:34px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s;
}
.step.is-active{opacity:1;visibility:visible;transform:none}

.step__media{position:relative;width:567px;height:532px;overflow:hidden}
.step__media img{width:100%;height:100%;object-fit:cover}
.step__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 62% 54%,rgba(0,0,0,0) 28%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.62) 100%);
}
.step__copy .index{font-size:11px;font-weight:600;letter-spacing:2px;line-height:1;color:var(--smoke)}
.step__copy h3{margin-top:16px;font-size:34px;line-height:1.1}
.step__copy .body{margin-top:16px;font-size:15px;line-height:1.65;color:var(--smoke)}

/* ============================================================
   BEYOND THE ROAD
   ============================================================ */
.aviation-intro{
  height:624px;
  background:radial-gradient(60% 58% at 50% 58%,#151515 0%,#090909 50%,#050505 100%);
}
.aviation-intro__inner{max-width:1425px;margin:0 auto;padding:76px 64px 0;text-align:center}
.aviation-intro h2{margin-top:24px;font-size:48px;line-height:1.1;letter-spacing:-1px}
.aviation-intro .lede{
  max-width:620px;margin:10px auto 0;
  font-size:16px;line-height:1.6;color:var(--bone-84);
}
.aviation-intro__media{max-width:745px;margin:11px auto 0}
.aviation-intro__media img{width:745px;height:382px;object-fit:cover;max-width:100%}

/* ============================================================
   CABIN CARE DETAIL
   ============================================================ */
.aviation{background:var(--ink-raised);padding:88px 0 80px}
.aviation__head h2{max-width:720px;font-size:40px;line-height:1.14;letter-spacing:-1px}
.aviation__head .body{
  margin-top:22px;max-width:56ch;
  font-size:16px;line-height:1.6;color:var(--bone-84);
}

.cards{display:grid;grid-template-columns:repeat(3,1fr);column-gap:52px;padding:0 18px;margin-top:48px}
.card h3{font-size:20px;line-height:1.2}
.card .body{margin-top:12px;font-size:14px;line-height:1.6;color:var(--bone-84)}
.aviation .center-row{margin-top:21px}

/* ============================================================
   FOUNDING CLIENT ACCESS
   ============================================================ */
.founding{
  padding:88px 0 80px;
  background:radial-gradient(50% 50% at 50% 45%,#242424 0%,#0d0d0d 45%,#080808 85%);
}
.founding__head{max-width:760px;margin:0 auto;text-align:center}
.founding__head h2{margin-top:24px;font-size:46px;line-height:1.08;letter-spacing:-1px}
.founding__head .body{
  margin:12px auto 0;max-width:56ch;
  font-size:16px;line-height:1.65;color:var(--smoke);
}

.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:48px;
  padding:28px 18px 0;margin-top:17px;border-top:1px solid var(--line-soft);
}
.stat__value{font-family:var(--display);font-weight:500;font-size:30px;line-height:1;color:var(--bone)}
.stat__value--sm{font-size:25px}
.stat__value--xs{font-size:18px}
.stat__label{margin-top:10px;font-size:9px;font-weight:600;letter-spacing:1.5px;line-height:1;color:var(--smoke)}
.founding .center-row{margin-top:48px}

/* ============================================================
   RESERVE
   ============================================================ */
.reserve{background:var(--ink-form);padding:88px 0 88px}
.reserve__inner{max-width:678px;margin:0 auto;padding:0 24px}
.reserve__head h2{font-size:34px;line-height:1.1;letter-spacing:0}
.reserve__head .body{
  margin-top:26px;max-width:56ch;
  font-size:15px;line-height:1.6;color:var(--smoke);
}
.form{margin-top:25px}

.field{border-bottom:1px solid var(--line);padding:14px 13px 13px;margin-bottom:11px;transition:border-color .35s var(--ease)}
.field:focus-within{border-bottom-color:var(--bone-62)}
.field input{
  width:100%;background:transparent;border:0;padding:0;color:var(--bone);
  display:block;font-family:var(--text);font-size:14px;line-height:1.2;height:22px;
}
.field input::placeholder{color:var(--smoke)}
.field input:focus{outline:none}
.field.is-invalid{border-bottom-color:#8a4a4a}

.form__status:empty{display:none}
.form__status{margin-top:16px;font-size:12px;line-height:1.4;color:var(--smoke);min-height:17px}
.form__status.is-ok{color:var(--bone)}
.form__status.is-error{color:#c98a8a}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink-deep);padding:80px 0 28px}
.footer__grid{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,420px);
  justify-content:space-between;column-gap:24px;
}

.footer__logo{width:189px;height:98px;object-fit:contain;object-position:left center}
.footer__tag{margin-top:17px;font-size:12px;font-weight:600;letter-spacing:1.3px;line-height:1;color:var(--bone)}
.footer__city{margin-top:16px;font-size:11px;font-weight:500;letter-spacing:1.5px;line-height:1;color:var(--bone-62)}

.footer__blurb{font-size:14px;line-height:1.55;color:var(--bone-78)}
.footer__label{margin-top:18px;font-size:10px;font-weight:600;letter-spacing:2px;line-height:1;color:var(--bone-62)}
.footer__info a{
  display:inline-block;width:auto;margin-top:8px;
  font-size:14px;font-weight:500;line-height:1.4;color:var(--bone);
  transition:opacity .3s var(--ease);
}
.footer__info a:hover{opacity:.7}
/* placeholder contact detail: styled like a link but deliberately not one,
   so nothing dials a number that isn't yours yet */
.footer__pending{
  display:block;margin-top:8px;font-size:14px;font-weight:500;line-height:1.4;
  color:var(--bone-62);
}
.footer__info a + a{display:block}
.footer__cta{
  display:block !important;margin-top:16px;
  font-size:11px !important;font-weight:600 !important;letter-spacing:1px;
}

.footer__base{display:flex;justify-content:space-between;gap:16px;margin-top:55px}
.footer__base p{font-size:11px;line-height:1;letter-spacing:.4px;color:var(--bone-56)}
.footer__base p:last-child{font-weight:500;letter-spacing:1px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1300px){
  .hero__copy{left:64px}
  .standard__grid{padding-left:40px;padding-right:40px;grid-template-columns:minmax(0,1fr) 420px;column-gap:48px}
  .standard__media img{width:100%;height:340px}
}

@media (max-width:1080px){
  .step{grid-template-columns:1fr 340px;column-gap:36px}
  .step__media{width:100%}
  .journey__head h2{font-size:34px}
  .aviation-intro h2{font-size:38px}
  .aviation__head h2{font-size:32px}
  .founding__head h2{font-size:36px}
}

@media (max-width:960px){
  /* The portrait crop needs a portrait frame. At 640px tall it was being
     cover-cropped into a landscape box, dragging the bodywork straight
     across the copy. Fill the viewport instead. */
  .hero{height:auto;min-height:100svh;padding-bottom:64px}
  .hero__copy{position:static;width:auto;max-width:520px;padding:150px 24px 0;left:auto;top:auto}
  .nav{left:24px;right:24px}

  .standard{height:auto;padding:64px 0}
  .standard__grid{grid-template-columns:1fr;padding:0 24px;row-gap:32px}
  .standard__media,.standard__copy{margin-top:0}
  .standard__media img{width:100%;height:auto;aspect-ratio:544/373}
  .standard__copy h2{font-size:30px}

  /* journey unpins and stacks, matching the source build's mobile variant */
  .journey{padding:64px 0}
  .journey__track{height:auto;margin-top:48px}
  .journey__sticky{position:static;height:auto}
  .steps{height:auto;display:flex;flex-direction:column;gap:56px}
  .step{
    position:static;inset:auto;opacity:1;visibility:visible;transform:none;
    grid-template-columns:1fr;row-gap:20px;padding:0;
  }
  .step__media{width:100%;height:auto;aspect-ratio:16/9}
  .step__copy h3{font-size:24px}
  .step__copy .index{font-size:10px;letter-spacing:1.8px}
  .step__copy .body{font-size:16px;line-height:1.55}

  .aviation-intro{height:auto;padding-bottom:64px}
  .aviation-intro__inner{padding:64px 24px 0}
  .aviation-intro h2{font-size:34px}
  .aviation-intro__media img{width:100%;height:auto;aspect-ratio:745/382}

  .aviation{padding:64px 0}
  .aviation__head h2{font-size:30px}
  .cards{grid-template-columns:1fr;row-gap:32px;padding:0;margin-top:44px}
  .card h3{font-size:22px}
  .card .body{font-size:16px;line-height:1.5}
  .aviation .center-row{margin-top:40px;justify-content:flex-start}

  .founding{padding:64px 0}
  .founding__head h2{font-size:36px}
  .founding__head .body{margin-top:18px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:28px;padding:28px 0 0;margin-top:44px}
  .stat__value{font-size:26px}
  .stat__value--sm{font-size:22px}
  .stat__value--xs{font-size:13px}
  .stat__label{font-size:8px;letter-spacing:1px}
  .founding .center-row{margin-top:44px}

  .reserve{padding:64px 0}
  .reserve__head h2{font-size:36px}
  .reserve__head .body{font-size:16px}

  .footer{padding:64px 0 24px}
  .footer__grid{grid-template-columns:1fr;row-gap:36px}
  .footer__base{margin-top:44px}
}

@media (max-width:640px){
  .hero__copy h1{font-size:30px;letter-spacing:-.35px}
  .journey__head h2,.aviation-intro h2,.founding__head h2,.reserve__head h2{font-size:28px}
  .nav__meta{display:none}
  .hero__copy{padding-top:120px}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .footer__base{flex-direction:column;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .step{transition:opacity .2s linear}
}

/* ============================================================
   TOUCH TARGETS — mobile only, so desktop geometry is untouched.
   Text links and inputs were 13-22px tall; WCAG wants 44px.
   ============================================================ */
@media (max-width:960px){
  .btn{min-height:44px}

  .nav__brand{display:inline-flex;align-items:center;min-height:44px}

  .field{padding-top:0;padding-bottom:0;margin-bottom:8px}
  .field input{height:44px;line-height:44px}

  .footer__info a,
  .footer__info a + a{
    display:flex;align-items:center;min-height:44px;
    margin-top:0;width:fit-content;
  }
  .footer__cta{
    display:inline-flex !important;align-items:center;
    min-height:44px;margin-top:12px;
  }
  .footer__label{margin-top:14px}
}

/* ============================================================
   REDUCED MOTION — the pinned gallery is scroll-jacking, which
   is a motion-sickness trigger. Fall back to the stacked layout.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .journey__track{height:auto;margin-top:48px}
  .journey__sticky{position:static;height:auto}
  .steps{height:auto;display:flex;flex-direction:column;gap:56px}
  .step{
    position:static;inset:auto;opacity:1;visibility:visible;transform:none;
    transition:none;
  }
  .step__media{height:auto;aspect-ratio:567/532}
  .btn,.footer__info a{transition:none}
}

/* ============================================================
   ULTRA-WIDE — the source build pins content to fixed left
   offsets, which strands it on the far left past ~1600px.
   Anchor those offsets to a centred 1425px stage instead;
   at 1425px and below the maths resolves to the original values.
   ============================================================ */
/* max() keeps the offset at exactly 0 up to 1440px, so the original
   64 / 128 / 70 values hold with or without a visible scrollbar,
   then the stage centres smoothly on wider screens. */
@media (min-width:1301px){
  .nav{
    left:calc(max(0px,(100% - 1440px) / 2) + 64px);
    right:calc(max(0px,(100% - 1440px) / 2) + 64px);
  }
  .hero__copy{left:calc(max(0px,(100% - 1440px) / 2) + 128px)}
  .standard__grid{max-width:1440px;margin-left:auto;margin-right:auto}
}

/* ============================================================
   COARSE POINTERS — touch tablets sit above the 960px
   breakpoint, so size targets by input type, not just width.
   ============================================================ */
@media (pointer:coarse){
  .btn{min-height:44px}
  .nav__brand{display:inline-flex;align-items:center;min-height:44px}
  .field{padding-top:0;padding-bottom:0}
  .field input{height:44px;line-height:44px}
  .footer__info a,
  .footer__info a + a{
    display:flex;align-items:center;min-height:44px;width:fit-content;
  }
  .footer__cta{display:inline-flex !important;align-items:center;min-height:44px}
}

/* ============================================================
   VERY NARROW — below ~380px two stat columns stop fitting.
   ============================================================ */
@media (max-width:380px){
  .stats{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .shell,.reserve__inner{padding-left:18px;padding-right:18px}
  .hero__copy{padding-left:18px;padding-right:18px}
  .standard__grid{padding-left:18px;padding-right:18px}
  .aviation-intro__inner{padding-left:18px;padding-right:18px}
}

/* ============================================================
   HERO ART DIRECTION
   Phones get a portrait crop. Between 641-960px the landscape
   original is still used, so bias the crop toward the car
   (it sits at roughly 70% across) instead of dead centre.
   ============================================================ */
/* 641-960px now uses the portrait crop; see PORTRAIT HERO below. */


@media (max-width:640px){
  .hero{min-height:640px}
  .hero__media img{object-position:center bottom}
  /* The car now fills the lower frame, so the scrim has to hold contrast
     behind the copy (which runs to ~82% of the hero) and then release,
     letting the bodywork and floor reflection read at full strength. */
  .hero__media::after{
    background:linear-gradient(180deg,
      rgba(7,7,7,.80) 0%,
      rgba(7,7,7,.74) 30%,
      rgba(7,7,7,.72) 55%,
      rgba(7,7,7,.66) 76%,
      rgba(7,7,7,.20) 88%,
      rgba(7,7,7,.42) 100%);
  }
}

/* ============================================================
   SCROLL REVEAL
   Mirrors the source build's entrance motion: elements start
   just below their resting position at ~0 opacity and settle
   as they enter the viewport. Final state is translateY(0),
   so measured geometry is unchanged.
   ============================================================ */
/* CSS never hides anything on its own. JS adds .pre itself, so if the
   script never runs the content simply stays visible. Failure is open. */
.reveal.pre{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal--sm.pre{transform:translateY(12px)}
.reveal--lg.pre{transform:translateY(20px)}
.reveal.pre.is-in{opacity:1;transform:none}

/* stagger inside a group */
.reveal--d1{transition-delay:.08s}
.reveal--d2{transition-delay:.16s}
.reveal--d3{transition-delay:.24s}
.reveal--d4{transition-delay:.32s}
.reveal--d5{transition-delay:.40s}

/* smooth anchor jumps for the CTAs */
html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal.pre{opacity:1;transform:none;transition:none}
}

/* ============================================================
   HERO ENTRANCE — pure CSS, no JavaScript.
   The hero is above the fold and must never depend on a script
   to become visible. A CSS animation runs the moment the
   stylesheet parses; if it somehow does not, the elements have
   no hidden state to be stuck in.
   ============================================================ */
@keyframes heroRise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
.hero__copy > *{animation:heroRise .8s var(--ease) both}
.hero__copy > .eyebrow{animation-duration:.7s}
.hero__copy > h1{animation-delay:.08s}
.hero__copy > .lede{animation-delay:.16s}
.hero__copy > .note{animation-delay:.24s}
.hero__copy > .btn-row{animation-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .hero__copy > *{animation:none}
}


/* ============================================================
   MOBILE HERO - brighter car, tighter copy block
   ============================================================ */
@media (max-width:640px){
  /* Full viewport on phones. svh accounts for the browser chrome, with
     vh as the fallback for engines that do not support it. */
  .hero{min-height:100vh;min-height:100svh;padding-bottom:0}
  /* clearance from the fixed brand mark at the top */
  /* The copy block is pulled up and tightened so it ends above the
     bodywork. That is what lets the scrim release before the car
     instead of sitting on the hood. */
  .hero__copy{padding-top:120px}
  .hero__copy h1{margin-top:10px;font-size:34px}
  .hero__copy .lede{margin-top:10px}
  .hero__copy .note{margin-top:12px}
  .hero__copy .btn-row{margin-top:14px;gap:8px}
}

/* ============================================================
   PORTRAIT HERO - every viewport up to 960px
   The landscape original puts the car behind a horizontal scrim
   built for a left-hand copy column. In a portrait frame that
   scrim lands on the bodywork and the copy lands on the bright
   floor, so tablets read both dark AND low-contrast. The portrait
   crop plus a vertical scrim fixes both: copy sits on the black
   upper backdrop, the scrim releases above the car.
   ============================================================ */
@media (max-width:960px){
  /* A 16:9 frame filling a portrait viewport crops to about a quarter of
     its width - a wheel, not a car. So the photo is anchored as a band at
     the bottom instead, wide enough to hold the whole vehicle, with the
     copy above it. The image's own top half is black and the hero ground
     is #070707, so the band's upper edge blends with no seam. */
  .hero__media{top:auto;bottom:0;height:54svh;min-height:330px}
  .hero__media img{object-position:78% center}
  .hero__media::after{
    /* No veil over the photo. The upper frame of the crop is already
       near-black (luminance ~4.5), so the headline and lede clear 20:1
       unaided; only the two elements that physically overlap the
       bodywork carry their own backing. See .hero .btn--ghost / .note. */
    background:none;
  }
}

/* ============================================================
   MOBILE HEADINGS - brief's stated ranges
   ============================================================ */
@media (max-width:640px){
  .journey__head h2,
  .aviation-intro h2,
  .aviation__head h2,
  .founding__head h2{font-size:30px}
  .standard__copy h2{font-size:30px}
  .reserve__head h2{font-size:34px}
  .step__copy h3{font-size:24px}
  .card h3{font-size:22px}
}

/* ============================================================
   MOBILE JOURNEY IMAGES - soft side fade, gentle appear
   ============================================================ */
@media (max-width:960px){
  .step__media{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
  }
  .step__vignette{
    background:radial-gradient(78% 62% at 50% 50%,rgba(0,0,0,0) 40%,rgba(0,0,0,.30) 78%,rgba(0,0,0,.62) 100%);
  }

  /* Scroll-driven, so it needs no JavaScript. Browsers without
     animation-timeline simply show the image, which is the safe default. */
  @supports (animation-timeline: view()){
    .step__media{
      animation:stepAppear linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 55%;
    }
    @keyframes stepAppear{
      from{opacity:0;transform:translateY(18px) scale(.985)}
      to{opacity:1;transform:none}
    }
  }
}

/* ============================================================
   FOOTER - readable contact groups, uncropped logo
   ============================================================ */
.footer__info a{margin-top:10px}
.footer__label{margin-top:26px}

@media (max-width:960px){
  .footer__logo{width:150px;height:auto;object-fit:contain}
  .footer__grid{row-gap:28px}
  .footer__blurb{margin-bottom:4px}
}

@media (max-width:640px){
}

@media (prefers-reduced-motion:reduce){
  .step__media{animation:none !important}
}

@media (pointer:coarse){
}


/* ============================================================
   SHORT PHONES
   Must be last in the file: the earlier max-width:640px blocks
   have equal specificity and would otherwise win on source order.

   On a short viewport the image scales by width, so object-position
   bottom trims the added headroom off the top and the copy lands
   back on the bodywork. Heavier scrim only here.
   ============================================================ */
@media (max-width:640px) and (max-height:740px){
  /* scrim intentionally NOT overridden here: one scrim for every phone. */
  .hero__copy{padding-top:110px}
  .hero__copy h1{font-size:29px}
  .hero__copy .btn-row{margin-top:12px}
  .hero__copy .lede{font-size:15px}
}

/* ============================================================
   IMAGE EDGE BLENDING
   The photos were hard-edged rectangles reading as boxes on the
   black ground. Two linear masks intersected fade every edge, so
   the subject emerges from the background instead of sitting in
   a frame. Masking the image itself (not an overlay on top) means
   the fade goes to true transparency and picks up whatever the
   section background is.
   ============================================================ */
.standard__media img,
.aviation-intro__media img{
  -webkit-mask-image:
    linear-gradient(90deg,  transparent 0, #000 15%, #000 85%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg,  transparent 0, #000 15%, #000 85%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-composite:intersect;
}

/* The journey stills carry an inner vignette already; the mask
   removes the straight outer cut that still framed them. */
.step__media img{
  -webkit-mask-image:
    linear-gradient(90deg,  transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(90deg,  transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-composite:intersect;
}

/* The step vignette sat above the image and re-drew a hard edge;
   soften it so the two treatments agree. */
.step__vignette{
  background:radial-gradient(74% 58% at 58% 52%,
    rgba(0,0,0,0) 42%, rgba(0,0,0,.22) 76%, rgba(0,0,0,.52) 100%);
}

@media (max-width:960px){
  /* mobile already faded the sides; match the vertical treatment too */
  .step__media{-webkit-mask-image:none;mask-image:none}
  .step__media img{
    -webkit-mask-image:
      linear-gradient(90deg,  transparent 0, #000 10%, #000 90%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 8%,  #000 92%, transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:
      linear-gradient(90deg,  transparent 0, #000 10%, #000 90%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 8%,  #000 92%, transparent 100%);
            mask-composite:intersect;
  }
}

/* ============================================================
   WAITLIST FORM
   Three fields, so it reads as a short commitment rather than
   an application. Labels float instead of living in the
   placeholder: a placeholder vanishes the moment someone types,
   which leaves filled fields unlabelled on review.
   ============================================================ */
.field{position:relative;border-bottom:1px solid var(--line);margin-bottom:26px;
       padding:22px 13px 12px;transition:border-color .3s var(--ease)}
.field:focus-within{border-bottom-color:var(--bone-62)}

.field input{
  width:100%;display:block;background:transparent;border:0;padding:0;
  color:var(--bone);font-family:var(--text);font-size:15px;line-height:1.4;height:24px;
}
.field input:focus{outline:none}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--bone);
  -webkit-box-shadow:0 0 0 1000px var(--ink-form) inset;transition:background-color 9999s}

.field label{
  position:absolute;left:13px;top:22px;pointer-events:none;
  font-size:15px;line-height:1.4;color:var(--smoke);
  transform-origin:left top;
  transition:transform .22s var(--ease), color .22s var(--ease);
}
/* raised whenever the field is focused or already holds a value */
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform:translateY(-19px) scale(.72);
  color:var(--bone-62);letter-spacing:1.2px;text-transform:uppercase;
}
.field input:focus + label{color:var(--bone)}

.field__err{
  display:block;min-height:0;margin-top:6px;
  font-size:11px;line-height:1.4;color:#d08b8b;
}
.field__err:empty{margin-top:0}
.field.is-invalid{border-bottom-color:#8a4a4a}

/* Touch: the input itself must clear 44px, and the floating label shares its
   line box so the two stay optically aligned as the label rises. */
@media (max-width:960px), (pointer:coarse){
  .field{padding:16px 0 10px}
  .field input{height:44px;line-height:44px;font-size:16px}  /* 16px stops iOS zooming on focus */
  .field label{left:0;top:16px;line-height:44px;font-size:16px}
  .field input:focus + label,
  .field input:not(:placeholder-shown) + label{transform:translateY(-21px) scale(.7)}
}

@media (max-width:640px){
  .field{margin-bottom:22px}
}