/* ──────────────────────────────────────────────────────────────────────────
   BlueHous campaign pages — additions for the full-height pages.

   Loaded only by the pages whose sections each hold a screen (the partner
   brief and the invest-abroad page), after lp.css. Nothing here changes a
   page that does not link it, which is why it is a second file rather than
   an addition to the shared stylesheet the four approved pages depend on.

   What lives here:
     .nav         the fixed bar with a mobile panel that replaces .hdr
     .sec/.band   every section holds a screen and centres what it contains
     .pills       the hero claim row, kept to one line
     .quote-band  the full-bleed photo band with one line of display serif
                  over it, matching <ImageQuote> on the platform
     .dots        the fixed section rail down the side of a full-height page
   plus the two overrides every one of these pages had grown its own copy of
   (the form card's top rule, and three/four-across tracks for .grid.list).

   Behaviour for the nav is in lp-nav.js and the rail is in lp-dots.js; a page
   that links this file loads both.

   LTR is the default here and RTL takes overrides further down, because the
   two differ in ways that are not drift: uppercase is a no-op on Hebrew, the
   Latin tracking reads wrong at Hebrew letterforms, and the underline has to
   grow from the other edge.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Fixed nav ────────────────────────────────────────────────────────────
   Transparent over the hero photograph, solid once the page has moved. Sits
   under the scroll progress line (z-index 60 in the kit) on purpose, so the
   line stays readable across the top of the bar. */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 55;
  background: linear-gradient(to bottom, rgba(7, 7, 14, 0.42), rgba(7, 7, 14, 0.12) 62%, transparent);
  transition: background 450ms var(--ease), box-shadow 450ms var(--ease);
}
.nav.solid {
  background: rgba(7, 7, 14, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  block-size: 104px;
}
.nav-logo { display: flex; align-items: center; flex: none; }
/* Deliberately large: the bar is the only branding on a page that no longer
   carries the .hdr, so the mark reads at arm's length rather than as a favicon. */
.nav-logo img { inline-size: clamp(220px, 18vw, 290px); block-size: auto; }

.nav-links { display: none; align-items: center; gap: clamp(20px, 2.4vw, 38px); }
.nav-links a,
.nav-m a {
  position: relative;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* A two-word label wrapped onto two lines inside a 104px bar, which then
     pushed the whole row out of vertical centre. Labels stay short instead. */
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color var(--t-hover) var(--ease);
}
.nav-links a:hover { color: #fff; }
/* The underline draws itself from the leading edge rather than fading in. */
.nav-links a::after {
  content: "";
  position: absolute;
  inset-block-end: -5px;
  inset-inline: 0;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

.nav-cta {
  display: none;
  align-items: center;
  flex: none;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sh-cta);
  transition: background var(--t-hover) var(--ease);
}
.nav-cta:hover { background: var(--blue-lift); }

.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  inline-size: 22px;
  block-size: 1.5px;
  margin-inline: auto;
  background: #fff;
  transition: transform 300ms var(--ease), opacity 200ms var(--ease);
}
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.nav-m {
  background: rgba(7, 7, 14, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-m nav { display: flex; flex-direction: column; gap: var(--s5); padding-block: var(--s6); }
.nav-m .nav-cta { display: inline-flex; align-self: flex-start; }

@media (min-width: 1100px) {
  .nav-links, .nav-cta { display: flex; }
  .nav-burger, .nav-m { display: none; }
}

/* Hebrew: uppercase does nothing, the Latin tracking reads wrong at these
   letterforms, and the underline has to grow from the right. */
html[dir="rtl"] .nav-links { gap: clamp(18px, 2vw, 32px); }
html[dir="rtl"] .nav-links a,
html[dir="rtl"] .nav-m a {
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
html[dir="rtl"] .nav-links a::after { transform-origin: right center; }
html[dir="rtl"] .nav-cta {
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

/* ── Full-height sections ─────────────────────────────────────────────────
   Every section holds at least one screen and centres what it contains. Grid
   rather than flex so .wrap keeps resolving its own width math, and min-
   rather than fixed height so a section taller than the screen still grows
   instead of clipping.

   The photo bands are deliberately NOT in this rule: on the platform an
   ImageQuote is a pause between two stacks of content, not a screen of its
   own, and it keeps that proportion here. */
.sec {
  min-block-size: 100svh;
  display: grid;
  align-content: center;
  scroll-margin-block-start: 104px;
}
.band { scroll-margin-block-start: 104px; }
.hero { min-block-size: 100svh; scroll-margin-block-start: 0; }
/* The fixed nav floats over the hero, so the hero's own content has to start
   below it rather than under it. */
.hero-grid { padding-block: clamp(132px, 12vw, 156px) clamp(44px, 5vw, 64px); }
@supports not (min-block-size: 100svh) {
  .sec, .hero { min-block-size: 100vh; }
}

/* ── Hero badge ───────────────────────────────────────────────────────────
   The launch date used to sit in the page header, which the nav replaced. It
   now opens the hero copy, above the eyebrow.

   Solid rather than the kit's tinted-glass treatment: over a photograph the
   12%-cyan fill left the date reading as a faint outline, and it is the one
   piece of urgency on the page. White on strong blue, per the brief. */
.hero .badge {
  margin-block-end: var(--s4);
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* The pulse dot inherited the cyan it no longer sits on. */
.hero .badge > i { background: #fff; }

/* ── Hero pills, one line ─────────────────────────────────────────────────
   Three claims, one line, on every page — but the widest set (the partner
   page's "No listing fee / Commission 2 to 5% / Paid on a signed contract") is
   wider than the hero's text column at its natural size. Earlier attempts
   sliced the last pill off at the column edge, then wrapped it to a second row;
   neither is what the row is meant to look like.

   So the row shrinks to fit instead of overflowing: the type, the padding and
   the gap are all fluid, and the icons hold their size so the pills stay
   legible at the small end. `min-inline-size: 0` on the grid children is what
   lets the column report a width the row can measure itself against. */
.hero-grid > * { min-inline-size: 0; }
.pills {
  flex-wrap: nowrap;
  gap: clamp(6px, 0.55vw, 10px);
  min-inline-size: 0;
  max-inline-size: 100%;
}
.pill {
  flex: 0 1 auto;
  min-inline-size: 0;
  white-space: nowrap;
  gap: clamp(5px, 0.4vw, 8px);
  padding-inline: clamp(8px, 0.7vw, 13px);
  font-size: clamp(0.68rem, 0.52rem + 0.3vw, 0.8rem);
}
.pill svg { flex: none; }

/* ── Two-column section heads ─────────────────────────────────────────────
   The kit bottom-aligns the heading against the lead beside it (align-items:
   end), which reads well while the two are a similar height. Where the lead
   runs four lines against a two-line heading — "Where your project sits,",
   "What we check" — the heading drops to the bottom of the row and leaves the
   eyebrow stranded above a 140px hole. Top-aligning costs nothing on the
   balanced heads and removes the hole on the rest. */
@media (min-width: 920px) {
  .head { align-items: start; }
}

/* ── Form card ────────────────────────────────────────────────────────────
   Without the brand rule across the top edge. */
.form-card::before { content: none; }

/* ── Cards as ruled rows ──────────────────────────────────────────────────
   The kit already ships a boxless variant (.grid.list); every grid on these
   pages uses it. The only thing missing was three- and four-across tracks,
   which .list does not define because it was written for pairs. */
.grid.list.g-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.list.g-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 1100px) {
  .grid.list.g-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.list.g-4 { grid-template-columns: repeat(4, 1fr); }
}

/* The platform sets these bands in Playfair Display and nothing else in it.
   Latin only, which is all the band needs — its line is written in English on
   purpose, the way it is on bluehous.com. */
@font-face {
  font-family: "Playfair Display";
  src: url("/lp/fonts/PlayfairDisplay.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── Quote band ─────────────────────────────────────────────────────────── */
.quote-band {
  position: relative;
  isolation: isolate;
  /* clip, not hidden: `hidden` makes the section a scroll container, and the
     view() timeline below would then measure the image against a box it never
     leaves — so the drift would never move. */
  overflow: clip;
  display: grid;
  place-items: center;
  /* The platform's <ImageQuote> is 55vh, 70vh from the sm breakpoint up, with
     a 320px floor — a pause between two stacks of content rather than a screen
     of its own. Matched here rather than run full-height. */
  block-size: 55vh;
  min-block-size: 320px;
  padding: var(--s8) var(--s5);
  background: var(--ink-0);
  color: var(--on-dark);
  color-scheme: dark;
  text-align: center;
}

/* The image is taller than its frame and drifts as the band crosses the
   viewport. The wrapper moves, not the image, so object-fit still resolves
   against a full-size box. */
.quote-band-img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 0;
  block-size: 128%;
}

.quote-band-img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  .quote-band { block-size: 70vh; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .quote-band-img {
      animation: band-drift linear both;
      animation-timeline: view();
    }
  }
}

@keyframes band-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -22%, 0); }
}

/* Flat rather than directional: the line is centred, so there is no single
   edge that has to carry the type. Same 35% the platform band uses. */
.quote-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--grain), rgba(0, 0, 0, 0.35);
  background-size: 240px 240px, auto;
}

.quote-band-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s5);
  max-inline-size: 60rem;
}

