/* Direction: Swiss grid on a night ground that opens onto day paper; line art with grain (the mark's own bars, the
   construction grid in dusk); no screen treatment. One family (Manrope variable) in two working weights.
   Colours are ONLY the brand palette (~/Tools/brands/dialrise/palette.json). Text pairs used:
   night or ink on day (16+), dawn-deep on day (4.52, links and eyebrows), day on night (16.65),
   dawn on night (6.59), dusk on night (5.83). dawn and dusk are never text on day. */

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #101215;
  --day: #F4F1EC;
  --dawn: #FF6A3D;
  --dawn-deep: #C5401A;
  --dusk: #8A9099;
  --ink: #14161A;
  --paper: #FFFFFF;
  --day-2: color-mix(in srgb, var(--night) 5%, var(--day));
  --night-2: color-mix(in srgb, var(--day) 5%, var(--night));
  --ink-soft: color-mix(in srgb, var(--night) 76%, var(--day));
  --rule-day: color-mix(in srgb, var(--night) 14%, var(--day));
  --rule-night: color-mix(in srgb, var(--day) 14%, var(--night));
  --grid-night: color-mix(in srgb, var(--dusk) 9%, transparent);

  --font: 'Manrope', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --wrap: 1240px;
  --gutter: 20px;
  --radius: 6px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 760px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--day); color: var(--night);
  font-family: var(--font); font-size: 17px; line-height: 1.6; font-weight: 450;
  font-feature-settings: 'ss01' on; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 1080px) { body { font-size: 18px; } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--dawn-deep); outline-offset: 3px; border-radius: 2px; }
.sec--night :focus-visible, .hero :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .band :focus-visible { outline-color: var(--dawn); }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--dawn); color: var(--night); padding: 10px 14px; border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.draft-banner { background: var(--dawn); color: var(--night); font-weight: 700; font-size: 14px; letter-spacing: .02em; text-align: center; padding: 10px var(--gutter); }

/* ---------- type ---------- */
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dawn-deep); margin-bottom: 18px; }
.sec--night .eyebrow, .hero .eyebrow { color: var(--dawn); }
.h2 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.032em; font-weight: 700; max-width: 18ch; text-wrap: balance; }
.h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.012em; font-weight: 700; }
@media (min-width: 1080px) { .h3 { font-size: 21px; } }
.lead { font-size: 19px; line-height: 1.55; max-width: 46ch; }
@media (min-width: 1080px) { .lead { font-size: 21px; } }
.foot { margin-top: 40px; font-size: 15px; color: var(--ink-soft); max-width: 60ch; }
.prose p { max-width: 58ch; font-size: 19px; }
.prose p + p { margin-top: 14px; }
@media (min-width: 1080px) { .prose p { font-size: 21px; } }
.prose a, .legal a, .form__privacy a, .site-footer a { text-underline-offset: 3px; }

/* ---------- buttons: small filled objects, modest corners, 44px catchment on touch ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px; border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, transform .15s var(--ease);
}
.btn::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn--sm::after { top: -4px; bottom: -4px; }
.btn--dawn { background: var(--dawn); color: var(--night); }
.btn--dawn:hover { background: color-mix(in srgb, var(--day) 14%, var(--dawn)); }
.btn--day { background: var(--day); color: var(--night); }
.btn--day:hover { background: var(--paper); }
.btn--night { background: var(--night); color: var(--day); }
.btn--night:hover { background: color-mix(in srgb, var(--day) 12%, var(--night)); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--night); color: var(--day); }
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.brand { display: flex; align-items: center; padding: 8px 0; margin: -8px 0; }
.brand__lockup { height: 28px; width: auto; }
@media (min-width: 1080px) { .site-header__in { min-height: 76px; } .brand__lockup { height: 32px; } }

.menu-btn {
  position: relative; display: none; min-height: 36px; padding: 0 14px; border-radius: var(--radius); border: 0;
  background: var(--night-2); color: var(--day); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.menu-btn::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; gap: 26px; }
.nav__link, .nav__lang { color: var(--day); text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 0; }
.nav__link:hover, .nav__lang:hover { color: var(--dawn); }
.nav__link[aria-current='page'] { color: var(--dawn); }
.nav__lang { color: var(--dusk); }

@media (max-width: 899px) {
  .js .menu-btn { display: inline-flex; align-items: center; }
  .js .nav { display: none; }
  .js .site-header.open .nav {
    display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--night); padding: 8px var(--gutter) 24px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
  }
  .nav { flex-wrap: wrap; gap: 12px 20px; }
  .js .nav__list { flex-direction: column; gap: 0; }
  .js .nav__link, .js .nav__lang { display: block; padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--rule-night); }
  .js .nav .btn { margin-top: 20px; align-self: flex-start; min-height: 40px; font-size: 15px; }
  .site-header:not(.open) .nav, .site-header__in { flex-wrap: wrap; }
}

/* ---------- hero ---------- */
.hero { position: relative; background: var(--night); color: var(--day); overflow: hidden; isolation: isolate; }
.hero__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, var(--grid-night) 1px, transparent 1px);
  background-size: calc((min(100vw, var(--wrap) + var(--gutter) * 2) - var(--gutter) * 2) / 6) 100%;
  background-position: max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 0;
}
@media (min-width: 1080px) { .hero__grid { background-size: calc(min(100vw - var(--gutter) * 2, var(--wrap)) / 12) 100%; } }
.hero::after, .sec--night::after { /* grain */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__in { position: relative; display: grid; gap: 40px; padding-top: 72px; padding-bottom: 80px; }
.hero__h1 { font-size: clamp(40px, 7.4vw, 96px); line-height: 1.0; letter-spacing: -0.042em; font-weight: 750; max-width: 13ch; text-wrap: balance; }
.hero__sub { margin-top: 24px; font-size: 19px; line-height: 1.5; color: color-mix(in srgb, var(--day) 88%, var(--night)); max-width: 40ch; }
.hero__sub + .hero__sub { margin-top: 10px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__status { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; font-size: 15px; color: var(--dusk); max-width: 48ch; }
.hero__status .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dawn); transform: translateY(-1px); }
@media (min-width: 1080px) {
  .hero__in { padding-top: 104px; padding-bottom: 120px; }
  .hero__sub { font-size: 22px; }
}

