/* ==========================================================================
   Meadowlark Concierge
   Visual direction follows the Perhu template: blush ground (#FFF5F3),
   taupe accent (#A47355), warm dark (#534846). Type is Kefa III over Poppins.

   Two deliberate departures from Perhu, both for the 70+ readers:
     - body type is 18px, not 16px, and body colour is darker than Perhu's #444
     - no carousels, no animated counters, no scroll hijacking. Motion is a
       single one-time reveal per element; see the MOTION section at the end.
   To re-skin, change the tokens in :root and nothing else.
   ========================================================================== */

/* Fonts are linked from each page's <head>, NOT @import-ed here.
   An @import inside a stylesheet serialises the load: the browser must fetch
   this file, parse it, discover the @import, fetch Google's CSS, and only then
   fetch the font files - three round trips before text can paint in the right
   face. A <link> in the head starts that fetch in parallel with this one. */

:root {
  /* Ground */
  --blush:       #FFF5F3;
  --blush-deep:  #FBE7E0;
  --white:       #FFFFFF;
  --border:      #EEDFD9;

  /* Accent */
  --taupe:       #A47355;
  --taupe-dark:  #8A5C40;
  --taupe-soft:  #F0E1D8;

  /* Dark */
  --dark:        #534846;
  --dark-deep:   #3D3533;

  /* Text */
  --ink:         #141212;
  --text:        #4A4442;
  --muted:       #6E6663;
  --on-dark:     #F5EFEC;
  --on-dark-mut: #CDC2BE;

  /* Layout */
  --wrap:        1180px;
  --wrap-mid:    920px;
  --wrap-narrow: 720px;
  --radius:      6px;
  --radius-lg:   10px;
  --shadow:      0 2px 4px rgba(83,72,70,.05), 0 14px 34px rgba(83,72,70,.08);
  --shadow-lg:   0 4px 10px rgba(83,72,70,.06), 0 26px 60px rgba(83,72,70,.13);

  /* Type
     Both faces are served from Google Fonts, so every visitor sees the same
     design. Neither is a local-only font any more.

     Marcellus replaced Kefa III, and Poppins replaced Cocogoose. Both of the
     originals were named in the stack but never served: Kefa III is a macOS
     system font, and Cocogoose was an unlicensed trial declared with local()
     only. The result was that Mac visitors saw one site, Windows visitors
     another, and neither matched the design. Marcellus is the closest served
     match to Kefa III - same light weight, same flared Roman terminals.
     It has ONE weight, so nothing may ask it for bold. */
  --serif:      "Marcellus", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:       "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Helvetica, Arial, sans-serif;
  /* Same family as --sans. Kept as a separate token because ~10 rules use it
     to mean "the emphasis cut"; only the weight differs now. */
  --sans-bold:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Helvetica, Arial, sans-serif;
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;               /* Poppins Light */
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* break-word only kicks in when a word genuinely cannot fit, which is
   always a layout bug otherwise. Cheap insurance against long URLs and
   email addresses on narrow screens. */
a { color: var(--taupe-dark); text-underline-offset: 3px; overflow-wrap: break-word; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--taupe); outline-offset: 3px; border-radius: 2px; }

