/* ==========================================================================
   KIDON — Airsoft Team Landing Page
   Tactical / Hebrew RTL. All palette + type tokens live in :root.
   ========================================================================== */

:root{
  /* surfaces */
  --bg:        #0a0a09;
  --bg-2:      #0e0f0d;
  --card:      #131412;
  --input:     #191a17;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.15);

  /* text */
  --txt:       #f2f3f0;
  --dim:       #9a9f97;
  --dimmer:    #63685f;

  /* olive accent — light tone for text, deeper tone for filled buttons */
  --acc:       #8a9a55;
  --acc-lit:   #a3b46a;
  --acc-btn:   #5f7133;
  --acc-btn-h: #728843;
  --acc-soft:  rgba(138,154,85,.12);
  --acc-line:  rgba(138,154,85,.35);

  /* type */
  --f-sans: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* JetBrains Mono carries no Hebrew — Heebo catches those glyphs so mono
     labels stay in the same family as the rest of the page. */
  --f-mono: 'JetBrains Mono', 'Heebo', ui-monospace, 'SF Mono', Menlo, monospace;

  /* layout */
  --wrap: 1240px;
  --nav-h: 78px;
  --r: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-sans);
  font-size:17px;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
::selection{ background:var(--acc); color:#0a0a09; }
:focus-visible{ outline:2px solid var(--acc-lit); outline-offset:3px; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:28px;
}

/* the olive half of a two-tone heading */
.acc{ color:var(--acc); }

/* ==========================================================================
   EYEBROW  —  "// היחידה"
   ========================================================================== */
.eyebrow{
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--acc);
}
.eyebrow::before{ content:'//'; opacity:.75; }
.eyebrow--center{ justify-content:center; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:60;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  border-block-end:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(10,10,9,.85);
  backdrop-filter:blur(16px) saturate(140%);
  border-block-end-color:var(--line);
}
.nav__inner{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{ display:flex; align-items:center; }

/* team crest — the artwork already contains the KIDON wordmark, so no text
   sits beside it. Height is capped by the 78px nav. */
.brand__logo{
  height:56px;
  width:auto;
  display:block;
  transition:opacity .25s var(--ease);
}
.brand:hover .brand__logo{ opacity:.82; }

.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a{
  font-family:var(--f-mono);
  font-size:12.5px;
  font-weight:400;
  letter-spacing:.1em;
  color:var(--dim);
  position:relative;
  padding-block:6px;
  transition:color .25s var(--ease);
}
.nav__links a:not(.nav__cta)::after{
  content:'';
  position:absolute;
  inset-block-end:0;
  inset-inline-start:0;
  width:0; height:1px;
  background:var(--acc);
  transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--txt); }
.nav__links a:not(.nav__cta):hover::after,
.nav__links a.is-current:not(.nav__cta)::after{ width:100%; }
.nav__links a.is-current{ color:var(--txt); }

/* solid CTA in the nav, matching the reference */
.nav__cta{
  background:var(--acc-btn);
  color:#fff !important;
  font-weight:700 !important;
  padding:12px 22px !important;
  transition:background .25s var(--ease);
}
.nav__cta:hover{ background:var(--acc-btn-h); }

.nav__burger{
  display:none;
  width:42px; height:42px;
  background:none;
  border:1px solid var(--line-2);
  padding:0;
  position:relative;
}
.nav__burger span{
  position:absolute;
  inset-inline:11px;
  height:1.5px;
  background:var(--txt);
  transition:transform .3s var(--ease), opacity .2s;
}
.nav__burger span:nth-child(1){ top:14px; }
.nav__burger span:nth-child(2){ top:20px; }
.nav__burger span:nth-child(3){ top:26px; }
.nav__burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   HERO  —  centred, heavy two-line slogan
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  overflow:hidden;
  padding:var(--nav-h) 28px 130px;
}

