/* =====================================================================
   FORTIFIED ROOFING AND CONSTRUCTION - v4 "SECTION"
   Design system. Light ground, navy structure, logo-derived blue/cyan.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}

:root{
  /* ground */
  --nv-950:#030812; --nv-900:#050F1C; --nv-800:#08192B; --nv-700:#0E2438; --nv-600:#16354F;
  /* brand, sampled from the logo - refined premium palette */
  --bl:#0066FF; --bl2:#0088FF; --cy:#00D4E6; --cy2:#00E6CC;
  --grad:linear-gradient(135deg,#0066FF 0%,#0088FF 35%,#00D4E6 100%);
  --grad-v:linear-gradient(180deg,#0066FF 0%,#00D4E6 100%);
  --grad-subtle:linear-gradient(135deg,rgba(0,102,255,.08) 0%,rgba(0,212,230,.08) 100%);
  /* steel, echoes the chrome hammer + roofline in the mark */
  --st-50:#FAFBFC; --st-100:#F0F3F7; --st-200:#DDE3EB; --st-300:#B8C4D4; --st-500:#8A99AD;
  --paper:#FFFFFF; --paper2:#FAFBFC;
  --tx:#050F1C; --tx2:#3A4A5C; --tx3:#6B7B8D;
  --line:#E8EDF2; --line2:#D0D9E3; --lineD:rgba(255,255,255,.15); --lineD2:rgba(255,255,255,.30);
  --shadow-sm:0 1px 2px rgba(5,15,28,.04),0 1px 4px rgba(5,15,28,.06);
  --shadow-md:0 4px 12px rgba(5,15,28,.08),0 2px 6px rgba(5,15,28,.06);
  --shadow-lg:0 16px 48px rgba(5,15,28,.12),0 8px 24px rgba(5,15,28,.08);
  --shadow-xl:0 32px 96px rgba(5,15,28,.16),0 16px 48px rgba(5,15,28,.10);

  --display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  --max:1280px; --maxw:1560px; --gut:clamp(24px,5vw,80px);
  --hdr:80px;
  --r:12px;
  --r-sm:8px;
  --r-lg:20px;
  --e:cubic-bezier(.16,1,.3,1);
  --e2:cubic-bezier(.2,.8,.2,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --duration-fast:150ms;
  --duration-base:250ms;
  --duration-slow:400ms;
}

body{
  font-family:var(--ui);
  font-size:clamp(16px,1.2vw,18px); line-height:1.7; color:var(--tx);
  background:var(--paper);
  font-feature-settings:'cv02','cv03','cv04','cv11','ss01','lnum','tnum';
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- type scale ---------- */
.d1,.d2,.d3{font-family:var(--display);font-weight:700;color:var(--tx);letter-spacing:-.02em}
.d1{font-size:clamp(38px,6vw,84px);line-height:.92;letter-spacing:-.03em}
.d2{font-size:clamp(36px,6vw,84px);line-height:.96;letter-spacing:-.025em}
.d3{font-size:clamp(26px,3.5vw,48px);line-height:1.05;letter-spacing:-.02em}
.d4{font-family:var(--ui);font-weight:600;font-size:clamp(18px,1.5vw,22px);line-height:1.35;letter-spacing:-.005em}
.lead{font-size:clamp(19px,1.8vw,24px);line-height:1.6;color:var(--tx2);font-weight:400}
.body{color:var(--tx2);font-size:1rem;line-height:1.7}
.sm{font-size:clamp(14px,1vw,16px);line-height:1.6;color:var(--tx2)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.anno{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx3)}
.nv .d1,.nv .d2,.nv .d3,.nv .d4{color:#fff}
.nv .lead,.nv .body{color:rgba(255,255,255,.85)}
.nv .mono,.nv .anno{color:var(--cy)}
.gr{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap-w{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.pad{padding:clamp(62px,7.8vw,130px) 0}
.pad-s{padding:clamp(44px,5vw,80px) 0}
.nv{background:var(--nv-900);color:#fff}
.paper2{background:var(--paper2)}
.rel{position:relative}

/* section head: index + title + rule */
.shead{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,48px);align-items:start;margin-bottom:clamp(34px,4vw,64px)}
.shead .ix{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--bl);padding-top:.55em;white-space:nowrap}
.nv .shead .ix{color:var(--cy)}
.shead .tt{max-width:22ch}
.shead .rt{margin-top:14px;max-width:46ch}
.rule{height:1px;background:var(--line);border:0;margin:0}
.nv .rule{background:var(--lineD)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  border:2px solid var(--nv-900);color:var(--nv-900);background:transparent;border-radius:var(--r);
  transition:color var(--duration-base) var(--e2),background-color var(--duration-base) var(--e2),
  border-color var(--duration-base) var(--e2),box-shadow var(--duration-base) var(--e2),
  transform var(--duration-fast) var(--e2),filter var(--duration-base) var(--e2);
  overflow:hidden;z-index:1}
.btn::before{content:'';position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:right;
  transition:transform var(--duration-base) var(--e2);z-index:-1}
.btn span{position:relative;display:inline-flex;align-items:center;gap:10px}
.btn:hover{color:#fff;border-color:transparent;box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform var(--duration-fast) var(--e2)}
.btn:hover svg{transform:translateX(4px)}
.btn.pri{border-color:transparent;color:#fff;background:var(--grad)}
.btn.pri::before{display:none}
.btn.pri:hover{color:#fff;background:linear-gradient(135deg,#0052CC 0%,#0077CC 35%,#00BCCC 100%);
  box-shadow:0 16px 48px rgba(0,102,255,.35),0 8px 24px rgba(0,102,255,.25)}
.btn.out{border-color:rgba(255,255,255,.6);color:#fff}
.btn.out::before{background:linear-gradient(135deg,#fff 0%,#f0f3f7 100%)}
.btn.out:hover{color:var(--nv-900);border-color:transparent;background:#fff;box-shadow:var(--shadow-xl)}
.btn.sm{padding:12px 24px;font-size:10px;gap:8px}
.btn.lg{padding:20px 40px;font-size:12px;gap:12px}
.btn.center{margin:0 auto;display:flex}
.btn-group{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.lnk{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--bl);position:relative;padding:8px 0}
.lnk::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--grad);
  transform:scaleX(0);transform-origin:right;transition:transform var(--duration-base) var(--e2)}
.lnk:hover::after{transform:scaleX(1);transform-origin:left}
.lnk svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform var(--duration-fast) var(--e2)}
.lnk:hover svg{transform:translateX(5px)}
.nv .lnk{color:#fff}
.nv .lnk::after{background:#fff}
.nv .lnk:hover{color:var(--cy)}

/* =====================================================================
   PRELOADER / PROGRESS / CURSOR
   ===================================================================== */
#pre{position:fixed;inset:0;z-index:9000;background:
  radial-gradient(ellipse at 50% 40%,rgba(0,102,255,.08) 0%,transparent 55%),
  var(--nv-950);display:grid;place-items:center;
  opacity:1;transition:opacity .9s var(--e2),visibility .9s}
#pre.done{opacity:0;visibility:hidden}
.pl-in{width:min(360px,72vw);text-align:center}
.pl-mk{width:150px;margin:0 auto 30px;opacity:0;transform:translateY(14px) scale(.96);
  animation:plIn 1.1s var(--e2) .1s forwards;filter:drop-shadow(0 12px 32px rgba(0,102,255,.25))}
@keyframes plIn{to{opacity:1;transform:none}}
.pl-bar{height:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden;border-radius:2px}
.pl-bar i{position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .08s linear}
.pl-n{margin-top:14px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#5C748A}
#prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:var(--grad);z-index:8000}

/* =====================================================================
   HEADER
   ===================================================================== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:7000;transition:transform .55s var(--e),background .45s var(--e)}
.hdr.up{transform:translateY(-100%)}
.tick{background:var(--nv-950);border-bottom:1px solid rgba(255,255,255,.07);overflow:hidden}
.tick .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:34px;display:flex;
  align-items:center;justify-content:space-between;gap:20px}
.tick span{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:#B7C8D6;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.tick .live i{width:5px;height:5px;border-radius:50%;background:#fff;display:inline-block;
  animation:pulse 2.1s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(255,255,255,0)}}
.tick a{color:#B7C8D6;transition:color .3s}
.tick a:hover{color:#fff}

.nav{background:rgba(8,25,43,.80);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.10)}
.hdr.scr .nav{background:rgba(8,25,43,.86);backdrop-filter:blur(10px) saturate(1.5);
  -webkit-backdrop-filter:blur(10px) saturate(1.5)}
.nav .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:var(--hdr);display:flex;
  align-items:center;gap:clamp(16px,2.4vw,40px)}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:38px;width:auto}
.nav .lk{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);margin-left:auto}
.nav .lk a{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:#B7C8D6;position:relative;padding:6px 0;transition:color .3s}
.nav .lk a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e)}
.nav .lk a:hover,.nav .lk a.on{color:#fff}
.nav .lk a:hover::after,.nav .lk a.on::after{transform:scaleX(1);transform-origin:left}
.nav .vr{width:1px;height:26px;background:rgba(255,255,255,.18)}
.nav .tel{display:inline-flex;align-items:center;gap:9px;color:#fff;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.09em;white-space:nowrap}
.nav .tel svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.6}
.burger{display:none;width:44px;height:44px;margin-right:-10px;position:relative;flex:0 0 auto}
.burger i{position:absolute;left:11px;width:22px;height:1.5px;background:#fff;transition:transform .45s var(--e),opacity .3s}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:24px}.burger i:nth-child(3){top:30px}
.burger.x i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mob{position:fixed;inset:0;z-index:6900;background:var(--nv-900);padding:calc(var(--hdr) + 60px) var(--gut) 40px;
  display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);transition:clip-path .72s var(--e);
  overflow-y:auto}
.mob.open{clip-path:inset(0 0 0 0)}
.mob a.ml{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);
  font-family:var(--display);font-weight:700;font-size:clamp(30px,8.4vw,44px);letter-spacing:-.02em;color:#fff;
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--e),transform .5s var(--e)}
.mob.open a.ml{opacity:1;transform:none}
.mob a.ml em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--cy)}
.mfoot{margin-top:auto;padding-top:30px;display:grid;gap:8px}
.mfoot .lb{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#6E869C}
.mfoot .b{font-family:var(--display);font-weight:700;font-size:26px;color:#fff;letter-spacing:-.01em}

/* =====================================================================
   HERO - Premium Cinematic
   ===================================================================== */
.hero{position:relative;min-height:clamp(700px,95vh,1000px);display:flex;align-items:flex-end;
  padding:calc(var(--hdr) + 100px) 0 clamp(100px,12vw,160px);overflow:hidden;background:var(--nv-950);isolation:isolate}
.hero::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 20%,rgba(0,102,255,.08) 0%,transparent 50%),
  radial-gradient(ellipse at 70% 80%,rgba(0,212,230,.06) 0%,transparent 50%);
  pointer-events:none}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);object-position:center 35%}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(3,8,18,.95) 0%,rgba(3,8,18,.4) 35%,rgba(3,8,18,.55) 65%,rgba(3,8,18,.95) 100%)}
.hero-scrim2{position:absolute;inset:0;z-index:1;
  background:linear-gradient(94deg,rgba(3,8,18,.85) 0%,rgba(3,8,18,.3) 45%,rgba(3,8,18,0) 75%)}
.hero .wrap-w{position:relative;z-index:3;width:100%}
.hero-in{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,5vw,80px);align-items:flex-end}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:100px;backdrop-filter:blur(10px);
  margin-bottom:clamp(20px,2.5vw,32px);animation:badgeIn .8s var(--e2) .2s both}
@keyframes badgeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-badge span{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.hero-badge i{width:20px;height:1px;background:var(--grad);display:inline-block}
.hero h1{color:#fff;max-width:16ch;animation:textReveal 1s var(--e2) .4s both}
.hero .lead{color:rgba(255,255,255,.85);max-width:50ch;margin-top:clamp(20px,2.5vw,32px);font-size:clamp(18px,1.5vw,22px);animation:textReveal 1s var(--e2) .6s both}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(32px,4vw,48px);animation:textReveal 1s var(--e2) .8s both}
.hero-cta .btn{flex:0 0 auto;min-width:200px}
.hero-stats{display:flex;gap:clamp(32px,5vw,64px);margin-top:clamp(40px,5vw,60px);padding-top:clamp(32px,4vw,48px);
  border-top:1px solid rgba(255,255,255,.1);animation:textReveal 1s var(--e2) 1s both}
.hero-stat{display:flex;flex-direction:column;gap:4px}
.hero-stat .num{font-family:var(--display);font-weight:700;font-size:clamp(36px,4.5vw,56px);line-height:1;color:#fff;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stat .label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hero-scroll{position:absolute;left:50%;bottom:clamp(36px,5vw,56px);transform:translateX(-50%);z-index:4;
  display:grid;justify-items:center;gap:12px;animation:scrollFade 2s ease-in-out infinite}
.hero-scroll svg{width:24px;height:24px;stroke:#fff;stroke-width:1.5;animation:scrollBounce 2s var(--e) infinite}
@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.hero-scroll span{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* the gable wedge - roof pitch exit */
.wedge{position:absolute;left:0;right:0;bottom:-1px;z-index:5;height:clamp(56px,7vw,120px);
  background:var(--paper);clip-path:polygon(0 100%,0 58%,50% 0,100% 58%,100% 100%)}
.wedge.d{background:var(--nv-900)}
.wedge.p2{background:var(--paper2)}
.wedge.up{top:-1px;bottom:auto;clip-path:polygon(0 0,100% 0,100% 42%,50% 100%,0 42%)}

/* Text reveal animation */
@keyframes textReveal{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* =====================================================================
   MARQUEE
   ===================================================================== */
.mq{background:var(--nv-900);border-top:1px solid var(--lineD);border-bottom:1px solid var(--lineD);
  overflow:hidden;padding:15px 0}
.mq-t{display:flex;width:max-content;will-change:transform}
.mq .it{display:inline-flex;align-items:center;gap:clamp(24px,3vw,46px);padding-right:clamp(24px,3vw,46px)}
.mq .it b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#B7C8D6;white-space:nowrap}
.mq .it s{text-decoration:none;color:#fff;font-size:11px}

/* =====================================================================
   STATEMENT + STATS
   ===================================================================== */
.stmt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);align-items:start}
.stmt .big{font-family:var(--display);font-weight:700;font-size:clamp(27px,3.5vw,50px);line-height:1.06;
  letter-spacing:-.024em}
.stmt .big em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stmt .rt{display:grid;gap:20px;padding-top:8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:clamp(44px,5vw,78px)}
.stats .s{padding:clamp(20px,2.4vw,32px) clamp(12px,1.6vw,26px) 0;border-right:1px solid var(--line)}
.stats .s:last-child{border-right:0}
.stats .k{font-family:var(--display);font-weight:700;font-size:clamp(38px,4.6vw,66px);line-height:1;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats .v{margin-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);max-width:18ch}

/* =====================================================================
   SERVICES - Premium Cards Layout
   ===================================================================== */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(20px,3vw,32px);align-items:start}
.svc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(20px,3vw,32px)}
.svc-card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:clamp(28px,3.5vw,36px);transition:all var(--duration-slow) var(--e2);
  box-shadow:var(--shadow-sm);overflow:hidden;position:relative}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform var(--duration-base) var(--e2)}
.svc-card:hover{transform:translateY(-10px);box-shadow:0 24px 48px rgba(5,15,28,.18);border-color:transparent}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card .num{font-family:var(--display);font-weight:800;font-size:clamp(56px,7vw,88px);line-height:1;color:var(--line);letter-spacing:-.03em;
  transition:color var(--duration-base) var(--e2)}
.svc-card:hover .num{color:var(--bl);opacity:.12}
.svc-card .icon{width:64px;height:64px;margin-bottom:24px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(0,102,255,.08) 0%,rgba(0,212,230,.06) 100%);border-radius:var(--r-lg);transition:all var(--duration-slow) var(--e2);position:relative;overflow:hidden}
.svc-card .icon::before{content:'';position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity var(--duration-slow) var(--e2);border-radius:var(--r-lg)}
.svc-card:hover .icon::before{opacity:.1}
.svc-card .icon svg{width:32px;height:32px;stroke:var(--bl);fill:none;stroke-width:1.8;transition:all var(--duration-base) var(--e2);position:relative;z-index:1}
.svc-card:hover .icon{background:var(--grad);transform:scale(1.08) rotate(-3deg);box-shadow:0 12px 32px rgba(0,102,255,.25)}
.svc-card:hover .icon svg{stroke:#fff;transform:scale(1.1)}
.svc-card h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.5vw,28px);line-height:1.2;letter-spacing:-.015em;
  margin-bottom:12px;color:var(--tx);transition:color var(--duration-base) var(--e2)}