/* --- Typography -------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;               /* Kefa III Regular */
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 4.4vw, 3.35rem); line-height: 1.18; }
h2 { font-size: clamp(1.72rem, 3.1vw, 2.45rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.35; }
h4 { font-family: var(--sans-bold); font-size: 1.06rem; font-weight: 500; color: var(--ink); margin: 0 0 .35em; }
p  { margin: 0 0 1.15em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }
strong, b { font-family: var(--sans-bold); font-weight: 500; color: var(--ink); }

.eyebrow {
  font-family: var(--sans-bold);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 1rem;
  /* It is a <p>, so it inherits the 66ch measure. At this font size that is a
     ~503px box that stays pinned left, and text-align:center then centres the
     label inside the box rather than inside the section head. A short label
     needs no measure. */
  max-width: none;
}
.lede { font-size: 1.16rem; line-height: 1.72; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: .92rem; line-height: 1.65; }

/* --- Layout ------------------------------------------------------------ */
.wrap        { width: min(100% - 3rem, var(--wrap));        margin-inline: auto; }
.wrap-mid    { width: min(100% - 3rem, var(--wrap-mid));    margin-inline: auto; }
.wrap-narrow { width: min(100% - 3rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding: clamp(3.25rem, 6.5vw, 6rem) 0; }
.section--blush { background: var(--blush); }
.section--white { background: var(--white); }
.section--dark  { background: var(--dark); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark .lede, .section--dark .muted { color: var(--on-dark-mut); }
.section--dark .eyebrow { color: #D9BBA6; }

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.stack > * + * { margin-top: 1.15em; }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 54px;              /* generous tap target */
  padding: .85rem 1.85rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--taupe); color: #fff; }
.btn--primary:hover { background: var(--ink); color: #fff; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--taupe); }
.btn--outline:hover { background: var(--taupe); color: #fff; }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--taupe); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.9rem; }
/* Header CTA: slightly roomier than an in-page button, and never squeezed. */
.nav > .btn { padding: .8rem 2rem; min-height: 50px; white-space: nowrap; flex: none; }

/* --- Image placeholders ------------------------------------------------
   Swap each .img-ph for a real <img>. The label states the intended shot
   and the ratio it is cropped to.                                        */
.img-ph {
  background:
    repeating-linear-gradient(45deg, rgba(164,115,85,.07) 0 12px, transparent 12px 24px),
    var(--taupe-soft);
  border: 1px dashed rgba(164,115,85,.45);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.75rem;
  color: var(--taupe-dark);
  font-family: var(--sans);
}
.img-ph svg { width: 38px; height: 38px; opacity: .6; margin-bottom: .85rem; }
.img-ph b { font-size: .95rem; font-weight: 500; display: block; margin-bottom: .2rem; }
.img-ph span { font-size: .84rem; line-height: 1.5; max-width: 26ch; opacity: .85; }

/* --- Header ------------------------------------------------------------ */
.utility { background: var(--dark-deep); color: var(--on-dark-mut); font-size: .87rem; }
.utility .wrap {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; min-height: 44px; padding-block: .35rem;
}
.utility a { color: #fff; font-weight: 500; text-decoration: none; }
.utility a:hover { color: #E4CDBC; text-decoration: underline; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 96px;
}
/* Logo lockup. The horizontal PNG is ~3.47:1, so height drives the size.
   The dark wordmark is 1.36:1 on the footer ground, hence the reversed file. */
.brand { text-decoration: none; display: inline-flex; align-items: center; }
/* The lockup is ~3.5:1 and the "CONCIERGE" line sits at roughly 7% of the
   artwork height, so it needs real size to stay legible for this audience. */
.brand img { height: 68px; width: auto; display: block; }
.site-footer .brand img { height: 66px; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
/* Direct child only. A bare `.nav ul` also matches the dropdown panel,
   whose display:none it would then override - the menu hangs open. */
.nav > ul { display: flex; align-items: center; gap: 1.45rem; list-style: none; margin: 0; padding: 0; }
.nav .nav-sub { list-style: none; margin: 0; }
/* Scoped to the list: the sibling CTA is a .btn and must keep its own
   colour and padding. A bare `.nav a` outranks `.btn--primary`. */
.nav ul a {
  font-size: .97rem; font-weight: 300; color: var(--text);
  text-decoration: none; padding: .4rem 0; border-bottom: 2px solid transparent;
}
.nav ul a { position: relative; border-bottom-color: transparent; }
/* Underline grows out from the left rather than snapping on. */
.nav ul a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--taupe);
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.nav ul a:hover { color: var(--taupe); }
.nav ul a:hover::after { transform: scaleX(1); }
.nav ul a[aria-current="page"] { color: var(--taupe-dark); }
.nav ul a[aria-current="page"]::after { transform: scaleX(1); background: var(--taupe); }
@media (prefers-reduced-motion: reduce) { .nav ul a::after { transition: none; } }

/* --- Nav dropdown --------------------------------------------------------
   Click/tap to open, never hover. Hover menus are a poor fit for this
   audience: they open by accident, and they close the moment the pointer
   slips off the path between the trigger and the panel. A button with
   aria-expanded is also the accessible default - it works from the keyboard
   and on touch with no extra handling. */
.nav li.has-sub { position: relative; }
.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: .97rem;
  font-weight: 300;
  color: var(--text);
  position: relative;
}
.nav-sub-toggle .caret { width: 10px; height: 10px; transition: transform .22s ease; }
.nav-sub-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-sub-toggle::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--taupe);
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.nav-sub-toggle:hover { color: var(--taupe); }
.nav-sub-toggle:hover::after,
.nav-sub-toggle[aria-expanded="true"]::after,
.has-sub.is-current .nav-sub-toggle::after { transform: scaleX(1); }
.has-sub.is-current .nav-sub-toggle { color: var(--taupe-dark); }

.nav-sub {
  position: absolute;
  top: calc(100% + 14px);
  left: -.9rem;
  min-width: 15rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: .45rem;
  z-index: 60;

  /* Fades and slides rather than snapping. `display` cannot be transitioned,
     so the closed state is opacity + transform + visibility instead.
     visibility:hidden matters for more than looks: it takes the panel out of
     hit-testing AND out of the tab order, so the links are not silently
     focusable while the menu is shut - which is exactly what would happen if
     this only faded with opacity. Its change is delayed until the fade has
     finished on close, and applied immediately on open. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transform-origin: top center;
  transition: opacity .2s ease, transform .22s cubic-bezier(.22,.61,.36,1),
              visibility 0s linear .22s;
}
.nav-sub-toggle[aria-expanded="true"] + .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.22,.61,.36,1),
              visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .nav-sub, .nav-sub-toggle[aria-expanded="true"] + .nav-sub { transition: none; }
}
.nav .nav-sub li { border-bottom: none; }
.nav .nav-sub a {
  display: block;
  padding: .7rem .85rem;
  border-radius: var(--radius);
  border-bottom: none;
}
.nav .nav-sub a::after { display: none; }
.nav .nav-sub a:hover { background: var(--blush); color: var(--taupe-dark); }
.nav .nav-sub a[aria-current="page"] { background: var(--blush); color: var(--taupe-dark); }

.nav-toggle {
  display: none; align-items: center; gap: .55rem;
  min-height: 48px; padding: .5rem 1rem;
  background: transparent; border: 2px solid var(--border); border-radius: var(--radius);
  font-family: var(--sans-bold); font-size: .95rem; font-weight: 500; color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* --- Hero -------------------------------------------------------------- */
.hero { background: var(--blush); padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lede { font-size: 1.2rem; max-width: 50ch; }

/* Portrait on a textured disc, the Perhu hero motif. */
.hero-figure { position: relative; display: grid; place-items: center; }

/* The cut-out ends in a hard horizontal edge at the hips. Dropping the whole
   figure so that edge lands exactly on the section boundary makes the crop
   read as deliberate rather than as a portrait floating in space. The negative
   margin cancels the hero's own bottom padding; .hero clips the remainder.
   The figure is moved rather than just the image, so the two discs behind it
   travel with it and the composition holds together.
   Desktop only: below 981px the columns stack and the figure sits above the
   copy, where a bottom-flush crop would make no sense. */
@media (min-width: 981px) {
  .hero-figure {
    align-self: end;
    margin-bottom: calc(-1 * clamp(3rem, 6vw, 5rem));
  }
}
.hero-figure::before {
  content: "";
  position: absolute;
  width: 92%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(164,115,85,.34) 1.4px, transparent 1.5px) 0 0 / 11px 11px,
    var(--blush-deep);
}
.hero-figure .img-ph {
  position: relative;
  width: 86%;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  background: rgba(255,255,255,.72);
  border-style: solid;
  border-color: rgba(164,115,85,.35);
}

/* A cut-out portrait needs no frame: it stands in front of the dotted disc,
   which is the whole point of the transparent background. position/z-index
   lift it above the two absolutely-positioned discs behind it. */
.hero-figure picture { position: relative; z-index: 1; display: block; width: 92%; }
.hero-portrait {
  width: 100%;
  height: auto;
  /* A soft ground shadow so the figure sits in the scene rather than floating. */
  filter: drop-shadow(0 18px 22px rgba(83,72,70,.16));
}

/* --- Inner page header ------------------------------------------------- */
.page-head {
  background: var(--blush);
  padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(3.25rem, 6vw, 5rem);
}
.page-head h1 { max-width: 19ch; }
.page-head .lede { font-size: 1.18rem; max-width: 56ch; }

/* Every inner page carries a portrait of Andrea beside its title. It is a
   circle rather than the home page's full cut-out, so the inner pages read as
   the same family without repeating the hero. */
.page-head-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 320px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.page-figure { position: relative; display: grid; place-items: center; }
/* Seed-dot disc behind, matching the hero treatment. */
.page-figure::before {
  content: "";
  position: absolute;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(164,115,85,.30) 1.3px, transparent 1.4px) 0 0 / 11px 11px,
    var(--blush-deep);
}
/* Works for both the dashed placeholder and a real <img> dropped in later. */
.page-portrait,
.page-figure .img-ph {
  position: relative;
  z-index: 1;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
}
.page-figure .img-ph { background: rgba(255,255,255,.72); border-style: solid; border-color: rgba(164,115,85,.4); }
.page-portrait { box-shadow: 0 10px 26px rgba(83,72,70,.14); }

/* Large centred statement, for a mission or a thesis line. */
.statement {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.9vw, 2.15rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 30ch;
  margin-inline: auto;
  text-align: center;
}
.section--dark .statement { color: var(--white); }

/* --- Cards & grids ----------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.1rem);
}
.section--blush .card { box-shadow: var(--shadow); }

/* Cards on a dark band.
   Without this, .card keeps its white background while `.section--dark h3`
   forces the heading white - white on white, and the headings vanish. The
   card ground is a 5% white overlay (#5C514F), where a white heading is
   7.65:1 and the body colour below is 4.86:1. */
.section--dark .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.section--dark .card p { color: #D6CCC8; }
.card h3 { margin-bottom: .45rem; }
.card p { font-size: 1rem; color: var(--muted); }

/* Pillars. Five supports plus a CTA card fills a 3x2 grid with no orphan. */
.pillars { display: grid; gap: 1.4rem; grid-template-columns: repeat(3, 1fr); }
.pillar {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem 1.75rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pillar:hover { border-color: var(--taupe); box-shadow: var(--shadow); }
.pillar--cta { background: var(--blush-deep); border-color: var(--taupe-soft); display: flex; flex-direction: column; }
.pillar--cta .pillar-icon { background: rgba(255,255,255,.75); }
.pillar--cta .more { font-family: var(--sans-bold); margin-top: auto; padding-top: 1rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.pillar--cta .more:hover { color: var(--taupe-dark); text-decoration: underline; }
.pillar-icon {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--taupe-soft); color: var(--taupe-dark);
  display: grid; place-items: center; margin-bottom: 1.2rem;
}
.pillar-icon svg { width: 27px; height: 27px; }
.pillar h3 { font-size: 1.22rem; margin-bottom: .35rem; }
.pillar p { font-size: 1rem; color: var(--muted); margin: 0; }

/* --- Definition rows ---------------------------------------------------
   Icon, term, description. For the same five supports as the home page's
   pillar cards, but where the copy is long enough that a card grid would
   force either tiny type or very tall boxes. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li {
  display: grid;
  grid-template-columns: 58px 11.5rem 1fr;
  gap: 1.6rem;
  align-items: start;
  padding: 1.85rem 0;
  border-top: 1px solid var(--border);
}
.rows > li:last-child { border-bottom: 1px solid var(--border); }
.rows .pillar-icon { width: 58px; height: 58px; margin: 0; }
.rows h3 { margin: .35rem 0 0; }
.rows p { margin: .45rem 0 0; color: var(--muted); font-size: 1.03rem; }

/* --- Pricing tiers ------------------------------------------------------ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.tier {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.35rem);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.tier--featured {
  border: 2px solid var(--taupe);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.tier-flag {
  position: absolute;
  top: -.85rem; left: 50%;
  transform: translateX(-50%);
  background: var(--taupe);
  color: #fff;
  font-family: var(--sans-bold);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .38rem 1.05rem;
  border-radius: 999px;
  white-space: nowrap;
}
.tier-name { font-family: var(--serif); font-size: 1.65rem; color: var(--ink); margin: 0 0 .5rem; }
.tier-price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .9rem; }
.tier-price .amt {
  font-family: var(--serif); font-size: 2.5rem; color: var(--taupe-dark);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.tier-price .per { font-size: .97rem; color: var(--muted); }
.tier-pitch {
  font-size: 1rem; color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.35rem; margin-bottom: 1.35rem;
}
.tier-plus {
  font-family: var(--sans-bold); font-size: .82rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--taupe-dark); margin: 0 0 1.15rem; max-width: none;
}
.tier-feats { list-style: none; margin: 0 0 1.9rem; padding: 0; display: grid; gap: 1.15rem; }
/* These are <h3> so the document outline does not skip a level under the
   tier's <h2>. That means resetting the serif h3 defaults back to the small
   sans label they are meant to be. */
.tier-feats h3 {
  font-family: var(--sans-bold);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 .25rem;
}
.tier-feats p { font-size: .96rem; color: var(--muted); margin: 0; line-height: 1.55; }
.tier-feats ul { margin: .55rem 0 0; padding-left: 1.15rem; font-size: .93rem; color: var(--muted); }
.tier-feats ul li { margin-bottom: .3rem; }
.tier .btn { margin-top: auto; width: 100%; }

/* --- Comparison table --------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}
table.compare { width: 100%; border-collapse: collapse; min-width: 780px; font-size: 1rem; }
table.compare th, table.compare td {
  padding: .95rem 1.1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
table.compare thead th {
  background: var(--dark-deep); color: #fff;
  font-family: var(--serif); font-size: 1.05rem; border-bottom: none;
  /* Explicit: <th> defaults to bold, and the display face has one weight, so
     the browser would synthesise a fake bold here. */
  font-weight: 400;
}
table.compare thead th:first-child { width: 30%; }
table.compare tbody th { font-weight: 400; color: var(--text); }
table.compare td { color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
table.compare tbody tr:nth-child(even) { background: var(--blush); }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: none; }
/* Scoped to the cell: a bare `.tick` (0,1,0) loses to `table.compare td`
   (0,1,1), so these colours silently never applied. */
table.compare td.tick { color: var(--taupe-dark); }
table.compare td.dash { color: #B3A9A5; }
.table-note { font-size: .93rem; color: var(--muted); margin-top: 1rem; }

/* --- Phases -------------------------------------------------------------
   A dated timeline: when + name on the left, the narrative on the right.
   Distinct from .steps, which is a numbered sequence with no dates. */
.phases { margin: 0; padding: 0; list-style: none; }
.phase {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--border);
}
.phase:last-child { border-bottom: 1px solid var(--border); }
.phase-when {
  font-family: var(--sans-bold);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 .5rem;
  max-width: none;
}
.phase h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0; }
/* Large tinted numeral for the left cell, when a phase row is a numbered
   point rather than a dated one. */
.phase-num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--taupe);
  opacity: .32;
  margin: 0 0 .35rem;
  max-width: none;
  font-variant-numeric: tabular-nums;
}
/* Scoped with .phase so it outranks `.phase-body p` below - a class+element
   selector (0,1,1) beats a lone class (0,1,0), which silently reverted this
   to body size on the first attempt. */
.phase .phase-lede {
  font-family: var(--serif);
  /* Kefa reads visually smaller than Poppins at the same nominal size, so
     this needs to sit well above the 1.03rem body to read as a lede. */
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--taupe-dark);
  margin: 0 0 1rem;
}
.phase-body p { color: var(--muted); font-size: 1.03rem; }

/* --- Two extremes ------------------------------------------------------ */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: stretch; }
.versus-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.versus-card q {
  display: block; font-family: var(--serif); font-size: 1.3rem; line-height: 1.4;
  color: var(--ink); margin-bottom: .85rem;
}
.versus-card p { font-size: 1rem; color: var(--muted); margin: 0; }
.versus-or {
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--muted);
}
.versus-answer {
  margin-top: 1.5rem; background: var(--taupe); color: #fff;
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.5rem); text-align: center;
}
.versus-answer p {
  font-family: var(--serif); font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  line-height: 1.4; margin: 0 auto; max-width: 34ch; color: #fff;
}

