@charset "UTF-8";
/* ================================================
   GATHER - Responsive Stylesheet
   Grid: 12-col (desktop) / 8-col (tablet) / 4-col (mobile)
   Reusable across all pages
   ================================================ */

/* --- Design Tokens --- */
:root {
  /* Colors — Gather Brand System */
  --color-primary: #ee4b22;    /* Progress Orange */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-ink: #404040;        /* Impact Black — body & headline copy on light surfaces */
  --color-gray: #767676;       /* muted grey — service items, intros */
  --color-hairline: #cccccc;   /* hairline rules, borders, image placeholders */

  /* Typography — font stacks (referenced everywhere via these tokens) */
  --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;   /* body & headings */
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;        /* nav, buttons, UI */
  --font-eyebrow: Arial, Helvetica, sans-serif;                       /* ALL-CAPS eyebrows */
  --font-primary: var(--font-sans);                                   /* legacy alias */
  --line-height-body: 1.4;
  --line-height-loose: 1.6;

  /* Fluid Font Sizes — scale from 390px (mobile) to 1440px (desktop) */
  --fs-body-xl: clamp(1.25rem, 1.018rem + 0.952vw, 1.875rem);
  --fs-body-lg: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
  --fs-body: clamp(1rem, 0.953rem + 0.19vw, 1.125rem);
  --fs-body-sm: clamp(0.875rem, 0.828rem + 0.19vw, 1rem);
  --fs-episode-label: clamp(0.656rem, 0.517rem + 0.571vw, 1.031rem);
  --fs-cta: clamp(1.125rem, 1.032rem + 0.381vw, 1.375rem);
  --fs-cta-lg: clamp(1.125rem, 0.986rem + 0.571vw, 1.5rem);
  --fs-service-item: clamp(1rem, 0.907rem + 0.381vw, 1.25rem);
  --fs-caption: clamp(1rem, 0.953rem + 0.19vw, 1.125rem);
  --fs-footer: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);

  /* Grid — Mobile-first */
  --grid-columns: 4;
  --grid-gutter: 1rem;
  --grid-margin: 1.25rem;
  --grid-max-width: 90rem;

  /* Section Spacing */
  --section-py: clamp(3rem, 2rem + 4vw, 6rem);

  /* Component Spacing */
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
}

@media (min-width: 48rem) {
  :root {
    --grid-columns: 8;
    --grid-gutter: 1.5rem;
    --grid-margin: 2rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --grid-columns: 12;
    --grid-gutter: 1.5rem;
    --grid-margin: 2rem;
  }
}


/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  line-height: var(--line-height-body);
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
}


/* --- Grid System --- */
.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* Fluid grid at any width, side margins = 2x the gutter */
.fluid-grid .container {
  max-width: none;
  padding-inline: calc(var(--grid-gutter) * 2);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
}
.col-4  { grid-column-end: span 4; }

/* Tablet spans (8-col) */
@media (min-width: 48rem) {
  .col-md-4  { grid-column-end: span 4; }
  .col-md-5  { grid-column-end: span 5; }
  .col-md-6  { grid-column-end: span 6; }
  .col-md-8  { grid-column-end: span 8; }
}

/* Desktop spans (12-col) */
@media (min-width: 64rem) {
  .col-lg-3  { grid-column-end: span 3; }
  .col-lg-4  { grid-column-end: span 4; }
  .col-lg-5  { grid-column-end: span 5; }
  .col-lg-6  { grid-column-end: span 6; }
  .col-lg-8  { grid-column-end: span 8; }
}

/* Column start positions */
@media (min-width: 48rem) {
  .col-md-start-4 { grid-column-start: 4; }
}

@media (min-width: 64rem) {
  .col-lg-start-4 { grid-column-start: 4; }
  .col-lg-start-5 { grid-column-start: 5; }
}


/* --- Typography Utilities --- */
.section-label {
  font-family: var(--font-eyebrow);
  font-size: clamp(0.9rem, 0.86rem + 0.15vw, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-ink);
  line-height: var(--line-height-body);
}


/* --- Components --- */

/* Image Placeholder */
.img-placeholder {
  background-color: var(--color-hairline);
  width: 100%;
  position: relative;
  overflow: hidden;
}
.img-placeholder--video   { aspect-ratio: 16 / 9; }
.img-placeholder--feature { aspect-ratio: 3 / 2; }

/* Video fills its 16:9 frame exactly (no crop) and stays fully interactive */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.img-placeholder__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* CTA Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.btn:hover { opacity: 0.85; }

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-cta);
  padding: 0.75rem 2.5rem;
}

.btn--primary-wide {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-cta-lg);
  padding: 0.75rem 1.3125rem;
}

@media (max-width: 47.9375rem) {
  .btn--primary,
  .btn--primary-wide {
    width: 100%;
    padding-block: 1rem;
  }
}

/* Tag / Badge */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #3F3633;
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.5rem 0.625rem;
  border-radius: 0;
}

/* Carousel Dots */
.carousel-dots {
  display: flex;
  gap: clamp(3rem, 2rem + 3vw, 5rem);
  justify-content: center;
}

