/* Happy Feet Creche & Aftercare — "Little steps" */
:root {
  --ground: #FFF9EF;
  --surface: #FFFFFF;
  --ink: #1B2A47;
  --muted: #4B5A75;
  --line: #D9CDB6;
  --brand: #0B7A86;
  --brand-text: #096A75;
  --accent-dark: #FFCB3D;
  --sun: #FFCB3D;
  --ink-fixed: #1B2A47;
  --on-brand: #FFFFFF;
  --cream: #F1F5FB;
  --band: #16254A;
  --band-line: rgba(241, 245, 251, .28);
  --peach: #FFDCC8;
  --sky: #D2E7FA;
  --mint: #CDEFE0;
  --focus: #0B5A64;
  --font-head: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
  --radius: 18px;
}
[data-theme="dark"] {
  --ground: #0F1A2E;
  --surface: #1A2943;
  --ink: #F1F5FB;
  --muted: #C5D0E2;
  --line: #3A4E73;
  --brand-text: #7FDCE6;
  --band: #09111F;
  --focus: #FFCB3D;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ground);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(2rem, 6.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: var(--brand-text); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--sun); color: var(--ink-fixed); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
.container { width: min(1120px, 100% - 2rem); margin-inline: auto; }
.section { padding-block: 3.5rem; }
.section--tight { padding-block: 2rem; }
.muted { color: var(--muted); }
.lede { font-size: 1.15rem; }
.eyebrow { font-family: var(--font-head); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; color: var(--brand-text); margin-bottom: .4rem; }

/* footprints divider */
.steps { height: 14px; margin-block: 1.2rem; background: radial-gradient(circle, var(--brand-text) 3.5px, transparent 4px) 0 50% / 30px 14px repeat-x; opacity: .7; }

/* ---------- always-dark sections ---------- */
.dark { background: var(--band); color: var(--cream); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark p, .dark li, .dark dt, .dark dd, .dark .muted, .dark small, .dark span { color: var(--cream); }
.dark .eyebrow, .dark .sub-label, .dark .accent { color: var(--accent-dark); }
.dark a:not(.btn) { color: var(--accent-dark); }
.dark a:not(.btn):hover { color: var(--cream); }
.dark .btn--sun, .dark a.btn--sun:hover { color: var(--ink-fixed); }
.dark .btn--ghost, .dark a.btn--ghost, .dark button.btn--ghost { color: var(--accent-dark); border-color: var(--accent-dark); background: transparent; }
.dark .btn--ghost:hover, .dark a.btn--ghost:hover, .dark button.btn--ghost:hover { background: var(--accent-dark); color: var(--ink-fixed); }
.dark :focus-visible { outline-color: var(--accent-dark); }
.dark .chip, .dark .chip * { color: var(--ink-fixed); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.4rem; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; text-align: center;
}
.btn--primary { background: var(--brand); color: var(--on-brand); }
a.btn--primary, a.btn--primary:hover { color: var(--on-brand); }
.btn--primary:hover { background: #096A75; }
.btn--sun { background: var(--sun); color: var(--ink-fixed); }
.btn--sun:hover { background: #FFD966; }
.btn--ghost { background: transparent; color: var(--brand-text); border-color: var(--brand-text); }
.btn--ghost:hover { background: var(--brand-text); color: var(--ground); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }

/* ---------- chips ---------- */
.chip {
  display: inline-block; padding: .15rem .7rem; border-radius: 999px;
  background: var(--sun); color: var(--ink-fixed); font-weight: 700; font-size: .85rem; line-height: 1.5;
}
.chip--need { background: var(--peach); color: #5A2A10; border: 1.5px dashed #8A4A25; border-radius: 10px; }

/* ---------- header ---------- */
.site-header { position: relative; border-bottom: 1px solid var(--band-line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-block: .75rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; }
.brand svg { flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--cream); }
.sub-label { font-size: .85rem; font-weight: 700; color: var(--accent-dark); }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.theme-toggle {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--accent-dark);
  background: transparent; color: var(--accent-dark); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.theme-toggle:hover { background: var(--accent-dark); color: var(--ink-fixed); }
.theme-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.site-header .btn { min-height: 44px; padding: .4rem 1.1rem; }
.main-nav { width: 100%; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.main-nav a { display: block; padding: .45rem .8rem; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--cream); }
.dark .main-nav a:not(.btn) { color: var(--cream); }
.main-nav a:hover { background: rgba(241, 245, 251, .14); }
.dark .main-nav a[aria-current="page"] { background: var(--sun); color: var(--ink-fixed); }
.dark .main-nav a[aria-current="page"]:hover { color: var(--ink-fixed); }

/* ---------- hero ---------- */
.hero { padding-block: 3rem; }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 { color: var(--cream); }
.figure { margin: 0; }
.figure img { border-radius: var(--radius); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; border: 3px solid var(--sun); }
.img-note { font-size: .85rem; margin-top: .4rem; color: var(--muted); }
.dark .img-note { color: var(--cream); }

/* ---------- proof ---------- */
.proof { background: var(--sky); color: var(--ink-fixed); border-block: 2px solid var(--ink-fixed); }
.proof p, .proof a { color: var(--ink-fixed); margin: 0; }
.proof a { font-weight: 700; }
.proof-inner { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; justify-content: center; padding-block: 1rem; text-align: center; }
.proof strong { font-family: var(--font-head); font-size: 1.5rem; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 1.2rem; }
.grid > * { min-width: 0; }
.card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.card h3 { margin-bottom: .4rem; }
.card .icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: .8rem; color: var(--ink-fixed); }
.icon--peach { background: var(--peach); } .icon--sky { background: var(--sky); } .icon--mint { background: var(--mint); }
.card-link { font-weight: 700; }

.split { display: grid; gap: 2rem; align-items: center; }
.split > * { min-width: 0; }
.split img { border-radius: var(--radius); border: 2px solid var(--line); width: 100%; object-fit: cover; }

.checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist li { padding-left: 2rem; position: relative; margin-bottom: .5rem; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--sun); color: var(--ink-fixed); font-weight: 800; text-align: center; line-height: 1.4rem; font-size: .9rem; }

/* find us */
.findus { display: grid; gap: 1.5rem; }
.findus > * { min-width: 0; }
dl.nap { margin: 0; }
dl.nap dt { font-weight: 800; font-family: var(--font-head); margin-top: .9rem; color: var(--brand-text); }
dl.nap dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dark dl.nap dt { color: var(--accent-dark); }
.dark dl.nap dd { color: var(--cream); }

/* band CTA */
.band { padding-block: 3rem; text-align: center; }
.band .btn-row { justify-content: center; }

/* gallery */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 2px solid var(--line); width: 100%; }

/* ---------- footer ---------- */
.site-footer { padding-top: 3rem; }
.footer-grid { display: grid; gap: 2rem; }
.footer-grid > * { min-width: 0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4rem; }
.footer-bottom { margin-top: 2rem; padding-block: 1.2rem; border-top: 1px solid var(--band-line); font-size: .92rem; background: var(--band); }
.footer-bottom .demo-note { background: #0B1430; border: 1px solid var(--band-line); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .8rem; color: var(--cream); }
.footer-bottom .demo-note strong { color: var(--accent-dark); }
.footer-bottom p { margin-bottom: .4rem; }

/* ---------- Place enquiry (planner) ---------- */
.planner { display: grid; gap: 1.5rem; align-items: start; }
.planner > * { min-width: 0; }
.form-card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
legend, .field-label { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; padding: 0; margin-bottom: .5rem; display: block; color: var(--ink); }
.hint { font-size: .92rem; color: var(--muted); margin: 0 0 .5rem; }
.tiles { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.tiles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tiles label {
  display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .5rem .9rem;
  background: var(--ground); border: 2px solid var(--line); border-radius: 14px; cursor: pointer;
  font-weight: 700; color: var(--ink);
}
.tiles label::before {
  content: ""; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 7px; border: 2px solid var(--muted);
  display: grid; place-items: center; font-size: 1rem; line-height: 1; color: var(--on-brand);
}
.tiles--radio label::before { border-radius: 50%; }
.tiles input:checked + label { border: 3px solid var(--brand-text); padding: calc(.5rem - 1px) calc(.9rem - 1px); background: var(--surface); }
.tiles input:checked + label::before { content: "\2713"; background: var(--brand); border-color: var(--brand); }
.tiles input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
.dep { margin: 0 0 1.4rem; }
.dep[hidden] { display: none; }
input[type="text"], input[type="date"], select, textarea {
  width: 100%; max-width: 100%; min-height: 48px; padding: .6rem .8rem; font: inherit; color: var(--ink);
  background: var(--ground); border: 2px solid var(--muted); border-radius: 12px;
}
textarea { min-height: 96px; resize: vertical; }
label.field-label { font-size: 1.15rem; }
.counter { font-size: .85rem; color: var(--muted); text-align: right; margin: .2rem 0 0; }
.countdown { font-weight: 800; color: var(--brand-text); margin: .4rem 0 0; }

.plan-panel { border-radius: var(--radius); padding: 1.4rem; border: 2px solid var(--band-line); }
.plan-panel h2, .plan-panel h3 { color: var(--cream); }
.plan-card { margin-bottom: 1.2rem; }
.plan-card dl { margin: 0; }
.plan-card .row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .5rem; padding: .5rem 0; border-bottom: 1px dashed var(--band-line); }
.plan-card dt { color: var(--accent-dark); font-weight: 800; font-family: var(--font-head); }
.plan-card dd { margin: 0; overflow-wrap: anywhere; color: var(--cream); }
.plan-empty { margin: 0; font-style: italic; }
.message-box { background: #0B1430; border: 1px solid var(--band-line); border-radius: 12px; padding: 1rem; margin: 0 0 1rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cream); }
.copy-status { min-height: 1.6em; margin: .6rem 0 0; font-weight: 700; }
.fine { font-size: .9rem; }

.page-head { padding-block: 2.5rem; }
.page-head h1 { color: var(--cream); }

@media (min-width: 700px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr 1fr; }
  .findus { grid-template-columns: 1.2fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .main-nav { width: auto; order: 0; }
  .header-inner { flex-wrap: nowrap; }
  .header-inner { gap: 1rem; }
}
@media (min-width: 900px) {
  .planner { grid-template-columns: 1.1fr .9fr; }
  .plan-panel { position: sticky; top: 1rem; }
}
@media (max-width: 899px) {
  .header-inner { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .header-inner { flex-wrap: wrap; }
  .main-nav { order: 3; width: 100%; }
  .main-nav ul { gap: .2rem; }
  .main-nav a { padding: .4rem .65rem; font-size: .95rem; }
}
@media (max-width: 480px) {
  .header-cta { display: none; }
  .brand-name { font-size: 1.05rem; }
  .section { padding-block: 2.5rem; }
  .plan-card .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .btn-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }