/* ================================================================
   LeanCensus landing page
   Ground from direction I (#FAF8F4) · Switzer throughout.
   Labels are uppercase and tracked rather than italic — the
   institutional idiom, not the editorial one.
   ================================================================ */

@font-face{
  font-family:"Switzer";
  src:url(fonts/switzer-1.woff2) format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Switzer";
  src:url(fonts/switzer-2.woff2) format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
}

:root{
  --surface:#FAF8F4;
  --surface-2:#F2EFE8;
  --ink:#16171A;
  --ink-2:#3E4045;
  --ink-3:#63666C;
  --hairline:#DCD8CE;
  --grid-line:rgba(22,23,26,.05);

  --accent:#9E3D18;
  --c-core:#3C4C55;
  --c-ot:#A97A34;
  --c-trav:#9E3D18;
  --serious:#9E3D18;
  --good-text:#3C4C55;
  --accent-wash:rgba(158,61,24,.09);
  --teal:#3C4C55;             /* name kept: the inline SVGs reference var(--teal) */
  --teal-wash:rgba(60,76,85,.1);

  --radius:8px;
  --radius-sm:6px;
  --font:"Switzer",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:var(--font);

  /* the label register: uppercase, tracked, never italic */
  --label-track:.13em;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:17.5px;
  font-weight:400;
  color:var(--ink);
  background:var(--surface);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.num{font-variant-numeric:tabular-nums}
a{color:inherit}
img{max-width:100%}

.container{width:min(1180px,100% - 48px);margin-inline:auto}

h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.14;letter-spacing:-.026em;text-wrap:balance}

/* ---------- reveal-on-scroll ---------- */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1) var(--d,0s),
             transform .7s cubic-bezier(.2,.6,.2,1) var(--d,0s);
}
.reveal.in{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font);font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:var(--radius-sm);
  border:1px solid transparent;text-decoration:none;cursor:pointer;
  letter-spacing:-.004em;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn-primary{background:var(--accent);color:#FAF8F4}
.btn-primary:hover{background:var(--ink)}
.btn-ghost{border-color:var(--ink-3);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:rgba(22,23,26,.04)}
.btn-ghost .arrow{color:var(--accent);transition:transform .18s ease}
.btn-ghost:hover .arrow{transform:translateY(2px)}
.btn-sm{padding:10px 19px;font-size:14.5px}
.btn-block{width:100%;justify-content:center}

/* ---------- the label register ---------- */
.eyebrow{
  font-size:12.5px;font-weight:600;
  letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px;
}
.eyebrow-light{color:#B9B4AA}
.section-title{font-size:clamp(31px,3.9vw,47px);font-weight:600;margin-bottom:18px;letter-spacing:-.028em}
.section-lede{font-size:19px;color:var(--ink-2);max-width:54ch;line-height:1.6}

/* ================= NAV ================= */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:rgba(250,248,244,.92);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  transition:box-shadow .25s ease;
}
.nav.scrolled{box-shadow:0 1px 0 var(--hairline)}
.nav-inner{width:min(1180px,100% - 48px);margin-inline:auto;height:74px;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{width:27px;height:27px;border-radius:6px;flex:none}
.brand-name{font-weight:700;font-size:20px;letter-spacing:-.028em}
.brand-name em{font-style:normal;color:var(--accent)}
.nav-links{margin-left:auto;display:flex;gap:30px}
.nav-links a{font-size:15.5px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .18s ease}
.nav-links a:hover{color:var(--ink)}

/* ================= HERO ================= */
.hero{position:relative;padding:158px 0 118px;overflow:hidden}
.hero-grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 85% at 50% 0%,#000 35%,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 85% at 50% 0%,#000 35%,transparent 75%);
  pointer-events:none;
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center}
/* the main claim carries the most weight on the page */
.hero h1{font-size:clamp(39px,5.7vw,67px);font-weight:700;letter-spacing:-.027em;line-height:1.06}
.hero-tagline{margin-top:22px;font-size:clamp(19px,2.2vw,26px);font-weight:600;color:var(--accent);letter-spacing:-.018em;line-height:1.3;max-width:30ch}
.lede{margin-top:22px;font-size:19px;color:var(--ink-2);max-width:50ch;line-height:1.62}
.hero-ctas{margin-top:36px;display:flex;gap:15px;flex-wrap:wrap}
.hero-note{margin-top:20px;font-size:15px;color:var(--ink-3);line-height:1.55}
.hero-note + .hero-note{margin-top:7px}

/* ---------- hero card ---------- */
.hero-card{background:transparent;border:1px solid var(--hairline);border-radius:var(--radius);padding:26px 26px 22px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-title{display:block;font-weight:700;font-size:17px;letter-spacing:-.018em}
.card-sub{display:block;font-size:14px;color:var(--ink-3);margin-top:3px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:7px}

.gauge{margin-top:24px}
.gauge-row{display:grid;grid-template-columns:64px 1fr 44px;align-items:center;gap:12px}
.gauge-row + .gauge-row{margin-top:11px}
.gauge-label{font-size:11.5px;font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-3)}
.gauge-track{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.gauge-fill{height:100%;width:0;border-radius:999px;transition:width 1.1s cubic-bezier(.2,.6,.2,1) .2s}
.gauge-actual{background:var(--accent)}
.gauge-budget{background:var(--c-core)}
.gauge-val{font-size:18px;font-weight:700;text-align:right;letter-spacing:-.02em}
.gauge-unit{margin-top:14px;font-size:14px;color:var(--ink-3)}

.flag{display:flex;align-items:center;gap:9px;margin-top:20px;padding:12px 14px;border-radius:var(--radius-sm);font-size:15.5px;font-weight:500;line-height:1.4;color:var(--accent);letter-spacing:-.006em}
.flag svg{width:17px;height:17px;flex:none}
.flag-serious{color:var(--accent);background:var(--accent-wash)}
.flag strong{font-weight:700}

.census-wave{display:block;width:100%;height:56px;margin-top:20px}
.card-foot{font-size:13px;color:var(--ink-3);margin-top:5px}

/* ================= SCROLL STORY ================= */
.story{position:relative;height:400vh;background:var(--surface-2)}
.story-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.story-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,72px);align-items:center}

