:root {
  --navy: #0b2341;
  --navy-deep: #06172b;
  --evergreen: #164f43;
  --evergreen-dark: #0d3d34;
  --ochre: #bd8c3c;
  --sand: #cfb48b;
  --cream: #f4eee5;
  --paper: #fffdf9;
  --ink: #14263c;
  --muted: #4f5d6b;
  --ochre-text: #7d5a1c;
  --rule: #d8c9b4;
  --focus: #e6a92e;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', sans-serif;
  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: clamp(1.125rem, 1.6vw, 1.25rem);
  --step-2: clamp(1.5rem, 2.5vw, 2rem);
  --step-3: clamp(2rem, 4vw, 3.5rem);
  --step-4: clamp(3.5rem, 7.25vw, 7rem);
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;
  --content: 80rem;
  --measure: 38rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; text-rendering: optimizeLegibility; }
body.drawer-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--evergreen-dark); text-underline-offset: .22em; text-decoration-thickness: .08em; }
a:visited { color: #55426e; }
a:hover { text-decoration-thickness: .14em; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -6rem; z-index: 1000; padding: .75rem 1rem; background: var(--paper); color: var(--navy); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.container { width: min(calc(100% - 2.5rem), var(--content)); margin-inline: auto; }

h1, h2, h3 { margin: 0; color: var(--navy); font-family: var(--font-display); font-weight: 500; line-height: .98; letter-spacing: -.035em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-2); line-height: 1.12; }
h3 { font-size: var(--step-1); line-height: 1.2; }
p { margin: 0 0 1em; max-width: var(--measure); }
.lead { color: #42576b; font-size: var(--step-1); line-height: 1.58; }
.eyebrow { margin-bottom: var(--space-3); color: var(--evergreen-dark); font-size: 1rem; font-weight: 700; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }
.eyebrow::after { content: ''; display: block; width: 4rem; height: 2px; margin-top: .65rem; background: var(--ochre); }

.site-header { position: relative; z-index: 100; border-bottom: 1px solid var(--rule); background: rgba(244, 238, 229, .96); }
.header-inner { min-height: 5.25rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-logo { display: inline-flex; align-items: center; gap: .8rem; color: var(--navy); font-size: .82rem; font-weight: 700; letter-spacing: .025em; line-height: 1.05; text-decoration: none; text-transform: uppercase; }
.site-logo:visited { color: var(--navy); }
.site-logo img { width: 3.25rem; height: 3.25rem; object-fit: cover; }
.site-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.6rem); }
.site-nav a { color: var(--navy); font-size: .92rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--evergreen); text-decoration: underline; text-underline-offset: .4rem; }
.nav-toggle { display: none; width: 3rem; height: 3rem; padding: .7rem; border: 1px solid var(--navy); background: transparent; color: var(--navy); }
.nav-toggle span { display: block; height: 2px; margin: .27rem 0; background: currentColor; }
.mobile-drawer { position: fixed; inset: 0; z-index: 200; display: none; padding: 1.25rem; background: var(--navy); color: var(--paper); }
.mobile-drawer[open] { display: block; }
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-5); border-bottom: 1px solid rgba(255,255,255,.25); font-weight: 700; }
.mobile-drawer-close { min-width: 4.5rem; min-height: 2.75rem; border: 1px solid currentColor; background: transparent; color: inherit; }
.mobile-drawer nav { display: grid; margin-top: var(--space-5); }
.mobile-drawer nav a { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.2); color: var(--paper); font-family: var(--font-display); font-size: 1.7rem; text-decoration: none; }

