/* =========================================================
   AC-v3 Section: Get in Touch (#get-in-touch)
   New file 24.04.26; UCB Phase 1.

   Role: visual bookend to the page. The site OPENS with the
   hero / about pair sitting under a 0.92-alpha glass over the
   sticky dark Eternal Tales chamber; it CLOSES with the same
   treatment on Get in Touch.

   Architectural note (project_unified_chamber_backdrop_vision_230426):
   TEotE sits between #voice-of-the-fili (the last section of
   the main .et-chamber wrapper) and #get-in-touch, and TEotE
   has its own backdrop art. The chamber cannot be structurally
   continuous from VotF through TEotE to contact, so contact
   gets a LOCAL chamber+glass backdrop that visually mirrors
   the hero/about treatment.

   Strict Phase 1: static night image, no scroll driver, no
   crossfade. If we later want a night→flooded mini-crossfade
   here it can be added without touching this file's structure.
   ========================================================= */

/* The section claims its own stacking context so the backdrop
   absolute-positioned children stay scoped to it. shell.css
   already gives .section { position: relative }, but we add
   isolation: isolate so internal z-index does not interact
   with anything outside (matches the .et-chamber pattern). */
.section--contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);               /* light studio bg (14.05.26) */
  /* 11.05.26: top buffer reduced from base s-6 (32px) to s-3 (12px).
     Matches the .section--about treatment so both text-led bookend
     sections sit closer to the nav rather than carrying a generous
     buffer better suited to visually rich sections. */
  padding-top: calc(var(--nav-height) + var(--s-5));
  /* 15.05.26 PM: override shell.css's nav-height scroll-margin so it
     does not double-count with the padding-top above. Click-scroll
     lands section top at viewport y=0; padding-top places the title
     ~24px below the nav bottom. */
  scroll-margin-top: 0;
  /* 15.05.26 v2: flex column + min-height: 100dvh so the section uses
     the viewport. .section__inner flexes to fill and centres its
     content vertically (rule below), and the footer (the section's
     last flex child) pins to the bar-to-bottom region's bottom edge.
     Replaces the v1 `min-height: auto` which left a lot of unused
     whitespace at tall viewports. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  /* 15.05.26 v3: drop the inherited padding-bottom (var(--s-9) = 96px)
     so the footer locks to the absolute page bottom. The footer's own
     padding-bottom (var(--s-6) = 32px) provides breathing room. */
  padding-bottom: 0;
}

.section--contact > .section__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 15.05.26 PM: was justify-content: center (centred content vertically
     in the available bar-to-footer region). flex-start pins the title
     just below the section's padding-top and lets the rest flow below,
     so the eyebrow + headline sit ~24px below the nav rather than
     mid-viewport. Footer still pins to the section bottom via the
     parent flex column + padding-bottom: 0. */
  justify-content: flex-start;
}

/* ---------- Backdrop wrapper ----------
   Fills the section. pointer-events: none so the contact form,
   links, and footer remain clickable through the backdrop. */
