/* ==========================================================================
   Pip Floral Studio — site styles
   Plain CSS, mobile-first. No framework. No build step.

   Contents
   1. Brand tokens
   2. Fonts (local files pending — see ASSET_REQUIREMENTS.md)
   3. Reset and base
   4. Typography
   5. Layout primitives
   6. Header and navigation
   7. Footer
   8. Buttons and links
   9. Sections and patterns (hero, split, grid, steps, testimonial, cta, faq)
   10. Development placeholders
   11. Forms
   12. Utilities and motion
   ========================================================================== */

/* 1. Brand tokens ------------------------------------------------------- */
:root {
  /* Approved palette — values must not change */
  --olive:  #879655;
  --pink:   #BA81A4;
  --cream:  #F0EBD9;
  --green:  #475445;
  --orange: #EE7B30;

  /* Roles.
     Contrast (WCAG 2.x): green on cream 6.7:1, cream on green 6.7:1.
     Olive, pink and orange all fall below 3:1 against both cream and green,
     so they are used ONLY for non-text decoration (panels, rules, marks),
     never for text, icons that carry meaning, focus rings or control borders. */
  --bg:            var(--cream);
  --fg:            var(--green);
  --bg-inverse:    var(--green);
  --fg-inverse:    var(--cream);
  --rule:          color-mix(in srgb, var(--green) 22%, transparent);
  --rule-strong:   var(--green);
  --focus:         var(--green);

  /* Type */
  --font-display: "Recoleta", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body:    "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --step-2:  clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --step-3:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --step-4:  clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
  --step-5:  clamp(2.5rem, 1.7rem + 3.8vw, 4.5rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --section: clamp(3.5rem, 6vw + 1rem, 7rem);
  --gutter:  clamp(1.25rem, 4vw, 3rem);

  /* Measure and widths */
  --measure: 62ch;
  --wide: 76rem;
  --narrow: 44rem;

  --radius: 16px;
  --header-h: 5rem;
}

/* 2. Fonts ----------------------------------------------------------------
   Self-hosted WOFF2 in /assets/fonts/ (converted from the supplied OTF/TTF).
   Recoleta: one weight (Regular). Rubik: Regular, Medium, Italic (SIL OFL). */
@font-face {
  font-family: "Recoleta";
  src: url("/assets/fonts/recoleta-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 3. Reset and base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s-6); }
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible, .control:focus-visible, .nav-toggle:focus-visible { border-radius: var(--radius); }
::selection { background: var(--green); color: var(--cream); }

/* Skip link */
.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: -100%;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--green);
  color: var(--cream);
  text-decoration: none;
  font-weight: 500;
}
.skip-link:focus { top: var(--s-4); }

/* 4. Typography ---------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.2; }
h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 500; }
p, li, blockquote, dd { max-width: var(--measure); }
.lede { font-size: var(--step-1); line-height: 1.5; }
.small { font-size: var(--step--1); }
.eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 500; }
em { font-style: italic; }

.flow > * + * { margin-top: var(--flow, 1em); }
.flow > h2 + *, .flow > h3 + * { margin-top: var(--s-4); }
.flow > * + h2 { margin-top: var(--s-7); }
.flow > * + h3 { margin-top: var(--s-6); }

/* 5. Layout primitives --------------------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin-inline: auto;
}
.wrap--narrow { max-width: var(--narrow); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--inverse { background: var(--bg-inverse); color: var(--fg-inverse); }
.section--inverse :focus-visible { outline-color: var(--cream); }
.section--inverse ::selection { background: var(--cream); color: var(--green); }
.section--rule { border-top: 1px solid var(--rule); }
.prose { max-width: var(--measure); }

.grid { display: grid; gap: var(--s-6); }
@media (min-width: 48em) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Split: text beside image. Alternates direction with .split--flip. */
.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 56em) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); }
  .split--flip > :first-child { order: 2; }
  .split--even { grid-template-columns: 1fr 1fr; }
}

