/* ============================================================
   CHARLOTTE SINCLAIR — main.css
   Private Lifestyle Companion & Wellbeing Support, Epsom, Surrey.

   DESIGN SYSTEM: "Alongside"
   The page accompanies the reader rather than presenting to them.
   Asymmetry throughout — nothing centred, nothing symmetrical,
   no alternating colour bands, no cards, no shadows, no icons.

   Her brief: calm, elegant, warm, spacious, personal, refined, human,
   quietly premium, trustworthy. NOT clinical, corporate, busy, salesy,
   overly feminine, "alternative"/spiritual, or like therapy or coaching.

   "Nothing high contrast" is honoured at the SURFACE layer (every surface
   pair sits under 1.30:1). Text runs 7.25–11.05:1 because her readers are
   45–70 and older. That is how both requirements are true at once.
   ============================================================ */

:root{

  /* ---- SURFACES — four grounds, all within 1.24:1 of one another.
          "Nothing high contrast" lives HERE and nowhere else.
          Two temperatures alternate: warm plaster / cool limewash.
          Nothing in this block exceeds S 24%. ---- */
  --warm-white : #FCF9F3;   /* cream plaster. Reading ground.        H40 L97 */
  --stone      : #EBE8DF;   /* limewash. THE SECOND GROUND — a real
                               surface, on every page.   vs warm-white 1.17:1 */
  --stone-deep : #E6E1D6;   /* aged plaster. Footer, panels, forms,
                               closing blocks.           vs warm-white 1.24:1 */
  --sage-veil  : #E3E7DD;   /* the one green ground. ONCE per page,
                               full-bleed, type only.    vs warm-white 1.19:1 */

  /* ---- INK — text only. Never a background, never a border.
          There are NO banned pairs: every text token below clears 7:1 on
          every one of the four grounds. That is what makes a four-ground
          system safe for whoever edits this next. ---- */
  --ink        : #33312C;   /* body + headings.
                               12.36 / 10.60 / 9.96 / 10.36 — AAA on all four */
  --ink-soft   : #4C463B;   /* muted taupe AT TEXT WEIGHT (H39 S13%, not grey).
                               Recessive stems, meta, captions, labels.
                               8.90 / 7.63 / 7.17 / 7.45 — AAA on all four */

  /* ---- SAGE — the only hue in the stylesheet. Nothing above S 14%.
          Sage may appear ONLY as a hard-edged full-bleed ground or as text.
          Never a rounded corner, soft shadow, gradient, leaf motif or icon —
          that discipline is what keeps this out of the wellness category. ---- */
  --sage-deep  : #3E4A38;   /* ALL interactive text + the focus ring.
                               8.92 / 7.65 / 7.19 / 7.47 — AAA on all four */
  --sage       : #5A6852;   /* NON-TEXT ONLY, by contract. Hairlines, marks,
                               map lines. 4.55–5.65 — clears 3:1 as a
                               graphical object; never carries a word. */

  /* ---- TAUPE — the STRUCTURE, not an invisible whisper.
          The split is the point: --taupe is load-bearing and clears the
          WCAG 1.4.11 3:1 threshold on every ground; --taupe-soft is
          ornament and is deliberately below it. ---- */
  --taupe      : #8A7C68;   /* OPERABLE EDGES + the companion line: form
                               fields, .action border, link underlines,
                               separators. 3.12–3.87 — passes 1.4.11
                               everywhere. (Was #C9C0B2 at 1.70:1 — a live
                               non-text contrast failure on every form field.) */
  --taupe-soft : #C9BFAE;   /* DECORATIVE within-surface dividers only.
                               1.73:1. Never a UI boundary, never text. */

  /* ---- TYPE ---- */
  --font-display: "Libre Baskerville", "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, serif;
  --font-body   : "Lato", "Segoe UI", -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", Arial, sans-serif;

  /* ---- FIVE SIZES. Adding a sixth is a decision, not an edit.
          Desktop ladder 15 / 19 / 23.5 / 29.5 / 36 — every adjacent pair
          differs by ~1.25, so no step can read as a mistake.

          The old scale had ELEVEN tokens, two of them identical
          (--fs-label == --fs-meta) and two more within 0.4px
          (--fs-lead vs --fs-h3). Eleven sizes across two families is
          why the page read as "a lot of different fonts": the reader
          counts perceptible treatments, not @font-face rules.

          Largest heading is now 1.89x body. It was 2.4x — and a
          40px+ heading over 19px body is the single clearest
          marketing-page tell. Neither reference site does it. ---- */
  --fs-meta     : 0.9375rem;                                      /* 15px flat     */
  --fs-body     : clamp(1.15625rem, 1.09rem + 0.35vw, 1.28125rem);/* 18.8 → 20.5px */
  --fs-lead     : clamp(1.3125rem, 1.15rem + 0.65vw, 1.46875rem);  /* 21.0 → 23.5px */
  --fs-section  : clamp(1.5rem,    1.25rem + 0.95vw, 1.84375rem); /* 24.0 → 29.5px */
  --fs-page     : clamp(1.6875rem, 1.35rem + 1.45vw, 2.25rem);    /* 27.0 → 36px   */

  /* ---- SPACE — component scale (inside a block) ---- */
  --s-3xs: 0.375rem;  /*  6px */
  --s-2xs: 0.5rem;    /*  8px */
  --s-xs : 0.75rem;   /* 12px */
  --s-s  : 1rem;      /* 16px */
  --s-m  : 1.25rem;   /* 20px */
  --s-l  : 1.5rem;    /* 24px */
  --s-xl : 2rem;      /* 32px */

  /* ---- SPACE — section scale (between blocks). Never mix with the above. ---- */
  --gap-1: clamp(3rem,   2.4rem + 2.4vw,  4.5rem);   /*  48 →  72px */
  --gap-2: clamp(4.5rem, 3.6rem + 3.6vw,  7rem);     /*  72 → 112px */
  --gap-3: clamp(6rem,   4.8rem + 4.8vw, 10rem);     /*  96 → 160px  standard section */
  --gap-4: clamp(6rem,   4.8rem + 4.8vw, 10rem);     /* her "White space" */
  --gap-5: clamp(7.5rem, 6rem   + 6vw,   12.5rem);   /* her "More white space" (1.25×) */

  /* ---- STRUCTURE ---- */
  --pad    : clamp(1.5rem, 4vw, 5rem);   /*  24 →  80px page gutter */
  --rail   : clamp(1.5rem, 6vw, 7rem);   /*  24 → 112px companion-line track */
  --measure: 34rem;                      /* 544px — body copy, ≈62ch */
  --col    : 40rem;                      /* 640px — headings + statements */
  --wide   : 68rem;                      /* 1088px — outer bound */
  --indent : clamp(0px, 7vw, 6rem);      /* how far single-column sections sit inboard */

  --r-sm   : 2px;                        /* square-ish default */
  --r-lg   : clamp(48px, 7vw, 104px);    /* the one large corner */

  --t-quick: 260ms;
  --t-slow : 600ms;
  --ease   : cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--warm-white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
/* Grid and flex items default to min-width:auto, which lets an image's
   intrinsic width blow the track out past the viewport. */
.hero__inner > *,.shelf__inner > *,.band__inner > *,.contact-layout > *,
.site-header__inner > *,.site-footer__grid > *{min-width:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:var(--font-display);color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
address{font-style:normal}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--sage-deep);outline-offset:3px}