.svc-card:hover h3{color:var(--bl)}
.svc-card p{color:var(--tx2);line-height:1.75;flex:1;margin-bottom:24px;font-size:1.02rem}
.svc-card .lnk{margin-top:auto;transition:color var(--duration-base) var(--e2)}
.svc-card .lnk:hover{color:var(--bl)}

/* Services detail page grid */
.svc-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(20px,3vw,32px)}
.svc-detail-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:all var(--duration-slow) var(--e2)}
.svc-detail-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.svc-detail-img{aspect-ratio:16/10;overflow:hidden}
.svc-detail-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--e2)}
.svc-detail-card:hover .svc-detail-img img{transform:scale(1.05)}
.svc-detail-body{padding:clamp(24px,3vw,32px)}
.svc-detail-body .num{font-family:var(--display);font-weight:700;font-size:36px;color:var(--line);margin-bottom:8px}
.svc-detail-body h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.5vw,28px);margin-bottom:12px}
.svc-detail-body p{color:var(--tx2);line-height:1.7;margin-bottom:20px}
.svc-detail-body .lnk{display:inline-flex}

/* =====================================================================
   6 LAYERS - Premium Interactive Section (Identity)
   ===================================================================== */
.layers{position:relative}
.layers-bg{position:absolute;inset:0;opacity:.4;
  background-image:radial-gradient(ellipse at 20% 20%,rgba(0,102,255,.06) 0%,transparent 50%),
                   radial-gradient(ellipse at 80% 80%,rgba(0,212,230,.06) 0%,transparent 50%);
  pointer-events:none}
.layers-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,5vw,80px);align-items:start;position:relative;z-index:2}
.layers-visual{position:sticky;top:calc(var(--hdr) + 40px);display:flex;flex-direction:column;align-items:center;gap:16px}
.layer-svg{width:100%;max-width:520px;aspect-ratio:1/1.3;filter:drop-shadow(0 24px 48px rgba(5,15,28,.15))}
.layer-svg .layer-band{fill:#0A1F33;stroke:#1E3A5F;stroke-width:1.5;transition:all var(--duration-base) var(--e2)}
.layer-svg .layer-band.active{fill:url(#layerGrad);stroke:#00E6CC;stroke-width:2.5;filter:drop-shadow(0 0 12px rgba(0,212,230,.4))}
.layer-svg .layer-label{font-family:var(--mono);font-size:13px;fill:#6B7B8D;letter-spacing:.08em;transition:all var(--duration-base) var(--e2)}
.layer-svg .layer-label.active{fill:#fff;font-weight:600}
.layer-svg .layer-num{font-family:var(--display);font-weight:700;font-size:18px;fill:#3A4A5C;transition:all var(--duration-base) var(--e2)}
.layer-svg .layer-num.active{fill:#00E6CC}
.layer-svg .dim-line{stroke:#1E3A5F;stroke-width:1;stroke-dasharray:8 4}
.layer-svg .dim-text{font-family:var(--mono);font-size:11px;fill:#4E657C;letter-spacing:.06em}

.layers-nav{display:flex;flex-direction:column;gap:10px;width:100%;max-width:520px}
.layer-btn{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);transition:all var(--duration-base) var(--e2);cursor:pointer;text-align:left}
.layer-btn:hover{border-color:var(--bl);transform:translateX(4px);box-shadow:var(--shadow-md)}
.layer-btn.active{border-color:var(--bl);background:linear-gradient(135deg,rgba(0,102,255,.05) 0%,rgba(0,212,230,.05) 100%);
  box-shadow:0 0 0 2px rgba(0,102,255,.15)}
.layer-btn .btn-num{font-family:var(--display);font-weight:700;font-size:28px;color:var(--line);min-width:50px;text-align:center;
  transition:color var(--duration-base) var(--e2)}
.layer-btn.active .btn-num{color:var(--bl)}
.layer-btn .btn-info{flex:1}
.layer-btn .btn-name{font-family:var(--display);font-weight:600;font-size:16px;color:var(--tx);margin-bottom:4px}
.layer-btn .btn-desc{font-size:14px;color:var(--tx2);line-height:1.5}
.layer-btn .btn-arrow{width:24px;height:24px;stroke:var(--line);transition:all var(--duration-base) var(--e2)}
.layer-btn.active .btn-arrow{stroke:var(--bl);transform:translateX(4px)}

.layer-svg .roof-shape{fill:none;stroke:#1E3A5F;stroke-width:1.2;transition:all var(--duration-base) var(--e2)}
.layer-svg .roof-shape.active{fill:url(#shingleGrad);stroke:#00E6CC;stroke-width:2;opacity:1}
.layer-svg .water-shape{fill:#0066FF;opacity:0;transition:opacity var(--duration-base) var(--e2)}
.layer-svg .water-shape.active{opacity:0.15}
.layer-svg .vent-shape{fill:#00E6CC;opacity:0;transition:opacity var(--duration-base) var(--e2)}
.layer-svg .vent-shape.active{opacity:1}
.layer-svg .roof-shape{transition:all var(--duration-slow) var(--e2)}
.layer-group.active .roof-shape{fill:url(#shingleGrad);opacity:1;stroke:#00E6CC;stroke-width:2}
.layer-group.active .water-shape{opacity:0.15}
.layer-group.active .vent-shape{opacity:1}

.layer-group .roof-shape{opacity:0;transition:all var(--duration-slow) var(--e2)}
.layer-group.active .roof-shape{opacity:1}

.layers-panel{padding-top:clamp(16px,2vw,24px)}
.layer-title{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.5vw,42px);line-height:1.1;letter-spacing:-.02em;
  margin-bottom:16px;color:var(--tx)}
.layer-desc{font-size:clamp(16px,1.2vw,18px);line-height:1.7;color:var(--tx2);margin-bottom:24px;max-width:55ch}
.layer-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}
.spec-item{padding:16px 20px;background:var(--st-50);border:1px solid var(--line);border-radius:var(--r);transition:all var(--duration-base) var(--e2)}
.spec-item:hover{border-color:var(--bl);box-shadow:var(--shadow-sm)}
.spec-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px;display:block}
.spec-value{font-family:var(--ui);font-weight:600;font-size:15px;color:var(--tx)}
.layer-image{aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);position:relative}
.layer-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--e2)}
.layer-btn:hover + .layers-panel .layer-image img,
.layers-panel:hover .layer-image img{transform:scale(1.03)}
.layer-tag{position:absolute;top:16px;left:16px;padding:6px 12px;background:rgba(5,15,28,.9);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-sm);
  backdrop-filter:blur(8px)}

/* Layer gradient for active state */
.layer-gradients{position:absolute;width:0;height:0;pointer-events:none}

/* Roofing-themed layer shapes in SVG */
.layer-svg .roof-shape{fill:none;stroke:#1E3A5F;stroke-width:1.2;transition:all var(--duration-base) var(--e2)}
.layer-svg .roof-shape.active{stroke:#00E6CC;stroke-width:2}

/* =====================================================================
   WORK - asymmetric bento
   ===================================================================== */
.wgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.1vw,18px);grid-auto-rows:clamp(140px,14.5vw,205px)}
.wc{position:relative;overflow:hidden;border-radius:var(--r);background:var(--st-100);display:block}
.wc img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e);object-fit:cover;object-position:center center}
.wc:hover img{transform:scale(1.055)}
.wc .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(14px,1.5vw,22px);
  background:linear-gradient(180deg,rgba(5,15,28,0) 42%,rgba(5,15,28,.80));color:#fff}
.wc .ov .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cy);margin-bottom:5px}
.wc .ov .t{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.6vw,24px);letter-spacing:-.015em;line-height:1.08}
.wc.f{grid-column:span 7;grid-row:span 2}
.wc.b{grid-column:span 5;grid-row:span 1}
.wc.c{grid-column:span 4;grid-row:span 1}
.wc.d{grid-column:span 4;grid-row:span 1}

/* =====================================================================
   PROCESS - Premium Timeline Steps
   ===================================================================== */
.proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,28px)}
.pstep{position:relative;padding:clamp(32px,4vw,40px);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);transition:all var(--duration-slow) var(--e2);overflow:hidden}
.pstep::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform var(--duration-base) var(--e2)}
.pstep:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.pstep:hover::before{transform:scaleX(1)}
.pstep.is-in::before{transform:scaleX(1)}
.pstep .num{font-family:var(--display);font-weight:700;font-size:clamp(56px,7vw,88px);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:-.03em;margin-bottom:16px;transition:all var(--duration-base) var(--e2)}
.pstep:hover .num{opacity:.12}
.pstep h3{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.5vw,28px);line-height:1.2;letter-spacing:-.015em;
  color:var(--tx);margin-bottom:12px}
.pstep p{color:var(--tx2);line-height:1.7;font-size:1rem}
.pstep .icon{width:56px;height:56px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-subtle);border-radius:var(--r);transition:all var(--duration-base) var(--e2)}
.pstep .icon svg{width:28px;height:28px;stroke:var(--bl);fill:none;stroke-width:1.6;transition:all var(--duration-base) var(--e2)}
.pstep:hover .icon{background:var(--grad);transform:scale(1.05) rotate(-2deg)}
.pstep:hover .icon svg{stroke:#fff}

/* =====================================================================
   AREAS
   ===================================================================== */
.areas{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4.4vw,80px);align-items:start}
.acity{display:flex;flex-wrap:wrap;gap:0 clamp(14px,1.6vw,26px)}
.acity li{font-family:var(--display);font-weight:700;font-size:clamp(23px,3.1vw,42px);letter-spacing:-.022em;
  line-height:1.24;color:var(--tx);transition:color .35s}
.acity li:hover{color:var(--bl)}
.acity li span{color:var(--line2);margin-left:clamp(14px,1.6vw,26px)}
.acnty{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,3.4vw,48px)}
.acnty div{background:var(--paper);padding:clamp(16px,1.8vw,24px)}
.acnty b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,25px);letter-spacing:-.018em}
.acnty i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--tx3)}

/* =====================================================================
   FAQ - Premium Accordion
   ===================================================================== */
.faq{padding-top:clamp(32px,4vw,48px)}
.fq{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:16px;
  overflow:hidden;transition:all var(--duration-slow) var(--e2);box-shadow:var(--shadow-sm)}
.fq:hover{border-color:var(--bl);box-shadow:var(--shadow-md)}
.fq .q{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.5vw,32px);align-items:center;
  padding:clamp(22px,2.8vw,32px) clamp(24px,3vw,32px);text-align:left;cursor:pointer}
.fq .ix{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--bl);opacity:.5}
.fq .qt{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.4vw,28px);letter-spacing:-.015em;line-height:1.3;
  color:var(--tx);transition:color var(--duration-base) var(--e2)}
.fq:hover .qt,.fq.open .qt{color:var(--bl)}
.fq .pm{width:32px;height:32px;position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--st-100);transition:all var(--duration-slow) var(--e2)}
.fq:hover .pm{background:var(--grad-subtle);transform:scale(1.05)}
.fq.open .pm{transform:rotate(180deg);background:var(--grad-subtle)}
.fq .pm::before,.fq .pm::after{content:'';position:absolute;background:var(--nv-900);transition:transform var(--duration-slow) var(--e2),opacity var(--duration-base) var(--e2),background var(--duration-base) var(--e2)}
.fq .pm::before{width:16px;height:2px;border-radius:1px}
.fq .pm::after{width:2px;height:16px;border-radius:1px}
.fq.open .pm::after{transform:rotate(180deg);opacity:0}
.fq.open .pm::before{transform:rotate(45deg);background:var(--bl);width:18px}
.fq.open .pm::after{transform:rotate(-45deg);background:var(--bl);width:18px}
.fq .a{overflow:hidden;max-height:0;transition:max-height var(--duration-slow) var(--e2),padding var(--duration-base) var(--e2)}
.fq.open .a{max-height:800px;padding-top:12px}
.fq .a .inn{padding:0 clamp(24px,3vw,32px) clamp(24px,3vw,32px);max-width:75ch}
.fq .a p{color:var(--tx2);line-height:1.85;font-size:1.02rem}
.fq .a .lead{color:var(--tx);font-weight:600;margin-bottom:14px;font-size:1.05rem}
.fq .a ul{margin:14px 0;padding-left:24px}
.fq .a li{margin-bottom:8px;color:var(--tx2);line-height:1.8}

/* =====================================================================
   CTA BAND - Premium
   ===================================================================== */
.cta{position:relative;overflow:hidden;background:var(--nv-950);isolation:isolate;padding:clamp(80px,10vw,120px) 0}
.cta::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 20% 30%,rgba(0,102,255,.1) 0%,transparent 50%),
  radial-gradient(ellipse at 80% 70%,rgba(0,212,230,.08) 0%,transparent 50%);
  pointer-events:none}
