/* =========================================================
   SCANDINAVIAN WEB SOLUTIONS — 2026 redesign
   Behåller identiteten: mörk bas, röd accent, hamburger, footer.
   Modernare typografi, mer luft, färre ord, fler grafiska brott.
   ========================================================= */

@import url('https://fonts.cdnfonts.com/css/broadsheet-ldo');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
      --bg: #0e0f12;
      --bg-2: #16181d;
      --surface: #1d2026;
      --surface-2: #24262b;
      --line: rgba(255, 255, 255, 0.08);
      --line-strong: rgba(255, 255, 255, 0.18);
      --ink: #f5f4f2;
      --ink-mute: #a4a7ad;
      --ink-low: #6b6e76;
      --accent: #a81b2a;
      --accent-2: #d63146;
      --accent-glow: rgba(214, 49, 70, 0.35);
      --light: #f5f4f2;
      --light-2: #ecebe7;

      --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
      --font-body: 'Inter', 'Poppins', system-ui, sans-serif;
      --font-serif: 'Broadsheet LDO', Georgia, serif;

      --radius: 18px;
      --radius-sm: 10px;
      --maxw: 1440px;
      --pad: clamp(20px, 4vw, 60px);

      --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}

html {
      scroll-behavior: smooth;
}

body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--ink);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      animation: bodyFade 0.9s var(--easing);
}

@keyframes bodyFade {
      from { opacity: 0; }
      to { opacity: 1; }
}

img, video, iframe { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

::selection {
      background: var(--accent);
      color: var(--ink);
}

/* =========================================================
   NAV — samma struktur, modernare utseende
   ========================================================= */

#nav {
      width: 100%;
      height: 84px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      color: var(--ink);
      transition: background 0.5s var(--easing), height 0.5s var(--easing), border-color 0.5s var(--easing);
      border-bottom: 1px solid transparent;
      mix-blend-mode: normal;
}

#nav.scrolled {
      background: rgba(14, 15, 18, 0.78);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      height: 68px;
      border-bottom-color: var(--line);
}

#navlogo {
      position: absolute;
      top: 50%;
      left: clamp(20px, 3vw, 40px);
      transform: translateY(-50%);
      width: 220px;
      transition: width 0.4s var(--easing);
      z-index: 1001;
}

#navlogo img {
      width: 100%;
      height: auto;
}

#nav.scrolled #navlogo {
      width: 150px;
}

.nav-links {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: clamp(20px, 4vw, 60px);
      gap: 8px;
}

.nav-links .dropdown {
      position: relative;
}

.dropbtn,
.dropbtn a {
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 10px 16px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      position: relative;
      transition: color 0.3s var(--easing);
}

.dropbtn::before {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 6px;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.4s var(--easing);
}

.dropdown:hover .dropbtn,
.dropdown:hover .dropbtn a {
      color: var(--ink);
}

.dropdown:hover .dropbtn::before {
      transform: scaleX(1);
}

#lines {
      display: none;
}

/* Hamburger — dyker bara upp under viss bredd, samma toggle-grej som innan */
.hamburger {
      display: none;
      position: absolute;
      top: 50%;
      right: clamp(20px, 4vw, 40px);
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      z-index: 1100;
}

.line1, .line2, .line3 {
      width: 28px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: all 0.5s var(--easing);
}

/* =========================================================
   HEADER / HERO — fullskärmsfilm + bold text
   ========================================================= */

#header {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 640px;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      color: var(--ink);
      background: #000;
}

#headermovie {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      filter: brightness(0.55) saturate(1.05) contrast(1.05);
}

#header::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
            radial-gradient(120% 80% at 30% 30%, rgba(168, 27, 42, 0.22), transparent 60%),
            linear-gradient(180deg, rgba(14, 15, 18, 0.55) 0%, rgba(14, 15, 18, 0) 30%, rgba(14, 15, 18, 0) 50%, rgba(14, 15, 18, 0.85) 100%);
      z-index: 1;
}

.hero-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 var(--pad) clamp(60px, 9vh, 120px);
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
}

.hero-meta {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--ink-mute);
}

