/* Nordic Extern - ny visuell nivå (2026-10-05).
   Gemensam för startsidan och Kraftallians-sidan. Laddas efter /styles.css.
   Inga skript: webbplatsens säkerhetspolicy tillåter inte JavaScript, så all rörelse är ren CSS.
   Besökare som valt "minska rörelse" får sidan helt utan animationer. */

:root {
  --ink: #171514;
  --on-ink: #f3f2f2;
  --on-ink-muted: rgba(243, 242, 242, .74);
  --on-ink-line: rgba(243, 242, 242, .16);
  --accent-on-ink: #f4573c; /* röd text på mörk botten: 5,4:1 */
  --line: rgba(32, 30, 29, .14);
  --card: #f8f7f7;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 64px;
}

html { scroll-padding-top: var(--header-h); }

/* ---------- Sidhuvud: fast överst, mörkt och lätt genomskinligt ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(23, 21, 20, .88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--on-ink-line);
}
.site-header .nav { background: transparent; min-height: var(--header-h); max-width: 1320px; margin: 0 auto; }
.site-header .nav-brand { color: var(--on-ink); display: inline-flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.site-header .nav-brand::before { content: ""; width: 10px; height: 10px; background: var(--accent); }
.site-header .nav-links { gap: 22px; }
.site-header .nav-links a { position: relative; padding: 6px 0; color: var(--on-ink-muted); transition: color .3s var(--ease); }
.site-header .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-on-ink); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.site-header .nav-links a:hover { color: var(--on-ink); }
.site-header .nav-links a:hover::after,
.site-header .nav-links a:focus-visible::after { transform: scaleX(1); }
.site-header .btn-primary { padding: 9px 16px; }
.site-header .burger i { background: var(--on-ink); }
.site-header .nav-panel { background: var(--ink); border-top: 1px solid var(--on-ink-line); border-bottom: 1px solid var(--on-ink-line); }
.site-header .nav-panel a:not(.btn) { color: var(--on-ink); }
.site-header .nav-panel a:not(.btn) + a:not(.btn) { border-top: 1px solid var(--on-ink-line); }
.site-header :focus-visible, .dark :focus-visible, .hero :focus-visible { outline-color: var(--on-ink); }

/* ---------- Hero: helsidesbild med rubriken ovanpå ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  display: flex; align-items: flex-end;
  padding: 0; background: var(--ink); color: var(--on-ink);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(23, 21, 20, .62) 0%, rgba(23, 21, 20, .34) 32%, rgba(23, 21, 20, .80) 70%, rgba(23, 21, 20, .95) 100%),
    linear-gradient(90deg, rgba(23, 21, 20, .55) 0%, rgba(23, 21, 20, 0) 65%);
}
.hero-inner { width: 100%; padding-top: clamp(72px, 13vh, 150px); padding-bottom: clamp(44px, 8vh, 96px); }
.hero h1 { color: var(--on-ink); font-size: clamp(42px, min(8vw, 13.5vh), 116px); max-width: none; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero h1 .line > span { display: block; }
.hero h1 .accent { color: var(--accent); }

.hero-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px clamp(32px, 6vw, 96px);
  margin-top: clamp(32px, 5vh, 64px); padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--on-ink-line);
}
.hero .lead-title { color: var(--on-ink); max-width: 20ch; }
.hero .lead { color: var(--on-ink-muted); margin-top: 0; max-width: 50ch; }
.hero .tagline { color: var(--on-ink); }
.hero-cta { margin-top: 30px; font-size: 16px; padding: 14px 22px; gap: 12px; }
.hero-cta::after { content: "→"; font-weight: 400; transition: transform .35s var(--ease); }
.hero-cta:hover::after { transform: translateX(4px); }
@media (max-width: 860px) {
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(36px, 12.5vw, 60px); }
}

/* ---------- Gemensamt för sektionerna ---------- */
.section-title {
  font-size: clamp(30px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.03em;
  margin: 0 0 clamp(36px, 6vh, 64px) -0.04em; max-width: 18ch;
}
.section-title::before { content: ""; display: block; width: 28px; height: 4px; background: var(--accent); margin: 0 0 22px 0.04em; }
.dark { background: var(--ink); color: var(--on-ink); }
.dark .eyebrow { color: var(--accent-on-ink); }
.dark .body-text { color: var(--on-ink-muted); }
.hero .eyebrow { color: var(--accent-on-ink); }
.eyebrow + .section-title::before { display: none; }

/* ---------- När bolag hör av sig: fyra kort ---------- */
.situations { padding: clamp(80px, 13vh, 160px) 0 clamp(40px, 7vh, 90px); }
.situations .sit-grid { gap: clamp(16px, 2vw, 24px); }
.sit-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  padding: clamp(28px, 3.2vw, 44px);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
}
.sit-card::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 28px; height: 3px;
  background: var(--accent); transition: width .5s var(--ease);
}
.sit-card p { margin-top: 20px; }
@supports (grid-template-rows: subgrid) {
  .sit-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 20px; }
  .sit-card p { margin-top: 0; }
}
@media (hover: hover) {
  .sit-card:hover {
    transform: translateY(-6px); background: #fff;
    border-color: rgba(32, 30, 29, .26);
    box-shadow: 0 30px 60px -38px rgba(32, 30, 29, .5);
  }
  .sit-card:hover::before { width: calc(100% + 2px); }
}
@media (max-width: 780px) {
  .sit-card { display: block; grid-row: auto; }
  .sit-card p { margin-top: 16px; }
}

