/* PEOPLE-GAP-01 v1 · people_gap.css · LOCAL MOCK ONLY (NextRising AI own code, 2026-11-04)
   Loads AFTER every existing stylesheet. Scoped to body.pbt-gap (+ .pbt-gap--about / --parents / --students / --contact).
   Rules: no copy changes; nothing is ever hidden until scroll (reveals move content, opacity stays 1);
   transform-only motion (no layout shift); every hover state also fires on :focus-within / :focus-visible / :active;
   prefers-reduced-motion and html.rm-user = still content. 8pt grid. Orange CTA #BF5508 / hover #A64508 untouched. */

/* ---------- 0. tokens ---------- */
.pbt-gap{--pbt-or:#BF5508;--pbt-or-h:#A64508;--pbt-cream:#F0ECE2;--pbt-petrol:#1D4756;--pbt-green:#23362B;--pbt-plum:#4A2C4E;--pbt-wine:#5A2A2E;--pbt-ink:#14204A;--pbt-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- 1. scroll reveals (transform only; content is fully visible before, during and after) ---------- */
@keyframes pbt-rise{from{translate:0 24px}to{translate:0 0}}
@keyframes pbt-bar{from{transform:scaleX(.375)}to{transform:scaleX(1)}}
@keyframes pbt-zoomin{from{scale:.96}to{scale:1}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html:not(.rm-user) .pbt-gap .band .sec-head,
    html:not(.rm-user) .pbt-gap .band .card,
    html:not(.rm-user) .pbt-gap .band .steps > li,
    html:not(.rm-user) .pbt-gap .band .intro > p,
    html:not(.rm-user) .pbt-gap .pbt-rv{animation:pbt-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    html:not(.rm-user) .pbt-gap .band .sec-head h2::after,
    html:not(.rm-user) .pbt-gap .pbt-values__head::after{transform-origin:0 50%;animation:pbt-bar linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
    html:not(.rm-user) .pbt-gap .band .photo.pa-frame img{animation:pbt-zoomin linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }
}

/* 1b. bands use overflow:hidden (a non-scrolling scroll container), which makes view() timelines inactive.
   overflow:clip paints identically but is not a scroll container. Section heights are checked equal to baseline. */
@supports (overflow:clip){.pbt-gap .band{overflow:clip}}

/* ---------- 2. hover / focus / tap parity on cards ---------- */
.pbt-gap .band .card{transition:transform .28s var(--pbt-ease),box-shadow .28s var(--pbt-ease),border-color .28s}
.pbt-gap .band .card:hover,.pbt-gap .band .card:focus-within,.pbt-gap .band .card:active{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(20,32,74,.32)}
.pbt-gap .band .photo.pa-frame{overflow:hidden}
.pbt-gap .band .photo.pa-frame img{transition:transform .6s var(--pbt-ease)}
.pbt-gap .band .card:hover .photo img,.pbt-gap .band .card:focus-within .photo img,.pbt-gap .band .card:active .photo img{transform:scale(1.04)}
.pbt-gap .band .card .ic{transition:transform .3s var(--pbt-ease)}
.pbt-gap .band .card:hover .ic,.pbt-gap .band .card:focus-within .ic,.pbt-gap .band .card:active .ic{transform:rotate(-6deg) scale(1.08)}
/* step rails: number/label lift */
.pbt-gap .band .steps > li{transition:transform .28s var(--pbt-ease)}
.pbt-gap .band .steps > li:hover,.pbt-gap .band .steps > li:focus-within,.pbt-gap .band .steps > li:active{transform:translateY(-4px)}

/* ---------- 3. CTA micro-motion (colours untouched) ---------- */
.pbt-gap .btn .arr{transition:transform .22s var(--pbt-ease)}
.pbt-gap .btn:hover .arr,.pbt-gap .btn:focus-visible .arr,.pbt-gap .btn:active .arr{transform:translateX(4px)}
.pbt-gap .btn-primary{transition:background-color .2s,transform .2s var(--pbt-ease),box-shadow .2s}
.pbt-gap .btn-primary:hover,.pbt-gap .btn-primary:focus-visible{transform:translateY(-2px)}

/* ---------- 4. About · gap fixes ---------- */
/* the empty first hero note rendered as a blank white pill. Not hidden: restyled into the brand accent rule (64x4, orange/yellow)
   so it reads as a deliberate lead-in to the two notes, and the blank pill gap is gone. */
.pbt-gap--about .pbt-more .hero-notes .note:empty{min-height:0;height:4px;width:64px;padding:0;border:0;border-radius:2px;box-shadow:none;
  background:linear-gradient(90deg,#F57E20 0 70%,#FEC623 70%);backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---------- 5. About · replacement section "how-we-work" (values from existing About copy) ---------- */
.pbt-values{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--pbt-petrol);color:#fff;padding-block:72px}
.pbt-values::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px}
.pbt-values::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:640px;height:640px;right:-200px;top:-240px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(221,238,241,.16),transparent)}
.pbt-values__wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.pbt-values__head{position:sticky;top:112px;display:flex;flex-direction:column;align-items:flex-start}
.pbt-values__head>h2{order:0}.pbt-values__head::after{order:1}.pbt-values__float{order:2}
.pbt-values__head h2{margin:0;color:#fff;font-size:clamp(32px,3.5vw,48px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;max-width:14ch}
.pbt-values__head::after{content:"";display:block;width:64px;height:4px;margin-top:24px;border-radius:2px;background:linear-gradient(90deg,#F57E20 0 70%,#FEC623 70%)}
.pbt-values__float{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;max-width:360px}
.pbt-values__float span{display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid rgba(221,238,241,.26);color:rgba(221,238,241,.62);font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap}
@media (prefers-reduced-motion: no-preference){
  html:not(.rm-user) .pbt-values__float span{animation:pbt-bob 7s ease-in-out infinite alternate}
  html:not(.rm-user) .pbt-values__float span:nth-child(2){animation-delay:-2.3s}
  html:not(.rm-user) .pbt-values__float span:nth-child(3){animation-delay:-4.6s}
}
@keyframes pbt-bob{from{transform:translateY(-4px)}to{transform:translateY(4px)}}
.pbt-values__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.pbt-values__tile{grid-column:span 2;min-height:160px;padding:24px;border-radius:24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:transform .3s var(--pbt-ease),background-color .3s,border-color .3s,box-shadow .3s}
.pbt-values__tile:nth-child(1),.pbt-values__tile:nth-child(2),.pbt-values__tile:nth-child(6),.pbt-values__tile:nth-child(7){grid-column:span 3}
.pbt-values__ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--pbt-cream);color:var(--pbt-petrol);transition:transform .35s var(--pbt-ease),background-color .3s}
.pbt-values__ic svg{width:24px;height:24px}
.pbt-values__word{display:inline;font-size:clamp(22px,2.1vw,30px);font-weight:700;line-height:1.15;letter-spacing:-.01em;color:#fff;
  background:linear-gradient(#F57E20,#F57E20) 0 100%/0 3px no-repeat;padding-bottom:4px;transition:background-size .4s var(--pbt-ease)}
.pbt-values__tile:hover,.pbt-values__tile:active,.pbt-values__tile.is-lit,.pbt-values__list:focus-visible .pbt-values__tile.is-lit{
  transform:translateY(-4px);background:rgba(255,255,255,.11);border-color:rgba(240,236,226,.7);box-shadow:0 24px 48px -24px rgba(0,0,0,.45)}
.pbt-values__tile:hover .pbt-values__ic,.pbt-values__tile:active .pbt-values__ic,.pbt-values__tile.is-lit .pbt-values__ic{transform:rotate(-8deg) scale(1.06);background:#fff}
.pbt-values__tile:hover .pbt-values__word,.pbt-values__tile:active .pbt-values__word,.pbt-values__tile.is-lit .pbt-values__word{background-size:100% 3px}
.pbt-values__drift{grid-column:1/-1;margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pbt-values__track{display:flex;gap:48px;width:max-content}
.pbt-values__track span{font-size:clamp(32px,4.4vw,64px);font-weight:800;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(221,238,241,.42)}
.pbt-values__track span:nth-child(even){color:rgba(221,238,241,.14);-webkit-text-stroke:0}
@media (prefers-reduced-motion: no-preference){html:not(.rm-user) .pbt-values__track{animation:pbt-drift 56s linear infinite}}
@keyframes pbt-drift{to{transform:translateX(-50%)}}
/* data-mobswipe dots below the row on phone sit on petrol: dark variant handles colours */
@media (max-width:768px){
  .pbt-values{padding-block:40px}
  .pbt-values__wrap{grid-template-columns:minmax(0,1fr);gap:24px}
  .pbt-values__head{position:static}
  .pbt-values__head h2{font-size:32px;max-width:none}
  .pbt-values__float{display:none}
  .pbt-values__list{--mobswipe-w:72%}
  .pbt-values__tile{min-height:144px}
  .pbt-values__drift{margin-top:8px}
  .pbt-values__track span{font-size:32px}
}

/* ---------- 9. reduced motion = still content ---------- */
@media (prefers-reduced-motion: reduce){
  .pbt-gap .band .card,.pbt-gap .band .photo img,.pbt-gap .band .ic,.pbt-gap .btn .arr,.pbt-gap .btn-primary,.pbt-gap .band .steps>li,
  .pbt-values__tile,.pbt-values__ic,.pbt-values__word{transition:none!important}
  .pbt-gap .band .card:hover,.pbt-gap .band .card:focus-within,.pbt-gap .band .card:active,
  .pbt-gap .band .steps>li:hover,.pbt-gap .band .steps>li:focus-within,.pbt-gap .btn-primary:hover,.pbt-gap .btn-primary:focus-visible,
  .pbt-values__tile:hover,.pbt-values__tile.is-lit,.pbt-values__tile:active{transform:none!important}
  .pbt-gap .band .card:hover .photo img,.pbt-gap .band .card:focus-within .photo img,.pbt-gap .band .card .ic,.pbt-values__ic{transform:none!important}
}
html.rm-user .pbt-gap *{transition:none!important}

/* ---------- 10. minors (QA-01 m2): Skip link tap height >= 44px on all 4 pages ---------- */
.pbt-gap .skip{box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center}

/* ---------- 11. drift ribbons (Parents / Students / Contact): aria-hidden duplicates of on-page lines, in their own strip,
   so they never sit over copy or buttons. Static under reduced motion. ---------- */
.pbt-drift{position:relative;overflow:hidden;overflow:clip;padding:24px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pbt-drift--green{background:var(--pbt-green)}.pbt-drift--plum{background:var(--pbt-plum)}.pbt-drift--wine{background:var(--pbt-wine)}
.pbt-drift__track{display:flex;gap:48px;width:max-content}
.pbt-drift__track span{font-size:clamp(32px,4.4vw,64px);font-weight:800;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.42)}
.pbt-drift__track span:nth-child(even){color:rgba(255,255,255,.16);-webkit-text-stroke:0}
@media (prefers-reduced-motion: no-preference){html:not(.rm-user) .pbt-drift__track{animation:pbt-drift 56s linear infinite}}
@media (max-width:768px){.pbt-drift{padding:16px 0}.pbt-drift__track span{font-size:32px}}

/* ---------- 12. Contact · M3: nudge the cutout down 41px at desktop (1024+), T >= 66% visible at 1280 and 1440. Layout untouched. ---------- */
@media (min-width:1024px){.pbt-gap--contact .pbt--contact{--cy:-80px}}
/* Contact form: hover / focus polish (colours from the page palette, no copy) */
.pbt-gap--contact .pc-field input,.pbt-gap--contact .pc-field select,.pbt-gap--contact .pc-field textarea{transition:border-color .2s,box-shadow .2s}
.pbt-gap--contact .pc-field input:hover,.pbt-gap--contact .pc-field select:hover,.pbt-gap--contact .pc-field textarea:hover{border-color:var(--pbt-wine)}
.pbt-gap--contact .pc-field input:focus-visible,.pbt-gap--contact .pc-field select:focus-visible,.pbt-gap--contact .pc-field textarea:focus-visible{border-color:var(--pbt-wine);box-shadow:0 0 0 3px rgba(90,42,46,.18)}
.pbt-gap--contact .pc-card{transition:box-shadow .3s var(--pbt-ease)}
.pbt-gap--contact .pc-card:focus-within{box-shadow:0 24px 48px -24px rgba(90,42,46,.35)}

/* ---------- 13. Students · m1: last FAQ frame -> next frame = 144px at desktop (72 + 72). The CTA band goes two-column like the FAQ band,
   so its card starts at the section's content top. Copy, buttons and order unchanged. ---------- */
@media (min-width:1024px){
  .pbt-gap--students #your-next-idea-starts-here .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
  .pbt-gap--students #your-next-idea-starts-here .sec-head{margin:0;text-align:left}
  .pbt-gap--students #your-next-idea-starts-here .sec-head h2{margin-left:0;margin-right:0;text-align:left;text-wrap:balance}
  .pbt-gap--students #your-next-idea-starts-here .sec-head h2::after{margin-left:0;margin-right:auto}
  .pbt-gap--students #your-next-idea-starts-here .intro.ps-cta{max-width:none;margin:0;text-align:left}
  .pbt-gap--students #your-next-idea-starts-here .ps-cta .btn-row{justify-content:flex-start}
}
@media (prefers-reduced-motion: reduce){.pbt-gap--contact .pc-field *,.pbt-gap--contact .pc-card{transition:none!important}}