/* ==========================================================================
   Camera Wings — landing page
   Palette   ink #0D1A2A · deep #0A1524 · bone #F6F4EF · sand #EFECE4
             orange #E8622C · orange-dark #C94F1F · tint #F0A47F
             body #16202C · muted #3A4552 · soft #5A6572 · faint #8B94A0
   ========================================================================== */

:root {
  --ink:        #0D1A2A;
  --deep:       #0A1524;
  --bone:       #F6F4EF;
  --sand:       #EFECE4;
  --orange:     #E8622C;
  --orange-dk:  #C94F1F;
  --tint:       #F0A47F;
  --body:       #16202C;
  --muted:      #3A4552;
  --soft:       #5A6572;
  --faint:      #8B94A0;
  --on-dark:    #E9ECF0;

  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --shell:   1160px;
  --gutter:  clamp(16px, 4vw, 40px);
  --section: clamp(56px, 9vw, 104px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bone);
  color: var(--body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: var(--orange); }

img { max-width: 100%; }
input::placeholder { color: var(--faint); }

.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--orange);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  text-decoration: none;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  color: #FFFFFF;
}

/* Shared ---------------------------------------------------------------- */

.shell,
.site-header__inner,
.hero__inner,
.trustbar__inner,
.problem__inner,
.protocol__inner,
.protocol__cta,
.proof__inner,
.clients__inner,
.how__inner,
.close__inner,
.site-footer__inner {
  max-width: var(--shell);
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow--accent { color: var(--orange); }
.eyebrow--tint   { color: var(--tint); }

.h2 {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.h2--on-dark { color: #FFFFFF; }

.btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 24px;
  letter-spacing: 0.01em;
  border: 0;
  cursor: pointer;
}
.btn--primary { background: var(--orange); color: #FFFFFF; }
.btn--primary:hover { background: var(--orange-dk); color: #FFFFFF; }
.btn--sm { font-size: 13.5px; padding: 11px 18px; }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--orange);
  color: var(--tint);
  padding: 13px 20px;
}
.btn--ghost:hover { background: var(--orange); color: #FFFFFF; }

/* 1 · Header ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 244, 239, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(13, 26, 42, 0.12);
}
.site-header__inner {
  padding: 10px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
/* Winged-camera mark. Height is set to match the two-line brand text block
   beside it (15px name + 9.5px tagline at 1.15 line-height ~= 28px); width is
   auto so the 1.6575:1 artwork can never be squashed. The asset is 3x for
   retina, and the intrinsic width/height attributes on the <img> reserve the
   right aspect ratio so the sticky header doesn't shift as it loads. */
.brand__mark {
  height: 30px;
  width: auto;
  flex: none;
  display: block;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 700; font-size: 15px; letter-spacing: 0.12em; }
.brand__tagline {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--soft);
  text-transform: uppercase;
}

.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.site-header__phone {
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  color: var(--body);
  letter-spacing: 0.02em;
}
.site-header__phone:hover { color: var(--orange); }

/* 2 · Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  min-height: clamp(540px, 88svh, 860px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__media { display: contents; }
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    rgba(13, 26, 42, 0.58) 0%,
    rgba(11, 22, 36, 0.72) 50%,
    rgba(10, 20, 33, 0.92) 100%
  );
}
.hero__inner {
  width: 100%;
  padding: 120px var(--gutter) clamp(48px, 8vh, 88px);
}
.hero .eyebrow { margin-bottom: 14px; }
.hero__title {
  margin: 0;
  max-width: 17ch;
  color: #FFFFFF;
  font-size: clamp(30px, 6.2vw, 62px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.hero__lede {
  margin: 20px 0 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.55;
  text-wrap: pretty;
}
.hero__cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px 22px;
  flex-wrap: wrap;
}
.hero__alt-link {
  color: #FFFFFF;
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero__alt-link:hover { color: var(--tint); }

/* 3 · Trust bar --------------------------------------------------------- */

.trustbar {
  background: var(--deep);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.trustbar__inner {
  padding: 16px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}
.trustbar__dot { color: var(--orange); }

/* 4 · Problem ----------------------------------------------------------- */

.problem { background: var(--bone); }
.problem__inner {
  padding: var(--section) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 28px 64px;
  align-items: start;
}
.problem__body {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--muted);
}
.problem__para { margin: 0; text-wrap: pretty; }
.problem__kicker { margin: 18px 0 0; font-weight: 600; color: var(--ink); }

/* 5 · Protocol ---------------------------------------------------------- */

.protocol { background: var(--ink); color: var(--on-dark); }
.protocol__inner {
  padding: var(--section) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 44px 64px;
  align-items: center;
}
.protocol__body {
  margin: 18px 0 0;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: rgba(233, 236, 240, 0.85);
  text-wrap: pretty;
}
.protocol__note {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(233, 236, 240, 0.7);
  border-left: 2px solid var(--orange);
  padding-left: 14px;
  text-wrap: pretty;
}
.protocol__figure {
  margin: 0;
  background: var(--deep);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: clamp(16px, 3vw, 28px);
}
.protocol__diagram { width: 100%; height: auto; display: block; }
.protocol__caption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(233, 236, 240, 0.55);
}
.protocol__cta {
  padding: 0 var(--gutter) clamp(48px, 7vw, 72px);
  display: flex;
  justify-content: center;
}

/* 6 · Proof ------------------------------------------------------------- */

.proof { background: var(--bone); }
.proof__inner { padding: var(--section) var(--gutter); }
.proof__eyebrow { text-align: center; }
.proof__title { margin-inline: auto; max-width: 24ch; text-align: center; }

.compare {
  position: relative;
  max-width: 920px;
  margin: 36px auto 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  touch-action: none;
  cursor: ew-resize;
  user-select: none;
  background: var(--deep);
  border: 1px solid rgba(13, 26, 42, 0.15);
  /* driven by main.js */
  --pct: 50%;
  --right: 50%;
}
.compare picture { display: contents; }
.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.compare__img--top { clip-path: inset(0 var(--right) 0 0); }

.compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pct);
  width: 2px;
  background: #FFFFFF;
  transform: translateX(-1px);
  pointer-events: none;
}
.compare__handle {
  position: absolute;
  top: 50%;
  left: var(--pct);
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  /* pointer events stay on .compare so dragging works anywhere on the image */
  pointer-events: none;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -1px;
}
.compare__handle:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.compare__tag {
  position: absolute;
  top: 14px;
  background: rgba(10, 21, 36, 0.8);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 5px 9px;
  pointer-events: none;
}
.compare__tag--left  { left: 14px; }
.compare__tag--right { right: 14px; }