/* ============================================================
   TYPOGRAPHY
   Sentence case throughout. No uppercase headings, no letter-spacing
   on the serif, no weight above 600, no negative tracking.
   ============================================================ */
h1{font-size:var(--fs-page);line-height:1.15}
h2{font-size:var(--fs-section);line-height:1.22}
h3{font-size:var(--fs-lead);line-height:1.40;font-weight:400}
.lead{font-size:var(--fs-lead);line-height:1.55}
.statement{font-family:var(--font-display);font-size:var(--fs-lead);line-height:1.5}
.mission{font-family:var(--font-display);font-size:var(--fs-lead);line-height:1.5;max-width:26ch}
.meta{font-size:var(--fs-meta);line-height:1.6;color:var(--ink-soft)}
.soft{color:var(--ink-soft)}

/* The single small-label object in the system. Sentence case, never
   uppercase, never above an h2, at most twice per page. */
.label{
  display:block;
  font-family:var(--font-body);
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-soft);
  margin-bottom:var(--s-xs);
}

/* Her one-line paragraph rhythm. Each line is its own paragraph and
   the spacing must let them breathe without becoming a list. */
.verse > p{margin-bottom:var(--s-s)}
.verse > p:last-child{margin-bottom:0}

.prose > p{margin-bottom:var(--s-m)}
.prose > p:last-child{margin-bottom:0}
.prose{max-width:var(--measure)}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:var(--wide);margin:0 auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:var(--gap-3)}
.section--tight{padding-block:var(--gap-2)}
.section--open{padding-block:var(--gap-1)}
.col{max-width:var(--col)}
.measure{max-width:var(--measure)}

