/* ==========================================================================
   Passionately Property
   Tokens and rationale live in design-notes.md. Palette is OKLCH throughout,
   neutrals tinted toward the lime brand hue (124).
   ========================================================================== */

:root {
  /* Brand */
  --lime:        oklch(88% 0.185 124);
  --lime-deep:   oklch(80% 0.175 124);
  --ink:         oklch(22% 0.015 210);
  --ink-soft:    oklch(34% 0.014 210);
  --muted:       oklch(50% 0.012 210);
  --bg:          oklch(98.5% 0.004 124);
  --surface:     oklch(99.4% 0.002 124);
  --surface-alt: oklch(96.6% 0.006 124);
  --line:        oklch(91% 0.006 124);
  --line-strong: oklch(84% 0.008 124);
  --deep:        oklch(26% 0.03 225);
  --light:       oklch(99% 0.002 124);

  /* Type */
  --font-sans: 'Figtree', system-ui, 'Segoe UI', sans-serif;
  --font-accent: 'Instrument Serif', Georgia, serif;

  --text-xs:  0.8125rem;
  --text-sm:  0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:  clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl:  clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --text-h1:  clamp(2.6rem, 1.7rem + 3vw, 4rem);

  /* Space (4pt) */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --section-y: clamp(64px, 8vw, 96px);
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);

  /* Surfaces */
  --radius-sm: 8px;
  --radius:    12px;
  --shadow: 0 18px 40px -28px oklch(22% 0.015 210 / 0.30);
  --shadow-lift: 0 22px 46px -26px oklch(22% 0.015 210 / 0.34);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 560ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

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

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* Instrument Serif runs optically smaller than Figtree at the same size, so
   the accent word gets a small size correction to sit level with the sans. */
em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: 0;
}

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Trip-wire for the header state. The header used to flip only once the whole
   hero had scrolled past, which is roughly 830px and reads as far too late.
   This sits at the top of the document and stops intersecting after ~48px of
   scroll, which is enough to avoid flicker on a trackpad twitch. */
.scroll-sentinel {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 48px;
  pointer-events: none;
}

/* Visually hidden without pushing the document sideways. */
.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 200;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: var(--space-sm) var(--space-md);
  background: var(--ink);
  color: var(--light);
  text-decoration: none;
}

.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur) ease,
              border-color var(--dur) ease,
              color var(--dur) ease;
}

.btn:active { transform: scale(0.97); }

.btn--sm { padding: 10px 16px; font-size: var(--text-xs); }

.btn--primary { background: var(--lime); color: var(--ink); }
.btn--light { background: var(--light); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--lime-deep); }
  .btn--light:hover { background: var(--surface-alt); }
  .btn--ghost:hover { border-color: var(--ink); background: var(--surface-alt); }
}

.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) ease;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: var(--ink); }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  transition: background-color var(--dur) ease, border-color var(--dur) ease;
  border-block-end: 1px solid transparent;
}

.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-sm) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  margin-inline-end: auto;
}

/* The supplied logo is flat white artwork on transparency, so it is used as a
   mask and takes currentColor. That lets the same file render light over the
   hero photograph and ink once the header goes solid, with no second asset.
   The full lockup is used rather than the device alone: the script wording is
   the brand, and it needs about 60px of height to read. The header therefore
   carries no separate typeset wordmark, and the logo steps down once the header
   goes solid so the sticky bar stays slim while scrolling. */
.brand__logo {
  display: block;
  flex: none;
  width: 89px;
  height: 64px;
  background-color: currentColor;
  -webkit-mask: url("/assets/logo-full.png") center / contain no-repeat;
  mask: url("/assets/logo-full.png") center / contain no-repeat;
  transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out);
}

.site-header.is-solid .brand__logo { width: 72px; height: 52px; }

.brand--drawer .brand__logo { width: 72px; height: 52px; color: var(--ink); }

@media (max-width: 899px) {
  .brand__logo,
  .site-header.is-solid .brand__logo { width: 72px; height: 52px; }
}

.nav__list { display: flex; gap: var(--space-lg); }

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  padding-block: 4px;
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) ease, opacity var(--dur) ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { border-block-end-color: currentColor; }
}

/* Over the photograph the header is light-on-dark, and it flips once the
   page scrolls past the hero. */
.site-header:not(.is-solid) { color: var(--light); }

.site-header.is-solid {
  background: var(--surface);
  border-block-end-color: var(--line);
  color: var(--ink);
}

