:root {
  --cream: #f4f0e6;
  --green: #153e32;
  --lime: #d7f36b;
  --ink: #18201b;
  --sage: #79a08b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Arial, sans-serif; }
img { display: block; }
a { color: inherit; }
.logo { font: 700 29px/1 Georgia, serif; letter-spacing: -1.5px; text-decoration: none; }
.section-label, .feature-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; }
.ui-note { font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }

.hero { position: relative; min-height: 100svh; color: #fff; overflow: hidden; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center 48%; }
.hero-shade { background: linear-gradient(90deg, rgba(7,20,15,.8), rgba(7,20,15,.44) 44%, rgba(7,20,15,.04) 76%), linear-gradient(0deg, rgba(4,17,12,.35), transparent 45%); }
.hero nav { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 28px 4vw; border-bottom: 1px solid rgba(255,255,255,.28); }
.hero nav a:not(.logo) { text-decoration: none; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.hero-copy { position: relative; z-index: 2; padding: 12vh 4vw 8vh; max-width: 760px; }
.kicker { color: var(--lime); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; }
.hero-copy h1 { font: 400 clamp(62px,8vw,126px)/.81 Georgia, serif; letter-spacing: -.07em; margin: 30px 0; }
.hero-copy h1 em { color: var(--lime); font-weight: 400; }
.hero-copy .intro { font-size: 18px; line-height: 1.55; max-width: 470px; }
.hero-copy .scroll { display: inline-flex; gap: 40px; margin-top: 38px; border-bottom: 1px solid #fff; padding-bottom: 10px; text-decoration: none; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.side-note { position: absolute; z-index: 2; right: 4vw; bottom: 4vh; writing-mode: vertical-rl; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }

.opening { padding: 10vw 6vw; display: grid; grid-template-columns: .42fr 1.55fr .7fr; gap: 4vw; align-items: start; }
.opening h2 { font: 400 clamp(58px,7.2vw,108px)/.9 Georgia, serif; letter-spacing: -.065em; margin: 0; max-width: 1050px; }
.opening h2 em, .ending h2 em { font-weight: 400; font-style: italic; color: var(--sage); }
.opening > p:last-child { line-height: 1.8; color: #626c64; align-self: end; }

.ride-view { background: var(--green); color: #fff; padding: 9vw 6vw; display: grid; grid-template-columns: .68fr 1.32fr; gap: 7vw; align-items: center; min-height: 850px; overflow: hidden; }
.ride-copy h2 { font: 400 clamp(52px,6vw,92px)/.91 Georgia, serif; letter-spacing: -.055em; margin: 38px 0; }
.ride-copy > p:not(.feature-kicker) { line-height: 1.75; color: #b5c9be; max-width: 440px; }
.ride-copy .ui-note { display: block; margin-top: 40px; color: #739886; }
.ride-art { min-width: 0; }
.dashboard-composition { position: relative; height: 700px; background: #dbe4d1; border-radius: 32px; padding: 45px; }
.gait-map { display: block; width: 88%; height: auto; margin: 5% auto; box-shadow: 0 28px 70px rgba(0,0,0,.24); }
.dashboard-composition figure { position: absolute; right: 0; bottom: 0; width: 36%; margin: 0; background: var(--cream); color: var(--ink); padding: 8px; transform: rotate(6deg); box-shadow: 0 20px 45px rgba(0,0,0,.25); }
.dashboard-composition figure img { width: 100%; height: 150px; object-fit: cover; }
.dashboard-composition figcaption { font: italic 12px Georgia, serif; padding: 8px; }
.dashboard-gaits, .dashboard-horse { position: absolute; background: #fff; color: var(--ink); padding: 18px; box-shadow: 7px 8px 0 #0d2d23; }
.dashboard-gaits { left: 0; bottom: 5%; transform: rotate(-4deg); }
.dashboard-gaits small, .dashboard-horse small { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; }
.dashboard-gaits span { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; font: 18px Georgia, serif; }
.dashboard-gaits i { width: 10px; height: 10px; border-radius: 50%; }
.walk { background: #7eaa95; }
.trot { background: var(--lime); }
.canter { background: #f3a85f; }
.dashboard-horse { right: 3%; top: 1%; width: 170px; transform: rotate(4deg); }
.dashboard-horse b { display: block; font: 27px Georgia, serif; }
.dashboard-horse span { font-size: 9px; color: #687169; }

.pillars { display: grid; grid-template-columns: repeat(3,1fr); padding: 9vw 5vw; gap: 5vw; }
.pillars article { border-top: 1px solid #b9beb6; padding-top: 24px; }
.pillars span { font-size: 9px; text-transform: uppercase; letter-spacing: .16em; color: #5e8872; }
.pillars h3 { font: 400 38px/1.05 Georgia, serif; margin: 50px 0 20px; }
.pillars p { font-size: 13px; line-height: 1.75; color: #697169; }

.appointments { padding: 10vw 6vw; background: var(--green); color: #fff; display: grid; grid-template-columns: .62fr 1.38fr; gap: 8vw; align-items: center; overflow: hidden; }
.appointments-copy h2 { font: 400 clamp(58px,6.5vw,96px)/.9 Georgia, serif; letter-spacing: -.06em; margin: 40px 0; }
.appointments-copy > p:not(.section-label) { line-height: 1.75; color: #b6cabf; max-width: 420px; }
.appointments-copy .section-label { color: var(--lime); }
.appointments-copy .ui-note { display: block; color: #789d8b; margin-top: 35px; }
.care-dashboard { height: 650px; position: relative; }
.horse-profile { position: absolute; left: 13%; top: 4%; width: 55%; height: 570px; background: var(--cream); color: var(--ink); padding: 10px; transform: rotate(-2deg); box-shadow: 0 25px 60px rgba(0,0,0,.25); }
.horse-profile img { width: 100%; height: 440px; object-fit: cover; }
.horse-profile > div { padding: 16px; }
.horse-profile span, .care-float span { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; color: #5d826f; }
.horse-profile b { display: block; font: 30px Georgia, serif; margin: 5px 0; }
.horse-profile small { color: #6c746e; }
.care-float { position: absolute; width: 205px; background: #fff; color: var(--ink); padding: 19px; box-shadow: 7px 8px 0 #0d2d23; }
.care-float b { display: block; font: 26px Georgia, serif; margin: 13px 0; }
.care-float small { color: #6d756f; }
.care-float.farrier { right: 1%; top: 3%; transform: rotate(5deg); }
.care-float.dentist { left: 0; bottom: 3%; transform: rotate(-5deg); background: var(--lime); }
.care-float.vet { right: 0; bottom: 9%; transform: rotate(4deg); }

.overlap { background: #dce3d6; padding: 10vw 6vw; display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; align-items: center; overflow: hidden; }
.overlap-copy h2 { font: 400 clamp(55px,6vw,92px)/.9 Georgia, serif; letter-spacing: -.06em; margin: 40px 0; }
.overlap-copy > p:not(.section-label) { line-height: 1.75; max-width: 440px; }
.card-stack { height: 680px; position: relative; }
.stack-card { position: absolute; width: 43%; min-height: 390px; background: #fff; padding: 10px; border-radius: 18px; box-shadow: 0 25px 55px rgba(21,62,50,.2); }
.stack-card > span { display: block; padding: 9px 7px; font-size: 8px; text-transform: uppercase; letter-spacing: .14em; color: #5d846e; }
.stack-card > img { width: 100%; height: 235px; object-fit: cover; border-radius: 10px; }
.stack-card > b { display: block; font: 26px Georgia, serif; padding: 14px 8px 4px; }
.stack-card > small { display: block; padding: 0 8px; color: #6a716b; }
.ride-stack { left: 0; top: 18%; transform: rotate(-7deg); }
.horse-stack { left: 29%; top: 0; z-index: 2; transform: rotate(2deg); }
.gallery-stack { right: 0; bottom: 0; z-index: 3; transform: rotate(7deg); }
.stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.stack-grid img { width: 100%; height: 116px; object-fit: cover; }

.ending { background: var(--green); color: #fff; text-align: center; padding: 10vw 5vw; }
.ending p, .ending > span { font-size: 9px; text-transform: uppercase; letter-spacing: .17em; color: var(--lime); }
.ending h2 { font: 400 clamp(58px,7.5vw,108px)/.9 Georgia, serif; letter-spacing: -.065em; margin: 50px auto; max-width: 1100px; }
.site-footer { min-height: 140px; padding: 45px 4vw; display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; }
.site-footer p { font: 24px/1.25 Georgia, serif; margin: 0; }
.site-footer small { font-size: 9px; color: #748078; }

@media (min-width: 721px) {
  .keep-together, .closing-line { white-space: nowrap; }
}

@media (max-width: 720px) {
  .hero nav { padding: 22px; }
  .hero nav a:not(.logo) { font-size: 9px; }
  .hero-copy { padding: 13vh 20px 9vh; }
  .hero-copy h1 { font-size: 62px; }
  .hero-copy .intro { font-size: 16px; }
  .side-note { display: none; }
  .opening { grid-template-columns: 1fr; padding: 90px 20px; gap: 25px; }
  .opening h2 { font-size: 55px; }
  .ride-view { grid-template-columns: 1fr; padding: 80px 18px 110px; gap: 65px; }
  .ride-copy h2 { font-size: 53px; }
  .ride-art { width: 100%; }
  .dashboard-composition { height: 570px; padding: 20px; }
  .gait-map { width: 100%; margin: 15% 0; }
  .dashboard-composition figure { width: 43%; }
  .dashboard-gaits { bottom: 3%; left: -2%; }
  .dashboard-horse { right: -2%; }
  .pillars { grid-template-columns: 1fr; padding: 80px 22px; gap: 55px; }
  .pillars h3 { margin: 28px 0 18px; }
  .appointments { grid-template-columns: 1fr; padding: 85px 18px; gap: 55px; }
  .appointments-copy h2 { font-size: 58px; }
  .care-dashboard { height: 690px; }
  .horse-profile { left: 7%; width: 75%; height: 550px; }
  .horse-profile img { height: 420px; }
  .care-float { width: 165px; }
  .care-float.farrier, .care-float.vet { right: 0; }
  .care-float.dentist { left: 0; }
  .overlap { grid-template-columns: 1fr; padding: 85px 20px; }
  .overlap-copy h2 { font-size: 55px; }
  .card-stack { height: 620px; }
  .stack-card { width: 57%; min-height: 330px; }
  .stack-card > img { height: 180px; }
  .stack-grid img { height: 88px; }
  .ride-stack { left: -4%; }
  .horse-stack { left: 24%; }
  .gallery-stack { right: -4%; }
  .ending { padding: 100px 20px; }
  .ending h2 { font-size: 61px; }
  .site-footer { grid-template-columns: 1fr; gap: 30px; padding: 50px 22px; }
  .site-footer small { margin-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}