/* subpages: the mark as a still ghost in dusk, desktop only */
.hero__ghost { display: none; }
@media (min-width: 900px) {
  .hero:not(.hero--home) .hero__in { grid-template-columns: 8fr 4fr; align-items: center; }
  .hero__ghost { display: block; justify-self: end; width: 100%; max-width: 300px; opacity: .2; }
  .hero-mark--ghost line { stroke: var(--dusk); }
}

/* home: the intro (v4). A 3D night city on a WebGL canvas (src/hero3d.js, lazy-loaded by intro.js), the call, and
   the mark (the real file) it becomes. Phone: the scene is a band above the copy, the first thing seen. Desktop: the
   scene fills the hero, transparent across the copy column, so the headline sits on the page's own ground.
   v4: no box. The scene is feathered into the page on eased ramps (never a straight gradient end, which reads as an
   edge): from the copy column to just before the mark (hero3d.js measures --fx0 and --fx1), down from the top under
   the nav, and out at the foot. It sits UNDER the hero's grid lines and grain, so text and city share one canvas.
   The canvas shows only while the intro runs; every end state is the SVG mark on the page's own night. */
.hero--home .hero__art { position: relative; order: -1; margin: 0 calc(var(--gutter) * -1); height: clamp(260px, 74vw, 340px); --mark: clamp(132px, 40vw, 190px); }
.hero--home .hero__in { padding-top: 0; gap: 8px; }
.hero__stage {
  position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity .45s ease; pointer-events: none;
  /* eased ramps: the stops trace a smoothstep, so the fade has no corner for the eye to catch */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.16) 5%, rgba(0,0,0,.5) 10%, rgba(0,0,0,.84) 15%, #000 20%, #000 80%, rgba(0,0,0,.84) 85%, rgba(0,0,0,.5) 90%, rgba(0,0,0,.16) 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.16) 5%, rgba(0,0,0,.5) 10%, rgba(0,0,0,.84) 15%, #000 20%, #000 80%, rgba(0,0,0,.84) 85%, rgba(0,0,0,.5) 90%, rgba(0,0,0,.16) 95%, transparent 100%);
}
.hero__gl { display: block; width: 100%; height: 100%; }
.hero--home.is-3d:not(.done) .hero__stage { opacity: 1; transition-duration: .3s; }
.hero__markbox { position: absolute; left: 50%; top: 50%; width: var(--mark); aspect-ratio: 1; transform: translate(-50%, -50%); }
.hero-mark { position: relative; width: 100%; height: 100%; overflow: visible; }
.js .hero--home:not(.done) .hero__markbox { opacity: 0; }
/* the hand-off (v4): once the mark has resolved, one line of dawn light runs under the headline's last words, right to
   left (from the mark's side), and fades. intro.js writes --ul-x (its offset, in its own widths) and --ul-a from the
   scene's clock; outside the intro neither is set, so it is invisible. It never takes a click. */
