/* ==========================================================================
   White Crow® — section styles
   Order matches the document: hero, scroll-lit blocks, work, services,
   testimonials, about, cta, footer.
   ========================================================================== */

/* --- 01 hero --------------------------------------------------------------- */

/* The section is full-bleed so the glow is clipped at the viewport edge, not
   at the content column. The column constraint lives on .hero__inner. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sp-6);
  padding-block: calc(var(--sp-10) + 2vw) var(--sp-7);
}

/* Slow-drifting light behind the headline. Pure CSS — no WebGL in v1.
   Anchored up and right of centre so the light reads as originating over the
   highlighted word in the H1 rather than sitting dead centre. */
.hero__glow {
  position: absolute;
  z-index: -1;
  top: 34%; left: 48%;
  width: min(86vw, 780px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  /* Tight falloff so the light pools on the highlighted word instead of
     washing the whole hero. Stops fade to a zero-alpha of the same hue —
     the `transparent` keyword would interpolate through black. */
  background: radial-gradient(circle at 50% 50%,
    rgba(127, 168, 201, 0.28) 0%,
    rgba(127, 168, 201, 0.14) 20%,
    rgba(127, 168, 201, 0.05) 38%,
    rgba(127, 168, 201, 0.01) 54%,
    rgba(127, 168, 201, 0.00) 68%);
  filter: blur(46px);
  animation: hero-drift 26s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}

@keyframes hero-drift {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.09); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow { animation: none; }
}

.hero__headline {
  align-self: center;
  font-size: var(--display-md);
  /* Line breaks are forced with <br> in the markup; splitLines honours them. */
}

.hero__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--sp-5);
}

.hero__quote {
  max-width: 56ch;
  display: grid;
  gap: var(--sp-3);
}
.hero__quote blockquote {
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.55;
  color: var(--wc-mute);
  text-wrap: pretty;
}
.hero__quote figcaption {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wc-faint);
}

.hero__cue {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wc-mute);
  white-space: nowrap;
}
.hero__cue-line {
  display: block;
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, var(--wc-accent), transparent);
  animation: cue-pulse 2.4s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes cue-pulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cue-line { animation: none; transform: scaleY(1); }
}

@media (max-width: 720px) {
  .hero__foot { grid-template-columns: 1fr; }
  .hero__cue { display: none; }
  /* No-JS fallback: the headline is centred here, so the word sits mid-screen. */
  .hero__glow { top: 42%; left: 50%; }
}

/* --- 02/03 scroll-lit statement blocks -------------------------------------
   Words start dim and are lit as scroll progress passes them. Used twice:
   once for the short lead statement, once for the longer position block.
   -------------------------------------------------------------------------- */

.lit-section {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  /* Tighter than --section-y: these are pinned, so the padding competes with
     the text for the one viewport the block gets. */
  padding-block: var(--sp-7);
}

.lit-text {
  font-family: var(--font-text);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -0.015em;
  display: grid;
  gap: 0.85em;
  text-align: center;
  margin-inline: auto;
}

.lit-text--lead {
  font-size: clamp(1.7rem, 1rem + 3.1vw, 3.8rem);
  max-width: 20ch;
  text-wrap: balance;
}

/* Same size as the lead. This block carries two paragraphs, so the vh cap
   stops a short viewport from pushing the pinned text off screen — without it
   this runs ~10 lines and overflows below roughly 900px tall. */
.lit-text--body {
  font-size: min(clamp(1.7rem, 1rem + 3.1vw, 3.8rem), 6.2vh);
  max-width: 34ch;
  text-wrap: pretty;
}

.lit-text .word {
  color: var(--wc-faint);
  transition: color 0.3s linear;
}
.lit-text .word.is-lit { color: var(--wc-ink); }
.lit-text .word.is-key.is-lit {
  color: var(--wc-accent);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}
/* data-fade blocks: after every word is lit, continued scrolling recedes the
   words into the page, the same blend tone the hero headline uses. */
.lit-text .word.is-faded,
.lit-text .word.is-key.is-faded { color: var(--wc-blend); }

