/* Studio Starter — the design of a new client site.
   Neutral until the build sets the colour tokens in :root to the client's brand
   (and the site config's palette.brand to match, for mail and forms). Every row
   the Studio can place is styled here, in the markup the studio-core plugin
   renders. */

/* ─── Tokens ─────────────────────────────────────────────── */

:root {
  /* colour — neutral until a client's brand replaces these */
  /* Emma's second palette: white, soft grey, charcoal, gold (her old site's).
     Sage and gold are too light for text on ivory — tints, lines, details only;
     --c-gold-text is the readable gold for small text (4.8:1 on ivory). */
  --c-paper:          #FFFFFF;   /* white */
  --c-paper-deep:     #DFE0E5;   /* the soft grey band of her old site */
  --c-ink:            #2B2A26;   /* body text */
  --c-muted:          #6B645E;   /* her old menu grey */

  --c-accent:         #2B2A26;   /* charcoal: buttons, links */
  --c-accent-deep:    #1F1E1B;   /* footer */
  --c-accent-dark:    #141311;
  --c-accent-bright:  #444139;   /* hover */
  --c-tint:           #EEEFF1;   /* light grey boxes and fields */
  --c-tint-line:      #D3D4DA;

  --c-stone:          #C0C1BC;   /* her old footer / hero wall */
  --c-gold:           #C4A47D;
  --c-gold-text:      #86653A;

  --c-positive:        #86653A;
  --c-positive-bright: #C4A47D;
  --c-positive-dark:   #6E5230;

  --c-line:        rgba(43, 42, 38, 0.10);
  --c-line-strong: rgba(43, 42, 38, 0.20);

  /* type */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --t-display: clamp(40px, 6vw, 78px);
  --t-h1:      clamp(33px, 4.6vw, 56px);
  --t-h2:      clamp(28px, 3.4vw, 42px);
  --t-h3:      23px;
  --t-body:    18px;
  --t-small:   15px;
  --t-eyebrow: 12px;

  --lh-tight: 1.05;
  --lh-body:  1.75;
  --ls-tight: -0.026em;

  /* space */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 40px;
  --s-5: 64px; --s-6: 96px; --s-7: 140px;
  --s-flow: 32px;   /* gap between stacked paragraphs / prose blocks */

  /* radius — deliberately generous, this brand is round */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 44px; --r-pill: 999px;

  /* shadow — tinted purple, softer + weightier than a neutral grey */
  --sh-card: 0 4px 14px color-mix(in srgb, var(--c-accent-deep) 6%, transparent), 0 22px 50px color-mix(in srgb, var(--c-accent-deep) 12%, transparent);
  --sh-lift: 0 2px 6px color-mix(in srgb, var(--c-accent-deep) 10%, transparent), 0 18px 40px color-mix(in srgb, var(--c-accent-deep) 20%, transparent);
  --sh-btn:  0 12px 26px color-mix(in srgb, var(--c-accent) 34%, transparent);

  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-wipe: cubic-bezier(0.4, 0, 0.2, 1);

  --container: 1240px;
  --gutter:    32px;
  /* Header logo height. Studio -> Design overrides --logo-h in an inline
     block; the header grows with it, and 58 + 34 = 92 keeps the original
     geometry exactly when nothing has been changed. */
  --logo-h:    48px;
  --header-h:  max(92px, calc(var(--logo-h, 48px) + 34px));
}

/* Breakpoints used literally (custom props can't go in media queries):
   1100 · 820 · 600 · 420                                                    */

/* ─── Fonts ──────────────────────────────────────────────── */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-sans-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ─── Base ───────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-weight: 600;               /* heavier than before — more oomph */
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 var(--s-3);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }
p { margin: 0 0 var(--s-flow); }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: var(--r-sm); }

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

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

/* ─── Shared devices ─────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--c-accent);
  margin: 0 0 var(--s-2);
}
.section--deep .eyebrow { color: var(--c-positive-bright); }

/* the accent full-stop — brand purple */
.dot { color: var(--c-accent); font-size: 1.35em; line-height: 0; }
.section--deep .dot { color: var(--c-positive-bright); }

/* pill-rounded accent rule */
.rule { width: 54px; height: 5px; border-radius: 999px; background: var(--c-accent); margin: 0 0 var(--s-3); }
.section--deep .rule { background: var(--c-positive-bright); }

/* organic decorative blob */
.blob { position: absolute; border-radius: 42% 58% 63% 37% / 45% 42% 58% 55%; filter: blur(2px); opacity: 0.5; z-index: 0; pointer-events: none; }

/* wave divider — full-bleed SVG placed at a section edge */
.wave { line-height: 0; position: relative; z-index: 1; }
.wave svg { width: 100%; height: clamp(48px, 6vw, 90px); display: block; }
.wave--flip svg { transform: scaleY(-1); }
/* As a section divider, overlay the section's TRUE top/bottom edge — above its
   padding — so no flat band of the section colour shows above/below the wave. */
.section > .wave--flip { position: absolute; top: -1px; left: 0; right: 0; }
.section > .wave:not(.wave--flip) { position: absolute; bottom: -1px; left: 0; right: 0; }

/* ─── Buttons ────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  line-height: 1; padding: 16px 30px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 0.2s var(--ease-out), background 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn__arrow { transition: transform 0.25s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { background: var(--c-accent); color: #fff; box-shadow: var(--sh-btn); }
.btn--primary:hover { background: var(--c-accent-bright); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--c-accent); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-accent); transform: translateY(-2px); }

.btn--on-dark { background: #fff; color: var(--c-accent); }
.btn--on-dark:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--c-accent); text-decoration: none;
}
.link-arrow svg { transition: transform 0.25s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--deep .link-arrow { color: var(--c-positive-bright); }

/* ─── Header ─────────────────────────────────────────────── */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--c-paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, height 0.25s ease;
}
.site-header--scrolled { border-bottom-color: var(--c-line); }
body.has-hero .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.has-hero .site-header--scrolled {
  background: color-mix(in srgb, var(--c-paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: var(--logo-h, 48px); width: auto; display: block; }
/* .brand + descendant class beats `.brand img`, so the hide actually applies */
.brand .brand__logo--light { display: none; }

/* Over a dark image page-hero: transparent header, white logo + nav, until scroll. */
body.has-dark-hero .site-header:not(.site-header--scrolled) {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
}
body.has-dark-hero .site-header:not(.site-header--scrolled) .brand__logo--dark { display: none; }
body.has-dark-hero .site-header:not(.site-header--scrolled) .brand__logo--light { display: block; }
body.has-dark-hero .site-header:not(.site-header--scrolled) .header-social a { color: #fff; }
body.has-dark-hero .site-header:not(.site-header--scrolled) .nav-toggle { color: #fff; }

/* ── Header social row ── */
.header-social {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
}
.header-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--c-ink); opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out);
}
.header-social a:hover { opacity: 1; color: var(--c-accent); transform: translateY(-2px); }
.header-social svg { width: 19px; height: 19px; }
@media (max-width: 700px) { .header-social { display: none; } } /* icons live in the menu + footer on phones */

/* ── Burger: always visible; morphs to an X while the menu is open ── */
.nav-toggle {
  position: relative; z-index: 130; /* stays clickable above the open menu */
  display: inline-flex; flex-direction: column; gap: 5px; width: 44px; height: 44px;
  align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--c-accent);
}
.nav-toggle span {
  display: block; width: 26px; height: 2.5px; background: currentColor; border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.2s ease;
}
body.nav-open .nav-toggle { color: #fff; }
.menu-check:checked ~ .site-header .nav-toggle { color: #fff; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-check:checked ~ .site-header .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.menu-check:checked ~ .site-header .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menu-check:checked ~ .site-header .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* While the menu is open, the whole header rides above it (so the X stays
   clickable) and goes white-on-purple. */
body.nav-open .site-header,
body.nav-open .site-header.site-header--scrolled {
  z-index: 130; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
}
.menu-check:checked ~ .site-header,
.menu-check:checked ~ .site-header.site-header--scrolled {
  z-index: 130; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
}
body.nav-open .site-header .brand__logo--dark { display: none; }
.menu-check:checked ~ .site-header .brand__logo--dark { display: none; }
body.nav-open .site-header .brand .brand__logo--light { display: block; }
.menu-check:checked ~ .site-header .brand .brand__logo--light { display: block; }
body.nav-open .site-header .header-social a { color: #fff; }
.menu-check:checked ~ .site-header .header-social a { color: #fff; }
body.nav-open .site-header .header-social a:hover { color: var(--c-positive-bright); }
.menu-check:checked ~ .site-header .header-social a:hover { color: var(--c-positive-bright); }

/* ── Header action cluster: social · search · CTA · burger ── */
.site-header__actions { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); }

.header-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1.5px solid var(--c-line-strong); color: var(--c-ink);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease-out);
}
.header-search-toggle:hover { color: #fff; background: var(--c-accent); border-color: var(--c-accent); transform: translateY(-2px); }

/* The header CTA — a touch tighter than a body button so it sits well in the bar. */
.header-cta { padding: 12px 24px; font-size: 14.5px; box-shadow: 0 10px 24px color-mix(in srgb, var(--c-accent) 32%, transparent); }
.header-cta .btn__arrow { font-size: 1.05em; }

/* Over a dark image hero (and the transparent home header): white outline icon. */
body.has-dark-hero .site-header:not(.site-header--scrolled) .header-search-toggle { color: #fff; border-color: rgba(255,255,255,0.5); }
body.has-dark-hero .site-header:not(.site-header--scrolled) .header-search-toggle:hover { background: #fff; color: var(--c-accent); border-color: #fff; }

/* When the menu is open, the header's CTA + search collapse (the menu carries
   its own search field and call-to-action link) — kept in the layout via visibility
   so the burger doesn't jump. */
body.nav-open .header-cta,
body.nav-open .header-search-toggle { opacity: 0; visibility: hidden; pointer-events: none; }
.menu-check:checked ~ .site-header .header-cta,
.menu-check:checked ~ .site-header .header-search-toggle { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 600px) {
  .site-header__actions { gap: 8px; }
  .header-search-toggle { width: 40px; height: 40px; }
  .header-cta { padding: 11px 16px; font-size: 13.5px; }
  .header-cta .btn__arrow { display: none; }
}

/* ── Live search overlay ─────────────────────────────────── */
.site-search {
  position: fixed; inset: 0; z-index: 140;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.site-search.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
body.search-open { overflow: hidden; }
.site-search__backdrop {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--c-accent-dark) 62%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
}
.site-search__panel {
  position: relative; margin: 13vh auto 0; width: min(720px, 92vw);
  background: var(--c-paper, #fff); border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 100px color-mix(in srgb, var(--c-ink) 50%, transparent);
  transform: translateY(-24px) scale(0.985); transition: transform 0.32s var(--ease-out);
}
.site-search.is-open .site-search__panel { transform: none; }

.site-search__form {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; border-bottom: 1px solid var(--c-line);
}
.site-search__icon { color: var(--c-accent); flex: 0 0 auto; }
.site-search__input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--font-serif); font-size: clamp(20px, 3.4vw, 27px); color: var(--c-ink);
}
.site-search__input::placeholder { color: var(--c-muted); opacity: 0.7; }
.site-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.site-search__close {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-paper-deep, var(--c-paper-deep)); color: var(--c-muted); font-size: 24px; line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}
.site-search__close:hover { background: var(--c-accent); color: #fff; }

.site-search__results { max-height: min(56vh, 520px); overflow-y: auto; padding: 8px; }
.site-search__hint { padding: 26px 22px; color: var(--c-muted); font-size: 15px; text-align: center; }
.site-search__result {
  display: block; text-decoration: none; color: inherit;
  padding: 15px 16px; border-radius: 13px;
  transition: background 0.15s ease, transform 0.15s var(--ease-out);
}
.site-search__result:hover,
.site-search__result:focus-visible,
.site-search__result.is-active { background: var(--c-paper-deep, var(--c-paper-deep)); outline: none; }
.site-search__result-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.site-search__result-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--c-ink); }
.site-search__result:hover .site-search__result-title { color: var(--c-accent); }
.site-search__badge {
  flex: 0 0 auto; font-family: var(--font-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-positive-dark, var(--c-positive-dark));
  background: color-mix(in srgb, var(--c-positive-bright) 16%, transparent); padding: 3px 9px; border-radius: 999px;
}
.site-search__result-excerpt { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.site-search__result mark { background: color-mix(in srgb, var(--c-positive-bright) 34%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Menu search field (phones + anyone using the overlay from the menu) */
.site-menu__search {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  margin-bottom: var(--s-3); padding: 15px 20px; width: min(420px, 100%);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill); color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans); font-size: 16px; text-align: left;
  opacity: 0; transform: translateY(28px);
}
body.nav-open .site-menu__search {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  transition-delay: calc(0.12s + var(--i, 0) * 0.06s);
}
.menu-check:checked ~ .site-menu .site-menu__search {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  transition-delay: calc(0.12s + var(--i, 0) * 0.06s);
}
.site-menu__search:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--c-positive-bright); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .site-search, .site-search__panel { transition: none; }
  .site-menu__search { opacity: 1; transform: none; }
}

