/* ═══════════════════════════════════════════════════════════════
   CROSSWIND AB — MAIN STYLESHEET  v3.0  (Brand Palette)
   ═══════════════════════════════════════════════════════════════

   BRAND COLORS
   ─────────────────────────────────────
   Deepwater   #0D1A26   Brand dark primary
   Cloud       #F0F0F0   Brand light primary

   COMPLEMENTARY PALETTE
   ─────────────────────────────────────
   Electric    #3B82F6   CTA & interactive (vibrant blue)
   Horizon     #4A8FC8   Secondary accent (trustworthy blue)
   Cyan        #00C2CB   Digital highlight (sparingly)
   Ice         #EAF1FB   Tinted surface background
   Graphite    #2C3E50   Body text (readable on light)
   Mist        #8899AA   Secondary / muted text
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Primary ── */
  --color-brand-dark:   #0D1A26;   /* Deepwater */
  --color-brand-light:  #F0F0F0;   /* Cloud */

  /* ── Backgrounds ── */
  --color-bg:           #F6F8FB;   /* Main page background (warm off-white) */
  --color-white:        #FFFFFF;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F0F0F0;   /* Cloud — card/alt backgrounds */
  --color-ice:          #EAF1FB;   /* Ice — subtle blue tint for cards */

  /* ── Brand Accent Scale ── */
  --color-accent:       #0D1A26;   /* Deepwater — headings, dark sections */
  --color-accent-dim:   #1A2F45;   /* Slightly lighter navy — hover states */
  --color-accent-glow:  rgba(13,26,38,.07);

  /* ── Complementary Blues ── */
  --color-electric:     #3B82F6;   /* Electric — CTAs, links, active states */
  --color-electric-dim: #2563EB;   /* Electric hover */
  --color-electric-glow:rgba(59,130,246,.12);
  --color-blue:         #4A8FC8;   /* Horizon — section labels, icons */
  --color-cyan:         #00C2CB;   /* Digital Cyan — metric bars, digital details */

  /* ── Text ── */
  --color-text:         #2C3E50;   /* Graphite — body text */
  --color-muted:        #5C6D7E;   /* Secondary text */
  --color-muted-mid:    #8899AA;   /* Mist — placeholder, fine print */

  /* ── Borders ── */
  --color-border:       rgba(13,26,38,.10);
  --color-border-mid:   rgba(13,26,38,.20);

  /* ── Fonts ── */
  --font-display:       'Syne', system-ui, sans-serif;
  --font-body:          'DM Sans', system-ui, sans-serif;

  --nav-height: 72px;
  --radius:     2px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ── UTILITIES ─────────────────────────────────────────────────── */

.u-label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--color-blue);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.u-label::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 1px;
  background: var(--color-blue);
  flex-shrink: 0;
}

/* Scroll-reveal */
.u-fade {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s ease;
}
.u-fade.is-visible { opacity: 1; transform: none; }
.u-fade-d1 { transition-delay: .12s; }
.u-fade-d2 { transition-delay: .22s; }
.u-fade-d3 { transition-delay: .32s; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .73rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .9rem 2rem;
  border-radius: var(--radius);
  border: none;
  transition: all .28s;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-electric);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-electric-dim);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px var(--color-electric-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border-mid);
}
.btn-ghost:hover {
  border-color: var(--color-accent);
  background: rgba(11,37,69,.04);
}

/* ── HEADER ──────────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.5rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
}
.site-header.scrolled {
  background: rgba(247,249,251,.93);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--color-border);
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color-accent);
}
.site-logo em {
  font-style: normal;
  color: var(--color-blue);
}
.site-logo__img {
  display: block;
  height: 30px;
  width: auto;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
}
.site-nav a {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color .22s;
}
.site-nav a:hover { color: var(--color-accent); }
.site-nav .nav-cta {
  color: var(--color-accent);
  border: 1px solid var(--color-border-mid);
  padding: .48rem 1.25rem;
  border-radius: var(--radius);
  transition: background .22s, color .22s;
}
.site-nav .nav-cta:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-accent);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  overflow: hidden;
  padding-top: var(--nav-height);
}

/* Particle canvas */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 860px;
  padding: 0 2rem;
}

/* Chip / eyebrow */
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--color-surface-2);
  color: var(--color-accent);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .42rem 1.1rem;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  margin-bottom: 2.75rem;
}
.hero-chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-blue);
  flex-shrink: 0;
  animation: dot-pulse 2.2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: .35; transform: scale(.7);   }
}

/* Main headline — lines animate in on load */
.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7.25rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.035em;
  color: var(--color-accent);
  margin-bottom: 1.75rem;
}
.hero-heading .line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: hero-rise .85s cubic-bezier(.25,.46,.45,.94) forwards;
}
.hero-heading .line:nth-child(1) { animation-delay: .2s; }
.hero-heading .line:nth-child(2) { animation-delay: .38s; }

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

.hero-sub {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.82;
  max-width: 52ch;
  margin: 0 auto 2.75rem;
  opacity: 0;
  animation: hero-rise .85s ease .6s forwards;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: hero-rise .85s ease .78s forwards;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  opacity: 0;
  animation: hero-rise .85s ease 1.05s forwards;
  text-decoration: none;
}
.hero-scroll span {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-muted-mid);
}
.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--color-border-mid), transparent);
  animation: scroll-breathe 2.2s ease-in-out infinite;
}
@keyframes scroll-breathe {
  0%, 100% { opacity: .7; transform: scaleY(1);    }
  50%       { opacity: .2; transform: scaleY(.45); }
}

/* ── TICKER ─────────────────────────────────────────────────────── */

.ticker-band {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  padding: 1.1rem 0;
  background: var(--color-white);
}
.ticker-track {
  display: flex;
  gap: 4rem;
  animation: scroll-x 28s linear infinite;
  width: max-content;
}
.ticker-track span {
  font-size: .63rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ticker-track span::after {
  content: '◆';
  font-size: .42rem;
  color: var(--color-blue);
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── SECTIONS ───────────────────────────────────────────────────── */

.cw-section {
  padding: 7.5rem 5rem;
  background: var(--color-bg);
}
.cw-section--surface {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-label {
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-blue);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 1.6rem;
  height: 1px;
  background: var(--color-blue);
  flex-shrink: 0;
}

.cw-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}
.cw-h2 em {
  font-style: italic;
  color: var(--color-blue);
}

/* ── SERVICES ───────────────────────────────────────────────────── */

.services-top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 3.5rem;
}
.services-top p {
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.85;
  max-width: 44ch;
}

/* 2-column card grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.service-card {
  background: var(--color-white);
  padding: 3.5rem 3rem;
  position: relative;
  transition: background .3s, transform .3s;
  overflow: hidden;
}
.service-card:hover { background: var(--color-surface-2); }

/* Animated top line on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--color-electric), var(--color-cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.service-card:hover::before { transform: scaleX(1); }

/* Icon wrapper */
.service-icon-wrap {
  width: 52px;
  height: 52px;
  background: var(--color-surface-2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  transition: background .3s;
}
.service-card:hover .service-icon-wrap { background: rgba(11,37,69,.08); }
.service-icon-wrap svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-accent);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Keep old .service-num class working for any existing content */
.service-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  color: rgba(11,37,69,.15);
  line-height: 1;
  margin-bottom: 1.25rem;
  transition: color .3s;
}
.service-card:hover .service-num { color: rgba(11,37,69,.25); }

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .85rem;
  color: var(--color-accent);
}
.service-card p {
  font-size: .88rem;
  color: var(--color-muted);
  line-height: 1.88;
  margin-bottom: 1.75rem;
}

/* Bullet list inside service card */
.service-list {
  list-style: none;
  margin-bottom: 2rem;
}
.service-list li {
  font-size: .82rem;
  color: var(--color-muted);
  padding: .45rem 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: .65rem;
}
.service-list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-blue);
  flex-shrink: 0;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.5rem;
}
.service-tag {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-border-mid);
  padding: .25rem .65rem;
  border-radius: 2px;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-mid);
  padding-bottom: 1px;
  transition: gap .22s, color .22s, border-color .22s;
}
.service-link:hover {
  gap: .7rem;
  color: var(--color-blue);
  border-color: var(--color-blue);
}

/* ── UPPDRAG / CASE ─────────────────────────────────────────────── */

.uppdrag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.uppdrag-card {
  background: var(--color-white);
  overflow: hidden;
  transition: background .3s;
}
.uppdrag-card:hover { background: var(--color-surface-2); }
.uppdrag-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface-2);
}
.uppdrag-card__body { padding: 1.75rem; }
.uppdrag-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .85rem;
}
.uppdrag-tag {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-border-mid);
  padding: .2rem .55rem;
  border-radius: 2px;
}
.uppdrag-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--color-accent);
}
.uppdrag-card__title a { color: inherit; transition: color .2s; }
.uppdrag-card__title a:hover { color: var(--color-blue); }
.uppdrag-card__client { font-size: .75rem; color: var(--color-muted); }

/* Single & Archive uppdrag */
.single-uppdrag {
  max-width: 900px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 4rem) 5rem 6rem;
}
.single-uppdrag__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.single-uppdrag__header { margin-bottom: 3rem; }
.single-uppdrag__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: var(--color-accent);
}
.single-uppdrag__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 3rem;
}
.single-uppdrag__detail-label {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: .4rem;
}
.single-uppdrag__detail-value { font-size: .9rem; color: var(--color-text); }
.single-uppdrag__content { font-size: .95rem; line-height: 1.9; color: var(--color-muted); }
.single-uppdrag__content p { margin-bottom: 1.25rem; }
.single-uppdrag__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 3rem;
  border: 1px solid var(--color-border);
}

.archive-uppdrag {
  padding: calc(var(--nav-height) + 4rem) 5rem 6rem;
  background: var(--color-bg);
}
.archive-header { margin-bottom: 4rem; }

/* ── CLIENT LOGOS ───────────────────────────────────────────────── */

.logos-section {
  padding: 4rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-white);
}
.logos-label {
  text-align: center;
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2.5rem;
}
.logos-carousel {
  display: flex;
  width: max-content;
  animation: logos-scroll 16s linear infinite;
}
.logos-carousel:hover { animation-play-state: paused; }
.logos-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 0 2rem;
}
.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .25s;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo-item:hover { color: var(--color-accent); }
.logo-item img {
  max-height: 100px;
  width: auto;
  filter: grayscale(1) brightness(.45);
  opacity: .55;
  transition: opacity .25s, filter .25s;
}
.logo-item:hover img { opacity: .85; filter: grayscale(0) brightness(1); }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── ABOUT ──────────────────────────────────────────────────────── */

.about-grid {
  display: grid;
  grid-template-columns: 28rem 1fr;
  gap: 5rem;
  align-items: start;
}

/* Large decorative number */
.about-num {
  font-family: var(--font-display);
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 800;
  color: var(--color-surface-2);
  line-height: 1;
  letter-spacing: -.05em;
  user-select: none;
  pointer-events: none;
  padding-top: .5rem;
}

