/* ═══════════════════════════════════════════════════════════════════════════
   FAZLEY — DESIGN: BOTANIC  [data-design='botanic']
   Organic, warm, human. A studio that feels like a sunlit workshop, not a
   server room: cream paper, forest green and peach, soft blob shapes behind
   the hero and CTA, cards that sit a fraction of a degree off square and
   straighten when you reach for them, a header that ends on a curve and a
   footer that ends on one too. The organic feel comes from geometry and
   warmth — there is no decoration in this file, only shape.

   Scoping/specificity contract (same as the other design files): every token
   set in the light block is restated in the dark block, because
   html[data-design='botanic'] (0,1,1) outranks brand.css's [data-theme='dark']
   (0,1,0) — any colour left out of the dark block would bleed cream into the
   candle-lit theme. The scoped .btn below out-specifies base variants, so all
   variants are re-declared. No !important anywhere.

   Motion: every tilt lives inside a prefers-reduced-motion: no-preference
   guard — reduced motion means the cards sit square, not that they snap.
   brand.css additionally zeroes all transition durations globally.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens — light (cream paper, warm ink, green + peach accents) ───────── */

html[data-design='botanic'] {
  /* Warm cream ground; surfaces are a touch lighter, like fresh paper laid on
     a worn workbench. All neutrals lean yellow-brown, never grey. */
  --bg: #faf6ee;
  --bg-2: #f4eedd;
  --surface: #fffdf6;
  --surface-2: #f6f0e1;
  --surface-3: #ede4d0;
  --line: rgba(60, 50, 26, 0.13);
  --line-strong: rgba(60, 50, 26, 0.25);
  --text: #1c1a14;
  --text-2: #48422f;
  --muted: #6b6350;  /* ≈5:1 on cream — safe at caption sizes */
  --faint: #7d7460;  /* ≈4.5:1 — meta lines and fine print stop here */

  /* The admin's brand (forest green by recommendation) keeps white text. */
  --brand-ink: #ffffff;

  /* Extra-round everything. Pills stay pills. */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows are warm — a brown-tinted dusk, not a grey server-room haze. */
  --shadow-sm: 0 1px 2px rgba(62, 46, 16, 0.06);
  --shadow: 0 14px 34px -18px rgba(62, 46, 16, 0.28);
  --shadow-lg: 0 30px 70px -32px rgba(62, 46, 16, 0.36);

  /* One blob to rule them all: the same organic ellipse is stamped behind the
     hero, the stats and the CTA, so the shapes read as one hand. */
  --bt-blob-shape: 46% 54% 60% 40% / 50% 42% 58% 50%;
  --bt-blob-1: color-mix(in srgb, var(--brand) 9%, transparent);
  --bt-blob-2: color-mix(in srgb, var(--brand-2) 10%, transparent);

  /* The deep-green slab the CTA sits on, and the cream that sits on it.
     Derived from the seed so an admin recolour keeps the theme coherent. */
  --bt-green-deep: color-mix(in srgb, var(--brand) 80%, #10240f);
  --bt-on-deep: #f6f1e2;
  --bt-on-deep-soft: rgba(246, 241, 226, 0.78);

  /* Footer: green-ink, cream text. A separate token from the CTA slab so the
     page ends darker than its loudest panel. */
  --bt-footer-bg: #1b2a1c;
  --bt-on-footer: #f3eedd;
  --bt-on-footer-soft: rgba(243, 238, 221, 0.74);
  --bt-on-footer-faint: rgba(243, 238, 221, 0.52);
  --bt-footer-line: rgba(243, 238, 221, 0.16);

  /* Third colour in the stat rotation — a warm amber between the accents. */
  --bt-amber: #a2740f;

  /* Ink for text sitting on the peach accent. The recommended peach carries
     ≈5.5:1 against this; if an admin swaps in a dark accent, the accent
     button is the one control to re-check. */
  --bt-on-accent: #26190a;
}

/* ── Tokens — dark (candle-lit workshop: warm near-black, cream type) ────── */

html[data-design='botanic'][data-theme='dark'] {
  --bg: #171510;
  --bg-2: #131109;
  --surface: #1f1c15;
  --surface-2: #26221a;
  --surface-3: #2f2a20;
  --line: rgba(239, 233, 219, 0.11);
  --line-strong: rgba(239, 233, 219, 0.23);
  --text: #efe9db;
  --text-2: #cfc7b3;
  --muted: #a79d85;  /* ≈6:1 on the ground */
  --faint: #948a71;  /* ≈4.6:1 — still legible on raised surfaces */

  /* Greens lifted toward cream (not white) so AA holds without going minty.
     Because these are restated here, they also feed brand.css's --brand-soft
     and --brand-line, which resolve against the element's computed --brand. */
  --brand: color-mix(in srgb, var(--brand-seed) 60%, #f0ecd9);
  --brand-2: color-mix(in srgb, var(--accent-seed) 68%, #ffe6c7);
  --brand-ink: #101c0e;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 70px -32px rgba(0, 0, 0, 0.75);

  /* Blobs muted — moonlight through the same window. */
  --bt-blob-shape: 46% 54% 60% 40% / 50% 42% 58% 50%;
  --bt-blob-1: color-mix(in srgb, var(--brand) 6%, transparent);
  --bt-blob-2: color-mix(in srgb, var(--brand-2) 7%, transparent);

  /* The slab keys off the SEED, not the lifted --brand, or the CTA would wash
     out to a mid-green the cream text can't sit on. */
  --bt-green-deep: color-mix(in srgb, var(--brand-seed) 58%, #0d1a0c);
  --bt-on-deep: #f2edde;
  --bt-on-deep-soft: rgba(242, 237, 222, 0.75);

  --bt-footer-bg: #141c12;
  --bt-on-footer: #ece7d8;
  --bt-on-footer-soft: rgba(236, 231, 216, 0.72);
  --bt-on-footer-faint: rgba(236, 231, 216, 0.5);
  --bt-footer-line: rgba(236, 231, 216, 0.14);

  --bt-amber: #d5a54c;
  --bt-on-accent: #26190a;
}

/* ── Base type, focus and small marks ────────────────────────────────────── */

/* The characterful serif (Fraunces by recommendation) breathes better with a
   hair less negative tracking than the base grotesk assumes. */
[data-design='botanic'] .display { letter-spacing: -0.02em; line-height: 1.05; }

/* The eyebrow's tick becomes a small leaf — two round corners, two sharp.
   Geometry, not clip-art. */
[data-design='botanic'] .eyebrow { color: var(--muted); }
[data-design='botanic'] .eyebrow::before {
  width: 1.05em;
  height: 0.55em;
  background: var(--brand);
  border-radius: 999px 2px 999px 2px;
  opacity: 0.85;
}

/* Round focus ring in the brand green, offset off the element. Everything
   here is rounded; the ring should be too. */
[data-design='botanic'] :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Section heads get a short hand-drawn-feel underline: a garland of arc caps
   from one repeating radial gradient — no SVG, recolours with the theme. The
   arcs are drawn slightly wider than their tile so neighbours join at the
   seam and the run reads as a single wavy stroke. */
[data-design='botanic'] .section-head h2::after,
[data-design='botanic'] h2.section-head::after {
  content: '';
  display: block;
  width: 4.75rem;
  height: 6px;
  margin-top: 0.7rem;
  --wave-ink: var(--brand-2);
  background: radial-gradient(circle 8px at 50% 8px,
      transparent 4.2px, var(--wave-ink) 4.6px 7px, transparent 7.4px)
    0 0 / 12px 6px repeat-x;
}
[data-design='botanic'] .section-head.center h2::after,
[data-design='botanic'] h2.section-head.center::after { margin-inline: auto; }

/* ── Announcement bar ────────────────────────────────────────────────────── */

[data-design='botanic'] .announce {
  background: var(--bt-green-deep);
  color: var(--bt-on-deep);
}

/* ── Header: cream bar with a curved bottom edge ─────────────────────────────
   The bar keeps the base file's sticky/backdrop behaviour but ends on a curve
   with a soft warm shadow — the page starts the way it will end (the footer
   answers with rounded TOP corners). Nav links become leaf-chips on hover. */

[data-design='botanic'] .site-header {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 0;
  border-radius: 0 0 26px 26px;
  box-shadow: var(--shadow-sm);
}
[data-design='botanic'] .site-header.is-scrolled {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

/* Leaf-chips: the same two-round/two-sharp corner treatment as the eyebrow
   tick, filled with soft green. Active state holds the fill; the base file's
   underline bar is retired — the chip IS the marker here. */
[data-design='botanic'] .nav-link { border-radius: 1.1em 0.4em 1.1em 0.4em; }
[data-design='botanic'] .nav-link:hover {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
[data-design='botanic'] .nav-link.is-active {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--brand);
}
[data-design='botanic'] .nav-link.is-active::after { display: none; }

[data-design='botanic'] .nav-menu {
  border-radius: 18px;
  padding: 0.5rem;
  border-color: var(--line);
  box-shadow: var(--shadow-lg);
}
[data-design='botanic'] .nav-menu a { border-radius: 12px; }
[data-design='botanic'] .nav-menu a:hover {
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  color: var(--brand);
}

/* Utility buttons in the bar go fully round to match the pills. */
[data-design='botanic'] .icon-btn { border-radius: 999px; background: var(--surface-2); }
[data-design='botanic'] .icon-btn:hover { color: var(--brand); border-color: var(--brand-line); }

[data-design='botanic'] .mobile-nav { background: var(--bg); }

/* ── Hero: cream field with soft blob shapes behind the type ───────────────
   Two large organic ellipses — one green, one peach — drift in from opposite
   corners at single-digit opacities. Overflow hidden keeps them cropped to
   the section; the container is lifted above them. The base file's hard
   bottom rule is dropped: this theme doesn't end sections with a ruler. */

[data-design='botanic'] .hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
}
[data-design='botanic'] .hero::before,
[data-design='botanic'] .hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--bt-blob-shape);
}
[data-design='botanic'] .hero::before {
  width: min(560px, 64vw);
  height: min(500px, 56vw);
  right: -160px;
  top: -140px;
  background: var(--bt-blob-1);
  transform: rotate(9deg);
}
[data-design='botanic'] .hero::after {
  width: min(430px, 54vw);
  height: min(380px, 46vw);
  left: -150px;
  bottom: -170px;
  background: var(--bt-blob-2);
  transform: rotate(-14deg);
}
[data-design='botanic'] .hero > .container { position: relative; z-index: 1; }

/* The standfirst keeps its rule but the rule warms up. */
[data-design='botanic'] .hero-sub { border-top-color: var(--brand-line); }
[data-design='botanic'] .hero-badges { border-top-color: var(--line); }

[data-design='botanic'] .hero-visual {
  border-radius: 18px;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

/* ── Buttons: full pills ─────────────────────────────────────────────────────
   The scoped .btn (0,2,0) out-specifies every base variant (0,1,0), so all
   variants are restated here, not just the ones that change. */

[data-design='botanic'] .btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.72em 1.5em;
  transition: transform var(--fast), background var(--fast),
    border-color var(--fast), box-shadow var(--fast), color var(--fast);
}
[data-design='botanic'] .btn:hover { transform: translateY(-1px); }
[data-design='botanic'] .btn:active { transform: translateY(0); }

/* Primary: forest green, white type, a soft green ground-shadow. The hover
   mixes toward --text, which darkens in light mode and lifts in dark — one
   rule, both themes. */
[data-design='botanic'] .btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--brand) 50%, transparent);
}
[data-design='botanic'] .btn-primary:hover {
  background: color-mix(in srgb, var(--brand) 84%, var(--text));
  border-color: color-mix(in srgb, var(--brand) 84%, var(--text));
}

