/* ============================================
   Poise People Consulting — Design System
   Colors extracted directly from client logo files.
   ============================================ */

:root {
  /* Brand colors (exact logo values) */
  --color-teal: #43727A;
  --color-teal-dark: #33565C;
  --color-teal-tint: #EBF1F1;
  --color-charcoal: #52584D;
  --color-charcoal-soft: #6B7066;

  /* Supporting warm neutrals */
  --color-warm-white: #FAF8F4;
  --color-cream: #F3ECE0;
  --color-stone: #DAD3C5;
  --color-sage: #8FA48A;
  --color-sage-tint: #EEF2ED;
  --color-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing (8px base scale) */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */
  --space-8: 7.5rem;   /* 120px */

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(82, 88, 77, 0.09);
  --shadow-md: 0 6px 20px rgba(82, 88, 77, 0.10);
  --shadow-lg: 0 16px 40px rgba(82, 88, 77, 0.14);

  /* Motion */
  --transition: 200ms ease;
  --transition-slow: 550ms cubic-bezier(0.16, 1, 0.3, 1);

  --container-width: 1140px;
}

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-charcoal);
  background: var(--color-warm-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--color-teal); text-decoration: none; }
a:hover { color: var(--color-teal-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-charcoal);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 var(--space-2); }
ul { margin: 0; padding: 0; list-style: none; }

@media (min-width: 640px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 2.1rem; }
  h3 { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
  h1 { font-size: 3.25rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.5rem; }
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 var(--space-2);
  display: block;
}

.lede {
  font-size: 1.15rem;
  color: var(--color-charcoal-soft);
  max-width: 62ch;
}

/* Hero-only narrow-phone adjustment so "Employee Experience" can stay on
   one line down to iPhone SE (375px) too, not just from 400px up. At the
   base 2rem hero size the phrase measures ~333px, which overflows a
   375px viewport's ~327px content width — this is scoped to .hero-content
   h1 specifically (not the shared h1 rule) so every other page's
   headings are untouched, and only spans the band below the existing
   640px breakpoint where the larger tablet size takes back over. */
@media (min-width: 350px) and (max-width: 639px) {
  .hero-content h1 { font-size: 1.65rem; }
}

/* Keeps a short phrase from breaking mid-way, without forcing a fixed
   line break elsewhere in the surrounding text. Scoped to widths where
   the phrase actually fits: at the reduced 1.65rem hero size above,
   "Employee Experience" measures ~274px against a 302px content width at
   the 350px floor (and far more headroom at 375px/iPhone SE and up) —
   below 350px it wraps normally, same as before this change, rather than
   risk clipping on the very narrowest phones still in use. */
@media (min-width: 350px) {
  .nowrap { white-space: nowrap; }
}

/* Standalone subheading-style intro line ahead of a lede paragraph.
   Tighter line-height and margins than body copy, since the base 1.65
   line-height (sized for flowing paragraphs) reads as excess air around
   a short, bold, single line — this keeps heading, intro, and paragraph
   reading as one hierarchy instead of three loosely related blocks. */
.lede-intro {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--color-teal-dark);
  margin-top: calc(-1 * var(--space-1));
  margin-bottom: var(--space-1);
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-teal);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

.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;
}

/* ============================================
   Layout helpers
   ============================================ */

.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

@media (min-width: 640px) {
  .container { padding-inline: var(--space-4); }
}

.section {
  padding-block: var(--space-6);
}

@media (min-width: 1024px) {
  .section { padding-block: var(--space-8); }
}

.section--cream { background: var(--color-cream); }
.section--teal { background: var(--color-teal); color: var(--color-white); }
.section--teal h2, .section--teal p { color: var(--color-white); }

.section-head {
  max-width: 720px;
  margin: 0 0 var(--space-5);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.divider-mark {
  width: 40px;
  height: 3px;
  background: var(--color-sage);
  border: none;
  margin: var(--space-2) 0 var(--space-3);
  border-radius: 2px;
}

.section-head--center .divider-mark { margin-inline: auto; }

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85em 1.7em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  min-height: 44px;
}

.btn-primary {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
}
.btn-primary:hover {
  background: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: transparent;
  color: var(--color-teal);
  border-color: var(--color-teal);
}
.btn-secondary:hover {
  background: var(--color-teal);
  color: var(--color-white);
  transform: translateY(-1px);
}

.section--teal .btn-secondary {
  color: var(--color-white);
  border-color: var(--color-white);
}
.section--teal .btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-teal-dark);
}

