:root {
  --ink: #1d2722;
  --cream: #f4f0e8;
  --paper: #fffdf8;
  --red: #d94a3d;
  --red-dark: #a9302b;
  --green: #516b50;
  --sage: #d4dfc9;
  --yellow: #f3c75f;
  --line: rgba(29, 39, 34, 0.17);
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", monospace;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header { align-items: center; display: flex; gap: 28px; justify-content: space-between; padding: 22px clamp(20px, 5vw, 76px); }
.brand, .footer-brand { align-items: center; display: inline-flex; font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
.brand em, .footer-brand em { color: var(--red); font-style: normal; }
.brand-mark { color: var(--red); display: inline-block; font-size: 23px; margin-right: 9px; transform: rotate(14deg); }
.main-nav { display: flex; gap: 27px; margin-left: auto; }
.main-nav a, .header-cta { font-size: 12px; font-weight: 600; }
.main-nav a { opacity: .7; }
.main-nav a:hover { opacity: 1; }
.header-cta { border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.header-cta span { color: var(--red); font-size: 16px; margin-left: 4px; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(370px, .85fr); min-height: 660px; padding: 42px clamp(20px, 8vw, 124px) 68px; }
.hero-copy { align-self: center; max-width: 630px; padding: 40px 0; }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; margin: 0 0 24px; opacity: .63; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(56px, 7vw, 108px); letter-spacing: -.08em; line-height: .9; margin-bottom: 32px; }
h1 span, h2 i, h3 em { color: var(--red); font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.06em; }
.hero-lede { font-size: 18px; line-height: 1.55; max-width: 455px; opacity: .77; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 23px; margin-top: 35px; }
.button { align-items: center; border: 1px solid transparent; display: inline-flex; font-size: 12px; font-weight: 700; gap: 24px; justify-content: space-between; letter-spacing: .02em; padding: 15px 18px; transition: .2s ease; }
.button span { font-size: 16px; line-height: 1; }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: var(--red); }
.button-red { background: var(--red); color: var(--paper); }
.button-red:hover { background: var(--red-dark); }
.button-outline { border-color: var(--ink); }
.button-outline:hover { background: var(--ink); color: var(--paper); }
.text-link { border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 600; padding-bottom: 4px; }
.text-link span { color: var(--red); margin-left: 8px; }
.hero-proof { align-items: center; display: flex; font-family: var(--mono); font-size: 9px; gap: 8px; letter-spacing: .04em; margin-top: 52px; opacity: .55; }
.proof-dot { background: var(--red); border-radius: 50%; display: inline-block; height: 7px; width: 7px; }

.hero-art { background: var(--sage); min-height: 500px; overflow: hidden; position: relative; }
.sun-disc { background: var(--yellow); border-radius: 50%; height: 125px; position: absolute; right: 14%; top: 12%; width: 125px; }
.window-frame { border: 14px solid var(--ink); display: grid; gap: 9px; grid-template-columns: 1fr 1fr; height: 65%; left: 15%; opacity: .96; position: absolute; top: 10%; transform: rotate(-3deg); width: 56%; }
.window-frame span { background: rgba(255, 253, 248, .32); border: 1px solid rgba(29,39,34,.18); }
.art-shelf { background: var(--ink); bottom: 17%; height: 13px; left: 9%; position: absolute; transform: rotate(-2deg); width: 80%; }
.art-pot { background: var(--red); border-radius: 5px 5px 22px 22px; bottom: 19%; height: 90px; position: absolute; width: 81px; }
.pot-one { left: 21%; transform: rotate(-3deg); }
.pot-two { background: var(--green); left: 54%; transform: rotate(4deg) scale(.72); }
.plant { bottom: 32%; position: absolute; }
.plant b, .plant i { background: var(--green); border-radius: 100% 0 100% 0; display: block; height: 90px; position: absolute; width: 34px; }
.plant b { background: var(--ink); border-radius: 3px; bottom: -53px; height: 75px; left: 35px; width: 7px; }
.plant i:nth-child(1) { bottom: 3px; left: 8px; transform: rotate(-34deg); }
.plant i:nth-child(2) { bottom: 47px; left: 34px; transform: rotate(6deg); }
.plant i:nth-child(3) { bottom: 82px; left: 61px; transform: rotate(40deg); }
.plant-large { left: 24%; transform: scale(1.07); }
.plant-small { bottom: 31%; left: 52%; transform: scale(.7); }
.art-label { bottom: 7%; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; position: absolute; right: 9%; text-align: right; }
.art-label strong { color: var(--red); font-size: 28px; line-height: .7; }

.ticker { align-items: center; background: var(--red); color: var(--paper); display: flex; font-family: var(--mono); font-size: 10px; gap: clamp(15px, 4vw, 60px); justify-content: center; letter-spacing: .13em; min-height: 51px; overflow: hidden; white-space: nowrap; }
.ticker span { color: var(--yellow); font-size: 16px; }
.section { padding: 118px clamp(20px, 8vw, 124px); }
.section-heading { align-items: end; display: flex; gap: 40px; justify-content: space-between; margin-bottom: 48px; }
h2 { font-size: clamp(41px, 5vw, 73px); letter-spacing: -.08em; line-height: .94; margin-bottom: 0; }
.section-note { font-size: 14px; line-height: 1.5; max-width: 260px; opacity: .62; }
.scenario-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.scenario-card { min-height: 515px; overflow: hidden; padding: 28px; position: relative; transition: transform .25s ease; }
.scenario-card:hover { transform: translateY(-6px); }
.card-herb { background: var(--red); color: var(--paper); }
.card-shelf { background: #b5caa8; }
.card-balcony { background: var(--yellow); }
.card-number { font-family: var(--mono); font-size: 10px; opacity: .6; }
.card-content { bottom: 28px; left: 28px; max-width: 235px; position: absolute; }
.card-content h3 { font-size: 33px; letter-spacing: -.07em; line-height: .9; margin-bottom: 19px; }
.card-content h3 em { color: inherit; }
.card-content p { font-size: 13px; line-height: 1.45; opacity: .74; }
.card-link { border-bottom: 1px solid currentColor; display: inline-block; font-family: var(--mono); font-size: 10px; padding-bottom: 4px; }
.card-illustration { height: 230px; left: 15%; position: absolute; top: 14%; width: 70%; }
.herb-pot { background: var(--paper); border-radius: 6px 6px 30px 30px; bottom: 7px; height: 87px; left: 36%; position: absolute; transform: rotate(-5deg); width: 96px; }
.herb-illustration:after { background: var(--paper); bottom: 78px; content: ""; height: 145px; left: 50%; position: absolute; transform: rotate(-5deg); width: 8px; }
.leaf { background: var(--green); border-radius: 100% 0 100% 0; display: block; height: 60px; position: absolute; width: 35px; }
.leaf-a { bottom: 145px; left: 16%; transform: rotate(-50deg); }
.leaf-b { bottom: 115px; left: 52%; transform: rotate(17deg); }
.leaf-c { bottom: 162px; left: 66%; transform: rotate(47deg); }
.shelf-line { background: var(--ink); height: 8px; left: 8%; position: absolute; transform: rotate(-2deg); width: 84%; }
.line-one { top: 28%; }.line-two { top: 52%; }.line-three { top: 76%; }
.shelf-illustration:before { background: var(--ink); content: ""; height: 84%; left: 13%; position: absolute; top: 10%; transform: rotate(-2deg); width: 7px; }
.shelf-illustration:after { background: var(--ink); content: ""; height: 84%; position: absolute; right: 11%; top: 10%; transform: rotate(-2deg); width: 7px; }
.shelf-pot { background: var(--red); border-radius: 4px 4px 13px 13px; height: 38px; position: absolute; width: 43px; z-index: 2; }
.p-a { left: 25%; top: 39%; }.p-b { background: var(--green); right: 19%; top: 63%; }
.shelf-light { background: var(--yellow); height: 4px; left: 23%; position: absolute; top: 28%; transform: rotate(-2deg); width: 55%; z-index: 3; }
.shelf-light:before { background: var(--yellow); content: ""; filter: blur(12px); height: 15px; left: -7px; opacity: .75; position: absolute; top: -5px; width: 105%; }
.balcony-rail { background: var(--ink); bottom: 33%; height: 9px; left: 10%; position: absolute; transform: rotate(-4deg); width: 80%; }
.balcony-rail:after, .balcony-rail:before { background: var(--ink); bottom: -52px; content: ""; height: 55px; position: absolute; width: 6px; }.balcony-rail:before { left: 23%; }.balcony-rail:after { right: 17%; }
.balcony-pot { background: var(--red); border-radius: 3px 3px 14px 14px; bottom: 38%; height: 55px; position: absolute; width: 58px; }
.b-a { left: 27%; }.b-b { background: var(--green); right: 23%; transform: scale(.82); }
.balcony-stem { background: var(--green); bottom: 48%; height: 87px; left: 36%; position: absolute; transform: rotate(-10deg); width: 6px; }
.balcony-leaf { background: var(--green); border-radius: 100% 0 100% 0; bottom: 62%; height: 55px; left: 20%; position: absolute; transform: rotate(-32deg); width: 34px; }

.planner-section { background: var(--green); color: var(--paper); display: grid; gap: 90px; grid-template-columns: .75fr 1.25fr; }
.planner-intro { align-self: start; padding-top: 15px; }.planner-intro .eyebrow { opacity: .65; }.planner-intro h2 i { color: var(--yellow); }.planner-intro > p:last-child { font-size: 16px; line-height: 1.5; margin-top: 26px; max-width: 330px; opacity: .8; }
.planner-card { background: var(--paper); color: var(--ink); padding: 35px clamp(22px, 4vw, 52px); }
.planner-step { border-bottom: 1px solid var(--line); padding: 24px 0; }.step-label { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; margin-bottom: 14px; opacity: .55; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }.choice { background: transparent; border: 1px solid var(--line); cursor: pointer; font-size: 12px; padding: 11px 13px; }.choice:hover, .choice.is-selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.planner-submit { border: 0; cursor: pointer; margin-top: 28px; width: 100%; }.planner-result { font-size: 13px; line-height: 1.4; padding-top: 18px; }.planner-result strong { color: var(--red); }

.guide-section { align-items: center; display: grid; gap: clamp(50px, 8vw, 130px); grid-template-columns: 1fr 1fr; }.guide-image { background: #e8d4c0; height: 520px; overflow: hidden; position: relative; }.guide-window { background: var(--sage); border: 12px solid var(--ink); height: 57%; left: 16%; position: absolute; top: 12%; transform: rotate(3deg); width: 66%; }.guide-window:before, .guide-window:after { background: var(--ink); content: ""; left: 50%; position: absolute; top: 0; width: 7px; }.guide-window:before { height: 100%; }.guide-window:after { height: 7px; top: 50%; width: 100%; left: 0; }.guide-table { background: var(--ink); bottom: 16%; height: 13px; left: 6%; position: absolute; transform: rotate(-3deg); width: 89%; }.guide-vase { background: var(--red); border-radius: 6px 6px 30px 30px; bottom: 18%; height: 92px; left: 37%; position: absolute; transform: rotate(5deg); width: 88px; }.guide-leaf { background: var(--green); border-radius: 100% 0 100% 0; height: 74px; position: absolute; width: 42px; }.l-one { bottom: 37%; left: 32%; transform: rotate(-37deg); }.l-two { bottom: 40%; left: 51%; transform: rotate(25deg); }.l-three { bottom: 47%; left: 59%; transform: rotate(55deg); }.guide-sticker { background: var(--yellow); bottom: 10%; font-family: var(--mono); font-size: 10px; padding: 15px 12px; position: absolute; right: 9%; transform: rotate(8deg); }.guide-copy h2 { margin-bottom: 27px; }.guide-lede { font-size: 17px; line-height: 1.5; max-width: 410px; opacity: .72; }.guide-meta { display: flex; font-family: var(--mono); font-size: 9px; gap: 18px; margin: 28px 0; opacity: .6; }.guide-meta span:first-child { color: var(--red); font-size: 16px; }

.principles { background: var(--paper); }.principle-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }.principle-grid article { border-right: 1px solid var(--line); min-height: 250px; padding: 27px 24px 20px 0; }.principle-grid article + article { padding-left: 24px; }.principle-grid article:last-child { border-right: 0; }.principle-grid span { color: var(--red); font-family: var(--mono); font-size: 10px; }.principle-grid h3 { font-size: 21px; letter-spacing: -.05em; margin: 45px 0 12px; }.principle-grid p { font-size: 13px; line-height: 1.5; opacity: .64; }
.site-footer { align-items: center; background: var(--ink); color: var(--paper); display: grid; gap: 20px; grid-template-columns: 1fr 1fr 1fr; padding: 35px clamp(20px, 5vw, 76px); }.site-footer p, .site-footer small { font-size: 10px; margin: 0; opacity: .55; }.footer-links { display: flex; gap: 18px; justify-content: flex-end; }.footer-links a { font-family: var(--mono); font-size: 10px; opacity: .7; }.footer-links a:hover { opacity: 1; }.site-footer small { grid-column: 1 / -1; }
.legal-wrap { margin: 0 auto; max-width: 820px; padding: 76px clamp(20px, 5vw, 76px) 100px; }.legal-kicker { color: var(--red); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }.legal-wrap h1 { font-family: var(--display); font-size: clamp(42px, 7vw, 78px); line-height: .98; margin: 18px 0 28px; max-width: 760px; }.legal-wrap h2 { font-size: 22px; margin: 42px 0 14px; }.legal-wrap p, .legal-wrap li { color: #514b44; font-size: 16px; line-height: 1.75; }.legal-wrap ul { padding-left: 22px; }.legal-wrap a { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }.legal-meta { border-top: 1px solid var(--line); color: #777067; font-family: var(--mono); font-size: 11px; margin-top: 52px; padding-top: 18px; }

@media (max-width: 840px) {
  .main-nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 15px; }
  .hero-art { min-height: 440px; }
  .scenario-grid, .principle-grid { grid-template-columns: 1fr 1fr; }
  .scenario-card:last-child { grid-column: 1 / -1; }
  .planner-section, .guide-section { grid-template-columns: 1fr; }
  .guide-image { max-height: 480px; }
  .planner-section { gap: 45px; }
  .principle-grid article:nth-child(2) { border-right: 0; }
  .principle-grid article:nth-child(3), .principle-grid article:nth-child(4) { border-top: 1px solid var(--line); }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer p { display: none; }
}
@media (max-width: 540px) {
  .site-header { padding: 18px 20px; }.header-cta { font-size: 10px; }.hero { min-height: auto; padding-bottom: 40px; }.hero-copy { padding-top: 34px; }.hero-art { min-height: 360px; }.sun-disc { height: 90px; width: 90px; }.scenario-grid, .principle-grid { grid-template-columns: 1fr; }.scenario-card, .scenario-card:last-child { grid-column: auto; min-height: 450px; }.section { padding-bottom: 78px; padding-top: 78px; }.section-heading { align-items: start; flex-direction: column; gap: 20px; }.section-note { max-width: 340px; }.principle-grid article, .principle-grid article + article { border-right: 0; border-top: 1px solid var(--line); min-height: auto; padding: 22px 0; }.principle-grid article:first-child { border-top: 0; }.principle-grid h3 { margin-top: 20px; }.site-footer { grid-template-columns: 1fr; }.footer-links { justify-content: flex-start; }.site-footer small { grid-column: auto; }
}