/* ==========================================================================
   AWCompany ApS — Premium Scandinavian redesign
   Core stylesheet: design tokens, base, layout, components
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Colour system — warm architectural neutrals */
  --c-bg:            #FAF7F1;   /* architectural warm white */
  --c-bg-alt:        #F1EBE0;   /* warm beige */
  --c-surface:       #FFFFFF;
  --c-ink:           #1B1A17;   /* near-black */
  --c-ink-soft:      #4A473F;   /* charcoal, body copy */
  --c-ink-faint:     #7A7568;   /* stone grey, meta text */
  --c-line:          rgba(27,26,23,0.12);
  --c-line-strong:   rgba(27,26,23,0.24);
  --c-timber:        #9C7A52;   /* natural timber accent */
  --c-timber-dark:   #6E5636;
  --c-sand:          #DCD0BC;   /* muted sand */
  --c-on-dark:       #F5F1E8;
  --c-on-dark-soft:  rgba(245,241,232,0.72);
  --c-on-dark-line:  rgba(245,241,232,0.22);

  /* Type — condensed display type reads confident at large sizes without
     needing heavy weight, closer to premium-automotive editorial systems */
  --f-display: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --radius-pill: 999px;

  --fs-display-xl: clamp(2.6rem, 3.2rem + 4vw, 7.5rem);
  --fs-display-l:  clamp(2.1rem, 1.8rem + 3.4vw, 5.2rem);
  --fs-display-m:  clamp(1.7rem, 1.4rem + 2vw, 3.4rem);
  --fs-h2:         clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  --fs-h3:         clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --fs-lead:       clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-label:      0.78rem;

  /* Spacing scale */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-7: 9rem;

  --container-w: 1400px;
  --container-pad: clamp(1.25rem, 1rem + 2.4vw, 4rem);

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-ui: 280ms;
  --dur-section: 800ms;

  --radius-s: 2px;
  --radius-m: 3px;

  /* iOS notch / Dynamic Island / gesture-bar clearance — real fixed-
     position chrome (header, mobile nav, cookie banner) needs this in
     landscape especially, where the safe area sits at the sides. Falls
     back to 0px on every browser that doesn't support env(). */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html, body{ margin:0; padding:0; }
body{
  background: var(--c-bg);
  color: var(--c-ink-soft);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  color: var(--c-ink);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
}
/* Uppercase is reserved for the big compositional display headlines (hero,
   section titles) — not every h1-h4, so FAQ questions, contact labels and
   legal headings stay easy to scan rather than shouting. */
.display-xl, .display-l, .display-m, .hero-title{ text-transform: uppercase; }
/* Headings inherit dark-on-light ink by default (above), which is wrong
   inside any section that sits on a dark photo — the ink colour would
   render near-black text on a near-black image. Force light headings in
   every such context, site-wide, so no individual page has to remember to
   override it inline. */
.hero h1, .hero h2, .hero h3, .hero h4,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4,
.tiktok-banner h1, .tiktok-banner h2, .tiktok-banner h3, .tiktok-banner h4{
  color: var(--c-on-dark);
}

/* Focus visibility — never sacrifice accessibility for aesthetics */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--c-timber-dark);
  outline-offset: 3px;
}
.skip-link{
  position: absolute; left: 1rem; top: -60px;
  background: var(--c-ink); color: var(--c-on-dark);
  padding: 0.75rem 1.25rem; z-index: 1000;
  transition: top var(--dur-ui) var(--ease-premium);
}
.skip-link:focus{ top: 1rem; }

/* ---------- Layout helpers ---------- */
.container{
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow{ max-width: 900px; }
.container--text{ max-width: 720px; }

section{ position: relative; }
.section-pad{ padding-block: var(--sp-6); }
.section-pad-s{ padding-block: var(--sp-5); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-timber-dark);
}
.eyebrow::before{
  content:'';
  width: 28px; height: 1px;
  background: currentColor;
  display:inline-block;
}
.eyebrow--on-dark{ color: var(--c-sand); }

.display-xl{ font-size: var(--fs-display-xl); }
.display-l{ font-size: var(--fs-display-l); }
.display-m{ font-size: var(--fs-display-m); }
h2, .h2{ font-size: var(--fs-h2); }
h3, .h3{ font-size: var(--fs-h3); }
.lead{ font-size: var(--fs-lead); color: var(--c-ink-soft); line-height: 1.55; }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid-12{ display:grid; grid-template-columns: repeat(12,1fr); gap: var(--sp-3); }

