/* ============================================================
   DESIGN TOKENS — colour palette from brand colour sheet
   ============================================================ */
:root {
  --cream:       #f9f7ec;   /* warm background */
  --surface:     #f1ede0;   /* slightly darker surface */
  --sage:        #6b9e82;   /* sage green accent */
  --sage-section:#547a66;   /* deeper sage for the WHO section bg */
  --terracotta:  #9e4040;   /* rust red — primary colour */
  --dark:        #1a1200;   /* near-black brown */
  --mustard:     #c49a1a;   /* gold/ochre */
  --line:        #dbd1bc;   /* border/divider */
  --muted:       #5a4e30;   /* muted body text */
  --radius:      18px;
  --pill:        999px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--dark);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a       { color: inherit; text-decoration: none; }
img     { display: block; max-width: 100%; }
ul      { list-style: none; }

/* Shared max-width wrapper */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(249, 247, 236, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* 3-column grid: logo | links | cta */
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 32px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
}

/* Illustrated sign logo (replaces the text wordmark) */
.nav-logo-img {
  height: 64px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-links a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}

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

/* Mustard CTA pill button */
.nav-cta-wrap { display: flex; justify-content: flex-end; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--mustard);
  color: var(--dark);
  border-radius: var(--pill);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.nav-cta:hover { opacity: 0.85; }

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-toggle-bar {
  width: 24px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 32px 80px;
}

/* Eyebrow label above heading */
.hero-label {
  display: inline-block;
  background: var(--mustard);
  color: var(--dark);
  border-radius: var(--pill);
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Large display heading */
.hero-heading {
  font-family: "DM Serif Display", serif;
  font-size: clamp(44px, 5.8vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--dark);
  margin-bottom: 26px;
}

/* Terracotta italic accent on the last line */
.hero-heading .accent {
  color: var(--terracotta);
  font-style: italic;
}

.hero-sub {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
  max-width: 460px;
  margin-bottom: 36px;
}

/* Hero buttons row */
.hero-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-sage {
  display: inline-flex;
  align-items: center;
  background: var(--sage);
  color: #fff;
  border-radius: var(--pill);
  padding: 15px 26px;
  font-size: 15px;
  font-weight: 700;
  transition: opacity 0.2s;
}

.btn-sage:hover { opacity: 0.85; }

.btn-ghost {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 0.2s;
}

.btn-ghost:hover { opacity: 0.55; }

/* Hero right: hero image PNG with geometric accent circles behind it */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sage circle accent top-right */
.hero-visual::before {
  content: "";
  position: absolute;
  top: -24px;
  right: -12px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.65;
  z-index: 0;
}

/* Mustard circle accent bottom-left */
.hero-visual::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mustard);
  opacity: 0.75;
  z-index: 0;
}

/* The hero collage image sits above the circles */
.hero-img {
  position: relative;
  z-index: 1;
  width: 100%;
  object-fit: contain;
}


/* ============================================================
   MARQUEE STRIP — scrolling text band between hero and features
   ============================================================ */
.marquee-strip {
  background: var(--terracotta);
  overflow: hidden;
  padding: 14px 0;
  /* Prevents layout shift during animation */
  white-space: nowrap;
}

/* The inner track is double-wide so it loops seamlessly:
   first half scrolls out left while second half replaces it */
.marquee-track {
  display: inline-flex;
  gap: 0;
  /* Animate from 0 to -50% so the duplicate content perfectly replaces the original */
  animation: marquee-scroll 34s linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Each repeated phrase unit */
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
}

/* Small diamond separator between phrase repetitions */
.marquee-item::after {
  content: "◆";
  font-size: 8px;
  opacity: 0.6;
}

/* ============================================================
   INVISIBLE WORK SECTION — between marquee and features
   ============================================================ */
.invisible-section {
  padding: 88px 0;
  background-image: url('assets/bg/background.png');
  background-size: 40%;   /* smaller value = smaller illustrations in pattern */
  background-repeat: repeat;
  background-position: center;
}

/* 2-column layout: heading left, quote card right */
.invisible-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: end; /* card bottom aligns with last text line, no stretching */
}

/* Mustard pill eyebrow label */
.invisible-pill {
  display: inline-block;
  background: var(--mustard);
  color: var(--dark);
  border-radius: var(--pill);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Scroll fade-in — element rises and fades when it enters the viewport */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.fade-in-up.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Large statement heading */
.invisible-heading {
  font-family: "DM Serif Display", serif;
  font-size: clamp(42px, 5.8vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--dark);
  margin-bottom: 30px;
}

/* Body paragraphs */
.invisible-body p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.72;
  text-align: justify;
}

