/* ============================================================================
   Kyoto Fire Services -- site stylesheet
   Shared by every page (index, services, products, contact-us).
   Edit this ONE file to change the look of the whole site.
   ============================================================================ */

*{margin:0;padding:0;box-sizing:border-box;}
:root{--red:#e74c3c;--red-glow:rgba(231,76,60,0.35);--dark:#080808;--panel:#111;--border:rgba(255,255,255,0.08);--white:#fff;}
html{scroll-behavior:smooth;}
body{font-family:'Open Sans',sans-serif;background:var(--dark);color:#ccc;overflow-x:hidden;}

/* ── NAV ── */
header{position:sticky;top:0;z-index:1000;background:rgba(8,8,8,0.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
nav{padding:0 48px;height:68px;display:flex;align-items:center;justify-content:space-between;}
.logo-wrap{display:flex;align-items:center;gap:14px;}
.logo-wrap img{height:38px;filter:brightness(0) invert(1);}
.logo-img-block{display:flex;flex-direction:column;gap:4px;}
.logo-reg{font-size:11px;color:rgba(255,255,255,.3);}
.nav-ul{display:flex;list-style:none;gap:0;}
.nav-ul li a{display:block;padding:0 16px;height:68px;line-height:68px;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.5px;text-decoration:none;transition:color .25s;position:relative;}
.nav-ul li a:hover{color:var(--white);}
.nav-ul li a.active-link,.nav-ul li a:hover{color:var(--red);}
.nav-ul li a::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:center;transition:transform .3s;}
.nav-ul li a:hover::after{transform:scaleX(1);}
.nav-quote{background:transparent!important;color:rgba(255,255,255,.45)!important;margin-left:8px;padding:0 16px!important;}
.nav-quote:hover{background:transparent!important;color:var(--red)!important;}
.nav-quote::after{display:block!important;}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;}
.hero-img{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;filter:brightness(.58) saturate(.9) contrast(1.05);background-image:url('/assets/img/535716_Kyoto-Fire_3_03182020.png');background-image:-webkit-image-set(url('/assets/img/hero-1100.webp') type('image/webp'),url('/assets/img/535716_Kyoto-Fire_3_03182020.png') type('image/png'));background-image:image-set(url('/assets/img/hero-1100.webp') type('image/webp'),url('/assets/img/535716_Kyoto-Fire_3_03182020.png') type('image/png'));}
@media (min-width:900px){.hero-img{background-image:url('/assets/img/535716_Kyoto-Fire_3_03182020.png');background-image:-webkit-image-set(url('/assets/img/hero-1920.webp') type('image/webp'),url('/assets/img/535716_Kyoto-Fire_3_03182020.png') type('image/png'));background-image:image-set(url('/assets/img/hero-1920.webp') type('image/webp'),url('/assets/img/535716_Kyoto-Fire_3_03182020.png') type('image/png'));}}
/* Above 1800px a 1920 source is being upscaled; serve the 2560 variant instead. */
@media (min-width:1800px){.hero-img,.page-hero-img{background-image:url('/assets/img/535716_Kyoto-Fire_3_03182020.png');background-image:-webkit-image-set(url('/assets/img/hero-2560.webp') type('image/webp'),url('/assets/img/535716_Kyoto-Fire_3_03182020.png') type('image/png'));background-image:image-set(url('/assets/img/hero-2560.webp') type('image/webp'),url('/assets/img/535716_Kyoto-Fire_3_03182020.png') type('image/png'));}}
/* Animated gradient overlay */
/* Dark enough on the LEFT to carry the copy, open enough on the RIGHT to let the
   photograph read. The previous stops were 97%/88% opaque across most of the width,
   which hid the image completely at every viewport. */
/* Layer 2 of 3: a light animated tint over the whole scene. Weak on purpose -- it
   colours the photograph, it does NOT carry text contrast. background-size is kept near
   100% so the ramp that is authored is roughly the ramp that is seen; at 300% only a
   third of it was ever on screen and the lighter stops rarely appeared. */
.hero-gradient{position:absolute;inset:0;background:linear-gradient(105deg,rgba(10,6,6,.7) 0%,rgba(18,7,6,.5) 38%,rgba(48,14,10,.34) 64%,rgba(10,6,6,.58) 100%);background-size:150% 150%;animation:gradShift 22s ease infinite;}
/* Layer 3 of 3: the scrim that actually guarantees contrast. Not animated, so it never
   drifts off the copy, and confined to the left where the copy lives, so the extinguisher
   and spray stay visible on the right. */
.hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,6,6,.94) 0%,rgba(6,6,6,.88) 26%,rgba(6,6,6,.55) 46%,rgba(6,6,6,.12) 66%,rgba(6,6,6,0) 82%);}
@keyframes gradShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
/* Scan line effect */
.hero-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 4px);pointer-events:none;}

