/* ============================================================
   Van Dyke Saddlery & Stock Horses
   Design system — palette, typography, layout primitives

   SECTION MAP
     1.  Tokens
     2.  Reset / base
     3.  Helpers (eyebrow, lead, skip link, visually-hidden)
     4.  Containers & sections
     5.  Buttons
     6.  Site header + nav
     7.  Hero
     8.  Creed band (the quote)
     9.  Path cards (the three ways to work with Paul)
     10. Work gallery
     11. Split feature (image + text)
     12. Testimonials
     13. Newsletter
     14. Contact band
     15. Inner-page pieces (text hero, duo cards, checklist)
     16. Footer
     17. Photo gallery + lightbox (Saddles page)
     18. Course cards + bundle (Online Courses page)
     19. Video embed + photo trio (School page)
   ============================================================ */

/* -------- 1. Tokens -------- */
:root {
  /* Ink — warm walnut rather than a cold black, so it sits with the leather */
  --ink: #2c221b;
  --ink-soft: #56463a;
  --muted: #8a7868;

  /* Leather — the spine of the palette, taken from Paul's veg-tan work */
  --tan: #c08a4e;          /* saddle tan — the accent colour */
  --tan-deep: #9c6a35;     /* hover / link states */
  --tan-soft: #edd9b8;     /* tinted fills, borders on dark */
  --russet: #7a4526;       /* tooled shadow */
  --walnut: #4a2f1e;       /* dark bands — used sparingly */
  --walnut-deep: #33200f;

  /* Sage — Wyoming high country. The one cool note; keeps the page from
     turning into a single brown wash. */
  --sage: #8d9a84;
  --sage-deep: #64715c;
  --sage-mist: #e8ebe3;

  /* Neutrals */
  --bone: #faf6ee;         /* page background */
  --bone-deep: #f2e9da;
  --white: #ffffff;
  --line: #e3d8c6;

  /* Type */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Space & layout */
  --container: 1140px;
  --container-narrow: 720px;
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(44, 34, 27, 0.06);
  --shadow-md: 0 10px 30px -15px rgba(44, 34, 27, 0.28);
  --shadow-lg: 0 24px 60px -30px rgba(44, 34, 27, 0.45);
  --radius: 4px;
  --radius-lg: 8px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--russet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--tan-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--walnut-deep);
  font-weight: 600;
  line-height: 1.14;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--tan);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------- 3. Helpers -------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tan-deep);
  margin: 0 0 0.9rem;
}
.eyebrow--light { color: var(--tan-soft); }

.lead {
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 58ch;
}

.section-head { max-width: 62ch; margin: 0 0 2.75rem; }
.section-head--center { margin-inline: auto; text-align: center; }

.rule {
  width: 56px; height: 2px; border: 0;
  background: var(--tan);
  margin: 0 0 1.5rem;
}
.rule--center { margin-inline: auto; }

.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: -9999px; top: 0;
  background: var(--walnut); color: #fff; padding: 0.75rem 1rem;
  text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 200; }

/* -------- 4. Containers & sections -------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
/* The header is sticky (74px), so an in-page jump would land under it.
   Every anchor target on the site is a section, so set it here once. */
.section[id] { scroll-margin-top: 74px; }
.section--bone   { background: var(--bone); }
.section--white  { background: var(--white); }
.section--deep   { background: var(--bone-deep); }
.section--sage   { background: var(--sage-mist); }
.section--walnut { background: var(--walnut); color: var(--tan-soft); }
.section--walnut h2,
.section--walnut h3 { color: var(--white); }
.section--walnut .lead { color: rgba(255, 255, 255, 0.78); }

