/* BES Construction
   Colour: four flat fields (white, sky, navy, vermilion), after the Astrix Builders reference.
   Type: Archivo, one family, width and weight doing the contrast.
   Device: the node (a round dot) and the dimension rail (a thin line with a node at each end). */

:root {
  --white: oklch(1 0 0);
  --navy: oklch(0.262 0.045 258);          /* ink and dark field. 15.5:1 on white */
  --navy-lift: oklch(0.33 0.05 258);
  --muted: oklch(0.46 0.04 255);           /* secondary text. 7.1:1 on white, 5.8:1 on sky-soft */
  --sky: oklch(0.825 0.05 236);            /* calm field. navy on it 9.1:1 */
  --sky-soft: oklch(0.93 0.022 236);
  --verm: oklch(0.645 0.185 37.5);         /* the signal: nodes, graphics, large type only */
  --verm-field: oklch(0.58 0.185 37.5);    /* fields and buttons that carry white text. 4.66:1 */
  --verm-ink: oklch(0.5 0.16 36);          /* vermilion text on white. 6.5:1 */
  --on-navy-muted: oklch(0.8 0.04 236);    /* secondary text on navy. 8.3:1 */
  --line: oklch(0.262 0.045 258 / 0.16);
  --line-on-navy: oklch(1 0 0 / 0.18);
  --beem: oklch(0.552 0.247 266);          /* Beem Signal Blue, only inside the Beem tool */
  --beem-soft: oklch(0.944 0.026 272);
  --beem-lift: oklch(0.643 0.19 268);

  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --display-stretch: 114%;

  --gutter: max(clamp(20px, 4.2vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right));
  --wrap: 1240px;
  --section: clamp(72px, 9vw, 136px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-toggle: 40;
  --z-nav: 50;
  --z-cursor: 60;
  --z-loader: 70;
}

/* Archivo, Latin, both axes: the file Google's stylesheet points to, declared here so it does not wait on a second stylesheet. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2") format("woff2");
}

/* Stand-in for the display face while Archivo loads, sized so headlines keep their line breaks. */
@font-face {
  font-family: "Archivo Display Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold");
  size-adjust: 117%;
}
/* Android has no Arial or Helvetica Neue. Roboto Bold needs 124% to match Archivo 800 at 114% width. */
@font-face {
  font-family: "Archivo Display Fallback Android";
  src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto");
  font-weight: 100 900;
  size-adjust: 124%;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html:has(dialog[open]) { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, .quote p, .seq__quote p, .menu nav a {
  font-family: "Archivo", "Archivo Display Fallback", "Archivo Display Fallback Android", "Helvetica Neue", Arial, system-ui, sans-serif;
}
h1, h2, h3 {
  font-stretch: var(--display-stretch);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(2.375rem, 3.1vw + 1.2rem, 4rem); }
h2 { font-size: clamp(1.875rem, 2.1vw + 1.1rem, 2.875rem); }
h3 { font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2.125rem); line-height: 1.1; }
p { text-wrap: pretty; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.lede { font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem); line-height: 1.45; max-width: 34em; }

:focus-visible { outline: 3px solid var(--focus, var(--verm)); outline-offset: 3px; }
.on-navy, .on-verm { --focus: var(--white); }
.demo, .form, .sheetdlg { --focus: var(--verm); }
.about { --focus: var(--navy); }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: calc(var(--z-nav) + 1);
  background: var(--navy); color: var(--white); padding: 12px 16px; font-weight: 600;
}
.skip:focus { top: 12px; }

.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex; align-items: stretch;
  min-height: 52px;
  background: var(--verm-field); color: var(--white);
  font-weight: 650; font-size: 1.0625rem; line-height: 1;
  text-decoration: none; border: 0; padding: 0; cursor: pointer;
}
.btn > span { display: grid; place-items: center; padding: 0 20px; white-space: nowrap; }
.btn > .tile { background: oklch(0 0 0 / 0.16); padding: 0; width: 52px; }
.btn .arrow, .more .arrow { transition: translate 0.35s var(--ease-out); }
.btn:focus-visible .arrow, .more:focus-visible .arrow { translate: 3px -3px; }
.btn--navy { background: var(--navy); }
.btn--white { background: var(--white); color: var(--navy); }
.btn--white > .tile { background: var(--navy); color: var(--white); }

.arrow { width: 18px; height: 18px; }

