:root{
  --char:#111519; --char-2:#171c22; --char-3:#1f262e; --line:rgba(140,200,255,.14);
  --sky:#3ea6f2; --sky-2:#7cc8ff; --sky-deep:#0b4f80; --ice:#e8f4ff; --mute:#94a3b3;
  --hud:#9fe0ff; --rec:#ff4d4d;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --disp:'Space Grotesk','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--char);color:var(--ice);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:80px 80px;background-attachment:fixed;background-position:-1px -1px}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(17,21,25,.2),var(--char) 75%);pointer-events:none;z-index:-1}
img{display:block;max-width:100%}
a{color:var(--sky-2);text-decoration:none}
a:hover{color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* preview banner */
.preview-banner{background:repeating-linear-gradient(45deg,#f2c230 0 14px,#e0b020 14px 28px);color:#111;text-align:center;font:600 13px/1.2 var(--mono);letter-spacing:.06em;padding:8px 12px;position:relative;z-index:60}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(17,21,25,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;font:700 20px/1 var(--disp);letter-spacing:.02em}
.brand svg{width:34px;height:34px}
.brand small{display:block;font:500 10px/1 var(--mono);letter-spacing:.22em;color:var(--hud);margin-top:5px}
.nav{display:flex;gap:6px;align-items:center}
.nav a{color:var(--mute);font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:10px 12px;border:1px solid transparent;position:relative}
.nav a:hover,.nav a.on{color:#fff}
.nav a.on::before,.nav a.on::after{content:"";position:absolute;width:7px;height:7px;border-color:var(--sky);border-style:solid}
.nav a.on::before{left:0;top:0;border-width:1px 0 0 1px}
.nav a.on::after{right:0;bottom:0;border-width:0 1px 1px 0}
.nav a.cta{color:#06121d;background:var(--sky);border-color:var(--sky);margin-left:8px}
.nav a.cta:hover{background:var(--sky-2)}
.menu-toggle{display:none}
.menu-btn{display:none;cursor:pointer;width:40px;height:40px;border:1px solid var(--line);align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:#fff;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}

/* viewfinder frame */
.vf{position:relative;overflow:hidden}
.vf>img{width:100%;height:100%;object-fit:cover}
.vf .brk{position:absolute;inset:18px;pointer-events:none;z-index:2}
.vf .brk i{position:absolute;width:34px;height:34px;border:0 solid rgba(255,255,255,.85)}
.vf .brk i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}
.vf .brk i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}
.vf .brk i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px}
.vf .brk i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0}
.vf .xh{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);z-index:2;pointer-events:none;opacity:.75}
.vf .xh::before,.vf .xh::after{content:"";position:absolute;background:rgba(255,255,255,.9)}
.vf .xh::before{left:50%;top:0;bottom:0;width:1px}
.vf .xh::after{top:50%;left:0;right:0;height:1px}
.vf .thirds{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.vf:hover .thirds{opacity:1}
.vf>img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.vf:hover>img{transform:scale(1.035)}
.hud{position:absolute;z-index:3;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);display:flex;gap:14px;align-items:center}
.hud.tl{left:34px;top:32px}.hud.tr{right:34px;top:32px}.hud.bl{left:34px;bottom:32px}.hud.br{right:34px;bottom:32px}
.rec{display:inline-flex;align-items:center;gap:7px}
.rec::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rec);box-shadow:0 0 10px var(--rec);animation:blink 1.6s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

/* hero */
.hero{position:relative;height:calc(100vh - 68px - 31px);min-height:620px;max-height:980px}
.hero.vf>img{position:absolute;inset:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,14,18,.35) 0%,rgba(10,14,18,.05) 35%,rgba(10,14,18,.25) 60%,rgba(10,14,18,.92) 100%)}
.hero .brk{inset:28px}
.hero .brk i{width:56px;height:56px}
.hero-copy{position:absolute;z-index:4;left:0;right:0;bottom:84px}
.hero-copy .kicker{color:var(--hud);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.hero-copy .kicker::before{content:"";width:36px;height:1px;background:var(--hud)}
.hero h1{font:700 clamp(44px,7.2vw,104px)/.95 var(--disp);letter-spacing:-.035em;max-width:900px}
.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #fff}
.hero p.lead{max-width:560px;margin-top:22px;font-size:19px;color:#d6e4f0}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:17px 24px;border:1px solid var(--sky);color:#06121d;background:var(--sky);transition:all .2s}
.btn:hover{background:var(--sky-2);border-color:var(--sky-2);color:#06121d}
.btn.ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.5)}
.btn.ghost:hover{background:#fff;color:#06121d}
.btn .arr{font-family:var(--sans)}
.hero .scale{position:absolute;right:34px;top:50%;transform:translateY(-50%);z-index:3;height:220px;width:14px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.8) 0 1px,transparent 1px 11px);opacity:.7}
.hero .scale::after{content:"";position:absolute;right:-8px;top:50%;border:6px solid transparent;border-right-color:var(--hud)}
.hero .scale-l{left:34px;right:auto}
.hero .scale-l::after{left:-8px;right:auto;border-right-color:transparent;border-left-color:var(--hud)}