/* Old stats grid — left in for backward compat if needed */
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
.stat-item {
  padding-left: 1.25rem;
  border-left: 2px solid var(--color-blue);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: .35rem;
}
.stat-label { font-size: .72rem; color: var(--color-muted); letter-spacing: .06em; }

.about-copy { padding-top: .5rem; }
.about-copy .section-label { margin-bottom: 1.2rem; }

.about-text p {
  font-size: .92rem;
  color: var(--color-muted);
  line-height: 1.9;
  margin-bottom: 1.1rem;
  max-width: 52ch;
}

/* Vision/tagline quote */
.about-quote {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent);
  border-left: 3px solid var(--color-blue);
  padding-left: 1.1rem;
  line-height: 1.55;
  margin-top: 2rem;
  max-width: 48ch;
}

/* ── CONTACT ────────────────────────────────────────────────────── */

/* Dark navy contact section */
#kontakt {
  background: var(--color-accent);
  color: #fff;
}
#kontakt .section-label {
  color: rgba(255,255,255,.45);
}
#kontakt .section-label::before { background: rgba(255,255,255,.35); }
#kontakt .cw-h2 { color: #fff; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 6rem;
  align-items: start;
}
.contact-meta p {
  color: rgba(255,255,255,.6);
  font-size: .9rem;
  line-height: 1.85;
  margin-bottom: 2.5rem;
  max-width: 40ch;
}
.contact-details { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-row { display: flex; align-items: flex-start; gap: 1rem; }
.contact-row-dot {
  width: 6px;
  height: 6px;
  background: var(--color-blue);
  border-radius: 50%;
  margin-top: .6rem;
  flex-shrink: 0;
}
.contact-row-body { font-size: .85rem; }
.contact-row-body strong {
  display: block;
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: .2rem;
}
.contact-row-body span { color: rgba(255,255,255,.75); }

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.field input,
.field textarea,
.field select {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 300;
  outline: none;
  transition: border-color .22s, background .22s;
  -webkit-appearance: none;
  appearance: none;
  resize: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.11);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,.28); }
.field textarea { min-height: 115px; }

.field select option { background: var(--color-accent); color: #fff; }

/* Submit button — white on dark */
.btn-primary-light {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .9rem 2rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background .25s, transform .25s;
  align-self: flex-start;
}
.btn-primary-light:hover {
  background: var(--color-surface-2);
  transform: translateY(-2px);
}

/* Form feedback */
.cf-msg-box {
  padding: .7rem 1rem;
  border-radius: var(--radius);
  font-size: .82rem;
  display: none;
}
.cf-msg-box.success {
  display: block;
  background: rgba(74,143,200,.18);
  border: 1px solid rgba(74,143,200,.35);
  color: rgba(255,255,255,.9);
}
.cf-msg-box.error {
  display: block;
  background: rgba(220,80,80,.15);
  border: 1px solid rgba(220,80,80,.3);
  color: rgba(255,255,255,.9);
}

/* ── FOOTER ─────────────────────────────────────────────────────── */

.site-footer {
  background: var(--color-accent);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 2.75rem 5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.9);
  text-decoration: none;
}
.footer-logo em { font-style: normal; color: rgba(74,143,200,.85); }
.footer-logo__img {
  display: block;
  height: 22px;
  width: auto;
  object-fit: contain;
  opacity: .65;
  transition: opacity .3s ease;
}
.footer-logo:hover .footer-logo__img { opacity: 1; }
.footer-nav { display: flex; gap: 2rem; list-style: none; }
.footer-nav a {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  transition: color .22s;
}
.footer-nav a:hover { color: rgba(255,255,255,.85); }
.footer-copy {
  font-size: .7rem;
  color: rgba(255,255,255,.3);
  text-align: right;
  letter-spacing: .03em;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .about-grid { grid-template-columns: 14rem 1fr; gap: 3rem; }
  .about-num  { font-size: 9rem; }
}

@media (max-width: 1024px) {
  .cw-section   { padding: 5.5rem 3rem; }
  .hero-inner   { max-width: 700px; }
  .services-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .services-grid { grid-template-columns: 1fr; }
  .about-grid   { grid-template-columns: 1fr; gap: 2rem; }
  .about-num    { font-size: 7rem; display: none; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .site-footer  { grid-template-columns: 1fr 1fr; padding: 2.5rem 3rem; }
  .footer-copy  { grid-column: 1/-1; text-align: left; }
  .uppdrag-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .cw-section   { padding: 4rem 1.5rem; }
  .site-header  { padding: 0 1.5rem; }
  .site-nav {
    position: fixed;
    inset: 0;
    background: rgba(247,249,251,.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    z-index: 199;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a    { font-size: .95rem; letter-spacing: .1em; }
  .nav-hamburger { display: flex; z-index: 201; }
  .hero          { min-height: 100svh; }
  .hero-heading  { font-size: clamp(3rem, 14vw, 5rem); }
  .hero-sub      { font-size: .95rem; }
  .field-row     { grid-template-columns: 1fr; }
  .site-footer   { grid-template-columns: 1fr; padding: 2rem 1.5rem; }
  .footer-copy   { text-align: left; }
  .footer-nav    { flex-wrap: wrap; gap: 1.25rem; }
  .uppdrag-grid  { grid-template-columns: 1fr; }
  .single-uppdrag,
  .archive-uppdrag { padding: calc(var(--nav-height) + 2rem) 1.5rem 4rem; }
  .single-uppdrag__details { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .hero-chip   { display: none; }
  .services-grid { border-radius: 0; }
  .service-card  { padding: 2.5rem 1.75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO — SPLIT LAYOUT & 3D VISUAL
   ═══════════════════════════════════════════════════════════════ */

.hero {
  justify-content: center;    /* override: align hero-grid */
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1360px;
  width: 100%;
  padding: 0 3.5rem;
  position: relative;
  z-index: 1;
}

.hero-content {
  text-align: left;
}

/* Left-align hero text when inside split layout */
.hero-content .hero-chip   { justify-content: flex-start; }
.hero-content .hero-sub    { text-align: left; margin-left: 0; margin-right: 0; }
.hero-content .hero-ctas   { justify-content: flex-start; }
.hero-content .hero-heading { text-align: left; }

/* Accent line in hero headline */
.hero-accent-line { color: var(--color-electric); }

/* Delay animation for second line */
.hero-heading .line:nth-child(2) { animation-delay: .38s; }

/* u-fade-d4 */
.u-fade-d4 { transition-delay: .42s; }

/* ── 3D HERO VISUAL ──────────────────────────────────────────── */

.hero-visual {
  position: relative;
  height: 420px;
  perspective: 1100px;
  perspective-origin: 50% 40%;
}

/* Ambient glow orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(45px);
}
.orb-1 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(74,143,200,.35), transparent 70%);
  top: -20px; right: 10px;
  animation: orb-drift 8s ease-in-out infinite;
}
.orb-2 {
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(11,37,69,.12), transparent 70%);
  bottom: 10px; left: 15px;
  animation: orb-drift 6.5s ease-in-out infinite 2.5s;
}
@keyframes orb-drift {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-18px) scale(1.08); }
}

/* Floating scene cards */
.scene-card {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow:
    0 2px 8px rgba(11,37,69,.06),
    0 12px 40px rgba(11,37,69,.10),
    0 30px 80px rgba(11,37,69,.07);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Back card — big browser mockup */
.scene-card--back {
  width: 340px;
  top: 10px; left: 0;
  transform: rotateY(-10deg) rotateX(5deg) rotateZ(-1.5deg) translateZ(-30px);
  animation: float-back 7s ease-in-out infinite;
  opacity: .75;
  z-index: 1;
}
@keyframes float-back {
  0%, 100% { transform: rotateY(-10deg) rotateX(5deg) rotateZ(-1.5deg) translateZ(-30px) translateY(0); }
  50%       { transform: rotateY(-10deg) rotateX(5deg) rotateZ(-1.5deg) translateZ(-30px) translateY(-14px); }
}

/* Mid card — code editor */
.scene-card--mid {
  width: 260px;
  top: 140px; left: 70px;
  transform: rotateY(-5deg) rotateX(2deg) rotateZ(-.5deg);
  animation: float-mid 6s ease-in-out infinite .8s;
  opacity: .92;
  z-index: 2;
}
@keyframes float-mid {
  0%, 100% { transform: rotateY(-5deg) rotateX(2deg) rotateZ(-.5deg) translateY(0); }
  50%       { transform: rotateY(-5deg) rotateX(2deg) rotateZ(-.5deg) translateY(-10px); }
}

/* Front card — metrics */
.scene-card--front {
  width: 185px;
  bottom: 10px; right: 0;
  transform: rotateY(6deg) rotateX(-3deg) rotateZ(1.5deg) translateZ(30px);
  animation: float-front 5.5s ease-in-out infinite 1.5s;
  padding: 1.1rem;
  z-index: 3;
}
@keyframes float-front {
  0%, 100% { transform: rotateY(6deg) rotateX(-3deg) rotateZ(1.5deg) translateZ(30px) translateY(0); }
  50%       { transform: rotateY(6deg) rotateX(-3deg) rotateZ(1.5deg) translateZ(30px) translateY(-12px); }
}

/* ── Card browser bar ── */
.sc-bar {
  background: #F4F6F9;
  border-bottom: 1px solid #eaecf0;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sc-bar.code { background: #1a1f2e; border-color: #2d3447; }
.sc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sc-dot.r { background: #FF5F57; }
.sc-dot.y { background: #FEBC2E; }
.sc-dot.g { background: #28C840; }
.sc-url {
  margin-left: 8px;
  font-size: .58rem;
  letter-spacing: .04em;
  color: #9AAAB8;
  background: rgba(255,255,255,.6);
  padding: 2px 8px;
  border-radius: 3px;
  flex: 1;
}
.sc-bar.code .sc-url { background: rgba(255,255,255,.08); }

/* ── Back card body ── */
.sc-body { padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.sc-hero-block {
  height: 54px;
  background: linear-gradient(135deg, #0D1A26 0%, #3B82F6 100%);
  border-radius: 6px;
}
.sc-lines { display: flex; flex-direction: column; gap: 5px; }
.sc-line {
  height: 7px;
  background: #EEF2FA;
  border-radius: 4px;
}
.sc-grid-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  margin-top: 2px;
}
.sc-card-mini {
  height: 28px;
  background: #F0F4FD;
  border-radius: 4px;
  border: 1px solid #E6EBF5;
}

/* ── Mid card: code editor ── */
.code-body {
  background: #1a1f2e;
  padding: 9px 11px;
  font-family: 'Courier New', monospace;
  font-size: .65rem;
  line-height: 1.7;
  color: #8892a4;
}
.code-line { white-space: nowrap; }
.code-line.i2 { padding-left: 1.2em; }
.code-line.mt { margin-top: .5em; }
.t-blue   { color: #7AAFFF; }
.t-muted  { color: #6B7A8D; }
.t-green  { color: #7EC8A1; }
.t-orange { color: #FFBB77; }

/* ── Front card: metrics ── */
.sc-metric-label {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: .25rem;
}
.sc-metric-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: .4rem;
}
.sc-bar-track {
  height: 4px;
  background: #EEF2FA;
  border-radius: 2px;
  margin-bottom: .65rem;
  overflow: hidden;
}
.sc-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--color-electric), var(--color-cyan));
  border-radius: 2px;
  animation: bar-grow 1.8s ease 1s both;
}
@keyframes bar-grow {
  from { width: 0 !important; }
}
.sc-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-badge {
  font-size: .55rem;
  letter-spacing: .05em;
  background: #EEF2FA;
  color: var(--color-accent);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.sc-badge.ok {
  background: linear-gradient(135deg, var(--color-accent), var(--color-blue));
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   3D TILT CARDS (service cards)
   ═══════════════════════════════════════════════════════════════ */

.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  will-change: transform;
  transition: box-shadow .35s;
}
.tilt-card:hover {
  box-shadow: 0 24px 60px rgba(11,37,69,.13), 0 6px 18px rgba(11,37,69,.07);
}

/* ═══════════════════════════════════════════════════════════════
   SERVICES — 4-COLUMN GRID
   ═══════════════════════════════════════════════════════════════ */

.services-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.services-grid-4 .service-card {
  padding: 2.75rem 2rem;
}

/* ═══════════════════════════════════════════════════════════════
   PROCESS SECTION
   ═══════════════════════════════════════════════════════════════ */

.process-section { background: var(--color-bg); }

.process-steps {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 80px 1fr 80px 1fr;
  gap: 0;
  align-items: start;
  margin-top: 3.5rem;
}

.process-step {
  text-align: center;
}

.step-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-electric), var(--color-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 1.1rem;
  opacity: .4;
}

.process-step h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: .55rem;
}
.process-step p {
  font-size: .82rem;
  color: var(--color-muted);
  line-height: 1.75;
  max-width: 22ch;
  margin: 0 auto;
}

.process-connector {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2.4rem;
}
.process-connector::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--color-border-mid), transparent, var(--color-border-mid));
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT — (dark theme handled by dark navy system below)
   ═══════════════════════════════════════════════════════════════ */

.contact-grid-new {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 6rem;
  align-items: start;
}

.contact-meta-light p {
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.85;
  margin-bottom: 2.25rem;
  max-width: 40ch;
}

.contact-details-light {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-row-light {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}

.contact-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-icon-wrap svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-accent);
}

.contact-row-light > div strong {
  display: block;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-muted-mid);
  margin-bottom: .15rem;
}
.contact-row-light > div span { font-size: .9rem; color: var(--color-text); }

/* Forminator wrapper */
.forminator-wrap { width: 100%; }

/* Form placeholder — shown before Forminator is configured */
.form-placeholder-box {
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border-mid);
  border-radius: 8px;
  padding: 2.5rem;
  text-align: center;
}
.form-placeholder-icon {
  width: 56px;
  height: 56px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.form-placeholder-icon svg { stroke: var(--color-blue); }
.form-placeholder-box h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: .6rem;
}
.form-placeholder-box p {
  font-size: .85rem;
  color: var(--color-muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
.form-placeholder-box p strong { color: var(--color-accent); }

.form-placeholder-steps {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  text-align: left;
}
.fps-step {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .8rem;
  color: var(--color-muted);
}
.fps-step span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Forminator overrides (base — extended in dark navy block) ── */

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — NEW ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1280px) {
  .services-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .hero-grid { gap: 3rem; padding: 0 2.5rem; }
  .hero-visual { height: 360px; }
  .scene-card--back { width: 280px; }
  .scene-card--mid  { width: 220px; left: 50px; top: 110px; }
  .scene-card--front { width: 155px; }
  .sc-metric-num { font-size: 2rem; }
  .process-steps {
    grid-template-columns: 1fr 50px 1fr 50px 1fr 50px 1fr;
  }
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 0 2rem;
    text-align: center;
  }
  .hero-content { order: 1; }
  .hero-content .hero-chip,
  .hero-content .hero-sub,
  .hero-content .hero-ctas,
  .hero-content .hero-heading { justify-content: center; text-align: center; margin-left: auto; margin-right: auto; }
  .hero-visual { order: 2; height: 280px; }
  .scene-card--back  { width: 240px; top: 5px; left: 10px; }
  .scene-card--mid   { width: 190px; left: 60px; top: 80px; }
  .scene-card--front { width: 140px; bottom: 5px; right: 5px; }
  .contact-grid-new  { grid-template-columns: 1fr; gap: 2.5rem; }
  .process-steps {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 2rem;
  }
  .process-connector { display: none; }
}

@media (max-width: 640px) {
  .hero-visual { display: none; }
  .services-grid-4 { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; gap: 2rem; }
  .step-num { font-size: 2.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC PROJECT CAROUSEL
   ═══════════════════════════════════════════════════════════════ */

.carousel-section {
  background: var(--color-accent);
  overflow: hidden;
}

.carousel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 6rem 5rem 3.5rem;
}

.carousel-header .section-label {
  color: rgba(255,255,255,.38);
}
.carousel-header .section-label::before {
  background: rgba(255,255,255,.25);
}
.carousel-header .cw-h2 {
  color: #fff;
  margin-bottom: 0;
}
.carousel-header .cw-h2 em { color: var(--color-blue); }

.carousel-all-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: 2px;
  transition: color .22s, border-color .22s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 3rem;
  margin-bottom: .25rem;
}
.carousel-all-link:hover {
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.4);
}
.carousel-all-link svg { flex-shrink: 0; }

/* Viewport & track */
.carousel-viewport {
  position: relative;
  overflow: hidden;
  height: 78vh;
  min-height: 520px;
  max-height: 820px;
}

.carousel-track {
  display: flex;
  height: 100%;
  transition: transform .8s cubic-bezier(.77,0,.175,1);
  will-change: transform;
}

/* Individual slide */
.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

.carousel-card {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Background image with slow Ken Burns zoom */
.carousel-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #1A2F45;
  transform: scale(1);
  transition: transform 8s ease;
}
.carousel-slide.is-active .carousel-card__bg {
  transform: scale(1.06);
}

/* Gradient overlay */
.carousel-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(13,26,38,.95) 0%,
      rgba(13,26,38,.55) 45%,
      rgba(13,26,38,.18) 100%),
    linear-gradient(to right,
      rgba(13,26,38,.35) 0%,
      transparent 60%);
}

/* Counter top-right */
.carousel-card__counter {
  position: absolute;
  top: 2.5rem;
  right: 4rem;
  font-family: var(--font-display);
  font-size: .6rem;
  letter-spacing: .22em;
  color: rgba(255,255,255,.28);
  z-index: 2;
}

/* Content bottom-left */
.carousel-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4rem 5rem;
  z-index: 2;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .7s ease .15s, opacity .7s ease .15s;
}
.carousel-slide.is-active .carousel-card__content {
  transform: translateY(0);
  opacity: 1;
}

.carousel-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}
.carousel-card__tags span {
  font-size: .57rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.18);
  padding: .22rem .65rem;
  border-radius: 2px;
}

