/* ==========================================================================
   GUITAR LESSONS — /guitar-lessons-bromsgrove
   ==========================================================================

   A standalone stylesheet for one standalone page. It deliberately does NOT
   load css/styles.css: that file is the dark, lamp-lit theme built for the
   studio pages, and this page is selling something else to somebody else —
   a parent in Bromsgrove deciding whether to drive their kid out to a barn
   on a Tuesday. Same company, daylight version.

   What IS shared with the rest of the site:
     - the two Google fonts (Lora + Raleway) — already loaded, no new request
     - the amber and terracotta brand accents, re-tuned for a light ground
     - the 8px spacing rhythm and the corner radii
     - the class contract js/main.js expects (.reveal, .error-summary,
       .field__error, .btn__spinner) so the shared form validation just works

   Every colour pair below was measured, not guessed. Ratios are noted in
   the token block and all meet WCAG 2.1 AA (4.5:1 text, 3:1 non-text).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colour — the studio palette turned inside out. Same brick/amber/
     terracotta family as the main site, but on cream instead of near-black,
     which is what makes this page read as friendly rather than moody. */
  --l-bg:        #FBF7F1;  /* warm cream — page ground                      */
  --l-bg-tint:   #F5EDE1;  /* alternating bands, quiet panels               */
  --l-surface:   #FFFFFF;  /* cards, form fields                            */

  --l-text:      #2A211A;  /* headings and body — 14.8:1 on --l-bg          */
  --l-muted:     #6B5A4A;  /* secondary copy   —  6.2:1 on --l-bg           */

  --l-amber:     #E8A33D;  /* the brand accent — primary button fill        */
  --l-amber-dk:  #A8701C;  /* button edge — 3.9:1 on --l-bg, meets 1.4.11   */
  --l-on-amber:  #241C15;  /* text on an amber button — 7.8:1               */

  --l-terra:     #9E4F22;  /* terracotta, darkened for light — 5.5:1        */
  --l-terra-dk:  #85401A;  /* link/button hover — 7.2:1                     */
  --l-moss:      #4F5C3C;  /* the plants — the "yes" ticks, 6.7:1           */

  --l-line:      #E6DCCC;  /* decorative hairlines (not load-bearing)       */
  --l-control:   #8C7A66;  /* form field borders — 3.9:1, meets AA non-text */

  --l-error:     #A3301A;  /* 6.6:1 on --l-bg                               */

  /* Type — same families and the same fluid clamp() approach as the main
     site, so the two never look like different companies. Body never drops
     below 16px: anything smaller makes iOS zoom the page on focus. */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step--1: clamp(0.85rem, 0.83rem + 0.12vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.38rem);
  --step-2:  clamp(1.40rem, 1.26rem + 0.70vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.48rem + 1.35vw, 2.60rem);
  --step-4:  clamp(2.05rem, 1.60rem + 2.25vw, 3.40rem);

  /* Spacing — the same 8px rhythm the rest of the site uses. */
  --sp-2xs: 0.25rem;  --sp-xs: 0.5rem;  --sp-sm: 1rem;
  --sp-md:  1.5rem;   --sp-lg: 2.5rem;  --sp-xl: 4rem;   --sp-2xl: 5.5rem;

  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;

  /* Warm-tinted shadows. Neutral black shadows go grey and dirty on cream. */
  --shadow-card: 0 1px 2px rgba(74, 54, 36, 0.06),
                 0 6px 20px rgba(74, 54, 36, 0.07);
  --shadow-lift: 0 2px 6px rgba(74, 54, 36, 0.08),
                 0 14px 36px rgba(74, 54, 36, 0.12);

  --w-page:  68rem;
  --w-prose: 36rem;   /* ~65 characters — the readable measure */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchor jumps land with the section heading clear of the top edge
     instead of jammed against it. */
  scroll-padding-top: var(--sp-md);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--l-bg);
  color: var(--l-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.18;
  margin: 0;
  font-weight: 600;
  /* Keeps a two-line heading from leaving one orphaned word on line two.
     Progressive: browsers without support just wrap normally. */
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); letter-spacing: -0.01em; }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-sm); }
p:last-child { margin-bottom: 0; }

/* Long URLs, emails and anything a visitor types can otherwise force the
   phone layout wider than the screen. */
a { color: var(--l-terra); overflow-wrap: anywhere; }
a:hover { color: var(--l-terra-dk); }

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