.hero-content{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:60px 48px;display:grid;grid-template-columns:1.1fr 0.95fr;gap:72px;align-items:center;}

/* Typewriter */
.type-wrap{overflow:hidden;margin-bottom:20px;}
.hero-eyebrow{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:16px;animation:slideOnly .5s .1s both;}
@keyframes fadeSlide{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
/* Slide only, no fade: for the hero text, which holds the LCP element. Gating it
   behind an opacity animation delays LCP by exactly the animation delay. */
@keyframes slideOnly{from{transform:translateY(10px);}to{transform:translateY(0);}}
.hero-h1{font-family:'Montserrat',sans-serif;font-weight:900;font-size:60px;line-height:1.05;color:var(--white);margin-bottom:24px;}
.hero-h1 .static{animation:slideOnly .5s .2s both;}
.hero-h1 .typewriter{color:var(--red);display:inline-block;border-right:3px solid var(--red);padding-right:4px;animation:blink .7s step-end infinite;}
@keyframes blink{50%{border-color:transparent;}}
.hero-desc{color:rgba(255,255,255,.72);font-size:15px;line-height:1.8;max-width:480px;margin-bottom:8px;animation:slideOnly .5s .3s both;}
.hero-reg{color:rgba(255,255,255,.35);font-size:22px;font-style:italic;margin-bottom:32px;animation:slideOnly .5s .4s both;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;animation:slideOnly .5s .5s both;}
.btn-glow{display:inline-block;background:var(--red);color:var(--white);font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;padding:14px 28px;border-radius:2px;text-decoration:none;letter-spacing:.5px;position:relative;overflow:hidden;transition:all .3s;box-shadow:0 0 0 0 var(--red-glow);}
.btn-glow:hover{box-shadow:0 0 32px var(--red-glow),0 0 64px rgba(231,76,60,.2);transform:translateY(-2px);}
.btn-glow::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .5s;}
.btn-glow:hover::before{transform:translateX(100%);}
.btn-outline-glow{display:inline-block;border:1px solid rgba(231,76,60,.4);color:rgba(255,255,255,.7);font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;padding:14px 28px;border-radius:2px;text-decoration:none;letter-spacing:.5px;transition:all .3s;}
.btn-outline-glow:hover{border-color:var(--red);color:var(--white);box-shadow:0 0 16px rgba(231,76,60,.2);}

