/* ==========================================================================
   IMAGES — real photography, imported into the WordPress media library.
   Source: 10 campaign/office photographs (see /Users/daniel/Desktop/PR agency/
   Web Images/). All 10 were imported once each via `wp media import`; several
   are reused across more than one slot at a different crop (object-position /
   background-position), which is why attachment IDs repeat below. No stock
   photos, no upscaling beyond native resolution (1536x1024 / 1402x1122).

   REAL IMAGE — attachment ID 142 — marlowe-oncamera-brand-interview.jpg
     used for: .hero__bg (HIGHEST PRIORITY slot) AND .cta__bg (reused per spec
     — reusing the hero shot for the closing CTA is standard practice).
   REAL IMAGE — attachment ID 154 — marlowe-brand-launch-reception.jpg
     used for: .gallery__image--01 (Larkspur & Co./Brand Launch, tall) AND
     .services__bg--launches (different crop region: the event signage).
   REAL IMAGE — attachment ID 153 — marlowe-podcast-press-interview.jpg
     used for: .gallery__image--02 (Hearth House Hotels/Editorial Feature, tall).
   REAL IMAGE — attachment ID 145 — marlowe-campaign-proposal-review.jpg
     used for: .gallery__image--03 (The Waverton Rooms/Launch Event, tall).
   REAL IMAGE — attachment ID 146 — marlowe-media-interview-broadcast.jpg
     used for: .gallery__image--04 (The Bellamy Hotel/Media Relations, regular).
   REAL IMAGE — attachment ID 149 — marlowe-media-database-outreach.jpg
     used for: .gallery__image--05 (Oremí Skincare/Story Placement, regular).
   REAL IMAGE — attachment ID 151 — marlowe-press-release-drafting.jpg
     used for: .gallery__image--06 (Common Ground Coffee/Brand Storytelling,
     regular) AND .services__bg--crisis (different crop: the newspaper headline).
   REAL IMAGE — attachment ID 144 — marlowe-team-strategy-session.jpg
     used for: .about__image AND .testimonial__portrait (crop on the lead
     presenter's face).
   REAL IMAGE — attachment ID 156 — marlowe-press-kit-flatlay.jpg
     used for: .services__bg--media.
   REAL IMAGE — attachment ID 155 — marlowe-campaign-analytics-review.jpg
     used for: .services__bg--strategy.

   DROPPED SLOTS: the gallery was reduced from 8 tiles to 6. Only 10 source
   photographs existed for ~15 named slots, so two portfolio tiles (originally
   "Nettle & Stone / Campaign Strategy" and "Faye London / Campaign Strategy")
   were removed rather than duplicating an image a 3rd/4th time in the same
   prominent grid, or leaving gradient boxes in an otherwise all-photo grid.
   The remaining 6 tiles were reordered so the 3 tall (.gallery__item--tall)
   tiles come first in DOM order — with the 3x260px auto-row grid at 1024px+,
   this makes the browser's default (non-dense) grid auto-placement fill
   exactly 2 rows of 3 tall tiles then 1 row of 3 regular tiles, with no
   orphaned gaps. No other slot was left as a gradient placeholder — every
   named slot in this manifest has real photography.

   Aspect ratios (unchanged from original spec):
   .hero__bg               — 1920x1080 (landscape), full-bleed.
   .gallery__image--01..06 — regular tiles 900x700 (landscape), tall tiles
                             (.gallery__item--tall) 900x1200 (portrait).
   .about__image           — 1920x900 (landscape), object-fit: cover.
   .services__bg--media/--launches/--crisis/--strategy — 800x1000 (portrait).
   .testimonial__portrait  — round, 240x240 (displayed ~72px).
   .cta__bg                — 1920x1000 (landscape).
   ========================================================================== */

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms; animation-delay: 0s; transition-duration: 0.01ms; }
}

/* ==========================================================================
   ROOT — COLOR, TYPE, SPACING TOKENS
   ========================================================================== */
