/* =============================================================
   15 — FOOTER  ·  "the last pour"

   ROUND 3.

   R1 said the photograph was scrimmed to mud with a stray horizon
   crossing the links.  Fixed in R2 by bounding the image inside
   `.footer-plate` and carrying it at real strength.

   R2 said the footer was still running on the 24px global gutter
   while the hero runs on ~100px, so the display line sat jammed on
   the left edge and four 340px cells held 150px links — a link farm
   in better type.  This pass answers that:

   1. THE FOOTER GETS ITS OWN MEASURE.  `.site-footer .container`
      stops inheriting `--container-padding` (24px) and takes a
      gutter of `clamp(28px, 6.9vw, 100px)` — the same inset the
      journey copy uses (`clamp(22px, 7vw, 108px)`).  Content caps
      at a 1240px measure.  Headline, index row and directory all
      land on one margin.
   2. THE DIRECTORY IS A RULED LEDGER, NOT A GRID OF LINKS.  One
      continuous hairline across the top, three verticals dropping
      from it, and the link tracks pinned to a ~190px measure so the
      links fill their column instead of floating in half of one.
      Breathing raised to 112px / 128px.
   3. THE NEWSLETTER IS AN ACTUAL SURFACE.  22px radius, 60% night
      ground, 20px backdrop blur, hairline edge — and its top edge is
      dropped to the headline's cap-line so it stops covering the
      sky's orange band.
   4. GREEN TWICE IN THE WHOLE FOOTER: the italic "slowly" and
      SUBSCRIBE.  The 01–04 numerals, the "ory" of the wordmark and
      THE MONTHLY STEEP are warm off-white at 42–60%.
   5. NO PAYMENT TEXT DUMP.  One 0.7rem/0.14em fine line under the
      copyright, and the bar's right side carries a real affordance.

   Loads after main.css, so every rule here is the last word and
   every breakpoint it needs lives in this file.
   ============================================================= */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--night-2);
  color: var(--color-text);

  /* --- The footer's own measure ------------------------------------
     This file went first: the global container still ran a 24px
     commerce-chrome gutter, so the footer opted out and set the hero's
     own `clamp(22px, 7vw, 108px)` by hand.  25-controls.css §13 has
     since moved `--container-padding` itself onto that measure, and two
     hand-kept copies of one number is how an axis quietly drifts — the
     footer was landing on l=100 while the headline above it landed on
     l=101.  It now takes the document's value directly, so the wordmark,
     the display headline, the product grid and the last link column are
     one line by construction and cannot come apart. */
  --f-gutter: var(--container-padding);
  --f-measure: 1240px;

  /* local hairline palette — fallbacks first, mixes below */
  --f-line: rgba(244, 240, 228, 0.15);
  --f-line-soft: rgba(244, 240, 228, 0.08);
  --f-line-strong: rgba(244, 240, 228, 0.30);
  --f-glass-line: rgba(244, 240, 228, 0.17);

  /* warm off-white voices — the palette that replaces the green */
  --f-mark: rgba(244, 240, 228, 0.60);   /* numerals, panel label */
  --f-mark-2: rgba(244, 240, 228, 0.42); /* index keys, column labels */
  --f-mark-3: rgba(244, 240, 228, 0.34); /* fine print */

  /* glass + chip grounds, fallbacks first */
  --f-glass: rgba(12, 14, 11, 0.60);
  --f-chip: rgba(7, 12, 8, 0.34);

  /* the plate */
  --f-plate-min: clamp(560px, 47vw, 720px);
  --f-plate-pt: clamp(96px, 9.4vw, 152px);
  --f-plate-pb: clamp(56px, 6.7vw, 96px);

  /* distance from the top of the kicker to the headline's cap-line —
     what the newsletter panel is offset by so the two tops agree */
  --f-capline: clamp(34px, 4.6vw, 70px);
}

@supports (color: color-mix(in srgb, red, blue)) {
  .site-footer {
    --f-line: color-mix(in srgb, var(--ink) 15%, transparent);
    --f-line-soft: color-mix(in srgb, var(--ink) 8%, transparent);
    --f-line-strong: color-mix(in srgb, var(--ink) 30%, transparent);
    --f-glass-line: color-mix(in srgb, var(--ink) 17%, transparent);
    --f-mark: color-mix(in srgb, var(--ink) 60%, transparent);
    --f-mark-2: color-mix(in srgb, var(--ink) 42%, transparent);
    --f-mark-3: color-mix(in srgb, var(--ink) 34%, transparent);
    --f-glass: color-mix(in srgb, var(--night-2) 60%, transparent);
    --f-chip: color-mix(in srgb, var(--night-2) 34%, transparent);
  }
}