/* One focus style for the whole page, always visible, never removed. */
:focus-visible {
  outline: 3px solid var(--l-terra);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.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;
}

.skip-link {
  position: absolute; top: -4rem; left: var(--sp-sm);
  z-index: 100;
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--l-text); color: var(--l-bg);
  border-radius: var(--r-sm); text-decoration: none;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: var(--sp-sm); }


/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-sm);
}
@media (min-width: 40em) { .wrap { padding-inline: var(--sp-md); } }

.section { padding-block: var(--sp-xl); }
.section--tint { background: var(--l-bg-tint); }
.section--tight { padding-block: var(--sp-lg); }

.section__head { max-width: var(--w-prose); margin-bottom: var(--sp-lg); }
.section__head p { color: var(--l-muted); margin-top: var(--sp-xs); }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-terra);
  margin: 0 0 var(--sp-xs);
}


/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-xs);
  /* 0.95rem block padding on a 1rem font gives a ~52px tall control, well
     clear of the 44px minimum touch target with room to spare either side. */
  padding: 0.95rem 1.75rem;
  min-height: 52px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 200ms var(--ease),
              border-color 200ms var(--ease),
              transform 200ms var(--ease),
              box-shadow 200ms var(--ease);
}

.btn--primary {
  background: var(--l-amber);
  color: var(--l-on-amber);
  /* The fill alone is only 2:1 against cream. The darker edge is what
     carries the control's boundary contrast (WCAG 1.4.11). */
  border-color: var(--l-amber-dk);
  box-shadow: var(--shadow-card);
}
.btn--primary:hover {
  background: #F0B45B;
  color: var(--l-on-amber);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--l-text);
  border-color: var(--l-control);
}
.btn--ghost:hover { background: var(--l-bg-tint); color: var(--l-text); }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.6; cursor: not-allowed; transform: none;
}

.btn__spinner {
  width: 1.05em; height: 1.05em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.btn__spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------------------
   5. HEADER — a wordmark, not a nav.
   This page has exactly one job. There is deliberately no navigation:
   every extra link is a way out of the funnel.
   -------------------------------------------------------------------------- */
.masthead {
  padding-block: var(--sp-md) var(--sp-xs);
  border-bottom: 1px solid var(--l-line);
}
.masthead__inner { display: flex; align-items: baseline; gap: var(--sp-xs); flex-wrap: wrap; }
.masthead__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--l-text);
  text-decoration: none;
}
.masthead__name:hover { color: var(--l-terra-dk); }
.masthead__sub {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--l-muted);
}


/* --------------------------------------------------------------------------
   6. HERO
   Mobile: copy first, photo underneath. Desktop: side by side, copy left.
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--sp-lg) var(--sp-xl); }

.hero__grid { display: grid; gap: var(--sp-lg); align-items: center; }
@media (min-width: 56em) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--sp-xl); }
}

.hero__copy { max-width: 34rem; }
.hero h1 { margin-bottom: var(--sp-sm); }

.hero__lede {
  font-size: var(--step-1);
  color: var(--l-muted);
  max-width: 30rem;
  margin-bottom: var(--sp-md);
}

/* The two facts a parent needs before they'll read anything else: where it
   is and what it costs. Above the fold on every screen size. */
.hero__facts {
  list-style: none;
  margin: 0 0 var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-left: 4px solid var(--l-amber);
  border-radius: var(--r-md);
  display: grid;
  gap: var(--sp-2xs);
  box-shadow: var(--shadow-card);
}
.hero__facts li { display: flex; align-items: flex-start; gap: var(--sp-xs); }
.hero__facts strong { font-weight: 700; }
.hero__facts .icon { color: var(--l-terra); flex: none; margin-top: 0.28em; }

.hero__cta { display: flex; flex-direction: column; gap: var(--sp-xs); align-items: flex-start; }
.hero__cta .btn { width: 100%; }
@media (min-width: 30em) { .hero__cta .btn { width: auto; } }

.hero__reassure {
  font-size: var(--step--1);
  color: var(--l-muted);
  margin: 0;
}

.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  /* Matches the real 1040x801 file, so the browser reserves the right box
     and the page doesn't jump when the photo arrives (CLS). */
  aspect-ratio: 1040 / 801;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   7. CARD GRID — "Why here"
   -------------------------------------------------------------------------- */
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-md);
}
@media (min-width: 38em) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: var(--sp-xs); }
.card p { color: var(--l-muted); font-size: var(--step-0); }

