/* =============================================================================
   About, the house story (template-about.php), body.ca-about. Light UI frame and tokens (--ui-*)
   come from ui.css. Calm editorial: narrow reading column, founder beside his portrait, a vertical
   timeline whose line fills with scroll (CSS scroll-driven animation, guarded), principle cards,
   verbatim reviews, one contact band. House tokens only.
   ============================================================================= */
body.ca-about { background: var(--ui-bg); }
html:has(body.ca-about), body.ca-about { overflow-x: clip; }
body.ca-about .ab { display: block; color: var(--ui-ink); background: var(--ui-bg); font-family: 'Jost', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.65; }
body.ca-about .ab *, body.ca-about .ab *::before, body.ca-about .ab *::after { box-sizing: border-box; }
body.ca-about .ab-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
body.ca-about .ab-narrow { max-width: calc(760px + 2 * clamp(1.25rem, 5vw, 3rem)); }
body.ca-about .ab h1, body.ca-about .ab h2, body.ca-about .ab h3 { font-family: 'Jost', sans-serif; font-style: normal; text-transform: none; letter-spacing: -.005em; color: var(--ui-ink); text-align: left; }
body.ca-about .ab p { font-family: 'Jost', sans-serif; color: inherit; }
body.ca-about .ab-eyebrow { margin: 0 0 .75rem; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-accent); }

