/* ============================================================
   LUNA LXD · motion.css v4.9.0
   Drawer restyle (shapes, numbered stack), motion hooks for
   motion.js, footer email, and the JS-hide guard for intro copy.
   Loads after luna3.css on every page. Additive only.
   ============================================================ */

/* ---------- Drawer: layout ---------- */
.drawer{display:block;overflow:hidden;background:#0c0c12;padding:0}
.drawer-top{position:absolute;left:0;right:0;top:0;z-index:4;height:var(--drawer-top-h,78px);display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;opacity:0;transform:translateY(-10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.drawer.is-open .drawer-top{opacity:1;transform:none;transition-delay:.05s}
.drawer-brand{display:inline-flex;align-items:center}
.drawer-brand img{height:32px;width:auto;display:block}
.drawer-cta{margin-left:auto;padding:12px 20px!important;font-size:.88rem!important;min-height:44px!important;white-space:nowrap}
.drawer .drawer-x{position:relative;top:auto;right:auto;flex:0 0 46px;width:46px;height:46px;border-radius:10px;background:#12121a;border:1px solid var(--edge);display:grid;place-items:center;z-index:5}
.drawer .drawer-x svg{width:20px;height:20px;stroke:var(--t-hi);stroke-width:2;fill:none;stroke-linecap:round}
.burger line{transform-box:view-box;transform-origin:12px 12px}
.drawer .drawer-x:hover{background:rgba(255,255,255,.14)}
.drawer .drawer-x:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.drawer-in{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:3;width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;text-align:left;display:grid;gap:clamp(2px,1.4vh,12px)}
.drawer-in a{justify-content:flex-start;align-items:baseline;gap:clamp(14px,4.5vw,28px);padding:5px 0;font-size:clamp(2.1rem,9.4vw,4.6rem);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.98;white-space:normal}
.drawer-in a i{color:var(--coral);font-size:.78rem;letter-spacing:.16em;min-width:2.2ch;flex:0 0 auto}
.drawer-in a:hover i,.drawer-in a[aria-current="page"] i{color:var(--coral)}
.drawer-in a:focus-visible{outline:2px solid var(--amber);outline-offset:6px;border-radius:6px}
/* staggered open, immediate close */
.drawer.is-open .drawer-in a:nth-child(1){transition-delay:.08s}
.drawer.is-open .drawer-in a:nth-child(2){transition-delay:.14s}
.drawer.is-open .drawer-in a:nth-child(3){transition-delay:.2s}
.drawer.is-open .drawer-in a:nth-child(4){transition-delay:.26s}
.drawer.is-open .drawer-in a:nth-child(5){transition-delay:.32s}
.drawer.is-open .drawer-in a:nth-child(6){transition-delay:.38s}

.drawer-contact{position:absolute;left:0;right:0;bottom:clamp(16px,3.5vh,32px);z-index:3;text-shadow:0 0 3px #0c0c12,0 1px 10px #0c0c12;width:auto;margin:0 0 0 max(var(--gut),calc((100% - var(--wrap)) / 2));display:inline-block;padding:6px 10px;border-radius:8px;background:rgba(12,12,18,.72);backdrop-filter:blur(4px);width:min(var(--wrap),100% - var(--gut)*2);margin:0 auto;text-align:left;opacity:0;transition:opacity .5s var(--ease) .45s}
.drawer.is-open .drawer-contact{opacity:1}
@media (max-height:640px){
  .drawer-in a{font-size:clamp(1.7rem,7.5vw,3rem);padding:3px 0}
  .drawer-contact{display:none}
}

/* ---------- Drawer: floating shapes ---------- */
.drawer-shapes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.dsh{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);transform-origin:50% 50%;will-change:transform}
.dsh svg{display:block;width:100%;height:100%;overflow:visible}
.dsh.c-amber{color:var(--amber)}.dsh.c-coral{color:var(--coral)}.dsh.c-pink{color:var(--pink)}.dsh.c-white{color:#fff}
/* 404 page reuses the shape field behind the hero */
.fx-shapes{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-shapes .dsh{opacity:.6}

/* ---------- Motion hooks (used by motion.js) ---------- */
.m-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.m-mask>span{display:inline-block}
.m-take,.m-take>*{transition:none!important}
.rowi .ra,.spot-go svg,.next-link b{transition:transform .3s var(--ease)}
.next-link:hover b{transform:translateX(4px)}
.topline h2{will-change:transform,clip-path}

/* JS-hide guard: only when the html.js-motion class is set by the inline
   head script, and only for people who have not asked for reduced motion.
   The fallback keyframe guarantees everything becomes visible after 2.4s
   even if motion.js never runs. */
@media (prefers-reduced-motion:no-preference){
  html.js-motion .pintro h1,
  html.js-motion .pintro .crumb,
  html.js-motion .pintro .lead,
  html.js-motion .pintro .btn-row,
  html.js-motion .pintro .tmeta,
  html.js-motion .banner-copy .eyebrow,
  html.js-motion .pintro>.wrap>.eyebrow,
  html.js-motion .titleband .eyebrow{opacity:0;animation:m-fallback 0s 2.4s forwards}
}
@keyframes m-fallback{to{opacity:1}}

/* ---------- Footer additions ---------- */
.foot-brand .mono{display:inline-block;margin-top:14px;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.02em;color:var(--t-body);transition:color .2s}
.foot-brand .mono:hover{color:var(--t-hi)}
.foot-note{margin:0 0 16px;text-transform:none;letter-spacing:.02em;font-size:.78rem}
.foot-note span{color:var(--coral)}

/* ---------- heading-hierarchy helpers (visual parity with the old h3/h4) ---------- */
.foot-col .foot-h{font:700 .68rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--t-dim);margin:0 0 18px}
@media (max-width:600px){.foot-col .foot-h{font-size:.74rem}}
.show-sec h2.show-h{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:8px 0 10px}

/* ---------- header brand with coloured LXD ---------- */
.brand--lxd{display:inline-flex;align-items:flex-start;gap:5px}
.brand--lxd img{height:34px;width:auto;display:block}
.brand--lxd .lxd{display:inline-flex;font:800 19px/1 var(--f-head);letter-spacing:.02em;margin-top:2px}
.brand--lxd .lxd i{font-style:normal}
.brand--lxd .lxd i:nth-child(1){color:var(--amber)}
.brand--lxd .lxd i:nth-child(2){color:var(--coral)}
.brand--lxd .lxd i:nth-child(3){color:var(--pink)}

/* ---------- qualifications with institution badges ---------- */
.rows--edu .rowi{grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:18px;align-items:start}
.rows--edu .rowi .rk{grid-column:2;grid-row:1;margin-bottom:8px}
.rows--edu .rowi .rt{grid-column:2;grid-row:2}
.rows--edu .edu-logo{grid-column:1;grid-row:2;align-self:start;width:56px;height:56px;border-radius:12px;object-fit:cover;background:#15151f;margin-top:2px}
.rows--edu .rt .grade{margin-left:10px;font:600 .68rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t-dim);white-space:nowrap}
@media (max-width:600px){.rows--edu .rowi{grid-template-columns:48px 1fr;column-gap:14px}.rows--edu .edu-logo{width:48px;height:48px}}

/* ---------- home hero without the media column ---------- */
.hero--solo .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero--solo .hero-grid>div{max-width:760px}
.hero--solo .hero-sub{max-width:640px}