.hero-meta::before {
      content: "";
      width: 36px;
      height: 1px;
      background: var(--accent);
}

.hero-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(44px, 8.4vw, 130px);
      line-height: 0.96;
      letter-spacing: -0.03em;
      color: var(--ink);
      max-width: 18ch;
}

.hero-title em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      color: var(--accent-2);
}

.hero-sub {
      font-size: clamp(15px, 1.3vw, 19px);
      max-width: 52ch;
      color: var(--ink-mute);
      font-weight: 300;
}

.hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 8px;
}

.hero-scroll {
      position: absolute;
      right: var(--pad);
      bottom: 36px;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--ink-mute);
      display: flex;
      align-items: center;
      gap: 14px;
}

.hero-scroll::after {
      content: "";
      display: block;
      width: 1px;
      height: 60px;
      background: linear-gradient(180deg, transparent, var(--ink-mute));
      animation: scrollLine 2.4s ease-in-out infinite;
}

@keyframes scrollLine {
      0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 0.4; }
      50% { transform: scaleY(0.4); opacity: 1; }
}

/* Fallback header för undersidor (utan video) */
.subheader {
      position: relative;
      min-height: 56vh;
      padding: 160px var(--pad) 80px;
      background: radial-gradient(130% 90% at 70% 0%, rgba(168, 27, 42, 0.14), transparent 60%), var(--bg);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
}

.subheader-inner {
      position: relative;
      max-width: var(--maxw);
      margin: 0 auto;
      z-index: 2;
}

.subheader::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
            linear-gradient(var(--line) 1px, transparent 1px),
            linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(80% 60% at 50% 60%, #000, transparent 100%);
      -webkit-mask-image: radial-gradient(80% 60% at 50% 60%, #000, transparent 100%);
      opacity: 0.6;
      z-index: 1;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary,
.btn-ghost {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 18px 28px;
      font-family: var(--font-display);
      font-size: 13px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 500;
      border-radius: 100px;
      transition: transform 0.4s var(--easing), background 0.4s var(--easing), color 0.4s var(--easing), box-shadow 0.4s var(--easing);
      will-change: transform;
}

.btn-primary {
      background: var(--accent);
      color: var(--ink);
      box-shadow: 0 18px 40px -16px var(--accent-glow);
}

.btn-primary:hover {
      background: var(--accent-2);
      transform: translateY(-2px);
      box-shadow: 0 22px 50px -16px var(--accent-glow);
}

.btn-ghost {
      background: transparent;
      color: var(--ink);
      border: 1px solid var(--line-strong);
}

.btn-ghost:hover {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink);
}

.btn-primary .arrow,
.btn-ghost .arrow {
      display: inline-block;
      transition: transform 0.4s var(--easing);
}

.btn-primary:hover .arrow,
.btn-ghost:hover .arrow {
      transform: translateX(4px);
}

/* Bibehållen, men putsad gammal knapp (sub-pages som contact pekar mot) */
#contactBtn,
#conBtn {
      font-family: var(--font-display);
      padding: 16px 28px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.4);
      color: var(--ink);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      border-radius: 100px;
      cursor: pointer;
      margin-top: 28px;
      transition: all 0.4s var(--easing);
}

#contactBtn:hover,
#conBtn:hover {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink);
}

#conBtn {
      border-color: rgba(0, 0, 0, 0.25);
      color: #111;
}

#conBtn:hover {
      background: #111;
      color: var(--ink);
      border-color: #111;
}

/* =========================================================
   MARQUEE
   ========================================================= */

.marquee {
      position: relative;
      width: 100%;
      padding: 24px 0;
      background: var(--bg);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
      display: flex;
      gap: 60px;
      width: max-content;
      animation: marquee 38s linear infinite;
}

.marquee-track span {
      display: inline-flex;
      align-items: center;
      gap: 60px;
      font-family: var(--font-display);
      font-size: clamp(22px, 3.5vw, 44px);
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--ink);
      text-transform: uppercase;
      white-space: nowrap;
}

.marquee-track span em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.marquee-track .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
}

@keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
}

/* =========================================================
   SECTION HEADERS / KICKERS
   ========================================================= */

