/* Guardian Auto Body — dark automotive theme. Built by imdgfx. */
:root{
  --bg:#0B0B0B; --bg2:#050505; --panel:#121212; --panel2:#0e0e0e;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --white:#F2F2F2; --silver:#C8C8C8; --muted:#8f8f8f;
  --green:#A7E600; --green2:#8CCF00; --red:#E00000; --red2:#FF1A1A;
  --head:"Oswald","Arial Narrow",sans-serif; --body:"Inter",system-ui,sans-serif;
  --maxw:1240px; --ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--silver);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--head);color:var(--white);margin:0;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.06}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#0b0b0b;padding:10px 16px;z-index:200}
.skip:focus{left:0}
.eyebrow{display:inline-block;font-family:var(--head);color:var(--green);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.82rem;margin-bottom:10px}

/* Buttons — raised 3D keys: gradient face, solid side edge, bevel, press on click */
.btn{position:relative;display:inline-flex;align-items:center;gap:.5em;font-family:var(--head);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;padding:14px 26px;
  border:0;border-radius:8px;cursor:pointer;white-space:nowrap;isolation:isolate;
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),filter .2s var(--ease)}
.btn svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

.btn-red{color:#fff;background:linear-gradient(180deg,#ff3b3b 0%,#e00000 52%,#b00000 100%);
  box-shadow:0 5px 0 #7d0000, 0 8px 16px rgba(0,0,0,.55),
    inset 0 1.5px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(0,0,0,.32)}
.btn-red:hover{transform:translateY(-2px);filter:brightness(1.07);
  box-shadow:0 7px 0 #7d0000, 0 12px 22px rgba(0,0,0,.6),
    inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.30)}
.btn-red:active{transform:translateY(4px);
  box-shadow:0 1px 0 #7d0000, 0 3px 8px rgba(0,0,0,.5),
    inset 0 2px 5px rgba(0,0,0,.42)}
.btn-red.full{width:100%;justify-content:center;padding:15px}

.btn-green{color:#0c1400;background:linear-gradient(180deg,#c6f542 0%,#a7e600 52%,#7fb400 100%);
  box-shadow:0 5px 0 #587d00, 0 8px 16px rgba(0,0,0,.55),
    inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.26)}
.btn-green:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 7px 0 #587d00, 0 12px 22px rgba(0,0,0,.6),
    inset 0 1.5px 0 rgba(255,255,255,.58), inset 0 -2px 0 rgba(0,0,0,.24)}
.btn-green:active{transform:translateY(4px);
  box-shadow:0 1px 0 #587d00, 0 3px 8px rgba(0,0,0,.5),
    inset 0 2px 5px rgba(0,0,0,.36)}

