/* ─────────────────────────────────────────────────────────────
   Rottman Creative: Site Chrome
   Source of truth for header, contact overlay, newsletter band,
   and dark footer. Edit here; every page that includes this file
   stays aligned.
   ───────────────────────────────────────────────────────────── */

/* ── Cross-document view transitions ──────────────── */
/* Browser cross-fades pages on same-origin navigation. The named
   transitions on .header / .footer mean those elements stay
   continuous across pages instead of fading. Firefox ignores
   these rules and falls back to plain navigation. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-group(site-header),
::view-transition-group(site-footer) {
  animation-duration: 220ms;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── Shared Chrome Fonts ───────────────────────────── */
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../../fonts/HelveticaNeue-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../../fonts/HelveticaNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../../fonts/HelveticaNeue-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../../fonts/HelveticaNeue-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────── */
:root {
  --brand-red: #BE2E2B;
  --brand-red-hover: #9a2422;
  --rich-black: #1A1919;
  --white: #FFFFFE;
  --cover-panel-gray: #F2F1F1;
  --paper: #f7f5f2;
  --ink-muted: #525252;
  --gray: #656668;
  --stone: #9F9F9E;
  --muted: rgba(26, 25, 25, 0.72);
  --border: rgba(26, 25, 25, 0.1);
  --soft-rule: rgba(26, 25, 25, 0.12);
  --frame-shadow: 0 22px 60px rgba(26, 25, 25, 0.08);
  --panel-shadow: 0 16px 36px rgba(26, 25, 25, 0.08);
  --panel-shadow-hover: 0 24px 52px rgba(26, 25, 25, 0.12);
  --serif: "freight-big-pro", Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.33, 1, 0.32, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.4s;
  --dur-slow: 0.7s;
  --site-max: 64rem;
  --content-max: min(92vw, var(--site-max));
}

/* Chrome pins its own tokens. rcg-tokens.css and the page sheets redefine
   --sans, --ink-muted, --ease and --dur on :root after this file loads, which
   is why the header used to render differently on Home than on About. The
   header, contact overlay, newsletter band and footer must look the same on
   every page, so they read these values, not whatever the page set.
   Widths are pinned too: the header, footer and newsletter band all sit on
   the 64rem site measure, so a page that widens its own grid (Work runs
   --content-max at 78rem) no longer drags the chrome out with it. The one
   page hook that survives is --newsletter-max, which About sets on purpose. */
.header,
.newsletter-band,
.footer {
  --site-max: 64rem;
  --content-max: min(92vw, var(--site-max));
}
.header,
.contact-overlay,
.newsletter-band,
.footer {
  --brand-red: #BE2E2B;
  --brand-red-hover: #9a2422;
  --rich-black: #1A1919;
  --white: #FFFFFE;
  --paper: #f7f5f2;
  --ink-muted: #525252;
  --gray: #656668;
  --stone: #9F9F9E;
  --muted: rgba(26, 25, 25, 0.72);
  --border: rgba(26, 25, 25, 0.1);
  --soft-rule: rgba(26, 25, 25, 0.12);
  --serif: "freight-big-pro", Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.33, 1, 0.32, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.4s;
  --dur-slow: 0.7s;
}

/* ── Reset + visually-hidden + focus ──────────────── */
*, *::before, *::after { box-sizing: border-box; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

/* ── Pills ─────────────────────────────────────────── */
.rcg-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: 1.3px solid var(--rich-black);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
  color: inherit;
  background: var(--white);
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.rcg-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--panel-shadow);
}
.rcg-pill__label { display: inline-block; transform: translateY(0.12em); }
.rcg-pill--filled { background: var(--rich-black); color: var(--white); }
.rcg-pill--outline { background: var(--white); color: var(--rich-black); }
.rcg-pill--red { background: var(--brand-red); color: var(--white); border-color: var(--brand-red); }
.rcg-pill--red:hover { background: var(--brand-red-hover); border-color: var(--brand-red-hover); }

