/* ==========================================================================
   Moss & Meadow Botanical Workshops - "Painted Meadow" derivative stylesheet
   Folk-art gouache world after the painted-wildflower reference artwork:
   muted olive grounds bordered with dense hand-painted wildflower clusters,
   cream reading panels floating on the olive, soft multi-hue script display
   lettering (pinks, butters, creams), and small painted fauna (bee,
   butterflies, goldfinch) tucked into the florals.
   Flora and fauna are original hand-authored SVGs in assets/flora/.
   Fonts bundled locally (OFL): Cormorant Garamond, Jost, Dancing Script.
   ========================================================================== */

/* ---------- Fonts ---------- */

@import url('https://fonts.googleapis.com/css2?family=Parisienne&family=Lato&display=swap');

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-garamond-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-garamond-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/jost-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/jost-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Dancing Script';
  src: url('../assets/fonts/dancing-script-var.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* brights */
  --cream: #FBF8F0;        /* page body */
  --cream-dark: #F3EEE0;   /* alternate band */
  --sage-band: #EAF1E1;    /* soft green band */
  --floral-band: #F8EEE5;  /* warm terracotta-tint band */
  --card: #FFFFFF;

  /* greens */
  --forest: #3F4526;       /* header / footer band: the painting's deep olive */
  --forest-deep: #343A1F;
  --olive: #73774B;        /* the artwork's mid olive ground for painted bands */
  --leaf: #3B7A4A;         /* primary accent */
  --leaf-deep: #2C5E38;    /* hover */
  --sage: #7E9A6D;         /* quiet accent */
  --leaf-tint: #E3EDDF;

  /* warms: the painting's rose-pink takes the old terracotta role */
  --terracotta: #EC9EA8;
  --terracotta-deep: #C8868F;
  --terracotta-tint: #FCE7EA;

  /* pastel lettering hues from the painted quote */
  --script-pink: #F5CBD7;
  --script-butter: #F2D98A;
  --script-cream: #F6E7C4;

  /* nature brights: butter yellow, sky, bloom pink, lavender */
  --butter: #D99E22;
  --butter-deep: #7A5710;
  --butter-band: #FAF0D4;
  --butter-tint: #FBE9A6;
  --sky: #4A7C9B;
  --sky-deep: #35617C;
  --sky-band: #E4EEF3;
  --bloom: #B25572;
  --bloom-deep: #8F3F59;
  --bloom-band: #F8E8ED;
  --lavender: #6F5F94;
  --lavender-deep: #574A77;
  --lavender-band: #EDEAF4;

  /* neutrals */
  --ink: #2B3327;
  --ink-soft: #59624F;
  --line: #E0D9C6;
  --line-dark: #565C33;
  --cream-on-dark: #F4EFE2;
  --sage-on-dark: #C9CFA0;

  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Jost', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --font-script: 'Parisienne', 'Snell Roundhand', 'Brush Script MT', cursive;

  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 2px 6px rgba(43, 51, 39, 0.06), 0 12px 28px rgba(43, 51, 39, 0.08);
  --wrap: 1140px;
  --wrap-narrow: 780px;
}

/* ---------- Reset / base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 380;
  font-size: 1.04rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
  margin: 0 0 0.45em;
}

/* Modest headline sizes on purpose: no oversized statements. */
h1 { font-size: clamp(2.05rem, 3.6vw, 2.9rem); }
h2 { font-size: clamp(1.65rem, 2.7vw, 2.25rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.12rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--leaf-deep); text-decoration-color: rgba(59, 122, 74, 0.45); text-underline-offset: 3px; }
a:hover { color: var(--terracotta); }

ul { margin: 0 0 1em; padding-left: 1.2em; }

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

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

/* ---------- Layout helpers ---------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

.section { padding: 4.2rem 0; }
.section-tight { padding: 2.6rem 0; }

.band-cream-dark { background: var(--cream-dark); }
.band-sage { background: var(--sage-band); }
.band-floral { background: var(--floral-band); }
.band-butter { background: var(--butter-band); }
.band-sky { background: var(--sky-band); }
.band-forest { background: var(--forest); color: var(--cream-on-dark); }
.band-forest h2, .band-forest h3 { color: var(--cream-on-dark); }
.band-forest a { color: var(--sage-on-dark); }
.band-forest a:hover { color: var(--cream-on-dark); }

.pill-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6em; }
.pill-row.center-row { justify-content: center; }

.mt-0 { margin-top: 0; } .mt-2 { margin-top: 1.2rem; } .mt-3 { margin-top: 2rem; } .mt-4 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }

/* ---------- Type accents ---------- */

/* The script accent: beautiful but legible, used for eyebrows and short
   highlight lines only - never for body copy. */