.founder-hero { overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--cream); }
.founder-hero-grid { min-height: clamp(38rem, 65vw, 46rem); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(24rem, .88fr); }
.founder-copy { align-self: center; padding: var(--space-7) clamp(2rem, 5vw, 5rem) var(--space-7) 0; }
.founder-copy h1 { max-width: 11ch; }
.founder-name { display: flex; gap: .65rem; margin: var(--space-4) 0 var(--space-3); color: var(--navy); font-size: .95rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.founder-name span:last-child { color: var(--evergreen-dark); }
.founder-copy .lead { max-width: 35rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: var(--space-5); }
.btn { min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; padding: .75rem 1.4rem; border: 1px solid transparent; font-weight: 700; text-decoration: none; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.btn:visited { color: inherit; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--navy); color: var(--paper); }
.btn--primary:visited { color: var(--paper); }
.btn--primary:hover { background: var(--evergreen-dark); }
.btn--secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--secondary:visited { color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: var(--paper); }
.text-link { display: inline-block; padding-block: .65rem; color: var(--evergreen-dark); font-weight: 600; }
.text-link--light, .text-link--light:visited { color: var(--paper); }
.brand-composition { position: relative; min-height: 100%; overflow: hidden; background: var(--paper); }
.shape { position: absolute; display: block; }
.shape--navy { inset: 0 36% 27% 0; border-radius: 0 0 100% 0; background: var(--navy); }
.shape--green { inset: 26% 0 0 16%; border-radius: 100% 0 0 0; background: var(--evergreen-dark); }
.shape--ochre { width: 57%; height: 52%; right: 0; top: 10%; border-radius: 100% 0 0 100%; background: var(--ochre); }
.shape--sand { width: 64%; height: 34%; right: -18%; bottom: -6%; border-radius: 100% 0 0 0; background: var(--sand); }

.editorial-row { display: grid; grid-template-columns: 5rem minmax(13rem, .75fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.editorial-row > * { margin: 0; }
.section-number { color: var(--evergreen-dark); font-family: var(--font-display); font-size: 3.5rem; line-height: .8; }
.truth-band { background: #eee4d5; }
.truth-band .editorial-row { align-items: center; }
.truth-band h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.truth-band p:last-child { font-size: 1.1rem; line-height: 1.5; }

.vision-band { background: var(--evergreen-dark); color: var(--paper); }
.vision-band h2, .vision-band .eyebrow, .vision-band .section-number { color: var(--paper); }
.vision-band .eyebrow::after { background: var(--ochre); }
.vision-layout { padding-block: clamp(3.5rem, 7vw, 6rem); }
.vision-heading { display: grid; grid-template-columns: 5rem 1fr; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.stage-list { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 0; margin: var(--space-6) 0 var(--space-5) 8.8rem; border-top: 1px solid rgba(255,255,255,.45); }
.stage-list li { position: relative; min-width: 0; padding: 1.2rem 1rem 0; border-left: 1px solid rgba(255,255,255,.35); }
.stage-list span { display: block; color: var(--sand); font-family: var(--font-display); font-size: 2rem; }
.stage-list strong { display: block; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.vision-note { margin-left: 8.8rem; font-size: var(--step-1); }
.vision-layout > .text-link { margin-left: 8.8rem; }
.pathways-band { background: var(--paper); }
.follow-band { border-top: 1px solid var(--rule); background: var(--cream); }
.pathways-band .eyebrow, .follow-band .eyebrow { margin-bottom: .55rem; }
.pathways-band .editorial-row p, .follow-band .editorial-row p { font-size: 1.08rem; }

.site-footer { padding: var(--space-7) 0 var(--space-4); background: var(--navy-deep); color: #e9e3da; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: var(--space-6); }
.footer-logo { width: 5.5rem; margin-bottom: 1rem; }
.footer-links { display: grid; align-content: start; gap: .55rem; }
.site-footer a, .site-footer a:visited { color: #f8f2e9; }
.footer-details p { margin-bottom: .35rem; }
.footer-meta { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.2); color: #c9d0d8; font-size: var(--step--1); }

/* Existing subpage vocabulary */
.hero { padding: clamp(4rem, 10vw, 8rem) 0; background: var(--cream); }
.hero-copy { max-width: 52rem; }
.hero .lead { margin-top: var(--space-4); }
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: var(--paper); }
.section--navy h2, .section--navy .eyebrow { color: var(--paper); }
.section-head { margin-bottom: var(--space-6); }
.section-head h2 { max-width: 18ch; margin-bottom: var(--space-4); font-size: var(--step-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.card { padding: var(--space-5); background: var(--paper); }
.card h3 { margin-bottom: var(--space-3); }
.reading { max-width: var(--measure); }
.quote { margin: 0; color: var(--evergreen-dark); font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; }
.note { margin-top: var(--space-4); padding: var(--space-4); border-top: 2px solid var(--ochre); border-bottom: 1px solid var(--rule); background: #f5ecdf; }
.status-strip { padding: 1rem 0; border-block: 1px solid var(--rule); }
.status-dot { display: inline-block; width: .65rem; height: .65rem; margin-right: .75rem; border-radius: 50%; background: var(--ochre); }

.reveal { animation: reveal .65s cubic-bezier(.2,.7,.2,1) both; }
.brand-composition.reveal { animation-delay: .12s; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .founder-hero-grid { min-height: auto; grid-template-columns: 1fr; }
  .founder-copy { padding: var(--space-7) 0 var(--space-6); }
  .brand-composition { min-height: 11rem; order: 2; }
  .editorial-row { grid-template-columns: 4rem 1fr; }
  .editorial-row > :last-child { grid-column: 2; }
  .vision-heading { grid-template-columns: 4rem 1fr; }
  .stage-list, .vision-note, .vision-layout > .text-link { margin-left: 6.4rem; }
  .stage-list { grid-template-columns: 1fr; border-top: 0; }
  .stage-list li { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; gap: 1rem; padding: .7rem 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.3); }
  .stage-list span { font-size: 1.5rem; }
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .container { width: min(calc(100% - 2rem), var(--content)); }
  .header-inner { min-height: 4.75rem; }
  .site-logo img { width: 2.75rem; height: 2.75rem; }
  .site-logo { font-size: .69rem; }
  .founder-copy { padding: 3.7rem 0 3rem; }
  .founder-copy h1 { font-size: clamp(3.6rem, 17vw, 4.8rem); }
  .founder-copy .lead { font-size: 1.125rem; }
  .founder-name { display: block; font-size: .85rem; line-height: 1.8; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .text-link { align-self: flex-start; }
  .brand-composition { min-height: 7rem; }
  .shape--navy { inset: 0 70% 0 0; border-radius: 0 100% 0 0; }
  .shape--green { inset: 0 0 0 68%; border-radius: 100% 0 0 0; }
  .shape--ochre { width: 38%; height: 100%; right: 30%; top: 0; border-radius: 100% 0 100% 0; }
  .shape--sand { display: none; }
  .editorial-row, .vision-heading { grid-template-columns: 1fr; gap: 1rem; }
  .editorial-row > :last-child { grid-column: auto; }
  .section-number { font-size: 2.3rem; }
  .stage-list, .vision-note, .vision-layout > .text-link { margin-left: 0; }
  .stage-list { margin-top: var(--space-5); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (prefers-color-scheme: dark) {
  /* The brand's warm light canvas is intentional; native controls still inherit a dark-aware color scheme. */
  :root { color-scheme: light dark; }
}

/* ---- Sep 29 content pass: Nikia's 2026-09-07 site direction ---- */
.site-nav { gap: clamp(.9rem, 1.6vw, 1.6rem); }
.site-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .88rem; white-space: nowrap; }
.site-nav a[aria-current="page"] { color: var(--evergreen); text-decoration: underline; text-underline-offset: .4rem; text-decoration-color: var(--ochre); text-decoration-thickness: 2px; }
@media (max-width: 1180px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
}
.founder-copy .h1-long { font-size: clamp(2.6rem, 5.2vw, 4.9rem); max-width: 15ch; line-height: 1.02; margin-bottom: var(--space-5); }
.founder-copy .lead + p { color: #42576b; max-width: 35rem; }
.hero-links { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin-top: .75rem; }
.h2-display { font-size: var(--step-3); line-height: 1.04; }
.h3-like { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5rem; color: var(--navy); }
.truth-band .h2-display { font-family: var(--font-display); font-size: var(--step-3); font-weight: 500; letter-spacing: -.035em; text-transform: none; }
.section--navy .h2-display, .section--navy .h3-like, .section--navy .lead { color: var(--paper); }
.section--navy .note { color: var(--ink); }
.section--navy a { color: var(--paper); }
.signature { margin-top: var(--space-4); color: var(--evergreen-dark); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; }
.hero-copy > p:not(.eyebrow):not(.lead) { font-size: 1.08rem; }
.hero .hero-actions { margin-top: var(--space-5); }

/* Eight weeks */
.weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.weeks li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; padding: 1.25rem 1rem 1.25rem 0; border-bottom: 1px solid var(--rule); }
.weeks li:nth-child(odd) { padding-right: 2rem; border-right: 1px solid var(--rule); }
.weeks li:nth-child(even) { padding-left: 2rem; }
.week-num { color: var(--ochre-text); font-size: 1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.week-title { color: var(--navy); font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; }

/* Offer / ways lists */
.offer-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.offer-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.offer-list p { margin: 0; color: #42576b; }

/* Community updates */
.update-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.update-grid article { padding: 1.75rem 2rem 1.75rem 0; border-bottom: 1px solid var(--rule); }
.update-grid article:nth-child(even) { padding: 1.75rem 0 1.75rem 2rem; border-left: 1px solid var(--rule); }
.nyla-sub { color: var(--sand); font-family: var(--font-display); font-size: var(--step-1); margin-top: .75rem; }

/* Vision */
.pathway-line { margin-top: var(--space-4); color: var(--evergreen-dark); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; }
.pathway-line span { color: var(--ochre); margin-inline: .35rem; }
.now-later { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.now-later > div { padding-top: 1.25rem; border-top: 3px solid var(--evergreen-dark); }
.now-later .later { border-top-style: dashed; border-top-color: var(--ochre); }
.status-tag { display: inline-block; margin-bottom: .9rem; padding: .2rem .6rem; font-size: 1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.status-tag--now { background: var(--evergreen-dark); color: var(--paper); }
.status-tag--later { border: 1px solid var(--ochre); color: #7a5720; }
.path { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.path li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.path-num { color: var(--ochre); font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
.path h3 { margin-bottom: .4rem; font-size: var(--step-2); }
.path p { margin: 0; }

/* Donate */
.donate-band { background: #eee4d5; }

/* Newsletter */
.newsletter-band { border-top: 1px solid var(--rule); background: var(--paper); padding-block: clamp(3rem, 6vw, 5rem); }
.newsletter-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.newsletter-grid h2 { font-size: var(--step-3); line-height: 1.04; margin-bottom: 1rem; }

/* Forms */
.phf-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.field { display: grid; gap: .4rem; }
.field--wide { grid-column: 1 / -1; }
.field label { color: var(--navy); font-size: .92rem; font-weight: 700; }
.opt { color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: .7rem .85rem; border: 1px solid #9d8b72; border-radius: 0; background: #fff; color: var(--ink); font-size: 1rem; }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--navy); }
.was-validated :invalid { border-color: #a3263a; border-width: 2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-actions .btn { border: 0; cursor: pointer; }
.form-actions .btn:disabled { opacity: .6; cursor: progress; transform: none; }
.form-status { margin: 0; font-weight: 600; }
.form-status[data-kind="ok"] { color: var(--evergreen-dark); }
.form-status[data-kind="error"] { color: #8f1f31; }
.form-fine { margin: 0; color: var(--muted); font-size: 1rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-aside { padding-top: 1.25rem; border-top: 3px solid var(--ochre); overflow-wrap: anywhere; }
.footer-details a { overflow-wrap: anywhere; }
.prose h2 { margin-top: 2rem; }

@media (max-width: 900px) {
  .weeks, .update-grid, .now-later, .newsletter-grid, .contact-layout { grid-template-columns: 1fr; }
  .weeks li:nth-child(odd), .weeks li:nth-child(even) { padding: 1.1rem 0; border-right: 0; }
  .update-grid article, .update-grid article:nth-child(even) { padding: 1.5rem 0; border-left: 0; }
}
@media (max-width: 600px) {
  .phf-form { grid-template-columns: 1fr; }
  .offer-list li { grid-template-columns: 1fr; gap: .5rem; }
  .weeks li { grid-template-columns: 1fr; gap: .2rem; }
  .founder-copy .h1-long { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .hero-actions .btn { white-space: normal; text-align: left; }
}

/* ---- Round-1 audit fixes (2026-09-29) ---- */
main a[href^="mailto:"], .footer-details a { overflow-wrap: anywhere; word-break: break-word; }
.grid-2 > *, .newsletter-grid > *, .contact-layout > *, .now-later > *, .editorial-row > * { min-width: 0; }
.plain-list { margin: 0 0 1em; padding-left: 1.2rem; max-width: var(--measure); }
.plain-list li { margin-bottom: .35rem; }
.plain-list li::marker { color: var(--ochre-text); }
.section--navy .plain-list li::marker { color: var(--sand); }
.pathway-line span { color: var(--ochre-text); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* Round-2 audit fixes: 17px floor for body text and labels (ISA D-6) */
body { font-size: 1.0625rem; }
.eyebrow { font-size: 1.0625rem; letter-spacing: .1em; }
.field label, .form-fine, .week-num, .status-tag, .signature { font-size: 1.0625rem; }
.plain-list--cols { columns: 2 12rem; column-gap: 2rem; }
.plain-list--cols li { break-inside: avoid; }
.lead + .plain-list { font-size: var(--step-1); color: #42576b; }

/* ---- Brand kit v1.0: The Five-Stage Bloom (2026-09-29) ----
   Tokens from assets/brand/tokens/phf-tokens.css, except --muted and .eyebrow, which keep the
   audited values (contrast on the donate band; 17px text floor). See ISA D-9. */
:root {
  --evergreen-light: #2f7a68;   /* graphics on navy only, never text */
  --petal-pending: #c9b99f;
  --stage-restore: var(--sand); --stage-develop: var(--ochre); --stage-apply: var(--evergreen); --stage-advance: var(--navy); --stage-giveback: var(--ochre);
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;
  --logo-header-h: 3rem;        /* 161px wide: the kit's 160px minimum */
  --logo-min-w: 160px;
}
h1, h2, h3, .h3-like, .h2-display { font-weight: 600; }

.site-logo { display: inline-flex; }
.site-logo img { width: auto; height: var(--logo-header-h); min-width: var(--logo-min-w); object-fit: contain; }
@media (max-width: 600px) { .site-logo img { width: auto; height: var(--logo-header-h); } }
.drawer-logo { width: auto; height: 2.75rem; object-fit: contain; }
.footer-logo { width: 5.5rem; height: auto; object-fit: contain; }

/* Pathway band on navy, where the reversed stage blooms are drawn to sit */
.vision-band { background: var(--navy); }
.vision-band .eyebrow, .section--navy .eyebrow { color: var(--sand); }
.stage-bloom { display: block; width: 3.5rem; height: auto; }
.stage-list .stage-bloom { margin-bottom: .6rem; }
.path li { grid-template-columns: 4.5rem minmax(0, 1fr); }
.path-num { display: grid; justify-items: start; gap: .35rem; }
.path-num .stage-bloom { width: 3.25rem; }

/* Bloom pattern behind the email band; the form sits on a solid panel, never on the pattern */
.newsletter-band { background: var(--cream) url('/assets/brand/elements/pattern-tile-cream.svg') repeat; background-size: 180px; }
.newsletter-grid { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: clamp(1.5rem, 4vw, 3rem); }

@media (max-width: 900px) {
  .stage-list li { grid-template-columns: 3rem 2rem 1fr; align-items: center; }
  .stage-list .stage-bloom { width: 2.75rem; margin-bottom: 0; }
}
.path-num { color: var(--ochre-text); }

/* ---- Hero bloom: the lit mark, loop 10 round 2 (2026-09-29) ----
   The flower never changes size or position. On arrival the mark fades up, then its light and shadow come up
   slowly, as if a lamp were turned on. A chosen petal brightens while the others ease back, and its words
   arrive through a soft left-to-right wipe. Every caption state shares one grid cell, so its height is fixed. */
.bloom-stage { display: grid; align-content: center; justify-items: center; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 3rem); background: radial-gradient(ellipse 70% 60% at 38% 34%, #fffefb 0%, var(--paper) 55%, #f8f1e6 100%); }
.bloom-frame { position: relative; width: min(100%, 26rem); aspect-ratio: 1; }
.bloom-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bloom-petals { animation: bloom-arrive 1.4s ease-out both; }
.bloom-shadow-far { opacity: .17; }
.bloom-shadow-near { opacity: .24; }
.bloom-shadow, .petal-shade { animation: bloom-lamp 2.2s ease-in-out .5s both; }
@keyframes bloom-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes bloom-lamp { from { opacity: 0; } to { opacity: 1; } }
.petal-link { cursor: pointer; }
.petal-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.petal-shade, .petal-glow, .petal-veil { pointer-events: none; }
.petal-glow { opacity: 0; transition: opacity .9s ease-in-out; }
.petal-veil { fill: var(--paper); opacity: 0; transition: opacity .9s ease-in-out; }
.petal-link.is-lit .petal-glow { opacity: 1; transition-duration: 1.1s; }
[data-lit] .petal-link:not(.is-lit) .petal-veil { opacity: .16; }
.petal-link:focus-visible .petal { stroke: var(--focus); stroke-width: 2.5; paint-order: stroke; }
.bloom-caption { display: grid; width: min(100%, 26rem); text-align: center; }
.bloom-note { grid-area: 1 / 1; display: grid; align-content: start; gap: .4rem; margin: 0; opacity: 0; transition: opacity .45s ease-in; }
.bloom-note.is-on { opacity: 1; transition: opacity 1s ease-out .32s; }
.bloom-note-name { text-wrap: balance; color: var(--evergreen-dark); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 1.0625rem; line-height: 1.5; }
.bloom-note-line { text-wrap: pretty; color: var(--ink); font-size: 1.0625rem; line-height: 1.55;
  -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%); mask-image: linear-gradient(90deg, #000 0 42%, transparent 58% 100%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: -webkit-mask-position 0s .5s, mask-position 0s .5s; }
.bloom-note.is-on .bloom-note-line { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 1.5s cubic-bezier(.35, .1, .25, 1) .5s, mask-position 1.5s cubic-bezier(.35, .1, .25, 1) .5s; }
@media (prefers-reduced-motion: reduce) {
  .bloom-petals, .bloom-shadow, .petal-shade { animation: none; }
  .bloom-note-line, .bloom-note.is-on .bloom-note-line { -webkit-mask-image: none; mask-image: none; transition: none; }
  .bloom-note, .bloom-note.is-on, .petal-glow, .petal-veil { transition-duration: .2s; transition-delay: 0s; }
}
@media (max-width: 900px) {
  .bloom-stage { order: 2; padding-block: 2rem; }
  .bloom-frame { width: min(72vw, 18rem); }
}

/* ---- Home photography: hospitality at work, 2026-09-29 (loop 11) ----
   Licensed stock, framed like the hero mark: soft shadow falling down and to the right. */
.photo-col { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-content: start; }
.truth-band .editorial-row { align-items: start; }
.photo-pair, .photo-single { margin: 0; }
.photo-pair { position: relative; padding-bottom: 22%; }
.photo-pair picture, .photo-single picture { display: block; }
.photo-pair img, .photo-single img { display: block; width: 100%; height: auto; object-fit: cover; box-shadow: 0 22px 44px -26px rgba(11, 35, 65, .55); }
.photo-pair-main { width: 80%; }
.photo-pair-main img, .photo-single img { aspect-ratio: 4 / 5; }
.photo-pair-inset { position: absolute; right: 0; bottom: 3.25rem; width: 58%; }
.photo-pair-inset img { aspect-ratio: 3 / 2; border: .4rem solid #eee4d5; }
.photo-single { max-width: 21rem; }
.photo-founder { max-width: 27rem; }
@media (min-width: 901px) { .photo-col + div { align-self: center; } }
.photo-credit { margin-top: .75rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.4; }
.photo-pair .photo-credit { position: absolute; left: 0; bottom: 0; }
@media (max-width: 900px) {
  .photo-pair { max-width: 30rem; }
  .photo-single { max-width: 22rem; }
  .photo-founder { max-width: 26rem; }
}

/* ---- Inner-page photography, 2026-09-29 (loop 11, D-15) ----
   Every figure is a licensed stock photo with a credit; the file is already cut to its shape, so the image
   keeps its own ratio (width/height attributes) instead of a forced one. */
.photo-fig { margin: 0; max-width: 24rem; }
.photo-fig picture { display: block; }
.photo-fig img { display: block; width: 100%; height: auto; box-shadow: 0 22px 44px -26px rgba(11, 35, 65, .55); }
.section--navy .photo-credit { color: #c9d3de; }
.section--navy .photo-fig img { box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .7); }
.hero--photo .hero-copy { max-width: none; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(15rem, .7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-figure { justify-self: end; width: 100%; max-width: 23rem; }
.offers-with-photos, .stages-with-photos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(14rem, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.offer-photos, .stage-photos { display: grid; gap: 2rem; }
.stage-photos { align-self: stretch; align-content: space-between; padding-block: 1rem; }
.contact-aside .photo-fig { margin-top: 1.5rem; max-width: 18rem; }
@media (max-width: 900px) {
  .hero-split, .offers-with-photos, .stages-with-photos { grid-template-columns: 1fr; }
  .hero-figure { justify-self: start; max-width: 22rem; }
  .offer-photos, .stage-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-block: 0; }
}
@media (max-width: 520px) {
  .offer-photos, .stage-photos { grid-template-columns: 1fr; }
}
/* Photo heroes stay short enough that each page's first action is still on the first screen (skim audit). */
.hero--photo { padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero--photo .hero-figure { max-width: 19rem; }
@media (max-width: 900px) {
  .hero--photo .hero-figure { max-width: none; }
  .hero--photo .hero-figure img { aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 18%; }
}
.offer-photos:has(> :only-child) { grid-template-columns: 1fr; }
@media (min-width: 901px) { .hero--photo .hero-figure--wide { max-width: 27rem; } }

/* =====================================================================================================
   Depth + interaction (D-17, Phoenix substrate rule): text never lies flat on the page, and every
   control answers the pointer. Light comes from the upper left, as on the hero mark, so every shadow
   falls down and to the right. Reduced motion keeps the depth and the colour changes, never the movement.
   ===================================================================================================== */
:root {
  --card-bg: #fffefb; --card-line: rgba(11, 35, 65, .09);
  --elev-1: 0 1px 2px rgba(11, 35, 65, .06), 0 12px 30px -16px rgba(11, 35, 65, .30);
  --elev-2: 0 2px 4px rgba(11, 35, 65, .08), 0 26px 48px -20px rgba(11, 35, 65, .42);
  --elev-navy: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 44px -22px rgba(0, 0, 0, .75);
  --card-pad: clamp(1.25rem, 3vw, 2.25rem);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* Surfaces: whole text blocks */
.truth-band .editorial-row > div:last-child, .pathways-band .editorial-row > div:last-child,
.grid-2 > .reading, .phf-form, .contact-aside, .prose, .now-later > div, .quote-card {
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius-md); box-shadow: var(--elev-1); padding: var(--card-pad);
}
.grid-2 > .reading { max-width: calc(var(--measure) + 5rem); }
.note { border: 1px solid var(--card-line); border-top: 3px solid var(--ochre); border-radius: var(--radius-md); box-shadow: var(--elev-1); }
.now-later > div { border-top-width: 4px; }
.now-later .now { border-top-color: var(--evergreen-dark); }
.contact-aside { border-top: 4px solid var(--ochre); }
.newsletter-grid { border-color: var(--card-line); box-shadow: var(--elev-2); }

/* Surfaces on navy */
.section--navy .grid-2 > .reading, .vision-note {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-md); box-shadow: var(--elev-navy); padding: var(--card-pad);
}

/* Lists become sets of cards */
.weeks, .offer-list, .path, .update-grid { border-top: 0; gap: 1rem; }
.offer-list, .path { display: grid; }
.weeks > li, .offer-list > li, .path > li, .update-grid > article,
.weeks > li:nth-child(odd), .weeks > li:nth-child(even), .update-grid > article:nth-child(even) {
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--radius-md); box-shadow: var(--elev-1);
  padding: 1.25rem clamp(1.1rem, 2.4vw, 1.75rem);
}
.update-grid > article, .update-grid > article:nth-child(even) { padding: clamp(1.25rem, 3vw, 2rem); }
.stage-list { border-top: 0; gap: .75rem; }
.stage-list > li { border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-md); background: rgba(255, 255, 255, .055); box-shadow: var(--elev-navy); padding: 1.1rem 1rem 1.2rem; }

/* Cards that lead somewhere lift toward the pointer; the whole card is the target */
.offer-list > li, .update-grid > article:has(a), .now-later .now { position: relative; transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s ease; }
.offer-list > li a::after, .update-grid > article a::after, .now-later .now a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.offer-list > li:hover, .offer-list > li:focus-within, .update-grid > article:has(a):hover, .update-grid > article:has(a):focus-within, .now-later .now:hover, .now-later .now:focus-within {
  transform: translateY(-4px); box-shadow: var(--elev-2); border-color: rgba(189, 140, 60, .55);
}

/* The quote belongs to Nikia, and says so */
.quote-card { margin: 0; align-self: start; display: grid; gap: 1.5rem; border-left: 4px solid var(--ochre); }
.quote-by { display: flex; align-items: center; gap: 1rem; }
.quote-by-photo { display: block; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--rule), 0 8px 18px -8px rgba(11, 35, 65, .5); }
.quote-by-text { display: grid; gap: .15rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.35; }
.quote-by-text strong { color: var(--navy); font-size: 1.125rem; }

/* Buttons: raised, lift on hover, press on click */
.btn { position: relative; border-radius: var(--radius-sm); transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn--primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 3px 0 #04101f, 0 12px 22px -12px rgba(11, 35, 65, .7); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 5px 0 #04101f, 0 20px 30px -14px rgba(11, 35, 65, .7); }
.btn--secondary { background: var(--card-bg); box-shadow: 0 3px 0 rgba(11, 35, 65, .55), 0 10px 20px -12px rgba(11, 35, 65, .45); }
.btn--secondary:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #04101f, 0 18px 28px -14px rgba(11, 35, 65, .6); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #04101f, 0 4px 10px -6px rgba(11, 35, 65, .6); transition-duration: .06s; }
.btn span[aria-hidden="true"] { display: inline-block; transition: transform .22s var(--ease-out); }
.btn:hover span[aria-hidden="true"], .btn:focus-visible span[aria-hidden="true"] { transform: translateX(4px); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Text links: an underline that grows and warms, and an arrow that leans forward */
.text-link { text-decoration: none; background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--ochre), var(--ochre));
  background-repeat: no-repeat; background-size: 100% 1.5px, 0% 3px; background-position: 0 calc(100% - .5rem), 0 calc(100% - .5rem);
  transition: background-size .3s var(--ease-out), color .2s ease; }
.text-link:hover, .text-link:focus-visible { background-size: 100% 1.5px, 100% 3px; }
.text-link span[aria-hidden="true"] { display: inline-block; transition: transform .22s var(--ease-out); }
.text-link:hover span[aria-hidden="true"], .text-link:focus-visible span[aria-hidden="true"] { transform: translateX(4px); }

@media (max-width: 900px) {
  .grid-2 > .reading { max-width: none; }
  .stage-list > li, .stage-list > li:first-child { border-top: 1px solid rgba(255, 255, 255, .16); padding: .9rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .btn--primary:hover, .btn--secondary:hover,
  .offer-list > li:hover, .offer-list > li:focus-within, .update-grid > article:has(a):hover, .update-grid > article:has(a):focus-within, .now-later .now:hover, .now-later .now:focus-within,
  .btn:hover span[aria-hidden="true"], .btn:focus-visible span[aria-hidden="true"], .text-link:hover span[aria-hidden="true"], .text-link:focus-visible span[aria-hidden="true"] { transform: none; }
  .text-link { transition: none; }
}
/* One surface per block: the newsletter form already sits on the newsletter card. */
.newsletter-grid .phf-form { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.grid-2 > .reading { align-self: start; }
@media (min-width: 901px) { .grid-2 > .photo-col + .reading { align-self: center; } }