/* ==========================================================================
   Poppy's Dog Retreat — stylesheet
   Brand: soft cream + warm tan, black text, pink as a minor accent only.
   Motif: the arched kennel doorway from the logo, reused as a shape
          throughout (photos, icon wells, buttons on the CTA band).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --cream:      #f1ebe5;   /* page background */
  --cream-2:    #e9e1d9;   /* alternate band */
  --paper:      #fbf8f5;   /* cards — a touch lighter than the page */
  --tan:        #dfd1c4;   /* warm beige band / accents */
  --tan-2:      #cdb9a7;   /* borders on tan */
  --ink:        #000000;   /* primary text */
  --ink-2:      #3a3330;   /* secondary text  — 10.2:1 on cream */
  --ink-3:      #6b615a;   /* muted text      —  4.9:1 on cream (cream only) */
  --pink:       #ff9baa;   /* minor accent — decorative only, never text */
  --pink-2:     #ffd9df;
  --dark:       #1c1815;   /* footer */
  --line:       #d8ccc0;

  /* Typography.
     Marykate (the Canva logo font) is not available as a webfont, so Fredoka
     stands in for it — same rounded, friendly character. To swap in the real
     Marykate later, self-host the file and change --font-display only. */
  --font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing — spacious scale, suits a warm marketing site */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;   --s7: 6rem;
  --section: clamp(3.5rem, 8vw, 6.5rem);

  /* Shape */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --arch: 999px 999px var(--r-md) var(--r-md);

  --shadow-sm: 0 2px 6px rgba(58, 51, 48, .06);
  --shadow-md: 0 6px 22px rgba(58, 51, 48, .10);
  --shadow-lg: 0 14px 44px rgba(58, 51, 48, .14);

  --container: 1140px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* clears the sticky header on anchor jumps */
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 var(--s2);
  letter-spacing: -.005em;
  text-wrap: balance;          /* avoids single-word orphan lines in headings */
}

h1 { font-size: clamp(2.35rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }

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

a { color: inherit; text-decoration-color: var(--tan-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--pink); }

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

ul, ol { margin: 0 0 var(--s2); padding-left: 1.25rem; }
li { margin-bottom: .4rem; }
li:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

/* Visible focus for keyboard users — never removed. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--pink-2); color: var(--ink); }

/* Screen-reader-only text */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--s2); z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2rem);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--section); }
.section--tan   { background: var(--tan); }
.section--cream2{ background: var(--cream-2); }
.section--paper { background: var(--paper); }

.section-head { max-width: 660px; margin-bottom: var(--s5); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: var(--s1);
}
.section-head--center .eyebrow { justify-content: center; }
/* the small pink dot is the one place the accent colour appears as itself */
.eyebrow::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-radius: 50%; background: var(--pink);
}

.lead { font-size: 1.15rem; color: var(--ink-2); }

.grid { display: grid; gap: var(--s3); }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 52px;                 /* comfortably above the 44px touch target */
  padding: .85rem 1.75rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

.btn--light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--light:hover { background: var(--paper); border-color: var(--paper); }

.btn svg { width: 18px; height: 18px; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.section-head--center + .btn-row,
.btn-row--center { justify-content: center; }

/* Plain text link with an arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 500; text-decoration: none;
  border-bottom: 2px solid var(--pink);
  padding-bottom: 2px;
  transition: gap .2s var(--ease);
}
.arrow-link:hover { gap: .8rem; }
.arrow-link svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(241, 235, 229, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  min-height: 76px;
}

/* The full logo is a tall stacked lockup, which becomes unreadable at header
   height. So the header uses the kennel mark from the logo alongside the name
   set in the display face; the full logo is used in the footer where there's
   room for it. */
.brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; flex: none;
}
.brand__mark {
  height: 50px; width: auto; flex: none;
  transition: transform .25s var(--ease);
}
.brand:hover .brand__mark { transform: translateY(-2px) rotate(-2deg); }

.brand__name {
  display: flex; flex-direction: column;
  font-family: var(--font-display);
  line-height: 1.05;
}
.brand__name b {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.brand__name i {
  font-style: normal;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-2);
}
@media (max-width: 400px) {
  .brand__mark { height: 42px; }
  .brand__name b { font-size: 1.12rem; }
  .brand__name i { font-size: .6rem; letter-spacing: .14em; }
}

