/* ==========================================================================
   Crocus Counselling Centre — hand-built stylesheet
   Replaces Elementor + Astra theme CSS with a single dependency-free file.

   Design tokens were extracted from the live site's computed styles:
     brand plum   #863667   text plum  #7d576d   heading plum #5d4251
     accent peach #e4a196   cream      #fbf7f7   overlay brown #4e453b
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-var.woff2") format("woff2");
}
@font-face {
  font-family: "PT Sans Narrow";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/ptsansnarrow-var.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/sourcesanspro-300.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sourcesanspro-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sourcesanspro-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/sourcesanspro-700.woff2") format("woff2");
}
/* EB Garamond ships as a variable font: one file covers 400-800 and one
   covers the same range in italic. Do not point these at a static
   instance — the range below would then be a claim the file cannot keep,
   and the verse would silently render at 400 whatever weight we ask for. */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/ebgaramond-roman-var.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/ebgaramond-italic-var.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  --plum: #863667;          /* footer / brand */
  --plum-text: #7d576d;     /* body copy */
  --plum-heading: #5d4251;  /* h2 / h3 */
  --peach: #e4a196;         /* accent: links, buttons */
  --peach-soft: #fbf7f7;    /* button text on peach */
  --cream: #fbf7f7;         /* page background */
  --white: #ffffff;
  --brown: #4e453b;         /* hero overlay */
  --brown-alt: #605448;     /* cta overlay */
  --ink: #292929;           /* testimonial body */

  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Source Sans Pro", system-ui, sans-serif;
  --font-accent: "PT Sans Narrow", "Source Sans Pro", sans-serif;
  --font-verse: "EB Garamond", Georgia, "Times New Roman", serif;

  --container: 1200px;   /* 30px gutters inside = 1140px of content */
  --gutter: 30px;

  /* Type scale — matched to the original at each breakpoint */
  --h1: 2.824rem;  /* 48px */
  --h2: 2.353rem;  /* 40px */
  --h3: 1.882rem;  /* 32px */
  --h4: 1.412rem;  /* 24px */
  --h5: 1.176rem;  /* 20px */
  --h6: 1rem;      /* 17px */

  --shadow-card: 0 25px 80px -25px rgb(0 0 0 / 14%);
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 106.25%;  /* 17px base, matches the original */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--plum-text);
  font-family: var(--font-body);
  font-size: 1rem;      /* 17px */
  font-weight: 400;
  line-height: 1.857;   /* 31.57px */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--peach); text-decoration: none; }
a:hover { color: var(--plum); }

blockquote,
figure {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1;
  color: var(--plum-heading);
  /* The theme breaks long words inside headings rather than letting them
     overflow the column. */
  overflow-wrap: break-word;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }

p { margin: 0 0 0.5em; }
ul, ol { margin: 0 0 0.5em; padding-left: 1.4em; }
hr { border: 0; border-top: 2px solid #000; margin: 0 0 25px; }

::selection { background: var(--peach); color: var(--peach-soft); }

:focus-visible {
  outline: 3px solid var(--peach);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: 1400px; }
.container--narrow { max-width: 800px; padding-inline: 0; }

/* Section rhythm — the vertical spacing each section had on the original.
   Overrides: --pad-t / --pad-b */
.section {
  position: relative;
  padding-block: var(--pad-t, 120px) var(--pad-b, 120px);
}
.section--compact { --pad-t: 100px; --pad-b: 100px; }
.section--roomy { --pad-b: 150px; }
.section--tight { --pad-b: 90px; }
.section--tall { --pad-b: 220px; }
.section--xl { --pad-b: 300px; }
.section--flush { --pad-t: 0px; }

.stack > * + * { margin-top: 20px; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 20px 40px;
  background: var(--peach);
  color: var(--peach-soft);
  font-family: var(--font-body);
  font-size: 0.765rem;   /* 13px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.btn:hover,
.btn:focus-visible {
  background: var(--plum);
  color: var(--white);
}
.btn--light { background: var(--white); color: var(--plum); }
.btn--light:hover { background: var(--peach); color: var(--white); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: 17px;
}

/* The live site uses Astra's 1240px header container, which is wider than
   the 1140px content container used by the page body. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 61px;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;
}

.site-header__logo img { width: 120px; }

.site-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.site-nav__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  display: block;
  /* 17px matches the original at full width and scales down as the row
     tightens, so the links never wrap onto a second line. */
  padding-inline: clamp(6px, 1.15vw, 17px);
  white-space: nowrap;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible,
.site-nav__list a[aria-current="page"] { color: var(--peach); }

.site-header__cta { flex-shrink: 0; }

/* Menu button — hidden on desktop, a peach square with a white icon */
.nav-toggle {
  position: relative;
  z-index: 70;
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--peach);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: var(--white);
}
.nav-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-inline: var(--gutter);
  background-color: var(--brown);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  isolation: isolate;
}

