/* ============================================================
   SAPPHIRE FLAME RETARDANT — design tokens
   Subject: certified flame retardant treatment & compliance
   Signature idea: real flame-exposure-duration data, drawn to scale
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:        #12181A;   /* near-black charcoal, deep sections */
  --char:       #1E2B27;   /* deep green-charcoal, nav/footer */
  --char-2:     #223832;
  --paper:      #ECEDE5;   /* pale grey-green paper, main bg */
  --card:       #F5F4EE;   /* lighter card surface on paper */
  --ink-soft:   #3C4642;   /* body text on paper */
  --ink-mute:   #6B756F;   /* secondary/meta text */
  --line:       #CBCEC3;   /* hairline rule on paper */
  --line-dark:  rgba(236,237,229,0.16);
  --ember:      #C4451C;   /* untreated / danger accent — used sparingly */
  --ember-soft: #E3B79E;
  --safe:       #2F7A63;   /* treated / compliant accent */
  --safe-deep:  #1F5245;
  --safe-pale:  #DCEAE3;
  --paper-text: #ECEDE5;

  --display: 'Big Shoulders Display', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--char);
  margin:0 0 .4em;
  line-height:1.02;
  font-weight:800;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; }
:focus-visible{ outline:3px solid var(--safe); outline-offset:3px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:600;
  color:var(--safe-deep);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--ember);
  display:inline-block;
}
.eyebrow.on-dark{ color:var(--safe-pale); }

