/* Cosmix School of Makeup Artistry — site styles
   Extracted from the approved homepage build. Single stylesheet for the
   whole site; page-specific rules go at the bottom under their own heading.
   Brand hex values are still APPROXIMATE — confirm against Divi. */
:root{
    /* Cosmix brand — approximate, confirm exact hex in Divi */
    --purple:#8B4A93;      /* top bar */
    --plum:#4B0F6B;        /* headings */
    --pink:#E8629B;        /* primary CTA */
    --pink-dk:#C2185B;     /* logo swirl / hover */
    --black:#000000;
    --ink:#1A1A1A;
    --body:#4F4F4F;
    --muted:#8A8A8A;
    --line:#E4E4E4;
    --paper:#FFFFFF;
    --soft:#F9F5F8;
    --max:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--body);
    font-family:'Montserrat',system-ui,sans-serif;
    font-weight:400;
    line-height:1.75;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
  img{max-width:100%;display:block}

  /* ── floating contact rail ───────────────── */
  .rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:2px}
  .rail a{
    display:flex;align-items:center;gap:10px;
    writing-mode:vertical-rl;
    color:#fff;text-decoration:none;
    font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    padding:20px 12px;transition:.22s;
  }
  .rail .call{background:var(--purple)}
  .rail .mail{background:var(--pink)}
  .rail a:hover{background:var(--pink-dk);padding-right:18px}
  .rail svg{width:15px;height:15px;transform:rotate(90deg);flex-shrink:0}

  /* mobile: rail becomes a bottom bar */
  .railm{display:none}
  @media(max-width:820px){
    .rail{display:none}
    .railm{
      display:grid;grid-template-columns:1fr 1fr;
      position:fixed;left:0;right:0;bottom:0;z-index:60;
    }
    .railm a{
      display:flex;align-items:center;justify-content:center;gap:9px;
      padding:15px 10px;color:#fff;text-decoration:none;
      font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    }
    .railm .call{background:var(--purple)}
    .railm .mail{background:var(--pink)}
    .railm svg{width:15px;height:15px}
    footer{padding-bottom:86px}
  }

  /* ── nav ─────────────────────────────────── */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  nav.wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:12px}
  .logo{flex-shrink:0;line-height:0}
  .logo img{height:62px;width:auto}

  .links{display:flex;align-items:center;gap:14px;list-style:none;font-size:.65rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
  .links > li{position:relative}
  .links > li > a{display:flex;align-items:center;gap:5px;color:var(--body);text-decoration:none;padding:22px 0;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap}
  .links > li:hover > a{color:var(--pink-dk)}
  .links .caret{width:8px;height:8px;flex-shrink:0;transition:transform .2s}
  .links > li:hover .caret{transform:rotate(180deg)}

  .sub{
    position:absolute;top:100%;left:-18px;min-width:238px;
    background:#fff;border:1px solid var(--line);border-top:2px solid var(--pink);
    list-style:none;padding:8px 0;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:.18s;box-shadow:0 14px 34px rgba(0,0,0,.09);
  }
  .links > li:hover .sub,.links > li:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
  .sub a{display:block;padding:9px 18px;color:var(--body);text-decoration:none;font-size:.68rem;letter-spacing:.05em;font-weight:500;transition:.15s}
  .sub a:hover{background:var(--soft);color:var(--pink-dk)}

  .burger{display:none;background:none;border:0;cursor:pointer;padding:10px;color:var(--plum)}
  .burger svg{width:26px;height:26px}

    @media(max-width:1160px){
    .burger{display:block}
    .links{
      position:absolute;top:100%;left:0;right:0;
      flex-direction:column;align-items:stretch;gap:0;
      background:#fff;border-top:1px solid var(--line);
      max-height:0;overflow:hidden;transition:max-height .3s ease;
    }
    .links.open{max-height:86vh;overflow-y:auto}
    .links > li{border-bottom:1px solid var(--line)}
    .links > li > a{padding:15px 26px;justify-content:space-between}
    .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-top:1px solid var(--line);background:var(--soft);padding:4px 0;display:none}
    .links > li.open .sub{display:block}
    .sub a{padding:11px 40px}
  }

  /* ── hero ────────────────────────────────── */
  .hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden;background:var(--black)}
  /* 30% was tuned for the old landscape hero photograph. The client's shots
     are portraits, so the focal point sits much higher -- at 30% the subject
     loses the top of their head on a tall window. */
  .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 16%;opacity:.9}
  .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.12) 100%)}
  .hero .wrap{position:relative;z-index:2;padding-block:110px}
  .hero h1{color:#fff;font-weight:700;font-size:clamp(2rem,5.2vw,3.7rem);line-height:1.12;letter-spacing:-.01em;max-width:17ch;text-transform:uppercase}
  .hero p{color:rgba(255,255,255,.9);max-width:44ch;margin-top:22px;font-size:1.02rem;font-weight:300}
  .btn{display:inline-block;margin-top:30px;font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--pink);border:1px solid var(--pink);padding:15px 30px;transition:.2s}
  .btn:hover{background:var(--pink-dk);border-color:var(--pink-dk)}
  .btn.dark{color:#fff;background:var(--plum);border-color:var(--plum)}
  .btn.dark:hover{background:var(--pink);border-color:var(--pink)}
  /* Secondary button for use ON the plum band. .btn.dark is plum on plum
     there, so it reads as bare text and gets missed. Outlined gives it the
     same weight and hit area as the primary without competing with it. */
  .btn.ghost{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.65)}
  .btn.ghost:hover{background:#fff;border-color:#fff;color:var(--plum)}

  /* ── sections ────────────────────────────── */
  section{padding-block:86px}
  .center{text-align:center;max-width:760px;margin:0 auto}
  h2{color:var(--plum);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.2;text-transform:uppercase;letter-spacing:.01em}
  h2 + .rule{width:56px;height:3px;background:var(--pink);margin:22px auto 26px}
  .left h2 + .rule{margin-left:0}
  p + p{margin-top:16px}
  .lead{font-size:1.05rem;font-weight:300}

  /* ── programs ────────────────────────────── */
  .programs{display:grid;grid-template-columns:repeat(2,1fr);gap:56px;margin-top:56px}
  @media(max-width:820px){.programs{grid-template-columns:1fr;gap:44px}}
  .prog figure{overflow:hidden;background:var(--soft)}
  .prog figure img{width:100%;height:auto;display:block;transition:transform .5s ease}
  .prog:hover figure img{transform:scale(1.04)}
  .prog h3{color:var(--plum);font-weight:700;font-size:1.35rem;text-transform:uppercase;margin:22px 0 10px;line-height:1.25}
  .prog .disc{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--pink-dk);text-transform:uppercase;line-height:1.6}
  .prog .dur{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-top:4px}
  .prog p.txt{margin-top:16px;font-weight:300}
  .prog .more{display:inline-block;margin-top:18px;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--line);padding-bottom:5px;transition:.2s}
  .prog .more:hover{border-color:var(--pink)}

  /* ── quote / stat ────────────────────────── */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
  @media(max-width:880px){.split{grid-template-columns:1fr}}
  /* The client's photograph here is 447x603. Cover-filling a wide half-page
   panel with it means a ~4x upscale and a punishing crop. Contain shows the
   whole figure at its own scale; the shot already has a black background, so
   it sits on the panel seamlessly rather than looking letterboxed. */
  .split .pic{min-height:420px;background-size:contain;background-repeat:no-repeat;
              background-position:center;background-color:#000}
  .split .txtcol{background:var(--soft);display:flex;align-items:center;padding:64px 56px}
  @media(max-width:560px){.split .txtcol{padding:44px 26px}}
  .stat{font-size:clamp(2.1rem,5vw,3.1rem);font-weight:700;color:var(--plum);line-height:1.05}
  .statcap{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px}
  .src{font-size:.74rem;color:var(--muted);margin-top:20px}
  .src a{color:var(--body)}

  /* ── next class ──────────────────────────── */
  .next{background:var(--plum);color:#fff;text-align:center}
  .next .kick{font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)}
  .next .date{font-weight:700;font-size:clamp(1.9rem,4.6vw,3.1rem);text-transform:uppercase;margin:14px 0 8px}
  .next .loc{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
  .clock{display:flex;justify-content:center;margin-top:40px;flex-wrap:wrap}
  .unit{padding:0 28px;border-right:1px solid rgba(255,255,255,.2)}
  .unit:last-child{border-right:0}
  .unit .n{font-weight:700;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1;font-variant-numeric:tabular-nums}
  .unit .l{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:10px}
  @media(max-width:560px){.unit{padding:0 15px}}

  /* ── footer ──────────────────────────────── */
  footer{background:var(--soft);padding-block:56px 34px;font-size:.86rem;font-weight:300}
  .fgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:44px}
  @media(max-width:768px){.fgrid{grid-template-columns:1fr;gap:28px}}
  footer img{height:38px;width:auto;margin-bottom:18px}
  .accred{max-width:58ch;line-height:1.75}
  .social{display:flex;gap:20px;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;list-style:none;flex-wrap:wrap}
  .social a,footer a{color:var(--body);text-decoration:none}
  .social a:hover,footer a:hover{color:var(--pink-dk)}
  .fbot{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:.76rem;flex-wrap:wrap;color:var(--muted)}

  a:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ── active nav state ─────────────────────────
   Driven by <body data-page="..."> + <li data-nav="..."> in the header
   partial, so no per-page nav markup is duplicated. */
body[data-page] .links > li[data-nav] > a{border-bottom-color:transparent}
body[data-page="about"]       .links > li[data-nav="about"] > a,
body[data-page="programs"]    .links > li[data-nav="programs"] > a,
body[data-page="admissions"]  .links > li[data-nav="admissions"] > a,
body[data-page="hire"]        .links > li[data-nav="hire"] > a,
body[data-page="teen-camp"]   .links > li[data-nav="teen-camp"] > a,
body[data-page="applications"].links > li[data-nav="applications"] > a,
body[data-page="blog"]        .links > li[data-nav="blog"] > a,
body[data-page="schedule"]    .links > li[data-nav="schedule"] > a{
  color:var(--pink-dk);border-bottom-color:var(--pink);
}
@media(max-width:1160px){
  body[data-page] .links > li[data-nav] > a{border-bottom-color:transparent}
}

/* ── skip link ───────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--plum);color:#fff;
      padding:12px 20px;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:0}

/* ── interior page header ────────────────────── */
.phead{background:var(--soft);padding-block:64px 56px;border-bottom:1px solid var(--line)}
.phead h1{color:var(--plum);font-weight:700;font-size:clamp(1.8rem,4.2vw,2.9rem);
          line-height:1.15;text-transform:uppercase}
.phead .rule{width:56px;height:3px;background:var(--pink);margin:20px 0 0}
.phead p{margin-top:20px;max-width:62ch;font-weight:300;font-size:1.02rem}

/* Page hero — the old site opened most pages with a full-bleed photograph
   behind the title. Same treatment, recovered from the mirror. Applied by
   build.py to any page listed in src/data/heroes.json. */
.phead.phero{position:relative;overflow:hidden;background:var(--black);
             border-bottom:0;padding:0;display:flex;align-items:flex-end;
             min-height:clamp(280px,38vw,460px)}
.phead.phero img{position:absolute;inset:0;width:100%;height:100%;
                 object-fit:cover;object-position:center 35%;opacity:.92}
.phead.phero::after{content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.20) 40%,rgba(0,0,0,.78) 100%)}
.phead.phero .wrap{position:relative;z-index:2;padding-block:56px 46px;width:100%}
.phead.phero h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.phead.phero p{color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.phead.phero .rule{background:var(--pink)}
@media(max-width:600px){
  .phead.phero{min-height:240px}
  .phead.phero .wrap{padding-block:38px 30px}
}
/* .prose is an INNER element: <div class="wrap"><div class="prose">.
   Putting both classes on one element combines .wrap's margin:0 auto with
   this max-width and centres the column away from the page's left edge. */
.prose{max-width:74ch}
.wrap.prose{max-width:74ch;margin-left:0}
.prose h2{margin-top:44px}
.prose h2:first-child{margin-top:0}
.prose h3{color:var(--plum);font-weight:700;font-size:1.2rem;text-transform:uppercase;margin:32px 0 10px}
.prose ul,.prose ol{margin:16px 0 16px 22px}
.prose li{margin-bottom:8px}

/* ── program rows (listing pages) ─────────────
   Full-width alternating rows: image one side, detail the other.
   Used on /programs/. Cards (.prog) stay for the homepage grid. */
.prow{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;
      align-items:start;padding-block:52px;border-top:1px solid var(--line)}
.prow:first-of-type{border-top:0;padding-top:16px}
.prow figure{background:var(--soft);overflow:hidden}
/* Show the whole photograph. These are the school's own student work and
   class shots — cropping them to a uniform box cuts off the subject, which
   is the entire point of the image. Uneven heights are the correct trade. */
.prow figure img{width:100%;height:auto;display:block}
.prow h2{font-size:clamp(1.3rem,2.6vw,1.75rem);margin-bottom:12px}
.prow .disc{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--pink-dk);
            text-transform:uppercase;line-height:1.6}
