/* ==========================================================================
   NextBigRunner Premium — landing page
   Converted from index.psd (1920 × 7707). Every value below was read from
   the layer data or measured off the rendered composite, not eyeballed.
   ========================================================================== */

/* Carrois Gothic is loaded via Google Fonts @import in partials/header.html,
   not self-hosted — no local @font-face needed here. */

/* Each full-bleed band is a fixed-height artboard section in the PSD, so the
   section boundaries are anchored rather than left to content height. Internal
   spacing is then tuned inside each band. */
.band { display: flex; flex-direction: column; justify-content: center; }
.band--hero  { min-height: clamp(0px, 81.77vw, 1570px); justify-content: flex-start; }
.band--press { min-height: clamp(0px, 17.71vw,  340px); }
.band--claim { min-height: clamp(0px, 57.76vw, 1109px); justify-content: flex-start; }
.band--perf  { min-height: clamp(0px, 98.59vw, 1893px); justify-content: flex-start; }
.band--feat  { min-height: clamp(0px, 73.33vw, 1408px); justify-content: flex-start; }
.band--offer { min-height: clamp(0px, 55.36vw, 1063px); }
.band--succ  { min-height: clamp(0px, 40vw, 768px); }
.band--foot  { min-height: clamp(5rem, 6.615vw, 127px); }

:root {
  /* --- Colour ----------------------------------------------------------
     The PSD uses a single weight of one typeface and a tight palette. */
  --ink:        #252525;  /* primary text, 73 of 96 type runs */
  --yellow:     #feda00;  /* buttons, stat card headers, accent headings */
  --yellow-lt:  #fee75c;  /* features band */
  --blue:       #49afc3;  /* nav bar, hero eyebrow */
  --teal:       #339999;  /* claim eyebrow */
  --teal-dk:    #009999;  /* features eyebrow */
  --cyan:       #99ffff;  /* table eyebrow */
  --rule:       #49aaa2;  /* vertical rule beside each feature */
  --paper:      #f2f2f3;  /* light text on dark */
  --paper-dim:  #c6c8ca;  /* secondary light text */
  --paper-foot: #ebebec;  /* footer links */
  --body-dark:  #333333;  /* claim body copy */
  --card-dark:  #101c21;  /* stat card lower half */
  --card-ice:   #e1eff2;  /* claim card fill */

  /* --- Font metrics, measured from carrois-gothic.woff2 ----------------- */
  --fc: 1.1920;
  --ft: 0.1870;
  --fb: 0.2700;

  /* --- Fluid type: exact PSD size at 1920px, legible at 375px ----------- */
  /* --scale is a client-requested reduction from the PSD sizes, applied to the
     display steps only (42px and up) plus the feature icons. Body copy, table
     figures, eyebrows and footer text stay at their measured PSD sizes.
     Set --scale to 1 to return the page to exact PSD fidelity. */
  --scale: 0.8;
  /* Icons carry their own multiplier on top of --scale, so they can be tuned
     without touching the type. 0.8 × 0.8 = 64% of the PSD size. */
  --icon-scale: 0.8;

  --fs-120: clamp(2.625rem, 0.8544rem + 7.561vw, calc(7.5rem   * var(--scale)));
  --fs-100: clamp(2.25rem,  0.9591rem + 5.511vw, calc(6.25rem  * var(--scale)));
  --fs-72:  clamp(1.75rem,  0.9257rem + 3.516vw, calc(4.5rem   * var(--scale)));
  --fs-60:  clamp(1.625rem, 0.9403rem + 2.921vw, calc(3.75rem  * var(--scale)));
  --fs-42:  clamp(1.25rem,  0.8244rem + 1.817vw, calc(2.625rem * var(--scale)));

  /* Unscaled — these are at readable sizes already */
  --fs-30:  clamp(1.125rem, 0.9028rem + 0.9482vw, 1.875rem);
  --fs-24:  clamp(1rem,     0.8611rem + 0.5926vw, 1.5rem);
  --fs-20:  clamp(0.9375rem, 0.8542rem + 0.3556vw, 1.25rem);
  --fs-18:  clamp(0.875rem, 0.8194rem + 0.237vw,  1.125rem);
  --fs-16:  clamp(0.8125rem, 0.7847rem + 0.1185vw, 1rem);

  /* --- Layout ----------------------------------------------------------
     Stats run x146–1775 (1629). Features run x101–1775 (1674). Body copy
     sits inside those, so two container widths rather than one. */
  --container: 1629px;
  --container-wide: 1674px;
  --gutter: clamp(1.25rem, 3vw, 3.5rem);
  --radius: clamp(.75rem, 1.25vw, 1.5rem);            /* 24px, stat cards */
}