.script {
  font-family: var(--font-script);
  font-weight: 500;
  color: var(--terracotta);
  font-size: 1.55rem;
  line-height: 1.3;
  display: block;
  margin-bottom: 0.35em;
}
.script-lg { font-size: clamp(1.7rem, 2.6vw, 2.15rem); }
.script-community-groups { font-size: 2.35rem; color: var(--forest); }
.script-leaf { color: var(--leaf-deep); }
.band-forest .script, .site-footer .script { color: var(--sage-on-dark); }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 0.9em;
}
.band-forest .eyebrow { color: var(--sage-on-dark); }

.serif-i { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.22rem; }

.lede { font-size: 1.13rem; color: var(--ink-soft); }

.fine, .footnote { font-size: 0.86rem; color: var(--ink-soft); }

.sample-tag {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--cream-dark);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1em 0.8em;
}

/* Highlighted keep-line: warm serif italic with a hand-highlighter wash */
.pull-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.6;
  color: var(--leaf-deep);
  margin: 1.4em 0;
}
.pull-line > span {
  background: linear-gradient(transparent 62%, var(--butter-tint) 62%, var(--butter-tint) 96%, transparent 96%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Founder fill-in blanks: butter highlight she can spot and replace */
mark.fill-in {
  background: var(--butter-tint);
  color: var(--butter-deep);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.9em;
  font-weight: 460;
  border-radius: 6px;
  padding: 0.08em 0.34em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

.btn, .btn-outline, .btn-light, .btn-terracotta {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.72em 1.7em;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.btn { background: var(--leaf); color: #fff; }
.btn:hover { background: var(--leaf-deep); color: #fff; }
.btn-terracotta { background: var(--terracotta); color: #fff; }
.btn-terracotta:hover { background: var(--terracotta-deep); color: #fff; }
.btn-outline { border-color: var(--leaf); color: var(--leaf-deep); background: transparent; }
.btn-outline:hover { background: var(--leaf-tint); color: var(--leaf-deep); }
.band-forest .btn-outline, .btn-light-outline {
  border-color: var(--cream-on-dark); color: var(--cream-on-dark); background: transparent;
}
.band-forest .btn-outline:hover, .btn-light-outline:hover { background: rgba(244, 239, 226, 0.14); color: #fff; }
.btn-light { background: var(--cream-on-dark); color: var(--forest); }
.btn-light:hover { background: #fff; color: var(--forest); }

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

.site-header {
  background: #2a6160;
  color: var(--cream-on-dark);
  position: relative;
  z-index: 40;
}
.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--cream-on-dark);
  margin-right: auto;
  margin-left: -96px;
}
.brand:hover { color: #fff; }
/* badge-cream.png is cream line art on transparency, drawn to read against the
   deep-olive header - so no disc behind it (a cream chip made it invisible). */
.brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.28; }
.brand-name {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.brand-tag {
  display: block;
  text-align: center;
  text-transform: capitalize;
  font-family: var(--font-sans);
  font-weight: 420;
  font-size: 0.82rem;
  color: var(--cream-on-dark);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: calc(18px + 0.1in);
  position: relative;
  left: -0.1875in;
}
.site-nav > a {
  text-align: center;
  line-height: 1.15;
  color: var(--cream-on-dark);
  text-decoration: none;
  font-weight: 420;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.site-nav > a:hover { color: #fff; border-bottom-color: var(--sage-on-dark); }
.site-nav > a[aria-current="page"] { color: #fff; border-bottom-color: var(--terracotta); }
.site-nav > a.nav-cta {
  background: var(--terracotta);
  color: #fff;
  border-radius: 999px;
  padding: 0.55em 1.4em;
  border-bottom: none;
  margin-left: 0.625in;
}
.site-nav > a.nav-cta:hover { background: var(--terracotta-deep); }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--sage-on-dark);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream-on-dark);
  margin: 5px 0;
  transition: transform 0.2s ease;
}

/* ---------- Page hero (inner pages - bright, never dark) ---------- */

.page-hero {
  background: var(--sage-band);
  padding: 3.6rem 0 3.2rem;
  border-bottom: 1px solid var(--line);
}
.page-hero.hero-floral { background: var(--floral-band); }
.page-hero.hero-plain { background: var(--cream-dark); }

/* Category hues: each audience carries one nature color across tiles,
   heroes, and accents (wayfinding, not decoration). */
.hue-sky      { --hue: var(--sky);      --hue-deep: var(--sky-deep);      --hue-band: var(--sky-band); }
.hue-lavender { --hue: var(--lavender); --hue-deep: var(--lavender-deep); --hue-band: var(--lavender-band); }
.hue-bloom    { --hue: var(--bloom);    --hue-deep: var(--bloom-deep);    --hue-band: var(--bloom-band); }
.hue-butter   { --hue: var(--butter);   --hue-deep: var(--butter-deep);   --hue-band: var(--butter-band); }
.hue-leaf     { --hue: var(--leaf);     --hue-deep: var(--leaf-deep);     --hue-band: var(--leaf-tint); }
/* workplaces keeps true terracotta so it stays distinct from rose/bloom */
.hue-terra    { --hue: #BC5F3B; --hue-deep: #9E4C2C; --hue-band: #F6E3D8; }

.page-hero.hued { background: var(--hue-band); }
.page-hero.hero-bg-watercolor {
  background: #ffffff;
}
.hero-accent-left {
  position: absolute;
  z-index: 0;
  top: -88px;
  left: -58px;
  width: 800px;
}
.hero-text-narrow {
  max-width: 480px;
  margin-left: 72px;
}
.section2-bg-watercolor-v2 {
  position: relative;
  overflow: hidden;
  background-image: url('../assets/backgrounds/workplaces-section2-bg-v2.svg');
  background-size: 208% 208%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.section2-corner-tr {
  position: absolute;
  z-index: 0;
  top: -35px;
  right: -134px;
  width: 600px;
}
.section2-corner-tl {
  position: absolute;
  z-index: 0;
  top: -59px;
  right: -98px;
  width: 800px;
}
.hero-corner-tl {
  position: absolute;
  z-index: 1;
  top: -47px;
  left: -293px;
  width: 750px;
  transform: rotate(-5deg);
  transform-origin: top left;
}
.page-hero.hued .script { color: var(--hue-deep); }
.page-hero .lede { max-width: 46em; }
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 44px;
  align-items: center;
}
.page-hero-grid .img-rounded { box-shadow: var(--shadow); }
.page-hero-grid .photo-frame img { aspect-ratio: 4 / 3; }

/* ---------- Home hero ---------- */

/* Home hero lives on the painting's olive ground (band-olive + flora classes
   in the markup); copy floats on a cream panel. */
.hero-split {
  padding: 3.6rem 0 3.8rem;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
.hero-photo img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}
.hero-photo { position: relative; }
.hero-photo .photo-note {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(251, 248, 240, 0.92);
  color: var(--ink);
  border-radius: 999px;
  font-size: 0.85rem;
  padding: 0.35em 1.1em;
  box-shadow: var(--shadow);
}

/* ---------- Images ---------- */

.img-rounded { border-radius: var(--radius-lg); }
/* NO arch-shaped masks anywhere - soft rounded corners only. */

.photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.photo-frame-bordered {
  border: 6px solid var(--terracotta-deep);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 2.4rem;
}
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.workshop-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.workshop-card > img, .workshop-card .photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.workshop-card .photo { position: relative; }
.workshop-card .flag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(251, 248, 240, 0.94);
  color: var(--leaf-deep);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 0.25em 0.95em;
}
.card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { margin-bottom: 0; }
.card-body .who {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--terracotta);
  font-size: 1.05rem;
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.2em 0 0.4em;
}
.card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.card-body p { font-size: 0.97rem; }
.card-link {
  margin-top: auto;
  font-weight: 500;
  text-decoration: none;
  color: var(--leaf-deep);
}
.card-link:hover { color: var(--terracotta); }
.card-link::after { content: ' \2192'; }

/* ---------- Category tiles (who we serve) ---------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 2.4rem;
}
.cat-tile {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cat-tile:hover { transform: translateY(-3px); color: var(--ink); box-shadow: 0 4px 10px rgba(43,51,39,0.09), 0 18px 38px rgba(43,51,39,0.12); }
.cat-tile img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cat-tile-body { padding: 18px 22px 22px; background: linear-gradient(var(--hue-band, var(--card)), var(--card) 78%); }
.cat-tile-body .script { font-size: 1.42rem; margin-bottom: 0.1em; color: var(--hue-deep, var(--terracotta)); }
.cat-tile-body h3 { font-size: 1.28rem; margin-bottom: 0.3em; }
.cat-tile-body p { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 0.6em; }
.cat-tile-body .card-link { font-size: 0.95rem; }

/* ---------- Steps (how it works) ---------- */

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 2.6rem;
  counter-reset: step;
}
.step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 26px;
  position: relative;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--leaf);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.35rem;
  margin-bottom: 14px;
}
/* The three steps walk through the garden palette. */
.step:nth-child(2) .step-num { background: var(--terracotta); }
.step:nth-child(3) .step-num { background: var(--butter-deep); }
.step h3 { font-size: 1.3rem; }
.step p { font-size: 0.97rem; color: var(--ink-soft); }

/* ---------- Feature rows (split photo/text) ---------- */

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
.feature-row p { text-wrap: pretty; }
.feature-row + .feature-row { margin-top: 4rem; }
.feature-row .photo-frame img { aspect-ratio: 4 / 3; }
.row-flip .photo-frame { order: 2; }
.wp-section2-shift-left > .wrap { transform: translateX(-96px); }
.wp-section2-shift-left .feature-row .photo-frame { max-width: 85%; margin-left: 48px; }
.wp-section2-shift-left .feature-row > div:last-child { max-width: 100%; margin-left: -24px; }

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

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-top: 2.2rem;
  text-align: left;
}
.trust-item .serif-i { display: block; width: 100%; text-align: center; color: var(--leaf-deep); margin-bottom: 0.4em; }
.trust-grid .trust-item:nth-child(2) .serif-i { color: var(--terracotta-deep); }
.trust-grid .trust-item:nth-child(3) .serif-i { color: var(--sky-deep); }
.trust-item p { font-size: 0.96rem; color: var(--ink-soft); text-align: center; }

/* ---------- Quick answers (3-column FAQ) ---------- */

.quick-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 36px;
  margin-top: 2.4rem;
  text-align: left;
}
.quick-grid .quick-item {
  flex: 0 0 calc((100% - 72px) / 3);
}
.quick-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px;
}
.quick-item .serif-i { display: block; color: var(--leaf-deep); margin-bottom: 0.45em; }
.quick-item p { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Notice / safety boxes ---------- */

.notice-box {
  background: var(--leaf-tint);
  border: 1px solid rgba(59, 122, 74, 0.25);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 1.4em 0;
  font-size: 0.96rem;
}
.notice-box h4 { margin-bottom: 0.35em; }
.notice-warm {
  background: var(--terracotta-tint);
  border-color: rgba(176, 74, 102, 0.3);
}
.notice-box p { color: var(--ink-soft); }
.notice-box p:last-child { margin-bottom: 0; }

/* ---------- Logistics list (workshop cards / catalog) ---------- */

.logi {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  font-size: 0.95rem;
  margin: 0.6em 0 1em;
}
.logi dt { font-weight: 500; color: var(--leaf-deep); }
.logi dd { margin: 0; color: var(--ink-soft); }

/* Check list with inline markers (never absolute ::before in columns) */
.check-list { list-style: none; padding-left: 0; }
.check-list li {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 0.45em;
}
.check-list li::before {
  content: '\2713\00a0\00a0';
  color: var(--leaf);
  font-weight: 600;
}

/* ---------- Forms (the green form panel she liked) ---------- */

.form-panel {
  background: var(--sage-band);
  border: 1px solid rgba(59, 122, 74, 0.22);
  border-radius: var(--radius-lg);
  padding: 34px 34px 38px;
  box-shadow: var(--shadow);
}
.field { margin-bottom: 1.25em; }
.field label {
  display: block;
  font-weight: 500;
  font-size: 0.93rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.35em;
  color: var(--ink);
}
.field .req { color: var(--terracotta); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0.65em 0.9em;
  transition: border-color 0.15s ease;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(59, 122, 74, 0.18);
}
.field-error {
  display: none;
  color: var(--terracotta-deep);
  font-size: 0.86rem;
  margin: 0.3em 0 0;
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--terracotta); }
.field.invalid .field-error { display: block; }

.form-wrap .form-success { display: none; }
.form-wrap.submitted form { display: none; }
.form-wrap.submitted .form-success {
  display: block;
  background: var(--leaf-tint);
  border: 1px solid rgba(59, 122, 74, 0.3);
  border-radius: var(--radius-lg);
  padding: 34px;
}

/* ---------- CTA band ---------- */

.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 0.3em; }
.cta-band .lede { max-width: 42em; margin-left: auto; margin-right: auto; color: var(--sage-on-dark); }

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

.site-footer {
  background: #2a6160;
  color: var(--cream-on-dark);
  padding: 2.2rem 0 0;
  margin-top: -48px;
  position: relative;
  z-index: 1;
}
.footer-grid {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  text-align: center;
}
.footer-flock { justify-content: center; }
.footer-grid .sample-tag {
  font-size: 0.62rem;
  padding: 0.05em 0.55em;
  vertical-align: middle;
}
.footer-grid-3col {
  max-width: 900px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transform: translateY(-48px);
}
.footer-logo-col { display: flex; justify-content: center; margin-top: 72px; }
.footer-say-hello-shift { transform: translateX(-96px) translateY(24px); }
.footer-about-shift { transform: translateX(96px) translateY(48px); }
.footer-badge { width: 108px; margin-bottom: 16px; }
.footer-badge-large { width: 170px; }
.footer-grid p { font-size: 0.92rem; color: var(--sage-on-dark); }
p.footer-heading {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--sage-on-dark);
  margin: 24px 0 0.7em;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.45em; }
