/* The Practice Place: first cut. Tokens match design-brief.md §3–4. */
:root {
  --olive-900:#2F3A1C; --olive-800:#3F4A28; --olive-700:#4F5E2A; --olive-600:#5F6E33;
  --olive-500:#6E7E3D; --olive-400:#8A9A5B; --olive-200:#C7CFA3; --olive-100:#DDE3C6; --olive-50:#E9ECDD;
  --ink:#2B2B2B; --grey-700:#4A4A4A; --grey-500:#6B6B6B; --grey-300:#BDBDBD; --grey-100:#EDEDEA;
  --paper:#F7F7F2; --white:#FFFFFF;
  --path:#EFE3C8; --thatch:#C2A55A; --clay:#BF7F57;

  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --wrap:1180px;
  --gutter:clamp(16px, 4vw, 40px);
  --space:clamp(72px, 10vw, 136px);
  --radius:18px;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
body { margin:0; background:var(--white); color:var(--ink); font:400 18px/1.62 var(--sans); text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
img, svg { display:block; max-width:100%; }
a { color:var(--olive-700); text-decoration-thickness:1px; text-underline-offset:.2em; }
a:hover { color:var(--olive-900); }
:focus-visible { outline:2px solid var(--olive-700); outline-offset:3px; border-radius:4px; }
p { margin:0 0 1em; }
h1, h2, h3, h4 { font-family:var(--serif); font-weight:400; color:var(--ink); margin:0; letter-spacing:-.012em; text-wrap:balance; }
h1 { font-size:clamp(42px, 6.4vw, 84px); line-height:1.02; }
h2 { font-size:clamp(32px, 4vw, 52px); line-height:1.06; }
h3 { font-size:clamp(22px, 2.1vw, 27px); line-height:1.2; }
em { font-style:italic; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.narrow { max-width:720px; }
.section { padding:var(--space) 0; }
.section.tight { padding:calc(var(--space) * .6) 0; }
.bg-sky { background:var(--olive-50); }
.bg-paper { background:var(--paper); }
.bg-path { background:var(--path); }
.bg-deep { background:var(--olive-900); color:var(--olive-50); }
.bg-deep h2, .bg-deep h3 { color:var(--white); }
.lead { font-family:var(--serif); font-size:clamp(22px, 2.3vw, 30px); line-height:1.36; color:var(--ink); }
.muted { color:var(--grey-700); }
.skip { position:absolute; left:-9999px; top:8px; background:var(--white); padding:8px 14px; z-index:100; }
.skip:focus { left:8px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- section label: one quiet word, no numbering ---------- */
.marker { margin:0 0 14px; font:italic 400 19px/1.2 var(--serif); color:var(--olive-600); }
.bg-deep .marker { color:var(--olive-200); }
.section-title { margin-bottom:clamp(36px, 4vw, 56px); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:12px 24px; border-radius:999px; font:600 16px/1.2 var(--sans); text-decoration:none; border:1.5px solid transparent; transition:background .2s, color .2s, border-color .2s; }
.btn-primary { background:var(--olive-700); color:var(--white); }
.btn-primary:hover { background:var(--olive-600); color:var(--white); }
.btn-ghost { border-color:var(--olive-700); color:var(--olive-700); background:transparent; }
.btn-ghost:hover { background:var(--olive-50); color:var(--olive-900); }
.bg-deep .btn-primary { background:var(--olive-50); color:var(--olive-900); }
.bg-deep .btn-primary:hover { background:var(--white); }
.arrow::after { content:"→"; font-family:var(--sans); }
.text-link { font-weight:600; text-decoration:none; color:var(--olive-700); }
.text-link:hover { text-decoration:underline; }
.actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- header ---------- */
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); border-bottom:1px solid var(--grey-100); }
.site-header .wrap { display:flex; align-items:center; gap:24px; min-height:78px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand img { width:46px; height:46px; }
.brand span { font:400 23px/1 var(--serif); letter-spacing:-.01em; white-space:nowrap; }
.nav > ul { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav a, .nav .nav-top { display:block; padding:10px 12px; color:var(--ink); text-decoration:none; font-size:16px; border-radius:8px; }
.nav button.nav-top { border:0; background:none; font-family:inherit; cursor:pointer; }
.nav a:hover, .nav .nav-top:hover { color:var(--olive-700); background:var(--olive-50); }
.nav [aria-current="page"], .nav .is-active > .nav-top { color:var(--olive-700); }
.nav .has-sub { position:relative; }
.nav .has-sub > .nav-top::after { content:""; display:inline-block; width:6px; height:6px; margin:0 0 3px 8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.nav .sub { display:none; position:absolute; top:100%; left:0; min-width:290px; padding:10px; margin:0; list-style:none; background:var(--white); border:1px solid var(--grey-100); border-radius:14px; box-shadow:0 18px 40px -18px rgba(47,58,28,.35); }
.nav .has-sub:hover > .sub, .nav .has-sub:focus-within > .sub { display:block; }
.nav .sub a { padding:10px 12px; }
.header-cta { padding:10px 20px; min-height:44px; font-size:15px; }
.menu-toggle { display:none; }

@media (max-width: 1080px) {
  .header-cta { display:none; }
  .menu-toggle { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px; border:1.5px solid var(--olive-700); border-radius:999px; background:none; color:var(--olive-700); font:600 15px var(--sans); cursor:pointer; }
  .nav { display:none; position:fixed; inset:78px 0 0 0; background:var(--white); overflow:auto; padding:16px var(--gutter) 120px; }
  .nav-open .nav { display:block; }
  .nav > ul { flex-direction:column; align-items:stretch; gap:0; }
  .nav > ul > li { border-bottom:1px solid var(--grey-100); padding:8px 0; }
  .nav a, .nav .nav-top { font-size:20px; font-family:var(--serif); padding:10px 0; }
  .nav .has-sub > .nav-top::after { display:none; }
  .nav .sub { display:block; position:static; box-shadow:none; border:0; padding:0 0 8px 16px; min-width:0; }
  .nav .sub a { font:400 17px var(--sans); color:var(--grey-700); padding:8px 0; }
  .nav .mobile-cta { display:block; margin-top:24px; border:0; }
  .nav .mobile-cta a { display:inline-flex; font:600 17px var(--sans); color:var(--white); padding:14px 26px; }
}
@media (min-width: 1081px) { .nav .mobile-cta { display:none; } }
@media (max-width: 420px) { .brand span { font-size:20px; } .brand img { width:40px; height:40px; } }

/* ---------- home hero ---------- */
.hero { background:var(--olive-50); padding-top:clamp(40px, 6vw, 80px); overflow:hidden; }
.hero h1 { display:grid; gap:.08em; }
.hero h1 .think { justify-self:start; }
.hero h1 .act { justify-self:end; font-style:italic; color:var(--olive-700); }
.hero-sub { display:grid; grid-template-columns:minmax(0, 560px) auto; justify-content:space-between; align-items:end; gap:24px 40px; margin-top:clamp(28px, 3vw, 40px); }
.hero-sub p { margin:0; font-size:clamp(18px, 1.6vw, 21px); color:var(--grey-700); }
.hero .scene { width:100%; height:auto; margin-top:clamp(8px, 2vw, 24px); }
@media (max-width: 760px) {
  .hero h1 .act { justify-self:start; }
  .hero-sub { grid-template-columns:1fr; }
  .hero .scene { height:240px; }
}

/* ---------- home: come in ---------- */
.split { display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:clamp(32px, 6vw, 96px); align-items:start; }
.split-aside h2 { margin-bottom:24px; }
.split-aside .vignette { width:min(220px, 70%); margin-top:32px; border-radius:50%; aspect-ratio:1; object-fit:cover; background:var(--olive-50); }
@media (max-width: 860px) { .split { grid-template-columns:1fr; } }

/* ---------- home: the rooms (services as arched doorways) ---------- */
.section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(36px, 4vw, 56px); }
.section-head h2 { max-width:16ch; }
.section-head p { max-width:440px; margin:0; color:var(--grey-700); }
.rooms { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; list-style:none; margin:0; padding:0; }
.room { position:relative; display:flex; flex-direction:column; height:100%; padding:clamp(28px, 3vw, 40px) 22px 24px; border-radius:50% 50% var(--radius) var(--radius) / 120px 120px var(--radius) var(--radius); background:var(--tint, var(--olive-50)); text-decoration:none; color:var(--ink); }
.room .vignette { width:76%; margin:6px auto 22px; }
.room h3 { font-size:clamp(21px, 1.8vw, 24px); margin-bottom:10px; }
.room p { font-size:16.5px; color:var(--grey-700); margin:0 0 18px; }
.room .go { margin-top:auto; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--white); color:var(--olive-700); font-size:18px; transition:transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
.bg-sky .tint-sky .go { background:var(--olive-50); }
.room { transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.room:hover { transform:translateY(-6px); }
.room:hover .go { transform:translateX(4px); background:var(--olive-700); color:var(--white); }
.tint-sky { --tint:var(--olive-50); } .tint-grass { --tint:var(--olive-200); } .tint-path { --tint:var(--path); } .tint-mist { --tint:var(--olive-100); }
.bg-sky .tint-sky { --tint:var(--white); }
@media (max-width: 1000px) { .rooms { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .rooms { grid-template-columns:1fr; gap:12px; }
  .room { display:grid; grid-template-columns:84px 1fr; grid-template-rows:auto auto; gap:2px 16px; align-items:center; padding:16px 18px 16px 16px; border-radius:var(--radius); }
  .room .vignette { grid-row:1 / 3; width:84px; height:84px; margin:0; border-radius:50%; background:var(--white); }
  .room h3 { margin:0; font-size:21px; }
  .room p { margin:0; font-size:15.5px; }
  .room .go { display:none; }
}

/* ---------- home: the roots (AYA) ---------- */
.roots-grid { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.roots-symbol { color:var(--olive-200); width:min(320px, 70%); margin:0 auto; }
.roots-symbol svg { width:100%; height:auto; }
.roots-symbol figcaption { margin-top:20px; font-size:15px; color:var(--olive-200); text-align:center; }
.dims { list-style:none; margin:32px 0 36px; padding:0; border-top:1px solid var(--olive-600); }
.dims li { display:grid; grid-template-columns:150px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--olive-600); }
.dims b { font:400 22px/1.2 var(--serif); color:var(--white); }
.dims span { color:var(--olive-100); }
@media (max-width: 860px) { .roots-grid { grid-template-columns:1fr; } .roots-symbol { width:180px; } .dims li { grid-template-columns:1fr; gap:2px; } }

/* ---------- case study cards ---------- */
.cases { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; list-style:none; margin:0; padding:0; }
.case-card { display:flex; flex-direction:column; height:100%; padding:28px 26px 24px; border-radius:var(--radius); background:var(--white); border:1px solid var(--olive-100); text-decoration:none; color:var(--ink); transition:border-color .2s; }
.case-card:hover { border-color:var(--olive-400); }
.case-card h3 { font-size:23px; margin:14px 0 14px; }
.case-card p { color:var(--grey-700); font-size:16.5px; }
.case-card .text-link { margin-top:auto; }
.tag { display:inline-flex; align-items:center; gap:8px; font:600 13px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--olive-700); }
.tag i { width:4px; height:4px; border-radius:50%; background:var(--olive-400); }
.chips { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 18px; padding:0; }
.chip { display:inline-block; padding:6px 12px; border-radius:999px; background:var(--olive-50); color:var(--olive-800); font-size:14px; text-decoration:none; }
a.chip:hover { background:var(--olive-100); }
@media (max-width: 960px) { .cases { grid-template-columns:1fr; } }

/* ---------- closing: on your way ---------- */
.onward { position:relative; background:var(--olive-50); padding:var(--space) 0 0; overflow:hidden; }
.onward .quote { font:400 clamp(34px, 4.6vw, 62px)/1.06 var(--serif); font-style:italic; max-width:15ch; margin:0 0 24px; color:var(--ink); }
.onward .ask { max-width:640px; }
.onward .ask p { color:var(--grey-700); }
.onward .ask .actions { margin-top:28px; }
.onward .ask h3 { margin-top:40px; margin-bottom:16px; }
.onward .path-out { width:100%; height:auto; margin-top:clamp(8px, 3vw, 32px); }
@media (max-width: 760px) { .onward .path-out { height:170px; } }

/* ---------- inner page head ---------- */
.page-head { background:var(--olive-50); padding:clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 72px); }
.page-head .wrap { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:40px; align-items:end; }
.page-head h1 { font-size:clamp(40px, 5.4vw, 72px); max-width:16ch; }
.page-head .lead { margin:24px 0 0; max-width:34ch; color:var(--grey-700); }
.page-head .vignette, .page-head .aya-symbol { width:clamp(140px, 18vw, 230px); }
.page-head .vignette { border-radius:50%; aspect-ratio:1; background:var(--white); }
.page-head .aya-symbol { color:var(--olive-700); }
.crumbs { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 22px; padding:0; font-size:15px; color:var(--grey-700); }
.crumbs li + li::before { content:"/"; margin-right:8px; color:var(--grey-300); }
.crumbs a { color:var(--grey-700); text-decoration:none; }
.crumbs a:hover { color:var(--olive-700); text-decoration:underline; }
@media (max-width: 760px) { .page-head .wrap { grid-template-columns:1fr; } .page-head .vignette, .page-head .aya-symbol { width:120px; grid-row:1; } }

/* ---------- flowing reading column ---------- */
.flow > * { max-width:720px; }
.flow > h2 { font-size:clamp(26px, 2.6vw, 34px); margin:clamp(48px, 6vw, 72px) 0 18px; }
.flow > h2:first-child { margin-top:0; }
.flow > p { max-width:64ch; }
.block { max-width:720px; padding:0 0 clamp(44px, 5vw, 64px); }
.block h2 { font-size:clamp(26px, 2.6vw, 34px); margin-bottom:18px; }
.block .body > :last-child { margin-bottom:0; }
.payoff { padding:clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 28px; border-radius:var(--radius); background:var(--olive-50); border-left:4px solid var(--olive-500); }
.payoff p { font:400 clamp(22px, 2.2vw, 28px)/1.35 var(--serif); margin:0; }
.related-line { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; margin:clamp(40px, 5vw, 56px) 0 0; padding-top:24px; border-top:1px solid var(--grey-100); }
.related-line span { width:100%; font:italic 400 18px var(--serif); color:var(--olive-600); }
.related-line a { font-weight:600; text-decoration:none; }
.related-line a:hover { text-decoration:underline; }
.next-room { display:inline-flex; flex-direction:column; gap:4px; margin-top:clamp(40px, 5vw, 56px); text-decoration:none; color:var(--ink); }
.next-room span { font:italic 400 18px var(--serif); color:var(--olive-600); }
.next-room { font:400 clamp(26px, 3vw, 36px)/1.15 var(--serif); }
.next-room b { font-weight:400; }
.next-room i { font-style:normal; color:var(--olive-700); display:inline-block; transition:transform .3s; }
.next-room:hover i { transform:translateX(6px); }

/* ---------- beliefs: an open list, no boxes ---------- */
.beliefs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 clamp(32px, 6vw, 96px); list-style:none; margin:0; padding:0; }
.belief { padding:clamp(28px, 3vw, 40px) 0; border-top:1px solid var(--olive-100); }
.belief h3 { margin-bottom:12px; font-size:clamp(24px, 2.4vw, 30px); }
.belief p { margin:0; color:var(--grey-700); max-width:46ch; }
@media (max-width: 760px) { .beliefs { grid-template-columns:1fr; } }
.bridge { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between; margin-top:clamp(40px, 5vw, 64px); }
.bridge p { font:italic 400 clamp(22px, 2.2vw, 28px)/1.35 var(--serif); margin:0; max-width:30ch; }

/* ---------- AYA page: the walk ---------- */
.walk { position:relative; }
.walk::before { content:""; position:absolute; top:0; bottom:0; left:50%; border-left:2px dashed var(--olive-200); }
.stop { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 8vw, 120px); align-items:center; padding:clamp(40px, 5vw, 64px) 0; }
.stop .vignette { width:min(300px, 100%); border-radius:50%; aspect-ratio:1; background:var(--olive-50); justify-self:end; box-shadow:0 0 0 12px var(--white), 0 0 0 14px var(--olive-200); }
.stop:nth-child(even) .vignette { order:2; justify-self:start; }
.stop h3 { font-size:clamp(28px, 3vw, 40px); }
.stop .sub { font:italic 400 20px/1.3 var(--serif); color:var(--olive-700); margin:6px 0 18px; }
.stop .qs { margin-top:18px; }
.stop .qs summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--olive-700); font-size:16px; }
.stop .qs summary::-webkit-details-marker { display:none; }
.stop .qs summary::before { content:"+"; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--olive-400); font-weight:400; line-height:1; transition:transform .3s; }
.stop .qs[open] summary::before { transform:rotate(45deg); }
.stop .qs p { margin:14px 0 0; padding-left:18px; border-left:2px solid var(--olive-200); color:var(--grey-700); font-size:17px; font-style:italic; font-family:var(--serif); font-size:19px; }
@media (max-width: 760px) {
  .walk::before { left:22px; }
  .stop { grid-template-columns:1fr; gap:24px; padding-left:52px; }
  .stop .vignette, .stop:nth-child(even) .vignette { order:0; justify-self:start; width:180px; }
}
.diagram-wrap { display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(32px, 6vw, 80px); align-items:center; }
.aya-diagram { width:100%; height:auto; font-family:var(--serif); }
.aya-diagram .tri { fill:var(--olive-100); stroke:var(--olive-400); stroke-width:1.5; }
.aya-diagram .spoke { stroke:var(--thatch); stroke-width:1.2; }
.aya-diagram .ring { fill:none; stroke:var(--olive-500); stroke-width:3; stroke-dasharray:14 10; }
.aya-diagram .att rect { fill:var(--white); stroke:var(--olive-400); stroke-width:1.2; }
.aya-diagram .att text { font:600 14px var(--sans); fill:var(--olive-800); letter-spacing:.02em; }
.aya-diagram .you-bg { fill:var(--olive-700); }
.aya-diagram .you { font-size:22px; fill:var(--white); }
.aya-diagram .vdot { fill:var(--olive-700); }
.aya-diagram .vlabel { font-size:21px; fill:var(--ink); }
.aya-diagram .hit { cursor:pointer; outline:none; transition:opacity .3s; }
.aya-diagram .vpad { fill:transparent; }
.aya-diagram .hit:focus-visible .vpad, .aya-diagram .hit:focus-visible rect, .aya-diagram .hit:focus-visible .you-bg { stroke:var(--olive-900); stroke-width:2; }
.aya-diagram .hit .vdot, .aya-diagram .hit rect, .aya-diagram .hit .you-bg { transition:fill .25s, transform .25s; }
.aya-diagram.has-focus .hit:not(.is-on) { opacity:.42; }
.aya-diagram .hit.is-on .vdot { fill:var(--clay); }
.aya-diagram .hit.is-on rect { fill:var(--olive-700); stroke:var(--olive-700); }
.aya-diagram .hit.is-on .att text { fill:var(--white); }
.aya-diagram .hit:hover rect { stroke:var(--olive-700); }
.aya-diagram .ring-spin { transform-box:fill-box; transform-origin:center; animation:spin 160s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.dia-caption { margin-top:28px; min-height:140px; padding:24px 0 0; border-top:2px solid var(--olive-200); }
.dia-caption h3 { margin-bottom:10px; }
.dia-caption p { color:var(--grey-700); margin:0; max-width:44ch; }
.dia-hint { margin-top:18px; font:italic 400 17px var(--serif); color:var(--olive-600); }
.dia-list dt { font:400 21px var(--serif); margin-top:18px; }
.dia-list dd { margin:4px 0 0; color:var(--grey-700); }
.js .dia-list { display:none; }
.no-js .dia-hint { display:none; }
@media (max-width: 860px) { .diagram-wrap { grid-template-columns:1fr; } }

/* ---------- quote band ---------- */
.quote-band { text-align:left; }
.quote-band blockquote { margin:0; font:italic 400 clamp(34px, 4.6vw, 60px)/1.1 var(--serif); color:var(--ink); }
.quote-band blockquote::before { content:"“"; display:block; font-size:1.6em; line-height:.6; color:var(--olive-500); }
.quote-band cite { display:block; margin-top:16px; font:600 14px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--grey-700); font-style:normal; }

