/* ============================================================
   RUFICS.IN — slate & signal red, ops-room
   Roschcrete Technologies Pvt. Ltd.
   Red is reserved for danger and one call to action. Nothing else.
   ============================================================ */

:root{
  --bg:#0B0F13;
  --bg2:#101720;
  --panel:#16202B;
  --panel2:#1E2B38;
  --line:#212D39;
  --line2:#374A59;
  --text:#E8EDF1;
  --muted:#94A6B4;
  --dim:#5E6E7C;
  --steel:#8FA0AE;
  --red:#F0402F;
  --red-hi:#FF5A45;
  --red-dim:#7E2C22;
  --cyan:#3FA9DA;
  --cyan-dim:#1E566F;
  --amber:#E8A33D;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cond:"Saira Condensed","Barlow Condensed",system-ui,sans-serif;
  --body:"Barlow","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;}
a{color:var(--text);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--red);outline-offset:3px;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--cond);font-weight:600;line-height:1.05;margin:0;}
.tick{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);display:block;margin-bottom:18px;
}

.tick.alert{color:var(--red);}
.tick > span{display:inline;}
.tick b{color:var(--red);font-weight:500;}

.h1-kw{margin:0 0 22px;}
.h1-kw .label{
  display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:16px;line-height:1.6;
}
.h1-main{display:block;font-size:clamp(2.3rem,5.6vw,4.2rem);max-width:17ch;}
h2.sec-t{font-size:clamp(1.9rem,3.8vw,3rem);max-width:20ch;margin-bottom:16px;}
.lede{font-size:1.05rem;line-height:1.72;color:var(--muted);max-width:66ch;margin:0 0 26px;}
p{margin:0 0 18px;}

/* ---------- classification strip ---------- */
.cls{
  background:var(--panel);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase;padding:7px 0;
}
.cls .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.cls b{color:var(--steel);font-weight:500;}

/* ---------- map grid ---------- */
.gridbg{position:relative;}
.gridbg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(143,160,174,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,160,174,.045) 1px,transparent 1px),
    linear-gradient(rgba(143,160,174,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,160,174,.08) 1px,transparent 1px);
  background-size:30px 30px,30px 30px,150px 150px,150px 150px;
}
.gridbg > *{position:relative;z-index:1;}

/* ---------- buttons ---------- */
a.btn,button.btn,.btn{
  display:inline-flex;align-items:center;gap:9px;background:#ECF0F2;color:#0B0F13;
  font-family:var(--body);font-weight:700;font-size:.93rem;text-decoration:none;
  padding:14px 26px;border:none;border-radius:0;cursor:pointer;
  transition:background .16s ease;
}
a.btn:hover,a.btn:focus-visible,button.btn:hover,button.btn:focus-visible,
.nav a.btn:hover,.nav a.btn:focus-visible{background:#FFFFFF;color:#0B0F13;}
/* .nav a is declared later at equal specificity, so the nav button needs its own rule */
.nav a.btn,.nav a.btn:link,.nav a.btn:visited{color:#0B0F13;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--text);
  border:1px solid var(--line2);font-weight:600;font-size:.93rem;text-decoration:none;
  padding:13px 24px;transition:border-color .16s ease,color .16s ease;
}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--steel);color:var(--text);}
.textlink{color:var(--muted);font-size:.92rem;text-decoration:none;border-bottom:1px solid var(--line2);}
.textlink:hover,.textlink:focus-visible{color:var(--text);border-color:var(--steel);}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(11,15,19,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);}
.brand-tx{display:flex;flex-direction:column;line-height:1;}
.brand-tx b{font-family:var(--cond);font-size:1.4rem;font-weight:700;letter-spacing:.11em;}
.brand-tx span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--dim);margin-top:4px;text-transform:uppercase;}
.nav{display:flex;align-items:center;gap:24px;}
.nav a{color:var(--muted);text-decoration:none;font-size:.89rem;font-weight:500;transition:color .16s ease;}
.nav a:not(.btn):hover,.nav a:not(.btn):focus-visible,.nav a[aria-current="page"]{color:var(--text);}
.nav .btn{padding:10px 18px;font-size:.84rem;}
.navtoggle{display:none;background:none;border:1px solid var(--line2);color:var(--text);padding:8px 12px;cursor:pointer;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;}

