:root {

  --navy: #071a2d;

  --navy-2: #0c2744;

  --ink: #0f172a;

  --muted: #5d6775;

  --paper: #ffffff;

  --mist: #f3f6f8;

  --line: #dce3e8;

  --sand: #c9a06b;

  --sand-soft: #efe1cf;

  --blue: #456d9b;

  --container-edge: clamp(1rem, 4vw, 3rem);

}


/* ========================================

   BASE

\======================================== */


html {

  scroll-behavior: smooth;

}


#om,

#bolag,

#struktur,

#kontakt {

  scroll-margin-top: 110px;

}


body {

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  color: var(--ink);

  background: var(--paper);

  -webkit-font-smoothing: antialiased;

}


a {

  color: inherit;

}


/* ========================================

   NAVBAR

\======================================== */


.navbar-logo {
  height: 70px;
  width: auto;
  display: block;
}


.site-header {
  transition: background-color .25s ease, box-shadow .25s ease;
  background: rgba(7, 26, 45, .70);
  backdrop-filter: blur(14px);
}


.site-header.scrolled {

  box-shadow: 0 10px 35px rgba(3, 12, 22, .13);

}


.navbar {

  min-height: 150px;

}


.brand-wordmark {

  letter-spacing: .38em;

  font-weight: 600;

  font-size: .98rem;

}


.nav-link {

  color: rgba(255, 255, 255, .82) !important;

  font-size: .96rem;

  position: relative;

}


.nav-link::after {

  content: "";

  position: absolute;

  left: .5rem;

  right: .5rem;

  bottom: .25rem;

  height: 1px;

  background: var(--sand);

  transform: scaleX(0);

  transition: transform .2s ease;

}


.nav-link:hover::after,

.nav-link.active::after {

  transform: scaleX(1);

}


/* ========================================

   HERO

\======================================== */


.hero {

  min-height: 760px;

  color: white;

  position: relative;

  overflow: hidden;

  isolation: isolate;

  background:

    radial-gradient(circle at 65% 75%, rgba(111, 147, 185, .22), transparent 25%),

    linear-gradient(120deg, #071a2b 0%, #0b263f 52%, #071a2b 100%);

}


/* Subtilt grid + geometriska diagonaler */

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;


  background-image:

    linear-gradient(

      28deg,

      transparent 0 47%,

      rgba(201, 160, 107, .07) 47.08%,

      rgba(201, 160, 107, .07) 47.18%,

      transparent 47.28%

    ),

    linear-gradient(

      152deg,

      transparent 0 68%,

      rgba(143, 176, 216, .04) 68.08%,

      rgba(143, 176, 216, .04) 68.18%,

      transparent 68.28%

    ),

    linear-gradient(

      rgba(255, 255, 255, .025) 1px,

      transparent 1px

    ),

    linear-gradient(

      90deg,

      rgba(255, 255, 255, .025) 1px,

      transparent 1px

    );


  background-size:

    100% 100%,

    100% 100%,

    84px 84px,

    84px 84px;


  -webkit-mask-image: linear-gradient(to left, black, transparent 70%);

  mask-image: linear-gradient(to left, black, transparent 70%);

}


.min-vh-75 {

  min-height: 75vh;

}


.hero-content {

  position: relative;

  z-index: 2;

}


.hero h1 {

  font-weight: 400;

  letter-spacing: -.045em;

}


.hero-copy {

  max-width: 610px;

  line-height: 1.75;

  color: rgba(255,255,255,.88);

}


.eyebrow {

  color: #315f94;

  font-size: .73rem;

  letter-spacing: .05em;

  font-weight: 600;

}


.text-sand {

  color: var(--sand);

}


.btn-outline-sand {

  border: 1px solid rgba(201,160,107,.85);

  color: white;

  font-size: .85rem;

}


.btn-outline-sand:hover {

  background: var(--sand);

  color: var(--navy);

  border-color: var(--sand);

}


.hero-art {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 1;

  overflow: hidden;

}


.hero-building-art {

  position: absolute;

  right: 0;

  bottom: -70px;


  height: 746px;

  width: auto;


  max-height: 100%;

  max-width: none;


  display: block;

}


/* ========================================

   GENERELLA SEKTIONER

\======================================== */


.section-space {

  padding: 110px 0;

}


