/* ==================================================================
   MJ CREATIVE - STYLES
   Strictly black & white, editorial. Foundations + empty section
   scaffold. Section content is designed in later passes.
   ================================================================== */

/* ------------------------------------------------------------------
   1. CUSTOM PROPERTIES
------------------------------------------------------------------- */
:root {
  /* ---- Colour: #000, #fff, three greys. Nothing else, ever. ---- */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey-light: #e5e5e5; /* hairline rules, placeholder fill */
  --color-grey-mid:   #b3b3b3; /* secondary borders, disabled states */
  --color-grey-dark:  #6e6e6e; /* muted / secondary text, captions */

  --color-bg: var(--color-white);
  --color-text: var(--color-black);
  --color-text-muted: var(--color-grey-dark);
  --color-border: var(--color-grey-light);
  --color-placeholder-bg: var(--color-grey-light);
  /* grey-dark on grey-light only clears ~4.05:1 (fails AA's 4.5:1) -
     use full black for placeholder captions instead of the shared muted token */
  --color-placeholder-text: var(--color-black);

  /* ---- Warm greys, used only for the "asset not uploaded yet" tiles
     in The Work and the team section (reels, portraits). Kept separate
     from the cool greys above, which are the site's real palette. ---- */
  --color-warm-wash: #e9e6e0;
  --color-warm-fill: #d9d5ce;
  --color-warm-text: #111110;

  /* ---- Type families ---- */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Type scale (rem, 1rem = 16px) ---- */
  --text-xs:   0.75rem;   /* 12px - eyebrows, captions, meta */
  --text-sm:   0.875rem;  /* 14px - nav links, small print */
  --text-base: 1rem;      /* 16px - body copy */
  --text-md:   1.1875rem; /* 19px - lead paragraphs */
  --text-lg:   1.5rem;    /* 24px - h4 / small display */
  --text-xl:   2rem;      /* 32px - h3 */
  --text-2xl:  2.75rem;   /* 44px - h2 */
  --text-3xl:  3.5rem;    /* 56px - h1 (tablet/desktop) */
  --text-4xl:  4.75rem;   /* 76px - hero display (desktop) */
  --text-5xl:  8.25rem;   /* 132px - editorial hero ceiling on very wide screens */

  /* ---- Letter-spacing ---- */
  --tracking-tight:  -0.015em; /* large serif display */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* small uppercase labels */
  --tracking-wider:  0.16em;   /* wordmark, rare emphasis */

  /* ---- Line-height ---- */
  --leading-tight:  1.05;
  --leading-snug:   1.3;
  --leading-normal: 1.65;

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

  /* ---- Layout / max-width ---- */
  --container-max:    1248px; /* standard section width */
  --container-narrow: 700px;  /* prose, quotes, single-column copy (offer band) */
  --container-pad:    clamp(1.25rem, 4vw, 6rem); /* 24px mobile, up to 96px desktop */

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;

  /* Set/overridden by main.js to match the header's real height */
  --header-height: 88px;
}

/* ------------------------------------------------------------------
   2. RESET
------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

/* Visually hidden but still announced by screen readers - used for
   headings that give a section an accessible name without repeating
   visible copy that's already on the page. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   3. TYPOGRAPHY
------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h1 {
  font-size: clamp(var(--text-3xl), 6vw + 1rem, var(--text-4xl));
}

h2 {
  font-size: clamp(var(--text-2xl), 4vw + 1rem, var(--text-3xl));
}

h3 {
  font-size: var(--text-xl);
}

h4 {
  font-size: var(--text-lg);
}

p {
  max-width: 65ch;
}

/* Small uppercase tracked-out label, e.g. above a section heading */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lead {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 55ch;
}

/* Editorial italic-grey flourish for part of a heading - the hero's
   second sentence, "Press play." in The Work, etc. Inherits the
   parent heading's family/size/weight; only changes style and colour. */
.italic-accent {
  font-style: italic;
  color: var(--color-text-muted);
}

/* Hover-underline link, used by nav, footer and inline text links */
.link {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background-color: currentColor;
  transition: right var(--duration-base) var(--ease);
}

