/* ============================================================
   Teja Tuah Executive Jet Aviation
   ------------------------------------------------------------
   1. Tokens          5. Hero
   2. Reset / base    6. Ticker
   3. Type            7. About
   4. Nav             8. Services   9. Contact   10. Footer
   ============================================================ */

/* ── 1. Tokens ───────────────────────────────────────────── */
:root{
  --ink:      #0B0C0E;
  --ink-2:    #101215;
  --ink-3:    #16191D;
  --bone:     #EDE8DF;
  --bone-2:   #E4DED2;
  --brass:    #B4924F;
  --brass-lt: #D3B784;

  --on-dark:      var(--bone);
  --on-dark-dim:  rgba(237,232,223,.58);
  --on-light:     #14161A;
  --on-light-dim: rgba(20,22,26,.62);

  --line-dark:  rgba(237,232,223,.14);
  --line-light: rgba(20,22,26,.14);

  --pad: clamp(1.25rem, 5vw, 5rem);
  --max: 1440px;

  /* Stack Sans Notch has no italic. Emphasis is carried by weight and
     colour instead — a synthetic oblique on this face looks mechanical. */
  --serif: "Stack Sans Notch", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans:  "Stack Sans Notch", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --e:   cubic-bezier(.22,1,.36,1);
  --e-2: cubic-bezier(.65,0,.35,1);
}

/* ── 2. Reset / base ─────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--sans);
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden }

img,svg,iframe{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:var(--brass); color:var(--ink) }

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

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

.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:200;
  padding:.6rem 1rem; background:var(--bone); color:var(--ink);
  font-size:.8rem; border-radius:2px; transform:translateY(-160%);
  transition:transform .25s var(--e);
}
.skip:focus{ transform:none }

/* ── 3. Type ─────────────────────────────────────────────── */
.h2{
  font-family:var(--serif);
  font-weight:250;
  font-size:clamp(2rem,1.2rem + 3.4vw,4rem);
  line-height:1.06;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.h2 em{
  display:block; font-style:normal;
  font-weight:500;
  color:var(--brass);
}
.h2--light em{ color:var(--brass-lt) }

.kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-dark-dim);
}
.kicker .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--brass-lt);
  box-shadow:0 0 0 0 rgba(211,183,132,.55);
  animation:pulse 2.8s var(--e-2) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(211,183,132,.5) }
  50%    { box-shadow:0 0 0 7px rgba(211,183,132,0) }
}

.sec-label{
  display:flex; align-items:center; gap:.75rem;
  font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
}
.idx{
  font-family:var(--sans); font-style:normal;
  font-size:.72rem; font-weight:500; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--brass);
}

small{
  font-size:.62em; letter-spacing:.08em;
  color:var(--brass); opacity:.75;
  vertical-align:.28em;
}

/* buttons */
.btn{
  --bg:var(--bone); --fg:var(--ink);
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  padding:.95rem 1.5rem;
  background:var(--bg); color:var(--fg);
  font-size:.78rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:100px; overflow:hidden;
  isolation:isolate;
  transition:color .4s var(--e);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--brass);
  transform:translateY(101%);
  transition:transform .55s var(--e);
}
.btn:hover::before{ transform:none }
.btn:hover{ color:var(--ink) }
.btn svg{ width:15px; height:15px; transition:transform .45s var(--e) }
.btn:hover svg{ transform:translateX(4px) }
.btn--sm{ padding:.7rem 1.15rem; font-size:.7rem }
.btn--wa{ --bg:transparent; --fg:var(--on-light); border:1px solid var(--line-light) }
.btn--wa svg{ width:19px; height:19px }
.btn--wa:hover{ color:var(--ink); border-color:transparent }

.ln{
  position:relative; display:inline-block;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .45s var(--e);
}
.ln:hover{ background-size:100% 1px }