/* Dark scrim over the photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brown);
  opacity: 0.25;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding-block: 100px 0;
  text-align: center;
}

.hero__eyebrow {
  margin: 0 0 8px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.941rem;  /* 16px */
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero__title {
  margin: 0;
  color: var(--white);
  font-size: var(--h1);
  font-weight: 800;
  line-height: 1;
}

.hero__subtitle {
  margin: 0;
  color: var(--white);
  font-family: var(--font-head);
  font-size: var(--h5);
  font-weight: 400;
  line-height: 1.2;
  text-transform: capitalize;
}

.hero__cta { margin: 30px 0 0; }

/* Sub-page heroes sit at the bottom of the viewport, left aligned.
   The hero adds no gutter of its own - the content block handles it. */
.hero--page { align-items: flex-end; padding-inline: 0; }
.hero--page .hero__content {
  max-width: 1140px;
  padding-block: 0 120px;
  text-align: left;
}
.hero--page .hero__eyebrow { margin-bottom: 20px; }
.hero--page .hero__title { font-size: var(--h1); font-weight: 700; }

/* --------------------------------------------------------------------------
   8. Section heading + rule
   -------------------------------------------------------------------------- */
.eyebrow {
  margin: 0;
  color: var(--plum-heading);
  font-family: var(--font-head);
  font-size: var(--h6);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.25;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--white); }

.section-title { margin: 0; }

.rule {
  width: 100%;
  height: 2px;
  margin: 20px 0 50px;
  background: var(--plum-heading);
  border: 0;
}

/* --------------------------------------------------------------------------
   9. Prose blocks
   -------------------------------------------------------------------------- */
.prose p { margin-bottom: 0.5em; }
.prose p:last-child { margin-bottom: 0; }
.prose ol,
.prose ul { margin-bottom: 0.5em; }
.prose li { margin-bottom: 0; }
.prose li > p { margin-bottom: 0.5em; }
.prose strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   10. Home — "Crocus-minded" poem section
   -------------------------------------------------------------------------- */
/* A quiet blush band between the hero and the services grid. The poem is
   set as a keepsake: a white card of verse beside the crocus it describes.
   The band dissolves into the page cream at its foot so the section ends on
   the same colour the services grid starts on, with no seam. */
.poem {
  position: relative;
  padding-block: 120px 220px;
  background: linear-gradient(180deg, #faf4f6 0%, #f4e9f0 78%, #fbf7f7 100%);
}

.poem__header {
  margin-bottom: clamp(48px, 6vw, 72px);
  text-align: center;
}
.poem__title {
  margin: 0;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  /* letter-spacing leaves a trailing gap; nudge back to optical centre */
  text-indent: 0.32em;
}
.poem__rule {
  width: 64px;
  height: 2px;
  margin: 26px auto 20px;
  background: var(--peach);
  border: 0;
}
.poem__byline {
  margin: 0;
  color: rgb(93 66 81 / 80%);
  font-family: var(--font-verse);
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.25;
}

/* Verse card on the left, the crocus standing beside it */
.poem__inner {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 300px);
  justify-content: center;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
}

