/* ==========================================================================
   Sub-page layer - the approved corporate layout, with colour and motion.

   Structure is unchanged from the version that was signed off: page header,
   key-facts strip, three cards, callout, next steps. What changed is the
   palette (deep navy-to-indigo hero, tinted sections, gradient accents
   instead of flat white) and the interaction (particle field, count-ups,
   staggered reveals, drifting orbs, hover states).

   Layers on top of site.css, which supplies the header, footer, mobile menu,
   dialog, and the reveal / counter / particle JS hooks.
   ========================================================================== */

.pro{
  --ink:#12213A;
  --head:#0F2A55;
  --body-c:#54637C;
  --muted:#8494AC;
  --bd:#E3E9F2;
  --bd-str:#C7D4E8;
  --alt:#F4F8FD;
  --sky:#EAF1FC;
  --sky-2:#D9E6FA;
  --cream:#FCF6E9;
  --accent:#C89A2A;
  --accent-lt:#E8BA4C;
  --accent-dk:#7A5E10;
  --navy:#0B2A5B;
  --navy-deep:#071F45;
  --indigo:#17458F;
  --rad:12px;
  background:#fff;
  color:var(--ink);
  font-size:16.5px;
  line-height:1.7;
}

.pro .c{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,4vw,32px)}

/* Page headings only. site.css owns the header, footer, dialogs and mobile menu,
   but this loads after it at the same specificity, so without the exclusion the
   dark page ink lands on the footer's gold column titles and on the "Coming soon"
   dialog heading, which then sits invisible on its own navy box. :where() keeps
   the specificity at (0,1,1) so the cascade below is unchanged. */
.pro :is(h1,h2,h3,h4):where(:not(.hdr *,.ftr *,.soon *,.mobile *,.lbox *)){
  font-family:var(--body);color:var(--head);
  letter-spacing:-.02em;text-transform:none}
.pro h1{font-size:clamp(31px,3.9vw,46px);font-weight:600;line-height:1.16}
/* h2 needs the same exclusion: the only chrome heading it reaches is the
   "Coming soon" dialog title, which site.css sizes larger and at Anton's
   single 400 weight. */
.pro h2:where(:not(.hdr *,.ftr *,.soon *,.mobile *,.lbox *)){
  font-size:clamp(25px,2.9vw,34px);font-weight:600;line-height:1.22}
.pro h3{font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.pro p{color:var(--body-c)}
/* scoped to main: a bare `.pro a` has the same specificity as site.css's
   `.nav-links a` but loads later, and recoloured the shared header nav */
.pro main a{color:var(--accent-dk)}
.pro main a:hover{color:var(--accent)}

.pro .label{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
            color:var(--accent-dk)}
.pro .lead{font-size:clamp(17px,1.3vw,19px);line-height:1.65;max-width:60ch}

/* ---------- hero: deep navy-to-indigo, particles, drifting orbs ----------- */
.pro .phead{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 130% at 8% 0%, rgba(23,69,143,.85) 0%, rgba(11,42,91,0) 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(200,154,42,.20) 0%, rgba(11,42,91,0) 60%),
    linear-gradient(140deg, var(--navy-deep) 0%, var(--navy) 52%, #123C7E 100%);
  color:#fff;
  padding-top:calc(76px + clamp(40px,5.5vw,72px));padding-bottom:clamp(56px,7vw,92px)}
.pro .phead canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.pro .phead .c{position:relative;z-index:2}
/* soft colour orbs, slowly drifting */
.pro .orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}
.pro .orb-a{width:420px;height:420px;top:-140px;right:-60px;
            background:radial-gradient(circle,rgba(200,154,42,.34),rgba(200,154,42,0) 70%);
            animation:drift-a 18s ease-in-out infinite}
.pro .orb-b{width:380px;height:380px;bottom:-160px;left:-80px;
            background:radial-gradient(circle,rgba(56,120,220,.40),rgba(56,120,220,0) 70%);
            animation:drift-b 22s ease-in-out infinite}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-40px,34px,0)}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(46px,-30px,0)}}

.pro .crumbs{font-size:13.5px;color:rgba(234,241,252,.72);margin-bottom:20px}
.pro .phead .crumbs a{color:var(--accent-lt)}
.pro .phead .crumbs a:hover{color:#fff}
.pro .crumbs span{margin-inline:8px;color:rgba(234,241,252,.4)}
.pro .phead h1{color:#fff}
.pro .phead .lead{color:rgba(226,236,250,.86);margin-top:18px}
.pro .phead-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
                 gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:900px){.pro .phead-grid{grid-template-columns:1fr}}
.pro .phead-img{position:relative;border-radius:var(--rad);overflow:hidden;aspect-ratio:4/3;
                box-shadow:0 28px 60px -28px rgba(3,14,36,.85);
                animation:hover-float 9s ease-in-out infinite}
.pro .phead-img::after{content:"";position:absolute;inset:0;border-radius:var(--rad);
                       box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.pro .phead-img img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes hover-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:900px){.pro .phead-img{aspect-ratio:16/9}}

/* status badge */
.pro .badge{display:inline-flex;align-items:center;gap:9px;border-radius:999px;
            padding:7px 15px 7px 12px;font-size:12.5px;font-weight:600;letter-spacing:.02em;
            color:var(--accent-lt);background:rgba(200,154,42,.13);
            box-shadow:inset 0 0 0 1px rgba(200,154,42,.34);margin-bottom:18px}
.pro .badge i{width:7px;height:7px;border-radius:50%;background:var(--accent-lt);
              animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(232,186,76,.28)}
                 50%{box-shadow:0 0 0 7px rgba(232,186,76,.04)}}

/* ---------- buttons -------------------------------------------------------- */
.pro .btn{position:relative;display:inline-flex;align-items:center;gap:8px;border-radius:8px;
          font-size:15px;font-weight:600;padding:13px 22px;min-height:46px;overflow:hidden;
          border:1px solid transparent;cursor:pointer;
          transition:transform .22s ease,box-shadow .22s ease,background .22s,border-color .22s,color .22s}
