@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/vendor/archivo-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/vendor/archivo-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/vendor/archivo-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* A bare figure, blockquote, dl or dd arrives with margin:1em 40px from the
   user agent sheet. Semantic markup for a card is almost always one of these,
   so the card ends up 80px narrower than its track and inset from its own
   left edge. Fix it once, here, not per instance. */
figure,blockquote,dl,dd,body,h1,h2,h3,h4,p,ul,ol,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

:root{

  --iron-900:#0F1A21; --iron-900-rgb:15,26,33;
  --iron-800:#16232C; --iron-800-rgb:22,35,44;
  --iron-700:#1F3442;
  --iron-600:#24404F;
  --rivet:#3E6C84;   --rivet-rgb:62,108,132;
  --rivet-soft:#7FA6BA;
  --ember:#D4601C;   --ember-rgb:212,96,28;
  --ember-dark:#A9470F;
  /* White on --ember measures 3.82 to 1, under the 4.5 AA needs. These
     two are the only oranges allowed to carry white text. */
  --ember-btn:#A9470F;
  --ember-btn-hover:#87380B;
  --ember-soft:#F6E3D6;
  --moss:#3F6B4F;
  --paper:#F7F4EE;   --paper-rgb:247,244,238;
  --card:#FFFFFF;    --card-rgb:255,255,255;
  --line:#DED7CB;
  --ink-900:#12191F;
  --ink-700:#2E3A44;
  --ink-500:#5A6771;
  --ink-300:#8A949C;

  --wrap:1180px;
  --gap:clamp(1.2rem,3vw,2.2rem);
  --radius:14px;
  --shadow:0 1px 2px rgba(15,26,33,.05),0 8px 24px rgba(15,26,33,.07);
  --bg:var(--paper);
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color-scheme:light;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  /* House baseline is 1.14rem. Do not quietly design down from it. */
  font:1.14rem/1.65 system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink-900);
  background:var(--bg);
  overflow-x:hidden;
}

h1,h2,h3,h4,.display{font-family:var(--display);font-weight:800;line-height:1.14;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:700}
h4{font-size:1.1rem;font-weight:700}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:var(--iron-600);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ember-dark)}
b,strong{font-weight:700}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px;border-radius:4px}

.wrap{width:min(100% - 2rem,var(--wrap));margin-inline:auto}
@media (max-width:560px){.wrap{width:calc(100% - 2rem)}}
.section{padding:clamp(2.6rem,6vw,4.6rem) 0}
.section--tight{padding:clamp(1.8rem,4vw,2.8rem) 0}
.lede{font-size:1.2rem;color:var(--ink-700);max-width:66ch}
.muted{color:var(--ink-500)}
.small{font-size:.94rem}
.center{text-align:center}
.maxread{max-width:72ch}

/* Skip link. Visible the moment it has focus, and never before. */
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:.6rem;top:.6rem;padding:.7rem 1.1rem;background:var(--iron-900);
  color:#fff;border-radius:8px;text-decoration:none}

/* ── header ─────────────────────────────────────────────────────────────── */
.topbar{background:var(--iron-900);color:#E8EEF2;font-size:.95rem}
.topbar .wrap{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  min-height:2.6rem;flex-wrap:wrap;padding-block:.35rem}
.topbar a{color:#fff;font-weight:700}
.topbar .tag{color:var(--rivet-soft)}
/* On a phone the promise sentence wraps to three lines and pushes the whole
   page 127px down before anything of the site is visible. The storm number
   is the only part of this bar worth that space on a small screen. */
@media (max-width:720px){
  .topbar .tag{display:none}
  .topbar .wrap{justify-content:center}
}

.masthead{background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100}
.masthead .wrap{display:flex;align-items:center;gap:1rem;min-height:4.6rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink-900);
  margin-right:auto;flex-shrink:0}
.brand__mark{width:42px;height:42px;flex:0 0 42px}
.brand__name{font-family:var(--display);font-weight:800;font-size:1.22rem;line-height:1.05;
  letter-spacing:-.02em}
.brand__sub{display:block;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rivet)}

.nav{display:flex;gap:.2rem;align-items:center}
.nav a{padding:.55rem .72rem;border-radius:9px;text-decoration:none;font-weight:600;
  color:var(--ink-700);font-size:.99rem;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{background:var(--ember-soft);color:var(--ember-dark)}
.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;
  padding:.5rem .7rem;font-weight:700;cursor:pointer}

