/* Experimental "bold" homepage (home-bold.html). Loaded after site.css.
   Full-dark poster direction: kinetic type, split screen, scroll-driven pan.
   Scroll effects use CSS scroll-driven animations where supported and
   fall back to static layouts everywhere else. */

body.bold {
  --ink: #0b1628;
  --ink-2: #132440;
  --paper: #eef0f4;
  --dim: rgba(238,240,244,0.7);
  --faint: rgba(238,240,244,0.16);
  --rose: #e8434b;
  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--ink);
  color: var(--paper);
}
/* Film grain, fixed so it never repaints on scroll */
body.bold::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bold-main a:focus-visible, .bold-main button:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.bold-main h2, .bold-main h3 { text-wrap: balance; }
.b-skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--paper); color: var(--ink); font-family: var(--sans); padding: 10px 16px; }
.b-skip:focus { top: 12px; }

.b-wrap { padding: 0 clamp(20px, 4vw, 64px); }
.b-label { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); }
.b-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 16px; font-weight: 600; white-space: nowrap;
  background: var(--paper); color: var(--ink); padding: 18px 28px;
  transition: transform 300ms var(--ease), background 200ms ease;
}
.b-btn:hover { background: var(--rose); }
.b-btn:active { transform: translateY(1px) scale(0.99); }
.b-btn .arr { transition: transform 300ms var(--ease); }
.b-btn:hover .arr { transform: translateX(4px); }
.b-link { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--paper); border-bottom: 1px solid var(--faint); padding-bottom: 3px; transition: border-color 200ms ease, color 200ms ease; }
.b-link:hover { color: var(--rose); border-color: var(--rose); }

/* ── Hero ──────────────────────────────────── */
.b-hero {
  position: relative; overflow: clip;
  min-height: calc(100dvh - 89px);
  display: grid; grid-template-rows: 1fr auto;
  padding-top: clamp(32px, 5vh, 64px); padding-bottom: clamp(28px, 5vh, 56px);
}
.b-hero h1 { position: relative; z-index: 2; margin: 0; font-weight: 400; }
.b-hero .kicker { display: block; max-width: 34ch; margin-bottom: clamp(16px, 3vh, 36px); }
.b-hero .line { display: block; overflow: clip; overflow-clip-margin: 0.12em; }
.b-hero .line > span { display: inline-block; }
.b-hero .w {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(88px, 18.5vw, 330px); line-height: 0.84; letter-spacing: -0.055em;
}
.b-hero .l1 .w { color: transparent; -webkit-text-stroke: 2px var(--paper); }
.b-hero .l2 { padding-left: 9vw; }
.b-hero .l2 em {
  font-family: 'Newsreader', serif; font-style: italic; font-weight: 400; text-transform: none;
  font-size: 0.42em; letter-spacing: -0.02em; color: var(--rose); margin-right: 0.12em; vertical-align: 0.42em;
}
.b-hero-photo {
  position: absolute; z-index: 1; right: clamp(20px, 6vw, 110px); top: 9%;
  width: clamp(200px, 25vw, 400px); aspect-ratio: 4 / 5;
  transform: rotate(4deg);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
}
.b-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.b-hero-photo span { position: absolute; right: 0; bottom: -34px; font-family: var(--sans); font-size: 13px; color: var(--dim); white-space: nowrap; }
.b-hero-foot {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap;
  margin-top: clamp(28px, 5vh, 56px);
}
.b-hero-foot p { margin: 0; max-width: 38ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--dim); }

@media (prefers-reduced-motion: no-preference) {
  .b-hero .line > span { animation: b-rise 1100ms var(--ease) both; }
  .b-hero .l2 > span { animation-delay: 140ms; }
  .b-hero .kicker, .b-hero-foot { animation: b-fade 900ms var(--ease) 380ms both; }
  .b-hero-photo { animation: b-drop 1300ms var(--ease) 200ms both; }
}
@keyframes b-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes b-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes b-drop { from { opacity: 0; transform: translateY(40px) rotate(10deg); } to { opacity: 1; transform: rotate(4deg); } }