/* ─── Full-screen menu (the wow) ─────────────────────────── */
.site-menu {
  position: fixed; inset: 0; z-index: 120;
  background:
    radial-gradient(900px 600px at 85% -10%, color-mix(in srgb, var(--c-positive-bright) 16%, transparent), transparent 60%),
    radial-gradient(700px 700px at -10% 110%, color-mix(in srgb, var(--c-accent-bright) 35%, transparent), transparent 60%),
    linear-gradient(150deg, var(--c-accent-dark, var(--c-accent-dark)) 0%, var(--c-accent-deep) 100%);
  color: #fff; overflow: hidden auto;
  visibility: hidden; pointer-events: none;
  clip-path: circle(0px at calc(100% - 44px) 40px);
  transition: clip-path 0.65s var(--ease-out), visibility 0s linear 0.65s;
}
body.nav-open .site-menu {
  visibility: visible; pointer-events: auto;
  clip-path: circle(160% at calc(100% - 44px) 40px);
  transition: clip-path 0.65s var(--ease-out);
}
.menu-check:checked ~ .site-menu {
  visibility: visible; pointer-events: auto;
  clip-path: circle(160% at calc(100% - 44px) 40px);
  transition: clip-path 0.65s var(--ease-out);
}
body.nav-open { overflow: hidden; }
body:has(.menu-check:checked) { overflow: hidden; }

.site-menu__blob-1 {
  width: 44vw; height: 44vw; max-width: 560px; max-height: 560px; top: -14%; right: -10%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--c-positive-bright) 50%, transparent), color-mix(in srgb, var(--c-positive-bright) 12%, transparent) 70%);
  animation: menu-drift 16s ease-in-out infinite alternate;
}
.site-menu__blob-2 {
  width: 34vw; height: 34vw; max-width: 430px; max-height: 430px; bottom: -12%; left: -8%;
  background: radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 70%);
  animation: menu-drift 20s ease-in-out infinite alternate-reverse;
}
@keyframes menu-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-4%, 5%, 0) rotate(10deg); }
}

.site-menu__inner {
  position: relative; z-index: 1; min-height: 100%;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-6);
  align-items: center; padding-top: calc(var(--header-h) + var(--s-4)); padding-bottom: var(--s-6);
}

/* Left: the big editorial links, staggered in */
.site-menu__nav { display: flex; flex-direction: column; gap: clamp(6px, 1.6vh, 18px); }
.site-menu__link {
  display: flex; align-items: baseline; gap: 18px; width: fit-content;
  text-decoration: none; color: #fff;
  opacity: 0; transform: translateY(28px);
}
body.nav-open .site-menu__link {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out);
  transition-delay: calc(0.18s + var(--i) * 0.06s);
}
.menu-check:checked ~ .site-menu .site-menu__link {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out);
  transition-delay: calc(0.18s + var(--i) * 0.06s);
}
.site-menu__num {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
  color: var(--c-positive-bright); min-width: 2ch;
}
.site-menu__label {
  font-family: var(--font-serif); font-weight: 500; line-height: 1.08;
  font-size: clamp(34px, 6vh, 58px); letter-spacing: -0.02em;
  position: relative; transition: color 0.2s ease;
}
.site-menu__label::after {
  content: ""; position: absolute; left: 0; bottom: 2px; height: 3px; width: 0;
  background: var(--c-positive-bright); border-radius: 2px; transition: width 0.3s var(--ease-out);
}
.site-menu__link:hover .site-menu__label::after { width: 100%; }
.site-menu__link:hover .site-menu__label { color: var(--c-tint); }
.site-menu__dot { color: var(--c-positive-bright); }
.site-menu__link--cta .site-menu__label { color: var(--c-positive-bright); }
.site-menu__link--cta:hover .site-menu__label { color: var(--c-positive-bright); }

/* Right: contact + address + social */
.site-menu__aside {
  display: flex; flex-direction: column; gap: var(--s-4);
  border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: var(--s-5);
}
.site-menu__group { opacity: 0; transform: translateY(22px); }
body.nav-open .site-menu__group {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out);
  transition-delay: calc(0.3s + var(--i) * 0.08s);
}
.menu-check:checked ~ .site-menu .site-menu__group {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out);
  transition-delay: calc(0.3s + var(--i) * 0.08s);
}
.site-menu__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--c-positive-bright); margin: 0 0 10px;
}
.site-menu__contact {
  display: block; font-family: var(--font-serif); font-size: clamp(19px, 2.2vh, 24px);
  color: #fff; text-decoration: none; margin: 0 0 6px; width: fit-content;
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.site-menu__contact:hover { border-bottom-color: var(--c-positive-bright); }
.site-menu__address { font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); margin: 0; }

.site-menu__social {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.site-menu__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out), color 0.2s ease;
}
.site-menu__social a:hover {
  background: var(--c-positive-bright); border-color: var(--c-positive-bright); color: var(--c-accent-dark); transform: translateY(-3px);
}
.site-menu__social svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .site-menu__inner { grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
  .site-menu__aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: var(--s-4); }
  .site-menu__label { font-size: clamp(30px, 4.6vh, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu { clip-path: none; opacity: 0; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
  body.nav-open .site-menu { opacity: 1; transition: opacity 0.25s ease; }
.menu-check:checked ~ .site-menu { opacity: 1; transition: opacity 0.25s ease; }
  .site-menu__link, .site-menu__group { transition: none; }
  .site-menu__blob-1, .site-menu__blob-2 { animation: none; }
}

/* ─── Hero ───────────────────────────────────────────────── */

.hero {
  position: relative; min-height: 100svh; min-height: 100dvh;
  display: flex; align-items: center; overflow: hidden; background: var(--c-paper);
}
.hero__blob-1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; top: -12%; right: -8%;
  background: radial-gradient(circle at 30% 30%, var(--c-tint), color-mix(in srgb, var(--c-tint) 0%, transparent)); }
.hero__blob-2 { width: 30vw; height: 30vw; max-width: 380px; max-height: 380px; bottom: -6%; left: 8%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c-positive-bright) 28%, transparent), color-mix(in srgb, var(--c-positive-bright) 0%, transparent)); }

.hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity 1600ms ease-in-out; will-change: opacity; }
.hero__slide.is-under { opacity: 1; z-index: 1; transition: none; }
.hero__slide.is-active { opacity: 1; z-index: 2; }
.hero__slide picture, .hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active img { animation: kb-in 9200ms linear both; }
.hero__slide.is-active[data-dir="out"] img { animation-name: kb-out; }

@keyframes kb-in { from { transform: scale(1.00) translate3d(0,0,0); } to { transform: scale(1.13) translate3d(var(--kb-x,-2%), var(--kb-y,-1.5%), 0); } }
@keyframes kb-out { from { transform: scale(1.13) translate3d(var(--kb-x,2%), var(--kb-y,-2%), 0); } to { transform: scale(1.00) translate3d(0,0,0); } }

/* light purple-tinted scrim, not a dark overlay */
.hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--c-paper) 72%, transparent) 0%, color-mix(in srgb, var(--c-paper) 0%, transparent) 130px),
    linear-gradient(100deg, color-mix(in srgb, var(--c-paper) 98%, transparent) 0%, color-mix(in srgb, var(--c-paper) 92%, transparent) 30%,
                            color-mix(in srgb, var(--c-paper) 62%, transparent) 50%, color-mix(in srgb, var(--c-paper) 20%, transparent) 74%, color-mix(in srgb, var(--c-paper) 0%, transparent) 100%);
}
.hero__inner { position: relative; z-index: 4; width: 100%; }
.hero__content { max-width: min(60vw, 720px); padding: calc(var(--header-h) + var(--s-4)) 0 var(--s-6); transition: opacity 380ms ease; }
.hero__content.is-swapping { opacity: 0; }
.hero__title { font-size: var(--t-display); margin: 0 0 var(--s-3); }
.hero__lede { font-size: clamp(18px, 1.6vw, 22px); color: var(--c-muted); max-width: 46ch; margin: 0 0 var(--s-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* slider controls — prev/next in the bottom-right corner */
.hero__controls { position: absolute; right: var(--gutter); bottom: 34px; z-index: 6; display: flex; gap: 12px; }
.hero__ctrl {
  width: 54px; height: 54px; border-radius: var(--r-pill);
  border: 1.5px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
  background: color-mix(in srgb, var(--c-paper) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--c-accent); display: grid; place-items: center; cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hero__ctrl:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); transform: translateY(-2px); }
.hero__ctrl:active { transform: translateY(0); }

/* autoplay progress bar — purple, along the very bottom of the hero */
.hero__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 6; background: color-mix(in srgb, var(--c-accent) 16%, transparent); }
.hero__progress-bar { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--c-accent); }

@media (max-width: 600px) {
  .hero__controls { bottom: 26px; gap: 10px; }
  .hero__ctrl { width: 46px; height: 46px; }
}

/* ─── Section rhythm ─────────────────────────────────────── */

/* Vertical rhythm scales with the screen.
   140px is right on a wide monitor and absurd on a 390px phone, where it puts
   most of a screen's worth of nothing between every row — and a page built of
   rows multiplies that. Tapers to 64px by about 640px wide. (.article keeps its
   flat --s-7 bottom padding; same complaint, not touched here.) */
.section { position: relative; padding: clamp(64px, 10vw, 140px) 0; }
.section--tight { padding: clamp(48px, 7vw, 96px) 0; }
.section--paper-deep { background: var(--c-paper-deep); }

/* the weighty band — rich purple gradient, replaces the old flat ink block */
.section--deep { background: linear-gradient(155deg, var(--c-accent) 0%, var(--c-accent-deep) 58%, var(--c-accent-dark) 100%); color: #fff; }
.section--deep .section__intro { color: rgba(255,255,255,0.78); }
.section--deep .section__title { color: #fff; }

.section__head { max-width: 660px; margin: 0 0 var(--s-5); position: relative; z-index: 1; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .rule { margin-inline: auto; }
.section__title { font-size: var(--t-h2); margin: 0 0 var(--s-2); }
.section__intro { font-size: clamp(18px, 1.4vw, 20px); color: var(--c-muted); margin: 0; }
/* Rich-text blocks (Studio-editable): the wrapper owns the outer margin */
.section__intro p:last-child, .split__body p:last-child, .cta-band__intro p:last-child { margin-bottom: 0; }

/* ─── Steps ──────────────────────────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); position: relative; z-index: 1; }
.step { position: relative; padding: var(--s-4); background: var(--c-paper); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.step__n {
  /* Big enough for the two-line "Step 01" label to sit fully inside */
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 76px; height: 76px; text-align: center; line-height: 1.25;
  border-radius: 999px; background: var(--c-tint); color: var(--c-accent);
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; margin-bottom: var(--s-3);
}
.step__title { font-size: var(--t-h3); margin: 0 0 var(--s-1); }
.step__body { color: var(--c-muted); margin: 0; font-size: var(--t-small); line-height: 1.7; }

/* ─── Pillars ────────────────────────────────────────────── */

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.pillar {
  position: relative; background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-4);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, border-color 0.25s ease;
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--sh-card); border-color: transparent; }
.pillar__icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: var(--s-3); border-radius: 16px; background: var(--c-tint); color: var(--c-accent); }
.pillar__icon svg { width: 26px; height: 26px; }
.pillar__title { font-size: var(--t-h3); margin: 0 0 var(--s-1); }
.pillar__body { color: var(--c-muted); font-size: var(--t-small); line-height: 1.7; margin: 0; }
.pillar__title a { color: inherit; text-decoration: none; }
.pillar__title a::after { content: ""; position: absolute; inset: 0; }

/* ─── Stats ──────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); position: relative; z-index: 1; }
.stat { text-align: center; }
.stat__n { font-size: clamp(44px, 5.5vw, 66px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.stat__n .dot { color: var(--c-positive-bright); }
/* A symbol suffix (%, +, k) at the full number size swamps the figure it is
   attached to — half size, nudged up off the baseline, reads as a suffix. */
.stat__n .dot--sym { font-size: 0.5em; vertical-align: 0.42em; letter-spacing: 0; margin-left: 0.14em; }
.stat__label { font-family: var(--font-sans); font-size: 14px; color: rgba(255,255,255,0.72); margin-top: var(--s-2); }

/* ─── Split ──────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); align-items: center; }
.split__media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-paper-deep); box-shadow: var(--sh-lift); }
/* the <picture> must fill the frame, else height:100% on the img resolves to
   auto and a short (landscape) photo leaves a gap of the panel showing through */
