/* Dominia — the corporates page (corporates.html).
 *
 * Brutalist, and built off the HR deck's title slide so the page and the deck read as one
 * campaign: Sofia Sans Extra Condensed 800 in stacked capitals at 0.84 leading, footage seen
 * through the letters, a red square for every full stop, mono readouts. The rest follows from it:
 * heavy 2px rules instead of hairlines, square corners instead of chamfers, numbers set as big as
 * the headlines, grey photography, and one red slab for the one action.
 *
 * The page's type scale lives here rather than in css/tokens.css because nothing else uses it.
 * Every size is a clamp so the stacks never re-break: they are hand-set with <br>s. */

.bx {
  --bx-face: var(--font-condensed);
  /* The hero fits the viewport's HEIGHT as well as its width: four stacked lines have to leave
     the lede and the button on the first screen. */
  --bx-hero: clamp(48px, min(15vw, 16.5vh), 168px);
  --bx-xxl: clamp(56px, 11vw, 176px);
  --bx-xl:  clamp(48px, 8.4vw, 136px);
  --bx-lg:  clamp(40px, 5vw, 80px);
  --bx-md:  clamp(30px, 3.2vw, 52px);
  --bx-sm:  clamp(26px, 2.3vw, 38px);
}

/* Declared on each section, not on the body: a custom property's var() resolves where it is
   declared, so a body-level rule stays light bone inside the paper and red sections, where
   --bone has been flipped. Here it resolves against each section's own --bone. */
.bh,
.bx-sec { --bx-rule: 2px solid var(--bone); }

/* ---------------------------------------------------------------- type */

.bx-head {
  margin: 0;
  font-family: var(--bx-face);
  font-weight: 800;
  font-size: var(--bx-md);
  line-height: 0.84;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bone);
}
.bx-head--xxl { font-size: var(--bx-xxl); }
.bx-head--xl  { font-size: var(--bx-xl); }
.bx-head--lg  { font-size: var(--bx-lg); }
.bx-head--md  { font-size: var(--bx-md); line-height: 0.9; }
.bx-head--sm  { font-size: var(--bx-sm); line-height: 0.9; }

/* The full stop: the deck's 34px square on 228px type, as a fraction of the type. */
.bx-dot {
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.06em;
  background: var(--claim);
}

.bx-num {
  font-family: var(--bx-face);
  font-weight: 800;
  font-size: var(--bx-lg);
  line-height: 0.84;
  color: var(--bone);
  transition: color var(--dur-ui) var(--ease);
}
.bx-play.is-on .bx-num,
.bx-num.is-reached { color: var(--signal); }

.bx-red { color: var(--signal); }
.bx-note,
.bx-foot { margin-top: var(--s-4); color: var(--slate); }

/* ---------------------------------------------------------------- 001 · hero */

.bh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  min-height: calc(100svh - 52px);
}

/* The team: three panels in equal thirds, 2px apart. Every layer that carries them uses this same
   box, so the dim panels, the lit panels and the labels stay in register at any size. */
.bh__team {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bh__team video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* Layer 1: the panels everywhere, dim and grey. Brighter than the deck's lone runner (0.17): the
   point is now that there are three people, and at 0.17 the one not behind a letter vanished. */
.bh__team--dim { z-index: 0; }
.bh__team--dim video { filter: grayscale(1) contrast(1.15) brightness(0.9); opacity: 0.3; }
/* The wash keeps the lede and the claim legible: darker at the foot, lighter through the middle. */
.bh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 16, 20, 0.4) 0%, rgba(14, 16, 20, 0.05) 45%, rgba(14, 16, 20, 0.8) 100%);
}

/* Layer 2: the same panels, bright, kept only where the letters are. Its gaps are black, so the
   panel edges run through the letters as cuts. */
