/* ═══════════════════════════════════════════════════════════════════════
   Ridgeline Restoration — an instrument, not a dashboard.

   The ground is storm navy and the accent is the colour of the work lamp
   in the photograph: sodium amber. Cobalt was link blue on near black,
   which reads as a SaaS product; this page is a moisture meter at 3am.

   TYPE. The earlier build ran three sizes and nothing between them, and
   the jump from a 7rem headline to 1.05rem body left the middle of the
   page with no hierarchy at all: service names sat at body weight and
   nothing caught the eye scrolling. There are five steps now, and the
   middle three are the ones that do the work.

     xl   the headline, once
     l    the number, the closing line, the wordmark
     m    every section heading, in the display face
     s    service names, step names, the value on an instrument
     body 1.05rem, and the mono marker under everything

   THE INSTRUMENT does not stop at the fold. The depth gauge over the
   photograph is its first appearance; the durations under the hero are
   plotted on a common track rather than boxed; the scope section carries
   a drawn section through a wet floor with a bracket that runs down
   through every depth; every section heading is annotated with a rule
   that draws. The reading is in progress the whole way down the page.

   The recurring mark is the ridge scale: a ticked measuring rule, with
   every fifth tick tall.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:Display;src:url(fonts/archivo-black.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Body;src:url(fonts/geist.woff2) format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:Mono;src:url(fonts/plex-mono.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  /* storm navy. Never flat black: the bias is the evidence somebody chose */
  --ground:#0B1219;
  --surface:#141D26;
  --deep:#070C11;              /* the procedure card, one step below ground */
  --accent:#E8A33D;            /* sodium: the work lamp, 8.6:1 on the ground */
  --head:#F2F5F8;
  --text:#C7D4E1;              /* body. 12.5:1 on the ground */
  --support:#93A6BC;           /* the mono marker only, never a paragraph */
  --rule:rgba(147,166,188,.18);
  --rule-strong:rgba(147,166,188,.34);

  --display:Display,'Archivo Black','Helvetica Neue',Arial,sans-serif;
  --body:Body,'Helvetica Neue',Arial,sans-serif;
  --mono:Mono,ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* the ladder */
  --t-xl:clamp(2.9rem,7.2vw,7.2rem);
  --t-l:clamp(1.9rem,5.2vw,4.6rem);
  --t-m:clamp(1.75rem,3.9vw,3.2rem);
  --t-s:clamp(1.3rem,2.3vw,1.95rem);

  --gut:clamp(20px,4.4vw,72px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:#0B1219;
  color:var(--text);
  font-family:var(--body);
  font-size:1.05rem;
  line-height:1.62;
  font-weight:400;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
figure{margin:0}

a{color:inherit}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:40;
  background:var(--accent);color:#0B1219;
  padding:12px 18px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

/* ── the small register ───────────────────────────────────────────── */

.marker{
  font-family:var(--mono);
  font-size:.68rem;
  line-height:1.5;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--support);
  margin:0;
  font-weight:400;
}
.marker.accent, .accent{color:var(--accent)}
.index{font-size:.72rem;margin-bottom:.9em}

.dot{
  display:inline-block;width:5px;height:5px;
  background:var(--accent);margin-right:.75em;vertical-align:.18em;
}

/* the ridge scale: the mark of the place, used as a divider */
.scale{
  height:14px;
  background:
    repeating-linear-gradient(90deg,rgba(147,166,188,.42) 0 1px,transparent 1px 12px) bottom left/100% 6px no-repeat,
    repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px 60px) bottom left/100% 12px no-repeat;
}

/* ── the middle of the ladder ─────────────────────────────────────── */

.sec-h{
  font-family:var(--display);
  font-size:var(--t-m);
  line-height:1.04;letter-spacing:-.02em;
  color:var(--head);
  margin:0;
  max-width:22ch;
  text-wrap:balance;
}
.mid{
  font-family:var(--display);
  font-size:var(--t-s);
  line-height:1.16;letter-spacing:-.015em;
  color:var(--head);
  margin:0;
}

/* an annotation rule: it draws itself beside the label it belongs to */
.lead-line{
  display:block;height:1px;width:100%;
  background:var(--rule-strong);
  transform-origin:left center;
}

.head-group{
  display:grid;
  grid-template-columns:auto minmax(24px,1fr);
  column-gap:clamp(14px,2vw,26px);
  row-gap:clamp(18px,2.2vw,30px);
  align-items:center;
  margin:0 0 clamp(28px,3.4vw,52px);
}
.head-group .sec-h{grid-column:1 / -1}

/* ── header ───────────────────────────────────────────────────────── */

.bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);
  padding:12px var(--gut);
  background:var(--ground);
  border-bottom:1px solid var(--rule);
}
.mark{display:flex;align-items:baseline;gap:.6em;text-decoration:none}
.mark-name{
  font-family:var(--display);
  font-size:1.02rem;letter-spacing:.02em;color:var(--head);
  text-transform:uppercase;
}
.mark-sub{display:none}
.bar-nav{display:none;gap:clamp(14px,1.8vw,28px);margin-left:auto}
.bar-nav a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--support);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.bar-nav a:hover{color:var(--head);border-bottom-color:var(--accent)}

/* ── the one CTA ──────────────────────────────────────────────────── */

.cta{
  display:inline-block;
  background:var(--accent);
  color:#0B1219;                 /* 8.6:1 on sodium */
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
  padding:14px 22px;
  border:1px solid var(--accent);
  transition:background .2s ease;
}
.cta:hover{background:#F2BC63;border-color:#F2BC63}
.cta-sm{margin-left:auto;padding:11px 15px}
/* the number never breaks, at any size, anywhere on the page */
.cta,.big-tel,.huge-tel{white-space:nowrap}

/* ── hero ─────────────────────────────────────────────────────────────
   Edge to edge at every width, no card and no border. The photograph is
   the first thing on the screen on a phone as well as on a desktop: it is
   the one honest asset in the build and it carries the fold. */

.hero{
  position:relative;
  min-height:min(88vh,820px);
  min-height:min(88svh,820px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero-img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:46% 58%;
}
/* Two scrims, not one: a long lift off the bottom so the copy sits on a
   dark floor, and a short one off the top so the sticky bar has an edge.
   The photograph keeps its full strength through the middle. */
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(7,12,17,.96) 0%,rgba(7,12,17,.86) 22%,rgba(7,12,17,.34) 52%,rgba(7,12,17,0) 78%),
    linear-gradient(to bottom,rgba(7,12,17,.62),rgba(7,12,17,0) 26%);
}

.hero-in{
  position:relative;z-index:3;
  width:100%;
  padding:0 var(--gut) clamp(38px,5vw,74px);
}

h1{
  font-family:var(--display);
  font-size:var(--t-xl);
  line-height:.92;
  letter-spacing:-.018em;
  color:var(--head);
  margin:.24em 0 0;
  max-width:13ch;
  text-wrap:balance;
  text-shadow:0 2px 26px rgba(7,12,17,.72);
}

.lede{
  color:var(--head);
  font-size:1.05rem;
  font-weight:500;
  max-width:34ch;
  margin:1.4em 0 0;
}

.hero-act{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-top:clamp(22px,2.6vw,34px);
}

/* ── the gauge, first appearance of the instrument ────────────────────
   An axis extends down the right of the photograph, four ticks step down
   it against the words the scope copy uses, and a line runs back along
   the surface level. It is the same instrument the scope section draws at
   full size further down. */

.gauge{
  position:absolute;z-index:2;
  right:var(--gut);
  top:clamp(84px,15vh,168px);
  width:max-content;
  padding-left:14px;
}
.gauge-axis{
  position:absolute;left:0;top:4px;bottom:26px;width:1px;
  background:var(--accent);
  transform-origin:top center;
}
.depth{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,3.4vh,34px)}
.depth li{display:flex;align-items:center;gap:9px}
.tick{width:14px;height:1px;background:var(--accent);flex:none}
.depth li:first-child .tick{width:26px}
.depth-label{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--head);
  text-shadow:0 1px 10px rgba(7,12,17,.9);
}
.waterline{
  position:absolute;left:0;top:4px;height:1px;
  width:clamp(90px,22vw,360px);
  transform:translateX(-100%);
  background:linear-gradient(to left,var(--accent),rgba(232,163,61,0));
  transform-origin:right center;
}
.gauge-note{
  display:block;margin-top:14px;font-size:.6rem;
  color:var(--accent);
  text-shadow:0 1px 10px rgba(7,12,17,.9);
  max-width:16ch;
}

.js .gauge-axis{transform:scaleY(0)}
.js .depth li{opacity:0;transform:translateX(10px)}
.js .waterline{transform:translateX(-100%) scaleX(0)}
.js .gauge-note{opacity:0}

