/* =========================================================
   RAQ.lk About page (prototype)
   Builds on ../homepage/styles.css and ../medical-devices/service.css.
   Corporate editorial layout; no new colours (verified tokens only).
   ========================================================= */

/* Hero */
.about-hero { background: var(--green-800); color: var(--on-dark); padding: 40px 0 56px; }
@media (min-width: 1000px) { .about-hero { padding: 56px 0 88px; } }
.about-hero__grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .about-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: end; } }
.about-hero__title { color: #fff; font-weight: 600; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.06; letter-spacing: -0.032em; margin-bottom: 24px; max-width: 16ch; }
.about-hero__lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; color: #fff; max-width: 58ch; }
.about-facts { border-top: 1px solid var(--on-dark-line-strong); }
@media (min-width: 1000px) { .about-facts { border-top: 0; border-left: 1px solid var(--on-dark-line-strong); padding-left: 32px; } }
.about-facts > div { padding: 14px 0; border-bottom: 1px solid var(--on-dark-line); }
.about-facts dt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 4px; }
.about-facts dd { margin: 0; color: #fff; font-size: 16px; line-height: 1.5; }

/* Intro: long-form column with a side statement */
.intro-cols { display: grid; gap: 40px; }
@media (min-width: 1000px) { .intro-cols { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: start; } }
.intro-cols .prose p { font-size: 17.5px; line-height: 1.7; }
.intro-cols .prose p + p { margin-top: 16px; }
.statement { border-top: 3px solid var(--gold-400); padding-top: 20px; }
.statement__title { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); font-family: var(--font-body); margin-bottom: 10px; }
.statement p { font-size: 17px; color: var(--ink-900); line-height: 1.6; }
.statement p + p { margin-top: 12px; }

/* Expertise rows */
.expertise { border-top: 1px solid var(--ink-900); }
.expertise__row { display: grid; gap: 8px 48px; padding: 26px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .expertise__row { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr); align-items: baseline; } }
.expertise__name { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.expertise__row p { font-size: 16.5px; max-width: 58ch; }
.expertise__link { font-weight: 600; font-size: 15.5px; white-space: nowrap; }
@media (min-width: 900px) { .expertise__link { justify-self: end; } }

/* Approach: numbered editorial list in two columns */
.approach { counter-reset: ap; display: grid; gap: 0 56px; border-top: 1px solid var(--ink-900); }
@media (min-width: 900px) { .approach { grid-template-columns: 1fr 1fr; } }
.approach li { position: relative; padding: 22px 0 22px 52px; border-bottom: 1px solid var(--line); }
.approach li::before { counter-increment: ap; content: counter(ap, decimal-leading-zero); position: absolute; left: 0; top: 22px; font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--green-700); }
.approach h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.approach p { font-size: 16px; max-width: 46ch; }
/* Activities within the four consultancy phases (not numbered stages) */
.approach--activities { list-style: none; padding: 0; }
.approach--activities li { padding-left: 0; }
.approach--activities li::before { content: none; }
.approach__phase { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--green-700); margin-bottom: 4px; }
.approach-note { margin-top: 32px; font-size: 17px; max-width: 70ch; color: var(--ink-900); }

/* Clients line */
.clients { display: grid; gap: 28px; }
@media (min-width: 1000px) { .clients { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; } }
.clients__list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.clients__list li:first-child { border-top: 1px solid var(--ink-900); }
.clients__list strong { font-weight: 600; }

/* Commitments */
.commit { display: grid; gap: 0 56px; border-top: 1px solid var(--ink-900); }
@media (min-width: 900px) { .commit { grid-template-columns: 1fr 1fr; } }
.commit > div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.commit h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.commit p { font-size: 16px; max-width: 48ch; }

/* Single leadership profile: the owner-supplied photograph is shown in full. */
.leadership { display: grid; gap: 28px; align-items: center; max-width: 960px; }
.leadership__photo { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; border-radius: var(--radius-sm); }
.leadership__profile { border-top: 3px solid var(--gold-400); padding-top: 24px; }
.leadership__name { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: var(--ink-900); }
.leadership__role { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-700); }
.leadership__link { display: inline-block; margin-top: 24px; }
@media (min-width: 760px) { .leadership { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; } }

/* Business details */
.details { display: grid; gap: 0 48px; margin-top: 28px; border-top: 1px solid var(--on-dark-line-strong); }
@media (min-width: 760px) { .details { grid-template-columns: 1fr 1fr; } }
.details > div { padding: 12px 0; border-bottom: 1px solid var(--on-dark-line); }
.details dt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 4px; }
.details dd { margin: 0; }
.expertise-note { margin-top: 20px; }
.details a { color: #fff; }
.details__note { margin-top: 12px; }

/* 25 Oct 2026: client types fill the right-hand column */
.client-types { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-900); }
.client-types li { border-bottom: 1px solid var(--line); }
.client-types a { display: block; padding: 16px 0; font-weight: 600; color: var(--green-700); text-decoration: none; }
.client-types a::after { content: " →"; }
.client-types a:hover, .client-types a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.leadership__bio { font-size: 16.5px; line-height: 1.65; max-width: 58ch; margin: 12px 0 18px; }