.more {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 650; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
  min-height: 44px;
}
.more .tile {
  display: grid; place-items: center; width: 36px; height: 36px;
  background: var(--navy); color: var(--white);
}
.more > span:first-child { border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.on-navy .more .tile { background: var(--white); color: var(--navy); }

/* Hover belongs to pointers that can hover. On touch it sticks after the tap. */
@media (hover: hover) {
  .btn:hover .arrow, .more:hover .arrow { translate: 3px -3px; }
  button.ph:hover img { scale: 1.035; }
  .nav__links a:hover { border-bottom-color: var(--verm); }
  .nav__tel:hover, .list__job:hover { color: var(--verm-ink); }
  .contact__tel:hover { border-bottom-color: var(--navy); }
  .foot a:hover { color: var(--sky); }
}

/* ---------- Dimension rail caption ---------- */

.dim {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px;
  font-size: 0.8125rem; font-weight: 550; line-height: 1.25;
}
.dim > span { flex: 0 1 auto; text-align: center; text-wrap: balance; }
.dim::before, .dim::after {
  content: ""; flex: 1 1 20px; min-width: 20px; height: 9px;
}
.dim::before {
  background:
    radial-gradient(circle at 4.5px 50%, var(--rail, var(--verm)) 0 4px, transparent 4.6px),
    linear-gradient(var(--rail, var(--verm)), var(--rail, var(--verm))) center / 100% 1.5px no-repeat;
}
.dim::after {
  background:
    radial-gradient(circle at calc(100% - 4.5px) 50%, var(--rail, var(--verm)) 0 4px, transparent 4.6px),
    linear-gradient(var(--rail, var(--verm)), var(--rail, var(--verm))) center / 100% 1.5px no-repeat;
}

/* ---------- Photographs ---------- */

.ph {
  position: relative; display: block; overflow: hidden;
  background: var(--sky-soft);
  aspect-ratio: 4 / 3;
  padding: 0; border: 0; width: 100%; cursor: pointer;
}
.ph--tall { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 16 / 10; }
.ph img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) contrast(1.03);
  transition: scale 0.9s var(--ease-out);
}
button.ph:focus-visible img { scale: 1.035; }
.ph picture, .seq__grid picture { display: contents; }
.ph__tag {
  position: absolute; left: 0; top: 0;
  background: var(--white); color: var(--navy);
  font-size: 0.75rem; font-weight: 700; padding: 6px 10px; line-height: 1.2;
}
.ph__count {
  position: absolute; right: 0; bottom: 0;
  background: var(--navy); color: var(--white);
  font-size: 0.8125rem; font-weight: 600; padding: 8px 12px;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: inline-grid; gap: 5px; text-decoration: none; margin-right: auto; }
.nav .brand { min-height: 44px; align-content: center; }
.brand__row { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.brand b { font-stretch: 125%; font-weight: 900; font-size: 1.625rem; line-height: 0.8; letter-spacing: 0.01em; }
.brand__row span { font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.005em; }
/* The dimension rail: one vermilion line with a node at each end. */
.brand__rail {
  display: block; height: 7px;
  background:
    radial-gradient(circle at 3.5px 50%, var(--rail, var(--verm)) 0 3.1px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 3.5px) 50%, var(--rail, var(--verm)) 0 3.1px, transparent 3.6px),
    linear-gradient(var(--rail, var(--verm)), var(--rail, var(--verm))) center / calc(100% - 6px) 1.5px no-repeat;
}
.nav__links { display: none; gap: 28px; }
.nav__links a { text-decoration: none; font-weight: 550; padding: 12px 0; border-bottom: 2px solid transparent; }
.nav__tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav .btn { min-height: 44px; font-size: 1rem; }
.nav .btn > .tile { width: 44px; }
.nav .btn { display: none; }
.nav__menu {
  flex: none;
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: var(--navy); color: var(--white); border: 0; cursor: pointer;
}
.nav__menu svg { width: 20px; height: 20px; }

@media (max-width: 379px) {
  .brand__row span { display: none; }
  .nav__in { gap: 10px; }
}
@media (max-width: 460px) {
  .beem__mark { flex-wrap: wrap; }
  .beem__mark span { flex-basis: 100%; }
  .nav__in { gap: 12px; }
  .brand b { font-size: 1.375rem; }
  .brand__row { gap: 6px; }
  .brand__row span { font-size: 0.9375rem; }
  .nav__tel { font-size: 0.9375rem; }
}
@media (min-width: 620px) {
  .nav .btn { display: inline-flex; }
}
@media (min-width: 980px) {
  .nav__links { display: flex; }
  .nav__menu { display: none; }
  .brand { margin-right: 20px; }
  .nav__links { margin-right: auto; }
}
/* Tablet portrait: the four links fit beside the number once the header button drops its arrow tile. */
@media (min-width: 800px) and (max-width: 979px) {
  .nav__in { gap: 16px; }
  .brand { margin-right: 12px; }
  .nav__links { display: flex; gap: 18px; margin-right: auto; font-size: 1rem; }
  .nav__menu { display: none; }
}
@media (min-width: 800px) and (max-width: 899px) { .nav .btn > .tile { display: none; } }
/* A phone on its side: the header keeps its controls and gives the height back. */
@media (min-width: 560px) and (max-height: 520px) {
  html { scroll-padding-top: 64px; }
  .nav__in { min-height: 52px; }
}

