/* =============================================================================
   WSDC About page  ·  v1.0
   Unified design system for the redesigned About page. Loaded only on the About
   template (template-about.php). Uses the theme design tokens from main.css.
   Palette is deliberate: navy (--mirage) is used only for the proof band and the
   closing CTA as bookends; cream and white alternate between them; --barley is an
   accent throughout. One card system, one section header, one eyebrow motif.
   ============================================================================= */

/* Shared primitives */
.abt-eye{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--barley-dark);display:inline-flex;align-items:center;gap:.6rem}
.abt-eye::before{content:"";width:26px;height:1px;background:var(--barley)}
.abt-head{text-align:center;max-width:56ch;margin:0 auto var(--s-6)}
.abt-head .abt-eye{justify-content:center;margin-bottom:var(--s-3)}
.abt-head h2{font-size:var(--fs-h1);margin-bottom:var(--s-3)}
.abt-head p{color:var(--ink-muted)}
.abt-arrow{font-weight:600;font-size:.85rem;color:var(--barley-dark);display:inline-flex;gap:.35rem;align-items:center}
.abt-arrow span{transition:transform .25s var(--ease)}
.abt-arrow:hover span{transform:translateX(3px)}
.abt-band{padding-block:var(--section-y)}
.abt-band--cream{background:var(--cream)}
.img-cover{width:100%;height:100%;object-fit:cover;display:block}

/* 1. HERO (full-bleed image) */
.abt-hero{position:relative;min-height:clamp(540px,72vh,760px);display:grid;align-items:center;overflow:hidden;color:#fff}
.abt-hero__bg{position:absolute;inset:0;z-index:0}
.abt-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.abt-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(18,28,38,.9) 0%,rgba(18,28,38,.66) 45%,rgba(18,28,38,.35) 100%)}
.abt-hero__in{position:relative;z-index:1;width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--section-y) var(--gutter)}
.abt-hero .abt-eye{color:var(--barley-light);margin-bottom:var(--s-4)}
.abt-hero .abt-eye::before{background:var(--barley-light)}
.abt-hero h1{color:#fff;font-family:var(--font-display);font-weight:500;font-size:var(--fs-display);line-height:1.06;max-width:17ch;margin-bottom:var(--s-4)}
.abt-hero__lead{color:rgba(255,255,255,.9);font-size:var(--fs-lead);max-width:52ch;margin-bottom:var(--s-5)}
.abt-hero__actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:var(--s-5)}
.abt-hero__chips{display:flex;gap:.7rem;flex-wrap:wrap}
.abt-chip{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:500;color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--hairline-light);border-radius:999px;padding:.5rem .95rem}
.abt-chip b{color:var(--barley-light);font-weight:600}

/* 2. STORY + partners */
.abt-story{padding-block:var(--section-y);background:var(--white)}
.abt-story__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.abt-story__copy .abt-eye{margin-bottom:var(--s-3)}
.abt-story__copy h2{font-size:var(--fs-h1);margin-bottom:var(--s-4);max-width:16ch}
.abt-story__copy p{color:var(--ink-muted);margin-bottom:var(--s-4);max-width:52ch}
.abt-partners{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-3)}
.abt-pcard{text-align:center}
.abt-pcard__img{position:relative;display:block;aspect-ratio:1/1.15;border-radius:var(--radius);overflow:hidden;margin-bottom:.7rem;background:var(--mirage)}
.abt-pcard__img .media-fill-link{position:absolute;inset:0;display:block}
.abt-pcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.abt-pcard__name{font-family:var(--font-display);font-size:1.05rem;line-height:1.15}
.abt-pcard__role{font-size:.75rem;color:var(--barley-dark);font-weight:600;margin-top:.2rem}

/* 3. TIMELINE */
.abt-timeline{position:relative;max-width:840px;margin:0 auto}
.abt-timeline::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:var(--hairline);transform:translateX(-50%)}
.abt-tl{position:relative;width:50%;padding:0 var(--s-6) var(--s-6)}
.abt-tl:nth-child(odd){left:0;text-align:right}
.abt-tl:nth-child(even){left:50%}
.abt-tl__dot{position:absolute;top:.35rem;width:15px;height:15px;border-radius:50%;background:var(--barley);border:3px solid var(--cream);z-index:1}
.abt-tl:nth-child(odd) .abt-tl__dot{right:-7.5px}
.abt-tl:nth-child(even) .abt-tl__dot{left:-7.5px}
.abt-tl__yr{font-family:var(--font-display);font-size:1.6rem;color:var(--barley-dark);line-height:1}
.abt-tl__t{font-weight:600;margin:.25rem 0 .3rem}
.abt-tl__d{color:var(--ink-muted);font-size:.9rem}