/* header phone pill gets the same treatment */
.phone{box-shadow:0 4px 0 #4c6d00, 0 7px 14px rgba(0,0,0,.5);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .2s,color .2s}
.phone:active{transform:translateY(3px);box-shadow:0 1px 0 #4c6d00, 0 3px 7px rgba(0,0,0,.45)}

@media (prefers-reduced-motion:reduce){
  .btn,.phone{transition:none}
  .btn:hover,.btn:active,.phone:active{transform:none}
}

/* Header — solid black bar (logo lives in the banner artwork) */
.hdr{position:sticky;top:0;z-index:100;background:#050505;border-bottom:1px solid rgba(167,230,0,.22)}
.hdr-in{display:flex;align-items:center;gap:24px;min-height:70px;position:relative}
main section[id]{scroll-margin-top:78px}
.nav{display:flex;gap:clamp(18px,2.6vw,38px);margin-inline-start:auto;align-items:center}
.nav a{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(.86rem,1vw,.98rem);color:#F2F2F2;padding:8px 0;position:relative;transition:color .2s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2.5px;background:var(--green);transition:width .25s}
.nav a:hover{color:var(--green)}
.nav a.active{color:var(--green)}
.nav a.active::after,.nav a:hover::after{width:100%}
.phone{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--green);color:var(--green);
  font-family:var(--head);font-weight:600;font-size:clamp(.9rem,1.05vw,1.05rem);letter-spacing:.03em;
  padding:11px 22px;border-radius:6px;transition:.2s;flex:none}
.phone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.phone:hover{background:var(--green);color:#0b0b0b;transform:translateY(-2px);
  box-shadow:0 6px 0 #4c6d00, 0 10px 18px rgba(0,0,0,.55)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2.5px;background:var(--white);transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn:hover{transform:none}}

/* Hero — full garage image visible */
.hero{position:relative;background:#0b0b0b}
/* Banner band — matches reference proportions (wide, not tall) */
.hero-stage{position:relative;width:100%;overflow:hidden;
  height:clamp(400px,44.4vw,666px);max-height:calc(100vh - 74px)}
.garage{width:100%;height:100%;object-fit:cover;object-position:center 70%;display:block}
/* Crest sits directly ABOVE the headline, same left edge, with clean clearance */
.crest{display:block;line-height:0;margin-bottom:clamp(6px,.9vw,14px)}
.crest img{height:clamp(143px,16.7vw,254px);width:auto;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.92)) drop-shadow(0 0 14px rgba(0,0,0,.65))}
.car-stage{position:absolute;inset:0;z-index:3;pointer-events:none}
/* green underglow pool on the floor, under the car */
.floor-glow{position:absolute;left:65%;bottom:2%;transform:translateX(-50%);width:44%;height:11%;
  background:radial-gradient(ellipse at center,rgba(167,230,0,.30),rgba(167,230,0,.06) 55%,transparent 72%);
  filter:blur(18px);animation:floorpulse 3.4s ease-in-out infinite}
@keyframes floorpulse{0%,100%{opacity:.45;transform:translateX(-50%) scaleX(.96)}50%{opacity:1;transform:translateX(-50%) scaleX(1.05)}}

/* ============================================================
   CINEMATIC CAR LIGHTING SYSTEM
   Layers behind the car: floor pool, headlight beam, headlight bloom.
   Layers on top, masked to the car silhouette: light sweep, edge light, rim.
   Per-car light positions come from inline --hlx/--hly/--wx/--wy/--wr vars.
   ============================================================ */
.car-slot{position:absolute;left:30%;right:0;bottom:-7%;height:60%;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),visibility 0s linear .5s}
.car-slot.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
/* outgoing car drifts left as it fades */
.car-slot.out{animation:carOut .7s var(--ease) both}
@keyframes carOut{to{opacity:0;transform:translateX(-26px) scale(.985)}}

.car-wrap{position:relative;height:100%;aspect-ratio:1000/524;margin:0 auto;max-width:100%}
.car-img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)) brightness(.94)}
/* ENTRY: slide in from the right, fade + settle. No bounce. */
.car-slot.on .car-wrap{animation:carIn 6s linear both}
@keyframes carIn{
  0%{opacity:0;transform:translateX(46px) scale(.965);
     animation-timing-function:cubic-bezier(.16,.84,.44,1)}
  16%{opacity:1;transform:translateX(0) scale(1);
     animation-timing-function:linear}
  100%{opacity:1;transform:translateX(var(--drift,-19%)) scale(1)}}

/* --- the masked FX box tracks the car image exactly --- */
.fx-sweep,.fx-edge,.fx-rim,.fx-outline{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fx-sweep,.fx-edge,.fx-rim{-webkit-mask-image:var(--car);mask-image:var(--car)}

/* LINE LIGHT that travels around the car's outline (edge PNG used as the mask,
   a rotating conic highlight inside supplies the travelling segment) */
.fx-outline{-webkit-mask-image:var(--edge);mask-image:var(--edge);overflow:hidden;opacity:0;z-index:4}
.fx-outline i{position:absolute;inset:-60%;display:block;
  background:conic-gradient(from 0deg,
     transparent 0deg, rgba(255,255,255,.10) 26deg, rgba(255,255,255,.30) 42deg,
     rgba(255,255,255,.10) 58deg, transparent 92deg, transparent 360deg)}
.car-slot.on .fx-outline{animation:outlineOn 1s var(--ease) .45s forwards}
.car-slot.on .fx-outline i{animation:outlineSpin 26s linear .5s infinite}
@keyframes outlineOn{to{opacity:.5}}
@keyframes outlineSpin{to{transform:rotate(360deg)}}

/* 3+4. studio softbox travelling front -> rear, clipped to the paint */
.fx-sweep{background:linear-gradient(100deg,transparent 33%,
    rgba(255,255,255,.07) 41%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.07) 59%,transparent 70%);
  background-size:250% 100%;background-repeat:no-repeat;filter:blur(5px);
  mix-blend-mode:screen;opacity:0;z-index:3}
