/* ============================================================
   earmark.se · V1.3 · först byggd ur Figma-filen "Earmark.se V1.2 · Webb"
   Färger, typsnitt och textstilar fylls i från designsystemet vid bygget.
   ============================================================ */

@font-face{font-family:"NewBlack";src:url("../fonts/NewBlackTypeface-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"NewBlack";src:url("../fonts/NewBlackTypeface-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"NewBlack";src:url("../fonts/NewBlackTypeface-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"NewBlack";src:url("../fonts/NewBlackTypeface-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"NewBlack";src:url("../fonts/NewBlackTypeface-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"NewBlack";src:url("../fonts/NewBlackTypeface-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --petrol:#13292B; --creme:#EDF2EF; --ljus:#DBE6EB; --orange:#FF5B2D;
  --mute-d:#78989B; --mute-l:#5C6B69; --arena:#0F2224; --line-l:#C9D6DB; --vit:#fff;
  --gutter:clamp(20px,4.2vw,60px);
  --font:"NewBlack","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--petrol);color:var(--ljus);font-weight:300;line-height:1.5;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
h1,h2,h3,p{margin:0}
.w{max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- typografi (textstilarna i designsystemet) ---- */
.mono{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.o{color:var(--orange)}
.lbl{display:flex;gap:10px;align-items:center}
.lbl .nr{color:var(--orange)}
.disp-xl{font-weight:700;font-size:clamp(72px,9.7vw,140px);line-height:.92;letter-spacing:-.032em}
.disp-l{font-weight:700;font-size:clamp(56px,7.2vw,104px);line-height:.92;letter-spacing:-.034em}
.h1{font-weight:700;font-size:clamp(40px,4.4vw,64px);line-height:.98;letter-spacing:-.03em}
.h2{font-weight:700;font-size:clamp(32px,3.3vw,48px);line-height:1.02;letter-spacing:-.025em}
.h3{font-weight:700;font-size:26px;line-height:1.15;letter-spacing:-.012em}
.ingress{font-weight:300;font-size:clamp(19px,1.7vw,24px);line-height:1.35}
.brod{font-weight:300;font-size:18px;line-height:1.5}
.liten{font-weight:400;font-size:15px;line-height:1.4}
.punkt{color:var(--orange)}
[data-bg="light"]{background:var(--creme);color:var(--petrol)}
[data-bg="dark"]{background:var(--petrol);color:var(--ljus)}
[data-bg="orange"]{background:var(--orange);color:var(--petrol)}
.mute{color:var(--mute-d)}
[data-bg="light"] .mute{color:var(--mute-l)}

/* ---- knappar och piller (R4: alla knappar är piller) ---- */
.btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 28px;border-radius:999px;background:var(--orange);color:var(--petrol);font-weight:700;font-size:16px;letter-spacing:.02em;white-space:nowrap;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,91,45,.28)}
.btn.ghost{background:var(--line-l);color:var(--petrol)}
.btn.ghost:hover{box-shadow:0 14px 30px rgba(19,41,43,.18)}
.btn.dark{background:var(--petrol);color:var(--ljus)}
.btn.dark:hover{box-shadow:0 14px 30px rgba(19,41,43,.3)}
.btn.sm{height:34px;padding:0 24px;font-size:14px}
.lank{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:16px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s}
.lank:hover{color:var(--orange)}
.lank svg{width:14px;height:14px}
.pill{display:inline-flex;align-items:center;padding:12px 22px;border-radius:999px;border:2px solid var(--orange);color:var(--orange);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;transition:background .25s var(--ease),color .25s,transform .25s var(--ease)}
.pill:hover{background:var(--orange);color:var(--petrol);transform:translateY(-2px)}

/* ---- header: transparent, ligger ovanpå, byter ljus/mörk efter sektionen under ---- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:84px;display:flex;align-items:center;color:var(--ljus);transition:color .35s var(--ease),transform .4s var(--ease),background .35s}
.hdr .w{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.hdr .logo svg{height:20px;width:auto;display:block}
.hdr .tag{display:flex;gap:10px;align-items:center}
.hdr nav{display:flex;align-items:center;gap:36px}
.hdr nav a{font-size:15px;font-weight:400;letter-spacing:.02em;text-transform:uppercase;position:relative}
.hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.hdr nav a:hover::after,.hdr nav a[aria-current]::after{transform:scaleX(1)}
.hdr.on-light{color:var(--petrol)}
.hdr.on-orange{color:var(--petrol)}
.hdr.on-orange .btn{background:var(--petrol);color:var(--ljus)}
.hdr.hide{transform:translateY(-100%)}
.hdr .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.hdr .burger i{display:block;width:22px;height:2px;background:currentColor;position:relative}
.hdr .burger i::before,.hdr .burger i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .3s}
.hdr .burger i::before{top:-7px}.hdr .burger i::after{top:7px}
@media (max-width:900px){
  .hdr .tag{display:none}
  /* Menyn har skärmens höjd även när sidhuvudet är förskjutet (när det göms vid skroll blir sidhuvudet menyns ram
     och inset:0 gav bara 84 px, så att Kontakt-knappen stack ut ovanför sidan). */
  .hdr nav{position:fixed;inset:0 0 auto 0;height:100vh;height:100dvh;background:var(--petrol);color:var(--ljus);flex-direction:column;justify-content:center;gap:28px;transform:translateY(-100%);transition:transform .45s var(--ease);z-index:-1}
  .hdr nav a{font-size:28px;font-weight:700;text-transform:none;letter-spacing:-.02em}
  .hdr.open nav{transform:none}
  .hdr .burger{display:flex}
  .hdr.open .burger i{background:transparent}
  .hdr.open .burger i::before{transform:translateY(7px) rotate(45deg)}
  .hdr.open .burger i::after{transform:translateY(-7px) rotate(-45deg)}
}

/* ---- muspekaren ---- */
.cur{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:3px solid var(--orange);opacity:0;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),border-width .25s,background .25s,opacity .3s,border-color .3s;will-change:transform;mix-blend-mode:normal}
.cur.show{opacity:1}
.cur.grow{width:64px;height:64px;margin:-32px 0 0 -32px;border-width:2px;background:rgba(255,91,45,.18)}
.cur.dot{width:10px;height:10px;margin:-5px 0 0 -5px;border-width:5px}
.cur.text{width:3px;height:30px;margin:-15px 0 0 -2px;border-radius:2px;border-width:0;background:var(--orange)}
.cur.dark{border-color:var(--petrol)}
.cur.dark.grow{background:rgba(19,41,43,.14)}
.cur.dark.text{background:var(--petrol)}
.cur.click{animation:cpuls .45s var(--ease)}
@keyframes cpuls{0%{transform:scale(1)}40%{transform:scale(.72)}100%{transform:scale(1)}}
.cur-trail{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--orange);opacity:0;filter:blur(10px);will-change:transform,opacity}
.cur-trail.dark{background:var(--petrol)}
@media (hover:none),(pointer:coarse){.cur,.cur-trail{display:none}}

/* ---- gemensam sektionsrytm ---- */
.sec{padding:120px 0}
.sec.tight{padding:96px 0}
.rub{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.rub .lbl{margin-bottom:24px}
.rev{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rev.in{opacity:1;transform:none}
.rev.d1{transition-delay:.12s}.rev.d2{transition-delay:.24s}.rev.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ============================================================
   START · 01 Hero
   ============================================================ */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:84px 0 120px;overflow:hidden;color:var(--ljus);background:var(--petrol)}
.hero .bg{position:absolute;inset:-4% -2% 0;z-index:0;background:var(--petrol) url("../img/hero-betong.jpg") 50% 0/100% auto no-repeat;will-change:transform}
.hero .fade{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;background:linear-gradient(to top,var(--petrol) 0%,var(--petrol) 18%,rgba(19,41,43,0) 100%);pointer-events:none}
.hero .bg.fallback{background-image:url("../img/vagg.jpg")}
.hero .skugga{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(19,41,43,.55) 0%,rgba(19,41,43,.15) 55%,rgba(19,41,43,.35) 100%)}
.hero .kil{display:none;position:absolute;z-index:1;left:-8%;top:18%;width:66%;height:95%;background:var(--petrol);clip-path:polygon(0 0,100% 55%,74% 100%,0 100%);opacity:.96;will-change:transform}
.hero .topp{position:relative;z-index:2;height:1px}
.hero .inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start;padding-top:clamp(40px,6vh,80px)}
.hero .tal{line-height:.8;font-weight:700;letter-spacing:-.05em}
.hero .tal .n{display:block;font-size:clamp(150px,21vw,310px);line-height:.78;margin-left:-.04em}
.hero .tal .p{display:block;font-size:clamp(150px,21vw,310px);line-height:.78;color:var(--orange);margin-top:-.12em;margin-left:-.02em}
.hero .under{margin-top:28px;font-weight:700;font-size:clamp(20px,1.8vw,26px);line-height:1.15;letter-spacing:-.01em;max-width:360px}
.hero .hoger{text-align:right;justify-self:end;max-width:720px;display:flex;flex-direction:column;align-items:flex-end;gap:20px}
.hero h1{font-weight:700;font-size:clamp(60px,8.4vw,120px);line-height:.96;letter-spacing:-.03em;text-wrap:balance}
.hero .fot{font-size:15px;font-weight:400;color:var(--mute-d)}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.hero .skrolla{position:absolute;z-index:2;left:50%;bottom:28px;transform:translateX(-50%);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);display:flex;gap:10px;align-items:center}
.hero .skrolla i{width:1px;height:36px;background:currentColor;display:block;animation:dropp 1.8s var(--ease) infinite;transform-origin:top}
@keyframes dropp{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:1000px){
  .hero .inner{grid-template-columns:1fr;gap:28px}
  .hero .hoger{text-align:left;align-items:flex-start;justify-self:start}
  .hero .cta{justify-content:flex-start}
  .hero .kil{width:120%;top:34%;clip-path:polygon(0 0,100% 40%,100% 100%,0 100%)}
}


