/* =========================================================
   Nordnorsk Lederutvikling — statisk nettside (v3, "dristig")
   Immersiv nordlys · gigantisk redaksjonell type · fargeblokk
   Ren HTML + CSS.
   ========================================================= */

@font-face { font-family:"GT America"; src:url("fonts/GT-America-Standard-Light.ttf") format("truetype"); font-weight:300; font-display:swap; }
@font-face { font-family:"GT America"; src:url("fonts/GT-America-Standard-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"GT America"; src:url("fonts/GT-America-Standard-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"GT America"; src:url("fonts/GT-America-Standard-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Financier Display"; src:url("fonts/FinancierDisplay-Medium.otf") format("opentype"); font-weight:500; font-display:swap; }

:root{
  --stodig-bla:#283179;
  --fagbehag-bla:#7E80BE;
  --himmelbla:#99ABD8;
  --modig-orange:#F6927A;
  --frisk-gronn:#E4E7B2;
  --engasjert-gronn:#C6C774;
  --aurora-green:#5fd3a3;
  --aurora-teal:#49b6c8;

  --ink:#16193D;
  --deep:#0b0e26;
  --night:#070920;
  --paper:#FFFFFF;
  --paper-warm:#F4F1E8;
  --mist:#EEF1F8;
  --line:#DADFEC;
  --line-blue:#343e85;
  --fg-2:#51578A;
  --fg-3:#878CB0;
  --on-blue-2:#aab2da;

  --serif:"Financier Display",Georgia,serif;
  --sans:"GT America","Helvetica Neue",Arial,sans-serif;

  --r-md:14px; --r-lg:22px; --r-xl:34px; --r-pill:999px;
  --shadow-lg:0 30px 80px rgba(0,0,0,.4);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{margin:0;font-family:var(--sans);color:#fff;background:var(--night);
  font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}
::selection{background:var(--modig-orange);color:#3a1206;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;}
.serif{font-family:var(--serif);font-weight:500;}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--himmelbla);}
.eyebrow::before{content:"";width:40px;height:1.5px;background:currentColor;opacity:.7;}
.eyebrow.dark{color:var(--stodig-bla);}

/* ---------- Aurora / nordlys ---------- */
.aurora{position:absolute;inset:-25% -12% auto -12%;height:150%;z-index:0;pointer-events:none;
  filter:blur(56px) saturate(125%);opacity:1;}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;}
.aurora .a1{width:62%;height:90%;left:-8%;top:-16%;background:radial-gradient(circle at 50% 50%,var(--aurora-green),transparent 60%);animation:aur1 18s var(--ease) infinite;}
.aurora .a2{width:58%;height:95%;left:30%;top:-26%;background:radial-gradient(circle at 50% 50%,var(--aurora-teal),transparent 58%);animation:aur2 22s var(--ease) infinite;}
.aurora .a3{width:52%;height:80%;left:56%;top:2%;background:radial-gradient(circle at 50% 50%,var(--himmelbla),transparent 60%);animation:aur3 20s var(--ease) infinite;}
.aurora .a4{width:46%;height:62%;left:14%;top:40%;background:radial-gradient(circle at 50% 50%,var(--modig-orange),transparent 64%);opacity:.55;animation:aur1 26s var(--ease) infinite reverse;}
.aurora .a5{width:40%;height:70%;left:72%;top:30%;background:radial-gradient(circle at 50% 50%,var(--engasjert-gronn),transparent 64%);opacity:.5;animation:aur2 23s var(--ease) infinite;}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(9%,7%) scale(1.22);}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1.06);}50%{transform:translate(-12%,5%) scale(.88);}}
@keyframes aur3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-7%,10%) scale(1.25);}}
/* nattfilm-grain over auroraen */
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:16px;font-weight:500;
  border-radius:var(--r-pill);padding:17px 32px;border:1.5px solid transparent;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .18s var(--ease),box-shadow .3s var(--ease);}
