/* MSE hero site: shared components for the home uplift and the sub-pages (Sun 4 Oct 2026). Tokens follow the hero palette. */
:root{--ink:#070b10;--navy:#002e68;--navy-2:#0a3d82;--steel:#9fb7d1;--line-d:rgba(255,255,255,.12);--line-l:rgba(20,32,44,.14)}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
img{max-width:100%;height:auto}
picture{display:block}

/* ---------- mobile menu (no JS) ---------- */
.mnav{display:none;position:relative;margin-left:8px}
.mnav summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
 background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block;width:18px;height:1.5px;background:#eef1f4}
.mnav-list{position:absolute;right:0;top:54px;min-width:230px;display:flex;flex-direction:column;padding:10px;border-radius:18px;
 background:rgba(10,16,24,.94);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:20}
.mnav-list a{color:#eef1f4;text-decoration:none;padding:11px 14px;border-radius:10px;font-size:16px}
.mnav-list a:hover{background:rgba(255,255,255,.08);color:#fff}
@media (max-width:1100px){.mnav{display:block}}
@media (max-width:820px){.hero-top .hero-quote{margin-left:auto}}
@media (max-width:420px){.hero-top .hero-quote{display:none}.mnav{margin-left:auto}}

/* ---------- compact page hero ---------- */
.hero.phero{min-height:0}
.phero .hero-photo{width:46%;opacity:.9}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,10,15,.55) 0,rgba(6,10,15,.15) 55%,rgba(6,10,15,0) 100%)}
.phero .hero-inner{z-index:1;padding-bottom:clamp(48px,6vw,88px)}
.phero h1{font-size:clamp(36px,3.7vw,62px);max-width:16em}
.phero .hero-lead{font-size:clamp(17px,1.35vw,22px);line-height:1.4;max-width:640px}
.phero .hero-lead a{color:#fff}
.phero .hero-eyebrow{margin-top:clamp(18px,2.4vw,30px)}
.phero .hero-ctas{gap:28px;margin-top:clamp(28px,3vw,44px)}
.phero-tag{position:absolute;right:16px;bottom:12px;z-index:2;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,236,240,.6)}
.crumbs{margin-top:clamp(36px,5vw,64px)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:14px;color:#aab3bd}
.crumbs li+li::before{content:"/";margin-right:6px;color:#5f6a76}
.crumbs a{color:#d3d8de;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media (max-width:820px){
 .phero .hero-photo{width:100%;height:240px;opacity:1}
 .phero::after{display:none}
 .crumbs{margin-top:12px}
 .phero-tag{top:212px;bottom:auto}
}

/* ---------- bands ---------- */
.pband{max-width:1672px;margin:0 auto;padding:clamp(64px,8vw,112px) clamp(20px,4vw,64px);scroll-margin-top:24px}
.band.theme-dark{color:#e9ecf0}
.band.theme-light{color:#14202c}
.eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--color-accent-700)}
.eyebrow::after{content:"";width:40px;height:1px;background:currentColor}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.sec-head .eyebrow{grid-column:1/-1;margin:0}
.sec-head h2,.prose h2{font-family:var(--font-heading);font-weight:500;font-size:clamp(32px,3.5vw,54px);line-height:1.04;letter-spacing:-0.03em;margin:0}
.sec-lead{margin:0;font-size:clamp(16px,1.15vw,19px);line-height:1.6;color:color-mix(in srgb,currentColor 76%,transparent)}
.sec-more{margin:clamp(32px,3vw,44px) 0 0}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}

/* prose */
.prose{max-width:760px;font-size:17px;line-height:1.65}
.prose-wide{max-width:none}
.prose h2{margin:0 0 24px}
.prose h3{font-family:var(--font-heading);font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-0.01em;margin:36px 0 10px}
.prose p{margin:0 0 16px;color:color-mix(in srgb,currentColor 86%,transparent)}
.prose > p:first-of-type strong:first-child{color:inherit}
.prose a{text-underline-offset:3px}
.updated{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.ticks{list-style:none;padding:0;margin:8px 0 20px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:16px;height:1.5px;background:var(--color-accent-700)}
.steps{list-style:none;counter-reset:s;padding:0;margin:8px 0 24px;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;padding:16px 18px 16px 64px;border:1px solid var(--color-divider);border-radius:14px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:18px;top:15px;font-weight:500;font-size:18px;color:var(--color-accent-700)}
.qa{border-top:1px solid var(--color-divider);padding-top:4px;margin-top:24px}
.qa h3{margin-top:18px}

/* split: text + figure */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.split .prose{max-width:620px}
.split.flip > .fig{order:-1}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.flip > .fig{order:0}}
.fig{margin:0;position:relative}
.fig picture{border-radius:18px;overflow:hidden;border:1px solid var(--color-divider);background:#0f1a26}
.fig img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.fig figcaption{margin-top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.fig-wide{margin-top:40px;max-width:900px}

/* tables */
.table-wrap{overflow-x:auto;margin:20px 0 28px;border:1px solid var(--color-divider);border-radius:16px}
.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--color-divider)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700)}
.tbl tbody th{font-weight:600;min-width:170px}
@media (max-width:640px){.tbl{font-size:14px}.tbl th,.tbl td{padding:12px 14px}.tbl tbody th{min-width:120px}}