/* With motion off there is no scrub, so show the finished state. */
@media (prefers-reduced-motion: reduce) {
  .lit-text .word { color: var(--wc-ink); }
  .lit-text .word.is-key { color: var(--wc-accent); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
}

/* --- 04 work (pinned horizontal rail) -------------------------------------- */

.work {
  position: relative;
  background: var(--wc-sunk);
  padding-block: var(--section-y);
}

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.work__title { font-size: var(--display-sm); }

/* While the rail is pinned the whole section has to fit a single viewport,
   otherwise the card captions sit below the fold for the entire pin. Added by
   scroll.js only when the rail actually pins. */
.work--pinned {
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-6);
  overflow: hidden;
}
/* Heading matches the services and testimonials headings; the rail below
   takes whatever height is left (see the .work--pinned .case rule). */
.work--pinned .work__head { margin-bottom: var(--sp-7); }
.work--pinned .work__hint { margin-top: var(--sp-4); }

/* Card size is driven by the space left over, keeping roughly a 4:5 frame. */
.work--pinned .case { width: clamp(240px, calc((100svh - 28rem) * 0.8), 500px); }
.work--pinned .case__frame {
  aspect-ratio: auto;
  height: clamp(300px, calc(100svh - 28rem), 620px);
}

.work__viewport { overflow: hidden; }

.work__track {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.5rem);
  padding-inline: var(--gutter);
  width: max-content;
  will-change: transform;
}

.case {
  position: relative;
  flex: none;
  width: clamp(280px, 40vw, 620px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* children never widen the card */
  gap: var(--sp-4);
}

.case__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--wc-raise);
  border: var(--border);
}

.case__metric {
  position: absolute;
  left: 0; bottom: 0;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(7, 7, 11, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--wc-line);
  border-right: 1px solid var(--wc-line);
  min-width: 58%;
}
.case__metric-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 0.95;
  color: var(--wc-accent);
  font-variant-numeric: tabular-nums;
}
.case__metric-label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wc-mute);
}

.case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}
.case__client { font-size: var(--step-1); font-weight: 500; }
.case__sector {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wc-faint);
  flex: none;
}
.case__line { color: var(--wc-mute); font-size: var(--step--1); max-width: 42ch; }

.work__hint {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wc-faint);
}

/* Fallback when the rail is not pinned (small screens / reduced motion):
   a native horizontal scroller with snap. */
.work__viewport.is-native {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);   /* snap to the gutter, not the edge */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.work__viewport.is-native .work__track { width: auto; }
.work__viewport.is-native .case { scroll-snap-align: start; }

/* Before / after slider inside a case frame. The after image is the base;
   the before image is clipped to the left of --pos. A transparent range
   input over the whole frame does the dragging, so it works with a mouse,
   touch and keyboard without any custom pointer code. */
.compare {
  position: absolute; inset: 0;
  overflow: hidden;
  user-select: none;
}
.compare__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.compare__img--before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--wc-ink);
  box-shadow: 0 0 0 1px rgba(7, 7, 11, 0.35);
  pointer-events: none;
}
.compare__handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 2.6rem; height: 2.6rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--wc-ink);
  background-image:
    linear-gradient(var(--wc-void), var(--wc-void)),
    linear-gradient(var(--wc-void), var(--wc-void));
  background-size: 2px 0.9rem, 2px 0.9rem;
  background-position: calc(50% - 0.35rem) 50%, calc(50% + 0.35rem) 50%;
  background-repeat: no-repeat;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  animation: compare-pulse 2.4s ease-in-out infinite;
}
/* A slight breathe on the handle so it reads as something to drag.
   Stops once the slider has been used. */
@keyframes compare-pulse {
  0%, 100% { transform: translate(0, 0) scale(1); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(242, 240, 234, 0.35); }
  50%      { transform: translate(0, 0) scale(1.08); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 10px rgba(242, 240, 234, 0); }
}
.compare.is-used .compare__handle::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .compare__handle::after { animation: none; }
}
.compare__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
}
.compare__range:focus-visible ~ .compare__handle { outline: 2px solid var(--wc-accent); }
.compare__bar {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 0.4em;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(7, 7, 11, 0.82);
  border-bottom: 1px solid var(--wc-line);
  pointer-events: none;
}
.compare__tag { color: var(--wc-ink); opacity: 0.8; white-space: nowrap; }
.compare__tag + .compare__query + .compare__tag { text-align: right; }
/* The search term runs across the full width on its own line. */
.compare__query {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
  color: var(--wc-ink);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
}

