/* ============================================================
   MAL School — distinct visual layer (loads AFTER style.css).
   New components, image overlays, angled sections, masonry,
   parallax/tilt/count-up motion. Gives MAL its own identity.
   ============================================================ */

/* page texture — faint blue dot grid */
body{background-image:radial-gradient(rgba(30,111,184,.05) 1.1px, transparent 1.1px);
  background-size:22px 22px;background-attachment:fixed}

/* ---- nav: scrolled shadow + crisp ---- */
.nav-bar{transition:box-shadow .3s, background .3s}
.nav-bar.scrolled{box-shadow:0 6px 24px rgba(19,58,99,.10);background:rgba(255,255,255,.92)}
.brand-logo{height:42px}
@media(max-width:520px){.brand-logo{height:34px}}
.nav-cta{border-radius:8px;background:var(--terra)}
.nav-cta:hover{background:var(--ink)}

/* ---- headings: accent underline + tighter ---- */
.h2{position:relative;font-weight:400;letter-spacing:-.3px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.kicker::before{content:"";width:26px;height:2px;background:var(--terra);display:inline-block}
.eyebrow{border-radius:6px;background:#fff;border-color:var(--line)}

/* ---- buttons: square, slide-fill ---- */
.btn{border-radius:8px;position:relative;overflow:hidden;z-index:0}
.btn-pri{background:var(--terra)}
.btn-pri::after,.btn-sec::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(100%);transition:.32s cubic-bezier(.2,.7,.2,1)}
.btn-pri:hover::after,.btn-sec:hover::after{transform:translateY(0)}
.btn-pri:hover{color:#fff}
.btn-sec:hover{color:#fff;background:transparent}

/* ---- HERO: asymmetric, framed image, duotone ---- */
.hero{padding-top:64px}
h1.title{font-size:clamp(42px,6.4vw,82px);letter-spacing:-1.6px}
.hero .lede{border-left:3px solid var(--terra);padding-left:18px}
.herostrip{border-radius:18px;position:relative;box-shadow:0 30px 70px rgba(19,58,99,.18)}
.herostrip::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(120deg, rgba(19,58,99,.34), rgba(30,111,184,.06) 55%, transparent);
  mix-blend-mode:multiply}
.herostrip::before{content:"";position:absolute;left:14px;top:14px;right:14px;bottom:14px;z-index:3;
  border:1px solid rgba(255,255,255,.55);border-radius:10px;pointer-events:none}
.herostrip img{transition:transform 8s ease}
.hero:hover .herostrip img{transform:scale(1.06)}

/* ---- MEDIA tiles: blue duotone + corner ticks + caption bar ---- */
.media{border-radius:16px;box-shadow:0 24px 50px rgba(19,58,99,.16)}
.media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(160deg, rgba(30,111,184,.20), transparent 60%);mix-blend-mode:multiply}
.media>img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.split:hover .media>img,.split.rev:hover .media>img{transform:scale(1.05)}
.media .cap{background:linear-gradient(transparent, rgba(19,58,99,.82));font-weight:500;padding:26px 20px 18px}
.media .cap::before{content:"";display:block;width:30px;height:2px;background:var(--mustard);margin-bottom:8px}
/* corner ticks */
.media .corner{position:absolute;width:18px;height:18px;z-index:4;border:2px solid rgba(255,255,255,.7)}
.media .c-tl{top:12px;left:12px;border-right:0;border-bottom:0}
.media .c-br{bottom:12px;right:12px;border-left:0;border-top:0}

/* ---- PHOTO CARDS: overlapping magazine card + zoom ---- */
.pcardimg{border-radius:16px;background:transparent;border:0;overflow:visible;box-shadow:none}
.pcardimg .thumb{aspect-ratio:5/4;border-radius:16px;box-shadow:0 18px 40px rgba(19,58,99,.16);position:relative}
.pcardimg .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(19,58,99,.42));transition:.3s}
.pcardimg .thumb img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pcardimg:hover .thumb img{transform:scale(1.08)}
.pcardimg:hover .thumb::after{background:linear-gradient(180deg,rgba(19,58,99,.12),rgba(19,58,99,.55))}
.pcardimg .body{position:relative;margin:-46px 14px 0;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 30px rgba(19,58,99,.10);padding:16px 18px;z-index:2;transition:.3s}
.pcardimg:hover{transform:translateY(-6px)}
.pcardimg:hover .body{box-shadow:0 20px 44px rgba(19,58,99,.16)}
.pcardimg .body h3{font-size:18px;margin:0}
.pcardimg .body h3::after{content:"";display:block;width:22px;height:2px;background:var(--terra);margin-top:8px;
  transition:width .3s}