/* ---------- case study page ---------- */
.case-meta { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:24px; }
.impact { background:var(--olive-900); color:var(--olive-50); border-radius:var(--radius); padding:clamp(28px, 4vw, 48px); }
.impact h2 { color:var(--white); }
.impact p { font:400 clamp(21px, 2vw, 26px)/1.4 var(--serif); }

/* ---------- team ---------- */
.team { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 4vw, 48px); list-style:none; margin:0; padding:0; }
.person figure { margin:0; position:relative; border-radius:var(--radius); overflow:hidden; }
.person .portrait-ph, .person img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.person figcaption { position:absolute; left:0; right:0; bottom:0; padding:28px; color:var(--white); }
.person figcaption b { display:block; font:400 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); }
.person figcaption span { display:block; margin-top:8px; font:600 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--olive-200); }
.person dl { margin:28px 0 0; }
.person dt { font:600 13px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--olive-700); margin-top:22px; }
.person dd { margin:8px 0 0; }
@media (max-width: 760px) { .team { grid-template-columns:1fr; } }

/* ---------- placeholders still owed by TPP ---------- */
.tbc { display:inline-block; padding:10px 14px; border:1.5px dashed var(--olive-400); border-radius:10px; color:var(--grey-700); font-size:16px; background:var(--paper); }
.tbc::before { content:"To come from TPP · "; font-weight:600; color:var(--olive-700); }

