/* ==========================================================================
   EDB fixerne — design tokens (retro-futurist: 1970s sunset meets glowing grid)
   Base is LIGHT; dark "tech" bands (header, ticker, tech panel, kontakt) carry
   the neon-grid Tron/sci-fi accent so it reads as a deliberate contrast, not
   a whole dark site.
   ========================================================================== */
:root{
  --paper: #E7DFC9;
  --paper-2: #F2ECDA;
  --paper-3: #FBF8EF;
  --ink: #1C1912;
  --ink-70: rgba(28,25,18,.72);
  --ink-45: rgba(28,25,18,.48);

  --olive: #4C6222;
  --rust: #D8450F;
  --rust-bright: #FF5A1F;
  --mustard: #C97F00;
  --mustard-bright: #FFC94A;
  --teal: #0E7A6E;
  --teal-bright: #2BE9D0;

  --panel: #0A0C10;
  --panel-2: #12151C;
  --hairline-dark: rgba(234,241,246,.14);
  --hairline-light: rgba(28,25,18,.12);
  --cream-on-dark: #EAF1F6;
  --cream-70-on-dark: rgba(234,241,246,.72);
  --cream-45-on-dark: rgba(234,241,246,.45);
  --grid-line-dark: rgba(43,233,208,.16);

  --glow-rust: 0 0 18px rgba(255,90,31,.5);
  --glow-teal: 0 0 18px rgba(43,233,208,.45);
  --glow-mustard: 0 0 18px rgba(255,201,74,.45);

  --display: 'Fraunces', ui-serif, Georgia, serif;
  --body: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  --radius: 22px;
  --radius-sm: 10px;
  --container: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--display); font-weight: 700; margin: 0 0 .4em; letter-spacing: -0.01em; }
p{ margin: 0 0 1em; }
.ital{ font-style: italic; font-weight: 500; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 999; opacity:.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.eyebrow{
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem;
  margin: 0 0 .9em; color: var(--rust); font-weight: 700;
}
.eyebrow-dark{ color: var(--rust); }
.eyebrow-light{ color: var(--mustard-bright); text-shadow: var(--glow-mustard); }
/* used inside dark panels */
.on-dark .eyebrow{ color: var(--teal-bright); text-shadow: var(--glow-teal); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: .95em 1.7em; border-radius: 6px; font-family: var(--mono); font-weight: 700;
  font-size: .9rem; text-transform: uppercase; letter-spacing: .06em;
  border: 2px solid transparent; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--ink); color: var(--paper-3); }
.btn-primary:hover{ background: var(--rust); color: #1a0700; box-shadow: var(--glow-rust); }
.btn-ghost{ border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper-3); }

/* ==========================================================================
   Header (dark band)
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  background: rgba(10,12,16,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline-dark);
}
.wordmark{ display:flex; align-items:center; }
.wordmark-logo{ height: 42px; width: auto; display:block; filter: drop-shadow(0 0 10px rgba(43,233,208,.35)); }
.main-nav{ display:flex; gap: 2rem; font-size: .88rem; font-weight: 600; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--cream-on-dark); }
.main-nav a{ position: relative; padding-bottom: 2px; }
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background: var(--teal-bright);
  box-shadow: var(--glow-teal);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.main-nav a:hover::after{ transform: scaleX(1); }
.header-cta{
  font-family: var(--mono); font-weight: 700; font-size: .82rem; white-space: nowrap;
  border: 2px solid var(--rust-bright); color: var(--rust-bright); padding: .5em 1em; border-radius: 6px;
}
.header-cta:hover{ background: var(--rust-bright); color: #1a0700; box-shadow: var(--glow-rust); }
.nav-toggle{ display:none; }

@media (max-width: 860px){
  .main-nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; flex-direction: column; gap:5px; background:none; border:0; padding:6px; }
  .nav-toggle span{ width: 22px; height: 2px; background: var(--teal-bright); display:block; }
  .main-nav.open{
    display:flex; flex-direction: column; position: absolute; top: 100%; left:0; right:0;
    background: var(--panel); padding: 1.2rem 1.5rem; gap: 1rem; border-bottom: 1px solid var(--hairline-dark);
  }
}

/* ==========================================================================
   Hero — this is where the space/grid motif is concentrated
   ========================================================================== */