/* ── Marquee ───────────────────────────────── */
.b-marquee { border-block: 1px solid var(--faint); overflow: hidden; padding: 26px 0; }
.b-marquee-track { display: flex; width: max-content; animation: b-marq 42s linear infinite; }
.b-marquee-track span {
  display: inline-flex; align-items: center; gap: 0.5em; padding-right: 0.5em;
  font-family: 'Newsreader', serif; font-style: italic; font-size: clamp(44px, 7vw, 104px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--dim); white-space: nowrap;
}
.b-marquee-track span::after { content: ""; width: 0.22em; height: 0.22em; background: var(--maroon-bright); }
@keyframes b-marq { to { transform: translateX(-50%); } }

/* ── Split screen: lease / own ─────────────── */
.b-two { padding-top: clamp(96px, 14vh, 160px); }
.b-two h2, .b-sec-title {
  font-family: 'Newsreader', serif; font-weight: 400;
  font-size: clamp(48px, 8vw, 128px); line-height: 0.95; letter-spacing: -0.035em;
  margin: 0; max-width: 12ch;
}
.b-two h2 em, .b-sec-title em { color: var(--rose); }
.b-split { display: flex; margin-top: clamp(48px, 8vh, 88px); min-height: 86dvh; }
.b-half {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 24px;
  padding: clamp(32px, 4vw, 64px);
  transition: flex-grow 700ms var(--ease);
}
.b-half.lease { background: var(--ink-2); }
.b-half.own { background: var(--maroon); }
.b-split:hover .b-half { flex-grow: 0.75; }
.b-split .b-half:hover, .b-split .b-half:focus-within { flex-grow: 1.5; }
.b-half .big {
  font-family: var(--sans); font-weight: 800; letter-spacing: -0.06em;
  font-size: clamp(120px, 17vw, 280px); line-height: 0.8; margin-top: auto;
  font-variant-numeric: lining-nums;
}
.b-half h3 { font-family: 'Newsreader', serif; font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.b-half p { margin: 0; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--dim); }
.b-half.own p { color: rgba(255,255,255,0.84); }
.b-half ul { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 15px; display: grid; gap: 8px; }
.b-half li::before { content: "+ "; color: var(--rose); }
.b-half.own li::before { color: var(--paper); }
.b-half .links { display: flex; gap: 24px; flex-wrap: wrap; }

/* ── Track record: vertical scroll drives a horizontal pan ── */
.b-deals { padding-top: clamp(96px, 14vh, 160px); }
.b-deals-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.b-tally { display: flex; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; font-family: var(--sans); }
.b-tally b { display: block; font-size: clamp(36px, 4vw, 60px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.b-tally span { font-size: 14px; color: var(--dim); }
.b-pan-sticky { padding: 48px 0 24px; overflow-x: auto; scroll-snap-type: x mandatory; }
.b-track { display: flex; gap: clamp(16px, 2vw, 32px); width: max-content; padding: 0 clamp(20px, 4vw, 64px); }
.b-card {
  scroll-snap-align: start;
  position: relative; display: block; overflow: hidden;
  width: clamp(290px, 42vw, 640px); aspect-ratio: 4 / 5; max-height: 72dvh;
  background: var(--ink-2);
}
.b-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease); }
.b-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,22,40,0.94) 8%, rgba(11,22,40,0.2) 55%, rgba(11,22,40,0) 75%); }
.b-card:hover img { transform: scale(1.05); }
.b-card .body { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 28px; }
.b-card .st { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.b-card .st.live { color: var(--rose); }
.b-card h3 { font-family: 'Newsreader', serif; font-weight: 400; font-size: clamp(34px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.025em; margin: 10px 0 0; }
.b-card .facts { font-family: var(--sans); font-size: 15px; color: var(--dim); margin-top: 10px; }
.b-card .units { list-style: none; margin: 16px 0 0; padding: 0; font-family: var(--sans); font-size: 14px; }
.b-card .units li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--faint); }
.b-card .units b { font-weight: 600; }
.b-card.end { background: var(--paper); color: var(--ink); display: flex; align-items: end; padding: 32px; }
.b-card.end::after { display: none; }
.b-card.end span { font-family: 'Newsreader', serif; font-size: clamp(44px, 5vw, 84px); line-height: 0.95; letter-spacing: -0.03em; }
.b-card.end:hover { background: var(--rose); }

