/* ============ TOKENS ============ */
:root{
  --ink:#10151B; --ink-2:#1A232E; --ink-3:#24303D;
  --paper:#F4F5F2; --white:#FFFFFF;
  --accent:#F0A500; --accent-deep:#C88600;
  --line:#DDE1DE; --muted:#5E6873; --text:#242B32;
  --radius:4px;
  --font-head:Arial,'Liberation Sans','Helvetica Neue',Helvetica,sans-serif;
  --font-body:Arial,'Liberation Sans','Helvetica Neue',Helvetica,sans-serif;
  --shadow:0 10px 30px rgba(16,21,27,.12);
  --container:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);background:var(--paper);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
section{position:relative}

/* ============ TYPO ============ */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.12;color:var(--ink);text-transform:uppercase}
h1{font-size:clamp(34px,5.2vw,68px);letter-spacing:0}
h2{font-size:clamp(25px,3vw,43px);letter-spacing:.01em}
h3{font-size:clamp(19px,1.7vw,24px)}
h4{font-size:18px}
.eyebrow{font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:14px;display:block}
.section-head{max-width:760px;margin-bottom:clamp(32px,4.5vw,56px)}
.section-head p{color:var(--muted);font-size:17px;margin-top:16px}
.lead{font-size:18px;color:var(--muted)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--white)}
.dark .lead,.dark p{color:#B9C2CB}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:600;font-size:15.5px;letter-spacing:.05em;text-transform:uppercase;padding:15px 30px;border:2px solid transparent;border-radius:var(--radius);cursor:pointer;transition:all .22s ease;line-height:1}
.btn svg{transition:transform .22s ease}
.btn:hover svg{transform:translateX(4px)}
.btn-accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--white)}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn-dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-3);border-color:var(--ink-3)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--white)}
.btn-sm{padding:11px 20px;font-size:14px}

/* ============ NAV ============ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(16,21,27,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;flex-direction:row;align-items:center;gap:14px;line-height:1.1;flex-shrink:0;min-width:0}
.brand-logo{display:block;height:44px;width:auto;flex:none}
.brand .b2{font-family:var(--font-body);font-weight:500;font-size:11.5px;letter-spacing:.045em;text-transform:uppercase;color:#9AA5AF;white-space:normal;line-height:1.3;max-width:24ch}
/* the full logo (169px) + tagline + desktop nav + CTA only fit from 1600px;
   between the 1280px nav hand-over and 1599px keep the logo alone */
@media (min-width:1280px) and (max-width:1599px){.brand .b2{display:none}}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a.nlink{font-family:var(--font-head);font-weight:500;font-size:13.5px;letter-spacing:.015em;text-transform:uppercase;color:#D7DDE2;position:relative;padding:8px 0;white-space:nowrap;transition:color .2s}
.nav-links a.nlink:hover,.nav-links a.nlink.active{color:var(--accent)}
.nav-links a.nlink::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .25s}
.nav-links a.nlink:hover::after,.nav-links a.nlink.active::after{width:100%}
.nav-cta .btn{padding:12px 14px;font-size:12.5px}
.has-drop{position:relative}
.drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);min-width:300px;padding:10px;opacity:0;visibility:hidden;transition:all .22s ease;border-top:3px solid var(--accent)}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:10px 14px;border-radius:3px;font-size:14.5px;color:var(--text);transition:background .15s}
.drop a:hover{background:var(--paper);color:var(--accent-deep)}
.drop a strong{font-family:var(--font-head);letter-spacing:.06em;text-transform:uppercase;font-size:14px;display:block}
.drop a span{color:var(--muted);font-size:12.5px}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px}
.menu-btn span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0;transition:.3s}
.mobile-nav{position:fixed;inset:0;background:var(--ink);z-index:200;padding:90px 32px 40px;display:none;flex-direction:column;gap:6px;overflow:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--font-head);font-size:21px;letter-spacing:.04em;text-transform:uppercase;color:var(--white);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-nav .close-btn{position:absolute;top:24px;right:24px;background:none;border:none;color:var(--white);font-size:34px;cursor:pointer;line-height:1}

/* ============ HERO ============ */
.hero{min-height:92vh;display:flex;align-items:center;background:linear-gradient(rgba(16,21,27,.62),rgba(16,21,27,.78)),url('../assets/hero.jpg') center/cover no-repeat;padding:calc(74px + 64px) 0 64px}
@media(max-width:680px){.hero{background-image:linear-gradient(rgba(16,21,27,.62),rgba(16,21,27,.78)),url('../assets/hero-m.jpg')}}
.hero-inner{max-width:940px}
.hero h1{color:var(--white);margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{color:#E4E9EC;font-size:clamp(17px,1.6vw,20px);max-width:760px;margin-bottom:14px}
.hero .sub{color:#B9C2CB;max-width:820px;margin-bottom:36px;font-size:16px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:52px}
.trust-bar{display:flex;gap:12px clamp(20px,4vw,56px);flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);padding-top:26px}
.trust-item{display:flex;flex-direction:column;gap:2px}
.trust-item b{font-family:var(--font-head);font-size:18px;letter-spacing:.04em;color:var(--accent);text-transform:uppercase}
.trust-item span{font-size:13px;color:#B9C2CB}

/* ============ GENERIC SECTIONS ============ */
.sec{padding:clamp(64px,9vw,120px) 0}
.dark{background:var(--ink)}
.dark-2{background:var(--ink-2)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* about split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split img{border-radius:var(--radius);box-shadow:var(--shadow)}
.split .lead b{color:var(--ink)}
.tagline{font-family:var(--font-head);font-weight:700;font-size:clamp(19px,2vw,26px);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);border-left:4px solid var(--accent);padding-left:18px;margin:26px 0 34px}

/* solution cards */
.sol-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s}
.sol-card:hover{transform:translateY(-4px)}
.sol-card .img{aspect-ratio:16/10;background:var(--ink-2);overflow:hidden}
.sol-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.sol-card:hover .img img{transform:scale(1.05)}
.sol-card .body{padding:26px 24px 24px;display:flex;flex-direction:column;flex:1}
.sol-card .num{font-family:var(--font-head);font-weight:700;color:var(--accent);font-size:15px;letter-spacing:.1em;margin-bottom:8px}
.sol-card h3{margin-bottom:10px}
.sol-card p{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.chip{font-size:11.5px;font-weight:500;letter-spacing:.04em;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:4px 9px;color:var(--text)}
/* quarry cutting and construction cutting are the two core focus areas */
.chip-core{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:700}
.sol-card .link{margin-top:auto;font-family:var(--font-head);font-weight:600;letter-spacing:.05em;font-size:14px;text-transform:uppercase;color:var(--accent-deep);display:inline-flex;gap:8px;align-items:center}

/* application cards */
.app-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--ink)}
.app-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .45s,opacity .3s}
.app-card:hover img{transform:scale(1.06);opacity:.7}
.app-card .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,21,27,.88) 0%,rgba(16,21,27,.15) 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.app-card h3{color:var(--white);font-size:22px}
.app-card span{font-size:13px;color:#C9D2D9;margin-top:4px}
.app-card .go{margin-top:12px;font-family:var(--font-head);font-size:13.5px;letter-spacing:.07em;color:var(--accent);text-transform:uppercase}

/* case cards */
.case-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.case-card .img{aspect-ratio:16/10;overflow:hidden;background:var(--ink-2)}
.case-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.case-card:hover .img img{transform:scale(1.05)}
.case-card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;gap:10px}
.case-card .loc{font-family:var(--font-head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.case-card h3{font-size:21px;line-height:1.15}
.case-card .spec{display:flex;flex-wrap:wrap;gap:6px}
.case-card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13.5px;margin-top:2px}
.case-card dt{font-weight:600;color:var(--ink);text-transform:uppercase;font-size:11.5px;letter-spacing:.04em;font-family:var(--font-head);padding-top:2px}
.case-card dd{color:var(--muted)}

/* product cards */
.prod-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s}
.prod-card:hover{transform:translateY(-4px)}
.prod-card .img{aspect-ratio:1;background:var(--white);display:flex;align-items:center;justify-content:center;padding:14px;border-bottom:1px solid var(--line)}
.prod-card .img img{max-height:100%;object-fit:contain;transition:transform .35s}
.prod-card:hover .img img{transform:scale(1.06)}
.prod-card .body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.prod-card h3{font-size:20px;margin-bottom:8px}
.prod-card p{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.prod-card .chips{margin-bottom:14px}

/* why */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:800px){.why-grid{grid-template-columns:1fr}}
.why-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);padding:26px 26px 24px}
.why-item h4{color:var(--accent);font-size:18px;letter-spacing:.06em;margin-bottom:8px}
.why-item p{color:#B9C2CB;font-size:14.5px}
.philosophy{font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:clamp(26px,3.6vw,48px);line-height:1.1;color:var(--white);letter-spacing:.01em;margin-bottom:18px}
.philosophy em{font-style:normal;color:var(--accent)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.steps{grid-template-columns:1fr}}
.step{background:var(--white);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-head);font-weight:700;font-size:38px;color:rgba(240,165,0,.25);position:absolute;top:10px;right:18px;line-height:1}
.step h4{font-size:20px;margin-bottom:2px}
.step .cn{font-size:12.5px;color:var(--accent-deep);letter-spacing:.07em;text-transform:uppercase;font-family:var(--font-head);font-weight:600;margin-bottom:10px}
.step p{font-size:14px;color:var(--muted)}
.closing-line{font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:clamp(21px,2.8vw,36px);color:var(--ink);letter-spacing:.01em;text-align:center;margin-top:clamp(40px,6vw,70px)}
.closing-line em{font-style:normal;color:var(--accent-deep)}