.section {
      position: relative;
      padding: clamp(80px, 12vh, 160px) var(--pad);
      max-width: var(--maxw);
      margin: 0 auto;
}

.section--full {
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
}

.section-head {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: clamp(40px, 6vh, 80px);
}

.kicker {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--ink-mute);
}

.kicker::before {
      content: "";
      width: 30px;
      height: 1px;
      background: var(--accent);
}

.section-head h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(34px, 5vw, 76px);
      line-height: 1;
      letter-spacing: -0.03em;
      max-width: 22ch;
}

.section-head h2 em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.section-head p {
      max-width: 60ch;
      color: var(--ink-mute);
      font-size: 16px;
      margin-top: 4px;
}

/* =========================================================
   STATEMENT / MANIFESTO
   ========================================================= */

.statement {
      position: relative;
      padding: clamp(120px, 18vh, 220px) var(--pad);
      max-width: var(--maxw);
      margin: 0 auto;
}

.statement h2 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(30px, 4.6vw, 72px);
      line-height: 1.05;
      letter-spacing: -0.025em;
      max-width: 22ch;
      color: var(--ink);
}

.statement h2 em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.statement .kicker {
      margin-bottom: 28px;
}

/* =========================================================
   CAPABILITIES LIST
   ========================================================= */

.cap-list {
      border-top: 1px solid var(--line);
}

.cap-row {
      position: relative;
      display: grid;
      grid-template-columns: 80px 1.4fr 2fr auto;
      align-items: center;
      gap: 24px;
      padding: 32px 0;
      border-bottom: 1px solid var(--line);
      transition: padding 0.4s var(--easing);
      cursor: default;
}

.cap-row:hover {
      padding-left: 24px;
}

.cap-row::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--accent), transparent);
      opacity: 0;
      transition: opacity 0.4s var(--easing);
      pointer-events: none;
      mix-blend-mode: screen;
}

.cap-row:hover::before {
      opacity: 0.18;
}

.cap-num {
      font-family: var(--font-display);
      font-size: 14px;
      letter-spacing: 0.22em;
      color: var(--ink-low);
}

.cap-name {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.6vw, 38px);
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--ink);
}

.cap-name em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.cap-desc {
      color: var(--ink-mute);
      font-size: 15px;
      max-width: 48ch;
}

.cap-arrow {
      font-family: var(--font-display);
      font-size: 22px;
      color: var(--ink-mute);
      transition: transform 0.4s var(--easing), color 0.4s var(--easing);
}

.cap-row:hover .cap-arrow {
      color: var(--accent-2);
      transform: translateX(8px) rotate(-45deg);
}

/* =========================================================
   PROJECTS — BENTO GRID
   ========================================================= */

.work {
      padding: clamp(80px, 12vh, 160px) var(--pad);
      max-width: var(--maxw);
      margin: 0 auto;
}

.work-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: clamp(220px, 30vh, 320px);
      gap: 18px;
}

.project-card {
      position: relative;
      grid-column: span 3;
      grid-row: span 2;
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--line);
      isolation: isolate;
      transition: transform 0.6s var(--easing), border-color 0.4s var(--easing);
      will-change: transform;
}

.project-card:hover {
      transform: translateY(-6px);
      border-color: var(--line-strong);
}

/* Layouts: större hero-card + kompletterande mindre */
.project-card.size-lg { grid-column: span 4; grid-row: span 2; }
.project-card.size-md { grid-column: span 2; grid-row: span 2; }
.project-card.size-sm { grid-column: span 3; grid-row: span 1; }
.project-card.size-tall { grid-column: span 2; grid-row: span 3; }

.pc-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
}

