/* ============================================================
   LUMINARY CONCEPTS — blue + amber, always-night
   Dependency-free. Fraunces (display) + Manrope (text).
   ============================================================ */

@font-face{
  font-family:'Clash Display';
  src:url('assets/fonts/clash-500.woff2') format('woff2');
  font-weight:500; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'Clash Display';
  src:url('assets/fonts/clash-600.woff2') format('woff2');
  font-weight:600; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'Clash Display';
  src:url('assets/fonts/clash-700.woff2') format('woff2');
  font-weight:700; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'Manrope';
  src:url('assets/fonts/manrope.woff2') format('woff2');
  font-weight:300 800; font-display:swap; font-style:normal;
}

@property --pos{ syntax:'<percentage>'; inherits:true; initial-value:50%; }

:root{
  --night-900:#04060d; --night-850:#070b16; --night-800:#0a1020; --night-700:#0e1730;
  --blue:#3d7ec2; --blue-2:#2a5c96; --blue-deep:#0b1e3a; --blue-glow:#5aa0e6;
  --amber:#ffb463; --amber-hot:#ffd9a1; --amber-core:#fff4e2; --amber-deep:#e08a3a;
  --fg:#eaf1fb; --muted:#93a6c4; --line:rgba(120,150,190,.16);
  --display:'Clash Display',Futura,'Avenir Next',sans-serif;
  --sans:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --maxw:1200px; --pad:clamp(20px,5vw,64px);
  --glow-amber:0 0 22px rgba(255,180,99,.55), 0 0 60px rgba(255,150,60,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --night-progress:0;
}

*{box-sizing:border-box;margin:0;padding:0}
/* strip native button chrome (iOS Safari renders white system pills otherwise) */
button{-webkit-appearance:none; appearance:none; background:none; border:0; font:inherit; color:inherit; text-align:inherit}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans); color:var(--fg); line-height:1.6;
  background:
    radial-gradient(1200px 700px at 78% 120px, rgba(61,126,194,.28), transparent 60%),
    radial-gradient(900px 500px at 12% 40px, rgba(255,180,99,.07), transparent 55%),
    linear-gradient(180deg, var(--blue-deep) 0%, var(--night-850) 18%, var(--night-900) 46%, #030509 100%);
  background-repeat:no-repeat;
  background-color:var(--night-900);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
/* night deepens as you scroll */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 120%, #000 0%, transparent 70%);
  opacity:var(--night-progress); transition:opacity .4s linear;
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{position:relative; z-index:2}

/* ---------- Scroll-powered light string (sliced SVGs — iOS-safe) ---------- */
.wirewrap{position:absolute; inset:0; z-index:0; pointer-events:none}
.wire{position:absolute; left:0}
.wire__cold{fill:none; stroke:#2e4260; stroke-width:1.5; stroke-dasharray:3 8; opacity:.55}
.wire__glow{fill:none; stroke:rgba(255,172,84,.2); stroke-width:10; stroke-linecap:round; stroke-dasharray:0 99999}
.wire__hot{fill:none; stroke:#ffc98a; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:0 99999;
  filter:drop-shadow(0 0 5px rgba(255,180,100,.8))}
.wbulb__halo{fill:rgba(255,172,84,0); transition:fill .5s var(--ease)}
.wbulb__core{fill:#22334e; stroke:#3a4f70; stroke-width:1; transition:fill .35s var(--ease), stroke .35s}
.wbulb.on .wbulb__halo{fill:rgba(255,172,84,.16)}
.wbulb.on .wbulb__core{fill:#ffe9c4; stroke:#ffc47e; filter:drop-shadow(0 0 7px rgba(255,190,110,.95)) drop-shadow(0 0 18px rgba(255,160,70,.5))}
.wire__spark{opacity:0; transition:opacity .3s}
.wire__sparkhalo{fill:rgba(255,190,110,.22); animation:sparkPulse 1.6s ease-in-out infinite}
.wire__sparkcore{fill:#fff4e0; filter:drop-shadow(0 0 8px rgba(255,220,160,1)) drop-shadow(0 0 22px rgba(255,170,80,.8))}
@keyframes sparkPulse{0%,100%{opacity:.6}50%{opacity:1}}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.04; letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.15rem,2.1vw,1.5rem)}
.eyebrow{
  font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.24em;
  font-size:.72rem; color:var(--blue-glow); margin-bottom:1rem;
}
.eyebrow--amber{color:var(--amber)}
.lit{
  color:var(--amber);
  text-shadow:0 0 26px rgba(255,170,80,.35);
}

/* ---------- Buttons ---------- */
.btn{
  --b:var(--amber);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  padding:.85em 1.4em; border-radius:100px; cursor:pointer; border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
  white-space:nowrap;
}
.btn--lg{padding:1.05em 1.8em; font-size:1rem}
.btn--amber{
  background:linear-gradient(180deg,var(--amber-hot),var(--amber));
  color:#3a1f05; box-shadow:0 8px 30px rgba(255,150,60,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--amber:hover{transform:translateY(-2px); box-shadow:0 12px 40px rgba(255,160,70,.5), inset 0 1px 0 rgba(255,255,255,.5)}
.btn--ghost{
  background:rgba(255,255,255,.04); color:var(--fg); border-color:var(--line);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:var(--blue-glow); color:#fff; transform:translateY(-2px); box-shadow:0 8px 30px rgba(61,126,194,.25)}

/* ---------- Logo ---------- */

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.1rem var(--pad);
  transition:padding .35s var(--ease), background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:.6rem var(--pad);
  background:rgba(6,10,20,.72); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav__dock{margin-right:auto; width:200px; height:1px}
.nav__word{font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.11em; font-size:.82rem; color:#fff; line-height:1}
.nav__links{display:flex; gap:1.6rem}
.nav__links a{font-weight:600; font-size:.92rem; color:var(--muted); position:relative; transition:color .25s}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--amber); box-shadow:var(--glow-amber); transition:width .3s var(--ease)}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex; align-items:center; gap:.7rem}
.nav__cta .btn--ghost{font-size:.85rem; padding:.6em 1em}
.nav__cta .btn--amber{font-size:.85rem; padding:.65em 1.1em}
.nav__burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px}
.nav__burger span{width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease)}
.nav.open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav__burger span:nth-child(2){opacity:0}
.nav.open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobilemenu{
  position:fixed; inset:0 0 0 auto; width:min(82vw,360px); z-index:49;
  background:rgba(8,12,22,.96); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:.4rem; padding:6rem 2rem 2rem;
  transform:translateX(100%); transition:transform .4s var(--ease); visibility:hidden;
}
.mobilemenu.open{transform:none; visibility:visible}
.mobilemenu a{font-family:var(--display); font-weight:600; font-size:1.35rem; padding:.5rem 0; color:var(--fg); border-bottom:1px solid var(--line)}
.mobilemenu a:hover{color:var(--amber)}
.mm__cta{color:var(--amber)!important; border:0!important; margin-top:1rem}
.mm__phone{border:0!important; color:var(--muted)!important; font-family:var(--sans)!important; font-size:1rem!important}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:7rem var(--pad) 5rem; overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__img{width:100%; height:100%; object-fit:cover; object-position:center 40%; transform:scale(1.06); will-change:transform}
.hero__wash{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,14,32,.55) 0%, rgba(6,10,22,.35) 38%, rgba(4,6,13,.86) 84%, var(--night-900) 100%),
    linear-gradient(90deg, rgba(4,8,18,.7) 0%, transparent 55%);
}
.hero__glow{
  position:absolute; left:6%; top:34%; width:min(60vw,620px); aspect-ratio:1; z-index:1;
  background:radial-gradient(circle, rgba(255,180,100,.28), rgba(255,150,70,.08) 40%, transparent 68%);
  filter:blur(10px); pointer-events:none;
}
.hero__inner{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%}
/* single morphing logo: hero lockup ⇄ nav brand, scrubbed by scroll */
.morphlogo{position:fixed; top:0; left:0; z-index:60; width:0; height:0}
.ml__emblem,.ml__text{position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform}
.ml__text{display:flex; flex-direction:column; align-items:center; gap:.35rem; white-space:nowrap}
.hero__logoslot{height:224px; margin-bottom:1.6rem}
@media (max-width:700px){.hero__logoslot{height:186px}}
.emblem{width:76px; height:auto; overflow:visible;
  filter:drop-shadow(0 0 16px rgba(62,190,232,.35)); animation:emGlow 5s ease-in-out 2s infinite}