:root {
  /* Color — derived from editorial/press photography tone (warm ink) */
  --color-primary: #2B2622;      /* warm charcoal/ink */
  --color-accent: #C08A3E;       /* warm brass — links, CTA hover, small details only */
  --color-bg-off: #F9F7F4;       /* slight warm tint, alt section background */
  --color-text: #2B2622;
  --color-text-muted: #6b625a;
  --color-bg: #ffffff;
  --color-muted: #F3EFE9;        /* warm tint derived from primary, alt background */
  --color-white: #ffffff;
  --color-footer-bg: #201B17;    /* dark, warm — not cold black */
  --color-footer-text: #E9E3DC;
  --color-footer-muted: rgba(233, 227, 220, 0.55);

  /* Type */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-h1-image: 38px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-services-title: 24px;
  --fs-body: 16px;
  --fs-lede: 18px;
  --fs-quote: 20px;
  --fs-eyebrow: 12px;
  --fs-small: 14px;

  --lh-heading: 1.12;
  --lh-body: 1.75;

  /* Spacing — 8px base scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;

  --container-max: 1160px;
  --container-padding: 20px;

  /* Motion */
  --ease-interactive: 0.2s ease;
  --ease-reveal: 0.5s ease-out;

  /* Fixed header clearance + interior-page h1 (on white background) */
  --header-height: 72px;
  --fs-h1-white: 36px;
  --space-caption: 12px;
}

@media (min-width: 700px) {
  :root {
    --container-padding: 32px;
    --fs-h2: 36px;
    --fs-eyebrow: 12px;
    --fs-h1-white: 44px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 40px;
    --fs-h1-image: 64px;
    --fs-h2: 44px;
    --fs-h3: 26px;
    --fs-services-title: 28px;
    --fs-lede: 19px;
    --fs-quote: 22px;
    --fs-h1-white: 56px;
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-heading); letter-spacing: -0.01em; color: var(--color-text); }

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

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

.skip-link {
  position: absolute;
  left: 0; top: -100px;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  z-index: 2000;
  transition: top var(--ease-interactive);
}
.skip-link:focus { top: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
}

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

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid transparent;
  transition: background-color var(--ease-interactive), color var(--ease-interactive), border-color var(--ease-interactive);
}

.btn--outline-white {
  border-color: rgba(255, 255, 255, 0.85);
  color: var(--color-white);
  background: transparent;
}
.btn--outline-white:hover,
.btn--outline-white:focus-visible {
  background: var(--color-white);
  color: var(--color-primary);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.btn__arrow { transition: transform var(--ease-interactive); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: background-color var(--ease-interactive), box-shadow var(--ease-interactive);
}

.site-header--scrolled,
.site-header--solid {
  background: rgba(249, 247, 244, 0.96);
  box-shadow: 0 1px 0 rgba(43, 38, 34, 0.08);
}

.site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__logo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-white);
  transition: color var(--ease-interactive);
}
.site-header--scrolled .site-header__logo,
.site-header--solid .site-header__logo { color: var(--color-primary); }
.site-header__logo-amp { color: var(--color-accent); font-style: italic; }

.site-header__nav { display: none; }

.site-header__nav-list {
  display: flex;
  gap: var(--space-6);
}

.site-header__nav-link {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-white);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--ease-interactive), border-color var(--ease-interactive);
}
.site-header--scrolled .site-header__nav-link,
.site-header--solid .site-header__nav-link { color: var(--color-primary); }
.site-header__nav-link:hover,
.site-header__nav-link:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.site-header__nav-link[aria-current="page"] {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.site-header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  padding: 0;
}
.site-header__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-white);
  transition: background-color var(--ease-interactive), transform var(--ease-interactive), opacity var(--ease-interactive);
}
.site-header--scrolled .site-header__toggle-bar,
.site-header--solid .site-header__toggle-bar { background: var(--color-primary); }

.site-header--nav-open .site-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header--nav-open .site-header__toggle-bar:nth-child(2) { opacity: 0; }
.site-header--nav-open .site-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-header--nav-open .site-header__nav {
  display: block;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--color-bg-off);
  box-shadow: 0 8px 24px rgba(43, 38, 34, 0.12);
}
.site-header--nav-open .site-header__nav-list {
  flex-direction: column;
  gap: 0;
  padding: var(--space-2) var(--container-padding) var(--space-4);
}
.site-header--nav-open .site-header__nav-link {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(43, 38, 34, 0.08);
}