/* -------- 5. Buttons -------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--russet); border-color: var(--russet); color: var(--white);
}
.btn--primary:hover {
  background: var(--walnut); border-color: var(--walnut); color: var(--white);
}

.btn--ghost {
  background: transparent; border-color: var(--line); color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--russet); color: var(--russet); background: var(--white);
}

.btn--light {
  background: var(--tan); border-color: var(--tan); color: var(--walnut-deep);
}
.btn--light:hover {
  background: var(--tan-soft); border-color: var(--tan-soft); color: var(--walnut-deep);
}

.btn--outline-light {
  background: transparent;
  border-color: rgba(237, 217, 184, 0.45);
  color: var(--tan-soft);
}
.btn--outline-light:hover {
  border-color: var(--tan-soft); color: var(--white); background: rgba(255,255,255,0.06);
}

/* A text link that reads as an action */
.link-arrow {
  font-weight: 600; font-size: 0.94rem;
  text-decoration: none;
  color: var(--russet);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.link-arrow::after { content: "\2192"; transition: transform 0.18s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* -------- 6. Site header + nav -------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 246, 238, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.brand {
  display: flex; flex-direction: column; gap: 0.3rem;
  text-decoration: none; color: var(--walnut-deep);
  line-height: 1.05;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 600; letter-spacing: -0.01em;
}
.brand__sub {
  font-family: var(--font-body);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--muted);
}

.site-header__nav ul {
  display: flex; align-items: center; gap: 1.9rem;
  list-style: none; margin: 0; padding: 0;
}
/* :not(.btn) matters — without it this rule wins over .btn--primary's white
   text (same specificity, later in the file) and the CTA goes brown-on-brown. */
.site-header__nav a:not(.btn) {
  text-decoration: none;
  font-size: 0.92rem; font-weight: 500;
  color: var(--ink-soft);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.site-header__nav a:not(.btn):hover { color: var(--russet); }
.site-header__nav a:not(.btn)[aria-current="page"] {
  color: var(--walnut-deep); font-weight: 600; border-bottom-color: var(--tan);
}
.site-header__nav .btn { padding: 0.6rem 1.15rem; font-size: 0.88rem; }

.nav-toggle {
  display: none;
  background: transparent; border: 1.5px solid var(--line);
  border-radius: var(--radius);
  width: 44px; height: 42px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 20px; height: 2px; background: currentColor;
  border-radius: 2px; content: "";
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after  { position: absolute; top: 6px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-header__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bone);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .site-header__nav[data-open="true"] { display: block; }
  .site-header__nav ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem 1.5rem 1.25rem;
  }
  .site-header__nav li { border-bottom: 1px solid var(--line); }
  .site-header__nav li:last-child { border-bottom: 0; padding-top: 1rem; }
  .site-header__nav a { display: block; padding: 0.9rem 0; font-size: 1rem; }
  .site-header__nav a[aria-current="page"] { border-bottom-color: transparent; }
  .site-header__nav .btn { justify-content: center; }
}

/* -------- 7. Hero -------- */
.hero {
  background: linear-gradient(180deg, var(--bone) 0%, var(--bone-deep) 100%);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
/* Text gets the wider column — the hero photo is PORTRAIT, so giving it the
   larger share would make the whole band absurdly tall. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__title-line { display: block; }
.hero__title-line--accent { color: var(--russet); font-style: italic; }
.hero__lead { margin-top: 1.4rem; }
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  margin-top: 2rem;
}
/* PORTRAIT 2:3 — the native ratio of the hero photo, so nothing is cropped.
   Same ratio at every width (it used to switch ratios below 900px, which
   re-cropped the photo on phones). Export hero images at 2:3, 1600x2400. */
.hero__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 2 / 3;
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Small stat strip beneath the hero copy */
/* A 3-column GRID, not flex. Flex kept dropping the third stat onto a second
   row: the natural label widths total ~490px against a ~486px hero column, so
   it overflowed by a handful of pixels at exactly the desktop width. The grid
   pins all three to one row at any width and lets a long label wrap inside its
   own cell instead. Keep the labels short anyway. */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero__fact { min-width: 0; }
.hero__fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 600; color: var(--walnut-deep);
  line-height: 1.1;
}
.hero__fact span {
  display: block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.35;
  color: var(--muted);
}

/* On phones the photo sits BETWEEN the headline and the lead paragraph:
     eyebrow → headline → photo → lead → buttons.

   `display: contents` on .hero__content is what makes that possible without
   touching the markup — it dissolves the wrapper so its four children become
   grid items of .hero__inner alongside .hero__frame, and `order` can then
   interleave the photo among them. Remove that line and the order values stop
   working, because the text pieces go back to being one single grid item.

   Gap is zeroed here so the five items are spaced by their own margins rather
   than by one uniform grid gap (grid-item margins never collapse, so what is
   written is what you get). */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 0; }

  .hero__content { display: contents; }
  .hero__content .eyebrow { order: 1; }
  .hero__content h1      { order: 2; }
  .hero__frame           { order: 3; margin: 0.5rem 0 1.75rem; }
  .hero__lead            { order: 4; margin-top: 0; }
  /* Online Courses runs two lead paragraphs; the rule above zeroes both, so
     put the space back between them. */
  .hero__lead + .hero__lead { margin-top: 1rem; }
  /* Tighter than desktop's 2rem: the lead's own bottom margin no longer
     collapses into this one once these are grid items. */
  .hero__actions         { order: 5; margin-top: 1.25rem; }

  /* Full-width stacked buttons — a phone-width tap target rather than two
     small left-aligned pills. */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* -------- 8. Creed band -------- */