@media (max-width:700px){.ml__emblem{width:60px}}
@keyframes emGlow{
  0%,100%{filter:drop-shadow(0 0 16px rgba(62,190,232,.35))}
  50%{filter:drop-shadow(0 0 24px rgba(62,190,232,.55)) drop-shadow(0 0 40px rgba(255,215,94,.18))}
}
/* power-on: bolt strikes → filament draws → crescent glows → bulb fills */
.em-bolt{animation:emStrike .55s ease-out both}
.em-sliver{animation:emStrike .55s ease-out .12s both}
@keyframes emStrike{
  0%{opacity:0; transform:translateY(-8px)}
  35%{opacity:1; transform:none} 45%{opacity:.35} 55%{opacity:1} 68%{opacity:.55} 80%{opacity:1}
  100%{opacity:1; transform:none}
}
.em-bulb{animation:emFill 1s var(--ease) .45s both}
@keyframes emFill{from{opacity:.18}to{opacity:1}}
.em-fil{stroke-dasharray:100; stroke-dashoffset:100; animation:emDraw .7s var(--ease) .65s forwards}
@keyframes emDraw{to{stroke-dashoffset:0}}
.em-tick{animation:emFade .4s ease .95s both}
.em-cres{animation:emFade .6s ease 1.15s both}
@keyframes emFade{from{opacity:0}to{opacity:1}}
.hero__brand{display:flex; flex-direction:column; gap:.35rem}
.hero__brandname{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.25rem,2.6vw,1.7rem); letter-spacing:.13em; line-height:1;
  background:linear-gradient(90deg,#3fd6c8,#3f9fe8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__brandtag{font-weight:600; text-transform:uppercase; font-size:.6rem; letter-spacing:.42em; color:#8fb4d8}

/* ---------- First-load power-on (boot) ---------- */
.boot{position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:#04060d; transition:background .55s ease}
.boot.fly{background:transparent; pointer-events:none}
.boot__emblem{width:clamp(120px,17vw,180px); position:relative; z-index:1; will-change:transform;
  filter:drop-shadow(0 0 22px rgba(62,190,232,.4))}
.boot__bloom{position:absolute; width:min(560px,120vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,140,.5), rgba(62,190,232,.14) 45%, transparent 70%);
  transform:scale(.1); opacity:0; animation:bootBloom 1.3s ease-out .8s forwards}
@keyframes bootBloom{35%{opacity:1}100%{transform:scale(2.2); opacity:0}}
.boot.fly .boot__bloom{display:none}
/* hero waits for the boot to hand off */
body.booting .ml__emblem{opacity:0}
body:not(.go) .hero__headline, body:not(.go) .hero__sub,
body:not(.go) .hero__actions, body:not(.go) .hero__badges{animation-play-state:paused}
.foot__logo{display:inline-flex; align-items:center; gap:.55rem}
.foot__logo img{height:30px; width:auto; filter:drop-shadow(0 0 8px rgba(90,170,230,.4))}
.hero__headline{font-size:clamp(2.6rem,7vw,5.4rem); max-width:16ch; margin-bottom:1.4rem; opacity:0; transform:translateY(20px); animation:riseIn 1s var(--ease) .5s forwards}
.hero__sub{font-size:clamp(1.02rem,1.5vw,1.22rem); color:#cdd9ec; max-width:56ch; margin-bottom:2rem; opacity:0; transform:translateY(20px); animation:riseIn 1s var(--ease) .7s forwards}
.hero__sub strong{color:#fff}
.hero__actions{display:flex; gap:1rem; flex-wrap:wrap; opacity:0; animation:riseIn 1s var(--ease) .9s forwards}
.hero__badges{list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:2.4rem; opacity:0; animation:riseIn 1s var(--ease) 1.1s forwards}
.hero__badges li{font-size:.82rem; font-weight:600; color:var(--muted); letter-spacing:.02em; display:flex; align-items:center; gap:.55rem}
.hero__badges li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--blue-glow); box-shadow:0 0 10px rgba(90,160,230,.8)}
@keyframes riseIn{to{opacity:1; transform:none}}
.hero__scroll{position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted)}
.hero__scroll-line{width:1px; height:40px; background:linear-gradient(var(--amber),transparent); animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* ============================================================
   SECTIONS (shared)
   ============================================================ */
.section{position:relative; z-index:1; padding:clamp(4.5rem,10vw,8rem) var(--pad); max-width:var(--maxw); margin:0 auto}
.section__head{max-width:60ch; margin-bottom:3rem}
.section__head h2{margin-top:.3rem}
.section__note{color:var(--muted); margin-top:.8rem; font-size:.95rem}

/* reveal-on-scroll — visible by default; JS adds .is-hidden to below-fold elements and animates them in */
.reveal{transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-hidden{opacity:0; transform:translateY(26px)}

/* ---------- Intro ---------- */
.intro{text-align:left; max-width:900px}
.intro__spot{position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(340px 340px at var(--mx,50%) var(--my,40%), rgba(255,180,100,.14), transparent 70%);
  opacity:0; transition:opacity .5s}
.intro:hover .intro__spot{opacity:1}
.intro__headline{position:relative; z-index:1; font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.12; margin-bottom:1.6rem}
.intro__lead{position:relative; z-index:1; font-size:clamp(1.02rem,1.4vw,1.18rem); color:#c3d0e6; max-width:64ch}

/* ---------- Expertise showcase ---------- */
.xp__wrap{display:grid; grid-template-columns:minmax(320px,.92fr) 1.08fr; gap:2.6rem; align-items:stretch}
.xp__list{list-style:none; display:flex; flex-direction:column; margin:0; padding:0}
.xp__item{
  position:relative; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--sans); color:inherit;
  padding:.9rem 5.5rem .9rem 1.1rem; border-bottom:1px solid var(--line);
  transition:background .3s;
}
.xp__item:hover{background:rgba(255,255,255,.02)}
.xp__item::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:2px;
  background:linear-gradient(var(--amber-hot),var(--amber));
  box-shadow:0 0 12px rgba(255,170,80,.8), 0 0 30px rgba(255,150,60,.4);
  transition:height .35s var(--ease)}
.xp__item.is-active::before{height:68%}
.xp__name{display:block; font-family:var(--display); font-weight:600; font-size:1.05rem; color:#c6d3e8; transition:color .3s}
.xp__item.is-active .xp__name{color:var(--amber-hot); text-shadow:0 0 18px rgba(255,170,80,.35)}
.xp__tag{position:absolute; right:.2rem; top:1.15rem; font-size:.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; color:#5f7495}
.xp__item.is-active .xp__tag{color:var(--blue-glow)}
.xp__desc{display:block; overflow:hidden; max-height:0; opacity:0; color:var(--muted); font-size:.88rem; line-height:1.5;
  transition:max-height .45s var(--ease), opacity .35s, margin-top .35s}
.xp__item.is-active .xp__desc{max-height:90px; opacity:1; margin-top:.35rem}
.xp__stage{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  min-height:460px; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.xp__photo{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .65s var(--ease)}
.xp__photo img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 5.5s linear}
.xp__photo.is-active{opacity:1}
.xp__photo.is-active img{transform:scale(1)}
.xp__more{margin-top:2.2rem; color:var(--muted); font-size:.92rem; max-width:72ch}
.xp__more strong{color:#cdd9ec; font-weight:600}

/* ---------- Amber / turtle (compact callout band) ---------- */
.amberband{padding-top:0; padding-bottom:0}
.amberband__inner{display:flex; align-items:center; gap:1.6rem;
  background:linear-gradient(90deg, rgba(255,170,80,.08), rgba(255,255,255,.015) 60%);
  border:1px solid rgba(255,180,100,.22); border-radius:18px; padding:1.5rem 1.8rem}
.amberband__lamp{flex:none; width:12px; height:12px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 14px rgba(255,180,100,.8), 0 0 44px rgba(255,150,60,.45)}
.amberband__copy{flex:1}
.amberband__copy h3{font-size:1.15rem; margin-bottom:.3rem}
.amberband__copy p{color:var(--muted); font-size:.94rem; max-width:72ch}
.amberband .btn{flex:none}
@media (max-width:700px){
  .amberband__inner{flex-direction:column; align-items:flex-start; gap:1rem}
}

/* ---------- Work / before-after / gallery ---------- */
.ba{margin-bottom:2rem; border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ba__frame{position:relative; aspect-ratio:16/9; user-select:none; touch-action:pan-y; cursor:ew-resize}
.ba__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba__before{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); transition:--pos .8s var(--ease)}
.ba__img--before{filter:brightness(.26) saturate(.55) hue-rotate(200deg) contrast(1.05)}
.ba__handle{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--amber); box-shadow:var(--glow-amber); transform:translateX(-1px); transition:left .8s var(--ease); display:grid; place-items:center}
.ba__grip{width:44px; height:44px; border-radius:50%; background:rgba(10,14,24,.8); border:2px solid var(--amber); box-shadow:var(--glow-amber); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); position:relative}
.ba__grip::before,.ba__grip::after{content:""; position:absolute; top:50%; width:0;height:0; border:5px solid transparent; transform:translateY(-50%)}
.ba__grip::before{left:8px; border-right-color:var(--amber)}
.ba__grip::after{right:8px; border-left-color:var(--amber)}
.ba.dragging .ba__before,.ba.dragging .ba__handle{transition:none}
.ba__tag{position:absolute; bottom:14px; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.35em .7em; border-radius:100px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.ba__tag--on{right:14px; color:var(--amber); background:rgba(10,14,24,.6); border:1px solid rgba(255,180,100,.4)}
.ba__tag--off{left:14px; color:var(--muted); background:rgba(10,14,24,.6); border:1px solid var(--line)}

.gallery{column-count:3; column-gap:14px; margin-top:2rem}
.gal{position:relative; break-inside:avoid; margin-bottom:14px; border-radius:14px; overflow:hidden; cursor:pointer; border:1px solid var(--line)}
.gal img{width:100%; transition:transform .6s var(--ease), filter .6s}
.gal figcaption{position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem .9rem; font-size:.82rem; font-weight:600; color:#fff;
  background:linear-gradient(transparent, rgba(4,8,16,.85)); opacity:0; transform:translateY(8px); transition:.4s var(--ease)}
.gal::after{content:""; position:absolute; inset:0; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,180,100,0); transition:box-shadow .4s}
.gal:hover img{transform:scale(1.05)}
.gal:hover figcaption{opacity:1; transform:none}
.gal:hover::after{box-shadow:inset 0 0 0 1px rgba(255,180,100,.6), inset 0 0 40px rgba(255,160,70,.15)}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(3,5,11,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:grid; place-items:center; padding:4vw; opacity:0; visibility:hidden; transition:opacity .3s}
.lightbox.open{opacity:1; visibility:visible}
.lightbox img{max-width:100%; max-height:90vh; border-radius:12px; box-shadow:0 30px 90px rgba(0,0,0,.7)}
.lightbox__close{position:absolute; top:1.4rem; right:1.6rem; background:none; border:0; color:#fff; font-size:2rem; cursor:pointer; line-height:1}

/* ---------- Process ---------- */
.steps{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; position:relative}
.steps::before{content:""; position:absolute; top:34px; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,180,100,.5), transparent)}
.step{position:relative; padding-top:0}
.step__no{display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--amber); margin-bottom:1.2rem;
  background:var(--night-800); border:1px solid rgba(255,180,100,.35); box-shadow:0 0 30px rgba(255,160,70,.25); position:relative; z-index:1}