.carousel-dot {
  width: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
  height: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
  border-radius: 50%;
  background-color: rgba(217, 217, 217, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-dot--active {
  background-color: #ffffff;
}

/* Service List Item */
.service-item {
  padding-top: clamp(0.9375rem, 0.75rem + 0.5vw, 1.125rem);
  border-top: 1px solid var(--color-hairline);
}

.service-item__name {
  font-size: var(--fs-service-item);
  font-weight: 400;
  color: var(--color-gray);
}

/* Hamburger Menu Icon */
.hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;              /* original spacing between bars */
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  transition: opacity 0.3s ease;
}

.hamburger span {
  display: block;
  width: 1.5rem;               /* 24px wide, 16px tall stack */
  height: 0.125rem;
  background-color: var(--color-white);
}

/* Section wrapper */
.section {
  padding-block: var(--section-py);
}


/* ================================================
   SECTION: Navigation
   ================================================ */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav__links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.nav__link {
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.nav__link:hover {
  color: var(--color-primary);
  opacity: 1;
}

@media (min-width: 64rem) {
  .nav__links {
    display: flex;
  }
  .hamburger {
    display: none;
  }
}


/* ================================================
   SECTION: Sticky Nav (scroll-reveal)
   ================================================ */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  padding-block: clamp(0.8rem, 0.6rem + 0.6vw, 1.2rem);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.sticky-nav--visible {
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sticky-nav__logo {
  display: block;
  width: clamp(4rem, 3.5rem + 1.5vw, 5.5rem);
}

.sticky-nav__logo img {
  width: 100%;
  height: auto;
}

.sticky-nav__links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.sticky-nav__link {
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.sticky-nav__link:hover {
  color: var(--color-primary);
  opacity: 1;
}

.sticky-nav__hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;             /* original spacing between bars */
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  transition: opacity 0.3s ease;
}

.sticky-nav__hamburger span {
  display: block;
  width: 1.5rem;              /* 24px wide, 16px tall stack */
  height: 0.125rem;
  background-color: var(--color-white);
}

@media (min-width: 64rem) {
  .sticky-nav__links {
    display: flex;
  }
  .sticky-nav__hamburger {
    display: none;
  }
}


/* ================================================
   SECTION: Menu Overlay
   ================================================ */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--color-black);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.menu-overlay--open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.menu-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem) var(--grid-margin);
}

.menu-overlay__logo {
  display: block;
  width: 5rem;
}

.menu-overlay__logo img {
  width: 100%;
  height: auto;
}

.menu-overlay__close {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;             /* square button box */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Three bars (two spans + ::after middle) that morph between a hamburger and an X */
.menu-overlay__close span,
.menu-overlay__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1.75rem;
  height: 0.125rem;
  background-color: var(--color-white);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Closed state = hamburger (top bar / middle / bottom bar) */
.menu-overlay__close span:first-child { transform: translate(-50%, -50%) translateY(-0.5rem); }
.menu-overlay__close::after           { transform: translate(-50%, -50%); }
.menu-overlay__close span:last-child  { transform: translate(-50%, -50%) translateY(0.5rem); }

/* Open state = X (outer bars cross to the centre, middle bar fades out) */
.menu-overlay--open .menu-overlay__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-overlay--open .menu-overlay__close span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }
.menu-overlay--open .menu-overlay__close::after           { opacity: 0; }

.menu-overlay__links {
  list-style: none;
  margin: 0;
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--grid-margin) 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.menu-overlay__link {
  display: block;
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
  font-weight: 400;
  opacity: 0;
  transform: translateX(3rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.menu-overlay--open .menu-overlay__link {
  opacity: 1;
  transform: translateX(0);
}

.menu-overlay__link:hover {
  color: var(--color-primary);
  opacity: 1;
}

.menu-open .hamburger,
.menu-open .sticky-nav__hamburger {
  opacity: 0;
  pointer-events: none;
}



/* ================================================
   SECTION: Hero
   ================================================ */
.hero {
  position: relative;
  overflow: hidden;
}

/* --- Carousel slides --- */
.hero__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__slide:first-child {
  position: relative;
}

.hero__slide--active {
  z-index: 1;
  pointer-events: auto;
}

.hero__image {
  position: relative;
  width: 100%;
  min-height: 100svh;
  background-color: var(--color-black);
  overflow: hidden;
}

.hero__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s ease, transform 1.2s ease;
}

.hero__slide--active .hero__slide-img {
  opacity: 0.75;
  transform: scale(1);
}

/* --- Carousel caption transitions --- */
.hero__slide .hero__caption-name {
  opacity: 0;
  transform: translateX(3rem);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

.hero__slide--active .hero__caption-name {
  opacity: 1;
  transform: translateX(0);
}

.hero__slide .hero__caption-desc {
  opacity: 0;
  transform: translateX(3rem);
  transition: opacity 0.6s ease 0.55s, transform 0.6s ease 0.55s;
}

.hero__slide--active .hero__caption-desc {
  opacity: 1;
  transform: translateX(0);
}

/* --- Persistent overlays --- */
.hero__logo-mark {
  position: absolute;
  z-index: 2;
  left: var(--grid-margin);
  top: clamp(22.4375rem, 18rem + 12vw, 27.25rem);
}

.hero__logo-img {
  width: clamp(8.4375rem, 6rem + 8vw, 11.1875rem);
  height: auto;
  display: block;
}

.hero__logo-tagline {
  font-size: clamp(0.7rem, 0.56rem + 0.4vw, 1rem);
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: -0.01em;
  margin-top: 0.275rem;
  padding-bottom: 2.5rem;
}

.hero__caption {
  position: absolute;
  left: var(--grid-margin);
  bottom: clamp(7rem, 5rem + 6vw, 12rem);
  max-width: 32rem;
}

.hero__caption-name {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-white);
  line-height: var(--line-height-body);
}

.hero__caption-desc {
  font-size: var(--fs-caption);
  font-weight: 300;
  color: var(--color-white);
  line-height: var(--line-height-body);
}

.hero__dots {
  position: absolute;
  z-index: 2;
  bottom: clamp(4rem, 3rem + 3vw, 6rem);
  left: 50%;
  transform: translateX(-50%);
}


/* ================================================
   SECTION: About Us
   ================================================ */
.about {
  padding-block: var(--section-py);
}

.about__label {
  margin-bottom: clamp(5rem, 2rem + 12vw, 200px);
}

.about__content {
  margin-bottom: var(--space-lg);
}

.about__heading {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-ink);
}