.js .gauge.on .gauge-axis{
  transform:none;
  transition:transform .7s cubic-bezier(.32,.72,.3,1);
}
.js .gauge.on .depth li{
  opacity:1;transform:none;
  transition:opacity .45s ease-out calc(.38s + var(--i) * .13s),
             transform .45s cubic-bezier(.32,.72,.3,1) calc(.38s + var(--i) * .13s);
}
.js .gauge.on .waterline{
  transform:translateX(-100%) scaleX(1);
  transition:transform .62s cubic-bezier(.32,.72,.3,1) 1.02s;
}
.js .gauge.on .gauge-note{
  opacity:1;
  transition:opacity .5s ease-out 1.5s;
}

/* On a phone the gauge sits directly under the bar and the note is
   dropped, so it cannot come down into the headline at 320px. */
@media (max-width:619px){
  .gauge{top:74px}
  .gauge-axis{bottom:6px}
  .depth{gap:14px}
  .depth-label{font-size:.58rem;letter-spacing:.12em}
  .gauge-note{display:none}
}

/* ── the plot ─────────────────────────────────────────────────────────
   One chart, not a row of readouts. A single ruled field carries both
   durations, so the two bars are read against each other and against the
   same day scale rather than each sitting in its own box. The 24 is the
   origin of the axis and is set apart from the bars for that reason: it is
   not a third duration, it is when the axis starts.

   The gridlines belong to the FIELD, not to each row, which is what makes
   this one composition instead of two stacked ones. */

.panel{
  background:var(--ground);
  border-bottom:1px solid var(--rule);
  padding:0 var(--gut) clamp(40px,4.6vw,72px);
}
.panel .scale{margin-bottom:clamp(30px,3.4vw,52px)}
.panel-in{display:grid;gap:clamp(28px,3.4vw,54px)}
.plot-head .mid{max-width:26ch;margin-top:.6em}

.plot{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,44px)}

.plot-origin{
  border-top:1px solid var(--accent);
  padding-top:14px;
}
.value{
  font-family:var(--display);
  font-size:clamp(2.6rem,6vw,4.4rem);
  line-height:.92;letter-spacing:-.02em;
  color:var(--head);
  margin:0 0 .4em;
  display:flex;align-items:baseline;gap:.34em;
}
.value.sm{font-size:clamp(1.5rem,2.9vw,2.3rem);margin-bottom:.5em}
.unit{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.plot-origin .marker{max-width:26ch}

/* the field: one set of gridlines under everything in it */
.plot-field{
  position:relative;
  padding-top:8px;
  background:repeating-linear-gradient(90deg,
    var(--rule) 0 1px,transparent 1px 20%);
  background-position:left top;
}
.plot-axis{
  list-style:none;margin:0 0 clamp(20px,2.4vw,32px);padding:0;
  position:relative;height:26px;
}
.plot-axis li{position:absolute;left:var(--x);top:0}
.ax-tick{
  position:absolute;left:0;top:0;width:1px;height:9px;
  background:var(--rule-strong);
}
.ax-label{
  position:absolute;left:0;top:13px;
  transform:translateX(-50%);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--support);
  white-space:nowrap;
}
.plot-axis li:first-child .ax-label{transform:none}
.plot-axis li:first-child .ax-tick{background:var(--accent);height:13px}
.plot-axis li:last-child .ax-label{transform:translateX(-100%)}

.plot-rows{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(26px,3vw,44px)}
.plot-row{display:grid;gap:clamp(10px,1.2vw,16px)}
.bar-read .marker{max-width:44ch}
.bar-lane{position:relative;height:14px}
/* The bar is scrubbed on WIDTH, not on a scaleX. A transform would squash
   its lit leading edge into an ellipse at every value below 1, which is
   exactly the sort of thing that looks like a bug rather than a reading.

   IT IS `.plot-bar`, NOT `.bar`, AND THAT IS THE WHOLE POINT. It was `.bar`,
   which is also the masthead's class, and this rule sits several hundred
   lines below `.bar{background:var(--ground)}` at equal specificity — so the
   masthead was being painted saturated amber, stripped of its sticky
   positioning, and given the bar's lit leading dot. That is what the critic
   saw as "a full-width safety-amber slab" with white nav links ghosting out
   on it at about 1.7:1, and it read as a rendering fault because it was one.
   The same collision destroyed the chart at the other end: the plot's bars
   inherited `position:relative` from the masthead's later rule and lost
   their `left`/`width`, so the timeline drew as a static sliver rather than
   as two durations filling along an axis. One name, two owners, both broken,
   no error anywhere. */
.plot-bar{
  position:absolute;left:var(--x);top:0;height:100%;
  width:calc(var(--w) * var(--p,1));
  background:var(--accent);
}

/* ── section shell ────────────────────────────────────────────────── */

.wrap{padding:clamp(56px,7.4vw,116px) var(--gut)}
.wrap.surface{background:var(--surface)}

/* ── scope ────────────────────────────────────────────────────────── */

.band{
  display:grid;grid-template-columns:1fr;gap:clamp(20px,2.4vw,38px);
  padding-bottom:clamp(30px,3.4vw,48px);
}
.band-img img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
}
.plate-note{
  display:grid;grid-template-columns:clamp(28px,6vw,90px) 1fr;
  align-items:center;gap:0 14px;
  margin-top:14px;
}
.band-copy p{margin:0 0 1.1em;max-width:58ch}
.svc-name{
  font-family:var(--display);
  font-size:var(--t-s);
  line-height:1.1;letter-spacing:-.015em;
  color:var(--head);margin:0 0 .7em;
  max-width:18ch;
}

/* ── the annotated plate ──────────────────────────────────────────────
   The hero lays an instrument over a photograph and that was the whole
   idea of the page; below the fold it had become a caption under a
   picture. Here the leaders are drawn ONTO the photograph and they draw
   with the scroll, so the idea comes back as structure rather than as a
   memory of the first screen. The label sits on its own solid ground so
   its contrast never depends on what is behind it. */

.plate{position:relative;isolation:isolate}
.anno{
  position:absolute;z-index:2;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:"text text" "line dot";
  align-items:center;justify-items:start;
  row-gap:8px;
}
.anno-text{grid-area:text}
.anno-line{grid-area:line}
.anno-dot{grid-area:dot}
.anno-text{
  color:var(--head);
  background:rgba(7,12,17,.86);
  padding:6px 10px;
  font-size:.6rem;letter-spacing:.14em;
  max-width:19ch;
  opacity:var(--p,1);
}
.anno-line{
  display:block;height:1px;width:clamp(34px,7vw,96px);
  background:var(--accent);
  transform:scaleX(var(--p,1));transform-origin:left center;
  margin-left:10px;
}
.anno-dot{
  display:block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  margin-left:-3px;
  /* the target arrives last: the leader draws toward it and then it lands */
  opacity:clamp(0,calc((var(--p,1) - .7) / .3),1);
  box-shadow:0 0 0 3px rgba(232,163,61,.18);
}
/* placed against the two things the copy names, and clear of the lamp */
.anno-a{left:4%;top:12%}
.anno-b{left:38%;top:58%}
@media (max-width:619px){
  .anno-b{display:none}
  .anno-a{left:4%;top:8%}
}

/* ── the number gets the full measure ─────────────────────────────────
   It was set at display size inside the 44% column of the band grid and
   broke as "(604) 555-" / "0119", which is the one string on the page
   that must never break. It is unbreakable now and it has a band of its
   own: a rule, the number, and the line that belongs to it. */

.call-rule{
  display:grid;gap:clamp(12px,1.6vw,22px);
  border-top:1px solid var(--accent);
  padding-top:clamp(18px,2.2vw,30px);
  margin-bottom:clamp(34px,4vw,58px);
}
.big-tel{
  justify-self:start;
  font-family:var(--display);
  font-size:clamp(1.5rem,7.4vw,4.2rem);
  line-height:1;letter-spacing:-.025em;
  white-space:nowrap;
  color:var(--head);text-decoration:none;
  border-bottom:2px solid var(--accent);
  padding-bottom:.06em;
  transition:color .2s ease;
}
.big-tel:hover{color:var(--accent)}
.call-rule .marker{max-width:30ch;align-self:end}
@media (min-width:900px){
  .call-rule{grid-template-columns:auto 1fr;align-items:end;
    gap:clamp(24px,3vw,56px)}
  .call-rule .marker{padding-bottom:.9em;text-align:right;justify-self:end}
}

/* ── the section instrument ───────────────────────────────────────────
   A section through a wet floor: four depths, each with its own grain and
   a little more thickness than the one above, and an accent bracket that
   draws down through all four. This is where the concept stops being a
   fold treatment. */