.hero__accent { position: relative; white-space: nowrap; }
.hero__accent::after {
  content: ''; position: absolute; left: 0; bottom: -0.04em; width: 38%; height: max(2px, 0.045em); border-radius: 999px;
  background: linear-gradient(to right, var(--dawn), color-mix(in srgb, var(--dawn) 55%, transparent) 55%, transparent);
  opacity: 0; transform: translateX(calc(var(--ul-x, 2) * 100%)); pointer-events: none;
}
.hero--home.playing .hero__accent::after { opacity: var(--ul-a, 0); }
/* fail-safe: if intro.js never runs at all, the mark still arrives (intro.js adds .armed and owns every other case) */
.js .hero--home:not(.done):not(.armed) .hero__markbox { animation: dr-failsafe .4s ease 9s forwards; }
@keyframes dr-failsafe { to { opacity: 1; } }
@media (min-width: 900px) {
  .hero--home .hero__in { position: static; grid-template-columns: minmax(0, 7fr) 5fr; min-height: 640px; align-items: center; padding-top: 96px; padding-bottom: 112px; }
  .hero--home .hero__art { position: absolute; top: 0; right: 0; bottom: 0; width: 46vw; height: auto; margin: 0; order: 0; --mark: clamp(240px, 23vw, 360px); }
  .hero--home .hero__stage {
    left: auto; right: 0; width: 100vw;
    --fx0: 50%; --fx1: 72%;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, transparent var(--fx0), rgba(0,0,0,.05) calc(var(--fx0) + (var(--fx1) - var(--fx0)) * .15), rgba(0,0,0,.16) calc(var(--fx0) + (var(--fx1) - var(--fx0)) * .3), rgba(0,0,0,.5) calc(var(--fx0) + (var(--fx1) - var(--fx0)) * .55), rgba(0,0,0,.84) calc(var(--fx0) + (var(--fx1) - var(--fx0)) * .8), #000 var(--fx1)),
      linear-gradient(to bottom, transparent 0, rgba(0,0,0,.16) 6%, rgba(0,0,0,.5) 13%, rgba(0,0,0,.84) 20%, #000 27%, #000 84%, rgba(0,0,0,.5) 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, transparent var(--fx0), rgba(0,0,0,.05) calc(var(--fx0) + (var(--fx1) - var(--fx0)) * .15), rgba(0,0,0,.16) calc(var(--fx0) + (var(--fx1) - var(--fx0)) * .3), rgba(0,0,0,.5) calc(var(--fx0) + (var(--fx1) - var(--fx0)) * .55), rgba(0,0,0,.84) calc(var(--fx0) + (var(--fx1) - var(--fx0)) * .8), #000 var(--fx1)),
      linear-gradient(to bottom, transparent 0, rgba(0,0,0,.16) 6%, rgba(0,0,0,.5) 13%, rgba(0,0,0,.84) 20%, #000 27%, #000 84%, rgba(0,0,0,.5) 92%, transparent 100%);
    mask-composite: intersect;
  }
  .hero--home .hero__copy { position: relative; z-index: 1; }
}

/* ---------- sections ---------- */
.sec { position: relative; padding: 80px 0; }
@media (min-width: 1080px) { .sec { padding: 128px 0; } }
.sec--day + .sec--day { padding-top: 0; }
.sec--day + .sec--day .wrap { border-top: 1px solid var(--rule-day); padding-top: 64px; }
@media (min-width: 1080px) { .sec--day + .sec--day .wrap { padding-top: 96px; } }
.sec--night { background: var(--night); color: var(--day); overflow: hidden; isolation: isolate; }
.sec--night .foot { color: var(--dusk); }

/* steps: Swiss numerals over a structural rule */
.steps { display: grid; gap: 40px; margin-top: 48px; counter-reset: s; }
.step { padding-top: 20px; border-top: 2px solid var(--night); }
.step__n { display: block; font-size: 15px; font-weight: 700; color: var(--dawn-deep); letter-spacing: .04em; margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.step p { margin-top: 10px; color: var(--ink-soft); max-width: 36ch; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px; } }

/* compliance rules on night */
.rules { display: grid; gap: 48px; }
.rules__head .lead { margin-top: 24px; color: color-mix(in srgb, var(--day) 86%, var(--night)); }
.rules__list { display: grid; gap: 0; }
.rule { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--rule-night); }
.rule:last-child { border-bottom: 1px solid var(--rule-night); }
.rule .h3 { display: flex; align-items: baseline; gap: 14px; }
.rule .h3::before { content: ''; flex: none; width: 10px; height: 3px; border-radius: 2px; background: var(--dawn); transform: translateY(-5px) rotate(-45deg); }
.rule p { color: color-mix(in srgb, var(--day) 80%, var(--night)); padding-left: 24px; max-width: 52ch; }
.rules__foot { margin-top: 0; }
@media (min-width: 1080px) {
  .rules { grid-template-columns: 5fr 7fr; column-gap: 80px; }
  .rule { grid-template-columns: 15em 1fr; gap: 24px; }
  .rule p { padding-left: 0; }
  .rules__foot { grid-column: 2; }
}

/* the two paths */
.paths { display: grid; gap: 16px; margin-top: 48px; }
.path { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--paper); border-radius: 10px; padding: 32px 28px; }
.path .eyebrow { margin-bottom: 4px; }
.path__h { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; }
.path p:not(.eyebrow) { color: var(--ink-soft); max-width: 40ch; flex: 1; }
.path .btn { margin-top: 12px; }
@media (min-width: 760px) { .paths { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; } .path { padding: 44px 40px; } }

