/* Billy Budd Filmproduksjon – felles stil
   Farger, fonter og mål er hentet fra mockupen (versjon 2 – stor logo). */

/* Fonter ligger lokalt i /fonter (SIL Open Font License – fri bruk) */
@font-face { font-family: 'Instrument Serif'; src: url('fonter/instrument-serif-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonter/schibsted-grotesk-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonter/schibsted-grotesk-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonter/schibsted-grotesk-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --rod: #d60001;        /* hovedfarge. Billy Budd-oransje: #de4827 */
  --sort: #0e0c0b;
  --lys: #f2ede3;
  --film-bakgrunn: #2b2724;
  --kant: clamp(16px, 2.8vw, 40px);
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Schibsted Grotesk', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sort);
  color: var(--sort);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  hyphens: auto;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--lys); outline-offset: 4px; }

/* Serif i versaler – brukes til menyord, titler og overskrifter */
.serif {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---------- Topplinje (Kontakt · Lyd · Meny) ---------- */
.topp {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  padding: clamp(16px, 2.1vw, 30px) var(--kant) 0;
  color: var(--rod);
}
.topp > :last-child { justify-self: end; }
.topp a, .topp button {
  min-height: 44px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.topp .midt { justify-self: center; }
.topp .midt img { width: clamp(150px, 18vw, 260px); height: auto; }

/* ---------- Hero med showreel ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--film-bakgrunn);
}
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .stor-logo {
  position: absolute;
  left: var(--kant);
  bottom: clamp(20px, 2.5vw, 36px);
  width: calc(100% - 2 * var(--kant));
  height: auto;
}

/* ---------- Arbeid ---------- */
.arbeid {
  background: var(--rod);
  padding: clamp(20px, 2.5vw, 36px) var(--kant) clamp(64px, 10vw, 140px);
}
.seksjonstopp {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.seksjonstopp h2 { margin: 0; font: inherit; }

.filmer {
  list-style: none;
  margin: clamp(40px, 6.7vw, 96px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.film {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36vw) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.film .nr { justify-self: center; font-size: clamp(19px, 1.8vw, 26px); }
.film .ramme {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--film-bakgrunn);
}
.film .ramme video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
/* Tom ramme til filmen er klar */
.film .ramme.tom::after {
  content: attr(data-tekst);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, .72);
}
.film .tekst { display: flex; flex-direction: column; gap: 18px; }
.film .tittel {
  font-family: var(--serif);
  font-size: clamp(44px, 4.4vw, 64px);
  line-height: .9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.film .regi { font-size: 24px; text-transform: uppercase; }
.film .nr-mobil { display: none; }
.film:hover .tittel, .film:focus-visible .tittel { color: var(--lys); }
.film:hover .ramme video, .film:focus-visible .ramme video { transform: scale(1.03); }

/* ---------- Kontakt / bunn ---------- */
.kontakt {
  display: flex;
  flex-direction: column;
  padding: clamp(64px, 8.3vw, 120px) var(--kant) clamp(24px, 2.5vw, 36px);
  background: var(--sort);
  color: var(--rod);
}
.kontakt .utsagn {
  margin: 0;
  max-width: 1280px;
  font-family: var(--serif);
  font-size: clamp(38px, 5.3vw, 76px);
  line-height: .98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.kontaktinfo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: clamp(72px, 9.7vw, 140px);
  text-align: center;
}
.kontaktinfo div { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.kontaktinfo h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.kontaktinfo a { font-size: 24px; text-transform: uppercase; }
.kontakt .stor-logo { width: 100%; height: auto; margin-top: clamp(56px, 5.6vw, 80px); }
.bunnlinje {
  display: flex;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(20px, 2.5vw, 36px);
  font-size: 24px;
  text-transform: uppercase;
}

/* ---------- Meny (åpnes fra «Meny») ---------- */
.meny {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.1vw, 30px) var(--kant) clamp(20px, 2.4vw, 34px);
  background: var(--rod);
  color: var(--sort);
  overflow-y: auto;
}
.meny[hidden] { display: none; }
.meny .topp { position: static; padding: 0; color: var(--sort); }
.meny .topp .midt img { width: min(69vw, 1000px); }
.meny nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 40px 0;
}
.meny nav a {
  font-family: var(--serif);
  font-size: clamp(56px, 7.2vw, 104px);
  line-height: .92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.meny nav a:hover, .meny nav a:focus-visible { color: var(--lys); }
.meny .bunnlinje { margin: 0; }
.meny a:focus-visible, .meny button:focus-visible { outline-color: var(--sort); }

/* ---------- Prosjektside ---------- */
.prosjekt-hero .tittelblokk {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 var(--kant);
  text-align: center;
  color: var(--rod);
  transition: opacity .4s ease;
}
.prosjekt-hero .klient { font-size: clamp(19px, 1.8vw, 26px); text-transform: uppercase; }
.prosjekt-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 12.8vw, 184px);
  line-height: .84;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.spill {
  height: 44px;
  padding: 0 20px;
  background: var(--rod);
  color: var(--sort);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.prosjekt-hero .bunn-hjorner {
  position: absolute;
  left: var(--kant);
  right: var(--kant);
  bottom: clamp(16px, 2.1vw, 30px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--rod);
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 40px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
/* Demper bakgrunnsfilmen litt så den røde tittelen leses godt */
.prosjekt-hero video { filter: brightness(.72); transition: filter .4s ease; }
.prosjekt-hero.spiller video { filter: none; }
.prosjekt-hero.spiller .tittelblokk,
.prosjekt-hero.spiller .topp,
.prosjekt-hero.spiller .bunn-hjorner { opacity: 0; pointer-events: none; }

.info {
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: 100px var(--kant) 60px;
  background: var(--sort);
  color: var(--rod);
}
.info-rad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 80px; }
.info h2 {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.info p { margin: 0; font-size: 22px; line-height: 1.45; color: #efe9e1; }
.credits { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; align-content: start; }
.credits dt { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #a8a097; }
.credits dd { margin: 6px 0 0; font-size: 24px; color: #efe9e1; }
.neste {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-top: 44px;
  border-top: 1px solid rgba(239, 233, 225, .22);
}
.neste .liten { font-size: 24px; text-transform: uppercase; }
.neste .stor {
  font-family: var(--serif);
  font-size: clamp(56px, 8.3vw, 120px);
  line-height: .9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---------- Mobil ---------- */
@media (max-width: 899px) {
  .topp .midt img { width: 116px; margin-top: 4px; }
  .film { grid-template-columns: 1fr; gap: 12px; }
  .film .nr { display: none; }
  .film .nr-mobil { display: inline; }
  .film .regi { font-size: 19px; font-weight: 700; }
  .filmer { gap: 48px; }
  .kontaktinfo { grid-template-columns: 1fr; gap: 36px; }
  .kontaktinfo a, .bunnlinje { font-size: 19px; font-weight: 700; }
  .bunnlinje { flex-direction: column; }
  .meny .topp { grid-template-columns: 1fr 1fr; }
  .meny .topp .midt { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin-top: 24px; }
  .meny .topp .midt img { width: 100%; }
  .meny .bunnlinje { align-items: flex-start; }
  .info-rad { grid-template-columns: 1fr; gap: 48px; }
  .credits dd { font-size: 20px; }
  .neste { flex-direction: column; }
}

/* Respekter «reduser bevegelse» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Controls and keyboard support; the supplied design remains authoritative. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pause-reel{position:absolute;right:var(--kant);top:85px;z-index:2;color:var(--rod);font-size:14px;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.vis-alle{display:none}.film .ramme video{background:var(--film-bakgrunn)}
@media(max-width:899px){.filmer:not(.viser-alle)>li:nth-child(n+5){display:none}.vis-alle{display:block;border:1px solid currentColor;padding:14px 20px;width:100%;margin-top:40px;text-transform:uppercase}.pause-reel{top:65px}.kontaktinfo a{overflow-wrap:anywhere}}
.nav-directors{text-align:center}.nav-directors summary{list-style:none;cursor:pointer;font:400 clamp(56px,7.2vw,104px)/.92 var(--serif);letter-spacing:-.02em;text-transform:uppercase}.nav-directors summary::-webkit-details-marker{display:none}.nav-directors summary:hover{color:var(--lys)}.nav-directors>div{display:flex;flex-direction:column;gap:12px;padding:22px 0}.meny .nav-directors>div>a{font-size:clamp(27px,3vw,43px)}.service-page .nav-directors summary,.director-page .nav-directors summary{font-size:clamp(39px,6.7vw,96px)}