.hero{
  position: relative; overflow: hidden;
  padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 6vw, 4rem);
  display:grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center;
  max-width: var(--container); margin: 0 auto;
  background: radial-gradient(ellipse 70% 60% at 78% 30%, rgba(255,90,31,.08), transparent 70%);
}
.hero-sunburst{
  position:absolute; top: 46%; right: -14%; translate: 0 -50%;
  width: min(60vw, 760px); aspect-ratio: 1; border-radius: 50%; z-index: 0;
  background: repeating-conic-gradient(
    rgba(216,69,15,.28) 0deg 2deg, transparent 2deg 20deg
  );
  animation: spin 70s linear infinite;
}
.hero-sunburst::after{
  content:""; position:absolute; inset: 22%; border-radius: 50%;
  border: 1px solid rgba(28,25,18,.18);
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.hero-inner{ position: relative; z-index: 1; }
.hero-crawl{
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--teal);
  text-transform: uppercase; opacity: .85; margin-bottom: 1.4em;
  transform: perspective(300px) rotateX(22deg); transform-origin: top left; max-width: 34ch;
}
.hero-title{ font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: .98; margin-bottom: .45em; color: var(--ink); }
.hero-title .glow-rust{ color: var(--rust); }
.hero-title .glow-teal{ color: var(--teal); }
.hero-sub{ max-width: 46ch; font-size: 1.08rem; color: var(--ink-70); margin-bottom: 1.6em; }
.hero-actions{ display:flex; gap: 1rem; flex-wrap: wrap; }

.hero-photo-frame{
  position: relative; z-index: 1;
  aspect-ratio: 4/5; border-radius: var(--radius);
  overflow: hidden;
  display:flex; align-items:flex-end;
  box-shadow: 14px 18px 0 rgba(28,25,18,.14);
  border: 3px solid var(--ink);
}
.hero-art{ position:absolute; inset:0; width:100%; height:100%; }
.hero-photo-caption{
  position: relative; z-index: 1; padding: 1.2rem;
  font-family: var(--mono); font-size: .78rem; color: var(--cream-on-dark);
  background: linear-gradient(to top, rgba(5,6,10,.85), transparent);
  width: 100%; line-height: 1.5;
}
.cursor-blink{ animation: blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity: 0; } }

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .hero-photo-frame{ order: -1; aspect-ratio: 16/9; }
}

.wave-divider{ display:block; width: 100%; height: 46px; }
.wave-divider path{ fill: var(--panel); }

/* ==========================================================================
   Capability strip (marquee) — dark ticker band
   ========================================================================== */
.capability-strip{
  background: var(--panel); color: var(--teal-bright);
  padding: .9rem 0; overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid var(--hairline-dark);
}
.strip-track{
  display: inline-flex; gap: 1.4rem; align-items:center;
  font-family: var(--mono); font-size: .85rem; letter-spacing: .05em;
  animation: marquee 34s linear infinite;
  text-shadow: 0 0 10px rgba(43,233,208,.4);
}
.strip-track .dot{ color: var(--rust-bright); font-size: .5rem; text-shadow: var(--glow-rust); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ==========================================================================
   Section shells
   ========================================================================== */
section{ padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 4vw, 3rem); }
.section-head{ max-width: var(--container); margin: 0 auto 2.6rem; }
.section-head h2{ font-size: clamp(2rem, 3.6vw, 2.8rem); max-width: 16ch; }
.section-lede{ max-width: 56ch; color: var(--ink-70); font-size: 1.05rem; }

/* ==========================================================================
   Produkter — platesamlingen (signature element)
   ========================================================================== */
.produkter{ background: var(--paper-2); }

.crate-wrap{ position: relative; max-width: var(--container); margin: 0 auto; }
.crate{
  display:flex; gap: 1.1rem; overflow-x: auto; padding: 1rem 2.4rem 1.6rem .25rem;
  scroll-snap-type: x mandatory; scroll-padding-left: .25rem;
  -ms-overflow-style: none; scrollbar-width: none;
}
.crate::-webkit-scrollbar{ display:none; }