.menu {
  border: 0; padding: 0; margin: 0;
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  background: var(--navy); color: var(--white);
}
.menu::backdrop { background: var(--navy); }
.menu__in { display: flex; flex-direction: column; height: 100%; padding: 16px var(--gutter) max(32px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.menu__top { display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
.menu__top .brand { color: var(--white); margin-right: 0; }
.menu__close { width: 44px; height: 44px; background: var(--white); color: var(--navy); border: 0; cursor: pointer; display: grid; place-items: center; }
.menu__close svg { width: 18px; height: 18px; }
.menu nav { display: grid; gap: 4px; margin-top: 8vh; }
.menu nav a {
  font-stretch: var(--display-stretch); font-weight: 800; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.15;
  text-decoration: none; padding: 6px 0;
}
.menu__tel { display: flex; align-items: center; align-self: flex-start; min-height: 48px; margin-top: auto; font-size: 1.5rem; font-weight: 700; text-decoration: none; }
.menu__mail { display: flex; align-items: center; min-height: 44px; font-size: 1.0625rem; font-weight: 600; text-decoration: none; color: var(--on-navy-muted); }
/* Phones: the links sit low, where the thumb is. */
@media (max-width: 619px) {
  .menu nav { margin-top: auto; }
  .menu__tel { margin-top: 20px; }
}
/* A phone on its side: two columns of links, so Talk to us and the number stay on screen. */
@media (max-height: 520px) {
  .menu__in { padding-block: 8px 16px; }
  .menu nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 8px; }
  .menu nav a { font-size: clamp(1.5rem, 9vh, 2.25rem); }
  .menu__tel { margin-top: auto; }
  .menu__mail { min-height: 44px; }
  .menu__tel { min-height: 44px; }
  .menu nav a { padding: 4px 0; }
}

/* ---------- Hero ---------- */

.hero { padding-block: clamp(36px, 5vw, 76px) clamp(56px, 7vw, 104px); overflow: clip; }
.hero__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.hero h1 { max-width: 12em; }
.hero .lede { margin-top: clamp(18px, 2vw, 28px); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(24px, 3vw, 40px); }

.hero__media { position: relative; padding: 0 0 13% 9%; }
.hero__media::before {
  content: ""; position: absolute; z-index: 0;
  inset: -8% calc(-1 * var(--gutter)) 24% 36%;
  background: var(--sky);
}
.hero__main, .hero__inset { position: relative; z-index: 1; }
.hero__inset {
  position: absolute; left: 0; bottom: 0; width: 36%;
  background: var(--white); padding: 10px 10px 2px;
  box-shadow: 0 18px 40px -22px oklch(0.262 0.045 258 / 0.45);
}
.hero__inset .dim { margin: 8px 0; font-size: 0.75rem; gap: 8px; white-space: nowrap; }
.hero__inset .dim::before, .hero__inset .dim::after { min-width: 10px; flex-basis: 10px; }
@media (max-width: 620px), (min-width: 960px) and (max-width: 1199px) { .dim .wide { display: none; } }
.hero__main .dim { margin-left: 33%; white-space: nowrap; }

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); }
}
/* Tablet portrait: a wider, shallower photo pair, so the first screen ends on the fact strip and not mid-photograph. */
@media (min-width: 700px) and (max-width: 959px) and (min-height: 521px) {
  .hero__media { padding-bottom: 7%; }
  .hero__main .ph { aspect-ratio: 16 / 10; }
  .hero__main .ph img { object-position: 50% 0; }
  .hero__inset { width: 30%; }
}
/* Under 384px the caption is wider than the space beside the inset: shorter rails, and it may take two lines. */
@media (max-width: 399px) {
  .hero__main .dim { gap: 8px; white-space: normal; }
  .hero__main .dim::before, .hero__main .dim::after { min-width: 10px; flex-basis: 10px; }
}

/* The sky field grows in with the intro. */
.motion .hero__media::before { scale: 0.55 1; opacity: 0; transform-origin: 100% 0; transition: scale 1.2s var(--ease-out), opacity 0.6s linear; }
.motion .hero__media.is-in::before, .motion-failed .hero__media::before { scale: 1 1; opacity: 1; }

/* ---------- Facts band ---------- */

.facts { background: var(--navy); color: var(--white); padding-block: clamp(28px, 3.4vw, 44px); }
.facts dl { display: grid; gap: 22px 40px; }
@media (min-width: 520px) { .facts dl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .facts dl { grid-template-columns: repeat(4, 1fr); } }
.facts dl > div { display: grid; gap: 6px; align-content: start; }
.facts dt { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 600; color: var(--on-navy-muted); }
.facts dt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--verm); flex: none; }
.facts dd { font-weight: 650; font-size: 1.125rem; line-height: 1.3; text-wrap: balance; }

/* ---------- Work ---------- */

.work { padding-block: var(--section); }
.head { display: grid; gap: 16px 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 72px); }
@media (min-width: 860px) { .head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.head p { max-width: 30em; }

.spread { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
.spread + .spread { margin-top: clamp(64px, 8vw, 120px); }
.spread__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.spread__body > p { max-width: 34em; }
.spread__tag { font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem); font-weight: 500; margin-top: 10px; line-height: 1.35; }
@media (min-width: 900px), (min-width: 640px) and (max-height: 520px) {
  .spread { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .spread--flip .spread__media { order: 2; }
  .spread--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
/* Sticky only where the screen is tall enough to hold the body. */
@media (min-width: 900px) and (min-height: 521px) {
  .spread__body { position: sticky; top: 104px; }
}

/* Phones: each lead job shows its name before its photos. */
@media (max-width: 639px), (max-width: 899px) and (min-height: 521px) {
  .spread { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .spread__body { display: contents; }
  .spread__body > h3 { order: -2; }
  .spread__body > .spread__tag { order: -1; margin-bottom: 20px; }
  .spread__body > .more { align-self: flex-start; }
}

/* Tablet portrait: the three photographs in one row, then the fact sheet beside the story. */
@media (min-width: 700px) and (max-width: 899px) and (min-height: 521px) {
  .spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 40px); align-items: start; }
  .spread__media, .spread__body > h3, .spread__body > .spread__tag { grid-column: 1 / -1; }
  .spread__media { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 12px; }
  .spread__media figure { display: contents; }
  .spread__media figure .ph { grid-area: 1 / 1; }
  .spread__media figcaption { grid-area: 2 / 1 / auto / -1; }
  .spread__thumbs { grid-area: 1 / 2; grid-template-columns: 1fr; grid-auto-rows: 1fr; margin-top: 0; }
  .spread__thumbs .ph { aspect-ratio: auto; height: 100%; }
  .spread--flip .spread__media { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .spread--flip .spread__media figure .ph { grid-area: 1 / 2; }
  .spread--flip .spread__thumbs { grid-area: 1 / 1; }
  .spread__body > .sheet { grid-column: 1; grid-row: span 4; }
  .spread__body > .story, .spread__body > .more { grid-column: 2; }
  .spread__body > .more { justify-self: start; }
}

.sheet { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; margin-top: 22px; border-top: 1px solid var(--navy); }
.sheet dt, .sheet dd { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.4; }
.sheet dt { font-weight: 700; white-space: nowrap; }
.sheet dd { margin: 0; }
/* Small phones: a long label ("General contractor") wraps rather than take the width the values need. */
@media (max-width: 392px) {
  .sheet { grid-template-columns: fit-content(6em) 1fr; gap: 0 16px; }
  .sheet dt { white-space: normal; }
}

.story { margin-top: 22px; }
.story h3, .story h4 { margin: 0 0 4px; font-size: 0.9375rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0; line-height: 1.35; }
.story p { font-size: 1rem; }
.story + .story { margin-top: 16px; }
.spread__body .more { margin-top: 22px; }

/* Draft slots: visible while reviewing, hidden for the public. */
.slot { display: none; }
[data-notes="on"] .slot { display: block; }
.slot__box {
  border: 1.5px dashed var(--muted);
  padding: 12px 14px;
  font-size: 0.9375rem; line-height: 1.4; color: var(--muted);
}
.on-verm .slot__box { border-color: var(--white); color: var(--white); font-weight: 600; }
.on-navy .slot__box { border-color: var(--on-navy-muted); color: var(--on-navy-muted); }

.jobs { display: grid; gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px); margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--navy); }
@media (min-width: 700px) { .jobs { grid-template-columns: 1fr 1fr; } }
.jobs__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px; }
.jobs__head p { max-width: 34em; color: var(--muted); }
.job__mosaic { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.job__mosaic .ph:first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }
.job__mosaic .ph { aspect-ratio: 1 / 1; }
.job__row h4 { font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2.125rem); line-height: 1.1; }
.job__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.job__seen { margin-top: 10px; max-width: 34em; }
.job__seen b { font-weight: 700; }
.job__todo { display: none; color: var(--muted); white-space: nowrap; }
[data-notes="on"] .job__todo { display: inline; }
.job .slot { margin-top: 14px; }
/* Phones: the two thumbnails are about 100px square, so their labels sit tighter. */
@media (max-width: 479px) {
  .job__mosaic .ph:not(:first-child) .ph__tag { padding: 4px 7px; }
  .job__mosaic .ph__count { padding: 5px 8px; line-height: 1.3; }
}