.about__heading strong {
  font-weight: 700;
}

.about__cta {
  margin-top: calc(var(--space-lg) * 2);
}


/* ================================================
   SECTION: Perspectives (Signal + Features, light surface)
   ================================================ */
.perspectives {
  background-color: var(--color-white);
  color: var(--color-ink);
  padding-block: var(--section-py);
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Sub-section: Gather Signal */
.signal {
  margin-bottom: var(--space-3xl);
}

.signal__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* Eyebrows / category labels — Arial Bold, ALL CAPS, Progress Orange */
.signal__eyebrow,
.feature-card__eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: var(--line-height-body);
  margin-bottom: 0.25rem;
}

.signal__logo-img {
  width: clamp(5.875rem, 4rem + 5vw, 9.9625rem);
  height: auto;
  display: block;
}

.signal__video {
  position: relative;
  margin-bottom: var(--space-lg);
}

/* Headlines — Merriweather, Impact Black */
.signal__episode-title,
.feature-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--color-ink);
  line-height: var(--line-height-body);
}

.signal__episode-desc,
.feature-card__desc {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  color: var(--color-ink);
  line-height: var(--line-height-body);
  margin-top: 0;
}

/* Sub-section: Features */
.features {
  margin-top: var(--space-3xl);
}

.features__label {
  margin-bottom: var(--space-lg);
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 48rem) {
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 64rem) {
  .features__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card__tag {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-sm);
}

.feature-card__image {
  margin-bottom: var(--space-md);
}

.perspectives__cta {
  margin-top: calc(var(--space-2xl) * 2);
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 47.9375rem) {
  .perspectives__cta {
    justify-content: stretch;
  }
}


/* ================================================
   SECTION: Services
   ================================================ */
.services {
  background-color: var(--color-white);
  padding-block: var(--section-py);
}

.services__label {
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.services__intro {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  color: var(--color-ink);
  line-height: var(--line-height-body);
  margin-bottom: var(--space-2xl);
}

.services__intro-title {
  color: var(--color-ink);
  font-weight: 700;
}

.services__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 48rem) {
  .services__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

.services__column-title {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}

.services__list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 0.5rem + 0.3vw, 0.75rem);
}


/* ================================================
   SECTION: Footer
   ================================================ */
.footer {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-block: var(--section-py);
}

.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

