/* Rooted Vision Studio: design system.
   Carried over from Heidi's original site: sage green (#7d8d68), warm tan (#d4c7b4), cream (#f9f4ea)
   and bark (#38312f); El Messiri for headings, Ubuntu for body; pill buttons; the sage-to-tan gradient
   under the header. Built upon: one spacing scale, one control radius, one section rhythm, tangible
   nano-glass surfaces for the forms. The body is a non-scrolling shell: the header sits above
   #siteScroll, so nothing is pinned and the header never drifts inside a render iframe. */

@font-face { font-family: "El Messiri"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("https://lovable-crab-328.convex.cloud/api/storage/df55564d-c37c-4447-b9e2-61f489546e47") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 300; font-display: swap; src: url("https://lovable-crab-328.convex.cloud/api/storage/a832eded-4de5-4d50-8822-055a7d9ededa") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://lovable-crab-328.convex.cloud/api/storage/ff859de7-286d-4322-b108-381d84d9ffd7") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: italic; font-weight: 400; font-display: swap; src: url("https://lovable-crab-328.convex.cloud/api/storage/7bcf5e83-61d7-4fb1-b798-20b0571a91d8") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap; src: url("https://lovable-crab-328.convex.cloud/api/storage/237c669e-f5dd-4a0f-8127-01019b2872a0") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://lovable-crab-328.convex.cloud/api/storage/8dc0dc7c-8392-4054-bde2-37137e8e3e18") format("woff2"); }

:root {
  /* palette, read off the original site */
  --sage: #7d8d68;
  --sage-2: #66755a;
  --sage-3: #93a07f;
  --sage-soft: #cfd6c2;
  --tan: #d4c7b4;
  --tan-2: #e4dacb;
  --cream: #f9f4ea;
  /* Cream, warmed toward Sand. There is no white anywhere in this file — but plain
     bands painted in Cream sat between Sand bands and READ as white, which is the thing
     Heidi does not want. This tone is mixed from two colours already in the palette
     (Cream #f9f4ea toward Sand #d4c7b4), so the band is unmistakably a colour while
     staying clearly lighter than Sand. It paints the plain .section bands. */
  --cream-2: #f1ebdd;
  /* NO TRUE WHITE ANYWHERE. Cream is the brand's alternative to white (Primary N.4).
     --white is kept only so older rules keep resolving; it points at Cream. */
  --white: #f9f4ea;
  --bark: #38312f;
  --bark-2: #5b524d;
  --bark-3: #2c2725;
  /* The rest of the brand palette, from "03 RVS Colour Palette + Application" (Bel Lavratti,
     June 2025). These were missing from the site entirely. */
  --wine: #654a4d;        /* Primary N.2 */
  --accent-green: #575d3f; /* Accent N.1 */
  --accent-red: #b9492b;   /* Accent N.2 */
  --accent-yellow: #fdba70;/* Accent N.3 */
  --accent-pink: #e3c7bd;  /* Accent N.4 — the second light tone */
  --sand: #d4c7b4;         /* Accent N.5, same value as --tan */
  --line: rgba(56, 49, 47, 0.12);
  --line-soft: rgba(56, 49, 47, 0.08);
  /* aliases the templates already use */
  --paper: var(--cream);
  --paper-2: var(--tan);
  --ink: var(--bark);
  --ink-2: var(--bark-2);
  --moss: var(--sage);
  --moss-2: var(--sage-2);
  --moss-soft: var(--sage-soft);
  --earth: var(--sage-2);
  --clay: var(--sage);
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 72px;
  --r: 999px;
  --r-card: 18px;
  --r-field: 12px;
  --wrap: 1180px;
  --wrap-n: 760px;
  --serif: "El Messiri", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rhythm: clamp(64px, 8vw, 120px);
  --rhythm-tight: clamp(40px, 5vw, 72px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* nano texture: one tiled monochrome grain, used at ~5% on glass and dark fields */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; background: var(--cream); }
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--bark);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
#siteScroll {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* The sheet lives outside #siteScroll, so wheel and touch over it never reach the page scroller;
   the page keeps its scrollbar and its position, and nothing shifts when the sheet opens. */
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 8px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: 0.02em; text-wrap: balance; color: var(--bark); }
::selection { background: var(--sage-soft); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--bark); color: var(--cream); padding: 8px 12px; border-radius: var(--r); z-index: 99; }
.skip:focus { left: 8px; }

/* ---------- type ---------- */
.hd-xl { font-size: clamp(32px, 4.4vw, 54px); }
.hd-lg { font-size: clamp(27px, 3vw, 38px); }
.hd-md { font-size: clamp(24px, 2.6vw, 32px); }
.hd-sm { font-size: clamp(21px, 1.9vw, 25px); }
.serif { font-family: var(--serif); }
.word { font-family: var(--serif); font-weight: 400; font-size: clamp(50px, 7.5vw, 100px); line-height: 0.95; color: var(--sage); letter-spacing: 0.01em; margin: 0 0 var(--s2); text-transform: lowercase; }
.section-dark .word { color: var(--sage-soft); }
.eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-2); font-weight: 500; margin: 0 0 var(--s2); }
.section-dark .eyebrow { color: var(--sage-soft); }
.term { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bark-2); margin: 0 0 var(--s1); font-weight: 500; }
.lede { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.4; color: var(--bark); max-width: 40em; }
.lede-prose p { font-size: clamp(16px, 1.25vw, 18px); color: var(--bark-2); }
.prose { max-width: 42em; }
.prose p { margin-bottom: 1.15em; }
.prose-wide { max-width: 60em; }
.muted { color: var(--bark-2); }
.serif-lead { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.35; color: var(--sage-2); }
.serif-lead p { margin-bottom: 0.7em; }
.section-dark .serif-lead { color: var(--sage-soft); }
.note-fill { font-size: 14px; color: var(--bark-2); margin-top: var(--s2); padding-left: 14px; border-left: 2px solid var(--sage); }