.story-steps{position:relative;min-height:250px}
.story-step{position:absolute;inset:0;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.story-step.active{opacity:1;transform:none}
.story-step.passed{opacity:0;transform:translateY(-14px)}
.story-step h2{font-size:clamp(27px,3.5vw,42px);font-weight:600;letter-spacing:-.03em}
.story-step p{margin-top:18px;font-size:18.5px;color:var(--ink-2);max-width:40ch;line-height:1.6}

.story-progress{display:flex;gap:9px;margin-top:38px}
.story-tick{width:30px;height:3px;background:#CDC7BA;transition:background .35s ease}
.story-tick.on{background:var(--accent)}

.panel{
  position:relative;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius);
  padding:22px 26px 24px;display:flex;flex-direction:column;
}
.panel-head{
  flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--hairline);
}
.panel-badge{font-size:11.5px;font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-3)}

/* Every stage occupies the same frame: the chart pins to the top, the flag and
   the odometer share one slot at the bottom (they are never both visible), and
   the chips centre in the whole area. Leftover space reads as padding, not as
   a hole under the content. */
.panel-stage{position:relative;flex:1 1 auto;min-height:376px}

/* stage 0 — shift chips, centred in the frame */
/* Stage 0 reads as the roster it describes: one row per shift, tagged by
   hour type, filling the frame instead of floating in it. */
.chips{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:6px;
  opacity:0;transition:opacity .4s ease;z-index:2;pointer-events:none;
}
.stage-0 .chips{opacity:1}
.chip{
  display:block;width:100%;font-size:13.5px;font-weight:500;
  padding:8px 13px;border-radius:3px;border-left:2px solid transparent;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s ease;
}
.stage-0 .chip{opacity:1;transform:none}
.chip-core{background:var(--teal-wash);color:#2E3B42;border-left-color:var(--c-core)}
.chip-ot{background:rgba(169,122,52,.17);color:#7C5722;border-left-color:var(--c-ot)}
.chip-trav{background:var(--accent-wash);color:var(--c-trav);border-left-color:var(--c-trav)}
.stage-0 .chip:nth-child(1){transition-delay:.02s}
.stage-0 .chip:nth-child(2){transition-delay:.07s}
.stage-0 .chip:nth-child(3){transition-delay:.12s}
.stage-0 .chip:nth-child(4){transition-delay:.17s}
.stage-0 .chip:nth-child(5){transition-delay:.22s}
.stage-0 .chip:nth-child(6){transition-delay:.27s}
.stage-0 .chip:nth-child(7){transition-delay:.32s}
.stage-0 .chip:nth-child(8){transition-delay:.37s}

/* stages 1–3 — the chart */
/* At stage 1 nothing occupies the bottom slot, so the chart sits centred; it
   glides up when the flag and the odometer need the room. */
.chart-wrap{
  position:absolute;top:0;left:0;right:0;
  opacity:0;transform:translateY(56px);pointer-events:none;
  transition:opacity .4s ease,transform .45s cubic-bezier(.2,.6,.2,1);
}
.stage-2 .chart-wrap,.stage-3 .chart-wrap{transform:translateY(0)}
.stage-1 .chart-wrap,.stage-2 .chart-wrap,.stage-3 .chart-wrap{opacity:1;pointer-events:auto}
.chart{position:relative;height:196px;display:flex;align-items:flex-end;gap:clamp(6px,1.3vw,13px)}
.col{position:relative;flex:1 1 0;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.seg{width:100%;transition:height .7s cubic-bezier(.2,.6,.2,1)}
.seg-core{background:var(--c-core);height:var(--core)}
.seg-ot{background:var(--c-ot);height:var(--ot-h)}
.seg-trav{background:var(--c-trav);height:var(--trav-h)}
.stage-3 .seg-ot{height:var(--ot-h2)}
.stage-3 .seg-trav{height:var(--trav-h2)}

.col-label{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--total) + 8px);font-size:13.5px;font-weight:700;color:var(--accent);opacity:0;transition:opacity .4s ease;letter-spacing:-.02em}
.stage-2 .col-label,.stage-3 .col-label{opacity:1}

.target-line{position:absolute;left:0;right:0;bottom:var(--target);height:0;border-top:1.5px dashed var(--ink-2);opacity:0;transition:opacity .45s ease}
.stage-1 .target-line,.stage-2 .target-line,.stage-3 .target-line{opacity:1}
.target-label{position:absolute;right:0;bottom:5px;font-size:11.5px;font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-2);background:var(--surface);padding-left:7px}