.split__media picture { display: block; width: 100%; height: 100%; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
/* a founder portrait, capped so it reads as a headshot rather than a wall */
.split--founder { align-items: center; }
.split__media--portrait { aspect-ratio: 4 / 5; max-width: 400px; }
.split__media--portrait img { object-position: 50% 22%; }
.split__title { font-size: var(--t-h2); margin: 0 0 var(--s-3); }
.split__body { color: var(--c-muted); margin: 0 0 var(--s-3); }
/* Paragraphs inside a split body keep the split's own 24px rhythm rather than
   the global 32px. Two templates used to write two sibling p.split__body at
   24px each and two used a single div of rich text, whose inner paragraphs took
   the global spacing — an 8px difference that survived About's migration as the
   one thing still 5px off. Every page renders from rows now, so there is one
   spelling left to be consistent with. */
.split__body p { margin-bottom: var(--s-3); }
.split__list { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.split__list li { position: relative; padding-left: 34px; font-size: var(--t-small); }
.split__list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-positive-bright) 18%, transparent);
}
.split__list li::after {
  content: ""; position: absolute; left: 7px; top: 8px; width: 9px; height: 5px;
  border-left: 2px solid var(--c-positive); border-bottom: 2px solid var(--c-positive); transform: rotate(-45deg);
}

/* ─── CTA band ───────────────────────────────────────────── */

.cta-band { text-align: center; position: relative; z-index: 1; }
.cta-band__title { font-size: var(--t-h2); margin: 0 0 var(--s-2); color: #fff; }
.cta-band__intro { color: rgba(255,255,255,0.8); max-width: 46ch; margin: 0 auto var(--s-4); }

/* ─── Footer ─────────────────────────────────────────────── */

.site-footer { background: var(--c-accent-dark); color: #fff; padding: var(--s-6) 0 var(--s-4); position: relative; overflow: hidden; }
/* Decorative tone-on-tone circles behind the content — a deliberate mix of solid discs and hollow rings. A ring is just a
   radial-gradient left transparent in the centre with a coloured band near the
   edge (e.g. transparent 0 95%, colour 95% 99%, transparent 100%). */
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* solid discs */
    radial-gradient(circle 240px at 3% 112%,  color-mix(in srgb, var(--c-accent) 40%, transparent) 0 99%, transparent 100%),
    radial-gradient(circle 85px  at 24% 26%,  color-mix(in srgb, var(--c-accent) 26%, transparent) 0 99%, transparent 100%),
    radial-gradient(circle 60px  at 8% 48%,   rgba(255,255,255,0.04) 0 99%, transparent 100%),
    radial-gradient(circle 80px  at 89% 82%,  color-mix(in srgb, var(--c-accent-bright) 18%, transparent) 0 99%, transparent 100%),
    /* hollow rings — ~32px stroke, set with absolute px stops on the circle
       radius; kept very faint so they stay subliminal and never dominate */
    radial-gradient(circle 130px at 14% 78%,  transparent 0 96px,  color-mix(in srgb, var(--c-tint) 10%, transparent) 96px 128px,  transparent 130px),
    radial-gradient(circle 165px at 34% 120%, transparent 0 131px, color-mix(in srgb, var(--c-tint) 8%, transparent) 131px 163px, transparent 165px),
    radial-gradient(circle 135px at 95% 14%,  transparent 0 101px, rgba(255,255,255,0.06) 101px 133px, transparent 135px);
}
.site-footer > .container { position: relative; z-index: 1; }
.site-footer__top { display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); }
.site-footer .brand img { height: 44px; opacity: 0.96; margin-bottom: var(--s-2); }
.site-footer__mission { color: rgba(255,255,255,0.72); max-width: 32ch; margin: 0; }
.site-footer__social {
  list-style: none; margin: var(--s-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 9px;
}
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out), color 0.2s ease;
}
.site-footer__social a:hover {
  background: var(--c-positive-bright); border-color: var(--c-positive-bright); color: var(--c-accent-dark); transform: translateY(-3px);
}
.site-footer__social svg { width: 17px; height: 17px; }
.site-footer__col-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--c-positive-bright); margin: 0 0 var(--s-2); }
.site-footer__links { display: flex; flex-direction: column; gap: 10px; }
.site-footer__links a { color: rgba(255,255,255,0.82); text-decoration: none; font-size: var(--t-small); font-family: var(--font-sans); }
.site-footer__links a:hover { color: #fff; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,0.16); font-family: var(--font-sans); font-size: 12px; color: rgba(255,255,255,0.55); }

/* ─── Motion off ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__slide.is-active img, .hero__slide.is-active[data-dir="out"] img { animation: none; }
  .hero__content { transition: none; }
  .btn, .pillar, .link-arrow svg, .btn__arrow { transition: none; }
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; gap: var(--s-4); }
  .split__media { aspect-ratio: 16 / 9; }
  .split__media--portrait { aspect-ratio: 4 / 5; max-width: 320px; margin-inline: auto; }
}
@media (max-width: 820px) {
  /* Mobile composition: text sits at the TOP (under the header), and the
     photograph fills the lower half. Centring the content left the tall top
     half as washed-out dead space on phones.
     Height is deliberately NOT set here — the base rule's 100dvh makes the
     hero fill the screen. An override to 94dvh once left a ~50px band of the
     next section peeping under every phone hero. */
  .hero { align-items: flex-start; }
  .hero__content { max-width: none; padding: calc(var(--header-h) + 2svh) 0 var(--s-5); }
  .hero__scrim { background:
    linear-gradient(to bottom, color-mix(in srgb, var(--c-paper) 92%, transparent) 0%, color-mix(in srgb, var(--c-paper) 86%, transparent) 46%,
                               color-mix(in srgb, var(--c-paper) 45%, transparent) 68%, color-mix(in srgb, var(--c-paper) 8%, transparent) 100%); }
  /* Per-slide mobile focal point, set in Studio ("Mobile focus"): picks which
     part of the landscape photo survives the portrait cover-crop.
     50% 50% (the var's fallback) = the old centred behaviour. */
  .hero__slide img { object-position: var(--m-focal, 50% 50%); }
}
@media (max-width: 600px) {
  .steps, .pillars, .stats { grid-template-columns: 1fr; }
  .site-footer__top { flex-direction: column; gap: var(--s-4); }
}

/* ═══ Content pages ══════════════════════════════════════════
   Everything below supports the inner pages + blog: a page-hero header band,
   long-form prose, the blog card grid, pagination, and forms. */

/* ─── Page hero (inner-page header band) ─────────────────── */

.page-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(320px, 44vh, 480px);
  padding: calc(var(--header-h) + var(--s-5)) 0 var(--s-6);
  background: var(--c-accent-dark); color: #fff;
}
.page-hero__img { position: absolute; inset: 0; z-index: 0; display: block; }
.page-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--c-accent-dark) 95%, transparent) 0%, color-mix(in srgb, var(--c-accent-deep) 84%, transparent) 46%, color-mix(in srgb, var(--c-ink) 62%, transparent) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--c-ink) 55%, transparent) 0%, color-mix(in srgb, var(--c-ink) 0%, transparent) 42%);
}
.page-hero__inner { position: relative; z-index: 2; max-width: 780px; }
.page-hero .rule { background: var(--c-positive-bright); }
.page-hero .eyebrow { color: var(--c-positive-bright); }
.page-hero__title { font-size: var(--t-h1); margin: 0 0 var(--s-3); color: #fff; text-shadow: 0 1px 20px rgba(20,6,28,0.3); }
.page-hero__title .dot { color: var(--c-positive-bright); }
.page-hero__intro { font-size: clamp(18px, 1.5vw, 21px); color: rgba(255,255,255,0.84); margin: 0; max-width: 46ch; }
.page-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; line-height: 0; }
.page-hero__wave svg { width: 100%; height: clamp(40px, 5vw, 72px); display: block; }

/* ─── Prose (the_content / article body) ─────────────────── */

.prose { max-width: 720px; font-size: var(--t-body); line-height: 1.75; color: var(--c-ink); }
.prose > * + * { margin-top: var(--s-flow); }
.prose h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: var(--s-5); }
.prose h3 { font-size: var(--t-h3); margin-top: var(--s-4); }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--c-accent); }
.prose a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--c-accent-bright); }
.prose strong { font-weight: 600; }
.prose img { border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.prose blockquote {
  margin: var(--s-4) 0; padding: var(--s-2) 0 var(--s-2) var(--s-3);
  border-left: 4px solid var(--c-accent); border-radius: 2px;
  font-size: clamp(20px, 2vw, 24px); line-height: 1.5; color: var(--c-ink);
}
.prose blockquote p { margin: 0; }
.prose hr { border: 0; height: 1px; background: var(--c-line); margin: var(--s-5) 0; }
.prose figure { margin: var(--s-4) 0; }
.prose figcaption { font-family: var(--font-sans); font-size: 13px; color: var(--c-muted); margin-top: var(--s-1); }

/* ─── Blog card grid ─────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-card); border-color: transparent; }
.card__media { aspect-ratio: 16 / 10; background: var(--c-paper-deep); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--s-3) var(--s-3) var(--s-4); display: flex; flex-direction: column; flex: 1; }
.card__meta { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--s-1); }
.card__title { font-size: var(--t-h3); line-height: 1.25; margin: 0 0 var(--s-1); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__excerpt { color: var(--c-muted); font-size: var(--t-small); line-height: 1.7; margin: 0 0 var(--s-2); }
.card__more { margin-top: auto; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--c-accent); }

/* a large lead card for the first/featured post */
.card--feature { grid-column: 1 / -1; flex-direction: row; }
.card--feature .card__media { flex: 0 0 52%; aspect-ratio: auto; }
.card--feature .card__body { justify-content: center; padding: var(--s-5); }
.card--feature .card__title { font-size: var(--t-h2); }
.card--feature .card__excerpt { font-size: var(--t-body); }

/* ─── Pagination ─────────────────────────────────────────── */

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: var(--s-6); }
.pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--c-line-strong);
  font-family: var(--font-sans); font-size: 15px; color: var(--c-ink); text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pagination .page-numbers:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination .page-numbers.current { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* ─── Article layout (single post) ───────────────────────── */

.article { padding: var(--s-6) 0 var(--s-7); }
.article__head { max-width: 760px; margin: 0 auto var(--s-5); text-align: center; }
.article__title { font-size: var(--t-h1); margin: var(--s-2) 0 var(--s-3); }
.article__meta { font-family: var(--font-sans); font-size: 14px; color: var(--c-muted); }
.article__media { max-width: 960px; margin: 0 auto var(--s-5); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lift); }
.article__media img { width: 100%; height: auto; display: block; }
.article .prose { margin-inline: auto; }
.article__bar { max-width: 720px; margin: 0 auto var(--s-4); display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.article__back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--c-accent); text-decoration: none; }
.article__back:hover { color: var(--c-accent-bright); }

/* ─── Forms ──────────────────────────────────────────────── */
/* The enquiry forms style themselves INLINE — see dhd_form_styles() in
   inc/form-render.php for why (a stale cached copy of this file repeatedly
   rendered them naked). Only the surrounding page layout lives here. */

/* two-column contact layout: form + reassurance aside */
.contact { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s-6); align-items: start; }
.contact__aside { background: var(--c-paper-deep); border-radius: var(--r-lg); padding: var(--s-4); }
.contact__aside h3 { font-size: var(--t-h3); margin: 0 0 var(--s-2); }
.contact__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.contact__list li { position: relative; padding-left: 30px; font-size: var(--t-small); color: var(--c-muted); }
.contact__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 999px; background: color-mix(in srgb, var(--c-positive-bright) 20%, transparent); }
.contact__list li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--c-positive); border-bottom: 2px solid var(--c-positive); transform: rotate(-45deg); }

/* ─── FAQ (accordion via <details>) ──────────────────────── */

.faq { max-width: 780px; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary { cursor: pointer; list-style: none; padding: var(--s-3) 40px var(--s-3) 0; position: relative; font-size: var(--t-h3); font-weight: 500; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--c-accent); transition: transform 0.2s ease; }
.faq__item[open] summary::after { content: "\2013"; }
.faq__body { padding: 0 0 var(--s-3); color: var(--c-muted); line-height: 1.7; }
.faq__body p { margin: 0; }

/* ─── Cookie consent ─────────────────────────────────────── */

.cookie {
  position: fixed; left: var(--s-3); bottom: var(--s-3); z-index: 90;
  width: min(440px, calc(100vw - var(--s-3) * 2));
}
.cookie[hidden] { display: none; }
.cookie__card {
  background: var(--c-paper); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lift);
  padding: var(--s-4); position: relative;
}
/* thin brand accent along the top edge */
.cookie__card::before {
  content: ""; position: absolute; top: 0; left: var(--s-4); right: var(--s-4); height: 4px;
  border-radius: 0 0 999px 999px; background: linear-gradient(90deg, var(--c-accent), var(--c-positive-bright));
}
.cookie__title { font-size: 21px; margin: 0 0 var(--s-2); }
.cookie__text { font-size: 14px; line-height: 1.6; color: var(--c-muted); margin: 0 0 var(--s-3); }
.cookie__text a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.cookie__text a:hover { color: var(--c-accent-bright); }