.prow .dur{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
           text-transform:uppercase;margin-top:4px}
.prow p.txt{margin-top:16px;font-weight:300}
.prow ul.modules{margin:18px 0 0;padding:0;list-style:none;display:grid;
                 grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px}
.prow ul.modules li{font-size:.86rem;font-weight:500;padding-left:16px;position:relative}
.prow ul.modules li::before{content:'';position:absolute;left:0;top:.62em;
                            width:6px;height:6px;background:var(--pink)}
.prow .more{display:inline-block;margin-top:22px;font-size:.74rem;font-weight:600;
            letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
            text-decoration:none;border-bottom:2px solid var(--line);
            padding-bottom:5px;transition:.2s}
.prow .more:hover{border-color:var(--pink)}
@media(max-width:860px){
  .prow{grid-template-columns:1fr;gap:26px;padding-block:40px}
  .prow figure{max-width:420px}
  .prow ul.modules{grid-template-columns:1fr}
}

/* notice block — used for accreditation caveats and similar */
.notice{background:var(--soft);border-left:3px solid var(--pink);
        padding:20px 24px;margin-top:24px;font-size:.92rem}
.notice strong{color:var(--plum)}


/* ── FAQ accordion ─────────────────────────────
   Native <details>; no JavaScript, keyboard and screen-reader friendly. */