.car-slot.on .fx-sweep{animation:sweepFX 6s cubic-bezier(.45,0,.3,1) .9s infinite}
@keyframes sweepFX{
  0%{background-position:150% 0;opacity:0}
  6%{opacity:.85}
  46%{background-position:-60% 0;opacity:.85}
  54%{background-position:-60% 0;opacity:0}
  100%{background-position:-60% 0;opacity:0}}

/* 6. restrained brand edge light: green along the top, red along the lower aero */
.fx-edge{opacity:0;mix-blend-mode:screen;z-index:2}
.fx-edge-g{background:linear-gradient(180deg,rgba(167,230,0,.26) 0%,rgba(167,230,0,.06) 22%,transparent 44%)}
.fx-edge-r{background:linear-gradient(0deg,rgba(255,40,40,.24) 0%,rgba(224,0,0,.05) 20%,transparent 40%)}
.car-slot.on .fx-edge{animation:edgeIn 1.4s var(--ease) .55s both}
@keyframes edgeIn{from{opacity:0}to{opacity:.5}}

/* 5. front rim briefly catches a studio light */
.fx-rim{background:
   radial-gradient(circle at var(--wx) var(--wy),
     rgba(255,255,255,.30) 0,rgba(255,255,255,.09) calc(var(--wr) * .55),transparent calc(var(--wr) * 1.05));
  opacity:0;mix-blend-mode:screen;filter:blur(3px)}
.car-slot.on .fx-rim{animation:rimFX 1.5s var(--ease) .85s both}
@keyframes rimFX{0%{opacity:0;transform:translateX(-50%) scale(.9)}
  35%{opacity:.85}70%{opacity:.35}100%{opacity:0;transform:translateX(-50%) scale(1.04)}}

/* 2+7. headlight bloom, then a forward LED beam that expands and settles */
.fx-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 2.6% 1.8% at var(--h1x) var(--h1y),
      rgba(255,255,255,.85) 0,rgba(226,241,255,.44) 42%,rgba(198,225,255,.11) 70%,transparent 84%),
    radial-gradient(ellipse 2.6% 1.8% at var(--h2x) var(--h2y),
      rgba(255,255,255,.85) 0,rgba(226,241,255,.44) 42%,rgba(198,225,255,.11) 70%,transparent 84%);
  filter:blur(5px);mix-blend-mode:screen;opacity:0;z-index:2}
.car-slot.on .fx-glow{animation:hlOn 1.5s var(--ease) .3s both, highBeam 6s ease-in-out .6s infinite}
@keyframes hlOn{0%{opacity:0}40%{opacity:.9}62%{opacity:.55}100%{opacity:.62}}
@keyframes highBeam{0%,58%,100%{opacity:.62}63%{opacity:1}68%{opacity:.62}73%{opacity:.96}79%{opacity:.62}}