.proof__caption {
  margin: 18px auto 0;
  max-width: 56ch;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--soft);
}

/* 7 · Clients ----------------------------------------------------------- */

.clients {
  background: var(--sand);
  border-top: 1px solid rgba(13, 26, 42, 0.08);
}
.clients__inner { padding: var(--section) var(--gutter); }
.clients__body {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}
.clients__body strong { color: var(--ink); }

.testimonials {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.testimonial {
  margin: 0;
  border: 1px dashed rgba(13, 26, 42, 0.35);
  background: rgba(255, 255, 255, 0.5);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial__flag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.testimonial__quote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--soft);
  font-style: italic;
}
.testimonial__by {
  font-size: 13.5px;
  color: var(--soft);
  border-top: 1px solid rgba(13, 26, 42, 0.12);
  padding-top: 12px;
}
.testimonial__by strong { color: var(--ink); }

/* 8 · How it works ------------------------------------------------------ */

.how { background: var(--bone); }
.how__inner { padding: var(--section) var(--gutter); }
.how__title { margin-bottom: 36px; }
.how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
.step {
  background: #FFFFFF;
  border: 1px solid rgba(13, 26, 42, 0.12);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step__num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--orange);
  letter-spacing: 0.1em;
}
.step__head { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.step__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.how__cta { margin-top: 40px; display: flex; justify-content: center; }

/* 9 · FAQ --------------------------------------------------------------- */

.faq {
  background: var(--bone);
  border-top: 1px solid rgba(13, 26, 42, 0.08);
}
.faq__inner {
  max-width: 820px;
  margin-inline: auto;
  padding: var(--section) var(--gutter);
}
.faq__title { margin-bottom: 24px; }
.faq__list { border-top: 1px solid rgba(13, 26, 42, 0.18); }
.faq__item { border-bottom: 1px solid rgba(13, 26, 42, 0.18); }

.faq__q { margin: 0; font-size: inherit; font-weight: inherit; }
.faq__trigger {
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 2px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.faq__trigger:hover { background: rgba(13, 26, 42, 0.03); }
.faq__icon {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 18px;
  color: var(--orange);
  flex: none;
  width: 20px;
  text-align: center;
}
.faq__a {
  margin: 0;
  padding: 0 28px 20px 2px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

/* 10 · Close ------------------------------------------------------------ */

.close {
  background: var(--ink);
  color: var(--on-dark);
  scroll-margin-top: 70px;
}
.close__inner { padding: var(--section) var(--gutter); }
.close__title {
  margin: 0 auto;
  max-width: 26ch;
  text-align: center;
  font-size: clamp(26px, 3.8vw, 42px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-wrap: pretty;
}
/* The booking panel takes the full content width and the quote panel sits
   beneath it. Cal's month_view only lays out as three columns (details |
   calendar | times) when its container is wide enough — around 900px. In the
   previous half-width column it had no room and collapsed to the tall stacked
   view. Full width buys the horizontal layout, which is both the intended
   look and dramatically shorter. */
.close__grid {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

/* Both panels run the full content width so the section reads as one column
   of equal-width blocks rather than a wide calendar with a narrow form
   stranded beside it. */
.close__grid .quote,
.close__grid .booking {
  width: 100%;
}

/* Cal's month_view has a width band where it breaks. Measured directly against
   app.cal.com at a range of widths:
     <= ~1000px   compact layout, no overflow
     ~1050-1359   three columns, but its own document overflows horizontally,
                  which renders scrollbars INSIDE the iframe (cross-origin, so
                  unstyleable from here)
     >= 1360px    three columns, clean
   At the site's 1160px container the embed lands at 1028px — inside the broken
   band, which is the scrollbar Ian saw when maximised.
   So: on screens wide enough, widen the whole closing section past the 1360px
   threshold; on anything narrower, hold the embed below the band so Cal picks
   its compact layout instead of scrolling inside itself. */
@media (min-width: 1560px) {
  /* 1500 - 80 (section padding) - 52 (panel padding) = 1368px of iframe. */
  .close__inner { max-width: 1500px; }
}
@media (min-width: 760px) and (max-width: 1559px) {
  .booking__embed {
    /* width:100% is required — .booking is a column flex container, and
       margin-inline:auto cancels the default cross-axis stretch, which would
       otherwise collapse this to its content width. */
    width: 100%;
    max-width: 1000px;
    margin-inline: auto;
  }
}

/* Booking panel */
.booking {
  background: var(--bone);
  color: var(--body);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.booking__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.booking__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.booking__flag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--faint);
}
/* Hatched placeholder shows until the Cal.com embed paints, then clears itself. */
.booking__embed {
  min-height: 260px;
  border: 1px dashed rgba(13, 26, 42, 0.35);
  background: repeating-linear-gradient(
    -45deg,
    rgba(13, 26, 42, 0.035) 0 10px,
    transparent 10px 20px
  );
}
.booking__embed.is-loaded {
  border: 0;
  background: none;
  min-height: 0;
}

/* No height cap and no scroll container here, deliberately.
   An earlier cap existed because the embed rendered ~1,170px tall in the old
   half-width column. Now that the booking panel is full width, Cal lays out
   horizontally at ~570px and the cap is obsolete.
   Worse, it was actively harmful: Cal measures its own height on load and
   pushes it onto this element. If that first measurement lands a few pixels
   short, `overflow-y: auto` renders a scrollbar for the shortfall — which then
   disappears on any window resize, because that fires Cal's observer and it
   re-measures. With no scroll container, a brief mis-measure is invisible.
   Let the embed size itself. */
.booking__fallback,
.booking__embed-error {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.booking__fallback-label,
.booking__embed-error span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--soft);
}
.booking__call { align-self: flex-start; font-size: 14px; padding: 12px 20px; }

/* Quote panel */
.quote {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 26px;
  scroll-margin-top: 90px;
}
.quote__title { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #FFFFFF; }
.quote__sub { margin: 0 0 18px; font-size: 13.5px; color: rgba(233, 236, 240, 0.65); }
/* The HTML `hidden` attribute sets display:none via the UA stylesheet, but any
   class selector setting `display` outranks it. Several components below do
   exactly that, which silently broke every hidden/unhidden toggle on the page.
   This restores `hidden` to meaning what it says. */
[hidden] { display: none !important; }

.quote__form { display: flex; flex-direction: column; gap: 14px; }

/* Landscape layout at the width the panel now has: name + company across the
   first row, then email + locations + the submit button across the second.
   A 6-column track lets both rows divide cleanly (3+3, then 2+2+2).
   The hidden UTM inputs are display:none and the honeypot is absolutely
   positioned, so neither takes a grid cell. */
@media (min-width: 760px) {
  .quote__form {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px 18px;
    align-items: end;
  }
  .quote__form .field:nth-of-type(1) { grid-area: 1 / 1 / 2 / 4; }
  .quote__form .field:nth-of-type(2) { grid-area: 1 / 4 / 2 / 7; }
  .quote__form .field:nth-of-type(3) { grid-area: 2 / 1 / 3 / 3; }
  .quote__form .field:nth-of-type(4) { grid-area: 2 / 3 / 3 / 5; }
  .quote__form button[type="submit"] {
    grid-area: 2 / 5 / 3 / 7;
    margin-top: 0;
    /* align-items:end bottom-aligns it with the inputs; padding matches the
       inputs so the two read as the same control height. */
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .quote__form .quote__error { grid-area: 3 / 1 / 4 / 7; margin: 0; }
}
.quote__gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(233, 236, 240, 0.6);
}
.field__input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px;
  outline: none;
}
.field__input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}
.field__input[aria-invalid="true"] { border-color: #FF8A6B; }
.field__error {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  color: #FFB4A0;
}

.quote__error {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #FFB4A0;
}
.quote__form button[type="submit"] { margin-top: 4px; }
.quote__form button[disabled] { opacity: 0.6; cursor: default; }

/* Terminal "sent" state: the button stays on screen as the confirmation, so it
   reads as greyed-out and finished rather than merely busy. */
.quote__form button.is-sent,
.quote__form button.is-sent[disabled] {
  opacity: 1;
  background: transparent;
  border-color: rgba(246, 244, 239, 0.25);
  color: rgba(246, 244, 239, 0.55);
  cursor: default;
}
.quote__form.is-sent .field__input {
  opacity: 0.5;
  cursor: default;
}

.quote__done { padding: 30px 0; display: flex; flex-direction: column; gap: 8px; }
.quote__done:focus { outline: none; }
.quote__done-flag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--tint);
}
.quote__done-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(233, 236, 240, 0.85);
}

/* Footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--deep);
  color: rgba(233, 236, 240, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__inner {
  padding: 40px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: baseline;
  justify-content: space-between;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 4px; }
.site-footer__lockup { display: flex; align-items: center; gap: 9px; }
.site-footer__mark { width: 9px; height: 9px; background: var(--orange); }
.site-footer__name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #FFFFFF;
}
.site-footer__desc { font-size: 13px; }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 13px;
}
.site-footer__contact a { color: rgba(233, 236, 240, 0.85); text-decoration: none; }
.site-footer__contact a:hover { color: var(--tint); }

.site-footer__areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
}
.site-footer__areas a { color: rgba(233, 236, 240, 0.6); text-decoration: none; }
.site-footer__areas a:hover { color: var(--tint); }
.site-footer__areas span { color: rgba(233, 236, 240, 0.3); }

/* ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}