/* AtLife – staging stylesheet.
   Tokens from docs/.../04_DESIGN_SYSTEM/tokens.css (unchanged values).
   FONT: Inter (OFL) is a staging fallback – replace --font-brand with AtLife's licensed font when supplied. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2-variations"), url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --atl-bg: #08090A;
  --atl-surface: #111315;
  --atl-text: #F2F0EB;
  --atl-text-muted: #B8B7B2;
  --atl-line: rgba(242,240,235,.38);
  --atl-line-soft: rgba(242,240,235,.14);
  --atl-warm: #B38A61;

  --font-brand: "AtLife Brand Font", "Inter", "Helvetica Neue", Arial, sans-serif;
  --weight-thin: 200;
  --weight-light: 300;
  --weight-regular: 400;

  --page-max: 1600px;
  --gutter: clamp(22px, 3.1vw, 56px);
  --section-space: clamp(72px, 9vw, 160px);
  --rail: clamp(150px, 12.5vw, 220px);
  --header-top: clamp(28px, 3.6vw, 56px);
  --rail-top: clamp(52px, 5.3vw, 80px);

  --hero-h1: clamp(3.1rem, 5.4vw, 6.2rem);
  --page-h1: clamp(2.8rem, 4.4vw, 5.0rem);
  --card-h2: clamp(1.7rem, 2.35vw, 2.8rem);
  --body: clamp(1rem, 1.05vw, 1.1rem);
  --nav: .82rem;
  --nav-tracking: .15em;

  --motion-fast: 180ms;
  --motion-standard: 240ms;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--atl-bg); color: var(--atl-text); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  background: var(--atl-bg); color: var(--atl-text);
  font-family: var(--font-brand); font-weight: var(--weight-light);
  font-size: var(--body); line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--atl-text); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 50;
  background: var(--atl-text); color: var(--atl-bg); padding: 12px 18px;
  font-size: var(--nav); letter-spacing: var(--nav-tracking); text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--header-top) var(--gutter) 0;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

/* The logo's top edge lines up with the top of the vertical rail line. */
.brand { display: inline-flex; flex-direction: column; line-height: .86; width: max-content; margin-top: calc(var(--rail-top) - var(--header-top)); }
.brand__logo { display: block; height: clamp(72px, 6.2vw, 110px); width: auto; }

.nav { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 28px); }
.nav a {
  position: relative; display: inline-flex; align-items: center; gap: 16px;
  min-height: 44px; padding: 0 2px;
  font-size: var(--nav); font-weight: var(--weight-regular);
  letter-spacing: var(--nav-tracking); text-transform: uppercase;
  color: var(--atl-text); opacity: .86; transition: opacity var(--motion-fast) ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: var(--atl-text); transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-standard) ease;
}
.nav a:hover { opacity: 1; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"]::after { background: var(--atl-line); }
.nav .arrow { width: 30px; height: 10px; flex: none; transition: transform var(--motion-standard) ease; }
.nav a:hover .arrow { transform: translateX(4px); }

/* ---------- Brand rail (vertical line) ---------- */
.rail-line {
  position: absolute; top: var(--rail-top); bottom: clamp(110px, 11vw, 170px);
  left: var(--rail); width: 1px; background: var(--atl-line);
}

/* ---------- Footer ---------- */
.site-footer {
  font-size: .875rem; line-height: 1.9; letter-spacing: .04em; color: var(--atl-text-muted);
}
.site-footer__legal { display: block; margin-top: .7em; }
.site-footer strong { font-weight: var(--weight-regular); letter-spacing: .12em; color: var(--atl-text); }

/* ---------- Hero (Start) ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.hero__media, .hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%;
}
.hero__media { z-index: -2; }
.hero::before { /* controlled overlay for text contrast */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(8,9,10,.62) 0%, rgba(8,9,10,.30) 38%, rgba(8,9,10,0) 62%),
    linear-gradient(0deg, rgba(8,9,10,.55) 0%, rgba(8,9,10,0) 30%),
    linear-gradient(180deg, rgba(8,9,10,.35) 0%, rgba(8,9,10,0) 18%);
}
/* Day -> dusk (Start) */
/* No slow zoom on the hero: Firefox renders a 14 s scale transition of these images with visible
   judder on the right side (lamp, branches), and the handoff never asked for one. */