.fx-beam{position:absolute;width:34%;height:15%;transform:translateY(-50%) perspective(340px) rotateY(16deg) scaleX(.4);
  transform-origin:right center;pointer-events:none;opacity:0;z-index:1;
  background:linear-gradient(270deg,
      rgba(232,244,255,.34) 0%,rgba(214,235,255,.16) 26%,rgba(198,226,255,.06) 55%,transparent 86%);
  filter:blur(15px);mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 100% 62% at 100% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 100% 62% at 100% 50%,#000 30%,transparent 78%)}
.fx-beam.b1{top:var(--h1y);left:calc(var(--h1x) - 32%)}
.fx-beam.b2{top:var(--h2y);left:calc(var(--h2x) - 32%)}
.car-slot.on .fx-beam{animation:beamOn 2.4s cubic-bezier(.22,.7,.3,1) .55s both}
.car-slot.on .fx-beam.b2{animation-delay:.7s}
@keyframes beamOn{0%{opacity:0;transform:translateY(-50%) perspective(340px) rotateY(16deg) scaleX(.4)}
  38%{opacity:.95;transform:translateY(-50%) perspective(340px) rotateY(16deg) scaleX(1.06)}
  100%{opacity:.6;transform:translateY(-50%) perspective(340px) rotateY(16deg) scaleX(1)}}

/* 8. headlights spill a small pool on the floor only — walls stay dark */
.fx-pool{position:absolute;left:calc(var(--h1x) - 14%);bottom:4%;width:52%;height:15%;
  pointer-events:none;opacity:0;z-index:0;
  background:radial-gradient(ellipse at 62% 50%,rgba(206,228,255,.18),rgba(188,212,255,.05) 48%,transparent 78%);
  filter:blur(16px);mix-blend-mode:screen}
.car-slot.on .fx-pool{animation:poolOn 1.8s var(--ease) .6s both}
@keyframes poolOn{from{opacity:0}to{opacity:.6}}

/* exhaust plume: puffs leave the tailpipe, rise, expand and dissipate */
.fx-smoke{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0}
.fx-smoke i{position:absolute;left:var(--exx);top:var(--exy);
  width:7%;height:12%;border-radius:50%;transform-origin:50% 100%;
  background:radial-gradient(circle at 50% 58%,
     rgba(226,230,236,.40),rgba(196,203,213,.17) 46%,rgba(170,178,190,.05) 68%,transparent 78%);
  filter:blur(7px);opacity:0;
  animation:puff var(--dur,5.6s) cubic-bezier(.32,.12,.55,1) var(--pd,0s) infinite}
/* each puff rises on its own path/speed so the plume looks turbulent */
.fx-smoke i:nth-child(1){--dx:-2%;--dur:3.6s;--pd:.9s}
.fx-smoke i:nth-child(2){--dx:9%;--dur:4.2s;--pd:1.7s}
.fx-smoke i:nth-child(3){--dx:-8%;--dur:3.9s;--pd:2.5s}
.fx-smoke i:nth-child(4){--dx:14%;--dur:4.5s;--pd:3.3s}
.fx-smoke i:nth-child(5){--dx:3%;--dur:4.0s;--pd:4.1s}
.car-slot.on .fx-smoke{animation:smokeIn 1.1s var(--ease) .7s forwards}
@keyframes smokeIn{to{opacity:1}}
@keyframes puff{
  0%{opacity:0;transform:translate(-50%,0) scale(.14)}
  10%{opacity:.55}
  45%{opacity:.30;transform:translate(calc(var(--dx) * .45),-40%) scale(.85)}
  100%{opacity:0;transform:translate(var(--dx),-108%) scale(1.7)}}

/* every car travels its own distance in the same 8s slide = its own speed */
.car-slot:nth-child(2){--drift:-16%}
.car-slot:nth-child(3){--drift:-23%}
.car-slot:nth-child(4){--drift:-13%}
.car-slot:nth-child(5){--drift:-26%}
.car-slot:nth-child(6){--drift:-19%}

/* every car lights on its own rhythm / spin direction */
.car-slot:nth-child(2) .fx-outline i{animation-duration:26s}
.car-slot:nth-child(3) .fx-outline i{animation-duration:34s;animation-direction:reverse}
.car-slot:nth-child(4) .fx-outline i{animation-duration:20s}
.car-slot:nth-child(5) .fx-outline i{animation-duration:38s;animation-direction:reverse}
.car-slot:nth-child(6) .fx-outline i{animation-duration:29s;animation-direction:reverse}
.car-slot:nth-child(2) .fx-glow{animation-delay:.3s,.5s}
.car-slot:nth-child(3) .fx-glow{animation-delay:.3s,1.1s}
.car-slot:nth-child(4) .fx-glow{animation-delay:.3s,.2s}
.car-slot:nth-child(5) .fx-glow{animation-delay:.3s,1.4s}
.car-slot:nth-child(6) .fx-glow{animation-delay:.3s,.8s}
.car-slot:nth-child(2) .fx-sweep{animation-delay:.9s}
.car-slot:nth-child(3) .fx-sweep{animation-delay:1.4s}
.car-slot:nth-child(4) .fx-sweep{animation-delay:.7s}
.car-slot:nth-child(5) .fx-sweep{animation-delay:1.6s}
.car-slot:nth-child(6) .fx-sweep{animation-delay:1.1s}
.car-slot:nth-child(3) .fx-smoke i{animation-duration:calc(var(--dur) * 1.15)}
.car-slot:nth-child(4) .fx-smoke i{animation-duration:calc(var(--dur) * .88)}
.car-slot:nth-child(5) .fx-smoke i{animation-duration:calc(var(--dur) * 1.08)}
.car-slot:nth-child(6) .fx-smoke i{animation-duration:calc(var(--dur) * .96)}

/* 11. premium numbered carousel controls */
.car-nav{position:absolute;right:3%;bottom:4%;z-index:6;display:flex;align-items:center;gap:12px}
.cdot,.cnav{background:none;border:0;padding:2px 0;cursor:pointer;font-family:var(--head);
  letter-spacing:.09em;font-size:.76rem;color:#9aa3ab;transition:color .22s}
.cdot{position:relative}
.cdot::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:center;transition:transform .28s var(--ease)}
.cdot:hover,.cnav:hover{color:#e8edf2}
.cdot.on{color:var(--green)}
.cdot.on::after{transform:scaleX(1)}
.cnav{color:#79828a;font-size:.7rem}

@media (prefers-reduced-motion:reduce){
  .car-slot.on .car-wrap,.car-slot.on .fx-sweep,.car-slot.on .fx-rim,
  .car-slot.on .fx-beam,.car-slot.on .fx-glow,.car-slot.on .fx-pool,
  .car-slot.on .fx-edge,.car-slot.out{animation:none}
  .fx-sweep,.fx-rim,.fx-beam,.fx-outline,.fx-smoke{display:none}
  .fx-glow{opacity:.7}.fx-pool{opacity:.7}.fx-edge{opacity:.4}
}
@media (prefers-reduced-motion:reduce){ .floor-glow{animation:none} }
@media (max-width:760px){
  .hero-stage{height:clamp(256px,64vw,377px)}
  .crest img{height:clamp(95px,26vw,162px)}
  .crest{margin-bottom:-8px}
  .car-slot{left:0;right:0;bottom:-4%;height:56%}
  .car-nav{right:50%;transform:translateX(50%);bottom:5%;gap:9px}
  .cnav{display:none}
  .floor-glow{left:50%;bottom:9%;width:66%}
  .car-dots{right:50%;transform:translateX(50%);bottom:5%}
}
.hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,5,5,.72) 0%,rgba(5,5,5,.22) 20%,transparent 42%),
             linear-gradient(90deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.45) 26%,rgba(5,5,5,.08) 48%,transparent 60%)}
