/* Source Sans Pro: self-hosted; licence in ../fonts/source-sans-pro-OFL.txt. */
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-pro-regular-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;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-pro-regular-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;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-pro-semibold-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;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-pro-semibold-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;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-pro-bold-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;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-pro-bold-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;
}
/* ===========================================================================
   BTRboard — ABM landing page
   Cinematic dark editorial. One ground (pure black), one accent (BTRGlow),
   photography that carries the argument, typography that never shouts.

   Carried over from the Stykka pass because it worked:
     · display type at weight 400 with tight negative tracking — never bold
     · an uppercase tracked label opens every section
     · hairlines and whitespace instead of shadows and boxes

   New here:
     · pure #000 ground, so the product photographed on black floats free of
       any visible container edge
     · BTRGlow #FFE63E — BTRboard's own accent, unused anywhere on their site —
       as the single chromatic event: the bar above each label, and the one CTA
     · a single warm-paper band breaks the dark for the densest reading section
   ======================================================================== */

:root{
  --ink:    #000000;
  --white:  #FFFFFF;
  --mute:   #9AA0A8;
  --paper:  #F4F3EF;
  --paper-ink: #11141A;
  --glow:   #FFE63E;

  --edge:    clamp(22px, 5vw, 92px);
  --maxw:    1400px;
  /* Left gutter outside the centred column — lets the hero scrim track the
     text column instead of the viewport, so contrast holds on ultra-wide. */
  --colx:    max(0px, (100vw - var(--maxw)) / 2);
  --col:     min(var(--maxw), 100vw);
  --section: clamp(72px, 9vw, 150px);

  --t-display: clamp(40px, 5.8vw, 86px);
  --t-heading: clamp(30px, 3.2vw, 48px);
  --t-lead:    clamp(18px, 1.5vw, 22px);
  --t-body:    clamp(16px, 1.12vw, 17px);
  --t-label:   clamp(11px, .88vw, 13px);
  --t-spec:    clamp(14px, 1.45vw, 21px);

  --sans:"Source Sans Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
picture{ display:block; }
h1,h2,h3,p,figure{ margin:0; }

.shell{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--edge); }

/* Ultra-wide: let the column breathe rather than stranding it in a sea of black. */
@media (min-width:1800px){ :root{ --maxw:1560px; } }
@media (min-width:2400px){ :root{ --maxw:1720px; } }
.section{ padding-block:var(--section); }

/* --- Type ---------------------------------------------------------------- */
/* Source Sans Pro uses open tracking and relaxed leading at display sizes. */
.display{ font-size:var(--t-display); font-weight:700; line-height:1.06; letter-spacing:-.018em; text-wrap:balance; }
.heading{ font-size:var(--t-heading); font-weight:700; line-height:1.12; letter-spacing:-.012em; text-wrap:balance; }
.lead   { font-size:var(--t-lead);    font-weight:400; line-height:1.5; letter-spacing:0; max-width:36ch; text-wrap:pretty; }
.body   { font-size:var(--t-body);    line-height:1.65; max-width:58ch; color:var(--mute); text-wrap:pretty; }
.body strong{ color:var(--white); font-weight:600; }

/* The repeated motif: a short BTRGlow bar, then the tracked label. */
/* Block, not flex: as a flex container the label's text became an anonymous
   flex item that could not wrap, so a long builder name overflowed and the
   hero's overflow:hidden clipped it away entirely. */
.label{
  display:block;
  font-size:var(--t-label); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--white);
}
.label::before{
  content:""; display:inline-block; vertical-align:middle;
  width:26px; height:2px; margin-right:.9em;
  background:var(--glow);
}
.label--plain::before{ display:none; }

.opener > * + *{ margin-top:clamp(14px,1.5vw,22px); }

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:12px 26px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:2px;
  background:transparent; color:var(--white);
  font-family:inherit; font-size:clamp(14px,1.02vw,15px); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover{ background:var(--white); border-color:var(--white); color:var(--ink); }
.btn:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; }

/* The single chromatic event on the page. */
.btn--glow{ background:var(--glow); border-color:var(--glow); color:var(--ink); }
.btn--glow:hover{ background:var(--white); border-color:var(--white); color:var(--ink); }
/* Press reads instantly — the control answers before the page does. */
.btn:active{ scale:.975; transition-duration:.06s; }
.btn{ transition:background .22s ease, color .22s ease, border-color .22s ease, scale .18s ease; }