/* Closing tile: points at the rest of the client list. */
.case__more {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--sp-4);
  padding: var(--sp-6);
  color: var(--wc-ink);
  text-decoration: none;
  transition: background var(--dur-fast) linear;
}
.case__more:hover { background: var(--wc-blend); }
.case__more-num {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  line-height: 0.9;
  color: var(--wc-accent);
}
.case__more-text {
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.4;
  max-width: 22ch;
}
.case__more-cta {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wc-faint);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2em;
}
.case__more:hover .case__more-cta { color: var(--wc-ink); }

/* The metric sits over the slider; let drags pass through it. */
.case__metric { pointer-events: none; }

/* Phones: the rail is a native snap scroller (see scroll.js), cards take
   most of the width, and the slider strip drops to a size that fits. */
@media (max-width: 860px) {
  .case { width: min(82vw, 620px); }
  .compare__bar { padding: var(--sp-2) var(--sp-3); font-size: 0.62rem; letter-spacing: 0.06em; }
  .compare__query { font-size: 0.72rem; }
}
@media (max-width: 720px) {
  /* Phones: smaller so "from the flock." fits one line, centred, with the
     highlighted word larger and given air above and below. */
  .hero__headline { font-size: min(var(--display-md), 12vw); letter-spacing: -0.05em; text-align: center; margin-inline: auto; }
  .hero__headline .w-lit { font-size: 1.45em; line-height: 1; }
  .hero__headline .reveal-mask:has(.w-lit) { margin-block: 0.45em; }
}

/* --- 05 services ----------------------------------------------------------- */

/* Cards. They start stacked on top of one another and fan out into this
   list as the section scrolls into view (scroll.js). Each card needs its
   own fill so the stack reads as a deck. */
/* The section pins while the deck fans out, so heading plus eight cards has
   to fit one viewport: tighter top padding and slimmer cards than the rest
   of the page. */
/* Top padding clears the fixed nav (about 5.5rem tall) while pinned. */
.services { padding-top: clamp(6rem, 11vh, 8rem); }

.services__list {
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;   /* equal heights, so the pile is a clean single card */
  gap: 0;                /* edge to edge: nothing sliding behind shows through */
  margin-top: var(--sp-5);
}
/* Overlap by a pixel: transforms land on fractional pixels and a hairline
   seam between cards would show whatever is sliding behind. */
.service + .service { margin-top: -1px; }

.service {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
  padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(1.2rem, 2.4vw, 2rem);
  background: var(--wc-raise);
  border: var(--border);
  will-change: transform;
  transform-origin: 50% 0;
}

.service__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.05;
  font-weight: 400;
  text-wrap: balance;
}

.service__desc {
  color: var(--wc-mute);
  font-size: var(--step--1);
  line-height: 1.6;
  max-width: 52ch;
}