.section--teal .btn-primary {
  background: var(--color-white);
  color: var(--color-teal-dark);
  border-color: var(--color-white);
}
.section--teal .btn-primary:hover {
  background: var(--color-cream);
  border-color: var(--color-cream);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ============================================
   Header / Navigation
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-warm-white);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-stone);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  gap: var(--space-3);
}

.logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-link img {
  height: 40px;
  width: auto;
}

@media (min-width: 640px) {
  .logo-link img { height: 46px; }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-4);
}

.nav-links a {
  font-weight: 500;
  color: var(--color-charcoal);
  padding: 0.4em 0.1em;
  position: relative;
  transition: color var(--transition);
}

.nav-links a:hover { color: var(--color-teal); }

.nav-links a[aria-current="page"] {
  color: var(--color-teal);
}
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--color-sage);
  border-radius: 2px;
}

.header-cta { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-charcoal);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--color-charcoal);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--color-charcoal);
}

.mobile-nav-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-warm-white);
  border-top: 1px solid var(--color-stone);
}

.mobile-nav-panel.is-open { display: flex; }

.mobile-nav-panel a {
  padding: var(--space-2);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-charcoal);
  border-radius: var(--radius-sm);
}
.mobile-nav-panel a:hover,
.mobile-nav-panel a[aria-current="page"] {
  background: var(--color-cream);
  color: var(--color-teal-dark);
}

.mobile-nav-panel .btn { margin-top: var(--space-2); }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav-panel { display: none !important; }
}

/* ============================================
   Hero
   ============================================ */

.hero {
  padding-block: var(--space-5) var(--space-6);
}

.hero-grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

/* Mobile hero order: eyebrow -> headline -> supporting -> CTA -> image */
.hero-media { order: 2; margin-top: var(--space-4); }
.hero-content { order: 1; }

/* Framed editorial treatment: photo sits inset in a soft card rather
   than bleeding full-height, so it supports the brand without
   competing with it. */
.hero-media-frame {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  max-width: 460px;
  margin-inline: auto;
}

.hero-media img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 60% 42%;
  display: block;
}

.hero-tagline {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--color-teal-dark);
  margin: var(--space-1) 0 var(--space-3);
}

@media (min-width: 900px) {
  .hero-tagline { font-size: 1.5rem; }
}

.hero-content .lede { margin-top: var(--space-3); }

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-5);
    align-items: center;
  }
  .hero-media { order: 2; margin-top: 0; }
  .hero-content { order: 1; }
  .hero-media-frame { max-width: 600px; padding: var(--space-3); }
  .hero-media img { aspect-ratio: 5 / 4; }
}

/* ============================================
   Cards — services
   ============================================ */

.card-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.service-card .service-name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: 0.15em;
}

.service-card .service-subtitle {
  color: var(--color-teal);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}

.service-card p:last-of-type { margin-bottom: var(--space-3); }

.service-card .learn-more {
  margin-top: auto;
  font-weight: 600;
}

/* ============================================
   Who We Work With — integrated split composition
   (image on one side, content on the other), rather
   than a full-bleed banner above the content.
   ============================================ */

.work-with-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 900px) {
  .work-with-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); }
}

.work-with-media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

/* Single-column within its half-width content column at every breakpoint
   (the 2-up grid only made sense at full container width). */
.check-list {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-white);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-stone);
}

.check-list .check-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-teal);
}

/* ============================================
   "A Steady Presence" — copy paired with a restrained
   supporting visual so the section doesn't read as
   underdeveloped/empty next to its neighbors.
   ============================================ */

.steady-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 900px) {
  .steady-grid { grid-template-columns: 1.1fr 0.7fr; gap: var(--space-6); }
}

.steady-media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}

/* ============================================
   Photo banners — text-free, full-width strips.
   Used on About (section transition) and Services
   (contained card variant). Never carries overlaid
   text, so contrast is a non-issue by construction.
   ============================================ */

.photo-banner {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.photo-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 640px) {
  .photo-banner { height: 240px; }
}

@media (min-width: 1024px) {
  .photo-banner { height: 300px; }
}

/* Contained (not full-bleed) card variant — used on Services */
.photo-banner--card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  height: 220px;
}

@media (min-width: 640px) {
  .photo-banner--card { height: 280px; }
}

@media (min-width: 1024px) {
  .photo-banner--card { height: 340px; }
}

/* ============================================
   POISE values
   ============================================ */