.carousel-card__content h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: .65rem;
}

.carousel-card__meta {
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  letter-spacing: .04em;
  margin-bottom: 1.5rem;
}

.carousel-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding-bottom: 2px;
  transition: color .22s, border-color .22s;
}
.carousel-card:hover .carousel-card__cta {
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.5);
}

/* Prev / Next arrows */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .22s, border-color .22s, color .22s, transform .22s;
}
.carousel-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-prev { left: 3rem; }
.carousel-next { right: 3rem; }

/* Footer row: dots + progress */
.carousel-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2.5rem 5rem 4rem;
  background: var(--color-accent);
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.carousel-dot {
  width: 28px;
  height: 2px;
  background: rgba(255,255,255,.18);
  border: none;
  border-radius: 1px;
  cursor: pointer;
  transition: background .3s, width .35s cubic-bezier(.25,.46,.45,.94);
  padding: 0;
}
.carousel-dot.is-active {
  background: var(--color-electric);
  width: 48px;
}

.carousel-progress-bar {
  width: 120px;
  height: 1px;
  background: rgba(255,255,255,.1);
  border-radius: 1px;
  overflow: hidden;
}
.carousel-progress-fill {
  height: 100%;
  background: var(--color-electric);
  border-radius: 1px;
  width: 0%;
  transition: width 5s linear;
}
.carousel-progress-fill.is-running { width: 100%; }

/* ── Responsive carousel ── */
@media (max-width: 1024px) {
  .carousel-header { padding: 4rem 3rem 2.5rem; }
  .carousel-card__content { padding: 3rem 3rem; }
  .carousel-card__counter { right: 2.5rem; }
  .carousel-viewport { height: 65vh; }
  .carousel-footer { padding: 2rem 3rem 3rem; }
}

@media (max-width: 768px) {
  .carousel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 3rem 1.5rem 2rem;
  }
  .carousel-all-link { margin-left: 0; }
  .carousel-card__content { padding: 2.5rem 1.5rem; }
  .carousel-card__counter { right: 1.5rem; top: 1.5rem; }
  .carousel-card__content h3 { font-size: clamp(1.6rem, 7vw, 2.8rem); }
  .carousel-btn { display: none; }
  .carousel-viewport { height: 60vh; min-height: 380px; }
  .carousel-footer { padding: 1.75rem 1.5rem 2.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT — CENTERED LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.contact-centered-section {
  background: transparent !important;
  border: none !important;
  position: relative;
  z-index: 1;
}

.contact-centered-wrap {
  max-width: 660px;
  margin: 0;
  padding-left: calc(76px + 4rem);
  text-align: left;
}

.imm-heading--contact {
  margin-bottom: 3rem;
}

.imm-heading--contact .word {
  opacity: 1;
  transform: none;
}

.contact-form-centered {
  text-align: left;
}

/* Forminator button base — full dark override in dark navy block below */

@media (max-width: 768px) {
  .contact-centered-wrap .cw-h2 { font-size: clamp(1.9rem, 7vw, 2.5rem); }
}

/* ═══════════════════════════════════════════════════════════════
   DARK NAVY THEME SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── Global ── */
body {
  background: #070F18;
  color: rgba(255,255,255,.78);
}

#rocket-cursor { display: none; }

/* ── Navigation on dark ── */
.site-header {
  border-bottom-color: rgba(255,255,255,.04);
}
.site-header.scrolled {
  background: rgba(7,15,24,.88);
  border-bottom-color: rgba(255,255,255,.07);
}
.site-logo { color: #fff; }
.site-nav a { color: rgba(255,255,255,.38); }
.site-nav a:hover { color: #fff; }
.site-nav .nav-cta {
  color: rgba(255,255,255,.65);
  border-color: rgba(255,255,255,.14);
}
.site-nav .nav-cta:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.28);
}
.nav-hamburger span { background: rgba(255,255,255,.7); }

/* Mobile nav overlay on dark */
@media (max-width: 768px) {
  .site-nav {
    background: rgba(7,15,24,.97) !important;
  }
  .site-nav a { color: rgba(255,255,255,.65) !important; }
}

/* ── Hero — dark ── */
.hero { background: #070F18; }

/* Enhance glow orbs for dark bg — much more dramatic */
.orb-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(27,110,245,.22), transparent 68%);
  top: -60px; right: -30px;
  filter: blur(55px);
}
.orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,194,203,.14), transparent 68%);
  bottom: 10px; left: 0;
  filter: blur(45px);
}