/* sections */
section{padding:110px 0;position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:48px;flex-wrap:wrap}
.eyebrow{color:var(--sky);display:flex;gap:10px;align-items:center;margin-bottom:14px}
.eyebrow b{color:var(--mute);font-weight:500}
h2{font:700 clamp(34px,4.4vw,58px)/1.02 var(--disp);letter-spacing:-.03em}
h3{font:600 24px/1.15 var(--disp);letter-spacing:-.01em}
.sec-head p{max-width:440px;color:var(--mute)}
.page-hero{padding:90px 0 60px;border-bottom:1px solid var(--line)}
.page-hero h1{font:700 clamp(44px,6.4vw,88px)/.98 var(--disp);letter-spacing:-.035em}
.page-hero p{max-width:620px;color:var(--mute);margin-top:18px;font-size:19px}

/* strip of quick services */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:rgba(17,21,25,.7)}
.strip a{padding:30px 26px;border-right:1px solid var(--line);color:var(--ice);transition:background .2s;position:relative}
.strip a:last-child{border-right:0}
.strip a:hover{background:var(--char-3)}
.strip .n{color:var(--sky);display:block;margin-bottom:26px}
.strip h3{font-size:20px;margin-bottom:6px}
.strip p{color:var(--mute);font-size:15px}
.strip a::after{content:"\2197";position:absolute;right:22px;top:24px;color:var(--mute);font-size:18px}