.poise-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .poise-grid { grid-template-columns: repeat(2, 1fr); }
  /* 5 items in a 2-column grid strands the last card alone on row 3,
     flush left. Span it across both columns and constrain its width
     so it centers under the row instead of looking accidental. */
  .poise-grid .poise-item:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - (var(--space-3) / 2));
    margin-inline: auto;
  }
}
@media (min-width: 1024px) {
  .poise-grid { grid-template-columns: repeat(5, 1fr); }
  /* Back to a single row of 5 — undo the tablet-only centering. */
  .poise-grid .poise-item:last-child {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }
}

.poise-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border-top: 3px solid var(--color-sage);
  box-shadow: var(--shadow-sm);
}

.poise-item .poise-letter {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-teal);
  font-weight: 600;
  display: block;
  margin-bottom: 0.3em;
}

.poise-item h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4em;
}

.poise-item p {
  font-size: 0.95rem;
  color: var(--color-charcoal-soft);
  margin-bottom: 0;
}

/* ============================================
   Pull quote / mission
   ============================================ */

.pull-quote {
  border-left: 3px solid var(--color-sage);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  margin: var(--space-5) 0;
}

.pull-quote p {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--color-charcoal);
  line-height: 1.45;
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .pull-quote p { font-size: 1.6rem; }
}

/* ============================================
   Founder / about layout
   ============================================ */

.founder-grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 900px) {
  /* Photo is a supporting introduction, not a co-equal visual anchor:
     narrow fixed column + more whitespace, text carries the section. */
  .founder-grid { grid-template-columns: 300px 1fr; gap: var(--space-7); align-items: start; }
}

.founder-photo {
  max-width: 300px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .founder-photo { margin-inline: 0; }
}

.founder-photo img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 15%;
}

.founder-meta {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.founder-meta strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

.linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-teal);
  border: 1px solid var(--color-stone);
  padding: 0.35em 0.8em;
  border-radius: 999px;
  transition: background var(--transition), border-color var(--transition);
}
.linkedin-link:hover {
  background: var(--color-teal-tint);
  border-color: var(--color-teal);
}
.linkedin-link svg { width: 14px; height: 14px; }

/* ============================================
   Services page detail sections
   ============================================ */

.service-detail {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-stone);
}
.service-detail:last-of-type { border-bottom: none; }

.service-detail-grid {
  display: grid;
  gap: 0;
}

/* Mobile: number, head (title through meta pills), and the list column
   stack in source order. The number-to-title gap comes from
   .service-detail-number's own margin (unchanged); this margin supplies
   the equivalent gap before the list column, matching the original
   head-to-list spacing. */
.service-detail-list-col {
  margin-top: var(--space-4);
}

@media (min-width: 900px) {
  /* The list heading (h3) should align with the service title (h2), not
     the description or the number above it. Pulling the number into its
     own row lets the head column start exactly at the title — the same
     row the list column starts at — so both headings share a top edge
     by construction, not a measured offset. Row gap stays 0 so existing
     margins (the number's own margin-bottom, etc.) are the only spacing. */
  .service-detail-grid {
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--space-6);
    row-gap: 0;
  }
  .service-detail-number { grid-column: 1; grid-row: 1; }
  .service-detail-head { grid-column: 1; grid-row: 2; }
  .service-detail-list-col {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
}

/* Restrained numbering carries section rhythm now that backgrounds are
   unified (echoes the P/O/I/S/E letter treatment on the About page). */
.service-detail-number {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-sage);
  display: block;
  margin-bottom: var(--space-1);
}

/* Service name carries the primary emphasis; subtitle is a supporting
   caption beneath it (previously reversed). */
.service-detail-name {
  font-size: 2rem;
  margin-bottom: 0.2em;
}

@media (min-width: 900px) {
  .service-detail-name { font-size: 2.3rem; }
}

.service-detail-subtitle {
  color: var(--color-teal);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}

.service-detail-list {
  margin: var(--space-3) 0;
  display: grid;
  gap: 0.6em;
}

.service-detail-list li {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
}

.service-detail-list .bullet {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-sage);
  margin-top: 0.55em;
}

.service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Distinct teal-tint surface (not the page/card background) so pills
   stay visually intentional regardless of surrounding section color.
   Softer rectangle (matches button radius) rather than a full capsule,
   so it reads as an informational tag rather than a SaaS pill button. */
.service-meta .meta-pill {
  background: var(--color-teal-tint);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.4em 1em;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-teal-dark);
}

/* ============================================
   CTA band
   ============================================ */

.cta-band {
  text-align: center;
}

