/* ===================================================
   NOETIC TECHNOLOGIES — Design System & Styles
   Light one-pager, mobile-first. Warm white/grey, dark
   text, and the beam's sun-orange spectrum throughout.

   Base styles = mobile. A single @media (min-width: 821px)
   block at the bottom layers on the desktop compositions
   (rightward beam cone, multi-column grids). Hover-only
   effects live in @media (hover: hover).
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #FFFFFF;
  --text-bright: rgba(17, 17, 17, 0.94);
  --text-primary: rgba(17, 17, 17, 0.85);
  --text-mid: rgba(17, 17, 17, 0.66);    /* body copy — readability floor */
  --text-dim: rgba(17, 17, 17, 0.45);    /* dimmed heading words */
  --text-faint: rgba(17, 17, 17, 0.55);  /* eyebrows, footer, micro-labels */
  --rule: rgba(17, 17, 17, 0.12);        /* every divider */

  --beam-core: #ffffff;
  --beam-mid: #4B6FF5;                      /* electric blue — used only by the mockup's "Ring nu" fill now */
  --beam-deep: #1A2DA0;                     /* deep indigo — unused, kept for parity */
  --beam-accent: #6B6B6B;                   /* accent words — neutral grey, italic (see .dim) */
  --beam-accent-dim: rgba(107, 107, 107, 0.75); /* muted micro-labels */

  --bg-elevated: #F1F1F1;                   /* body sections — a neutral shade of grey, no warm tint */
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: 'Arimo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;              /* Arimo has no 300 weight */
  line-height: 1.7;
  overflow-x: hidden;
}

.bright { color: inherit; }
/* Accent words in headings — plain grey, set in italic to distinguish
   them from the surrounding upright text. No color-accent treatment. */
.dim {
  color: var(--beam-accent);
  font-style: italic;
}

/* ===================================================
   BUTTONS — shared
   =================================================== */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 34px;
  border-radius: 100px;
  border: 1px solid rgba(17, 17, 17, 0.28);
  background: transparent;
  color: rgba(17, 17, 17, 0.85);
  font-family: 'Arimo', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-pill:hover {
  background: rgba(17, 17, 17, 0.08);
  border-color: rgba(17, 17, 17, 0.55);
  color: #000;
}

/* ===================================================
   NAVIGATION — frosted-glass bar
   =================================================== */
/* Mobile: the nav shrinks to just the logo (+ doc icon), pinned top-left
   — not the full-width bar with the "Kontakt os" button. That button
   lives solely at the bottom now (.stickybar), so it's never shown
   twice on screen at once. Desktop restores the full centered bar
   with the CTA visible, see the min-width:821px block below. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
  transition: border-color 0.4s ease, background 0.4s ease;
}

.nav:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.22);
}

/* Invisible — only reserves layout space inside the nav bar so
   .nav__actions stays put. #navLogoLive (below, outside .nav) is the
   real, visible logo; see the HTML comment by #navLogoLive for why. */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
  visibility: hidden;
}

.nav__logo-img {
  display: block;
  height: 21px;
  width: auto;
}

.nav__logo-text {
  font-family: 'Arimo', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
}

/* Live logo — a real mix-blend-mode: difference, so it genuinely reacts
   to whatever's behind it (dark hero, the beam's motion, a light section,
   the sunrise) rather than a scripted black/white swap. It has to live
   outside .nav: .nav is position:fixed + z-index, which always creates a
   new stacking context, and mix-blend-mode can't cross that boundary —
   nested inside .nav it would only ever see .nav's own background, never
   the real page. Positioned via JS to sit exactly over .nav__logo's
   (invisible) slot; fill is forced to white because differencing against
   black is a no-op — it would just vanish into the backdrop. */
.nav-logo-live {
  position: fixed;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
  mix-blend-mode: difference;
}

/* Difference-blending white against the beam's saturated blue produces its
   literal color negative (a loud gold/yellow) — fine everywhere else on the
   page (near-black hero background, light sections) where the result is
   the intended white/black contrast, but wrong specifically over the beam.
   While the hero is in view, drop the blend and just show flat white —
   which is what's wanted over the beam AND the hero's near-black
   background alike. Real live differencing resumes the moment the hero
   scrolls out of view (see the IntersectionObserver in the inline script). */