.contact-backdrop {
  /* 14.05.26: hidden for the light studio. Contact is now a light
     section; the night-chamber image + glass backdrop belonged to
     the dark treatment. Markup retained (not deleted) so it can be
     restored by removing this one declaration. */
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* The <picture> wrapper inside .contact-backdrop is a regular
   inline element by default; force it to fill the backdrop so
   the inner <img> can use object-fit: cover correctly. */
.contact-backdrop > picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Chamber image ----------
   Same source asset as .et-chamber__layer--night. object-fit:
   cover + object-position: center top mirrors the chamber
   stage (after the round-16 anchor-top change 20.04.26) so
   the cropping behaviour matches at every viewport. */
.contact-backdrop__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Glass pane ----------
   Same recipe as .section--landing::before /
   .section--about::before so the bookend reads visually
   identical to the entry. */
.contact-backdrop__glass {
  position: absolute;
  inset: 0;
  /* Pure cloudy transparent: no tint, chamber's own colour shows
     through, the blur is what reads as 'glass'. background kept
     fully transparent on purpose. (24.04.26 iteration) */
  background: transparent;
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
}

/* ---------- Content layer ----------
   Lifts above the backdrop. .section__inner is the only
   substantive child once .contact-backdrop is added. */
.section--contact > .section__inner {
  position: relative;
  z-index: 1;
}

/* ==========================================================
   Content layout (rebuilt 12.05.26)
   Five visual moments: eyebrow, h2, newsletter (intro + form),
   direct-contact line, brand-signpost line; with a separate
   footer band beneath. Sub-section sub-headings dropped: the
   h2 carries the newsletter's name; the direct-contact + brand
   lines are single-paragraph each.

   Column widths:
     - prose blocks (intro / direct / brands): ~640px reading
       column. Narrower than the 11.05.26 900px so the lines
       read at comfortable measure.
     - form block: ~440px. Narrows the input + button so they
       read as a form, not as another content rectangle.
   The narrowing from 640px to 440px between intro and form
   IS the visual signal that the form is the focal action.
   ========================================================== */
.section--contact > .section__inner {
  text-align: center;
}

/* All content blocks share one reading column and one vertical
   rhythm so the section reads as a single coherent stack.
   The form sits centred inside the .mailing-list column at a
   narrower 440px focal width (see .mailing-list__form rule
   below); everything else uses the full 640px column.
   12.05.26: brand block width was 800px and bottom margin
   was var(--s-9); narrowed and tightened to match the rest
   of the section. text-align centred on all three blocks. */
.mailing-list,
.contact-direct,
.contact-brands {
  max-width: clamp(280px, 92vw, 640px);
  margin: 0 auto var(--s-7);
  text-align: center;
}

/* ---------- Mailing list (primary action) ----------
   No sub-heading on this block: the h2 above ("From the
   Studio.") IS the newsletter's name. Intro paragraph sits
   in the 640px reading column; the form below narrows to
   the 440px form column. */
.mailing-list__intro {
  margin: 0 0 var(--s-5);
  font-size: var(--body-lead);
  line-height: 1.55;
  color: var(--primary-text);
}

/* Form: inline flex layout (input + button on one row).
   align-items: flex-end so the input's bottom-border lines up
   with the button's CTA underline at the same vertical position
   despite the input being slightly taller than the button text.
   Row-direction flex is safe ground; the 11.05.26 column-flex
   bug (flex-basis silently becoming height) does not apply. */
.mailing-list__form {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--s-4);
  max-width: clamp(280px, 92vw, 440px);
  margin: 0 auto;
}
.mailing-list__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Email input: bottom underline only, transparent fill. Reads
   as "a line you write on", not "a box you fill". Matches the
   site's quieter accent vocabulary; the chamber-blur backdrop
   shows through. (12.05.26 rebuild: previous version was a
   full copper-bordered box that read as a SaaS form embed.) */
.mailing-list__form input[type="email"] {
  display: block;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: var(--s-3);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 107, 74, 0.4);
  border-radius: 0;
  font-family: var(--font-sans);
  /* font-size floored at 16px: iOS Safari zooms into any text input
     rendering below 16px and doesn't reliably zoom back out after
     blur. Token --body drops to 15/14px on mobile breakpoints, so
     using max() keeps the input at 16px there while inheriting the
     larger desktop value if --body grows. */
  font-size: max(var(--body), 16px);
  line-height: 1.4;
  color: var(--primary-text);
  outline: none;
  transition: border-bottom-color 160ms ease;
}
.mailing-list__form input[type="email"]::placeholder {
  color: var(--soft-text);
  opacity: 0.6;
}
.mailing-list__form input[type="email"]:hover {
  border-bottom-color: rgba(255, 107, 74, 0.7);
}
.mailing-list__form input[type="email"]:focus {
  border-bottom-color: var(--accent);
}

/* Submit button: matches the .cta pattern used elsewhere on
   the site (shell.css). Inline-block text CTA with a copper
   bottom border, no box. Sits at the left of the form column
   underneath the input. The form claims primacy through being
   an input + a CTA, not through heavier outline weight. */
.mailing-list__submit {
  display: inline-block;
  flex-shrink: 0;
  padding: var(--s-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--body-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-text);
  cursor: pointer;
  transition: color 160ms ease;
}
.mailing-list__submit:hover,
.mailing-list__submit:focus-visible {
  color: var(--accent);
  outline: none;
}