/* ---------- layout ---------- */
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }
.wrap-n { width: min(var(--wrap-n), calc(100% - 48px)); margin-inline: auto; }
/* Every plain band is painted, never left to show through as bare page. .section-cream
   (Sand) and .section-dark are defined later in this file and still win. */
.section { padding-block: var(--rhythm); background: var(--cream-2); }
.section-tight { padding-block: var(--rhythm-tight); }
/* Deliberate trims to the vertical rhythm, named for the fraction they take off, so a
   later reader sees the intent rather than a magic number. Two classes beat .section
   on specificity, so no !important is needed. */
.section.pt-half { padding-top: calc(var(--rhythm) / 2); }
/* A quarter of the remaining gap closed again, on top of pt-half: 0.5 × 0.75 = 0.375. */
.section.pt-3eighths { padding-top: calc(var(--rhythm) * 0.375); }
/* A quarter of the full rhythm — the tightest of the pt- utilities. */
.section.pt-quarter { padding-top: calc(var(--rhythm) * 0.25); }
/* A statement that carries its own line breaks doesn't need the measure cap;
   each line is already the length Heidi chose. */
.statement-lines { max-width: none; }
.section.pt-3q { padding-top: calc(var(--rhythm) * 0.75); }
.section.pb-3q { padding-bottom: calc(var(--rhythm) * 0.75); }

/* A centred display sentence — bigger than a lede, sized like a heading. */
.statement { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.7vw, 36px); line-height: 1.34; color: var(--bark); max-width: 24em; margin: 0 auto; text-wrap: pretty; }

/* A mark centred at the top of each pane, with the copy centred under it. */
.cards-topmark .card, .cards-topmark .tile { text-align: center; }
.cards-topmark .card-icon { margin-left: auto; margin-right: auto; object-position: center; }
.cards-topmark .more { display: block; text-align: center; }
/* This one mark sits smaller inside its own canvas than the rest of the set, so it needs a
   nudge to read at the same visual weight. Scaling the element, not the box, keeps the grid. */
.card-icon[src$="vectors-icons-earth-05.png"] { transform: scale(1.3); }

/* Value panes in the brand green, matching the word that heads them. */
.cards-green .card { background: var(--sage); border-color: rgba(56, 49, 47, 0.14); box-shadow: 0 1px 2px rgba(56, 49, 47, 0.08); }
.cards-green .card { text-align: center; }
.cards-green .card h3, .cards-green .card p { color: var(--bark); }
.cards-green .card-icon { margin-left: auto; margin-right: auto; object-position: center; }