.nav__list {
  display: flex; align-items: center; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  display: block;
  padding: .6rem .85rem;
  border-radius: 999px;
  font-size: .97rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--ease);
}
.nav__link:hover { background: var(--tan); }
.nav__link[aria-current="page"] { background: var(--tan); }

.nav__cta { margin-left: .5rem; }
.nav__cta .btn { min-height: 46px; padding: .6rem 1.3rem; font-size: .95rem; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: var(--s2) clamp(1.15rem, 4vw, 2rem) var(--s4);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__link { padding: .85rem 1rem; font-size: 1.05rem; }
  .nav__cta { margin: var(--s2) 0 0; }
  .nav__cta .btn { width: 100%; min-height: 52px; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }

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

.hero__title { margin-bottom: var(--s3); }
/* Highlighter stroke in the accent pink. Painted as a background so it always
   sits behind the glyphs — no stacking-context surprises. */
.hero__title .accent {
  display: inline;
  background-image: linear-gradient(var(--pink), var(--pink));
  background-repeat: no-repeat;
  background-size: 100% .2em;
  background-position: 0 92%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero__text .lead { margin-bottom: var(--s4); max-width: 34rem; }

/* Arched photo frame — echoes the kennel doorway in the logo */
.arch-frame {
  position: relative;
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--tan);
  box-shadow: var(--shadow-lg);
}
.arch-frame img { width: 100%; height: 100%; object-fit: cover; }

.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  margin-inline: auto;
}
@media (min-width: 940px) {
  .hero__media { max-width: none; aspect-ratio: 5 / 6; }
}
.hero__media .arch-frame { height: 100%; }

/* small floating badge on the hero photo */
.hero__badge {
  position: absolute; bottom: -18px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: .6rem 1.15rem;
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.hero__badge svg { width: 17px; height: 17px; flex: none; }

/* --------------------------------------------------------------------------
   7. Trust badges
   -------------------------------------------------------------------------- */
.trust {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream-2);
}
.trust__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2) var(--s3);
  list-style: none; margin: 0; padding: var(--s4) 0;
}
@media (min-width: 860px) { .trust__list { grid-template-columns: repeat(4, 1fr); } }

.trust__item {
  display: flex; align-items: center; gap: .7rem;
  margin: 0;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
}
.trust__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: var(--tan);
  color: var(--ink);
}
.trust__icon svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s3) var(--s3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--tan-2);
}
/* whole card clickable, but only the heading link is in the tab order */
.card--link { position: relative; }
.card--link .card__title a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.card__title a { text-decoration: none; }
.card--link:focus-within {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.card--link:focus-within .card__title a:focus-visible { outline: none; }

/* Arched icon well — the motif again, at component scale */
.card__icon {
  display: grid; place-items: center;
  width: 62px; height: 68px;
  margin-bottom: var(--s3);
  border-radius: var(--arch);
  background: var(--tan);
  color: var(--ink);
}
.card__icon svg { width: 28px; height: 28px; }

.card__title { margin-bottom: .6rem; }
.card__body { color: var(--ink-2); font-size: 1rem; margin-bottom: var(--s3); }
.card__foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); flex-wrap: wrap;
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}
.card__price { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.card__price span { font-family: var(--font-body); font-size: .85rem; color: var(--ink-2); font-weight: 400; }

/* --------------------------------------------------------------------------
   9. Story / split sections
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}
/* z-index:0 creates a stacking context so the offset panel below can sit at
   z-index:-1 without falling behind the section's own background. */
.split__media { position: relative; z-index: 0; }
.split__media .arch-frame { aspect-ratio: 4 / 5; }

/* a soft tan panel sitting behind the photo, offset — adds depth */
.split__media::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border-radius: var(--arch);
  background: var(--tan);
  z-index: -1;
}
.split--reverse .split__media::before { inset: 22px 22px -22px -22px; }

/* Once the split stacks, a full-width 4:5 photo becomes taller than the screen
   and swamps the copy — so cap and centre it, same as the hero does. */
@media (max-width: 899px) {
  .split__media { max-width: 440px; margin-inline: auto; }
  .split__media .arch-frame { aspect-ratio: 1 / 1.15; }

  /* On a narrow screen the photo already fills the container, so the offset
     panel's negative side inset would push past the viewport edge. Drop the
     sideways offset and let it peek out below instead — same depth cue, no
     overflow to paper over. */
  .split__media::before,
  .split--reverse .split__media::before { inset: 18px 0 -18px 18px; }
}

