/**
 * Tots & Crayons — landing page styles
 * Palette aligned with Fluent Parent light theme (warm cream + orange accents).
 */

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 
 :root {
   --bg: #fbf9f8;
   --surface: #ffffff;
   --surface-variant: #f4ede4;
   --on-surface: #1b1c1c;
   --on-surface-variant: #564334;
   --primary: #904d00;
   --primary-container: #ff8c00;
   --on-primary-container: #623200;
   --secondary-container: #fcd400;
   --secondary-on: #6e5c00;
   --error: #ba1a1a;
   --radius-lg: 1.75rem;
   --radius-md: 1rem;
   --radius-sm: 0.75rem;
   --shadow-sm: 0 1px 3px rgba(86, 67, 52, 0.06);
   --shadow: 0 4px 16px rgba(86, 67, 52, 0.08);
   --shadow-lg: 0 12px 36px rgba(86, 67, 52, 0.12);
   --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --max: 1180px;
  --cursor-crayon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='%23ff8c00' stroke='%23564334' stroke-width='1.4' stroke-linejoin='round' d='M14.5 3.5 20.5 9.5 9 21H3v-6z'/%3E%3Cpath stroke='%23564334' stroke-width='1.2' d='M13 5 19 11'/%3E%3Cpath stroke='%23564334' stroke-width='1.2' stroke-linecap='round' d='M5 19l-2 2'/%3E%3C/svg%3E") 4 22, auto;
}
 
 html {
   scroll-behavior: smooth;
 }
 
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--on-surface);
  background: var(--bg);
  cursor: var(--cursor-crayon);
   background-image:
     radial-gradient(ellipse 120% 80% at 100% -20%, rgba(255, 140, 0, 0.12), transparent 55%),
     radial-gradient(ellipse 80% 60% at 0% 100%, rgba(252, 212, 0, 0.1), transparent 50%);
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
 }
 
 a {
   color: var(--primary);
   text-decoration: none;
 }
 a:hover {
   text-decoration: underline;
 }
 
 img {
   max-width: 100%;
   display: block;
 }
 
 .skip-link {
   position: absolute;
   top: -100px;
   left: 8px;
   background: var(--on-surface);
   color: var(--bg);
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   z-index: 100;
 }
 .skip-link:focus {
   top: 8px;
 }
 
 .page {
   max-width: var(--max);
   margin: 0 auto;
   padding: 0 1.25rem 3rem;
 }
 
 /* ===== Header ===== */
 .site-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1rem 0;
   position: sticky;
   top: 0;
   z-index: 20;
   background: rgba(251, 249, 248, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
 }
 
 .brand {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-weight: 800;
   font-size: 1.1rem;
   color: var(--on-surface);
   text-decoration: none;
   letter-spacing: -0.01em;
 }
 .brand:hover {
   text-decoration: none;
 }
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-container), var(--secondary-container));
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.brand-mark .brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-name {
  line-height: 1.2;
}
.error-404 {
  min-height: 50vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: 4rem;
}
.error-404 .hero-ctas {
  justify-content: center;
}
.site-header .nav-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
 .nav-links {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 1.4rem;
   list-style: none;
   margin: 0;
   padding: 0;
   align-items: center;
 }
 .nav-links a {
   font-weight: 600;
   font-size: 0.95rem;
   color: var(--on-surface-variant);
   text-decoration: none;
 }
 .nav-links a:hover {
   color: var(--primary);
   text-decoration: none;
 }
 
 /* ===== Buttons ===== */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 0.7rem 1.4rem;
   border-radius: 999px;
   font-weight: 700;
   font-family: var(--font-body);
   font-size: 0.95rem;
   border: none;
   cursor: var(--cursor-crayon);
   transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
 }
 .btn:focus-visible {
   outline: 2px solid var(--primary);
   outline-offset: 3px;
 }
 .btn:active {
   transform: scale(0.98);
 }
 .btn-primary {
   background: var(--primary-container);
   color: var(--surface);
   box-shadow: 0 6px 18px rgba(255, 140, 0, 0.32);
 }
 .btn-primary:hover {
   filter: brightness(1.05);
   text-decoration: none;
   box-shadow: 0 10px 24px rgba(255, 140, 0, 0.4);
 }
 .btn-outline {
   background: var(--surface);
   color: var(--on-primary-container);
   border: 2px solid var(--primary-container);
 }
 .btn-outline:hover {
   background: rgba(255, 140, 0, 0.08);
   text-decoration: none;
 }
 .btn-light {
   background: #fff;
   color: var(--on-primary-container);
 }
 .btn-ghost {
   background: rgba(255, 255, 255, 0.18);
   color: #fff;
   border: 1.5px solid rgba(255, 255, 255, 0.4);
 }
 .btn-ghost:hover {
   background: rgba(255, 255, 255, 0.28);
   text-decoration: none;
 }
 
 /* ===== Hero ===== */
 .hero {
   display: grid;
   gap: 2rem;
   padding: 2rem 0 3.5rem;
   align-items: center;
 }
 @media (min-width: 880px) {
   .hero {
     grid-template-columns: 1.05fr 0.95fr;
     padding: 3rem 0 4rem;
   }
 }
 
 .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   background: rgba(255, 140, 0, 0.12);
   color: var(--on-primary-container);
   padding: 0.4rem 0.85rem;
   border-radius: 999px;
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.02em;
   margin-bottom: 1.25rem;
 }
 
 .hero-copy h1 {
   font-family: var(--font-head);
   font-size: clamp(2.2rem, 5vw, 3.1rem);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.015em;
   margin: 0 0 1rem;
   color: var(--on-surface);
 }
 .hero-copy h1 em {
   font-style: italic;
   font-weight: 600;
   color: var(--primary);
   background: linear-gradient(120deg, var(--primary-container), var(--primary));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 .hero-copy .lede {
   font-size: 1.12rem;
   color: var(--on-surface-variant);
   margin: 0 0 1.75rem;
   max-width: 38ch;
 }
 .hero-ctas {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
 }
 
 .hero-strip {
   list-style: none;
   margin: 2.25rem 0 0;
   padding: 0;
   display: flex;
   gap: 2rem;
   flex-wrap: wrap;
   border-top: 1px solid rgba(86, 67, 52, 0.12);
   padding-top: 1.5rem;
 }
 .hero-strip li {
   display: flex;
   flex-direction: column;
 }
 .hero-strip strong {
   font-family: var(--font-head);
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--primary);
   line-height: 1;
 }
 .hero-strip span {
   font-size: 0.85rem;
   color: var(--on-surface-variant);
   margin-top: 0.3rem;
 }
 