.link:hover::after,
.link:focus-visible::after,
.link.is-active::after {
  right: 0;
}

/* ------------------------------------------------------------------
   4. LAYOUT
------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Simple two-column split that stacks on small screens.
   Override --split with a fr value pair, e.g. --split: 5fr 7fr; */
.grid-2 {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .grid-2 {
    grid-template-columns: var(--split, 1fr 1fr);
    align-items: start; /* top-align mismatched-height columns; override per-instance if needed */
  }

  .grid-2--reverse > :first-child {
    order: 2;
  }
}

/* ------------------------------------------------------------------
   5. BUTTONS
------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-black);
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: background-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}

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

/* Secondary CTA - a plain underlined text link, paired next to .btn */
.cta-text {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity var(--duration-fast) var(--ease);
}

.cta-text:hover,
.cta-text:focus-visible {
  opacity: 0.6;
}

/* Compact sizing for a button that sits inline in the header nav */
.nav-cta {
  padding: var(--space-2) var(--space-5);
}

/* ------------------------------------------------------------------
   6. NAV
------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--text-sm);
  transition: top var(--duration-fast) var(--ease);
}

.skip-link:focus {
  top: var(--space-4);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Full-screen mobile overlay takes precedence over the base state */
.site-header.is-nav-open {
  background-color: var(--color-black);
  border-bottom-color: transparent;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}

.logo {
  position: relative; /* stay above the full-screen mobile overlay */
  z-index: 2;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  transition: color var(--duration-base) var(--ease);
}

.site-header.is-nav-open .logo {
  color: var(--color-white);
}

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

.nav-list a {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.nav-toggle {
  position: relative; /* stay above the full-screen mobile overlay */
  z-index: 2;
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle__bars span {
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--color-black);
  transition: transform var(--duration-fast) var(--ease),
              opacity var(--duration-fast) var(--ease),
              background-color var(--duration-fast) var(--ease);
}

.site-header.is-nav-open .nav-toggle__bars span {
  background-color: var(--color-white);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 859px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Full-screen black overlay with large serif links, in white */
  .nav {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease),
                visibility var(--duration-base) var(--ease);
  }

  .site-header.is-nav-open .nav {
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  .nav-list a {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 500;
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    color: var(--color-white);
  }

  /* The CTA still needs to read as a button, not a plain link, even
     against the black overlay - re-apply button-like chrome on top of
     the plain-link rule above (this selector's higher specificity
     wins regardless of source order). */
  .nav-list .nav-cta {
    background-color: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-top: var(--space-4);
  }
}

/* ------------------------------------------------------------------
   7. IMAGE PLACEHOLDER COMPONENT
   Reusable stand-in for a real photo/video asset. A flat grey block
   (a real <img>, so it lazy-loads and takes real alt text) at a fixed
   aspect ratio, with a small uppercase caption overlay describing the
   shot still needed. Swap for real media after the shoot day - search
   the codebase for "PLACEHOLDER" to find every instance.

   Usage:
     <figure class="placeholder placeholder--16-9">
       <img class="placeholder__img" src="[tiny grey SVG data URI]"
            width="16" height="9" alt="[real description]" loading="lazy">
       <figcaption class="placeholder__caption">
         <span>Placeholder: Founder filming on location, landscape 16:9</span>
       </figcaption>
     </figure>

   For a ratio with no preset modifier, set --ph-ratio inline:
     <figure class="placeholder" style="--ph-ratio: 3 / 4">

   Swapping to a real photo: replace the img's src (and tighten its alt
   text to match what was actually shot), then delete the <figcaption>.

   NOTE - this is the ORIGINAL placeholder system, still used by the
   Hero/About/Results real photos and logos. The Work's reel tiles and
   the team portraits use a newer, data-driven sibling of this same
   idea - see .media-placeholder in sections 11 and 19 below.
------------------------------------------------------------------- */
.placeholder {
  --ph-ratio: 4 / 3;
  position: relative;
  width: 100%;
  aspect-ratio: var(--ph-ratio);
  margin: 0;
  overflow: hidden;
  background-color: var(--color-placeholder-bg);
}

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

.placeholder__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  text-align: center;
  pointer-events: none; /* decorative overlay note, nothing beneath to block */
}

