/* ---------- Tokens ---------- */
:root {
  --teal: #007076;          /* brand teal (from current site) */
  --teal-deep: #00393d;     /* ink surfaces */
  --teal-ink: #0b2a2c;      /* body text */
  --amber: #fbb800;         /* brand amber (logo) */
  --paper: #f5f2ea;         /* warm off-white */
  --paper-2: #ebe6da;
  --line: #d6cfbf;
  --muted: #5d6b6a;
  --on-dark: #e9efe9;
  --on-dark-muted: #9fb5b3;

  /* Type: Geist (display + body) and Geist Mono (labels, indices) */
  --display: "Geist", system-ui, sans-serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--teal-ink);
  font: 400 17px/1.6 var(--sans); letter-spacing: -.005em; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -.035em; }
em { font-style: normal; white-space: nowrap; }
p { margin: 0 0 1em; text-wrap: pretty; }
::selection { background: var(--amber); color: var(--teal-deep); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.label {
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal);
}
.dark .label { color: var(--amber); }
.serif { font-family: var(--display); }
em.accent { font-style: normal; color: var(--teal); }
.dark em.accent { color: var(--amber); }

/* ---------- Page transitions ---------- */
/* Cross-page navigation uses the browser's View Transitions API (Chrome/Edge 126+, Safari 18.2+):
   the header stays put while the page content cross-fades and slides slightly. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
/* Sequential, not overlapping: old page fades out first, then the new one fades in.
   (A simultaneous cross-fade superimposes two pages of text, which looks messy.) */