/* ── Loader ──────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:300;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .7s var(--e), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden }
.loader__inner{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--serif);
}
.loader__mark{ width:auto; height:clamp(52px,13vw,88px); object-fit:contain }
.loader__count{
  font-size:.9rem; font-family:var(--sans);
  letter-spacing:.2em; color:var(--brass);
}
.loader__bar{
  position:absolute; left:var(--pad); right:var(--pad); bottom:2.5rem;
  height:1px; background:var(--line-dark);
}
.loader__bar i{
  display:block; height:100%; width:0;
  background:var(--brass);
  transition:width .2s linear;
}

/* ── 4. Nav ──────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .5s var(--e), border-color .5s var(--e), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(11,12,14,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-dark);
}
.nav.up{ transform:translateY(0) }
.nav__in{
  max-width:var(--max); margin-inline:auto;
  padding:.9rem var(--pad);
  display:flex; align-items:center; gap:2rem;
  transition:padding .5s var(--e);
}
.nav.solid .nav__in{ padding-block:.6rem }

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto }
.brand__mark{
  width:auto; height:56px; flex:none;
  object-fit:contain;
  transition:opacity .4s var(--e), transform .4s var(--e);
}
.brand:hover .brand__mark{ opacity:.85; transform:translateY(-1px) }
.nav.solid .brand__mark{ height:46px }
.brand__txt{
  display:flex; flex-direction:column;
  font-size:.86rem; font-weight:500; line-height:1.18; letter-spacing:.02em;
}
.brand__txt em{
  /* Set as written — the parentheses read as an aside, and forcing caps on a
     bracketed line makes it compete with the wordmark instead of sitting under it. */
  font-style:normal; font-size:.66rem; font-weight:400;
  letter-spacing:.09em;
  color:var(--on-dark-dim);
}

.nav__links{ display:flex; gap:2.1rem }
.nav__links a{
  display:inline-flex; align-items:baseline; gap:.45rem;
  font-size:.8rem; letter-spacing:.02em;
  color:var(--on-dark-dim);
  transition:color .35s var(--e);
}
.nav__links a .idx{ font-size:.7rem; opacity:.55; transition:opacity .35s var(--e) }
.nav__links a:hover{ color:var(--bone) }
.nav__links a:hover .idx{ opacity:1 }
.nav__links a.on{ color:var(--bone) }

.burger{ display:none; width:34px; height:34px; place-items:center }
.burger i{
  display:block; width:19px; height:1px; background:var(--bone);
  transition:transform .45s var(--e), opacity .3s;
}
.burger i+i{ margin-top:5px }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(3px) rotate(45deg) }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-3px) rotate(-45deg) }

/* mobile menu */
.menu[hidden]{ display:none }   /* the .menu rule below would otherwise beat the UA [hidden] style */
.menu{
  position:fixed; inset:0; z-index:90;
  background:var(--ink-2);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--pad) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--e);
}
.menu.open{ clip-path:inset(0) }
.menu__links{ display:flex; flex-direction:column; gap:.4rem }
.menu__links a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,12vw,3.4rem);
  line-height:1.16; letter-spacing:-.02em;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--e), transform .6s var(--e);
}
.menu.open .menu__links a{ opacity:1; transform:none }
.menu.open .menu__links a:nth-child(1){ transition-delay:.14s }
.menu.open .menu__links a:nth-child(2){ transition-delay:.21s }
.menu.open .menu__links a:nth-child(3){ transition-delay:.28s }
.menu__links .idx{ font-size:.85rem }
.menu__foot{
  margin-top:auto; padding-top:2.5rem;
  border-top:1px solid var(--line-dark);
  display:flex; flex-direction:column; gap:.4rem;
  font-size:.9rem; color:var(--on-dark-dim);
}