/* Phone in the header. A seller mid-arrears or mid-probate often wants a person
   rather than a form, so the number is reachable from every page without
   competing with the primary CTA for colour. */
.site-header__tel {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  padding-block: 4px;
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-header__tel:hover { border-block-end-color: currentColor; }
}

.nav-drawer__tel { margin-block-start: auto; }
.nav-drawer__tel + .nav-drawer__cta { margin-block-start: var(--space-sm); }

.site-footer__contact {
  margin-block-start: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
}
.site-footer__contact + .site-footer__legal { margin-block-start: var(--space-xs); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 12px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: inherit;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-toggle:active { transform: scale(0.97); }

.nav-toggle__bars { display: grid; gap: 4px; width: 16px; }
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Mobile drawer. Full-viewport clip layer, opaque, above the fixed header.
   -------------------------------------------------------------------------- */

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  background: oklch(99.4% 0.002 124);
  padding: var(--space-md) var(--gutter) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.nav-drawer[hidden] { display: none; }
.nav-drawer.is-open { opacity: 1; }

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}

.nav-drawer__close {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.nav-drawer__list { display: grid; }
.nav-drawer__list li { border-block-start: 1px solid var(--line); }
.nav-drawer__list li:last-child { border-block-end: 1px solid var(--line); }
.nav-drawer__list a {
  display: block;
  padding-block: var(--space-lg);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.nav-drawer__cta { margin-block-start: 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(640px, 92vh, 960px);
  display: grid;
  align-content: start;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
}

/* Guarantees contrast for white type over the sky, and holds up if the
   photograph is later swapped for a paler one. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      oklch(20% 0.05 245 / 0.36) 0%,
      oklch(20% 0.05 245 / 0.31) 48%,
      oklch(20% 0.05 245 / 0) 80%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(124px, 17vh, 200px) var(--space-4xl);
  text-align: center;
  color: var(--light);
}

.hero__title {
  font-size: var(--text-h1);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.hero__title em {
  font-weight: 400;
  letter-spacing: -0.005em;
}

.hero__sub {
  margin-block-start: var(--space-lg);
  margin-inline: auto;
  max-width: 48ch;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.6;
  text-wrap: balance;
  color: oklch(99% 0.002 124 / 0.92);
}

.hero__actions {
  margin-block-start: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-title {
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: -0.022em;
}

.section-intro {
  margin-block-start: var(--space-md);
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: var(--text-lg);
}

/* --------------------------------------------------------------------------
   Credentials strip
   -------------------------------------------------------------------------- */

.creds {
  background: var(--surface-alt);
  border-block-end: 1px solid var(--line);
}

/* The same marks reused inside the About page's registrations section, where
   someone actively checking her will look. No band, no label: the section
   heading already says "Registrations and cover", and the reference numbers
   sit directly underneath. */
.creds--inline {
  background: none;
  border-block-end: 0;
  margin-block-end: var(--space-xl);
}
/* On the About page the marks sit above their own reference table, so they
   align with it rather than centring over it. */
.creds--inline .creds__list {
  justify-content: flex-start;
  gap: var(--space-lg) var(--space-xl);
}
.trust__records .facts { grid-area: auto; }

.creds__inner {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
}

.creds__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* On the About page the strip has no label, and if one is ever added there it
   should align with the table below rather than centre over it. */
.creds--inline .creds__label { text-align: left; }

/* Logo slots. Equal width by design: this is a credentials row, not a card grid. */
/* Flex rather than a fixed column count: marks get added and removed as her
   registrations change, and a hard-coded grid strands the row in the first N
   columns the moment the count drops. Centred as a group, wrapping evenly on
   narrow screens. */
.creds__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg) clamp(24px, 5vw, 56px);
}

.creds__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-soft);
}

/* Accreditation marks keep their own colours: the issuing bodies' usage rules
   generally forbid recolouring, and recognisability is the point of showing them.
   Heights are set per mark rather than uniformly, because a boxed lockup, a
   circular badge and a wide wordmark all read at different optical weights at the
   same pixel height. */
.creds__logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.creds__logo--tpo { height: 40px; }
.creds__logo--prs { height: 30px; }
.creds__logo--aml { height: 46px; }
.creds__logo--ico { height: 38px; }

.creds__slot--logo { min-height: 48px; }