/* --- Steps ------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 0 0 2.4rem 4.75rem; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--taupe); color: #fff;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 400;
  display: grid; place-items: center;
}
.steps li::after {
  content: ""; position: absolute; left: 25px; top: 62px; bottom: 8px;
  width: 2px; background: var(--border);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: .25rem; }
.steps p { color: var(--muted); font-size: 1rem; }
.section--dark .steps li::after { background: rgba(255,255,255,.2); }
.section--dark .steps p { color: var(--on-dark-mut); }

/* --- Checklist --------------------------------------------------------- */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.checks li { position: relative; padding-left: 2rem; color: var(--muted); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--taupe);
}
.section--dark .checks li { color: var(--on-dark-mut); }
.section--dark .checks li::before { background: #D9BBA6; }
.checks--two { grid-template-columns: repeat(2, 1fr); gap: .75rem 2rem; }
.checks--three { grid-template-columns: repeat(3, 1fr); gap: .75rem 2rem; }

/* --- FAQ accordion -------------------------------------------------------
   Native <details>/<summary>, so it works with no JavaScript, is keyboard
   operable for free, and browser find-in-page can still reach closed answers
   in current browsers. */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.7vw, 1.22rem);
  line-height: 1.4;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--taupe-dark); }
.faq summary .sign {
  flex: none;
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border);
  color: var(--taupe-dark);
  margin-top: .15rem;
}
/* The +/- is drawn, not typed. It stays drawn: crisp at any size and
   independent of whichever font actually loads. */
