/* ==========================================================================
   Revere Counselling — site styles
   --------------------------------------------------------------------------
   Everything that controls how the site LOOKS lives in this one file.
   The sections are labelled, so you can search for what you want to change.

   1. Design tokens (colours, type, spacing)   <- change brand colours here
   2. Base + typography
   3. Layout helpers
   4. Header & navigation
   5. Buttons
   6. Hero
   7. Section furniture (eyebrows, leaf dividers)
   8. Cards: focus areas, programmes, pricing, team, posts, quotes
   9. Gallery
  10. FAQ (accordion)
  11. Forms
  12. Blog article ("prose") styles
  13. Footer
  14. Motion & accessibility
   ========================================================================== */


/* 1. DESIGN TOKENS ========================================================= */

:root {
  /* Colour — pulled from the Revere logo and the testimonial cards.
     --laurel is the olive branch in the logo. It is the accent colour;
     change it here and it changes everywhere on the site. */
  --ink:          #1B1A16;   /* deep warm black — the logo square          */
  --ink-2:        #3A382F;   /* headings on paper                          */
  --paper:        #FCFAF6;   /* warm paper white — the page background     */
  --paper-2:      #F4F1E8;   /* slightly deeper paper, for alternate bands */
  --laurel:       #4E6146;   /* olive green — primary accent               */
  --laurel-deep:  #3A4A34;
  --laurel-wash:  #E6EADF;   /* pale olive, for tinted section grounds     */
  --taupe:        #8C7B6D;   /* warm taupe from the testimonial cards      */
  --gold:         #B8913F;   /* the five stars                             */
  /* Call-to-action gold. Periwinkle sits at hue 246deg, so its complement is
     amber (~66deg) — this is what makes the buttons read against the purple.
     The olive --laurel stays the accent for links, rules and bullets. */
  --cta:          #B8913F;
  --cta-hover:    #C9A24A;
  --muted:        #6B6E63;   /* body-secondary text, biased toward olive   */
  --line:         #DFDACC;   /* hairlines and card borders                 */
  --card:         #FFFFFF;
  /* Grounds for the deliberately dark sections. Kept separate from --ink so a
     component sitting on them can safely re-map --ink for its own text. */
  --ground-dark:  #1B1A16;
  /* Deepened from the periwinkle used across the S.E.T and R.I.S.E flyers
     (#776BDB), so the feature band picks up the existing print material. */
  --ground-plum:  #382E6B;
  --footer-bg:    #1B1A16;
  --shadow:       0 1px 2px rgba(27,26,22,.04), 0 8px 24px rgba(27,26,22,.06);
  --shadow-lift:  0 2px 4px rgba(27,26,22,.05), 0 16px 40px rgba(27,26,22,.10);

  /* Type */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body:    "Karla", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Type scale */
  --t-xs:   0.78rem;
  --t-sm:   0.9rem;
  --t-base: 1.0625rem;
  --t-md:   1.2rem;
  --t-lg:   clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --t-xl:   clamp(1.7rem,  1.3rem + 2vw,   2.5rem);
  --t-2xl:  clamp(2.1rem,  1.5rem + 3vw,   3.4rem);
  --t-3xl:  clamp(2.5rem,  1.6rem + 4.2vw, 4.2rem);

  /* Spacing + shape */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --band:   clamp(3.5rem, 7vw, 6.5rem);
  --wrap:   72rem;
  --wrap-narrow: 42rem;
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  color-scheme: light;
}