.creed {
  background: var(--walnut);
  color: var(--tan-soft);
  padding-block: clamp(3.25rem, 7vw, 5.25rem);
}
.creed h2 { color: var(--white); }
.creed__eyebrow, .creed__title { text-align: center; }
/* Only the three-rule version needs the big gap before the list. */
.creed__title { margin-bottom: 2.75rem; }
/* .creed is NOT .section--walnut, so it misses that block's light-text rules.
   Without this, .lead renders dark ink on walnut — invisible. */
.creed .lead,
.creed p { color: rgba(255, 255, 255, 0.8); }
.creed .lead strong, .creed .lead em { color: var(--white); }

.creed__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.creed__list li {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(237, 217, 184, 0.22);
}
.creed__num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tan);
  margin-bottom: 0.6rem;
}
.creed__list h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  color: var(--white);
  margin-bottom: 0.55rem;
}
.creed__list p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.98rem;
  margin: 0;
}

@media (max-width: 900px) {
  .creed__list { grid-template-columns: 1fr; gap: 1.75rem; }
  .creed__title { margin-bottom: 2rem; }
}

/* -------- 9. Path cards -------- */
.paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.path-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.path-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bone-deep); }
.path-card__media img { width: 100%; height: 100%; object-fit: cover; }
.path-card__body { padding: 1.6rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.path-card h3 { margin-bottom: 0.5rem; }
.path-card p { color: var(--ink-soft); font-size: 0.97rem; }
.path-card .link-arrow { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

@media (max-width: 900px) {
  .paths { grid-template-columns: 1fr; gap: 1.25rem; }
  .path-card__media { aspect-ratio: 16 / 9; }
}

/* -------- 10. Work gallery -------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 0.85rem;
}
.gallery figure {
  margin: 0; overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone-deep);
  aspect-ratio: 1 / 1;
}
.gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery figure:hover img { transform: scale(1.04); }
.gallery figure.is-tall { grid-row: span 2; aspect-ratio: 1 / 2; }
.gallery figure.is-wide { grid-column: span 2; aspect-ratio: 2 / 1; }

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure.is-tall { grid-row: span 1; aspect-ratio: 1 / 1; }
  .gallery figure.is-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
}

/* -------- 11. Split feature -------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media { aspect-ratio: 4 / 3; }
}

/* -------- 12. Testimonials -------- */
/* Editorial treatment, chosen by the owner 19 Aug 2026 over the earlier card
   version: no boxes, no shadows, no borders around the words. The quotes sit
   straight on the page and are divided by hairlines. The page already carries
   boxed path-cards and duo-cards, and a fourth set of boxes here read like a
   pricing grid rather than a saddle shop.

   One .quote-feature set large above a .quote-row of supporting quotes. The
   hierarchy is deliberate: on the home page the flagship product gets the
   loudest voice. Both pages share these classes — the About page uses them for
   Paul's own pull quote and the two horsemanship testimonials. */
.quote-feature {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
/* Gap belongs BETWEEN the feature and the row, not on the feature itself —
   on the About page the feature is the last thing in its section, and a
   trailing margin there just doubled the section's bottom padding. */
.quote-feature + .quote-row { margin-top: 3.5rem; }
.quote-feature p {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.95rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.quote-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                       /* the hairlines do the separating, not a gap */
}
.quote {
  margin: 0;
  padding: 0 2rem;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.quote:first-child { border-left: 0; padding-left: 0; }
.quote:last-child  { padding-right: 0; }
.quote p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}
/* Quotes are never the same length — push every attribution to a shared
   baseline so the names line up across the row. */
.quote footer { margin-top: auto; }

.quote footer,
.quote-feature footer { line-height: 1.5; }
.quote footer strong,
.quote-feature footer strong {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 600;
  color: var(--walnut-deep);
}
/* Says which side of the business the quote is about. With three revenue
   lines an untagged wall of praise tells the reader nothing — keep tagging
   them. Set as small caps rather than a chip: a pill would put a box back on
   the page, which is the thing this treatment exists to remove. */
.quote-tag {
  display: block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tan-deep);
  margin-top: 0.3rem;
}

@media (max-width: 900px) {
  .quote-row { grid-template-columns: 1fr; gap: 2rem; }
  /* Hairlines turn from vertical dividers into horizontal ones */
  .quote {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 2rem 0 0;
  }
  .quote:first-child { border-top: 0; padding-top: 0; }
}

/* -------- 13. Newsletter -------- */
.newsletter {
  background: var(--sage-mist);
  border: 1px solid #d9e0d3;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.newsletter h2 { margin-bottom: 0.4rem; }
.newsletter .lead { margin-inline: auto; }
.newsletter__embed { margin-top: 1.75rem; }

/* Placeholder shown until the Flodesk form is pasted in. Delete with it. */
.embed-placeholder {
  border: 1.5px dashed var(--sage);
  border-radius: var(--radius);
  padding: 1.5rem;
  color: var(--sage-deep);
  font-size: 0.92rem;
  background: rgba(255, 255, 255, 0.5);
}

/* -------- 14. Contact band -------- */
.contact-band { text-align: center; }
.contact-band__details {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 3rem;
  margin: 2.25rem 0 0;
  list-style: none; padding: 0;
}
.contact-band__details li { font-size: 0.95rem; }
.contact-band__details strong {
  display: block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tan); margin-bottom: 0.3rem;
}
.contact-band__details a { color: var(--white); text-decoration-color: rgba(255,255,255,0.4); }
.contact-band__details a:hover { color: var(--tan-soft); }
.contact-band__actions {
  display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center;
  margin-top: 2.25rem;
}

/* -------- 15. Inner-page pieces -------- */
/* Compact heading band for pages that don't need a hero photo. */
.text-hero {
  background: linear-gradient(180deg, var(--bone) 0%, var(--bone-deep) 100%);
  padding-block: clamp(3rem, 7vw, 4.75rem) clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.text-hero .lead { margin-inline: auto; }
.text-hero h1 { margin-bottom: 0.6rem; }

/* Two side-by-side cards — the About page's "two halves of the year". */
.duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.duo-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tan);
  border-radius: var(--radius);
  padding: 2rem 1.85rem;
}
.duo-card h3 { margin-bottom: 0.55rem; }
.duo-card p { color: var(--ink-soft); font-size: 0.98rem; }
.duo-card__season {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tan-deep);
  display: block; margin-bottom: 0.75rem;
}