/* --- Nav ----------------------------------------------------------------- */
.nav{
  position:absolute; inset:0 0 auto 0; z-index:3;
  display:flex; align-items:center;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(20px,2.2vw,32px) var(--edge);
}
.nav__logo{ width:clamp(116px,10.5vw,150px); height:auto; }

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end; overflow:hidden;
  background:#05070B;
}
.hero__photo,.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.hero__video{ opacity:0; pointer-events:none; }
.hero__video.is-ready{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0;
  /* Stops are anchored to the centred content column (--colx / --col), not to
     the viewport, so the falloff follows the text on wider displays. */
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.42) 0,
      rgba(0,0,0,.36) var(--colx),
      rgba(0,0,0,.24) calc(var(--colx) + var(--col) * .42),
      rgba(0,0,0,.06) calc(var(--colx) + var(--col) * .70),
      rgba(0,0,0,0)   calc(var(--colx) + var(--col) * .92)),
    linear-gradient(0deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 46%);
}

@media (max-width:760px){
  /* Keep the windows and BTRboard in a portrait crop. Apply the vertical wash
     after the base scrim to protect the copy over the sunset interior. */
  .hero__photo,.hero__video{ object-position:35% 50%; }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.22) 32%,
      rgba(0,0,0,.42) 58%,
      rgba(0,0,0,.60) 100%);
  }
}

/* Dissolve the foot of the hero into the section below, so the photograph has
   no cut edge. Its own layer rather than part of .hero__scrim, because the
   narrow-width rule replaces that background wholesale and would drop it.
   Ends on #000 — the exact ground the next section sits on. */
.hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; z-index:1;
  height:clamp(100px, 15vh, 180px);
  pointer-events:none;
  /* Shorter and back-loaded, so the sunlit floor keeps its detail and only the
     last sliver goes solid — just enough to kill the seam. */
  background:linear-gradient(180deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,.08) 46%,
    rgba(0,0,0,.34) 74%,
    rgba(0,0,0,.74) 92%,
    #000           100%);
}

.hero__block{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding:var(--edge);
  padding-bottom:clamp(44px,6vw,104px);
}
.hero__block > * + *{ margin-top:clamp(16px,1.7vw,26px); }
.hero .display{ max-width:17ch; }
.hero__cta{ margin-top:clamp(26px,3vw,42px); }

.hero__motion{
  position:absolute; z-index:3;
  right:calc(var(--colx) + var(--edge)); bottom:16px;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:8px 12px;
  border:1px solid rgba(255,255,255,.4); border-radius:2px;
  background:rgba(0,0,0,.55); color:var(--white);
  font:400 12px var(--sans); letter-spacing:.02em; cursor:pointer;
}
.hero__motion[hidden]{ display:none; }
.hero__motion:hover{ background:rgba(0,0,0,.8); }
.hero__motion:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; }
.hero__motion-icon{ width:9px; height:10px; border-inline:3px solid currentColor; }
.hero__motion.is-paused .hero__motion-icon{
  width:0; height:0; border:5px solid transparent;
  border-right:0; border-left:8px solid currentColor;
}
@media (max-width:760px){ .hero__block{ padding-bottom:84px; } }
@media (prefers-reduced-motion:reduce){ .hero__video,.hero__motion{ display:none; } }

/* --- Product takeaway: close the explanation with the builder benefit. --- */
.showcase__takeaway{ margin-top:clamp(32px,4vw,56px); }
.showcase__takeaway .quiet{
  font-size:var(--t-lead); font-weight:700; line-height:1.5;
  letter-spacing:0; color:var(--white); text-wrap:pretty;
}
.statement__detail{ margin-top:12px; }
@media (min-width:960px){
  .statement__detail{ max-width:none; }
}
.spec{
  margin-top:clamp(22px,2.4vw,34px);
  font-family:var(--sans); font-size:var(--t-spec); font-weight:400;
  line-height:1.5; letter-spacing:0; color:var(--white);
  border-top:1px solid var(--divider, #0082BE);
  padding-top:clamp(20px,2.2vw,30px);
}
.spec b{ color:var(--glow); font-weight:400; }

/* --- Showcase: copy and product sit side by side, never overlapping ------ */
.showcase{ position:relative; background:var(--ink); }

.showcase__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(34px,4vw,64px);
  align-items:start;
}
@media (min-width:960px){
  .showcase__grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,4.5vw,80px); }
}
.showcase__copy{ max-width:52ch; }