/* Form states (13.05.26 Buttondown wiring; thanks reposition 13.05.26).
   __submit[disabled] covers both the in-flight POST and the post-success
   locked state; opacity drop + explicit colour hold so the hover/focus
   copper rule above doesn't briefly fire. __status (error) and __thanks
   (success) are sibling inline messages below the form: the form stays
   visible after success with input + button disabled, so retry and
   confirmation read as a single positional pattern. */
.mailing-list__submit[disabled],
.mailing-list__submit[disabled]:hover,
.mailing-list__submit[disabled]:focus-visible {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--primary-text);
}
.mailing-list__form input[type="email"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mailing-list__status,
.mailing-list__thanks {
  margin: var(--s-4) auto 0;
  font-family: var(--font-sans);
  line-height: 1.4;
  text-align: center;
}
.mailing-list__status {
  font-size: var(--body-small);
  color: var(--accent);
}
.mailing-list__thanks {
  font-size: var(--body-lead);
  color: var(--primary-text);
}
.mailing-list__thanks strong {
  font-weight: 700;
}

/* ---------- Direct contact (centred two-line, secondary) ----------
   One short paragraph: descriptive lead on the first line, the
   email link on its own line below (via a <br> in the HTML).
   Centred so the email reads as a focal element rather than as
   trailing prose. Copper-underline on the email link matches
   the brand signpost link treatment below. Postal addresses
   live in JSON-LD, not visible UI. */
.contact-direct {
  margin-top: 0;
  font-size: var(--body);
  line-height: 1.55;
  color: var(--soft-text);
  text-align: center;
}
/* The email link is the actual "get in touch" action for a section
   called Get in Touch. Promoted to var(--h3) so it claims focal
   weight; the descriptive lead above ("Press, partnerships...")
   stays at body-size as a quieter label. inline-block + small
   margin-top gives the larger line its own breathing room. */
.contact-direct a {
  display: inline-block;
  margin-top: var(--s-2);
  font-size: var(--h3);
  color: var(--primary-text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 160ms ease;
}
.contact-direct a:hover {
  color: var(--accent);
}

/* ---------- Brand signpost (two columns, tertiary) ----------
   AC publishes multiple brands. Two columns: ET logo + line on
   the left, TEoTE logo + line on the right. Logos sit centred
   within each column; text lines align to a common baseline at
   the bottom of the block via align-items: flex-end on the
   parent (the ET lockup is taller than the TEoTE wordmark, so
   without baseline alignment the lines would float at different
   heights). Add a third column when a new brand lands. */
.contact-brands {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-8);
  text-align: center;
}
.contact-brands__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo treatment. Each brand keeps its native lockup; visual
   parity is achieved through similar OPTICAL weight rather
   than identical pixel sizes. ET is a vertical motif+wordmark
   lockup; TEoTE is a horizontal wordmark. */
.contact-brands__logo-link {
  display: inline-block;
  line-height: 0;
  border-bottom: 0;
  padding: 0;
}
.contact-brands__logo {
  display: block;
  width: auto;
  opacity: 0.88;
  transition: opacity 160ms ease;
}
.contact-brands__logo--et {
  height: 50px;
}
.contact-brands__logo--teote {
  height: 50px;
}
.contact-brands__logo-link:hover .contact-brands__logo,
.contact-brands__logo-link:focus-visible .contact-brands__logo {
  opacity: 1;
}

/* Line under each logo. Scoped so the link underline treatment
   only applies inside the text line, not the logo link above. */
.contact-brands__line {
  margin: var(--s-4) 0 0;
  max-width: 280px;
  font-size: var(--body-small);
  line-height: 1.55;
  color: var(--soft-text);
}
.contact-brands__line a {
  color: var(--primary-text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 160ms ease;
}
.contact-brands__line a:hover {
  color: var(--accent);
}

/* Mobile: stack columns. ET on top, TEoTE underneath. */
@media (max-width: 600px) {
  .contact-brands {
    flex-direction: column;
    align-items: center;
    gap: var(--s-7);
  }
}

/* ---------- Footer band ----------
   Sits OUTSIDE .section__inner so it breaks out of the centred
   reading column and reads as a distinct band beneath the
   content. Thin top border at copper-low-alpha, full section
   width minus a small breathing margin, centred copy.
   12.05.26: split into two paragraphs. __credits carries the
   IP / trademark / publishing attribution (slightly brighter,
   substantive content); __copyright carries the standard studio
   signature line (quietest, baseline-style). */
.contact-footer {
  /* 19.05.26 (later): footer compacted per user. Top + bottom
     padding pulled in (was s-5 / s-6), credit lines stacked tighter
     so the bottom of the section doesn't sit on a tall slab of
     empty space. */
  margin: 0 var(--s-5);
  padding: var(--s-3) 0 var(--s-3);
  border-top: 1px solid rgba(255, 107, 74, 0.2);
  text-align: center;
}
.contact-footer__credits {
  margin: 0 0 var(--s-2);          /* was s-4 */
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.55;                /* was 1.7 */
  color: var(--soft-text);
}
.contact-footer__copyright {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--quiet-text);
}
/* 19.05.26: site build credit. Sits as a deliberately quiet third
   beat under the copyright row. Slightly smaller (11px vs 12px) and
   letter-spaced so it reads as the most minor line in the stack. */
.contact-footer__site-credit {
  margin: 4px 0 0;                  /* was s-3 - pull right under copyright */
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--quiet-text);
}
.contact-footer a {
  color: var(--quiet-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.contact-footer a:hover {
  color: var(--soft-text);
  border-bottom-color: rgba(255, 107, 74, 0.4);
}

/* ==========================================================
   Social media row (19.05.26 pm). Replaces the prior two-column
   .contact-brands logo block. Six platform icons (Simple Icons
   brand paths) in monochrome currentColor; hover flips to accent.
   Old .contact-brands / .contact-brands__* rules above are dead
   code now (markup removed); left in place per defensive build,
   will be cleaned in a housekeeping pass.
   ========================================================== */
.contact-social {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2.2vw, 24px);
}
.contact-social li {
  display: flex;
}
.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--primary-text);
  border-radius: 50%;
  transition: color 150ms ease, transform 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.contact-social a:hover,