/* ── Skip Link ─────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  padding: 12px 24px;
  background: var(--brand-red);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.875rem;
}
.skip-link:focus { top: 0; }

/* ── Header ────────────────────────────────────────── */
.header {
  view-transition-name: site-header;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  background: var(--white);
  transition: background 0.22s var(--ease),
              box-shadow 0.22s var(--ease),
              transform 0.35s var(--ease);
}
.header__inner {
  width: 100%;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 clamp(0.85rem, 2vw, 1.35rem);
  min-height: 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  box-sizing: border-box;
}
.header.is-scrolled {
  background: var(--white);
  box-shadow: none;
}
.header__brand {
  grid-column: 1;
  justify-self: start;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.header__brand-mark-wrap {
  position: relative;
  display: inline-block;
  height: 1.95rem;
}
.header__brand-mark {
  height: 1.95rem;
  width: auto;
  display: block;
  transition: opacity 0.4s var(--ease);
}
.header__brand-mark--red {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.header__brand-text {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--ink-muted);
  line-height: 1;
  transform: translateY(0);
}
.header__brand-creative { transition: color 0.4s var(--ease); }
.header__brand:hover .header__brand-creative {
  color: var(--brand-red);
}
.header__nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.25vw, 1.05rem);
  flex-shrink: 1;
  min-width: 0;
}
.header__end {
  grid-column: 3;
  justify-self: end;
  flex-shrink: 0;
}
.header__link {
  position: relative;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 0.35rem 0;
  transition: color 0.14s var(--ease);
  transform: translateY(0);
}
.header__link:hover { color: var(--rich-black); }
.header__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--brand-red);
  transform: scaleX(0);
  transform-origin: var(--origin, left);
  transition: transform 0.2s var(--ease);
}
.header__link:hover::after { transform: scaleX(1); }
.header__link[aria-current="page"] { color: var(--rich-black); }
.header__link[aria-current="page"]::after { transform: scaleX(1); }
.header__cta-link {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  background: var(--brand-red);
  border: 1.3px solid var(--brand-red);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.header__cta-link:hover {
  background: transparent;
  color: var(--brand-red);
}
.header__cta-label {
  display: inline-block;
  transform: translateY(0.06em);
}
.header--hidden { transform: translateY(-100%); }

/* ── Mobile menu (hamburger + drawer): hidden on desktop ── */
.header__toggle { display: none; }
.header__mobile { display: none; }

@media (max-width: 900px) {
  .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(1rem, 4vw, 1.35rem);
  }
  .header__nav,
  .header__end { display: none; }

  /* Hamburger button (44px touch target) */
  .header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rich-black);
    cursor: pointer;
  }
  .header__toggle-bars,
  .header__toggle-bars::before,
  .header__toggle-bars::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
  }
  .header__toggle-bars { position: relative; }
  .header__toggle-bars::before { position: absolute; top: -7px; left: 0; }
  .header__toggle-bars::after { position: absolute; top: 7px; left: 0; }
  .header.is-menu-open .header__toggle-bars { background: transparent; }
  .header.is-menu-open .header__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
  .header.is-menu-open .header__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

  /* Drawer: shown only when the header carries .is-menu-open */
  .header__mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0.25rem clamp(1rem, 4vw, 1.35rem) 1.25rem;
  }
  .header.is-menu-open .header__mobile { display: block; }
  .header__mobile-nav { display: flex; flex-direction: column; }
  .header__mobile-nav a {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--rich-black);
    text-decoration: none;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--border);
  }
  .header__mobile-nav a[aria-current="page"] { color: var(--brand-red); }
  .header__mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.1rem;
    padding: 0.95rem 1rem;
    background: var(--brand-red);
    border: 1.3px solid var(--brand-red);
    border-radius: 999px;
    color: var(--white);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
  }
}