.invisible-body p + p { margin-top: 14px; }

/* Terracotta quote card — narrower, right-aligned in its column */
.invisible-quote-card {
  background: var(--terracotta);
  border-radius: 20px;
  padding: 38px 34px 34px;
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin-left: auto; /* pushes card to the right of the column */
}

/* Quote body text grows to fill available space */
.invisible-quote-text {
  font-family: "DM Serif Display", serif;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.3;
  color: #fff;
  flex: 1;
  margin-bottom: 24px;
}

/* Bottom row: decorative line left, bowl illustration right */
.invisible-quote-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* Bowl illustration — inline, aligned to bottom-right of card */
.invisible-quote-illus {
  width: 80px;
  opacity: 0.80;
  animation: bowl-wobble 3s ease-in-out infinite;
  transform-origin: center bottom;
}

@keyframes bowl-wobble {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(2deg); }
  75%       { transform: rotate(-2deg); }
}

/* Wrapper needed to position steam puffs relative to the bowl */
.bowl-wrapper {
  position: relative;
  display: inline-block;
}

/* Smoke puffs — soft blobs that start dense and expand into nothing */
.steam-puff {
  position: absolute;
  bottom: 82%;
  border-radius: 50%;
  background: rgba(255, 250, 245, 0.55);
  filter: blur(5px);
  pointer-events: none;
}

/* 5 puffs clustered above the bowl center, staggered timing */
.steam-puff:nth-child(1) { left: 12%; width: 13px; height: 13px; animation: smoke-a 3.2s ease-out infinite; animation-delay: 0s; }
.steam-puff:nth-child(2) { left: 28%; width: 11px; height: 11px; animation: smoke-b 2.9s ease-out infinite; animation-delay: 0.65s; }
.steam-puff:nth-child(3) { left: 46%; width: 15px; height: 15px; animation: smoke-a 3.5s ease-out infinite; animation-delay: 1.3s; }
.steam-puff:nth-child(4) { left: 62%; width: 10px; height: 10px; animation: smoke-c 3.0s ease-out infinite; animation-delay: 2.0s; }
.steam-puff:nth-child(5) { left: 74%; width: 12px; height: 12px; animation: smoke-b 3.3s ease-out infinite; animation-delay: 1.0s; }

/* Drifts left → right → left as it rises and expands */
@keyframes smoke-a {
  0%   { transform: translateY(0)     translateX(0)    scale(0.4) rotate(0deg);   opacity: 0.85; }
  25%  { transform: translateY(-18px) translateX(6px)  scale(1.4) rotate(12deg);  opacity: 0.65; }
  60%  { transform: translateY(-42px) translateX(-4px) scale(3.2) rotate(-8deg);  opacity: 0.30; }
  100% { transform: translateY(-72px) translateX(5px)  scale(5.5) rotate(4deg);   opacity: 0; }
}

/* Drifts right → left → right */
@keyframes smoke-b {
  0%   { transform: translateY(0)     translateX(0)    scale(0.35) rotate(0deg);  opacity: 0.80; }
  25%  { transform: translateY(-15px) translateX(-7px) scale(1.2) rotate(-14deg); opacity: 0.60; }
  60%  { transform: translateY(-38px) translateX(5px)  scale(2.9) rotate(10deg);  opacity: 0.28; }
  100% { transform: translateY(-68px) translateX(-4px) scale(5.0) rotate(-6deg);  opacity: 0; }
}

/* Gentle upward drift with slight sway */
@keyframes smoke-c {
  0%   { transform: translateY(0)     translateX(0)    scale(0.45) rotate(0deg);  opacity: 0.75; }
  25%  { transform: translateY(-20px) translateX(4px)  scale(1.3) rotate(8deg);   opacity: 0.55; }
  60%  { transform: translateY(-44px) translateX(-6px) scale(3.0) rotate(-10deg); opacity: 0.25; }
  100% { transform: translateY(-74px) translateX(3px)  scale(5.2) rotate(5deg);   opacity: 0; }
}

/* ============================================================
   FEATURES ROW — 3 benefit cards beneath the hero
   ============================================================ */
.features {
  padding: 144px 0 144px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Section title above the feature cards */
.features-heading {
  font-family: "DM Serif Display", serif;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--terracotta);
  text-align: center;
  margin-bottom: 56px;
}

.feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}

/* Small illustration icon at top of each card */
.feature-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 18px;
}