.stat-row {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.1;
}
.stat__label { font-size: .9rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   10. Pricing table
   -------------------------------------------------------------------------- */
.price-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.price-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.price-table caption { text-align: left; padding: var(--s3) var(--s3) 0; color: var(--ink-2); font-size: .95rem; }
.price-table th, .price-table td { padding: 1rem var(--s3); text-align: left; vertical-align: top; }
.price-table thead th {
  background: var(--tan);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  white-space: nowrap;
}
.price-table tbody tr { border-top: 1px solid var(--line); }
.price-table tbody tr:nth-child(even) { background: rgba(223, 209, 196, .22); }
.price-table tbody th { font-weight: 500; }
.price-table .price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  white-space: nowrap;
}
.price-table .note { color: var(--ink-2); font-size: .92rem; line-height: 1.55; }

/* Stack into cards on small screens. The <table> element is kept so screen
   readers still announce it as tabular data. */
@media (max-width: 720px) {
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .price-table tr { display: block; padding: var(--s3); }
  .price-table td,
  .price-table tbody th { display: block; padding: 0 0 .5rem; }
  .price-table td:last-child { padding-bottom: 0; }
  .price-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-display);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  /* the service name is the row heading, so it needs no label above it */
  .price-table tbody th { font-size: 1.15rem; font-family: var(--font-display); }
}

.price-note {
  display: flex; gap: var(--s2); align-items: flex-start;
  margin-top: var(--s3);
  padding: var(--s3);
  background: var(--tan);
  border-radius: var(--r-md);
}
.price-note svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.price-note p { color: var(--ink-2); font-size: .97rem; }
.price-note strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   11. FAQ (native <details> — keyboard accessible with no JS)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s2); }

.faq__item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--tan-2); box-shadow: var(--shadow-sm); }

.faq__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2);
  padding: 1.15rem var(--s3);
  min-height: 56px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background-color .2s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--cream-2); }
.faq__q svg {
  width: 22px; height: 22px; flex: none;
  transition: transform .25s var(--ease);
}
.faq__item[open] .faq__q svg { transform: rotate(45deg); }