/* --- THE MEASURE ------------------------------------------------------
   Every `.container` inside the footer, in the plate, the directory and
   the bottom bar, is re-based here.  This one rule is what moves the
   whole composition off the 24px commerce gutter and onto the hero's. */
.site-footer .container {
  max-width: calc(var(--f-measure) + 2 * var(--f-gutter));
  padding-inline: var(--f-gutter);
}

/* =============================================================
   THE CLOSING PLATE
   A picture with edges.  `overflow: clip` is what guarantees the
   stray horizon can never again cross a link column: the photograph
   physically cannot exist below this element.
   ============================================================= */
.site-footer .footer-plate {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: var(--f-plate-min);
  padding: var(--f-plate-pt) 0 var(--f-plate-pb);
  border-top: 1px solid var(--f-line);
  border-bottom: 1px solid var(--f-line-strong);
}

.site-footer .footer-plate > .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.footer-ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.footer-ground::before,
.footer-ground::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* --- The photograph, carried ------------------------------------------
   brightness 0.7 / saturate 0.8 — dusk, not murk.  The sky glow, the
   haze ridges and the terrace crest all read as themselves. */
.footer-ground::before {
  background: url('../../media/journey/01-valley.webp') no-repeat center 34%;
  background-size: cover;
  filter: saturate(0.8) contrast(1.04) brightness(0.7);
  transform: scale(1.02);
}

/* --- The scrim ---------------------------------------------------------
   Directional, like the hero: held down hard on the left where the serif
   sits, opening to almost nothing across the right half, then grounding
   into night along the baseline so the plate sits on something solid and
   the index row below it has a floor. */
.footer-ground::after {
  background:
    linear-gradient(to bottom,
      rgba(7, 12, 8, 0.94) 0%,
      rgba(7, 12, 8, 0.40) 6%,
      rgba(7, 12, 8, 0.00) 17%,
      rgba(7, 12, 8, 0.00) 45%,
      rgba(7, 12, 8, 0.34) 68%,
      rgba(7, 12, 8, 0.84) 88%,
      rgba(7, 12, 8, 0.93) 100%),
    linear-gradient(to right,
      rgba(7, 12, 8, 0.86) 0%,
      rgba(7, 12, 8, 0.62) 24%,
      rgba(7, 12, 8, 0.28) 47%,
      rgba(7, 12, 8, 0.10) 70%,
      rgba(7, 12, 8, 0.22) 100%);
}

@supports (color: color-mix(in srgb, red, blue)) {
  .footer-ground::after {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--night-2) 94%, transparent) 0%,
        color-mix(in srgb, var(--night-2) 40%, transparent) 6%,
        transparent 17%,
        transparent 45%,
        color-mix(in srgb, var(--night-2) 34%, transparent) 68%,
        color-mix(in srgb, var(--night-2) 84%, transparent) 88%,
        color-mix(in srgb, var(--night-2) 93%, transparent) 100%),
      linear-gradient(to right,
        color-mix(in srgb, var(--night-2) 86%, transparent) 0%,
        color-mix(in srgb, var(--night-2) 62%, transparent) 24%,
        color-mix(in srgb, var(--night-2) 28%, transparent) 47%,
        color-mix(in srgb, var(--night-2) 10%, transparent) 70%,
        color-mix(in srgb, var(--night-2) 22%, transparent) 100%);
  }
}

.footer-top,
.footer-bottom {
  position: relative;
  z-index: 1;
  background: var(--night-2);
}

/* =============================================================
   PLATE — statement + newsletter
   ============================================================= */
.site-footer .footer-close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.46fr) minmax(0, 0.9fr);
  gap: clamp(40px, 5.4vw, 96px);
  align-items: start;
}

.site-footer .footer-statement,
.site-footer .footer-signup {
  min-width: 0;
}

/* The signature micro-kicker: 34x1px rule, 0.7rem, 0.17em tracking. */
.site-footer .footer-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(26px, 2.6vw, 38px);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-dark);
}

