/* ═══════════════════════════════════════════════════════════
   NOIRWAX — Black Shines Better
   Dark-mode only. Matte black ground, glass surfaces,
   gold/silver detail, electric blue reserved for interaction.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ground */
  --black:    #050505;
  --carbon:   #0a0a0c;
  --surface:  #0f0f12;
  --surface2: #141418;
  --gloss:    #1b1b20;

  /* lines & glass */
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.12);
  --glass:     rgba(255,255,255,.028);
  --glass-2:   rgba(255,255,255,.05);

  /* type */
  --white: #ffffff;
  --text:  rgba(255,255,255,.92);
  --mute:  rgba(255,255,255,.52);
  --dim:   rgba(255,255,255,.32);
  --faint: rgba(255,255,255,.16);

  /* accents */
  --gold:    #b8933f;
  --gold-lt: #e3c67d;
  --silver:  #c9cdd4;
  --blue:    #0a84ff;
  --blue-lt: #4da3ff;

  --r:    16px;
  --r-lg: 24px;
  --wrap: 1240px;

  --e:  cubic-bezier(.22,.61,.36,1);
  --e2: cubic-bezier(.65,0,.35,1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:var(--font);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

::selection{ background:var(--gold); color:#000; }
:focus-visible{ outline:1px solid var(--blue-lt); outline-offset:4px; }

.wrap{ width:min(100% - 2.8rem, var(--wrap)); margin-inline:auto; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:2000; background:var(--gold); color:#000; padding:.8rem 1.3rem; }
.skip-link:focus{ left:0; }

/* scrollbar */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:#1e1e24; border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:#2a2a32; }

/* ─────────────── loader ─────────────── */
.loader{
  position:fixed; inset:0; z-index:1500;
  background:var(--black);
  display:grid; place-content:center; gap:2.2rem; justify-items:center;
  transition:opacity .9s var(--e), visibility .9s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader-mark{ position:relative; overflow:hidden; }
.loader-word{
  font-size:clamp(1.6rem,5vw,2.4rem); font-weight:200;
  letter-spacing:.62em; text-indent:.62em; color:var(--white);
}
.loader-sheen{
  position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
  mix-blend-mode:overlay; transform:translateX(-100%);
  animation:sheen 1.5s var(--e) infinite;
}
@keyframes sheen{ to{ transform:translateX(100%); } }
.loader-bar{ width:180px; height:1px; background:rgba(255,255,255,.1); overflow:hidden; }
.loader-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-lt)); transition:width .3s linear; }

/* ─────────────── cursor ─────────────── */
.cursor{
  position:fixed; top:0; left:0; z-index:1400; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(255,255,255,.28); border-radius:50%;
  transition:width .35s var(--e), height .35s var(--e), margin .35s var(--e),
             border-color .35s var(--e), background .35s var(--e), opacity .3s;
  opacity:0;
}
.cursor.on{ opacity:1; }
.cursor-dot{
  position:absolute; top:50%; left:50%; width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  border-radius:50%; background:var(--white); transition:opacity .3s;
}
.cursor.hot{
  width:64px; height:64px; margin:-32px 0 0 -32px;
  border-color:var(--blue); background:rgba(10,132,255,.09);
}
.cursor.hot .cursor-dot{ opacity:0; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ─────────────── type ─────────────── */
h1,h2,h3{ margin:0; font-weight:200; line-height:1.05; letter-spacing:-.01em; }

.tag{
  margin:0 0 1.5rem; font-size:.66rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:.9rem;
}
.tag::before{ content:''; width:32px; height:1px; background:currentColor; opacity:.6; flex:0 0 auto; }

.h2{
  font-size:clamp(2.1rem,4.6vw,3.7rem);
  font-weight:200; letter-spacing:-.02em; color:var(--white);
}
.lead{ margin:1.4rem 0 0; max-width:58ch; color:var(--mute); font-size:1.04rem; }
.body{ margin:1.2rem 0 0; max-width:60ch; color:var(--mute); font-size:.99rem; }

.head{ margin-bottom:4.5rem; max-width:800px; }
.head-c{ margin-inline:auto; text-align:center; }
.head-c .tag{ justify-content:center; }

/* ─────────────── buttons ─────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1.05rem 2.3rem; border:1px solid var(--line-2); border-radius:100px;
  font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  cursor:pointer; overflow:hidden; white-space:nowrap;
  transition:border-color .5s var(--e), color .5s var(--e),
             background .5s var(--e), box-shadow .5s var(--e);
}
.btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  transform:translateX(-110%); transition:transform .85s var(--e);
}
.btn:hover::after{ transform:translateX(110%); }

.btn-gold{
  background:linear-gradient(140deg,var(--gold-lt) 0%,var(--gold) 45%,#7d621f 100%);
  color:#0b0b0b; border-color:transparent; font-weight:600;
  box-shadow:0 10px 40px -18px rgba(184,147,63,.85);
}
.btn-gold:hover{ box-shadow:0 16px 52px -16px rgba(184,147,63,.95); }

.btn-glass{
  background:var(--glass); color:var(--white);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.btn-glass:hover{
  border-color:var(--blue); color:var(--blue-lt);
  box-shadow:0 0 34px -10px rgba(10,132,255,.5), inset 0 0 22px -14px rgba(10,132,255,.6);
}

.btn-xs{ padding:.68rem 1.4rem; font-size:.63rem; letter-spacing:.2em; }
.btn-lg{ padding:1.25rem 2.4rem; }
.btn-full{ display:flex; width:100%; }

/* ─────────────── header ─────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:900;
  padding:1.5rem 0; border-bottom:1px solid transparent;
  transition:padding .55s var(--e), background .55s var(--e),
             border-color .55s var(--e), backdrop-filter .55s var(--e);
}
.hdr.stuck{
  padding:.85rem 0;
  background:rgba(5,5,5,.7);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom-color:var(--line);
}
.hdr-in{
  width:min(100% - 2.8rem, 1400px); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

.brand{ display:flex; align-items:center; gap:.75rem; }
.brand-dot{
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,var(--gold-lt) 40%,var(--gold) 70%,#3a2e0d);
  box-shadow:0 0 14px 1px rgba(184,147,63,.75);
}
.brand-word{
  font-size:.98rem; font-weight:300; letter-spacing:.42em; text-indent:.42em;
  color:var(--white);
}

.nav{ display:flex; align-items:center; gap:2.4rem; margin-left:auto; }
.nav a:not(.btn){
  position:relative; font-size:.72rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
  padding:.4rem 0; transition:color .4s var(--e);
}
.nav a:not(.btn)::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--blue); box-shadow:0 0 10px var(--blue);
  transition:width .45s var(--e);
}
.nav a:not(.btn):hover{ color:var(--white); }
.nav a:not(.btn):hover::after{ width:100%; }
.nav a.active{ color:var(--white); }
.nav a.active::after{ width:100%; background:var(--gold); box-shadow:none; }

.hdr-tools{ display:flex; align-items:center; gap:1.4rem; }
.lang{ display:flex; align-items:center; gap:.55rem; }
.lang-sep{ width:1px; height:11px; background:var(--faint); }
.lang-btn{
  background:none; border:0; cursor:pointer; padding:.2rem;
  font-size:.66rem; font-weight:500; letter-spacing:.16em; color:var(--dim);
  transition:color .35s var(--e);
}
.lang-btn:hover{ color:var(--blue-lt); }
.lang-btn.is-active{ color:var(--gold); }

.burger{ display:none; width:34px; height:28px; background:none; border:0; cursor:pointer; padding:0; position:relative; }
.burger span{ position:absolute; left:5px; width:24px; height:1px; background:var(--white); transition:transform .45s var(--e), opacity .3s; }
.burger span:nth-child(1){ top:10px; }
.burger span:nth-child(2){ top:17px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ─────────────── hero ─────────────── */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem 0 3rem;
}

/* — cinematic studio environment (CSS stand-in for photography) — */
.studio{ position:absolute; inset:0; pointer-events:none; }
.studio-floor{
  position:absolute; inset:52% 0 0 0;
  background:linear-gradient(180deg,#0b0b0d 0%,#080809 40%,#050505 100%);
}
.studio-floor::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 45%);
}

