/* BaseCourse — site styles. Tokens from the BaseCourse design system. */

:root{
  --surface-000:#f7f4ee;
  --surface-100:#ece7dc;
  --surface-200:#ddd5c7;
  --line:#c6bca9;
  --ink:#1a1815;
  --ink-muted:#6b6357;
  --orange-500:#dc5318;
  --orange-700:#a33a0e;
  --mark-survey:#d6266e;
  --mark-electric:#c42b22;
  --mark-gas:#9a7404;
  --mark-sewer:#2e7d3e;
  --mark-water:#1d6fb8;

  --display:"Barlow Condensed","Oswald","Liberation Sans Narrow","Arial Narrow",sans-serif;
  --sans:"IBM Plex Sans","Carlito","Liberation Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono","DejaVu Sans Mono","Liberation Mono",ui-monospace,monospace;

  --rail:28px;
  --gutter:clamp(20px, 5vw, 64px);
  --measure:34rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-000:#14120f;
    --surface-100:#1e1b17;
    --surface-200:#292520;
    --line:#3a342c;
    --ink:#f2eee7;
    --ink-muted:#a79d8d;
    --orange-500:#f26b2a;
    --orange-700:#f89154;
    --mark-survey:#f26ba0;
    --mark-electric:#e8615a;
    --mark-gas:#d4a72c;
    --mark-sewer:#58b06a;
    --mark-water:#5aa3e0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --surface-000:#14120f;
  --surface-100:#1e1b17;
  --surface-200:#292520;
  --line:#3a342c;
  --ink:#f2eee7;
  --ink-muted:#a79d8d;
  --orange-500:#f26b2a;
  --orange-700:#f89154;
  --mark-survey:#f26ba0;
  --mark-electric:#e8615a;
  --mark-gas:#d4a72c;
  --mark-sewer:#58b06a;
  --mark-water:#5aa3e0;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--surface-000);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  padding-left:var(--rail);
}
img{ max-width:100%; }

/* ---- the section profile: a cut through the ground, down the left edge ---- */
.profile{
  position:fixed; left:0; top:0; width:var(--rail); height:100vh; z-index:10;
  display:flex; flex-direction:column;
}
.profile i{ display:block; width:100%; }
.profile .surface  { flex:0 0 12%;  background:var(--ink); }
.profile .survey   { flex:0 0 0.7%; background:var(--mark-survey); }
.profile .base     { flex:0 0 38%;  background:var(--orange-500); position:relative; overflow:hidden; }
.profile .subgrade { flex:1 1 auto; background:var(--ink-muted); }
.profile .base::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, var(--surface-000) 1.6px, transparent 1.7px);
  background-size:14px 26px; background-position:7px 8px; opacity:.5;
}

/* ---- shell ---- */
.wrap{ max-width:64rem; margin:0 auto; padding:0 var(--gutter); }

header.site{
  border-bottom:1px solid var(--line);
  padding:22px 0 18px;
}
header.site .wrap{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.brand{
  font-family:var(--display); font-weight:700; font-size:30px; line-height:.9;
  letter-spacing:.02em; text-transform:uppercase; text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:11px;
}
.brand-mark{ width:27px; height:27px; display:block; flex:none; }
@media (max-width:420px){ .brand-mark{ width:23px; height:23px; } }
nav ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0; flex-wrap:wrap; }
nav a{
  color:var(--ink-muted); text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:2px solid transparent; padding-bottom:2px;
}
nav a:hover{ color:var(--ink); }
nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--orange-500); }

main{ padding:0 0 72px; }
section{ padding:52px 0 0; }
section:first-of-type{ padding-top:44px; }

.eyebrow{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--orange-700);
  margin:0 0 10px;
}
h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(40px, 8vw, 74px); line-height:.94; letter-spacing:.01em;
  margin:0 0 18px; text-wrap:balance;
}
h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(24px, 4vw, 32px); line-height:1.05; letter-spacing:.02em;
  text-transform:uppercase; margin:0 0 16px;
}
h3{
  font-family:var(--display); font-weight:600;
  font-size:21px; line-height:1.15; margin:0 0 7px;
}
p{ margin:0 0 16px; max-width:var(--measure); }
.lede{ font-size:20px; line-height:1.55; max-width:38rem; }
a{ color:var(--orange-700); }
strong{ font-weight:600; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---- pieces ---- */
.cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:30px; }
.cols p{ max-width:none; }
.col{ border-top:2px solid var(--ink); padding-top:12px; }

