/* Sections ported from DL-website (carousel → contact), mapped to site tokens */
.below-hero {
  --s-bg: var(--canvas);
  --s-fg: var(--ink);
  --s-muted: var(--ink-soft);
  --s-dim: color-mix(in srgb, var(--ink) 42%, transparent);
  --s-line: var(--line);
  --s-accent: var(--blue);
  --s-accent-2: #0284c7;
  --s-max: 1120px;
  position: relative;
  z-index: 11;
  background: var(--s-bg);
  color: var(--s-fg);
  /* small pull only — enough to tighten the seam, not cover the brand frame */
  margin-top: calc(-1 * min(18vh, 140px));
}

/* Staged hero is one viewport tall — no overlap pull or a white seam shows. */
.hero.hero-staged ~ .below-hero {
  margin-top: 0;
}

.rhyme-scroll-track {
  position: relative;
  /* Tall enough for a slow assembly, short enough that the next section
     arrives right after "We build AI" lands — no dead scroll at the end. */
  height: min(520vh, 4200px);
}

.build-rhyme.rhyme-animated {
  position: sticky;
  top: 0;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.below-hero .section {
  width: min(var(--s-max), calc(100% - 48px));
  margin: 0 auto;
  padding: min(24vh, 180px) 0 min(16vh, 120px);
  max-width: 100%;
}

.below-hero .reveal {
  opacity: 0;
  transform: translateY(28px);
}

.below-hero .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- build rhyme (post-hero manifesto) --- */
.below-hero .quiet {
  width: min(var(--s-max), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(12px, 2vh, 28px) 0 min(4vh, 48px);
}

.below-hero .quiet-in {
  max-width: 100%;
}

.build-rhyme .kick {
  margin-bottom: clamp(36px, 5vh, 56px);
}

/* This section runs wider than the rest of the page so the lines can be as
   large as possible. The size is capped by the longest line, "We build
   automation.", which has to stay on ONE row: every donor must be on screen
   at the moment the pieces lift out. */
.below-hero .build-rhyme,
.below-hero .quiet.build-rhyme {
  width: min(1400px, calc(100% - 48px));
}

.below-hero .build-rhyme h2.rhyme-line {
  margin: 0 0 clamp(20px, 5vh, 60px);
  max-width: none;
  font-size: clamp(1.35rem, 7.9vw, 8.3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: nowrap;
  white-space: nowrap;
}

.below-hero .build-rhyme .rhyme-line:last-child {
  margin-bottom: 0;
}

/* All four lines share one left edge — no zig-zag / right-aligned offsets */
.below-hero .build-rhyme .rhyme-line--offset {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  color: var(--ink);
}
.build-rhyme.rhyme-animated .rv {
  transition: none;
}

.build-rhyme.rhyme-animated .kick {
  opacity: 1;
  transform: none;
}

.build-rhyme.rhyme-animated .rhyme-line {
  will-change: transform, opacity;
}

/* --- the assembled last line ---------------------------------------------
   Words and letters get their own inline-block boxes so they can be moved
   independently. The four that fly are lifted onto their own layer so they
   pass over the dissolving lines instead of being clipped by them. */
.build-rhyme .rw,
.build-rhyme .rc {
  display: inline-block;
  white-space: pre;
  backface-visibility: hidden;
  vertical-align: baseline;
}

/* Negative tracking on the h2 pulls adjacent .rc boxes on top of each other
   (the “a inside the i” bug). Keep tracking on whole words only; open the
   letter pair so a and i stay distinct at display size. */
.build-rhyme .rw {
  letter-spacing: -0.035em;
}
.build-rhyme .rw:has(.rc),
.build-rhyme .rhyme-rig .rw:has(.rc) {
  letter-spacing: 0.06em;
}
.build-rhyme .rc {
  letter-spacing: 0;
}

.build-rhyme .rhyme-rig .rw,
.build-rhyme .rhyme-rig .rc {
  line-height: 1;
  vertical-align: baseline;
}

.build-rhyme.rhyme-animated .rhyme-line {
  position: relative;
  z-index: 1;
}

/* the last line sits above the three it is built from */
.build-rhyme.rhyme-animated .rhyme-line--offset:last-child {
  z-index: 3;
}

/* the travellers ride above the lock-line for the whole blend */
.build-rhyme.rhyme-animated .rw,
.build-rhyme.rhyme-animated .rc {
  position: relative;
  z-index: 3;
}

/* the flight must not be clipped by the sticky panel's own bounds */
.build-rhyme.rhyme-animated {
  overflow: visible;
}

/* The written last line stays in the document for screen readers and search,
   but takes no space and is never painted: the assembled blue line is what
   the visitor actually reads. */
.build-rhyme.rhyme-animated .rhyme-line--spoken {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Measuring rig — pieces fly toward this (invisible). */
.build-rhyme .rhyme-rig {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 7.9vw, 8.3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

/* Locked final line — sits UNDER the flying pieces, then is revealed as
   they dissolve, so the swap never pops. */
.build-rhyme .rhyme-final {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 7.9vw, 8.3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--blue);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.build-rhyme .rhyme-final-ai {
  display: inline-block;
  position: relative;
  letter-spacing: 0;
  vertical-align: baseline;
  /* width set in JS from current A-glyph + i */
}

.build-rhyme .rhyme-final-a {
  display: inline-block;
  position: relative;
  letter-spacing: 0;
  vertical-align: baseline;
  text-align: center;
  white-space: nowrap;
}

.build-rhyme .rhyme-final-i {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.build-rhyme .rhyme-final-a.is-glitching,
.build-rhyme .rhyme-final-i.is-glitching {
  text-shadow:
    1px 0 color-mix(in srgb, var(--cyan, #00d5fd) 75%, transparent),
    -1px 0 color-mix(in srgb, var(--blue) 65%, #ff2a6d);
  animation: rhymeAGlitch 80ms steps(2, end) infinite;
}

@keyframes rhymeAGlitch {
  0% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(0.5px, -0.5px, 0); }
  66% { transform: translate3d(-0.5px, 0.5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* travellers stay above the lock-line for the whole blend */
.build-rhyme.rhyme-animated .rw,
.build-rhyme.rhyme-animated .rc {
  z-index: 3;
}

.build-rhyme .rhyme-rig .rhyme-rig-ai {
  letter-spacing: 0;
}
.build-rhyme .rhyme-rig [data-ai] {
  display: inline-block;
  min-width: 0.55em;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}
.build-rhyme .rhyme-rig [data-ai="a"] {
  margin-right: 0.08em;
}

@media (max-width: 860px) {
  .below-hero {
    margin-top: 0;
  }

  .rhyme-scroll-track {
    height: min(400vh, 3200px);
  }

  /* sticky panel sits under the fixed nav so kick + "We build systems"
     never slide under the header */
  .build-rhyme.rhyme-animated {
    --rhyme-nav-clear: max(68px, calc(56px + env(safe-area-inset-top, 0px)));
    top: var(--rhyme-nav-clear);
    min-height: calc(100svh - var(--rhyme-nav-clear));
    min-height: calc(100vh - var(--rhyme-nav-clear));
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  .below-hero .quiet {
    padding-top: 0;
  }

  .build-rhyme .kick {
    margin-bottom: clamp(20px, 3vh, 32px);
  }
}

/* --- custom / capability wall --- */
.below-hero .quiet + .custom,
.below-hero .rhyme-scroll-track + .custom {
  padding-top: min(4vh, 40px);
}

.custom { padding-bottom: min(18vh, 140px); }

.capability-stage { position: relative; width: 100%; }

.custom h2 {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(16px, 4vw, 40px);
  max-width: none;
  width: 100%;
  text-align: center;
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  pointer-events: none;
  text-shadow: 0 0 24px var(--s-bg), 0 0 48px var(--s-bg), 0 0 80px var(--s-bg), 0 0 120px var(--s-bg);
}

.capability-wall {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.capability-wall li {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 11px 16px;
  border: 1px solid var(--s-line);
  background: transparent;
  color: var(--s-muted);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  transition-delay: calc(var(--i, 0) * 8ms), calc(var(--i, 0) * 8ms), 0s, 0s, 0s;
}

.custom.is-in .capability-wall li { opacity: 1; transform: translateY(0); }

@media (hover: hover) and (pointer: fine) {
  .custom.is-in .capability-wall li:hover {
    background: var(--s-accent);
    border-color: var(--s-accent);
    color: #fff;
    transform: translateY(-1px);
    transition-delay: 0s;
  }
}

/* --- work --- */
.work { position: relative; }

.work-title {
  margin: 0 auto 18px;
  font-family: var(--display);
  font-size: clamp(34px, 6.5vw, 88px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  max-width: 16ch;
  text-align: center;
}

.work-lead {
  margin: 0 auto clamp(44px, 8vh, 90px);
  max-width: 50ch;
  font-family: var(--body);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--s-muted);
  text-align: center;
}

.work-cases { margin: 0; padding: 0; }

.work-case {
  position: relative;
  border-top: 1px solid var(--s-line);
  padding: clamp(30px, 5vh, 56px) 0;
}

.work-case:last-of-type { border-bottom: 1px solid var(--s-line); }

.work-case-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.work-case-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.work-case-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-dim);
  border: 1px solid var(--s-line);
  padding: 5px 12px;
}

.work-case-tag u {
  text-decoration: none;
  color: var(--s-accent);
  font-size: 9px;
  line-height: 1;
  animation: pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .work-case-tag u { animation: none; opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.work-case-copy h3 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}

.work-case.is-open .work-case-copy h3 { color: var(--s-accent); }

.work-case-client {
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-accent-2);
}

.work-case-line { margin: 0 0 18px; max-width: 46ch; }

.work-case-line b {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-accent);
}

.work-case-line p {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--s-muted);
}

.work-case-types {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.work-case-types li {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-dim);
  border: 1px solid var(--s-line);
  padding: 5px 10px;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .work-case-types li:hover {
    border-color: var(--s-accent);
    color: var(--s-accent);
    background: color-mix(in srgb, var(--s-accent) 6%, transparent);
  }
}

.work-case-shot {
  position: relative;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--s-accent) 22%, var(--s-line));
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: linear-gradient(135deg, color-mix(in srgb, var(--s-accent) 8%, var(--s-bg)) 0%, color-mix(in srgb, var(--s-fg) 2%, var(--s-bg)) 55%);
}

.work-case-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 9px;
  text-align: center;
  padding: 24px;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--s-accent) 4%, transparent) 0 10px, transparent 10px 20px);
}

.work-case-ph b {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-accent);
}

.work-case-ph span {
  max-width: 30ch;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--s-dim);
}

.work-case-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 9px 12px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--s-bg) 92%, transparent));
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-dim);
}

