/* =====================================================================
   sections.css — The Breast Well homepage composition
   ---------------------------------------------------------------------
   Built against .docs/DESIGN-SPEC-PENPOT.md §5 as amended by
   .docs/DESIGN-DIRECTIVES.md §1–§5. Mobile-first; the four stops are
   600 / 900 / 1200 / 1440 (§3.1). Every desktop number is measured from the
   1440 board — comments carry the design's page-y coordinates so a reviewer
   can re-check against the reference render.

   SECTION BOXES AT 1440 (design y ranges, which set the decoration %):
     header        0–124    hero        124–739   trust bar   739–799
     mission     799–1354   meet      1354–2241   quals     2241–2902
     workshops  2902–3636   CTA       3636–3899   consults  3899–4723
     testimonials 4723–5207 contact   5207–5849   footer    5849–6114
   Sum = 6114 = the board height. Section padding below is chosen to hit
   these heights so the decoration percentages land where they were measured.
   ===================================================================== */

/* =====================================================================
   1. HEADER — spec §5.1 · design y 0–124
   1440 × 124, flex row space-between, padding 10 150. Sits on the hero wash
   (the wash rect starts at y=0, behind the header) so it carries the same
   --tint fill and the two read as one 739px band. Not sticky, no border.
   At 1440 space-between reproduces the measured x positions exactly:
   logo 150–285 · nav 489–883 · button 1087–1290.
   ===================================================================== */
.site-header {
  background-color: var(--tint);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding-block: 10px;
}

.site-header__brand {
  display: block;
  line-height: 0;
}

.site-header__logo {
  width: 100px;
  height: auto;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--r-button);
  color: var(--ink);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentcolor;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -7px;
}

.nav-toggle__bars::after {
  top: 7px;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.site-nav__link {
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--ink);
  text-decoration: none;
}

/* --rose-deep is 4.295:1 on the header's --tint band — under AA for 16px text.
   --rose-deep-hover is 4.878:1 on --tint. A hover colour is still text and still
   has to clear the floor on the background it lands on. */
.site-nav__link:hover {
  color: var(--rose-deep-hover);
}

/* Below 600 the logo + CTA + toggle do not fit on one row inside a 350px
   container (100 + 205 + 44 + 32 of gaps = 381 — measured: the toggle wrapped
   to its own row, left-aligned and orphaned). Two deliberate rows instead:
   logo | toggle, then the CTA full-width as a proper mobile primary action. */
@media (max-width: 599.98px) {
  /* The logo + CTA + toggle do not fit on one row inside a 350px container
     (100 + 205 + 44 + 32 of gaps = 381 — measured: the toggle wrapped to its
     own row, orphaned and left-aligned). Two deliberate rows instead:
     logo | toggle, then the CTA full-width as a proper mobile primary action.
     No `order` needed — this IS the DOM order. */
  .site-header__cta {
    flex-basis: 100%;
  }
}

/* Below 900 the nav is a disclosure panel. Without JS it stays visible and
   every link works (progressive enhancement); with JS the toggle appears and
   the panel collapses. */
@media (max-width: 899.98px) {
  .site-nav {
    flex-basis: 100%;
    padding-block: var(--sp-8) var(--sp-16);
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  .js .site-nav {
    display: none;
  }

  .js .site-nav[data-open] {
    display: block;
  }
}

@media (min-width: 900px) {
  /* Desktop composition is logo · nav · button. The toggle is gone here, so
     only these two need swapping against the DOM (see the note in header.php). */
  .site-nav {
    order: 2;
  }

  .site-header__cta {
    order: 3;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-20);
  }
}

@media (min-width: 1200px) {
  .site-header__logo {
    width: 135px;
  }

  .site-nav__list {
    gap: var(--sp-32); /* measured nav gap */
  }
}

/* =====================================================================
   2. HERO — spec §5.2 · design y 124–739 (band 0–739, behind the header)
   Text column 570 at x=150 · photo 423×535 at x=867 (right edge = 1290).
   ===================================================================== */
.hero {
  background-color: var(--tint);
  padding-block: var(--sp-32) 56px;
}

.hero__inner {
  display: grid;
  gap: var(--sp-40);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-40); /* Frame 48 */
}

.hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16); /* Frame 47 */
}

.hero__title {
  max-width: 570px;
}

.hero__lede {
  max-width: 557px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-32); /* Frame 46 */
}

/* 32px is a horizontal row gap; once the two buttons stack it reads as a hole
   in the layout. (Must come AFTER the rule above — same specificity.) */
@media (max-width: 599.98px) {
  .hero__actions {
    gap: var(--sp-16);
  }
}

.hero__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 423 / 535;
  object-fit: cover;
  border-radius: var(--r-mask-70);
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr 40%;
    align-items: center;
    gap: 48px;
  }
}

@media (min-width: 1200px) {
  /* 40 + 535 (photo) + 40 = 615 = the measured hero box height */
  .hero {
    padding-block: var(--sp-40);
  }

  .hero__inner {
    grid-template-columns: 570px 423px;
    justify-content: space-between;
    align-items: start;
    gap: 0;
  }

  /* Photo top lands on the measured y=164 from the section padding alone; the
     text column starts 40px lower, at the measured y=204. Top-aligned, NOT
     centred: centring put the H1 38px low, because Penpot reports the H1 frame
     as 250 tall (a 4-line box) while its own render wraps to 3 lines. Verified
     against .docs/design-ref/ref-sections/01-hero.png — H1 cap-tops at
     217/280/343 and the button row at y 533–583, which this reproduces to 2px.
     See the note on DESIGN-DIRECTIVES §3.2 in the task report. */
  .hero__copy {
    margin-top: var(--sp-40);
  }
}