.chart-days{display:flex;gap:clamp(6px,1.3vw,13px);margin-top:10px}
.chart-days span{flex:1 1 0;text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.key{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.swatch{width:11px;height:11px;display:inline-block;border-radius:2px}
.sw-core{background:var(--c-core)}.sw-ot{background:var(--c-ot)}.sw-trav{background:var(--c-trav)}

.panel-flag{position:absolute;left:0;right:0;bottom:0;margin-top:0;opacity:0;transition:opacity .4s ease}
.stage-2 .panel-flag{opacity:1}

.odometer{position:absolute;left:0;right:0;bottom:0;opacity:0;transition:opacity .4s ease}
.stage-3 .odometer{opacity:1}
.odo-label{font-size:11.5px;font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-3)}
.odo-value{font-size:clamp(33px,4.3vw,52px);font-weight:700;color:var(--ink);letter-spacing:-.04em;margin-top:8px;line-height:1.05}
.odo-delta{font-size:14px;color:var(--ink-3);margin-top:8px}

/* ================= FEATURES ================= */
.features{padding:118px 0 106px}
.feature-grid{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.feature{border-top:1.5px solid var(--ink-3);padding:26px 0 6px}
.feature-icon{width:34px;height:34px;display:grid;place-items:center;color:var(--ink-2);margin-bottom:16px}
.feature-icon svg{width:22px;height:22px}
.feature h3{font-size:20px;font-weight:700;letter-spacing:-.022em}
.feature p{margin-top:11px;font-size:17px;color:var(--ink-2);line-height:1.58}

/* ================= WHY WHPPD BAND ================= */
.band{background:#1B1D20;color:#F2F1ED;padding:104px 0}
.band-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,72px);align-items:center}
.band-copy h2{font-size:clamp(29px,3.7vw,44px);font-weight:600;letter-spacing:-.03em}
.band-copy p{margin-top:20px;font-size:18.5px;color:#BFC0C2;max-width:50ch;line-height:1.6}
.band-stats{display:grid;gap:0}
.stat{padding:20px 0;border-top:1px solid rgba(255,255,255,.19)}
.stat:last-child{border-bottom:1px solid rgba(255,255,255,.19)}
.stat-label{display:block;font-size:11.5px;font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:#B9B4AA}
.stat-value{display:block;font-size:22px;font-weight:600;letter-spacing:-.024em;margin-top:7px}

/* ================= CONTACT ================= */
.contact{padding:118px 0}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,76px);align-items:start}
.contact-points{list-style:none;margin-top:32px}
.contact-points li{font-size:17px;color:var(--ink-2);padding:13px 0;border-top:1px solid var(--hairline)}
.contact-points li:last-child{border-bottom:1px solid var(--hairline)}

.contact-form{border:1px solid var(--hairline);border-radius:var(--radius);padding:30px}
.field{display:block;margin-bottom:18px}
.field > span{display:block;font-size:11.5px;font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.field > span em{font-style:normal;font-weight:500;text-transform:none;letter-spacing:.01em;color:var(--ink-3)}
.field input,.field textarea{
  width:100%;font-family:var(--font);font-size:16.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:12px 13px;transition:border-color .18s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink-2)}
.field textarea{resize:vertical;line-height:1.6}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{margin-top:16px;font-size:14px;color:var(--ink-3);line-height:1.55}
.form-note.sent{color:var(--accent);font-weight:600}

/* ================= FOOTER ================= */
.footer{border-top:1px solid var(--hairline);padding:44px 0 52px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-tag{font-size:16px;color:var(--ink-2)}
.footer-copy{font-size:14px;color:var(--ink-3)}

/* ================= RESPONSIVE ================= */
@media (max-width:960px){
  .hero{padding:126px 0 84px}
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .story-layout{grid-template-columns:1fr;gap:32px}
  .story-sticky{align-items:flex-start;padding-top:92px}
  .story-steps{min-height:210px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .band-inner{grid-template-columns:1fr;gap:36px}
  .contact-inner{grid-template-columns:1fr;gap:40px}
  .nav-links{display:none}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .container,.nav-inner{width:min(1180px,100% - 32px)}
  .hero h1{font-size:clamp(32px,8.2vw,41px)}
  .feature-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr;gap:0}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}