/* ── 5. Hero ─────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:9rem var(--pad) 2rem;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:-8% 0; z-index:-2; will-change:transform }
.hero__media img,.hero__media video{
  width:100%; height:100%; object-fit:cover;
  animation:kb 26s var(--e-2) infinite alternate;
}
@keyframes kb{ from{ transform:scale(1.0) } to{ transform:scale(1.09) } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  /* Two scrims. The vertical one seats the nav and the fade into the next
     section; the horizontal one keeps the headline legible over bright
     fuselage without flattening the whole photograph. */
  background:
    linear-gradient(100deg,rgba(11,12,14,.88) 0%,rgba(11,12,14,.62) 34%,rgba(11,12,14,.12) 66%,rgba(11,12,14,0) 100%),
    linear-gradient(180deg,rgba(11,12,14,.80) 0%,rgba(11,12,14,.22) 30%,rgba(11,12,14,.58) 66%,var(--ink) 100%);
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; opacity:.42; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.hero__in{ max-width:var(--max); margin-inline:auto; width:100%; flex:1; display:flex; flex-direction:column; justify-content:flex-end }
.hero__h{
  margin:1.6rem 0 2.4rem;
  font-family:var(--serif); font-weight:250;
  font-size:clamp(2.4rem,1rem + 5.6vw,6rem);
  line-height:1.04; letter-spacing:-.035em;
  text-wrap:balance;
}
.hero__h em{ font-style:normal; font-weight:500; color:var(--brass-lt) }

.hero__row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1.5rem 2.5rem;
  padding-top:1.9rem;
  border-top:1px solid var(--line-dark);
}
.hero__tag{
  margin-right:auto;
  font-size:.78rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark-dim);
}
.hero__tag i{ font-style:normal; color:var(--brass); margin-inline:.45rem }

.hero__meta{
  max-width:var(--max); margin:2.6rem auto 0; width:100%;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(237,232,223,.4);
}
.hero__scroll{ display:inline-flex; align-items:center; gap:.55rem }
.hero__scroll i{
  display:block; width:34px; height:1px; background:var(--line-dark); position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--brass);
  transform:translateX(-100%); animation:sweep 2.6s var(--e-2) infinite;
}
@keyframes sweep{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* ── 6. Ticker ───────────────────────────────────────────── */
.ticker{
  overflow:hidden; padding:1.1rem 0;
  border-block:1px solid var(--line-dark);
  background:var(--ink-2);
}
.ticker__track{
  display:flex; align-items:center; gap:2.2rem; width:max-content;
  animation:slide 44s linear infinite;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark-dim);
}
.ticker__track i{ font-style:normal; color:var(--brass); font-size:.6rem }
.ticker:hover .ticker__track{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ── 7. About ────────────────────────────────────────────── */
.about{
  background:var(--bone);
  color:var(--on-light);
  padding-block:clamp(4.5rem,10vw,9rem);
}
.about .sec-label{ color:var(--on-light-dim) }
.about__grid{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,2.35fr);
}
.about__side{ position:sticky; top:7rem; align-self:start }
.about__body{ display:grid; gap:clamp(2rem,4vw,3.2rem) }

.about__copy{
  display:grid; gap:1.1rem;
  max-width:60ch;
  font-size:clamp(1rem,.95rem + .25vw,1.15rem);
  color:var(--on-light-dim);
}
.about__copy strong{ color:var(--on-light); font-weight:500 }

.about__media{ position:relative; border-radius:3px; overflow:hidden }
.about__media img{
  width:100%; aspect-ratio:16/8; object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.2s var(--e);
}
.about__media:hover img{ transform:scale(1.06) }
.about__cap{
  position:absolute; left:1rem; bottom:.9rem;
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone); text-shadow:0 1px 12px rgba(0,0,0,.6);
}

.stats{
  display:grid; gap:0;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-light);
}
.stat{ padding:1.6rem 1.4rem 0 0 }
.stat+.stat{ padding-left:1.4rem; border-left:1px solid var(--line-light) }
.stat dt{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-light-dim);
}
.stat dd{
  display:flex; align-items:baseline; gap:.1rem;
  margin:.5rem 0 .35rem;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,1rem + 4vw,3.9rem);
  line-height:1; letter-spacing:-.03em;
}
.stat dd em{ font-style:normal; font-weight:500; color:var(--brass) }
.stat dd.dd--txt{ font-size:clamp(1.7rem,.9rem + 2.6vw,2.9rem) }
.stat dd span:not(.num){
  font-family:var(--sans); font-size:.6rem; font-weight:500;
  letter-spacing:.18em; align-self:center;
  padding:.28rem .5rem; margin-left:.5rem;
  border:1px solid var(--line-light); border-radius:2px;
  color:var(--on-light-dim);
}
.stat p{ font-size:.8rem; color:var(--on-light-dim) }