.faq summary .sign::before,
.faq summary .sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq summary .sign::before { width: 12px; height: 2px; }
.faq summary .sign::after  { width: 2px;  height: 12px; }
.faq details[open] summary .sign { background: var(--taupe); border-color: var(--taupe); color: #fff; }
.faq details[open] summary .sign::after { display: none; }
/* The panel is animated by main.js, which sets an explicit height and then
   releases it. overflow:hidden is what makes the slide read as a wipe rather
   than the text spilling out mid-transition. */
.faq .answer { padding: 0 3.25rem 1.5rem 0; overflow: hidden; }
.js-motion .faq .answer { transition: height .34s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .js-motion .faq .answer { transition: none; } }
.faq .answer p { color: var(--muted); font-size: 1.03rem; }

/* --- Pull quote (the Perhu tinted quote panel) ------------------------- */
.quote-panel {
  background: var(--blush-deep);
  border-left: 4px solid var(--taupe);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.5rem, 3vw, 2.25rem);
}
.quote-panel p {
  font-family: var(--serif); font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.55; color: var(--ink); margin: 0;
}
.quote-panel cite { display: block; margin-top: .9rem; font-style: normal; font-size: .92rem; color: var(--muted); font-family: var(--sans); }

/* --- Split (image + text) ---------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Without this a long unbreakable string (an email address) props the column
   open and forces the page to scroll sideways on a narrow phone. */