/* The panel, with its layers called out on the image itself. */
.board{ margin:0; }
/* The calls are positioned against the image alone — not the figure, which also
   carries the legend and would skew every percentage downward. */
.board__media{ position:relative; }
.board__media img{ width:100%; height:auto; display:block; }

/* --- Layers labelled on the image ---------------------------------------- */
.board__call{
  --dot-size:clamp(36px,3.2vw,44px);
  position:absolute; left:var(--x); top:var(--y); z-index:3;
  transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:.55em;
  margin-left:calc(var(--dot-size) * -.5);   /* keeps the enlarged dot centred on --x */
  /* Vertical padding only — it lifts the hit area to the 44px touch minimum
     without moving the dot off its layer or changing anything visible. */
  padding:9px 0; border:0; background:none; cursor:pointer;
  min-height:44px;
  font-family:inherit; white-space:nowrap;
}
.board__call:focus-visible{ outline:2px solid var(--glow); outline-offset:5px; border-radius:4px; }

.board__dot{
  flex:none; display:grid; place-items:center;
  width:var(--dot-size); aspect-ratio:1;
  border:1px solid rgba(255,230,62,.45); border-radius:50%;
  background:rgba(0,0,0,.6); color:rgba(255,230,62,.8);
  font-family:var(--sans); font-size:clamp(14px,1.1vw,16px); font-weight:600; line-height:1; scale:1;
  transition:border-color .3s ease, background .3s ease, color .3s ease,
             scale .2s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
.board__name{
  display:none;
  /* A soft wash rather than a box — the foam core behind it is near-white. */
  padding:.32em .6em;
  background:rgba(0,0,0,.68);
  color:rgba(255,255,255,.72);
  font-size:var(--t-label); font-weight:400; letter-spacing:0; line-height:1.3;
  transition:color .3s ease, background .3s ease;
}
.board__call[aria-expanded="true"] .board__dot{
  border-color:var(--glow); background:var(--glow); color:var(--ink); scale:1.14;
}
.board__call[aria-expanded="true"] .board__name{
  display:block;
  animation:noteIn .2s cubic-bezier(.16,1,.3,1) both;
  color:var(--white); background:rgba(0,0,0,.82);
  box-shadow:inset 0 -2px 0 var(--glow);
}
.board__call:hover .board__dot{ border-color:var(--glow); color:var(--glow); }
.board__call[aria-expanded="true"]:hover .board__dot{ color:var(--ink); }
.board__call:hover .board__name{ color:var(--white); }

/* One arrival after the image loads and enough of the board is visible.
   Keyframes also play when the page opens directly at the product section. */
@media (prefers-reduced-motion:no-preference){
  .js-enter .board[data-enter]{
    opacity:.35;
  }
  .js-enter .board[data-enter].is-in{
    opacity:1; animation:boardArrival 1s cubic-bezier(.2,.65,.3,1) both;
  }
  @keyframes boardArrival{
    from{ opacity:.12; transform:translateY(36px); }
    to{ opacity:1; transform:none; }
  }
  .js-enter .board[data-enter]:focus-within{ opacity:1; transform:none; animation:none; }
  .js-enter .board[data-enter] .board__call{ opacity:0; }
  .js-enter .board[data-enter].is-in .board__call{
    opacity:1; transition:opacity .22s ease;
  }
  .js-enter .board[data-enter].is-in .board__call:nth-child(1){ transition-delay:.24s; }
  .js-enter .board[data-enter].is-in .board__call:nth-child(2){ transition-delay:.30s; }
  .js-enter .board[data-enter].is-in .board__call:nth-child(3){ transition-delay:.36s; }
  .js-enter .board[data-enter]:focus-within .board__call{ opacity:1; transition:none; }
}

/* --- Notes beside their markers ------------------------------------------ */
.board__leaders{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}
.board__leaders line{
  stroke:var(--glow); stroke-width:1; opacity:0;
  transition:opacity .28s ease;
}
.board__leaders line.is-on{ opacity:.85; }

.board__note{
  position:absolute; left:var(--nx); z-index:2;
  width:min(32%, 30ch);
  padding:.7em .85em;
  background:rgba(0,0,0,.84);
  box-shadow:inset 0 0 0 1px rgba(255,230,62,.45);
  color:var(--white);
  font-size:var(--t-label); line-height:1.5; letter-spacing:0;
  animation:noteIn .22s cubic-bezier(.16,1,.3,1) both;
}
.board__note--up  { bottom:calc(100% - var(--ny)); }
.board__note--down{ top:var(--ny); }
.board__note[hidden]{ display:none; }
.board__note--facer{ width:min(38%,30ch); }
@keyframes noteIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* Below the two-column breakpoint the notes cannot sit beside their markers,
   so they pin across the foot of the plate and the leaders drop away. */
@media (max-width:900px){
  .board__leaders{ display:none; }
  .board__note{
    left:0; right:0; top:auto; bottom:0; width:auto;
    padding:.8em 1em;
    background:rgba(0,0,0,.88);
    box-shadow:inset 0 1px 0 rgba(255,230,62,.45);
  }
  /* Insulation stays over the upper facer instead of the bottom caption. */
  .board__note--facer{
    left:36%; right:auto; top:20%; bottom:auto;
    width:min(38%,30ch);
  }
}
@media (max-width:580px){
  .board__note--facer{
    left:28%; top:10%; width:65%;
    padding:.55em .65em;
  }
}
@media (prefers-reduced-motion:reduce){
  .board__note,.board__call[aria-expanded="true"] .board__name{ animation:none; }
  .board__dot{ transition:border-color .15s ease, background .15s ease, color .15s ease; }
  .board__call[aria-expanded="true"] .board__dot{ scale:1; }
  .board__leaders line{ transition:none; }
}

/* --- The one light band -------------------------------------------------- */
/* The mid-page break, restored. Taking it away left five dark sections in a
   row with the densest reading on the page stranded in the middle of them.
   Two light surfaces now, doing different jobs: warm paper here for reading,
   pure white at the close for arrival. */
.paper{ background:var(--paper); color:var(--paper-ink); }
.paper .body{ color:#4A505A; }
.paper .label{ color:var(--paper-ink); }

.reasons{ display:grid; grid-template-columns:1fr; gap:clamp(18px,1.9vw,28px); margin-top:clamp(36px,4vw,60px); }
@media (min-width:720px){ .reasons{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1060px){ .reasons{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

.reason{ border-top:1px solid rgba(17,20,26,.22); padding-top:clamp(12px,1.2vw,18px); }
.reason h3{ font-size:clamp(17px,1.3vw,19px); font-weight:600; letter-spacing:-.025em; }
.reason p{ margin-top:6px; color:#4A505A; max-width:32ch; }

/* The two claims carrying a number lead; the rest support them. */
.reason--lead{ border-top-color:rgba(17,20,26,.5); }
/* Only span once there are four columns. At the two-column breakpoint a span
   of 2 is the full width, which left each figure marooned in a wide empty row
   and pushed the section twice as tall as it needed to be. */
@media (min-width:1060px){ .reason--lead{ grid-column:span 2; } }
.reason--lead .figure{
  display:block;
  font-size:clamp(40px,4.4vw,66px); font-weight:400; line-height:1;
  letter-spacing:-.04em; color:var(--paper-ink);
  margin-bottom:.18em;
}
.reason--lead h3{ font-size:clamp(19px,1.5vw,23px); font-weight:600; }
.reason--lead p{ max-width:34ch; }

/* --- Proof + testimonial: one section, the film replaces the copy -------- */
.proof{
  position:relative; min-height:clamp(560px,62vw,820px);
  display:flex; align-items:flex-end; overflow:hidden;
  background:var(--ink);
}
.proof__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }

.proof__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:var(--ink);
  opacity:0; pointer-events:none;
  transition:opacity .55s ease;
}
.proof__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.66) 38%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.05) 100%),
    /* Reaches higher and harder than before: the witness block is taller than
       the copy it replaced, so it sits where the old scrim had already run out.
       Solved to 5.07:1 at the 99.8th percentile across every foreground here. */
    linear-gradient(0deg,  rgba(0,0,0,.86) 0%, rgba(0,0,0,0) 76%);
  transition:opacity .55s ease;
}
.proof__block{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding:var(--edge); padding-bottom:clamp(40px,5vw,88px);
  transition:opacity .45s ease;
}
.proof__block > * + *{ margin-top:clamp(14px,1.5vw,22px); }
.proof .body{ color:rgba(255,255,255,.92); }

