/* Renterabatt landing page. Direction "The place carries it" (seed 584029387), in Stor-Oslo
   Eiendom's own look from soeiendom.no: aubergine #1f192c, cream #fff9ed, burgundy #521e27,
   Neue Hans Kendrick with bold italic capitals for headings, rounded outlined buttons.
   soeiendom.no uses Kendrick ExtraBold (800); we only have Bold (700), so headings use Bold Italic. */
@font-face { font-family: Kendrick; src: url('assets/fonts/NeueHansKendrick-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Kendrick; src: url('assets/fonts/NeueHansKendrick-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Kendrick; src: url('assets/fonts/NeueHansKendrick-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
:root {
  --bg: #1f192c;
  --surface: #2a2339;
  --ink: #fff9ed;
  --muted: #c9c0b4;
  --accent: #fff9ed;
  --accent-ink: #1f192c;
  --paper: #fff9ed;
  --paper-ink: #1f192c;
  --wine: #521e27;

  --step-small: 1rem;
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --step-display: clamp(3.5rem, 1.2rem + 8.2vw, 9.5rem);

  --margin: clamp(16px, 2.2vw, 32px);
  --bar: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body)/1.55 Kendrick, Arial, sans-serif;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
section[id], .doors { scroll-margin-top: var(--bar); }

.display {
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: .92;
}
.head {
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--step-head);
  line-height: .92;
  letter-spacing: -0.005em;
}
.lead { font-size: var(--step-lead); line-height: 1.35; }

/* ---------- Bar ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  height: var(--bar);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--margin);
  background: var(--bg);
}
/* Wordmark at the lead step. */
.wordmark {
  font-weight: 700;
  font-style: italic;
  font-size: var(--step-lead);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
}
.bar-links { display: flex; gap: 28px; }
.bar-links a { font-size: var(--step-small); font-weight: 500; text-decoration: none; }
.bar-links a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- First screen: the two doors ---------- */
.door {
  display: flex;
  min-height: calc(100svh - var(--bar));
  flex-direction: column;
}
.door-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px 48px;
  align-items: end;
  padding: clamp(16px, 3vh, 40px) var(--margin) clamp(24px, 4vh, 44px);
}
.door-intro h1 { font-size: var(--step-display); }
.door-lead { display: grid; gap: 20px; max-width: 34ch; }
.partners { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; color: var(--muted); font-size: var(--step-small); }
.partners img { height: auto; filter: brightness(0) invert(1); }
.partners img[alt=""] { width: 92px; }
.partners img[alt="DNB"] { width: 40px; }
.partners span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.doors {
  display: flex;
  flex: 1;
  min-height: 460px;
  gap: 6px;
}
.project {
  position: relative;
  display: flex;
  flex: 1 1 0;
  overflow: hidden;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--margin) var(--margin);
  background: var(--surface);
  color: var(--ink);
  transition: flex-grow .7s var(--ease);
}
.project-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.project-pilar .project-media { object-position: 50% 35%; }
/* A neutral scrim under the name and the action only. */
.project::after {
  position: absolute;
  inset: 22% 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, 0)); /* taste-skill-ignore: neutral scrim over the photo */
  content: '';
}
.project-text, .project .button { position: relative; z-index: 1; }
.project-text { display: grid; gap: 14px; min-width: 0; }
.project-place { font-size: var(--step-small); font-weight: 500; }
.project-name { font-size: var(--step-display); line-height: .82; }
.button {
  display: inline-flex;
  min-height: 52px;
  flex: none;
  align-items: center;
  padding: 0 26px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-small);
  font-weight: 600;
  text-decoration: none;
  transition: background .25s ease, transform .25s var(--ease);
}
@media (hover: hover) {
  .doors:hover .project { flex-grow: .8; }
  .doors .project:hover { flex-grow: 1.35; }
  .project:hover .project-media { transform: scale(1.04); }
  .project:hover .button { background: transparent; color: var(--ink); }
}