.footer-links a {
  color: var(--sage-on-dark);
  text-decoration: none;
  font-size: 0.95rem;
}
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  margin-top: calc(2.8rem - 48px);
  padding: 1.4rem 0 1.6rem;
}
.footer-bottom-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  font-size: 0.84rem;
  color: var(--sage-on-dark);
}
.footer-bottom-inner p { margin-bottom: 0.4em; }

/* ---------- Reveal on scroll ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in-view { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cat-tile { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .card-grid, .tile-grid, .step-grid, .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-grid .quick-item { flex: 0 0 calc((100% - 36px) / 2); }
  .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--forest);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 24px 22px;
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18);
  }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav > a { padding: 10px 0; font-size: 1.05rem; }
  .site-nav > a.nav-cta { margin-top: 10px; }
  .nav-toggle { display: block; }
  .hero-grid, .page-hero-grid, .feature-row { grid-template-columns: 1fr; gap: 30px; }
  .row-flip .photo-frame { order: 0; }
  .hero-photo img { min-height: 260px; }
}

@media (max-width: 640px) {
  .section { padding: 3rem 0; }
  .card-grid, .tile-grid, .step-grid, .trust-grid, .card-grid-2, .card-grid-4 { grid-template-columns: 1fr; }
  .quick-grid .quick-item { flex: 0 0 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .brand-name { font-size: 1.22rem; }
  .brand-logo { width: 44px; height: 44px; }
  .form-panel { padding: 26px 20px 30px; }
}

/* ==========================================================================
   Painted Meadow components: olive grounds, flora borders, cream panels,
   multi-hue script display lettering, painted fauna.
   ========================================================================== */