/* on-this-page pills */
.toc{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 40px}
.toc-h{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-right:6px}
.toc a,.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--color-divider);text-decoration:none;font-size:14px}
.band.theme-light .toc a{color:#14202c}
.toc a:hover{border-color:currentColor}

/* product cards */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:20px}
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards-4,.cards-3{grid-template-columns:1fr}}
.fam a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;border:1px solid var(--color-divider);
 background:color-mix(in srgb,var(--color-text) 3%,transparent);transition:border-color .2s,transform .2s}
.fam a:hover{border-color:color-mix(in srgb,var(--color-text) 40%,transparent);transform:translateY(-2px)}
.band.theme-light .fam a{color:#14202c;background:#fff}
.fam-img,.feature-img{position:relative;background:#0f1a26}
.fam-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.illus{position:absolute;left:12px;bottom:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,236,240,.72);
 padding:4px 9px;border-radius:999px;background:rgba(6,10,15,.45);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fam-body{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;flex:1}
.fam-body h3{margin:0;font-family:var(--font-heading);font-weight:600;font-size:19px;letter-spacing:-0.01em;line-height:1.2}
.fam-body p{margin:0;font-size:14.5px;line-height:1.55;color:color-mix(in srgb,currentColor 74%,transparent);flex:1}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:14px;font-weight:600;color:var(--color-accent-700)}
.band.theme-light .more{color:#1d4f7e}
.fam a:hover .more svg,.feature:hover .more svg,.link-arrow:hover svg{transform:translateX(3px)}
.more svg,.link-arrow svg{transition:transform .2s}

/* capability features */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.feature{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:22px;overflow:hidden;border:1px solid var(--color-divider);
 background:rgba(255,255,255,.03)}
.feature:hover{border-color:rgba(255,255,255,.32);color:inherit}
.feature-img img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.feature-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:8px}
.feature-body h3{margin:0;font-weight:500;font-size:clamp(22px,1.8vw,28px);letter-spacing:-0.02em}
.feature-body p{margin:0;font-size:15.5px;line-height:1.6;color:color-mix(in srgb,currentColor 76%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.band.theme-dark .chip{color:#e9ecf0;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.band.theme-dark .chip:hover{border-color:rgba(255,255,255,.4);color:#fff}

.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:4px}
.big-phone{margin:0 0 18px !important}
.big-phone a{font-size:clamp(34px,4vw,60px);font-weight:500;letter-spacing:-0.03em;color:#fff;text-decoration:none}
.big-phone a:hover{color:var(--steel)}

/* how to order */
.three{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.three{grid-template-columns:1fr}}
.three li{padding:28px 26px 30px;border-radius:20px;border:1px solid var(--color-divider);background:#fff}
.three .n{display:block;font-size:44px;font-weight:300;letter-spacing:-0.04em;color:#1d4f7e;line-height:1;margin-bottom:22px}
.three h3{margin:0 0 8px;font-weight:600;font-size:20px;letter-spacing:-0.01em}
.three p{margin:0;font-size:15px;line-height:1.6;color:#4a4d52}
.row-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:40px}
.row-ctas .link-arrow{color:#1d4f7e}

/* RFQ form */
.rfq{margin:8px 0 56px;padding:clamp(20px,3vw,36px);border:1px solid var(--color-divider);border-radius:22px;background:#fff;color:#14202c;display:grid;gap:18px;max-width:860px}
.rfq .form-note{font-size:15px;margin:0}
.rfq .req-note{font-size:13px;margin:0;opacity:.8}
.req{color:#b3261e}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-weight:600;font-size:14.5px;padding:0}
.hint{font-size:13px;opacity:.75}
.input{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #c4c8ce;border-radius:10px;background:#fbfbfc;color:#14202c;width:100%}
.input:focus{outline:2px solid #1d4f7e;outline-offset:1px}
.choices{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.choice{display:flex;gap:8px;align-items:flex-start;font-size:15px}
.rfq-more summary{cursor:pointer;font-weight:600;color:#1d4f7e}
.more-in{display:grid;gap:18px;margin-top:16px}
.popia{font-size:13.5px;line-height:1.55;padding:16px;border-radius:14px;background:#f2f3f5}
.popia h3{margin:0 0 6px;font-size:15px}
.rfq .cta-fill{border:0;cursor:pointer;font-family:inherit;justify-self:start}

/* home tweaks */
#make,#capabilities,#quality,#breakdowns,#order,#industries{scroll-margin-top:16px}
.band a.cta-fill,.band.theme-light a.cta-fill{color:#fff}
.band a.cta-fill:hover{color:#fff;background:#0a3d82}
.band.theme-dark .prose a:not(.link-arrow):not(.cta-fill){color:#cfd8e3}
@media (max-width:560px){
 .fam a{flex-direction:row;align-items:stretch}
 .fam-img{flex:0 0 38%}
 .fam-img img{height:100%;aspect-ratio:auto;min-height:150px}
 .fam-img .illus{left:6px;bottom:6px;font-size:8.5px;padding:3px 6px;letter-spacing:.1em}
 .fam-body{padding:14px 14px 16px;gap:6px}
 .fam-body h3{font-size:17px}
 .fam-body p{font-size:13.5px}
 .more{margin-top:4px;font-size:13.5px}
}
.glass3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.glass3{grid-template-columns:1fr}}
.glass3 a{display:flex;flex-direction:column;gap:10px;height:100%;padding:28px 26px;border-radius:22px;text-decoration:none;color:#e9ecf0;
 background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14);
 -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.glass3 a:hover{border-color:rgba(255,255,255,.34);color:#fff}
.glass3 h3{margin:0;font-weight:500;font-size:24px;letter-spacing:-0.02em}
.glass3 p{margin:0;flex:1;font-size:15.5px;line-height:1.6;color:rgba(233,236,240,.76)}

/* ---------- review fixes, Sun 4 Oct 2026 ---------- */
/* B2: how-to-order band on a dark band (product pages) */
.band.theme-dark .three li{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.band.theme-dark .three p{color:rgba(233,236,240,.76)}
.band.theme-dark .three .n{color:#9fb7d1}
.band.theme-dark .row-ctas .link-arrow{color:#cfd8e3}
/* B4: last-updated line sits in the page hero */
.phero .updated{margin:18px 0 0;color:#aab3bd;opacity:1}
/* I6: rest of a product lead opens the first band */
.lede{font-size:clamp(18px,1.4vw,22px) !important;line-height:1.5;font-weight:300;margin:0 0 24px !important}
/* I1: closing CTA band reuses the hero photo and the hero buttons */
.band.band-cta > section{padding-bottom:0;border-top:1px solid rgba(159,183,209,.18);
 background:linear-gradient(90deg,#0b1f3a 0%,#0b1f3a 46%,rgba(11,31,58,.7) 62%,rgba(11,31,58,.2) 100%),url(../img/hero-1000.ffca7bcf98.webp) right 38%/58% auto no-repeat,#0b1f3a !important;background:linear-gradient(90deg,#0b1f3a 0%,#0b1f3a 46%,rgba(11,31,58,.7) 62%,rgba(11,31,58,.2) 100%),image-set(url(../img/hero-1000.bfbc07c6c3.avif) 1x type("image/avif"), url(../img/hero-1400.8b03744307.avif) 2x type("image/avif"), url(../img/hero-1000.ffca7bcf98.webp) 1x type("image/webp"), url(../img/hero-1400.bd6b623888.webp) 2x type("image/webp")) right 38%/58% auto no-repeat,#0b1f3a !important}
/* text and buttons stack on the left, the photo carries the right, as in the hero */
.band.band-cta > section > div{flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;gap:0 !important;padding-top:clamp(64px,7vw,96px) !important;padding-bottom:clamp(64px,7vw,96px) !important}
.band-cta .cta-pair{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:36px}
.band-cta .hero-quote{margin-left:0;min-height:60px;padding:0 28px}
.band-cta .cta-line{color:#f3f5f7}
@media (max-width:820px){
 .band.band-cta > section{background:linear-gradient(180deg,rgba(11,31,58,.94),rgba(11,31,58,.98)),url(../img/hero-600.15f1698591.webp) center/cover no-repeat !important;background:linear-gradient(180deg,rgba(11,31,58,.94),rgba(11,31,58,.98)),image-set(url(../img/hero-600.3686580c5c.avif) type("image/avif"), url(../img/hero-600.15f1698591.webp) type("image/webp")) center/cover no-repeat !important}
 .band-cta .hero-quote{min-height:52px;font-size:16px}
 .band-cta .hero-quote svg{display:block}
}
/* I2: the logo sits over the photo on mobile, so the top of the hero is darkened behind it */
@media (max-width:820px){.hero::before{height:150px;background:linear-gradient(180deg,rgba(6,10,15,.97) 0%,rgba(6,10,15,.9) 48%,rgba(6,10,15,0) 100%)}}
/* I3: softer fade where the page-hero photo starts */
@media (min-width:821px){.phero .hero-photo{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.03) 6%,rgba(0,0,0,.1) 13%,rgba(0,0,0,.24) 21%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.7) 40%,rgba(0,0,0,.9) 50%,#000 60%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.03) 6%,rgba(0,0,0,.1) 13%,rgba(0,0,0,.24) 21%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.7) 40%,rgba(0,0,0,.9) 50%,#000 60%)}}

/* ================= Stage B depth build, Sun 4 Oct 2026 ================= */
/* What We Make dropdown (no JS: hover and focus-within) */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd > a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.7}
.nav-dd .dd{display:none;position:absolute;left:-22px;top:calc(100% + 18px);min-width:300px;flex-direction:column;padding:10px;border-radius:18px;
 background:rgba(10,16,24,.96);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(0,0,0,.5);z-index:40}
.nav-dd .dd::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.nav-dd:hover .dd,.nav-dd:focus-within .dd{display:flex}
.hero-nav .dd a{padding:9px 14px;border-radius:10px;font-size:15px;white-space:nowrap}
.hero-nav .dd a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.hero-nav .dd a.dd-all{font-weight:600;color:#9fb7d1}
.dd-rule{display:block;height:1px;margin:6px 10px;background:rgba(255,255,255,.14)}
.mnav-sub{display:grid;grid-template-columns:1fr 1fr;gap:0 4px;margin:0 0 6px 10px;padding-left:8px;border-left:1px solid rgba(255,255,255,.14)}
.mnav-list .mnav-sub a{font-size:13.5px;padding:7px 8px;color:#c8d0d9}
.mnav-list{max-width:calc(100vw - 32px)}

/* workshop figures: caption, not the illustration label */
.wfig figcaption{font-size:12px;letter-spacing:.06em;text-transform:none;opacity:.72}
.fig-port img{aspect-ratio:4/5}
.split .fig-port{max-width:440px;justify-self:center;width:100%}
.fig-wide{max-width:none;margin-top:44px}
.fig-wide img{aspect-ratio:21/9}
@media (max-width:640px){.fig-wide img{aspect-ratio:3/2}}
.phero-tag{max-width:60%;text-align:right;letter-spacing:.08em}

/* gallery grid: Inside our works */
.wgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(190px,17vw,300px);grid-auto-flow:row dense;gap:16px}
.wtile{position:relative;min-width:0}
.wtile.wt-feat{grid-column:span 2;grid-row:span 2}
.wtile.wt-port{grid-row:span 2}
.wtile > a,.wtile figure{display:block;height:100%;margin:0}
.wtile > a{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);text-decoration:none;color:#f3f5f7;background:#0f1a26}
.wtile picture{height:100%}
.wtile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wtile > a:hover img{transform:scale(1.035)}
.wtile figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px;padding:40px 18px 16px;
 background:linear-gradient(180deg,rgba(6,10,15,0) 0%,rgba(6,10,15,.78) 55%,rgba(6,10,15,.92) 100%)}
.wt-cap{font-size:15px;font-weight:500;letter-spacing:-0.005em;color:#f3f5f7}
.wt-go{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#9fb7d1}
.wt-go svg{width:16px;height:16px;transition:transform .2s}
.wtile > a:hover .wt-go svg{transform:translateX(3px)}
.wtile > a:focus-visible{outline:2px solid #9fb7d1;outline-offset:3px}
.wt-feat .wt-cap{font-size:clamp(17px,1.5vw,22px)}
.wt-text > div{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px;border-radius:18px;border:1px solid rgba(255,255,255,.14);
 background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.wt-text p:not(.eyebrow){margin:0;font-size:16px;line-height:1.5;color:rgba(233,236,240,.82)}
.wt-text .eyebrow{margin:0}
.band.theme-light .wt-text > div{border-color:var(--line-l);background:#fff}
.band.theme-light .wt-text p{color:#33363a}
.wgrid-even{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(170px,14vw,240px)}
.wgrid-strip{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(180px,16vw,280px)}
@media (max-width:1100px){.wgrid-even{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.wgrid,.wgrid-strip{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(160px,30vw,260px)}}
@media (max-width:560px){
 .wgrid{grid-template-columns:1fr;grid-auto-rows:auto}
 .wtile.wt-feat,.wtile.wt-port{grid-column:auto;grid-row:auto}
 .wtile img{height:auto;aspect-ratio:3/2}
 .wtile.wt-port img{aspect-ratio:4/5}
 .wgrid-strip,.wgrid-even{grid-template-columns:1fr 1fr;gap:10px}
 .wgrid-strip .wtile img,.wgrid-even .wtile img{aspect-ratio:1/1}
 .wgrid-strip figcaption,.wgrid-even figcaption{padding:28px 10px 10px}
 .wgrid-strip .wt-cap,.wgrid-even .wt-cap{font-size:13px}
 .wgrid-strip .wt-go,.wgrid-even .wt-go{display:none}
}

/* plain facts */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--color-divider)}
.stats li{border-bottom:1px solid var(--color-divider)}
.stats li:not(:nth-child(3n)){border-right:1px solid var(--color-divider)}
.stats a{display:flex;flex-direction:column;gap:12px;height:100%;padding:30px 28px 32px;text-decoration:none;color:inherit}
.band.theme-light .stats a{color:#14202c}
.stats a:hover{background:color-mix(in srgb,currentColor 4%,transparent)}
.stats strong{font-weight:400;font-size:clamp(34px,3.4vw,54px);letter-spacing:-0.035em;line-height:1;color:#0b2148}
.band.theme-dark .stats strong{color:#f3f5f7}
.stats span{font-size:15px;line-height:1.55;color:color-mix(in srgb,currentColor 74%,transparent);max-width:30ch}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}.stats li:not(:nth-child(3n)){border-right:0}.stats li:nth-child(odd){border-right:1px solid var(--color-divider)}}
@media (max-width:560px){.stats{grid-template-columns:1fr}.stats li:nth-child(odd){border-right:0}.stats a{padding:22px 4px}}

/* proof + why */
.duo-text{gap:clamp(32px,5vw,96px);align-items:start}
.duo-text .prose{max-width:none}
.duo-text h2{font-size:clamp(28px,2.6vw,40px) !important}
.row-links{display:flex;flex-wrap:wrap;gap:18px 36px;margin-top:clamp(32px,3vw,44px)}
.band.theme-light .row-links .link-arrow{color:#1d4f7e}

/* four ways a job starts */
.sends{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1100px){.sends{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sends{grid-template-columns:1fr}}
.sends a{display:flex;flex-direction:column;gap:8px;height:100%;padding:26px 24px 26px;border-radius:20px;border:1px solid var(--color-divider);background:#fff;color:#14202c;text-decoration:none;transition:border-color .2s,transform .2s}
.sends a:hover{border-color:#1d4f7e;transform:translateY(-2px);color:#14202c}
.sends .n{font-size:36px;font-weight:300;letter-spacing:-0.04em;color:#1d4f7e;line-height:1;margin-bottom:12px}
.sends h3{margin:0;font-weight:600;font-size:19px;letter-spacing:-0.01em}
.sends p{margin:0;flex:1;font-size:15px;line-height:1.6;color:#4a4d52}
.band.theme-dark .sends a{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#e9ecf0}
.band.theme-dark .sends p{color:rgba(233,236,240,.76)}
.band.theme-dark .sends .n{color:#9fb7d1}

/* home questions */
.qa-duo{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,80px)}
.qa-duo .qa{margin-top:0}
@media (max-width:820px){.qa-duo{grid-template-columns:1fr}}

.wt-text .link-arrow{align-self:flex-start;color:#cfd8e3}
.band.theme-light .wt-text .link-arrow{color:#1d4f7e}
.band .sends a h3{color:inherit}
/* question bands with no image: two columns of answers */
.qa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,80px);align-items:start}
.qa-grid > *:not(.qa){grid-column:1/-1}
@media (max-width:820px){.qa-grid{grid-template-columns:1fr}}
/* phone: the gallery goes two-up so twelve views stay a short scroll */
@media (max-width:560px){
 .wgrid{grid-template-columns:1fr 1fr;gap:10px}
 .wgrid .wtile img,.wgrid .wtile.wt-port img{aspect-ratio:1/1}
 .wgrid .wtile.wt-feat,.wgrid .wtile.wt-text{grid-column:1/-1}
 .wgrid .wtile.wt-feat img{aspect-ratio:3/2}
 .wgrid figcaption{padding:28px 10px 10px}
 .wgrid .wt-cap{font-size:13px}
 .wgrid .wt-go{font-size:11.5px}
 .wgrid .wt-go svg{display:none}
 .wgrid .wt-feat .wt-cap{font-size:16px}
}
@media (max-width:560px){.wgrid .wtile:not(.wt-feat) .wt-place{display:none}}

/* ---------- review fixes, Sun 4 Oct 2026 ---------- */
/* the page hero clips its overflow: the phone menu is fixed to the viewport and scrolls; the What We Make panel is two columns so it ends inside the hero; both opaque */
.phero .mnav-list{position:fixed;top:76px;left:16px;right:16px;max-width:none;max-height:calc(100dvh - 92px);overflow-y:auto;background:#0a1018}
.nav-dd .dd{grid-template-columns:1fr 1fr;column-gap:6px;min-width:540px;background:#0a1018}
.nav-dd:hover .dd,.nav-dd:focus-within .dd{display:grid}
.nav-dd .dd a.dd-all,.nav-dd .dd .dd-rule{grid-column:1/-1}
/* workshop captions readable (AA) on both band themes */
.wfig figcaption{font-size:13px;opacity:1;color:#5b6673}
.theme-dark .wfig figcaption{color:#9aa5b1}
/* hero image tag legible over bright metal */
.phero-tag{color:rgba(233,236,240,.8);text-shadow:0 1px 3px rgba(0,0,0,.85)}

/* SEO pass, Mon 5 Oct 2026: tap targets (WCAG 2.2 target size, 24px minimum). Vertical padding on an inline link grows
   its hit area without moving anything, so breadcrumbs and table links keep the layout; footer links get taller rows
   on phones only. */
.crumbs a{padding:6px 0}
.tbl a{padding:10px 0}
@media (max-width:820px){footer a{display:block;padding:7px 0}}