/* Typographic mark for professional indemnity, which has no scheme logo. Built
   to the same optical weight as the real lockups beside it: icon left, two tight
   lines of type right, same as the TPO and PRS constructions. */
.cred-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}

.cred-mark__tick {
  flex: none;
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cred-mark__text {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Two paths
   -------------------------------------------------------------------------- */

.paths { padding-block: var(--section-y); }

.paths__grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 860px) {
  .paths__grid { grid-template-columns: 1.55fr 1fr; }
}

.path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) ease,
              border-color var(--dur) ease;
}

.path--lead { background: var(--surface-alt); }

@media (hover: hover) and (pointer: fine) {
  .path:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    border-color: var(--line-strong);
  }
  .path:hover .path__link { text-decoration-color: var(--ink); }
}

.path__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.path__title {
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.path--lead .path__title { font-size: var(--text-2xl); font-weight: 300; }

.path__body {
  max-width: 46ch;
  color: var(--ink-soft);
}

.path__link {
  margin-block-start: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur) ease;
}

/* --------------------------------------------------------------------------
   Explain
   -------------------------------------------------------------------------- */

.explain {
  padding-block: var(--section-y);
  border-block-start: 1px solid var(--line);
}

.explain__inner { display: grid; gap: var(--space-lg); }

@media (min-width: 900px) {
  .explain__inner {
    grid-template-columns: 1fr 1.35fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "eyebrow prose"
      "title   prose";
    align-items: start;
    column-gap: var(--space-4xl);
    row-gap: var(--space-sm);
  }
  .explain .eyebrow { grid-area: eyebrow; }
  .explain__title { grid-area: title; align-self: start; }
  .explain .prose { grid-area: prose; }
}

.explain__title {
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: -0.022em;
  max-width: 20ch;
}