.cookie__prefs { display: grid; gap: var(--s-2); margin: 0 0 var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.cookie__prefs[hidden] { display: none; }
.cookie__pref { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); cursor: pointer; }
.cookie__pref-text { font-size: 13px; line-height: 1.45; color: var(--c-muted); }
.cookie__pref-text strong { display: block; color: var(--c-ink); font-weight: 600; font-size: 14px; }

/* toggle switch */
.cookie__switch { position: relative; flex: 0 0 44px; width: 44px; height: 26px; }
.cookie__switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie__switch::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--c-line-strong); transition: background 0.2s ease; }
.cookie__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s var(--ease-out); }
.cookie__switch:has(input:checked)::before { background: var(--c-positive); }
.cookie__switch:has(input:checked)::after { transform: translateX(18px); }
.cookie__switch--locked::before { background: var(--c-accent); opacity: 0.5; }
.cookie__switch:has(input:focus-visible)::before { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie__actions .btn { flex: 1; justify-content: center; padding: 12px 16px; font-size: 14px; }
.cookie__actions .btn--ghost { flex: 1 1 auto; }

/* a subtle footer link to reopen preferences */
.site-footer__cookie { background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,0.82); text-decoration: none; font-size: var(--t-small); font-family: var(--font-sans); text-align: left; }
.site-footer__cookie:hover { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .cookie { animation: cookie-in 0.5s var(--ease-out) both; }
  @keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 520px) {
  .cookie { left: var(--s-2); right: var(--s-2); bottom: var(--s-2); width: auto; }
  .cookie__actions .btn { flex: 1 1 100%; }
}

/* ─── Content-page responsive ────────────────────────────── */

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card--feature { flex-direction: column; }
  .card--feature .card__media { flex: none; aspect-ratio: 16 / 9; }
  .card--feature .card__body { padding: var(--s-4); }
  .contact { grid-template-columns: 1fr; gap: var(--s-4); }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .page-hero { padding: calc(var(--header-h) + var(--s-4)) 0 var(--s-5); }
}

/* ═══ Row layouts ═══════════════════════════════════════════
   The arrangements the page builder can choose between. Everything below is
   either a brand-new class or a modifier scoped so it cannot match anything on
   a page that has not migrated yet — so this file can ship with no template
   using it and nothing moves by a pixel.

   Two responsive fixes the audit turned up are deliberately NOT here: a
   2-column tier for the card grids between 600 and 1100px, and .section's flat
   140px padding at every width down to 320px. Both change pages that have not
   migrated, which would make the migration diffs unreadable. They come after,
   as their own change. */

/* ── Reversed split: the photo on the left ──
   .split is a plain two-column grid, so today which side the photo sits on is
   decided by DOM order alone — and that same order decides the STACKING order
   once the grid collapses at 1100px. Flipping by source order would therefore
   stack photo-above-text on phones for half the rows.

   So the markup is always content-then-media, and the swap is `order` at
   desktop only. The column ratio flips with it: .split gives its first column
   the wider 1.05fr, and the words should keep the wider column whichever side
   they are on. */
@media (min-width: 1101px) {
  /* Order only — the column ratio is deliberately NOT flipped.
     .split's first column is the wider 1.05fr, and every reversed split this
     theme already ships puts the photo first, so today the photo always gets
     the wider column. An earlier version of this rule flipped the ratio so the
     words kept it, which reads better in the abstract and moved the photo on
     two live pages the moment they migrated. Matching what the site does beats
     the theory. */
  .split--reverse > .split__media { order: -1; }

  /* Equal halves, for rows where neither side should dominate. */
  .split--even { grid-template-columns: 1fr 1fr; }
}

/* ── Two columns of running text ──
   1101px, not a smaller breakpoint, and for a typographic reason: at 821px the
   container leaves each column about 44 characters, which is below comfortable
   reading. At 1101 it is ~62. It also collapses at exactly the width .split
   does, so "two-column things become one column" is a single rule to hold in
   your head rather than two. */
.prose--cols { max-width: none; }
@media (min-width: 1101px) {
  .prose--cols { column-count: 2; column-gap: var(--s-6); }
  /* Never strand a heading at the foot of a column, away from its own text. */
  .prose--cols > h2, .prose--cols > h3 { break-after: avoid-column; }
  .prose--cols > *:first-child { margin-top: 0; }
}

/* ── A wide photo with the words beneath it ──
   The letterbox row. .split__media is a 4:3 framed panel and .page-hero is a
   full-bleed band with a dark overlay; this is neither — a wide, clean crop
   that keeps the page's rounded, lifted card language. */
.rowbanner__media {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); aspect-ratio: 16 / 6;
  background: var(--c-paper-deep); box-shadow: var(--sh-lift);
}
.rowbanner__media picture { display: block; width: 100%; height: 100%; }
.rowbanner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rowbanner__body { margin-top: var(--s-5); }
@media (max-width: 820px) {
  /* 16:6 is a slot on a phone — give the picture back some height. */
  .rowbanner__media { aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
  .rowbanner__body { margin-top: var(--s-4); }
}

/* ── The dark-only blocks, on a light band ──
   .stats and .cta-band hard-code white text, so today they only work inside
   .section--deep. A row may put either on paper, so each gets a light variant.
   Note the green switches from --c-positive-bright (legible on purple) to
   --c-positive (the one that passes contrast on white). */
.stats--light .stat__n .dot { color: var(--c-positive); }
.stats--light .stat__label { color: var(--c-muted); }
.cta-band--light .cta-band__title { color: var(--c-ink); }
.cta-band--light .cta-band__intro { color: var(--c-muted); }

/* ── The card grids get a two-column tier ───────────────────
   .steps and .pillars jumped straight from three columns to one at 600px, so
   between 600 and 900 they were three cramped columns — about 210px each once
   the gaps are taken out, for a card carrying a 76px numbered disc, a heading
   and a paragraph. .cards already had this ladder; these now match it.

   Bounded at both ends on purpose: the existing 600px rule sets a single
   column and sits earlier in the file, so an unbounded max-width here would
   win at phone widths and undo it. */
@media (min-width: 601px) and (max-width: 900px) {
  .steps, .pillars { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Back to top ────────────────────────────────────────────
   Bottom-right, clear of the cookie card (which owns bottom-left) and under
   the menu overlay. Hidden until the visitor is a screen down, then eases in;
   [hidden] keeps it out of the tab order entirely while it is not shown. */
.to-top {
  position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: 80;
  width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--c-accent); color: #fff; box-shadow: var(--sh-btn);
  /* visibility swaps AFTER the fade-out, and with it the tab stop —
     one class, no [hidden] bookkeeping in the script */
  opacity: 0; transform: translateY(10px); visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out),
              background 0.2s ease, visibility 0s linear 0.25s;
}
.to-top.is-show {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out),
              background 0.2s ease, visibility 0s;
}
.to-top:hover { background: var(--c-accent-bright); transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid var(--c-positive-bright); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; transform: none; }
  .to-top:hover { transform: none; }
}
@media print { .to-top { display: none; } }

/* ─── Row scroll effects ─────────────────────────────────────
   Chosen per row in the Studio. The hidden state exists ONLY once theme.js
   has stamped fx-on on <html> — no JS (or reduced motion, which never arms)
   means every row is simply visible. Reveals play once and stay. */
html.fx-on .fx-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out);
}
html.fx-on .fx--zoom { transform: scale(0.96) translateY(12px); }
html.fx-on .fx-reveal.is-inview { opacity: 1; transform: none; }

/* One by one: the row fades up as a whole while its items join in sequence —
   steps, cards, stats, FAQ entries and prose paragraphs are all grandchildren
   of the container, so one selector covers every row type. */
html.fx-on .fx--stagger .container > * > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.55s var(--ease-out);
}
html.fx-on .fx--stagger.is-inview .container > * > * { opacity: 1; transform: none; }
html.fx-on .fx--stagger.is-inview .container > * > :nth-child(2) { transition-delay: 0.09s; }
html.fx-on .fx--stagger.is-inview .container > * > :nth-child(3) { transition-delay: 0.18s; }
html.fx-on .fx--stagger.is-inview .container > * > :nth-child(4) { transition-delay: 0.27s; }
html.fx-on .fx--stagger.is-inview .container > * > :nth-child(5) { transition-delay: 0.36s; }
html.fx-on .fx--stagger.is-inview .container > * > :nth-child(n+6) { transition-delay: 0.45s; }

/* Slide over: the marked row rides up over the pinned row above it. Sticky is
   occlusion by ordinary scrolling — not autonomous motion — so it stays on
   under reduced motion, and needs no JS at all. theme.js only refines
   --pin-top so a row taller than the viewport pins bottom-aligned instead of
   trapping its own lower content off-screen. */
.fx-pin { position: sticky; top: var(--pin-top, 0px); }
/* a plain white row paints no background of its own; a covering row must */
:where(.fx-cover) { background: var(--c-paper); }

/* ─── Starter additions ──────────────────────────────────── */

/* The menu opens with no JavaScript: a checkbox toggled by the burger's
   <label>. theme.js, when it runs, keeps body.nav-open and the ARIA in step. */
.menu-check { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.menu-check:focus-visible ~ .site-header .nav-toggle { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 8px; }

/* A site without a logo file shows its name, on one line. */
.brand { min-width: 0; }
.brand__name {
  display: block; max-width: 60vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(18px, 2.4vw, 26px); letter-spacing: -0.01em; color: var(--c-ink);
}
body.has-dark-hero .site-header:not(.site-header--scrolled) .brand__name,
body.nav-open .site-header .brand__name,
.menu-check:checked ~ .site-header .brand__name,
.site-footer .brand__name { color: #fff; }

/* Phone and email, a tap away in the header. */
.header-contact { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.header-contact a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--c-ink); transition: color 0.2s ease, background 0.2s ease; }
.header-contact a:hover { color: #fff; background: var(--c-accent); }
.header-contact svg { width: 18px; height: 18px; }
body.has-dark-hero .site-header:not(.site-header--scrolled) .header-contact a { color: #fff; }
body.nav-open .header-contact,
.menu-check:checked ~ .site-header .header-contact { opacity: 0; visibility: hidden; }

/* Phones: the contact icons and the header button live in the menu instead. */
@media (max-width: 700px) { .header-contact { display: none; } }
@media (max-width: 480px) { .header-cta { display: none; } }

/* The footer's credit line. */
.site-footer__credit { opacity: 0.72; }
.site-footer__credit a { color: inherit; }

/* ── 2.1 rows ────────────────────────────────────────────────
   Testimonials, latest articles, newsletter sign-up, photo gallery, photo
   cards, dated list and video — the studio-core 2.1 rows. Markup:
   plugin/studio-core/inc/rows-extra-render.php. Everything below reads the
   tokens in :root, so a client's brand carries through unchanged. */

/* Testimonials */
.rowx-quotes { display: grid; gap: var(--s-4); position: relative; z-index: 1; }
.rowx-quotes--three { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.rowx-quotes--single { max-width: 860px; margin-inline: auto; text-align: center; }
.rowx-quote { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.rowx-quotes--three .rowx-quote { background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-4); }
.rowx-quotes--single .rowx-quote + .rowx-quote { padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.rowx-quote__text { margin: 0; font-family: var(--font-serif); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; }
.rowx-quotes--single .rowx-quote__text { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.35; letter-spacing: -0.01em; }
.rowx-quote__text p { margin: 0; }
.rowx-quote__text p + p { margin-top: 0.8em; }
.rowx-quotes--three .rowx-quote__text::before { content: "\201C"; display: block; font-size: 56px; line-height: 0.6; color: var(--c-accent); margin-bottom: 10px; }
.rowx-quote__stars { color: #D9A21B; letter-spacing: 3px; font-size: 16px; }
.rowx-quote__by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; font-family: var(--font-sans); }
.rowx-quote__name { font-weight: 600; font-size: 15px; }
.rowx-quote__detail { font-size: 14px; color: var(--c-muted); }
.section--deep .rowx-quotes--single .rowx-quote__detail { color: rgba(255,255,255,0.72); }

/* Latest articles */
.rowx-latest { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); position: relative; z-index: 1; }
.rowx-latest--feature .rowx-post--feature { grid-column: span 2; grid-row: span 2; }
.rowx-post { position: relative; display: flex; flex-direction: column; background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, border-color 0.25s ease; }
.rowx-post:hover { transform: translateY(-5px); box-shadow: var(--sh-card); border-color: transparent; }
.rowx-post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-paper-deep); }
.rowx-post--feature .rowx-post__media { flex: 1; min-height: 260px; aspect-ratio: auto; }
.rowx-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out); }
.rowx-post:hover .rowx-post__media img { transform: scale(1.05); }
.rowx-post__body { padding: var(--s-3) var(--s-3) var(--s-4); display: flex; flex-direction: column; flex: 1; }
.rowx-post--feature .rowx-post__body { flex: 0 0 auto; }
/* A lead article with no photo is words only: centred in its tall frame, not stranded at the top. */
.rowx-post--feature:not(:has(.rowx-post__media)) .rowx-post__body { flex: 1; justify-content: center; padding: var(--s-5); }
.rowx-post--feature:not(:has(.rowx-post__media)) .rowx-post__more { margin-top: var(--s-2); }
.rowx-post__meta { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--s-1); }
.rowx-post__title { font-size: var(--t-h3); line-height: 1.25; margin: 0 0 var(--s-1); }
.rowx-post--feature .rowx-post__title { font-size: clamp(26px, 2.6vw, 34px); }
.rowx-post__title a { color: inherit; text-decoration: none; }
.rowx-post__title a::after { content: ""; position: absolute; inset: 0; }
.rowx-post:focus-within { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.rowx-post__title a:focus-visible { outline: none; }
.rowx-post__excerpt { color: var(--c-muted); font-size: var(--t-small); line-height: 1.7; margin: 0 0 var(--s-2); }
.rowx-post__more { margin-top: auto; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--c-accent); }
.rowx-latest__all { margin: var(--s-4) 0 0; position: relative; z-index: 1; }