.bh__knock {
  position: absolute;
  inset: 0;
  z-index: 2;
  isolation: isolate;
  mix-blend-mode: screen;
  pointer-events: none;
}
.bh__team--lit { background: #000; }
.bh__team--lit video { filter: grayscale(1) contrast(0.72) brightness(1.65); }

/* Layer 3: who and where, at the head of each panel. */
.bh__labels { z-index: 3; pointer-events: none; }
.bh__labels li {
  padding: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-label-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bone-2);
}
.bh__labels span { color: var(--slate); }
.bh__labels span:first-child { margin-right: var(--s-2); color: var(--signal); }
.bh__ink { position: absolute; inset: 0; background: #000; mix-blend-mode: multiply; }
.bh__ink .bh__title { color: #fff; }
/* Its full stop would be lit footage; the red square in the layer above stands in for it. */
.bh__stop { color: #000; }

/* Layer 3, and the shared grid both headline copies sit on. */
.bh__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-block: var(--s-16) var(--s-12);
}
.bh__fore { position: relative; z-index: 4; min-height: inherit; align-content: space-between; }

.bh__title {
  grid-column: 1 / span 8;
  grid-row: 1;
  font-size: var(--bx-hero);
}
.bh__ghost { color: transparent; }

.bh__claim {
  grid-column: 9 / span 4;
  grid-row: 1;
  align-self: center;
  display: grid;
  gap: var(--s-4);
}
.bh__shape { width: 100%; max-width: 340px; justify-self: end; aspect-ratio: 5 / 4; overflow: visible; }
.bh__hud { justify-self: end; text-align: right; font-family: var(--font-mono); text-transform: uppercase; }
.bh__who { font-size: var(--t-label-sm); letter-spacing: var(--track-label); color: var(--slate-2); }
.bh__who span:first-child { color: var(--bone); }
.bh__sep { color: var(--slate); }
.bh__count { margin-top: var(--s-2); font-size: var(--t-label); letter-spacing: var(--track-label); color: var(--slate-2); }
.bh__count b {
  font-weight: 400;
  font-size: var(--t-headline);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.bh__state { margin-top: var(--s-1); font-size: var(--t-label-sm); letter-spacing: var(--track-label); color: var(--signal); }
.bh__state::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--s-2); background: currentColor; vertical-align: 1px; }

.bh__foot {
  grid-column: 1 / span 12;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-8);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: var(--bx-rule);
}
.bh__lede { max-width: 24em; color: var(--bone-2); }
.bh__actions { display: grid; justify-items: start; }

/* ---------------------------------------------------------------- sections */

.bx-sec { padding-block: var(--s-24); }
.bx-sec--paper { background-color: var(--ink); }

/* The section label, brutal: number and name on a 2px rule, no scramble. */
.bx-bar {
  display: flex;
  gap: var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: var(--bx-rule);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--slate-2);
}
.bx-bar span:first-child { color: var(--bone); }
.bx-bar__end { margin-left: auto; }

.bx-sec .bx-head--xl,
.bx-sec .bx-head--xxl { margin-top: var(--s-12); }

.bx-split {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
}
.bx-split > .bx-head { grid-column: 1 / span 8; }
.bx-split__aside { grid-column: 9 / span 4; color: var(--bone-2); }

.bx-kicker { margin-top: var(--s-6); max-width: none; color: var(--bone); }

/* Columns on a heavy top rule, divided by lighter verticals. */
.bx-cols {
  display: grid;
  margin-top: var(--s-16);
  border-top: var(--bx-rule);
}
.bx-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bx-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bx-cols > li {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-6) var(--s-6) var(--s-8) 0;
}
.bx-cols > li + li { padding-left: var(--s-6); border-left: 1px solid var(--hairline-strong); }
.bx-cols .body { color: var(--slate-2); }

/* ---------------------------------------------------------------- 002 */

.bx-phone {
  margin: var(--s-6) 0 0;
  justify-self: center;
  width: min(100%, 240px);
  aspect-ratio: 484 / 944;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.bx-phone video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- 003 */

.bx-why {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--s-16);
}
.bx-why__plate {
  grid-column: 1 / span 5;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-3);
}
.bx-why__plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(1) contrast(1.15) brightness(0.92);
}
.bx-tag {
  position: absolute;
  left: 0;
  bottom: var(--s-6);
  padding: var(--s-2) var(--s-4);
  background: var(--claim-600);
  color: var(--on-claim);
  font-family: var(--font-mono);
  font-size: var(--t-label-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.bx-tag span { opacity: 0.7; }

.bx-rows { grid-column: 7 / span 6; align-self: end; border-top: var(--bx-rule); }
.bx-rows li {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  column-gap: var(--s-4);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--hairline-strong);
}
.bx-rows .bx-num { grid-row: 1 / span 2; font-size: var(--bx-sm); color: var(--slate); }
.bx-rows .body { margin-top: var(--s-2); max-width: none; color: var(--slate-2); }

/* ---------------------------------------------------------------- 004 */

.bx-season {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.bx-season__copy { grid-column: 1 / span 6; }
.bx-season__copy .body { margin-top: var(--s-8); max-width: 20em; color: var(--bone-2); }
.bx-season__map { grid-column: 7 / span 6; align-self: end; margin: var(--s-12) 0 0; }
/* The render carries ~80px of empty ground above and below the city; a square crop trims it so
   the map, not the margin, sits against the copy. */
.bx-season__map video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 48%; background: #0E1014; }
.bx-season__hud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-6);
  padding-top: var(--s-3);
  border-top: var(--bx-rule);
  font-family: var(--font-mono);
  font-size: var(--t-label-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--slate);
}
.bx-season__label { flex-basis: 100%; }
.bx-season__day { margin-left: auto; color: var(--slate-2); }
.bx-season__day b {
  font-weight: 400;
  font-size: var(--t-headline);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}