/* featured */
.feat{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}
.feat .vf{aspect-ratio:4/3}
.feat .stack{display:grid;grid-template-rows:1fr 1fr;gap:22px}
.feat .stack .vf{aspect-ratio:auto}
.cap{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:60px 30px 26px;background:linear-gradient(transparent,rgba(8,12,16,.85))}
.cap h3{margin-top:6px}
.cap .mono{color:var(--hud)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split .vf{aspect-ratio:1/1}
.checks{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.checks li{padding:16px 0 16px 34px;border-bottom:1px solid var(--line);position:relative;color:#cfdbe6}
.checks li::before{content:"";position:absolute;left:4px;top:23px;width:12px;height:12px;border:1px solid var(--sky)}
.checks li::after{content:"";position:absolute;left:9px;top:28px;width:2px;height:2px;background:var(--sky)}

/* cta band */
.band{position:relative;padding:0}
.band .vf{height:520px}
.band .vf::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,18,.92) 0%,rgba(10,14,18,.55) 55%,rgba(10,14,18,.15) 100%);z-index:1}
.band .inner{position:absolute;inset:0;z-index:4;display:flex;align-items:center}
.band h2{max-width:620px}
.band p{max-width:500px;color:#cfdbe6;margin-top:16px}

/* services cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:var(--char-2);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .25s,transform .25s}
.card:hover{border-color:rgba(62,166,242,.55);transform:translateY(-3px)}
.card .vf{aspect-ratio:16/10}
.card .body{padding:30px 30px 34px}
.card .num{color:var(--sky);margin-bottom:14px;display:block}
.card h3{font-size:28px;margin-bottom:10px}
.card p{color:var(--mute)}
.card ul{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.card li{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border:1px solid var(--line);color:#c8d6e3}
.ph-note{display:inline-block;margin-top:10px;font:500 11px/1.4 var(--mono);letter-spacing:.08em;color:#f2c230}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);margin-top:10px}
.step{padding:34px 30px;border-right:1px solid var(--line);background:rgba(17,21,25,.7)}
.step:last-child{border-right:0}
.step .mono{color:var(--sky)}
.step h3{margin:18px 0 8px}
.step p{color:var(--mute);font-size:15px}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:230px;gap:14px}
.gallery .vf{cursor:zoom-in;grid-column:span 2}
.gallery .vf.wide{grid-column:span 4;grid-row:span 2}
.gallery .vf.tall{grid-row:span 2}
.gallery .vf .brk{inset:12px}
.gallery .vf .brk i{width:20px;height:20px}
.gallery .vf .xh{width:28px;height:28px;opacity:0;transition:opacity .3s}
.gallery .vf:hover .xh{opacity:.8}
.gallery .hud.bl{left:22px;bottom:20px}
.lb{position:fixed;inset:0;z-index:100;background:rgba(6,9,12,.94);display:none;align-items:center;justify-content:center;padding:40px}
.lb.open{display:flex}
.lb img{max-height:86vh;max-width:92vw;border:1px solid var(--line)}
.lb .x{position:absolute;top:22px;right:26px;color:#fff;font:500 13px/1 var(--mono);letter-spacing:.14em;cursor:pointer;background:none;border:1px solid rgba(255,255,255,.4);padding:10px 14px}
.lb .lbcap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:var(--hud)}

/* placeholder box */
.placeholder{border:2px dashed #f2c230;background:rgba(242,194,48,.06);padding:34px;position:relative}
.placeholder .tag{position:absolute;top:-13px;left:24px;background:#f2c230;color:#111;font:700 11px/1 var(--mono);letter-spacing:.16em;padding:7px 10px}
.placeholder h3{margin-bottom:10px}
.placeholder p,.placeholder li{color:#d9d2b8}
.placeholder ul{margin:12px 0 0 20px}

/* form */
.form-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:50px;align-items:start}
form.inq{background:var(--char-2);border:1px solid var(--line);padding:36px;position:relative}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:8px}
.f.full{grid-column:1/-1}
.f label{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.f input,.f select,.f textarea{font:inherit;font-size:16px;color:var(--ice);background:var(--char);border:1px solid var(--line);padding:14px 14px;border-radius:0;outline:none}
.f textarea{min-height:140px;resize:vertical}
.f input:disabled,.f select:disabled,.f textarea:disabled{opacity:.6;cursor:not-allowed}
form.inq .btn[disabled]{opacity:.5;cursor:not-allowed;margin-top:24px}
.form-note{margin-bottom:24px;border-left:3px solid #f2c230;padding:12px 16px;background:rgba(242,194,48,.07);color:#e9dfb9;font-size:15px}
.side .vf{aspect-ratio:4/5;margin-bottom:24px}
.side .contact{border:1px solid var(--line);padding:24px;background:var(--char-2)}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:50px 0 40px;margin-top:40px;background:rgba(12,15,18,.9)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.site-foot .mono{color:var(--mute)}
.site-foot nav{display:flex;gap:20px;flex-wrap:wrap}
.site-foot nav a{color:var(--mute);font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.site-foot nav a:hover{color:#fff}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:980px){
  .strip{grid-template-columns:1fr 1fr}
  .strip a:nth-child(2){border-right:0}
  .strip a:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .feat,.split,.form-grid{grid-template-columns:1fr}
  .split{gap:40px}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line)}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .gallery .vf,.gallery .vf.tall{grid-column:span 1;grid-row:span 1}
  .gallery .vf.wide{grid-column:span 2;grid-row:span 1}
}
@media (max-width:820px){
  .menu-btn{display:flex}
  .nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--char);border-bottom:1px solid var(--line);display:none;padding:10px 20px 20px}
  .nav a{padding:16px 6px;border-bottom:1px solid var(--line)}
  .nav a.cta{margin:14px 0 0;text-align:center;justify-content:center}
  .menu-toggle:checked ~ .nav{display:flex}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  section{padding:76px 0}
  .hero{height:auto;min-height:640px}
  .hero-copy{bottom:56px}
  .hero .brk{inset:14px}.hero .brk i{width:32px;height:32px}
  .hud.tl{left:26px;top:26px}.hud.tr{right:26px;top:26px}
  .hud.br,.hero .scale{display:none}
  .hero p.lead{font-size:17px}
  .strip{grid-template-columns:1fr}
  .strip a{border-right:0;border-bottom:1px solid var(--line)}
  .fields{grid-template-columns:1fr}
  form.inq{padding:24px}
  .band .vf{height:560px}
  .band .vf::after{background:linear-gradient(180deg,rgba(10,14,18,.5),rgba(10,14,18,.92))}
  .gallery{grid-template-columns:1fr;grid-auto-rows:240px}
  .gallery .vf.wide{grid-column:span 1}
  .card .body{padding:24px}
  .brand small{display:none}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.rec::before{animation:none}.vf>img{transition:none}}
/* refinements */
.hero::after{background:linear-gradient(90deg,rgba(10,14,18,.78) 0%,rgba(10,14,18,.45) 45%,rgba(10,14,18,0) 75%),linear-gradient(180deg,rgba(10,14,18,.45) 0%,rgba(10,14,18,0) 30%,rgba(10,14,18,.2) 60%,rgba(10,14,18,.9) 100%)}
.hero h1 em{-webkit-text-stroke:2px #fff;text-shadow:none}
.hero .hud.tl{left:52px;top:46px}.hero .hud.tr{right:52px;top:46px}.hero .hud.br{right:52px;bottom:46px}
.hero .xh{opacity:.5}
.band .inner .wrap{width:100%}
.band .xh{display:none}
.vf .hud.tl{left:40px;top:38px}.vf .hud.tr{right:40px;top:38px}.vf .hud.bl{left:40px;bottom:38px}
@media (max-width:600px){.hero .hud.tl{left:30px;top:30px}.hero .hud.tr{right:30px;top:30px}}
@media (max-width:600px){.hero .xh{display:none}}
.gallery .vf.pano{grid-column:1/-1;grid-row:span 1}
@media (max-width:980px){.gallery .vf.pano{grid-column:1/-1}}