.faq__a { padding: 0 var(--s3) var(--s3); color: var(--ink-2); }
.faq__a > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   12. Area / postcode lists
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  margin: 0;
  padding: .4rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .93rem;
  white-space: nowrap;      /* a town name should never break mid-word */
}
.section--tan .chips li { background: var(--cream); border-color: var(--tan-2); }

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--tan);
  overflow: hidden;
}
/* faint paw-print texture, drawn inline so there's no extra request */
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23000' opacity='.05'%3E%3Cellipse cx='30' cy='38' rx='7' ry='9'/%3E%3Cellipse cx='45' cy='30' rx='6' ry='8'/%3E%3Cellipse cx='60' cy='34' rx='6' ry='8'/%3E%3Cellipse cx='45' cy='55' rx='13' ry='11'/%3E%3Cellipse cx='92' cy='95' rx='5' ry='6.5'/%3E%3Cellipse cx='103' cy='89' rx='4.5' ry='6'/%3E%3Cellipse cx='113' cy='92' rx='4.5' ry='6'/%3E%3Cellipse cx='103' cy='108' rx='9.5' ry='8'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.cta-band .container { position: relative; }
.cta-band__inner { text-align: center; max-width: 700px; margin-inline: auto; }
.cta-band__inner p { color: var(--ink-2); font-size: 1.12rem; margin-bottom: var(--s4); }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.form-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .form-layout { grid-template-columns: 1.25fr .75fr; } }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.field { margin-bottom: var(--s3); }
.field-row { display: grid; gap: var(--s3); }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block;
  margin-bottom: .45rem;
  font-weight: 500;
  font-size: .97rem;
}
.field .req { color: var(--ink-2); font-weight: 400; }
.field .hint {
  display: block;
  margin-top: .3rem;
  font-size: .87rem;
  color: var(--ink-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1rem;
  background: var(--cream);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 1rem;           /* 16px+ stops iOS zooming on focus */
  color: var(--ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.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 1rem center;
  padding-right: 3rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--tan-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 1px;
}

/* Inline errors, announced and shown next to the field they belong to */
.field .error {
  display: none;
  align-items: center;
  gap: .4rem;
  margin-top: .4rem;
  font-size: .89rem;
  font-weight: 500;
  color: #a4243b;              /* 6.1:1 on the paper background */
}
.field .error svg { width: 15px; height: 15px; flex: none; }
.field.has-error .error { display: flex; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #a4243b; }

.form-status {
  display: none;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  font-size: .97rem;
}
.form-status.is-visible { display: flex; }
.form-status svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.form-status--ok    { background: #dff0e4; color: #1d4d2b; }
.form-status--error { background: #fbe3e6; color: #7d1b2e; }
.form-status p { margin: 0; }

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

/* Contact detail list beside the form */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.contact-list li { margin: 0; display: flex; gap: var(--s2); align-items: flex-start; }
.contact-list .ico {
  display: grid; place-items: center;
  width: 46px; height: 50px; flex: none;
  border-radius: var(--arch);
  background: var(--tan);
}
.contact-list .ico svg { width: 21px; height: 21px; }
.contact-list dt, .contact-list .k {
  display: block;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.contact-list .v { font-size: 1.06rem; font-weight: 500; text-decoration: none; }
.contact-list a.v:hover { text-decoration: underline; text-decoration-color: var(--pink); }

/* --------------------------------------------------------------------------
   15. Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--tan);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--tan-2);
}
.page-head__inner { max-width: 720px; }
.page-head h1 { margin-bottom: var(--s2); }
.page-head p { color: var(--ink-2); font-size: 1.12rem; margin: 0; }

.breadcrumb { font-size: .88rem; color: var(--ink-2); margin-bottom: var(--s2); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { opacity: .55; margin-inline: .4rem; }

/* --------------------------------------------------------------------------
   16. Prose (policy copy)
   -------------------------------------------------------------------------- */
.prose h2 { margin-top: var(--s5); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s4); }
.prose ul { margin-bottom: var(--s3); }
.prose li { color: var(--ink-2); }

.callout {
  display: flex; gap: var(--s2); align-items: flex-start;
  padding: var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--ink);
  border-radius: var(--r-md);
  margin-block: var(--s3);
}
.callout svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.callout p { font-size: .99rem; }
.callout h3 { margin-bottom: .35rem; font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--dark);
  color: var(--cream);
  padding-block: var(--s6) var(--s4);
}
.site-footer a { color: var(--cream); }

.footer__grid { display: grid; gap: var(--s5); }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer__grid { grid-template-columns: 1.5fr .85fr .95fr 1.4fr; } }

.footer__logo { height: 96px; width: auto; margin-bottom: var(--s3); }
.footer__about { color: var(--tan); font-size: .97rem; max-width: 32ch; }

.footer h2 {
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
  color: var(--cream);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: .55rem; }
.footer__list a { text-decoration: none; color: var(--tan); transition: color .2s var(--ease); }
.footer__list a:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--pink); }

/* Social link */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: var(--s3);
  padding: .65rem 1.15rem;
  min-height: 46px;
  border: 1px solid rgba(241, 235, 229, .35);
  border-radius: 999px;
  color: var(--cream);
  font-size: .93rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;      /* the footer column is narrow — never let it wrap */
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.social-link:hover { background: rgba(241, 235, 229, .13); border-color: var(--cream); }
.social-link svg { width: 20px; height: 20px; flex: none; }

/* Licensing statement — deliberately the most prominent thing in the footer */
.licence {
  display: flex; gap: var(--s2); align-items: flex-start;
  padding: var(--s3);
  background: rgba(241, 235, 229, .09);
  border: 1px solid rgba(241, 235, 229, .22);
  border-radius: var(--r-md);
}
.licence svg { width: 26px; height: 26px; flex: none; color: var(--pink); }
.licence strong { display: block; font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; }
.licence span { font-size: .9rem; color: var(--tan); }

.footer__bottom {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid rgba(241, 235, 229, .18);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
  justify-content: space-between; align-items: center;
  font-size: .88rem;
  color: var(--tan);
}

/* --------------------------------------------------------------------------
   18. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Anyone who asks for less motion gets the final state immediately,
   and no transitions or smooth scrolling anywhere on the site. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   19. Print — the policies page is the one people actually print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .btn, .skip-link, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  .faq__a { display: block !important; }
  .card, .faq__item, .callout, .price-wrap { break-inside: avoid; border-color: #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}