.card__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--l-bg-tint);
  color: var(--l-terra);
  margin-bottom: var(--sp-sm);
}


/* --------------------------------------------------------------------------
   8. STEPS — "How it works"
   An ordered list styled as numbered cards. The numbers come from the list
   itself, so a screen reader announces "1 of 4" without extra markup.
   -------------------------------------------------------------------------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  counter-reset: step;
  display: grid; gap: var(--sp-sm);
}
@media (min-width: 48em) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); } }

.steps li {
  counter-increment: step;
  display: flex; align-items: flex-start; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--r-md);
}
@media (min-width: 48em) {
  .steps li { flex-direction: column; gap: var(--sp-xs); }
}
.steps li::before {
  content: counter(step);
  flex: none;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--l-amber);
  color: var(--l-on-amber);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  /* Decorative duplicate of the list's own numbering — the ordered list
     already conveys the sequence to assistive tech. */
}
.steps strong { display: block; font-weight: 700; }
.steps span { color: var(--l-muted); font-size: var(--step-0); }


/* --------------------------------------------------------------------------
   9. PRICE PANEL
   The number is the small part. The three "no"s underneath are the point:
   parents arrive braced for a monthly music-school tie-in.
   -------------------------------------------------------------------------- */
.price {
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--r-lg);
  padding: var(--sp-lg) var(--sp-md);
  box-shadow: var(--shadow-card);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}
@media (min-width: 40em) { .price { padding: var(--sp-xl) var(--sp-lg); } }

.price__figure {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.2rem + 4vw, 4.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Tabular figures keep the £ and digits optically steady. */
  font-variant-numeric: tabular-nums;
}
.price__unit {
  display: block;
  font-size: var(--step-1);
  color: var(--l-muted);
  margin-top: var(--sp-xs);
}

.price__nos {
  list-style: none;
  margin: var(--sp-lg) 0 0;
  padding: var(--sp-md) 0 0;
  border-top: 1px solid var(--l-line);
  display: grid; gap: var(--sp-sm);
  text-align: left;
}
@media (min-width: 40em) { .price__nos { grid-template-columns: repeat(3, 1fr); } }

.price__nos li { display: flex; align-items: flex-start; gap: var(--sp-xs); }
.price__nos .icon { color: var(--l-moss); flex: none; margin-top: 0.22em; }
.price__nos strong { display: block; font-weight: 700; }
.price__nos span { color: var(--l-muted); font-size: var(--step--1); }


/* Parent review — continues the price band, so no top padding of its own. */
.review-section { padding-top: 0; }

.review {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--sp-lg) var(--sp-md);
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.review__stars {
  margin: 0 0 var(--sp-sm);
  color: var(--l-amber-dk);
  font-size: var(--step-1);
  letter-spacing: 0.15em;
}
.review__quote { margin: 0; }
.review__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.55;
}
.review__who { margin-top: var(--sp-md); }
.review__who strong { display: block; }
.review__who span { color: var(--l-muted); font-size: var(--step--1); }


/* --------------------------------------------------------------------------
   10. WHERE — address, map
   -------------------------------------------------------------------------- */
.where__grid { display: grid; gap: var(--sp-lg); }
@media (min-width: 56em) { .where__grid { grid-template-columns: 1fr 1.1fr; gap: var(--sp-xl); } }

/* The map keeps a fixed ratio so it reserves its own space before the
   iframe loads, rather than collapsing then pushing the page down. */
.map {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--l-line);
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 56em) { .map { aspect-ratio: 3 / 4; } }

.where__photo img {
  width: 100%;
  border-radius: var(--r-md);
  aspect-ratio: 1000 / 750;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}


/* --------------------------------------------------------------------------
   11. TEACHER BLOCK
   -------------------------------------------------------------------------- */
.teacher__grid { display: grid; gap: var(--sp-lg); align-items: center; }
@media (min-width: 48em) { .teacher__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-xl); } }

.teacher__photo img {
  width: 100%;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}


/* --------------------------------------------------------------------------
   12. FAQ
   Built on native <details>/<summary>: keyboard-operable, screen-reader
   correct and open-on-find-in-page for free, with no JavaScript at all.
   -------------------------------------------------------------------------- */
.faq { max-width: 44rem; }

.faq details {
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-xs);
  overflow: hidden;
}
.faq details[open] { box-shadow: var(--shadow-card); }