/* ── 8. Services ─────────────────────────────────────────── */
.services{
  position:relative;
  background:var(--ink);
  padding-block:clamp(4.5rem,10vw,9rem);
}
.services__head{
  display:grid; gap:1.4rem;
  margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.services__head .sec-label{ color:var(--on-dark-dim) }

.svc{ list-style:none; border-top:1px solid var(--line-dark) }

.svc__item{
  position:relative;
  border-bottom:1px solid var(--line-dark);
}
/* Entrance uses the row, hover uses the inner link, so the two transforms
   never fight each other. */
.js .svc__item.reveal{ opacity:0; transform:translateY(18px) }
.js .svc__item.reveal.in{ opacity:1; transform:none }
/* The wash sits on the row, not the link, so it stays put while the
   content slides across it. */
.svc__item::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(180,146,79,.13),rgba(180,146,79,0) 62%);
  opacity:0; transition:opacity .5s var(--e);
}
.svc__item:hover::before{ opacity:1 }

/* Slide with transform, never padding. Animating padding re-runs layout on
   every frame for a five-column grid holding an image — that was the stutter.
   A transform is composited and stays at 60fps. */
.svc__item a{
  position:relative; z-index:1;
  display:grid; align-items:start;
  grid-template-columns:auto minmax(0,1fr) 130px auto;
  gap:clamp(1rem,2.6vw,2.4rem);
  padding:clamp(1.5rem,3.2vw,2.3rem) .25rem;
  transition:transform .6s var(--e);
}
.svc__item:hover a{ transform:translateX(clamp(.5rem,1.4vw,1.2rem)) }

.svc__n{
  font-family:var(--sans); font-style:normal;
  font-size:.78rem; font-weight:500; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--brass); padding-top:.7rem;
}
.svc__body{
  display:grid; gap:clamp(1rem,2.6vw,2.4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  align-items:start;
}
.svc__t{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,.9rem + 2vw,2.6rem);
  line-height:1.06; letter-spacing:-.02em;
  transition:color .45s var(--e);
}
.svc__item:hover .svc__t{ color:var(--brass-lt) }
.svc__d{
  font-size:.92rem; color:var(--on-dark-dim);
  max-width:46ch; padding-top:.35rem;
}
.svc__thumb{
  width:130px; aspect-ratio:4/3; object-fit:cover;
  border-radius:3px; align-self:start; margin-top:.2rem;
  filter:grayscale(.35);
  transition:filter .55s var(--e), transform .55s var(--e);
}
.svc__item:hover .svc__thumb{ filter:none; transform:scale(1.03) }
.svc__go{
  display:grid; place-items:center;
  width:42px; height:42px; flex:none;
  border:1px solid var(--line-dark); border-radius:50%;
  transition:background .45s var(--e), border-color .45s var(--e), transform .45s var(--e);
}
.svc__go svg{ width:15px; height:15px; transition:transform .45s var(--e) }
.svc__item:hover .svc__go{ background:var(--brass); border-color:var(--brass); transform:rotate(-45deg) }
.svc__item:hover .svc__go svg{ color:var(--ink) }

/* ── 9. Contact ──────────────────────────────────────────── */
.contact{
  background:var(--bone-2);
  color:var(--on-light);
  padding-block:clamp(4.5rem,10vw,9rem);
}
.contact .sec-label{ color:var(--on-light-dim) }
.contact__grid{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:start;
}
.contact__left{ display:grid; gap:clamp(1.6rem,3vw,2.4rem); justify-items:start }
.contact .h2{ margin-top:-.4rem }

.det{ width:100%; border-top:1px solid var(--line-light) }
.det__row{
  display:grid; grid-template-columns:minmax(7rem,.5fr) minmax(0,1.5fr);
  gap:1rem; padding:1.05rem 0;
  border-bottom:1px solid var(--line-light);
}
.det dt{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-light-dim); padding-top:.28rem;
}
.det dd{ font-size:.98rem; line-height:1.55 }