.site-footer .footer-kicker-rule {
  flex: 0 0 auto;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.62;
}

.site-footer .footer-statement-line {
  margin: 0 0 clamp(26px, 2.8vw, 40px);
  max-width: 11.2em;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2rem, 4.3vw, 4.3rem);
  line-height: 1.0;
  letter-spacing: -0.042em;
  color: var(--color-dark);
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(7, 12, 8, 0.5);
}

/* GREEN 1 OF 2. */
.site-footer .footer-statement-line em,
.site-footer .footer-statement-line i {
  font-style: italic;
  color: var(--color-accent);
}

.site-footer .footer-statement-sub {
  margin: 0 0 clamp(34px, 3.4vw, 48px);
  max-width: 38ch;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--color-text);
  text-shadow: 0 1px 20px rgba(7, 12, 8, 0.55);
}

/* --- The chip ----------------------------------------------------------
   Echoes the hero's `ELEVATION · 1,400 M`: a hairline pill, 0.7rem caps,
   nothing chunky. */
.site-footer .footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  border: 1px solid var(--f-line-strong);
  border-radius: var(--radius-pill);
  background: var(--f-chip);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-dark);
  transition: border-color 0.45s cubic-bezier(0.2, 0.75, 0.2, 1),
              color 0.45s cubic-bezier(0.2, 0.75, 0.2, 1),
              background-color 0.45s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-footer .footer-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-footer .footer-cta:hover,
.site-footer .footer-cta:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.site-footer .footer-cta:hover svg,
.site-footer .footer-cta:focus-visible svg {
  transform: translateX(5px);
}

/* --- Newsletter, as an actual surface ---------------------------------
   R2: it was reading as a flat black rectangle parked over the best part
   of the sky.  Now it is glass with a real edge — 22px radius, a 60%
   night ground, 20px of backdrop blur, one hairline — and its top is
   dropped by `--f-capline` so it starts level with the headline's cap
   line and the sunset band runs clear above it. */
.site-footer .footer-signup {
  margin-top: var(--f-capline);
}

.site-footer .footer-signup-panel {
  padding: clamp(28px, 2.6vw, 38px);
  border: 1px solid var(--f-glass-line);
  border-radius: 22px;
  background: var(--f-glass);
  /* a touch of desaturation keeps the glass in the night palette instead
     of dragging the sunset through it as a brown card */
  -webkit-backdrop-filter: blur(20px) saturate(0.68) brightness(0.94);
  backdrop-filter: blur(20px) saturate(0.68) brightness(0.94);
  box-shadow: 0 30px 80px rgba(7, 12, 8, 0.38);
}

/* Warm off-white, not green — see the green budget at the top. */
.site-footer .footer-label {
  margin: 0 0 var(--space-4);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f-mark);
}

.site-footer .footer-signup-note {
  margin: 0 0 clamp(26px, 2.6vw, 36px);
  max-width: 34ch;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--color-text);
}

.site-footer .footer-signup-form {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--f-line-strong);
  transition: border-color 0.45s cubic-bezier(0.2, 0.75, 0.2, 1),
              opacity 0.45s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-footer .footer-signup-form:focus-within {
  border-bottom-color: var(--color-accent);
}

.site-footer .footer-signup-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  color: var(--color-dark);
}

.site-footer .footer-signup-input::placeholder {
  color: var(--color-text-light);
}

.site-footer .footer-signup-input:focus {
  outline: none;
  box-shadow: none;
}

/* GREEN 2 OF 2 — the one action in the whole footer. */
.site-footer .footer-signup-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: color 0.3s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-footer .footer-signup-btn svg {
  width: 15px;
  height: 15px;
  transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-footer .footer-signup-btn:hover svg,
.site-footer .footer-signup-form:focus-within .footer-signup-btn svg {
  transform: translateX(4px);
}

.site-footer .footer-signup-form.is-sent {
  opacity: 0.4;
  border-bottom-color: var(--f-line);
  pointer-events: none;
}

.site-footer .footer-signup-fine {
  margin: var(--space-4) 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--f-mark-3);
}

/* =============================================================
   PLATE BASELINE — the index
   Four numbered entries on hairlines, running the plate's full
   measure.  Provenance as structure, so the lower band of the
   composition carries weight instead of reading as a void.
   ============================================================= */