/* Two quotes instead of three (see section 12) */
.quote-row--two { grid-template-columns: repeat(2, 1fr); }

/* Bulleted list styled to match the site rather than the browser default */
.checklist { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  color: var(--ink-soft);
}
.checklist li::before {
  content: ""; position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  background: var(--tan);
  border-radius: 50%;
}

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 1.25rem; }
  .quote-row--two { grid-template-columns: 1fr; }
}

/* -------- 16. Footer -------- */
.site-footer {
  background: var(--walnut-deep);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 3.5rem 2rem;
  font-size: 0.92rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: var(--tan); text-decoration: underline; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 1rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.6rem; }
.site-footer__brand .brand__name { color: var(--white); font-size: 1.25rem; }
.site-footer__brand .brand__sub { color: var(--tan); }
.site-footer__blurb { margin-top: 1rem; max-width: 38ch; }
.site-footer__social { display: flex; gap: 1rem; margin-top: 1.25rem; }
.site-footer__social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.site-footer__social a:hover { border-color: var(--tan); background: rgba(192,138,78,0.14); }
.site-footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.site-footer__base {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.84rem; color: rgba(255,255,255,0.5);
}

@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* -------- 17. Photo gallery + lightbox -------- */
/* Masonry by CSS columns rather than a fixed grid: the photos come in
   portrait, landscape and square and cropping them all to one ratio throws
   away the composition. Columns keep every frame at its native shape.
   Reading order runs DOWN each column, not across — fine for a gallery. */
.photo-gallery {
  columns: 4;
  column-gap: 1rem;
}
.photo-gallery figure {
  break-inside: avoid;
  margin: 0 0 1rem;
}
.photo-gallery__item {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--bone-deep);
}
.photo-gallery img {
  display: block;
  width: 100%; height: auto;
  transition: transform 0.5s ease;
}
.photo-gallery figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.25rem 0.9rem 0.75rem;
  background: linear-gradient(180deg, rgba(51,32,15,0) 0%, rgba(51,32,15,0.82) 65%);
  color: var(--white);
  font-size: 0.82rem; line-height: 1.35;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Hover captions only where there is a real pointer — on a phone they would
   never be reachable, and the alt text carries the same information anyway. */
@media (hover: hover) and (pointer: fine) {
  .photo-gallery__item:hover img,
  .photo-gallery__item:focus-visible img { transform: scale(1.035); }
  .photo-gallery__item:hover figcaption,
  .photo-gallery__item:focus-visible figcaption { opacity: 1; transform: none; }
}
.photo-gallery__item:focus-visible {
  outline: 3px solid var(--tan);
  outline-offset: 3px;
}

