/* Fjälkvarns Snickarn AB · Variant B — "Byggplats" · custom theme
 * Friare tolkning: industriellt mörk, bygghandbokskänsla.
 * paper: varmt träkol · ink: benvitt · accent: arbetslampa-amber
 * display: Big Shoulders Display · body: Archivo · läge: mörkt */
:root {
  --color-paper: oklch(0.155 0.012 55);
  --color-paper-2: oklch(0.19 0.014 55);
  --color-paper-3: oklch(0.235 0.016 55);
  --color-ink: oklch(0.93 0.008 85);
  --color-ink-soft: oklch(0.72 0.02 75);
  --color-ink-soft-2: oklch(0.6 0.02 70);
  --color-muted: oklch(0.52 0.018 65);
  --color-accent: oklch(0.74 0.135 65);
  --color-accent-deep: oklch(0.65 0.13 65);
  --color-accent-ink: oklch(0.16 0.02 55);
  --color-rule: oklch(0.31 0.015 55);
  --color-focus: oklch(0.74 0.135 65);
  --color-scrim: oklch(0.155 0.012 55 / 0.85);
  --color-shadow: oklch(0 0 0 / 0.38);
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --text-display: clamp(2.75rem, 8vw, 6.25rem);
  --text-title: clamp(1.85rem, 3.4vw, 2.75rem);
  --text-xl: 1.3rem;
  --text-md: 1.08rem;
  --text-base: 1rem;
  --text-sm: 0.9rem;
  --text-xs: 0.78rem;
  --space-2xs: 0.3rem;
  --space-xs: 0.6rem;
  --space-sm: 0.9rem;
  --space-md: 1.3rem;
  --space-lg: 2.1rem;
  --space-xl: 3.4rem;
  --space-2xl: 5.2rem;
  --nav-h: 4.25rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 2px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-med: 260ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 0.98; text-wrap: balance; }
h1, h2 { text-transform: uppercase; }
img { max-width: 100%; display: block; }
a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-ink); }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }

.skip-link {
  position: absolute; left: var(--space-sm); top: -64px; z-index: 100;
  background: var(--color-accent); color: var(--color-accent-ink);
  padding: 0.5rem 1rem; font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-sm); transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 0.75rem; }

/* Banner */
.banner {
  background: var(--color-accent); color: var(--color-accent-ink);
  text-align: center; padding: 0.4rem 0.75rem;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; position: relative; z-index: 60;
}
.banner a { color: var(--color-accent-ink); text-decoration: underline; }

/* Nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: calc((var(--nav-h) - 2.6rem) / 2) var(--page-gutter);
  background: var(--color-scrim);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-rule);
}
.nav__inner { max-width: 88rem; margin-inline: auto; display: flex; align-items: center; gap: var(--space-md); }
.nav__brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--color-ink); text-decoration: none; white-space: nowrap; margin-right: auto;
}
.nav__brand:hover { color: var(--color-accent); }
.nav__links { display: flex; gap: var(--space-lg); list-style: none; }
.nav__links a {
  display: inline-block; padding: 0.35rem 0.1rem;
  font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-soft);
  text-decoration: none; transition: color var(--dur-fast);
}
.nav__links a:hover { color: var(--color-ink); }
.nav__cta {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-accent-ink); background: var(--color-accent);
  padding: 0.55rem 1.25rem; border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav__cta:hover { background: var(--color-ink); color: var(--color-paper); }
@media (max-width: 60rem) { .nav__links { display: none; } }

/* Hero — fullbleed, vertikalt centrerad text */
.hero {
  position: relative; min-height: 100dvh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.hero__shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--color-paper) 0%, var(--color-paper-2) 22%, transparent 62%);
}
.hero__content {
  position: relative; z-index: 2;
  max-width: 60rem; margin-inline: auto;
  padding: calc(var(--nav-h) + 2.5rem) var(--page-gutter) 4.5rem;
}
.hero__kicker {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-md);
}
.hero__title { font-size: var(--text-display); letter-spacing: 0.01em; max-width: 14ch; }
.hero__accent { color: var(--color-accent); }
.hero__lede {
  margin-top: var(--space-lg); max-width: 44ch;
  font-size: clamp(1.05rem, 1.9vw, 1.28rem); color: var(--color-ink);
  text-wrap: pretty;
}
.hero__actions {
  margin-top: var(--space-xl);
  display: flex; gap: var(--space-sm); flex-wrap: wrap;
}

