/* Homito – genererad ur Homito Om oss v4.dc.html.
   Ändra i källfilerna, inte här. */

@font-face{font-family:'Metropolis';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/metropolis-400.woff2) format('woff2')}
@font-face{font-family:'Metropolis';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/metropolis-500.woff2) format('woff2')}
@font-face{font-family:'Metropolis';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/metropolis-700.woff2) format('woff2')}
.homito-hoppa{position:absolute;left:-9999px;top:0;z-index:500;padding:14px 22px;background:#1F1F1F;color:#FFFFFF;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.homito-hoppa:focus{left:12px;top:12px;opacity:1}
:focus-visible{outline:2px solid #1F1F1F;outline-offset:3px}
img{max-width:100%}

/* === Homito Om oss v4.dc.html === */
html{scrollbar-gutter:stable;scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;font-family:'Metropolis',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#1F1F1F;text-decoration:none;transition:opacity .25s ease}
a:hover{opacity:.55}
@keyframes menyIn{from{opacity:0;transform:translate(-50%,-18px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes introFram{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes rubrikFram{from{opacity:0;transform:translateY(34px);letter-spacing:.16em}to{opacity:1;transform:none;letter-spacing:.085em}}
[data-screen-label="Meny"] nav a svg{transition:transform .3s ease}
[data-screen-label="Meny"] nav a:hover svg{transform:translate(3px,-3px)}
[data-screen-label="Meny"] nav a > span:first-child{transition:color .25s ease}
[data-screen-label="Meny"] nav a:hover > span:first-child{color:#1F1F1F!important}
[data-screen-label="Meny"] nav a span > span + span{transition:color .25s ease}
[data-screen-label="Meny"] nav a:hover span > span + span{color:#3F3F3F!important}
a[href] span > svg{transition:transform .35s cubic-bezier(.22,.8,.26,1)}
a[href]:hover span > svg{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@keyframes cueLinje{0%{transform:scaleY(0);transform-origin:50% 0}44%{transform:scaleY(1);transform-origin:50% 0}56%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}
@keyframes cuePil{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
[data-rullacue]{opacity:.82;transition:opacity .5s ease,transform .5s ease}
[data-rullacue]:hover{opacity:1}
html[data-cuenara="1"] [data-rullacue]{opacity:1}
html[data-rullad="1"] [data-rullacue]{opacity:0;transform:translate(-50%,12px);pointer-events:none}
[data-hemmark]{opacity:.7;transition:opacity .3s ease,transform .45s cubic-bezier(.22,.8,.26,1)}
[data-hemmark]:hover{opacity:1;transform:translate(-50%,-50%) scale(1.1)}

/* ===== ADAPTIV – gäller endast under 900px. Desktop är oförändrad. ===== */
@media (max-width:900px){
[data-m~="gutter"]{padding-left:40px!important;padding-right:40px!important}
[data-m~="tre"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
[data-m~="tre"]>div:nth-child(3){border-left:0!important;border-top:1px solid rgba(203,203,204,.7)!important;padding-left:0!important;padding-top:32px!important;margin-top:32px!important;grid-column:1/3!important}
[data-m~="tvakol"]{gap:40px 48px!important}
[data-m~="fotgrid"]{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)!important;gap:40px 36px!important;padding-left:40px!important;padding-right:40px!important}
[data-m~="fotgrid"]>a:last-child{grid-column:2/4!important}
[data-m~="fotbotten"]{padding-left:40px!important;padding-right:40px!important}
}
@media (max-width:760px){
[data-m~="gutter"]{padding-left:22px!important;padding-right:22px!important}
[data-m~="topbar"]{top:12px!important;width:calc(100% - 24px)!important;padding:6px 6px 6px 12px!important;border-radius:12px!important}
[data-m~="topbar"] [data-hemmark]{width:30px!important;height:30px!important}
[data-m~="topbar-sprak"],[data-m~="topbar-login"]{display:none!important}
[data-m~="topbar-kontakt"]{padding:11px 12px!important;font-size:9px!important;letter-spacing:.1em!important}
[data-m~="hamburgare"]{padding:17px 10px!important}
[data-m~="hamburgare"] svg{width:26px!important}
[data-m~="menypanel"]{top:86px!important;width:calc(100% - 24px)!important;max-height:calc(100vh - 102px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
[data-m~="menygrid"]{grid-template-columns:minmax(0,1fr)!important}
[data-m~="menybild"]{display:none!important}
[data-m~="menyvanster"]{padding:22px 20px 24px!important}
[data-m~="menymobil"]{display:flex!important;border-top:0!important;margin-top:14px!important;padding-top:0!important}
[data-screen-label="Kontakt"]{scroll-margin-top:76px!important;padding-top:64px!important}
[data-m~="etikettgrid"]{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
[data-m~="etikettgrid"]>span:first-child{padding-top:0!important}
[data-m~="citat"]{height:auto!important}
/* Mobilrytm: stramare sektionsavstånd och rubriker */
[data-screen-label="Hero"]{height:76vh!important;min-height:480px!important}
[data-screen-label="Vardagen"]{height:38vh!important;min-height:260px!important}
[data-screen-label="Intro"]{padding-top:56px!important}
[data-screen-label="Berättelsen"]{padding-bottom:72px!important}
[data-screen-label="Övergången"]{padding-top:72px!important;padding-bottom:72px!important}
[data-screen-label="Visionen"]{padding-top:80px!important;padding-bottom:80px!important}
[data-screen-label="Teamet"]{padding-top:56px!important;padding-bottom:72px!important}
[data-m~="etikettgrid"] h2{font-size:25px!important;line-height:1.2!important;letter-spacing:.07em!important;max-width:none!important}
[data-screen-label="Berättelsen"] [data-m~="etikettgrid"]{padding-top:44px!important}
[data-m~="citat-inner"]{position:static!important;height:auto!important;padding-top:60px!important;padding-bottom:70px!important}
[data-m~="histfakta"]>div{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:15px 0!important}
[data-m~="histfakta"]>div>span{display:none!important}
[data-m~="histfakta"]>div>p{font-size:15.5px!important;line-height:1.6!important;max-width:none!important}
[data-m~="hist-text"][data-oppen="false"]{max-height:340px!important;overflow:hidden!important;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
[data-m~="lasmer"]{display:inline-flex!important}
[data-m~="lasmer-pil"]{transition:transform .4s cubic-bezier(.22,.8,.26,1)}
[data-m~="lasmer"][data-oppen="true"] [data-m~="lasmer-pil"]{transform:rotate(180deg)}
[data-m~="citat-inner"] blockquote{font-size:23px!important;letter-spacing:.06em!important;max-width:none!important}
[data-m~="heroband"]{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
[data-m~="heroband"]>h1{grid-column:1!important}
/* 01–03: kort, för att skilja dem från frågelistan ovanför */
[data-m~="tre"]{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;margin-top:38px!important}
[data-m~="tre"]>div,[data-m~="tre"]>div:nth-child(3){grid-column:auto!important;border-left:0!important;border-top:0!important;border-radius:12px!important;background:rgba(203,203,204,.22)!important;padding:18px 18px 20px!important;margin:0!important}
[data-m~="tre"] h3{margin:10px 0 0!important;font-size:18px!important;letter-spacing:.09em!important;max-width:none!important}
[data-m~="tre"] p{margin:9px 0 0!important;font-size:14.5px!important;line-height:1.6!important;max-width:none!important}
/* Teamet: två porträtt i bredd */
[data-m~="tva"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 16px!important;margin-top:clamp(34px,5vh,48px)!important}
[data-m~="tva"]>div{grid-column:auto!important;border-left:0!important;border-top:0!important;padding:0!important;margin:0!important}
[data-m~="tva"] img{width:100%!important}
[data-m~="tva"] h3{margin:14px 0 0!important;font-size:14px!important;letter-spacing:.05em!important;line-height:1.22!important}
[data-m~="tva"]>div>span{margin-top:6px!important;font-size:11.5px!important}
[data-m~="tva"] a{margin-top:10px!important;gap:5px!important;font-size:9px!important;letter-spacing:.08em!important}
[data-m~="tva"] p{margin:13px 0 0!important;font-size:12.5px!important;line-height:1.6!important;max-width:none!important}
[data-m~="tvakol"]{grid-template-columns:minmax(0,1fr)!important;gap:34px!important}
/* Sidfot – mobil: grupperade block med diskreta etiketter, luft i stället för linjer */
[data-m~="fotgrid"]{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:58px 22px 0!important}
[data-m~="fotgrid"]>div:first-child{gap:34px!important;margin:0 -22px!important;padding:0 22px 34px!important;border-bottom:1px solid rgba(255,255,255,.16)!important}
[data-m~="fotgrid"]>div:first-child svg{width:104px!important}
[data-m~="fotgrid"]>div:first-child p{font-size:24px!important;line-height:1.26!important;letter-spacing:-.012em!important;color:#FFFFFF!important;max-width:18ch!important}
[data-m~="fotgrid"]>nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px 16px!important;padding:44px 0 0!important}
[data-m~="fotgrid"]>nav::before{content:attr(data-etikett);grid-column:1/3;margin-bottom:12px;font-size:9.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.42)}
[data-m~="fotgrid"]>nav>a{font-size:16px!important;letter-spacing:.09em!important;line-height:1.15!important}
[data-m~="fotgrid"]>div:nth-child(3){gap:10px!important;margin:0!important;padding:44px 0 0!important;border:0!important;background:none!important;border-radius:0!important}
[data-m~="fotgrid"]>div:nth-child(3)::before{content:attr(data-etikett);margin-bottom:12px;font-size:9.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.42)}
[data-m~="fotgrid"]>div:nth-child(3)>a{font-size:17px!important;letter-spacing:-.005em!important;text-decoration:none!important}
[data-m~="fotgrid"]>div:nth-child(3)>span{font-size:9.5px!important;letter-spacing:.24em!important;text-transform:uppercase!important;color:rgba(255,255,255,.45)!important}
[data-m~="fotgrid"]>a:last-child{grid-column:auto!important;justify-self:start!important;margin:26px 0 46px!important;padding:6px 0!important;border:0!important;border-radius:0!important;gap:9px!important;font-size:11px!important;letter-spacing:.2em!important;color:#FFFFFF!important}
[data-m~="fotbotten"]{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:10px 18px!important;padding:20px 22px 30px!important}
[data-m~="fotbotten"]>div{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 18px!important}
[data-m~="fotbotten"] span,[data-m~="fotbotten"] a{font-size:9px!important;letter-spacing:.18em!important;color:rgba(255,255,255,.4)!important}
}

/* ===== IPAD – 761–1194px. Mobil (≤760) och desktop (≥1195) är oförändrade. ===== */
@media (min-width:761px) and (max-width:1194px){
[data-m~="gutter"]{padding-left:52px!important;padding-right:52px!important}
[data-m~="fotgrid"]{padding-left:52px!important;padding-right:52px!important}
[data-m~="fotbotten"]{padding-left:52px!important;padding-right:52px!important}
[data-m~="topbar"],[data-m~="menypanel"]{width:min(760px,calc(100% - 104px))!important}
/* Smalare etikettspalt – innehållet får den bredd det behöver */
[data-m~="etikettgrid"]{grid-template-columns:minmax(0,140px) minmax(0,1fr)!important;gap:32px!important}
/* Display-typografi i egen skala för plattan */
[data-m~="heroband"]{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
[data-m~="heroband"]>h1{grid-column:1!important;max-width:none!important;font-size:clamp(38px,4.6vw,48px)!important;line-height:1.14!important}
[data-screen-label="Intro"] p{font-size:clamp(22px,2.4vw,25px)!important;max-width:32ch!important}
[data-m~="citat-inner"] blockquote{font-size:clamp(34px,4.2vw,44px)!important;max-width:23ch!important}
[data-screen-label="Berättelsen"] h2,[data-screen-label="Övergången"] h2,[data-screen-label="Visionen"] h2,[data-screen-label="Teamet"] h2{font-size:clamp(30px,3.4vw,36px)!important}
[data-screen-label="Kontakt"] h2{font-size:clamp(40px,5.2vw,54px)!important;max-width:15ch!important}
[data-screen-label="Visionen"] span:has(>[data-rakna]){font-size:clamp(96px,10vw,118px)!important}
/* Kontakt: en spalt ger text och knapp full bredd */
[data-m~="tvakol"]{grid-template-columns:minmax(0,1fr)!important;gap:34px!important}
[data-m~="tvakol"]>p{max-width:52ch!important}
/* Sidfotens underrad bryter mellan block, inte mitt i orden */
[data-m~="fotbotten"]{flex-wrap:wrap!important;justify-content:flex-start!important;gap:10px 28px!important}
[data-m~="fotbotten"]>div{flex-wrap:wrap!important;gap:10px 28px!important}
[data-m~="fotbotten"] span,[data-m~="fotbotten"] a{white-space:nowrap!important;letter-spacing:.22em!important}
}
@media (min-width:761px) and (max-width:900px){
/* Porträtt */
[data-screen-label="Vardagen"]{height:46vh!important;min-height:340px!important}
[data-screen-label="Teamet"] [data-m~="etikettgrid"]{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
[data-screen-label="Teamet"] [data-m~="etikettgrid"]>span:first-child{padding-top:0!important}
[data-m~="fotgrid"]{gap:40px 32px!important}
}

/* Hovertillstånd från komponenternas style-hover. Endast för mus/pekdon –
   får aldrig innehålla layoutregler, de hör hemma på toppnivå. */
@media (hover: hover) and (pointer: fine){
.scp0:hover{text-decoration:none!important;opacity:1!important}
.scp1:hover{background:var(--hbg)!important;color:var(--hfg)!important;border-color:transparent!important;text-decoration:none!important;opacity:1!important}
/* Topbarens ljus/mörk-logik sätter en egen färg inline på texten inuti
   knappen. Utan denna rad ligger den kvar under hover. */
.scp1:hover span{color:var(--hfg)!important}
.scp2:hover{color:#fff!important;text-decoration:none!important}
.scp3:hover{color:#1F1F1F!important;opacity:1!important;text-decoration:none!important}
.scp4:hover{color:rgba(255,255,255,.65)!important}
.scp5:hover{color:#fff!important;opacity:1!important;text-decoration:none!important}
.scp6:hover{background:#1F1F1F!important;color:#fff!important;border-color:#1F1F1F!important;text-decoration:none!important;opacity:1!important}
}

/* Hero-bildens inzoomning. Ligger i CSS för att undvika den framtvingade
   layoutberäkning som JS-varianten orsakade under sidladdningen.
   @media (prefers-reduced-motion: reduce) högre upp stänger av den. */
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
img[data-hero-zoom]{animation:heroZoom 3s cubic-bezier(.19,.6,.22,1) both}

/* Namn och e-post under varandra på surfplatta – två kolumner blir under
   1025px bara drygt 110px breda var. */
@media (max-width:1024px){
[data-m~="formgrid"]{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
}

/* ===== Kontrast. Varje varde nedan matte inte 4.5:1 mot sin faktiska
   bakgrund; de nya ligger strax over. Uppmatt i webblasaren. ===== */
/* Språkväxlaren i menypanelen – den inaktiva länkens 0.45 gav 2.81:1 mot vitt. */
[data-m~="menypanel"] a[style*="rgba(31, 31, 31, 0.45)"],
[data-m~="menymobil"] a[style*="rgba(31, 31, 31, 0.45)"]{color:rgba(31,31,31,.66)!important}
/* Jämförelsetabellen – #767676 gav 4.15:1 mot den ljusgrå bakgrunden. */
[data-m~="jtabell"] span[style*="rgb(118, 118, 118)"]{color:#6E6E6E!important}
/* Samtyckesraden i formuläret – 0.6 gav 4.25:1 mot samma bakgrund. */
form p[style*="rgba(31, 31, 31, 0.6)"]{color:rgba(31,31,31,.72)!important}

/* Rullningsvisarens etikett står direkt på fotot utan skiljande skärm. Samma
   skugga som hjältens rubriker använder, och något högre opacitet. */
[data-rullacue] > span:first-child{opacity:.78!important;text-shadow:0 2px 18px rgba(0,0,0,.55)}

/* Liggande mobil: panelen är högre än vyn, så nederkanten (där "Skapa konto"
   ligger) hamnade utanför skärmen. Brytpunkten måste gälla höjd, inte bredd –
   en liggande telefon är bred. */
@media (max-height:560px){
[data-m~="menypanel"]{top:72px!important;max-height:calc(100vh - 88px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
[data-m~="menybild"]{display:none!important}
[data-m~="menyvanster"]{padding:20px 24px 22px!important}
[data-m~="menygrid"]{grid-template-columns:minmax(0,1fr)!important}
}

/* 320 px: "rekommendation" är ett enda ord bredare än textspalten, vilket gav
   några pixlars sidscroll. Rubriken krymper något och långa ord får brytas. */
@media (max-width:360px){
[data-m~="etikettgrid"] h2,[data-m~="gutter"] h2{font-size:25px!important;line-height:1.16!important}
h1,h2,h3{overflow-wrap:break-word;word-break:normal}
}