/* overhead LED strips */
.led{
  position:absolute; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
}
.led-a{ top:16%; left:12%; width:38%; filter:blur(1px); opacity:.5;  transform:translateY(var(--py,0px)); }
.led-b{ top:23%; right:9%;  width:30%; filter:blur(1px); opacity:.35; transform:translateY(var(--py,0px)); }
.led::after{
  content:''; position:absolute; left:0; right:0; top:0; height:230px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 70%);
  filter:blur(28px);
}

/* soft light pool on the floor */
.pool{
  position:absolute; left:50%; top:56%; width:120%; height:46%;
  transform:translateX(-50%) translateY(var(--py,0px));
  background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(255,255,255,.085),transparent 70%);
  filter:blur(30px);
}

/* drifting fog */
.fog{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.fog-1{ width:60vw; height:32vh; left:-10%;  top:44%; background:radial-gradient(circle,rgba(150,160,190,.13),transparent 68%); animation:drift1 26s ease-in-out infinite; }
.fog-2{ width:52vw; height:28vh; right:-8%;  top:52%; background:radial-gradient(circle,rgba(184,147,63,.10),transparent 68%);  animation:drift2 32s ease-in-out infinite; }
.fog-3{ width:70vw; height:24vh; left:15%;   top:66%; background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);  animation:drift1 38s ease-in-out infinite reverse; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(6%,-4%) } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-7%,3%) } }

