/* ===== Fonts ===== */
@font-face{font-family:'Assistant';src:url('../../fonts/Assistant-ExtraLight.woff2') format('woff2'),url('../../fonts/Assistant-ExtraLight.woff') format('woff');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Assistant';src:url('../../fonts/Assistant-Light.woff2') format('woff2'),url('../../fonts/Assistant-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Assistant';src:url('../../fonts/Assistant-Regular.woff2') format('woff2'),url('../../fonts/Assistant-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Assistant';src:url('../../fonts/Assistant-Medium.woff2') format('woff2'),url('../../fonts/Assistant-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Assistant';src:url('../../fonts/Assistant-SemiBold.woff2') format('woff2'),url('../../fonts/Assistant-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Assistant';src:url('../../fonts/Assistant-Bold.woff2') format('woff2'),url('../../fonts/Assistant-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Assistant';src:url('../../fonts/Assistant-ExtraBold.woff2') format('woff2'),url('../../fonts/Assistant-ExtraBold.woff') format('woff');font-weight:800;font-style:normal;font-display:swap}

@font-face{font-family:'Infiniti Brand';src:url('../../fonts/1716985727401_-_InfinitiBrandLight.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Infiniti Brand';src:url('../../fonts/1716985679379_-_InfinitiBrandRegular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Infiniti Brand';src:url('../../fonts/1716985744967_-_InfinitiBrandBold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

/* ===== Palette (campaign) ===== */
:root{
  --navy:#020b24;
  --teal:#00d6d1;
  --beige:#efede9;
  --gold:#b0a591;
  --white:#ffffff;
  --black:#000000;
  --line:#dedfe2;
  --muted:#4f5052;
  --placeholder:#6e8aa8;
  --pollution:#f90000;
  --safety:#0092e3;

  --rail-w:430px;
  --font:'Assistant',sans-serif;
  --font-brand:'Infiniti Brand','Assistant',sans-serif;

  /* Desktop gutters/gaps — the Figma values at the 1920 design width. */
  --gutter-r:80px;
  --gutter-l:64px;
  --section-pad:128px;
  --hero-gap:128px;
  --benefits-gap:48px;
}

/* Between the 1025px breakpoint and the 1920 design width the design's content
   (1490px) no longer fits beside the 430px rail, so fixed gutters push the
   video and the body copy off the left edge. Interpolate them instead; at the
   design width the clamps sit at their max and the layout is unchanged. */
@media (min-width:1025px) and (max-width:1919px){
  :root{
    --gutter-r:clamp(30px,calc(10.4vw - 118px),80px);
    --gutter-l:clamp(24px,calc(8.33vw - 94px),64px);
    --section-pad:clamp(40px,calc(18.33vw - 221px),128px);
    --hero-gap:clamp(40px,calc(18.33vw - 221px),128px);
    --benefits-gap:clamp(24px,calc(5vw - 47px),48px);
  }
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0;direction:rtl;
  font-family:var(--font);
  color:var(--navy);
  background:var(--white);
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
img,video{height:auto}
button{font-family:inherit;cursor:pointer;border:0;background:none;padding:0;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

/* ===== Page shell ===== */
/* Past the 1920 design width there is nothing left to interpolate: the content
   column just keeps growing, which drags the hero copy away from the video and
   blows the 360 car far past the size it was drawn at (at 3840 the stage is
   3139px instead of 1234). Instead of capping the width (which leaves empty
   gutters) the shell keeps laying out at the 1920 design width and is scaled up
   proportionally — app.js sets --page-zoom to clientWidth/1920 above 1920px, so
   the page still spans the whole screen at the designed proportions.
   100vh is not divided by the zoom factor, hence the calc() below. */
.page{
  display:flex;align-items:stretch;
  zoom:var(--page-zoom,1);
  min-height:calc(100vh / var(--page-zoom,1));
}
.page-content{flex:1;min-width:0}
main{display:block}

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

.only-desktop{display:block}
.only-mobile{display:none}

@media (max-width:1024px){
  .page{display:block}
  .only-desktop{display:none}
  .only-mobile{display:block}
}