/* ==========================================================================
   UrbOvan home (v3), editorial layout: full-bleed hero, nurseries,
   4 services, app companion, how it works, spaces, testimonials, CTA band.
   ========================================================================== */
.script { font-family: "Caveat", "Segoe Script", cursive; font-weight: 500; color: var(--forest); line-height: 1.05; }
.h3-section { position: relative; padding: clamp(56px, 7vw, 88px) 0; }
.h3-section.tint { background: linear-gradient(180deg, #f1f4ea 0%, #f6f1e7 100%); }
.h3-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.h3-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.h3-head p { color: var(--muted); margin-top: 8px; max-width: 56ch; }
.btn-pill { border-radius: 999px; }

/* decorative leaf cut-outs (transparent WebP) */
.leaf-deco { position: absolute; z-index: 0; pointer-events: none; user-select: none; filter: drop-shadow(0 10px 18px rgba(20, 40, 28, .18)); }
.h3-section > .container { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.h3-hero { position: relative; overflow: hidden; background: var(--cream); min-height: clamp(560px, 78vh, 700px); display: flex; align-items: center; }
.h3-hero .bg {
  position: absolute; top: 0; right: 0; bottom: 0; width: 64%; height: 100%; overflow: hidden; container-type: size;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 18%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 18%, #000 42%);
}
.h3-hero .container { position: relative; z-index: 1; }
/* hero photo as a "cover" stage (1536x864, focal point 70% 50%) so the hanging pots stay aligned */
.h3-hero .stage {
  --sw: max(100cqw, calc(100cqh * 1.7778));
  position: absolute; width: var(--sw); height: calc(var(--sw) / 1.7778);
  left: calc((100cqw - var(--sw)) * .7); top: calc((100cqh - var(--sw) / 1.7778) * .5);
}
.h3-hero .stage .base { display: block; width: 100%; height: 100%; }
.h3-hero .pot { position: absolute; top: 0; height: auto; will-change: transform; }
.h3-hero .pot-1 { left: 57.617%; width: 10.742%; transform-origin: 48.5% 0; animation: pot-sway 4.6s ease-in-out infinite; }
.h3-hero .pot-2 { left: 72.917%; width: 12.5%; transform-origin: 53% 0; animation: pot-sway 5.4s ease-in-out -1.7s infinite; }
@keyframes pot-sway { 0%, 100% { transform: rotate(-1.8deg); } 50% { transform: rotate(1.8deg); } }
@media (prefers-reduced-motion: reduce) { .h3-hero .pot { animation: none; } }
.h3-hero .copy { max-width: 560px; padding: 40px 0 48px; }
.h3-hero h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; }
.h3-hero h1 .leaf { display: inline-block; width: .62em; height: .62em; vertical-align: .05em; margin-left: .08em; color: var(--leaf); }
.h3-hero .lead { margin: 20px 0 30px; font-size: 1.12rem; color: #3e4a41; }
.h3-hero .hero-actions { margin: 0; }
.h3-hero .note {
  position: absolute; z-index: 1; right: 9%; top: 9%; transform: rotate(-8deg);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.h3-feats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin-top: 38px; }
.h3-feats li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 22px; font-size: .84rem; line-height: 1.3; color: var(--ink); }
.h3-feats li:first-child { padding-left: 0; }
.h3-feats li + li { border-left: 1px solid var(--line-strong); }
.h3-feats .icon { width: 30px; height: 30px; color: var(--forest); stroke-width: 1.5; }

/* ---------- Nurseries ---------- */
.nursery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.nursery-card {
  position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nursery-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.nursery-card .media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sage); }
.nursery-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.nursery-card:hover .media img { transform: scale(1.05); }
.nursery-card .body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 14px 16px 16px; }
.nursery-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }
.nursery-card h3 a::after { content: ""; position: absolute; inset: 0; }
.nursery-card .pill { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--sage-2); color: var(--forest-deep); font-size: .74rem; font-weight: 600; }
.nursery-card .loc { display: flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--muted); grid-column: 1; }
.nursery-card .loc .icon { width: 14px; height: 14px; }
.nursery-card .round-arrow { grid-column: 2; grid-row: 1 / span 3; border: 1px solid var(--line-strong); background: #fff; }
.nursery-card:hover .round-arrow { background: var(--forest); color: #fff; border-color: var(--forest); }
.nursery-card.soon .media img { filter: saturate(.55) brightness(1.05); }
.nursery-card.soon .pill { background: var(--clay-soft); color: var(--clay-deep); }

/* ---------- Services (4) ---------- */
.svc4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.svc4-card {
  position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc4-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.svc4-card .media { position: relative; aspect-ratio: 4 / 3.1; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; background: var(--sage); }
.svc4-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.svc4-card:hover .media img { transform: scale(1.05); }
.svc4-card .badge {
  position: absolute; left: 18px; top: calc(var(--media-h, 0px)); z-index: 2; display: grid; place-items: center;
  width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; background: #fff; color: var(--forest);
  box-shadow: var(--shadow-md); border: 1px solid var(--line);
}
.svc4-card .badge .icon { width: 26px; height: 26px; stroke-width: 1.6; }
.svc4-card .body { display: flex; flex-direction: column; gap: 8px; padding: 36px 20px 22px; flex: 1; position: relative; }
.svc4-card .body .badge { top: 0; }
.svc4-card h3 { font-size: 1.2rem; }
.svc4-card p { font-size: .9rem; color: var(--muted); flex: 1; }
.svc4-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .9rem; font-weight: 600; color: var(--forest); min-height: 32px; }
.svc4-card .go::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.svc4-card .go .icon { transition: transform .2s var(--ease); }
.svc4-card:hover .go .icon { transform: translateX(3px); }
.svc4-more { text-align: center; margin-top: 26px; }

/* ---------- App companion ---------- */
.app-band { position: relative; overflow: hidden; background: linear-gradient(180deg, #eef3e8, #f3f1e6); }
.app-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.app-grid h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.app-grid .sub { font-family: var(--font-display); font-size: 1.2rem; color: var(--forest); margin: 8px 0 14px; }
.app-grid .copy p { color: var(--muted); max-width: 42ch; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.store {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 18px 6px 14px; border-radius: 12px;
  background: #111; color: #fff; line-height: 1.1;
}
.store .icon { width: 24px; height: 24px; }
.store small { display: block; font-size: .66rem; opacity: .75; }
.store b { font-size: .98rem; font-weight: 600; }
.stores-note { margin-top: 10px; font-size: .8rem; color: var(--muted); }

.phone-wrap { position: relative; padding: 20px 30px; }
.phone-wrap .leaf-deco { width: 300px; }
.phone {
  position: relative; z-index: 1; width: 270px; height: 540px; border-radius: 44px; padding: 10px;
  background: #121614; box-shadow: 0 30px 60px rgba(15, 36, 25, .28), inset 0 0 0 2px #2b302d; transform: rotate(-4deg);
}
.phone .screen { position: relative; height: 100%; border-radius: 35px; overflow: hidden; background: #f7f4ec; }
.phone .notch { position: absolute; top: 10px; left: 50%; z-index: 3; width: 86px; height: 24px; border-radius: 20px; background: #121614; transform: translateX(-50%); }
.phone .shot { height: 54%; background: radial-gradient(120% 90% at 50% 20%, #fbf6ec 0%, #e9dfca 100%); display: grid; place-items: end center; }
.phone .shot img { height: 92%; mix-blend-mode: multiply; }
.phone .cam {
  position: absolute; right: 18px; top: calc(54% - 28px); z-index: 2; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 18px; background: var(--forest); color: #fff; box-shadow: var(--shadow-md);
}
.phone .card { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 16px 14px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-sm); }
.phone .card h4 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--forest-deep); }
.phone .ok { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 10px; padding: 3px 10px; border-radius: 999px; background: #e3efdc; color: #2f6a2d; font-size: .74rem; font-weight: 700; }
.phone .ok .icon { width: 14px; height: 14px; stroke-width: 3; }
.phone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .78rem; color: var(--ink); }
.phone li { display: flex; align-items: center; gap: 8px; }
.phone li .icon { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--sage); color: var(--forest); stroke-width: 2.4; }
.phone li .icon.warm { background: #fbecd5; color: #b9771d; }

.app-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.app-feats li { display: flex; align-items: center; gap: 14px; font-size: .95rem; color: var(--ink); }
.app-feats .ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--forest); box-shadow: var(--shadow-sm); }
.app-feats .ic .icon { width: 24px; height: 24px; stroke-width: 1.6; }

/* ---------- How it works ---------- */
.how3 { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: center; }
.how3-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.how3-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.how3-steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 50px; right: -14%; width: 20%; height: 12px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' fill='none' stroke='%235d695f' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1 6h36M32 1l5 5-5 5'/%3E%3C/svg%3E");
}
.how3-ring { position: relative; display: grid; place-items: center; width: 100px; height: 100px; margin-bottom: 10px; border-radius: 50%; border: 1.5px solid var(--forest); background: var(--paper); color: var(--forest); }
.how3-ring .icon { width: 38px; height: 38px; stroke-width: 1.4; }
.how3-ring .n { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--forest); color: #fff; font-size: .8rem; font-weight: 700; }
.how3-steps h3 { font-family: var(--font-body); font-size: .98rem; font-weight: 600; }
.how3-steps p { font-size: .86rem; color: var(--muted); max-width: 22ch; }
.how3-art { position: relative; }
.how3-art img { width: 100%; }
.how3-art .script { position: absolute; right: -6px; top: 4px; font-size: 1.7rem; transform: rotate(-6deg); text-align: right; }

/* ---------- Spaces transformed (dark band) ---------- */
.spaces-band { position: relative; overflow: hidden; background: var(--forest-ink); color: #e6eee3; }
.spaces-band > .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.spaces-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 36, 25, .55), rgba(15, 36, 25, .85)); }
.spaces-band .container { position: relative; z-index: 1; }
.spaces-band h2 { color: #fff; }
.spaces-band .h3-head p { color: #c4d3bf; }
.space-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.space-tile { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
.space-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.space-tile:hover img { transform: scale(1.06); }
.space-tile figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 12px; border-radius: 8px; background: rgba(15, 36, 25, .72); color: #fff; font-size: .82rem; font-weight: 600; backdrop-filter: blur(4px); }

/* ---------- Loved by plant people ---------- */
.love { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.tcard { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); min-height: 210px; }
.tcard .avatar { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--sage); color: var(--forest); font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
.tcard blockquote { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.tcard .who { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); }
.tcard .who b { display: block; color: var(--ink); }
.tcard .stars { display: flex; gap: 2px; }
.tcard .stars .icon { width: 16px; height: 16px; fill: var(--star); stroke: var(--star); }
.tnav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.tnav button.arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--forest); }
.tnav button.arrow:hover { background: var(--forest); color: #fff; }
.tnav .dots { display: flex; gap: 6px; }
.tnav .dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background-color .2s, width .2s; }
.tnav .dots span.on { width: 22px; border-radius: 6px; background: var(--forest); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.fact { display: flex; gap: 12px; align-items: center; }
.fact .ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--forest); background: #fff; }
.fact b { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--forest-deep); line-height: 1.15; }
.fact span { font-size: .84rem; color: var(--muted); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--forest-ink); color: #e6eee3; }
.cta-band > img { position: absolute; top: 0; right: 0; height: 100% !important; width: 62%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); opacity: .9; }
.cta-band .container { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 300px; padding-top: 48px; padding-bottom: 48px; }
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.cta-band p { color: #c4d3bf; margin: 10px 0 24px; }
.cta-band .script { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); transform: rotate(-8deg); text-align: right; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.cta-band + .site-footer { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nursery-grid, .svc4, .space-tiles { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: 1fr auto; }
  .app-feats { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
  .how3 { grid-template-columns: 1fr; }
  .how3-art { display: none; }
}
@media (max-width: 860px) {
  .h3-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .h3-hero .bg { position: relative; width: 100%; height: 300px; flex: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .h3-hero .copy { padding: 8px 0 40px; }
  .h3-hero .note { top: 24px; right: 20px; font-size: 1.5rem; }
  .h3-feats { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .h3-feats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .app-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .app-grid .copy p { margin: 0 auto; }
  .stores { justify-content: center; }
  .app-feats { justify-self: stretch; text-align: left; }
  .how3-steps { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .how3-steps li::after { display: none; }
  .love { grid-template-columns: 1fr; }
  .cta-band > img { width: 100%; opacity: .35; -webkit-mask-image: none; mask-image: none; }
  .cta-band .script { display: none; }
  .leaf-deco { display: none; }
}
@media (max-width: 560px) {
  .nursery-grid, .svc4, .space-tiles, .app-feats { grid-template-columns: 1fr; }
  .h3-head { flex-wrap: wrap; }
  .tcard { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .tcard .who { flex-direction: column; }
  .facts { grid-template-columns: 1fr; }
  .phone { width: 240px; height: 480px; }
}

/* the CTA band replaces the footer's own call to action on this page */
body[data-page="home3"] .site-footer { margin-top: 0; }
body[data-page="home3"] .footer-hero { display: none; }