.work-case-panel { display: block; }
.work-case-m-head, .work-case-toggle { display: none; }

.led-pair { display: flex; gap: 6px; flex-shrink: 0; }

.led-digit {
  display: grid;
  grid-template-columns: repeat(5, 5px);
  grid-template-rows: repeat(7, 5px);
  gap: 2px;
}

.led-digit i {
  width: 5px;
  height: 5px;
  background: color-mix(in srgb, var(--s-accent) 14%, transparent);
}

.led-digit i.is-on {
  background: var(--s-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--s-accent) 45%, transparent);
}

.work-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: max-content;
  margin: clamp(36px, 6vh, 64px) auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--s-fg);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.work-more-plus {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--s-line);
  font-family: var(--mono);
  font-size: 18px;
  font-style: normal;
  line-height: 1;
  color: var(--s-accent);
  transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.work-more-label {
  font-family: var(--display);
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .work-more:hover .work-more-plus {
    background: var(--s-accent);
    border-color: var(--s-accent);
    color: #fff;
    transform: rotate(90deg);
  }
}

/* --- contact --- */
.contact {
  text-align: center;
  padding: min(18vh, 140px) 6vw max(160px, calc(min(28vh, 200px) + env(safe-area-inset-bottom)));
  position: relative;
  z-index: 14;
  max-width: 100%;
  box-sizing: border-box;
}