.visually-hidden{
  position:absolute !important; width:1px;height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---------- Buttons / links ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1.05em 2.1em;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-pill);
  transition: background var(--dur-ui) var(--ease-premium), color var(--dur-ui) var(--ease-premium), border-color var(--dur-ui) var(--ease-premium), transform var(--dur-ui) var(--ease-premium);
  white-space: nowrap;
}
.btn svg{ width:1em; height:1em; transition: transform var(--dur-ui) var(--ease-premium); }
.btn:hover svg{ transform: translateX(3px); }
.btn:hover{ transform: translateY(-1px); }

.btn--primary{ background: var(--c-ink); color: var(--c-on-dark); }
.btn--primary:hover{ background: var(--c-timber-dark); border-color: var(--c-timber-dark); }

.btn--ghost{ background: transparent; color: var(--c-ink); }
.btn--ghost:hover{ background: var(--c-ink); color: var(--c-on-dark); }

.btn--on-dark{ border-color: var(--c-on-dark-line); color: var(--c-on-dark); }
.btn--on-dark:hover{ background: var(--c-on-dark); color: var(--c-ink); border-color: var(--c-on-dark); }

.btn--on-dark-solid{ background: var(--c-on-dark); color: var(--c-ink); border-color: var(--c-on-dark); }
.btn--on-dark-solid:hover{ background: transparent; color: var(--c-on-dark); }

.text-link{
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; font-size: var(--fs-small);
  letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: 0.2em;
  transition: border-color var(--dur-ui) var(--ease-premium), opacity var(--dur-ui) var(--ease-premium), gap var(--dur-ui) var(--ease-premium);
}
.text-link svg{ width: 1em; height: 1em; transition: transform var(--dur-ui) var(--ease-premium);}
.text-link:hover{ border-color: var(--c-ink); gap: 0.75em; }
.text-link:hover svg{ transform: translateX(3px); }

/* ---------- Header / navigation ----------
   Permanently dark bar (near-black), the way a premium automotive site's
   nav stays solid over every hero rather than flipping from transparent to
   light-on-scroll — one state to design for, not two. */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  padding-top: calc(var(--sp-3) + var(--safe-t));
  padding-bottom: var(--sp-3);
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  background: rgba(27,26,23,0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background var(--dur-section) var(--ease-premium), padding var(--dur-ui) var(--ease-premium), box-shadow var(--dur-ui) var(--ease-premium);
  border-bottom: 1px solid transparent;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3);
}
.site-header.is-solid{
  background: rgba(15,14,12,0.96);
  padding-top: calc(var(--sp-1) + var(--safe-t));
  padding-bottom: var(--sp-1);
  box-shadow: 0 12px 30px -18px rgba(0,0,0,0.5);
}
.logo-mark, .main-nav a, .header-cta, .menu-toggle{ color: var(--c-on-dark); }
.header-cta .btn--primary{
  background: var(--c-on-dark); color: var(--c-ink); border-color: var(--c-on-dark);
}
.header-cta .btn--primary:hover{
  background: transparent; color: var(--c-on-dark); border-color: var(--c-on-dark-line);
}