.pro .btn-primary{background:linear-gradient(135deg,var(--accent-lt),var(--accent));
                  color:#1B1503;box-shadow:0 8px 22px -10px rgba(200,154,42,.85)}
.pro .btn-primary:hover{color:#1B1503;transform:translateY(-2px);
                        box-shadow:0 14px 30px -12px rgba(200,154,42,.95)}
/* sheen sweep on hover */
.pro .btn-primary::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%)}
.pro .btn-primary:hover::after{transform:translateX(120%);transition:transform .75s ease}
.pro .btn-ghost{background:rgba(255,255,255,.08);color:#fff;
                border-color:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pro .btn-ghost:hover{background:rgba(255,255,255,.17);color:#fff;transform:translateY(-2px)}
.pro .btn-secondary{background:#fff;color:var(--head);border-color:var(--bd-str)}
.pro .btn-secondary:hover{border-color:var(--head);color:var(--head);transform:translateY(-2px);
                          box-shadow:0 8px 20px -12px rgba(15,42,85,.45)}
.pro .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- key facts ------------------------------------------------------ */
/* How far the facts card rides up over the hero above it. Named because the
   hero has to reserve the same distance in its own padding - see .phead--slim
   below - and the two drifting apart is what put the card on top of the lead. */
.pro{--facts-pull:30px}
.pro .facts-wrap{background:linear-gradient(180deg,var(--sky) 0%, #fff 70%)}
.pro .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
            background:var(--bd);border:1px solid var(--bd);
            border-radius:var(--rad);overflow:hidden;
            transform:translateY(calc(var(--facts-pull) * -1));
            box-shadow:0 20px 46px -30px rgba(15,42,85,.55)}
.pro .facts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pro .facts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pro .facts dd.fact-times span{display:block;margin-top:3px;font-size:13.5px;font-weight:500;color:var(--muted)}
/* "Live" carries a broadcast dot - the one red on the site, because that is
   the colour the convention depends on to read as on-air. The ring is a
   separate pseudo-element so the dot itself stays a solid, steady 8px and
   only the halo animates; a pulsing dot at this size just looks like a
   rendering fault. */
/* Not inline-flex: an inline-flex box takes its baseline from its first flex
   item, which here is the dot - a box with no text and so no baseline of its
   own. That dropped "Live" 2.5px below the "Tue & Sat," it sits beside. Left
   inline, the label keeps the line's own baseline and only the dot is aligned. */
.pro .facts .islive{white-space:nowrap}
.pro .facts .islive i{position:relative;display:inline-block;vertical-align:baseline;
  width:8px;height:8px;margin-right:7px;bottom:.14em;border-radius:50%;
  background:#D92D20}
.pro .facts .islive i::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(217,45,32,.55);animation:liveping 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes liveping{
  0%{box-shadow:0 0 0 0 rgba(217,45,32,.55)}
  70%{box-shadow:0 0 0 7px rgba(217,45,32,0)}
  100%{box-shadow:0 0 0 0 rgba(217,45,32,0)}}
@media (prefers-reduced-motion:reduce){
  .pro .facts .islive i::after{animation:none}
}
@media (max-width:820px){.pro .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.pro .facts{grid-template-columns:1fr}}
.pro .facts div{background:#fff;padding:22px clamp(16px,2vw,24px);transition:background .25s ease}
.pro .facts div:hover{background:var(--alt)}
.pro .facts .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
                background:var(--cream);color:var(--accent-dk);margin-bottom:12px}
.pro .facts dt{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
               color:var(--muted)}
.pro .facts dd{margin:6px 0 0;font-size:17.5px;font-weight:600;color:var(--head)}

/* ---------- sections ------------------------------------------------------- */
.pro .sect{padding-block:clamp(48px,6.5vw,84px);position:relative}
.pro .sect-alt{background:
   radial-gradient(80% 100% at 100% 0%, rgba(200,154,42,.10) 0%, rgba(255,255,255,0) 60%),
   linear-gradient(180deg,#fff 0%,var(--alt) 40%,var(--sky) 100%);
   border-top:1px solid var(--bd)}
/* Section heads span the container. The 60ch measure they used to sit in left
   a third of every row empty to the right of the intro paragraph. */
.pro .sect-head{max-width:none}
/* same fraction of air under the eyebrow as the home page display titles */
.pro .sect-head h2{margin-top:22px}
.pro .sect-head p{margin-top:16px}

/* ---------- cards ---------------------------------------------------------- */
.pro .pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
             gap:clamp(18px,2vw,26px);margin-top:clamp(30px,4vw,46px);align-items:stretch}
@media (max-width:980px){.pro .pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.pro .pcards{grid-template-columns:1fr}}
/* A last row holding a single card looks like a mistake, so the final card
   spans the remainder to close the grid - but only when it would actually be
   stranded. :nth-child(3n+1) is true of the 7th card and false of the 9th, so
   the rule follows the count instead of being pinned to one, and the 2-column
   breakpoint gets its own parity test. */
.pro .pcards--svc .pcard:last-child:nth-child(3n+1){grid-column:span 2}
@media (max-width:980px){
  .pro .pcards--svc .pcard:last-child{grid-column:auto}
  .pro .pcards--svc .pcard:last-child:nth-child(2n+1){grid-column:span 2}
}
/* Both span rules above carry an extra :nth-child(), so a plain :last-child
   reset here loses to them on specificity and the span survives into the
   single-column layout - which forces an implicit second track and starves
   the 1fr one to 0px. Matching their specificity lets source order win. */
@media (max-width:660px){
  .pro .pcards--svc .pcard:last-child:nth-child(2n+1),
  .pro .pcards--svc .pcard:last-child:nth-child(3n+1){grid-column:span 1}
}
/* compact variant for the service cards: no meta list, tighter */
.pro .pcard--compact{min-height:0}
.pro .pcard--compact h3{margin-top:8px}
/* The service names carry the gold, so the list reads as a set of products
   rather than a column of navy paragraphs. --accent-lt on white is only
   2.2:1, so this takes the dark gold the card labels already use, which
   clears AA at 6.1:1 and still reads as gold. */
.pro .pcards--svc .pcard h3{color:var(--accent-dk)}
/* pcard, not card: site.css already defines .card with a clip-path notch,
   min-height and a gold ::before bar, which leaked in */
.pro .pcard{position:relative;background:#fff;border:1px solid var(--bd);
            border-radius:var(--rad);padding:clamp(24px,2.4vw,32px);overflow:hidden;
            display:flex;flex-direction:column;
            transition:transform .3s ease,border-color .25s,box-shadow .3s ease}
.pro .pcard::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
                    background:linear-gradient(90deg,var(--accent-lt),var(--accent));
                    transition:width .45s cubic-bezier(.16,1,.3,1)}
.pro .pcard:hover{transform:translateY(-5px);border-color:var(--bd-str);
                  box-shadow:0 20px 44px -26px rgba(15,42,85,.5)}
.pro .pcard:hover::before{width:100%}
.pro .pcard .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
                background:linear-gradient(140deg,var(--sky),var(--sky-2));color:var(--indigo);
                transition:transform .35s ease,background .35s,color .35s}
.pro .pcard:hover .ic{transform:scale(1.07) rotate(-4deg);
                      background:linear-gradient(140deg,#FBF3DF,#F3E4BC);color:var(--accent-dk)}
/* The three RICS document cards are whole-card links. `.pro main a` sets the
   link gold, which would repaint the heading and the description, so the card
   inherits page colour and only the closing action line carries the gold. */
.pro .pcard--doc{color:inherit;text-decoration:none}
.pro .pcard--doc .pcard-go{margin-top:auto;padding-top:14px;font-size:13.5px;
  font-weight:600;color:var(--accent-dk)}
.pro .pcard--doc:hover .pcard-go{color:var(--head)}
.pro .pcard-label{margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.09em;
                  text-transform:uppercase;color:var(--accent-dk)}
.pro .pcard h3{margin-top:8px}
.pro .pcard .ic+h3{margin-top:22px}
.pro .pcard>p{margin-top:12px;font-size:15.5px}
.pro .pcard dl{margin-top:auto;padding-top:22px}
.pro .pcard dl div{padding-top:16px;margin-top:16px;border-top:1px solid var(--bd)}
.pro .pcard dl div:first-child{margin-top:0}
.pro .pcard dt{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
               color:var(--muted)}
.pro .pcard dd{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--ink)}

/* ---------- callout -------------------------------------------------------- */
.pro .callout{position:relative;overflow:hidden;border-radius:var(--rad);
  background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,var(--indigo) 100%);
  color:#fff;padding:clamp(26px,3vw,40px);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:22px;
  box-shadow:0 24px 54px -30px rgba(7,31,69,.9)}
.pro .callout::after{content:"";position:absolute;width:340px;height:340px;right:-90px;top:-150px;
  border-radius:50%;filter:blur(52px);pointer-events:none;
  background:radial-gradient(circle,rgba(200,154,42,.42),rgba(200,154,42,0) 70%);
  animation:drift-a 20s ease-in-out infinite}
.pro .callout>*{position:relative;z-index:2}
.pro .callout h3{color:#fff;margin:0}
.pro .callout p{margin-top:8px;font-size:15.5px;color:rgba(226,236,250,.82);max-width:62ch}
.pro .callout>div:only-child{flex:1 1 100%}
.pro .callout>div:only-child p{max-width:none}

/* ---------- next steps ----------------------------------------------------- */
.pro .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
            gap:clamp(18px,2vw,26px);margin-top:clamp(26px,3vw,36px)}
@media (max-width:660px){.pro .steps{grid-template-columns:1fr}}
.pro .step{position:relative;overflow:hidden;border:1px solid var(--bd);border-radius:var(--rad);
           padding:clamp(24px,2.4vw,30px);background:#fff;
           transition:transform .3s ease,border-color .25s,box-shadow .3s ease}
.pro .step::before{content:"";position:absolute;inset:0;opacity:0;
                   background:linear-gradient(135deg,var(--sky) 0%,rgba(255,255,255,0) 60%);
                   transition:opacity .35s}
.pro .step:hover{transform:translateY(-4px);border-color:var(--bd-str);
                 box-shadow:0 18px 40px -26px rgba(15,42,85,.5)}
.pro .step:hover::before{opacity:1}
.pro .step>*{position:relative;z-index:2}
.pro .step p{margin-top:10px;font-size:15.5px}
.pro .step .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
               font-size:15px;font-weight:600;color:var(--head)}
.pro .step .go svg{transition:transform .3s ease}
.pro .step:hover .go{color:var(--accent-dk)}
.pro .step:hover .go svg{transform:translateX(5px)}

/* ---------- reveals (staggered) --------------------------------------------- */
.js .pro [data-r]{opacity:0;transform:translateY(16px);
                  transition:opacity .6s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*80ms),
                             transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*80ms)}
.js .pro [data-r].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .pro .orb,.pro .phead-img,.pro .badge i,.pro .callout::after{animation:none!important}
  .pro .btn,.pro .pcard,.pro .step,.pro .pcard .ic{transition:none!important}
  .js .pro [data-r]{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   Components for competencies / mentors / investment.
   Every class below is p-prefixed: site.css already defines .chip, .comp,
   .filters, .lvl, .hrs, .topics, .mentor, .portrait, .roles, .price and .tl,
   and unprefixed names inherit its clip-paths, colours and opacities.
   ========================================================================== */

/* ---------- filter pills --------------------------------------------------- */
.pro .pfilters{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pro .pfilters button{border-radius:999px;border:1px solid var(--bd-str);background:#fff;
  color:var(--head);font-size:14px;font-weight:600;padding:10px 18px;min-height:42px;
  cursor:pointer;transition:transform .2s,border-color .2s,background .25s,color .25s,box-shadow .2s}
.pro .pfilters button:hover{transform:translateY(-2px);border-color:var(--head)}
.pro .pfilters button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--accent-lt),var(--accent));
  border-color:transparent;color:#1B1503;box-shadow:0 8px 20px -10px rgba(200,154,42,.8)}

.pro .preadout{display:inline-flex;align-items:baseline;gap:9px;margin-top:22px;
  padding:10px 18px;border-radius:999px;background:var(--sky);color:var(--head);font-size:14px}
.pro .preadout b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--accent-dk)}