/* ==========================================================================
   Leading trim — Photoshop reports glyph ink bounds; a CSS line box adds
   half-leading plus the ascender gap. With this, every margin below is the
   literal gap measured in the PSD.
   ========================================================================== */

.trim { line-height: var(--lh); }
.trim::before,
.trim::after { content: ''; display: table; }
.trim::before { margin-bottom: calc((var(--fc) - var(--lh)) * 0.5em - var(--ft) * 1em); }
.trim::after  { margin-top:    calc((var(--fc) - var(--lh)) * 0.5em - var(--fb) * 1em); }

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  font-family: 'Carrois Gothic', 'Segoe UI', system-ui, sans-serif;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
a { color: inherit; }

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

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

.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

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

.eyebrow {                          /* 30px, sits above every headline */
  --lh: 1.2;
  font-size: var(--fs-30);
}

/* Client direction: the eyebrows and the hero subhead are set uppercase.
   Carrois Gothic has no small-caps, so this is a plain transform with a little
   tracking added, which the caps need to stop them looking cramped. */
.eyebrow--caps,
.caps {
  text-transform: uppercase;
  letter-spacing: .04em;
}

.display {                          /* 60px section headline */
  --lh: 1.3333;                     /* 80px measured pitch */
  font-size: var(--fs-60);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(2.75rem, 3.281vw, 3.938rem);      /* 63px */
  padding-inline: clamp(1.5rem, 3.75vw, 4.5rem);
  border: 0;
  border-radius: 999px;                               /* pill, per the PSD */
  background: var(--yellow);
  color: var(--ink);
  font-size: var(--fs-24);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.btn:hover  { background: #e9c800; }
.btn:active { transform: translateY(1px); }

/* --- Subscribe form ------------------------------------------------------
   The field and the button share the .btn pill height and radius so they read
   as one control. Sizes follow the same clamp() idiom as everything else. */

.form-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 1.042vw, 1.25rem);
  max-width: 44rem;
  margin-inline: auto;
  text-align: left;
}

.input-icons {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 20rem;
  min-height: clamp(2.75rem, 3.281vw, 3.938rem);      /* matches .btn, 63px */
  padding-inline: clamp(1rem, 1.354vw, 1.625rem);
  border-radius: 999px;
  background: #fff;
}

/* The whole pill takes the focus ring, not just the bare input. */
.input-icons:focus-within { outline: 3px solid var(--yellow); outline-offset: 3px; }

.input-icon {
  flex: 0 0 auto;
  width: clamp(1.125rem, 1.25vw, 1.5rem);
  height: auto;
  color: var(--ink);
  opacity: .55;
}

.input-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: .5em 0 .5em clamp(.625rem, .833vw, 1rem);
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-20);
  line-height: 1.2;
  color: var(--ink);
}

.input-field:focus { outline: none; }
.input-field::placeholder { color: var(--body-dark); opacity: .6; }

.signup-btn { flex: 0 0 auto; }

@media (max-width: 560px) {
  .form-container { flex-direction: column; align-items: stretch; }
  /* Stacked, the main axis is vertical, so the 20rem flex-basis above would
     apply to the pill's HEIGHT. Reset it and let min-height do the work. */
  .input-icons { flex: 0 0 auto; }
  .signup-btn { width: 100%; }
}