.stats{
  display:flex; flex-wrap:wrap; gap:8px 34px;
  font-family:var(--mono); font-size:14px; color:var(--ink-muted);
  margin:0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  max-width:none;
}
.stats b{ color:var(--ink); font-weight:500; }

.offer{
  border-top:1px solid var(--line); padding:22px 0;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 34px; align-items:start;
}
.offer:last-of-type{ border-bottom:1px solid var(--line); }
.offer .body p{ margin:0; }
.offer .meta{
  font-family:var(--mono); font-size:15px; text-align:right; white-space:nowrap;
}
.offer .meta small{ display:block; font-size:12px; color:var(--ink-muted); margin-top:4px; white-space:normal; max-width:190px; margin-left:auto; }
@media (max-width:640px){
  .offer{ grid-template-columns:1fr; }
  .offer .meta{ text-align:left; }
}

.note{
  background:var(--surface-100); padding:20px 22px; margin:30px 0 0;
  border-left:4px solid var(--orange-500);
}
.note p{ margin:0; max-width:none; }
.note p + p{ margin-top:10px; }

.who{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.who img{ width:150px; height:150px; object-fit:cover; object-position:50% 20%; flex:none; }
.who .body{ flex:1 1 280px; }

.cta{
  display:inline-block; margin-top:8px;
  background:var(--orange-500); color:var(--surface-000);
  font-weight:600; font-size:15px; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; padding:13px 22px;
}
:root[data-theme="dark"] .cta, :root:not([data-theme="light"]) .cta{ color:#14120f; }
.cta:hover{ background:var(--orange-700); }

ul.plain{ padding-left:20px; max-width:var(--measure); }
ul.plain li{ margin-bottom:7px; }

dl.steps{ margin:0; }
dl.steps div{ border-top:1px solid var(--line); padding:16px 0; display:grid; grid-template-columns:44px 1fr; gap:16px; }
dl.steps dt{ font-family:var(--mono); font-size:13px; color:var(--orange-700); padding-top:3px; }
dl.steps dd{ margin:0; }
dl.steps dd b{ display:block; font-weight:600; margin-bottom:3px; }
dl.steps dd span{ color:var(--ink-muted); font-size:15px; }

footer.site{
  border-top:1px solid var(--line); padding:26px 0 40px;
  font-family:var(--mono); font-size:12.5px; color:var(--ink-muted);
}
footer.site .wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer.site a{ color:var(--ink-muted); }

@media (max-width:560px){
  body{ padding-left:0; padding-top:10px; }
  .profile{
    position:static; width:100%; height:10px; flex-direction:row;
  }
  .profile .surface{ flex:0 0 12%; } .profile .survey{ flex:0 0 2%; }
  .profile .base{ flex:0 0 38%; } .profile .subgrade{ flex:1; }
  .profile .base::before{ display:none; }
  .who img{ width:120px; height:120px; }
}


/* ---- hero plate: monogram + brand-board flash ---- */
.hero{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,260px);
  gap:clamp(24px,5vw,56px); align-items:start;
}
.hero-copy{ min-width:0; }
.hero-plate{ min-width:0; padding-top:6px; }
.bc-mark{ display:block; width:100%; height:auto; }
.plate-name{
  font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:.06em;
  text-transform:uppercase; margin:14px 0 0;
}
.plate-sub{
  font-family:var(--mono); font-size:12px; color:var(--ink-muted);
  letter-spacing:.04em; margin:3px 0 0;
}

@media (max-width:820px){
  .hero{ grid-template-columns:1fr; gap:30px; }
  .hero-plate{ display:grid; grid-template-columns:132px 1fr; gap:20px; align-items:center; }
  .hero-plate .bc-mark{ grid-row:1 / span 3; }
  .plate-name{ margin-top:0; }
  @media (max-width:420px){
  .hero-plate{ grid-template-columns:1fr; }
  .hero-plate .bc-mark{ grid-row:auto; max-width:150px; }
}