details.faq{border-bottom:1px solid var(--line);padding:0}
details.faq summary{
  cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-weight:600;font-size:.94rem;color:var(--plum);line-height:1.45;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
details.faq[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details.faq summary:hover{color:var(--pink-dk)}
details.faq > p{margin:0 0 16px;font-weight:300}
details.faq > p:first-of-type{margin-top:2px}
details.faq summary:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* ── call-to-action panel ─────────────────────
   Used where a form used to live, and for contact details. */
.cta{background:var(--soft);border-top:3px solid var(--pink);padding:34px 36px;margin-top:32px}
.cta h2,.cta h3{margin-top:0}
.cta p{font-weight:300}
.cta .btn{margin-top:20px}
.cta .tel{display:block;font-size:1.5rem;font-weight:700;color:var(--plum);
          text-decoration:none;letter-spacing:-.01em;margin-top:6px}
.cta .tel:hover{color:var(--pink-dk)}
@media(max-width:560px){.cta{padding:26px 22px}}
.checklist{list-style:none;margin:18px 0 0;padding:0}
.checklist li{position:relative;padding-left:22px;margin-bottom:10px;font-weight:300}
.checklist li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--pink)}

/* ── blog ─────────────────────────────────────── */
.pmeta{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
       color:var(--muted);margin:0 0 14px}
