/* =====================================================================
   NEX-G LASER FAB — UI V3 · "Fabrication software" design system
   Visual layer only. Loaded after each page's own <style>, so existing
   markup, content, SEO and scripts are untouched.
   Fonts: Oswald (display) · IBM Plex Sans (body) · IBM Plex Mono (data)
   Icons: assets/css/nexg-icons.css (inline SVG, no icon-font needed)
   Rollback: point the page <link> back to nexg-ui-v2.css or remove it.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
--------------------------------------------------------------------- */
html.lt{
  --bg:#E4E1D9; --panel:#F3F1EC; --panel-2:#EAE7E0; --bar:#1E2329; --bar-text:#F3F1EC;
  --ink:#1B1F24; --text-muted:#4E545B; --text-faint:#80858B;
  --line:#1B1F24; --rule:#C4BFB3; --rule-soft:#D6D2C8;
  --grid:rgba(27,31,36,.055); --grid-major:rgba(27,31,36,.08);
  --primary:#2D5B78; --primary-hover:#234A62; --primary-soft:rgba(45,91,120,.10); --primary-on-dark:#8FB6D1;
  --nav-bg:rgba(228,225,217,.94);
  --success:#2E7D4F; --warning:#A86B12; --danger:#B3362C;
}
html:not(.lt){
  --bg:#131619; --panel:#1A1E22; --panel-2:#20252A; --bar:#0B0D0F; --bar-text:#ECEAE5;
  --ink:#ECEAE5; --text-muted:#A6ABB1; --text-faint:#71767C;
  --line:#4B525A; --rule:#30363D; --rule-soft:#262B31;
  --grid:rgba(255,255,255,.028); --grid-major:rgba(255,255,255,.05);
  --primary:#6E9CBC; --primary-hover:#8DB3CE; --primary-soft:rgba(110,156,188,.13); --primary-on-dark:#8FB6D1;
  --nav-bg:rgba(19,22,25,.93);
  --success:#5DBB86; --warning:#E0A548; --danger:#E2675D;
}
html.lt,html:not(.lt){
  --brand-red:#D9232D;                    /* logo mark only */
  --H:'Alata','PV Alata','Arial',sans-serif;
  --F:'IBM Plex Sans','Inter',system-ui,sans-serif;
  --M:'IBM Plex Mono','DejaVu Sans Mono',ui-monospace,monospace;
  --bw:1.5px;
  --container:1200px;
  --gutter:max(5%, calc((100% - var(--container)) / 2));
  --ease:cubic-bezier(.2,.6,.2,1);
  --NH:66px; --RD:0px;
  /* legacy variables → system (keeps every inline style on-system) */
  --R:var(--primary); --Rd:var(--primary-hover); --Rg:transparent;
  --B0:transparent; --B1:var(--grid); --B2:var(--panel-2); --B3:var(--panel-2);
  --C:var(--panel); --T0:var(--ink); --T1:var(--text-muted); --T2:var(--text-faint);
  --BD:var(--rule); --NV:var(--nav-bg); --I:var(--panel); --IB:var(--line);
  scroll-padding-top:calc(var(--NH) + 14px);
  color-scheme:light;
}
html:not(.lt){color-scheme:dark}

