/* ============================================================================
   CONCEPT 4 — "Botanical" : warm, organic and tactile.
   STRUCTURE (its signature): SOFT ROUNDED everything — an arched hero, a large rounded
   founder image band, services as TWO big rounded warm cards, and an offset "garden" gallery
   where tiles step up and down. Sage green + terracotta on warm cream, an organic Fraunces
   serif with a humanist sans. A LIGHT theme, so the cream wordmark is recoloured to sage via
   a CSS mask. Standalone (layered over style.css).
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Nunito+Sans:wght@400;600;700&display=swap');

:root {
  --dark: #3f4a37 !important;
  --light: #f4efe4 !important;
  --ink: #3c372e !important;
  --muted: #675f54 !important;
  --accent: #c06a44 !important;
  --accent-strong: #a2502f !important;
  --line: rgba(63, 74, 55, .18) !important;
  --heading-font: 'Fraunces', Didot, Georgia, serif !important;
  --body-font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body { background: var(--light); color: var(--ink); }
h1, h2, h3 { font-weight: 500; }

/* --- Arched, soft hero (rounded bottom, warm-green overlay) --- */
.hero.has-image { border-radius: 0 0 48px 48px; padding: 130px 24px; }
.hero.has-image::before { background: linear-gradient(180deg, rgba(46,52,38,.26) 0%, rgba(46,52,38,.6) 100%); }
.hero h1 { font-size: clamp(38px, 5.2vw, 58px); }
.services h2, .gallery h2, .shop h2, .feature-text h2, .contact h2, .stats h2 { font-size: clamp(30px, 3.6vw, 38px); }
.quote blockquote { font-size: clamp(26px, 3.4vw, 34px); }

/* Kickers + nav in the humanist sans */
.nav a { font-family: var(--body-font); font-weight: 600; font-size: 15px; color: var(--ink); }
.nav a:hover, .nav a.active { color: var(--accent-strong); }
.kicker, .shop-tag { color: var(--accent-strong); letter-spacing: 2px; }

/* Logo: recolour the cream wordmark to sage via a mask */
.logo.logo-img { display: block; width: 78px; height: 55px; background-color: var(--dark);
  -webkit-mask: url(assets/logo.png) no-repeat left center / contain; mask: url(assets/logo.png) no-repeat left center / contain; }
.logo.logo-img img { display: none; }

/* Soft, round shapes everywhere */
.tile, .feature-media img, .shop-media, .founder-media img, .founder-media picture,
.card, .shop-card, .post-card, .stats-band, .shop-note, .delivery-item, .step, .tile-card { border-radius: 24px; }
.btn, .shop-btn, .nav-cta { border-radius: 40px; }

/* --- Founder as a large rounded image band (organic, generous) --- */
.founder { padding: 80px 0; background: color-mix(in srgb, var(--dark) 6%, var(--light)); }
.founder-inner { gap: 48px; }
.founder-media img, .founder-media picture { width: 300px; height: 340px; border-radius: 40px; }
.founder-text h2 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 14px; }
.founder-text p { font-size: 17px; }
@media (max-width: 640px) { .founder-media img, .founder-media picture { width: 100%; height: 300px; } }

/* --- Services as TWO big rounded warm cards --- */
.services { background: transparent; padding: 76px 0; }
.grid { grid-template-columns: 1fr 1fr; gap: 22px; }
.card, .shop-card, .post-card {
  background: #fbf8f1; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(63,74,55,.06); padding: 34px 32px;
}
.card:hover, .shop-card:hover { box-shadow: 0 16px 34px rgba(63,74,55,.13); transform: translateY(-3px); }
.card h3 { font-size: 22px; }
.card h3::after { background: var(--accent); width: 44px; }
.card p, .founder-text p, .feature-text p, .intro p, .section-sub, .shop-desc, .contact p { color: var(--muted); }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }

/* --- Offset "garden" gallery: tiles step up and down --- */
.gallery { padding: 60px 0 40px; }
.tiles { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.tile { aspect-ratio: 3 / 4; }
.tile:nth-child(2), .tile:nth-child(5) { transform: translateY(34px); }
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr 1fr; } .tile:nth-child(2), .tile:nth-child(5) { transform: none; } }

/* Feature (weddings): warm band with a big rounded image */
.feature { padding: 40px 0; }
.feature-media img { aspect-ratio: 4 / 5; }

/* Buttons: solid terracotta pill */
.btn, .shop-btn { background: var(--accent-strong); color: #fff; }
.btn:hover, .shop-btn:hover { background: var(--dark); }
.nav-cta { background: var(--accent-strong); color: #fff !important; }
.nav-cta:hover { background: var(--dark); }
.btn-ghost { background: transparent; color: var(--dark); border: 1.5px solid var(--line); }
.hero.has-image .btn { background: var(--accent-strong); }
.hero.has-image .btn:hover { background: #fff; color: var(--dark); }

/* Dark bands in deep sage */
.cta-band, .site-footer { background: var(--dark); }
.stats-band { background: var(--dark); }
.stat-ic { color: color-mix(in srgb, var(--accent) 70%, #fff); }

/* Shop details */
.shop-note { background: #fbf8f1; border-color: var(--line); }
.shop-badge { background: rgba(162,80,47,.9); }
.quote cite { color: var(--accent-strong); }
.contact .details a { color: var(--dark); }