.split > * { min-width: 0; }
.split--flip .split-media { order: 2; }
/* Heading pinned to the top of its column instead of centred against a
   taller neighbour. */
.split--top { align-items: start; }
/* A photo that follows the copy inside a text column, at its natural shape. */
.inline-img {
  width: 100%;
  height: auto;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--taupe-soft);
}
.split-media .img-ph { aspect-ratio: 4 / 5; }

/* Real photography in a split slot. Same 4:5 box and rounded corners as the
   placeholder it replaces, so swapping one for the other changes nothing but
   the content. The source is 0.838:1, so cover crops ~4% of the height;
   object-position favours the upper third where faces sit. */
.split-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  border-radius: var(--radius-lg);
  background: var(--taupe-soft);   /* warm ground while the file loads */
}

/* Two columns: content on the left, a photo on the right that stays in view
   while the list beside it scrolls. The photo is a landscape shot of three
   people, so 5:4 is as tall as it can go before someone is cropped out.
   The rows drop their separate title column here, since the left column is
   too narrow for three tracks; this is the same layout they use on tablets. */
.aside-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.aside-media { margin: 0; position: sticky; top: 7.5rem; }
.aside-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-lg);
  background: var(--taupe-soft);
}
.aside-split .rows > li { grid-template-columns: 58px 1fr; gap: 0 1.2rem; }
.aside-split .rows .pillar-icon { grid-row: span 2; }
.aside-split .rows h3,
.aside-split .rows p { grid-column: 2; }
@media (max-width: 980px) {
  .aside-split { grid-template-columns: 1fr; }
  /* Stacked, the photo leads the section rather than trailing a long list. */
  .aside-media { position: static; order: -1; }
}

/* --- Forms ---------------------------------------------------------------
   Labels are real <label> elements above each field, never placeholder text.
   A placeholder disappears the moment someone starts typing, which is exactly
   when an older visitor is most likely to need to check what the field was
   for. Controls are 56px tall for the same reason the buttons are. */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-family: var(--sans-bold);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .45rem;
  font-size: 1rem;
}
.field .hint { font-family: var(--sans); font-weight: 300; color: var(--muted); font-size: .93rem; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 56px;
  padding: .85rem 1rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.03rem;
  color: var(--text);
  background: var(--blush);
  border: 2px solid var(--border);
  border-radius: var(--radius);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--taupe-soft); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--taupe);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(164,115,85,.15);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.form-note { font-size: .96rem; color: var(--muted); margin-top: 1.1rem; }
.req { color: var(--taupe-dark); font-weight: 500; }

/* --- Contact details --------------------------------------------------- */
.contact-list { margin: 0; }
.contact-list dt {
  font-family: var(--sans-bold);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: .25rem;
}
.contact-list dd { margin: 0 0 1.5rem; font-size: 1.06rem; color: var(--text); overflow-wrap: anywhere; }
.contact-list dd a { font-family: var(--sans-bold); font-weight: 500; }
/* Scoped for the same reason: `.contact-list dd a` outranks a bare class,
   so the serif never reached the phone number. */
.contact-list dd a.contact-phone {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.05rem);
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.contact-list dd a.contact-phone:hover { color: var(--taupe-dark); }

/* --- CTA band ---------------------------------------------------------- */
/* The CTA and the footer used to share --dark, so they read as one slab.
   The CTA now sits on Deep Umber and the footer on Bark, which also matches
   the utility bar at the top of the page and bookends the whole layout. */