.hero__media{
  position:absolute; inset:0; z-index:0;
  /* tone behind the video so a missing file still reads as intentional */
  background:radial-gradient(115% 85% at 50% 25%, #1b1e19 0%, #0a0a09 68%), var(--bg);
}
/* two stacked players cross-fade into each other */
.hero__video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* clips are portrait 576×1024 — bias the visible band slightly above centre,
     where heads and torsos sit */
  object-position:center 42%;
  filter:saturate(.45) contrast(1.05) brightness(.55);
  opacity:0;
  transition:opacity 1.2s linear;
}
.hero__video.is-active{ opacity:1; }

/* Once the viewport is wider than it is tall, a 576px-wide portrait clip has to
   be upscaled ~2.5× to cover it, which shows as mush. A deliberate blur reads
   as depth-of-field instead of low resolution; the slight scale hides the soft
   edges blur leaves at the boundary. Portrait phones skip this and stay sharp. */
@media (min-aspect-ratio: 1/1){
  .hero__video{
    filter:saturate(.45) contrast(1.06) brightness(.52) blur(3px);
    scale:1.06;
  }
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bg) 1%, rgba(10,10,9,.45) 40%, rgba(10,10,9,.7) 100%),
    radial-gradient(70% 60% at 50% 50%, transparent 0%, rgba(10,10,9,.55) 100%);
}

.hero__content{ position:relative; z-index:2; max-width:920px; }

.hero__title{
  margin:0;
  font-size:clamp(44px, 7.6vw, 106px);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.025em;
  text-shadow:0 16px 54px rgba(0,0,0,.6);
}

.hero__sub{
  margin:28px auto 0;
  max-width:56ch;
  font-size:clamp(16px, 1.5vw, 19px);
  color:#cdd1c8;
}

.hero__actions{
  margin-block-start:38px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}