/* ── Contact Panel Overlay ─────────────────────────── */
.contact-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200; pointer-events: none; visibility: hidden;
}
.contact-overlay.open { pointer-events: auto; visibility: visible; }
.contact-overlay__backdrop {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(26, 25, 25, 0); transition: background 0.5s var(--ease);
}
.contact-overlay.open .contact-overlay__backdrop { background: rgba(26, 25, 25, 0.4); }
.contact-overlay__panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--white); border-top: 1px solid var(--border);
  box-shadow: 0 -20px 60px rgba(26, 25, 25, 0.12);
  padding: clamp(2rem, 4vw, 3.5rem);
  transform: translateY(100%); transition: transform 0.55s var(--ease);
  max-height: 90vh; overflow-y: auto;
}
.contact-overlay.open .contact-overlay__panel { transform: translateY(0); }
.contact-overlay__close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 2.5rem; height: 2.5rem;
  background: none; border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.contact-overlay__close:hover { border-color: var(--rich-black); transform: rotate(90deg); }
.contact-overlay__close svg { width: 12px; height: 12px; stroke: var(--rich-black); stroke-width: 2; }
.contact-overlay__inner {
  max-width: 52rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
.contact-overlay__lead {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12;
  letter-spacing: -0.02em; margin: 0 0 1rem;
}
.contact-overlay__sub { font-size: 0.95rem; line-height: 1.6; color: var(--ink-muted); margin: 0 0 1.5rem; }
.contact-overlay__detail { font-size: 0.85rem; color: var(--stone); margin: 0; line-height: 1.6; }
.contact-overlay__detail a { color: var(--ink-muted); transition: color 0.14s var(--ease); }
.contact-overlay__detail a:hover { color: var(--brand-red); }

.contact-form { display: grid; gap: 1.25rem; }
.contact-form__field { display: grid; gap: 0.35rem; }
.contact-form__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.contact-form__input, .contact-form__textarea {
  width: 100%; border: 1px solid var(--border); background: var(--white);
  color: var(--rich-black); padding: 0.9rem 1rem; font-family: var(--sans); font-size: 0.95rem;
  transition: border-color 0.2s var(--ease);
}
.contact-form__input:focus, .contact-form__textarea:focus { outline: 2px solid var(--brand-red); outline-offset: -2px; border-color: var(--brand-red); }
.contact-form__textarea { min-height: 6rem; resize: vertical; }
.contact-form__submit {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; padding: 0 1.5rem;
  background: var(--rich-black); color: var(--white);
  border: 1.3px solid var(--rich-black); border-radius: 999px;
  font-family: var(--sans); font-size: 0.8125rem;
  font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.2s var(--ease);
}
.contact-form__submit:hover { background: var(--brand-red); border-color: var(--brand-red); transform: translateY(-2px); }

@media (max-width: 700px) {
  .contact-overlay__inner { grid-template-columns: 1fr; }
}

/* ── Newsletter Band ───────────────────────────────── */
.newsletter-band {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2.8vw, 1.35rem) clamp(3rem, 6vw, 4.5rem);
  background: var(--paper);
}
/* The inner box caps the band at the content width and is the sizing context:
   type below is sized in cqw (% of this box) so the lockup and strapline keep
   the SAME proportions as the PDF comp at any monitor width, instead of capping
   out and leaving the band stranded in whitespace on wide screens. */
