/* Shared styles extracted from the reference pages.
   Majority variant of selectors used on 6+ pages; template order from commercial-pools.html.
   Pages override at property level in /styles/pages/<name>.css. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter-latin-400-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/saira-latin-400-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/saira-condensed-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/saira-condensed-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/saira-condensed-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Metroid Brand Guide tokens (Guide section 4). Use these, never a raw hex that duplicates one.
   #082842 (--navy-darkest) is retired: frame navy #0C3457 is the only navy background. */
:root{
--navy:#104573;--gray:#808184;--blue:#1C93D1;
--navy-deep:#0C3457;
--blue-hover:#1580BB;--blue-soft:#5BB4E5;
--ink:#16202B;--ink-muted:#3C4A57;--paper:#F4F7FA;--line:#E2E9F0;--white:#FFFFFF;
--color-success:#2F855A;--color-success-hover:#246B48;--color-success-bg:#D8F0E3;
--color-warning:#D97706;--color-warning-hover:#B35E03;--color-warning-bg:#FDECD2;
--color-error:#B91C1C;--color-error-hover:#921818;--color-error-bg:#FBDBD9;
--on-dark:#FFFFFF;--on-dark-body:#BCD2E6;--on-dark-muted:#9FC0DB;--on-dark-soft:#CFE0EE;--on-dark-foot:#9FB6CD;
--navy-60:#708FAB;--navy-20:#CFDAE3;--gray-60:#B3B3B5;--gray-20:#E6E6E7;--blue-60:#77BEE3;--blue-20:#D2E9F6;
--maxw:1240px;--gut:clamp(20px,5vw,64px);
--shadow-card:0 30px 50px -30px rgba(12,52,87,.4);--shadow-menu:0 24px 48px -24px rgba(12,52,87,.35);--shadow-media:0 30px 60px -34px rgba(12,52,87,.5);
--focus-ring:0 0 0 3px rgba(30,150,215,.3)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.44;-webkit-font-smoothing:antialiased}
.eyebrow{font-family:'Saira',sans-serif;font-weight:600;font-size:.975rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.eyebrow.on-dark{color:var(--blue-soft)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.sanity-cover-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:'Saira',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.02em;padding:.92em 1.6em;border-radius:2px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-deep)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.utility{background:var(--navy-deep);color:var(--on-dark-soft);font-size:.8rem}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;font-family:'Saira',sans-serif;letter-spacing:.03em}
.utility a{color:var(--on-dark-soft)}
.utility .u-right{display:flex;gap:22px;align-items:center}
.utility .badge{color:#fff;font-weight:600}
@media(max-width:760px){
.utility .u-left{display:none}
}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand img{height:45px;width:auto}
nav.main>ul{display:flex;list-style:none;gap:4px;align-items:center}
.nav-link{font-family:'Saira',sans-serif;font-weight:600;font-size:.96rem;color:var(--ink);background:none;border:0;cursor:pointer;padding:.7em .9em;display:inline-flex;align-items:center;gap:.4em;letter-spacing:.01em}
.caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.has-sub{position:relative}
.submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:250px;opacity:0;visibility:hidden;transition:.18s ease;padding-top:10px}
/* Dropdowns open on click / Enter (nav script in BaseLayout toggles .open), not on hover. */
.has-sub.open .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.has-sub>.nav-link .caret{transition:transform .2s ease}
.has-sub.open>.nav-link .caret{transform:rotate(-135deg) translateY(2px)}
.submenu-inner{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:3px;box-shadow:var(--shadow-menu);padding:8px}
.submenu-inner a{display:block;padding:.6em .9em;font-size:.9rem;font-weight:500;border-radius:2px;color:var(--ink)}
.bar-cta{display:flex;align-items:center;gap:18px}
.menu-toggle{display:none}
.nav-cta-mobile{display:none}
@media(max-width:1080px){
nav.main,.bar-cta .btn{display:none}
.menu-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:8px;min-width:44px;min-height:44px}
.menu-toggle span{width:26px;height:2px;background:var(--gray)}
}
.hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;min-height:clamp(520px,46vw,620px);display:flex;flex-direction:column;justify-content:flex-end}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg, rgba(12,52,87,.95) 0%, rgba(14,60,101,.82) 44%, rgba(16,69,115,.52) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(48px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);font-weight:700;margin:.35em 0 .3em;max-width:14ch}
.hero h1 .accent{color:var(--blue-soft)}
.hero-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.hero-uniques{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--blue);padding-left:22px;margin-bottom:6px}
.hero-uniques .hu{font-family:'Saira Condensed',sans-serif;font-size:clamp(1.3rem,2.4vw,2rem);font-weight:600;color:#fff;line-height:1.18}
.hero-uniques .hu span{color:var(--blue-soft)}
.iso-row{display:flex;gap:26px;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);flex-wrap:wrap}
.iso-row .iso-label{font-family:'Saira',sans-serif;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)}
.iso-pills{display:flex;gap:10px;flex-wrap:wrap}
.iso-pill{font-family:'Saira',sans-serif;font-size:.74rem;letter-spacing:.04em;color:var(--on-dark-soft);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 13px}
.iso-badges{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.iso-badges img{height:132px;width:auto;background:#fff;border-radius:50%;padding:5px;box-shadow:0 6px 18px -8px rgba(12,52,87,.5)}
.iso-badges img.iso-real{background:transparent;border-radius:4px;padding:6px;box-shadow:none}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr;gap:34px}
.hero-uniques{order:-1}
}
/* Desktop: lock every hero to one identical, capped height so sibling pages match.
   Mobile keeps the growing min-height above. The homepage opts out in index.css
   because its extra ISO-badge row needs more room. */