.section-cream { background: var(--tan); }
.section-white { background: var(--white); }
.section-dark { position: relative; background: var(--bark); color: var(--cream); isolation: isolate; }
.section-dark::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.06; pointer-events: none; z-index: -1; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--cream); }
.section-dark .lede, .section-dark .muted { color: #e9e2d6; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
/* Hero copy starts level with the top of its photograph, on every page.
   THIS RULE HAD NEVER WORKED. It lived as a bare `.split-top` ABOVE `.split`, so at equal
   specificity `.split`'s align-items:center won on source order and the copy sat vertically
   centred against a tall photo — dropping the eyebrow and the display word well below the
   picture's top edge. It now sits after `.split` and out-specifies it, and it applies to every
   hero rather than only the pages that remembered to ask for it. */
.hero .split,
.split.split-top { align-items: start; }
.split > *, .grid > *, .pkg-row > *, .post-grid > *, .gallery > *, .foot-inner > *, .article-nav > * { min-width: 0; }
.grid { display: grid; gap: var(--s3); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.center { text-align: center; }
.center .lede, .center .prose { margin-inline: auto; }
.center .btn-row { justify-content: center; }
.mt-1 { margin-top: var(--s2); }
.mt-2 { margin-top: var(--s4); }
.mt-3 { margin-top: var(--s5); }

/* ---------- header: the sage band from the original site, above the scroller, never pinned ---------- */
.topbar {
  flex: 0 0 auto;
  display: grid;
  /* minmax(0, 1fr) on the outer columns, NOT 1fr: a bare 1fr makes both sides match the
     WIDER one (the Get in Touch button + socials), which squeezed the centre nav below the
     width its five labels need and pushed a label onto its own line. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  padding: 20px clamp(18px, 3vw, 40px);
  background: var(--sage);
  color: var(--bark);
  transition: padding 0.3s var(--ease-out);
  position: relative;
  z-index: 2;
}
.topbar.condensed { padding-top: 10px; padding-bottom: 10px; box-shadow: 0 1px 0 rgba(56, 49, 47, 0.08); }
.brand { display: flex; align-items: center; justify-self: start; }
.brand img { height: 56px; width: auto; transition: height 0.3s var(--ease-out); }
.topbar.condensed .brand img { height: 42px; }
.mainnav { display: flex; gap: 2px; justify-self: center; flex-wrap: nowrap; }
/* white-space + flex-shrink:0 together guarantee a nav label can never break onto a
   second line or collide with its neighbour, whatever the window width. */
.mainnav a { padding: 8px 14px; border-radius: var(--r); font-size: 16px; color: var(--bark); transition: background 0.15s, color 0.15s; white-space: nowrap; flex-shrink: 0; }
.mainnav a:hover { background: rgba(249, 244, 234, 0.28); }
.mainnav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--bark); text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* The three practice areas hang under Services. Opens on hover AND on focus-within, so a
   keyboard reaches it; the "Services" link itself stays clickable, which is what a touch tap
   gets (the three are also listed in the mobile panel and the footer, so no one is stranded). */
.navgroup { position: relative; display: flex; }
.submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 252px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px; border-radius: 16px; background: var(--cream);
  box-shadow: 0 1px 2px rgba(56, 49, 47, 0.1), 0 20px 46px -20px rgba(56, 49, 47, 0.5);
  opacity: 0; visibility: hidden; translate: 0 6px; z-index: 40;
  transition: opacity 0.18s var(--ease-out), visibility 0.18s, translate 0.18s var(--ease-out);
}
.navgroup:hover .submenu, .navgroup:focus-within .submenu { opacity: 1; visibility: visible; translate: 0 0; }
.submenu a { padding: 11px 14px; border-radius: 11px; font-size: 14.5px; line-height: 1.3; color: var(--bark); white-space: nowrap; text-align: left; }
.submenu a:hover, .submenu a:focus-visible { background: var(--sage-soft); }
@media (prefers-reduced-motion: reduce) { .submenu { transition: none; } }

.nav-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.social-row { display: flex; gap: 8px; }
.social-row a { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(249, 244, 234, 0.92); color: var(--bark); box-shadow: inset 0 1px 0 rgba(249, 244, 234, 0.7), 0 1px 2px rgba(56, 49, 47, 0.1); transition: transform 0.2s var(--ease-out), background 0.2s; }
.social-row a:hover { transform: translateY(-1px); background: var(--white); }
.social-row svg { width: 16px; height: 16px; fill: currentColor; }
.topbar .btn-outline { color: var(--white); border-color: rgba(249, 244, 234, 0.9); }
.topbar .btn-outline:hover { background: rgba(249, 244, 234, 0.14); border-color: var(--cream); }
.nav-burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(56, 49, 47, 0.3); background: transparent; border-radius: var(--r); cursor: pointer; padding: 10px; flex-direction: column; justify-content: center; gap: 5px; justify-self: end; }
.nav-burger span { display: block; height: 2px; background: var(--bark); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-panel { position: fixed; inset: 0; z-index: 60; background: var(--cream); overflow-y: auto; }
.mobile-panel[hidden] { display: none; }
.mobile-panel-inner { padding: 96px 28px 40px; display: flex; flex-direction: column; gap: var(--s3); }
.mobile-panel .mainnav { flex-direction: column; gap: 2px; justify-self: stretch; }
.mobile-panel .mainnav a { font-size: 26px; font-family: var(--serif); font-weight: 600; padding: 10px 8px; }
.mobile-panel .mainnav a.sub { font-size: 17px; font-family: var(--sans); font-weight: 400; padding-left: 24px; }
.mobile-panel .nav-actions { flex-direction: column; align-items: stretch; justify-self: stretch; }
.mobile-panel .social-row { justify-content: center; }
.mobile-panel .social-row a { background: var(--tan); }
.mobile-close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; border-radius: var(--r); font-size: 22px; cursor: pointer; color: var(--bark); }
body.menu-open .topbar { visibility: hidden; }

/* the gradient the original header wore: sage fading into the tan of the first block */
.hero { position: relative; background: linear-gradient(180deg, var(--sage) 0, var(--sage-3) 18%, var(--tan) 62%, var(--tan) 100%); }
.hero-short { background: linear-gradient(180deg, var(--sage) 0, var(--sage-3) 22%, var(--tan) 78%); }
.hero .eyebrow { color: var(--bark-2); }
/* --sage-2 sat at roughly 1.7:1 on the hero's own sage gradient, so the display word
   all but vanished. --bark is the ink the hero's h1 already wears on the same band. */
.hero .word { color: var(--bark); }

/* ---------- controls: pills, as on the original ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--r); font-size: 15px; font-weight: 500; border: 1px solid transparent; cursor: pointer; font-family: var(--sans); line-height: 1.2; letter-spacing: 0.01em; transition: transform 0.2s var(--ease-out), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; white-space: normal; text-align: center; max-width: 100%; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--sage); color: var(--white); box-shadow: inset 0 1px 0 rgba(249, 244, 234, 0.22), 0 1px 2px rgba(56, 49, 47, 0.12); }
.btn-primary:hover { background: var(--sage-2); }
.btn-ghost, .btn-outline { background: transparent; color: var(--bark); border-color: rgba(56, 49, 47, 0.7); }
.btn-ghost:hover, .btn-outline:hover { background: rgba(56, 49, 47, 0.06); border-color: var(--bark); }
.btn-white { background: var(--white); color: var(--bark); border-color: var(--white); box-shadow: 0 1px 2px rgba(56, 49, 47, 0.1); }
.btn-white:hover { background: var(--accent-pink); }
.section-dark .btn-ghost { color: var(--cream); border-color: rgba(249, 244, 234, 0.7); }
.section-dark .btn-ghost:hover { border-color: var(--cream); background: rgba(249, 244, 234, 0.08); }
.section-dark .btn-primary { background: var(--cream); color: var(--bark); }
.section-dark .btn-primary:hover { background: var(--accent-pink); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--s4); }
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--sage-2); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(125, 141, 104, 0.5); }
.btn-link:hover { color: var(--bark); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 96px); }
.hero-short { padding-block: clamp(48px, 6vw, 96px) clamp(24px, 3vw, 48px); }
.hero-photo .photo, .split > .reveal > .photo { margin: 0; }
.hero h1 { margin-bottom: 20px; }
.hero .lede + .hero-line, .hero .lede + .btn-row { margin-top: var(--s3); }
.hero .word + h1 { margin-top: 4px; }
.hero .photo.tall img { object-position: center 30%; }
/* pos-right needs to out-specify the .hero .photo.tall rule above, or a landscape subject
   sitting in the right third of the frame gets cropped off by the portrait hero crop. */