/* 4. PROOF band (navy) - clickable stats */
.abt-proof{background:var(--mirage);color:#fff;padding-block:var(--section-y)}
.abt-proof .abt-head h2{color:#fff}
.abt-proof .abt-head p{color:var(--ink-on-dark)}
.abt-proof .abt-eye{color:var(--barley-light)}
.abt-proof .abt-eye::before{background:var(--barley-light)}
.abt-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-4)}
.abt-stat{text-align:center;padding:var(--s-3) var(--s-2);border-radius:var(--radius);transition:background .2s var(--ease)}
.abt-stat + .abt-stat{border-left:1px solid var(--hairline-light)}
.abt-stat:hover{background:rgba(255,255,255,.05)}
.abt-stat__n{display:block;font-family:var(--font-display);font-size:clamp(2rem,1.5rem + 2vw,3rem);color:var(--barley-light);line-height:1}
.abt-stat__l{display:block;font-size:.85rem;color:var(--ink-on-dark);margin-top:.55rem;border-bottom:1px solid transparent;padding-bottom:1px}
.abt-stat:hover .abt-stat__l{color:#fff;border-bottom-color:var(--barley)}

/* 5. SHOWREEL */
.abt-video{position:relative;max-width:960px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--mirage);box-shadow:0 24px 60px -30px rgba(28,42,58,.5)}
.abt-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 6/10/11. SPLIT sections */
.abt-split__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.abt-split--reverse .abt-split__media{order:-1}
.abt-split__media{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--cream)}
.abt-split__media img{width:100%;height:100%;object-fit:cover}
.abt-split__copy .abt-eye{margin-bottom:var(--s-3)}
.abt-split__copy h2{font-size:var(--fs-h1);margin-bottom:var(--s-4);max-width:16ch}
.abt-split__copy p{color:var(--ink-muted);margin-bottom:var(--s-4);max-width:52ch}
.abt-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s-5)}
.abt-pill{font-size:.8rem;font-weight:600;color:var(--mirage);border:1px solid var(--hairline);border-radius:999px;padding:.4rem .9rem;background:var(--white);transition:.2s var(--ease)}
.abt-pill:hover{border-color:var(--barley);color:var(--barley-dark);background:var(--cream)}

/* 7. STANDARDS (numbered) */
.abt-stds{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) clamp(2rem,5vw,4rem)}
.abt-std{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);padding-bottom:var(--s-5);border-bottom:1px solid var(--hairline)}
.abt-std__n{font-family:var(--font-display);font-size:1.8rem;color:var(--barley);line-height:1}
.abt-std__t{font-family:var(--font-display);font-size:var(--fs-h3);margin-bottom:.3rem;color:var(--barley-dark)}
.abt-std__d{color:var(--ink-muted);font-size:.92rem}

/* 8. RECORDS (publications + lectures) */
.abt-records{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.abt-rcol h3{font-family:var(--font-display);font-size:var(--fs-h3);margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:baseline}
.abt-rcol h3 span{font-family:var(--font-body);font-size:.75rem;font-weight:600;color:var(--barley-dark);letter-spacing:.1em;text-transform:uppercase}
.abt-rec{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--hairline)}
.abt-rec__yr{font-weight:600;color:var(--barley-dark);font-size:.85rem}
.abt-rec__txt{color:var(--ink-muted);font-size:.9rem;line-height:1.5}
.abt-rec__txt em{font-style:italic;color:var(--ink)}
.abt-rmore{margin-top:var(--s-5)}

/* 9. TEAM */
.abt-team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5) var(--s-4)}
.abt-tcard__img{position:relative;display:block;aspect-ratio:1/1.2;border-radius:var(--radius);overflow:hidden;background:var(--mirage);margin-bottom:.8rem}
.abt-tcard__img .media-fill-link{position:absolute;inset:0;display:block}
.abt-tcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 16%}
.abt-tcard__name{font-family:var(--font-display);font-size:1.15rem}
.abt-tcard__name a{color:inherit}
.abt-tcard__role{font-size:.78rem;color:var(--barley-dark);font-weight:600;margin-top:.15rem}
.abt-team__foot{text-align:center;margin-top:var(--s-6)}