/* ============================================================
   START · 02 Sök: pillren faller och samlas i en ring kring märket
   ============================================================ */
@property --amp{syntax:'<number>';inherits:true;initial-value:0}
.sokw{height:280vh;view-timeline-name:--sok;background:var(--petrol);color:var(--ljus);position:relative}
.sokp{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden}
.sokp .w{position:relative;height:100%}
.sokp .fraga{position:absolute;left:var(--gutter);top:18vh;width:min(46%,628px);animation:bortf both linear;animation-timeline:--sok;animation-range:contain 10% contain 32%}
@keyframes bortf{to{opacity:0;transform:translateY(-24px);filter:blur(4px)}}
.sokp .q{font-weight:700;font-size:26px;letter-spacing:-.01em;margin-bottom:20px}
.sokp .falt{display:flex;align-items:center;gap:18px;height:106px;padding:0 20px 0 18px;border:3px solid var(--ljus);border-radius:999px;background:rgba(19,41,43,.35)}
.sokp .falt svg.lupp{width:54px;height:54px;flex:none}
.sokp .falt .typ{flex:1;min-width:0;font-weight:700;font-size:clamp(28px,3vw,42px);letter-spacing:-.02em;color:var(--orange);white-space:nowrap;overflow:hidden}
.sokp .falt .typ i{display:inline-block;width:.07em;height:.95em;background:var(--orange);vertical-align:-.12em;margin-left:.06em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sokp .falt .go{flex:none;width:57px;height:56px;border-radius:50%;background:var(--orange);display:grid;place-items:center;transition:transform .3s var(--ease)}
.sokp .falt .go:hover{transform:rotate(-45deg) scale(1.06)}
.sokp .falt .go svg{width:25px;height:23px;fill:var(--petrol)}
.sokp .pill{position:absolute;top:var(--t);left:var(--l);white-space:nowrap;transform:translate(-50%,0);background:transparent;--amp:0;animation:falla both;animation-timeline:--sok;animation-range:contain 0% contain 100%}
.sokp .pill .fl{display:block;animation:svav var(--d,5s) ease-in-out infinite alternate;animation-delay:var(--o,0s)}
@keyframes svav{from{transform:translate(calc(var(--amp) * -3px),calc(var(--amp) * -6px))}to{transform:translate(calc(var(--amp) * 3px),calc(var(--amp) * 6px))}}
@keyframes falla{
  0%,18%{left:var(--l);top:var(--t);transform:translate(-50%,0) rotate(0);background:transparent;--amp:0;animation-timing-function:cubic-bezier(.5,0,.9,.5)}
  44%{left:var(--l);top:var(--t);transform:translate(calc(-50% + var(--sx)),var(--fall)) rotate(var(--r));background:var(--orange);color:var(--petrol);--amp:0;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  78%,100%{left:var(--sl);top:var(--st);transform:translate(-50%,0) rotate(0);background:var(--orange);color:var(--petrol);--amp:1}
}
.sokp .pill:hover{background:var(--orange);color:var(--petrol)}
.sokp .marke{position:absolute;left:50%;top:50%;width:min(28vw,230px);transform:translate(-50%,-50%) scale(.5);opacity:0;color:var(--ljus);animation:vaxa both cubic-bezier(.3,0,.2,1);animation-timeline:--sok;animation-range:contain 48% contain 82%}
.sokp .marke svg{width:100%;height:auto;display:block}
@keyframes vaxa{to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.sokp .efter{position:absolute;left:0;right:0;bottom:7vh;text-align:center;font-size:clamp(20px,2.2vw,30px);font-weight:300;opacity:0;animation:synas both linear;animation-timeline:--sok;animation-range:contain 70% contain 95%}
.sokp .efter b{font-weight:700}
@keyframes synas{to{opacity:1}}
@supports not (animation-timeline: view()){html:not(.skrollrorelse) .sokw{height:auto;padding:96px 0}html:not(.skrollrorelse) .sokp{position:relative;height:auto;min-height:0;overflow:visible}html:not(.skrollrorelse) .sokp .w{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:0}html:not(.skrollrorelse) .sokp .fraga{position:static;width:100%;flex:0 0 100%;margin-bottom:32px;animation:none}html:not(.skrollrorelse) .sokp .pill{position:static;transform:none;animation:none;display:inline-flex;margin:0 10px 10px 0}html:not(.skrollrorelse) .sokp .marke,html:not(.skrollrorelse) .sokp .efter{display:none}}
/* Pillren i sökdelen står på platser i procent av bredden. Mellan 1280 och 1440 px krymper de i samma takt som skärmen,
   så att de inte krockar med varandra eller sökfältet (Rickards skärm, 1280 px). Sökfältet tar samma andel av bredden som vid
   1440 px (628 av 1440). Från 1440 px är allt som vanligt. */
@media (min-width:1280px){.sokp .pill{font-size:min(12px,.8334vw);padding:min(12px,.8334vw) min(22px,1.5278vw)}.sokp .fraga{width:min(43.62%,628px)}}
@media (max-width:900px){.sokp .fraga{width:calc(100% - 2*var(--gutter));top:12vh}.sokp .pill{font-size:10px;padding:9px 14px}.sokp .falt{height:76px;gap:12px;padding:0 10px 0 14px}.sokp .falt svg.lupp{width:34px;height:34px}.sokp .falt .go{width:44px;height:44px}.sokp .falt .go svg{width:18px;height:17px}}

/* ============================================================
   START · 05 Tre faser (scrollstyrd, från V1.2)
   ============================================================ */
.fas{position:relative;background:var(--petrol);color:var(--ljus);overflow:clip}
.fas.sc{height:450vh;view-timeline-name:--fas}
.fas .fpin{position:sticky;top:0;height:100vh;min-height:720px;display:flex;align-items:center;overflow:hidden;animation:varld both linear;animation-timeline:--fas;animation-range:contain 0% contain 100%}
@keyframes varld{0%,62%{background:var(--petrol);color:var(--ljus)}74%,100%{background:var(--creme);color:var(--petrol)}}
.fas .sol{position:absolute;left:84%;transform:translateX(-50%);border-radius:50%;background:var(--orange);width:min(70vw,860px);height:min(70vw,860px);bottom:calc(-1 * min(70vw,860px) + 120px);filter:blur(60px);opacity:.55;animation:solupp both linear;animation-timeline:--fas;animation-range:contain 0% contain 100%;pointer-events:none}
@keyframes solupp{0%{left:84%;bottom:calc(-1 * min(70vw,860px) + 100px);filter:blur(60px);opacity:.5}100%{left:50%;bottom:calc(50vh - min(70vw,860px)/2);filter:blur(0);opacity:1}}
.fas .topp5{position:absolute;left:0;right:0;top:48px}
.fas .kol{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;width:100%;--h:clamp(136px,17vw,224px)}
@media (max-width:800px){.fas .kol{grid-template-columns:1fr;--h:136px}}
.fas .fonster{position:relative;height:var(--h)}
.fas .lista{position:absolute;left:0;right:0;top:0;animation:glid both linear;animation-timeline:--fas;animation-range:contain 0% contain 100%}
@keyframes glid{0%{transform:translateY(0)}29%{transform:translateY(calc(-.1 * var(--h)));animation-timing-function:cubic-bezier(.55,0,.3,1)}38%{transform:translateY(calc(-.9 * var(--h)));animation-timing-function:cubic-bezier(.2,0,.8,1)}62%{transform:translateY(calc(-1.1 * var(--h)));animation-timing-function:cubic-bezier(.55,0,.3,1)}71%{transform:translateY(calc(-1.9 * var(--h)));animation-timing-function:cubic-bezier(.2,0,.8,1)}100%{transform:translateY(calc(-2 * var(--h)))}}
.fas .ord{display:flex;flex-direction:column;justify-content:center;height:var(--h);box-sizing:border-box;filter:blur(7px);opacity:.22;transform:translateX(14px);animation:skarp both linear;animation-timeline:--fas;animation-range:contain 0% contain 100%}
.fas .ord .n{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.fas .ord .t{display:block;font-weight:700;letter-spacing:-.035em;line-height:.95;font-size:clamp(60px,8.6vw,136px)}
@keyframes skarp{0%,100%{filter:blur(7px);opacity:.22;transform:translateX(14px)}}
.fas .ord.o1{animation-name:s1}.fas .ord.o2{animation-name:s2}.fas .ord.o3{animation-name:s3}
@keyframes s1{0%,29%{filter:blur(0);opacity:1;transform:none}38%,100%{filter:blur(7px);opacity:.22;transform:translateX(14px)}}
@keyframes s2{0%,29%{filter:blur(7px);opacity:.22;transform:translateX(14px)}38%,62%{filter:blur(0);opacity:1;transform:none}71%,100%{filter:blur(7px);opacity:.22;transform:translateX(14px)}}
@keyframes s3{0%,62%{filter:blur(7px);opacity:.22;transform:translateX(14px)}71%,100%{filter:blur(0);opacity:1;transform:none}}
.fas .beskrs{display:grid;align-self:center}
.fas .beskr{grid-area:1/1;max-width:520px;font-size:clamp(18px,1.8vw,24px);font-weight:300;line-height:1.35;margin:0;opacity:0;animation:fram both linear;animation-timeline:--fas;animation-range:contain 0% contain 100%}
@keyframes fram{0%,100%{opacity:0;transform:translateY(10px);filter:blur(6px)}}
.fas .beskr.b1{animation-name:e1}.fas .beskr.b2{animation-name:e2}.fas .beskr.b3{animation-name:e3}
@keyframes e1{0%,29%{opacity:1;transform:none;filter:blur(0)}36%,100%{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
@keyframes e2{0%,31%{opacity:0;transform:translateY(10px);filter:blur(6px)}38%,62%{opacity:1;transform:none;filter:blur(0)}69%,100%{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
@keyframes e3{0%,64%{opacity:0;transform:translateY(10px);filter:blur(6px)}71%,100%{opacity:1;transform:none;filter:blur(0)}}
.fas .steg3{position:absolute;left:0;bottom:40px;display:flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.fas .steg3 i{display:inline-block;width:28px;height:2px;background:currentColor;opacity:.35;animation:tandi both linear;animation-timeline:--fas;animation-range:contain 0% contain 100%}
.fas .steg3 i.p1{opacity:1;background:var(--orange);animation:none}
@keyframes tandi{0%,36%{opacity:.35;background:currentColor}38%,100%{opacity:1;background:var(--orange)}}
@keyframes tandi3{0%,70%{opacity:.35;background:currentColor}72%,100%{opacity:1;background:var(--orange)}}
.fas .steg3 i.p3{animation-name:tandi3}
@supports not (animation-timeline: view()){html:not(.skrollrorelse) .fas.sc{height:auto}html:not(.skrollrorelse) .fas .fpin{position:relative;height:auto;min-height:0;padding:120px 0;animation:none;display:block}html:not(.skrollrorelse) .fas .kol{--h:auto}html:not(.skrollrorelse) .fas .fonster{height:auto}html:not(.skrollrorelse) .fas .lista{position:static;animation:none}html:not(.skrollrorelse) .fas .ord{height:auto;padding:14px 0;filter:none;opacity:1;transform:none;animation:none}html:not(.skrollrorelse) .fas .beskr{opacity:1;animation:none}html:not(.skrollrorelse) .fas .beskrs{display:flex;flex-direction:column;gap:10px;margin-top:32px}html:not(.skrollrorelse) .fas .sol{animation:none}html:not(.skrollrorelse) .fas .steg3,html:not(.skrollrorelse) .fas .topp5{position:static;margin-bottom:24px}html:not(.skrollrorelse) .fas .steg3{display:none}html:not(.skrollrorelse) .fas .fpin>.w{display:block!important;height:auto!important}html:not(.skrollrorelse) .fas .kol:not(#_):not(#_),html:not(.skrollrorelse) .fas .ord:not(#_):not(#_),html:not(.skrollrorelse) .fas .ord .t:not(#_):not(#_),html:not(.skrollrorelse) .fas .beskr:not(#_):not(#_){margin-top:0;margin-bottom:0;height:auto}html:not(.skrollrorelse) .fas .ord .t{line-height:1}}

/* ============================================================
   START · 04 En loop
   ============================================================ */
.loop{border-top:1px solid rgba(19,41,43,.15);position:relative;overflow:clip}
.loop .tva{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:50px;align-items:center}
.loop .t{font-weight:700;font-size:clamp(110px,16.6vw,240px);line-height:.82;letter-spacing:-.04em;margin:50px 0 60px}
.loop .t .pk{display:inline-block;width:.1em;height:.1em;background:var(--orange);margin-left:.06em;vertical-align:baseline}
.loop .ing{font-size:clamp(19px,1.7vw,24px);line-height:1.35;max-width:560px}
.loop .ing b{font-weight:700}
.loop .fig{position:relative;width:min(100%,700px);justify-self:center;aspect-ratio:700/560}
.loop .fig svg{width:100%;height:100%;overflow:visible}
.loop .fig .ring{fill:none;stroke:#C9CFCD;stroke-width:5}
.loop .fig .dash{fill:none;stroke:#B9C1BF;stroke-width:2.2;stroke-dasharray:12 12;transform-origin:center;transform-box:fill-box}
.loop .fig .dash.r1{animation:snurr 60s linear infinite}
.loop .fig .dash.r2{animation:snurr 75s linear infinite}
.loop .fig .dash.r3{animation:snurr 68s linear infinite}
.loop .fig .dash.r4{animation:snurr 82s linear infinite}
@keyframes snurr{to{transform:rotate(360deg)}}
.loop .fig .nod circle{fill:var(--petrol);transition:fill .3s}
.loop .fig .nod text{fill:var(--creme);font-family:var(--font);font-weight:700;font-size:24px;text-anchor:middle;dominant-baseline:central}
.loop .fig .nod.on circle{fill:var(--orange)}
.loop .fig .nod.puls circle{animation:nodpuls .7s var(--ease)}
@keyframes nodpuls{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
.loop .fig .nod circle{transform-origin:center;transform-box:fill-box}
.loop .fig .lab{font-family:var(--font);font-weight:600;font-size:14px;letter-spacing:.06em;fill:#13282a}
.loop .fig .prick{fill:none;stroke:var(--orange);stroke-width:7;opacity:0;filter:drop-shadow(0 0 6px rgba(255,91,45,.9))}
.loop .fig .prick.on{opacity:1}
.loop .steg{margin-top:72px}
.loop .steg div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;padding:14px 0;border-top:1px solid var(--petrol);font-size:18px;font-weight:300;line-height:1.5}
.loop .steg div span:last-child{color:var(--mute-l)}
.loop .steg .fx{position:relative}
.loop .lank{margin-top:32px}
@media (max-width:1000px){.loop .tva{grid-template-columns:1fr}.loop .fig{width:min(100%,560px);justify-self:start}}
@media (max-width:600px){.loop .steg div{grid-template-columns:1fr;gap:4px}}

/* ============================================================
   START · FAQ
   ============================================================ */
.faq .t{font-weight:700;font-size:clamp(64px,7.2vw,104px);line-height:.92;letter-spacing:-.034em}
.faq .lista{margin-top:56px;border-bottom:1px solid rgba(219,230,235,.14)}
.faq details{border-top:1px solid rgba(219,230,235,.14)}
.faq summary{list-style:none;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:32px;align-items:baseline;padding:26px 0;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);font-weight:500}
.faq summary .q{font-weight:600;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.02em;line-height:1.15;transition:color .2s}
.faq summary:hover .q{color:var(--orange)}
.faq summary .pm{width:28px;height:28px;border:1.5px solid rgba(219,230,235,.5);border-radius:50%;position:relative;transition:transform .35s var(--ease),border-color .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%)}
.faq summary .pm::before{width:12px;height:1.5px}.faq summary .pm::after{width:1.5px;height:12px}
.faq details[open] summary .pm{transform:rotate(45deg);border-color:var(--orange)}
.faq .svar{display:grid;grid-template-columns:150px minmax(0,640px);gap:32px;padding:0 0 32px;font-size:18px;font-weight:300;line-height:1.5;color:var(--mute-d)}
.faq .svar p{grid-column:2}
@media (max-width:700px){.faq summary{grid-template-columns:minmax(0,1fr) auto}.faq summary .k{grid-column:1/-1}.faq .svar{grid-template-columns:1fr}.faq .svar p{grid-column:1}}

/* ============================================================
   CTA + footer
   ============================================================ */
.cta{padding:140px 0}
.cta .t{font-weight:700;font-size:clamp(64px,8.3vw,120px);line-height:.92;letter-spacing:-.034em;max-width:900px;margin:28px 0 40px}
.cta .rad{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.cta .ing{font-size:clamp(19px,1.7vw,24px)}
.ftr{background:var(--petrol);color:var(--ljus);padding:96px 0 40px}
.ftr .rad1{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.ftr .sym svg{width:52px;height:44px;display:block}
.ftr .past{max-width:520px;margin-top:24px;font-weight:700;font-size:clamp(28px,3.3vw,48px);line-height:1.02;letter-spacing:-.025em}
.ftr .kol{display:flex;gap:40px 84px;flex-wrap:wrap}
.ftr .kol div{display:flex;flex-direction:column;gap:14px;font-size:15px;font-weight:400}
.ftr .kol .mono{color:var(--orange);margin-bottom:4px}
/* Ordmärket i två rader (ear / mark.), vänsterställt och ungefär halva bredden (Pontus 17 okt) */
.ftr .stor{margin:120px 0 0;width:min(50%,780px)}
.ftr .stor svg{width:100%;height:auto;display:block}
@media (max-width:900px){.ftr .stor{margin-top:72px;width:min(78%,520px)}}
.ftr .rad3{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:56px;font-size:15px;color:var(--mute-d)}

/* ============================================================
   OM OSS
   ============================================================ */
.om-hero{position:relative;min-height:600px;padding:84px 0 0;display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);overflow:hidden}
.om-hero .txt{padding:110px var(--gutter) 90px;display:flex;flex-direction:column;gap:30px;justify-content:center}
.om-hero .namn{font-weight:700;font-size:clamp(72px,8.7vw,124px);line-height:.95;letter-spacing:-.03em;display:flex;gap:.28em;flex-wrap:wrap}
.om-hero .u{font-weight:700;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.01em}
.om-hero .brod{max-width:720px}
.om-hero .brod b{font-weight:700}
.om-hero .ora{position:relative;min-height:420px;background:var(--petrol)}
.om-hero .ora img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 50%;display:block}
@media (max-width:900px){.om-hero{grid-template-columns:1fr;min-height:auto}.om-hero .ora{display:none}.om-hero .txt{padding-bottom:70px}}
.byra{position:relative;padding:60px 0 90px;overflow:clip}
.byra .top{display:grid;grid-template-columns:170px minmax(0,520px);gap:16px;align-items:start;margin-left:clamp(0px,12vw,170px)}
.byra .top .k,.byra .top .brod{font-size:15px;line-height:22px;color:var(--petrol);margin:0}
.byra .top .k{font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.byra .top .brod{font-weight:400}
.byra .stor{position:relative;margin-left:clamp(0px,12vw,170px);margin-top:22px;z-index:1}
@media (max-width:700px){.byra .top{grid-template-columns:1fr;gap:14px;margin-left:0}.byra .stor{margin-left:0}}
.byra .stor .t{font-weight:700;font-size:clamp(120px,24vw,350px);line-height:.86;letter-spacing:-.04em;margin-left:-.035em}
.byra .sig{position:absolute;left:-6%;right:-2%;top:-14%;height:150%;pointer-events:none}
.byra .sig img{width:100%;height:100%;display:block;object-fit:contain;clip-path:inset(0 100% 0 0)}
.byra.in .sig img{animation:svep 2.4s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes svep{to{clip-path:inset(0 0 0 0)}}
.byra .sig path{fill:none;stroke:var(--petrol);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4000;stroke-dashoffset:4000}
.byra.in .sig path{animation:rita 2.6s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes rita{to{stroke-dashoffset:0}}
.byra .w{position:relative}
.byra .swirl{position:absolute;left:64%;top:66px;width:67px;height:63px;z-index:1}
.roller .t{font-weight:700;font-size:clamp(56px,7.2vw,104px);line-height:.92;letter-spacing:-.034em}
.roller .ing{max-width:700px;margin-top:34px;color:var(--mute-l)}
.pantrad{display:flex;gap:56px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-top:64px;padding:20px 0 40px}
.pant{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;color:#111;box-shadow:0 30px 60px rgba(19,41,43,.18),0 2px 6px rgba(19,41,43,.12);overflow:hidden;transform:rotate(var(--r));transition:transform .5s var(--ease),box-shadow .5s;max-width:330px;width:100%}
.pant:hover{transform:rotate(0) translateY(-8px);box-shadow:0 44px 80px rgba(19,41,43,.26),0 2px 6px rgba(19,41,43,.12)}
.pant .swatch{aspect-ratio:1;overflow:hidden;background:var(--line-l)}
.pant .swatch img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform .8s var(--ease)}
.pant:hover .swatch img{transform:scale(1.04)}
.pant .list{padding:18px 20px 20px;display:flex;flex-direction:column;gap:4px}
.pant .brand{display:flex;align-items:flex-start;gap:6px;margin-bottom:4px}
.pant .brand img{height:26px;width:auto}
.pant .brand sup{font-size:11px;font-family:var(--font);font-weight:300;letter-spacing:.14em}
.pant .kod{font-size:17px;color:var(--petrol)}
.pant .namn{font-size:22px;color:var(--petrol);font-weight:500}
.pant .roll{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute-l);margin-top:4px}
.pant .kont{font-size:14px;color:var(--mute-l);line-height:1.4;margin-top:6px}
.pant .knappar{display:flex;gap:8px;margin-top:14px}
.pant .knappar .btn{font-family:var(--font);height:40px;padding:0 22px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:var(--orange);color:var(--petrol)}
.vadgor .t{font-weight:700;font-size:clamp(56px,7.2vw,104px);line-height:.92;letter-spacing:-.034em}
.vadgor .ing{max-width:700px;margin-top:40px;color:var(--mute-l)}
.filo{position:relative;overflow:clip}
.filo .t{font-weight:700;font-size:clamp(56px,7.2vw,104px);line-height:.92;letter-spacing:-.034em;position:relative;z-index:1}
.filo .ghost{position:absolute;left:var(--gutter);top:46%;font-weight:300;font-size:clamp(120px,19vw,280px);line-height:1;letter-spacing:-.04em;color:#D6DEE8;opacity:.4;white-space:nowrap;pointer-events:none;user-select:none}
.filo .fyra{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:40px;padding-left:clamp(0px,12vw,170px)}
.filo .fyra h3{font-weight:500;font-size:19px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px}
.filo .fyra p{font-size:16px;line-height:1.35;font-weight:400}
@media (max-width:900px){.filo .fyra{grid-template-columns:repeat(2,1fr);padding-left:0}}
@media (max-width:520px){.filo .fyra{grid-template-columns:1fr}}

/* ============================================================
   KONTAKT
   ============================================================ */
.k-hero{position:relative;min-height:100vh;min-height:clamp(54vw,100svh,62vw);padding:84px 0 0;overflow:hidden;display:flex;align-items:flex-start}
.k-hero .w{width:100%}
.k-hero .txt{position:relative;z-index:3;max-width:640px;padding:36px 0 120px}
.k-hero h1{font-weight:700;font-size:clamp(64px,7.8vw,112px);line-height:.95;letter-spacing:-.034em;margin:24px 0 32px}
.k-hero .ing{font-size:clamp(19px,1.7vw,24px);line-height:1.35}
.k-hero .lager{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Scenen är en låst komposition ( samma proportioner som i Figma ): huset bak, mannen, huset fram. Allt skalar ihop, mannen står alltid på kanten. */
.k-hero .scen{position:absolute;right:0;bottom:-2%;width:92.66%;aspect-ratio:1334/657;will-change:transform}
.k-hero .scen img{position:absolute;display:block;object-fit:cover;will-change:transform}
.k-hero .l3{left:21.9%;top:2.2%;width:78.1%;height:103.8%;object-fit:fill}
.k-hero .man{left:61.1%;top:0;width:13.7%;height:67.1%;object-fit:contain;object-position:50% 100%}
.k-hero .l1{left:0;top:26.1%;width:103.5%;height:79%}
@media (max-width:900px){.k-hero{min-height:auto}.k-hero .txt{padding:36px 0 min(72vw,420px)}.k-hero .scen{width:150%;right:-20%;bottom:-3%}}
/* Mobil: bilden större och direkt under texten (Pontus 17 okt). Scenen är dubbelt så bred som skärmen och förskjuten så att mannen står kvar i högra halvan. */
@media (max-width:767.98px){.k-hero .txt{padding-bottom:100vw}.k-hero .scen{width:200%;right:-38%;bottom:-2%}}
.k-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}
.k-form form{display:flex;flex-direction:column;gap:20px}
.k-form label{display:flex;flex-direction:column;gap:8px}
.k-form label span{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.k-form input,.k-form textarea{font:inherit;font-size:16px;color:var(--petrol);background:transparent;border:1.5px solid var(--petrol);border-radius:999px;height:48px;padding:0 20px;outline:none;transition:border-color .2s,box-shadow .2s}
.k-form textarea{height:auto;min-height:120px;border-radius:20px;padding:14px 20px;resize:vertical}
.k-form input:focus,.k-form textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,91,45,.16)}
.k-form .liten{color:var(--mute-l)}
.k-aside{display:flex;flex-direction:column;gap:40px}
.k-aside .pers{display:flex;gap:24px;align-items:flex-start}
.k-aside .pers img{width:96px;height:120px;object-fit:cover;object-position:50% 15%;border-radius:4px;flex:none}
.k-aside .pers .nm{font-weight:700;font-size:26px;letter-spacing:-.01em}
.k-aside .pers .rl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:500;margin:6px 0 8px}
.k-aside .pers .ct{font-size:18px;line-height:1.5;color:var(--mute-l)}
.k-aside .box{background:var(--orange);color:var(--petrol);border-radius:20px;padding:28px;font-size:18px;line-height:1.5}
.k-aside .box p+p{margin-top:12px}
@media (max-width:900px){.k-form{grid-template-columns:1fr;gap:56px}}

/* ============================================================
   JOURNALEN + ARTIKEL
   ============================================================ */
.j-hero{padding:200px 0 100px}
.j-hero h1{font-weight:700;font-size:clamp(56px,7.2vw,96px);line-height:.92;letter-spacing:-.034em;margin:24px 0 32px;max-width:1000px}
.j-hero .ing{max-width:720px}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.chip{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;border:1.5px solid rgba(219,230,235,.45);font-size:16px;font-weight:500;transition:background .25s,color .25s,border-color .25s}
.chip.on,.chip:hover{background:var(--orange);color:var(--petrol);border-color:var(--orange)}
.utvald{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.utvald .bild{aspect-ratio:4/3;background:var(--line-l);overflow:hidden}
.utvald .bild img{width:100%;height:100%;object-fit:cover}
.utvald h2{font-weight:700;font-size:clamp(28px,3vw,44px);line-height:1.02;letter-spacing:-.025em;margin:18px 0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:56px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:56px}
.kort{border-top:2px solid var(--orange);padding-top:20px;display:flex;flex-direction:column;gap:14px}
.kort h3{font-weight:700;font-size:26px;line-height:1.15;letter-spacing:-.012em}
.kort .brod{color:var(--mute-l)}
[data-bg="dark"] .kort .brod{color:var(--mute-d)}
@media (max-width:900px){.utvald{grid-template-columns:1fr}.grid2,.grid3{grid-template-columns:1fr}}
.pren .rad{display:flex;justify-content:space-between;gap:80px;align-items:flex-start;flex-wrap:wrap}
.pren form{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pren input{font:inherit;font-size:15px;color:var(--ljus);background:transparent;border:2px solid rgba(219,230,235,.5);border-radius:999px;padding:0 24px;height:56px;width:min(360px,80vw);outline:none}
.pren input:focus{border-color:var(--orange)}
.art-bild{aspect-ratio:1320/620;background:var(--line-l);overflow:hidden;margin-bottom:64px}
.art-bild img{width:100%;height:100%;object-fit:cover}
.art{display:grid;grid-template-columns:minmax(0,760px) minmax(280px,1fr);gap:96px;align-items:start}
.art .brodtext p{font-size:20px;line-height:1.55;font-weight:300;margin-bottom:24px}
.art .brodtext p b{font-weight:700}
.art .brodtext h2{font-weight:700;font-size:30px;line-height:1.15;letter-spacing:-.012em;margin:40px 0 20px}
.art aside{display:flex;flex-direction:column;gap:40px;position:sticky;top:120px}
.art aside .av{border-top:2px solid var(--orange);padding-top:20px}
.art aside .av .nm{font-weight:700;font-size:26px;margin:8px 0 4px}
.art aside .box{background:var(--petrol);color:var(--ljus);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.art aside .box .h3{max-width:360px}
@media (max-width:900px){.art{grid-template-columns:1fr;gap:56px}.art aside{position:static}}
.e-06kfj1:not(#_){background-size:120%}
.e-quwhnt:not(#_){margin-top:50px}
.e-4afmcz:not(#_){letter-spacing:-7px}
.e-f1k3ay:not(#_){margin-top:-95px}
.e-1po5k1:not(#_){margin-top:0px;font-weight:400}
.e-7c7hjc:not(#_){margin-top:-120px}
.e-aniyen:not(#_){margin-top:38px}
.e-kkkg4n:not(#_){--l:58.9%;--t:26%;--sl:34.5%;--st:31.1%;--fall:52vh;--sx:-3vw;--r:-11deg;--d:4.2s;--o:0.0s}
.e-ybbwyp:not(#_){--l:69.2%;--t:25.9%;--sl:49.6%;--st:25.8%;--fall:52vh;--sx:0vw;--r:3deg;--d:4.9s;--o:-0.9s}
.e-i9a7gf:not(#_){--l:78.7%;--t:26.1%;--sl:66.3%;--st:31%;--fall:52vh;--sx:3vw;--r:-6deg;--d:5.6s;--o:-1.8s}
.e-c62jy7:not(#_){--l:90.2%;--t:26%;--sl:76.1%;--st:47.2%;--fall:52vh;--sx:-3vw;--r:8deg;--d:6.3s;--o:-2.7s}
.e-gz6cgl:not(#_){--l:54.9%;--t:33.6%;--sl:25.1%;--st:47.5%;--fall:44vh;--sx:0vw;--r:-1deg;--d:4.2s;--o:-3.6s}
.e-tdozj0:not(#_){--l:65.8%;--t:33.6%;--sl:33.9%;--st:63.8%;--fall:44vh;--sx:3vw;--r:-10deg;--d:4.9s;--o:-4.5s}
.e-h0t83x:not(#_){--l:76.4%;--t:33.7%;--sl:49.2%;--st:68.2%;--fall:44vh;--sx:-3vw;--r:4deg;--d:5.6s;--o:-5.4s}
.e-pj0477:not(#_){--l:89.6%;--t:33.8%;--sl:69.3%;--st:63.3%;--fall:44vh;--sx:0vw;--r:-5deg;--d:6.3s;--o:-6.3s}
.e-qdu1vl:not(#_){max-width:1182px}
.e-950gil:not(#_){margin-top:-240px}
.e-ohfwkw:not(#_){font-size:140px}
.e-xes2rq:not(#_){margin-top:-25px}
.e-0o3br8:not(#_){font-size:140px}
.e-4pe4eq:not(#_){margin-top:-35px}
.e-m84sok:not(#_){font-size:140px}
.e-hbv6v2:not(#_){margin-top:-40px}
.e-pecz24:not(#_){height:890px}
.e-hn5ocr:not(#_){font-size:28px;width:720px}
@media (max-width:1279.98px){
.e-4afmcz:not(#_){margin-bottom:45px;letter-spacing:-5.5px}
.e-kkkg4n:not(#_){--l:19.5%;--t:31.7%;--sl:28.6%;--st:37.3%}
.e-ybbwyp:not(#_){--l:34%;--t:29%;--sl:49.6%;--st:31.8%}
.e-i9a7gf:not(#_){--l:56%;--t:36.4%;--sl:71.1%;--st:36.3%}
.e-c62jy7:not(#_){--l:75.6%;--t:29.7%;--sl:78.1%;--st:47.2%}
.e-gz6cgl:not(#_){--l:25.3%;--t:36.9%;--sl:22.1%;--st:47.5%}
.e-tdozj0:not(#_){--l:41.8%;--t:35.6%;--sl:30.3%;--st:58.9%}
.e-h0t83x:not(#_){--l:70.8%;--t:35.4%;--sl:50.8%;--st:67.1%}
.e-pj0477:not(#_){--l:52.6%;--t:30.4%;--sl:76.2%;--st:61.3%}
.e-ohfwkw:not(#_){font-size:120px}
.e-6j99cx:not(#_){height:562px}
.e-ey8pur:not(#_){width:184px;height:446px}
.e-57euef:not(#_){height:420px}
.e-hn5ocr:not(#_){font-size:24px}
}
@media (max-width:767.98px){
.e-06kfj1:not(#_){background-size:2144px 1206px}
.e-quwhnt:not(#_){margin-top:0}
.e-4afmcz:not(#_){font-size:240px;letter-spacing:-6px;margin-bottom:-50px}
.e-f1k3ay:not(#_){font-size:240px;margin-top:-75px}
.e-1po5k1:not(#_){font-weight:400;font-size:24px;margin-top:10px}
.e-3mb37b:not(#_){font-size:72px;margin-top:25px;line-height:65px;margin-bottom:0px}
.e-7c7hjc:not(#_){margin-bottom:-50px}
.e-bmy5dn:not(#_){font-size:32px;line-height:38px}
.e-ar9vlq:not(#_){font-size:24px}
.e-kkkg4n:not(#_){--l:80.3%;--t:56.4%;--sl:80%;--st:42.1%}
.e-ybbwyp:not(#_){--l:15.9%;--t:37.5%;--sl:16.9%;--st:50.4%}
.e-i9a7gf:not(#_){--l:16.5%;--t:56.6%;--sl:82.5%;--st:49.7%}
.e-c62jy7:not(#_){--l:23.6%;--t:43.3%;--sl:48.4%;--st:36.9%}
.e-gz6cgl:not(#_){--l:19.9%;--t:50%;--sl:20.3%;--st:57.2%}
.e-tdozj0:not(#_){--l:81.7%;--t:50%;--sl:17.7%;--st:42%}
.e-h0t83x:not(#_){--l:78.9%;--t:43.3%;--sl:80%;--st:57.1%}
.e-pj0477:not(#_){--l:73.8%;--t:37.7%;--sl:49.7%;--st:63%}
.e-1qbln5:not(#_){height:120px}
.e-otl02r:not(#_){font-size:24px;line-height:32px}
.e-ohfwkw:not(#_){margin-bottom:-50px;font-size:75px}
.e-0o3br8:not(#_){margin-bottom:-50px;font-size:75px}
.e-m84sok:not(#_){margin-bottom:-50px;font-size:75px}
.e-dseu3i:not(#_){margin-bottom:25px}
.e-pecz24:not(#_){height:auto}
.e-ahyvfo:not(#_){margin-top:0px}
.e-6j99cx:not(#_){height:103.8%}
.e-ey8pur:not(#_){height:67.1%;width:13.7%}
.e-57euef:not(#_){height:79%}
.e-tscb1g:not(#_){font-size:72px}
.e-hn5ocr:not(#_){margin-top:-25px;font-size:18px}
}
@media (min-width:1280px){
.e-8v505d:not(#_),.e-q9vc5d:not(#_),.e-hndqqj:not(#_),.e-kk73vp:not(#_),.e-hedxei:not(#_),.e-m8385n:not(#_),.e-n976rf:not(#_),.e-mpw6re:not(#_),.e-gtb70s:not(#_),.e-d1bzeg:not(#_),.e-c0a32z:not(#_),.e-ol7v16:not(#_),.e-w5j1ql:not(#_),.e-q5m6kg:not(#_){display:none}
}
@media (min-width:768px) and (max-width:1279.98px){
.e-q9vc5d:not(#_),.e-hndqqj:not(#_),.e-kk73vp:not(#_),.e-pmi91i:not(#_),.e-hedxei:not(#_),.e-ilqs74:not(#_),.e-m8385n:not(#_),.e-e0kw74:not(#_),.e-qo2ht1:not(#_),.e-fssiol:not(#_),.e-mpw6re:not(#_),.e-gtb70s:not(#_),.e-bgirs6:not(#_),.e-c0a32z:not(#_),.e-hzj1ki:not(#_),.e-w5j1ql:not(#_),.e-q5m6kg:not(#_){display:none}
}
@media (max-width:767.98px){
.e-pmi91i:not(#_),.e-ilqs74:not(#_),.e-n976rf:not(#_),.e-e0kw74:not(#_),.e-qo2ht1:not(#_),.e-fssiol:not(#_),.e-bgirs6:not(#_),.e-d1bzeg:not(#_),.e-hzj1ki:not(#_),.e-ol7v16:not(#_){display:none}
}