.section-title {

  font-weight: 400;

  letter-spacing: -.03em;

  font-size: clamp(2rem, 3.4vw, 3.5rem);

}


.body-copy {

  font-size: 1rem;

  line-height: 1.9;

  color: #303946;

}


.border-start-lg {

  border-left: 1px solid var(--line);

}


/* ========================================

   DEKORATIV KLONDIKE-SYMBOL

\======================================== */


.orbital-art {

  position: absolute;

  right: -400px;

  top: -130px;

width: 1000px;

  height: 1000px;

  opacity: .65;

  pointer-events: none;

}


.orbital-symbol {

  width: 100%;

  height: 100%;

  display: block;

  overflow: visible;


  fill: none;

  stroke: var(--sand-soft);

  stroke-width: .7;

  stroke-linecap: round;

  stroke-linejoin: round;

}


.orbital-symbol circle {

  fill: transparent;

  stroke: var(--sand-soft);

}


/* ========================================

   VÅRA BOLAG

\======================================== */


.company-logo {

  height: 68px;

  display: flex;

  align-items: center;

  justify-content: center;

}


.company-logo img {

  max-width: 250px;

  max-height: 55px;

  width: auto;

  height: auto;

  object-fit: contain;

}


.companies-section {

  background: linear-gradient(180deg, #eef3f7 0%, #f8fafb 100%);

}


.company-card {

  background: rgba(255,255,255,.92);

  padding: 34px;

  border: 1px solid #dfe5e9;

  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;

}


.company-card:hover {

  transform: translateY(-7px);

  box-shadow: 0 24px 55px rgba(25,45,64,.1);

  border-color: #c9d3dc;

}


.company-card h3 {

  font-size: 1.45rem;

  letter-spacing: -.025em;

  margin-bottom: .35rem;

}


.company-card p {

  min-height: 76px;

  color: #3f4a58;

  line-height: 1.65;

  font-size: .9rem;

}


.company-type {

  color: #bb8950;

  font-size: .72rem;

  font-weight: 600;

  letter-spacing: .06em;

  margin-bottom: 1rem;

}


.accent-rule {

  width: 22px;

  height: 2px;

  background: var(--sand);

  margin-bottom: 14px;

}


.card-link {

  text-decoration: none;

  font-size: .84rem;

  font-weight: 600;

}


.card-link span {

  color: var(--sand);

  font-size: 1.8rem;

  margin-left: 18px;

  position: relative;

  top: 5px;

  transition: margin-left .2s ease;

}


.card-link:hover span {

  margin-left: 24px;

}


/* ========================================

   KONCERNSTRUKTUR

\======================================== */


.structure-section {

  background: #fff;

  position: relative;

  overflow: hidden;

}


.group-tree {

  position: relative;

  max-width: 1100px;

  margin: 0 auto;

  padding-top: 10px;

}


.parent-company-clean {

  text-align: center;

  position: relative;

  z-index: 2;

  margin-bottom: 180px;

}


.structure-logo {

  width: 300px;

  max-width: 80%;

  height: auto;

  display: block;

  margin: 0 auto 12px;

}


.parent-label {

  color: var(--sand);

  font-size: .72rem;

  font-weight: 500;

  letter-spacing: .16em;

  position: relative;

  top: -15px;

}


.structure-connectors {

  position: absolute;

  top: 125px;

  left: 0;

  right: 0;

  height: 150px;

  pointer-events: none;

}


.connector-vertical {

  position: absolute;

  left: 50%;

  top: 0;

  width: 1px;

  height: 90px;

  background: #b8c5cf;

  transform: translateX(-50%);

}


.connector-horizontal {

  position: absolute;

  left: 16.666%;

  right: 16.666%;

  top: 90px;

  height: 1px;

  background: #b8c5cf;

}


.connector-horizontal::before,

.connector-horizontal::after {

  content: "";

  position: absolute;

  top: 0;

  width: 1px;

  height: 42px;

  background: #b8c5cf;

}


.connector-horizontal::before {

  left: 0;

}


.connector-horizontal::after {

  right: 0;

}


.structure-connectors::after {

  content: "";

  position: absolute;

  left: 50%;

  top: 90px;

  width: 1px;

  height: 42px;

  background: #b8c5cf;

  transform: translateX(-50%);

}


.connector-node {

  position: absolute;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--sand);

  transform: translate(-50%, -50%);

}