/* Accent: peach with warm ink text — the recommended accent carries ≈5.5:1;
   white on it would not. */
[data-design='botanic'] .btn-accent {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: var(--bt-on-accent);
}
[data-design='botanic'] .btn-accent:hover {
  background: color-mix(in srgb, var(--brand-2) 86%, var(--text));
  border-color: color-mix(in srgb, var(--brand-2) 86%, var(--text));
}

[data-design='botanic'] .btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
}
[data-design='botanic'] .btn-ghost:hover {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand);
}

[data-design='botanic'] .btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
[data-design='botanic'] .btn-quiet:hover {
  background: var(--surface-2);
  color: var(--text);
  transform: none;
}

[data-design='botanic'] .btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}
[data-design='botanic'] .btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, var(--text)); }

/* Pills need a touch more room at the small sizes or the caps look pinched. */
[data-design='botanic'] .btn-sm { padding: 0.5em 1.1em; font-size: var(--step--2); }
[data-design='botanic'] .btn-lg { padding: 0.9em 1.9em; font-size: var(--step-0); }

/* ── Cards: soft chrome, gently tilted ──────────────────────────────────────
   The four grid cards alternate a fraction of a degree off square — pinned to
   a corkboard by hand, not typeset. The tilt is furniture, not funhouse:
   under a degree either way, straightening with a lift on hover or keyboard
   focus. All of it sits inside the motion guard further down; with reduced
   motion the cards are simply square. */