@media (max-width: 860px) {
  .service { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* --- 07 testimonials ------------------------------------------------------- */

/* Five video cards in one row on wide screens; they wrap below that.
   Nothing scrolls sideways. */
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.quote {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  padding: var(--sp-6);
  background: var(--wc-raise);
  border: var(--border);
  scroll-snap-align: start;
  user-select: none;
}

.quote__by { display: flex; align-items: center; gap: var(--sp-3); }
.quote__name { font-size: var(--step--1); font-weight: 500; }
.quote__firm {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--wc-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Video cards. */
.quote--video { padding: 0; gap: 0; overflow: hidden; }

/* Every card shares one frame. Posters are cropped to fill it; once playing,
   landscape clips are shown whole (letterboxed) so nothing is cut off. */
.quote__play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--wc-faint);
  cursor: pointer;
  aspect-ratio: 4 / 5;
}

.quote__poster,
.quote__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.quote__video { background: #000; }
.quote--landscape .quote__video { object-fit: contain; }

.quote__play-icon {
  position: absolute;
  left: 50%; top: 50%;
  width: 4rem; height: 4rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--wc-ink);
  transition: transform var(--dur-fast) var(--ease-out-expo), opacity var(--dur-fast) linear;
}
.quote__play-icon::after {
  content: '';
  position: absolute;
  left: 56%; top: 50%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 0.65rem 0 0.65rem 1.1rem;
  border-color: transparent transparent transparent var(--wc-void);
}
.quote__play:hover .quote__play-icon { transform: scale(1.08); }
.quote--playing .quote__play-icon,
.quote--playing .quote__poster { opacity: 0; pointer-events: none; }

.quote--video .quote__by { padding: var(--sp-4) var(--sp-5); }

/* Written testimonial under the video rail. A large accent quotation mark
   hangs in the left gutter and the text runs alongside it. */
.pullquote {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-6);
  row-gap: var(--sp-5);
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--wc-line);
  max-width: 68ch;
}
.pullquote__mark {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 9vw, 9rem);
  line-height: 0.6;
  color: var(--wc-accent);
  user-select: none;
}
.pullquote__text {
  margin: 0;
  display: grid;
  gap: var(--sp-4);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.5;
}
.pullquote__by {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wc-mute);
}
@media (max-width: 620px) {
  .pullquote { grid-template-columns: 1fr; }
  .pullquote__mark { grid-row: auto; font-size: 4rem; line-height: 0.7; }
  .pullquote__by { grid-column: 1; }
}

/* --- 08 about -------------------------------------------------------------- */

.about__body { display: grid; gap: var(--sp-5); max-width: 62ch; }
.about__title { font-size: var(--display-sm); }

/* --- 09 cta + form --------------------------------------------------------- */

.cta {
  background: var(--wc-sunk);
  padding-block: calc(var(--section-y) * 1.1);
  border-top: 1px solid var(--wc-line);
}

.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 900px) {
  .cta__grid { grid-template-columns: 1fr; }
}

.cta__title { font-size: var(--display-md); }
.cta__aside { display: grid; gap: var(--sp-5); align-content: start; }

.cta__direct {
  display: grid;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
}
.cta__direct dt { color: var(--wc-faint); text-transform: uppercase; font-size: var(--step--2); letter-spacing: 0.16em; }
.cta__direct dd { margin: 0 0 var(--sp-4); }

.form { display: grid; gap: var(--sp-5); }

.form__row { display: grid; gap: var(--sp-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--sp-2); }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-mute);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.9em 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wc-line);
  color: var(--wc-ink);
  font-size: var(--step-0);
  border-radius: 0;
  transition: border-color var(--dur-fast) linear;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--wc-accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--wc-faint); }

.field select option { background: var(--wc-raise); color: var(--wc-ink); }

.field__error {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: #E0796B;
  min-height: 1.2em;
}
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select { border-bottom-color: #E0796B; }

/* Honeypot — hidden from people, visible to naive bots. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  justify-content: space-between;
}

.form__note { font-family: var(--font-mono); font-size: var(--step--2); color: var(--wc-faint); max-width: 34ch; }

.form__status {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  padding: var(--sp-4);
  border: var(--border);
  display: none;
}
.form__status.is-ok  { display: block; border-color: var(--wc-accent); color: var(--wc-ink); }
.form__status.is-bad { display: block; border-color: #E0796B; color: #E0796B; }

.btn[aria-busy='true'] { opacity: 0.6; pointer-events: none; }

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

.footer { padding-block: var(--sp-8) var(--sp-6); }

.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--wc-line);
}

.footer__mark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--step-4);
  line-height: 1;
}
.footer__mark sup { font-family: var(--font-mono); font-size: 0.3em; vertical-align: super; color: var(--wc-mute); }

.footer__social {
  display: flex;
  gap: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  justify-content: space-between;
  padding-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--wc-faint);
  letter-spacing: 0.08em;
}