.poem__card {
  margin: 0;
  padding: clamp(38px, 5vw, 62px) clamp(28px, 5vw, 66px);
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 30px 70px -32px rgb(93 66 81 / 35%);
}

/* The verse itself. Stanzas came out of the build script as paragraphs;
   the source's own   indents carry the intra-stanza shaping, and a
   hanging indent keeps a wrapped line reading as a continuation. */
.poem__stanza {
  margin: 0;
  padding-left: 1.6em;
  text-indent: -1.6em;
  color: #4e3a47;
  font-family: var(--font-verse);
  font-size: clamp(1.02rem, 0.92rem + 0.4vw, 1.16rem);
  /* 400-weight Garamond washes out on screens; 500 keeps the ink */
  font-weight: 500;
  line-height: 1.66;
}
.poem__stanza + .poem__stanza { margin-top: 1.45em; }

/* A quiet literary cue: the opening initial in brand plum */
.poem__stanza:first-child::first-letter {
  color: var(--plum);
  font-size: 1.5em;
}

.poem__art {
  display: flex;
  justify-content: center;
}
.poem__art img {
  width: clamp(220px, 24vw, 320px);
  filter: drop-shadow(0 24px 28px rgb(63 42 58 / 20%));
}

/* --------------------------------------------------------------------------
   11. Home — service cards
   -------------------------------------------------------------------------- */