/* Quote card dark */
.quote-dark{background:rgba(11,11,11,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:40px;box-shadow:0 0 60px rgba(0,0,0,.8),0 0 120px rgba(231,76,60,.05);opacity:0;animation:cardSlide .9s cubic-bezier(.16,1,.3,1) .4s forwards;}
@keyframes cardSlide{from{opacity:0;transform:translateX(32px);}to{opacity:1;transform:translateX(0);}}
.quote-dark h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;color:var(--white);margin-bottom:4px;}
.quote-dark .sub{font-size:12px;color:rgba(255,255,255,.3);margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border);}
.fg{margin-bottom:14px;}
.fg label{display:block;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:rgba(255,255,255,.4);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px;}
.fg select,.fg input{width:100%;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:2px;font-size:13px;color:var(--white);font-family:'Open Sans',sans-serif;transition:all .25s;-webkit-appearance:none;}
.fg select option{background:#1a1a1a;}
.fg select:focus,.fg input:focus{outline:none;border-color:var(--red);background:rgba(231,76,60,.06);box-shadow:0 0 16px rgba(231,76,60,.12);}
.fg input::placeholder{color:rgba(255,255,255,.2);}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.submit-dark{width:100%;background:var(--red);color:var(--white);font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;padding:15px;border:none;border-radius:2px;cursor:pointer;letter-spacing:1.5px;text-transform:uppercase;transition:all .3s;margin-top:8px;position:relative;overflow:hidden;}
.submit-dark::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:translateX(-100%);transition:.4s;}
.submit-dark:hover{box-shadow:0 0 32px var(--red-glow);transform:translateY(-1px);}
.submit-dark:hover::after{transform:translateX(100%);}
.wa-btn{display:block;width:100%;margin-top:10px;padding:13px;background:transparent;border:1px solid rgba(37,211,102,.4);border-radius:2px;color:#25D366;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;text-align:center;text-decoration:none;letter-spacing:.5px;transition:all .3s;}
.wa-btn:hover{background:rgba(37,211,102,.08);border-color:#25D366;box-shadow:0 0 16px rgba(37,211,102,.15);}

/* ── CRED STRIP ── */
.cred-strip{background:#0d0d0d;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 48px;overflow:hidden;}
.cred-track{display:flex;gap:56px;align-items:center;width:max-content;}
.cred-it{display:flex;align-items:center;gap:10px;padding:8px 0;opacity:.45;text-decoration:none;transition:opacity .3s;white-space:nowrap;}
.cred-it:hover{opacity:1;}
/* Every image carries intrinsic width/height attributes so the browser reserves
   its box and nothing shifts (CLS). Where a rule sizes only ONE axis, the other must be
   explicitly auto: otherwise the width ATTRIBUTE wins over the aspect ratio and the image
   stretches. A 1473x1470 logo rendered as 1473x24 before this was added. */
.logo-wrap img,.cred-it img,.svc-icon-wrap img,.fb img{width:auto;}
img{max-width:100%;}
.cred-it img{height:24px;filter:brightness(0) invert(1);}
.cred-it span{font-family:'Montserrat',sans-serif;font-size:11px;color:rgba(255,255,255,.6);letter-spacing:1px;text-transform:uppercase;}

/* ── SECTION ── */
.section{padding:88px 48px;}
.si{max-width:1240px;margin:0 auto;}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.ey-line{width:28px;height:1px;background:var(--red);}
.ey-text{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--red);}
.sh{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;}
.sh h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:32px;color:var(--white);}
.sh p{font-size:13px;color:rgba(255,255,255,.35);margin-top:6px;max-width:380px;}
.sh a{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--red);text-decoration:none;opacity:.8;transition:opacity .2s;}
.sh a:hover{opacity:1;}

/* reveal */
/* Reveal: the hidden state is gated behind html.js so a JS failure, a crawler or a
   static render still sees every section. The reveal rule is scoped identically
   (html.js .reveal.in) so it wins the cascade; a bare .reveal.in would lose and blank
   the page below the hero. */
.reveal{transition:opacity .6s,transform .6s cubic-bezier(.16,1,.3,1);}
html.js .reveal{opacity:0;transform:translateY(28px);}
html.js .reveal.in{opacity:1;transform:translateY(0);}
.d1{transition-delay:.05s!important;}.d2{transition-delay:.15s!important;}.d3{transition-delay:.25s!important;}.d4{transition-delay:.35s!important;}