/* =====================================================================
   3. TRUST BAR — spec §5.3 · design y 739–799
   Full-bleed --gold-deep band (A1: the design's #B9924E is 2.88:1 with
   white). Padding 20; the row is capped rather than stretched, which is
   what reproduces the measured item x 19/389/728/1101 at 1440 (see the
   ≥1200 tier for how, and why that is not §5.3's "no space-between").
   The ✓ is a literal character in the source string, kept as text so it
   inherits the fill and is announced once (§2.5).

   LAYOUT: an explicit grid at every width, per design-QA ruling R6 —
   NOT wrapping flex. The four items measure 260.19 + 229.14 + 262.59 +
   296.25 = 1048.17, so with 20px padding either side a wrapping flex row
   fits three items from W ≥ 861 but four only from W ≥ 1237, orphaning the
   fourth item alone on its own row across the whole 861–1236 band —
   1024, 1152, 1180, 1194 and 1200 included. A grid cannot orphan: the
   column count is stated, not discovered. Tiers are 1-up / 2-up ≥680 /
   4-up ≥1200. 680 (not 624, the arithmetic minimum for the widest pair
   558.84 + gap + 40) is 624 plus margin for font-metric variance.

   EVERY multi-column tier sizes its columns minmax(0, max-content), never
   bare max-content. A bare max-content column cannot give way, so copy
   that outgrows the row overruns the band instead of wrapping — and
   `html { overflow-x: clip }` (base.css §reset) means that overrun raises
   no scrollbar, does not move scrollWidth, and leaves nothing for QA to
   see. minmax(0, …) makes the failure mode a visible wrap instead of an
   invisible overrun. Locked by tests/Unit/TrustBarLayoutTest.php.
   ===================================================================== */
.trust-bar {
  background-color: var(--gold-deep);
}

.trust-bar__list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--sp-12);
  padding: var(--sp-20);
  justify-items: start;
}

.trust-bar__item {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--white);
}

@media (min-width: 680px) {
  .trust-bar__list {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    column-gap: clamp(24px, 4vw, 60px);
    row-gap: var(--sp-20);
  }
}

@media (min-width: 1200px) {
  /* 4-up. The spacing is the row's OWN leftover space, distributed by the
     grid, not a gap computed from an assumed item total.

     What this replaces: column-gap: clamp(28px, calc((100% - 1050px)/3),
     111px) with non-shrinkable columns. `100%` there is the content box
     (viewport − 40), so the rule handed the row (viewport − 1090) while the
     items actually measure 1048.17 — a constant 1.83px of slack from 1200 all
     the way to 1423, where the 111px clamp finally takes over. Any copy edit
     that widened an item spent that 1.83px and then ran straight off the band:
     measured, +5 characters on item 1 at 1366 put the fourth item's right edge
     47.9px past the content edge, with scrollWidth unchanged and no scrollbar.
     Here the browser measures the items, so a copy edit is absorbed by the gap
     first and only forces a wrap once the gap is down to its 28px floor.

     max-width is what keeps this from stretching to full width — the thing
     §5.3's "do not use space-between" is actually protecting against (its
     stated reason is reproducing item x 19/389/728/1101, and a full-width
     space-between at 1440 gives 20/397/744/1125, which is why it was banned).
     1048.17 items + 3 × 111 gap + 2 × 20 padding = 1421.17 → 1421px, which
     reproduces the ratified 1440 geometry (gap 110.94, item x 20/391/731/1105)
     and above 1423 holds the row at exactly the width the design drew. Unlike
     the calc it replaces, this number is cosmetic: if the copy changes, the
     gap changes with it and the row still cannot overrun the band. */
  .trust-bar__list {
    --trust-bar-4up-max: 1421px;

    grid-template-columns: repeat(4, minmax(0, max-content));
    justify-content: space-between;
    column-gap: 28px;
    max-width: var(--trust-bar-4up-max);
  }
}

/* =====================================================================
   4. MISSION — spec §5.4 · design y 799–1354 (on white)
   Centred head (watermark + H2 626 + intro 912) then exactly 3 cards
   380×226, gap 1 at desktop. There is no 4th "Conversation" card — that is
   wireframe-only. padding-bottom is 0: the 161px of air before Meet Yolande
   belongs to that section's box (its decoration % are measured from 1354).
   ===================================================================== */
.mission {
  padding-block: 56px 0;
}

.mission__head {
  --stack-gap: var(--sp-12); /* Frame 56 */
  align-items: center;
  max-width: 912px;
  margin-inline: auto;
  text-align: center;
}

.mission__title {
  max-width: 626px;
}

.mission__cards {
  display: grid;
  gap: var(--sp-32);
  margin-block-start: var(--sp-32); /* Frame 57 */
}

.mission-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding: var(--sp-20) 30px;
}

.mission-card__icon {
  width: 120px;
  height: 90px;
}

.mission-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.mission-card__copy {
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--body);
}

@media (min-width: 600px) {
  .mission__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-24);
  }
}

@media (min-width: 900px) {
  .mission {
    padding-block: 92px 0;
  }

  .mission__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-24);
  }
}

@media (min-width: 1200px) {
  /* gap:1 is a deliberate desktop-only artefact (§5.4) */
  .mission__cards {
    gap: 1px;
  }
}