/* ---------- Project dialog ---------- */

.sheetdlg {
  border: 0; padding: 0; margin: auto;
  width: min(1180px, 100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: none;
  height: min(92dvh, 980px); max-height: none;
  background: var(--white); color: var(--navy);
  overflow: hidden;
}
.sheetdlg::backdrop { background: oklch(0.262 0.045 258 / 0.82); }
.sheetdlg__in { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.sheetdlg__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 3vw, 32px); border-bottom: 1px solid var(--line);
}
.sheetdlg__top h2 { font-size: clamp(1.375rem, 1.4vw + 1rem, 2rem); }
.sheetdlg__close { flex: none; width: 44px; height: 44px; background: var(--navy); color: var(--white); border: 0; cursor: pointer; display: grid; place-items: center; }
.sheetdlg__close svg { width: 18px; height: 18px; }
.sheetdlg__body { overflow: auto; overscroll-behavior: contain; display: grid; gap: 28px; padding: clamp(16px, 3vw, 32px); align-content: start; }
.sheetdlg__text .sheet { margin-top: 0; }
.sheetdlg__photos { columns: 1; column-gap: 12px; }
@media (min-width: 620px) { .sheetdlg__photos { columns: 2; } }
.sheetdlg__photos figure { break-inside: avoid; margin-bottom: 12px; background: var(--sky-soft); }
.sheetdlg__photos img { width: 100%; filter: saturate(0.9) contrast(1.03); }
.sheetdlg__photos figcaption { font-size: 0.8125rem; padding: 8px 10px; background: var(--white); color: var(--muted); }
@media (min-width: 900px) {
  .sheetdlg__body { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .sheetdlg__text { position: sticky; top: 0; align-self: start; }
}

/* Phones: the sheet is the screen. Photos run edge to edge and the way out sits under the thumb. */
.sheetdlg__done { display: none; }
@media (max-width: 619px) {
  .sheetdlg { width: 100%; height: 100vh; height: 100dvh; }
  .sheetdlg__in { grid-template-rows: auto 1fr auto; }
  .sheetdlg__top { padding-block: 8px; }
  .sheetdlg__body { padding: 16px 0 0; gap: 20px; }
  .sheetdlg__text { padding-inline: 16px; }
  .sheetdlg__photos figure { margin-bottom: 4px; }
  .sheetdlg__done { display: block; width: 100%; min-height: calc(52px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); border: 0; background: var(--navy); color: var(--white); font-weight: 650; cursor: pointer; --focus: var(--white); }
  .sheetdlg__done:focus-visible { outline-offset: -6px; }
}
/* A phone on its side: the sheet takes the whole screen, write-up first, then the photos two across. */
@media (max-height: 520px) and (max-width: 959px) {
  .sheetdlg { width: 100%; height: 100vh; height: 100dvh; }
  .sheetdlg__top { padding-block: 6px; }
  .sheetdlg__top, .sheetdlg__body { padding-inline: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left), env(safe-area-inset-right)); }
  .sheetdlg__body { grid-template-columns: minmax(0, 1fr); padding-block: 12px; }
  .sheetdlg__text { position: static; }
}

/* ---------- Beem ---------- */