/* ==========================================================================
   Masthead (PSD y0–134) and nav bar (y134–197)
   ========================================================================== */

.masthead {
  display: grid;
  place-items: center;
  min-height: clamp(4rem, 6.98vw, 8.375rem);          /* 134px */
  background: var(--ink);
}

.masthead__logo { width: clamp(11rem, 15.99vw, 19.188rem); }   /* 307px */

.nav {
  background: var(--blue);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  min-height: clamp(2.75rem, 3.281vw, 3.938rem);      /* 63px */
  margin: 0;
  padding: .5rem var(--gutter);
  list-style: none;
}

.nav__list a {
  --lh: 1;
  display: block;
  font-size: var(--fs-24);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.nav__list a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .nav__list { justify-content: center; gap: .5rem 1.25rem; }
}

/* ==========================================================================
   Hero + stat cards (PSD y197–1767, one shared background)
   ========================================================================== */

.hero-wrap {
  background: #14181b url('../img/bg-hero.jpg') center top / cover no-repeat;
  text-align: center;
}

.hero { padding-top: clamp(2.5rem, 3.854vw, 4.625rem); }      /* 74px */

.hero__eyebrow { color: var(--blue); }

.hero__title {
  max-width: 800px;
  margin: clamp(1rem, 2.031vw, 2.438rem) auto 0;      /* 39px */
  color: var(--paper);
}

.hero__title em { font-style: normal; color: var(--yellow); }

.hero__price {
  --lh: 1.5;                                          /* 30px measured */
  max-width: 500px;
  margin: clamp(1.25rem, 2.5vw, 3rem) auto 0;         /* 48px */
  font-size: var(--fs-20);
  color: var(--paper);
}

.hero__cta { margin-top: clamp(1.25rem, 1.979vw, 2.375rem); }  /* 38px */

.hero__sub {
  margin-top: clamp(3rem, 6.667vw, 8rem);             /* 128px */
  color: var(--paper);
}

.hero__subtitle {
  max-width: 890px;
  margin: clamp(1rem, 1.823vw, 2.188rem) auto 0;      /* 35px */
  color: var(--yellow);
}

/* --- Four stat cards, PSD y1140–1579 ------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3.49vw, 4.188rem);                 /* 67px */
  padding-block: clamp(2.5rem, 5.313vw, 6.375rem)     /* 102px */
                 clamp(3rem, 9.79vw, 11.75rem);       /* 188px */
}

.stat {
  display: flex;
  flex-direction: column;
  min-height: clamp(14rem, 22.86vw, 27.438rem);       /* 439px */
  border: 2px solid var(--yellow);
  border-radius: var(--radius);
  background: var(--card-dark);
  overflow: hidden;
  text-align: center;
}

/* Yellow header block, 195px of the card's 439px */
.stat__head {
  display: grid;
  place-items: center;
  min-height: clamp(6rem, 10.16vw, 12.188rem);        /* 195px */
  background: var(--yellow);
}

.stat__figure {
  --lh: 1;
  font-size: var(--fs-120);
  color: var(--ink);
}

.stat__caption {
  --lh: 1.4792;                                       /* 35.5px measured */
  padding: clamp(1.5rem, 2.5vw, 3rem) clamp(1rem, 1.5vw, 1.75rem) clamp(1rem, 2vw, 2.5rem);
  font-size: var(--fs-24);
  color: var(--paper-dim);
}

@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   Press strip (PSD y1767–2107)
   ========================================================================== */

.press {
  display: grid;
  place-items: center;
  padding-block: clamp(1.5rem, 3.333vw, 4rem) clamp(1.5rem, 3.073vw, 3.688rem);
  background: #222629 url('../img/bg-press.jpg') center / cover no-repeat;
  text-align: center;
}

.press__label { color: var(--blue); }

.press__logos {
  width: min(883px, 100%);
  margin-top: clamp(1.5rem, 2.448vw, 2.938rem);       /* 47px */
}

