@font-face{font-family:'Cabinet Grotesk';src:url('fonts/cabinet-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('fonts/cabinet-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --deep:#071634; --deep-alt:#0D2249; --bg:#F3F6FB; --surface:#FFFFFF;
  --ink:#0B1B33; --accent:#E8A93B; --tint:#C9DBF2; --muted:#5C6E8A; --line:#DCE5F1;
  --on-deep:#E7EDF8; --on-deep-muted:#93A6C4; --hair-deep:rgba(255,255,255,.10);
  --r-sm:10px; --r-md:22px; --r-lg:32px; --r-pill:999px;
  --s-xs:8px; --s-sm:16px; --s-md:28px; --s-lg:56px; --s-xl:96px; --s-xxl:140px;
  --font-d:'Cabinet Grotesk',Georgia,sans-serif;
  --font-b:'General Sans',Helvetica,Arial,sans-serif;
  --wrap:1180px;
}

/* Neutralise UA + inherited defaults at zero specificity so component rules always win */
:where(.bw *),:where(.bw *::before),:where(.bw *::after){box-sizing:border-box}
:where(.bw h1,.bw h2,.bw h3,.bw h4,.bw h5,.bw h6,.bw p,.bw ul,.bw ol,.bw li,.bw figure,.bw blockquote,.bw dl,.bw dd,.bw form,.bw fieldset){margin:0;padding:0;border:0}
:where(.bw ul,.bw ol){list-style:none}
:where(.bw img,.bw svg){display:block;max-width:100%}
:where(.bw a){color:inherit;text-decoration:none}
:where(.bw button,.bw input,.bw textarea,.bw select){font:inherit;color:inherit}

/* the navigation is fixed, so anchor jumps stop short of it */
html{-webkit-text-size-adjust:100%;scroll-padding-top:108px}
@media (max-width:900px){html{scroll-padding-top:94px}}
body.bw{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-b);font-weight:400;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
.bw ::selection{background:var(--accent);color:var(--deep)}

/* One fluid gutter for every band. Longhand only in overrides, or the gutter is wiped. */
.bw-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4.4vw,32px)}
.bw-band{position:relative}
.bw-band--deep{background:var(--deep);color:var(--on-deep)}
.bw-band--light{background:var(--bg);color:var(--ink)}
.bw-band--tint{background:var(--tint);color:var(--deep)}
.bw-pad{padding:var(--s-xl) 0}
.bw-pad-lg{padding:var(--s-xxl) 0}

