/* ================================================================
   Living Yard — parent brand landing page
   Botanical field-guide editorial: cream paper, forest ink,
   terracotta accents. Fraunces display / Instrument Sans body.
   ================================================================ */

:root {
  --paper: #FBF7EC;
  --paper-deep: #F4EEDD;
  --ink: #1C2A1F;
  --ink-soft: #46553F;
  --ink-faint: #6F7D66;
  --forest: #1B4332;
  --forest-deep: #11291E;
  --terracotta: #B45309;
  --clay: #C17D4E;
  --sage: #5a7a3a;
  --line: #D9D2BC;
  --display: "Fraunces", Georgia, serif;
  --body: "Instrument Sans", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* paper atmosphere: faint green wash top-left, warm wash bottom-right */
  background-image:
    radial-gradient(1100px 700px at 8% -4%, rgba(90, 122, 58, 0.10), transparent 60%),
    radial-gradient(900px 650px at 104% 30%, rgba(193, 125, 78, 0.09), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

::selection { background: var(--forest); color: var(--paper); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 480;
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 50, "opsz" 100;
  color: var(--ink);
}

a { color: inherit; }

/* ---------------- header ---------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 32px 0;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 520;
  letter-spacing: 0.01em;
}

.mark {
  width: 30px;
  height: 30px;
  stroke: var(--forest);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header nav { display: flex; gap: 28px; }

.site-header nav a {
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.site-header nav a:hover { color: var(--terracotta); border-color: var(--terracotta); }

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(70px, 11vh, 130px) 32px clamp(80px, 12vh, 150px);
}

.hero-inner { max-width: 760px; }

.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 26px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 38px;
  height: 1px;
  background: var(--terracotta);
  vertical-align: middle;
  margin-right: 14px;
}

.hero h1 {
  font-size: clamp(3.1rem, 8.2vw, 6.4rem);
  margin-bottom: 34px;
}

.hero h1 span { display: block; }

.hero h1 em {
  font-style: italic;
  font-weight: 420;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--forest);
}

.lede {
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 58px;
}

/* staggered load-in */
.rise { opacity: 0; transform: translateY(26px); animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.rise.d1 { animation-delay: 0.08s; }
.rise.d2 { animation-delay: 0.18s; }
.rise.d3 { animation-delay: 0.3s; }
.rise.d4 { animation-delay: 0.44s; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: clamp(24px, 4vw, 56px);
  justify-content: start;
  border-top: 1px solid var(--line);
  padding-top: 30px;
}

.stat-num, .stat-plus {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 500;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}

.stat-plus { margin-left: 1px; }

.stat-label {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-faint);
  max-width: 150px;
  line-height: 1.4;
  margin-top: 4px;
}

/* botanical illustration */
.botanical {
  position: absolute;
  right: clamp(-30px, 2vw, 60px);
  bottom: 0;
  height: min(82%, 520px);
  stroke: var(--forest);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.55;
  pointer-events: none;
}

.botanical .draw {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: sketch 2.4s ease forwards;
}

.botanical .s1 { animation-delay: 0.2s; }
.botanical .s2 { animation-delay: 0.9s; }
.botanical .s3 { animation-delay: 1.1s; }
.botanical .s4 { animation-delay: 1.3s; }
.botanical .p  { animation-delay: 1.5s; animation-duration: 1.6s; }
.botanical .cone { animation-delay: 1.7s; stroke: var(--terracotta); }
.botanical .w  { animation-delay: 2.1s; stroke: var(--terracotta); stroke-width: 1.6; }

.butterfly { animation: hover-drift 7s ease-in-out 3.5s infinite; transform-origin: 170px 170px; }

@keyframes sketch { to { stroke-dashoffset: 0; } }

@keyframes hover-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  35% { transform: translate(-7px, -12px) rotate(-4deg); }
  70% { transform: translate(5px, -5px) rotate(3deg); }
}

/* ---------------- critters ---------------- */

/* bee on a dotted flight loop (hero) */
.bee-flight {
  position: absolute;
  right: clamp(120px, 14vw, 240px);
  bottom: 280px;
  width: clamp(260px, 24vw, 360px);
  pointer-events: none;
  opacity: 0;
  animation: fade-in 1.2s ease 2.6s forwards;
}

@keyframes fade-in { to { opacity: 1; } }

.bee-trail {
  stroke: var(--clay);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1 8;
  opacity: 0.65;
}

.bee {
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  offset-path: path("M30 150 C60 70 150 40 220 80 C280 114 290 170 240 185 C196 198 170 150 205 120 C250 82 330 96 330 150 C330 196 260 226 180 215 C110 206 40 196 30 150 Z");
  offset-rotate: auto;
  animation: bee-fly 22s linear infinite;
}

.bee-body { fill: var(--paper); }
.bee-head { fill: var(--ink); stroke: none; }

.bee-wing {
  fill: rgba(193, 125, 78, 0.18);
  stroke: var(--terracotta);
  stroke-width: 1;
  transform-origin: 0px -2px;
  animation: bee-flutter 0.16s ease-in-out infinite alternate;
}

.bw2 { animation-delay: 0.08s; }

@keyframes bee-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes bee-flutter { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }

/* inchworm crawling the hurdles' top rule */
.inchworm {
  position: absolute;
  top: -13px;
  left: 0;
  width: 38px;
  animation: worm-crawl 90s linear infinite;
}

.worm-seg { fill: var(--sage); }
.worm-head { fill: var(--forest); }
.worm-antenna { stroke: var(--forest); stroke-width: 1.1; stroke-linecap: round; }

.worm-seg { animation: worm-hump 1s ease-in-out infinite; }
.worm-seg:nth-of-type(2) { animation-delay: 0.1s; }
.worm-seg:nth-of-type(3) { animation-delay: 0.2s; }
.worm-seg:nth-of-type(4) { animation-delay: 0.3s; }
.worm-seg:nth-of-type(5) { animation-delay: 0.4s; }
.worm-seg:nth-of-type(6) { animation-delay: 0.5s; }

@keyframes worm-hump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes worm-crawl {
  from { left: 0; }
  to { left: calc(100% - 44px); }
}

/* dragonfly hovering near the loop heading */
.dragonfly {
  position: absolute;
  right: clamp(40px, 14vw, 220px);
  top: 24px;
  width: 78px;
  pointer-events: none;
  animation: dfly-drift 8s ease-in-out infinite;
}

.dfly-body { stroke: var(--forest); stroke-width: 2; stroke-linecap: round; }
.dfly-head { fill: var(--forest); }

.dfly-wing {
  fill: rgba(27, 67, 50, 0.08);
  stroke: var(--forest);
  stroke-width: 1.1;
  transform-origin: 32px 33.5px;
  transform-box: view-box;
  animation: dfly-flutter 0.14s ease-in-out infinite alternate;
}

/* wing rotations live in CSS (one shared origin at the thorax) because the
   SVG transform attribute maps to CSS transform and would double-shift */
.dw1 { transform: rotate(-24deg); }
.dw2 { transform: rotate(14deg); }
.dw3 { transform: rotate(24deg); }
.dw4 { transform: rotate(-14deg); }

.dw2, .dw4 { animation-delay: 0.07s; }

@keyframes dfly-flutter { from { opacity: 0.9; } to { opacity: 0.35; } }

@keyframes dfly-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(-14px, -9px) rotate(-3deg); }
  60% { transform: translate(10px, 6px) rotate(2deg); }
  80% { transform: translate(-4px, -3px) rotate(-1deg); }
}