.nav-logo-live.on-hero {
  mix-blend-mode: normal;
}

.nav-logo-live__mark {
  display: block;
  height: 21px;
  width: 21px;
}

.nav-logo-live__mark path {
  fill: #ffffff;
}

.nav-logo-live__text {
  font-family: 'Arimo', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: #ffffff;
}

/* Nav actions — outlined rectangular buttons: white fill, hairline dark
   border, SQUARE corners, title-case label (not uppercase). The label
   button and the icon button share height so they align on one line. */
.nav__actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

.nav__cta {
  /* Hidden in the top nav on mobile — the "Kontakt os" action lives
     solely in the bottom sticky bar there, so it's never shown twice
     at once. Restored to inline-flex on desktop (see min-width:821px). */
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 0;
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
  font-family: 'Arimo', sans-serif;
  /* Kept light and fine on purpose — matches the reference lockup */
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;      /* also used as an <a> on subpages */
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

/* Hover: fills black, content goes white. The outline stays black so it
   disappears into the fill — no white ring. */
.nav__cta:hover {
  background: #000000;
  color: #ffffff;
}

/* Icon-only sibling — same box, square footprint */
.nav__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-height: 46px;
  border-radius: 0;
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav__icon-btn svg {
  width: 26px;
  height: 26px;
  display: block;
}

.nav__icon-btn:hover {
  background: #000000;
  color: #ffffff;
}

/* On mobile the doc icon lives solely in the sticky bar (it's visible
   from the start there), so the nav's own copy is hidden to avoid
   showing it twice. Desktop has no sticky bar, so it stays in the nav. */
.nav__actions .nav__icon-btn {
  display: none;
}

/* ===================================================
   HERO
   =================================================== */
/* The hero is the one deliberately DARK section — an intentional exception
   to the light theme everywhere else. Scrolling past it into the light
   body sections is the effect; no scroll-linked JS needed, it's just two
   different section backgrounds stacked in document order. Text/accent
   colors inside .hero are hardcoded light-on-dark rather than using the
   global (light-on-dark... light-theme) vars, which are dark-on-light. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #080808;
}

/* ---------------------------------------------------
   THE BEAM — mobile composition: a vertical spotlight
   from above the top edge, shining DOWN onto the
   headline. Same layer recipe as desktop (glow, conic
   cone, flare, grain), different geometry.
   --------------------------------------------------- */
.beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.beam > div {
  position: absolute;
  inset: 0;
}

/* WebGL "calm flame" canvas — renders the live turbulent beam. Hidden
   until the shader compiles (.beam--live), so browsers without WebGL
   simply keep the CSS gradient beam below as the fallback. */
.beam__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.beam--live .beam__canvas { opacity: 1; }

.beam--live .beam__glow,
.beam--live .beam__cone,
.beam--live .beam__flare {
  animation: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* Layer 1 — atmospheric glow hanging from the top, cool blue tones */
.beam__glow {
  background: radial-gradient(
    ellipse 140% 85% at 50% -6%,
    rgba(75, 111, 245, 0.18) 0%,
    rgba(26, 45, 160, 0.09) 40%,
    rgba(16, 27, 96, 0.03) 66%,
    transparent 84%
  );
  animation: beam-breathe-glow 4.5s ease-in-out infinite;
  transform-origin: 50% 0%;
}

/* Layer 2 — the cone: apex above the viewport, fanning down.
   180deg in the conic wheel = straight down. */
.beam__cone {
  background: conic-gradient(
    from 0deg at 50% -14%,
    transparent 125deg,
    rgba(26, 45, 160, 0.06) 138deg,
    rgba(90, 125, 245, 0.25) 155deg,
    rgba(200, 216, 255, 0.6) 170deg,
    rgba(255, 255, 255, 0.9) 180deg,
    rgba(200, 216, 255, 0.6) 190deg,
    rgba(90, 125, 245, 0.25) 205deg,
    rgba(26, 45, 160, 0.06) 222deg,
    transparent 235deg
  );
  -webkit-mask-image: radial-gradient(
    ellipse 180% 150% at 50% -8%,
    #000 16%,
    rgba(0, 0, 0, 0.9) 46%,
    rgba(0, 0, 0, 0.4) 70%,
    transparent 90%
  );
  mask-image: radial-gradient(
    ellipse 180% 150% at 50% -8%,
    #000 16%,
    rgba(0, 0, 0, 0.9) 46%,
    rgba(0, 0, 0, 0.4) 70%,
    transparent 90%
  );
  animation: beam-breathe-cone 4.5s ease-in-out infinite;
  transform-origin: 50% -14%;
}

/* Layer 3 — bright core streak down the axis, fading before the headline */
.beam__flare {
  background: radial-gradient(
    ellipse 15% 42% at 50% 14%,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(200, 216, 255, 0.35) 40%,
    rgba(90, 125, 245, 0.12) 66%,
    transparent 88%
  );
  animation: beam-breathe-flare 4.5s ease-in-out infinite;
  transform-origin: 50% 14%;
}

/* "Alive, moving forward, staying still": all three layers grow and
   recede together on ONE shared rhythm (same duration/timing, so the
   whole beam breathes as a single source of light, not three things
   drifting independently) — the reach/scale is what carries "forward
   motion", while opacity barely dips, so the beam always reads as
   solidly, constantly there. No new shapes, nothing travels or
   disappears — the existing beam itself is what moves. */
@keyframes beam-breathe-glow  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.16); } }
@keyframes beam-breathe-cone  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.94; transform: scale(1.05); } }
@keyframes beam-breathe-flare { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.9;  transform: scale(1.3);  } }