.newsletter-band__inner {
  /* Defaults to the site content width; a page can set --newsletter-max to line
     the band up with a wider content grid (e.g. About uses 70rem). */
  max-width: var(--newsletter-max, var(--content-max));
  margin: 0 auto;
  container-type: inline-size;
}
.newsletter-band__frame {
  display: grid;
  /* Form column begins ~34% across the band, under the SHIP of MEMBERSHIP and
     above SOLUTIONS in the strapline, matching the comp. */
  grid-template-columns: 34% 66%;
  column-gap: 0;
  row-gap: clamp(1.5rem, 4vw, 3rem);
  /* Raise the pill + fill-in row toward MEMBERSHIP (sits on the TODAY line). */
  align-items: end;
}
.newsletter-band__lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Spec: 105pt size / 78pt leading ≈ 0.74. */
  line-height: 0.74;
  margin: 0;
}
.newsletter-band__membership,
.newsletter-band__today {
  font-family: var(--serif);
  font-weight: 400;
  /* ~49% of the band width, as in the comp (MEMBERSHIP spans to just under half). */
  font-size: clamp(2.4rem, 8.45cqw, 6.2rem);
  text-transform: uppercase;
  /* Spec: tracking -25. */
  letter-spacing: -0.025em;
}
.newsletter-band__membership { color: var(--rich-black); }
.newsletter-band__today {
  color: var(--white);
  background: var(--brand-red);
  padding: 0 0.28em 0.06em;
  margin-top: 0.08em;
  /* Uniform with MEMBERSHIP, per Mary's spec (inherits the shared size above). */
}
.newsletter-band__form {
  display: grid;
  /* Pill sits in the first zone (34%->53% of the band); the fill-in field starts
     at ~53%, the end of the "N" in FIND, and runs to the band's right edge. */
  grid-template-columns: 28.9% 1fr;
  align-items: stretch;
  /* Lift the pill + field up so they line up with the top of the TODAY block,
     tightening the gap to MEMBERSHIP. Scales with the band width. */
  transform: translateY(-1.2cqw);
}
.newsletter-band__input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--soft-rule);
  background: var(--white);
  color: var(--rich-black);
  padding: 0.62rem 1.1rem 0.58rem;
  font-family: var(--sans);
  font-size: 1rem;
}
.newsletter-band__input::placeholder { color: var(--ink-muted); }
.newsletter-band__input:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
  border-color: var(--brand-red);
}
.newsletter-band__actions {
  display: flex;
  justify-self: start;
}
/* Thinner pill: lower the height floor (was 2.75rem) so it's slimmer; still holds
   its height on mobile where it isn't stretched against the field. */
.newsletter-band__actions .rcg-pill { height: 100%; min-height: 2.4rem; }
.newsletter-band .rcg-pill--filled {
  background: var(--rich-black);
  border-color: var(--rich-black);
  color: var(--white);
}
.newsletter-band .rcg-pill--outline {
  background: transparent;
  color: var(--rich-black);
  border-color: var(--soft-rule);
}
.newsletter-band .rcg-pill--outline:hover { border-color: var(--rich-black); }
.newsletter-band__strap {
  margin: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  font-family: var(--sans);
  font-weight: 600;
  /* Tracked to span ~the full band width, as in the comp (TIPS ... MEMBERS.). */
  font-size: clamp(0.72rem, 1.84cqw, 1.4rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .newsletter-band__frame { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .newsletter-band__form { transform: none; }
  .newsletter-band__strap { white-space: normal; }
}
@media (max-width: 600px) {
  .newsletter-band__form { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .newsletter-band__actions { justify-self: stretch; }
  .newsletter-band__actions .rcg-pill { width: 100%; }
}

/* ── Footer ────────────────────────────────────────── */
.footer {
  view-transition-name: site-footer;
  padding: clamp(3rem, 5vw, 4.5rem) 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.footer__grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }

.footer__heading {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--rich-black);
  margin: 0 0 0.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__col li { margin-bottom: 0.35rem; }
.footer__col a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.14s var(--ease);
}
.footer__col a:hover { color: var(--rich-black); }
.footer__icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--border);
  color: var(--ink-muted);
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease), transform 0.14s var(--ease);
}
.footer__icon-link:hover {
  color: var(--rich-black);
  border-color: var(--stone);
  transform: translateY(-1px);
}
.footer__icon-link svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

