/* ============================================================
   SAFE QLD FIRE PROTECTION — design system
   Palette: brand crimson #9B2335 (primary), site brick #AB4644
   (hover/light), orange #E8833A (accent), charcoal #232928,
   slate #526664, warm off-white #E5E3DC.
   ============================================================ */
:root{
  --crimson:#9B2335; --brick:#AB4644; --orange:#E8833A;
  --ink:#232928; --charcoal:#303636; --slate:#526664;
  --cream:#E5E3DC; --paper:#F7F6F2; --white:#fff;
  --line:#D8D5CC; --faint:#7A857F;
  --shadow:0 10px 30px rgba(35,41,40,.10);
  --shadow-lg:0 18px 50px rgba(35,41,40,.16);
  --rad:14px;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:"Segoe UI",Arial,Helvetica,sans-serif;color:var(--ink);
  background:var(--paper);font-size:16.5px;line-height:1.65}
img{max-width:100%;display:block}
a{color:var(--crimson);text-decoration:none}
a:hover{color:var(--brick)}

/* ---------- typography ---------- */
h1,h2,h3,h4{line-height:1.15;font-weight:800;color:var(--ink);letter-spacing:-.01em}
h1{font-size:clamp(34px,5vw,56px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:clamp(19px,2.2vw,24px)}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--crimson);margin-bottom:14px}
.eyebrow::before{content:"";display:inline-block;width:34px;height:3px;background:var(--orange);
  margin-right:12px;vertical-align:middle;border-radius:2px}
.lead{font-size:clamp(17px,2vw,20px);color:var(--slate);max-width:820px}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
section{padding:72px 0}
section.tight{padding:48px 0}
section.alt{background:var(--white)}
section.dark{background:var(--ink);color:var(--cream)}
section.dark h2,section.dark h3{color:var(--white)}
section.dark p{color:#c9cfc9}
.center{text-align:center}
.center .lead{margin:14px auto 0}

/* ---------- top utility bar ---------- */
.topbar{background:var(--ink);color:#cfd6d0;font-size:13.5px;padding:8px 0}
.topbar .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar a{color:var(--white);font-weight:700}
.topbar a:hover{color:var(--orange)}
.topbar .spacer{flex:1}
.topbar .b24{color:var(--orange);font-weight:800;letter-spacing:.06em}

/* ---------- header / nav ---------- */
header.site{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(35,41,40,.06)}
.navrow{display:flex;align-items:center;gap:26px;padding:12px 22px;max-width:var(--max);margin:0 auto}
.logo img{height:56px;width:auto}
nav.main{display:flex;gap:2px;align-items:center;flex:1;justify-content:flex-end}
nav.main>div{position:relative}
nav.main a.top{display:block;padding:10px 13px;font-weight:700;font-size:15px;color:var(--ink);
  border-radius:8px}
nav.main a.top:hover{background:var(--cream);color:var(--crimson)}
nav.main a.top.on{color:var(--crimson)}
nav.main .drop{position:absolute;top:100%;left:0;background:var(--white);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);min-width:280px;padding:8px;display:none;z-index:95}
nav.main>div:hover .drop,nav.main>div:focus-within .drop{display:block}
nav.main .drop a{display:block;padding:10px 14px;border-radius:8px;font-weight:600;font-size:14.5px;color:var(--ink)}
nav.main .drop a:hover{background:var(--cream);color:var(--crimson)}
nav.main .drop .dhead{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--faint);
  text-transform:uppercase;padding:10px 14px 4px}
.callbtn{background:var(--crimson);color:var(--white)!important;font-weight:800;padding:11px 20px;
  border-radius:10px;white-space:nowrap;box-shadow:0 4px 14px rgba(155,35,53,.35)}
.callbtn:hover{background:var(--brick)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font-size:20px;cursor:pointer;color:var(--ink)}

/* mobile nav */
.mnav{display:none;background:var(--white);border-bottom:1px solid var(--line);padding:8px 22px 18px}
.mnav.open{display:block}
.mnav a{display:block;padding:11px 8px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--paper)}
.mnav .sub a{padding-left:26px;font-weight:600;color:var(--slate);font-size:14.5px}
.mnav .call{margin-top:14px;display:block;text-align:center;background:var(--crimson);
  color:var(--white);border-radius:10px;padding:13px;font-weight:800}