/* Layer 4 — fine grain: light volume in "fog" */
.beam__grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: screen;
}

/* Hero content — spotlighted from above */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  padding: 110px 24px clamp(88px, 14svh, 130px);
}

.hero__heading {
  font-weight: 600;
  font-size: clamp(44px, 8.5vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  /* room so descenders aren't clipped by background-clip: text */
  padding-bottom: 0.14em;
  max-width: 720px;
  /* Frosted silver — light-on-dark, since the hero stays dark while every
     other section is light. Opaque gradient stops on purpose (never
     alpha < 1; see the Samsung Internet note in CLAUDE.md). */
  color: #d8d8d8;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #969696 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 44px rgba(255, 255, 255, 0.06);
}

.hero__sub {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.60);
  max-width: 420px;
}

/* Scroll nudge — replaces the hero CTA; sends people down the page */
.hero__scroll {
  position: absolute;
  /* centered via auto margins — .reveal owns the transform property */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  bottom: 26px;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.hero__scroll:hover { color: rgba(255, 255, 255, 0.85); }

.hero__scroll svg {
  width: 16px;
  height: 16px;
  color: #F2A35C;
  animation: scroll-bob 2.2s ease-in-out infinite;
}

@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ===================================================
   SECTIONS — shared
   =================================================== */
.section {
  position: relative;
  padding: clamp(60px, 9vw, 108px) 24px;
  /* No border between these — they share --bg-elevated and are meant to
     read as one continuous argument (problem → services → proof → process),
     not stacked, separately-labeled cards. Only #process gets a rule,
     since that's where the page actually changes color into the CTA strip. */
  background: var(--bg-elevated);
}

#process {
  border-bottom: 1px solid var(--rule);
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Approach — statement + body --- */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.two-col h2 {
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.two-col p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-mid);
}

.two-col p + p { margin-top: 18px; }

/* --- Services — dark cards, icon-left rows on mobile --- */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.svc {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.svc__icon {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.55);
}

.svc__text {
  position: relative;
  z-index: 1;
}

.svc h3 {
  font-weight: 500;
  font-size: 17px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.92);
}

.svc p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

/* ===================================================
   MINI CASE — phone mockup + Før/Efter toggle
   =================================================== */