/* ---------- hero ---------- */
.hero{padding:92px 0 72px;border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:52px;}
.hud > div{background:var(--bg);padding:18px 20px;}
.hud dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-bottom:8px;}
.hud dd{margin:0;font-family:var(--cond);font-size:1.45rem;font-weight:600;line-height:1.1;}
.hud dd small{font-family:var(--mono);font-size:.68rem;color:var(--steel);margin-left:6px;letter-spacing:.1em;}

/* ---------- sections ---------- */
.sec{padding:88px 0;border-bottom:1px solid var(--line);}
.sec.alt{background:var(--bg2);}
.sec-head{max-width:70ch;margin-bottom:52px;}

/* ============================================================
   THE SIGNATURE SECTION — danger area collapse
   ============================================================ */
.da{padding:88px 0 0;border-bottom:1px solid var(--line);}
.da-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:start;}
.da-grid > *{min-width:0;}

.da-plan{position:sticky;position:-webkit-sticky;top:90px;align-self:start;}
.da-frame{border:1px solid var(--line2);background:var(--panel);padding:14px;position:relative;}
.da-frame::before,.da-frame::after{content:"";position:absolute;width:13px;height:13px;border:1px solid var(--steel);}
.da-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.da-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.da-frame svg{display:block;width:100%;height:auto;}
.da-meta{font-size:.72rem !important;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;
}
.da-meta b{color:var(--red);font-weight:500;}

/* plan elements */
.pl-out{fill:none;stroke:var(--line2);stroke-width:1;}
.pl-wire{fill:none;stroke:var(--steel);stroke-width:1;stroke-dasharray:6 5;opacity:.75;}
.pl-struct{fill:var(--panel2);stroke:var(--line2);stroke-width:1;}
.pl-lane{stroke:var(--line2);stroke-width:.8;stroke-dasharray:3 6;}
.pl-hard{fill:var(--steel);}
.pl-dark{fill:var(--dim);}
.pl-t{fill:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.06em;}
.pl-lbl{fill:var(--text);font-family:var(--mono);font-size:12px;letter-spacing:.06em;}

.fan{fill:var(--red);fill-opacity:.2;stroke:var(--red);stroke-width:1;opacity:0;transition:opacity .55s ease;}
.fan.on{opacity:1;}
.kit{opacity:0;transition:opacity .5s ease;}
.kit.on{opacity:1;}
.lining{fill:var(--red);}

/* steps */
.da-steps{padding-bottom:110px;}
.da-step{border-left:1px solid var(--line);padding:0 0 88px 30px;position:relative;opacity:.34;transition:opacity .4s ease;min-height:210px;}
.da-step.on{opacity:1;}
.da-step::before{
  content:"";position:absolute;left:-4px;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--line2);transition:background .3s ease,box-shadow .3s ease;
}
.da-step.on::before{background:var(--red);box-shadow:0 0 0 4px rgba(215,56,43,.18);}
.da-step .sn{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:var(--red);display:block;margin-bottom:10px;}
.da-step h3{font-size:1.6rem;margin-bottom:10px;}
.da-step p{color:var(--muted);margin:0 0 14px;font-size:.97rem;}
.da-step .prod{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text);
  border:1px solid var(--line2);padding:7px 12px;text-decoration:none;
}
.da-step .prod b{color:var(--steel);font-weight:500;}
.da-step .prod:hover{border-color:var(--steel);}
.da-close{border-top:1px solid var(--line);padding:34px 0 70px;}
.da-close p{font-family:var(--cond);font-size:clamp(1.4rem,2.8vw,2.1rem);color:var(--text);max-width:26ch;margin:0;line-height:1.15;}

