/* DanLanguage ApS — site.css */
@font-face{font-family:Fraunces;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fraunces-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fraunces-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:italic;font-weight:500;font-display:swap;src:url(fonts/fraunces-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}

:root{
  /* AlfaNord — hentet direkte fra logoet:
     navy #001C3D, mellemblå #01457D, klar blå #0261A7, højlys #078FD5 */
  --paper:#F9FBFD; --sand:#EAF1F7; --sand-2:#D9E5F0; --white:#fff;
  --surface:#fff;            /* kortflade — mørkere på det mørke tema */
  --ink:#0C1B2E; --ink-2:#40556B; --ink-3:#566E85;
  --brand:#01457D; --brand-2:#00305C; --brand-soft:#E3EDF7;
  --deep:#001C3D;
  --teal:#0E8FD5; --teal-ink:#0A6395; --teal-soft:#DEEFFB;
  --line:#D9E4EE; --line-2:#EBF2F8;
  --serif:Fraunces,Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.24,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --max:1240px; --nav-h:80px;
  --card:0 1px 2px rgba(12,27,46,.03),0 18px 46px -26px rgba(12,27,46,.2);
  --card-hi:0 2px 6px rgba(12,27,46,.06),0 44px 80px -34px rgba(12,27,46,.32);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:600;letter-spacing:-.022em;line-height:1.04}
h1{font-size:clamp(2.5rem,5.4vw,4.6rem)}
h2{font-size:clamp(1.95rem,4vw,3.3rem);line-height:1.07}
h3{font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.2;letter-spacing:-.014em}
h4{font-size:1.08rem}
em,.it{font-style:italic;font-weight:500}
p{max-width:70ch}
.lead{font-size:clamp(1.06rem,1.3vw,1.24rem);color:var(--ink-2);line-height:1.66;max-width:38em}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-ink);display:inline-flex;align-items:center;gap:.75rem;margin-bottom:1.2rem}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;flex:none}
.center{text-align:center}.center .eyebrow::before{display:none}
.muted{color:var(--ink-2)}
.prose p+p{margin-top:1rem}
.prose h2{margin:2.4rem 0 .9rem;font-size:clamp(1.45rem,2.1vw,1.95rem)}
.prose h3{margin:1.9rem 0 .6rem;font-size:1.15rem}
.prose ul,.prose ol{margin:1rem 0 1rem 1.2rem;color:var(--ink-2)}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--teal-ink)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(1.25rem,4.5vw,3rem)}
.wide{max-width:1460px;margin-inline:auto;padding-inline:clamp(1.25rem,4.5vw,3rem)}
.narrow{max-width:820px;margin-inline:auto;padding-inline:clamp(1.25rem,4.5vw,3rem)}
section{padding-block:clamp(3.4rem,7vw,6.4rem)}
.pt0{padding-top:0}.pb0{padding-bottom:0}
.band-sand{background:var(--sand)}
.band-deep{background:var(--deep);color:#EDEAF7}
.band-deep h2,.band-deep h3{color:#fff}

.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.8rem 1.3rem;z-index:200;border-radius:0 0 12px 0}
.skip:focus{left:0;top:0}
/* Menulinjen ligger fast i fuld bredde som før — kun materialet er skiftet
   til liquid glass: sløring, mætning og et tyndt lysstrøg langs overkanten.
   Let øverst på siden, hvor filmen kører bagved, og fastere når man ruller. */
header{position:fixed;inset:0 0 auto;z-index:100;
  background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(16px) saturate(190%);backdrop-filter:blur(16px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 0 rgba(12,27,46,.05);
  transition:background .3s,box-shadow .3s}
header.stuck{
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.56));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 0 rgba(12,27,46,.09),
             0 12px 32px -26px rgba(0,28,61,.4)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header{background:rgba(252,251,254,.92)}
}
body.menu header,body.menu header.stuck{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:var(--paper);box-shadow:none}
.nav{display:flex;align-items:center;gap:.85rem;height:var(--nav-h)}
.brand{margin-right:auto;display:block}
.brand img{height:46px;width:auto}
.links{display:flex;gap:.05rem}
.links a{position:relative;font-size:.92rem;font-weight:500;color:var(--ink-2);white-space:nowrap;padding:.5rem .62rem;border-radius:99px;transition:color .2s}
.links a::after{content:"";position:absolute;left:.62rem;right:.62rem;bottom:.26rem;height:1.5px;background:var(--brand);transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--ease-out);border-radius:2px}
.links a:hover{color:var(--ink)}
.links a:hover::after,.links a[aria-current]::after{transform:scaleX(1)}
.links a[aria-current]{color:var(--ink);font-weight:600}
.nav-tel{display:flex;align-items:center;gap:.42rem;font-weight:600;font-size:.9rem;white-space:nowrap;padding:.4rem .2rem}
.nav-tel svg{color:var(--teal-ink)}
.nav-tel:hover{color:var(--brand)}
@media (max-width:1500px){.nav-tel{display:none}}
.burger{display:none;width:46px;height:46px;border-radius:14px;position:relative;margin-right:-8px}
.burger i{position:absolute;left:12px;right:12px;height:1.8px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:23px}.burger i:nth-child(3){top:29px}
.menu .burger i:nth-child(1){top:23px;transform:rotate(45deg)}
.menu .burger i:nth-child(2){opacity:0;transform:scaleX(.3)}
.menu .burger i:nth-child(3){top:23px;transform:rotate(-45deg)}

.btn{position:relative;display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem;padding:.86rem 1.5rem;border-radius:99px;overflow:hidden;white-space:nowrap;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),color .3s,background .3s}
.btn span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.5rem}
.btn svg{transition:transform .3s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn::before{content:"";position:absolute;inset:0;border-radius:99px;transform:translateY(101%);transition:transform .42s var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 10px 26px -12px rgba(1,69,125,.6)}
.btn-brand::before{background:var(--teal-ink)}
.btn-brand:hover{transform:translateY(-2px)}
.btn-login{box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}
.btn-login::before{background:var(--ink)}
.btn-login:hover{color:#fff;transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-out{box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-out::before{background:var(--ink)}
.btn-out:hover{color:var(--paper);transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-paper{background:#fff;color:var(--ink)}
.btn-paper::before{background:var(--teal)}
.btn-paper:hover{color:var(--deep);transform:translateY(-2px)}
.btn-lg{padding:1.04rem 1.9rem;font-size:1.02rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.tlink{display:inline-flex;align-items:center;gap:.42rem;font-weight:600;font-size:.93rem;color:var(--brand);position:relative}
.tlink::after{content:"";position:absolute;left:0;right:1.3rem;bottom:-2px;height:1.4px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease-out)}
.tlink:hover::after{transform:scaleX(1)}
.tlink svg{transition:transform .3s var(--ease-out)}
.tlink:hover svg{transform:translateX(3px)}

.r{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.r.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}
.wline{display:block;overflow:hidden}
.wline i{display:block;font-style:inherit;transform:translateY(105%);transition:transform .95s var(--ease-out)}
.in .wline i{transform:none}
.wline:nth-child(2) i{transition-delay:.08s}
.wline:nth-child(3) i{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}.wline i{transform:none;transition:none}}

/* hero */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(1.5rem,5vh,3.6rem));padding-bottom:clamp(2rem,5vw,3.6rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1rem,3vw,3rem);align-items:center}
.swap{position:relative;display:inline-block;color:var(--brand);font-style:italic;font-weight:500}
.swap b{font-weight:500;display:inline-block;transition:opacity .42s var(--ease),transform .42s var(--ease),filter .42s}
.swap.out b{opacity:0;transform:translateY(-.22em);filter:blur(6px)}
.native-note{display:flex;align-items:center;gap:.8rem;margin-top:1.5rem;min-height:2rem;transition:opacity .42s var(--ease);font-size:1rem;color:var(--ink-2)}
.native-note.out{opacity:0}
.native-note b{font-size:1.3rem;color:var(--teal-ink);font-weight:500;unicode-bidi:isolate}
.native-note s{text-decoration:none;color:var(--ink-3);font-size:.85rem}
.hero .lead{margin:1.4rem 0 2rem}
.trust-row{display:flex;gap:1rem 1.9rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.trust-row div{display:flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:500;color:var(--ink-2)}
.trust-row svg{color:var(--teal-ink);flex:none}

/* globe */
.gstage{position:relative;width:100%;aspect-ratio:1;max-width:640px;margin-inline:auto;touch-action:pan-y}
.gstage canvas{width:100%;height:100%;cursor:grab}
.gstage canvas.drag{cursor:grabbing}
.gtip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;padding:.4rem .78rem;border-radius:99px;font-size:.79rem;font-weight:500;white-space:nowrap;transform:translate(-50%,-165%);opacity:0;transition:opacity .2s;z-index:3}
.gtip.on{opacity:1}
.gtip u{text-decoration:none;opacity:.62;margin-left:.35rem;unicode-bidi:isolate}
.ghint{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);z-index:2;font-size:.75rem;color:var(--ink-2);background:rgba(255,255,255,.8);backdrop-filter:blur(8px);padding:.34rem .9rem;border-radius:99px;border:1px solid var(--line-2);white-space:nowrap}