@media (min-width: 700px) {
  .site-header__nav { display: block; }
  .site-header__toggle { display: none; }
  .site-header--nav-open .site-header__nav {
    position: static;
    background: transparent;
    box-shadow: none;
  }
  .site-header--nav-open .site-header__nav-list {
    flex-direction: row;
    padding: 0;
  }
  .site-header--nav-open .site-header__nav-link {
    padding: 0;
    border-bottom: none;
    color: inherit;
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-color: #2B2622;
  background-image: url('/wp-content/uploads/2026/07/marlowe-oncamera-brand-interview.jpg');
  background-size: cover;
  /* Favours the darker, softly blurred foreground figures at lower-left,
     keeping the busier desk/monitor detail out toward the right — leaves a
     clean area under .hero__content for the title/subline. */
  background-position: 30% 55%;
}

.hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 70%);
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--container-padding) var(--space-10);
  max-width: 760px;
}

.hero__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-2);
}

.hero__title {
  font-size: var(--fs-h1-image);
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.hero__subline {
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}

@media (min-width: 700px) {
  .hero__content { padding-bottom: var(--space-12); }
}

/* ==========================================================================
   GALLERY / PORTFOLIO — signature section
   ========================================================================== */
.gallery {
  background: var(--color-bg);
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

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

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-inline: 10px;
}

.gallery__item {
  position: relative;
  overflow: hidden;
}

.gallery__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* No border-radius, no drop-shadow on photography — per theme spec. */
}
.gallery__item--tall .gallery__image { aspect-ratio: 3 / 4; }

/* object-position picks the interesting region of each source photo once
   cropped to the tile's aspect ratio — no separate cropped files needed. */
.gallery__image--01 { object-position: 60% 35%; }  /* brand-launch-reception: guests + sign */
.gallery__image--02 { object-position: 35% 40%; }  /* podcast-press-interview: speaking subject */
.gallery__image--03 { object-position: 30% 45%; }  /* campaign-proposal-review: presenting colleague */
.gallery__image--04 { object-position: 50% 35%; }  /* media-interview-broadcast: interview subject */
.gallery__image--05 { object-position: 40% 45%; }  /* media-database-outreach: dashboard + hands */
.gallery__image--06 { object-position: 50% 40%; }  /* press-release-drafting: subject at laptop */

.gallery__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
  background: rgba(20, 16, 13, 0);
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-within .gallery__caption {
  opacity: 1;
  background: rgba(20, 16, 13, 0.25);
}

.gallery__caption-name {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
}
.gallery__caption-type {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

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

@media (min-width: 1024px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    gap: 12px;
    padding-inline: 12px;
  }
  .gallery__item { height: 100%; }
  .gallery__item--tall { grid-row: span 2; }
  .gallery__image { width: 100%; height: 100%; aspect-ratio: auto; }
  .gallery__item--tall .gallery__image { aspect-ratio: auto; }
}

/* ==========================================================================
   ABOUT / STORY
   ========================================================================== */
.about {
  background: var(--color-bg-off);
}

.about__image {
  width: 100%;
  height: 46vh;
  min-height: 280px;
  max-height: 520px;
  object-fit: cover;
  object-position: 50% 60%; /* team-strategy-session: favours the table/documents */
  /* No border-radius, no drop-shadow on photography — per theme spec. */
}

.about__content {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-8) var(--container-padding);
}

.about__content p {
  margin-bottom: var(--space-3);
}
.about__content p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .about__image { height: 56vh; }
  .about__content { padding: var(--space-15) var(--container-padding); }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services {
  background: var(--color-bg);
  padding-top: var(--space-7);
}

.services__intro {
  max-width: var(--container-max);
  margin: 0 auto var(--space-6);
  padding-inline: var(--container-padding);
  text-align: center;
}
.services__intro .section-eyebrow { margin-inline: auto; }

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.services__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  overflow: hidden;
}