@media (min-width: 48rem) {
  .footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.footer__brand {
  flex-shrink: 0;
}

.footer__logo img {
  width: clamp(7rem, 5rem + 5vw, 11.1875rem);
  height: auto;
}

@media (min-width: 48rem) {
  .footer__logo img {
    width: clamp(5.25rem, 3.75rem + 3.75vw, 8.39rem);
  }
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

@media (min-width: 48rem) {
  .footer__nav {
    flex-direction: row;
    gap: clamp(3rem, 2rem + 5vw, 8rem);
  }
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
}

.footer__nav-link {
  font-size: var(--fs-footer);
  font-weight: 400;
  color: var(--color-white);
  line-height: var(--line-height-loose);
  transition: color 0.2s ease;
}

.footer__nav-link:hover {
  color: var(--color-primary);
}

.footer__nav-link--social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__nav-link--social svg {
  opacity: 0.4;
  flex-shrink: 0;
}

.footer__bottom {
  font-size: var(--fs-footer);
  font-weight: 400;
  color: var(--color-white);
  line-height: var(--line-height-loose);
}
.footer__rights { color: #828282; }
.mt-lg  { margin-top: var(--space-lg); }
.mt-2xl { margin-top: var(--space-2xl); }

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0;
  transform: translateX(5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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


/* ================================================
   PAGE: Perspectives (interior, light)
   ================================================ */

/* --- Interior page nav (light) --- */
.page-nav,
.page-interior-light .nav { /* mwinters@gather.co */
  background-color: var(--color-white);
  padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.page-nav .container,
.page-interior-light .nav .container { /* mwinters@gather.co */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-nav__logo,
.page-interior-light .nav__logo { /* mwinters@gather.co */
  display: block;
  width: clamp(4rem, 3.5rem + 1.5vw, 5.5rem);
}

.page-nav__logo img,
.page-interior-light .nav__logo img { /* mwinters@gather.co */
  width: 100%;
  height: auto;
}

.page-nav__links,
.page-interior-light .nav__links { /* mwinters@gather.co */
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.page-nav__link,
.page-interior-light .nav__link { /* mwinters@gather.co */
  color: var(--color-black);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.page-nav__link:hover,
.page-interior-light .nav__link:hover { /* mwinters@gather.co */
  color: var(--color-primary);
}

.hamburger--dark span,
.page-interior-light .hamburger span { /* mwinters@gather.co */
  background-color: var(--color-black);
}

.page-home .nav .container .nav__logo { display: none; } /* mwinters@gather.co */

/* Active (current-page) nav link */
.page-nav__link.is-active,
.sticky-nav__link.is-active,
.menu-overlay__link.is-active,

.page-interior-light .page-nav__link.is-active {
  color: var(--color-primary);
  pointer-events: none;
  cursor: default;
}

@media (min-width: 64rem) {
  .page-nav__links,
  .page-interior-light .nav__links {
    display: flex;
  }
  .page-nav .hamburger,
  .page-interior-light .hamburger {
    display: none;
  }
}

/* The Signal logo title */
.persp-signal-title {
  display: block;
  width: clamp(9rem, 7rem + 8vw, 12.8125rem);
  height: auto;
  margin-bottom: var(--space-xl);
}

/* Intro paragraph block — Merriweather Light, Impact Black */
.persp-intro__text {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 300;
  color: var(--color-ink);
  line-height: var(--line-height-body);
}

.persp-intro__text + .persp-intro__text {
  margin-top: 1.25rem;
}

/* --- Perspectives layout --- */
.persp {
  background-color: var(--color-white);
  padding-top: var(--section-py);
  padding-bottom: 200px;
}

/* Hairline between every section — ~100px of space above and below the rule */
.persp__section {
  border-top: 1px solid var(--color-hairline);
  margin-top: 100px;
  padding-top: 100px;
}

/* Flush variant — sits directly under the preceding block (no rule) */
.persp__section--flush {
  border-top: none;
  margin-top: var(--space-2xl);
  padding-top: 0;
}

.persp-heading {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem);
  font-weight: 400;
  color: var(--color-black);
  margin-bottom: var(--space-lg);
}

/* Filter pill bar */
.persp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: var(--space-3xl);
}

.persp-filter {
  font-family: var(--font-primary);
  /* Text reduced 20%; the height lost is added back as vertical padding so the
     button height is unchanged at every viewport (padding also widened). */
  font-size: clamp(0.8rem, 0.64rem + 0.64vw, 1.1rem);
  font-weight: 400;
  line-height: 1;
  padding: calc(0.5rem + 0.1 * clamp(1rem, 0.8rem + 0.8vw, 1.375rem)) 1rem;
  border: none;
  cursor: pointer;
  background-color: #f6f6f6;
  color: var(--color-primary);
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.7s ease, transform 0.7s ease;
}

.persp-filter:hover {
  background-color: #ececec;
}

.persp-filter__n {
  color: var(--color-primary);
}

.persp-filter__label {
  color: var(--color-black);
}

.persp-filter.is-active {
  background-color: var(--color-primary);
}

.persp-filter.is-active .persp-filter__n,
.persp-filter.is-active .persp-filter__label {
  color: var(--color-white);
}

@media (max-width: 47.99rem) {
  .persp-filters {
    flex-direction: column;
    gap: 0.625rem;
  }

  .persp-filter {
    width: 100%;
    /* Mobile keeps the full-size text (no 20% reduction) + original padding */
    font-size: clamp(1rem, 0.8rem + 0.8vw, 1.375rem);
    padding: 1rem 0.625rem;
    text-align: left;
  }
}

/* Featured hero */
.persp-featured__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #e6e6e6;
  margin-bottom: var(--space-md);
  overflow: hidden;
}

.persp-featured__text {
  max-width: 52rem;
}

/* Cards */
.p-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* Extra spacing between stacked rows within a section */
.persp-row--mt {
  margin-top: var(--space-2xl);
}

.p-card__tag {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-sm);
}

.p-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: #e6e6e6;
  margin-bottom: var(--space-md);
  overflow: hidden;
}

/* Image layer inside the fixed, clipped frame */
.p-zoom {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Item eyebrow — Arial Bold, ALL CAPS, Progress Orange */
.p-card__eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: var(--line-height-body);
  margin-bottom: 0.25rem;
}

/* Item title — Merriweather Bold, Impact Black */
.p-card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--color-ink);
  line-height: var(--line-height-body);
}

/* Item description — Merriweather Light, Impact Black */
.p-card__desc {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  color: var(--color-ink);
  line-height: var(--line-height-body);
  margin-top: 0.25rem;
}

/* Item hover: lighten the text ~20% — never the orange eyebrow */
.p-card__title,
.p-card__desc,
.team-card__name,
.team-card__role {
  transition: color 0.3s ease;
}
.p-card:hover .p-card__title,
.p-card:hover .p-card__desc,
.persp-featured-item:hover .p-card__title,
.persp-featured-item:hover .p-card__desc,
.team-card:hover .team-card__name,
.team-card:hover .team-card__role {
  color: #8a8a8a;
}

/* Light pill variant */
.tag--light {
  background-color: #f6f6f6;
  color: #6d6d6d;
}

/* Row gaps */
.persp-row {
  row-gap: var(--space-2xl);
}

/* View-all buttons */
.btn--dark {
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: var(--fs-cta);
  padding: 0.75rem 2.5rem;
}

.persp-viewall {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2xl);
}

@media (max-width: 47.9375rem) {
  .btn--dark {
    width: 100%;
    padding-block: 1rem;
  }
}

/* ================================================
   CONSOLIDATED PAGE STYLES
   (formerly per-page css/*.css — merged Sep 2026)
   ================================================ */

/* ------------------------------------------------
   Shared: page title — orange Merriweather Light, 64px
   Used by Work, Team, Contact, Links, Privacy, Press.
   Base margin = --space-xl; override with a modifier.
   ------------------------------------------------ */
.page-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 4rem;
  line-height: 1.1;
  color: var(--color-primary);
  margin: 0 0 var(--space-xl);
}
@media (max-width: 63.99rem) { .page-title { font-size: 3.2rem; } }
.page-title--flush  { margin-bottom: 0; }
.page-title--mb-sm  { margin-bottom: var(--space-sm); }
.page-title--mb-lg  { margin-bottom: var(--space-lg); }
.page-title--mb-3xl { margin-bottom: var(--space-3xl); }

/* ------------------------------------------------
   Shared: sub-heading — Merriweather Bold, body size
   Used by Team intro & Privacy legal notice.
   ------------------------------------------------ */
.subhead {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-ink);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: var(--line-height-body);
  margin: 0 0 var(--space-md);
}
.subhead--flush { margin-bottom: 0; }
.subhead--legal { margin: var(--space-2xl) 0 var(--space-md); }

/* ------------------------------------------------
   Shared: form controls — Contact & Lead-capture
   ------------------------------------------------ */