.strata{
  display:grid;grid-template-columns:1fr;
  gap:clamp(22px,2.8vw,44px);
  background:var(--deep);
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule);
  padding:clamp(26px,3.4vw,52px) clamp(18px,2.6vw,44px) clamp(28px,3.4vw,52px);
  margin:clamp(30px,3.6vw,58px) 0;
}
.strata-bands{position:relative;padding-right:clamp(52px,16vw,240px)}
.stratum{
  position:relative;
  display:flex;align-items:center;
  height:calc(clamp(42px,5.4vw,72px) + var(--i) * clamp(6px,1.2vw,17px));
  border-top:1px solid var(--rule-strong);
  padding-left:clamp(12px,1.8vw,26px);
  /* the grain coarsens with depth: surfaces are fine, insulation is not */
  background-image:
    repeating-linear-gradient(90deg,rgba(147,166,188,.13) 0 1px,transparent 1px calc(9px + var(--i) * 7px));
  background-color:rgba(147,166,188,.025);
}
.stratum:nth-of-type(2){background-color:rgba(147,166,188,.05)}
.stratum:nth-of-type(3){background-color:rgba(147,166,188,.075)}
.stratum:nth-of-type(4){background-color:rgba(147,166,188,.1)}
.stratum:last-of-type{border-bottom:1px solid var(--rule-strong)}
.stratum-name{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--head);
}
.bracket{
  position:absolute;top:0;bottom:0;
  right:clamp(6px,3vw,54px);
  width:clamp(34px,10vw,150px);
  pointer-events:none;
}
.bracket-line{
  position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--accent);transform-origin:top center;
}
.bracket-foot{
  position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform-origin:left center;
}
.bracket-note{
  display:block;color:var(--accent);
  margin:14px 0 0 clamp(12px,1.8vw,26px);
  max-width:24ch;
}
.strata-cap .mid{max-width:26ch;margin-top:.7em}

.pair{
  display:grid;grid-template-columns:1fr;gap:clamp(30px,3.4vw,56px);
  padding-top:clamp(6px,1vw,16px);
}
.svc .lead-line{margin:0 0 clamp(18px,2vw,26px)}
.svc p{margin:0;max-width:52ch}
.svc .index{margin:0 0 .9em}

/* ── the claim, set as the record it describes ────────────────────── */

.claim-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,3.6vw,64px)}
.sheet-head{
  padding-bottom:12px;
  border-bottom:1px solid var(--accent);
  color:var(--accent);
}
.sheet{list-style:none;margin:0;padding:0}
.sheet li{
  display:grid;grid-template-columns:2.6rem 1fr;gap:1.2em;
  align-items:baseline;
  color:var(--head);
  padding:15px 0;
  border-bottom:1px solid var(--rule);
}
.claim-note p{margin:0 0 1.1em;max-width:52ch}
.claim-note p:last-child{margin-bottom:0}

/* ── before we arrive ─────────────────────────────────────────────────
   This is the most useful thing on the site and it was laid out as six
   identical rows: amber numeral, bold line, grey line, six times. Same
   six steps and the same words, in three weights instead of one.

     01   the safety step, at the top of the ladder, because it is the
          only one on the list that can hurt somebody
     02-05 the practical middle, two-up and one register down, so the
          page stops marching
     06   the action, so it carries the number

   The heading also moves out of the stacked position every other section
   uses: on a wide screen it stands in its own rail beside the list. */

.before{background:var(--deep)}
.before-in{display:grid;gap:clamp(30px,3.4vw,56px)}
.before .head-group{margin-bottom:0}

.steps{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(30px,3.4vw,52px)}
.step-no{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  color:var(--accent);
  display:block;margin-bottom:.9em;
}
.step-name{
  font-family:var(--display);
  line-height:1.16;letter-spacing:-.012em;
  color:var(--head);margin:0 0 .5em;
  max-width:26ch;
}
.steps p{margin:0;max-width:54ch}
.step-when{display:block;margin-bottom:1.1em}

/* 01 — the one that can hurt somebody */
.step-lead{
  border-top:1px solid var(--accent);
  padding-top:clamp(20px,2.4vw,30px);
}
.step-lead .step-name{
  font-size:clamp(1.45rem,3.2vw,2.4rem);
  max-width:20ch;
}
.step-lead .step-no{
  font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.6rem);
  letter-spacing:-.02em;line-height:1;margin-bottom:.5em;
}
.step-lead p{color:var(--head);max-width:46ch}

/* 02-05 — the practical middle, two-up and quieter */
.step-set{border-top:1px solid var(--rule-strong);
  padding-top:clamp(20px,2.4vw,30px)}
.step-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;
  gap:clamp(24px,2.6vw,40px) clamp(30px,4vw,72px);
}
.step-grid .step{
  border-top:1px solid var(--rule);
  padding-top:clamp(14px,1.6vw,20px);
}
.step-grid .step-name{font-size:clamp(1.06rem,1.5vw,1.28rem);max-width:22ch}
.step-grid p{font-size:.97rem;color:var(--text)}

/* 06 — the action */
.step-act{
  border-top:1px solid var(--accent);
  padding-top:clamp(20px,2.4vw,30px);
  display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-areas:"no" "copy" "tel";
}
.step-act .step-no{grid-area:no;margin-bottom:0}
.step-act-copy{grid-area:copy}
.step-act .big-tel{grid-area:tel}
.step-act .step-name{font-size:clamp(1.24rem,2.2vw,1.8rem);max-width:22ch}
.step-act p{color:var(--head)}
.step-act .big-tel{font-size:clamp(1.45rem,5.4vw,2.9rem)}
@media (min-width:760px){
  .step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  /* the rail must STRETCH for the heading to stick inside it: an
     align-items:start here would collapse the column to its content and
     the sticky below would silently do nothing */
  .before-in{grid-template-columns:minmax(0,30%) minmax(0,1fr);
    gap:clamp(40px,5vw,96px)}
  .before .head-group{position:sticky;top:96px}
}
/* the last step goes two-up only where the number and the sentence beside
   it both still have a measure. Below this it stacks, which is correct:
   the number is never allowed to squeeze the words or itself. */
@media (min-width:1200px){
  .step-act{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"no no" "copy tel";align-items:end;
    column-gap:clamp(40px,4vw,80px)}
}

/* ── about: the name fills the quadrant ───────────────────────────────
   The wordmark at full size, cropped by the page edge, sitting on the
   ridge scale with the standing facts beneath it. */

.about-sec{
  display:grid;grid-template-columns:1fr;
  background:var(--ground);
  border-top:1px solid var(--rule);
}
.about{padding:clamp(56px,7.4vw,116px) var(--gut) clamp(30px,3.4vw,52px)}
.about p{margin:0 0 1.1em;max-width:54ch}
.about-lead{color:var(--head);font-weight:500;font-size:1.05rem}

.about-mark{
  position:relative;
  background:var(--deep);
  padding:clamp(34px,4vw,64px) 0 clamp(40px,4.4vw,68px) var(--gut);
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:clamp(20px,2.4vw,34px);
  overflow:hidden;
}
.huge{
  font-family:var(--display);
  font-size:clamp(3.6rem,13vw,9rem);
  line-height:.86;letter-spacing:-.03em;
  color:var(--head);
  margin:0;
  white-space:nowrap;
}
.about-mark .scale{margin-right:var(--gut)}
.standing{
  list-style:none;margin:0;padding:0;
  display:grid;gap:9px;
}

/* ── area ─────────────────────────────────────────────────────────── */

.area-sec .scale{margin-top:clamp(30px,3.4vw,52px)}
.area{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  column-gap:0;row-gap:4px;
  font-family:var(--display);
  font-size:clamp(1.15rem,3vw,2.1rem);
  line-height:1.25;letter-spacing:-.01em;
  color:var(--head);
  max-width:44ch;
}
.area li{display:flex;align-items:center}
.area li::after{
  content:"";
  width:clamp(14px,1.6vw,26px);height:1px;
  background:var(--accent);
  margin:0 clamp(10px,1.2vw,18px);
}
.area li:last-child::after{display:none}

/* ── contact ──────────────────────────────────────────────────────────
   No photograph. The hero frame was cropped and repeated here behind a
   repeat of the hero's own line and button, and an image used twice is
   worth less than half as much each time. The close is the darkest ground
   on the page and one string set larger than anything else on it. */

.contact{
  background:var(--deep);
  border-top:1px solid var(--rule);
}
.contact-in{padding:clamp(60px,8vw,130px) var(--gut) clamp(40px,4.4vw,70px)}
.contact-line{
  font-family:var(--display);
  font-size:var(--t-m);
  line-height:1.02;letter-spacing:-.02em;
  color:var(--head);margin:.5em 0 clamp(26px,3vw,44px);
}
.huge-tel{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(1.7rem,8.4vw,5.4rem);
  line-height:1;letter-spacing:-.03em;
  white-space:nowrap;
  color:var(--head);text-decoration:none;
  border-bottom:3px solid var(--accent);
  padding-bottom:.08em;
  transition:color .2s ease;
}
.huge-tel:hover{color:var(--accent)}
.contact-scale{margin:0 var(--gut) clamp(40px,4.4vw,70px)}
.facts{margin:clamp(34px,4vw,60px) 0 0}
.facts div{
  display:grid;grid-template-columns:1fr;gap:.35em;
  padding:16px 0;border-top:1px solid var(--rule);
}
.facts div:last-child{border-bottom:1px solid var(--rule)}
.facts dd{margin:0;color:var(--head)}

