/* =========================================================
   Trail rides + mobile horse training
   Direction: dusk, in earth tones.
   Ground is bark brown, not black. Accent is pasture green.
   Single dark theme on purpose. Edit tokens here.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Ground. Dark brown, the colour of wet soil. Never black. */
  --bark-900: #392D22;   /* page */
  --bark-800: #443528;   /* raised panel */
  --bark-700: #4E3C2D;   /* card, input, hover */
  --line:     #5B4936;   /* hairline */
  --line-soft:#483929;   /* quieter hairline */

  /* Light on dark. Oat and dry grass. */
  --oat:      #EFE6D5;   /* headings + emphasis   10.8:1 */
  --oat-dim:  #D6C9B2;   /* body                   8.2:1 */
  --muted:    #B0A48D;   /* secondary              5.4:1 */
  --faint:    #A89A82;   /* labels only            4.8:1 */

  /* One accent. Pasture green against soil. */
  --sage:     #9DB183;  /* primary. Pasture green.       5.8:1 */
  --sage-dim: #7C9065;
  --pine-ink: #3A4A33;   /* on-light label green. 7.0:1 on a bright sky */
  --brick:     #C98878;  /* errors and negatives only     5.8:1 */

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-display: clamp(2.4rem, 5.6vw, 4rem);
  --t-h1:      clamp(2.1rem, 4.6vw, 3.1rem);
  --t-h2:      clamp(1.75rem, 3.2vw, 2.5rem);
  --t-h3:      clamp(1.3rem, 2vw, 1.5rem);
  --t-lead:    clamp(1.125rem, 1.7vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-label:   0.75rem;

  /* Space (8pt) */
  --s-1: .25rem; --s-2: .5rem;  --s-3: 1rem;   --s-4: 1.5rem;
  --s-5: 2rem;   --s-6: 3rem;   --s-7: 4rem;   --s-8: 6rem;

  /* Shape. Small radius. Never pills. */
  --r-sm: 3px; --r-md: 4px; --r-lg: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.32);

  --header-h: 132px;
  --wrap: 1180px;
  --prose: 34rem;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--bark-900);
  color: var(--oat-dim);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  color: var(--oat);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.008em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.3; }
h1 em, h2 em { font-style: italic; color: var(--sage); }
p  { margin: 0 0 var(--s-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { color: var(--oat); font-weight: 600; }

a { color: var(--oat); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { color: var(--sage); text-decoration-color: currentColor; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sage); color: var(--bark-900); padding: var(--s-2) var(--s-3);
  font-family: var(--sans); font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-3); }
@media (min-width: 700px) { .wrap { padding-inline: var(--s-5); } }

.section { padding-block: var(--s-7); }
@media (min-width: 900px) { .section { padding-block: var(--s-8); } }
.section--tight { padding-block: var(--s-6); }
.section--panel { background: var(--bark-800); border-block: 1px solid var(--line-soft); }
.prose { max-width: var(--prose); }

/* Sans appears only on labels, buttons and form chrome */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 var(--s-3);
}
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.62; color: var(--oat-dim); }

/* ---------- 4. Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--oat); }
/* Big at the top of the page, compact once you scroll. */
.brand-logo { height: 112px; width: auto; flex: none; display: block; transition: height .2s ease; }
.site-header.is-stuck .brand-logo { height: 56px; }
@media (max-width: 899px) {
  .brand-logo { height: 72px; }
  .site-header.is-stuck .brand-logo { height: 46px; }
}

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(57,45,34,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: var(--header-h);
  transition: min-height .2s ease;
}
.site-header.is-stuck .header-inner { min-height: 82px; }
@media (max-width: 899px) {
  .header-inner { min-height: 92px; }
  .site-header.is-stuck .header-inner { min-height: 70px; }
}

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-2);
  background: none; border: 0; cursor: pointer; color: var(--oat);
  font-family: var(--sans); font-size: var(--t-small); font-weight: 500;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* :not(.btn) matters. A bare `.nav a` rule outranks `.btn--primary`
   on specificity and silently repaints the header button's label. */
.nav a:not(.btn) { font-family: var(--sans); text-decoration: none; color: var(--muted); font-size: var(--t-small); }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--oat); }