/* ---------- accordion ------------------------------------------------------ */
.pro .pacc{margin-top:26px;border:1px solid var(--bd);border-radius:var(--rad);
  overflow:hidden;background:#fff;box-shadow:0 14px 36px -30px rgba(15,42,85,.5)}
.pro .pacc>li+li{border-top:1px solid var(--bd)}
.pro .pacc summary{display:grid;grid-template-columns:1fr auto auto;gap:clamp(12px,2vw,28px);
  align-items:center;padding:15px clamp(16px,2vw,22px);cursor:pointer;list-style:none;
  transition:background .2s}
.pro .pacc summary::-webkit-details-marker{display:none}
.pro .pacc summary:hover{background:var(--alt)}
.pro .pacc .pnm{display:flex;align-items:center;gap:11px;font-weight:600;color:var(--head);
  font-size:15.5px;line-height:1.4}
/* The plus is drawn from two bars rather than typed. Centring a glyph centres its
   text box, not its ink, which left the "+" about 2px low - and the 45deg open state
   turned that into a visibly off-centre cross. */
.pro .pacc .pnm em{font-style:normal;width:20px;height:20px;border-radius:6px;flex:0 0 auto;
  position:relative;font-size:0;background:var(--sky);color:var(--indigo);
  transition:transform .3s ease,background .25s,color .25s}
.pro .pacc .pnm em::before,.pro .pacc .pnm em::after{content:"";position:absolute;
  top:50%;left:50%;width:9px;height:1.6px;border-radius:1px;background:currentColor;
  transform:translate(-50%,-50%)}
.pro .pacc .pnm em::after{transform:translate(-50%,-50%) rotate(90deg)}
.pro .pacc details[open] .pnm em{transform:rotate(45deg);
  background:linear-gradient(135deg,var(--accent-lt),var(--accent));color:#1B1503}
.pro .pacc .plvl{display:flex;align-items:flex-end;gap:3px;height:18px}
.pro .pacc .plvl i{width:6px;border-radius:2px;background:var(--bd-str);display:block}
.pro .pacc .plvl i:nth-child(1){height:8px}
.pro .pacc .plvl i:nth-child(2){height:13px}
.pro .pacc .plvl i:nth-child(3){height:18px}
.pro .pacc .plvl i.on{background:linear-gradient(180deg,var(--accent-lt),var(--accent))}
.pro .pacc .phrs{white-space:nowrap;font-size:13px;color:var(--muted)}
.pro .pacc .phrs b{font-size:16px;font-weight:700;color:var(--head);margin-right:3px}
.pro .pacc .pans{padding:2px clamp(16px,2vw,22px) 20px}
/* No measure cap: the answer fills the panel it sits in rather than stopping
   short of the card's own right edge. */
.pro .pacc .pans p{font-size:14.5px;color:var(--body-c);line-height:1.62}
.pro .pacc details[open] .pans{animation:accIn .4s ease both}
/* An open panel is two columns: the topics read straight down the left, and the
   level and hours sit in a card on the right so the width is not left stranded. */
.pro .pacc .pans-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;
  gap:clamp(18px,2.6vw,38px);align-items:start;
  padding:6px clamp(16px,2vw,22px) 22px}
.pro .pacc .pans-lbl{margin:0 0 12px;font:600 11px/1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* The topic lists are indicative, not exhaustive - the qualifier the booklet
   carries. Set in sentence case and italic so it reads as a footnote to the
   label rather than shouting alongside it 21 times down the page. */
.pro .pacc .pans-lbl .lblnote{text-transform:none;letter-spacing:.02em;
  font-weight:500;font-style:italic;line-height:1.5}

.pro .pacc .ptopics{display:grid;grid-template-columns:1fr;gap:2px;margin:0;padding:0;
  counter-reset:tp}
.pro .pacc .ptopics li{display:flex;gap:12px;align-items:flex-start;padding:6px 0;
  font-size:14.5px;color:var(--body-c);line-height:1.55}
.pro .pacc .ptopics li::before{counter-increment:tp;
  content:counter(tp,decimal-leading-zero);flex:0 0 auto;
  width:23px;height:23px;border-radius:7px;background:var(--sky);color:var(--indigo);
  font:700 10.5px/23px 'Plus Jakarta Sans',sans-serif;text-align:center;
  letter-spacing:.02em}

.pro .pacc .plvlcard{position:relative;overflow:hidden;background:var(--alt);
  border:1px solid var(--bd);border-radius:12px;padding:17px 19px 16px}
.pro .pacc .plvlcard::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--accent-lt),var(--accent))}
.pro .pacc .plvlcard-lbl{display:flex;align-items:center;gap:7px}
.pro .pacc .plvlcard-lbl svg{flex:0 0 auto;color:var(--accent-dk)}
.pro .pacc .plvlcard-n{display:flex;align-items:flex-end;gap:13px;margin:0}
.pro .pacc .plvlcard-n b{font-family:Anton,sans-serif;font-weight:400;font-size:38px;
  line-height:.8;color:var(--head)}
.pro .pacc .plvlcard-n .plvl{margin-bottom:3px}
.pro .pacc .plvlcard-d{margin:11px 0 0;font-size:13.5px;line-height:1.5;color:var(--body-c)}
.pro .pacc .plvlcard-h{display:flex;align-items:center;gap:9px;margin:14px 0 0;
  padding-top:13px;border-top:1px solid var(--bd-str);font-size:13px;color:var(--muted)}
.pro .pacc .plvlcard-h svg{flex:0 0 auto;color:var(--accent-dk)}
.pro .pacc .plvlcard-h b{font-weight:700;color:var(--head)}

.pro .pacc details[open] .ptopics li{animation:accIn .4s ease both}
.pro .pacc details[open] .ptopics li:nth-child(2){animation-delay:.04s}
.pro .pacc details[open] .ptopics li:nth-child(3){animation-delay:.08s}
.pro .pacc details[open] .ptopics li:nth-child(4){animation-delay:.12s}
.pro .pacc details[open] .ptopics li:nth-child(5){animation-delay:.16s}
.pro .pacc details[open] .plvlcard{animation:accIn .4s ease both;animation-delay:.1s}

/* The programme page repeats the coverage with every panel already open, so the
   topics are read by scrolling rather than clicking. The summary row becomes a
   plain header: same three-column rhythm, no click affordance and no plus. */
.pro .pacc--open .pacc-hd{display:grid;grid-template-columns:1fr auto auto;
  gap:clamp(12px,2vw,28px);align-items:center;
  padding:16px clamp(16px,2vw,22px) 2px}
.pro .pacc--open .pacc-hd .pnm{font-size:16px}
.pro .pacc--open .pans-grid{padding-top:10px}
/* The three group labels - mandatory, core, optional - are the only way to tell
   where one list of competencies ends and the next begins, so they carry the
   weight of a heading rather than an eyebrow. 800 is the heaviest weight the
   page loads, and indigo is the one blue in the palette that reads as blue
   rather than as near-black navy (9.2:1 on white). The count beside it stays
   small and muted: it is a note on the label, not part of it. */
.pro .pacc-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin:clamp(34px,3.8vw,52px) 0 0;
  font:800 clamp(21px,2.3vw,27px)/1.25 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.02em;text-transform:uppercase;color:var(--indigo)}
.pro .pacc-group span{font-weight:600;font-size:11.5px;letter-spacing:.06em;
  text-transform:none;color:var(--muted)}
.pro .pacc-group+.pacc{margin-top:16px}
@media (max-width:760px){
  .pro .pacc .pans-grid{grid-template-columns:1fr}
  .pro .pacc .plvlcard{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
  .pro .pacc .plvlcard .pans-lbl{width:100%}
  .pro .pacc .plvlcard-d{margin:0}
  .pro .pacc .plvlcard-h{width:100%}
}
@keyframes accIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pro .pnote{margin-top:16px;font-size:13.5px;color:var(--muted);font-style:italic}
.pro .palt{color:var(--accent-dk);text-decoration:none;cursor:help;font-weight:700}
@media (max-width:620px){
  .pro .pacc summary,.pro .pacc--open .pacc-hd{grid-template-columns:1fr auto;row-gap:8px}
  .pro .pacc .plvl{grid-column:1}
}

/* ---------- mentors -------------------------------------------------------- */
/* The two mentors sit side by side so they read as a pair. The bios are not
   the same length, so the cards borrow the parent's rows through subgrid:
   portrait, name, roles box and each chip group then start on the same line
   across both, whatever the text above them does. Twelve rows, one per child.
   Without subgrid the cards simply stack their own content and only the
   portraits align, which is the old behaviour rather than a broken one. */
.pro .pmentors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,3.4vw,52px);align-items:start}
@supports (grid-template-rows:subgrid){
  .pro .pmentors{grid-template-rows:repeat(14,auto);align-items:stretch}
  .pro .pmentors>.pmentor{display:grid;grid-template-rows:subgrid;grid-row:span 14}
}
@media (max-width:900px){
  .pro .pmentors{grid-template-columns:1fr;gap:clamp(40px,7vw,56px)}
  .pro .pmentors .pmentor+.pmentor{padding-top:clamp(36px,6vw,48px);
    border-top:1px solid var(--bd)}
  /* one column: each card owns its own flow again */
  .pro .pmentors,.pro .pmentors>.pmentor{grid-template-rows:none}
  .pro .pmentors>.pmentor{display:block;grid-row:auto}
}
.pro .pmentor h2{margin-top:10px;font-size:clamp(1.5rem,2.4vw,2rem)}
.pro .pmentor .label{margin-top:20px}
.pro .pmentor .prole{margin-top:6px;font-size:14.5px;color:var(--body-c)}
.pro .pmentor .pbio{margin-top:16px;font-size:14.5px;line-height:1.65}
.pro .pportrait{position:relative;border-radius:var(--rad);overflow:hidden;aspect-ratio:4/5;
  background:var(--sky);box-shadow:0 24px 54px -32px rgba(15,42,85,.7)}