.placeholder__caption span {
  max-width: 30ch;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--color-placeholder-text);
}

/* Ratio presets in current use. For anything else (square, ultra-wide,
   3:4...) skip adding a new modifier and set --ph-ratio inline instead -
   see the usage note above. */
.placeholder--landscape { --ph-ratio: 16 / 9; }
.placeholder--portrait  { --ph-ratio: 4 / 5; }

/* ------------------------------------------------------------------
   8. SECTIONS - shared page-section rules
------------------------------------------------------------------- */
.section {
  padding-block: var(--space-9);
}

/* Hairline rule between adjacent sections, instead of on every section */
.section + .section {
  border-top: 1px solid var(--color-border);
}

/* A plain rule with no built-in spacing - margins come from whatever
   owl-selector wraps it, so it slots into a section's own rhythm. */
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* ------------------------------------------------------------------
   9. HERO
   No image in the Editorial layout - a large serif statement instead,
   with a simple row (subline + CTAs) beneath it.
------------------------------------------------------------------- */
.section--hero {
  padding-top: 0;
  padding-bottom: var(--space-8);
}

.hero-inner {
  padding-top: calc(var(--header-height) + var(--space-8));
}

.hero-inner > * + * {
  margin-top: var(--space-6);
}

.hero-heading {
  max-width: 1200px;
  font-size: clamp(var(--text-3xl), 5vw + 2.5rem, var(--text-5xl));
  line-height: 0.95;
}

.hero-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .hero-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

/* ------------------------------------------------------------------
   10. STAT STRIP
------------------------------------------------------------------- */
.stat-strip {
  border-top: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-7);
}

.stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-5);
}

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

.stat-strip__col {
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-5);
}

/* Desktop: 4 across, only the first column has no left divider */
@media (min-width: 700px) {
  .stat-strip__col:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

/* Mobile: 2x2 - vertical divider between the two columns of each row,
   horizontal divider between the two rows */
@media (max-width: 699.98px) {
  .stat-strip__col {
    border-left: 0;
    padding-left: 0;
  }
  .stat-strip__col:nth-child(even) {
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-5);
  }
  .stat-strip__col:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
  }
}

.stat-strip__value {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-2xl), 3vw + 1rem, var(--text-3xl));
  font-weight: 500;
  line-height: var(--leading-tight);
}

.stat-strip__label {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

.stat-strip__credential {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------
   11. THE WORK (reels)
------------------------------------------------------------------- */
.work-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.work-header__instagram {
  font-size: var(--text-sm);
}

.work-heading {
  margin-top: var(--space-4);
  max-width: 900px;
}

.work-featured {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .work-featured {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }
}

/* Shared reel tile - used in both the featured row and the reel wall */
.reel-tile {
  display: flex;
  flex-direction: column;
}

/* Same fix as .testimonials-nav[hidden] below: the [hidden] attribute
   alone won't win against display:flex above (same specificity, this
   stylesheet loads after the UA one) - make it explicit so JS setting
   tile.hidden = true (showPlaceholders: false, empty src) actually hides it. */
.reel-tile[hidden] {
  display: none;
}

.reel-tile__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.reel-tile__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background-color: var(--color-placeholder-bg);
}

.reel-tile__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-tile__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgba(0, 0, 0, 0.15);
}

.reel-tile__play-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.92);
  transition: background-color var(--duration-fast) var(--ease);
}

.reel-tile__play:hover .reel-tile__play-icon,
.reel-tile__play:focus-visible .reel-tile__play-icon {
  background-color: var(--color-white);
}

.reel-tile__play-icon::before {
  content: '';
  display: block;
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--color-black);
}

/* Sound toggle - shown on every autoplaying (non-reduced-motion) reel,
   since all reels start muted. Two pre-coloured SVG icons swapped via
   the .is-muted class, rather than a CSS mask, so it stays crisp
   without relying on browser-inconsistent mask-luminance behaviour. */