.hero-art {
  position: relative;
  min-height: 280px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid rgba(86, 67, 52, 0.08);
}
 .hero-art svg {
   width: 100%;
   height: auto;
   display: block;
 }
 
 /* Anchor element — invisible, used by JS to find the hero's center
    so the flying bee can return there when idle. */
 #beeAnchor {
   position: absolute;
   top: 50%;
   left: 65%;
   width: 1px;
   height: 1px;
   pointer-events: none;
 }
 
/* ===== FREE-FLYING BEE (inside hero illustration) ===== */
.flying-bee {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 44px;
  margin: -22px 0 0 -28px;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
  filter: drop-shadow(0 6px 8px rgba(86, 67, 52, 0.22));
}
 .flying-bee svg {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
 
 /* ===== Honeybee scene animations ===== */
 @keyframes flutter {
   0%, 100% { transform: scaleY(1) translateY(0); }
   50%      { transform: scaleY(0.3) translateY(-0.5px); }
 }
@keyframes beeDrift {
  0%   { transform: translate(110px, 130px); }
  25%  { transform: translate(130px, 115px); }
  50%  { transform: translate(155px, 135px); }
  75%  { transform: translate(125px, 150px); }
  100% { transform: translate(110px, 130px); }
}
@keyframes beeDrift2 {
  0%   { transform: translate(250px, 105px); }
  25%  { transform: translate(235px, 125px); }
  50%  { transform: translate(265px, 138px); }
  75%  { transform: translate(278px, 118px); }
  100% { transform: translate(250px, 105px); }
}
 
 .bee .wing,
 .flying-bee .wing {
   transform-box: fill-box;
   transform-origin: 50% 100%;
   animation: flutter 0.1s ease-in-out infinite;
 }
 .bee .wing-r,
 .flying-bee .wing-r {
   animation-delay: 0.05s;
 }
 .bee-drift {
   animation: beeDrift 14s ease-in-out infinite;
 }
 .bee-drift-2 {
   animation: beeDrift2 11s ease-in-out infinite;
 }
.hero-float-card {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  z-index: 3;
   background: var(--surface);
   border-radius: var(--radius-md);
   padding: 1rem 1.15rem;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
   font-size: 0.92rem;
   font-weight: 700;
   color: var(--on-surface-variant);
 }
 .hero-float-card span {
   display: block;
   color: var(--primary-container);
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin-bottom: 0.25rem;
 }
 
/* ===== SEO contact strip ===== */
.seo-contact-strip {
  margin: 0 0 0.5rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(255, 248, 240, 0.95), rgba(255, 236, 214, 0.6));
  border: 1px solid rgba(144, 77, 0, 0.12);
  border-radius: var(--radius-lg);
}
.seo-contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.seo-contact-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.92rem;
  color: var(--on-surface-variant);
}
.seo-contact-list strong {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}
.seo-contact-list a {
  font-weight: 700;
  color: var(--on-surface);
}
.seo-contact-list a:hover {
  color: var(--primary);
}

