/* home — hero + instrument (from Meridian), extended grids */
.hero{position:relative; min-height:calc(100svh - var(--rail-h)); display:flex; align-items:flex-end; padding:6vh var(--gut) clamp(40px,7vh,84px); overflow:hidden; isolation:isolate}
.hero__plot{position:absolute; inset:0; width:100%; height:100%; z-index:-2; color:var(--sig); opacity:.30}
.hero__vign{position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 90% at 78% 8%, rgba(133,224,255,.10), transparent 58%), linear-gradient(to top, var(--bg) 8%, rgba(8,9,11,.72) 46%, rgba(8,9,11,.30) 100%)}
.hero__inner{width:100%; max-width:var(--wide); margin-inline:auto}
.hero h1{font-size:clamp(3.4rem,11.4vw,10.6rem); font-weight:800; letter-spacing:-.045em; text-wrap:balance; margin-bottom:clamp(22px,3.6vh,40px)}
.hero h1 em{font-style:normal; color:var(--sig)}
.hero__sub{max-width:62ch; font-size:clamp(15px,1.2vw,18px); line-height:1.6; color:var(--txt-2); text-wrap:pretty}
.hero__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:clamp(36px,6vh,72px); padding-top:20px; border-top:1px solid var(--line-struct); font-size:12px; letter-spacing:.06em; color:var(--dim)}
.scrollcue{display:flex; align-items:center; gap:10px; color:var(--txt-2); transition:color .25s}
.scrollcue span{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.scrollcue svg{width:15px; height:15px; animation:nudge 2.4s var(--ease) infinite}
.scrollcue:hover{color:var(--sig)}
@keyframes nudge{0%,72%,100%{transform:none} 84%{transform:translateY(4px)}}

/* instrument */
.inst{display:grid; gap:1px; background:var(--line-struct); grid-template-columns:minmax(0,1fr) minmax(300px,352px); grid-template-areas:"ctl ctl" "plot card"; border:1px solid var(--line-struct); border-radius:var(--radius-frame); overflow:hidden}
.inst__controls{grid-area:ctl; background:var(--bg-2); display:grid; grid-template-columns:auto auto minmax(240px,1fr); gap:clamp(20px,3vw,48px); align-items:start; padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px)}
.ctl__label{display:flex; align-items:baseline; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:13px}
.ctl__hint{color:var(--sig); letter-spacing:.1em; text-transform:none; font-size:12px}
.ctl__out{margin-left:auto; font-size:12px; color:var(--sig); letter-spacing:.04em}
.pills{display:flex; flex-wrap:wrap; gap:6px}
.pill{appearance:none; cursor:pointer; border:1px solid var(--line-struct); background:transparent; color:var(--txt-2); font-family:var(--body); font-size:13px; font-weight:500; padding:12px 16px; border-radius:var(--radius); transition:all .22s var(--ease); white-space:nowrap}
.pills--mono .pill{font-family:var(--mono); letter-spacing:.04em}
.pill:hover{border-color:rgba(133,224,255,.45); color:var(--txt)}
.pill[aria-checked="true"]{background:var(--sig); border-color:var(--sig); color:#04161D; font-weight:600}
.ctl--slider{min-width:0}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent; cursor:ew-resize}
input[type=range]::-webkit-slider-runnable-track{height:2px; border-radius:2px; background:linear-gradient(90deg,var(--sig) var(--fill,20%),rgba(255,255,255,.14) var(--fill,20%))}
input[type=range]::-moz-range-track{height:2px; background:rgba(255,255,255,.14)}
input[type=range]::-moz-range-progress{height:2px; background:var(--sig)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; margin-top:-6.5px; border-radius:50%; background:var(--sig); border:3px solid var(--bg-2); box-shadow:0 0 0 1px var(--sig),0 0 18px rgba(133,224,255,.55)}
input[type=range]::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--sig); border:3px solid var(--bg-2); box-shadow:0 0 0 1px var(--sig)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--sig),0 0 0 5px rgba(133,224,255,.28)}
.ctl__scale{display:flex; justify-content:space-between; font-size:12px; color:var(--dim); letter-spacing:.08em; margin-top:2px}
.inst__plot{grid-area:plot; margin:0; background:var(--bg-2); padding:clamp(16px,2vw,26px)}
.inst__plot svg{width:100%; height:auto}
.inst__plot figcaption{margin-top:14px; padding-top:13px; border-top:1px solid var(--line-struct); font-size:12px; line-height:1.6; color:var(--dim); max-width:78ch}
.inst__plot figcaption .mono{color:var(--txt-2)}
.ax{stroke:rgba(255,255,255,.07); stroke-width:1}
.axlab{fill:var(--dim); font-family:var(--mono); font-size:12px; letter-spacing:.08em}
.axtitle{fill:var(--dim); font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase}
.curve{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.4; transition:stroke .35s,stroke-width .35s}
.curve.is-on{stroke:var(--sig); stroke-width:2.4}
.curvelab{fill:var(--dim); font-family:var(--mono); font-size:12px; transition:fill .35s}
.curvelab.is-on{fill:var(--sig)}
.dutyline{stroke:var(--warn); stroke-width:1.2; stroke-dasharray:4 4}
.dutylab{fill:var(--warn); font-family:var(--mono); font-size:12px}
.tline{stroke:rgba(255,255,255,.26); stroke-width:1; stroke-dasharray:2 4}
.pt{fill:var(--sig); stroke:var(--bg-2); stroke-width:2.5}
.pt-halo{fill:none; stroke:var(--sig); stroke-width:1; opacity:.45}
.overband{fill:rgba(255,122,99,.055)}
.bandedge{stroke:rgba(255,122,99,.42); stroke-width:1; stroke-dasharray:3 5; transition:opacity .3s}
.bandlab{fill:rgba(255,122,99,.8); font-family:var(--mono); font-size:12px; letter-spacing:.08em}
.inst__card{grid-area:card; border:0; border-radius:0}
table.sr{display:none}