.crate-wrap::after{
  content:""; position:absolute; top:0; right:0; bottom: 1.6rem; width: 90px;
  background: linear-gradient(to right, transparent, var(--paper-2));
  pointer-events: none;
}

.crate-nav{
  position:absolute; top: 40%; translate: 0 -50%; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink);
  background: var(--paper-3); color: var(--ink); display:flex; align-items:center; justify-content:center;
  font-family: var(--body); font-size: 1.1rem; cursor:pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.crate-nav:hover{ background: var(--ink); color: var(--paper-3); transform: translateY(-50%) scale(1.06); }
.crate-nav.prev{ left: -14px; }
.crate-nav.next{ right: -14px; }
@media (max-width: 720px){ .crate-nav{ display:none; } }

.crate-rail{
  max-width: var(--container); margin: 0 auto; height: 3px; border-radius: 999px;
  background: var(--hairline-light); position: relative; overflow: hidden;
}
.crate-rail-thumb{
  position:absolute; top:0; left:0; height:100%; width: 30%;
  background: var(--rust); border-radius: 999px; transition: left .1s linear;
}

.record{ scroll-snap-align: start; flex: 0 0 auto; width: min(52vw, 210px); position: relative; }
.sleeve{
  display: block; width: 100%;
  position: relative; aspect-ratio: 1; border-radius: var(--radius-sm);
  border: 2px solid var(--ink); overflow: hidden; background: var(--panel);
  box-shadow: 6px 8px 0 rgba(28,25,18,.14);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.record:hover .sleeve{ transform: translate(-3px,-3px); border-color: var(--teal); box-shadow: 9px 11px 0 rgba(28,25,18,.18), 0 0 22px rgba(43,233,208,.3); }

.vinyl{
  position: absolute; top: 50%; left: 62%; width: 78%; aspect-ratio: 1; z-index: 0;
  translate: -30% -50%;
  border-radius: 50%; background:
    radial-gradient(circle at center, #05060A 0 6%, transparent 6.3%),
    repeating-radial-gradient(circle at center, #06070b 0 2px, #14171f 2px 4px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: translate .35s ease;
}
.record:hover .vinyl{ translate: -8% -50%; }

.sleeve-photo{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit: cover; opacity: .92; }
.sleeve-photo.contain{ object-fit: contain; padding: 20%; background: var(--panel-2); }
.sleeve-scrim{ position:absolute; inset:0; z-index:2; background: linear-gradient(to top, rgba(5,6,10,.94) 22%, rgba(5,6,10,.05) 62%); }
.sleeve-art{ position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; padding: .8rem; }
.sleeve-label{ position: relative; z-index: 2; color: var(--paper-3); width: 100%; }
.sleeve-label .rec-name{
  font-family: var(--display); font-weight: 900; line-height: 1.1;
  font-size: 1.02rem;
  overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}
.sleeve-label .rec-tag{ font-family: var(--mono); font-size: .62rem; line-height: 1.35; opacity: .9; margin-top: .3em; color: var(--teal-bright); }

.record-meta{ padding: .8rem .1rem 0; }
.record-meta p{ font-size: .84rem; color: var(--ink-70); margin-bottom: .5em; }
.record-link{ font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--rust); }
.record-link::after{ content: " →"; }

.record.ghost .sleeve{
  border-style: dashed; border-color: var(--hairline-light); background: transparent; box-shadow: none;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.record.ghost .sleeve p{ font-family: var(--mono); font-size: .82rem; color: var(--ink-45); padding: 1.5rem; margin:0; }

/* ==========================================================================
   Tech dark panel
   ========================================================================== */
.tech-panel{
  background: var(--panel); color: var(--cream-on-dark); position: relative; overflow: hidden;
  border-top: 1px solid var(--hairline-dark); border-bottom: 1px solid var(--hairline-dark);
}
.tech-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(var(--grid-line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 75%);
}
.tech-panel-inner{ max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
.tech-panel h2{ color: var(--paper-3); font-size: clamp(2rem, 3.6vw, 2.8rem); max-width: 18ch; }
.tech-panel > .tech-panel-inner > p{ max-width: 60ch; color: var(--cream-70-on-dark); font-size: 1.05rem; }
.tech-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.4rem; }
.tech-item{ border-top: 2px solid var(--grid-line-dark); padding-top: 1.2rem; }
.tech-num{ font-family: var(--mono); color: var(--rust-bright); font-size: .85rem; text-shadow: var(--glow-rust); }
.tech-item h3{ color: var(--paper-3); font-size: 1.2rem; margin: .4em 0 .3em; }
.tech-item p{ color: var(--cream-70-on-dark); font-size: .95rem; margin: 0; }
@media (max-width: 760px){ .tech-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Om oss
   ========================================================================== */
.om{ background: var(--paper); }
.om-inner{ max-width: 760px; margin: 0 auto; }
.om h2{ font-size: clamp(2rem, 3.6vw, 2.8rem); }
.om-text{ color: var(--ink-70); font-size: 1.06rem; }

/* ==========================================================================
   Tjenester
   ========================================================================== */
.tjenester{ background: var(--paper-2); }
.tjeneste-grid{
  max-width: var(--container); margin: 0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.tjeneste-card{
  background: var(--paper-3); border: 2px solid var(--ink); border-radius: var(--radius-sm);
  padding: 1.6rem 1.4rem; box-shadow: 6px 6px 0 rgba(28,25,18,.1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tjeneste-card:hover{ transform: translateY(-4px); box-shadow: 6px 10px 0 rgba(28,25,18,.14); }
.tjeneste-icon{ width: 26px; height: 26px; margin-bottom: .7em; }
.tjeneste-icon svg{ width:100%; height:100%; }
.tjeneste-card:nth-child(1) .tjeneste-icon{ color: var(--rust); }
.tjeneste-card:nth-child(2) .tjeneste-icon{ color: var(--teal); }
.tjeneste-card:nth-child(3) .tjeneste-icon{ color: var(--mustard); }
.tjeneste-card:nth-child(4) .tjeneste-icon{ color: var(--olive); }
.tjeneste-card h3{ font-size: 1.08rem; margin-bottom: .35em; }
.tjeneste-card p{ font-size: .92rem; color: var(--ink-70); margin:0; }
@media (max-width: 980px){ .tjeneste-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .tjeneste-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Referanser
   ========================================================================== */
.referanser{ background: var(--paper); }
.ref-grid{
  max-width: var(--container); margin: 0 auto;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem;
}
.ref-card{ margin:0; padding: 1.6rem; background: var(--paper-3); border-radius: var(--radius-sm); border-left: 4px solid var(--olive); }
.ref-card:nth-child(1){ border-left-color: var(--teal); }
.ref-card:nth-child(2){ border-left-color: var(--rust); }
.ref-card:nth-child(3){ border-left-color: var(--mustard); }
.ref-card:nth-child(4){ border-left-color: var(--olive); }
.ref-card p{ font-size: 1.02rem; color: var(--ink); margin-bottom: .8em; }
.ref-card footer{ font-family: var(--mono); font-size: .8rem; color: var(--ink-70); }
@media (max-width: 760px){ .ref-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Kontakt — dark panel
   ========================================================================== */
.kontakt{ background: var(--panel); border-top: 1px solid var(--hairline-dark); position: relative; overflow: hidden; }
.kontakt::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(var(--grid-line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000 0%, transparent 75%);
}
.kontakt-inner{ max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
.kontakt h2{ color: var(--paper-3); font-size: clamp(2rem, 3.6vw, 2.8rem); max-width: 16ch; }
.kontakt-lede{ color: var(--cream-70-on-dark); max-width: 50ch; margin-bottom: 2.2rem; }
.kontakt-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.kontakt-item{
  display:block; padding: 1.4rem; border: 1px solid var(--hairline-dark); border-radius: var(--radius-sm);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
a.kontakt-item:hover{ border-color: var(--teal-bright); background: rgba(43,233,208,.06); box-shadow: var(--glow-teal); }
.kontakt-label{ display:block; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mustard-bright); margin-bottom: .5em; }
.kontakt-value{ font-family: var(--display); font-size: 1.2rem; color: var(--paper-3); }
@media (max-width: 760px){ .kontakt-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--panel); color: var(--cream-45-on-dark); text-align:center; padding: 1.8rem 1rem; font-size: .82rem; }
.footer-sub{ margin-top:.3em; opacity:.7; }

a:focus-visible, button:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }