/* We Are Ascension: the link-in-bio page. Quiet luxury, taken from the two scenes: a warm brown ink, a bronze accent
   (deeper on the Empire State, whose office is mahogany) and champagne gold on the dark office. Cormorant Garamond for
   the headlines, Jost for everything else. The climb fills the whole screen on every screen, behind the whole page, and
   the form waits on the top floor, on a pane of smoked glass. Self-hosted fonts, no requests to other sites. */

@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }

:root {
  --paper: #f4efe7;
  --paper-2: #ebe3d7;
  --card: #fbf8f3;
  --line: #ddd2c3;
  --line-2: #c9bba8;
  --ink: #221c16;
  --ink-2: #5a4f45;
  --ink-3: #887d71;
  --on-photo: #fbf8f3;
  --accent: #9c7f5c;
  --accent-ink: #6e5638;
  --sand: #dcc4a0;  /* the accent on the dark office */
  --gold-fill: linear-gradient(135deg, #f1e2bd, #d6b67c 48%, #b38f52);
  --gold-ink: #1d150c;
  --error-glass: #f3b6a2;  /* the error on the dark glass */
  --sky: #84afc8;
  --error: #a3452e;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-scene="empire"] {
  --accent: #8e5f3e;
  --accent-ink: #6b4329;
  --sky: #6f97b4;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  padding: 0.6rem 1rem; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---------- Type ---------- */

.kicker {
  margin: 0 0 1.1rem;
  color: var(--accent-ink);
  font: 500 0.78rem/1.3 var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; }
h1 em, h2 em { font-style: italic; color: var(--accent-ink); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.1rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font: 500 0.8rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.2s var(--ease), filter 0.3s var(--ease);
}
.btn:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
}
.btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
.btn--sm { min-height: 2.5rem; padding: 0.65rem 1.15rem; font-size: 0.72rem; }
/* The gold buttons: the Start on the hero and WhatsApp at the office. */
.intro__copy .btn,
.wa-cta .btn { border-color: transparent; background: var(--gold-fill); background-origin: border-box; color: var(--gold-ink); }
@media (hover: hover) and (pointer: fine) {
  .intro__copy .btn:hover,
  .wa-cta .btn:hover { border-color: transparent; background: var(--gold-fill); background-origin: border-box; filter: brightness(1.08); }
}
.btn--ghost { background: transparent; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}
.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 0.25em;
}
.link:hover { text-decoration-color: var(--accent); }

/* ---------- The way in: the page arrives as the black lifts ---------- */

/* The logo and the black have their styles in the <head> of index.html, so they wait for nothing. Here, the hero comes in
   line by line, then the header. */
html.js .top,
html.js .intro__copy > * { transition: opacity 1s var(--ease), transform 1s var(--ease); }
html[data-splash="on"] .top,
html[data-splash="on"] .intro__copy > * { opacity: 0; transform: translateY(1rem); }
html[data-splash="out"] .intro__copy > :nth-child(1) { transition-delay: 0.2s; }
html[data-splash="out"] .intro__copy > :nth-child(2) { transition-delay: 0.3s; }
html[data-splash="out"] .intro__copy > :nth-child(3) { transition-delay: 0.4s; }
html[data-splash="out"] .intro__copy > :nth-child(4) { transition-delay: 0.5s; }
html[data-splash="out"] .top { transition-delay: 0.6s; }

/* ---------- The scene: the whole screen, on every screen ---------- */

/* Behind the whole page. The poster (the first frame) is there before anything loads; the canvas, with the frames' own
   size, is stretched over it by the graphics card. Cover on every screen: no sides, no frame, no blur. */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #15110d;
}
.scene__poster,
.scene__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* The page opened before the first frame came (very slow connections): plain dark, then the whole picture fades in. */
.scene__poster { transition: opacity 0.8s var(--ease); }
html[data-late] .scene__poster { opacity: 0; transition: none; }
.scene__canvas { opacity: 0; transition: opacity 0.4s var(--ease); }
.scene__canvas[data-state="ready"] { opacity: 1; }
/* Shade for the text on the picture: the header at the top and the hero at the bottom. In the office the left side
   darkens a little more, for the welcome. Opacity only, so the graphics card does the fade. */
.scene__shade,
.scene__shade::after {
  position: absolute;
  inset: 0;
  transition: opacity 0.8s var(--ease);
}
.scene__shade {
  background:
    linear-gradient(to bottom, rgb(20 16 12 / 0.45), transparent 24%),
    linear-gradient(to top, rgb(20 16 12 / 0.7), rgb(20 16 12 / 0.25) 38%, transparent 60%);
}
.scene__shade::after {
  content: "";
  background:
    linear-gradient(to right, rgb(16 12 9 / 0.55), rgb(16 12 9 / 0.15) 65%, transparent),
    rgb(16 12 9 / 0.2);
  opacity: 0;
}
html.at-top .scene__shade::after { opacity: 1; }

/* ---------- Header: on the picture ---------- */

.top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--gutter);
  color: var(--on-photo);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
  font: 600 1.3rem/1 var(--serif);
  letter-spacing: 0.02em;
  text-shadow: 0 0 1em rgb(20 16 12 / 0.45);
}
.brand__mark { width: 1.6rem; height: 1.6rem; }
.top .btn--sm { border-color: rgb(251 248 243 / 0.7); background: transparent; color: var(--on-photo); }
@media (hover: hover) and (pointer: fine) {
  .top .btn--sm:hover { border-color: var(--on-photo); background: var(--on-photo); color: var(--ink); }
}
@media (max-width: 420px) {
  .top .btn--sm { display: none; }
}

/* ---------- The climb: the hero and the lines on the way up ---------- */

main { position: relative; z-index: 2; }

/* Without JavaScript the hero is one screen and the form follows; with it, the hero is the start of a tall climb and
   stays on screen while the scroll picks the frame. */
.rise { position: relative; }
html.js .rise { height: 320svh; }
.rise__sticky {
  position: relative;
  display: grid;
  overflow: clip; /* the halos behind the lines must not widen the page on a narrow phone */
  min-height: 100svh;
  padding: 6rem var(--gutter) clamp(2rem, 7svh, 4.5rem);
  color: var(--on-photo);
}
html.js .rise__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
}
.rise__sticky > * { grid-area: 1 / 1; }

.intro__copy {
  position: relative;
  isolation: isolate;
  align-self: end;
  max-width: 36rem;
  text-shadow: 0 0.05em 1em rgb(20 16 12 / 0.4);
}
/* A soft dark halo under the hero keeps it readable over bright glass; it fades with the hero. */
.intro__copy::before {
  content: "";
  position: absolute;
  inset: -35% -45% -25% -35%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(20 16 12 / 0.5), rgb(20 16 12 / 0.22) 60%, transparent);
  pointer-events: none;
}
.intro__copy .btn { text-shadow: none; }
.intro__copy .kicker { color: rgb(251 248 243 / 0.92); }
.intro__copy h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2.7rem, min(1.6rem + 5.2vw, 12.5svh), 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.intro__copy h1 em { color: inherit; }
.intro__copy .lead { max-width: 27rem; margin: 0 0 1.75rem; font-weight: 300; font-size: 1.1rem; }
.intro__copy .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.rise__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: rgb(251 248 243 / 0.85);
  font: 500 0.72rem/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.rise__cue::before {
  content: "";
  width: 1px;
  height: 2rem;
  background: currentColor;
  transform-origin: top;
  animation: cue 2s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); opacity: 1; }
  55% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
html:not(.js) .rise__cue { display: none; }

html.js .intro__copy { will-change: opacity, transform; }