@supports (animation-timeline: view()) {
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .b-pan { height: 380vh; view-timeline-name: --pan; }
    .b-pan-sticky { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; align-items: center; padding: 0; }
    .b-track { animation: b-pan linear both; animation-timeline: --pan; animation-range: contain 0% contain 100%; }
    .b-card { aspect-ratio: auto; height: 72dvh; }
  }
}
@keyframes b-pan { to { transform: translateX(calc(-100% + 100vw)); } }

/* ── Property types: expanding strips ──────── */
.b-types { padding-top: clamp(96px, 14vh, 160px); }
.b-strips { display: flex; gap: 10px; height: 76dvh; min-height: 520px; margin-top: clamp(40px, 6vh, 72px); }
.b-strip {
  position: relative; overflow: hidden; display: block;
  flex: 1 1 0; min-width: 0;
  transition: flex-grow 800ms var(--ease);
}
.b-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) brightness(0.7); transition: filter 600ms ease, transform 1200ms var(--ease); }
.b-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,22,40,0.9), rgba(11,22,40,0) 60%); }
.b-strips:hover .b-strip { flex-grow: 0.7; }
.b-strips .b-strip:hover, .b-strips .b-strip:focus-within, .b-strips .b-strip:focus-visible { flex-grow: 3; }
.b-strip:hover img, .b-strip:focus-visible img { filter: none; transform: scale(1.04); }
.b-strip .name {
  position: absolute; z-index: 1; left: 24px; bottom: 24px;
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em;
  font-size: clamp(36px, 4.4vw, 76px); line-height: 0.9;
  writing-mode: vertical-rl; transform: rotate(180deg);
  transition: opacity 300ms ease;
}
.b-strip .desc {
  position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 24px;
  padding-left: clamp(56px, 6vw, 100px);
  font-size: 18px; line-height: 1.45; max-width: 40ch;
  opacity: 0; transform: translateY(12px);
  transition: opacity 400ms ease, transform 600ms var(--ease);
}
.b-strip:hover .desc, .b-strip:focus-visible .desc { opacity: 1; transform: none; transition-delay: 250ms; }
.b-special { display: flex; gap: 12px 28px; flex-wrap: wrap; align-items: baseline; margin-top: 28px; font-family: var(--sans); }
.b-special strong { font-weight: 500; color: var(--dim); }

/* ── Market numbers ────────────────────────── */
.b-market { padding-top: clamp(96px, 14vh, 160px); }
.b-market p.lead { max-width: 52ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--dim); margin: 28px 0 0; }
.b-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 8vh, 88px); border-top: 1px solid var(--faint); }
.b-num { padding: 32px clamp(12px, 1.6vw, 28px) 0 0; border-right: 1px solid var(--faint); }
.b-num + .b-num { padding-left: clamp(12px, 1.6vw, 28px); }
.b-num:last-child { border-right: 0; }
.b-num .n { font-family: var(--sans); font-weight: 800; letter-spacing: -0.05em; font-size: clamp(44px, 5.3vw, 96px); line-height: 0.9; font-variant-numeric: lining-nums; }
.b-num .l { font-family: var(--sans); font-size: 15px; color: var(--dim); margin-top: 16px; max-width: 22ch; }
.b-note { font-family: var(--sans); font-size: 13px; color: var(--dim); margin-top: 28px; }