.site-footer .footer-index {
  position: relative;
  margin: clamp(64px, 7.2vw, 118px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 40px);
}

.site-footer .footer-index > li {
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--f-line);
}

.site-footer .footer-index-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Warm off-white, not green. */
.site-footer .footer-index-num {
  color: var(--f-mark);
}

.site-footer .footer-index-key {
  color: var(--f-mark-2);
}

.site-footer .footer-index-val {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.02rem, 1.35vw, 1.42rem);
  line-height: 1.26;
  letter-spacing: -0.018em;
  color: var(--color-dark);
  text-wrap: balance;
  text-shadow: 0 1px 22px rgba(7, 12, 8, 0.55);
}

/* =============================================================
   DIRECTORY — a ruled ledger, not a link farm

   One continuous hairline across the footer's measure, three
   verticals dropping from it, and the three link tracks pinned to a
   real ~190px measure so a 150px link fills its column instead of
   floating in a third of one.  The brand column takes the slack.
   ============================================================= */
.site-footer .footer-top {
  padding: clamp(72px, 7.8vw, 112px) 0 clamp(84px, 8.9vw, 128px);
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 212px));
  column-gap: clamp(28px, 3.6vw, 52px);
  row-gap: clamp(40px, 4vw, 60px);
  padding-top: clamp(30px, 3vw, 44px);
  border-top: 1px solid var(--f-line);
}

/* Each link track stands behind its own vertical, dropped from the rule
   above.  Hairline architecture, not a flat wash. */
.site-footer .footer-col {
  padding-left: clamp(24px, 2.4vw, 38px);
  border-left: 1px solid var(--f-line-soft);
}

/* main.css spans the brand across the whole row from 1200px down; this
   footer keeps its four-track ledger until 900px, so the span is reset
   here and re-applied in the 900px block below. */
.site-footer .footer-brand {
  grid-column: auto;
  min-width: 0;
}

.site-footer .footer-brand .site-logo-text {
  margin-bottom: var(--space-6);
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 2.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.026em;
  line-height: 1.05;
  color: var(--color-dark);
}

/* Tonal wordmark: the second half steps back in warm off-white rather
   than lighting up green.  Green is spent on "slowly" and SUBSCRIBE. */
.site-footer .footer-brand .site-logo-text span {
  color: var(--f-mark);
}

.site-footer .footer-brand-tagline {
  margin: -12px 0 clamp(28px, 2.8vw, 40px);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--f-mark-2);
}

.site-footer .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  max-width: 36ch;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--color-text-light);
}

/* Address segments break only at their commas — never inside a proper
   noun.  Paired with the per-segment spans footer.php emits. */
.site-footer .footer-addr-part {
  white-space: nowrap;
}

.site-footer .footer-contact-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 5px;
  color: var(--f-mark-2);
}

.site-footer .footer-contact-item a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color 0.3s cubic-bezier(0.2, 0.75, 0.2, 1),
              border-color 0.3s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-footer .footer-contact-item a:hover {
  color: var(--color-accent);
  border-bottom-color: currentColor;
}

/* Uppercase micro-labels replace the green-underlined headings. */
.site-footer .footer-col h4 {
  display: block;
  margin: 0 0 clamp(20px, 1.9vw, 28px);
  padding: 0;
  border: 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f-mark);
}

.site-footer .footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .footer-links li {
  margin: 0 0 15px;
}

.site-footer .footer-links li:last-child {
  margin-bottom: 0;
}

.site-footer .footer-links a {
  position: relative;
  display: inline-block;
  gap: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text);
  transition: color 0.3s cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* The '›' bullets read as clip-art; the underline sweep replaces them. */
.site-footer .footer-links a::before {
  content: none;
}

.site-footer .footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 1px;
  background: var(--color-accent);
  transition: right 0.45s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
  padding-left: 0;
  color: var(--color-accent);
}

.site-footer .footer-links a:hover::after,
.site-footer .footer-links a:focus-visible::after {
  right: 0;
}

/* =============================================================
   BOTTOM BAR
   The six-word payment dump is gone.  One 0.7rem/0.14em fine line
   sits under the copyright, and the right of the bar carries a real
   affordance instead of a badge row.
   ============================================================= */
.site-footer .footer-bottom {
  padding: clamp(22px, 2.2vw, 30px) 0 clamp(24px, 2.4vw, 34px);
  border-top: 1px solid var(--f-line);
}

