/* =========================================================================
   Clean Earth Advisors — drawing-sheet identity system
   Typography follows Brand Strategy v2.0 slide 14: Nimbus Sans / Helvetica-
   style grotesk, Bold display, Regular body, Bold labels with controlled
   tracking. No 300-weight. Colour follows slide 13, with the original dark
   navy retained for dark grounds.
   ========================================================================= */

:root{
  --navy:#17365D;
  --navy-deep:#102844;
  --blue:#365AA3;
  --blue-light:#5477BF;
  --water:#59B8E8;
  --water-text:#1774A4;
  --green:#8CBD4B;
  --ink:#30363D;
  --ink-soft:#5D6B78;
  --fog:#EEF1F3;
  --paper:#F8F8F6;
  --white:#FFFFFF;

  --rule:rgba(23,54,93,.16);
  --rule-fine:rgba(23,54,93,.09);
  --rule-dk:rgba(255,255,255,.20);
  --rule-dk-fine:rgba(255,255,255,.11);

  /* The guide names Nimbus Sans. It is not a webfont, so it is requested from
     the system first, then the Helvetica line, then Arial, which is metrically
     compatible with Helvetica so line breaks hold across platforms. */
  --sans:"Nimbus Sans","Nimbus Sans L","Helvetica Neue",Helvetica,Arial,
         "Liberation Sans",sans-serif;
  /* Utility face for the sheet apparatus: refs, figure numbers, labels. */
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,
         Consolas,monospace;

  --rail:clamp(0px,7vw,104px);
  --edge:clamp(20px,4vw,56px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is not optional here. The width/height attributes on each <img>
   act as presentational hints, so with max-width alone the width shrinks to the
   container while the height stays pinned to the attribute and the picture
   stretches vertically. Every rule below that sets an explicit height is a
   class selector, so it still wins over this. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--water-text);outline-offset:3px}

/* ---------------------------------------------------------- type scale
   Arial has no Medium, so weights stay at 400 and 700 to avoid the browser
   synthesising an intermediate and shifting metrics between platforms. */
h1,h2,h3{margin:0;color:var(--navy);font-weight:700;letter-spacing:-.03em;line-height:1.03}
.d1{font-size:clamp(2.8rem,7vw,5.9rem)}
.d2{font-size:clamp(1.95rem,4.2vw,3.4rem);line-height:1.05}
.d3{font-size:clamp(1.3rem,1.95vw,1.75rem);line-height:1.14;letter-spacing:-.024em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.m{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;line-height:1.5;
  color:var(--water-text);margin:0;
}
.m-q{color:var(--ink-soft)}
.m-dk{color:var(--water)}
.lede{font-size:clamp(1.05rem,1.35vw,1.24rem);line-height:1.5;color:var(--ink-soft)}
.measure{max-width:56ch}
.measure-t{max-width:46ch}

/* ---------------------------------------------------------- sheet frame */
.band{position:relative;padding:0 var(--edge) 0 calc(var(--rail) + var(--edge))}
.band::before{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(var(--rail) + var(--edge) - clamp(14px,2vw,30px));
  border-left:1px solid var(--rule);
}
.band-dk::before{border-left-color:var(--rule-dk-fine)}
@media (max-width:820px){.band::before{display:none}}

.ref{
  position:absolute;left:var(--edge);top:var(--pad-t,60px);
  writing-mode:vertical-rl;font-family:var(--mono);font-size:.64rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);opacity:.7;
}
.band-dk .ref{color:var(--water);opacity:.85}
@media (max-width:820px){.ref{display:none}}

.pt{--pad-t:clamp(56px,7vw,104px);padding-top:var(--pad-t)}
.pb{padding-bottom:clamp(50px,6vw,92px)}
.pt-s{--pad-t:clamp(34px,4vw,56px);padding-top:var(--pad-t)}
.pb-s{padding-bottom:clamp(30px,3.6vw,52px)}
.dark{background:var(--navy);color:var(--white)}
.dark h1,.dark h2,.dark h3{color:var(--white)}
.dark .lede{color:rgba(255,255,255,.78)}
.fogbg{background:var(--fog)}