/* ── SERVICES ── */
.svc-dark-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);}
.svc-dark{background:var(--panel);padding:40px;transition:background .3s,box-shadow .3s;position:relative;overflow:hidden;cursor:pointer;}
.svc-dark::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent);transform:scaleX(0);transition:transform .5s;}
.svc-dark:hover::before{transform:scaleX(1);}
.svc-dark:hover{background:#161616;box-shadow:inset 0 0 60px rgba(231,76,60,.04);}
.svc-num{font-family:'Montserrat',sans-serif;font-weight:900;font-size:48px;color:rgba(231,76,60,.08);margin-bottom:20px;display:block;transition:color .3s;}
.svc-dark:hover .svc-num{color:rgba(231,76,60,.15);}
.svc-icon-wrap{width:44px;height:44px;background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:all .3s;}
.svc-dark:hover .svc-icon-wrap{background:rgba(231,76,60,.2);box-shadow:0 0 16px rgba(231,76,60,.15);}
.svc-icon-wrap img{height:22px;filter:brightness(0) invert(1);opacity:.7;}
.svc-dark h4{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--white);margin-bottom:12px;}
.svc-dark p{font-size:13px;color:rgba(255,255,255,.4);line-height:1.7;margin-bottom:24px;}
.svc-cta{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--red);text-decoration:none;opacity:.7;transition:opacity .2s;}
.svc-dark:hover .svc-cta{opacity:1;}

/* ── PRODUCTS ── */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.prod{background:var(--panel);border:1px solid var(--border);border-radius:4px;overflow:hidden;transition:all .35s;}
.prod:hover{border-color:rgba(231,76,60,.3);box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 24px rgba(231,76,60,.08);}
.prod-img{height:150px;overflow:hidden;position:relative;}
.prod-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.7);transition:all .4s;}
.prod:hover .prod-img img{filter:brightness(.9) saturate(1);transform:scale(1.05);}
.prod-body{padding:16px;}
.prod-tag{font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px;}
.prod-body h5{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;color:var(--white);margin-bottom:6px;}
.prod-body p{font-size:11px;color:rgba(255,255,255,.35);line-height:1.5;margin-bottom:14px;}
.btn-q{display:inline-block;border:1px solid rgba(231,76,60,.3);color:rgba(231,76,60,.8);font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;padding:6px 14px;border-radius:2px;text-decoration:none;transition:all .2s;}
.btn-q:hover{background:var(--red);color:var(--white);border-color:var(--red);box-shadow:0 0 16px var(--red-glow);}