.rise__skip {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 5;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgb(251 248 243 / 0.7);
  border-radius: 2px;
  background: rgb(20 16 12 / 0.25);
  color: var(--on-photo);
  font: 500 0.72rem/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
html[data-phase="rising"] .rise__skip { opacity: 1; visibility: visible; }
html:not(.js) .rise__skip { display: none; }

/* ---------- The top floor: the contact, over the office ---------- */

.contact-section {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: clamp(5rem, 12svh, 7rem) var(--gutter) 3rem;
}
.contact-panel {
  display: grid;
  gap: 2rem;
  width: min(100%, 40rem);
  margin-inline: auto;
}
/* The welcome sits on the picture, in ivory; the form is a pane of smoked glass with a gold edge. */
.contact-intro { color: var(--on-photo); text-shadow: 0 0 1.4em rgb(16 12 9 / 0.55); }
.contact-intro .kicker { color: var(--sand); }
.contact-intro h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(2.5rem, min(1.5rem + 3.4vw, 9.5svh), 4.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.contact-intro h2 em { color: var(--sand); }
.contact-intro h2:focus { outline: none; }
.contact-intro > p:not(.kicker) { max-width: 30rem; margin: 0; color: rgb(251 248 243 / 0.88); font-weight: 300; font-size: 1.1rem; }
.wa-cta { display: grid; justify-items: start; gap: 0.55rem; margin-top: 1.6rem; }
.wa-cta .btn { text-shadow: none; }
.wa-cta__note { margin: 0; color: rgb(251 248 243 / 0.75); font-size: 0.95rem; }

/* The pane. --row, --field and --note set its height: a wide screen shrinks them with the window, so the whole form fits. */
.form-card {
  --row: 1.15rem;
  --field: 2.75rem;
  --note: 6.5rem;
  position: relative;
  container-type: inline-size;
  padding: clamp(1.6rem, 5vw, 2.25rem);
  border-radius: 3px;
  background:
    linear-gradient(150deg, rgb(255 238 205 / 0.1), rgb(255 238 205 / 0.02) 34%, transparent 58%),
    rgb(20 15 10 / 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 240 210 / 0.14);
  color: var(--on-photo);
  color-scheme: dark;
}
/* Two gold lines: the bevelled edge, brighter where the light falls on it, and a fine rule inside, as on an etched pane. */
.form-card::before,
.form-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
.form-card::before { inset: 0.5rem; border: 1px solid rgb(216 188 138 / 0.16); }
.form-card::after {
  inset: 0;
  padding: 1px;
  background: linear-gradient(140deg, rgb(241 226 189 / 0.9), rgb(216 188 138 / 0.3) 32%, rgb(216 188 138 / 0.14) 66%, rgb(241 226 189 / 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.form-card :focus-visible { outline-color: var(--sand); }

.form-card__or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 var(--row);
  color: var(--sand);
  font: 500 0.68rem/1.3 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.form-card__or::before,
.form-card__or::after { content: ""; flex: 1; height: 1px; background: rgb(216 188 138 / 0.28); }

/* A wide screen: the welcome on the left, the form on the right, the office all around, and everything on one screen, the
   footer too. */
@media (min-width: 1000px) {
  .contact-section { padding: clamp(0.75rem, 3svh, 2.5rem) clamp(2rem, 6vw, 6rem) 3.25rem; }
  .contact-panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
    width: min(100%, 76rem);
  }
  .form-card {
    --row: clamp(0.5rem, 1.7svh, 1.05rem);
    --field: clamp(1.9rem, 4.6svh, 2.6rem);
    --note: clamp(2.5rem, 8.5svh, 5rem);
    padding: clamp(1.15rem, 3.4svh, 2.1rem) clamp(1.6rem, 2.8vw, 2.6rem);
  }
}

/* ---------- The form ---------- */

.request {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--row) 1.6rem;
}
/* `display` above would override the hidden attribute: after sending, the form must really go. */
.form-card [hidden] { display: none !important; }
@container (max-width: 30rem) {
  .request { grid-template-columns: minmax(0, 1fr); }
}
.field { display: grid; align-content: start; gap: 0.1rem; min-width: 0; margin: 0; }
.field--wide { grid-column: 1 / -1; }
.field label,
.chips legend {
  color: rgb(226 205 168 / 0.92);
  font: 500 0.66rem/1.3 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.field__opt { color: rgb(251 248 243 / 0.68); font-weight: 400; letter-spacing: 0.06em; text-transform: none; }
/* No boxes: a line under each field, which turns gold as you write on it. */
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--field);
  padding: 0.3rem 0;
  border: 0;
  border-bottom: 1px solid rgb(216 188 138 / 0.38);
  border-radius: 0;
  background-color: transparent;
  color: var(--on-photo);
  font: 300 1rem/1.4 var(--sans);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { display: block; height: var(--note); resize: none; }
.field select {
  appearance: none;
  padding-right: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23dcc4a0' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  background-size: 0.9rem;
}
.field select:invalid { color: rgb(251 248 243 / 0.68); }
.field option { background: #1b140e; color: var(--on-photo); }
.field ::placeholder { color: rgb(251 248 243 / 0.66); opacity: 1; }
.field :is(input, select, textarea):hover { border-bottom-color: rgb(216 188 138 / 0.65); }
.field :is(input, select, textarea):focus-visible {
  outline: none;
  border-bottom-color: var(--sand);
  box-shadow: 0 1px 0 var(--sand);
}
/* The browser's autofill would paint a pale box on the glass. */
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--on-photo);
  caret-color: var(--on-photo);
  transition: background-color 100000s, color 100000s;
}
.field [aria-invalid="true"] { border-bottom-color: var(--error-glass); }
.field__error { margin: 0.2rem 0 0; color: var(--error-glass); font-size: 0.82rem; line-height: 1.3; }

/* What do you need: checkboxes drawn as chips. The real checkbox stays on top of each chip, invisible, so a click,
   a tap and the keyboard all reach it. */
.chips { display: grid; gap: 0.2rem; padding: 0; border: 0; }
.chips legend { padding: 0; margin-bottom: 0.45rem; }
.chips__list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { position: relative; display: inline-flex; }
/* More specific than `.field label`, which would set the chips in spaced capitals like the field labels. */
.chips .chip { letter-spacing: normal; text-transform: none; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgb(216 188 138 / 0.32);
  border-radius: 2px;
  background: transparent;
  color: rgb(251 248 243 / 0.86);
  font: 400 0.86rem/1 var(--sans);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip input:checked + span { border-color: transparent; background: var(--gold-fill); color: var(--gold-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover span { border-color: var(--sand); color: var(--on-photo); }
  .chip:hover input:checked + span { border-color: transparent; color: var(--gold-ink); }
}
.chips.is-invalid .chip span { border-color: var(--error-glass); }
@media (min-width: 1000px) {
  .chip span { min-height: clamp(1.9rem, 4.2svh, 2.3rem); }
}

/* Gold is for the main way in: WhatsApp. Send is a gold line that fills under the pointer. */
.request__send {
  grid-column: 1;
  justify-self: start;
  border-color: var(--sand);
  background: transparent;
  color: var(--sand);
}
@media (hover: hover) and (pointer: fine) {
  .request__send:hover { border-color: transparent; background: var(--gold-fill); color: var(--gold-ink); }
}
.request__send[disabled] { opacity: 0.6; cursor: progress; }
.request__privacy,
.request__status { margin: 0; }
.request__privacy { align-self: center; color: rgb(251 248 243 / 0.72); font-size: 0.78rem; line-height: 1.4; }
.request__status { grid-column: 1 / -1; font-size: 0.9rem; line-height: 1.35; }
.request__privacy a,
.request__status a { color: var(--on-photo); text-decoration-color: var(--sand); text-underline-offset: 0.2em; }
.request__status:empty { display: none; }
.request__status[data-tone="error"] { color: var(--error-glass); }
.hp { display: none !important; }

.request__done h3 { margin: 0 0 0.6rem; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); line-height: 1.05; }
.request__done p { margin: 0; color: rgb(251 248 243 / 0.82); }
.request__done:focus { outline: none; }


/* ---------- Footer: on the picture ---------- */

.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 1.5rem var(--gutter) 2.5rem;
  color: var(--on-photo);
  font-size: 0.9rem;
  text-shadow: 0 0 1em rgb(20 16 12 / 0.6);
}
.site-footer p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 0 auto; padding: 0; list-style: none; }
.footer-links a { color: inherit; text-decoration: none; opacity: 0.85; }
.footer-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.25em; }
@media (max-width: 640px) {
  .footer-links { flex-basis: 100%; margin-left: 0; }
}
/* A wide screen: the footer sits on the last line of the office's screen. */
@media (min-width: 1000px) {
  .site-footer { margin-top: -3rem; padding: 0.75rem clamp(2rem, 6vw, 6rem); font-size: 0.82rem; line-height: 1.4; }
}

/* ---------- Legal pages: plain paper, no scene ---------- */

.legal-page .top { position: relative; color: var(--ink); }
.legal-page .brand { text-shadow: none; }
.legal {
  width: min(100% - 2 * var(--gutter), 44rem);
  margin: 0 auto;
  padding-block: 1.5rem 5rem;
  color: var(--ink-2);
}
.legal h1 { margin: 0 0 1.5rem; color: var(--ink); font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); line-height: 1; }
.legal h2 { margin: 2.25rem 0 0.6rem; color: var(--ink); font-size: 1.6rem; }
.legal ul { padding-left: 1.2rem; }
.legal .todo { color: var(--error); font-weight: 500; }
.legal__back { display: inline-block; margin-top: 3rem; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  /* No climb: the hero is one screen, with the form right below it. */
  html.js .rise { height: auto; }
  html.js .rise__sticky { position: relative; }
}