/* =====================================================================
   5. MEET YOLANDE — spec §5.5 · design y 1354–2241 (161 air + 726 content)
   The <h2> is "Meet Yolande Daniel", set in Manrope 600/60 --rose-deep
   (A9: the design's #D97A8C is 2.95:1 on white). The panel's
   "Supporting Women…" line is an <h3> styled to the Display-40 scale — a
   visual-weight vs semantic-level split ruled on in
   .docs/seo/REBUILD-PRESERVATION-CONTRACT.md §3.2.
   The panel is offset right and bleeds past the container to x=1440, with
   the portrait card overlapping its left edge (§5.6).
   ===================================================================== */
.meet {
  padding-block: 56px 0;
}

.meet__title {
  font-family: var(--font-body);
  font-size: var(--fs-wm);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: 0;
  color: var(--rose-deep);
  margin-bottom: var(--sp-24);
}

.meet__panel {
  position: relative;
  background-color: var(--tint);
}

/* Above the two in-panel decorations (see the note in meet-yolande.php). */
.meet__panel-inner {
  position: relative;
  z-index: 1;
}

.meet__panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
  padding-block: var(--sp-32);
}

.meet__portrait {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: min(320px, 100%);
  margin-inline: auto;
  aspect-ratio: 383 / 461;
  overflow: hidden;
  background-color: var(--rose); /* carries no text — the brand rose, untouched */
  border-radius: var(--r-mask-50);
}

/* Alpha cut-out (C8): the rose card shows through around her. */
.meet__portrait img {
  width: 100%;
  height: auto;
}

.meet__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16); /* Frame 58 */
}

.meet__subhead {
  font-size: var(--fs-h2); /* Display 40 scale, but an <h3> in the DOM */
}

.meet__bio {
  display: flex;
  flex-direction: column;
  gap: 28px; /* one blank line at 16/1.75 — reproduces the measured 667×308 */
}

@media (min-width: 900px) {
  .meet__panel-inner {
    display: grid;
    grid-template-columns: 383px 1fr;
    align-items: start;
    gap: 48px;
    padding-block: 56px;
  }

  .meet__portrait {
    width: 383px;
    margin-inline: 0;
  }
}

@media (min-width: 1200px) {
  .meet {
    padding-block: 161px 0;
  }

  .meet__title {
    margin-left: 242px; /* x=392 — aligns with the panel's left edge */
    margin-bottom: 19px;
  }

  /* `.bleed-grid > :not(.decor)` in base.css is (0,2,0), so the selector here
     has to match it or the panel silently stays inside the content column
     (measured: 898 wide instead of the designed 1048). */
  .bleed-grid > .meet__panel {
    grid-column: content-start / full-end;
    margin-left: 242px;
  }

  .meet__panel-inner {
    display: block;
    padding: 108px 150px 107px 231px; /* text block 667 wide at x=623 */
  }

  .meet__portrait {
    position: absolute;
    top: 87px; /* page y 1693 */
    left: -243px; /* page x 149 — 1px outside the container, as measured */
    width: 383px;
    margin: 0;
  }
}

/* =====================================================================
   6. QUALIFICATIONS — spec §5.6 · design y 2241–2902 (full-bleed rose)
   A7: band → --rose-deep, because it carries a white Display-40 H2.
   A2: cards → --rose-card with --rose-100 body copy (4.53:1).
   Copy is verbatim from the design, grammatical wobble included — flagged
   for client sign-off, not silently fixed (spec §7).
   ===================================================================== */
.qualifications {
  background-color: var(--rose-deep);
  padding-block: 56px;
}

.qualifications__head {
  align-items: center;
  max-width: 528px;
  margin-inline: auto;
  text-align: center;
}

.qualifications__title {
  color: var(--white);
}

.qual-cards {
  display: grid;
  gap: var(--sp-24);
  margin-block-start: var(--sp-32);
}

.qual-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-40) var(--sp-20);
  background-color: var(--rose-card);
  border-radius: var(--r-qual);
}

/* Opaque white disc by design — the design masks a white-background
   illustration with a circle. Do not key it out (§4.1). */
.qual-card__icon {
  width: 90px;
  height: 90px;
  border-radius: var(--r-round);
}

.qual-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.qual-card__title {
  color: var(--white);
}

.qual-card__copy {
  font-size: var(--fs-body);
  line-height: var(--lh-card);
  color: var(--rose-100);
}

/* R7: 2-up from 768, not 900. At 768 a single column stretched the cards to
   707px — roughly double the designed 342 and visibly slack. Two columns at
   768 give (706.56 container − 24 gap) / 2 = 341.3px, within 1px of the
   design. Only the column count moves down to 768: the wider 32px gap and
   the 47px head offset belong with the section's own 900px padding change. */
@media (min-width: 768px) {
  .qual-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .qualifications {
    padding-block: 80px 60px;
  }

  .qual-cards {
    gap: var(--sp-32);
    margin-block-start: var(--sp-47);
  }
}

@media (min-width: 1200px) {
  .qual-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-57);
  }

  /* Fixed 344 at desktop: content must not set the height (§5.5) */
  .qual-card {
    height: 344px;
  }
}

/* =====================================================================
   7. WORKSHOPS — spec §5.7 · design y 2902–3636 (80 air + 574 + 80 air)
   Two columns 452 / 596, gap 92. Right column is 4 static list cards
   596×117 — nothing expands. All four rows align:center (the design's
   card 3 uses align:start; that inconsistency is not reproduced, §3.6).
   ===================================================================== */
.workshops {
  padding-block: 56px;
}

.workshops__inner {
  display: grid;
  gap: var(--sp-32);
}