.reel-tile__sound {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.45);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-5v16l-5-5H4z' fill='%23ffffff'/%3E%3Cpath d='M16 8a5 5 0 0 1 0 8' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M18.6 5.4a9 9 0 0 1 0 13.2' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: background-color var(--duration-fast) var(--ease);
}

.reel-tile__sound.is-muted {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-5v16l-5-5H4z' fill='%23ffffff'/%3E%3Cpath d='M16 8l5.5 8M21.5 8 16 16' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.reel-tile__sound:hover,
.reel-tile__sound:focus-visible {
  background-color: rgba(0, 0, 0, 0.7);
}

.reel-tile__caption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.reel-tile__caption-long {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 42ch;
}

/* "Asset not uploaded yet" tile - reused by the team portraits too */
.media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  background-color: var(--color-warm-fill);
  color: var(--color-warm-text);
}

.media-placeholder__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.reel-wall {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
}

/* Same [hidden]-vs-display:flex fix as .reel-tile[hidden] below - main.js
   sets this when every reel in the wall is still a placeholder, so the
   section doesn't end in a dangling gap with nothing in it. */
.reel-wall[hidden] {
  display: none;
}

.reel-wall::-webkit-scrollbar {
  display: none;
}

.reel-wall .reel-tile {
  flex: 0 0 42%;
  min-width: 150px;
  scroll-snap-align: start;
}

/* Desktop: 4-column staggered grid instead of a horizontal scroller */
@media (min-width: 960px) {
  .reel-wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    padding-bottom: 0;
  }

  .reel-wall .reel-tile {
    flex: initial;
    min-width: 0;
  }

  .reel-wall .reel-tile:nth-child(even) {
    margin-top: 48px;
  }
}

/* ------------------------------------------------------------------
   12. ABOUT (who we are)
------------------------------------------------------------------- */
.about-content > * + * {
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------------
   13. WHY SOCIAL MEDIA MATTERS
------------------------------------------------------------------- */
.why-lead > * + * {
  margin-top: var(--space-5);
}

.why-stat {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  max-width: 55ch;
}

.why-stat__source {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--color-text-muted);
}

.why-list {
  display: grid;
  gap: var(--space-5);
}

.why-list li {
  max-width: 60ch;
}

/* ------------------------------------------------------------------
   14. PACKAGES
------------------------------------------------------------------- */
.pricing-note {
  margin-top: var(--space-4);
  max-width: 60ch;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
}

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid currentColor;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.price {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.package-list {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-black);
}

.package-row {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-6);
}

.package-row__inner {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .package-row__inner {
    grid-template-columns: 2fr 3fr 1fr;
    gap: var(--space-6);
    align-items: start;
  }
}

.package-row__name > * + * {
  margin-top: var(--space-2);
}

.package-row__desc > * + * {
  margin-top: var(--space-3);
}

.package-row__action {
  display: flex;
  align-items: center;
}

@media (min-width: 760px) {
  .package-row__action {
    justify-content: flex-end;
  }
}

.package-row--recommended {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-inline: var(--space-5);
}

.package-row--recommended .badge {
  border-color: var(--color-white);
}

.package-row--recommended .price,
.package-row--recommended .best-for {
  color: var(--color-grey-mid);
}

.package-row--recommended .cta-text {
  color: var(--color-white);
}

.service-card__pitch {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 500;
  line-height: var(--leading-snug);
  max-width: 55ch;
}

/* Smaller, so the pitch quote fits in the first column next to the
   price instead of running full-width below the row. */
.package-row__name .service-card__pitch {
  font-size: var(--text-sm);
  max-width: none;
}

.includes-list li {
  position: relative;
  padding-left: 1.25em;
}

.includes-list li + li {
  margin-top: var(--space-2);
}

/* Marker is a middle dot, not an em dash - see the redesign summary
   for why (house style now forbids em dashes anywhere on the site). */
.includes-list li::before {
  content: '\00B7';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--color-grey-mid);
}

.best-for {
  font-size: var(--text-sm);
}