.contact-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--s-dim);
}

.contact-eyebrow::before,
.contact-eyebrow::after {
  content: "";
  height: 1px;
  width: min(18vw, 140px);
  background: var(--s-line);
}

.contact-lede {
  max-width: 46ch;
  margin: 0 auto;
  font-family: var(--body);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--s-muted);
}

.mag-field {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: clamp(24px, 5vw, 70px);
  margin: clamp(10px, 2vh, 30px) 0;
}

.mag-tap { display: none; }

@media (hover: hover) and (pointer: fine) {
  .mag-field { cursor: none; }
}

.mag {
  display: inline-block;
  max-width: 100%;
  font-family: var(--display);
  font-size: clamp(28px, 8.5vw, 140px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--s-fg);
  will-change: transform;
}

.mag-word { display: inline-block; white-space: nowrap; }
.mag-ch { display: inline-block; will-change: transform; transition: color 0.45s ease; }
.mag-sp { display: inline-block; width: 0.28em; }

.mag-field:hover .mag-ch { color: var(--s-accent); }

.mag-hint {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 0;
  height: 0;
  pointer-events: none;
}

.mag-hint-bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s-fg);
  color: #fff;
  opacity: 0;
  scale: 0.55;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--s-fg) 28%, transparent);
  transition: opacity 0.22s ease, scale 0.22s cubic-bezier(0.19, 1, 0.22, 1);
}