.beem { background: var(--navy); color: var(--white); padding-block: var(--section); }
.beem .head p { color: var(--white); }
.beem__mark { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-weight: 600; font-size: 0.9375rem; color: var(--on-navy-muted); }
.beem__mark svg { width: 26px; height: 26px; }
.beem__mark b { font-family: "Space Grotesk", var(--font); font-weight: 700; letter-spacing: -0.03em; font-size: 1.375rem; color: var(--white); }

.demo { background: var(--white); color: var(--navy); }
.demo__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(14px, 2vw, 24px); border-bottom: 1px solid var(--line);
  font-size: 0.875rem; font-weight: 600;
}
.demo__bar span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.demo__bar svg { width: 18px; height: 18px; }
.demo__bar em { font-style: normal; font-weight: 500; color: var(--muted); }

.demo__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 22px clamp(14px, 2vw, 24px) 0; }
.demo__steps::before {
  content: ""; position: absolute; left: calc(clamp(14px, 2vw, 24px) + 9px); right: calc(clamp(14px, 2vw, 24px) + 25% - 9px); top: 30px; height: 2px; background: var(--line);
}
.demo__steps::after {
  content: ""; position: absolute; left: calc(clamp(14px, 2vw, 24px) + 9px); top: 30px; height: 2px; background: var(--beem);
  width: calc((100% - 2 * clamp(14px, 2vw, 24px)) * var(--progress, 0.75));
  transition: width 0.7s var(--ease-out);
}
.demo[data-step="1"] { --progress: 0; }
.demo[data-step="2"] { --progress: 0.25; }
.demo[data-step="3"] { --progress: 0.5; }
.demo[data-step="4"] { --progress: 0.75; }
.demo__step {
  position: relative; z-index: 1;
  display: grid; justify-items: start; gap: 10px; text-align: left;
  background: none; border: 0; padding: 0 12px 14px 0; cursor: pointer; min-height: 44px;
  font-weight: 700; font-size: clamp(0.9375rem, 0.6vw + 0.8rem, 1.125rem);
  color: var(--muted);
}
.demo__step::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--line);
  transition: background 0.3s, border-color 0.3s, scale 0.4s var(--ease-out);
}
.demo__step.is-done::before { background: var(--beem); border-color: var(--beem); }
.demo__step[aria-selected="true"] { color: var(--navy); }
.demo__step[aria-selected="true"]::before { background: var(--beem); border-color: var(--beem); scale: 1.25; }
.demo__step:last-child.is-done::before, .demo__step:last-child[aria-selected="true"]::before { background: var(--navy); border-color: var(--navy); }

.demo__caption { padding: 4px clamp(14px, 2vw, 24px) 18px; min-height: 6.2em; max-width: 50em; font-size: 1.0625rem; }
.who { display: inline-block; margin-right: 10px; padding: 3px 9px; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; vertical-align: 0.08em; }
.who--software { background: var(--beem); color: var(--white); }
.who--expert { box-shadow: inset 0 0 0 1.5px var(--beem); color: oklch(0.42 0.21 266); }
.who--people { background: var(--navy); color: var(--white); }
@media (min-width: 700px) { .demo__caption { min-height: calc(2 * 1.55em + 22px); } }
/* Phones: hold the tallest caption (the box is border-box, so the 22px of padding counts) and the cards stay put as the steps change. */
@media (max-width: 479px) { .demo__caption { min-height: calc(4 * 1.55em + 22px); } }
@media (max-width: 374px) { .demo__caption { min-height: calc(5 * 1.55em + 22px); } }