/* Hero: text beside the portrait, caption under the photograph, never on it */
body.ca-about .ab-hero { padding: clamp(2rem, 5vw, 4rem) 0 0; } /* the founder band below carries the section rhythm */
body.ca-about .ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
body.ca-about .ab-h1 { font-weight: 600; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); line-height: 1.08; margin: 0 0 1.1rem; }
body.ca-about .ab-lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--ui-ink-2); margin: 0 0 1.75rem; max-width: 34em; }
body.ca-about .ab-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
body.ca-about .ab-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.4rem; border-radius: var(--ui-radius-sm); font: 600 16px/1.2 'Jost', sans-serif; text-decoration: none; text-transform: none; letter-spacing: .01em; transition: background var(--ca-transition), border-color var(--ca-transition); }
body.ca-about .ab-btn-wa { background: var(--wa-green); color: var(--ivory); border: 1px solid var(--wa-green); }
body.ca-about .ab-btn-wa:hover { background: var(--wa-green-lt); border-color: var(--wa-green-lt); color: var(--ivory); }
body.ca-about .ab-btn-ghost { background: transparent; color: var(--ui-ink); border: 1px solid color-mix(in srgb, var(--obsidian) 35%, transparent); }
body.ca-about .ab-btn-ghost:hover { border-color: var(--ui-ink); color: var(--ui-ink); }
body.ca-about .ab-btn:focus-visible, body.ca-about .ab a:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
body.ca-about .ab-rating { display: inline-flex; align-items: center; gap: .6rem; font-size: 15px; color: var(--ui-ink-2); text-decoration: none; }
body.ca-about .ab-rating strong { color: var(--ui-ink); font-weight: 600; }
body.ca-about .ab-stars { color: var(--gold-dark); letter-spacing: .1em; font-size: 15px; }
body.ca-about .ab-portrait { margin: 0; }
body.ca-about .ab-portrait-img { border-radius: var(--ui-radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--ui-tint); box-shadow: var(--ui-shadow); }
body.ca-about .ab-portrait-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
body.ca-about .ab-portrait figcaption { display: flex; flex-direction: column; gap: .15rem; margin-top: .9rem; font-family: 'Jost', sans-serif !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; text-align: left; }
body.ca-about .ab-portrait figcaption strong { font-weight: 600; font-size: 17px; color: var(--ui-ink); }
body.ca-about .ab-portrait figcaption span { font-size: 14px; font-weight: 400; color: var(--ui-ink-2); }
body.ca-about .ab-portrait figcaption a { color: var(--ui-ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* Sections */
body.ca-about .ab-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
body.ca-about .ab-tint { background: var(--ui-tint); }
body.ca-about .ab-h2 { font-weight: 600; font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.18; margin: 0 0 .6rem; }
body.ca-about .ab-sub { color: var(--ui-ink-2); margin: 0; max-width: 40em; font-size: 17px; }
body.ca-about .ab-sec-head { margin: 0 0 1.75rem; max-width: 52em; }
body.ca-about .ab-sec-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; max-width: none; }
body.ca-about .ab-link { font-weight: 500; color: var(--ui-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Founder: one statement, then the pull line */
body.ca-about .ab-founder { padding-bottom: 0; }
body.ca-about .ab-pull { margin: 1.5rem 0 0; padding: 0 0 0 1.25rem; border-left: 3px solid var(--ui-accent); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); line-height: 1.45; font-weight: 500; color: var(--ui-ink); }

/* Timeline: a track, and a fill that follows the reader through it */
body.ca-about .ab-tl { --ab-x: 11px; position: relative; list-style: none; margin: 2rem 0 0; padding: 0 0 0 calc(var(--ab-x) * 2 + 1.25rem); }
body.ca-about .ab-tl::before, body.ca-about .ab-tl::after { content: ""; position: absolute; left: var(--ab-x); top: .6rem; bottom: .6rem; width: 2px; transform: translateX(-50%); border-radius: 2px; }
body.ca-about .ab-tl::before { background: var(--ui-line); }
body.ca-about .ab-tl::after { background: var(--ui-accent); transform-origin: top; }
body.ca-about .ab-step { position: relative; margin: 0; padding: 0 0 2rem; }
body.ca-about .ab-step:last-child { padding-bottom: 0; }
body.ca-about .ab-step::before { content: ""; position: absolute; left: calc((var(--ab-x) * 2 + 1.25rem) * -1 + var(--ab-x)); top: .45rem; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: var(--ui-accent); border: 2px solid var(--ui-accent); box-shadow: 0 0 0 4px var(--ui-bg); z-index: 1; }
body.ca-about .ab-step-end::before { width: 18px; height: 18px; top: .3rem; }
body.ca-about .ab-step-label { margin: 0 0 .35rem; font-size: 19px; font-weight: 600; line-height: 1.3; }
body.ca-about .ab-step p { margin: 0; font-size: 17px; color: var(--ui-ink-2); max-width: 38em; }
body.ca-about .ab-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .9rem 0 0; padding: 0; }
body.ca-about .ab-chips li { margin: 0; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-paper); font-size: 14px; font-weight: 500; color: var(--ui-ink); }
body.ca-about .ab-coda { margin: 2.25rem 0 0; padding: 1.4rem 1.5rem; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); font-size: 17px; color: var(--ui-ink); }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        body.ca-about .ab-tl { view-timeline: --ab-tl block; }
        body.ca-about .ab-tl::after { animation: ab-fill linear both; animation-timeline: --ab-tl; animation-range: entry 50% exit 50%; }
        body.ca-about .ab-step::before { animation: ab-dot linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
        body.ca-about .ab-step > * { animation: ab-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    }
}
@keyframes ab-fill { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
@keyframes ab-dot { from { background: var(--ui-bg); border-color: var(--ui-line); } to { background: var(--ui-accent); border-color: var(--ui-accent); } }
@keyframes ab-rise { from { opacity: .25; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Principle cards */
body.ca-about .ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
body.ca-about .ab-card { padding: 1.5rem 1.4rem 1.6rem; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
body.ca-about .ab-card-n { display: inline-block; margin-bottom: .9rem; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--ui-accent); }
body.ca-about .ab-card h3 { font-weight: 600; font-size: 19px; line-height: 1.3; margin: 0 0 .5rem; }
body.ca-about .ab-card p { margin: 0; font-size: 16px; color: var(--ui-ink-2); }

/* The bad day story */
body.ca-about .ab-story { margin-top: 1.25rem; }
body.ca-about .ab-story p { margin: 0 0 1.1rem; font-size: 17px; color: var(--ui-ink-2); }
body.ca-about .ab-story p:last-child { margin: 0; color: var(--ui-ink); font-weight: 500; }

/* Reviews */
body.ca-about .ab-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
body.ca-about .ab-quote { margin: 0; padding: 1.4rem; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); display: flex; flex-direction: column; gap: .75rem; }
body.ca-about .ab-quote blockquote { margin: 0; padding: 0; border: 0; }
body.ca-about .ab-quote blockquote, body.ca-about .ab-quote blockquote p, body.ca-about .ab-quote figcaption, body.ca-about .ab-quote figcaption a {
    font-family: 'Jost', sans-serif !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; quotes: none; text-align: left !important; }
body.ca-about .ab-quote blockquote::before, body.ca-about .ab-quote blockquote::after { content: none !important; display: none !important; }
body.ca-about .ab-quote blockquote p { margin: 0; font-weight: 400 !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--ui-ink) !important; }
body.ca-about .ab-quote figcaption { margin-top: auto; font-weight: 400 !important; font-size: 14px !important; color: var(--ui-ink-2) !important; }
body.ca-about .ab-quote figcaption a { color: var(--ui-ink-2) !important; }

/* In brief (FAQ block from the page content, restyled to the light page) */
body.ca-about .ab-brief .ca-faq { margin: 0; padding: 0; background: none; border: 0; max-width: none; text-align: left; }
body.ca-about .ab-brief .ca-faq .ca-eyebrow { margin: 0 0 .75rem; font: 600 13px/1.4 'Jost', sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--ui-accent) !important; text-align: left !important; }
body.ca-about .ab-brief .ca-faq h3 { margin: 1.5rem 0 .4rem; font: 600 19px/1.3 'Jost', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ui-ink) !important; text-align: left !important; }
body.ca-about .ab-brief .ca-faq p { margin: 0; font: 400 17px/1.65 'Jost', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ui-ink-2) !important; text-align: left !important; }