.logo-mark{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  transition: color var(--dur-ui) var(--ease-premium);
}
.logo-mark small{
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

.main-nav{
  display:flex; align-items:center; gap: var(--sp-4); flex-wrap: wrap; row-gap: 0.5rem;
  /* A flex item's default min-width is auto (= its content's min-content
     size), which for a nav bar of unbroken nowrap links means "however
     wide the whole list is" — that silently defeats the ul's own
     flex-wrap below, since the item never shrinks enough to trigger it.
     min-width:0 is the standard fix: let this item actually shrink to
     the space .site-header .container has, and let wrapping take it
     from there. */
  min-width: 0;
}
/* The link list has grown past a single row's width even at this
   container's own 1400px cap (12 items today, several multi-word) — wrap
   instead of overflowing past the header-cta/off the edge of the screen. */
.main-nav ul{ display:flex; align-items:center; gap: var(--sp-3); flex-wrap: wrap; row-gap: 0.5rem; }
.main-nav a{
  position:relative;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.03em;
  /* color intentionally NOT set here — .site-header is permanently dark
     (see the block above), so the correct on-dark color already comes
     from ".logo-mark, .main-nav a, .header-cta, .menu-toggle{ color:
     var(--c-on-dark); }" further up this file. A stray color:var(--c-ink)
     used to live on this rule too and, being the same specificity but
     later in source order, silently won — near-black text on the
     near-black header bar, i.e. an invisible top nav on every page at
     every width ≥1280px. Root-cause fix: don't redeclare the color here. */
  padding-block: 0.4em;
  transition: color var(--dur-ui) var(--ease-premium);
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: currentColor;
  transition: right var(--dur-ui) var(--ease-premium);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right:0; }
.main-nav a[aria-current="page"]{ font-weight: 700; }

/* ---- "Kalkulatorer" dropdown (groups 5 calculator pages under one
   top-level item, keeping the desktop bar from growing past a readable
   item count as new calculators are added) ---- */
.main-nav .has-dropdown{ position:relative; }
.nav-dropdown-toggle{
  display:inline-flex; align-items:center; gap:0.35em;
  position:relative;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--c-on-dark); /* same on-dark color as every other .main-nav item — `inherit` isn't enough here since no ancestor between this <button> and <body> declares color */
  background: none; border: 0; padding-block: 0.4em; cursor: pointer;
  transition: color var(--dur-ui) var(--ease-premium);
}
.nav-dropdown-toggle::before{
  /* same underline-on-hover affordance as the plain links, kept as its
     own pseudo-element since ::after is used by the caret below */
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: currentColor;
  transition: right var(--dur-ui) var(--ease-premium);
}
.nav-dropdown-toggle:hover::before,
.nav-dropdown-toggle[aria-expanded="true"]::before{ right:0; }
.nav-dropdown-toggle::after{
  content:''; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform: rotate(45deg); margin-top:-4px;
  transition: transform var(--dur-ui) var(--ease-premium);
}
.nav-dropdown-toggle[aria-expanded="true"]::after{ transform: rotate(-135deg); margin-top:2px; }
.main-nav .has-dropdown[data-current-in-group="true"] .nav-dropdown-toggle{ font-weight:700; }

.nav-dropdown{
  position:absolute; top:100%; left:50%;
  transform: translateX(-50%) translateY(4px);
  min-width:230px; margin-top:0.65rem; padding:0.4rem 0;
  background: var(--c-surface);
  border:1px solid var(--c-line-strong);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.35);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity var(--dur-ui) var(--ease-premium), transform var(--dur-ui) var(--ease-premium), visibility var(--dur-ui);
  z-index:10;
}
.nav-dropdown.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown li{ list-style:none; }
.nav-dropdown a{
  display:block;
  position:static; /* opt out of .main-nav a's absolute ::after underline positioning */
  padding:0.65em 1.25em;
  font-size: var(--fs-small);
  font-weight:500;
  color: var(--c-ink);
  white-space:nowrap;
}
.nav-dropdown a::after{ display:none; }
.nav-dropdown a:hover, .nav-dropdown a:focus-visible{ background: var(--c-bg-alt); }
.nav-dropdown a[aria-current="page"]{ font-weight:700; background: var(--c-bg-alt); }

.header-cta{ display:flex; align-items:center; gap: var(--sp-2); }
.lang-switch{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background: transparent;
  border: 1px solid var(--c-on-dark-line);
  color: var(--c-on-dark);
  border-radius: 6px;
  padding: 0.35em 1.5em 0.35em 0.7em;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%23F5F1E8' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 0.5em center; background-size: 10px;
}
.lang-switch option{ color:#1B1A17; background:#fff; }
.lang-switch:hover, .lang-switch:focus-visible{ border-color: var(--c-on-dark); outline:none; }
.lang-switch--mobile{ width: 100%; align-self: flex-start; }
.header-phone{
  display:none;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.02em;
}

.menu-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width: 44px; height: 44px; margin: -9px; /* icon stays 26px visually; hit target grows to the 44px minimum without shifting surrounding layout */
  color: var(--c-ink);
  z-index: 600;
}
.menu-toggle span{ display:block; width:26px; height:1.5px; background: currentColor; transition: transform var(--dur-ui) var(--ease-premium), opacity var(--dur-ui) var(--ease-premium); }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position: fixed; inset:0; z-index: 550;
  background: var(--c-ink);
  color: var(--c-on-dark);
  display:flex; flex-direction:column;
  justify-content: space-between;
  /* The link list has grown past what every phone screen can show at
     once (12 items today, vs. the handful this was designed for) — this
     must scroll internally, or the lower items and the whole footer
     (phone/email/CTA) become permanently unreachable on shorter screens. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: calc(6.5rem + var(--safe-t)) calc(var(--container-pad) + var(--safe-r)) calc(var(--sp-4) + var(--safe-b)) calc(var(--container-pad) + var(--safe-l));
  transform: translateY(-100%);
  transition: transform 620ms var(--ease-premium);
  visibility: hidden;
}
.mobile-nav.is-open{ transform: translateY(0); visibility: visible; }
.mobile-nav ul{ display:flex; flex-direction:column; gap: 0.4rem; }
/* Shared across every link in the panel (menu list AND footer, including
   the footer's .btn) — fade/slide-in only. Deliberately no `color` here:
   the ul links, the footer's plain text links and the footer's .btn each
   need a DIFFERENT colour, each already supplied by a more specific rule
   below — adding one more colour here would just be one more thing those
   rules have to out-specificity, for no benefit. */