.hero .photo.tall.pos-right img { object-position: 82% center; }
/* The Culture & Systems photograph is a landscape frame of two people in conversation.
   A 4/5 hero crop taken from the centre keeps both of them; the default "center 30%"
   would slide up into the hedge behind them. */
.hero .photo.tall.pos-mid img { object-position: center 52%; }
.hero-line { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1.7vw, 23px); color: var(--bark-2); margin-top: var(--s3); }

/* ---------- surfaces: cards, tiles, lists (nano-glass edge, one light from above) ---------- */
.card, .tile { position: relative; background: rgba(249, 244, 234, 0.72); border: 1px solid rgba(56, 49, 47, 0.1); border-radius: var(--r-card); padding: 28px; box-shadow: inset 0 1px 0 rgba(249, 244, 234, 0.7), 0 1px 2px rgba(56, 49, 47, 0.04), 0 12px 32px -22px rgba(56, 49, 47, 0.25); }
.card h3, .tile h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.tile { display: flex; flex-direction: column; transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s; }
.tile:hover { transform: translateY(-2px); border-color: rgba(125, 141, 104, 0.55); box-shadow: inset 0 1px 0 rgba(249, 244, 234, 0.7), 0 2px 4px rgba(56, 49, 47, 0.05), 0 18px 40px -22px rgba(56, 49, 47, 0.3); }
.tile p { margin-bottom: 0; }
.card-ask { display: flex; flex-direction: column; }
.card-ask .card-cta { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.card-ask .card-cta:last-child { margin-bottom: 0; }
.card-ask .btn-link { display: inline-block; }
.tile .more { display: inline-block; margin-top: auto; padding-top: 14px; color: var(--sage-2); font-weight: 500; font-size: 14px; }
.section-dark .card, .section-dark .tile { background: rgba(249, 244, 234, 0.06); border-color: rgba(249, 244, 234, 0.16); color: var(--cream); box-shadow: inset 0 1px 0 rgba(249, 244, 234, 0.08); }
.section-dark .tile .more { color: var(--sage-soft); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 26px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--sage); }
.section-dark .checklist li::before { background: var(--sage-soft); }
.numlist { counter-reset: n; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.numlist li { counter-increment: n; position: relative; padding-left: 56px; }
.numlist li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.3; color: var(--sage); }
.section-dark .numlist li::before { color: var(--sage-soft); }
.laws .numlist { columns: 2; column-gap: var(--s5); display: block; }
.laws .numlist li { break-inside: avoid; margin-bottom: var(--s2); }
.quote { background: rgba(249, 244, 234, 0.72); border: 1px solid rgba(56, 49, 47, 0.1); border-left: 3px solid var(--sage); border-radius: var(--r-card); padding: 26px 30px; margin: 0; box-shadow: inset 0 1px 0 rgba(249, 244, 234, 0.7); }
.quote .q { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; margin: 0; }
.quote .q::before { content: "\201C"; }
.quote .q::after { content: "\201D"; }
.quote .who { margin: 14px 0 0; font-size: 13px; color: var(--bark-2); letter-spacing: 0.06em; text-transform: uppercase; }
.photo { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--tan-2); margin: 0; min-width: 0; max-width: 100%; isolation: isolate; box-shadow: 0 1px 2px rgba(56, 49, 47, 0.08), 0 24px 48px -28px rgba(56, 49, 47, 0.35); }
.photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(249, 244, 234, 0.28), inset 0 1px 0 rgba(249, 244, 234, 0.4), inset 0 -40px 60px -40px rgba(56, 49, 47, 0.25); pointer-events: none; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.tall { aspect-ratio: 4 / 5; }
.photo.wide { aspect-ratio: 16 / 10; }
.photo.pos-right img { object-position: 82% center; }
.photo-missing { display: none; }

/* The studio's own vector marks, one above each column — the bespoke icons the original
   site carried. The art is dark-on-transparent, so on a dark section it is flipped to cream
   rather than swapped for a second file. */
.card-icon { display: block; width: 58px; height: 58px; object-fit: contain; object-position: left center; margin: 0 0 var(--s2); }
.section-dark .card-icon { filter: brightness(0) invert(1); opacity: 0.92; }
@media (max-width: 720px) { .card-icon { width: 48px; height: 48px; } }
.img-missing { visibility: hidden; }
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); align-items: center; }
.logos img { max-height: 56px; width: auto; margin: 0 auto; opacity: 0.8; filter: grayscale(1); mix-blend-mode: multiply; }
.awards-list { columns: 2; column-gap: var(--s5); }
.awards-list p { break-inside: avoid; font-family: var(--serif); font-weight: 500; font-size: 20px; margin-bottom: 8px; }
/* Three across, not four, and a wider frame — these are the work, so they carry the page. */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.gallery .photo { aspect-ratio: 3 / 2; }
.scope { font-size: 14px; color: var(--bark-2); margin-top: 12px; }
.scope-word { font-weight: 500; color: var(--sage-2); }
.five { display: grid; gap: var(--s4); }
.five-p { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.35; margin-bottom: 12px; }
.five-item .checklist { margin-left: 4px; }