.services__bg {
  position: absolute;
  inset: 0;
  transition: transform 0.4s ease;
}
.services__tile:hover .services__bg,
.services__tile:focus-visible .services__bg {
  transform: scale(1.04);
}

.services__bg {
  background-size: cover;
}
.services__bg--media {
  background-color: #2B2622;
  background-image: url('/wp-content/uploads/2026/07/marlowe-press-kit-flatlay.jpg');
  background-position: 55% 45%; /* press pass + microphone */
}
.services__bg--launches {
  background-color: #3d352c;
  background-image: url('/wp-content/uploads/2026/07/marlowe-brand-launch-reception.jpg');
  background-position: 15% 30%; /* Launch, Connect, Inspire sign + florals — different crop region than the gallery tile reusing this same photo */
}
.services__bg--crisis {
  background-color: #1a1512;
  background-image: url('/wp-content/uploads/2026/07/marlowe-press-release-drafting.jpg');
  background-position: 30% 75%; /* the "Reputation is earned" newspaper headline — different crop region than the gallery tile reusing this same photo */
}
.services__bg--strategy {
  background-color: #3d352c;
  background-image: url('/wp-content/uploads/2026/07/marlowe-campaign-analytics-review.jpg');
  background-position: 65% 35%; /* analytics dashboard + mug */
}

.services__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 13, 0.35);
  transition: background-color 0.3s ease;
}
.services__tile:hover .services__overlay,
.services__tile:focus-visible .services__overlay {
  background: rgba(20, 16, 13, 0.55);
}

.services__title {
  position: relative;
  z-index: 1;
  font-size: var(--fs-services-title);
  font-weight: 400;
  color: var(--color-white);
  text-align: center;
  letter-spacing: -0.005em;
}

.services__link {
  position: absolute;
  z-index: 1;
  bottom: var(--space-3);
  left: 50%;
  transform: translate(-50%, 10px);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-white);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}
.services__tile:hover .services__link,
.services__tile:focus-visible .services__link {
  opacity: 1;
  transform: translate(-50%, 0);
}

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

@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(4, 1fr); }
  .services__tile { min-height: 440px; }
}

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */
.testimonial {
  background: var(--color-bg-off);
  padding: var(--space-10) var(--container-padding);
}

.testimonial__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.testimonial__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.55;
  color: var(--color-primary);
}

.testimonial__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.testimonial__portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%; /* pre-existing rounding for the portrait crop, not a general photo treatment */
  flex-shrink: 0;
  object-fit: cover;
  object-position: 48% 25%; /* team-strategy-session: crop tight on the lead presenter's face */
}

.testimonial__meta { text-align: left; }

.testimonial__name {
  display: block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
}

.testimonial__role {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .testimonial { padding: var(--space-12) var(--container-padding); }
  .testimonial__portrait { width: 76px; height: 76px; }
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  overflow: hidden;
  padding: var(--space-10) var(--container-padding);
  text-align: center;
}

.cta__bg {
  position: absolute;
  inset: 0;
  background-color: #2B2622;
  background-image: url('/wp-content/uploads/2026/07/marlowe-oncamera-brand-interview.jpg');
  background-size: cover;
  background-position: 50% 45%; /* reuses the hero photo — CTA content is centred, so a centred crop works */
}

.cta__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 10, 0.5);
}

.cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 640px;
}

.cta__title {
  font-size: var(--fs-h2);
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
  .cta { min-height: 70vh; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
  background: var(--color-bg);
  padding: var(--space-10) var(--container-padding);
}

.contact__intro {
  max-width: var(--container-max);
  margin: 0 auto;
}

.contact__lede {
  max-width: 52ch;
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact__detail dt {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.contact__detail dd {
  font-size: 17px;
}
.contact__detail dd a { color: var(--color-primary); border-bottom: 1px solid var(--color-accent); }
.contact__detail dd a:hover { color: var(--color-accent); }

.contact__form {
  max-width: var(--container-max);
  margin: var(--space-6) auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-primary);
}

.form-field__optional {
  font-weight: 400;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: normal;
}

.form-field input,
.form-field textarea {
  border: 1px solid rgba(43, 38, 34, 0.2);
  background: var(--color-bg-off);
  padding: 13px 16px;
  font-size: var(--fs-body);
  color: var(--color-text);
  transition: border-color var(--ease-interactive);
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

.contact__submit {
  justify-self: start;
  margin-top: var(--space-2);
}

@media (min-width: 1024px) {
  .contact {
    padding: var(--space-15) var(--container-padding);
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-12);
    max-width: var(--container-max);
    margin-inline: auto;
  }
  .contact__intro { margin: 0; }
  .contact__form { margin-top: 0; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-top: var(--space-8);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.site-footer__logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

.site-footer__tagline {
  font-size: var(--fs-small);
  color: var(--color-footer-muted);
  margin-bottom: var(--space-3);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
}
.site-footer__social-link {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-footer-text);
  border-bottom: 1px solid rgba(233, 227, 220, 0.35);
  padding-bottom: 2px;
  transition: color var(--ease-interactive), border-color var(--ease-interactive);
}
.site-footer__social-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.site-footer__col-title {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-footer-muted);
  margin-bottom: var(--space-2);
}

.site-footer__nav ul,
.site-footer__contact p {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__nav a,
.site-footer__contact a {
  color: var(--color-footer-text);
  transition: color var(--ease-interactive);
}
.site-footer__nav a:hover,
.site-footer__contact a:hover {
  color: var(--color-accent);
}

.site-footer__contact p { margin-bottom: var(--space-1); }

.site-footer__divider {
  height: 1px;
  background: rgba(233, 227, 220, 0.16);
}

.site-footer__bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4) var(--container-padding) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__copyright {
  font-size: 13px;
  color: var(--color-footer-muted);
}

.footer-credit {
  align-self: flex-end;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}

.footer-credit__label {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-footer-muted);
}

.footer-credit__brand {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-footer-text);
}

@media (min-width: 700px) {
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ==========================================================================
   INTERIOR PAGE HEADING — shared h1 treatment for section-intro blocks that
   are now a page's top-level heading (work/services/about promote their
   existing .section-eyebrow + h2.section-title intro to h1, reusing the
   same class so no separate component is needed). Sits on white/off-white,
   so it uses the heavier "on white background" weight from the theme scale.
   ========================================================================== */
.page-title {
  font-size: var(--fs-h1-white);
  font-weight: 800;
}

/* Extra top clearance for pages whose very first section is a text intro
   sitting directly under the fixed header (no hero image underneath to
   absorb the overlay, unlike index.html). Modifiers only — the shared
   .gallery/.services rules are untouched so the homepage layout is unaffected. */
.gallery--page {
  padding-top: calc(var(--header-height) + var(--space-4));
}
.services--page {
  padding-top: calc(var(--header-height) + var(--space-4));
  padding-bottom: var(--space-2);
}
@media (min-width: 1024px) {
  .gallery--page { padding-top: calc(var(--header-height) + var(--space-6)); }
  .services--page { padding-top: calc(var(--header-height) + var(--space-6)); }
}

/* ==========================================================================
   GALLERY TEASER — trimmed homepage preview (3-4 tiles) + link through to
   the full work.html portfolio. Deliberately simpler than the full page's
   tall/regular auto-placement grid since there are too few tiles for that
   math to resolve cleanly at 3 columns.
   ========================================================================== */
.gallery__grid--teaser {
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .gallery__grid--teaser { grid-template-columns: repeat(2, 1fr); }
}
.gallery__grid--teaser .gallery__image { aspect-ratio: 4 / 3; }

.gallery__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

.inline-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--ease-interactive);
}
.inline-link:hover,
.inline-link:focus-visible {
  border-color: var(--color-accent);
}
.inline-link .btn__arrow { transition: transform var(--ease-interactive); }
.inline-link:hover .btn__arrow { transform: translateX(3px); }

/* ==========================================================================
   PORTFOLIO — full work.html gallery. True masonry via CSS columns (no JS
   library) per the theme's own lessons-learned note on this pattern. Each
   tile carries its own aspect-ratio + object-position so the column layout
   produces genuine variable-height masonry rather than a uniform grid.
   Captions sit below the image (not an overlay) — per theme spacing spec
   "image with caption below: 12px between image and caption" — so the full
   portfolio reads as a real catalogue rather than a hover-to-reveal teaser.
   ========================================================================== */