.mobile-nav a{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms var(--ease-premium), transform 520ms var(--ease-premium);
}
/* Big menu-list-only treatment — scoped to ul so it can never collide with
   .btn's own padding/display/color on the footer's CTA button (same
   specificity as a plain `.mobile-nav a` would have — see git history for
   the two bugs that caused: a squashed button, then invisible button text). */
.mobile-nav ul a{
  font-family: var(--f-display);
  font-size: clamp(2rem, 6vw + 1rem, 3.4rem);
  font-weight: 700;
  color: var(--c-on-dark);
  display:inline-block;
  padding-block: 0.15em;
}
.mobile-nav.is-open a{ opacity:1; transform: translateY(0); }
.mobile-nav.is-open li:nth-child(1) a{ transition-delay: 60ms; }
.mobile-nav.is-open li:nth-child(2) a{ transition-delay: 110ms; }
.mobile-nav.is-open li:nth-child(3) a{ transition-delay: 160ms; }
.mobile-nav.is-open li:nth-child(4) a{ transition-delay: 210ms; }
.mobile-nav.is-open li:nth-child(5) a{ transition-delay: 260ms; }
.mobile-nav.is-open li:nth-child(6) a{ transition-delay: 310ms; }
.mobile-nav-footer{
  display:flex; flex-direction:column; gap: var(--sp-2);
  border-top: 1px solid var(--c-on-dark-line); padding-top: var(--sp-3);
}
/* :not(.btn) — the CTA button's own .btn--on-dark-solid rule already sets
   the correct dark-on-light text colour for the solid pill; without this
   exclusion, this rule's higher specificity (class+type vs. .btn's single
   class) silently overrides it with the soft on-dark colour meant for the
   plain phone/email text links here, making the button's own text nearly
   invisible against its light background. */
.mobile-nav-footer a:not(.btn){ font-size: var(--fs-body); color: var(--c-on-dark-soft); }

/* ---------- Hero ----------
   Centred composition — one headline, one line of copy, one CTA row,
   stacked in the middle of the frame over full-bleed photography, the way
   a premium car-brand hero reads rather than our previous bottom-left
   editorial block. */
.hero{
  position:relative;
  /* Redeclare on the same property (not stacked into one value) so a
     browser that can't parse svh just keeps the vh line instead of
     dropping min-height entirely — same iOS-Safari-safe pattern as
     .cfg-app in configurator.css. */
  min-height: 100vh;
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align: center;
  color: var(--c-on-dark);
  overflow:hidden;
  background: var(--c-ink);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,14,12,0.5) 0%, rgba(15,14,12,0.22) 32%, rgba(15,14,12,0.6) 100%);
}
.hero-content{
  position:relative; z-index:1;
  padding-block: 6rem;
  display:flex; flex-direction:column; align-items:center;
}
.hero-kicker{ margin-bottom: var(--sp-3); color: var(--c-sand); justify-content:center; }
.hero-title{
  font-size: var(--fs-display-xl);
  text-transform: uppercase;
  max-width: 18ch;
  margin-inline: auto;
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line span{ display:block; }
.hero-foot{
  margin-top: var(--sp-4);
  display:flex; flex-direction:column; align-items:center; gap: var(--sp-3);
}
.hero-copy{ max-width: 44ch; margin-inline:auto; color: var(--c-on-dark-soft); font-size: var(--fs-lead); }
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--sp-2); }
.scroll-cue{
  position:absolute; left:50%; transform:translateX(-50%); bottom: var(--sp-3); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:0.75rem;
  font-size: var(--fs-label); letter-spacing:0.18em; text-transform:uppercase; color: var(--c-on-dark-soft);
}
.scroll-cue .line{ width:1px; height:34px; background: var(--c-on-dark-line); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--c-on-dark);
  animation: scrollcue 2.2s var(--ease-premium) infinite;
}
@keyframes scrollcue{ to{ top:100%; } }