/* Single-column sections sit inboard of the companion line rather than
   flush against it, so the page reads as composed rather than
   left-stranded. Two-column sections (hero, shelf) opt out. */
@media (min-width:900px){
  .section:not(.shelf):not(.hero) > .wrap > *:not(figure):not(.fig-solo__frame){margin-inline-start:var(--indent)}
}

/* a figure between two sections should not stack its margin on top of both
   sections' padding — that is what produced the floating-in-a-void look */
.section + .fig-solo, .section + .fig-solo + .section, 
/* ── PHOTOGRAPH FORMS ────────────────────────────────────────────────────
   Ratio is a variable, not a lock. Every solo image used to be 3:2, which is
   what made 24 different photographs read as one repeated shape. */

figure{margin:0}
.fig-solo{margin-block:var(--gap-1)}
.fig-solo__frame{max-width:88%}
.fig-solo:nth-of-type(even) .fig-solo__frame{margin-inline-start:auto}
.fig-solo img{
  width:100%;display:block;
  aspect-ratio:var(--ar, 3/2);
  object-fit:cover;
  object-position:var(--pos, 50% 50%);
}
/* Inline figures inside a text column. Same ratio contract as .fig-solo —
   without this rule the fig--ar-* classes on them are inert. */
.wide-figure{margin:0}
.wide-figure img{
  width:100%;display:block;
  aspect-ratio:var(--ar, 3/2);
  object-fit:cover;
  object-position:var(--pos, 50% 50%);
}
/* Opt out of the --measure cap a container may impose, and grow past the page
   gutter. The left edge stays put — the figure extends to the right, so the
   asymmetry holds. `width:100%` alone gains only ~15px, which reads as no
   change at all. */
.wide-figure--full {max-width:none !important;width:calc(100% + var(--pad))}
.wide-figure--wider{
  max-width:none !important;
  width:calc(100% + var(--pad) * 2);
  margin-inline-start:calc(-1 * var(--pad));   /* without this it runs a
     gutter past the right edge on anything narrower than the --wide cap */
}

.fig--ar-portrait {--ar:4/5}
.fig--ar-tall     {--ar:2/3}
.fig--ar-square   {--ar:1/1}
.fig--ar-letterbox{--ar:19/8}

/* THE LOCATION BAND — full-bleed inside the stone block. The text above and
   below keeps its measure; only the photograph runs edge to edge. */
.loc-band{padding-block:var(--gap-1) 0;background:var(--stone)}
.loc-band__frame{margin:0}
.loc-band__frame img{
  width:100%;display:block;
  aspect-ratio:3/1;
  object-fit:cover;
  object-position:var(--pos, 50% 50%);
}
@media (max-width:699px){.loc-band__frame img{aspect-ratio:2/1}}