@media (max-width: 899px) {
  .nav {
    position: fixed; inset: 92px 0 auto 0;
    background: var(--bark-800);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: grid; gap: 0;
    padding: var(--s-2) var(--s-3) var(--s-4);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: var(--s-3) var(--s-1); font-size: 1.0625rem; border-bottom: 1px solid var(--line-soft); }
  .nav a:last-of-type { border-bottom: 0; }
  .nav .btn { margin-top: var(--s-3); justify-content: center; }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav { display: flex; align-items: center; gap: var(--s-4); }
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-4);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary, .btn--on-dark { background: var(--sage); color: var(--bark-900); }
.btn--primary:hover, .btn--on-dark:hover { background: #B0C398; color: var(--bark-900); }
.btn--ghost, .btn--ghost-dark { border-color: var(--line); color: var(--oat); }
.btn--ghost:hover, .btn--ghost-dark:hover { border-color: var(--muted); background: var(--bark-700); color: var(--oat); }
.btn--sm { min-height: 42px; padding: 0 var(--s-3); font-size: .875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------- 7. Photos. They catch the light instead of sitting on paper. ---------- */
.photo {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 50% 14%, #5C4B35 0%, #443528 62%, #362A1F 100%);
  border: 1px solid var(--line-soft);
  isolation: isolate;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.02) contrast(1.02); }
/* Low warm sun across the top, ground shadow at the base. Ties the set together. */
.photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(157,177,131,.12) 0%, rgba(0,0,0,0) 44%, rgba(57,45,34,.44) 100%);
}
.photo::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: var(--grain); opacity: .09; mix-blend-mode: overlay;
}
.photo--plain::before, .photo--plain::after { display: none; }

.photo__spec {
  position: absolute; inset: 0; z-index: 1;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-4); text-align: center; color: var(--faint);
}
.photo.is-empty .photo__spec { display: flex; }
.photo.is-empty { border: 1px dashed var(--line); }
.photo__spec-icon { width: 24px; height: 24px; opacity: .6; }
.photo__spec-label {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.photo__spec-note { font-family: var(--sans); font-size: .8125rem; line-height: 1.5; max-width: 22rem; }

.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-4x5  { aspect-ratio: 4 / 5; }
.ratio-3x4  { aspect-ratio: 771 / 1024; }  /* exactly Justin's padded frame, so nothing is re-cropped */
.ratio-1x1  { aspect-ratio: 1 / 1; }

/* ---------- 8. Rope divider ---------- */
.rope { display: block; width: 100%; height: 24px; color: var(--line); }
.rope path { vector-effect: non-scaling-stroke; }

/* ---------- 9. Hero ---------- */
.hero { padding-top: var(--s-6); padding-bottom: var(--s-6); }
@media (min-width: 900px) { .hero { padding-top: var(--s-7); padding-bottom: var(--s-7); } }
.hero-grid { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); gap: var(--s-7); } }
.hero h1 { font-size: var(--t-display); margin-bottom: var(--s-3); }
.hero .lead { max-width: 30rem; margin-bottom: var(--s-4); }
.hero-photo { aspect-ratio: 1 / 1; }
@media (max-width: 899px) { .hero-photo { aspect-ratio: 3 / 2; } }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: var(--t-small); color: var(--muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-meta svg { width: 16px; height: 16px; flex: none; color: var(--sage); }


/* ---------- 9b. Full bleed hero, headline sits in the sky ----------
   Light hero, dark site. The bright sky is a window; you scroll into dusk.
   Default assumes a BRIGHT sky and uses dark ink. If her photo has a dark
   sky, add .hero-wide--dark-sky to flip the whole block. */
.hero-wide {
  position: relative; isolation: isolate; display: grid;
  /* pulls the photo up under the sticky header so it runs edge to edge */
  margin-top: calc(-1 * var(--header-h));
}
.hero-wide__media { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; }
.hero-wide__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Anchored to the bottom on purpose: crop the top of the sky, never the
     horses. They stand in the lowest 20% of the frame. */
  object-position: center bottom;
}
/* Lifts the sky so dark ink stays legible whatever photo goes in */
.hero-wide__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: none;
}
/* Hands the photo back to the dark page at the bottom edge.
   Kept short and shallow on purpose: the horses stand in the bottom of the
   frame and a deep fade swallows them. */
.hero-wide::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(57,45,34,0) 0%, rgba(57,45,34,.22) 55%, rgba(57,45,34,.85) 100%);
}

.hero-wide__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding-top: calc(var(--header-h) + var(--s-5));
  padding-bottom: var(--s-6);
  min-height: 86vh;
}
@media (min-width: 900px) {
  .hero-wide__inner {
    min-height: min(88vh, 880px);
    justify-content: flex-start;
    /* the top of this sky is too deep for black type, so the block starts lower */
    padding-top: max(calc(var(--header-h) + var(--s-5)), 20vh);
  }
}

