/* =====================================================================
   About us
   =====================================================================
   Page-specific, loaded only by about-us.php. It leans on browse.css for
   the shared bits (.pl-crumbs, .pl-prose, .pl-close) and on home.css for
   the accreditation grid (.kh-accred) and the award badge.
   ===================================================================== */

/* ── Who we are ────────────────────────────────────────────────────────── */
.ab-hero { padding: 2rem 0 2.6rem; }
.ab-hero__grid {
    display: grid; gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
}
.ab-hero h1 { margin: .4rem 0 .8rem; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.12; }
.ab-hero__lede { font-size: 1.1rem; line-height: 1.65; color: var(--kt-ink, #14181d); max-width: 54ch; }
.ab-hero__cta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1.4rem; }
.ab-hero__shot { margin: 0; }
.ab-hero__shot img,
.ab-story__shot img,
.ab-guides__shot img {
    width: 100%; height: auto; border-radius: 20px; display: block;
    background: var(--kt-sand-deep, #ece0d1);
}
.ab-hero__shot figcaption,
.ab-story__shot figcaption {
    margin-top: .6rem; font-size: .85rem; color: var(--kt-muted, #5d6570); text-align: center;
}

/* ── The numbers ───────────────────────────────────────────────────────── */
.ab-stats { background: var(--kt-sand, #f6efe6); padding: 1.8rem 0; }
.ab-stats__row {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    text-align: center;
}
.ab-stats__row strong {
    display: block; font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    color: var(--kt-orange-ink, #a8460f); line-height: 1.15;
}
.ab-stats__row span {
    display: block; margin-top: .3rem; font-size: .9rem; line-height: 1.45;
    color: var(--kt-muted, #5d6570);
}

/* ── Proof ─────────────────────────────────────────────────────────────── */
.ab-proof { padding: 2.6rem 0; }
.ab-proof__head { max-width: 62ch; margin-bottom: 1.6rem; }
.ab-proof__head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .5rem; }
.ab-proof__head p { color: var(--kt-muted, #5d6570); margin: 0; line-height: 1.6; }

.ab-proof__badges {
    display: flex; gap: 1rem; flex-wrap: wrap; align-items: stretch;
    margin-bottom: 2rem;
}
.ab-rating {
    display: flex; align-items: center; gap: .8rem;
    padding: 12px 20px; border: 1px solid var(--kt-line, #dfd6ca); border-radius: 16px;
    background: #fff; text-decoration: none; color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ab-rating:hover { border-color: var(--kt-orange, #f4732b); box-shadow: 0 6px 20px rgba(20,24,29,.10); transform: translateY(-1px); }
.ab-rating strong { font-size: 1.7rem; line-height: 1; color: var(--kt-ink, #14181d); }
.ab-rating span { font-size: .82rem; line-height: 1.3; color: var(--kt-muted, #5d6570); }

/* The accreditation grid comes from home.css, where it sits on the dark
   .kh-section--ink band — so .kh-acc h3 is #fff and .kh-acc p is a pale blue.
   On this page the same markup sits on white, which made the licence names and
   the line explaining each one invisible: the logos floated on nothing. Repaint
   the cards for a light background and give them a border so each one reads as
   a card rather than a logo adrift on the page. */
.ab-accred { margin-top: .5rem; }
.ab-accred .kh-acc {
    background: #fff;
    border: 1px solid var(--kt-line, #dfd6ca);
    border-radius: 16px;
}
.ab-accred .kh-acc h3 { color: var(--kt-ink, #14181d); }
.ab-accred .kh-acc p { color: var(--kt-muted, #5d6570); }
/* The logo tiles are white artwork on a white card in two cases (TRA, KATO),
   so they get a faint sand plate to sit on. */
.ab-accred .kh-acc__logo {
    background: var(--kt-sand, #f6efe6);
    border-radius: 10px;
    padding: 6px;
}

/* ── The story ─────────────────────────────────────────────────────────── */
.ab-story { background: var(--kt-sand, #f6efe6); padding: 2.6rem 0; }
.ab-story__grid {
    display: grid; gap: 2rem;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
}
.ab-story h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .8rem; }
.ab-story__shot { margin: 0; position: sticky; top: 90px; }

/* ── The team ──────────────────────────────────────────────────────────── */
.ab-team { padding: 2.6rem 0; }
.ab-team__grid {
    display: grid; gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ab-person {
    background: #fff; border: 1px solid var(--kt-line, #dfd6ca);
    border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
}
.ab-person img {
    width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    object-position: center 28%;
    background: var(--kt-sand-deep, #ece0d1);
}
.ab-person__body { padding: 1rem 1.1rem 1.2rem; }
.ab-person__body h3 { margin: 0; font-size: 1.05rem; }
.ab-person__role {
    margin: .15rem 0 .55rem; font-size: .76rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--kt-orange-ink, #a8460f);
}
.ab-person__blurb { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--kt-muted, #5d6570); }

.ab-guides {
    display: grid; gap: 2rem; align-items: center; margin-top: 2.4rem;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
.ab-guides__shot { margin: 0; }
.ab-guides h3 { font-size: 1.35rem; margin-bottom: .7rem; }

/* ── How we work ───────────────────────────────────────────────────────── */
.ab-how { background: var(--kt-sand, #f6efe6); padding: 2.6rem 0; }
.ab-steps {
    list-style: none; counter-reset: step; margin: 0; padding: 0;
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ab-steps li {
    counter-increment: step; position: relative;
    background: #fff; border: 1px solid var(--kt-line, #dfd6ca);
    border-radius: 16px; padding: 1.5rem 1.2rem 1.2rem;
}
.ab-steps li::before {
    content: counter(step);
    position: absolute; top: -14px; left: 1.2rem;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--kt-orange, #f4732b); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.ab-steps strong { display: block; margin-bottom: .35rem; line-height: 1.3; }
.ab-steps span { font-size: .9rem; line-height: 1.55; color: var(--kt-muted, #5d6570); }

@media (max-width: 860px) {
    .ab-hero__grid,
    .ab-story__grid,
    .ab-guides { grid-template-columns: 1fr; }
    .ab-story__shot { position: static; }
}