/* strip */
.strip{padding-block:clamp(1.6rem,3vw,2.4rem);border-block:1px solid var(--line-2)}
.strip p{font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);font-weight:600;text-align:center;margin:0 auto 1.4rem}
.strip ul{list-style:none;display:flex;justify-content:center;gap:.6rem 2.6rem;flex-wrap:wrap}
.strip li{display:flex;align-items:center;gap:.5rem;font-family:var(--serif);font-size:1.06rem;font-weight:500;color:var(--brand);opacity:.88}
.strip svg{opacity:.6;flex:none;color:var(--teal-ink)}

/* cards */
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:clamp(1.4rem,2.2vw,2rem);display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--card);overflow:hidden;isolation:isolate;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .4s}
a.card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--deep);transform:translateY(100%);transition:transform .5s var(--ease-out)}
a.card:hover{transform:translateY(-6px);box-shadow:var(--card-hi);border-color:transparent}
a.card:hover::before{transform:translateY(0)}
a.card:hover h3,a.card:hover .num-tag{color:#fff}
a.card:hover p{color:rgba(255,255,255,.74)}
a.card:hover .ico{background:rgba(255,255,255,.13);color:#fff}
a.card:hover .tlink{color:#7FD9E8}
.card h3,.card p,.card .ico,.card .num-tag,.card .tlink{transition:color .4s,background .4s}
.ico{width:52px;height:52px;border-radius:15px;background:var(--teal-soft);color:var(--teal-ink);display:grid;place-items:center;margin-bottom:.3rem}
.card p{color:var(--ink-2);font-size:.96rem;flex:1}
.num-tag{position:absolute;top:1.4rem;right:1.6rem;font-family:var(--serif);font-size:.92rem;color:var(--ink-3);font-style:italic}
.checks{list-style:none;display:grid;gap:.85rem}
.checks li{display:flex;gap:.75rem;align-items:flex-start;color:var(--ink-2);font-size:.98rem}
.checks svg{color:var(--teal-ink);flex:none;margin-top:.3rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.6rem);align-items:center}

/* page hero + breadcrumb */
.phero{padding-top:calc(var(--nav-h) + clamp(2rem,5vh,3.6rem));padding-bottom:clamp(1.8rem,3.5vw,3rem)}
.phero h1{font-size:clamp(2.2rem,4.4vw,3.9rem)}
.phero .lead{margin-top:1.4rem;max-width:46em}
.crumb{font-size:.81rem;color:var(--ink-3);margin-bottom:1.5rem}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--ink-2)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 1rem}
.stat{padding-left:1.3rem;border-left:1px solid rgba(255,255,255,.18)}
.stat .n{font-family:var(--serif);font-size:clamp(2.7rem,5vw,4.2rem);font-weight:600;letter-spacing:-.035em;line-height:1;color:#fff}
.stat .n u{text-decoration:none;color:#5FCFE2}
.stat .l{font-size:.87rem;color:rgba(237,234,247,.7);margin-top:.6rem;line-height:1.45}

/* process */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.step{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:clamp(1.4rem,2.2vw,2rem);box-shadow:var(--card)}
.step .n{font-family:var(--serif);font-size:2.7rem;font-style:italic;font-weight:500;color:var(--brand);line-height:1}
.step h3{margin:.8rem 0 .5rem}
.step p{color:var(--ink-2);font-size:.96rem}

/* quote */
.quote{max-width:900px;margin-inline:auto;text-align:center}
.quote i{font-family:var(--serif);font-size:4.6rem;line-height:0;color:var(--teal);display:block;margin-bottom:1.6rem;font-style:normal}
.quote blockquote{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.28;font-weight:500;letter-spacing:-.02em;max-width:none}
.quote figcaption{margin-top:1.6rem;font-size:.85rem;letter-spacing:.09em;color:var(--ink-3);text-transform:uppercase;font-weight:600}

/* conversation */
.conv-sec .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,4vw,4.2rem);align-items:center}
.conv{background:var(--surface);border-radius:22px;padding:clamp(1.3rem,2.4vw,2.2rem);padding-top:4rem;box-shadow:var(--card);border:1px solid var(--line-2);min-height:440px;display:flex;flex-direction:column;gap:.8rem;justify-content:flex-end;position:relative;overflow:hidden}
.conv-head{position:absolute;top:0;left:0;right:0;padding:.85rem 1.3rem;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:.55rem;font-size:.77rem;color:var(--ink-3);font-weight:500;background:var(--surface);z-index:2}
.conv-head b{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:blip 1.9s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.bub{max-width:82%;padding:.82rem 1.1rem;border-radius:17px;font-size:.97rem;line-height:1.5;opacity:0;transform:translateY(14px);animation:bubIn .55s var(--ease-out) forwards}
.bub.l{align-self:flex-start;background:var(--sand);border-bottom-left-radius:6px}
.bub.r{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:6px}
.bub small{display:block;font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;opacity:.58;margin-bottom:.28rem;font-weight:600}
.bub .txt{unicode-bidi:isolate}
.bub.rtl .txt{direction:rtl;text-align:right}
.bub u{display:block;text-decoration:none;font-size:.84rem;font-style:italic;opacity:.6;margin-top:.4rem;direction:ltr;text-align:left}
@keyframes bubIn{to{opacity:1;transform:none}}
.conv-mid{align-self:center;display:flex;align-items:center;gap:.45rem;font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-ink);font-weight:600;opacity:0;animation:bubIn .45s var(--ease-out) forwards}
.conv-mid i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;animation:dot 1.2s infinite}
.conv-mid i:nth-child(2){animation-delay:.16s}.conv-mid i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* journey */
.journey{position:relative;background:var(--sand)}
.jsticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.jgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,4vw,4rem);align-items:center;width:100%}
.jglobe{position:relative;width:100%;aspect-ratio:1;max-width:620px;margin-inline:auto}
.jtext{position:relative;min-height:400px;padding-top:3.2rem}
.jstep{position:absolute;inset:3.2rem 0 0;opacity:0;transform:translateY(26px);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.jstep.on{opacity:1;transform:none;pointer-events:auto}
.jstep h2{margin:.4rem 0 1rem}
.jbar{position:absolute;top:0;left:0;display:flex;gap:.4rem}
.jbar i{display:block;width:34px;height:2.5px;border-radius:2px;background:var(--sand-2);transition:background .4s}
.jbar i.on{background:var(--brand)}
.jcount{font-family:var(--serif);font-size:.88rem;color:var(--ink-3);font-style:italic;margin-bottom:.5rem}
.jlangs{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:1.4rem}
.jlangs span{font-size:.85rem;padding:.38rem .85rem;border-radius:99px;background:rgba(255,255,255,.8);border:1px solid var(--line);color:var(--ink-2);font-weight:500}
.jlangs span u{text-decoration:none;color:var(--teal-ink);margin-left:.35rem;unicode-bidi:isolate}

/* language wall */
.wall-sec{overflow:hidden}
.wall{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.4rem;max-width:1400px;margin-inline:auto;padding-inline:1rem}
.wall b{font-family:var(--serif);font-weight:500;font-size:clamp(1rem,1.9vw,1.7rem);color:var(--ink-3);unicode-bidi:isolate;will-change:transform;transition:color .45s var(--ease);line-height:1.5}
.wall b.hot{color:var(--brand)}
.wall b.warm{color:var(--teal-ink)}

/* language index */
.sprog-l{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:start}
.sprog-g{position:sticky;top:calc(var(--nav-h) + 1rem)}
.search{display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1.5px solid var(--line);border-radius:99px;padding:.82rem 1.35rem;transition:border-color .25s,box-shadow .25s}
.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(1,69,125,.09)}
.search input{border:0;outline:0;font:inherit;width:100%;background:none;color:var(--ink)}
.chips{display:flex;gap:.42rem;flex-wrap:wrap;margin:1rem 0 .85rem}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:.4rem .95rem;font-size:.84rem;font-weight:500;color:var(--ink-2);transition:.22s}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.lcount{font-size:.86rem;color:var(--ink-3);margin-bottom:.9rem}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(204px,1fr));gap:.65rem}
.lc{display:block;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:.85rem 1rem;transition:transform .26s var(--ease-out),box-shadow .26s var(--ease-out),border-color .26s}
.lc:hover,.lc.hl{transform:translateY(-3px);box-shadow:var(--card);border-color:var(--line)}
.lc.hl{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.lc b{font-size:.96rem;display:block}
.lc em{font-style:normal;font-size:.84rem;color:var(--teal-ink);unicode-bidi:isolate;display:block;margin-top:.08rem}
.lc s{text-decoration:none;font-size:.73rem;color:var(--ink-3);display:flex;justify-content:space-between;gap:.5rem;margin-top:.4rem}
.nohit{padding:2.4rem;text-align:center;color:var(--ink-2);background:var(--sand);border-radius:18px}

/* language detail */
.lang-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:center}
.lang-native{text-align:left;font-family:var(--serif);font-size:clamp(2.2rem,4.6vw,3.6rem);color:var(--teal-ink);font-weight:500;unicode-bidi:isolate;line-height:1.15;margin-bottom:.5rem}
.facts{list-style:none;display:grid;gap:0;background:var(--surface);border:1px solid var(--line-2);border-radius:20px;overflow:hidden;box-shadow:var(--card)}
.facts li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.3rem;border-bottom:1px solid var(--line-2);font-size:.94rem}
.facts li:last-child{border-bottom:0}
.facts b{color:var(--ink-3);font-weight:500}
.facts span{font-weight:600;text-align:right;unicode-bidi:isolate}
.pill-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;padding:.42rem .95rem;border-radius:99px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-weight:500;transition:.22s}
a.pill:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.pill u{text-decoration:none;color:var(--teal-ink);unicode-bidi:isolate}