.contact__map{ display:grid; gap:.9rem; justify-items:end }
.map__frame{
  position:relative; width:100%;
  aspect-ratio:4/3.4; border-radius:3px; overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--line-light);
}
.map__frame iframe{
  width:100%; height:100%; border:0;
  filter:grayscale(1) contrast(.92) brightness(1.02);
  transition:filter .7s var(--e);
}
.map__frame:hover iframe{ filter:none }
.map__link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-light-dim);
  transition:color .35s var(--e);
}
.map__link svg{ width:14px; height:14px; transition:transform .4s var(--e) }
.map__link:hover{ color:var(--on-light) }
.map__link:hover svg{ transform:translateX(4px) }

/* ── 10. Footer ──────────────────────────────────────────── */
.foot{ background:var(--ink); padding-block:2.4rem; border-top:1px solid var(--line-dark) }
.foot__in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1.2rem 2rem;
}
.brand--foot{ margin-right:auto }
.foot__c{ font-size:.74rem; color:var(--on-dark-dim) }
.foot__top{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-dim); transition:color .35s var(--e);
}
.foot__top svg{ width:14px; height:14px; transition:transform .4s var(--e) }
.foot__top:hover{ color:var(--bone) }
.foot__top:hover svg{ transform:translateY(-3px) }

/* ── Reveal primitives ───────────────────────────────────── */
/* Hidden only when scripting is on — otherwise the page would be blank
   for anyone whose JS fails to load. */
.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .85s var(--e), transform .85s var(--e);
  transition-delay:calc(var(--d,0) * 80ms);
}
.js .reveal.in{ opacity:1; transform:none }

.line{
  display:block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.js .line > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1s var(--e);
  transition-delay:calc(var(--d,0) * 90ms);
}
.js .line.in > span{ transform:none }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:1024px){
  .about__grid{ grid-template-columns:1fr }
  .about__side{ position:static }
  .contact__grid{ grid-template-columns:1fr }
  .contact__map{ justify-items:stretch }
  .svc__item a{ grid-template-columns:auto minmax(0,1fr) 104px auto }
  .svc__body{ grid-template-columns:1fr; gap:.55rem }
  .svc__d{ max-width:60ch }
  .svc__thumb{ width:104px }
}

@media (max-width:820px){
  .nav__links,.nav__cta{ display:none }
  .burger{ display:grid }
  .hero{ padding-top:7rem }
  .hero__meta{ font-size:.6rem }
  .hero__meta span:first-child{ display:none }
  .stats{ grid-template-columns:1fr }
  .stat{ padding:1.25rem 0 1.25rem }
  .stat+.stat{ padding-left:0; border-left:0; border-top:1px solid var(--line-light) }
  .svc__item a{ grid-template-columns:auto minmax(0,1fr); gap:.35rem 1rem; padding-block:1.6rem }
  .svc__go{ display:none }
  .svc__d{ padding-top:.35rem }
  .svc__thumb{
    grid-column:2; width:100%; aspect-ratio:16/9;
    margin-top:.9rem; filter:none;
  }
  .det__row{ grid-template-columns:1fr; gap:.3rem }
  .foot__in{ flex-direction:column; align-items:flex-start }
  .brand--foot{ margin-right:0 }
}

@media (max-width:420px){
  .hero__row{ gap:1.1rem }
  .hero__tag{ font-size:.68rem; letter-spacing:.16em }
}

/* ── Motion preferences ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none }
  .js .line > span{ transform:none }
  .hero__media img,.hero__media video{ animation:none }
  .ticker__track{ animation:none }
}

/* ── 11. Fleet page ──────────────────────────────────────── */
/* Sits between two dark sections, so it takes the slightly lifted ink to
   keep a visible seam against Services above it. */