.workshops__intro {
  --stack-gap: var(--sp-16); /* Frame 67 */
}

.workshops__title {
  max-width: 434px;
}

.workshops__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.workshop-row {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-20) 30px;
  background-color: var(--tint);
  border: 1px solid var(--rose-100); /* decorative — these rows are not interactive */
  border-radius: var(--r-row);
}

/* flex:none belongs on the PICTURE element, not the IMG: the picture is the
   flex item, and when it shrank the img's max-width:100% clamped a 77px icon
   to 46–58px (measured). */
.workshop-row > picture {
  flex: none;
}

.workshop-row__icon {
  width: 56px;
  height: 56px;
}

.workshop-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.workshop-row__copy {
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--body);
}

@media (min-width: 600px) {
  .workshop-row__icon {
    width: 77px;
    height: 77px;
  }
}

@media (min-width: 900px) {
  .workshops {
    padding-block: 80px;
  }

  .workshops__inner {
    grid-template-columns: 1fr 1.3fr;
    align-items: start;
    gap: 48px;
  }
}

@media (min-width: 1200px) {
  .workshops__inner {
    grid-template-columns: 452px 596px;
    justify-content: space-between;
    gap: 0;
    /* The left column's height is set by a decoration in the design; the
       decoration is now a CSS layer, so the box is pinned instead. */
    min-height: 574px;
  }

  .workshops__list {
    margin-top: 35px; /* page y 3017 — vertically centres the 504-tall stack */
  }
}

/* =====================================================================
   8. WORKSHOP CTA — spec §5.8 · design y 3636–3899 (full-bleed)
   cta-palm-band is pre-composed and opaque: it already contains the
   #F6DFE3 band and the color-burn-blended palm frond (§4.3 note 1).
   No mix-blend-mode, no rotation, no separate palm asset. It renders at
   every width — it IS the band's texture.
   ===================================================================== */
.workshop-cta {
  padding-block: 40px;
  background-color: var(--rose-100);
  background-image: url("/assets/img/decor/cta-palm-band.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.workshop-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);
  max-width: 722px;
  margin-inline: auto;
  text-align: center;
}

/* Display 40, exactly like a section H2 — but a <p>, not a heading (a second
   workshop-level heading would dilute the outline). */
.workshop-cta__prompt {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: -0.005em;
  color: var(--ink);
}

@media (min-resolution: 192dpi) {
  .workshop-cta {
    background-image: url("/assets/img/decor/cta-palm-band@2x.webp");
  }
}

@media (min-width: 1200px) {
  .workshop-cta {
    padding-block: 50px 49px; /* 50 + 96 + 16 + 52 + 49 = 263 */
  }
}

/* =====================================================================
   9. CONSULTATIONS — spec §5.9 · design y 3899–4723 (on white)
   Text 544 at x=150 · photo 478×623 at x=812, radius 50 (correction C2).
   There is deliberately NO CTA button here — the previous build invented one.
   ===================================================================== */
.consultations {
  padding-block: 56px;
}

.consultations__inner {
  display: grid;
  gap: var(--sp-32);
}

.consultations__copy {
  --stack-gap: var(--sp-16); /* Frame 80 */
}

.consultations__title {
  max-width: 544px;
}

.consultations__body {
  display: flex;
  flex-direction: column;
  gap: 28px; /* two paragraphs — reproduces the measured 544×168 */
}

.consultations__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 478 / 623;
  object-fit: cover;
  border-radius: var(--r-mask-50);
}

@media (min-width: 900px) {
  .consultations__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 48px;
  }
}

@media (min-width: 1200px) {
  /* 80 + 623 (photo) + 121 = 824 = the measured section box */
  .consultations {
    padding-block: 80px 121px;
  }

  .consultations__inner {
    grid-template-columns: 544px 478px;
    justify-content: space-between;
    gap: 0;
  }

  .consultations__copy {
    margin-top: 150px; /* page y 4129 */
  }
}

/* =====================================================================
   10. TESTIMONIALS — spec §5.10 · design y 4723–5207 (full-bleed --tint)
   The quote "card" is NOT a rounded rectangle: it is 4 stacked --rose-pill
   pills forming a blob silhouette (§3.4). Below 1200 it collapses to one
   radius-40 container — four mismatched rows at a narrow width read as a
   rendering bug.

   A10: quote text → --ink (#6B6366 on #EFC6CE is 3.79:1).
   §2.4: with exactly one testimonial, NO controls and NO dots render at
   all. The rules below exist for the second real quote onward.
   §7.2: the design's avatar is unrelated stock — shipped without one.
   ===================================================================== */
.testimonials {
  background-color: var(--tint);
  padding-block: 56px;
}

.testimonials__head {
  align-items: center;
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.carousel {
  position: relative;
  margin-block-start: var(--sp-32);
}

.carousel__viewport {
  overflow: hidden;
}

.carousel__track {
  display: flex;
}

.carousel__slide {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}

.testimonial {
  position: relative;
  max-width: 100%;
  padding: var(--sp-20) var(--sp-24);
  background-color: var(--rose-pill);
  border-radius: var(--r-pill);
}

.testimonial__pill {
  display: none;
}

.testimonial__quote {
  position: relative;
  z-index: 1;
  font-size: var(--fs-body);
  line-height: var(--lh-card);
  color: var(--ink);
  text-align: center;
}

.testimonial__avatar {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  margin: var(--sp-16) auto 0;
  border-radius: var(--r-round);
}

/* --- carousel controls (render only when count > 1) -------------------- */
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-16);
  margin-block-start: var(--sp-24);
}

.carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  color: var(--rose-deep);
  background-color: var(--white);
  /* Deviation (§2.4): the design has no border, which leaves the control
     invisible at 1.10:1 against --tint. */
  border: 1px solid var(--rose-deep);
  border-radius: var(--r-round);
  cursor: pointer;
}

.carousel__arrow:hover {
  background-color: var(--tint);
}

.carousel__arrow--next .icon {
  transform: scaleX(-1); /* mirror, not rotate — the glyph is asymmetric */
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 19px; /* 5px dot + 19px gap = 24px pitch, so 24px targets can tile */
}

.carousel__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
}

.carousel__dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--r-round);
  /* Inactive: outlined. Active: filled. A shape difference, not
     colour-only — satisfies 1.4.1 as well as 1.4.11. */
  box-shadow: inset 0 0 0 1.5px var(--rose-deep);
}

.carousel__dot[aria-current="true"]::before {
  background-color: var(--rose-deep);
  box-shadow: none;
}

@media (min-width: 600px) {
  .testimonial {
    max-width: 480px;
    padding: var(--sp-24) var(--sp-32);
  }
}

@media (min-width: 1200px) {
  .testimonials {
    padding-block: 80px 90px;
  }

  /* The 4-pill blob, exactly as measured. The container is a fixed
     476 × 189 box — never content-sized — with the quote on top. */
  .testimonial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 476px;
    height: 189px;
    max-width: none;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }

  .testimonial__pill {
    display: block;
    position: absolute;
    z-index: 0;
    height: 48px;
    background-color: var(--rose-pill);
    border-radius: var(--r-pill);
  }

  .testimonial__pill:nth-of-type(1) {
    left: 25.67px;
    top: 0;
    width: 410px;
  }

  .testimonial__pill:nth-of-type(2) {
    left: 18.67px;
    top: 48px;
    width: 428px;
  }

  .testimonial__pill:nth-of-type(3) {
    left: 0;
    top: 93px;
    width: 476.27px;
  }

  .testimonial__pill:nth-of-type(4) {
    left: 54.95px;
    top: 141px;
    width: 355.89px;
  }

  .testimonial__quote {
    max-width: 345px;
  }

  /* Side controls at the measured x=150 / x=1244, y=5001 */
  .carousel--has-controls .carousel__controls {
    position: absolute;
    top: 73px;
    left: 0;
    right: 0;
    margin: 0;
    justify-content: space-between;
    pointer-events: none;
  }

  .carousel--has-controls .carousel__arrow {
    pointer-events: auto;
  }

  .carousel--has-controls .carousel__dots {
    position: absolute;
    left: 50%;
    bottom: -74px;
    transform: translateX(-50%);
    pointer-events: auto;
  }
}

/* =====================================================================
   11. FAQ — NOT in the design; retained by user decision (spec §7.2).
   Built in the design's own vocabulary: the mission section's centred
   watermark + H2 formula, and the workshop-card row idiom (radius 8,
   --tint fill) — but with a 1px --rose-deep border, because unlike the
   workshop list these rows ARE interactive (A11).

   Native <details>/<summary>: every answer is in the DOM at initial parse
   whether open or closed, so it is crawlable and AI-extractable with no JS.
   ===================================================================== */
.faq {
  padding-block: 56px;
}

.faq__head {
  align-items: center;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin-block-start: var(--sp-32);
}

.faq-item {
  background-color: var(--tint);
  border: 1px solid var(--rose-deep);
  border-radius: var(--r-row);
}

.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-20) 30px;
  cursor: pointer;
  list-style: none;
}

.faq-item__summary::-webkit-details-marker {
  display: none;
}

.faq-item__question {
  font-size: var(--fs-card);
}

.faq-item__marker {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--rose-deep);
  border-bottom: 2px solid var(--rose-deep);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease-out;
}

.faq-item[open] .faq-item__marker {
  transform: rotate(225deg) translateY(-2px);
}

.faq-item__answer {
  padding: 0 30px var(--sp-20);
  font-size: var(--fs-body);
  line-height: var(--lh-intro);
  color: var(--body);
}

@media (min-width: 900px) {
  .faq {
    padding-block: 80px;
  }

  .faq__list {
    margin-block-start: var(--sp-47);
  }
}

/* =====================================================================
   12. CONTACT — spec §5.11 · design y 5207–5849
   Left column 462 at x=150 · rose panel 506 at x=786, top-aligned with the
   section and full-height. A8: panel → --rose-deep (white Display-40 H2).
   A3/A6: rows → --rose-card, labels --rose-100, values white.

   The form is a documented addition (spec §7.1) placed beneath the left
   column's paragraph and styled on the panel-row idiom. The server-side
   stack (CSRF, honeypot, timing, rate limit, PRG) is untouched.
   ===================================================================== */
.contact {
  padding-block: 56px 0;
}

.contact__inner {
  display: grid;
  gap: var(--sp-40);
}

.contact__copy {
  --stack-gap: var(--sp-20); /* Frame 87 */
}

.contact__title {
  max-width: 520px;
}

.contact__lede {
  max-width: 462px;
}

/* --- the rose info panel ---------------------------------------------- */
.contact__panel {
  padding: var(--sp-32) var(--sp-20);
  background-color: var(--rose-deep);
}

.contact-panel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20); /* Frame 86 */
}

.contact-panel__heading {
  font-size: var(--fs-h2); /* Display 40 */
  color: var(--white);
}

.contact-panel__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24); /* Frame 85 */
}

