/* Oakmere Landscape Studio: earthy editorial. Sage + linen, DM Serif Display over Inter, pill buttons, arches, lime only as a highlight. */
:root {
  --bg: #fcfaf5; --surface: #f2eddf; --surface-2: #e6dfca; --ink: #152c3d; --muted: #4c5a60; --line: rgba(21, 44, 61, .13);
  --accent: #5a6457; --accent-ink: #f2eddf; --accent-text: #4a5447; --lime: #b4eb18; --sage-pale: #ccd7c9; --sage-deep: #3f483d;
  --dark: #1d2a22; --dark-2: #26352c; --on-dark: #f2eddf; --on-dark-muted: rgba(242, 237, 223, .72);
  --star: #e0a526;
  --font-display: "DM Serif Display", Georgia, serif; --font-body: "Inter", system-ui, sans-serif;
  --h-weight: 400; --h-case: none; --h-track: -0.012em; --h-leading: 1.04;
  --radius: 8px; --radius-sm: 4px; --radius-btn: 999px;
  --shadow: 0 1px 2px rgba(21, 44, 61, .05), 0 18px 40px -20px rgba(21, 44, 61, .25);
  --shadow-lg: 0 40px 90px -36px rgba(21, 44, 61, .45);
}

/* ---------- global tuning ---------- */
.om h2 { font-size: clamp(34px, 4.2vw, 58px); }
.om h3 { font-size: clamp(21px, 1.8vw, 25px); letter-spacing: -.005em; }
.om .k-eyebrow { font-size: 12.5px; letter-spacing: .18em; color: var(--accent-text); }
.om .k-eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(180, 235, 24, .22); }
.om .k-dark .k-eyebrow { color: var(--sage-pale); }
.om svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.om .k-btn { font-size: 15.5px; min-height: 54px; padding: 0 28px; white-space: normal; text-align: center; line-height: 1.2; }
.om .k-btn:hover { background: var(--sage-deep); border-color: var(--sage-deep); box-shadow: 0 14px 28px -14px rgba(63, 72, 61, .8); }
.om .k-btn--ghost { color: var(--ink); border-color: rgba(21, 44, 61, .32); }
.om .k-btn--ghost:hover { background: rgba(252, 250, 245, .6); border-color: var(--ink); color: var(--ink); box-shadow: none; }
.om .k-btn--sm { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.om .k-logo { font-size: 24px; letter-spacing: -.01em; }
.om .k-logo small { letter-spacing: .16em; font-size: 10.5px; }
.om .k-logo svg { width: 42px; height: 42px; color: var(--ink); }
.om-mark-canopy { fill: var(--accent); }
.om .k-links a:hover { color: var(--accent-text); }
@media (max-width: 640px) { .om .k-topbar .k-wrap > span:nth-child(2) { display: none; } }

.om-head-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(34px, 4.5vw, 60px); }
.om-head-row .k-head { margin: 0; }
.om-head-row h2 { margin: 0; }
.om-head-row .k-lead { margin: 0; }

/* ---------- hero: headline set in the dusk sky ---------- */
.om-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; min-height: clamp(640px, calc(100svh - 150px), 900px); color: var(--ink); }
.om-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; z-index: -2; transform: scale(1.07); animation: k-zoom 18s var(--ease) forwards; }
.om-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(242, 237, 223, .80) 0%, rgba(242, 237, 223, .55) 36%, rgba(242, 237, 223, 0) 62%),
              linear-gradient(90deg, rgba(242, 237, 223, .5) 0%, rgba(242, 237, 223, 0) 58%); }
.om-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: -1; background: linear-gradient(180deg, transparent, rgba(21, 44, 61, .22)); }
.om-hero-inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(36px, 5.5vw, 80px) 0 clamp(28px, 4vw, 48px); }
.om-hero-copy { max-width: 860px; }
.om-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(252, 250, 245, .72);
  backdrop-filter: blur(8px); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }
.om-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(180, 235, 24, .7); animation: om-ping 2.2s infinite; }
@keyframes om-ping { 70% { box-shadow: 0 0 0 9px rgba(180, 235, 24, 0); } 100% { box-shadow: 0 0 0 0 rgba(180, 235, 24, 0); } }
.om-hero h1 { font-size: clamp(46px, 6.8vw, 104px); line-height: .98; letter-spacing: -.02em; margin-bottom: 24px; max-width: 13ch; }
.om-swash { position: relative; display: inline-block; font-style: italic; }
.om-swash::after { content: ""; position: absolute; left: 2%; right: 4%; bottom: -.08em; height: .2em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16C70 6 150 4 296 12' fill='none' stroke='%23b4eb18' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0); animation: om-draw 1s var(--ease) 1.1s forwards; }
@keyframes om-draw { to { clip-path: inset(0 0 0 0); } }
.om-lead { font-size: clamp(17.5px, 1.5vw, 20px); line-height: 1.55; color: rgba(21, 44, 61, .86); max-width: 54ch; margin-bottom: 28px; font-weight: 500; }
.om-proof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.om-hero .k-rating, .om-hero .k-chips li { background: rgba(252, 250, 245, .78); border-color: rgba(21, 44, 61, .12); backdrop-filter: blur(8px); }
.om-hero .k-chips svg { color: var(--accent); }
.om-hero .k-btn--ghost { background: rgba(252, 250, 245, .55); backdrop-filter: blur(6px); }
.om-label { position: absolute; right: 0; bottom: clamp(28px, 4vw, 48px); max-width: 300px; padding: 14px 18px; border-radius: var(--radius); background: rgba(252, 250, 245, .86);
  backdrop-filter: blur(10px); box-shadow: var(--shadow); border-left: 3px solid var(--lime); display: grid; gap: 2px; font-size: 13.5px; }
.om-label small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.om-label b { font: 400 19px/1.2 var(--font-display); }
.om-label span { color: var(--muted); line-height: 1.45; }
.om-scroll { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border-radius: 999px; border: 1.5px solid rgba(252, 250, 245, .85); }
.om-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #fcfaf5; animation: om-wheel 1.8s infinite; }
@keyframes om-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- stats band ---------- */
.om-stats-band { background: var(--accent); color: var(--on-dark); padding: clamp(10px, 2vw, 22px) 0; }
.om-stats { background: rgba(242, 237, 223, .16); border: 0; border-radius: 0; }
.om-stats > div { background: var(--accent); padding: 26px 22px; }
.om-stats b { color: var(--on-dark); font-size: clamp(40px, 4.4vw, 60px); margin-bottom: 4px; }
.om-stats span { color: rgba(242, 237, 223, .82); font-size: 14.5px; }

/* ---------- seasons ---------- */
.om-season-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(21, 44, 61, .07); margin-bottom: clamp(28px, 4vw, 44px); }
.om .om-season-tabs button { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--muted); transition: background .25s, color .25s; }
.om .om-season-tabs button:hover { color: var(--ink); }
.om .om-season-tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px -10px rgba(63, 72, 61, .7); }
.om-season-tabs em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: 3px 7px; border-radius: 999px; }
.om-season { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.om-season:not([hidden]) { animation: om-fade .7s var(--ease); }
@keyframes om-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.om-arch { margin: 0; aspect-ratio: 4 / 4.3; border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--surface-2); }
.om-arch img { width: 100%; height: 100%; object-fit: cover; }
.om-season-when { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.om .om-season h3 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; margin-bottom: 16px; }
.om-season-copy > p:not(.om-season-when) { color: var(--muted); font-size: 17.5px; }
.om-tasks { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.om-tasks li { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.om-tasks li::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--accent); border-radius: 0 80% 0 80%; transform: translateY(1px); }
.om-months { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.om-months li { text-align: center; font-size: 11.5px; font-weight: 600; padding: 7px 0; border-radius: 4px; background: rgba(21, 44, 61, .06); color: var(--muted); }
.om-months li.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- services ---------- */
.om-svc { gap: 18px; }
.om .om-card { display: flex; flex-direction: column; padding: 28px 26px 24px; border-color: var(--line); background: #fff; }
.om .om-card:hover { border-color: var(--accent); }
.om .om-card .k-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--sage-pale); color: var(--sage-deep); transition: background .3s, color .3s, transform .4s var(--ease); }
.om .om-card:hover .k-icon { background: var(--accent); color: var(--accent-ink); transform: rotate(-6deg); }
.om .om-card h3 { margin-bottom: 10px; }
.om .om-card p { font-size: 15.5px; line-height: 1.6; }
.om .om-card .k-more { margin-top: auto; padding-top: 18px; color: var(--accent-text); }