/* Dark theme. Only the tokens are redefined — no component ever hard-codes
   a colour, so both themes stay in step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:         #EFEBE0;
    --ink-2:       #F3F0E7;
    --paper:       #16170F;
    --paper-2:     #1D1F16;
    --laurel:      #A3BC90;
    --laurel-deep: #B9CFA7;
    --laurel-wash: #23281C;
    --taupe:       #B9A797;
    --gold:        #D8B978;
    --cta:         #D8B978;
    --cta-hover:   #E4C88C;
    --muted:       #A5A797;
    --line:        #33362A;
    --card:        #1D1F16;
    --ground-dark: #262A1D;
    --ground-plum: #2C2455;
    --footer-bg:   #0F1009;
    --shadow:      0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink:         #EFEBE0;
  --ink-2:       #F3F0E7;
  --paper:       #16170F;
  --paper-2:     #1D1F16;
  --laurel:      #A3BC90;
  --laurel-deep: #B9CFA7;
  --laurel-wash: #23281C;
  --taupe:       #B9A797;
  --gold:        #D8B978;
  --cta:         #D8B978;
  --cta-hover:   #E4C88C;
  --muted:       #A5A797;
  --line:        #33362A;
  --card:        #1D1F16;
  --ground-dark: #262A1D;
  --ground-plum: #2C2455;
  --footer-bg:   #0F1009;
  --shadow:      0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45);
  color-scheme: dark;
}


/* 2. BASE + TYPOGRAPHY ===================================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A whisper of paper grain. Keeps the large flat areas from feeling digital. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 0;
  color: var(--ink-2);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); letter-spacing: -0.005em; }

p { margin: 0; }

a { color: var(--laurel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--laurel-deep); }

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

strong { font-weight: 700; }

::selection { background: var(--laurel); color: var(--paper); }

.skip {
  position: absolute;
  left: 0; top: 0;
  transform: translateY(-120%);
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  z-index: 200;
  font-weight: 700;
}
.skip:focus { transform: translateY(0); color: var(--paper); }

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


/* 3. LAYOUT HELPERS ======================================================== */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.band { padding-block: var(--band); }
.band--tint   { background: var(--paper-2); }
.band--laurel { background: var(--laurel-wash); }
.band--plum   { background: var(--ground-plum); }

/* Inside the plum band the tokens flip, so nested components stay readable. */
.band--plum {
  --ink-2: #FBF8EF;
  --ink: #F1EEE4;
  /* Secondary text and rules take a lilac tint rather than the warm greys,
     which turn muddy against the purple. */
  --muted: #C6BFE2;
  --taupe: #B3A8D8;
  --card: #2F2760;
  --line: #4B4189;
  --laurel: #C9BEF0;
  color: var(--ink);
}

.stack     { display: flex; flex-direction: column; gap: 1rem; }
.stack--lg { gap: 1.75rem; }
.stack--xl { gap: 2.75rem; }

.lede {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}
.measure { max-width: 62ch; }
.center  { text-align: center; }
.center .lede, .center .measure { margin-inline: auto; }


/* 4. HEADER & NAVIGATION =================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink-2);
  margin-right: auto;
  min-width: 0;
}
.brand img { width: 38px; height: 38px; border-radius: 3px; }
.brand__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
}
.brand__tag {
  display: block;
  font-family: var(--body);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 500;
}

.nav { display: flex; align-items: center; gap: .35rem; }

.nav a {
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--laurel-wash); color: var(--laurel-deep); }

/* The current page gets a small olive underline rather than a filled pill. */
.nav a[aria-current="page"] {
  color: var(--laurel-deep);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--laurel);
  border-radius: 0;
}

.nav__cta { margin-left: .5rem; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .5rem .7rem;
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }

/* Very narrow phones: the brand and the menu button must share ~345px. */
@media (max-width: 30rem) {
  .site-header__inner { gap: .6rem; min-height: 64px; }
  .brand img { width: 32px; height: 32px; }
  .brand__name { font-size: .82rem; letter-spacing: .04em; }
  .brand__tag { font-size: .55rem; letter-spacing: .1em; }
  .nav-toggle { padding: .5rem .55rem; }
  .nav-toggle span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding: .85rem .25rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: var(--t-base);
  }
  .nav a[aria-current="page"] { box-shadow: none; }
  .nav__cta { margin: 1rem 0 0; justify-content: center; }
}