.pmeta a{color:var(--pink-dk);text-decoration:none}
.pmeta a:hover{text-decoration:underline}
.phead .pmeta{margin-bottom:16px}

.plist{display:grid;gap:0;max-width:78ch}
.pcard{padding:30px 0;border-bottom:1px solid var(--line)}
.pcard:first-child{padding-top:6px}
.pcard .pmeta{margin-bottom:8px}
.pcard h2{font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.3;text-transform:none;
          letter-spacing:0;margin-bottom:10px}
.pcard h2 a{color:var(--plum);text-decoration:none}
.pcard h2 a:hover{color:var(--pink-dk)}
.pcard p{font-weight:300;font-size:.95rem;margin:0}

figure.fig{margin:30px 0;background:var(--soft);display:inline-block;max-width:100%}
/* Cap height rather than width: landscape shots stay full-width, tall
   portraits shrink to fit instead of swallowing the column. No cropping. */
figure.fig img{max-width:100%;max-height:520px;width:auto;height:auto;display:block}
figure.fig figcaption{margin-top:9px;font-size:.84rem;font-weight:300;color:var(--muted);max-width:56ch}

/* Several photos side by side inside prose. Heights are capped, not widths,
   so a portrait and a landscape sit level without either being cropped;
   they wrap to the next line when the column runs out. */
.figrow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px;margin:30px 0}
.figrow figure.fig{margin:0;flex:0 1 auto}
.figrow figure.fig img{max-height:330px}
/* Three across needs a shorter cap or the last one wraps to its own line. */
.figrow--three figure.fig img{max-height:300px}
@media (max-width:560px){ .figrow figure.fig img{max-height:250px} }

.prose blockquote{border-left:3px solid var(--pink);padding:4px 0 4px 22px;
                  margin:26px 0;font-weight:300;font-style:italic;color:var(--ink)}
