/* ==========================================================================
   Camber, structural engineering. Front-end design study by Semih Asaroglu.

   Deliberately nothing like thrivops.com. That site is near-black ground,
   teal accent, Instrument Sans, 14px radii. This one is cool concrete paper,
   one saturated safety orange, Archivo, and zero radius everywhere.

   Every colour pair used for text is contrast-checked in validate.js.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --paper:        #f2f2f0;
  --surface:      #e8e8e5;
  --surface-2:    #dededa;
  --line:         #d3d3ce;
  --line-hi:      #b4b4ae;
  --ink:          #16171a;
  --ink-2:        #55575c;
  --ink-3:        #6b6d72;

  --accent:       #d93b0e;  /* background use only */
  --accent-ink:   #b82f09;  /* text use, 5.43:1 on paper */
  --accent-hover: #b82f09;
  --accent-tint:  rgba(217, 59, 14, .10);
  --on-accent:    #ffffff;  /* 4.58:1 on --accent */

  --maxw: 1320px;
  --pad:  clamp(20px, 5vw, 56px);
  --sec:  clamp(76px, 10vw, 132px);
  --navh: 68px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #191a18;
    --surface:      #212320;
    --surface-2:    #2a2c28;
    --line:         #33352f;
    --line-hi:      #4a4c44;
    --ink:          #e8e8e6;
    --ink-2:        #a3a5a1;
    --ink-3:        #93958f;

    --accent:       #ff6a3d;
    --accent-ink:   #ff8258;
    --accent-hover: #ff8258;
    --accent-tint:  rgba(255, 106, 61, .13);
    --on-accent:    #191a18;
  }
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navh) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.032em;
  font-variation-settings: "wdth" 108;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
/* height:auto is not optional here. Every <img> carries width/height
   attributes for CLS, and those act as a definite height that would
   otherwise beat any aspect-ratio once max-width squeezes the element. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

[hidden] { display: none !important; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 8px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;      /* CTA labels can never wrap */
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .1s ease;
}
.btn--solid { background: var(--accent); color: var(--on-accent); }
.btn--solid:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-hi); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; height: 54px; }
.btn[disabled] { opacity: .6; cursor: default; }
.btn[disabled]:active { transform: none; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  height: var(--navh);
  display: flex;
  align-items: center;
  gap: 32px;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.mark__glyph { width: 30px; height: 18px; color: var(--accent-ink); flex: none; }
.mark__word {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variation-settings: "wdth" 112;
}
.nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav__links a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .18s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__cta { height: 42px; padding: 0 20px; font-size: 14px; }
.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-hi);
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform .22s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ---------- hero, asymmetric split ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.28fr .72fr;
  align-items: stretch;
  /* min() inside min-height, not a separate max-height. A max-height is
     ignored whenever min-height exceeds it, which let the hero run away
     on very tall viewports. */
  min-height: min(calc(100dvh - var(--navh)), 900px);
  border-bottom: 1px solid var(--line);
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: clamp(48px, 7vh, 96px) clamp(28px, 4vw, 64px) clamp(48px, 7vh, 96px)
           max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}
.hero__h1 {
  font-size: clamp(1.9rem, 5.1vw, 4.25rem);
  line-height: 1.01;
  letter-spacing: -.038em;
  font-variation-settings: "wdth" 106;
  max-width: 21ch;   /* the <br> sets the break; this must not force a third line */
}
.hero__sub {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: var(--ink-2);
  max-width: 46ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero__media { position: relative; overflow: hidden; background: var(--surface); }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  filter: contrast(1.05) saturate(.94);
}

/* ---------- clients, logo row ---------- */

.clients {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(44px, 6vw, 68px) var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.clients__lede { font-size: 14px; color: var(--ink-3); }
.clients__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4.4vw, 58px);
}
.clients__row svg {
  height: 23px;
  width: auto;
  color: var(--ink-3);
  transition: color .2s var(--ease);
}
.clients__row li:hover svg { color: var(--ink); }
.lg {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  fill: currentColor;
}

/* ---------- figures, hairline strip ---------- */