.pcardimg:hover .body h3::after{width:40px}

/* ---- CARDS: left accent rail ---- */
.card{border-radius:14px;border-left:4px solid var(--terra);transition:.3s}
.card:hover{transform:translateY(-5px);border-left-color:var(--mustard)}
.itile{border-radius:12px}

/* ---- TICKER: bold uppercase rail ---- */
.ticker{background:var(--ink)}
.ticker .run{font-family:var(--f-sans);font-style:normal;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:14px;padding:16px 0;color:#fff}
.ticker .x{color:var(--mustard)}

/* ---- STATS: gradient + dividers + count-up ---- */
.stats{background:linear-gradient(120deg,var(--ink),var(--sage-d))}
.statsgrid{position:relative}
.stat{position:relative;padding:6px 0}
.stat + .stat::before{content:"";position:absolute;left:-15px;top:10%;height:80%;width:1px;background:rgba(255,255,255,.14)}
@media(max-width:880px){.stat + .stat::before{display:none}}
.stat .n{font-weight:400}

/* ---- ANGLED section bands (band + cta) ---- */
.band,.cta-dark{clip-path:polygon(0 3.2vw,100% 0,100% calc(100% - 3.2vw),0 100%);
  padding-top:calc(84px + 3vw);padding-bottom:calc(84px + 3vw)}
.band{background:linear-gradient(120deg,var(--mustard),var(--terra));color:#fff}
.band .h2,.band p{color:#fff}
.cta-dark{background:linear-gradient(120deg,var(--sage),var(--ink))}

/* ---- GALLERY: masonry + blue hover overlay + caption ---- */
.ggrid{display:block;column-count:4;column-gap:14px}
@media(max-width:980px){.ggrid{column-count:3}}
@media(max-width:680px){.ggrid{column-count:2}}
.ggrid .gimg{display:block;width:100%;aspect-ratio:auto;height:auto;break-inside:avoid;margin:0 0 14px;
  border-radius:12px;min-height:150px;background-size:cover;background-position:center;position:relative;
  border:0;box-shadow:0 10px 26px rgba(19,58,99,.12)}
.ggrid .gimg:nth-child(3n){min-height:210px}
.ggrid .gimg:nth-child(4n){min-height:180px}
.gimg::after{content:"⤢";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:22px;
  background:linear-gradient(160deg,rgba(30,111,184,.55),rgba(19,58,99,.55));opacity:0;transition:.28s;border-radius:12px}
.gimg:hover::after{opacity:1}
.gimg:hover{transform:translateY(-4px)}

/* ---- REVEAL: directional + scale, staggered ---- */
.reveal{transform:translateY(34px) scale(.985)}
.split > .reveal:first-child{transform:translateX(-36px)}
.split > .reveal:last-child,.split.rev > .reveal:first-child{transform:translateX(36px)}
.reveal.in{transform:none !important}
.grid .reveal{transition-duration:.7s}

/* infocards + forms: square, accent */
.infocard,.formwrap{border-radius:16px}
.infocard{border-top:4px solid var(--terra)}
.field input,.field select,.field textarea{border-radius:10px}

@media(prefers-reduced-motion:reduce){
  .hero:hover .herostrip img,.pcardimg:hover .thumb img,.split:hover .media>img{transform:none}
}