/* 5. BUTTONS =============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primary {
  background: var(--cta);
  /* Gold is a mid-tone, so white on it fails contrast. The label stays dark
     in both themes and on every ground, the plum band included. */
  color: #1B1A16;
  box-shadow: var(--shadow);
}
.btn--primary:hover { background: var(--cta-hover); color: #1B1A16; box-shadow: var(--shadow-lift); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--laurel); color: var(--laurel-deep); background: var(--laurel-wash); }

.btn--ink { background: var(--ground-dark); color: #FCFAF6; }
.btn--ink:hover { background: var(--ground-dark); opacity: .9; color: #FCFAF6; }


.btn--sm { padding: .55rem 1rem; font-size: var(--t-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.center .btn-row { justify-content: center; }

/* A quiet text link with a moving arrow. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--laurel);
}
.arrow-link::after { content: "→"; transition: transform .2s ease; }
.arrow-link:hover::after { transform: translateX(4px); }


/* 6. COVER (home page only) ================================================
   The home page is set like the opening spread of a printed booklet: a
   masthead rail of small caps, one large display line with a drawn stroke
   under it, an arched portrait with a rotating seal, and a numbered index
   along the foot. None of this is used by the interior pages. */

.cover {
  position: relative;
  padding-block: clamp(1.25rem, 2.5vw, 2.25rem) clamp(3rem, 6vw, 5rem);
}


/* --- Masthead rail -------------------------------------------------------- */
.cover__rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem 2rem;
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
  padding: .85rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* --- The type + portrait ------------------------------------------------- */
.cover__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.cover__title {
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: initial;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.cover__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--laurel);
}

.cover__lede {
  font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem);
  line-height: 1.68;
  color: var(--muted);
  max-width: 46ch;
}

.cover__actions {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.9rem;
}

/* A plain underlined link, deliberately not a second button. */
.link-quiet {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--taupe);
  transition: color .18s ease, border-color .18s ease;
}
.link-quiet:hover { color: var(--laurel-deep); border-bottom-color: var(--laurel); }

.cover__figure { position: relative; margin: 0; }

/* The same arch again as a hairline, shifted up and right — a deliberate
   off-register second impression, the way a two-colour print misaligns. */
.cover__figure::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.4rem -1.4rem 1.4rem 1.4rem;
  border: 1px solid var(--laurel);
  opacity: .38;
  border-radius: 50% 50% var(--r-md) var(--r-md) / 40% 40% var(--r-md) var(--r-md);
}

.cover__arch {
  aspect-ratio: 5 / 6;
  border-radius: 50% 50% var(--r-md) var(--r-md) / 40% 40% var(--r-md) var(--r-md);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 24px 64px rgba(27,26,22,.15);
}
.cover__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }

/* --- The seal ------------------------------------------------------------ */
.seal {
  position: absolute;
  left: -1.6rem;
  bottom: -1.1rem;
  width: clamp(86px, 9vw, 120px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow);
}
/* Hairline ring, inset from the rotating text, so it reads as a stamp. */
.seal::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.seal__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: seal-spin 30s linear infinite;
}
.seal__ring text {
  font-family: var(--body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: var(--taupe);
}
.seal__leaf { width: 24%; height: auto; color: var(--laurel); }
@keyframes seal-spin { to { transform: rotate(360deg); } }

/* --- Foot index ---------------------------------------------------------- */
.cover__index {
  list-style: none;
  margin: clamp(3rem, 7vw, 5rem) 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem 2.5rem;
}
.cover__index li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
  max-width: 34ch;
}
.cover__index span {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--laurel);
}

@media (max-width: 62rem) {
  .cover__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem); }
  .cover__figure { max-width: 25rem; margin-inline: auto; width: 100%; }
  /* No room for the off-register outline once the photo fills the column. */
  .cover__figure::before { display: none; }
  .seal { left: .25rem; bottom: -.75rem; }
  .cover__index { grid-template-columns: 1fr; gap: .9rem; }
  .cover__index li { max-width: none; }
}
@media (max-width: 44rem) {
  .cover__rail { justify-content: flex-start; gap: .4rem 1.25rem; font-size: .62rem; }
  .wide-only { display: none; }
}

/* Compact hero used on the interior pages. */
.page-head {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
  background: radial-gradient(70ch 34ch at 8% -20%, var(--laurel-wash), transparent 70%);
}
.page-head h1 { font-size: var(--t-2xl); }


/* 7. SECTION FURNITURE ===================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--taupe);
}
.center .eyebrow { justify-content: center; }

/* Leaf divider — the olive branch from the logo, reduced to one leaf. */
.leaf-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--laurel);
}
.leaf-rule::before,
.leaf-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.leaf-rule svg { width: 20px; height: 20px; opacity: .8; }

.section-head { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2.5rem; }
.section-head h2 { max-width: 22ch; }
.center.section-head h2 { margin-inline: auto; }


/* 8. CARDS ================================================================= */

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 64rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 52rem) { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 44rem) { .grid--2, .grid--4 { grid-template-columns: 1fr; } }

/* --- The five habits: a row that wanders off the baseline ---------------- */
/* Each second tile drops down, so the row reads as an arrangement rather
   than a grid of equal boxes. */