/* Knappar */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9rem 1.8rem; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--accent:hover { background: var(--color-accent-deep); color: var(--color-accent-ink); }
.btn--ghost { border-color: var(--color-rule); color: var(--color-ink); background: transparent; }
.btn--ghost:hover { border-color: var(--color-ink); background: var(--color-paper-2); }

/* Ankare under fast nav */
[id] { scroll-margin-top: calc(var(--nav-h) + 1.25rem); }

/* Sektioner */
.section { padding: clamp(4rem, 9vw, 7rem) var(--page-gutter); }
.section--tint { background: var(--color-paper-2); }
.section__inner { max-width: 88rem; margin-inline: auto; }
.section__head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.section__label {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-xs);
}
.section__title { font-size: var(--text-title); letter-spacing: 0.01em; }
.section__lede { margin-top: var(--space-sm); color: var(--color-ink-soft); font-size: var(--text-md); max-width: 48ch; text-wrap: pretty; }

/* Tjänster — byggledger, helbreddsrader */
.ledger { border-top: 1px solid var(--color-rule); }
.ledger__row {
  display: grid; gap: var(--space-xs);
  padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-rule);
  transition: background var(--dur-fast);
}
@media (min-width: 52rem) { .ledger__row { grid-template-columns: 4.5rem 1fr 1.6fr; gap: var(--space-lg); align-items: baseline; } }
.ledger__row:hover { background: var(--color-paper-3); }
.ledger__num { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-accent); }
.ledger__name { font-size: var(--text-xl); letter-spacing: 0.02em; }
.ledger__desc { color: var(--color-ink-soft); max-width: 44ch; text-wrap: pretty; }

/* Bildband */
.bleed { position: relative; height: min(76dvh, 42rem); overflow: hidden; }
.bleed img { width: 100%; height: 100%; object-fit: cover; }
.bleed__cap {
  position: absolute; left: var(--page-gutter); bottom: var(--space-lg);
  background: var(--color-scrim); color: var(--color-ink);
  padding: 0.45rem 0.9rem; font-size: var(--text-sm); border-radius: var(--radius-sm);
  border: 1px solid var(--color-rule);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Om */
.om { display: grid; gap: var(--space-xl); }
@media (min-width: 56rem) { .om { grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } }
.om__display { font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: 0.01em; line-height: 1.02; }
.om__text p { color: var(--color-ink-soft); margin-top: var(--space-md); max-width: 56ch; text-wrap: pretty; }
.facts { margin-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.fact { display: flex; flex-direction: column; gap: 0.15rem; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.fact__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); }
.fact__value { font-size: var(--text-base); color: var(--color-ink); }
.fact__value a { color: var(--color-accent); }

/* Karta */
.map { margin-top: var(--space-lg); }
.map__frame {
  width: 100%; height: min(60dvh, 26rem); border: 0; border-radius: 4px;
  display: block; filter: invert(0.9) hue-rotate(185deg) saturate(0.5) brightness(0.9);
}

/* Kontakt */
.contact { display: grid; gap: var(--space-xl); }
@media (min-width: 56rem) { .contact { grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; } }
.contact__list { list-style: none; margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.contact__list li { color: var(--color-ink-soft); }
.contact__list a { font-weight: 500; }
.form { display: grid; gap: var(--space-md); }
.form__row { display: grid; gap: 0.35rem; }
.form__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.form__input {
  width: 100%; min-height: 3rem; padding: 0.65rem 0.9rem;
  font: inherit; font-size: var(--text-base); color: var(--color-ink);
  background: var(--color-paper); border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  outline: 2px solid transparent; outline-offset: 1px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.form__input--area { min-height: 8rem; resize: vertical; }
.form__input:hover { border-color: var(--color-muted); }
.form__input:focus-visible { border-color: var(--color-focus); outline-color: var(--color-focus); }
.form__submit { justify-self: start; }

/* Sidfot */
.footer { border-top: 1px solid var(--color-rule); background: var(--color-paper); padding: var(--space-xl) var(--page-gutter); }
.footer__inner { max-width: 88rem; margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; align-items: baseline; }
.footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; color: var(--color-ink); }
.footer__meta { font-size: var(--text-sm); color: var(--color-muted); }
.footer a { color: var(--color-ink-soft); }

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