/* ============================================================================
   pta-home.css — homepage composition.
   Editorial layout, large negative space, hairline rules. Colour comes only
   from the tokens in pta.css; no hex codes live here (§35).
   ========================================================================== */

/* ── Skip link ───────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--pta-charcoal);
  padding:12px 18px;border-radius:0 0 var(--r) 0;font-weight:600}
.skip:focus{left:0}

/* ── Candle stage: fixed behind everything ───────────────────────── */
/* The stage is decorative — if it never initialises the page is unchanged. */
main, .nav, .foot{position:relative;z-index:1}
.sec-alt, .final{background:color-mix(in srgb, var(--surface) 88%, transparent)}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .sec-alt,.final{background:var(--surface)}
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:center;
  padding:clamp(90px,13vh,150px) 0 clamp(70px,10vh,120px);border-bottom:1px solid var(--line)}
.hero-in{width:100%}
.hero-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:clamp(24px,4vh,44px)}
.hero-h1{font-size:clamp(46px,10.5vw,132px);font-weight:800;letter-spacing:-.045em;line-height:.92;
  margin:0 0 clamp(22px,3.5vh,38px)}
.hero-h1 .l{display:block;overflow:hidden}
.hero-h1 .l > span{display:block}
.hero-sub{font-size:clamp(17px,2.1vw,25px);line-height:1.4;font-weight:500;color:var(--fg);
  max-width:22ch;letter-spacing:-.015em}
.hero-body{margin-top:20px;font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.7;color:var(--fg-2);max-width:52ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(30px,4.5vh,44px)}
.hero-note{margin-top:22px;font-size:12px;letter-spacing:.05em;color:var(--fg-3)}
.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:1px;height:46px;
  background:linear-gradient(var(--line-3),transparent)}
.hero-scroll span{position:absolute;top:0;left:0;width:1px;height:14px;background:var(--accent);
  animation:scrollTick 2.6s ease-in-out infinite}
@keyframes scrollTick{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:32px;opacity:0}}

/* ── Section furniture ───────────────────────────────────────────── */
.sec-head{max-width:64ch;margin-bottom:clamp(34px,5vw,58px)}

/* Pull-quote statement */
.stmt{padding:clamp(20px,4vw,44px) 0 clamp(34px,5vw,60px);border-bottom:1px solid var(--line);margin-bottom:clamp(34px,5vw,58px)}
.stmt-line{font-family:var(--display);font-size:clamp(26px,4.6vw,54px);font-weight:700;line-height:1.12;
  letter-spacing:-.03em;color:var(--fg);max-width:20ch}

/* Two-column editorial */
.two{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.two-body p{color:var(--fg-2);font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.75}
.two-body p + p{margin-top:16px}

/* ── Discipline list ─────────────────────────────────────────────── */
.disc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.disc li{display:grid;grid-template-columns:78px 1fr;gap:clamp(14px,3vw,34px);align-items:start;
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line)}
.disc-n{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--fg-3);padding-top:5px}
.disc h3{font-size:clamp(17px,1.9vw,21px);margin-bottom:7px}
.disc p{color:var(--fg-2);font-size:14.5px;line-height:1.7;max-width:66ch}

/* ── Method grid ─────────────────────────────────────────────────── */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mstep{background:var(--ink);padding:clamp(20px,2.4vw,28px);min-height:168px;
  display:flex;flex-direction:column;transition:background .25s}
.mstep:hover{background:var(--surface)}
.mstep-n{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:16px}
.mstep h3{font-size:16.5px;margin-bottom:8px}
.mstep p{font-size:13.5px;color:var(--fg-2);line-height:1.65}

/* ── Fit columns ─────────────────────────────────────────────────── */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fit-col{background:var(--ink);padding:clamp(24px,3vw,36px)}
.fit-col h3{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px;color:var(--fg-3)}
.fit-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.fit-col li{font-size:15px;line-height:1.5;padding-left:26px;position:relative;color:var(--fg-2)}
.fit-col li::before{position:absolute;left:0;top:-1px;font-size:15px;line-height:1.5}
.fit-no li::before{content:"\2013";color:var(--fg-3)}
.fit-yes li{color:var(--fg)}
.fit-yes li::before{content:"+";color:var(--accent)}
.fit-yes{background:color-mix(in srgb, var(--accent) 4%, var(--ink))}
@supports not (background: color-mix(in srgb, red 50%, blue)){.fit-yes{background:var(--surface)}}