/* ===== SEO content block ===== */
.seo-content {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}
.seo-content-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 768px) {
  .seo-content-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
}
.seo-content-main .section-title {
  margin-bottom: 0.75rem;
}
.seo-content-aside {
  padding: 1.5rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(144, 77, 0, 0.18);
}
.seo-content-aside h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
  color: var(--on-surface);
}
.seo-content-aside p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--on-surface-variant);
}

/* ===== Badge strip ===== */
.badge-strip {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem 1.5rem;
   justify-content: center;
   align-items: center;
   padding: 1.5rem;
   margin: 0 -0.5rem 1rem;
   border-top: 1px dashed rgba(144, 77, 0, 0.18);
   border-bottom: 1px dashed rgba(144, 77, 0, 0.18);
 }
 .badge {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.88rem;
   font-weight: 700;
   color: var(--on-surface-variant);
 }
 .badge svg {
   color: var(--primary-container);
 }
 
 /* ===== Section primitives ===== */
 .section {
   padding: 3.5rem 0;
 }
 .section-head {
   max-width: 640px;
   margin: 0 0 2.5rem;
 }
 .kicker {
   display: inline-block;
   font-size: 0.78rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--primary-container);
   margin-bottom: 0.85rem;
 }
 .kicker.light {
   color: rgba(255, 255, 255, 0.9);
 }
 .section-title {
   font-family: var(--font-head);
   font-size: clamp(1.8rem, 3.4vw, 2.4rem);
   font-weight: 700;
   letter-spacing: -0.015em;
   line-height: 1.15;
   margin: 0 0 0.85rem;
   color: var(--on-surface);
 }
 .section-intro {
   color: var(--on-surface-variant);
   max-width: 56ch;
   margin: 0;
   font-size: 1.05rem;
 }
 
 /* ===== Trust cards ===== */
 .trust-row {
   display: grid;
   gap: 1.25rem;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 }
 .trust-item {
   background: var(--surface);
   border-radius: var(--radius-md);
   padding: 1.75rem 1.5rem;
   box-shadow: var(--shadow);
   border: 1px solid rgba(86, 67, 52, 0.06);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .trust-item:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-lg);
 }
 .trust-icon {
   display: inline-grid;
   place-items: center;
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(252, 212, 0, 0.2));
   color: var(--primary);
   margin-bottom: 1rem;
 }
 .trust-item strong {
   display: block;
   font-family: var(--font-head);
   font-size: 1.15rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
   color: var(--on-surface);
 }
 .trust-item p {
   margin: 0;
   font-size: 0.95rem;
   color: var(--on-surface-variant);
 }
 
 /* ===== About ===== */
 .about-grid {
   display: grid;
   gap: 2.5rem;
   align-items: center;
 }
 @media (min-width: 880px) {
   .about-grid {
     grid-template-columns: 1fr 1.05fr;
   }
 }
 .about-media {
   position: relative;
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   aspect-ratio: 4 / 5;
   background: var(--surface-variant);
 }
 .about-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .about-media-badge {
   position: absolute;
   bottom: 1.25rem;
   left: 1.25rem;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(8px);
   border-radius: 999px;
   padding: 0.55rem 1rem;
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--on-surface);
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   box-shadow: var(--shadow);
 }
 .about-media-badge svg {
   color: var(--primary-container);
 }
 .about-copy p {
   color: var(--on-surface-variant);
   font-size: 1.05rem;
   margin: 0 0 1.5rem;
 }
 .about-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 0.75rem;
 }
 .about-list li {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   font-weight: 600;
   color: var(--on-surface);
 }
 .about-list li svg {
   flex-shrink: 0;
   color: var(--primary-container);
   background: rgba(255, 140, 0, 0.12);
   padding: 6px;
   border-radius: 8px;
   width: 30px;
   height: 30px;
 }
 
 /* ===== Programme cards ===== */
 .cards-grid {
   display: grid;
   gap: 1.5rem;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 }
 .card {
   background: var(--surface);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow);
   border: 1px solid rgba(86, 67, 52, 0.06);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 .card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
 }
 .prog-card.highlighted {
   border: 2px solid var(--primary-container);
   box-shadow: 0 10px 30px rgba(255, 140, 0, 0.18);
 }
 .prog-media {
   position: relative;
   aspect-ratio: 4 / 3;
   background: var(--surface-variant);
   overflow: hidden;
 }
 .prog-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
 }
 .card:hover .prog-media img {
   transform: scale(1.04);
 }
 .prog-badge {
   position: absolute;
   top: 1rem;
   right: 1rem;
   background: var(--primary-container);
   color: #fff;
   padding: 0.3rem 0.75rem;
   border-radius: 999px;
   font-size: 0.75rem;
   font-weight: 800;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   box-shadow: 0 4px 12px rgba(255, 140, 0, 0.35);
 }
 .prog-body {
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   flex: 1;
 }
 .card h3 {
   font-family: var(--font-head);
   font-size: 1.4rem;
   font-weight: 700;
   margin: 0;
   color: var(--on-surface);
 }
 .card p {
   margin: 0;
   font-size: 0.98rem;
   color: var(--on-surface-variant);
 }
 .age-tag {
   display: inline-block;
   width: fit-content;
   font-size: 0.72rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--on-primary-container);
   background: rgba(255, 140, 0, 0.14);
   padding: 0.3rem 0.7rem;
   border-radius: 999px;
 }
 .prog-list {
   margin: 0.75rem 0 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
 }
 .prog-list li {
   font-size: 0.8rem;
   font-weight: 700;
   color: var(--on-surface-variant);
   background: var(--surface-variant);
   padding: 0.3rem 0.7rem;
   border-radius: 999px;
 }
 
 /* ===== Day timeline ===== */
 .day-timeline {
   display: grid;
   gap: 0.85rem;
 }
 @media (min-width: 780px) {
   .day-timeline {
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
   }
 }
 .day-step {
   display: grid;
   grid-template-columns: auto auto 1fr;
   gap: 1rem;
   align-items: center;
   background: var(--surface);
   border-radius: var(--radius-md);
   padding: 1.15rem 1.25rem;
   box-shadow: var(--shadow);
   border: 1px solid rgba(86, 67, 52, 0.06);
   transition: transform 0.15s ease;
 }
 .day-step:hover {
   transform: translateX(3px);
 }
 .day-time {
   font-family: var(--font-head);
   font-size: 0.85rem;
   font-weight: 600;
   color: var(--primary);
   background: rgba(255, 140, 0, 0.1);
   padding: 0.35rem 0.65rem;
   border-radius: 8px;
   white-space: nowrap;
 }
 .day-icon {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, rgba(255, 140, 0, 0.15), rgba(252, 212, 0, 0.18));
   color: var(--primary);
 }
 .day-step h3 {
   margin: 0 0 0.2rem;
   font-family: var(--font-head);
   font-size: 1.05rem;
   font-weight: 600;
 }
 .day-step p {
   margin: 0;
   font-size: 0.9rem;
   color: var(--on-surface-variant);
 }
 
 /* ===== Gallery ===== */
 .gallery-grid {
   display: grid;
   gap: 0.85rem;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 160px;
 }
 .gallery-grid figure {
   margin: 0;
   border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: var(--shadow);
   background: var(--surface-variant);
   position: relative;
 }
 .gallery-grid figure img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
 }
 .gallery-grid figure:hover img {
   transform: scale(1.05);
 }
 .g-1 { grid-column: span 2; grid-row: span 2; }
 .g-2 { grid-column: span 2; }
 .g-3 { grid-column: span 1; }
 .g-4 { grid-column: span 1; }
 .g-5 { grid-column: span 2; }
 @media (max-width: 720px) {
   .gallery-grid {
     grid-template-columns: repeat(2, 1fr);
     grid-auto-rows: 140px;
   }
   .g-1 { grid-column: span 2; grid-row: span 2; }
   .g-2, .g-5 { grid-column: span 2; }
   .g-3, .g-4 { grid-column: span 1; }
 }
 
 /* ===== Parents grid ===== */
 .parents-grid {
   display: grid;
   gap: 1.25rem;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 }
 .parents-feature {
   background: var(--surface);
   border-radius: var(--radius-md);
   padding: 1.75rem 1.5rem;
   box-shadow: var(--shadow);
   border: 1px solid rgba(86, 67, 52, 0.06);
 }
 .parents-feature h3 {
   font-family: var(--font-head);
   font-size: 1.15rem;
   font-weight: 600;
   margin: 1rem 0 0.5rem;
 }
 .parents-feature p {
   margin: 0;
   font-size: 0.95rem;
   color: var(--on-surface-variant);
 }
 
 /* ===== Testimonials ===== */
 .testi-grid {
   display: grid;
   gap: 1.25rem;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 }
 .testi {
   margin: 0;
   background: var(--surface);
   border-radius: var(--radius-md);
   padding: 1.75rem 1.5rem;
   box-shadow: var(--shadow);
   border: 1px solid rgba(86, 67, 52, 0.06);
   position: relative;
 }
 .testi-quote {
   color: var(--primary-container);
   opacity: 0.5;
   margin-bottom: 0.5rem;
 }
 .testi blockquote {
   margin: 0 0 1.25rem;
   font-family: var(--font-head);
   font-size: 1.05rem;
   font-style: italic;
   line-height: 1.55;
   color: var(--on-surface);
 }
 .testi figcaption {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
   padding-top: 1rem;
   border-top: 1px solid rgba(86, 67, 52, 0.1);
 }
 .testi figcaption strong {
   color: var(--on-surface);
   font-weight: 800;
 }
 .testi figcaption span {
   font-size: 0.85rem;
   color: var(--on-surface-variant);
 }
 
 /* ===== FAQ ===== */
 .faq-list {
   display: grid;
   gap: 0.65rem;
   max-width: 820px;
 }
 .faq-item {
   background: var(--surface);
   border-radius: var(--radius-md);
   border: 1px solid rgba(86, 67, 52, 0.08);
   overflow: hidden;
   transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
 }
 .faq-item:hover {
   transform: translateY(-2px);
   border-color: rgba(255, 140, 0, 0.35);
   box-shadow: var(--shadow);
 }
 .faq-item[open] {
   box-shadow: var(--shadow);
   border-color: rgba(255, 140, 0, 0.4);
 }
 .faq-item[open]:hover {
   box-shadow: var(--shadow-lg);
 }
 .faq-item summary {
   list-style: none;
   cursor: var(--cursor-crayon);
   padding: 1.15rem 1.4rem;
   font-weight: 700;
   font-size: 1.02rem;
   color: var(--on-surface);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   transition: color 0.2s ease;
 }
 .faq-item:hover summary {
   color: var(--primary);
 }
 .faq-item summary::-webkit-details-marker {
   display: none;
 }
 .faq-toggle {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(255, 140, 0, 0.12);
   color: var(--primary);
   display: grid;
   place-items: center;
   transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease;
 }
 .faq-item[open] .faq-toggle {
   transform: rotate(45deg);
   background: var(--primary-container);
   color: #fff;
 }
 .faq-item p {
   margin: 0;
   padding: 0 1.4rem 1.25rem;
   color: var(--on-surface-variant);
   font-size: 0.98rem;
   animation: faqFadeIn 0.3s ease both;
 }
 @keyframes faqFadeIn {
   from { opacity: 0; transform: translateY(-4px); }
   to   { opacity: 1; transform: translateY(0); }
 }
 
 /* ===== CTA band ===== */
 .cta-band {
   border-radius: var(--radius-lg);
   background: linear-gradient(120deg, var(--primary-container) 0%, #ff6b00 60%, #b35900 100%);
   color: var(--surface);
   padding: 3rem 2rem;
   box-shadow: var(--shadow-lg);
   position: relative;
   overflow: hidden;
   display: grid;
   gap: 2rem;
   align-items: center;
 }
 @media (min-width: 780px) {
   .cta-band {
     grid-template-columns: 1.5fr 1fr;
     padding: 3.5rem 3rem;
   }
 }
 .cta-band::before {
   content: '';
   position: absolute;
   top: -20%;
   right: -10%;
   width: 60%;
   height: 140%;
   background: radial-gradient(circle, rgba(252, 212, 0, 0.35), transparent 60%);
   pointer-events: none;
 }
 .cta-content {
   position: relative;
   z-index: 1;
 }
 .cta-band h2 {
   font-family: var(--font-head);
   font-size: clamp(1.6rem, 3.2vw, 2.1rem);
   font-weight: 700;
   letter-spacing: -0.015em;
   margin: 0 0 0.85rem;
   line-height: 1.15;
 }
 .cta-band p {
   margin: 0 0 1.5rem;
   max-width: 46ch;
   opacity: 0.95;
   font-size: 1.02rem;
 }
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ===== Lead capture form ===== */
.lead-form {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
}
.lead-form-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.lead-form-intro {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  opacity: 0.92;
}
.lead-form-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .lead-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.lead-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lead-field-full {
  grid-column: 1 / -1;
}
.lead-field span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lead-field input,
.lead-field select,
.lead-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--on-surface);
  font: inherit;
}
.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
.lead-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
.lead-form-actions {
  margin-top: 1rem;
  display: grid;
  gap: 0.65rem;
}
.lead-form-status {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
}
.lead-form-status.is-success {
  color: #fff8dc;
}
.lead-form-status.is-error {
  color: #ffe0e0;
}
.lead-form.is-submitting .lead-form-submit {
  opacity: 0.75;
  pointer-events: none;
}