.prose {
  display: grid;
  gap: var(--space-lg);
  max-width: 66ch;
  font-size: var(--text-lg);
  color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   Situations
   -------------------------------------------------------------------------- */

.situations {
  padding-block: var(--section-y);
  background: var(--surface-alt);
  border-block: 1px solid var(--line);
}

.situations__head { margin-block-end: var(--space-2xl); }

.situations__list {
  display: grid;
  gap: 0 var(--space-2xl);
  border-block-end: 1px solid var(--line-strong);
}

@media (min-width: 780px) {
  .situations__list { grid-template-columns: repeat(2, minmax(min(280px, 100%), 1fr)); }
}

.situation {
  padding-block: var(--space-lg);
  border-block-start: 1px solid var(--line-strong);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Trust
   -------------------------------------------------------------------------- */

.trust { padding-block: var(--section-y); }

.trust__inner { display: grid; gap: var(--space-2xl); }

@media (min-width: 900px) {
  .trust__inner {
    grid-template-columns: 1fr 1.1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "intro facts"
      "note  facts";
    align-items: start;
    column-gap: var(--space-4xl);
    row-gap: var(--space-lg);
  }
  .trust__intro { grid-area: intro; }
  .facts { grid-area: facts; }
  .trust__records { grid-area: facts; }
  .trust__note { grid-area: note; align-self: start; }
}

.facts { margin: 0; }

.facts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-block-start: 1px solid var(--line);
}
.facts__row:last-child { border-block-end: 1px solid var(--line); }

.facts dt {
  font-size: var(--text-sm);
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  text-align: right;
}

/* Status marker, not a value. Deliberately reads as a field state so a pending
   registration can never be mistaken for a confirmed one. */
.pending {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.trust__note {
  max-width: 50ch;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Areas
   -------------------------------------------------------------------------- */

.areas {
  padding-block: var(--section-y);
  border-block-start: 1px solid var(--line);
}

.areas__inner { display: grid; gap: var(--space-lg); }

@media (min-width: 900px) {
  .areas__inner {
    grid-template-columns: 1fr 1.15fr;
    grid-template-areas:
      "title   list"
      "note    list"
      "actions list";
    align-items: start;
    column-gap: var(--space-4xl);
    row-gap: var(--space-lg);
  }
  .areas .section-title { grid-area: title; }
  .areas__list { grid-area: list; }
  .areas__note { grid-area: note; }
  .areas__actions { grid-area: actions; align-self: start; }
}

.areas__list {
  max-width: 30ch;
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.areas__note {
  max-width: 52ch;
  color: var(--ink-soft);
}

.areas__actions {
  margin-block-start: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-2xl);
  background: var(--surface-alt);
  border-block-start: 1px solid var(--line);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 780px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.site-footer__logo {
  display: block;
  width: 117px;
  height: 84px;
  background-color: var(--ink);
  -webkit-mask: url("/assets/logo-full.png") center / contain no-repeat;
  mask: url("/assets/logo-full.png") center / contain no-repeat;
}

.site-footer__legal {
  margin-block-start: var(--space-md);
  max-width: 44ch;
  font-size: var(--text-sm);
  color: var(--muted);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl) var(--space-3xl);
}

.site-footer__nav ul { display: grid; gap: var(--space-xs); }

.site-footer__nav a {
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--ink-soft);
  transition: color var(--dur) ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__nav a:hover { color: var(--ink); }
}

/* --------------------------------------------------------------------------
   Reveals
   -------------------------------------------------------------------------- */

/* Scoped to .js so the page is fully readable without JavaScript. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.hero__title,
.hero__sub,
.hero__actions {
  animation: hero-in 620ms var(--ease-out) both;
}
.hero__sub { animation-delay: 70ms; }
.hero__actions { animation-delay: 140ms; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .nav, .site-header__cta, .site-header__tel { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 559px) {
  .hero__actions .btn { width: 100%; }
  .facts__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }
  .facts dd { text-align: left; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__title, .hero__sub, .hero__actions { animation: none; }
  .path:hover { transform: none; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* No photographic hero on inner pages, so the header is solid from the top and
   the page needs to clear it. */
.page-hero {
  padding-block: calc(var(--space-4xl) + 44px) var(--section-y);
  border-block-end: 1px solid var(--line);
}

/* Capped on the children, not on .page-hero__inner itself: .wrap already sets
   max-width plus margin-inline auto, so a narrower max-width here would centre
   the whole block and break alignment with the header and every section below. */
.page-hero__inner { display: grid; gap: var(--space-lg); }

.page-hero__title {
  max-width: 20ch;
  font-size: var(--text-h1);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.page-hero__intro {
  max-width: 60ch;
  font-size: var(--text-lg);
  color: var(--ink-soft);
}

.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-alt); border-block: 1px solid var(--line); }
.section--line { border-block-start: 1px solid var(--line); }

.section--deep {
  background: var(--deep);
  color: var(--light);
}
.section--deep .section-title { color: var(--light); }
.section--deep .section-intro,
.section--deep .prose { color: oklch(99% 0.002 124 / 0.86); }
.section--deep .eyebrow { color: oklch(99% 0.002 124 / 0.7); }

/* Editorial two-column: heading left, content right. */
.split { display: grid; gap: var(--space-xl); }

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1.4fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head body"
      "aside body";
    align-items: start;
    column-gap: var(--space-4xl);
    row-gap: var(--space-lg);
  }
  .split__head { grid-area: head; }
  .split__body { grid-area: body; }
  .split__aside { grid-area: aside; align-self: start; }
}

/* --------------------------------------------------------------------------
   Numbered sequence
   -------------------------------------------------------------------------- */

.steps { display: grid; counter-reset: step; }

.step {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--line-strong);
}
.steps .step:last-child { border-block-end: 1px solid var(--line-strong); }

@media (min-width: 720px) {
  .step { grid-template-columns: 64px 1fr; column-gap: var(--space-lg); }
  .step__num { grid-row: span 2; }
}