/* Half again the size of a section heading — the band is the pause between
   two stacks of content, and it should read as one. */
.quote-band p.q {
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: clamp(2.25rem, 5vw, 3.375rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.quote-band hr {
  inline-size: 64px;
  block-size: 1px;
  margin: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.5);
}

.quote-band p.sub {
  max-inline-size: 42rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* ── Stat rows ────────────────────────────────────────────────────────────
   A long value ("€2.05 מיליארד") wraps to three lines while its neighbours take
   one, which pushed that column's caption and body text out of line with the
   rest of the row. Subgrid gives value / caption / body a shared row track per
   band, so they line up no matter how any one value wraps. */
@supports (grid-template-rows: subgrid) {
  .stats { grid-template-rows: auto auto auto; }
  .stat {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  /* .cap's top margin was doing the spacing between value and caption; inside a
     subgrid track it fights the row gap, so the row owns it instead. */
  .stat .cap { margin-block-start: 0; }
  .stats { row-gap: var(--s4); }
}

/* ── Privacy note under the lead form ─────────────────────────────────────
   The form card is white, and .foot-note links had no colour of their own
   because until now they only ever appeared on dark sections. */
.privacy-note { margin-block-start: var(--s2); }
.privacy-note a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.privacy-note a:hover { color: var(--blue-lift); }

/* ── Back to top ──────────────────────────────────────────────────────────
   Appears once the hero is out of view. Sits opposite the dot rail so the two
   never overlap, and clears the mobile sticky CTA. */
.totop {
  position: fixed;
  inset-block-end: calc(20px + env(safe-area-inset-bottom));
  inset-inline-start: clamp(14px, 1.6vw, 26px);
  z-index: 54;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(7, 7, 14, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), background var(--t-hover) var(--ease);
}
.totop svg { inline-size: 20px; block-size: 20px; }
.totop.in { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--blue); border-color: var(--blue); }

/* Below 980px the kit reveals the sticky CTA across the bottom of the screen —
   same breakpoint, so the button clears it instead of sitting behind it. */
@media (max-width: 980px) {
  .totop { inset-block-end: calc(76px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .totop { transition: opacity 300ms linear; transform: none; }
}

/* ── Section rail ───────────────────────────────────────────────────────────
   One dot per full-height section, built by lp-dots.js from the sections that
   are actually on the page. Hidden where a section is not a screen tall
   anyway, and hidden from assistive tech: every dot duplicates a link the nav
   already exposes, so it is decoration with a shortcut attached. */
.dots {
  position: fixed;
  right: clamp(14px, 1.6vw, 26px);
  inset-block-start: 50%;
  z-index: 54;
  display: none;
  flex-direction: column;
  gap: 14px;
  transform: translateY(-50%);
}

.dots button {
  inline-size: 10px;
  block-size: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease);
}

.dots button:hover { transform: scale(1.25); }

.dots button.on {
  background: var(--cyan);
  border-color: var(--cyan);
  transform: scale(1.25);
}

/* Over a light section the white outline disappears, so the rail flips to ink
   the moment the dot's own section is a light one. */
.dots.on-light button { border-color: rgba(10, 10, 30, 0.35); }
.dots.on-light button.on { background: var(--blue); border-color: var(--blue); }

@media (min-width: 1100px) and (min-height: 620px) {
  .dots { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .dots button { transition: none; }
}