/* ==========================================================================
   BRENTWELL DIGITAL — site.css · brentwelldigital.com
   Builds on brentwell-tokens.css (imported unchanged, loaded first).
   Every value below is a token or derived from one. Red appears in three
   places only: the mark, the primary CTA hover, the nav marker.
   ========================================================================== */

/* ---- faces · five files · subset · self-hosted · 52 KB total ----------- */
@font-face{font-family:'Archivo';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/sourcesans3-400.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/sourcesans3-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/plexmono-500.woff2) format('woff2')}

/* ---- base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--bw-ground);color:var(--bw-ink);font:400 var(--bw-text-sm)/var(--bw-leading-body) var(--bw-font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-underline-offset:4px}
p,ul,ol,figure,blockquote{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bw-focus);outline-offset:2px}
#main:focus-visible{outline:none}
/* #1 the ring is drawn INSIDE controls that carry a chamfer: clip-path clips an
   outline drawn outside the border box, so a positive offset is invisible. */
:is(.bw-btn,.bw-btn--secondary,.bw-field,.bw-menu-btn,.bw-skip,.bw-chip,.bw-filter,a.bw-card,.bw-form__done,pre):focus-visible{outline:2px solid var(--bw-focus);outline-offset:-4px}
::selection{background:var(--bw-ink);color:var(--bw-cream)}
.bw-section--dark ::selection{background:var(--bw-cream);color:var(--bw-ink)}

.bw-skip{position:absolute;inset-inline-start:16px;top:-120px;z-index:var(--bw-z-toast);padding:14px 20px;background:var(--bw-ink);color:var(--bw-cream);font:500 var(--bw-text-xs)/1 var(--bw-font-mono);letter-spacing:var(--bw-track-label);text-transform:uppercase;text-decoration:none;clip-path:var(--bw-cut)}
.bw-skip:focus{top:16px}
.bw-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- type --------------------------------------------------------------- */
h1,h2,h3,h4{margin:0;font-family:var(--bw-font-display);font-weight:600;line-height:var(--bw-leading-head);letter-spacing:var(--bw-track-display);text-wrap:balance}
.bw-stmt{font-size:min(var(--bw-text-stmt),16vw);letter-spacing:-0.035em;max-width:20ch}
.bw-h2{font-size:var(--bw-text-2xl);max-width:24ch}
.bw-h3{font-size:var(--bw-text-lg);max-width:32ch}
.bw-h4{font-size:var(--bw-text-md)}
.bw-lead{font-size:var(--bw-text-md);line-height:1.45;max-width:var(--bw-measure)}
.bw-prose{max-width:var(--bw-measure)}
.bw-prose>*+*{margin-top:var(--bw-sp-4)}
.bw-prose h3,.bw-prose h4{margin-top:var(--bw-sp-8)}
.bw-prose ul,.bw-prose ol{padding-inline-start:1.25em}
.bw-prose li+li{margin-top:var(--bw-sp-2)}
.bw-kicker{display:block;font:500 var(--bw-text-xs)/1.3 var(--bw-font-mono);letter-spacing:var(--bw-track-label);text-transform:uppercase;color:var(--bw-muted)}
.bw-mono{font-family:var(--bw-font-mono);font-weight:500}
.bw-mono--lc{font-family:var(--bw-font-mono);font-weight:500;text-transform:none;letter-spacing:0}
.bw-muted{color:var(--bw-muted)}
.bw-small{font-size:var(--bw-text-xs)}
.bw-num{font:600 clamp(3.5rem,10vw,7.25rem)/0.9 var(--bw-font-display);letter-spacing:-0.035em;color:var(--bw-border);-webkit-user-select:none;user-select:none}
code,pre,kbd{font-family:var(--bw-font-mono);font-weight:500;font-size:0.9em}
pre{margin:0;padding:var(--bw-sp-5) var(--bw-sp-6);background:var(--bw-panel);clip-path:var(--bw-cut-card);overflow-x:auto;line-height:1.5;font-size:var(--bw-text-xs);max-width:100%}
pre code{white-space:pre-wrap;overflow-wrap:anywhere}
blockquote{padding-inline-start:var(--bw-sp-6);border-inline-start:1.5px solid var(--bw-ink);font-size:var(--bw-text-md);line-height:1.45}
hr.bw-hairline{border:0;border-top:1px solid var(--bw-border);margin:0}
@media (min-width:64em){
  .bw-h2{font-size:var(--bw-text-3xl)}
  .bw-h3{font-size:var(--bw-text-xl)}
}

