/* ============================================================
   AEROVIS — modern cinematic site
   ============================================================ */

:root{
  --bg:        #0a0a0b;
  --bg-2:      #0f0f11;
  --surface:   #141418;
  --surface-2: #1a1a1f;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.14);
  --txt:       #f4f4f2;
  --muted:     #9a9a97;
  --muted-2:   #6f6f6c;

  --amber:      #ee9a00;   /* brand primary */
  --amber-lt:   #ffb32a;
  --amber-deep: #b97300;
  --amber-glow: rgba(238,154,0,.35);

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --r: 16px;

  --f-display: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;

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

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--f-display); font-weight:600; line-height:1.05; margin:0; letter-spacing:-.02em; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* Hide native cursor on fine pointers (custom cursor takes over) */
@media (hover:hover) and (pointer:fine){
  html.has-cursor, html.has-cursor *{ cursor:none !important; }
}

/* ============================================================
   Custom reticle cursor
   ============================================================ */
.cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; display:none;
  mix-blend-mode:difference; }
html.has-cursor .cursor{ display:block; }

.cursor__dot{
  position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;
  background:var(--amber-lt); transform:translate(-50%,-50%);
}
.cursor__ring{
  position:fixed; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1.5px solid rgba(255,255,255,.7); border-radius:50%;
  transition:width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease),
             border-color .28s var(--ease), border-radius .28s var(--ease), background .28s var(--ease);
}
.cursor__bracket{ position:absolute; width:8px; height:8px; opacity:0; transition:opacity .25s ease, inset .28s var(--ease); border:1.5px solid var(--amber-lt); }
.cursor__bracket.tl{ top:-6px; left:-6px; border-right:0; border-bottom:0; }
.cursor__bracket.tr{ top:-6px; right:-6px; border-left:0; border-bottom:0; }
.cursor__bracket.bl{ bottom:-6px; left:-6px; border-right:0; border-top:0; }
.cursor__bracket.br{ bottom:-6px; right:-6px; border-left:0; border-top:0; }
.cursor__label{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  font-family:var(--f-display); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; white-space:nowrap; opacity:0; transition:opacity .25s ease;
}

/* hover state = focus lock */
html.cursor-hover .cursor__ring{
  width:74px; height:74px; margin:-37px 0 0 -37px; border-color:transparent; border-radius:10px;
}
html.cursor-hover .cursor__bracket{ opacity:1; }
html.cursor-hover .cursor__bracket.tl{ inset:-4px auto auto -4px; }
html.cursor-hover .cursor__bracket.tr{ inset:-4px -4px auto auto; }
html.cursor-hover .cursor__bracket.bl{ inset:auto auto -4px -4px; }
html.cursor-hover .cursor__bracket.br{ inset:auto -4px -4px auto; }
html.cursor-hover .cursor__label{ opacity:.9; }
html.cursor-down .cursor__ring{ width:26px; height:26px; margin:-13px 0 0 -13px; }

/* ============================================================
   Preloader
   ============================================================ */
.loader{ position:fixed; inset:0; z-index:9000; background:var(--bg);
  display:grid; place-items:center; transition:opacity .6s ease, visibility .6s; }
.loader.done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; }
.loader__reticle{ position:relative; width:70px; height:70px; margin:0 auto 22px;
  border:1px solid var(--line-2); border-radius:50%; animation:spin 6s linear infinite; }
.loader__reticle span{ position:absolute; background:var(--amber); }
.loader__reticle span:nth-child(1){ top:-1px; left:50%; width:1px; height:12px; transform:translateX(-50%); }
.loader__reticle span:nth-child(2){ bottom:-1px; left:50%; width:1px; height:12px; transform:translateX(-50%); }
.loader__reticle span:nth-child(3){ left:-1px; top:50%; height:1px; width:12px; transform:translateY(-50%); }
.loader__reticle span:nth-child(4){ right:-1px; top:50%; height:1px; width:12px; transform:translateY(-50%); }
.loader__dot{ position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 16px var(--amber-glow); animation:pulse 1.4s ease-in-out infinite; }
.loader__word{ font-family:var(--f-display); letter-spacing:.5em; font-size:14px; color:var(--txt); padding-left:.5em; }
.loader__bar{ width:180px; height:2px; margin:18px auto 0; background:var(--line); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--amber); animation:load 1.6s var(--ease) forwards; }
@keyframes load{ to{ width:100%; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.5; } }