::view-transition-old(root) { animation: nt-page-out .18s ease-in both; }
::view-transition-new(root) { animation: nt-page-in .42s cubic-bezier(.2, .7, .2, 1) .16s both; }
@keyframes nt-page-out { to { opacity: 0; } }
@keyframes nt-page-in { from { opacity: 0; transform: translateY(10px); } }
/* Browsers without view transitions (e.g. Firefox): soft fade-in of the new page */
@supports not (view-transition-name: a) {
  main { animation: nt-page-in .5s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  main { animation: none !important; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--teal-deep); color: var(--on-dark);
  transition: transform .35s var(--ease), box-shadow .3s;
}
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
/* sticky side panels move up while the header is hidden */
.toc, .partner-side { transition: top .35s var(--ease); }
body.header-hidden .toc, body.header-hidden .partner-side { top: 32px; }
@media (prefers-reduced-motion: reduce) { .site-header, .toc, .partner-side { transition: none; } }
.site-header.scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,30,32,.18); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 42px; width: auto; }
.nav { display: flex; gap: 32px; align-items: center; }
.nav a { text-decoration: none; font-size: 15px; color: var(--on-dark-muted); transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--amber);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--teal-deep); color: var(--paper) !important;
  font: 500 15px/1 var(--sans); text-decoration: none; border: 0; cursor: pointer;
  transition: background .2s, transform .2s var(--ease);
}
.btn:hover { background: var(--teal); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.amber { background: var(--amber); color: var(--teal-deep) !important; }
.btn.amber:hover { background: #ffc933; }
.btn.ghost { background: transparent; color: var(--teal-ink) !important; box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--teal-ink); }
.menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--on-dark); margin: 5px auto; transition: transform .25s; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(56px, 10vw, 128px) 0 clamp(64px, 9vw, 112px); overflow: hidden; }
.hero h1 {
  font-family: var(--display); font-size: clamp(44px, 7.2vw, 104px); line-height: .98; letter-spacing: -.045em;
  max-width: 12ch; margin: 22px 0 36px;
}
.hero h1 em { color: var(--teal); }
.hero-foot { display: grid; grid-template-columns: minmax(0, 520px) auto; gap: 40px; align-items: end; justify-content: space-between; }
.hero-foot p { font-size: 19px; color: var(--muted); margin: 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.thread { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thread .faint { stroke: var(--teal); stroke-width: 1; opacity: .25; }
.thread .lead { stroke: var(--amber); stroke-width: 3; }
/* Final state = the production logo: amber body, branches knocked out in paper colour */
.thread .body { fill: var(--amber); stroke: var(--amber); stroke-width: 1; }
.thread .b { stroke: var(--paper); stroke-width: 7.5; }
.thread .n { fill: var(--paper); transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  /* 1. the thread arrives (0.2–1.8s) */
  .thread .lead { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nt-draw 1.6s var(--ease) .2s forwards; }
  /* 2. it enters the clipped corner and branches out (1.6–2.6s), nodes appear */
  .thread .b { stroke: var(--amber); stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: nt-draw .55s var(--ease) forwards, nt-knock .5s ease 2.9s forwards; }
  .thread .b0 { animation-delay: 1.55s, 2.9s; }
  .thread .b1, .thread .b4 { animation-delay: 1.85s, 2.9s; }
  .thread .b2, .thread .b3 { animation-delay: 1.95s, 2.9s; }
  .thread .n { fill: var(--amber); transform: scale(0);
    animation: nt-pop .45s cubic-bezier(.3,1.6,.5,1) forwards, nt-knock-fill .5s ease 2.9s forwards; }
  .thread .n1, .thread .n4 { animation-delay: 2.3s, 2.9s; }
  .thread .n2, .thread .n3 { animation-delay: 2.4s, 2.9s; }
  /* 3. the logo body draws around it and fills (2.5–3.4s) */
  .thread .body { fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: nt-draw .7s var(--ease) 2.45s forwards, nt-fill .5s ease 2.9s forwards; }
}
/* Intro plays once per browser session; afterwards the logo is shown in its final state */
html.intro-seen .thread *, html.intro-seen .thread { animation: none !important; }
html.intro-seen .thread .lead, html.intro-seen .thread .body, html.intro-seen .thread .b { stroke-dashoffset: 0; }
html.intro-seen .thread .body { fill-opacity: 1; }
html.intro-seen .thread .b { stroke: var(--paper); }
html.intro-seen .thread .n { fill: var(--paper); transform: none; }
@keyframes nt-draw { to { stroke-dashoffset: 0; } }
@keyframes nt-pop { to { transform: scale(1); } }
@keyframes nt-fill { to { fill-opacity: 1; } }
@keyframes nt-knock { to { stroke: var(--paper); } }
@keyframes nt-knock-fill { to { fill: var(--paper); } }

/* ---------- Sections ---------- */
section { padding: clamp(72px, 10vw, 136px) 0; }
.section-head { display: grid; grid-template-columns: 200px 1fr; gap: 24px 48px; margin-bottom: 56px; }
.section-head h2 { font-family: var(--display); font-size: clamp(32px, 4.2vw, 54px); line-height: 1.02; letter-spacing: -.04em; max-width: 18ch; }
.intro { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; max-width: 30ch; letter-spacing: -.02em; }

/* Practice index: editorial rows, not cards */
.practices { border-top: 1px solid var(--teal-ink); }
.practice {
  display: grid; grid-template-columns: 28px minmax(0, 1.1fr) minmax(0, 1fr) 56px; gap: 32px; align-items: start;
  padding: 40px 0; border-bottom: 1px solid var(--line); text-decoration: none; position: relative;
}
.practice::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--teal-ink);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.practice:hover::before { transform: scaleX(1); }
.practice .num { font: 500 13px/1 var(--mono); color: var(--muted); padding-top: 14px; }
.practice h3 { font-family: var(--display); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -.035em; transition: color .2s; }
.practice:hover h3 { color: var(--teal); }
.practice .tagline { color: var(--muted); margin-top: 14px; font-size: 16px; }
.practice ul { list-style: none; padding: 0; margin: 6px 0 0; columns: 2; column-gap: 24px; font-size: 15px; }
.practice li { break-inside: avoid; padding: 6px 0; border-top: 1px dashed var(--line); }
.practice .go {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center;
  transition: background .25s, border-color .25s, transform .35s var(--ease); margin-top: 4px;
}
.practice:hover .go { background: var(--amber); border-color: var(--amber); transform: rotate(-45deg); }

/* Principles: dark band */
.dark { background: var(--teal-deep); color: var(--on-dark); }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.18); }
.principle { padding: 32px 28px 8px 0; border-right: 1px solid rgba(255,255,255,.12); }
.principle + .principle { padding-left: 28px; }
.principle:last-child { border-right: 0; }
.principle .k { font: 500 12px/1 var(--mono); color: var(--amber); letter-spacing: .1em; }
.principle h3 { font-family: var(--display); font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; margin: 18px 0 14px; }
.principle p { color: var(--on-dark-muted); font-size: 15px; }