.backlink{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
          font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.backlink a{color:var(--ink);text-decoration:none}
.backlink a:hover{color:var(--pink-dk)}

/* ── service / price list ─────────────────────
   Name and price on one line with a dotted leader, description beneath.
   Used on /spaservices/; reusable anywhere with a priced list. */
.svc{padding:20px 0;border-bottom:1px solid var(--line)}
.svc:last-of-type{border-bottom:0}
.svc-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.svc-name{font-size:.9rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
          color:var(--plum);line-height:1.4;margin:0}
.svc-dots{flex:1 1 40px;border-bottom:1px dotted var(--line);
          transform:translateY(-5px);min-width:24px}
.svc-price{font-size:1.05rem;font-weight:700;color:var(--pink-dk);white-space:nowrap;
           font-variant-numeric:tabular-nums}
.svc p{margin:9px 0 0;font-weight:300;font-size:.94rem;max-width:62ch}
.svc-group{margin-top:14px}
.svc-group + h2{margin-top:52px}
h3.svc-sub{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
           color:var(--muted);margin:34px 0 0}

/* ── kit contents: long item lists in columns ── */
ul.kit{list-style:none;margin:20px 0 0;padding:0;
       columns:2;column-gap:34px;max-width:64ch}
ul.kit li{position:relative;padding-left:15px;margin-bottom:7px;font-size:.88rem;
          font-weight:300;break-inside:avoid}
ul.kit li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;
                  background:var(--pink)}
@media(max-width:620px){ul.kit{columns:1}}
.svc.kit-block{border-bottom:0;padding-bottom:0}
.svc.kit-block + .svc.kit-block{border-top:1px solid var(--line);margin-top:34px;padding-top:34px}

/* ── locations hub ───────────────────────────── */
.locgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:34px}
@media(max-width:860px){.locgrid{grid-template-columns:1fr;gap:26px}}
.loc{border-top:3px solid var(--pink);padding-top:18px}
.loc h2{font-size:1.05rem;margin-bottom:6px}
.loc h2 a{color:var(--plum);text-decoration:none}
.loc h2 a:hover{color:var(--pink-dk)}
.loc p{font-size:.9rem;font-weight:300;margin:0 0 12px}
.loc ul{list-style:none;margin:0;padding:0}
.loc li{margin-bottom:7px}
.loc li a{font-size:.86rem;font-weight:500;color:var(--body);text-decoration:none;
          border-bottom:1px solid var(--line);padding-bottom:2px}
.loc li a:hover{color:var(--pink-dk);border-color:var(--pink)}


/* ── video ─────────────────────────────────────
   Recovered from the old site. preload="none" plus a poster frame means
   the file is only fetched if someone presses play — a 10MB tour video
   must not be part of the page load. */
.vidblock{background:var(--soft);padding-block:64px}
.vidblock h2{margin-bottom:8px}
.vidblock .rule{width:56px;height:3px;background:var(--pink);margin:16px 0 26px}
.vidblock p.lead{max-width:62ch;font-weight:300;margin-bottom:26px}
figure.vid{margin:0 0 30px;max-width:900px}
figure.vid:last-child{margin-bottom:0}
figure.vid video{width:100%;height:auto;display:block;background:#000}
figure.vid figcaption{margin-top:10px;font-size:.84rem;font-weight:500;
                      letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* Portrait (phone-shot) videos: a wrapping row of narrow players, so a
   9:16 clip doesn't become 1600px tall in the 900px content column. */
.vidrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:26px;max-width:900px;margin-bottom:30px}
.vidrow figure.vid{max-width:none;margin:0}
.vidrow figure.vid video{aspect-ratio:478/850;object-fit:contain}

/* Graduates-at-work photo wall. CSS columns rather than a grid: the photos
   arrive at whatever shape the graduate's phone shot them in, so nothing is
   cropped -- they tile like a pinboard and the column count falls with width. */
.workwall{columns:3;column-gap:18px;max-width:900px;margin-bottom:8px}
.workwall figure{break-inside:avoid;margin:0 0 18px;background:var(--soft)}
.workwall img{width:100%;height:auto;display:block}
.workwall figcaption{padding:9px 11px 12px;font-size:.82rem;font-weight:300;
                     line-height:1.45;color:var(--muted)}
.workwall figcaption strong{color:var(--ink);font-weight:600}
@media (max-width:900px){ .workwall{columns:2} }
@media (max-width:560px){ .workwall{columns:1} }

.embed{position:relative;max-width:900px;aspect-ratio:16/9;background:#000}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* ── programme comparison ──────────────────────
   Four programmes side by side so a prospect can compare hours and scope
   without scrolling. Collapses to two columns on tablets, one on phones. */
.pcompare{background:var(--soft);padding-block:76px}
.pcompare .pc-head{text-align:center}
.pcompare .rule{width:56px;height:3px;background:var(--pink);margin:20px auto 0}
.pcompare .pc-intro{text-align:center;max-width:60ch;margin:22px auto 0;
                    font-weight:300;font-size:1.02rem}
.pcgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:46px}
.pc{background:#fff;display:flex;flex-direction:column;
    box-shadow:0 1px 3px rgba(0,0,0,.06)}
.pc-fig{display:block;overflow:hidden;background:var(--black);aspect-ratio:4/5}
.pc-fig img{width:100%;height:100%;object-fit:cover;display:block;
            transition:transform .5s ease}
.pc:hover .pc-fig img{transform:scale(1.04)}
.pc h3{font-size:1.02rem;line-height:1.3;text-transform:uppercase;
       letter-spacing:.01em;margin:22px 22px 0}
.pc h3 a{color:var(--plum);text-decoration:none}
.pc h3 a:hover{color:var(--pink-dk)}
.pc-qual{margin:6px 22px 0;font-size:.74rem;font-weight:600;letter-spacing:.06em;
         text-transform:uppercase;color:var(--pink-dk)}
.pc-hours{margin:12px 22px 0;font-size:.8rem;font-weight:700;letter-spacing:.05em;
          text-transform:uppercase;color:var(--ink)}
.pc-blurb{margin:12px 22px 0;font-size:.9rem;font-weight:300;flex:1}
.pc .more{margin:20px 22px 24px;align-self:flex-start}
@media(max-width:1000px){ .pcgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} }
@media(max-width:620px){ .pcgrid{grid-template-columns:1fr} .pcompare{padding-block:56px} }