.field {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-hairline);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-ink);
}
textarea.field { min-height: 9rem; resize: vertical; }
.field:focus { outline: none; border-color: var(--color-primary); }
.form-label {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-ink);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0;
}
.form-label--spaced { margin-bottom: 1rem; }

/* ================================================
   Article / case-study component
   Used by: signal_styles1, signal_styles2, work_styles
   ================================================ */
/* Caps the reading measure (title block + body) for comfortable line length (~70 chars) */
.article-measure { max-width: 32rem; }
.article__eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 700; text-transform: uppercase;
  font-size: 0.875rem; color: var(--color-primary);
  margin: 0 0 0.75rem;
}
.article__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.15; color: var(--color-primary);
  margin: 0 0 1rem;
}
/* Byline: author avatar + name link (articles) */
.article-byline {
  display: flex; align-items: center; gap: 0.85rem;
  margin: 0 0 var(--space-xl);
}
.article-byline__avatar {
  width: 3rem; height: 3rem; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.article__byline {
  font-family: var(--font-serif);
  font-weight: 300; font-style: italic;
  font-size: 1rem; color: var(--color-gray);
  margin: 0;
}
.article__byline--dek { margin-bottom: var(--space-xl); }   /* work case-study dek */
.article__byline a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; }
.article__byline a:hover { color: var(--color-ink); }
.article__figure { margin: 2rem 0; }
.article__figure img { width: 100%; height: auto; display: block; }
.article__figure--hero { margin: 0 0 var(--space-xl); }
/* Full-bleed hero — edge to edge, above the article (signal_styles2) */
.article-hero-fullbleed { width: 100%; }
.article-hero-fullbleed img { display: block; width: 100%; height: auto; }
/* Full-bleed hero image block — 545px (work case study) */
.work-hero { width: 100%; height: 545px; background: #e6e6e6 url('../img-temp/work_placeholder.webp') center / cover no-repeat; }
/* Body text — 1rem, Merriweather Light */
.article__text,
.article-measure p {
  font-family: var(--font-serif);
  font-weight: 300; font-size: 1rem; line-height: 1.7;
  color: var(--color-ink); margin: 0 0 1.25rem;
}
.article__text a, .article__quote a,
.article-measure p a, .article-measure blockquote a  { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.article__text a:hover, .article__quote a:hover,
.article-measure p a:hover, .article-measure blockquote a { color: var(--color-ink); }
.article__subhead {
  font-family: var(--font-serif);
  font-weight: 700; color: var(--color-ink);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.3; margin: 2.5rem 0 1rem;
}
.article__subhead[id] { scroll-margin-top: 6rem; }   /* clear the sticky nav */
.article__quote {
  padding: 0.25rem 0; margin: 1.75rem 15%;
  font-family: var(--font-serif);
  font-weight: 300; font-style: italic;
  font-size: 1.0625rem; line-height: 1.6; color: var(--color-ink);
}
.article__list { margin: 0 0 1.25rem 1.25rem; }
.article__list li {
  font-family: var(--font-serif);
  font-weight: 300; font-size: 1rem; line-height: 1.7;
  color: var(--color-ink); list-style: disc; margin-bottom: 0.4rem; padding-left: 0.25rem;
}
.article__cta { margin-top: var(--space-xl); }   /* work case-study CTA */
.article__back {
  display: inline-block; margin-top: var(--space-2xl);
  font-family: var(--font-sans);
  font-size: 0.95rem; font-weight: 700; color: var(--color-primary); text-decoration: none;
}
.article__back:hover { color: var(--color-ink); }
/* Back link variant: Material arrow + regular weight */
.article__back--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 400;
}
.article__back--icon .material-symbols-outlined { font-size: 1.25rem; line-height: 1; }

/* ----- Article sidebar: Topics (TOC) + Share ----- */
.article-sidebar { display: none; }
.article-sidebar__sticky { position: static; }
.topics-dropdown {
  margin: 0 0 var(--space-xl);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
.topics-dropdown > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 0;
  font-family: var(--font-eyebrow); font-weight: 700; text-transform: uppercase;
  font-size: 0.875rem; color: var(--color-primary);
}
.topics-dropdown > summary::-webkit-details-marker { display: none; }
.topics-dropdown > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--color-ink); }
.topics-dropdown[open] > summary::after { content: "\2013"; }
.topics-dropdown .article-toc { margin: 0.25rem 0 1rem; }
.article-share-group--inline {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-hairline);
}
.article-sidebar__label {
  font-family: var(--font-eyebrow);
  font-weight: 700; text-transform: uppercase;
  font-size: 0.875rem; color: var(--color-primary);
  margin: 0 0 1rem;
}
.article-toc { list-style: disc; margin: 0 0 var(--space-xl); padding: 0 0 0 1.1rem; }
.article-toc li { margin: 0 0 0.7rem; padding-left: 0.15rem; }
.article-toc li::marker { color: var(--color-ink); font-size: 0.75em; }
.article-toc a {
  font-family: var(--font-serif);
  font-weight: 300; font-size: 0.9375rem; line-height: 1.4;
  color: var(--color-ink); text-decoration: none;
  transition: color 0.2s ease;
}
.article-toc a:hover { color: var(--color-primary); }
.article-share { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.article-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid var(--color-hairline); background: var(--color-white);
  color: var(--color-ink); cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.article-share__btn:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.article-share__btn svg { width: 16px; height: 16px; }
.article-share__copied {
  font-family: var(--font-sans);
  font-size: 0.8rem; color: var(--color-primary); margin: 0.6rem 0 0;
}
.article-print {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.9rem; font-weight: 700;
  color: var(--color-ink); text-decoration: none; cursor: pointer;
  transition: color 0.2s ease;
}
.article-print:hover { color: var(--color-primary); }
.article-print .material-symbols-outlined { font-size: 1.25rem; line-height: 1; }
/* Desktop: sticky sidebar in the left column; hide the inline dropdown/share */
@media (min-width: 64rem) {
  .article-sidebar { display: block; }
  .article-sidebar__sticky { position: sticky; top: 2rem; }
  .topics-dropdown, .article-share-group--inline { display: none; }
}
/* Print: drop the site chrome so just the article prints */
@media print {
  .sticky-nav, .menu-overlay, .page-nav, .footer,
  .article-sidebar, .topics-dropdown, .article-share-group--inline,
  .article__back { display: none !important; }
  .persp { padding-top: 0 !important; padding-bottom: 0 !important; }
  .persp .grid > .col-lg-start-4,
  .persp .grid > .col-lg-start-5 { grid-column: 1 / -1 !important; }
}

/* ================================================
   Home page
   ================================================ */
/* Homepage body is Merriweather by default (nav/buttons/pills stay sans) */
.page-home { font-family: var(--font-serif); }
/* Home pills — sans-serif text, light-grey background */
.page-home .tag {
  font-family: var(--font-sans);
  background-color: #f3f3f3;
  color: var(--color-ink);
}
/* Hairline section dividers */
.rule-hairline { border: 0; border-top: 1px solid var(--color-hairline); margin: 0; }
/* Consistent space above section titles (rule -> title) */
.about.section,
.services.section,
.clients-list.section { padding-top: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
/* Full Client List */
.clients-list__label { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.clients-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--grid-gutter);
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-service-item);
  color: var(--color-ink);
}
.clients-list__grid li { padding-block: 0.45rem; }
/* Podcast pill — right-aligned, ~20px above the Signal video */
.signal__tag-row { display: flex; justify-content: flex-end; margin-bottom: 20px; }
/* Services — capability-area descriptions + closing line */
.services__desc {
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--color-ink);
  margin: 0;
}
.services__close {
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--color-ink);
  margin-top: var(--space-2xl);
}
/* Services — single-column capability areas (aligned to the About Us indent) */
.services__area { margin-bottom: var(--space-lg); }
.services__area:last-child { margin-bottom: 0; }
.services__area-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  color: var(--color-ink);
  margin: 0 0 0.25rem;
}
@media (max-width: 47.99rem) {
  .services.section { padding-bottom: calc(var(--section-py) * 2); }
  .clients-list__grid { grid-template-columns: 1fr; }
  .footer__nav-list { gap: 1rem; }
}