.faq summary {
  /* Removes the default disclosure triangle so the custom chevron below
     isn't doubled up. */
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  min-height: 56px;              /* comfortably past the 44px touch minimum */
  font-weight: 600;
  font-size: var(--step-0);
  transition: background-color 180ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--l-bg-tint); }
.faq summary:focus-visible { outline-offset: -3px; }

.faq summary .chevron {
  flex: none;
  color: var(--l-terra);
  transition: transform 220ms var(--ease);
}
.faq details[open] summary .chevron { transform: rotate(180deg); }

.faq__answer {
  padding: 0 var(--sp-md) var(--sp-md);
  color: var(--l-muted);
}

@media (prefers-reduced-motion: reduce) {
  .faq summary .chevron { transition: none; }
}

/* Anything still waiting on Josh's own words. Loud on purpose. */
.todo {
  display: inline-block;
  background: #FFF3CD;
  border: 1px dashed var(--l-amber-dk);
  border-radius: var(--r-sm);
  padding: 0.15em 0.5em;
  font-size: var(--step--1);
  font-weight: 700;
  color: #6B4A05;   /* 7.4:1 on #FFF3CD */
}


/* --------------------------------------------------------------------------
   13. FORM
   -------------------------------------------------------------------------- */
.form-section { scroll-margin-top: var(--sp-md); }

.form-card {
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  box-shadow: var(--shadow-card);
  max-width: 40rem;
}
@media (min-width: 40em) { .form-card { padding: var(--sp-lg); } }

.form__row { margin-bottom: var(--sp-md); }

/* Two-up on wider screens, stacked on phones — never side by side at a
   width where either field would be too narrow to read what you typed. */
.form__pair { display: grid; gap: var(--sp-md); }
@media (min-width: 34em) { .form__pair { grid-template-columns: 1fr 1fr; } }

.field__label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--sp-2xs);
}
.field__required { color: var(--l-error); }

.field__hint {
  display: block;
  font-size: var(--step--1);
  color: var(--l-muted);
  margin-bottom: var(--sp-2xs);
}

.field__input, .field__select, .field__textarea {
  width: 100%;
  /* 16px minimum — anything less and iOS zooms the whole page on focus,
     which on a phone reads as the site breaking. */
  font-size: max(1rem, var(--step-0));
  font-family: var(--font-body);
  color: var(--l-text);
  background: var(--l-surface);
  border: 1px solid var(--l-control);
  border-radius: var(--r-sm);
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field__textarea { min-height: 7rem; resize: vertical; }

.field__input:hover, .field__select:hover, .field__textarea:hover {
  border-color: var(--l-text);
}
.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible {
  outline: 3px solid var(--l-terra);
  outline-offset: 1px;
  border-color: var(--l-terra);
}

/* Native select arrow varies wildly between browsers; this gives one
   consistent chevron with room for it on the right. */
.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.15rem;
  padding-right: 2.6rem;
}

[aria-invalid="true"] { border-color: var(--l-error) !important; }

.field__error {
  display: flex; align-items: flex-start; gap: 0.4rem;
  margin: var(--sp-2xs) 0 0;
  color: var(--l-error);
  font-size: var(--step--1);
  font-weight: 600;
}
.field__error[hidden] { display: none; }
.field__error svg { width: 1.1em; height: 1.1em; flex: none; margin-top: 0.18em; }

/* Filled in and revealed by js/main.js when a submit fails. Focus moves
   here so keyboard and screen reader users are told what went wrong,
   rather than being left where they were with nothing announced. */
.error-summary {
  padding: var(--sp-md);
  margin-bottom: var(--sp-md);
  background: #FDF1EE;
  border: 1px solid var(--l-error);
  border-left-width: 4px;
  border-radius: var(--r-md);
}
.error-summary[hidden] { display: none; }
.error-summary h2 {
  font-size: var(--step-1);
  color: var(--l-error);
  margin-bottom: var(--sp-xs);
}
.error-summary ul { margin: 0; padding-left: var(--sp-md); }
.error-summary a { color: var(--l-error); font-weight: 700; }

/* Off-screen spam trap, out of the tab order and hidden from screen
   readers — no real visitor ever meets it. */
.honeypot {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.form__footer { margin-top: var(--sp-lg); }
.form__footer .btn { width: 100%; }
@media (min-width: 34em) { .form__footer .btn { width: auto; } }

.form__note {
  font-size: var(--step--1);
  color: var(--l-muted);
  margin: var(--sp-sm) 0 0;
}

/* The alternative for anyone who would simply rather ring up. Never make
   a phone number the hard path on a page aimed at busy parents. */
.form__alt {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--l-line);
  font-size: var(--step-0);
}