/* Attribution under a borrowed photograph. Deliberately the smallest type on
   the site — a calc off --fs-meta rather than a sixth scale token, so the
   five-size rule still holds. Present, never part of the composition. */
.photo-credit{
  font-family:var(--font-body);
  font-size:calc(var(--fs-meta) * 0.8);   /* 12px */
  line-height:1.5;
  color:var(--ink-soft);
  padding:var(--s-2xs) var(--pad) 0;
  max-width:var(--wide);
  margin-inline:auto;
}
.photo-credit a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.photo-credit a:hover,.photo-credit a:focus-visible{border-bottom-color:var(--taupe)}

/* the text block above it stops short so the two read as one grey band */
.section--flush-bottom{padding-block-end:var(--gap-1)}

/* Bleed belongs to the section, not the image — a 100vw escape overflows
   horizontally wherever a scrollbar takes width. Used once on the site. */
.section--fluid > .wrap{max-width:none;padding-inline:0}
.section--fluid .fig-solo__frame{max-width:none;margin-inline:0}
.section--fluid img{aspect-ratio:19/8}

/* THE ARCH — one instance, on the front door, because a doorway is the only
   subject on the site that earns it. cqw rather than % so the head of the arch
   is a true semicircle at every size; percentages on both axes drew a
   different curve at every width. */
.fig--arch{container-type:inline-size}
.fig--arch img{border-radius:50cqw 50cqw var(--r-sm) var(--r-sm) / 40cqw 40cqw var(--r-sm) var(--r-sm)}

/* THE COLLAGE — three images on three spans, three offsets, three ratios.
   No two share a span, an offset or a left edge; nothing is centred.
   Replaces the big-rectangle-with-a-small-one-lapping-the-corner, which is
   the most cloned figure layout on the internet. */
.collage{margin-block:var(--gap-2)}
.collage__inner{display:grid;gap:var(--gap-1)}
.collage figure{margin:0}
.collage img{width:100%;display:block;object-fit:cover}
@media (min-width:760px){
  .collage__inner{grid-template-columns:repeat(12,1fr);column-gap:clamp(1rem,2.5vw,2.5rem);row-gap:0;align-items:start}
  .collage figure:nth-child(1){grid-column:2 / span 6;aspect-ratio:3/2}
  .collage figure:nth-child(2){grid-column:9 / span 4;aspect-ratio:1/1;margin-block-start:var(--gap-3)}
  .collage figure:nth-child(3){grid-column:1 / span 5;aspect-ratio:4/5;margin-block-start:var(--gap-2)}
  .collage figure img{height:100%}
}
@media (max-width:759px){
  .collage__inner{grid-template-columns:repeat(12,1fr);gap:var(--gap-1)}
  .collage figure:nth-child(1){grid-column:1 / span 11}
  .collage figure:nth-child(2){grid-column:4 / span 9}
  .collage figure:nth-child(3){grid-column:2 / span 9}
}

/* ── GROUNDS ─────────────────────────────────────────────────────────────
   The palette's real failure was distribution, not hue: 14 of 17 pages had
   no non-white surface at all. One declaration puts a ground on any section.
   Rhythm, so it does not decay: stone on every page · stone-deep as the
   closing panel and the footer · sage-veil exactly once per page, full-bleed,
   type only, never behind a photograph. */
.section--stone{background:var(--stone)}
.section--deep {background:var(--stone-deep)}
.section--veil {background:var(--sage-veil)}

/* Her literal stage directions, "White space" and "More white space".
   Honoured as real vertical rests. No ornament inside them — the
   spacing scale is the white space, not a decorated hole. */
.breath{height:var(--gap-4)}
.breath--more{height:var(--gap-5)}

/* ============================================================
   DEVICE 1 — THE COMPANION LINE
   A 1px hairline in the page gutter. It runs down the LEFT through the
   first half of the page, is absent across the full-bleed band, and
   re-emerges on the RIGHT for the second half. Someone has changed
   which side of you they are walking on.
   Static by design — her brief asks twice for minimal animation.
   ============================================================ */
.section[data-line]::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:1px;
  background:var(--taupe);
  pointer-events:none;
}
.section[data-line="left"]::before{left:calc(var(--rail) / 2)}
.section[data-line="right"]::before{right:calc(var(--rail) / 2)}
@media (max-width:899px){
  .section[data-line="left"]::before{left:10px}
  .section[data-line="right"]::before{right:10px}
}

/* ============================================================
   DEVICE 2 — THE OFFSET STONE SHELF, WITH PHOTOGRAPH OVERSTEP
   A stone ground bleeds to one viewport edge and stops short of the
   other, so a strip of warm white always survives. The photograph
   straddles the shelf's stopping edge and oversteps it vertically, so
   nothing shares an edge with anything else.
   ============================================================ */
.shelf{position:relative;padding-block:var(--gap-2)}
.shelf::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  background:var(--stone);
  z-index:-1;
}
.shelf--from-left::after{left:calc(50% - 50vw);right:16%}
.shelf--from-right::after{right:calc(50% - 50vw);left:16%}

.shelf__inner{
  display:grid;
  gap:var(--gap-1);
  align-items:center;
}
.shelf__figure{margin:0}
.shelf__figure img{width:100%}

@media (min-width:900px){
  .shelf__inner{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem)}
  /* the portrait shelf carries the only photograph of her on these pages,
     so its column takes more than half and oversteps further into the gutter
     as the viewport widens — measured so the left edge never reaches 0 */
  .shelf--from-right .shelf__inner{grid-template-columns:1.25fr 1fr}
  .shelf--from-left .shelf__figure{order:2;margin-inline-end:-8%}
  .shelf--from-right .shelf__figure{order:-1;margin-inline-start:-8%}
  /* the overstep: the photograph rises above and drops below the shelf */
  .shelf__figure{margin-block:calc(-1 * var(--gap-1))}
}
@media (min-width:1200px){
  .shelf--from-left::after{right:22%}
  .shelf--from-right::after{left:22%}
  .shelf--from-right .shelf__figure{margin-inline-start:-16%}
}
@media (min-width:1440px){
  .shelf--from-right .shelf__figure{margin-inline-start:-32%}
}
@media (max-width:899px){
  .shelf::after{left:0;right:var(--s-l)}
  .shelf--from-right::after{left:var(--s-l);right:0}
  .shelf__figure{margin-inline:calc(-1 * var(--pad));margin-bottom:var(--s-xl)}
}

/* ============================================================
   DEVICE 3 — THE RECESSIVE STEM
   Her copy is built on anaphora: "Sometimes… Sometimes…",
   "Someone who… Someone who…". The repeated opening recedes into a
   soft column; the varying half steps forward. This is de-emphasis,
   never emphasis. Both tones clear AAA independently.
   Never used inside a heading.
   ============================================================ */
.stem{color:inherit}   /* device retired — see CLAUDE.md */
.anaphora{
  font-family:var(--font-display);
  font-size:var(--fs-lead);
  line-height:1.5;
  max-width:32ch;
}
.anaphora > p{margin-bottom:var(--s-s)}
.anaphora > p:last-child{margin-bottom:0}

/* ============================================================
   DEVICE 4 — THE REACHING UNDERLINE
   Every link is a text object with a 1px rule sitting clear of the
   baseline. On hover the rule reaches 12px past the last letter —
   a line extending a little way ahead of you. No filled buttons.
   ============================================================ */
.link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:48px;
  color:var(--sage-deep);
  font-weight:700;
  border-bottom:1px solid currentColor;
  padding-bottom:var(--s-3xs);
}
.link::after{
  content:"";
  position:absolute;
  bottom:-1px;left:100%;
  width:0;height:1px;
  background:currentColor;
  transition:width var(--t-quick) var(--ease);
}
.link:hover::after,.link:focus-visible::after{width:12px}
.link--lead{font-size:var(--fs-lead)}