/* ── Curriculum / FAQ accordion ──────────────────────────────────── */
.curric{border-top:1px solid var(--line)}
.cur-item{border-bottom:1px solid var(--line)}
.cur-q{width:100%;background:none;border:0;color:var(--fg);font-family:var(--font);cursor:pointer;
  display:grid;grid-template-columns:62px 1fr 24px;align-items:center;gap:12px;
  padding:clamp(17px,2.1vw,23px) 4px;text-align:left;transition:color .2s}
.curric .cur-q:hover{color:var(--accent)}
.cur-n{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--fg-3)}
.cur-t{font-size:clamp(15.5px,1.8vw,19px);font-weight:600;letter-spacing:-.01em}
.cur-i{position:relative;width:14px;height:14px;justify-self:end}
.cur-i::before,.cur-i::after{content:"";position:absolute;background:var(--accent);transition:transform .3s ease,opacity .3s ease}
.cur-i::before{left:0;top:6px;width:14px;height:1.5px}
.cur-i::after{left:6px;top:0;width:1.5px;height:14px}
.cur-item.open .cur-i::after{transform:scaleY(0);opacity:0}
.cur-a{overflow:hidden;max-height:0;transition:max-height .34s ease}
.cur-a p{padding:0 4px clamp(18px,2.2vw,24px) 74px;font-size:14.5px;line-height:1.75;color:var(--fg-2);max-width:76ch}

/* FAQ variant has no number column */
#faq .cur-q{grid-template-columns:1fr 24px}
#faq .cur-a p{padding-left:4px}

/* ── Admission path ──────────────────────────────────────────────── */
.path{list-style:none;margin:0 0 clamp(34px,5vw,52px);padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.path li{background:var(--ink);padding:clamp(20px,2.2vw,26px)}
.path span{display:block;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--accent);margin-bottom:14px}
.path h3{font-size:16px;margin-bottom:6px}
.path p{font-size:13px;color:var(--fg-2);line-height:1.6}

/* ── Plan strip ──────────────────────────────────────────────────── */
.plan-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.plan-cell{background:var(--ink);padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;gap:5px}
.plan-cell.is-best{background:color-mix(in srgb, var(--accent) 5%, var(--ink))}
@supports not (background: color-mix(in srgb, red 50%, blue)){.plan-cell.is-best{background:var(--surface)}}
.pc-n{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-n em{font-style:normal;font-size:9.5px;letter-spacing:.08em;color:var(--pta-charcoal);
  background:var(--accent);padding:2px 6px;border-radius:4px}
.pc-p{font-family:var(--display);font-size:clamp(22px,2.6vw,29px);font-weight:800;letter-spacing:-.02em}
.pc-m{font-size:12.5px;color:var(--fg-2)}
.pc-s{font-size:12px;color:var(--accent);margin-top:2px}
.plan-note{margin-top:18px;font-size:13px;color:var(--fg-3)}
.plan-note a{color:var(--accent);border-bottom:1px solid transparent;transition:border-color .2s}
.plan-note a:hover{border-color:var(--accent)}

/* ── Final ───────────────────────────────────────────────────────── */
.final{border-top:1px solid var(--line);padding:clamp(80px,13vw,160px) 0}
.final-in{text-align:center;max-width:70ch;margin:0 auto}
.final h2{font-size:clamp(34px,6.2vw,78px);font-weight:800;letter-spacing:-.04em;line-height:.98;margin-bottom:18px}
.final p{font-size:clamp(16px,1.8vw,20px);color:var(--fg-2);line-height:1.55}
.final-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(30px,4.5vw,44px)}
.final-note{margin-top:clamp(34px,5vw,52px);font-size:12.5px;line-height:1.7;color:var(--fg-3);max-width:60ch;
  margin-left:auto;margin-right:auto}

/* ── Magnetic buttons (desktop, fine pointer only) ───────────────── */
.magnetic{will-change:transform}