/* ---------- nav ---------- */
.site-nav{
  background:var(--char);
  color:var(--paper-text);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line-dark);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{
  font-family:var(--display);
  font-weight:800;
  font-size:1.5rem;
  color:var(--paper-text);
  text-decoration:none;
  letter-spacing:.01em;
  display:flex; align-items:baseline; gap:.5em;
}
.brand .tag{
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--safe-pale);
  opacity:.75;
}
.nav-links{
  display:flex; gap:2.2rem; list-style:none; margin:0; padding:0;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.03em;
  text-transform:uppercase;
}
.nav-links a{
  text-decoration:none; color:var(--paper-text); opacity:.78;
  padding:.4em 0; border-bottom:2px solid transparent;
  transition:opacity .15s, border-color .15s;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  opacity:1; border-color:var(--ember);
}
.nav-cta{
  font-family:var(--mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.05em; background:var(--ember); color:#fff;
  padding:.7em 1.2em; text-decoration:none; white-space:nowrap;
  transition:background .15s;
}
.nav-cta:hover{ background:#a83a17; }
.nav-toggle{ display:none; }

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-toggle{
    display:block; background:none; border:1px solid var(--line-dark);
    color:var(--paper-text); font-family:var(--mono); font-size:.75rem;
    padding:.5em .8em; text-transform:uppercase; letter-spacing:.05em;
  }
  .site-nav.open .nav-links{
    display:flex; flex-direction:column; gap:0; position:absolute;
    top:76px; left:0; right:0; background:var(--char); padding:0 28px 1.2rem;
  }
  .site-nav.open .nav-links a{ padding:.8em 0; border-bottom:1px solid var(--line-dark); }
}

/* ---------- hero ---------- */
.hero{
  background:var(--char);
  color:var(--paper-text);
  padding:5.5rem 0 4.5rem;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:6px;
  background:linear-gradient(90deg,var(--ember) 0 8%,var(--line-dark) 8% 40%, var(--safe) 40% 100%);
  opacity:.9;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:3.5rem; align-items:center;
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{
  color:#fff;
  font-size:clamp(2.6rem,5vw,4.1rem);
  margin-bottom:.5rem;
}
.hero h1 em{ font-style:normal; color:var(--ember); }
.hero .lede{
  font-size:1.12rem; color:var(--safe-pale); max-width:46ch; margin-bottom:1.8rem;
}
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-family:var(--mono);
  font-size:.82rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.95em 1.5em; border:1px solid transparent; transition:all .15s;
}
.btn-primary{ background:var(--ember); color:#fff; }
.btn-primary:hover{ background:#a83a17; }
.btn-ghost{ border-color:var(--line-dark); color:var(--paper-text); }
.btn-ghost:hover{ border-color:var(--paper-text); }
.btn-dark{ border-color:var(--char); color:var(--char); }
.btn-dark:hover{ background:var(--char); color:#fff; }

/* ---------- signature: flame duration bars ---------- */
.duration-panel{
  background:var(--ink);
  border:1px solid var(--line-dark);
  padding:1.6rem 1.6rem 1.2rem;
}
.duration-panel .panel-label{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--safe-pale); opacity:.7;
  display:flex; justify-content:space-between; margin-bottom:1.1rem;
}
.dbar-row{ margin-bottom:.85rem; }
.dbar-label{
  font-family:var(--mono); font-size:.74rem; color:var(--paper-text);
  display:flex; justify-content:space-between; margin-bottom:.3rem;
  opacity:.85;
}
.dbar-track{ background:rgba(236,237,229,0.08); height:20px; position:relative; }
.dbar-fill{
  height:100%; display:flex; align-items:center; padding-left:.5em;
  font-family:var(--mono); font-size:.68rem; color:#fff; font-weight:600;
  white-space:nowrap;
}
.dbar-fill.short{ background:var(--ember); }
.dbar-fill.mid{ background:#8a5a2e; }
.dbar-fill.sapphire{ background:var(--safe); }
.duration-foot{
  font-family:var(--mono); font-size:.68rem; color:var(--safe-pale);
  opacity:.6; margin-top:.8rem;
}

/* ---------- sections / bands ---------- */
section{ padding:4.5rem 0; }
.band-dark{ background:var(--char); color:var(--paper-text); }
.band-dark h2{ color:#fff; }
.band-dark p{ color:var(--safe-pale); }
.band-safe{ background:var(--safe-deep); color:#fff; }
.band-safe h2{ color:#fff; }

.section-head{ max-width:62ch; margin-bottom:2.6rem; }
.section-head h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
.section-head .lede{ font-size:1.05rem; color:var(--ink-mute); }
.band-dark .section-head .lede{ color:var(--safe-pale); }

/* ---------- grids / cards ---------- */
.grid{ display:grid; gap:1.6rem; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--card); border:1px solid var(--line); padding:1.8rem;
}
.card h3{ font-size:1.3rem; margin-bottom:.5rem; }
.card .num{
  font-family:var(--mono); font-size:.72rem; color:var(--ember);
  letter-spacing:.08em; margin-bottom:.8rem; display:block;
}
.card p{ color:var(--ink-mute); font-size:.95rem; margin-bottom:0; }

.pill-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.pill-list li{
  font-family:var(--mono); font-size:.78rem; border:1px solid var(--line);
  padding:.5em 1em; background:var(--card);
}
.band-dark .pill-list li{ border-color:var(--line-dark); background:transparent; color:var(--paper-text); }

/* ---------- tables ---------- */
.data-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.data-table th,.data-table td{
  text-align:left; padding:.85em 1em; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.data-table th{
  font-family:var(--mono); text-transform:uppercase; font-size:.72rem;
  letter-spacing:.06em; color:var(--ink-mute); font-weight:600;
}
.data-table td.hl{ font-family:var(--mono); font-weight:600; color:var(--safe-deep); }
.data-table tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); background:var(--card); padding:.4rem 1.4rem; }

/* ---------- stat strip ---------- */
.stat-strip{ display:flex; gap:0; border:1px solid var(--line-dark); }
.stat{
  flex:1; padding:1.6rem 1.4rem; border-right:1px solid var(--line-dark);
}
.stat:last-child{ border-right:none; }
.stat .n{ font-family:var(--display); font-size:2.4rem; color:var(--ember); line-height:1; }
.stat .l{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--safe-pale); margin-top:.4rem; }
@media (max-width:700px){ .stat-strip{ flex-direction:column; } .stat{ border-right:none; border-bottom:1px solid var(--line-dark); } }

/* ---------- process steps ---------- */
.steps{ counter-reset:step; display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:80px 1fr; gap:1.4rem;
  padding:1.6rem 0; border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step .step-num{
  font-family:var(--display); font-size:2.2rem; color:var(--line);
  font-weight:800;
}
.step h4{ font-size:1.15rem; margin-bottom:.3rem; }
.step p{ color:var(--ink-mute); margin-bottom:0; }

/* ---------- quote / callout ---------- */
.callout{
  border-left:4px solid var(--ember); background:var(--card);
  padding:1.4rem 1.6rem; font-size:.98rem; color:var(--ink-soft);
}
.callout strong{ color:var(--char); }

/* ---------- forms ---------- */
.form-grid{ display:grid; gap:1.1rem; }
label{
  display:block; font-family:var(--mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-mute);
  margin-bottom:.4em;
}
input,select,textarea{
  width:100%; font-family:var(--body); font-size:1rem; padding:.8em .9em;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
}
input:focus,select:focus,textarea:focus{ border-color:var(--safe); }
textarea{ min-height:130px; resize:vertical; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:700px){ .two-col{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
footer{ background:var(--ink); color:var(--paper-text); padding:3.5rem 0 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
@media (max-width:800px){ .foot-grid{ grid-template-columns:1fr; } }
footer h5{
  font-family:var(--mono); text-transform:uppercase; font-size:.72rem;
  letter-spacing:.08em; color:var(--safe-pale); margin-bottom:1em;
}
footer p, footer a{ color:var(--paper-text); opacity:.8; text-decoration:none; font-size:.92rem; }
footer ul{ list-style:none; margin:0; padding:0; }
footer li{ margin-bottom:.6em; }
.foot-bottom{
  border-top:1px solid var(--line-dark); padding-top:1.6rem; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:var(--mono); font-size:.72rem; opacity:.55;
}

/* ---------- misc ---------- */
.divider{ height:1px; background:var(--line); margin:3.5rem 0; }
.center{ text-align:center; }
.mt0{ margin-top:0; }