.node-center {

  left: 50%;

  top: 90px;

}


.node-left {

  left: 16.666%;

  top: 132px;

}


.node-middle {

  left: 50%;

  top: 132px;

}


.node-right {

  left: 83.333%;

  top: 132px;

}


.structure-companies {

  text-align: center;

  margin-top: -18px;

}


.structure-company {

  padding: 0 20px;

}


.structure-company h3 {

  margin: 0 0 10px;

  color: var(--navy);

  font-size: 1.35rem;

  font-weight: 500;

  letter-spacing: -.025em;

}


.structure-category {

  color: var(--sand);

  font-size: .72rem;

  font-weight: 500;

  letter-spacing: .12em;

}


/* ========================================

   KONTAKT

\======================================== */


.contact-section {

  background: #f4efe9;

}


.contact-section h2 {

  font-size: 0.8rem;

  line-height: 1.5;

  font-weight: 400;

}


.contact-grid {

  border-left: 1px solid #cfd7dd;

}


.contact-item {

  min-height: 105px;

  padding: 12px 28px;

  display: flex;

  gap: 18px;

  border-right: 1px solid #cfd7dd;

}


.contact-symbol {

  font-size: 1.5rem;

  color: var(--navy-2);

  line-height: 1;

}


.contact-item small {

  font-size: .74rem;

}


.contact-item p {

  margin: .55rem 0 0;

  font-size: .82rem;

  line-height: 1.6;

}


.contact-item a {

  text-decoration: none;

}


/* ========================================

   FOOTER

\======================================== */


.site-footer {

  background: var(--navy);

  color: rgba(255,255,255,.78);

  font-size: .76rem;

}


.site-footer .brand-wordmark {

  color: white;

}


/* ========================================

   TABLET

\======================================== */


@media (max-width: 991.98px) {

  .site-header {
    background: rgba(7,26,45,.96);
  }

  .navbar-collapse {
    padding: .8rem 0 1.1rem;
  }

  .nav-link {
    padding: .7rem 0;
  }

  .hero {
    min-height: 690px;
  }


  .hero-art {

    width: min(64vw, 700px);

    right: -120px;

    top: 150px;

  }


  .border-start-lg {

    border-left: 0;

    padding-left: calc(var(--bs-gutter-x) * .5) !important;

  }


  .orbital-art {

    opacity: .35;

  }

}


/* ========================================

   MOBIL

\======================================== */


@media (max-width: 767.98px) {


  .section-space {

    padding: 80px 0;

  }

  .navbar-logo {
    height: 100px;
  }

  .navbar {
    min-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
  }


  /* Mobilhero: egen bakgrundsbild, utan desktopbild/overlays */
  .hero {
    min-height: 650px;
    position: relative;
    overflow: hidden;

    background:
      linear-gradient(
        rgba(7, 26, 45, .10),
        rgba(7, 26, 45, .10)
      ),
      url("../img/hero-mobile-bg.png") 58% center / cover no-repeat;
  }

  /* Dölj desktopbilden i mobil */
  .hero-art {
    display: none;
  }

  /* Desktopens grid/diagonaler ska inte ligga ovanpå mobilbilden */
  .hero::before,
  .hero::after {
    display: none;
  }

  .hero-content {
    position: relative;
    z-index: 2;
  }

  .hero-copy {
    font-size: 1rem;
    max-width: 92%;
  }
.company-card p {

    min-height: auto;

  }


  .group-tree {

    padding-top: 0;

  }


  .parent-company-clean {

    margin-bottom: 38px;

  }


  .structure-logo {

    width: 250px;

    max-width: 88%;

  }


  .structure-connectors {

    display: none;

  }


  .structure-companies {

    margin-top: 0;

    row-gap: 0;

  }


  .structure-company {

    padding: 26px 0;

    border-top: 1px solid var(--line);

  }


  .structure-company h3 {

    font-size: 1.25rem;

  }


  .contact-grid {

    border-left: 0;

  }


  .contact-item {

    border-right: 0;

    border-top: 1px solid #cfd7dd;

    min-height: auto;

    padding: 20px 0;

  }


  .contact-item:last-child {

    border-bottom: 1px solid #cfd7dd;

  }

}


/* ========================================

   REDUCERAD RÖRELSE

\======================================== */


@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,

  *::before,
  *::after {
    transition-duration: .01ms !important;

  }

}