.hero__foot{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  z-index:2;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:0 28px 32px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}
.hero__status{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--dim);
  border:1px solid var(--line);
  background:rgba(10,10,9,.5);
  backdrop-filter:blur(6px);
  padding:8px 14px;
}
.dot{
  width:7px; height:7px;
  background:var(--acc-lit);
  border-radius:50%;
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(163,180,106,.5); }
  70%  { box-shadow:0 0 0 9px rgba(163,180,106,0); }
  100% { box-shadow:0 0 0 0 rgba(163,180,106,0); }
}
.hero__scroll{
  width:25px; height:44px;
  border:1px solid var(--line-2);
  position:relative;
  flex:none;
}
.hero__scroll span{
  position:absolute;
  inset-inline-start:50%;
  translate:-50% 0;
  top:8px;
  width:2px; height:9px;
  background:var(--acc-lit);
  animation:scrolldot 1.9s var(--ease) infinite;
}
@keyframes scrolldot{
  0%,100%{ transform:translateY(0); opacity:1; }
  60%    { transform:translateY(16px); opacity:.15; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:16px 36px;
  font-family:var(--f-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  border:1px solid transparent;
  border-radius:var(--r);
  position:relative;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }

/* olive fill + white text, as in the reference */
.btn--solid{ background:var(--acc-btn); color:#fff; }
.btn--solid:hover{ background:var(--acc-btn-h); }

.btn--ghost{ border-color:var(--line-2); color:var(--txt); background:transparent; }
.btn--ghost:hover{ border-color:var(--acc); color:var(--acc-lit); }

.btn--block{ width:100%; padding-block:19px; font-size:13.5px; }
.btn__ico{ width:18px; height:18px; flex:none; scale:-1 1; }  /* plane points with the text */
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{
  position:relative;
  padding-block:clamp(88px, 10vw, 145px);
  border-block-start:1px solid var(--line);
}
.section--alt{ background:var(--bg-2); }

.sec-head{ max-width:62ch; margin-block-end:clamp(46px, 5.5vw, 70px); }
.sec-head--center{ margin-inline:auto; text-align:center; }

.sec-title{
  margin:0;
  font-size:clamp(31px, 4.4vw, 56px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
}
.sec-title--sm{ font-size:clamp(28px, 3.4vw, 44px); }
.sec-text{ margin:22px 0 0; color:var(--dim); max-width:60ch; }
.sec-head--center .sec-text{ margin-inline:auto; }

/* ---- stats: bare row of olive numbers, hairline dividers ---- */
.stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-block:1px solid var(--line);
  padding-block:46px;
  margin-block-end:clamp(44px, 5vw, 72px);
}
.stat{ text-align:center; padding-inline:18px; }
.stat + .stat{ border-inline-start:1px solid var(--line); }
.stat b{
  display:block;
  direction:ltr;                 /* so "40+" reads correctly inside RTL */
  font-size:clamp(34px, 3.6vw, 46px);
  font-weight:800;
  line-height:1;
  color:var(--acc);
  letter-spacing:-.02em;
}
.stat span{
  display:block;
  margin-block-start:11px;
  font-size:13px;
  color:var(--dim);
}

/* ---- value cards with outlined icons ---- */
.values{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.value{
  background:var(--card);
  border:1px solid var(--line);
  padding:32px 28px 34px;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.value:hover{
  border-color:var(--acc-line);
  background:#171814;
  transform:translateY(-3px);
}
.value__icon{
  display:block;
  width:30px; height:30px;
  color:var(--acc);
  margin-block-end:22px;
}
.value h3{
  margin:0 0 11px;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
}
.value p{ margin:0; font-size:15px; color:var(--dim); line-height:1.68; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.tile{
  margin:0;
  position:relative;
  aspect-ratio:4 / 3.35;
  overflow:hidden;
  background:var(--card);
  cursor:pointer;
}

.tile img{
  width:100%; height:100%;
  object-fit:cover;
  /* desaturated by default, full colour on hover */
  filter:grayscale(1) brightness(.78);
  transition:transform .8s var(--ease), filter .5s var(--ease);
}
.tile:hover img{ transform:scale(1.06); filter:grayscale(0) brightness(1); }

/* a play badge is added only to tiles that carry data-video */
.tile[data-video]::after{
  content:'';
  position:absolute;
  inset-block-start:14px;
  inset-inline-end:14px;
  width:34px; height:34px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(10,10,9,.5);
  backdrop-filter:blur(4px);
}
.tile[data-video]::before{
  content:'';
  position:absolute;
  inset-block-start:25px;
  inset-inline-end:26px;
  z-index:1;
  width:0; height:0;
  /* play glyphs are never mirrored in RTL — same rule as Material/HIG */
  border-left:9px solid #fff;
  border-block:6px solid transparent;
}

/* ==========================================================================
   FORM
   ========================================================================== */
.form{
  max-width:900px;
  margin-inline:auto;
  background:var(--card);
  border:1px solid var(--line);
  padding:clamp(26px, 3.6vw, 46px);
}

.row{ display:grid; gap:20px 22px; margin-block-end:22px; }
.row--2{ grid-template-columns:repeat(2, 1fr); }
.row--3{ grid-template-columns:repeat(3, 1fr); }

.field{ display:flex; flex-direction:column; gap:9px; min-width:0; }

/* small mono labels above the inputs, per the reference */
.field label,
.field .label{
  font-family:var(--f-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--dim);
}
.field label b,
.field .label b{ color:var(--acc); font-weight:500; }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea{
  width:100%;
  background:var(--input);
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--txt);
  font-family:var(--f-sans);
  font-size:15.5px;
  font-weight:300;
  padding:14px 16px;
  transition:border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s;
}
textarea{ resize:vertical; min-height:130px; line-height:1.65; }
input::placeholder, textarea::placeholder{ color:var(--dimmer); font-weight:300; }

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--acc);
  background:#1d1f1a;
  box-shadow:0 0 0 3px var(--acc-soft);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }

/* select */
.select{ position:relative; }
.select select{ appearance:none; padding-inline-end:44px; cursor:pointer; }
.select::after{
  content:'';
  position:absolute;
  inset-block-start:50%;
  inset-inline-end:17px;
  translate:0 -70%;
  width:8px; height:8px;
  /* physical borders on purpose — logical ones flip in RTL and the caret
     would point sideways instead of down */
  border-right:1.5px solid var(--acc);
  border-bottom:1.5px solid var(--acc);
  rotate:45deg;
  pointer-events:none;
}
.select select option{ background:var(--input); color:var(--txt); }

/* radio choices */
.choices{ display:flex; gap:10px; }
.choice{ position:relative; flex:1; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice span{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:13px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--input);
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--dim);
  transition:all .22s var(--ease);
}
.choice:hover span{ color:var(--txt); border-color:var(--line-2); }
.choice input:checked + span{
  border-color:var(--acc);
  background:var(--acc-soft);
  color:var(--acc-lit);
  font-weight:700;
}
.choice input:focus-visible + span{ outline:2px solid var(--acc-lit); outline-offset:2px; }

/* stepper (airsoft gun count) */
.stepper{
  display:flex;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--input);
  overflow:hidden;
}
.stepper:focus-within{ border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.stepper input{
  flex:1;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  text-align:center;
  font-family:var(--f-mono);
  font-size:18px;
  font-weight:700;
  color:var(--acc-lit);
  cursor:ns-resize;
  padding-inline:0;
}
.stepper__btn{
  width:52px;
  flex:none;
  background:rgba(255,255,255,.03);
  border:none;
  border-inline:1px solid var(--line);
  font-size:20px;
  line-height:1;
  color:var(--dim);
  transition:background .2s, color .2s;
}
.stepper__btn:hover{ background:var(--acc-btn); color:#fff; }

/* validation */
.err{ font-size:12.5px; color:#e2685b; }
.field.has-err input,
.field.has-err select,
.field.has-err textarea,
.field.has-err .stepper{ border-color:#e2685b; }
.field.has-err .choices span{ border-color:rgba(226,104,91,.45); }

.form__note{
  margin:18px 0 0;
  font-size:12.5px;
  color:var(--dimmer);
  text-align:center;
}

.form__result{
  margin-block-start:18px;
  font-size:15px;
  padding:0;
  border-inline-start:2px solid transparent;
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease), padding .3s;
}
.form__result.is-shown{ max-height:220px; padding:16px 18px; }
.form__result.is-ok{ border-inline-start-color:var(--acc); background:var(--acc-soft); color:#c9d69a; }
.form__result.is-bad{ border-inline-start-color:#e2685b; background:rgba(226,104,91,.1); color:#f0a49a; }
.form__result b{ display:block; margin-block-end:4px; font-weight:700; color:#fff; }

#submitBtn.is-loading .btn__label,
#submitBtn.is-loading .btn__ico{ opacity:.3; }
#submitBtn.is-loading::after{
  content:'';
  position:absolute;
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ rotate:360deg; } }

/* ==========================================================================
   FOOTER — 3 columns + bottom bar
   ========================================================================== */
.footer{
  border-block-start:1px solid var(--line);
  background:var(--bg);
  padding-block:64px 30px;
}
.footer__cols{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:44px;
  padding-block-end:44px;
}
/* the footer has room to show the crest properly */
.brand--footer{ margin-block-end:20px; }
.brand--footer .brand__logo{ height:96px; }
.footer__tag{ margin:0; font-size:15px; color:var(--dim); line-height:1.7; }

.footer__col h4{
  margin:6px 0 20px;
  font-family:var(--f-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--txt);
}
.footer__line{
  margin:0 0 11px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14.5px;
  color:var(--dim);
}
.footer__line svg{ width:17px; height:17px; color:var(--acc); flex:none; }
.footer__line a{ transition:color .2s; }
.footer__line a:hover{ color:var(--acc-lit); }

.socials{ display:flex; gap:10px; }
.social{
  width:40px; height:40px;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  display:grid;
  place-items:center;
  color:var(--dim);
  transition:all .25s var(--ease);
}
.social svg{ width:19px; height:19px; }
.social:hover{ border-color:var(--acc); color:var(--acc-lit); background:var(--acc-soft); }

.footer__bar{
  border-block-start:1px solid var(--line);
  padding-block-start:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.footer__bar p{ margin:0; font-size:13px; color:var(--dimmer); }
.footer__mini{ display:flex; gap:26px; }
.footer__mini a{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--dimmer);
  transition:color .2s;
}
.footer__mini a:hover{ color:var(--acc-lit); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb{
  position:fixed; inset:0; z-index:100;
  display:none;
  place-items:center;
  background:rgba(4,5,4,.96);
  backdrop-filter:blur(8px);
  padding:60px 24px;
}
.lb.is-open{ display:grid; animation:fade .25s var(--ease); }
@keyframes fade{ from{ opacity:0; } }

.lb__stage{ max-width:min(1200px, 92vw); max-height:82vh; display:grid; place-items:center; }
.lb__stage img,
.lb__stage video{
  max-width:100%;
  max-height:82vh;
  border:1px solid var(--line-2);
  object-fit:contain;
}
.lb__caption{
  margin:18px 0 0;
  direction:ltr;      /* "2 / 21" would otherwise display reversed as "21 / 2" */
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--dim);
  text-align:center;
}
.lb__close,
.lb__nav{
  position:absolute;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);
  color:var(--txt);
  transition:background .2s, border-color .2s, color .2s;
}
.lb__close:hover,
.lb__nav:hover{ background:var(--acc-btn); border-color:var(--acc-btn); color:#fff; }
.lb__close{ inset-block-start:22px; inset-inline-end:22px; width:44px; height:44px; font-size:16px; }
.lb__nav{ inset-block-start:50%; translate:0 -50%; width:46px; height:70px; font-size:28px; line-height:1; }
.lb__nav--prev{ inset-inline-start:20px; }
.lb__nav--next{ inset-inline-end:20px; }

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal{
  opacity:0;
  translate:0 26px;
  transition:opacity .8s var(--ease), translate .8s var(--ease);
}
.reveal.is-in{ opacity:1; translate:0 0; }
.value.reveal{ transition-delay:var(--d, 0ms); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .values{ grid-template-columns:repeat(2, 1fr); }
  .grid{ grid-template-columns:repeat(2, 1fr); }
  .footer__cols{ grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width:860px){
  body{ font-size:16px; }

  .nav__burger{ display:block; }
  .nav__links{
    position:fixed;
    inset-block-start:var(--nav-h);
    inset-inline:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(10,10,9,.98);
    backdrop-filter:blur(16px);
    border-block-end:1px solid var(--line);
    padding:8px 28px 26px;
    transform:translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }
  .nav__links.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav__links a{ padding-block:16px; border-block-end:1px solid var(--line); font-size:15px; }
  .nav__cta{ margin-block-start:18px; text-align:center; border-block-end:none; }

  .hero{ padding-block-end:110px; }
  .hero__scroll{ display:none; }

  .stats{ grid-template-columns:repeat(2, 1fr); gap:34px 0; padding-block:36px; }
  .stat:nth-child(3){ border-inline-start:none; }

  .gal-head{ align-items:flex-start; }

  .row--2, .row--3{ grid-template-columns:1fr; }

  .footer__cols{ grid-template-columns:1fr; gap:34px; }
  .footer__bar{ flex-direction:column; align-items:flex-start; gap:16px; }

  .lb__nav{ width:38px; height:56px; font-size:22px; }
  .lb__nav--prev{ inset-inline-start:6px; }
  .lb__nav--next{ inset-inline-end:6px; }
}

@media (max-width:560px){
  .values{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; gap:14px; }
  .tile{ aspect-ratio:4 / 3; }
  .hero__actions .btn{ width:100%; }
  .filters{ width:100%; }
  .filter{ flex:1 1 auto; padding-inline:14px; }
  .footer__cols{ padding-block-end:34px; }
}

/* ==========================================================================
   MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; translate:0 0; }
}