.hero__media--dusk { z-index: -2; opacity: 0; transition: opacity 8s cubic-bezier(.45,0,.2,1); }
.hero.is-dusk .hero__media--dusk { opacity: 1; }
.hero__scrim-day { /* extra overlay so white type keeps AA contrast on the brighter day image */
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 1;
  background:
    linear-gradient(90deg, rgba(8,9,10,.40) 0%, rgba(8,9,10,.18) 40%, rgba(8,9,10,0) 60%),
    linear-gradient(180deg, rgba(8,9,10,.32) 0%, rgba(8,9,10,0) 20%);
  transition: opacity 8s cubic-bezier(.45,0,.2,1);
}
.hero.is-dusk .hero__scrim-day { opacity: 0; }
/* Clouds drift in the day image, then dissolve at dusk.
   .hero__sky is a masked copy of the day image sliding left under the dusk image; the mask
   (tools/build-hero.py) is eroded by the drift distance so no tree or roof shows in the sky,
   and the second mask hides the strip the shift leaves empty at the right edge. Keep -5% in sync with DRIFT.
   .hero__clear is the dusk sky with the clouds blurred away; it fades in after the light has turned. */
.hero__sky {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  -webkit-mask-image: url(/assets/img/hero-sky-mask.png), linear-gradient(to left, transparent 0, #000 8%);
          mask-image: url(/assets/img/hero-sky-mask.png), linear-gradient(to left, transparent 0, #000 8%);
  -webkit-mask-size: cover, 100% 100%; mask-size: cover, 100% 100%;
  -webkit-mask-position: 62% 60%, 0 0; mask-position: 62% 60%, 0 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero__drift { position: absolute; inset: 0; will-change: transform; animation: hero-drift 16s cubic-bezier(.25,.6,.35,1) forwards; }
.hero__sky img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%;
}
@keyframes hero-drift { to { transform: translate3d(-5%, 0, 0); } }
.hero__clear { opacity: 0; transition: opacity 9s cubic-bezier(.45,0,.2,1) 2.5s; }
.hero.is-dusk .hero__clear { opacity: 1; }

.hero__content {
  position: absolute; left: calc(var(--rail) + clamp(28px, 3vw, 48px)); right: var(--gutter);
  top: 44%;
}
.hero h1, .panel-hero .display {
  font-size: var(--hero-h1); font-weight: var(--weight-thin);
  line-height: 1.04; letter-spacing: -.02em; text-wrap: balance;
}
.hero h1 { position: relative; }
/* Out of flow so the approved heading position holds and the lede stays clear of the footer on short laptops. */
.hero__kicker {
  position: absolute; left: 0; bottom: 100%; margin-bottom: clamp(14px, 1.4vw, 22px); white-space: nowrap;
  font-size: var(--nav); font-weight: var(--weight-regular);
  letter-spacing: var(--nav-tracking); line-height: 1.4; text-transform: uppercase;
}
.rule { width: 50px; height: 1px; background: var(--atl-line); margin: clamp(26px, 2.6vw, 40px) 0; border: 0; }
.lede { font-size: var(--body); color: var(--atl-text); opacity: .9; max-width: 36ch; }
.hero .site-footer {
  position: absolute; left: var(--gutter); bottom: clamp(24px, 3vw, 40px);
}

/* ---------- Affärssegment ---------- */
.segments-page { display: grid; grid-template-columns: minmax(0, 41.5fr) repeat(3, minmax(0, 19.5fr)); min-height: 100svh; }
.panel-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 100svh; }
.panel-hero .hero__media img { object-position: 44% 60%; filter: brightness(.62) saturate(.9); }
.panel-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8,9,10,.35), rgba(8,9,10,0) 70%, rgba(8,9,10,.55)),
              linear-gradient(0deg, rgba(8,9,10,.6), rgba(8,9,10,0) 35%);
}
.panel-hero .display { font-size: clamp(2.4rem, 3.4vw, 4rem); }
.panel-hero__content { position: absolute; left: var(--gutter); right: var(--gutter); top: 42%; }
.panel-hero .site-footer { position: absolute; left: var(--gutter); bottom: clamp(24px, 3vw, 40px); }
.panel-hero .rail-line { left: calc(var(--gutter) + clamp(100px, 8vw, 140px)); bottom: auto; height: 28%; }