.footer__bottom {
  max-width: var(--content-max);
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer__tagline {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--rich-black);
  margin: 0 0 0.15rem;
  font-size: 0.9rem;
}
.footer__sub {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.footer.footer--dark {
  background: var(--rich-black);
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: clamp(1rem, 2.8vw, 1.35rem);
  padding-right: clamp(1rem, 2.8vw, 1.35rem);
}
.footer--dark .footer__heading { color: var(--white); }
.footer--dark .footer__col a { color: rgba(255, 255, 255, 0.5); }
.footer--dark .footer__col a:hover { color: var(--white); }
.footer--dark .footer__icon-link { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.5); }
.footer--dark .footer__icon-link:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--white); }
.footer--dark .footer__bottom { border-top-color: rgba(255, 255, 255, 0.08); }
.footer--dark .footer__tagline { color: var(--white); }
.footer--dark .mailto-wrap__link { color: rgba(255, 255, 255, 0.5); }
.footer--dark .mailto-wrap__link:hover { color: var(--white); }
.footer--dark .mailto-wrap__copy { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.4); }
.footer--dark .mailto-wrap__copy:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.3); }
.footer--dark .mailto-wrap__copy svg { stroke: currentColor; }
.footer--dark .mailto-wrap__toast { background: var(--rich-black); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.15); }

.footer__legal {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
}
.footer__legal a { color: rgba(255, 255, 255, 0.4); transition: color 0.14s var(--ease); }
.footer__legal a:hover { color: var(--white); }
.footer__copy {
  margin: 0;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 640px) {
  .newsletter-band { padding-left: 0.55rem; padding-right: 0.55rem; }
  .footer { padding-left: 1.2rem; padding-right: 1.2rem; }
}

/* ── Mailto Micro-interaction ─────────────────────── */
.mailto-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}
.mailto-wrap__link {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.mailto-wrap__link:hover { color: var(--rich-black); }
.mailto-wrap__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  color: var(--stone);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform 0.15s var(--ease);
}
.mailto-wrap__copy:hover {
  color: var(--rich-black);
  border-color: var(--stone);
}
.mailto-wrap__copy svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mailto-wrap__toast {
  position: absolute;
  right: -0.25rem;
  bottom: calc(100% + 6px);
  padding: 4px 10px;
  background: var(--white);
  color: var(--rich-black);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  pointer-events: none;
}
.mailto-wrap__toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Breadcrumbs (blog + Insights) ──────────────────────────────────────
   Self-contained by default: its own width/centering/top clearance, for use
   as the first element inside an unpadded <main> (blog index, single post,
   Insights). blog.css narrows this back down for archive.php, whose <main>
   already carries page-wide padding. */
.rcg-breadcrumbs {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(5.5rem, 9vw, 7rem) clamp(1.2rem, 3vw, 2rem) 0;
}
.rcg-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.rcg-breadcrumbs__item { display: flex; align-items: center; gap: 0.4rem; }
.rcg-breadcrumbs__item a { color: var(--ink-muted); transition: color 0.14s var(--ease); }
.rcg-breadcrumbs__item a:hover { color: var(--brand-red); }
.rcg-breadcrumbs__item [aria-current="page"] { color: var(--rich-black); }
.rcg-breadcrumbs__sep { color: var(--stone); }

/* ── Logged-in admin bar ───────────────────────────────────────────────
   WordPress pins its own bar to the top for logged-in users (32px desktop,
   46px under 783px, un-fixed under 600px). The site header and the contact
   overlay are fixed to the viewport, so they slide down by the same amount
   when that bar is present. Visitors never have the admin-bar class, so the
   public site is untouched. */
.admin-bar .header {
  top: 32px;
}
.admin-bar .contact-overlay {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .header {
    top: 46px;
  }
  .admin-bar .contact-overlay {
    top: 46px;
  }
}
@media screen and (max-width: 600px) {
  .admin-bar .header,
  .admin-bar .contact-overlay {
    top: 0;
  }
}