.btn:active{transform:scale(.97);}
.btn .arrow{transition:transform .3s var(--ease);}
.btn:hover .arrow{transform:translateX(5px);}
.btn-accent{background:var(--modig-orange);color:#3a1206;}
.btn-accent:hover{box-shadow:0 14px 34px rgba(246,146,122,.45);transform:translateY(-2px);}
.btn-light{background:#fff;color:var(--ink);}
.btn-light:hover{box-shadow:0 14px 34px rgba(255,255,255,.25);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn-dark{background:var(--stodig-bla);color:#fff;}
.btn-dark:hover{background:#1c2360;transform:translateY(-2px);box-shadow:0 14px 30px rgba(40,49,121,.3);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(7,9,32,.55);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);}
.site-header .wrap{display:flex;align-items:center;gap:32px;height:74px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:38px;transition:transform .4s var(--ease);}
.brand:hover img{transform:rotate(-10deg) scale(1.05);}
.brand .name{font-family:var(--serif);font-size:20px;color:#fff;}
.nav{display:flex;gap:30px;margin-left:auto;}
.nav a{position:relative;font-size:14.5px;font-weight:500;color:var(--on-blue-2);letter-spacing:.01em;transition:color .25s var(--ease);}
.nav a::after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:2px;background:var(--modig-orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);}
.nav a:hover{color:#fff;}
.nav a:hover::after{transform:scaleX(1);}
.header-cta{padding:12px 22px;}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(130% 100% at 78% -10%,#2b3892 0%,#1a2160 40%,var(--night) 78%);overflow:hidden;}
.hero-bird{position:absolute;z-index:2;}
.hero-bird.big{right:-7%;top:6%;width:min(58vw,720px);opacity:.16;animation:drift 16s ease-in-out infinite;}
.hero-bird.small{left:6%;bottom:13%;width:96px;opacity:.2;animation:drift 12s ease-in-out infinite reverse;}
.hero .wrap{position:relative;z-index:3;padding-top:80px;padding-bottom:60px;width:100%;}
.hero h1{font-family:var(--serif);font-weight:500;letter-spacing:-.03em;margin:22px 0 0;
  font-size:clamp(58px,12.5vw,184px);line-height:.86;}
.hero h1 .l1{display:block;font-size:.42em;letter-spacing:-.01em;color:var(--on-blue-2);margin-bottom:.16em;font-weight:500;}
.hero h1 .grad{background:linear-gradient(96deg,#fff 22%,var(--himmelbla) 55%,var(--aurora-green) 88%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:clamp(36px,6vw,72px);flex-wrap:wrap;}
.hero-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#d7dcf2;max-width:46ch;}
.hero-lead .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.hero-stats{display:flex;gap:34px;align-items:flex-start;}
.stat b{display:block;font-family:var(--serif);font-size:clamp(38px,4.4vw,60px);font-weight:500;line-height:.9;
  background:linear-gradient(180deg,#fff,var(--himmelbla));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.stat span{font-size:13px;color:var(--on-blue-2);letter-spacing:.04em;margin-top:8px;display:block;}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0);}50%{transform:translate(-16px,20px) rotate(-3deg);}}

/* on-load entrance — FOUC-trygg */
.js .enter{opacity:0;transform:translateY(34px);}
@media (prefers-reduced-motion:no-preference){.js .enter{transition:opacity 1s var(--ease),transform 1s var(--ease);}}
.js.ready .enter{opacity:1;transform:none;}
.d1{transition-delay:.05s;} .d2{transition-delay:.18s;} .d3{transition-delay:.34s;} .d4{transition-delay:.5s;}

/* ---------- Kinetisk dobbeltbånd ---------- */
.marquee{background:var(--deep);overflow:hidden;padding:30px 0;border-block:1px solid rgba(255,255,255,.07);}
.mq{display:flex;width:max-content;gap:0;}
.mq.r1{animation:mqL 30s linear infinite;}
.mq.r2{animation:mqR 30s linear infinite;margin-top:6px;}
.marquee:hover .mq{animation-play-state:paused;}
.mq span{font-family:var(--serif);font-size:clamp(36px,5.6vw,76px);line-height:1;padding:0 .42em;white-space:nowrap;
  display:flex;align-items:center;gap:.42em;color:#fff;}
.mq span::after{content:"\2022";color:var(--modig-orange);font-size:.5em;}
.mq.r2 span::after{color:var(--aurora-green);}
.mq .ghost{color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.42);}
@keyframes mqL{to{transform:translateX(-50%);}}
@keyframes mqR{from{transform:translateX(-50%);}to{transform:translateX(0);}}

/* ---------- Scroll-avsløring ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;animation:revUp linear both;animation-timeline:view();animation-range:entry 2% cover 24%;}
    .reveal-2{animation-range:entry 9% cover 30%;}
    .reveal-3{animation-range:entry 16% cover 36%;}
  }
}
@keyframes revUp{from{opacity:0;transform:translateY(46px);}to{opacity:1;transform:none;}}

/* ---------- Section scaffold ---------- */
.section{padding:clamp(80px,11vw,160px) 0;position:relative;}
.kicker{font-family:var(--serif);display:block;}

/* ---------- MANIFEST (lyst brudd) ---------- */
.manifest{background:var(--paper-warm);color:var(--ink);}
.manifest .eyebrow{color:var(--stodig-bla);}
.manifest h2{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;margin:26px 0 0;
  font-size:clamp(38px,6.6vw,98px);line-height:.98;text-wrap:balance;max-width:16ch;}
.manifest h2 .hl{color:var(--modig-orange);}
.manifest h2 .hl2{color:var(--stodig-bla);font-style:normal;}
.manifest-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;margin-top:64px;align-items:start;}
.manifest-grid p{font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:var(--fg-2);}
.manifest-grid p + p{margin-top:18px;}
.values{display:flex;flex-direction:column;gap:0;}
.values .v{display:flex;gap:20px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line);
  transition:padding-left .35s var(--ease);}
.values .v:last-child{border-bottom:1px solid var(--line);}
.values .v:hover{padding-left:14px;}
.values .v .n{font-family:var(--serif);font-size:15px;color:var(--himmelbla);width:34px;flex:none;}
.values .v b{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,34px);color:var(--stodig-bla);width:42%;flex:none;}
.values .v span{font-size:15px;color:var(--fg-3);}

/* ---------- PROGRAMMER (mørk, fargeblokk) ---------- */
.programs{background:var(--night);}
.programs .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:56px;}
.programs h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5.4vw,76px);line-height:.96;letter-spacing:-.02em;
  margin-top:22px;max-width:14ch;}
.prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.prog{position:relative;border-radius:var(--r-xl);padding:34px 30px 30px;overflow:hidden;min-height:430px;
  display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);background:#0f1336;}
.prog:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.prog .bignum{position:absolute;right:18px;top:6px;font-family:var(--serif);font-size:150px;line-height:1;
  color:rgba(255,255,255,.05);transition:color .4s var(--ease),transform .5s var(--ease);}
.prog:hover .bignum{transform:translateY(-6px) rotate(-3deg);}
.prog.c1:hover .bignum{color:rgba(153,171,216,.16);}
.prog.c2:hover .bignum{color:rgba(198,199,116,.18);}
.prog.c3:hover .bignum{color:rgba(246,146,122,.2);}
.tag{position:relative;align-self:flex-start;font-size:12.5px;font-weight:500;letter-spacing:.04em;border-radius:var(--r-pill);padding:6px 14px;margin-bottom:auto;}
.tag.blue{background:rgba(153,171,216,.16);color:var(--himmelbla);}
.tag.green{background:rgba(198,199,116,.18);color:var(--engasjert-gronn);}
.tag.orange{background:rgba(246,146,122,.2);color:var(--modig-orange);}
.prog h3{position:relative;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,38px);line-height:1.02;
  letter-spacing:-.01em;color:#fff;margin:30px 0 12px;}
.prog p{position:relative;font-size:15px;color:var(--on-blue-2);margin-bottom:22px;}
.prog .meta{position:relative;display:flex;flex-wrap:wrap;gap:8px 16px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);}
.prog .meta span{font-size:12.5px;color:var(--fg-3);display:flex;align-items:center;gap:8px;}
.prog .meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;}
.prog .line{position:absolute;left:0;right:0;bottom:0;height:5px;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.prog:hover .line{transform:scaleX(1);}
.prog.c1 .line{background:linear-gradient(90deg,var(--himmelbla),var(--aurora-teal));}
.prog.c2 .line{background:linear-gradient(90deg,var(--engasjert-gronn),var(--aurora-green));}
.prog.c3 .line{background:linear-gradient(90deg,var(--modig-orange),#f3b49f);}

/* ---------- KUNST & KULTUR (immersiv nordlys) ---------- */
.culture{position:relative;overflow:hidden;background:radial-gradient(130% 90% at 12% 0%,#243086,#141a4d 52%,var(--night));}
.culture-bird{position:absolute;left:-60px;bottom:-70px;width:420px;opacity:.08;z-index:1;animation:drift 19s ease-in-out infinite;}
.culture .wrap{position:relative;z-index:3;}
.culture .head{max-width:780px;}
.culture h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,6vw,86px);line-height:.96;letter-spacing:-.02em;margin:22px 0 16px;text-wrap:balance;}
.culture h2 .em{color:var(--aurora-green);}
.culture .lead{font-size:clamp(17px,1.7vw,21px);color:var(--on-blue-2);max-width:60ch;}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:18px;margin-top:60px;}
.tile{border-radius:var(--r-xl);overflow:hidden;position:relative;display:flex;align-items:flex-end;padding:24px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.tile:hover{transform:translateY(-8px) scale(1.014);box-shadow:var(--shadow-lg);}
.tile .label{position:relative;z-index:3;font-size:13px;font-weight:500;color:#fff;
  background:rgba(7,9,32,.5);backdrop-filter:blur(5px);padding:7px 14px;border-radius:var(--r-pill);}
.tile .bird{position:absolute;inset:0;margin:auto;width:52%;opacity:.18;transition:transform .55s var(--ease),opacity .55s var(--ease);}
.tile:hover .bird{transform:scale(1.14) rotate(-5deg);opacity:.28;}
.tile.wide{grid-column:span 2;}.tile.tall{grid-row:span 2;}
.tile.t-blue{background:linear-gradient(160deg,#3946a8,#1f2768);}
.tile.t-sky{background:linear-gradient(160deg,#aebbe4,#7e93cb);}
.tile.t-orange{background:linear-gradient(160deg,#f8a48f,#ee765a);}
.tile.t-green{background:linear-gradient(160deg,#d4d685,#bbbc5d);}
.tile.t-sky .label,.tile.t-green .label{color:var(--ink);background:rgba(255,255,255,.62);}
.tile.t-sky .bird,.tile.t-orange .bird,.tile.t-green .bird{filter:brightness(0);opacity:.12;}
.tile.t-aurora{background:#0c1138;}
.tile.t-aurora .nl{position:absolute;inset:-30%;filter:blur(38px);}
.tile.t-aurora .nl::before,.tile.t-aurora .nl::after{content:"";position:absolute;border-radius:50%;mix-blend-mode:screen;}
.tile.t-aurora .nl::before{width:72%;height:95%;left:-4%;top:-10%;background:radial-gradient(circle,var(--aurora-green),transparent 60%);animation:aur1 16s var(--ease) infinite;}
.tile.t-aurora .nl::after{width:66%;height:85%;left:42%;top:4%;background:radial-gradient(circle,var(--aurora-teal),transparent 60%);animation:aur2 20s var(--ease) infinite;}
.tile.quote{background:rgba(255,255,255,.05);border:1px solid var(--line-blue);align-items:center;justify-content:center;text-align:center;}
.tile.quote p{font-family:var(--serif);font-size:clamp(20px,2vw,27px);line-height:1.2;color:#fff;}

/* ---------- STORT SITAT (fargeblokk) ---------- */
.bigquote{position:relative;overflow:hidden;background:var(--stodig-bla);}
.bigquote .bird{position:absolute;right:-40px;top:-50px;width:300px;opacity:.1;animation:drift 17s ease-in-out infinite;}
.bigquote .wrap{position:relative;z-index:2;padding:clamp(80px,12vw,170px) 40px;text-align:center;}
.bigquote .mark{font-family:var(--serif);font-size:clamp(120px,18vw,260px);line-height:.6;color:var(--himmelbla);opacity:.45;height:.4em;}
.bigquote blockquote{font-family:var(--serif);font-weight:500;font-size:clamp(34px,6.2vw,92px);line-height:1.04;letter-spacing:-.02em;
  color:#fff;max-width:16ch;margin:.2em auto 0;text-wrap:balance;}
.bigquote blockquote .em{color:var(--frisk-gronn);}
.bigquote .by{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:46px;}
.bigquote .by img{height:48px;}
.bigquote .by .n{font-weight:500;font-size:16px;color:#fff;text-align:left;}
.bigquote .by .r{font-size:14px;color:var(--on-blue-2);text-align:left;}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 50% -10%,#2b3789,#10153a 55%,var(--night));}
.cta-bird{position:absolute;right:6%;top:0;width:240px;opacity:.1;z-index:2;animation:drift 15s ease-in-out infinite;}
.cta .wrap{position:relative;z-index:3;text-align:center;padding:clamp(90px,13vw,190px) 40px;}
.cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(42px,8vw,120px);line-height:.92;letter-spacing:-.025em;margin:20px 0 22px;text-wrap:balance;}
.cta h2 .grad{background:linear-gradient(96deg,#fff,var(--himmelbla) 60%,var(--aurora-green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.cta p{font-size:clamp(18px,1.8vw,21px);color:var(--on-blue-2);max-width:48ch;margin:0 auto 38px;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- Footer ---------- */
.site-footer{background:var(--night);border-top:1px solid rgba(255,255,255,.08);}
.site-footer .top{display:grid;grid-template-columns:1.2fr 2fr;gap:48px;padding:80px 0 44px;}
.site-footer .brand-blk img{height:46px;margin-bottom:20px;}
.site-footer .brand-blk p{font-family:var(--serif);font-size:23px;color:var(--himmelbla);max-width:18ch;}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.foot-col h4{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--fagbehag-bla);margin:0 0 16px;}
.foot-col a{display:block;font-size:15px;color:#cfd4ea;margin-bottom:11px;transition:color .25s var(--ease),transform .25s var(--ease);}
.foot-col a:hover{color:#fff;transform:translateX(4px);}
.foot-base{border-top:1px solid rgba(255,255,255,.1);padding:26px 0;display:flex;justify-content:space-between;
  font-size:13px;color:var(--fagbehag-bla);flex-wrap:wrap;gap:8px;}

/* ---------- Responsiv ---------- */
@media (max-width:980px){
  .nav{display:none;}
  .manifest-grid{grid-template-columns:1fr;gap:40px;}
  .prog-grid{grid-template-columns:1fr;}
  .prog{min-height:0;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .site-footer .top{grid-template-columns:1fr;}
  .hero-foot{flex-direction:column;align-items:flex-start;}
}
@media (max-width:560px){
  .wrap{padding:0 22px;}
  .gallery{grid-template-columns:1fr;grid-auto-rows:190px;}
  .tile.wide,.tile.tall{grid-column:auto;grid-row:auto;}
  .hero-stats{gap:22px;}
  .values .v{flex-wrap:wrap;gap:6px;}
  .values .v b{width:auto;}
}

/* ---------- Redusert bevegelse ---------- */
@media (prefers-reduced-motion:reduce){
  .aurora,.tile.t-aurora .nl,.hero-bird,.culture-bird,.bigquote .bird,.cta-bird{animation:none!important;}
  .mq{animation:none!important;}
}