/* Once it is running, the copy and its scrim step aside entirely. */
.proof.is-playing .proof__video{ opacity:1; pointer-events:auto; z-index:3; }
.proof.is-playing .proof__block,
.proof.is-playing .proof__scrim{ opacity:0; pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .proof__video, .proof__scrim, .proof__block{ transition:none; }
}

/* Play control */
.proof__cta{ margin-top:clamp(24px,2.8vw,38px); }
.proof__play{
  display:inline-flex; align-items:center; gap:.9em;
  padding:0; border:0; background:none; cursor:pointer;
  color:var(--white); font-family:inherit;
  font-size:clamp(14px,1.02vw,15px); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
}
.proof__play-ring{
  display:grid; place-items:center; flex:none;
  width:clamp(48px,4.2vw,64px); aspect-ratio:1;
  border:1px solid var(--glow); border-radius:50%;
  background:rgba(0,0,0,.4);
  transition:background .2s ease, transform .2s ease;
}
.proof__play-ring svg{ width:30%; height:auto; margin-left:14%; }
.proof__play:hover .proof__play-ring{ background:rgba(255,230,62,.18); transform:scale(1.06); }
.proof__play:focus-visible{ outline:2px solid var(--glow); outline-offset:6px; }
.proof__play[disabled]{ cursor:default; opacity:.6; }
.proof__play[disabled] .proof__play-ring{ border-color:var(--mute); }