@media(min-width:901px){
.hero{height:clamp(620px,56.5vw,700px);min-height:0}
/* Distribute the hero copy vertically: breadcrumb + eyebrow pinned to the top,
   CTAs pinned to the bottom, and the heading + lede centred in the space
   between them. Two auto top margins (on the h1 and the CTA row) split the
   free space evenly, so the heading/lede block sits centred between the two. */
.hero .wrap{flex:1;display:flex;flex-direction:column;width:100%}
.hero-grid{flex:1;align-items:stretch}
.hero-grid>div{display:flex;flex-direction:column}
.hero h1{margin-top:auto}
.hero-cta{margin-top:auto}
.hero-uniques{margin-top:auto}
/* Make the lede-to-button gap match the eyebrow-to-heading gap above (measured
   to the top of the 'Y'). Both gaps sit on the same auto-distributed space, so
   this fixed margin only needs to make up the heading's extra line leading above
   its caps that the button row lacks. */
.hero .lede{margin-bottom:12px}
}
.intro{padding:clamp(72px,9vw,120px) 0;background:#fff}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:start}
.intro h2 .nowrap{white-space:nowrap}
.intro .lead-line{color:var(--navy);font-weight:600;font-size:1.16rem}
.intro-figure{position:relative;margin-top:0}
.intro-figure img{width:100%;border-radius:4px;filter:saturate(1.02);object-fit:cover;max-height:560px}
/* Intro text/photo fade in without the 18px reveal slide, which would otherwise push
   the text down as it enters and make the top padding look larger than the bottom.
   Keeps the text evenly padded (first line to last line) the moment the section appears. */
.intro .reveal{transform:none}
/* The Saira eyebrow glyph box is taller than its default line-height and overflows ~1px
   above the content edge, so the first line reads 119px from the top vs 120px at the
   bottom. This line-height seats the eyebrow exactly at the edge → true 120/120. */
.intro .eyebrow{line-height:1.7}
@media(max-width:880px){
.intro-grid{grid-template-columns:1fr;gap:40px}
}
.diff{padding:clamp(72px,9vw,118px) 0;background:var(--paper)}
.section-head{max-width:60ch;margin-bottom:clamp(38px,5vw,60px)}
.section-head h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:600;color:var(--navy);margin-top:.35em}
.uniques{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.unique{background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:4px;padding:34px 30px 32px;position:relative;transition:transform .2s ease, box-shadow .2s ease}
.unique:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.unique-index{font-family:'Saira Condensed',sans-serif;font-size:1rem;font-weight:700;color:var(--blue);letter-spacing:.1em;margin-bottom:14px}
.unique h3{font-size:1.55rem;color:var(--navy);margin-bottom:.3em}
.unique-tag{font-style:italic;color:var(--gray);margin-bottom:20px;font-size:.92rem}
.unique ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.unique li{position:relative;padding-left:22px;font-size:.87rem;color:var(--ink-muted);line-height:1.5}
.unique li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--blue);transform:rotate(45deg)}
@media(max-width:880px){
.uniques{grid-template-columns:1fr}
}
.solutions{padding:clamp(72px,9vw,120px) 0;background:var(--paper)}
.solutions .section-head p{color:var(--ink-muted);font-size:.95rem;margin-top:.7em;line-height:1.55;max-width:70ch}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.sol-note{margin-top:clamp(44px,5vw,64px);padding-top:clamp(36px,4vw,48px);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.sol-note p{color:var(--navy);font-weight:600;font-size:1.05rem;max-width:56ch;margin:0}
@media(max-width:980px){
.sol-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.sol-grid{grid-template-columns:1fr}
}
.process{padding:clamp(72px,9vw,118px) 0;background:var(--navy-deep);color:#fff;position:relative;overflow:hidden}
.process .wrap{position:relative;z-index:2}
.process .section-head h2{color:#fff}
.process .section-head p{color:var(--on-dark-body);font-size:.95rem;margin-top:.6em;max-width:52ch;line-height:1.5}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:18px;counter-reset:s}
.step{padding:30px 18px 30px 0;border-top:2px solid rgba(91,180,229,.4);position:relative}
.step+.step{padding-left:20px}
.step-num{font-family:'Saira Condensed',sans-serif;font-size:1rem;font-weight:700;color:var(--blue-soft);letter-spacing:.15em;margin-bottom:14px}
.step h3{font-size:1.3rem;margin-bottom:.4em}
.step p{font-size:.83rem;color:var(--on-dark-body);line-height:1.5}
.process-cta{margin-top:42px}
@media(max-width:1080px){
.steps{grid-template-columns:1fr 1fr 1fr}
.step{padding-left:0!important}
.step+.step{padding-left:0}
}
@media(max-width:680px){
.steps{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
.steps{grid-template-columns:1fr}
}
.family{padding:clamp(72px,9vw,120px) 0;background:#fff}
.family-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,76px);align-items:start}
.family-figure img{width:100%;border-radius:4px}
.family-figure .tag{position:absolute;left:22px;bottom:22px;background:rgba(12,52,87,.9);color:#fff;padding:14px 20px;border-left:4px solid var(--blue)}
.family-figure .tag b{font-family:'Saira Condensed',sans-serif;font-size:1.3rem;display:block;line-height:1.05}
.family-figure .tag span{font-size:.82rem;color:var(--on-dark-body)}
.family h2{font-size:clamp(1.9rem,3.6vw,3rem);color:var(--navy);margin:.4em 0 .5em;max-width:16ch}
.family p{color:var(--ink-muted);font-size:.95rem;margin-bottom:1.1em;max-width:54ch;line-height:1.5}
.family .pull{color:var(--navy);font-weight:600;font-size:1.18rem}
.family .purpose{color:var(--navy)}
.family .values-intro{color:var(--navy);font-weight:600;margin-top:.4em;margin-bottom:.2em}
.family .values-cta{margin-top:28px}
.value-key{font-family:'Saira Condensed',sans-serif;font-weight:600;font-size:1.18rem;color:var(--navy);border-left:3px solid var(--blue);padding-left:14px}
.value-desc{color:var(--ink-muted);font-size:.97rem}
@media(max-width:880px){
.family-grid{grid-template-columns:1fr;gap:40px}
.value{grid-template-columns:1fr;gap:4px}
}
/* Stat band: white with hairline rules, Metroid Blue numerals (Guide section 8) */
.stats{background:var(--white);color:var(--ink);padding:clamp(46px,6vw,68px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat-num{font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:clamp(2.6rem,5vw,3.8rem);color:var(--navy);line-height:1}
.stat-label{font-family:'Saira',sans-serif;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-top:8px}
@media(max-width:680px){
.stats-grid{grid-template-columns:1fr;gap:30px}
.stat{border-right:0;padding-bottom:24px;border-bottom:1px solid var(--line)}
.stat:last-child{border-bottom:0;padding-bottom:0}
}
.industries{padding:clamp(72px,9vw,118px) 0;background:var(--paper)}
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
.ind-card{position:relative;display:block;height:190px;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.ind-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s ease}
.ind-img img{width:100%;height:100%;object-fit:cover}
.ind-card:hover .ind-img{transform:scale(1.06)}
.ind-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,52,87,.12) 0%,rgba(12,52,87,.42) 52%,rgba(12,52,87,.86) 100%)}
.ind-meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;z-index:2}
.ind-name{font-family:'Saira Condensed',sans-serif;font-weight:600;font-size:1.2rem;color:#fff;line-height:1.05}
.ind-arrow{color:#fff;font-size:1.05rem;transition:transform .2s ease;opacity:.85}
.ind-card:hover .ind-arrow{transform:translateX(4px);opacity:1}
.ind-card::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--blue);z-index:3;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.ind-card:hover::after{transform:scaleX(1)}
@media(max-width:980px){
.ind-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
.ind-grid{grid-template-columns:1fr}
.ind-card{height:170px}
}
.fit{padding:clamp(64px,8vw,104px) 0;background:#fff}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,72px);align-items:start}
.fit-card{border:1px solid var(--line);border-radius:4px;padding:34px 32px;background:var(--paper)}
.fit-card.good{border-top:3px solid var(--blue)}
.fit-card.no{border-top:3px solid var(--gray)}
.fit-card h3{font-size:1.5rem;color:var(--navy);margin-bottom:18px}
.fit-card ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.fit-card li{position:relative;padding-left:30px;color:var(--ink-muted);font-size:.9rem;line-height:1.5}
.fit-card.good li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--color-success);font-weight:700}
.fit-card.no li::before{content:"\2717";position:absolute;left:0;top:0;color:var(--color-error);font-weight:700}
.fit-card li b{color:var(--navy)}
@media(max-width:820px){
.fit-grid{grid-template-columns:1fr;gap:22px}
}
.testi{padding:clamp(64px,8vw,104px) 0;background:var(--paper)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:14px}
.quote{background:#fff;border:1px solid var(--line);border-radius:4px;padding:30px 28px;display:flex;flex-direction:column;gap:18px}
.quote blockquote{font-size:.95rem;color:var(--ink);line-height:1.4}
.quote figcaption{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:14px}
.q-name{font-family:'Saira',sans-serif;font-weight:600;color:var(--navy)}
.q-role{font-size:.85rem;color:var(--gray)}
@media(max-width:880px){
.quotes{grid-template-columns:1fr}
}
/* CTA band: solid paper, no top rule, Metroid Blue heading. Never a gradient (Guide section 8) */
.cta-band{background:var(--paper);color:var(--ink-muted);padding:clamp(58px,7vw,92px) 0;position:relative;overflow:hidden}
/* Set by BaseLayout when the section above the band is tint/navy, so the band contrasts with it */
.cta-band.cta-on-white{background:var(--white)}
.cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-inner h2{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:600;color:var(--navy)}
/* Optical alignment: at desktop sizes the heading's capital side-bearing sat its ink ~1-1.5px right of the
   taglines below. Measured: -.025em brings it within .15px at 1100-1440px; below ~1000px the gap is
   already under .5px and a nudge overshoots, so leave smaller screens alone. */
@media(min-width:1000px){.cta-inner h2{margin-left:-.025em}}
.cta-band .eyebrow.on-dark{color:var(--blue)}
.cta-inner .uniques-line{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;font-family:'Saira Condensed',sans-serif;font-size:1.15rem;color:var(--navy)}
.cta-inner .uniques-line span{color:var(--navy)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label,.choice-field legend{font-family:'Saira',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--navy)}
.field label span,.choice-field legend span{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--gray)}
.field input,.field select,.field textarea{width:100%;font-family:'Inter',sans-serif;font-size:.92rem;padding:12px 14px;border:1px solid var(--line);border-radius:3px;color:var(--ink);background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.choice-field input:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--color-error);box-shadow:0 0 0 1px var(--color-error)}
.field textarea{resize:vertical;min-height:130px}
.choice-field{display:flex;gap:18px;flex-wrap:wrap;border:0;padding:0;margin:0 0 18px}
.choice-field legend{width:100%;margin-bottom:6px}
.choice-field label{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;color:var(--ink)}
.choice-field input{accent-color:var(--blue)}
.newsletter-fields{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:14px}
.hp-field{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.turnstile-row{min-height:65px;margin:14px 0 18px}
.turnstile-prompt{font-size:.82rem;color:var(--gray)}
.form-config-error,.form-status{font-size:.86rem;line-height:1.5;padding:12px 14px;border-radius:3px}
.form-config-error,.form-status.error{color:var(--color-error-hover);background:var(--color-error-bg);border:1px solid var(--color-error)}
.form-status.success{color:var(--color-success-hover);background:var(--color-success-bg);border:1px solid var(--color-success)}
.form-status:focus{outline:3px solid rgba(30,150,215,.3);outline-offset:2px}
.form-status[hidden]{display:none}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:6px}
.form-note{font-size:.8rem;color:var(--gray);max-width:48ch;line-height:1.4}
.lead-form .btn:disabled{cursor:wait;opacity:.62}
.lead-form .btn:focus-visible{outline:3px solid rgba(30,150,215,.45);outline-offset:3px}
@media(max-width:700px){
.form-row,.newsletter-fields{grid-template-columns:1fr}
}
footer.site{background:var(--navy-deep);color:var(--on-dark-body);padding:clamp(56px,7vw,80px) 0 0}
.footer-newsletter{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,70px);align-items:start;padding-bottom:clamp(44px,6vw,64px);margin-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-eyebrow{display:block;font-family:'Saira',sans-serif;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft);margin-bottom:10px}
.footer-newsletter h2{font-size:clamp(1.8rem,3vw,2.5rem);color:#fff;margin-bottom:.25em}
.footer-newsletter-copy p{max-width:42ch;color:var(--on-dark-foot);font-size:.93rem;line-height:1.55}
.footer-newsletter .field label{color:#fff}
.footer-newsletter .field label span{color:var(--on-dark-foot)}
.footer-newsletter .turnstile-row{margin-bottom:12px}
.footer-newsletter .turnstile-prompt,.footer-newsletter .form-note{color:var(--on-dark-foot)}
.footer-newsletter .form-foot{align-items:flex-end}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand img{width:auto;height:40px;margin-bottom:20px}
.foot-brand p{font-size:.95rem;max-width:34ch;color:var(--on-dark-foot)}
.foot-contact{margin-top:18px;font-size:.92rem;line-height:1.9}
.foot-contact a{color:var(--on-dark-soft)}
/* Footer column titles are <h2 class="foot-title"> (correct outline); every property pinned so
   page-level h1,h2,h3 rules don't change how they look. */
footer .foot-title{font-family:'Saira',sans-serif;font-size:.78rem;font-weight:700;line-height:1.44;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 16px}
/* Visually hidden but read by screen readers. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer ul a{color:var(--on-dark-foot);font-size:.94rem}
footer ul a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:.82rem;color:var(--on-dark-foot);flex-wrap:wrap;gap:10px}
.socials{display:flex;gap:14px}
.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:3px;display:grid;place-items:center;color:var(--on-dark-soft);font-size:.8rem;font-family:'Saira',sans-serif}
.socials a:hover{border-color:var(--blue);color:#fff}
@media(max-width:1100px){
.foot-grid{grid-template-columns:repeat(4,1fr)}
.foot-brand{grid-column:1 / -1}
}
@media(max-width:880px){
.footer-newsletter{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr}
.foot-brand{grid-column:auto}
}
@media(max-width:520px){
.foot-grid{grid-template-columns:1fr}
}
/* Scroll reveal: only hide content when JS is running (html.js, set in <head>), so a script
   failure never leaves the page blank. :where() keeps the old specificity for page overrides. */
:where(.js) .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
}
.crumb a:hover{color:#fff}
/* Section crumbs (Solutions, Industries…) have no overview page: <a> without href, not a link. */
.crumb a:not([href]){pointer-events:none}
.apps{padding:clamp(72px,9vw,120px) 0;background:var(--paper)}
.std-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,60px);align-items:start;margin-top:0}
.std-left .section-head{margin-bottom:clamp(26px,3vw,38px)}
.std-grid{display:grid;grid-template-columns:1fr;gap:0}
.std{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.std:first-child{padding-top:0}
.std-code{font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:1.05rem;color:var(--blue-soft);letter-spacing:.02em;white-space:nowrap}
.std-desc{color:var(--on-dark-soft);font-size:.92rem;line-height:1.4}
.std-media img{width:100%;border-radius:4px;object-fit:cover;aspect-ratio:4/5;box-shadow:0 30px 60px -34px rgba(12,52,87,.6)}
.std-media .tag{position:absolute;left:18px;bottom:18px;background:rgba(12,52,87,.92);color:#fff;padding:12px 16px;border-left:4px solid var(--blue);font-family:'Saira',sans-serif;font-size:.82rem;letter-spacing:.02em}
.std-foot{margin-top:30px;color:var(--on-dark-body);font-size:.95rem;max-width:70ch}
.std-foot b{color:#fff}
@media(max-width:820px){
.std-layout{grid-template-columns:1fr;gap:34px}
}
.specs{padding:clamp(72px,9vw,120px) 0;background:#fff}
.specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:center}
.specs h2{font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:600;margin:.45em 0 .55em;color:var(--navy);max-width:16ch}
.specs p{color:var(--ink-muted);font-size:.95rem;margin-bottom:1.1em;max-width:54ch;line-height:1.5}
.specs p.lead-line{color:var(--navy);font-weight:600;font-size:1.16rem}
.specs-figure img{width:100%;border-radius:4px;object-fit:cover;max-height:520px;box-shadow:var(--shadow-media)}
@media(max-width:880px){
.specs-grid{grid-template-columns:1fr;gap:40px}
}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(34px,4vw,52px)}
.case{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.case:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.case-media{width:100%;aspect-ratio:300/192;background:transparent;overflow:hidden}
/* Project images are transparent PNGs by default, so fit (contain) the whole product
   into the card instead of cropping it to fill. The transparent background shows the
   card behind it. Use .case-media.cover for the occasional edge-to-edge photo. */
.case-media img{width:100%;height:100%;object-fit:contain;object-position:center}
.case-media.cover img{object-fit:cover}
.case-media-link{display:block;width:100%;height:100%}
.case-body{padding:22px 24px 24px;border-top:3px solid var(--blue);flex:1;display:flex;flex-direction:column}
.case-loc{font-family:'Saira',sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.case-body h3{font-size:1.2rem;color:var(--navy);margin-bottom:.5em;line-height:1.15}
.case-title-link{color:inherit;text-decoration:none;transition:color .2s ease}
.case-title-link:hover{color:var(--blue)}
/* Stretch the title link over the whole card so the entire card is clickable. */
.case-title-link::after{content:"";position:absolute;inset:0;z-index:1}
/* Keep the PDF download link (and any other in-card links) clickable above the overlay. */
.case-media-link,.case-dl{position:relative;z-index:2}
.case-body p{color:var(--ink-muted);font-size:.85rem;line-height:1.5;margin-bottom:14px}
.case-feats{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.case-feats li{position:relative;padding-left:18px;font-size:.8rem;color:var(--ink-muted);line-height:1.4}
.case-feats li::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;background:var(--blue);transform:rotate(45deg)}
.case-scope b{color:var(--navy);font-family:'Saira',sans-serif;letter-spacing:.02em}
@media(max-width:980px){
.case-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.case-grid{grid-template-columns:1fr}
}
@media(max-width:1080px){
body.nav-open{overflow:hidden}
/* backdrop-filter would make the header the containing block for the fixed nav panel, collapsing it to the header's height */
header.site{backdrop-filter:none;background:#fff}
header.site nav.main{display:block;position:fixed;top:var(--mnav-top,84px);left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;overflow-y:auto;z-index:60;padding:6px 0 40px}
/* closed panel is visibility:hidden so Tab/screen readers skip it; visible immediately on open */
body.nav-open header.site nav.main{transform:translateX(0);visibility:visible;transition:transform .25s ease,visibility 0s}
header.site nav.main>ul>li.nav-cta-mobile{display:block;border-bottom:0;padding:22px 0 8px}
.nav-cta-mobile .btn{display:flex;justify-content:center;width:100%;min-height:48px}
header.site nav.main>ul{flex-direction:column;align-items:stretch;gap:0;padding:0 var(--gut)}
header.site nav.main>ul>li{border-bottom:1px solid var(--line)}
header.site nav.main .nav-link{width:100%;justify-content:space-between;padding:15px 0;font-size:1.05rem}
header.site .submenu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;padding-top:0;display:none}
header.site .has-sub.open .submenu{display:block}
/* the desktop .open rule's translateX(-50%) would shove items off-screen in the stacked mobile menu */
header.site .has-sub .submenu,header.site .has-sub.open .submenu{transform:none}
header.site .submenu-inner{border:0;box-shadow:none;padding:0 0 10px 12px;border-radius:0}
header.site .submenu-inner a{padding:11px 0;font-size:.98rem}
header.site .has-sub>.nav-link .caret{transition:transform .2s ease}
header.site .has-sub.open>.nav-link .caret{transform:rotate(-135deg) translateY(2px)}
.menu-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-active span:nth-child(2){opacity:0}
.menu-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Skip link: first focusable element on every page; hidden until it gets keyboard focus. */
.skip-link{position:absolute;left:16px;top:-80px;z-index:200;background:var(--navy-deep);color:#fff;font-family:'Saira',sans-serif;font-weight:600;font-size:.95rem;padding:12px 18px;border-radius:3px;border-left:4px solid var(--blue);text-decoration:none;box-shadow:var(--shadow-menu);transition:top .15s ease}
.skip-link:focus{top:12px;outline:3px solid var(--blue-soft);outline-offset:2px}
main:focus{outline:none}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* Touch targets on phones/tablets: at least 44×44px (Metroid Guide §10; Paul approved 19 Oct 2026).
   Stand-alone links get an invisible larger tap area (no visual change); stacked lists get spacing. */
@media(max-width:880px){
.utility a,.crumb a[href],.foot-contact a,.foot-bottom div:not(.socials)>a{position:relative}
.utility a::after,.crumb a[href]::after,.foot-contact a::after,.foot-bottom div:not(.socials)>a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.socials a{position:relative}
.socials a::after{content:"";position:absolute;inset:-6px}
footer ul{gap:0}
footer ul a{display:block;padding:12px 0}
.choice-field{gap:4px 18px}
.choice-field label{min-height:44px}
.choice-field input{width:20px;height:20px}
}

/* Inline form field errors (shown under each problem field by the lead-form script). */
.field-error{font-size:.8rem;line-height:1.35;color:var(--color-error);margin:0}
.footer-newsletter .field-error{color:var(--color-error-bg)}

/* Keyboard focus ring (Paul approved 20 Oct 2026; demo: docs/focus-ring-demo.html). Shows only for
   keyboard navigation (:focus-visible). Existing colours only: brand blue by default (visible on
   white, grey and navy), white on sections that are navy on every page. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
:where(.utility,.hero,.page-hero,.h-hero,.pc-hero,.pagehead,.nf-hero,.article-header,.legal-header,.process,.portal,.svc.dark,.exchange .panel.dark,.trust-strip,footer.site) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:#fff}
footer.site .field input:focus-visible,footer.site .field select:focus-visible,footer.site .field textarea:focus-visible{outline-color:#fff}