/* ---------- design-build journey ---------- */
.om-journey { overflow: hidden; }
.om-journey::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 85% 10%, rgba(180, 235, 24, .07), transparent 70%); pointer-events: none; }
.om-journey .k-lead { color: var(--on-dark-muted); }
.om-stage { position: relative; aspect-ratio: 16 / 9.4; border-radius: 12px; overflow: hidden; margin-bottom: clamp(40px, 5vw, 64px); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .75);
  background: #efe8d6; color: var(--ink); }
.om-paper { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1700px;
  background: repeating-linear-gradient(0deg, rgba(21, 44, 61, .05) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(21, 44, 61, .05) 0 1px, transparent 1px 28px), #f1ebda; }
.om-plan { width: min(84%, 1000px); height: auto; overflow: visible; transform-origin: 50% 55%; transition: transform 1.5s var(--ease); }
.om-plan .s { fill-opacity: 0; stroke: #3b3a33; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s var(--ease), fill-opacity .9s var(--ease), stroke .8s, stroke-width .8s; }
.om-plan .pf { opacity: 0; transition: opacity .8s .4s; }
.om-plan .dz { stroke: #3b3a33; stroke-width: 1.3; stroke-dasharray: 5 6; opacity: .7; transition: stroke .8s; }
.om-plan .om-lights circle { fill: var(--lime); }
.om-lbl text { font: italic 400 16px var(--font-display); fill: #3b3a33; transition: fill .8s; }
.om-lbl .sm { font-size: 11.5px; font-family: var(--font-body); font-style: normal; letter-spacing: .04em; }
.om-scale path { stroke: #3b3a33; stroke-width: 1.4; fill: none; }
.om-scale text { font: 600 11px var(--font-body); fill: #3b3a33; }
.om-stage.in[data-stage="1"] .s, html.k-reveal-all .om-stage[data-stage="1"] .s, html:not(.k-js) .om-plan .s { stroke-dashoffset: 0; }
.om-stage[data-stage="2"] .s, .om-stage[data-stage="3"] .s, .om-stage[data-stage="4"] .s { stroke-dashoffset: 0; fill-opacity: 1; stroke: rgba(21, 32, 22, .35); stroke-width: 1; }
.om-stage[data-stage="2"] .pf, .om-stage[data-stage="3"] .pf, .om-stage[data-stage="4"] .pf { opacity: 1; }
.om-stage[data-stage="2"] .dz { stroke: var(--lime); opacity: 1; }
.om-stage[data-stage="2"] .om-lbl .on-dark { fill: #f2eddf; }
.om-stage[data-stage="2"] .om-plan { transform: rotateX(50deg) rotateZ(-24deg) scale(.94) translateY(-4%); }
.om-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.05); transition: opacity 1s var(--ease), transform 1.6s var(--ease); }
.om-shot img { width: 100%; height: 100%; object-fit: cover; }
.om-stage[data-stage="3"] .om-shot[data-for="3"], .om-stage[data-stage="4"] .om-shot[data-for="4"] { opacity: 1; transform: none; }
.om-stage-tag { position: absolute; left: 18px; top: 18px; margin: 0; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px;
  background: rgba(252, 250, 245, .92); backdrop-filter: blur(8px); font-size: 14px; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100% - 36px); }
.om-stage-tag b { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; background: var(--dark); color: var(--lime); font: 400 15px/1 var(--font-display); }
.om-steps li { cursor: pointer; padding-top: 72px; border-top: 2px solid rgba(242, 237, 223, .14); transition: border-color .3s; outline-offset: 6px; }
.om-steps li::before { top: 18px; color: rgba(204, 215, 201, .55); font-size: 40px; transition: color .3s; }
.om-steps li::after { display: none; }
.om-steps li h3 { color: rgba(242, 237, 223, .75); transition: color .3s; }
.om-steps li:hover h3, .om-steps li.is-on h3 { color: var(--on-dark); }
.om-steps li.is-on { border-top-color: rgba(242, 237, 223, .35); }
.om-steps li.is-on::before { color: var(--lime); }
.om-steps small { display: block; margin-top: -4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-pale); }
.om-prog { position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--lime); }
.om-steps li.is-on .om-prog { width: 100%; }
.om-stage.is-playing ~ .om-steps li.is-on .om-prog { animation: om-prog 5.2s linear; }
@keyframes om-prog { from { width: 0; } to { width: 100%; } }

/* ---------- before/after + gallery ---------- */
.om-ba-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: clamp(56px, 7vw, 96px); }
.om-ba { aspect-ratio: 3 / 2; border-radius: 12px; }
.om-ba img { object-position: 40% 60%; }
.om .k-ba-tag { background: rgba(252, 250, 245, .92); color: var(--ink); font-size: 12.5px; }
.om .k-ba-line { background: #fcfaf5; }
.om .k-ba-line::after { background: var(--lime); color: var(--ink); font-weight: 700; }
.om-case h2 { font-size: clamp(32px, 3.4vw, 48px); }
.om-case > p { color: var(--muted); }
.om-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 26px 0; border-top: 1px solid var(--line); }
.om-spec div { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); }
.om-spec div:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line); }
.om-spec dt { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.om-spec dd { margin: 3px 0 0; font-weight: 500; font-size: 15.5px; line-height: 1.4; }
.om-link { font-weight: 600; color: var(--accent-text); text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.om-gal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; border-top: 1px solid var(--line); padding-top: 26px; }
.om-gal-head h3 { margin: 0; font-size: clamp(24px, 2.2vw, 30px); }
.om-gal-head p { margin: 0; color: var(--muted); font-size: 14.5px; }
.om .om-gal { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 12px; }
.om .om-gal button { border-radius: var(--radius); }
.om .om-gal button:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.om .om-gal button:nth-child(2), .om .om-gal button:nth-child(3) { grid-column: span 3; grid-row: auto; }
.om .om-gal button:nth-child(n+4) { grid-column: span 2; grid-row: auto; }
.om .om-gal span { background: rgba(252, 250, 245, .92); color: var(--ink); font-weight: 600; font-size: 12.5px; }
@media (max-width: 760px) {
  .om .om-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; }
  .om .om-gal button:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .om .om-gal button:nth-child(n+2) { grid-column: span 1; }
  .om .om-gal button:nth-child(6) { grid-column: span 2; }
  .om .om-gal span { font-size: 11px; left: 8px; bottom: 8px; padding: 4px 8px; }
}