[data-design='botanic'] .card,
[data-design='botanic'] .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
[data-design='botanic'] .card-hover:hover {
  border-color: var(--brand-line);
  box-shadow: var(--shadow);
}

[data-design='botanic'] .post-card,
[data-design='botanic'] .showcase-card,
[data-design='botanic'] .feature-card,
[data-design='botanic'] .quote-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--base), box-shadow var(--base), border-color var(--base);
}
[data-design='botanic'] .post-card:hover,
[data-design='botanic'] .showcase-card:hover,
[data-design='botanic'] .feature-card:hover,
[data-design='botanic'] .quote-card:hover {
  border-color: var(--brand-line);
  box-shadow: var(--shadow);
}

/* Post cards are chromeless in the base file; tilting a naked flex column
   looks broken, so they earn a plate here. */
[data-design='botanic'] .post-card { padding: 1rem 1rem 1.35rem; }
[data-design='botanic'] .post-card-media { border-radius: 16px; }

/* Feature cards trade the base file's printed top-rule for the plate, and
   the icon sits in a small blob — the hero's shape at teacup scale. Icon
   fills rotate green → peach → amber down the grid. */
[data-design='botanic'] .feature-card { padding: 1.6rem 1.5rem 1.7rem; }
[data-design='botanic'] .feature-icon {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: var(--bt-blob-shape);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
}
[data-design='botanic'] .feature-card:nth-child(3n + 2) .feature-icon {
  background: color-mix(in srgb, var(--brand-2) 14%, transparent);
  color: color-mix(in srgb, var(--brand-2) 80%, var(--text));
}
[data-design='botanic'] .feature-card:nth-child(3n + 3) .feature-icon {
  background: color-mix(in srgb, var(--bt-amber) 14%, transparent);
  color: var(--bt-amber);
}

/* Showcase cards keep their structure, rounder. */
[data-design='botanic'] .showcase-card { overflow: hidden; }
[data-design='botanic'] .showcase-price { color: var(--brand); }

/* Quotes read in the studio's own voice: the display serif, italic. */
[data-design='botanic'] .quote-card { padding: 1.75rem; }
[data-design='botanic'] .quote-mark { color: var(--brand-2); opacity: 0.7; }
[data-design='botanic'] .quote-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text);
}

/* Remaining card species: round, not tilted — pricing and people should sit
   straight even in a warm room. */
[data-design='botanic'] .price-card { border-radius: 22px; }
[data-design='botanic'] .price-card.is-featured {
  border-color: var(--brand-line);
  background: linear-gradient(180deg, var(--brand-soft), transparent 45%), var(--surface);
  box-shadow: var(--shadow);
}
[data-design='botanic'] .team-card .avatar { border-radius: var(--bt-blob-shape); }
[data-design='botanic'] .team-card .avatar img { border-radius: 0; }

/* ── Stats: a cream card with a blob accent ──────────────────────────────────
   The base file's 1px-gap grid trick becomes one warm plate; a peach blob
   peeks in from the corner behind the numbers. Values rotate through the
   three theme colours. */

[data-design='botanic'] .stat-row {
  position: relative;
  overflow: hidden;
  gap: 0;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
[data-design='botanic'] .stat-row::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 300px;
  height: 260px;
  right: -110px;
  top: -110px;
  border-radius: var(--bt-blob-shape);
  background: var(--bt-blob-2);
  transform: rotate(-11deg);
}
[data-design='botanic'] .stat-cell { position: relative; z-index: 1; background: transparent; }
[data-design='botanic'] .stat-cell:nth-child(3n + 1) .stat-value { color: var(--brand); }
[data-design='botanic'] .stat-cell:nth-child(3n + 2) .stat-value {
  color: color-mix(in srgb, var(--brand-2) 82%, var(--text));
}
[data-design='botanic'] .stat-cell:nth-child(3n + 3) .stat-value { color: var(--bt-amber); }
[data-design='botanic'] .stat-value sup { color: var(--muted); }

/* ── Marquee: a warm band, no hard rules ─────────────────────────────────── */

[data-design='botanic'] .marquee { background: var(--bg-2); border-block: 0; }
[data-design='botanic'] .marquee-track span::after { color: var(--brand-2); }

/* ── Splits, galleries, media: everything rounds to 18px ─────────────────── */

[data-design='botanic'] .split-media img,
[data-design='botanic'] .gallery-strip img,
[data-design='botanic'] .prose img { border-radius: 18px; }
[data-design='botanic'] .gallery-grid figure { border-radius: 18px; }
[data-design='botanic'] .article-cover,
[data-design='botanic'] .video-embed { border-radius: 22px; }

/* ── CTA: the deep green slab with a peach glow ──────────────────────────────
   The one saturated moment on the page. Cream type on garden-at-dusk green,
   a peach blob glowing in from the corner, a quieter green one answering from
   the other side. Children are lifted above the pseudo-layers.

   Every selector here carries :not([style]): the page builder's "bare" CTA
   variant strips its own panel with an inline style attribute, and without
   the guard it would inherit cream type and inverted buttons on the cream
   page. Bare panels fall back to plain type instead. */

[data-design='botanic'] .cta-panel:not([style]),
[data-design='botanic'] .cta-panel.cta-accent:not([style]) {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: var(--bt-green-deep);
  color: var(--bt-on-deep);
  box-shadow: var(--shadow-lg);
}
[data-design='botanic'] .cta-panel:not([style])::before,
[data-design='botanic'] .cta-panel:not([style])::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--bt-blob-shape);
}
[data-design='botanic'] .cta-panel:not([style])::before {
  width: 380px;
  height: 330px;
  right: -120px;
  top: -130px;
  background: color-mix(in srgb, var(--brand-2) 20%, transparent);
  transform: rotate(12deg);
}
[data-design='botanic'] .cta-panel:not([style])::after {
  width: 300px;
  height: 260px;
  left: -110px;
  bottom: -120px;
  background: rgba(246, 241, 226, 0.07);
  transform: rotate(-9deg);
}
[data-design='botanic'] .cta-panel:not([style]) > * { position: relative; z-index: 1; }
[data-design='botanic'] .cta-panel:not([style]) h2,
[data-design='botanic'] .cta-panel:not([style]) h3 { color: var(--bt-on-deep); }
[data-design='botanic'] .cta-panel:not([style]) p,
[data-design='botanic'] .cta-panel:not([style]) .lede { color: var(--bt-on-deep-soft); }
[data-design='botanic'] .cta-panel:not([style]) .eyebrow { color: var(--bt-on-deep-soft); }
[data-design='botanic'] .cta-panel:not([style]) .eyebrow::before { background: var(--brand-2); }
[data-design='botanic'] .cta-panel:not([style]) .section-head h2::after,
[data-design='botanic'] .cta-panel:not([style]) h2.section-head::after {
  --wave-ink: var(--brand-2);
}

/* Buttons invert on the slab: cream primary, cream-outline ghost. */
[data-design='botanic'] .cta-panel:not([style]) .btn-primary {
  background: var(--bt-on-deep);
  border-color: var(--bt-on-deep);
  color: #14290f;
  box-shadow: none;
}
[data-design='botanic'] .cta-panel:not([style]) .btn-primary:hover {
  background: rgba(246, 241, 226, 0.9);
  border-color: rgba(246, 241, 226, 0.9);
}
[data-design='botanic'] .cta-panel:not([style]) .btn-ghost,
[data-design='botanic'] .cta-panel:not([style]) .btn-quiet {
  background: transparent;
  border-color: rgba(246, 241, 226, 0.45);
  color: var(--bt-on-deep);
}
[data-design='botanic'] .cta-panel:not([style]) .btn-ghost:hover,
[data-design='botanic'] .cta-panel:not([style]) .btn-quiet:hover {
  background: rgba(246, 241, 226, 0.12);
  border-color: rgba(246, 241, 226, 0.6);
  color: var(--bt-on-deep);
}

/* The booking block drops its cards inside this slab; they become translucent
   cream plates so the green shows through. */
[data-design='botanic'] .cta-panel:not([style]) .booking-type-card {
  background: rgba(246, 241, 226, 0.08);
  border-color: rgba(246, 241, 226, 0.2);
  border-radius: 18px;
  color: var(--bt-on-deep);
}
[data-design='botanic'] .cta-panel:not([style]) .booking-type-card:hover {
  border-color: rgba(246, 241, 226, 0.4);
}
[data-design='botanic'] .cta-panel:not([style]) .booking-type-card .muted,
[data-design='botanic'] .cta-panel:not([style]) .booking-type-card .text-xs {
  color: var(--bt-on-deep-soft);
}

/* ── Forms: soft plates, round corners, green focus ──────────────────────── */

[data-design='botanic'] .input,
[data-design='botanic'] .textarea,
[data-design='botanic'] .select {
  background: var(--surface);
  border-radius: 14px;
  border-color: var(--line-strong);
}
[data-design='botanic'] .input:focus,
[data-design='botanic'] .textarea:focus,
[data-design='botanic'] .select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
  background: var(--surface);
}
[data-design='botanic'] .radio-card { border-radius: 14px; }
[data-design='botanic'] .alert { border-radius: 14px; }

/* ── Catalogue chrome: pills and round plates throughout ─────────────────── */

[data-design='botanic'] .pagination a,
[data-design='botanic'] .pagination span { border-radius: 999px; }
[data-design='botanic'] .filter-bar { border-block: 0; }
[data-design='botanic'] .faq-item { border-radius: 16px; background: var(--surface); }
[data-design='botanic'] .result-thumb { border-radius: 12px; }
[data-design='botanic'] .ticket-msg { border-radius: 18px; }
[data-design='botanic'] .booking-layout { border-radius: var(--radius-lg); }
[data-design='botanic'] .cal-day { border-radius: 12px; }
[data-design='botanic'] .slot { border-radius: 999px; }
[data-design='botanic'] .empty { border-radius: 20px; }
[data-design='botanic'] .cookie-banner { border-radius: 20px; }
[data-design='botanic'] .post-featured { border-radius: 24px; }
[data-design='botanic'] .booking-type-card { border-radius: 18px; }

/* ── Prose: warm reading, green quotes ───────────────────────────────────── */

[data-design='botanic'] .prose blockquote {
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
  border-radius: 0 18px 18px 0;
  padding: 0.85em 1.25em;
}
[data-design='botanic'] .prose code { border-radius: 8px; }
[data-design='botanic'] .prose pre { border-radius: 16px; }

/* ── Footer: green-ink, cream type, the page ends on a curve ─────────────────
   Rounded top corners answer the header's rounded bottom — the whole page is
   bracketed by the same curve. Cream ground shows through at the corners. */