.services-other {
  margin-top: var(--space-7);
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------
   15. RESULTS
------------------------------------------------------------------- */
.results-body > * + * {
  margin-top: var(--space-8);
}

.case-study__content > * + * {
  margin-top: var(--space-5);
}

.case-study__media h3 {
  margin-top: var(--space-4);
}

.case-study__media .case-study__meta {
  margin-top: var(--space-1);
}

.case-study__meta {
  color: var(--color-text-muted);
}

/* flex, not grid - an equal-width grid track squeezes a big number like
   "450,000+" narrower than its own text, overflowing into the next stat.
   flex: 0 0 auto sizes each stat to its content and wraps a 3rd item to
   its own line rather than shrinking the text to fit. */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
}

.stat {
  flex: 0 0 auto;
}

.stat__number {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-2xl), 3vw + 1rem, var(--text-3xl));
  font-weight: 500;
  line-height: var(--leading-tight);
  /* No tabular-nums: Cormorant Garamond's "1" is much narrower than its
     other digits, so forcing equal-width figures pads it with visible
     whitespace and makes it misread as a capital "I". Proportional
     figures look correct; the trade-off is very minor width jitter
     while the count-up animation runs. */
}

.stat__caption {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.case-study__line {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  max-width: 45ch;
}

.results-intro {
  max-width: 60ch;
  color: var(--color-text-muted);
}

/* Pots & Bots logo has a lot of empty space above its wordmark, so its
   grid cell (top-aligned like the rest of .grid-2) reads as sitting
   lower than the h3 beside it - nudge it up on desktop to compensate. */
@media (min-width: 860px) {
  .case-study__logo--raised {
    margin-top: -2.5rem;
  }
}

/* Full-width case-study copy, breaking out of the 2-column grid above it -
   overrides the site-wide `p { max-width: 65ch }` and .case-study__line's
   own max-width so both paragraphs run the full container width. */
.case-study__full {
  margin-top: var(--space-6);
}

.case-study__full > * + * {
  margin-top: var(--space-4);
}

.case-study__full p,
.case-study__full .case-study__line {
  max-width: none;
}

/* ------------------------------------------------------------------
   16. TESTIMONIALS
   Markup for .testimonial figures is generated by main.js from
   SITE_DATA.testimonials - see the "grid" (<=2 items) vs "slider" (3+)
   modifier classes it toggles on .testimonials-track.
------------------------------------------------------------------- */
.testimonials-track {
  margin-top: var(--space-7);
}

/* Shown instead of the grid/slider when no testimonial is published */
.testimonials-empty {
  padding-block: var(--space-8);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.testimonials-track.testimonials--grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

/* auto-fit rather than a fixed repeat(2,...) - with a single testimonial
   this gives it the full row instead of an empty, unbalanced column;
   .testimonial's own max-width (below) then caps it at a readable
   measure rather than stretching edge to edge. */
@media (min-width: 860px) {
  .testimonials-track.testimonials--grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

.testimonials-track.testimonials--slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.testimonials-track.testimonials--slider::-webkit-scrollbar {
  display: none;
}

.testimonials-track.testimonials--slider .testimonial {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 760px;
}

/* Solo testimonial (ClubHQ, until Pots & Bots' is ready to publish) -
   centre it on the page instead of leaving it flush left in the grid's
   single track. Remove once a second testimonial makes this a real grid. */
.testimonials-track.testimonials--grid:has(.testimonial:only-child) {
  justify-items: center;
}

.testimonials-track.testimonials--grid:has(.testimonial:only-child) .testimonial {
  align-items: center;
  text-align: center;
}

.testimonial__mark {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 4vw + 1rem, 4.5rem);
  line-height: 1;
  color: var(--color-grey-mid);
}

.testimonial__quote {
  margin-top: var(--space-3);
}

.testimonial__quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  max-width: 60ch;
}

/* Longer, multi-paragraph testimonials (like ClubHQ's) need breathing
   room between paragraphs; short single-paragraph ones are unaffected. */
.testimonial__quote p + p {
  margin-top: var(--space-4);
}

.testimonial__attribution {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.testimonials-nav {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}

/* The [hidden] attribute alone won't win against the display:flex above
   (same specificity, this stylesheet loads after the UA one) - make it
   explicit so JS toggling `nav.hidden` actually hides the row. */
.testimonials-nav[hidden] {
  display: none;
}

.testimonials-arrow {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1;
  transition: opacity var(--duration-fast) var(--ease);
}

.testimonials-arrow:hover,
.testimonials-arrow:focus-visible {
  opacity: 0.6;
}

.testimonials-dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.testimonials-dot {
  width: 24px;
  height: 2px;
  padding: 0;
  /* grey-light only clears 1.26:1 against white - fails the 3:1 UI-component
     minimum. grey-dark clears 5.1:1 and still reads as clearly "inactive"
     next to the solid black .is-active state. */
  background-color: var(--color-grey-dark);
  transition: background-color var(--duration-fast) var(--ease);
}

.testimonials-dot.is-active {
  background-color: var(--color-black);
}

/* ------------------------------------------------------------------
   17. FOUNDING CLIENT OFFER
   Not currently used on the page (kept for sales calls, per the copy
   doc) - the CSS is left in place rather than deleted.
------------------------------------------------------------------- */
.section--offer {
  background-color: var(--color-black);
  color: var(--color-white);
  text-align: center;
}

.offer-inner {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.offer-inner > * + * {
  margin-top: var(--space-5);
}

.btn--invert {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

.btn--invert:hover,
.btn--invert:focus-visible {
  background-color: transparent;
  color: var(--color-white);
}

/* ------------------------------------------------------------------
   18. ABOUT: STORY ("How we started")
------------------------------------------------------------------- */
.about-story__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .about-story__grid {
    grid-template-columns: 320px 1fr;
    align-items: start;
  }
}

.about-story__toc {
  display: none;
}

@media (min-width: 960px) {
  .about-story__toc {
    display: block;
    position: sticky;
    top: calc(var(--header-height) + var(--space-7));
  }

  .about-story__toc ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .about-story__toc a {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
  }
}

.about-story__content {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.about-story__section > * + * {
  margin-top: var(--space-4);
}

.about-story__section h3 {
  margin-bottom: var(--space-2);
}

/* Drop cap on the very first paragraph only */
.about-story__dropcap::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.4em;
  font-weight: 500;
  line-height: 0.82;
  padding-right: var(--space-2);
  padding-top: 0.05em;
}

/* ------------------------------------------------------------------
   19. ABOUT: TEAM
------------------------------------------------------------------- */
.about-team {
  padding-top: 0;
}

.team-heading {
  max-width: 700px;
}

.team-grid {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

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

.team-card {
  display: flex;
  flex-direction: column;
}

/* Same [hidden]-vs-display:flex fix as .reel-tile[hidden] above. */
.team-card[hidden] {
  display: none;
}

.team-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--color-placeholder-bg);
}

.team-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name {
  margin-top: var(--space-4);
}

.team-card__role {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.team-card__bio {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------
   20. FAQ
   Native <details>/<summary> - accessible and interactive with no JS.
------------------------------------------------------------------- */
.faq-list {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-black);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-5);
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  float: right;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  transition: transform var(--duration-fast) var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------
   21. CONTACT
------------------------------------------------------------------- */
.contact-intro > * + * {
  margin-top: var(--space-4);
}

.contact-form {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.contact-form .btn {
  margin-top: var(--space-2);
}

.contact-form__status {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-form__status.is-error {
  color: var(--color-text);
  font-weight: 600;
}

.form-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
  background-color: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  /* Custom focus ring, not just the border-color swap below - a thin
     underline colour change alone is too subtle to reliably read as
     "focused" for keyboard users. */
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
  border-bottom-color: var(--color-black);
}

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

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.contact-detail__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-detail__value {
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-text-muted); /* placeholder text - swap for the real value */
}

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

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.footer-copy,
.footer-links a,
.footer-social {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer-links {
  display: flex;
  gap: var(--space-5);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* ------------------------------------------------------------------
   23. MOTION - fade-up on scroll
   Add [data-reveal] to any element; main.js toggles .is-visible
   the first time it enters the viewport. Optionally set --reveal-delay
   inline to stagger a group of elements, e.g. style="--reveal-delay: 120ms"
------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease),
              transform var(--duration-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}