/* ── footer ───────────────────────────────────────────────────────── */

.foot{
  display:grid;gap:20px;
  padding:clamp(40px,4vw,64px) var(--gut) clamp(48px,5vw,80px);
  border-top:1px solid var(--rule);
}
.foot-mark{margin:0;font-size:1.02rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 24px}
.foot-nav a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--support);text-decoration:none;
  transition:color .2s ease;
}
.foot-nav a:hover{color:var(--head)}
.foot-note{max-width:60ch}

/* ── the staged reading ───────────────────────────────────────────────
   Everything below is one mechanism: a block is observed, .in lands on
   it, and the parts inside draw in the order the eye would take them.
   Lines extend, bands step down, values stay put. Nothing moves more
   than 10px and nothing moves twice. */

.js .seq .eyebrow,
.js .seq .sec-h,
.js .seq .mid,
.js .seq .value,
.js .seq .step-name,
.js .seq .svc-name,
.js .seq > p,
.js .seq .step-name + p,
.js .seq .bar-read,
.js .seq .sheet li,
.js .seq .stratum,
.js .seq .bracket-note,
.js .seq .plate-note .marker{opacity:0;transform:translateY(10px)}
.js .seq .lead-line,
.js .seq .bracket-foot{transform:scaleX(0)}
.js .seq .bracket-line{transform:scaleY(0)}

.js .seq.in .eyebrow,
.js .seq.in .sec-h,
.js .seq.in .mid,
.js .seq.in .value,
.js .seq.in .step-name,
.js .seq.in .svc-name,
.js .seq.in > p,
.js .seq.in .step-name + p,
.js .seq.in .bar-read,
.js .seq.in .plate-note .marker{
  opacity:1;transform:none;
  transition:opacity .5s ease-out calc(var(--i,0) * .07s),
             transform .5s cubic-bezier(.32,.72,.3,1) calc(var(--i,0) * .07s);
}
.js .seq.in .lead-line{
  transform:none;
  transition:transform .8s cubic-bezier(.32,.72,.3,1) .1s;
}
.js .seq.in .sheet li{
  opacity:1;transform:none;
  transition:opacity .45s ease-out calc(.1s + var(--i) * .09s),
             transform .45s cubic-bezier(.32,.72,.3,1) calc(.1s + var(--i) * .09s);
}
.js .seq.in .stratum{
  opacity:1;transform:none;
  transition:opacity .5s ease-out calc(var(--i) * .12s),
             transform .5s cubic-bezier(.32,.72,.3,1) calc(var(--i) * .12s);
}
.js .seq.in .bracket-line{
  transform:none;
  transition:transform .85s cubic-bezier(.32,.72,.3,1) .5s;
}
.js .seq.in .bracket-foot{
  transform:none;
  transition:transform .5s cubic-bezier(.32,.72,.3,1) 1.3s;
}
.js .seq.in .bracket-note{
  opacity:1;transform:none;
  transition:opacity .5s ease-out 1.5s, transform .5s ease-out 1.5s;
}

/* ── wider than a phone ───────────────────────────────────────────── */

@media (min-width:620px){
  .facts div{grid-template-columns:11rem 1fr;gap:1.4em;align-items:baseline}
  .standing{grid-template-columns:repeat(3,auto);justify-content:start;gap:10px 34px}
  .bar-lane{height:20px}
}

@media (min-width:900px){
  .mark-sub{display:inline}
  .bar-nav{display:flex}
  .cta-sm{margin-left:0}

  .hero{min-height:min(90vh,880px);min-height:min(90svh,880px)}
  .hero-in{padding-bottom:clamp(48px,5.4vw,88px)}
  .hero-scrim{
    background:
      linear-gradient(to top,rgba(7,12,17,.94) 0%,rgba(7,12,17,.72) 26%,rgba(7,12,17,.16) 58%,rgba(7,12,17,0) 82%),
      linear-gradient(to right,rgba(7,12,17,.72),rgba(7,12,17,0) 58%),
      linear-gradient(to bottom,rgba(7,12,17,.58),rgba(7,12,17,0) 22%);
  }
  h1{max-width:15ch}

  /* the origin sits off to the left of the field it starts, on the same
     baseline grid, so the whole thing is read as one chart */
  .plot{grid-template-columns:minmax(0,22%) minmax(0,1fr);
    gap:clamp(30px,4vw,80px);align-items:start}
  .plot-head .mid{max-width:34ch}

  /* asymmetric on purpose: the photograph takes the larger half and the
     copy runs narrow beside it. The old 50/50 card was the default. */
  .band{grid-template-columns:56% 1fr;gap:clamp(30px,3.2vw,58px);align-items:end}
  .band-img img{height:min(62vh,560px);aspect-ratio:auto}
  .pair{grid-template-columns:repeat(2,minmax(0,1fr))}

  .strata{grid-template-columns:1fr minmax(0,30%);align-items:end;
    gap:clamp(30px,4vw,72px)}
  .strata-cap{padding-bottom:clamp(10px,1.4vw,22px)}

  /* the sheet is the narrow column here, the reading is the wide one:
     the reverse of the band above it, so the rhythm changes */
  .claim-grid{grid-template-columns:38% 1fr;gap:clamp(40px,4.4vw,90px)}

  .about-sec{grid-template-columns:1fr 44%}
  .about{padding-right:clamp(30px,3.4vw,70px)}
  .about-mark{padding-left:clamp(34px,3.4vw,64px)}
  .standing{grid-template-columns:1fr;gap:9px}
  .huge{font-size:clamp(4.4rem,7.4vw,9rem)}

  .area{max-width:none;font-size:clamp(1.6rem,2.6vw,2.6rem)}

  /* the break is set by hand in the markup, so no measure is imposed here */
  .contact-line{font-size:var(--t-l);max-width:none}
  .foot{grid-template-columns:auto 1fr auto;align-items:center;gap:30px}
  .foot-nav{justify-content:center}
  .foot-note{text-align:right;max-width:34ch;justify-self:end}
}

@media (min-width:1200px){
  .gauge{right:clamp(72px,7vw,140px)}
}

/* ── reduced motion ───────────────────────────────────────────────────
   Every drawn part is put in its finished state and every transition is
   removed. The page is identical, it is simply already measured. */

@media (prefers-reduced-motion:reduce){
  .js .gauge-axis{transform:none}
  .js .depth li{opacity:1;transform:none}
  .js .waterline{transform:translateX(-100%) scaleX(1)}
  .js .gauge-note{opacity:1}
  .js .gauge.on .gauge-axis,
  .js .gauge.on .depth li,
  .js .gauge.on .waterline,
  .js .gauge.on .gauge-note{transition:none}

  .js .seq *,
  .js .seq > p{opacity:1 !important;transform:none !important}
  .js .seq.in *{transition:none !important}
  *{transition-duration:.001ms;animation-duration:.001ms}
}

/* ═══════════════════════════════════════════════════════════════════════
   ONE-OFF PASS — motion that a visitor actually registers.

   The critic scored motion 1/2 twice and said nothing on the page moves in
   a way anyone would notice. It was right, and the brief was the reason:
   the direction specified a reveal "deliberately below the threshold of
   being noticed", then the one flourish it did budget (a blurred cobalt
   field) was removed in round 1 for reading as machine-made. That left a
   page whose motion was designed to be invisible and whose visible moment
   had been deleted.

   Everything below is the same instrument idea, scaled up until it lands,
   plus the two effects the page never got. Nothing here is decoration
   travelling on its own: every moving thing is a reading being taken.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. the reveals clear the threshold now ──
   10px over .5s is a hairline nobody sees. 26px over .8s on a real ease is
   a thing that happened. */
.js .seq .eyebrow, .js .seq .sec-h, .js .seq .mid, .js .seq .value,
.js .seq .step-name, .js .seq .svc-name, .js .seq > p,
.js .seq .step-name + p, .js .seq .bar-read, .js .seq .sheet li,
.js .seq .stratum, .js .seq .bracket-note,
.js .seq .plate-note .marker{transform:translateY(26px)}
.js .seq.in .eyebrow, .js .seq.in .sec-h, .js .seq.in .mid,
.js .seq.in .value, .js .seq.in .step-name, .js .seq.in .svc-name,
.js .seq.in > p, .js .seq.in .step-name + p, .js .seq.in .bar-read,
.js .seq.in .plate-note .marker{
  transition:opacity .72s ease-out calc(var(--i,0) * .1s),
             transform .82s cubic-bezier(.16,.84,.3,1) calc(var(--i,0) * .1s);
}
.js .seq.in .sheet li{
  transition:opacity .6s ease-out calc(.12s + var(--i) * .13s),
             transform .7s cubic-bezier(.16,.84,.3,1) calc(.12s + var(--i) * .13s);
}
.js .seq.in .stratum{
  transition:opacity .66s ease-out calc(var(--i) * .17s),
             transform .76s cubic-bezier(.16,.84,.3,1) calc(var(--i) * .17s);
}
.js .seq.in .bracket-note{
  transition:opacity .6s ease-out .9s, transform .6s cubic-bezier(.16,.84,.3,1) .9s}