.contact-social a:focus-visible {
  color: var(--accent);
  transform: translateY(-1px);
}
.contact-social a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.contact-social__icon {
  display: block;
  width: 22px;
  height: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .contact-social a {
    transition: color 150ms ease;
  }
  .contact-social a:hover,
  .contact-social a:focus-visible {
    transform: none;
  }
}

/* Tight brand signpost line. Centred single-line text pointing at
   the two brand destinations. Replaces the two-column logo block. */
.contact-brands-line {
  margin: clamp(16px, 2vw, 24px) 0 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: clamp(13px, 0.3vw + 12px, 15px);
  line-height: 1.6;
  color: var(--quiet-text);
  text-align: center;
  letter-spacing: 0.01em;
}
.contact-brands-line a {
  color: var(--soft-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(94, 119, 128, 0.35);
  transition: color 150ms ease, border-color 150ms ease;
}
.contact-brands-line a:hover,
.contact-brands-line a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.contact-brands-line__sep {
  margin: 0 0.5em;
  opacity: 0.6;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .contact-brands-line a { transition: none; }
}

/* ==========================================================
   Narrow-viewport fixes for Get in Touch (19.05.26 pm v2).
   At default sizes the email link (.contact-direct a, set to
   var(--h3)), the social icons row, the brand signpost line,
   and the mailing-list form's input + JOIN row all start to
   overflow the section column well before reaching 320px.
   Three breakpoints chosen to engage earliest where each
   element first breaks.
   ========================================================== */

/* 520px: email link drops from h3-sized to a fit-the-viewport
   clamp so "info@animatedcreative.ie" fits on a single line
   without clipping. Force-wrap added as a safety net. */
@media (max-width: 519.98px) {
  .contact-direct a {
    font-size: clamp(16px, 4.8vw, 24px);
    overflow-wrap: anywhere;
  }
}

/* 478px: social icons row + brand signpost line. Both were
   pushing past the right edge at 320 - the icons row because
   6 x 40 + 5 x 14 = 310px exceeds the section's reading width
   minus padding, the brand line because the second URL is a
   single 20-char un-breakable token. Tighten + force-wrap. */
@media (max-width: 478px) {
  .contact-social {
    gap: clamp(6px, 1.6vw, 12px);
  }
  .contact-social a {
    width: 34px;
    height: 34px;
  }
  .contact-social__icon {
    width: 20px;
    height: 20px;
  }
  .contact-brands-line {
    overflow-wrap: anywhere;
    line-height: 1.7;
  }
}

/* 380px: stack the mailing-list form. At very narrow viewports
   the input + gap + button combined exceeds the form column
   width, clipping the JOIN button. Switching to flex-direction:
   column with the button centred underneath the input is the
   cleanest fit. */
@media (max-width: 380px) {
  .mailing-list__form {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
  }
  .mailing-list__submit {
    align-self: center;
  }
}


/* ==========================================================
   Bug-report CTA (19.05.26)
   Subtle "something not working?" toggle + form. Sits between
   the contact-direct line and the social row. Form submits to
   Formspree (see index-v5.html setup note). Aesthetic stays
   below the mailing-list signup so the primary CTA reads first.
   ========================================================== */
.bug-report {
  margin-top: var(--s-5);
  text-align: center;
}
.bug-report__toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--s-2) 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--quiet-text);
  cursor: pointer;
  border-bottom: 1px solid rgba(190, 183, 170, 0.35);
  transition: color 160ms ease, border-color 160ms ease;
}
.bug-report__toggle:hover,
.bug-report__toggle:focus-visible {
  color: var(--soft-text);
  border-bottom-color: var(--accent);
  outline: none;
}
.bug-report__panel {
  margin-top: var(--s-3);
  max-width: 480px;
  margin-inline: auto;
  text-align: left;
}
.bug-report__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.bug-report__form textarea,
.bug-report__form input[type="email"] {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--primary-text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(190, 183, 170, 0.35);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 160ms ease, background 160ms ease;
}
.bug-report__form textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.4;
}
.bug-report__form textarea::placeholder,
.bug-report__form input[type="email"]::placeholder {
  color: var(--quiet-text);
  opacity: 0.8;
}
.bug-report__form textarea:focus,
.bug-report__form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
}
.bug-report__row {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  margin-top: 4px;
}
.bug-report__notice {
  margin: 0;
  flex: 1;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.45;
  color: var(--quiet-text);
}
.bug-report__submit {
  appearance: none;
  flex-shrink: 0;
  background: var(--primary-text);
  color: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease;
}
.bug-report__submit:hover:not(:disabled),
.bug-report__submit:focus-visible:not(:disabled) {
  background: var(--accent);
  color: var(--primary-text);
  outline: none;
}
.bug-report__submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.bug-report__status {
  margin: var(--s-3) 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--accent);
}
.bug-report__thanks {
  margin: var(--s-4) 0 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--primary-text);
}
.bug-report__thanks strong {
  font-weight: 600;
}