/* ladybug walking the footer rule */
.ladybug {
  position: absolute;
  top: -8px;
  width: 19px;
  animation: ladybug-walk 75s linear infinite, ladybug-wobble 0.5s ease-in-out infinite alternate;
}

.lb-shell { fill: var(--terracotta); stroke: var(--ink); stroke-width: 0.9; }
.lb-head { fill: var(--ink); }
.lb-antenna { stroke: var(--ink); stroke-width: 0.9; stroke-linecap: round; }
.lb-split { stroke: var(--ink); stroke-width: 0.9; }
.lb-spot { fill: var(--ink); }

@keyframes ladybug-walk {
  from { left: calc(100% - 60px); }
  to { left: 40px; }
}

@keyframes ladybug-wobble {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

/* ---------------- shared section bits ---------------- */

section { scroll-margin-top: 40px; }

.section-head { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 32px 56px; }

.section-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 18px;
}

.section-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }

.section-sub {
  margin-top: 18px;
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 480px;
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------------- mission ---------------- */

.mission { padding: 0 0 clamp(40px, 6vh, 70px); }

.mission-body { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.mission-lede {
  font-family: var(--display);
  font-weight: 420;
  font-variation-settings: "SOFT" 60, "opsz" 30;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 840px;
  margin-bottom: clamp(48px, 7vh, 80px);
}

.mission-lede em {
  font-style: italic;
  color: var(--terracotta);
}

.hurdles-wrap { position: relative; }

.hurdles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 64px;
  list-style: none;
  scroll-margin-top: 40px;
}

.hurdle { border-top: 1px solid var(--line); padding-top: 22px; }

.hurdle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hurdle-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.hurdle .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}

.hurdle-problem {
  font-family: var(--display);
  font-weight: 480;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 10px;
}

.hurdle-fix { color: var(--ink-soft); font-size: 0.98rem; }

.hurdle-fix strong { color: var(--forest); font-weight: 600; }

.hurdle-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  transition: color 0.3s;
}