/* ── section sub-navigation ────────────────────
   The old site carried a row of sibling links across the Hire an Artist
   pages. Dropping it in the rebuild left Wall of Fame with no route to it
   from anywhere on the site. */
.subnav{background:var(--soft);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;flex-wrap:wrap;gap:8px 30px;padding-block:16px}
.subnav a{font-size:.79rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
          color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--pink-dk);border-color:var(--pink)}
.subnav a[aria-current="page"]{color:var(--pink-dk);border-color:var(--pink)}
@media(max-width:560px){ .subnav .wrap{gap:6px 18px} .subnav a{font-size:.72rem} }


/* ── testimonials ──────────────────────────────
   A quote has to look like a quote. Run as plain paragraphs among marketing
   copy, a graduate's words read as more of the school talking about itself. */
.quotes{display:grid;gap:28px;margin-top:34px}
/* the intro sits above the grid and wants a readable measure */
.wrap > p.lead{max-width:68ch;font-weight:300;font-size:1.02rem}
figure.quote{margin:0;background:var(--soft);border-left:3px solid var(--pink);
             padding:32px 34px}
figure.quote blockquote{margin:0;border:0;padding:0}
figure.quote blockquote p{margin:0;font-size:1.04rem;font-weight:300;line-height:1.7;
                          font-style:italic;color:var(--ink)}
figure.quote blockquote p::before{content:'\201C'}
figure.quote blockquote p::after{content:'\201D'}
figure.quote figcaption{margin-top:20px;display:flex;flex-wrap:wrap;
                        align-items:baseline;gap:6px 14px}
figure.quote cite{font-style:normal;font-weight:700;color:var(--plum);
                  font-size:.92rem;letter-spacing:.01em}
figure.quote .who{font-size:.78rem;font-weight:600;letter-spacing:.06em;
                  text-transform:uppercase;color:var(--pink-dk)}
@media(min-width:900px){ .quotes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ figure.quote{padding:24px 22px} }


/* ── wall of fame ──────────────────────────────
   Graduates who finished the programme, each with a clip or a photograph. */
.grads{display:grid;gap:34px;margin-top:36px}
@media(min-width:820px){ .grads{grid-template-columns:repeat(2,minmax(0,1fr))} }
.grad video, .grad img{width:100%;height:auto;display:block;background:#000}
.grad h3{margin-top:16px;font-size:1.05rem;text-transform:uppercase;
         letter-spacing:.01em;color:var(--plum)}
.grad .gmeta{margin-top:5px;font-size:.76rem;font-weight:600;letter-spacing:.06em;
             text-transform:uppercase;color:var(--pink-dk)}
.grad .gnote{margin-top:10px;font-size:.93rem;font-weight:300}