/* ============================================================================
Loonwise — site.css v15 (shared; bump ?v= sitewide on edit)
THE 2026-10-13 REDESIGN (design only): an image-led corporate system in the
owner's blue family —
navy #001D6C headings, nav, link text
band #002D9C dark band, masthead tint, hero box
brand #0D5BE1 eyebrows, progress bars, tickers
pale #EDF5FF / #D0E2FF cards, ticker strip, pale bands
ink #161616 long body text
Merriweather 300/400 for section titles, banner headlines and group titles;
IBM Plex Sans (300/400/600) for everything else, Light 300 white for hero and
masthead titles. Square 48px buttons (decision 4), never pills. The Waterline
(black masthead rules, Mono record labels, the 320px axis) is retired; Plex
Mono survives only inside the Run & Evolve demo scene. Every component is
documented, with markup, in the redesign notes (COMPONENTS.md and the
specimen page beside it; tools only, never deployed).
v14: the hub panel (.hb banner, .hbox help box, .lifted / .lift-card) shared
by /services and /industries; one intro rule (760px lead, the same space
under every masthead or strip, left-aligned on phones); the thumbnail label
in the lower-left corner and whole summaries on every cover; masthead ground
flattened toward band blue with a phone drawing (.mast-fig); the closing
band's phone crop on her face; the ticker's static state as a list; the
current menu item's rule steps back while another panel is open; dead
legacy blocks removed (.doc, .ledger, .cols4, .t-display/.t-title/.t-read).
v15: the tablet list form of the covers applies only to a .cards grid of covers
(it collapsed the covers inside drag rows at 641–960px); one photo-masthead
recipe (greys lifted toward white under one blue multiply, one navy scrim);
the hubs' intro on the 760px lead measure; one filter-row size on both hubs;
the hub banner's lead and call to action inside the card (.hb-more); the
banner boxes on one line (--bx); the anchor strip ends with its page's
content (.pn-scope) and clears the reading rail; without JavaScript the six
header links stay reachable below 1181px; a focused ticker item on a phone
shows the items as the wrapping list; the footer rule in the pale hairline.
========================================================================== */
:root{
--navy:#001D6C;--band:#002D9C;--brand:#0D5BE1;--brand-dark:#0043CE;
--pale:#EDF5FF;--pale2:#D0E2FF;--pale3:#A6C8FF;
--ink:#161616;--text2:#525252;--text3:#6F6F6F;
--line:#E0E0E0;--rule:#BFCDEE;--hair2:#C6C6C6;--layer:#F4F4F4;--soft:#EDF5FF;--bg:#FFFFFF;
--serif:'Merriweather',Georgia,'Times New Roman',serif;
--sans:'IBM Plex Sans',system-ui,-apple-system,'Helvetica Neue',sans-serif;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--max:1280px;--hdr-h:80px;--pad:20px;--gap:20px;
/* spacing scale */
--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
--sec:clamp(56px,6vw,88px);
--shadow:0 18px 40px -18px rgba(0,29,108,.32);
--shadow-s:0 8px 20px -10px rgba(0,29,108,.24);
--box:rgba(0,45,156,.93); /* hero and banner text box (~93% band blue) */
--pnav-h:56px; /* the anchor strip's height (tab targets add it to scroll-margin-top) */
--glass:rgba(0,29,108,.62); /* the photo banner's translucent box */
--bx:0px; /* banner boxes: extra inset past the wrap edge (v15, below) */
--t-fast:150ms;--t-mid:300ms;--ease:cubic-bezier(.2,0,.38,.9);--ease-in:cubic-bezier(0,0,.3,1);--ease-out:cubic-bezier(.2,0,1,.9)}
@media(min-width:672px){:root{--pad:24px;--gap:24px}}
/* every banner box (the hero's, the homepage Industries panels', the closing band's, /platforms') stands on one line:
the wrap edge, but never closer than 104px to the window's left edge from 901px, where the hero's slide markers
sit in that margin. Boxes inside a .wrap add --bx to the wrap edge; the hero adds it to its own wrap-edge margin. */
@media(min-width:901px){:root{--bx:max(0px,calc(104px - max(var(--pad),(100vw - var(--max))/2 + var(--pad))))}}
@media(min-width:1056px){:root{--pad:32px;--gap:32px}}
@media(max-width:560px){:root{--hdr-h:64px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* keyboard focus never lands under the sticky header (WCAG 2.2, 2.4.11) */
main :is(a,button,input,select,textarea,summary,[tabindex]):not(.pnav *){scroll-margin-top:calc(var(--hdr-h) + 16px)}
body:has(.pnav) main :is(a,button,input,select,textarea,summary,[tabindex]):not(.pnav *){scroll-margin-top:calc(var(--hdr-h) + var(--pnav-h) + 16px)}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:inherit;font-weight:400;letter-spacing:normal;color:var(--navy)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button{font-family:inherit}
main{display:block;scroll-margin-top:var(--hdr-h)}
main:focus{outline:none}
.nw{white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.ar{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* on dark grounds the focus ring is white */
:is(.on-dark,.band-dark,.hc,.ctaband,.banner,.mast,.phero,.tk-blue,.ind-panel,.pcard) :focus-visible{outline-color:#fff}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* skip link: the first focusable thing on every page; off-canvas until it has focus */
.skip{position:absolute;left:0;top:0;z-index:400;display:inline-flex;align-items:center;height:48px;padding:0 16px;background:var(--navy);color:#fff;font-size:16px;line-height:24px;transform:translateY(-100%)}
.skip:focus{transform:none;outline:2px solid var(--brand);outline-offset:-2px}
/* ---- type ------------------------------------------------------------------
eyebrow Plex 600 14/20 uppercase .15em, brand blue (pale blue on dark)
s-title Merriweather Light, 26-34px, navy — section titles (.h2 is the same)
s-title-l Merriweather Light, 30-40px — page-level section titles, mastheads' intro
s-title-s Merriweather Light, 22-28px — banner and card-group titles
h1 Plex Light, 34-48px — hero and masthead titles (white on navy)
h3 / c-title Plex 400 20-22px navy — card titles
lead 18/30 · body 16/26 · small 14/22 */
.eyebrow,.label{display:block;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brand);margin:0 0 12px}
.on-dark .eyebrow,.eyebrow.w{color:var(--pale3)}
.s-title,.h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.4vw,34px);line-height:1.34;letter-spacing:0;color:var(--navy);text-wrap:balance}
.s-title-l{font-family:var(--serif);font-weight:300;font-size:clamp(30px,2.9vw,40px);line-height:1.3;color:var(--navy);text-wrap:balance}
.s-title-s{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2vw,28px);line-height:1.38;color:var(--navy)}
.on-dark .s-title,.on-dark .s-title-l,.on-dark .s-title-s,.on-dark .h2{color:#fff}
.h1{font-weight:300;font-size:clamp(34px,3.4vw,48px);line-height:1.18;letter-spacing:-.005em;color:var(--navy)}
.h3,.c-title{font-size:clamp(19px,1.6vw,22px);line-height:1.42;font-weight:400;color:var(--navy)}
.lead{font-size:18px;line-height:30px;color:var(--ink);max-width:760px}
@media(max-width:700px){.lead{font-size:17px;line-height:28px}}
.body{font-size:16px;line-height:26px;color:var(--ink)}
.body+.body{margin-top:16px}
.small{font-size:14px;line-height:22px;color:var(--text2)}
.small a{font-size:inherit}
.measure{max-width:760px}
/* .rec was the Waterline's Mono record label: now a quiet sans caption */
.rec{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.rec-l{font-size:14px;line-height:20px}
/* ---- links: the two text-link forms --------------------------------------------
.lnk "Learn more ——" semibold navy, a 24px rule after it that runs to 40px on hover
.lnk-caps "READ MORE >" 12px uppercase semibold, a small chevron
.link the legacy arrow link (inner pages), restyled navy */
.lnk{display:inline-flex;align-items:center;gap:14px;font-size:16px;line-height:24px;font-weight:600;color:var(--navy);cursor:pointer}
.lnk::after{content:'';display:block;width:24px;height:1.5px;background:currentColor;transition:width var(--t-mid) var(--ease)}
.lnk:hover,.lnk:focus-visible{color:var(--brand)}
.lnk:hover::after,.lnk:focus-visible::after{width:40px}
.on-dark .lnk,.lnk.w{color:#fff}
.on-dark .lnk:hover,.lnk.w:hover{color:var(--pale3)}
.lnk-caps{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.lnk-caps::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);margin-left:2px;transition:transform var(--t-fast) var(--ease)}
.lnk-caps:hover{color:var(--brand)}
.lnk-caps:hover::after{transform:translateX(3px) rotate(45deg)}
.link{color:var(--navy);display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.link .ar{color:var(--brand);transition:transform var(--t-fast) var(--ease)}
.link:hover{color:var(--brand)}
.link:hover .ar{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.lnk::after,.lnk-caps::after,.link .ar{transition:none}}
/* ---- buttons: square, 48px, label left, arrow right (decisions 3 and 4) ---- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:48px;min-width:200px;padding:0 16px 0 20px;font-size:15px;line-height:20px;font-weight:600;letter-spacing:.01em;border:1px solid transparent;border-radius:0;cursor:pointer;transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast);text-align:left;white-space:nowrap;background:var(--band);color:#fff}
.btn-primary{background:var(--band);color:#fff}.btn-primary:hover{background:var(--navy)}
.btn-secondary{background:var(--navy);color:#fff}.btn-secondary:hover{background:#00134A}
.btn-tertiary{background:transparent;color:var(--navy);border-color:var(--navy)}.btn-tertiary:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy)}.btn-white:hover{background:var(--pale2)}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-sm{min-height:40px;min-width:0;gap:16px;font-size:14px}
.btns{display:flex;gap:16px 24px;flex-wrap:wrap;align-items:center}
/* the longest labels (28 characters) plus the arrow fit a 320px phone with a 16px gap */
@media(max-width:360px){.btn{gap:16px}}
/* the square icon button (pause, previous, next): 40px, outlined */
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;padding:0;border:1.5px solid var(--navy);border-radius:0;background:transparent;color:var(--navy);cursor:pointer;transition:background-color var(--t-fast),color var(--t-fast)}
.ibtn:hover{background:var(--navy);color:#fff}
.ibtn svg{width:16px;height:16px;fill:currentColor}
.ibtn[hidden]{display:none}
.ibtn .i-play{display:none}
.ibtn[aria-pressed="true"] .i-pause{display:none}
.ibtn[aria-pressed="true"] .i-play{display:block}
.on-dark .ibtn,.ibtn.w{border-color:#fff;color:#fff}
.on-dark .ibtn:hover,.ibtn.w:hover{background:#fff;color:var(--navy)}
/* ---- header: the bar — logo, the nav right after it, one square button at right.
meganav.js rebuilds .lnk2 into the click-open mega menu and adds the burger to .rt2. */
.hdr{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 rgba(0,29,108,.06),0 4px 16px -6px rgba(0,29,108,.14)}
.hdr .bar{max-width:1440px;margin:0 auto;padding:0 var(--pad);height:var(--hdr-h);display:flex;align-items:center;gap:40px}
@media(min-width:1056px){.hdr .bar{padding:0 40px}}
.hdr .lg2{flex-shrink:0;display:block}
.hdr .lg2 img{height:24px;width:auto;display:block}
.hdr .lnk2{display:flex;align-items:center;gap:4px;font-size:15px;color:var(--navy)}
.hdr .lnk2>a{padding:0 14px;line-height:var(--hdr-h)}
.hdr .rt2{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:auto}
.hcta{display:inline-flex;align-items:center;gap:16px;height:44px;padding:0 20px 0 24px;border-radius:999px;background:var(--band);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;transition:background-color var(--t-fast)}
.hcta:hover{background:var(--navy)}
@media(max-width:1180px){.hdr .lnk2{display:none}}
/* without JavaScript there is no burger: below 1181px the six links run as a second row under the bar (and the
header stops being sticky, so the taller bar never covers the page) */
@media(max-width:1180px) and (scripting:none){
.hdr{position:relative}
.hdr .bar{flex-wrap:wrap;height:auto;row-gap:0}
.hdr .lg2,.hdr .rt2{height:var(--hdr-h);display:flex;align-items:center}
.hdr .lnk2{display:flex;order:3;flex:1 0 100%;gap:0;margin:0 calc(var(--pad)*-1);padding:0 var(--pad);overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--rule)}
.hdr .lnk2>a{padding:0 12px;line-height:44px;font-size:15px;white-space:nowrap}
.hdr .lnk2>a:first-child{padding-left:0}
}
@media(max-width:560px){.hdr .bar{gap:12px}.hdr .lg2 img{height:20px}.hcta{height:40px;padding:0 16px;gap:8px;font-size:14px}}
/* "Reinvent with us" is longer than a 375px bar allows with its arrow: phones drop the arrow,
and below 351px the button yields to the burger menu, whose footer carries the same button */
@media(max-width:400px){.hcta .ar{display:none}}
@media(max-width:350px){.hcta{display:none}}
/* while a menu panel is open, only the open item carries the 3px rule: the current section's rule (aria-current,
meganav.js) steps back so two labels are never underlined at once */
.hdr .lnk2:has(.mn-item.open) .mn-item:not(.open)>a[aria-current]::after{transform:scaleX(0)}
/* ---- sections ------------------------------------------------------------ */
.sec{padding:var(--sec) 0}
.sec-tight{padding:clamp(48px,5vw,72px) 0}
.sec-s{padding-top:var(--sec)}
.sec-rule{padding:var(--sec) 0}
.sec-rule+.sec-rule{padding-top:0}
.sec-rule+.sec-rule>.wrap:first-child::before{content:'';display:block;border-top:1px solid var(--rule);margin-bottom:var(--sec)}
.pnav+.sec-rule{padding-top:clamp(48px,5vw,72px)}
.layer,.band-pale{background:var(--pale)}
/* section head: eyebrow, serif title, optional lead; .c centres it */
.sechd,.sechead{margin-bottom:clamp(32px,3.6vw,48px);max-width:1120px}
.sechd .lead,.sechead .lead{margin-top:16px}
.sechd.c,.sechead.c{margin-left:auto;margin-right:auto;text-align:center}
.sechd.c .lead,.sechead.c .lead{margin-left:auto;margin-right:auto}
.sechd-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(32px,3.6vw,48px)}
.sechd-row .sechd{margin-bottom:0}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:24px}}
.two .h2{max-width:460px}
.two p:not(.eyebrow){max-width:760px}
.subh{font-size:13px;line-height:20px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin:32px 0 14px;padding-top:14px;border-top:1px solid var(--rule)}
.subh:first-child{margin-top:0}
.on-dark{color:#fff}
.on-dark h2,.on-dark h3{color:#fff}
/* ---- the dark band: band blue, white type, pictogram list ---- */
.band-dark{background:var(--band);color:#fff}
.band-dark .eyebrow{color:var(--pale3)}
.band-dark .s-title,.band-dark .s-title-l,.band-dark .h2,.band-dark h3{color:#fff}
.band-dark .lnk{color:#fff}
.band-dark .lnk:hover{color:var(--pale3)}
.dk{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 64px;align-items:center}
.dk-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px}
.band-dark.sec{padding:clamp(56px,5vw,72px) 0}
.dk-list a{display:flex;align-items:center;gap:20px;min-height:64px;padding:6px 0;color:#fff;font-size:16px;line-height:22px}
.dk-list a:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.dk-list .pict{width:40px;height:40px;flex:0 0 40px}
@media(max-width:900px){.dk{grid-template-columns:1fr;gap:40px}}
@media(max-width:480px){.dk-list{gap:4px 16px}.dk-list a{gap:14px;font-size:15px;align-items:flex-start}.dk-list .pict{width:34px;height:34px;flex-basis:34px}}
/* pictograms: 48x48 line drawings, 1.5px, currentColor; .pict-f fills at 18% */
.pict{display:block;width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.pict *{vector-effect:non-scaling-stroke}
.pict .pf{fill:currentColor;stroke:none}
.pict .pt{fill:currentColor;fill-opacity:.18}
.pict .pd{stroke-dasharray:3 3}
/* ---- icon grid (three columns on white): navy pictogram, 22px title, a "Learn more ——" ---- */
.igrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px var(--gap)}
.igrid-i{display:flex;flex-direction:column;align-items:flex-start;max-width:400px}
.igrid-i .pict{color:var(--navy);margin-bottom:24px}
.igrid-i .eyebrow{margin-bottom:8px}
.igrid-i .c-title{margin-bottom:12px}
.igrid-i p:not(.eyebrow){font-size:16px;line-height:26px;color:var(--ink);margin-bottom:20px}
.igrid-i .lnk{margin-top:auto}
@media(max-width:900px){.igrid{grid-template-columns:1fr;gap:40px}.igrid-i{max-width:640px}}
/* ---- cards ----------------------------------------------------------------
.card-pale the news card: pale blue, date eyebrow, 22px title; the card is the link
.card-top the top-ruled card: white, 6px bright-blue top border, soft shadow, centred */
.card-pale{position:relative;display:flex;flex-direction:column;min-height:300px;padding:32px 32px 28px;background:var(--pale);color:var(--navy);transition:background-color var(--t-mid) var(--ease)}
.card-pale .eyebrow{font-size:13px;letter-spacing:.12em;margin-bottom:16px}
.card-pale .c-title{color:var(--navy)}
.card-pale .c-foot{margin-top:auto;padding-top:24px}
a.card-pale:hover{background:var(--pale2)}
a.card-pale:hover .c-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.card-top{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 28px 36px;background:#fff;border-top:6px solid var(--brand);box-shadow:var(--shadow)}
.card-top .eyebrow{margin-bottom:10px;font-size:12px}
.card-top .c-title{margin-bottom:14px}
.card-top p:not(.eyebrow){font-size:15px;line-height:24px;color:var(--ink)}
.card-top .note{margin-top:12px;font-size:13px;line-height:20px;color:var(--text2)}
.cards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gap)}
.cards.c4{--cols:4}.cards.c2{--cols:2}
@media(max-width:1100px){.cards.c4{--cols:2}}
@media(max-width:760px){.cards{--cols:1 !important}}
/* ---- drag row: a native horizontal scroller with a progress control beneath.
Markup:
…
…
site.js wires it (mouse drag with glide, the range both ways, arrow keys item by item).
Without JS it is a plain scroll row with a native scrollbar. The first item lines up with
the container; the row runs off the right edge (full bleed). --dw sets the item width. */
.drow{--dw:410px;--dg:20px;position:relative}
.drow-rail{--dpad:max(var(--pad),calc((100% - var(--max))/2 + var(--pad)));overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-padding-inline:var(--dpad);padding-bottom:4px}
.drow-rail:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.drow-track{list-style:none;display:flex;gap:var(--dg);width:max-content;padding:0 var(--dpad)}
.drow-i{flex:0 0 var(--dw);width:var(--dw);scroll-snap-align:start;display:flex}
.drow-i>*{flex:1 1 auto;min-width:0}
.drow.dr-js .drow-rail{scrollbar-width:none}
.drow.dr-js .drow-rail::-webkit-scrollbar{display:none}
@media(hover:hover) and (pointer:fine){.drow.dr-js .drow-rail{cursor:grab;-webkit-user-select:none;user-select:none}.drow.dr-js .drow-rail a{cursor:pointer}.drow-rail.dr-grab,.drow-rail.dr-grab *{cursor:grabbing!important}}
@media(hover:none),(pointer:coarse){.drow-rail{scroll-snap-type:x proximity}}
.drow-rail.dr-drag{scroll-snap-type:none}
@media(max-width:560px){.drow{--dw:min(300px,calc(100vw - 72px))}}
/* the progress control: a bright-blue bar on a pale track, as an */
.drow-bar,.prog{max-width:var(--max);margin:40px auto 0;padding:0 var(--pad)}
.drow-bar[hidden]{display:none}
.prog-in,.drow-bar input{display:block;width:100%;height:24px;margin:0;padding:0;background:transparent;border:0;border-radius:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.drow-bar input:focus{outline:none}
.drow-bar input:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.drow-bar input::-webkit-slider-runnable-track{height:24px;border:0;border-radius:0;background:linear-gradient(var(--pale2),var(--pale2)) center/100% 6px no-repeat}
.drow-bar input::-webkit-slider-thumb{width:var(--th,120px);height:24px;border:0;border-radius:0;background:linear-gradient(var(--brand),var(--brand)) center/100% 6px no-repeat;cursor:grab;-webkit-appearance:none;appearance:none}
.drow-bar input::-moz-range-track{height:6px;border:0;border-radius:0;background:var(--pale2)}
.drow-bar input::-moz-range-thumb{width:var(--th,120px);height:6px;border:0;border-radius:0;background:var(--brand);cursor:grab}
.on-dark .drow-bar input::-webkit-slider-runnable-track{background-image:linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25))}
.on-dark .drow-bar input::-webkit-slider-thumb{background-image:linear-gradient(#fff,#fff)}
/* a static progress bar (no control):
*/
.prog>span{display:block;height:6px;background:linear-gradient(90deg,var(--brand) var(--p,30%),var(--pale2) var(--p,30%))}
/* ---- portrait cards: tall, square-cornered, image-led. Grounds vary along a row (art.TONES):
brand / band / navy blues, .pale (navy type on pale blue), a photo (.photo, --img), ink. ---- */
.pcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:var(--ph,560px);overflow:hidden;isolation:isolate;color:#fff;background:var(--c,var(--band));padding:28px 24px 28px}
.pcard::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,17,64,0) 38%,rgba(0,17,64,.55) 100%)}
.pcard .pc-art{position:absolute;z-index:-2;inset:0;width:100%;height:100%}
.pcard .pc-name{font-size:clamp(24px,2vw,28px);line-height:1.2;font-weight:300;color:#fff;margin:0}
.pcard .pc-desc{font-size:15px;line-height:22px;color:rgba(255,255,255,.9);margin-top:10px}
.pcard .pc-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-mid) var(--ease)}
.pcard .pc-more>div{overflow:hidden;min-height:0}
.pcard .pc-line{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding-top:16px}
.pcard .pc-go{margin-top:16px}
a.pcard:hover .pc-more,a.pcard:focus-visible .pc-more,.pcard:focus-within .pc-more{grid-template-rows:1fr}
a.pcard:focus-visible{outline:3px solid #fff;outline-offset:-7px}
.pcard.pale{color:var(--navy)}
.pcard.pale::before{background:linear-gradient(180deg,rgba(237,245,255,0) 42%,rgba(208,226,255,.55) 100%)}
.pcard.pale .pc-name{color:var(--navy)}
.pcard.pale .pc-desc{color:var(--ink)}
.pcard.pale .pc-line{color:var(--brand)}
a.pcard.pale:focus-visible{outline-color:var(--navy)}
@media(hover:none){.pcard .pc-more{grid-template-rows:1fr}}
@media(prefers-reduced-motion:reduce){.pcard .pc-more{transition:none}}
/* ---- banners ------------------------------------------------------------------
.banner full-bleed photo or art (.bn-media) with a translucent navy box (.bn-box) at left
.split the side-by-side: a bordered white card (.split-card) beside a large photo or art (.split-media)
Media take a photo as --img (set inline), or art (an inline