/* ---------- packages ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.jump a { font-size: 14px; padding: 7px 14px; border: 1px solid rgba(56, 49, 47, 0.18); border-radius: var(--r); color: var(--bark); background: rgba(249, 244, 234, 0.6); box-shadow: inset 0 1px 0 rgba(249, 244, 234, 0.6); }
.jump a:hover { border-color: var(--sage-2); color: var(--sage-2); background: var(--white); }
.pkg-section { padding-block: var(--rhythm-tight); scroll-margin-top: var(--s3); }
/* pkg-section runs on --rhythm-tight, not --rhythm, so its trim is its own. */
.pkg-section.pkg-first { padding-top: calc(var(--rhythm-tight) * 0.75); }
.pkg-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.pkg-head .amt { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3vw, 38px); color: var(--sage-2); margin: 8px 0 0; }
.pkg-head .note { font-size: 14px; color: var(--bark-2); margin-top: 12px; max-width: 28em; }
.pkg-body .who { font-size: clamp(16px, 1.25vw, 18px); color: var(--bark-2); max-width: 40em; }
.pkg-body .checklist { margin-top: var(--s2); }
.pkg-body .btn-row { margin-top: var(--s3); }

/* ---------- faq ---------- */
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--serif); font-weight: 600; font-size: 21px; list-style: none; display: flex; justify-content: space-between; gap: var(--s2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sage); font-size: 26px; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-a { padding-top: 12px; color: var(--bark-2); max-width: 46em; }

/* ---------- Direction B: marks lead ----------
   The home page opens on one of the studio's own marks rather than a photograph,
   the audience columns are centred under oversized marks, and "what I do" reads as
   icon-led rows instead of a third card grid. Scoped to the classes below so the
   service pages keep the card treatment they already have. */

/* 960, not 820: at the display size "Designer of Hearth Food Garden." needs about 840px, so
   the narrower column split it across two lines. Each sentence now holds its own line on a
   desktop and still wraps naturally on a phone. */
.hero-centered .wrap { max-width: 960px; text-align: center; }
.hero-centered .btn-row { justify-content: center; }
.hero-centered .lede { margin-left: auto; margin-right: auto; }
.mark-xl { display: block; width: clamp(72px, 8vw, 104px); height: auto; margin: 0 auto var(--s3); }
/* The brand logo opening the home page. Sized off the viewport so it stays commanding on a
   desktop without swallowing a phone screen. */
.hero-logo { display: block; width: clamp(190px, 26vw, 340px); height: auto; margin: 0 auto var(--s3); }
/* The home headline runs a touch smaller than elsewhere. At 54px these two sentences ran
   nearly 900px wide, which made the 333px logo above them read as small — a width problem
   more than a size one. Scoped to the home hero so the About page heading is untouched. */
.hero-centered .hd-xl { font-size: clamp(30px, 3.9vw, 48px); }
/* One hero line per span. Both hero paragraphs use .lede, so they match in size and face —
   they previously differed: one was .lede, the other .hero-line at a different clamp and colour. */
.hl { display: block; }
.hero-say { max-width: none; }
.hero-say + .hero-say { margin-top: var(--s3); }

/* centred audience columns: no card chrome, the mark carries the weight */
.cards-centered { gap: var(--s5); }
.cards-centered .card { background: transparent; border: 0; box-shadow: none; padding: 0; text-align: center; }
.cards-centered .card-icon { width: 84px; height: 84px; margin: 0 auto var(--s2); object-position: center; }

/* what I do, as rows: mark on the left, copy on the right */
.do-rows { display: flex; flex-direction: column; gap: var(--s4); }
.do-rows .tile { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s4); align-items: center; background: transparent; border: 0; box-shadow: none; padding: var(--s3) 0; border-top: 1px solid rgba(249, 244, 234, 0.18); }
.do-rows .tile:hover { transform: none; box-shadow: none; }
.do-rows .card-icon { width: 76px; height: 76px; grid-row: span 3; align-self: center; margin: 0; }
.do-rows .tile h3 { grid-column: 2; margin-bottom: 6px; }
.do-rows .tile p { grid-column: 2; margin-bottom: 0; }
.do-rows .tile .more { grid-column: 2; padding-top: 10px; }

/* a testimonial that sits ON a photograph rather than a cream card */
.quote-bleed { position: relative; isolation: isolate; min-height: 420px; display: flex; align-items: center; justify-content: center; padding: var(--s6) clamp(24px, 8vw, 140px); background-size: cover; background-position: center 42%; }
.quote-bleed::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(56, 49, 47, 0.42) 0%, rgba(56, 49, 47, 0.62) 100%); z-index: -1; }
.quote-bleed blockquote { margin: 0; }
.quote-bleed .q { font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2.5vw, 34px); line-height: 1.4; color: var(--cream); margin: 0; text-align: center; text-wrap: pretty; }
.quote-bleed .who { margin: var(--s3) 0 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(249, 244, 234, 0.82); text-align: center; }

/* the single deliberate portrait */
.photo.arch { border-radius: 999px 999px var(--r-card) var(--r-card); aspect-ratio: 4 / 5; }

