/* Gemensam layout för oathmountain.se: färger, typsnitt, sidhuvud, hero, knappar, sidfot och språkmeny.
   Används av startsidan och av profilsidorna (/profil/). Sidspecifikt ligger kvar i respektive sida. */
:root{
  --ink-950:#05070d;
  --ink-900:#070a12;
  --ink-800:#0c111d;
  --ink-700:#131a2a;
  --ink-600:#1c2539;
  --snow:#eef1f6;
  --snow-2:#c9d0dc;
  --muted:#7d879b;
  --amber:#ffa53d;
  --amber-2:#ff7a1a;
  --amber-3:#ffd59a;
  --glacier:#8fb7ff;
  --up:#4ade80;
  --down:#f87171;
  --line:rgba(238,241,246,.09);
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --pad:clamp(1rem, 5vw, 5rem);
  --maxw:1380px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scrollbar-width:none; }
/* Den vanliga lodräta scrollisten döljs; den vågräta listen i toppen ersätter den */
html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0; display:none; }
body{
  margin:0; background:var(--ink-900); color:var(--snow);
  font-family:var(--sans); font-weight:300; line-height:1.65; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--amber); color:var(--ink-950); }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Grain ---------- */
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}

/* Logga: bergen ritas, texten kommer ner ur bergen och solen går upp (splash och sidfot) */
@keyframes rise{ to{ transform:none; } }
@keyframes glow{ to{ opacity:.12; } }
@keyframes wordIn{
  35%{ opacity:1; }
  to{ transform:none; letter-spacing:.55em; padding-left:.55em; opacity:1; }
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadeIn{ to{ opacity:1; } }

/* ---------- Vågrät scrollist + cursor ----------
   Fyllningen visar hur långt ner man har kommit. Klicka eller dra längs listen för att hoppa. */
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:14px; z-index:120; cursor:pointer;
  touch-action:none; -webkit-tap-highlight-color:transparent;
}
.scrollbar__track{
  position:absolute; top:0; left:0; right:0; height:3px; background:rgba(238,241,246,.06);
  transition:height .3s var(--ease), background .3s;
}
.progress{
  position:absolute; inset:0; background:linear-gradient(90deg,var(--amber-2),var(--amber-3));
  transform-origin:0 50%; transform:scaleX(0); box-shadow:0 0 12px rgba(255,165,61,.45);
}
.scrollbar__knob{
  position:absolute; top:0; left:0; width:12px; height:12px; margin:-3px 0 0 -6px; border-radius:50%;
  background:var(--amber-3); box-shadow:0 0 0 4px rgba(255,165,61,.2); opacity:0; transform:scale(.4);
  transition:opacity .3s, transform .3s var(--ease); will-change:left;
}
.scrollbar:hover .scrollbar__track, .scrollbar.is-drag .scrollbar__track{ height:6px; background:rgba(238,241,246,.12); }
.scrollbar:hover .scrollbar__knob, .scrollbar.is-drag .scrollbar__knob{ opacity:1; transform:scale(1); }
.cursor{
  position:fixed; left:0; top:0; z-index:150; pointer-events:none;
  width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
  background:var(--amber); mix-blend-mode:difference; opacity:0;
  transition:width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), opacity .3s;
}
.cursor.on{ opacity:1; }
.cursor.hover{ width:54px; height:54px; margin:-27px 0 0 -27px; background:var(--snow); }

/* ---------- Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100; padding:1.4rem 0;
  border-bottom:1px solid transparent;
  transition:padding .6s var(--ease), background .6s var(--ease), transform .6s var(--ease), border-color .6s;
}
.header.is-scrolled{
  padding:.8rem 0; background:rgba(7,10,18,.7);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border-color:var(--line);
}
.header.is-hidden{ transform:translateY(-100%); }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem 2.4rem; }
.header .brand{ margin-right:auto; }
.brand{ display:flex; align-items:center; gap:.9rem; }
/* Samma motiv som splashen; solen lyfter lite när man pekar på loggan */
.brand svg{ width:54px; overflow:visible; }
.brand .b-mtn{ fill:none; stroke:var(--snow); stroke-width:24; stroke-linejoin:miter; }
.brand .b-sun{ fill:none; stroke:var(--amber); stroke-width:18; transition:transform .8s var(--ease); }
.brand:hover .b-sun{ transform:translateY(-22px); }
/* Solen går ner och upp igen var 10:e sekund. Varvet börjar i samma stund som solen är uppe, och då
   föds en ljusring som växer ut och tonar bort – som ringarna kring ankhen på kognitionskyrkan.nu */