/* ═══════════════════════════════════════════════════════════════════════
   CRITIC PASS — the instruments SCRUB.

   Every device on the page was a printed diagram that had been faded in
   once by an IntersectionObserver: by the time you looked at it, it had
   finished, so a still of the page at any moment shows a finished picture
   and the page reads as a brochure below the fold. These four are drawn
   against scroll position instead. `--p` is the progress of the block
   through the viewport, 0 to 1, written by app.js on every frame the page
   moves; the bar, the bracket, the leader lines and the ruler are all
   simply that number. Stop halfway and they are halfway drawn, which is
   the whole difference: it is a measurement being taken, and a still frame
   can evidence it.

   `--p` defaults to 1 everywhere, so with no JS, with no rAF, or under
   reduced motion the page is drawn complete rather than blank.
   ═══════════════════════════════════════════════════════════════════════ */

/* the two bars fill along the axis, leading edge lit */
.plot-bar::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(232,163,61,.16),0 0 18px 3px rgba(232,163,61,.5);
  opacity:var(--p,1);
}
/* the second bar is a beat behind the first, so the eye reads them in
   order rather than seeing one thing twice as wide */
.plot-row:nth-child(2) .plot-bar{
  width:calc(var(--w) * clamp(0,calc((var(--p,1) - .18) / .82),1));
}

/* the bracket runs down the depths as you scroll past them, and its foot
   lands only once the line has reached the bottom */
.js .strata[data-scrub] .bracket-line{
  transform:scaleY(clamp(0,calc(var(--p,1) / .74),1));
  transition:none;
}
.js .strata[data-scrub] .bracket-foot{
  transform:scaleX(clamp(0,calc((var(--p,1) - .74) / .26),1));
  transition:none;
}

/* the ruler strip draws instead of being printed */
.js .scale[data-scrub]{
  transform:scaleX(var(--p,1));transform-origin:left center;
}

/* ── 2. the water light ──
   A slow caustic drift over the basement photograph. Painted to a canvas
   mounted AFTER load, so the hero image and headline still paint from HTML
   and CSS alone and LCP is untouched. It is the one ambient thing on the
   page, and it is the only one: water still moving in a building. */
.hero{position:relative}
.hero-light{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  mix-blend-mode:screen;opacity:0;pointer-events:none;
  transition:opacity 1.6s ease-out}
.hero-light.on{opacity:.55}
.hero-scrim{z-index:2}
/* The gauge is absolutely positioned against the hero (line 266); only its
   stacking needs raising above the light, never its positioning. */
.hero-in{position:relative;z-index:3}
.gauge{z-index:3}

/* ── 3. the probe ──
   The tick mark was the page's signature and was being spent six times as a
   divider. Here it becomes the mechanism: one rail down the page, a head
   that travels with the scroll, and a tick per section that lights as the
   reading passes it. Scroll-linked, so it is continuous rather than a
   one-shot nobody catches. */
.probe{
  position:fixed;left:clamp(10px,2.1vw,30px);top:0;bottom:0;width:12px;
  z-index:40;pointer-events:none;opacity:0;transition:opacity .6s ease-out}
.probe.on{opacity:1}
.probe-rail{
  position:absolute;left:5px;top:14vh;bottom:14vh;width:1px;
  background:linear-gradient(180deg,transparent,rgba(147,166,188,.3) 12%,
             rgba(147,166,188,.3) 88%,transparent)}
