/* About-only editorial surface. Tokens come from the existing homepage. */
.about-page.about-story { background:var(--canvas); color:var(--ink); }
.about-page .about-wrap { width:min(1000px, calc(100% - 96px)); margin-inline:auto; }
.about-page p { color:var(--body); font-size:var(--reading-body); line-height:1.75; text-wrap:pretty; }
.about-page h1,.about-page h2,.about-page h3,.about-page h4 { color:var(--ink); letter-spacing:-.025em; text-wrap:balance; word-break:keep-all; overflow-wrap:break-word; }
.about-page .about-label { color:var(--accent); font-size:.875rem; font-weight:650; letter-spacing:.04em; line-height:1.6; margin:0 0 20px; }
.about-page .about-story-hero { width:min(1200px,calc(100% - 96px)); display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:40px; align-items:center; padding-block:56px 64px; }
.about-page .about-story-hero h1 { font-size:clamp(1.0625rem,2.55vw,2.5rem); font-weight:650; line-height:1.4; margin:0 0 24px; }
.about-page .about-story-hero h1 span { display:block; white-space:normal; color:inherit; }
.about-page .about-story-hero h1 span + span { color:var(--accent); }
.about-page .about-intro { max-width:760px; margin:0; }
.about-page .about-story-index { display:flex; gap:36px; margin-top:36px; }
.about-page .about-story-index a { color:var(--ink); font-size:1rem; font-weight:600; text-decoration:none; padding-block:10px; border-bottom:1px solid var(--control-line); }
.about-page .about-story-index a span { margin-left:16px; color:var(--accent); }
.about-page a:focus-visible,.about-page button:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.about-page .about-chapter { display:flex; align-items:center; gap:18px; border-top:1px solid var(--control-line); padding-top:28px; }
.about-page .about-chapter > span { font-size:.875rem; color:var(--accent); }
.about-page .about-chapter h2 { font-size:1.1875rem; font-weight:650; margin:0; letter-spacing:0; }
.about-page .about-founding > .about-chapter,.about-page .about-founding-intro { max-width:1000px; }
.about-page .about-founding-intro { margin-top:24px; margin-bottom:0; }
.about-page .about-scene-row { padding:52px max(24px,calc((100% - 1000px)/2)); }
.about-page .about-scene-row > header { margin-bottom:24px; }
.about-page .about-scene-row > .about-prose { max-width:900px; }
.about-page .about-scene-row h3,.about-page .about-name-layout h3 { font-size:clamp(1.0625rem,4.4vw,2.125rem); line-height:1.45; font-weight:600; margin:0; white-space:nowrap; }
.about-page .about-scene-row .about-label { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.about-page .about-scene-icon { width:44px; height:44px; padding:10px; box-sizing:border-box; flex-shrink:0; border-radius:12px; color:var(--accent); background:var(--brand-pale); }
.about-page .about-experience { background:var(--palette-canvas); }
.about-page .about-experience .about-label { color:var(--palette-review-ink); }
.about-page .about-experience .about-scene-icon { color:var(--palette-review-ink); background:var(--palette-review-wash); }
.about-page .about-continuity { background:var(--palette-care-wash); }
.about-page .about-continuity .about-label { color:var(--palette-care-ink); }
.about-page .about-continuity .about-scene-icon { color:var(--palette-care-ink); background:var(--white); }
.about-page .about-prose p { margin:0 0 24px; }
.about-page .about-prose > :last-child { margin-bottom:0; }
.about-page .about-sources { max-width:1000px; padding-block:20px 8px; color:var(--story-soft); }
.about-page .about-sources p { font-size:.75rem; line-height:1.7; color:inherit; margin:0; }
.about-page .about-sources a { display:inline-flex; align-items:center; gap:5px; min-height:44px; margin-right:20px; font-size:.75rem; line-height:1.65; color:inherit; text-decoration:none; }
.about-page .about-source-title { text-decoration:underline; text-underline-offset:3px; }
.about-page .about-sources a:hover { color:var(--accent); }
.about-page .about-citation { font-size:.6875rem; margin-left:4px; color:var(--story-soft); }
.about-page .about-consultation { margin:0; }
.about-page .about-consultation img { display:block; width:100%; height:auto; aspect-ratio:1.25; object-fit:cover; object-position:52% center; border-radius:16px; }
.about-page .about-consultation figcaption { font-size:.8125rem; line-height:1.65; color:var(--muted); margin-top:10px; }
.about-page .about-crm-diagram { display:grid; grid-template-columns:.55fr 1.45fr; gap:32px; padding:32px; margin:32px 0 0; background:var(--white); border:1px solid var(--story-border); border-radius:16px; }
.about-page .about-crm-diagram figcaption { display:flex; flex-direction:column; align-items:flex-start; color:var(--body); font-size:.875rem; line-height:1.7; }
.about-page .about-diagram-year { font-size:3.5rem; font-weight:550; letter-spacing:-.06em; line-height:1; color:var(--palette-review-ink); margin-bottom:24px; }
.about-page .about-crm-diagram figcaption strong { color:var(--ink); font-size:1.25rem; font-weight:650; margin-bottom:16px; }
.about-page .about-crm-connection { display:grid; grid-template-columns:1fr 40px 1.1fr 40px 1fr; align-items:center; gap:12px; color:var(--accent); }
.about-page .about-crm-person { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.about-page .about-crm-person svg { width:48px; height:48px; }
.about-page .about-crm-person:first-child { color:var(--palette-review-ink); }
.about-page .about-crm-person:last-child { color:var(--palette-care-ink); }
.about-page .about-crm-person:first-child svg { background:var(--palette-review-wash); border-radius:12px; padding:6px; box-sizing:border-box; }
.about-page .about-crm-person:last-child svg { background:var(--palette-care-wash); border-radius:12px; padding:6px; box-sizing:border-box; }
.about-page .about-crm-person strong { font-weight:600; font-size:1.0625rem; }
.about-page .about-flow-arrow { text-align:center; font-size:2rem; }
.about-page .about-crm-hub { display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--brand-pale); color:var(--accent); padding:24px 12px; text-align:center; border-radius:12px; }
.about-page .about-crm-hub strong { font-size:1.75rem; font-weight:600; }
.about-page .about-crm-hub span { font-size:.9375rem; }
.about-page .about-crm-connects { text-align:center; font-size:.9375rem; margin:28px 0 20px; padding-top:24px; border-top:1px solid var(--control-line); }
.about-page .about-care-stages { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; list-style:none; padding:0; margin:0; }
.about-page .about-care-stages li { position:relative; color:var(--ink); font-size:1.0625rem; font-weight:600; text-align:center; line-height:1.6; }
.about-page .about-care-stages li span { display:block; color:var(--accent); font-size:.8125rem; margin-bottom:6px; }
.about-page .about-care-stages li:not(:last-child)::after { content:'→'; position:absolute; right:-22px; top:24px; color:var(--accent); }
.about-page .about-prose .about-emphasis { color:var(--palette-care-ink); font-weight:600; border-left:3px solid var(--palette-care-ink); padding:20px 24px; margin-block:28px; background:var(--white); }
.about-page .about-brand-story { background:var(--white); padding-block:40px 64px; }
.about-page .about-name-layout { margin-top:36px; }
.about-page .about-name-meaning { display:grid; grid-template-columns:1fr 1fr; gap:24px 56px; align-items:center; margin-top:32px; }
.about-page .about-name-meaning .about-official-logo { margin:0 0 20px; }
.about-page .about-official-logo { background:var(--white); margin:0 0 28px; }
.about-page .about-official-logo img { display:block; width:100%; height:auto; }
.about-page .about-name-parts { display:flex; gap:24px; align-items:center; margin:0 0 28px; }
.about-page .about-name-parts > div { flex:1; }
.about-page .about-name-parts dt { color:var(--accent); font-size:1.75rem; font-weight:650; line-height:1.4; }
.about-page .about-name-parts dd { margin:8px 0 0; color:var(--ink); font-size:1.0625rem; line-height:1.65; }
.about-page .about-name-parts > div + div { padding-left:32px; position:relative; }
.about-page .about-name-parts > div + div::before { content:'+'; position:absolute; left:0; top:20px; color:var(--accent); font-size:1.5rem; }
.about-page .about-name-meaning > p { margin:0; }
.about-page .about-cycles { padding-block:56px 64px; }
.about-page .about-cycle-heading { max-width:1000px; }
.about-page .about-cycle-heading h3 { font-size:clamp(1.0625rem,4.4vw,2.125rem); line-height:1.45; font-weight:600; margin:0 0 24px; white-space:nowrap; }
.about-page .about-cycle-heading > p:last-child { margin:0; max-width:900px; }
.about-page .about-cycle-pair { display:grid; grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); align-items:center; margin-top:48px; padding-block:32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-page .about-cycle-track { align-self:stretch; padding:12px 0; }
.about-page .about-patient-cycle { --loop-color:var(--palette-care-ink); --loop-wash:var(--palette-care-wash); }
.about-page .about-operations-cycle { --loop-color:var(--palette-review-ink); --loop-wash:var(--palette-review-wash); }
.about-page .about-cycle-track h4 { margin:0 0 12px; font-size:1.5rem; font-weight:650; }
.about-page .about-cycle-track > p { margin:0 0 24px; font-size:1.0625rem; }
.about-page .about-loop-map { position:relative; height:400px; }
.about-page .about-loop-lines { position:absolute; inset:0; width:100%; height:100%; color:var(--loop-color); pointer-events:none; }
.about-page .about-loop-lines path { stroke:currentColor; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.about-page .about-loop-lines .about-arrowheads { stroke-width:2; }
.about-page .about-cycle-track ol { list-style:none; padding:0; margin:0; }
.about-page .about-cycle-track li { position:absolute; width:calc(50% - 24px); min-height:104px; box-sizing:border-box; padding:16px 12px; color:var(--ink); background:var(--loop-wash); border:1px solid var(--story-border); border-radius:12px; font-size:1.0625rem; line-height:1.65; text-align:center; word-break:keep-all; overflow-wrap:break-word; }
.about-page .about-step-number { display:block; color:var(--loop-color); font-size:.8125rem; font-weight:600; margin-bottom:8px; }
.about-page .about-cycle-track li:nth-child(1) { top:0; left:0; }
.about-page .about-cycle-track li:nth-child(2) { top:0; right:0; }
.about-page .about-patient-cycle li:nth-child(3) { bottom:0; right:0; }
.about-page .about-patient-cycle li:nth-child(4) { bottom:0; left:0; }
.about-page .about-operations-cycle li:nth-child(3) { top:50%; right:0; transform:translateY(-50%); }
.about-page .about-operations-cycle li:nth-child(4) { bottom:0; right:0; }
.about-page .about-operations-cycle li:nth-child(5) { bottom:0; left:0; }
.about-page .about-cycle-track .about-approval-step { background:var(--palette-care-ink); border-color:var(--palette-care-ink); color:var(--white); font-weight:650; }
.about-page .about-approval-step .about-step-number { color:var(--white); }
.about-page .about-loop-center { position:absolute; inset:50% 0 auto; transform:translateY(-50%); text-align:center; color:var(--loop-color); font-size:1.0625rem; line-height:1.75; }
.about-page .about-cycle-track .about-loop-return { font-size:.9375rem; color:var(--loop-color); font-weight:550; margin:16px 0 0; }
.about-page .about-cycle-bridge { text-align:center; color:var(--accent); }
.about-page .about-cycle-bridge > span { display:block; font-family:Arial,sans-serif; font-size:5.5rem; line-height:1.2; }
.about-page .about-cycle-bridge small { display:block; font-size:.875rem; line-height:1.6; }
.about-page .about-cycle-caption { color:var(--body); font-size:.875rem; line-height:1.7; margin:16px 0 0; }
.about-page .about-cycle-explanation { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:32px; }
.about-page .about-cycle-explanation p { margin:0; }
.about-page .about-story-end { background:var(--brand-pale); padding-block:56px 64px; }
.about-page .about-story-end h2 { margin:0 0 24px; font-size:clamp(1.0625rem,4.4vw,2.125rem); line-height:1.5; font-weight:600; white-space:nowrap; }
.about-page .about-story-end h2 span { color:var(--accent); }
.about-page .about-story-end p { margin-bottom:28px; }
.about-page .about-story-end .about-label { margin-bottom:20px; }
.about-page .about-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (max-width:1000px) {
  .about-page .about-wrap { width:calc(100% - 64px); }
  .about-page .about-story-hero { gap:32px; }
  .about-page .about-crm-diagram { grid-template-columns:1fr; gap:32px; padding:32px; }
  .about-page .about-crm-diagram figcaption { display:grid; grid-template-columns:auto 1fr; column-gap:24px; align-items:center; }
  .about-page .about-diagram-year { grid-row:1/3; margin:0; }
  .about-page .about-crm-diagram figcaption strong { margin:0; }
  .about-page .about-crm-diagram figcaption strong br { display:none; }
  .about-page .about-name-meaning { column-gap:32px; }
  .about-page .about-cycle-pair { grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr); }
  .about-page .about-cycle-track { padding-inline:0; }
  .about-page .about-cycle-bridge > span { font-size:5.5rem; }
  .about-page .about-cycle-bridge small { font-size:.8125rem; }
  .about-page .about-cycle-explanation { gap:40px; }
}
@media (max-width:780px) {
  .about-page .about-wrap { width:calc(100% - 48px); }
  .about-page .about-story-hero { grid-template-columns:1fr; padding-block:48px; gap:32px; }
  .about-page .about-consultation img { aspect-ratio:1.5; }
  .about-page .about-story-hero h1 { font-size:clamp(1.5rem,4.4vw,2.125rem); }
  .about-page .about-name-meaning { display:flex; flex-direction:column; align-items:stretch; }
  .about-page .about-scene-row { padding-block:40px; }
  .about-page .about-name-meaning { max-width:640px; }
  .about-page .about-brand-story { padding-block:36px 52px; }
  .about-page .about-name-layout { margin-top:36px; }
  .about-page .about-cycles { padding-block:56px; }
  .about-page .about-cycle-pair { grid-template-columns:1fr; margin-top:32px; padding-block:20px; }
  .about-page .about-cycle-track { padding:16px 0; width:100%; max-width:480px; justify-self:center; }
  .about-page .about-cycle-bridge { display:flex; align-items:center; justify-content:center; gap:20px; border-block:1px solid var(--line); padding-block:4px; margin-block:16px; }
  .about-page .about-cycle-bridge > span { font-size:4.5rem; }
  .about-page .about-cycle-bridge small { font-size:.9375rem; }
  .about-page .about-cycle-explanation { grid-template-columns:1fr; gap:24px; }
  .about-page .about-story-end { padding-block:48px 56px; }
}
@media (max-width:480px) {
  .about-page p { font-size:var(--reading-body); line-height:1.75; }
  .about-page .about-story-hero h1 { font-size:clamp(1.0625rem,5.1vw,1.5rem); }
  .about-page .about-label { font-size:.8125rem; margin-bottom:16px; }
  .about-page .about-story-index { gap:24px; margin-top:24px; }
  .about-page .about-story-index a { font-size:.9375rem; }
  .about-page .about-story-index a span { margin-left:8px; }
  .about-page .about-crm-diagram { padding:24px 16px; }
  .about-page .about-crm-diagram figcaption { display:flex; align-items:flex-start; gap:12px; }
  .about-page .about-diagram-year { font-size:2.75rem; }
  .about-page .about-crm-connection { grid-template-columns:1fr 28px 1fr; gap:16px 8px; }
  .about-page .about-crm-person { gap:8px; }
  .about-page .about-crm-person strong { font-size:1rem; }
  .about-page .about-crm-hub { grid-column:1/-1; grid-row:2; padding:16px; position:relative; margin-top:16px; }
  .about-page .about-crm-hub::before { content:'↕'; position:absolute; left:calc(50% - 12px); top:-40px; color:var(--accent); font-size:1.75rem; }
  .about-page .about-crm-connection > .about-flow-arrow:nth-of-type(2) { display:none; }
  .about-page .about-crm-connects { font-size:.875rem; }
  .about-page .about-care-stages { gap:24px; }
  .about-page .about-care-stages li { font-size:1rem; }
  .about-page .about-care-stages li:not(:last-child)::after { right:-19px; }
  .about-page .about-scene-row h3,.about-page .about-name-layout h3,.about-page .about-cycle-heading h3,.about-page .about-story-end h2 { font-size:clamp(1.0625rem,5.1vw,1.5rem); }
  .about-page .about-name-parts { gap:16px; }
  .about-page .about-name-parts dd { font-size:1rem; }
  .about-page .about-story-end h2 br { display:none; }
  .about-page .about-story-end h2 span { display:block; margin-top:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .about-page *, .about-page *::before, .about-page *::after { animation:none; transition:none; }
}

/* Photos establish the story; short paired columns keep the chronology scannable. */
.about-page .about-life-photo { margin:0; }
.about-page .about-life-photo img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:16px; }
.about-page .about-scene-copy header { margin-bottom:20px; }
#main .about-page .about-scene-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
#main .about-page .about-scene-row > header { margin:0; }
#main .about-page .about-scene-row h3 { white-space:normal; font-size:var(--reading-section); line-height:1.45; }
.about-page .about-name-meaning { gap:20px 56px; }
.about-page .about-brand-identity,.about-page .about-brand-copy { min-width:0; }
.about-page .about-name-parts { margin:0; }
.about-page .about-brand-copy > p { margin:0 0 24px; }
.about-page .about-brand-copy h3 { margin:0 0 8px; font-size:18px; line-height:1.5; color:var(--accent); white-space:normal; }
.about-page .about-brand-promise p { margin:0; }
.about-page .about-brand-promise { scroll-margin-top:100px; }
@media(max-width:760px) {
 #main .about-page .about-scene-row { grid-template-columns:1fr; gap:24px; }
 #main .about-page .about-scene-row h3 { font-size:var(--reading-section); }
 .about-page .about-name-meaning { gap:24px; }
 .about-page .about-brand-identity { max-width:360px; width:100%; align-self:center; }
}