/* ---------- anatomy list ---------- */
.anat{display:grid;grid-template-columns:1.06fr .94fr;gap:50px;align-items:start;}
.anat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.anat-list li{padding:16px 0;border-bottom:1px solid var(--line);}
.anat-list h3{font-family:var(--body);font-size:1rem;font-weight:600;margin-bottom:5px;}
.anat-list p{margin:0;font-size:.92rem;line-height:1.6;color:var(--muted);}
.anat-list .tag{font-family:var(--mono);font-size:.7rem;color:var(--cyan);letter-spacing:.14em;display:block;margin-bottom:6px;}

/* ---------- products ---------- */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.prod{background:var(--bg);padding:28px 24px;display:flex;flex-direction:column;gap:14px;}
.prod .pico{height:70px;}
.prod h3{font-family:var(--body);font-size:1.04rem;font-weight:600;line-height:1.3;}
.prod p{margin:0;font-size:.91rem;line-height:1.6;color:var(--muted);}
.prod .pn{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;color:var(--cyan);}

/* ---------- spec ---------- */
.specwrap{display:grid;grid-template-columns:1fr .95fr;gap:50px;align-items:start;}
.speclist{margin:0;border-top:1px solid var(--line);}
.speclist > div{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);}
.speclist dt{margin:0;font-size:.9rem;color:var(--muted);}
.speclist dd{margin:0;font-size:.95rem;font-weight:600;text-align:right;font-family:var(--mono);}
.gated{margin-top:26px;border:1px solid var(--line2);border-left:2px solid var(--amber);background:var(--panel);padding:24px;}
.gated .gt{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;color:var(--amber);text-transform:uppercase;margin-bottom:12px;display:block;}
.gated p{margin:0 0 16px;font-size:.93rem;line-height:1.6;color:var(--muted);}
.gated ul{margin:0 0 18px;padding-left:18px;color:var(--dim);font-size:.9rem;line-height:1.85;}

/* ---------- comparison ---------- */
.cmp{border:1px solid var(--line);}
.cmp-head,.cmp-row{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:1px;background:var(--line);}
.cmp-head > span,.cmp-row > span{background:var(--bg);padding:15px 20px;font-size:.92rem;line-height:1.55;color:var(--muted);}
.cmp-head > span{background:var(--panel);color:var(--text);font-family:var(--cond);font-size:1.18rem;font-weight:600;display:flex;flex-direction:column;gap:4px;}
.cmp-head > span em{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;}
.cmp-row > span:first-child{color:var(--text);font-weight:600;}
.cmp-row > span.on{color:var(--text);border-left:2px solid var(--steel);}
.cmp-row:nth-child(even) > span{background:var(--bg2);}

/* ---------- ledger ---------- */
.ledger{border-top:1px solid var(--line);}
.lrow{
  display:grid;grid-template-columns:56px 1fr 150px 116px 26px;gap:18px;align-items:center;
  padding:0 6px;border-bottom:1px solid var(--line);cursor:pointer;width:100%;text-align:left;
  background:transparent;color:inherit;font:inherit;border-left:2px solid transparent;
  transition:background .18s ease,border-color .18s ease;
}
.lrow:hover,.lrow[aria-expanded="true"]{background:var(--panel);border-left-color:var(--steel);}
.lrow .idx{font-family:var(--mono);font-size:.7rem;color:var(--cyan);letter-spacing:.08em;padding:22px 0;}
.lrow .site{font-family:var(--cond);font-size:1.55rem;font-weight:600;padding:18px 0;}
.lrow .site em{font-style:normal;color:var(--dim);font-size:.92rem;font-family:var(--mono);margin-left:10px;letter-spacing:.08em;}
.lrow .st{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.09em;}
.lrow .scope{font-family:var(--mono);font-size:.72rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;}
.lrow .chev{color:var(--muted);font-size:1rem;text-align:right;transition:transform .2s ease;}
.lrow[aria-expanded="true"] .chev{transform:rotate(45deg);color:var(--steel);}
.lpanel{display:none;border-bottom:1px solid var(--line);background:var(--panel);}
.lpanel.open{display:block;}
.lpanel .lp-in{padding:6px 6px 26px 74px;display:grid;grid-template-columns:1.2fr .8fr;gap:36px;}
.lpanel p{margin:0;font-size:.94rem;line-height:1.66;color:var(--muted);max-width:60ch;}
.lpanel dl{margin:0;display:grid;gap:8px;align-self:start;}
.lpanel dl > div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line2);padding-bottom:7px;}
.lpanel dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;}
.lpanel dd{margin:0;font-size:.87rem;font-weight:600;}
.ledger-foot{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center;padding-top:24px;font-family:var(--mono);font-size:.7rem;color:var(--dim);letter-spacing:.08em;}