/* Färgade placeholder-bakgrunder per projekt */
.pc-bg--studieplaneraren {
      background:
            radial-gradient(120% 100% at 30% 20%, rgba(214, 49, 70, 0.45), transparent 55%),
            radial-gradient(80% 80% at 80% 80%, rgba(64, 110, 230, 0.25), transparent 60%),
            linear-gradient(135deg, #14161b, #1f232b);
}

.pc-bg--nasaker {
      background:
            radial-gradient(100% 80% at 20% 30%, rgba(120, 200, 140, 0.3), transparent 60%),
            radial-gradient(80% 80% at 90% 90%, rgba(20, 40, 50, 0.6), transparent 60%),
            linear-gradient(135deg, #0f2118, #1c2c2a);
}

.pc-bg--leasamuel {
      background:
            radial-gradient(120% 100% at 70% 30%, rgba(255, 195, 195, 0.35), transparent 55%),
            radial-gradient(80% 80% at 20% 90%, rgba(168, 27, 42, 0.4), transparent 60%),
            linear-gradient(135deg, #221318, #3a1c25);
}

.pc-bg--levandealvdal {
      background:
            radial-gradient(120% 100% at 50% 0%, rgba(120, 180, 220, 0.35), transparent 55%),
            radial-gradient(80% 80% at 30% 100%, rgba(70, 100, 90, 0.3), transparent 60%),
            linear-gradient(135deg, #11181f, #1b2a32);
}

.pc-bg--nasakerinfo {
      background:
            radial-gradient(120% 100% at 80% 30%, rgba(168, 27, 42, 0.32), transparent 55%),
            radial-gradient(80% 80% at 20% 90%, rgba(214, 49, 70, 0.25), transparent 60%),
            linear-gradient(135deg, #14161b, #221317);
}

.pc-bg::after {
      /* subtle grid overlay */
      content: "";
      position: absolute;
      inset: 0;
      background-image:
            linear-gradient(var(--line) 1px, transparent 1px),
            linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 60px 60px;
      opacity: 0.4;
      mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent);
      -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent);
}

.pc-iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      pointer-events: none;
      opacity: 0;
      transform: scale(1.05);
      transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
      filter: saturate(0.9);
}

.pc-iframe.is-loaded {
      opacity: 0.7;
}

.project-card:hover .pc-iframe.is-loaded {
      opacity: 0.9;
      transform: scale(1.0);
}

.pc-overlay {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      padding: clamp(22px, 2.4vw, 36px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
      color: var(--ink);
      background: linear-gradient(180deg, rgba(14, 15, 18, 0) 0%, rgba(14, 15, 18, 0) 40%, rgba(14, 15, 18, 0.65) 100%);
}

.pc-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--ink-mute);
}

.pc-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border: 1px solid var(--line-strong);
      border-radius: 100px;
      background: rgba(14, 15, 18, 0.4);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
}

.pc-year {
      opacity: 0.7;
}

.pc-bottom {
      display: flex;
      flex-direction: column;
      gap: 16px;
}

.pc-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 3.2vw, 56px);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.02;
      color: var(--ink);
}

.pc-title em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.pc-desc {
      max-width: 44ch;
      color: var(--ink-mute);
      font-size: 14px;
      line-height: 1.5;
}

.pc-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      align-self: flex-start;
      padding: 10px 18px;
      font-family: var(--font-display);
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      border: 1px solid var(--line-strong);
      border-radius: 100px;
      background: rgba(14, 15, 18, 0.4);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.3s var(--easing), color 0.3s var(--easing), border-color 0.3s var(--easing);
}

.project-card:hover .pc-link {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink);
}

/* =========================================================
   PROJECT — Sticky Showcase (på projects.html)
   ========================================================= */

.showcase {
      position: relative;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 var(--pad);
}

.case {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: clamp(40px, 6vw, 100px);
      align-items: start;
      padding: clamp(80px, 14vh, 160px) 0;
      border-top: 1px solid var(--line);
}

.case:first-child { border-top: 0; }

.case-text {
      position: sticky;
      top: 110px;
      align-self: start;
      display: flex;
      flex-direction: column;
      gap: 24px;
}

.case-num {
      font-family: var(--font-display);
      font-size: 12px;
      letter-spacing: 0.32em;
      color: var(--accent-2);
      text-transform: uppercase;
}

.case-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(38px, 5vw, 80px);
      line-height: 0.98;
      letter-spacing: -0.03em;
}

.case-title em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.case-desc {
      color: var(--ink-mute);
      max-width: 50ch;
}

.case-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 24px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
}