/* Type ------------------------------------------------------------------- */
.bw h1,.bw h2,.bw h3,.bw h4,.bw .bw-d{font-family:var(--font-d);font-weight:800;line-height:1.04;letter-spacing:-.02em}
.bw-d1{font-size:clamp(44px,6.1vw,76px)}
.bw-d2{font-size:clamp(34px,4.3vw,54px);line-height:1.06}
.bw-d3{font-size:clamp(24px,2.5vw,32px);line-height:1.1;letter-spacing:-.01em}
.bw-d4{font-size:20px;line-height:1.2;letter-spacing:-.005em}
.bw-lead{font-size:clamp(17px,1.35vw,19px);line-height:1.62;max-width:44ch}
.bw-body{max-width:62ch}
.bw-muted{color:var(--muted)}
.bw-band--deep .bw-muted{color:var(--on-deep-muted)}
.bw-label{font-family:var(--font-b);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bw-band--deep .bw-label{color:var(--on-deep-muted)}
.bw-hl{color:var(--accent)}

/* Buttons ---------------------------------------------------------------- */
.bw-btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-pill);padding:15px 26px;font-family:var(--font-b);font-weight:600;font-size:15px;line-height:1;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease}
.bw-btn:active{transform:translateY(1px)}
.bw-btn svg{width:14px;height:14px;flex:none}
.bw-btn--primary{background:var(--accent);color:var(--deep)}
.bw-btn--primary:hover{background:#F2BC55}
.bw-btn--solid{background:var(--deep);color:#fff}
.bw-btn--solid:hover{background:var(--deep-alt)}
.bw-btn--ghost{background:transparent;border-color:rgba(11,27,51,.22);color:var(--ink)}
.bw-btn--ghost:hover{border-color:var(--ink)}
.bw-band--deep .bw-btn--ghost{border-color:rgba(255,255,255,.26);color:var(--on-deep)}
.bw-band--deep .bw-btn--ghost:hover{border-color:#fff;color:#fff}
.bw-btn--sm{padding:11px 20px;font-size:14px}
.bw-note{font-size:14px;color:var(--muted);margin-top:14px}
.bw-band--deep .bw-note{color:var(--on-deep-muted)}
.bw-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Nav -------------------------------------------------------------------- */
.bw-navshell{position:fixed;top:0;left:0;right:0;z-index:60;padding:18px 0;transition:padding .2s ease}
.bw-band--top{padding-top:98px}
.bw-navshell.is-stuck{padding:10px 0}
.bw-nav{display:flex;align-items:center;gap:18px;background:var(--deep-alt);border:1px solid var(--hair-deep);border-radius:var(--r-pill);padding:10px 12px 10px 22px;color:var(--on-deep)}
.bw-navshell.is-stuck .bw-nav{background:rgba(7,22,52,.92);backdrop-filter:blur(10px)}
.bw-brand{display:flex;align-items:center;margin-right:auto}
.bw-brand img{display:block;height:42px;width:auto}
.bw-brand--foot img{height:46px}
.bw-menu{display:flex;align-items:center;gap:4px}
.bw-menu a{padding:9px 15px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;color:var(--on-deep-muted);transition:color .16s ease,background-color .16s ease}
.bw-menu a:hover{color:#fff}
.bw-menu a.is-active{color:var(--deep);background:var(--accent);font-weight:600}
.bw-burger{display:none;width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--hair-deep);background:transparent;align-items:center;justify-content:center}
.bw-burger span{display:block;width:16px;height:1.5px;background:var(--on-deep);position:relative}
.bw-burger span::before,.bw-burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--on-deep)}
.bw-burger span::before{top:-5px}.bw-burger span::after{top:5px}

/* Hero ------------------------------------------------------------------- */
.bw-hero{padding:clamp(20px,3vw,46px) 0 clamp(70px,8vw,120px)}
.bw-hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,72px);align-items:center}
.bw-hero__copy h1{font-size:clamp(35px,4.25vw,55px);line-height:1.06}
.bw-hero__copy .bw-lead{margin-top:22px;color:var(--on-deep-muted)}
.bw-hero__copy .bw-actions{margin-top:34px}
.bw-hero__art{position:relative;min-height:420px}
.bw-media{border-radius:var(--r-md);overflow:hidden;background:linear-gradient(150deg,#0F2A57 0%,#071634 58%,#0A1C3E 100%);position:relative}
.bw-media::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 78% 12%,rgba(232,169,59,.16),transparent 60%);pointer-events:none}
.bw-media img{width:100%;height:100%;object-fit:cover;display:block}
.bw-hero__main{height:420px;border:1px solid var(--hair-deep)}
.bw-stat{position:absolute;left:-34px;bottom:-30px;background:var(--surface);color:var(--ink);border-radius:var(--r-md);padding:20px 24px;min-width:196px}
.bw-stat__n{font-family:var(--font-d);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.03em}
.bw-stat__row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bw-stat__was{font-family:var(--font-d);font-weight:700;font-size:20px;line-height:1;letter-spacing:-.02em;color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--accent)}
.bw-stat__l{font-size:13.5px;color:var(--muted);margin-top:6px}
.bw-stat--2{left:auto;right:-22px;bottom:auto;top:-26px;background:var(--accent);color:var(--deep);min-width:0}
.bw-stat--2 .bw-stat__n{font-size:26px}
.bw-stat--2 .bw-stat__l{color:rgba(7,22,52,.72)}

/* Ventures strip --------------------------------------------------------- */
/* the sentence always takes a line of its own; the ventures sit in one row below it */
.bw-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(16px,3vw,34px);padding:26px 0;border-top:1px solid var(--hair-deep)}
/* no max-width here: it would clamp the flex basis and let the names share the line */
.bw-strip__t{flex:1 0 100%;font-size:14.5px;color:var(--on-deep-muted);margin-right:0}
.bw-strip__i{font-family:var(--font-d);font-weight:700;font-size:18px;color:var(--on-deep);letter-spacing:-.01em;white-space:nowrap;text-decoration:none;transition:color .2s ease}
.bw-strip__i:hover,.bw-strip__i:focus-visible{color:#7299A0}

/* Split (problem) -------------------------------------------------------- */
.bw-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:start}
.bw-split p+p{margin-top:20px}
.bw-pull{border-left:2px solid var(--accent);padding:6px 0 6px 24px;font-family:var(--font-d);font-weight:700;font-size:clamp(21px,2vw,26px);line-height:1.22;letter-spacing:-.015em}
.bw-pull small{display:block;font-family:var(--font-b);font-weight:400;font-size:15.5px;line-height:1.6;letter-spacing:0;color:var(--muted);margin-top:16px}