/* ============================================================
   FX overlays
   ============================================================ */
.fx-grain,.fx-vignette{ position:fixed; inset:0; pointer-events:none; z-index:8000; }
.fx-vignette{ box-shadow:inset 0 0 220px 40px rgba(0,0,0,.75); }
.fx-grain{ opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* ============================================================
   Buttons
   ============================================================ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-display); font-weight:500; font-size:15px; letter-spacing:.01em;
  padding:15px 26px; border-radius:100px; border:1px solid transparent; position:relative;
  transition:transform .3s var(--ease), background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.btn--sm{ padding:10px 18px; font-size:13.5px; }
.btn--block{ width:100%; }
.btn--primary{ background:var(--amber); color:#111; box-shadow:0 8px 30px -8px var(--amber-glow); }
.btn--primary:hover{ background:var(--amber-lt); transform:translateY(-2px); box-shadow:0 14px 40px -8px var(--amber-glow); }
.btn--ghost{ border-color:var(--line-2); color:var(--txt); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); }

/* ============================================================
   Nav
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:1000; transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(10,10,11,.72); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.nav__logo img{ height:23px; width:auto; filter:brightness(0) invert(1); transition:opacity .3s; }
.nav__logo:hover img{ opacity:.75; }
.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a:not(.btn){ font-size:14.5px; color:var(--muted); font-weight:500; position:relative; transition:color .25s; }
.nav__links a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1.5px; background:var(--amber); transition:width .3s var(--ease); }
.nav__links a:not(.btn):hover{ color:var(--txt); }
.nav__links a:not(.btn):hover::after{ width:100%; }
.nav__cta{ margin-left:6px; }
.nav__burger{ display:none; width:44px; height:44px; background:none; border:0; position:relative; }
.nav__burger span{ position:absolute; left:11px; width:22px; height:2px; background:var(--txt); transition:transform .3s var(--ease), opacity .3s; }
.nav__burger span:nth-child(1){ top:18px; }
.nav__burger span:nth-child(2){ top:25px; }
.nav.open .nav__burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__img{ width:100%; height:120%; object-fit:cover; will-change:transform; transform:translateZ(0); }
.hero__scrim{ position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(10,10,11,.35) 45%, rgba(10,10,11,.55) 100%),
    radial-gradient(120% 90% at 80% 10%, rgba(238,154,0,.10), transparent 55%); }

.hero__content{ padding-bottom:clamp(70px, 12vh, 130px); padding-top:120px; position:relative; z-index:2; max-width:960px; }
.hero__kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-lt);
  border:1px solid var(--line-2); padding:8px 16px; border-radius:100px; background:rgba(0,0,0,.25); backdrop-filter:blur(4px); margin:0 0 26px; }
.tick{ width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px var(--amber); animation:pulse 1.6s infinite; }
.hero__title{ font-size:clamp(2.6rem, 7.2vw, 6rem); line-height:.98; margin:0 0 26px; font-weight:600; }
.hero__title em{ font-style:normal; color:var(--amber); }
.hero__title span{ display:block; }
.hero__sub{ max-width:600px; color:#d8d8d5; font-size:clamp(1rem,1.4vw,1.18rem); margin:0 0 34px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted);
  font-family:var(--f-display); font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.hero__mouse{ width:22px; height:34px; border:1.5px solid var(--line-2); border-radius:12px; display:flex; justify-content:center; padding-top:6px; }
.hero__mouse i{ width:3px; height:7px; border-radius:2px; background:var(--amber); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(9px); opacity:0;} 100%{opacity:0;} }

/* Drone HUD */
.hud{ position:absolute; inset:0; z-index:1; pointer-events:none; font-family:var(--f-display); }
.hud__rec{ position:absolute; top:98px; left:var(--gut); display:flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.14em; color:rgba(255,255,255,.72); }
.hud__dot{ width:9px; height:9px; border-radius:50%; background:#ff3b30; box-shadow:0 0 10px #ff3b30; animation:pulse 1.2s infinite; }
.hud__coord{ position:absolute; top:98px; right:var(--gut); font-size:12px; letter-spacing:.1em; color:rgba(255,255,255,.55); }
.hud__corner{ position:absolute; width:26px; height:26px; border:2px solid rgba(255,255,255,.35); }
.hud__corner.tl{ top:86px; left:calc(var(--gut) - 4px); border-right:0; border-bottom:0; }
.hud__corner.tr{ top:86px; right:calc(var(--gut) - 4px); border-left:0; border-bottom:0; }
.hud__corner.bl{ bottom:70px; left:calc(var(--gut) - 4px); border-right:0; border-top:0; }
.hud__corner.br{ bottom:70px; right:calc(var(--gut) - 4px); border-left:0; border-top:0; }
.hud__crosshair{ position:absolute; top:50%; left:50%; width:46px; height:46px; transform:translate(-50%,-50%); opacity:.5; }
.hud__crosshair span{ position:absolute; background:rgba(255,255,255,.5); }
.hud__crosshair span:nth-child(1){ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.hud__crosshair span:nth-child(2){ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
@media (max-width:720px){ .hud__corner,.hud__crosshair{ display:none; } .hud__rec,.hud__coord{ top:84px; } }

/* ============================================================
   Marquee
   ============================================================ */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; overflow:hidden; background:var(--bg-2); }
.marquee__track{ display:flex; align-items:center; gap:30px; width:max-content; animation:marq 32s linear infinite; }
.marquee__track span{ font-family:var(--f-display); font-size:clamp(1.1rem,2.4vw,1.6rem); font-weight:500; color:var(--txt); text-transform:uppercase; letter-spacing:.02em; }
.marquee__track i{ color:var(--amber); font-style:normal; font-size:.9em; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ============================================================
   Sections / headings
   ============================================================ */
.section{ padding:clamp(80px,12vh,150px) 0; }
.section--tight{ padding-bottom:clamp(60px,9vh,110px); }
.section--alt{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.sec-head{ max-width:720px; margin:0 0 clamp(44px,6vw,70px); }
.sec-head__eyebrow{ font-family:var(--f-display); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin:0 0 16px; }
.sec-head__title{ font-size:clamp(2rem,4.6vw,3.4rem); margin:0 0 18px; }
.sec-head__lead{ color:var(--muted); font-size:clamp(1rem,1.3vw,1.15rem); margin:0; }

/* ============================================================
   Services
   ============================================================ */
.svc{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.svc__card{ position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface);
  transition:transform .5s var(--ease), border-color .4s ease; min-height:340px; display:flex; align-items:flex-end; }
.svc__card:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.svc__img{ position:absolute; inset:0; z-index:0; }
.svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .6s; filter:grayscale(.25) brightness(.62); }
.svc__card:hover .svc__img img{ transform:scale(1.06); filter:grayscale(0) brightness(.72); }
.svc__card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(9,9,10,.96) 6%, rgba(9,9,10,.35) 60%, transparent); }
.svc__body{ position:relative; z-index:2; padding:30px; }
.svc__no{ font-family:var(--f-display); font-size:13px; letter-spacing:.15em; color:var(--amber); margin-bottom:12px; }
.svc__body h3{ font-size:1.55rem; margin:0 0 10px; }
.svc__body p{ color:#c9c9c6; margin:0; max-width:46ch; font-size:.97rem; }

/* ============================================================
   Portfolio gallery (uniform grid + filters)
   ============================================================ */
.pf-filter{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 34px; }
.pf-chip{ font-family:var(--f-display); font-size:14px; color:var(--muted); background:transparent;
  border:1px solid var(--line-2); border-radius:100px; padding:9px 20px; transition:color .25s, border-color .25s, background .25s, transform .25s var(--ease); }
.pf-chip:hover{ color:var(--txt); border-color:var(--muted); transform:translateY(-1px); }
.pf-chip.active{ background:var(--amber); border-color:var(--amber); color:#111; }
.pf-chip span{ opacity:.6; font-size:.85em; margin-left:4px; }
.pf-chip.active span{ opacity:.8; }

.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:16px; }
.gallery__item{ position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--line);
  background:var(--surface); aspect-ratio:4/3; animation:pf-in .5s var(--ease) both; }
.gallery__item.is-hidden{ display:none; }
@keyframes pf-in{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .6s; filter:brightness(.9); }
.gallery__item:hover img{ transform:scale(1.06); filter:brightness(1); }
.gallery__item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:44px 18px 16px; z-index:2;
  font-family:var(--f-display); font-size:.98rem; font-weight:500;
  background:linear-gradient(to top, rgba(8,8,9,.94), transparent);
  transform:translateY(8px); opacity:0; transition:transform .4s var(--ease), opacity .4s ease; }