/* ---------- caps / process ---------- */
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.caps > div{background:var(--bg);padding:26px 24px;}
.caps h3{font-family:var(--body);font-size:1.02rem;font-weight:600;margin-bottom:8px;}
.caps p{margin:0;font-size:.92rem;line-height:1.62;color:var(--muted);}
.caps .cn{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--cyan);display:block;margin-bottom:10px;}

.proc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.proc-step{background:var(--bg);padding:26px 22px;position:relative;}
.proc-step::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--steel);transition:width .6s ease;}
.proc-step.in::after{width:100%;}
.ps-n{font-family:var(--mono);font-size:.74rem;letter-spacing:.15em;color:var(--cyan);display:block;margin-bottom:12px;}
.proc-step h3{font-family:var(--body);font-size:1rem;font-weight:600;margin-bottom:8px;}
.proc-step p{margin:0;font-size:.89rem;line-height:1.6;color:var(--muted);}

/* ---------- kill house teaser ---------- */
.kh{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.kh-points{list-style:none;margin:0 0 26px;padding:0;}
.kh-points li{position:relative;padding:9px 0 9px 24px;font-size:.96rem;color:var(--muted);}
.kh-points li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--steel);}

/* ---------- approvals ---------- */
.appr{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.appr > div{background:var(--bg);padding:26px 24px;}
.appr h3{font-family:var(--body);font-size:1rem;font-weight:600;margin-bottom:8px;}
.appr p{margin:0;font-size:.91rem;line-height:1.6;color:var(--muted);}
.disclaimer{margin-top:22px;font-family:var(--mono);font-size:.7rem;line-height:1.8;color:var(--dim);letter-spacing:.04em;}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);max-width:900px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;position:relative;font-size:1.01rem;font-weight:600;line-height:1.4;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;color:var(--cyan);font-size:1.25rem;font-weight:400;}
.faq details[open] summary::after{content:"\2212";}
.faq p{margin:0 0 20px;font-size:.96rem;line-height:1.72;color:var(--muted);max-width:74ch;}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:start;}
.cblock{font-size:.94rem;line-height:1.78;color:var(--muted);}
.cblock strong{display:block;color:var(--text);font-size:.74rem;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;margin:22px 0 7px;}
.cblock a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line2);}
.cblock a:hover{border-color:var(--steel);}
.socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;}
.socials a{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line2);color:var(--muted);padding:7px 12px;text-decoration:none;}
.socials a:hover,.socials a:focus-visible{border-color:var(--steel);color:var(--text);}