/* ---------- Olive ground bands ---------- */

.band-olive {
  background: var(--olive);
  color: #FFFFFF;
}
.band-olive h2, .band-olive h3 { color: var(--cream-on-dark); }
.band-olive .script { color: #4A5D42; }
.band-olive .lede { color: #4A5D42; }
.band-olive .serif-i { color: var(--script-cream); }
/* Links never sit bare on the olive ground; inside panels and cards they
   keep their normal colors, so no generic band-olive link rule. */
.panel-cream a { color: var(--leaf-deep); }
.panel-cream a:hover { color: var(--terracotta); }
.panel-cream .btn-outline { border-color: var(--leaf); color: var(--leaf-deep); }
.panel-cream .btn-outline:hover { background: var(--leaf-tint); color: var(--leaf-deep); }

/* Component color re-asserts: on-dark band color rules must never leak into
   buttons, panels, or tiles nested inside those bands (cascade-order fixes;
   these sit last on purpose). */
.panel-cream a.btn, .panel-cream a.btn:hover { color: #fff; }
.band-forest a.btn-light, .band-olive a.btn-light { color: var(--forest); }
.band-forest a.btn-light:hover, .band-olive a.btn-light:hover { color: var(--forest); background: #fff; }
.band-olive .cat-tile h3 { color: var(--ink); }
.band-olive .cat-tile p { color: var(--ink-soft); }
.band-olive .cat-tile-body .script { color: var(--hue-deep, var(--terracotta)); }
.band-olive .cat-tile .card-link { color: var(--leaf-deep); }
.band-forest .script { color: #ffffff; }

/* ---------- Botanical decorations (Redouté plates, assets/flowers/) ---------- */

.flora { position: relative; overflow: hidden; }
.flora > .wrap, .flora > .wrap-narrow { position: relative; z-index: 1; }

.flora-bottom { padding-bottom: 3.2rem; }
.flora-top { padding-top: 3.2rem; }

/* Corner bouquets: Redouté plate PNGs anchored to a section corner,
   softly faded so text stays readable; mirrored with scaleX as needed. */
.corner {
  position: absolute;
  width: clamp(150px, 18vw, 260px);
  height: auto;
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}
.corner-tl { top: -24px; left: -18px; }
.corner-tr { top: -24px; right: -18px; transform: scaleX(-1); }
.corner-br { bottom: -24px; right: -18px; }
.corner-bl { bottom: -24px; left: -18px; transform: scaleX(-1); }

/* Small botanical plate used as a quiet divider on cream sections */
.sprig-divider { width: 92px; margin: 0 auto 1.1rem; }

/* ---------- Cream reading panels over the olive ground ---------- */

.panel-cream {
  position: relative;
  z-index: 1;
  background: #FDFAF0;
  border: 1px solid rgba(224, 217, 198, 0.85);
  border-radius: var(--radius-lg);
  padding: 30px 34px;
  box-shadow: 0 3px 8px rgba(52, 58, 31, 0.14), 0 18px 40px rgba(52, 58, 31, 0.16);
  color: var(--ink);
}
.panel-cream .lede { color: var(--ink-soft); }
.panel-cream .script { color: var(--terracotta); }

.hero-center-title {
  transform: translateY(-96px);
}
.panel-cream-wide {
  transform: translateY(-240px);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.panel-cream-wide .pill-row {
  justify-content: center;
}
.panel-cream-wide .lede {
  font-size: 0.93rem;
  font-family: 'Lato', sans-serif;
}
.hero-lede-underlined {
  position: relative;
  display: inline-block;
  padding-bottom: 38px;
}
.hero-lede-underlined::after {
  content: "";
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 14px;
  border-bottom: 2px solid #4A5D42;
}

/* ---------- Multi-hue script display lettering ---------- */

.display-script {
  display: block;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: clamp(2.45rem, 4.8vw, 3.65rem);
  line-height: 1.34;
  color: var(--terracotta);
  margin: 0 0 0.4em;
}
.display-lato {
  display: block;
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 3.6vw, 2.45rem);
  line-height: 1.25;
  color: var(--lavender-deep);
  margin: 0 0 0.4em;
}
.hero-split .display-script,
.band-olive .display-script { color: #4A5D42; }
.band-forest .display-script { color: #FFFFFF; }
.page-hero .display-script { color: var(--hue-deep, var(--terracotta)); }

/* ---------- Painted fauna (bee, butterflies, goldfinch) ---------- */

.fauna {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  transform: rotate(var(--tilt, -6deg));
}
.fauna-float { animation: fauna-drift 7s ease-in-out infinite alternate; }
@keyframes fauna-drift {
  from { transform: translateY(0) rotate(var(--tilt, -6deg)); }
  to { transform: translateY(-9px) rotate(calc(var(--tilt, -6deg) + 5deg)); }
}
.fauna-hero-butterfly {
  top: 26px;
  right: 4%;
  width: clamp(64px, 8vw, 96px);
  --tilt: -10deg;
}
.cta-bee {
  display: inline-block;
  vertical-align: middle;
  width: 56px;
  align-self: center;
  margin-left: 4px;
  transform: rotate(12deg);
}
.footer-flock { display: flex; align-items: flex-end; gap: 2px; margin-bottom: 16px; }
.footer-flock .footer-badge { margin-bottom: 0; }
.footer-finch { width: 92px; margin-left: -4px; }

@media (prefers-reduced-motion: reduce) {
  .fauna-float { animation: none; }
}

/* ---------- Ink line-art border bands (home page only) ---------- */

/* The bands frame the page from the INSIDE: they are overlays pinned to the
   top and bottom of the content area, and the foliage grows inward over the
   page rather than outward off it. They overlay `main` rather than the whole
   body so the header nav stays fully legible (a binding founder rule).
   The artwork is the CREAM colorway of the tile (both colorways come from the
   same generator) because the bands lie over the olive hero and the deep-olive
   CTA band, where dark ink would disappear. It is a plain background-image,
   NOT a CSS mask: Chrome fetches mask images with CORS, which fails on
   file://, and the site must stay double-click openable. The bands the
   foliage reaches into are padded by --ink-band, so the artwork sits in clear
   ground instead of across the copy. */

:root { --ink-band: clamp(96px, 11vw, 172px); }

.ink-framed { position: relative; }

.ink-border {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--ink-band);
  pointer-events: none;
  z-index: 3;
  opacity: 0.85;
  background: url('../assets/flowers/new-flower.svg')
    repeat-x bottom center / auto 110%;
}
/* Top band: flip so the flowers hang down into the page from the top edge. */
.ink-border-top { display: none; }
/* Bottom band: flip so it mirrors the top band along the bottom edge. */
.ink-border-bottom { bottom: 19px; transform: scaleY(-1); }

/* Clear ground for the foliage to reach into at each end of the content. */
.ink-framed .hero-split { padding-top: calc(3.6rem + var(--ink-band)); }
.ink-framed > .cta-band:last-child { padding-bottom: calc(4.2rem + var(--ink-band)); }

/* ---------- Painted Meadow responsive ---------- */

@media (max-width: 900px) {
  .flora-bottom { padding-bottom: 2.4rem; }
  .flora-top { padding-top: 2.4rem; }
  .corner { width: clamp(110px, 24vw, 180px); }
  .display-script { font-size: clamp(2.2rem, 6.4vw, 2.9rem); }
}

@media (max-width: 640px) {
  .cta-bee { width: 46px; }
  .fauna-hero-butterfly { width: 58px; top: 12px; right: 10px; }
  .panel-cream { padding: 24px 20px; }
  .footer-finch { width: 78px; }
}

.hero-split,
.page-hero.hero-floral {
  background: url('../assets/backgrounds/home-bg.svg') no-repeat center -277px / calc(100% + 151px) auto;
}

#who-we-serve {
  background: url('../assets/backgrounds/section3-bg.svg') no-repeat center / cover;
}

.section3-overlay {
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  width: 314px;
}

.section3-overlay-tl {
  position: absolute;
  z-index: 0;
  top: -179px;
  left: -127px;
  width: 2200px;
}

.cta-band {
  background: #2a6160;
}

#want-the-details {
  background: url('../assets/backgrounds/section2-bg.svg') no-repeat center -161px / cover;
}
#want-the-details > .wrap-narrow {
  transform: translateY(-38px);
}

#second-section {
  background: url('../assets/backgrounds/section2-bg.svg') no-repeat center / cover;
}

.hero-center-title {
  display: block;
  text-align: center;
  margin: 0 auto 1.4rem;
  font-size: clamp(4.1rem, 6vw, 5.3rem);
  line-height: 1.15;
  color: #4A5D42;
}
.hero-center-mainline {
  display: inline-block;
  transform: translateY(-72px);
}
.hero-center-subtitle {
  display: inline-block;
  transform: translateY(calc(-1.55em - 48px));
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: clamp(2.16rem, 2.88vw, 2.52rem);
}

#we-come-to-you {
  background: var(--sage-band);
}

#hiw-fourth-section {
  background: var(--cream);
}