/* 6. Header and navigation ---------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.brand { display: inline-flex; align-items: center; padding-block: var(--s-2); }
.brand img { height: 2.75rem; width: auto; }
@media (min-width: 56em) { .brand img { height: 3.5rem; } }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-weight: 500;
}
.nav-toggle__icon { position: relative; width: 18px; height: 12px; }
.nav-toggle__icon::before, .nav-toggle__icon::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: transform 200ms ease, top 200ms ease;
}
.nav-toggle__icon::before { top: 0; }
.nav-toggle__icon::after { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 5px; transform: rotate(-45deg); }

.site-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.site-nav a {
  display: inline-block;
  padding: var(--s-2) 0;
  min-height: 44px;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  line-height: 1.6;
}
.site-nav a:hover { border-bottom-color: var(--rule-strong); }
/* Current page: underline + visually-hidden text, so it does not rely on colour alone */
.site-nav a[aria-current="page"] { border-bottom-color: var(--rule-strong); }
.site-nav .btn { margin-top: var(--s-3); }
.site-nav a.btn {
  padding: 0.6rem 1.25rem;
  min-height: 44px;
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: var(--radius);
}
.site-nav a.btn:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.site-nav a.btn[aria-current="page"] { background: var(--green); color: var(--cream); }

/* Mobile: panel below header */
@media (max-width: 55.99em) {
  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
    padding: var(--s-5) var(--gutter) var(--s-6);
  }
  .site-nav[hidden] { display: none; }
  .site-nav a { display: block; padding: var(--s-3) 0; border-bottom-width: 2px; }
  .site-nav .btn { display: inline-flex; margin-top: var(--s-4); }
}
@media (min-width: 56em) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav[hidden] { display: block !important; }
  .site-nav ul { flex-direction: row; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
  .site-nav .btn { margin-top: 0; }
}

/* 7. Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--green);
  color: var(--cream);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--section);
  position: relative;
}
/* Accent band: decorative only */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--olive) 0 40%, var(--pink) 40% 70%, var(--orange) 70%);
}
.site-footer :focus-visible { outline-color: var(--cream); }
.site-footer a { color: inherit; }
.footer-grid {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 40em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand { font-family: var(--font-display); font-size: var(--step-2); margin-bottom: var(--s-3); }
.footer-heading { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin-bottom: var(--s-3); }
.site-footer ul li + li { margin-top: var(--s-2); }
.site-footer ul a { display: inline-block; padding-block: 2px; min-height: 30px; }
.footer-bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in srgb, var(--cream) 25%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  font-size: var(--step--1);
}

/* 8. Buttons and links --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--green);
  border-radius: var(--radius);
  background: var(--green);
  color: var(--cream);
  font-weight: 500;
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn:hover { background: transparent; color: var(--green); }
.btn--secondary { background: transparent; color: var(--green); }
.btn--secondary:hover { background: var(--green); color: var(--cream); }
.section--inverse .btn { background: var(--cream); color: var(--green); border-color: var(--cream); }
.section--inverse .btn:hover { background: transparent; color: var(--cream); }
.section--inverse .btn--secondary { background: transparent; color: var(--cream); }
.section--inverse .btn--secondary:hover { background: var(--cream); color: var(--green); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); margin-top: var(--s-5); }
.link-more { font-weight: 500; }

/* 9. Sections and patterns ---------------------------------------------- */

/* Hero: text then image on mobile; text beside image on larger screens */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section); }
.hero__grid { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 56em) {
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
}
.hero__note { margin-top: var(--s-5); font-size: var(--step--1); }
.hero--quiet .hero__grid { grid-template-columns: 1fr; }
.hero--quiet h1 { font-size: var(--step-4); }

/* Full-bleed photograph band */
.bleed { width: 100%; }
.bleed .ph, .bleed img { width: 100%; }

/* Editorial gallery: mixed aspect ratios in a staggered grid */
.gallery {
  display: grid;
  align-items: start;
  gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48em) { .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-5); } }
.gallery > * { grid-column: span 1; }
@media (min-width: 48em) {
  .gallery > * { grid-column: span 2; }
  .gallery > .span-3 { grid-column: span 3; }
  .gallery > .span-4 { grid-column: span 4; }
  .gallery > .span-6 { grid-column: span 6; }
}
.gallery figcaption, .credit { font-size: var(--step--1); margin-top: var(--s-2); }