/* Newsletter sign-up */
.rowx-signup { position: relative; z-index: 1; }
.rowx-signup--band { max-width: 720px; margin-inline: auto; text-align: center; }
.rowx-signup--band .section__head { margin-bottom: var(--s-4); }
.rowx-signup--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
.rowx-signup--split .section__head { margin: 0; }
.rowx-signup__form { text-align: left; background: var(--c-paper); color: var(--c-ink); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--sh-card); }
.rowx-signup__note { margin: var(--s-2) 0 0; font-family: var(--font-sans); font-size: 14px; color: var(--c-muted); }

/* Photo gallery */
.rowx-gallery { position: relative; z-index: 1; }
.rowx-gallery__track { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rowx-gallery__track::-webkit-scrollbar { display: none; }
.rowx-gallery__track .rowx-gallery__item { flex: 0 0 clamp(240px, 32vw, 420px); scroll-snap-align: start; }
.rowx-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.rowx-gallery__item { margin: 0; }
.rowx-gallery__open { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--c-paper-deep); cursor: zoom-in; }
.rowx-gallery__track .rowx-gallery__open { aspect-ratio: 4 / 5; }
.rowx-gallery__open img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.rowx-gallery__open:hover img { transform: scale(1.04); }
.rowx-gallery__open:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.rowx-gallery__caption { font-family: var(--font-sans); font-size: 13px; color: var(--c-muted); margin-top: var(--s-1); }
.section--deep .rowx-gallery__caption { color: rgba(255,255,255,0.72); }
.rowx-gallery__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--s-3); }
.rowx-gallery__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-ink); font-size: 18px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.rowx-gallery__arrow:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.section--deep .rowx-gallery__arrow { color: #fff; border-color: rgba(255,255,255,0.4); }

/* The enlarged view (theme.js builds it on first use) */
.rowx-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); background: rgba(10, 12, 16, 0.92); }
.rowx-lightbox[hidden] { display: none; }
.rowx-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rowx-lightbox__figure img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.rowx-lightbox__caption { max-width: 60ch; margin: 0; text-align: center; font-family: var(--font-sans); font-size: 15px; color: rgba(255,255,255,0.85); }
.rowx-lightbox__btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff; font-size: 20px; cursor: pointer; }
.rowx-lightbox__btn:hover, .rowx-lightbox__btn:focus-visible { background: rgba(255,255,255,0.15); border-color: #fff; outline: none; }
.rowx-lightbox__close { top: 16px; right: 16px; }
.rowx-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.rowx-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
body.rowx-lightbox-open { overflow: hidden; }

/* Photo cards */
.rowx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); position: relative; z-index: 1; }
.rowx-cards--four { grid-template-columns: repeat(4, 1fr); }
.rowx-cards--two { grid-template-columns: repeat(2, 1fr); }
.rowx-card { position: relative; display: flex; flex-direction: column; background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease, border-color 0.25s ease; }
.rowx-card--link:hover { transform: translateY(-5px); box-shadow: var(--sh-card); border-color: transparent; }
.rowx-card--link:focus-within { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.rowx-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-paper-deep); }
.rowx-cards--four .rowx-card__media { aspect-ratio: 3 / 4; }
.rowx-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.rowx-card--link:hover .rowx-card__media img { transform: scale(1.05); }
.rowx-card__body { padding: var(--s-3) var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.rowx-card__title { font-size: var(--t-h3); line-height: 1.25; margin: 0; }
.rowx-card__title a { color: inherit; text-decoration: none; }
.rowx-card__title a::after { content: ""; position: absolute; inset: 0; }
.rowx-card__title a:focus-visible { outline: none; }
.rowx-card__sub { margin: 0; color: var(--c-muted); font-size: var(--t-small); line-height: 1.7; }
.rowx-card__more { margin-top: auto; padding-top: var(--s-1); font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--c-accent); }

/* Dated list */
.rowx-dated { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.rowx-dated--list { display: flex; flex-direction: column; max-width: 920px; }
.rowx-dated--list .rowx-dated__item { display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); }
.rowx-dated--list .rowx-dated__item--media { grid-template-columns: 220px 1fr; }
.rowx-dated--list .rowx-dated__item:first-child { padding-top: 0; }
.rowx-dated--list .rowx-dated__item:last-child { border-bottom: 0; }
.rowx-dated--cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.rowx-dated--cards .rowx-dated__item { background: var(--c-paper); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.rowx-dated--cards .rowx-dated__body { padding: var(--s-3) var(--s-3) var(--s-4); }
.rowx-dated__media { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--c-paper-deep); }
.rowx-dated--cards .rowx-dated__media { border-radius: 0; }
.rowx-dated__media img { width: 100%; height: 100%; object-fit: cover; }
.rowx-dated__date { margin: 0 0 var(--s-1); font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-accent); }
.rowx-dated__title { font-size: var(--t-h3); line-height: 1.25; margin: 0 0 var(--s-1); }
.rowx-dated__title a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rowx-dated__text { margin: 0; color: var(--c-muted); font-size: var(--t-small); line-height: 1.7; }
.section--deep .rowx-dated--list .rowx-dated__item { border-color: rgba(255,255,255,0.18); }
.section--deep .rowx-dated--list .rowx-dated__text { color: rgba(255,255,255,0.78); }
.section--deep .rowx-dated--list .rowx-dated__date { color: var(--c-positive-bright); }