/* dimension line: hairline with end ticks, drawn on scroll */
.dim{position:relative;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.dim.in{transform:scaleX(1)}
.dim::before,.dim::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--rule)}
.dim::before{left:0}.dim::after{right:0}
@media (prefers-reduced-motion:reduce){.dim{transform:none;transition:none}}

/* ---------------------------------------------------------- header */
.hd{position:sticky;top:0;z-index:60;background:rgba(248,248,246,.93);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--rule)}
.hd-in{display:flex;align-items:center;gap:24px;height:72px;padding:0 var(--edge)}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand img{height:34px;width:auto}
/* The wordmark breaks on an explicit <br> in the markup, matching the two-line
   primary signature in the brand guide. It must never rely on a max-width to
   wrap: `ch` is measured from the "0" glyph, so the same value breaks
   differently across Nimbus Sans, Helvetica and Arial. */
.brand b{font-size:1.02rem;font-weight:700;color:var(--navy);letter-spacing:-.022em;
  line-height:1.06;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(15px,1.8vw,28px)}
.nav a{font-size:.85rem;color:var(--ink);position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--navy);transition:right .24s ease}
.nav a:hover::after{right:0}
.nav a.on{font-weight:700;color:var(--navy)}
.nav a.on::after{right:0}
.nav .cta{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--navy);color:var(--navy);padding:10px 15px;
  transition:background .18s ease,color .18s ease}
.nav .cta::after{display:none}
.nav .cta:hover,.nav .cta.on{background:var(--navy);color:var(--paper)}
.burger{display:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;background:none;border:1px solid var(--rule);color:var(--navy);
  padding:9px 13px;cursor:pointer}
@media (max-width:880px){
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
    position:absolute;top:72px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);padding:22px var(--edge) 26px}
  .burger{display:inline-block}
}

/* ---------------------------------------------------------- buttons */
.btn{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;background:var(--navy);color:var(--paper);padding:15px 24px;
  display:inline-flex;align-items:center;gap:12px;transition:background .18s ease}
.btn i{font-style:normal;transition:transform .22s ease}
.btn:hover{background:var(--blue)}
.btn:hover i{transform:translateX(4px)}
.btn-o{background:none;color:var(--navy);border:1px solid var(--rule);padding:14px 23px}
.btn-o:hover{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.btn-lt{background:var(--paper);color:var(--navy)}
.btn-lt:hover{background:var(--water);color:var(--navy-deep)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(28px,3.4vw,44px)}

.lnk{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--water-text);display:inline-flex;align-items:center;
  gap:10px;border-bottom:1px solid rgba(23,116,164,.35);padding-bottom:4px}
.lnk i{font-style:normal;transition:transform .22s ease}
.lnk:hover{border-bottom-color:var(--water-text)}
.lnk:hover i{transform:translateX(4px)}
.dark .lnk{color:var(--water);border-bottom-color:rgba(89,184,232,.4)}
.dark .lnk:hover{border-bottom-color:var(--water)}

/* ---------------------------------------------------------- load-in */
.rise{opacity:0;transform:translateY(20px);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
.rise:nth-child(1){animation-delay:.05s}
.rise:nth-child(2){animation-delay:.14s}
.rise:nth-child(3){animation-delay:.23s}
.rise:nth-child(4){animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;animation:none}}

/* ---------------------------------------------------------- plates */
.plate{position:relative;background:var(--navy-deep);margin:0}
.plate img{width:100%;height:clamp(300px,44vw,560px);object-fit:cover}
.plate-s img{height:clamp(240px,30vw,400px)}
.plate figcaption{position:absolute;left:var(--edge);bottom:14px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.65)}