/* Sky block. Must clear the horizon, so it stays short. */
.hero-wide__type { max-width: min(46rem, 68%); }
.hero-wide .eyebrow { color: #000; }
.hero-wide h1 {
  color: #000;
  font-size: clamp(2.15rem, 4.6vw, 3.4rem);
  margin-bottom: var(--s-3);
}
.hero-wide h1 em { color: #000; }
.hero-wide .ph { color: #000; }

/* Lead + buttons. On desktop they stay in the sky under the headline. */
.hero-wide__foot { max-width: min(46rem, 68%); margin-top: var(--s-1); }
.hero-wide__foot .lead { color: #000; max-width: 27rem; margin-bottom: var(--s-4); }
.hero-wide .btn--primary { background: #000; color: #fff; }
.hero-wide .btn--primary:hover { background: #1C1C1C; color: #fff; }
/* Solid white, not an outline. On a photograph an outlined button is only as
   legible as whatever happens to sit behind it. */
.hero-wide .btn--ghost { background: #FFF; border-color: #FFF; color: #000; }
.hero-wide .btn--ghost:hover { background: #ECE6DA; border-color: #ECE6DA; color: #000; }

/* On a phone the photo cannot be cropped vertically, so the sky is only
   ever the top half. Headline stays in the sky, the lead and buttons drop
   to the bottom of the frame and use the dark fade instead. */
@media (max-width: 899px) {
  .hero-wide__inner {
    justify-content: flex-start;
    min-height: 92vh;
    padding-top: max(calc(var(--header-h) + var(--s-4)), 19vh);
  }
  .hero-wide__type, .hero-wide__foot { max-width: none; }
  .hero-wide__foot { margin-top: var(--s-2); }
  .hero-wide__foot .lead { max-width: 30rem; }
}

/* Dark sky variant. One class, no other edits. */
.hero-wide--dark-sky .hero-wide__media::after {
  background: linear-gradient(180deg, rgba(25,19,13,.62) 0%, rgba(25,19,13,.50) 28%, rgba(25,19,13,.26) 48%, rgba(25,19,13,0) 64%);
}
.hero-wide--dark-sky .eyebrow { color: var(--sage); }
.hero-wide--dark-sky h1, .hero-wide--dark-sky .ph { color: var(--oat); }
.hero-wide--dark-sky h1 em { color: var(--sage); }
.hero-wide--dark-sky .hero-wide__foot .lead { color: var(--oat-dim); }
.hero-wide--dark-sky .btn--primary { background: var(--sage); color: var(--bark-900); }
.hero-wide--dark-sky .btn--ghost { border-color: rgba(239,230,213,.5); color: var(--oat); }

/* A dark sky is usually brightest near the horizon, which is the worst place
   for text. So on this variant the headline stays high where the sky is
   deepest, and the lead and buttons drop to the bottom fade instead. */
.hero-wide--dark-sky .hero-wide__inner { justify-content: space-between; }
/* A dark sky is brightest right above the horizon, which is exactly where the
   lead lands. The bottom fade has to start higher and bite harder than it does
   on a bright-sky photo. */
.hero-wide--dark-sky::after {
  height: 56%;
  background: linear-gradient(180deg, rgba(57,45,34,0) 0%, rgba(57,45,34,.58) 30%, rgba(57,45,34,.90) 64%, var(--bark-900) 100%);
}
.hero-wide--dark-sky .hero-wide__foot { margin-top: var(--s-7); }
.hero-wide--dark-sky .hero-wide__foot .lead { color: var(--oat-dim); }
.hero-wide--dark-sky .hero-wide__foot .ph { color: var(--oat); }
.hero-wide--dark-sky .btn--primary { background: var(--sage); color: var(--bark-900); }
.hero-wide--dark-sky .btn--primary:hover { background: #B0C398; color: var(--bark-900); }
.hero-wide--dark-sky .btn--ghost { border-color: rgba(239,230,213,.45); color: var(--oat); }
.hero-wide--dark-sky .btn--ghost:hover { border-color: var(--oat); background: rgba(239,230,213,.10); color: var(--oat); }
.hero-wide--dark-sky .hero-wide__type, .hero-wide--dark-sky .hero-wide__foot { max-width: min(46rem, 72%); }
body.is-draft .hero-wide--dark-sky .ph {
  background: rgba(157,177,131,.20); box-shadow: inset 0 -1px 0 rgba(157,177,131,.7); color: var(--oat);
}
/* header over a dark sky keeps the normal light-on-dark chrome */
.hero-wide--dark-sky ~ * .site-header,
body:has(.hero-wide--dark-sky) .site-header[data-over-hero="true"] { background: transparent; }
body:has(.hero-wide--dark-sky) .site-header[data-over-hero="true"] .brand,
body:has(.hero-wide--dark-sky) .site-header[data-over-hero="true"] .nav-toggle { color: var(--oat); }
body:has(.hero-wide--dark-sky) .site-header[data-over-hero="true"] .nav a:not(.btn) { color: var(--oat-dim); }
body:has(.hero-wide--dark-sky) .site-header[data-over-hero="true"] .btn--primary { background: var(--sage); color: var(--bark-900); }
body.is-draft:has(.hero-wide--dark-sky) .site-header[data-over-hero="true"] .ph {
  background: rgba(157,177,131,.20); box-shadow: inset 0 -1px 0 rgba(157,177,131,.7); color: var(--oat);
}

/* Meta strip, sits on the dark ground under the photo */
.hero-strip {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  /* spread across the full width rather than packing to the left */
  justify-content: space-between;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: var(--t-small); color: var(--muted);
}
.hero-strip span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-strip svg { width: 16px; height: 16px; flex: none; color: var(--sage); }

/* Header runs dark-on-sky while it overlaps the bright hero */
.site-header[data-over-hero="true"] { background: transparent; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.site-header[data-over-hero="true"] .brand,
.site-header[data-over-hero="true"] .nav-toggle { color: #000; }
.site-header[data-over-hero="true"] .nav a:not(.btn) { color: #000; }
.site-header[data-over-hero="true"] .nav a:not(.btn):hover,
.site-header[data-over-hero="true"] .nav a:not(.btn)[aria-current="page"] { color: #000; }
.site-header[data-over-hero="true"] .btn--primary { background: #000; color: #FFF; }
@media (max-width: 899px) {
  .site-header[data-over-hero="true"] .nav { background: var(--bark-800); }
  .site-header[data-over-hero="true"] .nav a:not(.btn) { color: var(--muted); }
  .site-header[data-over-hero="true"] .nav .btn--primary { background: var(--sage); color: var(--bark-900); }
}

/* Type sits directly on the photograph with no tint behind it, so the small
   text carries its own halo. Cheaper than scrimming the whole sky, and it
   keeps the picture untouched. */
/* The crop is anchored to the bottom, so what sits behind the header changes
   with viewport height: pale gold on a short window, blue-grey on a tall one.
   Black wins at every height measured (7.5:1 down to 3.7:1); white never got
   above 1.9:1. The halo covers the tall-window case. */
/* The halo alone was not enough. The sky is a photograph, so contrast swings
   across a single hairline: the logo's rings sit on bright cloud in one spot
   and shadowed cloud 40px later. Measured average contrast behind the nav is
   13:1, which is exactly why the numbers looked fine while the eye struggled.
   A white wash flattens the variance so every stroke gets the same ground,
   then fades to nothing so the photograph is untouched below the chrome. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.80) 24%,
    rgba(255,255,255,.55) 48%,
    rgba(255,255,255,.24) 74%,
    rgba(255,255,255,0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
body:not(:has(.hero-wide--dark-sky)) .site-header[data-over-hero="true"]::before { opacity: 1; }
/* Content has to ride above the wash. */
.header-inner { position: relative; z-index: 1; }

.site-header[data-over-hero="true"] .nav a:not(.btn),
.site-header[data-over-hero="true"] .nav-toggle { text-shadow: 0 1px 4px rgba(255,255,255,.75); }
.site-header[data-over-hero="true"] .brand-logo {
  filter: brightness(0) drop-shadow(0 1px 6px rgba(255,255,255,.85));
}
.hero-wide:not(.hero-wide--dark-sky) .eyebrow { text-shadow: 0 1px 3px rgba(255,255,255,.65); }

/* Creed band. Full bleed under the hero, states the thing the whole
   business rests on. Brick red is the one hot colour on the site, used once. */
.creed {
  background: #8C2F1D;
  color: #FBEDE6;
  text-align: center;
  padding: var(--s-5) var(--s-3);
  margin: 0;
  border: 0;
}
.creed p {
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.005em;
  /* Sized to hold the quote on a single line. 73 characters at roughly
     0.46em average advance needs the font to stay under ~2.3vw. */
  font-size: min(2.15vw, 1.65rem);
  max-width: none;
  text-wrap: nowrap;
}
/* Below this the type would have to get too small to read, so it wraps. */
@media (max-width: 719px) {
  .creed p { font-size: 1.05rem; max-width: 32ch; text-wrap: balance; }
}
.creed cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--sans);
  font-style: normal;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #E6A88E;
}
.creed em { font-style: italic; color: #F6CDB9; }


/* Draft highlights sit on a LIGHT ground inside the hero, so they invert.
   Selector must outrank `body.is-draft .ph` (0,2,1), hence the body prefix. */
body.is-draft .hero-wide:not(.hero-wide--dark-sky) .ph,
body.is-draft:not(:has(.hero-wide--dark-sky)) .site-header[data-over-hero="true"] .ph {
  background: rgba(57,45,34,.13);
  box-shadow: inset 0 -1px 0 rgba(57,45,34,.55);
  color: var(--bark-900);
}
@media (max-width: 899px) {
  /* on a phone the lead sits over the dark fade, so it goes back to light */
  body.is-draft .hero-wide .hero-wide__foot .ph {
    background: rgba(157,177,131,.20);
    box-shadow: inset 0 -1px 0 rgba(157,177,131,.7);
    color: var(--oat);
  }
}


/* ---------- 9c. Split hero, interior pages ----------
   Copy on the left, a cut-out on the right sitting straight on the ground with
   no card, no border and no radius. The art is bottom aligned so it stands on
   the rule underneath rather than floating in a box. */
.hero-split { position: relative; }
.hero-split--ruled { border-bottom: 1px solid var(--line); }

.hero-split__grid { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 900px) {
  .hero-split__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-6); }
}

/* The copy block is the fixed point across Trail rides, Training and Lessons.
   Top aligned at a constant offset so headlines never shift when you click
   between them. The art varies; the text must not. */
.hero-split__text { align-self: start; padding-top: var(--s-7); padding-bottom: var(--s-7); }
@media (min-width: 900px) { .hero-split__text { padding-top: 7rem; padding-bottom: var(--s-8); } }
.hero-split__text h1 { font-size: clamp(2.1rem, 4.2vw, 3.25rem); margin-bottom: var(--s-4); }
.hero-split__text .prose { max-width: 34rem; }

.hero-split__art { margin: 0; align-self: end; line-height: 0; }
.hero-split__art img {
  display: block; width: 100%; height: auto;
  /* cut-outs sit on the page, so nothing that would imply a frame */
  border: 0; border-radius: 0;
}
/* the art leads on desktop and follows the copy on a phone */
@media (max-width: 899px) {
  .hero-split__art { max-width: 24rem; margin-inline: auto; }
  .hero-split__text { padding-bottom: var(--s-4); }
}

/* the specs strip tucks under the hero and brings its own rule */
.hero-split .quick-details { margin-top: 0; }

/* A landscape cut-out needs far more width than a portrait one to carry the
   same visual weight. This lets it take a bigger share of the row and run off
   the right edge of the screen rather than stopping at the content column. */
.hero-split--bleed { overflow: hidden; }
@media (min-width: 900px) {
  .hero-split--bleed .hero-split__art {
    margin-right: calc((100vw - min(100vw, var(--wrap))) / -2 - var(--s-5));
  }
  /* shifts the art without resizing it or disturbing the copy column */
  .hero-split__art--nudge { transform: translate(-60px, -100px); }
  /* caps a cut-out that would otherwise dominate, held to the content edge */
  .hero-split__art--cap { width: 640px; max-width: none; margin-left: auto; transform: translateX(-100px); }
}

/* ---------- 10. Service cards ---------- */
.services { display: grid; gap: var(--s-4); }
@media (min-width: 940px) { .services { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.service {
  display: flex; flex-direction: column;
  background: var(--bark-800); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .2s ease;
}
.service:hover { border-color: var(--line); }
.service .photo { border-radius: 0; border: 0; border-bottom: 1px solid var(--line-soft); }
.service-body { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; }
@media (min-width: 800px) { .service-body { padding: var(--s-5); } }
.service-body h3 { margin-bottom: var(--s-2); }
.service-body p:last-of-type { margin-bottom: var(--s-4); }
.service-body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- 11. Content pieces ---------- */
.split { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
.split--sticky > :first-child { position: sticky; top: 100px; }
@media (max-width: 899px) { .split--sticky > :first-child { position: static; } }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.checklist li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; }
.checklist svg { width: 19px; height: 19px; margin-top: 8px; color: var(--sage); }
.notlist svg { color: var(--brick); }

.callout {
  background: var(--bark-800); border: 1px solid var(--line-soft);
  border-left: 2px solid var(--sage);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-4);
}
.callout h3 { font-size: 1.25rem; margin-bottom: var(--s-2); }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; gap: var(--s-3); align-items: start; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  color: var(--sage); padding-top: .6rem;
  border-top: 1px solid var(--line);
}
.steps h3 { font-size: 1.25rem; margin-bottom: var(--s-1); }

.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  font-family: var(--serif); font-weight: 600;
  cursor: pointer; list-style: none;
  padding: var(--s-3) var(--s-5) var(--s-3) 0;
  color: var(--oat); font-size: 1.125rem; position: relative;
  min-height: 44px; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sage); }
.faq summary::after {
  content: ""; position: absolute; right: var(--s-1); top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--sage); border-bottom: 1.5px solid var(--sage);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .faq-body { padding: 0 0 var(--s-4); max-width: var(--prose); color: var(--muted); }


/* A quiet raised panel for a paragraph that deserves to sit apart from the
   copy around it. One step up from the page ground, nothing louder. */
.prose-panel {
  background: var(--bark-800);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
@media (min-width: 700px) { .prose-panel { padding: var(--s-5); } }

/* ---------- 11b. The Core 4 ----------
   Her method, and the reason the business is called 4 Horsemanship. Numbered
   in Roman so it rhymes with the -IV- in the badge. This is the one piece of
   the site that is purely hers, so it gets the most deliberate treatment. */
.core4-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.core4-mark {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--serif); font-size: 1.1rem; letter-spacing: .32em;
  color: var(--sage); text-transform: uppercase;
}
.core4-mark::before, .core4-mark::after {
  content: ""; height: 1px; background: var(--line); flex: 1; max-width: 84px;
}

.core4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
@media (min-width: 760px) { .core4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .core4 { grid-template-columns: repeat(4, 1fr); } }

.core4 li {
  background: var(--bark-900);
  padding: var(--s-5) var(--s-4);
  display: grid; gap: var(--s-2); align-content: start;
  transition: background-color .2s ease;
}
.core4 li:hover { background: var(--bark-800); }
.core4 .num {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1;
  color: var(--sage); letter-spacing: .08em;
  display: flex; align-items: center; gap: var(--s-2);
}
.core4 .num::after { content: ""; height: 1px; width: 26px; background: var(--line); }
.core4 h3 { font-size: 1.3rem; margin: 0; }
.core4 p { color: var(--muted); font-size: 1rem; margin: 0; }

/* ---------- 11c. Service tiers ---------- */
.tiers { display: grid; gap: var(--s-4); }
.tier {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: var(--bark-800); padding: var(--s-5);
  display: grid; gap: var(--s-3);
}
@media (min-width: 760px) { .tier { padding: var(--s-6); } }
.tier--lead { border-color: var(--line); box-shadow: inset 3px 0 0 var(--sage); }
.tier-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
.tier-top h3 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.tier-for {
  font-family: var(--sans); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sage);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .2rem .5rem; white-space: nowrap;
}
.tier p { color: var(--oat-dim); margin: 0; max-width: 44rem; }
.tier .btn { justify-self: start; margin-top: var(--s-2); }

/* ---------- 12. Gallery ---------- */
.gallery-grid { display: grid; gap: var(--s-2); grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); } }
.gallery-grid .photo { border-radius: var(--r-md); }

/* ---------- 13. Quick details ---------- */
.quick-details {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .quick-details { grid-template-columns: repeat(4, 1fr); } }
.quick-details li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--s-2);
  align-items: start; padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 760px) {
  /* the divider belongs to the cell on its left, so every cell after the
     first needs breathing room or the content sits on the line */
  .quick-details li { border-right: 1px solid var(--line-soft); padding-left: 30px; }
  .quick-details li:first-child { padding-left: 0; }  /* stays flush with the page grid */
  .quick-details li:last-child { border-right: 0; }
}
.quick-details svg { width: 16px; height: 16px; margin-top: 7px; color: var(--sage); }
.qd-label {
  display: block; font-family: var(--sans); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.qd-value { display: block; font-size: 1rem; color: var(--oat); line-height: 1.45; }

/* ---------- 14. Ride picker ---------- */
.rides { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
/* auto-fit, not a fixed 3, so one ride fills the row instead of sitting in a
   third-width sliver. Jen may run one ride or several. */
@media (min-width: 720px) { .rides { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.ride {
  display: grid; gap: var(--s-1); text-align: left;
  padding: var(--s-4);
  background: var(--bark-800); border: 0; cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease;
}
.ride:hover { background: var(--bark-700); }
.ride[aria-pressed="true"] { background: var(--bark-700); box-shadow: inset 3px 0 0 var(--sage); }
.ride-name { font-family: var(--serif); font-size: 1.5rem; color: var(--oat); line-height: 1.2; }
.ride-meta { font-family: var(--sans); font-size: .8125rem; color: var(--faint); }
.ride-price {
  font-size: 1.3rem; color: var(--sage); margin-top: var(--s-1);
  display: flex; align-items: baseline; gap: var(--s-1); font-variant-numeric: tabular-nums;
}
.ride-price small { font-family: var(--sans); font-size: .8125rem; color: var(--faint); }

.book-note {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: .9375rem; color: var(--muted); margin-top: var(--s-4);
}
.book-note svg { width: 16px; height: 16px; flex: none; margin-top: 7px; color: var(--sage); }

.setup-card {
  border: 1px dashed var(--line); background: var(--bark-800);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  font-family: var(--sans); font-size: .8125rem; line-height: 1.65; color: var(--muted);
}
.setup-card strong { color: var(--oat); }
.setup-card code {
  background: var(--bark-700); color: var(--oat-dim); padding: 1px 5px; border-radius: 3px;
  font-size: .78rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- 15. Booking ---------- */
.booking-shell {
  background: var(--bark-800); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: var(--s-3); min-height: 240px;
}
@media (min-width: 700px) { .booking-shell { padding: var(--s-4); } }
/* Shown while Calendly's iframe is still on the wire. Sized close to the
   widget's own height so the page does not jump when the calendar appears. */
.booking-loading {
  /* place-content, not just place-items: the implicit rows would otherwise
     stretch to fill the 320px and leave the spinner and label far apart. */
  display: grid; place-items: center; place-content: center; gap: var(--s-3);
  min-height: 320px; text-align: center;
}
.booking-loading p { color: var(--muted); font-size: var(--t-small); margin: 0; }
.booking-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--sage);
  animation: booking-spin .8s linear infinite;
}
@keyframes booking-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .booking-spinner { animation-duration: 2.4s; }
}

.booking-fallback { text-align: center; padding: var(--s-5) var(--s-3); }
.booking-fallback h3 { margin-bottom: var(--s-2); }
.booking-fallback p { color: var(--muted); max-width: 30rem; margin-inline: auto; }

/* ---------- 15b. Legal text (waiver) ----------
   Long-form contract copy. Narrower measure than the marketing prose so the
   dense paragraphs stay readable, and the statutory notice is plain on the
   page rather than tucked behind a link. */
.legal { max-width: 46rem; }
.legal-org { font-size: var(--t-small); letter-spacing: .04em; color: var(--muted); margin-bottom: var(--s-5); }
.legal-org strong { color: var(--oat); letter-spacing: .1em; }
.legal h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: var(--s-4); }
.legal h3 {
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  letter-spacing: .01em; color: var(--sage);
  margin-top: var(--s-5); margin-bottom: var(--s-2);
}
.legal p, .legal li { font-size: .9375rem; line-height: 1.7; color: var(--oat-dim); }
.legal p { margin-bottom: var(--s-3); }
.legal ul { margin: 0 0 var(--s-3) var(--s-4); display: grid; gap: var(--s-2); }
.legal li { padding-left: var(--s-1); }

/* ---------- 15c. Next step ----------
   The thing to do after booking. Sits directly under the calendar so it is
   the next thing read, not something to go hunting for in the footer. */
.next-step {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--s-3) var(--s-4);
  align-items: start;
  padding: var(--s-4);
  border: 1px solid var(--sage-dim);
  border-left-width: 2px;
  border-radius: var(--r-md);
  background: var(--bark-800);
}
.next-step > svg { width: 24px; height: 24px; color: var(--sage); margin-top: 3px; }
.next-step h3 { font-size: 1.2rem; margin-bottom: var(--s-2); }
.next-step p { color: var(--oat-dim); font-size: var(--t-small); max-width: 46ch; margin-bottom: 0; }
.next-step .btn-row { margin-top: var(--s-3); }
@media (max-width: 599px) {
  .next-step { grid-template-columns: 1fr; }
  .next-step > svg { margin-top: 0; }
}

/* ---------- 16. Forms ---------- */
.form { display: grid; gap: var(--s-4); max-width: 34rem; }
.field { display: grid; gap: var(--s-2); }
.field label { font-family: var(--sans); font-size: var(--t-small); font-weight: 600; color: var(--oat); }
.field .hint { font-family: var(--sans); font-size: .8125rem; color: var(--faint); line-height: 1.5; margin: 0; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: var(--s-2) var(--s-3);
  background: var(--bark-900); color: var(--oat);
  font-family: var(--sans); font-size: 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(157,177,131,.18);
}
.field .error { font-family: var(--sans); font-size: .8125rem; color: var(--brick); display: none; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--brick); }
.field.is-invalid .error { display: block; }
.field--hp { position: absolute; left: -9999px; }
.form-note { font-family: var(--sans); font-size: .8125rem; color: var(--faint); max-width: 34rem; }

/* ---------- Waiver form controls ----------
   The waiver asks for more than the contact form does, so it gets a little
   more room, and it needs checkbox and radio treatments the others never did. */
.form--wide { max-width: 38rem; }

.check {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3);
  align-items: start; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 400;
  color: var(--oat-dim); line-height: 1.55;
}
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--sage); cursor: pointer; }
.check:hover { color: var(--oat); }
.field--check { gap: var(--s-2); }
/* .field label is 600 by design; checkbox labels read as sentences, not labels. */
.field--check label.check, .field--fieldset label.check { font-weight: 400; }