/* Hero text on dark */
.hero-heading { color: #fff; }
.hero-sub { color: rgba(255,255,255,.46); }

/* Hero chip on dark */
.hero-chip {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.58);
}
.hero-chip::before { background: var(--color-cyan); }

/* Animated shimmer on accent headline */
.hero-accent-line {
  background: linear-gradient(
    105deg,
    var(--color-electric) 0%,
    var(--color-cyan)     40%,
    #a78bfa               60%,
    var(--color-electric) 100%
  );
  background-size: 240% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: shimmer-text 5.5s ease-in-out infinite;
}
@keyframes shimmer-text {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Availability badge */
.hero-availability {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .63rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
  margin-top: 2rem;
  opacity: 0;
  animation: hero-rise .85s ease .98s forwards;
}
.avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34,197,94,.2);
  animation: avail-pulse 2.8s ease-in-out infinite;
}
@keyframes avail-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
  50%       { box-shadow: 0 0 0 8px rgba(34,197,94,.06); }
}

/* Ghost button on dark */
.btn-ghost {
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.18);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}

/* Primary button enhanced glow on dark */
.btn-primary:hover {
  box-shadow:
    0 0 0 1px rgba(27,110,245,.5),
    0 0 30px rgba(27,110,245,.35),
    0 8px 24px rgba(27,110,245,.22);
}

/* Scroll indicator on dark */
.hero-scroll span { color: rgba(255,255,255,.24); }
.hero-scroll-line {
  background: linear-gradient(to bottom, rgba(255,255,255,.16), transparent);
}

/* ── Stats strip ── */
.stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04090E;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
}

.stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 2.25rem 4.5rem;
  transition: background .3s;
  position: relative;
}
.stat-pill:hover { background: rgba(255,255,255,.025); }
.stat-pill:hover .stat-pill__num { color: var(--color-electric); }

.stat-divider {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,.07);
  flex-shrink: 0;
}

.stat-pill__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em;
  transition: color .3s;
}
.stat-pill__num em {
  font-style: normal;
  color: var(--color-electric);
  font-size: 1.75rem;
  vertical-align: top;
  margin-top: .1rem;
}

.stat-pill__label {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.26);
  white-space: nowrap;
}

/* ── Ticker on dark ── */
.ticker-band {
  background: #04090E;
  border-top-color: rgba(255,255,255,.05);
  border-bottom-color: rgba(255,255,255,.05);
}
.ticker-track span { color: rgba(255,255,255,.2); }
.ticker-track span::after { color: var(--color-electric); opacity: .6; }

/* ── Generic sections on dark ── */
.cw-section {
  background: linear-gradient(
    160deg,
    rgba(27,110,245,.04) 0%,
    #070F18 35%,
    #070F18 65%,
    rgba(0,194,203,.03) 100%
  );
}
.cw-section--surface {
  background: #04090E;
  border-top-color:    rgba(255,255,255,.06);
  border-bottom-color: rgba(255,255,255,.06);
}

/* Section labels */
.section-label { color: var(--color-cyan); }
.section-label::before { background: var(--color-cyan); }

.cw-h2 { color: #fff; }
.cw-h2 em { color: var(--color-electric); }

.services-top p { color: rgba(255,255,255,.4); }

/* ── Glassmorphism service cards ── */
.services-grid {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.06);
}

.service-card {
  background: rgba(255,255,255,.022);
  border-color: rgba(255,255,255,.055);
  position: relative;
  overflow: hidden;
}
.service-card:hover { background: rgba(255,255,255,.055); }

/* Animated shimmer gradient border top */
.service-card::before {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-electric),
    var(--color-cyan),
    var(--color-electric),
    transparent
  );
  background-size: 250% auto;
}
.service-card:hover::before {
  transform: scaleX(1);
  animation: border-shimmer 2.5s linear infinite;
}
@keyframes border-shimmer {
  from { background-position:   0% center; }
  to   { background-position: 250% center; }
}

/* Subtle diagonal shine on card hover */
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.04) 0%,
    transparent           45%,
    rgba(27,110,245,.04)  100%
  );
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.service-card:hover::after { opacity: 1; }

.service-card h3 { color: #fff; }
.service-card > p { color: rgba(255,255,255,.44); }
.service-list li {
  color: rgba(255,255,255,.4);
  border-bottom-color: rgba(255,255,255,.05);
}
.service-list li::before { background: var(--color-cyan); }

.service-icon-wrap { background: rgba(255,255,255,.05); }
.service-card:hover .service-icon-wrap { background: rgba(27,110,245,.15); }
.service-icon-wrap svg { stroke: var(--color-electric); }

.service-link { color: rgba(255,255,255,.38); border-color: rgba(255,255,255,.1); }
.service-link:hover { color: var(--color-cyan); border-color: var(--color-cyan); }

/* ── Client logos on dark ── */
.logos-section {
  background: #04090E;
  border-top-color:    rgba(255,255,255,.06);
  border-bottom-color: rgba(255,255,255,.06);
}
.logos-label { color: rgba(255,255,255,.18); }
.logo-item { color: rgba(255,255,255,.22); }
.logo-item img {
  filter: brightness(0) invert(1);
  opacity: .18;
}
.logo-item:hover img {
  filter: brightness(0) invert(1);
  opacity: .55;
}

/* ── 3D scene cards on dark hero ── */
.scene-card {
  background: #0C1C2C;
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 2px 8px rgba(0,0,0,.35),
    0 12px 40px rgba(0,0,0,.28),
    0 30px 80px rgba(27,110,245,.07);
}
.sc-bar              { background: #091521; border-bottom-color: rgba(255,255,255,.07); }
.sc-url              { background: rgba(255,255,255,.06); color: rgba(255,255,255,.28); }
.sc-hero-block       { background: linear-gradient(135deg, #3B82F6 0%, #00C2CB 100%); }
.sc-line             { background: rgba(255,255,255,.07); }
.sc-card-mini        { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.04); }
.sc-metric-label     { color: rgba(255,255,255,.32); }
.sc-metric-num       { color: #fff; }
.sc-bar-track        { background: rgba(255,255,255,.07); }
.sc-badge            { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); }

/* ── Contact section — dark navy ── */
.contact-centered-section {
  background: transparent !important;
  border: none !important;
}

/* Form placeholder dark */
.contact-centered-section .form-placeholder-box {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
.contact-centered-section .form-placeholder-box h3 { color: #fff; }
.contact-centered-section .form-placeholder-box p { color: rgba(255,255,255,.45); }
.contact-centered-section .form-placeholder-box p strong { color: rgba(255,255,255,.75); }
.contact-centered-section .form-placeholder-icon {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}
.contact-centered-section .form-placeholder-icon svg { stroke: var(--color-cyan); }
.contact-centered-section .fps-step { color: rgba(255,255,255,.4); }
.contact-centered-section .fps-step span {
  background: rgba(27,110,245,.7);
}

/* ── Form wrapper glow ── */
#kontakt .contact-form-centered {
  position: relative;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(27,110,245,.2);
  border-radius: 14px;
  padding: 2.75rem;
  margin-top: 2.5rem;
  box-shadow:
    0 0 0 1px rgba(27,110,245,.06),
    0 0 45px rgba(27,110,245,.14),
    0 0 90px rgba(0,194,203,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
  animation: form-glow-breathe 5s ease-in-out infinite;
}

@keyframes form-glow-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(27,110,245,.06),
      0 0 45px rgba(27,110,245,.14),
      0 0 90px rgba(0,194,203,.06),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(27,110,245,.12),
      0 0 65px rgba(27,110,245,.22),
      0 0 120px rgba(0,194,203,.10),
      inset 0 1px 0 rgba(255,255,255,.09);
  }
}

/* Glow top-edge accent line */
#kontakt .contact-form-centered::before {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(27,110,245,.6),
    rgba(0,194,203,.5),
    rgba(27,110,245,.6),
    transparent
  );
  border-radius: 1px;
}

/* ── Forminator — labels ── */
#kontakt .forminator-ui .forminator-label,
#kontakt .forminator-ui label {
  color: rgba(255,255,255,.4) !important;
  font-size: .63rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-family: var(--font-body) !important;
  margin-bottom: .5rem !important;
}

/* ── Forminator — all inputs ── */
#kontakt .forminator-ui input[type="text"],
#kontakt .forminator-ui input[type="email"],
#kontakt .forminator-ui input[type="tel"],
#kontakt .forminator-ui input[type="number"],
#kontakt .forminator-ui input[type="url"],
#kontakt .forminator-ui textarea,
#kontakt .forminator-ui select,
#kontakt .forminator-ui .forminator-input,
#kontakt .forminator-ui .forminator-textarea,
#kontakt .forminator-ui .forminator-select,
.imm-form-wrap .forminator-ui input[type="text"],
.imm-form-wrap .forminator-ui input[type="email"],
.imm-form-wrap .forminator-ui input[type="tel"],
.imm-form-wrap .forminator-ui input[type="number"],
.imm-form-wrap .forminator-ui input[type="url"],
.imm-form-wrap .forminator-ui textarea,
.imm-form-wrap .forminator-ui select,
.imm-form-wrap .forminator-ui .forminator-input,
.imm-form-wrap .forminator-ui .forminator-textarea,
.imm-form-wrap .forminator-ui .forminator-select {
  background: rgba(255,255,255,.11) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,.92) !important;
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  font-weight: 300 !important;
  padding: .85rem 1rem !important;
  transition: border-color .22s, background .22s, box-shadow .22s !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Focus ring */
#kontakt .forminator-ui input:focus,
#kontakt .forminator-ui textarea:focus,
#kontakt .forminator-ui select:focus,
#kontakt .forminator-ui .forminator-input:focus,
#kontakt .forminator-ui .forminator-textarea:focus,
.imm-form-wrap .forminator-ui input:focus,
.imm-form-wrap .forminator-ui textarea:focus,
.imm-form-wrap .forminator-ui select:focus,
.imm-form-wrap .forminator-ui .forminator-input:focus,
.imm-form-wrap .forminator-ui .forminator-textarea:focus {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(196,158,80,.6) !important;
  box-shadow: 0 0 0 3px rgba(196,158,80,.12), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Placeholder */
#kontakt .forminator-ui input::placeholder,
#kontakt .forminator-ui textarea::placeholder,
.imm-form-wrap .forminator-ui input::placeholder,
.imm-form-wrap .forminator-ui textarea::placeholder { color: rgba(255,255,255,.38) !important; }

/* ── Forminator — row spacing ── */
#kontakt .forminator-ui .forminator-row { margin-bottom: 1.1rem !important; }

/* ── Forminator — submit button ── */
#kontakt .forminator-ui .forminator-button-submit,
#kontakt .forminator-ui button[type="submit"] {
  background: linear-gradient(105deg, var(--color-electric) 0%, #2558e8 100%) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: .73rem !important;
  font-weight: 500 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  padding: .9rem 2.5rem !important;
  cursor: pointer !important;
  width: 100% !important;
  box-shadow: 0 4px 22px rgba(27,110,245,.28) !important;
  transition: all .28s !important;
  margin-top: .5rem !important;
}
#kontakt .forminator-ui .forminator-button-submit:hover,
#kontakt .forminator-ui button[type="submit"]:hover {
  background: linear-gradient(105deg, var(--color-electric-dim) 0%, var(--color-electric) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 0 1px rgba(27,110,245,.45),
    0 0 32px rgba(27,110,245,.32),
    0 8px 22px rgba(27,110,245,.22) !important;
}

/* ── Forminator — validation ── */
#kontakt .forminator-ui .forminator-input.forminator-is_error,
#kontakt .forminator-ui .forminator-textarea.forminator-is_error {
  border-color: rgba(239,68,68,.5) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important;
}
#kontakt .forminator-ui .forminator-error-message,
#kontakt .forminator-ui .forminator-inline-message {
  color: rgba(239,68,68,.85) !important;
  font-size: .75rem !important;
  margin-top: .3rem !important;
}