/* Inline links inside running prose keep the rule tight to the text. */
.prose a:not(.link),.verse a:not(.link),.anaphora a:not(.link){
  color:var(--sage-deep);
  border-bottom:1px solid var(--taupe);
  transition:border-color var(--t-quick) var(--ease);
}
.prose a:not(.link):hover,.verse a:not(.link):hover{border-color:var(--sage-deep)}

/* The TWO exceptions to "no buttons": objects that must be operated
   rather than read — the hero call to action and the form submit.
   A 68-year-old must not have to guess what sends the form. */
.action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:var(--s-s) var(--s-xl);
  background:none;
  border:1px solid var(--taupe);
  border-radius:0;
  color:var(--sage-deep);
  font-family:var(--font-body);
  font-size:var(--fs-lead);
  font-weight:700;
  text-align:center;
  cursor:pointer;
  transition:border-color var(--t-quick) var(--ease),background-color var(--t-quick) var(--ease);
}
.action:hover{border-color:var(--sage-deep);background:var(--stone)}

/* ============================================================
   DEVICE 5 — THE SECOND-READER ASIDE
   Her brief requires the page to address two readers without collapsing
   them into one "you". This is how the page turns its head toward the
   son or daughter. The hairline hugs the words rather than framing them.
   ============================================================ */
.aside-2{
  position:relative;
  margin-block:var(--gap-1);
  padding-inline-start:var(--s-xl);
  font-family:var(--font-display);
  font-size:var(--fs-lead);
  line-height:1.5;
  max-width:30ch;
}
.aside-2--large{font-size:var(--fs-section);line-height:1.32;max-width:26ch}
.aside-2::before{
  content:"";
  position:absolute;
  left:0;top:.55em;bottom:.35em;
  width:1px;
  background:var(--sage);
}
@media (max-width:599px){.aside-2{padding-inline-start:var(--s-m)}}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--warm-white);color:var(--sage-deep);
  padding:var(--s-s) var(--s-m);
  border:1px solid var(--sage-deep);font-weight:700;
}
.skip-link:focus{left:var(--s-s);top:var(--s-s)}

/* ============================================================
   HEADER
   Static — it scrolls away permanently. No sticky bar, no hamburger,
   no overlay, no dropdown. On a twelve-page site read by people in
   their sixties and seventies, visible links beat hidden ones.
   The phone number lives here as plain text, at every width.
   ============================================================ */
.site-header{padding-block:var(--s-xl) var(--s-l)}
.site-header__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--s-m) var(--s-xl);
}
.wordmark{font-family:var(--font-display);font-size:var(--fs-lead);line-height:1.2;white-space:nowrap}
.site-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--s-m) var(--s-l);
  margin-inline-start:auto;
}
.site-nav a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border-bottom:1px solid transparent;
  transition:border-color var(--t-quick) var(--ease);
}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:var(--sage)}
.site-nav .site-nav__tel{color:var(--sage-deep);font-weight:700;white-space:nowrap}

@media (max-width:767px){
  .site-header{padding-block:var(--s-m) var(--s-s)}
  .site-header__inner{gap:var(--s-s)}
  .site-nav{
    margin-inline-start:0;
    width:100%;
    gap:var(--s-xs) var(--s-m);
    font-size:1.0625rem;
  }
  .site-nav a{min-height:40px}
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.crumbs{font-size:var(--fs-meta);color:var(--ink-soft);padding-block:var(--s-s)}
.crumbs a{border-bottom:1px solid var(--taupe)}
.crumbs a:hover{border-bottom-color:var(--sage-deep)}
.crumbs .sep{margin-inline:var(--s-2xs);color:var(--taupe)}

/* ============================================================
   HERO
   On mobile her photograph sits directly under the h1 — her face has
   to be in the first viewport. Desktop is a two-column composition
   with the portrait overstepping the text block at both ends.
   ============================================================ */
.hero{position:relative;padding-block:var(--gap-1) var(--gap-3)}
.hero__inner{display:grid;gap:var(--gap-1)}
.hero h1{margin-bottom:var(--s-m);max-width:16ch}
.hero__role{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--ink-soft);
  margin-bottom:var(--s-xs);
}
.hero__sub{
  font-family:var(--font-display);
  font-size:var(--fs-lead);
  line-height:1.4;
  color:var(--ink);
  max-width:24ch;
  margin-bottom:var(--s-l);
}
.hero__lead{font-size:var(--fs-body);color:var(--ink);margin-bottom:var(--s-xl);max-width:var(--measure)}
.hero__figure{margin:0}
.hero__figure img{width:100%}