.proof__pending{ margin-top:clamp(12px,1.2vw,16px); color:var(--mute); }

/* --- Witness: attribution, so the testimonial reads as evidence rather than
   another photograph of a wall ------------------------------------------- */
.witness{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px,2vw,28px);
  margin-top:clamp(18px,2vw,28px);
}
.witness__portrait{
  flex:none; width:clamp(84px,8vw,116px); aspect-ratio:4/5;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.4);
  display:grid; place-items:center; text-align:center;
}
.witness__pending{
  /* --mute is only 1.67:1 over this photograph; it needs to be near-white. */
  font-size:var(--t-label); line-height:1.3; color:rgba(255,255,255,.78);
  letter-spacing:.08em; text-transform:uppercase;
}
.witness__who{ min-width:min(100%,34ch); }
.witness__name{
  font-size:clamp(19px,1.6vw,24px); font-weight:600;
  letter-spacing:-.028em; color:var(--white);
}
.witness__role{
  margin-top:3px; font-size:var(--t-label); letter-spacing:.06em;
  text-transform:uppercase; color:var(--glow);
}
.witness__who .body{ margin-top:clamp(10px,1.1vw,15px); }

/* --- Testimonial: a contained video beside Jay's attribution ------------- */
.testimonial{ background:var(--ink); padding-block:clamp(64px,6vw,96px); }
.testimonial__grid{
  display:grid; grid-template-columns:minmax(0,1fr);
  align-items:center; gap:clamp(32px,5vw,80px);
}
.testimonial__copy{ max-width:52ch; min-width:0; }
.testimonial__copy .heading{ max-width:20ch; }
.testimonial__copy .testimonial__attribution{ margin-top:clamp(18px,2vw,26px); }

/* The one place BTRGlow carries a whole surface rather than a hairline. */
.creds{
  margin:clamp(24px,3vw,40px) 0 0;
  display:inline-block;
  background:var(--glow); color:var(--ink);
  padding:clamp(16px,1.8vw,24px) clamp(20px,2.2vw,30px);
}
.creds__fig{
  font-size:clamp(44px,4.6vw,68px); font-weight:400;
  line-height:1.05; letter-spacing:-.025em;
}
.creds__txt{
  margin-top:.3em; font-size:var(--t-label); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
}
.testimonial__name{
  font-size:clamp(21px,1.7vw,26px); font-weight:400;
  letter-spacing:0; line-height:1.3;
}
.testimonial__role{
  margin-top:6px; font-size:var(--t-label); line-height:1.6;
  letter-spacing:.06em; text-transform:uppercase; color:var(--glow);
}
.testimonial__media{
  position:relative; width:100%; aspect-ratio:16/9;
  min-width:0; overflow:hidden; background:#151515;
  border:1px solid rgba(255,255,255,.12);
}
.testimonial__media .proof__video{ object-fit:contain; }
.testimonial__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.testimonial__media.is-playing .testimonial__poster{ opacity:0; }
/* Deliberately loud. A generated face sitting under a real person's name has
   to be impossible to mistake for the real thing. */