.who-we-serve-heading {
  display: inline-block;
  transform: translateY(-240px);
  font-size: 3.35rem;
  font-weight: 500;
}

.band-olive .cat-tile-body .therapeutic-horticulture-label {
  display: block;
  text-align: center;
  color: #B04A66;
  font-family: 'Lato', sans-serif;
}

.band-olive .cat-tile-body .celebrations-parties-label {
  display: block;
  text-align: center;
  color: #B04A66;
  font-family: 'Lato', sans-serif;
}

.hero-overlay-tr {
  position: absolute;
  z-index: 0;
  top: 0.25in;
  right: 0;
  width: 780px;
}

.therapeutic-horticulture-heading {
  font-family: 'Lato', sans-serif;
  font-size: clamp(1.25rem, 3.6vw, 2.45rem);
  text-align: center;
}

#therapeutic-horticulture-hero {
  background: url('../assets/backgrounds/support-groups-bg.svg') no-repeat center / cover;
  padding: 3rem 0 2.6rem;
}

.hero-text-shift-up {
  transform: translateY(0);
}

#who-it-serves-section {
  position: relative;
  overflow: hidden;
  background: url('../assets/backgrounds/support-groups-section2-bg.svg') no-repeat center / cover;
}

.section2-leaf-right {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -136px;
  transform: translateY(calc(-50% - 60px));
  width: 736px;
}

