/* =====================================================================
   SIBSTROY / BKM — design tokens
   ===================================================================== */
:root{
  --ink:        #14181C;
  --navy:       #16324F;
  --navy-deep:  #0E2439;
  --steel:      #48586A;
  --concrete:   #E7E2D9;
  --paper:      #F8F6F1;
  --line:       #CFC7B6;
  --line-dark:  #2C4258;
  --signal:     #E15419;
  --signal-dim: #B8430F;
  --white:      #FFFFFF;
  --ink-on-dark:#F3F1EB;
  --muted:      #5B6270;
  --muted-dark: #9BAAB8;
  --ok:         #2F7A4E;

  --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body:    'PT Sans', 'Segoe UI', sans-serif;
  --f-mono:    'PT Mono', 'Courier New', monospace;

  --container: 1180px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--f-display); margin:0; font-weight:600; letter-spacing:.01em; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; }
button{ font-family:inherit; }

:focus-visible{ outline:3px solid var(--signal); outline-offset:2px; }

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

/* ---------- layout ---------- */
.wrap{ max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section--dark{ background:var(--navy-deep); color:var(--ink-on-dark); }
.section--navy{ background:var(--navy); color:var(--ink-on-dark); }
.section--concrete{ background:var(--concrete); }
.section--line-top{ border-top:1px solid var(--line); }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); align-items:start; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:980px){
  .grid2,.grid3,.grid4{ grid-template-columns:1fr; }
}
@media (min-width:640px) and (max-width:980px){
  .grid4{ grid-template-columns:1fr 1fr; }
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--signal); display:block; }
.section--dark .eyebrow, .section--navy .eyebrow{ color:#F0A578; }

/* ---------- headings ---------- */
.h-display{
  font-size:clamp(38px,5.4vw,74px);
  line-height:.98;
  text-transform:uppercase;
  letter-spacing:.005em;
}
.h-section{
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.04;
  text-transform:uppercase;
}
.h-card{ font-size:20px; text-transform:uppercase; letter-spacing:.01em; }
.lede{ font-size:19px; color:var(--muted); max-width:56ch; }
.section--dark .lede,.section--navy .lede{ color:var(--muted-dark); }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(248,246,241,.97);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-word{ font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.brand-sub{ font-family:var(--f-mono); font-size:10.5px; color:var(--muted); letter-spacing:.05em; display:block; margin-top:1px; }

.nav-links{ display:flex; gap:32px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--f-mono); font-size:13px; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; color:var(--steel); padding:6px 0; border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink); border-color:var(--signal); }
.nav-links__cta{ display:none; }

.nav-cta{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.03em; text-transform:uppercase;
  background:var(--navy); color:var(--white); text-decoration:none;
  padding:11px 18px; border-radius:var(--radius); white-space:nowrap;
}
.nav-cta:hover{ background:var(--navy-deep); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 11px; cursor:pointer; line-height:0;
}
.nav-toggle .bar{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:900px){
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
  .nav-links{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:74px; left:0; right:0; bottom:0;
    background:var(--paper); padding:8px var(--gutter) 32px;
    transform:translateX(100%); transition:transform .3s ease;
    overflow-y:auto; z-index:49;
  }
  .nav-links.nav-links--open{ transform:translateX(0); }
  .nav-links a{ display:block; padding:18px 0; border-bottom:1px solid var(--line); font-size:15px; width:100%; }
  .nav-links__cta{ display:block !important; border-bottom:none !important; margin-top:16px; }
  .nav-links__cta a{
    display:block; text-align:center; border-bottom:none;
    background:var(--navy); color:#fff; padding:15px; border-radius:var(--radius);
  }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:13.5px; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; padding:14px 26px; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer;
}
.btn--signal{ background:var(--signal); color:#fff; }
.btn--signal:hover{ background:var(--signal-dim); }
.btn--outline{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--outline:hover{ border-color:var(--ink); }
.section--dark .btn--outline,.section--navy .btn--outline{ border-color:var(--line-dark); color:var(--ink-on-dark); }
.section--dark .btn--outline:hover,.section--navy .btn--outline:hover{ border-color:var(--ink-on-dark); }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }

/* ---------- credibility strip ---------- */
.strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--concrete);
}
.strip .wrap{ display:flex; flex-wrap:wrap; gap:10px 40px; padding:20px var(--gutter); justify-content:space-between; }
.strip-item{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.03em; color:var(--steel); text-transform:uppercase; white-space:nowrap; }
.strip-item b{ color:var(--ink); }