.cta img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25;z-index:0}
.cta .sc{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(3,8,18,.95) 0%,rgba(3,8,18,.6) 100%)}
.cta .wrap{position:relative;z-index:3}
.cta-in{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(32px,5vw,80px);align-items:center}
.cta-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:100px;backdrop-filter:blur(10px);
  margin-bottom:clamp(20px,2.5vw,32px);font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.cta-badge i{width:20px;height:1px;background:var(--grad);display:inline-block}
.cta h2{color:#fff;max-width:18ch}
.cta .lead{color:rgba(255,255,255,.85);max-width:55ch;margin-top:clamp(20px,2.5vw,32px)}
.cta-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(28px,3.5vw,44px)}
.cta-actions .btn{flex:0 0 auto;min-width:200px}

/* =====================================================================
   FOOTER - Premium Design
   ===================================================================== */
.ftr{background:var(--nv-950);color:#fff;position:relative;overflow:hidden}
.ftr::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,102,255,.3),transparent)}
.ftr::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:600px;height:600px;background:radial-gradient(ellipse,rgba(0,102,255,.08) 0%,transparent 70%);
  pointer-events:none}
.ftr-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:clamp(32px,4vw,64px);
  padding:clamp(64px,8vw,100px) 0 clamp(48px,6vw,80px);position:relative;z-index:2}
.ftr-brand{padding-right:clamp(20px,3vw,40px)}
.ftr img.fl{height:48px;width:auto;margin-bottom:24px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.3))}
.ftr .fdesc{color:rgba(255,255,255,.7);font-size:clamp(15px,1.1vw,17px);line-height:1.75;max-width:38ch;
  margin-bottom:28px}
.ftr-social{display:flex;gap:12px}
.ftr-social a{width:44px;height:44px;border:1px solid rgba(255,255,255,.15);border-radius:50%;
  display:grid;place-items:center;transition:all var(--duration-base) var(--e2);color:rgba(255,255,255,.6)}
.ftr-social a:hover{border-color:var(--bl);background:rgba(0,102,255,.15);color:#fff;transform:translateY(-3px)}
.ftr-social svg{width:20px;height:20px}
.ftr .fh{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:20px}
.ftr .fcol a,.ftr .fcol li{display:block;color:rgba(255,255,255,.7);font-size:15px;padding:10px 0;transition:all var(--duration-fast) var(--e2);
  position:relative}
.ftr .fcol a::before{content:'';position:absolute;left:0;bottom:8px;width:0;height:2px;background:var(--grad);
  transition:width var(--duration-base) var(--e2)}
.ftr .fcol a:hover{color:#fff;padding-left:8px}
.ftr .fcol a:hover::before{width:100%}
.ftr .fb{display:grid;gap:10px;margin-bottom:20px}
.ftr .fb b{font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,28px);letter-spacing:-.015em;color:#fff}
.ftr .fb i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ftr-contact{display:flex;flex-direction:column;gap:16px}
.ftr-contact-item{display:flex;align-items:flex-start;gap:14px;padding:16px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r);transition:all var(--duration-base) var(--e2)}
.ftr-contact-item:hover{border-color:rgba(0,102,255,.3);background:rgba(0,102,255,.05)}
.ftr-contact-icon{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;
  background:var(--grad-subtle);border-radius:var(--r-sm);color:var(--bl)}
.ftr-contact-icon svg{width:20px;height:20px}
.ftr-contact-text{font-size:15px;line-height:1.6}
.ftr-contact-text a{color:rgba(255,255,255,.85);transition:color var(--duration-fast) var(--e2)}
.ftr-contact-text a:hover{color:#fff}
.ftr-contact-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.4);display:block;margin-bottom:4px}
.ftr-big{display:none}
.ftr-divider{position:relative;z-index:2;margin:0 calc(var(--gut)*-1);padding:0 var(--gut);border-top:1px solid rgba(255,255,255,.08)}
.ftr-b{padding:clamp(24px,3vw,32px) 0;display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,24px) clamp(24px,3vw,40px);
  justify-content:space-between;align-items:center;position:relative;z-index:2}
.ftr-b .copyright{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.ftr-b .legal{display:flex;gap:clamp(20px,3vw,40px)}
.ftr-b .legal a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);transition:color var(--duration-fast) var(--e2)}
.ftr-b .legal a:hover{color:#fff}
.ftr-b .made{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.ftr-b .made span{color:var(--cy);font-weight:600}

/* =====================================================================
   PAGE HEADER (inner pages)
   ===================================================================== */
.phead{position:relative;background:var(--nv-950);overflow:hidden;padding:calc(var(--hdr) + clamp(66px,8vw,120px)) 0 clamp(70px,8.4vw,124px);isolation:isolate}
.phead img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;z-index:0}
.phead .sc{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,15,28,.86),rgba(5,15,28,.62))}
.phead .wrap{position:relative;z-index:3}
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#7E97AC;margin-bottom:clamp(16px,2vw,26px)}
.crumb a:hover{color:#fff}
.crumb s{text-decoration:none;color:var(--cy)}

/* =====================================================================
   GALLERY - Premium Masonry Grid
   ===================================================================== */
.gfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,4vw,48px);justify-content:center}
.gfilter button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:12px 22px;
  border:2px solid var(--line);border-radius:var(--r);color:var(--tx2);background:var(--paper);
  transition:all var(--duration-base) var(--e2);font-weight:500}
.gfilter button:hover{border-color:var(--bl);color:var(--bl);background:var(--grad-subtle);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.gfilter button.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--shadow-md)}
.gfilter button em{font-style:normal;opacity:.55;margin-left:7px}
.gfilter button.on em{color:rgba(255,255,255,.8)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(20px,3vw,28px)}
.gi{position:relative;overflow:hidden;border-radius:var(--r-lg);cursor:pointer;display:block;background:var(--st-100);
  opacity:0;transform:translateY(20px) scale(.98);transition:opacity var(--duration-slow) var(--e2),
  transform var(--duration-slow) var(--e2),box-shadow var(--duration-base) var(--e2)}
.gi.in{opacity:1;transform:none}
.gi.hide{display:none}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--e2);aspect-ratio:4/3}
.gi:hover{box-shadow:var(--shadow-xl);z-index:10}
.gi:hover img{transform:scale(1.08)}
.gi .go{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,15,28,0) 40%,rgba(5,15,28,.9) 100%);
  opacity:0;transition:opacity var(--duration-base) var(--e2);display:flex;align-items:flex-end;padding:clamp(18px,2.5vw,24px);color:#fff}
.gi:hover .go{opacity:1}
.gi .go .info{width:100%}
.gi .go .cat{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:var(--cy);margin-bottom:8px;display:block}
.gi .go .title{font-family:var(--display);font-weight:700;font-size:clamp(18px,2vw,24px);letter-spacing:-.01em;line-height:1.2}
.gi .gz{position:absolute;top:16px;right:16px;width:44px;height:44px;background:rgba(255,255,255,.95);
  border-radius:50%;display:grid;place-items:center;opacity:0;transform:scale(.8) translateY(10px);
  transition:all var(--duration-base) var(--e-spring);box-shadow:var(--shadow-md);backdrop-filter:blur(8px)}
.gi:hover .gz{opacity:1;transform:scale(1) translateY(0)}
.gi .gz svg{width:20px;height:20px;stroke:var(--nv-900);fill:none;stroke-width:1.8;transition:stroke var(--duration-fast) var(--e2)}
.gi .gz:hover svg{stroke:var(--bl)}

#lb{position:fixed;inset:0;z-index:9600;background:rgba(3,8,18,.98);display:none;
  align-items:center;justify-content:center;opacity:0;transition:opacity var(--duration-base) var(--e2)}
#lb.on{display:flex}
#lb.vis{opacity:1}
#lb .lbi{max-width:min(1200px,94vw);max-height:88vh;position:relative;border-radius:var(--r)}
#lb img{max-width:100%;max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:var(--r)}
#lb .lbc{position:absolute;left:0;right:0;bottom:-50px;display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#lb .x{position:absolute;top:20px;right:20px;width:52px;height:52px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;
  transition:all var(--duration-base) var(--e2);backdrop-filter:blur(8px)}
#lb .x:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
#lb .x svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
#lb .nvb{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;
  transition:all var(--duration-base) var(--e2);backdrop-filter:blur(8px)}
#lb .nvb:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
#lb .nvb svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
#lb .pv{left:20px}#lb .nx2{right:20px}

/* =====================================================================
   CARDS / SPLITS / FORM / TESTIMONIALS
   ===================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,76px);align-items:center}
.split.top{align-items:start}
.split .fig{position:relative;overflow:hidden;border-radius:var(--r);background:var(--st-100)}
.split .fig img{width:100%;height:100%;object-fit:cover}
.split .fig.tall{aspect-ratio:4/5}
.split .fig.wide{aspect-ratio:4/3}
.chk{display:grid;gap:13px;margin-top:clamp(22px,2.6vw,34px)}
.chk li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;font-size:16px;color:var(--tx2)}
.chk svg{width:18px;height:18px;stroke:var(--bl);fill:none;stroke-width:1.8;margin-top:3px}
.nv .chk li{color:#A9BCCD}
.nv .chk svg{stroke:var(--cy)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--paper);padding:clamp(24px,2.8vw,38px);position:relative;transition:background .4s var(--e)}
.card:hover{background:var(--paper2)}
.card .ic{width:40px;height:40px;margin-bottom:clamp(20px,2.2vw,30px)}
.card .ic svg{width:100%;height:100%;stroke:var(--bl);fill:none;stroke-width:1.35}
.card .n{position:absolute;top:clamp(24px,2.8vw,38px);right:clamp(24px,2.8vw,38px);font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;color:var(--tx3)}
.card p{margin-top:11px}

.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.tcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;
  background:var(--paper);transition:border-color .4s var(--e2),box-shadow .4s var(--e2)}
.tcard:hover{border-color:var(--bl);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.tcard .qm{font-family:var(--display);font-weight:700;font-size:clamp(48px,5vw,64px);line-height:.65;color:var(--st-300);margin-bottom:16px}
.tcard blockquote{font-size:clamp(15px,1.3vw,18px);line-height:1.7;color:var(--tx);flex:1;min-height:0;word-wrap:break-word;overflow-wrap:break-word}
.tcard .who{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:3px}
.tcard .who b{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em}
.tcard .who i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.ph-note{display:flex;gap:14px;align-items:flex-start;border:1px dashed var(--line2);border-radius:var(--r);
  padding:18px 20px;background:var(--paper2);margin-bottom:clamp(26px,3vw,42px)}
.ph-note svg{width:19px;height:19px;stroke:var(--bl);fill:none;stroke-width:1.6;flex:0 0 auto;margin-top:2px}
.ph-note p{font-size:14.5px;line-height:1.55;color:var(--tx2)}

.form{display:grid;gap:16px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:grid;gap:8px}
.fld label{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3)}
.fld input,.fld select,.fld textarea{border:1px solid var(--line2);border-radius:var(--r);padding:14px 15px;
  background:var(--paper);font-size:16px;transition:border-color .3s var(--e2),box-shadow .3s var(--e2),background-color .2s var(--e2);width:100%;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A5A6B' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:36px}
.fld select:focus{outline:0;border-color:var(--bl);box-shadow:0 0 0 3px rgba(10,90,230,.10);background-color:var(--paper)}
.fld select:hover{border-color:var(--bl)}
.fld select{transition:border-color .3s var(--e2),background-color .2s var(--e2),box-shadow .3s var(--e2)}
.fld textarea{min-height:132px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--bl);box-shadow:0 0 0 3px rgba(10,90,230,.10)}
.finfo{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.finfo div{background:var(--paper);padding:clamp(20px,2.2vw,28px)}
.finfo .lb{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
.finfo .vv{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.7vw,24px);letter-spacing:-.015em;line-height:1.2}
.finfo a:hover{color:var(--bl)}

/* =====================================================================
   MOBILE STICKY ACTION BAR
   ===================================================================== */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:6800;display:none;
  background:rgba(8,25,43,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.13);padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .55s var(--e)}