/* ================================================
   Contact page
   ================================================ */
.contact-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .contact-info {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-gutter);
  }
}
.contact-block__lines {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--color-ink);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0;
}
.contact-block__lines a { color: var(--color-primary); text-decoration: none; }
.contact-block__lines a:hover { color: var(--color-ink); }
.contact-block__lines a.contact-block__tel { color: var(--color-ink); }
/* Map */
.contact-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-hairline);
  background: #e6e6e6;
}
.contact-map__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  pointer-events: none;
}
.contact-map__link {
  display: inline-block;
  margin-top: 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.contact-map__link:hover { color: var(--color-ink); }
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1);
  pointer-events: none;
}
@media (max-width: 63.99rem) {
  .contact-map { margin-top: var(--space-xl); }
}
.contact-heading {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--color-ink);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 var(--space-lg);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.contact-form .btn { margin-top: 0.5rem; }
.contact-confirm {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--color-ink);
  font-size: 1.125rem;
  margin: 0;
}

/* ================================================
   Team page
   ================================================ */
/* Section labels (LEADERSHIP / OUR COLLECTIVE) — larger + more space than the base */
.section-label {
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.125rem);
  margin: 0 0 var(--space-2xl);
}
.team-card { display: flex; flex-direction: column; }
.team-card__photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  background-color: #d9d9d9;
  background-size: cover;
  background-position: center;
  margin-bottom: var(--space-md);
}
.team-card__name {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-ink);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: var(--line-height-body);
  margin: 0;
}
.team-card__role {
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--color-ink);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: var(--line-height-body);
  margin: 0;
}
.stat__n {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-primary);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  line-height: 1;
  margin: 0;
}
.stat__pct { font-size: 0.5em; }
/* Pull the following digit closer to a leading "1" (Helvetica's 1 has a wide side bearing) */
.stat__one { margin-right: -0.1em; }
.stat__label {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  margin: var(--space-sm) 0 0;
}
.team-map {
  width: 100vw;
  margin: var(--space-2xl) 0 0 calc(50% - 50vw);
  aspect-ratio: 2 / 1;
  background-color: transparent;
  background-image: url('../img-temp/team_map.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.team-cta { margin-top: var(--space-lg); }

/* ================================================
   Press page
   ================================================ */
.press-list { margin-top: var(--space-2xl); }
.press-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  text-decoration: none;
  color: inherit;
}
.press-item__inner {
  grid-column: 5 / span 8;
  display: grid;
  grid-template-columns: 2fr 6fr;
  column-gap: var(--grid-gutter);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--color-hairline);
}
.press-item__img {
  background-color: #b1b1b1;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.press-item__img img {
  max-width: 100%;
  max-height: 70%;
  object-fit: contain;
}
.press-item__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.press-item__eyebrow {
  font-family: var(--font-eyebrow);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: var(--line-height-body);
  margin-bottom: 0.25rem;
}
.press-item__title {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 2rem);
  font-weight: 700;
  color: var(--color-ink);
  line-height: var(--line-height-body);
}
.press-item__title,
.press-item__eyebrow { transition: color 0.3s ease; }
.press-item:hover .press-item__title { color: #8a8a8a; }
@media (max-width: 63.99rem) {
  .press-item__inner { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  .press-item__inner { grid-template-columns: 1fr; row-gap: 1rem; }
  .press-item__img { max-width: 10rem; }
}

/* ================================================
   Signal page
   ================================================ */
/* The Signal logo masthead is the page's <h1> (spacing from the logo margin) */
.persp-signal-heading { margin: 0; }
/* Reduce the Gather Signal title logo by 20% */
.persp-signal-title { width: clamp(7.2rem, 5.6rem + 6.4vw, 10.25rem); }
/* Hairline rule between the Latest Episode video and the filters */
.signal-rule {
  border: 0;
  border-top: 1px solid var(--color-hairline);
  margin: var(--space-3xl) 0 0;
}
/* Pin the Subscribe column to the right edge of the grid on desktop
   (independent of the intro column width) */
@media (min-width: 64rem) {
  .subscribe-col { grid-column: 9 / -1; }
}
/* ----- Subscribe expander ----- */
.subscribe {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  font-family: var(--font-sans);
}
.subscribe__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
}
.subscribe__icon {
  font-size: 1.35em;
  line-height: 1;
  transition: transform 0.3s ease;
}
.subscribe.is-open .subscribe__icon { transform: rotate(45deg); }
.subscribe__panel {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.subscribe.is-open .subscribe__panel {
  max-height: 26rem;
  opacity: 1;
  margin-top: 1rem;
}
.subscribe__inner {
  border: 1px solid var(--color-hairline);
  background: var(--color-white);
  padding: 1.25rem;
}
.subscribe__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-ink);
  font-size: 1.125rem;
  margin: 0 0 0.85rem;
}
.subscribe__form { display: flex; gap: 0.5rem; }
.subscribe__input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-hairline);
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-ink);
}
.subscribe__input:focus { outline: none; border-color: var(--color-primary); }
.subscribe__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.85rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
}
.subscribe__submit .material-symbols-outlined { font-size: 1.35rem; line-height: 1; }
.subscribe__confirm { color: var(--color-ink); font-size: 0.95rem; margin: 0; }
.subscribe__links { display: flex; gap: 1.25rem; margin-top: 1.1rem; }
.subscribe__links a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition: color 0.2s ease;
}
.subscribe__links a:hover { color: var(--color-ink); }
@media (max-width: 63.99rem) {
  .subscribe { align-items: flex-start; margin-top: 1.5rem; }
}