.mag-hint.on .mag-hint-bubble { opacity: 1; scale: 1; }

.mag-hint-label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .mag-hint { display: none; }
}

.contact-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  margin: clamp(4px, 1vh, 12px) 0 0;
}

@media (hover: hover) and (pointer: fine) {
  .contact-meta a { cursor: none; }
}

.contact-meta-email { margin: 0 0 24px; }
.contact-meta-email a { cursor: pointer; }

.contact-meta a {
  font-family: var(--body);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--s-fg);
  transition: color 0.3s ease;
}

.contact-meta a:hover { color: var(--s-accent); }

.contact-brief {
  display: grid;
  grid-template-rows: 0fr;
  width: min(560px, 100%);
  margin: 0 auto;
  text-align: start;
  opacity: 0;
  transition: grid-template-rows 0.85s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.55s ease, margin 0.85s cubic-bezier(0.19, 1, 0.22, 1);
}

.contact-brief.is-open {
  grid-template-rows: 1fr;
  margin: clamp(36px, 6vh, 72px) auto 0;
  opacity: 1;
  padding-bottom: 8px;
}

.contact-brief-inner {
  overflow: hidden;
  min-height: 0;
  transform: translateY(-28px);
  transition: transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);
}

.contact-brief.is-open .contact-brief-inner {
  transform: translateY(0);
  overflow: visible;
}

.form, .form-sent {
  display: grid;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-sent {
  align-content: center;
  min-height: 160px;
  margin: 0;
  font-family: var(--body);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--s-fg);
}

.form-sent-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--s-accent);
}

.form-sent-mark::after {
  content: "";
  width: 7px;
  height: 12px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-error {
  margin: 0;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: #b42318;
}

.field-honey { display: none; }

.form-field {
  display: grid;
  gap: 8px;
  text-align: start;
}

.form-field span {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  color: var(--s-fg);
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--s-fg) 18%, transparent);
  border-radius: 2px;
  padding: 14px 16px;
  outline: none;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--s-fg);
  caret-color: var(--s-accent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input { min-height: 52px; }
.form-field textarea { min-height: 140px; resize: vertical; }

.form-field input:hover,
.form-field textarea:hover {
  border-color: color-mix(in srgb, var(--s-fg) 32%, transparent);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--s-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-accent) 18%, transparent);
}

.form button {
  margin-top: 8px;
  width: auto;
  justify-self: start;
  min-height: 52px;
  padding: 0 24px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 2px;
  border: 1px solid var(--s-accent);
  background: var(--s-accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.form button:hover {
  background: transparent;
  color: var(--s-accent);
}

.form button:disabled { opacity: 0.5; cursor: wait; }

.site-footer {
  width: min(var(--s-max), calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 120px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-dim);
  text-align: center;
}

.builds-shell.below-hero {
  margin-top: 0;
  background: transparent; /* shell paints its own atmosphere */
}
  position: relative;
  z-index: 1;
  padding-top: max(108px, calc(88px + env(safe-area-inset-top)));
  padding-bottom: min(12vh, 96px);
}

.builds-kick {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 28px;
  color: var(--s-accent);
}

.builds-kick-rule {
  flex: 1;
  max-width: 150px;
  height: 1px;
  background: var(--s-line);
  align-self: center;
}

.builds-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--s-muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
}