/* ---------- Uppdrag: rutnät med stora röda siffror ---------- */
.services { padding: clamp(56px, 10vh, 130px) 0 clamp(80px, 13vh, 160px); }
.svc-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.svc-grid .svc {
  display: block; margin: 0; background: var(--bg);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 40px) clamp(36px, 4vw, 56px);
  transition: background-color .45s var(--ease);
}
.svc-grid .svc .num {
  display: block; margin: 0 0 clamp(28px, 4vw, 52px);
  font-size: clamp(56px, 6vw, 92px); line-height: .9; letter-spacing: -0.045em;
  color: var(--accent); transition: transform .5s var(--ease);
}
.svc-grid .svc h3 { max-width: 16ch; font-size: clamp(22px, 2.2vw, 30px); }
.svc-grid .svc p { margin-top: 16px; max-width: 42ch; font-size: 15.5px; line-height: 27px; }
@media (hover: hover) {
  .svc-grid .svc:hover { background: #fff; }
  .svc-grid .svc:hover .num { transform: translateX(6px); }
}
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-grid .svc .num { font-size: 56px; margin-bottom: 24px; }
}

/* ---------- Arbetssätt: mörk sektion. Tidslinjen (.timeline) används även på Kraftallians-sidan ---------- */
.method { margin-top: 0; }
.method h2 { color: var(--on-ink); }
.method img { min-height: clamp(320px, 72vh, 760px); }
@media (max-width: 700px) { .method img { min-height: 0; height: clamp(240px, 62vw, 380px); } }
.method .steps { margin-top: 44px; max-width: 48ch; }
.timeline li {
  display: block; position: relative; border: 0;
  padding: 0 0 34px 46px; view-timeline: --step block;
}
/* Svag grundlinje mellan stegen, som den röda linjen ritas ovanpå */
.timeline li:not(:last-child) {
  background: linear-gradient(var(--on-ink-line), var(--on-ink-line)) 7px 24px / 2px calc(100% - 24px) no-repeat;
}
.timeline li:last-child { padding-bottom: 0; border: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid var(--accent-on-ink); background: var(--accent-on-ink);
}
.timeline li:not(:last-child)::after {
  content: ""; position: absolute; left: 7px; top: 24px; bottom: 0; width: 2px;
  background: var(--accent-on-ink); transform-origin: top;
}
.timeline .step-num { display: block; padding: 0; margin-bottom: 6px; font-size: 13px; letter-spacing: .16em; color: var(--accent-on-ink); }
.timeline h3 { color: var(--on-ink); font-size: 20px; }
.timeline p { color: var(--on-ink-muted); margin-top: 6px; }

/* ---------- Person: större typografi och löftet i fokus ---------- */
.two-col {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 36px clamp(32px, 6vw, 96px); align-items: start;
}
.two-col > .head { position: sticky; top: calc(var(--header-h) + 40px); }
@media (max-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .two-col > .head { position: static; }
}
.person { padding: clamp(88px, 14vh, 170px) 0 clamp(64px, 10vh, 120px); }
.person-name { font-size: clamp(40px, 5.6vw, 84px); line-height: 1; letter-spacing: -0.035em; max-width: 9ch; }
.person-role { font-size: 16px; margin-top: 18px; }
.promise {
  font-weight: 800; font-size: clamp(24px, 2.7vw, 38px); line-height: 1.16; letter-spacing: -0.022em;
  color: var(--text); max-width: 22ch; text-wrap: balance;
  border-left: 4px solid var(--accent); padding: 4px 0 4px clamp(20px, 2.4vw, 32px);
  margin-bottom: clamp(36px, 5vh, 56px);
}
.person .body-text { font-size: 17px; line-height: 30px; max-width: 54ch; }
.person .body-text + .body-text { margin-top: 22px; }