@media (max-width: 780px) {
  .do-rows .tile { grid-template-columns: 1fr; gap: var(--s2); }
  .do-rows .card-icon { grid-row: auto; width: 62px; height: 62px; }
  .do-rows .tile h3, .do-rows .tile p, .do-rows .tile .more { grid-column: 1; }
  .cards-centered .card-icon { width: 70px; height: 70px; }
  .quote-bleed { min-height: 340px; }
}

/* ---------- how booking works: the numbered steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.step-n { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sage); color: var(--cream); font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1; }
.step h3 { margin: 0 0 6px; }
.step p { margin: 0; color: var(--bark-2); font-size: 15px; line-height: 1.62; }
@media (max-width: 780px) { .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }

/* ---------- journal ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.post { display: block; }
.post .photo { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.post-date { font-size: 13px; color: var(--bark-2); letter-spacing: 0.04em; margin-bottom: 6px; }
.post h3 { transition: color 0.15s; }
.post:hover h3 { color: var(--sage-2); }
.post .dek { color: var(--bark-2); font-size: 15px; margin-top: 8px; }
.post .more { color: var(--sage-2); font-weight: 500; font-size: 14px; display: inline-block; margin-top: 8px; }
.article-head { text-align: left; }
.article-photo { margin-top: var(--s5); }
.article-body { margin-top: var(--s5); font-size: clamp(16px, 1.25vw, 18px); }
.article-body h2 { margin: 1.5em 0 0.5em; }
.article-body .label { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-2); font-weight: 500; margin: 1.4em 0 0.6em; }
.article-body .article-list { padding-left: 22px; margin: 0 0 1.15em; }
.article-body .article-list li { margin-bottom: 0.5em; }
.article-body blockquote { margin: 1.6em 0; padding-left: 22px; border-left: 3px solid var(--sage); font-family: var(--serif); font-weight: 500; font-size: 1.2em; line-height: 1.4; color: var(--sage-2); }
.article-body blockquote p { margin: 0; }
.article-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.article-nav-link { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.3; }
.article-nav-link .term { display: block; }
.article-nav-link.next { text-align: right; }
.article-nav-link:hover { color: var(--sage-2); }

/* ---------- forms (Cloud embeds inherit these hooks) ---------- */
.form-shell { position: relative; background: rgba(249, 244, 234, 0.78); border: 1px solid rgba(56, 49, 47, 0.1); border-radius: var(--r-card); padding: clamp(24px, 3vw, 40px); box-shadow: inset 0 1px 0 rgba(249, 244, 234, 0.7), 0 1px 2px rgba(56, 49, 47, 0.04), 0 18px 44px -28px rgba(56, 49, 47, 0.3); isolation: isolate; }
.form-shell::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grain); opacity: 0.045; pointer-events: none; z-index: -1; mix-blend-mode: multiply; }
.form-shell > h3 { margin-bottom: 8px; }
.form-shell > p { color: var(--bark-2); margin-bottom: 22px; }
.form-shell > p:last-of-type { margin-bottom: var(--s3); }
.form-mount { min-height: 48px; }
.rv-form { display: grid; gap: 20px; }
.rv-group { display: grid; gap: 8px; }
.rv-label { font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--bark-2); }
.rv-input, .form-mount input:not([type="checkbox"]):not([type="radio"]), .form-mount select, .form-mount textarea { width: 100%; font: inherit; font-size: 16px; padding: 13px 16px; border: 1px solid rgba(56, 49, 47, 0.18); border-radius: var(--r-field); background: rgba(249, 244, 234, 0.9); color: var(--bark); box-shadow: inset 0 1px 2px rgba(56, 49, 47, 0.04); transition: border-color 0.2s, box-shadow 0.2s; }
.form-mount textarea { min-height: 130px; resize: vertical; }
.rv-input:focus, .form-mount input:focus, .form-mount select:focus, .form-mount textarea:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(125, 141, 104, 0.22); }
.form-mount input[type="checkbox"], .form-mount input[type="radio"] { accent-color: var(--sage); width: 18px; height: 18px; }
.form-mount button:not(.btn) { background: var(--sage); color: var(--white); border: 0; border-radius: var(--r); padding: 14px 26px; font: inherit; font-weight: 500; cursor: pointer; }
.form-mount button:not(.btn):hover, .form-mount .btn-primary:hover { background: var(--sage-2); }
.form-mount .btn { margin-top: 6px; }
.rv-note { font-size: 14px; color: var(--bark-2); }
.embed-fallback { margin: 0; }
.form-vault { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- the Get in Touch modal: a nano-glass sheet, centered where the visitor already is ---------- */
.rv-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.rv-modal[hidden] { display: none; }
.rv-modal-scrim { position: absolute; inset: 0; background: rgba(56, 49, 47, 0.1); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); opacity: 0; transition: opacity 0.45s ease; }
.rv-modal.on .rv-modal-scrim { opacity: 1; }
.rv-modal-card {
  position: relative;
  width: min(660px, 100%);
  max-height: min(90vh, 100%);
  display: flex;
  flex-direction: column;
  background: rgba(249, 244, 234, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(56, 49, 47, 0.14);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(249, 244, 234, 0.6), inset 0 -1px 0 rgba(56, 49, 47, 0.05), 0 1px 2px rgba(56, 49, 47, 0.06), 0 22px 56px -30px rgba(56, 49, 47, 0.32);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition: transform 0.55s var(--ease-out), opacity 0.4s ease;
}
.rv-modal-card::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.05; pointer-events: none; z-index: -1; mix-blend-mode: multiply; }
.rv-modal.on .rv-modal-card { opacity: 1; transform: none; }
.rv-modal-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: 26px 28px 8px; }
.rv-modal-head h2 { font-size: clamp(24px, 2.4vw, 30px); }
.rv-modal-head .eyebrow { margin-bottom: 6px; }
.rv-modal-close { flex: 0 0 auto; width: 40px; height: 40px; margin: -6px -10px 0 0; border: 0; background: transparent; color: var(--bark-2); font-size: 26px; line-height: 1; cursor: pointer; border-radius: 50%; transition: color 0.2s, transform 0.2s var(--ease-out), background 0.2s; }
.rv-modal-close:hover { color: var(--bark); transform: scale(1.08); background: rgba(56, 49, 47, 0.06); }
.rv-modal-body { min-height: 0; overflow-y: auto; padding: 4px 28px 28px; overscroll-behavior: contain; }
.rv-modal-body > p { color: var(--bark-2); margin-bottom: 18px; }
.rv-modal-context { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 18px; padding: 8px 14px; border-radius: var(--r); background: rgba(125, 141, 104, 0.16); border: 1px solid rgba(125, 141, 104, 0.35); box-shadow: inset 0 1px 0 rgba(249, 244, 234, 0.5); color: var(--sage-2); font-size: 14px; font-weight: 500; }
.rv-modal-context .btn-link { color: var(--bark-2); font-weight: 400; font-size: 13px; text-decoration-color: rgba(56, 49, 47, 0.3); }
.rv-modal-context .btn-link:hover { color: var(--bark); }
.rv-modal .form-mount { min-height: 120px; }
.rv-modal .form-mount textarea { min-height: 110px; }

