/* =====================================================================================================
   KEI site styles: the home page redesign Rory approved on 2026-11-06, for every page (build_site.py writes this
   block as /assets/site.css, then site/site-extra.css after it). The design record is
   build/staged/2026-11-04-home-redesign/MAIN PAGE HISTORY.md.
   Brand: navy #00364B (soft #0A4A63, deep #002432), gold #F4B518, orange #EC7722, red #E61B25,
   ink #16232A, muted #586B75, line #DCE5E8. Archivo (headings, with its width axis) + Source Sans 3.
   ===================================================================================================== */
:root{
  --navy:#00364B;--navy-soft:#0A4A63;--navy-deep:#002432;
  --gold:#F4B518;--gold-hi:#FFC62E;--orange:#EC7722;--red:#E61B25;
  --ink:#16232A;--muted:#586B75;--line:#DCE5E8;--paper:#FFFFFF;--paper-2:#F3F7F8;
  --orange-text:#B4530F;                                  /* orange for small text on light: 5.0:1 on white */
  --measure:64ch;                                         /* inner pages' .prose, .split p, .rows-intro need it */
  --content:1128px;--pad:clamp(20px,4.4vw,56px);
  --ease:cubic-bezier(.165,.84,.44,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --display:"Archivo","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --body:"Source Sans 3","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  /* the large video view: 16:9 picture + the 60px control bar; 132px = 56 above (Close) + 60 bar + 16 below */
  --video-w:min(94vw,calc((100vh - 132px) * 1.7778));
}
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding: anything focused or jumped to stops clear of the fixed header (62 px scrolled), never under it */
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
/* pictures only: a global svg{display:block} would also reach the inner pages' inline icons once this is site.css */
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
.wrap{width:100%;max-width:calc(var(--content) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
@media (max-width:759px){.br-wide{display:none}}   /* a line break for wider screens only */

/* focus: navy on light, gold on dark (a gold ring on white is only 1.8:1) */
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.on-dark :focus-visible,.contact :focus-visible,.topbar :focus-visible,.video-close:focus-visible,.zoom-close:focus-visible{outline-color:var(--gold)}
.skip{position:fixed;left:12px;top:-64px;z-index:200;background:var(--gold);color:var(--navy-deep);padding:11px 16px;
  font:600 15px/1 var(--display);border-radius:2px;text-decoration:none;transition:top .15s ease}
.skip:focus{top:12px}

/* type */
.eyebrow,.kicker{font-family:var(--display);font-weight:600;text-transform:uppercase;color:var(--orange-text);margin:0}
.eyebrow{font-size:13px;line-height:1.3;letter-spacing:.18em;margin-bottom:18px}
.kicker{font-size:12.5px;line-height:1.3;letter-spacing:.16em}
.on-dark .eyebrow,.on-dark .kicker,.contact .eyebrow{color:var(--gold)}
.display{font-family:var(--display);font-weight:760;font-stretch:90%;letter-spacing:-.03em;line-height:.9;word-spacing:.02em}
.h2{font-size:clamp(32px,3.5vw,52px);font-weight:700;line-height:1.04;letter-spacing:-.028em;color:var(--navy)}
.on-dark .h2{color:#fff}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;
  font:600 16px/1.1 var(--display);letter-spacing:.005em;border-radius:2px;border:2px solid transparent;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:background-color .15s ease,transform .15s ease}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-gold:hover{background:var(--gold-hi);transform:translateY(-1px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-soft);transform:translateY(-1px)}
.link-arrow{display:inline-flex;align-items:center;gap:9px;font:600 16px/1.35 var(--display);color:var(--navy);text-decoration:none;padding:4px 0}
.link-arrow > span{border-bottom:2px solid var(--gold);padding-bottom:2px}
.link-arrow svg{width:18px;height:18px;flex:none;transition:transform .2s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.link-arrow.down:hover svg{transform:translateY(3px)}
.link-arrow.out:hover svg{transform:translate(2px,-2px)}
.on-dark .link-arrow,.contact .link-arrow{color:#fff}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}

/* ---------------------------------------------------------------- header */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;padding:20px 0;color:#fff;
  transition:background-color .25s ease,padding .25s ease,box-shadow .25s ease}
.topbar.scrolled{background:var(--navy-deep);padding:10px 0;box-shadow:0 12px 30px -20px rgba(0,0,0,.65)}
/* the row sits on .topbar > .wrap: build_site.header() writes just a header.topbar holding one div.wrap, nothing more */
.topbar > .wrap{display:flex;align-items:center;gap:28px}
.mark{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;flex:none}
.mark img{height:46px;width:auto;transition:height .25s ease}
.scrolled .mark img{height:38px}
.mark-text{display:flex;flex-direction:column;font:600 15px/1.15 var(--display);letter-spacing:.005em}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{position:relative;color:#fff;text-decoration:none;font:500 15px/1 var(--display);letter-spacing:.005em;
  padding:10px 0;white-space:nowrap;transition:color .15s ease}
/* the two-word items arrive as <span>Client</span> <span>Data</span> (build_site.header()); site/site-extra.css
   stacks them on two lines, "Client" above "Data", since the menu has seven items */
.nav a > span{display:inline}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);
  transform-origin:left;transition:transform .2s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.btn-quote{min-height:42px;padding:0 16px;font-size:14.5px;flex:none}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;color:#fff;font:600 14px/1 var(--display);
  letter-spacing:.06em;text-transform:uppercase;padding:11px 14px;border:1.5px solid rgba(255,255,255,.55);border-radius:2px;background:rgba(0,24,34,.45)}
/* the two-line menu icon is drawn here, so the build's plain <summary>Menu</summary> gets it too */
.mnav summary::before{content:"";flex:none;width:18px;height:9px;
  background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:rgba(255,255,255,.12)}
.mnav nav{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(300px,calc(100vw - 2 * var(--pad)));
  background:var(--navy-deep);border:1px solid rgba(255,255,255,.16);border-radius:3px;padding:8px 0;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
.mnav nav a{display:block;color:#fff;text-decoration:none;font:500 17px/1.2 var(--display);padding:13px 20px}
.mnav nav a:hover,.mnav nav a[aria-current="page"]{background:rgba(255,255,255,.08);color:var(--gold)}
.mnav nav a.mnav-quote{background:var(--gold);color:var(--navy-deep);font-weight:600;margin:6px 12px 10px;border-radius:2px}
.mnav nav a.mnav-quote:hover{background:var(--gold-hi);color:var(--navy-deep)}
/* 760-1179 px: Menu takes over the links and the gold button stays beside it, so the Menu does not repeat the quote;
   under 760 px the quote is the Menu's first item */
@media (max-width:1179px){.nav{display:none}.mnav{display:block}.btn-quote{margin-left:auto}}
@media (min-width:760px){.mnav nav a.mnav-quote{display:none}}
@media (max-width:759px){.btn-quote{display:none}.mnav{margin-left:auto}.topbar{padding:14px 0}.mark img{height:40px}.mark-text{font-size:14px}}
/* narrow phones: the logo name, the gap and the Menu button need 356 px; below 400 px tighten them, and below 360 px
   the name is hidden visually (still read out, so the logo link keeps its name). Measured right gutter: 20 px from
   280 to 430 px. */
@media (max-width:400px){.topbar > .wrap{gap:14px}.mark{flex:0 1 auto;min-width:0}.mnav summary{padding:10px 12px;gap:8px}}
@media (max-width:359px){.mark-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* ---------------------------------------------------------------- hero: the claim, the numbers and the clients on one screen */
.hero{position:relative;min-height:clamp(600px,100vh,1440px);min-height:clamp(600px,100svh,1440px);display:flex;flex-direction:column;
  justify-content:flex-end;color:#fff;background:var(--navy-deep);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-3;container-type:size;overflow:hidden}
.hero-still{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform-origin:62% 42%;
  filter:saturate(1.12) contrast(1.04);animation:drift 30s ease-in-out infinite alternate}
/* a gentle drift, enlarged no more than 5% on top of the cover fit */
@keyframes drift{from{transform:scale(1.01)}to{transform:scale(1.05) translate3d(-.6%,-.5%,0)}}
.hero.paused .hero-still,.hero-media:has(.hero-video.playing) .hero-still{animation-play-state:paused}
.hero-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;
  width:max(100vw,177.78vh);height:max(56.25vw,100vh);width:max(100cqw,177.78cqh);height:max(56.25cqw,100cqh);
  transition:opacity .6s ease}
.hero-video.playing{opacity:1;transition:opacity .9s ease}
/* dark where the words and numbers sit (left, and the foot), so the gold label and the white text pass AA over the
   brightest larches at both ends of the drift; the creek and the larches stay vivid on the right */
.hero-scrim{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(180deg,rgba(0,22,32,.74) 0%,rgba(0,22,32,.56) 9%,rgba(0,22,32,0) 22%),
  linear-gradient(0deg,rgba(0,24,34,.96) 0%,rgba(0,24,34,.9) 24%,rgba(0,24,34,.62) 38%,rgba(0,24,34,.2) 54%,rgba(0,24,34,0) 66%),
  radial-gradient(ellipse 64% 74% at 20% 52%,rgba(0,26,38,.86) 0%,rgba(0,26,38,.78) 42%,rgba(0,26,38,.42) 70%,rgba(0,26,38,0) 100%)}
.hero-inner{position:relative;padding-top:112px;padding-bottom:clamp(20px,3.4vh,34px)}
/* the first screen paints at once (the headline is the page's largest paint): no fade, only a short rise that starts
   with the first frame */
.hero .eyebrow,.hero h1,.hero .lede,.hero .cta-row,.rail{animation:rise .9s var(--ease) both}
.hero h1{animation-delay:.05s}.hero .lede{animation-delay:.1s}.hero .cta-row{animation-delay:.15s}.rail{animation-delay:.2s}
@keyframes rise{from{transform:translate3d(0,18px,0)}}
.hero .eyebrow{color:var(--gold);display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,2.2vh,22px)}
.hero .eyebrow::before{content:"";width:34px;height:2px;background:var(--gold);flex:none}
/* sized from the width AND the height, so a short laptop screen still holds the claim, numbers and clients */
.hero h1{font-size:clamp(54px,min(7.7vw,14.4vh),112px);margin:0 0 clamp(14px,2.4vh,22px);text-shadow:0 2px 40px rgba(0,0,0,.28)}
.hero .lede{font-size:clamp(18px,1.55vw,21px);line-height:1.5;color:rgba(255,255,255,.94);max-width:44ch;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero .cta-row{margin-top:clamp(20px,3.4vh,30px)}
.motion-toggle{position:absolute;right:var(--pad);bottom:clamp(20px,3.4vh,34px);width:42px;height:42px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);background:rgba(0,24,34,.25);color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:border-color .15s ease,background-color .15s ease}
.motion-toggle:hover{border-color:#fff;background:rgba(0,24,34,.5)}
.motion-toggle svg{width:16px;height:16px}
.motion-toggle .i-play,.motion-toggle[aria-pressed="true"] .i-pause{display:none}
.motion-toggle[aria-pressed="true"] .i-play{display:block}

/* the proof along the foot of the first screen: what we look after, and who for */
.rail{position:relative;padding-bottom:clamp(18px,3.2vh,32px)}
.rail-row{display:grid;grid-template-columns:minmax(0,.82fr) repeat(5,minmax(0,1fr));gap:22px;align-items:start}
.rail-lab{font:600 12.5px/1.45 var(--display);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.76);padding-top:5px;margin:0;text-wrap:balance}
.stats{list-style:none;margin:0;padding:0;display:contents}
.stat .n{display:block;font-family:var(--display);font-weight:760;font-stretch:90%;font-size:clamp(32px,min(3.1vw,6vh),44px);line-height:1;
  letter-spacing:-.02em;color:var(--gold);font-variant-numeric:tabular-nums}
.stat .l{display:block;margin-top:6px;font-size:15px;line-height:1.35;color:rgba(255,255,255,.86);max-width:21ch;text-wrap:pretty}
.rail-who{margin-top:clamp(12px,2vh,20px)}
/* five equal columns, the same as the five numbers above, so each client name starts under a number */
.who{grid-column:2 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:22px;justify-content:stretch}
.who a{display:block;text-decoration:none;color:#fff;line-height:1.28}
.who .k{display:block;font-size:13px;line-height:1.3;color:rgba(255,255,255,.72);margin-bottom:3px}
.who .nm{font:600 15.5px/1.28 var(--display);letter-spacing:-.003em;color:#fff;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 2px no-repeat;
  transition:background-size .25s var(--ease)}
.who a:hover .nm,.who a:focus-visible .nm{background-size:100% 2px}

.stripe{height:5px;display:flex}
.stripe i{flex:1}
.stripe i:nth-child(1),.rule i:nth-child(1){background:var(--red)}
.stripe i:nth-child(2),.rule i:nth-child(2){background:var(--orange)}
.stripe i:nth-child(3),.rule i:nth-child(3){background:var(--gold)}
.rule{width:74px;height:5px;display:flex}
.rule i{flex:1}

/* ---------------------------------------------------------------- mission statement, and the standard we work to */
.statement{padding:clamp(48px,5vw,72px) 0}
.st-text{font-family:var(--display);font-weight:600;font-size:clamp(27px,3.05vw,44px);line-height:1.14;letter-spacing:-.024em;
  color:var(--muted);text-wrap:balance;max-width:31ch}
.st-text .lead{color:var(--navy)}
.st-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;margin-top:clamp(30px,3.6vw,48px)}
.st-sub{font-size:18.5px;line-height:1.62;color:var(--muted);max-width:46ch}
.creds{list-style:none;margin:0;padding:4px 0 0;display:grid;gap:22px}
.creds li{position:relative;padding-left:52px;font:600 clamp(18px,1.5vw,20.5px)/1.32 var(--display);letter-spacing:-.01em;color:var(--navy);text-wrap:balance}
.creds li::before{content:"";position:absolute;left:0;top:.62em;width:32px;height:4px;background:var(--c)}
.creds li:nth-child(1){--c:var(--red)}.creds li:nth-child(2){--c:var(--orange)}.creds li:nth-child(3){--c:var(--gold)}

/* ---------------------------------------------------------------- full-bleed photo scenes */
.scene{position:relative;display:flex;color:#fff;overflow:hidden;isolation:isolate}
.scene > .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.scene > .scrim{position:absolute;inset:0;z-index:-1}
.js .settle .bg,.js .settle > .bg{transform:scale(1.05);transition:transform 2.6s var(--ease-out)}
.js .settle.in .bg,.js .settle.in > .bg{transform:none}

/* ---------------------------------------------------------------- core services: white water, then a dark screening room */
.services{position:relative;background:var(--navy-deep);color:#fff;padding:clamp(64px,5.6vw,80px) 0 clamp(56px,5.6vw,80px)}
/* 'What we do' lands with the section's own dark top padding under the header, so the heading, the first video, its
   quote button and its live-data link share one laptop screen (the page's 84 px scroll-padding would push them down) */
#services{scroll-margin-top:-78px}
/* NO isolation, z-index or transform on .services or its rows: a stacking context there would trap the playing video
   under the dimmed backdrop. The photo is a positioned layer first in the section; the words and videos are
   positioned after it, so they paint above it without making a stacking context. */
.svc-media{position:absolute;left:0;right:0;top:0;height:clamp(560px,62vw,860px);z-index:0;overflow:hidden}
.svc-head,.svc-rows{position:relative}
.svc-media .bg{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.svc-media .scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,36,50,.34) 0%,rgba(0,36,50,0) 12%,rgba(0,36,50,0) 25%,rgba(0,36,50,.62) 36%,rgba(0,36,50,.88) 52%,var(--navy-deep) 70%),
  linear-gradient(90deg,rgba(0,30,42,.66) 0%,rgba(0,30,42,.52) 28%,rgba(0,30,42,.4) 50%,rgba(0,30,42,.52) 62%,rgba(0,30,42,.58) 100%)}
/* big monitors (1600 px and wider): the white water shows brighter behind the 'Core services' labels, so the scrim is a
   little stronger there (3.71:1 -> 4.91:1 at 2560x1440, 4.42:1 -> 5.38:1 at 1920x1080; nothing changes at 1366) */
@media (min-width:1600px){.svc-media .scrim{background:
  linear-gradient(180deg,rgba(0,36,50,.5) 0%,rgba(0,36,50,.22) 12%,rgba(0,36,50,.12) 25%,rgba(0,36,50,.62) 36%,rgba(0,36,50,.88) 52%,var(--navy-deep) 70%),
  linear-gradient(90deg,rgba(0,30,42,.72) 0%,rgba(0,30,42,.56) 28%,rgba(0,30,42,.5) 50%,rgba(0,30,42,.6) 62%,rgba(0,30,42,.62) 100%)}}
.svc-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.4vw,60px);align-items:end;margin-bottom:clamp(30px,3vw,42px)}
.svc-head h2{font-size:clamp(38px,3.7vw,54px);text-shadow:0 2px 26px rgba(0,16,24,.45)}
.svc-head .lede{font-size:clamp(17.5px,1.38vw,19px);line-height:1.55;color:rgba(255,255,255,.94);max-width:46ch;text-shadow:0 1px 14px rgba(0,16,24,.6)}
.svc-head .eyebrow{text-shadow:0 1px 12px rgba(0,16,24,.7)}
.svc-rows{display:grid;gap:clamp(56px,6.6vw,92px)}
.video{margin:0}
.svc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.4vw,60px);align-items:center}
.video .slot{position:relative;padding-top:56.25%}
/* no ring or border round the picture, only a soft shadow; NEVER a border on .frame (a scrollbar appears inside) */
.video .frame{position:absolute;inset:0;border-radius:3px;overflow:hidden;background:#f4f1ea;box-shadow:0 40px 80px -36px rgba(0,0,0,.9)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* playing: the frame is lifted over a dimmed page, as large as fits */
.video.open .frame{position:fixed;z-index:1001;left:50%;top:calc(56px + (100vh - 72px) / 2);transform:translate(-50%,-50%);
  width:var(--video-w);height:calc(var(--video-w) * .5625 + 60px);border-radius:6px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.video-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(0,24,34,.84);display:none}
.video-close{position:fixed;z-index:1002;top:calc(56px + (100vh - 72px) / 2 - (var(--video-w) * .5625 + 60px) / 2 - 46px);
  right:calc(50% - var(--video-w) / 2);display:none;border:0;border-radius:3px;background:#fff;color:var(--navy);
  font:600 15px/1 var(--display);padding:11px 15px;cursor:pointer}
body.video-open{overflow:hidden}
body.video-open .video-backdrop,body.video-open .video-close{display:block}
.svc figcaption h3{font-size:clamp(28px,2.6vw,38px);font-weight:700;line-height:1.06;letter-spacing:-.022em;color:#fff;margin:12px 0 16px}
.svc figcaption p{color:rgba(255,255,255,.84);max-width:46ch}
.svc .cta-row{margin-top:26px}

/* ---------------------------------------------------------------- software and live data */
.process{background:var(--paper-2);padding-top:clamp(48px,5vw,72px)}
.opener{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5.4vw,84px);align-items:start;margin-bottom:clamp(40px,4.6vw,60px)}
.opener .h2{max-width:20ch}
.opener-text{font-size:18.5px;line-height:1.62;color:var(--muted);max-width:52ch;padding-top:38px}
.opener-text p + p{margin-top:14px}
/* the Processor's claim and its screenshot as close to one laptop screen as they go: a two-line-wide heading, less gap */
#process .opener{margin-bottom:clamp(28px,2.6vw,36px)}
#process .opener .h2{font-size:clamp(30px,3vw,44px);max-width:24ch}
/* the screenshot runs off the left edge of the page; its words sit beside it */
.shot-row{display:grid;align-items:center;container-type:inline-size;
  grid-template-columns:[bleed-start] minmax(var(--pad),1fr) [content-start] repeat(12,minmax(0,calc(var(--content) / 12))) [content-end] minmax(var(--pad),1fr) [bleed-end]}
.shot-row + .shot-row{margin-top:clamp(56px,6vw,84px)}
.shot{grid-column:1 / 10;margin:0;position:relative}
.zoom{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in;position:relative;border-radius:0 3px 3px 0;overflow:hidden;
  box-shadow:0 34px 70px -40px rgba(0,36,50,.6),0 2px 6px rgba(0,36,50,.06)}
.zoom img{width:100%;height:auto;transition:transform .8s var(--ease-out)}
.zoom:hover img{transform:scale(1.012)}
/* the live data page, cropped to its chart so the axis and legend can be read without clicking; Enlarge shows it whole */
.zoom.crop{aspect-ratio:1930 / 902;background:#FBFBFA}
.zoom.crop img{position:absolute;width:112.13%;max-width:none;left:-2.33%;top:-35.48%;height:auto}
.zoom .chip{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;background:rgba(0,36,50,.88);color:#fff;
  font:600 13px/1 var(--display);padding:9px 12px;border-radius:2px;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}
.zoom .chip svg{width:14px;height:14px}
.zoom:hover .chip,.zoom:focus-visible .chip{opacity:1;transform:none}
/* touch screens never hover: show the Enlarge chip all the time */
@media (hover:none){.zoom .chip{opacity:1;transform:none}}
.shot-cap{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding-left:max(var(--pad),(100cqw - var(--content)) / 2);
  font:600 14px/1.3 var(--display);color:var(--navy)}
.shot-cap .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(244,181,24,.28);flex:none}
.shot-cap .soft{font-weight:500;color:var(--muted)}
.shot-copy{grid-column:10 / 14;padding-left:clamp(24px,3.4vw,52px)}
.shot-copy h3{font-size:clamp(26px,2.4vw,34px);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--navy);margin:12px 0 16px}
.shot-copy p{color:var(--muted)}
.shot-copy .btn{margin-top:28px}
.shot-copy .link-arrow{margin-top:20px}