/* ---------- Editorial intro / brand section ---------- */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6);
  align-items:center;
}
.split-media{ position:relative; overflow:hidden; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-figure{ aspect-ratio: 4/5; overflow:hidden; }
.split-figure img{ width:100%; height:100%; object-fit:cover; transition: transform 900ms var(--ease-premium); }

.stat-row{
  display:grid; grid-template-columns: repeat(3,1fr);
  border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line);
  margin-block: var(--sp-5);
}
.stat{ padding: var(--sp-4) var(--sp-2); border-left:1px solid var(--c-line); }
.stat:first-child{ border-left:0; }
.stat-num{
  font-family: var(--f-display); font-weight:800;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4.6rem);
  color: var(--c-ink); line-height:1; letter-spacing:-0.02em;
}
.stat-num sup{ font-size: 0.4em; top:-0.6em; }
.stat-label{ margin-top:0.75rem; font-size: var(--fs-small); color: var(--c-ink-faint); max-width: 22ch; }

/* ---------- Services rows ---------- */
.service-row{
  display:grid; grid-template-columns: 90px 1.4fr 2fr auto;
  align-items:center; gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--c-line);
  position:relative;
  transition: background var(--dur-ui) var(--ease-premium);
}
.services-list .service-row:last-child{ border-bottom:1px solid var(--c-line); }
.service-num{ font-family: var(--f-display); font-weight:700; color: var(--c-ink-faint); font-size:1.1rem; }
.service-name{ font-family: var(--f-display); font-size: clamp(1.3rem, 1rem + 1.6vw, 2.4rem); font-weight:700; color: var(--c-ink); }
.service-desc{ color: var(--c-ink-faint); font-size: var(--fs-small); max-width: 46ch; }
.service-link{ justify-self:end; }
.service-row .service-thumb{
  position:absolute; right: var(--container-pad); top:50%;
  width:220px; height:150px;
  transform: translate(0,-50%) scale(0.94);
  opacity:0; pointer-events:none; z-index:5;
  overflow:hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35);
  transition: opacity 420ms var(--ease-premium), transform 420ms var(--ease-premium);
}
.service-row .service-thumb img{ width:100%; height:100%; object-fit:cover; }
.service-row:hover{ background: var(--c-bg-alt); }
.service-row:hover .service-thumb{ opacity:1; transform: translate(0,-50%) scale(1); }
.service-row a.service-row-link{ position:absolute; inset:0; }

/* ---------- Editorial project showcase ---------- */
.project-feature{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-5); align-items:center;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--c-line);
}
.project-feature:nth-child(even) .project-media{ order:2; }
.project-media{ overflow:hidden; aspect-ratio: 5/4; }
.project-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1100ms var(--ease-premium); }
.project-feature:hover .project-media img{ transform: scale(1.045); }
.project-index{ font-family:var(--f-display); color:var(--c-ink-faint); font-weight:700; }
.project-title{ font-size: var(--fs-display-m); margin-block: 0.4em 0.5em; }
.project-meta{ display:flex; gap:1.5em; font-size:var(--fs-small); color:var(--c-ink-faint); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1em; }

/* ---------- Gallery grid ---------- */
.gallery-grid{
  display:grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-1);
}
.gallery-grid figure{ overflow:hidden; cursor: zoom-in; background: var(--c-bg-alt); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform 700ms var(--ease-premium); }
.gallery-grid figure:hover img{ transform: scale(1.06); }
.gallery-grid .span-2{ grid-column: span 2; }
.gallery-grid .span-3{ grid-column: span 3; }
.gallery-grid .tall{ grid-row: span 2; }