/* Ledger ----------------------------------------------------------------- */
.bw-ledger{margin-top:var(--s-lg);border-top:1px solid var(--line)}
.bw-band--deep .bw-ledger{border-color:var(--hair-deep)}
.bw-row{display:grid;grid-template-columns:.42fr .58fr;gap:clamp(20px,4vw,64px);padding:30px 0;border-bottom:1px solid var(--line)}
.bw-band--deep .bw-row{border-color:var(--hair-deep)}
.bw-row h3{font-size:clamp(20px,1.9vw,25px)}
.bw-row p{max-width:56ch}

/* Offer panel ------------------------------------------------------------ */
.bw-offerband{background:linear-gradient(180deg,var(--deep) 0%,var(--deep) 56%,var(--bg) 56%,var(--bg) 100%);padding:var(--s-xl) 0 var(--s-xl)}
.bw-offer{background:var(--surface);color:var(--ink);border-radius:var(--r-lg);border:1px solid var(--line);padding:clamp(30px,4vw,54px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,60px)}
.bw-offer__was{margin-top:24px;font-size:16px;font-weight:500;color:var(--muted);letter-spacing:.01em}
.bw-offer__was s{font-family:var(--font-d);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-.02em;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--accent);margin-left:4px}
.bw-offer__price{margin-top:6px;font-family:var(--font-d);font-weight:800;font-size:clamp(52px,7vw,84px);line-height:.98;letter-spacing:-.035em}
.bw-offer__cur{font-size:.36em;vertical-align:.52em;letter-spacing:0;margin-right:.08em;font-weight:700}
.bw-offer__sub{margin-top:14px;font-size:16px;color:var(--muted);max-width:30ch}
.bw-offer__cta{margin-top:30px}
.bw-check{display:grid;gap:14px}
.bw-check li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:16px;line-height:1.55}
.bw-check svg{width:18px;height:18px;margin-top:4px;color:var(--accent)}
.bw-check b{font-weight:600}