.builds-back:hover { color: var(--s-accent); }

.builds-page .work-title {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 12ch;
}

.builds-page .work-lead {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: clamp(36px, 6vh, 64px);
}

.builds-page .work-case {
  scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px));
}

.work-case.is-target {
  outline: 1px solid color-mix(in srgb, var(--s-accent) 35%, transparent);
  outline-offset: 8px;
}

.builds-cta {
  position: relative;
  z-index: 1;
  width: min(var(--s-max), calc(100% - 48px));
  margin: 0 auto;
  padding: min(10vh, 88px) 0 min(8vh, 64px);
  text-align: center;
  border-top: 1px solid var(--s-line);
}

.builds-cta-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 14px;
  color: var(--s-dim);
}

.builds-cta-eyebrow::before,
.builds-cta-eyebrow::after {
  content: "";
  height: 1px;
  width: min(18vw, 120px);
  background: var(--s-line);
}

.builds-cta-lede {
  margin: 0 auto 28px;
  max-width: 28ch;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--s-fg);
}

.builds-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 3px;
  background: var(--s-fg);
  color: var(--s-bg);
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.35s ease, transform 0.35s ease, color 0.35s ease;
}

.builds-cta-btn:hover {
  background: var(--s-accent);
  color: #fff;
  transform: translateY(-1px);
}

.builds-cta-btn span {
  transition: transform 0.35s ease;
}

.builds-cta-btn:hover span {
  transform: translate(3px, -3px);
}

.builds-shell .site-footer {
  position: relative;
  z-index: 1;
  padding: 0 0 max(36px, calc(20px + env(safe-area-inset-bottom)));
}