@media (max-width: 1024px) { .photo-gallery { columns: 3; } }
@media (max-width: 760px)  { .photo-gallery { columns: 2; column-gap: 0.75rem; }
                             .photo-gallery figure { margin-bottom: 0.75rem; } }

/* ---- Lightbox. Progressive enhancement: with JS off, every tile is just a
   link straight to the large file, which is a perfectly good fallback. ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(30, 19, 9, 0.95);
}
.lightbox[hidden] { display: none; }
.lightbox__figure {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  max-width: 100%;
}
.lightbox__img {
  max-width: 100%; max-height: 78vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__cap {
  color: var(--tan-soft);
  font-size: 0.9rem;
  text-align: center;
  max-width: 60ch;
}
.lightbox__count {
  color: rgba(255,255,255,0.45);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.lightbox button {
  position: absolute;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox button:hover { background: rgba(255,255,255,0.16); border-color: var(--tan); }
.lightbox button:focus-visible { outline: 3px solid var(--tan); outline-offset: 2px; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 620px) {
  .lightbox__img { max-height: 66vh; }
  .lightbox__prev { left: 0.5rem; }
  .lightbox__next { right: 0.5rem; }
  .lightbox__close { top: 0.5rem; right: 0.5rem; }
}

/* -------- 18. Course cards + bundle -------- */
/* Boxes are right here in a way they were not for the testimonials: these are
   priced products with their own call to action, so each one needs an edge you
   can point at. Same idiom as .duo-card — white, hairline, tan top rule. */
.courses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.course-card {
  display: flex; flex-direction: column;
  /* Warm card on a WHITE section — the inverse of .duo-card, and deliberate.
     The hero ends on --bone-deep, so the section under it has to be white for
     the seam to read; a white card on a white section then disappears. This
     way both the seam and the card edge are the full 37-step apart. */
  background: var(--bone-deep);
  border-top: 3px solid var(--tan);
  border-radius: var(--radius);
  padding: 2rem 1.85rem;
}
.course-card__step {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tan-deep);
  margin-bottom: 0.75rem;
}
.course-card h3 { margin-bottom: 0.5rem; }
.course-card__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  margin-bottom: 1rem;
}
.course-card__price {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 600;
  color: var(--walnut-deep);
}
.course-card__length { font-size: 0.85rem; color: var(--muted); }
.course-card p { color: var(--ink-soft); font-size: 0.96rem; }
/* "Good for" — who should actually buy this one. The uppercase label is the
   only separator: a rule here would land at a different height in every card
   (the descriptions are different lengths) and read as ragged. */
.course-card__for {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.course-card__for strong {
  display: block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tan-deep);
  margin-bottom: 0.35rem;
}
/* Buttons line up across the row however uneven the copy above them is */
.course-card .btn { margin-top: auto; align-self: flex-start; }
.course-card__cta { margin-top: auto; padding-top: 1.5rem; }
.course-card__cta .btn { margin-top: 0; }

/* ---- The three-course bundle ---- */
/* White card — the bundle band itself is --bone-deep now, so a bone-deep card
   would vanish into it. */
.bundle {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.bundle h2 { margin-bottom: 0.5rem; }
.bundle p { color: var(--ink-soft); }
.bundle__price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.bundle__now {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.1rem); font-weight: 600;
  line-height: 1;
  color: var(--walnut-deep);
}
.bundle__was {
  font-size: 1.05rem;
  color: var(--muted);
  text-decoration: line-through;
}
.bundle__save {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white); background: var(--russet);
  border-radius: 100px;
  padding: 0.3rem 0.75rem;
}
.bundle__aside { text-align: center; }
.bundle__aside .btn { width: 100%; justify-content: center; }
.bundle__note { font-size: 0.85rem; color: var(--muted); margin-top: 0.9rem; }

@media (max-width: 1024px) {
  .courses { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .courses { grid-template-columns: 1fr; gap: 1.25rem; }
  /* Stacked, the aside is no longer a column of its own — left-align it with
     everything above it or the note floats out of step with the price row. */
  .bundle { grid-template-columns: 1fr; }
  .bundle__aside { text-align: left; }
}

/* -------- 19. Video embed + photo trio -------- */
/* 16:9 wrapper so the YouTube iframe scales with the column instead of being
   pinned to fixed pixel dimensions. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--walnut-deep);
}
.video-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-note {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Three photos side by side. Not the home page's .gallery — that one is a
   fixed 12-cell tile puzzle and breaks if you change the count. */
.photo-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.photo-trio figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 3;
}
.photo-trio img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 760px) {
  .photo-trio { grid-template-columns: 1fr; gap: 1rem; }
}

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