/* the car — suggested by its own light, never fully lit */
.car{
  position:absolute; left:50%; top:58%; width:min(1100px,92vw); height:200px;
  transform:translateX(-50%) translateY(var(--py,0px));
}
.car-body{
  position:absolute; left:6%; right:6%; top:8%; height:74%;
  border-radius:52% 52% 42% 42% / 78% 78% 26% 26%;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.025) 38%, transparent 70%),
    linear-gradient(180deg,#111114 0%,#0a0a0c 60%,#070708 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 40px 80px -30px #000;
  filter:blur(.4px);
}
.car-body::after{
  content:''; position:absolute; left:12%; right:12%; top:6%; height:34%;
  border-radius:50%;
  background:linear-gradient(100deg,transparent 26%,rgba(255,255,255,.14) 48%,transparent 68%);
  filter:blur(6px);
}
/* daytime-running-light bars */
.drl{
  position:absolute; top:47%; width:12%; height:3px; border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.25),#fff 45%,rgba(230,240,255,.9));
  box-shadow:0 0 12px 2px rgba(255,255,255,.85), 0 0 46px 10px rgba(180,210,255,.5);
}
.drl-l{ left:11%; }
.drl-r{ right:11%; }
/* headlight beams into the fog */
.beam{
  position:absolute; top:44%; width:30%; height:150px;
  background:radial-gradient(ellipse 100% 55% at 0% 50%,rgba(190,215,255,.20),transparent 72%);
  filter:blur(22px);
}
.beam-l{ left:2%;  transform:translateY(-30%) rotate(-3deg); }
.beam-r{ right:2%; transform:translateY(-30%) rotate(3deg) scaleX(-1); }
/* mirror floor reflection */
.car-reflect{
  position:absolute; left:10%; right:10%; top:82%; height:120%;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 55%);
  border-radius:50%;
  transform:scaleY(-.85); transform-origin:top;
  filter:blur(13px); opacity:.5;
}

.vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 85% 70% at 50% 46%,transparent 30%,rgba(0,0,0,.72) 100%);
}
.grain{
  position:absolute; inset:0; opacity:.035; 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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-in{ position:relative; z-index:3; width:min(100% - 2.8rem,var(--wrap)); margin-inline:auto; }

.hero-h1{ margin:0 0 2.2rem; }
.hero-h1 .line{ display:block; overflow:hidden; }
.hero-h1 .line > span{
  display:block;
  font-size:clamp(3rem,10.5vw,9.5rem);
  font-weight:100; line-height:.98;
  letter-spacing:.06em; text-transform:uppercase; color:var(--white);
}
.hero-h1 .gleam{
  background:linear-gradient(100deg,#8e8e96 0%,#fff 28%,var(--gold-lt) 46%,#fff 62%,#8e8e96 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gleam 7s linear infinite;
}
@keyframes gleam{ to{ background-position:-250% 0; } }

.hero-sub{ margin:0 0 3rem; max-width:46ch; color:var(--mute); font-size:1.1rem; font-weight:300; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero-foot{
  position:relative; z-index:3; margin-top:auto; padding-top:4rem;
  width:min(100% - 2.8rem,var(--wrap)); margin-inline:auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
}
.scroller{ width:22px; height:38px; border:1px solid var(--line-2); border-radius:12px; position:relative; flex:0 0 auto; }
.scroller i{
  position:absolute; left:50%; top:8px; width:2px; height:6px; border-radius:2px;
  background:var(--gold); transform:translateX(-50%); animation:wheel 2.1s var(--e) infinite;
}
@keyframes wheel{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,15px)} }

.hero-meta{ display:flex; gap:3.4rem; list-style:none; margin:0; padding:0; }
.hero-meta li{ display:flex; flex-direction:column; gap:.15rem; }
.hero-meta b{ font-size:1.9rem; font-weight:200; color:var(--white); letter-spacing:-.01em; }
.hero-meta span{ font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); }