/* ---------- Band of unequal panels ---------- */
.band-section { padding-top: clamp(120px, 14vw, 200px); }
.band-title { padding: 0 var(--margin) 56px calc(var(--margin) + 16.6%); }
.band { display: flex; height: 68svh; min-height: 420px; }
.slice { position: relative; overflow: hidden; transition: flex-grow .5s var(--ease); }
.slice img { width: 100%; height: 100%; object-fit: cover; }
.slice-1 { flex: 5 1 0; }
.slice-2 { flex: 2 1 0; }
.slice-3 { flex: 3 1 0; }
.slice-4 { flex: 2 1 0; }
@media (hover: hover) { .band .slice:hover { flex-grow: 6; } }
.slice-title {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 21ch;
  padding: 24px;
  font-size: var(--step-lead);
  font-weight: 500;
  line-height: 1.25;
  background: rgba(0, 0, 0, .5);
}
.caption { padding: 20px var(--margin) 0; color: var(--muted); font-size: var(--step-small); }

/* ---------- Rows with margin photographs ---------- */
.rows {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: clamp(120px, 14vw, 200px);
  padding: 0 var(--margin) clamp(96px, 10vw, 160px);
  background: var(--paper);
  color: var(--paper-ink);
}
.rows-title { grid-column: 5 / span 7; display: flex; min-height: 70svh; align-items: center; }
.row { grid-column: 5 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
.row + .row { margin-top: 104px; }
.row-text { display: grid; gap: 14px; }
.row-name { font-weight: 700; font-style: italic; font-size: var(--step-head); line-height: .92; text-transform: uppercase; }
.row-text p { max-width: 34ch; }
.row-photo { height: auto; object-fit: cover; }
.row-photo-tall { width: 240px; aspect-ratio: 4 / 5; }
.row-photo-wide { width: 320px; aspect-ratio: 3 / 2; }
.row-photo-square { width: 180px; aspect-ratio: 1; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: clamp(64px, 8vw, 120px) 0; }
.marquee-track { display: flex; width: max-content; align-items: center; gap: .3em; font-size: clamp(5rem, 2rem + 11vw, 13rem); animation: marquee 38s linear infinite; }
.marquee-track b { width: .14em; height: .14em; border-radius: 50%; background: var(--accent); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Numbers: the live calculator and the loan example ---------- */
.numbers { padding: 0 var(--margin); }
.numbers-title { padding-left: 3vw; }
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: 96px;
  align-items: start;
}
.calc { grid-column: 1 / span 5; display: grid; gap: 14px; padding: 36px; border-radius: 4px; background: var(--surface); }
.calc-row { display: flex; justify-content: space-between; gap: 16px; font-weight: 500; }
.calc-row output { color: var(--ink); font-variant-numeric: tabular-nums; }
.calc input[type='range'] { width: 100%; height: 36px; margin: 0 0 10px; accent-color: var(--accent); background: transparent; cursor: ew-resize; }
.calc-saving { display: grid; gap: 4px; margin-top: 12px; }
.calc-saving span { color: var(--muted); font-size: var(--step-small); }
.calc-saving strong { font-weight: 700; font-style: italic; font-size: var(--step-head); line-height: .9; font-variant-numeric: tabular-nums; }
.calc-lines { display: grid; gap: 10px; margin-top: 16px; }
.calc-lines div { display: flex; justify-content: space-between; gap: 16px; font-size: var(--step-small); }
.calc-lines dt { color: var(--muted); }
.calc-lines dd { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.example { grid-column: 8 / span 5; position: relative; }
.example-name { position: absolute; top: 0; left: -32%; font-size: var(--step-small); font-weight: 500; color: var(--muted); }
.example-table { display: grid; gap: 26px; }
.example-table div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.example-table div.gap { margin-top: 18px; }
.example-table dt { color: var(--muted); }
.example-table dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.example-table div:last-child dd { max-width: 22ch; font-weight: 500; }
.note { max-width: 60ch; margin-top: 40px; color: var(--muted); font-size: var(--step-small); }

/* ---------- Footer ---------- */
.foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 100svh;
  margin-top: clamp(120px, 14vw, 200px);
  background: var(--surface);
}
.foot-photo { grid-column: 1 / span 6; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.foot-field { grid-column: 8 / span 5; display: flex; flex-direction: column; padding: 80px var(--margin) 32px 0; }
.foot-wordmark { font-weight: 700; font-style: italic; font-size: var(--step-lead); text-transform: uppercase; }
.foot-menu { display: grid; gap: 18px; margin-top: 48px; padding: 0; list-style: none; }
.foot-menu a { display: inline-block; font-weight: 700; font-style: italic; font-size: var(--step-head); line-height: .92; text-transform: uppercase; text-decoration: none; transition: transform .3s var(--ease), color .3s ease; }
@media (hover: hover) {
  .foot-menu:hover a { color: var(--muted); }
  .foot-menu a:hover { color: var(--ink); transform: translateX(12px); }
}
.foot-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; font-size: var(--step-small); }
.foot-blocks strong { font-weight: 600; }
.legal { margin-top: auto; padding-top: 48px; color: var(--muted); font-size: var(--step-small); }

/* ---------- Entrances ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal { transition-delay: var(--delay, 0s); }
/* The first screen arrives on load: the title, the lead, then each project. */
.js .door .reveal { opacity: 0; transform: translateY(20px); animation: rise .9s var(--ease) var(--delay, 0s) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .door-intro { grid-template-columns: 1fr; }
  .door-lead { justify-self: start; max-width: 46ch; }
  .rows-title, .row { grid-column: 1 / -1; }
  /* Panels are too narrow for name and button side by side: the button goes under the name. */
  .project { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 20px; }
  .project-name { font-size: clamp(3.5rem, 1rem + 8vw, 6rem); }
  .calc { grid-column: 1 / -1; }
  .example { grid-column: 1 / -1; margin-top: 64px; }
  .example-name { position: static; margin-bottom: 20px; }
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  .bar-links { display: none; }
  .door-intro { padding-top: 12px; }
  .doors { flex-direction: column; gap: 4px; }
  .project { min-height: 50svh; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 18px; }
  .project-name { font-size: 18vw; }
  .project .button { width: 100%; justify-content: center; }
  .band-title { padding-left: var(--margin); padding-bottom: 32px; }
  /* Two rows split 64/36 and 36/64, so the slices stay unequal. */
  .band { display: grid; grid-template-areas: "a a a a a a a b b b b" "c c c c d d d d d d d"; grid-template-columns: repeat(11, 1fr); grid-template-rows: 1fr 1fr; height: 84svh; }
  .slice-1 { grid-area: a; } .slice-2 { grid-area: b; } .slice-3 { grid-area: d; } .slice-4 { grid-area: c; }
  .slice-title { max-width: 100%; font-size: var(--step-body); padding: 16px; }
  .rows { display: block; }
  .rows-title { min-height: 50svh; }
  .row { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .row + .row { margin-top: 64px; }
  .row-photo-tall { width: 100%; }
  .row-photo-wide { width: 70%; justify-self: end; }
  .row-photo-square { width: 55%; }
  .numbers-title { padding-left: 0; font-size: 9.5vw; }
  .numbers-grid { margin-top: 48px; }
  .calc { padding: 24px 20px; }
  .foot { display: block; }
  .foot-photo { height: 50svh; }
  .foot-field { padding: 48px var(--margin) 32px; }
  .foot-menu a { font-size: 8vw; }
  .foot-blocks { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .js .reveal, .js .door .reveal { transition: none; animation: none; transform: none; opacity: 1; }
  .project, .project-media, .slice { transition: none; }
}