/* Contact band */
body.ca-about .ab-contact { padding-top: 0; }
body.ca-about .ab-contact-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }

@media (max-width: 960px) {
    body.ca-about .ab-hero-grid { grid-template-columns: minmax(0, 1fr); }
    body.ca-about .ab-portrait { max-width: 420px; }
    body.ca-about .ab-cards, body.ca-about .ab-quotes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    body.ca-about .ab-hero-grid { gap: 2rem; }
    body.ca-about .ab-portrait-img { aspect-ratio: 1 / 1; }
    body.ca-about .ab-actions .ab-btn, body.ca-about .ab-contact-box .ab-btn { flex: 1 1 100%; }
    body.ca-about .ab-tl { --ab-x: 8px; padding-left: calc(var(--ab-x) * 2 + 1rem); }
    body.ca-about .ab-step::before { left: calc((var(--ab-x) * 2 + 1rem) * -1 + var(--ab-x)); }
}
/* The theme pins h1 smaller on phones; this page title keeps its own scale, as home.css does */
body.ca-about .ab .ab-h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem) !important; line-height: 1.08 !important; }

/* "Trusted by" client logos, restored at Cem's request (2026-10-03): the old About page's own strip, light */
body.ca-about .ab-trust { padding: clamp(2rem, 5vw, 3rem) 0; border-top: 1px solid var(--ui-line); }
body.ca-about .ab-trust-in { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 3rem; }
body.ca-about .ab-trust-h { margin: 0; font-family: 'Jost', sans-serif !important; font-weight: 500; font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-ink-2); }
body.ca-about .ab-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; }
body.ca-about .ab-logos img { height: 32px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .75; }

/* =============================================================================
   m-details 2026-10-08 (S2-3): the founder band on wide screens. The heading and the founder's line sit
   side by side across the full frame on paper between two hairlines; the line set in the display face
   under a short gold rule. Phones keep the single column above.
   ============================================================================= */
@media (min-width: 1024px) {
    body.ca-about .ab-founder { margin-top: clamp(3rem, 5vw, 4.5rem); padding: clamp(3.5rem, 5vw, 5rem) 0; background: var(--ui-paper); border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); }
    body.ca-about .ab-founder .ab-founder-grid { max-width: 1200px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
    body.ca-about .ab-founder .ab-h2 { margin-bottom: 0; }
    body.ca-about .ab-founder .ab-pull { margin: 0; padding: 0; border-left: 0; max-width: 18em;
        font-family: var(--ui-font-display); font-weight: 400; letter-spacing: var(--ui-display-track); font-size: clamp(1.6rem, 1rem + 1.2vw, 2.25rem); line-height: 1.25; }
}
@media (min-width: 1024px) {
    body.ca-about .ab-founder .ab-pull::before { content: ""; display: block; width: 56px; height: 2px; margin: 0 0 1.25rem; background: var(--ui-accent); }
}
@media (min-width: 1600px) {
    body.ca-about .ab-founder .ab-pull { font-size: 2.4rem; }
}
/* The reading measure (m-details 2026-10-08): story and timeline text near 66 characters a line at every width */
body.ca-about .ab-story p, body.ca-about .ab-step p, body.ca-about .ab-coda { max-width: 32em; }