/* ---------- connect ---------- */
.connect-grid { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); gap:clamp(40px, 6vw, 96px); align-items:start; }
.form { display:grid; gap:22px; }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field label, .field legend { display:block; font-weight:600; font-size:16px; margin-bottom:8px; }
.field .hint { display:block; font-weight:400; color:var(--grey-700); font-size:15px; margin-top:2px; }
.field input, .field textarea { width:100%; padding:14px 16px; border:1.5px solid var(--grey-300); border-radius:12px; font:400 17px/1.4 var(--sans); color:var(--ink); background:var(--white); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--olive-700); box-shadow:0 0 0 3px var(--olive-100); }
.field textarea { min-height:132px; resize:vertical; }
fieldset.field { border:0; margin:0; padding:0; }
.checks { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.checks label { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1.5px solid var(--grey-100); border-radius:12px; font-weight:400; font-size:16px; margin:0; cursor:pointer; }
.checks input { width:18px; height:18px; margin-top:3px; accent-color:var(--olive-700); }
.contact-card { padding:32px; border-radius:var(--radius); background:var(--olive-50); }
.contact-card h2 { font-size:26px; margin-bottom:16px; }
.contact-card ul { list-style:none; margin:0; padding:0; }
.contact-card li { padding:12px 0; border-top:1px solid var(--olive-100); }
.contact-card .ph { color:var(--grey-700); font-size:15px; }
@media (max-width: 860px) { .connect-grid, .form .row, .checks { grid-template-columns:1fr; } }

/* ---------- footer: slim ---------- */
.site-footer { background:var(--olive-900); color:var(--olive-100); padding:clamp(48px, 6vw, 72px) 0 28px; font-size:16px; }
.site-footer a { color:var(--olive-50); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.footer-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; }
.footer-brand { display:flex; align-items:center; gap:16px; }
.footer-brand img { width:56px; height:56px; }
.footer-brand b { display:block; font:400 24px/1.1 var(--serif); color:var(--white); }
.footer-brand em { display:block; margin-top:4px; font-family:var(--serif); font-size:17px; color:var(--olive-200); }
.footer-mail { font:400 clamp(20px, 2vw, 26px) var(--serif); }
.footer-links ul { display:flex; flex-wrap:wrap; gap:10px 28px; list-style:none; margin:40px 0 0; padding:0; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-top:40px; padding-top:22px; border-top:1px solid var(--olive-800); color:var(--olive-200); font-size:15px; }
.social { display:flex; gap:12px; }
.social a { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--olive-600); }
.social svg { width:18px; height:18px; fill:currentColor; }