.probe-run{
  position:absolute;left:5px;top:14vh;width:1px;height:0;
  background:linear-gradient(180deg,rgba(232,163,61,.15),var(--accent,#E8A33D));
  will-change:height}
.probe-head{
  position:absolute;left:1px;width:9px;height:9px;border-radius:50%;
  background:var(--accent,#E8A33D);
  box-shadow:0 0 0 4px rgba(232,163,61,.14),0 0 16px 3px rgba(232,163,61,.45);
  will-change:transform}
.probe-ticks{list-style:none;margin:0;padding:0}
.probe-ticks li{
  position:absolute;left:0;width:11px;height:1px;background:rgba(147,166,188,.42);
  transition:background .45s ease-out,width .45s cubic-bezier(.16,.84,.3,1),
             box-shadow .45s ease-out}
.probe-ticks li.lit{
  width:12px;background:var(--accent,#E8A33D);
  box-shadow:0 0 10px 1px rgba(232,163,61,.55)}
@media (max-width:900px){.probe{display:none}}

/* ── 4. the phone keeps the best line ──
   `.gauge-note` was display:none under 620px, so the single line that carries
   the whole design ("Dried to here, not to the carpet") was missing on the
   device most of these people are holding. It sits under the gauge now. */
@media (max-width:619px){
  .gauge-note{
    display:block;position:static;margin-top:10px;max-width:22ch;
    font-size:11px;letter-spacing:.13em;line-height:1.45}
}

/* ── 5. a third type size ──
   The page had exactly two, so a section heading and the six urgent steps
   arrived at the same weight. This is the middle register the direction
   forbade; the direction was wrong, and the critic said so twice. */
.svc-name,.step-name{font-size:clamp(19px,1.55vw,25px);line-height:1.16;
  letter-spacing:-.012em}

/* ── 6. the middle third is no longer two equal grey columns ── */
.pair-uneven{grid-template-columns:1.15fr .85fr;align-items:start}
.svc-shot{position:relative}
.svc-fig{margin:0 0 18px;overflow:clip;border-radius:2px}
.svc-fig img{width:100%;height:clamp(150px,17vw,220px);object-fit:cover;
  display:block;transform:scale(1.06);transition:transform 1.2s cubic-bezier(.16,.84,.3,1)}
.js .seq.in .svc-fig img{transform:none}
@media (max-width:820px){.pair-uneven{grid-template-columns:1fr}}

/* ── 7. the desktop hero crops tighter to the water ──
   The upper left third was murky and unreadable while the headline sat low,
   so the eye crossed a dead diagonal. */
@media (min-width:900px){.hero-img{object-position:58% 62%}}

/* ── 8. reduced motion switches all of it off ──
   Not "less of it": the page arrives finished, with no canvas, no probe and
   no transitions, and nothing is left parked invisible. */
@media (prefers-reduced-motion:reduce){
  .js .seq .eyebrow, .js .seq .sec-h, .js .seq .mid, .js .seq .value,
  .js .seq .step-name, .js .seq .svc-name, .js .seq > p,
  .js .seq .step-name + p, .js .seq .bar-read, .js .seq .sheet li,
  .js .seq .stratum, .js .seq .bracket-note,
  .js .seq .plate-note .marker{opacity:1;transform:none;transition:none}
  .js .seq .lead-line,.js .seq .bracket-foot{transform:none}
  .js .seq .bracket-line{transform:none}
  .svc-fig img{transform:none;transition:none}
  .hero-light,.probe{display:none}

  /* every scrubbed instrument arrives finished. Forcing the progress
     variable rather than unsetting each transform means a device added
     later cannot forget to switch itself off here. */
  [data-scrub]{--p:1 !important}
  .js .strata[data-scrub] .bracket-line,
  .js .strata[data-scrub] .bracket-foot,
  .js .scale[data-scrub],
  .anno-line{transform:none !important}
  .plot-row:nth-child(2) .plot-bar,
  .plot-bar{width:var(--w) !important}
  .plot-bar::after,.anno-text,.anno-dot{opacity:1 !important}
}

/* ── 9. the phone's tap targets ──
   Pre-existing, and worth fixing while I am here: the masthead links were
   18px tall on a phone. "Call" is the one action on the page and the whole
   pitch is that somebody in trouble presses it with a thumb. */
@media (max-width:900px){
  .bar-nav a,.bar .cta,.bar a,
  .foot-nav a{min-height:44px;display:inline-flex;align-items:center}
}

/* ═══════════════════════════════════════════════════════════════════════
   FOURTH CRITIC PASS — the collision, the register, and the one accent
   gesture spent once.

   The largest finding this round was not a design decision at all: `.bar`
   had two owners (see the note above .plot-bar). Correcting that one name
   returns the masthead to storm navy and to sticky, and returns the drying
   timeline to being a chart. Everything below it is design.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. the masthead ──────────────────────────────────────────────────
   Two rows on a phone: the wordmark and the one action, then the four
   sections on a rail that scrolls sideways rather than vanishing, which
   is what it did below 900px. Above 900px .bar-top is display:contents
   and it is one row again, with `order` putting the nav back between the
   mark and the button. */

.bar{
  display:block;
  padding:0;
  background:var(--ground);
}
.bar-top{
  display:flex;align-items:center;
  gap:clamp(12px,3vw,32px);
  padding:8px var(--gut);
}
.mark{margin-right:auto}
.mark-sub{display:inline;color:var(--support)}
@media (max-width:399px){.mark-sub{display:none}}

.bar-nav{
  display:flex;
  gap:clamp(16px,4vw,28px);
  margin:0;
  padding:0 var(--gut) 2px;
  overflow-x:auto;
  scrollbar-width:none;
  border-top:1px solid var(--rule);
}
.bar-nav::-webkit-scrollbar{display:none}
.bar-nav a{white-space:nowrap;flex:none}

@media (min-width:900px){
  .bar{
    display:flex;align-items:center;
    gap:clamp(14px,3vw,40px);
    padding:12px var(--gut);
  }
  .bar-top{display:contents}
  .mark{order:1;margin-right:0}
  .bar-nav{order:2;margin-left:auto;padding:0;overflow:visible;border-top:0}
  .cta-sm{order:3;margin-left:clamp(14px,2vw,32px)}
}

/* The gauge clears the taller phone masthead. The axis and the head both
   have to stop above the note, which pass 4 put back into the flow at 11px
   over up to two lines — the old `bottom:6px` was measured when the note
   was display:none and had been running the axis down through it since. */
@media (max-width:619px){
  .gauge{top:112px}
  .gauge-axis,.gauge-head{bottom:44px}
}

/* ── 2. the hero gauge TAKES the reading ──────────────────────────────
   It drew its axis and then stepped four ticks in over half a second,
   which is a diagram assembling itself rather than an instrument being
   read. A probe head now descends the axis over two and a half seconds
   and each depth lands as the head reaches it: the same four words, read
   off in front of the visitor instead of arriving already read. */

.gauge-head{
  position:absolute;left:-4px;top:4px;bottom:26px;width:9px;
  pointer-events:none;
}
.gauge-head::before{
  content:"";position:absolute;left:0;top:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(232,163,61,.14),0 0 16px 3px rgba(232,163,61,.5);
  opacity:0;
}
.js .gauge.on .gauge-head::before{
  animation:gauge-probe 2.5s cubic-bezier(.42,0,.22,1) .3s both;
}
@keyframes gauge-probe{
  0%{opacity:0;top:0}
  10%{opacity:1;top:0}
  92%{opacity:1}
  100%{opacity:.9;top:calc(100% - 9px)}
}
/* the depths land under the head rather than well ahead of it */
.js .gauge.on .depth li{
  transition:opacity .4s ease-out calc(.5s + var(--i) * .53s),
             transform .5s cubic-bezier(.16,.84,.3,1) calc(.5s + var(--i) * .53s);
}
.js .gauge.on .waterline{
  transition:transform .7s cubic-bezier(.16,.84,.3,1) 2.75s;
}
.js .gauge.on .gauge-note{transition:opacity .6s ease-out 3.05s}

/* ── 3. the bracket has a head, and the depths light as it passes ─────
   The same instrument as the hero gauge, at picture scale, driven by
   scroll instead of by a clock. --t on each stratum is the depth at
   which the head reaches it, so nothing below the head is lit yet: stop
   halfway down the section and the reading is halfway taken. */

.js .seq[data-scrub] .bracket-line{
  transform:scaleY(clamp(0,calc(var(--p,1) / .74),1));
  transition:none;
}
.js .seq[data-scrub] .bracket-foot{
  transform:scaleX(clamp(0,calc((var(--p,1) - .74) / .26),1));
  transition:none;
}
.bracket-head{
  position:absolute;left:-4px;top:0;bottom:0;width:9px;pointer-events:none;
}
.bracket-head::before{
  content:"";position:absolute;left:0;
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(232,163,61,.14),0 0 16px 3px rgba(232,163,61,.5);
  top:calc(clamp(0,calc(var(--p,1) / .74),1) * (100% - 9px));
  opacity:clamp(0,calc(var(--p,1) * 14),1);
}

.stratum{--lit:clamp(0,calc((var(--p,1) - var(--t,0)) * 14),1)}
.stratum::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);
  opacity:var(--lit);
}

/* ── 4. the timeline is read off, not printed ─────────────────────────
   A hairline sweep travels the field with the scroll and each day tick
   lights as it is passed, then the sweep fades out at the end so a
   finished chart is a clean chart. */

.plot-field::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  left:calc(var(--p,1) * 100%);
  background:linear-gradient(180deg,rgba(232,163,61,0),rgba(232,163,61,.6) 22%,
             rgba(232,163,61,.6) 78%,rgba(232,163,61,0));
  opacity:clamp(0,calc((1 - var(--p,1)) * 7),1);
  pointer-events:none;
}
.plot-axis li{--lit:clamp(0,calc((var(--p,1) - var(--t,0)) * 12),1)}
.plot-axis li::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:13px;
  background:var(--accent);
  opacity:var(--lit);
}
.plot-axis li .ax-label{
  color:color-mix(in srgb,var(--accent) calc(var(--lit) * 100%),var(--support));
}

/* ── 5. the photography at full strength ──────────────────────────────
   Both frames were boxed: the drying room in a 56% column inside the
   section gutters, the night truck at 220px sitting on top of a text
   column, a small mono caption under each. They are the proof this
   business sells. Each runs edge to edge now and carries the
   annotation, and the second mirrors the first's asymmetry so the
   section does not open the same way twice. */

.band.bleed{
  margin-left:calc(var(--gut) * -1);
  margin-right:calc(var(--gut) * -1);
}
.band.bleed .band-copy{padding:0 var(--gut)}
.band.bleed .plate-note{padding-left:var(--gut);padding-right:var(--gut)}

.band-img img{aspect-ratio:5/4}
@media (min-width:620px){.band-img img{aspect-ratio:16/9}}
@media (min-width:900px){
  .band-img img{height:min(76vh,680px);aspect-ratio:auto}
  .band.bleed .band-copy{padding:0 var(--gut) 0 0}
  .band-flip{grid-template-columns:1fr 56%}
  .band-flip .band-img{order:2}
  /* .band.bleed .band-copy above is (0,3,0) and would otherwise outrank a
     two-class selector sitting after it, leaving the flipped band padded
     on the wrong side. */
  .band.bleed.band-flip .band-copy{order:1;padding:0 0 0 var(--gut)}
}
.anno-c{left:6%;top:14%}

/* ── 6. the annotation on a phone points at the picture ───────────────
   The leaders ran off the image edge at 390px and ended in open space,
   and the second label was display:none, so the phone lost half the
   annotation and the half it kept pointed at nothing. Below 620px they
   become a ruled callout strip directly under the frame: the same
   words, both of them, every leader ending on its own dot. */

@media (max-width:619px){
  .anno,.anno-b{
    position:static;
    display:grid;
    grid-template-columns:auto auto 1fr;
    grid-template-areas:"dot line text";
    align-items:center;justify-items:start;
    column-gap:9px;row-gap:0;
    padding:11px 0;
    border-bottom:1px solid var(--rule);
  }
  .band.bleed .anno{margin-left:var(--gut);margin-right:var(--gut)}
  .plate .anno:first-of-type{margin-top:12px;border-top:1px solid var(--rule-strong)}
  .anno-text{background:none;padding:0;max-width:none;color:var(--text)}
  .anno-line{width:clamp(20px,8vw,40px);margin-left:0}
  .anno-dot{margin-left:0}
}

/* ── 7. the accent gesture is spent ONCE ──────────────────────────────
   The number was set at display scale in the scope band, again at step
   06 and again in the close, each with an amber underline, so by the
   second one the amber had stopped meaning anything. Display scale and
   the thick amber rule belong to the close alone now. The other two are
   ruled line items at reading size: still unbreakable, still a 44px tap
   target, no accent. */

.tel-line{
  justify-self:start;
  display:inline-flex;align-items:center;
  min-height:44px;
  font-family:var(--display);
  font-size:clamp(1.12rem,1.9vw,1.5rem);
  line-height:1.1;letter-spacing:-.012em;
  white-space:nowrap;
  color:var(--head);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  transition:color .2s ease,border-color .2s ease;
}
.tel-line:hover{color:var(--accent);border-bottom-color:var(--accent)}
.call-rule{border-top:1px solid var(--rule-strong)}
.step-act{border-top:1px solid var(--rule-strong)}
.step-act .tel-line{grid-area:tel}