/* ── Process: steps light up as they pass ─── */
.b-process { padding-top: clamp(96px, 14vh, 160px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.b-process .side { position: sticky; top: 15vh; }
.b-process ol { list-style: none; margin: 0; padding: 0; }
.b-process li { padding: 6vh 0; border-top: 1px solid var(--faint); }
.b-process li h3 { font-family: 'Newsreader', serif; font-weight: 400; font-size: clamp(40px, 5vw, 80px); line-height: 1; letter-spacing: -0.03em; margin: 0; }
.b-process li p { margin: 18px 0 0; max-width: 48ch; font-size: 18px; line-height: 1.55; color: var(--dim); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .b-process li { animation: b-lit linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}
@keyframes b-lit { from { opacity: 0.18; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* ── FAQ ───────────────────────────────────── */
.b-faq { padding-top: clamp(96px, 14vh, 160px); }
.b-qs { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(32px, 5vw, 96px); margin-top: clamp(40px, 6vh, 72px); }
.b-q h3 { font-family: 'Newsreader', serif; font-weight: 400; font-size: clamp(24px, 2vw, 30px); line-height: 1.2; margin: 0; }
.b-q p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--dim); }
.b-q a { color: var(--rose); border-bottom: 1px solid rgba(232,67,75,0.45); }

/* ── Closing ───────────────────────────────── */
.b-end { padding-top: clamp(120px, 18vh, 200px); padding-bottom: clamp(64px, 10vh, 112px); }
.b-end .huge {
  display: block; font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(80px, 17vw, 300px); line-height: 0.84; letter-spacing: -0.055em; margin: 0;
}
.b-end .huge em { font-family: 'Newsreader', serif; font-weight: 400; text-transform: none; font-size: 0.5em; letter-spacing: -0.02em; color: var(--rose); vertical-align: 0.38em; }
.b-end-row { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-top: clamp(40px, 6vh, 72px); }
.b-mail {
  font-family: 'Newsreader', serif; font-style: italic; font-size: clamp(32px, 4.4vw, 72px); line-height: 1.1;
  background: linear-gradient(var(--rose), var(--rose)) 0 100% / 0 2px no-repeat;
  transition: background-size 600ms var(--ease), color 300ms ease; padding-bottom: 4px;
}
.b-mail:hover { background-size: 100% 2px; color: var(--rose); }
.b-areas { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--faint); font-family: var(--sans); font-size: 15px; }
.b-areas a { color: var(--dim); transition: color 200ms ease; }
.b-areas a:hover { color: var(--paper); }

/* ── Reveal (JS only) ──────────────────────── */
.js .rv { opacity: 0; transform: translateY(32px); transition: opacity 1000ms var(--ease), transform 1000ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .b-marquee-track { animation: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .b-half, .b-strip, .b-strip img, .b-card img { transition: none; }
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 900px) {
  .b-hero-photo { position: relative; right: auto; top: auto; margin: 32px 0 12px auto; width: 58%; }
  .b-hero { grid-template-rows: auto; }
  .b-hero .l2 { padding-left: 0; }
  .b-split { flex-direction: column; min-height: 0; }
  .b-half { min-height: 70dvh; }
  .b-split:hover .b-half, .b-split .b-half:hover { flex-grow: 1; }
  .b-strips { flex-direction: column; height: auto; min-height: 0; }
  .b-strip { flex: none; height: 240px; }
  .b-strip .name { writing-mode: horizontal-tb; transform: none; bottom: auto; top: 20px; }
  .b-strip .desc { opacity: 1; transform: none; padding-left: 0; font-size: 16px; }
  .b-nums { grid-template-columns: 1fr 1fr; }
  .b-num:nth-child(2) { border-right: 0; }
  .b-num:nth-child(3) { padding-left: 0; }
  .b-num { padding-bottom: 32px; border-bottom: 1px solid var(--faint); }
  .b-process { grid-template-columns: 1fr; }
  .b-process .side { position: static; }
  .b-qs { grid-template-columns: 1fr; }
  .b-card { width: 82vw; }
}

/* Shared nav/footer keep their own colors on the dark page */
body.bold .nav-wrap { color: var(--navy); }
.b-hero-photo { margin: 0; }
.b-pan-sticky { scroll-padding-inline: clamp(20px, 4vw, 64px); }
@media (max-width: 900px) {
  .b-hero-photo { margin: 32px 0 48px auto; }
  .b-hero-photo span { right: 0; bottom: -50px; white-space: normal; text-align: right; }
}
/* Red hover fill needs white text for contrast */
.b-btn:hover { background: #c8323a; color: var(--white); }
.b-card.end:hover { background: #c8323a; color: var(--white); }