.testimonial__flag{
  position:absolute; left:0; bottom:0; z-index:4;
  padding:7px 12px;
  background:var(--glow); color:var(--ink);
  font-size:var(--t-label); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
}
.testimonial__play{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; color:var(--glow);
}
.testimonial__play .proof__play-text{ color:var(--white); }
.testimonial__play:disabled{ opacity:1; }
.testimonial__play:disabled .proof__play-ring{ border-color:var(--glow); }
.testimonial__play:disabled:hover .proof__play-ring{ transform:none; background:none; }
.testimonial__play:focus-visible{ outline-offset:-6px; }
.testimonial__media.is-playing .proof__video{ opacity:1; pointer-events:auto; z-index:3; }
.testimonial__media.is-playing .testimonial__play{ visibility:hidden; }
@media (min-width:960px){
  .testimonial__grid{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); }
}

/* --- Booking ------------------------------------------------------------- */
/* After the whole page in darkness, the invitation arrives in daylight.
   WHOOP's rule: alternate full-bleed black and full-bleed white, never blend
   the two with a grey transition. This is the only light surface on the page,
   so the close is unmissable. */
.booking{
  background:var(--white); color:var(--ink);
  text-align:center;
  padding-block:clamp(72px,8vw,132px);
}
.booking .label{ text-align:center; color:var(--ink); }
.booking .heading{ color:var(--ink); max-width:16ch; margin-inline:auto; }
.booking .lead{ margin-inline:auto; max-width:40ch; color:#4A505A; }
.booking__cta{ margin-top:clamp(30px,3.4vw,52px); }
/* A hairline and air, not a box. */
.booking__slot{
  margin:clamp(44px,5vw,76px) auto 0;
  max-width:52ch;
  border:0; border-top:1px solid rgba(17,20,26,.18);
  padding:clamp(22px,2.4vw,34px) 0 0;
}
.booking__slot .label{ color:#6A707A; }
.booking__slot .body{ margin:8px auto 0; color:#4A505A; max-width:40ch; }

/* --- Footer -------------------------------------------------------------- */
.footer{ border-top:1px solid rgba(255,255,255,.14); padding-block:clamp(34px,3.6vw,54px); }
.footer__grid{ display:flex; flex-wrap:wrap; gap:clamp(16px,2.4vw,36px); align-items:center; justify-content:space-between; }
.footer__logo{ width:clamp(112px,10vw,142px); height:auto; }
.footer small{ font-size:var(--t-label); color:var(--mute); letter-spacing:.02em; }

/* A builder's name is a proper noun — it should never be split across lines.
   overflow-wrap keeps a very long name from pushing the layout wide instead. */
.nobr{
  white-space:nowrap;
  /* If a name is genuinely wider than its line, wrapping beats clipping. */
  display:inline-block; max-width:100%;
}
@supports (white-space: balance){ .nobr{ max-width:100%; } }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* --- Text entering on scroll -------------------------------------------- */
/* Only takes effect once the script has measured and wrapped the lines, so a
   failed or blocked script leaves every word on screen. */
.js-enter [data-enter] .ln{ display:block; overflow:hidden; }
.js-enter [data-enter] .ln__in{
  display:block;
  transform:translateY(105%);
  transition:transform .82s cubic-bezier(.22,.7,.26,1);
  transition-delay:calc(var(--i) * 85ms);
}
.js-enter [data-enter].is-in .ln__in{ transform:translateY(0); }

.js-enter [data-enter] .en{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.7,.26,1);
  transition-delay:calc(140ms + var(--j) * 90ms);
}
.js-enter [data-enter].is-in .en{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .js-enter [data-enter] .ln__in,
  .js-enter [data-enter] .en{ transform:none; opacity:1; transition:none; }
}

/* --- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .rise{ opacity:0; transform:translateY(16px); animation:rise .9s cubic-bezier(.19,.72,.28,1) forwards; }
  .rise--1{ animation-delay:.08s } .rise--2{ animation-delay:.2s }
  .rise--3{ animation-delay:.32s } .rise--4{ animation-delay:.44s }
  @keyframes rise{ to{ opacity:1; transform:none; } }

  /* Scoped to .js-reveal, which the script adds to <html> only once it is
     definitely running. Without JS the content is simply visible — it is never
     hidden behind a script that might not execute. */
  .js-reveal .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.19,.72,.28,1), transform .9s cubic-bezier(.19,.72,.28,1); }
  .js-reveal .reveal.is-in{ opacity:1; transform:none; }
}