/* ── Forminator — success response ── */
#kontakt .forminator-response-message.forminator-success {
  background: rgba(34,197,94,.09) !important;
  border: 1px solid rgba(34,197,94,.25) !important;
  border-radius: 8px !important;
  color: rgba(34,197,94,.92) !important;
  padding: 1rem 1.25rem !important;
}

/* ── Forminator — radio & checkbox ── */
#kontakt .forminator-ui .forminator-checkbox-label,
#kontakt .forminator-ui .forminator-radio-label {
  color: rgba(255,255,255,.55) !important;
  font-size: .85rem !important;
}

/* ── Forminator — select dropdown arrow ── */
#kontakt .forminator-ui .forminator-custom-select::after {
  border-top-color: rgba(255,255,255,.4) !important;
}

/* ── Forminator — remove white backgrounds injected inline ── */
#kontakt .forminator-ui .forminator-form-field { background: none !important; }
#kontakt .forminator-ui .forminator-pagination { background: none !important; }

/* ── Footer on dark ── */
.site-footer {
  background: #04090E;
  border-top-color: rgba(255,255,255,.06);
}

/* ── Stats strip responsive ── */
@media (max-width: 900px) {
  .stat-pill { padding: 1.75rem 2.5rem; }
}
@media (max-width: 640px) {
  .stats-strip { flex-wrap: wrap; }
  .stat-divider { display: none; }
  .stat-pill {
    flex: 1 1 50%;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
}

/* ═══════════════════════════════════════════════════════════════
   MID CTA SECTION — Din vision, vår kunskap
   ═══════════════════════════════════════════════════════════════ */

.mid-cta-section {
  position: relative;
  padding: 9rem 5rem;
  background: #070F18;
  text-align: center;
  overflow: hidden;
}

/* Giant ghost lettering behind the CTA */
.mid-cta-section::before {
  content: 'CROSSWIND';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 14rem);
  font-weight: 900;
  letter-spacing: -.06em;
  color: rgba(255,255,255,.025);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

/* Ambient glow orbs */
.mid-cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 15% 50%, rgba(27,110,245,.07) 0%, transparent 100%),
    radial-gradient(ellipse 50% 45% at 85% 50%, rgba(0,194,203,.05) 0%, transparent 100%);
  pointer-events: none;
}

.mid-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}

/* Service chips row */
.mid-cta-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.mid-cta-chips span {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.1);
  padding: .3rem .85rem;
  border-radius: 100px;
  transition: color .22s, border-color .22s;
}
.mid-cta-chips span:hover {
  color: var(--color-cyan);
  border-color: rgba(0,194,203,.35);
}

/* Main heading */
.mid-cta-heading {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 5.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: #fff;
  margin-bottom: 1.75rem;
}
.mid-cta-heading em {
  font-style: italic;
  background: linear-gradient(105deg, var(--color-electric) 0%, var(--color-cyan) 55%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sub copy */
.mid-cta-sub {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,.42);
  line-height: 1.85;
  max-width: 50ch;
  margin: 0 auto 2.75rem;
}

/* CTA buttons */
.mid-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.mid-cta-actions .btn-primary {
  padding: 1rem 2.5rem;
  font-size: .78rem;
}

@media (max-width: 768px) {
  .mid-cta-section { padding: 6rem 1.5rem; }
  .mid-cta-heading { font-size: clamp(2.5rem, 10vw, 4rem); }
  .mid-cta-sub     { font-size: .92rem; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK SUBPAGES — archive & single uppdrag
   ═══════════════════════════════════════════════════════════════ */

/* ── Archive ── */
.archive-uppdrag {
  background: #070F18;
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + 4rem);
}

.archive-header {
  padding: 0 5rem 3.5rem;
}
.archive-header .section-label   { color: var(--color-cyan); }
.archive-header .section-label::before { background: var(--color-cyan); }
.archive-header .cw-h2           { color: #fff; }
.archive-header .cw-h2 em        { color: var(--color-electric); }

/* Archive grid wrapper */
.archive-uppdrag > .uppdrag-grid {
  padding: 0 5rem 2rem;
  background: transparent;
}

/* Dark uppdrag cards (archive + front-page grid fallback) */
.archive-uppdrag .uppdrag-card,
.uppdrag-grid .uppdrag-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  transition: background .28s, border-color .28s, transform .28s;
}
.archive-uppdrag .uppdrag-card:hover,
.uppdrag-grid .uppdrag-card:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.13);
  transform: translateY(-3px);
}
.archive-uppdrag .uppdrag-card__img,
.uppdrag-grid .uppdrag-card__img {
  background-color: rgba(255,255,255,.04);
}
.archive-uppdrag .uppdrag-card__title a,
.uppdrag-grid .uppdrag-card__title a { color: #fff; }
.archive-uppdrag .uppdrag-card__title a:hover,
.uppdrag-grid .uppdrag-card__title a:hover { color: var(--color-electric); }
.archive-uppdrag .uppdrag-card__client,
.uppdrag-grid .uppdrag-card__client  { color: rgba(255,255,255,.55); }
.archive-uppdrag .uppdrag-tag,
.uppdrag-grid .uppdrag-tag {
  color: rgba(255,255,255,.62);
  border-color: rgba(255,255,255,.15);
}

/* Empty state */
.archive-empty { color: rgba(255,255,255,.35); padding: 0 5rem; }

/* Pagination */
.archive-uppdrag .nav-links {
  padding: 2rem 5rem 4rem;
  display: flex;
  gap: .5rem;
}
.archive-uppdrag .nav-links a,
.archive-uppdrag .nav-links span {
  font-size: .72rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  border: 1px solid rgba(255,255,255,.1);
  padding: .5rem 1rem;
  border-radius: 4px;
  transition: color .22s, border-color .22s;
}
.archive-uppdrag .nav-links a:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.archive-uppdrag .nav-links .current {
  color: #fff;
  border-color: var(--color-electric);
  background: rgba(27,110,245,.12);
}

/* ── Single project page ── */
.single-uppdrag {
  background: #070F18;
  min-height: 100vh;
  max-width: 900px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 4rem) 5rem 6rem;
}

.single-uppdrag__title  { color: #fff; }

.single-uppdrag__meta .uppdrag-tag {
  color: rgba(255,255,255,.62);
  border-color: rgba(255,255,255,.15);
}

.single-uppdrag__details {
  border-top-color:    rgba(255,255,255,.07);
  border-bottom-color: rgba(255,255,255,.07);
}
.single-uppdrag__detail-label { color: rgba(255,255,255,.50); }
.single-uppdrag__detail-value { color: rgba(255,255,255,.88); }

.single-uppdrag__visit-link {
  color: var(--color-electric) !important;
  border-bottom: 1px solid rgba(27,110,245,.3);
  padding-bottom: 1px;
  transition: color .22s, border-color .22s;
}
.single-uppdrag__visit-link:hover {
  color: var(--color-cyan) !important;
  border-color: rgba(0,194,203,.4);
}

.single-uppdrag__img {
  border-color: rgba(255,255,255,.07);
}

.single-uppdrag__content {
  color: rgba(255,255,255,.76);
}
.single-uppdrag__content p  { margin-bottom: 1.25rem; }
.single-uppdrag__content h2,
.single-uppdrag__content h3 { color: #fff; margin: 2rem 0 .75rem; }
.single-uppdrag__content a  { color: var(--color-electric); }

.single-uppdrag__back {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.07);
}

@media (max-width: 768px) {
  .archive-uppdrag > .uppdrag-grid,
  .archive-header,
  .archive-uppdrag .nav-links { padding-left: 1.5rem; padding-right: 1.5rem; }
  .single-uppdrag { padding: calc(var(--nav-height) + 2rem) 1.5rem 4rem; }
  .single-uppdrag__details { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO — BLUEPRINT GRID OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.hero-blueprint-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,194,203,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,194,203,.018) 1px, transparent 1px);
  background-size: 90px 90px;
  pointer-events: none;
  opacity: 0;
  animation: blueprint-emerge 2.4s ease 0.4s forwards;
  z-index: 0;
}

@keyframes blueprint-emerge {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO VISUAL — CORNER BRACKETS
   ═══════════════════════════════════════════════════════════════ */

.hero-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: rgba(0,194,203,.4);
  border-style: solid;
  border-width: 0;
  z-index: 5;
  opacity: 0;
  animation: corner-appear 0.6s ease forwards;
}

.hero-corner--tl { top: -10px; left: -10px; border-top-width: 1px; border-left-width: 1px; animation-delay: 1.25s; }
.hero-corner--tr { top: -10px; right: -10px; border-top-width: 1px; border-right-width: 1px; animation-delay: 1.35s; }
.hero-corner--bl { bottom: -10px; left: -10px; border-bottom-width: 1px; border-left-width: 1px; animation-delay: 1.45s; }
.hero-corner--br { bottom: -10px; right: -10px; border-bottom-width: 1px; border-right-width: 1px; animation-delay: 1.55s; }

@keyframes corner-appear {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Hide corner brackets on smaller screens */
@media (max-width: 1100px) {
  .hero-corner         { display: none; }
  .hero-blueprint-grid { background-size: 60px 60px; }
}

/* ═══════════════════════════════════════════════════════════════
   MYSTERY DIVIDER
   ═══════════════════════════════════════════════════════════════ */

.mystery-divider {
  background: #070F18;
  padding: 3.5rem 5rem;
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.mystery-divider__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 1360px;
  margin: 0 auto;
}

.md-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.07),
    rgba(0,194,203,.12),
    rgba(255,255,255,.07),
    transparent
  );
}

.md-glyph {
  font-size: .55rem;
  color: rgba(0,194,203,.3);
  flex-shrink: 0;
}

.md-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: .52rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.18);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .mystery-divider { padding: 2.5rem 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   WORKFLOW — Scroll-driven process section
   ═══════════════════════════════════════════════════════════════ */

.workflow-section {
  height: 400vh;
  background: #04090E;
  position: relative;
}

.workflow-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Giant ghosted step number */
.wf-bg-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(14rem, 28vw, 26rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  color: rgba(255,255,255,.022);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  transition: opacity .3s ease;
}

/* ── Individual step panels ── */
.wf-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--nav-height);
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .75s cubic-bezier(.4,0,.2,1), transform .75s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 1;
}