.gallery__item:hover figcaption{ transform:translateY(0); opacity:1; }
.gallery__tag{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:4px; }
.gallery__item::before{ content:"⤢"; position:absolute; top:12px; right:12px; z-index:3; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:rgba(238,154,0,.92); color:#111; font-size:15px;
  opacity:0; transform:scale(.6); transition:opacity .35s, transform .35s var(--ease); }
.gallery__item:hover::before{ opacity:1; transform:scale(1); }
.gallery__empty{ color:var(--muted); text-align:center; padding:50px 0; display:none; }

/* ============================================================
   Video gallery (lite YouTube facade)
   ============================================================ */
.videos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(360px,1fr)); gap:24px; }
.vid{ display:flex; flex-direction:column; gap:14px; }
.vid__frame{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:#000; }
.vid__frame img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s; filter:brightness(.78); }
.vid:hover .vid__frame img{ transform:scale(1.05); filter:brightness(.9); }
.vid__play{ position:absolute; inset:0; display:grid; place-items:center; background:transparent; border:0; }
.vid__play::before{ content:""; position:absolute; width:64px; height:64px; border-radius:50%;
  background:rgba(238,154,0,.94); box-shadow:0 10px 34px -6px var(--amber-glow); transition:transform .3s var(--ease); }
.vid__play::after{ content:""; position:relative; width:0; height:0; margin-left:5px;
  border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #111; }
.vid:hover .vid__play::before{ transform:scale(1.12); }
.vid__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid__meta{ display:flex; align-items:baseline; gap:12px; }
.vid__no{ font-family:var(--f-display); font-size:12px; color:var(--amber); letter-spacing:.1em; }
.vid__title{ font-family:var(--f-display); font-size:1.05rem; font-weight:500; margin:0; }

/* ============================================================
   Why us
   ============================================================ */
.why{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,6vw,80px); align-items:start; }
.why__intro{ position:sticky; top:110px; }
.why__intro .btn{ margin-top:26px; }
.why__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.feat{ border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; background:var(--surface);
  transition:transform .4s var(--ease), border-color .4s, background .4s; }