/* FAQ */
.faq{display:grid;gap:.7rem;max-width:860px}
.faq details{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:16px;padding:0 1.4rem;box-shadow:var(--card);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;font-weight:600;font-size:1.02rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.2rem;top:50%;width:9px;height:9px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq div.a{padding:0 0 1.25rem;color:var(--ink-2);font-size:.97rem}
.faq div.a p+p{margin-top:.7rem}

/* dual path */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.path{background:var(--surface);border:1px solid var(--line-2);border-radius:22px;padding:clamp(1.5rem,2.6vw,2.2rem);box-shadow:var(--card);display:flex;flex-direction:column;gap:.7rem}
.path.hi{background:var(--deep);color:#EDEAF7;border-color:transparent}
.path.hi h3{color:#fff}
.path.hi p{color:rgba(237,234,247,.72)}
.path p{color:var(--ink-2);font-size:.96rem;flex:1}
.path .tag{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--teal-ink)}
.path.hi .tag{color:#7FD9E8}

/* CTA */
.cta{position:relative;background:var(--deep);color:#EDEAF7;border-radius:28px;overflow:hidden;padding:clamp(2.2rem,4.6vw,4rem);display:grid;grid-template-columns:1.35fr .65fr;gap:2rem;align-items:center;isolation:isolate}
.cta h2{color:#fff}
.cta p{color:rgba(237,234,247,.74);margin-top:.85rem}
.cta .acts{display:flex;flex-direction:column;gap:.9rem;align-items:flex-end}
.cta .tel{font-family:var(--serif);font-size:1.5rem;display:flex;align-items:center;gap:.55rem;transition:color .25s}
.cta .tel:hover{color:#7FD9E8}
/* dekorative cirkler: må ALDRIG opsluge klik på knapperne */
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.11);pointer-events:none;z-index:0}
.cta>*{position:relative;z-index:1}
.cta::before{width:240px;height:240px;right:-70px;top:-80px}
.cta::after{width:400px;height:400px;right:-140px;top:-150px}

/* forms */
.form{background:var(--surface);border:1px solid var(--line-2);border-radius:22px;padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--card)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.full{grid-column:1/-1}
label{font-size:.84rem;font-weight:600;display:block;margin-bottom:.4rem}
label s{text-decoration:none;font-weight:400;color:var(--ink-3)}
input,select,textarea{width:100%;font:inherit;font-size:.95rem;padding:.74rem .95rem;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);transition:border-color .22s,box-shadow .22s,background .22s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(1,69,125,.09);background:#fff}
textarea{resize:vertical;min-height:100px}
.sent{display:none;margin-top:1.2rem;background:var(--teal-soft);border:1.5px solid var(--teal-ink);color:var(--teal-ink);padding:1rem 1.2rem;border-radius:13px;font-weight:500}
.sent.err{background:#FCEDEA;border-color:#B4331F;color:#8E2716}
.hp,.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button[disabled]{opacity:.6;pointer-events:none}
.cgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
.side{display:grid;gap:1.1rem}
.big-tel{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:600;letter-spacing:-.02em}
.big-tel:hover{color:var(--brand)}
.office b{font-family:var(--serif);font-size:1.12rem;font-weight:600;display:block}
.office span{color:var(--ink-2);font-size:.94rem;display:block}

/* timeline */
.tl{position:relative;max-width:760px;margin-inline:auto;padding-left:2.3rem}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:var(--line)}
.tlx{position:relative;padding-bottom:2.3rem}
.tlx:last-child{padding-bottom:0}
.tlx::before{content:"";position:absolute;left:-2.3rem;top:.5rem;width:11px;height:11px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px var(--brand-soft)}
.tlx b{font-family:var(--serif);font-size:1.36rem;font-weight:600;color:var(--brand)}
.tlx .tlt{font-size:1.12rem;margin:.25rem 0 .4rem;letter-spacing:-.012em}
.tlx p+p{margin-top:.65rem}
.tlx p{color:var(--ink-2);margin-top:.3rem}

/* footer */
footer{background:var(--deep);color:rgba(237,234,247,.76);padding:clamp(3.2rem,6vw,4.6rem) 0 2rem}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.2rem}
footer img.flogo{height:38px;width:auto;margin-bottom:1rem}
footer h4{font-size:.73rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(237,234,247,.62);margin-bottom:1rem;font-weight:600;font-family:var(--sans)}
footer ul{list-style:none;display:grid;gap:.55rem}
footer a{color:rgba(237,234,247,.84);font-size:.94rem;transition:color .2s}
footer a:hover{color:#fff}
.ftag{font-family:var(--serif);font-style:italic;font-size:1.04rem;color:rgba(237,234,247,.82);max-width:22em;line-height:1.45}
.fbot{border-top:1px solid rgba(255,255,255,.14);margin-top:2.6rem;padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.81rem;color:rgba(237,234,247,.62)}
.fbot a{font-size:.81rem;color:rgba(237,234,247,.68)}

/* responsive */
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:1.5rem}
  .gstage{max-width:440px;order:-1}
  .hero{padding-top:calc(var(--nav-h) + 1.2rem)}
  .conv-sec .wrap,.split,.sprog-l,.cgrid,.lang-hero,.paths{grid-template-columns:1fr}
  .sprog-g{position:static;max-width:430px;margin-inline:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps,.g3,.g4{grid-template-columns:repeat(2,1fr)}
  .cta{grid-template-columns:1fr}
  .cta .acts{align-items:flex-start}
  .fcols{grid-template-columns:1fr 1fr}
  .jsticky{height:auto;position:static;padding-block:clamp(2.4rem,6vw,4rem)}
  .jgrid{grid-template-columns:1fr;gap:1rem}
  .jtext{min-height:0;position:static;display:grid;gap:2.6rem;padding-top:0}
  .jstep{position:static;opacity:1;transform:none;pointer-events:auto}
  .jbar{display:none}
  .journey{height:auto!important}
}
@media (max-width:760px){
  .links{position:fixed;inset:var(--nav-h) 0 0;background:var(--paper);flex-direction:column;padding:2rem 1.6rem;gap:.1rem;transform:translateX(100%);transition:transform .45s var(--ease-out);overflow:auto;z-index:99}
  .menu .links{transform:none}
  .links a{font-family:var(--serif);font-size:1.65rem;font-weight:600;color:var(--ink);padding:.58rem .3rem}
  .links a::after{display:none}
  .links .mob{display:inline-flex!important;margin-top:1.2rem;justify-content:center;font-family:var(--sans)!important;font-size:1rem!important;font-weight:600!important;padding:.95rem 1.5rem!important}
  .links .mob.btn-brand{color:#fff!important}
  .links .mob.btn-login{color:var(--ink)!important;margin-top:.6rem}
  .burger{display:block}
  .g2,.g3,.g4,.fg,.fcols,.steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:1.5rem}
  .nav .btn-login{display:none}
  .nav .btn-brand{padding:.75rem 1.15rem;font-size:.88rem}
  .brand img{height:36px}
  .native-note{flex-direction:column;align-items:flex-start;gap:.15rem;margin-top:1.1rem}
  .native-note b{white-space:nowrap}
  .gstage{max-width:330px}
  .conv{min-height:400px;padding-top:3.6rem}
  .facts li{flex-direction:column;gap:.15rem}
  .facts span{text-align:left}
}
.links .mob{display:none}

/* ── AiTolk-teaser på forsiden ── */
.ai-teaser{padding-block:0}
.ai-teaser-in{position:relative;overflow:hidden;border-radius:28px;background:#0B0524;color:#EDEAF7;
  padding:clamp(2.2rem,4.6vw,3.8rem);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,3vw,3rem);align-items:center}
.ai-teaser-in::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 82% 10%,rgba(63,217,240,.18),transparent 62%),
             radial-gradient(600px 380px at 4% 96%,rgba(124,77,255,.22),transparent 60%),
             linear-gradient(rgba(124,77,255,.05) 1px,transparent 1px) 0 0/64px 64px,
             linear-gradient(90deg,rgba(124,77,255,.05) 1px,transparent 1px) 0 0/64px 64px}
