/* ============================================================
   About — the record
   Loaded only by /about/, scoped under body.pg-about.

   Every other page sells a service. This one makes a single claim:
   one licensed person is accountable, and here is the proof. So it is
   built as a document rather than a brochure — a credential card that
   stays with you down the left while the record scrolls past on the
   right. It is the only page in the set with no body photography and
   no full-bleed band, which is what keeps it from reading like the
   service pages with different words in it.
   ============================================================ */

.pg-about main{max-width:var(--shell)}
.pg-about main > section,
.pg-about main > div{margin-block:clamp(3.25rem,7vw,5.5rem)}
.pg-about main > section:first-child{margin-top:0}
.pg-about .crumbs{max-width:none;margin:0 0 clamp(1.4rem,3vw,2.2rem)}
.pg-about h2{padding-left:0}
.pg-about h2::before{display:none}

/* ---------- reveal (shared contract with js/reveal.js) ---------- */
html.rv-on .rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--rvd,0ms)}
html.rv-on .rv.is-in{opacity:1;transform:none}

/* ---------- hero ----------
   Every other page opens on a photograph of the service being sold. About has
   no owner portrait, and a stock person here would read as "this is him",
   which would be a lie. So the image is graded down to texture: real work,
   wiped out under the copy, present only as evidence that there is a trade
   behind the claim. */
.pg-about .abt-hero{
  position:relative;isolation:isolate;overflow:hidden;text-align:left;
  padding:clamp(3rem,7vw,5.25rem) var(--gutter) 0}
.pg-about .abt-hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 46%;
  z-index:-2;filter:brightness(.52) saturate(.68) contrast(1.05)}
/* a horizontal wipe, near-opaque under the type and thinning to the right */
.pg-about .abt-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(12,31,48,.97) 6%,rgba(12,31,48,.88) 38%,rgba(12,31,48,.42) 100%),
    linear-gradient(180deg,rgba(16,40,61,.72),transparent 30%,transparent 72%,rgba(16,40,61,.88)),
    radial-gradient(60% 70% at 12% 40%,rgba(231,162,0,.12),transparent 70%)}
.pg-about .abt-hero .hero-inner{
  max-width:var(--shell);margin:0 auto clamp(3.25rem,7vw,5rem);
  align-items:flex-start;text-align:left}
.pg-about .abt-hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);max-width:15ch}
.pg-about .abt-hero .hero-sub{margin:var(--s-3) 0 var(--s-5);max-width:57ch;color:#DCE8F4}
.pg-about .abt-hero .hero-ctas{justify-content:flex-start}
/* the licence line stays the plain gold eyebrow used on every other page —
   boxing it here made About the odd one out */
.pg-about .abt-hero .eyebrow{margin-bottom:var(--s-4)}

@media(max-width:760px){
  .pg-about .abt-hero{text-align:center}
  .pg-about .abt-hero .hero-inner{align-items:center;text-align:center}
  .pg-about .abt-hero .hero-sub{margin-inline:auto}
  .pg-about .abt-hero .hero-ctas{justify-content:center}
  .pg-about .abt-hero-bg{object-position:60% 46%}
}

/* ---------- opening statement ---------- */
.pg-about .abt-lead{
  margin:0;max-width:46ch;
  font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.42;letter-spacing:-.012em;
  color:var(--text);text-wrap:pretty}

/* ---------- the record: credential rail + sections ---------- */
.pg-about .abt-body{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}

/* the card travels with the reader, because it is the evidence for
   everything the sections claim */
.pg-about .abt-rail{position:sticky;top:8.5rem}
.pg-about .abt-card{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid rgba(231,162,0,.34);
  background:
    repeating-linear-gradient(115deg,rgba(159,212,240,.045) 0 1px,transparent 1px 9px),
    linear-gradient(165deg,rgba(27,60,92,.85),rgba(16,40,61,.9));
  box-shadow:0 26px 60px rgba(0,0,0,.4)}
.pg-about .abt-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),rgba(231,162,0,.15))}
.pg-about .abt-creds{list-style:none;margin:0;padding:0}
.pg-about .abt-creds li{
  display:flex;flex-direction:column;gap:.4rem;
  padding:clamp(1rem,2.2vw,1.35rem) clamp(1.15rem,2.6vw,1.7rem);
  border-bottom:1px solid var(--hair)}
.pg-about .abt-creds li:last-child{border-bottom:0}
.pg-about .abt-creds b{
  font-family:Montserrat,sans-serif;font-size:.64rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pg-about .abt-creds span{color:var(--text);font-size:1rem;line-height:1.5}
/* the licence number is the one value worth setting like a serial */
.pg-about .abt-creds li:first-child span{
  font-family:Montserrat,sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:.04em}

.pg-about .abt-sections{display:flex;flex-direction:column;gap:clamp(2rem,4.5vw,3.25rem)}
.pg-about .abt-sec{position:relative;padding-top:clamp(1.1rem,2.4vw,1.6rem);border-top:1px solid var(--hair)}
.pg-about .abt-sec::before{
  content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg)}
.pg-about .abt-sec h2{font-size:clamp(1.4rem,2.3vw,1.95rem);margin-bottom:var(--s-3)}
.pg-about .abt-sec p{font-size:1.07rem;line-height:1.8;color:var(--muted);margin:0}
.pg-about .abt-note{
  margin:0;padding:clamp(1.2rem,2.6vw,1.75rem);border-radius:var(--radius);
  border:1px solid rgba(231,162,0,.3);border-left:3px solid var(--gold);
  background:linear-gradient(100deg,rgba(231,162,0,.11),rgba(27,60,92,.5) 62%)}
.pg-about .abt-note p{color:var(--text);font-size:1.05rem;line-height:1.7}

/* FAQ now lives in css/styles.css, one canonical accordion */

/* ---------- services + quote ---------- */
.pg-about .abt-also{max-width:none}

/* contact panel + quote form now live in css/styles.css, one canonical block */

@media(max-width:900px){
  /* the card stops travelling and simply leads the record */
  .pg-about .abt-body{grid-template-columns:1fr}
  .pg-about .abt-rail{position:static}
  .pg-about .abt-card{max-width:32rem}
}