/* ---------- contact ---------- */
.contact-lines p { margin-bottom: 0.5em; }
.contact-card { border-top: 1px solid var(--line); padding-top: var(--s3); color: var(--bark-2); }
.contact-card a { color: var(--sage-2); font-weight: 500; }
.contact-card p { margin-bottom: 0.6em; }

/* ---------- footer: the bark block from the original ---------- */
.foot { position: relative; background: var(--bark); color: #e9e2d6; padding-block: var(--s6) var(--s4); isolation: isolate; }
.foot::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.06; pointer-events: none; z-index: -1; }
body:not(.app-ready) .foot { display: none; }
.foot-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.foot-brand img { height: 60px; width: auto; margin-bottom: var(--s2); }
.foot-brand p { max-width: 30em; color: #cfc7ba; font-size: 15px; }
.foot .col h4 { font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-soft); margin-bottom: 14px; font-weight: 500; }
.foot .col a { display: block; padding: 4px 0; color: #e9e2d6; }
.foot .col a:hover, .foot a:hover { color: var(--cream); }
.foot a { color: #e9e2d6; }
.foot .btn-link { color: #e9e2d6; text-decoration-color: rgba(233, 226, 214, 0.4); }
.foot-legal { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid rgba(249, 244, 234, 0.14); font-size: 13px; color: #b9b1a5; }
.foot-legal p { margin: 0; }

/* ---------- boot skeleton: the mount is never empty at first paint ---------- */
.site-main { min-height: 72vh; max-width: 100%; }
.boot { min-height: 72vh; padding-block: clamp(40px, 6vw, 88px); background: linear-gradient(180deg, var(--sage) 0, var(--sage-3) 18%, var(--tan) 62%); }
.boot-bar { height: 18px; border-radius: var(--r); background: rgba(249, 244, 234, 0.5); margin-bottom: 18px; animation: boot-pulse 1.4s ease-in-out infinite; }
.boot-bar.w60 { width: 60%; height: 44px; }
.boot-bar.w90 { width: 90%; }
.boot-bar.w40 { width: 40%; }
@keyframes boot-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---------- entrance: the hero fades in once on the final document; nothing is gated on scroll ---------- */
@keyframes rv-enter { from { opacity: 0; } to { opacity: 1; } }
.js-reveal .hero .reveal { animation: rv-enter 0.5s ease both; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .hero .reveal { animation: none; }
  .boot-bar { animation: none; }
  .btn, .tile, .topbar, .brand img, .rv-modal-card, .rv-modal-scrim, .rv-modal-close { transition: none; }
  .rv-modal-card { transform: none; }
}

/* ---------- 404 ---------- */
.notfound { padding-block: clamp(96px, 14vw, 180px); }

/* ---------- responsive ---------- */
/* 1180, not 1040: below this the brand + five nav labels + socials + the Get in Touch
   button genuinely do not fit on one line. At 1040 they were forced to overlap; the
   burger menu takes over here instead, while the page never scrolls sideways. */
@media (max-width: 1180px) {
  .topbar { grid-template-columns: 1fr auto; }
  .mainnav, .nav-actions { display: none; }
  .nav-burger { display: flex; }
  .mobile-panel .mainnav, .mobile-panel .nav-actions { display: flex; }
  .foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkg-row { grid-template-columns: 1fr; gap: var(--s3); }
}
@media (max-width: 720px) {
  .wrap, .wrap-n { width: calc(100% - 36px); }
  .split { grid-template-columns: 1fr; }
  .hero .split > :first-child { order: 1; }
  .hero .split > :last-child { order: 0; }
  .g3, .g2, .post-grid { grid-template-columns: minmax(0, 1fr); }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-inner { grid-template-columns: minmax(0, 1fr); }
  .awards-list, .laws .numlist { columns: 1; }
  .laws .numlist { display: grid; }
  .photo.tall { aspect-ratio: 4 / 4.4; }
  .btn-row .btn { flex: 1 1 auto; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav-link.next { text-align: left; }
  .word { font-size: clamp(44px, 15vw, 68px); }
  .rv-modal { padding: 12px; align-items: end; }
  .rv-modal-card { max-height: min(92vh, 100%); border-radius: 22px; }
  .rv-modal-head { padding: 22px 20px 6px; }
  .rv-modal-body { padding: 4px 20px 22px; }
}

/* Hand-placed line breaks are a desktop decision. On a phone the column is narrower than
   any of those lines, so forcing them just makes every line wrap again and the copy reads
   as a ragged ladder. Below 720px the words run back together and wrap naturally. */
@media (max-width: 720px) {
  .statement-lines .hl,
  .hero-say .hl { display: inline; }
  .statement-lines .hl + .hl::before,
  .hero-say .hl + .hl::before { content: " "; }
}

/* ---------- the three practice-area pages: one spacing and alignment rule ----------
   Leadership Mentoring, Culture & Systems Facilitation and Human Centered Design each
   wrap their panes in .svc so they share a single rhythm instead of each page carrying
   its own ad-hoc pt- utility. Every pane sits half a rhythm below the one above it, and
   every pane's own header is centred. Headings that live inside a two-column .split are
   part of that column's copy, not a pane header, so they stay left-aligned with the text
   they introduce. */
.svc .section { padding-top: calc(var(--rhythm) / 2); }
.svc .section .hd-lg { text-align: center; }
.svc .section .hd-lg + .lede { text-align: center; margin-inline: auto; }
.svc .section .split .hd-lg,
.svc .section .split .hd-lg + .lede { text-align: left; margin-inline: 0; }

/* ---------- Speaking formats: the page's fee anchor ----------
   Three cards, with the half-day workshop carried in sage so the eye lands on it first.
   The keynote is deliberately the quietest card of the three. */
/* padding-top clears the "Most requested" tab, which hangs 13px above its card. */
.fmt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: start; padding-top: 16px; }
.fmt {
  position: relative;
  padding: var(--s4) var(--s3) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--cream);
  box-shadow: 0 1px 2px rgba(56, 49, 47, 0.08);
  text-align: center;
}
.fmt > p:last-child { margin-bottom: 0; color: var(--bark-2); }
.fmt-lead { background: var(--sage); border-color: rgba(56, 49, 47, 0.14); }
.fmt-lead > p:last-child { color: var(--bark); }
.fmt-flag {
  position: absolute; top: -13px; left: 50%; translate: -50% 0;
  margin: 0; padding: 5px 14px; border-radius: var(--r);
  background: var(--bark); color: var(--cream);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.fmt-t { font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 1.6vw, 22px); margin: 0; }
.fmt-term { margin: 4px 0 0; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bark-2); }
.fmt-lead .fmt-term { color: var(--bark); }
.fmt-price { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 2.4vw, 33px); margin: var(--s2) 0 var(--s2); color: var(--bark); }
.fmt-note { max-width: 62ch; margin: var(--s4) auto 0; font-size: 14.5px; color: var(--bark-2); }
.fmt-note + .fmt-note { margin-top: var(--s2); }
@media (max-width: 860px) {
  .fmt-grid { grid-template-columns: 1fr; gap: var(--s4); }
}

/* One sentence per line. Paired with ui.sentences(). The same phone rule the hand-placed
   breaks use: below 720px the sentences run back together and wrap naturally, because the
   column is narrower than most single sentences and forcing breaks makes a ragged ladder. */
.sl { display: block; }
.sl + .sl { margin-top: 0.15em; }
@media (max-width: 720px) {
  .sl { display: inline; }
  .sl + .sl::before { content: " "; }
  .sl + .sl { margin-top: 0; }
}
/* A heading built from sentences rather than a title: each sentence sits fully on top of the
   next, at heading size, with the tighter leading a stacked heading needs. */
.hd-say { font-family: var(--serif); font-weight: 600; font-size: clamp(23px, 2.5vw, 34px); line-height: 1.28; color: var(--bark); margin: 0; text-wrap: pretty; }
.hd-say .sl + .sl { margin-top: 0.1em; }

/* The practice area's formal name, above the card's own title. */
.card-k { font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sage-2); font-weight: 500; margin: 0 0 5px; }
.section-dark .card-k { color: var(--sage-soft); }
.cards-green .card-k { color: var(--bark-2); }

/* A hero photograph that takes the height of the copy beside it, rather than imposing its
   own 4/5 frame. The grid child stretches to the row, the figure fills it, the image covers.
   Below 720px the columns stack, so the figure goes back to a fixed frame or it would
   collapse to nothing. */
.photo-match { align-self: stretch; display: grid; }
/* The image is taken out of flow so its natural height cannot feed the grid row; the row is
   then sized by the copy alone, the figure stretches to it, and the image fills the figure. */
.photo-match .photo { aspect-ratio: auto; height: auto; min-height: 0; }
.photo-match .photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 720px) {
  .photo-match { display: block; }
  .photo-match .photo { aspect-ratio: 4 / 4.4; }
}
/* .svc panes sit at half rhythm; this one asks for a quarter. Out-specifies .svc .section. */
.svc .section.pt-quarter { padding-top: calc(var(--rhythm) * 0.25); }