/* ─────────────── marquee ─────────────── */
.strip{
  border-block:1px solid var(--line); background:var(--carbon);
  padding:1.6rem 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.strip-track{ display:flex; align-items:center; gap:3rem; width:max-content; animation:marq 42s linear infinite; }
.strip:hover .strip-track{ animation-play-state:paused; }
.strip-track span{
  font-size:.74rem; font-weight:400; letter-spacing:.4em; color:var(--dim);
  white-space:nowrap; transition:color .4s var(--e);
}
.strip-track span:hover{ color:var(--silver); }
.strip-track i{ width:3px; height:3px; border-radius:50%; background:var(--faint); flex:0 0 auto; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ─────────────── sections ─────────────── */
.sec{ padding:9rem 0; position:relative; }
.sec-alt{ background:var(--carbon); border-block:1px solid var(--line); }

/* ─────────────── icons ─────────────── */
.ic{
  width:26px; height:26px; stroke:var(--gold); fill:none;
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .5s var(--e), transform .5s var(--e);
}

/* ─────────────── services ─────────────── */
.svc-grid{ display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.svc{
  position:relative; padding:2.8rem 2.2rem 3rem; background:var(--black); overflow:hidden;
  transition:background .55s var(--e);
}
.svc::before{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(10,132,255,.10),transparent 62%);
  transition:opacity .55s var(--e);
}
.svc::after{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  border:1px solid transparent;
  background:linear-gradient(140deg,rgba(10,132,255,.5),transparent 40%,transparent 60%,rgba(184,147,63,.35)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .55s var(--e);
}
.svc:hover{ background:var(--surface); }
.svc:hover::before,.svc:hover::after{ opacity:1; }
.svc:hover .ic{ stroke:var(--blue-lt); transform:translateY(-3px); }
.svc:hover .svc-n{ color:var(--faint); }

.svc h3{ margin:1.7rem 0 .8rem; font-size:1.2rem; font-weight:300; letter-spacing:0; color:var(--white); }
.svc p{ margin:0; font-size:.92rem; color:var(--mute); max-width:34ch; }
.svc-n{
  position:absolute; top:2.4rem; right:2.2rem;
  font-size:.66rem; letter-spacing:.2em; color:rgba(255,255,255,.09);
  transition:color .55s var(--e);
}

/* ─────────────── protection ─────────────── */
.prot-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.prot{
  position:relative; padding:3rem 2.3rem;
  background:linear-gradient(165deg,var(--glass-2),transparent 60%),var(--surface);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .6s var(--e), border-color .6s var(--e), box-shadow .6s var(--e);
}
.prot:hover{ transform:translateY(-7px); border-color:var(--line-2); box-shadow:0 44px 90px -50px #000; }
.prot-key{
  border-color:rgba(184,147,63,.32);
  background:linear-gradient(165deg,rgba(184,147,63,.09),transparent 55%),var(--surface);
  box-shadow:0 40px 100px -60px rgba(184,147,63,.6);
}
.prot-flag{
  position:absolute; top:1.4rem; right:1.4rem;
  font-size:.58rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:#0b0b0b; background:linear-gradient(140deg,var(--gold-lt),var(--gold));
  padding:.35rem .8rem; border-radius:100px;
}
.prot-lvl{
  display:block; font-size:.72rem; font-weight:400; letter-spacing:.4em;
  color:var(--gold); margin-bottom:1.6rem;
}
.prot h3{ font-size:1.9rem; font-weight:200; color:var(--white); }
.prot-life{
  margin:.5rem 0 1.4rem; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--silver); opacity:.7;
}
.prot > p{ margin:0 0 1.8rem; font-size:.95rem; color:var(--mute); }
.prot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.prot li{ position:relative; padding-left:1.6rem; font-size:.88rem; color:var(--dim); }
.prot li::before{
  content:''; position:absolute; left:0; top:.5em; width:10px; height:5px;
  border-left:1px solid var(--gold); border-bottom:1px solid var(--gold); transform:rotate(-45deg);
}

/* ─────────────── why ─────────────── */
.why-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.why{
  padding:2.6rem 2rem;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .55s var(--e), background .55s var(--e), transform .55s var(--e);
}
.why:hover{ transform:translateY(-5px); border-color:rgba(10,132,255,.35); background:var(--glass-2); }
.why:hover .ic{ stroke:var(--blue-lt); }
.why h3{ margin:1.5rem 0 .7rem; font-size:1.08rem; font-weight:300; color:var(--white); }
.why p{ margin:0; font-size:.9rem; color:var(--mute); }

/* ─────────────── before / after ─────────────── */
.ba{
  position:relative; width:100%; aspect-ratio:21/9; min-height:340px;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; user-select:none;
}
.ba-face{ position:absolute; inset:0; }
/* stand-ins for real photography — see README */
.ba-b{
  background:
    repeating-linear-gradient(56deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-44deg,rgba(255,255,255,.035) 0 1px,transparent 1px 10px),
    radial-gradient(80% 120% at 50% -10%,#2a2a30,#111114 55%,#08080a 100%);
  filter:saturate(.5) brightness(.9);
}
.ba-a{
  background:
    linear-gradient(112deg,transparent 24%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.03) 56%,transparent 72%),
    radial-gradient(80% 130% at 50% -15%,#43434f,#15151b 52%,#050507 100%);
  clip-path:inset(0 0 0 50%);
}
.ba-tag{
  position:absolute; top:1.4rem; left:1.4rem; padding:.4rem .95rem; border-radius:100px;
  font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  background:rgba(5,5,5,.6); border:1px solid var(--line-2); color:var(--mute);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.ba-tag-a{ left:auto; right:1.4rem; color:var(--gold-lt); border-color:rgba(184,147,63,.4); }
.ba-input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:5; }
.ba-bar{
  position:absolute; top:0; bottom:0; left:50%; width:1px; z-index:4; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.8) 14%,rgba(255,255,255,.8) 86%,transparent);
}
.ba-bar span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(5,5,5,.55); border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 0 30px -6px rgba(255,255,255,.35);
}
.ba-bar span::before,.ba-bar span::after{
  content:''; position:absolute; top:50%; width:0; height:0; border-block:4px solid transparent;
}
.ba-bar span::before{ left:15px; border-right:6px solid #fff; transform:translateY(-50%); }
.ba-bar span::after{ right:15px; border-left:6px solid #fff; transform:translateY(-50%); }

/* ─────────────── gallery ─────────────── */
.mason{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:1.2rem;
  grid-auto-flow:dense;   /* mixed spans leave holes without this */
}
.tile{
  position:relative; margin:0; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface2);
  transition:border-color .6s var(--e), transform .6s var(--e);
}
/* placeholder "paint" surfaces */
.tile::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(118deg,transparent 30%,rgba(255,255,255,.10) 47%,rgba(255,255,255,.02) 55%,transparent 70%),
    radial-gradient(90% 130% at 40% -20%,#3a3a46,#14141a 55%,#08080b 100%);
  transition:transform 1.1s var(--e), filter .6s var(--e);
}
.tile:nth-child(even)::before{ background:
    linear-gradient(100deg,transparent 28%,rgba(255,255,255,.08) 46%,transparent 66%),
    radial-gradient(90% 130% at 60% -20%,#33333d,#111116 55%,#070709 100%); }
.tile:hover{ border-color:rgba(10,132,255,.4); }
.tile:hover::before{ transform:scale(1.06); filter:brightness(1.18); }
.tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.82));
}
.tile figcaption{
  position:absolute; left:1.5rem; bottom:1.4rem; z-index:2;
  display:flex; flex-direction:column; gap:.2rem;
  transform:translateY(8px); opacity:.85; transition:transform .6s var(--e), opacity .6s var(--e);
}
.tile:hover figcaption{ transform:none; opacity:1; }
.tile figcaption b{ font-size:1.02rem; font-weight:300; color:var(--white); }
.tile figcaption span{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }

.tile-xl{ grid-column:span 2; grid-row:span 3; }
.tile-lg{ grid-column:span 2; grid-row:span 2; }
.tile-md{ grid-column:span 1; grid-row:span 2; }
.tile-sm{ grid-column:span 1; grid-row:span 1; }

/* ─────────────── pricing ─────────────── */
.pr-grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.pr{
  position:relative; display:flex; flex-direction:column; padding:2.8rem 2.1rem;
  background:linear-gradient(170deg,var(--glass-2),transparent 55%),var(--black);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .6s var(--e), border-color .6s var(--e), box-shadow .6s var(--e);
}
.pr:hover{ transform:translateY(-8px); border-color:rgba(10,132,255,.35); box-shadow:0 46px 90px -55px rgba(10,132,255,.45); }
.pr:hover .ic{ stroke:var(--blue-lt); }
.pr-key{
  border-color:rgba(184,147,63,.35);
  background:linear-gradient(170deg,rgba(184,147,63,.1),transparent 52%),var(--black);
  box-shadow:0 40px 100px -60px rgba(184,147,63,.65);
}
.pr-key:hover{ border-color:rgba(184,147,63,.6); box-shadow:0 46px 100px -50px rgba(184,147,63,.7); }
.pr-flag{
  position:absolute; top:1.3rem; right:1.3rem;
  font-size:.56rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:#0b0b0b; background:linear-gradient(140deg,var(--gold-lt),var(--gold));
  padding:.32rem .75rem; border-radius:100px;
}
.pr h3{ margin:1.6rem 0 1.2rem; font-size:1.14rem; font-weight:300; color:var(--white); }
.pr-amt{ margin:0; font-size:2.9rem; font-weight:100; color:var(--white); line-height:1; letter-spacing:-.02em; }
.pr-amt i{ font-style:normal; font-size:1.2rem; color:var(--gold); vertical-align:super; margin-right:.15rem; }
.pr-from{ margin:.5rem 0 1.8rem; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); }
.pr ul{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:.65rem; flex:1; }
.pr li{ position:relative; padding-left:1.5rem; font-size:.87rem; color:var(--mute); }
.pr li::before{
  content:''; position:absolute; left:0; top:.55em; width:5px; height:5px;
  border-radius:50%; background:var(--gold); opacity:.75;
}