[data-design='botanic'] .site-footer {
  background: var(--bt-footer-bg);
  color: var(--bt-on-footer-soft);
  border-top: 0;
  border-radius: 24px 24px 0 0;
}
[data-design='botanic'] .site-footer .brand-mark { color: var(--bt-on-footer); }
[data-design='botanic'] .site-footer .footer-about { color: var(--bt-on-footer-soft); }
[data-design='botanic'] .site-footer .footer-col h4 { color: var(--bt-on-footer-faint); }
[data-design='botanic'] .site-footer .footer-col a { color: var(--bt-on-footer-soft); }
[data-design='botanic'] .site-footer .footer-col a:hover { color: var(--brand-2); }
[data-design='botanic'] .site-footer .footer-bottom {
  border-top-color: var(--bt-footer-line);
  color: var(--bt-on-footer-faint);
}
[data-design='botanic'] .site-footer .footer-legal a:hover { color: var(--bt-on-footer); }
[data-design='botanic'] .site-footer .social-row a {
  background: rgba(243, 238, 221, 0.06);
  border-color: var(--bt-footer-line);
  color: var(--bt-on-footer-soft);
}
[data-design='botanic'] .site-footer .social-row a:hover {
  color: var(--brand-2);
  border-color: color-mix(in srgb, var(--brand-2) 45%, transparent);
}
[data-design='botanic'] .site-footer .input {
  background: rgba(243, 238, 221, 0.08);
  border-color: rgba(243, 238, 221, 0.25);
  color: var(--bt-on-footer);
}
[data-design='botanic'] .site-footer .input::placeholder { color: var(--bt-on-footer-faint); }
[data-design='botanic'] .site-footer .field-help { color: var(--bt-on-footer-faint); }
[data-design='botanic'] .site-footer .badge {
  background: rgba(243, 238, 221, 0.08);
  border-color: var(--bt-footer-line);
  color: var(--bt-on-footer-soft);
}

/* ── The tilt (all of it) ────────────────────────────────────────────────────
   Every rotation on the page lives in this guard. Reduced motion means the
   cards never leave square — not a faster animation, no tilt at all. Hover
   and focus-within straighten the card with a small lift; those rules sit
   after the nth-child tilts so the cascade resolves in their favour at equal
   specificity. */

@media (prefers-reduced-motion: no-preference) {
  [data-design='botanic'] .post-card:nth-child(odd),
  [data-design='botanic'] .showcase-card:nth-child(odd),
  [data-design='botanic'] .feature-card:nth-child(odd),
  [data-design='botanic'] .quote-card:nth-child(odd) {
    transform: rotate(-0.6deg);
  }
  [data-design='botanic'] .post-card:nth-child(even),
  [data-design='botanic'] .showcase-card:nth-child(even),
  [data-design='botanic'] .feature-card:nth-child(even),
  [data-design='botanic'] .quote-card:nth-child(even) {
    transform: rotate(0.5deg);
  }
  [data-design='botanic'] .post-card:hover,
  [data-design='botanic'] .showcase-card:hover,
  [data-design='botanic'] .feature-card:hover,
  [data-design='botanic'] .quote-card:hover,
  [data-design='botanic'] .post-card:focus-within,
  [data-design='botanic'] .showcase-card:focus-within,
  [data-design='botanic'] .feature-card:focus-within,
  [data-design='botanic'] .quote-card:focus-within {
    transform: rotate(0deg) translateY(-5px);
  }
}

/* Belt and braces alongside brand.css's global kill switch: with reduced
   motion nothing here transitions or transforms, including button lifts. */
@media (prefers-reduced-motion: reduce) {
  [data-design='botanic'] .btn,
  [data-design='botanic'] .post-card,
  [data-design='botanic'] .showcase-card,
  [data-design='botanic'] .feature-card,
  [data-design='botanic'] .quote-card,
  [data-design='botanic'] .price-card { transition: none; }
  [data-design='botanic'] .btn:hover,
  [data-design='botanic'] .btn:active,
  [data-design='botanic'] .post-card:hover,
  [data-design='botanic'] .showcase-card:hover,
  [data-design='botanic'] .feature-card:hover,
  [data-design='botanic'] .quote-card:hover,
  [data-design='botanic'] .price-card:hover { transform: none; }
}

/* ── Phones ──────────────────────────────────────────────────────────────────
   The curves tighten, the blobs shrink so they never swallow a small screen,
   and the stat plate loses some padding. */

@media (max-width: 860px) {
  [data-design='botanic'] .site-header { border-radius: 0 0 18px 18px; }
  [data-design='botanic'] .site-footer { border-radius: 18px 18px 0 0; }
  [data-design='botanic'] .hero::before {
    width: 300px;
    height: 270px;
    right: -120px;
    top: -100px;
  }
  [data-design='botanic'] .hero::after {
    width: 240px;
    height: 210px;
    left: -110px;
    bottom: -120px;
  }
  [data-design='botanic'] .stat-row { padding: 1.1rem 1.2rem; }
  [data-design='botanic'] .cta-panel { border-radius: 22px; }
}