.hero-in{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;
  background:linear-gradient(90deg,rgba(5,5,5,.72) 0%,rgba(5,5,5,.46) 26%,rgba(5,5,5,.12) 44%,transparent 56%)}
.hero-in .wrap{width:100%;padding-bottom:clamp(18px,2.6vw,40px)}
.hero-text{max-width:min(600px,50%)}
.hero h1{font-size:clamp(1.25rem,2.83vw,2.48rem);letter-spacing:.005em;margin-bottom:clamp(5px,.65vw,10px);
  text-shadow:0 2px 24px rgba(0,0,0,.9)}
.hero h1 .w{color:var(--white)}
.hero h1 .g{color:var(--green)}
.hero-sub{font-size:clamp(.85rem,1.21vw,1.05rem);color:var(--silver);max-width:28em;
  margin-bottom:clamp(10px,1.5vw,22px);text-shadow:0 2px 14px rgba(0,0,0,.8)}
.hero .btn-red{padding:clamp(9px,1.14vw,15px) clamp(16px,2vw,27px);font-size:clamp(.76rem,1.03vw,.98rem)}
@media (max-width:760px){
  .hero-in{position:relative;background:#0b0b0b;padding:20px 0 4px}
  .hero-in .wrap{padding:0 18px}
  .hero-shade{background:linear-gradient(0deg,rgba(5,5,5,.8),transparent 45%)}
  .hero h1{font-size:clamp(1.7rem,6.6vw,2.2rem)}
  .hero-sub{margin-bottom:18px}
}

/* Services strip */
.strip{background:linear-gradient(#0a0a0a,#0d0d0d);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.svc{display:flex;gap:14px;align-items:flex-start;padding:30px 26px;border-inline-start:1px solid var(--line)}
.svc:first-child{border-inline-start:0}
.svc-ic{color:var(--green);flex:none}
.svc-ic svg{width:42px;height:42px}
.svc h3{color:var(--white);font-size:1.02rem;font-weight:600;letter-spacing:.04em;margin-bottom:6px}
.svc p{color:var(--muted);font-size:.9rem;line-height:1.5}

/* Trust + estimate */
.te{background:var(--bg);padding:64px 0}
.te-grid{display:grid;grid-template-columns:1fr 1.15fr .85fr;gap:40px;align-items:start}
.accent{display:block;width:46px;height:4px;background:var(--green);margin-bottom:20px}
.te-trust h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:16px}
.te-trust p{color:var(--silver);margin-bottom:24px;max-width:26em}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.badges li{display:flex;align-items:center;gap:10px;font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;
  color:var(--silver);font-size:.86rem}
.b-ic{width:34px;height:34px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;color:var(--green);flex:none}
.b-ic svg{width:17px;height:17px}
.te-form{background:var(--panel);border:1px solid var(--line);padding:28px;border-radius:6px}
.g-h{color:var(--green);font-size:1.4rem;margin-bottom:18px}
.form{display:flex;flex-direction:column;gap:14px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form input{font-family:var(--body);font-size:.98rem;color:var(--white);background:#0c0c0c;border:1px solid var(--line2);
  padding:13px 15px;border-radius:4px;width:100%;transition:border-color .2s}
.form input::placeholder{color:#8a8a8a}
.form input:focus{outline:none;border-color:var(--green)}
.alert{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:4px;font-weight:600;margin-bottom:6px}
.alert svg{width:22px;height:22px;flex:none}
.alert.ok{background:rgba(167,230,0,.12);color:var(--green);border:1px solid rgba(167,230,0,.4)}
.alert.err{background:rgba(224,0,0,.12);color:#ff6b6b;border:1px solid rgba(224,0,0,.4)}
.te-img img{width:100%;height:100%;min-height:230px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}

/* Section head */
.sec-head{text-align:center;margin-bottom:34px}
.sec-head .eyebrow::after{content:none}
.sec-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}

/* Gallery */
.gal{padding:70px 0;background:var(--bg2)}
.gal-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.gal-filters button{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;
  background:transparent;border:1px solid var(--line2);color:var(--silver);padding:9px 18px;border-radius:4px;cursor:pointer;transition:.2s}
.gal-filters button:hover{border-color:var(--green);color:var(--green)}
.gal-filters button.active{background:var(--green);border-color:var(--green);color:#0b0b0b}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gitem{position:relative;margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;aspect-ratio:4/3;background:var(--panel);cursor:pointer}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.gitem:hover img{transform:scale(1.04)}
.gitem figcaption{position:absolute;left:0;bottom:0;width:100%;padding:12px 14px;font-family:var(--head);text-transform:uppercase;
  letter-spacing:.05em;color:var(--white);font-size:.9rem;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.gitem.ph{cursor:default;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#161616,#0b0b0b)}
.gitem.ph span{color:#3a3a3a}
.gitem.ph span svg{width:56px;height:56px}
.gitem.ph figcaption{background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);color:var(--muted)}
.gal-note{text-align:center;color:var(--muted);margin-top:22px;font-size:.9rem}

/* About */
.about{padding:70px 0;background:var(--bg)}
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
.about-media img{width:100%;border-radius:6px;border:1px solid var(--line);object-fit:cover;aspect-ratio:5/4}
.about-text h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:16px}
.about-text p{color:var(--silver);margin-bottom:22px}
.why{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:26px}
.why li{position:relative;padding-inline-start:26px;color:var(--silver);font-size:.96rem}
.why li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid var(--green);
  border-bottom:2px solid var(--green);transform:rotate(-45deg)}

/* Reviews */
.rev{padding:70px 0;background:var(--bg2)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:26px}
.stars{color:var(--green);letter-spacing:3px;font-size:1.1rem;margin-bottom:12px}
.rcard p{color:var(--silver);font-style:italic;margin-bottom:14px}
.rname{font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-size:.85rem}

/* Contact */
.contact{padding:70px 0;background:var(--bg)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.contact-info h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:22px}
.clist{display:flex;flex-direction:column;gap:16px;margin-bottom:26px}
.clist li{display:flex;align-items:center;gap:14px;color:var(--silver)}
.clist a:hover{color:var(--green)}
.c-ic{width:40px;height:40px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;color:var(--green);flex:none}
.c-ic svg{width:19px;height:19px}
.contact-map .map-ph{height:100%;min-height:280px;border:1px solid var(--line);border-radius:6px;
  background:repeating-linear-gradient(45deg,#0e0e0e,#0e0e0e 12px,#0c0c0c 12px,#0c0c0c 24px);
  display:grid;place-items:center;color:#555;gap:8px;grid-auto-flow:row;text-align:center}
.map-ph svg{width:40px;height:40px}
.map-ph span{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}

/* Footer */
.ftr{background:var(--bg2);border-top:1px solid var(--line);padding:52px 0 24px}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:34px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.ftr-brand img{height:78px;width:auto;margin-bottom:14px}
.ftr-brand p{color:var(--muted);max-width:24em;margin-bottom:16px;font-size:.92rem}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;color:var(--silver);transition:.2s}
.socials a:hover{border-color:var(--green);color:var(--green)}
.socials svg{width:18px;height:18px}
.ftr-col h4{color:var(--white);font-size:1rem;letter-spacing:.06em;margin-bottom:14px}
.ftr-col li{margin-bottom:9px}
.ftr-col a:hover,.ftr-contact a:hover{color:var(--green)}
.ftr-col li,.ftr-contact li{color:var(--muted);font-size:.92rem}
.ftr-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:20px;color:var(--muted);font-size:.85rem}
.ftr-legal{display:flex;gap:18px}
.ftr-legal a:hover{color:var(--green)}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:24px}
.lb img{max-width:92vw;max-height:88vh;border-radius:6px;border:1px solid var(--line2)}
.lb-x{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer}

/* Responsive */
@media (max-width:1024px){
  .strip-grid{grid-template-columns:repeat(3,1fr)}
  .svc:nth-child(4){border-inline-start:0}
  .te-grid{grid-template-columns:1fr 1fr}
  .te-img{grid-column:1/-1;order:3}
  .te-img img{min-height:200px;max-height:280px}
}
@media (max-width:860px){
  .nav{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(80vw,320px);background:#0b0b0b;flex-direction:column;
    align-items:flex-start;gap:6px;padding:92px 30px 30px;box-shadow:-10px 0 40px rgba(0,0,0,.6);transform:translateX(110%);
    transition:transform .3s var(--ease);z-index:95}
  .nav.open{transform:translateX(0)}
  .nav a{font-size:1.1rem;width:100%;padding:12px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .burger{display:flex}
  .phone span{display:none}
  .phone{padding:10px 12px}
  .hdr-in{min-height:66px;gap:12px}
  .hero-text{max-width:100%}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:28px}
  .about-media{max-width:520px}
  .rev-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .hero{min-height:70vh}
  .te,.gal,.about,.rev,.contact{padding:48px 0}
  .strip-grid{grid-template-columns:1fr 1fr}
  .svc{border-inline-start:0!important;border-top:1px solid var(--line);padding:24px 18px}
  .svc:first-child,.svc:nth-child(2){border-top:0}
  .te-grid{grid-template-columns:1fr}
  .badges{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-bot{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){ .gal-grid{grid-template-columns:1fr} .form .row{grid-template-columns:1fr} .ftr-grid{grid-template-columns:1fr} }