/* Partners */
/* Partners – home grid */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.partner-card {
  display: grid; grid-template-rows: 1fr auto; min-height: 300px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  transition: border-color .25s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.partner-card:hover { border-color: var(--teal-ink); transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(0, 57, 61, .35); }
.partner-card-logo { display: grid; place-items: center; padding: 36px; }
/* Every logo fits the same box; --s (per partner) evens out the visual weight of square vs wide logos */
.partner-card-logo img { width: 80%; height: 150px; object-fit: contain; transform: scale(var(--s, 1)); }
.partner-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 10px; align-items: center; padding: 16px 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.partner-card-meta strong { color: var(--teal-ink); font-weight: 600; font-size: 16px; }
.partner-card.all { background: transparent; border-style: dashed; border-color: #b3aa96; grid-template-rows: auto 1fr auto; padding: 28px; align-content: start; }
.partner-card.all strong { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.035em; margin-top: 16px; }
.partner-card.all .go { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; align-self: end; transition: background .25s, border-color .25s, transform .35s var(--ease); }
.partner-card.all:hover .go { background: var(--amber); border-color: var(--amber); transform: rotate(-45deg); }

/* Partners – page */
.partner-list { padding: clamp(48px, 7vw, 96px) var(--gutter); }
.partner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); padding-bottom: 72px; margin-bottom: 72px; border-bottom: 1px solid var(--line); }
.partner:last-of-type { border-bottom: 0; padding-bottom: 32px; margin-bottom: 32px; }
.partner-side { position: sticky; top: 104px; align-self: start; display: grid; gap: 14px; }
.partner-logo { position: relative; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.partner-logo img { position: absolute; inset: 0; margin: auto; width: 76%; height: 76%; object-fit: contain; transform: scale(var(--s, 1)); }
.partner-body { min-width: 0; }
.partner .num { font: 500 13px/1 var(--mono); color: var(--teal); }
.partner h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -.045em; margin: 14px 0 22px; }
.partner .summary { font-size: 19px; line-height: 1.5; color: #2f4546; max-width: 60ch; }
.partner-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; }
.partner-cols .caps { margin-top: 14px; }
.partner-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.partner-level { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--teal-deep); color: var(--on-dark); border-radius: 6px; }
.partner-level strong { font-size: 16px; line-height: 1.3; display: flex; align-items: baseline; font-weight: 600; letter-spacing: -.02em; }
.partner-level strong::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-right: 10px; transform: translateY(-1px); }
.wordmark { font: 600 clamp(32px, 4vw, 52px)/1 var(--display); letter-spacing: -.04em; color: var(--teal-ink); }
.wordmark { display: grid; justify-items: center; gap: 14px; text-align: center; }
.wordmark small { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.partner-card-logo .wordmark { font-size: 40px; }
.badge { display: inline-block; white-space: nowrap; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal-deep); background: var(--amber); padding: 6px 8px; border-radius: 3px; }
.partner-cols.one { grid-template-columns: 1fr; margin-top: 28px; }
.caps.inline { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.caps.inline li { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: #fff; }
.caps.inline li::before { display: none; }
.partner-h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.03em; margin: 56px 0 20px; }
.offer { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; counter-reset: o; }
.offer li { counter-increment: o; padding: 20px 0 20px 44px; border-top: 1px solid var(--line); position: relative; display: grid; gap: 6px; }
.offer li::before { content: counter(o, decimal-leading-zero); position: absolute; left: 0; top: 22px; font: 500 12px/1 var(--mono); color: var(--teal); }
.offer strong { font-weight: 600; font-size: 17px; letter-spacing: -.015em; }
.offer span { color: var(--muted); font-size: 15px; line-height: 1.55; }
.tiers-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.tiers { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.tiers th, .tiers td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tiers tbody tr:last-child th, .tiers tbody tr:last-child td { border-bottom: 0; }
.tiers thead th { font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tiers tbody th { font-weight: 500; color: var(--teal-ink); width: 24%; }
.tiers td { color: #2f4546; }
.tiers .hl { background: color-mix(in srgb, var(--amber) 12%, #fff); }
.tiers thead .hl { color: var(--teal-deep); box-shadow: inset 0 3px 0 var(--amber); }
.tiers-note::before { content: "Swipe the table sideways to compare all levels. "; display: none; }
@media (max-width: 760px) { .tiers-note::before { display: inline; } }
.tiers-note { font-size: 13px; color: var(--muted); margin: 12px 0 0; max-width: 70ch; }
.partner-cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding: 40px; border: 1px dashed #b3aa96; border-radius: 6px; }
.partner-cta h2 { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.035em; margin: 12px 0 10px; }
.partner-cta p { margin: 0; color: var(--muted); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); }
.contact h2 { font-family: var(--display); font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -.045em; margin: 20px 0 28px; }
.contact-email { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: clamp(22px, 2.4vw, 30px); text-decoration: none; color: var(--amber); border-bottom: 1px solid currentColor; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; font-size: 15px; color: var(--on-dark-muted); }
.facts strong { display: block; color: var(--on-dark); font-weight: 500; margin-bottom: 4px; }
.facts a { color: var(--on-dark); }
form.enquiry { display: grid; gap: 18px; align-content: start; }
.field label { display: block; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #b9ccca; margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.35);
  color: var(--on-dark); font: 400 18px/1.4 var(--sans); padding: 10px 0; border-radius: 0; transition: border-color .2s;
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fbb800' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center no-repeat; }
.field select option { color: var(--teal-ink); }
.field textarea { min-height: 120px; resize: none; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--amber); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: 13px; color: var(--on-dark-muted); margin: 0; }

/* Footer */
.site-footer { background: var(--teal-deep); color: var(--on-dark-muted); font-size: 14px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); }
.site-footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer .legal-line { padding-top: 0; font-size: 12.5px; color: rgba(233, 239, 233, .55); border-top: 0; }
.site-footer .legal-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-note a { color: inherit; }
.body.legal { columns: auto; max-width: 70ch; }
.body.legal p { margin-bottom: 1em; }
.body.legal strong { color: var(--teal-ink); font-weight: 600; }
.body.legal a { color: var(--teal); }
.body.legal .tiers-wrap { margin: 18px 0 22px; }
.body.legal .tiers { min-width: 0; }
@media (max-width: 760px) {
  /* stack the storage table as label/value rows on phones */
  .body.legal .tiers thead { display: none; }
  .body.legal .tiers tr, .body.legal .tiers th, .body.legal .tiers td { display: block; width: auto; }
  .body.legal .tiers th, .body.legal .tiers td { border-bottom: 0; padding: 6px 16px; }
  .body.legal .tiers tbody th { padding-top: 14px; }
  .body.legal .tiers td:last-child { padding-bottom: 14px; }
  .body.legal .tiers td::before { content: attr(data-label); display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
}
code { font: 500 .9em var(--mono); background: var(--paper-2); padding: 2px 6px; border-radius: 3px; }
.site-footer .footer-brand { display: flex; align-items: center; gap: 32px; padding-top: 8px; padding-bottom: 40px; border-top: 0; justify-content: flex-start; }
.footer-brand img { width: 120px; height: auto; }
.footer-brand p { font-size: clamp(20px, 2vw, 26px); line-height: 1.2; font-weight: 500; letter-spacing: -.025em; color: var(--on-dark); margin: 0; }

/* ---------- Practice pages ---------- */
.page-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.crumbs { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--teal); }
.page-hero h1 { font-family: var(--display); font-size: clamp(40px, 6vw, 86px); line-height: 1; letter-spacing: -.045em; margin: 24px 0 28px; max-width: 15ch; }
.page-hero .lede { font-size: clamp(20px, 2vw, 25px); line-height: 1.4; color: var(--muted); max-width: 38ch; margin: 0; }

.doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.toc { position: sticky; top: 104px; align-self: start; }
.toc ol { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: t; border-left: 1px solid var(--line); }
.toc li { counter-increment: t; }
.toc a {
  display: grid; grid-template-columns: 30px 1fr; padding: 9px 0 9px 16px; margin-left: -1px; border-left: 2px solid transparent;
  text-decoration: none; font-size: 14px; line-height: 1.35; color: var(--muted); transition: color .2s, border-color .2s;
}
.toc a::before { content: counter(t, decimal-leading-zero); font: 500 11px/1.8 var(--mono); }
.toc a:hover { color: var(--teal-ink); }
.toc a.active { color: var(--teal-ink); border-left-color: var(--amber); }

.area { padding: 0 0 56px; margin-bottom: 56px; border-bottom: 1px solid var(--line); }
.area:last-child { border-bottom: 0; margin-bottom: 0; }
.area .num { font: 500 13px/1 var(--mono); color: var(--teal); }
.area h2 { font-family: var(--display); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.035em; margin: 14px 0 24px; max-width: 22ch; }
.area .summary { font-size: 21px; line-height: 1.45; letter-spacing: -.005em; max-width: 40ch; }
.area .body { max-width: 66ch; color: #2f4546; font-size: 17px; }
.caps { margin-top: 28px; max-width: 66ch; display: grid; grid-template-columns: 1fr; gap: 0 32px; padding: 0; list-style: none; }
.caps li { padding: 14px 0 14px 26px; border-top: 1px solid var(--line); position: relative; font-size: 15px; }
.caps li::before { content: ""; position: absolute; left: 0; top: 22px; width: 12px; height: 2px; background: var(--amber); }

.next-practice { display: flex; justify-content: space-between; align-items: end; gap: 24px; text-decoration: none; padding: 56px 0; border-top: 1px solid var(--teal-ink); }
.next-practice .serif { font-weight: 600; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.04em; transition: color .2s; }
.next-practice:hover .serif { color: var(--teal); }

/* Reveal on scroll */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.instant { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .practice { grid-template-columns: 28px 1fr; }
  .practice ul, .practice .go { grid-column: 2; }
  .practice .go { display: none; }
  .principles { grid-template-columns: 1fr 1fr; }
  .principle:nth-child(2) { border-right: 0; }
  .principle:nth-child(3) { padding-left: 0; }
  .contact-grid, .doc, .partner { grid-template-columns: 1fr; }
  .partner-side { position: static; max-width: 520px; }
  .toc { position: static; }
  .section-head { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .nav { position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px;
    background: var(--teal-deep); transform: translateY(-120%); transition: transform .35s var(--ease); z-index: -1; }
  .nav a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .brand img { height: 36px; }
  .nav a::after { display: none; }
  body.menu-open .nav { transform: none; }
  .menu-toggle { display: block; }
  body.menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  body.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero-foot { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
  .section-head { margin-bottom: 32px; }
  .practice { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .practice .num { padding-top: 0; }
  .practice ul { grid-column: 1; }
  .hero { display: flex; flex-direction: column; }
  .thread { display: none; }
  .caps { grid-template-columns: 1fr; }
  .partner-cols, .offer { grid-template-columns: 1fr; }
  .partner-cta { padding: 28px; }
  .area .body { font-size: 16px; }
  .practice ul { columns: 1; }
  .principles { grid-template-columns: 1fr; }
  .principle, .principle + .principle { padding: 28px 0 8px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .row-2, .facts { grid-template-columns: 1fr; }
  .area .summary { font-size: 19px; }
}

/* Phones: no motion — no intro thread, no page fade, no reveal-on-scroll */
@media (max-width: 760px) {
  main { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Practice pages on phones: guarantee side margins for the content column (incl. iPhone notch safe-area) */
@media (max-width: 760px) {
  .wrap.doc, .page-hero .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .doc { gap: 40px; }
  .doc > div, .area { min-width: 0; }
}