/* SIST-ENDRET: 2026-09-06 12:11:17 */
/* Madina Ungdom — egen identitet. IKKE felles.css / skole-look. */

:root{
  --void:#07080B;
  --ink:#0E1016;
  --panel:#141821;
  --mist:#E9EDF3;
  --paper:#F7F8FB;
  --line:rgba(255,255,255,.12);
  --line-d:rgba(14,16,22,.12);
  --mint:#2DFF9A;
  --mint-d:#00C96A;
  --hot:#FF4D6A;
  --mute:#8B93A7;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,sans-serif;
  --nav:4.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:var(--font-body); font-weight:450; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit}
button,input{font:inherit}

/* —— Nav —— */
.mu-nav{
  position:fixed; inset:0 0 auto; z-index:50; height:var(--nav);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1rem,3vw,2rem);
  transition:background .25s ease, backdrop-filter .25s ease;
}
.mu-nav.on{
  background:rgba(7,8,11,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.mu-brand{
  display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff;
}
.mu-brand img{height:2rem; width:auto; border-radius:.45rem}
.mu-brand b{
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
  letter-spacing:-.02em;
}
.mu-nav-links{display:flex; gap:.35rem; align-items:center}
.mu-nav-links a{
  text-decoration:none; color:rgba(255,255,255,.85);
  font-size:.82rem; font-weight:700; padding:.55rem .9rem; border-radius:999px;
}
.mu-nav-links a:hover{background:rgba(255,255,255,.08); color:#fff}
.mu-nav-links a[aria-current="page"]{background:rgba(255,255,255,.12); color:#fff}
.mu-nav-links .go{
  background:var(--mint); color:var(--void) !important;
}
.mu-nav-links .go:hover{background:#fff; color:var(--void) !important}

/* —— Hero —— */
.mu-hero{
  position:relative; min-height:100svh; min-height:100vh;
  display:grid; align-items:end; color:#fff; overflow:hidden;
  background:var(--void);
}
.mu-hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 28%;
  animation:muDrift 22s ease-in-out infinite alternate;
}
@keyframes muDrift{
  from{transform:scale(1.05)}
  to{transform:scale(1.14) translate(-2%,-1%)}
}
.mu-hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(7,8,11,.92) 0%, rgba(7,8,11,.55) 48%, rgba(7,8,11,.25) 100%),
    linear-gradient(180deg, rgba(7,8,11,.35) 0%, transparent 35%, rgba(7,8,11,.9) 100%);
}
.mu-hero-inner{
  position:relative; z-index:2;
  padding:calc(var(--nav) + 1.5rem) clamp(1rem,4vw,2.5rem) clamp(2rem,6vh,3.5rem);
  max-width:72rem; width:100%; margin:0 auto;
}
.mu-kicker{
  margin:0 0 .85rem; font-size:.72rem; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; color:var(--mint);
  animation:muUp .7s ease both;
}
.mu-hero h1{
  margin:0; max-width:9ch;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3.2rem,11vw,7.2rem); line-height:.88; letter-spacing:-.045em;
  animation:muUp .8s .05s ease both;
}
.mu-hero-lead{
  margin:1.1rem 0 0; max-width:28rem;
  font-size:clamp(1rem,2.1vw,1.2rem); color:rgba(255,255,255,.78); font-weight:500;
  animation:muUp .8s .12s ease both;
}
.mu-actions{
  display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem;
  animation:muUp .8s .18s ease both;
}
@keyframes muUp{
  from{opacity:0; transform:translateY(1.1rem)}
  to{opacity:1; transform:none}
}

/* —— Buttons —— */
.mu-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:3rem; padding:0 1.25rem; border-radius:999px; border:0;
  font-weight:800; font-size:.92rem; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.mu-btn:active{transform:scale(.98)}
.mu-btn-mint{background:var(--mint); color:var(--void)}
.mu-btn-mint:hover{background:#fff}
.mu-btn-ghost{
  background:transparent; color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);
}
.mu-btn-ghost:hover{background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1.5px #fff}
.mu-btn-ink{background:var(--ink); color:#fff}
.mu-btn-ink:hover{background:var(--panel)}
.mu-btn-line{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line-d);
}
.mu-btn-line:hover{background:#fff; box-shadow:inset 0 0 0 1.5px var(--ink)}

/* —— Marquee —— */
.mu-marquee{
  background:var(--mint); color:var(--void); overflow:hidden;
  border-block:4px solid var(--void);
}
.mu-marquee-track{
  display:flex; gap:2rem; width:max-content;
  padding:.85rem 0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(.95rem,2vw,1.15rem); letter-spacing:-.02em;
  text-transform:uppercase; animation:muSlide 28s linear infinite;
}
.mu-marquee-track span{white-space:nowrap}
.mu-marquee-track span::after{content:"✦"; margin-left:2rem; opacity:.55}
@keyframes muSlide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* —— Sections —— */
.mu-wrap{width:min(70rem, calc(100% - 2rem)); margin:0 auto}
.mu-band{padding:clamp(3.5rem,8vh,6rem) 0}
.mu-band-void{background:var(--void); color:#fff}
.mu-band-mist{background:var(--mist); color:var(--ink)}
.mu-band-paper{background:var(--paper); color:var(--ink)}

.mu-label{
  margin:0 0 .6rem; font-size:.72rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mint-d);
}
.mu-band-void .mu-label{color:var(--mint)}
.mu-band h2{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.85rem,4.5vw,3rem); line-height:1.02; letter-spacing:-.035em;
  max-width:14ch;
}
.mu-lead{margin:.85rem 0 0; max-width:36rem; color:var(--mute); font-size:1.05rem}
.mu-band-void .mu-lead{color:rgba(255,255,255,.65)}

/* —— Manifesto —— */
.mu-manifest{
  display:grid; gap:1.5rem; margin-top:2rem;
  grid-template-columns:1.15fr .85fr; align-items:start;
}
@media (max-width:860px){.mu-manifest{grid-template-columns:1fr}}
.mu-manifest p{
  margin:0 0 1rem; font-size:1.08rem; line-height:1.7; color:#2a3140;
}
.mu-manifest p:last-child{margin-bottom:0}
.mu-shot{
  border-radius:1.4rem; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 1.5rem 3rem rgba(7,8,11,.18);
}
.mu-shot img{width:100%; height:100%; object-fit:cover}

/* —— Om oss / institutt —— */
.mu-om-title{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.4rem,7vw,4.5rem); line-height:.92; letter-spacing:-.04em;
  max-width:12ch;
}
.mu-bygg{
  margin:clamp(1.75rem,4.5vw,2.75rem) auto;
  width:min(70rem, calc(100% - 2rem));
  border-radius:1.35rem; overflow:hidden;
  box-shadow:0 1.25rem 2.75rem rgba(7,8,11,.16);
  background:var(--panel);
}
/* Bilde inne i mørk om-oss-topp: klar luft under ingressen */
.mu-om-intro .mu-bygg{
  margin-top:clamp(2.75rem,7vw,3.75rem);
  margin-bottom:0;
}
.mu-om-intro{
  padding-top:5.5rem;
  padding-bottom:clamp(2.75rem,6vw,3.75rem);
}
.mu-bygg img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:center}
.mu-bygg figcaption{
  margin:0; padding:.85rem 1.1rem 1rem;
  font-size:.82rem; font-weight:700; color:rgba(255,255,255,.72);
  background:var(--void);
}
.mu-om-pillars{
  display:flex; flex-direction:column; gap:.85rem;
}
.mu-om-pillars > div{
  background:#fff; border:1px solid var(--line-d);
  border-radius:1.1rem; padding:1.15rem 1.2rem;
}
.mu-om-pillars h3{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:1.15rem; letter-spacing:-.02em;
}
.mu-om-pillars p{
  margin:.35rem 0 0; font-size:.92rem; line-height:1.55; color:#3a4254;
}
.mu-om-linkrad{margin-top:1.35rem !important}
.mu-band-mist .mu-manifest p{color:#2a3140}
.mu-om-prosa{
  margin-top:1.5rem; max-width:42rem;
}
.mu-om-prosa p{
  margin:0 0 1rem; font-size:1.08rem; line-height:1.7; color:#2a3140;
}
.mu-om-prosa p:last-child{margin-bottom:0}

/* —— People —— */
.mu-people{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem;
}
@media (max-width:640px){.mu-people{grid-template-columns:1fr}}
.mu-person{
  padding:1.5rem 1.35rem; border-radius:1.25rem;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.mu-person-mark{
  width:2.75rem; height:2.75rem; border-radius:.85rem; margin-bottom:1rem;
  display:grid; place-items:center; background:var(--mint); color:var(--void);
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
}
.mu-person h3{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:1.35rem; letter-spacing:-.02em;
}
.mu-person p{margin:.35rem 0 0; color:rgba(255,255,255,.58); font-size:.92rem}

/* —— Activity cinema rows —— */
.mu-acts{display:flex; flex-direction:column; gap:1.1rem; margin-top:2rem}
.mu-act{
  display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden;
  border-radius:1.5rem; background:#fff; border:1px solid var(--line-d);
  transition:transform .25s ease, box-shadow .25s ease;
}
.mu-act:hover{transform:translateY(-.2rem); box-shadow:0 1.15rem 2.4rem rgba(7,8,11,.1)}
.mu-act:nth-child(even){grid-template-columns:.95fr 1.05fr}
.mu-act:nth-child(even) .mu-act-media{order:2}
@media (max-width:860px){
  .mu-act,.mu-act:nth-child(even){grid-template-columns:1fr}
  .mu-act:nth-child(even) .mu-act-media{order:0}
}
.mu-act-media{min-height:16rem; background:var(--panel)}
.mu-act-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:1}
.mu-act-body{padding:clamp(1.25rem,3vw,2rem); display:flex; flex-direction:column; justify-content:center}
.mu-chip{
  align-self:flex-start; margin:0 0 .75rem; padding:.35rem .7rem;
  border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; background:rgba(45,255,154,.22); color:#0a6b3d;
}
.mu-chip.hot{background:rgba(255,77,106,.14); color:var(--hot)}
.mu-act-body h3{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.35rem,2.8vw,1.85rem); letter-spacing:-.03em; line-height:1.1;
}
.mu-act-meta{margin:.55rem 0 0; font-size:.82rem; font-weight:700; color:var(--mute)}
.mu-act-body p{margin:.75rem 0 0; color:#3a4254; font-size:.98rem; line-height:1.65}
.mu-act-link{
  margin-top:1rem; align-self:flex-start; font-size:.88rem; font-weight:800;
  text-decoration:none; border-bottom:2px solid var(--mint);
}
.mu-act-link:hover{border-bottom-color:var(--ink)}
.mu-note{
  margin:1.75rem auto 0; text-align:center; max-width:36rem;
  color:var(--mute); font-size:.95rem; line-height:1.7;
}
.mu-note a{color:var(--ink); font-weight:800; text-decoration:none; border-bottom:1.5px solid var(--mint)}

/* —— Mosaic —— */
.mu-mosaic{
  display:grid; gap:.65rem; margin-top:1.75rem;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(6.5rem,15vw);
}
.mu-mosaic img{
  width:100%; height:100%; object-fit:cover; border-radius:1rem; background:var(--panel);
}
.mu-mosaic img:nth-child(1){grid-column:span 3; grid-row:span 2}
.mu-mosaic img:nth-child(2){grid-column:span 3}
.mu-mosaic img:nth-child(3){grid-column:span 2}
.mu-mosaic img:nth-child(4){grid-column:span 2}
.mu-mosaic img:nth-child(5){grid-column:span 2; grid-row:span 2}
@media (max-width:720px){
  .mu-mosaic{grid-template-columns:1fr 1fr; grid-auto-rows:minmax(7rem,28vw)}
  .mu-mosaic img:nth-child(n){grid-column:span 1; grid-row:span 1}
  .mu-mosaic img:nth-child(1){grid-column:span 2; grid-row:span 2}
}

/* —— Join —— */
.mu-join{
  display:grid; grid-template-columns:1.25fr .75fr; gap:1.5rem; align-items:end;
}
@media (max-width:860px){.mu-join{grid-template-columns:1fr}}
.mu-join h2{max-width:12ch}
.mu-join-aside{
  padding:1.5rem; border-radius:1.25rem;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.mu-join-aside p{margin:0; color:rgba(255,255,255,.7); font-size:.95rem; line-height:1.65}
.mu-join-aside a{
  display:inline-block; margin-top:1rem; color:var(--mint);
  font-weight:800; text-decoration:none;
}

/* —— Footer —— */
.mu-foot{
  padding:2rem clamp(1rem,3vw,2rem) 2.75rem;
  background:#05060A; color:rgba(255,255,255,.5); font-size:.85rem;
}
.mu-foot-inner{
  width:min(70rem,100%); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
}
.mu-foot strong{
  display:block; color:#fff; font-family:var(--font-display);
  font-size:1rem; margin-bottom:.35rem;
}
.mu-foot a{color:rgba(255,255,255,.72); text-decoration:none}
.mu-foot a:hover{color:var(--mint)}

/* —— Form pages —— */
.mu-form-page{
  min-height:100vh;
  background:
    radial-gradient(60% 45% at 100% 0%, rgba(45,255,154,.16), transparent 55%),
    radial-gradient(50% 40% at 0% 100%, rgba(255,77,106,.1), transparent 50%),
    var(--mist);
}
.mu-form-page .mu-nav{position:sticky; background:rgba(7,8,11,.94)}
.mu-form-shell{width:min(34rem, calc(100% - 2rem)); margin:0 auto; padding:2.5rem 0 4.5rem}
.mu-form-intro{text-align:center; margin-bottom:1.5rem}
.mu-form-intro h1{
  margin:0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.75rem,5vw,2.4rem); letter-spacing:-.03em; line-height:1.05;
}
.mu-form-intro p{margin:.65rem 0 0; color:var(--mute); font-size:.95rem}
.mu-card{
  background:#fff; border:1px solid var(--line-d); border-radius:1.4rem;
  padding:1.5rem 1.35rem; box-shadow:0 1.25rem 2.75rem rgba(7,8,11,.08);
}
.mu-felt{margin-bottom:1rem}
.mu-felt label{display:block; font-size:.82rem; font-weight:750; margin-bottom:.4rem; color:var(--ink)}
.mu-felt .hint{font-weight:500; color:var(--mute); font-size:.75rem}
.mu-felt input[type="text"],
.mu-felt input[type="tel"],
.mu-felt input[type="email"],
.mu-felt input[type="number"],
.mu-felt input[type="password"]{
  width:100%; min-height:3rem; padding:0 .85rem;
  border:1.5px solid var(--line-d); border-radius:.85rem;
  background:var(--mist); color:var(--ink);
}
.mu-felt input:focus{outline:none; border-color:var(--ink); background:#fff}
.mu-kjonn{display:flex; gap:.65rem}
.mu-kjonn label{
  flex:1; min-height:3rem; margin:0; display:flex; align-items:center; justify-content:center;
  gap:.45rem; border:1.5px solid var(--line-d); border-radius:.85rem;
  background:var(--mist); cursor:pointer; font-weight:750; font-size:.9rem;
}
.mu-kjonn input{accent-color:var(--ink)}
.mu-kjonn label:has(input:checked){
  border-color:var(--ink); background:rgba(45,255,154,.22);
}
#foresattFelt[hidden],#foresattTelefonFelt[hidden]{display:none !important}
#foresattFelt{border-top:1px dashed var(--line-d); padding-top:.9rem; margin-top:.25rem}
#foresattFelt .note{margin:0 0 .75rem; color:var(--mute); font-size:.82rem}
#skjemaFeil,.mu-feil{
  display:none; margin-bottom:.85rem; padding:.75rem .9rem; border-radius:.75rem;
  background:#ffe4e8; color:#8a1f33; font-size:.88rem; font-weight:700;
}
#takkBoks{
  display:none; text-align:center; background:#fff; border:1px solid var(--line-d);
  border-radius:1.4rem; padding:2.5rem 1.5rem; box-shadow:0 1.25rem 2.75rem rgba(7,8,11,.08);
}
#takkBoks h2{
  margin:0 0 .65rem; font-family:var(--font-display); font-weight:800;
  font-size:1.65rem; letter-spacing:-.03em;
}
#takkBoks p{margin:0 0 1.25rem; color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}