.cta-illu {
   position: relative;
   z-index: 1;
   display: grid;
   place-items: center;
   opacity: 0.85;
 }
 .cta-illu svg {
   width: 200px;
   height: 200px;
 }
 
 /* ===== Footer ===== */
 .site-footer {
   margin-top: 3rem;
   padding: 2.5rem 0 0;
   border-top: 1px solid rgba(86, 67, 52, 0.12);
   display: grid;
   gap: 2rem;
 }
 @media (min-width: 640px) {
   .site-footer {
     grid-template-columns: 1.4fr 1fr 1fr 1fr;
   }
 }
 .footer-col h4 {
   font-family: var(--font-head);
   font-size: 0.95rem;
   font-weight: 600;
   margin: 0 0 0.85rem;
   color: var(--on-surface);
 }
 .brand-footer {
   margin-bottom: 0.85rem;
 }
 .footer-note {
   font-size: 0.9rem;
   color: var(--on-surface-variant);
   max-width: 32ch;
   margin: 0;
 }
 .footer-meta {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
   color: var(--on-surface-variant);
   margin: 0 0 0.5rem;
 }
 .footer-meta svg {
   color: var(--primary-container);
   flex-shrink: 0;
 }
 .footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 0.4rem;
 }
 .footer-links a {
   font-size: 0.9rem;
   color: var(--on-surface-variant);
 }
 .footer-links a:hover {
   color: var(--primary);
 }
 .fine-print {
   grid-column: 1 / -1;
   font-size: 0.8rem;
   color: var(--on-surface-variant);
   opacity: 0.85;
   margin: 1.5rem 0 0;
   padding-top: 1.5rem;
   border-top: 1px dashed rgba(86, 67, 52, 0.15);
   text-align: center;
 }
 