.mbar.up{transform:none}
.mbar .in{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;border-radius:var(--r);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.mbar a.c{border:1px solid rgba(255,255,255,.32);color:#fff}
.mbar a.q{background:var(--grad);color:#fff}
.mbar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.rail-hint{display:none;align-items:center;gap:9px;margin-top:16px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tx3)}
.rail-hint svg{width:19px;height:13px;stroke:currentColor;fill:none;stroke-width:1.4}
.nv .rail-hint{color:#6E869C}

/* =====================================================================
   MOTION
   ===================================================================== */
/* Default visible for fail-safe rendering */
[data-r]{opacity:1;transform:none}
/* anim reveal */
[data-r]{opacity:1;transform:none}
html.anim [data-r].is-in{opacity:1;transform:none}
html.anim [data-r].is-in{opacity:1;transform:none}
[data-r="up"]{transform:translateY(30px)}
[data-r="left"]{transform:translateX(-28px)}
[data-r="right"]{transform:translateX(28px)}
[data-r="scale"]{transform:scale(.965)}
[data-r].is-in{opacity:1;transform:none;transition:opacity .95s var(--e),transform 1.05s var(--e)}
.mask{overflow:hidden}
.mask>*{transform:translateY(101%);transition:transform 1.05s var(--e)}
.mask.is-in>*{transform:none}
.sw{display:inline-block;overflow:hidden;vertical-align:bottom}
.sw i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .95s var(--e)}
.is-in .sw i,.sw.is-in i{transform:none}
.ln-w{overflow:hidden;display:block}
.ln-i{display:block;transform:translateY(102%);transition:transform 1s var(--e)}
.is-in .ln-i{transform:none}
.ico-d svg path,.ico-d svg circle,.ico-d svg rect,.ico-d svg line,.ico-d svg polyline{
  stroke-dasharray:var(--L);stroke-dashoffset:var(--L);transition:stroke-dashoffset 1.15s var(--e)}
.ico-d.is-in svg path,.ico-d.is-in svg circle,.ico-d.is-in svg rect,.ico-d.is-in svg line,.ico-d.is-in svg polyline{stroke-dashoffset:0}

html.no-smooth *,html.no-smooth *::before,html.no-smooth *::after{
  animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important;transition-delay:0s !important}
html.no-smooth [data-r],html.no-smooth .mask>*,html.no-smooth .sw i,html.no-smooth .ln-i{opacity:1 !important;transform:none !important}
html.no-smooth .gi{opacity:1 !important;transform:none !important}
html.no-smooth #pre{display:none !important}
html.no-smooth .pstep::before{transform:scaleX(1) !important}
html.no-smooth .ico-d svg path,html.no-smooth .ico-d svg circle,html.no-smooth .ico-d svg rect,
html.no-smooth .ico-d svg line,html.no-smooth .ico-d svg polyline{stroke-dashoffset:0 !important}
@media (prefers-reduced-motion:reduce){
  [data-r],.mask>*,.sw i,.ln-i,.gi{opacity:1 !important;transform:none !important}
}

/* =====================================================================
   RESPONSIVE - 1080
   ===================================================================== */
@media (max-width:1080px){
  .nav .lk,.nav .vr{display:none}
  .burger{display:block}
  .stmt,.dwrap,.split,.cta-in,.areas{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr 1fr}
  .cards,.tgrid{grid-template-columns:repeat(2,1fr)}
  .wc.f{grid-column:span 12;grid-row:span 2}
  .wc.b,.wc.c,.wc.d{grid-column:span 6}
  .acnty{grid-template-columns:repeat(2,1fr)}
  .proc{grid-template-columns:repeat(2,1fr)}
  .layers-grid{grid-template-columns:1fr}
  .layers-visual{position:relative;top:auto;order:-1;max-width:400px;margin:0 auto}
  .layers-nav{max-width:100%}
}

/* =====================================================================
   RESPONSIVE - 760 (mobile is a different composition, not a squeeze)
   ===================================================================== */
@media (max-width:760px){
  body{font-size:16px}
  :root{--hdr:70px}
  .pad{padding:clamp(40px,8vw,60px) 0}
  .pad-s{padding:clamp(30px,6vw,44px) 0}
  .shead{grid-template-columns:1fr;gap:10px;margin-bottom:24px}
  .shead .ix{padding-top:0}
  .tick .in{height:28px}
  .tick span:nth-child(n+2){display:none}
  .logo img{height:36px}

  /* Mobile Header - logo left, burger right */
  .nav .in{gap:16px}
  .nav .tel{display:none}
  .burger{display:flex;margin-left:auto;margin-right:0}
  .nav .btn{display:none}

  .hero{min-height:auto;padding:calc(var(--hdr) + 50px) 0 clamp(60px,15vw,80px);text-align:center}
  .hero-in{grid-template-columns:1fr;gap:20px;text-align:center}
  .hero-badge{margin:0 auto clamp(20px,3vw,28px);justify-content:center}
  .hero h1{max-width:none;font-size:clamp(30px,8vw,44px)}
  .hero .lead{max-width:none;font-size:clamp(16px,4vw,19px);text-align:center}
  .hero-cta{justify-content:center;gap:12px;margin-top:clamp(24px,4vw,36px)}
  .hero-cta .btn{width:100%;max-width:320px}
  .hero-stats{flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,32px);margin-top:clamp(32px,5vw,44px);padding-top:clamp(24px,4vw,36px)}
  .hero-stat .num{font-size:clamp(28px,7vw,40px)}
  .hero-scroll{display:none}

  .stats{grid-template-columns:1fr 1fr;border:0;gap:16px;margin-top:clamp(28px,4vw,40px)}
  .stats .s{padding:clamp(20px,3vw,28px) clamp(16px,3vw,24px);border:1px solid var(--line);border-radius:var(--r);
    background:var(--paper);box-shadow:var(--shadow-sm)}
  .stats .s:nth-child(n){border-right:0;padding-left:0}

  /* Services - premium cards stack */
  .svc{grid-template-columns:1fr}
  .svc-card{padding:clamp(24px,4vw,32px)}
  .svc-card .num{font-size:clamp(40px,8vw,56px)}
  .svc-card .icon{width:48px;height:48px}
  .svc-card .icon svg{width:24px;height:24px}

  /* 6 Layers mobile */
  .layers{padding-top:clamp(16px,3vw,24px)}
  .layers-grid{grid-template-columns:1fr}
  .layers-visual{position:relative;top:auto;order:-1;max-width:100%}
  .layer-svg{max-width:100%}
  .layers-nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px;max-width:100%}
  .layer-btn{flex:1 1 calc(50% - 6px);min-width:150px;flex-direction:column;text-align:center;gap:8px;padding:14px 12px}
  .layer-btn .btn-num{font-size:22px;min-width:auto}
  .layer-btn .btn-name{font-size:14px}
  .layer-btn .btn-desc{display:none}
  .layer-btn .btn-arrow{display:none}
  .layers-panel{order:2;width:100%}
  .layer-title{font-size:clamp(24px,6vw,34px);text-align:center}
  .layer-desc{font-size:clamp(15px,3.5vw,17px);text-align:center;max-width:none}
  .layer-specs{grid-template-columns:1fr 1fr;gap:12px}
  .layer-image{aspect-ratio:4/3}

  /* Work/Projects mobile */
  .wgrid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;grid-auto-rows:auto;
    margin:0 calc(var(--gut)*-1);padding:0 var(--gut) 8px;scrollbar-width:none}
  .wgrid::-webkit-scrollbar{display:none}
  .wc{flex:0 0 85%;scroll-snap-align:start;aspect-ratio:4/3;border-radius:var(--r-lg)}
  .wc .ov{padding:clamp(16px,3vw,20px)}

  /* Process mobile - vertical cards */
  .proc{grid-template-columns:1fr;gap:16px}
  .pstep{padding:clamp(24px,4vw,32px);border-radius:var(--r-lg);border:1px solid var(--line)}
  .pstep::before{width:100%;height:4px;top:0;left:0;transform:scaleX(0);transform-origin:left}
  .pstep:hover::before{transform:scaleX(1)}
  .pstep.is-in::before{transform:scaleX(1)}
  .pstep .num{font-size:clamp(40px,9vw,56px)}
  .pstep .icon{width:48px;height:48px;margin-bottom:16px}
  .pstep .icon svg{width:24px;height:24px}
  .pstep h3{font-size:clamp(20px,4.5vw,24px)}
  .pstep p{font-size:15px}

  /* Areas mobile */
  .acity li{font-size:clamp(20px,5vw,28px);line-height:1.3}
  .acity li span{margin-left:8px}
  .acnty{grid-template-columns:1fr;gap:0}
  .acnty div{padding:clamp(16px,3vw,20px);border-top:1px solid var(--line)}
  .acnty div:first-child{border-top:0}

  /* FAQ mobile */
  .faq{padding-top:clamp(24px,4vw,36px)}
  .fq .q{padding:clamp(18px,3.5vw,24px);gap:12px}
  .fq .qt{font-size:clamp(17px,4vw,20px)}
  .fq .pm{width:24px;height:24px}
  .fq .pm::before{width:14px}
  .fq .pm::after{height:14px}
  .fq .a .inn{padding:0 clamp(18px,3.5vw,24px) clamp(18px,3.5vw,24px);max-width:none}
  .fq .a p{font-size:15px;line-height:1.7}

  /* CTA mobile */
  .cta{padding:clamp(60px,12vw,80px) 0;text-align:center}
  .cta-in{grid-template-columns:1fr;gap:28px;text-align:center}
  .cta-badge{margin:0 auto clamp(20px,3vw,28px);justify-content:center}
  .cta h2{max-width:none;font-size:clamp(28px,7vw,40px)}
  .cta .lead{max-width:none;text-align:center}
  .cta-actions{justify-content:center;gap:12px}
  .cta-actions .btn{width:100%;max-width:320px}

  /* Layout fixes */
  .cards,.tgrid,.f2,.finfo{grid-template-columns:1fr}
  .ggrid{gap:clamp(16px,3vw,20px)}
  .gi{aspect-ratio:3/4}
  .gfilter{gap:8px}
  .gfilter button{padding:10px 16px;font-size:10px}
  .ftr-top{grid-template-columns:1fr;gap:clamp(32px,6vw,48px);padding:clamp(48px,10vw,72px) 0 clamp(40px,8vw,60px)}
  .ftr-brand{padding-right:0;text-align:center}
  .ftr img.fl{margin:0 auto clamp(24px,4vw,32px)}
  .ftr .fdesc{max-width:none;text-align:center}
  .ftr-social{justify-content:center}
  .ftr .fcol{text-align:center}
  .ftr .fcol a::before{left:50%;transform:translateX(-50%);bottom:6px}
  .ftr .fcol a:hover::before{width:60px}
  .ftr .fcol a:hover{padding-left:0;padding-right:0}
  .ftr-contact{width:100%}
  .ftr-b{flex-direction:column;gap:16px;text-align:center;padding:clamp(24px,5vw,32px) 0}
  .ftr-b .legal{flex-wrap:wrap;justify-content:center}
  .mbar{display:block}
  .rail-hint{display:none}
  #lb .nvb{width:44px;height:44px}
  #lb .pv{left:12px}#lb .nx2{right:12px}
  #lb .lbi{max-width:96vw}
  .split .fig.tall{aspect-ratio:3/4}
  .hero-badge{font-size:9px}
}