/* title block strip */
.tblock{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)}
.tblock > div{padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,32px);border-left:1px solid var(--rule)}
.tblock > div:first-child{border-left:0;padding-left:calc(var(--rail) + var(--edge))}
.tblock > div:last-child{padding-right:var(--edge)}
.tblock .m{margin-bottom:11px}
.tblock p{margin:0;font-size:.93rem;color:var(--ink-soft);line-height:1.5}
@media (max-width:820px){
  .tblock{grid-template-columns:1fr}
  .tblock > div{border-left:0;border-top:1px solid var(--rule);
    padding-left:var(--edge)!important;padding-right:var(--edge)}
  .tblock > div:first-child{border-top:0}
}

/* ============================================================
   THE SECTION DRAWING — five stations on a baseline.
   The gap is the interval BETWEEN Behavior (04) and Evidence (05),
   dimensioned with witness lines, and it sits clear of both labels.
   ============================================================ */
.sect{margin-top:clamp(64px,7vw,104px)}
.sect-track{display:grid;grid-template-columns:repeat(5,1fr);position:relative}

/* baseline: solid to the gap, absent through it, solid again at Evidence */
.sect-track::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,
    var(--rule-dk) 0 66%, transparent 66% 80%, var(--rule-dk) 80% 100%);
}
/* the gap itself, drawn dashed in water blue across the missing interval */
.sect-track::after{
  content:"";position:absolute;top:0;left:66%;width:14%;height:1px;
  background:repeating-linear-gradient(to right,
    var(--water) 0 5px, transparent 5px 10px);
}

.stn{position:relative;padding:34px 22px 0 0}
.stn::after{content:"";position:absolute;top:-5px;left:0;width:1px;height:11px;background:var(--water)}
.stn .n{display:block;font-family:var(--mono);font-size:.63rem;font-weight:500;
  letter-spacing:.22em;color:var(--water);margin-bottom:12px}
.stn .t{display:block;font-size:1.06rem;font-weight:700;color:var(--white);
  letter-spacing:-.02em;margin-bottom:9px}
.stn .d{display:block;font-size:.88rem;color:rgba(255,255,255,.78);line-height:1.5}
.stn.ev::after{background:var(--green);height:15px;top:-7px;width:2px}
.stn.ev .n{color:var(--green)}

/* dimension callout, sitting above the baseline over the gap interval only */
.gapdim{position:absolute;left:66%;width:14%;top:-46px;height:46px;pointer-events:none}
.gapdim .ln{position:absolute;left:0;right:0;top:26px;height:1px;background:var(--water);opacity:.75}
.gapdim .ln::before,.gapdim .ln::after{content:"";position:absolute;top:0;width:1px;height:20px;
  background:var(--water);opacity:.55}          /* witness lines down to the baseline */
.gapdim .ln::before{left:0}
.gapdim .ln::after{right:0}
.gapdim .lbl{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--water)}

.sect-note{margin:clamp(44px,5vw,66px) 0 0;padding-top:24px;border-top:1px solid var(--rule-dk-fine);
  font-size:clamp(1rem,1.25vw,1.14rem);color:rgba(255,255,255,.9);max-width:64ch;line-height:1.5}
.sect-note em{font-style:normal;color:var(--water)}

@media (max-width:900px){
  .sect-track{grid-template-columns:1fr}
  .sect-track::before,.sect-track::after,.gapdim{display:none}
  .stn{padding:0 0 30px 24px;border-left:1px solid var(--rule-dk)}
  .stn::after{top:0;left:-5px;width:9px;height:1px}
  .stn.ev{border-left:1px dashed var(--water)}
  .stn.ev::after{width:15px;height:2px;left:-8px}
}

/* ---------------------------------------------------------- sheet index */
.row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 40px;
  align-items:baseline;gap:clamp(14px,3vw,48px);
  padding:clamp(20px,2.3vw,30px) 0;border-top:1px solid var(--rule);
  transition:padding-left .3s cubic-bezier(.2,.7,.3,1)}
.row:last-of-type{border-bottom:1px solid var(--rule)}
.row .t{font-size:clamp(1.2rem,2.1vw,1.7rem);font-weight:700;color:var(--navy);
  letter-spacing:-.026em;line-height:1.1}