/* ==========================================================================
   Claim card (PSD y2107–3216)
   ========================================================================== */

.claim {
  padding-block: clamp(2rem, 6.927vw, 8.313rem) 0;    /* 133px to the card */
  background: #cfe2e6 url('../img/bg-claim.jpg') center / cover no-repeat;
}

.claim__card {
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(2rem, 4.219vw, 5.063rem) clamp(1.5rem, 3vw, 3.5rem)
           clamp(2rem, 4.323vw, 5.188rem);
  /* Client direction: transparent, so the section photograph shows through
     instead of the PSD's #e1eff2 panel. */
  background: transparent;
  text-align: center;
}

.claim__eyebrow { color: var(--teal); }

.claim__title {
  max-width: 960px;
  margin: clamp(1rem, 1.719vw, 2.063rem) auto 0;      /* 33px */
  color: var(--ink);
}

.claim__body {
  --lh: 1.8333;                                       /* 44px measured */
  max-width: 950px;
  margin: clamp(1.5rem, 2.708vw, 3.25rem) auto 0;     /* 52px */
  font-size: var(--fs-24);
  color: var(--body-dark);
}

/* ==========================================================================
   Performance table (PSD y3216–5109)
   ========================================================================== */

.perf {
  padding-block: clamp(3rem, 6.615vw, 7.938rem)       /* 127px */
                 clamp(3rem, 5.104vw, 6.125rem);      /* 98px */
  background: #4e93a8 url('../img/bg-table.jpg') center / cover no-repeat;
  text-align: center;
}

.perf__eyebrow { color: var(--cyan); }

.perf__title {
  max-width: 900px;
  margin: clamp(1rem, 1.771vw, 2.125rem) auto 0;      /* 34px */
  color: var(--ink);
}

.perf__scroll {
  margin-top: clamp(2rem, 5.99vw, 7.188rem);          /* 115px */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.perf__table {
  width: min(1080px, 100%);
  margin-inline: auto;
  border-collapse: collapse;
  color: var(--ink);
  text-align: left;
}

.perf__table thead th {
  padding-bottom: clamp(.75rem, 1.875vw, 2.25rem);    /* 36px */
  border-bottom: 2px solid #006890;
  font-size: var(--fs-20);
  font-weight: 400;
  line-height: 1.2;
}

.perf__table tbody th,
.perf__table tbody td {
  /* PSD row pitch is exactly 141px. The 96px ticker image sits inline, so the
     row height is set directly rather than via line-height — otherwise the
     image's half-leading pushes each row to ~176px. */
  height: clamp(3.5rem, 7.344vw, 8.813rem);           /* 141px */
  padding: 0;
  font-size: var(--fs-24);
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
}

/* The ticker cell holds a 96px image beside the label, so line-height 1 on a
   30px font would clip the label's descenders once it wraps on a phone. */
.perf__table tbody th { font-size: var(--fs-30); line-height: 1.2; }

.perf__ticker {
  display: inline-block;
  width: clamp(2rem, 3.2vw, calc(6rem * var(--scale) * var(--icon-scale)));
  vertical-align: middle;
  margin-right: clamp(.75rem, 2.55vw, 3.063rem);      /* 49px */
  border-radius: 12px;
}

.perf__note {
  --lh: 1.2;
  margin-top: clamp(1.5rem, 2.396vw, 2.875rem);       /* 46px */
  font-size: var(--fs-16);
  color: var(--ink);
}

@media (max-width: 900px) {
  .perf__scroll { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .perf__table  { min-width: 34rem; }
  .perf__table tbody th,
  .perf__table tbody td { height: 4.5rem; }
}

/* ==========================================================================
   Feature grid (PSD y5109–6517)
   ========================================================================== */

.features {
  padding-block: clamp(3rem, 5.833vw, 7rem)           /* 112px */
                 clamp(2.5rem, 4.063vw, 4.875rem);    /* 78px */
  background: var(--yellow-lt) url('../img/bg-features.jpg') center / cover no-repeat;
  text-align: center;
}

.features__eyebrow { color: var(--teal-dk); }

.features__title {
  margin-top: clamp(1rem, 1.771vw, 2.125rem);         /* 34px */
  color: var(--ink);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(2rem, 8.23vw, 9.875rem);          /* 158px */
  row-gap: clamp(1.75rem, 1.667vw, 2rem);             /* 32px -> 522px row pitch */
  margin-top: clamp(2.5rem, 3.698vw, 4.438rem);       /* 71px */
  text-align: left;
}

.feature { position: relative; padding-left: clamp(1.25rem, 1.458vw, 1.75rem); }

/* 13 × 58px rule to the left of every feature heading */
.feature::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--rule-top, clamp(6.5rem, 11.98vw, 14.375rem));   /* 230px */
  width: clamp(.375rem, .677vw, .813rem);             /* 13px */
  height: clamp(1.75rem, 3.021vw, 3.625rem);          /* 58px */
  background: var(--rule);
}