/* band */
.band__in { display: grid; gap: 28px; align-items: end; }
.band .lead { margin-top: 16px; color: color-mix(in srgb, var(--day) 86%, var(--night)); }
@media (min-width: 900px) { .band__in { grid-template-columns: 1fr auto; } }

/* split: heading left, content right */
.split { display: grid; gap: 32px; }
@media (min-width: 1080px) { .split { grid-template-columns: 5fr 7fr; column-gap: 80px; } }
.deflist { display: grid; gap: 0; }
.deflist__row { padding: 22px 0; border-top: 1px solid var(--rule-day); }
.deflist__row:first-child { border-top: 2px solid var(--night); }
.deflist dd { margin-top: 6px; color: var(--ink-soft); max-width: 52ch; }

/* faq */
.faq__item { border-top: 1px solid var(--rule-day); }
.faq__item:first-child { border-top: 2px solid var(--night); }
.faq__item:last-child { border-bottom: 1px solid var(--rule-day); }
.faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--dawn-deep); border-bottom: 2px solid var(--dawn-deep); transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease); }
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-1px); }
.faq__a { padding: 0 0 22px; color: var(--ink-soft); max-width: 58ch; }

/* legal drafts */
.legal { display: grid; gap: 36px; max-width: 760px; }
.legal__item p { margin-top: 8px; color: var(--ink-soft); }

/* ---------- form ---------- */
.form { max-width: 760px; display: grid; gap: 28px; }
.form__row { display: grid; gap: 20px; }
@media (min-width: 760px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field--short { max-width: 320px; }
.label { font-size: 15px; font-weight: 700; padding: 0; }
.opt { font-weight: 500; color: var(--ink-soft); }
.input {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--night) 34%, var(--day)); background: var(--paper); color: var(--night);
  font: inherit; font-size: 16px; line-height: 1.4;
}
textarea.input { resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--night) 50%), linear-gradient(135deg, var(--night) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.input:focus-visible { outline: 2px solid var(--dawn-deep); outline-offset: 1px; border-color: var(--night); }
.input[aria-invalid='true'] { border-color: var(--dawn-deep); box-shadow: inset 0 0 0 1px var(--dawn-deep); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: var(--radius); background: var(--paper); border: 1px solid color-mix(in srgb, var(--night) 22%, var(--day)); cursor: pointer; font-size: 15px; font-weight: 600; }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--night); }
.choice:has(input:checked) { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night); }
.choice:has(input:focus-visible) { outline: 2px solid var(--dawn-deep); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.field--choices[aria-invalid='true'] .choice { border-color: var(--dawn-deep); }
.group { border: 0; margin: 0; padding: 28px; background: var(--day-2); border-radius: 10px; display: grid; gap: 20px; min-width: 0; }
.group__legend { float: left; width: 100%; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dawn-deep); padding: 0; margin-bottom: 4px; }
.group__legend + * { clear: both; }
.js .group[hidden] { display: none; }
.form__nojs { font-size: 15px; color: var(--ink-soft); }
.js .form__nojs { display: none; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--night); }
.consent[aria-invalid='true'] span { color: var(--dawn-deep); }
.form__privacy { font-size: 15px; margin-top: -12px; }
.form__privacy a { color: var(--dawn-deep); font-weight: 600; }
.form__msg { font-size: 16px; font-weight: 600; min-height: 1.6em; }
.form__msg.is-error { color: var(--dawn-deep); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: var(--day); padding: 64px 0 40px; border-top: 1px solid var(--rule-night); }
.site-footer__in { display: grid; gap: 40px; }
.site-footer__lockup { height: 30px; width: auto; }
.site-footer__endorse { margin-top: 10px; font-size: 14px; color: var(--dusk); padding-left: 2px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.site-footer__nav a { display: inline-block; padding: 10px 0; text-decoration: none; font-weight: 600; font-size: 15px; }
.site-footer__nav a:hover, .site-footer__links a:hover { color: var(--dawn); }
.site-footer__legal { display: grid; gap: 12px; font-size: 14px; color: var(--dusk); max-width: 70ch; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-footer__links a { display: inline-block; padding: 8px 0; color: var(--day); }
@media (min-width: 1080px) {
  .site-footer__in { grid-template-columns: 4fr 8fr; column-gap: 80px; }
  .site-footer__legal { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
  .hero__accent::after { display: none; }
}