.lightbox{
  position:fixed; inset:0; z-index:900;
  background: rgba(15,14,12,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity var(--dur-ui) var(--ease-premium);
  padding: var(--sp-3);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width: min(1100px,92vw); max-height: 84vh; object-fit:contain; }
.lightbox-close{
  position:absolute; top: var(--sp-3); right: var(--container-pad);
  color: var(--c-on-dark); font-size:1rem; letter-spacing:0.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:0.5em;
}
.lightbox-nav{ position:absolute; top:50%; transform: translateY(-50%); color: var(--c-on-dark); font-size:2rem; padding: 0.5em 0.8em; }
.lightbox-prev{ left: var(--sp-2); }
.lightbox-next{ right: var(--sp-2); }
.lightbox-caption{ position:absolute; bottom: var(--sp-3); left:0; right:0; text-align:center; color: var(--c-on-dark-soft); font-size: var(--fs-small); }

/* ---------- Timeline (company story) ---------- */
.timeline{ display:flex; flex-direction:column; }
.timeline-item{
  display:grid; grid-template-columns: 140px 1fr; gap: var(--sp-4);
  padding-block: var(--sp-3); border-top:1px solid var(--c-on-dark-line);
}
.timeline-item:last-child{ border-bottom:1px solid var(--c-on-dark-line); }
.timeline-place{ font-family: var(--f-display); font-weight:800; font-size:1.4rem; color: var(--c-on-dark); }
.timeline-text{ color: var(--c-on-dark-soft); max-width: 56ch; }

/* ---------- Values / Why AWCompany ---------- */
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; border-top:1px solid var(--c-line); }
.value-item{ padding: var(--sp-4) var(--sp-3); border-left:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.value-item:nth-child(3n+1){ border-left:0; }
.value-num{ font-family:var(--f-display); color:var(--c-ink-faint); font-weight:700; margin-bottom:1rem; display:block; }

/* ---------- Testimonial ---------- */
.testimonial{
  text-align:center; padding-block: var(--sp-6);
  max-width: 900px; margin-inline:auto;
}
.testimonial blockquote{
  font-family: var(--f-display); font-weight:600; color: var(--c-ink);
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.4rem); line-height:1.3;
}
.testimonial blockquote::before{ content:'“'; }
.testimonial blockquote::after{ content:'”'; }
.testimonial cite{ display:block; margin-top: var(--sp-3); font-style:normal; color: var(--c-ink-faint); font-size: var(--fs-small); letter-spacing:0.05em; text-transform:uppercase; }

/* ---------- Final CTA band ---------- */
.cta-band{
  position:relative; color: var(--c-on-dark);
  min-height: 64vh; display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
}
.cta-band .hero-media::after{ background: linear-gradient(180deg, rgba(15,14,12,0.62), rgba(15,14,12,0.78)); }
.cta-band-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.cta-band-content h2{ margin-inline:auto; }
.cta-contacts{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--sp-4); margin-top: var(--sp-4); }
.cta-contact-item{ display:flex; flex-direction:column; align-items:center; gap:0.3em; }
.cta-contact-item span{ font-size: var(--fs-label); letter-spacing:0.14em; text-transform:uppercase; color: var(--c-on-dark-soft); }
.cta-contact-item a{ font-family: var(--f-display); font-size:1.4rem; font-weight:700; }

/* ---------- TikTok banner ---------- */
.tiktok-banner{
  background: var(--c-ink); color: var(--c-on-dark);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--c-on-dark-line);
  border-bottom: 1px solid var(--c-on-dark-line);
}
.tiktok-banner .container{
  display:grid; grid-template-columns: 150px 1fr auto; align-items:center; gap: var(--sp-4);
}
.tiktok-thumb{
  position:relative; aspect-ratio: 9/16; overflow:hidden;
  background: var(--c-ink-soft);
}
.tiktok-thumb img{ width:100%; height:100%; object-fit:cover; opacity:0.92; }
.tiktok-thumb .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35));
}
.tiktok-thumb .play svg{ width:2.6rem; height:2.6rem; color: var(--c-on-dark); filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5)); }
.tiktok-badge{
  position:absolute; top:0.6rem; left:0.6rem;
  display:inline-flex; align-items:center; gap:0.35em;
  background: var(--c-on-dark); color: var(--c-ink);
  font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.35em 0.65em; border-radius: var(--radius-pill);
}
.tiktok-badge .dot{ width:6px; height:6px; border-radius:50%; background:#e0273a; animation: tiktok-pulse 1.8s ease-in-out infinite; }
@keyframes tiktok-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
.tiktok-text .eyebrow{ color: var(--c-sand); }
.tiktok-text h3{ margin-top:0.6rem; font-size: clamp(1.3rem, 1.05rem + 1.2vw, 2rem); text-transform:uppercase; }
.tiktok-text p{ margin-top:0.6rem; color: var(--c-on-dark-soft); max-width: 52ch; }
@media (prefers-reduced-motion: reduce){ .tiktok-badge .dot{ animation:none; } }

/* ---------- Footer ---------- */
.site-footer{ background: var(--c-ink); color: var(--c-on-dark-soft); padding-top: var(--sp-6); }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-4); padding-bottom: var(--sp-5); }
.footer-col h4{ color: var(--c-on-dark); font-family:var(--f-body); font-size:var(--fs-label); letter-spacing:0.14em; text-transform:uppercase; font-weight:600; margin-bottom:1.25rem; }
.footer-col li{ margin-bottom:0.65rem; }
.footer-col a:hover{ color: var(--c-on-dark); }
.footer-brand-blurb{ max-width:34ch; margin-top:1rem; }
.footer-socials{ display:flex; gap:1rem; margin-top:1.5rem; }
.footer-socials a{ border:1px solid var(--c-on-dark-line); border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; transition: background var(--dur-ui) var(--ease-premium), color var(--dur-ui) var(--ease-premium); }
.footer-socials a:hover{ background: var(--c-on-dark); color: var(--c-ink); }
.footer-bottom{
  border-top:1px solid var(--c-on-dark-line);
  padding-block: var(--sp-3);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size: var(--fs-small);
}
.footer-legal{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-vat-note{ opacity:0.6; font-size:0.78rem; max-width:60ch; }
.footer-wordmark{
  font-family: var(--f-display); font-weight:800;
  font-size: clamp(3rem, 1.6rem + 9vw, 11rem);
  color: var(--c-on-dark);
  line-height:0.82; letter-spacing:-0.03em;
  padding-block: var(--sp-4) var(--sp-3);
  opacity:0.96;
}
.footer-credit{
  display:flex; align-items:center; gap:0.85rem; flex-wrap:wrap;
  padding-block: var(--sp-3);
  border-top:1px solid var(--c-on-dark-line);
}
.footer-credit-label{ font-size: var(--fs-small); color: var(--c-on-dark-soft); }
.footer-credit-logo{
  width: clamp(100px, 60px + 10vw, 180px);
  height:auto; object-fit:contain; display:block;
}

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field{ display:flex; flex-direction:column; gap:0.5rem; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size: var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; color: var(--c-ink-faint); }
.field input, .field select, .field textarea{
  background: var(--c-surface); border:1px solid var(--c-line-strong);
  padding: 0.95em 1em; border-radius: var(--radius-s);
  transition: border-color var(--dur-ui) var(--ease-premium);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--c-ink); }