.row .c{font-size:.97rem;color:var(--ink-soft)}
.row .ar{justify-self:end;font-family:var(--mono);color:var(--water-text);
  opacity:0;transform:translateX(-8px);transition:opacity .26s ease,transform .26s ease}
.row:hover{padding-left:clamp(8px,1.4vw,20px)}
.row:hover .t{color:var(--blue)}
.row:hover .ar{opacity:1;transform:none}
@media (max-width:760px){
  .row{grid-template-columns:1fr;gap:8px}
  .row .ar{display:none}
  .row:hover{padding-left:0}
}

/* ---------------------------------------------------------- spec entries */
.spec{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(18px,4vw,64px);padding:clamp(30px,3.6vw,48px) 0;border-top:1px solid var(--rule)}
.spec:last-of-type{border-bottom:1px solid var(--rule)}
.spec .m{margin-bottom:14px}
.spec h2{font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:-.028em}
.spec .claim{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-top:12px}
.spec > div > p{color:var(--ink-soft)}
.spec ul{list-style:none;margin:20px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 28px}
.spec li{font-size:.93rem;color:var(--ink-soft);padding:8px 0 8px 20px;
  border-top:1px solid var(--rule-fine);position:relative}
.spec li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:1px;background:var(--water)}
@media (max-width:820px){.spec{grid-template-columns:1fr;gap:16px}}

/* ---------------------------------------------------------- register */
.reg-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.reg-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);display:block}
.card .imgwrap{overflow:hidden;display:block}
.card img{width:100%;height:clamp(180px,17vw,244px);object-fit:cover;
  filter:saturate(.84);transition:filter .4s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover img{filter:saturate(1);transform:scale(1.02)}
.card .meta{display:block;padding:18px 20px 26px}
.card .m{margin-bottom:9px}
.card h3{font-size:1.02rem;letter-spacing:-.02em;margin-bottom:7px;line-height:1.18}
.card p{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.45}
.card-2 img{height:clamp(220px,26vw,340px)}
@media (max-width:1000px){.reg-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reg-strip,.reg-2{grid-template-columns:1fr}}

/* ---------------------------------------------------------- matrix */
.mx{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0 1px;background:var(--rule);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.mx > div{background:var(--paper);padding:clamp(22px,2.4vw,30px) clamp(18px,2vw,26px)}
.mx .m{margin-bottom:12px}
.mx h3{font-size:1.02rem;letter-spacing:-.02em;margin-bottom:8px}
.mx p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
.dark .mx{background:var(--rule-dk-fine);border-color:var(--rule-dk-fine)}
.dark .mx > div{background:var(--navy)}
.dark .mx p{color:rgba(255,255,255,.78)}
.fogbg .mx > div{background:var(--fog)}

/* stage scale: an ordered progression, drawn as a measured bar */
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:26px}
.scale > div{background:var(--paper);padding:16px 16px 20px;position:relative}
.scale .m{margin-bottom:10px;font-size:.6rem}
.scale .v{font-size:1rem;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.scale > div::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue-light)}
.scale > div:last-child::before{background:var(--green)}
@media (max-width:820px){.scale{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.scale{grid-template-columns:1fr}}

/* ---------------------------------------------------------- two-column */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,76px);align-items:start}
.split-end{align-items:end}
@media (max-width:900px){.split{grid-template-columns:1fr}.split-end{align-items:start}}

.dl{margin:0;border-top:1px solid var(--rule)}
.dl > div{padding:16px 0;border-bottom:1px solid var(--rule)}
.dl dt{margin:0 0 7px}
.dl dd{margin:0;font-size:1rem;color:var(--navy);font-weight:700;line-height:1.45}
.dark .dl{border-top-color:var(--rule-dk-fine)}
.dark .dl > div{border-bottom-color:var(--rule-dk-fine)}
.dark .dl dd{color:var(--white);font-weight:400}
.dark .dl a:hover{color:var(--water)}

.cap{margin:12px 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.6}