.section2-shift-left {
  transform: translateX(-48px);
}

.intro-shift-down {
  margin-top: 1.5em;
}

.hero-overlay-tl {
  position: absolute;
  z-index: 0;
  top: 18px;
  left: -268px;
  width: 624px;
}

.hero-content-shift-right {
  transform: translateX(96px);
}

.fully-adaptable-heading {
  font-family: 'Parisienne', cursive;
  font-weight: 400;
  color: #4A5D42;
}

.childrens-subheading {
  font-family: 'Parisienne', cursive;
  font-weight: 400;
  font-size: 2.0rem;
  color: #574A77;
  margin-top: 48px;
}
.childrens-subheading a {
  color: inherit;
}

#sessions-look-like-section {
  position: relative;
  background: #A9D4BE;
  padding-top: 5.4rem;
  padding-bottom: 6rem;
}

.sessions-bottom-strip {
  position: absolute;
  z-index: 0;
  top: -136px;
  left: 50%;
  width: 62%;
  transform: translateX(-50%);
}

.feature-row .photo-frame img.tulips-photo-contain {
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
}

.tulips-photo-frame {
  max-width: 50%;
  margin: 0 auto;
}

.succulent-photo-position {
  object-position: center 25%;
}

.session-looks-like-heading {
  font-family: 'Parisienne', cursive;
  font-weight: 400;
  margin-top: 112px;
  font-size: clamp(1.65rem, 2.7vw, 2.25rem);
}