.cta-band .section-head--center { margin-bottom: var(--space-3); }

/* ============================================
   Footer
   ============================================ */

.site-footer {
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding-block: var(--space-6) var(--space-4);
}

.footer-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-5);
}

@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* The logo wordmark is set in the same charcoal as the footer background,
   so it needs a light backing card for contrast until a dark-background
   lockup exists. */
.footer-logo-card {
  display: inline-block;
  background: var(--color-warm-white);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.footer-logo-card img { height: 52px; width: auto; display: block; }

.footer-tagline {
  color: var(--color-stone);
  font-size: 0.95rem;
  max-width: 32ch;
}

.footer-heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: var(--space-2);
}

.footer-links { display: grid; gap: 0.6em; }
.footer-links a { color: var(--color-cream); }
.footer-links a:hover { color: var(--color-white); }

.footer-contact { display: grid; gap: 0.6em; font-size: 0.95rem; color: var(--color-cream); }
.footer-contact a { color: var(--color-cream); }
.footer-contact a:hover { color: var(--color-white); }

.footer-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-cream);
  font-size: 0.95rem;
}
.footer-linkedin svg { width: 16px; height: 16px; }
.footer-linkedin:hover { color: var(--color-white); }

.footer-bottom {
  border-top: 1px solid rgba(250, 248, 244, 0.15);
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-stone);
}

.footer-bottom-meta,
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer-legal a {
  color: var(--color-stone);
}
.footer-legal a:hover {
  color: var(--color-white);
}

/* ============================================
   Contact page
   ============================================ */

.contact-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; }
}

/* Stretches to match the taller form card (grid default) and centers
   its content vertically, rather than sitting noticeably shorter. */
.contact-info-card {
  background: var(--color-white);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-info-card .contact-line {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--space-2);
  font-weight: 500;
}

.contact-info-card .contact-line svg {
  width: 18px; height: 18px;
  color: var(--color-teal);
  flex-shrink: 0;
}

/* Matches .contact-info-card so the two columns read as a pair of
   panels rather than one boxed card next to floating fields. */
.contact-form-card {
  background: var(--color-white);
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.contact-form {
  display: grid;
  gap: var(--space-3);
}

.form-field { display: flex; flex-direction: column; gap: 0.4em; }

.form-field label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-charcoal);
}

.form-field .optional-tag {
  font-weight: 400;
  color: var(--color-charcoal-soft);
  font-size: 0.85rem;
}

.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85em 1em;
  border: 1px solid var(--color-stone);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-charcoal);
  min-height: 44px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field textarea { min-height: 140px; resize: vertical; }

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px var(--color-teal-tint);
  outline: none;
}

.form-field input:user-invalid,
.form-field textarea:user-invalid {
  border-color: #b4685a;
}

.form-privacy-note {
  font-size: 0.85rem;
  color: var(--color-charcoal-soft);
}

.form-status {
  display: none;
  background: var(--color-sage-tint);
  border: 1px solid var(--color-sage);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: 0.95rem;
  color: var(--color-charcoal);
}
.form-status.is-visible { display: block; }
.form-status a { font-weight: 600; }
.form-status.is-error {
  background: #F5EBE8;
  border-color: #B4685A;
}

/* Off-canvas rather than display:none/visibility:hidden: some spam bots
   check computed style and skip fields hidden that way. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================
   Scroll reveal
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ============================================
   Legal document pages (Privacy, Terms, Accessibility)
   ============================================ */

.legal-updated {
  font-size: 0.88rem;
  color: var(--color-charcoal-soft);
}

.legal-content {
  max-width: 720px;
}

.legal-content h2 {
  font-size: 1.25rem;
  margin-top: var(--space-5);
}

@media (min-width: 640px) {
  .legal-content h2 { font-size: 1.4rem; }
}

/* ============================================
   Inline-style replacements (moved from HTML so CSP
   style-src can stay 'self' + Google Fonts, no
   'unsafe-inline'). Each rule mirrors exactly what the
   inline style it replaces did — no visual change.
   ============================================ */

.lede--center { margin-inline: auto; }
.btn-row--center { justify-content: center; }
.btn-row--center + p { margin-top: var(--space-4); }
.photo-banner--about img { object-position: 25% 50%; }
.contact-info-card .contact-line:last-child { margin-bottom: 0; }
.steady-grid .section-head { margin-bottom: 0; }
.founder-title {
  margin-bottom: var(--space-3);
  color: var(--color-charcoal-soft);
}