.feat:hover{ transform:translateY(-5px); border-color:var(--line-2); background:var(--surface-2); }
.feat__ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:18px;
  background:rgba(238,154,0,.12); color:var(--amber); border:1px solid rgba(238,154,0,.25); }
.feat__ic svg{ width:24px; height:24px; }
.feat h3{ font-size:1.2rem; margin:0 0 8px; }
.feat p{ color:var(--muted); margin:0; font-size:.95rem; }

/* ============================================================
   Process steps
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s; }
.steps__item{ position:relative; padding-top:28px; border-top:1px solid var(--line-2); }
.steps__item h3{ font-size:1.3rem; margin:14px 0 8px; }
.steps__item p{ color:var(--muted); margin:0; font-size:.95rem; }
.steps__no{ font-family:var(--f-display); font-size:2.6rem; font-weight:700; color:transparent;
  -webkit-text-stroke:1px var(--amber); line-height:1; }

/* ============================================================
   Contact
   ============================================================ */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; }
.contact__left .sec-head__title{ margin-bottom:22px; }
.contact__actions{ display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 24px; }
.contact__socials{ display:flex; gap:20px; }
.contact__socials a{ font-family:var(--f-display); color:var(--muted); font-size:14px; letter-spacing:.05em; transition:color .25s; }
.contact__socials a:hover{ color:var(--amber); }