/* videos */
.vid-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:var(--ink);cursor:pointer}
.vid-card img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:.35s}
.vid-card:hover img{opacity:.6;transform:scale(1.04)}
.vid-card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;transition:transform .25s}
.vid-card:hover .play{transform:translate(-50%,-50%) scale(1.1)}
.vid-card .play svg{margin-left:4px}
.vid-card .meta{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(to top,rgba(16,21,27,.9),transparent)}
.vid-card .meta b{display:block;font-family:var(--font-head);color:var(--white);font-size:16px;letter-spacing:.02em;text-transform:uppercase}
.vid-card .meta span{font-size:12.5px;color:#C9D2D9}
.vid-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}

/* articles */
.art-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s}
.art-card:hover{transform:translateY(-4px)}
.art-card .img{aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.art-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.art-card:hover .img img{transform:scale(1.05)}
.art-card .body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.art-card .cat{font-family:var(--font-head);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:8px}
.art-card h3{font-size:19.5px;line-height:1.2;margin-bottom:8px}
.art-card p{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.art-card .meta{margin-top:auto;font-size:12.5px;color:#8B959E;display:flex;gap:14px}

/* faq */
.faq-list{max-width:860px}
.faq-item{background:var(--white);border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
.faq-item button{width:100%;text-align:left;background:none;border:none;padding:20px 24px;font-family:var(--font-head);font-weight:600;font-size:16.5px;letter-spacing:.03em;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;text-transform:uppercase}
.faq-item button .ic{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;transition:transform .25s;font-family:var(--font-body)}
.faq-item.open button .ic{transform:rotate(45deg)}
.faq-item .ans{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item .ans p{padding:0 24px 22px;color:var(--muted);font-size:15px}

/* catalog */
.catalog-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:880px){.catalog-wrap{grid-template-columns:1fr}}
.catalog-cover{background:var(--ink-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.catalog-cover img{width:100%;height:100%;object-fit:cover}
.dl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 30px}
.dl-chip{font-size:12.5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#C9D2D9;border-radius:3px;padding:6px 12px}

/* cta */
.cta-sec{background:linear-gradient(rgba(16,21,27,.72),rgba(16,21,27,.82)),url('../assets/cta.jpg') center/cover no-repeat;text-align:center}
.cta-sec .container{max-width:820px}
.cta-sec h2{color:var(--white);margin-bottom:18px}
.cta-sec p{color:#C9D2D9;margin-bottom:34px;font-size:17px}
.cta-sec .hero-btns{justify-content:center;margin-bottom:26px}
.cta-sec .small{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:#8B959E;font-family:var(--font-head)}

/* footer */
.site-footer{background:var(--ink);color:#9AA5AF;padding:64px 0 0;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr .9fr 1fr 1fr;gap:32px;padding-bottom:48px}
@media(max-width:960px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-footer h5{font-family:var(--font-head);color:var(--white);font-size:16px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:16px}
.site-footer li{margin-bottom:9px}
.site-footer a:hover{color:var(--accent)}
.foot-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-logo{display:block;height:48px;width:auto}
.foot-tag{font-family:var(--font-body);font-weight:500;font-size:11.5px;letter-spacing:.045em;text-transform:uppercase;color:#9AA5AF;line-height:1.35}
.foot-brand p{margin-top:12px;font-size:13.5px;line-height:1.7;max-width:280px}
.foot-contact{border-top:1px solid rgba(255,255,255,.08);padding:26px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}
.foot-contact a{color:#C9D2D9}
.foot-contact a:hover{color:var(--accent)}
.foot-legal{border-top:1px solid rgba(255,255,255,.08);padding:18px 0 26px;font-size:12.5px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#6B7680}

/* toast */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--white);padding:14px 26px;border-radius:var(--radius);font-size:14.5px;opacity:0;pointer-events:none;transition:.3s;z-index:300;box-shadow:var(--shadow);border-left:3px solid var(--accent)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* section label pill */
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:14px}
.pill::before{content:"";width:26px;height:2px;background:var(--accent)}
.dark .pill{color:var(--accent)}


/* ============ shared page furniture for Blog / FAQ / Video ============ */
.page-hero{background:var(--ink);color:#fff;padding:calc(74px + 72px) 0 72px}
.page-hero .eyebrow{display:inline-block;font:600 12px/1 var(--font-head);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.page-hero h1{font:700 clamp(25px,3.7vw,44px)/1.12 var(--font-head);text-transform:uppercase;margin:0 0 18px;max-width:20ch}
.page-hero p{font:400 16px/1.7 var(--font-body);color:rgba(255,255,255,.72);max-width:70ch;margin:0}
.sec{padding:72px 0}
.sec + .sec{padding-top:0}
.container.narrow{max-width:840px}

/* blog grid */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:28px}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:#E9EBE7}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.post-card:hover .post-thumb img{transform:scale(1.045)}
.post-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-body time{font:600 11.5px/1 var(--font-head);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.post-body h3{margin:0 0 10px;font:600 18px/1.32 var(--font-head)}
.post-body h3 a{color:var(--ink);text-decoration:none}
.post-body h3 a:hover{color:var(--accent-deep)}
.post-body p{margin:0 0 16px;font:400 14px/1.65 var(--font-body);color:var(--muted);flex:1}
.post-more{font:600 13px/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);text-decoration:none}
.post-more:hover{text-decoration:underline}

/* FAQ */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item button{width:100%;background:none;border:0;padding:22px 44px 22px 0;display:flex;align-items:flex-start;gap:16px;text-align:left;cursor:pointer;position:relative;font:600 16px/1.45 var(--font-head);color:var(--ink)}
.faq-item button i{position:absolute;right:6px;top:26px;width:14px;height:14px;flex:none}
.faq-item button i::before,.faq-item button i::after{content:'';position:absolute;background:var(--accent-deep);border-radius:2px}
.faq-item button i::before{left:0;top:6px;width:14px;height:2px}
.faq-item button i::after{left:6px;top:0;width:2px;height:14px;transition:transform .25s ease}
.faq-item.open button i::after{transform:scaleY(0)}
.faq-item .ans{max-height:0;overflow:hidden;transition:max-height .32s ease}
.faq-item .ans p{margin:0;padding:0 44px 24px 0;font:400 15px/1.75 var(--font-body);color:var(--text)}
.faq-group{margin-bottom:44px}
.faq-group h2{margin:0 0 18px;font:700 21px/1.25 var(--font-head);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.faq-item .ans ul{margin:0;padding:0 44px 10px 22px;font:400 15px/1.75 var(--font-body);color:var(--text)}
.faq-item .ans li{margin-bottom:7px}
.faq-item .ans .faq-link{padding-bottom:24px}
.faq-item .ans .faq-link a{font:600 14px/1 var(--font-head);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep);text-decoration:none}
.faq-item .ans .faq-link a:hover{text-decoration:underline}
.faq-cta{margin-top:48px;background:var(--ink);color:#fff;border-radius:var(--radius);padding:40px}
.faq-cta h3{margin:0 0 12px;font:600 22px/1.25 var(--font-head);text-transform:uppercase}
.faq-cta p{margin:0 0 22px;font:400 15px/1.7 var(--font-body);color:rgba(255,255,255,.74);max-width:62ch}

/* video grid */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:28px}
.video-card h3{margin:14px 0 0;font:600 16px/1.4 var(--font-head)}
.video-thumb{position:relative;aspect-ratio:16/10;background:#0C1116;overflow:hidden;border-radius:var(--radius);cursor:pointer}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .25s ease,transform .5s ease}
.video-thumb:hover img{opacity:1;transform:scale(1.03)}
.video-thumb video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.play svg{width:64px;height:64px;fill:#fff;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));opacity:.92;transition:transform .25s ease}
.video-thumb:hover .play svg{transform:scale(1.08)}
.video-cta{margin-top:48px;text-align:center}
.video-cta p{margin:0 0 16px;font:400 15px/1.6 var(--font-body);color:var(--muted)}

/* article detail */
.article{padding:calc(74px + 56px) 0 80px}
.crumbs{font:500 12px/1 var(--font-head);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;display:flex;gap:10px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-deep)}
.article-head time{font:600 12px/1 var(--font-head);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-deep)}
.article-head h1{margin:14px 0 28px;font:700 clamp(22px,2.9vw,34px)/1.16 var(--font-head);color:var(--ink)}
.article-cover{margin:0 0 40px;border-radius:var(--radius);overflow:hidden;background:#E9EBE7}
.article-cover img{width:100%;display:block}
.prose p{margin:0 0 20px;font:400 16.5px/1.82 var(--font-body);color:var(--text)}
.article-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:36px 0}
.article-gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;background:#E9EBE7}
.article-gallery img{width:100%;display:block}
.article-cta{margin:52px 0;background:var(--ink);color:#fff;border-radius:var(--radius);padding:38px}
.article-cta h3{margin:0 0 12px;font:600 20px/1.28 var(--font-head);text-transform:uppercase}
.article-cta p{margin:0 0 20px;font:400 15px/1.7 var(--font-body);color:rgba(255,255,255,.74)}
.article-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);padding-top:26px}
.article-nav a{text-decoration:none;color:var(--ink);font:500 14px/1.45 var(--font-body)}
.article-nav a span{display:block;font:600 11.5px/1 var(--font-head);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.article-nav a:hover{color:var(--accent-deep)}
.an-prev{text-align:left}
.an-next{text-align:right}
@media(max-width:720px){.article-nav{grid-template-columns:1fr}.an-prev,.an-next{text-align:left}}

.video-thumb.ext{display:block;text-decoration:none}
.sec-more{margin:18px 0 0}
.section-head .sec-more{margin-top:16px}

.post-thumb{position:relative}
.post-thumb .badge{position:absolute;left:12px;top:12px;background:var(--accent);color:var(--ink);font:700 11.5px/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:2px}
.article-kind{display:inline-block;background:var(--accent);color:var(--ink);font:700 11.5px/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border-radius:2px;margin-bottom:14px}

/* ============================================================
   PRODUCT CATALOG  (products.html) — new components
   ============================================================ */

/* --- catalog structure TOC --- */
.toc{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.toc-col{background:var(--white);padding:22px 20px 24px}
.toc-head{display:flex;align-items:baseline;gap:10px;font-family:var(--font-head);font-weight:700;
  font-size:19px;letter-spacing:.02em;color:var(--ink);line-height:1.15;padding-bottom:14px;
  margin-bottom:14px;border-bottom:1px solid var(--line)}
.toc-head b{font-size:13px;color:var(--accent-deep);letter-spacing:.05em}
.toc-col ul{list-style:none}
.toc-col li+li{margin-top:9px}
.toc-col li a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;
  color:var(--muted);line-height:1.4;transition:color .15s}
.toc-col li a:hover{color:var(--accent-deep)}
.toc-col li a em{font-style:normal;font-size:11.5px;letter-spacing:.05em;color:#A6AFB8;
  white-space:nowrap;font-family:var(--font-head);text-transform:uppercase}

/* --- category section --- */
.cat-sec{border-top:1px solid var(--line)}
.cat-head{display:grid;grid-template-columns:400px 1fr;gap:52px;align-items:center;margin-bottom:52px}
.cat-media{border-radius:var(--radius);overflow:hidden;background:var(--ink);aspect-ratio:4/3}
.cat-media img{width:100%;height:100%;object-fit:cover}
.cat-intro h2{display:flex;align-items:baseline;gap:16px;font-size:38px;line-height:1.1}
.cat-num{font-family:var(--font-head);font-size:19px;font-weight:700;letter-spacing:.06em;
  color:var(--accent-deep);flex:none;transform:translateY(-6px)}
.cat-intro .lead{margin-top:18px;max-width:660px}
.dark .cat-num{color:var(--accent)}
.dark .cat-media{background:#0B1016}

/* --- cluster grid --- */
.cat-clusters{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.cat-cluster{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 22px;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s}
.cat-cluster:hover{box-shadow:var(--shadow);border-color:#C9D2D9}
.cat-cluster-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.cat-cluster-head h3{font-family:var(--font-head);font-weight:700;font-size:20px;letter-spacing:.02em;
  color:var(--ink);line-height:1.2}
.cat-count{font-family:var(--font-head);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-deep);white-space:nowrap}
.cat-cluster>p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.cat-items{list-style:none;margin-top:2px;display:grid;gap:8px}
.cat-items li+li{margin-top:0}
/* Husqvarna-style key-spec card: name row + up to 3 label/value facts */
.cat-items li a.pcard{display:block;padding:10px 12px 11px;border:1px solid #E7EAE7;border-radius:9px;
  background:var(--paper);transition:border-color .15s,box-shadow .15s,transform .15s}
.cat-items li a.pcard:hover{border-color:var(--accent-deep);box-shadow:0 2px 10px rgba(11,16,22,.06);transform:translateY(-1px)}
.pcard-name{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink)}
.pcard-name svg{flex:none;color:var(--accent-deep);opacity:.55;transition:opacity .15s,transform .15s}
.pcard:hover .pcard-name svg{opacity:1;transform:translateX(2px)}
.pcard-specs{display:block;margin-top:7px;border-top:1px dashed #E1E5E0;padding-top:7px}
.pcard-spec{display:flex;gap:9px;font-size:12.5px;line-height:1.45;margin-top:3px}
.pcard-spec:first-child{margin-top:0}
.pcard-spec em{flex:none;width:98px;font-style:normal;font-family:var(--font-head);font-weight:600;
  font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-deep);padding-top:2px}
.pcard-spec span{color:var(--text)}
.cat-items li a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 10px 8px 0;font-size:14.5px;color:var(--text);border-bottom:1px solid #F0F2EF;
  transition:color .15s,padding-left .15s}
.cat-items li:last-child a{border-bottom:0}
.cat-items li a svg{flex:none;color:var(--accent-deep);opacity:.5;transition:opacity .15s,transform .15s}
.cat-items li a:not(.pcard):hover{color:var(--accent-deep);padding-left:4px}
.cat-items li a:hover svg{opacity:1;transform:translateX(2px)}
.cat-items li.cat-wide a{font-size:14px;color:var(--muted);font-style:italic}

/* --- sourcing service grid --- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden}
.svc-item{background:var(--ink-2);padding:24px 22px 26px}
.svc-num{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--accent);margin-bottom:12px}
.svc-item h3{font-family:var(--font-head);font-weight:600;font-size:18.5px;letter-spacing:.02em;
  color:#fff;line-height:1.2;margin-bottom:9px}
.svc-item p{font-size:13.5px;color:#A9B4BE;line-height:1.55}
.cat-cta{margin-top:44px;text-align:center}
.cat-cta p{max-width:620px;margin:0 auto 22px;font-size:16px}

/* --- how to choose (Husqvarna-style selection guidance) --- */
.choose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.choose-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px 22px;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s}
.choose-card:hover{box-shadow:var(--shadow);border-color:#C9D2D9}
.choose-k{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--accent-deep);margin-bottom:10px;display:block}
.choose-card h3{font-family:var(--font-head);font-weight:700;font-size:18px;letter-spacing:.02em;
  color:var(--ink);line-height:1.25;margin-bottom:10px}
.choose-card p{font-size:13.5px;color:var(--muted);line-height:1.6}
.choose-links{list-style:none;margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:7px}
.choose-links a{font-size:13.5px;font-weight:600;color:var(--accent-deep);text-decoration:none}
.choose-links a::before{content:'\2192\00a0';opacity:.6}
.choose-links a:hover{text-decoration:underline}

/* --- responsive --- */
@media(max-width:1080px){
  .toc{grid-template-columns:repeat(3,1fr)}
  .cat-clusters{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .choose-grid{grid-template-columns:repeat(2,1fr)}
  .cat-head{grid-template-columns:320px 1fr;gap:36px}
  .cat-intro h2{font-size:38px}
}
@media(max-width:760px){
  .toc{grid-template-columns:1fr}
  .cat-clusters{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .choose-grid{grid-template-columns:1fr}
  .cat-head{grid-template-columns:1fr;gap:24px;margin-bottom:36px}
  .cat-media{aspect-ratio:16/10}
  .cat-intro h2{font-size:32px}
}

/* --- homepage product category cards + sourcing strip --- */
.prod-card .pnum{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--accent-deep);margin-bottom:8px}
.prod-card .link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:var(--accent-deep);
  font-family:var(--font-head);font-weight:600;letter-spacing:.05em;font-size:14px;text-transform:uppercase}
.prod-card .link:hover{gap:11px}
.sourcing-strip{display:grid;grid-template-columns:360px 1fr;gap:44px;align-items:center;margin-top:28px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  border-left:3px solid var(--accent)}
.ss-media{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.ss-media img{width:100%;height:100%;object-fit:cover}
.ss-body h3{font-family:var(--font-head);font-weight:700;font-size:27px;letter-spacing:.02em;
  color:var(--ink);line-height:1.15;margin:12px 0 12px}
.ss-body p{font-size:15px;color:var(--muted);line-height:1.65;margin-bottom:16px;max-width:640px}
.ss-body .link{display:inline-flex;align-items:center;gap:7px;color:var(--accent-deep);
  font-family:var(--font-head);font-weight:600;letter-spacing:.05em;font-size:14px;text-transform:uppercase}
.ss-body .link:hover{gap:11px}
@media(max-width:900px){
  .sourcing-strip{grid-template-columns:1fr;gap:22px;padding:22px}
  .ss-media{aspect-ratio:4/3}
  .ss-body h3{font-size:26px}
}

/* ============================================================
   SOLUTION PAGES + CASE PAGES — new components
   ============================================================ */

/* --- nav active state on inner pages ---
   Kept accent (as in the base .nlink.active rule): the header is dark on every
   page, so --ink here rendered the current section's nav item invisible. */
.nav-links a.nlink.active{color:var(--accent)}
.nav-links a.nlink.active::after{width:100%}

/* --- solution hero (photo background) --- */
.sol-hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.sol-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 140% at 88% 12%,rgba(240,165,0,.20) 0%,rgba(240,165,0,0) 58%),
             linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0))}
.sol-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(16,21,27,.94) 0%,rgba(16,21,27,.72) 55%,rgba(16,21,27,.42) 100%)}
.sol-hero .container{position:relative;z-index:2;padding:104px 24px 84px}
.sol-hero .eyebrow{color:var(--accent)}
.sol-hero h1{display:flex;align-items:baseline;gap:18px;font-size:56px;line-height:1.04;color:#fff;
  font-family:var(--font-head);font-weight:700;letter-spacing:.01em;max-width:900px}
.sol-hero h1 .sol-num{font-size:20px;letter-spacing:.07em;color:var(--accent);flex:none;
  transform:translateY(-8px)}
.sol-hero p{color:rgba(255,255,255,.82);font-size:19px;line-height:1.62;max-width:720px;margin-top:20px}
.sol-tag{margin-top:24px;font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.6);padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);display:inline-block;padding-right:40px}

/* --- coverage grid (dark section) --- */
.cov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden}
.cov-item{background:var(--ink-2);padding:28px 26px 30px}
.cov-num{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--accent);margin-bottom:12px}
.cov-item h3{font-family:var(--font-head);font-weight:600;font-size:21px;letter-spacing:.02em;color:#fff;
  line-height:1.2;margin-bottom:10px}
.cov-item p{font-size:14.5px;color:#A9B4BE;line-height:1.62}

/* --- equipment / tool split --- */
.split-grid{display:grid;grid-template-columns:1fr 400px;gap:52px;align-items:start}
.chip-lk{transition:background .15s,color .15s,border-color .15s;border:1px solid var(--line)}
.chip-lk:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.muted-note{margin-top:20px;font-size:14px;color:var(--muted);line-height:1.6;max-width:560px}
.wire-box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;border-top:3px solid var(--accent)}
.wire-box h4{font-family:var(--font-head);font-weight:700;font-size:20px;letter-spacing:.02em;
  color:var(--ink);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.wire-list{list-style:none}
.wire-list li{padding:11px 0;border-bottom:1px solid #F0F2EF}
.wire-list li:last-child{border-bottom:0;padding-bottom:0}
.wire-list li b{display:block;font-family:var(--font-head);font-weight:600;font-size:16.5px;
  letter-spacing:.02em;color:var(--ink);margin-bottom:3px}
.wire-list li span{font-size:13.5px;color:var(--muted);line-height:1.5}
.link-arrow{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--accent-deep);
  font-family:var(--font-head);font-weight:600;letter-spacing:.05em;font-size:13px;text-transform:uppercase}
.link-arrow:hover{gap:11px}

/* --- mini case cards --- */
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mini-case{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .2s}
.mini-case:hover{border-color:var(--accent);transform:translateY(-3px)}
.mc-img{aspect-ratio:16/10;overflow:hidden}
.mc-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.mini-case:hover .mc-img img{transform:scale(1.05)}
.mc-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.mc-loc{font-family:var(--font-head);font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent)}
.mc-body h4{font-family:var(--font-head);font-weight:600;font-size:18.5px;letter-spacing:.02em;color:#fff;
  line-height:1.2;margin:9px 0 8px}
.mc-body p{font-size:13.5px;color:#A9B4BE;line-height:1.55;margin-bottom:14px}
.mc-go{margin-top:auto;font-family:var(--font-head);font-weight:600;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- CASES PAGE ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.fbtn{font-family:var(--font-head);font-weight:600;font-size:14px;letter-spacing:.045em;
  text-transform:uppercase;padding:10px 20px;border:1px solid var(--line);background:var(--white);
  color:var(--muted);border-radius:100px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:all .18s}
.fbtn em{font-style:normal;font-size:12px;opacity:.7}
.fbtn:hover{border-color:var(--accent);color:var(--ink)}
.fbtn.active{background:var(--ink);border-color:var(--ink);color:#fff}
.fbtn.active em{opacity:1;color:var(--accent)}
.filter-empty{display:none;text-align:center;padding:60px 0;color:var(--muted);font-size:16px}

.case-list{display:flex;flex-direction:column;gap:32px}
.case-full{display:grid;grid-template-columns:400px 1fr;gap:0;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:box-shadow .2s,border-color .2s;scroll-margin-top:96px}
.case-full:hover{box-shadow:var(--shadow);border-color:#C9D2D9}
.cf-media{position:relative;background:var(--ink);min-height:340px}
.cf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cf-idx{position:absolute;top:16px;left:16px;font-family:var(--font-head);font-weight:700;font-size:15px;
  letter-spacing:.05em;color:#fff;background:rgba(16,21,27,.72);backdrop-filter:blur(4px);
  padding:6px 13px;border-radius:100px}
.cf-body{padding:30px 34px 28px}
.cf-meta{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.cf-loc{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.065em;
  text-transform:uppercase;color:var(--accent-deep)}
.cf-kind{font-family:var(--font-head);font-weight:600;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--paper);padding:3px 11px;border-radius:100px}
.cf-body h3{font-family:var(--font-head);font-weight:700;font-size:25px;letter-spacing:.01em;
  color:var(--ink);line-height:1.15;margin-bottom:8px}
.cf-sub{font-size:14.5px;color:var(--muted);margin-bottom:22px}

.six{border-top:1px solid var(--line)}
.six-row{display:grid;grid-template-columns:172px 1fr;gap:22px;padding:13px 0;
  border-bottom:1px solid #F0F2EF}
.six-row dt{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.055em;
  text-transform:uppercase;color:var(--accent-deep);padding-top:2px}
.six-row dd{font-size:14.5px;color:var(--text);line-height:1.62}

.cf-rel{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cf-rel .chip span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#6b7680);margin-right:4px}
.cf-rel .btn-sm{margin-left:auto}
.cf-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cf-sol{display:flex;gap:8px;flex-wrap:wrap}
.cf-src{font-size:12.5px;color:#A6AFB8;font-style:italic}
.cf-src a{color:var(--accent-deep);font-style:normal;text-decoration:underline;
  text-underline-offset:2px}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .sol-hero h1{font-size:44px}
  .split-grid{grid-template-columns:1fr;gap:32px}
  .mini-grid{grid-template-columns:repeat(2,1fr)}
  .case-full{grid-template-columns:1fr}
  .cf-media{min-height:0;aspect-ratio:16/9}
  .six-row{grid-template-columns:1fr;gap:4px}
  .six-row dt{padding-top:0}
}
@media(max-width:760px){
  .sol-hero .container{padding:72px 24px 60px}
  .sol-hero h1{font-size:33px;flex-direction:column;gap:6px}
  .sol-hero h1 .sol-num{transform:none}
  .sol-hero p{font-size:17px}
  .cov-grid{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:1fr}
  .cf-body{padding:24px 22px}
  .cf-body h3{font-size:24px}
  .case-list{gap:24px}
}

/* ==================================================================
   PRODUCT DETAIL PAGES  (site/products/<slug>.html)
   ================================================================== */
.pp-hero{padding:calc(74px + 58px) 0 64px}
.pp-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;margin-top:8px}
.pp-hero h1{font-size:clamp(34px,4.4vw,60px);color:#fff;max-width:16em}
.pp-tagline{font:600 16px/1.5 var(--font-head);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-top:14px}
.pp-intro{color:rgba(255,255,255,.80);font-size:16.5px;line-height:1.72;margin-top:16px;max-width:44em}
.pp-hero .hero-btns{margin-top:28px}
.pp-hero-media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink-2);border:1px solid rgba(255,255,255,.14)}
.pp-hero-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pp-hero-media .pp-main-img{display:block}
.pp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;background:rgba(12,17,22,.55);border-top:1px solid rgba(255,255,255,.10)}
.pp-thumb{padding:0;border:2px solid transparent;border-radius:3px;overflow:hidden;background:none;cursor:pointer;opacity:.62;transition:.2s}
.pp-thumb img{aspect-ratio:4/3;object-fit:cover;display:block}
.pp-thumb:hover{opacity:1}
.pp-thumb.on{border-color:var(--accent);opacity:1}

.pp-two{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4vw,60px);align-items:start}
.pp-bestfor{min-width:0}
.pp-hero-text{min-width:0}
.pp-list{list-style:none}
.pp-list li{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--text)}
.pp-list li:first-child{padding-top:6px}
.pp-list li::before{content:'';position:absolute;left:0;top:20px;width:7px;height:7px;background:var(--accent);border-radius:1px}
.pp-points{display:flex;flex-direction:column;gap:24px}
.pp-point h3{font-size:21px;margin-bottom:8px}
.pp-point p{color:var(--muted);font-size:15.5px;line-height:1.72}

.sec.light{background:var(--white)}
.spec-table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white);margin-bottom:8px}
.spec-row{display:grid;grid-template-columns:minmax(160px,.34fr) 1fr;border-top:1px solid var(--line)}
.spec-row:first-child{border-top:0}
.spec-row dt{padding:15px 20px;font:600 12.5px/1.45 var(--font-head);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
.spec-row dd{padding:15px 20px;font-size:15px;color:var(--text);line-height:1.65}
.pp-sub{font:600 13px/1 var(--font-head);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-deep);margin:32px 0 12px}
.pp-note{margin-top:20px;font-size:14.5px;color:var(--muted);border-left:3px solid var(--accent);padding-left:16px}

.mc-country{display:block;font:600 11.5px/1 var(--font-head);letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.mini-case .mc-body{padding:22px 22px 26px}
.mini-case .mc-body h3{font-size:20px;color:#fff;margin-bottom:10px;line-height:1.2}
.mini-case .mc-body p{font-size:14.5px;color:#A9B4BE;line-height:1.65}

.pp-reads{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pp-read{display:block;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:20px 22px;transition:border-color .2s,transform .2s}
.pp-read:hover{transform:translateX(3px);border-color:var(--accent-deep);border-left-color:var(--accent-deep)}
.pp-read span{display:block;font:600 11.5px/1 var(--font-head);letter-spacing:.075em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.pp-read strong{font:600 16px/1.35 var(--font-head);color:var(--ink);letter-spacing:.01em;display:block}

.pp-sibs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pp-sib{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:border-color .2s,transform .2s}
.pp-sib:hover{transform:translateY(-3px);border-color:var(--accent)}
.pp-sib span{display:block;font:600 11.5px/1 var(--font-head);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pp-sib strong{font:600 16px/1.3 var(--font-head);color:var(--ink)}

@media(max-width:1080px){
  .pp-hero-grid{grid-template-columns:1fr;gap:32px}
  .pp-hero-media{order:-1}
  .pp-two{grid-template-columns:1fr;gap:32px}
  .pp-sibs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .pp-hero{padding:calc(74px + 40px) 0 48px}
  .pp-hero h1{font-size:30px}
  .spec-row{grid-template-columns:1fr}
  .spec-row dt{border-bottom:1px solid var(--line)}
  .pp-reads{grid-template-columns:1fr}
  .pp-sibs{grid-template-columns:1fr}
}

/* ==================================================================
   SITE PAGES: about / inquiry / downloads
   ================================================================== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--white);padding:30px 26px 34px}
.stat-n{font:700 38px/1 var(--font-head);color:var(--accent-deep);letter-spacing:.01em;margin-bottom:12px}
.stat p{font-size:14.5px;color:var(--muted);line-height:1.62}

.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cap-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 32px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.cap-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.cap-num{font:700 13px/1 var(--font-head);letter-spacing:.08em;color:var(--accent-deep);margin-bottom:14px}
.cap-card h3{font-size:23px;margin-bottom:12px}
.cap-card p{font-size:15.5px;color:var(--muted);line-height:1.7;flex:1}
.cap-link{margin-top:20px;font:600 13px/1 var(--font-head);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep);display:inline-flex;align-items:center;gap:9px}

.prin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.prin-item{border-top:2px solid var(--accent);padding-top:22px}
.prin-num{font:700 12px/1 var(--font-head);letter-spacing:.08em;color:var(--accent);display:block;margin-bottom:14px}
.prin-item h3{font-size:19.5px;color:#fff;margin-bottom:11px}
.prin-item p{font-size:14.5px;color:#A9B4BE;line-height:1.7}
.appchain{margin-top:38px;border-top:1px solid rgba(255,255,255,.14);padding-top:30px}
.appchain h3{font:700 13px/1.4 var(--font-head);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.appchain .flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.appchain .flow b{font-size:14px;color:rgba(255,255,255,.45);font-weight:400}
.appchain .flow span{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:8px 16px;font-size:13.5px;color:#E4E9EC;white-space:nowrap}
.appchain .cost{margin-top:20px;font-size:15px;color:#A9B4BE;line-height:1.7;max-width:760px}
.appchain .cost b{color:#E4E9EC;font-weight:600}
.pull-quote{font-family:var(--font-head);font-weight:700;font-size:clamp(18px,1.9vw,23px);letter-spacing:.01em;color:var(--white);max-width:640px;margin:0 auto 26px;line-height:1.35}

/* --- inquiry form --- */
.inq-wrap{display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(28px,4vw,52px);align-items:start}
.inq-form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,40px)}
.inq-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.inq-row.one{grid-template-columns:1fr}
.inq-form label{display:block;font:600 12px/1.4 var(--font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.inq-form label span{color:var(--accent-deep)}
.inq-form input,.inq-form select,.inq-form textarea{margin-top:9px;width:100%;font:400 15px/1.5 var(--font-body);color:var(--text);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;font-family:var(--font-body)}
.inq-form input:focus,.inq-form select:focus,.inq-form textarea:focus{outline:none;border-color:var(--accent);background:var(--white)}
.inq-form textarea{resize:vertical}
.inq-note{font-size:12.5px;color:var(--muted);margin:4px 0 20px}
.inq-actions{display:flex;gap:12px;flex-wrap:wrap}
.inq-status{margin-top:18px;font-size:14.5px;line-height:1.6;display:none}
.inq-status.ok,.inq-status.err{display:block;padding:14px 16px;border-radius:var(--radius)}
.inq-status.ok{background:#EAF4EA;border-left:3px solid #2E7D32;color:#1F5123}
.inq-status.err{background:#FBECEC;border-left:3px solid #C62828;color:#8E1F1F}
.inq-side{display:flex;flex-direction:column;gap:18px}
.inq-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 26px}
.inq-card h3{font-size:18px;margin-bottom:14px}
.inq-card p{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:12px}
.inq-card p:last-child{margin-bottom:0}
.inq-card a{color:var(--accent-deep);font-weight:600}
.inq-card.help{background:var(--paper)}
.inq-card ul li{position:relative;padding:8px 0 8px 20px;font-size:14.5px;color:var(--text);line-height:1.55}
.inq-card ul li::before{content:'';position:absolute;left:0;top:15px;width:6px;height:6px;background:var(--accent);border-radius:1px}

/* --- downloads --- */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dl-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 28px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.dl-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.dl-kind{font:600 11.5px/1 var(--font-head);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:13px}
.dl-card h3{font-size:21px;margin-bottom:12px;line-height:1.2}
.dl-card p{font-size:14.5px;color:var(--muted);line-height:1.68;flex:1}
.dl-btn{margin-top:20px;font:600 12.5px/1 var(--font-head);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:9px;border-bottom:2px solid var(--accent);padding-bottom:6px;align-self:flex-start}
.dl-btn:hover{color:var(--accent-deep)}

@media(max-width:1080px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .cap-grid{grid-template-columns:1fr}
  .prin-grid{grid-template-columns:repeat(2,1fr)}
  .inq-wrap{grid-template-columns:1fr;gap:32px}
  .dl-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .stat-grid{grid-template-columns:1fr}
  .prin-grid{grid-template-columns:1fr}
  .dl-grid{grid-template-columns:1fr}
  .inq-row{grid-template-columns:1fr;gap:18px}
}

/* ==================================================================
   CONSTRUCTION CUTTING SOLUTIONS  (construction-cutting-solutions.html)
   Additive only, and scoped by class so no other page is affected.
   ================================================================== */
/* four-step approach row (the base .steps grid is three-up) */
.steps.steps-4{grid-template-columns:repeat(4,1fr)}
/* the approach closing line sits on a dark section */
.dark .closing-line,.dark-2 .closing-line{color:var(--white)}
.dark .closing-line em,.dark-2 .closing-line em{color:var(--accent)}
/* .why-item heads use h3 on this page so the outline stays h2 > h3 */
.why-item h3{color:var(--accent);font-size:19px;letter-spacing:.06em;margin-bottom:8px}
/* same h2 > h3 rule for the approach steps and the equipment panels */
.step h3{font-size:20px;margin-bottom:10px;padding-right:48px}
.wire-box h3{margin-bottom:16px}
/* .case-card is a white card, so its headings stay ink even inside .dark
   sections — .dark h3 was painting the project titles white on white */
.case-card h3{color:var(--ink)}

/* ==================================================================
   HEADING COLOUR ON DARK SURFACES — site-wide defect fix
   Two rules were missing, which left real text invisible:
     1. .page-hero never set an h1 colour, and the global
        h1,h2,h3,h4{color:var(--ink)} won — so the H1 of every page-hero
        (about, blog, cases, downloads, faq, inquiry, products, video)
        rendered ink-on-ink and disappeared.
     2. The markup uses class="dark" on headings/paragraphs that sit in
        dark sections, but only the descendant form .dark h2 was defined.
        Inside .sec.dark-2 sections nothing matched, so those headings
        also rendered ink-on-ink (homepage "Solutions & Capabilities",
        the solution pages' "Projects Using This Solution", ...).
   ================================================================== */
.page-hero h1{color:var(--white)}
h1.dark,h2.dark,h3.dark,h4.dark{color:var(--white)}
p.dark,.lead.dark,span.dark{color:#B9C2CB}
/* .dark is a surface class on <section>, but the same class is reused on
   headings as a colour utility — kill the ink background it dragged along */
h1.dark,h2.dark,h3.dark,h4.dark,p.dark,.lead.dark{background:none}

/* the dark CTA boxes on faq.html and the 29 article pages set color:#fff on
   the box, but the global h3{color:var(--ink)} beat the inheritance — so the
   "Need help with a similar project?" heading was ink on ink */
.faq-cta h3,.article-cta h3{color:var(--white)}

/* ghost buttons are white by default, which is right on dark sections and
   photos, but invisible on light ones. Everything that is not a dark section
   gets the ink outline instead. */
.sec:not(.dark):not(.dark-2):not(.cta-sec) .btn-ghost{color:var(--ink);border-color:rgba(16,21,27,.45)}
.sec:not(.dark):not(.dark-2):not(.cta-sec) .btn-ghost:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

/* .prin-item sits on paper (about.html and the construction page); #A9B4BE was
   borrowed from the dark card styles and is unreadable there */
.prin-item p{color:var(--muted)}

@media(max-width:1024px){
  .steps.steps-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .steps.steps-4{grid-template-columns:1fr}
}

/* ==================================================================
   HEADER NAV — responsive hand-over to the mobile overlay
   The desktop nav needs ~1240px (brand 304 + links 804 + CTA 95 + gaps),
   but .container caps at 1200px / 1152px of content, so the CTA button
   was pushed past the container on every width and the hamburger
   (.menu-btn / .mobile-nav, already wired up in app.js) never appeared.
   Tighten the nav so it fits, and hand over below 1280px.
   ================================================================== */
.nav-links{gap:12px}
.nav-wrap{gap:10px}
@media(max-width:1279px){
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:block}
}

/* ==================================================================
   ROUND J — value-chain navigation
   Six top-level items, each with its own submenu. Six shorter labels
   replace ten, so the desktop bar needs no more room than before.
   ================================================================== */
/* the last two panels align right so a 300px dropdown cannot spill out */
.has-drop.end .drop{left:auto;right:0;transform:translateY(8px)}
.has-drop.end:hover .drop,.has-drop.end:focus-within .drop{transform:translateY(0)}
/* deep links from the submenus land on a cluster card, clear of the fixed header */
.cat-cluster{scroll-margin-top:110px}
.products-page .cat-cluster{scroll-margin-top:110px}
/* the cluster heading is now an in-page anchor target */
.cat-cluster-head h3 a{color:inherit;text-decoration:none}
.cat-cluster-head h3 a:hover{color:var(--accent-deep)}
/* ties the six delivery steps back to the brand promise (was six Chinese
   sub-labels; the rest of the site is English-only, so they had to go) */
.steps-lead{max-width:720px;margin:0 auto 6px;text-align:center;
  font-size:15px;color:var(--muted);line-height:1.7}
.steps-lead b{color:var(--ink)}

/* mobile drawer keeps the chain grouping instead of flattening it */
.mobile-nav .mob-group{display:flex;flex-direction:column;
  border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px;margin-bottom:10px}
.mobile-nav a.mob-top{font-family:var(--font-head);font-size:19px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--white);padding:6px 0;border-bottom:0}
.mobile-nav a.mob-top.active{color:var(--accent)}
.mobile-nav a.mob-sub{font-family:var(--font-body);font-size:15px;letter-spacing:0;
  text-transform:none;color:#9FB0BC;padding:5px 0 5px 14px;border-bottom:0}
.mobile-nav a.mob-sub:hover{color:var(--accent)}
.mobile-nav a.mob-cta{margin-top:16px;font-size:18px;color:var(--ink);
  background:var(--accent);text-align:center;padding:14px;border-radius:3px;border-bottom:0}

/* ==================================================================
   ROUND J — family comparison table (product pages)
   Only rendered for families that have at least three comparable,
   fully-populated attributes in _prodspec.py. Machine families are
   deliberately excluded: no verified machine parameters exist to fill
   the rows, and we do not invent them.
   ================================================================== */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  margin:8px 0 10px}
.cmp-table{border-collapse:collapse;width:100%;min-width:640px}
.cmp-table th,.cmp-table td{padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6}
.cmp-table thead th{background:var(--paper);vertical-align:bottom}
.cmp-table thead th b{display:block;font:600 12px/1.3 var(--font-head);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cmp-table thead th a{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink)}
.cmp-table thead th a:hover{color:var(--accent-deep)}
.cmp-table thead th.on{background:#FCF4E4;box-shadow:inset 3px 0 0 var(--accent)}
.cmp-table tbody th{font:600 12.5px/1.5 var(--font-head);letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);background:var(--paper);
  width:170px;white-space:nowrap}
.cmp-table tbody td{color:var(--text)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table td.on{background:#FCF4E4}
.cmp-table .cmp-list{list-style:none;margin:0;padding:0}
.cmp-table .cmp-list li{position:relative;padding-left:14px;margin:3px 0}
.cmp-table .cmp-list li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent-deep)}
.cmp-note{font-size:13.5px;color:var(--muted);margin:0 0 24px}
.cmp-table th.cmp-corner{font:600 12px/1.4 var(--font-head);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--paper)}
.cmp-table thead th .cmp-you{display:block;margin-top:6px;font:600 11.5px/1 var(--font-head);
  letter-spacing:.07em;text-transform:uppercase;color:var(--accent-deep)}
.cmp-table .cmp-na{color:var(--muted);font-style:italic}

/* Round J defect fix — .btn-outline keeps its ink-on-ink default inside dark
   sections, so the "All customer cases" CTA on all 43 product pages rendered
   with colour == background (ratio 1.0, invisible). Same class of bug as the
   light-section ghost buttons fixed in Round E, on the opposite background. */
.dark .btn-outline{color:var(--white);border-color:rgba(255,255,255,.5)}
.dark .btn-outline:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

/* Round J defect fix — the same .tagline component sits on a light section on
   the homepage (fine) but was reused inside the dark .page-hero on about.html,
   where its ink colour equalled the hero background: ratio 1.0, invisible. */
.page-hero .tagline{color:var(--white)}

/* Round P — Arial runs ~24% wider than the condensed face these buttons were
   sized for, so a long CTA label ("Get a Cutting Recommendation") overflowed
   its 266px slot at 390px. Let buttons wrap their label on small screens. */
@media(max-width:560px){
  .btn{padding:13px 20px;font-size:14px;letter-spacing:.03em;white-space:normal;text-align:center}
}

/* Round R — construction application photo band ("On Site") on the
   construction-cutting-solutions page. Photos: assets/cons-*.jpg from the
   client archive folder "Construction Cutting Applications". */
.onsite-wrap{margin-top:56px}
.onsite-h{font-family:var(--font-head);font-weight:600;font-size:20px;letter-spacing:.03em;color:#fff;margin:0 0 18px;text-transform:uppercase}
.onsite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.onsite-item{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--ink-2)}
.onsite-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s}
.onsite-item:hover img{transform:scale(1.04)}
.onsite-item figcaption{position:absolute;inset:auto 0 0 0;padding:30px 16px 12px;font-size:13px;line-height:1.4;color:#fff;background:linear-gradient(180deg,rgba(16,21,27,0),rgba(16,21,27,.88))}
.onsite-note{margin:16px 0 0;font-size:13px;color:#8D99A6}
@media(max-width:1024px){.onsite-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
  .onsite-grid{grid-template-columns:1fr;gap:12px}
  .onsite-item img{aspect-ratio:16/10}
  .onsite-item figcaption{font-size:12.5px}
}

/* ==================================================================
   ADAPTIVE LAYER (Round T)
   Fluid layout first; this block adds the terminal-specific behaviour
   that was missing. It does not change the 1280-1600px design.
   ================================================================== */

/* -------- 1. Platform normalisation -------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body{overflow-wrap:break-word}
*{-webkit-tap-highlight-color:rgba(240,165,0,.16)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:#10151B}
}

/* -------- 2. Notched terminals: keep content clear of rounded corners -------- */
@supports (padding:max(0px)){
  .site-header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .container{padding-left:max(24px,env(safe-area-inset-left));
             padding-right:max(24px,env(safe-area-inset-right))}
  .mobile-nav{padding-left:max(32px,env(safe-area-inset-left));
              padding-right:max(32px,env(safe-area-inset-right));
              padding-bottom:max(40px,env(safe-area-inset-bottom))}
  .site-footer{padding-bottom:max(28px,env(safe-area-inset-bottom))}
}

/* -------- 3. Mobile browser chrome: measure the hero against the visible area -------- */
@supports (height:100svh){
  .hero{min-height:92svh}
}

/* -------- 4. Small phones 320-600px -------- */
@media(max-width:600px){
  .container{padding-left:18px;padding-right:18px}
  .nav-wrap{gap:12px;height:70px}
  .brand{min-width:0;gap:10px}
  .brand-logo{height:38px}
  .brand .b2{font-size:11.5px;letter-spacing:.02em;white-space:normal;
             line-height:1.25;max-width:170px}
  .menu-btn{padding:10px;margin-right:-6px}
  h1{font-size:clamp(27px,7.6vw,42px)}
  h2{font-size:clamp(21px,5.6vw,30px)}
  h3{font-size:clamp(18px,4.6vw,21px)}
  .section-head p,.lead{font-size:16px}
  .btn{padding:13px 22px;font-size:14.5px}
  .hero{min-height:auto;padding:calc(70px + 40px) 0 48px}
  .pp-hero,.sol-hero{padding-top:calc(70px + 32px)}
  .pp-hero h1,.sol-hero h1{font-size:28px}
  html{scroll-padding-top:78px}
}
@media(max-width:400px){
  .container{padding-left:14px;padding-right:14px}
  .brand-logo{height:34px}
  .brand .b2{display:none}
  .btn{padding:12px 18px;font-size:14px}
  .grid{gap:18px}
  h1{font-size:clamp(25px,8.4vw,34px)}
}

/* -------- 5. Minimum legible label size, on every terminal -------- */
/* One canonical floor: no functional micro label renders below 11.5px, and
   the label set grows again on very large panels, where the body copy and
   the container do.  Small screens are raised further in section 15. */
.badge,.chip,.chip-lk,.cat-count,.cf-kind,.dl-kind,.mc-country,.mc-loc,.post-meta,.cmp-you,.article-kind,dt,.pcard-spec em,.post-thumb .badge,.post-body time,.pp-sib span,.pp-read span,.article-nav a span,.toc-col li a em{font-size:11.5px}
.drop a span{font-size:13px}
@media(min-width:1920px){
  .badge,.chip,.chip-lk,.cat-count,.cf-kind,.dl-kind,.mc-country,.mc-loc,.post-meta,.cmp-you,.article-kind,dt,.pcard-spec em,.post-thumb .badge,.post-body time,.pp-sib span,.pp-read span,.article-nav a span,.toc-col li a em{font-size:12px}
}
@media(min-width:2560px){
  .badge,.chip,.chip-lk,.cat-count,.cf-kind,.dl-kind,.mc-country,.mc-loc,.post-meta,.cmp-you,.article-kind,dt,.pcard-spec em,.post-thumb .badge,.post-body time,.pp-sib span,.pp-read span,.article-nav a span,.toc-col li a em{font-size:13px}
}

/* -------- 6. Touch-only terminals: real tap targets, no hover traps -------- */
@media(hover:none){
  .app-card:hover img,.post-card:hover,.case-card:hover,.sol-card:hover{transform:none}
  .btn:hover svg,.btn:hover{transform:none}
  .app-card .go{opacity:1}
}
@media(pointer:coarse){
  .btn{min-height:44px}
  .btn-sm{min-height:40px}
  a.nlink{padding:12px 0}
  .menu-btn{min-width:44px;min-height:44px}
  .mobile-nav a.mob-sub{padding:10px 0 10px 14px}
  .mobile-nav a.mob-top{padding:9px 0}
  .mobile-nav .close-btn{padding:6px 12px;min-width:44px;min-height:44px}
  .chip,.chip-lk{padding:7px 12px}
  .foot-grid a{display:inline-block;padding:5px 0}
  .dl-btn{min-height:44px}
  .drop a{padding:13px 14px}
  .faq-item button{padding:16px 0}
  .cmp-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
}

/* -------- 7. Tables: make the horizontal scroll obvious on small screens -------- */
@media(max-width:900px){
  .cmp-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .cmp-note::after{content:" (swipe the table sideways to compare every model)";
                   color:var(--muted)}
}

/* -------- 8. Phone landscape and short windows -------- */
@media(orientation:landscape) and (max-height:520px){
  .hero{min-height:auto;padding:calc(70px + 22px) 0 34px}
  .hero h1{font-size:clamp(24px,4vw,34px)}
  .pp-hero,.sol-hero{padding-top:calc(70px + 22px);padding-bottom:34px}
  .mobile-nav{padding-top:70px;gap:2px}
  .mobile-nav a{font-size:18px;padding:7px 0}
  .mobile-nav a.mob-sub{font-size:14px;padding:5px 0 5px 12px}
  .mobile-nav a.mob-cta{margin-top:10px;padding:11px}
  .site-footer{padding-top:40px}
}

/* -------- 9. Large terminals: use the width instead of stretching -------- */
@media(min-width:1600px){
  :root{--container:1320px}
  .hero-inner{max-width:1020px}
  .section-head{max-width:820px}
}
@media(min-width:1920px){
  :root{--container:1440px}
  body{font-size:17px}
  .section-head p,.lead{font-size:18px}
  .hero-inner{max-width:1120px}
}
@media(min-width:2560px){
  :root{--container:1640px}
  body{font-size:18px}
  .section-head{max-width:900px}
}
@media(min-width:3440px){
  :root{--container:1800px}
}

/* -------- 10. Keyboard terminals -------- */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.site-header :focus-visible,.dark :focus-visible,.dark-2 :focus-visible,
.site-footer :focus-visible{outline-color:#FFD166}

/* -------- 11. Reduced motion -------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* -------- 12. Print -------- */
@media print{
  .site-header,.mobile-nav,.site-footer,.btn,.sec-more,.play,
  video,.video-thumb,#toast{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .dark,.dark-2,.sec.dark,.sec.dark-2{background:#fff !important}
  .dark h1,.dark h2,.dark h3,.dark h4,.dark p,.dark .lead,
  .dark-2 h1,.dark-2 h2,.dark-2 h3,.dark p{color:#000 !important}
  .container{max-width:none;padding:0}
  section{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}

/* ==================================================================
   ADAPTIVE LAYER (Round T) — part 2
   Phone-specific fixes measured with _adapt.py after part 1:
   breadcrumb wrap, product-card spec stacking, comparison table as
   cards, label size floor, tap areas.
   ================================================================== */

/* -------- 13. Breadcrumb trails must never widen the page -------- */
.crumbs{flex-wrap:wrap;row-gap:6px;min-width:0}
.crumbs em{min-width:0}
@media(max-width:600px){
  .crumbs{font-size:11.5px;gap:7px;margin-bottom:18px;line-height:1.5}
  .crumbs em{overflow-wrap:anywhere}
}

/* -------- 14. Product-card spec rows stack on phones -------- */
/* the label had a fixed 98px column, which cannot fit a 272px card */
@media(max-width:600px){
  .pcard-spec{display:block}
  .pcard-spec em{display:block;width:auto;margin-bottom:1px}
  .pcard-spec span{display:block}
}
.pcard-spec span{overflow-wrap:anywhere}

/* -------- 15. Micro-label legibility floor on small screens -------- */
@media(max-width:900px){
  .pcard-spec em,.post-thumb .badge,.post-body time,.pp-sib span,
  .pp-read span,.cmp-you,.chip,.chip-lk,.cat-count,.cf-kind,
  .mc-country,.mc-loc,.dl-kind,.post-meta,dt{font-size:12px}
}

/* -------- 16. Family comparison table -> card list on phones -------- */
@media(max-width:620px), (orientation:portrait) and (max-width:620px){
  .cmp-wrap{overflow:visible}
  .cmp-table{display:block;width:100%;min-width:0 !important}
  .cmp-table thead{display:none}
  .cmp-table tbody{display:block}
  .cmp-table tbody tr{display:block;margin:0 0 14px;border:1px solid var(--line);
                      border-radius:var(--radius);overflow:hidden;background:#fff}
  .cmp-table tbody tr:last-child{margin-bottom:0}
  .cmp-table tbody th{display:block;background:var(--paper);padding:9px 12px;
                      font-size:12px;letter-spacing:.06em;text-transform:uppercase;
                      color:var(--muted);text-align:left;border-bottom:0}
  .cmp-table tbody td{display:block;padding:10px 12px;
                      border-top:1px solid var(--line);font-size:14.5px}
  .cmp-table tbody td::before{content:attr(data-label);display:block;
                      font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
                      color:var(--muted);margin-bottom:3px}
  .cmp-table tbody td.on{background:#FCF4E4;box-shadow:inset 3px 0 0 var(--accent)}
  .cmp-table tbody td.on::before{content:attr(data-label) " \2014 this page";
                      color:var(--accent-deep);font-weight:600;
                      text-transform:none;letter-spacing:.02em}
  .cmp-table tbody tr:first-child th{border-radius:0}
}

/* -------- 17. Tap areas for inline text links -------- */
@media(pointer:coarse){
  .crumbs a{padding:7px 0}
  a.post-more,a.link,a.link-arrow,a.cap-link,a.pp-read-link,.mc-body a{
    display:inline-flex;align-items:center;min-height:28px}
  .pp-sib a{min-height:28px;display:inline-flex;align-items:center}
  .post-body time{display:inline-block;padding:2px 0}
}

/* ==================================================================
   ADAPTIVE LAYER (Round T) — part 3
   ================================================================== */

/* -------- 18. Landscape phones also get the comparison card layout -------- */
@media(orientation:landscape) and (max-width:940px) and (max-height:560px){
  .cmp-wrap{overflow:visible}
  .cmp-table{display:block;width:100%;min-width:0 !important}
  .cmp-table thead{display:none}
  .cmp-table tbody{display:block}
  .cmp-table tbody tr{display:block;margin:0 0 12px;border:1px solid var(--line);
                      border-radius:var(--radius);overflow:hidden;background:#fff}
  .cmp-table tbody th{display:block;background:var(--paper);padding:8px 12px;
                      font-size:12px;letter-spacing:.06em;text-transform:uppercase;
                      color:var(--muted);text-align:left;border-bottom:0}
  .cmp-table tbody td{display:block;padding:9px 12px;
                      border-top:1px solid var(--line);font-size:14.5px}
  .cmp-table tbody td::before{content:attr(data-label);display:block;
                      font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
                      color:var(--muted);margin-bottom:3px}
  .cmp-table tbody td.on{background:#FCF4E4;box-shadow:inset 3px 0 0 var(--accent)}
  .cmp-table tbody td.on::before{content:attr(data-label) " \2014 this page";
                      color:var(--accent-deep);font-weight:600;text-transform:none}
}

/* -------- 19. Remaining touch areas -------- */
@media(pointer:coarse){
  a.brand{min-height:44px;justify-content:center}
  .fbtn{min-height:40px}
  .art-src a,.foot-contact a,.post-body a,.case-src a{
    display:inline-flex;align-items:center;min-height:24px}
}

/* ==================================================================
   ADAPTIVE LAYER (Round T) — part 4
   Measured with _adapt.py + _media/probe_tap.py.  Everything the audit
   still flagged as a small target was a link sitting inline inside a
   sentence (WCAG 2.5.8 inline exemption) except the catalog jump lists
   below, which are standalone list rows.
   ================================================================== */

/* -------- 22. Catalog jump lists: real tap targets on touch screens -------- */
@media(pointer:coarse){
  .toc-col li a{min-height:44px;align-items:center}
  .toc-col li+li{margin-top:2px}
  .choose-links{gap:2px}
  .choose-links a{display:inline-block;padding:11px 0}
  .cat-cluster-head h3 a{display:inline-block;padding:4px 0}
}

/* -------- 23. Comparison-table column links: real tap height -------- */
/* the column head of a family comparison table is a link to a sibling
   product; at tablet widths it measured 17px tall inside the scroller */
@media(pointer:coarse){
  .cmp-table thead th a{display:inline-block;padding:4px 0}
}

/* ==================================================================
   WHITE HEADER + MEGA MENU — 2026-09 nav restyle
   Light professional header, dark text, single accent color.
   ================================================================== */
.site-header{background:rgba(255,255,255,.97);border-bottom:1px solid #E5E9ED;backdrop-filter:blur(8px)}
.brand .b2{color:#69747E}
.nav-links a.nlink{color:#333F49}
.nav-links a.nlink:hover,.nav-links a.nlink.active{color:var(--accent-deep)}
.menu-btn span{background:#333F49}
/* mobile drawer — light */
.mobile-nav{background:#FFFFFF}
.mobile-nav a{color:var(--ink);border-bottom:1px solid #EBEEF1}
.mobile-nav a.mob-sub{color:#5A6570}
/* .mob-top keeps its base white from the dark-drawer rule, which outranks the
   generic light override above — restate it or Home is invisible off-index */
.mobile-nav a.mob-top{color:var(--ink)}
.mobile-nav a.mob-top.active{color:var(--accent-deep)}
.mobile-nav a.mob-sub:hover{color:var(--accent-deep)}
.mobile-nav .close-btn{color:var(--ink)}
/* mobile accordion sections */
.mobile-nav details.mob-acc{border-bottom:1px solid #EBEEF1}
.mobile-nav details.mob-acc>summary{font-family:var(--font-head);font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);padding:12px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.mobile-nav details.mob-acc>summary::-webkit-details-marker{display:none}
.mobile-nav details.mob-acc>summary::after{content:"+";font-size:20px;color:var(--accent-deep);line-height:1}
.mobile-nav details.mob-acc[open]>summary::after{content:"\2013"}
/* mega menu panels */
.has-drop .drop{box-shadow:0 10px 30px rgba(16,21,27,.08)}
.drop.mega{min-width:0;width:900px;padding:28px 32px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px 36px}
.drop.mega.cols-2{width:560px;grid-template-columns:repeat(2,1fr)}
.mega-group{padding:4px 0 14px}
.mega-group .mega-head{display:block;font-family:var(--font-head);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--ink);margin-bottom:4px}
a.mega-head:hover{color:var(--accent-deep)}
.mega-note{display:block;font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:8px}
.drop.mega a.mega-link{display:block;padding:6px 0;font-size:14px;color:#4A555F;border-radius:0}
.drop.mega a.mega-link:hover{background:none;color:var(--accent-deep)}
.mega-cta{grid-column:1/-1;border-top:1px solid #EBEEF1;margin-top:6px;padding-top:12px;font-size:13.5px;color:var(--muted)}
.mega-cta a{color:var(--accent-deep);font-weight:600}
.mega-cta a:hover{color:var(--accent)}
@media (max-width:1599px){.drop.mega{width:760px}.drop.mega.cols-2{width:520px}}

/* homepage application choices + linked article cards */
.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.app-grid a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 20px;border:1px solid #E5E9ED;border-radius:10px;font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--ink);background:#fff;transition:border-color .2s,color .2s}
.app-grid a span{color:var(--accent-deep);font-weight:700}
.app-grid a:hover{border-color:var(--accent);color:var(--accent-deep)}
@media(max-width:900px){.app-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.app-grid{grid-template-columns:1fr}}
a.art-card{display:block;color:inherit;text-decoration:none}
a.art-card:hover .body h3{color:var(--accent-deep)}


/* ---- footer social icons ---- */
.foot-social{display:flex;gap:10px;margin:22px 0 26px;flex-wrap:wrap}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:#C9D2D9;transition:all .18s ease}
.foot-social a:hover{background:#2E6F4C;border-color:#2E6F4C;color:#fff;transform:translateY(-2px)}
@media (max-width:720px){.foot-social{margin:18px 0 20px}}

/* solutions in action — youtube link cards */
.yt-row{margin-top:24px}
.vid-card.ext{display:block;text-decoration:none}
.vid-card.ext .yt-badge{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:#FF0000;color:#fff;font-family:var(--font-head);font-weight:700;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.vid-card.ext:hover img{opacity:.55}
@media(max-width:680px){.yt-row{grid-template-columns:1fr}}

/* ============ LEGAL / LONG-FORM PROSE ============ */
.legal-updated{font-size:14px;color:rgba(255,255,255,.62);margin-top:16px;letter-spacing:.02em}
.legal-toc{border:1px solid var(--line);background:var(--white);border-radius:var(--radius);
  padding:24px 28px;margin-bottom:clamp(30px,4vw,48px);max-width:860px}
.legal-toc h2{font-size:15px;letter-spacing:.08em;margin-bottom:16px}
.legal-toc ol{list-style:decimal;padding-left:22px;columns:2;column-gap:40px}
.legal-toc li{margin:5px 0;break-inside:avoid}
.legal-toc a{color:var(--muted);font-size:15px}
.legal-toc a:hover{color:var(--accent-deep);text-decoration:underline}
.legal-body{max-width:860px}
.legal-body h2{font-size:clamp(19px,2vw,25px);text-transform:none;letter-spacing:0;
  margin:clamp(30px,4vw,46px) 0 10px;scroll-margin-top:104px}
.legal-body h2:first-of-type{margin-top:0}
.legal-body p{color:var(--muted);margin:13px 0;font-size:16.5px;line-height:1.78}
.legal-body ul,.legal-body ol{list-style:disc;padding-left:24px;margin:13px 0}
.legal-body ol{list-style:decimal}
.legal-body li{color:var(--muted);margin:8px 0;font-size:16.5px;line-height:1.7}
.legal-body strong{color:var(--ink-2)}
.legal-body a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.legal-body a:hover{color:var(--ink)}
.legal-callout{border-left:3px solid var(--accent);background:var(--white);
  padding:20px 24px;margin:24px 0;border-radius:0 var(--radius) var(--radius) 0}
.legal-callout p{margin:7px 0}
@media(max-width:640px){.legal-toc{padding:20px 20px}.legal-toc ol{columns:1}}

/* ============ CATEGORY PAGE — SELECTION LOGIC ============ */
/* The chain is the point of the Products section: application -> material ->
   conditions -> product. Reading order matters more than decoration here. */
.sel-chain{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 26px}
.sc-step{font-family:var(--font-head);font-weight:600;font-size:13.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:3px;padding:9px 14px}
.sc-arrow{color:var(--accent-deep);font-size:15px;line-height:1}
.sel-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 30px}
.sel-route{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 24px}
.sel-route h4{font-size:17px;letter-spacing:.03em;margin-bottom:8px}
.sel-route>p{font-size:14px;color:var(--muted);line-height:1.62;margin-bottom:16px}
.sel-route .sel-chain{margin:0;gap:7px}
.sel-route .sc-step{font-size:11px;padding:6px 9px}
.sel-route .sc-arrow{font-size:12px}
.sel-list{margin-top:4px}
.sel-list li{break-inside:avoid}
@media(min-width:901px){.sel-list{columns:2;column-gap:44px}}
@media(max-width:900px){.sel-routes{grid-template-columns:1fr}}

/* catalog card alias — the catalog line wording where it differs from the
   product page name (e.g. "Other Cutting Tools" -> Stone Cutting Tools) */
.pcard-alias{display:block;font-style:normal;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}