/* Numbered steps (home How it works, About three things) */
.steps { display: grid; gap: var(--s-6); counter-reset: step; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps > li { counter-increment: step; padding-top: var(--s-4); border-top: 2px solid var(--rule-strong); position: relative; }
.steps > li h3 { margin-bottom: var(--s-2); }
.steps--numbered > li h3::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-2);
}

/* Process sequence (vertical on all sizes; never a horizontal scroller) */
.sequence { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.stage {
  display: grid;
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
@media (min-width: 56em) {
  .stage { grid-template-columns: 6rem minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
  .stage--no-image { grid-template-columns: 6rem minmax(0, 1fr); }
  .stage--no-image .stage__body { grid-column: 2 / -1; }
}
.stage__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
}
.stage__num::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  margin-top: var(--s-3);
  background: var(--olive);
}
.stage:nth-of-type(3n+2) .stage__num::after { background: var(--pink); }
.stage:nth-of-type(3n) .stage__num::after { background: var(--orange); }
.stage__body h2 { font-size: var(--step-3); }

/* Service list (Weddings: Flowers throughout your wedding) */
.services { display: grid; gap: var(--s-6); }
@media (min-width: 48em) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service { display: grid; gap: var(--s-4); align-content: start; }
.service h3 { margin-top: var(--s-2); }

/* Testimonials */
.testimonials { display: grid; gap: var(--s-6); }
@media (min-width: 56em) { .testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.testimonial {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 2px solid var(--rule-strong);
}
.testimonial blockquote p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.3;
  text-wrap: pretty;
}
.testimonial figcaption { font-size: var(--step--1); }
.testimonial--feature blockquote p { font-size: var(--step-3); }

/* Accent panel behind an image: decorative colour, no text */
.panel { position: relative; }
.panel::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  background: var(--olive);
  border-radius: var(--radius);
  z-index: -1;
}
.panel--pink::before { background: var(--pink); }
.panel--orange::before { background: var(--orange); }
@media (max-width: 47.99em) { .panel::before { inset: 0.75rem -0.75rem -0.75rem 0.75rem; } }

/* Call to action band */
.cta { text-align: left; }
.cta .wrap { display: grid; gap: var(--s-5); }
@media (min-width: 56em) {
  .cta .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .cta .actions { margin-top: 0; justify-content: flex-end; }
}

/* FAQ */
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-body); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: var(--s-5); }

/* Plain list with tick-free markers */
.list { padding-left: 1.25em; }
.list li + li { margin-top: var(--s-2); }

/* Signpost row (e.g. Home: other services + funeral flowers) */
.signposts { display: grid; gap: var(--s-6); }
@media (min-width: 56em) { .signposts { grid-template-columns: 3fr 2fr; gap: clamp(2rem, 6vw, 6rem); } }
.signpost--quiet { padding-top: var(--s-5); border-top: 1px solid var(--rule); }
@media (min-width: 56em) { .signpost--quiet { padding-top: 0; border-top: 0; padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--rule); } }

/* 10. Development placeholders ------------------------------------------
   Neutral, clearly labelled, impossible to mistake for approved imagery.
   Replace each <figure class="ph"> with a <picture> once assets arrive;
   the data-asset value matches the ID in ASSET_REQUIREMENTS.md. */