/* ---------- team cards and bio dialog ---------- */
.person-card { display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.person-card figure { transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.person-card:hover figure { transform:translateY(-6px); }
.person-card .read { display:inline-flex; gap:8px; margin-top:16px; font-weight:600; color:var(--olive-700); }
.person-card .read i { font-style:normal; transition:transform .3s; }
.person-card:hover .read i { transform:translateX(4px); }
.bio { width:min(920px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0; border:0; border-radius:22px; background:var(--white); color:var(--ink); overflow:auto; }
.bio[open] { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); }
.bio::backdrop { background:rgba(47, 58, 28, .55); }
.bio-pic { background:var(--olive-800); }
.bio-pic svg, .bio-pic img { width:100%; height:100%; min-height:100%; object-fit:cover; }
.bio-body { padding:clamp(28px, 4vw, 48px); }
.bio-body h2 { font-size:clamp(30px, 3vw, 40px); }
.bio-role { margin:8px 0 0; font:600 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--olive-700); }
.bio dl { margin:20px 0 32px; }
.bio dt { font:italic 400 18px var(--serif); color:var(--olive-600); margin-top:20px; }
.bio dd { margin:6px 0 0; }
@media (max-width: 700px) { .bio[open] { grid-template-columns:1fr; } .bio-pic { max-height:260px; overflow:hidden; } }

/* ---------- the trail: dotted footsteps from the hero path through the home page ---------- */
.trail-host { position:relative; }
.trail { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible; }
.trail .steps { fill:none; stroke:var(--olive-200); stroke-width:5; stroke-linecap:round; stroke-dasharray:.1 16; }
.trail-host > section > .wrap { position:relative; z-index:2; }

/* ---------- motion: calm, once, and never for reduced-motion users ---------- */
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0ms); }
.js .reveal.is-in { opacity:1; transform:none; }
.js .hero h1 span { opacity:0; transform:translateY(14px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.js .hero h1 .act { animation-delay:.45s; }
.js .hero-sub { opacity:0; animation:rise .9s .8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.art-palm { transform-box:fill-box; transform-origin:50% 100%; animation:sway 7s ease-in-out infinite alternate; }
.art-palm:nth-of-type(2n) { animation-duration:8.5s; animation-delay:-3s; }
@keyframes sway { from { transform:rotate(-1.4deg); } to { transform:rotate(1.4deg); } }
.site-header { transition:transform .35s ease; }
.site-header.is-hidden { transform:translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  .js .reveal, .js .hero h1 span, .js .hero-sub { opacity:1; transform:none; }
}