/* The blanket overflow-wrap on <a> exists for long email addresses, but it
   also lets a phone number break in the middle ("+44 7763 / 998367"), which
   reads as a typo. Numbers stay whole and wrap to their own line instead. */
a[href^="tel:"] { white-space: nowrap; overflow-wrap: normal; }


/* --------------------------------------------------------------------------
   14. STICKY MOBILE CTA
   Phone-only. Appears once the hero has scrolled away and hides again when
   the form is on screen, so it can never sit on top of the field someone
   is typing into (WCAG 2.2 "focus not obscured"). js/main.js isn't involved;
   the page's own inline script toggles .is-hidden.
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: var(--sp-xs) var(--sp-sm);
  /* env() keeps the bar above the iPhone home indicator. */
  padding-bottom: calc(var(--sp-xs) + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 247, 241, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--l-line);
  box-shadow: 0 -4px 20px rgba(74, 54, 36, 0.10);
  display: flex; align-items: center; gap: var(--sp-sm);
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
}
.sticky-cta__price {
  font-size: var(--step--1);
  line-height: 1.3;
  color: var(--l-muted);
  flex: 1;
}
.sticky-cta__price strong { display: block; color: var(--l-text); font-size: var(--step-0); }
.sticky-cta .btn { flex: none; padding-inline: var(--sp-md); }

.sticky-cta.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  /* Removed from the tab order too — a hidden control must not be
     reachable by keyboard. */
  visibility: hidden;
}

/* Desktop has the hero CTA and the form both comfortably reachable; the
   bar is only worth its screen space on a phone. */
@media (min-width: 48em) { .sticky-cta { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}


/* --------------------------------------------------------------------------
   15. FOOTER
   Minimal by design: no nav, one quiet link back to the studio site.
   -------------------------------------------------------------------------- */
.foot {
  background: var(--l-bg-tint);
  border-top: 1px solid var(--l-line);
  padding-block: var(--sp-lg);
  /* Clears the sticky bar so the last line is never trapped underneath it. */
  padding-bottom: calc(var(--sp-lg) + 5rem);
  font-size: var(--step--1);
}
@media (min-width: 48em) { .foot { padding-bottom: var(--sp-lg); } }

.foot__grid { display: grid; gap: var(--sp-md); }
@media (min-width: 40em) { .foot__grid { grid-template-columns: 1fr auto; align-items: start; } }

.foot__contact { list-style: none; margin: 0; padding: 0; display: grid; }
.foot__contact li { display: flex; align-items: center; gap: var(--sp-xs); }
.foot__contact .icon { color: var(--l-terra); flex: none; }

/* The phone number and the email address are the two things a parent is
   most likely to tap instead of filling in the form, so they get a real
   tap area rather than the ~23px a bare line of text gives you. That
   also clears WCAG 2.2's 24x24 minimum, which these fail as plain links:
   they're standalone list items, so the "inline in a sentence" exemption
   doesn't apply to them the way it does to the studio link below. */
.foot__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--sp-2xs);
}
.foot__contact li:last-child { min-height: 44px; }

.foot__studio { color: var(--l-muted); margin-top: var(--sp-md); }
.foot__legal {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--l-line);
  color: var(--l-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm);
}
/* Standalone link, so the same 24x24 minimum applies here too. */
.foot__legal a {
  display: inline-flex; align-items: center;
  min-height: 32px;
}


/* --------------------------------------------------------------------------
   16. ICONS
   -------------------------------------------------------------------------- */
.icon { width: 1.15em; height: 1.15em; display: block; }
.card__icon .icon { width: 1.4rem; height: 1.4rem; }


/* --------------------------------------------------------------------------
   17. SCROLL REVEAL
   Guarded behind the .js class the page adds in <head>, so with JavaScript
   off nothing is ever hidden — the content is just there.
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-visible {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* --------------------------------------------------------------------------
   18. PRINT
   A parent who prints this wants the address, the price and the phone
   number — not the photos or the call-to-action furniture.
   -------------------------------------------------------------------------- */
@media print {
  .sticky-cta, .hero__media, .map, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .faq details { break-inside: avoid; }
  .faq details:not([open]) > *:not(summary) { display: revert; }
}