.case-meta div {
      display: flex;
      flex-direction: column;
      gap: 4px;
}

.case-meta strong {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-low);
      font-weight: 500;
}

.case-meta span {
      color: var(--ink);
      font-size: 14px;
}

.case-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      align-self: flex-start;
      padding: 14px 22px;
      font-family: var(--font-display);
      font-size: 12px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      border: 1px solid var(--line-strong);
      border-radius: 100px;
      transition: all 0.4s var(--easing);
      width: fit-content;
}

.case-cta:hover {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink);
}

.case-visual {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--line);
      aspect-ratio: 4 / 3;
}

.case-visual .pc-bg { position: absolute; inset: 0; }

.case-visual .pc-iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
}

.case-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 1px var(--line);
      border-radius: var(--radius);
}

/* =========================================================
   STATS BAND
   ========================================================= */

.stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
}

.stat {
      padding: clamp(40px, 6vh, 80px) clamp(20px, 3vw, 40px);
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 10px;
}

.stat:last-child { border-right: 0; }

.stat strong {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(36px, 5vw, 72px);
      line-height: 1;
      letter-spacing: -0.03em;
      color: var(--ink);
}

.stat strong em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.stat span {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--ink-mute);
}

/* =========================================================
   IT-KONSULT BANNER
   ========================================================= */

.banner {
      position: relative;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: clamp(80px, 12vh, 160px) var(--pad);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 100px);
      align-items: center;
}

.banner-text {
      display: flex;
      flex-direction: column;
      gap: 22px;
}

.banner-text h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(32px, 4.6vw, 64px);
      line-height: 1.04;
      letter-spacing: -0.025em;
      max-width: 18ch;
}

.banner-text h2 em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.banner-text p {
      color: var(--ink-mute);
      max-width: 48ch;
}

.banner-text .btn-ghost { margin-top: 8px; align-self: flex-start; }

.banner-visual {
      position: relative;
      aspect-ratio: 4 / 3;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--line);
      background:
            radial-gradient(120% 100% at 30% 20%, rgba(214, 49, 70, 0.32), transparent 55%),
            linear-gradient(135deg, #15171c, #221317);
}

.banner-visual .label {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      font-family: var(--font-display);
      text-align: center;
      padding: 32px;
}

.banner-visual .label small {
      font-size: 11px;
      letter-spacing: 0.32em;
      color: var(--ink-mute);
      text-transform: uppercase;
}

.banner-visual .label big {
      font-size: clamp(32px, 4.6vw, 56px);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1;
}

.banner-visual .label big em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

/* =========================================================
   FINAL CTA
   ========================================================= */

.cta-final {
      position: relative;
      padding: clamp(120px, 20vh, 240px) var(--pad);
      text-align: center;
      max-width: var(--maxw);
      margin: 0 auto;
      overflow: hidden;
}

.cta-final::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
            radial-gradient(60% 60% at 50% 50%, rgba(214, 49, 70, 0.18), transparent 70%);
      pointer-events: none;
}

.cta-final h2 {
      position: relative;
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(48px, 9vw, 140px);
      line-height: 0.95;
      letter-spacing: -0.04em;
      margin-bottom: 24px;
}

.cta-final h2 em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.cta-final p {
      position: relative;
      color: var(--ink-mute);
      max-width: 50ch;
      margin: 0 auto 32px;
}

.cta-final .actions {
      position: relative;
      display: inline-flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: clamp(40px, 6vw, 100px);
      align-items: start;
}

.about-portrait {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--line);
      aspect-ratio: 4 / 5;
      background: var(--surface);
}

.about-portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.95) contrast(1.05);
}

.about-portrait::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(14, 15, 18, 0.5) 100%);
}

.about-portrait .signature {
      position: absolute;
      left: 28px;
      bottom: 24px;
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--ink);
      font-size: 22px;
      z-index: 2;
}

.about-text {
      display: flex;
      flex-direction: column;
      gap: 22px;
}

.about-text h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(32px, 4.6vw, 64px);
      letter-spacing: -0.025em;
      line-height: 1.02;
}