.pro .pportrait img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
.pro .pportrait:hover img{transform:scale(1.04)}
.pro .pcreds{margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-dk)}
.pro .prole-box{margin-top:24px;border:1px solid var(--bd);border-radius:var(--rad);
  padding:20px 22px;background:linear-gradient(140deg,var(--alt),#fff)}
.pro .prole-box .r{margin-top:9px;font-size:16px;font-weight:600;color:var(--head);
  display:flex;gap:10px;align-items:flex-start}
.pro .prole-box .r svg{color:var(--accent-dk);flex:0 0 auto;margin-top:3px}
.pro .pchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;
  align-content:flex-start;align-items:flex-start}
.pro .pchip{border-radius:999px;padding:7px 14px;font-size:13.5px;background:var(--sky);
  color:var(--head);transition:background .22s,color .22s,transform .22s}
.pro .pchip:hover{background:linear-gradient(135deg,var(--accent-lt),var(--accent));
  color:#1B1503;transform:translateY(-2px)}
.pro .pminilabel{margin-top:24px;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}

/* Qualifications carry three parts - award, awarding university, overall grade -
   which is far too much text for a .pchip pill, so they get their own stacked
   list instead of the chip row every other mentor attribute uses. */
.pro .pquals{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;
  align-content:flex-start}
.pro .pqual{border:1px solid var(--bd);border-radius:var(--rad);padding:12px 14px;
  background:linear-gradient(140deg,var(--alt),#fff)}
.pro .pq-award{display:block;font-size:14px;font-weight:600;color:var(--head);line-height:1.45}
.pro .pq-meta{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.pro .pq-inst{font-size:13.5px;color:var(--body-c)}
.pro .pq-grade{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;background:var(--sky);color:var(--accent-dk)}
/* A course still being read has no grade yet, so it must not be styled like one. */
.pro .pq-grade.is-progress{background:transparent;border:1px dashed var(--bd);color:var(--muted)}

/* ---------- pricing -------------------------------------------------------- */
.pro .pplans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2vw,26px);margin-top:clamp(30px,4vw,46px);align-items:stretch}
@media (max-width:820px){.pro .pplans{grid-template-columns:1fr}}
.pro .pplan{position:relative;border:1px solid var(--bd);border-radius:var(--rad);background:#fff;
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .25s}
.pro .pplan:hover{transform:translateY(-4px);box-shadow:0 22px 48px -28px rgba(15,42,85,.5)}
.pro .pplan--featured{border-color:rgba(200,154,42,.55);
  box-shadow:0 22px 54px -30px rgba(200,154,42,.65)}
.pro .pplan--featured::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--accent-lt),var(--accent))}
.pro .ptag{position:absolute;top:18px;right:18px;border-radius:999px;padding:6px 13px;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--accent-lt),var(--accent));color:#1B1503}
.pro .pplan h3{font-size:21px}
.pro .pcur{margin-top:22px;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.pro .pprice{font-size:clamp(40px,5.4vw,58px);font-weight:700;letter-spacing:-.03em;
  color:var(--head);line-height:1;margin-top:8px}
.pro .pterms{margin-top:10px;font-size:14.5px;color:var(--muted)}
.pro .pplan ul{margin-top:24px;flex:1}
.pro .pplan ul li{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--bd);
  font-size:15px;color:var(--ink);line-height:1.5}
.pro .pplan ul li svg{color:var(--accent-dk);flex:0 0 auto;margin-top:3px}
.pro .pplan .btn{margin-top:26px;align-self:flex-start}

/* ---------- joining roadmap --------------------------------------------------
   A horizontal run of numbered stops joined by a rail. The rail is drawn per
   step, from the right edge of its own node across the grid gap to the next
   one, so it never has to guess where the first and last nodes sit. Under
   760px the run turns vertical and the same connector becomes the drop
   between one stop and the next.
   -------------------------------------------------------------------------- */
.pro .proad{--node:46px;--rgap:clamp(20px,2.6vw,40px);
  list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--rgap)}
.pro .proad li{position:relative}
.pro .proad li:not(:last-child)::before{content:"";position:absolute;z-index:0;
  left:var(--node);right:calc(var(--rgap) * -1);top:calc(var(--node) / 2 - 1px);height:2px;
  background:linear-gradient(90deg,var(--accent),var(--sky-2))}
.pro .proad-node{position:relative;z-index:1;
  width:var(--node);height:var(--node);border-radius:50%;
  display:grid;place-items:center;background:#fff;border:2px solid var(--accent);
  font-family:Anton,sans-serif;font-weight:400;font-size:16px;letter-spacing:.02em;
  color:var(--head);transition:background .28s ease,color .28s ease}
.pro .proad li:hover .proad-node{color:#1B1503;
  background:linear-gradient(135deg,var(--accent-lt),var(--accent))}
.pro .proad h3{margin-top:18px;font-size:17.5px}
.pro .proad p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--body-c)}
@media (max-width:760px){
  .pro .proad{grid-template-columns:1fr;gap:0}
  .pro .proad li{display:grid;grid-template-columns:var(--node) minmax(0,1fr);
    column-gap:16px;padding-bottom:clamp(22px,4vw,30px)}
  .pro .proad li:not(:last-child)::before{left:calc(var(--node) / 2 - 1px);right:auto;
    top:var(--node);bottom:0;width:2px;height:auto;
    background:linear-gradient(180deg,var(--accent),var(--sky-2))}
  .pro .proad-node{grid-column:1;grid-row:1 / span 2}
  .pro .proad h3{grid-column:2;grid-row:1;margin-top:0;align-self:center}
  .pro .proad p{grid-column:2;grid-row:2;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .pro .proad li:hover .proad-node{background:#fff;color:var(--head)}
}

/* ==========================================================================
   register.html - form, stepper and confirmation
   ========================================================================== */
.pro .pform-wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:clamp(20px,2.5vw,32px);align-items:start;margin-top:clamp(26px,3vw,40px)}
@media (max-width:940px){.pro .pform-wrap{grid-template-columns:1fr}}
.pro .pbox{background:#fff;border:1px solid var(--bd);border-radius:var(--rad);
  padding:clamp(24px,3vw,38px);box-shadow:0 16px 40px -32px rgba(15,42,85,.55)}

/* stepper - full width above the form so four steps never wrap, and a
   connector that fills as you progress. Below 640px only the current step
   keeps its label, so the row still fits on one line. */
.pro .pwiz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:#fff;border:1px solid var(--bd);border-radius:var(--rad);
  padding:20px clamp(8px,1.5vw,16px);box-shadow:0 14px 36px -32px rgba(15,42,85,.55)}
.pro .pwiz li{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;font-size:13px;line-height:1.35;color:var(--muted);padding-inline:4px}
.pro .pwiz li::before{content:"";position:absolute;top:16px;right:50%;left:-50%;height:2px;
  background:var(--bd);z-index:0}
.pro .pwiz li:first-child::before{display:none}
.pro .pwiz li[data-state="done"]::before,.pro .pwiz li[aria-current="step"]::before{
  background:linear-gradient(90deg,var(--accent-lt),var(--accent))}