/* ---------------------------------------------------------- notice */
.notice{border:1px solid var(--rule);border-left:3px solid var(--blue);
  padding:clamp(24px,2.8vw,34px)}
.notice h2{font-size:1.24rem;margin-bottom:12px;letter-spacing:-.024em}
.notice p{color:var(--ink-soft);font-size:.96rem}

/* ---------------------------------------------------------- form */
.form{border:1px solid var(--rule-dk-fine);padding:clamp(24px,2.8vw,34px);
  background:rgba(255,255,255,.05)}
.form .f{margin-bottom:16px}
.form label{display:block;font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:7px}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--sans);font-size:.97rem;color:var(--ink);
  background:var(--paper);border:1px solid transparent;padding:12px 13px}
.form textarea{min-height:128px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--water);outline-offset:2px}
.form button{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;background:var(--paper);color:var(--navy);border:0;
  padding:15px 24px;cursor:pointer;transition:background .18s ease}
.form button:hover{background:var(--water)}
.form .note{margin:14px 0 0;font-size:.82rem;color:rgba(255,255,255,.72);line-height:1.5}

/* ---------------------------------------------------------- next / footer */
.next{border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:20px 34px;
  padding:clamp(26px,3vw,40px) var(--edge) clamp(26px,3vw,40px) calc(var(--rail) + var(--edge))}
.next p{margin:0;font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:700;color:var(--navy);
  letter-spacing:-.024em}

.ft{background:var(--navy-deep);color:rgba(255,255,255,.62);font-size:.85rem;
  padding:34px var(--edge) 30px calc(var(--rail) + var(--edge))}
.ft .m-q{color:rgba(255,255,255,.68)}
.ft-in{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;justify-content:space-between}
.ft-b{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700}
.ft-b img{height:28px;width:auto}
.ft a:hover{color:var(--water)}

/* ---------------------------------------------------------- form extras */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{border-left:3px solid var(--water);padding:14px 16px;margin-bottom:20px;
  background:rgba(255,255,255,.07)}
.alert .m{color:var(--water);margin-bottom:6px}
.alert p{margin:0;font-size:.9rem;color:rgba(255,255,255,.85);line-height:1.5}
.alert a{color:var(--water);text-decoration:underline;text-underline-offset:2px}

/* footer navigation */
.ft-nav{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 18px}
.ft-nav a{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.68)}
.ft-nav a:hover{color:var(--water)}

/* ---------------------------------------------------------- experience records
   Each record carries its own photograph, so the image sits with the engagement
   it documents rather than in a detached strip. Records with no photograph
   collapse to a single column. */
.rec{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:clamp(20px,3.4vw,54px);align-items:start;
  padding:clamp(30px,3.6vw,48px) 0;border-top:1px solid var(--rule)}
.rec:last-of-type{border-bottom:1px solid var(--rule)}
.rec-nofig{grid-template-columns:1fr}
.rec-fig{margin:0}
.rec-fig img{width:100%;height:clamp(200px,20vw,280px);object-fit:cover;filter:saturate(.9)}
.rec-body .m{margin-bottom:14px}
.rec-body h2{font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:-.028em;margin-bottom:14px}
.rec-body p{color:var(--ink-soft)}
@media (max-width:820px){.rec{grid-template-columns:1fr;gap:18px}}
.reg-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.reg-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reg-3{grid-template-columns:1fr}}
.ft-b > span{white-space:nowrap}

/* ---------------------------------------------------------- SOQ checklist */
.soq{list-style:none;margin:14px 0 0;padding:0}
.soq li{font-size:.95rem;color:var(--ink-soft);line-height:1.5;
  padding:10px 0 10px 22px;border-top:1px solid var(--rule-fine);position:relative}
.soq li:last-child{border-bottom:1px solid var(--rule-fine)}
.soq li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:1px;background:var(--water)}
a.inline{color:var(--water-text);border-bottom:1px solid rgba(23,116,164,.35);
  padding-bottom:1px;font-weight:700}
a.inline:hover{border-bottom-color:var(--water-text)}