/* ============================================================================
   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);}}
/* The divider under this heading used to live on a .sub paragraph beneath it. That
   paragraph carried an unsourced response-time claim and was removed, so its border,
   padding and spacing move here to keep the heading separated from the form. */
.quote-dark h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;color:var(--white);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,.fg textarea{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,.fg textarea: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,.fg textarea::placeholder{color:rgba(255,255,255,.2);}
.fg textarea{min-height:78px;line-height:1.6;resize:vertical;display:block;}
.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);}

/* ── QUOTE FORM: PICKERS ──
   The lists live in <dialog> popups, not inline panels. Expanding a panel changed the
   height of the form, which stretched the hero background and shifted the logo down the
   page. A popup floats above everything, so nothing behind it moves. */
.qtrig{width:100%;display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:2px;color:var(--white);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;text-align:left;cursor:pointer;transition:all .25s;}
.qtrig:hover{border-color:rgba(231,76,60,.55);background:rgba(231,76,60,.06);}
.qtrig.has{border-color:rgba(231,76,60,.45);}
.qtrig-lab{flex:1;}
.qtrig-n{flex:none;font-family:'Open Sans',sans-serif;font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.35);}
.qtrig-n.has{color:var(--red);font-weight:700;}

.qmodal{margin:auto;width:min(560px,calc(100vw - 32px));max-height:min(76vh,720px);padding:0;border:1px solid rgba(255,255,255,.14);border-radius:4px;background:#0e0e0e;color:var(--white);box-shadow:0 24px 80px rgba(0,0,0,.75);overflow:hidden;}
.qmodal[open]{display:flex;flex-direction:column;}
.qmodal::backdrop{background:rgba(0,0,0,.72);}
.qmodal-head{display:flex;align-items:center;gap:12px;padding:18px 20px 0;}
.qmodal-head h4{flex:1;margin:0;font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;color:var(--white);}
.qmodal-x{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:2px;color:rgba(255,255,255,.55);font-size:20px;line-height:1;cursor:pointer;font-family:inherit;transition:all .2s;}
.qmodal-x:hover{border-color:var(--red);color:var(--red);}
.qmodal-sub{margin:6px 20px 0;font-family:'Open Sans',sans-serif;font-size:12.5px;color:rgba(255,255,255,.45);}
.qmodal-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 20px 4px;overscroll-behavior:contain;}
.qmodal-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px 18px;border-top:1px solid rgba(255,255,255,.08);}
.qmodal-done{background:var(--red);border:1px solid var(--red);border-radius:2px;color:var(--white);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;padding:10px 26px;cursor:pointer;transition:all .2s;}
.qmodal-done:hover{box-shadow:0 0 20px var(--red-glow);}
.qmodal-clear{background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:2px;color:rgba(255,255,255,.6);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:9px 16px;cursor:pointer;transition:all .2s;}
.qmodal-clear:hover{border-color:var(--red);color:var(--red);}

/* The page behind a popup is held still, so a scroll inside the popup cannot run on
   and start moving the page underneath it. */
body.qmodal-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;}

/* ── Category disclosures, used inside the products popup ── */
.qd{border:1px solid rgba(255,255,255,.1);border-radius:2px;margin-bottom:6px;background:rgba(255,255,255,.02);}
.qd[open]{border-color:rgba(231,76,60,.32);}
.qd > summary{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;list-style:none;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;color:var(--white);}
.qd > summary::-webkit-details-marker{display:none;}
.qd > summary::before{content:'';flex:none;width:0;height:0;border-left:5px solid rgba(255,255,255,.45);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .18s;}
.qd[open] > summary::before{transform:rotate(90deg);border-left-color:var(--red);}
.qd > summary:hover{background:rgba(255,255,255,.03);}
.qd-nm{flex:1;}
.qd-count{font-family:'Open Sans',sans-serif;font-weight:400;font-size:11px;color:rgba(255,255,255,.38);}
.qd-badge{flex:none;background:var(--red);color:var(--white);border-radius:11px;padding:1px 8px;font-size:11px;font-weight:800;}
.qd-body{padding:6px 13px 10px;border-top:1px solid rgba(255,255,255,.08);}
.qd-note{font-size:11.5px;color:rgba(255,255,255,.4);margin:4px 0 6px;line-height:1.5;}

.qhead{display:grid;grid-template-columns:20px 1fr 74px;gap:10px;padding:6px 0 4px;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.32);}
.qhead span:last-child{text-align:center;}
.qrow{display:grid;grid-template-columns:20px 1fr 74px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.qrow:last-child{border-bottom:none;}
.qrow label{display:block;margin:0;font-family:'Open Sans',sans-serif;font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.85);cursor:pointer;}
.qrow input[type=checkbox]{width:16px;height:16px;accent-color:var(--red);cursor:pointer;margin:0;}
.qrow .qqty{width:100%;padding:5px 7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:2px;font-size:12px;color:var(--white);font-family:'Open Sans',sans-serif;-webkit-appearance:none;}
.qrow .qqty:disabled{opacity:.28;}
.qrow.on{background:rgba(231,76,60,.06);}
/* Services carry no quantity - a count of fire risk assessments means nothing. */
.qhead-noqty,.qrow-noqty{grid-template-columns:20px 1fr;}

/* The message box is a textarea only because nothing else wraps to several lines. It is
   sized and styled as a plain field: no drag handle, no growing, same look as the rest. */
.fg textarea{min-height:0;height:78px;resize:none;overflow-y:auto;}
.fg-count{margin:5px 0 0;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
          text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.32);text-align:right;}
.fg-count.full{color:var(--red);}
.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 h3{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;}
/* A strong inside the class description is an inline emphasis, not a heading. Without
   this it inherits the .cls strong rule above and renders as a red 15px block, which
   looks like a second heading. Used for the class C water warning. */
.cls p strong{display:inline;font-family:inherit;font-size:inherit;color:rgba(255,255,255,.75);margin:0;letter-spacing:normal;font-weight:700;}

/* ---- 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;}