@media (max-width: 800px) {
  .builds-page {
    padding-top: max(92px, calc(76px + env(safe-area-inset-top)));
    padding-bottom: min(8vh, 64px);
  }

  .builds-cta {
    width: calc(100% - 32px);
    padding: 56px 0 40px;
  }

  .builds-shell .site-footer {
    padding-bottom: max(24px, calc(12px + env(safe-area-inset-bottom)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .builds-cta-btn,
  .builds-back { transition: none; }
}

/* --- mobile --- */
@media (max-width: 800px) {
  .below-hero .section { width: calc(100% - 32px); }

  .custom {
    padding-top: min(12vh, 72px);
    padding-bottom: min(12vh, 88px);
  }

  .custom h2 {
    font-size: clamp(24px, 7.5vw, 40px);
    line-height: 1.1;
    padding: clamp(16px, 5vw, 32px);
  }

  .capability-wall {
    gap: 6px;
    max-height: 16.5rem;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 78%, transparent 100%);
  }

  .capability-wall li:nth-child(n + 21) { display: none; }

  .capability-wall li {
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 9px 11px;
  }

  .form-row { grid-template-columns: 1fr; }

  .work-case { padding: 0; }
  .work-case > .work-case-shot { margin: 14px 0 4px; }

  .work-case-m-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px 16px;
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 14px 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
    font: inherit;
  }

  .work-case-m-main { min-width: 0; }

  .work-case-m-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-bottom: 4px;
  }

  .work-case-m-top h3 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(17px, 5vw, 22px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
  }

  .work-case.is-open .work-case-m-top h3 { color: var(--s-accent); }

  .work-case-m-head .work-case-client { margin: 0 0 8px; }

  .work-case-m-head .work-case-types {
    margin: 0;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    min-width: 0;
  }

  .work-case-m-head .work-case-types li {
    flex: 1 1 0;
    min-width: 0;
    font-size: 8px;
    letter-spacing: 0.04em;
    padding: 4px 2px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .work-case-toggle {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-top: 2px;
    border: 1px solid var(--s-line);
    font-family: var(--mono);
    font-size: 18px;
    font-style: normal;
    line-height: 1;
    color: var(--s-accent);
    flex: none;
  }

  .work-case-panel { padding: 0 0 16px; }

  .work-case-panel[hidden] { display: none; }

  .work-case-panel > .work-case-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .work-case-panel .work-case-copy h3,
  .work-case-panel .work-case-meta,
  .work-case-panel .work-case-client { display: none; }

  .work-case-panel .work-case-line { max-width: none; }

  .work-case-m-head .led-digit {
    grid-template-columns: repeat(5, 4px);
    grid-template-rows: repeat(7, 4px);
    gap: 1.5px;
  }

  .work-case-m-head .led-digit i { width: 4px; height: 4px; }

  .work-case-head { grid-template-columns: 1fr; }
  .work-case-shot { order: -1; margin-bottom: 8px; }

  .work-title {
    max-width: 18ch;
    line-height: 1.08;
    margin-bottom: 10px;
  }

  .work-lead {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 18px;
  }

  .work-more { gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 100%; min-height: 48px; }
  .work-more-label { font-size: clamp(16px, 5vw, 22px); }

  .form button { width: 100%; justify-self: stretch; }

  .mag-field {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: clamp(16px, 4vw, 36px) 12px;
    margin-inline: 0;
    box-sizing: border-box;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mag-field.is-open { transform: scale(0.92); grid-template-columns: 1fr; }

  .mag-tap {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--s-accent);
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    animation: mag-tap-nudge 1.35s ease-in-out infinite;
  }

  .mag {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: auto;
    max-width: 9.5ch;
    text-align: center;
    line-height: 1.02;
    color: var(--s-accent);
  }

  .mag .mag-word:last-child { display: block; }

  .mag-field.is-open .mag {
    grid-column: 1;
    justify-self: center;
    text-align: center;
    max-width: 9.5ch;
    opacity: 0.72;
  }

  .mag-tap-label {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
  }

  .mag .mag-ch { color: var(--s-accent); }
  .mag-field.is-open .mag-tap { display: none; }

  .contact-brief { opacity: 0; margin-top: 0; }

  .contact-brief.is-open {
    margin: 28px auto 0;
    opacity: 1;
  }

  .contact-brief-inner {
    transform: translateY(18px) scale(0.985);
    opacity: 0.35;
    filter: blur(2px);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease 0.08s, filter 0.55s ease 0.08s;
  }

  .contact-brief.is-open .contact-brief-inner {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
    /* keep clipping for the 0fr→1fr reveal; desktop flips to visible */
    overflow: hidden;
  }

  /* closed page only — open state is handled after .contact.brief-open below */
  .contact:not(.brief-open) {
    padding: min(12vh, 88px) 5vw max(36px, calc(20px + env(safe-area-inset-bottom)));
  }

  .site-footer {
    padding: 8px 0 max(24px, calc(12px + env(safe-area-inset-bottom)));
  }
}

@keyframes mag-tap-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .below-hero .reveal { opacity: 1; transform: none; }
  .contact-brief, .contact-brief-inner { transition: none; }
  .mag-field, .mag { animation: none !important; transition: none !important; }
}

/* The assembled line is the conclusion of the whole sequence, so it rests in
   full ink rather than the muted tone the other offset lines carry. */
.build-rhyme.rhyme-animated .rhyme-line--offset:last-child { color: var(--ink); }

/* ==========================================================================
   SELECTED BUILDS / the expanding row
   One panel open, the rest collapsed to their name. Moving across the row
   opens each in turn. Width is animated through flex-grow so the panels
   share the row rather than overlapping it.
   ========================================================================== */
.work-panels {
  display: flex;
  height: clamp(430px, 60vh, 640px);
  border: 1px solid var(--s-line);
  overflow: hidden;
  background: var(--s-bg);
}

.wp {
  position: relative;
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border-left: 1px solid var(--s-line);
  transition: flex-grow 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wp:first-child { border-left: 0; }
.wp.is-open { flex-grow: 3.6; }

/* --- the surface behind an open panel ----------------------------------- */
.wp-media {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.55s ease;
  overflow: hidden;
}
.wp.is-open .wp-media { opacity: 1; }

/* a real screenshot, when there is one, takes the whole surface */
.wp-shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 2;
}

/* the brand wash: the mark's own blue running out of one corner */
.wp-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(0, 213, 253, 0.30), transparent 62%),
    radial-gradient(100% 80% at 8% 96%, rgba(11, 87, 245, 0.42), transparent 66%);
}