.demo table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.35; }
.demo thead th {
  text-align: left; font-weight: 700; font-size: 0.8125rem; color: var(--muted);
  padding: 10px clamp(14px, 2vw, 24px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--sky-soft);
}
.demo tbody td, .demo tbody th { padding: 13px clamp(14px, 2vw, 24px); border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.demo tbody th { font-weight: 700; white-space: nowrap; }
.demo tbody th small { display: block; font-weight: 500; font-size: 0.875rem; color: var(--muted); white-space: normal; }
.demo td span { display: block; }
.demo td .pg { color: var(--muted); font-size: 0.875rem; }
.demo td .chip, .chip { display: inline-block; width: fit-content; font-weight: 700; font-size: 0.8125rem; padding: 4px 9px; line-height: 1.2; }
.chip--ok { background: var(--beem-soft); color: oklch(0.42 0.21 266); }
.chip--flag { background: oklch(0.95 0.035 45); color: var(--verm-ink); }
.demo .note { margin-top: 6px; font-size: 0.875rem; color: var(--navy); max-width: 22em; }

.demo [data-from] { transition: opacity 0.45s var(--ease-out), translate 0.45s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.demo[data-step="1"] :is([data-from="2"], [data-from="3"], [data-from="4"]),
.demo[data-step="2"] :is([data-from="3"], [data-from="4"]),
.demo[data-step="3"] [data-from="4"] { opacity: 0; translate: 0 6px; visibility: hidden; transition-delay: 0s; }

/* Tablet landscape and up: keep each cell's two lines whole and let the Check column take the squeeze. */
@media (min-width: 960px) {
  .demo tbody th small, .demo tbody td:not([data-label="Check"]) span { white-space: nowrap; }
}

/* On phones each cell carries its own label, so an empty cell hides whole. */
.demo td { transition: opacity 0.45s var(--ease-out); }
.demo[data-step="1"] td:is([data-label="Product data"], [data-label="Check"]),
.demo[data-step="2"] td[data-label="Check"] { opacity: 0; }

.demo__out {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  background: var(--navy-lift); color: var(--white);
  padding: 14px clamp(14px, 2vw, 24px); font-weight: 600;
}
.demo__out small { font-weight: 500; font-size: 0.8125rem; color: var(--on-navy-muted); }

@media (max-width: 699px) {
  .demo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .demo tbody tr { display: grid; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .demo tbody tr { grid-template-columns: 1fr 1fr; }
  .demo tbody th, .demo tbody td:last-child { grid-column: 1 / -1; }
  .demo tbody tr:nth-child(n + 3) { display: none; }
  .demo__bar { flex-wrap: wrap; gap: 2px 12px; }
  .demo tbody th, .demo tbody td { border: 0; padding: 4px 14px; }
  .demo tbody td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
  .demo__steps { grid-template-columns: repeat(4, 1fr); }
  .demo__step { font-size: 0.875rem; padding-right: 6px; }
}

.beem__why { display: grid; gap: clamp(32px, 4vw, 64px); margin-top: clamp(48px, 6vw, 88px); }
@media (min-width: 900px) { .beem__why { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.quote p { font-stretch: var(--display-stretch); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(1.75rem, 2.2vw + 1rem, 2.875rem); text-wrap: balance; }
.quote footer { margin-top: 18px; color: var(--on-navy-muted); font-size: 1rem; }
.quote footer b { color: var(--white); font-weight: 650; }
.why { display: grid; gap: 26px; }
.why > div { border-top: 1px solid var(--line-on-navy); padding-top: 16px; }
.why h3 { font-size: 1.375rem; margin-bottom: 6px; }
.why p { color: var(--white); max-width: 30em; }
.chain { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; position: relative; font-size: 0.875rem; font-weight: 650; line-height: 1.25; }
.chain::before { content: ""; position: absolute; left: 5px; right: calc(33.33% - 5px); top: 4.5px; height: 2px; background: var(--verm); }
.chain li { position: relative; padding: 20px 10px 0 0; }
.chain li::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--verm); box-shadow: 0 0 0 4px var(--navy); }
.beem .slot { margin-top: 18px; max-width: 34em; }
.beem__foot { margin-top: clamp(28px, 4vw, 48px); color: var(--on-navy-muted); font-size: 0.9375rem; }
.beem__foot a { color: var(--white); font-weight: 600; }

/* ---------- Services ---------- */

.services { padding-block: var(--section); }
.services__grid { display: grid; gap: clamp(32px, 5vw, 80px); }
@media (min-width: 900px) { .services__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.services__grid > div > p { margin-top: 18px; max-width: 30em; }
.trades { margin-top: 28px; }
.trades h3 { font-size: 1.0625rem; font-stretch: 100%; letter-spacing: 0; font-weight: 700; margin-bottom: 10px; }
.trades p { color: var(--muted); max-width: 30em; }
.trades .slot { margin-top: 14px; max-width: 30em; }
.lists { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 620px) { .lists { grid-template-columns: 1fr 1fr; } }
.group__job { font-weight: 600; margin-bottom: 12px; }
.list { border-top: 1.5px solid var(--navy); }
.list li { padding: 13px 0; border-bottom: 1px solid var(--line); font-stretch: var(--display-stretch); font-weight: 750; font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.25; }
.list__job {
  background: none; border: 0; padding: 0; cursor: pointer; min-height: 44px;
  color: var(--navy); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* ---------- About ---------- */

.about { background: var(--sky); padding-block: var(--section); }
.about__grid { display: grid; gap: clamp(28px, 5vw, 80px); align-items: center; }
/* Tablet portrait: the portrait sits beside the words from 740px, in a column wide enough for its caption. */
@media (min-width: 740px) and (max-width: 899px) {
  .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .about .dim { gap: 8px; }
}
/* A phone on its side is wide and very short: set text beside its photo so a lead photo fits the screen. */
@media (min-width: 640px) and (max-width: 959px) and (max-height: 520px) {
  .hero { padding-block: 20px 40px; }
  .hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 28px; align-items: start; }
  .hero h1 { font-size: 2rem; }
  .hero .lede { font-size: 1rem; margin-top: 12px; }
  .hero__cta { margin-top: 16px; }
  .dim .wide { display: none; }
  .jobs { grid-template-columns: 1fr 1fr; }
  .about__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
.about figure { max-width: 420px; }
.about .ph { cursor: default; background: var(--sky-soft); }
.about blockquote { margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem); line-height: 1.35; font-weight: 500; max-width: 26em; }
.about blockquote footer { margin-top: 12px; font-size: 1rem; font-weight: 500; color: var(--navy); }
.about .slot__box { color: var(--navy); border-color: var(--navy); }
.about__body { margin-top: 20px; max-width: 34em; }
.about .slot { margin-top: 20px; max-width: 34em; }

/* ---------- Contact ---------- */

.contact { background: var(--verm-field); color: var(--white); padding-block: var(--section); }
.contact__grid { display: grid; gap: clamp(36px, 5vw, 80px); align-items: start; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.contact h2 { font-size: clamp(2.75rem, 5vw + 1rem, 5.25rem); }
.contact__lede { margin-top: 18px; font-size: 1.25rem; font-weight: 600; line-height: 1.4; max-width: 24em; }
.contact__tel {
  display: inline-block; margin-top: clamp(24px, 3vw, 40px);
  font-stretch: var(--display-stretch); font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(2rem, 3.4vw + 1rem, 3.5rem); font-variant-numeric: tabular-nums;
  text-decoration: none; border-bottom: 4px solid var(--white); padding: 2px 0 6px;
}
.contact__mail {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px;
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem); font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.contact .slot { margin-top: 24px; max-width: 26em; }

.form { background: var(--white); color: var(--navy); padding: clamp(20px, 3vw, 36px); display: grid; gap: 18px; }
.form label { display: grid; gap: 6px; font-weight: 650; font-size: 0.9375rem; }
.form input, .form textarea {
  font: inherit; font-weight: 400; font-size: 1.0625rem; color: var(--navy);
  border: 1.5px solid var(--navy); border-radius: 0; background: var(--white);
  padding: 12px 14px; width: 100%;
}
.form textarea { min-height: 132px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--muted); opacity: 1; }
.form input:focus-visible, .form textarea:focus-visible { outline-offset: 2px; }
.form [aria-invalid="true"] { border-color: var(--verm-ink); box-shadow: inset 0 0 0 1.5px var(--verm-ink); }
.form .btn { justify-self: start; }
.form__status { font-weight: 600; min-height: 1.5em; }
.form__status:empty { position: absolute; }

/* ---------- Footer ---------- */

.foot { background: var(--navy); color: var(--white); padding-top: clamp(48px, 6vw, 80px); overflow: clip; }
.foot__grid { display: grid; gap: 28px 48px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.foot nav { display: grid; gap: 2px; justify-items: start; }
.foot a { text-decoration: none; font-weight: 550; display: inline-flex; align-items: center; min-height: 44px; }
.foot p { color: var(--on-navy-muted); font-size: 0.9375rem; }
.foot__grid > div > a { display: flex; }
.foot__motion { font-weight: 500; color: var(--on-navy-muted); text-decoration: underline; text-underline-offset: 3px; }
.foot__grid > p { padding-top: 10px; }
.foot__big { margin-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(28px, 4vw, 56px); container-type: inline-size; }
.foot__big span {
  display: block;
  font-stretch: 125%; font-weight: 900; line-height: 0.74; letter-spacing: -0.005em; white-space: nowrap;
  font-size: 34vw; font-size: 39.2cqw; margin-left: -0.074em; padding-top: 0.02em;
}
.foot__big .brand__rail { height: 15px; margin-top: clamp(14px, 2.6cqw, 34px);
  background:
    radial-gradient(circle at 7.5px 50%, var(--verm) 0 7px, transparent 7.6px),
    radial-gradient(circle at calc(100% - 7.5px) 50%, var(--verm) 0 7px, transparent 7.6px),
    linear-gradient(var(--verm), var(--verm)) center / calc(100% - 14px) 3px no-repeat;
}

/* ---------- Thumb bar (phones) ---------- */

/* The two ways to reach us ride under the thumb once the hero's own button has scrolled away. */
.reach { display: none; }
@media (max-width: 619px) and (min-height: 521px) {
  .reach:not([hidden]) { --focus: var(--white); position: fixed; inset: auto 0 0; z-index: var(--z-toggle); display: grid; grid-template-columns: 1fr auto; padding-bottom: env(safe-area-inset-bottom); background: var(--navy); border-top: 1px solid var(--line-on-navy); }
  .reach a { display: grid; place-items: center; min-height: 52px; padding: 0 16px; color: var(--white); font-size: 1rem; font-weight: 650; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .reach a:focus-visible { outline-offset: -4px; }
  .reach__talk { background: var(--verm-field); }
  .reach:not([hidden]) ~ .notes { bottom: 64px; }
}

/* ---------- Draft notes toggle ---------- */

/* The review toggle shows only in a browser that has opened the notes (?notes=on). The public never sees it. */
.notes { display: none; }
.has-notes .notes { display: inline-flex; }
.notes {
  position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: 12px; z-index: var(--z-toggle);
  align-items: center; gap: 8px;
  background: var(--white); color: var(--navy); border: 1.5px dashed var(--navy);
  font-size: 0.8125rem; font-weight: 650; padding: 8px 12px; min-height: 40px; cursor: pointer;
}
.notes::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--verm); }
[data-notes="off"] .notes::before { background: var(--line); }

@media (prefers-reduced-motion: reduce) {
  html:not(.motion) { scroll-behavior: auto; }
  html:not(.motion) *, html:not(.motion) *::before, html:not(.motion) *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* ---------- Motion layer (js/motion.js) ---------- */

/* Smooth scroll (Lenis) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* Hold the hero back until the intro has set its start positions. If the scripts fail, show it. */
.motion:not(.motion-ready):not(.motion-failed) [data-intro] { visibility: hidden; }

/* Loader: the logo and its rail, then the curtain lifts. First visit of a session only. */
.loader { display: none; position: fixed; inset: 0; z-index: var(--z-loader); background: var(--navy); color: var(--white); place-items: center; clip-path: inset(0); }
.motion:not(.motion-seen):not(.motion-failed):not(.motion-done) .loader { display: grid; }
/* Start the loader in the state its animation begins from, so the logo is not painted, blanked and redrawn. */
.motion:not(.motion-ready) .loader__in { visibility: hidden; }
/* Hold the page still under the loader where smooth scroll is not there to do it. */
html.motion:not(.motion-seen):not(.motion-failed):not(.motion-done) { overflow: clip; }
.loader__in { display: grid; gap: clamp(10px, 1.6vw, 18px); }
.loader b { display: block; overflow: clip; font-stretch: 125%; font-weight: 900; line-height: 0.8; font-size: clamp(4rem, 13vw, 8.5rem); letter-spacing: 0.01em; padding-bottom: 0.04em; }
.loader b span { display: inline-block; }
.loader .brand__rail { height: 13px;
  background:
    radial-gradient(circle at 6.5px 50%, var(--verm) 0 6px, transparent 6.6px),
    radial-gradient(circle at calc(100% - 6.5px) 50%, var(--verm) 0 6px, transparent 6.6px),
    linear-gradient(var(--verm), var(--verm)) center / calc(100% - 12px) 2.5px no-repeat;
}

/* Photo sequence. Static by default: a wall of job photos behind the owner's line. */
.seq { position: relative; background: var(--navy); color: var(--white); overflow: clip; }
.seq__pin { position: relative; display: grid; place-items: center; min-height: min(84svh, 860px); padding-block: clamp(72px, 10vw, 140px); overflow: clip; }
.seq__grid {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(100%, min(120svh, 1160px));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1vw, 16px);
}
.seq__col { display: grid; gap: clamp(8px, 1vw, 16px); align-content: center; }
.seq__grid figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-lift); }
.seq__grid img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.03); }
.seq__shade { position: absolute; inset: 0; background: var(--navy); opacity: 0.66; }
.seq__content { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(28px, 4vw, 48px); text-align: center; }
.seq__quote p {
  font-stretch: var(--display-stretch); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance;
  font-size: clamp(1.75rem, 3.1vw + 0.7rem, 3.75rem); max-width: 21em;
}
.seq__quote footer { margin-top: clamp(16px, 2vw, 26px); font-weight: 600; font-size: 1.0625rem; }