/* ─────────────── testimonials ─────────────── */
.tst{ max-width:880px; margin-inline:auto; }
.tst-stage{ position:relative; min-height:290px; }
.tst-item{
  position:absolute; inset:0; margin:0; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.8rem;
  padding:3rem 2.4rem;
  background:linear-gradient(165deg,var(--glass-2),transparent 60%),var(--surface);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  opacity:0; transform:translateY(16px) scale(.985); pointer-events:none;
  transition:opacity .7s var(--e), transform .7s var(--e);
}
.tst-item.is-on{ opacity:1; transform:none; pointer-events:auto; }
.stars{ color:var(--gold); letter-spacing:.4em; font-size:.82rem; }
.tst-item blockquote{
  margin:0; max-width:58ch; font-size:clamp(1.05rem,2vw,1.34rem);
  font-weight:200; line-height:1.6; color:var(--white);
}
.tst-item figcaption{ display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.av{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-size:.72rem; letter-spacing:.1em; color:var(--gold-lt);
  background:var(--glass-2); border:1px solid rgba(184,147,63,.3);
}
.tst-item figcaption b{ font-size:.92rem; font-weight:400; color:var(--text); }
.tst-item figcaption i{ font-style:normal; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }

.tst-nav{ display:flex; align-items:center; justify-content:center; gap:1.8rem; margin-top:2.4rem; }
.tst-arrow{
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:var(--glass); border:1px solid var(--line); color:var(--mute);
  transition:border-color .45s var(--e), color .45s var(--e), background .45s var(--e);
}
.tst-arrow:hover{ border-color:var(--blue); color:var(--blue-lt); background:rgba(10,132,255,.08); }
.tst-dots{ display:flex; gap:.7rem; }
.tst-dot{
  width:6px; height:6px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--faint); border:0; transition:background .45s var(--e), transform .45s var(--e);
}
.tst-dot.on{ background:var(--gold); transform:scale(1.35); }

