/* ====================================================================
   N.P. RINGSTROM
   Formgiven 2026-08-31 enligt BYGGORDNING.md. Plan i
   _bygglogg/ringstrom/plan.md, referenser i referenser.md.

   Riktningen ar hamtad ur de tva sajter Joakim namngav, uppmatta:
   Alfred kor Schibsted Grotesk 164 px vikt 600. Karl kor Geist 120 px
   vikt 700 med sparr -6 px. Bada har ljus mark, mycket luft och EN
   accent. Alltsa: enorm grotesk, hard kerning, tystnad.

   Tva tidigare riktningar underkandes: en scrollfilm ("det ar bara en
   bild till en bild med en text pa") och en antikva-arkivkatalog ("den
   absolut fulaste hemsidan jag har sett"). Bada valdes ur egen smak i
   stallet for ur referenserna. Det ar felet som ratats har.
   ==================================================================== */
:root{
  --vit:#FFFFFF;
  --natt:#0B0E2A;
  --kobolt:#131578;
  --gul:#E8C34A;
  --dampad:#5B5E7A;
  --linje:rgba(11,14,42,.10);
  --linje-m:rgba(255,255,255,.14);
  --pad:clamp(22px,5vw,88px);
  --matt:1320px;
  --lugn:cubic-bezier(.16,1,.3,1);
  --typ:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{scroll-behavior:auto !important}
body{margin:0;background:var(--vit);color:var(--natt);
  font-family:var(--typ);font-size:18px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-family:var(--typ);font-weight:600;
  letter-spacing:-.045em;line-height:.96}
:focus-visible{outline:2px solid var(--kobolt);outline-offset:4px}
.inre{max-width:var(--matt);margin:0 auto;padding:0 var(--pad)}
.hoppa{position:absolute;left:10px;top:10px;z-index:300;transform:translateY(-200%);
  background:var(--kobolt);color:#fff;padding:12px 20px;font-weight:600}
.hoppa:focus{transform:translateY(0)}

/* etiketter i mono, sma och lugna */
.etikett{margin:0 0 20px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dampad)}
.mork .etikett{color:rgba(255,255,255,.55)}

/* ---------- LISTEN ---------- */
.list{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;gap:22px;
  padding:20px var(--pad);color:#fff;
  transition:background .5s var(--lugn),padding .5s var(--lugn),color .5s var(--lugn)}
.list.fast{background:rgba(255,255,255,.9);color:var(--natt);padding-top:13px;padding-bottom:13px;
  border-bottom:1px solid var(--linje);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)}
.marke{font-size:17px;font-weight:600;letter-spacing:-.028em}
.marke span{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;
  margin-left:11px;opacity:.62;vertical-align:.15em}
.list nav{margin-left:auto;display:none;gap:34px;font-size:15px;font-weight:450;letter-spacing:-.01em}
@media(min-width:980px){.list nav{display:flex}}
.list nav a{opacity:.72;transition:opacity .3s var(--lugn)}
.list nav a:hover{opacity:1}
.ring{margin-left:auto;display:inline-flex;align-items:center;min-height:42px;padding:0 20px;
  border-radius:999px;font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .35s var(--lugn),color .35s var(--lugn),border-color .35s var(--lugn)}
@media(min-width:980px){.ring{margin-left:0}}
.list.fast .ring{background:var(--kobolt);border-color:var(--kobolt);color:#fff}
.ring:hover{background:#fff;color:var(--kobolt);border-color:#fff}
.list.fast .ring:hover{background:var(--natt);border-color:var(--natt);color:#fff}

/* ====================================================================
   HJALTEN. Fotografiet i helskarm, rubriken ensam med luft omkring.
   ==================================================================== */
.hjalte{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:var(--natt)}
.hjalte-bild{position:absolute;inset:-6% 0 -6%;will-change:transform}
.hjalte-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hjalte::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,14,42,.62) 0%,rgba(11,14,42,.05) 34%,
    rgba(11,14,42,.5) 66%,rgba(11,14,42,.94) 100%)}
.hjalte-text{position:relative;z-index:3;width:100%;
  padding-top:clamp(120px,16vw,200px);padding-bottom:clamp(34px,4.4vw,58px)}
