/* ==========================================================================
   Little Millennium Padur
   Shared stylesheet
   Palette sampled from the Little Millennium logo artwork.
   ========================================================================== */

:root {
  /* Brand */
  --blue:      #0072bc;
  --blue-dark: #005a96;
  --magenta:   #e0195f;
  --green:     #2e9e4f;
  --lime:      #8cc63f;
  --orange:    #ef8022;
  --purple:    #92348f;
  --yellow:    #ffd200;

  /* Neutrals */
  --ink:       #1f2933;
  --ink-soft:  #52606d;
  --line:      #e4e7eb;
  --bg:        #ffffff;
  --bg-alt:    #f7f9fb;
  --footer:    #16232e;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 4px 18px rgba(22, 35, 46, .09);
  --shadow-lg: 0 14px 38px rgba(22, 35, 46, .16);

  --wrap:      1180px;
}

* { box-sizing: border-box; }

/* Any `display` set on a class beats the browser's own [hidden] rule, which
   silently un-hides elements. Keep the attribute authoritative. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue); }

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
  color: var(--ink);
}

h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.18rem; }

p { margin: 0 0 1rem; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Keyboard users get a way past the nav on every page. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- Top bar */
.topbar {
  background: var(--blue);
  color: #fff;
  font-size: .85rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .item { display: inline-flex; align-items: center; gap: 7px; }
.topbar svg { width: 15px; height: 15px; flex: none; }

/* ----------------------------------------------------------------- Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 148px; }
.brand .centre {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  border-left: 2px solid var(--line);
  padding-left: 12px;
  line-height: 1.3;
}

/* Nav */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }

.nav ul {
  list-style: none; display: flex; align-items: center;
  gap: 4px; margin: 0; padding: 0;
}
.nav a {
  display: block;
  padding: 9px 11px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  /* Eight top-level items including a long one — never let a label wrap. */
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.nav a:hover { background: var(--bg-alt); color: var(--blue); }
.nav a[aria-current="page"] { color: var(--blue); background: #eaf4fb; }

.nav .cta a {
  background: var(--magenta);
  color: #fff;
  padding: 10px 20px;
}
.nav .cta a:hover { background: #c2154f; color: #fff; }

/* ---- Dropdown ---- */
.nav .has-sub { position: relative; }
.nav .has-sub > a { display: flex; align-items: center; gap: 5px; }
.nav .caret { width: 13px; height: 13px; flex: none; transition: transform .18s ease; }

.nav .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 248px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 7px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  /* Hidden without display:none, so it can be reached by keyboard focus. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 110;
}
.nav .has-sub:hover > .submenu,
.nav .has-sub:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav .has-sub:hover > a .caret,
.nav .has-sub:focus-within > a .caret { transform: rotate(180deg); }

.nav .submenu a {
  padding: 9px 12px;
  font-weight: 500;
  font-size: .9rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------------- Hero */
.hero { background: var(--bg-alt); padding: 26px 0 0; }
.hero img { border-radius: var(--radius); box-shadow: var(--shadow); }

.page-head {
  background: var(--blue);
  color: #fff;
  padding: 40px 0;
}
.page-head h1 { color: #fff; margin: 0 0 6px; }
.page-head p { margin: 0; opacity: .9; }
.crumbs { font-size: .85rem; opacity: .85; margin-bottom: 10px; }
.crumbs a { color: #fff; }

/* --------------------------------------------------------------- Sections */
section { padding: 58px 0; }
section.alt { background: var(--bg-alt); }

.section-head { text-align: center; max-width: 740px; margin: 0 auto 38px; }
.section-head p { color: var(--ink-soft); margin: 0; }
.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 8px;
}

/* Grids */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .age {
  display: inline-block;
  font-size: .78rem; font-weight: 700;
  color: #fff; background: var(--blue);
  padding: 3px 11px; border-radius: 999px;
  margin-bottom: 10px;
}

/* Coloured left edge, cycled so adjacent cards differ. */
.card--a { border-top: 4px solid var(--magenta); }
.card--b { border-top: 4px solid var(--blue); }
.card--c { border-top: 4px solid var(--green); }
.card--d { border-top: 4px solid var(--orange); }
.card--e { border-top: 4px solid var(--purple); }
.card--f { border-top: 4px solid var(--lime); }
.card--g { border-top: 4px solid var(--yellow); }

/* Cards that are themselves links (after-school tiles). */
.card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.card--link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.card--link h3 { color: var(--blue); }

.card-art {
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

/* Activity page illustration. */
.activity-art { width: 100%; }

/* Long "what we cover" lists read better in two columns. */
.ticks--cols {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  columns: 2;
  column-gap: 40px;
}
.ticks--cols li { break-inside: avoid; }

.icon-badge {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #eaf4fb; color: var(--blue);
  margin-bottom: 14px;
}
.icon-badge svg { width: 24px; height: 24px; }

/* Stats */
.stats { background: var(--blue); color: #fff; }
.stats .num {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800; line-height: 1;
  color: var(--yellow);
}
.stats .lbl { font-size: .92rem; opacity: .92; }
.stats .grid > div { text-align: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary { background: var(--magenta); color: #fff; }
.btn-primary:hover { background: #c2154f; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn svg { width: 18px; height: 18px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Split (text + image) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* Lists */
.ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 9px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* CTA band */
.cta-band { background: var(--magenta); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { opacity: .95; max-width: 640px; margin: 0 auto 22px; }
.cta-band .btn-row { justify-content: center; }

/* ------------------------------------------------------------ Enquiry modal */
.modal {
  width: min(94vw, 480px);
  /* The form plus the three steps is taller than a phone screen, so cap the
     height and scroll inside rather than relying on UA defaults. */
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(10, 20, 30, .35);
  color: var(--ink);
}
.modal::backdrop { background: rgba(12, 22, 32, .62); }

/* Header strip of the modal. */
.modal-card { position: relative; }
.modal h2 {
  margin: 0;
  padding: 20px 54px 6px 26px;
  font-size: 1.32rem;
  background: var(--magenta);
  color: #fff;
}
.modal-lede {
  margin: 0;
  padding: 0 26px 20px;
  background: var(--magenta);
  color: rgba(255, 255, 255, .92);
  font-size: .9rem;
  line-height: 1.5;
}
.modal-body { padding: 22px 26px 26px; }

.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}
.modal-close:hover { background: rgba(255, 255, 255, .34); }
.modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Success state, swapped in after a successful submit. */
.modal-done { padding: 34px 26px 30px; text-align: center; }
.modal-done h3 { margin-bottom: .3em; }
.modal-done p { color: var(--ink-soft); }
.modal-tick {
  width: 62px; height: 62px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #e7f7ec; color: var(--green);
}
.modal-tick svg { width: 30px; height: 30px; }

.modal .btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* "What happens next" — the three-card section from the admissions page,
   compacted into a list so it fits inside the dialog. */
.modal-steps {
  margin: 22px -26px -26px;
  padding: 18px 26px 22px;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}
.modal-steps .eyebrow { margin-bottom: 12px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.steps li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.steps strong { display: block; color: var(--ink); }
.steps .n {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: .74rem; font-weight: 700;
}
/* Echoes the coloured card edges the section used on the admissions page. */
.steps li:nth-child(1) .n { background: var(--magenta); }
.steps li:nth-child(2) .n { background: var(--blue); }
.steps li:nth-child(3) .n { background: var(--green); }

@media (max-width: 480px) {
  .modal-steps { margin: 20px -20px -22px; padding: 16px 20px 20px; }
}

@media (max-width: 480px) {
  .modal h2 { padding: 18px 50px 6px 20px; font-size: 1.18rem; }
  .modal-lede { padding: 0 20px 18px; }
  .modal-body { padding: 18px 20px 22px; }
  .modal .btn-row .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery button {
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); line-height: 0;
}
.gallery img { width: 100%; transition: transform .3s ease; }
.gallery button:hover img { transform: scale(1.04); }
.gallery button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10,16,22,.92);
  display: grid; place-items: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(94vw, 900px); max-height: 88vh; border-radius: 10px; }
.lightbox .close {
  position: absolute; top: 16px; right: 18px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff;
  font-size: 1.5rem; cursor: pointer;
}
.lightbox .close:hover { background: rgba(255,255,255,.3); }

/* ------------------------------------------------------------------ Forms */
.form-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.form-card > h2 {
  margin: 0; padding: 15px 24px;
  background: var(--blue); color: #fff;
  font-size: 1.05rem; letter-spacing: .02em;
}
.form-card .body { padding: 24px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 5px; }
.field .req { color: var(--magenta); }

input[type="text"], input[type="tel"], input[type="email"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd6de;
  border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,114,188,.16);
}
textarea { min-height: 96px; resize: vertical; }

.field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* A lone field in a row would otherwise sit in a third of the width with two
   empty columns beside it. */
.field-row > .field:only-child { grid-column: 1 / -1; }
.field-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px; }
.checks label { display: flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 400; }
.checks input { accent-color: var(--magenta); }

.consent {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px; font-size: .88rem;
}
.consent input { margin-top: 4px; accent-color: var(--magenta); }

.form-note { font-size: .84rem; color: var(--ink-soft); }

/* ------------------------------------------------------ Registration wizard */
/* Step indicator */
.wiz-nav {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  counter-reset: none;
}
.wiz-nav li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-soft);
  min-width: 0;
}
.wiz-nav.interactive li { cursor: default; }
.wiz-nav .n {
  flex: none;
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--line); color: var(--ink-soft);
  font-size: .76rem; font-weight: 700;
}
.wiz-nav .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wiz-nav li.on {
  border-color: var(--blue);
  background: #eaf4fb;
  color: var(--blue);
}
.wiz-nav li.on .n { background: var(--blue); color: #fff; }

.wiz-nav li.done { color: var(--green); border-color: #b7e0c3; }
.wiz-nav li.done .n { background: var(--green); color: #fff; }
.wiz-nav.interactive li.done { cursor: pointer; }
.wiz-nav.interactive li.done:hover { background: #f0faf3; }

/* Controls */
.wiz-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.wiz-actions [data-next] { margin-left: auto; }
.wiz-actions [data-finish] { margin-left: auto; }
.wiz-actions [data-next]:not([hidden]) ~ [data-finish] { margin-left: 0; }
.wiz-count { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.wiz-actions .btn svg { width: 17px; height: 17px; }

/* ---- Photo cropper ---- */
.modal--crop { width: min(94vw, 560px); }
.modal--crop .modal-body { padding-top: 18px; }

.crop-stage {
  background: #12181f;
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* Cropper needs a bounded box or it grows with the image. */
  max-height: 56vh;
}
.crop-stage img { display: block; max-width: 100%; }

/* The photo field: avatar on the left, actions on the right. */
.photo-field {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px dashed #cfd6de;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  transition: border-color .16s ease, background .16s ease;
}
.photo-field:hover { border-color: var(--blue); background: #f2f8fc; }
/* Mirror the focus ring onto the whole field, since the input itself is hidden. */
.photo-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,114,188,.16); }

.photo-thumb {
  width: 68px; height: 68px;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(22,35,46,.16);
  background: #eaf4fb;
}

.photo-actions { min-width: 0; }

/* The native file input is unstyleable, so hide it and drive it from a label. */
.photo-input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* `.field label { display:block }` outranks a lone class, so qualify it —
   otherwise the button stretches the width of the field. */
.field label.photo-btn {
  display: inline-block;
  margin-bottom: 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: .84rem; font-weight: 600;
  cursor: pointer;
  transition: background .16s ease;
}
.field label.photo-btn:hover { background: var(--blue-dark); }

.photo-meta {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.photo-meta strong { color: var(--green); }

.photo-remove {
  border: 0; background: none; padding: 0;
  margin-left: 10px;
  color: var(--magenta); font: inherit; font-size: .84rem;
  font-weight: 600; cursor: pointer; text-decoration: underline;
}
.photo-remove:hover { color: #a01134; }

@media (max-width: 480px) {
  .photo-field { flex-direction: column; align-items: flex-start; }
}

/* Validation states */
.field-error {
  display: block;
  margin-top: 5px;
  font-size: .8rem;
  font-weight: 500;
  color: #c2154f;
}
input.input-error, select.input-error, textarea.input-error {
  border-color: #e0195f;
  background: #fff8fa;
}
input.input-error:focus, select.input-error:focus, textarea.input-error:focus {
  box-shadow: 0 0 0 3px rgba(224, 25, 95, .15);
}
.consent .field-error { margin-left: 24px; }

@media (max-width: 760px) {
  /* Numbers only — five labels will not fit a phone. */
  .wiz-nav { gap: 5px; }
  .wiz-nav li { justify-content: center; padding: 9px 4px; }
  .wiz-nav .t { display: none; }
  .wiz-actions [data-next], .wiz-actions [data-finish] { margin-left: auto; }
  .wiz-actions .btn { flex: 1 1 auto; justify-content: center; }
}

.alert { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 22px; }
.alert-ok  { background: #e7f7ec; border: 1px solid #9fd9b0; color: #1c6b39; }
.alert-err { background: #fdecef; border: 1px solid #f2b5c1; color: #a01636; }

/* ----------------------------------------------------------------- Footer */
.site-footer { background: var(--footer); color: #b9c4cf; padding: 52px 0 0; font-size: .92rem; }
.site-footer h3 { color: #fff; font-size: 1.02rem; margin-bottom: 16px; }
.site-footer a { color: #b9c4cf; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .grid { gap: 34px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer .contact-line { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.site-footer .contact-line svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--yellow); }

.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 3px 0; }
.hours td:last-child { text-align: right; color: #fff; }

.social { display: flex; gap: 10px; margin-top: 16px; }
.social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: grid; place-items: center; color: #fff;
}
.social a:hover { background: var(--blue); }
.social svg { width: 17px; height: 17px; }

.colophon {
  margin-top: 42px; padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.11);
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between; font-size: .85rem;
}

/* Floating call button, mobile only — the main conversion path is a phone call. */
.call-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: none; align-items: center; gap: 9px;
  background: var(--green); color: #fff;
  padding: 13px 20px; border-radius: 999px;
  text-decoration: none; font-weight: 600;
  box-shadow: var(--shadow-lg);
}
.call-fab svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1100px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 26px; }
  .checks { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 130px); overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px; }
  .nav a { padding: 13px 14px; border-radius: var(--radius-sm); }
  .nav .cta a { margin-top: 6px; text-align: center; justify-content: center; }

  /* No hover on touch — the submenu is simply always open, indented. */
  .nav .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: 0 0 6px 14px;
    border-left: 2px solid var(--line);
    margin-left: 14px;
  }
  .nav .submenu a { padding: 10px 12px; white-space: normal; }
  .nav .caret { display: none; }
  .site-header .wrap { position: relative; }
  .brand .centre { display: none; }
}

@media (max-width: 700px) {
  section { padding: 42px 0; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .field-row, .field-row-2 { grid-template-columns: 1fr; }
  .ticks--cols { columns: 1; }
  .checks { grid-template-columns: repeat(2, 1fr); }
  .topbar .wrap { justify-content: flex-start; font-size: .8rem; }
  .call-fab { display: inline-flex; }
  .site-footer { padding-bottom: 78px; }
  .colophon { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .btn:hover { transform: none; }
  .gallery button:hover img { transform: none; }
}

@media print {
  .topbar, .nav, .nav-toggle, .call-fab, .cta-band { display: none; }
  body { color: #000; }
}

/* --- Contact page: opening hours + FAQ ------------------------------------ */
/* NB: the footer already uses .hours (white on dark), hence the separate
   .hours-table name here — reusing it would render white text on white. */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(22, 35, 46, .09);
}
.hours-table th,
.hours-table td { padding: 13px 20px; font-size: 15px; }
.hours-table th { text-align: left; font-weight: 600; color: var(--ink, #16232e); }
.hours-table td { text-align: right; color: #4a5b68; white-space: nowrap; }
.hours-table tr + tr { border-top: 1px solid #eceff2; }
.hours-table tr.closed th,
.hours-table tr.closed td { color: #93a1ac; }

.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(22, 35, 46, .07);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary {
  padding: 16px 46px 16px 20px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  list-style: none;          /* Firefox */
  color: var(--ink, #16232e);
}
.faq summary::-webkit-details-marker { display: none; }
/* Chevron drawn in CSS so the accordion needs no icon asset. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 20px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--blue, #0072bc);
  border-bottom: 2px solid var(--blue, #0072bc);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:focus-visible { outline: 3px solid var(--blue, #0072bc); outline-offset: -3px; }
.faq details p { padding: 0 20px 18px; margin: 0; color: #4a5b68; line-height: 1.65; }

/* Visible to screen readers only — used for the hours table caption. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* --- Contact: map beside the opening hours -------------------------------- */
/* Wider column for the map, narrower for the hours. These rules sit after the
   generic .split media query further up the file, so the override below has to
   restate the single-column stacking for narrow screens. */
.split--map { grid-template-columns: 1.35fr 1fr; align-items: stretch; gap: 30px; }

.map-frame {
  display: flex;                       /* lets the iframe fill the column height */
  min-height: 420px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(22, 35, 46, .09);
}
.map-frame iframe { flex: 1; width: 100%; border: 0; display: block; }

.hours-col { display: flex; flex-direction: column; justify-content: center; }
.hours-col h3 { margin: 0 0 14px; font-size: 20px; }
.hours-note { margin: 14px 2px 0; font-size: 14px; color: #6b7a86; line-height: 1.6; }

@media (max-width: 980px) {
  .split--map { grid-template-columns: 1fr; }
  .map-frame { min-height: 320px; }
}