.portfolio {
  background: var(--color-bg);
  padding-bottom: var(--space-10);
}

.portfolio__grid {
  column-count: 1;
  column-gap: 12px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-padding);
}
@media (min-width: 700px) {
  .portfolio__grid { column-count: 2; }
}
@media (min-width: 1024px) {
  .portfolio__grid { column-count: 3; column-gap: 16px; }
}

.portfolio__item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--space-4);
}

.portfolio__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  /* No border-radius, no drop-shadow on photography — per theme spec. */
}

.portfolio__caption {
  margin-top: var(--space-caption);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* Aspect ratio + object-position per tile — deliberately different crops
   than the same source photo's homepage placement (see styles.css manifest
   at the top of this file for which attachment ID backs each tile). */
.portfolio__image--01 { aspect-ratio: 3 / 4; object-position: 60% 30%; }  /* brand-launch-reception */
.portfolio__image--02 { aspect-ratio: 4 / 5; object-position: 35% 35%; }  /* podcast-press-interview */
.portfolio__image--03 { aspect-ratio: 1 / 1; object-position: 30% 40%; }  /* campaign-proposal-review */
.portfolio__image--04 { aspect-ratio: 4 / 3; object-position: 50% 25%; }  /* media-interview-broadcast */
.portfolio__image--05 { aspect-ratio: 3 / 2; object-position: 40% 40%; }  /* media-database-outreach */
.portfolio__image--06 { aspect-ratio: 4 / 3; object-position: 55% 35%; }  /* press-release-drafting */
.portfolio__image--07 { aspect-ratio: 3 / 4; object-position: 70% 50%; }  /* oncamera-brand-interview — different crop than hero/CTA */
.portfolio__image--08 { aspect-ratio: 4 / 5; object-position: 65% 55%; }  /* team-strategy-session — different crop than about/testimonial */
.portfolio__image--09 { aspect-ratio: 1 / 1; object-position: 40% 55%; }  /* press-kit-flatlay — different crop than services--media */
.portfolio__image--10 { aspect-ratio: 3 / 2; object-position: 35% 50%; }  /* campaign-analytics-review — different crop than services--strategy */

/* ==========================================================================
   SERVICE DETAIL — services.html expanded category rows. Reuses the exact
   .services__bg--* background images from the homepage tiles (same crop —
   recognisable continuity from the homepage teaser), paired with a fuller
   description panel. Alternates image/text sides and section background
   per row for rhythm, per CLAUDE-v2 section-variety guidance.
   ========================================================================== */
.service-detail {
  display: grid;
  grid-template-columns: 1fr;
}
.service-detail:nth-child(odd) { background: var(--color-bg); }
.service-detail:nth-child(even) { background: var(--color-bg-off); }

.service-detail__media {
  position: relative;
  min-height: 280px;
  overflow: hidden;
}

.service-detail__body {
  padding: var(--space-6) var(--container-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}

.service-detail__title {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.service-detail__text {
  color: var(--color-text);
  max-width: 60ch;
}

@media (min-width: 1024px) {
  .service-detail { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .service-detail__media { min-height: 420px; }
  .service-detail__body { padding: var(--space-10) var(--space-10); }
  .service-detail:nth-child(even) .service-detail__media { order: 2; }
}

/* ==========================================================================
   CONTENT BLOCK — generic reusable eyebrow + heading + short paragraphs
   section, used for about.html's expanded story content beyond the
   homepage's condensed teaser. Alternates with --muted for background
   rhythm rather than sitting on one flat colour for the whole page.
   ========================================================================== */
.content-block {
  padding: var(--space-8) var(--container-padding);
}
.content-block--muted { background: var(--color-muted); }

.content-block__inner {
  max-width: 680px;
  margin: 0 auto;
}
.content-block__inner p { margin-bottom: var(--space-3); }
.content-block__inner p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .content-block { padding: var(--space-15) var(--container-padding); }
}