/* Video */
.rowx-video { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
.rowx-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--c-accent-dark); box-shadow: var(--sh-lift); }
.rowx-video__frame img, .rowx-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.rowx-video__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; text-decoration: none; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35)); }
.rowx-video__icon { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--c-accent); box-shadow: var(--sh-btn); transition: transform 0.25s var(--ease-out); }
.rowx-video__icon svg { margin-left: 4px; }
.rowx-video__play:hover .rowx-video__icon { transform: scale(1.08); }
.rowx-video__play:focus-visible { outline: none; }
.rowx-video__play:focus-visible .rowx-video__icon { outline: 3px solid #fff; outline-offset: 4px; }
.rowx-video__label { font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.rowx-video__caption { margin-top: var(--s-2); text-align: center; font-family: var(--font-sans); font-size: 14px; color: var(--c-muted); }
.section--deep .rowx-video__caption { color: rgba(255,255,255,0.72); }

@media (max-width: 1100px) { .rowx-cards--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .rowx-quotes--three, .rowx-latest, .rowx-cards, .rowx-dated--cards { grid-template-columns: repeat(2, 1fr); }
  .rowx-latest--feature .rowx-post--feature { grid-column: 1 / -1; grid-row: auto; }
  .rowx-signup--split { grid-template-columns: 1fr; gap: var(--s-4); }
  .rowx-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rowx-quotes--three, .rowx-latest, .rowx-cards, .rowx-cards--four, .rowx-cards--two, .rowx-dated--cards { grid-template-columns: 1fr; }
  .rowx-dated--list .rowx-dated__item--media { grid-template-columns: 1fr; gap: var(--s-2); }
  .rowx-gallery__track .rowx-gallery__item { flex-basis: 78vw; }
  .rowx-video__frame { border-radius: var(--r-lg); }
  .rowx-video__icon { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .rowx-post, .rowx-post__media img, .rowx-card, .rowx-card__media img, .rowx-gallery__open img, .rowx-video__icon { transition: none; }
  .rowx-post:hover, .rowx-card--link:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════
   Alternative Florist — second draft
   White, soft grey, charcoal and gold (Emma's old-site colours).
   The logo centred with the menu either side; a still banner; the
   charcoal-and-gold trial button top and bottom of every page.
   Everything below overrides the starter.
   ═══════════════════════════════════════════════════════════ */

:root {
  --t-display: clamp(40px, 5.4vw, 72px);
  --t-h1:      clamp(36px, 4.4vw, 58px);
  --t-h2:      clamp(30px, 3.4vw, 44px);
  --t-h3:      25px;
  --logo-h:    120px;
  --header-h:  156px;
  --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 4px;
  --sh-card: 0 1px 2px rgba(43, 42, 38, .04), 0 14px 32px rgba(43, 42, 38, .07);
  --sh-lift: 0 2px 6px rgba(43, 42, 38, .06), 0 18px 40px rgba(43, 42, 38, .12);
  --sh-btn:  none;
}

/* ─── Type ─── */
body { font-family: var(--font-sans); font-weight: 340; }
h1, h2, h3, h4, .section__title, .page-hero__title, .stat__n, .step__title, .pillar__title,
.card__title, .rowx-card__title, .site-footer__brand, .site-menu__label { font-family: var(--font-serif); }
h1, h2, h3 { font-weight: 500; color: var(--c-ink); letter-spacing: -0.005em; line-height: 1.08; }
.step__title, .pillar__title, .card__title, .rowx-card__title { font-weight: 500; letter-spacing: 0; }
h1 em, h2 em, h3 em, .section__title em { color: var(--c-gold-text); font-style: italic; }
.eyebrow { color: var(--c-gold-text); font-weight: 500; letter-spacing: .22em; }
.dot { color: var(--c-gold); font-size: 1em; }
.rule { width: 44px; height: 1px; border-radius: 0; background: var(--c-gold); }
.blob, .wave, .page-hero__wave { display: none !important; }
.site-footer::before, .site-footer::after { display: none !important; }
.btn { font-weight: 500; letter-spacing: .04em; }
.btn--primary:hover { background: var(--c-accent-dark); }
.link-arrow { font-weight: 500; letter-spacing: .03em; }

/* Charcoal bands (the footer only now): ivory text, gold details */
.section--deep { background: var(--c-accent-deep); color: #EDEAE3; }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep .section__title { color: #F6F3EE; }
.section--deep .eyebrow, .section--deep .link-arrow { color: var(--c-gold); }
.section--deep .dot, .section--deep .stat__n .dot, .section--deep .rule { color: var(--c-gold); background: var(--c-gold); }
.section--deep .stat__n { color: var(--c-gold); }
.stat__n { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; color: var(--c-gold-text); }
.section--paper-deep .stat__n { color: var(--c-ink); }

/* ─── The trial button: charcoal with gold lettering, "No commitment" under ─── */
.btn--trial, .cta-band .btn--primary, .site-footer .btn--primary, .mcta {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--c-ink); color: var(--c-gold); border-radius: 2px; padding: 11px 26px 9px; line-height: 1.15;
  animation: trial-swap 11s ease-in-out infinite;
}
.btn--trial .btn__label, .cta-band .btn--primary .btn__label { font-size: 15px; letter-spacing: .06em; }
.btn__sub, .cta-band .btn--primary::after, .site-footer .btn--primary::after, .mcta::after {
  content: var(--cta-sub, ""); display: block; font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; opacity: .85;
}
.btn__sub { font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.cta-band .btn--primary .btn__arrow, .site-footer .btn--primary .btn__arrow { display: none; }
.btn--trial:hover, .cta-band .btn--primary:hover, .site-footer .btn--primary:hover, .mcta:hover { animation-play-state: paused; background: var(--c-ink); color: var(--c-gold); transform: translateY(-1px); }
/* Emma's "sliding" button: a slow, gentle swap between charcoal/gold and gold/charcoal (draft 3: gold, not grey) */
@keyframes trial-swap { /* the lettering flips at the halfway point, so it never fades into the background */
  0%, 38%   { background: var(--c-ink); color: var(--c-gold); }
  44%       { color: var(--c-gold); }
  44.1%     { color: var(--c-ink); }
  50%, 88%  { background: var(--c-gold); color: var(--c-ink); }
  94%       { color: var(--c-ink); }
  94.1%     { color: var(--c-gold); }
  100%      { background: var(--c-ink); color: var(--c-gold); }
}
.cta-band__title { color: var(--c-ink); }
.cta-band__intro { color: var(--c-muted); }

/* ─── Header: a small logo left (inner pages), social circles · trial button · burger right ─── */
:root { --logo-h: 76px; --header-h: 108px; }
.site-header,
body.has-hero .site-header--scrolled {
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
body.has-hero .site-header:not(.site-header--scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
body.has-hero .site-header:not(.site-header--scrolled) .brand { visibility: hidden; } /* the banner carries the big logo */
.site-header { height: var(--header-h); transition: height .3s ease, background .3s ease; }
.site-header--scrolled { height: 84px; }
.site-header--scrolled .brand img { height: 60px; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: none; padding-inline: 28px; }
.brand img { height: var(--logo-h); max-width: none; transition: height .3s ease; }
.site-header__right { display: flex; align-items: center; gap: 18px; }
.site-header__actions { display: flex; align-items: center; gap: 18px; }
.header-contact, .header-search-toggle { display: none !important; }
.header-social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.header-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-ink); color: var(--c-ink); display: grid; place-items: center; transition: .25s; }
.header-social a:hover { background: var(--c-ink); color: var(--c-gold); }
/* The starter turns header icons white over a dark page header; ours is white, so keep them charcoal */
body.has-dark-hero .site-header:not(.site-header--scrolled) .header-social a { color: var(--c-ink); }
body.has-dark-hero .site-header:not(.site-header--scrolled) .nav-toggle span { background: var(--c-ink); }
body.has-dark-hero .site-header:not(.site-header--scrolled) .brand__logo--dark { display: block; }
body.has-dark-hero .site-header:not(.site-header--scrolled) .brand__logo--light { display: none; }
.header-social svg { width: 16px; height: 16px; }
.header-cta { padding-inline: 22px; white-space: nowrap; }
.nav-toggle { display: inline-flex !important; width: 58px; height: 58px; padding: 0; justify-content: center; gap: 7px; }
.nav-toggle span { width: 34px; height: 3px; border-radius: 2px; background: var(--c-ink); }
.site-header__actions { gap: 16px; }
@media (max-width: 1279px) { }

/* ─── Home banner: Emma's photo, the logo big and centred as on her old site ─── */
/* Her old site's crop (2.58:1): the photo zoomed a little and anchored to the bottom, so the stocks fill the lower right and
   the leaves run off the bottom edge; the logo centred 40% down at 43% of the band, as measured from her site */
.banner { position: relative; height: clamp(340px, 38.7vw, 620px); overflow: hidden; background: var(--c-stone); }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transform: scale(1.09); transform-origin: 50% 100%; }
.banner__logo { position: absolute; left: 50%; top: 19%; transform: translateX(-50%); height: 43%; width: auto; max-width: none; }
.banner__line { position: absolute; left: var(--gutter); bottom: 22px; margin: 0; text-align: left;
  font: italic 400 clamp(18px, 1.8vw, 24px)/1.3 var(--font-serif); color: var(--c-ink); letter-spacing: .02em; }

/* ─── Page header: white, text left, a smaller photo right ─── */
.page-hero { background: var(--c-paper); color: var(--c-ink); min-height: 0; display: block;
  padding: calc(var(--header-h) + var(--s-4)) 0 var(--s-5); border-bottom: 1px solid var(--c-line); }
.page-hero__inner { max-width: var(--container); display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-hero--split .page-hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.page-hero__img { position: relative; inset: auto; aspect-ratio: 4 / 5; width: 100%; max-width: 400px; max-height: 500px; justify-self: center; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--sh-card); }
.page-hero__title { color: var(--c-ink); text-shadow: none; font-size: var(--t-h1); }
.page-hero__title .dot { color: var(--c-gold); }
.page-hero .eyebrow { color: var(--c-gold-text); }
.page-hero .rule { background: var(--c-gold); }
.page-hero__intro { color: var(--c-muted); max-width: 44ch; }
.page-hero__text { max-width: 640px; }
@media (max-width: 860px) {
  .page-hero--split .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__img { max-width: 100%; max-height: 420px; }
}

/* ─── Rows: photos a little smaller; soft grey bands; fine rules ─── */
.split__media img, .rowsplit__media img, .section .split img { max-width: 480px; margin-inline: auto; }
.pillar__icon { display: none; }
.pillar { border-radius: var(--r-md); border-top: 2px solid var(--c-gold); }
.pillar__title { font-size: 24px; }
.pillars:has(> .pillar:nth-child(2):last-child), .pillars:has(> .pillar:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .pillars:has(> .pillar:nth-child(4):last-child) { grid-template-columns: 1fr; } }
.step { background: var(--c-paper); box-shadow: none; border-top: 1px solid var(--c-gold); border-radius: 0; padding: var(--s-3) var(--s-3) var(--s-3) 0; }
.step__n { width: auto; height: auto; border-radius: 0; background: none; display: block; text-align: left;
  font: italic 400 30px/1 var(--font-serif); color: var(--c-gold-text); margin-bottom: var(--s-2); }
.step__title { font-size: 28px; }
.step__body { font-size: var(--t-body); }
.section--paper-deep .step { background: transparent; }
.rowx-gallery__track img, .rowx-gallery img { border-radius: var(--r-md); }
.rowx-gallery--grid .rowx-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .rowx-gallery--grid .rowx-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Words between two photos (the site's own row) */
.trio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; text-align: center; }
.trio__side img { width: 100%; max-width: 340px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--sh-card); margin-inline: auto; }
.trio__words .section__head { text-align: center; }
.trio__words .rule { margin-inline: auto; }
.trio__prose p { font-family: var(--font-serif); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.35; color: var(--c-ink); margin: 0 0 .7em; }
.trio__prose p:first-child { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; }
.trio__cta { margin: var(--s-3) 0 0; }
@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr 1fr; }
  .trio__words { grid-column: 1 / -1; order: -1; }
  .trio__side img { max-width: 100%; }
}

/* Testimonials that come and go */
.rowx-quote__stars { color: var(--c-gold); letter-spacing: .12em; font-size: 20px; }
.rowx-quotes.is-carousel { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
.rowx-quotes.is-carousel .rowx-quote { grid-area: 1 / 1; opacity: 0; transition: opacity 1.8s ease; margin: 0; width: 100%; max-width: 760px; justify-self: center; text-align: center; pointer-events: none; border: 0; background: none; box-shadow: none; padding: 0; }
.rowx-quotes.is-carousel .rowx-quote__by { justify-content: center; text-align: center; }
.rowx-quotes__nav { grid-area: 2 / 1; }
.rowx-quotes.is-carousel .rowx-quote.is-on { opacity: 1; pointer-events: auto; }
.rowx-quotes.is-carousel .rowx-quote__text { font-family: var(--font-serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; color: var(--c-ink); }
.rowx-quotes__nav { display: flex; justify-content: center; gap: 12px; margin-top: var(--s-4); }
.rowx-quotes__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: var(--c-paper); color: var(--c-ink); font-size: 22px; line-height: 1; cursor: pointer; transition: .25s; }
.rowx-quotes__nav button:hover { border-color: var(--c-gold); color: var(--c-gold-text); }

/* ─── Phones: the trial button follows the visitor once past the banner ─── */
.mcta { display: none; }
@media (max-width: 760px) {
  :root { --logo-h: 60px; --header-h: 84px; }
  .banner { height: 96vw; min-height: 320px; }
  .banner__img { object-position: 35% 100%; transform: none; }
  .banner__logo { top: 22%; height: 40%; }
  .banner__line { left: 16px; bottom: 16px; font-size: 16px; }
  .nav-toggle { width: 50px; height: 50px; }
  .nav-toggle span { width: 28px; }
  .header-cta, .header-social { display: none !important; }
  .mcta { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); text-decoration: none;
    transform: translateY(140%); transition: transform .4s var(--ease-out); }
  .mcta.is-shown { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--trial, .cta-band .btn--primary, .site-footer .btn--primary, .mcta { animation: none; }
  .rowx-quotes.is-carousel .rowx-quote { transition: none; }
}

/* The cookie card, compact */
.cookie__card { max-width: 340px; padding: 20px 22px; border-radius: var(--r-md); }
.cookie__card::before { background: var(--c-gold); height: 2px; border-radius: 0; }
.cookie__title { font-size: 19px; margin-bottom: 6px; }
.cookie__text { font-size: 13px; margin-bottom: 14px; }
.cookie__actions .btn { padding: 9px 14px; font-size: 13px; }

/* ═══ Home rows with more presence — same copy, same palette ═══ */

/* Generous rhythm between rows */
body.home .section { padding-block: clamp(72px, 9vw, 128px); }

/* A fine gold mat around feature photos */
.trio__side img, body.home .split__media { outline: 1px solid var(--c-gold); outline-offset: 14px; box-shadow: none; border-radius: 0; }
.trio__side img { border-radius: 0; box-shadow: none; }

/* Words between two photos: staggered photos, a headline, then her lines divided by gold rules */
.trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); }
.trio__side:first-child { transform: translateY(-36px); }
.trio__side:last-child { transform: translateY(36px); }
.trio__side img { max-width: 360px; aspect-ratio: 4 / 5; }
.trio__words::before { content: ""; display: block; width: 44px; height: 1px; background: var(--c-gold); margin: 0 auto var(--s-4); }
.trio__prose p:first-child { font-size: clamp(30px, 3vw, 44px); line-height: 1.12; font-weight: 500; margin-bottom: var(--s-4); }
.trio__prose p:not(:first-child) { font-style: italic; font-size: clamp(19px, 1.6vw, 23px); color: #4A4741; margin: 0; padding: 14px 0; }
.trio__prose p:not(:first-child) + p::before { content: ""; display: block; width: 24px; height: 1px; background: var(--c-gold); margin: 0 auto 14px; }

/* The "Luxury artificial…" statement: centred, large, between gold hairlines */
body.home .section > .container > .prose:only-child,
body.home .section .section__head + .prose { text-align: center; }
body.home .section:has(> .container > .section__head + .prose:not(.trio__prose)) .container { max-width: 980px; text-align: center; border-block: 1px solid var(--c-gold); padding-block: clamp(40px, 5vw, 64px); }
body.home .section:has(> .container > .section__head + .prose:not(.trio__prose)) .section__head { text-align: center; }
body.home .section:has(> .container > .section__head + .prose:not(.trio__prose)) .rule { display: none; }
body.home .section:has(> .container > .section__head + .prose:not(.trio__prose)) .section__title { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.15; max-width: none; margin-inline: auto; }
body.home .section:has(> .container > .section__head + .prose:not(.trio__prose)) .prose p { font: italic 400 clamp(19px, 1.7vw, 24px)/1.4 var(--font-serif); color: var(--c-gold-text); margin: var(--s-2) auto 0; }

/* The trial box: a white card on the grey band — words left, the button right */
.section--paper-deep .cta-band { background: var(--c-paper); border-top: 2px solid var(--c-gold); padding: clamp(36px, 4.5vw, 64px) clamp(28px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.6fr) auto; column-gap: clamp(32px, 5vw, 80px); align-items: center; text-align: left; box-shadow: 0 18px 50px rgba(43, 42, 38, .07); }
.section--paper-deep .cta-band .cta-band__title { grid-column: 1; margin-bottom: var(--s-2); }
.section--paper-deep .cta-band .cta-band__intro { grid-column: 1; margin: 0; max-width: 56ch; }
.section--paper-deep .cta-band > .btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; padding: 16px 34px 13px; }
.section--paper-deep .cta-band > .btn .btn__label, .section--paper-deep .cta-band > .btn { font-size: 16px; }
.cta-band__intro p + p { margin-top: var(--s-2); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold-text); line-height: 1.9; }
@media (max-width: 860px) {
  .section--paper-deep .cta-band { grid-template-columns: 1fr; text-align: center; }
  .section--paper-deep .cta-band > .btn { grid-column: 1; grid-row: auto; justify-self: center; margin-top: var(--s-3); }
  .section--paper-deep .cta-band .cta-band__intro { margin-inline: auto; }
}

/* Benefits: two neat columns of gold ticks with hairlines, beside the framed photo */
body.home .split__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 0; }
body.home .split__list li { padding: 13px 0 13px 28px; border-bottom: 1px solid var(--c-line); font-size: 15.5px; color: var(--c-ink); }
body.home .split__list li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 11px; height: 6px; border-left: 1.5px solid var(--c-gold-text); border-bottom: 1.5px solid var(--c-gold-text); transform: rotate(-45deg); background: none; border-radius: 0; }
body.home .split__list li::after { display: none; }
@media (max-width: 600px) { body.home .split__list { grid-template-columns: 1fr; } }