/* 12. CLINIC photo grid (balanced bento) */
.abt-cgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:210px;grid-auto-flow:dense;gap:var(--s-3)}
.abt-cgrid__item{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--cream);border:1px solid var(--hairline)}
.abt-cgrid__item.is-wide{grid-column:span 2}
.abt-cgrid__item img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.abt-cgrid__item:hover img{transform:scale(1.07)}
.abt-cgrid__item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,42,58,.72),transparent 55%);opacity:0;transition:opacity .3s ease}
.abt-cgrid__item:hover::after{opacity:1}
.abt-cgrid__cap{position:absolute;left:1rem;bottom:.9rem;color:#fff;font-weight:600;font-size:.85rem;z-index:2;opacity:0;transform:translateY(8px);transition:.3s var(--ease)}
.abt-cgrid__item:hover .abt-cgrid__cap{opacity:1;transform:none}
.abt-tour{margin-top:var(--s-3)}
.abt-tour__h{font-family:var(--font-display);font-size:1.5rem;color:var(--mirage);margin:0 0 .2rem}
.abt-tour__sub{color:var(--ink-muted);margin:0 0 var(--s-2)}
.abt-tour__frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--hairline);background:var(--cream);line-height:0}
.abt-tour__frame iframe{width:100%;height:550px;border:0;display:block}
.abt-tour__frame--solo{max-width:960px;margin:0 auto;box-shadow:0 24px 60px -30px rgba(28,42,58,.5)}
@media(max-width:640px){.abt-tour__frame iframe{height:380px}}

/* 13. VISIT US */
.abt-visit{display:grid;grid-template-columns:1.25fr 1fr;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.abt-visit__map{min-height:440px;background:var(--cream);line-height:0}
.abt-visit__map iframe{width:100%;height:100%;min-height:440px;border:0;display:block}
.abt-visit__info{padding:clamp(1.5rem,3vw,2.75rem);display:grid;gap:var(--s-5);align-content:start}
.abt-vlabel{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--barley-dark);margin-bottom:.7rem}
.abt-hours{display:grid;gap:.15rem}
.abt-hours__row{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;padding:.45rem 0;border-bottom:1px solid var(--hairline)}
.abt-hours__row:last-child{border-bottom:0}
.abt-hours__row span:last-child{font-weight:600;color:var(--mirage)}
.abt-vinfo p{font-size:.9rem;color:var(--ink-muted);margin-bottom:.35rem}
.abt-vinfo p b{color:var(--mirage);font-weight:600}
.abt-vinfo a{color:var(--barley-dark);font-weight:600}

/* 14. CTA (navy) */
/* Closing CTA: sized and coloured like the gold closing band at the foot of
   every other page (.td-closing--gold), not an oversized display heading. */
.abt-cta{background:var(--barley);color:#fff;text-align:center}
.abt-cta .wrap{max-width:620px;padding:var(--s-6) var(--s-4)}
.abt-cta h2{font-family:var(--font-display);font-size:var(--fs-h1);color:#fff;margin:0 0 var(--s-3)}
.abt-cta p{color:rgba(255,255,255,.85);margin:0 0 var(--s-5)}
.abt-cta__actions{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap}

/* Responsive */
@media (max-width:900px){
	.abt-story__grid,.abt-split__inner,.abt-records,.abt-stds,.abt-visit{grid-template-columns:1fr;gap:var(--s-6)}
	.abt-visit{gap:0}
	.abt-std{padding-bottom:var(--s-4)}
	.abt-split--reverse .abt-split__media{order:0}
	/* Five stats: three then two on tablet, no dividers (they showed as stray
	   curves against the rounded hover box once the row wrapped). */
	.abt-stats{grid-template-columns:repeat(6,1fr);gap:var(--s-4)}
	.abt-stat{grid-column:span 2}
	.abt-stat:nth-child(n+4){grid-column:span 3}
	.abt-stat + .abt-stat{border-left:0}
	.abt-team{grid-template-columns:1fr 1fr}
	.abt-cgrid{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
	.abt-cgrid__item.is-wide{grid-column:span 2}
	.abt-timeline::before{left:7px}
	.abt-tl{width:100%;left:0 !important;text-align:left !important;padding:0 0 var(--s-5) var(--s-6)}
	.abt-tl__dot{left:0 !important;right:auto !important}
}
@media (max-width:560px){
	.abt-partners{grid-template-columns:1fr 1fr 1fr}
	.abt-stats{grid-template-columns:1fr 1fr}
	.abt-stat,.abt-stat:nth-child(n+4){grid-column:span 1}
	.abt-stat:last-child:nth-child(odd){grid-column:1 / -1}
	.abt-cgrid{grid-template-columns:1fr}
	.abt-cgrid__item.is-wide{grid-column:span 1}
}

/* Navy band variant (virtual tour, ref C40) */
.abt-band--navy{background:var(--mirage)}
.abt-band--navy .abt-head h2{color:#fff}
.abt-band--navy .abt-head p:not(.abt-eye){color:var(--ink-on-dark)}
.abt-band--navy .abt-eye{color:var(--barley-light)}
.abt-band--navy .abt-eye::before{background:var(--barley-light)}