form.enq{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
form.enq .full{grid-column:1/-1;}
form.enq label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;color:var(--dim);text-transform:uppercase;margin-bottom:7px;}
form.enq input,form.enq select,form.enq textarea{
  width:100%;background:var(--panel);border:1px solid var(--line2);color:var(--text);
  font-family:var(--body);font-size:.94rem;padding:12px 14px;border-radius:0;
}
form.enq textarea{min-height:112px;resize:vertical;}
form.enq input::placeholder,form.enq textarea::placeholder{color:#4E5B66;}
form.enq input:focus,form.enq select:focus,form.enq textarea:focus{border-color:var(--steel);outline:none;}
.formnote{font-family:var(--mono);font-size:.75rem;color:var(--dim);letter-spacing:.05em;margin:0;}

/* ---------- footer ---------- */
.site-foot{background:var(--bg2);border-top:1px solid var(--line);padding:62px 0 28px;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;}
.foot-brand p{font-size:.92rem;line-height:1.66;color:var(--muted);max-width:34ch;margin:16px 0 0;}
.site-foot h4{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;font-weight:500;}
.site-foot ul{list-style:none;margin:0;padding:0;}
.site-foot li{margin-bottom:10px;}
.site-foot li a{color:var(--muted);text-decoration:none;font-size:.91rem;}
.site-foot li a:hover,.site-foot li a:focus-visible{color:var(--text);}
.foot-bot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-top:50px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.75rem;color:var(--dim);letter-spacing:.06em;}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:10px;
  text-decoration:none;background:#25D366;border:1px solid #1FAE53;color:#07301A;
  font-weight:700;font-size:.9rem;padding:13px 20px;box-shadow:0 10px 28px rgba(0,0,0,.5);
  transition:background .18s ease;
}
.wa-float:hover,.wa-float:focus-visible{background:#2EE072;color:#07301A;}

/* ---------- rail ---------- */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:50;display:none;flex-direction:column;gap:12px;}
.rail a{display:block;padding:3px;position:relative;}
.rail a span{display:block;width:7px;height:7px;background:var(--line2);transition:background .2s ease,transform .2s ease;}
.rail a:hover span,.rail a.on span{background:var(--steel);transform:scale(1.45);}
.rail a::after{
  content:attr(data-t);position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);padding:4px 9px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.rail a:hover::after,.rail a:focus-visible::after{opacity:1;}
@media (min-width:1340px){.rail{display:flex;}}

/* ---------- article ---------- */
.article{max-width:760px;margin:0 auto;padding:66px 0 30px;}
.article h2{font-size:1.6rem;margin:38px 0 14px;}
.article h3{font-size:1.18rem;margin:28px 0 10px;font-family:var(--body);font-weight:600;}
.article p,.article li{color:var(--muted);font-size:1rem;line-height:1.8;}
.article ul{padding-left:20px;}
.article a{color:var(--text);border-bottom:1px solid var(--line2);text-decoration:none;}
.article a:hover{border-color:var(--steel);}
.article .meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;margin-bottom:22px;}
.crumb{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--dim);padding:24px 0 0;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--text);}
.postcard{display:block;border:1px solid var(--line);background:var(--panel);padding:28px;text-decoration:none;transition:border-color .18s ease;}
.postcard:hover{border-color:var(--steel);}
.postcard h3{font-family:var(--cond);font-size:1.5rem;color:var(--text);margin-bottom:10px;}
.postcard p{color:var(--muted);font-size:.94rem;margin:0;}

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

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid,.anat,.specwrap,.kh,.contact{grid-template-columns:1fr;gap:36px;}
  .prods{grid-template-columns:repeat(2,1fr);}
  .appr,.foot-grid{grid-template-columns:repeat(2,1fr);}
  .proc{grid-template-columns:repeat(2,1fr);}
  .lpanel .lp-in{grid-template-columns:1fr;gap:20px;}
  .da-grid{grid-template-columns:1fr;gap:26px;}
  .da-plan{position:sticky;position:-webkit-sticky;top:76px;background:var(--bg);padding-bottom:10px;z-index:5;}
}
@media (max-width:760px){
  .nav{
    position:absolute;top:70px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:10px 26px 18px;display:none;
  }
  .nav.open{display:flex;}
  .nav a{padding:11px 0;width:100%;border-bottom:1px solid var(--line);}
  .nav .btn{margin-top:12px;}
  .navtoggle{display:inline-block;}
  .hero{padding:56px 0 48px;}
  .h1-main{max-width:none;}
  .sec,.da{padding:58px 0;}
  .sec-head{margin-bottom:32px;}
  .hud{grid-template-columns:repeat(2,1fr);}
  .prods,.caps,.appr,.foot-grid,.proc{grid-template-columns:1fr;}
  form.enq{grid-template-columns:1fr;}
  .da-step{padding-bottom:56px;}
  .da-steps{padding-bottom:40px;}
  .lrow{grid-template-columns:40px 1fr 22px;gap:12px;}
  .lrow .st,.lrow .scope{display:none;}
  .lrow .site{font-size:1.25rem;}
  .lrow .site em{display:block;margin:4px 0 0;font-size:.7rem;}
  .lpanel .lp-in{padding:6px 6px 22px 52px;}
  .cmp-head{display:none;}
  .cmp-row{grid-template-columns:1fr;gap:0;border-bottom:1px solid var(--line);}
  .cmp-row > span{padding:12px 16px;display:flex;flex-direction:column;gap:4px;}
  .cmp-row > span::before{content:attr(data-l);font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);}
  .cmp-row > span:first-child{background:var(--panel);}
  .wa-float span{display:none;}
  .wa-float{padding:14px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
  .rv{opacity:1;transform:none;}
  .da-step{opacity:1;}
}