/* home grids */
.cells--cat .cell{padding:0; gap:0}
.cells--cat .frame{border:0; border-radius:0; border-bottom:1px solid var(--line-struct)}
.cells--cat .cell__ix{padding:18px clamp(18px,2vw,26px) 0}
.cells--cat h3{padding:0 clamp(18px,2vw,26px); margin-top:10px}
.cells--cat p{padding:0 clamp(18px,2vw,26px); margin-top:10px}
.cells--cat .cell__foot{margin:auto clamp(18px,2vw,26px) 20px}
.lede a{color:var(--sig); border-bottom:1px solid rgba(133,224,255,.35)}
.support{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(20px,3vw,48px); align-items:start}

@media (max-width:1180px){
  .inst{grid-template-columns:1fr; grid-template-areas:"ctl" "plot" "card"}
  .inst__controls{grid-template-columns:1fr}
  .support{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hero h1{font-size:clamp(2.9rem,15vw,5rem)}
}

/* SVG text is user-space: when the 760-unit chart paints narrow, labels fall below the 12px floor.
   Scale the user-space size up to hold >=12px painted at each band. */
@media (max-width:1180px) and (min-width:481px){
  .axlab,.axtitle,.curvelab,.dutylab,.bandlab{font-size:15px}
}

/* R1-01: below 600px the chart cannot hold readable labels — swap it for the static
   rating strip (.inst__mobile, baked in build_home.py). Hidden above 600. */
.inst__mobile{display:none}
@media (max-width:600px){
  .inst__plot{display:none}
  .inst__mobile{display:block; grid-area:plot; background:var(--bg-2); padding:clamp(16px,4.5vw,24px)}
  .inst__mobile .k{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:12px}
  .inst__mobile ol{list-style:none; border-top:1px solid var(--line-struct)}
  .inst__mobile li{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-struct); font-family:var(--mono); font-variant-numeric:tabular-nums}
  .inst__mobile li .c{font-size:13px; letter-spacing:.08em; color:var(--txt)}
  .inst__mobile li .c b{color:var(--sig); font-weight:500}
  .inst__mobile li .p{font-size:15px; color:var(--txt-2)}
  .inst__mobile li .p i{font-style:normal; font-size:12px; color:var(--dim); margin-left:6px}
  .inst__mobile .cap{margin-top:13px; padding-top:12px; border-top:1px solid var(--line-struct); font-size:12px; line-height:1.6; color:var(--dim)}
}

/* ── hero: sectional gate-valve drawing (2026-08-21) ────────────────────────────
   The first screen carried no cue that this is a valve company. This is that cue:
   a section through a shut gate valve, drawn not photographed, in the signal colour.
   Sits ABOVE .hero__vign so the vignette does not wash it out, below .hero__inner so
   the headline always wins.
   NO transform here: the element carries .fade, whose keyframe animates transform to
   none and would silently cancel any centring transform. It is anchored with bottom/
   right instead, which also makes it impossible to clip against the hero foot. */
.hero__valve{position:absolute; z-index:0; pointer-events:none; color:var(--sig);
  right:clamp(4px,2.6vw,60px); bottom:clamp(88px,12vh,150px);
  height:min(66vh,660px); width:auto; aspect-ratio:560/740}
.hero__valve svg{display:block; height:100%; width:100%}
.hero__valve .vs__fill{fill:rgba(133,224,255,.045)}
.hero__valve .vs__lab,.hero__valve .vs__cap{position:absolute; font-family:var(--mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  color:var(--sig); line-height:1.5}
.hero__valve .vs__lab{left:73.9%; transform:translateY(-50%); opacity:.62}
.hero__valve .vs__cap{left:21.1%; top:3.4%; opacity:.62}
.hero__valve .vs__cap b{display:block; font-weight:400}
.hero__valve .vs__cap span{display:block; opacity:.58}

@media (max-width:1180px){
  /* No room for the label column beside the headline — drop the labels and their leaders,
     but keep the drawing FULLY on screen. Hanging it off the edge left a half-valve that
     read as noise rather than as a cue. */
  .hero__valve .vs__lab,.hero__valve .vs__lead{display:none}
  .hero__valve{height:min(50vh,460px); right:6px; opacity:.92}
  .hero__valve .vs__cap{left:8%}
}
@media (max-width:860px){
  /* Narrower than this the hero is all type; a drawing small enough to fit is too small
     to read as a valve. The eyebrow line carries the cue instead. */
  .hero__valve{display:none}
}

/* A2-12: the hero's first sentence carries the claim; the rest qualifies it. One rung up and in
   --txt so a phone reader gets a statement before a paragraph. */
.hero__lead{color:var(--txt); font-weight:500}
@media (max-width:860px){
  .hero__sub{max-width:46ch}
  .hero__lead{display:block; font-size:17px; line-height:1.45; margin-bottom:.7em}
}