.wf-panel.is-above {
  transform: translateY(-48px);
}

.wf-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Inner max-width wrapper */
.wf-content {
  width: 100%;
  max-width: 1260px;
  padding: 0 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  align-items: center;
}

/* ── Text column ── */
.wf-eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.5rem;
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
}

.wf-eyebrow span {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-cyan);
}

.wf-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 1.75rem;
}

.wf-desc {
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.88;
  color: rgba(255,255,255,.4);
  max-width: 44ch;
}

/* ── Visual column ── */
.wf-panel__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-card {
  width: 100%;
  max-width: 400px;
  background: #0C1C2C;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0,0,0,.38),
    0 24px 72px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.03);
  transform: translateY(16px) scale(.97);
  transition: transform .75s cubic-bezier(.4,0,.2,1) .1s,
              box-shadow .75s ease .1s;
}

.wf-panel.is-active .wf-card {
  transform: translateY(0) scale(1);
  box-shadow:
    0 8px 32px rgba(0,0,0,.38),
    0 24px 72px rgba(0,0,0,.28),
    0 0 80px rgba(0,194,203,.07),
    0 0 0 1px rgba(255,255,255,.03);
}

.wf-card--dark { background: #060F18; }

/* Card top bar */
.wf-card__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: #091521;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.wf-card__bar--dark { background: #050E17; }

.wf-card__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wf-card__dot.r { background: #FF5F57; }
.wf-card__dot.y { background: #FEBC2E; }
.wf-card__dot.g { background: #28C840; }

.wf-card__title {
  margin-left: 8px;
  font-size: .55rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
  padding: 2px 8px;
  border-radius: 3px;
  flex: 1;
}

/* ── Live badge (step 04 card) ── */
.wf-live-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #22C55E;
  margin-left: auto;
}

.wf-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  animation: avail-pulse 2.8s ease-in-out infinite;
}

/* ── CARD CONTENT: Chat (Step 01) ── */
.wf-chat {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.wf-bubble {
  max-width: 82%;
  padding: .65rem .9rem;
  border-radius: 14px;
  font-size: .78rem;
  line-height: 1.5;
}

.wf-bubble span { color: rgba(255,255,255,.82); }

.wf-bubble--them {
  background: rgba(255,255,255,.07);
  border-radius: 14px 14px 14px 3px;
  align-self: flex-start;
}

.wf-bubble--us {
  background: rgba(27,110,245,.22);
  border: 1px solid rgba(27,110,245,.22);
  border-radius: 14px 14px 3px 14px;
  align-self: flex-end;
}

.wf-bubble--typing {
  background: rgba(255,255,255,.05);
  border-radius: 14px 14px 14px 3px;
  align-self: flex-start;
  padding: .7rem .9rem;
  display: flex;
  gap: 4px;
  align-items: center;
}

.wf-bubble--typing span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  animation: wf-typing 1.4s ease-in-out infinite;
}
.wf-bubble--typing span:nth-child(2) { animation-delay: .18s; }
.wf-bubble--typing span:nth-child(3) { animation-delay: .36s; }

@keyframes wf-typing {
  0%, 60%, 100% { transform: translateY(0);  opacity: .3; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* ── CARD CONTENT: Wireframe (Step 02) ── */
.wf-wireframe {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.wf-wf-hero {
  height: 60px;
  background: linear-gradient(135deg, rgba(27,110,245,.2) 0%, rgba(0,194,203,.12) 100%);
  border: 1px dashed rgba(27,110,245,.28);
  border-radius: 5px;
}

.wf-wf-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}

.wf-wf-row--2 { grid-template-columns: 1fr 1fr; }

.wf-wf-block {
  height: 36px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 4px;
}

.wf-wf-block--tall { height: 48px; }

.wf-wf-bar {
  height: 7px;
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 4px;
  width: 85%;
}
.wf-wf-bar--short { width: 58%; }

/* ── CARD CONTENT: Terminal (Step 03) ── */
.wf-terminal {
  padding: 1rem 1.15rem;
  background: #040D15;
  font-family: 'Courier New', Courier, monospace;
  font-size: .67rem;
  line-height: 1.95;
  display: flex;
  flex-direction: column;
}

.wf-term-line { display: flex; align-items: baseline; gap: .5rem; }
.wf-t-p { color: var(--color-cyan); flex-shrink: 0; }
.wf-t-c { color: rgba(255,255,255,.72); }

.wf-term-out {
  color: rgba(255,255,255,.32);
  padding-left: 1.1rem;
  font-size: .62rem;
}
.wf-term-out em { color: var(--color-cyan); font-style: normal; }

.wf-term-ok {
  color: #22C55E;
  padding-left: 1.1rem;
  font-size: .65rem;
}

.wf-t-cursor::after {
  content: '▋';
  color: var(--color-cyan);
  margin-left: 2px;
  animation: wf-blink 1s step-end infinite;
}

@keyframes wf-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── CARD CONTENT: Success (Step 04) ── */
.wf-success {
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}

.wf-success__check {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #22C55E;
}

.wf-success__label {
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.wf-success__metrics {
  display: flex;
  gap: 2rem;
}

.wf-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}

.wf-metric__val {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.wf-metric__key {
  font-size: .48rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}

.wf-success__cta {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-electric);
  border-bottom: 1px solid rgba(27,110,245,.3);
  padding-bottom: 1px;
  transition: color .22s, border-color .22s;
  text-decoration: none;
  margin-top: .25rem;
}

.wf-success__cta:hover {
  color: var(--color-cyan);
  border-color: rgba(0,194,203,.4);
}

/* ── Right step navigator ── */
.wf-nav {
  position: absolute;
  right: 3.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  z-index: 3;
}

.wf-nav__item {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.wf-nav__track {
  width: 2px;
  height: 32px;
  background: rgba(255,255,255,.07);
  border-radius: 1px;
  overflow: hidden;
  flex-shrink: 0;
}

.wf-nav__fill {
  width: 100%;
  height: 0%;
  background: var(--color-cyan);
  border-radius: 1px;
  transition: height .55s cubic-bezier(.4,0,.2,1);
}

.wf-nav__item.is-active .wf-nav__fill { height: 55%; background: var(--color-electric); }
.wf-nav__item.is-done   .wf-nav__fill { height: 100%; }

.wf-nav__label {
  font-size: .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.15);
  white-space: nowrap;
  transition: color .4s ease;
}

.wf-nav__item.is-active .wf-nav__label { color: rgba(255,255,255,.6); }
.wf-nav__item.is-done   .wf-nav__label { color: rgba(255,255,255,.28); }

/* ── Bottom progress ── */
.wf-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,.05);
  z-index: 3;
}

.wf-progress__fill {
  height: 100%;
  background: linear-gradient(to right, var(--color-electric), var(--color-cyan));
  transform-origin: left;
  transform: scaleX(0);
  will-change: transform;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .wf-nav         { right: 2rem; }
  .wf-content     { gap: 4rem; }
}

@media (max-width: 900px) {
  .workflow-section { height: 500vh; }
  .wf-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 0 2rem;
  }
  .wf-panel__visual { order: -1; }
  .wf-card          { max-width: 340px; margin: 0 auto; }
  .wf-nav           { display: none; }
  .wf-desc          { max-width: none; }
}

@media (max-width: 640px) {
  .workflow-section  { height: 500vh; }
  .wf-panel__visual  { display: none; }
  .wf-content        { padding: 0 1.5rem; }
  .wf-bg-num         { font-size: 12rem; }
}

/* ═══════════════════════════════════════════════════════════════
   IMMERSIVE FULLSCREEN EXPERIENCE
   ═══════════════════════════════════════════════════════════════ */

/* Hide legacy header on front page; footer is now minimal and shown */
.home .site-header { display: none !important; }

/* ── Minimal footer ── */
.site-footer {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 2.5rem 2rem;
  background: transparent;
  border-top: none;
  text-align: center;
}

.footer-min {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: .6rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}

.footer-min__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.footer-min__logo-img {
  max-width: 80px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .55;
  filter: brightness(10);
}

.footer-min__text {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.footer-min__sep { color: rgba(255,255,255,.25); }

/* Space background canvas */
#space-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Floating action buttons — bottom right ── */
.imm-float-btns {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}

.imm-float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(7,15,24,.65);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: rgba(255,255,255,.52);
  cursor: pointer;
  text-decoration: none;
  font-size: 0;
  box-shadow: 0 0 12px rgba(0,194,203,.09);
  transition: color .25s, border-color .25s, background .25s, box-shadow .25s;
  position: relative;
}

.imm-float-btn:hover {
  color: rgba(255,255,255,.92);
  border-color: rgba(0,194,203,.50);
  background: rgba(7,15,24,.9);
  box-shadow: 0 0 22px rgba(0,194,203,.22), 0 0 8px rgba(0,194,203,.12);
}

/* Sound icon toggle */
.imm-float-btn--sound .ico-off { display: none; }
.imm-float-btn--sound.is-muted .ico-on  { display: none; }
.imm-float-btn--sound.is-muted .ico-off { display: block; }

/* Pulsing hint on sound button */
.imm-float-btn--sound::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(0,194,203,.35);
  opacity: 0;
  animation: float-pulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
.imm-float-btn--sound.hint-pulse::after { opacity: 1; }

@keyframes float-pulse {
  0%, 100% { transform: scale(1);    opacity: .4; }
  50%       { transform: scale(1.18); opacity: 0; }
}

/* ── Immersive scroll container ── */
.imm-scroll {
  height: 600vh;
  position: relative;
  z-index: 1;
}

.imm-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Background step number */
.imm-bg-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(14rem, 30vw, 28rem);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: 1;
  color: rgba(255,255,255,.02);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  transition: opacity .25s ease;
}

/* Per-step ambient gradient */
.imm-bg-accent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: background 1s ease;
}

.imm-sticky[data-step="0"] .imm-bg-accent { background: none; }
.imm-sticky[data-step="1"] .imm-bg-accent { background: none; }
.imm-sticky[data-step="2"] .imm-bg-accent { background: none; }
.imm-sticky[data-step="3"] .imm-bg-accent { background: none; }

/* Transition scan line */
.imm-scan { display: none; }

/* ── Panel structure ── */
.imm-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 1;
  pointer-events: none;
}

.imm-panel.is-active { pointer-events: auto; }

.imm-inner {
  padding: 0 8vw;
  max-width: 760px;
}

/* ── Text animations ── */

/* Eyebrow */
.imm-eyebrow {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.75rem;
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  opacity: 0;
  transition: opacity .5s ease .05s;
}

.imm-panel.is-active .imm-eyebrow { opacity: 1; }

.imm-eyebrow__bar {
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--color-cyan);
  flex-shrink: 0;
  transition: width .65s cubic-bezier(.4,0,.2,1) .15s;
}
.imm-panel.is-active .imm-eyebrow__bar { width: 2.5rem; }

/* Heading words */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s cubic-bezier(.25,.46,.45,.94), transform 1s cubic-bezier(.25,.46,.45,.94);
  transition-delay: calc(var(--d, 0) * 100ms + 40ms);
}