.services {
  background: var(--white);
  padding-block: 0 150px;
  /* The cards ride up 100px into the poem band above (see .card below). The
     poem is a positioned element and the cards are not, so without an explicit
     stacking order the poem paints over them: the top of every card image is
     clipped and the top third of each card link is unclickable. */
  position: relative;
  z-index: 1;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1365px;
  margin-inline: auto;
  /* The band is wider than the 1200px container, but it still has to breathe:
     the page gutter on both sides, equal at every width, instead of the old
     per-card 10px left margin and no right margin on the last card. */
  padding-inline: var(--gutter);
}
/* The cards ride up into the section above, as they did on the original */
.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: -100px;
}
.card__media { overflow: hidden; }
.card__media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card__title {
  margin: 0;
  font-size: var(--h6);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.card__title a { color: var(--plum-heading); }
.card__title a:hover { color: var(--peach); }
.card__rule { margin: 0 0 20px; }
.card__text { margin: 0; }
.card__text a { color: var(--plum-text); }
.card__text a:hover { color: var(--peach); }
.card__text { font-size: var(--h5); font-family: var(--font-head); font-weight: 400; line-height: 1.2; }

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
/* The section sat flush against the white services band above and the
   photo CTA below. 3.5em is 60px at the 17px base, and scales with the
   reader's font size. */
.testimonials-section {
  padding-block: 3.5em;
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-inline: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
}

/* Each card is the same height whatever the length of the quote: the text
   is clipped to a fixed number of lines and the rest is one click away.
   That keeps the section short instead of letting the longest quote set
   the height for both columns. */
.testimonial {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  padding: 10px;
}
.testimonial__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.testimonial__media {
  /* The portrait must not shrink: the global `img { max-width: 100% }`
     makes it collapse to a sliver inside a shrinking flex row. */
  flex: 0 0 auto;
}
.testimonial__media img {
  width: 140px;
  height: 140px;
  max-width: none;
  object-fit: cover;
  object-position: 50% 25%;
}
.testimonial__author {
  margin: 10px 0 0;
  color: #272727;
  font-weight: 400;
}
/* The portraits are AI-generated, so the page says so directly under each
   one. Small, muted, but not so faint that it fails AA: --plum-text holds
   about 5.4:1 on white. */
.testimonial__note {
  margin: 6px 0 0;
  color: var(--plum-text);
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.testimonial__body {
  min-width: 0;
}
.testimonial__text {
  min-width: 0;
  /* The UA gives blockquote a 40px side margin, which eats the quote
     column down to nothing next to the portrait. */
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.62;
  max-height: 9.72em;               /* six lines */
  overflow: hidden;
}
.testimonial__text p { margin: 0 0 8px; }
.testimonial__text p:last-child { margin-bottom: 0; }

/* The clip fades out rather than ending on a hard edge */
.testimonial:not(.is-open) .testimonial__text {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.testimonial.is-open .testimonial__text {
  max-height: none;
  overflow: visible;
}

.testimonial__quote {
  display: block;
  height: 26px;
  color: rgb(0 0 0 / 12%);
  font-size: 42px;
  line-height: 0.6;
  font-family: var(--font-head);
  pointer-events: none;
}

.testimonial__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--plum);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
}
.testimonial__toggle[hidden] { display: none; }
.testimonial__toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.testimonial.is-open .testimonial__toggle::after {
  transform: translateY(1px) rotate(-135deg);
}
.testimonial__toggle:hover { color: var(--peach-deep, var(--peach)); }

/* --------------------------------------------------------------------------
   13. Home — closing CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1044px;
  padding: 0 var(--gutter);
  background-color: var(--brown-alt);
  background-image: url("../img/cta.jpg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brown-alt);
  opacity: 0.25;
}
.cta__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 570px;
  max-width: 100%;
  margin-left: 50%;
}
.cta__title { margin: 0 0 10px; }
.cta__text {
  margin: 15px 0;
  color: var(--white);
  font-size: var(--h3);
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1;
}
.cta .btn { text-align: center; }

/* --------------------------------------------------------------------------
   14. Two-column content sections
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.split__col > * + * { margin-top: 20px; }
.split__col--list { padding-bottom: 50px; }
.split__col--text { padding-top: 15px; }

/* Callout card (About → Mission Statement) */
.callout {
  width: 50%;
  background: rgb(255 255 255 / 65%);
  /* 72px, not the original's 80px: paired with the photo the card is 23px
     narrower, and at 80px "Mission Statement" broke onto two lines. */
  padding: 72px;
  border-radius: 2px;
}

/* The mission band is two halves: the statement card on the left, the photo
   of Lynn and Dave on the right. They share a row so they end up the same
   height, and the photo is cropped to fit rather than stretched. */
.mission {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.mission .callout {
  width: auto;                     /* the grid decides the width */
}
.mission__photo {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  margin: 0;
  min-width: 0;
}
.mission__photo img {
  width: 100%;
  height: 100%;
  min-height: 0;                   /* a grid item will not shrink past its ratio */
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 2px;
  box-shadow: 0 30px 70px -40px rgb(93 66 81 / 40%);
}
.mission__photo figcaption {
  color: var(--plum-text);
  font-family: var(--font-verse);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.3;
}

/* Icon list */
.icon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.icon-list svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 8px;
  fill: var(--peach);
}

/* --------------------------------------------------------------------------
   14b. Accordion
   -------------------------------------------------------------------------- */
.accordion {
  margin-top: 20px;
  border-top: 1px solid rgb(125 87 109 / 18%);
}

.accordion__item { margin: 0; }

.accordion__heading { margin: 0; }

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgb(125 87 109 / 18%);
  color: var(--plum-heading);
  font-family: var(--font-head);
  font-size: var(--h6);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s;
}
.accordion__trigger:hover { color: var(--peach); }

.accordion__label { flex: 1 1 auto; }

.accordion__chevron {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  fill: var(--peach);
  transition: transform 0.25s ease;
}
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }

/* Grid rows animate the open/close height; visibility keeps the collapsed
   panel out of the tab order and the accessibility tree. */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.accordion__body {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0.25s;
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__item.is-open .accordion__body { visibility: visible; }

.accordion__body p {
  margin: 0;
  padding: 14px 0 16px;
  color: var(--plum-text);
}
.accordion__body p + p { padding-top: 0; }

/* Myths variant: long claims read better as sentences than as nav labels */
.accordion--myths .accordion__trigger {
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
.accordion--myths .accordion__kicker {
  flex: 0 0 auto;
  margin-top: 3px;
  padding: 2px 8px;
  background: var(--peach);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.5;
  text-transform: uppercase;
}
.accordion--myths .accordion__chevron { margin-top: 6px; }
.accordion--myths .accordion__body p {
  max-width: 78ch;
  font-size: 1rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   15. Contact form
   -------------------------------------------------------------------------- */
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 25px;
}
.contact-grid__form {
  flex: 1 1 60%;
  padding-left: 50px;
}
.contact-grid__side {
  flex: 1 1 30%;
  padding-left: 15px;
}
.contact-info {
  width: 50%;
  margin-top: 50px;
  padding-right: 50px;
}

.form-card {
  background: var(--white);
  padding: 50px;
  box-shadow: var(--shadow-card);
  border-radius: 2px;
}

.form-row { margin-bottom: 20px; }
.form-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-label {
  display: block;
  margin-bottom: 6px;
  color: var(--plum-heading);
  font-family: var(--font-head);
  font-size: 0.941rem;
  font-weight: 700;
}
.form-label .req { color: var(--peach); }

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid #d9cdd5;
  border-radius: 2px;
  color: var(--plum-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--peach);
  box-shadow: 0 0 0 3px rgb(228 161 150 / 30%);
}
.form-textarea { min-height: 160px; resize: vertical; }

.form-status {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--peach);
  background: var(--cream);
  color: var(--plum-heading);
  font-size: 0.941rem;
}
.form-status[hidden] { display: none; }
.form-status--ok { border-left-color: #2e7d54; }
.form-status--error { border-left-color: #c0392b; }
.form-label .optional { color: var(--plum-text); font-weight: 400; }

/* Reserve the widget's height so the Send button does not jump down when the
   Turnstile script arrives. */
.form-row--turnstile { min-height: 65px; margin-bottom: 10px; overflow: hidden; }

/* Honeypot — visually hidden, blocks naive bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  width: 0;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  /* The original wraps the footer in a padded row and centres a 1200px
     grid inside it, so the content keeps a 40px edge at most widths and
     only floats free once the viewport is wider than 1280px. */
  --footer-gutter: 40px;
  --footer-gutter-base: 30px;
  background: var(--plum);
  color: var(--white);
}

.site-footer .container {
  max-width: none;
  padding-inline: max(var(--footer-gutter), calc((100% - 1200px) / 2));
}

.site-footer__base {
  padding-inline: max(var(--footer-gutter-base), calc((100% - 1200px) / 2));
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px;
  padding-block: 120px 20px;
}

.site-footer__about { padding-block: 50px 45px; }
.site-footer__about .site-footer__text p { margin-bottom: 20px; }
.site-footer__about .site-footer__text p:first-child { margin-bottom: 36px; }
.site-footer__base { padding-block: 41px 40px; }

.site-footer__logo {
  width: 150px;
  /* the original's media widget sits this far above the tagline */
  margin-bottom: 47.6px;
}

.site-footer__title {
  margin: 0 0 24px;
  color: var(--white);
  /* The original keeps this at its desktop size at every width */
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
}
.site-footer__text p { margin-bottom: 8.5px; }
.site-footer__text a { color: var(--peach); }
.site-footer__text a:hover { color: var(--white); }
/* The footer is plum. The global `a:hover` is plum too, so every footer link
   erased itself on hover, and `.btn:hover` inverted the CTA to a plum block
   on a plum ground. On this surface hover has to lift towards light, never
   sink into the background. */
.site-footer__list a:hover,
.site-footer__list a:focus-visible { color: var(--white); }
.site-footer__cta .btn:hover,
.site-footer__cta .btn:focus-visible {
  background: var(--white);
  color: var(--plum);
}
.site-footer__list { margin: 0 0 52px; padding: 0; list-style: none; }
.site-footer__list li { margin-bottom: 8px; }
.site-footer__list hr {
  height: 1px;
  border: 0;
  background: #ccc;
  margin: 0 0 25px;
}
.site-footer__cta {
  text-align: center;
  /* The original's WP button block carries 12px of extra space above the
     button. Padding, not margin: a margin here would collapse with the
     heading's margin-bottom and do nothing. */
  padding-top: 12px;
}
.site-footer__cta .btn {
  display: inline-flex;
  align-items: center;
  min-height: 57px;
  /* Never overflow the column it sits in */
  max-width: 100%;
}

.site-footer__bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
}