.field--fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.field--fieldset legend {
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  color: var(--oat); padding: 0; margin-bottom: var(--s-1);
}
.form-legend { font-family: var(--sans); font-size: .8125rem; color: var(--faint); line-height: 1.55; margin: 0; }

/* ---------- Signature pad ----------
   Pale, like paper, so the drawn line reads as ink. Deliberately the one
   light surface in the form: it is the thing you are meant to write on. */
.sigpad {
  position: relative;
  height: 190px;
  background: #F4EFE4;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  touch-action: none;          /* so a finger draws instead of scrolling */
}
.sigpad__canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
/* The line you sign on, like the paper form. Hidden once there is ink. */
.sigpad__baseline {
  position: absolute; left: 8%; right: 8%; bottom: 34%;
  border-bottom: 1px solid rgba(43,33,26,.28);
  pointer-events: none; transition: opacity .2s ease;
}
.sigpad.has-ink .sigpad__baseline { opacity: 0; }
.sigpad__clear {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,.75); border: 1px solid rgba(43,33,26,.18);
  border-radius: var(--r-sm); padding: 5px 10px; cursor: pointer;
  font-family: var(--sans); font-size: .75rem; font-weight: 600; color: #5A4634;
}
.sigpad__clear:hover { background: #fff; border-color: rgba(43,33,26,.4); }
.field.is-invalid .sigpad { border-color: var(--brick); }
@media (max-width: 599px) { .sigpad { height: 165px; } }

.guardian-block {
  display: grid; gap: var(--s-4);
  padding: var(--s-4); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--bark-800);
}
.guardian-block[hidden] { display: none; }