.imm-panel.is-active .word {
  opacity: 1;
  transform: translateY(0);
}

.imm-panel.is-above .word {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
  transition-delay: 0s;
}

/* ── Golden timeline line ── */
.imm-line {
  position: absolute;
  left: clamp(1.8rem, 3.5vw, 3.2rem);
  top: 12vh;
  bottom: 12vh;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(196,158,80,.18) 8%,
    rgba(196,158,80,.18) 92%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

.imm-line__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(220,185,110,.0) 0%,
    rgba(220,185,110,.85) 25%,
    rgba(212,170,80,1)   100%
  );
  transform-origin: top;
  transform: scaleY(0);
  will-change: transform;
}

.imm-heading {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: clamp(5rem, 10vw, 11rem);
  font-weight: 100;
  line-height: 1.0;
  letter-spacing: .06em;
  color: #fff;
  margin-bottom: 0;
}

.imm-heading--sm {
  font-size: clamp(3rem, 5vw, 5.5rem);
  margin-bottom: 2.5rem;
}

/* Description */
.imm-desc {
  font-size: .96rem;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(255,255,255,.42);
  max-width: 46ch;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease .6s, transform .7s ease .6s;
}
.imm-panel.is-active .imm-desc  { opacity: 1; transform: translateY(0); }
.imm-panel.is-above  .imm-desc  { opacity: 0; transform: translateY(-10px); transition-delay: 0s; }

/* CTA (last panel) */
.imm-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 2.25rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-electric);
  padding: .85rem 1.85rem;
  border-radius: 2px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease .9s, transform .6s ease .9s, background .25s;
}
.imm-panel.is-active .imm-cta   { opacity: 1; transform: translateY(0); }
.imm-panel.is-above  .imm-cta   { opacity: 0; transform: translateY(-8px); transition-delay: 0s; }
.imm-cta:hover { background: var(--color-electric-dim); transform: translateY(-2px) !important; }

/* ── Contact panel ── */
.imm-panel--contact {
  align-items: flex-start;
  overflow-y: auto;
  padding-top: 0;
}

.imm-inner--contact {
  max-width: min(82vw, 1080px);
  padding-top: 12vh;
  padding-bottom: 4rem;
  width: 100%;
}

/* Two-column contact layout: form left, logo right */
.imm-contact-layout {
  display: flex;
  align-items: stretch;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.imm-contact-layout .imm-form-wrap {
  flex: 1;
  min-width: 0;
}

.imm-contact-logo {
  flex: 0 0 auto;
  width: clamp(140px, 22vw, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1s ease 1s;
}

.imm-panel.is-active .imm-contact-logo { opacity: 1; }
.imm-panel.is-above  .imm-contact-logo { opacity: 0; transition: opacity .03s ease; }

.imm-contact-logo__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 8px rgba(255,255,255,.22))
    drop-shadow(0 0 22px rgba(255,255,255,.08));
  animation: none;
}

.imm-panel.is-active .imm-contact-logo__img {
  animation: logo-glow-pulse 6s ease-in-out infinite;
}

@keyframes logo-glow-pulse {
  0%, 100% {
    filter:
      brightness(0) invert(1)
      drop-shadow(0 0 7px rgba(255,255,255,.20))
      drop-shadow(0 0 20px rgba(255,255,255,.07))
      drop-shadow(0 0 40px rgba(200,175,120,.06));
  }
  50% {
    filter:
      brightness(0) invert(1)
      drop-shadow(0 0 12px rgba(255,255,255,.30))
      drop-shadow(0 0 35px rgba(255,255,255,.12))
      drop-shadow(0 0 65px rgba(200,175,120,.09));
  }
}

@media (max-width: 768px) {
  .imm-contact-layout { flex-direction: column; }
  .imm-contact-logo   { width: 100%; max-height: 120px; }
}