/* ---------- Om oss ---------- */
.about { padding: clamp(64px, 11vh, 130px) 0 clamp(72px, 12vh, 140px); border-top: 1px solid var(--line); }
.about h2 { margin-left: -0.04em; max-width: 12ch; }
.about .body-text { font-size: 17px; line-height: 30px; max-width: 54ch; }
.about .body-text + .body-text { margin-top: 22px; }
.about .refs { border-top: 1px solid var(--line); max-width: 54ch; }

/* ---------- Kontakt: mörkt avslut ---------- */
.contact-band { padding: clamp(80px, 14vh, 170px) 0 clamp(72px, 12vh, 150px); }
.contact-band .contact { border: 0; padding: 0; }
.contact-band .eyebrow { margin-bottom: 26px; }
.contact-band h2 { color: var(--on-ink); font-size: clamp(44px, 8.4vw, 128px); line-height: .96; letter-spacing: -0.04em; max-width: none; }
.contact-band h2 .accent { color: var(--accent); }
.contact-band .contact-row { margin-top: clamp(40px, 7vh, 80px); padding-top: clamp(28px, 4vh, 40px); border-top: 1px solid var(--on-ink-line); }
.contact-band .contact-row .body-text { font-size: 17px; }
.contact-band .mail {
  color: var(--on-ink); border: 0; padding-bottom: 10px;
  font-size: clamp(22px, 3.2vw, 44px);
  background: linear-gradient(var(--accent-on-ink), var(--accent-on-ink)) left bottom / 100% 2px no-repeat;
  transition: background-size .45s var(--ease), color .3s var(--ease);
}
.contact-band .mail:hover { color: var(--accent-on-ink); background-size: 100% 4px; }

/* ---------- Specialistverksamhet och Kraftallians ---------- */
.specialist-row { padding: clamp(56px, 9vh, 100px) 0 clamp(48px, 8vh, 88px); gap: clamp(16px, 2vw, 24px); column-gap: clamp(16px, 2vw, 24px); }
.specialist-row .specialist {
  border: 1px solid var(--line); background: var(--card);
  padding: clamp(28px, 3vw, 40px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
}
@media (hover: hover) {
  .specialist-row .specialist:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 30px 60px -40px rgba(32, 30, 29, .5); }
}
.footer { border-top: 1px solid var(--line); }

/* ---------- Rörelse ---------- */
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes reveal { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
@keyframes num-in { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 30%; } to { opacity: 1; clip-path: inset(0 0 0 0); translate: 0 0; } }
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dot-on { from { background-color: var(--ink); } to { background-color: var(--accent-on-ink); } }

@media (prefers-reduced-motion: no-preference) {
  /* Vid sidladdning: rubriken tonar fram rad för rad och bilden rör sig långsamt */
  .hero-media img { animation: drift 24s var(--ease) both; }
  .hero h1 .line > span { animation: line-up 1s var(--ease) both; }
  .hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
  .hero h1 .line:nth-child(3) > span { animation-delay: .24s; }
  .hero-foot { animation: fade-up .9s .55s var(--ease) both; }

  /* När man scrollar: bara i webbläsare som stöder scrollstyrda animationer.
     Övriga visar allt direkt, utan rörelse. */
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .svc-grid .svc .num { animation: num-in linear both; animation-timeline: view(); animation-range: entry 20% entry 100%; }
    .timeline li::before { animation: dot-on linear both; animation-timeline: --step; animation-range: entry 70% cover 45%; }
    .timeline li:not(:last-child)::after { animation: draw linear both; animation-timeline: --step; animation-range: entry 90% cover 50%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sit-card, .svc-grid .svc, .svc-grid .svc .num, .specialist-row .specialist,
  .site-header .nav-links a::after, .hero-cta::after, .contact-band .mail { transition: none; }
  .sit-card:hover, .specialist-row .specialist:hover { transform: none; }
}

/* ---------- Vilka du arbetar med: teamet först, Aros som ett exempel (2026-10-05) ---------- */
.person-title { font-size: clamp(32px, 4.4vw, 60px); max-width: 12ch; margin-bottom: 0; }
.team-card { position: relative; margin-top: clamp(40px, 6vh, 64px); background: var(--card); border: 1px solid var(--line); padding: clamp(28px, 3vw, 40px); }
.team-card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 28px; height: 3px; background: var(--accent); }
.team-card .eyebrow { margin-bottom: 14px; }
.team-name { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -0.025em; }
.team-card .person-role { margin-top: 10px; }
.person .team-card .body-text { margin-top: 16px; font-size: 16px; line-height: 28px; }