/* ============================================================
   CHARLOTTE SINCLAIR — pages.css
   Page-specific composition. Inherits every token from main.css.
   Three page archetypes: long-form (home, about), single-subject
   (services, areas, faqs, contact), and location.
   ============================================================ */

/* ============================================================
   PAGE HERO — inner pages. Type only, no image, no coloured band.
   ============================================================ */
.page-hero{padding-block:var(--gap-1) var(--gap-2)}
.page-hero h1{max-width:18ch;margin-bottom:var(--s-m)}
.page-hero .lead{max-width:var(--measure);color:var(--ink-soft)}

/* Her seven support items, kept verbatim but set as a stanza rather
   than a bulleted task list. No markers, no dashes — a chore checklist
   is the one component her anti-examples all share. */
.support{
  max-width:var(--measure);
  font-family:var(--font-display);
  font-size:var(--fs-lead);
  line-height:1.5;
}
.support li{padding-block:var(--s-xs)}
.support li + li{border-top:1px solid var(--taupe-soft)}

/* ============================================================
   THE JOURNEY — four steps in her own language.
   ============================================================ */
.journey{max-width:var(--measure)}
.journey__step{padding-block:var(--s-m) 0}
.journey__step h3{margin-bottom:var(--s-2xs)}

/* ============================================================
   FOR PROFESSIONALS — she raised referrals three times across her
   documents. A quiet block, never a "partners" logo strip.
   ============================================================ */
.professionals{
  background:var(--stone-deep);
  padding-block:var(--gap-2);
}
.professionals .wrap > * {max-width:var(--measure)}
.professionals h2{font-size:var(--fs-section)}
.professionals h2{margin-bottom:var(--s-m)}

/* ============================================================
   CONTACT
   Four fields plus consent. No postcode, no title dropdown, no
   "best time to call", no service picker, no file upload — she
   answered "No" to uploads.
   ============================================================ */
.contact-layout{display:grid;gap:var(--gap-2)}
@media (min-width:900px){
  .contact-layout{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:start}
}
.contact-detail{margin-bottom:var(--s-l)}
.contact-detail dt{
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-soft);
  margin-bottom:var(--s-3xs);
}
.contact-detail dd{margin:0;font-size:var(--fs-lead)}
.contact-detail dd a{
  color:var(--sage-deep);
  border-bottom:1px solid var(--taupe);
  display:inline-flex;align-items:center;min-height:44px;
}
.contact-detail dd a:hover{border-bottom-color:var(--sage-deep)}

.form-row{margin-bottom:var(--gap-1)}
.form-row label{
  display:block;
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-soft);
  margin-bottom:var(--s-2xs);
}
.form-row .hint{display:block;font-weight:400;letter-spacing:0;margin-top:var(--s-3xs)}
.form-row input,.form-row textarea{
  width:100%;
  min-height:56px;
  padding:var(--s-xs) var(--s-s);
  background:var(--warm-white);
  border:1px solid var(--taupe);   /* 3.87:1 — passes WCAG 1.4.11 */
  border-radius:0;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  transition:border-color var(--t-quick) var(--ease);
}
.form-row textarea{min-height:11rem;resize:vertical}
.form-row input:hover,.form-row textarea:hover{border-color:var(--ink-soft)}
.form-row input:focus,.form-row textarea:focus{outline:3px solid var(--sage-deep);outline-offset:2px}

.form-consent{
  display:flex;
  gap:var(--s-s);
  align-items:flex-start;
  margin-bottom:var(--gap-1);
  max-width:var(--measure);
}
.form-consent input{
  width:24px;height:24px;
  min-height:0;
  margin-top:.35em;
  flex-shrink:0;
  accent-color:var(--sage-deep);
}
.form-consent label{
  font-size:var(--fs-body);
  font-weight:400;
  letter-spacing:0;
  color:var(--ink);
  margin:0;
}
.form-consent + .form-consent{margin-top:calc(-1 * var(--gap-1) + var(--s-m))}
.form-consent label a{color:var(--sage-deep);border-bottom:1px solid var(--taupe)}
.form-consent label a:hover,.form-consent label a:focus-visible{border-bottom-color:var(--sage-deep)}
.form-note{margin-top:var(--s-m);font-size:var(--fs-meta);color:var(--ink-soft);max-width:var(--measure)}

/* ============================================================
   TESTIMONIALS — the slot is designed and positioned now, so one
   real quote later is a five-minute change. Nothing is fabricated,
   so nothing is displayed. No stars, no cards, no carousel.
   ============================================================ */
.quotes{max-width:var(--col)}
.quote{margin-bottom:var(--gap-2)}
.quote blockquote{
  margin:0 0 var(--s-m);
  font-family:var(--font-display);
  font-size:var(--fs-lead);
  line-height:1.5;
}
.quote cite{font-style:normal;font-size:var(--fs-meta);color:var(--ink-soft)}
.awaiting{
  max-width:var(--measure);
  padding:var(--gap-1) var(--s-xl);
  background:var(--stone-deep);
  border-top:1px solid var(--taupe);
  border-bottom:1px solid var(--taupe);
}

/* ============================================================
   LOCATION PAGES
   ============================================================ */
.local-figure{margin:var(--gap-1) 0 0}
.local-figure img{width:100%}
.local-figure figcaption{margin-top:var(--s-s);font-size:var(--fs-meta);color:var(--ink-soft)}
.nearby{margin-top:var(--gap-1)}
.nearby h2{font-size:var(--fs-lead);margin-bottom:var(--s-s)}

/* ============================================================
   AI PAGE — plain prose, no accordion, no JavaScript-dependent
   content. AI crawlers execute no JS.
   ============================================================ */
.ai-block{max-width:var(--measure);padding-block:var(--gap-1) 0}
.ai-block h2{margin-bottom:var(--s-m)}
.ai-block h3{margin-block:var(--s-m) var(--s-2xs)}
.ai-block p{margin-bottom:var(--s-s)}
.ai-facts dt{font-weight:700;margin-top:var(--s-s)}
.ai-facts dd{margin:0}

/* ============================================================
   LEGAL / PRIVACY
   ============================================================ */
.legal{max-width:var(--measure)}
.legal h2{margin-block:var(--gap-1) var(--s-s);font-size:var(--fs-lead)}
/* only tighten when the heading really is the first thing in the block —
   the three legal documents open with intro paragraphs before their first h2 */
.legal > h2:first-child{margin-top:var(--s-l)}
.legal p,.legal li{margin-bottom:var(--s-s)}
.legal ul{margin-bottom:var(--s-s);padding-left:var(--s-m);list-style:disc}
.legal li{padding-left:var(--s-3xs)}

/* ============================================================
   CONFIRMATION + 404
   ============================================================ */
.plain-page{
  background:var(--stone-deep);
  min-height:52vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:var(--gap-2);
}
.plain-page h1{margin-bottom:var(--s-m);max-width:20ch}
.plain-page p{max-width:var(--measure);margin-bottom:var(--s-m)}

/* ============================================================
   CONTACT — her photograph opens the details column, so the page
   starts with a face rather than a list.
   ============================================================ */
.contact-portrait{margin:0 0 var(--s-l)}
.contact-portrait img{
  width:100%;max-width:22rem;display:block;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;
}
.contact-name{
  font-family:var(--font-display);
  font-size:var(--fs-lead);
  line-height:1.3;
  margin-bottom:var(--s-xs);
}
/* the referral photograph is the one thing in this block allowed past the measure */
.professionals .wrap > figure{max-width:none}