.feature-title {
  font-family: "DM Serif Display", serif;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 10px;
  color: var(--dark);
}

.feature-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}


/* ============================================================
   WHO WE ARE — sage green background section
   ============================================================ */
.who-section {
  background: var(--sage-section);
  padding: 80px 0 60px;
}

/* 2 columns: bio text left (narrower), portrait cards right (wider) */
.who-inner {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 48px;
  align-items: stretch;
}

.who-heading {
  font-family: "DM Serif Display", serif;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 20px;
}

.who-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 14px;
}


/* Two portrait cards side by side */
.who-profiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Pre-designed profile card images — shown as-is: full image, natural
   aspect ratio, no cropping. Only scales to fit the column width. */
.profile-card-img {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   WHAT WE CREATE — 2-column header + 4 output-type cards
   ============================================================ */
.create-section {
  background: var(--cream);
  padding: 96px 0;
}

/* Two-column header: heading left, intro text right */
.create-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}

.create-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 24px;
}

.create-heading {
  font-family: "DM Serif Display", serif;
  font-size: clamp(42px, 5.5vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: var(--dark);
}

.create-body {
  font-size: 18px;
  line-height: 2;
  color: var(--dark);
}

/* Four cards in a row */
.create-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.create-card {
  background: #fff;
  border-radius: 32px;
  border: 1px solid rgba(26, 18, 0, 0.10); /* --dark (#1a1200) at 10% opacity */
  padding: 28px;
  box-shadow: 0 20px 60px rgba(26, 18, 0, 0.10); /* --dark at 10% opacity */
}

/* Gold circle accent at top of each card */
.create-card-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(196, 154, 26, 0.80); /* --mustard (#c49a1a) at 80% opacity */
  margin-bottom: 32px;
}

.create-card-title {
  font-family: "DM Serif Display", serif;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--dark);
  margin-bottom: 20px;
}

.create-card-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.story-section {
  padding: 80px 0;
  background: var(--cream);
}

/* Large serif section heading */
.section-heading {
  font-family: "DM Serif Display", serif;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dark);
  margin-bottom: 14px;
}

.section-sub {
  font-size: 16px;
  color: var(--muted);
  max-width: 540px;
  margin-bottom: 44px;
}

/* Tighter spacing when two section-subs sit together */
.section-sub--tight { margin-bottom: 10px; }

/* Subtitle between intro text and the card grid */
.story-subtitle {
  font-family: "DM Serif Display", serif;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--dark);
  margin-bottom: 24px;
}

/* 3x2 grid of terracotta cards */
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.story-card {
  background: var(--terracotta);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Small illustration inside each card */
.story-card-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.story-card-title {
  font-family: "DM Serif Display", serif;
  font-size: 22px;
  color: #fff;
  line-height: 1.15;
}

.story-card-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}

/* Small contextual note below the grid */
.story-note {
  margin-top: 28px;
  display: inline-block;
  background: var(--surface);
  border-radius: 12px;
  padding: 16px 22px;
  font-size: 15px;
  color: var(--muted);
}


/* ============================================================
   OUR PROCESS — stacked step images on a looping fade reveal
   ============================================================ */
.process-section {
  padding: 120px 0;
  /* Repeating illustration pattern, same as the other illustrated sections */
  background-image: url('assets/bg/background.png');
  background-size: 40%;
  background-repeat: repeat;
  background-position: center;
}

/* Page-width alignment wrapper */
.process-stack {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Static header — always visible, never animates */
.process-header {
  margin-bottom: 56px;
}

.process-badge {
  display: inline-block;
  background: var(--mustard);
  color: var(--dark);
  border-radius: var(--pill);
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.process-heading {
  font-family: "DM Serif Display", serif;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dark);
}

/* Clip wrapper: hides the heading text baked into the process images.
   The images are 1672×941. The heading occupies the top ~35% of
   each image. aspect-ratio 16/5.9 makes the container height =
   width × 0.369, which clips the top ~35% of each image and shows
   the full illustration area: circles, connecting line, step labels. */
.process-clip-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 5.9;
}

/* All 4 images stacked, anchored to the container bottom so the
   illustration area always lines up regardless of container width. */
.process-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
}

/* All 4 step images run as ONE continuous loop. When the section
   enters the viewport they fade in one by one, the full diagram
   holds, then everything fades out and the cycle restarts from
   just step 1 again — playing 1 → 2 → 3 → 4 → 1 → 2 → 3 → 4 …
   forever. Each keyframe starts and ends at opacity 0, so the
   loop seam is a smooth dissolve rather than a hard cut. */