/* Stats: large serif numbers divided by thin gold rules */
body.home .stats { gap: 0; }
body.home .stat { padding: var(--s-3) var(--s-4); }
body.home .stat + .stat { border-left: 1px solid var(--c-gold); }
body.home .stat__n { font-size: clamp(54px, 6vw, 84px); color: var(--c-ink); line-height: 1; }
body.home .stat__label { margin-top: var(--s-2); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--c-gold-text); }
@media (max-width: 760px) {
  body.home .stat + .stat { border-left: 0; border-top: 1px solid var(--c-gold); }
  .trio__side:first-child, .trio__side:last-child { transform: none; }
}
/* The framed benefits photo fills its frame (the site-wide "smaller photos" cap letterboxed it) */
body.home .split__media img { max-width: none; width: 100%; height: 100%; object-fit: cover; }
body.home .split__media { aspect-ratio: 4 / 5; max-width: 460px; justify-self: center; }
/* The statement headline runs wider before it wraps */
body.home .section:has(> .container > .section__head + .prose:not(.trio__prose)) .section__title { max-width: 24ch; }
body.home .section:has(> .container > .section__head + .prose:not(.trio__prose)) .section__head { max-width: none; margin-inline: auto; }
@media (max-width: 860px) {
  .trio__side:first-child, .trio__side:last-child { transform: none !important; }
  .trio__side img { width: 100%; max-width: none; aspect-ratio: 4 / 5; outline-offset: 8px; }
  .trio { gap: 28px 20px; }
}
body.home .section:has(> .container > .section__head + .prose:not(.trio__prose)) .section__title { max-width: 30ch; }
body.home .section:has(> .container > .section__head + .prose:not(.trio__prose)) .prose { margin-inline: auto; }
.trio__side img { height: auto; object-fit: cover; }
/* Both feature photos the same frame, whatever size the files are */
.trio__side { width: 100%; display: flex; justify-content: center; }
.trio__side img { width: 100% !important; max-width: 360px; height: auto !important; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 860px) { .trio__side img { max-width: none; } }
/* Phones: two equal photo columns under the words (must come after the desktop three-column rule) */
@media (max-width: 860px) {
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio__words { grid-column: 1 / -1; order: -1; }
}

/* ═══ Home rows, round 2: level photos with depth, tighter rhythm ═══ */
body.home .section { padding-block: clamp(56px, 6.5vw, 92px); }
.trio__side:first-child, .trio__side:last-child { transform: none !important; }
.trio { align-items: center; }
/* A white mount and a layered shadow: the photo sits on the page like a print */
.trio__side img, body.home .split__media {
  outline: none; border: 10px solid #fff; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(43, 42, 38, .08), 0 8px 18px rgba(43, 42, 38, .10), 0 28px 60px rgba(43, 42, 38, .16);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.trio__side img:hover, body.home .split__media:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(43, 42, 38, .08), 0 14px 28px rgba(43, 42, 38, .12), 0 40px 80px rgba(43, 42, 38, .20);
}
.trio__words::before { margin-bottom: var(--s-3); }
.trio__prose p:first-child { margin-bottom: var(--s-3); }
/* The statement between hairlines sits closer to its neighbours */
body.home .section:has(> .container > .section__head + .prose:not(.trio__prose)) .container { padding-block: clamp(32px, 4vw, 52px); }

/* ═══ The free-trial offer card ═══ */
.trial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); background: var(--c-paper); border-top: 3px solid var(--c-gold);
  box-shadow: 0 2px 4px rgba(43, 42, 38, .06), 0 24px 60px rgba(43, 42, 38, .14); overflow: hidden; }
.trial__media { position: relative; min-height: 460px; }
.trial__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trial__body { padding: clamp(36px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.trial__eyebrow { margin: 0 0 var(--s-2); font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--c-gold-text); }
.trial__eyebrow::before { content: ""; display: block; width: 44px; height: 1px; background: var(--c-gold); margin-bottom: var(--s-2); }
.trial__title { font-size: clamp(36px, 3.8vw, 54px); line-height: 1.05; margin: 0 0 var(--s-3); color: var(--c-ink); }
.trial__text p { margin: 0 0 var(--s-3); font-size: 17px; color: var(--c-muted); max-width: 46ch; }
.trial__points { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.trial__points li { position: relative; padding-left: 28px; font-size: 15px; color: var(--c-ink); }
.trial__points li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border-left: 1.5px solid var(--c-gold-text); border-bottom: 1.5px solid var(--c-gold-text); transform: rotate(-45deg); }
.trial__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.trial__btn { padding: 18px 40px 15px; }
.trial__btn .btn__label { font-size: 17px; }
.trial__call { margin: 0; font-size: 15px; color: var(--c-muted); }
.trial__call a { color: var(--c-ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--c-gold); }
@media (max-width: 860px) {
  .trial { grid-template-columns: 1fr; }
  .trial__media { min-height: 0; aspect-ratio: 4 / 3; }
  .trial__points { grid-template-columns: 1fr; }
}

/* ═══ The open menu: light, her logo, her flowers, a clear close, the trial button ═══ */
.site-menu { background: var(--c-paper); color: var(--c-ink); }
.site-menu .blob { display: none !important; }
.site-menu__flowers { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; overflow: hidden; background: var(--c-stone); }
.site-menu__flowers img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 100%; transform: scale(1.04); transition: transform 6s ease; }
body.nav-open .site-menu__flowers img, .menu-check:checked ~ .site-menu .site-menu__flowers img { transform: scale(1.12); }
.site-menu__logo { position: absolute; top: 18px; left: 28px; z-index: 2; }
.site-menu__logo img { height: 96px; width: auto; }
.site-menu__inner { grid-template-columns: minmax(0, 1fr); max-width: none; margin: 0; width: 58%; padding: 140px 0 var(--s-5) clamp(28px, 6vw, 96px); }
.site-menu__aside { border-left: 0; padding-left: 0; margin-top: var(--s-3); }
.site-menu__nav { gap: clamp(2px, 0.9vh, 10px); }
.site-menu__link { color: var(--c-ink); }
.site-menu__label { font-size: clamp(28px, 4.6vh, 44px); }
.site-menu__label::after { background: var(--c-gold); height: 1px; }
.site-menu__link:hover .site-menu__label { color: var(--c-gold-text); }
.site-menu__num { color: var(--c-gold-text); font-weight: 500; }
.site-menu__eyebrow { color: var(--c-gold-text); }
.site-menu__contact { color: var(--c-ink); }
.site-menu__contact:hover { border-bottom-color: var(--c-gold); }
.site-menu__search { background: var(--c-tint) !important; color: var(--c-ink) !important; border-color: var(--c-line) !important; }
.site-menu__trial { margin-top: var(--s-3); align-self: flex-start; padding: 15px 34px 12px; opacity: 0; transform: translateY(28px); }
body.nav-open .site-menu__trial, .menu-check:checked ~ .site-menu .site-menu__trial { opacity: 1; transform: none; transition: opacity .5s ease .7s, transform .55s var(--ease-out) .7s; }
/* While open: the header's own logo and button step aside; the X is a clear charcoal cross in a white circle */
body.nav-open .site-header .brand, .menu-check:checked ~ .site-header .brand { visibility: hidden !important; }
body.nav-open .nav-toggle, .menu-check:checked ~ .site-header .nav-toggle { background: #fff; border-radius: 50%; box-shadow: 0 6px 22px rgba(43, 42, 38, .18); }
body.nav-open .nav-toggle span, .menu-check:checked ~ .site-header .nav-toggle span { background: var(--c-ink) !important; height: 3px; }
@media (max-width: 860px) {
  .site-menu__flowers { position: relative; width: 100%; height: 160px; order: 3; }
  .site-menu { display: flex; flex-direction: column; }
  .site-menu__inner { width: 100%; padding: 120px 24px var(--s-4); }
  .site-menu__logo img { height: 72px; }
}
@media (min-width: 861px) {
  .site-menu__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 4vw, 64px); align-items: end; padding-right: clamp(24px, 3vw, 48px); }
  .site-menu__aside { margin: 0 0 6px; }
}
/* The outline partner to the trial button (Flower Genie's "View arrangements") */
.btn--outline { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--c-ink);
  border: 1.5px solid var(--c-ink); border-radius: 2px; padding: 16px 30px; font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: .25s; }
.btn--outline:hover { background: var(--c-ink); color: var(--c-gold); }
.trial__actions { gap: 16px 18px; }
.trial__call { flex-basis: 100%; margin-top: 4px; }
/* The two trial buttons side by side, the same height */
.trial__actions { align-items: stretch; }
.trial__btn { padding: 14px 28px 12px; }
.trial__btn .btn__label { font-size: 16px; }
.trial__btn2 { padding: 14px 24px; font-size: 13px; letter-spacing: .1em; }
.trial__call { align-self: center; }
@media (max-width: 600px) { .trial__btn, .trial__btn2 { flex: 1 1 100%; } }

/* The open menu, round 2: contact, both buttons and social in the plain grey top of the flowers */
.site-menu__panel { position: absolute; top: 0; right: 0; width: 42%; z-index: 2; padding: 128px clamp(28px, 3.5vw, 56px) 0; pointer-events: none; }
.site-menu__panel .site-menu__aside { pointer-events: auto; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.site-menu__panel .site-menu__contact { font-size: clamp(20px, 2.4vh, 26px); }
.site-menu__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.site-menu__buttons .site-menu__trial { margin: 0; opacity: 1; transform: none; padding: 14px 26px 11px; }
.site-menu__buttons .btn--outline { background: rgba(255, 255, 255, .55); padding: 14px 22px; font-size: 13px; }
.site-menu__buttons .btn--outline:hover { background: var(--c-ink); }
.site-menu__panel .site-menu__social a { color: var(--c-ink); border-color: var(--c-ink); background: rgba(255, 255, 255, .35); }
.site-menu__panel .site-menu__social a:hover { background: var(--c-ink); color: var(--c-gold); border-color: var(--c-ink); }
.site-menu__inner { grid-template-columns: minmax(0, 1fr); padding-top: 128px; }
@media (max-width: 860px) {
  .site-menu__panel { position: static; width: 100%; padding: 0 24px var(--s-4); order: 2; }
  .site-menu__inner { order: 1; padding-bottom: var(--s-3); }
}
@media (min-width: 861px) { .site-menu__inner { align-items: start; align-content: start; padding-top: 150px; } }
@media (max-width: 860px) {
  .site-menu__inner { padding-top: 104px; }
  .site-menu__label { font-size: 27px; }
  .site-menu__nav { gap: 2px; }
  .site-menu__search { margin-bottom: 10px; }
  .site-menu__panel .site-menu__aside { gap: var(--s-2); }
  .site-menu__panel .site-menu__group:first-child { order: 2; }
  .site-menu__buttons { order: 1; }
  .site-menu__buttons > * { flex: 1 1 100%; }
}
@media (max-width: 860px) {
  .site-menu__inner { min-height: 0; display: block; }
  .site-menu__flowers { flex: 0 0 auto; }
}
@media (max-width: 860px) { .site-menu > * { flex-shrink: 0; } }
@media (max-width: 860px) { .site-menu__panel .site-menu__group:last-child:not(.site-menu__buttons) { order: 3; } }
/* A true, heavy X when the menu is open: both arms centred on one point */
body.nav-open .nav-toggle, .menu-check:checked ~ .site-header .nav-toggle { position: relative; }
body.nav-open .nav-toggle span, .menu-check:checked ~ .site-header .nav-toggle span {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 4px !important; margin: -2px 0 0 -15px; border-radius: 3px; background: var(--c-ink) !important; }
body.nav-open .nav-toggle span:nth-child(1), .menu-check:checked ~ .site-header .nav-toggle span:nth-child(1) { transform: rotate(45deg) !important; }
body.nav-open .nav-toggle span:nth-child(2), .menu-check:checked ~ .site-header .nav-toggle span:nth-child(2) { opacity: 0 !important; }
body.nav-open .nav-toggle span:nth-child(3), .menu-check:checked ~ .site-header .nav-toggle span:nth-child(3) { transform: rotate(-45deg) !important; }

/* ═══ Statement between flowers ═══ */
.statement-row { position: relative; overflow: hidden; padding-block: clamp(80px, 9vw, 130px) !important; }
.statement { position: relative; z-index: 2; max-width: 760px; text-align: center; }
.statement__eyebrow { margin: 0 0 var(--s-3); font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--c-gold-text); }
.statement__eyebrow::after { content: ""; display: block; width: 44px; height: 1px; background: var(--c-gold); margin: var(--s-2) auto 0; }
.statement__title { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.12; margin: 0 0 var(--s-3); color: var(--c-ink); }
.statement__line p { margin: 0; font: italic 400 clamp(20px, 1.8vw, 26px)/1.4 var(--font-serif); color: var(--c-gold-text); }
/* The arrangements grow in from the edges, cropped by the row */
.statement__flowers { position: absolute; z-index: 1; bottom: -14%; width: clamp(240px, 24vw, 380px); pointer-events: none; }
.statement__flowers img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 24px rgba(43, 42, 38, .14)); }
.statement__flowers--left { left: -5%; transform: rotate(-6deg); transform-origin: bottom left; }
.statement__flowers--right { right: -4%; bottom: -22%; transform: rotate(5deg); transform-origin: bottom right; }
@media (max-width: 1100px) { .statement { max-width: 560px; } .statement__flowers { width: 220px; } .statement__flowers--left { left: -9%; } .statement__flowers--right { right: -9%; } }
@media (max-width: 760px) {
  .statement-row { padding-bottom: 300px !important; }
  .statement__flowers { width: 200px; bottom: -40px; }
  .statement__flowers--left { left: -30px; }
  .statement__flowers--right { right: -30px; bottom: -60px; }
}
@media (min-width: 1101px) {
  .statement__flowers { width: clamp(300px, 27vw, 430px); }
  .statement__flowers--left { left: -3%; bottom: -30%; }
  .statement__flowers--right { right: -2%; bottom: -26%; }
  .statement { max-width: 700px; }
}
.statement__flowers img { filter: none; }