/* you don't have to be in BC */
.anywhere{margin-top:clamp(48px,5vw,72px);min-height:clamp(380px,54vh,450px);align-items:center}
.anywhere > .bg{object-position:50% 55%}
.anywhere > .scrim{background:
  linear-gradient(270deg,rgba(0,28,40,.86) 0%,rgba(0,28,40,.7) 36%,rgba(0,28,40,.22) 64%,rgba(0,28,40,0) 86%),
  linear-gradient(0deg,rgba(0,24,34,.45) 0%,rgba(0,24,34,0) 40%)}
/* 901-1099 px: the 470 px text column starts where the right-anchored scrim has faded, so it gets an even one
   (heading 2.95:1 -> 5.84:1, paragraph 4.44:1 -> 7.21:1 at 901 px; 1100 px and up unchanged) */
@media (min-width:901px) and (max-width:1099px){.anywhere > .scrim{background:linear-gradient(0deg,rgba(0,28,40,.9) 0%,rgba(0,28,40,.8) 55%,rgba(0,28,40,.5) 100%)}}
.anywhere .wrap{display:flex;justify-content:flex-end}
.anywhere .copy{max-width:470px;padding:56px 0}
.anywhere h3{font-size:clamp(32px,3.4vw,50px);font-weight:700;line-height:1.04;letter-spacing:-.026em;color:#fff;margin-bottom:20px}
.anywhere p{color:rgba(255,255,255,.9);font-size:18px}
.anywhere .btn{margin-top:30px}

/* ---------------------------------------------------------------- how we measure flow: the salt explainer (example only) */
.salt-home{background:var(--paper-2);padding:clamp(48px,5vw,72px) 0}
.sh-scene{position:relative;border-radius:3px;overflow:hidden;background:#EAF2F5;box-shadow:0 24px 50px -34px rgba(0,54,75,.55)}
/* the drawing's height is reserved in CSS (the same sums the script uses), so drawing it late moves nothing */
.sh-scene canvas{display:block;width:100%;aspect-ratio:100 / 31;min-height:200px}
.sh-ctrl{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin:18px 0 20px}
.sh-pour{height:50px;padding:0 24px;border-radius:2px;border:0;background:var(--navy);color:#fff;cursor:pointer;
  font:700 17px/1 var(--display);display:inline-flex;align-items:center;gap:10px;transition:background-color .15s ease}
.sh-pour:hover{background:var(--navy-soft)}
/* while a pour runs the button is marked aria-disabled, never disabled: a disabled button would drop keyboard focus */
.sh-pour[aria-disabled="true"]{opacity:.62;cursor:default}
.sh-pour svg{width:20px;height:20px}
.sh-seg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.sh-seg .lab{font:600 12.5px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.sh-seg button{font:600 14px/1 var(--display);padding:10px 14px;min-height:38px;border:1px solid #788A92;border-radius:2px;background:#fff;color:var(--navy);cursor:pointer}
.sh-seg button:hover{border-color:var(--navy)}
.sh-seg button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.sh-slider{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--muted)}
.sh-slider input{width:150px;accent-color:var(--navy)}
.sh-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.sh-leg{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:15px;color:var(--muted);margin-bottom:6px}
.sh-leg span{display:inline-flex;align-items:center;gap:8px}
.sh-leg i{width:16px;height:3px;border-radius:2px;display:inline-block}
.sh-leg i.area{height:11px;border-radius:3px;opacity:.35}
.sh-plot canvas{display:block;width:100%;height:270px}
.sh-note{font-size:14.5px;color:var(--muted);margin-top:10px;text-wrap:pretty}
.sh-work{background:#fff;border-radius:3px;padding:22px 24px;box-shadow:0 24px 50px -40px rgba(0,54,75,.5)}
.sh-work h3{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:10px}
.sh-eq{font:600 15px/1.45 var(--display);color:var(--navy);background:var(--paper-2);border-radius:2px;padding:10px 12px;margin-bottom:8px}
.sh-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--line)}
.sh-row .k{font-weight:600;color:var(--ink);font-size:15px}
.sh-row .d{grid-column:1;font-size:14px;color:var(--muted);line-height:1.4}
.sh-row .v{grid-row:1/span 2;grid-column:2;align-self:center;font:600 17px/1.1 var(--display);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-res{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:14px}
.sh-res .k{font:600 18px/1 var(--display);color:var(--navy)}
.sh-res .v{font:760 34px/1 var(--display);font-stretch:90%;color:var(--navy);font-variant-numeric:tabular-nums}
.sh-res .v small{font-size:16px;color:var(--muted);margin-left:4px;font-weight:600;font-stretch:100%}
.sh-real{margin-top:6px;font-size:14.5px;color:#1F6E45;font-weight:600;min-height:21px}
.sh-real.off{color:#7A5200}
.sh-rate{margin-top:14px}
.sh-rate h4{margin:0 0 4px;font:600 15px/1.3 var(--display);color:var(--navy)}
.sh-rate svg{display:block;max-width:100%;height:auto}
.sh-fly{transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .3s}
/* laptop and wider: scene, controls and pulse on the left, the working-out beside them, all on one screen */
@media (min-width:1000px){
  /* sized so the creek, Pour Salt, the pulse, the flow and the rating-curve dot share one 1366x633 laptop screen;
     the note runs underneath, the full width */
  #salt-app{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);column-gap:clamp(24px,3vw,40px);align-items:start}
  #salt-app .sh-scene{grid-column:1;grid-row:1}
  #salt-app .sh-scene canvas{aspect-ratio:100 / 26;min-height:160px}
  #salt-app .sh-ctrl{grid-column:1;grid-row:2;gap:10px 14px;margin:14px 0 12px}
  #salt-app .sh-grid,#salt-app .sh-grid > div:first-child{display:contents}
  #salt-app .sh-leg{grid-column:1;grid-row:3}
  #salt-app .sh-plot{grid-column:1;grid-row:4}
  #salt-app .sh-plot canvas{height:clamp(180px,36vh,240px)}
  #salt-app .sh-note{grid-column:1 / -1;grid-row:5;margin-top:14px}
  #salt-app .sh-work{grid-column:2;grid-row:1 / span 4;padding:12px 18px}
  #salt-app .sh-work h3{margin-bottom:8px}
  #salt-app .sh-eq{font-size:14px;padding:8px 10px;margin-bottom:4px}
  #salt-app .sh-row{padding:5px 0}
  #salt-app .sh-res{padding-top:10px}
  #salt-app .sh-rate{margin-top:6px}
  #salt-app .sh-rate h4{margin-bottom:2px}
  #salt-app .sh-rate svg{max-height:150px;width:auto}
  #salt-app .sh-rate svg text{font-size:13px}   /* the curve is drawn smaller here, so its labels stay about 10 px */
  #salt-app .sh-seg .lab{letter-spacing:.1em}
  #salt-app .sh-seg button{padding:10px 11px}
  #salt-app .sh-slider input{width:120px}
}

/* ---------------------------------------------------------------- clients: one row each, separated by space, no rules */
.clients{padding:clamp(48px,5vw,72px) 0 clamp(52px,5.4vw,76px)}
.clients .opener{margin-bottom:clamp(36px,4vw,56px)}
.client-list{display:grid;gap:clamp(44px,4.4vw,60px)}
.client-row{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,1.12fr);column-gap:clamp(28px,3.6vw,52px);
  align-items:start;scroll-margin-top:12px}   /* + the page's 84 px scroll-padding: a jumped-to row sits 96 px down */
.c-pic{margin:0;aspect-ratio:4/3;border-radius:2px;overflow:hidden}
.c-pic img{width:100%;height:100%;object-fit:cover}
/* logos sit unboxed on the white page; from 760 px they start on the same left edge as the photos */
.c-pic.c-logo{display:flex;align-items:center;justify-content:center;overflow:visible;border-radius:0}
.c-pic.c-logo img{width:auto;height:100%;max-width:100%;object-fit:contain}
.c-pic.c-logo.llc img{border-radius:2px;clip-path:inset(1px round 2px)}
@media (min-width:760px){
  .c-pic.c-logo{justify-content:flex-start}
  .c-pic.c-logo:not(.llc) img{height:80%}
  /* the live SIFCo file is a white square with the logo in its middle third: drawn a little larger so the logo is as
     tall as the HPCC one, and slid left so the logo starts on the photos' left edge (its white margin is lost on the
     white page). The same live file, no new cropped copy. */
  .c-pic.c-logo.sifco img{height:89%;transform:translateX(-27.7%)}
}
.client-row h3{font-size:clamp(23px,1.95vw,27px);font-weight:700;line-height:1.12;letter-spacing:-.018em;color:var(--navy);margin:10px 0 12px}
.client-row .desc{color:var(--muted)}
.client-row .link-arrow{margin-top:18px}
.c-list{list-style:none;margin:0;padding:6px 0 0;display:grid;gap:10px}
.c-list li{position:relative;padding-left:24px;font-size:16.5px;line-height:1.48;color:var(--ink);text-wrap:pretty}
.c-list li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:3px;background:var(--gold)}

/* ---------------------------------------------------------------- team: as live, two by two, each photo full width above
   the words (4:3, the live crops) */
.team{background:var(--paper-2);padding:clamp(48px,5vw,72px) 0}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,4.6vw,60px) clamp(28px,3.6vw,48px);align-items:start}
.person{margin:0}
.person figure{margin:0 0 20px;aspect-ratio:4/3;border-radius:2px;overflow:hidden;background:#DCE5E8}
.person img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.person:hover img{transform:scale(1.03)}
.person h3{font-size:clamp(20px,1.6vw,22px);font-weight:700;line-height:1.2;letter-spacing:-.012em;color:var(--navy);padding-top:2px}
.person .role{margin:8px 0 14px}
.person .bio{font-size:16.5px;line-height:1.6;color:#33454E}

/* ---------------------------------------------------------------- footer: built around the tagline */
.contact{position:relative;color:#fff;background:var(--navy-deep);overflow:hidden;isolation:isolate}
.contact > .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;z-index:-2}
.contact > .scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(0,36,50,.42) 0%,rgba(0,36,50,.3) 32%,rgba(0,30,42,.78) 70%,var(--navy-deep) 100%),
  linear-gradient(90deg,rgba(0,28,40,.62) 0%,rgba(0,28,40,.22) 55%,rgba(0,28,40,0) 80%)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:end;
  padding-top:clamp(80px,8.8vw,120px)}
.foot-lead .rule{margin-bottom:28px}
.foot-lead h2{font-size:clamp(54px,7.7vw,112px);color:#fff;margin-bottom:26px;max-width:12ch;text-shadow:0 2px 40px rgba(0,0,0,.3)}
.foot-lead p{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:rgba(255,255,255,.9);max-width:40ch}
.foot-lead .cta-row{margin-top:32px}
.foot-card{background:rgba(0,24,34,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:3px;padding:clamp(24px,2.6vw,34px)}
.foot-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-brand img{height:52px;width:auto;flex:none}
.foot-name{font:600 19px/1.2 var(--display);color:#fff}
.foot-card .eyebrow{margin-bottom:14px}
.clines{display:grid;gap:12px;margin-bottom:24px}
.clines a,.clines span.cl{color:#fff;text-decoration:none;font-size:18px;display:flex;gap:14px;align-items:baseline}
.clines a:hover{color:var(--gold)}
.clines .k{font:600 11.5px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);min-width:62px;flex:none}
.social{display:flex;gap:20px}
.social a{color:rgba(255,255,255,.82);text-decoration:none;font-size:15.5px;border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:2px}
.social a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.legal{margin-top:clamp(48px,6vw,80px);border-top:1px solid rgba(255,255,255,.14);padding-top:22px;padding-bottom:30px;
  color:rgba(255,255,255,.66);font-size:14.5px}

/* screenshot enlarger */
.zoom-dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;margin:0;overflow:hidden}
.zoom-dialog::backdrop{background:rgba(0,24,34,.88)}
.zoom-dialog[open]{display:grid;place-items:center}
.zoom-dialog img{max-width:94vw;max-height:calc(100vh - 120px);width:auto;height:auto;border-radius:4px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.zoom-close{position:fixed;top:18px;right:20px;border:0;border-radius:3px;background:#fff;color:var(--navy);font:600 15px/1 var(--display);padding:11px 15px;cursor:pointer}
/* while a video or a screenshot is open large, the fixed header is hidden: it showed through the dimmed page under the
   Close button, and it leaves the tab order with it */
body.video-open .topbar,body:has(.zoom-dialog[open]) .topbar{visibility:hidden}

/* ---------------------------------------------------------------- reveals (once, on entering the screen) */
.js [data-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1100px){
  .who{grid-template-columns:repeat(3,auto);row-gap:14px;justify-content:start;column-gap:34px}
}
@media (max-width:999px){
  .rail-row{grid-template-columns:repeat(5,minmax(0,1fr))}
  .rail-row > .rail-lab{grid-column:1 / -1;padding-top:0}
  .who{grid-column:1 / -1}
}
/* small laptops and iPad landscape: the client rows go to two columns, the list under the words */
@media (max-width:1179px){
  .client-row{grid-template-columns:minmax(0,240px) minmax(0,1fr);row-gap:22px}
  .c-list{grid-column:2}
}
@media (max-width:900px){
  .svc,.opener,.st-foot,.foot-grid,.svc-head{grid-template-columns:minmax(0,1fr)}
  .svc{gap:26px}
  .svc-head{gap:20px}
  .opener{gap:18px}
  .opener-text{padding-top:0}
  .shot{grid-column:1 / -1}
  .zoom{border-radius:0}
  .shot-copy{grid-column:content-start / content-end;padding-left:0;padding-top:28px}
  .anywhere .wrap{justify-content:flex-start}
  .anywhere > .scrim{background:linear-gradient(0deg,rgba(0,28,40,.9) 0%,rgba(0,28,40,.8) 55%,rgba(0,28,40,.5) 100%)}
  /* the picture runs wider than the band, anchored right, so the signed post stays out of frame behind the words */
  .anywhere > .bg{left:auto;right:0;width:170%;max-width:none;object-position:50% 50%}
  .foot-grid{align-items:start}
}
/* tablets held upright (744-834 px wide): the words run most of the width, over the brightest larches, so the
   picture is dimmed more evenly (gold label 5.9:1 or better, tested at five points of the drift) */
@media (min-width:760px) and (max-width:999px) and (orientation:portrait){
  .hero-scrim{background:linear-gradient(180deg,rgba(0,22,32,.8) 0%,rgba(0,22,32,.8) 50%,rgba(0,24,34,.88) 72%,rgba(0,24,34,.96) 100%)}
}
/* phones held sideways (760 px and wider, 500 px tall or less): the hero is taller than the screen, so the label sits
   high over the brightest larches, where the desktop scrim is thin (gold label 3.39:1 at 812x375). They get the
   phones' even dimming instead: gold label 5.5:1 or better from 760x400 to 1024x500 (5.86:1 at 812x375), five points
   of the drift (_fix2/hero_contrast_sizes.py) */
@media (min-width:760px) and (max-height:500px) and (orientation:landscape){
  .hero-scrim{background:linear-gradient(180deg,rgba(0,24,34,.8) 0%,rgba(0,24,34,.74) 14%,rgba(0,24,34,.72) 30%,rgba(0,24,34,.76) 60%,rgba(0,24,34,.94) 100%)}
}
@media (max-width:759px){
  body{font-size:17px}
  .hero{min-height:0}
  /* the words run the full width of a phone, so the whole picture is dimmed evenly behind them */
  .hero-scrim{background:linear-gradient(180deg,rgba(0,24,34,.8) 0%,rgba(0,24,34,.74) 14%,rgba(0,24,34,.72) 30%,rgba(0,24,34,.76) 60%,rgba(0,24,34,.94) 100%)}
  .hero-inner{padding-top:104px;padding-bottom:28px}
  .hero .eyebrow{font-size:11.5px;letter-spacing:.11em}
  .hero .eyebrow::before{display:none}
  .hero h1{font-size:clamp(46px,16vw,64px)}
  .hero .cta-row{flex-direction:column;align-items:stretch;gap:12px}
  .hero .cta-row .btn{width:100%}
  .hero .cta-row .link-arrow{align-self:flex-start}
  .motion-toggle{bottom:26px}
  .rail{padding-bottom:30px}
  .rail-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
  .stat:first-child{grid-column:1 / -1}
  .stat:first-child .n{font-size:52px}
  .rail-who{margin-top:28px}
  .who{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
  .who li:nth-child(3),.who li:nth-child(4),.who li:nth-child(5){grid-column:1 / -1}
  .services{padding-top:80px}
  .svc-media{height:640px}
  .svc-media .scrim{background:linear-gradient(180deg,rgba(0,30,42,.6) 0%,rgba(0,30,42,.72) 14%,rgba(0,30,42,.76) 56%,var(--navy-deep) 88%)}
  .svc .cta-row,.anywhere .cta-row{flex-direction:column;align-items:stretch}
  .svc .cta-row .btn{width:100%}
  .client-row{grid-template-columns:minmax(0,1fr)}
  .c-list{grid-column:1}
  .c-pic{aspect-ratio:16/9}
  .client-row.has-logo{grid-template-columns:96px minmax(0,1fr);column-gap:18px;row-gap:6px}
  .client-row.has-logo .c-pic{aspect-ratio:1/1;grid-row:1 / span 2;align-self:center}
  .client-row.has-logo .c-main{display:contents}
  .client-row.has-logo .kicker{grid-column:2;align-self:end}
  .client-row.has-logo h3{grid-column:2;align-self:start;margin-bottom:0}
  .client-row.has-logo .desc{grid-column:1 / -1;margin-top:14px}
  .client-row.has-logo .link-arrow{grid-column:1 / -1;justify-self:start}
  .client-row.has-logo .c-list{grid-column:1 / -1;margin-top:16px}
  .c-pic.c-logo img{max-width:100%;max-height:100%}
  .people{grid-template-columns:minmax(0,1fr);gap:36px}
  .sh-rate svg text{font-size:14px}
  /* the enlarged screenshot opens at a readable size and pans sideways */
  .zoom-dialog[open]{overflow:auto;place-items:start}
  .zoom-dialog img{max-width:none;max-height:none;width:240vw;margin-top:64px}
  .sh-seg .lab{flex-basis:100%;margin-bottom:2px}
  .sh-seg button{flex:1}
  .sh-slider{width:100%}
  .sh-slider input{flex:1;width:auto}
  .clines a,.clines span.cl{flex-direction:column;gap:4px}
  .foot-lead .cta-row{flex-direction:column;align-items:stretch}
  .contact > .scrim{background:linear-gradient(180deg,rgba(0,36,50,.6) 0%,rgba(0,36,50,.68) 35%,rgba(0,30,42,.86) 65%,var(--navy-deep) 100%)}
  .foot-lead .cta-row .link-arrow{align-self:flex-start}
}
@media (max-width:420px){
  .mark-text{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-still{animation:none}
  .hero .eyebrow,.hero h1,.hero .lede,.hero .cta-row,.rail{animation:none}
  .hero-video,.motion-toggle{display:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .settle .bg,.js .settle > .bg{transform:none;transition:none}
  .sh-fly{transition:none}
  *{transition-duration:.01ms!important}
}
@media print{
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .topbar{position:absolute}
}

/* ---------- inner pages (added to the home page's styles) ---------- */
.topbar.solid{position:relative;background:var(--navy-deep)}
.nav a[aria-current="page"]{opacity:1;border-bottom-color:var(--gold)}
.page-head{background:var(--navy-deep);color:#fff;padding:clamp(28px,4vw,48px) 0 clamp(36px,5vw,58px)}
.page-head h1{font-size:clamp(32px,5vw,52px);font-weight:700;margin-bottom:12px;max-width:22ch}
.page-head .lede{color:rgba(255,255,255,.86);max-width:60ch;font-size:clamp(16px,1.8vw,19px)}
.section{padding:clamp(48px,7vw,84px) 0}
.section.alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prose{max-width:var(--measure)}
.prose p{color:var(--muted);margin-bottom:14px}
.prose .intro{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink)}
.prose h2,.split h2,.section > .wrap > h2{font-size:clamp(24px,3.4vw,34px);font-weight:700;color:var(--navy);margin:0 0 14px}
.prose a,.split p a{color:var(--navy);font-weight:600}
.split{display:grid;gap:clamp(24px,5vw,56px);grid-template-columns:1fr;align-items:center}
.split + .split{margin-top:clamp(44px,6vw,72px)}
@media (min-width:880px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split.flip figure{order:2}
}
.split figure{margin:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper-2);max-width:100%;aspect-ratio:3/2}
.split figure img{width:100%;height:100%;object-fit:cover}
.split figure.chart{background:#fff}
.split figure.chart img{object-fit:contain}
.split p{color:var(--muted);margin-bottom:16px;max-width:var(--measure)}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:#fff}
.tiles{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .12s ease,transform .12s ease}
a.tile:hover{border-color:var(--navy);transform:translateY(-2px)}
a.tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tile figure{margin:0;aspect-ratio:16/10;background:var(--paper-2);border-bottom:1px solid var(--line);max-width:100%}
.tile figure img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tile .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.tile h3{font-size:18px;font-weight:600;color:var(--navy)}
.tile p{color:var(--muted);font-size:15.5px}
.tile .go{margin-top:auto;padding-top:6px;font-family:"Archivo",sans-serif;font-weight:600;font-size:14px;color:var(--orange)}
.tile.soon .go{color:var(--muted)}
.doc-list{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid var(--line);max-width:760px}
.doc-list li{border-bottom:1px solid var(--line)}
.doc-list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 6px;text-decoration:none;color:var(--navy);font-weight:600}
.doc-list a:hover{background:var(--paper-2)}
.doc-list .meta{color:var(--muted);font-weight:400;font-size:14px;white-space:nowrap}
.clients-list{display:grid;gap:clamp(40px,5vw,60px);grid-template-columns:1fr}
.client{display:grid;grid-template-columns:320px minmax(0,1fr);gap:clamp(24px,3.5vw,48px);align-items:center}
.client .logo{width:320px;height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px}
.client .logo img{max-width:100%;max-height:100%;object-fit:contain}
.client h2{font-size:clamp(21px,2.4vw,26px);font-weight:700;color:var(--navy);margin-bottom:10px}
.client p{color:var(--muted);margin-bottom:18px;max-width:none}
@media (max-width:760px){.client{grid-template-columns:1fr}.client .logo{width:240px;height:240px}}
div.tile .go{color:var(--muted)}

/* ---------- rows (picture left, text and button right) and report covers: City of Nelson public page ---------- */
.rows-intro{color:var(--muted);max-width:var(--measure);margin:0 0 26px;font-size:clamp(17px,1.8vw,19px)}
.rows{display:grid;gap:clamp(36px,5vw,56px)}
.row{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(24px,3.5vw,48px);align-items:center}
.row figure{margin:0;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--paper)}
.row figure img{width:100%;height:100%;object-fit:cover}
.row figure.chart img{object-fit:contain;object-position:center}
.row h3{font-size:clamp(21px,2.4vw,26px);font-weight:700;color:var(--navy);margin-bottom:10px}
.row p{color:var(--muted);margin-bottom:18px}
.row p.how{font-size:15.5px;color:var(--ink);margin-top:-6px}
.row p.how b{font-family:"Archivo",system-ui,sans-serif;color:var(--navy)}
.row .soon{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin:0}
@media (max-width:760px){.row{grid-template-columns:1fr}}
/* Hydro Processor page (2026-10-12): a software screen needs the full width, so the picture sits above its text */
.rows.shots .row{grid-template-columns:1fr;gap:22px}
.rows.shots .row figure{aspect-ratio:1400/788;border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,36,50,.10)}
/* its text runs the full width of the picture, and the top of the page is short (Rory, 2026-10-12: "make
   the top section just a bit more condensed. You have to scroll down before you see anything") */
.page-head:has(~ .hp-top){padding:clamp(16px,2.2vw,24px) 0 clamp(18px,2.4vw,26px)}
.page-head:has(~ .hp-top) h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:6px;max-width:none}
.page-head:has(~ .hp-top) .lede{max-width:none;font-size:clamp(16px,1.6vw,17.5px)}
.section.hp-top{padding-top:clamp(18px,2.4vw,28px)}
.hp-top .notice{padding:12px 18px;margin-bottom:clamp(16px,2vw,22px)}
.covers{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.covers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.covers{grid-template-columns:repeat(5,minmax(0,1fr))}}
.cover{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
.cover img{width:100%;height:auto;border-radius:2px;box-shadow:0 0 0 1px var(--line),0 18px 34px -22px rgba(0,54,75,.6);margin-bottom:10px;transition:transform .12s ease}
a.cover:hover img{transform:translateY(-4px)}
a.cover:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.cover .yr{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:19px;color:var(--navy)}
.cover .go{font-family:"Archivo",system-ui,sans-serif;font-weight:600;font-size:14px;color:var(--orange)}
.cover .sz{color:var(--muted);font-size:13.5px}
.covers-note{color:var(--muted);font-size:15.5px;margin-top:22px}
.covers-note a{color:var(--navy);font-weight:600}
.notice{border-left:4px solid var(--orange);background:var(--paper-2);border-radius:0 3px 3px 0;padding:16px 20px;margin:0 0 clamp(30px,4vw,44px);color:var(--ink);font-size:16.5px}
.notice strong{font-family:"Archivo",system-ui,sans-serif;color:var(--navy)}
.contact-cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:34px}
.contact-card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:3px;padding:22px}
.contact-card .k{font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600}
.contact-card a,.contact-card span{font-size:19px;font-weight:600;color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
.contact-card a:hover{color:var(--orange)}
.post-list article{border-bottom:1px solid var(--line);padding:24px 0;max-width:var(--measure)}
.post-list article:first-child{padding-top:0}
.post-list h2{font-size:clamp(22px,3vw,28px);margin-bottom:10px}
.post-list h2 a{color:var(--navy);text-decoration:none}
.post-list h2 a:hover{color:var(--orange)}
.post-list p{color:var(--muted);margin-bottom:10px}
.post-meta{font-family:"Archivo",sans-serif;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:8px}
.more{font-family:"Archivo",sans-serif;font-weight:600;color:var(--navy)}
.page-head .eyebrow{color:var(--gold)}
.foot-links a{color:rgba(255,255,255,.75);text-decoration:none}
.foot-links a:hover{color:var(--gold)}

/* ---------- phone menu (the top-bar links are hidden below 760px) ---------- */
.mnav{display:none;position:relative}
.mnav summary{
  list-style:none;cursor:pointer;color:#fff;font-family:"Archivo",sans-serif;font-weight:600;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  border:1.5px solid rgba(255,255,255,.6);border-radius:2px;padding:8px 14px;
}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.mnav[open] summary{background:rgba(255,255,255,.12)}
.mnav nav{
  position:absolute;right:0;top:calc(100% + 10px);z-index:20;min-width:220px;
  background:var(--navy-deep);border:1px solid rgba(255,255,255,.18);border-radius:3px;
  padding:8px 0;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
}
.mnav nav a{display:block;color:#fff;text-decoration:none;font-family:"Archivo",sans-serif;font-weight:500;font-size:16px;padding:12px 20px}
.mnav nav a:hover,.mnav nav a[aria-current="page"]{background:rgba(255,255,255,.08);color:var(--gold)}
@media (max-width:760px){.mnav{display:block}}

/* ---------- "Get a budget quote" and the new Services sections (board, 2026-09-28) ---------- */
.topbar .nav{margin-left:auto}
.topbar .btn-quote{padding:9px 16px;font-size:14px;white-space:nowrap;flex:none}
/* the menu's two-word items on two lines, "Client" above "Data" (Rory, 2026-10-28: "this top bar is getting a little
   cramped"): one-word items sit in the middle, and every underline lines up under the second line */
.topbar .nav{align-items:stretch}
/* seven items since Meteorological Data went in (2026-11-06): a little less space between them keeps the logo clear */
.topbar .nav{gap:16px}
.topbar .mark{margin-right:8px}
.topbar .nav a{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;line-height:1.12}
/* 760-1179 px: the desktop nav and the quote button don't both fit, so the Menu takes over the nav
   and the gold button stays in view (review, 2026-09-28). Below 760 px the quote is the Menu's first item. */
@media (max-width:1179px){.topbar .nav{display:none}.mnav{display:block}.topbar .btn-quote{margin-left:auto}}
@media (max-width:759px){.topbar .btn-quote{display:none}}
.mnav nav a.mnav-quote{background:var(--gold);color:var(--navy-deep);font-weight:600;margin:4px 12px 8px;border-radius:2px}   /* a filled button, not a second gold link */
.mnav nav a.mnav-quote:hover{background:#ffc62e;color:var(--navy-deep)}
.prose ul{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose li{position:relative;padding-left:26px;color:var(--muted)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--orange)}
.minor a{color:var(--navy);font-weight:600}
.minor.grants{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}   /* four programs sit 2 x 2 */
.minor.grants p + p{margin-top:10px}
.clines a{overflow-wrap:anywhere}   /* the footer email line wrapped off the page at 320 px */

/* ---------- grants page ---------- */
.page-head:has(~ .grants-top) .lede{max-width:none}
.grants-intro{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink);margin-bottom:22px}
.grants-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.grants-checked{font-family:"Archivo",system-ui,sans-serif;font-weight:600;color:var(--navy);margin:0}
.grants-checked.stale{color:var(--red)}
.grants-ai{margin-top:26px;border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:3px;background:var(--paper-2);padding:20px 24px}
.grants-ai h2{font-family:"Archivo",system-ui,sans-serif;font-size:18px;font-weight:700;color:var(--navy);margin:0 0 6px}
.grants-ai p{color:var(--muted);margin:0}
.grant-group + .grant-group{margin-top:clamp(36px,5vw,52px)}
.grant-group[hidden]{display:none}
.grant-group-title{font-family:"Archivo",system-ui,sans-serif;font-size:clamp(22px,2.6vw,28px);font-weight:700;color:var(--navy);margin:0 0 18px}
.grant-list{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:900px){.grant-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grant{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:3px;padding:24px;display:flex;flex-direction:column}
.grant-logo{height:48px;margin-bottom:16px;display:flex;align-items:center;align-self:flex-start}
.grant-logo img{max-height:48px;max-width:200px;width:auto;height:auto}
.grant-logo.dark{background:var(--navy-deep);border-radius:3px;padding:0 14px}
.grant-logo.dark img{max-height:28px;max-width:170px}
.grant.closed .grant-logo{opacity:.5}
.grant-status{align-self:flex-start;font-family:"Archivo",system-ui,sans-serif;font-size:13.5px;font-weight:700;background:var(--navy);color:#fff;border-radius:999px;padding:6px 13px;margin-bottom:14px}
.grant.soon .grant-status{background:var(--orange)}
.grant-advice{border-top-color:var(--navy)}
.grant-advice .grant-status{background:var(--paper-2);color:var(--navy);border:1px solid var(--line)}
.grant.closed{border-top-color:var(--line)}
.grant.closed .grant-status{background:#6b7780}
.grant.closed h3,.grant.closed dl,.grant.closed .funder{opacity:.55}
.grant h3{font-size:21px;font-weight:700;color:var(--navy);margin:0 0 4px;line-height:1.2}
.grant .funder{color:var(--muted);font-size:15.5px}
.grant dl{margin:16px 0 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.grant dt{font-family:"Archivo",system-ui,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.grant dd{margin:3px 0 0;color:var(--muted);font-size:16px}
.grant a{color:var(--navy);font-weight:600}
/* the monthly report list on the City's drinking water page (2026-10-21) */
.report-list{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.report-list li{border-bottom:1px solid var(--line)}
.report-list a{display:grid;grid-template-columns:9.5em 14em 1fr;gap:4px 18px;align-items:center;padding:12px 6px;text-decoration:none;color:var(--ink)}
.report-list a:hover,.report-list a:focus-visible{background:var(--paper-2)}
.report-list .rl-month{font-weight:700}
.report-list .rl-kind{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.report-list .rl-kind svg{width:20px;height:20px;flex:none}
.report-list .rl-web{color:var(--navy)}
.report-list .rl-go{font-size:14.5px;color:var(--muted);white-space:nowrap;justify-self:end}
.report-list a:hover .rl-go,.report-list a:focus-visible .rl-go{color:var(--navy);text-decoration:underline}
@media (max-width:620px){.report-list a{grid-template-columns:1fr auto}.report-list .rl-kind{grid-column:1/2}.report-list .rl-go{grid-row:1/3;grid-column:2/3;align-self:center}}
/* pictures of the monthly report beside the drinking water reports (2026-10-21) */
.row .shot-stack{display:grid;gap:22px;align-content:start}
.row .shot-stack figure{aspect-ratio:auto;overflow:visible;background:none;margin:0}
.row .shot-stack a{display:block;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper);box-shadow:0 14px 34px rgba(0,36,50,.10);transition:transform .12s ease}
.row .shot-stack a:hover,.row .shot-stack a:focus-visible{transform:translateY(-3px)}
.row .shot-stack img{display:block;width:100%;height:auto;object-fit:initial}
.row .shot-stack figcaption{margin-top:8px;font-size:14px;color:var(--muted)}

/* ---------- Internal Tools sign-in (Rory, 2026-10-28: "look a little bit nicer ... photos"): a card per person with
   the team photo the home page shows, name, role and a Sign in button ---------- */
.signin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:22px;max-width:980px;margin:26px 0 8px}
.signin-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.signin-card figure{margin:0;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.signin-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.signin-card .stripe{height:5px}
.signin-body{display:flex;flex-direction:column;gap:3px;padding:16px 20px 20px;flex:1}
.signin-name{font-family:"Archivo",sans-serif;font-weight:700;font-size:20px;line-height:1.2;color:var(--navy)}
.signin-role{font-size:15.5px;color:var(--muted)}
.signin-go{margin-top:auto;padding-top:16px;align-self:flex-start}
.signin-go span{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;font-family:"Archivo",sans-serif;
  font-weight:600;font-size:14.5px;padding:10px 16px;border-radius:2px;transition:background .16s ease}
.signin-go svg{width:16px;height:16px;transition:transform .16s ease}
.signin-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,36,50,.45);border-color:var(--navy-soft)}
.signin-card:hover img{transform:scale(1.04)}
.signin-card:hover .signin-go span{background:var(--navy-soft)}
.signin-card:hover .signin-go svg{transform:translateX(3px)}
.signin-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.signin-help{display:flex;gap:12px;align-items:flex-start;max-width:980px;margin-top:22px;padding:16px 20px;
  background:var(--paper-2);border-left:4px solid var(--gold);border-radius:2px;color:var(--muted)}
.signin-help svg{width:22px;height:22px;flex:none;color:var(--navy);margin-top:1px}
.signin-help p{margin:0}
.signin-help b{color:var(--ink)}
@media (max-width:560px){
  .signin-card{flex-direction:row;align-items:stretch}
  /* the photo fills the side of the card instead of setting its height (a portrait photo made one card taller) */
  .signin-card figure{width:112px;flex:none;aspect-ratio:auto;position:relative;min-height:120px}
  .signin-card img{position:absolute;inset:0}
  .signin-card .stripe{display:none}
  .signin-body{padding:14px 16px}
  .signin-name{font-size:18px}
  .signin-go{padding-top:10px}
}
@media (prefers-reduced-motion:reduce){.signin-card,.signin-card img,.signin-go span,.signin-go svg{transition:none}}

/* ---------- the staff pages' tools as picture cards (Rory, 2026-10-28: "show an image of the budget tracker ...
   so it's just not so bland", then "Can you just take screenshots of each tool?"): each tool's own screenshot
   ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:24px;margin:6px 0 8px}
.tool-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.tool-card figure{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:#002432}
.tool-card figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .5s ease}
.tool-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.88);
  background:radial-gradient(120% 90% at 20% 0%,#0A4A63 0%,#00364B 45%,#002432 100%)}
.tool-lock svg{width:54px;height:54px}
.tool-card .stripe{height:5px}
.tool-body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.tool-body h3{margin:0;font-family:"Archivo",sans-serif;font-weight:700;font-size:20px;line-height:1.2;color:var(--navy)}
.tool-body p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5}
.tool-where{font-size:13.5px;line-height:1.45;color:var(--muted);display:flex;align-items:flex-start;gap:7px}
.tool-where::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;margin-top:.42em}
.tool-go{margin-top:auto;padding-top:14px;align-self:flex-start}
.tool-go span{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;font-family:"Archivo",sans-serif;
  font-weight:600;font-size:14.5px;padding:10px 16px;border-radius:2px;transition:background .16s ease}
.tool-arrow{width:16px;height:16px;transition:transform .16s ease}
.tool-soon{margin-top:auto;align-self:flex-start;font-family:"Archivo",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);border:1.5px solid var(--line);padding:6px 10px;border-radius:2px}
a.tool-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -16px rgba(0,36,50,.5);border-color:var(--navy-soft)}
a.tool-card:hover figure img{transform:scale(1.03)}
a.tool-card:hover .tool-go span{background:var(--navy-soft)}
a.tool-card:hover .tool-arrow{transform:translateX(3px)}
a.tool-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tool-card,.tool-card figure img,.tool-go span,.tool-arrow{transition:none}}

/* ---------- Rory's tools as rows (Rory, 2026-10-29: "Can you put these tiles on top of each other with the
   explanation beside it? So that I scroll down to find what I want"): one tool per row, picture left, words and
   button right, no boxes or lines, compact so several fit on a laptop screen. Only his grid has .tool-rows ---------- */
.tool-grid.tool-rows{grid-template-columns:1fr;gap:clamp(18px,2.2vw,26px);max-width:920px}
.tool-rows .tool-card{flex-direction:row;align-items:center;gap:clamp(16px,2.6vw,30px);background:none;border:0;
  border-radius:0;overflow:visible}
.tool-rows .tool-card figure{flex:none;width:clamp(112px,24vw,240px);border-radius:3px;box-shadow:0 10px 22px -14px rgba(0,36,50,.55)}
.tool-rows .tool-card .stripe{display:none}
.tool-rows .tool-body{padding:0;gap:4px}
.tool-rows .tool-body h3{font-size:clamp(17px,1.8vw,20px)}
.tool-rows .tool-body p{font-size:clamp(14px,1.4vw,15.5px);line-height:1.45}
.tool-rows .tool-where{font-size:13px}
.tool-rows .tool-go{padding-top:8px}
.tool-rows .tool-go span{padding:8px 14px;font-size:14px}
.tool-rows a.tool-card:hover{transform:none;box-shadow:none}
.tool-rows a.tool-card:hover h3{color:var(--navy-soft)}
@media (max-width:560px){.tool-rows .tool-card{align-items:flex-start}.tool-rows .tool-card figure{margin-top:5px}}