.case {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

/* Mobile: dissolve the wrapper so intro/demo/points become independent
   grid items again, letting `order` interleave demo between them —
   the wrapper only needs to act as a real box on desktop (see below),
   where it lets intro+points share one column sized by their own
   content, independent of the phone mockup's height. */
.case__col { display: contents; }
.case__intro { order: 1; }
.case__demo { order: 2; }
.case__points { order: 3; }

.case__intro h2 {
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.case__lead {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 460px;
}

.case__demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Segmented Før/Efter control */
.case__toggle {
  display: inline-flex;
  padding: 3px;
  gap: 4px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: rgba(17, 17, 17, 0.04);
}

.case__tab {
  min-height: 40px;
  padding: 9px 26px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--text-mid);
  font-family: 'Arimo', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.case__tab.is-active {
  background: #171717;
  color: #ffffff;
}

/* The phone — pure CSS, no images. Bezel stays black regardless of page
   theme, like a real phone's. */
.phone {
  position: relative;
  width: min(290px, 80vw);
  padding: 10px;
  border-radius: 44px;
  border: 1px solid rgba(17, 17, 17, 0.15);
  background: #0e0e10;
}

.phone__screen {
  position: relative;
  aspect-ratio: 9 / 18.5;
  border-radius: 34px;
  overflow: hidden;
  background: #111;
}

.phone__notch {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 20px;
  border-radius: 10px;
  background: #0e0e10;
  z-index: 3;
}

.mock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.mock.is-active {
  opacity: 1;
  transform: scale(1);
}

/* — FØR: a 2011 desktop site squeezed into a phone — deliberately dated
   regardless of the page's own theme. */
.mock--before {
  background: #d8d5cc;
  color: #2c2c2a;
  font-family: Georgia, 'Times New Roman', serif;
  padding: 46px 12px 0;
}

.mb__title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.mb__nav {
  display: block;
  font-size: 7.5px;
  text-align: center;
  text-decoration: underline;
  color: #4a4a46;
  padding: 4px 0 8px;
  border-bottom: 1px solid #b5b2a8;
  margin-bottom: 8px;
  white-space: nowrap;
}

.mb__img {
  height: 24%;
  background: #b9b6ac;
  border: 1px solid #a09d92;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-style: italic;
  color: #6d6b62;
  margin-bottom: 8px;
}

.mb__text {
  font-size: 8px;
  line-height: 1.55;
  text-align: justify;
  margin-bottom: 8px;
}

.mb__updated {
  font-size: 7px;
  font-style: italic;
  color: #7c7a70;
}

.mb__footer {
  margin-top: auto;
  border-top: 1px solid #b5b2a8;
  padding: 7px 0 10px;
  font-size: 7px;
  text-align: center;
  color: #55534c;
}

/* — EFTER: mobile-first, one obvious action — always its own light theme
   regardless of the parent page, representing a real business's site. */
.mock--after {
  background: #fbfbfa;
  color: #17181c;
  font-family: 'Arimo', sans-serif;
  padding: 50px 16px 60px;   /* bottom room for the in-mock sticky book bar */
}

.ma__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ma__brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ma__menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ma__menu i {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #17181c;
}

.ma__heading {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
}

.ma__sub {
  font-size: 10px;
  font-weight: 500;
  color: #45464c;
  margin-bottom: 16px;
}

.ma__sub span { color: #8a8b90; font-weight: 400; }

.ma__cta {
  background: var(--beam-mid);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.ma__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.ma__chip {
  border: 1px solid #d9dade;
  color: #17181c;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  padding: 9px;
  border-radius: 10px;
}

.ma__prices { margin-bottom: 14px; }

.ma__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px;
  border-bottom: 1px solid #ebebe9;
  font-size: 10.5px;
  color: #45464c;
}

.ma__price b { font-weight: 600; color: #17181c; }

.ma__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.ma__gallery i {
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(160deg, #ecebe8 0%, #dddcd8 55%, #d2d1cc 100%);
}

.ma__hours {
  font-size: 9.5px;
  color: #8a8b90;
  text-align: center;
}

/* the mock site's own sticky booking bar — practising what we preach */
.ma__book {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  background: #17181c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 11px;
  border-radius: 100px;
}

.case__note {
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}

/* Annotation points */
.case__points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.case__point-num {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beam-accent-dim);
  margin-bottom: 8px;
}

.case__point p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 420px;
}

/* ===================================================
   PROCESS — vertical timeline on mobile
   =================================================== */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.step {
  position: relative;
  padding: 0 0 28px 28px;
  border-left: 1px solid var(--rule);
  margin-left: 4px;
}

.step:last-child { padding-bottom: 0; }

.step::before {
  content: '';
  position: absolute;
  left: -4.5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid rgba(17, 17, 17, 0.4);
}

.step__number {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beam-accent-dim);
  margin-bottom: 10px;
  display: block;
  line-height: 1.4;
}

.step h3 {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.step p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-mid);
}

/* ===================================================
   CTA STRIP + SUNRISE
   =================================================== */
.cta-strip {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 9vw, 108px) 24px clamp(160px, 28vw, 250px);
  border-bottom: none;
  background: var(--bg);
}