/* ---------- cards ---------- */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.card--dark{ background:#1B3C5C; border-color:var(--line-dark); }

.path-card{
  position:relative; border-radius:var(--radius); overflow:hidden; text-decoration:none; color:#fff;
  min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; padding:34px;
  isolation:isolate;
}
.path-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.path-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,36,57,.15) 0%, rgba(14,36,57,.92) 100%); z-index:-1; }
.path-card .tag{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#F0A578; margin-bottom:10px; }
.path-card h3{ font-size:clamp(24px,2.6vw,32px); text-transform:uppercase; margin-bottom:10px; }
.path-card p{ color:#D9E1E8; margin-bottom:18px; max-width:42ch; }
.path-card .go{ font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:.04em; display:inline-flex; align-items:center; gap:8px; }
.path-card:hover .go{ color:var(--signal); }

/* ---------- stat blocks ---------- */
.stat{ padding:26px 0; border-top:1px solid var(--line); }
.stat .num{ font-family:var(--f-display); font-size:clamp(34px,4vw,54px); line-height:1; color:var(--navy); }
.stat .label{ font-size:14.5px; color:var(--muted); margin-top:8px; max-width:26ch; }
.section--dark .stat,.section--navy .stat{ border-color:var(--line-dark); }
.section--dark .stat .num,.section--navy .stat .num{ color:#fff; }
.section--dark .stat .label,.section--navy .stat .label{ color:var(--muted-dark); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 28px; }
@media (max-width:900px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }

/* ---------- spec table ---------- */
.spec-table{ width:100%; border-collapse:collapse; font-size:15px; }
.spec-table caption{ text-align:left; font-family:var(--f-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.spec-table th,.spec-table td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.spec-table thead th{ font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:2px solid var(--ink); }
.spec-table td.num,.spec-table th.num{ font-family:var(--f-mono); }
.spec-table tbody tr:hover{ background:rgba(0,0,0,.02); }
.spec-table .hi{ background:#FBEFE6; font-weight:700; }

/* ---------- comparison score table ---------- */
.score-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.score-table th,.score-table td{ padding:11px 12px; text-align:center; border-bottom:1px solid var(--line); }
.score-table td:first-child,.score-table th:first-child{ text-align:left; }
.score-table thead th{ background:var(--navy); color:#fff; font-family:var(--f-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.02em; }
.score-table .bkm-col{ background:#DCEBD9; font-family:var(--f-mono); font-weight:700; color:#1E4A2E; }
.score-table tfoot td{ font-weight:700; background:var(--ink); color:#fff; font-family:var(--f-mono); }
.score-table tfoot td.bkm-col{ background:#2E6F4A; color:#fff; }

/* ---------- problem/solution rows ---------- */
.ps-row{ display:grid; grid-template-columns:34px 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--line); }
.ps-row:last-child{ border-bottom:1px solid var(--line); }
.ps-row .ico{ width:34px; height:34px; border-radius:50%; background:var(--steel); display:flex; align-items:center; justify-content:center; }
.ps-row .ico svg{ width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2; }
.ps-row h4{ font-family:var(--f-body); font-weight:700; font-size:17px; text-transform:none; margin-bottom:5px; }
.ps-row .fix{ color:var(--muted); font-size:15px; }
.ps-row .fix b{ color:var(--signal-dim); font-family:var(--f-mono); font-weight:700; }

/* ---------- timeline (real chronology) ---------- */
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; }
.timeline::before{ content:""; position:absolute; top:17px; left:8%; right:8%; height:1px; background:var(--line-dark); }
@media (max-width:900px){ .timeline{ grid-template-columns:1fr; } .timeline::before{ display:none; } }
.tl-item{ position:relative; }
.tl-dot{ width:34px; height:34px; border-radius:50%; background:var(--steel); border:3px solid var(--navy-deep); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-family:var(--f-mono); font-size:11px; color:#fff; }
.tl-item:last-child .tl-dot{ background:var(--signal); }
.tl-item .date{ font-family:var(--f-mono); font-size:12px; color:#F0A578; text-transform:uppercase; margin-bottom:6px; }
.tl-item h4{ font-family:var(--f-body); font-weight:700; font-size:16.5px; margin-bottom:8px; }
.tl-item p{ font-size:14px; color:var(--muted-dark); }

/* ---------- photo frame w/ caption ---------- */
.photo{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--concrete); }
.photo img{ width:100%; height:100%; object-fit:cover; }
.caption{ font-family:var(--f-mono); font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.5; }
.verified-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ok); background:#E7F3EB; border:1px solid #BFE0C9; padding:6px 12px; border-radius:20px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-deep); color:var(--muted-dark); padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h5{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#F0A578; margin-bottom:16px; }
.footer-grid a{ display:block; text-decoration:none; color:var(--muted-dark); font-size:14.5px; margin-bottom:10px; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid var(--line-dark); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.02em; }

/* ---------- misc ---------- */
.kicker-num{ font-family:var(--f-mono); color:var(--muted); }
.divider{ height:1px; background:var(--line); border:none; margin:0; }
.pill{ display:inline-block; font-family:var(--f-mono); font-size:12px; padding:7px 14px; border:1px solid var(--line); border-radius:20px; color:var(--steel); }
.center{ text-align:center; }
.mt-0{ margin-top:0 !important; }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }