:root {
        color-scheme: light;
        --sky: #eaf7ff;
        --sky-deep: #cdeeff;
        --paper: #fffdf6;
        --ink: #1b2a52;
        --ink-soft: #46538a;
        --pink: #ff5d8f;
        --pink-soft: #ffe3ee;
        --yellow: #ffc93c;
        --yellow-soft: #fff3cf;
        --green: #58b368;
        --green-soft: #e2f6e4;
        --blue: #2f9be8;
        --blue-soft: #dff2ff;
        --lilac: #8b6fd8;
        --lilac-soft: #eee8ff;
        --orange: #ff8c42;
        --night: #27407c;
        --night-soft: #dce8ff;
        --card-line: rgba(27, 42, 82, 0.10);
        --shadow: 0 10px 30px rgba(27, 42, 82, 0.10);
        --call-bg: #e8437c;
        --call-bg-hover: #d6336c;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          color-scheme: dark;
          --sky: #131c3a;
          --sky-deep: #1a2650;
          --paper: #1b2749;
          --ink: #f2f5ff;
          --ink-soft: #b9c3e8;
          --pink-soft: #3d2440;
          --yellow-soft: #3d3418;
          --green-soft: #1e3a2a;
          --blue-soft: #1d3350;
          --lilac-soft: #2e2650;
          --night: #0f1836;
          --night-soft: #c9d8ff;
          --card-line: rgba(255, 255, 255, 0.12);
          --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          --call-bg: #e8437c;
          --call-bg-hover: #f0528c;
        }
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
        background: var(--sky);
        color: var(--ink);
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
      }
      h1, h2, h3, .display { font-family: "Fredoka", "Nunito", sans-serif; }
      a { color: var(--blue); }
      img { max-width: 100%; display: block; }

      .wrap { max-width: 1020px; margin: 0 auto; padding: 0 20px; }

      /* ---------- Hero ---------- */
      .hero {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 78%);
        padding: 30px 0 0;
        text-align: center;
      }
      .hero-sky { position: absolute; inset: 0; pointer-events: none; }
      .hero-sky .rainbow { position: absolute; top: -30px; right: -70px; width: 340px; opacity: 0.95; }
      .hero-sky .sun { position: absolute; top: 18px; left: 4%; width: 104px; }
      .hero-sky .cloud { position: absolute; fill: var(--paper); opacity: 0.9; }
      .hero-sky .cloud.c1 { width: 150px; top: 150px; left: -30px; }
      .hero-sky .cloud.c2 { width: 120px; top: 96px; right: 12%; }
      .hero-sky .heart { position: absolute; }
      .hero-inner { position: relative; padding: 26px 0 8px; }
      .hero h1 {
        margin: 0;
        font-size: clamp(2.1rem, 6.4vw, 3.6rem);
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.08;
        color: var(--ink);
      }
      .hero h1 .accent { color: var(--blue); display: block; font-weight: 600; }
      .squiggle { display: block; margin: 10px auto 4px; width: 190px; }
      .dayhome {
        margin: 14px 0 0;
        font-family: "Fredoka", sans-serif;
        font-weight: 700;
        font-size: clamp(3.4rem, 13.5vw, 7.2rem);
        line-height: 1;
        letter-spacing: 0.015em;
        text-shadow: 0 4px 0 rgba(27, 42, 82, 0.10);
      }
      .dayhome span { display: inline-block; }
      .dayhome .d1 { color: #ff5d8f; } .dayhome .d2 { color: #ffb020; }
      .dayhome .d3 { color: #58b368; } .dayhome .d4 { color: #2f9be8; }
      .dayhome .d5 { color: #ff8c42; } .dayhome .d6 { color: #8b6fd8; }
      .dayhome .d7 { color: #ff5d8f; }
      .available-pill {
        display: inline-block;
        margin-top: 16px;
        background: var(--yellow);
        color: #4a3200;
        font-family: "Fredoka", sans-serif;
        font-weight: 600;
        font-size: clamp(1.15rem, 3.6vw, 1.6rem);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 10px 30px;
        border-radius: 999px;
        transform: rotate(-1.2deg);
        box-shadow: 0 6px 0 rgba(146, 102, 0, 0.25);
      }
      .hero-tagline {
        margin: 26px auto 0;
        max-width: 620px;
        font-size: clamp(1.15rem, 3vw, 1.45rem);
        font-weight: 800;
        color: var(--ink);
      }
      .hero-motto {
        margin: 12px auto 0;
        max-width: 560px;
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--ink-soft);
      }
      .hero-motto em { font-style: italic; }
      .hero-cta { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
      .btn-call {
        display: inline-flex; align-items: center; gap: 12px;
        background: var(--call-bg); color: #fff;
        font-family: "Fredoka", sans-serif; font-weight: 600;
        font-size: clamp(1.25rem, 4vw, 1.6rem);
        text-decoration: none;
        padding: 16px 34px;
        border-radius: 999px;
        box-shadow: 0 8px 0 rgba(120, 20, 55, 0.35), var(--shadow);
        transition: transform 0.15s ease, background 0.15s ease;
      }
      .btn-call:hover, .btn-call:focus-visible { background: var(--call-bg-hover); transform: translateY(-2px); }
      .btn-call:active { transform: translateY(2px); }
      .btn-call svg { width: 28px; height: 28px; flex: none; }
      .hero-loc {
        display: inline-flex; align-items: center; gap: 7px;
        font-weight: 800; color: var(--ink-soft); font-size: 1rem;
      }
      .hero-loc svg { width: 19px; height: 19px; }
      .hero-photo {
        margin: 34px auto 0;
        max-width: 880px;
        border: 6px solid var(--paper);
        border-bottom: none;
        border-radius: 28px 28px 0 0;
        overflow: hidden;
        box-shadow: var(--shadow);
        position: relative;
      }
      .hero-photo img { width: 100%; height: auto; }

      /* ---------- Sections ---------- */
      section { padding: 58px 0 8px; }
      .section-head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
      .section-head h2 {
        margin: 0 0 8px;
        font-size: clamp(1.7rem, 4.6vw, 2.3rem);
        font-weight: 600;
      }
      .section-head p { margin: 0; color: var(--ink-soft); font-weight: 600; font-size: 1.05rem; }

      .features {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      .feature {
        border-radius: 26px;
        padding: 26px 20px 22px;
        text-align: center;
        border: 1px solid var(--card-line);
      }
      .feature .icon {
        width: 74px; height: 74px; margin: 0 auto 14px;
        display: grid; place-items: center;
      }
      .feature .icon svg { width: 74px; height: 74px; }
      .feature h3 { margin: 0 0 6px; font-size: 1.18rem; font-weight: 600; line-height: 1.25; }
      .feature p { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); }
      .feature.pink { background: var(--pink-soft); }
      .feature.yellow { background: var(--yellow-soft); }
      .feature.blue { background: var(--blue-soft); }
      .feature.lilac { background: var(--lilac-soft); }

      /* ---------- Day & night band ---------- */
      .daynight {
        margin-top: 58px;
        background: var(--night);
        color: #fff;
        border-radius: 32px;
        padding: 34px 28px;
        display: flex; align-items: center; gap: 26px;
        box-shadow: var(--shadow);
      }
      .daynight .dn-icons { display: flex; align-items: center; gap: 10px; flex: none; }
      .daynight .dn-icons svg { width: 74px; height: 74px; }
      .daynight h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 600; letter-spacing: 0.02em; }
      .daynight p { margin: 0; color: var(--night-soft); font-weight: 600; max-width: 560px; }

      /* ---------- Gallery ---------- */
      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
      .gallery-grid figure {
        margin: 0;
        border-radius: 22px;
        overflow: hidden;
        border: 5px solid var(--paper);
        background: var(--paper);
        box-shadow: var(--shadow);
      }
      .gallery-grid img {
        width: 100%;
        height: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
      }

      /* ---------- About Grace ---------- */
      .about {
        display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center;
        background: var(--paper);
        border: 1px solid var(--card-line);
        border-radius: 32px;
        padding: 38px;
        box-shadow: var(--shadow);
      }
      .about h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 4.4vw, 2.1rem); font-weight: 600; }
      .about p { margin: 0 0 12px; font-weight: 600; color: var(--ink-soft); }
      .about p strong { color: var(--ink); }
      .about-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
      .about-points li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
      .about-points svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
      .about-art { position: relative; }
      .about-art img { border-radius: 24px; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; }
      .about-art .handprint { position: absolute; width: 64px; }
      .about-art .hp1 { top: -22px; left: -16px; transform: rotate(-18deg); color: var(--pink); }
      .about-art .hp2 { bottom: -18px; right: -10px; transform: rotate(14deg) scaleX(-1); color: var(--blue); }

      /* ---------- Contact ---------- */
      .contact {
        margin-top: 58px;
        background: var(--pink-soft);
        border: 1px solid var(--card-line);
        border-radius: 32px;
        padding: 40px 30px 36px;
        text-align: center;
        box-shadow: var(--shadow);
      }
      .contact h2 { margin: 0 0 4px; font-size: clamp(1.6rem, 4.6vw, 2.2rem); font-weight: 600; }
      .contact .sub { margin: 0 auto 22px; max-width: 520px; font-weight: 600; color: var(--ink-soft); }
      .big-number {
        display: block;
        font-family: "Fredoka", sans-serif; font-weight: 700;
        font-size: clamp(2.3rem, 8.6vw, 4rem);
        letter-spacing: 0.02em;
        color: var(--ink);
        text-decoration: none;
        line-height: 1.1;
      }
      .big-number:hover, .big-number:focus-visible { color: var(--call-bg); }
      .contact .btn-call { margin-top: 20px; }
      .contact-rows {
        margin: 30px auto 0; max-width: 640px;
        display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left;
      }
      .contact-row {
        background: var(--paper);
        border: 1px solid var(--card-line);
        border-radius: 20px;
        padding: 16px 18px;
        display: flex; gap: 12px; align-items: flex-start;
      }
      .contact-row svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
      .contact-row .label { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1rem; display: block; }
      .contact-row .value { font-weight: 700; color: var(--ink-soft); font-size: 0.98rem; }
      .contact-row.email-slot { border-style: dashed; }
      .contact-row.email-slot .value { font-style: italic; }

      /* ---------- FAQ ---------- */
      .faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
      .faq-item {
        background: var(--paper);
        border: 1px solid var(--card-line);
        border-radius: 20px;
        padding: 20px 22px;
        box-shadow: var(--shadow);
      }
      .faq-item h3 { margin: 0 0 6px; font-size: 1.12rem; font-weight: 600; }
      .faq-item p { margin: 0; font-weight: 600; color: var(--ink-soft); }
      .areas-served {
        max-width: 760px; margin: 22px auto 0; text-align: center;
        font-weight: 700; color: var(--ink-soft); font-size: 0.98rem;
      }
      .areas-served strong { color: var(--ink); }

      /* ---------- Footer ---------- */
      footer { margin-top: 64px; position: relative; }
      .grass { display: block; width: 100%; height: 54px; }
      .footer-body {
        background: var(--green);
        color: #10331a;
        text-align: center;
        padding: 6px 20px 92px;
      }
      @media (prefers-color-scheme: dark) {
        .footer-body { background: #2c7a3f; color: #eaffef; }
      }
      .footer-body .fname { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 1.5rem; margin: 0; }
      .footer-body p { margin: 6px 0 0; font-weight: 700; }
      .footer-body a { color: inherit; }
      .footer-hands { display: flex; justify-content: center; gap: 26px; margin-top: 16px; }
      .footer-hands svg { width: 44px; height: 44px; }

      /* ---------- Sticky mobile call bar ---------- */
      .sticky-call {
        display: none;
        position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 50;
      }
      .sticky-call a {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        background: var(--call-bg); color: #fff;
        font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.2rem;
        text-decoration: none; padding: 15px 20px; border-radius: 999px;
        box-shadow: 0 10px 24px rgba(120, 20, 55, 0.4);
      }
      .sticky-call svg { width: 24px; height: 24px; }

      /* ---------- Motion ---------- */
      @keyframes drift { from { transform: translateX(0); } to { transform: translateX(16px); } }
      @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
      .hero-sky .sun .rays { transform-origin: 60px 60px; animation: spin-slow 40s linear infinite; }
      .hero-sky .cloud { animation: drift 7s ease-in-out infinite alternate; }
      .hero-sky .heart { animation: bob 3.4s ease-in-out infinite; }
      @media (prefers-reduced-motion: reduce) {
        .hero-sky .sun .rays, .hero-sky .cloud, .hero-sky .heart { animation: none; }
        html { scroll-behavior: auto; }
      }

      /* ---------- Responsive ---------- */
      @media (max-width: 860px) {
        .features { grid-template-columns: repeat(2, 1fr); }
        .gallery-grid { grid-template-columns: repeat(2, 1fr); }
        .about { grid-template-columns: 1fr; padding: 28px 22px; }
        .about-art img { aspect-ratio: 16 / 10; }
        .daynight { flex-direction: column; text-align: center; }
        .daynight p { margin: 0 auto; }
      }
      @media (max-width: 560px) {
        .features { grid-template-columns: 1fr; }
        .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .contact-rows { grid-template-columns: 1fr; }
        .hero { padding-top: 78px; }
        .hero-inner { padding-top: 6px; }
        .hero-sky .rainbow { width: 190px; right: -84px; top: -26px; }
        .hero-sky .sun { width: 60px; top: 12px; left: 3%; }
        .hero-sky .cloud.c1, .hero-sky .cloud.c2 { display: none; }
        .hero-sky .heart.h2 { display: none; }
        .sticky-call { display: block; }
        section { padding-top: 44px; }
      }