@media (min-width:900px){
  /* the hero alone runs wider than the --wide cap: 68rem → 77rem, about 13%.
     Everything below it still uses --wide, so the page steps in after the hero
     rather than reading as one uniformly wider site. */
  .hero__inner{
    max-width:77rem;
    grid-template-columns:1fr 1.06fr;align-items:center;gap:clamp(2.5rem,5vw,5rem);
  }
  .hero__figure{order:2;margin-block:calc(-1 * var(--gap-1))}
}
@media (max-width:899px){
  .hero__text{display:contents}
  .hero h1{order:1}
  .hero__figure{order:2;margin-inline:calc(-1 * var(--pad));margin-block:var(--s-l)}
  .hero__role{order:3}
  .hero__lead{order:4}
  .hero__cta{order:5}
  .hero__inner{gap:0}
}

/* ============================================================
   THE BAND — "Seen. / Valued. / Connected."
   Her one explicit layout instruction: a full-width section over one of
   her photographs. Built as a genuinely full-bleed photograph with the
   words on a warm-white panel butted against it — her palette rules out
   the high-contrast scrim that white-on-photo would need, and none of
   her photographs was shot with a quiet zone for type.
   ============================================================ */
.band{position:relative;margin-block:var(--gap-2)}

/* Her only explicit layout instruction, verbatim: "a full-width section over one
   of my photographs.. saying.. Seen. Valued. Connected."
   So the words sit ON the image, full width.

   The copy defines the height and the photograph fills behind it — an
   aspect-ratio box clipped the italic line at 375px.

   The scrim runs top-down rather than left-right because of what is in this
   particular photograph: both women sit in the lower two thirds and the top is
   pale courtyard wall, so the type lands on the calmest part of the frame and
   neither face is veiled. It is drawn from the page ground, never black — a dark
   scrim would break both "nothing high contrast" and the warmth. */
.band__inner{position:relative;isolation:isolate;overflow:hidden}
.band__figure{position:absolute;inset:0;margin:0}
.band__figure img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.band__figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(252,249,243,.96) 0%,
    rgba(252,249,243,.93) 34%,
    rgba(252,249,243,.66) 52%,
    rgba(252,249,243,.18) 66%,
    rgba(252,249,243,0)   80%);
}
.band__words{
  position:relative;z-index:1;
  min-height:124vw;
  padding:var(--gap-2) var(--pad) var(--gap-3);
}
.band__words p{
  font-family:var(--font-display);
  font-size:calc(var(--fs-page) * 1.55);
  line-height:1.3;
  margin-bottom:clamp(1.5rem, 2.2vw, 2rem);
}
@media (min-width:700px){
  .band__figure img{object-position:center 12%}
  .band__figure::after{
    background:linear-gradient(to bottom,
      rgba(252,249,243,.96) 0%,
      rgba(252,249,243,.92) 30%,
      rgba(252,249,243,.60) 44%,
      rgba(252,249,243,.14) 56%,
      rgba(252,249,243,0)   68%);
  }
  .band__words{
    min-height:min(60vw, 44rem);
    padding-inline:clamp(3rem,8vw,8rem);
  }
}