.figures {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}
.fig {
  padding: clamp(28px, 3.4vw, 44px) clamp(16px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fig + .fig { border-left: 1px solid var(--line); }
.fig__n {
  font-family: var(--mono);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}
.fig__l { font-size: 14px; color: var(--ink-2); line-height: 1.35; }

/* ---------- practice, bento ---------- */

.practice {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--sec) var(--pad);
}
.practice__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(36px, 4vw, 56px); }
.practice__head h2 { font-size: clamp(2rem, 3.7vw, 3.2rem); max-width: 18ch; }
.practice__head p { color: var(--ink-2); max-width: 58ch; }

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cell {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cell__body {
  padding: clamp(24px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cell h3 { font-size: clamp(1.15rem, 1.6vw, 1.42rem); }
.cell p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
.cell img { width: 100%; height: 100%; object-fit: cover; }

.cell--lead   { grid-column: 1 / 3; grid-row: 1 / 3; }
.cell--lead img { max-height: 340px; }
.cell--lead .cell__body { margin-top: auto; }
.cell--lead h3 { font-size: clamp(1.4rem, 2.1vw, 1.85rem); }

.cell--accent { grid-column: 3; grid-row: 1; background: var(--accent); color: var(--on-accent); }
.cell--accent p { color: var(--on-accent); opacity: .92; }

.cell--tex    { grid-column: 3; grid-row: 2; }
.cell--tex img { max-height: 150px; }

.cell:nth-of-type(4) { grid-column: 1; grid-row: 3; }
.cell--wide   { grid-column: 2 / 4; grid-row: 3; }

/* ---------- camber, the scroll-driven figure ---------- */

.camber {
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding-block: var(--sec);
}
.camber__head,
.camber__stage,
.beats {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.camber__head { display: flex; flex-direction: column; gap: 16px; }
.camber__head h2 { font-size: clamp(2rem, 3.7vw, 3.2rem); max-width: 16ch; }
.camber__head p { color: var(--ink-2); max-width: 62ch; }

.camber__stage { margin-block: clamp(28px, 4vw, 52px); }
.beam { width: 100%; height: auto; max-height: 290px; overflow: visible; }

.beam__datum {
  stroke: var(--line-hi);
  stroke-width: 2;
  stroke-dasharray: 9 9;
}
.beam__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 15;
  vector-effect: non-scaling-stroke;
}
.beam__g {
  transform-box: view-box;
  transform-origin: 600px 180px;
  transform: scaleY(1);
  transition: transform 1.7s var(--ease);
}
.beam__sup { fill: var(--ink); }
.beam__ground { stroke: var(--ink); stroke-width: 3; }
.beam__load {
  opacity: 0;
  transition: opacity .9s var(--ease) .25s;
}
.beam__load path {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linecap: square;
}
.beam__cap {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 14px;
}

/* Fallback path: IntersectionObserver adds .beam-go where scroll timelines
   are unsupported. JS only does this when CSS.supports() says it must. */
.beam-go .beam__g   { transform: scaleY(.04); }
.beam-go .beam__load { opacity: 1; }

/* Preferred path: scrub the deflection against the reader's own scroll.
   Motivated, not decorative. The animation IS the explanation. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .beam__g {
      animation: beam-flatten linear both;
      animation-timeline: view();
      animation-range: cover 18% cover 72%;
    }
    .beam__load {
      animation: beam-load linear both;
      animation-timeline: view();
      animation-range: cover 15% cover 45%;
    }
  }
}
@keyframes beam-flatten { from { transform: scaleY(1); } to { transform: scaleY(.04); } }
@keyframes beam-load    { from { opacity: 0; }          to { opacity: 1; } }

.beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
.beat { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--ink); }
.beat__k {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-ink);
}
.beat p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }

/* ---------- work, scroll-snap rail ---------- */

.work { padding-block: var(--sec); }
.work__head {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.work__head h2 { font-size: clamp(2rem, 3.7vw, 3.2rem); }
.work__nav { display: flex; gap: 8px; flex: none; }
.rail-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-hi);
  background: transparent;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn:hover:not([disabled]) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rail-btn[disabled] { opacity: .32; cursor: default; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 336px);
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-inline: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  padding-bottom: 18px;
  scroll-padding-inline-start: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}
.rail:focus-visible { outline-offset: -3px; }
.proj {
  scroll-snap-align: start;
  min-width: 0;
  display: flex;
  flex-direction: column;   /* lets .spec bottom-align across ragged cards */
}
.proj img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--surface);
  margin-bottom: 18px;
}
.proj h3 { font-size: 1.18rem; }
.proj__loc {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accent-ink);
  margin-top: 6px;
}
.proj__d { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin-top: 10px; }
.spec {
  display: flex;
  gap: 30px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.spec dt { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.spec dd { font-family: var(--mono); font-size: 14.5px; color: var(--ink); margin-top: 3px; }

/* ---------- quote ---------- */

.quote {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) var(--sec);
}
.quote blockquote {
  margin: 0;
  border-left: 3px solid var(--accent);
  padding-left: clamp(24px, 3.5vw, 52px);
}
.quote p {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  /* ch resolves against THIS element's display size, not the blockquote's
     inherited body size. 40ch here is ~3 lines for this quote. */
  max-width: 40ch;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.028em;
  font-variation-settings: "wdth" 104;
  text-wrap: balance;
}
.quote footer { margin-top: 26px; display: flex; flex-direction: column; gap: 2px; }
.quote__n { font-weight: 600; font-size: 15.5px; }
.quote__r { font-size: 14.5px; color: var(--ink-2); }

/* ---------- contact ---------- */

.contact {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--sec) var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  border-top: 1px solid var(--line);
}
.contact__copy { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 20px; }
.contact__copy h2 { font-size: clamp(2rem, 3.7vw, 3.2rem); max-width: 15ch; }
.contact__copy > p { color: var(--ink-2); max-width: 50ch; }
.contact__meta { margin-top: 12px; display: flex; flex-direction: column; gap: 20px; }
.contact__meta dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.contact__meta dd { font-size: 16px; line-height: 1.5; }
.contact__meta a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.form, .sent { grid-area: 1 / 2; }
.form {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-hi);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--accent-ink); border-width: 2px; }
.hint { font-size: 13px; color: var(--ink-2); }
.err  { font-size: 13px; color: var(--accent-ink); font-weight: 500; }
.form__err { margin-top: -6px; }