.wander {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}
.wander__item:nth-child(even) { margin-top: clamp(1.5rem, 4vw, 3.25rem); }
.wander__img {
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 6px 6px / 22% 22% 6px 6px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
}
.wander__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.wander__item:hover .wander__img img { transform: scale(1.06); }
.wander__label {
  margin-top: .9rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.wander__label span {
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--taupe);
}
@media (max-width: 60rem) { .wander { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 34rem) {
  .wander { grid-template-columns: repeat(2, 1fr); }
  .wander__item:nth-child(even) { margin-top: 2rem; }
}

/* --- Programmes, set as a two-page spread -------------------------------- */
/* Hairlines and shared edges instead of two floating cards. */
.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spread__page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem);
}
.spread__page + .spread__page { border-left: 1px solid var(--line); }
.spread__page:first-child { padding-left: 0; }
.spread__page:last-child { padding-right: 0; }
.spread__initials {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--laurel);
  line-height: 1;
}
.spread__expand {
  font-size: var(--t-sm);
  color: var(--taupe);
  font-weight: 500;
  letter-spacing: .04em;
}
.spread__body { color: var(--muted); }
.spread__page .arrow-link { margin-top: auto; align-self: flex-start; padding-top: .4rem; }
@media (max-width: 44rem) {
  .spread { grid-template-columns: 1fr; }
  .spread__page { padding-inline: 0; }
  .spread__page + .spread__page { border-left: 0; border-top: 1px solid var(--line); }
}

/* The spec list is what actually separates the two programmes. */
.spec { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.spec > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.spec dt {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--taupe);
}
.spec dd { margin: 0; font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
@media (max-width: 30rem) { .spec > div { grid-template-columns: 1fr; gap: .1rem; } }

/* --- Pricing ------------------------------------------------------------- */
.tier {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
/* Only the free trial is lifted — it is the one we want people to take. */
.tier--feature {
  border-color: var(--laurel);
  box-shadow: var(--shadow-lift);
  position: relative;
}
.tier--feature::before {
  content: "Start here";
  position: absolute;
  top: -.7rem; left: clamp(1.5rem, 3vw, 2rem);
  background: var(--laurel);
  color: #FCFAF6;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border-radius: 999px;
}
:root[data-theme="dark"] .tier--feature::before { color: #16170F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tier--feature::before { color: #16170F; }
}
.tier__name {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--taupe);
}
.tier__price {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.1;
}
.tier__price small { display: block; font-family: var(--body); font-size: var(--t-sm); font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: .2rem; }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.tier li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: .6rem;
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.5;
}
.tier li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--laurel); margin-top: .55rem; }

/* On the home page the same three tiers are set as a ruled price list, to
   match the flat, printed feel of the cover. Other pages keep the cards. */
.price-list { gap: 0; border-top: 1px solid var(--line); }
.price-list .tier {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}
.price-list .tier + .tier { border-left: 1px solid var(--line); }
.price-list .tier:first-child { padding-left: 0; }
.price-list .tier:last-child { padding-right: 0; }
.price-list .tier--feature { border-top: 2px solid var(--laurel); margin-top: -1px; }
.price-list .tier--feature::before { top: -.72rem; left: 0; }
@media (max-width: 52rem) {
  .price-list .tier + .tier { border-left: 0; border-top: 1px solid var(--line); }
  .price-list .tier { padding-inline: 0; }
}

/* --- Team ---------------------------------------------------------------- */
.person { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.person__photo {
  aspect-ratio: 1;
  width: 100%;
  max-width: 220px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.person__role {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--laurel);
}
.person__creds { font-size: var(--t-sm); color: var(--muted); }

/* --- Value cards (mission / vision) -------------------------------------- */
.value {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.value h3 {
  font-size: var(--t-xs);
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--taupe);
}
.value p { color: var(--muted); font-size: var(--t-sm); line-height: 1.7; }

/* --- Testimonial quote cards --------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  break-inside: avoid;
}
.quote__stars { color: var(--gold); font-size: .95rem; letter-spacing: .18em; line-height: 1; }
.quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.quote figcaption {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-top: auto;
  padding-top: .25rem;
}

/* Masonry-ish columns so cards of different lengths sit tight. */
.quote-columns { columns: 3; column-gap: 1.25rem; }
.quote-columns > * { margin-bottom: 1.25rem; }
@media (max-width: 62rem) { .quote-columns { columns: 2; } }
@media (max-width: 42rem) { .quote-columns { columns: 1; } }

/* --- Blog post cards ----------------------------------------------------- */
.post {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: inherit; }
.post__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.post__img img { width: 100%; height: 100%; object-fit: cover; }
.post__body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.post__meta {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 700;
}
.post__title { font-size: var(--t-lg); }
.post p { font-size: var(--t-sm); color: var(--muted); line-height: 1.6; }
.post .arrow-link { margin-top: auto; padding-top: .4rem; }


/* 9. GALLERY =============================================================== */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.5rem; }
.gallery figure {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
/* Flyers come in wildly different aspect ratios (square, tall, landscape).
   A fixed frame with object-fit: contain keeps every card the same height
   so the grid lines up, instead of the tallest flyer stretching its card. */
.gallery__frame {
  aspect-ratio: 3 / 4;
  background: var(--paper-2);
  display: flex;
}
.gallery__frame img { width: 100%; height: 100%; object-fit: contain; }
.gallery figcaption {
  padding: 1rem 1.25rem 1.25rem;
  font-size: var(--t-sm);
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.gallery figcaption b { display: block; color: var(--ink-2); font-family: var(--display); font-size: var(--t-md); font-weight: 600; margin-bottom: .2rem; }


/* 10. FAQ ================================================================== */

.faq { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--body);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--laurel);
  transition: transform .2s ease;
  line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 0 1.35rem; color: var(--muted); max-width: 65ch; }