/* ─────────────── about ─────────────── */
.about-grid{ display:grid; gap:5rem; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; }
.ab-stats{ display:flex; flex-wrap:wrap; gap:3rem; margin-top:3.4rem; }
.ab-stats div{ display:flex; flex-direction:column; gap:.2rem; }
.ab-stats b{ font-size:2.2rem; font-weight:100; color:var(--white); letter-spacing:-.02em; }
.ab-stats span{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); }

.ab-visual{
  position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(90% 70% at 50% 10%,#1c1c23,#0b0b0e 60%,#050506 100%);
}
.ab-glow{
  position:absolute; left:50%; top:22%; width:78%; height:52%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(184,147,63,.18),transparent 68%);
  filter:blur(34px);
}
.ab-line{
  position:absolute; left:0; right:0; top:52%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}

/* ─────────────── booking ─────────────── */
.sec-book{ background:radial-gradient(80% 60% at 82% 12%,rgba(184,147,63,.08),transparent 62%),var(--black); }
.book-grid{ display:grid; gap:4.5rem; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); align-items:start; }

.bk-pts{ list-style:none; margin:2.6rem 0; padding:0; display:grid; gap:.9rem; }
.bk-pts li{ position:relative; padding-left:1.8rem; font-size:.95rem; color:var(--mute); }
.bk-pts li::before{
  content:''; position:absolute; left:0; top:.5em; width:11px; height:6px;
  border-left:1px solid var(--gold); border-bottom:1px solid var(--gold); transform:rotate(-45deg);
}
.bk-direct{ display:flex; flex-wrap:wrap; gap:1.2rem 3rem; margin-top:2.6rem; }
.bk-d{ display:flex; flex-direction:column; gap:.2rem; }
.bk-d span{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); }
.bk-d b{ font-size:1.05rem; font-weight:300; color:var(--white); transition:color .4s var(--e); }
.bk-d:hover b{ color:var(--gold-lt); }