/* ============================================================
   CRAFT LAYER — ghost type, parallax, gallery, network
   ============================================================ */

/* ---------- background ghost typography ---------- */
.ghost{
  position:absolute;left:0;right:0;pointer-events:none;overflow:hidden;
  font-family:var(--cond);font-weight:700;line-height:.82;
  letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(143,160,174,.11);
  font-size:clamp(6rem,17vw,15rem);z-index:0;user-select:none;
}
.ghost.t{top:-.1em;}
.ghost.b{bottom:-.22em;}
.ghost span{display:block;transform:translateX(var(--gx,0px));transition:none;}
.sec,.da,.hero{position:relative;}
.sec > .wrap,.da > .wrap,.hero > .wrap{position:relative;z-index:2;}
.sec:hover .ghost{-webkit-text-stroke-color:rgba(215,56,43,.16);transition:-webkit-text-stroke-color .8s ease;}

/* ---------- parallax ---------- */
.px{will-change:transform;}

/* ---------- directional reveals ---------- */
.rv-l{opacity:0;transform:translateX(-26px);transition:opacity .7s ease,transform .7s ease;}
.rv-r{opacity:0;transform:translateX(26px);transition:opacity .7s ease,transform .7s ease;}
.rv-l.in,.rv-r.in{opacity:1;transform:none;}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.gal figure{position:relative;margin:0;background:var(--bg);overflow:hidden;aspect-ratio:4/3;}
.gal img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.55) contrast(1.05) brightness(.82);
  transform:scale(1.02);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .6s ease;
}
.gal figure:hover img,.gal figure:focus-within img{transform:scale(1.09);filter:grayscale(0) contrast(1.05) brightness(1);}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(180deg,rgba(11,15,19,0),rgba(11,15,19,.92));
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
}
.gal figcaption b{color:var(--text);font-weight:500;}
.gal figure::after{
  content:"";position:absolute;inset:0;border:1px solid transparent;
  transition:border-color .4s ease;pointer-events:none;
}
.gal figure:hover::after{border-color:rgba(215,56,43,.55);}

/* ---------- the network ---------- */
.net{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.net a{
  position:relative;background:var(--bg);padding:0;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;overflow:hidden;
}
.net .nimg{overflow:hidden;background:var(--panel);border-bottom:1px solid var(--line);}
.net .nimg img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.7) brightness(.6);transform:scale(1.03);
  transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s ease;
}
.net a:hover .nimg img,.net a:focus-visible .nimg img{transform:scale(1.1);filter:grayscale(.15) brightness(.82);}
.net .nbody{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column;gap:7px;}
.net .ndom{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);}
.net h3{font-size:1.28rem;}
.net p{margin:0;font-size:.87rem;line-height:1.55;color:var(--muted);}
.net .nowns{
  margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line);
}
.net .ngo{
  position:absolute;top:0;right:0;padding:10px 14px;background:var(--panel);
  font-family:var(--mono);font-size:.74rem;color:var(--steel);
  opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;
}
.net a:hover .ngo,.net a:focus-visible .ngo{opacity:1;transform:none;}
.net a.self{background:var(--panel);box-shadow:inset 0 2px 0 var(--red);}
.net a.self .ndom{color:var(--red);}