.faq__answer p + p { margin-top: .8rem; }


/* 11. FORMS ================================================================ */

.form { display: flex; flex-direction: column; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 40rem) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--taupe);
}
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .8rem .9rem;
  width: 100%;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--laurel); outline: 2px solid color-mix(in srgb, var(--laurel) 30%, transparent); outline-offset: 0; }
.field__hint { font-size: var(--t-xs); color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 400; }

.form__note { font-size: var(--t-xs); color: var(--muted); line-height: 1.6; }

/* Honeypot — hidden from people, catches bots. */
.form__trap { position: absolute; left: -9999px; opacity: 0; }

.form__status {
  padding: .9rem 1.1rem;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--laurel-wash);
  color: var(--laurel-deep);
}
.form__status[hidden] { display: none; }
.form__status[data-state="error"] { background: color-mix(in srgb, #B3261E 12%, var(--card)); color: #B3261E; border-color: color-mix(in srgb, #B3261E 35%, transparent); }

/* Contact details list beside the form */
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.35rem; }
.contact-list dt,
.contact-list .contact-list__label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: .2rem;
}
.contact-list a { font-family: var(--display); font-size: var(--t-md); font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }


/* 12. BLOG ARTICLE STYLES ================================================== */

.prose { max-width: 66ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose p { color: var(--ink); line-height: 1.75; }
.prose h2 {
  font-size: var(--t-lg);
  margin-top: 2.5rem;
}
.prose h3 {
  font-size: var(--t-md);
  margin-top: 2rem;
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--laurel-deep);
}
.prose ul, .prose ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .75rem; }
.prose li { line-height: 1.7; padding-left: .25rem; }
.prose li::marker { color: var(--laurel); }
.prose figure { margin: 2rem 0; }
.prose figure img { border-radius: var(--r-lg); box-shadow: var(--shadow); }
.prose figcaption { font-size: var(--t-xs); color: var(--muted); margin-top: .6rem; text-align: center; }

/* Pull-quote used at the end of most articles. */
.pull {
  margin: 2.5rem 0;
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-left: 3px solid var(--laurel);
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-2);
}
.pull cite {
  display: block;
  margin-top: .8rem;
  font-family: var(--body);
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Definition-style block used for the reference citations */
.cite-block {
  background: var(--paper-2);
  border-radius: var(--r-md);
  padding: 1.25rem 1.4rem;
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.65;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--taupe);
}
.article-meta span[aria-hidden] { opacity: .45; }

.article-cta {
  margin-top: 3rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--laurel-wash);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.article-cta h2 { font-size: var(--t-lg); }
.article-cta p { color: var(--muted); max-width: 52ch; }

.post-nav {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}


/* 13. FOOTER =============================================================== */

.site-footer {
  background: var(--footer-bg);
  color: #C9C6B8;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  margin-top: var(--band);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
}
@media (max-width: 62rem) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 34rem) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer h2 {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8F8F7E;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.site-footer a { color: #E6E2D6; text-decoration: none; font-size: var(--t-sm); }
.site-footer a:hover { color: #A3BC90; text-decoration: underline; }

.site-footer__brand { display: flex; flex-direction: column; gap: .9rem; }
.site-footer__brand img { width: 52px; height: 52px; border-radius: 3px; }
.site-footer__brand p { font-size: var(--t-sm); color: #A9A797; max-width: 30ch; line-height: 1.6; }

.site-footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #33342A;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: #83836F;
}


/* 14. MOTION & ACCESSIBILITY =============================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .site-header, .site-footer, .btn, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}