/* ===== Mobile navigation ===== */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: var(--surface);
  color: var(--on-surface);
  box-shadow: var(--shadow-sm);
  cursor: var(--cursor-crayon);
}
.nav-toggle svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 879px) {
  .site-header {
    position: sticky;
    flex-wrap: nowrap;
  }
  .site-header .nav-wrap {
    position: relative;
    width: auto;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.75rem;
    background: rgba(251, 249, 248, 0.98);
    border: 1px solid rgba(86, 67, 52, 0.1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 30;
  }
  .site-header.is-nav-open .nav-links {
    display: flex;
  }
  .nav-links li {
    width: 100%;
  }
  .nav-links a {
    display: block;
    padding: 0.65rem 0.85rem;
    border-radius: 0.65rem;
  }
  .nav-links a.btn {
    text-align: center;
    margin-top: 0.25rem;
  }
  .hero-strip {
    gap: 1.25rem;
  }
  .day-step {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .day-time {
    width: fit-content;
  }
  .cta-band {
    padding: 2rem 1.25rem;
  }
  .page {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Hide flying bee on touch-primary devices — feels strange without a cursor */
@media (hover: none) and (pointer: coarse) {
  .flying-bee { display: none; }
}
 
 /* ===== Reduced motion ===== */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
     animation-duration: 0.001ms !important;
     transition-duration: 0.001ms !important;
   }
   html {
     scroll-behavior: auto;
   }
 }