/* ---- layout ------------------------------------------------------------- */
.bw-container{width:100%;max-width:var(--bw-container-md);margin-inline:auto;padding-inline:var(--bw-sp-5)}
.bw-container--lg{max-width:var(--bw-container-lg)}
.bw-container--sm{max-width:var(--bw-container-sm)}
@media (min-width:48em){.bw-container{padding-inline:var(--bw-sp-10)}}
.bw-section{padding-block:var(--bw-sec-2)}
@media (min-width:64em){.bw-section{padding-block:var(--bw-sec-4)}}
.bw-section--tight{padding-block:var(--bw-sec-1)}
@media (min-width:64em){.bw-section--tight{padding-block:var(--bw-sec-2)}}
.bw-section__head{display:grid;gap:var(--bw-sp-4);margin-bottom:var(--bw-sp-10)}
@media (min-width:64em){.bw-section__head{grid-template-columns:1fr auto;align-items:end;margin-bottom:var(--bw-sp-12)}}
.bw-grid{display:grid;gap:var(--bw-grid-gap);grid-template-columns:repeat(12,minmax(0,1fr))}
.bw-grid>*{grid-column:1 / -1;min-width:0}
@media (min-width:48em){
  .bw-col-3,.bw-col-4,.bw-col-5,.bw-col-6,.bw-col-7{grid-column:auto / span 6}
  .bw-col-8,.bw-col-9{grid-column:auto / span 12}
}
@media (min-width:64em){
  .bw-col-3{grid-column:auto / span 3}.bw-col-4{grid-column:auto / span 4}.bw-col-5{grid-column:auto / span 5}.bw-col-6{grid-column:auto / span 6}
  .bw-col-7{grid-column:auto / span 7}.bw-col-8{grid-column:auto / span 8}.bw-col-9{grid-column:auto / span 9}
  .bw-col-start-2{grid-column-start:2}.bw-col-start-5{grid-column-start:5}.bw-col-start-7{grid-column-start:7}.bw-col-start-8{grid-column-start:8}.bw-col-start-9{grid-column-start:9}
}
.bw-stack>*+*{margin-top:var(--bw-sp-6)}
.bw-stack--sm>*+*{margin-top:var(--bw-sp-3)}
.bw-stack--lg>*+*{margin-top:var(--bw-sp-10)}
.bw-flow{display:flex;flex-wrap:wrap;gap:var(--bw-sp-4) var(--bw-sp-6);align-items:center}

/* ---- dark section · inversion is the hierarchy; the 3 % chamfer grid ---- */
.bw-section--dark{background-color:var(--bw-dark);color:var(--bw-cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M.5 .5h35l12 12v35H.5z' fill='none' stroke='%23F0EFEA' stroke-opacity='.06'/%3E%3C/svg%3E")}
.bw-section--dark{--bw-muted:rgba(240,239,234,.72)}
.bw-section--dark .bw-kicker{color:rgba(240,239,234,.72)}
.bw-section--dark .bw-muted{color:rgba(240,239,234,.72)}
.bw-section--dark hr.bw-hairline{border-color:rgba(240,239,234,.18)}
.bw-section--dark .bw-num{color:rgba(240,239,234,.14)}
.bw-section--dark blockquote{border-color:var(--bw-cream)}
.bw-section--dark pre{background:var(--bw-dark-raised)}

/* ---- header · five items · sticky · the marker is red spend 3 of 3 ------ */
.bw-header{position:sticky;top:0;z-index:var(--bw-z-nav);background:var(--bw-ground);border-bottom:1px solid var(--bw-border)}
.bw-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--bw-sp-4);min-height:72px}
@media (min-width:48em){.bw-header__inner{gap:var(--bw-sp-6)}}
.bw-lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--bw-ink);font:600 var(--bw-text-md)/1 var(--bw-font-display);letter-spacing:-0.02em;white-space:nowrap;direction:ltr;min-width:0}
.bw-header .bw-lockup{padding-block:10px}
@media (max-width:22.49em){.bw-header .bw-lockup>span{display:none}}
.bw-mark{width:34px;height:28px;flex:none;color:var(--bw-red-500)}
.bw-section--dark .bw-lockup,.bw-footer--dark .bw-lockup{color:var(--bw-cream)}
.bw-section--dark .bw-mark{color:var(--bw-cream)}
.bw-nav__list{display:flex;flex-direction:column;position:relative}
.bw-nav-link{display:block;padding:14px 0;font:500 var(--bw-text-sm)/1.2 var(--bw-font-display);text-decoration:none;color:var(--bw-ink);border-bottom:1px solid var(--bw-border)}
.bw-nav__cta{padding-top:var(--bw-sp-5)}
.bw-nav__cta .bw-btn{width:100%}
.bw-menu-btn{display:inline-flex;flex:none;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0 20px;background:transparent;border:0;box-shadow:inset 0 0 0 1.5px var(--bw-ink);clip-path:var(--bw-cut);cursor:pointer;font:500 var(--bw-text-xs)/1 var(--bw-font-mono);letter-spacing:var(--bw-track-label);text-transform:uppercase}
html:not(.js) .bw-menu-btn{display:none}
/* The collapsed panel is a phone behaviour only. Scoping it to the breakpoint (rather
   than undoing it at 56em) keeps the desktop nav free of a specificity fight: `.js .bw-nav`
   is (0,2,0) and would otherwise beat the `.bw-nav` reset at (0,1,0), since a media query
   adds no specificity. */
