/* BWH home — static build. Mobile-first; breakpoints 700px and 1080px.
   Layout is correct with JavaScript disabled. */
/* DM Sans, self-hosted (variable font: weights 200-900 in one file) */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:200 900;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{box-sizing:border-box}
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
html{scroll-behavior:smooth}
/* ---------- type system ----------
   One place for the site's text sizes, weights and line height. Every text style points
   at these, so changing one value here changes it everywhere. The matrix quadrant notes
   (.pm-q) are the one deliberate exception. */
:root{
  --lh:1.6;                       /* line height for all running text */
  --w-body:300;                   /* body text weight, every screen size */
  --w-label:400;                  /* bracket labels, dates, [Go back] */
  --t-body:14px;                  /* body text, bold body, dates, [Go back] */
  --t-label:11px;                 /* bracket labels and buttons */
  --ls-label:0.14em;              /* label letter spacing */
  --t-small:12px;                 /* small print */
  --t-input:16px;                 /* typed text in form fields (iPhone zooms anything smaller) */
  --t-heading:clamp(28px,4.3vw,66px); /* section headings */
}
body{margin:0;background:#e5dfd6;-webkit-font-smoothing:antialiased;color:#181615;font-family:'DM Sans',sans-serif}
a{color:#181615;text-decoration:none}
a:hover{color:#910a0a}
:focus-visible{outline:2px solid #910a0a;outline-offset:3px}
[data-hp]{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
section[id]{scroll-margin-top:62px}
img{border:0}

/* ---------- line breaking (house rule) ----------
   Never hyphenate: a word that won't fit goes down to the next line whole.
   Never leave an orphan: `pretty` pulls a word or two down from the line above
   so a paragraph never ends on a single word, and `balance` evens the lines of
   a short heading. No exceptions — the old one (.cdone-word, for the joke
   "supercalifragilisticexpialidocious" line on the thank-you screen) went when
   that line did. */
body{hyphens:none;-webkit-hyphens:none;text-wrap:pretty}
.h2,.faq-q,.ctitle,.cdone-h,.priv-h1,.hero-line,.quote-role,.stat-lbl,.f-head,.nextup-h{text-wrap:balance}

/* ---------- skip link ----------
   Sits off the top of the screen until it takes focus, so it costs a mouse user
   nothing and saves a keyboard user tabbing through the whole header on every load.
   It slides in on transform rather than top, so nothing reflows. z-index clears the
   loading screen (200) in case the first Tab lands while that is still up. */
.skip-link{position:fixed;left:8px;top:8px;z-index:300;padding:10px 14px;background:#910a0a;color:#e5dfd6;font-family:inherit;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;transform:translateY(calc(-100% - 16px));transition:transform 160ms ease}
.skip-link:focus{transform:translateY(0)}

/* ---------- root / paper texture ---------- */
.root{position:relative;background:#e5dfd6 url(./assets/web/bg-seam.webp) top center / 100% auto repeat-y;color:#181615}

/* ---------- loading screen ----------
   Hidden by default so a no-JS visitor is never gated behind it; app.js adds
   .is-on the moment it runs, and a 4s ceiling always clears it. */
.loader{display:none;position:fixed;inset:0;z-index:200;background:#070606 url(./assets/web/bg-loading.webp) center center / cover no-repeat;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,2.4vw,32px);opacity:1;transition:opacity 1600ms cubic-bezier(.33,0,.25,1)}
.loader.is-on{display:flex}
.loader-line{min-height:1.4em;font-weight:400;font-size:clamp(12px,1.05vw,15px);letter-spacing:0.18em;text-transform:uppercase;color:#e5dfd6;white-space:nowrap}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:20;background:transparent;transition:top 320ms cubic-bezier(.4,0,.2,1)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(20px,2.6vw,34px) clamp(16px,3vw,40px) 12px}
.nav{display:none;align-items:center;gap:clamp(14px,2vw,30px)}
.navlink{font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#910a0a}
.navlink:hover{font-weight:700}
.nav-actions{display:flex;align-items:center;margin-left:auto;gap:clamp(12px,1.6vw,22px);width:100%;justify-content:space-between}
.hotwrap{position:relative}
.hotbtn{appearance:none;background:transparent;border:0;padding:8px 0;cursor:pointer;font-family:inherit;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#910a0a}
.hotbtn:hover{font-weight:900}
.menubtn{display:block;appearance:none;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#910a0a}
.menubtn:hover{font-weight:700}
@media (min-width:700px){
  .nav{display:flex}
  .nav-actions{width:auto;justify-content:flex-end}
  .menubtn{display:none}
}

/* hotline: full-screen sheet on phone, dropdown from 700px */
.hotbox{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:120;width:100%;background:rgba(145,10,10,0.78);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);padding:clamp(28px,8vw,48px);border-top:0;background-clip:padding-box;box-shadow:none;flex-direction:column;align-items:center;justify-content:center}
.hotbox.is-open{display:flex}
.hot-p{margin:0 0 20px;font-size:var(--t-body);line-height:var(--lh);color:#e5dfd6;text-align:center;text-wrap:pretty;max-width:32ch}
.hot-actions{display:flex;flex-direction:column;align-items:center;gap:8px}
.askbtn{appearance:none;cursor:pointer;background:transparent;border:1px solid #e5dfd6;padding:10px 16px;font-family:inherit;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#e5dfd6}
.askbtn:hover{background:#e5dfd6;color:#910a0a}
.hot-copied{display:none;font-weight:var(--w-body);font-size:var(--t-small);line-height:var(--lh);color:#e5dfd6;opacity:0.85}
/* Only the phone sheet gets a close cross. Fixed to the viewport, same corner as
   priv-close, so it sits still while the sheet fades under it. Hidden by default;
   the 700px query below turns .hotbox back into a dropdown, which this never joins. */
.hotclose{display:none}
@media (max-width:699.98px){
  .hotclose{display:block;position:fixed;top:clamp(16px,4vw,28px);right:clamp(16px,4vw,28px);z-index:2;appearance:none;background:transparent;border:0;padding:6px;cursor:pointer;font-family:inherit;font-size:22px;line-height:1;color:#e5dfd6}
  .hotclose:hover{font-weight:900}
}
@media (min-width:700px){
  .hotbox{position:absolute;top:calc(100% + 10px);right:0;left:auto;bottom:auto;z-index:40;width:min(340px,calc(100vw - 32px));padding:22px 22px 24px;border-top:0;box-shadow:none}
  /* The 10px gap used to be a transparent top border, but backdrop-filter blurs the
     whole border box, which smeared an untinted band above the panel. This is the
     same bridge as a pseudo-element instead: it keeps the pointer inside .hotwrap
     on the way down from the button, without joining the blurred area. */
  .hotbox::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
  .hotbox.is-open{display:block}
  .hot-p{max-width:none}
}

/* mobile menu: full-screen overlay (phone only) */
.mnav{display:none;flex-direction:column;position:fixed;inset:0;z-index:120;background:#e5dfd6;align-items:center;justify-content:center;gap:26px;padding:clamp(28px,8vw,48px);border-top:0}
.mnav.is-open{display:flex}
.mlink{font-weight:400;font-size:18px;letter-spacing:0.14em;text-transform:uppercase;color:#910a0a}
.mlink:hover{font-weight:700}
/* .mnav only ever renders below 700px (the query below hides it outright above that),
   so this needs no width guard of its own. Same fixed corner as .hotclose. */
.mnavclose{position:fixed;top:clamp(16px,4vw,28px);right:clamp(16px,4vw,28px);z-index:2;appearance:none;background:transparent;border:0;padding:6px;cursor:pointer;font-family:inherit;font-size:22px;line-height:1;color:#910a0a}
.mnavclose:hover{font-weight:700}
@media (min-width:700px){.mnav,.mnav.is-open{display:none}}

.frame{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;background:#181615;overflow:hidden;margin-top:0}
.hero-photo{position:absolute;inset:0;pointer-events:none;background:url(./assets/web/bg-dark-portrait.webp) center/cover no-repeat}
.hero-screen{position:absolute;inset:0;color:#e5dfd6;mix-blend-mode:screen}
/* 180% below 1080px; 207.4% under 1360px or at 2200px+; 216% otherwise */
.hero-gif{width:180%;height:180%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);object-fit:cover;object-position:center;display:block;opacity:1;pointer-events:none;user-select:none}
@media (min-width:1080px){.hero-gif{width:216%;height:216%}}
@media (min-width:1080px) and (max-width:1359.98px){.hero-gif{width:207.4%;height:207.4%}}
@media (min-width:2200px){.hero-gif{width:207.4%;height:207.4%}}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 62% 42% at 50% 50%,rgba(24,22,21,0.780) 0%,rgba(24,22,21,0.488) 55%,rgba(24,22,21,0) 100%),linear-gradient(to bottom,rgba(24,22,21,0.150) 0%,rgba(24,22,21,0.150) 45%,rgba(24,22,21,0.650) 100%)}
.hero-copy{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(20px,2.4vw,32px);width:min(560px,79.2%)}
.hero-mark{display:block;width:clamp(72px,6.6vw,120px);height:auto;pointer-events:none;user-select:none}
/* hero line holds 300 at every width */
.hero-line{margin:0;font-weight:300;font-size:var(--t-body);line-height:var(--lh);color:#e5dfd6;max-width:min(344px,86%);text-align:justify;text-align-last:center}
.herocta{appearance:none;border:0;cursor:pointer;background:transparent;color:#910a0a;font-family:inherit;font-weight:700;font-size:clamp(11px,0.9vw,13px);letter-spacing:0.16em;text-transform:uppercase;padding:4px 0}
.herocta:hover{font-weight:900}
.hero-corner{display:none;position:absolute;right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);z-index:3;width:clamp(50px,4.6vw,84px);height:auto;pointer-events:none;user-select:none}
.hero-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(20px,3vw,48px);padding:clamp(20px,3vw,40px) 26px;padding-top:calc(var(--hdr,70px) + 20px)}
.hero-tag{display:none;margin:0;max-width:38ch;font-size:var(--t-body);line-height:var(--lh);color:#e5dfd6;text-wrap:pretty;text-align:justify;text-align-last:left}
@media (min-width:700px){
  .hero-copy{width:min(560px,84%)}
  .hero-line{max-width:min(340px,85%)}
  .hero-bottom{padding-left:clamp(20px,3vw,40px);padding-right:clamp(20px,3vw,40px)}
  .hero-tag{display:block}
}
@media (min-width:860px){.hero-bottom{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
@media (min-width:1080px){.hero-mark{display:none}.hero-corner{display:block}}
/* laptop and up the hero line grows to 15px but the box stayed at 340px, which
   pushed it to a 4th line. 400px holds it to 3 lines across the whole 13-15px
   range (the 3-line window is 350-455px), with room to spare at both ends. */
@media (min-width:1080px){.hero-line{max-width:min(400px,85%)}}

/* ---------- body copy weight: 200 phone, 300 from 700px ---------- */
.w2{font-weight:var(--w-body)}

/* ---------- shared two-column grid ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:clamp(28px,4vw,48px);align-items:start}
@media (min-width:700px){.two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20%}}
/* headings 30% larger on phone; always left-aligned, never justified (house rule) */
.h2{margin:0;font-weight:900;font-size:calc(var(--t-heading) * 1.3);line-height:1.02;letter-spacing:-0.01em;text-transform:uppercase;text-align:left}
.baseline{display:inline-block;width:0;height:0;vertical-align:baseline}
@media (min-width:700px){.h2{font-size:var(--t-heading)}}

/* ---------- about ---------- */
.sec-about{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(64px,8vw,140px) max(16px,10%,(100% - 1152px)/2);border-bottom:1px solid rgba(24,22,21,0.12)}
.about-body{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.body-col{margin:0;font-size:var(--t-body);line-height:var(--lh);text-wrap:pretty;text-align:justify;text-align-last:left}

/* ---------- client ticker ---------- */
.ticker-band{position:relative;background:#910a0a;overflow:hidden}
.ticker{display:flex;width:max-content;padding:clamp(13px,1.6vw,19px) 0;animation:bwh-ticker 39s linear infinite}
.ticker-grp{display:flex;align-items:center;flex:0 0 auto;gap:clamp(60px,9vw,144px);padding-right:clamp(60px,9vw,144px)}
.tlogo{display:flex;align-items:center;flex:0 0 auto;transition:opacity 120ms linear;opacity:1}
.tlogo:hover{opacity:0.6}
.tlogo img{width:auto;display:block;flex:0 0 auto}
@keyframes bwh-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- process ---------- */
/* --sec-gap is the space the red stats band gets on both sides: below the last process step on the
   way in, and above the first FAQ on the way out. One token so the two can't drift apart. */
:root{--sec-gap:clamp(96px,12vw,200px)}
@media (min-width:2000px){:root{--sec-gap:140px}}
.sec-process{position:relative;padding:clamp(64px,8vw,140px) max(16px,10%,(100% - 1152px)/2) var(--sec-gap);border-bottom:1px solid rgba(24,22,21,0.12)}
.proc-track,.proc-pin{position:relative}
.sec-process.is-pinned{padding:0}
/* widescreen: the section fills the screen, steps centred, equal padding top and bottom */
@media (min-width:2000px){.sec-process{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:140px;padding-bottom:var(--sec-gap)}}
.is-pinned .proc-pin{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:64px max(16px,10%,(100% - 1152px)/2);background:#e5dfd6 url(./assets/web/bg-seam.webp) center var(--pin-bg-y,0px) / 100% auto repeat-y}
.steps{display:grid;grid-template-columns:minmax(0,1fr);column-gap:0;grid-auto-rows:auto;margin-top:clamp(34px,4vw,64px)}
.step{position:relative;grid-column:1;margin-top:clamp(28px,5vw,40px)}
@media (max-width:699.98px){.step:first-child{margin-top:clamp(20px,4vw,28px)}}
.step-idx{position:static;display:block;margin:0 0 8px;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);color:#910a0a;font-variant-numeric:tabular-nums;white-space:nowrap}
.step-p{margin:0;font-size:var(--t-body);line-height:var(--lh);text-align:justify;text-align-last:left;text-wrap:pretty}
@media (min-width:700px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20%}
  /* zig-zag: odd steps left column, even steps right, one per row.
     app.js then applies the measured one-line overlap between them. */
  .step{padding-bottom:0;margin-top:0}
  .step[data-step="L"]{grid-column:1}
  .step[data-step="R"]{grid-column:2}
  .step:nth-child(1){grid-row:1/span 1}
  .step:nth-child(2){grid-row:2/span 1}
  .step:nth-child(3){grid-row:3/span 1}
  .step:nth-child(4){grid-row:4/span 1}
  .step:nth-child(5){grid-row:5/span 1}
  .step-idx{position:absolute;top:2px;display:inline;margin:0}
  .step[data-step="L"] .step-idx{left:100%;margin-left:clamp(16px,2vw,40px)}
  .step[data-step="R"] .step-idx{right:100%;margin-right:clamp(16px,2vw,40px)}
}

/* ---------- testimonials ---------- */
.sec-words{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:#910a0a;color:#e5dfd6;padding:clamp(64px,8vw,140px) max(16px,10%,(100% - 1152px)/2) clamp(112px,13vw,200px);overflow:hidden}
.words-clip{overflow:hidden}
.words-track{display:grid;grid-template-columns:repeat(4,100%);column-gap:0;transform:translateX(0%);transition:transform 420ms cubic-bezier(.4,0,.2,1)}
.quote{margin:0;display:flex;flex-direction:column}
.quote-q{margin:0;font-size:var(--t-body);line-height:var(--lh);color:#e5dfd6;text-align:justify;text-align-last:left;text-wrap:pretty}
.quote-cap{margin-top:clamp(48px,5vw,72px)}
.quote-name{font-size:var(--t-body);line-height:var(--lh);color:#e5dfd6}
.quote-role{font-weight:900;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#e5dfd6;margin-top:4px}
.words-nav{position:absolute;left:50%;transform:translateX(-50%);bottom:150px;display:flex;gap:clamp(14px,1.6vw,22px)}
.wordsarrow{appearance:none;background:none;border:0;padding:6px 4px;cursor:pointer;font-family:inherit;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);color:#e5dfd6;transition:opacity 120ms linear}
.wordsarrow:hover{opacity:0.6}
@media (min-width:700px){
  .words-track{grid-template-columns:repeat(4,40%);column-gap:20%}
  .words-nav{bottom:clamp(40px,5vw,72px)}
}

/* ---------- numbers ---------- */
.numbers-wrap{position:relative}
/* The stats sit on their own red band, so --stats-gap is the band's inner padding: the same
   space above the numbers as below the captions, top and bottom of the colour.
   .stat-fig gets -0.05em so that space is measured from the tops of the numbers, not their line box. */
:root{--stats-gap:clamp(56px,7vw,112px)}
/* tablet: one gap (--tab-gap) used three times — inside the red band top and bottom, and from the
   last FAQ to the footer text. 240px + the numbers' built-in space above the glyphs = 244px visible. */
@media (min-width:700px) and (max-width:1079.98px){:root{--tab-gap:244px;--stats-gap:calc(var(--tab-gap) - 4px)}}
/* laptop, desktop, widescreen: same equal gaps, 30% larger */
@media (min-width:1080px){:root{--stats-gap:calc(clamp(56px,7vw,112px) * 1.3)}}
/* Full-bleed red, same pair as the rest of the site. data-dark on the section in the markup is what
   flips the header links and the corner ticks to the light colour while this band is behind them. */
.sec-numbers{position:relative;background:#910a0a;color:#e5dfd6;padding:var(--stats-gap) max(16px,10%,(100% - 1152px)/2) var(--stats-gap)}
.stats{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(20px,3vw,48px);row-gap:clamp(44px,6vw,72px);align-items:end}
.stat{justify-self:center;display:flex;flex-direction:column;align-items:center;text-align:center}
.stat-fig{margin-top:-0.05em;font-weight:900;font-size:clamp(40px,6.4vw,96px);line-height:0.98;letter-spacing:-0.01em;color:#e5dfd6;font-variant-numeric:tabular-nums}
.stat-lbl{font-weight:900;font-size:clamp(9px,0.86vw,12px);letter-spacing:var(--ls-label);text-transform:uppercase;color:#e5dfd6;margin-top:clamp(6px,0.8vw,10px)}
.stat-p{margin:clamp(14px,1.7vw,24px) 0 0;max-width:22ch;font-size:var(--t-body);line-height:var(--lh);text-wrap:pretty}
@media (min-width:700px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat:nth-child(1){justify-self:start}
  .stat:nth-child(2){justify-self:center}
  .stat:nth-child(3){justify-self:end}
}

/* ---------- FAQ ---------- */
/* Top is --sec-gap, the same space the process leaves above the red band, so the band sits in an
   even gap rather than tight underneath. Bottom is the old clamp cut to 60%. */
.sec-faq{position:relative;display:flex;flex-direction:column;overflow-anchor:none;padding:var(--sec-gap) max(16px,10%,(100% - 1152px)/2) clamp(43px,6vw,102px)}
/* phone (placed after the base rules so it wins): the red band fills one full screen with the stats
   centred in it, so the space above and below grows with the screen instead of being fixed. Both
   paddings go, or the centring would sit off-centre. .sec-faq keeps its --sec-gap: it has to clear
   the bottom edge of the colour, which is a hard line rather than a fading gap. */
@media (max-width:699.98px){
  .sec-numbers{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:0;padding-bottom:0}
  .stats{row-gap:56px}
}
/* Each of the three padding-bottom rules is the value it used to be, times 0.6. */
/* tablet: was --tab-gap from the last FAQ to the footer text (the footer's own top padding made up the rest) */
@media (min-width:700px) and (max-width:1079.98px){.sec-faq{padding-bottom:calc((var(--tab-gap) - clamp(80px,11vw,180px)) * 0.6)}}
/* desktop+: this used to be sized so no FAQ showed once you'd scrolled to the bottom of the footer.
   At 60% a row or two now peeks above it, which is the trade for the tighter page.
   --foot-h is the footer's measured height (set in app.js); 560px is the no-JS fallback. */
@media (min-width:1080px){.sec-faq{padding-bottom:calc(max(clamp(72px,10vw,170px),calc(100vh - var(--foot-h,560px) + 40px)) * 0.6)}}
.faq-list{display:flex;flex-direction:column;overflow-anchor:none;gap:clamp(6px,0.7vw,9px)}
.faq{border:1px solid #910a0a;background-color:transparent;transition:background-color 380ms ease}
.faq-q{display:block;padding:clamp(7px,0.8vw,10px) clamp(6px,0.7vw,9px);cursor:pointer;font-weight:900;font-size:14px;color:#910a0a;transition:color 300ms ease;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-a{margin:0;padding:0 clamp(6px,0.7vw,9px) clamp(9px,1vw,13px);font-size:var(--t-body);line-height:var(--lh);text-align:justify;text-align-last:left;text-wrap:pretty;color:#910a0a;transition:color 300ms ease}
.faq[open]{background-color:#910a0a}
.faq[open] .faq-q{color:#e5dfd6}
.faq[open] .faq-a{color:#e5dfd6}
/* phone: the text sat 6px off the box edge, which is tight once the box fills
   with colour. 16px is the same minimum gutter the sections use. */
@media (max-width:699.98px){
  .faq-q{padding-left:16px;padding-right:16px}
  .faq-a{padding-left:16px;padding-right:16px}
}

/* ---------- the void (/the-void/) ----------
   Same gutters and vertical rhythm as the home sections. Top padding also clears
   the fixed header, since there's no hero under it here. Bottom matches the FAQ's.
   Tiles are one per row. From 700px the layout is measured in cqi (1% of the list's
   width), so the image, date, title and line hold their places at every width. */
.sec-void{position:relative;padding:calc(var(--hdr,70px) + clamp(64px,8vw,140px)) max(16px,10%,(100% - 1152px)/2) clamp(43px,6vw,102px)}
/* Page heading: 1.6x the home section headings, red, centred, with its own space above
   and below. The subheading is a bracket label sized like the home stat labels (.stat-lbl). */
.void-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(40px,6vw,120px) 0 clamp(80px,12vw,240px)}
.h2.void-h{font-size:calc(clamp(28px,4.3vw,66px) * 1.6);color:#910a0a;text-align:center}
.void-sub{margin:clamp(16px,2vw,28px) 0 0;max-width:46ch;font-weight:400;font-size:clamp(9px,0.86vw,12px);line-height:1.6;letter-spacing:0.14em;text-transform:uppercase;color:#910a0a;text-wrap:balance}
/* phone only: 25% more space under the heading (80px -> 100px) */
@media (max-width:699.98px){.void-head{padding-bottom:100px}}
/* Blog / Diary switch: two equal halves, and a red box that slides behind the one that's on.
   Sits just above the tiles, the same distance from them as the tiles are from each other. */
.void-tabs{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:max-content;margin:0 auto clamp(28px,4vw,48px)}
.void-tabs[hidden]{display:none}
.void-tabs-ind{position:absolute;top:0;bottom:0;left:0;width:50%;background:#910a0a;transition:transform 280ms cubic-bezier(.4,0,.2,1)}
.void-tabs[data-active="diary"] .void-tabs-ind{transform:translateX(100%)}
.void-tab{position:relative;appearance:none;background:transparent;border:0;cursor:pointer;padding:14px 24px;font-family:inherit;font-weight:900;font-size:14px;line-height:1;letter-spacing:0.12em;text-transform:uppercase;color:#910a0a;transition:color 280ms cubic-bezier(.4,0,.2,1)}
.void-tab[aria-selected="true"]{color:#e5dfd6}
/* phone and tablet (under 1080px): a lighter switch, about 27% smaller. Text holds at 11px,
   the site's label size, and only the padding comes in. An invisible band above and below
   keeps the tap area 45px tall, the size a thumb needs. */
@media (max-width:1079.98px){
  .void-tab{padding:10px 16px;font-size:11px}
  .void-tab::after{content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px}
}
.void-list{container-type:inline-size;display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.void-list[hidden]{display:none}
.void-list + .void-list{margin-top:clamp(28px,4vw,48px)}
.post{margin:0}
/* Same card rule as the FAQs: transparent over the paper, red keyline, red text. */
.post-link{display:grid;grid-template-columns:minmax(0,1fr);padding:12px 12px 0;border:1px solid #910a0a;background:transparent;color:#910a0a;box-shadow:inset 0 0 0 0 #910a0a;transition:box-shadow 160ms ease-out}
a.post-link:hover{color:#910a0a}
/* hover (mouse only) and keyboard focus: the outline thickens from 1px to 2px. Drawn as an
   inner shadow so nothing inside the tile moves. */
@media (hover:hover){a.post-link:hover{box-shadow:inset 0 0 0 1px #910a0a}}
a.post-link:focus-visible{outline:none;box-shadow:inset 0 0 0 1px #910a0a}
.post-img{position:relative;overflow:hidden;aspect-ratio:16/9}
.post-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* Text sizes are locked to the tablet ratio (date 11 : line 14 : title 25.8) at every width.
   --u is the date size; the line, the title and the gaps are all multiples of it.
   The title is then 40% up on the tablet ratio (2.3455 x 1.4 = 3.2837).
   The date and the line are fixed at 14px, the home page body size (.body-col).
   Phone uses the tablet sizes as they are. From 700px --u is 1.7904cqi, which is 11px
   on the tablet's 614px-wide tile, so everything grows and shrinks together (never
   below 11px). */
.post-copy{--u:11px;display:flex;flex-direction:column;align-items:flex-start;padding:24px 4px 24px}
.post-date{margin:0;font-weight:400;font-size:var(--t-body);line-height:var(--lh);letter-spacing:var(--ls-label);text-transform:uppercase;color:#910a0a}
.post-title{margin:calc(var(--u) * 1.8) 0 0;font-weight:900;font-size:calc(var(--u) * 3.2837);line-height:1.02;letter-spacing:-0.01em;text-transform:uppercase;color:#910a0a;text-wrap:balance}
.post-sub{margin:calc(var(--u) * 1.5) 0 0;font-size:var(--t-body);line-height:var(--lh);color:#910a0a}
@media (min-width:700px){
  .post-link{grid-template-columns:29.3cqi minmax(0,1fr);column-gap:6.4cqi;min-height:31.7cqi;padding:1.2cqi 5cqi 1.2cqi 1.2cqi}
  .post-img{aspect-ratio:auto;align-self:stretch}
  /* the date, title and line sit as one block, centred top to bottom in the tile */
  .post-copy{--u:max(11px,1.7904cqi);justify-content:center;padding:2cqi 0}
}

/* ---------- void post page (/the-void/blog/…/, /the-void/diary/…/) ----------
   Home rules throughout: section gutters and padding as .sec-about (plus header
   clearance, as .sec-void), date and title in the left column of the home .two grid,
   title in home .h2 type (red, as on the tiles). The body is home body copy (.body-col:
   14px, 1.6, .w2 weight, ink colour, home paragraph gap), 1.5 home columns wide (60%)
   and set against the right edge, justified with the last line left. */
.sec-post{position:relative;display:block;padding:calc(var(--hdr,70px) + clamp(64px,8vw,140px)) max(16px,10%,(100% - 1152px)/2) clamp(43px,6vw,102px)}
.post-page-date{margin:0;font-weight:400;font-size:var(--t-body);line-height:var(--lh);letter-spacing:var(--ls-label);text-transform:uppercase;color:#910a0a}
.h2.post-page-title{margin-top:clamp(20px,2.4vw,32px);color:#910a0a}
/* [Go back]: a nav-style bracket link under the title, same gap as date to title. */
.post-back{display:inline-block;margin-top:clamp(20px,2.4vw,32px);font-weight:400;font-size:var(--t-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:#910a0a}
.post-back:hover{font-weight:700;color:#910a0a}
.post-page-body{margin:clamp(34px,4vw,64px) 0 0 auto;display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.post-page-body p{margin:0;font-size:var(--t-body);line-height:var(--lh);color:#181615;text-wrap:pretty;text-align:justify;text-align-last:left}
/* 404: the post page layout with a short note and two links */
.sec-404{min-height:70vh}
.nf-p{margin-top:clamp(20px,2.4vw,32px);max-width:46ch}
.nf-links{display:flex;flex-wrap:wrap;column-gap:24px}
/* phone: last line centred */
@media (max-width:699.98px){.post-page-body p{text-align-last:center}}
/* a word in the body text that opens the BWH // Hotline box */
.inline-hot{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;color:#910a0a;cursor:pointer}
.inline-hot:hover{color:#181615}
/* [i] / [ii] points in a post: indented to line up with the bullet lists */
.post-page-body p.post-item{padding-left:24px}
/* a point with its explanation under it: one block, no gap between them, the
   explanation indented a step further */
.post-point{display:flex;flex-direction:column}
.post-page-body p.post-subitem{padding-left:48px}
.post-page-body strong{font-weight:700}
.post-page-body strong.red{color:#910a0a}
/* lists in a post: same text as the paragraphs, justified, but the last line of each
   point sits left so a short point stays next to its bullet */
.post-list{margin:0;padding-left:42px;display:flex;flex-direction:column;gap:8px;font-size:var(--t-body);line-height:var(--lh);color:#181615}
.post-list li{text-align:justify;text-align-last:left;text-wrap:pretty}
.post-list{list-style-type:'-  '}
.post-list .post-list{list-style-type:'->  '}
.post-list li::marker{font-weight:700}
.post-list .post-list{margin-top:8px;padding-left:24px}
/* impact vs. repeats matrix: a plus drawn with 1px ink axes, a label at each end and the
   examples plotted in red. Proportions follow page 2 of the matching PDF. */
.post-matrix{margin:clamp(8px,1.5vw,16px) auto;width:100%;max-width:560px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:10px;align-items:center;justify-items:center}
.pm-ax{font-weight:700;font-size:11px;line-height:1.2;letter-spacing:0.03em;text-transform:uppercase;color:#181615;white-space:nowrap}
.pm-top{grid-column:2;grid-row:1}
.pm-bot{grid-column:2;grid-row:3}
.pm-lft{grid-column:1;grid-row:2;text-align:right}
.pm-rgt{grid-column:3;grid-row:2;text-align:left}
.pm-plus{grid-column:2;grid-row:2;position:relative;width:100%;aspect-ratio:346/410}
.pm-plus::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#181615}
.pm-plus::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:#181615}
.pm-pt{position:absolute;transform:translate(-50%,-50%);font-weight:700;font-size:14px;line-height:1;color:#910a0a;white-space:nowrap}
/* quadrant notes: small, hugging the centre of the cross. Each sits against the y axis on
   its own side, just above or below the x axis (top right is left-aligned just above it). */
.pm-q{position:absolute;width:124px}
.pm-q h4{margin:0 0 2px;font-weight:900;font-size:10px;line-height:1.15;letter-spacing:0.02em;text-transform:uppercase;color:#181615;text-wrap:balance}
.pm-q p{margin:0;font-weight:300;font-size:10px;line-height:1.35;color:#181615;text-align:inherit;text-align-last:auto;text-wrap:balance}
.pm-go h4{color:#910a0a}
.pm-tl,.pm-tr{bottom:calc(50% + 7px)}
.pm-bl,.pm-br{top:calc(50% + 7px)}
.pm-tl,.pm-bl{right:calc(50% + 8px);text-align:right}
.pm-tr,.pm-br{left:calc(50% + 8px);text-align:left}
/* phone: side labels break onto two lines so the cross keeps its width, and the cross
   runs taller so the quadrant notes clear the plotted points */
@media (max-width:699.98px){.pm-lft,.pm-rgt{white-space:normal;width:min-content}.pm-plus{aspect-ratio:193/320}}
/* 124px gives every note one line of heading and two of description. The cross needs to be
   at least 2 x (124 + 8)px wide for that, so on tablet the matrix steps out of the 60% text
   column and centres in the full content width. Phone is too narrow: notes fit the half
   cross and run to more lines. */
@media (min-width:700px) and (max-width:1079.98px){.post-matrix{width:calc(100% / 0.6);max-width:560px;margin-left:calc(100% - 100% / 0.6 + (100% / 0.6 - min(100% / 0.6, 560px)) / 2);margin-right:0}}
@media (max-width:699.98px){.pm-q{width:calc(50% - 14px)}}
@media (min-width:700px){.post-page-body{width:60%}}

/* ---------- page fade: The Void <-> its posts ----------
   Only The Void and each post carry @view-transition, so tiles and [Go back] fade.
   Nav, menu and footer links skip it (app.js) and change page as normal. Same timing
   as the Blog / Diary switch: the old page fades out, then the new one fades in. The
   header is named so it holds still while the content fades. Browsers without view
   transitions simply change page as normal. */
.hdr{view-transition-name:hdr}
::view-transition-old(root){animation:bwh-fade-out 160ms ease-in both}
::view-transition-new(root){animation:bwh-fade-in 260ms ease-out 160ms both}
@keyframes bwh-fade-out{to{opacity:0}}
@keyframes bwh-fade-in{from{opacity:0}}

/* ---------- footer ---------- */
.foot{position:relative;color:#181615;overflow:hidden;padding:clamp(80px,11vw,180px) 0 0}
.f-grid{position:relative;z-index:1;padding:0 max(16px,10%,(100% - 1152px)/2);display:grid;grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:clamp(36px,5vw,56px);align-items:start}
.f-mark{order:2}
.f-head{font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#181615;margin-bottom:12px}
.f-tag{margin:0;max-width:26ch;font-size:var(--t-body);line-height:var(--lh);text-align:left;text-wrap:pretty}
/* a line break that only applies on phone (under 700px) */
.br-phone{display:none}
@media (max-width:699.98px){.br-phone{display:inline}}
.f-cols{order:1;display:grid;grid-template-columns:repeat(2,max-content);width:auto;justify-self:stretch;column-gap:20px;row-gap:clamp(28px,4vw,40px)}
.f-col-site{display:none}
/* phone: [Contact] | [Follow] on top, then [Built With Hedgehog] | [Partners]. The column
   wrapper steps aside (display:contents) so all four share one grid; the right-hand
   column hugs the right margin. */
@media (max-width:699.98px){
  .f-grid{grid-template-columns:minmax(0,1fr) max-content;column-gap:20px;grid-template-areas:"contact follow" "mark partners"}
  .f-cols{display:contents}
  .f-col-contact{grid-area:contact}
  .f-col-follow{grid-area:follow}
  .f-mark{grid-area:mark}
  .f-col-partners{grid-area:partners}
}
.f-stack{display:flex;flex-direction:column}
.flink,.flink-s{font-size:var(--t-body);line-height:1.75;color:#181615}
.flink:hover{color:#910a0a}
.flink-nw{white-space:nowrap}
/* Privacy Policy under the tagline: a footer link that opens the policy overlay. */
.fpriv{display:block;appearance:none;background:none;border:0;padding:0;margin-top:12px;cursor:pointer;font-family:inherit;text-align:left}
.fcontact{display:block;appearance:none;border:0;padding:0;background:transparent;cursor:pointer;font-family:inherit;text-align:left;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#181615;margin-bottom:12px}
.fcontact:hover{color:#910a0a}
.f-spray{position:relative;z-index:0;margin-top:20px;margin-bottom:132px;height:33.2vw;overflow:visible}
.f-spray img{position:absolute;left:-7%;top:0;width:114%;max-width:none;height:auto;pointer-events:none;user-select:none}
@media (min-width:700px){
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20%}
  .f-mark{order:0}
  .f-cols{order:0;grid-template-columns:repeat(4,max-content);width:max-content;justify-self:end;column-gap:clamp(16px,2.4vw,40px)}
  .f-col-site{display:block}
  .f-spray{margin-top:calc(clamp(20px,2.4vw,40px) - 14.3vw);margin-bottom:0}
}
/* tablet: four columns won't fit beside the tagline, so they sit two by two */
@media (min-width:700px) and (max-width:1079.98px){
  .f-cols{grid-template-columns:repeat(2,max-content)}
}

/* ---------- next-step card ---------- */
.nextup{position:fixed;z-index:30;appearance:none;cursor:pointer;display:flex;align-items:stretch;gap:0;padding:0;font-family:'DM Sans',sans-serif;background:rgba(145,10,10,0.78);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);border:0;color:#e5dfd6;opacity:0;pointer-events:none;left:0;right:0;bottom:0;text-align:center;justify-content:center;transform:translateY(100%);transition:background 120ms linear,transform 460ms cubic-bezier(.4,0,.2,1),opacity 300ms linear}
.nextup:hover{background:rgba(145,10,10,0.92)}
.nextup.is-in{transform:none;opacity:1;pointer-events:auto}
.nextup-pad{padding:18px 22px 22px;max-width:100%}
.nextup-h{font-weight:700;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#e5dfd6;margin-bottom:10px}
.nextup-b{font-weight:400;font-size:var(--t-body);line-height:var(--lh);color:#e5dfd6;text-wrap:pretty}
@media (min-width:700px){
  .nextup{left:auto;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);text-align:left;justify-content:flex-start;transform:translateX(calc(100% + clamp(16px,3vw,40px)))}
  .nextup-pad{padding:14px 18px;max-width:260px}
}

/* ---------- privacy policy overlay ---------- */
.privacy{outline:none;display:none;position:fixed;inset:0;z-index:90;background:#e5dfd6;font-family:'DM Sans',sans-serif;overflow-y:auto;overscroll-behavior:contain}
.privacy.is-open{display:block}
.priv-close{position:fixed;top:clamp(16px,2.4vw,32px);right:clamp(16px,3vw,40px);z-index:2;appearance:none;background:#e5dfd6;border:0;padding:6px 10px;cursor:pointer;font-family:inherit;font-size:22px;line-height:1;color:#181615}
.priv-close:hover{color:#910a0a}
.priv-body{max-width:760px;margin:0 auto;padding:clamp(56px,7vw,104px) clamp(20px,5vw,48px) clamp(64px,8vw,120px)}
.priv-h1{margin:0;font-weight:900;font-size:var(--t-heading);line-height:1.02;letter-spacing:-0.01em;text-transform:uppercase;color:#181615}
.priv-date{margin:14px 0 0;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#910a0a}
.priv-lead{margin:clamp(28px,3.4vw,44px) 0 0;font-weight:var(--w-body);font-size:var(--t-body);line-height:var(--lh);color:#181615;text-wrap:pretty}
.priv-h2{margin:clamp(34px,4vw,56px) 0 14px;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#910a0a}
.priv-p{margin:0;font-weight:var(--w-body);font-size:var(--t-body);line-height:var(--lh);color:#181615;text-wrap:pretty}
.priv-p-gap{margin-top:16px}
.priv-p-tbl{margin-bottom:20px}
.priv-p-after{margin-top:20px}
.priv-ul{margin:14px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-weight:var(--w-body);font-size:var(--t-body);line-height:var(--lh);color:#181615}
.priv-a{text-decoration:underline}
.priv-tbl{display:grid;grid-template-columns:minmax(80px,0.8fr) minmax(0,2fr) minmax(90px,1fr);border-top:1px solid rgba(24,22,21,0.12)}
.pt-h{padding:10px 12px 10px 0;border-bottom:1px solid rgba(24,22,21,0.12);font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#910a0a}
.pt-c{padding:12px 12px 12px 0;border-bottom:1px solid rgba(24,22,21,0.12);font-size:var(--t-body);line-height:var(--lh);color:#181615}
.pt-m{padding-left:12px;padding-right:12px}
.pt-r{padding-left:12px;padding-right:0}
.pt-s{font-weight:400;letter-spacing:0.03em}
.pt-d{font-weight:300}

/* ---------- contact dialog ---------- */
.cbox{display:none;position:fixed;inset:0;z-index:60;font-family:'DM Sans',sans-serif}
.cbox.is-open{display:block}
.cscrim{position:absolute;inset:0;background:rgba(24,22,21,0.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cpanel{position:absolute;top:auto;bottom:0;left:0;width:100%;max-height:calc(100svh - 24px);overflow:auto;background:#e5dfd6 url(./assets/web/bg-light.jpg) center center / cover no-repeat;border:1px solid #181615;border-width:1px 0 0;padding:clamp(24px,3vw,40px);transform:translateY(100%);transition:transform 460ms cubic-bezier(.4,0,.2,1)}
.cbox.is-shown .cpanel{transform:translateY(0)}
@media (min-width:700px){
  .cpanel{top:50%;bottom:auto;left:50%;width:min(520px,calc(100vw - 32px));max-height:min(880px,calc(100svh - 48px));border-width:1px;transform:translate(-50%,-50%);transition:none}
  .cbox.is-shown .cpanel{transform:translate(-50%,-50%)}
}
@media (min-width:1080px){.cpanel{width:min(820px,calc(100vw - 32px))}}
.chead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:clamp(20px,2.6vw,32px)}
.ctitle{margin:0;font-weight:900;font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:-0.01em;text-transform:uppercase;color:#181615}
.cclose{appearance:none;background:none;border:0;padding:2px 4px;cursor:pointer;font-family:inherit;font-size:18px;line-height:1;color:#181615}
.cclose:hover{color:#910a0a}
.cform{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px)}
.crow{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.2vw,26px)}
@media (min-width:1080px){.crow{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,40px)}}
.cfield{display:flex;flex-direction:column;gap:8px}
.clabel{font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#181615}
.cinput,.ctextarea{appearance:none;background:transparent;border:0;border-bottom:1px solid rgba(24,22,21,0.45);padding:6px 0;font-family:inherit;font-weight:var(--w-body);font-size:var(--t-input);color:#181615;outline:none}
.ctextarea{line-height:1.5;resize:vertical}
.cinput:focus,.ctextarea:focus{border-bottom:1px solid #910a0a}
.dd{position:relative;display:block}
.ddbtn{appearance:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:transparent;border:0;border-bottom:1px solid rgba(24,22,21,0.45);border-radius:0;padding:6px 0;font-family:inherit;font-weight:var(--w-body);font-size:var(--t-input);line-height:1.4;text-align:left;color:#181615;outline:none;cursor:pointer}
.ddbtn:hover,.ddbtn:focus{border-bottom:1px solid #910a0a}
.ddcaret{flex:0 0 auto;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);color:#910a0a}
.ddlist{display:none;position:absolute;z-index:5;top:calc(100% + 6px);left:0;right:0;min-width:100%;background:#e5dfd6;border:1px solid #181615;box-shadow:0 10px 30px rgba(24,22,21,0.18);padding:4px 0;max-height:220px;overflow:auto}
.ddopt{appearance:none;display:block;width:100%;background:transparent;border:0;padding:9px 12px;font-family:inherit;font-weight:var(--w-body);font-size:var(--t-body);line-height:var(--lh);text-align:left;color:#181615;cursor:pointer}
.ddopt:hover{background:#910a0a;color:#e5dfd6}
[data-dd][data-open="true"] [data-dd-list-box]{display:block}
[data-dd] [data-dd-val]{color:rgba(24,22,21,0.45)}
[data-dd][data-set="true"] [data-dd-val]{color:#181615}
.copt{display:flex;align-items:center;gap:10px;cursor:pointer}
.copt input{appearance:none;flex:0 0 auto;width:14px;height:14px;margin:0;border-radius:0;cursor:pointer;border:1px solid #181615;background:transparent}
.copt input:checked{border-color:#910a0a;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.9 1.3 12.4 10.8'%3E%3Cpath d='M2.2 7.6 L5.4 10.8 L12 2.6' fill='none' stroke='%23910a0a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px auto no-repeat}
.copt-t{font-weight:var(--w-body);font-size:var(--t-small);line-height:var(--lh);color:#181615}
.csubmit{appearance:none;margin-top:6px;background:#181615;border:0;padding:18px;cursor:pointer;font-family:inherit;font-weight:400;font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:#e5dfd6;transition:background 120ms linear}
.csubmit:hover{background:#910a0a}
.cerr{display:none;margin:0;font-weight:400;font-size:var(--t-small);line-height:var(--lh);color:#910a0a}
.cerr-a{color:#910a0a;text-decoration:underline}
.cprivacy{margin:0;font-weight:var(--w-body);font-size:var(--t-small);line-height:var(--lh);color:#181615}
.privlink{appearance:none;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;color:#181615;text-decoration:underline}
.privlink:hover{color:#910a0a}
.cdone{display:none;padding:clamp(8px,1.4vw,16px) 0 clamp(24px,4vw,48px)}
.cdone.is-on{display:block}
.cdone-h{margin:0 0 clamp(16px,2vw,24px);font-weight:900;font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:-0.01em;text-transform:uppercase;color:#181615;text-align:center}
.cdone-p{margin:0 auto;max-width:46ch;font-weight:var(--w-body);font-size:var(--t-body);line-height:var(--lh);color:#181615;text-wrap:pretty;text-align:justify;text-align-last:center}

/* ---------- validation ---------- */
@keyframes bwh-shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px)}30%{transform:translateX(6px)}45%{transform:translateX(-4px)}60%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
[data-invalid]{border-bottom-color:#910a0a!important;animation:bwh-shake 420ms cubic-bezier(.36,.07,.19,.97)}
[data-dd][data-invalid] button{border-bottom-color:#910a0a!important}
[data-invalid]::placeholder{color:rgba(145,10,10,0.6)}
[data-dd][data-invalid] [data-dd-val]{color:rgba(145,10,10,0.75)!important}
label:has([data-invalid])>span:first-child{color:#910a0a!important}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html{scroll-behavior:auto}
  .ticker{animation:none}
  .loader,.loader *{animation:none!important;transition:none!important}
  [data-invalid]{animation:none!important}
  .nextup,.cpanel,.words-track,.faq,.faq-q,.faq-a,.tlogo,.void-tabs-ind,.void-tab{transition:none!important}
  .step{opacity:1!important;transform:none!important;transition:none!important}
}