/* ── CERT SECTION ── */
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.cert-glow{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:20px 24px;display:flex;align-items:center;gap:16px;text-decoration:none;transition:all .3s;position:relative;overflow:hidden;}
.cert-glow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .3s;}
.cert-glow:hover::before{transform:scaleY(1);}
.cert-glow:hover{border-color:rgba(231,76,60,.2);box-shadow:0 4px 24px rgba(0,0,0,.4),0 0 24px rgba(231,76,60,.06);}
.cg-img{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.cg-img img{max-width:40px;max-height:40px;object-fit:contain;filter:brightness(0) invert(1);opacity:.4;transition:opacity .3s;}
.cert-glow:hover .cg-img img{opacity:.8;}
.cg-text h5{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:2px;}
.cg-text p{font-size:11px;color:rgba(255,255,255,.3);}
.cg-text .arr{font-size:11px;color:var(--red);margin-top:4px;opacity:.6;}
.cert-glow:hover .arr{opacity:1;}
.cert-span{grid-column:span 3;}

/* ── ISO DARK BANNER ── */
.iso-dark{background:linear-gradient(135deg,#0d0505 0%,#180808 50%,#0d0505 100%);border-top:1px solid rgba(231,76,60,.1);border-bottom:1px solid rgba(231,76,60,.1);padding:72px 48px;position:relative;overflow:hidden;}
.iso-dark::before{content:'ISO 9001:2015';position:absolute;right:-20px;top:50%;transform:translateY(-50%) rotate(-90deg);font-family:'Montserrat',sans-serif;font-weight:900;font-size:100px;color:rgba(231,76,60,.04);letter-spacing:8px;pointer-events:none;white-space:nowrap;}
.iso-dark-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:1;}
.iso-dark h2{font-family:'Montserrat',sans-serif;font-weight:900;font-size:32px;color:var(--white);margin-bottom:16px;line-height:1.2;}
.iso-dark h2 span{color:var(--red);}
.iso-dark p{color:rgba(255,255,255,.5);font-size:14px;line-height:1.8;margin-bottom:28px;}
.iso-nums{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.iso-n{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:4px;padding:20px;text-align:center;}
.iso-n strong{display:block;font-family:'Montserrat',sans-serif;font-weight:900;font-size:32px;color:var(--red);text-shadow:0 0 20px var(--red-glow);}
.iso-n span{font-size:10px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1px;}

/* ── FOOTER ── */
footer{background:#050505;border-top:1px solid var(--border);padding:56px 48px 28px;}
.footer-inner{max-width:1240px;margin:0 auto;}
.fg-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid var(--border);margin-bottom:24px;}
.fb img{height:34px;margin-bottom:16px;filter:brightness(0) invert(1);opacity:.7;}
.fb p{color:rgba(255,255,255,.3);font-size:13px;line-height:1.7;}
.fb .rn{color:rgba(255,255,255,.15);font-size:11px;margin-top:8px;font-style:italic;}
.fc h5{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;color:rgba(255,255,255,.25);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;}
.fc ul{list-style:none;}
.fc li{margin-bottom:10px;}
.fc a{color:rgba(255,255,255,.35);text-decoration:none;font-size:13px;transition:color .2s;}
.fc a:hover{color:rgba(255,255,255,.8);}
.footer-btm{display:flex;justify-content:space-between;align-items:center;}
.footer-btm p{color:rgba(255,255,255,.15);font-size:12px;}

/* ── WA ── */
.wa-float{position:fixed;bottom:30px;right:30px;z-index:999;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:26px;text-decoration:none;transition:all .3s;box-shadow:0 0 0 0 rgba(37,211,102,.4);}
.wa-float:hover{transform:scale(1.12);box-shadow:0 0 0 12px rgba(37,211,102,.1),0 0 32px rgba(37,211,102,.4);}
/* Hidden while the quote form is on screen: it physically overlaps the name and quantity
   inputs on a phone, and the form already offers WhatsApp directly beneath it. */
.wa-float.tucked{opacity:0;transform:scale(.6);pointer-events:none;}
.wa-ring1,.wa-ring2{position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(37,211,102,.3);animation:ripple 2s linear infinite;}
.wa-ring2{inset:-16px;border-color:rgba(37,211,102,.15);animation-delay:.6s;}
@keyframes ripple{0%{transform:scale(.8);opacity:.8;}100%{transform:scale(1.2);opacity:0;}}

/* ---------- Skip link: first focusable element, visible only on keyboard focus ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--red);color:#fff;padding:12px 20px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;text-decoration:none;border-radius:0 0 3px 0;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* ---------- Numerals: phone numbers and figures must be lining/tabular so a reader
     transcribing a number off the page cannot misread it ---------- */
.wa-btn,.iso-n strong,.nap a,.nap span,input,select,.hero-reg{font-variant-numeric:lining-nums tabular-nums;}

/* ---------- Quote form states ---------- */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form-status{margin-top:14px;padding:12px 14px;border-radius:2px;font-size:13px;line-height:1.5;display:none;}
.form-status.show{display:block;}
.form-status.ok{background:rgba(46,204,113,.10);border:1px solid rgba(46,204,113,.35);color:#7ee2a8;}
.form-status.err{background:rgba(231,76,60,.10);border:1px solid rgba(231,76,60,.35);color:#f0a49c;}
.submit-dark[disabled]{opacity:.55;cursor:not-allowed;}
.fg input:invalid:not(:placeholder-shown){border-color:rgba(231,76,60,.55);}
.fg .req{color:var(--red);}

/* ---------- Contact / NAP block in the footer ---------- */
.nap{list-style:none;}
.nap li{margin-bottom:10px;font-size:13px;color:rgba(255,255,255,.45);line-height:1.6;}
.nap a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .25s;}
.nap a:hover{color:var(--red);}
.nap strong{display:block;color:rgba(255,255,255,.7);font-family:'Montserrat',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px;font-weight:700;}


/* ============================================================================
   RESPONSIVE
   The page was originally desktop-only (no media queries at all), so a phone got
   a 777px-wide layout inside a 390px viewport, clipped by body{overflow-x:hidden}
   rather than laid out. These two layers give it a real tablet and mobile design.
   ============================================================================ */

/* ---- Mobile nav toggle: hidden on desktop, revealed at the mobile breakpoint ---- */
.nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:3px;width:42px;height:38px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px;}
.nav-toggle span{display:block;width:18px;height:2px;background:rgba(255,255,255,.7);transition:transform .3s,opacity .3s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---- Tablet ---- */
@media (max-width:1024px){
  nav{padding:0 28px;}
  .hero-content{grid-template-columns:1fr;gap:44px;padding:100px 28px 64px;max-width:720px;}
  .hero-h1{font-size:clamp(38px,7vw,60px);}
  .hero-desc{max-width:none;}
  .section{padding:72px 28px;}
  .cred-strip{padding:16px 28px;}
  .svc-dark-grid{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .cert-grid{grid-template-columns:repeat(2,1fr);}
  .iso-dark-inner{grid-template-columns:1fr;gap:44px;}
  .fg-grid{grid-template-columns:1fr 1fr;gap:36px;}
}

/* ---- Mobile ---- */
@media (max-width:760px){
  nav{padding:0 18px;}
  .nav-toggle{display:flex;}
  .logo-wrap img{height:32px;}
  .logo-reg{font-size:10px;}
  /* The nav list becomes a dropdown panel. It is display:none when closed so its
     links are out of the tab order, not just invisible. */
  .nav-ul{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:rgba(10,10,10,.985);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:8px 0 14px;display:none;box-shadow:0 20px 40px rgba(0,0,0,.6);}
  .nav-ul.open{display:flex;}
  .nav-ul li{width:100%;}
  .nav-ul li a{height:auto;line-height:1.2;padding:14px 20px;font-size:12px;width:100%;}
  .nav-ul li a::after{display:none;}
  .nav-quote{margin-left:0;padding:14px 20px!important;color:var(--red)!important;border-top:1px solid var(--border);}

  .hero{min-height:auto;}
  /* Single column on a phone: the copy runs the full width, so the scrim has to as well. */
  .hero::before{background:linear-gradient(180deg,rgba(6,6,6,.9) 0%,rgba(6,6,6,.82) 45%,rgba(6,6,6,.88) 100%);}
  /* 88svh, not 100vh: mobile browser chrome makes 100vh taller than the visible area,
     and leaving a sliver visible hints that the page continues below. */
  .hero-content{min-height:88svh;padding:92px 18px 56px;gap:36px;align-content:center;}
  .hero-h1{font-size:clamp(32px,10vw,46px);}
  .hero-eyebrow{font-size:10px;letter-spacing:2px;}
  .hero-reg{font-size:17px;margin-bottom:24px;}
  .hero-ctas .btn-outline-glow{font-size:11px;padding:12px 16px;}
  .quote-dark{padding:24px 20px;}
  .quote-dark .sub{margin-bottom:20px;padding-bottom:16px;}

  .section{padding:56px 18px;}
  .cred-strip{padding:14px 18px;}
  .sh{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:32px;}
  .sh h2{font-size:26px;}
  .sh p{max-width:none;}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .cert-grid{grid-template-columns:1fr;}
  .iso-dark-inner{gap:32px;}
  .iso-nums{gap:12px;}
  .fg-grid{grid-template-columns:1fr;gap:28px;padding-bottom:28px;}
  .footer-btm{flex-direction:column;align-items:flex-start;gap:8px;}
  .footer-btm p{font-size:11px;}
  .wa-float{bottom:18px;right:18px;width:52px;height:52px;font-size:22px;}
}

/* ---- Small phones ---- */
@media (max-width:430px){
  .fg-row{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:1fr;}
  .iso-nums{grid-template-columns:1fr 1fr;}
  .hero-h1{font-size:clamp(28px,9.5vw,38px);}
}

/* ---------- Reduced motion: honour the OS setting. Kills the typewriter, the marquee,
     the count-ups and every reveal, and shows all content immediately ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  html{scroll-behavior:auto!important;}
  html.js .reveal,html.js .reveal.in{opacity:1!important;transform:none!important;}
  .quote-dark{opacity:1!important;animation:none!important;}
  .cred-track{transform:none!important;}
  .wa-ring1,.wa-ring2{display:none!important;}
  .hero-gradient{animation:none!important;}
}

/* ---------- Print ---------- */
@media print{
  header,.wa-float,.hero-scan,.hero-gradient,.cred-strip,.skip-link,.submit-dark,.wa-btn,.form-status{display:none!important;}
  body{background:#fff!important;color:#222!important;}
  .hero{min-height:auto!important;}
  .hero-img{display:none!important;}
  h1,h2,h3,h4,h5,.hero-h1{color:#111!important;}
  p,li,span{color:#333!important;}
  section,.iso-dark,footer{page-break-inside:avoid;background:#fff!important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#666;}
  html.js .reveal{opacity:1!important;transform:none!important;}
}


/* ============================================================================
   INNER PAGES (services, products, contact-us)
   The home page keeps its full-height hero; inner pages use a compact banner so
   the content starts near the top where a visitor expects it.
   ============================================================================ */

.page-hero{position:relative;padding:132px 48px 56px;overflow:hidden;border-bottom:1px solid var(--border);}
.page-hero-img{position:absolute;inset:0;background-position:center;background-size:cover;filter:brightness(.62) saturate(.95);}
.page-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,6,6,.93) 0%,rgba(8,6,6,.8) 42%,rgba(20,8,8,.5) 70%,rgba(8,8,8,.6) 100%);}
.page-hero-inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;}
.page-hero h1{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(32px,5vw,52px);line-height:1.06;color:var(--white);margin-bottom:14px;}
.page-hero p{color:rgba(255,255,255,.55);font-size:15px;line-height:1.8;max-width:640px;}
.crumbs{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:14px;}
.crumbs a{color:var(--red);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}

/* ---- Category block ---- */
.cat{padding:64px 48px;border-bottom:1px solid var(--border);}
.cat:nth-child(even){background:#0b0b0b;}
.cat-inner{max-width:1240px;margin:0 auto;}
.cat-head{margin-bottom:32px;}
.cat-head h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(22px,3vw,30px);color:var(--white);margin-bottom:8px;}
.cat-head p{font-size:14px;color:rgba(255,255,255,.45);line-height:1.8;max-width:760px;}

/* ---- Product cards ---- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;}
.pcard{background:var(--panel);border:1px solid var(--border);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .25s;}
.pcard:hover{border-color:rgba(231,76,60,.4);transform:translateY(-3px);}
.pcard-img{background:#f4f4f4;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:12px;}
.pcard-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.pcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pcard-body h3{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:var(--white);line-height:1.35;}
.pcard-body p{font-size:12px;color:rgba(255,255,255,.4);line-height:1.6;}
.pcard-body .btn-q{margin-top:auto;}

/* Items with no photograph on the old site: a labelled panel, never a grey placeholder box. */
.pcard.no-img .pcard-img{background:linear-gradient(135deg,#151515,#0e0e0e);border-bottom:1px solid var(--border);}
.pcard.no-img .pcard-img span{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(231,76,60,.55);text-align:center;padding:0 10px;}

/* ---- Fire class guide ---- */
.classes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);}
.cls{background:var(--panel);padding:20px;}
.cls strong{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:var(--red);margin-bottom:6px;letter-spacing:.5px;}
.cls p{font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.65;}

/* ---- Spec tables ---- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);}
table.spec{width:100%;border-collapse:collapse;font-size:13px;min-width:460px;}
table.spec th,table.spec td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);}
table.spec thead th{background:#141414;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.6);}
table.spec td{color:rgba(255,255,255,.5);font-variant-numeric:lining-nums tabular-nums;}
table.spec tbody tr:last-child td{border-bottom:none;}
table.spec tbody tr:hover td{background:rgba(231,76,60,.04);}

/* ---- Checklist / question list ---- */
.qlist{list-style:none;display:grid;gap:1px;background:var(--border);border:1px solid var(--border);}
.qlist li{background:var(--panel);padding:18px 20px;font-size:14px;color:rgba(255,255,255,.62);line-height:1.7;display:flex;gap:14px;align-items:flex-start;}
.qlist li::before{content:'';flex:none;width:7px;height:7px;margin-top:8px;background:var(--red);transform:rotate(45deg);}

/* ---- Contact page ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.cbox{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:28px;}
.crow{background:var(--panel);padding:20px;}
.crow h3{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px;}
.crow p,.crow a{font-size:15px;color:rgba(255,255,255,.75);line-height:1.7;text-decoration:none;font-variant-numeric:lining-nums tabular-nums;}
.crow a:hover{color:var(--red);}
.map-wrap{border:1px solid var(--border);overflow:hidden;background:var(--panel);}
.map-wrap iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(1) invert(.92) contrast(.85);}

@media (max-width:1024px){
  .page-hero{padding:120px 28px 48px;}
  .cat{padding:52px 28px;}
  .contact-grid{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:760px){
  .page-hero{padding:104px 18px 40px;}
  .cat{padding:44px 18px;}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  .cat-head{margin-bottom:24px;}
  .map-wrap iframe{height:260px;}
}
@media (max-width:430px){
  .pgrid{grid-template-columns:1fr 1fr;}
  .pcard-body{padding:12px;}
  .pcard-body h3{font-size:13px;}
}


/* ============================================================================
   WIDE SCREENS, TOUCH TARGETS AND LINE LENGTH
   From the 2026-08-26 viewport audit across 320px to 3440px.
   ============================================================================ */

/* ---- Nav shares the content measure -------------------------------------
   The nav was full-bleed while every content shell was capped at 1240px, so on a
   3440px panel the logo and the menu sat ~3000px apart above a narrow column. */
nav{max-width:1240px;margin:0 auto;}

/* ---- The shell widens on big screens -----------------------------------
   1240px inside 3440px left 1100px of dead space each side. Widening the shell uses
   the room; line length is capped separately below so text stays readable. */
@media (min-width:1700px){
  .si,.cat-inner,.page-hero-inner,.footer-inner,.iso-dark-inner,nav{max-width:1480px;}
  .hero-content{max-width:1480px;}
}
@media (min-width:2200px){
  .si,.cat-inner,.page-hero-inner,.footer-inner,.iso-dark-inner,nav{max-width:1640px;}
  .hero-content{max-width:1640px;}
  .section,.cat{padding-left:64px;padding-right:64px;}
}

/* ---- Readable measure ---------------------------------------------------
   Capped in ch, so it holds at any viewport rather than at one pixel width.
   Audit found 109-137 characters per line on desktop; 45-95 is comfortable. */
.cat-head p,.qlist li,.answer,.crow p{max-width:74ch;}
.sh p{max-width:70ch;}
.cat-inner > p{max-width:74ch;}

/* ---- Touch targets ------------------------------------------------------
   WCAG 2.5.8 sets 24x24 as the floor; 44x44 is the usable target. The products page
   had 34 primary CTAs at 145x27 with 10px text. */
.btn-q{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;padding:0 14px;}
.svc-cta{display:inline-flex;align-items:center;min-height:44px;}
.cert-glow{min-height:56px;}

@media (max-width:760px){
  /* The credential strip scrolls, which already makes it hard to tap. Give the links a
     real height, and stop them being a tab-order trap on a small screen. */
  .cred-it{padding:10px 0;}
  .cred-it span{font-size:11px;}
  /* Nothing on the page should render below 11px on a phone. */
  .prod-tag,.arr,.logo-reg,.footer-btm p{font-size:11px;}
  .fg label{font-size:11px;}
  table.spec th{font-size:11px;}
  .nav-toggle{width:46px;height:44px;}
}

/* ---- Focus visibility on the dark palette ------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* Visually hidden but still announced by screen readers (used for table captions). */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}