/* ── 8. the mould section gets the register too ───────────────────────
   It was one of two equal grey columns. The window its own first
   sentence names is drawn on a scale now: wet at the origin, the two
   marks the copy gives, and the span between them filling with the
   scroll. Every value here is in the source file. */

.svc-wide{
  display:grid;grid-template-columns:1fr;
  gap:clamp(26px,3vw,48px);
  border-top:1px solid var(--rule-strong);
  padding:clamp(28px,3.4vw,52px) 0 clamp(34px,4vw,62px);
}
@media (min-width:900px){
  .svc-wide{
    grid-template-columns:minmax(0,1fr) minmax(0,36%);
    align-items:start;gap:clamp(40px,5vw,90px);
  }
}
.svc-copy .index{margin:0 0 .9em}
.svc-copy .lead-line{margin:0 0 clamp(18px,2vw,26px)}
.svc-copy p{margin:0;max-width:58ch}

.window{position:relative;padding-top:3px}
.window-rail{
  display:block;height:1px;width:100%;
  background:var(--rule-strong);
  transform:scaleX(var(--p,1));transform-origin:left center;
}
.window-span{
  position:absolute;left:46%;right:0;top:2px;height:3px;
  background:var(--accent);
  transform:scaleX(clamp(0,calc((var(--p,1) - .28) / .5),1));
  transform-origin:left center;
}
.window-marks{list-style:none;margin:0;padding:0;position:relative;height:44px}
.window-marks li{position:absolute;left:var(--x);top:0}
.wm-tick{position:absolute;left:0;top:0;width:1px;height:10px;background:var(--rule-strong)}
.window-marks li + li .wm-tick{background:var(--accent);height:15px}
.wm-label{
  position:absolute;left:0;top:20px;transform:translateX(-50%);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--support);white-space:nowrap;
}
.window-marks li:first-child .wm-label{transform:none}
.window-marks li:last-child .wm-label{transform:translateX(-100%)}
.window-marks li + li .wm-label{color:var(--accent)}
.window-note{margin-top:6px;max-width:28ch}

/* ── 9. the claim sheet is bracketed like the wet floor ───────────────
   The one section where the page's own instrument was most obviously
   right and was not used: four numbered lines of evidence, ruled, and
   nothing drawn. Each index runs a leader to the line it numbers now,
   and the whole sheet is bracketed by the mark that runs down the
   strata above it, drawn against the scroll. */

.sheet-wrap{position:relative}
.sheet-body{position:relative;padding-right:clamp(44px,9vw,120px)}
.sheet li{
  grid-template-columns:2.6rem clamp(18px,4vw,54px) 1fr;
  gap:0 1.1em;
  align-items:center;
}
.sheet-lead{width:100%}
.js .seq[data-scrub] .sheet-lead{
  transform:scaleX(clamp(0,calc((var(--p,1) - var(--i) * .13) * 7),1));
  transition:none;
}
.sheet-bracket{
  position:absolute;top:0;bottom:0;
  right:clamp(6px,2.4vw,44px);
  width:clamp(26px,5vw,72px);
}
.sheet-wrap .bracket-note{margin:14px 0 0}

/* ── 10. the service area is read off a rail ──────────────────────────
   The last place the register was missing. A drawn rule headed by where
   the crew starts from, and the tick between each pair of names lights
   in turn as the reading runs along the list. The names, their order
   and the yard are all in the source file; no distance and no travel
   time is implied, because none is known. */

.area-plot{position:relative}
.area-origin{margin:0 0 12px}
.area-rail{
  display:block;height:1px;width:100%;
  background:var(--rule-strong);
  transform:scaleX(var(--p,1));transform-origin:left center;
  margin-bottom:clamp(18px,2.2vw,30px);
}
.area li::after{opacity:clamp(0,calc((var(--p,1) - var(--t,0)) * 10),1)}

/* ── 11. the phone's middle is no longer one grey column ──────────────
   The structural answer is above: two full-bleed frames, the window,
   the bracketed sheet and the area rail all reach 390px. This is the
   typographic half. */

@media (max-width:619px){
  body{font-size:1.06rem;line-height:1.66}
  .wrap{padding-top:clamp(44px,12vw,64px);padding-bottom:clamp(44px,12vw,64px)}
  .head-group{margin-bottom:clamp(24px,7vw,34px)}
  .ax-label{font-size:.56rem;letter-spacing:.1em}
  .strata-bands{padding-right:clamp(40px,22vw,90px)}
}

/* ── 12. reduced motion switches the new devices off too ──────────────
   Everything scrubbed already resolves correctly at --p:1, which the
   block above forces, so only the timed things need naming: the hero
   probe's descent and the depth ticks retimed to follow it. */

@media (prefers-reduced-motion:reduce){
  .js .gauge.on .gauge-head::before{
    animation:none;top:calc(100% - 9px);opacity:1;
  }
  .js .gauge.on .depth li,
  .js .gauge.on .waterline,
  .js .gauge.on .gauge-note{transition:none}
  .plot-field::after{opacity:0}
  .js .seq[data-scrub] .sheet-lead,
  .js .seq[data-scrub] .bracket-line,
  .js .seq[data-scrub] .bracket-foot,
  .window-rail,.window-span,.area-rail{transform:none !important}
}

/* ═══ the section through a wet floor, made legible ═══
   It was four labelled boxes with nothing inside them: no title, no reading,
   and the bracket parked in a 240px gutter on the far right, disconnected
   from the layers it was supposed to be measuring. It explained nothing.

   Now the diagram performs the sentence. --p is the figure's scroll position
   (0..1, set by the scrub in app.js) and --t is the depth at which the
   drying reaches each layer, so `(--p - --t)` stepped hard through clamp()
   flips one layer at a time as the bracket travels down. The water recedes,
   Wet becomes Dry, and the claim is shown rather than captioned. */

.strata-head{margin-bottom:clamp(20px,2.6vw,38px)}
.strata-head .mid{max-width:40ch}

/* the layers are no longer huge empty bands */
.stratum{
  height:calc(clamp(38px,4.4vw,58px) + var(--i) * clamp(4px,.8vw,11px));
  gap:clamp(10px,1.6vw,22px);overflow:clip}
/* the bracket sat in a 240px gutter, far from what it measured */
.strata-bands{padding-right:clamp(44px,8vw,120px)}

/* --lit steps 0 -> 1 the moment the drying passes this layer.
   DRY IS THE DEFAULT. The scrub only takes over once app.js has proved it is
   running, because a page that depends on JavaScript to stop saying "Wet" is
   a page that lies when the script 404s. */
.stratum{--lit:1}
[data-scrub].live .stratum{--lit:clamp(0,(var(--p,0) - var(--t)) * 60,1)}

/* the water, receding downward out of each layer as it dries */
.wet{
  position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(88,150,190,.30),rgba(88,150,190,.13));
  transform-origin:bottom center;
  transform:scaleY(calc(1 - var(--lit)));
  opacity:calc(1 - var(--lit) * .82);
  transition:transform .5s cubic-bezier(.3,.7,.2,1),opacity .5s ease-out}

.stratum-name{position:relative;z-index:1;flex:none}
.stratum-note{
  position:relative;z-index:1;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--support);
  opacity:calc(.35 + var(--lit) * .65);transition:opacity .5s ease-out}
.stratum-state{
  position:relative;z-index:1;margin-left:auto;flex:none;
  width:5ch;text-align:right;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase}
.stratum-state i{font-style:normal;display:block;grid-area:1/1;
  transition:opacity .45s ease-out}
.stratum-state{display:grid}
.st-wet{color:#7FB4D4;opacity:calc(1 - var(--lit))}
.st-dry{color:var(--accent);opacity:var(--lit)}

/* the layer itself lifts a little once it is dry, so the change registers */
.stratum{transition:background-color .5s ease-out}
.stratum::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(var(--lit));transform-origin:left;
  transition:transform .5s cubic-bezier(.3,.7,.2,1)}

@media (max-width:560px){
  .stratum{gap:8px}
  .stratum-note{display:none}   /* the state still reads; the note would wrap */
}

/* Without JS --p never arrives, so --lit is 0 and every layer would sit Wet
   forever. The page must not depend on the scrub to be truthful: with no JS,
   and under reduced motion, the diagram shows its finished state. */
@media (prefers-reduced-motion:reduce){
  .stratum{--lit:1}
  .wet,.stratum-note,.stratum-state i,.stratum::after{transition:none}
}

/* The two-column rule above was written when the caption came LAST and sat in
   the narrow 30% column. The explanation leads now, so that rule was handing
   the wide column to the text and crushing the diagram into a strip where the
   layer notes wrapped one word per line. The diagram takes the full width and
   the heading reads above it. */
.strata{grid-template-columns:1fr;align-items:stretch}
.stratum{height:calc(clamp(46px,5vw,66px) + var(--i) * clamp(4px,.8vw,12px))}
.stratum-note{white-space:nowrap}