.sessions-content-shift-down {
  margin-top: 72px;
}

.sessions-intro-shift-down {
  margin-top: 12px;
}

.sessions-boxes-hold-position {
  margin-top: 40px;
}

.sessions-boxes-hold-position .step {
  padding: 22px 20px;
  font-size: 0.94em;
}
.sessions-boxes-hold-position .step:nth-child(1) .step-num { background: #2a6160; }
.sessions-boxes-hold-position .step:nth-child(2) .step-num { background: #EC9EA8; }
.sessions-boxes-hold-position .step:nth-child(3) .step-num { background: #82B074; }

.quick-word-note {
  color: var(--ink-soft);
  margin-top: calc(2rem + 24px);
}

/* ==========================================================================
   RESPONSIVE LAYER
   ---------------------------------------------------------------------------
   The desktop composition is built from hand-tuned offsets: translateY/X pulls
   in this stylesheet, plus per-page inline nudges in inches and fixed-width
   decorative overlays. All of those assume a wide canvas, so on a phone they
   collide, cover text, or push the layout sideways.

   Everything below is scoped to <= 900px and leaves the desktop design alone.
   !important is used deliberately: inline style attributes would otherwise win
   over these media queries.
   ========================================================================== */

/* No sideways scroll: one overflowing decoration otherwise shrinks the
   whole page on a phone. */
/* body already sets overflow-x: hidden; keep the guard off <html> so it
   does not become a second scroll container. */
body { max-width: 100%; }
img, svg { max-width: 100%; height: auto; }

@media (max-width: 900px) {

  /* --- 1. Unwind desktop composition shifts ---------------------------- */
  /* These pull elements up/sideways into place on a wide screen; on a narrow
     one they stack on top of each other. */
  .hero-center-title,
  .panel-cream-wide,
  .who-we-serve-heading,
  .footer-grid-3col,
  .footer-say-hello-shift,
  .footer-about-shift,
  .section2-shift-left,
  .hero-content-shift-right,
  .hero-text-shift-up,
  .wp-section2-shift-left > .wrap,
  #want-the-details > .wrap-narrow,
  main [style*="translateX"],
  main .wrap[style],
  main .wrap-narrow[style] {
    transform: none !important;
  }
  .footer-logo-col { margin-top: 24px !important; }

  /* --- 2. One column ---------------------------------------------------- */
  /* Inline grid-template-columns beat the existing 1fr rule, which left
     two-column heroes squeezed side by side on phones. */
  .page-hero-grid,
  .hero-grid,
  .feature-row {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .page-hero-grid > div,
  .feature-row > div,
  .wrap-narrow[style] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }
  .page-hero-grid > div[style*="margin-top"] { margin-top: 0 !important; }

  /* --- 3. Decorative overlays ------------------------------------------- */
  /* Botanical art positioned absolutely at 220-1086px wide with inch offsets.
     At phone width it lands on top of the text, so it comes out; the painted
     section backgrounds still carry the look. */
  main img[style*="position: absolute"],
  main div[style*="position: absolute"],
  .hero-corner-tl,
  .hero-overlay-tr,
  .hero-overlay-tl,
  .hero-accent-left,
  .section2-corner-tl,
  .section3-overlay,
  .section3-overlay-tl,
  .section2-leaf-right,
  .sessions-bottom-strip {
    display: none !important;
  }

  /* Zoom-crops (scale(1.2), scale(2)) push images past the viewport edge
     where the container does not clip them. */
  main img[style*="scale"] { transform: none !important; }

  /* --- 4. Text ---------------------------------------------------------- */
  [style*="nowrap"] { white-space: normal !important; }

  /* --- 5. Photos -------------------------------------------------------- */
  .photo-frame,
  .photo-frame img {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .photo-frame img { transform: none !important; }

  /* --- 6. Header -------------------------------------------------------- */
  /* .brand carries a -96px pull that reads fine on a wide header but clips
     the wordmark off the left edge of a phone. */
  .brand { margin-left: 0 !important; }
  .site-nav { left: 0 !important; }
  .site-nav > a.nav-cta { margin-left: 0 !important; }

  /* Nav labels carry <br> for the two-line desktop bar. Stacked in the
     mobile drawer that breaks each link across two ragged centred lines. */
  .site-nav > a br { display: none; }
  .site-nav > a { text-align: left; }
}

@media (max-width: 640px) {
  /* Hero wordmark: sized for a wide canvas, it wrapped and overlapped. */
  .hero-center-title {
    font-size: clamp(2.4rem, 12vw, 3.6rem);
    margin-bottom: 0.4rem;
  }
  .hero-center-subtitle {
    display: block;
    font-size: clamp(1.15rem, 5.6vw, 1.7rem);
    margin-top: 0.1em;
  }
  .who-we-serve-heading { font-size: clamp(2rem, 9vw, 2.8rem) !important; }

  /* Negative pulls that overlap neighbouring sections on a narrow screen. */
  /* The hero title used to be pulled up 96px into this padding; without that
     pull the same padding reads as a large empty gap. */
  /* Enough for the script face's tall ascenders, which overshoot the line box. */
  .hero-split { padding-top: 5rem !important; }
  .tile-grid[style*="margin-top"] { margin-top: 24px !important; }
  .cta-band[style*="margin-bottom"] { margin-bottom: 0 !important; }
  #who-we-serve { padding-bottom: 48px !important; }
  main .wrap[style*="margin-top"] { margin-top: 0 !important; }
  .panel-cream[style*="margin-top"] { margin-top: 24px !important; }

  /* Section padding written in inches for desktop. */
  main section[style*="padding-top"] { padding-top: 2.6rem !important; }
  main section[style*="padding-bottom"] { padding-bottom: 2.6rem !important; }

  .display-script { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .script-lg { font-size: clamp(1.6rem, 7vw, 2.1rem) !important; }
  .wrap, .wrap-narrow { padding-left: 20px; padding-right: 20px; }

  /* Comfortable reading size: 1.13rem body copy with 1.75 line-height was
     set for a wide measure and feels oversized on a phone. */
  body { font-size: 1rem; line-height: 1.65; }
  .lede { font-size: 1.05rem; }

  /* The watercolour hero art is full-bleed with the busy corners scaled to a
     wide canvas; on a phone it lands on top of the first heading. Extra top
     room lets the text clear it. */
  .page-hero { padding-top: 6rem !important; }
  /* Fit the art to the viewport width and anchor it to the top so its corner
     leaves stay in the corners instead of drifting across the paragraphs. */
  .page-hero.hero-floral,
  .hero-split {
    background-size: 118% auto !important;
    background-position: center top !important;
  }

  /* Long headings set in fixed rem on a few pages. */
  h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  main [style*="font-size: 2.9"],
  main [style*="font-size: 2.95"] { font-size: clamp(1.8rem, 7.5vw, 2.3rem) !important; }
}