/* =====================================================================
   Dema Industripartner AB — Stilmall
   Designsystem byggt på företagets profil: SVART · RÖTT · VITT.
   Rött används enbart som accentfärg (CTA, rubrikdetaljer, linjer).
   Mobile-first, tillgänglighetsanpassad, lågt antal beroenden.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Designtokens (CSS-variabler)                                     *
 * ------------------------------------------------------------------ */
:root {
  /* Färgprofil */
  --ink:        #0c0c0e;   /* svart – dominant */
  --ink-2:      #141418;   /* mörk panel */
  --ink-3:      #1e1e24;   /* kort/ytor på mörk bakgrund */
  --paper:      #f5f4f1;   /* varm off-white – ljus sektion */
  --white:      #ffffff;
  --red:        #e3001b;   /* accent – primär röd */
  --red-deep:   #b50016;   /* hover/djup röd */
  --steel-700:  #3a3a42;
  --steel-500:  #6c6c78;
  --steel-300:  #b9b9c2;
  --line-dark:  rgba(255,255,255,.10);
  --line-light: rgba(12,12,14,.12);

  /* Typografi */
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;

  /* Rytm & form */
  --maxw: 1200px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --shadow: 0 18px 50px -22px rgba(0,0,0,.55);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ *
 * 2. Bas / reset                                                      *
 * ------------------------------------------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: clamp(1rem, .55vw + .9rem, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }

/* Fokus – tydligt för tangentbordsnavigering */
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; }

/* Skip-link för tillgänglighet */
.skip-link{
  position:absolute; left:1rem; top:-3.5rem; z-index:200;
  background:var(--red); color:#fff; padding:.7rem 1.1rem; font-weight:700;
  border-radius:var(--radius); transition: top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ------------------------------------------------------------------ *
 * 3. Typografi                                                        *
 * ------------------------------------------------------------------ */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; }