.bx-season__state { color: var(--signal); }

.bx-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: var(--s-16);
  border: var(--bx-rule);
}
.bx-week li {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  font-family: var(--bx-face);
  font-weight: 800;
  font-size: var(--bx-sm);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--bone);
}
.bx-week li + li { border-left: var(--bx-rule); }
.bx-week span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-label-sm);
  letter-spacing: var(--track-label);
  color: var(--slate);
}
.bx-week .is-battle { background: var(--claim-600); color: var(--on-claim); }
.bx-week .is-battle span { color: var(--on-claim); opacity: 0.75; }
.bx-week__line { margin-top: var(--s-3); color: var(--slate); }

.bx-titles__head { margin-top: var(--s-24); }
.bx-titles { margin-top: var(--s-8); }

/* ---------------------------------------------------------------- 005 */

.bx-rail { height: 2px; margin-top: var(--s-16); background: var(--hairline-strong); }
.bx-rail span { display: block; height: 100%; width: 0; background: var(--signal); }
.bx-rail + .bx-cols { margin-top: 0; border-top: 0; }

.bx-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s-16);
  border-top: var(--bx-rule);
}
.bx-stats > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* the figures share a baseline even when a label wraps */
  padding: var(--s-6) var(--s-6) 0 0;
}
.bx-stats > div + div { padding-left: var(--s-6); border-left: 1px solid var(--hairline-strong); }
.bx-stats dd { margin: var(--s-3) 0 0; font-size: var(--bx-xxl); line-height: 0.8; }

.bx-trust { margin-top: var(--s-16); padding: var(--s-6); border: var(--bx-rule); }
.bx-trust ul { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-12); margin-top: var(--s-4); }
.bx-trust li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-body); color: var(--bone); }
.bx-trust li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--alliance-lit); }

/* ---------------------------------------------------------------- 006 · the red slab */

.bx-enlist {
  background: var(--claim-600);
  --bone: #F2EEE6;
  --bone-2: #F2EEE6;
  --slate: rgba(242, 238, 230, 0.72);
  --slate-2: rgba(242, 238, 230, 0.86);
  color: var(--bone);
}
.bx-enlist .bx-dot { background: var(--bone); }
.bx-enlist__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-8);
  margin-top: var(--s-12);
}
.bx-enlist__foot .body { max-width: 20em; }
/* The site's bone chip; its offset shadow moves from red (invisible on red) to ink. */
.bx-enlist .chip { filter: drop-shadow(4px 4px 0 var(--ink)); }
.bx-enlist .chip:hover { filter: drop-shadow(1px 1px 0 var(--ink)); }
.bx-enlist + .footer { border-top: 0; }

.btn[aria-disabled="true"] { cursor: default; }

/* "Enter your company" needs ~330px at 21.6px against the ~295 a 375px phone gives the button. */
@media (max-width: 420px) {
  .bx .btn__action { font-size: var(--t-body); }
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .bh__grid { padding-block: var(--s-12) var(--s-8); }
  /* On a phone the panels stack into three bands; the labels would land on the lede, so they go. */
  .bh__team { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .bh__labels { display: none; }
  .bh__title { grid-column: 1 / span 12; }
  .bh__claim { grid-column: 1 / span 12; grid-row: 3; margin-top: var(--s-12); }
  .bh__shape { max-height: 40vh; }
  .bh__foot { margin-top: var(--s-8); }

  .bx-sec { padding-block: var(--s-16); }
  .bx-split > .bx-head,
  .bx-split__aside { grid-column: 1 / span 12; }
  .bx-split__aside { margin-top: var(--s-6); }

  .bx-cols--3,
  .bx-cols--4 { grid-template-columns: minmax(0, 1fr); }
  .bx-cols > li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline-strong); }

  .bx-why__plate,
  .bx-rows,
  .bx-season__copy,
  .bx-season__map { grid-column: 1 / span 12; }
  .bx-rows { margin-top: var(--s-12); }

  /* Seven equal cells leave ~49px each on a phone, and BATTLE does not fit one. The weekend
     cells take the extra width instead: they are the event, so they are allowed to be bigger. */
  .bx-week { grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, 1.4fr)); }
  .bx-week li { padding: var(--s-3) var(--s-1) var(--s-3) var(--s-2); font-size: clamp(16px, 4.4vw, 26px); }
  .bx-week span { letter-spacing: 0.02em; }

  .bx-stats dd { font-size: var(--bx-xl); }
  .bx-stats > div { padding-right: var(--s-3); }
  .bx-stats > div + div { padding-left: var(--s-3); }
  .bx-bar__end { display: none; }
}