/* ---------- drought-tolerant palette ---------- */
.om-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px; }
.om-filter button { border: 1px solid var(--line); background: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; cursor: pointer; color: var(--muted); transition: all .25s; }
.om-filter button:hover { border-color: var(--accent); color: var(--ink); }
.om-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.om-filter-count { margin-left: auto; font-size: 14px; color: var(--muted); }
.om-filter-count b { font: 400 22px/1 var(--font-display); color: var(--ink); }
.om-plant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.om-plant { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: opacity .45s var(--ease), filter .45s, transform .45s var(--ease), box-shadow .35s; }
.om-plant:hover { box-shadow: var(--shadow); }
.om-plant.is-out { opacity: .3; filter: grayscale(1); transform: scale(.975); }
html.k-js .om-plant.in.is-out { opacity: .3; transform: scale(.975); }
.om-plant-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--surface-2); }
.om-plant-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.om-plant:hover .om-plant-img img { transform: scale(1.05); }
.om-water { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: rgba(252, 250, 245, .92); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.om-water::before { content: "Water"; margin-right: 4px; color: var(--muted); }
.om-water i { width: 9px; height: 9px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); border: 1.5px solid #3e7fa8; }
.om-water i.on { background: #3e7fa8; }
.om-plant-body { padding: 22px 22px 24px; }
.om-plant-body h3 { margin-bottom: 2px; }
.om-latin { font-style: italic; color: var(--accent-text); font-size: 14px; margin-bottom: 10px; }
.om-plant-body > p:not(.om-latin) { font-size: 15px; color: var(--muted); line-height: 1.6; }
.om-tags { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.om-tags li { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--sage-pale) 60%, transparent); color: var(--sage-deep); }
.om-calc { margin-top: clamp(32px, 4vw, 48px); background: var(--accent); color: var(--on-dark); border-radius: 16px; padding: clamp(24px, 3.4vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 40px; align-items: center; position: relative; overflow: hidden; }
.om-calc::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 0 80% 0 80%; border: 1.5px solid rgba(180, 235, 24, .35); transform: rotate(10deg); pointer-events: none; }
.om-calc h3 { margin-bottom: 6px; font-size: clamp(24px, 2.2vw, 30px); }
.om-calc p { margin: 0; color: var(--on-dark-muted); font-size: 15px; }
.om-calc-input { display: grid; gap: 14px; font-size: 15px; }
.om-calc-input b { font-weight: 700; }
.om-calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--lime) var(--p, 20%), rgba(242, 237, 223, .25) var(--p, 20%)); }
.om-calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fcfaf5; border: 5px solid var(--lime); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.om-calc input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fcfaf5; border: 5px solid var(--lime); }
.om-calc-out b { display: block; font: 400 clamp(44px, 4.6vw, 64px)/1 var(--font-display); color: var(--lime); }
.om-calc-out span { font-size: 14.5px; color: var(--on-dark-muted); }
.om-calc-out em { font-style: normal; color: var(--on-dark); font-weight: 600; }
.om-fine { grid-column: 1 / -1; font-size: 12.5px !important; color: rgba(242, 237, 223, .6) !important; border-top: 1px solid rgba(242, 237, 223, .16); padding-top: 14px; }