.sent {
  align-self: start;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sent svg { width: 34px; height: 34px; color: var(--accent-ink); margin-bottom: 6px; }
.sent h3 { font-size: 1.5rem; }
.sent p { color: var(--ink-2); }

/* ---------- footer ---------- */

.foot {
  background: var(--surface-2);
  border-top: 3px solid var(--ink);
}
.foot__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(36px, 4vw, 52px) var(--pad) clamp(24px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.foot__brand { display: inline-flex; align-items: center; gap: 10px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 26px; }
.foot__links a {
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.foot__links a:hover { color: var(--ink); }
.foot__note {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 22px var(--pad) clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--line-hi);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
/* Cap the measure on the inner span. Capping the box itself would let
   margin-inline:auto centre it away from the rest of the footer grid. */
.foot__note > span { display: block; max-width: 92ch; }
.foot__note strong { color: var(--ink); }
.foot__note a { color: var(--accent-ink); text-underline-offset: 3px; }

/* ---------- scroll reveal, progressive enhancement ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr .82fr; }
  .hero__h1 { font-size: clamp(1.9rem, 4.4vw, 3.6rem); }
}

@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__in { gap: 12px; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-left: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 4px var(--pad) 16px;
  }
  .nav__links.open { display: flex; }
  .nav__links a { width: 100%; padding: 14px 0; font-size: 16px; border-top: 1px solid var(--line); }
  .nav__cta { margin-left: auto; }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: none;
  }
  .hero__copy {
    order: 1;
    padding: clamp(40px, 7vh, 64px) var(--pad) clamp(32px, 5vh, 48px);
    gap: 22px;
  }
  .hero__media { order: 2; }
  .hero__media img { aspect-ratio: 4 / 3; height: auto; }
  .hero__h1 { max-width: 22ch; }

  .bento { grid-template-columns: 1fr; }
  .cell--lead, .cell--accent, .cell--tex, .cell--wide, .cell:nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
  }
  .cell--lead img { max-height: 260px; }
  .cell--tex img { max-height: 220px; }

  .beats { grid-template-columns: 1fr; gap: 26px; }
  .beam { max-height: 200px; }

  .contact { grid-template-columns: 1fr; }
  .contact__copy { grid-area: auto; }
  .form, .sent { grid-area: auto; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .fig + .fig { border-left: 1px solid var(--line); }
  .fig:nth-child(odd) { border-left: 0; }
  .fig:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .work__head { flex-direction: column; align-items: flex-start; }
  .clients__row { gap: 26px 34px; }
  .clients__row svg { height: 20px; }
  .foot__in { flex-direction: column; align-items: flex-start; }
}

/* Below 480 the bar cannot hold wordmark + CTA + menu button without the
   CTA clipping and shoving the menu button off screen. Move the CTA into
   the panel rather than shrinking three things until all of them are bad. */
.nav__panelcta { display: none; }

@media (max-width: 480px) {
  .nav__cta { display: none; }
  .nav__toggle { margin-left: auto; }
  .mark__word { font-size: 18px; }
  .hero__cta .btn { width: 100%; }

  .nav__links .nav__panelcta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: 14px;
    padding: 0;
    border-top: 0;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 15px;
    font-weight: 600;
  }
}

/* ==========================================================================
   Reduced motion. Everything above MOTION_INTENSITY 3 collapses here.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .js .reveal { opacity: 1; transform: none; }

  /* Hold the beam at a readable mid-deflection instead of animating it.
     The diagram still communicates; it just does not move. */
  .beam__g { transform: scaleY(.42); animation: none !important; }
  .beam__load { opacity: 1; animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}