/* Live: one photograph fills the screen, the line rises over it, then the wall of work pulls back into view. */
/* lvh, not svh: once a phone's toolbar retracts, the pinned frame still has to reach the bottom of the screen. */
.seq.is-live .seq__pin { height: 100vh; height: 100lvh; min-height: 0; padding: 0; }
.seq.is-live .seq__grid { translate: none; width: max(100vw, 138vh); width: max(100vw, 138lvh); will-change: transform; }
/* The photo fills the largest screen; the words stay centred in the part that is always visible. */
.seq.is-live .seq__content { position: absolute; inset: 0 0 auto; height: 100vh; height: 100svh; align-content: center; }
.seq.is-live .seq__quote, .seq.is-live .seq__cta { grid-area: 1 / 1; }

/* Colour block that crosses a photo before it shows. */
.veil { position: absolute; inset: 0; z-index: 1; background: var(--verm); transform: scaleX(0); pointer-events: none; }
.ph__tag, .ph__count { z-index: 2; }
.ph--drift img { inset: -7% 0; height: 114%; }

/* Dimension rails draw outward from their caption. */
.dim.is-armed::before, .dim.is-armed::after { transform: scaleX(0); transition: transform 0.9s var(--ease-out) 0.15s; }
.dim.is-armed::before { transform-origin: 100% 50%; }
.dim.is-armed::after { transform-origin: 0 50%; }
.dim.is-armed.is-in::before, .dim.is-armed.is-in::after { transform: scaleX(1); }