.cta-band { background: var(--taupe-dark); color: var(--on-dark); text-align: center; padding: clamp(3.25rem, 6vw, 4.75rem) 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--on-dark); margin-inline: auto; max-width: 48ch; }
.cta-band .btn-row { justify-content: center; }
.cta-band .fineprint { font-size: .96rem; color: var(--on-dark); margin-top: 1.3rem; }
.cta-band .fineprint a { color: #fff; font-weight: 500; }

/* --- Footer ------------------------------------------------------------ */
.site-footer { background: var(--dark-deep); color: var(--on-dark-mut); padding: clamp(3rem, 5vw, 4.25rem) 0 0; font-size: 1rem; }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr 1.15fr; gap: 2.5rem; padding-bottom: 3rem; }
/* Footer column headings are <h2>, not <h4>: an <h4> directly after the
   page's <h2> sections skips a level and breaks the document outline for
   screen readers. Every inherited h2 property is reset here. */
.site-footer h2 {
  font-family: var(--sans-bold);
  color: #fff;
  font-size: .8rem;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
/* `overflow-wrap: break-word` permits a break but does NOT reduce the
   element's intrinsic min-content width, so a long email address still props
   open a grid item. `anywhere` does affect intrinsic sizing, and min-width:0
   releases the grid item that would otherwise refuse to shrink. Together they
   stop the footer forcing the page sideways on a 320px screen. */
.site-footer a { color: var(--on-dark-mut); text-decoration: none; overflow-wrap: anywhere; }
.footer-grid > *, .site-footer li { min-width: 0; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-tag { margin-top: 1.1rem; max-width: 34ch; color: var(--on-dark-mut); font-size: .96rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 1.5rem 0 1.25rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: .9rem;
}
.footer-legal { color: #AEA29D; font-size: .86rem; line-height: 1.65; padding-bottom: 2rem; margin: 0; max-width: 74ch; }

/* Visible to screen readers only. Used for the comparison table caption. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--taupe); color: #fff; padding: .9rem 1.4rem;
  z-index: 100; border-radius: 0 0 6px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 980px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { max-width: 380px; margin-inline: auto; order: -1; }
  .page-head-grid { grid-template-columns: 1fr; }
  .page-figure { max-width: 240px; margin-inline: auto; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
  .tier-flag { left: 1.9rem; transform: none; }
  .checks--three { grid-template-columns: repeat(2, 1fr); }
  .phase { grid-template-columns: 1fr; gap: .75rem; }
  .rows > li { grid-template-columns: 58px 1fr; gap: 1.2rem; }
  .rows h3 { grid-column: 2; }
  .rows p { grid-column: 2; }
  .versus { grid-template-columns: 1fr; }
  .versus-or { padding: .25rem 0; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split-media { order: 0; }
  .split-media { max-width: 400px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* Hamburger below tablet only. Desktop keeps every link visible. */
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow); padding: 1rem 1.5rem 1.75rem;
  }
  .nav.is-open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--border); }
  .nav li:last-child { border-bottom: none; }
  .nav ul a { display: block; padding: 1rem 0; font-size: 1.06rem; border-bottom: none; }
  .nav ul a[aria-current="page"] { border-bottom: none; }
  .nav-sub-toggle { width: 100%; justify-content: space-between; padding: 1rem 0; font-size: 1.08rem; }
  .nav-sub-toggle::after { display: none; }
  /* In the stacked menu the panel is in normal flow, so a visibility-hidden
     box would still reserve its height and leave a gap. Here it switches on
     display instead; the menu it lives inside is already an animated
     disclosure, so the difference is not perceptible. */
  .nav-sub {
    position: static;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 .5rem 1rem;
    min-width: 0;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-sub-toggle[aria-expanded="true"] + .nav-sub { display: block; }
  .nav .nav-sub a { padding: .75rem 0; }
  .nav > .btn { margin-top: 1rem; }
  .site-header { position: relative; }
  .site-header .wrap { position: relative; min-height: 84px; }
}