.brand .b-sun-g{ animation:sunCycle 10s var(--ease-io) infinite; }
.brand .b-ring{
  fill:none; stroke:var(--amber-3); stroke-width:1.5; vector-effect:non-scaling-stroke; opacity:0; pointer-events:none;
  transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 3px rgba(255,165,61,.9));
  animation:sunRing 10s cubic-bezier(.2,.6,.35,1) infinite;
}
@keyframes sunCycle{
  0%, 58%{ transform:none; }
  72%, 80%{ transform:translateY(320px); }
  100%{ transform:none; }
}
@keyframes sunRing{
  0%{ transform:scale(1); opacity:0; }
  2%{ opacity:.8; animation-timing-function:linear; }
  20%{ opacity:.35; animation-timing-function:linear; }
  45%{ transform:scale(4.5); opacity:0; }
  100%{ transform:scale(4.5); opacity:0; }
}
.brand__name{ font-size:.7rem; font-weight:400; letter-spacing:.48em; text-transform:uppercase; }
.nav{ display:flex; align-items:center; gap:2.4rem; }
.nav a{ position:relative; font-size:.7rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:rgba(238,241,246,.7); transition:color .3s; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--amber);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease);
}
.nav a:hover{ color:var(--snow); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.ticker{
  display:inline-flex; align-items:center; gap:.6rem; padding:.45rem .9rem; border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--snow-2); white-space:nowrap;
  transition:border-color .4s;
}
.ticker:hover{ border-color:rgba(255,165,61,.5); }
.ticker i{ width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(255,165,61,.6); animation:pulse 2s infinite; }
.ticker.up b{ color:var(--up); } .ticker.down b{ color:var(--down); }
.ticker b{ font-weight:500; color:var(--snow); transition:color .6s; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,165,61,.6);} 70%{ box-shadow:0 0 0 8px rgba(255,165,61,0);} 100%{ box-shadow:0 0 0 0 rgba(255,165,61,0);} }