/* ── Contact CTA text (ersätter logotyp) ── */
.imm-contact-cta {
  flex: 0 0 auto;
  width: clamp(140px, 22vw, 280px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .85s ease 1.1s, transform .85s ease 1.1s;
}

.imm-panel.is-active .imm-contact-cta {
  opacity: 1;
  transform: translateX(0);
}

.imm-panel.is-above .imm-contact-cta {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .05s ease, transform .05s ease;
}

.imm-contact-cta__lead {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  background: linear-gradient(135deg, var(--color-electric, #1B6EF5) 0%, var(--color-cyan, #00C2CB) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.imm-contact-cta__sub {
  font-family: 'Syne', sans-serif;
  font-size: clamp(.9rem, 1.3vw, 1.1rem);
  font-weight: 600;
  color: rgba(255,255,255,.48);
  margin: 0;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .imm-contact-cta {
    width: 100%;
    transform: translateY(16px);
  }
  .imm-panel.is-active .imm-contact-cta { transform: translateY(0); }
}

.imm-form-wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease .55s, transform .7s ease .55s;
}

.imm-panel.is-active .imm-form-wrap {
  opacity: 1;
  transform: translateY(0);
}

.imm-panel.is-above .imm-form-wrap {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .03s ease, transform .03s ease;
}

/* ── Dark form overrides (Forminator + generic) ── */
.imm-form-wrap,
.imm-form-wrap * {
  box-sizing: border-box;
}

.imm-form-wrap .forminator-custom-form,
.imm-form-wrap .forminator-ui {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.imm-form-wrap .forminator-row {
  margin-bottom: 1.25rem !important;
}

/* Labels */
.imm-form-wrap label,
.imm-form-wrap .forminator-label,
.imm-form-wrap .forminator-field--label {
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-size: .58rem !important;
  font-weight: 300 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important;
  margin-bottom: .5rem !important;
  display: block;
}

/* Inputs & textarea */
.imm-form-wrap input[type="text"],
.imm-form-wrap input[type="email"],
.imm-form-wrap input[type="tel"],
.imm-form-wrap input[type="number"],
.imm-form-wrap input[type="url"],
.imm-form-wrap textarea,
.imm-form-wrap select,
.imm-form-wrap .forminator-input,
.imm-form-wrap .forminator-textarea {
  width: 100% !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 3px !important;
  color: rgba(255,255,255,.82) !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-size: .88rem !important;
  font-weight: 200 !important;
  padding: .85rem 1rem !important;
  outline: none !important;
  transition: border-color .2s, background .2s !important;
  box-shadow: none !important;
  -webkit-appearance: none;
}

.imm-form-wrap input:focus,
.imm-form-wrap textarea:focus,
.imm-form-wrap select:focus,
.imm-form-wrap .forminator-input:focus,
.imm-form-wrap .forminator-textarea:focus {
  border-color: rgba(0,194,203,.35) !important;
  background: rgba(255,255,255,.05) !important;
}

.imm-form-wrap input::placeholder,
.imm-form-wrap textarea::placeholder {
  color: rgba(255,255,255,.16) !important;
}

/* Submit button */
.imm-form-wrap .forminator-button,
.imm-form-wrap button[type="submit"],
.imm-form-wrap input[type="submit"] {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 2px !important;
  color: rgba(255,255,255,.55) !important;
  font-family: 'Raleway', system-ui, sans-serif !important;
  font-size: .58rem !important;
  font-weight: 300 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  padding: .85rem 2.5rem !important;
  cursor: pointer !important;
  transition: border-color .25s, color .25s, box-shadow .25s !important;
  margin-top: .5rem !important;
  box-shadow: none !important;
}

.imm-form-wrap .forminator-button:hover,
.imm-form-wrap button[type="submit"]:hover,
.imm-form-wrap input[type="submit"]:hover {
  border-color: rgba(0,194,203,.45) !important;
  color: rgba(255,255,255,.9) !important;
  box-shadow: 0 0 20px rgba(0,194,203,.08) !important;
}

/* Form placeholder (no Forminator configured) */
.imm-form-wrap .form-placeholder-box {
  color: rgba(255,255,255,.25);
  font-size: .78rem;
  font-weight: 200;
  line-height: 1.8;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.imm-form-wrap .form-placeholder-box strong {
  color: rgba(255,255,255,.45);
  font-weight: 300;
}

/* ── Visual card ── */
.imm-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

.imm-card {
  width: 100%;
  max-width: 420px;
  background: #0C1C2C;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 32px 80px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.03);
  opacity: 0;
  transform: rotateY(22deg) rotateX(6deg) translateZ(-60px) scale(.9);
  transition:
    opacity   .85s cubic-bezier(.2,.8,.2,1) .25s,
    transform .85s cubic-bezier(.2,.8,.2,1) .25s,
    box-shadow .85s ease .25s;
}

.imm-panel.is-active .imm-card {
  opacity: 1;
  transform: rotateY(0deg) rotateX(0deg) translateZ(0) scale(1);
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 32px 80px rgba(0,0,0,.3),
    0 0 80px rgba(0,194,203,.08),
    0 0 0 1px rgba(255,255,255,.04);
}

.imm-panel.is-above .imm-card {
  opacity: 0;
  transform: rotateY(-12deg) rotateX(-4deg) translateZ(-40px) scale(.93);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: 0s;
}

.imm-card--dark { background: #060F18; }

/* Card bar */
.imm-card__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: #091521;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.imm-card__bar--dark { background: #040D15; }

.icd {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.icd.r { background: #FF5F57; }
.icd.y { background: #FEBC2E; }
.icd.g { background: #28C840; }

.imm-card__title {
  margin-left: 8px;
  font-size: .55rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
  padding: 2px 8px;
  border-radius: 3px;
  flex: 1;
}

/* Live badge */
.imm-live {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #22C55E;
  margin-left: auto;
  flex-shrink: 0;
}

.imm-live__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  animation: avail-pulse 2.8s ease-in-out infinite;
}

/* ── Chat card (Step 01) ── */
.imm-chat {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.imm-bubble {
  max-width: 84%;
  padding: .65rem .9rem;
  font-size: .78rem;
  line-height: 1.5;
}

.imm-bubble span { color: rgba(255,255,255,.82); }

.imm-bubble--them {
  background: rgba(255,255,255,.07);
  border-radius: 14px 14px 14px 3px;
  align-self: flex-start;
}

.imm-bubble--us {
  background: rgba(27,110,245,.22);
  border: 1px solid rgba(27,110,245,.2);
  border-radius: 14px 14px 3px 14px;
  align-self: flex-end;
}

.imm-bubble--typing {
  background: rgba(255,255,255,.05);
  border-radius: 14px 14px 14px 3px;
  align-self: flex-start;
  padding: .7rem .9rem;
  display: flex;
  gap: 4px;
  align-items: center;
}

.imm-bubble--typing span {
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  animation: wf-typing 1.4s ease-in-out infinite;
}
.imm-bubble--typing span:nth-child(2) { animation-delay: .18s; }
.imm-bubble--typing span:nth-child(3) { animation-delay: .36s; }

/* ── Wireframe card (Step 02) ── */
.imm-wireframe {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.imm-wf-hero {
  height: 60px;
  background: linear-gradient(135deg, rgba(27,110,245,.2) 0%, rgba(0,194,203,.12) 100%);
  border: 1px dashed rgba(27,110,245,.3);
  border-radius: 5px;
}

.imm-wf-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
}
.imm-wf-row--2 { grid-template-columns: 1fr 1fr; }

.imm-wf-block {
  height: 36px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 4px;
}
.imm-wf-block--t { height: 46px; }

.imm-wf-bar {
  height: 7px;
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 4px;
  width: 85%;
}
.imm-wf-bar--s { width: 57%; }

/* ── Terminal card (Step 03) ── */
.imm-terminal {
  padding: 1rem 1.15rem;
  background: #040D15;
  font-family: 'Courier New', Courier, monospace;
  font-size: .67rem;
  line-height: 1.95;
  display: flex;
  flex-direction: column;
}

.imm-t-line { display: flex; align-items: baseline; gap: .5rem; }
.imm-t-p { color: var(--color-cyan); flex-shrink: 0; }
.imm-t-c { color: rgba(255,255,255,.72); }

.imm-t-out {
  color: rgba(255,255,255,.3);
  padding-left: 1.1rem;
  font-size: .62rem;
}
.imm-t-out em { color: var(--color-cyan); font-style: normal; }

.imm-t-ok { color: #22C55E; padding-left: 1.1rem; font-size: .65rem; }

.imm-t-cursor::after {
  content: '▋';
  color: var(--color-cyan);
  margin-left: 2px;
  animation: wf-blink 1s step-end infinite;
}

/* ── Success card (Step 04) ── */
.imm-success {
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}

.imm-success__check {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #22C55E;
}

.imm-success__label {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.imm-success__metrics {
  display: flex;
  gap: 2rem;
}

.imm-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12rem;
}

.imm-metric__n {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.imm-metric__k {
  font-size: .47rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.26);
}

/* ── Step counter (bottom-left) ── */
.imm-counter {
  position: absolute;
  bottom: 2.5rem;
  left: calc(76px + 3rem);
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .22em;
  color: rgba(255,255,255,.18);
  z-index: 5;
}

#imm-cur {
  color: rgba(255,255,255,.55);
  font-weight: 600;
  transition: opacity .25s ease, transform .25s ease;
}

.imm-counter__div { color: rgba(255,255,255,.1); }

.imm-progress,
.imm-progress__fill { display: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .imm-scroll { height: 700vh; }
  .imm-inner  { padding: 0 2rem; }
  .imm-inner--contact { padding-top: 10vh; }
  .imm-counter { left: 1.5rem; }
  .imm-progress { left: 0; }
  .imm-float-btns { bottom: 1.25rem; right: 1.25rem; }
}

@media (max-width: 600px) {
  .imm-inner   { padding: 0 1.5rem; }
  .imm-heading { font-size: clamp(3rem, 13vw, 5rem); }
  .imm-heading--sm { font-size: clamp(2.2rem, 9vw, 3.5rem); }
}


/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO — archive-uppdrag + single-uppdrag
   ═══════════════════════════════════════════════════════════════ */

/* Hide header on portfolio pages */
.post-type-archive-uppdrag .site-header,
.single-uppdrag .site-header { display: none !important; }

/* ── Archive layout ── */
.archive-portfolio {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 15vh 8vw 10rem;
}

.portfolio-header { margin-bottom: 5rem; }

.portfolio-eyebrow {
  opacity: 1;
}
.portfolio-eyebrow .imm-eyebrow__bar { width: 2.5rem; }

.portfolio-heading {
  font-size: clamp(3.5rem, 8vw, 8rem);
  margin-top: 1.5rem;
}

/* ── Portfolio grid ── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

/* ── Card entrance animation ── */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.uppdrag-card-glass {
  animation: cardFadeUp .55s ease both;
}
.uppdrag-card-glass:nth-child(1) { animation-delay: .08s; }
.uppdrag-card-glass:nth-child(2) { animation-delay: .16s; }
.uppdrag-card-glass:nth-child(3) { animation-delay: .24s; }
.uppdrag-card-glass:nth-child(4) { animation-delay: .32s; }
.uppdrag-card-glass:nth-child(5) { animation-delay: .40s; }
.uppdrag-card-glass:nth-child(6) { animation-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  .uppdrag-card-glass { animation: none; }
}

/* ── Glass card ── */
.uppdrag-card-glass {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease, transform .35s ease;
}

.uppdrag-card-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,194,203,.04), transparent 70%);
  pointer-events: none;
}

.uppdrag-card-glass:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 0 80px rgba(0,194,203,.12);
  transform: translateY(-5px);
}

/* ── Logo glass pill ── */
.uppdrag-logo-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.4rem;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  text-decoration: none;
  align-self: flex-start;
  transition: background .25s, border-color .25s;
}

a.uppdrag-logo-glass:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(0,194,203,.3);
}

.uppdrag-logo-glass--lg {
  padding: 1rem 1.75rem;
}

.uppdrag-logo-glass--static { cursor: default; }

.uppdrag-logo-img {
  max-height: 28px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .68;
  display: block;
  transition: opacity .25s;
}

.uppdrag-logo-img--lg {
  max-height: 40px;
  max-width: 180px;
}

a.uppdrag-logo-glass:hover .uppdrag-logo-img { opacity: 1; }

.uppdrag-logo-name {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: .62rem;
  font-weight: 200;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* ── Card body ── */
.uppdrag-card-body {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  flex: 1;
}

.uppdrag-card-title {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 200;
  letter-spacing: .03em;
  line-height: 1.25;
  color: rgba(255,255,255,.88);
}

.uppdrag-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.uppdrag-card-title a:hover { color: #fff; }

.uppdrag-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.uppdrag-tag {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: .54rem;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .28rem .8rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.03);
}

.uppdrag-card-meta {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: .58rem;
  font-weight: 200;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
  margin-top: auto;
  padding-top: .5rem;
}

/* ── Single project ── */
.single-portfolio {
  position: relative;
  z-index: 1;
  padding: 15vh 8vw 10rem;
  max-width: 860px;
}

.single-portfolio__logo { margin-bottom: 3.5rem; }

.single-portfolio__title {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: clamp(2.8rem, 7vw, 7rem);
  font-weight: 100;
  letter-spacing: .03em;
  line-height: 1.04;
  color: #fff;
  margin-bottom: 2rem;
}

.single-portfolio__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 3.5rem;
}

.single-portfolio__details {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.single-portfolio__detail-label {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: .54rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  margin-bottom: .4rem;
}

.single-portfolio__detail-value {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 200;
  color: rgba(255,255,255,.72);
  text-decoration: none;
}

.single-portfolio__visit-link {
  color: rgba(0,194,203,.7);
  transition: color .2s;
}
.single-portfolio__visit-link:hover { color: rgba(0,194,203,1); }

.single-portfolio__image-wrap {
  margin-bottom: 4rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}

.single-portfolio__image {
  width: 100%;
  height: auto;
  display: block;
}

.single-portfolio__content {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.95;
  color: rgba(255,255,255,.5);
}

.single-portfolio__back {
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.05);
}

.single-portfolio__back a {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: .58rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  text-decoration: none;
  transition: color .25s;
}

.single-portfolio__back a:hover { color: rgba(255,255,255,.7); }

/* Empty state */
.portfolio-empty {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 200;
  color: rgba(255,255,255,.28);
  letter-spacing: .08em;
  padding: 5rem 0;
}

/* Responsive */
@media (max-width: 768px) {
  .archive-portfolio { padding: 12vh 1.5rem 6rem; }
  .portfolio-heading { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .portfolio-grid    { grid-template-columns: 1fr; gap: 1rem; }
  .single-portfolio  { padding: 12vh 1.5rem 6rem; }
  .single-portfolio__details { gap: 1.5rem; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBIL — Immersive-scroll responsiv polish
   ═══════════════════════════════════════════════════════════════ */

/* Kontaktpanelens inre scroll ska inte bubbla till sidan */
.imm-panel--contact {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── 768 px och nedåt ── */
@media (max-width: 768px) {

  /* Använd small-viewport-height så adressfältet i mobilwebbläsare inte
     klipper innehållet (iOS Safari, Chrome Android) */
  @supports (height: 100svh) {
    .imm-sticky { height: 100svh; }
  }

  /* Heading: något tyngre vikt för läsbarhet på pekskärm, bättre teckenstorlek */
  .imm-heading {
    font-size: clamp(3.5rem, 13.5vw, 5.5rem);
    font-weight: 200;
    letter-spacing: .05em;
  }
  .imm-heading--sm {
    font-size: clamp(2.4rem, 9.5vw, 4rem);
    font-weight: 200;
  }

  /* Flytta innehållet tydligt till höger om tidslinjelinjen (linje ≈ 1.8rem) */
  .imm-inner { padding: 0 2rem 0 3rem; }
  .imm-inner--contact {
    padding-left: 3rem;
    padding-right: 2rem;
    padding-top: 8vh;
    padding-bottom: 3rem;
  }

  /* Kontaktformulär: mindre padding, mer plats för fält */
  #kontakt .contact-form-centered {
    padding: 1.75rem 1.5rem;
    margin-top: 1.5rem;
    border-radius: 10px;
  }

  /* Flytande knappar: större tryckmål + respektera iPhone-notch */
  .imm-float-btns {
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
    right: 1rem;
    gap: .65rem;
  }
  .imm-float-btn { width: 44px; height: 44px; }

  /* Stegräknare: rensa notch + justera med vänster padding */
  .imm-counter {
    left: 3rem;
    bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
  }
}

/* ── 640 px och nedåt ── */
@media (max-width: 640px) {

  /* Göm den dekorativa tidslinjelinjen — undviker textöverlapp */
  .imm-line { display: none; }

  /* Med linjen gömd: normal padding */
  .imm-inner { padding: 0 1.5rem; }
  .imm-inner--contact {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 6vh;
    padding-bottom: 2.5rem;
  }

  /* Heading: tätt men fortfarande slagkraftigt */
  .imm-heading     { font-size: clamp(3rem, 13.5vw, 5rem); }
  .imm-heading--sm { font-size: clamp(2.2rem, 9vw, 3.5rem); }

  /* Stegräknare: matcha vänster padding */
  .imm-counter { left: 1.5rem; }

  /* Skicka-knappar: WCAG-godkänt tryckmål (min 48 px) */
  #kontakt .forminator-ui .forminator-button-submit,
  #kontakt .forminator-ui button[type="submit"],
  .imm-form-wrap .forminator-button,
  .imm-form-wrap button[type="submit"],
  .imm-form-wrap input[type="submit"] {
    min-height: 48px !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    font-size: .78rem !important;
  }
}

/* ── 480 px och nedåt ── */
@media (max-width: 480px) {

  /* Göm logotypen i kontaktpanelen — ger formuläret mer utrymme */
  .imm-contact-logo { display: none; }

  /* Ännu tätare formulärbox */
  #kontakt .contact-form-centered {
    padding: 1.25rem 1rem;
    border-radius: 8px;
    margin-top: 1rem;
  }

  /* Flytande knappar: kompaktare på allra minsta skärmar */
  .imm-float-btns { right: .75rem; gap: .5rem; }
  .imm-float-btn  { width: 40px; height: 40px; }

  /* Scroll-sektionens höjd: något kortare = mindre svep per steg */
  .imm-scroll { height: 580vh; }
}