@media (max-width:1040px){
  .nav{position:fixed;inset:4.6rem 0 auto;background:var(--card);flex-direction:column;
    align-items:stretch;padding:.6rem 1rem 1.2rem;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);display:none}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:.85rem .7rem;font-size:1.08rem}
  .navtoggle{display:block}
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.92rem 1.5rem;border-radius:11px;font-weight:700;text-decoration:none;
  border:2px solid transparent;cursor:pointer;font-size:1.04rem;line-height:1.2;
  text-align:center}
.btn--primary{background:var(--ember-btn);color:#fff;border-color:var(--ember-btn)}
.btn--primary:hover{background:var(--ember-btn-hover);border-color:var(--ember-btn-hover);color:#fff}
.btn--ghost{background:transparent;color:var(--iron-800);border-color:var(--iron-600)}
.btn--ghost:hover{background:var(--iron-800);color:#fff}
.btn--light{background:#fff;color:var(--iron-900);border-color:#fff}
.btn--light:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.btnrow{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{background:var(--iron-900);color:#EDF2F5;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:center;
  padding:clamp(2.4rem,5vw,4rem) 0 clamp(2.6rem,5vw,4.2rem)}
.hero h1{color:#fff}
.hero__sub{font-size:1.18rem;color:#C6D5DE;margin-top:1.1rem;max-width:56ch}
.hero__eyebrow{font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  font-size:.78rem;color:var(--ember);margin-bottom:.8rem}
.hero__fig{border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.hero__fig img{width:100%;height:auto}
.hero__points{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.5rem;
  font-size:.97rem;color:#B9CBD6}
.hero__points li{display:flex;gap:.45rem;align-items:baseline}
.hero__points li::before{content:"";width:.45rem;height:.45rem;border-radius:50%;
  background:var(--ember);flex:0 0 .45rem;transform:translateY(-.15rem)}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}}

/* ── bite and snack ─────────────────────────────────────────────────────── */
.bite p{margin:0}
.bite{background:var(--ember-soft);border-left:5px solid var(--ember);
  padding:1.1rem 1.3rem;border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.18rem;line-height:1.5;margin-bottom:1.6rem;color:var(--ink-900)}
.snackbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.4rem;margin-bottom:1.9rem;box-shadow:var(--shadow)}
.snackbox h2,.snackbox h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rivet);margin-bottom:.8rem;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700}
.snackbox li{display:flex;gap:.65rem;align-items:flex-start;padding:.34rem 0;line-height:1.5}
.snackbox li::before{content:"";width:.5rem;height:.5rem;border-radius:2px;
  background:var(--ember);flex:0 0 .5rem;margin-top:.55rem;transform:rotate(45deg)}

/* ── prose ──────────────────────────────────────────────────────────────── */
.prose{max-width:74ch}
.prose h2{margin:2.4rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.8rem 0 .7rem}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:0}
.prose ul li{position:relative;padding:.24rem 0 .24rem 1.5rem}
.prose ul li::before{content:"";position:absolute;left:.25rem;top:.95rem;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--rivet)}
.prose ol{counter-reset:step}
.prose ol li{position:relative;padding:.24rem 0 .24rem 2.1rem;counter-increment:step}
.prose ol li::before{content:counter(step);position:absolute;left:0;top:.36rem;
  width:1.45rem;height:1.45rem;border-radius:50%;background:var(--iron-800);color:#fff;
  font-size:.82rem;font-weight:700;display:grid;place-items:center;font-family:var(--display)}
.note{background:#fff;border:1px solid var(--line);border-left:5px solid var(--rivet);
  border-radius:0 10px 10px 0;padding:1rem 1.2rem;margin:1.4rem 0;font-size:1.02rem}
.note strong{color:var(--rivet)}

/* ── tables ─────────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff}
table{border-collapse:collapse;width:100%;font-size:1.01rem}
caption{text-align:left;padding:.9rem 1.1rem 0;font-size:.92rem;color:var(--ink-500)}
th,td{padding:.72rem .95rem;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
thead th{background:var(--iron-800);color:#fff;font-family:var(--display);font-weight:700;
  font-size:.92rem;letter-spacing:.02em;border-bottom:none}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:rgba(var(--paper-rgb),.6)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── cards and grids ────────────────────────────────────────────────────── */
.grid{display:grid;gap:1.1rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem 1.3rem;box-shadow:var(--shadow);display:flex;flex-direction:column;
  gap:.45rem;min-width:0}
a.card{text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
a.card:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(15,26,33,.07),0 14px 34px rgba(15,26,33,.12);
  border-color:var(--rivet-soft)}
.card h3,.card h4{margin:0;color:var(--ink-900)}
.card p{color:var(--ink-700);font-size:1.01rem;margin:0}
.card__more{margin-top:auto;padding-top:.5rem;color:var(--ember-dark);font-weight:700;
  font-size:.95rem}
.card--photo{padding:0;overflow:hidden}
.card--photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.card--photo .card__body{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;
  gap:.4rem;flex:1}

/* ── stat strip. A full bleed strip is a missed wrap, not a design choice. ─ */
.counts{background:var(--iron-800);color:#fff}
.counts .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1.4rem;padding:clamp(1.8rem,4vw,2.8rem) 0}
.count__n{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,2.9rem);
  line-height:1;color:var(--ember)}
.count__l{color:#C6D5DE;font-size:.99rem;margin-top:.45rem}
.count__s{color:#8FA8B6;font-size:.86rem;margin-top:.2rem}

/* ── dark band. Rebind the ramp, never recolour selectors one at a time. ─── */
.band--ink{
  --ink-900:#F3F7F9; --ink-700:#C6D5DE; --ink-500:#93A9B6; --ink-300:#6E8593;
  --card:#1B2B36;    --card-rgb:27,43,54;
  --line:#2D4453;    --paper:#16232C;  --paper-rgb:22,35,44;
  --ember-soft:#3A2517;
  background:var(--iron-900);color:var(--ink-900);
}
.band--ink a{color:var(--rivet-soft)}
.band--ink a:hover{color:var(--ember)}
/* A band rebinds the ink ramp. It does not get to repaint a component.
   Without these two the band link rule wins on load order and puts pale
   blue text on a white button, which measures 2.6 to 1. */
.band--ink a.btn--light,.band--ink a.btn--light:hover{color:var(--iron-900)}
.band--ink a.btn--primary,.band--ink a.btn--primary:hover{color:#fff}
.band--ink a.btn--ghost{color:var(--ink-900);border-color:var(--rivet-soft)}
.band--ink a.btn--ghost:hover{background:var(--rivet-soft);color:var(--iron-900)}
.band--ink .bite{background:#33210F;border-left-color:var(--ember);color:#F3F7F9}
.band--ink .note{background:#1B2B36}

/* ── photo figures ──────────────────────────────────────────────────────── */
figure.shot{margin:1.8rem 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#fff}
figure.shot img{width:100%;height:auto}
figure.shot figcaption{padding:.7rem 1rem;font-size:.92rem;color:var(--ink-500);
  background:var(--card)}

/* ── page furniture ─────────────────────────────────────────────────────── */
.crumbs{font-size:.92rem;color:var(--ink-500);padding:1rem 0 0}
.crumbs a{color:var(--ink-500);text-decoration:none}
.crumbs a:hover{color:var(--ember-dark);text-decoration:underline}
.pagehead{padding:1.4rem 0 1.8rem}
.pagehead h1{max-width:20ch}
.eyebrow{font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:.76rem;
  color:var(--rivet);margin-bottom:.7rem}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(1.6rem,4vw,3rem);
  align-items:start}
@media (max-width:980px){.layout{grid-template-columns:1fr}}
.rail{position:sticky;top:5.6rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
@media (max-width:980px){.rail{position:static}}
.railbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem 1.2rem;box-shadow:var(--shadow)}
.railbox h2,.railbox h3{font-size:1.05rem;margin-bottom:.6rem}
.railbox li{padding:.3rem 0;font-size:.98rem}
.railbox a{text-decoration:none;font-weight:600}
.railbox a:hover{text-decoration:underline}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.2rem 0}
.chip{display:inline-block;padding:.38rem .8rem;border-radius:999px;background:var(--card);
  border:1px solid var(--line);font-size:.92rem;text-decoration:none;color:var(--ink-700);
  font-weight:600}
.chip:hover{border-color:var(--ember);color:var(--ember-dark)}
.chip--on{background:var(--iron-800);color:#fff;border-color:var(--iron-800)}

.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:.7rem;overflow:hidden}
.faq summary{padding:1rem 1.2rem;cursor:pointer;font-weight:700;font-size:1.06rem;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--ember);
  line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq .answer{padding:0 1.2rem 1.15rem;color:var(--ink-700)}

.cta{background:var(--iron-800);color:#fff;border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.4rem);margin:2.4rem 0;display:flex;gap:1.4rem;
  justify-content:space-between;align-items:center;flex-wrap:wrap}
.cta h2,.cta h3{color:#fff;margin:0 0 .4rem}
.cta p{color:#C6D5DE;margin:0;max-width:52ch}

/* ── map ────────────────────────────────────────────────────────────────── */
#servicemap{height:min(60vh,520px);border-radius:var(--radius);border:1px solid var(--line);
  background:#E9E5DC;z-index:1}
#servicemap .leaflet-tile{filter:saturate(.42) contrast(.95)}
.leaflet-container{font:inherit;border-radius:var(--radius)}
.mappin{border-radius:50%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.maplegend{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.9rem;font-size:.93rem;
  color:var(--ink-500)}
.maplegend span{display:flex;align-items:center;gap:.4rem}
.maplegend i{width:.8rem;height:.8rem;border-radius:50%;display:inline-block}

/* ── visualizer ─────────────────────────────────────────────────────────── */
.viz{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.5rem;align-items:start}
@media (max-width:900px){.viz{grid-template-columns:1fr}}
.viz__stage{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;min-width:0}
.viz__stage svg,.viz__stage canvas{width:100%;height:auto;display:block}
.viz__panel{display:flex;flex-direction:column;gap:1rem;min-width:0}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:.45rem}
.swatch{aspect-ratio:1;border-radius:9px;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);padding:0}
.swatch[aria-pressed="true"]{border-color:var(--ink-900);transform:scale(1.06)}
.matlist{display:flex;flex-direction:column;gap:.3rem;max-height:17rem;overflow-y:auto}
.matlist button{text-align:left;padding:.55rem .75rem;border-radius:9px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-weight:600;font-size:.98rem}
.matlist button[aria-pressed="true"]{background:var(--iron-800);color:#fff;border-color:var(--iron-800)}
.viz__meta{font-size:.95rem;color:var(--ink-500);line-height:1.5}
.viz__h{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rivet);margin-bottom:.55rem;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700}
.viz__stage{position:relative;min-height:16rem;display:grid;place-items:center}
.viz--over .viz__stage{outline:3px dashed var(--ember);outline-offset:-6px}
.viz__drop{display:flex;flex-direction:column;gap:.4rem;align-items:center;
  justify-content:center;text-align:center;padding:3.5rem 1.5rem;cursor:pointer;
  width:100%;color:var(--ink-700);background:
    repeating-linear-gradient(45deg,transparent,transparent 12px,
      rgba(var(--rivet-rgb),.045) 12px,rgba(var(--rivet-rgb),.045) 24px)}
.viz__drop strong{font-size:1.12rem;color:var(--ink-900)}
.viz__drop:hover{background-color:var(--ember-soft)}
#vizcanvas{touch-action:none;cursor:grab;max-width:100%;height:auto}
#vizcanvas:active{cursor:grabbing}
.btn--sm{padding:.55rem .85rem;font-size:.92rem;border-radius:9px}
.viz__panel .field input[type=range]{width:100%;accent-color:var(--ember)}
.matlist button strong{display:block;font-weight:700}
.matlist button .muted{font-size:.85rem}
.matlist button[aria-pressed="true"] .muted{color:#B9CBD6}

/* ── forms ──────────────────────────────────────────────────────────────── */
.form{display:grid;gap:1rem;max-width:34rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-weight:700;font-size:1rem}
.field .hint{font-size:.9rem;color:var(--ink-500)}
.field input,.field textarea{padding:.78rem .9rem;border:1px solid var(--line);
  border-radius:10px;background:#fff;width:100%}
.field input:focus,.field textarea:focus{border-color:var(--rivet);outline:3px solid rgba(var(--rivet-rgb),.25);
  outline-offset:0}
.field textarea{min-height:7.5rem;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:.95rem;color:var(--ink-500);max-width:34rem}
.formerror{background:#FCEAE3;border:1px solid var(--ember);color:#7C3209;padding:.8rem 1rem;
  border-radius:10px;font-weight:600}

/* ── the stepped intake form ────────────────────────────────────────────── */
.form--steps{max-width:38rem;gap:0}
.step{border:0;padding:0;margin:0 0 1.6rem}
.step__legend{display:flex;align-items:center;gap:.6rem;font-family:var(--display);
  font-weight:800;font-size:1.22rem;margin-bottom:1rem;padding:0;outline:none}
.step__n{display:grid;place-items:center;width:1.9rem;height:1.9rem;flex:0 0 1.9rem;
  border-radius:50%;background:var(--iron-800);color:#fff;font-size:.95rem}
.form--steps.is-stepped .step{margin-bottom:.4rem}
.field--radio{border:0;padding:0;margin:0 0 1.5rem}
.field--radio legend{font-weight:700;font-size:1.02rem;padding:0;margin-bottom:.15rem}
.opts{display:grid;gap:.6rem;margin-top:.7rem}
.opt{display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1rem;
  border:1.5px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;
  line-height:1.45;transition:border-color .12s ease,background .12s ease}
.opt:hover{border-color:var(--rivet-soft);background:var(--paper)}
.opt input{margin:.2rem 0 0;width:1.15rem;height:1.15rem;flex:0 0 1.15rem;
  accent-color:var(--ember)}
.opt:has(input:checked){border-color:var(--ember);background:var(--ember-soft)}
.opt input:focus-visible{outline:3px solid var(--ember);outline-offset:2px}

.stepdots{display:flex;gap:.4rem;margin:0 0 1.6rem;flex-wrap:wrap}
.stepdots li{flex:1 1 4rem;height:.42rem;border-radius:999px;background:var(--line)}
.stepdots li.on{background:var(--ember)}
.stepdots li.done{background:var(--rivet)}
.stepdots li span{position:absolute;left:-9999px}
.stepnav{display:flex;gap:.7rem;margin-top:1.4rem;flex-wrap:wrap}
.stepnav .btn{flex:1 1 auto;min-width:8rem}
.stepnav .btn:disabled{opacity:.4;cursor:not-allowed}

/* ── visualizer, placing corners on a phone ─────────────────────────────── */
.vizsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:1rem;margin:1.6rem 0 0}
.vizsteps div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;font-size:1rem;line-height:1.55;box-shadow:var(--shadow)}
.vizsteps strong{color:var(--ink-900)}

.viz__prompt{background:var(--iron-800);color:#fff;margin:0;padding:.8rem 1rem;
  font-size:1.02rem;line-height:1.4;text-align:center;font-weight:600}
.viz__prompt:empty{display:none}

.nudge{display:flex;gap:.5rem;align-items:center;justify-content:center;
  padding:.7rem;background:var(--card);border-top:1px solid var(--line);flex-wrap:wrap}
.nudge__pad{display:flex;gap:.4rem}
.nudge__b{min-width:2.9rem;min-height:2.9rem;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;
  color:var(--iron-800);padding:0 .7rem}
.nudge__b:hover{border-color:var(--ember);color:var(--ember-dark)}
.nudge__b:active{background:var(--ember-soft)}

@media (max-width:860px){
  /* The picture is the tool, so on a phone it gets the width. */
  .viz__stage{margin-inline:calc(var(--gap) * -0.5)}
  .viz__prompt{font-size:1.06rem;padding:.9rem .8rem}
  .nudge__b{min-width:3.2rem;min-height:3.2rem}
}

/* ── the missed call demo ───────────────────────────────────────────────── */
.demo{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.4rem);align-items:start;margin-top:2rem}
@media (max-width:860px){.demo{grid-template-columns:1fr}}
.demo__phone{border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column}
.demo__bar{background:var(--iron-900);color:#fff;padding:.85rem 1.1rem;
  display:flex;flex-direction:column;gap:.1rem}
.demo__bar .small{color:var(--rivet-soft)}
.demo__thread{padding:1rem;display:flex;flex-direction:column;gap:.55rem;
  min-height:19rem;max-height:26rem;overflow-y:auto;background:var(--paper);
  scroll-behavior:smooth}
.demo__reply{padding:.85rem 1rem 1.1rem;border-top:1px solid var(--line);
  background:var(--card);min-height:3.4rem}
.demo__side{display:flex;flex-direction:column;gap:1rem;min-width:0}

.msg{display:flex}
.msg--them{justify-content:flex-start}
.msg--you{justify-content:flex-end}
.msg--system{justify-content:center}
.msg__b{max-width:82%;padding:.62rem .85rem;border-radius:15px;line-height:1.48;
  font-size:1rem;white-space:pre-wrap}
.msg--them .msg__b{background:#fff;border:1px solid var(--line);
  border-bottom-left-radius:5px;color:var(--ink-900)}
.msg--you .msg__b{background:var(--rivet);color:#fff;border-bottom-right-radius:5px}
.msg__sys{font-size:.86rem;color:var(--ink-500);text-align:center;
  background:rgba(var(--rivet-rgb),.1);padding:.4rem .75rem;border-radius:999px}
.msg__typing{display:inline-flex;gap:.24rem;align-items:center;padding:.8rem .9rem}
.msg__typing i{width:.4rem;height:.4rem;border-radius:50%;background:var(--ink-300);
  animation:blip 1.1s infinite}
.msg__typing i:nth-child(2){animation-delay:.16s}
.msg__typing i:nth-child(3){animation-delay:.32s}
@keyframes blip{0%,60%,100%{opacity:.28;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.msg__typing i{animation:none;opacity:.6}}

.quick{display:flex;flex-wrap:wrap;gap:.45rem}
.quick__b{padding:.55rem .8rem;border-radius:999px;border:1.5px solid var(--rivet);
  background:#fff;color:var(--iron-700);font-weight:600;font-size:.94rem;cursor:pointer}
.quick__b:hover{background:var(--rivet);color:#fff}
.quick__free{display:flex;gap:.45rem;margin-top:.55rem}
.quick__free input{flex:1;min-width:0;padding:.6rem .75rem;border:1px solid var(--line);
  border-radius:10px}
.linkish{background:none;border:0;padding:0;color:var(--iron-600);font:inherit;
  text-decoration:underline;cursor:pointer}

.leadout td.is-set{font-weight:700;color:var(--ink-900)}
.leadout th{font-weight:600;color:var(--ink-500);width:9rem}
#demotags{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}

/* ── breathing room on a phone ──────────────────────────────────────────── */
/* Anthony, 2026-09-19: "text is too close together". Line height and the gaps
   between blocks were tuned at desktop measure. At 375px the same numbers
   make a wall of type, because the lines are half as long so there are twice
   as many of them in the same paragraph. */
@media (max-width:720px){
  body{line-height:1.72}
  p{margin-bottom:1.25em}
  .lede{font-size:1.14rem;line-height:1.68}
  .bite{font-size:1.1rem;line-height:1.62;padding:1.15rem 1.15rem}
  .prose h2{margin:2.5rem 0 .95rem}
  .prose h3{margin:2rem 0 .75rem}
  .prose ul li,.prose ol li{padding-top:.42rem;padding-bottom:.42rem;line-height:1.62}
  .prose ol li::before{top:.5rem}
  .prose ul li::before{top:1.12rem}
  .snackbox{padding:1.25rem 1.2rem}
  .snackbox li{padding:.5rem 0;line-height:1.6}
  .card p{line-height:1.6}
  .note{padding:1.15rem 1.15rem;line-height:1.65}
  th,td{padding:.85rem .8rem;line-height:1.55}
  .faq summary{padding:1.1rem 1.1rem;line-height:1.45}
  .faq .answer{line-height:1.65;padding-bottom:1.25rem}
  .foot li{padding:.42rem 0}
  .count__l{line-height:1.5}
  .hero__sub{line-height:1.66}
  .section{padding:clamp(2.4rem,7vw,3.4rem) 0}
}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:var(--iron-900);color:#AFC3CF;padding:clamp(2.4rem,5vw,3.6rem) 0 1.4rem;
  font-size:1rem}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr));
  gap:1.6rem}
.foot h2{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  margin-bottom:.75rem;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700}
.foot a{color:#AFC3CF;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot li{padding:.24rem 0}
.foot__bar{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid #253A47;
  display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap;font-size:.93rem}
.foot__brand{display:flex;gap:.7rem;align-items:center;margin-bottom:.9rem}
.foot__brand svg{width:40px;height:40px}
.foot__made a{color:#fff;font-weight:700}

/* Mobile call bar. Thumb reachable, and it keeps clear of the page bottom. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:var(--ember-btn);box-shadow:0 -4px 18px rgba(0,0,0,.25)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem;color:#fff;font-weight:800;text-decoration:none;font-size:1.08rem}
@media (max-width:720px){
  .callbar{display:block}
  body{padding-bottom:3.6rem}
}
@media print{.callbar,.topbar,.nav,.navtoggle{display:none}}