/* ==========================================================================
   Kinder Kollege

   Design direction: a Reggio atelier in daylight.

   Reggio classrooms are known for two things a website can borrow honestly:
   natural light on plain walls, and documentation panels, the pinned-up
   sheets of photographs and transcribed words that make children's thinking
   visible. So the page ground is a cool daylight grey, content sits on white
   "panels", and colour arrives the way it does in a real studio: from the
   work itself, in saturated primaries taken from the logo.

   Type is Fraunces (a soft, slightly wonky serif) over Karla. Both are
   self-hosted, so the site makes no third-party requests.
   ========================================================================== */

/* ---------- Self-hosted type ---------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  /* Ground and surfaces */
  --daylight:  #eff3f7;
  --paper:     #ffffff;
  --shade:     #e4eaf1;

  /* Text */
  --ink:       #14273f;
  --pencil:    #51637c;

  /* Accents, taken from the logo */
  --cobalt:    #1257c9;
  --sun:       #ffce1f;
  --sun-tint:  #fff4cf;
  --tomato:    #d9342b;
  --tomato-deep: #b8281f;
  --leaf:      #3f8f29;
  --leaf-tint: #e6f4e0;

  /* Lines */
  --rule:      #d7dee7;
  --rule-firm: #7e8ca0;

  /* Spacing */
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4.5rem;

  --radius:    4px;
  --radius-lg: 8px;

  --lift:    0 1px 2px rgba(20, 39, 63, .05), 0 8px 24px rgba(20, 39, 63, .07);
  --lift-lg: 0 2px 4px rgba(20, 39, 63, .05), 0 18px 48px rgba(20, 39, 63, .11);

  --wrap: 1160px;
  --ease: cubic-bezier(.2, .7, .3, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* The header is sticky, so anchor targets must clear it. */
:where(section, div, main, h1, h2, h3)[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background: var(--daylight);
  color: var(--ink);
  font-family: 'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Display type ---------- */

.display,
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 90;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.55rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.85rem); }
h3 { font-size: 1.24rem; letter-spacing: -0.005em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--cobalt); text-underline-offset: 3px; }
a:hover { color: #0d47a8; }

.lede {
  font-size: clamp(1.08rem, 1.6vw, 1.24rem);
  line-height: 1.6;
  color: var(--pencil);
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.band { padding-block: clamp(3.25rem, 7.5vw, var(--s6)); }
.band-tight { padding-block: clamp(2.25rem, 5vw, 3.25rem); }
.band-paper { background: var(--paper); }
.band-shade { background: var(--shade); }

/* ---------- Caption: a short rule, then a letterspaced label.
   Used instead of pill "eyebrows"; it reads like the label on a
   documentation panel. ---------- */

.caption {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.1rem;
  font-family: 'Karla', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pencil);
}
.caption::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--tomato);
  flex: none;
}
.caption-center { justify-content: center; }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: .7rem 1.3rem;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .75em 1.5em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--tomato); color: #fff; border-color: var(--tomato); }
.btn-primary:hover { background: var(--tomato-deep); border-color: var(--tomato-deep); color: #fff; }

.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: #0d1b2e; border-color: #0d1b2e; color: #fff; }

.btn-line { background: transparent; color: var(--ink); border-color: var(--rule-firm); }
.btn-line:hover { border-color: var(--ink); color: var(--ink); background: rgba(20, 39, 63, .04); }

.btn-line-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-line-light:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(239, 243, 247, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
  padding-block: .5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: .65rem;
  text-decoration: none;
  color: var(--ink);
}
.brand img { width: 52px; }

.brand-name {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 30;
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1;
  letter-spacing: -0.015em;
}
.brand-name span {
  display: block;
  margin-top: .3em;
  font-family: 'Karla', system-ui, sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pencil);
}

.nav-toggle {
  display: none;
  align-items: center;
  min-height: 44px;
  gap: .5rem;
  background: transparent;
  border: 2px solid var(--rule-firm);
  border-radius: 999px;
  padding: .5rem 1rem;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: .2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* :not(.btn) keeps these away from the CTA button, which carries its own
   colours. Without it .site-nav a outranks .btn-primary and the button
   renders with navy text on red. */
.site-nav a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .9rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--rule-firm); color: var(--ink); }
.site-nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--tomato); }
.nav-cta { margin-left: .5rem; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--lift-lg);
    padding: .5rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a:not(.btn) { padding: .85rem 1rem; border-bottom: 1px solid var(--rule); }
  .site-nav a:not(.btn)[aria-current="page"] { color: var(--tomato); }
  .nav-cta { margin: .5rem 0 0; }
  .nav-cta a { justify-content: center; }
}