/* Cursor label over photographs that open. */
.cursor {
  position: fixed; left: 0; top: 0; z-index: var(--z-cursor);
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--verm-field); color: var(--white); font-weight: 700; font-size: 0.875rem;
  pointer-events: none; visibility: hidden;
}

/* Sheets and the menu arrive rather than pop. */
.motion .sheetdlg, .motion .menu { transition: opacity 0.35s var(--ease-out), translate 0.5s var(--ease-out), overlay 0.5s allow-discrete, display 0.5s allow-discrete; opacity: 0; translate: 0 28px; }
.motion .sheetdlg[open], .motion .menu[open] { opacity: 1; translate: 0 0; }
@starting-style { .motion .sheetdlg[open], .motion .menu[open] { opacity: 0; translate: 0 28px; } }
.motion .sheetdlg::backdrop { transition: opacity 0.4s linear, overlay 0.4s allow-discrete, display 0.4s allow-discrete; opacity: 0; }
.motion .sheetdlg[open]::backdrop { opacity: 1; }
@starting-style { .motion .sheetdlg[open]::backdrop { opacity: 0; } }

/* ---------- Print ---------- */

@media print {
  *, *::before, *::after { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
  .loader, .cursor, .reach, .notes, .nav .btn, .nav__menu, .veil, .foot__motion { display: none !important; }
  .nav { position: static; }
  .motion [data-intro] { visibility: visible !important; }
  .seq, .seq__pin, .pin-spacer { position: static !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
  .seq__grid { position: static !important; translate: none !important; width: 100% !important; will-change: auto; }
  .seq__content { position: static !important; height: auto !important; padding: 32px 0; }
  .seq__shade { display: none; }
  .ph--drift img { inset: 0; height: 100%; }
  .facts, .seq, .beem, .contact, .foot, .demo__out { background: var(--white) !important; color: var(--navy) !important; }
  .facts dd, .seq__quote p, .quote p, .why p, .why h3, .beem .lede, .beem h2, .beem__foot, .beem__foot a, .contact h2, .contact__lede, .contact__tel, .contact__mail, .foot a, .demo__out { color: var(--navy) !important; }
  .facts dt, .quote footer, .seq__quote footer, .foot p, .demo__out small { color: var(--muted) !important; }
  .contact__tel { border-bottom-color: var(--navy); }
  .spread, .job, .demo, .form, .about__grid { break-inside: avoid; }
  .foot__big { display: none; }
}

/* ---------- Forced colours (Windows contrast themes) ---------- */

@media (forced-colors: active) {
  .brand__rail, .dim::before, .dim::after, .chain::before, .chain li::before, .facts dt::before, .demo__steps::before, .demo__steps::after, .demo__step::before, .notes::before { forced-color-adjust: none; }
  .demo__step[aria-selected="true"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
  .who--expert, .chip { border: 1.5px solid CanvasText; }
  .btn, .more .tile, .nav__menu, .menu__close, .sheetdlg__close, .sheetdlg__done { border: 1px solid ButtonText; }
}