h1 { font-size: clamp(2.6rem, 6.5vw, 5.25rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
p  { color: var(--steel-700); }
strong { color: inherit; font-weight: 700; }

/* Teknisk "kicker"-etikett ovanför rubriker */
.kicker{
  font-family: var(--font-display);
  font-weight: 700; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--red); display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem;
}
.kicker::before{ content:""; width:34px; height:2px; background: var(--red); display:inline-block; }
.kicker--center{ justify-content:center; }

/* ------------------------------------------------------------------ *
 * 4. Layout-hjälpare                                                  *
 * ------------------------------------------------------------------ */
.container{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section{ padding-block: var(--section-y); position: relative; }
/* Lämna plats för den fasta headern när man hoppar/scrollar till en sektion */
section[id], [id].subpage-main{ scroll-margin-top: 84px; }
.section--dark{ background: var(--ink); color: var(--paper); }
.section--dark p{ color: var(--steel-300); }
.section__head{ max-width: 62ch; margin-bottom: clamp(2.5rem,5vw,4rem); }
.section__head--center{ margin-inline:auto; text-align:center; }
.lead{ font-size: clamp(1.05rem,1.4vw,1.25rem); color: var(--steel-700); }
.section--dark .lead{ color: var(--steel-300); }

/* Blueprint-/rutnätstextur (subtil industriell atmosfär) */
.grid-texture{
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ------------------------------------------------------------------ *
 * 5. Knappar                                                          *
 * ------------------------------------------------------------------ */
.btn{
  --bg: var(--red); --fg:#fff;
  display:inline-flex; align-items:center; gap:.7rem;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-display); font-weight: 700; letter-spacing:.02em;
  padding: .95rem 1.6rem; border-radius: var(--radius);
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  position: relative; isolation:isolate;
}
.btn svg{ width:1.1em; height:1.1em; transition: transform .25s var(--ease); }
.btn:hover{ background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(227,0,27,.6); }
.btn:hover svg{ transform: translateX(4px); }
.btn--ghost{ --bg: transparent; --fg: var(--white); border:1.5px solid rgba(255,255,255,.35); }
.btn--ghost:hover{ --bg: rgba(255,255,255,.08); border-color:#fff; box-shadow:none; }
.btn--dark{ --bg: var(--ink); --fg:#fff; }
.btn--dark:hover{ --bg:#000; box-shadow:0 12px 26px -12px rgba(0,0,0,.5); }

/* ------------------------------------------------------------------ *
 * 6. Sidhuvud / navigation                                            *
 * ------------------------------------------------------------------ */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 1rem;
  transition: background .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(12,12,14,.92); backdrop-filter: blur(10px);
  padding-block:.6rem; box-shadow: 0 1px 0 var(--line-dark);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

/* Logotyp – bildlogga (vit/röd variant som fungerar på mörka ytor) */
.brand{ display:inline-flex; align-items:center; flex:0 0 auto; }
.brand__logo{
  width:auto; height:46px; display:block;
  transition: height .3s var(--ease), opacity .2s var(--ease);
}
.site-header:not(.is-scrolled) .brand__logo{ filter: drop-shadow(0 2px 14px rgba(0,0,0,.5)); }
.site-header.is-scrolled .brand__logo{ height:40px; }
.brand:hover .brand__logo{ opacity:.85; }
@media (max-width:520px){ .brand__logo{ height:40px; } }

.nav__links{ display:flex; align-items:center; gap:.4rem; }
.nav__links a{
  font-family:var(--font-display); font-weight:600; font-size:.94rem; color:#fff;
  padding:.5rem .8rem; border-radius:var(--radius); position:relative;
  transition: color .2s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.32rem; height:2px;
  background:var(--red); transform: scaleX(0); transform-origin:left; transition: transform .25s var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after{ transform: scaleX(1); }
.nav__links .btn{ margin-left:.6rem; padding:.6rem 1.15rem; font-size:.9rem; }

/* Hamburgare */
.nav__toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after{
  content:""; display:block; width:26px; height:2.5px; background:#fff; border-radius:2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span{ position:relative; }
.nav__toggle span::before{ position:absolute; top:-8px; }
.nav__toggle span::after{ position:absolute; top:8px; }
.nav__toggle[aria-expanded="true"] span{ background:transparent; }
.nav__toggle[aria-expanded="true"] span::before{ transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px){
  .nav__toggle{ display:flex; z-index:120; }
  .nav__links{
    position: fixed; top:0; right:0; left:auto; height:100svh; width: min(82vw, 360px);
    flex-direction: column; align-items: stretch; justify-content:center; gap:.4rem;
    background: var(--ink); padding: 2rem; transform: translateX(100%);
    transition: transform .35s var(--ease); box-shadow: var(--shadow);
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__links a{ font-size:1.3rem; padding:.8rem 1rem; }
  .nav__links .btn{ margin:.6rem 0 0; justify-content:center; font-size:1.05rem; }
  body.nav-open{ overflow:hidden; }
  .nav__scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); z-index:95; }
  .nav__scrim.is-open{ opacity:1; pointer-events:auto; }
}

/* ------------------------------------------------------------------ *
 * 6b. Sociala ikoner i headern                                        *
 * ------------------------------------------------------------------ */
/* Facebook/Instagram i menyn. På desktop ligger de efter menyn, avskilda
   med en tunn linje. I mobilmenyn (slide-in) centreras de och blir större. */
.nav__social{
  display:flex; align-items:center; gap:.5rem;
  margin-left:.6rem; padding-left:.75rem;
  border-left:1px solid rgba(255,255,255,.16);
}
.nav__social a{
  width:40px; height:40px; padding:0; border-radius:10px;
  display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__social a svg{ width:19px; height:19px; }
.nav__social a::after{ display:none; }
.nav__social a:hover, .nav__social a:focus-visible{
  background:var(--red); border-color:var(--red); color:#fff;
  transform: translateY(-2px); box-shadow:0 10px 20px -8px rgba(227,0,27,.55);
}
@media (max-width:900px){
  .nav__social{
    border-left:0; padding-left:0; margin-left:0; margin-top:1.2rem;
    justify-content:center; gap:1rem;
  }
  .nav__social a{ width:54px; height:54px; border-radius:14px; }
  .nav__social a svg{ width:24px; height:24px; }
}

/* ------------------------------------------------------------------ *
 * 7. Hero                                                             *
 * ------------------------------------------------------------------ */
.hero{
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; padding-bottom: clamp(3rem, 7vw, 6rem); padding-top: 7rem;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit: cover; object-position: center 38%; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.72) 42%, rgba(8,8,10,.34) 100%),
    linear-gradient(0deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,0) 55%);
}
.hero__rule{ position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--red); z-index:-1; }
.hero__content{ position: relative; max-width: 56ch; }
.hero h1{ margin:.4rem 0 1.3rem; }
.hero h1 .accent{ color: var(--red); }
.hero__sub{ font-size: clamp(1.05rem,1.5vw,1.3rem); color: #d9d9df; max-width: 46ch; margin-bottom: 2.2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap: 1rem; }

/* --- Hero-rubrik: kommer fram bokstav för bokstav (endast startsidan) -------
   Tecknen ligger färdigt uppdelade i HTML (<span class="char">) och tonas in
   ett i taget via ren CSS. Endast opacitet animeras → ingen layoutförskjutning;
   texten ligger på EXAKT samma plats, design och färg som förut (röda tecken via
   .char--accent). Inga inline-skript eller inline-stilar används → fungerar med
   sajtens strikta Content-Security-Policy. Animationen avslutas synlig (forwards)
   så rubriken är fullt läsbar även utan JS och vid reducerad rörelse. */
#hero-rubrik .char{
  opacity:0;
  animation: heroCharIn .22s var(--ease) forwards;
}
#hero-rubrik .char--accent{ color: var(--red); }
@keyframes heroCharIn{
  from{ opacity:0; }
  to  { opacity:1; }
}
/* Fördröjning per tecken (~0,05 s mellan tecknen → tydlig "skrivmaskin"). */
#hero-rubrik .char:nth-child(1){ animation-delay:0s; }
#hero-rubrik .char:nth-child(2){ animation-delay:.05s; }
#hero-rubrik .char:nth-child(3){ animation-delay:.1s; }
#hero-rubrik .char:nth-child(4){ animation-delay:.15s; }
#hero-rubrik .char:nth-child(5){ animation-delay:.2s; }
#hero-rubrik .char:nth-child(6){ animation-delay:.25s; }
#hero-rubrik .char:nth-child(7){ animation-delay:.3s; }
#hero-rubrik .char:nth-child(8){ animation-delay:.35s; }
#hero-rubrik .char:nth-child(9){ animation-delay:.4s; }
#hero-rubrik .char:nth-child(10){ animation-delay:.45s; }
#hero-rubrik .char:nth-child(11){ animation-delay:.5s; }
#hero-rubrik .char:nth-child(12){ animation-delay:.55s; }
#hero-rubrik .char:nth-child(13){ animation-delay:.6s; }
#hero-rubrik .char:nth-child(14){ animation-delay:.65s; }
#hero-rubrik .char:nth-child(15){ animation-delay:.7s; }
#hero-rubrik .char:nth-child(16){ animation-delay:.75s; }
#hero-rubrik .char:nth-child(17){ animation-delay:.8s; }
#hero-rubrik .char:nth-child(18){ animation-delay:.85s; }
#hero-rubrik .char:nth-child(19){ animation-delay:.9s; }
#hero-rubrik .char:nth-child(20){ animation-delay:.95s; }
#hero-rubrik .char:nth-child(21){ animation-delay:1s; }
#hero-rubrik .char:nth-child(22){ animation-delay:1.05s; }
#hero-rubrik .char:nth-child(23){ animation-delay:1.1s; }
#hero-rubrik .char:nth-child(24){ animation-delay:1.15s; }
#hero-rubrik .char:nth-child(25){ animation-delay:1.2s; }
#hero-rubrik .char:nth-child(26){ animation-delay:1.25s; }
#hero-rubrik .char:nth-child(27){ animation-delay:1.3s; }
#hero-rubrik .char:nth-child(28){ animation-delay:1.35s; }
#hero-rubrik .char:nth-child(29){ animation-delay:1.4s; }
#hero-rubrik .char:nth-child(30){ animation-delay:1.45s; }
#hero-rubrik .char:nth-child(31){ animation-delay:1.5s; }
#hero-rubrik .char:nth-child(32){ animation-delay:1.55s; }
#hero-rubrik .char:nth-child(33){ animation-delay:1.6s; }
#hero-rubrik .char:nth-child(34){ animation-delay:1.65s; }
#hero-rubrik .char:nth-child(35){ animation-delay:1.7s; }
#hero-rubrik .char:nth-child(36){ animation-delay:1.75s; }
/* Reducerad rörelse: visa hela rubriken direkt, utan teckenanimation. */
@media (prefers-reduced-motion: reduce){
  #hero-rubrik .char{ opacity:1; animation:none; }
}

/* Scroll-indikator – vertikal etikett med röd linje som rör sig nedåt */
.scroll-hint{
  position:absolute; right:var(--gut); bottom:2rem; display:flex; align-items:center; gap:1.1rem;
  font-size:1.1rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:#e9e9ee;
  writing-mode:vertical-rl;
}
.scroll-hint::after{
  content:""; width:4px; height:110px; border-radius:2px;
  background:linear-gradient(var(--red),transparent);
  animation: drop 2s var(--ease) infinite;
}
@keyframes drop{ 0%{transform:scaleY(0);transform-origin:top;} 45%{transform:scaleY(1);transform-origin:top;} 55%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }
/* Scroll-indikatorn ska fortsätta pulsera även med reducerad rörelse */
@media (prefers-reduced-motion: reduce){
  .scroll-hint::after{ animation: drop 2s var(--ease) infinite !important; }
}
@media (max-width:640px){ .scroll-hint{ display:none; } }

/* ------------------------------------------------------------------ *
 * 8. Om oss                                                           *
 * ------------------------------------------------------------------ */
.about{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.about__media{ position:relative; }
.about__media img{ border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/5; object-fit: cover; }
.about__badge{
  position:absolute; left:-1.2rem; bottom:-1.2rem; background:var(--red); color:#fff;
  padding:1.1rem 1.4rem; border-radius:var(--radius); box-shadow: var(--shadow); max-width: 220px;
}
.about__badge b{ font-family:var(--font-display); font-size:2.4rem; font-weight:900; display:block; line-height:1; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.about__badge span{ font-size:.82rem; letter-spacing:.03em; }
.values{ display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; margin-top:2rem; }
.value{ border-left:3px solid var(--red); padding:.2rem 0 .2rem 1rem; }
.value h3{ font-size:1.02rem; margin-bottom:.15rem; }
.value p{ font-size:.92rem; }
@media (max-width:820px){
  .about{ grid-template-columns:1fr; }
  .about__media{ order:-1; max-width:440px; }
  .values{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){ .values{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ *
 * 9. Tjänster                                                         *
 * ------------------------------------------------------------------ */
/* Tjänsterutnät – moderna kort utan numrering. Rutnätet fyller sig självt
   (auto-fill) så antalet kolumner följer skärmbredden utan extra brytpunkter.
   min(100%,240px) hindrar överflöd på riktigt smala skärmar. */
.service-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(.65rem, 1.2vw, .9rem);
}
.service-card{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:.85rem;
  padding:1.05rem 1.2rem;
  background: rgba(255,255,255,.035);
  border:1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
/* Röd accentlinje som växer fram vid hover */
.service-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--red);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.service-card:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-3px);
}
.service-card:hover::before{ transform: scaleY(1); }
.service-card__icon{ flex:0 0 auto; width:18px; height:18px; color:var(--red); }
.service-card__icon svg{ width:100%; height:100%; display:block; transition: transform .25s var(--ease); }
.service-card:hover .service-card__icon svg{ transform: translateX(3px); }
.service-card__name{
  font-family:var(--font-display); font-weight:700;
  font-size: clamp(1rem, 1.2vw, 1.12rem); line-height:1.2;
  color:#fff; letter-spacing:-.01em;
}
/* "Med mera" är ingen tjänst i sig – håll den tydligt sekundär */
.service-card--more{ background:transparent; border-style:dashed; }
.service-card--more::before{ display:none; }
.service-card--more .service-card__icon{ color:var(--steel-500); }
.service-card--more .service-card__name{ color:var(--steel-300); font-weight:600; }
.service-card--more:hover{ transform:none; background:rgba(255,255,255,.03); }
.service-card--more:hover .service-card__icon svg{ transform:none; }
@media (max-width:420px){ .service-card{ padding:.95rem 1rem; } }

/* ------------------------------------------------------------------ *
 * 10. Branscher                                                       *
 * ------------------------------------------------------------------ */
.industries{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; }
.industry{
  display:flex; gap:1.1rem; align-items:flex-start; padding:1.6rem; border:1px solid var(--line-light);
  border-radius:var(--radius); background:#fff; transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.industry:hover{ box-shadow: var(--shadow); transform: translateY(-4px); }
.industry__icon{ flex:0 0 auto; width:44px; height:44px; color:var(--red); }
.industry h3{ font-size:1.1rem; margin-bottom:.3rem; }
.industry p{ font-size:.9rem; }

/* ------------------------------------------------------------------ *
 * 11. Bildgalleri + lightbox                                          *
 * ------------------------------------------------------------------ */
/* Enhetligt, skalbart rutnät – fungerar för valfritt antal bilder (egen galleri-sida) */
.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 26vw, 300px), 1fr));
  gap: clamp(.6rem,1.4vw,1rem);
}
.gallery__item{
  position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer; background:var(--ink-3);
  border:0; padding:0; display:block; width:100%; aspect-ratio: 4/3;
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s var(--ease), filter .45s var(--ease);
  /* Bilderna "landar" lite mörkare och avmättade; vid hover/fokus återställs
     full färg samtidigt som de förstoras och det röda zoom-tecknet visas. */
  filter: brightness(.66) saturate(.82);
}
.gallery__item:hover img,
.gallery__item:focus-visible img{ transform: scale(1.06); filter: brightness(1) saturate(1); }
/* På pekskärmar finns ingen hover – håll dämpningen mildare där (tap öppnar
   ändå bilden i full färg i lightboxen). */
@media (hover:none){
  .gallery__item img{ filter: brightness(.82) saturate(.92); }
}
.gallery__item figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.1rem 1.2rem;
  background: linear-gradient(0deg, rgba(8,8,10,.9), transparent);
  color:#fff; font-weight:600; font-size:.92rem; text-align:left;
  transform: translateY(8px); opacity:.92; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.gallery__item:hover figcaption,
.gallery__item:focus-visible figcaption{ transform: translateY(0); opacity:1; }
.gallery__zoom{
  position:absolute; top:.9rem; right:.9rem; width:38px; height:38px; border-radius:50%;
  background: rgba(227,0,27,.92); color:#fff; display:grid; place-items:center;
  opacity:0; transform: scale(.8); transition: all .3s var(--ease);
}
.gallery__item:hover .gallery__zoom,
.gallery__item:focus-visible .gallery__zoom{ opacity:1; transform: scale(1); }
@media (max-width:560px){
  .gallery{ grid-template-columns: 1fr 1fr; }
  .gallery__item{ aspect-ratio: 1/1; }
}

/* Galleri-sidan: rubrik-/CTA-block */
.gallery-section .section__head{ margin-inline:auto; text-align:center; }
.gallery-cta{
  margin-top: clamp(2.5rem,5vw,3.5rem); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.gallery-cta p{ font-size:1.05rem; }

.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background: rgba(6,6,8,.94); padding: clamp(1rem,4vw,3rem); opacity:0; visibility:hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__fig{ max-width: 1000px; width:100%; text-align:center; }
.lightbox__fig img{ width:100%; max-height: 78vh; object-fit:contain; border-radius:var(--radius); }
.lightbox__cap{ color:#fff; margin-top:1rem; font-size:.98rem; }
.lightbox__close, .lightbox__nav{
  position:absolute; background:rgba(255,255,255,.1); color:#fff; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; transition: background .2s var(--ease); font-size:1.4rem;
}
.lightbox__close:hover, .lightbox__nav:hover{ background: var(--red); }
.lightbox__close{ top:1.2rem; right:1.2rem; }
.lightbox__nav{ top:50%; transform: translateY(-50%); }
.lightbox__nav--prev{ left:1.2rem; }
.lightbox__nav--next{ right:1.2rem; }
@media (max-width:640px){ .lightbox__nav{ width:44px; height:44px; } }

/* ------------------------------------------------------------------ *
 * 12. Kunder / partners                                               *
 * ------------------------------------------------------------------ */
.clients__intro{ max-width:60ch; }

/* Logotyp-marquee – oändlig, mjuk loop inom innehållsbredden (.container) */
.marquee{
  margin-top:2.6rem; overflow:hidden; width:100%;
  /* tonar ut logotyperna mjukt vid kanterna istället för hård kapning */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track{
  display:flex; width:max-content; will-change:transform;
  animation: marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; }
.client-logo{
  flex:0 0 auto; width:188px; height:96px; margin-right:1.1rem;
  display:grid; place-items:center; padding:1rem 1.4rem;
  background:#fff; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.7);
}
.client-logo img{
  max-width:140px; max-height:54px; width:auto; height:auto; object-fit:contain;
}
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (max-width:560px){
  .client-logo{ width:150px; height:80px; margin-right:.8rem; padding:.8rem 1.1rem; }
  .client-logo img{ max-width:112px; max-height:44px; }
}
/* Logotyp-rullningen är en medveten varumärkesdetalj och ska rulla för alla
   besökare – håll den igång även när systemet ber om mindre rörelse. */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: marquee-scroll 38s linear infinite !important; }
}

/* ------------------------------------------------------------------ *
 * 13. Kontakt                                                         *
 * ------------------------------------------------------------------ */
.contact{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
.contact__info .info-item{ display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line-light); }
.contact__info .info-item:first-of-type{ border-top:1px solid var(--line-light); }
.info-item__icon{ flex:0 0 auto; width:40px; height:40px; color:var(--red); }
.info-item .label{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-500); }
.info-item .value{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); }
.info-item a.value:hover{ color:var(--red); }

.form{ background:#fff; border:1px solid var(--line-light); border-radius:var(--radius); padding: clamp(1.5rem,3vw,2.4rem); box-shadow: var(--shadow); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:.4rem; font-family:var(--font-display); }
.field label .req{ color:var(--red); }
.field input, .field textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line-light); border-radius:var(--radius);
  font: inherit; background:var(--paper); color:var(--ink); transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field textarea:focus{ border-color:var(--red); background:#fff; outline:none; }
.field input:user-invalid, .field textarea:user-invalid{ border-color:#d12; }
.field .error{ display:none; color:#c00; font-size:.8rem; margin-top:.35rem; font-weight:600; }
.field.has-error input, .field.has-error textarea{ border-color:#c00; }
.field.has-error .error{ display:block; }
.form__consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; color:var(--steel-700); margin-bottom:1.2rem; }
.form__consent input{ margin-top:.25rem; }
.form__consent a{ text-decoration:underline; font-weight:600; }
.form__consent.has-error{ color:#c00; }
/* Honeypot mot skräppost – osynligt för människor, robotar fyller i det */
.hp-field{ position:absolute; left:-9999px; }
/* Reservlänken i formulärstatus (öppna e-postklient) */
.form__status a{ color:#a11; text-decoration:underline; font-weight:700; }
.form button[type=submit]{ width:100%; justify-content:center; }
.form__status{ margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--radius); font-weight:600; font-size:.92rem; display:none; }
.form__status.ok{ display:block; background:#e7f6ec; color:#176a36; border:1px solid #9ed8b3; }
.form__status.err{ display:block; background:#fdeaea; color:#a11; border:1px solid #f0b4b4; }
@media (max-width:820px){ .contact{ grid-template-columns:1fr; } }
@media (max-width:520px){ .form__row{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ *
 * 14. Sidfot                                                          *
 * ------------------------------------------------------------------ */
.footer{ background:#000; color:#cfcfd6; padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer__top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line-dark); }
.footer .brand{ margin-bottom:1.1rem; }
.footer .brand__logo{ height:48px; }
.footer p{ color:#9a9aa3; font-size:.92rem; max-width:38ch; }
.footer__heading{ color:#fff; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; }
.footer__links a{ display:block; padding:.3rem 0; color:#bdbdc5; font-size:.95rem; transition:color .2s var(--ease); }
.footer__links a:hover{ color:var(--red); }
.footer__note{ display:block; padding:.3rem 0; color:#bdbdc5; font-size:.95rem; }

/* Sociala medier – kort etikett + något större ikonknappar */
.footer__social-label{
  margin-top:1.4rem; margin-bottom:.55rem;
  font-family:var(--font-display); font-weight:700;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:#bdbdc5;
}
.footer__social{ display:flex; gap:.8rem; margin-top:0; }
.social{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line-dark); color:#d4d4db;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.social svg{ width:24px; height:24px; }
.social:hover{
  background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px);
  box-shadow:0 12px 24px -10px rgba(227,0,27,.6);
}

.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.4rem 1.4rem; padding-top:1.8rem; font-size:.82rem; color:#7a7a83; }
.footer__eco{ color:#93b6a1; }
@media (max-width:760px){ .footer__top{ grid-template-columns:1fr 1fr; } .footer .footer__brand{ grid-column:1/-1; } }
@media (max-width:460px){ .footer__top{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ *
 * 15. Scroll-reveal (progressiv förbättring)                          *
 * ------------------------------------------------------------------ */
[data-reveal]{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }

/* Tillbaka-till-toppen */
.to-top{
  position:fixed; right:1.3rem; bottom:1.3rem; z-index:90; width:48px; height:48px; border-radius:50%;
  background:var(--red); color:#fff; display:grid; place-items:center; box-shadow: var(--shadow);
  opacity:0; transform: translateY(12px) scale(.9); pointer-events:none; transition: all .3s var(--ease);
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--red-deep); }

/* ------------------------------------------------------------------ *
 * 16. Undersidor (integritetspolicy, 404)                             *
 * ------------------------------------------------------------------ */
.site-header--solid{ background: var(--ink); box-shadow: 0 1px 0 var(--line-dark); }
.subpage-main{ padding-top: clamp(7rem, 12vw, 9rem); min-height: 70svh; }
.prose{ max-width: 70ch; }
.prose h1{ font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.2rem; }
.prose h2{ font-size: clamp(1.25rem, 2vw, 1.55rem); margin: 2.2rem 0 .6rem; }
.prose p{ margin-bottom: 1rem; }
.prose ul{ list-style: disc; padding-left: 1.3rem; margin-bottom: 1rem; color: var(--steel-700); }
.prose li{ margin-bottom: .35rem; }
.prose a{ color: var(--red); text-decoration: underline; font-weight: 600; }
.prose .meta{ font-size: .85rem; color: var(--steel-500); }
.error-page{ text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.error-page .code{ font-family: var(--font-display); font-weight: 900; font-size: clamp(5rem, 14vw, 9rem); line-height: 1; color: var(--ink); }
.error-page .code .accent{ color: var(--red); }
.error-page p{ max-width: 46ch; margin: 1rem auto 2rem; }