.process-section.is-visible .process-img--1 { animation: process-step-1 10s ease-in-out infinite; }
.process-section.is-visible .process-img--2 { animation: process-step-2 10s ease-in-out infinite; }
.process-section.is-visible .process-img--3 { animation: process-step-3 10s ease-in-out infinite; }
.process-section.is-visible .process-img--4 { animation: process-step-4 10s ease-in-out infinite; }

/* Step 1 — fades in first, holds, fades out last before the restart */
@keyframes process-step-1 {
  0%        { opacity: 0; }
  4%,  86%  { opacity: 1; }
  100%      { opacity: 0; }
}
/* Steps 2–4 — fade in at staggered times (~1.4s apart), hold, fade out */
@keyframes process-step-2 {
  0%,  12%  { opacity: 0; }
  17%, 86%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes process-step-3 {
  0%,  26%  { opacity: 0; }
  31%, 86%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}
@keyframes process-step-4 {
  0%,  40%  { opacity: 0; }
  45%, 86%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}

/* ============================================================
   WHY WE DO THIS — heading + auto-rotating statement blocks
   ============================================================ */
.why-focus-section {
  background-color: var(--sage-section);
  /* Green wash (--sage-section at 71%) over the map so the
     street lines stay subtle and don't compete with the text */
  background-image:
    linear-gradient(rgba(84, 122, 102, 0.71), rgba(84, 122, 102, 0.71)),
    url('assets/bg/background-ehv.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 168px;
}

/* Large serif statement heading — stays fixed above the rotator */
.why-focus-heading {
  font-family: "DM Serif Display", serif;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--dark);
  max-width: 760px;
  margin: 0 0 40px;
}

/* Beige italic accent on the heading */
.why-focus-heading .accent {
  color: var(--cream);
  font-style: italic;
  display: inline-block;   /* lets the fade-up transform apply to this accent */
}

/* The statement text laid out in two static columns */
.why-focus-columns {
  columns: 2;
  column-gap: 56px;
  max-width: 900px;
}

.why-focus-columns p {
  break-inside: avoid;   /* keep each paragraph whole within a column */
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--dark);
}

.why-focus-columns p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   STORIES IN PROGRESS — film strip photo roll
   ============================================================ */
.progress-section {
  padding: 88px 0 96px;
  overflow: hidden;
}

.progress-pill {
  display: inline-block;
  background: var(--mustard);
  color: var(--dark);
  border-radius: var(--pill);
  padding: 9px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.progress-heading {
  font-family: "DM Serif Display", serif;
  font-size: clamp(38px, 5.4vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--dark);
  max-width: 760px;
  margin-bottom: 26px;
}

.progress-sub {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 520px;
  margin-bottom: 56px;
}

.progress-sprig {
  flex: 0 0 auto;
  width: 34px;
  height: auto;
  margin-top: 4px;
}

.progress-sub p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.72;
}

/* Film strip stage: gives vertical room for the tilt */
.film-stage { padding: 24px 0; }

/* Dark strip, wider than viewport, slightly tilted */
.film-strip {
  position: relative;
  width: 116%;
  margin-left: -8%;
  transform: rotate(-2deg);
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(26, 18, 0, 0.28);
}

/* Moving track — scrolls by exactly one set width for a seamless loop */
.film-track {
  display: flex;
  width: max-content;
  animation: film-roll 46s linear infinite;
}

.film-strip:hover .film-track { animation-play-state: paused; }

/* 8 cells × 240px = 1920px per set */
@keyframes film-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-1920px); }
}

/* Each cell: dark background + sprocket holes as repeating radial gradients */
.film-cell {
  flex: 0 0 240px;
  height: 320px;
  background-color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    radial-gradient(ellipse 8px 6px at center, var(--cream) 0 72%, transparent 75%),
    radial-gradient(ellipse 8px 6px at center, var(--cream) 0 72%, transparent 75%);
  background-size: 30px 20px;
  background-repeat: repeat-x;
  background-position: center 14px, center calc(100% - 14px);
}

/* Photo frame inside each cell — cream border like developed film */
.film-photo {
  width: 196px;
  height: 248px;
  object-fit: cover;
  border: 4px solid var(--cream);
  border-radius: 3px;
}

@media (max-width: 640px) {
  .progress-section { padding: 56px 0 64px; }
}


/* ============================================================
   CTA BANNER — full-width terracotta block
   ============================================================ */