@media (max-width:480px){
  :root{--gut:clamp(16px,4vw,24px)}
  .hero{padding:calc(var(--hdr) + 40px) 0 clamp(50px,12vw,70px)}
.hero h1{font-size:clamp(28px,7vw,38px)}
  .hero .lead{font-size:15px}
  .hero-cta .btn{padding:14px 24px;font-size:10px}
  .hero-stats{gap:16px}
  .hero-stat .num{font-size:clamp(24px,6vw,32px)}
  .hero-stat .label{font-size:9px}
  .btn{padding:14px 24px;font-size:10px}
  .btn.lg{padding:16px 28px;font-size:11px}
  .svc-card{padding:20px}
  .svc-card .num{font-size:36px}
  .layer-btn{flex:1 1 100%;min-width:0}
  .layer-specs{grid-template-columns:1fr}
  .ggrid{grid-template-columns:1fr}
  .wc{flex:0 0 95%}
  .fq .q{padding:16px}
  .fq .qt{font-size:16px}
  .cta h2{font-size:clamp(26px,7vw,36px)}
  .stats{grid-template-columns:1fr}
  .ftr-contact-item{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .ftr-contact-icon{margin:0 auto}
}

/* =====================================================================
   QA PASS 2
   Fixes from the desktop visual review plus the five areas called out
   by the client: layouts, styles, fonts, gallery, mobile.
   This block is appended deliberately so it wins on source order.
   ===================================================================== */

/* --- FONTS -----------------------------------------------------------
   A third type role. Headlines stay condensed (Nimbus Sans Narrow);
   large numerals now speak in a regular-width grotesque so figures read
   as data rather than as more headline. This is what was missing.      */
:root{--grot:'Nimbus Sans','Helvetica Neue',Arial,sans-serif}
.stats .k,.dnum,.pstep .n,.tcard .qm,.fig{
  font-family:var(--grot);font-weight:700;letter-spacing:-.035em;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.hero-eye,.crumb,.sheet-tag,.mono,.anno{font-feature-settings:'lnum' 1,'tnum' 1}

/* --- SECTION DRAWING -------------------------------------------------
   Was an unreadable dark mass. Wider column, striated bands, real
   contrast between layers, and labels that survive the SVG downscale.  */
@media (min-width:1081px){
  .dwrap{grid-template-columns:0.75fr 1.25fr;gap:clamp(26px,3.2vw,52px);align-items:stretch}
  /* let the drawing sheet fill the column so the two sides finish level */
  .sheet{height:100%;display:flex;flex-direction:column;justify-content:center}
}
.dwg .band{fill:#12293F;stroke:#4A7BA8;stroke-width:1.4}
.dwg g:nth-of-type(odd) .band{fill:#193A5C}
.dwg g.on .band{stroke:#7FE6FF;stroke-width:2.2}
.dwg .hl{stroke:rgba(255,255,255,.20)}
.dwg g.on .hl{stroke:rgba(255,255,255,.72)}
.dwg .lead-l{stroke:#3D6288}
.dwg g.on .lead-l{stroke:#7FE6FF}
.dwg .lb{font-size:15px;fill:#C2D3E1;letter-spacing:.04em}
.dwg g.on .lb{fill:#fff}
.dwg .nx{font-size:14px;fill:#7C9AB4}
.dwg g.on .nx{fill:var(--cy)}
.dwg .dimtx{font-size:11.5px;fill:#63809B;letter-spacing:.06em}
.dwg .dim{stroke:#31506F}

/* --- SMALL FIXES FROM THE REVIEW ------------------------------------ */
.stats .v{font-size:11px;line-height:1.5;color:var(--tx2)}
.cta .btn.out{border-color:rgba(255,255,255,.72);color:#fff}
.cta .btn.out:hover{background:#fff;border-color:#fff;color:var(--nv-900)}
.acnty div{min-height:104px;display:flex;flex-direction:column;justify-content:center}
.logo img{height:40px}
.hdr.scr .logo img{height:36px}

/* --- GALLERY ---------------------------------------------------------
   Replaces the CSS-column masonry, which stacked into ragged uneven
   runs and read as a stock photo dump. Now a real editorial mosaic on
   a 12 column grid with deliberate varied spans.                       */
.gbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;
  padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:clamp(22px,2.6vw,36px)}
.gbar .gfilter{margin-bottom:0}
.gcount{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.gfilter button{padding:10px 15px}
.gfilter button em{opacity:1;color:var(--tx3)}
/* was var(--cy) (cyan) here, which nearly disappears against the active
   button's own blue gradient background - low enough contrast that the
   count was reported as "not visible". White matches what the button's
   own label text already uses. */
.gfilter button.on em{color:rgba(255,255,255,.85)}

.ggrid{columns:auto;column-gap:normal;
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.1vw,18px)}
.gi{margin-bottom:0;break-inside:auto;grid-column:span 4;aspect-ratio:1/1}
.gi:nth-child(7n+1){grid-column:span 5;aspect-ratio:4/5}
.gi:nth-child(7n+2){grid-column:span 7;aspect-ratio:16/11}
.gi:nth-child(7n+6){grid-column:span 7;aspect-ratio:16/10}
.gi:nth-child(7n+7){grid-column:span 5;aspect-ratio:4/5}
/* in each mixed pair the tall portrait sets the row height and the wide
   partner stretches to match, otherwise the row leaves a dead gap */
.gi:nth-child(7n+2),.gi:nth-child(7n+6){aspect-ratio:auto;height:100%}
.gi img{width:100%;height:100%;object-fit:cover}
.gi .go{inset:auto 0 0 0;opacity:1;padding:14px 16px;align-items:flex-end;
  background:linear-gradient(0deg,rgba(5,15,28,.86) 0%,rgba(5,15,28,.35) 60%,transparent 100%);
  transform:translateY(100%);transition:transform .5s var(--e)}
.gi:hover .go{transform:none;opacity:1}
.gi .gz{border-radius:var(--r);background:rgba(5,15,28,.55)}

@media (max-width:1080px){
  .ggrid{grid-template-columns:repeat(12,1fr)}
  .gi,.gi:nth-child(7n+1),.gi:nth-child(7n+2),.gi:nth-child(7n+6),.gi:nth-child(7n+7){
    grid-column:span 6;aspect-ratio:1/1;height:auto}
  .gi:nth-child(5n+1){grid-column:span 12;aspect-ratio:16/9}
}

/* =====================================================================
   MOBILE PASS 2
   The client has said twice that mobile is weak and too long. This
   block shortens the page substantially and removes the horizontal
   overflow that was making the capture 994px wide instead of 390px.
   ===================================================================== */
@media (max-width:760px){
  /* overflow guards. clip does not create a containing block, so
     position:sticky and position:fixed keep working. */
  html,body{overflow-x:clip}
  main,section,footer,header{max-width:100%}
  .wrap,.wrap-w{max-width:100%;overflow-x:clip}

  /* the header could not fit logo + phone + button + burger in 390px.
     the sticky bottom action bar already carries both CTAs. */
  .nav .btn.pri{display:none}
  .nav .in{gap:12px}
  .logo img,.hdr.scr .logo img{height:32px}
  .tel{font-size:12px}

  /* vertical compression, applied everywhere */
  .pad{padding:clamp(38px,7.4vw,54px) 0}
  .pad-s{padding:clamp(28px,4.8vw,40px) 0}
  .shead{margin-bottom:22px;gap:10px}

  .hero{min-height:auto;padding:calc(var(--hdr) + 62px) 0 78px}
  .hero h1{font-size:clamp(32px,9vw,44px);line-height:.94}
  .hero .lead{font-size:16px;margin-top:14px}
  .hero-cta{margin-top:22px;gap:10px}

  .stmt .big{font-size:clamp(25px,7vw,32px)}
  .stats .k{font-size:clamp(34px,10.5vw,44px)}
  .stats .v{font-size:10px;letter-spacing:.11em}
  .stats .s{padding:16px 12px 16px 0}

  .svc-row{min-height:120px;padding:14px}
  .svc-row.on{padding-left:14px}

  .sheet{padding:22px 12px 14px}
  .dnum{font-size:42px}
  .dttl{font-size:21px}
  .ddesc{font-size:15px}
  .dspec div{padding:9px 0}

  /* process: tight timeline instead of four tall stacked blocks */
  .pstep{padding:0 0 18px 18px}
  .pstep .n{font-size:26px;margin-bottom:4px}
  .pstep h3{font-size:18px}
  .pstep p{font-size:14.5px;margin-top:5px}

  .acity li{font-size:18px;line-height:1.3}
  .acnty div{min-height:0;padding:13px}

  .fq .q{padding:14px 0}
  .fq .qt{font-size:17px;line-height:1.28}
  .fq .ix{display:none}
  .fq .a p{padding-bottom:16px;font-size:15px;line-height:1.6}

  /* gallery on mobile: two columns with a wide accent every fourth */
  .ggrid{gap:8px}
  .gi,.gi:nth-child(7n+1),.gi:nth-child(7n+2),.gi:nth-child(7n+6),
  .gi:nth-child(7n+7),.gi:nth-child(5n+1){grid-column:span 6;aspect-ratio:1/1;height:auto}
  .gi:nth-child(4n+1){grid-column:span 12;aspect-ratio:16/10}
  .gi .go{transform:none;padding:10px 12px}
  .gi .gz{display:none}

  /* footer: two columns rather than one long stack */
  .ftr-top{grid-template-columns:1fr 1fr;gap:24px 18px;padding:32px 0 24px}
  .ftr-top>div:first-child{grid-column:1 / -1}
  .ftr-big{font-size:clamp(44px,15vw,62px)}
  .ftr-b{padding:14px 0 86px;font-size:9.5px}
  .ftr .fh{color:#fff}
}

@media (max-width:420px){
  .acity li{font-size:17px}
  .gfilter button{padding:8px 10px;font-size:9px;letter-spacing:.1em}
}

/* --- SERVICES GRID ---------------------------------------------------
   Eight services in a three column grid left one dead cell. Four
   columns divides exactly into two rows.                              */
@media (min-width:1081px){
  .cards{grid-template-columns:repeat(4,1fr)}
  .card{padding:clamp(20px,2.1vw,30px)}
}

/* =====================================================================
   ANIMATION PASS 3 - preloader failsafe, starting settle, icon motion
   ===================================================================== */

/* If JavaScript dies before it can run, the loading overlay must still
   clear on its own. When JS is healthy the node is removed long before
   this fires, so the two never fight. */
@keyframes preFailsafe{to{opacity:0;visibility:hidden}}
#pre{animation:preFailsafe .7s ease 3.6s forwards}
#pre.done{animation:none}
html.no-smooth #pre{animation:none}

/* Starting settle: the hero photograph relaxes into its resting crop
   once the preloader lifts. Resting state stays the designed 1.06. */
html.anim .hero-bg img{transform:scale(1.12);object-position:center 35%}
html.anim body.loaded .hero-bg img{transform:scale(1.06);transition:transform 1.8s var(--e);object-position:center 35%}

/* Icon motion -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){

/* burger morphs into a cross (JS toggles .x on the button) */
.burger.x i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* button arrows slide; the phone button rings instead */
.btn svg{transition:transform .32s var(--e)}
.btn:hover svg{transform:translateX(3px)}
.btn[href^="tel:"]:hover svg{transform:none;animation:ringTilt .55s ease-in-out}

/* header telephone number rings gently on hover */
.nav .tel svg{transition:transform .3s var(--e)}
.nav .tel:hover svg{animation:ringTilt .55s ease-in-out}
@keyframes ringTilt{0%,100%{transform:rotate(0)}22%{transform:rotate(11deg)}44%{transform:rotate(-9deg)}66%{transform:rotate(5deg)}88%{transform:rotate(-3deg)}}

/* checklist ticks draw themselves as the list reveals
   (stroke lives on the svg root, so target the shapes) */
.chk li svg path,.chk li svg polyline,.chk li svg line,.chk li svg circle{
  stroke-dasharray:28;stroke-dashoffset:28;transition:stroke-dashoffset .6s var(--e) .2s}
.chk.is-in li svg path,.chk.is-in li svg polyline,.chk.is-in li svg line,.chk.is-in li svg circle{
  stroke-dashoffset:0}

/* FAQ plus eases into a minus instead of snapping */
.fq .pm::before,.fq .pm::after{transition:transform .4s var(--e)}

/* drawing leaders and dimension line draw in with the sheet */
.sheet .dwg .lead-l{stroke-dasharray:60;stroke-dashoffset:60;
  transition:stroke-dashoffset .9s var(--e) .3s,stroke .45s}
.sheet.is-in .dwg .lead-l{stroke-dashoffset:0}
.sheet .dwg .dim{stroke-dasharray:420;stroke-dashoffset:420;
  transition:stroke-dashoffset 1.1s var(--e) .15s}
.sheet.is-in .dwg .dim{stroke-dashoffset:0}
}

/* =====================================================================
   POLISH PASS 4 - visibility, footer, premium sections, radius, mobile
   ===================================================================== */

/* -- 1. page-head text was never given a colour: it inherited near-black
      navy and sat unreadable on the dark photo. Fixed for every page. -- */
.phead h1{color:#FFFFFF}
.phead .lead{color:#C7D6E4}
.phead .crumb{color:#8FA6BB}
.phead .crumb a{color:#B7C9DA}
.phead .crumb s{color:var(--cy)}

/* -- 2. footer: giant outline wordmark retired, rhythm tightened,
      columns now rise in via data-r (added in the markup). -- */
.ftr-big{display:none}
.ftr-top{padding:clamp(40px,5vw,72px) 0 clamp(26px,3vw,40px)}
.ftr-b{margin-top:20px}

/* -- 3. process: flat columns become premium step cards -- */
.proc{border-top:0;gap:14px}
.pstep{border:1px solid var(--line);border-radius:14px;background:#fff;
  transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.pstep:last-child{border-right:1px solid var(--line)}
.pstep:nth-child(2n){border-right:1px solid var(--line)}
.pstep:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(8,25,43,.10);
  border-color:var(--st-300)}
.pstep::before{top:0;left:14px;right:14px;width:auto;height:3px;border-radius:3px}
.pstep .n{line-height:.9;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke-width:0}
.pstep:hover .n{-webkit-text-stroke-color:transparent}

/* -- 4. stats: gradient numerals, hairline dividers -- */
.stats{border-top:0}
.stats>*{padding:clamp(20px,2.6vw,34px) clamp(16px,2vw,28px);
  border-left:1px solid var(--line)}
.stats>*:first-child{border-left:0}
.stats .k{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* -- 5. gallery: rounded tiles, even gaps, premium hover -- */
.ggrid{gap:16px}
.gi{border-radius:16px;overflow:hidden;box-shadow:0 1px 0 rgba(8,25,43,.05);
  transition:box-shadow .5s var(--e)}
.gi img{transition:transform .8s var(--e)}
.gi:hover{box-shadow:0 22px 48px rgba(8,25,43,.16)}
.gi:hover img{transform:scale(1.05)}
.gi:focus-visible{outline:3px solid var(--bl);outline-offset:3px}
#lb img{border-radius:12px}

/* -- 6. round every content image; base radius steps up -- */
:root{--r:10px}
.wc{border-radius:16px;box-shadow:0 1px 0 rgba(8,25,43,.04);
  transition:box-shadow .5s var(--e)}
.wc img{border-radius:16px;transition:transform .8s var(--e);object-fit:cover;object-position:center center}
.wc:hover{box-shadow:0 18px 44px rgba(8,25,43,.14)}
.wc:hover img{transform:scale(1.04)}
.split .fig{border-radius:18px;overflow:hidden}
.split .fig img{border-radius:18px}
.card .cim,.card img{border-radius:14px}
.dimg{border-radius:16px;overflow:hidden}

/* -- 7. font clipping: condensed faces in tight masks were cropping
      ascenders and descenders; give the masks breathing room -- */
.d1{line-height:.98}
.d2{line-height:1.0}
.sw{padding:.04em 0 .12em;margin-bottom:-.12em}
.ln-w{padding:.06em 0 .10em;margin:-.06em 0 -.10em}

/* -- 8. mobile header: slimmer, blurred, uncrowded -- */
@media (max-width:760px){
  .nav .tel{display:none}
  .hdr{background:rgba(5,15,28,.86);-webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px)}
}

/* -- 9. mobile compression: inner pages were running long -- */
@media (max-width:760px){
  .phead{padding:calc(var(--hdr) + 52px) 0 58px}
  .pad{padding-top:clamp(32px,6.6vw,46px);padding-bottom:clamp(32px,6.6vw,46px)}
  .proc{grid-template-columns:1fr 1fr;gap:10px}
  .pstep{padding:20px 16px 22px}
  .stats .k{font-size:clamp(30px,8.4vw,40px)}
  .stats>*{padding:16px 14px}
  .ftr-top{padding:34px 0 20px}
  .gi{border-radius:12px}
}

/* =====================================================================
   V5 FINAL PASS - premium alignment, wins on source order
   ===================================================================== */

/* type scale final */
.d1{line-height:.94}
.d2{line-height:1.02}
.d3{line-height:1.08}

/* process cards final - align with v5 design */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.pstep{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  padding:clamp(28px,3.4vw,40px);transition:transform .5s var(--e2),box-shadow .5s var(--e2),border-color .5s var(--e2)}
.pstep:last-child{border-right:1px solid var(--line)}
.pstep:nth-child(2n){border-right:1px solid var(--line)}
.pstep:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--st-200)}
.pstep::before{top:0;left:0;right:0;width:auto;height:4px;border-radius:0}
.pstep .num{font-family:var(--display);font-weight:700;font-size:clamp(48px,5.6vw,72px);line-height:1;
  letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;margin-bottom:14px}
.pstep h3{margin-bottom:10px}

/* stats final */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(40px,5vw,72px)}
.stats .s{border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);padding:clamp(24px,3vw,34px) clamp(20px,2.4vw,30px);
  transition:transform .5s var(--e2),box-shadow .5s var(--e2)}
.stats .s:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.stats .k{font-size:clamp(40px,4.8vw,64px)}
.stats .v{margin-top:10px}

/* gallery final - uniform premium grid, no dead gaps */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}
.gi{grid-column:auto;aspect-ratio:4/3;border-radius:var(--r-lg);margin:0}
.gi:nth-child(7n+1),.gi:nth-child(7n+2),.gi:nth-child(7n+6),.gi:nth-child(7n+7),
.gi:nth-child(5n+1),.gi:nth-child(4n+1){grid-column:auto;aspect-ratio:4/3;height:auto}
.gi img{aspect-ratio:4/3}
.gi .go{inset:0;opacity:0;transform:none;transition:opacity .45s var(--e2);
  display:flex;align-items:flex-end;padding:clamp(16px,2vw,22px);
  background:linear-gradient(180deg,rgba(3,8,18,0) 40%,rgba(3,8,18,.88) 100%)}
.gi:hover .go{opacity:1;transform:none}
.gi .go b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* footer final */
.ftr-top{padding:clamp(64px,8vw,100px) 0 clamp(44px,5vw,64px)}
.ftr .fh{color:rgba(255,255,255,.45)}
.ftr .fcol a{color:rgba(255,255,255,.72)}
.ftr-b{margin-top:0}
.ftr-divider{margin:0;padding:0;border:0}
.ftr-b{border-top:1px solid rgba(255,255,255,.08)}

/* layers final */
.layers .dchips,.layers .layers-nav{display:flex;flex-direction:column;gap:10px;margin:0 0 24px}
.layers .dchips button,.layer-btn{display:flex;align-items:center;gap:16px;width:100%;padding:15px 18px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);
  transition:all .3s var(--e2);cursor:pointer;text-align:left;color:#fff}
.layer-btn:hover{border-color:rgba(0,212,230,.5);transform:translateX(4px)}
.layer-btn.active{border-color:var(--cy);background:rgba(0,212,230,.08);box-shadow:0 0 0 1px rgba(0,212,230,.2)}
.layer-btn .btn-num{font-family:var(--display);font-weight:700;font-size:24px;color:rgba(255,255,255,.35);min-width:44px}
.layer-btn.active .btn-num{color:var(--cy)}
.layer-btn .btn-name{font-family:var(--display);font-weight:600;font-size:16px;color:#fff}
.layer-tag{display:inline-block;margin-bottom:14px;padding:7px 14px;background:rgba(0,212,230,.1);
  border:1px solid rgba(0,212,230,.25);color:var(--cy);font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;border-radius:100px}
.layer-title{color:#fff}
.layer-desc{color:rgba(255,255,255,.8);min-height:3.2em;transition:opacity .18s ease,transform .18s ease}
.layer-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px}
.layer-specs .spec-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1)}
.layer-specs .spec-label{color:rgba(255,255,255,.45)}
.layer-specs .spec-value{color:#fff}
.layer-image{border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9}
.layer-image img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease,transform .6s var(--e2)}
.layer-image:hover img{transform:scale(1.03)}

/* layers svg colors final */
.layer-svg .band{fill:#0E2438;stroke:#2C4A6B;stroke-width:1.4;transition:all .35s var(--e2)}
.layer-svg g.on .band,.layer-svg g.active .band{fill:url(#layerGrad);stroke:#00E6CC;stroke-width:2.2;
  filter:drop-shadow(0 0 10px rgba(0,212,230,.35))}
.layer-svg .hl{stroke:rgba(255,255,255,.18)}
.layer-svg g.on .hl,.layer-svg g.active .hl{stroke:rgba(255,255,255,.7)}
.layer-svg .lead-l{stroke:#2C4A6B}
.layer-svg g.on .lead-l,.layer-svg g.active .lead-l{stroke:#00E6CC}
.layer-svg .lb{font-family:var(--mono);font-size:14px;fill:#8FA6BB;letter-spacing:.08em;transition:fill .3s}
.layer-svg g.on .lb,.layer-svg g.active .lb{fill:#fff}
.layer-svg .nx{font-family:var(--mono);font-size:13px;fill:#5E7A94;transition:fill .3s}
.layer-svg g.on .nx,.layer-svg g.active .nx{fill:var(--cy)}
.layer-svg .dim{stroke:#22405E}
.layer-svg .dimtx{font-family:var(--mono);font-size:11px;fill:#5E7A94;letter-spacing:.08em}

/* hero final - settle animation respects new scale */
html.anim .hero-bg img{transform:scale(1.14);object-position:center 35%}
html.anim body.loaded .hero-bg img{transform:scale(1.08);transition:transform 2s var(--e);object-position:center 35%}

/* cta final */
.cta .cta-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:100px;backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.cta .cta-badge i{width:22px;height:1px;background:var(--grad);display:inline-block}

/* buttons final - no movement bugs, clean premium motion */
.btn{will-change:transform}
.btn.pri:hover{transform:translateY(-3px)}
.btn.out:hover{transform:translateY(-3px)}

/* faq final */
.fq{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:14px}
.faq .fq.is-in{opacity:1;transform:none}
.fq .a{transition:max-height .5s var(--e2)}
.fq.open{border-color:rgba(0,102,255,.35);box-shadow:var(--shadow-md)}

/* responsive final */
@media (max-width:1080px){
  .proc{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ggrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .proc{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .stats .s{padding:20px 18px;border-radius:var(--r)}
  .stats .k{font-size:clamp(34px,9vw,44px)}
  .ggrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .gi{aspect-ratio:1/1}
  .gi img{aspect-ratio:1/1}
  .layers .layers-nav{flex-direction:row;flex-wrap:wrap;gap:10px}
  .layer-btn{flex:1 1 calc(50% - 5px);flex-direction:column;gap:6px;text-align:center;padding:14px 10px}
  .layer-btn:hover{transform:none}
  .layer-btn .btn-num{min-width:0;font-size:20px}
  .layer-btn .btn-name{font-size:13.5px}
  .layer-specs{grid-template-columns:1fr 1fr}
  .ftr-top{grid-template-columns:1fr;gap:40px}
  .ftr-brand{text-align:center}
  .ftr-brand .fl{margin-left:auto;margin-right:auto}
  .ftr .fcol{text-align:center}
  .ftr .fcol a::before{display:none}
  .ftr .fcol a:hover{padding-left:0}
  .ftr-contact-item{text-align:left}
  .ftr-b{flex-direction:column;text-align:center}
}
@media (max-width:480px){
  .layer-btn{flex:1 1 100%}
  .layer-specs{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}

/* =====================================================================
   V6 PASS - premium refinement, medium type, smooth motion
   ===================================================================== */

/* --- TYPE: medium scale, never oversized --------------------------- */
:root{
  --duration-fast:200ms;
  --duration-base:350ms;
  --duration-slow:600ms;
  --e:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.25,.8,.25,1);
}
.d1{font-size:clamp(38px,5.6vw,76px);line-height:1.02;letter-spacing:-.022em;font-weight:800}
.d2{font-size:clamp(30px,4vw,54px);line-height:1.08;letter-spacing:-.02em;font-weight:800}
.d3{font-size:clamp(24px,2.6vw,36px);line-height:1.12;letter-spacing:-.018em;font-weight:700}
.d4{font-size:clamp(17px,1.3vw,20px);font-weight:700}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.65}
.big{font-size:clamp(24px,2.6vw,36px)!important}
body{font-size:16.5px;line-height:1.7}
.hero h1{font-size:clamp(32px,5vw,56px)}
.hero .lead{font-size:clamp(16px,1.4vw,19px)}
.phead h1{font-size:clamp(36px,5vw,66px)}
.stmt .big{font-size:clamp(24px,2.6vw,36px)}
.shead .tt{max-width:26ch}

/* --- HERO: calmer, no scroll-down gadget --------------------------- */
.hero{min-height:clamp(620px,88vh,900px)}
.hero-scroll{display:none!important}
.hero-badge{padding:9px 16px}
.hero-cta .btn{min-width:0}
.hero-stats{gap:clamp(24px,4vw,48px)}
.hero-stat .num{font-size:clamp(28px,3.4vw,44px)}

/* --- BUTTONS: smooth, never instant -------------------------------- */
.btn{transition:color .35s var(--e2),background-color .35s var(--e2),border-color .35s var(--e2),box-shadow .45s var(--e2),transform .35s var(--e2)}
.btn::before{transition:transform .45s var(--e2)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.99);transition-duration:.12s}
.btn svg{transition:transform .35s var(--e2)}
.lnk{transition:color .3s var(--e2)}
.lnk svg{transition:transform .35s var(--e2)}
.lnk::after{transition:transform .45s var(--e2)}

/* --- CARDS: smooth hover, smaller numerals, consistent colour ------ */
.svc-card .num,.pstep .num{font-size:clamp(34px,3.4vw,48px);font-weight:800;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:12px}
.svc-card .icon,.pstep .icon{width:50px;height:50px;border-radius:12px}
.svc-card .icon svg,.pstep .icon svg{width:24px;height:24px}
.svc-card,.pstep,.tcard{transition:transform .5s var(--e2),box-shadow .5s var(--e2),border-color .4s var(--e2)}
.svc-card:hover,.pstep:hover{transform:translateY(-5px)}
.svc-card .icon,.pstep .icon{transition:background .4s var(--e2),transform .45s var(--e2)}
.svc-card:hover .icon,.pstep:hover .icon{transform:scale(1.06) rotate(-2deg)}

/* --- 6 LAYERS: premium split, strong identity ----------------------- */
.layers-grid{grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);align-items:stretch}
.layers-visual{position:sticky;top:calc(var(--hdr) + 32px);background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,32px);
  display:flex;align-items:center;justify-content:center}
.layer-svg{max-width:none;width:100%}
.layers-nav{margin:0 0 22px}
.layer-btn{padding:14px 16px;border-radius:12px}
.layer-btn .btn-num{font-size:20px;min-width:38px}
.layer-btn .btn-name{font-size:15px}
.layer-tag{margin-bottom:12px}
.layer-title{font-size:clamp(24px,2.4vw,32px)}
.layer-desc{font-size:16px;min-height:3.4em}
.layer-specs{gap:12px;margin-bottom:20px}
.layer-image{aspect-ratio:16/9}

/* --- STATS: consistent premium -------------------------------------- */
.stats .k{font-size:clamp(36px,4vw,56px)}
.stats .s{transition:transform .5s var(--e2),box-shadow .5s var(--e2)}

/* --- FOOTER: small hover line, refined ------------------------------ */
.ftr .fcol a{padding:8px 0;font-size:15px}
.ftr .fcol a::before{width:20px;height:2px;bottom:12px}
.ftr .fcol a:hover{padding-left:0}
.ftr .fcol a:hover::before{width:20px}
.ftr .fh{margin-bottom:16px}
.ftr .fcol a{transition:color .3s var(--e2)}
.ftr-social a{transition:transform .45s var(--e-spring),background .35s var(--e2),border-color .35s var(--e2),color .3s var(--e2)}
.ftr-contact-item{transition:border-color .4s var(--e2),background .35s var(--e2),transform .45s var(--e2)}

/* --- GALLERY: label contrast ---------------------------------------- */
.gi .go{background:linear-gradient(180deg,rgba(3,8,18,0) 34%,rgba(3,8,18,.92) 100%);padding:18px 20px}
.gi .go b{font-size:10.5px;letter-spacing:.16em;color:#fff;background:rgba(0,102,255,.35);
  padding:6px 10px;border-radius:6px;backdrop-filter:blur(6px)}
.wc .ov{background:linear-gradient(180deg,rgba(3,8,18,0) 38%,rgba(3,8,18,.9) 100%)}
.wc .ov .l{color:#fff;background:rgba(0,102,255,.35);display:inline-block;padding:5px 9px;border-radius:6px;
  backdrop-filter:blur(6px);margin-bottom:8px}

/* --- MOTION: everything slower and smoother ------------------------- */
[data-r].is-in{transition:opacity 1s var(--e),transform 1.1s var(--e)}
[data-r]{opacity:1;transform:none}
.mask>*{transition:transform 1.15s var(--e)}
.sw i{transition:transform 1.05s var(--e)}
.gi{transition:opacity .8s var(--e2),transform .8s var(--e2),box-shadow .5s var(--e2)}
.fq{transition:border-color .4s var(--e2),box-shadow .5s var(--e2)}
.fq .pm::before,.fq .pm::after{transition:transform .45s var(--e2),background .3s var(--e2)}
.fq .a{transition:max-height .6s var(--e2)}
.layer-btn{transition:border-color .35s var(--e2),background .35s var(--e2),transform .45s var(--e2),box-shadow .4s var(--e2)}
.layer-desc{transition:opacity .3s ease,transform .3s var(--e2)}
.hero-badge{animation:badgeIn .9s var(--e2) .25s both}
.hero h1{animation-duration:1.1s}
.hero .lead{animation-duration:1.1s}
.hero-cta{animation-duration:1.1s}
.hero-stats{animation-duration:1.1s}
@keyframes badgeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* --- FAQ: refined ---------------------------------------------------- */
.fq .q{padding:22px 24px}
.fq .qt{font-size:clamp(17px,1.6vw,22px);font-weight:700}
.fq .a .inn{padding:0 24px 24px}

/* --- responsive final ------------------------------------------------ */
@media (max-width:1080px){
  .layers-grid{grid-template-columns:1fr}
  .layers-visual{position:relative;top:auto;max-width:520px;margin:0 auto}
}
@media (max-width:760px){
  .d1,.hero h1{font-size:clamp(28px,7vw,40px)}
  .d2{font-size:clamp(27px,7vw,36px)}
  .phead h1{font-size:clamp(30px,8vw,42px)}
  .hero{min-height:auto}
  .hero-stats{gap:20px}
  .layer-btn .btn-name{font-size:13px}
  .fq .q{padding:18px 18px}
  .fq .a .inn{padding:0 18px 18px}
}

/* =====================================================================
   V7 PASS - logo scale, nav type, line fixes, pills, zoom, gradient
   ===================================================================== */

/* --- remove top progress bar ---------------------------------------- */
#prog{display:none!important}

/* --- premium gradient refinement ------------------------------------ */
:root{
  --grad:linear-gradient(100deg,#0047E6 0%,#0074FF 48%,#00C6E6 100%);
  --grad-v:linear-gradient(180deg,#0047E6 0%,#00C6E6 100%);
}

/* --- header: bigger logo, premium nav type -------------------------- */
.logo img{height:52px}
.hdr.scr .logo img{height:46px}
.nav .lk a{font-family:var(--ui);font-weight:600;font-size:14px;letter-spacing:.005em;
  text-transform:none;padding:9px 13px;border-radius:8px}
.nav .lk a::after{left:13px;right:13px;bottom:4px;height:2px;border-radius:2px}
.nav .tel{font-family:var(--ui);font-weight:700;font-size:14.5px;letter-spacing:0}
.nav .tel svg{stroke:#00d4e6}
.tick span{font-size:10px}
.hero-badge span{font-family:var(--ui);font-weight:600;letter-spacing:.06em}

/* --- THE LINE FIX: underlines hug the text, never stretch ----------- */
.lnk{width:max-content;max-width:100%}
.lnk::after{width:100%;height:2px;border-radius:2px}
.rt .lnk,.svc-card .lnk,.card .lnk,div>.lnk{justify-self:start}
.stmt .rt .lnk{width:max-content}

/* --- footer: bigger logo + clean link reveal ------------------------ */
.ftr img.fl{height:62px}
.ftr .fcol a{width:max-content;max-width:100%}
.ftr .fcol a::before{width:100%;height:2px;border-radius:2px;bottom:6px;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e2)}
.ftr .fcol a:hover::before{transform:scaleX(1)}
.ftr .fh{font-family:var(--ui);font-weight:700;letter-spacing:.14em}

/* --- work grid + gallery: pills hug text, slight zoom --------------- */
.wc .ov{align-items:flex-start}
.wc .ov .l{width:max-content;align-self:flex-start}
.wc img{transform:scale(1.07);transition:transform 1s var(--e2);object-fit:cover;object-position:center center}
.wc:hover img{transform:scale(1.12)}
.gi .go{align-items:flex-end}
.gi .go b{width:max-content}
.gi img{transform:scale(1.07);transition:transform 1s var(--e2)}
.gi:hover img{transform:scale(1.13)}

/* --- 6 layers: tag in normal flow, never overlapping ---------------- */
.layer-tag{position:static!important;display:inline-block;margin:0 0 14px}
.layers-panel .dchips{margin-bottom:18px}
.layers-grid{align-items:start}
.layers-visual{align-self:start}
.layers-visual .layer-svg{margin:0 auto}

/* --- buttons: silk-smooth ------------------------------------------- */
.btn{transition:color .4s var(--e2),background-color .4s var(--e2),border-color .4s var(--e2),
  box-shadow .5s var(--e2),transform .4s var(--e2)}
.btn::before{transition:transform .5s var(--e2)}
.btn svg{transition:transform .4s var(--e2)}
.btn:hover{transform:translateY(-2px)}
.gfilter button{transition:all .4s var(--e2)}
.ftr-social a{transition:transform .5s var(--e-spring),background .4s var(--e2),border-color .4s var(--e2),color .35s var(--e2)}
.ftr-contact-item{transition:border-color .45s var(--e2),background .4s var(--e2),transform .5s var(--e2)}
.layer-btn{transition:border-color .4s var(--e2),background .4s var(--e2),transform .5s var(--e2),box-shadow .45s var(--e2)}
.svc-card,.pstep{transition:transform .55s var(--e2),box-shadow .55s var(--e2),border-color .45s var(--e2)}
.svc-card .icon,.pstep .icon{transition:background .45s var(--e2),transform .5s var(--e2)}
.fq{transition:border-color .45s var(--e2),box-shadow .5s var(--e2)}

/* --- responsive ------------------------------------------------------ */
@media (max-width:760px){
  .logo img,.hdr.scr .logo img{height:44px}
  .ftr img.fl{height:52px}
  .nav .lk a{font-size:13px;padding:8px 10px}
}

/* =====================================================================
   V8 PASS - footer line rebuild, mobile fixes, sliders, header polish
   ===================================================================== */

/* --- 1. FOOTER LINKS: line animation rebuilt (bulletproof) ---------- */
.ftr .fcol a::before{display:none!important;content:none!important}
.ftr .fcol a{
  background-image:linear-gradient(90deg,var(--bl),var(--cy));
  background-size:0% 2px;
  background-repeat:no-repeat;
  background-position:left calc(100% - 4px);
  transition:background-size .5s var(--e2),color .3s var(--e2),transform .4s var(--e2);
}
.ftr .fcol a:hover{background-size:100% 2px;color:#fff}
.ftr .fcol a:hover{padding-left:0}

/* --- 2. HEADER: logo never shrinks on scroll ------------------------ */
.hdr.scr .logo img{height:52px!important}
@media (max-width:760px){
  .logo img,.hdr.scr .logo img{height:46px!important}
}

/* --- 3. FOOTER LOGO: medium size everywhere -------------------------- */
.ftr img.fl{width:240px;max-width:100%;height:auto;display:block;margin-bottom:16px}
.ftr .fl-link{display:inline-block}
@media (max-width:760px){.ftr img.fl{width:200px;height:auto}}

/* --- 4. MOBILE: hide layers section for now -------------------------- */
@media (max-width:760px){
  section.layers{display:none!important}
}

/* --- 5. MOBILE STATS: no crop, clean cards --------------------------- */
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-left:0;margin-right:0}
  .stats>*{min-width:0;width:auto;border:1px solid var(--line);border-left:1px solid var(--line);
    border-radius:var(--r);padding:18px 16px;box-shadow:none}
  .stats .k{font-size:clamp(30px,8vw,40px)}
  .stats .v{font-size:10px;letter-spacing:.08em;max-width:none}
}

/* --- 6. MOBILE WORK SLIDER: smooth, spaced, no crop ------------------ */
@media (max-width:760px){
  .wgrid{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    touch-action:pan-x;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);
    grid-auto-rows:auto;grid-template-columns:none;
    margin:0 calc(var(--gut)*-1);padding:4px var(--gut) 10px;
    scrollbar-width:none;-ms-overflow-style:none}
  .wgrid::-webkit-scrollbar{display:none}
  .wc{flex:0 0 82%;min-width:0;scroll-snap-align:start;aspect-ratio:4/3}
  .wc.f{flex:0 0 86%}
  .wc img{transform:scale(1.07);object-fit:cover;object-position:center center}
  .rail-hint{display:flex;justify-content:center}
}

/* --- 7. MOBILE FAQ: smooth plus icon --------------------------------- */
.fq .pm{transition:background .4s var(--e2),transform .5s var(--e2)}
.fq .pm::before,.fq .pm::after{transition:transform .5s var(--e2),opacity .35s var(--e2),background .3s var(--e2)}
.fq.open .pm{transform:rotate(180deg);background:var(--grad-subtle)}
.fq.open .pm::before{transform:rotate(180deg)}
@media (max-width:760px){
  .fq .pm{width:26px;height:26px}
  .fq .pm::before{width:13px;height:2px}
  .fq .pm::after{width:2px;height:13px}
}

/* --- 8. MOBILE FOOTER: links in rows --------------------------------- */
@media (max-width:760px){
  .ftr .fcol ul,
  .ftr .fcol{width:100%}
  .ftr .fcol a{
    display:inline-flex;margin:0 18px 6px 0;
    background-position:left calc(100% - 2px);
  }
  .ftr .fcol{display:flex;flex-wrap:wrap;gap:0;justify-content:flex-start}
  .ftr .fh{width:100%}
  .ftr .fcol .fh{margin-bottom:14px}
  /* contact cards full width below */
  .ftr-contact{display:grid;gap:10px}
}

/* --- 9. CONTACT FORM: premium fields + open animation ---------------- */
.form{animation:formIn .9s var(--e2) .15s both}
@keyframes formIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fld{position:relative}
.fld label{transition:color .3s var(--e2)}
.fld input,.fld select,.fld textarea{
  transition:border-color .4s var(--e2),box-shadow .45s var(--e2),background .3s var(--e2),transform .3s var(--e2)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--st-300)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--bl);box-shadow:0 0 0 4px rgba(0,102,255,.10);background:#fff;transform:translateY(-1px)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--tx3);opacity:.7;transition:opacity .3s}
.fld input:focus::placeholder,.fld textarea:focus::placeholder{opacity:.4}
.form .btn{width:100%;justify-content:center;padding:17px 32px}
.form .btn.pri{box-shadow:0 10px 30px rgba(0,102,255,.25)}
.finfo div{transition:background .35s var(--e2)}
.finfo a{transition:color .3s var(--e2)}

/* --- 10. BUTTONS: final polish --------------------------------------- */
.btn.pri{background-size:150% 100%;background-position:0% 0}
.btn.pri:hover{background-position:100% 0}
.btn{letter-spacing:.14em}

/* --- mobile contact cards: left aligned, cleaner ---------------------- */
@media (max-width:480px){
  .ftr-contact-item{flex-direction:row;align-items:center;text-align:left;gap:14px}
  .ftr-contact-icon{margin:0}
}


/* --- ELEMENTOR EDITOR & FAILSAFE VISIBILITY --- */
body.elementor-editor-active [data-r],
.elementor-editor-preview [data-r],
.elementor-editor-active [data-split] .sw i,
.no-smooth [data-r],
.no-smooth [data-split] .sw i{transform:none;opacity:1;display:inline-block}
.ftr {
  position: relative;
}


/* ==========================================================================
   UNIVERSAL VISIBILITY & FAILSAFE OVERRIDES
   ========================================================================== */
[data-r],
[data-split],
[data-split] .sw,
[data-split] .sw i,
.gi,
.svc-card,
.pstep,
.stmt,
.stats,
.shead,
.fq,
.ftr-top > div {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Smooth micro-hover transitions */
.svc-card:hover {
  transform: translateY(-4px) !important;
}
.gi:hover img {
  transform: scale(1.05);
}

/* =====================================================================
   V9 PASS - client review fixes
   Hero crop, stat/service card polish, icon crispness, layer numbers,
   6-layers identity fix, work/gallery crop, mobile footer rows,
   preloader logo, footer bottom bar. Appended last so it always wins.
   ===================================================================== */

:root{--r-xl:24px}

/* --- HERO: stop the heavy zoom-crop, show the actual roof ------------ */
.hero-bg img{transform:scale(1.05);object-position:center 30%}
html.anim .hero-bg img{transform:scale(1.12);object-position:center 30%}
html.anim body.loaded .hero-bg img{transform:scale(1.05);transition:transform 2.2s var(--e);object-position:center 30%}

/* --- PRELOADER: medium logo ------------------------------------------ */
.pl-mk{width:min(300px,64vw)}

/* --- STATS CARDS: smooth premium lift on hover ----------------------- */
.stats .s{transition:transform .55s var(--e),box-shadow .55s var(--e),border-color .45s var(--e)}
.stats .s:hover{transform:translateY(-6px)!important;box-shadow:var(--shadow-lg);border-color:var(--st-200)}

/* --- SERVICE + PROCESS CARDS: rounded edges, crisp icons, even numerals */
.svc-card{border-radius:var(--r-xl)}
.svc-card:hover{transform:translateY(-6px)!important;box-shadow:0 24px 48px rgba(5,15,28,.16)}
.pstep:hover{transform:translateY(-6px)!important}
.tcard:hover{transform:translateY(-4px)!important}
/* numerals keep the same gradient at rest and on hover, on every card */
.svc-card .num,.pstep .num,
.svc-card:hover .num,.pstep:hover .num{
  opacity:1!important;color:inherit;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
/* icons: no rotate/scale while hovering - that rasterised the vector and
   looked blurred. Colour and glow only, vector stays perfectly crisp.  */
.svc-card .icon,.pstep .icon{transition:background .45s var(--e2),box-shadow .45s var(--e2)}
.svc-card:hover .icon,.pstep:hover .icon{background:var(--grad);transform:none;
  box-shadow:0 12px 32px rgba(0,102,255,.25)}
.svc-card:hover .icon svg,.pstep:hover .icon svg{stroke:#fff}
.svc-card .icon svg,.pstep .icon svg{transform:none!important;shape-rendering:geometricPrecision}

/* --- 6 LAYERS: the identity section, fixed and strengthened ---------- */
/* the svg was forced into a tall box so the drawing floated tiny inside
   an empty panel; restore its true 760:432 drawing ratio */
.layer-svg{aspect-ratio:760/432;max-width:560px;height:auto}
.layers-visual{gap:0}
/* premium frame + glow for the drawing */
.layers-visual{background:linear-gradient(180deg,rgba(0,102,255,.07),rgba(0,212,230,.03));
  border:1px solid rgba(0,212,230,.18);box-shadow:0 30px 80px rgba(3,8,18,.5),inset 0 1px 0 rgba(255,255,255,.06)}
/* active layer button gets the full gradient treatment */
.layer-btn.active{background:linear-gradient(135deg,rgba(0,102,255,.16) 0%,rgba(0,212,230,.10) 100%);
  border-color:var(--cy);box-shadow:0 0 0 1px rgba(0,212,230,.35),0 12px 32px rgba(0,102,255,.18)}
.layer-btn.active .btn-num{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* it was hidden on mobile "for now" - it is the identity, bring it back */
@media (max-width:760px){
  section.layers{display:block!important}
}

/* --- WORK + GALLERY IMAGES: no resting zoom, subject visible --------- */
.wc img,.gi img{transform:none;object-position:center center}
.wc:hover img{transform:scale(1.06)}
.gi:hover img{transform:scale(1.06)}
@media (max-width:760px){
  .wc img{transform:none}
  .wc:hover img{transform:none}
  .gi{aspect-ratio:4/3}
  .gi img{aspect-ratio:4/3}
}

/* --- FOOTER BOTTOM BAR: was unstyled (markup vs css class mismatch) -- */
.ftr-btm{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.08);padding:22px 0;position:relative;z-index:2}
.ftr-btm .copy{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.45);line-height:1.7}
.ftr-legal{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.ftr-legal a{color:rgba(255,255,255,.6);transition:color .3s var(--e2)}
.ftr-legal a:hover{color:#fff}

/* --- MOBILE FOOTER: compact premium rows, centred, calm spacing ------ */
@media (max-width:760px){
  .ftr-top{grid-template-columns:1fr;gap:30px;padding:44px 0 26px;text-align:center}
  .ftr-top>div{display:flex;flex-direction:column;align-items:center}
  .ftr img.fl{width:190px;height:auto;margin:0 auto 14px}
  .ftr .fdesc{margin-left:auto;margin-right:auto;font-size:14.5px;line-height:1.65}
  .ftr-contact-items{width:100%;max-width:440px;margin:18px auto 0!important;gap:8px!important}
  .ftr-contact-item{flex-direction:row;align-items:center;gap:12px;text-align:left;padding:12px 14px}
  .ftr-contact-icon{width:34px;height:34px;margin:0}
  .ftr-contact-icon svg{width:17px;height:17px}
  .ftr-contact-label{margin-bottom:1px;font-size:9px}
  .ftr-contact-text{font-size:14px}
  /* link groups become centred wrapped pill rows instead of a tall stack */
  .ftr .fcol{width:100%;text-align:center;border-top:1px solid rgba(255,255,255,.07);padding-top:20px}
  .ftr .fcol .fh{margin-bottom:12px}
  .ftr .fcol ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .ftr .fcol li{display:inline-flex}
  .ftr .fcol a{display:inline-flex;align-items:center;padding:7px 13px;margin:0;
    font-size:12.5px;border:1px solid rgba(255,255,255,.12);border-radius:100px;
    background-image:none;color:rgba(255,255,255,.72);
    transition:color .3s var(--e2),border-color .3s var(--e2),background .3s var(--e2)}
  .ftr .fcol a:hover,.ftr .fcol a:active{color:#fff;border-color:rgba(0,212,230,.45);
    background:rgba(0,102,255,.12);padding-left:13px}
  .ftr-btm{flex-direction:column;justify-content:center;text-align:center;gap:10px;
    padding:18px 0 96px}
}

/* =====================================================================
   V10 PASS - layers layout rebuild, compact mobile footer, Lenis
   ===================================================================== */

/* --- LENIS smooth scroll helper rules -------------------------------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* --- 6 LAYERS: drawing removed, details above photo, buttons-only rail --
   The old SVG drawing panel is retired (display:none keeps stored
   Elementor markup 100% compatible). The panel is flattened with
   display:contents so its children become grid items we can place:
   LEFT column = tag, title, desc, specs stacked ABOVE the photo;
   RIGHT column = the 6 layer buttons only, pinned sticky so the rail
   stays fixed on screen while the details column scrolls. */
.layers-visual{display:none!important}

@media (min-width:761px){
  .layers-grid{grid-template-columns:1.05fr 1fr;column-gap:clamp(28px,3.6vw,56px);row-gap:0;align-items:start}
  .layers-panel{display:contents}
  .layer-tag{grid-column:1;grid-row:1;justify-self:start;margin-bottom:10px}
  .layer-title{grid-column:1;grid-row:2;margin:0 0 12px}
  .layer-desc{grid-column:1;grid-row:3;margin:0 0 18px}
  .layer-specs{grid-column:1;grid-row:4;margin:0 0 18px}
  .layer-image{grid-column:1;grid-row:5;aspect-ratio:16/10;height:auto;min-height:0;width:100%;
    border-radius:var(--r-xl);border:1px solid rgba(0,212,230,.18);
    box-shadow:0 30px 80px rgba(3,8,18,.5)}
  .layer-image img{height:100%;object-fit:cover;object-position:center 40%}
  .layers-nav,.layers .dchips{grid-column:2;grid-row:1 / span 5;width:100%;max-width:none;margin-bottom:0;
    position:sticky;top:calc(var(--hdr) + 24px);align-self:center}
}

/* keep photo subjects framed on every card across all breakpoints */
.wc img,.gi img,.layer-image img{object-position:center 40%}

/* mobile: single column - tag, buttons, then details, photo last */
@media (max-width:760px){
  .layers-panel{display:flex;flex-direction:column}
  .layer-tag{order:-2;align-self:center;margin-bottom:14px}
  .layers .dchips,.layers-nav{order:-1;display:flex;flex-wrap:wrap;gap:8px}
  .layer-btn{flex:1 1 calc(50% - 4px);flex-direction:row;align-items:center;text-align:left;gap:10px;padding:11px 12px}
  .layer-btn .btn-num{font-size:16px;min-width:0}
  .layer-btn .btn-name{font-size:12.5px;margin-bottom:0;line-height:1.25}
  .layer-image{margin-top:8px;aspect-ratio:16/10}
  .layer-image img{height:100%;object-fit:cover}
}

/* --- MOBILE FOOTER: tighter rows, smaller footprint ------------------ */
@media (max-width:760px){
  .ftr-top{gap:22px;padding:36px 0 18px}
  .ftr img.fl{width:160px;margin-bottom:10px}
  .ftr .fdesc{font-size:13.5px;line-height:1.55}
  .ftr-contact-items{margin:14px auto 0!important;gap:6px!important;max-width:400px}
  .ftr-contact-item{padding:9px 12px;gap:10px}
  .ftr-contact-icon{width:30px;height:30px}
  .ftr-contact-icon svg{width:15px;height:15px}
  .ftr-contact-text{font-size:13px}
  .ftr .fcol{padding-top:14px}
  .ftr .fcol .fh{margin-bottom:9px;font-size:10px}
  .ftr .fcol ul{gap:6px}
  .ftr .fcol a{padding:6px 11px;font-size:12px}
  .ftr .fcol a:hover,.ftr .fcol a:active{padding-left:11px}
  /* The 92px bottom padding reserved room for the sticky mobile CTA bar
     (.mbar), which is no longer rendered in any template - it only left a
     dead band at the end of every page on mobile. 22px matches the
     breathing room the footer already has on desktop. */
  .ftr-btm{padding:14px 0 22px;gap:8px}
  .ftr-btm .copy{font-size:9.5px}
  .ftr-legal{font-size:9.5px}
}

/* =====================================================================
   V11 PASS - final polish
   Consolidates the header logo sizing (previously declared 10x across
   earlier passes), rebuilds the top info strip for mobile, centres the
   preloader logo, adds the testimonial star rating + long-quote
   handling, and tightens contact-form interaction states.
   Appended last so it is the authoritative declaration for these rules.
   ===================================================================== */

/* --- 1. HEADER LOGO -------------------------------------------------
   Source image is 640x389 (ratio 1.65) and carries a two-line lockup,
   so it needs real height to stay legible. One rule for both states -
   the logo deliberately does not shrink on scroll.                    */
.logo img,
.hdr.scr .logo img{height:58px;width:auto;max-width:none}
@media (max-width:1080px){
  .logo img,.hdr.scr .logo img{height:50px}
}
@media (max-width:760px){
  .logo img,.hdr.scr .logo img{height:46px}
}
@media (max-width:420px){
  .logo img,.hdr.scr .logo img{height:42px}
}

/* --- 2. TOP INFORMATION STRIP ---------------------------------------
   Desktop: informational items grouped left with hairline separators,
   the email pushed right as the actionable item.                      */
.tick .in{justify-content:flex-start;gap:0}
.tick span{gap:8px}
.tick span:nth-child(-n+2)::after{content:'';display:inline-block;width:1px;height:10px;
  background:rgba(255,255,255,.16);margin:0 clamp(14px,2vw,26px)}
.tick span:last-child{margin-left:auto}
.tick span:last-child a{color:#D8E4EE}
.tick span:last-child a:hover{color:#fff}

/* Below 1080 the four items no longer fit on one line - at 900px the
   email was overflowing by ~64px and being silently clipped by
   .tick{overflow:hidden}. Drop items by priority instead, keeping the
   tappable email longest since the mobile nav has no contact
   affordance of its own. Display is set explicitly at every step so
   this does not depend on the older nth-child rules further up. */
@media (max-width:1080px){
  .tick span:nth-child(3){display:none}          /* city list - longest */
  .tick span:nth-child(2)::after{display:none}
}
@media (max-width:760px){
  .tick .in{height:32px;justify-content:center;gap:0}
  .tick span{font-size:9px;letter-spacing:.1em}
  .tick span:nth-child(2),
  .tick span:nth-child(3){display:none}
  .tick span:first-child{display:inline-flex}
  .tick span:last-child{display:inline-flex;margin-left:0}
  .tick span:nth-child(-n+2)::after{display:none}
  .tick span:first-child::after{content:'';display:inline-block;width:1px;height:9px;
    background:rgba(255,255,255,.18);margin:0 12px}
}
@media (max-width:430px){
  /* Both no longer fit without wrapping - keep the actionable one. */
  .tick span:first-child{display:none}
  .tick span:last-child{display:inline-flex;margin-left:0}
  .tick span{font-size:9.5px;letter-spacing:.06em}
}

/* --- 3. PRELOADER: optically centre the logo ------------------------
   The block (logo + bar + label) was centred, which left the logo
   itself sitting ~30px above centre. Nudge the group down so the logo
   reads as centred, bar and label below it.                          */
.pl-in{transform:translateY(clamp(16px,2.6vh,30px))}
.pl-mk{margin:0 auto 26px}

/* --- 4. TESTIMONIALS: proper review card ----------------------------
   White rounded card kept, but rebuilt: crisp SVG stars instead of text
   glyphs, the quote mark demoted to a corner watermark, and a footer
   with an initial avatar so the attribution reads as designed rather
   than as a leftover line of text.                                    */
.tcard{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(26px,2.5vw,34px);border-radius:var(--r-lg);
  border:1px solid var(--line);background:#fff}
.tcard .tq{position:absolute;top:-18px;right:14px;z-index:0;pointer-events:none;
  font-family:var(--display);font-weight:700;font-size:120px;line-height:1;
  color:var(--nv-900);opacity:.05}
.tcard .stars{display:flex;gap:3px;margin-bottom:16px;position:relative;z-index:1}
.tcard .stars svg{width:15px;height:15px;fill:#E8A33B;display:block}
.tcard blockquote{margin:0;position:relative;z-index:1;flex:1;
  font-size:clamp(14.5px,1.1vw,15.5px);line-height:1.75;color:var(--tx)}
.tcard .who{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.tcard .who .av{flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:var(--nv-900);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.01em}
.tcard .who .wt{display:flex;flex-direction:column;min-width:0}
.tcard .who b{font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-.01em;color:var(--nv-900);line-height:1.2}
.tcard .who i{font-style:normal;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-top:5px;
  line-height:1.35}
@media (max-width:760px){
  .tcard .tq{font-size:96px;top:-14px}
  .tcard .who .av{width:38px;height:38px;font-size:15px}
}
.tcard .who b{font-size:16.5px}
/* the UA default blockquote margin (1em 40px) was indenting the quote out
   of line with the stars above it and the name below it */
.tcard blockquote{margin:0}
.tcard .who i{color:var(--tx3)}

/* --- 5. CONTACT FORM: clearer, calmer interaction states ------------- */
.fld input,.fld select,.fld textarea{transition:border-color .28s var(--e2),
  box-shadow .28s var(--e2),background-color .28s var(--e2)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--bl);box-shadow:0 0 0 3px rgba(0,102,255,.14)}
.fld:focus-within label{color:var(--bl)}
/* only flag a field once the visitor has actually interacted with it */
.fld input:user-invalid,.fld textarea:user-invalid{
  border-color:#C2453C;box-shadow:0 0 0 3px rgba(194,69,60,.12)}
/* The base .fld rule paints a dropdown chevron on inputs and the textarea
   as well as selects, which implies a dropdown that isn't there. Keep the
   chevron on selects only and give the other fields their padding back. */
.fld input,.fld textarea{background-image:none;padding-right:15px}
.fld select{appearance:none;-webkit-appearance:none;background-repeat:no-repeat;
  background-position:right 14px center;background-size:11px;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B7B8D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form{animation-duration:.6s}
.form .btn.pri:active{transform:translateY(0) scale(.995)}
/* Keyboard users get a visible focus ring - but NOT on the form fields,
   which already have their own border+glow focus treatment two rules up.
   Adding this outline there stacked a second ring outside it (a visible
   "double border" on focus). Buttons and nav links have no such existing
   treatment, so they still get it. */
.btn:focus-visible,.nav .lk a:focus-visible{
  outline:2px solid var(--cy);outline-offset:3px}

/* --- 6. ANCHOR TARGETS clear the fixed header ------------------------
   The footer links to /services/#residential etc. Those cards now carry
   real ids, so they also need somewhere to land that isn't behind the
   fixed header.                                                        */
.svc-card[id],section[id],[id].fq{scroll-margin-top:calc(var(--hdr) + 52px)}

/* --- 7. IMAGE RENDERING ---------------------------------------------
   srcset now serves a right-sized file per breakpoint; make sure the
   browser scales it cleanly rather than over-sharpening.              */
.gi img,.wc img,.hero-bg img,.phead img.bg,.cta img.bg,.fig img,.layer-image img{
  image-rendering:auto;backface-visibility:hidden}

/* --- 8. <picture> wrappers are layout-neutral -----------------------
   WebP sources are wrapped in <picture>; display:contents keeps every
   existing `.gi img` / `.wc img` / `.hero-bg img` rule matching and
   sizing exactly as before.                                          */
picture{display:contents}

/* --- 9. CREW SELFIE CROPS: per-photo focal point --------------------
   These are portrait selfies cropped into a wide landscape card
   (ratio mismatch is severe - up to 2.6:1 from a 0.76:1 source), and
   the face sits in the lower half of each frame, not the centre. The
   sitewide default (object-position:center 40%, tuned for landscape
   drone/roof shots) was pushing the crop toward the top of these
   specific photos, cutting the chin and showing excess roof/sky above.
   Scoped to these three files only - every other photo keeps the
   sitewide default.                                                   */
.wc img[src*="n02.jpg"]{object-position:center 62%}
.wc img[src*="n05.jpg"]{object-position:center 78%}
.wc img[src*="n07.jpg"]{object-position:center 55%}
/* Portrait shot of a two-storey re-roof: the crew is on the ridge, so the
   default 40% cut them off at the top of the short desktop card. */
.wc img[src*="n08.jpg"]{object-position:center 30%}
/* Street-level shots with a tall band of sky: the default 40% showed mostly
   sky and cut the house off at the bottom of the short card. */
.wc img[src*="p11.jpg"],.wc img[src*="p14.jpg"]{object-position:center 80%}
.wc img[src*="p12.jpg"]{object-position:center bottom}

/* --- 10. HEADER: "Free Inspection" button was the squeeze victim ----
   Between ~1081-1339px the nav links are visible (hidden only below
   1080px) but the viewport isn't quite wide enough to comfortably fit
   logo + 7 links + divider + phone + button, and the button (default
   flex-shrink:1) was the one absorbing the pressure - shrinking to as
   little as 52px wide and wrapping "FREE INSPECTION" onto two lines.
   The nav links' own gap already uses clamp() and can compress; let
   that absorb it instead of the CTA.                                  */
.nav .btn.pri{flex-shrink:0;white-space:nowrap}

/* --- 11. HEADER: free up room in the 1081-1339px squeeze zone -------
   Even with the CTA button protected (rule above), the nav still does
   not have enough room for logo + 7 links + divider + phone + button
   in this range - total content genuinely exceeds the viewport, so
   something has to give. The phone number is the one item that is
   fully redundant here (it's still in the mobile drawer and footer,
   and "Free Inspection" is one click from the contact form), so it is
   the one hidden - not the primary CTA, and not the nav itself.       */
@media (min-width:1081px) and (max-width:1339px){
  .nav .tel{display:none}
}

/* --- 12. FOOTER: phone number was wrapping to two lines --------------
   .ftr-contact-item lays its label+value pair out as a flex ROW at
   every breakpoint except one narrow mobile range (line ~907), so the
   long label text ("Direct Phone (24/7 Emergency)") was consistently
   eating most of the row's width, leaving as little as ~100px for the
   phone number itself - which then wrapped. Stacking label above value
   (already the established pattern at that one breakpoint) gives the
   number the item's full width instead, on every breakpoint.          */
.ftr-contact-item{flex-direction:column;align-items:flex-start;text-align:left}
.ftr-contact-text{white-space:nowrap}

/* =====================================================================
   V-FINAL PASS - gallery duplicate/crop cleanup, preloader polish
   ===================================================================== */

/* --- 13. GALLERY: crew selfie crop (image 7) - default 40% crop showed
   mostly face/sky and almost no roof; this tile is specifically the
   "on the roof" crew photo, so bias the crop down to keep both the
   face and the shingles/vent-pipe roof surface in frame. Scoped to
   .gi only - the About page's .wc crop of the same photo is unrelated
   and already tuned separately (rule above, line ~2062).             */
.gi img[src*="n05.jpg"]{object-position:center 65%}

/* --- 14. PRELOADER: tighten the gap above the loading bar and give
   the logo a small idle motion once it has settled in, so the
   starting animation doesn't read as static. Reduced-motion users
   never see this - #pre is removed entirely before it can run
   (app.js STATIC/no-smooth branch).                                  */
.pl-mk{margin:0 auto 16px;
  animation:plIn 1.1s var(--e2) .1s forwards,plDance 1.9s ease-in-out 1.1s infinite}
@keyframes plDance{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  25%{transform:translateY(-7px) rotate(-2.5deg) scale(1.015)}
  50%{transform:translateY(0) rotate(0) scale(1)}
  75%{transform:translateY(-4px) rotate(2.5deg) scale(1.01)}
}

/* =====================================================================
   V12 PASS - logged-in admin bar
   The site header is position:fixed at top:0. WordPress's admin bar is
   also fixed, at a higher z-index, so for a logged-in user it covered the
   header's top strip (32px on desktop, 46px on tablet). Visitors never
   see the admin bar, so body.admin-bar scopes this to logged-in users
   only and nothing changes for the public site.
   Below 600px WordPress switches the admin bar to position:absolute so it
   scrolls away - the header goes back to top:0 there, as WP intends.
   ===================================================================== */
body.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .hdr{top:46px}
}
@media screen and (max-width:600px){
  body.admin-bar .hdr{top:0}
}

/* =====================================================================
   V12 PASS - mobile drawer scroll containment + tap target
   overscroll-behavior:contain stops a touch scroll inside the drawer from
   chaining to the page behind it once the drawer reaches its end.
   The drawer's email link was a 29px tap target; 44px is the accessible
   minimum, so it gets the same treatment the phone link already has.
   ===================================================================== */
.mob{overscroll-behavior:contain}
.mfoot .b{display:inline-flex;align-items:center;min-height:44px}