.hurdle-cta .cta-text {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: 0 100%;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hurdle-cta .arrow { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

.hurdle-cta:hover { color: var(--brand); }
.hurdle-cta:hover .cta-text { background-size: 100% 1.5px; }
.hurdle-cta:hover .arrow { transform: translateX(4px); }

/* stagger the hurdles as they reveal */
.hurdle.reveal:nth-child(2) { transition-delay: 0.1s; }
.hurdle.reveal:nth-child(3) { transition-delay: 0.2s; }
.hurdle.reveal:nth-child(4) { transition-delay: 0.3s; }

/* ---------------- the loop ---------------- */

.loop { padding: clamp(90px, 13vh, 160px) 0 clamp(70px, 10vh, 120px); }

.loop-steps {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  list-style: none;
  counter-reset: step;
}

/* dashed connector behind the step circles */
.loop-steps::before {
  content: "";
  position: absolute;
  top: 25px;
  left: calc(32px + 5%);
  right: calc(32px + 5%);
  border-top: 2px dashed color-mix(in srgb, var(--forest) 36%, transparent);
}

.step { position: relative; }

.step-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.6px solid var(--forest);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--forest);
  margin-bottom: 22px;
  transition: background 0.35s, color 0.35s, transform 0.35s;
}

.step:hover .step-num { background: var(--forest); color: var(--paper); transform: scale(1.08); }

.step:last-child .step-num { border-color: var(--terracotta); color: var(--terracotta); }
.step:last-child:hover .step-num { background: var(--terracotta); color: var(--paper); }

.step h4 { font-size: 1.45rem; margin-bottom: 10px; }

.step p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }

.step strong { font-weight: 600; color: var(--ink); }

/* stagger the loop steps as they reveal */
.step.reveal { transition-delay: 0s; }
.step.reveal:nth-child(2) { transition-delay: 0.1s; }
.step.reveal:nth-child(3) { transition-delay: 0.2s; }
.step.reveal:nth-child(4) { transition-delay: 0.3s; }
.step.reveal:nth-child(5) { transition-delay: 0.4s; }

/* ---------------- keystone partner ---------------- */

.partner { padding: 0 32px clamp(90px, 12vh, 150px); }

.partner-panel {
  max-width: 1176px;
  margin: 0 auto;
  background: #0C140E;
  background-image:
    radial-gradient(720px 440px at 92% -20%, rgba(242, 210, 145, 0.14), transparent 65%),
    radial-gradient(520px 360px at -2% 112%, rgba(90, 122, 58, 0.28), transparent 60%);
  color: var(--paper);
  border-radius: 22px;
  padding: clamp(48px, 7vw, 90px);
}

.partner-tag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E8C273;
  margin-bottom: 20px;
}

.partner-panel h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); color: var(--paper); margin-bottom: 22px; }

.partner-desc {
  max-width: 640px;
  color: rgba(251, 247, 236, 0.78);
  font-size: 1.06rem;
  margin-bottom: 18px;
}

.partner-desc strong { color: var(--paper); font-weight: 600; }

.partner-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  border: 1px solid rgba(232, 194, 115, 0.45);
  border-radius: 999px;
  padding: 15px 28px;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.partner-cta .arrow { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

.partner-cta:hover { background: #E8C273; border-color: #E8C273; color: #0C140E; }
.partner-cta:hover .arrow { transform: translateX(4px); }

/* ---------------- footer ---------------- */

.site-footer { position: relative; border-top: 1px solid var(--line); background: var(--paper-deep); }

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 520;
}

.footer-brand .mark { width: 24px; height: 24px; }

.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }

.footer-links a {
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.25s;
}

.footer-links a:hover { color: var(--terracotta); }

.footer-copy { font-size: 0.84rem; color: var(--ink-faint); }

.footer-copy a { color: var(--ink-soft); text-decoration-color: var(--line); transition: color 0.25s; }
.footer-copy a:hover { color: var(--terracotta); }

/* ---------------- responsive ---------------- */

@media (max-width: 1020px) {
  .botanical { display: none; }
  .bee-flight { display: none; }
  .stats { grid-template-columns: repeat(2, auto); }
  .loop-steps { grid-template-columns: 1fr; gap: 0; }
  .loop-steps::before {
    top: 25px;
    bottom: 60px;
    left: 56px;
    right: auto;
    border-top: none;
    border-left: 2px dashed color-mix(in srgb, var(--forest) 36%, transparent);
  }
  .step { display: grid; grid-template-columns: 50px 1fr; gap: 24px; padding-bottom: 44px; }
  .step h4 { grid-column: 2; margin-top: 10px; }
  .step p { grid-column: 2; }
  .step .step-num { margin-bottom: 0; }
  .step h4 { margin-top: 12px; margin-bottom: 8px; }
}

@media (max-width: 760px) {
  .site-header { padding: 22px 22px 0; }
  .site-header nav { display: none; }
  .hero, .section-head, .loop-steps, .footer-inner { padding-left: 22px; padding-right: 22px; }
  .partner { padding-left: 22px; padding-right: 22px; }
  .mission-body { padding-left: 22px; padding-right: 22px; }
  .hurdles { grid-template-columns: 1fr; gap: 32px; }
  .loop-steps::before { left: 46px; }
  .dragonfly { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .reveal { animation: none; transition: none; opacity: 1; transform: none; }
  .botanical .draw { animation: none; stroke-dashoffset: 0; }
  .butterfly { animation: none; }
  .bee-flight { animation: none; opacity: 1; }
  .bee, .bee-wing, .worm-seg, .inchworm, .dragonfly, .dfly-wing, .ladybug { animation: none; }
  html { scroll-behavior: auto; }
}