.cta-strip .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

/* Sunrise — the site's warm accent, echoing the hero's sun, clipped by
   the footer "horizon" */
.sunrise {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(520px, 58vw, 820px);
  z-index: 0;
  pointer-events: none;
}

/* Taller and a touch brighter than before, so the warmth is already
   visible behind the heading instead of only showing up once you've
   scrolled down to the footer "horizon". */
.sunrise__glow {
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%);
  width: 150%;
  height: 100%;
  background: radial-gradient(
    ellipse 62% 92% at 50% 100%,
    rgba(255, 184, 116, 0.6) 0%,
    rgba(234, 120, 42, 0.4) 26%,
    rgba(150, 62, 22, 0.2) 52%,
    rgba(80, 32, 12, 0.07) 74%,
    transparent 90%
  );
}

.sunrise__core {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 92%;
  height: 46%;
  background: radial-gradient(
    ellipse 52% 74% at 50% 100%,
    rgba(255, 224, 190, 0.95) 0%,
    rgba(255, 172, 92, 0.68) 17%,
    rgba(232, 112, 42, 0.34) 40%,
    transparent 72%
  );
}

.cta-strip__heading {
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-bright);
  max-width: 620px;
}

.cta-strip__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.cta-strip__note {
  font-size: 14px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* ===================================================
   FOOTER
   =================================================== */
.footer {
  position: relative;
  z-index: 1;
  /* extra bottom room on mobile so the sticky CTA bar never covers the email */
  padding: 26px 24px calc(96px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer span,
.footer a,
.footer p {
  font-size: 14px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.footer a:hover { color: var(--text-primary); }

/* ===================================================
   DOCUMENTS PAGE (dokumenter.html)
   =================================================== */
.docpage {
  padding-top: 132px;          /* clear the fixed nav */
  border-bottom: none;
  min-height: 70vh;
}

.docpage h1 {
  font-weight: 600;
  font-size: clamp(32px, 5.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-bright);
  margin-bottom: 16px;
}

.docpage__lead {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-mid);
  max-width: 540px;
  margin-bottom: 44px;
}

.doc-list { border-top: 1px solid var(--rule); }

.doc-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

.doc-item__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 3px;
  color: rgba(17, 17, 17, 0.6);
}

.doc-item h2 {
  font-weight: 500;
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.doc-item p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 560px;
}

/* Placeholder marker — remove once the real document is published */
.doc-item__status {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 13px;
  border: 1px solid var(--rule);
  border-radius: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--beam-accent-dim);
}

/* Same slot/size as .doc-item__status, but a real clickable pill button
   for documents that are actually published. */
.doc-item__open {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 5px 13px;
  border: 1px solid rgba(17, 17, 17, 0.28);
  border-radius: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.doc-item__open:hover {
  background: rgba(17, 17, 17, 0.08);
  border-color: rgba(17, 17, 17, 0.55);
  color: #000;
}

.docpage__note {
  margin-top: 40px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-mid);
  max-width: 580px;
}

.docpage__note a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===================================================
   LEGAL DOCUMENT PAGES (privatlivspolitik.html, ...)
   — full black body copy, unlike the site's usual dimmed
   text-mid, since this is reference/legal content meant
   to read as plain and unambiguous.
   =================================================== */
.docpage__updated {
  font-size: 14px;
  color: #000;
  margin-bottom: 44px;
}

.legal {
  max-width: 720px;
  color: #000;
}

.legal section + section {
  margin-top: 40px;
}

.legal h2 {
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: #000;
  margin-bottom: 14px;
}

.legal h3 {
  font-weight: 600;
  font-size: 16px;
  color: #000;
  margin: 22px 0 8px;
}

.legal p {
  font-size: 16px;
  line-height: 1.8;
  color: #000;
}

.legal p + p {
  margin-top: 14px;
}

.legal ul {
  margin: 14px 0;
  padding-left: 22px;
}

.legal li {
  font-size: 16px;
  line-height: 1.75;
  color: #000;
  margin-bottom: 8px;
}

.legal li:last-child {
  margin-bottom: 0;
}

.legal a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===================================================
   STICKY MOBILE CTA — appears after the hero scrolls away
   =================================================== */
.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(250, 247, 242, 0) 0%, rgba(250, 247, 242, 0.86) 34%, rgba(250, 247, 242, 0.96) 100%);
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.stickybar.vis {
  transform: translateY(0);
  pointer-events: auto;
}