.contact__card{ background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:clamp(10px,2vw,24px) clamp(24px,3vw,38px); display:grid; }
.contact__card li{ display:flex; justify-content:space-between; gap:20px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--line); }
.contact__card li:last-child{ border-bottom:0; }
.contact__lbl{ color:var(--muted-2); font-family:var(--f-display); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.contact__card a,.contact__card span:last-child{ font-size:1.08rem; font-weight:500; text-align:right; }
.contact__card a{ transition:color .25s; }
.contact__card a:hover{ color:var(--amber); }

/* ============================================================
   Footer
   ============================================================ */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding-top:64px; }
.footer__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:48px; }
.footer__logo{ height:24px; width:auto; filter:brightness(0) invert(1); margin-bottom:16px; }
.footer__brand p{ color:var(--muted); max-width:34ch; margin:0; }
.footer__nav{ display:flex; flex-direction:column; gap:12px; }
.footer__nav a,.footer__meta a{ color:var(--muted); transition:color .25s; width:max-content; }
.footer__nav a:hover,.footer__meta a:hover{ color:var(--amber); }
.footer__meta{ display:flex; flex-direction:column; gap:12px; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0 30px; border-top:1px solid var(--line); color:var(--muted-2); font-size:14px; }
.footer__top:hover{ color:var(--amber); }

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{ position:fixed; inset:0; z-index:5000; background:rgba(6,6,7,.94); backdrop-filter:blur(6px);
  display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s; padding:5vh 6vw; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox__stage{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lightbox__stage img{ max-width:100%; max-height:82vh; border-radius:10px; object-fit:contain; transform:scale(.96); transition:transform .35s var(--ease); }
.lightbox.open .lightbox__stage img{ transform:scale(1); }
.lightbox__stage figcaption{ font-family:var(--f-display); color:#e9e9e6; font-size:.95rem; letter-spacing:.03em; }
.lightbox__close,.lightbox__nav{ position:absolute; background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:#fff;
  border-radius:50%; width:52px; height:52px; font-size:22px; display:grid; place-items:center; transition:background .25s, border-color .25s, transform .25s; }
.lightbox__close:hover,.lightbox__nav:hover{ background:var(--amber); color:#111; border-color:var(--amber); }
.lightbox__close{ top:24px; right:24px; font-size:18px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lightbox__prev{ left:24px; } .lightbox__next{ right:24px; }
.lightbox__nav:hover{ transform:translateY(-50%) scale(1.08); }

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .marquee__track,.loader__bar i,.tick,.hud__dot,.loader__dot,.loader__reticle,.hero__mouse i{ animation:none !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .why{ grid-template-columns:1fr; }
  .why__intro{ position:static; }
  .contact{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .nav__links{ position:fixed; inset:0 0 0 auto; width:min(78vw,340px); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:22px; padding:40px; background:var(--bg-2); border-left:1px solid var(--line);
    transform:translateX(105%); transition:transform .45s var(--ease); overflow-y:auto; }
  .nav.open .nav__links{ transform:translateX(0); }
  .nav__links a:not(.btn){ font-size:1.4rem; color:var(--txt); }
  .nav__cta{ margin-left:0; }
  .nav__burger{ display:block; z-index:1001; }
  .svc{ grid-template-columns:1fr; }
  .svc__card{ min-height:260px; }
  .svc__body{ padding:22px; }
  .svc__body h3{ font-size:1.35rem; }
  .why__grid{ grid-template-columns:1fr; }
  .feat{ padding:22px 20px; }
  .footer__inner{ grid-template-columns:1fr; gap:28px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .hero__content{ padding-top:104px; padding-bottom:56px; }
  .hero__title em{ display:inline; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .hud__coord{ display:none; }
  .pf-filter{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; margin-bottom:26px; }
  .pf-filter::-webkit-scrollbar{ display:none; }
  .pf-chip{ flex:0 0 auto; }
  .lightbox__nav{ width:44px; height:44px; }
  .lightbox__prev{ left:10px; } .lightbox__next{ right:10px; }
  body{ padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
}

@media (max-width:560px){
  .gallery{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px;
    margin:0 calc(var(--gut) * -1); padding:2px var(--gut) 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .gallery::-webkit-scrollbar{ display:none; }
  .gallery__item{ flex:0 0 80%; scroll-snap-align:center; }
  .videos{ grid-template-columns:1fr; gap:18px; }
  .steps{ grid-template-columns:1fr; gap:22px; }
  .steps__item{ border-top:0; border-left:2px solid var(--line-2); padding-top:0; padding-left:20px; }
  .contact__card li{ flex-direction:column; align-items:flex-start; gap:4px; }
  .contact__card a,.contact__card span:last-child{ text-align:left; }
}

@media (max-width:420px){
  .hero__title{ font-size:clamp(2.1rem,10vw,2.8rem); }
  .hero__kicker{ font-size:11px; padding:7px 14px; }
  .sec-head__title{ font-size:clamp(1.7rem,7vw,2.2rem); }
  .gallery__item{ flex-basis:86%; }
}

/* Always-on states for touch devices (there's no hover to reveal them) */
@media (hover:none){
  .gallery__item figcaption{ opacity:1; transform:none; }
  .gallery__item::before{ opacity:.85; transform:scale(1); }
  .svc__img img{ filter:grayscale(0) brightness(.72); }
}

/* ============================================================
   Mobile-only: sticky call bar + nav quick-contact
   ============================================================ */
.nav__mobile-contact{ display:none; }
.mobile-cta{ display:none; }

@media (max-width:760px){
  .nav__mobile-contact{ display:flex; flex-direction:column; gap:12px; width:100%; margin-top:6px; padding-top:22px; border-top:1px solid var(--line); }
  .nav__mobile-contact .btn{ width:100%; }

  .mobile-cta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:900;
    background:var(--bg-2); border-top:1px solid var(--line-2);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(0); transition:transform .35s var(--ease); }
  .mobile-cta.is-hidden{ transform:translateY(100%); }
  .mobile-cta__btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 8px; font-family:var(--f-display); font-weight:600; font-size:13px;
    color:var(--txt); border-right:1px solid var(--line); white-space:nowrap; }
  .mobile-cta__btn:last-child{ border-right:0; }
  .mobile-cta__btn svg{ width:17px; height:17px; flex-shrink:0; }
  .mobile-cta__btn--call{ background:var(--amber); color:#111; }
}

/* ============================================================
   Portfolio subpage hero
   ============================================================ */
.page-hero{ position:relative; padding:150px 0 clamp(50px,7vw,80px); border-bottom:1px solid var(--line); overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 130% at 80% -10%, rgba(238,154,0,.12), transparent 55%); }
.page-hero__crumb{ font-family:var(--f-display); font-size:13px; letter-spacing:.08em; color:var(--muted); margin:0 0 18px; }
.page-hero__crumb a{ color:var(--muted); transition:color .25s; }
.page-hero__crumb a:hover{ color:var(--amber); }
.page-hero h1{ font-size:clamp(2.4rem,6vw,4.6rem); margin:0 0 18px; }
.page-hero h1 em{ font-style:normal; color:var(--amber); }
.page-hero p{ color:var(--muted); max-width:60ch; font-size:clamp(1rem,1.3vw,1.15rem); margin:0; }
.pf-count{ display:flex; gap:32px; margin-top:34px; flex-wrap:wrap; }
.pf-count div{ display:flex; flex-direction:column; }
.pf-count b{ font-family:var(--f-display); font-size:2rem; color:var(--txt); line-height:1; }
.pf-count span{ font-size:13px; color:var(--muted); letter-spacing:.04em; margin-top:6px; }

/* Homepage portfolio teaser CTA row */
.pf-cta{ display:flex; justify-content:center; margin-top:44px; }