.step h3{margin-bottom:.4rem}
.step p{color:var(--muted); font-size:.92rem}

/* ---------- Trade ---------- */
.trade__inner{display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center}
.trade__text h2{margin:.4rem 0 1.2rem}
.trade__text p{color:#cdd9ec; max-width:52ch}
.trade__actions{display:flex; flex-direction:column; gap:.8rem; margin-top:1.6rem; align-items:flex-start}
.trade__media{border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.45)}
.trade__media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}

/* ---------- Quotes ---------- */
.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.quote{padding:2rem 1.8rem; border-radius:18px; background:linear-gradient(180deg, rgba(61,126,194,.08), rgba(255,255,255,.01)); border:1px solid var(--line); position:relative}
.quote{border-left:2px solid rgba(255,180,100,.55)}
.quote p{font-size:1rem; line-height:1.55; color:#e9eff8; margin:0 0 1rem}
.quote cite{font-family:var(--sans); font-style:normal; font-weight:700; color:var(--amber); font-size:.9rem}

/* ---------- Area ---------- */
.area{text-align:center; max-width:820px}
.area h2{margin:.3rem 0 1.6rem}
.area__list{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem}
.area__list li{padding:.5em 1.1em; border-radius:100px; border:1px solid var(--line); font-size:.9rem; font-weight:600; color:#cdd9ec; background:rgba(255,255,255,.02); transition:.3s}
.area__list li:hover{border-color:var(--amber); color:#fff; box-shadow:0 0 24px rgba(255,160,70,.2)}

/* ---------- Contact ---------- */
.contact__inner{display:grid; grid-template-columns:1fr 1fr; gap:3rem; max-width:var(--maxw); margin:0 auto;
  background:radial-gradient(120% 120% at 0% 0%, rgba(61,126,194,.14), transparent 55%);
  border:1px solid var(--line); border-radius:26px; padding:clamp(2rem,4vw,3.4rem)}
.contact__pitch h2{margin:.4rem 0 1rem}
.contact__pitch>p{color:#cdd9ec; margin-bottom:1.8rem}
.contact__meta{display:flex; flex-direction:column; gap:.5rem; color:var(--muted); font-size:.94rem}
.contact__meta a{transition:color .25s}
.contact__meta a:hover{color:var(--amber)}
.contact__meta strong{font-size:1.3rem; color:var(--amber)}
.contact__form{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field{display:flex; flex-direction:column; gap:.4rem}
.field--full{grid-column:1/-1}
.field label{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:.95rem; color:#fff; padding:.8em .9em; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); transition:border-color .25s, box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,180,100,.15)}
.field select option{background:var(--night-800)}
.field textarea{resize:vertical}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.contact__ok{grid-column:1/-1; color:var(--amber); font-size:.95rem; font-weight:600}
.contact__ok a{text-decoration:underline}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative; z-index:2; margin-top:3rem; padding-top:3rem; border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, rgba(4,6,13,.6))}
.foot__lights{height:2px; background:repeating-linear-gradient(90deg, var(--amber) 0 4px, transparent 4px 26px);
  box-shadow:0 0 12px rgba(255,170,80,.6); opacity:.7; margin:0 var(--pad) 3rem; border-radius:2px; animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.5}50%{opacity:.9}}
.foot__inner{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.foot__brand .nav__word{font-size:1.4rem}
.foot__brand p{color:var(--muted); font-size:.9rem; margin-top:.8rem; max-width:34ch}
.foot__nav{display:flex; flex-direction:column; gap:.6rem}
.foot__nav a{color:var(--muted); font-size:.92rem; transition:color .25s}
.foot__nav a:hover{color:var(--amber)}
.foot__contact{display:flex; flex-direction:column; gap:.6rem; font-size:.92rem}
.foot__contact>a{color:#cdd9ec}
.foot__contact>a:hover{color:var(--amber)}
.foot__social{display:flex; gap:1rem; margin-top:.4rem}
.foot__social a{font-weight:600; color:var(--amber); font-size:.86rem}
.foot__base{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; max-width:var(--maxw); margin:2.5rem auto 0; padding:1.5rem var(--pad); border-top:1px solid var(--line); color:var(--muted); font-size:.82rem}
.foot__privacy:hover{color:var(--amber)}

/* sticky mobile call bar */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:45; display:none; text-align:center;
  padding:.9rem; font-weight:700; font-size:.9rem; color:#3a1f05;
  background:linear-gradient(180deg,var(--amber-hot),var(--amber)); box-shadow:0 -6px 30px rgba(255,150,60,.35)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex}
  /* mobile: swipeable photo cards — photo on top, text below */
  .xp__wrap{display:block}
  .xp__stage{display:none}
  .xp__list{display:flex; flex-direction:row; overflow-x:auto; gap:.9rem; scroll-snap-type:x mandatory;
    margin:0 calc(var(--pad)*-1); padding:.2rem var(--pad) 1.2rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .xp__list::-webkit-scrollbar{display:none}
  .xp__list li{flex:0 0 82%; max-width:330px; scroll-snap-align:center;
    border:1px solid var(--line); border-radius:16px; overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    display:flex; flex-direction:column}
  .xp__list .xp__photo{position:static; opacity:1; height:175px; margin:0}
  .xp__list .xp__photo img{transform:none; width:100%; height:100%; object-fit:cover}
  .xp__item{border-bottom:0; padding:1rem 1.1rem 1.2rem}
  .xp__item::before{display:none}
  .xp__item:hover{background:none}
  .xp__tag{position:static; display:inline-block; margin-bottom:.25rem}
  .xp__desc{max-height:none; opacity:1; margin-top:.3rem}
  .xp__name,.xp__item.is-active .xp__name{color:#e8eef8; text-shadow:none}
  .trade__inner,.contact__inner{grid-template-columns:1fr; gap:2rem}
  .steps{grid-template-columns:1fr 1fr}
  .steps::before{display:none}
  .quote-grid{grid-template-columns:1fr}
  .gallery{column-count:2}
  .contact__form{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hero{min-height:100svh}
  .gallery{column-count:1}
  .steps{grid-template-columns:1fr}
  .contact__form{grid-template-columns:1fr}
  .foot__inner{grid-template-columns:1fr; gap:1.6rem}
  .callbar{display:block}
  body{padding-bottom:3.2rem}
  .hero__actions .btn{flex:1}
}

/* ============================================================
   REDUCED MOTION — show the lit end-state, kill motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .reveal{opacity:1; transform:none}
  .hero__headline,.hero__sub,.hero__actions,.hero__badges{opacity:1; transform:none}
  .svc .svc__dot{background:var(--amber); box-shadow:var(--glow-amber)}
  .reveal,.reveal.is-hidden{opacity:1!important; transform:none!important}
  .em-bolt,.em-sliver,.em-bulb,.em-cres,.em-tick{opacity:1!important; transform:none!important; animation:none!important}
  .em-fil{stroke-dashoffset:0!important; animation:none!important}
  .boot{display:none!important}
  body.booting .ml__emblem{opacity:1}
  .hero__headline,.hero__sub,.hero__actions,.hero__badges{animation-play-state:running!important}
}