/* ---------- figure plate (photo + caption rail) ---------- */
.plate{position:relative;margin:0;border:1px solid var(--line2);background:var(--panel);padding:12px;}
.plate img{display:block;width:100%;height:auto;filter:grayscale(.35) brightness(.9);}
.plate figcaption{
  margin-top:10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between;gap:10px;
}
.plate figcaption b{color:var(--steel);font-weight:500;}

@media (max-width:1000px){
  .gal{grid-template-columns:repeat(2,1fr);}
  .net{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .gal{grid-template-columns:1fr;}
  .ghost{font-size:clamp(4rem,22vw,7rem);}
}
@media (prefers-reduced-motion:reduce){
  .rv-l,.rv-r{opacity:1;transform:none;}
  .px{transform:none !important;}
}




/* ============================================================
   SECTION VARIANTS — so no two read the same
   ============================================================ */

/* running section index, top right of each band */
.sec[data-n]::before,.da[data-n]::before{
  content:attr(data-n);position:absolute;top:24px;right:26px;z-index:3;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--dim);
}

/* 02 / 07 — tinted band with a cyan hairline */
.sec--tint{background:var(--bg2);border-top:1px solid var(--cyan-dim);}

/* 03 — split: heading column beside the content */
.sec--split .sec-head{
  max-width:none;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:end;
  padding-bottom:30px;border-bottom:1px solid var(--line);
}
.sec--split .sec-head .lede{margin:0;}

/* 04 — full bleed, edge to edge */
.sec--bleed{background:#070A0D;padding-left:0;padding-right:0;}
.sec--bleed > .wrap{max-width:none;padding:0 26px;}
.sec--bleed .gal{border-left:0;border-right:0;}

/* 05 — raised plate */
.sec--raise{background:var(--panel);}
.sec--raise .cmp{box-shadow:0 24px 60px rgba(0,0,0,.35);}

/* 06 / 10 — deep bands */
.sec--dark{background:#070A0D;}

/* 08 / 11 — top rule that draws across on entry */
.sec--rule::after{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--cyan);
  transition:width 1.2s cubic-bezier(.2,.7,.2,1);
}
.sec--rule.lit::after{width:100%;}

/* 09 — red-lit band */
.sec--glow{background:var(--bg2);}
.sec--glow::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 320px at 22% 42%,rgba(240,64,47,.10),transparent 64%);
}

/* 12 — narrow, centred reading column */
.sec--narrow{background:var(--bg2);}
.sec--narrow > .wrap{max-width:880px;}
.sec--narrow .sec-head{margin-bottom:38px;}

/* 13 — the call */
.sec--call{background:#0E1116;border-top:2px solid var(--red);}

/* card polish shared across variants */
.prod{transition:background .3s ease,transform .3s ease;}
.prod:hover{background:var(--panel);transform:translateY(-3px);}
.prod .pico{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.prod:hover .pico{transform:translateY(-3px) scale(1.04);}
.caps > div{position:relative;transition:background .3s ease;}
.caps > div::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cyan);
  transform:scaleY(0);transform-origin:top;transition:transform .35s ease;
}
.caps > div:hover{background:var(--panel);}
.caps > div:hover::before{transform:scaleY(1);}
.appr > div{position:relative;}
.appr > div::after{
  content:"";position:absolute;right:14px;bottom:14px;width:10px;height:10px;
  border-right:1px solid var(--cyan);border-bottom:1px solid var(--cyan);opacity:.5;
}
.proc-step::after{background:var(--cyan);}