.form{
  padding:2.8rem;
  background:linear-gradient(170deg,var(--glass-2),transparent 55%),var(--surface);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  display:grid; gap:1.25rem;
  box-shadow:0 50px 110px -70px #000;
}
.f{ display:grid; gap:.5rem; }
.f2{ display:grid; gap:1.25rem; grid-template-columns:1fr 1fr; }
.f label,.chk span{ font-size:.62rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.f input,.f select,.f textarea{
  width:100%; padding:.95rem 1.1rem;
  background:rgba(0,0,0,.4); color:var(--white);
  border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:.96rem; font-weight:300;
  transition:border-color .4s var(--e), box-shadow .4s var(--e), background .4s var(--e);
}
.f textarea{ resize:vertical; min-height:112px; }
.f input::placeholder,.f textarea::placeholder{ color:rgba(255,255,255,.2); }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none; border-color:var(--blue); background:rgba(10,132,255,.04);
  box-shadow:0 0 0 3px rgba(10,132,255,.12);
}
.f select{
  appearance:none; cursor:pointer; padding-right:2.6rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23b8933f' stroke-width='1.4'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position:right 1.1rem center;
}
.f input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.6) sepia(1) saturate(3) hue-rotate(5deg); cursor:pointer; }
.f.bad input,.f.bad select,.f.bad textarea{ border-color:#c0453c; }
.chk.bad input{ border-color:#c0453c; }
.chk.bad span{ color:#e0655b; }

.err{ margin:0; font-size:.74rem; color:#e0655b; }
.err:empty{ display:none; }

.chk{ display:flex; align-items:flex-start; gap:.8rem; cursor:pointer; }
.chk input{
  position:relative; appearance:none; flex:0 0 auto; width:17px; height:17px; margin-top:.15rem;
  border:1px solid var(--line-2); border-radius:5px; background:rgba(0,0,0,.4); cursor:pointer;
  transition:background .3s, border-color .3s;
}
.chk input:checked{ background:var(--gold); border-color:var(--gold); }
.chk input:checked::after{
  content:''; position:absolute; left:4px; top:4px; width:8px; height:4px;
  border-left:2px solid #000; border-bottom:2px solid #000; transform:rotate(-45deg);
}
.chk span{ text-transform:none; letter-spacing:.01em; font-size:.85rem; font-weight:300; color:var(--mute); line-height:1.5; }
.hp{ position:absolute; left:-9999px; width:0; height:0; opacity:0; }

.f-note{ margin:0; text-align:center; font-size:.72rem; letter-spacing:.06em; color:var(--dim); }
.f-status{ margin:0; text-align:center; font-size:.88rem; }
.f-status.ok{ color:#5fbf7a; }
.f-status.bad{ color:#e0655b; }

/* ─────────────── contact ─────────────── */
.contact-grid{ display:grid; gap:4.5rem; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; }
.ct-list{ margin:3rem 0 0; display:grid; gap:1.8rem; }
.ct-list div{ display:grid; gap:.35rem; }
.ct-list dt{ font-size:.6rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.ct-list dd{ margin:0; font-size:.98rem; color:var(--mute); }
.ct-list a{ transition:color .4s var(--e); }
.ct-list a:hover{ color:var(--blue-lt); }
.map{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; background:var(--surface2); }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.82) brightness(.95); }

/* ─────────────── footer ─────────────── */
.ftr{ padding:5rem 0 2.5rem; border-top:1px solid var(--line); background:var(--carbon); }
.ftr-top{ display:grid; gap:3rem; grid-template-columns:1.2fr 1.4fr 1fr; align-items:start; }
.ftr-word{ font-size:1.05rem; }
.ftr-slogan{ margin:1rem 0 0; font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
.ftr-nav{ display:flex; flex-wrap:wrap; gap:1rem 2rem; }
.ftr-nav a{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); transition:color .4s var(--e); }
.ftr-nav a:hover{ color:var(--blue-lt); }
.ftr-ct{ display:grid; gap:.6rem; justify-items:end; }
.ftr-ct a{ font-size:.85rem; color:var(--mute); transition:color .4s var(--e); }
.ftr-ct a:hover{ color:var(--white); }

.ftr-btm{
  margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between;
}
.ftr-btm p{ margin:0; font-size:.72rem; color:var(--dim); }
.ftr-soc{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.ftr-soc a{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); transition:color .4s var(--e); }
.ftr-soc a:hover{ color:var(--gold); }

/* ─────────────── reveal ─────────────── */
.rise{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--e), transform 1s var(--e); }
.rise.in{ opacity:1; transform:none; }
.hero-h1 .rise{ transform:translateY(105%); transition:transform 1.1s var(--e), opacity 1.1s var(--e); }
.hero-h1 .rise.in{ transform:none; }

/* ─────────────── responsive ─────────────── */
@media (max-width:1080px){
  .mason{ grid-template-columns:repeat(2,1fr); }
  .tile-xl{ grid-column:span 2; grid-row:span 2; }
  .tile-lg{ grid-column:span 2; grid-row:span 2; }
  .ftr-top{ grid-template-columns:1fr 1fr; }
  .ftr-ct{ justify-items:start; }
}

@media (max-width:960px){
  .about-grid,.book-grid,.contact-grid{ grid-template-columns:1fr; gap:3rem; }
  .ab-visual{ aspect-ratio:16/10; }
  .sec{ padding:6rem 0; }
}

@media (max-width:860px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; margin:0; z-index:-1;
    flex-direction:column; justify-content:center; gap:1.9rem;
    background:rgba(5,5,5,.97); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
    opacity:0; visibility:hidden; transition:opacity .5s var(--e), visibility .5s;
  }
  .nav.open{ opacity:1; visibility:visible; z-index:5; }
  .nav a:not(.btn){ font-size:1.02rem; letter-spacing:.28em; }
  .nav-cta{ margin-top:1.2rem; }
  .hdr{ background:rgba(5,5,5,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  .hdr-tools{ z-index:10; }

  .hero-foot{ flex-direction:column; align-items:flex-start; gap:2.2rem; }
  .hero-meta{ gap:2.2rem; }
  .scroller{ display:none; }
  .ba{ aspect-ratio:4/3; min-height:0; }
  .form{ padding:2rem 1.5rem; }
  .f2{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .wrap,.hdr-in,.hero-in,.hero-foot{ width:min(100% - 2rem,var(--wrap)); }
  .hero-btns{ flex-direction:column; align-items:stretch; }
  .hero-btns .btn{ width:100%; }
  .hero-meta{ flex-wrap:wrap; gap:1.4rem 2.2rem; }
  .mason{ grid-template-columns:1fr; grid-auto-rows:190px; }
  .tile-xl,.tile-lg,.tile-md,.tile-sm{ grid-column:span 1; grid-row:span 1; }
  .svc{ padding:2.2rem 1.6rem 2.4rem; }
  .prot,.pr{ padding:2.2rem 1.6rem; }
  .tst-item{ padding:2.2rem 1.4rem; }
  .ftr-top{ grid-template-columns:1fr; }
}

/* ─────────────── reduced motion ─────────────── */
@media (prefers-reduced-motion:reduce){
  .rise,.hero-h1 .rise{ opacity:1; transform:none; transition:none; }
  .loader-sheen,.strip-track,.fog,.hero-h1 .gleam,.scroller i,.btn::after{ animation:none; }
  .tst-item{ transition:opacity .2s; }
  *{ scroll-behavior:auto !important; }
}