.pro .pwiz .n{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:13.5px;font-weight:700;
  background:var(--sky);color:var(--muted);border:2px solid #fff}
.pro .pwiz li[aria-current="step"]{color:var(--head);font-weight:600}
.pro .pwiz li[aria-current="step"] .n{color:#1B1503;
  background:linear-gradient(135deg,var(--accent-lt),var(--accent));
  box-shadow:0 0 0 4px rgba(200,154,42,.16)}
.pro .pwiz li[data-state="done"] .n{background:var(--accent-dk);color:#fff}
@media (max-width:640px){
  .pro .pwiz{padding:16px 10px}
  .pro .pwiz li:not([aria-current="step"]) .t{display:none}
  .pro .pwiz li{gap:6px}
}

/* form sections */
.pro .pfs{border:0;margin:0;padding:0}
.pro .pfs+.pfs{margin-top:clamp(26px,3vw,36px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--bd)}
.pro .pfs>legend{padding:0;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-dk)}
.pro .pfs>legend+p{margin-top:6px;font-size:14px;color:var(--muted)}

/* The honeypot. Off-canvas rather than display:none or hidden, both of which
   a bot can cheaply test for and skip; this one is in the layout, focusable
   only by something ignoring tabindex, and invisible to a person. */
.pro .pgotcha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* submission notices - the confirmation, and the throttle message */
.pro .pnote{margin-bottom:22px;padding:16px 18px;border-radius:10px;border:1px solid}
.pro .pnote h3{font-size:16px;margin:0 0 4px}
.pro .pnote p{margin:0;font-size:14.5px;line-height:1.55}
.pro .pnote--ok{background:#E9F6EE;border-color:#BFE3CC;color:#14532D}
.pro .pnote--ok h3{color:#14532D}
.pro .pnote--ok strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.pro .pnote--warn{background:#FDF4E3;border-color:#EFD9A8;color:#7A4E00}

/* error summary */
.pro .perrsum{margin-top:20px;padding:16px 18px;border-radius:10px;background:#FDECEA;
  border:1px solid #F3C4BF}
.pro .perrsum p{color:#8C1D18;font-weight:600;font-size:14.5px;margin:0}
.pro .perrsum ul{margin-top:9px;display:grid;gap:5px}
.pro .perrsum a{color:#8C1D18;font-size:14px;text-decoration:underline}
.pro .perrsum a:hover{color:#651310}

/* phone preview + reassurance */
.pro .ppreview{margin-top:7px;font-size:13px;color:var(--muted)}
.pro .ppreview b{color:var(--head);font-weight:600}
.pro .psafe{display:flex;gap:9px;align-items:flex-start;margin-top:18px;font-size:13px;
  color:var(--muted);line-height:1.55}
.pro .psafe svg{color:var(--accent-dk);flex:0 0 auto;margin-top:2px}
.pro .psaved{margin-top:12px;font-size:12.5px;color:var(--muted);display:none}
.pro .psaved[data-on]{display:block}

/* fields */
.pro .pfield{margin-top:22px}
.pro .pfield>label,.pro .pgroup>legend{display:block;font-size:14px;font-weight:600;
  color:var(--head);margin-bottom:7px;padding:0}
.pro .req{color:var(--accent-dk)}
.pro .phelp{margin-top:7px;font-size:13px;color:var(--muted);line-height:1.55}
.pro .perr{margin-top:7px;font-size:13px;color:#B3261E;font-weight:500}
.pro .pfield input,.pro .pfield select,.pro .pfield textarea{width:100%;border:1px solid var(--bd-str);border-radius:9px;
  padding:12px 14px;font-size:15px;background:#fff;color:var(--ink);font-family:var(--body);
  transition:border-color .2s,box-shadow .2s}
.pro .pfield input::placeholder,.pro .pfield textarea::placeholder{color:#9AA8BE}
/* The receipt upload. A file input cannot be styled past its button, so the
   field is given room to breathe and the button is dressed to match the
   secondary buttons rather than left as the browser's default grey slab. */
.pro .pfield input[type=file]{padding:11px 13px;font-size:14.5px;cursor:pointer;
  background:var(--alt)}
.pro .pfield input[type=file]::file-selector-button{margin-right:13px;padding:9px 15px;
  border:1px solid var(--bd-str);border-radius:7px;background:#fff;color:var(--head);
  font:600 14px var(--body);cursor:pointer;transition:border-color .2s,background .2s}
.pro .pfield input[type=file]::file-selector-button:hover{border-color:var(--accent);
  background:var(--cream)}
.pro .pfield input:focus,.pro .pfield select:focus,.pro .pfield textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(200,154,42,.2)}
.pro .pfield[data-invalid] input,.pro .pfield[data-invalid] select,.pro .pfield[data-invalid] textarea{border-color:#B3261E}
.pro .pfield[data-invalid] input:focus{box-shadow:0 0 0 3px rgba(179,38,30,.16)}
.pro .pfield textarea{resize:vertical;min-height:120px;line-height:1.6}
.pro .pphone{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px}
.pro .pdial{background:var(--alt);color:var(--head);font-weight:600;text-align:center}

/* programme choice */
.pro .pgroup{border:0;margin:22px 0 0;padding:0}
.pro .popts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:600px){.pro .popts{grid-template-columns:1fr}}
.pro .popt{position:relative;border:2px solid var(--bd);border-radius:12px;padding:16px 18px;
  background:#fff;text-align:left;cursor:pointer;font-family:var(--body);
  transition:border-color .2s,background .2s,transform .2s}
.pro .popt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--bd-str)}
.pro .popt[aria-pressed="true"]{border-color:var(--accent);background:rgba(200,154,42,.07)}
.pro .popt:disabled{opacity:.55;cursor:not-allowed}
.pro .popt .t{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.pro .popt .v{display:block;margin-top:5px;font-size:16px;font-weight:600;color:var(--head)}
.pro .popt .s{display:block;margin-top:4px;font-size:13.5px;color:var(--body-c)}

/* consent + submit */
.pro .pconsent{display:flex;gap:11px;align-items:flex-start;margin-top:26px;font-size:14px;
  line-height:1.6;color:var(--body-c)}
.pro .pconsent input{width:18px;height:18px;flex:0 0 auto;margin-top:3px;accent-color:var(--navy)}
.pro .pform .btn{margin-top:24px;width:100%;justify-content:center}
.pro .pformerr{margin-top:16px;padding:12px 14px;border-radius:9px;background:#FDECEA;
  color:#8C1D18;font-size:14px;font-weight:500}

/* aside */
.pro .paside{display:grid;gap:clamp(14px,1.6vw,18px)}
.pro .paside .pbox{padding:clamp(20px,2.2vw,26px)}
/* All three WhatsApp numbers, one per row, country label kept to a fixed
   column so the numbers line up. */
.pro .pwa{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.pro .pwa li{display:flex;align-items:baseline;gap:10px;font-size:14.5px}
.pro .pwa span{flex:0 0 42px;font:600 11px/1.5 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.pro .paside h3{font-size:16px}
.pro .paside ol{margin-top:14px;display:grid;gap:12px;counter-reset:s}
.pro .paside ol li{display:flex;gap:11px;font-size:14px;color:var(--body-c);line-height:1.55}
.pro .paside ol li::before{counter-increment:s;content:counter(s);width:22px;height:22px;
  border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:11.5px;font-weight:700;
  background:var(--sky);color:var(--indigo)}
.pro .paside .k{display:flex;gap:10px;font-size:14px;padding:9px 0;border-top:1px solid var(--bd)}
.pro .paside .k:first-of-type{border-top:0}
.pro .paside .k svg{color:var(--accent-dk);flex:0 0 auto;margin-top:3px}

/* confirmation */
.pro .pdone{text-align:center;padding:clamp(28px,4vw,52px)}
.pro .pdone .tick{width:64px;height:64px;border-radius:50%;margin:0 auto;display:grid;
  place-items:center;color:#1B1503;
  background:linear-gradient(135deg,var(--accent-lt),var(--accent));
  box-shadow:0 14px 32px -14px rgba(200,154,42,.9)}
.pro .pdone h2{margin-top:20px}
.pro .pdone p{margin-top:12px;max-width:52ch;margin-inline:auto}
.pro .pdone .btns{justify-content:center}
.pro .psummary{margin-top:26px;text-align:left;border:1px solid var(--bd);border-radius:var(--rad);
  background:var(--alt);padding:20px 22px;display:grid;gap:10px}
.pro .psummary div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;font-size:14.5px}
@media (max-width:560px){.pro .psummary div{grid-template-columns:1fr;gap:2px}}
.pro .psummary dt{color:var(--muted);font-weight:600}
.pro .psummary dd{margin:0;color:var(--ink)}

/* ==========================================================================
   register.html - compact hero, wizard steps, agreement document
   ========================================================================== */
/* a form page does not need a full-height hero */
.pro .phead--slim{padding-top:calc(76px + clamp(20px,2.6vw,34px));
  padding-bottom:clamp(22px,2.8vw,36px);min-height:0}
/* The full-height .phead clears the card on its own padding alone; the slim one
   did not. Its clamp bottomed out at 22px against a 30px pull, so the card sat
   8px into the lead at 560px and under. Reserving the pull plus a gap of its
   own keeps the card clear at every width. Only the hero that actually carries
   a card pays for it, so faq, register and resources keep the tighter slim
   spacing they were given. */
.pro .phead--slim:has(+ .facts-wrap){padding-bottom:calc(var(--facts-pull) + clamp(18px,2.4vw,26px))}
.pro .phead--slim h1{font-size:clamp(25px,2.9vw,34px);margin-top:10px}
.pro .phead--slim .badge{margin-bottom:12px}
.pro .phead--slim .lead{margin-top:10px;font-size:15.5px;max-width:70ch}
.pro .phead--slim .orb{opacity:.7}

/* step panels */
.pro .pstep[hidden]{display:none}
.pro .pstep h2{font-size:23px}
.pro .pstep>p.sub{margin-top:8px;font-size:14.5px;color:var(--muted)}

/* country combobox */
.pro .pcombo{position:relative}
.pro .pcombo input{padding-left:42px}
.pro .pcombo .flag{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:18px;line-height:1;pointer-events:none}
.pro .plist{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);max-height:250px;
  overflow:auto;background:#fff;border:1px solid var(--bd-str);border-radius:10px;
  box-shadow:0 18px 40px -18px rgba(15,42,85,.45);display:none}
.pro .plist[data-open]{display:block}
.pro .plist button{display:flex;width:100%;align-items:center;gap:10px;padding:10px 14px;
  background:none;border:0;text-align:left;cursor:pointer;font-size:15px;color:var(--head);
  font-family:var(--body)}
.pro .plist button:hover,.pro .plist button[data-active]{background:var(--sky)}
.pro .plist .iso{margin-left:auto;font-size:12px;color:var(--muted);letter-spacing:.04em}
.pro .plist .none{padding:12px 14px;font-size:14px;color:var(--muted)}
.pro .pdial-flag{display:flex;align-items:center;justify-content:center;gap:6px}

/* legal document box */
.pro .pdoc{margin-top:18px;border:1px solid var(--bd);border-radius:var(--rad);
  background:var(--alt);padding:clamp(18px,2vw,26px);max-height:340px;overflow-y:auto}
.pro .pdoc h3{font-size:16px}
.pro .pdoc .ver{margin-top:4px;font-size:13px;color:var(--muted)}
.pro .pdoc p{margin-top:12px;font-size:14.5px;line-height:1.65}
.pro .pdoc .end{margin-top:16px;text-align:center;font-size:13px;color:var(--muted)}
.pro .pdraft{margin-top:12px;padding:11px 14px;border-radius:9px;background:#FFF8E6;
  border:1px solid #F0DFAF;font-size:13.5px;color:#6B5310}

/* agreement summary grid */
.pro .pagree{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--bd);border:1px solid var(--bd);border-radius:var(--rad);
  overflow:hidden;margin-top:18px}
@media (max-width:560px){.pro .pagree{grid-template-columns:1fr}}
.pro .pagree div{background:#fff;padding:14px 16px}
/* An odd number of rows would otherwise leave the last cell beside a bare
   patch of the grid's own background, which reads as a missing field. */
.pro .pagree div:last-child:nth-child(odd){grid-column:1/-1}
.pro .pagree dt{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.pro .pagree dd{margin:5px 0 0;font-size:15.5px;font-weight:600;color:var(--head)}

/* signature */
.pro .psign input{font-size:19px;font-family:Georgia,'Times New Roman',serif;font-style:italic;
  letter-spacing:.01em}

/* wizard nav */
.pro .pnav{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pro .pnav .btn{flex:1 1 auto;justify-content:center}
.pro .pnav .btn-secondary{flex:0 0 auto}
.pro .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* confirmation refs */
.pro .prefs{display:grid;gap:1px;background:var(--bd);border:1px solid var(--bd);
  border-radius:var(--rad);overflow:hidden;margin-top:22px;text-align:left}
.pro .prefs div{background:#fff;padding:14px 18px;display:grid;
  grid-template-columns:190px minmax(0,1fr);gap:12px;align-items:center}
@media (max-width:560px){.pro .prefs div{grid-template-columns:1fr;gap:3px}}
.pro .prefs dt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.pro .prefs dd{margin:0;font-size:15px;font-weight:600;color:var(--head);
  font-variant-numeric:tabular-nums;word-break:break-all}
.pro .ppay{margin-top:22px;text-align:left;border:1px solid #F0DFAF;background:#FFF8E6;
  border-radius:var(--rad);padding:20px 22px}
.pro .ppay h3{font-size:15.5px;color:#6B5310}
.pro .ppay ul{margin-top:12px;display:grid;gap:8px}
.pro .ppay li{display:flex;gap:10px;font-size:14px;color:#6B5310;line-height:1.55}
.pro .ppay li::before{content:"";width:5px;height:5px;border-radius:50%;background:#B98D24;
  flex:0 0 auto;margin-top:8px}

/* ---------- gallery + lightbox ---------------------------------------------
   Mosaic tiles on the resources page. The tiles are buttons because they open
   the lightbox; with JS off they still render as a plain photo grid. */
.pro .gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);margin-top:clamp(30px,4vw,46px)}
.pro .gal-item{position:relative;display:block;padding:0;overflow:hidden;
  aspect-ratio:4/3;background:var(--sky);border:1px solid var(--bd);
  border-radius:var(--rad);cursor:zoom-in;text-align:left;
  transition:transform .3s ease,border-color .25s,box-shadow .3s ease}
.pro .gal-item--wide{grid-column:span 2;grid-row:span 2}
.pro .gal-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pro .gal-item:hover{border-color:var(--bd-str);
  box-shadow:0 20px 44px -26px rgba(15,42,85,.5)}
.pro .gal-item:hover img,.pro .gal-item:focus-visible img{transform:scale(1.06)}
.pro .gal-cap{position:absolute;inset:auto 0 0 0;padding:32px 16px 14px;
  font-size:13.5px;line-height:1.45;font-weight:600;color:#fff;
  background:linear-gradient(180deg,rgba(7,31,69,0) 0%,rgba(7,31,69,.78) 65%);
  transition:background .3s}
.pro .gal-item:hover .gal-cap{background:linear-gradient(180deg,rgba(7,31,69,.1) 0%,rgba(7,31,69,.88) 65%)}
.pro .gal-item .zoom{position:absolute;top:12px;right:12px;width:34px;height:34px;
  border-radius:50%;display:grid;place-items:center;color:var(--navy-deep);
  background:rgba(255,255,255,.9);opacity:0;transform:scale(.85);
  transition:opacity .25s,transform .25s}
.pro .gal-item:hover .zoom,.pro .gal-item:focus-visible .zoom{opacity:1;transform:none}
/* two columns leave the sixth tile alone on its own row, so it spans the
   width the same way the feature tile does - the grid closes cleanly */
@media (max-width:980px){
  .pro .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pro .gal-item--wide,.pro .gal-item:last-child{grid-column:span 2;grid-row:span 1;
    aspect-ratio:16/9}
}
@media (max-width:560px){
  .pro .gal{grid-template-columns:1fr}
  .pro .gal-item--wide,.pro .gal-item:last-child{grid-column:span 1;aspect-ratio:4/3}
}

.lbox{position:fixed;inset:0;z-index:320;display:none;
  background:rgba(6,28,63,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  place-items:center;padding:clamp(16px,3vw,40px)}
.lbox[data-open]{display:grid;animation:fade .25s ease both}
.lbox-fig{margin:0;width:min(100%,1100px);display:grid;justify-items:center;
  animation:pop .35s cubic-bezier(.16,1,.3,1) both}
.lbox-fig img{max-width:100%;max-height:74vh;width:auto;height:auto;display:block;
  border:1px solid rgba(200,154,42,.45);background:#071F45}
.lbox-fig figcaption{margin-top:16px;color:#E2ECFA;font-size:15px;line-height:1.55;
  text-align:center;max-width:60ch}
.lbox-count{display:block;margin-top:8px;font:600 11px/1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:#C89A2A;text-align:center}
.lbox-btn{position:absolute;width:48px;height:48px;display:grid;place-items:center;
  background:rgba(250,250,248,.1);border:1px solid rgba(250,250,248,.3);color:#FAFAF8;
  cursor:pointer;transition:background .25s,border-color .25s}
.lbox-btn:hover{background:rgba(200,154,42,.22);border-color:#C89A2A}
.lbox-prev{left:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%)}
.lbox-next{right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%)}
.lbox-x{top:clamp(10px,2vw,24px);right:clamp(10px,2vw,28px)}
@media (max-width:560px){
  .lbox-prev,.lbox-next{top:auto;bottom:14px;transform:none}
  .lbox-fig img{max-height:62vh}
}
@media (prefers-reduced-motion:reduce){
  .pro .gal-item img,.pro .gal-item .zoom{transition:none}
  .pro .gal-item:hover img,.pro .gal-item:focus-visible img{transform:none}
  .lbox[data-open],.lbox-fig{animation:none}
}

/* ---------- service comparison matrix -------------------------------------
   Nine columns will not fit a phone, so the table keeps its natural width and
   the wrapper scrolls sideways with the service-item column pinned to the left.
   Tick / cross / dash are drawn by ::before; the word in each cell is the
   accessible name and is hidden visually, so a row stays one line of markup.
   -------------------------------------------------------------------------- */
.pro .pmx-wrap{margin-top:clamp(26px,3.2vw,40px);overflow-x:auto;
  border:1px solid var(--bd);border-radius:var(--rad);background:#fff;
  -webkit-overflow-scrolling:touch}
.pro .pmx{border-collapse:separate;border-spacing:0;width:100%;min-width:1060px;
  table-layout:fixed;
  font-size:13.5px;line-height:1.4;text-align:center;color:var(--ink)}
/* Auto layout sized each service column to its own text, so Premium came out
   half again as wide as CPD. Fixed layout with the item column pinned lets the
   eight service columns share what is left in equal parts. */
.pro .pmx col.pmx-c-item{width:250px}
.pro .pmx th,.pro .pmx td{padding:11px 14px;border-right:1px solid var(--bd);
  border-bottom:1px solid var(--bd);vertical-align:middle;font-weight:400;
  overflow-wrap:break-word;hyphens:auto}
/* Equal columns are narrower than the widest service used to be, so the service
   cells give the gutters back to the text; the pinned item column keeps its own. */
.pro .pmx td,.pro .pmx .pmx-col th{padding-inline:10px}
.pro .pmx tr>*:last-child{border-right:0}
.pro .pmx tbody tr:last-child>*{border-bottom:0}

/* the pinned service-item column */
.pro .pmx th[scope="row"],.pro .pmx .pmx-corner{position:sticky;left:0;z-index:2;
  text-align:left;min-width:250px;background:#fff;font-weight:600;color:var(--head)}
.pro .pmx .pmx-corner{background:var(--navy-deep);color:#FAFAF8;font-size:14px}
.pro .pmx tbody tr:nth-child(odd):not(.pmx-meta) th[scope="row"]{background:var(--alt)}

/* group bar + column headings */
.pro .pmx .pmx-grp th{background:var(--navy);color:#FAFAF8;font-weight:700;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:10px 14px}
.pro .pmx .pmx-grp th.pmx-grp-b{background:var(--accent);color:#231A02}
.pro .pmx .pmx-col th{background:#fff;font-weight:700;color:var(--head);font-size:13.5px}
.pro .pmx .pmx-col th b{display:block;font-size:14.5px}
.pro .pmx .pmx-col th em{display:block;margin-top:3px;font-style:normal;font-weight:600;
  font-size:11.5px;color:var(--body-c)}
.pro .pmx .pmx-col th em.pmx-on{color:#1B7F45}
.pro .pmx .pmx-col th em.pmx-off{color:#B23B3B}
.pro .pmx .pmx-col th em.pmx-soon{color:var(--accent-dk)}

/* the four summary rows sit on navy, as on the source sheet */
.pro .pmx .pmx-meta>*{background:var(--navy);color:#FAFAF8;border-right-color:rgba(250,250,248,.16);
  border-bottom-color:rgba(250,250,248,.16)}
.pro .pmx .pmx-meta th[scope="row"]{background:var(--navy-deep);color:#FAFAF8;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.pro .pmx .pmx-meta td{font-weight:600}
.pro .pmx tbody tr:nth-child(odd):not(.pmx-meta) td{background:var(--alt)}

/* marks - the visible glyph is decoration, the span carries the meaning */
.pro .pmx td>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pro .pmx td.pmx-y::before,.pro .pmx td.pmx-n::before{display:inline-grid;place-items:center;
  width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:700;line-height:1}
.pro .pmx td.pmx-y::before{content:"\2713";background:#E4F4EA;color:#1B7F45}
.pro .pmx td.pmx-n::before{content:"\2715";background:#FBEAEA;color:#B23B3B}
.pro .pmx td.pmx-na::before{content:"\2013";color:var(--muted);font-weight:600}
.pro .pmx .pmx-meta td.pmx-na::before{color:#8FA2BE}

/* draft state - drop .pmx-draft and the ribbon once the sheet is signed off */
.pro .pmx-draft{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  padding:9px 15px;border:1px dashed var(--accent);border-radius:999px;
  background:var(--cream);color:var(--accent-dk);
  font:600 12px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pro .pmx-hint{margin-top:12px;font-size:13px;color:var(--muted);font-style:italic}
/* Fixed layout takes its width from the column, not the cell, so the small-screen
   narrowing has to be set there - at 250px the pinned column swallowed a 320px
   phone and left 29px of the table to scroll through. */
@media (max-width:860px){.pro .pmx col.pmx-c-item{width:200px}
  .pro .pmx th[scope="row"],.pro .pmx .pmx-corner{min-width:200px}}
/* On a 320px phone a 200px pinned column leaves 80px of track for a 108px
   column, so no service could ever clear it. 170px buys the extra 30px. */
@media (max-width:460px){.pro .pmx col.pmx-c-item{width:170px}
  .pro .pmx th[scope="row"],.pro .pmx .pmx-corner{min-width:170px}}


/* ---------- intake schedule ------------------------------------------------
   45 dated rows, so no zebra striping: the two tinted row types (time off, and
   the RICS milestones that are not APC EM sessions) have to read unambiguously,
   and an alternating band competes with them. Row rules carry the grid instead.
   The date column pins on scroll, the same technique .pmx uses for its row
   headers, so a row stays identifiable once the table is scrolled sideways.
   -------------------------------------------------------------------------- */
.pro .psch-wrap{margin-top:clamp(26px,3.2vw,40px);overflow-x:auto;
  border:1px solid var(--bd);border-radius:var(--rad);background:#fff;
  -webkit-overflow-scrolling:touch}
.pro .psch-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pro .psch{border-collapse:separate;border-spacing:0;width:100%;min-width:700px;
  font-size:13.5px;line-height:1.45;text-align:left;color:var(--ink)}
.pro .psch caption{caption-side:top;text-align:left;padding:14px 16px;
  border-bottom:1px solid var(--bd);font-size:13px;color:var(--muted);font-style:italic}
.pro .psch th,.pro .psch td{padding:10px 16px;border-bottom:1px solid var(--bd);
  vertical-align:top;font-weight:400}
.pro .psch tbody tr:last-child>*{border-bottom:0}
.pro .psch thead th{background:var(--navy);color:#FAFAF8;padding-block:12px;
  font:700 11.5px/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:.12em;
  text-transform:uppercase}
/* Hours sat hard against the right edge with a hand's width of empty table
   between it and the session name, because the session column was absorbing
   all the table's slack. Giving the slack to the hours column instead, and
   aligning it left, closes the gap: session sizes to its longest entry and
   the number follows straight after it. */
.pro .psch .psch-h{text-align:left;width:100%;padding-left:30px;color:var(--body-c)}
/* ...and the session column has to hold its full width or the hours column,
   now greedy, squeezes it down to min-content and wraps every long name over
   three lines. The wrapper already scrolls sideways below 700px. */
.pro .psch th:nth-child(3),.pro .psch td:nth-child(3){white-space:nowrap}
/* date and session type centred in their columns, header and body together */
.pro .psch th:nth-child(-n+2),.pro .psch td:nth-child(-n+2){text-align:center}
.pro .psch thead .psch-h{color:#FAFAF8}
/* pinned date column - needs its own opaque background per row type, below */
.pro .psch .psch-d{position:sticky;left:0;z-index:1;white-space:nowrap;
  font-weight:600;color:var(--head);background:#fff}

/* the two tinted row types from the source sheet. These follow .psch-d so that
   at equal specificity they win, and the pinned cell picks up the row tint. */
.pro .psch .psch-off>*{background:var(--sky);color:var(--body-c);font-style:italic}
.pro .psch .psch-ms>*{background:#4B1E78;color:#fff;font-weight:600}

/* session-type badge */
.pro .psch .pst{display:inline-block;white-space:nowrap;border-radius:999px;
  padding:3px 10px;font-size:11.5px;font-weight:600;letter-spacing:.03em}
.pro .psch .pst-ws{background:#F6E9C8;color:var(--accent-dk)}
.pro .psch .pst-mand{background:var(--sky-2);color:var(--head)}
.pro .psch .pst-core{background:var(--sky);color:var(--head)}
.pro .psch .pst-opt{background:var(--alt);color:var(--body-c);box-shadow:inset 0 0 0 1px var(--bd)}
.pro .psch .pst-oto{background:#E4F4EA;color:#1B7F45}
@media (max-width:560px){.pro .psch th,.pro .psch td{padding:9px 12px}}


/* ---------- onboarding flow ------------------------------------------------
   A single rail down the left with a numbered node per step and the detail
   beside it. One column at every width - the node column and the rail position
   are driven off one --node value, so nothing has to be re-laid out on a
   breakpoint. Each step ends with what the candidate actually gets from it.
   -------------------------------------------------------------------------- */
.pro .pflow{--node:clamp(42px,10vw,54px);
  list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0;position:relative;
  display:grid;gap:clamp(14px,1.8vw,20px)}
/* the rail sits behind the nodes and stops at the centre of the last one */
.pro .pflow::before{content:"";position:absolute;z-index:0;
  left:calc(var(--node) / 2 - 1px);width:2px;
  top:calc(var(--node) / 2);bottom:calc(var(--node) / 2);
  background:linear-gradient(180deg,var(--accent),var(--accent-lt) 45%,var(--sky-2))}

.pro .pflow li{position:relative;display:grid;
  grid-template-columns:var(--node) minmax(0,1fr);
  gap:clamp(12px,1.6vw,20px);align-items:start}

.pro .pflow-node{position:relative;z-index:1;
  width:var(--node);height:var(--node);border-radius:50%;
  display:grid;place-items:center;background:#fff;
  border:2px solid var(--accent);color:var(--head);
  font-family:Anton,sans-serif;font-weight:400;
  font-size:clamp(15px,3.4vw,18px);letter-spacing:.02em;
  transition:background .28s ease,color .28s ease,transform .28s ease}
.pro .pflow li:hover .pflow-node{transform:scale(1.06);color:#1B1503;
  background:linear-gradient(135deg,var(--accent-lt),var(--accent))}

/* Wide enough and the line length runs away, so the outcome moves out into its
   own column beside the text rather than the text simply getting longer. */
.pro .pflow-card{background:#fff;border:1px solid var(--bd);border-radius:var(--rad);
  padding:clamp(17px,2vw,24px) clamp(18px,2.2vw,26px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,290px);
  gap:0 clamp(18px,2.4vw,32px);align-content:start;
  transition:transform .3s ease,box-shadow .3s ease,border-color .25s}
.pro .pflow-card>header,.pro .pflow-card>p:not(.pflow-out){grid-column:1}
.pro .pflow li:hover .pflow-card{transform:translateY(-3px);border-color:var(--bd-str);
  box-shadow:0 18px 40px -28px rgba(15,42,85,.55)}
.pro .pflow-card>header{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:6px 14px}
.pro .pflow-card h3{margin:0;font-size:clamp(16.5px,1.5vw,18.5px)}
/* "Step 01" only shows where the rail numbers are too small to carry it */
.pro .pflow-step{display:none}
.pro .pflow-who{flex:0 0 auto;font:600 10.5px/1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  padding:6px 11px;border-radius:999px;background:var(--sky);color:var(--indigo)}
.pro .pflow-who--us{background:var(--cream);color:var(--accent-dk)}
.pro .pflow-who--both{background:var(--alt);color:var(--body-c)}
.pro .pflow-card>p{margin-top:10px;font-size:14.5px;line-height:1.62;color:var(--body-c)}

.pro .pflow-out{grid-column:2;grid-row:1 / span 2;align-self:stretch;
  display:flex;align-items:flex-start;gap:9px;margin:0;
  padding-left:clamp(18px,2.4vw,32px);border-left:1px dashed var(--bd-str);
  font-size:13.5px;line-height:1.5;font-weight:600;color:var(--accent-dk)}
.pro .pflow-out svg{flex:0 0 auto;margin-top:2px}

@media (max-width:900px){
  .pro .pflow-card{grid-template-columns:minmax(0,1fr)}
  .pro .pflow-out{grid-column:1;grid-row:auto;align-self:auto;
    margin-top:15px;padding:14px 0 0;border-left:0;border-top:1px dashed var(--bd-str)}
}
@media (max-width:560px){
  /* the rail and its numbers get thin at phone widths, so the step number
     moves into the heading and the node becomes a plain marker */
  .pro .pflow{--node:26px;gap:16px}
  .pro .pflow-node{font-size:0;border-width:3px}
  .pro .pflow-step{display:block;font:600 10.5px/1 'Plus Jakarta Sans',sans-serif;
    letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
  .pro .pflow-card>header{flex-direction:column;align-items:flex-start;gap:9px}
}
@media (prefers-reduced-motion:reduce){
  .pro .pflow li:hover .pflow-node,.pro .pflow li:hover .pflow-card{transform:none}
}


/* ---------- classes lifted out of inline styles -----------------------------
   Each of these was a style="" attribute on a page. They are named rather than
   turned into generic spacing utilities so the value stays attached to the
   thing it spaces, and so a change lands in one place instead of eleven.
   -------------------------------------------------------------------------- */

/* a second or third section head inside one <section> */
.pro .sect-head--stacked{margin-top:clamp(44px,6vw,76px)}
/* a head that is only its title: the 22px under the eyebrow has nothing above
   it to space away from, so it would open a hole at the top of the section */
.pro .sect-head--bare h2{margin-top:0}
/* a callout closing a section rather than opening one */
.pro .callout--spaced{margin-top:clamp(40px,5vw,64px)}
/* the qualifier under the resources index */
.pro .pnote--spaced{margin-top:clamp(28px,3.5vw,44px)}

/* register ---------------------------------------------------------------- */
/* the form runs tighter than the standard section rhythm */
.pro .sect--tight{padding-block:clamp(26px,3vw,44px)}
/* a .pgroup labelled by a <p>, where a <legend> would not have been valid */
.pro .pgroup-label{font-size:14px;font-weight:600;color:var(--head);margin-bottom:7px}
/* consent checkboxes: the label is body copy, not a field label, and .pconsent
   already carries its size and colour */
.pro .pconsent label{font-weight:400;margin:0}
/* the Service Agreement is read in full, so it is not clipped like other docs */
.pro .pdoc--full{max-height:none}
.pro .btns--center{justify-content:center}
/* the provisional-reference note under the send buttons */
.pro .pfine{margin-top:20px;font-size:13.5px;color:var(--muted)}
/* aside boxes */
.pro .pbox-list{margin-top:14px}
.pro .pbox-intro{margin-top:10px;font-size:14.5px}

/* investment -------------------------------------------------------------- */
.pro .plead{margin-top:14px;font-size:15.5px}
.pro .pterm{margin-top:24px;font-size:14.5px}

/* ==========================================================================
   Events & CPD - flyer tiles

   The flyers are the content here, so each tile leads with the artwork at its
   own A4 proportions and the detail sits beneath it. The image is a button
   rather than a link: it opens the lightbox at full size, which is the only
   way the small print on an A4 flyer is readable on a phone.
   ========================================================================== */
.pro .evts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
           gap:clamp(14px,1.4vw,20px);margin-top:clamp(20px,2.4vw,30px);align-items:stretch}
@media (max-width:1080px){.pro .evts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.pro .evts{grid-template-columns:1fr}}

.pro .evt{position:relative;display:flex;flex-direction:column;background:#fff;
          border:1px solid var(--bd);border-radius:var(--rad);overflow:hidden;
          transition:transform .3s ease,border-color .25s,box-shadow .3s ease}
.pro .evt:hover{transform:translateY(-5px);border-color:var(--bd-str);
                box-shadow:0 20px 44px -26px rgba(15,42,85,.5)}

/* aspect-ratio, not a fixed height: the tile reserves the flyer's own shape
   before the file arrives, so the grid does not reflow as the images load */
.pro .evt-flyer{position:relative;display:block;width:100%;padding:0;border:0;
                border-bottom:1px solid var(--bd);background:var(--sky);
                line-height:0;overflow:hidden;cursor:zoom-in}
.pro .evt-flyer img{width:100%;height:auto;display:block;aspect-ratio:1200/1697;
                    object-fit:cover;object-position:top;
                    transition:transform .5s var(--ease)}
.pro .evt:hover .evt-flyer img{transform:scale(1.035)}

/* Status sits beside the eyebrow rather than over the artwork: these flyers
   carry their own headline in the top corner, and a badge dropped on top of
   it obscured the one line the tile exists to show. */
.pro .evt-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pro .evt-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
               border-radius:999px;padding:4px 10px;font:700 10.5px/1 var(--body);
               letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dk);
               background:#FBF3DF;box-shadow:inset 0 0 0 1px rgba(200,154,42,.35)}
.pro .evt-pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);
                 animation:pulse 2.4s ease-in-out infinite}
.pro .evt-pill--past{color:var(--muted);background:var(--alt);
                     box-shadow:inset 0 0 0 1px var(--bd)}
.pro .evt-pill--past i{background:var(--bd-str);animation:none}

.pro .evt-zoom{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;
               display:grid;place-items:center;border-radius:50%;color:#fff;
               background:rgba(7,31,69,.72);opacity:0;transform:scale(.9);
               transition:opacity .3s,transform .3s}
.pro .evt:hover .evt-zoom,.pro .evt-flyer:focus-visible .evt-zoom{opacity:1;transform:none}

.pro .evt-body{display:flex;flex-direction:column;flex:1 1 auto;
               padding:clamp(15px,1.5vw,20px)}
.pro .evt-body h3{margin-top:6px}

/* the meta rows follow the title; only the call to action is pinned to the
   floor, so the slack in a short tile collects in one place above the button
   rather than opening a hole in the middle of the card */
.pro .evt-meta{margin-top:14px;display:grid;gap:7px}
.pro .evt-meta div{display:flex;align-items:flex-start;gap:10px}
.pro .evt-meta dt{flex:0 0 auto;line-height:0;color:var(--indigo)}
.pro .evt-meta dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink)}

/* the same instant in each country, one tag apiece: a candidate should find
   their own time at a glance rather than read it out of a run-on line */
.pro .evt-when dd{display:flex;flex-wrap:wrap;gap:6px}
.pro .evt-tz{display:inline-flex;align-items:center;gap:7px;
             padding:3px 10px 3px 3px;border-radius:999px;
             background:var(--alt);border:1px solid var(--bd);
             font-size:13.5px;font-variant-numeric:tabular-nums}
.pro .evt-tz b{padding:2px 7px;border-radius:999px;background:#fff;
               border:1px solid var(--bd);font-size:11px;font-weight:700;
               letter-spacing:.05em;color:var(--indigo)}

.pro .evt-spk{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:12px;
              border-top:1px solid var(--bd)}
.pro .evt-spk-imgs{display:flex;flex:0 0 auto}
.pro .evt-spk-imgs img{width:32px;height:32px;border-radius:50%;object-fit:cover;
                       border:2px solid #fff;box-shadow:0 0 0 1px var(--bd)}
.pro .evt-spk-imgs img+img{margin-left:-10px}
.pro .evt-spk p{font-size:13px;line-height:1.4;color:var(--muted)}

.pro .evt-act{margin-top:auto;padding-top:14px}
.pro .evt-act .btn{width:100%;justify-content:center}
.pro .evt-closed{font-size:13.5px;color:var(--muted);font-style:italic}

/* the visible glyph is decoration, the span carries the meaning */
.pro .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
         clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .pro .evt,.pro .evt-flyer img,.pro .evt-zoom{transition:none!important}
  .pro .evt:hover{transform:none}
  .pro .evt:hover .evt-flyer img{transform:none}
  .pro .evt-pill i{animation:none}
}
/* the qualifier under the tiles - the grid gap already separates them, so this
   sits closer than the standalone .pnote--spaced would put it */
.pro .evts+.pnote{margin-top:clamp(16px,1.8vw,24px)}