.field textarea{ resize: vertical; min-height:130px; }
.form-note{ font-size:var(--fs-small); color:var(--c-ink-faint); margin-top:var(--sp-2); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  padding-block: 9.5rem var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
.page-hero .display-l{ max-width: 20ch; margin-top: var(--sp-2); }
.breadcrumb{ font-size: var(--fs-small); color: var(--c-ink-faint); }
.breadcrumb a:hover{ color: var(--c-ink); }

/* ---------- Model / product cards (modulhuse) ---------- */
.model-feature{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-5);
  padding-block: var(--sp-6); border-top:1px solid var(--c-line);
  align-items:start;
}
.model-media{ aspect-ratio: 4/3; overflow:hidden; }
.model-media img{ width:100%; height:100%; object-fit:cover; }
.model-specs{ margin-top: var(--sp-3); border-top:1px solid var(--c-line); }
.model-specs dt{ font-size: var(--fs-small); color: var(--c-ink-faint); }
.model-specs dd{ margin:0; font-weight:600; color:var(--c-ink); }
.model-specs .spec-row{ display:flex; justify-content:space-between; gap:1rem; padding: 0.85em 0; border-bottom:1px solid var(--c-line); }
.model-price{ font-family:var(--f-display); font-weight:800; font-size:2.1rem; color:var(--c-ink); margin-top:1.25rem; }
.model-price small{ font-family:var(--f-body); font-size:0.9rem; font-weight:500; color:var(--c-ink-faint); }

/* ---------- Process steps ---------- */
.process-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-3); }
.process-step{ border-top:2px solid var(--c-ink); padding-top: var(--sp-2); }
.process-step .step-num{ font-family:var(--f-display); font-weight:800; font-size:2rem; color:var(--c-timber-dark); }

/* ---------- FAQ accordion ---------- */
.accordion-item{ border-top:1px solid var(--c-line); }
.accordion-item:last-child{ border-bottom:1px solid var(--c-line); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding-block: var(--sp-3); text-align:left;
  font-family: var(--f-display); font-weight:700; font-size:1.1rem; color: var(--c-ink);
}
.accordion-trigger .plus{ position:relative; width:18px; height:18px; flex:none; margin-left:1rem; }
.accordion-trigger .plus::before, .accordion-trigger .plus::after{
  content:''; position:absolute; background:currentColor; transition: transform var(--dur-ui) var(--ease-premium);
}
.accordion-trigger .plus::before{ left:0; top:50%; width:100%; height:1.5px; transform: translateY(-50%); }
.accordion-trigger .plus::after{ top:0; left:50%; height:100%; width:1.5px; transform: translateX(-50%); }
.accordion-item[data-open="true"] .plus::after{ transform: translateX(-50%) rotate(90deg); opacity:0; }
.accordion-panel{ height:0; overflow:hidden; transition: height 420ms var(--ease-premium); }
.accordion-panel-inner{ padding-bottom: var(--sp-3); max-width:70ch; color: var(--c-ink-faint); }