.info-row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-20) var(--sp-16);
  background-color: var(--rose-card);
  border-radius: var(--r-row);
  text-decoration: none;
}

.info-row__icon {
  flex: none;
  display: flex;
  width: 24px;
  height: 24px;
  color: var(--white);
}

.info-row__icon .icon {
  width: 24px;
  height: 24px;
}

.info-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.info-row__label {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--rose-100);
}

.info-row__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-32);
}

.info-row__value {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--white);
  overflow-wrap: anywhere;
}

a.info-row:hover .info-row__value {
  text-decoration: underline;
}

.social-links {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

.social-links__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--white);
}

.social-links__link .icon {
  width: 24px;
  height: 24px;
}

/* --- the form (spec §7.1 addition) ------------------------------------ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  margin-block-start: var(--sp-8);
}

.contact-form__row {
  display: grid;
  gap: var(--sp-20);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.form-field__label {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--ink);
}

.form-field__optional {
  font-family: var(--font-body);
  color: var(--body);
}

.form-field__control {
  width: 100%;
  padding: var(--sp-16);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--ink);
  background-color: var(--tint);
  /* A11: the design's 1px #F6DFE3 is 1.15:1 — invisible as a field boundary */
  border: 1px solid var(--rose-deep);
  border-radius: var(--r-row);
}

.form-field__control--textarea {
  min-height: 140px;
  line-height: var(--lh-intro);
  resize: vertical;
}

.form-field__control[aria-invalid="true"] {
  border-color: var(--error);
}

.form-field__error {
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--error);
}

.form-status,
.form-errors {
  padding: var(--sp-16);
  background-color: var(--tint);
  border: 1px solid var(--rose-deep);
  border-radius: var(--r-row);
  color: var(--ink);
}

.form-errors {
  border-color: var(--error);
}

.form-errors__title {
  font-weight: 600;
}

.form-errors__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-block-start: var(--sp-8);
}

.contact-form__submit {
  align-self: flex-start;
}

/* Honeypot — off-screen rather than display:none so bots still fill it,
   and aria-hidden + tabindex=-1 keep it away from real users. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 600px) {
  .contact-form__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .contact {
    padding-block: 0;
  }

  .contact__inner {
    grid-template-columns: 462px 506px;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
  }

  .contact__copy {
    align-self: center;
    padding-block: 80px;
  }

  /* R9: the panel is full-height by design (§3.6), but the retained contact
     form makes the left column 836 tall while the panel's own content still
     measures 482 — which left 274px of dead rose below the last info row
     against the design's 82. Making the panel a flex column and letting the
     inner stack centre distributes the surplus evenly instead of dumping it
     all at the bottom, so it reads as intentional generosity. `flex: 1` (not
     `height: 100%`) because the panel's height comes from being a stretched
     grid item, and a percentage height against that is not reliably definite. */
  .contact__panel {
    display: flex;
    flex-direction: column;
    min-height: 642px; /* the measured panel, top-aligned with the section */
    padding: 80px 32px;
  }

  .contact-panel__inner {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* =====================================================================
   13. FOOTER — spec §5.12 · design y 5849–6114
   Two stacked bands: --tint 0–206 then --rose-100 206–265. Not one band
   with a border (§5.9). Centred logo, dot-separated nav (the 5px --rose
   ellipses are separators → CSS ::after, never list text).
   ===================================================================== */
.site-footer {
  background-color: var(--tint);
}

.site-footer__top {
  padding-block: var(--sp-24) 35px;
  text-align: center;
}

/* Block, not inline-block: as an inline-block the logo sits on the parent's
   text baseline and the line box adds ~8px of descender space below it, which
   pushed the 206px band to 214. */
.site-footer__brand {
  display: block;
  width: max-content;
  margin-inline: auto;
  line-height: 0;
}

.site-footer__logo {
  width: 135px;
  height: auto;
}

.site-footer__nav {
  margin-block-start: var(--sp-24);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}

.site-footer__item {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}

.site-footer__link {
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--ink);
  text-decoration: none;
}

/* Same floor as the header nav: the footer's top band is --tint, so the hover
   colour is --rose-deep-hover (4.878:1), not --rose-deep (4.295:1). */
.site-footer__link:hover {
  color: var(--rose-deep-hover);
  text-decoration: underline;
}

.site-footer__strip {
  padding-block: var(--sp-20);
  background-color: var(--rose-100);
}

.site-footer__strip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  text-align: center;
}

.site-footer__legal {
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--ink);
}

/* R5 — the legal pair is a link LIST, not links inside a block of text, so
   1.4.1's link-identification requirement does not apply and an underline at
   rest would make these the only two underlined links on the page. No underline
   at rest; underline on :hover AND :focus-visible, alongside the 2px --focus
   ring (3.73:1 on the --rose-100 strip, over the 3:1 floor for a focus
   indicator). Colour stays --ink (8.50:1 on the strip) — recolouring to
   --rose-deep would be a colour-only cue at 2.28:1 against the adjacent text,
   under the 3:1 such a cue needs. */
.site-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
}

.site-footer__legal-item {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--ink);
}

/* The `|` separator, drawn exactly like the footer-nav dots above: an empty
   ::after with a background, so it is genuinely absent from the accessible
   tree. A `content: "|"` string would be re-exposed to AT — that is the defect
   this replaces — and `content: "|" / ""` (the alt-text form) is dropped whole
   by browsers that don't support it, which would lose the separator. Measured
   against the glyph it replaces: Manrope 16 `|` is 1.17px × 11.52px of ink,
   sitting entirely above the baseline; 1px × 0.72em is that ink to within
   0.2px, and align-items:center puts it within 0.2px of the glyph's optical
   centre in the line box. */