/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width:1080px){
  .method{grid-template-columns:repeat(2,1fr)}
  .path{grid-template-columns:repeat(3,1fr)}
  .plan-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .two{grid-template-columns:1fr;gap:22px}
  .fit{grid-template-columns:1fr}
}
@media(max-width:620px){
  .hero{min-height:auto}
  .hero-h1{font-size:clamp(42px,13vw,64px)}
  .hero-cta .btn{width:100%}
  .method{grid-template-columns:1fr}
  .path{grid-template-columns:1fr}
  .plan-strip{grid-template-columns:1fr}
  .disc li{grid-template-columns:1fr;gap:6px}
  .disc-n{padding-top:0}
  .cur-q{grid-template-columns:44px 1fr 20px;gap:10px}
  .cur-a p{padding-left:54px}
  #faq .cur-a p{padding-left:4px}
  .hero-scroll{display:none}
}

/* ── Reduced motion (§9) ─────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .hero-scroll span{animation:none}
}

/* ============================================================================
   READABILITY OVERRIDES
   The hero runs footage; everything below runs on solid ground. These rules
   exist so the copy is legible no matter what is playing behind it.
   ========================================================================== */

/* Hero: a directional scrim so the left column is effectively solid ground. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* Holds solid across the copy measure, then falls away fast once the
       text ends (~64%) so the footage still reads on the right. Measured:
       headline 10.2:1, sub 12.2:1, body 7.4:1 against the brightest frame. */
    linear-gradient(100deg, var(--ink) 0%, var(--ink) 32%,
                    rgba(29,29,31,.92) 55%, rgba(29,29,31,.80) 64%,
                    rgba(29,29,31,.34) 74%, rgba(29,29,31,.10) 86%,
                    rgba(29,29,31,.02) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 16%, transparent 78%, var(--ink) 100%);
}
.hero > .wrap{position:relative;z-index:2}
.hero > .hero-scroll{z-index:2}   /* keep its absolute positioning */

/* Copy sits on its own measure and never runs under the field.
   .wrap keeps its centred 1180px column — overriding it here pushed the hero
   flush to the viewport edge while every other section stayed indented. */
.hero-eyebrow,.hero-h1,.hero-sub,.hero-body,.hero-cta,.hero-note{max-width:min(640px,58vw)}
.hero-h1{max-width:min(720px,62vw)}

/* Sections carry their own ground so mid-page copy is never over raw canvas. */
.sec{position:relative;z-index:1}
.sec::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(29,29,31,.62), rgba(29,29,31,.84));
}
.sec-alt::before{background:linear-gradient(180deg, rgba(37,37,39,.90), rgba(37,37,39,.95))}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(29,29,31,.90)}
.final{position:relative;z-index:1}

/* ── Pricing ─────────────────────────────────────────────────────── */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(30px,4vw,44px)}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;
  transition:border-color .22s,transform .22s,background .22s}
.pcard:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--surface-2)}
.pcard.is-best{border-color:rgba(237,226,204,.42);background:var(--surface-2)}
.pcard.is-best::after{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;
  background:var(--accent);border-radius:0 0 2px 2px}
.pbadge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--accent);
  color:var(--on-accent);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 11px;border-radius:5px;white-space:nowrap}
.pname{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.pprice{font-family:var(--display);font-size:clamp(28px,3.1vw,36px);font-weight:800;
  letter-spacing:-.03em;margin:13px 0 2px;line-height:1}
.pper{font-size:13px;color:var(--fg-2)}
.pmonth{margin-top:14px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;
  font-size:12.5px;color:var(--fg-2);background:var(--ink)}
.pmonth b{color:var(--fg);font-family:var(--display);font-weight:700}
.psave{margin-top:10px;font-size:12.5px;color:var(--up);display:flex;align-items:center;gap:7px}
.psave.flat{color:var(--fg-3)}
.pcard .btn{margin-top:20px}
.pricing-note{margin-top:20px;font-size:13px;color:var(--fg-3);display:flex;gap:9px;align-items:flex-start}
.pricing-note i{color:var(--accent);margin-top:3px}

@media(max-width:1080px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .hero-eyebrow,.hero-h1,.hero-sub,.hero-body,.hero-cta,.hero-note{max-width:none}
  .hero::before{background:linear-gradient(180deg,var(--ink) 0%,rgba(29,29,31,.90) 55%,rgba(29,29,31,.80) 100%)}
}
@media(max-width:600px){.pricing-grid{grid-template-columns:1fr}}

  opacity:0;transition:opacity .5s ease}
  font-family:var(--font);color:var(--fg-2);transition:background .2s,color .2s;position:relative}
  color:var(--fg-3);margin-bottom:6px}
  display:flex;gap:10px;align-items:flex-start}