/* ---------- about ---------- */
.om-about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.om-about-media { margin: 0; position: relative; padding-bottom: 36px; }
.om-about-arch { aspect-ratio: 4 / 5; border-radius: 999px 999px 12px 12px; overflow: hidden; box-shadow: var(--shadow-lg); }
.om-about-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.om-owner { position: absolute; right: clamp(-28px, -2vw, -8px); bottom: 0; display: flex; align-items: center; gap: 14px; background: var(--bg); padding: 14px 22px 14px 14px; border-radius: 999px; box-shadow: var(--shadow-lg); }
.om-mono { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--dark); color: var(--lime); font: italic 400 21px/1 var(--font-display); flex: none; }
.om-owner b { display: block; font: 400 19px/1.15 var(--font-display); }
.om-owner small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-top: 3px; font-weight: 600; }
.om-about-copy > p { color: var(--muted); }
.om-quote { margin: 30px 0; padding: 26px 28px; background: var(--bg); border-radius: var(--radius); position: relative; }
.om-quote::before { content: "“"; position: absolute; top: -18px; left: 22px; font: 400 82px/1 var(--font-display); color: var(--accent); }
.om-quote p { font: italic 400 clamp(22px, 2.1vw, 28px)/1.3 var(--font-display); color: var(--ink); margin-bottom: 12px; }
.om-quote cite { font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.om-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.om-facts li { display: grid; padding-left: 22px; position: relative; }
.om-facts li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; background: var(--accent); border-radius: 0 80% 0 80%; }
.om-facts b { font-size: 15px; }
.om-facts span { font-size: 14px; color: var(--muted); }