/* polish, from looking at it: the state was running into the right edge, the
   heading sat too far off its own diagram, and the note wrapped four lines in
   a column that now has room for two. */
.stratum{padding-right:clamp(10px,1.4vw,20px)}
.strata{gap:clamp(14px,1.6vw,24px)}
.strata-head{margin-bottom:clamp(6px,.8vw,12px)}
.bracket-note{max-width:46ch}

/* ═══ reveals you can actually see ═══
   Measured: all 20 .seq blocks fire correctly and always did. The mechanism
   was never broken; 26px over .8s is simply below the threshold of being
   noticed by someone scrolling at normal speed, which was my misjudgement
   after it was the direction's. So: further to travel, and headings rise out
   of a mask rather than fading, which is the one that actually reads as
   something happening. */
.js .seq .eyebrow, .js .seq .mid, .js .seq .value,
.js .seq .step-name, .js .seq .svc-name, .js .seq > p,
.js .seq .step-name + p, .js .seq .clock-read, .js .seq .sheet li,
.js .seq .bracket-note,
.js .seq .plate-note .marker{transform:translateY(42px)}
.js .seq.in .eyebrow, .js .seq.in .mid, .js .seq.in .value,
.js .seq.in .step-name, .js .seq.in .svc-name, .js .seq.in > p,
.js .seq.in .step-name + p, .js .seq.in .clock-read,
.js .seq.in .plate-note .marker{
  transition:opacity .78s ease-out calc(var(--i,0) * .13s),
             transform .92s cubic-bezier(.16,.84,.3,1) calc(var(--i,0) * .13s);
}
.js .seq.in .sheet li{
  transition:opacity .66s ease-out calc(.14s + var(--i) * .16s),
             transform .8s cubic-bezier(.16,.84,.3,1) calc(.14s + var(--i) * .16s);
}
/* the section headings are the ones worth staging: each rises out of its own
   clip, so the line arrives rather than appears */
.js .seq .sec-h{
  opacity:1;transform:none;
  clip-path:inset(0 0 105% 0);
  transition:clip-path .95s cubic-bezier(.16,.84,.3,1)}
.js .seq.in .sec-h{clip-path:inset(-25% -10% -25% -10%)}

/* ── the hero headline is a drawn object ──
   It was breaking mid-clause and hanging "The" at the end of two consecutive
   lines. Each sentence is its own span, so a break can only fall between
   them. */
h1 .l{display:inline-block}
@media (min-width:760px){h1 .l{display:block}}
.hero .lede{max-width:46ch}

/* ── the truck, at the foot of the page ── */
.contact-shot{margin:clamp(26px,3vw,44px) 0 0;position:relative;overflow:clip}
.contact-shot img{
  width:100%;height:clamp(200px,26vw,340px);object-fit:cover;display:block;
  transform:scale(calc(1.07 - var(--p,0) * .07));transition:transform .2s linear}
.contact-shot .plate-note{
  position:absolute;left:clamp(12px,1.6vw,22px);bottom:clamp(10px,1.4vw,18px);
  color:var(--head);text-shadow:0 1px 12px rgba(7,12,17,.9)}

@media (prefers-reduced-motion:reduce){
  .js .seq .sec-h{clip-path:none;transition:none}
  .js .seq .eyebrow, .js .seq .mid, .js .seq .value,
  .js .seq .step-name, .js .seq .svc-name, .js .seq > p,
  .js .seq .step-name + p, .js .seq .clock-read, .js .seq .sheet li,
  .js .seq .bracket-note,
  .js .seq .plate-note .marker{transform:none;opacity:1;transition:none}
  .contact-shot img{transform:none;transition:none}
}

/* ═══ four materials, not four identical bands ═══
   Every layer shared one hatch that only coarsened with depth, so a section
   through a floor read as four grey rectangles with names on them. A section
   drawing is legible because each material is DRAWN as itself, and the
   thicknesses are in proportion: a finish floor is a few millimetres, joists
   are most of the depth.

   All of it is gradients on the layer itself. No images, no SVG, no bytes. */

.strata-bands{--joist:rgba(190,205,220,.20);--void:rgba(7,12,17,.55)}

/* proportions first: thin finish, thin subfloor, deep framing and insulation */
.stratum:nth-of-type(1){height:clamp(26px,2.6vw,34px)}
.stratum:nth-of-type(2){height:clamp(34px,3.4vw,46px)}
.stratum:nth-of-type(3){height:clamp(74px,7.4vw,104px)}
.stratum:nth-of-type(4){height:clamp(64px,6.4vw,88px)}

/* 1. SURFACES — a finish floor in section: boards, with their joints */
.stratum:nth-of-type(1){
  background-color:rgba(190,205,220,.13);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 45%),
    repeating-linear-gradient(90deg,transparent 0 clamp(52px,7vw,96px),
      rgba(7,12,17,.5) clamp(52px,7vw,96px) calc(clamp(52px,7vw,96px) + 2px))}

/* 2. SUBFLOOR — sheet goods: strands pressed in two directions */
.stratum:nth-of-type(2){
  background-color:rgba(160,178,196,.085);
  background-image:
    repeating-linear-gradient(17deg,rgba(220,232,244,.11) 0 3px,transparent 3px 13px),
    repeating-linear-gradient(-13deg,rgba(220,232,244,.08) 0 2px,transparent 2px 17px),
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%)}

/* 3. FRAMING — joists on centres, with the air between them. This is the one
      that makes the whole drawing read as a section rather than a chart:
      solid members, voids, and a plate across the top and bottom. */
.stratum:nth-of-type(3){
  background-color:transparent;
  background-image:
    linear-gradient(180deg,var(--joist) 0 3px,transparent 3px),
    linear-gradient(0deg,var(--joist) 0 3px,transparent 3px),
    repeating-linear-gradient(90deg,
      var(--joist) 0 clamp(14px,1.5vw,20px),
      var(--void) clamp(14px,1.5vw,20px) clamp(76px,9vw,132px))}

/* 4. INSULATION — batt: fibrous, soft-edged, no straight lines in it */
.stratum:nth-of-type(4){
  background-color:rgba(150,170,190,.07);
  background-image:
    repeating-radial-gradient(circle at 50% 120%,
      rgba(214,228,242,.10) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(74deg,rgba(214,228,242,.07) 0 2px,transparent 2px 11px),
    repeating-linear-gradient(-74deg,rgba(214,228,242,.07) 0 2px,transparent 2px 11px)}

/* the joints between materials are construction lines, not table borders */
.stratum{border-top-color:rgba(190,205,220,.34)}

@media (max-width:560px){
  .stratum:nth-of-type(3){height:64px}
  .stratum:nth-of-type(4){height:56px}
}

/* The radial pass on the batt drew concentric rings, which read as a target
   rather than as fibre. Crossed strands with a soft mottle behind them, no
   arcs, no centre. */
.stratum:nth-of-type(4){
  background-image:
    repeating-linear-gradient(68deg,rgba(214,228,242,.085) 0 2px,transparent 2px 10px),
    repeating-linear-gradient(-68deg,rgba(214,228,242,.075) 0 2px,transparent 2px 13px),
    repeating-linear-gradient(82deg,rgba(214,228,242,.05) 0 1px,transparent 1px 6px),
    radial-gradient(120% 90% at 30% 0%,rgba(214,228,242,.07),transparent 70%)}

/* ═══ the phone hero ═══
   Three faults in one screen, and the first is mine. The build hid
   .gauge-note under 620px on purpose; I forced it back to visible to close a
   critic gap ("the phone drops the best line"), and it landed directly on the
   eyebrow: the note sat at x216-370, the eyebrow ran x20-370, both at y335.

   That earlier reasoning has also expired. When I made that change the wet
   floor was four empty labelled boxes, so the hero note was the only place
   the thesis appeared at all. The section below now states it properly, in
   materials, with the drying happening as you scroll. The hero does not need
   to carry it twice, and at 390px the gauge is a desktop annotation dropped
   on top of the copy: four labels, an axis and a bracket competing with the
   headline for the same 170px.

   So the gauge is desktop only, and the hero on a phone is what it should
   have been: photograph, one line, one sentence, one button. */
@media (max-width:760px){
  .gauge{display:none}
}

/* And the dead band above the copy. The hero is 88svh with its content
   bottom-aligned, which on a phone left 227px of empty photograph between
   the masthead and the eyebrow while the copy itself ran to the fold. */
@media (max-width:619px){
  .hero{min-height:min(74svh,660px)}
  .hero .lede{font-size:1rem;line-height:1.5}
}

/* the eyebrow was wrapping onto a second line on a phone, which is another
   line of clutter above the headline for no information */
@media (max-width:440px){
  .hero .marker.accent{font-size:.62rem;letter-spacing:.1em}
}