body.drawer-open .stickybar { transform: translateY(110%); pointer-events: none; }

/* Exactly the nav's "Kontakt os" button (.nav__cta), just stretched to
   fill the row next to the doc icon — same action, same button look. */
.stickybar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 46px;
  padding: 12px 26px;
  border-radius: 0;
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
  font-family: 'Arimo', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.stickybar__btn:hover,
.stickybar__btn:active {
  background: #000000;
  color: #ffffff;
}

/* ===================================================
   DRAWER & OVERLAY (Kontakt os)
   =================================================== */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1999;
  opacity: 0;
  transition: opacity 0.28s;
  backdrop-filter: blur(3px);
}

.overlay.open { display: block; opacity: 1; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;                    /* mobile: full-width sheet */
  height: 100vh;
  height: 100dvh;
  background: #FFFFFF;
  z-index: 2000;
  overflow-y: auto;
  transform: translateX(100%);     /* fully hidden regardless of width — keep transform, not right-offset */
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid var(--rule);
}

.drawer.open { transform: translateX(0); }

.dhead {
  position: sticky;
  top: 0;
  background: #FFFFFF;
  border-bottom: 1px solid var(--rule);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.dhead h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.dclose {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 10px;
  margin: -10px;
  color: var(--text-mid);
  transition: color 0.2s;
}

.dclose:hover { color: var(--text-primary); }

.dbody { padding: 28px 24px 56px; }

.dintro {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-mid);
  margin-bottom: 28px;
}

.fg { margin-bottom: 16px; }

.fg label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.62);
  margin-bottom: 7px;
}

.fg input,
.fg textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: 'Arimo', sans-serif;
  font-size: 16px;                 /* ≥16px so iOS doesn't zoom on focus */
  color: #171717;
  background: #F2F2F2;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.fg input::placeholder,