.about-text h2 em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.about-text p {
      color: var(--ink-mute);
      max-width: 56ch;
}

.values {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 20px;
}

.value {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--surface);
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.value strong {
      font-family: var(--font-display);
      font-weight: 500;
      letter-spacing: -0.01em;
      font-size: 18px;
      color: var(--ink);
}

.value span {
      color: var(--ink-mute);
      font-size: 13px;
      line-height: 1.5;
}

/* =========================================================
   SERVICES PAGE
   ========================================================= */

.services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
}

.service {
      position: relative;
      padding: clamp(28px, 3vw, 44px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, var(--surface), var(--bg-2));
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-height: 320px;
      overflow: hidden;
      transition: border-color 0.4s var(--easing), transform 0.4s var(--easing);
}

.service:hover {
      border-color: var(--line-strong);
      transform: translateY(-4px);
}

.service .num {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.32em;
      color: var(--accent-2);
      text-transform: uppercase;
}

.service h3 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(24px, 2.6vw, 38px);
      letter-spacing: -0.02em;
      line-height: 1.05;
}

.service h3 em {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--accent-2);
      font-weight: 400;
}

.service p {
      color: var(--ink-mute);
      max-width: 50ch;
      flex-grow: 1;
}

.service ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
}

.service ul li {
      padding: 6px 12px;
      border: 1px solid var(--line);
      border-radius: 100px;
      font-size: 12px;
      letter-spacing: 0.06em;
      color: var(--ink-mute);
      font-family: var(--font-display);
}

.process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
}

.step {
      padding: clamp(28px, 4vh, 44px) clamp(20px, 2vw, 32px);
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 10px;
}

.step:last-child { border-right: 0; }

.step .num {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.28em;
      color: var(--accent-2);
      text-transform: uppercase;
}

.step h4 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.01em;
}

.step p {
      color: var(--ink-mute);
      font-size: 13px;
}

/* =========================================================
   FOOTER — bevarar struktur, putsar utseende
   ========================================================= */

footer {
      background: var(--surface-2);
      padding: 80px var(--pad) 60px;
      border-top: 1px solid var(--line);
}

footer .container {
      max-width: var(--maxw);
      margin: 0 auto;
}

footer .row {
      display: grid;
      grid-template-columns: 1.4fr repeat(3, 1fr);
      gap: 32px;
      padding-bottom: 50px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 24px;
}

.footer-col {
      width: auto;
      padding: 0;
}

.footer-col h4 {
      font-family: var(--font-display);
      color: var(--ink);
      font-size: 12px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-weight: 500;
      margin-bottom: 22px;
      position: relative;
      padding-bottom: 12px;
}

.footer-col h4::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      background: var(--accent);
      height: 1px;
      width: 28px;
}

.footer-col ul li:not(:last-child) { margin-bottom: 8px; }

.footer-col ul li a {
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--ink-mute);
      font-weight: 400;
      display: inline-block;
      transition: color 0.3s var(--easing), transform 0.3s var(--easing);
}

.footer-col ul li a:hover {
      color: var(--ink);
      transform: translateX(4px);
}

.footer-col .social-links {
      display: flex;
      gap: 10px;
}

.footer-col .social-links a {
      display: inline-flex;
      height: 38px;
      width: 38px;
      align-items: center;
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--ink);
      transition: all 0.4s var(--easing);
      font-size: 14px;
}

.footer-col .social-links a:hover {
      background: var(--accent);
      color: var(--ink);
      border-color: var(--accent);
      transform: translateY(-2px);
}

.footer-bottom {
      max-width: var(--maxw);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-low);
}

.footer-bottom a:hover { color: var(--ink); }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */

[data-reveal] {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1s var(--easing), transform 1s var(--easing);
}

[data-reveal].is-in {
      opacity: 1;
      transform: none;
}

[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }

/* =========================================================
   LIGHT-SECTIONS (om vi vill bryta mörk-design med vit)
   ========================================================= */

.light-section {
      background: var(--light);
      color: #111;
}