@media(max-width:820px){
}

/* ============================================================================
   CINEMATIC LAYER
   The hero runs a video; the rest of the page runs a sequence of stills shot
   in the same room from different angles. Both sit behind a scrim so the copy
   is never the thing that gives way.
   ========================================================================== */

/* ── Hero video ──────────────────────────────────────────────────────
   Sits inside .hero under the existing .hero::before scrim, so the copy
   keeps exactly the ground it already had. */
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink)}
.hero-media img,
.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:70% 50%;   /* bias to the lit side */
  display:block;
}
/* The poster shows instantly and is covered once the video can actually play,
   so there is never a black rectangle where the hero should be. */
.hero-media video{opacity:0;transition:opacity .9s ease}
.hero-media.is-playing video{opacity:1}

/* ── Reel bands: the imagery gets its own moments ──────────────────
   Full-bleed stills between sections rather than wallpaper behind copy.
   Measured reason: body copy is --fg-2 (#ADABAE, luminance .40). To clear
   4.5:1 it needs a background darker than any veil that still leaves a
   photograph legible — the two goals are mutually exclusive in the same
   square inch. So the picture gets its own band, at full strength, and the
   copy keeps solid ground. Nothing is dimmed to protect anything else. */
.reel{position:relative;overflow:hidden;background:var(--ink);
  height:clamp(300px,48vh,540px);z-index:1}
.reel-img{position:absolute;left:0;right:0;top:-12%;height:124%;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  will-change:transform}
/* Only enough vignette to seat the band in the page — the image stays legible. */
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(29,29,31,.10) 18%,
                    rgba(29,29,31,.10) 82%, var(--ink) 100%),
    linear-gradient(90deg, rgba(29,29,31,.62) 0%, rgba(29,29,31,.10) 34%,
                    rgba(29,29,31,0) 60%);}
/* Caption sits bottom-left, in the band's darkest corner, on its own plate. */
.reel-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-bottom:clamp(20px,3vw,32px);pointer-events:none}
/* The caption's own ground. Contained to the bottom-left corner it occupies,
   so the picture keeps its brightness everywhere the text is not. Measured
   against all six stills — without this the caption sits at 1.6:1 on the
   brighter frames. */
.reel-cap::before{content:"";position:absolute;left:0;right:0;bottom:0;height:86%;z-index:-1;
  background:
    linear-gradient(180deg, rgba(29,29,31,0) 0%, rgba(29,29,31,.56) 30%, rgba(29,29,31,.80) 100%),
    linear-gradient(90deg, rgba(29,29,31,.92) 0%, rgba(29,29,31,.80) 34%,
                    rgba(29,29,31,.38) 56%, rgba(29,29,31,0) 76%);}
.reel-cap .eyebrow{display:block;margin-bottom:6px}
.reel-cap p{max-width:34ch;font-size:clamp(15px,1.7vw,19px);line-height:1.45;
  color:#F1EEE7;font-weight:500;text-shadow:0 1px 18px rgba(29,29,31,.95),0 1px 3px rgba(29,29,31,.9)}
.reel-cap .eyebrow{text-shadow:0 1px 14px rgba(29,29,31,.95)}

@media(max-width:900px){
  .reel{height:clamp(240px,38vh,360px)}
  .reel::after{background:
    linear-gradient(180deg, var(--ink) 0%, rgba(29,29,31,.16) 20%,
                    rgba(29,29,31,.16) 80%, var(--ink) 100%),
    linear-gradient(90deg, rgba(29,29,31,.74) 0%, rgba(29,29,31,.22) 46%, rgba(29,29,31,.06) 100%)}
}

@media(max-width:900px){
  /* Phones get the poster, not the video: one less megabyte on mobile data,
     and autoplaying video is unreliable there anyway. */
  .hero-media video{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero-media video{display:none}      /* poster only */
  .reel-img{transform:none!important}
}