.menu-btn{ display:none; background:none; border:0; padding:0; cursor:pointer; color:var(--snow); width:44px; height:44px; position:relative; }
.menu-btn span{ position:absolute; left:10px; right:10px; height:1px; background:currentColor; transition:transform .5s var(--ease), top .5s var(--ease); }
.menu-btn span:nth-child(1){ top:17px; } .menu-btn span:nth-child(2){ top:26px; }
.menu-open .menu-btn span:nth-child(1){ top:22px; transform:rotate(45deg); }
.menu-open .menu-btn span:nth-child(2){ top:22px; transform:rotate(-45deg); }
.drawer{
  position:fixed; inset:0; z-index:95; background:var(--ink-950);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad);
  clip-path:circle(0% at calc(100% - 2.6rem) 2.6rem); transition:clip-path .9s var(--ease-io); visibility:hidden;
}
.menu-open .drawer{ clip-path:circle(150% at calc(100% - 2.6rem) 2.6rem); visibility:visible; }
.drawer a{
  font-family:var(--serif); font-size:clamp(2.2rem,10vw,4rem); line-height:1.25; font-weight:300;
  opacity:0; transform:translateY(30px); transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.drawer a em{ color:var(--amber); font-family:var(--mono); font-style:normal; font-size:.32em; vertical-align:super; margin-right:.9rem; }
.menu-open .drawer a{ opacity:1; transform:none; }
.menu-open .drawer a:nth-child(1){ transition-delay:.25s; } .menu-open .drawer a:nth-child(2){ transition-delay:.31s; }
.menu-open .drawer a:nth-child(3){ transition-delay:.37s; } .menu-open .drawer a:nth-child(4){ transition-delay:.43s; }
.menu-open .drawer a:nth-child(5){ transition-delay:.49s; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100vh; min-height:100svh; overflow:hidden; display:flex; align-items:flex-end; background:var(--ink-950); }
.hero__bg{ position:absolute; inset:0; overflow:hidden; }
.hero__pan{ position:absolute; inset:-6% 0; will-change:transform; }
.hero__photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 40%;
  transform:scale(1.12); transition:transform 3.5s var(--ease); will-change:transform;
}
.is-ready .hero__photo{ transform:scale(1); }
.hero__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,7,13,.86) 0%, rgba(5,7,13,.55) 45%, rgba(5,7,13,.1) 100%),
    linear-gradient(180deg, rgba(5,7,13,.55) 0%, transparent 30%, transparent 55%, var(--ink-900) 100%);
}
#stars{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero__content{ position:relative; z-index:2; width:100%; padding-top:8rem; padding-bottom:clamp(6rem,14vh,9rem); }
.eyebrow{
  display:inline-flex; align-items:center; gap:1rem;
  font-size:.66rem; font-weight:400; letter-spacing:.45em; text-transform:uppercase; color:var(--amber);
}
.eyebrow::before{ content:""; width:48px; height:1px; background:currentColor; opacity:.7; }
.hero__title{
  font-family:var(--serif); font-weight:300; margin:1.8rem 0 0;
  font-size:clamp(2.6rem, 8.2vw, 7.6rem); line-height:.98; letter-spacing:-.025em;
  text-shadow:0 2px 40px rgba(5,7,13,.4);
}
.hero__title .row{ display:block; }
.hero__title .row--3{ font-size:.52em; letter-spacing:-.01em; margin-top:.35em; color:var(--snow-2); }
.hero__title em{ font-style:italic; color:var(--amber); }
.hero__title .word{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; white-space:nowrap; }
.char{ display:inline-block; transform:translateY(110%); transition:transform 1.3s var(--ease); }
.is-ready .char{ transform:none; }
.hero__foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem 3rem; margin-top:clamp(2.4rem,6vh,4rem); }
.hero__lead{
  max-width:34rem; margin:0; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1rem,1.25vw,1.18rem); line-height:1.6; color:rgba(238,241,246,.7);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.fade-up{ opacity:0; transform:translateY(24px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.is-ready .fade-up{ opacity:1; transform:none; }
.is-ready .fade-up.d1{ transition-delay:1s; } .is-ready .fade-up.d2{ transition-delay:1.15s; } .is-ready .fade-up.d3{ transition-delay:1.3s; }
.hero__meta{
  position:absolute; right:var(--pad); bottom:2.2rem; z-index:2; writing-mode:vertical-rl;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.scroll-cue{
  position:absolute; left:50%; bottom:1.6rem; z-index:2; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted);
}
.scroll-cue span{ display:block; width:1px; height:46px; background:rgba(255,165,61,.2); position:relative; overflow:hidden; }
.scroll-cue span::after{ content:""; position:absolute; left:0; top:-40%; width:100%; height:40%; background:var(--amber); animation:cue 2.2s var(--ease-io) infinite; }
@keyframes cue{ to{ top:100%; } }
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.9rem; overflow:hidden; isolation:isolate;
  padding:1rem 1.8rem; border:1px solid rgba(255,165,61,.55); border-radius:999px;
  font-size:.7rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--snow);
  transition:color .5s var(--ease), border-color .5s, transform .3s var(--ease);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--amber); transform:translateY(101%); border-radius:inherit; transition:transform .6s var(--ease); }