/* the mark, set large and low-contrast into the panel */
.wp-mark {
  position: absolute;
  right: -6%;
  bottom: -18%;
  width: 46%;
  color: #fff;
  opacity: 0.07;
  pointer-events: none;
}
.wp-mark svg { width: 100%; height: auto; display: block; }

/* --- the plus that becomes a cross --------------------------------------- */
.wp-toggle {
  position: absolute;
  top: clamp(16px, 2vw, 26px);
  left: 50%;
  width: 15px;
  height: 15px;
  margin-left: -7.5px;
  z-index: 4;
  transition: left 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
    margin-left 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.5s ease, color 0.5s ease;
  color: var(--s-dim);
}
.wp-toggle i {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wp-toggle i:last-child { transform: rotate(90deg); }
.wp.is-open .wp-toggle {
  left: auto;
  right: clamp(16px, 2vw, 26px);
  margin-left: 0;
  color: rgba(255, 255, 255, 0.7);
  transform: rotate(45deg);
}
.wp.is-open .wp-toggle { left: unset; }

/* --- the copy ------------------------------------------------------------ */
.wp-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: block;
  padding: clamp(18px, 2.2vw, 34px);
  transition: color 0.5s ease;
}
.wp.is-open .wp-body { color: #fff; }

.wp-num {
  display: block;
  color: var(--s-dim);
  margin-bottom: 10px;
  transition: color 0.5s ease;
}
.wp.is-open .wp-num { color: rgba(255, 255, 255, 0.55); }

.wp-kind {
  display: block;
  color: var(--s-muted);
  margin-bottom: 8px;
  transition: color 0.5s ease;
}
.wp.is-open .wp-kind { color: var(--cyan); }

.wp-title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 0;
  /* font-size is not transitioned: growing type inside a widening panel
     rewraps every frame. Size snaps; width is pinned via --wp-copy-w. */
  transition: margin 0.55s ease, color 0.35s ease;
}
.wp.is-open .wp-title {
  font-size: clamp(30px, 3.7vw, 60px);
  margin-bottom: 18px;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* description and link exist only while the panel is open */
/* The copy rises into place from below the panel's edge. max-height is used
   rather than height:auto because auto cannot be animated: it snapped, which
   read as the text dropping in from above instead of lifting from the base. */
.wp-desc,
.wp-open {
  display: block;
  max-width: 46ch;
  opacity: 0;
  transform: translateY(26px);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
    max-height 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), margin 0.5s ease;
}
.wp.is-open .wp-desc,
.wp.is-open .wp-open {
  opacity: 1;
  transform: none;
  max-height: 16em;
  pointer-events: auto;
}
.wp-desc {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  transition-delay: 0.1s;
}
.wp-open {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  transition-delay: 0.16s;
}
.wp-open i {
  font-style: normal;
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.35s ease;
}
.wp.is-open:hover .wp-open i { transform: translateX(5px); }

.wp:focus-visible { outline: 2px solid var(--s-accent); outline-offset: -2px; }