@media (max-width: 700px) {
  .wrap, .wrap-mid, .wrap-narrow { width: min(100% - 2rem, var(--wrap)); }
  .grid-2, .grid-3, .grid-4, .checks--two, .checks--three, .pillars { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .brand img { height: 50px; }
  .utility .wrap { justify-content: center; }
  .utility .area { display: none; }
  .steps li { padding-left: 3.9rem; }
  .steps li::before { width: 44px; height: 44px; font-size: 1.05rem; }
  .steps li::after { left: 21px; top: 54px; }
  .faq .answer { padding-right: 0; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
}

/* ==========================================================================
   DECORATION

   One motif, drawn from the logo: the prairie. Grass silhouettes, seed dots,
   and soft arcs. Everything here is decorative only - aria-hidden in the
   markup, pointer-events:none, and layered behind content. None of it may
   reduce text contrast or introduce horizontal scroll.
   ========================================================================== */

/* Sections that carry decoration need a stacking context and must clip it. */
.hero, .page-head, .section--blush, .section--dark { position: relative; overflow: hidden; }
.hero > .wrap,
.page-head > .wrap,
.section > .wrap,
.section > .wrap-mid,
.section > .wrap-narrow { position: relative; z-index: 2; }

.deco { position: absolute; pointer-events: none; z-index: 1; }

/* Prairie grass along the foot of a section. */
.deco-grass { left: 0; right: 0; bottom: 0; width: 100%; height: 92px; opacity: .42; }
.deco-grass svg { width: 100%; height: 100%; display: block; }
.deco-grass path { fill: var(--taupe); stroke: none; }

/* Seed-dot field. Sits under content, fades out upward. */
.section--blush::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(164,115,85,.16) 1px, transparent 1.3px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 62%);
  mask-image: linear-gradient(to top, #000 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* A second, offset arc behind the hero portrait. */
.hero-figure::after {
  content: "";
  position: absolute;
  width: 92%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(164,115,85,.4);
  transform: translate(14px, -16px);
  pointer-events: none;
}

/* Hand-drawn underline for one phrase. box-decoration-break keeps the stroke
   correct if the phrase wraps to a second line. */
.marked {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5c34-4.2 68-5.6 101-4.1 33 1.5 66 5.2 95 2.1' fill='none' stroke='%23A47355' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .34em;
  padding-bottom: .1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Oversized quotation glyph on the founder panel. */
.quote-panel { position: relative; }
.quote-panel::before {
  content: "\201C";
  position: absolute;
  top: .02em; left: .34em;
  font-family: var(--serif);
  font-size: 4.4rem;
  line-height: 1;
  color: var(--taupe);
  opacity: .28;
  pointer-events: none;
}

/* Bird watermark. On the dark band it is cropped into the corner; in the hero
   it stands in the gutter between the copy and the portrait, rising out of the
   grass so it reads as part of the meadow rather than a floating logo. It is
   placed clear of all body copy, so no text sits on top of it. */
.deco-bird {
  right: -40px; bottom: -30px;
  width: 300px; height: 300px;
  opacity: .07;
  background: url("../images/mark-light-600.png") no-repeat center / contain;
}
.hero .deco-bird {
  right: auto; left: 42%;
  bottom: -10px;
  width: 178px; height: 178px;
  opacity: .17;
  background-image: url("../images/mark-bird-360.png");
  background-position: bottom center;
}

/* No stagger on the pillar grid.
   An earlier attempt offset :nth-child(even) to give the grid some rhythm.
   In a three-column grid that indexes cards 2, 4 and 6, which is the middle
   card on row one but the two OUTER cards on row two - so the offset flipped
   between rows and read as broken alignment rather than rhythm. If the rhythm
   is wanted back, offset by column instead (:nth-child(3n+2)) so the same
   column drops on every row. */

/* Small seed cluster marking a section head. */
.seeds { display: block; width: 46px; height: 10px; margin-bottom: 1.1rem; pointer-events: none; }
.seeds circle { fill: var(--taupe); }
.section-head.center .seeds { margin-inline: auto; }
.section--dark .seeds circle { fill: #D9BBA6; }

@media (max-width: 700px) {
  .deco-grass { height: 54px; opacity: .38; }
  .deco-bird { width: 190px; height: 190px; }
  /* On phones the columns stack, so the hero has no gutter to stand the bird
     in. A cropped sliver at the edge reads as an accident rather than a mark,
     so it is dropped here; the grass still carries the motif. */
  .hero .deco-bird { display: none; }
  .quote-panel::before { font-size: 4rem; }
}

/* ==========================================================================
   PAGE TRANSITIONS

   Two layers, both optional:

   1. The View Transitions API cross-fades between pages on browsers that
      support it. It is a progressive enhancement in the truest sense - on a
      browser without it the rule is simply ignored and navigation is normal.

   2. A short fade-and-rise on load, for everyone else. It uses `backwards`
      fill only and never sets a hidden resting state, so if the animation is
      blocked or unsupported the page is visible as normal. Kept to 300ms and
      applied to <main> rather than <body>, so the header and the logo are
      painted immediately and the LCP is not delayed.
   ========================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .3s cubic-bezier(.22,.61,.36,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
main { animation: page-in .3s cubic-bezier(.22,.61,.36,1) backwards; }

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   MOTION

   Progressive enhancement, in this order:
     1. With no JS, every element is visible and static. Nothing here hides
        content that JS is then responsible for revealing.
     2. main.js adds .js-motion to <html> ONLY when the visitor has not asked
        for reduced motion. That class arms the pre-animation states below.
     3. An IntersectionObserver adds .is-in once per element, then stops
        observing it. Nothing re-animates on scroll back up.

   Native scrolling is untouched: no scroll hijacking, no virtualised scroll,
   no WebGL. Keyboard paging, find-in-page, and the scrollbar all still work.
   The hero deliberately does not animate; it is the LCP element and should be
   on screen the instant the page paints.
   ========================================================================== */

.js-motion .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   .55s cubic-bezier(.22,.61,.36,1),
    transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js-motion .reveal.is-in { opacity: 1; transform: none; }

/* First pass: whatever is already on screen appears without animating, so
   nothing is moving while someone is reading the opening screen. */
.js-motion-init .reveal { transition: none !important; }

/* A revealed element must never stay hidden if the observer misfires. */
.js-motion .reveal.is-in,
.js-motion .reveal:focus-within { opacity: 1; transform: none; }

/* The step markers draw their connector as each step arrives. */
.js-motion .steps li::after {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform .6s cubic-bezier(.22,.61,.36,1) .15s;
}
.js-motion .steps li.is-in::after { transform: scaleY(1); }
.js-motion .steps li::before {
  transform: scale(.82);
  opacity: 0;
  transition: transform .45s cubic-bezier(.34,1.32,.64,1), opacity .35s ease;
}
.js-motion .steps li.is-in::before { transform: scale(1); opacity: 1; }

/* Header gains a hairline shadow once the page has moved, so the sticky bar
   separates from the content sliding under it. */
.site-header { transition: box-shadow .25s ease, border-color .25s ease; }
.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(83,72,70,.06), 0 8px 24px rgba(83,72,70,.07);
  border-bottom-color: transparent;
}

/* Cards lift very slightly on pointer devices only. */
@media (hover: hover) and (pointer: fine) {
  .card, .versus-card, .tier {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .card:hover, .versus-card:hover,
  .tier:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--taupe-soft);
  }
  .pillar { transition: transform .25s ease, border-color .18s ease, box-shadow .18s ease; }
  .pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .tier { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .tier--featured:hover { border-color: var(--taupe-dark); }

  .btn {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease,
                transform .18s ease, box-shadow .18s ease;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(83,72,70,.18); }
  .btn:active { transform: translateY(0); box-shadow: none; }

  /* Any link written with a trailing arrow nudges it along on hover. */
  .arrow-link .arw { display: inline-block; transition: transform .22s cubic-bezier(.22,.61,.36,1); }
  .arrow-link:hover .arw { transform: translateX(5px); }

  /* Photographs breathe very slightly. Kept subtle: this is not a gallery. */
  .split-media { overflow: hidden; border-radius: var(--radius-lg); }
  .split-img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
  .split-media:hover .split-img { transform: scale(1.03); }

  .rows > li { transition: background-color .2s ease; }
  .rows > li:hover { background: var(--blush); }

  .faq summary { transition: color .18s ease; }
  .faq summary .sign { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
  .faq summary:hover .sign { border-color: var(--taupe); }
}

/* Belt and braces: if the OS asks for reduced motion, neutralise everything
   above even if .js-motion were somehow applied. */
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal,
  .js-motion .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .js-motion .steps li::after,
  .js-motion .steps li::before { transform: none; opacity: 1; transition: none; }
  .site-header, .card, .versus-card, .pillar, .btn { transition: none; }
}

@media print {
  .site-header, .utility, .cta-band, .nav-toggle, .img-ph { display: none; }
  body { font-size: 12pt; background: #fff; }
}

/* --- À la carte services -------------------------------------------------
   One-off services sold outside a membership. Deliberately built from the
   existing .card + .grid-3 components so this reads as part of the same
   system; the only new pieces are the price line and the closing callout.

   The source flyer for this content used a green-and-gold palette that is
   not the Meadowlark system. Nothing here adopts it - the tokens are the
   same blush/taupe/umber used everywhere else. */
.alc-price {
  display: block;
  font-family: var(--sans-bold);
  font-weight: 500;
  font-size: 1.15rem;
  /* The accent taupe darkened until it clears AA. --taupe is 4.07:1 on white
     and 3.80:1 on blush, both under the 4.5 floor for text this size. */
  color: #7A4F36;
  margin: .35rem 0 .6rem;
  font-variant-numeric: tabular-nums;
}
.alc-price .alc-unit { font-size: .85rem; font-weight: 400; color: var(--muted); }

/* Closing callout. Element-qualified children are avoided here on purpose;
   every rule targets its own class so nothing can out-rank it later. */
.alc-callout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  background: var(--taupe-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.1rem);
}
.alc-callout-icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center;
  color: var(--taupe-dark);
}
.alc-callout-icon svg { width: 26px; height: 26px; }
.alc-callout h3 { margin-bottom: .3rem; }
.alc-callout p { margin: 0; color: var(--text); }
@media (max-width: 560px) {
  .alc-callout { grid-template-columns: 1fr; gap: .9rem; }
}

/* --- The rate panel -------------------------------------------------------
   Replaced the three membership tier cards and the comparison table when the
   business moved to a personalized plan with one hourly rate. Deliberately a
   single quiet statement rather than a price grid: the model is "we build the
   plan, then recommend hours", not "pick a package". */
.rate-panel {
  max-width: 44rem;
  margin: 2.25rem auto 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 2.9rem);
  text-align: center;
  box-shadow: var(--shadow);
}
.rate-figure {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 7vw, 4rem);
  line-height: 1;
  color: var(--ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.rate-figure .rate-unit {
  display: block;
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--muted);
  margin-top: .65rem;
}
.rate-note {
  margin: 1.5rem auto 0;
  max-width: 34rem;
  font-size: .99rem;
  color: var(--text);
}
.rate-custom {
  margin: 1.5rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--border);
  font-size: 1.02rem;
  color: var(--ink);
}
/* --taupe is 3.80:1 on blush and 4.07:1 on white, both under the 4.5 floor;
   this is the same darkened accent the deck and print pieces use. */
.rate-custom strong { font-family: var(--sans-bold); font-weight: 500; color: #7A4F36; }

/* --- Contact form response line -------------------------------------------
   Written by assets/js/contact-form.js after a submission. Hidden until there
   is something to say, and announced via role="status" so screen readers hear
   the result without the focus moving. */
.form-out {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  font-size: .97rem;
  line-height: 1.5;
}
.form-out.is-sent {
  background: var(--taupe-soft);
  color: var(--ink);
  border-left: 3px solid var(--taupe-dark);
}
/* Failure and invalid share a treatment: both mean "nothing was sent, try
   again". #8A3A2A is the palette's umber pushed red enough to read as a
   problem without leaving the family. 5.6:1 on blush. */
.form-out.is-failed,
.form-out.is-invalid {
  background: #FBEAE6;
  color: #8A3A2A;
  border-left: 3px solid #8A3A2A;
}