.form-status {
  display: none; gap: var(--s-3); align-items: start;
  padding: var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: var(--bark-800);
  max-width: 34rem;
}
.form-status[data-state="success"], .form-status[data-state="error"] { display: flex; }
.form-status[data-state="success"] { border-left: 2px solid var(--sage); }
.form-status[data-state="error"] { border-left: 2px solid var(--brick); }
.form-status svg { width: 21px; height: 21px; flex: none; margin-top: 6px; color: var(--sage); }
.form-status[data-state="error"] svg { color: var(--brick); }
.form-status h3 { font-size: 1.25rem; margin-bottom: var(--s-1); }
.form-status p { font-size: var(--t-small); color: var(--muted); }

/* ---------- 17. CTA band ---------- */
.band { background: var(--bark-800); border-block: 1px solid var(--line); position: relative; overflow: hidden; }
.band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 140% at 12% 0%, rgba(157,177,131,.13) 0%, rgba(0,0,0,0) 62%);
}
.band-inner { position: relative; z-index: 1; display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 860px) { .band-inner { grid-template-columns: 1.35fr auto; gap: var(--s-7); } }


/* ---------- 17b. Page-top light ----------
   The home page opens on a photograph. Interior pages opened on flat brown,
   which read dead. This is the same light the CTA band uses, lifted to the top
   of the page so every page starts with something happening. */