.site-footer__copyright {
  margin: 0;
  color: rgb(255 255 255 / 50%);
  font-size: 1rem;
}
.site-footer__credit { color: rgb(255 255 255 / 50%); font-size: 1rem; }
.site-footer__credit a { color: rgb(255 255 255 / 50%); }
.site-footer__credit a:hover { color: var(--peach); }

/* --------------------------------------------------------------------------
   17. Scroll-to-top
   -------------------------------------------------------------------------- */
.scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--peach);
  color: var(--white);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s, background-color 0.3s;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { background: var(--plum); }
.scroll-top svg { width: 18px; height: 18px; fill: currentColor; }

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* --------------------------------------------------------------------------
   19. Responsive

   Breakpoints are taken from the original site's own behaviour:
     desktop  >= 922px
     tablet   545px - 921px   (Astra's "tablet" layout)
     mobile   <= 544px        (Astra's "xs" layout)
   The hero's own height switches at 768px (Elementor's md breakpoint).
   -------------------------------------------------------------------------- */

/* --- Tablet: 545px to 921px --- */
@media (max-width: 921px) {
  :root {
    --h1: 2.118rem;  /* 36px */
    --h2: 1.765rem;  /* 30px */
    --h3: 1.471rem;  /* 25px */
    --h4: 1.294rem;  /* 22px */
    --h5: 1rem;      /* 17px */
    --h6: 0.882rem;  /* 15px */
  }

  .section { padding-block: 60px; }
  .section--compact { --pad-t: 60px; --pad-b: 60px; }
  .section--roomy, .section--tight, .section--tall, .section--xl { --pad-b: 60px; }
  .poem { padding-block: 80px 80px; }
  /* The verse card and the crocus stack, bloom first as a vignette */
  .poem__inner { grid-template-columns: 1fr; gap: 44px; }
  .poem__art { order: -1; }
  .poem__art img { width: 200px; }
  .poem__card { max-width: 640px; margin-inline: auto; width: 100%; }
  .services { padding-block: 60px 60px; }
  .card { margin-top: 0; }
  .cta { min-height: 750px; }
  .cta__inner { margin-left: 0; width: 100%; }
  .callout { padding: 60px 50px; }
  .split { gap: 30px; }
  /* The mission band stacks: statement, then the photo beneath it */
  .mission { grid-template-columns: 1fr; }
  .mission__photo img { height: auto; aspect-ratio: 4 / 3; }

  /* The header swaps to a burger below 922px */
  /* The menu drops out of the header bar as a cream panel */
  .site-nav {
    position: fixed;
    inset: 95px 0 auto;
    z-index: 60;
    max-height: calc(100vh - 95px);
    overflow-y: auto;
    padding: 0;
    background: var(--white);
    box-shadow: 0 12px 24px rgb(0 0 0 / 12%);
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform 0.3s ease, visibility 0.3s;
  }
  .site-nav.is-open { visibility: visible; transform: none; }
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Mobile menu: the fluid desktop padding is dropped */
  .site-nav__list a {
    padding: 13px 20px;
    border-bottom: 1px solid #ddd;
    color: var(--plum-heading);
    font-size: 1rem;
    line-height: 1.5;
  }
  .site-nav__list a[aria-current="page"] { color: var(--peach); }
  .nav-toggle { display: block; margin-left: auto; }
  .site-header__cta { display: none; }
  .site-header__logo img { width: 90px; }

  .form-row--half { grid-template-columns: 1fr; }

  /* The original tightens the footer edge from 40px to 25px here */
  .site-footer { --footer-gutter: 25px; --footer-gutter-base: 25px; }
  /* The footer columns get narrow here; tighten the CTA so it still
     fits on one line */
  .site-footer__cta .btn { padding-inline: 20px; }

  /* The original's footer rows tighten here: less space above the
     columns, and the gap to the next row moves down */
  .site-footer__grid { padding-block: 80px 0; }
  .site-footer__about { padding-block: 20px 45px; }

  /* The original's first footer row carries 10px inside the grid, and its
     about paragraphs are spaced a little wider */
  .site-footer__grid { padding-block: 80px 10px; }
  .site-footer__about .site-footer__text p:first-child { margin-bottom: 46px; }

  /* The two-up testimonial grid leaves the quote too little room below
     921px, so the portrait goes above the text */
  .testimonial { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
  .testimonial__media img { width: 96px; height: 96px; }
}

/* --- Mobile: 544px and below --- */
@media (max-width: 544px) {
  :root {
    --h1: 1.882rem;  /* 32px */
    --h2: 1.529rem;  /* 26px */
    --h3: 1.294rem;  /* 22px */
    --h4: 1.176rem;  /* 20px */
    --h5: 0.882rem;  /* 15px */
    --h6: 0.765rem;  /* 13px */
  }

  .section { padding-block: 60px; }
  .section--compact { --pad-t: 60px; --pad-b: 60px; }
  .section--roomy, .section--tight, .section--tall, .section--xl { --pad-b: 60px; }
  .poem { padding-block: 80px 80px; }
  .services { padding-block: 60px 60px; }
  .card { margin-top: 0; }
  .cta { min-height: 750px; }
  .callout { padding: 35px; }
  .form-card { padding: 30px 20px; }

  .hero { padding-inline: var(--gutter); }
  .hero__content { padding-block: 50px 0; }
  .hero__eyebrow { padding-inline: 50px; }

  /* Stacked layouts (the original collapses these below 545px) */
  .services__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .testimonials,
  .split { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .form-row--half { grid-template-columns: 1fr; }
  .contact-grid { flex-direction: column-reverse; }
  .contact-grid__form { flex: 1 1 100%; max-width: 100%; padding-left: 0; }
  .contact-grid__side { flex: 1 1 100%; padding-left: 0; }
  .contact-info { width: 100%; padding-right: 0; }
  .callout { width: 100%; }

  /* The original tightens the footer edge to 20px here and stacks the
     bottom bar */
  .site-footer { --footer-gutter: 20px; --footer-gutter-base: 20px; }
  .site-footer__bottom { grid-template-columns: 1fr; gap: 8px; }

  .site-footer__grid { padding-block: 60px 0; }
  .site-footer__base { padding-block: 21px 20px; }

  .site-footer__list { margin-bottom: 8px; }

  /* The crocus vignette shrinks on a phone */
  .poem__art img { width: 150px; }
  .poem__inner { gap: 34px; }
  /* "CROCUS-MINDED" is a wordmark, so it must never break at the hyphen.
     Below 544px the tracking and size give way until it fits on one line. */
  .poem__title { font-size: clamp(1.15rem, 4.8vw, 1.62rem); letter-spacing: 0.24em; text-indent: 0.24em; }

  /* a narrower portrait buys the quote a wider column on a phone, and a
     smaller label keeps "read the full quote" on one line */
  .testimonial { grid-template-columns: 80px minmax(0, 1fr); column-gap: 14px; }
  .testimonial__media img { width: 80px; height: 80px; }
  .testimonial__toggle { font-size: 11.5px; letter-spacing: 1px; }
}

/* --- Hero gutters: 60px between 768px and 1024px --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero--centered { padding-inline: 60px; }
}

/* --- Hero content: 50px of top padding below 1025px --- */
@media (max-width: 1024px) {
  .hero__content { padding-block: 50px 0; }
}

/* --- Mission band: still two halves, but the card's 72px padding would eat
       most of a 400px column, so it tightens here (not below 921px, where the
       band stacks and the card is full width). --- */
@media (min-width: 922px) and (max-width: 1100px) {
  .mission .callout { padding: 48px; }
}

/* --- Sub-page heroes keep a full-height viewport at every size --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero--page .hero__content { padding: 80px; }
}
@media (max-width: 767px) {
  .hero--page { padding-inline: 0; }
  .hero--page .hero__content { padding: 40px; }
}

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