/* ==========================================================
   Tightening at 800px viewport height (19.05.26)
   The default section rhythm (large bottom margins on each of
   the five "moments" + the standard .section nav-height + s-6
   top padding and s-9 bottom padding) leaves too much air
   between elements on short viewports, pushing the bug-report
   toggle, social row and brand line further apart than they
   need to be. Tighten everything proportionally at <=800px
   height so the stack reads as one continuous block.
   ========================================================== */
@media (max-height: 800px) {
  .section--contact {
    /* Drop the section's top + bottom padding closer to the
       nav floor and stage bottom respectively. */
    padding: calc(var(--nav-height) + var(--s-3)) 0 var(--s-4);
  }
  .mailing-list,
  .contact-direct,
  .contact-brands {
    margin-bottom: var(--s-4);    /* was --s-7 */
  }
  .mailing-list__intro {
    margin-bottom: var(--s-3);    /* was --s-5 */
  }
  .bug-report {
    margin-top: var(--s-3);       /* was --s-5 */
  }
  .contact-social {
    /* 19.05.26 (later): bumped --s-3 -> --s-5 per user. The toggle is
       a utility line and the social row is a separate visual block;
       they want some breathing room between them. */
    margin-top: var(--s-5);
  }
  .contact-brands-line {
    margin-top: var(--s-3);       /* was --s-2; pair with the s-5 above */
  }
  .contact-footer {
    padding: var(--s-3) 0 var(--s-3);   /* was s-5 0 s-6 */
  }
}