/* ---------- stage chips ---------- */
.da-chips{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;}
.da-chips button{
  flex:1;min-width:52px;background:transparent;border:1px solid var(--line2);color:var(--dim);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;padding:9px 0;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.da-chips button:hover{border-color:var(--steel);color:var(--text);}
.da-chips button[aria-selected="true"]{background:#ECF0F2;border-color:#ECF0F2;color:#0B0F13;font-weight:700;}
.da-step{cursor:pointer;}

/* slightly stronger fan so the change is unmistakable */
.fan{fill-opacity:.26;}
.fan.on{opacity:1;}

@media (max-width:1000px){
  .sec--split .sec-head{grid-template-columns:1fr;gap:18px;align-items:start;}
}
@media (max-width:760px){
  .sec[data-n]::before,.da[data-n]::before{display:none;}
  .sec--bleed > .wrap{padding:0 18px;}
}

.net .nimg svg{display:block;width:100%;height:auto;}
.net a:hover .nimg,.net a:focus-visible .nimg{background:var(--panel2);}
.net .nimg{transition:background .3s ease;}
@media (max-width:1000px){.net{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){.net{grid-template-columns:1fr;}}


/* ============================================================
   PANEL SECTION — datasheet layout
   ============================================================ */
.pn-top{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center;}

.pn-draw{position:relative;border:1px solid var(--line2);background:var(--panel);padding:22px;}
.pn-draw::before,.pn-draw::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--cyan);}
.pn-draw::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.pn-draw::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.pn-draw svg{display:block;width:100%;height:auto;}
.pn-cap{
  display:flex;justify-content:space-between;gap:12px;margin-top:14px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.pn-cap b{color:var(--cyan);font-weight:500;}

.dsheet{border-top:1px solid var(--line2);}
.dsheet .dsrow{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.dsheet dt{font-size:.86rem;color:var(--muted);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;font-size:.74rem;}
.dsheet dd{margin:0;font-family:var(--cond);font-size:1.12rem;font-weight:600;text-align:right;letter-spacing:.01em;}
.dsheet .dsrow.key dd{color:var(--cyan);font-size:1.35rem;}
.dsheet .dsrow:hover{background:rgba(63,169,218,.05);}

.pn-band{
  margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding:44px 0;
}
.pn-quote{
  font-family:var(--cond);font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:600;
  line-height:1.12;margin:0;max-width:16ch;
}
.pn-quote em{font-style:normal;color:var(--cyan);}
.pn-band p{margin:0 0 16px;font-size:.96rem;line-height:1.7;color:var(--muted);}
.pn-band p:last-child{margin:0;}

.gate-wide{
  margin-top:44px;border:1px solid var(--line2);border-left:2px solid var(--amber);
  background:var(--panel);padding:30px 32px;
  display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start;
}
.gate-wide .gt{font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;color:var(--amber);text-transform:uppercase;display:block;margin-bottom:12px;}
.gate-wide h3{font-size:1.4rem;margin-bottom:12px;}
.gate-wide p{margin:0 0 18px;font-size:.93rem;line-height:1.62;color:var(--muted);}
.gate-wide ul{
  list-style:none;margin:0 0 20px;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px;
}
.gate-wide li{
  position:relative;padding:9px 0 9px 20px;font-size:.9rem;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.gate-wide li::before{content:"";position:absolute;left:0;top:18px;width:9px;height:1px;background:var(--amber);}

@media (max-width:1000px){
  .pn-top,.pn-band,.gate-wide{grid-template-columns:1fr;gap:32px;}
  .pn-quote{max-width:none;}
}
@media (max-width:680px){
  .gate-wide ul{grid-template-columns:1fr;}
}

/* comparison: concrete column recommended */
.cmp-head > span.rec{box-shadow:inset 0 3px 0 var(--cyan);}
.cmp-badge{display:inline-block;margin-left:8px;padding:2px 7px;background:var(--cyan);color:#06121A;font-weight:600;letter-spacing:.12em;font-size:.6rem;vertical-align:1px;}
.cmp-row > span.on{border-left:2px solid var(--cyan);}
.cmp-price{color:var(--cyan);font-family:var(--cond);font-size:1.12rem;font-weight:600;}
@media (max-width:760px){.cmp-badge{margin-left:0;margin-top:4px;}}