/* ============================================================
   FAQ — plain headings and paragraphs. No accordion, no <details>,
   nothing hidden. AI crawlers execute no JavaScript, and neither
   should a reader have to.
   ============================================================ */
.faq{max-width:var(--measure)}
.faq__item{padding-block:var(--gap-1) 0}
.faq__item:first-child{padding-top:var(--s-l)}
.faq h3{margin-bottom:var(--s-s);font-family:var(--font-display)}
.faq p{margin-bottom:var(--s-s)}
.faq p:last-child{margin-bottom:0}

/* ============================================================
   AREAS — towns named in prose and as plain links. No pill grid,
   no chips, no map embed.
   ============================================================ */
.areas__string{
  font-family:var(--font-display);
  font-size:var(--fs-lead);
  line-height:1.5;
  margin-bottom:var(--s-l);
}
.areas__string .sep,.footer-areas .sep{color:var(--taupe)}
.areas__list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-xs) var(--s-l);
  margin-top:var(--s-l);
}
.areas__list a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--sage-deep);
  border-bottom:1px solid var(--taupe);
  transition:border-color var(--t-quick) var(--ease);
}
.areas__list a:hover{border-bottom-color:var(--sage-deep)}

/* ============================================================
   FOOTER — her sign-off block, set as she wrote it. Roman, not italic.
   Two columns maximum, no link farm.
   ============================================================ */
.site-footer{
  margin-top:var(--gap-3);
  padding-block:var(--gap-2);
  background:var(--stone-deep);
  border-top:1px solid var(--taupe);
}
.site-footer__grid{display:grid;gap:var(--gap-1)}
@media (min-width:768px){
  .site-footer__grid{grid-template-columns:1.5fr 1fr 1fr;gap:var(--s-xl)}
}
@media (min-width:768px) and (max-width:979px){
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
.footer-name{font-family:var(--font-display);font-size:var(--fs-lead);margin-bottom:var(--s-2xs)}
.footer-role,.footer-tagline{color:var(--ink-soft);margin-bottom:var(--s-2xs)}
.footer-areas{margin-block:var(--s-s) var(--s-m)}
.footer-nap a{
  display:inline-block;
  min-height:40px;
  line-height:40px;
  color:var(--sage-deep);
  border-bottom:1px solid var(--taupe);
}
.footer-nap a:hover{border-bottom-color:var(--sage-deep)}
.footer-links{display:flex;flex-direction:column}
.footer-links h2{
  font-family:var(--font-body);
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink-soft);
  margin-bottom:var(--s-2xs);
}
.footer-links a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  width:fit-content;
  border-bottom:1px solid transparent;
}
.footer-links a:hover{border-bottom-color:var(--sage)}
.footer-bottom{
  margin-top:var(--gap-1);
  padding-top:var(--s-m);
  border-top:1px solid var(--taupe-soft);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--s-s) var(--s-l);
  font-size:var(--fs-meta);
  color:var(--ink-soft);
  text-align:center;
}

/* Staie credit — centred on its own line at the foot of every page */
.footer-credit{
  margin-top:var(--s-m);
  text-align:center;
  font-size:var(--fs-meta);
  color:var(--ink-soft);
}
.footer-credit a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  border-bottom:1px solid var(--taupe);
}
.footer-credit a:hover{border-bottom-color:var(--sage-deep)}
.footer-bottom a{border-bottom:1px solid var(--taupe)}
.footer-bottom a:hover{border-bottom-color:var(--sage-deep)}

/* ============================================================
   MOTION — one gentle fade, once per section, never staggered.
   "Gentle scrolling. Minimal animation. Nothing flashy."
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(12px);
          transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
  .reveal.is-in{opacity:1;transform:none}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .site-header,.site-footer,.skip-link,.hero__figure,.band,.region-map{display:none}
  body{background:#fff;color:#000;font-size:12pt}
  .section{padding-block:1rem}
  .link,.action{border:none;color:#000;text-decoration:underline}
}