/* --- narrow screens: a row of slivers is unreadable, so it stacks -------- */
@media (max-width: 860px) {
  .work-panels {
    display: block;
    height: auto;
    border: 0;
  }
  .wp {
    border-left: 0;
    border-top: 1px solid var(--s-line);
    height: clamp(300px, 52vh, 420px);
  }
  .wp:first-child { border-top: 1px solid var(--s-line); }
  .wp,
  .wp.is-open { flex: none; }
  /* every panel reads as open on a phone: there is room for one at a time */
  .wp .wp-media { opacity: 1; }
  .wp .wp-body { color: #fff; }
  .wp .wp-kind { color: var(--cyan); }
  .wp .wp-num { color: rgba(255, 255, 255, 0.55); }
  .wp .wp-title { font-size: clamp(24px, 6.4vw, 34px); margin-bottom: 12px; }
  .wp .wp-desc,
  .wp .wp-open { opacity: 1; transform: none; height: auto; pointer-events: auto; }
  .wp .wp-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wp, .wp-media, .wp-toggle, .wp-toggle i,
  .wp-desc, .wp-open, .wp-title { transition: none !important; }
}



/* --- closed panels, horizontal ------------------------------------------
   The open panel is deliberately narrow so the closed ones keep enough width
   to hold their names the normal way round. Long names wrap rather than
   shrink, so "Website Generation Engine" stays readable at full size. */
@media (min-width: 861px) {
  .wp:not(.is-open) .wp-body {
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(14px, 1.4vw, 20px);
    padding-top: clamp(46px, 4.4vw, 60px);
  }
  .wp:not(.is-open) .wp-num {
    position: absolute;
    top: clamp(16px, 2vw, 26px);
    left: clamp(14px, 1.4vw, 20px);
    margin: 0;
  }
  .wp:not(.is-open) .wp-kind {
    font-size: 9px;
    letter-spacing: 0.1em;
    line-height: 1.35;
    margin-bottom: 8px;
  }
  .wp:not(.is-open) .wp-title {
    font-size: clamp(15px, 1.2vw, 19px);
    line-height: 1.18;
    letter-spacing: -0.015em;
    transition: color 0.35s ease;
    hyphens: auto;
  }
  .wp:not(.is-open):hover .wp-title { color: var(--s-accent); }

  /* the toggle sits top-right on a closed panel now that the number is
     holding the top-left corner */
  .wp:not(.is-open) .wp-toggle {
    left: auto;
    right: clamp(14px, 1.4vw, 20px);
    margin-left: 0;
  }
}

/* --- the copy is laid out at its final width, not the animating one ------
   .wp-copy-w is measured in JS from the flex-grow values. Without it the
   description (and open title) rewrap on every frame while the panel widens;
   with it the text is set once and the panel simply uncovers it. */
@media (min-width: 861px) {
  .wp-desc,
  .wp-open,
  .wp.is-open .wp-title {
    width: var(--wp-copy-w, auto);
    max-width: none;
    min-width: var(--wp-copy-w, 0);
  }
  /* a closed panel still wraps its own name inside its narrow column */
  .wp:not(.is-open) .wp-title {
    width: auto;
    min-width: 0;
  }
}

/* The hidden attribute only carries a UA-level display:none, so any class
   rule that sets display beats it. `.form, .form-sent { display: grid }` was
   doing exactly that, which put a "Received" confirmation on screen before
   anyone had submitted anything. This restores the attribute's meaning for
   every element in the section. */
.below-hero [hidden] { display: none !important; }


/* Contact is the last thing on the page, so with the form open there was
   simply not enough document left to scroll: the browser hit the bottom
   ~56px early and left the submit button under the fold. This buys back the
   scroll room, and only while the form is actually open — the closed page
   keeps its original spacing. */
.contact.brief-open {
  padding-bottom: calc(max(160px, min(28vh, 200px) + env(safe-area-inset-bottom)) + 26vh);
}

/* On a 900px-tall window the open form was 39px too tall to sit on screen
   alongside the button. The 54px of air above the brief is the cheapest 39px
   on the page — losing most of it on short viewports buys the whole form,
   submit included, without hiding anything. Taller windows keep the air. */
@media (max-height: 940px) {
  .contact.brief-open .contact-brief { margin-top: 12px; }
}

/* Mobile open form: keep the closed-page footer tight, but restore room and
   structure once “Start My Project” expands — the earlier closed padding was
   collapsing the open layout, and the desktop brief-open rule above was
   winning the cascade. */
@media (max-width: 800px) {
  .contact.brief-open {
    padding: min(10vh, 72px) 5vw calc(max(88px, 52px + env(safe-area-inset-bottom)) + 18vh);
  }

  .contact.brief-open .contact-brief,
  .contact.brief-open .contact-brief.is-open {
    width: 100%;
    max-width: 100%;
    margin: 24px auto 0;
    padding: 0;
    box-sizing: border-box;
  }

  .contact.brief-open #contactMeta {
    display: none;
  }

  .contact.brief-open .mag-field.is-open {
    transform: none;
    padding-bottom: 8px;
  }

  .contact.brief-open .form,
  .contact.brief-open .form-sent {
    gap: 16px;
  }

  .contact.brief-open .form-field input,
  .contact.brief-open .form-field textarea {
    width: 100%;
    max-width: 100%;
  }
}