/* ---------- Calculator ---------- */
.calculator{ border:1px solid var(--c-line); background: var(--c-surface); padding: var(--sp-4); }
.calc-step{ margin-bottom: var(--sp-3); }
.calc-step label{ display:block; font-size:var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; color:var(--c-ink-faint); margin-bottom:0.6rem; }
.calc-options{ display:grid; grid-template-columns: repeat(2,1fr); gap:0.75rem; }
.calc-option{
  border:1px solid var(--c-line-strong); padding:1em 1.1em; cursor:pointer;
  transition: border-color var(--dur-ui) var(--ease-premium), background var(--dur-ui) var(--ease-premium);
}
.calc-option:hover{ border-color: var(--c-ink); }
.calc-option.is-active{ border-color: var(--c-ink); background: var(--c-bg-alt); }
.calc-option .opt-name{ font-weight:700; color:var(--c-ink); }
.calc-option .opt-meta{ font-size:var(--fs-small); color:var(--c-ink-faint); }
.calc-total{ display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid var(--c-line); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.calc-total .num{ font-family:var(--f-display); font-weight:800; font-size:2.4rem; color:var(--c-ink); }

/* ---------- Calculator hub band (index/ydelser/projekter — "we have
   free online estimators" CTA) ---------- */
.calc-hub-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1px; background:var(--c-line); border:1px solid var(--c-line); }
.calc-hub-card{
  display:flex; flex-direction:column; gap:0.6em; background:var(--c-surface);
  padding: var(--sp-3) var(--sp-3) var(--sp-4); color:inherit; text-decoration:none;
  transition: background var(--dur-ui) var(--ease-premium);
}
.calc-hub-card:hover{ background: var(--c-bg-alt); }
.calc-hub-card:hover .calc-hub-arrow svg{ transform: translateX(3px); }
.calc-hub-eyebrow{ font-size:var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; color:var(--c-ink-faint); }
.calc-hub-name{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--c-ink); }
.calc-hub-desc{ font-size:var(--fs-small); color:var(--c-ink-faint); line-height:1.5; flex-grow:1; }
.calc-hub-arrow{ display:inline-flex; align-items:center; gap:0.4em; font-weight:600; color:var(--c-ink); margin-top:0.4em; }
.calc-hub-arrow svg{ width:1em; height:1em; flex-shrink:0; transition: transform var(--dur-ui) var(--ease-premium); }
@media (max-width: 720px){
  .calc-hub-grid{ grid-template-columns:1fr; }
}

/* ---------- Legal pages ---------- */
.legal-body h2{ margin-top: var(--sp-4); margin-bottom:0.75rem; font-size:1.3rem; }
.legal-body p, .legal-body li{ color: var(--c-ink-soft); margin-bottom:0.85rem; }
.legal-body ul{ list-style: disc; padding-left:1.4rem; }
.legal-body li{ margin-bottom:0.4rem; }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; z-index: 800;
  left: calc(var(--sp-2) + var(--safe-l)); right: calc(var(--sp-2) + var(--safe-r)); bottom: calc(var(--sp-2) + var(--safe-b));
  max-width: 620px;
  background: var(--c-ink); color: var(--c-on-dark-soft);
  padding: var(--sp-3); border-radius: var(--radius-m);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
  transform: translateY(140%); transition: transform 520ms var(--ease-premium);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{ font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.cookie-banner p a{ text-decoration:underline; color:var(--c-on-dark); }
.cookie-actions{ display:flex; gap:0.75rem; flex-wrap:wrap; }
.cookie-actions button{
  font-size: var(--fs-small); font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  padding:0.75em 1.3em; border:1px solid var(--c-on-dark-line); border-radius: var(--radius-s);
}
.cookie-actions .btn-accept{ background: var(--c-on-dark); color: var(--c-ink); border-color: var(--c-on-dark); }

/* ---------- Back to top ---------- */
.progress-bar{ position:fixed; top:0; left:0; height:2px; background: var(--c-timber-dark); z-index:600; width:0%; }