.fleet{ background:var(--ink-2); padding-block:clamp(4.5rem,10vw,9rem) }
.fleet__head{ margin-bottom:clamp(1.5rem,4vw,2.5rem) }
.fleet__head .sec-label{ color:var(--on-dark-dim); margin-bottom:1.2rem }
.fleet-lede{
  max-width:44ch; margin-top:1.4rem;
  font-size:clamp(1rem,.95rem + .25vw,1.12rem);
  color:var(--on-dark-dim);
}

.fleet-list{ padding-inline:0 }

.jet{ padding-block:clamp(2.5rem,6vw,4.5rem); border-top:1px solid var(--line-dark) }
.jet__head{
  display:grid; align-items:start;
  grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1rem,3vw,2.6rem);
  margin-bottom:clamp(1.5rem,3.5vw,2.4rem);
}
.jet__n{
  font-size:.78rem; font-weight:500; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; color:var(--brass); padding-top:.6rem;
}
.jet__t{
  font-weight:300; font-size:clamp(1.6rem,1rem + 2.2vw,2.9rem);
  line-height:1.05; letter-spacing:-.025em;
}
.jet__c{
  margin-top:.4rem; font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
}
.jet__d{ font-size:.94rem; color:var(--on-dark-dim); max-width:46ch; padding-top:.5rem }
.jet__note{ font-size:.78rem; color:var(--on-dark-dim); margin-bottom:1rem }

/* Columns rather than a rigid grid — the photographs are a mix of portrait
   and landscape, and cropping them all to one ratio would gut the cabin shots. */
.shots{ column-count:3; column-gap:clamp(.6rem,1.4vw,1.1rem) }
.shot{
  break-inside:avoid; margin:0 0 clamp(.6rem,1.4vw,1.1rem);
  overflow:hidden; border-radius:3px; background:var(--ink-3);
}
.shot img{
  width:100%; height:auto; display:block;
  filter:grayscale(.25);
  transition:filter .6s var(--e), transform .8s var(--e);
}
.shot:hover img{ filter:none; transform:scale(1.03) }

@media (max-width:900px){
  .shots{ column-count:2 }
  .jet__head{ grid-template-columns:auto minmax(0,1fr) }
  .jet__d{ grid-column:2 / -1; max-width:60ch }
}
@media (max-width:560px){
  .shots{ column-count:1 }
}

/* Video tiles sit in the same column flow as the photographs. */
.shot--v{ position:relative }
.shot video{ width:100%; height:auto; display:block; background:var(--ink-3) }
.shot figcaption{
  position:absolute; left:.7rem; bottom:.6rem;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone); text-shadow:0 1px 10px rgba(0,0,0,.7);
  pointer-events:none;
}
.shot--v figcaption{ bottom:2.8rem }

/* Two contacts, so two equal buttons rather than one primary. */
.wa-row{ display:flex; flex-wrap:wrap; gap:.7rem }
@media (max-width:520px){
  .wa-row{ width:100%; flex-direction:column; align-items:stretch }
  .wa-row .btn{ justify-content:center }
}

/* ── Touch targets ───────────────────────────────────────
   Apple and Google both put the minimum at ~44px. Several links here are
   text-height, around 18-24px. The pseudo-element grows the hit area
   without moving anything on screen or disturbing the underline animation. */
@media (hover:none), (pointer:coarse){
  .det dd a, .map__link, .foot__top, .menu__foot a{ position:relative }
  .det dd a::after, .menu__foot a::after{
    content:""; position:absolute; inset:-12px -6px;
  }
  .map__link::after, .foot__top::after{   /* 18px text needs a deeper reach */
    content:""; position:absolute; inset:-14px -8px;
  }
  .burger{ width:44px; height:44px; margin-right:-5px }
}

/* The descriptor is one unit — "TUAH EXECUTIVE JET / AVIATION" split across
   two lines reads like two separate things. Tighten it so it holds one line. */
.brand__txt em{ white-space:nowrap }
@media (max-width:820px){
  .brand__txt{ font-size:.8rem }
  .brand__txt em{ font-size:.58rem; letter-spacing:.05em }
}
@media (max-width:380px){
  .brand__txt em{ font-size:.52rem; letter-spacing:.02em }
}