body:not(:has(.hero-wide))::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 560px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 100% at 15% 0%, rgba(157,177,131,.14) 0%, rgba(157,177,131,0) 62%),
    radial-gradient(70% 90% at 88% 4%, rgba(201,172,110,.10) 0%, rgba(201,172,110,0) 60%),
    linear-gradient(180deg, rgba(238,230,213,.05) 0%, rgba(238,230,213,0) 100%);
}
/* the sticky header sits over it, so it must not paint its own flat ground */
body:not(:has(.hero-wide)) .site-header:not(.is-stuck) { background: transparent; backdrop-filter: none; }

/* ---------- 18. Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-6) var(--s-4); }
.footer-grid { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); } }
.footer-grid h4 {
  font-family: var(--sans); font-size: .6875rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 var(--s-3);
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer-links a { text-decoration: none; font-size: var(--t-body); color: var(--muted); }
.footer-links a:hover { color: var(--sage); }
.footer-contact { display: grid; justify-items: start; gap: var(--s-2); font-size: var(--t-body); }
.footer-contact a { color: var(--muted); text-decoration: none; }
.footer-contact a:hover { color: var(--sage); }
.footer-bottom {
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between;
  font-family: var(--sans); font-size: .8125rem; color: var(--faint);
}
.footer-legal { max-width: 46rem; font-family: var(--sans); font-size: .8125rem; color: var(--faint); margin-top: var(--s-4); }

/* ---------- 19. Placeholders + draft ---------- */
.ph { font-style: normal; }
body.is-draft .ph {
  background: rgba(157,177,131,.18);
  box-shadow: inset 0 -1px 0 rgba(157,177,131,.65);
  border-radius: 2px; padding: 0 2px; color: var(--oat);
}
.draft-banner {
  background: var(--sage); color: var(--bark-900);
  font-family: var(--sans); font-size: .8125rem; font-weight: 500; line-height: 1.5;
  padding: var(--s-2) var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  align-items: center; justify-content: center; text-align: center;
}
.draft-banner strong { color: var(--bark-900); font-weight: 700; }
.draft-only { display: none; }
body.is-draft .draft-only { display: block; }

/* ---------- 20. Utilities ---------- */
.center { text-align: center; margin-inline: auto; }
.stack-sm > * + * { margin-top: var(--s-3); }
.stack   > * + * { margin-top: var(--s-4); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mb-5 { margin-bottom: var(--s-5); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}