.site-footer .footer-bottom .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
}

.site-footer .footer-bottom-text {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--f-mark-2);
}

.site-footer .footer-bottom-text a {
  color: var(--f-mark);
  transition: color 0.3s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-footer .footer-bottom-text a:hover {
  color: var(--color-accent);
}

/* --- Fine print -------------------------------------------------------
   Accepted cards, named once, at the smallest legible size the bible
   allows and the lowest weight in the footer.  Not a badge row. */
.site-footer .footer-fineprint {
  margin: 9px 0 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f-mark-3);
}

.site-footer .footer-totop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f-mark-2);
  transition: color 0.3s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-footer .footer-totop svg {
  width: 13px;
  height: 13px;
  transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.site-footer .footer-totop:hover,
.site-footer .footer-totop:focus-visible {
  color: var(--color-dark);
}

.site-footer .footer-totop:hover svg,
.site-footer .footer-totop:focus-visible svg {
  transform: translateY(-3px);
}

/* Old badge markup, if it ever comes back from a cached template. */
.site-footer .footer-payments,
.site-footer .footer-payments-label,
.site-footer .payment-icon {
  display: none;
}

/* =============================================================
   RESPONSIVE — this file loads last, so it carries its own
   breakpoints; main.css cannot reach past it.
   ============================================================= */
@media (max-width: 1340px) {
  .site-footer .footer-grid {
    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 196px));
    column-gap: clamp(26px, 3.2vw, 44px);
  }
}

/* Below 1200 the brand track would be squeezed narrower than its own
   address, so the brand takes the full row and the three link tracks keep
   a real 260px measure — the free width goes to the gutters between them
   rather than back into the cells, which is what made the desktop layout
   read as a link farm in the first place. */
@media (max-width: 1200px) {
  .site-footer .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 260px));
    justify-content: space-between;
    column-gap: clamp(20px, 2.6vw, 44px);
    row-gap: clamp(32px, 3.6vw, 46px);
  }
  .site-footer .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: clamp(26px, 3.2vw, 38px);
    border-bottom: 1px solid var(--f-line);
  }
  .site-footer .footer-col:first-of-type {
    padding-left: 0;
    border-left: 0;
  }
  .site-footer .footer-contact-item {
    max-width: 46ch;
  }
}

@media (max-width: 1024px) {
  .site-footer {
    --f-plate-min: clamp(520px, 68vw, 780px);
    --f-capline: 0px;
  }
  .site-footer .footer-close-grid {
    grid-template-columns: 1fr;
    gap: clamp(44px, 5.5vw, 64px);
  }
  .site-footer .footer-signup {
    max-width: 560px;
  }
  .site-footer .footer-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 3.2vw, 34px) clamp(24px, 3.4vw, 48px);
    margin-top: clamp(52px, 6vw, 78px);
  }
}

@media (max-width: 640px) {
  .site-footer {
    --f-plate-min: 0px;
    --f-plate-pt: clamp(72px, 16vw, 100px);
    --f-plate-pb: clamp(44px, 9vw, 64px);
  }
  .site-footer .footer-ground::before {
    background-position: center 30%;
  }
  .site-footer .footer-statement-line {
    max-width: none;
    letter-spacing: -0.034em;
  }
  .site-footer .footer-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer .footer-top {
    padding: clamp(56px, 12vw, 76px) 0 clamp(56px, 12vw, 80px);
  }
  .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: normal;
    column-gap: clamp(24px, 6vw, 34px);
  }
  .site-footer .footer-bottom .container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}

@media (max-width: 460px) {
  .site-footer .footer-index {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
    justify-content: normal;
    row-gap: var(--space-7);
  }
  .site-footer .footer-col {
    padding-left: 0;
    border-left: 0;
  }
  .site-footer .footer-brand {
    padding-bottom: var(--space-6);
  }
  .site-footer .footer-signup-form {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .site-footer .footer-signup-input {
    flex: 1 1 100%;
  }
  .site-footer .footer-cta {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-links a::after,
  .site-footer .footer-cta,
  .site-footer .footer-cta svg,
  .site-footer .footer-signup-btn svg,
  .site-footer .footer-totop svg,
  .site-footer .footer-signup-form {
    transition: none;
  }
}