.btn:hover{ color:var(--ink-950); border-color:var(--amber); }
.btn:hover::before{ transform:none; }
.btn svg{ width:15px; height:15px; transition:transform .5s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn--ghost{ border-color:var(--line); }
.btn--ghost::before{ background:var(--snow); }
/* ---------- Marquee ---------- */
.marquee{ position:relative; overflow:hidden; padding:1.5rem 0; background:var(--ink-950); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.marquee__track{ display:flex; width:max-content; animation:marquee 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.5rem,3.4vw,2.8rem);
  color:rgba(238,241,246,.82); white-space:nowrap; padding:0 1.5rem; display:inline-flex; align-items:center; gap:3rem;
}
.marquee__track span::after{ content:"▲"; font-style:normal; font-size:.38em; color:var(--amber); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
/* ---------- Common section bits ---------- */
section{ position:relative; }
.section{ padding:clamp(6rem,13vw,11rem) 0; }
.label{ display:flex; align-items:center; gap:1rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); }
.label::after{ content:""; flex:0 0 56px; height:1px; background:currentColor; opacity:.5; }
.h2{ font-family:var(--serif); font-weight:300; letter-spacing:-.025em; font-size:clamp(2.4rem,6vw,5.6rem); line-height:1; margin:1.4rem 0 0; }
.h2 em{ font-style:italic; color:var(--amber); }
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; } .reveal.d3{ transition-delay:.3s; }
/* ---------- Team ---------- */
.team{ background:
    linear-gradient(180deg, var(--ink-900) 0%, rgba(7,10,18,.72) 12%, rgba(7,10,18,.72) 88%, var(--ink-950) 100%),
    url('/images/tile.jpg') left top / 50% auto repeat,
    var(--ink-800); }
.team__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,3rem); margin-top:clamp(3rem,6vw,5rem); }
.person{ position:relative; display:block; }
.person:nth-child(even){ margin-top:clamp(0rem,8vw,8rem); }
.person__frame{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:18px; background:var(--ink-700); border:1px solid rgba(255,165,61,.55); box-shadow:0 30px 60px -20px rgba(0,0,0,.85), 0 10px 24px -8px rgba(0,0,0,.6); }
/* Bild med egen transparens: ingen bakgrund eller mörk toning, sanden syns suddigt igenom */
.person--transp .person__frame{ background:transparent; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.person--transp .person__frame::after{ display:none; }
.person--transp .person__tag{ text-shadow:0 1px 8px rgba(0,0,0,.9); }
.person__frame img{ position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; filter:grayscale(.85) contrast(1.05); transition:filter 1.2s var(--ease), transform 1.4s var(--ease); will-change:transform; }
.person:hover .person__frame img{ filter:grayscale(0) contrast(1); }
/* Platshållare tills profilen har en bild: initialen på mörk botten */
.person__ph{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-weight:300; font-size:clamp(7rem,16vw,13rem); line-height:1; color:var(--snow); opacity:.16; background:radial-gradient(70% 60% at 50% 100%, rgba(255,122,26,.22), transparent 70%), var(--ink-700); transition:opacity 1.2s var(--ease); }
.person:hover .person__ph{ opacity:.3; }
.person__frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(7,10,18,.85) 100%); }
.person__tag{ position:absolute; left:1.4rem; bottom:1.3rem; z-index:2; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); }
.person h3{ color:var(--amber); font-family:var(--serif); font-weight:300; font-size:clamp(2rem,3.6vw,3.4rem); margin:1.4rem 0 0; letter-spacing:-.02em; line-height:1; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.person h3 small{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--muted); transition:color .3s; }
.person:hover h3 small{ color:var(--amber); }
.person p{ color:var(--snow-2); opacity:.78; margin:.9rem 0 0; max-width:34rem; }
/* ---------- Footer ---------- */
.footer{ position:relative; padding:clamp(6rem,12vw,10rem) 0 2rem; overflow:hidden; background:
    linear-gradient(180deg, var(--ink-900) 0%, rgba(7,10,18,.6) 8%, rgba(7,10,18,.6) 75%, var(--ink-900) 100%),
    radial-gradient(70% 60% at 50% 110%, rgba(255,122,26,.18), transparent 70%),
    url('/images/egypt2.jpg') center/cover no-repeat fixed,
    var(--ink-900); }