.step__num {
  counter-increment: step;
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.step__num::before { content: counter(step, decimal-leading-zero); }

.step__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.step__body { max-width: 62ch; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { display: grid; }

.faq__item { border-block-start: 1px solid var(--line-strong); }
.faq__item:last-child { border-block-end: 1px solid var(--line-strong); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.faq__sign {
  flex: none;
  width: 16px;
  height: 16px;
  position: relative;
  align-self: center;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(0deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; }

.faq__a p {
  max-width: 66ch;
  padding-block-end: var(--space-lg);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Forms. Bare in the build: the deploy injects action, method and Turnstile.
   -------------------------------------------------------------------------- */

.form { max-width: 720px; }

.form__step { display: grid; gap: var(--space-lg); }
.form__step[hidden] { display: none; }

.form__progress {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-end: var(--space-xl);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.form__track {
  flex: 1;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.form__bar {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--lime-deep);
  transform-origin: left;
  transition: width var(--dur) var(--ease-out);
}

.form__note {
  max-width: 60ch;
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.field { display: grid; gap: var(--space-xs); }

.field > label,
.fieldset__legend {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.field__hint { font-size: var(--text-sm); color: var(--muted); }

/* Town and postcode share a row once there's room; the town gets the wider share. */
.field-pair { display: grid; gap: var(--space-lg) var(--space-md); }

@media (min-width: 620px) {
  .field-pair { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color var(--dur) ease;
}

.field textarea { min-height: 120px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--ink); outline: none; }

.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.fieldset__legend { padding: 0; }

.choices { display: grid; gap: var(--space-xs); }

@media (min-width: 620px) {
  .choices--split { grid-template-columns: repeat(2, minmax(min(200px, 100%), 1fr)); }
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--dur) ease, background-color var(--dur) ease;
}
.choice input { margin-block-start: 3px; accent-color: var(--lime-deep); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--surface-alt); }

@media (hover: hover) and (pointer: fine) {
  .choice:hover { border-color: var(--line-strong); }
}

.form__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block-start: var(--space-md);
}

/* The deploy injects Turnstile just before the submit button, inside this row.
   Lift it onto its own full-width line above the buttons, and reserve its
   65px so the buttons don't jump when Cloudflare fills it in. */
.form__nav .cf-turnstile {
  order: -1;
  flex-basis: 100%;
  min-height: 65px;
  margin-block-end: var(--space-xs);
}

.form__consent { max-width: 60ch; font-size: var(--text-sm); color: var(--muted); }

.form-success {
  max-width: 620px;
  padding: var(--space-xl);
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.form-success[hidden] { display: none; }

.form-success h3 {
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.form-success p { margin-block-start: var(--space-sm); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding-block: calc(var(--space-4xl) + 44px) var(--space-4xl);
  text-align: center;
}
.notfound__inner { display: grid; gap: var(--space-lg); justify-items: center; max-width: 52ch; }

/* --------------------------------------------------------------------------
   Icon list. Janette asked for a graphic on body-text bullets. Emoji are
   banned by the design gate and would sit badly against this audience, so
   these are inline monochrome line icons taking currentColor instead.
   -------------------------------------------------------------------------- */

/* auto-fit rather than a viewport breakpoint: this list lives in the narrow
   right-hand column of .split, so it has to respond to its own width, not the
   window's. A fixed two-column rule overflowed that column between 900 and
   1100px. */
.ilist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  column-gap: var(--space-2xl);
}

.ilist__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-2xs);
  align-items: start;
  padding-block: var(--space-lg);
  border-block-start: 1px solid var(--line-strong);
}

.ilist__icon {
  width: 22px;
  height: 22px;
  margin-block-start: 3px;
  color: var(--ink-soft);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ilist__title {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.ilist__body {
  grid-column: 2;
  max-width: 46ch;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Legal pages (deploy-injected: /privacy, /cookies, /terms)
   The deploy renders the central templates into this site's own shell, so
   only the seven fixed .legal-page* class names are ours to style. The page
   opens like every other inner page: the same top offset under the fixed
   header, a light title block on a hairline, then a single reading column.
   Global resets strip list bullets and margins, so both come back here.
   -------------------------------------------------------------------------- */

.legal-page {
  padding-block: calc(var(--space-4xl) + 44px) var(--section-y);
}

.legal-page__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-2xl);
}

.legal-page__title {
  max-width: 20ch;
  font-size: var(--text-h1);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.legal-page__last-updated {
  margin-block-start: calc(-1 * var(--space-2xl) + var(--space-md));
  padding-block-end: var(--space-2xl);
  border-block-end: 1px solid var(--line);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-page__body {
  display: grid;
  gap: var(--space-lg);
  max-width: 66ch;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-soft);
}

.legal-page__body strong {
  font-weight: 600;
  color: var(--ink);
}

.legal-page__body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  transition: color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .legal-page__body a:hover { color: var(--muted); }
}

.legal-page__section-heading {
  margin-block-start: var(--space-xl);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.legal-page__section-subheading {
  margin-block-start: var(--space-sm);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
}

.legal-page__body ul {
  display: grid;
  gap: var(--space-sm);
  padding-inline-start: 1.25em;
  list-style: disc;
}

.legal-page__body li::marker { color: var(--muted); }

.legal-page__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.legal-page__body th,
.legal-page__body td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  text-align: left;
  vertical-align: top;
  border-block-end: 1px solid var(--line);
}

.legal-page__body th {
  font-weight: 600;
  color: var(--ink);
}