.segment {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(170px, 26vh, 300px) clamp(18px, 1.9vw, 34px) clamp(40px, 6vh, 100px);
  background: linear-gradient(180deg, #0d0f11 0%, var(--atl-bg) 100%);
  border-left: 1px solid var(--atl-line-soft);
  overflow: clip;
}
.segment__art {
  display: block; aspect-ratio: 540 / 440; width: 140%; max-width: none; margin-left: -20%;
  opacity: .9; transition: opacity var(--motion-standard) ease, transform 600ms ease;
}
.segment__art img { display: block; width: 100%; height: auto; }
.segment:hover .segment__art { opacity: 1; transform: translateY(-4px); }
/* Anchored under the art, not to the column bottom: the art is equally tall in every column, so the
   headings' first lines share a line however the body text wraps; min-height keeps the rules level too. */
.segment__body { padding-top: clamp(28px, 7.5vh, 80px); }
.segment h2 {
  font-size: clamp(1.5rem, 2.05vw, 2.5rem); font-weight: var(--weight-thin); line-height: 1.12;
  letter-spacing: .04em; text-transform: uppercase; text-wrap: balance;
  min-height: 2.24em;
}
.segment .rule { width: 28px; margin: 22px 0; }
.segment p { color: var(--atl-text-muted); line-height: 1.85; letter-spacing: .02em; max-width: 23ch; font-size: clamp(.92rem, .98vw, 1.02rem); }

/* ---------- Kontakt ---------- */
.contact-page { position: relative; min-height: 100svh; }
.contact-page .rail-line { left: var(--rail); bottom: clamp(150px, 12vw, 190px); }
.contact-main {
  max-width: var(--page-max);
  padding: clamp(170px, 22vh, 230px) var(--gutter) clamp(190px, 15vw, 240px) calc(var(--rail) + clamp(40px, 4.3vw, 66px));
}
.contact-main h1 { font-size: var(--page-h1); font-weight: var(--weight-thin); line-height: 1.05; letter-spacing: -.01em; }
.label {
  font-size: .9rem; font-weight: var(--weight-regular); letter-spacing: var(--nav-tracking);
  text-transform: uppercase; margin-bottom: 18px;
}
.contact-details { display: grid; grid-template-columns: repeat(2, max-content); gap: 24px clamp(48px, 9vw, 130px); }
.contact-details address { font-style: normal; font-size: 1.06rem; line-height: 1.9; letter-spacing: .04em; }
.contact-details address p + p { margin-top: 1.1em; }
.contact-details a, .person a { border-bottom: 1px solid transparent; transition: border-color var(--motion-fast) ease; display: inline-block; padding-block: 2px; }
.contact-details a:hover, .person a:hover { border-color: var(--atl-line); }
.divider { height: 1px; background: var(--atl-line); border: 0; margin: clamp(36px, 4.2vw, 64px) 0 clamp(28px, 2.6vw, 40px) calc(-1 * clamp(40px, 4.3vw, 66px)); }

.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 2.6vw, 44px); }
.person { container-type: inline-size; }
.person__inner { display: grid; grid-template-columns: clamp(110px, 44cqi, 230px) max-content; gap: clamp(14px, 5cqi, 24px); align-items: center; }
/* Too narrow for photo + unbroken e-mail side by side -> stack */
@container (max-width: 420px) {
  .person__inner { grid-template-columns: 1fr; gap: 18px; }
  .person__inner .person__photo { width: 180px; }
}
.person__photo {
  display: block; aspect-ratio: 3 / 4; width: 100%; overflow: hidden;
  background: var(--atl-surface);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.person h2 { font-size: .92rem; font-weight: var(--weight-regular); letter-spacing: var(--nav-tracking); text-transform: uppercase; margin-bottom: 18px; }
.person p { font-size: .875rem; letter-spacing: .05em; line-height: 1.6; }
.person p + p { margin-top: 10px; }
.person a, .contact-details a { white-space: nowrap; } /* e-mail/phone never break */
.contact-page .site-footer { position: absolute; left: var(--gutter); bottom: clamp(24px, 3vw, 40px); }

.text-link { border-bottom: 1px solid var(--atl-line); padding-block: 2px; transition: border-color var(--motion-fast) ease; }
.text-link:hover { border-color: var(--atl-text); }

/* ---------- Responsive ---------- */
@media (max-width: 1519px) and (min-width: 861px) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (max-width: 1279px) {
  .segments-page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel-hero { grid-column: 1 / -1; min-height: 78svh; }
  .segment { padding-top: clamp(48px, 6vw, 80px); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (max-width: 860px) {
  :root { --rail: 0px; }
  .rail-line { display: none; }
  .site-header { padding-top: 22px; }
  .brand { margin-top: 0; }
  .brand__logo { height: 63px; }
  .nav { gap: 6px; }
  .nav a { gap: 10px; font-size: .74rem; letter-spacing: .12em; }
  .nav .arrow { width: 22px; }
  .hero__content { left: var(--gutter); top: auto; bottom: 150px; }
  .hero::before {
    background: linear-gradient(0deg, rgba(8,9,10,.85) 0%, rgba(8,9,10,.25) 45%, rgba(8,9,10,.35) 100%);
  }
  .segments-page { grid-template-columns: 1fr; }
  .panel-hero { min-height: 88svh; }
  .panel-hero__content { top: auto; bottom: 150px; }
  .segment { border-left: 0; border-top: 1px solid var(--atl-line-soft); padding: 56px var(--gutter) 64px; }
  .segment__art { width: 100%; margin: 0; max-width: 460px; }
  .segment h2 { min-height: 0; }
  .contact-main { padding: 140px var(--gutter) 60px; }
  .contact-details { grid-template-columns: 1fr; }
  .divider { margin-left: 0; }
  .people { grid-template-columns: 1fr; }
  .contact-page .site-footer { position: static; padding: 0 var(--gutter) 36px; }
}
@media (max-width: 380px) {
  .nav a { letter-spacing: .08em; }
  .nav .arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}