.site-footer__legal-item:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 0.72em;
  background-color: var(--ink);
}

/* padding-block gives these a 25.2px hit target (16px × 1.2 line + 2 × 3).
   WCAG 2.2 SC 2.5.8 wants 24px, and R5 is exactly what put them in scope: as
   links inside a paragraph they had the "inline" exception, as list items they
   do not. 2.5.8 is AA in 2.2 and this project is held to 2.1 AA — but it
   already chose to honour 2.5.8 when it gave the carousel dots a 24×24 box
   around a 5px dot, and two different answers to the same question in one
   footer is the inconsistency, not the standard. Same technique as the dots
   (grow the box, leave the ink alone); costs 6px of footer strip height. */
.site-footer__legal-link {
  padding-block: 3px;
  color: var(--ink);
  text-decoration: none;
}

.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 600px) {
  .site-footer__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-16);
  }

  /* 5px --rose separator dots — decorative, so they are CSS, not markup */
  .site-footer__item:not(:last-child)::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: var(--r-round);
    background-color: var(--rose);
  }

  .site-footer__strip-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* =====================================================================
   14. THE DECORATION LAYER — DESIGN-DIRECTIVES §3.5 / §4.3
   ---------------------------------------------------------------------
   Rules that hold for every placement:
     · background-image is DECLARED INSIDE A MEDIA QUERY, so a browser at a
       narrower width never fetches the file. (An IMG element with srcset is
       fetched even when display:none — hence no IMG for decoration.)
     · left / top / width are % of the owning section box; each is paired
       with aspect-ratio so it stays proportional.
     · rotation is baked into every asset — no CSS transform, anywhere.
     · everything is behind content (z 0). The only two exceptions are
       hero-sprig and yolande-sprig at z 2 (correction C11).
     · @2x overrides are nested inside the same width condition, so a
       high-DPI phone does not pull desktop art either.

   The three tiers: every width → ≥768 → ≥1200 (per §3.5's table).
   ===================================================================== */

/* --- tier 1: every width, including 390 (6 soft washes, ~10 KB at 1x) -- */
.decor--hero-wash-a {
  left: 19.31%;
  /* top 0%: page y=124 is the hero box top. The directives' 16.78% is
     measured from a box that starts at y=0 and therefore includes the
     header, which is a separate element here — recomputed for the real
     .hero box (124–739, h 615). Same for hero-wash-b/-c and hero-sprig. */
  top: 0;
  width: 25.76%;
  aspect-ratio: 371 / 220;
  background-image: url("/assets/img/decor/hero-wash-a.webp");
  mix-blend-mode: multiply;
}

.decor--qual-wash {
  left: 1.46%;
  top: 4.99%;
  width: 28.82%;
  aspect-ratio: 415 / 246;
  background-image: url("/assets/img/decor/qual-wash.webp");
  mix-blend-mode: multiply;
}

.decor--workshops-wash-top {
  left: 71.18%;
  top: 0;
  width: 28.82%;
  aspect-ratio: 415 / 246;
  background-image: url("/assets/img/decor/workshops-wash-top.webp");
  mix-blend-mode: multiply;
}

.decor--testimonials-wash {
  left: 73.47%;
  top: 6.82%;
  width: 25.76%;
  aspect-ratio: 371 / 220;
  background-image: url("/assets/img/decor/testimonials-wash.webp");
  mix-blend-mode: multiply;
}

.decor--contact-cluster {
  left: -0.14%;
  top: 59.97%;
  width: 24.24%;
  aspect-ratio: 349 / 257;
  background-image: url("/assets/img/decor/contact-cluster.webp");
  mix-blend-mode: multiply;
}

@media (min-resolution: 192dpi) {
  .decor--hero-wash-a {
    background-image: url("/assets/img/decor/hero-wash-a@2x.webp");
  }

  .decor--qual-wash {
    background-image: url("/assets/img/decor/qual-wash@2x.webp");
  }

  .decor--workshops-wash-top {
    background-image: url("/assets/img/decor/workshops-wash-top@2x.webp");
  }

  .decor--testimonials-wash {
    background-image: url("/assets/img/decor/testimonials-wash@2x.webp");
  }

  .decor--contact-cluster {
    background-image: url("/assets/img/decor/contact-cluster@2x.webp");
  }
}

/* --- tier 2: ≥768 (adds the mid-weight sprigs and clusters) ----------- */
@media (min-width: 768px) {
  .decor--hero-wash-c {
    left: 0;
    top: 52.36%;
    width: 23.82%;
    aspect-ratio: 343 / 293;
    background-image: url("/assets/img/decor/hero-wash-c.webp");
    mix-blend-mode: multiply;
  }

  .decor--mission-sprig {
    left: -0.07%;
    top: 0.36%;
    width: 31.74%;
    aspect-ratio: 457 / 318;
    background-image: url("/assets/img/decor/mission-sprig.webp");
  }

  /* % of the PANEL box (1048 × 635), not the section box: design 1105,1970
     → (1105−392)/1048 = 68.03%, (1970−1606)/635 = 57.32%, 336/1048 = 32.06% */
  .decor--yolande-leaf {
    left: 68.03%;
    top: 57.32%;
    width: 32.06%;
    aspect-ratio: 336 / 267;
    background-image: url("/assets/img/decor/yolande-leaf.webp");
    mix-blend-mode: multiply;
  }

  .decor--qual-cluster {
    left: 46.88%;
    top: 11.65%;
    width: 42.5%; /* 80% of the desktop 53.13% (§3.5) */
    aspect-ratio: 765 / 563;
    background-image: url("/assets/img/decor/qual-cluster.webp");
    mix-blend-mode: multiply;
  }

  .decor--consultations-sprig {
    left: 0;
    top: 58.13%;
    width: 18.89%;
    aspect-ratio: 272 / 345;
    background-image: url("/assets/img/decor/consultations-sprig.webp");
    mix-blend-mode: multiply;
  }

  /* mission-sprig serves two placements: mission (−1,801) and
     testimonials (0,4889) are the same crop of the same source (§4.3 n2) */
  .decor--testimonials-sprig {
    left: 0;
    top: 34.3%;
    width: 31.74%;
    aspect-ratio: 457 / 318;
    background-image: url("/assets/img/decor/mission-sprig.webp");
  }

  @media (min-resolution: 192dpi) {
    .decor--hero-wash-c {
      background-image: url("/assets/img/decor/hero-wash-c@2x.webp");
    }

    .decor--mission-sprig,
    .decor--testimonials-sprig {
      background-image: url("/assets/img/decor/mission-sprig@2x.webp");
    }

    .decor--yolande-leaf {
      background-image: url("/assets/img/decor/yolande-leaf@2x.webp");
    }

    .decor--qual-cluster {
      background-image: url("/assets/img/decor/qual-cluster@2x.webp");
    }

    .decor--consultations-sprig {
      background-image: url("/assets/img/decor/consultations-sprig@2x.webp");
    }
  }
}

/* --- hero-sprig: gated on the TWO-COLUMN hero, not on 768 --------------
   DESIGN-DIRECTIVES §3.5 says "render at 70% width" from 768 up, but its own
   stated reason for dropping it below that is "it overlaps the photo; on a
   stacked hero it lands on text" — and §3.6 stacks the hero from 899 down. The
   two tables disagree. Verified at 768: the sprig landed in the middle of the
   photo, reading as a hair ornament. Gated here on the same 900px threshold as
   the two-column hero, which is what the rule was protecting. */
@media (min-width: 900px) {
  .decor--hero-sprig {
    left: 52.5%;
    top: 32.52%;
    width: 9.82%; /* 70% of the desktop 14.03% (§3.5) */
    aspect-ratio: 202 / 353;
    background-image: url("/assets/img/decor/hero-sprig.webp");
    z-index: 2; /* in front of the hero photo — one of only two exceptions */
  }

  @media (min-resolution: 192dpi) {
    .decor--hero-sprig {
      background-image: url("/assets/img/decor/hero-sprig@2x.webp");
    }
  }
}

/* --- tier 3: ≥1200 — the full designed composition -------------------- */
@media (min-width: 1200px) {
  .decor--hero-wash-b {
    left: 74.24%;
    top: 64.23%;
    width: 25.76%;
    aspect-ratio: 371 / 220;
    background-image: url("/assets/img/decor/hero-wash-b.webp");
    mix-blend-mode: multiply;
  }

  .decor--hero-sprig {
    width: 14.03%; /* full measured width */
  }

  .decor--qual-cluster {
    width: 53.13%; /* full measured width */
  }

  /* % of the PANEL box: design 1069,1606 → (1069−392)/1048 = 64.60%,
     (1606−1606)/635 = 0%, 371/1048 = 35.40% */
  .decor--yolande-wash {
    left: 64.6%;
    top: 0;
    width: 35.4%;
    aspect-ratio: 371 / 220;
    background-image: url("/assets/img/decor/yolande-wash.webp");
    mix-blend-mode: multiply;
  }

  .decor--yolande-sprig {
    left: 30.07%;
    top: 60.88%;
    width: 12.85%;
    aspect-ratio: 185 / 327;
    background-image: url("/assets/img/decor/yolande-sprig.webp");
    z-index: 2; /* in front of the portrait's right edge */
  }

  .decor--workshops-leaf {
    left: 10.42%;
    top: 51.09%;
    width: 19.93%;
    aspect-ratio: 287 / 279;
    background-image: url("/assets/img/decor/workshops-leaf.webp");
    mix-blend-mode: multiply;
  }

  .decor--workshops-wash-mid {
    left: 38.06%;
    top: 73.3%;
    width: 18.68%;
    aspect-ratio: 269 / 159;
    background-image: url("/assets/img/decor/workshops-wash-mid.webp");
    mix-blend-mode: multiply;
  }

  .decor--contact-wash {
    left: 87.15%;
    top: 0;
    width: 12.85%;
    aspect-ratio: 185 / 312;
    background-image: url("/assets/img/decor/contact-wash.webp");
    mix-blend-mode: multiply;
  }

  @media (min-resolution: 192dpi) {
    .decor--hero-wash-b {
      background-image: url("/assets/img/decor/hero-wash-b@2x.webp");
    }

    .decor--yolande-wash {
      background-image: url("/assets/img/decor/yolande-wash@2x.webp");
    }

    .decor--yolande-sprig {
      background-image: url("/assets/img/decor/yolande-sprig@2x.webp");
    }

    .decor--workshops-leaf {
      background-image: url("/assets/img/decor/workshops-leaf@2x.webp");
    }

    .decor--workshops-wash-mid {
      background-image: url("/assets/img/decor/workshops-wash-mid@2x.webp");
    }

    .decor--contact-wash {
      background-image: url("/assets/img/decor/contact-wash@2x.webp");
    }
  }
}