.ai-teaser-in>*{position:relative}
.ai-teaser-in h2{color:#fff;margin-bottom:1rem}
.ai-teaser-in p{color:rgba(237,234,247,.74);max-width:34em}
.ai-teaser-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:#3FD9F0;margin-bottom:1.1rem;
  border:1px solid rgba(63,217,240,.35);border-radius:99px;padding:.32rem .8rem;background:rgba(63,217,240,.08)}
.ai-teaser-tag i{width:6px;height:6px;border-radius:50%;background:#3FD9F0;animation:tpulse 1.8s ease-in-out infinite}
@keyframes tpulse{0%,100%{opacity:1}50%{opacity:.35}}
.ai-teaser-viz{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.ai-teaser-viz .bars{display:flex;align-items:center;gap:3px;height:96px;width:100%;justify-content:center}
.ai-teaser-viz .bars i{display:block;width:4px;border-radius:2px;background:linear-gradient(180deg,#3FD9F0,#7C4DFF);
  height:var(--h);opacity:.85;animation:tbar 1.9s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.ai-teaser-ms{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:2.2rem;font-weight:700;
  color:#3FD9F0!important;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ai-teaser-ms u{text-decoration:none;font-size:.9rem;color:rgba(237,234,247,.5);margin-left:.15rem}
@media (prefers-reduced-motion:reduce){.ai-teaser-viz .bars i,.ai-teaser-tag i{animation:none}}
@media (max-width:900px){.ai-teaser-in{grid-template-columns:1fr}.ai-teaser-viz{order:-1}}

/* ══════════ SEKTIONSFARVER ══════════
   Hver del af sitet har sin egen tone, så man kan se på en side, hvor man er,
   uden at læse brødteksten. Tonerne er dæmpede og holder AA-kontrast på papir. */
:root{--accent:#0A6395;--accent-soft:#DDEEF9;--accent-rgb:10,99,149}
body.sec-ovs   {--accent:#2B5A93;--accent-soft:#E4EBF6;--accent-rgb:43,90,147}
body.sec-tegn  {--accent:#186B6B;--accent-soft:#DFF0EF;--accent-rgb:24,107,107}
body.sec-mentor{--accent:#4C5A85;--accent-soft:#E8EAF3;--accent-rgb:76,90,133}
body.sec-sprog {--accent:#1D4E89;--accent-soft:#E2EAF6;--accent-rgb:29,78,137}
body.sec-branche{--accent:#3B5C78;--accent-soft:#E5ECF2;--accent-rgb:59,92,120}
body.sec-bestil{--accent:#01457D;--accent-soft:#E1EBF6;--accent-rgb:1,69,125}
body.sec-om    {--accent:#2F5A70;--accent-soft:#E2EDF2;--accent-rgb:47,90,112}
.eyebrow{color:var(--accent)}
.ico{background:var(--accent-soft);color:var(--accent)}
.checks svg,.trust-row svg,.strip svg,.tlx b,.step .n{color:var(--accent)}
.tlx::before{background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.phero,.hub-hero,.fhero{position:relative;isolation:isolate}
.phero::before,.hub-hero::before,.fhero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1100px 520px at 94% -20%,rgba(var(--accent-rgb),.17),transparent 66%),
             radial-gradient(700px 340px at 2% 108%,rgba(var(--accent-rgb),.07),transparent 62%)}
body.ai .eyebrow{color:var(--teal)}

/* ══════════ UNDERMENU PÅ YDELSESSIDER ══════════ */
.subnav{position:sticky;top:var(--nav-h);z-index:60;background:rgba(250,249,252,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.subnav ul{list-style:none;display:flex;gap:.15rem;overflow-x:auto;padding:.5rem 0;scrollbar-width:none;-ms-overflow-style:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;white-space:nowrap;font-size:.88rem;font-weight:500;color:var(--ink-2);
  padding:.44rem .9rem;border-radius:99px;transition:background .22s,color .22s}
.subnav a:hover{background:var(--sand);color:var(--ink)}
.subnav a[aria-current]{background:var(--accent);color:#fff}
body.menu .subnav{display:none}

/* ══════════ BESTILLING — NAVET ══════════ */
.hub-hero{padding-top:calc(var(--nav-h) + clamp(1.8rem,4.5vh,3.2rem));padding-bottom:clamp(2rem,4vw,3.2rem)}
.hub-hero h1{font-size:clamp(2.4rem,5vw,4.1rem)}
.hub-hero .lead{margin-top:1.1rem;max-width:46em}
.hub-hero .lead a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:clamp(1.5rem,3vw,2.2rem)}
.pick{position:relative;display:flex;flex-direction:column;gap:.4rem;background:var(--surface);
  border:1px solid var(--line-2);border-radius:20px;padding:clamp(1.15rem,2vw,1.55rem);box-shadow:var(--card);
  isolation:isolate;overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.pick::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--deep);transform:translateY(100%);transition:transform .5s var(--ease-out)}
.pick:hover{transform:translateY(-6px);box-shadow:var(--card-hi);border-color:transparent}
.pick:hover::before{transform:none}
.pick .pi{width:48px;height:48px;border-radius:14px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;margin-bottom:.35rem;transition:background .35s,color .35s}
.pick b{font-family:var(--serif);font-size:1.16rem;font-weight:600;letter-spacing:-.015em;line-height:1.22;transition:color .35s}
.pick s{text-decoration:none;color:var(--ink-2);font-size:.91rem;line-height:1.45;flex:1;transition:color .35s}
.pick u{text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;font-size:.87rem;font-weight:600;color:var(--brand);margin-top:.5rem;transition:color .35s}
.pick u svg{transition:transform .3s var(--ease-out)}
.pick:hover u svg{transform:translateX(3px)}
.pick:hover b{color:#fff}
.pick:hover s{color:rgba(237,234,247,.74)}
.pick:hover u{color:#7FD9E8}
.pick:hover .pi{background:rgba(255,255,255,.13);color:#fff}
.pick-hi{background:var(--deep);color:#EDEAF7;border-color:transparent}
.pick-hi::before{background:#150742}
.pick-hi .pi{background:rgba(255,255,255,.12);color:#7FD9E8}
.pick-hi s{color:rgba(237,234,247,.74)}
.pick-hi u{color:#7FD9E8}

/* ══════════ BESTILLING — FORMULARSIDEN ══════════ */
.fhero{padding-top:calc(var(--nav-h) + clamp(1.4rem,3.5vh,2.4rem));padding-bottom:clamp(1.1rem,2.2vw,1.8rem)}
.fhead{display:flex;gap:1.4rem;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.fhead h1{font-size:clamp(2.1rem,4vw,3.2rem)}
.fhead .lead{margin-top:.8rem}
.fcall{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:.8rem 1.25rem;box-shadow:var(--card);transition:border-color .22s,transform .3s var(--ease-out)}
.fcall:hover{border-color:var(--brand);transform:translateY(-2px)}
.fcall svg{color:var(--accent);flex:none}
.fcall s{text-decoration:none;display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.fcall b{font-family:var(--serif);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;display:block}

.tp{border:0;margin-bottom:1.5rem;padding:0}
.tp legend{font-size:.84rem;font-weight:600;margin-bottom:.6rem;padding:0}
.tp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.tp-o{cursor:pointer;margin:0;display:block}
.tp-o input{position:absolute;opacity:0;width:1px;height:1px}
.tp-o>span{display:flex;flex-direction:column;gap:.2rem;height:100%;border:1.5px solid var(--line);
  border-radius:15px;padding:.9rem 1rem;background:var(--paper);transition:border-color .22s,background .22s,box-shadow .22s}
.tp-o svg{color:var(--ink-3);transition:color .22s;margin-bottom:.25rem}
.tp-o b{font-size:.98rem;font-weight:600}
.tp-o s{text-decoration:none;font-size:.81rem;color:var(--ink-3);line-height:1.35}
.tp-o:hover>span{border-color:var(--brand)}
.tp-o input:checked+span{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(1,69,125,.09)}
.tp-o input:checked+span svg{color:var(--brand)}
.tp-o input:checked+span s{color:var(--ink-2)}
.tp-o input:focus-visible+span{outline:2.5px solid var(--brand);outline-offset:3px}

.sep{display:flex;align-items:center;gap:.9rem;margin-top:.6rem;font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.sep::after{content:"";flex:1;height:1px;background:var(--line)}

.drop{position:relative;border:1.5px dashed var(--line);border-radius:15px;background:var(--paper);
  padding:1.3rem 1.1rem;text-align:center;transition:border-color .22s,background .22s}
.drop.over,.drop:focus-within{border-color:var(--brand);background:var(--brand-soft)}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.drop-in{display:flex;flex-direction:column;align-items:center;gap:.15rem;margin:0 auto;max-width:none;color:var(--ink-2)}
.drop-in svg{color:var(--accent);margin-bottom:.3rem}
.drop-in b{font-size:.97rem;color:var(--ink)}
.drop-in s{text-decoration:none;font-size:.85rem;color:var(--ink-3)}
.drop-list{list-style:none;display:grid;gap:.35rem;margin-top:.9rem;text-align:left;position:relative;z-index:1}
.drop-list li{display:flex;gap:.6rem;align-items:center;background:var(--surface);border:1px solid var(--line-2);
  border-radius:10px;padding:.45rem .7rem;font-size:.86rem}
.drop-list li u{text-decoration:none;margin-left:auto;color:var(--ink-3);font-size:.8rem;flex:none}
.drop-list li.bad{border-color:#B4331F;background:#FCEDEA;color:#8E2716}
.drop-list li.bad u{color:#8E2716}
.fnote{display:flex;gap:.5rem;align-items:flex-start;margin-top:.7rem;font-size:.85rem;color:var(--ink-2)}
.fnote svg{color:var(--accent);flex:none;margin-top:.22rem}
.fsend{margin-top:1.6rem;display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.fsend p{font-size:.85rem;color:var(--ink-3);margin:0;max-width:34ch}
.fsend p a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.mini-steps{list-style:none;display:grid;gap:.6rem;margin-top:.2rem}
.mini-steps li{display:flex;gap:.6rem;font-size:.9rem;color:var(--ink-2);align-items:flex-start}
.mini-steps b{flex:none;width:21px;height:21px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  font-size:.72rem;font-weight:700;display:grid;place-items:center;margin-top:.12rem}
[data-for][hidden]{display:none!important}
.form-page .side{position:sticky;top:calc(var(--nav-h) + 1.2rem)}
.form-page .cgrid{grid-template-columns:1.32fr .68fr}

@media (max-width:1180px){.picks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1040px){.form-page .side{position:static}}
@media (max-width:640px){
  .picks{grid-template-columns:1fr}
  .tp-row{grid-template-columns:1fr}
  .fhead{align-items:flex-start}
  .fcall{width:100%}
}

/* ══════════ GLOBUS: zoom, valgt sprog, kort ══════════ */
.gzoom{position:absolute;right:1%;top:3%;display:flex;flex-direction:column;gap:.35rem;z-index:3}
.gzoom button{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.9);
  border:1px solid var(--line);color:var(--ink-2);display:grid;place-items:center;
  box-shadow:var(--card);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.2s}
.gzoom button:hover{color:var(--brand);border-color:var(--brand)}
.gcard{position:relative;margin-top:1rem;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:1.15rem 1.35rem;box-shadow:var(--card);animation:gcin .35s var(--ease-out)}
@keyframes gcin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gcard{animation:none}}
.gcard .gx{position:absolute;top:.55rem;right:.6rem;width:30px;height:30px;border-radius:9px;
  color:var(--ink-3);display:grid;place-items:center;transition:.2s}
.gcard .gx:hover{background:var(--sand);color:var(--ink)}
.gcard .gnat{font-family:var(--serif);font-size:1.55rem;font-weight:500;color:var(--accent);
  unicode-bidi:isolate;line-height:1.2;padding-right:2rem}
.gcard h3{margin:.2rem 0 .15rem}
.gcard .gmeta{font-size:.86rem;color:var(--ink-3)}
.gcard .gacts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.95rem}
.gcard .gacts .btn{font-size:.88rem;padding:.62rem 1.15rem}
.gfoot{font-size:.8rem;color:var(--ink-3);margin-top:.85rem;max-width:none}

/* ══════════ MENNESKER BAG SAMTALEN ══════════
   Fotoet ligger som en dæmpet baggrund bag samtalekortet — mennesker, ikke
   pynt. Masken lader dem stige op af papiret, og sløret til venstre sikrer,
   at overskrift og brødtekst altid står på ren papirfarve. Kontrasten må
   aldrig afhænge af, hvor lyst billedet tilfældigvis er lige der. */
.conv-sec{position:relative;isolation:isolate;overflow:hidden;
  padding-bottom:clamp(3.5rem,8vw,7rem)}
.conv-sec::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(mennesker.webp) center calc(100% + 78px)/100% auto no-repeat;
  filter:saturate(.6) contrast(.96);opacity:.62;
  -webkit-mask-image:linear-gradient(180deg,transparent 0 10%,#000 38%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0 10%,#000 38%,#000 100%)}
.conv-sec::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(97deg,var(--paper) 0 27%,rgba(250,249,252,.78) 46%,rgba(250,249,252,.34) 72%,rgba(250,249,252,.28) 100%)}
.conv-sec .conv{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@media (max-width:1040px){
  .conv-sec{padding-bottom:clamp(2.5rem,10vw,5rem)}
  .conv-sec::before{opacity:.5}
  .conv-sec::after{background:linear-gradient(180deg,var(--paper) 0 30%,rgba(250,249,252,.7) 52%,rgba(250,249,252,.42) 100%)}
}
/* På telefon bliver billedet til en stribe af tøj uden ansigter. Så hellere
   ingenting — kortet er pointen på den bredde. */
@media (max-width:760px){
  .conv-sec::before,.conv-sec::after{display:none}
  .conv-sec{padding-bottom:clamp(3.4rem,7vw,6.4rem)}
}

/* ══════════ NOTE UNDER ENHEDSVISNINGEN ══════════ */
.dev-note{font-size:.8rem;color:var(--ink-3);text-align:center;max-width:34ch;margin-top:-.4rem}

/* ══════════ LEVENDE BAGGRUND BAG ÆGTE GLAS ══════════
   Filmen viser verdens store byer i dagslys og SKAL kunne ses. Over den
   ligger én rude — Apples liquid glass: næsten gennemsigtig, men med
   sløring, mætning, en lys kant og et indre højlys, så den opfører sig som
   glas og ikke som mælkeglas. Sitets egne farver holdes: lys bund, mørk
   skrift. Båndet bag filmen har en fast lys farve, så teksten har bund at
   stå på, også hvis videoen ikke må afspilles. */
.hero,.story-sec{position:relative;isolation:isolate;overflow:hidden;
  background:#E9E7F3}
.bg-video,.story-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-3;pointer-events:none}
/* ── forsidens billedkarrusel ──
   Syv billeder deler ét kredsløb. Hvert dias er fremme i 7,4 s inklusive
   1,4 s krydsfade, og forskydes med --n × 6 s, så de afløser hinanden.
   Zoomen er lagt i de samme 17,6 % af kredsløbet, som diaset er synligt i
   — så bevægelsen sker, mens man ser den, og står stille resten af tiden. */
.bg-foto{position:absolute;inset:0;z-index:-3;pointer-events:none;overflow:hidden;
  background:var(--sand-2)}
.dias{position:absolute;inset:0;display:block;opacity:0;
  animation:diasSkift 42s linear infinite;animation-delay:calc(var(--n) * -6s)}
.dias img{width:100%;height:100%;object-fit:cover;object-position:center 48%;
  transform-origin:center 55%;
  animation:diasZoomInd 42s ease-out infinite;animation-delay:calc(var(--n) * -6s)}
/* hvert andet dias zoomer ud i stedet, så det ikke bliver ensformigt */
.dias:nth-child(2n) img{animation-name:diasZoomUd;transform-origin:58% 45%}
.dias:nth-child(3n) img{transform-origin:42% 60%}

@keyframes diasSkift{
  0%{opacity:0}  3.3%{opacity:1}  14.3%{opacity:1}  17.6%{opacity:0}  100%{opacity:0}
}
@keyframes diasZoomInd{
  0%{transform:scale(1.02)}  17.6%{transform:scale(1.13)}  100%{transform:scale(1.13)}
}
@keyframes diasZoomUd{
  0%{transform:scale(1.13)}  17.6%{transform:scale(1.02)}  100%{transform:scale(1.02)}
}
/* Uden bevægelse: første billede står stille. Resten hentes aldrig. */
@media (prefers-reduced-motion:reduce){
  .dias{animation:none}
  .dias:first-child{opacity:1}
  .dias:not(:first-child){display:none}
  .dias img{animation:none;transform:none}
}

/* ── YouTube-film som baggrund ──
   En iframe kan ikke object-fit:cover, så filmen skaleres med container-
   enheder: den fylder båndets bredde og bliver 16:9 høj, men vokser til
   båndets højde, hvis det er det høje mål. Resultatet er samme beskæring
   som en <video> med cover. */
.yt-hold{position:absolute;inset:0;overflow:hidden;z-index:-3;pointer-events:none;
  container-type:size;opacity:0;transition:opacity .9s var(--ease)}
.yt-hold.klar{opacity:1}
.yt-hold iframe{position:absolute;top:50%;left:50%;translate:-50% -50%;border:0;
  width:100cqw;height:56.25cqw;min-height:100cqh;min-width:177.7778cqh}
@supports not (container-type:size){
  .yt-hold iframe{width:100vw;height:56.25vw;min-height:100vh;min-width:177.7778vh}
}
/* når filmen kører, er den tegnede by overflødig */
.yt-hold.klar ~ .bg-video,.yt-hold.klar ~ .story-video{opacity:0}

/* ── samtykke ──
   YouTube sender data til Google, så filmen må først hentes, når den
   besøgende har sagt ja. Indtil da kører den tegnede by. */
.samtykke{position:fixed;left:50%;bottom:clamp(.8rem,2vw,1.4rem);translate:-50% 0;
  z-index:150;max-width:min(660px,calc(100vw - 2rem));display:flex;align-items:center;
  gap:1rem 1.2rem;flex-wrap:wrap;justify-content:center;
  padding:.9rem 1.15rem;border-radius:20px;
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.66));
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 44px -26px rgba(0,28,61,.5);
  font-size:.86rem;color:var(--ink-2);line-height:1.5;
  animation:samtykke-ind .5s var(--ease-out) both}
@keyframes samtykke-ind{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.samtykke{animation:none}}
.samtykke p{margin:0;max-width:42ch;flex:1 1 22ch}
.samtykke a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.samtykke div{display:flex;gap:.5rem;flex:none}
.fknap{font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;padding:0;cursor:pointer}
.fknap:hover{color:var(--brand)}
.samtykke button{font-size:.84rem;font-weight:600;padding:.5rem 1.05rem;border-radius:99px;
  transition:background .25s,color .25s,box-shadow .25s}
.samtykke .ja{background:var(--brand);color:#fff}
.samtykke .ja:hover{background:var(--teal-ink)}
.samtykke .nej{box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}
.samtykke .nej:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
body.ai .samtykke{background:linear-gradient(150deg,rgba(30,17,72,.9),rgba(11,5,36,.86));
  border-color:rgba(163,140,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 50px -28px #000}

/* et ganske let lyst slør — ellers ingenting, byen skal ses */
.bg-glas,.story-glas{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 36%,rgba(255,255,255,0),rgba(250,249,252,.16))}

/* ── selve glasruden ── */
.glaskort,.story-kort{position:relative;border-radius:30px;
  padding:clamp(1.5rem,2.8vw,2.6rem);
  background:linear-gradient(147deg,rgba(255,255,255,.15),rgba(255,255,255,.035) 48%,rgba(255,255,255,.1));
  -webkit-backdrop-filter:blur(2.5px) saturate(124%);backdrop-filter:blur(2.5px) saturate(124%);
  border:1px solid rgba(255,255,255,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 22px 64px -48px rgba(0,28,61,.28)}

/* Læsefeltet: kun bag selve teksten dæmpes byen — resten af ruden er klar,
   så filmen kan ses igennem den. */
.glaskort::before,.story-kort::before{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;z-index:0}
.glaskort::before{background:linear-gradient(99deg,rgba(255,255,255,.88),rgba(255,255,255,.74) 28%,rgba(255,255,255,.32) 46%,rgba(255,255,255,.05) 60%,rgba(255,255,255,0) 70%)}
.story-kort::before{background:linear-gradient(170deg,rgba(255,255,255,.86),rgba(255,255,255,.8))}
.glaskort>*,.story-kort>*{position:relative;z-index:1}

/* kanten brydes som i rigtigt glas: et lyst strøg langs øverste venstre hjørne */
.glaskort::after,.story-kort::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.62),rgba(255,255,255,0) 34%,
             rgba(255,255,255,0) 66%,rgba(255,255,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
/* uden backdrop-filter (ældre browsere) må ruden være tættere for at kunne læses */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glaskort,.story-kort{background:rgba(252,251,254,.9)}
}

/* Når ruden er næsten klar, skal skriften selv bære kontrasten. En blød hvid
   glorie lægger sig om bogstaverne uden at ses som en skygge. */
.hero .hero-txt,.story-kort{text-shadow:0 1px 2px rgba(255,255,255,.85),0 2px 16px rgba(255,255,255,.7)}
.hero .btn,.story-kort .btn{text-shadow:none}

/* ── forsidens hero ──
   Her er ruden helt væk: ingen flade, ingen sløring, ingen kant. Billedet
   står ubrudt. I stedet får tekstsøjlen sin egen bløde sky, der er tættest
   bag bogstaverne og toner ud til ingenting — så man kan læse uden at der
   ligger et panel hen over motivet. */
.hero .glaskort{background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding-inline:0;padding-block:clamp(1rem,2vw,1.8rem)}
.hero .glaskort::before,.hero .glaskort::after{display:none}
.hero .hero-txt{position:relative;z-index:1;
  padding:clamp(1.1rem,2vw,1.9rem) clamp(1.3rem,2.4vw,2.4rem)}
.hero .hero-txt::before{content:"";position:absolute;z-index:-1;
  inset:-34% -30% -26% -22%;pointer-events:none;
  /* radierne holdes inden for kassen, så skyen tonet helt ud, før den
     møder kanten — ellers står der en synlig lige linje i billedet */
  background:radial-gradient(66% 46% at 35% 50%,
    rgba(255,255,255,.96),rgba(255,255,255,.9) 30%,
    rgba(255,255,255,.62) 52%,rgba(255,255,255,.22) 72%,rgba(255,255,255,0) 92%)}

.hero{padding-bottom:clamp(2.6rem,6vw,4.4rem)}
.hero-grid{align-items:center}
.hero .gstage{max-width:none}
.hero .ghint{background:rgba(255,255,255,.8)}
/* på det lyse filmbånd er --ink-3 lige under AA — denne ene linje går et trin ned */
.hero .native-note s{color:var(--ink-2)}

/* ── tidslinjen på Om os ── */
.story-ind{position:relative}
.story-kort{max-width:900px;margin-inline:auto}
.story-sec .tl::before{background:rgba(1,69,125,.18)}

/* På telefon er video dyr på data og lille at se på — plakatbilledet gør det. */
@media (max-width:760px){
  .bg-video,.story-video{display:none}
  .story-sec{background:#E9E7F3 url(om-os-plakat.jpg) center/cover no-repeat}
}
@media (prefers-reduced-motion:reduce){
  .story-video{display:none}
  .story-sec{background:#E9E7F3 url(om-os-plakat.jpg) center/cover no-repeat}
}


/* ══════════ RINGEKNAP ══════════
   Ligger fast i nederste højre hjørne på alle sider. Rød, fordi den skal
   kunne findes uden at man leder — og fordi den ikke må forveksles med
   sitets egne blå knapper. På telefon fylder den mere: dér er et opkald
   ét tryk væk, hvor formularen er tolv felter. */
.ringknap{position:fixed;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);
  z-index:120;display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.25rem;border-radius:99px;
  background:linear-gradient(160deg,#D42B2B,#B3161A);color:#fff;
  font-weight:700;font-size:.95rem;line-height:1;white-space:nowrap;
  box-shadow:0 10px 26px -10px rgba(160,10,15,.75),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s}
.ringknap svg{flex:none}
.ringknap b{font-weight:700;letter-spacing:.01em}
.ringknap span{display:none}
.ringknap:hover{transform:translateY(-2px);background:linear-gradient(160deg,#E03434,#C21A1E);
  box-shadow:0 16px 34px -12px rgba(160,10,15,.85),inset 0 1px 0 rgba(255,255,255,.32)}
.ringknap:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* en rolig puls, så øjet fanger den — kun én gang i minuttet, ikke som en alarm */
@keyframes ringpuls{
  0%,92%,100%{box-shadow:0 10px 26px -10px rgba(160,10,15,.75),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 0 rgba(212,43,43,.5)}
  95%{box-shadow:0 10px 26px -10px rgba(160,10,15,.75),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 14px rgba(212,43,43,0)}
}
.ringknap{animation:ringpuls 12s ease-out infinite}
@media (prefers-reduced-motion:reduce){.ringknap{animation:none}}

/* på telefon: nummeret væk, teksten frem — knappen bliver bredere og lettere at ramme */
@media (max-width:760px){
  .ringknap{left:clamp(.8rem,4vw,1.2rem);right:clamp(.8rem,4vw,1.2rem);
    bottom:.9rem;justify-content:center;padding:1.05rem 1.2rem;font-size:1.02rem;
    border-radius:18px}
  .ringknap span{display:inline}
  .ringknap b{opacity:.92;font-weight:600}
}
/* mobilmenuen ligger over — så skal knappen væk */
body.menu .ringknap{display:none}

/* Knappen svæver over siden og ville ellers dække de nederste links i foden.
   Derfor gøres foden tilsvarende højere — mest på telefon, hvor knappen går
   fra kant til kant. */
footer{padding-bottom:clamp(2rem,4vw,3rem)}
@media (min-width:761px){footer{padding-bottom:calc(clamp(2rem,4vw,3rem) + 64px)}}
@media (max-width:760px){footer{padding-bottom:calc(clamp(2rem,4vw,3rem) + 104px)}}


/* ══════════ SOCIALE YDELSER ══════════
   Afsnittet er sitets andet ben og skal kunne kendes fra tolkedelen på et
   halvt sekund. Derfor: et fotobanner øverst, og én farve pr. ydelse, der
   følger med hele vejen — i undermenuen, i sidens accent og på kortene.
   Alle syv farver bærer hvid tekst med mindst 6:1. */
body.yd-alle          {--accent:#01457D;--accent-soft:#E1EBF6;--accent-rgb:1,69,125}
body.yd-mentor        {--accent:#1A6B4C;--accent-soft:#DFF0E7;--accent-rgb:26,107,76}
body.yd-kontaktperson {--accent:#0A6395;--accent-soft:#DDEEF9;--accent-rgb:10,99,149}
body.yd-familieindsats{--accent:#A04A1E;--accent-soft:#FBEAE0;--accent-rgb:160,74,30}
body.yd-boern-og-unge {--accent:#6B3E96;--accent-soft:#EFE7F7;--accent-rgb:107,62,150}
body.yd-stoettet-samvaer{--accent:#175E6B;--accent-soft:#DDEFF2;--accent-rgb:23,94,107}
body.yd-ungestoette   {--accent:#9A2F52;--accent-soft:#FAE6EC;--accent-rgb:154,47,82}

/* ── banneret ──
   Fotoet ligger bag sidens overskrift. En grøn tone lægges over, så billedet
   binder sig til afsnittet frem for at være et løsrevet stemningsbillede, og
   en lodret gradient sikrer, at teksten kan læses uanset motivet. */
/* Menulinjen ligger oven på banneret, indtil man ruller — samme greb som på
   forsiden, ellers står mørk skrift på et lyst foto. */
@media (min-width:761px){
  body.sec-social:not(.menu) header:not(.stuck) .links a,
  body.sec-social:not(.menu) header:not(.stuck) .nav-tel{color:rgba(255,255,255,.92)}
  body.sec-social:not(.menu) header:not(.stuck) .links a:hover{color:#fff}
  body.sec-social:not(.menu) header:not(.stuck) .links a::after{background:#fff}
}
body.sec-social:not(.menu) header:not(.stuck){color:#fff;
  background:linear-gradient(180deg,rgba(5,30,22,.34),rgba(5,30,22,.10))}
body.sec-social:not(.menu) header:not(.stuck) .brand img{filter:brightness(0) invert(1)}
body.sec-social:not(.menu) header:not(.stuck) .burger i{background:#fff}
body.sec-social:not(.menu) header:not(.stuck) .btn-brand{background:#16794F}

/* sidens eget dekorative lag ville ligge oven på fotoet — det slås fra her */
body.sec-social .phero::before{display:none}
.social-banner{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.social-banner img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.social-banner::after{content:"";position:absolute;inset:0;
  background:
    /* mørkere bag tekstsøjlen til venstre, klart til højre, så fotoet kan ses */
    linear-gradient(100deg,rgba(5,40,29,.74),rgba(5,40,29,.46) 36%,rgba(5,40,29,.12) 60%,rgba(5,40,29,0) 78%),
    /* et strejf grønt over det hele, så billedet hører til afsnittet */
    linear-gradient(180deg,rgba(8,52,38,.16),rgba(8,52,38,.10) 55%,rgba(249,251,253,.86) 90%,var(--paper))}
/* Fast mørk bund under fotoet: så har den hvide skrift noget at stå på, også
   hvis billedet ikke bliver hentet — og kontrasten kan måles. */
body.sec-social .phero{background:#0B3A2C;position:relative;isolation:isolate;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(2.4rem,7vw,5rem));
  padding-bottom:clamp(2.4rem,5vw,4rem)}
body.sec-social .phero .crumb,body.sec-social .phero .crumb a,
body.sec-social .phero .crumb span{color:rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(4,30,22,.6)}
body.sec-social .phero .btn{text-shadow:0 1px 8px rgba(4,30,22,.35)}
body.sec-social .phero .eyebrow{color:#B6F0D2}
body.sec-social .phero h1{color:#fff;text-shadow:0 2px 20px rgba(4,30,22,.45)}
body.sec-social .phero .lead{color:rgba(255,255,255,.93);text-shadow:0 1px 14px rgba(4,30,22,.4)}
body.sec-social .phero .btn-out{box-shadow:inset 0 0 0 1.8px rgba(255,255,255,.75);color:#fff}
body.sec-social .phero .btn-out::before{background:#fff}
body.sec-social .phero .btn-out:hover{color:#0C4A38;box-shadow:inset 0 0 0 1.5px #fff}
body.sec-social .phero .btn-brand{background:#16794F;box-shadow:0 12px 30px -12px rgba(3,40,28,.7)}
body.sec-social .phero .btn-brand::before{background:#0C4A38}
@media (max-width:760px){
  .social-banner img{object-position:center 28%}
  .social-banner::after{background:
    linear-gradient(180deg,rgba(5,40,29,.30),rgba(5,40,29,.56) 46%,rgba(249,251,253,.92) 88%,var(--paper))}
}

/* ── undermenuen med farver ──
   Hver post har sin egen tone. Dæmpet flade og farvet skrift i hvile, fuld
   farve når man står på siden — farverigt uden at larme. */
.subnav-social{background:var(--paper);border-bottom:1px solid var(--line-2)}
.subnav-social ul{gap:.45rem}
.subnav-social li:nth-child(1){--f:#01457D;--fb:#E1EBF6}
.subnav-social li:nth-child(2){--f:#1A6B4C;--fb:#DFF0E7}
.subnav-social li:nth-child(3){--f:#0A6395;--fb:#DDEEF9}
.subnav-social li:nth-child(4){--f:#A04A1E;--fb:#FBEAE0}
.subnav-social li:nth-child(5){--f:#6B3E96;--fb:#EFE7F7}
.subnav-social li:nth-child(6){--f:#175E6B;--fb:#DDEFF2}
.subnav-social li:nth-child(7){--f:#9A2F52;--fb:#FAE6EC}
.subnav-social a{background:var(--fb);color:var(--f);font-weight:600;
  border-radius:99px;padding:.52rem .95rem;
  transition:background .25s,color .25s,transform .25s var(--ease-out),box-shadow .25s}
.subnav-social a::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:currentColor;margin-right:.5rem;vertical-align:.05em;opacity:.75}
.subnav-social a:hover{background:var(--f);color:#fff;transform:translateY(-1px);
  box-shadow:0 8px 18px -8px rgba(var(--accent-rgb),.55)}
.subnav-social a[aria-current]{background:var(--f);color:#fff;
  box-shadow:0 8px 18px -8px rgba(12,27,46,.4)}
.subnav-social a[aria-current]::before{opacity:1;background:#fff}