/* Take-off banner -------------------------------------------------------- */
.bw-banner{position:relative;min-height:clamp(380px,46vw,520px);display:flex;align-items:center;overflow:hidden;background:var(--deep)}
.bw-banner__bg{position:absolute;inset:0;background-image:linear-gradient(96deg,rgba(7,22,52,.94) 4%,rgba(7,22,52,.72) 46%,rgba(7,22,52,.35) 100%),var(--bw-banner-img,linear-gradient(140deg,#0F2A57,#071634 60%,#123063));background-size:cover;background-position:center}
.bw-banner__in{position:relative;padding-top:var(--s-xl);padding-bottom:var(--s-xl)}
.bw-banner h2{max-width:16ch;color:#fff}
.bw-banner p{margin-top:20px;max-width:48ch;color:#C2D0E6;font-size:17.5px}
.bw-banner .bw-actions{margin-top:32px}

/* Bento (year two) ------------------------------------------------------- */
.bw-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:var(--s-lg)}
.bw-cell{border-radius:var(--r-md);padding:28px;border:1px solid var(--hair-deep);background:var(--deep-alt)}
.bw-cell h3{font-size:20px;margin-bottom:10px}
.bw-cell p{font-size:15.5px;line-height:1.58;color:var(--on-deep-muted);max-width:40ch}
.bw-cell--w3{grid-column:span 3}
.bw-cell--w2{grid-column:span 2}
.bw-cell--art{background:linear-gradient(150deg,#123063 0%,#0D2249 62%,#0A1C3E 100%);position:relative;overflow:hidden}
.bw-cell--art::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(232,169,59,.22),transparent 68%)}
.bw-cell--accent{background:var(--accent);border-color:var(--accent)}
.bw-cell--accent h3{color:var(--deep)}
.bw-cell--accent p{color:rgba(7,22,52,.76)}

/* Work cards ------------------------------------------------------------- */
.bw-works{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:var(--s-lg)}
.bw-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease}
.bw-card:hover{border-color:#B9C9DF;transform:translateY(-3px)}
.bw-card__img{aspect-ratio:16/11;background:linear-gradient(150deg,#123063,#071634 65%);position:relative}
.bw-card__img img{width:100%;height:100%;object-fit:cover}
.bw-card__b{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.bw-card__b h3{font-size:20px}
.bw-card__b p{font-size:15.5px;color:var(--muted);line-height:1.58}
.bw-card__meta{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.bw-card__more{margin-top:auto;padding-top:8px;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px}
.bw-card__more svg{width:13px;height:13px}

/* FAQ -------------------------------------------------------------------- */
.bw-faq{margin-top:var(--s-lg);border-top:1px solid var(--line)}
.bw-faq details{border-bottom:1px solid var(--line)}
.bw-faq summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;font-family:var(--font-d);font-weight:700;font-size:clamp(18px,1.7vw,22px);line-height:1.28;letter-spacing:-.012em}
.bw-faq summary::-webkit-details-marker{display:none}
.bw-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-6px;background:currentColor;transition:transform .2s ease;clip-path:polygon(46% 0,54% 0,54% 46%,100% 46%,100% 54%,54% 54%,54% 100%,46% 100%,46% 54%,0 54%,0 46%,46% 46%)}
.bw-faq details[open] summary::after{transform:rotate(135deg)}
.bw-faq__a{padding:0 60px 28px 0;max-width:66ch;color:var(--muted);font-size:16.5px}

/* Closing band + form ---------------------------------------------------- */
.bw-close{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,64px);align-items:start}
.bw-close h2{max-width:20ch;font-size:clamp(30px,3.3vw,42px)}
.bw-close .bw-lead{margin-top:18px;color:rgba(7,22,52,.72)}
.bw-close .bw-check svg{color:var(--deep)}
.bw-form{display:grid;gap:12px}
.bw-form input,.bw-form textarea{width:100%;background:#fff;border:1px solid rgba(7,22,52,.14);border-radius:var(--r-sm);padding:15px 16px;font-size:15.5px;color:var(--ink)}
.bw-form textarea{min-height:112px;resize:vertical}
.bw-form input::placeholder,.bw-form textarea::placeholder{color:#6C7E99}
.bw-form input:focus,.bw-form textarea:focus{outline:2px solid var(--deep);outline-offset:1px;border-color:transparent}
.bw-form__two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bw-form label{display:block}
.bw-form .bw-btn{justify-content:center;width:100%}
.bw-msg{border-radius:var(--r-sm);padding:16px 18px;font-size:15.5px;background:#fff;border:1px solid rgba(7,22,52,.14)}

/* Footer ----------------------------------------------------------------- */
.bw-foot{background:var(--deep);color:var(--on-deep);padding:56px 0 40px}
.bw-foot__top{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;padding-bottom:34px;border-bottom:1px solid var(--hair-deep)}
.bw-foot__nav{display:flex;flex-wrap:wrap;gap:26px}
.bw-foot__nav a{font-size:15px;color:var(--on-deep-muted)}
.bw-foot__nav a:hover{color:#fff}
.bw-foot__nav a.bw-foot__cta{color:var(--accent);font-weight:600}
.bw-foot__nav a.bw-foot__cta:hover{color:#F2BC55}
.bw-foot__bot{display:flex;flex-wrap:wrap;gap:16px 30px;justify-content:space-between;padding-top:26px;font-size:14px;color:var(--on-deep-muted)}
.bw-foot__bot a:hover{color:#fff}

/* Page headers ----------------------------------------------------------- */
.bw-phead{padding:clamp(24px,3vw,50px) 0 clamp(52px,7vw,92px)}
.bw-phead__grid{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;justify-content:space-between}
.bw-phead p{margin-top:20px;max-width:52ch;color:var(--on-deep-muted)}

/* Editorial (about) ------------------------------------------------------ */
.bw-vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px)}
.bw-vm__c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(26px,3vw,40px)}
.bw-vm__c h2{font-size:clamp(24px,2.4vw,30px);margin-bottom:14px}
.bw-vm__c p{color:var(--muted);max-width:46ch}
.bw-vm__c--deep{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.bw-vm__c--deep p{color:var(--on-deep-muted)}
.bw-prin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px) clamp(30px,5vw,72px);margin-top:var(--s-lg)}
.bw-prin__i h3{font-size:21px;margin-bottom:10px}
.bw-prin__i p{color:var(--muted);font-size:16px;max-width:44ch}
.bw-prin__i{padding-top:24px;border-top:1px solid var(--line)}
.bw-band--deep .bw-prin__i{border-color:var(--hair-deep)}
.bw-band--deep .bw-prin__i p{color:var(--on-deep-muted)}

/* Post list -------------------------------------------------------------- */
.bw-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
.bw-post__img{aspect-ratio:16/11;border-radius:var(--r-md);overflow:hidden;background:linear-gradient(150deg,#123063,#071634 65%)}
.bw-post__img img{width:100%;height:100%;object-fit:cover}
.bw-post h3{font-size:20px;margin:18px 0 8px}
.bw-post__meta{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.bw-post p{font-size:15.5px;color:var(--muted);margin-top:10px;line-height:1.58}
.bw-pager{display:flex;gap:10px;justify-content:center;margin-top:var(--s-lg)}
.bw-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:15px;font-weight:500;background:#fff}
.bw-pager .page-numbers.current{background:var(--deep);color:#fff;border-color:var(--deep)}
/* Empty state: copy on the left, a visual the full height of the box on the right */
.bw-empty{border:1px dashed #C3D2E6;border-radius:var(--r-md);background:var(--surface);padding:0;overflow:hidden;display:grid;grid-template-columns:1.12fr .88fr;align-items:stretch}
.bw-empty__body{padding:clamp(30px,4.4vw,56px)}
.bw-empty__art{position:relative;min-height:260px;background:linear-gradient(150deg,#123063 0%,#071634 60%,#0A1C3E 100%)}
.bw-empty__art::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 76% 16%,rgba(232,169,59,.18),transparent 62%)}
.bw-empty__art img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.bw-empty h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:12px}
.bw-empty p{color:var(--muted);max-width:52ch}
.bw-empty .bw-actions{margin-top:26px}

/* Article ---------------------------------------------------------------- */
.bw-article{max-width:720px;margin:0 auto;font-size:17.5px;line-height:1.72}
.bw-article > * + *{margin-top:22px}
.bw-article h2{font-size:clamp(26px,2.6vw,34px);margin-top:44px}
.bw-article h3{font-size:clamp(21px,2vw,26px);margin-top:34px}
.bw-article ul,.bw-article ol{padding-left:22px}
.bw-article ul li{list-style:disc;margin-top:8px}
.bw-article ol li{list-style:decimal;margin-top:8px}
.bw-article img{border-radius:var(--r-md);margin:34px 0}
.bw-article a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent)}
.bw-article blockquote{border-left:2px solid var(--accent);padding-left:22px;font-family:var(--font-d);font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.012em}
.bw-hero__post{aspect-ratio:21/9;border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s-lg);background:linear-gradient(150deg,#123063,#071634 65%)}
.bw-hero__post img{width:100%;height:100%;object-fit:cover}

/* Responsive ------------------------------------------------------------- */
@media (max-width:1040px){
  .bw-bento{grid-template-columns:repeat(4,1fr)}
  .bw-cell--w3{grid-column:span 2}
  .bw-cell--w2{grid-column:span 2}
  .bw-works,.bw-posts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  /* every multi-column layout collapses to a single column here */
  .bw-hero__grid,.bw-split,.bw-offer,.bw-close,.bw-vm,.bw-prin,.bw-row,.bw-empty{grid-template-columns:1fr}
  .bw-empty__art{min-height:220px;order:-1}
  .bw-hero__art{min-height:0;margin-top:8px}
  .bw-hero__main{height:300px}
  .bw-stat{left:16px;bottom:-24px;top:auto}
  /* bottom must be reset here or the card stretches between top and bottom */
  .bw-stat--2{right:16px;left:auto;top:-20px;bottom:auto}
  .bw-offerband{background:linear-gradient(180deg,var(--deep) 0%,var(--deep) 30%,var(--bg) 30%,var(--bg) 100%)}
  .bw-row{gap:10px;padding:26px 0}
  .bw-menu{display:none}
  .bw-burger{display:flex}
  .bw-nav.is-open{flex-wrap:wrap;border-radius:var(--r-lg)}
  .bw-nav.is-open .bw-brand img{height:28px}
  .bw-nav.is-open .bw-menu{display:flex;flex-direction:column;align-items:stretch;width:100%;order:9;gap:2px;padding:8px 0 6px;margin-top:8px;border-top:1px solid var(--hair-deep)}
  .bw-nav.is-open .bw-menu a{padding:13px 12px}
  .bw-band--top{padding-top:84px}
  /* the ventures shrink rather than wrap, so they hold one row on a phone */
  .bw-strip{gap:12px clamp(14px,4vw,26px)}
  .bw-strip__i{font-size:clamp(13px,3.4vw,18px)}
  .bw-pad,.bw-pad-lg{padding:var(--s-lg) 0}
  .bw-banner__in{padding-top:var(--s-lg);padding-bottom:var(--s-lg)}
  .bw-split[style*="align-items:end"]{gap:20px}
}
@media (max-width:640px){
  body.bw{font-size:16.5px}
  .bw-bento,.bw-works,.bw-posts{grid-template-columns:1fr}
  .bw-empty__art{min-height:180px;order:-1}
  .bw-cell--w3,.bw-cell--w2{grid-column:span 1}
  .bw-form__two{grid-template-columns:1fr}
  .bw-nav{padding:8px 8px 8px 14px;gap:10px}
  .bw-brand img{height:30px}
  .bw-btn--sm{padding:10px 14px;font-size:13px;gap:7px}
  .bw-burger{width:38px;height:38px}
  .bw-actions .bw-btn{width:100%;justify-content:center}
  /* the overlap is kept on a phone; the cards shrink to sit inside the image instead of dropping below it */
  .bw-hero__art{display:block;margin-top:30px;margin-bottom:38px}
  .bw-hero__main{height:290px}
  .bw-stat{left:12px;right:auto;bottom:-20px;top:auto;padding:14px 16px;min-width:0;max-width:82%}
  .bw-stat__n{font-size:28px}
  .bw-stat__was{font-size:15px}
  .bw-stat__l{font-size:12px;margin-top:5px}
  .bw-stat--2{left:auto;right:12px;top:-16px;bottom:auto;padding:11px 14px;max-width:58%}
  .bw-stat--2 .bw-stat__n{font-size:20px}
}

/* Elevation ---------------------------------------------------------------
   One soft glass shadow in two weights: light surfaces, and deep ones. */
:root{
  --glass-light:0 1px 2px rgba(11,27,51,.05),0 12px 30px -12px rgba(11,27,51,.16),inset 0 1px 0 rgba(255,255,255,.70);
  --glass-deep: 0 2px 4px rgba(3,10,26,.30),0 16px 38px -16px rgba(3,10,26,.62),inset 0 1px 0 rgba(255,255,255,.07);
  --glass-lift: 0 2px 4px rgba(11,27,51,.06),0 24px 48px -18px rgba(11,27,51,.22),inset 0 1px 0 rgba(255,255,255,.80);
}
.bw-card,.bw-offer,.bw-vm__c,.bw-empty,.bw-msg{box-shadow:var(--glass-light)}
.bw-nav,.bw-cell,.bw-vm__c--deep,.bw-stat,.bw-stat--2,.bw-media,.bw-hero__post{box-shadow:var(--glass-deep)}
.bw-navshell.is-stuck .bw-nav{box-shadow:0 2px 4px rgba(3,10,26,.34),0 20px 44px -18px rgba(3,10,26,.70),inset 0 1px 0 rgba(255,255,255,.08)}
.bw-card{transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.bw-card:hover{box-shadow:var(--glass-lift)}
@media (prefers-reduced-motion:reduce){.bw-card{transition:none}}

/* Reveal ------------------------------------------------------------------
   The set below is mirrored by the SEL string in assets/bw.js. A bare section
   heading (a .bw-d1/.bw-d2/.bw-d3 sitting directly in .bw-wrap, not grouped
   under a card or split) is included on its own so every headline on every
   page gets the reveal, not only ones bundled inside another block. Below
   that, the same idea goes one step further: rather than a card or column
   fading in as one piece, each paragraph, list item and headline inside it
   is its own target, so a section reveals itself a line at a time as it
   crosses into view rather than arriving all at once.

   bw.js drives every element the same way on every device: the first screen
   plays on load on a timer, and everything below the fold plays the same
   timed cascade the moment an IntersectionObserver reports it has crossed
   into view. One mechanism everywhere means a desktop mouse-wheel scroll and
   a mobile touch-scroll both produce the same fade, rather than tying one of
   them to raw scroll position, which can look stagnant on a fast, notchy
   mouse-wheel scroll. bw.js latches each element at full opacity once its
   animation ends, so scrolling back up never plays a reveal backwards.

   Everyone gets the reveal. prefers-reduced-motion changes the distance
   travelled, not whether it happens. */
:root{
  --bw-rise:18px;
  --bw-dur:1.05s;
  --bw-ease:cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion:reduce){
  :root{--bw-rise:0px;--bw-dur:.55s}  /* a cross-fade, with no movement */
}

.bw-js :is(
  .bw-wrap > .bw-d1, .bw-wrap > .bw-d2, .bw-wrap > .bw-d3,
  .bw-hero__copy > *, .bw-stat > *, .bw-strip > *, .bw-media,
  .bw-phead > *, .bw-phead__grid > div > *, .bw-phead__grid > a,
  .bw-split > *, .bw-split > div > h2, .bw-split > div > .bw-actions,
  .bw-body > p, .bw-pull > small,
  .bw-row > *, .bw-cell > *, .bw-vm__c > *, .bw-prin__i > *,
  .bw-offer > div:first-child > *, .bw-offer__cta > *, .bw-check li,
  .bw-banner__in > *, .bw-card__img, .bw-card__b > *,
  .bw-post__img, .bw-post > a > h3, .bw-post > .bw-post__meta, .bw-post > p,
  .bw-empty__art, .bw-empty__body > *, .bw-faq summary, .bw-article > *,
  .bw-close > div > h2, .bw-close > div > .bw-lead, .bw-close > div > .bw-msg,
  .bw-close > div > form, .bw-hero__post, .bw-foot__top > *, .bw-foot__bot > *
):not(.bw-shown){
  opacity:0;
  transform:translateY(var(--bw-rise));
}

/* The first screen, and the fallback path. An animation rather than a
   transition, so it never competes with the card hover lift. */
.bw-js .bw-in{
  animation:bw-rise var(--bw-dur) var(--bw-ease) var(--bw-d,0ms) both;
  animation-timeline:auto;
}

@keyframes bw-rise{
  from{opacity:0;transform:translateY(var(--bw-rise))}
  to  {opacity:1;transform:none}
}

/* Motion ------------------------------------------------------------------
   The reveal above handles sections arriving. This is everything else: the
   navigation, the transitions between the four pages, and the few moments on
   a page worth drawing the eye to.

   .bw-seen is set before paint on every page after the first in a session, so
   the navigation makes its entrance once and then simply persists. */

/* Navigation --------------------------------------------------------------- */
.bw-js:not(.bw-seen) .bw-navshell{animation:bw-drop .7s var(--bw-ease) both}
.bw-js:not(.bw-seen) .bw-brand{animation:bw-rise .6s var(--bw-ease) .22s both}
.bw-js:not(.bw-seen) .bw-nav > .bw-btn{animation:bw-pop .5s var(--bw-ease) .6s both}
.bw-js:not(.bw-seen) .bw-menu a{animation:bw-rise .5s var(--bw-ease) both}
.bw-js:not(.bw-seen) .bw-menu a:nth-child(1){animation-delay:.32s}
.bw-js:not(.bw-seen) .bw-menu a:nth-child(2){animation-delay:.39s}
.bw-js:not(.bw-seen) .bw-menu a:nth-child(3){animation-delay:.46s}
.bw-js:not(.bw-seen) .bw-menu a:nth-child(4){animation-delay:.53s}
@keyframes bw-drop{from{transform:translateY(-130%)}to{transform:none}}
@keyframes bw-pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* the mark tightens along with the bar */
.bw-brand img{transition:height .2s var(--bw-ease)}
.bw-navshell.is-stuck .bw-brand img{height:34px}

/* a gold wash slides under a link before it is the active one */
.bw-menu a{position:relative;isolation:isolate}
.bw-menu a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(232,169,59,.16);transform:scaleX(0);transform-origin:0 50%;transition:transform .26s var(--bw-ease)}
.bw-menu a:hover::before{transform:scaleX(1)}
.bw-menu a.is-active::before{display:none}

/* the burger becomes a cross */
.bw-burger span,.bw-burger span::before,.bw-burger span::after{transition:transform .3s var(--bw-ease),background-color .2s ease}
.bw-nav.is-open .bw-burger span{background:transparent}
.bw-nav.is-open .bw-burger span::before{transform:translateY(5px) rotate(45deg)}
.bw-nav.is-open .bw-burger span::after{transform:translateY(-5px) rotate(-45deg)}

/* the small-screen menu arrives a step at a time */
.bw-nav.is-open .bw-menu a{animation:bw-rise .34s var(--bw-ease) both}
.bw-nav.is-open .bw-menu a:nth-child(1){animation-delay:.02s}
.bw-nav.is-open .bw-menu a:nth-child(2){animation-delay:.07s}
.bw-nav.is-open .bw-menu a:nth-child(3){animation-delay:.12s}
.bw-nav.is-open .bw-menu a:nth-child(4){animation-delay:.17s}

/* a light passes over the solid buttons on hover, and the arrow leans out */
.bw-btn--primary,.bw-btn--solid{position:relative;overflow:hidden;isolation:isolate}
.bw-btn--primary::after,.bw-btn--solid::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.50) 50%,transparent 62%);transform:translateX(-130%)}
.bw-btn--primary:hover::after,.bw-btn--solid:hover::after{transform:translateX(130%);transition:transform .75s ease}
.bw-btn svg{transition:transform .2s var(--bw-ease)}
.bw-btn:hover svg{transform:translate(2px,-2px)}

/* Between pages ------------------------------------------------------------
   The bar and the gold pill on the current page are named, so they are lifted
   out of the cross-fade: the bar holds still and the pill slides to the new
   page's link while the content underneath changes. */
@view-transition{navigation:auto}
.bw-navshell{view-transition-name:bw-nav}
.bw-menu a.is-active{view-transition-name:bw-navpill}
::view-transition-old(root){animation:bw-vt-out .26s ease both}
::view-transition-new(root){animation:bw-vt-in .44s var(--bw-ease) both}
::view-transition-group(bw-nav),::view-transition-group(bw-navpill){animation-duration:.44s;animation-timing-function:var(--bw-ease)}
@keyframes bw-vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes bw-vt-in{from{opacity:0;transform:translateY(18px)}}

/* On the page --------------------------------------------------------------
   Headings wipe up out of their own line rather than only fading. This
   overrides animation-name on the reveal rule above and inherits its timing,
   so a heading on the first screen plays on load and one below the fold is
   still tied to the scroll. */
html.bw-js :is(.bw-d1,.bw-d2):not(.bw-shown){animation-name:bw-head}
@keyframes bw-head{
  from{opacity:0;transform:translateY(calc(var(--bw-rise) * 1.5));clip-path:inset(0 0 var(--bw-clip,105%) 0)}
  55% {opacity:1}
  to  {opacity:1;transform:none;clip-path:inset(-.3em -.35em -.3em -.35em)}
}

/* the gold rule under the hero's accent word draws itself in */
.bw-hl{position:relative}
.bw-hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:.085em;border-radius:99px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.bw-js .bw-hl::after{animation:bw-sweep .8s var(--bw-ease) 1s both}
@keyframes bw-sweep{to{transform:scaleX(1)}}

/* the hero photograph settles rather than snapping into place */
.bw-js .bw-hero__main img{animation:bw-settle 1.5s var(--bw-ease) both}
@keyframes bw-settle{from{transform:scale(1.08)}to{transform:none}}

@supports (animation-timeline:view()){
  /* each tick draws itself as its line scrolls in */
  .bw-js .bw-offer li svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:bw-draw linear both;animation-timeline:view();animation-range:entry 15% entry 55%}
  /* the banner image drifts against the scroll */
  .bw-banner__bg{animation:bw-parallax linear both;animation-timeline:view();animation-range:cover}
}
@keyframes bw-draw{to{stroke-dashoffset:0}}
@keyframes bw-parallax{from{transform:translateY(-7%) scale(1.15)}to{transform:translateY(7%) scale(1.15)}}

@media (prefers-reduced-motion:reduce){
  :root{--bw-clip:0%}   /* the heading cross-fades instead of wiping */
  .bw-js:not(.bw-seen) :is(.bw-navshell,.bw-brand,.bw-menu a,.bw-nav > .bw-btn),
  .bw-nav.is-open .bw-menu a,
  .bw-js .bw-hl::after,.bw-js .bw-hero__main img,.bw-banner__bg{animation:none}
  .bw-hl::after{transform:scaleX(1)}
  .bw-js .bw-offer li svg path{stroke-dasharray:none;stroke-dashoffset:0}
  .bw-btn--primary::after,.bw-btn--solid::after{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}