/* ================================================
   Privacy Policy page
   ================================================ */
/* Policy links inherit the brand orange */
.persp-intro__text a { color: var(--color-primary); text-decoration: none; }
.persp-intro__text a:hover { color: var(--color-ink); }

/* ================================================
   Lead-capture page
   ================================================ */
.lead-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.15; color: var(--color-primary);
  margin: 0 0 var(--space-xl);
}
.lead-grid { row-gap: var(--space-2xl); align-items: start; }
.lead-cover {
  width: 100%; max-width: 24rem; height: auto; display: block;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
}
.lead-intro {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.5; color: var(--color-ink);
  margin: 0 0 var(--space-lg);
}
.lead-form { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
/* Opt-in marketing checkbox */
.lead-optin {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.9rem; line-height: 1.5; color: var(--color-gray);
  cursor: pointer; margin: 0.25rem 0;
}
.lead-optin input {
  margin-top: 0.15rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0;
  accent-color: var(--color-primary); cursor: pointer;
}
.lead-form .btn { margin-top: 0.5rem; align-self: flex-start; }
@media (max-width: 47.9375rem) {
  .lead-form .btn { align-self: stretch; }
}
.lead-confirm {
  font-family: var(--font-serif);
  font-weight: 300; color: var(--color-ink);
  font-size: 1.125rem; margin: var(--space-md) 0 0;
}
.lead-footnote {
  font-family: var(--font-sans);
  font-size: 0.95rem; color: var(--color-gray);
  margin: var(--space-xl) 0 0;
}
.lead-footnote a { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.lead-footnote a:hover { color: var(--color-ink); }

/* ================================================
   Links index page
   ================================================ */
.links-note {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(0.9375rem, 0.75rem + 0.75vw, 1.3125rem);
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 var(--space-2xl);
}
.links-list { list-style: none; margin: 0; padding: 0; }
.links-list li { margin: 0 0 0.9rem; }
.links-list li:last-child { margin-bottom: 0; }
.links-list__group { margin-top: var(--space-lg); }
.links-list a {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.3;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.links-list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ================================================
   STYLE GUIDE (dev-only page: styleguide/index.html)
   Body rule scoped to .sg-body so it can't leak to real pages.
   ================================================ */
/* ===========================================================
   Style-guide chrome (scoped with .sg-). Specimens use the real
   site classes from styles.css so everything renders authentically;
   readouts below each specimen are computed live from the DOM and
   update on resize. Page-specific specimens (page titles, team &
   contact type) are re-declared here, labelled with their source.
   =========================================================== */
.sg-body { background: #fafafa; color: var(--color-ink); }

.sg-wrap { max-width: 72rem; margin-inline: auto; padding: 2rem 1.5rem 6rem; }

.sg-head {
  position: sticky; top: 0; z-index: 5;
  background: #ffffff; border-bottom: 1px solid var(--color-hairline);
  padding: 1rem 1.5rem;
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.sg-head h1 {
  font-family: 'Merriweather', Georgia, serif; font-weight: 700;
  font-size: 1.5rem; color: var(--color-ink); margin-right: auto;
}
.sg-bp {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  background: var(--color-primary); color: #fff;
}
.sg-bp small { font-weight: 400; opacity: 0.85; }

.sg-section { margin-top: 3.5rem; }
.sg-section > h2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-gray);
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-hairline);
  margin-bottom: 1.5rem;
}

.sg-row { padding: 1.4rem 0; border-bottom: 1px dashed #e2e2e2; }
.sg-sample { margin-bottom: 0.9rem; }
.sg-sample--dark {
  background: var(--color-black); padding: 1.25rem 1.5rem; border-radius: 6px;
}
.sg-sample--photo {
  background: linear-gradient(135deg, #2a2a2a, #555); padding: 1.5rem;
  border-radius: 6px;
}

.sg-meta {
  display: flex; gap: 0.5rem 1.5rem; flex-wrap: wrap; align-items: baseline;
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.8rem;
}
.sg-name { color: var(--color-ink); font-weight: 700; }
.sg-tag {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: 3px;
  background: #ecebff; color: #4b3fce; font-weight: 700; font-size: 0.72rem;
}
.sg-readout { color: var(--color-gray); }
.sg-readout b { color: var(--color-primary); font-weight: 700; }

/* Colour swatches */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.sg-swatch { border: 1px solid var(--color-hairline); border-radius: 6px; overflow: hidden; background:#fff; }
.sg-chip { height: 5rem; }
.sg-swatch__meta { padding: 0.6rem 0.7rem; font-family: 'SF Mono', Menlo, monospace; font-size: 0.75rem; }
.sg-swatch__meta b { display: block; color: var(--color-ink); margin-bottom: 0.15rem; font-family: 'Helvetica Neue', sans-serif; }
.sg-swatch__meta span { color: var(--color-gray); }

/* Component demos */
.sg-demo { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.sg-demo--dark { background: var(--color-black); padding: 1.5rem; border-radius: 6px; }

/* SEO table */
.sg-table { width: 100%; border-collapse: collapse; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.9rem; }
.sg-table th, .sg-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-hairline); vertical-align: top; }
.sg-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gray); }
.sg-table code { font-family: 'SF Mono', Menlo, monospace; font-size: 0.82rem; color: var(--color-primary); }
.sg-note { background: #fff6f3; border-left: 3px solid var(--color-primary); padding: 0.8rem 1rem; margin-top: 1rem; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.9rem; border-radius: 0 4px 4px 0; }

/* --- Page-specific specimens (re-declared for the guide) --- */
.sg-page-title {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-weight: 300; font-size: 4rem; line-height: 1.1; color: var(--color-primary); margin: 0;
}
@media (max-width: 63.99rem) { .sg-page-title { font-size: 3.2rem; } }
.sg-team-heading, .sg-contact-heading {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif; color: var(--color-ink); margin: 0;
}
.sg-team-heading { font-weight: 700; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.4; }
.sg-contact-heading { font-weight: 300; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1.2; }
.sg-team-name { font-family: 'Merriweather', Georgia, serif; font-weight: 700; color: var(--color-ink); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); margin: 0; }
.sg-team-role { font-family: 'Merriweather', Georgia, serif; font-weight: 300; color: var(--color-ink); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); margin: 0; }
.sg-stat-n { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; color: var(--color-primary); font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1; margin: 0; }

/* --- Helpers replacing former inline styles --- */
.sg-intro {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--color-gray);
  font-size: 0.95rem;
  max-width: 44rem;
  margin-top: 1.5rem;
}
.sg-intro code, .sg-intro b { color: var(--color-primary); }
.sg-sample > * { margin: 0; }
.sg-meta--note { margin-top: 0.3rem; }
.sg-meta--gap { margin-top: 1rem; }
.sg-readout--muted { color: #9a9a9a; }
.sg-warn { color: #c0392b; }
.sg-chip--bordered { box-shadow: inset 0 0 0 1px #ddd; }


/* mwinters@gather.co */
/* ================================================
   SECTION: About Us
   ================================================ */
.about {
  padding-block: var(--section-py);
}

.page-interior-light .about__label {
  margin-bottom: clamp(5rem, 2rem + 12vw, 200px);
}

.about__content {
  margin-bottom: var(--space-lg);
  max-width: 38.4rem;   /* 20% wider than the 32rem article measure */
}

.about__text {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-ink);
}

.about__text strong {
  font-weight: 700;
}

.about__cta {
  margin-top: calc(var(--space-lg) * 2);
}

.hero__caption {
  position: absolute;
  left: var(--grid-margin);
  bottom: clamp(7rem, 5rem + 6vw, 12rem);
  max-width: min(32rem, calc(100vw - var(--grid-margin) * 2));
  width: fit-content;
  padding: 0.625rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.5);
  }
.press-item__inner {
  grid-column: 3 / span 8;
  grid-template-columns: 8fr;
  }


.page-interior-light .nav {
  position: relative;
  }



/* VIDEO PLAYER */
body.masthead-video .work-hero {
  /*
  min-height: 545.625px;
  */
  height: 0px;
  padding-top: 0;
  min-height: 645.625px;
  background: #000;
  }

#video-mashead {
   position: absolute;
   z-index: 1;
   top: 80px; left: 0; right: 0;
   max-width: 970px;
   margin: 0 auto;
   width: 100%;
   overflow: hidden;
   display: block;
   }
#video-wrapper, .video-wrapper {
   position: relative;
   height: 0px;
   padding-bottom: 56.25%;
   }
#video-controller {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 1;
   height: 120px;
   width: 120px;
   margin-top: -60px;
   margin-left: -60px;
   cursor: pointer;
   }
#video-controller img {
   width: 100%;
   border: 0;
   outline: none;
   }
#video-screen, .video-wrapper .video-screen {
   cursor: pointer;
   width: 100% !important;
   height: auto !important;
   z-index: 1;
   object-fit: inherit;
   background-color: transparent;
   background-size: cover;
   background-repeat: no-repeat;
   }
@media (max-width: 970px) {
  body.masthead-video .work-hero {
    min-height: initial;
    padding-bottom: 56.25%;
    }
}