.hjalte-ort{margin:0 0 26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.hjalte h1{font-size:clamp(44px,9vw,128px);color:#fff;max-width:13ch;font-weight:600;
  letter-spacing:-.05em;line-height:.92}
.hjalte-om{margin:clamp(24px,2.8vw,34px) 0 0;max-width:46ch;
  font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:rgba(255,255,255,.76);
  letter-spacing:-.012em}
.hjalte-knappar{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(28px,3.2vw,40px) 0 0}
.kn{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:999px;
  font-size:16px;font-weight:500;letter-spacing:-.012em;
  transition:background .35s var(--lugn),color .35s var(--lugn),transform .35s var(--lugn)}
.kn-primar{background:#fff;color:var(--natt)}
.kn-primar:hover{background:var(--gul);transform:translateY(-2px)}
.kn-tom{border:1px solid rgba(255,255,255,.32);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kn-tom:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

.fakta{position:relative;z-index:3;display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--linje-m)}
@media(min-width:840px){.fakta{grid-template-columns:repeat(4,1fr)}}
.fakta li{padding:clamp(20px,2.4vw,30px) var(--pad);border-right:1px solid var(--linje-m)}
.fakta li:last-child{border-right:0}
@media(max-width:839px){.fakta li:nth-child(2n){border-right:0}
  .fakta li:nth-child(-n+2){border-bottom:1px solid var(--linje-m)}}
.fakta b{display:block;font-size:clamp(28px,3.4vw,46px);font-weight:600;
  letter-spacing:-.04em;color:#fff;line-height:1}
.fakta span{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ---------- BRON ---------- */
.bro{padding:clamp(80px,11vw,180px) 0;background:var(--vit)}
.bro-text{margin:0;font-size:clamp(24px,3.6vw,50px);line-height:1.16;
  letter-spacing:-.038em;font-weight:500;color:var(--natt);max-width:22ch}
.bro-lank{display:inline-block;margin-top:clamp(28px,3.2vw,40px);font-size:17px;
  font-weight:500;color:var(--kobolt);letter-spacing:-.012em}
.bro-lank span{display:inline-block;transition:transform .35s var(--lugn)}
.bro-lank:hover span{transform:translateX(6px)}

/* ====================================================================
   TJANSTERNA. Nio bildkort, tre kolumner, alla lika hoga, inga hal.
   Inga forskjutningar. Joakim: "sen sa gor du det och lamnar liksom sa
   att det blir sahar konstigt mellanrum efter bilderna."
   ==================================================================== */
.tjanster{padding:0 0 clamp(80px,10vw,150px);background:var(--vit)}
.tjanster h2{font-size:clamp(32px,5.6vw,76px);max-width:14ch;margin:0 0 clamp(40px,5vw,72px)}
.tk-rut{display:grid;gap:clamp(20px,2.4vw,40px);grid-template-columns:1fr}
@media(min-width:660px){.tk-rut{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.tk-rut{grid-template-columns:repeat(3,1fr)}}
.tk a{display:flex;flex-direction:column;height:100%}
.tk-bild{display:block;overflow:hidden;border-radius:18px;background:#EDEDF2;aspect-ratio:4/3}
.tk-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--lugn)}
.tk a:hover .tk-bild img{transform:scale(1.05)}
.tk-txt{display:block;padding:20px 2px 0}
.tk-namn{display:block;font-size:clamp(20px,2.1vw,26px);font-weight:600;
  letter-spacing:-.032em;line-height:1.12;color:var(--natt)}
.tk-om{display:block;margin-top:9px;font-size:16px;line-height:1.5;color:var(--dampad);
  letter-spacing:-.008em}
.tk a:hover .tk-namn{color:var(--kobolt)}

/* ====================================================================
   KULORBANDET. Sidans ETT minnesvarda grepp.
   Atta spegelkulorer i helskarm. Bandet byter kulor medan man scrollar,
   och namnet star i enorm grotesk over. Det ar det enda de har som ingen
   annan glasmastare i Sverige har.
   ==================================================================== */
.kulor{position:relative;height:300vh;background:var(--natt)}
.kulor-scen{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.kulor-lager{position:absolute;inset:0}
.kulor-bild{position:absolute;inset:0;opacity:0}
.kulor-bild img{width:100%;height:100%;object-fit:contain;padding:clamp(60px,10vw,140px)}
.kulor-bild::after{content:'';position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 50%,transparent,rgba(11,14,42,.75))}
.kulor-namn{position:relative;z-index:3;text-align:center;pointer-events:none}
.kulor-namn b{display:block;font-size:clamp(52px,13vw,180px);font-weight:600;
  letter-spacing:-.055em;line-height:.9;color:#fff;mix-blend-mode:difference}
.kulor-namn i{display:block;margin-top:18px;font-family:var(--mono);font-style:normal;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gul)}
.kulor-etikett{position:absolute;left:var(--pad);top:clamp(96px,12vw,140px);z-index:4;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.kulor-rad{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,4vw,52px);z-index:4;
  display:flex;gap:6px}
.kulor-rad i{flex:1;height:2px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.kulor-rad i::after{content:'';position:absolute;inset:0;background:var(--gul);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--lugn)}
.kulor-rad i.pa::after{transform:scaleX(1)}

/* ---------- ARBETET ---------- */
.verk{padding:clamp(80px,10vw,150px) 0;background:var(--vit)}
.verk h2{font-size:clamp(32px,5.6vw,76px);max-width:15ch;margin:0 0 clamp(40px,5vw,72px)}
.v-rut{display:grid;gap:clamp(14px,1.6vw,24px);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.v-rut{grid-template-columns:repeat(4,1fr)}}
.v-post{overflow:hidden;border-radius:14px;aspect-ratio:1/1;background:#EDEDF2}
.v-post img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--lugn)}
.v-post:hover img{transform:scale(1.06)}
.mer-lank{display:inline-block;margin-top:clamp(32px,3.6vw,48px);font-size:17px;
  font-weight:500;color:var(--kobolt)}
.mer-lank span{display:inline-block;transition:transform .35s var(--lugn)}
.mer-lank:hover span{transform:translateX(6px)}

/* ---------- VARUMARKEN ---------- */
.marken{padding:clamp(52px,6vw,90px) 0;background:var(--vit);border-top:1px solid var(--linje)}
.marken .etikett{text-align:center}
.marken-spar{margin-top:clamp(26px,3vw,40px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marken-rad{display:flex;align-items:center;gap:clamp(48px,6.5vw,104px);width:max-content;
  will-change:transform;padding:0 clamp(30px,5vw,80px)}
.marken-rad li{flex:none;display:flex;align-items:center;height:clamp(24px,2.6vw,34px)}
.marken-rad img{max-height:100%;width:auto;object-fit:contain;
  filter:grayscale(1) opacity(.42);transition:filter .4s var(--lugn)}
.marken-rad li:hover img{filter:grayscale(0) opacity(1)}

/* ---------- KONTAKT ---------- */
.bott{padding:clamp(80px,10vw,150px) 0;background:var(--natt);color:#fff}
.bott h2{font-size:clamp(30px,5.2vw,68px);max-width:16ch;color:#fff}
.bott-rad{margin-top:clamp(40px,5vw,72px);display:grid;gap:32px}
@media(min-width:820px){.bott-rad{grid-template-columns:repeat(4,1fr)}}
.vad{margin:0 0 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.var{margin:0;font-size:18px;line-height:1.5;color:#fff;letter-spacing:-.012em}
.var a{opacity:.86;transition:opacity .3s var(--lugn)}
.var a:hover{opacity:1;color:var(--gul)}

/* ---------- SIDFOTEN ---------- */
.fot{background:var(--natt);color:rgba(255,255,255,.6);padding:0 0 32px;
  border-top:1px solid var(--linje-m)}
.f-topp{display:grid;gap:clamp(36px,4vw,64px);padding-top:clamp(52px,6vw,88px)}
@media(min-width:900px){.f-topp{grid-template-columns:minmax(230px,1fr) 2fr}}
.f-namn{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.035em;color:#fff}
.f-ar{margin:12px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.f-adr,.f-kontakt{margin:22px 0 0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.78)}
.f-kontakt a:hover{color:var(--gul)}
.f-lankar{display:grid;gap:clamp(26px,3vw,44px)}
@media(min-width:620px){.f-lankar{grid-template-columns:repeat(3,1fr)}}
.f-rubrik{margin:0 0 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.f-kol a{display:block;padding:7px 0;font-size:15.5px;color:rgba(255,255,255,.7);
  letter-spacing:-.01em;transition:color .3s var(--lugn)}
.f-kol a:hover{color:#fff}
.f-botten{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;
  margin-top:clamp(44px,5vw,72px);padding-top:24px;border-top:1px solid var(--linje-m);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.4)}
.f-botten p{margin:0}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .kulor{height:auto}.kulor-scen{position:relative;height:auto;padding:80px 0}
  .kulor-bild{position:relative;opacity:1;height:40vh}
}


/* ---------- rattelser 2026-08-31, tredje omgangen ----------
   Joakim, tre punkter, alla ratt:
   1. "varfor gor du spegelglas till en stor feature? De har val inte ens
      det pa sin egen hemsida?" Ratt: /spegel/, /speglar/ och
      /spegelglas/ ger alla 404 hos dem, och det star inte i menyn. Men
      pa deras inredningssida star "Vi har Sveriges bredaste sortiment pa
      speglar". Det ar deras starkaste pastaende, begravt i ett stycke.
      Alltsa: en textrad har, hela kulorbandet pa spegelsidan.
   2. "du avslutar med bla sektion pa bla sektion." Kontaktbandet ar ljust.
   3. "jag har aldrig sett en footer som ar sa centrerad. Varfor ar den
      inte hela vagen ut?" Foten gar nu kant till kant. */

.bro-not{margin:clamp(22px,2.4vw,30px) 0 0;max-width:52ch;font-size:17px;
  line-height:1.55;color:var(--dampad);letter-spacing:-.008em}
.bro-not a{color:var(--kobolt);font-weight:500;white-space:nowrap}
.bro-not a:hover{text-decoration:underline;text-underline-offset:3px}

/* Kontaktbandet ljust, sa foten far vara den enda morka ytan pa slutet */
.bott{background:var(--vit);color:var(--natt);border-top:1px solid var(--linje)}
.bott h2{color:var(--natt)}
.bott .vad{color:var(--dampad)}
.bott .var{color:var(--natt)}
.bott .var a{opacity:1;color:var(--kobolt)}
.bott .var a:hover{color:var(--natt)}

/* Sidfoten kant till kant. Ingen centrerad lada. */
.f-topp,.f-botten{max-width:none;padding-left:var(--pad);padding-right:var(--pad)}
.f-botten{margin-left:0;margin-right:0}


/* ====================================================================
   RATTELSER 2026-08-31, fjarde omgangen
   Joakim: "dott vitt falt, urblekta loggor, ingenting ror sig."
   Uppmatt innan: pekare 2 av 3 provade, egna effekter 2. Alltsa nastan
   inget svarade pa musen och nastan ingenting hande utover intoning.
   ==================================================================== */

/* 1. DODA TOMRUMMET. Sektionerna staplade sin botten- och toppluft pa
      varandra sa det blev tva tomma skarmar i rad. Nu delar de en linje. */
.verk{padding-bottom:clamp(56px,6vw,88px)}
.marken{padding:clamp(34px,3.6vw,54px) 0;border-top:1px solid var(--linje);
  border-bottom:1px solid var(--linje)}
.bott{padding:clamp(64px,7vw,110px) 0}

/* 2. LOGGORNA. Deras EGEN logotyp lag bland partnerna, och resten var
      urblekta skarmbilder. Nu bara de tio riktiga, storre och morkare. */
.marken-rad li{height:clamp(30px,3.4vw,46px)}
.marken-rad img{filter:grayscale(1) opacity(.72);
  transition:filter .35s var(--lugn),transform .35s var(--lugn)}
.marken-rad li:hover img{filter:grayscale(0) opacity(1);transform:scale(1.06)}
.marken .etikett{margin-bottom:0}

/* 3. PEKAREN. Korten lutar mot musen och lyfter, med djup. Ljus i glas
      ror sig nar man sjalv ror sig, och det ska en glassajt gora. */
.tk a{transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--lugn)}
.tk-bild{box-shadow:0 2px 10px -6px rgba(11,14,42,.2);
  transition:box-shadow .5s var(--lugn)}
.tk a:hover .tk-bild{box-shadow:0 34px 60px -30px rgba(19,21,120,.45)}
.v-post{will-change:transform;transition:box-shadow .5s var(--lugn)}
.v-post:hover{box-shadow:0 30px 56px -28px rgba(11,14,42,.4)}
.f-kol a{transition:color .3s var(--lugn),padding-left .3s var(--lugn)}
.f-kol a:hover{padding-left:8px}
.kn,.ring{will-change:transform}

/* 4. En glansstrimma som foljer musen over hjaltebilden. Kostar noll. */
.hjalte-glans{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,42%),
    rgba(255,255,255,.16),transparent 62%);
  transition:opacity .6s var(--lugn)}