/* =========================================================
     GLOBAL
     ========================================================= */
    html,
    body {
      background: #fcf9f2;
      color: #1c1c18;
      font-family: "Manrope", system-ui, sans-serif;
    }

    body {
      overflow-x: hidden;
    }

    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: #f6f3ec;
    }

    ::-webkit-scrollbar-thumb {
      background: #d8d4cb;
      border-radius: 8px;
    }

    /* =========================================================
     IS-READY GATE — pre-JS / pre-bloom states.
     Nothing animates until JS toggles body.is-ready after window.load
     + 400ms calm pause.
     ========================================================= */
    body:not(.is-ready) .hero-text {
      opacity: 0;
    }

    body:not(.is-ready) .main-flower .flower-stem,
    body:not(.is-ready) .main-flower .flower-core,
    body:not(.is-ready) .main-flower .flower-petal,
    body:not(.is-ready) .garden-flower .gf-stem,
    body:not(.is-ready) .garden-flower .gf-core,
    body:not(.is-ready) .garden-flower .gf-petal {
      opacity: 0;
    }

    body:not(.is-ready) #scroll-cue {
      opacity: 0;
    }

    body:not(.is-ready) .flower-tendril path,
    body:not(.is-ready) .ground-vine path {
      opacity: 0;
    }

    body:not(.is-ready) .flower-tendril .leaf,
    body:not(.is-ready) .ground-vine .leaf {
      opacity: 0;
    }

    /* Hero CTAs fade in after the bloom, gated on the same is-ready signal */
    body:not(.is-ready) .hero-cta-group {
      opacity: 0;
      transform: translateY(8px);
    }

    .hero-cta-group {
      transition: opacity 700ms ease 1500ms, transform 700ms ease 1500ms;
    }

    /* =========================================================
     HERO MAIN FLOWER
     Transform-origin is CENTER (default 50% 50%) — this is what
     gives a proper radial arrangement. With an offset origin the
     rotation pivot sits outside the petal center, so each petal
     lands on a different offset instead of on a true circle.
     The visible "gap" to the core is sealed by: (a) the teardrop
     shape whose inner tip protrudes past the box edge, (b) z-index
     so petals tuck under the core, and (c) a larger circular core.
     GSAP's scale(0)→1 bloom now collapses each petal to its own
     center (still a clean pop-in), instead of toward flower center.
     ========================================================= */
    .main-flower .flower-petal {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      border-radius: 50%;
      transform-origin: 50% 50%;
      transform: translate(-50%, -50%) var(--petal-rotate) translateY(var(--petal-dist));
    }

    .petal-top {
      --petal-rotate: rotate(0deg);
      --petal-dist: -30px;
    }

    .petal-top-right {
      --petal-rotate: rotate(45deg);
      --petal-dist: -30px;
    }

    .petal-right {
      --petal-rotate: rotate(90deg);
      --petal-dist: -30px;
    }

    .petal-bottom-right {
      --petal-rotate: rotate(135deg);
      --petal-dist: -30px;
    }

    .petal-bottom {
      --petal-rotate: rotate(180deg);
      --petal-dist: -30px;
    }

    .petal-bottom-left {
      --petal-rotate: rotate(225deg);
      --petal-dist: -30px;
    }

    .petal-left {
      --petal-rotate: rotate(270deg);
      --petal-dist: -30px;
    }

    .petal-top-left {
      --petal-rotate: rotate(315deg);
      --petal-dist: -30px;
    }

    /* Main-flower palette: 2 clearly distinct blue tones, alternating */
    .main-flower .flower-petal.tone-dark {
      background: #8ab4f8;
    }

    .main-flower .flower-petal.tone-light {
      background: #a8c7fa;
    }

    /* Gentle organic lean for the stem (rotates around its base) */
    .main-flower .flower-stem {
      transform: rotate(-3deg);
      transform-origin: bottom center;
    }

    .hero-text {
      font-family: "Plus Jakarta Sans", system-ui, sans-serif;
      letter-spacing: -0.03em;
    }

    .hero-subtitle {
      font-family: "Manrope", system-ui, sans-serif;
      color: #5d6258;
      letter-spacing: 0.005em;
    }

    /* Scroll cue — stronger contrast + arrow */
    #scroll-cue {
      color: #5d6258;
      font-weight: 600;
      opacity: 0.6;
    }

    #scroll-cue .scroll-arrow {
      width: 14px;
      height: 14px;
      margin-top: 6px;
      stroke: #5d6258;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      animation: scroll-bob 2.2s ease-in-out infinite;
    }

    @keyframes scroll-bob {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(3px);
      }
    }

    /* =========================================================
     GARDEN BED — 7 supporting flowers along the baseline.
     Container sits in bottom 38% of #hero; flowers absolutely
     positioned by left% / bottom% so they reflow at any width.
     (Layout via Tailwind utility classes on the element)
     ========================================================= */

    .garden-flower {
      position: absolute;
      pointer-events: none;
      transform: translateX(-50%);
      will-change: transform, opacity;
    }

    .garden-flower.size-xs {
      width: 44px;
      height: 76px;
    }

    .garden-flower.size-sm {
      width: 60px;
      height: 100px;
    }

    .garden-flower.size-md {
      width: 84px;
      height: 140px;
    }

    .garden-flower .gf-stem {
      position: absolute;
      bottom: 28px;
      left: 50%;
      width: 2.5px;
      background: #4c644e;
      border-radius: 2px;
      transform: translateX(-50%);
      transform-origin: bottom center;
    }

    .garden-flower.size-xs .gf-stem {
      height: 36px;
      width: 2px;
    }

    .garden-flower.size-sm .gf-stem {
      height: 50px;
    }

    .garden-flower.size-md .gf-stem {
      height: 80px;
    }

    .garden-flower .gf-stem-leaf {
      position: absolute;
      width: 8px;
      height: 14px;
      background: #b2ceb3;
      border-radius: 50% 0 50% 0;
      opacity: 0.8;
    }

    .garden-flower .gf-stem-leaf.left {
      left: -7px;
      top: 60%;
      transform: rotate(-30deg);
    }

    .garden-flower .gf-stem-leaf.right {
      right: -7px;
      top: 35%;
      transform: rotate(30deg);
    }

    .garden-flower .gf-head {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .garden-flower.size-xs .gf-head {
      bottom: 48px;
      width: 28px;
      height: 28px;
    }

    .garden-flower.size-sm .gf-head {
      bottom: 64px;
      width: 40px;
      height: 40px;
    }

    .garden-flower.size-md .gf-head {
      bottom: 96px;
      width: 56px;
      height: 56px;
    }

    .garden-flower .gf-core {
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      background: #fde293;
      transform: translate(-50%, -50%);
      transform-origin: center center;
      z-index: 2;
    }

    .garden-flower.size-xs .gf-core {
      width: 11px;
      height: 11px;
    }

    .garden-flower.size-sm .gf-core {
      width: 16px;
      height: 16px;
    }

    .garden-flower.size-md .gf-core {
      width: 22px;
      height: 22px;
    }

    /* Petals: organic teardrop, tucked behind the core via z-index.
     Transform-origin is CENTER so the radial layout is correct
     (rotation pivots around each petal's centroid, not below it). */
    .garden-flower .gf-petal {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      border-radius: 50% 50% 30% 30% / 62% 62% 38% 38%;
      transform-origin: 50% 50%;
    }

    .garden-flower.size-xs .gf-petal {
      width: 8px;
      height: 14px;
      transform: translate(-50%, -50%) var(--gp-rotate) translateY(-7px);
    }

    .garden-flower.size-sm .gf-petal {
      width: 12px;
      height: 18px;
      transform: translate(-50%, -50%) var(--gp-rotate) translateY(-9px);
    }

    .garden-flower.size-md .gf-petal {
      width: 16px;
      height: 24px;
      transform: translate(-50%, -50%) var(--gp-rotate) translateY(-12px);
    }

    .gf-petal.gp-1 {
      --gp-rotate: rotate(0deg);
    }

    .gf-petal.gp-2 {
      --gp-rotate: rotate(72deg);
    }

    .gf-petal.gp-3 {
      --gp-rotate: rotate(144deg);
    }

    .gf-petal.gp-4 {
      --gp-rotate: rotate(216deg);
    }

    .gf-petal.gp-5 {
      --gp-rotate: rotate(288deg);
    }

    /* Cohesive palette — all garden flowers share the main flower's
     two-tone sage scheme, with a single gold accent variant that
     echoes the yellow core. No rose / terracotta / olive scatter. */
    .garden-flower.hue-sage .gf-petal {
      background: #4c644e;
    }

    .garden-flower.hue-sage .gf-petal.gp-2,
    .garden-flower.hue-sage .gf-petal.gp-4 {
      background: #b2ceb3;
    }

    .garden-flower.hue-sage-pale .gf-petal {
      background: #b2ceb3;
    }

    .garden-flower.hue-sage-pale .gf-petal.gp-2,
    .garden-flower.hue-sage-pale .gf-petal.gp-4 {
      background: #d4e3d4;
    }

    .garden-flower.hue-gold .gf-petal {
      background: #c9a96b;
    }

    .garden-flower.hue-gold .gf-petal.gp-2,
    .garden-flower.hue-gold .gf-petal.gp-4 {
      background: #dfc28e;
    }

    .garden-flower.hue-rose .gf-petal {
      background: #b97a7a;
    }

    .garden-flower.hue-rose .gf-petal.gp-2,
    .garden-flower.hue-rose .gf-petal.gp-4 {
      background: #d2a0a0;
    }

    /* Cores: all warm cream-yellow to echo the main flower */
    .garden-flower .gf-core {
      background: #fde293;
    }

    .garden-flower.hue-gold .gf-core {
      background: #fef0c0;
    }

    /* =========================================================
     FLOWER TENDRILS — short SVG vines anchored to each flower's
     base. viewBox clipping guarantees they never escape.
     ========================================================= */
    .flower-tendril {
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
      overflow: visible;
      pointer-events: none;
    }

    .garden-flower.size-xs .flower-tendril {
      width: 72px;
      height: 28px;
    }

    .garden-flower.size-sm .flower-tendril {
      width: 100px;
      height: 36px;
    }

    .garden-flower.size-md .flower-tendril {
      width: 130px;
      height: 44px;
    }

    .flower-tendril path {
      fill: none;
      stroke: #7fa181;
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.7;
    }

    .flower-tendril .leaf {
      fill: #b2ceb3;
      opacity: 0;
    }

    /* =========================================================
     FLOWER DOWN-VINES — vertical stem-growth that draws downward
     from each flower's stem base on scroll, ending at the ground
     vines. SVG height/viewBox/path d are computed per-flower in
     JS so each vine reaches exactly to the ground-vine band. The
     container's overflow is visible; the hero clips at its bottom.
     ========================================================= */
    .flower-downvine {
      position: absolute;
      top: calc(100% - 28px);
      /* anchors at the bottom of the gf-stem (which has bottom: 28px) */
      left: 50%;
      width: 30px;
      transform: translateX(-50%);
      overflow: visible;
      pointer-events: none;
      z-index: 0;
      /* sits behind the flower head + tendril */
    }

    .flower-downvine path {
      fill: none;
      stroke: #7fa181;
      stroke-width: 1.3;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.55;
    }

    /* =========================================================
     GROUND VINES — long arcs along the very bottom of garden-bed
     that connect flower bases. Never rise above bottom 10% of bed.
     ========================================================= */
    .ground-vine {
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      height: 60px;
      pointer-events: none;
    }

    .ground-vine path {
      fill: none;
      stroke: #5a7a5c;
      stroke-width: 2.4;
      stroke-linecap: round;
      opacity: 0.85;
    }

    .ground-vine .leaf {
      fill: #b2ceb3;
      opacity: 0;
    }

    /* =========================================================
     INTRO PHASE — beat fade-up + sticky photo (existing)
     ========================================================= */
    .intro-beat {
      opacity: 0;
      transform: translateY(24px);
      will-change: opacity, transform;
    }

    .intro-photo-wrap {
      opacity: 0;
      will-change: opacity;
    }

    .intro-photo {
      background:
        radial-gradient(ellipse at 50% 35%, #d3b790 0%, #b08a5e 45%, #6f4f33 100%);
      box-shadow:
        0 30px 80px -20px rgba(60, 40, 20, 0.25),
        inset 0 -40px 80px rgba(255, 240, 220, 0.25);
    }

    /* Beat flourishes — small per-beat sprigs that draw once on entry. */
    .beat-flourish {
      width: 130px;
      height: 90px;
      pointer-events: none;
      overflow: visible;
    }

    .beat-flourish path {
      fill: none;
      stroke: #7fa181;
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.7;
    }

    .beat-flourish .leaf {
      fill: #b2ceb3;
      opacity: 0;
    }

    .beat-flourish .bud {
      fill: #c89090;
      opacity: 0;
    }

    /* Photo-wrap vines — kept SVG paths, now draw on entry not scroll.
       These envelop the photo and ARE allowed to cross in front of it
       (that's the wrap effect). The wider .portrait-vines-wrap system
       stays behind the photo — see its block below. */
    .photo-vines .pv-path {
      fill: none;
      stroke: #7fa181;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.8;
    }

    .photo-vines .pv-leaf {
      fill: #b2ceb3;
      opacity: 0;
    }

    /* =========================================================
     PORTRAIT VINES — second scroll-driven phase. Thicker vines
     that grow downward from the hero ground-vine band, envelop
     the portrait placeholder, and extend down the viewport edges
     while the user scrolls through the intro beats. They sit
     BEHIND the photo-wrap (z-10) at z-[5] so vines frame the
     portrait from behind and never cover the image content.
     Stroke uses vector-effect:non-scaling-stroke
     to keep weight consistent at any viewport size.
     ========================================================= */
    .portrait-vines-wrap {
      will-change: opacity;
    }

    .pv-vine {
      fill: none;
      stroke: #5a7a5c;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.7;
      vector-effect: non-scaling-stroke;
    }

    .pv-vine--thin {
      stroke-width: 1.8;
      opacity: 0.55;
    }

    .pv-vine--edge {
      stroke-width: 2.0;
      opacity: 0.6;
    }

    .pv-vine--frame {
      stroke-width: 2.3;
      opacity: 0.75;
    }

    /* Flower-section stem — single thicker stem belonging to the
       services section, rendered INSIDE .svc-flower-svg so it can
       use the flower SVG's coordinate system and arrive exactly at
       the yellow core at (200, 200). overflow:visible on the flower
       SVG lets the stem extend past the SVG bounds to the viewport
       edge across all viewport widths. */
    .svc-flower-svg #svc-flower-stem {
      fill: none;
      stroke: #4c644e;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.85;
    }

    .svc-flower-svg .svc-stem-leaf {
      fill: #7fa181;
      opacity: 0;
    }

    .pv-vine-leaf {
      fill: #7fa181;
      opacity: 0;
    }

    .pv-vine-bud {
      fill: #c9a96b;
      opacity: 0;
    }

    /* =========================================================
     MOBILE-ONLY INTRO VINES — hidden on desktop. The mobile media
     query un-hides this and sizes the bands/verts; JS scrub lives
     in the mobile matchMedia block of js/site.js. Mirrors the visual
     language of the hero ground-vine band so the intro feels framed
     by the same plant system on phones.
     ========================================================= */
    .intro-mobile-vines {
      display: none;
    }

    /* =========================================================
     SERVICES — second flower (rotation logic unchanged)
     ========================================================= */
    #services {
      background: #fcf9f2;
    }

    .svc-flower-svg {
      overflow: visible;
    }

    .svc-petal { fill: #8ab4f8; }
    .svc-petal[data-i="1"], .svc-petal[data-i="5"] { fill: #a8c7fa; }
    .svc-petal[data-i="2"], .svc-petal[data-i="6"] { fill: #7099e4; }
    .svc-petal[data-i="3"], .svc-petal[data-i="7"] { fill: #bcd0f6; }

    .svc-core-outer {
      fill: #f4e6c9;
    }

    .svc-core-inner {
      fill: #e8cda1;
    }

    .svc-text-block {
      opacity: 0;
      will-change: opacity, transform;
    }


    /* Services echo-bed (3 mini flowers along the pinned panel's bottom) */
    .svc-echo-bed {
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      height: 10%;
      pointer-events: none;
    }

    /* =========================================================
     HERO CTAs — primary (sage pill) + secondary (outlined pill).
     Same visual language as buttons used across the rest of the site.
     ========================================================= */
    .hero-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.95rem;
      padding: 0.85rem 1.4rem;
      line-height: 1;
      transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
      white-space: nowrap;
    }

    .hero-btn-primary {
      background: #4c644e;
      color: #fcf9f2;
      border: 1px solid #4c644e;
    }

    .hero-btn-primary:hover {
      background: #3a4f3c;
      border-color: #3a4f3c;
      transform: translateY(-1px);
    }

    .hero-btn-secondary {
      background: transparent;
      color: #1c1c18;
      border: 1px solid #d8d4cb;
    }

    .hero-btn-secondary:hover {
      background: #f6f3ec;
      border-color: #1c1c18;
    }

    /* =========================================================
     CONTACT — aligned with contact.html (source of truth)
     ========================================================= */
    .input-soft {
      width: 100%;
      background: #fcf9f2;
      border: 1px solid #d8d4cb;
      border-radius: 12px;
      padding: 0.85rem 1rem;
      color: #1c1c18;
      font-family: "Manrope", system-ui, sans-serif;
      font-size: 0.95rem;
      transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
    }

    .input-soft::placeholder {
      color: #9a9d95;
    }

    .input-soft:focus,
    .input-soft:focus-visible {
      outline: 3px solid rgba(28, 28, 24, 0.88) !important;
      outline-offset: 2px !important;
      border-color: #4c644e !important;
      background: #ffffff;
      box-shadow: 0 0 0 5px rgba(76, 100, 78, 0.16) !important;
    }

    textarea.input-soft {
      resize: vertical;
      min-height: 140px;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: #4c644e;
      color: #fcf9f2;
      padding: 0.95rem 1.6rem;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.95rem;
      transition: background 200ms ease, transform 200ms ease;
    }

    .btn-primary:hover {
      background: #3a4f3c;
      transform: translateY(-1px);
    }

    .hero-btn:focus-visible,
    .btn-primary:focus-visible,
    .channel:focus-visible,
    #contact a:focus-visible,
    #contact button:focus-visible {
      outline: 3px solid rgba(28, 28, 24, 0.88);
      outline-offset: 4px;
    }

    /* Contact channels (mirrors contact.html) */
    .channel {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      padding: 1.1rem 1.2rem;
      border: 1px solid #e6e2d6;
      border-radius: 14px;
      background: #fcf9f2;
      transition: border-color 200ms ease, transform 200ms ease;
    }

    .channel:hover {
      border-color: #4c644e;
      transform: translateY(-1px);
    }

    .channel-label {
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #5f655d;
    }

    .channel-value {
      color: #1c1c18;
      font-weight: 600;
    }

    .audit-callout {
      background: linear-gradient(180deg, #f0eee7 0%, #f6f3ec 100%);
      border: 1px solid #e6e2d6;
      border-radius: 18px;
      padding: 1.75rem;
    }

    /* Contact corner sprigs */
    .contact-corner {
      position: absolute;
      width: 170px;
      height: 170px;
      pointer-events: none;
      overflow: visible;
    }

    .contact-corner.top-left {
      top: 24px;
      left: 24px;
    }

    .contact-corner.bottom-right {
      bottom: 24px;
      right: 24px;
      transform: rotate(180deg);
    }

    .contact-corner path {
      fill: none;
      stroke: #7fa181;
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.55;
    }

    .contact-corner .leaf {
      fill: #b2ceb3;
      opacity: 0;
    }

    /* =========================================================
     HOMEPAGE MOBILE FOUNDATION
     Desktop remains the source of truth. These rules are scoped to the
     homepage body marker and only provide the stable phone baseline that the
     dedicated mobile choreography will build on.
     ========================================================= */
    @media (max-width: 768px), (max-height: 500px), (max-width: 1023px) and (hover: none) and (pointer: coarse) {
      body[data-page="home"] {
        overflow-x: hidden;
      }

      body[data-page="home"] .hero-text {
        font-size: 2.5rem !important;
        transform: none !important;
      }

      body[data-page="home"] .hide-mobile,
      body[data-page="home"] .gf-hide-mobile {
        display: none !important;
      }

      /* Decorative systems that don't fit phone widths cleanly are
         hidden; the hero garden-bed + scroll cue stay so the bottom
         of the hero still has its full floral identity. */
      body[data-page="home"] .portrait-vines-wrap,
      body[data-page="home"] .intro-end-band,
      body[data-page="home"] .svc-echo-bed,
      body[data-page="home"] .contact-corner,
      body[data-page="home"] .flower-downvine {
        display: none !important;
      }

      /* Re-enable wave 2 on mobile so the bed feels fuller around
         the main flower while the outer desktop-only flowers stay
         hidden to avoid viewport overflow on small screens. */
      body[data-page="home"] #hero .garden-bed > .garden-flower[data-wave="2"] {
        display: block !important;
      }

      body[data-page="home"] #hero .garden-bed > .garden-flower {
        transform: translateX(-50%) scale(1);
        transform-origin: 50% 100%;
      }

      /* Symmetric garden arrangement: flowers mirror left/right around
         the main flower. Scales compensate for different base sizes
         (xs 44px, sm 60px, md 84px) so pairs look balanced. */
      body[data-page="home"] #hero .garden-bed > .garden-flower[data-wave="0"] {
        left: 30% !important;
        bottom: 58% !important;
        transform: translateX(-50%) scale(0.95) !important;
      }
      body[data-page="home"] #hero .garden-bed > .garden-flower[data-wave="1"] {
        left: 70% !important;
        bottom: 58% !important;
        transform: translateX(-50%) scale(0.95) !important;
      }
      body[data-page="home"] #hero .garden-bed > .garden-flower[data-wave="4"] {
        left: 14% !important;
        bottom: 36% !important;
        transform: translateX(-50%) scale(0.95) !important;
      }
      body[data-page="home"] #hero .garden-bed > .garden-flower[data-wave="3"] {
        left: 86% !important;
        bottom: 36% !important;
        transform: translateX(-50%) scale(0.95) !important;
      }
      body[data-page="home"] #hero .garden-bed > .garden-flower[data-wave="6"] {
        left: 8% !important;
        bottom: 18% !important;
        transform: translateX(-50%) scale(1.1) !important;
      }
      body[data-page="home"] #hero .garden-bed > .garden-flower[data-wave="5"] {
        left: 92% !important;
        bottom: 18% !important;
        transform: translateX(-50%) scale(0.58) !important;
      }
      body[data-page="home"] #hero .garden-bed > .garden-flower[data-wave="2"] {
        left: 50% !important;
        bottom: 22% !important;
        transform: translateX(-50%) scale(0.95) !important;
      }

      body[data-page="home"] #hero {
        height: 100svh !important;
        min-height: 100svh !important;
      }

      body[data-page="home"] #hero > main {
        padding-top: 7rem !important;
        justify-content: flex-start !important;
      }

      /* Tighten the vertical rhythm under the headline so the hero
         doesn't feel top-heavy with empty space. */
      body[data-page="home"] #hero .hero-text {
        margin-bottom: 1rem !important;
      }

      body[data-page="home"] #hero .hero-stage {
        gap-y: 1rem !important;
        row-gap: 1rem !important;
      }

      body[data-page="home"] .main-flower {
        width: 12rem !important;
        height: 18rem !important;
      }

      /* Mobile fixes the head-on-tip geometry. The main-flower container
         shrunk from desktop's 24rem to 18rem, but the inner stem (h-48 =
         192px) and head wrapper (top: 20% + fixed 128px) kept desktop sizes.
         Result: the head's CENTER (where the bloom originates) sat ~51px
         BELOW the stem tip — visually the flower bloomed in the middle of
         the stem. Shorten the stem and tighten the head wrapper so the
         head center lands just above the stem tip, matching desktop. */
      body[data-page="home"] .main-flower .flower-stem {
        height: 7.5rem !important; /* was 12rem (h-48). Now stem tip ≈ y=136 */
      }
      body[data-page="home"] .main-flower .flower-stem > div {
        /* the side leaf is positioned at top: 16 (top-16) relative to a 12rem stem;
           on the shorter mobile stem, lift it so it stays mid-stem, not below the head */
        top: 2.25rem !important;
      }

      body[data-page="home"] .hero-stage {
        grid-template-columns: 1fr !important;
        gap-y: 2rem !important;
      }

      body[data-page="home"] .hero-cta-group {
        justify-self: center !important;
      }

      body[data-page="home"] .beat-flourish {
        width: 80px !important;
        height: 56px !important;
      }

      /* Services on mobile mirrors the desktop pinned 2-column layout
         (flower top, text below) so the flower rotation + color cycle
         + svc-text-block crossfade scrub all behave the same. */
      body[data-page="home"] .svc-flower-svg {
        width: 220px !important;
        height: 220px !important;
        /* keep overflow:visible (the default from desktop CSS) so the
           svc-flower-stem can paint past the bounds and enter from
           the left edge. */
      }

      body[data-page="home"] #services [class*="md:grid-cols-2"] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        align-content: center;
        padding-top: 0;
      }

      /* The right-column wrapper (relative md:h-[60vh] flex items-center)
         needs an explicit height on mobile so its md:absolute children
         have a positioning context with size. */
      body[data-page="home"] #services [class*="md:h-["] {
        height: 14rem;
        min-height: 200px;
        align-items: flex-start;
      }

      /* Mobile copies the desktop md:absolute md:inset-0 md:flex
         items-center behavior for the text-block stack. */
      body[data-page="home"] #services [class*="md:absolute"] {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-start;
      }

      body[data-page="home"] #services .svc-text-block {
        pointer-events: none;
      }

      /* Tighten inner padding so the absolute text doesn't crash
         against the narrow viewport edges. */
      body[data-page="home"] #services .max-w-\[1280px\] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }

      body[data-page="home"] #intro {
        min-height: auto !important;
      }

      /* Mobile intro vines — top + bottom horizontal bands and 4
         vertical edge vines that frame the stacked intro content.
         Hidden on desktop (display:none default). The horizontal bands
         draw on enter via GSAP; the vertical span between them is
         scrub-drawn as the user scrolls through #intro. */
      body[data-page="home"] .intro-mobile-vines {
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        overflow: hidden;
      }

      body[data-page="home"] .imv-band {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 44px;
        display: block;
        overflow: visible;
      }

      body[data-page="home"] .imv-band-top {
        display: none !important;
      }

      body[data-page="home"] .imv-band-bottom {
        bottom: 0;
      }

      body[data-page="home"] .imv-verts {
        position: absolute;
        top: 0;
        bottom: 44px;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(100% - 44px);
        display: block;
        overflow: visible;
      }

      body[data-page="home"] .intro-mobile-vines .imv-path-band,
      body[data-page="home"] .intro-mobile-vines .imv-path-vert {
        fill: none;
        stroke: #5a7a5c;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0.8;
        vector-effect: non-scaling-stroke;
      }

      body[data-page="home"] .intro-mobile-vines .imv-path-band--thin,
      body[data-page="home"] .intro-mobile-vines .imv-path-vert--thin {
        stroke-width: 2;
        opacity: 0.65;
      }

      body[data-page="home"] .intro-mobile-vines .imv-leaf {
        fill: #7fa181;
        opacity: 0.55;
      }

      body[data-page="home"] .intro-photo-wrap {
        display: block !important;
        position: relative !important;
        top: auto !important;
        height: auto !important;
        opacity: 1;
        padding: 3.25rem 0 1.25rem !important;
      }

      body[data-page="home"] .intro-photo-wrap > div {
        display: block !important;
        height: auto !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }

      body[data-page="home"] .intro-photo-wrap > div > div:first-child {
        display: none !important;
      }

      body[data-page="home"] .intro-photo-wrap .flex {
        display: flex !important;
        justify-content: center !important;
      }

      body[data-page="home"] .intro-photo-wrap .relative {
        width: min(70vw, 260px) !important;
      }

      body[data-page="home"] .intro-photo {
        width: min(70vw, 260px) !important;
        height: min(92vw, 330px) !important;
      }

      body[data-page="home"] .photo-vines {
        left: -45px !important;
        top: -52px !important;
        width: calc(min(70vw, 260px) + 90px) !important;
        height: calc(min(92vw, 330px) + 104px) !important;
      }

      /* Intro-beats default to opacity:1 on mobile (the mobile entrance
         fades them up; no desktop sticky scrub running on phones).
         .svc-text-block is intentionally left at the desktop default
         (opacity:0) so the pinned scrub controls visibility on mobile too. */
      body[data-page="home"] .intro-beat {
        opacity: 1;
        transform: none;
        will-change: auto;
      }

      body[data-page="home"] .intro-beat {
        min-height: auto !important;
        padding: 2.5rem 0 !important;
      }

      body[data-page="home"] .intro-beat h2 {
        font-size: 1.875rem !important;
        line-height: 1.15 !important;
      }

      body[data-page="home"] .intro-beat .text-lg {
        font-size: 1rem !important;
      }

      body[data-page="home"] .svc-text-block + .svc-text-block {
        margin-top: 2.5rem;
      }

      body[data-page="home"] #services .svc-text-block h3 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
      }

      body[data-page="home"] header[data-nav-shell] {
        background-color: #fcf9f2 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      body[data-page="home"] header[data-nav-shell] nav > ul {
        display: none !important;
      }

      body[data-page="home"] #mnav-toggle {
        display: block !important;
      }

      body[data-page="home"] #mnav:not(.hidden) {
        display: block !important;
      }

      body[data-page="home"] #contact {
        padding-top: 3rem !important;
        padding-bottom: 3.5rem !important;
      }

      body[data-page="home"] #contact > div {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }

      body[data-page="home"] #contact .text-center {
        margin-bottom: 2.5rem !important;
      }

      body[data-page="home"] #contact h2 {
        font-size: 2rem !important;
        line-height: 1.08 !important;
      }

      body[data-page="home"] #contact .text-lg {
        font-size: 1rem !important;
        line-height: 1.6 !important;
      }

      body[data-page="home"] #contact > div > .grid {
        gap: 2rem !important;
      }

      body[data-page="home"] #contact .audit-callout {
        padding: 1.25rem !important;
      }

      body[data-page="home"] #contact .channel {
        padding: 0.95rem 1rem !important;
      }

      body[data-page="home"] #contact .channel-value {
        overflow-wrap: anywhere;
      }

      body[data-page="home"] #contact > div > p:last-child {
        margin-top: 3rem !important;
      }
    }

    @media (min-width: 600px) and (max-width: 900px) and (min-height: 700px) {
      body[data-page="home"] #hero {
        height: 100svh !important;
        min-height: 100svh !important;
      }

      body[data-page="home"] #hero > main {
        padding-top: 5rem !important;
        padding-bottom: 3rem !important;
      }
    }

    /* =========================================================
     PHONE LANDSCAPE (short viewports — e.g. iPhone SE 667×375,
     iPhone 14 852×393). Hero content (h1 + CTAs + flower) is
     ~450px tall and can't fit in a 375–393px tall viewport, so
     allow the section to grow beyond 100svh and shrink the
     flower/headline so it still feels balanced in one screen.
    ========================================================= */
    @media (max-width: 900px) and (max-height: 500px) {
      body[data-page="home"] #hero {
        height: auto !important;
        min-height: 100svh !important;
      }
      body[data-page="home"] #hero > main {
        padding-top: 5rem !important;
        padding-bottom: 1.25rem !important;
      }
      body[data-page="home"] .hero-stage {
        row-gap: 0.25rem !important;
      }
      body[data-page="home"] .hero-text {
        font-size: 1.9rem !important;
        margin-bottom: 0.25rem !important;
      }
      /* Shrink the flower as a single scaled element so the absolutely
         positioned head/stem geometry stays intact. The wrapper still
         occupies its 12rem × 18rem layout box, so we collapse the empty
         bottom half with a negative margin. */
      body[data-page="home"] .main-flower {
        transform: scale(0.55);
        transform-origin: top center;
        margin-top: -0.5rem !important;
        margin-bottom: -7rem !important;
      }
    }

    /* =========================================================
     REDUCED MOTION — show everything in final state, skip animation
     ========================================================= */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
      }

      body:not(.is-ready) .hero-text,
      body:not(.is-ready) .main-flower .flower-stem,
      body:not(.is-ready) .main-flower .flower-core,
      body:not(.is-ready) .main-flower .flower-petal,
      body:not(.is-ready) .garden-flower .gf-stem,
      body:not(.is-ready) .garden-flower .gf-core,
      body:not(.is-ready) .garden-flower .gf-petal,
      body:not(.is-ready) #scroll-cue,
      body:not(.is-ready) .hero-cta-group {
        opacity: 1 !important;
        transform: none !important;
      }

      .intro-beat,
      .intro-photo-wrap,
      .svc-text-block {
        opacity: 1 !important;
        transform: none !important;
      }

      .photo-vines .pv-path,
      .beat-flourish path,
      .flower-tendril path,
      .ground-vine path,
      .svc-connector path,
      .contact-corner path {
        stroke-dashoffset: 0 !important;
      }

      .photo-vines .pv-leaf,
      .beat-flourish .leaf,
      .beat-flourish .bud,
      .flower-tendril .leaf,
      .ground-vine .leaf,
      .contact-corner .leaf {
        opacity: 0.8 !important;
      }
    }