.fg textarea::placeholder { color: #9E9E9E; }

.fg input:focus,
.fg textarea:focus {
  border-color: #B0B0B0;
  background: #FFFFFF;
}

.fg textarea { resize: vertical; min-height: 96px; }

/* Honeypot — off-screen; bots that auto-fill every input trip it */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ferr {
  display: none;
  font-size: 13px;
  color: #c14b34;
  margin-bottom: 12px;
}

.ferr.vis { display: block; }

.bsub {
  width: 100%;
  min-height: 50px;
  padding: 14px;
  margin-top: 4px;
  font-family: 'Arimo', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: #171717;
  border: 1px solid #171717;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  border-radius: 100px;
}

.bsub:hover {
  background: #333333;
  border-color: #333333;
}

.bsub:disabled {
  opacity: 0.6;
  cursor: default;
}

.succ {
  display: none;
  text-align: center;
  padding: 48px 0;
}

.succ.vis { display: block; }

.succ h4 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.succ p { font-size: 14px; color: var(--text-mid); }

/* ===================================================
   REVEAL ANIMATIONS (scroll-triggered)
   =================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ===================================================
   DESKTOP — layered on top of the mobile base
   =================================================== */
@media (min-width: 821px) {

  /* Desktop gets a hairline back between sections — on the wider layout
     the extra whitespace alone reads as ambiguous, so a thin rule marks
     where one idea ends and the next begins. Mobile stays rule-free. */
  .section {
    border-bottom: 1px solid var(--rule);
  }

  /* Desktop restores the floating centered pill — the mobile base is a
     full-width bar flush with the top edge instead. */
  .nav {
    top: 22px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    justify-content: space-between;
    padding: 11px 26px;
    border-radius: 8px;
    width: min(1152px, 94vw);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .nav__cta { display: inline-flex; }
  .nav__actions .nav__icon-btn { display: inline-flex; }

  .nav__logo-img { height: 24px; }
  .nav__logo-text { font-size: 24px; }
  .nav-logo-live__mark { height: 24px; width: 24px; }
  .nav-logo-live__text { font-size: 24px; }

  /* --- Beam: searchlight cone fanning toward the right edge.
         Focal point ~61% / 50%; proven desktop tuning. --- */
  .beam__glow {
    background: radial-gradient(
      ellipse 50% 64% at 88% 50%,
      rgba(75, 111, 245, 0.17) 0%,
      rgba(26, 45, 160, 0.08) 38%,
      rgba(16, 27, 96, 0.03) 64%,
      transparent 82%
    );
    transform-origin: 88% 50%;
  }

  .beam__cone {
    background: conic-gradient(
      from 0deg at 61% 50%,
      transparent 50deg,
      rgba(26, 45, 160, 0.06) 62deg,
      rgba(90, 125, 245, 0.25) 76deg,
      rgba(200, 216, 255, 0.62) 84deg,
      rgba(255, 255, 255, 0.92) 90deg,
      rgba(200, 216, 255, 0.62) 96deg,
      rgba(90, 125, 245, 0.25) 104deg,
      rgba(26, 45, 160, 0.06) 118deg,
      transparent 130deg
    );
    -webkit-mask-image: radial-gradient(
      ellipse 86% 124% at 61% 50%,
      #000 18%,
      rgba(0, 0, 0, 0.96) 58%,
      rgba(0, 0, 0, 0.66) 84%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 86% 124% at 61% 50%,
      #000 18%,
      rgba(0, 0, 0, 0.96) 58%,
      rgba(0, 0, 0, 0.66) 84%,
      transparent 100%
    );
    transform-origin: 61% 50%;
  }

  .beam__flare {
    background: radial-gradient(
      ellipse 24% 3% at 83% 50%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(200, 216, 255, 0.45) 36%,
      rgba(90, 125, 245, 0.16) 64%,
      transparent 88%
    );
    transform-origin: 83% 50%;
  }

  .hero { align-items: center; }

  .hero__content {
    margin: 0 0 0 clamp(0px, 11vw, 240px);
    padding: 80px clamp(32px, 5vw, 72px) 0;
  }

  .section { padding-left: clamp(32px, 6vw, 80px); padding-right: clamp(32px, 6vw, 80px); }

  .two-col { grid-template-columns: 1fr 1fr; gap: 64px; }
  .two-col__body { padding-top: 8px; }

  /* Services: three separately-boxed dark cards, same idea as mobile —
     just laid out in a row instead of stacked. */
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  .svc {
    display: block;
    padding: 38px;
  }

  .svc__icon { margin: 0 0 18px; color: rgba(255, 255, 255, 0.55); }
  .svc h3 { color: rgba(255, 255, 255, 0.92); }

  /* Case: text left, phone right. A plain 2-column, single-row grid —
     .case__col (intro+points, a real flex column here, not display:contents)
     sizes itself by its own content only, independent of the phone
     mockup's height, which is what keeps intro and points close together
     regardless of how tall .case__demo is. */
  .case {
    grid-template-columns: 1fr minmax(340px, 420px);
    column-gap: 80px;
    align-items: start;
  }

  .case__col {
    display: flex;
    flex-direction: column;
    gap: 48px;
    grid-column: 1;
  }

  .case__demo { grid-column: 2; }

  /* Process: three columns */
  .steps { grid-template-columns: repeat(3, 1fr); }

  .step {
    padding: 0 40px;
    border-left: none;
    margin-left: 0;
    border-right: 1px solid var(--rule);
  }

  .step::before { display: none; }
  .step:first-child { padding-left: 0; }
  .step:last-child { border-right: none; padding-right: 0; }

  /* CTA strip: heading left, button right */
  .cta-strip .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }

  .cta-strip__action { align-items: center; }

  .footer {
    flex-direction: row;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
    padding: 26px clamp(32px, 6vw, 80px);
  }

  /* No sticky bar on desktop */
  .stickybar { display: none; }

  /* Drawer becomes a side panel */
  .drawer { width: 460px; max-width: 100vw; }
  .dhead { padding: 18px 32px; }
  .dbody { padding: 32px 32px 56px; }
}

/* ===================================================
   REDUCED MOTION
   =================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll svg { animation: none; }
  .beam__glow, .beam__cone, .beam__flare { animation: none; }
  .mock { transition: none; }
  .stickybar { transition: none; }
  html { scroll-behavior: auto; }
}