/* ---------- reviews ---------- */
.om-rev-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; margin-bottom: clamp(34px, 4.5vw, 56px); }
.om-rev-head h2 { margin: 0; }
.om-rev-side { display: grid; justify-items: end; gap: 10px; }
.om-sample-note { margin: 0; font-size: 13px; color: var(--muted); }
.om .k-review { background: var(--surface); border: 0; border-radius: 14px; padding: 26px; }
.om .k-review .k-stars { font-size: 15px; letter-spacing: 2px; }
.om .k-review small { color: var(--muted); font-size: 12.5px; }
.om .k-review p { font-size: 15.5px; line-height: 1.6; }
.om .k-who i { background: var(--sage-pale); color: var(--sage-deep); }
@media (max-width: 640px) { .om-rev-side { justify-items: start; } }

/* ---------- area ---------- */
.om-area-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.om .k-area li { background: #fff; border-color: var(--line); font-weight: 600; font-size: 14.5px; transition: background .25s, color .25s, border-color .25s; }
.om .k-area li:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.om-hours { margin-top: 22px; font-size: 15px; color: var(--muted); }
.om-hours b { color: var(--ink); }
.om .k-map { border-radius: 16px 160px 16px 16px; box-shadow: var(--shadow-lg); border: 0; }
.om .k-map iframe { filter: saturate(.7) sepia(.12); }

/* ---------- faq ---------- */
.om-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.om-faq-call { color: var(--muted); }
.om-faq-call a { color: var(--accent-text); font-weight: 600; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; white-space: nowrap; }
.om .k-faq details { border-radius: 12px; background: var(--surface); border-color: transparent; }
.om .k-faq details[open] { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.om .k-faq summary { font-family: var(--font-display); font-weight: 400; font-size: 20px; padding: 22px 60px 22px 24px; }
.om .k-faq summary::after { content: ""; width: 26px; height: 26px; border-radius: 50%; right: 22px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2eddf' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; }
.om .k-faq details[open] summary::after { background-color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152c3d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); }
.om .k-faq details p { padding: 0 24px 22px; }

/* ---------- book ---------- */
.om-book { overflow: hidden; }
.om-book::before { content: ""; position: absolute; left: -120px; bottom: -160px; width: 480px; height: 480px; border-radius: 0 80% 0 80%; border: 1.5px solid rgba(204, 215, 201, .14); pointer-events: none; }
.om-book .k-lead { color: var(--on-dark-muted); }
.om-book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: center; position: relative; }
.om-next { list-style: none; padding: 0; margin: 30px 0; display: grid; gap: 0; counter-reset: n; }
.om-next li { counter-increment: n; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 14px 0; border-top: 1px solid rgba(242, 237, 223, .14); }
.om-next li::before { content: counter(n); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--sage-pale); color: var(--sage-pale); font: 400 17px/1 var(--font-display); }
.om-next b { font-weight: 600; }
.om-next span { color: var(--on-dark-muted); font-size: 15px; }
.om-book-tel { display: inline-grid; text-decoration: none; font: 400 clamp(34px, 3.6vw, 48px)/1.1 var(--font-display); color: var(--on-dark); }
.om-book-tel small { font: 600 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-pale); }
.om-book-tel:hover { color: var(--lime); }
.om-widget { border-radius: 18px; border: 0; }
.om .k-tabs { border-radius: 999px; }
.om .k-tabs button { border-radius: 999px; font-size: 14.5px; }
.om .k-days button, .om .k-slots button { border-radius: 10px; }
.om .k-days button b { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.om .k-form input, .om .k-form select, .om .k-form textarea { border-radius: 10px; }
.om .k-done h3 { font-size: 30px; }
.om .k-done svg { color: var(--accent); }
.om-demo { display: block; color: var(--muted); margin-top: 6px; }

/* ---------- CTA ---------- */
.om-cta-wrap { padding-top: clamp(56px, 7vw, 96px); }
.om .om-cta { border-radius: 24px; padding: clamp(36px, 6vw, 80px); }
.om .om-cta::before { background: radial-gradient(circle, rgba(180, 235, 24, .22), transparent 65%); }
.om .om-cta h2 { max-width: 20ch; font-size: clamp(32px, 4vw, 54px); }
.om .om-cta p { max-width: 50ch; color: rgba(242, 237, 223, .85); margin-bottom: 28px; font-size: 17.5px; }
.om-cta-leaf { position: absolute; right: clamp(-40px, 2vw, 40px); bottom: -30px; width: clamp(180px, 24vw, 320px); height: auto; fill: none; stroke: var(--lime); stroke-width: 2; opacity: .55; z-index: -1; }
.om .k-cta .k-btn:hover { background: #fff; border-color: #fff; color: var(--sage-deep); }
.om .k-cta .k-btn--ghost { color: var(--accent-ink); border-color: rgba(242, 237, 223, .5); }
.om .k-cta .k-btn--ghost:hover { background: transparent; border-color: var(--accent-ink); color: var(--accent-ink); }

/* ---------- footer + callbar ---------- */
.om-foot-logo { color: var(--on-dark); margin-bottom: 18px; }
.om-foot-logo svg { color: var(--on-dark) !important; }
.om-foot-logo .om-mark-canopy { fill: var(--sage-pale); }
.om-foot-logo small { color: var(--on-dark-muted); }
.om-foot-blurb { max-width: 38ch; }
.om-foot-lic { color: var(--on-dark); font-size: 14px; }
.om .k-footer h4 { font: 400 19px var(--font-display); color: var(--on-dark); }
.om .k-callbar { border-radius: 999px; }
.om .k-callbar a { border-radius: 999px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .om-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .om-calc-copy { grid-column: 1 / -1; } }
@media (max-width: 960px) {
  .om-head-row, .om-season, .om-ba-grid, .om-about-grid, .om-area-grid, .om-faq-grid, .om-book-grid { grid-template-columns: minmax(0, 1fr); }
  .om-label { display: none; }
  .om-arch { max-width: 460px; aspect-ratio: 4 / 3.4; }
  .om-plant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-about-media { max-width: 480px; }
  .om-owner { right: 8px; }
  .om-stage { aspect-ratio: 4 / 3.3; }
  .om-plan { width: 94%; }
}
@media (max-width: 760px) {
  .om-hero { min-height: 0; }
  .om-hero-bg { object-position: 22% 100%; }
  .om-hero::before { background: linear-gradient(180deg, rgba(242, 237, 223, .9) 0%, rgba(242, 237, 223, .78) 48%, rgba(242, 237, 223, .15) 74%, rgba(242, 237, 223, 0) 84%); }
  .om-hero-inner { padding-bottom: 210px; }
  .om-hero h1 { font-size: clamp(40px, 11.5vw, 56px); }
  .om-hero .k-btn-row .k-btn { flex: 1 1 100%; }
  .om-scroll { display: none; }
  .om-season-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; border-radius: 18px; }
  .om .om-season-tabs button { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 13px; border-radius: 14px; position: relative; }
  .om-season-tabs em { position: absolute; top: -8px; right: 2px; font-size: 9px; padding: 2px 6px; }
  .om-months { gap: 2px; }
  .om-months li { font-size: 10px; }
  .om-plant-grid { grid-template-columns: minmax(0, 1fr); }
  .om-filter-count { margin-left: 0; width: 100%; }
  .om-calc { grid-template-columns: minmax(0, 1fr); }
  .om-facts, .om-spec { grid-template-columns: minmax(0, 1fr); }
  .om-spec div:nth-child(2n) { padding-left: 0; border-left: 0; }
  .om-stage { aspect-ratio: 1 / 1.05; border-radius: 10px; }
  .om-stage-tag { font-size: 12.5px; left: 10px; top: 10px; }
  .om-stage[data-stage="2"] .om-plan { transform: rotateX(48deg) rotateZ(-20deg) scale(1.02) translateY(-2%); }
  .om-lbl text { font-size: 19px; }
  .om .k-map { border-radius: 16px 90px 16px 16px; }
  .om-gal-head { flex-direction: column; gap: 4px; }
}