/* ---------------------------------------------------------------------
   2. BASE — graph-paper ground, type
--------------------------------------------------------------------- */
body{font-family:var(--F);color:var(--ink);font-size:16px;line-height:1.6;
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;background-position:-1px -1px}
::selection{background:var(--primary);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.w{max-width:var(--container)}
section{padding:88px 5%;position:relative}
section + section{border-top:1px solid var(--rule)}
section[style*="padding-bottom:0"] + section{border-top:0;padding-top:56px}
section + section::before,section + section::after{content:'';position:absolute;top:-6px;width:11px;height:11px;pointer-events:none;
  background:linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
section + section::before{left:calc(var(--gutter) - 6px)}
section + section::after{right:calc(var(--gutter) - 6px)}
section[style*="padding-bottom:0"] + section::before,section[style*="padding-bottom:0"] + section::after{display:none}

body{counter-reset:nxsec}
.sl{counter-increment:nxsec;display:inline-flex;align-items:center;gap:8px;margin-bottom:.8rem;
  font-family:var(--M);font-size:.74rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.sl::before{content:counter(nxsec,decimal-leading-zero) " ·";width:auto;height:auto;background:none;border-radius:0;color:var(--primary);font-weight:600;letter-spacing:.02em}
.sh{font-family:var(--H);font-weight:600;font-size:clamp(1.95rem,3.6vw,2.85rem);line-height:1.06;letter-spacing:.003em;color:var(--ink);margin-bottom:.8rem}
.sh em,.hi{color:var(--primary);font-style:normal}
.sp{color:var(--text-muted);font-size:1rem;line-height:1.7;max-width:580px}

/* ---------------------------------------------------------------------
   3. HEADER — double-rule toolbar
--------------------------------------------------------------------- */
#nav{top:0;left:0;transform:none;width:100%;max-width:none;border-radius:0;border:0;border-bottom:var(--bw) solid var(--line);
  background:var(--nav-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:0 var(--gutter);box-shadow:none;
  transition:background-color .25s var(--ease),border-color .25s var(--ease)}
#nav::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--line);pointer-events:none}
#nav.s{box-shadow:none}
.ni{height:var(--NH);gap:10px}
.logo{font-family:var(--H);font-size:1.55rem;font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.logo b{color:var(--brand-red);font-weight:600}
.nm{gap:0;height:var(--NH)}
.nm li{height:100%}
.nm a{position:relative;display:flex;align-items:center;height:100%;padding:0 13px;border-radius:0;background:none!important;
  font-family:var(--F);font-size:.74rem;font-weight:500;letter-spacing:.1em;color:var(--text-muted);transition:color .18s var(--ease)}
.nm a::after{content:'';position:absolute;left:13px;right:13px;bottom:-1px;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nm a:hover,.nm a.a{color:var(--ink)}
.nm a:hover::after,.nm a.a::after{transform:scaleX(1)}
.nr{gap:8px;margin-left:8px}
.tog{height:36px;border-radius:0;background:transparent;border:var(--bw) solid var(--line);padding:0 10px 0 8px;gap:6px}
.tog:hover{background:var(--panel)}
.tog-t,html.lt .tog-t{background:var(--panel-2);border:1px solid var(--line);border-radius:0}
.tog-k,html.lt .tog-k{border-radius:0;background:var(--primary)}
.tog-l{font-family:var(--M);font-size:.64rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.tog-i{color:var(--ink)}
.ncta{height:38px;padding:0 18px;border-radius:0;background:var(--primary);border:var(--bw) solid var(--primary);box-shadow:none;
  font-family:var(--F);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;gap:7px}
.ncta:hover{background:var(--bar);border-color:var(--bar);transform:none;box-shadow:none}
.hb{width:42px;height:42px;border-radius:0;background:transparent;border:var(--bw) solid var(--line)}
.hb span{width:17px;height:2px;border-radius:0;background:var(--ink)}

/* Home: transparent over the hero until scroll */
body:has(> .hero) #nav:not(.s){background:linear-gradient(rgba(10,12,14,.6),rgba(10,12,14,0));border-bottom-color:rgba(255,255,255,.28);backdrop-filter:none;-webkit-backdrop-filter:none}
body:has(> .hero) #nav:not(.s)::after{background:rgba(255,255,255,.16)}
body:has(> .hero) #nav:not(.s) .logo{color:#fff}
body:has(> .hero) #nav:not(.s) .nm a{color:rgba(255,255,255,.8)}
body:has(> .hero) #nav:not(.s) .nm a:hover{color:#fff}
body:has(> .hero) #nav:not(.s) .nm a::after{background:var(--primary-on-dark)}
body:has(> .hero) #nav:not(.s) .tog{border-color:rgba(255,255,255,.4)}
body:has(> .hero) #nav:not(.s) .tog-l,body:has(> .hero) #nav:not(.s) .tog-i{color:#fff}
body:has(> .hero) #nav:not(.s) .hb{border-color:rgba(255,255,255,.5)}
body:has(> .hero) #nav:not(.s) .hb span{background:#fff}
body:has(> .hero) #nav:not(.s):has(.hb.o){background:var(--nav-bg);border-bottom-color:var(--line)}
body:has(> .hero) #nav:not(.s):has(.hb.o)::after{background:var(--line)}
body:has(> .hero) #nav:not(.s):has(.hb.o) .logo{color:var(--ink)}
body:has(> .hero) #nav:not(.s):has(.hb.o) .hb{border-color:var(--line)}
body:has(> .hero) #nav:not(.s) .hb.o span{background:var(--ink)}

/* Mobile menu — numbered index */
.mm{justify-content:flex-start;align-items:stretch;padding:calc(var(--NH) + 24px) 0 40px;overflow-y:auto;counter-reset:mmi;
  background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px}
.mm a{counter-increment:mmi;display:flex;align-items:baseline;gap:14px;text-align:left;width:auto;margin:0 22px;padding:13px 0;
  font-family:var(--H);font-size:1.7rem;font-weight:500;letter-spacing:.01em;color:var(--ink);border-bottom:1px solid var(--rule)}
.mm a::before{content:counter(mmi,decimal-leading-zero) " ·";font-family:var(--M);font-size:.72rem;font-weight:500;color:var(--primary)}
.mm a:hover{color:var(--primary)}
.mm .mq{counter-increment:none;justify-content:center;align-items:center;margin:24px 22px 0;padding:0;height:52px;border:0!important;border-radius:0;
  background:var(--primary);color:#fff!important;font-family:var(--F);font-size:.8rem!important;font-weight:600;letter-spacing:.12em;gap:8px}
.mm .mq::before{display:none}
.mm-tog{margin:18px 22px 0}
.mmx{display:none}

/* ---------------------------------------------------------------------
   4. BUTTONS
--------------------------------------------------------------------- */
.btn{height:48px;padding:0 24px;border-radius:0;font-family:var(--F);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  line-height:1;white-space:nowrap;box-shadow:none;gap:8px;border:var(--bw) solid transparent;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.btn-r{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:none}
.btn-r:hover{background:var(--bar);border-color:var(--bar);color:#fff;transform:none;box-shadow:none}
.btn-o{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-o:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:none}
.btn-s{height:38px;padding:0 15px;font-size:.68rem}
.btn:disabled{opacity:.6;cursor:progress}

/* ---------------------------------------------------------------------
   5. HOME HERO
--------------------------------------------------------------------- */
.hero{min-height:620px;background:#0B0D10}
.hsl{padding:var(--NH) 0 100px;box-sizing:border-box;overflow:hidden}
.hsl-bg::after{background:
  linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,rgba(11,13,16,.92) 0%,rgba(11,13,16,.72) 48%,rgba(11,13,16,.3) 100%)}
.hsl-ct{max-width:none;width:100%;text-align:left;padding:0 var(--gutter)}
.hsl-ct > *{max-width:700px}
.hbadge{background:transparent;border:0;border-left:3px solid var(--primary-on-dark);border-radius:0;padding:2px 0 2px 12px;margin-bottom:1.4rem;
  font-family:var(--M);font-size:.78rem;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.hbdot{display:none}
.hsl-ct h1{font-family:var(--H);font-weight:600;font-size:clamp(2.6rem,6vw,5.2rem);line-height:.98;letter-spacing:.005em;text-transform:uppercase;margin-bottom:1.25rem;max-width:860px}
.hsl-ct h1 em{color:var(--primary-on-dark)}
.hsl-ct p{font-family:var(--F);color:rgba(255,255,255,.78);font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.7;max-width:540px;margin:0 0 2rem}
.hbtns{justify-content:flex-start;gap:.75rem}
.hero .btn-o{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-o:hover{background:#fff;color:#0B0D10;border-color:#fff}
.hero .btn-r:hover{background:#fff;color:#0B0D10;border-color:#fff}
.hero::before{content:'';position:absolute;z-index:5;pointer-events:none;inset:calc(var(--NH) + 22px) 22px 100px;opacity:.5;
  background:
   linear-gradient(#fff,#fff) left top/22px 1.5px no-repeat,linear-gradient(#fff,#fff) left top/1.5px 22px no-repeat,
   linear-gradient(#fff,#fff) right top/22px 1.5px no-repeat,linear-gradient(#fff,#fff) right top/1.5px 22px no-repeat,
   linear-gradient(#fff,#fff) left bottom/22px 1.5px no-repeat,linear-gradient(#fff,#fff) left bottom/1.5px 22px no-repeat,
   linear-gradient(#fff,#fff) right bottom/22px 1.5px no-repeat,linear-gradient(#fff,#fff) right bottom/1.5px 22px no-repeat}
.sl-prev,.sl-next{top:auto;bottom:118px;transform:none;width:44px;height:44px;border-radius:0;background:transparent;border:var(--bw) solid rgba(255,255,255,.45);backdrop-filter:none}
.sl-prev:hover,.sl-next:hover{background:#fff;color:#0B0D10;border-color:#fff}
.sl-next{right:var(--gutter)}
.sl-prev{left:auto;right:calc(var(--gutter) + 52px)}
.sl-dots{bottom:138px;left:var(--gutter);transform:none;gap:6px}
.sldot{width:20px;height:3px;border-radius:0;background:rgba(255,255,255,.35)}
.sldot.on{width:40px;height:3px;border-radius:0;background:var(--primary-on-dark)}
/* readout strip */
.hstats{background:rgba(11,13,16,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:var(--bw) solid rgba(255,255,255,.3);padding:0 var(--gutter)}
.hstats::before{content:'';position:absolute;left:0;right:0;top:3px;height:1px;background:rgba(255,255,255,.14)}
.hsi{height:auto;max-width:none;justify-content:stretch;align-items:stretch}
.hs-d{display:none}
.hs-i{flex:1;text-align:left;padding:20px 20px 18px;border-left:1px solid rgba(255,255,255,.14)}
.hs-i:last-of-type{border-right:1px solid rgba(255,255,255,.14)}
.hs-n{font-family:var(--H);font-weight:500;font-size:clamp(1.25rem,2.3vw,1.85rem);letter-spacing:.01em;white-space:nowrap;line-height:1}
.hs-n em{font-family:var(--M);font-size:.5em;font-weight:500;color:var(--primary-on-dark);margin-left:.45em;letter-spacing:.04em;text-transform:uppercase}
.hs-l{font-family:var(--M);font-size:.62rem;color:rgba(255,255,255,.55);letter-spacing:.08em;margin-top:6px}
.hs-l:empty{display:none}

/* ---------------------------------------------------------------------
   6. INNER-PAGE TITLE BLOCK (.ph) — like a drawing title block
--------------------------------------------------------------------- */
.ph,.bp-hero{min-height:0;display:block;text-align:left;background:none;overflow:visible;
  padding:calc(var(--NH) + 46px) var(--gutter) 56px;border-bottom:1px solid var(--rule)}
.ph::before,.bp-hero::before{display:none}
.ph-ct,.bp-hero .bp-wrap{max-width:none;width:100%;margin:0;text-align:left;position:relative;
  background:var(--panel-2);border:var(--bw) solid var(--line);outline:1px solid var(--line);outline-offset:4px;
  padding:2.2rem 2.4rem 2rem}
.ph-badge{display:flex;width:max-content;max-width:100%;background:none;border:0;border-radius:0;padding:0;margin-bottom:1rem;gap:8px;
  font-family:var(--M);font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.ph-badge i{color:var(--primary)}
.ph-h,.bp-h1{font-family:var(--H);font-weight:600;color:var(--ink);text-transform:uppercase;font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1;letter-spacing:.005em;margin-bottom:1rem;max-width:900px}
.ph-h em{color:var(--primary)}
.ph-p{font-family:var(--F);color:var(--text-muted);margin:0;max-width:640px;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.6}
.ph-ct > div[style*="justify-content:center"]{justify-content:flex-start!important;margin-top:1.5rem}
.crumb{justify-content:flex-start;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--rule);gap:.55rem;
  font-family:var(--M);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
.crumb a{color:var(--ink);font-weight:500}
.crumb a:hover{color:var(--primary)}
.bp-hero{padding-bottom:48px}
.bp-hero .bp-wrap{max-width:var(--container)}
.bp-cat{font-family:var(--M);color:var(--primary);letter-spacing:.06em;font-weight:500;margin-bottom:.6rem}
.bp-meta{font-family:var(--M);color:var(--text-muted);font-size:.78rem;padding-top:.9rem;border-top:1px solid var(--rule);margin-bottom:0}
.bp-img{border-radius:0;border:var(--bw) solid var(--line);margin:1.5rem 0 0;max-width:820px}

/* ---------------------------------------------------------------------
   7. PANELS / CARDS
--------------------------------------------------------------------- */
.cd{position:relative;background:var(--panel);border:var(--bw) solid var(--line);border-radius:0;box-shadow:none!important;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.cd:hover{transform:none;border-color:var(--line);box-shadow:4px 4px 0 var(--primary)!important}
.cd::after{display:none}

/* Icon boxes */
.svc-ic,.why-ic,.ci-ic,.ic-box{width:44px;height:44px;min-width:44px;border-radius:0;background:transparent;border:var(--bw) solid var(--line);
  color:var(--primary);font-size:1.15rem;transform:none!important;display:flex;align-items:center;justify-content:center}
.svc-ic[style]{background:transparent!important;border:var(--bw) solid var(--line)!important;color:var(--primary)}
.svc-cd:hover .svc-ic,.svc-c:hover .svc-ic,.why-c:hover .why-ic,.ci:hover .ci-ic,.ic:hover .ic-box{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff}

/* Capability cards (home) — numbered dark title bar like a tool panel */
.svc-grid{gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.svc-cd{display:grid;grid-template-columns:auto 1fr;align-content:start;padding:0;overflow:hidden}
.svc-cd::before{display:none}
.svc-cd .sno{position:static;order:-2;align-self:stretch;display:flex;align-items:center;background:var(--bar);color:var(--bar-text);opacity:1;
  padding:13px 0 13px 18px;font-family:var(--H);font-size:1.15rem;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.svc-cd .sno::after{content:"\00a0·\00a0";color:var(--primary-on-dark)}
.svc-cd h3{order:-1;margin:0;background:var(--bar);color:var(--bar-text);padding:13px 18px 13px 0;display:flex;align-items:center;
  font-family:var(--H);font-size:1.15rem;font-weight:500;letter-spacing:.01em;line-height:1.2}
.svc-cd .svc-ic{grid-column:1 / -1;margin:1.3rem 1.3rem .9rem}
.svc-cd p{grid-column:1 / -1;padding:0 1.3rem 1.5rem;color:var(--text-muted);font-size:.92rem;line-height:1.65}

/* Services page cards — same panel language */
.svc-g{gap:1.1rem}
.svc-c{overflow:hidden}
.svc-top{display:grid;grid-template-columns:auto 1fr;padding:0}
.svc-top::before{display:none}
.svc-row{display:contents}
.svc-no{order:-2;align-self:stretch;display:flex;align-items:center;background:var(--bar);color:var(--bar-text);opacity:1;
  padding:13px 0 13px 20px;font-family:var(--H);font-size:1.2rem;font-weight:500;line-height:1}
.svc-no::after{content:"\00a0·\00a0";color:var(--primary-on-dark)}
.svc-top h3{order:-1;margin:0;background:var(--bar);color:var(--bar-text);padding:13px 20px 13px 0;display:flex;align-items:center;
  font-family:var(--H);font-size:1.2rem;font-weight:500;letter-spacing:.01em;line-height:1.2}
.svc-top .svc-ic{grid-column:1 / -1;margin:1.4rem 1.4rem .9rem}
.svc-top p{grid-column:1 / -1;padding:0 1.4rem 1.4rem;font-size:.92rem;color:var(--text-muted)}
.svc-feats{background:var(--panel-2);border-top:1px solid var(--rule);padding:1.1rem 1.4rem}
.svc-feats h4{font-family:var(--M);font-size:.68rem;font-weight:500;letter-spacing:.08em;color:var(--text-muted)}
.feat{font-family:var(--M);font-size:.76rem;color:var(--ink)}
.feat i,.feat2 i{color:var(--primary)}
.svc-app{font-style:normal;color:var(--text-muted);font-size:.82rem;padding:.9rem 1.4rem 1.1rem;border-top:1px solid var(--rule)}
.svc-c > div[style*="padding:0 1.75rem"]{padding:0 1.4rem 1.4rem!important}
.svc-c > div[style*="padding:0 1.75rem"] a{font-family:var(--F);font-size:.72rem!important;letter-spacing:.12em;text-transform:uppercase;border-bottom:var(--bw) solid currentColor;padding-bottom:2px}

/* About */
.why-g{gap:1rem}
.why-c{padding:1.4rem}
.why-c:hover{transform:none}
.why-c h3{font-family:var(--H);font-weight:500;font-size:1.2rem}
.why-c p{font-size:.9rem}
.mv-c{border-radius:0;background:var(--panel);border:var(--bw) solid var(--line);padding:0;overflow:hidden}
.mv-c:hover{transform:none;border-color:var(--line)}
.mv-c h4{background:var(--bar);color:var(--bar-text);margin:0;padding:.7rem 1.1rem;font-family:var(--H);font-weight:500;font-size:1.05rem;letter-spacing:.01em}
.mv-c p{padding:1rem 1.1rem 1.1rem;font-size:.88rem}
.stat-box{border-radius:0;border:var(--bw) solid var(--line);background:var(--line);gap:1px}
.sb-i{text-align:left;padding:1.3rem 1.4rem;background:var(--panel)}
.sb-i:hover{background:var(--panel-2)}
.sb-n{font-family:var(--H);font-weight:500;color:var(--ink);font-size:2.1rem}
.sb-l{font-family:var(--M);font-size:.68rem;letter-spacing:.06em;color:var(--text-muted);margin-top:.45rem}
.val{border-radius:0;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-family:var(--M);font-size:.74rem}
.val::before{content:'';width:6px;height:6px;background:var(--primary);font-size:0}
.val:hover{background:var(--panel);color:var(--ink)}
.tl::before{width:var(--bw);background:var(--line)}
.tl-dot{width:12px;height:12px;border-radius:0;left:-2.36rem;background:var(--bg);border:var(--bw) solid var(--line);box-shadow:none}
.tl-i:hover .tl-dot{transform:none;background:var(--primary);border-color:var(--primary);box-shadow:none}
.tl-y{font-family:var(--H);font-weight:500;font-size:1.3rem;color:var(--ink)}
.tl-e{font-size:.9rem}

/* Materials */
.mat-g{gap:.9rem}
.mat-c{border-radius:0;border:var(--bw) solid var(--line);background:var(--panel);text-align:left;padding:1.1rem 1.1rem 1.15rem}
.mat-c:hover{transform:none;box-shadow:4px 4px 0 var(--primary);border-color:var(--line)}
.mat-ic{color:var(--primary);font-size:1.3rem;margin-bottom:.75rem}
.mat-c h4{font-family:var(--H);font-weight:500;font-size:1.15rem}
.mat-c p{font-family:var(--M);font-size:.72rem;color:var(--text-muted);line-height:1.6}

/* Inline-styled panels: square everything */
[style*="border-radius:9px"],[style*="border-radius:10px"],[style*="border-radius:12px"],[style*="border-radius:14px"]{border-radius:0!important}
section div[style*="background:var(--C)"][style*="border:1px solid var(--BD)"]{border:var(--bw) solid var(--line)!important;box-shadow:none!important}

/* ---------------------------------------------------------------------
   8. PROCESS
--------------------------------------------------------------------- */
.proc-g{margin-top:2.5rem}
.proc-g::before{top:42px;left:10%;right:10%;height:var(--bw);background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.proc-i{padding:1rem .75rem}
.proc-i:hover{transform:none}
.proc-ci{width:52px;height:52px;border-radius:0;border:var(--bw) solid var(--line);background:var(--panel);color:var(--primary);
  font-family:var(--H);font-weight:500;font-size:1.25rem;margin:0 auto .9rem;box-shadow:none!important;transition:background-color .2s var(--ease),color .2s var(--ease)}
.proc-i:hover .proc-ci{background:var(--bar);border-color:var(--bar);color:#fff}
.proc-i h4{font-family:var(--H);font-weight:500;font-size:1.15rem;letter-spacing:.01em;margin-bottom:.3rem}
.proc-i p{font-size:.84rem;line-height:1.6;color:var(--text-muted)}
@media(max-width:900px){
  .proc-g{grid-template-columns:1fr;gap:0;max-width:560px}
  .proc-g::before{display:block!important;top:26px;bottom:26px;left:25px;right:auto;width:var(--bw);height:auto;background:repeating-linear-gradient(180deg,var(--line) 0 8px,transparent 8px 14px)}
  .proc-i{display:grid;grid-template-columns:52px 1fr;column-gap:18px;text-align:left;align-items:center;padding:.65rem 0}
  .proc-ci{grid-row:1 / span 2;margin:0;align-self:start}
  .proc-i h4{align-self:end;margin:0}
  .proc-i p{align-self:start;margin-top:.2rem}
  .proc-i h4:last-child{grid-row:1 / span 2;align-self:center}
}

/* ---------------------------------------------------------------------
   9. CHIPS / FILTERS
--------------------------------------------------------------------- */
.tag,.pc-tag{border-radius:0;background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:5px 11px;
  font-family:var(--M);font-size:.74rem;transition:background-color .18s var(--ease),color .18s var(--ease)}
a.tag:hover,.tag:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pc-tag{padding:3px 8px;font-size:.68rem;border-color:var(--rule);color:var(--text-muted)}
.gf,.pf{height:36px;padding:0 14px;border-radius:0;border:var(--bw) solid var(--line);background:var(--panel);color:var(--ink);
  font-family:var(--M);font-size:.72rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.gf:hover,.pf:hover{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
.gf.on,.pf.on{background:var(--bar);border-color:var(--bar);color:var(--bar-text)}

/* ---------------------------------------------------------------------
   10. IMAGES
--------------------------------------------------------------------- */
.ggrid{gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.gi{border-radius:0;border:var(--bw) solid var(--line);background:var(--panel-2)}
.gi img{transition:transform .5s var(--ease)}
.gi:hover img{transform:scale(1.04)}
.gi-ov{background:none;padding:0;align-items:flex-end}
.gi-ov > div{width:100%;background:var(--bar);padding:.6rem .85rem;border-top:var(--bw) solid var(--line);transform:translateY(100%);transition:transform .25s var(--ease)}
.gi:hover .gi-ov > div{transform:none}
.gi-ov h4{font-family:var(--H);font-weight:500;font-size:1.05rem;color:#fff}
.gi-ov p{font-family:var(--M);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-on-dark)}
@media(hover:none){.gi-ov{opacity:1}.gi-ov > div{transform:none}}
.lb{background:rgba(11,13,16,.96)}
.lb img{border-radius:0;border:var(--bw) solid rgba(255,255,255,.3)}
.lb-cap{font-family:var(--M);color:rgba(255,255,255,.75)}
.lb-x,.lb-nav button{border-radius:0;font-family:var(--M)}
.lb-x:hover,.lb-nav button:hover{background:var(--primary);border-color:var(--primary)}

/* Products */
.pg{gap:1.1rem}
.pc:hover{transform:none}
.pc-img{background:var(--panel-2);border-bottom:var(--bw) solid var(--line)}
.pc:hover .pc-img img{transform:scale(1.04)}
.pc-body{padding:1.25rem 1.3rem}
.pc-cat{font-family:var(--M);font-size:.68rem;font-weight:500;letter-spacing:.06em;color:var(--primary)}
.pc-body h3{font-family:var(--H);font-weight:500;font-size:1.3rem;letter-spacing:.01em}
.pc-body p{font-size:.88rem}
.pc-sp{border-radius:0;background:var(--panel-2);border:1px solid var(--rule);color:var(--ink);font-family:var(--M);font-size:.7rem;padding:3px 8px}
.pc-sp i{color:var(--primary);margin-right:3px}
.pc-ft{padding:.9rem 1.3rem;background:var(--panel-2);border-top:var(--bw) solid var(--line)}
.pc-ft .btn-o{width:38px;padding:0}
@media(max-width:520px){.pg{grid-template-columns:1fr}}

/* Blog */
.blg-wrap{gap:2.5rem}
.feat-card,.bcard,.bside-card,.rel-c,.bp-cta{border-radius:0;border:var(--bw) solid var(--line)!important;background:var(--panel)}
.feat-card,.bcard,.rel-c{transition:box-shadow .2s var(--ease)}
a:hover > .feat-card,.bcard:hover,.rel-c:hover{transform:none;box-shadow:4px 4px 0 var(--primary)}
.feat-img,.bcard-img,.rel-img{background-color:var(--panel-2);background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);background-size:32px 32px;border-bottom:var(--bw) solid var(--line)}
.feat-img[style*="url("],.bcard-img[style*="url("],.rel-img[style*="url("]{background-size:cover}
.feat-cat{border-radius:0;background:var(--bar);font-family:var(--M);letter-spacing:.06em;font-weight:500}
.feat-body h2{font-family:var(--H);font-weight:500;font-size:1.8rem;line-height:1.1}
.bcard-cat{font-family:var(--M);letter-spacing:.06em;font-weight:500}
.bcard h3{font-family:var(--H);font-weight:500;font-size:1.2rem;line-height:1.15}
.bmeta{font-family:var(--M);font-size:.72rem;color:var(--text-faint)}
.bside-card{padding:0!important;overflow:hidden}
.bside-card > *:not(h4){margin-left:1.2rem;margin-right:1.2rem}
.bside-card > *:last-child{margin-bottom:1.2rem}
.bside-card h4{background:var(--bar);color:var(--bar-text);margin:0 0 1rem;padding:.7rem 1.2rem;font-family:var(--H);font-size:1.05rem;font-weight:500;letter-spacing:.01em;text-transform:none}
.bside-card[style*="text-align:center"] .btn{width:calc(100% - 2.4rem)!important}
.bcat-link{font-size:.9rem;color:var(--ink);border-bottom-color:var(--rule)!important}
.bcat-link span:last-child{font-family:var(--M);color:var(--text-faint);font-size:.75rem}
.bcat-link:hover span:first-child{color:var(--primary)}
.bsearch{height:44px;border-radius:0;background:var(--panel);border:var(--bw) solid var(--line);color:var(--ink);font-family:var(--M)}
.bsearch:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}
.bside-card .btn{white-space:normal;height:auto;min-height:48px;padding:10px 16px;line-height:1.3}
.bp-body{color:var(--text-muted);font-size:1.02rem;line-height:1.8}
.bp-body h2{font-family:var(--H);font-weight:500;font-size:1.9rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.bp-body h3{font-family:var(--H);font-weight:500}
.bp-body strong{color:var(--ink)}
.bp-body li::marker{color:var(--primary)}
.bp-cta{border-top:6px solid var(--bar)!important}
@media(max-width:900px){.blg-wrap{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   11. SPECIFICATION PANELS & TABLES
--------------------------------------------------------------------- */
.spec{border-radius:0;border:var(--bw) solid var(--line);background:var(--panel);box-shadow:none!important}
.spec-h{background:var(--bar);color:var(--bar-text);border:0;display:flex;align-items:center;gap:.6rem;padding:.9rem 1.3rem;
  font-family:var(--H);font-size:1.2rem;font-weight:500;letter-spacing:.01em;text-transform:none}
.spec-h i{color:var(--primary-on-dark)}
.spec-r{display:grid;grid-template-columns:minmax(110px,42%) 1fr;gap:1rem;padding:.72rem 1.3rem;border-bottom-color:var(--rule)}
.spec-r:hover{background:var(--panel-2)}
.spec-k{font-family:var(--F);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);align-self:center}
.spec-v{font-family:var(--M);font-size:.86rem;font-weight:500;text-align:right;color:var(--ink)}
section table{border:var(--bw) solid var(--line);border-collapse:separate!important;border-spacing:0;background:var(--panel)}
section table tr{border:0!important}
section table tr + tr th,section table tr + tr td{border-top:1px solid var(--rule)}
section table th{white-space:normal!important;width:34%!important;padding:.8rem 1rem!important;background:var(--panel-2);color:var(--text-muted)!important;
  font-family:var(--F);font-size:.7rem;font-weight:500!important;letter-spacing:.1em;text-transform:uppercase;border-right:1px solid var(--rule)}
section table td{padding:.8rem 1rem!important;color:var(--ink)!important;font-family:var(--M);font-size:.84rem}
.feat-g2{gap:.5rem}
.feat2{border-radius:0;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-family:var(--M);font-size:.8rem}

/* ---------------------------------------------------------------------
   12. FAQ
--------------------------------------------------------------------- */
#homeFaq > div,.fq{background:var(--panel)!important;border:var(--bw) solid var(--line)!important;border-radius:0!important;margin-bottom:10px!important}
#homeFaq > div.fop,.fq.op{box-shadow:4px 4px 0 var(--primary)}
#homeFaq > div > div:first-child,.fq-q{padding:1.05rem 1.25rem!important;font-family:var(--F)!important;font-weight:600!important;font-size:.98rem!important;color:var(--ink)!important}
.farr,.fq-arr{font-size:0!important;width:26px;height:26px;flex-shrink:0;border:var(--bw) solid var(--line);border-radius:0;position:relative;transition:transform .22s var(--ease),background-color .2s!important}
.farr::before,.fq-arr::before{content:'';position:absolute;left:50%;top:44%;width:7px;height:7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.fop .farr,.fq.op .fq-arr{background:var(--bar);border-color:var(--bar)}
.fop .farr::before,.fq.op .fq-arr::before{border-color:#fff}
.fop .fans{max-height:600px!important}
.fq.op .fq-a{max-height:600px}
.fans p,.fq-a p{color:var(--text-muted)!important;font-size:.93rem!important;line-height:1.7!important;padding:0 1.25rem 1.15rem!important}

/* ---------------------------------------------------------------------
   13. CONTACT & FORMS — tool-panel inputs
--------------------------------------------------------------------- */
.ci{gap:1rem;margin-bottom:1rem}
.ci h4,.ic h4{font-family:var(--F);font-size:.7rem;font-weight:500;letter-spacing:.1em;color:var(--text-muted)}
.ci a,.ci p,.ic a,.ic p{font-family:var(--M);font-size:.9rem;color:var(--ink)}
.ci a:hover,.ic a:hover{color:var(--primary)}
.ic{border-radius:0;border:var(--bw) solid var(--line);background:var(--panel)}
.ic:hover{transform:none;border-color:var(--line);box-shadow:4px 4px 0 var(--primary)}
.map-w{border-radius:0;border:var(--bw) solid var(--line);height:220px}
.map-w iframe{filter:grayscale(1) contrast(1.05)}

.fm{border-radius:0;border:var(--bw) solid var(--line);border-top:6px solid var(--bar);background:var(--panel);padding:2rem;box-shadow:none!important;position:relative}
.fm > h3:first-child{margin:-2rem -2rem 1rem!important;padding:.9rem 2rem;background:var(--bar);color:var(--bar-text)!important;font-family:var(--H)!important;font-weight:500;font-size:1.35rem!important;letter-spacing:.01em}
.fm > h3:first-child + p{margin-bottom:1.4rem!important;font-family:var(--M);font-size:.78rem!important}
.fg{margin-bottom:1rem}
.fg label{font-family:var(--F);font-size:.72rem;font-weight:500;letter-spacing:.1em;color:var(--text-muted);margin-bottom:.4rem}
.fg input,.fg select,.fg textarea{background:var(--panel);border:var(--bw) solid var(--line);border-radius:0;padding:0 14px;height:48px;
  font-family:var(--M);font-size:.92rem;color:var(--ink);transition:box-shadow .15s var(--ease),border-color .15s var(--ease)}
.fg textarea{height:auto;min-height:100px;padding:12px 14px;line-height:1.55}
.fg input::placeholder,.fg textarea::placeholder{color:var(--text-faint)}
.fg input[type=file]{height:auto;padding:8px!important;font-size:.8rem;color:var(--text-muted)}
.fg input[type=file]::file-selector-button{height:32px;margin-right:12px;padding:0 14px;border:var(--bw) solid var(--line);border-radius:0;background:var(--bar);color:var(--bar-text);
  font:600 .66rem var(--F);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}
.fg select{padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B1F24' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
html:not(.lt) .fg select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ECEAE5' stroke-width='1.6'/%3E%3C/svg%3E")}
.fg select option{background:var(--panel);color:var(--ink)}
.f2{column-gap:1rem;row-gap:0}
.fmsg{border-radius:0;font-family:var(--M);font-size:.84rem;padding:11px 14px}
.fmsg.ok{background:color-mix(in srgb,var(--success) 10%,transparent);border:var(--bw) solid var(--success);color:var(--success)}
.fmsg.er{background:color-mix(in srgb,var(--danger) 9%,transparent);border:var(--bw) solid var(--danger);color:var(--danger)}
.ctg{gap:3rem}

/* Testimonials */
.tg{gap:1rem}
.tc{padding:1.5rem}
.tc-stars{color:var(--warning);letter-spacing:3px}
.tc-q{font-style:normal;color:var(--ink);font-size:.95rem;line-height:1.7;padding-left:1rem;border-left:3px solid var(--primary)}
.tc-n{font-family:var(--H);font-weight:500;font-size:1.05rem}
.tc-c{font-family:var(--M);font-size:.72rem;color:var(--text-faint)}

/* Centred CTA bands — double-rule title block */
section[style*="text-align:center"] .w{border:var(--bw) solid var(--line);outline:1px solid var(--line);outline-offset:4px;background:var(--panel-2);padding:3rem 2rem}
section[style*="text-align:center"] .sh{text-transform:uppercase}

/* 404 */
.nf-n{font-family:var(--H);font-weight:600;color:var(--ink);opacity:1;letter-spacing:.02em}
.nf-h{font-family:var(--H);font-weight:500;text-transform:uppercase}

/* ---------------------------------------------------------------------
   14. FOOTER — compact
--------------------------------------------------------------------- */
footer{background:var(--bar);border-top:var(--bw) solid var(--line);padding:34px var(--gutter) 18px;position:relative;color:#ECEAE5}
footer::before{content:'';position:absolute;left:0;right:0;top:4px;height:1px;background:rgba(255,255,255,.16)}
.ftg{max-width:none;margin:0 0 22px;display:grid;grid-template-columns:minmax(220px,1fr) 2.6fr;grid-template-areas:"brand pages" "brand services" "brand contact";gap:12px 56px;align-items:start}
.ftg > div:nth-child(1){grid-area:brand}
.ftg > div:nth-child(2){grid-area:pages}
.ftg > div:nth-child(3){grid-area:services}
.ftg > div:nth-child(4){grid-area:contact}
.ftl{font-family:var(--H);font-size:1.45rem;font-weight:600;letter-spacing:.01em;text-transform:uppercase;margin-bottom:.35rem}
.ftl b{color:var(--brand-red);font-weight:600}
footer .ftg > div:first-child p{font-size:.8rem;line-height:1.6;color:rgba(236,234,229,.6);max-width:300px}
footer .ftg > div:first-child p[style]{font-family:var(--M);font-size:.66rem!important;letter-spacing:.06em!important;opacity:1!important;color:var(--primary-on-dark)!important;margin:.1rem 0 .5rem!important}
.ftc{display:flex;gap:18px;align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ftg > div:nth-child(4){border-bottom:0}
.ftc h4{flex:0 0 78px;margin:0;padding:0;border:0;font-family:var(--M);font-size:.66rem;font-weight:500;letter-spacing:.08em;color:rgba(236,234,229,.45)}
.ftc ul{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:4px}
.ftc li{margin:0;display:flex;align-items:baseline}
.ftc li:not(:last-child)::after{content:"/";color:rgba(236,234,229,.25);margin:0 10px;font-size:.75rem}
.ftc a{font-size:.83rem;color:rgba(236,234,229,.78);transition:color .18s var(--ease)}
.ftc a:hover{color:#fff;padding-left:0;text-decoration:underline;text-underline-offset:3px}
.ftg > div:nth-child(4) a{font-family:var(--M);font-size:.8rem}
.ftb{max-width:none;margin:0;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.ftb p{font-family:var(--M);font-size:.68rem;color:rgba(236,234,229,.45)}
.ftb a{color:rgba(236,234,229,.75)}
.ftb a:hover{color:#fff}

/* ---------------------------------------------------------------------
   15. FLOATING CONTACT CONTROLS
--------------------------------------------------------------------- */
.fsb-wrap{gap:2px}
.fsb{width:44px;height:44px;border-radius:0;box-shadow:none;background:var(--bar);border:1px solid rgba(255,255,255,.12);border-left:0}
.fsb:hover{width:146px;box-shadow:none}
.fsb-ic{width:43px;min-width:43px;height:42px}
.fsb-ic svg{width:17px;height:17px}
.fsb-lbl{font-family:var(--F);font-size:.66rem;letter-spacing:.12em}
.fsb-wa{background:#1FA855}.fsb-wa:hover{background:#178D46}
.fsb-ph,.fsb-ig,.fsb-yt{background:var(--bar)}
.fsb-ph:hover{background:var(--primary)}
.fsb-ig:hover{background:#B4307A}
.fsb-yt:hover{background:#D10000}
.wap{width:52px;height:52px;border-radius:0;animation:none;box-shadow:none;border:var(--bw) solid rgba(0,0,0,.25);right:20px;bottom:20px;background:#1FA855}
.wap:hover{background:#178D46}
.mbar{background:var(--panel);border-top:var(--bw) solid var(--line);box-shadow:none}
.mb{background:transparent!important;color:var(--ink);font-family:var(--F);font-size:.58rem;font-weight:600;letter-spacing:.08em;gap:5px;border-left:1px solid var(--rule)}
.mb:first-child{border-left:0}
.mb svg{width:20px;height:20px}
.mb-wa svg{fill:#1FA855}
.mb-ph svg{fill:var(--primary)}
.mb-ig svg{fill:#B4307A}
.mb-yt svg{fill:#D10000}
.mb-qt{background:var(--primary)!important;color:#fff;border-left:0}
.mb:active{filter:none;background:var(--panel-2)!important}
.mb-qt:active{background:var(--bar)!important}

/* ---------------------------------------------------------------------
   16. MOTION
--------------------------------------------------------------------- */
[v]{transition:opacity .4s var(--ease),transform .4s var(--ease)}
[v=u],[v=f]{transform:translateY(12px)}
[v=l]{transform:translateX(-12px)}
[v=r]{transform:translateX(12px)}
[v=z]{transform:translateY(8px)}
[v].in{transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}
  [v]{opacity:1;transform:none}
  .hsl-bg{transform:none!important}
}

/* ---------------------------------------------------------------------
   17. RESPONSIVE
--------------------------------------------------------------------- */
@media(max-width:1200px){.nm a{padding:0 9px;letter-spacing:.08em}.nm a::after{left:9px;right:9px}.tog-l{display:none}.tog{padding:0 9px}}
@media(max-width:980px){.nm{display:none}.hb{display:flex}.tog-l{display:inline}}
@media(max-width:900px){
  section{padding:72px 5%}
  .ctg,.abt-g,.story-g{gap:2.25rem}
  .ftg{grid-template-columns:1fr;grid-template-areas:"brand" "pages" "services" "contact";gap:0}
  .ftg > div:nth-child(1){padding-bottom:14px}
}
@media(max-width:768px){
  .fsb-wrap,.wap{display:none}
  .hero{height:calc(100svh - 58px - env(safe-area-inset-bottom))}
}
@media(max-width:720px){
  .hero::before{display:none}
  .hsl-bg::after{background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(180deg,rgba(11,13,16,.75),rgba(11,13,16,.86))}
  .tl-half{grid-template-columns:1fr!important;gap:2.5rem!important}
}
@media(max-width:600px){
  html.lt,html:not(.lt){--NH:60px}
  section{padding:56px 5%}
  .sh{font-size:clamp(1.75rem,8vw,2.2rem)}
  .nr .tog{display:none}
  .logo{font-size:1.35rem}
  .hero{min-height:620px}
  .hsl{padding:var(--NH) 0 150px}
  .hsl-ct h1{font-size:clamp(2.3rem,11.5vw,3rem);line-height:1}
  .hsl-ct p{font-size:.98rem;margin-bottom:1.5rem}
  .hbtns{flex-direction:column;align-items:stretch}
  .hbtns .btn{width:100%;max-width:none}
  .sl-dots{bottom:136px}
  .hsi{display:grid;grid-template-columns:repeat(3,1fr)}
  .hs-i{padding:11px 10px;border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .hs-i:nth-of-type(3n+2),.hs-i:nth-of-type(3n+3){border-left:1px solid rgba(255,255,255,.12)}
  .hs-i:last-of-type{border-right:0}
  .hs-n{font-size:1.15rem}
  .hs-n em{display:block;margin:4px 0 0;font-size:.56rem;color:rgba(255,255,255,.6)}
  .hs-l{font-size:.56rem;margin-top:2px}
  .ph,.bp-hero{padding:calc(var(--NH) + 26px) 5% 40px}
  .ph-ct,.bp-hero .bp-wrap{padding:1.5rem 1.25rem 1.4rem;outline-offset:3px}
  .ph-h,.bp-h1{font-size:clamp(2rem,9.5vw,2.6rem)}
  .ph-ct > div[style*="display:flex"]{flex-direction:column}
  .ph-ct > div[style*="display:flex"] .btn{width:100%}
  .fm{padding:1.4rem 1.1rem}
  .fm > h3:first-child{margin:-1.4rem -1.1rem 1rem!important;padding:.85rem 1.1rem}
  .svc-grid{grid-template-columns:1fr}
  .ggrid{grid-template-columns:1fr 1fr;gap:8px}
  .spec-r{padding:.65rem 1rem;grid-template-columns:1fr auto}
  .why-c{padding:1.2rem}
  section[style*="text-align:center"] .w{padding:2.2rem 1.25rem;outline-offset:3px}
  section[style*="text-align:center"] .w .btn{width:100%}
  .feat-g{grid-template-columns:1fr}
  .stat-box{grid-template-columns:1fr 1fr}
  .sb-n{font-size:1.7rem}
  footer{padding:28px 5% 16px}
  .ftc{flex-direction:column;gap:6px;padding:10px 0}
  .ftc h4{flex:none}
}
@media(max-width:440px){
  .ncta{display:none}
  .gi-ov > div{padding:.45rem .6rem}
  .gi-ov h4{font-size:.9rem}
  .mat-g{grid-template-columns:1fr 1fr}
  .btn{padding:0 16px}
  .hbtns .btn,.ctg .btn,.fm .btn{white-space:normal;line-height:1.3}
}
@media(max-width:360px){
  .logo{font-size:1.2rem}
  .hs-n{font-size:1rem}
  .mm a{font-size:1.45rem}
}

/* ---------------------------------------------------------------------
   18. TYPE ROLES (NestWorks mapping) — one place to see the 3-font system
   DISPLAY  Oswald        → logo, page/section headings, panel title bars, step names, big numbers
   TEXT     IBM Plex Sans → paragraphs, field labels, nav, buttons, FAQ questions
   DATA     IBM Plex Mono → meta lines, inputs/selects, specs values, chips/tags, phone/email, dates, counters, code
--------------------------------------------------------------------- */
code,kbd,samp,pre{font-family:var(--M);font-size:.88em}

/* ---------------------------------------------------------------------
   19. PROCESS ICONS (02 · Custom Metal Fabrication) — Flaticon line icons
   PNG alpha masks tinted with currentColor → follow primary / dark mode.
--------------------------------------------------------------------- */
.nx-ico{display:block;width:58px;height:58px;background-color:currentColor;-webkit-mask:var(--nx) center/contain no-repeat;mask:var(--nx) center/contain no-repeat}
.nx-laser-cutting{--nx:url("../img/process/laser-cutting.png")}
.nx-bending{--nx:url("../img/process/bending.png")}
.nx-welding{--nx:url("../img/process/welding.png")}
.nx-assembly{--nx:url("../img/process/assembly.png")}
.nx-finishing{--nx:url("../img/process/finishing.png")}
.nx-quality-check{--nx:url("../img/process/quality-check.png")}
.proc-ci:has(.nx-ico){width:90px;height:90px;color:var(--ink)}
.proc-g:has(.nx-ico)::before{top:61px}
.proc-i:hover .proc-ci:has(.nx-ico){color:#fff}
.proc-i:has(.nx-ico) h4{font-size:1.2rem;margin-top:.2rem}
@media(max-width:900px){
  .proc-g:has(.nx-ico)::before{top:40px;bottom:40px;left:39px}
  .proc-i:has(.nx-ico){grid-template-columns:80px 1fr}
  .proc-ci:has(.nx-ico){width:80px;height:80px}
  .nx-ico{width:52px;height:52px}
}

/* ---------------------------------------------------------------------
   20. HEADING FONT = ALATA (single weight 400)
   • font-synthesis off → browsers never fake a bold Alata
   • Alata is a wide geometric sans, so display sizes are tuned down
   To switch font later: page-head.php font link + --H token (line ~33).
--------------------------------------------------------------------- */
html{font-synthesis-weight:none}
.logo{font-size:1.4rem;letter-spacing:0}
.sh{font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.12;letter-spacing:0}
.hsl-ct h1{font-size:clamp(2.2rem,4.7vw,4.1rem);line-height:1.04;letter-spacing:0}
.ph-h,.bp-h1{font-size:clamp(2rem,4.3vw,3.4rem);line-height:1.06;letter-spacing:0}
.hs-n{font-size:clamp(1.1rem,1.9vw,1.55rem)}
.svc-cd .sno,.svc-cd h3,.svc-no,.svc-top h3,.spec-h,.mv-c h4,.bside-card h4{font-size:1.05rem;letter-spacing:0}
.mm a{font-size:1.45rem}
.ftl{font-size:1.3rem;letter-spacing:0}
.nf-n{letter-spacing:0}
section[style*="text-align:center"] .sh{text-transform:none}
@media(max-width:600px){
  .logo{font-size:1.2rem}
  .hsl-ct h1{font-size:clamp(1.8rem,8.6vw,2.4rem)}
  .ph-h,.bp-h1{font-size:clamp(1.7rem,7.6vw,2.2rem)}
  .sh{font-size:clamp(1.55rem,6.6vw,1.9rem)}
  .hs-n{font-size:.98rem}
}
@media(max-width:360px){.logo{font-size:1.05rem}.hsl-ct h1{font-size:1.75rem}}

/* ---------------------------------------------------------------------
   21. WHATSAPP — brand logo on every WhatsApp action
--------------------------------------------------------------------- */
.btn.btn-r[href*="wa.me"]{background:#1FA855;border-color:#1FA855;color:#fff}
.btn.btn-r[href*="wa.me"]:hover{background:#178D46;border-color:#178D46}
.btn.btn-o[href*="wa.me"] .fi-brands-whatsapp{color:#1FA855}
.btn.btn-o[href*="wa.me"]:hover .fi-brands-whatsapp{color:inherit}
.fi-brands-whatsapp{font-size:1.15em}
.hero .btn.btn-r[href*="wa.me"]:hover{background:#fff;color:#0B0D10;border-color:#fff}

/* ---------------------------------------------------------------------
   22. NEW CONTENT BLOCKS — panels band, industries, materials table,
       service-page content blocks, service icons
--------------------------------------------------------------------- */
.hero-single .sl-prev,.hero-single .sl-next,.hero-single .sl-dots{display:none}
.svc-ic .nx-ico{width:30px;height:30px}
.svc-cd:hover .svc-ic .nx-ico,.svc-c:hover .svc-ic .nx-ico{color:#fff}

/* Panels & facades band */
.fb-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center}
.fb-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}
.fb-list{display:grid;gap:10px}
.fb-item{display:flex;gap:14px;align-items:flex-start;padding:1rem 1.1rem;background:var(--panel);border:var(--bw) solid var(--line);transition:box-shadow .2s var(--ease)}
.fb-item:hover{box-shadow:4px 4px 0 var(--primary)}
.fb-ic{flex:0 0 42px;height:42px;display:flex;align-items:center;justify-content:center;border:var(--bw) solid var(--line);color:var(--primary);font-size:1.15rem}
.fb-item:hover .fb-ic{background:var(--primary);border-color:var(--primary);color:#fff}
.fb-item strong{display:block;font-family:var(--H);font-weight:400;font-size:1.08rem;color:var(--ink);margin-bottom:.2rem}
.fb-item span span{display:block;font-size:.88rem;color:var(--text-muted);line-height:1.55}

/* Industries */
.ind2-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-top:2.25rem}
.ind2{padding:1.3rem 1.3rem 1.4rem}
.ind2-ic{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:var(--bw) solid var(--line);color:var(--primary);font-size:1.2rem;margin-bottom:.9rem}
.ind2:hover .ind2-ic{background:var(--primary);border-color:var(--primary);color:#fff}
.ind2 h3{font-family:var(--H);font-weight:400;font-size:1.1rem;margin-bottom:.35rem;color:var(--ink)}
.ind2 p{font-size:.88rem;line-height:1.6;color:var(--text-muted)}

/* Materials table */
.mtab{margin-top:2rem;border:var(--bw) solid var(--line);background:var(--panel)}
.mtab-r{display:grid;grid-template-columns:1.2fr .9fr 1.6fr;gap:1rem;padding:.9rem 1.25rem;border-top:1px solid var(--rule);align-items:center}
.mtab-h{background:var(--bar);color:var(--bar-text);border-top:0;font-family:var(--M);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.75rem 1.25rem}
.mtab-m{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.mtab-m i{color:var(--primary);font-size:1.1rem}
.mtab-m strong{font-family:var(--H);font-weight:400;font-size:1.05rem;color:var(--ink)}
.mtab-m em{font-style:normal;font-family:var(--M);font-size:.66rem;padding:2px 6px;border:1px solid var(--line);color:var(--text-muted)}
.mtab-t{font-family:var(--M);font-size:.88rem;font-weight:500;color:var(--ink)}
.mtab-u{font-size:.88rem;color:var(--text-muted)}
.mtab-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}

/* Service landing pages — content blocks */
.cblocks{display:grid;gap:1rem;max-width:960px}
.cblock{display:grid;grid-template-columns:64px 1fr;background:var(--panel);border:var(--bw) solid var(--line)}
.cb-no{background:var(--bar);color:var(--primary-on-dark);font-family:var(--M);font-size:.8rem;font-weight:600;display:flex;align-items:flex-start;justify-content:center;padding-top:1.35rem}
.cb-body{padding:1.25rem 1.5rem 1.4rem}
.cb-body h2{font-family:var(--H);font-weight:400;font-size:1.35rem;color:var(--ink);margin-bottom:.6rem;line-height:1.2}
.cb-body p{color:var(--text-muted);font-size:.98rem;line-height:1.75}
.cb-body ul{margin:.8rem 0 0 1.1rem;color:var(--ink);font-size:.93rem;line-height:1.8}
.cb-body li::marker{color:var(--primary)}

@media(max-width:900px){.fb-grid{grid-template-columns:1fr;gap:2rem}}
@media(max-width:700px){
  .mtab-h{display:none}
  .mtab-r{grid-template-columns:1fr;gap:.3rem;padding:1rem}
  .mtab-r:nth-child(2){border-top:0}
  .mtab-t::before{content:'Thickness: ';font-family:var(--F);font-weight:400;color:var(--text-muted)}
  .cblock{grid-template-columns:1fr}
  .cb-no{justify-content:flex-start;padding:.55rem 1.25rem}
  .cb-body{padding:1.1rem 1.25rem 1.25rem}
}
/* slides 2+ use H2 (one H1 per page) — same look as the first slide's H1 */
.hsl-ct .hsl-h{font-family:var(--H);font-weight:400;color:#fff;text-transform:uppercase;font-size:clamp(2.2rem,4.7vw,4.1rem);line-height:1.04;letter-spacing:0;margin-bottom:1.25rem;max-width:860px}
.hsl-ct .hsl-h em{color:var(--primary-on-dark);font-style:normal}
@media(max-width:600px){.hsl-ct .hsl-h{font-size:clamp(1.8rem,8.6vw,2.4rem)}}
@media(max-width:360px){.hsl-ct .hsl-h{font-size:1.75rem}}
#homeFaq .fop .fans{max-height:800px!important}

/* 23. P0 facts release: long email/address never push the contact column wider than the phone */
.ic-in>div{min-width:0}
.ic a,.ic p,.ftc a{overflow-wrap:anywhere}
.ftb .ft-reg{margin-top:4px}
.crumb.upd{margin-top:.45rem;padding-top:0;border-top:0;font-family:var(--M);font-size:.62rem;letter-spacing:.06em;color:var(--muted,var(--T2));opacity:.85}