/* Slide over: each row rides up over the one before, with a soft shadow on its leading edge */
.fx-cover { position: relative; z-index: 2; box-shadow: 0 -18px 40px rgba(43, 42, 38, .10), 0 -2px 6px rgba(43, 42, 38, .06); }
.fx-cover.section--paper-deep { background: var(--c-paper-deep); }
.fx-pin { z-index: 1; }

/* Home: the banner pins too, so the first row slides over it like the rest */
body.home .banner { position: sticky; top: 0; z-index: 1; }
body.home .banner + .section { position: relative; z-index: 2; box-shadow: 0 -18px 40px rgba(43, 42, 38, .10), 0 -2px 6px rgba(43, 42, 38, .06); }
/* …and each row's contents rise into place as it arrives */
html.fx-on body.home .section > .container > *, html.fx-on body.home .section > .statement__flowers { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s var(--ease-out); }
html.fx-on body.home .section.is-arrived > .container > *, html.fx-on body.home .section.is-arrived > .statement__flowers { opacity: 1; transform: none; }
html.fx-on body.home .section.is-arrived > .container > :nth-child(2) { transition-delay: .12s; }
html.fx-on body.home .section.is-arrived > .container > :nth-child(3) { transition-delay: .24s; }
html.fx-on body.home .section.is-arrived > .statement__flowers--left { transition-delay: .2s; transform: rotate(-6deg); }
html.fx-on body.home .section.is-arrived > .statement__flowers--right { transition-delay: .3s; transform: rotate(5deg); }
html.fx-on body.home .section > .statement__flowers--left { transform: translateY(60px) rotate(-6deg); }
html.fx-on body.home .section > .statement__flowers--right { transform: translateY(60px) rotate(5deg); }
@media (prefers-reduced-motion: reduce) { html.fx-on body.home .section > .container > *, html.fx-on body.home .section > .statement__flowers { opacity: 1; transform: none; transition: none; } }

/* Fix: a row that both slides over and is slid over must stay sticky (the shadow rule above made it relative).
   Same z-index throughout, so each later row paints over the one before. */
.fx-pin, body.home .banner + .section.fx-pin { position: sticky !important; top: var(--pin-top, 0px); z-index: 1; }
.fx-cover:not(.fx-pin) { position: relative; z-index: 1; }
body.home .banner { z-index: 0; }

/* ═══ Draft 3 (Emma's notes, 19 Oct) ═══ */

/* Home banner: a slim stone band only a little deeper than the logo, the thinnest gold edge top and bottom,
   her stocks small at the right end (rising from the bottom edge), two lines bottom left. Sits below the header. */
.banner { height: auto; margin-top: var(--header-h); padding: 18px var(--gutter); display: flex; justify-content: center; align-items: center;
  background: var(--c-stone); border-top: 1px solid var(--c-gold); border-bottom: 1px solid var(--c-gold); }
.banner__logo { position: relative; left: auto; top: auto; transform: none; height: clamp(170px, 15vw, 240px); z-index: 1; }
.banner__stocks { position: absolute; right: clamp(16px, 4vw, 72px); bottom: 0; width: clamp(220px, 24vw, 400px); height: auto; max-width: none; }
.banner__line { position: absolute; left: var(--gutter); bottom: 16px; z-index: 1; }
.banner__line p { margin: 0; font: italic 400 clamp(18px, 1.6vw, 22px)/1.3 var(--font-serif); color: var(--c-ink); letter-spacing: .02em; }
.banner__line .banner__sub { margin-top: 2px; font: 500 11px/1.4 var(--font-sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink); opacity: .8; }
@media (max-width: 760px) {
  .banner { height: auto; min-height: 0; flex-direction: column; padding: 14px 16px 12px; }
  .banner__logo { top: auto; height: 150px; }
  .banner__line { position: relative; left: auto; bottom: auto; align-self: flex-start; margin-top: 8px; max-width: 58%; }
  .banner__line p { font-size: 16px; }
  .banner__line .banner__sub { font-size: 9.5px; letter-spacing: .12em; }
  .banner__stocks { right: 0; width: 40vw; }
}

/* Open menu, right half: a soft grey panel with the invitation, four contact lines with gold symbols, and a short form */
.site-menu__panel { bottom: 0; background: var(--c-paper-deep); padding: 128px clamp(28px, 3.5vw, 56px) 40px; overflow-y: auto; pointer-events: auto; }
.site-menu__panel .site-menu__aside { gap: 22px; }
.site-menu__intro { margin: 0; font: 400 clamp(21px, 1.9vw, 27px)/1.3 var(--font-serif); color: var(--c-ink); max-width: 30ch; }
.site-menu__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-menu__facts li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--c-ink); }
.site-menu__facts svg { flex: none; color: var(--c-gold-text); }
.site-menu__facts a { color: var(--c-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-menu__facts a:hover { border-bottom-color: var(--c-gold); }
.site-menu__form { padding-top: 18px; border-top: 1px solid rgba(43, 42, 38, .14); }
.site-menu__form .form--dhd input, .site-menu__form .form--dhd textarea { background: #fff; }
.site-menu__form .form--dhd textarea { min-height: 96px; }
@media (max-width: 860px) {
  .site-menu__panel { position: static; width: 100%; padding: 28px 24px 36px; overflow: visible; }
}

/* How it works: One · Two · Three bigger, so they stand out (Emma) */
.page-artificial-flower-rental .step__title { font-size: clamp(40px, 4.4vw, 56px); line-height: 1; margin-bottom: 12px; }

/* Testimonials: two side by side, each with its five gold stars; the arrows move on by two (Emma) */
.rowx-quotes.is-carousel.is-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: clamp(32px, 5vw, 80px); }
.rowx-quotes.is-carousel.is-pairs .rowx-quote { max-width: 560px; }
.rowx-quotes.is-carousel.is-pairs .rowx-quotes__nav { grid-area: 2 / 1 / 3 / -1; }
.rowx-quotes.is-carousel.is-pairs .rowx-quote__text { font-size: clamp(20px, 1.7vw, 25px); }

/* Home, wording swapped (Emma): her four lines now sit between the cut-out flowers, set as they were between the photos —
   the first line large, the rest italic with short gold rules between */
.statement__line:has(p + p) p:first-child { font: 500 clamp(30px, 3vw, 44px)/1.12 var(--font-serif); color: var(--c-ink); margin-bottom: var(--s-4); }
.statement__line:has(p + p) p:not(:first-child) { font-size: clamp(19px, 1.6vw, 23px); color: #4A4741; padding: 14px 0; }
.statement__line:has(p + p) p:not(:first-child) + p::before { content: ""; display: block; width: 24px; height: 1px; background: var(--c-gold); margin: 0 auto 14px; }
/* The logo back to its old size in the slimmer band */
.banner__logo { height: clamp(180px, 16.6vw, 250px); }
/* Phones: the menu panel in its written order (an earlier rule reordered the old contact groups) */
@media (max-width: 860px) { .site-menu__panel .site-menu__group { order: 0 !important; } }
/* How it works: her line sits just under the four photos (Emma) */
.page-artificial-flower-rental .section:has(.rowx-gallery) { padding-bottom: 0; }
.page-artificial-flower-rental .section:has(.rowx-gallery) + .section { padding-top: var(--s-4); }
/* The slim band pins just under the (scrolled) header, so it stays whole while the first row slides over it */
body.home .banner { top: 84px; }

/* ═══ Draft 4 (Emma's notes, 19 Oct) ═══ */

/* Home: her small logo back top left, opposite the trial button */
body.has-hero .site-header:not(.site-header--scrolled) .brand { visibility: visible; }
/* The band a touch slimmer again */
.banner { padding-block: 14px; }
@media (max-width: 760px) { .banner { padding-block: 11px 10px; } }

/* Home: the numbers straight under the band, centred between gold lines that run from the end of the
   band's lettering to the start of the stocks */
body.home .section:has(.stats) { padding-block: clamp(26px, 3vw, 40px); }
body.home .section:has(.stats) .container { max-width: 48vw; border-block: 1px solid var(--c-gold); padding: 0; }
body.home .section:has(.stats) .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.home .section:has(.stats) .stat { padding: 16px 10px; text-align: center; }
body.home .section:has(.stats) .stat + .stat { border-left: 1px solid rgba(196, 164, 125, .5); border-top: 0; }
body.home .section:has(.stats) .stat__n { font-size: clamp(30px, 2.8vw, 44px); font-variant-numeric: tabular-nums; }
body.home .section:has(.stats) .stat__label { margin-top: 6px; font-size: 10.5px; letter-spacing: .16em; }
@media (max-width: 1199px) { body.home .section:has(.stats) .container { max-width: calc(100% - 2 * var(--gutter)); } }
@media (max-width: 760px) {
  body.home .section:has(.stats) .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home .section:has(.stats) .stat:nth-child(3) { border-left: 0; }
  body.home .section:has(.stats) .stat:nth-child(n+3) { border-top: 1px solid rgba(196, 164, 125, .5); }
}

/* Offices: the benefits section moved from the home page, styled as it was there */
.page-office-flowers .split__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 0; }
.page-office-flowers .split__list li { padding: 13px 0 13px 28px; border-bottom: 1px solid var(--c-line); font-size: 15.5px; color: var(--c-ink); }
.page-office-flowers .split__list li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 11px; height: 6px; border-left: 1.5px solid var(--c-gold-text); border-bottom: 1.5px solid var(--c-gold-text); transform: rotate(-45deg); background: none; border-radius: 0; }
.page-office-flowers .split__list li::after { display: none; }
@media (max-width: 600px) { .page-office-flowers .split__list { grid-template-columns: 1fr; } }
body.home .section:has(.stats) .stat__label { margin-bottom: 0; }
body.home .section:has(.stats) .stat { display: flex; flex-direction: column; justify-content: center; }

/* ═══ Draft 6 (Emma's notes, 20 Oct) ═══ */

/* Home, between the two photos: the wording a little smaller and softer (Emma: "too big and harsh") */
.trio__words .section__title { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.18; }
.trio__prose p:first-child { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; font-weight: 400; }

/* Free trial: One · Two · Three as on How it works */
.page-free-trial .step__title { font-size: clamp(40px, 4.4vw, 56px); line-height: 1; margin-bottom: 12px; }

/* About: the photo with the four gold-edged boxes beside it (theme row "photocards") */
.split--cards { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
.split--cards .split__media { aspect-ratio: 4 / 5; max-width: 440px; justify-self: center; width: 100%; }
.split--cards .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: var(--s-3); }
.split--cards .pillar__title { font-size: 21px; }
@media (max-width: 860px) {
  .split--cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .split--cards .pillars { grid-template-columns: 1fr; } }

/* Home numbers: the gentle change when a figure switches to one higher and back (theme.js) */
@keyframes stat-flick { 0% { opacity: .15; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.stat__n.is-flick { animation: stat-flick .9s var(--ease-out); }

/* Home photos without the white mount, to match the photos on every other page (Emma, 21 Oct) */
.trio__side img { border: 0; outline: 0; }

/* 22 Oct — the gold ticks band (rows-aflorist.php "ticks"): about 2cm of soft grey, gold hairlines top and bottom */
.section.ticks-row { padding-block: 0; background: var(--c-paper-deep); border-block: 1px solid var(--c-gold); }
.ticks { list-style: none; margin: 0; padding: 0; min-height: 76px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px clamp(28px, 4.5vw, 64px); }
.ticks li { position: relative; padding-left: 26px; font-family: var(--font-serif); font-size: clamp(17px, 1.5vw, 21px); color: var(--c-ink); white-space: nowrap; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 12px; height: 6px; margin-top: -6px; border-left: 1.6px solid var(--c-gold-text); border-bottom: 1.6px solid var(--c-gold-text); transform: rotate(-45deg); }
@media (max-width: 640px) { .ticks { padding-block: 16px; gap: 10px 22px; } .ticks li { font-size: 16px; } }
body.home .section.ticks-row { padding-block: 0; }
/* 22 Oct: the banner flowers (Hero Slider image) sized by the band's height, so any shape of cut-out fits */
.banner__stocks { height: 92%; width: auto; max-width: 36%; object-fit: contain; object-position: right bottom; }
@media (max-width: 760px) { .banner__stocks { height: 50%; width: auto; max-width: 34vw; } }