/* ---------- hero ---------- */
.hero{position:relative;color:var(--white);overflow:hidden;background:var(--ink)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.42) saturate(.9)}
.hero .wrap{position:relative;padding-top:96px;padding-bottom:96px}
.hero.small .wrap{padding-top:64px;padding-bottom:64px}
.hero h1{color:var(--white);max-width:840px}
.hero p.sub{margin-top:18px;font-size:clamp(16px,2vw,19.5px);color:#e8e5dc;max-width:720px;line-height:1.6}
.hero .crumbs{font-size:13.5px;color:#cfc9bd;margin-bottom:18px;font-weight:600}
.hero .crumbs a{color:var(--orange)}
.btnrow{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 28px;border-radius:11px;font-weight:800;font-size:16px;
  transition:.15s}
.btn.primary{background:var(--crimson);color:var(--white);box-shadow:0 6px 20px rgba(155,35,53,.45)}
.btn.primary:hover{background:var(--brick);transform:translateY(-2px)}
.btn.ghost{border:2px solid rgba(255,255,255,.75);color:var(--white)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.orange{background:var(--orange);color:#3a2205}
.btn.orange:hover{filter:brightness(1.07);transform:translateY(-2px)}
.ticks{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:30px}
.ticks span{font-size:14px;font-weight:700;color:#e8e5dc}
.ticks span::before{content:"✓";color:var(--orange);font-weight:900;margin-right:8px}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:22px;margin-top:44px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .img{height:190px;background-size:cover;background-position:center;border-bottom:4px solid var(--crimson)}
.card .pad{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.card h3{margin-bottom:10px}
.card p{color:var(--slate);font-size:15px;flex:1}
.card .go{margin-top:16px;font-weight:800;color:var(--crimson);font-size:14.5px}
.card .go::after{content:" →"}
.card:hover .go{color:var(--brick)}

/* value tiles */
.tiles{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:40px}
.tile{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--orange);
  border-radius:var(--rad);padding:24px;box-shadow:var(--shadow)}
.tile .ic{font-size:28px;margin-bottom:12px}
.tile h3{font-size:17.5px;margin-bottom:8px}
.tile p{font-size:14px;color:var(--slate)}
section.dark .tile{background:#2b3231;border-color:#3c4544}
section.dark .tile h3{color:var(--white)}
section.dark .tile p{color:#b9c1ba}

/* stats band */
.stats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:40px}
.stat{text-align:center;padding:22px 10px}
.stat .n{font-size:clamp(34px,4.5vw,50px);font-weight:800;color:var(--orange);line-height:1}
.stat .l{margin-top:8px;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c9cfc9}

/* ---------- alternating feature rows ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-top:56px}
.feature.flip .txt{order:-1}
.feature .pic{border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid var(--line)}
.feature .pic img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.feature h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:14px}
.feature p{color:var(--slate);margin-bottom:12px}
.feature ul{margin:16px 0 20px;list-style:none}
.feature li{padding:7px 0 7px 32px;position:relative;font-size:15.5px;color:var(--ink)}
.feature li::before{content:"✓";position:absolute;left:0;top:7px;width:22px;height:22px;
  background:var(--cream);color:var(--crimson);font-weight:900;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px}
.feature li b.std{color:var(--slate);font-weight:700}

/* standards chips */
.stdchip{display:inline-block;background:var(--cream);border:1px solid var(--line);color:var(--charcoal);
  font-size:12.5px;font-weight:800;border-radius:99px;padding:4px 12px;margin:4px 6px 0 0;letter-spacing:.03em}

/* ---------- process steps ---------- */
.steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:44px;
  counter-reset:step}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);
  padding:26px;box-shadow:var(--shadow);position:relative;counter-increment:step}
.step::before{content:counter(step,decimal-leading-zero);font-size:40px;font-weight:800;
  color:var(--cream);position:absolute;top:14px;right:20px;line-height:1;
  -webkit-text-stroke:1.5px var(--orange)}
.step h3{font-size:17.5px;margin-bottom:8px;padding-right:56px}
.step p{font-size:14.5px;color:var(--slate)}

/* ---------- FAQ accordions ---------- */
.faq{margin-top:34px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:12px;
  margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
.faq summary{padding:18px 22px;font-weight:800;font-size:16.5px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:700;color:var(--crimson);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--crimson)}
.faq .a{padding:0 22px 20px;color:var(--slate);font-size:15.5px}

/* ---------- quote form ---------- */
.formcard{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);
  padding:34px;box-shadow:var(--shadow-lg)}
.formcard h3{margin-bottom:6px}
.formcard .note{font-size:14px;color:var(--faint);margin-bottom:22px}
.frow{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin-bottom:14px}
.frow.one{grid-template-columns:1fr}
label.f{display:block;font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--charcoal);
  text-transform:uppercase;margin-bottom:6px}
input.f,select.f,textarea.f{width:100%;border:1.5px solid var(--line);border-radius:10px;
  padding:13px 14px;font-size:15.5px;font-family:inherit;background:var(--paper);color:var(--ink)}
input.f:focus,select.f:focus,textarea.f:focus{outline:none;border-color:var(--crimson);
  box-shadow:0 0 0 3px rgba(155,35,53,.12)}
textarea.f{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.fmsg{margin-top:14px;font-weight:700;display:none;padding:12px 16px;border-radius:10px}
.fmsg.ok{display:block;background:#eaf6ee;color:#1c6b3a;border:1px solid #bfe3cb}
.fmsg.err{display:block;background:#fbeeee;color:var(--crimson);border:1px solid #ecc8c8}

/* ---------- pre-footer CTA band ---------- */
.ctaband{background:linear-gradient(115deg,var(--crimson),#6d1826 70%);color:var(--white);
  padding:58px 0}
.ctaband .wrap{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.ctaband h2{color:var(--white);flex:1;min-width:300px;font-size:clamp(24px,3vw,34px)}
.ctaband p{color:#f3d9dd;margin-top:8px;font-size:15.5px}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#b9c1ba;padding:64px 0 0;font-size:14.5px}
footer.site .cols{display:grid;gap:36px;grid-template-columns:2fr 1fr 1fr 1.4fr;max-width:var(--max);
  margin:0 auto;padding:0 22px}
footer.site h4{color:var(--white);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:16px}
footer.site a{display:block;color:#b9c1ba;padding:4px 0}
footer.site a:hover{color:var(--orange)}
footer.site .logo img{height:52px;margin-bottom:16px;filter:brightness(1.1)}
footer.site .lic{margin-top:16px;font-size:13px;line-height:1.8;color:#8f9992}
footer.site .lic b{color:var(--cream)}
.botbar{border-top:1px solid #3c4544;margin-top:48px;padding:20px 0}
.botbar .wrap{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;font-size:13px;color:#8f9992}

/* sticky mobile call button */
.mobcall{display:none;position:fixed;bottom:16px;left:16px;right:16px;z-index:80;
  background:var(--crimson);color:var(--white);text-align:center;padding:15px;border-radius:12px;
  font-weight:800;font-size:16.5px;box-shadow:0 8px 26px rgba(35,41,40,.4)}

/* breadcrumb strip on inner pages */
.crumbstrip{background:var(--white);border-bottom:1px solid var(--line);padding:12px 0;font-size:13.5px;
  font-weight:600;color:var(--faint)}
.crumbstrip a{color:var(--slate)}
.crumbstrip a:hover{color:var(--crimson)}

/* misc */
.badge-row{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:30px}
.badge-row img{height:74px;width:auto}
.notebox{background:var(--cream);border-left:5px solid var(--orange);border-radius:10px;
  padding:20px 24px;margin-top:28px;font-size:15.5px}
.table-scroll{overflow-x:auto;margin-top:30px}
table.spec{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);
  border-radius:var(--rad);overflow:hidden;font-size:15px}
table.spec th{background:var(--charcoal);color:var(--white);text-align:left;padding:13px 16px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase}
table.spec td{padding:12px 16px;border-top:1px solid var(--line)}
table.spec tr:nth-child(even) td{background:var(--paper)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  nav.main{display:none}
  .burger{display:block;margin-left:auto}
  .feature{grid-template-columns:1fr;gap:28px}
  .feature.flip .txt{order:0}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  section{padding:52px 0}
  .hero .wrap{padding-top:64px;padding-bottom:64px}
  .frow{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr}
  .mobcall{display:block}
  body{padding-bottom:74px}
  .topbar .hide-s{display:none}
  .logo img{height:44px}
}