/* iOS/touch: background-attachment:fixed stöds dåligt – rulla med där */
@media (hover:none){ .footer{ background-attachment:scroll; } }
/* Bilden ligger fast mot fönstret, så sidfoten är en hel skärm hög för att hela bilden ska synas */
@media (hover:hover){
  .footer{ min-height:100vh; display:flex; }
  .footer > .wrap{ display:flex; flex-direction:column; justify-content:space-between; }
}
.footer__cta{ text-align:center; }
.footer__cta .h2{ font-size:clamp(2.4rem,7vw,6.4rem); }
.footer__cta p{ color:var(--snow); margin:1.4rem auto 2.4rem; max-width:28rem; }
.footer__mail{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.5rem,3.6vw,2.8rem); color:var(--snow); border-bottom:1px solid rgba(255,165,61,.4); padding-bottom:.2rem; transition:color .3s, border-color .3s; }
.footer__mail:hover{ color:var(--amber); border-color:var(--amber); }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem; margin-top:clamp(4rem,9vw,7rem); padding-top:1.6rem; border-top:1px solid var(--line); font-family:var(--mono); font-size:.68rem; color:var(--muted); letter-spacing:.04em; }
.footer__bottom a:hover{ color:var(--amber); }
.footer__ids{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; }
.footer__tag{ font-family:var(--serif); font-style:italic; font-size:1rem; letter-spacing:0; color:var(--snow-2); }

/* ---------- Verktygsrad till höger (språk) ----------
   Glider in från höger mitt på sidan när man står överst, glider ut så fort man scrollar. */
.toolbar{
  position:fixed; right:0; top:50%; z-index:110; display:flex; flex-direction:column; gap:.3rem; padding:.45rem;
  background:rgba(12,17,29,.92); border:1px solid var(--line); border-right:0; border-radius:14px 0 0 14px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
  transform:translate(110%,-50%); transition:transform .7s var(--ease);
}
.is-ready .toolbar:not(.is-out){ transform:translate(0,-50%); }
.tool{
  width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:10px; padding:0; cursor:pointer;
  background:transparent; color:var(--snow-2); transition:background .3s, color .3s;
}
.tool:hover, .tool[aria-expanded="true"]{ background:rgba(255,165,61,.12); color:var(--amber); }
.tool svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform 1.2s var(--ease); }
.tool:hover svg{ transform:rotate(-25deg); }
.tool__badge{ position:absolute; right:.35rem; bottom:.3rem; font-family:var(--mono); font-size:.52rem; letter-spacing:.04em; color:var(--amber); text-transform:uppercase; pointer-events:none; }
.langs{
  position:absolute; right:calc(100% + .6rem); top:50%; width:13.5rem; max-height:min(70vh,26rem); overflow:auto; padding:.4rem;
  background:rgba(12,17,29,.97); border:1px solid var(--line); border-radius:14px; box-shadow:0 30px 70px -25px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translate(10px,-50%); transition:opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
  scrollbar-width:thin;
}
.langs.is-open{ opacity:1; visibility:visible; transform:translate(0,-50%); }
.langs__head{ padding:.55rem .7rem .45rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.langs button{
  display:flex; width:100%; justify-content:space-between; align-items:center; gap:1rem; padding:.55rem .7rem; border:0; border-radius:8px;
  background:transparent; color:var(--snow-2); font:inherit; font-size:.9rem; text-align:left; cursor:pointer; transition:background .25s, color .25s;
}
.langs button span{ font-family:var(--mono); font-size:.62rem; color:var(--muted); text-transform:uppercase; }
.langs button:hover{ background:rgba(238,241,246,.06); color:var(--snow); }
.langs button[aria-current="true"]{ color:var(--amber); }
.langs button[aria-current="true"] span{ color:var(--amber); }

/* Google Translate körs osynligt i bakgrunden; dess egen list, banner och popup döljs */
#google_translate_element{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; }
body > .skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip,
body > div[class*="VIpgJd-ZVi9od-aZ2wEe"]{ display:none !important; }
body{ top:0 !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav a{ display:none; }
  .menu-btn{ display:block; }
}
@media (max-width:760px){
  .ticker .t-long{ display:none; }
  .ticker{ padding:.4rem .75rem; font-size:.68rem; }
  .hero__title{ font-size:clamp(2.4rem,12.4vw,4rem); }
  .brand__name{ display:none; }
  .hero__meta{ display:none; }
  .team__grid{ grid-template-columns:1fr; }
  .person:nth-child(even){ margin-top:0; }
  .scroll-cue{ display:none; }
  .footer__bottom{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .grain{ display:none; }
}