.feature__icon {
  height: clamp(2.75rem, 4.766vw, calc(8.938rem * var(--scale) * var(--icon-scale)));
  width: auto;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 4.375vw, 5.25rem);     /* 84px to the title */
}

.feature__title {
  --lh: 1.05;
  font-size: var(--fs-42);
  color: var(--ink);
}

.feature__body {
  --lh: 1.8333;                                       /* 44px measured */
  margin-top: clamp(1rem, 1.979vw, 2.375rem);         /* 38px */
  font-size: var(--fs-24);
  color: var(--ink);
}

@media (max-width: 1000px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .features__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pricing CTA (PSD y6517–7580)
   ========================================================================== */

.offer {
  padding-block: clamp(2rem, 12.917vw, 15.5rem) clamp(2rem, 14.06vw, 16.875rem);
  background: #1b1f22 url('../img/bg-cta.jpg') center / cover no-repeat;
  text-align: center;
}

.offer__logo {
  width: clamp(11rem, 15.99vw, 19.188rem);            /* 307px */
  margin-inline: auto;
}

.offer__eyebrow {
  --lh: 1.2;
  margin-top: clamp(1.5rem, 3.594vw, 4.313rem);       /* 69px */
  font-size: var(--fs-24);
  color: var(--paper);
}

.offer__price {
  --lh: 1.1;                                          /* 110px measured pitch */
  margin-top: clamp(1.25rem, 2.552vw, 3.063rem);      /* 49px */
  font-size: var(--fs-100);
  --lh-price: 1;
  color: var(--yellow);
}

.offer__price s {
  display: block;
  margin-top: .1em;
  font-size: .72em;                                   /* 72px against 100px */
  color: var(--paper-dim);
  text-decoration: line-through;
  text-decoration-thickness: .05em;
}

.offer__cta { margin-top: clamp(1.5rem, 3.177vw, 3.813rem); }  /* 61px */

.offer__note {
  --lh: 1.2;
  margin-top: clamp(1rem, 1.823vw, 2.188rem);         /* 35px */
  font-size: var(--fs-20);
  color: var(--paper-dim);
}

/* ==========================================================================
   Success page — reuses the hero backdrop and type scale so the confirmation
   reads as part of the same site rather than a bare system page.
   ========================================================================== */

.success {
  padding-block: clamp(3rem, 8.333vw, 10rem);
  background: #14181b url('../img/bg-hero.jpg') center / cover no-repeat;
  text-align: center;
}

.success__eyebrow { color: var(--blue); }

.success__title {
  margin-top: clamp(1rem, 2.031vw, 2.438rem);
  color: var(--yellow);
}

.success__email {
  --lh: 1.4;
  margin-top: clamp(1rem, 1.823vw, 2.188rem);
  font-size: var(--fs-24);
  color: var(--yellow);
  word-break: break-word;
}

.success__body {
  --lh: 1.5;
  max-width: 62ch;
  margin: clamp(1.25rem, 2.083vw, 2.5rem) auto 0;
  font-size: var(--fs-20);
  color: var(--paper);
}

.success__cta { margin-top: clamp(1.5rem, 3.177vw, 3.813rem); }

/* --- Disclaimer ---------------------------------------------------------- */

.disclaimer {
  padding-block: clamp(2rem, 4.167vw, 5rem);
  background: var(--ink);
  text-align: center;
}

.disclaimer__title {
  --lh: 1.2;
  font-size: var(--fs-24);
  color: var(--yellow);
}

.disclaimer__body {
  --lh: 1.6;
  max-width: 90ch;
  margin: clamp(.75rem, 1.25vw, 1.5rem) auto 0;
  font-size: var(--fs-16);
  color: var(--paper-dim);
}

.disclaimer__body a { color: var(--blue); text-decoration: underline; }

/* ==========================================================================
   Legal pages (privacy.html, terms.html) — long-form prose on the same dark
   ground as the success page, left-aligned for readability with only the
   page masthead centred.
   ========================================================================== */

.legal {
  padding-block: clamp(2.5rem, 6.25vw, 7.5rem);
  background: var(--ink);
  text-align: center;
}

.legal__eyebrow { color: var(--blue); }

.legal__title {
  margin-top: clamp(.75rem, 1.563vw, 1.875rem);
  color: var(--yellow);
}

.legal__doc {
  max-width: 90ch;
  margin: clamp(2rem, 4.167vw, 5rem) auto 0;
  text-align: left;
}

/* Sits directly under the h1 as a standing warning, so it keeps the yellow
   of the title rather than the body's dimmed paper. */
.legal__lede {
  --lh: 1.4;
  font-size: var(--fs-20);
  color: var(--yellow);
}

.legal__heading {
  --lh: 1.3;
  margin-top: clamp(1.75rem, 3.125vw, 3.75rem);
  font-size: var(--fs-24);
  color: var(--paper);
}

.legal__heading:first-child { margin-top: 0; }

.legal__body {
  --lh: 1.7;
  margin-top: clamp(.75rem, 1.25vw, 1.5rem);
  font-size: var(--fs-16);
  color: var(--paper-dim);
}

.legal__body a { color: var(--blue); text-decoration: underline; }

.legal__list {
  margin: clamp(.75rem, 1.25vw, 1.5rem) 0 0;
  padding-left: 1.5em;
  font-size: var(--fs-16);
  line-height: 1.7;
  color: var(--paper-dim);
}

.legal__list li + li { margin-top: .5em; }

@media (max-width: 760px) {
  .legal__doc { margin-top: 2rem; }
}

/* --- Contact -------------------------------------------------------------
   Shares the .legal band, but the message is a single centred line rather
   than the left-aligned prose column the policy pages use.
   ------------------------------------------------------------------------- */

.contact__body {
  --lh: 1.6;
  max-width: 52ch;
  margin: clamp(2rem, 4.167vw, 5rem) auto 0;
  font-size: var(--fs-20);
  color: var(--paper);
}

.contact__email {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: .15em;
  word-break: break-word;          /* the address must not overflow on mobile */
}

.contact__email:hover { color: var(--blue); }

/* ==========================================================================
   Footer (PSD y7580–7707)
   ========================================================================== */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  min-height: clamp(5rem, 6.615vw, 7.938rem);         /* 127px */
  padding: 1.25rem var(--gutter);
  background: var(--ink);
}

.site-footer__logo { width: clamp(9rem, 15.99vw, 19.188rem); }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.083vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-18);
  line-height: 1.2;
  color: var(--paper-foot);
}

.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__links .copy { color: var(--yellow); }

@media (max-width: 760px) {
  .site-footer { justify-content: center; text-align: center; }
  .site-footer__links { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Scroll-reveal — progressive enhancement added by js/site.js. The class is
   only applied by JS itself, so content stays fully visible with JS off.
   ========================================================================== */

.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}