/* ==========================================================================
   Hero: the light table

   A Reggio light table is a glowing surface where children lay translucent
   shapes and watch the colours overlap. Three discs in the logo's primaries
   sit behind the panel and multiply where they cross, which is exactly what
   happens on the real thing.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 { margin-bottom: .35em; }
.hero .lede { max-width: 33rem; }
.hero .btn-row { margin-top: 2rem; }

.lightbox {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.disc {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(2px);
  opacity: .5;
}
.disc-sun    { width: 30rem; height: 30rem; right: -6rem;  top: -9rem;  background: #ffe07a; }
.disc-cobalt { width: 24rem; height: 24rem; right: 8rem;   top: 4rem;   background: #bcd8ff; }
.disc-leaf   { width: 20rem; height: 20rem; right: -3rem;  bottom: -7rem; background: #cdeec0; }

/* The logo sits on a white sheet, like a photograph pinned to a panel. */
.hero-sheet {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.hero-sheet img { width: 100%; }
.hero-sheet figcaption {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--rule);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pencil);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.25rem;
  padding: .35rem .9rem .35rem .6rem;
  background: var(--leaf-tint);
  border: 1px solid #c3e3b6;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  color: #2f6d1e;
}
.status i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--leaf);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 2rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-size: .9rem;
  font-weight: 600;
  color: var(--pencil);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-sheet { order: -1; max-width: 420px; margin-inline: auto; }
  .disc-cobalt { right: -4rem; }
}

/* ---------- Documentation panels ---------- */

.panel-grid {
  display: grid;
  gap: 1.5rem;
}
.panel-grid-2 { grid-template-columns: repeat(2, 1fr); }
.panel-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .panel-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .panel-grid-2, .panel-grid-3 { grid-template-columns: 1fr; }
}

.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  box-shadow: var(--lift);
}

.panel-mark {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 1.1rem;
  color: var(--cobalt);
}
.panel-mark-sun { color: #a97a00; }
.panel-mark-leaf { color: #2f6d1e; }
.panel-mark-tomato { color: var(--tomato-deep); }

.panel p { color: var(--pencil); font-size: 1rem; margin-bottom: 0; }

/* ---------- Prose ---------- */

.prose { max-width: 40rem; }
.prose p { color: var(--pencil); }
.prose .opening {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink);
}

.pull {
  margin: 2.25rem 0 0;
  padding: 0 0 0 1.6rem;
  border-left: 3px solid var(--sun);
}
.pull p {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.34;
  color: var(--ink);
  margin-bottom: .5em;
}
.pull cite {
  font-style: normal;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pencil);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- Ledger: the age groups, as ruled lines ---------- */

.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 1.25rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--rule);
}
.ledger li:last-child { border-bottom: 1px solid var(--rule); }
.ledger dt, .ledger .term {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 20;
  font-weight: 600;
  font-size: 1.08rem;
}
.ledger .detail { color: var(--pencil); font-size: .97rem; }

@media (max-width: 560px) {
  .ledger li { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- Reviews ---------- */

.reviews {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.reviews-left { max-width: none; margin-inline: 0; text-align: left; }

.google-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 0 .6rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pencil);
}
.google-mark svg { width: 17px; height: 17px; flex: none; }
.reviews-left .google-mark { justify-content: flex-start; }

.stars {
  display: flex;
  justify-content: center;
  gap: .25rem;
  margin-bottom: 1.1rem;
  color: #e8a900;
}
.stars svg { width: 26px; height: 26px; }
.reviews-left .stars { justify-content: flex-start; }

.reviews .btn-row { justify-content: center; margin-top: 1.6rem; }
.reviews-left .btn-row { justify-content: flex-start; }

/* ---------- Testimonials ----------
   Real reviews vary a lot in length, so an equal-height row would leave the
   short ones half empty. CSS columns let each quote take only the height it
   needs and still sit in a tidy grid. */

.quote-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;      /* reviews differ in length; let each be its own height */
  gap: 1.5rem;
  margin: 2.75rem 0 2.5rem;
  text-align: left;
}
@media (max-width: 980px) { .quote-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .quote-wall { grid-template-columns: 1fr; } }

.testimonial {
  margin: 0;
  padding: clamp(1.4rem, 2.4vw, 1.8rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
}

.testimonial .stars {
  justify-content: flex-start;
  margin-bottom: .9rem;
}
.testimonial .stars svg { width: 19px; height: 19px; }

.testimonial blockquote {
  margin: 0;
  color: var(--pencil);
  font-size: 1rem;
}
.testimonial blockquote p { margin-bottom: .8em; }
.testimonial blockquote p:last-child { margin-bottom: 0; }

.testimonial figcaption {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 20;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}

/* ---------- Invitation band ---------- */

.invite {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}
.invite h2 { color: #fff; }
.invite p { color: rgba(255, 255, 255, .88); max-width: 36rem; margin-inline: auto; }
.invite .btn-row { justify-content: center; margin-top: 1.9rem; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

.form-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: var(--lift);
}

.field { margin-bottom: 1.2rem; }
.field label {
  display: block;
  font-weight: 700;
  font-size: .94rem;
  margin-bottom: .4rem;
}
.field .hint { font-weight: 400; color: var(--pencil); font-size: .85rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rule-firm);
  border-radius: var(--radius);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(18, 87, 201, .16);
  outline: none;
}
.field textarea { min-height: 132px; resize: vertical; }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--tomato);
  background: #fff7f6;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field-error {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: .4rem 0 0;
  font-size: .88rem;
  font-weight: 600;
  color: #b02b22;
}
.field-error svg { width: 15px; height: 15px; flex: none; }
.field-error[hidden] { display: none; }

