/* ============================================================
   LSM Industries — shared stylesheet (Premium Navy)
   Edit design tokens / header here → applies to every page.
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --navy:#1B2A5E; --navy-deep:#111B40; --navy-mid:#22336B;
  --ink:#151b28; --soft:#5a6478; --faint:#8a93a6;
  --steel:#5C9BD6; --steel-deep:#2F6DAB; --ice:#dbe8f6;
  --ground:#ffffff; --mist:#F4F6FA; --mist2:#eef1f7; --line:#e3e8f1;
  --r:14px;
  --shadow:0 1px 2px rgba(17,27,64,.05), 0 18px 44px rgba(17,27,64,.09);
  --shadow-sm:0 1px 2px rgba(17,27,64,.06), 0 8px 22px rgba(17,27,64,.07);
  --disp:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ background:var(--ground); color:var(--ink); font-family:var(--disp); line-height:1.65; -webkit-font-smoothing:antialiased; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.prose-wrap{ max-width:860px; margin:0 auto; padding:0 28px; }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-deep); font-weight:600; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none; font-family:inherit; font-weight:700; border-radius:999px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--navy); color:#fff; padding:14px 26px; font-size:15px; box-shadow:0 10px 24px rgba(27,42,94,.28); }
.btn-primary:hover{ background:var(--navy-mid); }
.btn-light{ background:#fff; color:var(--navy); padding:14px 26px; font-size:15px; box-shadow:0 10px 24px rgba(0,0,0,.16); }
.btn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); padding:13px 24px; font-size:15px; }
.btn-ghost:hover{ border-color:#fff; }
.btn-wa{ background:#25D366; color:#0a3d1c; padding:14px 24px; font-size:15px; }
.btn-block{ width:100%; justify-content:center; }

/* utility bar */
.util{ background:var(--navy-deep); color:#c6cde4; font-size:12.5px; }
.util .wrap{ display:flex; justify-content:space-between; align-items:center; height:38px; font-family:var(--mono); letter-spacing:.02em; }
.util .r{ display:flex; gap:22px; }
.util a:hover{ color:#fff; }

/* header + nav */
header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header .wrap{ display:flex; align-items:center; height:72px; gap:24px; }
.logo{ font-weight:900; font-size:28px; color:var(--navy); letter-spacing:.02em; display:inline-flex; align-items:center; }
.logo img{ height:36px; width:auto; display:block; }
footer .logo img{ height:34px; filter:brightness(0) invert(1); }

/* language toggle */
.lang{ display:inline-flex; gap:2px; align-items:center; border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang a{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:5px 11px; border-radius:999px; color:var(--soft); text-transform:none; }
.lang a.on{ background:var(--navy); color:#fff; }
.lang a:hover:not(.on){ color:var(--navy); }
.navtoggle{ display:none; }
.hamb{ display:none; margin-left:auto; width:44px; height:44px; border-radius:10px; cursor:pointer; align-items:center; justify-content:center; }
.hamb svg{ width:26px; height:26px; color:var(--navy); }
nav.main{ display:flex; gap:24px; margin-left:8px; align-items:center; }
nav.main > a{ font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
nav.main > a:hover{ color:var(--steel-deep); }
.dd{ position:relative; }
.dd .ddlabel{ display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.dd .ddlabel:hover{ color:var(--steel-deep); }
.dd .ddlabel svg{ width:12px; height:12px; }
.dd .menu{ position:absolute; top:130%; left:50%; transform:translateX(-50%) translateY(6px); background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; min-width:230px; opacity:0; visibility:hidden; transition:.18s; }
.dd:hover .menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dd .menu a{ display:block; padding:11px 14px; border-radius:8px; font-size:13px; text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink); }
.dd .menu a:hover{ background:var(--mist); color:var(--navy); }
header .btn{ margin-left:auto; }

/* hero (home) */
.hero{ position:relative; color:#fff; overflow:hidden;
  background:radial-gradient(120% 130% at 82% 12%, rgba(92,155,214,.30) 0%, rgba(17,27,64,0) 52%), linear-gradient(150deg,#16234f 0%,#111B40 46%,#0e1636 100%); }
.hero .bgimg,.phero .bgimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.20; z-index:0; }
.hero::before{ content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(2px 2px at 18% 34%,rgba(255,255,255,.16),transparent),radial-gradient(2px 2px at 66% 62%,rgba(255,255,255,.12),transparent),radial-gradient(1.5px 1.5px at 88% 30%,rgba(255,255,255,.14),transparent),radial-gradient(1.5px 1.5px at 40% 80%,rgba(255,255,255,.10),transparent); }
.hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.12fr .88fr; gap:52px; align-items:center; padding:78px 28px 84px; }
.hero h1{ font-weight:800; font-size:clamp(34px,4.8vw,58px); line-height:1.03; letter-spacing:-.02em; margin:20px 0 0; text-wrap:balance; }
.hero h1 .hl{ color:var(--steel); }
.hero .lede{ margin:22px 0 30px; font-size:17.5px; color:#cdd6ee; max-width:52ch; }
.hero .cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero .trustline{ margin-top:30px; display:flex; gap:22px; flex-wrap:wrap; font-size:13px; color:#aab5da; font-family:var(--mono); }
.hero .trustline span{ display:flex; align-items:center; gap:8px; }
.hero .trustline .tick{ color:var(--steel); font-weight:700; }

/* spec panel */
.spec{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:10px; backdrop-filter:blur(6px); box-shadow:0 30px 60px rgba(0,0,0,.28); }
.spec .head{ padding:16px 18px 14px; display:flex; align-items:center; justify-content:space-between; }
.spec .head .t{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice); }
.spec .head .badge{ font-family:var(--mono); font-size:11px; color:#0e1636; background:var(--steel); padding:3px 9px; border-radius:20px; font-weight:700; }
.spec .row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 18px; border-top:1px solid rgba(255,255,255,.10); }
.spec .k{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:#9fabce; }
.spec .v{ font-weight:600; font-size:14px; color:#fff; text-align:right; }
.spec .foot{ padding:16px 18px 6px; }
.spec .foot .btn{ width:100%; justify-content:center; }

/* interior page hero */
.phero{ position:relative; color:#fff; overflow:hidden;
  background:radial-gradient(120% 130% at 85% 8%, rgba(92,155,214,.28) 0%, rgba(17,27,64,0) 55%), linear-gradient(150deg,#16234f,#111B40 55%,#0e1636); }
.phero::before{ content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.15),transparent),radial-gradient(2px 2px at 70% 60%,rgba(255,255,255,.12),transparent),radial-gradient(1.5px 1.5px at 88% 34%,rgba(255,255,255,.14),transparent); }
.phero .wrap{ position:relative; z-index:1; padding:32px 28px 62px; }
.crumb{ font-family:var(--mono); font-size:12px; color:#9fabce; margin-bottom:24px; }
.crumb a:hover{ color:#fff; } .crumb span{ color:var(--steel); }
.phero h1{ font-weight:800; font-size:clamp(30px,4.4vw,52px); line-height:1.04; letter-spacing:-.02em; max-width:18ch; text-wrap:balance; }
.phero p{ margin:20px 0 28px; font-size:17.5px; color:#cdd6ee; max-width:60ch; }
.phero .cta{ display:flex; gap:14px; flex-wrap:wrap; }
.mhead{ display:flex; align-items:center; gap:20px; margin-bottom:8px; flex-wrap:wrap; }
.mbadge{ font-weight:800; font-size:20px; color:#fff; padding:10px 16px; border-radius:12px; letter-spacing:-.01em; box-shadow:0 10px 26px rgba(0,0,0,.3); }
.chips{ margin-top:28px; display:flex; gap:10px; flex-wrap:wrap; }
.chip{ font-family:var(--mono); font-size:12px; color:#dbe4f7; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:7px 14px; }

/* stat band */
.stats{ background:var(--navy); color:#fff; }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.stats .s{ padding:28px 24px; text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.stats .s:last-child{ border-right:none; }
.stats .s b{ display:block; font-weight:800; font-size:clamp(24px,2.8vw,32px); letter-spacing:-.02em; }
.stats .s b i{ font-style:normal; color:var(--steel); }
.stats .s span{ font-size:12.5px; color:#b7c0e0; }

/* sections */
section{ padding:78px 0; }
.sec-mist{ background:var(--mist); }
.sec-head{ text-align:center; max-width:60ch; margin:0 auto 46px; }
.sec-head h2{ font-weight:800; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.02em; line-height:1.08; margin-top:12px; text-wrap:balance; }
.sec-head p{ color:var(--soft); margin-top:14px; font-size:16px; }

/* prose */
.prose h2{ font-weight:800; font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance; }
.prose h3{ font-weight:700; font-size:20px; margin:34px 0 10px; letter-spacing:-.01em; }
.prose p{ color:#39414f; font-size:16.5px; margin:0 0 18px; }
.prose strong{ color:var(--ink); font-weight:700; }

/* services / cols */
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; box-shadow:var(--shadow-sm); }
.svc .ic{ width:54px; height:54px; border-radius:14px; background:var(--mist2); color:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.svc .ic svg{ width:26px; height:26px; }
.svc h3{ font-size:18px; font-weight:700; }
.svc p{ color:var(--soft); font-size:14.5px; margin-top:8px; }

/* materials grid */
.mats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mat{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.mat:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.mat .bar{ height:8px; }
.mat .bd{ padding:22px; }
.mat .abbr{ font-weight:900; font-size:30px; letter-spacing:-.02em; color:var(--navy); }
.mat h4{ font-size:15px; margin:6px 0 8px; }
.mat p{ font-size:13.5px; color:var(--soft); min-height:56px; }
.mat .lnk{ font-family:var(--mono); font-size:12px; font-weight:600; color:var(--steel-deep); letter-spacing:.03em; display:inline-flex; gap:6px; align-items:center; }
.mat:hover .lnk{ gap:10px; }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 22px; box-shadow:var(--shadow-sm); }
.step .num{ font-family:var(--mono); font-weight:700; font-size:13px; color:#fff; background:var(--navy); width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.step h4{ margin:16px 0 6px; font-size:17px; font-weight:700; }
.step p{ font-size:13.5px; color:var(--soft); }

/* production process (photo cards) */
.proc{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.proc .pc{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.proc .pc:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.proc .im{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.proc .im img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.proc .pc:hover .im img{ transform:scale(1.05); }
.proc .im .n{ position:absolute; top:10px; left:10px; font-family:var(--mono); font-weight:700; font-size:12px; color:#fff; background:rgba(17,27,64,.82); width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.proc .tx{ padding:15px 16px 18px; }
.proc .tx h4{ font-size:15px; font-weight:700; }
.proc .tx p{ font-size:12.5px; color:var(--soft); margin-top:5px; line-height:1.5; }

/* production flow (animated icons) */
.flow{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.flow .fs{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 22px 26px; box-shadow:var(--shadow-sm); text-align:center; transition:transform .2s, box-shadow .2s, border-color .2s; }
.flow .fs:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--ice); }
.flow .fs .n{ position:absolute; top:14px; right:16px; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--faint); }
.flow .fs .ico{ width:66px; height:66px; margin:0 auto 16px; border-radius:18px; background:linear-gradient(150deg,#eef3fb,#dbe8f6); display:flex; align-items:center; justify-content:center; color:var(--navy); transition:background .25s, color .25s; }
.flow .fs .ico svg{ width:34px; height:34px; }
.flow .fs:hover .ico{ background:var(--navy); color:#fff; }
.flow .fs h4{ font-size:16px; font-weight:700; }
.flow .fs p{ font-size:12.5px; color:var(--soft); margin-top:6px; line-height:1.5; }
@media (prefers-reduced-motion:no-preference){
  .a-bob{ animation:fbob 2.2s ease-in-out infinite; }
  @keyframes fbob{ 0%,100%{ transform:translateY(-1.5px);} 50%{ transform:translateY(2px);} }
  .a-spin{ transform-origin:12px 12px; animation:fspin 5.5s linear infinite; }
  @keyframes fspin{ to{ transform:rotate(360deg);} }
  .a-drip{ animation:fdrip 1.9s ease-in-out infinite; }
  @keyframes fdrip{ 0%,100%{ transform:translateY(-1px);} 50%{ transform:translateY(2.5px);} }
  .a-pulse > *{ animation:fpulse 1.6s ease-in-out infinite; }
  .a-pulse > *:nth-child(2){ animation-delay:.18s; }
  .a-pulse > *:nth-child(3){ animation-delay:.36s; }
  @keyframes fpulse{ 0%,100%{ opacity:.4;} 50%{ opacity:1;} }
  .a-draw{ stroke-dasharray:24; stroke-dashoffset:24; animation:fdraw 2.6s ease-in-out infinite; }
  @keyframes fdraw{ 0%{ stroke-dashoffset:24;} 45%,100%{ stroke-dashoffset:0;} }
}

/* product tiles (home) */
.prods{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.prod{ border-radius:var(--r); overflow:hidden; position:relative; min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; padding:26px; box-shadow:var(--shadow); }
.prod > *{ position:relative; z-index:1; }
.prod.p1{ background:linear-gradient(200deg,#26356f,#141d44); }
.prod.p2{ background:linear-gradient(200deg,#2F6DAB,#173a5e); }
.prod.p3{ background:linear-gradient(200deg,#2E8B8B,#154a4a); }
.prod.p4{ background:linear-gradient(200deg,#5b6aa0,#232c58); }
.prod .kel{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice); }
.prod h3{ font-size:20px; font-weight:800; letter-spacing:-.01em; margin:8px 0 8px; }
.prod p{ font-size:13.5px; color:#d5ddf0; margin-bottom:14px; }
.prod .lnk{ font-family:var(--mono); font-size:12px; font-weight:600; color:#fff; display:inline-flex; gap:7px; align-items:center; }
.prod:hover .lnk{ gap:11px; }

/* values */
.vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.val{ text-align:center; padding:30px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); }
.val .ic{ width:58px; height:58px; margin:0 auto 16px; border-radius:16px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; }
.val .ic svg{ width:26px; height:26px; }
.val h4{ font-size:18px; font-weight:700; }
.val p{ color:var(--soft); font-size:14px; margin-top:6px; }

/* two-col split */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.kh{ font-weight:800; font-size:24px; letter-spacing:-.02em; margin-bottom:16px; }

/* spec table */
.tbl-scroll{ overflow-x:auto; border-radius:var(--r); box-shadow:var(--shadow-sm); }
.spectable{ width:100%; min-width:340px; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.spectable th,.spectable td{ text-align:left; padding:14px 20px; border-bottom:1px solid var(--line); font-size:14.5px; }
.spectable tr:last-child th,.spectable tr:last-child td{ border-bottom:none; }
.spectable th{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); font-weight:600; width:44%; background:var(--mist); vertical-align:top; }
.spectable td{ font-weight:500; color:#2a3242; }

/* tags + feature list */
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tags span{ font-size:14px; background:#fff; border:1px solid var(--line); color:#31405e; padding:9px 16px; border-radius:999px; font-weight:600; box-shadow:var(--shadow-sm); }
.flist{ list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.flist li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:#39414f; }
.flist .ck{ flex:none; margin-top:3px; }

/* related links */
.related{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.related a{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--steel-deep); border:1px solid var(--line); border-radius:999px; padding:9px 16px; background:#fff; }
.related a:hover{ border-color:var(--steel); }

/* faq */
.faq{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
details{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:4px 22px; box-shadow:var(--shadow-sm); }
summary{ list-style:none; cursor:pointer; padding:18px 0; font-weight:700; font-size:16.5px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-weight:400; font-size:24px; color:var(--steel-deep); transition:transform .2s; }
details[open] summary::after{ transform:rotate(45deg); }
details p{ padding:0 0 20px; color:#39414f; font-size:15.5px; margin:0; }

/* contact */
.contact{ display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:start; }
.cinfo .row{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.cinfo .row:first-of-type{ border-top:1px solid var(--line); }
.cinfo .ic{ width:44px; height:44px; flex:none; border-radius:11px; background:var(--mist2); color:var(--navy); display:flex; align-items:center; justify-content:center; }
.cinfo .ic svg{ width:20px; height:20px; }
.cinfo .k{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.cinfo .v{ font-weight:600; font-size:15.5px; }
.cbtns{ margin-top:24px; display:flex; gap:14px; flex-wrap:wrap; }
.formcard{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:30px; }
.formcard h3{ font-size:20px; font-weight:800; letter-spacing:-.01em; }
.formcard .sub{ color:var(--soft); font-size:14.5px; margin:6px 0 22px; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.field label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.field input,.field select,.field textarea{ width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:var(--mist); border:1px solid var(--line); border-radius:10px; padding:12px 14px; transition:.15s; }
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--steel); background:#fff; box-shadow:0 0 0 3px rgba(92,155,214,.18); }
.map{ margin-top:14px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:linear-gradient(120deg,#eef2f8,#e2e8f2); position:relative; min-height:260px; box-shadow:var(--shadow-sm); }
.map .pin{ position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); text-align:center; color:var(--navy); }
.map .pin svg{ width:38px; height:38px; margin:0 auto; }
.map .pin span{ font-family:var(--mono); font-size:12px; }
.map .roads{ position:absolute; inset:0; opacity:.5; background:
    linear-gradient(90deg,transparent 48%,#cfd8e6 48%,#cfd8e6 51%,transparent 51%),
    linear-gradient(0deg,transparent 62%,#cfd8e6 62%,#cfd8e6 64%,transparent 64%),
    linear-gradient(58deg,transparent 30%,#d7dfec 30%,#d7dfec 32%,transparent 32%); }

/* story (about) */
.story{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center; }
.story .img{ border-radius:var(--r); min-height:360px; background:linear-gradient(150deg,#20305f,#0f1836); position:relative; overflow:hidden; box-shadow:var(--shadow); }
.story .img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* product photo figure */
.pimg{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); background:var(--mist); }
.pimg img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3; }

/* auto-fit product grid (home / pillars) */
.pgrid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

/* blog */
.bloggrid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.post{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; }
.post:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.post .thumb{ aspect-ratio:16/9; overflow:hidden; background:var(--mist2); }
.post .thumb img{ width:100%; height:100%; object-fit:cover; }
.post .pbd{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post .cat{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-deep); font-weight:600; }
.post h3{ font-size:18.5px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.post p{ font-size:14px; color:var(--soft); flex:1; }
.post .lnk{ font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--steel-deep); display:inline-flex; gap:6px; align-items:center; }
.post:hover .lnk{ gap:10px; }
.post .meta{ font-family:var(--mono); font-size:11.5px; color:var(--faint); }

/* article body */
.article{ max-width:760px; margin:0 auto; padding:0 28px; }
.article .lead{ font-size:19px; color:#39414f; line-height:1.6; margin:0 0 28px; }
.article h2{ font-weight:800; font-size:26px; letter-spacing:-.02em; margin:38px 0 14px; }
.article h3{ font-weight:700; font-size:20px; margin:28px 0 10px; }
.article p{ font-size:16.5px; color:#39414f; margin:0 0 18px; }
.article ul,.article ol{ margin:0 0 20px 22px; color:#39414f; font-size:16.5px; }
.article li{ margin-bottom:8px; }
.article img{ border-radius:var(--r); margin:24px 0; box-shadow:var(--shadow-sm); }
.article .callout{ background:var(--mist); border-left:3px solid var(--steel); border-radius:0 12px 12px 0; padding:18px 22px; margin:24px 0; font-size:15.5px; color:#39414f; }
.artmeta{ font-family:var(--mono); font-size:12.5px; color:var(--faint); margin-bottom:14px; display:flex; gap:14px; flex-wrap:wrap; }
.story h2{ font-weight:800; font-size:clamp(24px,3vw,32px); letter-spacing:-.02em; margin-bottom:16px; }
.story p{ color:#39414f; font-size:16.5px; margin-bottom:16px; }
.story strong{ color:var(--ink); }

/* cta band */
.cta-band{ background:linear-gradient(110deg,#16234f,#22336B); color:#fff; }
.cta-band .wrap{ padding:58px 28px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.cta-band h2{ font-weight:800; font-size:clamp(24px,3vw,34px); letter-spacing:-.02em; max-width:24ch; line-height:1.1; }
.cta-band p{ color:#c3cbe6; margin-top:8px; font-size:15.5px; }

/* footer */
footer{ background:var(--navy-deep); color:#b7c0dd; }
footer .top{ padding:56px 28px 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
footer .logo{ color:#fff; display:inline-block; }
footer .about{ font-size:14px; color:#9aa5c6; margin-top:16px; max-width:36ch; }
footer h5{ color:#fff; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-family:var(--mono); margin-bottom:16px; }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
footer ul a{ font-size:14px; } footer ul a:hover{ color:#fff; }
footer address{ font-style:normal; font-size:14px; line-height:1.8; color:#9aa5c6; }
footer .bar{ border-top:1px solid rgba(255,255,255,.1); }
footer .bar .wrap{ padding:18px 28px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:#8590b2; font-family:var(--mono); }

/* floating whatsapp (expands to two numbers) */
.wa-widget{ position:fixed; right:22px; bottom:22px; z-index:60; }
.wa-cb{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.wa-scrim{ position:fixed; inset:0; background:transparent; display:none; z-index:1; }
.wa-cb:checked ~ .wa-scrim{ display:block; }
.wa-float{ position:relative; z-index:2; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(37,211,102,.45); cursor:pointer; transition:transform .3s ease; }
.wa-float svg{ width:30px; height:30px; }
.wa-cb:checked ~ .wa-float{ transform:rotate(135deg); }
.wa-menu{ position:absolute; right:0; bottom:72px; z-index:2; display:flex; flex-direction:column; gap:6px; min-width:238px; max-width:calc(100vw - 44px); padding:12px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(12px) scale(.96); transform-origin:bottom right; transition:.2s ease; }
.wa-cb:checked ~ .wa-menu{ opacity:1; visibility:visible; transform:none; }
.wa-hd{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:4px 8px 6px; }
.wa-opt{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--ink); }
.wa-opt:hover{ background:var(--mist); }
.wa-opt .wi{ width:30px; height:30px; border-radius:50%; background:#25D366; flex:none; display:flex; align-items:center; justify-content:center; }
.wa-opt .wi svg{ width:17px; height:17px; }
.wa-opt small{ display:block; font-weight:500; color:var(--soft); font-size:11.5px; }

/* motion */
@media (prefers-reduced-motion:no-preference){
  .rise{ opacity:0; transform:translateY(16px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
}

/* responsive */
@media (max-width:960px){
  .hamb{ display:flex; }
  header .btn{ display:none; }
  nav.main{ position:fixed; top:72px; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 20px; margin:0; border-bottom:1px solid var(--line); box-shadow:var(--shadow); transform:translateY(-130%); transition:transform .28s ease; max-height:calc(100vh - 72px); overflow-y:auto; }
  .navtoggle:checked ~ nav.main{ transform:none; }
  nav.main > a{ padding:14px 4px; border-bottom:1px solid var(--line); }
  .dd .ddlabel{ padding:14px 4px; border-bottom:1px solid var(--line); justify-content:space-between; }
  .dd .menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 8px 14px; min-width:0; }
  .dd .menu a{ padding:10px 4px; }
  .hero .wrap{ grid-template-columns:1fr; gap:36px; padding:56px 28px 60px; }
  .cols3,.mats,.steps,.prods,.vals{ grid-template-columns:repeat(2,1fr); }
  .grid2,.contact,.story{ grid-template-columns:1fr; gap:30px; }
  footer .top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .stats .wrap{ grid-template-columns:repeat(2,1fr); }
  .cols3,.mats,.steps,.prods,.vals{ grid-template-columns:1fr; }
  .frow{ grid-template-columns:1fr; }
  footer .top{ grid-template-columns:1fr; }
  .util .r{ gap:12px; } .util .wrap{ font-size:11px; }
  .util .wrap > span:first-child{ display:none; }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .wa-widget{ right:16px; bottom:16px; }
}