.light-section .kicker { color: #6b6b6b; }
.light-section .kicker::before { background: var(--accent); }
.light-section h2 { color: #111; }
.light-section p { color: #545454; }

/* =========================================================
   GAMMAL "tabell"-sida (table.html) — minimal patch
   ========================================================= */

.table {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 60px var(--pad) 120px;
}

.row-table { display: flex; border-bottom: 1px solid var(--line); }
.cell { flex: 1; padding: 14px; border-right: 1px solid var(--line); text-align: left; color: var(--ink); }
.header-table { background: var(--surface); color: var(--ink); }

/* =========================================================
   RESPONSIVE — behåll hamburger-toggle-grej från innan
   ========================================================= */

@media (max-width: 1180px) {
      .work-grid { grid-template-columns: repeat(4, 1fr); }
      .project-card,
      .project-card.size-lg,
      .project-card.size-md,
      .project-card.size-sm,
      .project-card.size-tall { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 1068px) {
      .hamburger { display: flex; }

      .nav-links {
            position: fixed;
            inset: 0;
            height: 100vh;
            width: 100%;
            background: rgba(14, 15, 18, 0.96);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 0 10vw;
            gap: 18px;
            clip-path: circle(80px at calc(100% - 40px) 40px);
            -webkit-clip-path: circle(80px at calc(100% - 40px) 40px);
            transition: clip-path 0.9s var(--easing);
            pointer-events: none;
            z-index: 1050;
      }

      .nav-links.open {
            clip-path: circle(150% at calc(100% - 40px) 40px);
            -webkit-clip-path: circle(150% at calc(100% - 40px) 40px);
            pointer-events: all;
      }

      .nav-links .dropdown {
            opacity: 0;
            transform: translateX(-20px);
            transition: opacity 0.5s var(--easing), transform 0.5s var(--easing);
      }

      .nav-links.open .dropdown { opacity: 1; transform: none; }
      .nav-links.open .dropdown:nth-child(1) { transition-delay: 0.25s; }
      .nav-links.open .dropdown:nth-child(2) { transition-delay: 0.32s; }
      .nav-links.open .dropdown:nth-child(3) { transition-delay: 0.39s; }
      .nav-links.open .dropdown:nth-child(4) { transition-delay: 0.46s; }

      .dropbtn,
      .dropbtn a {
            font-size: 28px;
            letter-spacing: 0.06em;
            padding: 14px 0;
      }

      .line1.toggle { transform: translateY(8px) rotate(45deg); }
      .line2.toggle { opacity: 0; transform: translateX(-12px); }
      .line3.toggle { transform: translateY(-8px) rotate(-45deg); }

      #nav { background: rgba(14, 15, 18, 0.65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }

      .stats { grid-template-columns: repeat(2, 1fr); }
      .stat:nth-child(2) { border-right: 0; }
      .stat:nth-child(3),
      .stat:nth-child(4) { border-top: 1px solid var(--line); }

      .banner { grid-template-columns: 1fr; }

      .case { grid-template-columns: 1fr; }
      .case-text { position: static; }
}

@media (max-width: 800px) {
      .cap-row { grid-template-columns: 50px 1fr auto; }
      .cap-desc { display: none; }
      .services-grid { grid-template-columns: 1fr; }
      .process { grid-template-columns: repeat(2, 1fr); }
      .step:nth-child(2) { border-right: 0; }
      .step:nth-child(3),
      .step:nth-child(4) { border-top: 1px solid var(--line); }
      .step:nth-child(3) { border-right: 1px solid var(--line); }
      .about-grid { grid-template-columns: 1fr; }
      .values { grid-template-columns: 1fr; }
      footer .row { grid-template-columns: 1fr 1fr; }
      .work-grid { grid-template-columns: 1fr; }
      .project-card,
      .project-card.size-lg,
      .project-card.size-md,
      .project-card.size-sm,
      .project-card.size-tall { grid-column: span 1; grid-row: span 1; }
      .pc-iframe { display: none; }
      #navlogo { width: 150px; }
      .hero-scroll { display: none; }
}

@media (max-width: 520px) {
      footer .row { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      #navlogo { width: 130px; }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {
      #nav, footer, .marquee, #headermovie { display: none !important; }
      body { background: #fff; color: #000; }
}