.cta-section {
  background: var(--terracotta);
}

/* 3-column grid: illustration | text | actions */
.cta-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 36px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 32px;
}

/* Decorative food illustrations on both ends */
.cta-illus {
  width: 88px;
  object-fit: contain;
}

.cta-heading {
  font-family: "DM Serif Display", serif;
  font-size: clamp(28px, 3.2vw, 40px);
  color: #fff;
  margin-bottom: 10px;
}

.cta-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 400px;
  line-height: 1.6;
}

/* Actions column: button + text link */
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.btn-white {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--terracotta);
  border-radius: var(--pill);
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.btn-white:hover { opacity: 0.9; }

.cta-link {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.cta-link:hover { opacity: 0.75; }


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

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

.footer-location {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.footer-social {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  align-items: center;
}

.footer-social a {
  color: var(--muted);
  transition: color 0.2s;
  display: flex;
}

.footer-social a:hover { color: var(--dark); }

/* Subtle site credit — reveals the email on hover */
.footer-credit-wrap {
  text-align: center;
  margin-top: 16px;
}

.footer-credit {
  display: inline-grid;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.45;
  transition: opacity 0.25s ease;
}

.footer-credit:hover { opacity: 0.85; }

/* Both lines share one grid cell so the swap causes no layout shift */
.footer-credit > span {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease;
}

.footer-credit-email { opacity: 0; }

.footer-credit:hover .footer-credit-label { opacity: 0; }
.footer-credit:hover .footer-credit-email { opacity: 1; }


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 960px) {
  .hero               { grid-template-columns: 1fr; gap: 36px; padding: 48px 24px 56px; }
  .hero-visual        { order: -1; max-width: 480px; margin: 0 auto; }
  .features-grid      { grid-template-columns: 1fr 1fr; }
  .features           { padding: 100px 0; }
  .invisible-inner    { grid-template-columns: 1fr; gap: 40px; }
  .create-inner       { grid-template-columns: 1fr; }
  .create-cards       { grid-template-columns: 1fr 1fr; }
  .who-inner          { grid-template-columns: 1fr; }
  .who-profiles       { grid-template-columns: 1fr; }
  .story-grid         { grid-template-columns: 1fr 1fr; }
  .cta-inner          { grid-template-columns: 1fr; text-align: center; padding: 48px 24px; }
  .cta-illus          { display: none; }
  .cta-sub            { max-width: 100%; }
  .cta-actions        { width: 100%; }
}

@media (max-width: 640px) {
  /* --- Mobile navigation: logo + CTA + hamburger stay in the bar;
     the links drop down when the hamburger is tapped --- */
  .nav-inner          { grid-template-columns: 1fr auto auto; gap: 12px; padding: 14px 16px; }
  .nav-logo           { grid-area: 1 / 1; }
  .nav-logo-img       { height: 48px; }
  .nav-cta-wrap       { grid-area: 1 / 2; }
  .nav-cta            { padding: 10px 16px; font-size: 14px; }
  .nav-toggle         { display: flex; grid-area: 1 / 3; justify-self: end; }
  .nav-inner > nav    { grid-column: 1 / -1; grid-row: 2; }
  .nav-links          { display: none; flex-direction: column; gap: 4px; padding: 10px 0 2px; }
  .nav-links a        { padding: 10px 2px; }
  .site-nav.nav-open .nav-links { display: flex; }

  /* --- Layout stacks to one column --- */
  .wrap, .footer-inner { padding-left: 18px; padding-right: 18px; }
  .hero               { padding: 36px 18px 48px; }
  .features-grid      { grid-template-columns: 1fr; }
  .create-cards       { grid-template-columns: 1fr; }
  .story-grid         { grid-template-columns: 1fr; }
  .who-profiles       { grid-template-columns: 1fr; }
  .why-focus-columns  { columns: 1; }
  .footer-inner       { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .footer-social      { justify-content: center; }

  /* --- Trim oversized vertical padding on small screens --- */
  .features           { padding: 64px 0; }
  .invisible-section  { padding: 56px 0; }
  .who-section        { padding: 56px 0 48px; }
  .create-section     { padding: 64px 0; }
  .story-section      { padding: 56px 0; }
  .process-section    { padding: 56px 0; }
  .why-focus-section  { padding: 56px 0 64px; }

  /* --- Keep large display headings from overflowing --- */
  .hero-heading,
  .invisible-heading,
  .create-heading,
  .progress-heading   { font-size: clamp(30px, 8vw, 42px); }
}