.form-note { margin-top: 1rem; font-size: .9rem; color: var(--pencil); }

.reach {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}
.reach-list { list-style: none; margin: 0; padding: 0; }
.reach-list li {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}
.reach-list li:first-child { border-top: 0; padding-top: 0; }
.reach-list .key {
  display: block;
  margin-bottom: .15rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pencil);
}
.reach-list .val { font-weight: 700; word-break: break-word; }

/* ---------- Social icon buttons ----------
   Icon only, so each carries an aria-label and a title: the label is what a
   screen reader announces and what a mouse user sees on hover. The 48px
   circle is both the touch target and the visible control boundary. */

.icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.social-row {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--rule-firm);   /* 3.42:1 on white */
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
}
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn:hover { transform: translateY(-2px); }

.icon-btn-fb  { color: #1877f2; }
.icon-btn-ig  { color: #d62976; }
.icon-btn-fb:hover  { color: #1877f2; border-color: #1877f2; background: rgba(24, 120, 242, .08); }
.icon-btn-ig:hover  { color: #d62976; border-color: #d62976; background: rgba(214, 41, 118, .08); }
.icon-btn-gg:hover  { border-color: var(--ink); background: rgba(20, 39, 63, .05); }

/* Footer sits on navy, so the glyphs go white and the brand colour arrives
   on hover instead. */
.icon-row-dark { margin-top: 1.1rem; }
.icon-row-dark .icon-btn {
  border-color: rgba(255, 255, 255, .4);   /* 3.61:1 on the footer navy */
  color: #fff;
}
.icon-row-dark .icon-btn:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.icon-row-dark .icon-btn-fb:hover { border-color: #4e9bff; background: rgba(78, 155, 255, .16); }
.icon-row-dark .icon-btn-ig:hover { border-color: #ff6fa5; background: rgba(255, 111, 165, .16); }

/* ---------- Legal pages ---------- */

.legal { max-width: 44rem; margin-inline: auto; }
.legal h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin-top: 2.5rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--pencil); }
.legal ul { padding-left: 1.15rem; margin: 0 0 1.15em; }
.legal li { margin-bottom: .45em; }
.legal strong { color: var(--ink); }

.legal-meta {
  margin-bottom: 2.5rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: .92rem;
  color: var(--pencil);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .82);
  padding-block: 3.25rem 1.75rem;
}
.site-footer a { color: #fff; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-name span { color: rgba(255, 255, 255, .6); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

.footer-grid h2 {
  font-family: 'Karla', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .55rem; }
.footer-grid p { font-size: .95rem; }

.footer-end {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  font-size: .87rem;
  color: rgba(255, 255, 255, .62);
}
.footer-end a { color: rgba(255, 255, 255, .82); }
.footer-end a:hover { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.credit { color: rgba(255, 255, 255, .62); }
.credit a { font-weight: 700; text-decoration: underline; }

/* ---------- Scroll reveal ----------
   Added by script only, so content is never hidden without JS. */

.js-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js-reveal.is-visible { opacity: 1; transform: none; }

.panel-grid .js-reveal:nth-child(2) { transition-delay: .07s; }
.panel-grid .js-reveal:nth-child(3) { transition-delay: .14s; }
.panel-grid .js-reveal:nth-child(4) { transition-delay: .21s; }
.panel-grid .js-reveal:nth-child(5) { transition-delay: .28s; }
.panel-grid .js-reveal:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js-reveal { opacity: 1; transform: none; }
  .panel-grid .js-reveal { transition-delay: 0s !important; }
}

@media print {
  .js-reveal { opacity: 1 !important; transform: none !important; }
  .site-header { position: static; }
  .lightbox { display: none; }
}

/* On narrow phones the header tagline wraps to three lines. The footer
   still carries it, so drop it from the header only. */
@media (max-width: 430px) {
  .site-header .brand-name span { display: none; }
  .site-header .brand img { width: 46px; }
  /* "Kinder Kollege Daycare" cannot sit on one line beside the menu button at
     phone width, so step the wordmark down and let it break after "Kollege". */
  .site-header .brand-name { font-size: 1.08rem; line-height: 1.12; }
}
@media (max-width: 360px) {
  .site-header .brand-name { font-size: .98rem; }
  .site-header .brand img { width: 40px; }
  .nav-toggle { padding: .5rem .8rem; }
}