.ph {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 3);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,0.045) 14px 28px),
    #d9d7cf;
  border: 1px dashed #7a786f;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #3b3a36;
}
.ph--landscape { --ar: 3 / 2; }
.ph--wide { --ar: 16 / 9; }
.ph--cinema { --ar: 21 / 9; }
.ph--portrait { --ar: 4 / 5; }
.ph--tall { --ar: 3 / 4; }
.ph--square { --ar: 1 / 1; }
.ph__label {
  padding: var(--s-2) var(--s-3);
  background: rgba(255,255,255,0.85);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  max-width: 90%;
}
.ph__label b { display: block; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* 11. Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--s-6); }
.form fieldset { border: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-5); }
.form legend { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.15; padding: 0; margin-bottom: var(--s-4); }
.form fieldset fieldset legend { font-family: var(--font-body); font-size: var(--step-0); font-weight: 500; margin-bottom: var(--s-2); }
.field { display: grid; gap: var(--s-2); max-width: var(--narrow); }
.field label, .field .label { font-weight: 500; }
.hint { font-size: var(--step--1); }
.req { font-weight: 400; }
.control {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: #fff;
  color: var(--green);
}
.control:focus-visible { outline-offset: 1px; }
textarea.control { min-height: 8.5rem; resize: vertical; }
select.control {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='%23475445' stroke-width='1.75' d='M3 6l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.75rem;
}
.field[aria-invalid="true"] .control, .control[aria-invalid="true"] { border-width: 2px; }
.error {
  display: flex;
  gap: var(--s-2);
  font-weight: 500;
  font-size: var(--step--1);
}
.error:empty { display: none; }
.error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 2px solid currentColor; border-radius: 50%; font-size: 0.75rem; line-height: 1; }
.choices { display: grid; gap: var(--s-3); }
.choice {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  min-height: 44px;
  padding-block: var(--s-1);
}
.choice input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--green); }
.choice span { padding-top: 0.15rem; }
.prompts { padding-left: 1.25em; font-size: var(--step--1); }
.prompts li { max-width: none; }
.reveal[hidden] { display: none; }
.note { padding: var(--s-4) var(--s-5); border-left: 3px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--green) 6%, transparent); max-width: var(--narrow); }
.form-footer { display: grid; gap: var(--s-4); max-width: var(--narrow); }
.form-footer .btn { justify-self: start; }
.consent { font-size: var(--step--1); }

/* Enquiry type toggle */
.toggle { display: grid; gap: var(--s-3); }
.toggle legend { font-weight: 500; font-family: var(--font-body); font-size: var(--step-0); margin-bottom: var(--s-2); }
.toggle__options { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.toggle__options label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0.6rem 1.25rem;
  border: 2px solid var(--green);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
}
.toggle__options input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggle__options label:has(input:checked) { background: var(--green); color: var(--cream); }
.toggle__options label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Progress indicator (wedding form) */
.progress {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-3) 0;
  font-weight: 500;
  font-size: var(--step--1);
}
.progress li { display: inline-flex; align-items: center; gap: var(--s-2); padding-bottom: 2px; border-bottom: 2px solid transparent; }
.progress li[aria-current="step"] { border-bottom-color: var(--green); }
.progress li .tick { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.7rem; line-height: 1; }
.progress li[data-done="true"] .tick::before { content: "\2713"; }

.progress--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  background: var(--cream);
  border-top: 1px solid var(--rule);
}
@media (min-width: 56em) {
  .progress--sticky { margin-inline: 0; padding-inline: var(--s-4); border: 1px solid var(--rule); border-radius: var(--radius) var(--radius) 0 0; }
}

/* Status panels */
.status { display: grid; gap: var(--s-4); max-width: var(--narrow); padding: var(--s-5); border: 2px solid var(--green); border-radius: var(--radius); }
.status h2 { font-size: var(--step-3); }

/* Enquire page layout */
.enquire-layout { display: grid; gap: var(--s-7); }
.enquire-layout > aside { display: none; }
@media (min-width: 64em) { .enquire-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .enquire-layout > aside { display: block; order: 2; position: sticky; top: calc(var(--header-h) + 1.5rem); } }

/* 12. Utilities and motion ---------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0 !important; }
.center { text-align: center; }

/* Gentle reveal on scroll. Purely additive; content is visible without JS
   and whenever reduced motion is requested. */
@media (prefers-reduced-motion: no-preference) {
  .js .fade { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; }
  .js .fade.is-visible { opacity: 1; transform: none; }
  .reveal:not([hidden]) { animation: reveal 240ms ease; }
  @keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Print: keep it simple */
@media print {
  .site-header, .site-footer, .skip-link, .nav-toggle, .ph { display: none !important; }
  body { background: #fff; color: #000; }
}