@media (max-width:55.99em){
  .js .bw-nav{display:none;position:fixed;inset:var(--bw-header-h,73px) 0 0 0;background:var(--bw-ground);padding:var(--bw-sp-6) var(--bw-sp-5) calc(var(--bw-sp-8) + env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* Opening the menu locks the page with overflow:hidden on <html>. That removes the
     scrollport position:sticky was sticking inside, so the header drops back to its
     static position at document y=0 — carrying the Close button off screen whenever
     the menu is opened below the fold. Pin the header for as long as it is open. */
  .js .bw-header.is-open{position:fixed;top:0;inset-inline:0}
  .js .bw-header.is-open .bw-nav{display:block}
}
.bw-nav__marker{display:none}
@media (min-width:56em){
  .bw-menu-btn{display:none}
  .bw-nav{display:block;position:static;inset:auto;padding:0;overflow:visible;background:transparent}
  .bw-nav__list{flex-direction:row;align-items:center;gap:var(--bw-sp-8)}
  .bw-nav-link{padding:26px 0 22px;border-bottom:0}
  .bw-nav__cta{padding-top:0;margin-inline-start:var(--bw-sp-2)}
  .bw-nav__cta .bw-btn{width:auto}
  .js .bw-nav-link[aria-current="page"]::after{display:none}
  .js .bw-nav__marker{display:block;position:absolute;bottom:10px;inset-inline-start:0;width:22px;height:8px;background:var(--bw-red-500);clip-path:polygon(0 0,calc(100% - var(--bw-chamfer-mark)) 0,100% var(--bw-chamfer-mark),100% 100%,0 100%);transform:translateX(var(--x,0));opacity:0;transition:transform 200ms var(--bw-ease),opacity var(--bw-dur) var(--bw-ease)}
  .js .bw-nav__marker.is-on{opacity:1}
}

/* ---- buttons · the one system (exemplars live in the token file) -------- */
.bw-btn,.bw-btn--secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;text-align:center;white-space:nowrap}
.bw-btn--tertiary{display:inline-block;cursor:pointer;white-space:normal;line-height:1.4;padding-block:8px;margin-block:-8px}
:is(.bw-cta-row,.bw-section__head,.bw-proof,.bw-hero>.bw-container)>.bw-btn--tertiary{display:inline-flex;align-items:center;min-height:48px;padding-block:0;margin-block:0;justify-self:start}
.bw-btn--tertiary:hover{text-decoration-thickness:2px}
.bw-section--dark .bw-btn{background:var(--bw-cream);color:var(--bw-ink)}
.bw-section--dark .bw-btn:hover{background:#fff;color:var(--bw-ink)}
.bw-section--dark .bw-btn--secondary{color:var(--bw-cream);box-shadow:inset 0 0 0 1.5px var(--bw-cream)}
.bw-section--dark .bw-btn--secondary:hover{box-shadow:inset 0 0 0 2px var(--bw-cream)}
.bw-section--dark .bw-btn--tertiary{color:var(--bw-cream)}
.bw-cta-row{display:flex;flex-wrap:wrap;gap:var(--bw-sp-4) var(--bw-sp-8);align-items:center}

/* ---- surfaces · chamfer 12 · borders survive clip-path as inset shadow -- */
.bw-card{background:var(--bw-card);border:0;box-shadow:inset 0 0 0 1px var(--bw-border);clip-path:var(--bw-cut-card);padding:var(--bw-sp-6)}
.bw-panel{background:var(--bw-panel);clip-path:var(--bw-cut-card);padding:var(--bw-sp-6)}
@media (min-width:48em){.bw-card,.bw-panel{padding:var(--bw-sp-8)}}
@media (min-width:64em){.bw-panel--lg{padding:var(--bw-sp-12)}}
.bw-section--dark .bw-card{background:var(--bw-dark-raised);box-shadow:inset 0 0 0 1px rgba(240,239,234,.18)}
.bw-section--dark .bw-panel{background:var(--bw-dark-raised)}
a.bw-card{display:block;text-decoration:none;color:inherit}
a.bw-card:hover .bw-card__title,a.bw-card:focus-visible .bw-card__title{text-decoration-color:currentColor}
.bw-card__title{font:600 var(--bw-text-md)/1.2 var(--bw-font-display);letter-spacing:-0.02em}
.bw-card>*+*{margin-top:var(--bw-sp-3)}

/* ---- chips · grades · mono ---------------------------------------------- */
.bw-chip{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;font:500 var(--bw-text-xs)/1 var(--bw-font-mono);letter-spacing:var(--bw-track-label);text-transform:uppercase;box-shadow:inset 0 0 0 1px currentColor;clip-path:polygon(0 0,calc(100% - var(--bw-chamfer-mark)) 0,100% var(--bw-chamfer-mark),100% 100%,0 100%);white-space:nowrap}
.bw-chip--fill{background:var(--bw-ink);color:var(--bw-cream);box-shadow:none}
.bw-section--dark .bw-chip--fill{background:var(--bw-cream);color:var(--bw-ink)}
.bw-chips{display:flex;flex-wrap:wrap;gap:var(--bw-sp-2)}
.bw-chips[data-filter-bar]{gap:var(--bw-sp-3)}

/* ---- work · zero-chrome cards · 12-col · 24 px gap --------------------- */
.bw-work{display:grid;gap:var(--bw-sp-10) var(--bw-grid-gap);grid-template-columns:repeat(12,minmax(0,1fr))}
.bw-work__item{grid-column:span 12}
@media (min-width:48em){.bw-work__item{grid-column:span 6}}
.bw-work__link{display:block;text-decoration:none;color:inherit}
.bw-work__media{aspect-ratio:16/10;background:var(--bw-panel);clip-path:var(--bw-cut-card);display:grid;place-items:center;position:relative;overflow:hidden}
.bw-work__media img{width:100%;height:100%;object-fit:cover}
.bw-work__media--hatch{background-image:repeating-linear-gradient(135deg,transparent 0 22px,var(--bw-border) 22px 23px)}
.bw-work__media--hatch>.bw-kicker{background:var(--bw-panel);padding:8px 12px}
.bw-work__title{margin-top:var(--bw-sp-4);font:600 var(--bw-text-md)/1.2 var(--bw-font-display);letter-spacing:-0.02em}
a.bw-work__link .bw-work__title,a.bw-card .bw-card__title,.bw-ladder__title,.bw-notes__title{text-decoration:underline;text-decoration-color:var(--bw-border-strong);text-underline-offset:6px}
a.bw-work__link:hover .bw-work__title,a.bw-work__link:focus-visible .bw-work__title{text-decoration-color:currentColor}
.bw-work__meta{margin-top:var(--bw-sp-2)}

/* ---- stages · numbered rows ---------------------------------------------- */
.bw-stage{display:grid;gap:var(--bw-sp-4);padding-block:var(--bw-sp-8);border-top:1px solid var(--bw-border)}
.bw-stage:last-child{border-bottom:1px solid var(--bw-border)}
.bw-section--dark .bw-stage{border-color:rgba(240,239,234,.18)}
@media (min-width:64em){.bw-stage{grid-template-columns:2fr 5fr 5fr;gap:var(--bw-grid-gap);padding-block:var(--bw-sp-10)}}
.bw-stage__num{font:500 var(--bw-text-lg)/1 var(--bw-font-mono);letter-spacing:0}
.bw-stage__title{font:600 var(--bw-text-lg)/1.1 var(--bw-font-display);letter-spacing:-0.02em;margin-top:var(--bw-sp-2)}
.bw-stage__body>*+*{margin-top:var(--bw-sp-3)}
.bw-stage__deliverable{border-inline-start:1px solid var(--bw-border);padding-inline-start:var(--bw-sp-5)}
.bw-section--dark .bw-stage__deliverable{border-color:rgba(240,239,234,.18)}
@media (max-width:63.98em){.bw-stage__deliverable{border:0;padding:0}}

/* ---- tables · hairline rules only --------------------------------------- */
.bw-table-wrap{overflow-x:auto;max-width:100%}
.bw-table{min-width:0}
.bw-table{width:100%;border-collapse:collapse;font-size:var(--bw-text-sm)}
.bw-table th{text-align:start;font:500 var(--bw-text-xs)/1.3 var(--bw-font-mono);letter-spacing:var(--bw-track-label);text-transform:uppercase;color:var(--bw-muted);padding:0 0 var(--bw-sp-3);padding-inline-end:var(--bw-sp-4);border-bottom:1px solid var(--bw-border-strong)}
@media (min-width:48em){.bw-table th{white-space:nowrap}}
.bw-table td{padding-block:var(--bw-sp-4);padding-inline:0 var(--bw-sp-4);border-bottom:1px solid var(--bw-border);vertical-align:top}
.bw-table td:first-child{font-family:var(--bw-font-mono);font-weight:500}
@media (min-width:48em){.bw-table td:first-child{white-space:nowrap}}
.bw-table td:last-child,.bw-table th:last-child{padding-inline-end:0}
.bw-section--dark .bw-table th{color:rgba(240,239,234,.72);border-color:rgba(240,239,234,.4)}
.bw-section--dark .bw-table td{border-color:rgba(240,239,234,.18)}
/* #19 below 48em a wide table becomes labelled rows instead of a sideways scroll */
@media (max-width:47.98em){
  .bw-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .bw-table--stack,.bw-table--stack tbody,.bw-table--stack tr,.bw-table--stack td{display:block}
  .bw-table--stack tr{padding-block:var(--bw-sp-5);border-bottom:1px solid var(--bw-border)}
  .bw-section--dark .bw-table--stack tr{border-color:rgba(240,239,234,.18)}
  .bw-table--stack td{padding:0;border:0}
  .bw-table--stack td+td{margin-top:var(--bw-sp-3)}
  .bw-table--stack td::before{content:attr(data-label);display:block;margin-bottom:var(--bw-sp-1);font:500 var(--bw-text-xs)/1.3 var(--bw-font-mono);letter-spacing:var(--bw-track-label);text-transform:uppercase;color:var(--bw-muted)}
  .bw-table--stack td:first-child{white-space:normal}
}
/* #58 a deep link into the manual index shows which row it landed on */
.bw-table tr:target td{background:var(--bw-panel)}
.bw-section--dark .bw-table tr:target td{background:var(--bw-dark-raised)}

/* ---- definition rows (meta) --------------------------------------------- */
.bw-meta{display:grid;gap:var(--bw-sp-4) var(--bw-sp-8);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.bw-meta dt{font:500 var(--bw-text-xs)/1.3 var(--bw-font-mono);letter-spacing:var(--bw-track-label);text-transform:uppercase;color:var(--bw-muted)}
.bw-meta dd{margin:var(--bw-sp-1) 0 0;font-weight:500}
.bw-section--dark .bw-meta dt{color:rgba(240,239,234,.72)}

/* ---- forms · boxed 1.5 px · labels above · errors icon + text ---------- */
.bw-form{display:grid;gap:var(--bw-sp-5)}
.bw-field-group{display:grid;gap:var(--bw-sp-2)}
.bw-field{width:100%;appearance:none;-webkit-appearance:none}
textarea.bw-field{min-height:120px;resize:vertical;line-height:1.5}
.bw-field-group.is-invalid .bw-field{border-color:var(--bw-error)}
.bw-error{display:none;align-items:center;gap:8px;color:var(--bw-error);font-size:var(--bw-text-xs);font-weight:500}
.bw-field-group.is-invalid .bw-error{display:flex}
.bw-error svg{width:16px;height:16px;flex:none}
.bw-section--dark .bw-error{color:var(--bw-cream)}
.bw-section--dark .bw-error svg{color:var(--bw-error)}
.bw-form__note{font-size:var(--bw-text-xs);color:var(--bw-muted);max-width:var(--bw-measure)}
.bw-form__done{display:none}
.bw-form.is-done .bw-form__fields{display:none}
.bw-form.is-done .bw-form__done{display:block}

/* ---- FAQ · native details · chamfer -------------------------------------- */
.bw-faq{border-top:1px solid var(--bw-border)}
.bw-faq details{border-bottom:1px solid var(--bw-border)}
.bw-faq summary{list-style:none;cursor:pointer;padding:var(--bw-sp-5) 0;font:600 var(--bw-text-md)/1.3 var(--bw-font-display);letter-spacing:-0.02em;display:flex;justify-content:space-between;gap:var(--bw-sp-6);align-items:baseline}
.bw-faq summary::-webkit-details-marker{display:none}
.bw-faq summary::after{content:'+';font:500 var(--bw-text-md)/1 var(--bw-font-mono);flex:none}
.bw-faq details[open] summary::after{content:'\2212'}
.bw-faq .bw-prose{padding-bottom:var(--bw-sp-6)}
.bw-section--dark .bw-faq,.bw-section--dark .bw-faq details{border-color:rgba(240,239,234,.18)}

/* ---- partners · a sliding band of lockups -------------------------------
   The track holds the set twice and travels exactly half its width, so the loop
   is seamless. Motion pauses on hover, on keyboard focus, and on the visible
   control (SC 2.2.2); prefers-reduced-motion drops it to a static wrapped row. */
.bw-partners-sec{padding-block:var(--bw-sec-1) 0}
.bw-partners__lead{margin-top:var(--bw-sp-2);max-width:40ch}
.bw-marquee{direction:ltr;overflow:hidden;margin-top:var(--bw-sp-8);
  border-block:1px solid var(--bw-border);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bw-section--dark .bw-marquee{border-block-color:rgba(240,239,234,.18)}
.bw-marquee__track{display:flex;width:max-content;animation:bw-marquee var(--mq-dur,46s) linear infinite}
.bw-marquee__set{display:flex;align-items:center}
.bw-marquee__item{display:flex;align-items:center;gap:var(--bw-sp-3);
  padding-inline:var(--bw-sp-8);min-height:104px;white-space:nowrap;
  font:600 var(--bw-text-md)/1.15 var(--bw-font-display);letter-spacing:-0.02em;color:var(--bw-ink)}
.bw-section--dark .bw-marquee__item{color:var(--bw-cream)}
.bw-marquee__item svg{width:30px;height:30px;flex:none}
@media (min-width:48em){.bw-marquee__item{padding-inline:var(--bw-sp-10)}}
@keyframes bw-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bw-marquee:hover .bw-marquee__track,
.bw-marquee:focus-within .bw-marquee__track,
.bw-marquee.is-paused .bw-marquee__track{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .bw-marquee{-webkit-mask-image:none;mask-image:none}
  .bw-marquee__track{animation:none;width:100%;flex-wrap:wrap}
  .bw-marquee__set{flex-wrap:wrap;width:100%;justify-content:center}
  .bw-marquee__set[aria-hidden="true"]{display:none}
}

/* ---- the ladder · See → Read → Start -------------------------------------
   The page's last ask, so it is a contained block, not three floating columns:
   an ink rule opens it, hairlines divide the rungs, and the final plate is filled. */
.bw-footer__ladder{margin-bottom:var(--bw-sec-2)}
.bw-ladder{display:grid;border-top:1.5px solid var(--bw-ink);margin-top:var(--bw-sp-4)}
.bw-section--dark .bw-ladder{border-top-color:var(--bw-cream)}
@media (min-width:48em){.bw-ladder{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}
.bw-ladder__rung{display:grid;gap:var(--bw-sp-3);align-content:start;padding-block:var(--bw-sp-6) var(--bw-sp-8);border-bottom:1px solid var(--bw-border)}
.bw-section--dark .bw-ladder__rung{border-color:rgba(240,239,234,.18)}
@media (min-width:48em){
  .bw-ladder__rung{border-bottom:0;padding-inline-end:var(--bw-sp-8)}
  .bw-ladder__rung+.bw-ladder__rung{border-inline-start:1px solid var(--bw-border);padding-inline-start:var(--bw-sp-8)}
  .bw-section--dark .bw-ladder__rung+.bw-ladder__rung{border-inline-start-color:rgba(240,239,234,.18)}
}
.bw-ladder__num{display:inline-grid;place-items:center;width:36px;height:36px;justify-self:start;
  font:500 var(--bw-text-xs)/1 var(--bw-font-mono);letter-spacing:0.06em;
  background:var(--bw-panel);color:var(--bw-muted);
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%)}
.bw-section--dark .bw-ladder__num{background:var(--bw-dark-raised);color:rgba(240,239,234,.72)}
/* the last rung is the ask, so it carries the weight */
.bw-ladder__rung--ask .bw-ladder__num{background:var(--bw-ink);color:var(--bw-cream)}
.bw-section--dark .bw-ladder__rung--ask .bw-ladder__num{background:var(--bw-cream);color:var(--bw-ink)}
.bw-ladder__title{justify-self:start;font:600 var(--bw-text-lg)/1.1 var(--bw-font-display);letter-spacing:-0.02em;text-decoration:none;color:inherit}
.bw-ladder__title:hover,.bw-ladder__title:focus-visible{text-decoration-color:currentColor}
.bw-ladder p{max-width:34ch}
.bw-section--dark .bw-ladder p{color:rgba(240,239,234,.72)}

/* ---- hero ---------------------------------------------------------------- */
.bw-hero{position:relative;padding-block:var(--bw-sec-3) var(--bw-sec-2)}
/* the chamfer field sits behind the statement; it is decoration, never a target */
.bw-hero__field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.bw-hero>.bw-container{position:relative;z-index:1}
@media (min-width:64em){.bw-hero{padding-block:var(--bw-sec-5) var(--bw-sec-4)}}
.bw-hero>.bw-container{display:grid;gap:var(--bw-sp-8)}
.bw-hero .bw-lead{margin-top:var(--bw-sp-2)}

/* ---- applied anatomy · trust line · notes · proof beside the ask · filter · included ---- */
.bw-hero__proof{display:flex;flex-wrap:wrap;gap:var(--bw-sp-2) var(--bw-sp-6);padding-top:var(--bw-sp-5);border-top:1px solid var(--bw-border);max-width:var(--bw-container-sm)}
.bw-hero__proof span{font:500 var(--bw-text-xs)/1.4 var(--bw-font-mono);letter-spacing:var(--bw-track-label);text-transform:uppercase;color:var(--bw-muted)}
.bw-notes{border-top:1px solid var(--bw-border)}
.bw-notes li{display:grid;gap:var(--bw-sp-2) var(--bw-grid-gap);padding-block:var(--bw-sp-5);border-bottom:1px solid var(--bw-border)}
@media (min-width:48em){.bw-notes li{grid-template-columns:10rem 1fr auto;align-items:baseline}}
.bw-notes time{font:500 var(--bw-text-xs)/1.4 var(--bw-font-mono);letter-spacing:var(--bw-track-label);text-transform:uppercase;color:var(--bw-muted)}
.bw-notes__title{font:600 var(--bw-text-md)/1.25 var(--bw-font-display);letter-spacing:-0.02em;text-decoration:none;color:inherit}
.bw-notes__title{justify-self:start}
.bw-notes__title:hover,.bw-notes__title:focus-visible{text-decoration-color:currentColor}
.bw-notes p{color:var(--bw-muted);max-width:var(--bw-measure);grid-column:2}
@media (max-width:47.98em){.bw-notes p{grid-column:auto}}
.bw-section--dark .bw-notes,.bw-section--dark .bw-notes li{border-color:rgba(240,239,234,.18)}
.bw-proof{display:grid;gap:var(--bw-sp-3);padding:var(--bw-sp-6);box-shadow:inset 0 0 0 1px var(--bw-border);clip-path:var(--bw-cut-card);align-content:start}
.bw-proof__fig{font:500 var(--bw-text-2xl)/1 var(--bw-font-mono);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.bw-proof p{max-width:38ch}
.bw-panel .bw-proof{background:var(--bw-card)}
.bw-section--dark .bw-proof{box-shadow:inset 0 0 0 1px rgba(240,239,234,.25);background:var(--bw-dark-raised)}
.bw-filter{cursor:pointer;background:transparent;border:0;color:inherit;min-height:48px;padding-inline:16px}
.bw-filter[aria-pressed="true"]{background:var(--bw-ink);color:var(--bw-cream);box-shadow:none}
.bw-filter:focus-visible{outline:2px solid var(--bw-focus);outline-offset:-4px}
[hidden]{display:none!important}
.bw-included{display:grid;gap:0 var(--bw-grid-gap);border-top:1px solid var(--bw-border)}
@media (min-width:48em){.bw-included{grid-template-columns:1fr 1fr}}
.bw-included li{display:grid;gap:var(--bw-sp-1);padding-block:var(--bw-sp-5);border-bottom:1px solid var(--bw-border)}
.bw-included strong{font:600 var(--bw-text-md)/1.25 var(--bw-font-display);letter-spacing:-0.02em}
.bw-included p{color:var(--bw-muted)}
.bw-section--dark .bw-included,.bw-section--dark .bw-included li{border-color:rgba(240,239,234,.18)}
.bw-table tr[hidden]{display:none}

/* ---- specimens (case 00, manual) ---------------------------------------- */
.bw-specimen{display:grid;gap:var(--bw-sp-6);padding:var(--bw-sp-6);box-shadow:inset 0 0 0 1px var(--bw-border);clip-path:var(--bw-cut-card)}
@media (min-width:48em){.bw-specimen{padding:var(--bw-sp-8)}}
.bw-ladder-type{display:grid;gap:var(--bw-sp-3)}
.bw-ladder-type>div{display:grid;grid-template-columns:5rem 1fr;align-items:baseline;gap:var(--bw-sp-4);border-bottom:1px solid var(--bw-border);padding-bottom:var(--bw-sp-2)}
.bw-ladder-type span:first-child{font:500 var(--bw-text-xs)/1 var(--bw-font-mono);color:var(--bw-muted)}
.bw-ladder-type span:last-child{font-family:var(--bw-font-display);font-weight:600;line-height:1.06;letter-spacing:-0.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-swatches{display:grid;gap:var(--bw-sp-3);grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
.bw-swatch{display:grid;gap:var(--bw-sp-2)}
.bw-swatch__chip{height:56px;clip-path:var(--bw-cut-card);box-shadow:inset 0 0 0 1px var(--bw-border)}
.bw-swatch span{font:500 var(--bw-text-xs)/1.3 var(--bw-font-mono)}
.bw-chamfer-demo{display:flex;flex-wrap:wrap;gap:var(--bw-sp-4);align-items:flex-end}
.bw-chamfer-demo>div{background:var(--bw-ink);color:var(--bw-cream);display:grid;place-items:center;font:500 var(--bw-text-xs)/1 var(--bw-font-mono)}
.bw-geom{width:100%;height:100%}

/* ---- footer ------------------------------------------------------------- */
.bw-footer{border-top:1px solid var(--bw-border);padding-block:var(--bw-sec-2) var(--bw-sp-10)}
/* inverted footer: the ground change is the divider, so the top hairline goes,
   and the inner rule takes the cream hairline every other dark surface uses */
.bw-footer.bw-section--dark{border-top:0}
.bw-footer.bw-section--dark .bw-footer__bottom{border-top-color:rgba(240,239,234,.18)}
.bw-footer__grid{display:grid;gap:var(--bw-sp-10) var(--bw-grid-gap);grid-template-columns:repeat(12,minmax(0,1fr))}
.bw-footer__grid>*{grid-column:span 12}
@media (min-width:48em){.bw-footer__brand{grid-column:span 12}.bw-footer__col{grid-column:span 4}}
@media (min-width:64em){.bw-footer__brand{grid-column:span 3}.bw-footer__col{grid-column:span 3}}
.bw-footer__brand>*+*{margin-top:var(--bw-sp-4)}
.bw-footer__links{display:grid;gap:var(--bw-sp-3);margin-top:var(--bw-sp-4)}
.bw-footer__links{gap:var(--bw-sp-1)}
.bw-footer__links a{display:inline-block;min-height:24px;min-width:24px;padding-block:5px;font:500 var(--bw-text-xs)/1.4 var(--bw-font-mono);text-decoration:none;text-transform:lowercase;overflow-wrap:anywhere}
.bw-footer__links a[lang="ar"]{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;text-transform:none}
.bw-footer__links a:hover{text-decoration:underline}
.bw-footer__bottom{margin-top:var(--bw-sp-12);padding-top:var(--bw-sp-6);border-top:1px solid var(--bw-border);display:flex;flex-wrap:wrap;gap:var(--bw-sp-3) var(--bw-sp-8);justify-content:space-between;font:500 var(--bw-text-xs)/1.4 var(--bw-font-mono);color:var(--bw-muted)}

/* ---- print -------------------------------------------------------------- */
@media print{
  .bw-header,.bw-footer,.bw-skip,.bw-nav__marker{display:none}
  .bw-section--dark{background:none!important;background-image:none!important;color:var(--bw-ink)}
  .bw-section--dark{--bw-muted:#5c5b63}
  .bw-section--dark :is(.bw-kicker,.bw-table th,.bw-meta dt){color:var(--bw-muted)}
  .bw-section--dark :is(.bw-card,.bw-panel,.bw-proof,.bw-specimen){background:none;box-shadow:inset 0 0 0 1px var(--bw-border)}
  .bw-section--dark .bw-btn{background:none;color:var(--bw-ink);box-shadow:inset 0 0 0 1.5px var(--bw-ink)}
  .bw-section--dark :is(.bw-stage,.bw-notes,.bw-notes li,.bw-included,.bw-included li,.bw-faq,.bw-faq details,.bw-table td,hr.bw-hairline){border-color:var(--bw-border)}
  .bw-section--dark .bw-table th{border-color:var(--bw-border-strong)}
  .bw-faq details{display:block}
  .bw-faq .bw-prose{display:block!important}
}

/* ==========================================================================
   AUDIT FIXES · 7 September 2026 · pointer, forced colours, colour scheme
   ========================================================================== */

/* #11 the red hover fill is a pointer affordance; on touch it would stick */
@media (hover:none){
  .bw-btn:hover{background:var(--bw-ink);color:var(--bw-cream)}
  .bw-section--dark .bw-btn:hover{background:var(--bw-cream);color:var(--bw-ink)}
  .bw-btn--secondary:hover{box-shadow:inset 0 0 0 1.5px currentColor}
  .bw-btn--tertiary:hover{text-decoration-thickness:auto}
  a.bw-work__link:hover .bw-work__title,a.bw-card:hover .bw-card__title{text-decoration-color:var(--bw-border-strong)}
}

/* #42 a pressed state in the palette, instead of the UA tap flash */
a,button,summary,[role="button"]{-webkit-tap-highlight-color:transparent}
.bw-btn:active{background:var(--bw-ink-soft)}
.bw-section--dark .bw-btn:active{background:var(--bw-border)}
.bw-btn--secondary:active,.bw-filter:active{box-shadow:inset 0 0 0 2px currentColor}
.bw-btn--tertiary:active,.bw-footer__links a:active{text-decoration-thickness:2px}
.bw-faq summary:active{background:var(--bw-panel)}
.bw-section--dark .bw-faq summary:active{background:var(--bw-dark-raised)}

/* #13 forced colours: every edge here is an inset shadow, which the UA drops */
@media (forced-colors:active){
  .bw-btn,.bw-btn--secondary,.bw-menu-btn,.bw-chip,.bw-card,.bw-proof,.bw-specimen,.bw-panel,.bw-swatch__chip,.bw-field{border:1px solid CanvasText}
  .bw-btn{border-width:2px}
  .bw-filter[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .js .bw-nav__marker,.bw-nav-link[aria-current="page"]::after{forced-color-adjust:none;background:Highlight}
  .bw-nav-link[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px}
  .bw-work__media--hatch{border:1px solid CanvasText}
}

/* #52 the site is light-first by design; opt out of algorithmic darkening */
:root{color-scheme:only light}