@charset "UTF-8";
/* ==========================================================================
   NEST — נדל"ן נתניה
   Design system + homepage
   Reference DNA: ogroup.com (structure, interaction, motion)
   Brand translation: mid-tone slate base, silver + blue accents (client mandate)
   Signature device: "the line that breaks the frame" — the blue diagonal
   that overshoots the N monogram, systematised across the whole page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   Display Hebrew  : Fb Absolutica  (licensed — drop files in assets/fonts/)
   Display Latin   : Barlow Condensed (same family as reference)
   Body            : Heebo (stand-in until Absolutica text weights land)
   -------------------------------------------------------------------------- */

/* ── Fb Absolutica (נדב עזרא / Fontbit, 2023) ──────────────────────────
   PAID FONT — not bundled. Buy it, then drop the whole webfont folder into
   assets/fonts/ and it lights up on its own; nothing else needs changing.
   Fontbit ships two naming patterns (plain, and a "woff2"-prefixed one, as
   in the FbEinstein folder), so both are listed per weight. Whichever files
   exist win; the missing ones are skipped silently.
   Weight map: דקיק 200 · קל 300 · רגיל 400 · בינוני 500 · כבד 700
   ------------------------------------------------------------------- */
/* Installed: Fb Absolutik Regular — ONE weight only.
   The full Absolutica family (דקיק/קל/רגיל/בינוני/כבד) is still to come;
   when it lands, add the four missing @font-face blocks and the headline
   weight contrast below can go back to weight instead of colour. */
@font-face {
  font-family: "Absolutik";
  src: url("../fonts/FbAbsolutik-Regular.woff2") format("woff2"),
       url("../fonts/FbAbsolutik-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* the same face answers to every weight we ask for, so nothing
   synthesises a fake bold and smears the geometry */
@font-face {
  font-family: "Absolutik";
  src: url("../fonts/FbAbsolutik-Regular.woff2") format("woff2"),
       url("../fonts/FbAbsolutik-Regular.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- the base scale ---
     Client brief: not black, and not as dark as the reference (#151A1C).
     Studio call: pull the saturation out so it reads as graphite rather
     than navy, and sit one clear step above the reference's black. --- */
  /* The page alternates DARK / LIGHT band by band after the hero.
     Neither end is absolute: the dark is black held back off the floor,
     the light is paper rather than screen-white. Together they average
     out to the mid tone the brief asks for, without a flat grey page. */
  --ink:  #141719;        /* the dark band — near-black, never #000 */
  --bone: #edeeea;        /* the light band — warm paper, never #fff */

  --slate-900: #0b0d0f;   /* deepest — video scrim */
  --slate-800: #101315;   /* footer, one notch under ink */
  --slate-700: #1a1e21;   /* raised surfaces on ink */
  --slate-600: var(--ink);
  --slate-500: var(--ink);
  --slate-400: #5c636b;   /* muted / "parameter not present" */
  --silver-300: #9aa0a6;
  --silver-200: #c6cace;
  --silver-100: #e6e8ea;
  --paper: var(--bone);
  --white: #ffffff;

  /* on the light band */
  --bone-ink: #16181a;    /* text on bone */
  --bone-mute: #6b7178;   /* secondary text on bone */
  --bone-line: rgba(20,23,25,.14);

  /* --- blue, sampled straight off the logo gradient --- */
  --blue-300: #4a85c8;
  --blue-400: #3970b1;    /* logo highlight */
  --blue-500: #2c5a90;    /* core accent (replaces reference red) */
  --blue-600: #204776;    /* logo deep */

  --accent: var(--blue-400);

  /* --- type --- */
  --font-display: "Absolutik", "Heebo", "Barlow Condensed", system-ui, sans-serif;
  /* Barlow has no Hebrew glyphs. CSS falls back PER GLYPH, so listing
     Absolutik straight after it means a mixed string like "גלובס · 2026"
     renders the digits in Barlow and the Hebrew in Absolutik — which is
     exactly the pairing this design wants. Without it, Hebrew silently
     dropped through to the system font. */
  /* One typeface across the whole site. Absolutik carries Latin and figures
     as well as Hebrew, so numbers and prices no longer switch face mid-line. */
  --font-latin: "Absolutik", "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Absolutik", "Heebo", system-ui, -apple-system, sans-serif;

  /* fluid display sizes */
  --fs-hero: clamp(2.6rem, 7.2vw, 7rem);
  --fs-h2: clamp(2rem, 5.2vw, 5rem);
  --fs-h3: clamp(1.4rem, 2.6vw, 2.4rem);
  --fs-body: clamp(1rem, 1.12vw, 1.125rem);
  --fs-label: clamp(.68rem, .8vw, .78rem);

  --tracking-label: .42em;   /* reference's tiny-label tracking */
  --tracking-nav: .18em;

  /* --- motion (measured off the reference) --- */
  --dur-fast: .15s;
  --dur: .3s;
  --dur-slow: .6s;
  --dur-reveal: 1s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: ease-in-out;

  /* --- layout --- */
  --gutter: clamp(1.25rem, 4.4vw, 5rem);
  --maxw: 1600px;
  --header-h: 92px;
  --rail-w: 58px;         /* vertical social rail */
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--white);
  background: var(--slate-500);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }

/* Latin runs inside Hebrew text keep the reference's condensed face */
.lat, .num { font-family: var(--font-latin); font-variant-numeric: lining-nums tabular-nums; }

/* --------------------------------------------------------------------------
   4. SHARED PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ── the page alternates band by band after the hero ── */
.section { position: relative; padding-block: clamp(4.5rem, 9vw, 9rem); overflow-x: clip; }
.section--ink  { background: var(--ink);  color: var(--white); }
.section--bone { background: var(--bone); color: var(--bone-ink); }
/* legacy aliases so older markup keeps working */
.section--paper { background: var(--bone); color: var(--bone-ink); }
.section--slate600 { background: var(--ink); }
.section--slate800 { background: var(--slate-800); }

/* everything that needs to flip on the light band, in one place */
.section--bone .label { color: var(--bone-mute); }
.section--bone .lede { color: var(--bone-mute); }
.section--bone .h2 { color: var(--bone-ink); }
/* nothing on a bone band may recolour a card's insides */
.section--bone .card,
.section--bone .card__body,
.section--bone .card__street,
.section--bone .card__price { color: var(--white); }
.section--bone .h2 .thin { color: var(--bone-mute); }
.section--bone .h2 b {
  background: linear-gradient(104deg, var(--blue-300) 0%, var(--blue-500) 42%, #13253a 100%);
  -webkit-background-clip: text; background-clip: text;
}
.section--bone .btn--ghost { --btn-fg: var(--bone-ink); box-shadow: inset 0 0 0 1px var(--bone-line); }
.section--bone .btn--ghost:hover { --btn-fg: var(--white); }

/* --- the signature: section label with a blue diagonal tick --- */
.label {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--font-display);
  font-size: clamp(.76rem, .88vw, .86rem);
  font-weight: 400;
  letter-spacing: .3em;      /* the reference's airy label, eased off for Hebrew */
  color: var(--silver-200);
}
.section--paper .label { color: var(--slate-600); }
.label::before {
  content: "";
  width: 34px; height: 2px;
  background: var(--accent);
  /* the diagonal: sheared, so it reads as the logo's breaking stroke */
  transform: skewX(-38deg);
  transform-origin: right center;
}

/* --- display headline ---
   The reference splits a headline across two weights and carries its red
   into the type. Absolutik ships one weight, so the split is carried by
   COLOUR instead: the first half sits back in silver, the second half
   lands in the brand blue, graded like the logo's diagonal. Same rhythm,
   our palette. Swap back to weight contrast if the full family arrives. */
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.025em;
  margin-block: 1.1rem 0;
  color: var(--white);
}
.h2 .thin { color: var(--silver-300); }
.section--paper .h2 { color: var(--slate-800); }
.section--paper .h2 .thin { color: var(--slate-400); }

/* The emphasised half takes a graded blue that dives toward ink — the same
   move the reference makes on "LET'S GET SOCIAL", where the accent runs
   from bright to almost black. Angle matches the monogram's diagonal. */
.h2 b {
  font-weight: 400;
  background: linear-gradient(104deg, #6aa6e0 0%, var(--blue-400) 38%, var(--blue-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* on paper it can go much deeper before it stops reading */
.section--paper .h2 b {
  background: linear-gradient(104deg, var(--blue-300) 0%, var(--blue-500) 42%, #13253a 100%);
  -webkit-background-clip: text; background-clip: text;
}

.lede { max-width: 58ch; color: var(--silver-200); }
.section--paper .lede { color: var(--slate-600); }

/* --- button: fill sweeps in on the diagonal (client asked for the
       reference's button animation; the angle is our brand's) --- */
.btn {
  --btn-fg: var(--white);
  /* graded on the monogram's own angle, so the button carries the same light
     as the diagonal in the logo instead of sitting as a flat block */
  --btn-bg: linear-gradient(104deg, #4d8ad0 0%, var(--blue-500) 52%, var(--blue-600) 100%);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 1.1rem;
  padding: 1.05rem 2.2rem;
  font-family: var(--font-display);
  font-size: clamp(.85rem, 1vw, .98rem);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  background-size: 160% 100%;
  background-position: 100% 0;
  overflow: hidden;
  /* one corner softened, the other three square — the reference's shape
     language (0 0 13.5px 0). Logical, so it mirrors correctly in RTL. */
  border-end-end-radius: 17px;
  transition: color var(--dur) var(--ease-inout),
              background-position var(--dur-slow) var(--ease-inout),
              box-shadow var(--dur) var(--ease-inout);
  box-shadow: 0 6px 22px rgba(32, 71, 118, .28);
}
.btn:hover { background-position: 0 0; box-shadow: 0 10px 30px rgba(32, 71, 118, .42); }
.btn > * { position: relative; z-index: 2; }
.btn::before {
  content: ""; position: absolute; inset: -2px -30% -2px -30%;
  background: var(--white);
  transform: translateX(-115%) skewX(-18deg);
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: 1;
}
[dir="rtl"] .btn::before { transform: translateX(115%) skewX(-18deg); }
.btn:hover { color: var(--blue-600); }
.btn:hover::before,
.btn:focus-visible::before { transform: translateX(0) skewX(-18deg); }

.btn__icon {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover .btn__icon { transform: rotate(90deg); }
.btn__icon svg { width: 100%; height: 100%; }

.btn--ghost { --btn-bg: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.section--paper .btn--ghost { --btn-fg: var(--slate-800); box-shadow: inset 0 0 0 1px rgba(32,71,118,.28); }

/* --------------------------------------------------------------------------
   5. SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* Mirrors the reference's AOS setup: fade-up / fade-left / fade-right /
   fade-in, 1000ms, 200ms stagger steps, fires once. Written natively so
   there is no library to load. Directions are LOGICAL — "start"/"end"
   mirror correctly in RTL. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(var(--rx, 0), var(--ry, 34px), 0);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

[data-reveal="up"], [data-reveal="stagger"] { --ry: 34px; --rx: 0; }
[data-reveal="in"]        { --ry: 0;   --rx: 0; }
[data-reveal="start"]     { --ry: 0;   --rx: 48px; }   /* enters from the inline start (right in RTL) */
[data-reveal="end"]       { --ry: 0;   --rx: -48px; }  /* enters from the inline end (left in RTL) */
[dir="rtl"] [data-reveal="start"] { --rx: 48px; }
[dir="rtl"] [data-reveal="end"]   { --rx: -48px; }
[data-reveal="scale"]     { --ry: 20px; --rx: 0; }
[data-reveal="scale"]     { transform: translate3d(0, 20px, 0) scale(.965); }
[data-reveal="scale"].is-in { transform: none; }

/* a headline can wipe up from behind its own edge instead of fading */
[data-reveal="wipe"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: none;
  transition: clip-path 1.15s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal="wipe"].is-in { clip-path: inset(0 0 -10% 0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--dur) var(--ease-inout),
              height var(--dur) var(--ease-inout),
              box-shadow var(--dur) var(--ease-inout);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(26,31,38,.72), transparent);
  transition: opacity var(--dur) var(--ease-inout);
}
.header.is-stuck {
  height: 70px;
  background: rgba(35,41,53,.94);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.header.is-stuck::before { opacity: 0; }

.header__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

/* logo: inline <use> so currentColor drives the strokes and the blue
   gradient inside the monogram survives */
.brand { display: flex; align-items: center; gap: .9rem; color: var(--white); }
/* monogram only in the header — it carries the mark on its own */
.brand__mark {
  height: 54px; width: auto; aspect-ratio: 147.87 / 173.75;
  transition: height var(--dur) var(--ease-inout), opacity var(--dur) var(--ease-inout);
}
.brand:hover .brand__mark { opacity: .82; }
.header.is-stuck .brand__mark { height: 42px; }
.brand__word {
  height: 15px; width: auto; aspect-ratio: 359.2 / 122.5;
  transition: height var(--dur) var(--ease-inout);
}
.header.is-stuck .brand__word { height: 12px; }
.footer__logo {
  height: 120px; width: auto; aspect-ratio: 359.2 / 316.9;
  color: var(--white);
}

/* --- nav --- */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.4rem); }
.nav__item { position: relative; }
/* the menu is Hebrew — it takes the brand face, not the Latin display face.
   uppercase is meaningless here, and Hebrew needs less tracking than the
   reference's Latin caps to stay tight. */
.nav__link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding-block: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(.92rem, 1.05vw, 1.04rem);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--white);
  white-space: nowrap;
}
/* underline grows from the inline-start, diagonal-capped */
.nav__link::after {
  content: ""; position: absolute;
  inset-block-end: 1.15rem; inset-inline-start: 0;
  height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform var(--dur) var(--ease-inout);
}
[dir="rtl"] .nav__link::after { transform-origin: right; }
.nav__item:hover > .nav__link::after,
.nav__item:focus-within > .nav__link::after { transform: scaleX(1); }

.nav__caret { width: 9px; height: 9px; transition: transform var(--dur) var(--ease-inout); opacity: .75; }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

/* --- dropdown ---
   Aligned to the item's inline-start edge and pulled back by the panel's own
   padding, so the first sub-item sits exactly under the word above it. It is
   NOT centred: `inset-inline-start: 50%` resolves to `right: 50%` in RTL while
   `translate: -50%` still moves physically left, which threw the whole panel
   half a width off. --- */
.nav__sub {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  margin-inline-start: -1.4rem;   /* cancels the item padding below */
  min-width: max(220px, 100% + 2.8rem);
  padding: .5rem 0;
  background: linear-gradient(180deg, rgba(26,30,33,.98), rgba(16,19,21,.98));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.07);
  border-end-end-radius: 16px;
  opacity: 0; visibility: hidden;
  /* the panel wipes down from its own top edge rather than sliding in */
  clip-path: inset(0 0 100% 0);
  transition: opacity var(--dur) var(--ease-inout),
              clip-path var(--dur-slow) var(--ease-out),
              visibility var(--dur);
}
/* the blue diagonal, at menu scale: a hairline that runs the panel's top */
.nav__sub::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-300), transparent 70%);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-slow) var(--ease-out);
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub {
  opacity: 1; visibility: visible;
  clip-path: inset(0 0 0 0);
}
.nav__item:hover > .nav__sub::before,
.nav__item:focus-within > .nav__sub::before { transform: scaleX(1); }

.nav__sub a {
  position: relative;
  display: block;
  padding: .68rem 1.4rem;
  font-size: .95rem;
  color: var(--silver-200);
  /* each line arrives a beat after the one above it */
  opacity: 0;
  translate: 0 -6px;
  transition: color var(--dur-fast) var(--ease-inout),
              background var(--dur-fast) var(--ease-inout),
              opacity var(--dur) var(--ease-out),
              translate var(--dur) var(--ease-out);
}
.nav__item:hover > .nav__sub a,
.nav__item:focus-within > .nav__sub a { opacity: 1; translate: 0 0; }
.nav__sub a:nth-child(1) { transition-delay: 0s, 0s, .06s, .06s; }
.nav__sub a:nth-child(2) { transition-delay: 0s, 0s, .12s, .12s; }
.nav__sub a:nth-child(3) { transition-delay: 0s, 0s, .18s, .18s; }
.nav__sub a:nth-child(4) { transition-delay: 0s, 0s, .24s, .24s; }

/* a blue tick grows in the margin instead of shoving the text sideways */
.nav__sub a::before {
  content: "";
  position: absolute;
  inset-block-start: 50%; inset-inline-start: .55rem;
  width: 0; height: 1px;
  background: var(--blue-300);
  transition: width var(--dur) var(--ease-out);
}
.nav__sub a:hover,
.nav__sub a:focus-visible { color: var(--white); background: rgba(57,112,177,.16); }
.nav__sub a:hover::before,
.nav__sub a:focus-visible::before { width: .55rem; }

@media (prefers-reduced-motion: reduce) {
  .nav__sub, .nav__sub a, .nav__sub::before, .nav__sub a::before { transition-duration: .01ms; }
}

.nav__item:focus-within .nav__caret { transform: rotate(180deg); }

/* --- burger --- */
.burger {
  display: none;
  width: 30px; height: 22px;
  position: relative;
}
.burger span {
  position: absolute; inset-inline: 0; height: 2px;
  background: var(--white);
  transition: transform var(--dur) var(--ease-inout), opacity var(--dur-fast) var(--ease-inout);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 10px; }
.burger span:nth-child(3) { top: 20px; }
.burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. SOCIAL RAIL — vertical, icon under icon, stays visible on scroll
   -------------------------------------------------------------------------- */
.rail {
  position: fixed;
  inset-inline-end: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 90;
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding-block: 1rem;
}
.rail::before,
.rail::after {
  content: ""; width: 1px; height: 42px;
  background: linear-gradient(var(--silver-300), transparent);
  opacity: .45;
}
.rail::after { background: linear-gradient(transparent, var(--silver-300)); }
.rail a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  color: var(--white);
  opacity: .78;
  transition: opacity var(--dur) var(--ease-inout),
              color var(--dur) var(--ease-inout),
              transform var(--dur) var(--ease-out);
}
.rail a:hover { opacity: 1; color: var(--blue-300); transform: scale(1.18); }
.rail a svg { width: 17px; height: 17px; }
/* over a bone band the rail inverts to ink so it never disappears */
.rail.is-dark a { color: var(--bone-ink); opacity: .6; }
.rail.is-dark a:hover { color: var(--blue-500); opacity: 1; }
.rail.is-dark::before { background: linear-gradient(rgba(20,23,25,.4), transparent); }
.rail.is-dark::after { background: linear-gradient(transparent, rgba(20,23,25,.4)); }

/* --------------------------------------------------------------------------
   8. SECTION 1 — HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh; min-height: 620px;
  overflow: hidden;
  background: var(--slate-900);
}
.hero__media { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-inout);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide video,
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* poster underneath so there is never a white flash */
.hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
/* The footage will change; the scrim is what guarantees the hero always
   reads premium and the type always clears contrast. */
.hero__slide video,
.hero__slide img { filter: saturate(.82) contrast(1.04) brightness(.86); }

.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    /* type bed, bottom */
    linear-gradient(to bottom, rgba(20,25,32,.62) 0%, rgba(20,25,32,.2) 30%, rgba(20,25,32,.55) 68%, rgba(20,25,32,.9) 100%),
    /* pull the inline-start corner down so the office block sits on ink */
    linear-gradient(to left, rgba(20,25,32,.72), rgba(20,25,32,.1) 58%),
    /* vignette */
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(16,20,26,.62) 100%);
}

.hero__content {
  position: relative; z-index: 3;
  height: 100%;
  display: grid; align-content: end;
  padding-block-end: clamp(2.5rem, 6vw, 5rem);
}

/* bottom-RIGHT corner, where the reference puts "Los Angeles".
   The page is RTL, so the right edge is the inline start. */
.hero__offices { justify-self: start; text-align: start; }

/* ── entrance: each line rises out from behind its own mask, staggered.
   Nothing fades in from nowhere — the reference reveals, it doesn't pop. ── */
.hero__reveal { display: block; overflow: hidden; }
.hero__reveal > * {
  display: block;
  transform: translateY(110%);
  animation: heroRise 1.15s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroRise { to { transform: translateY(0); } }

.hero__offices .label { display: flex; margin-block-end: .8rem; }

.hero__city {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.4vw, 7.2rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
  position: relative;
  display: inline-block;
  padding-inline-end: .06em;
}
/* the diagonal that breaks the frame, echoing the monogram */
/* the rule overshoots the word — the monogram's move, at page scale */
.hero__city::after {
  content: ""; position: absolute;
  inset-block-end: -.14em; inset-inline-start: -.06em;
  width: 112%; height: 3px;
  background: linear-gradient(to left, var(--blue-300), var(--blue-600));
  transform: skewX(-38deg) scaleX(0);
  transform-origin: right;
  animation: cityRule 1.2s var(--ease-out) 1.15s forwards;
}
@keyframes cityRule { to { transform: skewX(-38deg) scaleX(1); } }

.hero__sub {
  margin-block-start: 1.05rem;
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  color: var(--silver-200);
  letter-spacing: .04em;
}
/* the logo's own tagline, quietly, as the closing note of the hero */
.hero__tag {
  margin-block-start: .35rem;
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--blue-300);
}

/* scroll hint */
/* opposite corner to the office block, clear of the social rail */
.hero__scroll {
  position: absolute; z-index: 4;
  inset-block-end: clamp(1.4rem, 3vw, 2.4rem);
  inset-inline-end: calc(var(--rail-w) + .5rem);
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--silver-200);
}
.hero__scroll {
  opacity: 0;
  animation: heroFade .9s var(--ease-out) 1.5s forwards;
  transition: color var(--dur) var(--ease-inout);
}
.hero__scroll:hover { color: var(--white); }
@keyframes heroFade { to { opacity: 1; } }

.hero__scroll-line {
  position: relative;
  width: 1px; height: 62px;
  background: rgba(255,255,255,.22);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; inset-inline: 0; top: -55%;
  height: 55%;
  background: linear-gradient(transparent, var(--blue-300));
  animation: scrollPulse 2.4s var(--ease-inout) infinite;
}
@keyframes scrollPulse {
  0%   { transform: translateY(0); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}

/* slideshow dots — only shown when >1 video */
.hero__dots {
  position: absolute; z-index: 4;
  inset-block-end: clamp(1.6rem, 3vw, 2.6rem);
  inset-inline-start: 50%; translate: -50% 0;
  display: flex; gap: .55rem;
}
.hero__dot {
  width: 26px; height: 2px;
  background: rgba(255,255,255,.3);
  position: relative; overflow: hidden;
}
.hero__dot::after {
  content: ""; position: absolute; inset: 0;
  background: var(--blue-300);
  transform: scaleX(0); transform-origin: inline-start;
}
[dir="rtl"] .hero__dot::after { transform-origin: right; }
.hero__dot.is-active::after { animation: dotFill var(--slide-dur, 7s) linear forwards; }
@keyframes dotFill { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   9. SECTION 2 — PROPERTIES
   -------------------------------------------------------------------------- */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  margin-block-end: clamp(2.2rem, 4vw, 3.4rem);
}

/* the reference's rhythm: a square and a wide one, then three across.
   Rows share a fixed height so cards of different widths still line up. */
.cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(250px, 25vw, 400px);
  gap: clamp(.9rem, 1.5vw, 1.4rem);
}
.card:nth-child(1) { grid-column: span 2; }
.card:nth-child(2) { grid-column: span 4; }
.card:nth-child(3),
.card:nth-child(4),
.card:nth-child(5) { grid-column: span 2; }

.card {
  position: relative; isolation: isolate;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--slate-700);
  /* The card is self-contained: it sits on a dark photo whichever band the
     page puts it on, so it must never inherit the section's text colour.
     On the bone catalog it was inheriting ink and turning black. */
  color: var(--white);
}
.card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter var(--dur-slow) var(--ease-inout);
}
.card:hover .card__img { transform: scale(1.07); filter: saturate(1.1); }

.card__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(13,15,18,.88) 0%, rgba(13,15,18,.28) 44%, transparent 70%);
  transition: opacity var(--dur-slow) var(--ease-inout);
}
/* ── HOVER: a white veil washes over the photo and the card flips to
   dark-on-light, exactly as the reference does. ── */
.card__veil {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(255,255,255,.9);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-inout);
  pointer-events: none;
}
.card:hover .card__veil,
.card:focus-visible .card__veil { opacity: 1; }
.card:hover .card__scrim,
.card:focus-visible .card__scrim { opacity: 0; }

/* diagonal blue sweep rides in with the veil — the brand's signature move */
.card__sweep {
  position: absolute; inset: -20% -40%; z-index: 3;
  background: linear-gradient(100deg, transparent 42%, rgba(74,133,200,.3) 50%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 1s var(--ease-out);
  pointer-events: none;
}
.card:hover .card__sweep { transform: translateX(120%); }

/* the monogram signs the photo, bottom corner opposite the text */
.card__logo {
  position: absolute; z-index: 4;
  inset-block-end: 1.1rem; inset-inline-end: 1.2rem;
  height: 46px; width: auto; aspect-ratio: 147.87 / 173.75;
  color: var(--white);
  opacity: .5;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
  transition: opacity var(--dur-slow) var(--ease-inout),
              color var(--dur-slow) var(--ease-inout),
              transform var(--dur-slow) var(--ease-out),
              height var(--dur-slow) var(--ease-out);
}
.card:hover .card__logo {
  color: var(--slate-800);
  opacity: .3;
  height: 62px;
  filter: none;
  transform: translateY(-2px);
}

.card__status {
  position: absolute; z-index: 5;
  inset-block-start: 1.1rem; inset-inline-start: 1.1rem;
  padding: .34rem .8rem;
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .1em;
  background: rgba(13,15,18,.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  transition: background var(--dur-slow) var(--ease-inout),
              color var(--dur-slow) var(--ease-inout);
}
.card:hover .card__status { background: var(--blue-500); color: var(--white); }
.card__status--sold { background: rgba(32,71,118,.9); }

.card__body {
  position: absolute; z-index: 5;
  inset-inline: 0; inset-block-end: 0;
  padding: clamp(1.1rem, 2vw, 1.8rem);
  display: flex; flex-direction: column; align-items: flex-start;
  color: var(--white);
  transition: color var(--dur-slow) var(--ease-inout),
              transform var(--dur-slow) var(--ease-out);
}
/* on the white veil the whole block goes to ink */
.card:hover .card__body { color: var(--slate-800); transform: translateY(-6px); }
.card__price {
  display: block;
  font-family: var(--font-latin);
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  font-weight: 600; line-height: 1;
  letter-spacing: .01em;
  direction: ltr;                 /* ₪12,400,000 must not reorder in RTL */
  unicode-bidi: isolate;
  transition: color var(--dur-slow) var(--ease-inout);
}
/* on the white veil the price takes the accent — the reference does exactly
   this with its red; ours is the brand blue */
.card:hover .card__price { color: var(--blue-500); }
.card__price small { font-size: .5em; font-weight: 500; opacity: .8; letter-spacing: .1em; }
.card__rule {
  display: block;
  width: 46px; height: 2px; margin-block: .7rem;
  background: var(--accent);
  transform: skewX(-38deg);
  transform-origin: right center;
  transition: width var(--dur-slow) var(--ease-out);
}
.card:hover .card__rule { width: 84px; }
.card__street {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 500; line-height: 1.3;
}
.card__hood {
  display: block; font-size: .88rem; margin-block-start: .15rem;
  color: var(--silver-300);
  transition: color var(--dur-slow) var(--ease-inout);
}
.card:hover .card__hood { color: var(--slate-400); }

/* the detail row only exists on the veil, divided like the reference */
.card__meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .3rem 0;
  margin-block-start: 0;
  font-size: .8rem;
  color: var(--slate-400);
  max-height: 0; opacity: 0; overflow: hidden;
  border-block-start: 1px solid transparent;
  transition: max-height var(--dur-slow) var(--ease-out),
              opacity var(--dur-slow) var(--ease-inout),
              margin var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-inout);
}
.card:hover .card__meta {
  max-height: 4rem; opacity: 1;
  margin-block-start: .8rem;
  padding-block-start: .7rem;
  border-block-start-color: rgba(38,43,49,.22);
}
.card__meta span {
  display: inline-flex; align-items: center;
  padding-inline: .75rem;
  line-height: 1.2;
}
.card__meta span:first-child { padding-inline-start: 0; }
.card__meta span + span { border-inline-start: 1px solid rgba(38,43,49,.22); }
/* nothing struck through here: a feature the property lacks is not printed */

/* --------------------------------------------------------------------------
   10. SECTION 3 — VIDEO STRIP
   Resolves open item 1 in the brief. "Running continuously" means the CLIPS
   play continuously — the strip itself does not move. No heading, no carousel,
   no arrows, no dots, no translation. Six clips standing side by side,
   filling the full width of the screen, edge to edge.
   -------------------------------------------------------------------------- */
.strip {
  position: relative;
  background: var(--slate-800);
  overflow: hidden;
  line-height: 0;              /* kill inline-block gaps */
}
.strip__track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
}
.strip__item {
  position: relative;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  background: var(--slate-900);
}
.strip__item video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-inout);
  filter: saturate(.9) brightness(.92);
}
/* hairline seam between clips, and a lift on hover */
.strip__item + .strip__item::before {
  content: ""; position: absolute; z-index: 3;
  inset-block: 0; inset-inline-start: 0;
  width: 1px; background: rgba(255,255,255,.08);
}
.strip__item:hover video { transform: scale(1.04); filter: saturate(1) brightness(1); }
.strip__item::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(13,15,18,.42), transparent 46%);
  transition: opacity var(--dur-slow) var(--ease-inout);
  pointer-events: none;
}
.strip__item:hover::after { opacity: .35; }

@media (max-width: 1100px) {
  .strip__track { grid-template-columns: repeat(3, 1fr); }
  .strip__item { aspect-ratio: 9 / 12; }
}
@media (max-width: 560px) {
  .strip__track { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   11. SECTION 4 — ABOUT
   -------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.about__figure { position: relative; }
.about__figure img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 12px; }
/* the diagonal breaks out of the frame's inline-start corner,
   the same move the blue stroke makes inside the monogram */
.about__figure::after {
  content: ""; position: absolute;
  inset-block-end: -14px; inset-inline-start: -22px;
  width: 42%; height: 3px;
  background: linear-gradient(to left, var(--blue-600), var(--blue-400));
  transform: skewX(-38deg);
}
.about__logo {
  height: 76px; width: auto; aspect-ratio: 147.87 / 173.75;
  margin-block-end: 1.4rem;
}

/* --------------------------------------------------------------------------
   12. SECTION 5 — NUMBERS
   -------------------------------------------------------------------------- */
/* six metrics, six columns — never 5 + an orphan */
.stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1.8rem, 3.4vw, 3rem) clamp(1.2rem, 2.2vw, 2.2rem);
  margin-block-start: clamp(2.4rem, 4vw, 3.6rem);
}
@media (max-width: 1240px) { .stats { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px)  { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stat { position: relative; min-width: 0; }
.stat + .stat::before {
  content: ""; position: absolute;
  inset-block: .3rem 1.6rem;
  inset-inline-start: calc(-1 * clamp(.7rem, 1.3vw, 1.3rem));
  width: 1px; background: rgba(255,255,255,.14);
}
.stat__num {
  font-family: var(--font-latin);
  font-size: clamp(1.9rem, 3vw, 3.2rem);
  font-weight: 600; line-height: 1;
  letter-spacing: -.01em;
  direction: ltr; unicode-bidi: isolate;   /* digits keep their order... */
  text-align: right;                        /* ...but the block still hugs the RTL start edge */
  white-space: nowrap;
  background: linear-gradient(160deg, var(--white) 20%, var(--silver-300) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Hebrew unit sits outside the Latin number so it keeps the body face */
.stat__unit {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.1;
  margin-block-start: .2rem;
  color: var(--silver-200);
}
.stat__label {
  margin-block-start: .7rem;
  font-size: .88rem;
  color: var(--silver-300);
  letter-spacing: .04em;
}
.stat__rule {
  width: 30px; height: 2px; margin-block-start: .55rem;
  background: var(--accent);
  transform: skewX(-38deg); transform-origin: right center;
}

/* --------------------------------------------------------------------------
   13. SECTION 6 — MARKETING TILES
   Six long tiles. Expand IN PLACE on hover — never move, never modal.
   -------------------------------------------------------------------------- */
.tiles { display: grid; gap: clamp(.6rem, 1vw, 1rem); margin-block-start: clamp(2.2rem, 4vw, 3.2rem); }

.tile {
  position: relative; isolation: isolate;
  overflow: hidden;
  background: var(--slate-700);
  border-radius: 10px;
  transition: background var(--dur-slow) var(--ease-inout);
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, var(--blue-600), var(--blue-400));
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-inout);
}
.tile:hover::before, .tile.is-open::before { opacity: 1; }

/* index + title sit together at the inline start; the plus is pushed to the end */
.tile__head {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: clamp(1rem, 2vw, 1.8rem);
  width: 100%;
  padding: clamp(1.15rem, 2.1vw, 1.7rem) clamp(1.2rem, 2.4vw, 2.2rem);
  text-align: start;
}
.tile__head .tile__title { justify-self: start; }
.tile__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.75vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -.005em;
}
.tile__idx {
  font-family: var(--font-latin);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .2em;
  color: var(--silver-300);
  transition: color var(--dur) var(--ease-inout);
}
.tile:hover .tile__idx, .tile.is-open .tile__idx { color: rgba(255,255,255,.85); }

.tile__plus {
  position: relative; flex: 0 0 auto;
  width: 20px; height: 20px;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tile__plus::before, .tile__plus::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 9px;
  height: 2px; background: currentColor;
}
.tile__plus::after { transform: rotate(90deg); transition: transform var(--dur-slow) var(--ease-out); }
.tile:hover .tile__plus, .tile.is-open .tile__plus { transform: rotate(180deg); }
.tile:hover .tile__plus::after, .tile.is-open .tile__plus::after { transform: rotate(0deg); }

/* the reveal: grid-rows 0fr -> 1fr, so it expands in place with no jump */
.tile__panel {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.tile:hover .tile__panel, .tile.is-open .tile__panel { grid-template-rows: 1fr; }
.tile__panel > div { overflow: hidden; }
.tile__text {
  padding: 0 clamp(1.2rem, 2.4vw, 2.2rem) clamp(1.3rem, 2.2vw, 1.9rem);
  max-width: 76ch;
  color: rgba(255,255,255,.9);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-inout) .1s,
              transform var(--dur-slow) var(--ease-out) .1s;
}
.tile:hover .tile__text, .tile.is-open .tile__text { opacity: 1; transform: none; }
.tile__text .btn { margin-block-start: 1.1rem; --btn-bg: rgba(255,255,255,.14); }

/* mobile has no hover: tiles are tappable and stay open */
@media (hover: none) {
  .tile__panel { transition: grid-template-rows var(--dur-slow) var(--ease-out); }
}

/* --------------------------------------------------------------------------
   14. SECTION 7 — TESTIMONIALS
   -------------------------------------------------------------------------- */
/* six testimonials, one row */
.tstm {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.6rem, 1vw, 1rem);
  margin-block-start: clamp(2.2rem, 4vw, 3.2rem);
}
.tstm__item {
  position: relative;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  border-radius: 10px;
  background: var(--slate-700);
  cursor: pointer;
}
.tstm__item video, .tstm__item img { width: 100%; height: 100%; object-fit: cover; }
.tstm__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,31,38,.8), transparent 55%);
}
/* Centring uses the independent `translate` property and the hover uses the
   independent `scale` property, so the two never stack. Mixing `translate:`
   with `transform: translate()` was shifting the button half its own size on
   hover — that was the jump. */
.tstm__play {
  position: absolute; z-index: 3;
  /* inset:0 + margin:auto centres in BOTH axes regardless of writing
     direction. The previous inset-inline-start/translate pair resolved
     against RTL and pushed the button 52px off centre. */
  inset: 0; margin: auto;
  scale: 1;
  display: grid; place-items: center;
  width: clamp(44px, 3.6vw, 58px); height: clamp(44px, 3.6vw, 58px);
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
  transition: scale var(--dur-slow) var(--ease-out), background var(--dur) var(--ease-inout);
}
.tstm__item:hover .tstm__play { scale: 1.1; background: var(--blue-500); }

/* the invitation: a ring breathes outward on a loop. It lives on a
   pseudo-element, so it never touches the button's own transform. */
.tstm__play::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
  animation: playPulse 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes playPulse {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}
.tstm__item:hover .tstm__play::before { animation-duration: 1.6s; }

.tstm__play svg {
  width: clamp(13px, 1.1vw, 16px); height: auto;
  margin-inline-start: 2px;
  position: relative; z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tstm__play::before { animation: none; opacity: .35; }
}
.tstm__name {
  position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0;
  padding: clamp(.7rem, 1vw, 1rem);
  font-size: clamp(.82rem, .95vw, .96rem);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--white);
  display: flex; flex-direction: column; gap: .1rem;
}
.tstm__role { display: block; font-size: clamp(.7rem, .78vw, .78rem); color: var(--silver-300); font-weight: 400; }

/* google reviews */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: clamp(.9rem,1.6vw,1.4rem); margin-block-start: clamp(1.6rem,3vw,2.4rem); }
.review {
  padding: clamp(1.3rem,2.2vw,1.8rem);
  background: rgba(255,255,255,.055);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.section--paper .review { background: var(--white); box-shadow: 0 2px 20px rgba(32,71,118,.07); }
.review__stars { display: flex; gap: .18rem; color: #f5b544; margin-block-end: .7rem; }
.review__stars svg { width: 15px; height: 15px; }
.review__text { font-size: .95rem; line-height: 1.7; }
.review__author { margin-block-start: .9rem; font-weight: 500; font-size: .9rem; }
.review__src { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--silver-300); margin-block-start: .15rem; }
.section--paper .review__src { color: var(--slate-400); }

/* --------------------------------------------------------------------------
   15. SECTION 8 — PRESS
   -------------------------------------------------------------------------- */
.press { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: clamp(.9rem,1.6vw,1.5rem); margin-block-start: clamp(2.2rem,4vw,3.2rem); }
.press__item {
  position: relative; display: block;
  padding: clamp(1.4rem,2.4vw,2rem);
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  overflow: hidden;
  transition: background var(--dur) var(--ease-inout), transform var(--dur-slow) var(--ease-out);
}
.press__item:hover { background: rgba(255,255,255,.09); transform: translateY(-5px); }
.press__item::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0;
  height: 2px; background: linear-gradient(to left, var(--blue-400), var(--blue-600));
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-slow) var(--ease-out);
}
.press__item:hover::after { transform: scaleX(1); }
.press__logo { height: 26px; margin-block-end: 1.1rem; opacity: .9; filter: brightness(0) invert(1); }
.press__title { font-family: var(--font-display); font-size: clamp(1rem,1.35vw,1.2rem); font-weight: 500; line-height: 1.45; }
.press__date { margin-block-start: .6rem; font-size: .84rem; color: var(--silver-300); font-family: var(--font-display); letter-spacing: .08em; }

/* --------------------------------------------------------------------------
   16. SECTION 9 — FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--slate-800); padding-block: clamp(3.5rem,6vw,5.5rem) 0; }
.footer__top { display: grid; grid-template-columns: 1.3fr repeat(3, .85fr); gap: clamp(1.8rem,3.4vw,3.4rem); }
.footer__brand .brand__mark { height: 62px; }
.footer__tagline { margin-block-start: 1.2rem; color: var(--silver-300); max-width: 34ch; font-size: .95rem; }

.fcol__title {
  font-family: var(--font-display);
  font-size: clamp(.76rem, .88vw, .86rem);
  letter-spacing: .26em;
  color: var(--silver-300);
  margin-block-end: 1.1rem;
}
.fcol ul { display: grid; gap: .6rem; }
.fcol a { color: var(--silver-100); font-size: .95rem; transition: color var(--dur-fast) var(--ease-inout), padding-inline-start var(--dur) var(--ease-inout); }
.fcol a:hover { color: var(--blue-300); padding-inline-start: .35rem; }

.footer__contact a { display: flex; align-items: center; gap: .6rem; }
.footer__contact svg { width: 15px; height: 15px; color: var(--blue-300); flex: 0 0 auto; }

/* the SEO paragraph — mandatory, per spec */
.footer__seo {
  margin-block-start: clamp(2.6rem,5vw,4rem);
  padding-block: clamp(1.6rem,3vw,2.4rem);
  border-block-start: 1px solid rgba(255,255,255,.1);
  font-size: .82rem;
  line-height: 1.9;
  color: var(--slate-400);
}
.footer__seo strong { color: var(--silver-300); font-weight: 500; }

.footer__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap;
  padding-block: 1.5rem;
  border-block-start: 1px solid rgba(255,255,255,.1);
  font-size: .82rem; color: var(--slate-400);
}
.footer__bar a:hover { color: var(--blue-300); }

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .cards { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .card:nth-child(n) { grid-column: span 2; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 74px; --rail-w: 46px; }
  .nav { display: none; }
  .burger { display: block; }
  .about__grid { grid-template-columns: 1fr; }
  .tstm { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .rail { inset-block-start: auto; inset-block-end: 0; translate: 0 0; }
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .card:nth-child(n) { grid-column: span 1; }
  .tstm { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__top { grid-template-columns: 1fr; }
  .rail { display: none; }
  .stat + .stat::before { display: none; }

  /* the scroll cue owns the bottom-left; the dots sit clear of it */
  .hero__scroll { inset-inline-end: var(--gutter); }
  .hero__scroll-line { height: 44px; }
  .hero__dots {
    inset-inline-start: auto;
    inset-inline-end: var(--gutter);
    translate: 0 0;
    inset-block-end: 5.4rem;
  }
  .hero__content { padding-block-end: 6.5rem; }
}

/* --------------------------------------------------------------------------
   18. MOBILE DRAWER
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(35,41,53,.985);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease-inout), visibility var(--dur);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer ul { display: grid; gap: .2rem; }
.drawer > ul > li > a {
  display: block;
  padding-block: .9rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  border-block-end: 1px solid rgba(255,255,255,.08);
}
.drawer .sub { padding-inline-start: 1rem; padding-block: .3rem 1rem; }
.drawer .sub a { display: block; padding-block: .45rem; color: var(--silver-300); font-size: 1rem; }

/* --------------------------------------------------------------------------
   19. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: 1rem;
  z-index: 200;
  padding: .8rem 1.4rem;
  background: var(--white); color: var(--slate-800);
  transition: inset-block-start var(--dur) var(--ease-inout);
}
.skip:focus { inset-block-start: 1rem; }
.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;
}

/* ==========================================================================
   20. LIGHT-BAND VARIANTS
   Components that live on both bands get their bone-side treatment here,
   so the alternation never leaves white-on-white or ink-on-ink.
   ========================================================================== */

/* --- marketing tiles on bone --- */
.section--bone .tile { background: var(--white); box-shadow: inset 0 0 0 1px var(--bone-line); }
.section--bone .tile__title { color: var(--bone-ink); }
.section--bone .tile__idx { color: var(--bone-mute); }
.section--bone .tile__plus { color: var(--bone-ink); }
.section--bone .tile:hover .tile__title,
.section--bone .tile.is-open .tile__title,
.section--bone .tile:hover .tile__plus,
.section--bone .tile.is-open .tile__plus { color: var(--white); }
.section--bone .tile:hover .tile__idx,
.section--bone .tile.is-open .tile__idx { color: rgba(255,255,255,.8); }

/* --- press cards on bone --- */
.section--bone .press__item {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--bone-line);
}
.section--bone .press__item:hover { background: var(--white); box-shadow: 0 14px 40px rgba(19,37,58,.13); }
.section--bone .press__title { color: var(--bone-ink); }
.section--bone .press__date { color: var(--bone-mute); }

/* --- testimonials on ink --- */
.section--ink .review { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.section--ink .review__text { color: var(--silver-100); }
.section--ink .review__src { color: var(--silver-300); }

/* --- stats read on both --- */
.section--bone .stat__num {
  background: linear-gradient(160deg, var(--bone-ink) 20%, #4a525b 90%);
  -webkit-background-clip: text; background-clip: text;
}
.section--bone .stat__unit { color: var(--bone-ink); }
.section--bone .stat__label { color: var(--bone-mute); }
.section--bone .stat + .stat::before { background: var(--bone-line); }

/* --- one-corner radius as a shape language, matching the buttons --- */
.card, .press__item, .tile, .strip__item, .tstm__item, .review { border-radius: 0; }
.card, .tstm__item { border-end-end-radius: 22px; }
.press__item, .review { border-end-end-radius: 18px; }
.tile { border-end-end-radius: 16px; }
.about__figure img { border-radius: 0; border-end-end-radius: 28px; }

/* --- section seam: a hairline where bone meets ink --- */
.section--bone + .section--ink,
.section--ink + .section--bone { border-block-start: 0; }

/* ==========================================================================
   21. SECTION 6 — MARKETING PANELS
   Six standing image cards, edge to edge, in the shape of the reference's
   contact row. Hover lifts one panel and dims its neighbours; the copy is
   revealed in place and the index runs vertically down the side.
   ========================================================================== */
.panels-section { padding-block-end: 0; }

.panels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  margin-block-start: clamp(2.4rem, 4vw, 3.6rem);
  background: var(--ink);
}
.panel {
  position: relative; isolation: isolate;
  /* standing cards: tall enough to read as columns, like the reference's
     contact row. Height only — pairing aspect-ratio with min-height lets the
     box widen past its grid track and pushes the page sideways. */
  height: clamp(430px, 66vh, 760px);
  overflow: hidden;
  background: var(--slate-900);
  cursor: pointer;
  transition: filter var(--dur-slow) var(--ease-inout),
              opacity var(--dur-slow) var(--ease-inout);
}
.panel__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.72) brightness(.62);
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out), filter var(--dur-slow) var(--ease-inout);
}
.panel__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,10,12,.95) 0%, rgba(8,10,12,.78) 26%, rgba(8,10,12,.34) 58%, rgba(8,10,12,.14) 100%);
  transition: opacity var(--dur-slow) var(--ease-inout);
}
/* the seam between panels */
.panel + .panel::before {
  content: ""; position: absolute; z-index: 4;
  inset-block: 0; inset-inline-start: 0;
  width: 1px; background: rgba(255,255,255,.14);
}

/* the index runs vertically down the side — "written along the edge" */
/* NOTE: this element sets writing-mode: vertical-rl, and CSS logical insets
   resolve against the ELEMENT'S OWN writing mode — so inset-block-start would
   land on the right edge and inset-inline-start on the top. Positioned with
   physical offsets instead, which stay predictable. */
.panel__idx {
  position: absolute; z-index: 3;
  top: 1.5rem; right: 1.15rem; left: auto; bottom: auto;
  writing-mode: vertical-rl;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .34em;
  color: rgba(255,255,255,.55);
  transition: color var(--dur-slow) var(--ease-inout);
}
[dir="ltr"] .panel__idx { right: auto; left: 1.15rem; }
.panel__idx::after {
  content: ""; display: block;
  width: 1px; height: 44px;
  margin-top: .75rem; margin-left: auto; margin-right: auto;
  background: linear-gradient(rgba(255,255,255,.5), transparent);
  transition: background var(--dur-slow) var(--ease-inout), height var(--dur-slow) var(--ease-out);
}

.panel__body {
  position: absolute; z-index: 3;
  inset-inline: 0; inset-block-end: 0;
  padding: clamp(1.3rem, 2vw, 2rem) clamp(1.1rem, 1.5vw, 1.5rem) clamp(1.6rem, 2.4vw, 2.3rem);
}
.panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.35vw, 1.32rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--white);
  transition: transform var(--dur-slow) var(--ease-out);
}
/* the copy expands in place — grid-rows 0fr -> 1fr, no jump */
.panel__reveal {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.panel__reveal > div { overflow: hidden; }
.panel__text {
  margin-block-start: .8rem;
  font-size: .88rem; line-height: 1.65;
  color: rgba(255,255,255,.86);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-inout) .08s,
              transform var(--dur-slow) var(--ease-out) .08s;
}
.panel__cta {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-block-start: 1rem;
  padding: .6rem 1.15rem;
  font-family: var(--font-display);
  font-size: .86rem;
  color: var(--white);
  background: linear-gradient(104deg, #4d8ad0, var(--blue-600));
  border-end-end-radius: 13px;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-inout) .16s,
              transform var(--dur-slow) var(--ease-out) .16s,
              background var(--dur) var(--ease-inout);
}
.panel__cta:hover { background: var(--blue-400); }
.panel__cta .btn__icon { width: 15px; height: 15px; }

/* --- the hover state --- */
.panel:hover, .panel:focus-visible { z-index: 2; }
.panel:hover .panel__img,
.panel:focus-visible .panel__img { transform: scale(1.08); filter: saturate(1) brightness(.82); }
.panel:hover .panel__scrim,
.panel:focus-visible .panel__scrim { opacity: .92; }
.panel:hover .panel__reveal,
.panel:focus-visible .panel__reveal { grid-template-rows: 1fr; }
.panel:hover .panel__text, .panel:focus-visible .panel__text,
.panel:hover .panel__cta,  .panel:focus-visible .panel__cta { opacity: 1; transform: none; }
.panel:hover .panel__idx,  .panel:focus-visible .panel__idx { color: var(--blue-300); }
.panel:hover .panel__idx::after,
.panel:focus-visible .panel__idx::after { background: linear-gradient(var(--blue-300), transparent); height: 70px; }

/* neighbours step back, the way the reference greys the labels it isn't on */
.panels:hover .panel:not(:hover) { filter: brightness(.62) saturate(.6); }

@media (max-width: 1180px) {
  .panels { grid-template-columns: repeat(3, 1fr); }
  .panel { height: clamp(380px, 52vh, 460px); }
}
@media (max-width: 700px) {
  .panels { grid-template-columns: repeat(2, 1fr); }
  .panel { height: clamp(320px, 46vh, 400px); }
  /* no hover on touch: the copy is open by default so nothing is unreachable */
  .panel__reveal { grid-template-rows: 1fr; }
  .panel__text, .panel__cta { opacity: 1; transform: none; }
  .panels:hover .panel:not(:hover) { filter: none; }
}
@media (hover: none) {
  .panel__reveal { grid-template-rows: 1fr; }
  .panel__text, .panel__cta { opacity: 1; transform: none; }
  .panels:hover .panel:not(:hover) { filter: none; }
}

/* ==========================================================================
   22. HEADLINE — the non-accent half
   On the ink bands it reads as graded white rather than flat grey, so the
   two halves of a headline are "bright white → blue", not "grey → blue".
   ========================================================================== */
.section--ink .h2 .thin,
.h2 .thin {
  background: linear-gradient(102deg, #ffffff 0%, #eef1f4 45%, #b9c0c7 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* on the light band it stays ink-toned, or it would vanish */
.section--bone .h2 .thin {
  background: linear-gradient(102deg, #2a2f34 0%, #4b525a 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ==========================================================================
   23. PRESS CARDS — now carry an image
   ========================================================================== */
.press { grid-template-columns: repeat(4, minmax(0,1fr)); }
.press__item {
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.press__media {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--slate-900);
}
.press__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.8) brightness(.9);
  transition: transform 1.1s var(--ease-out), filter var(--dur-slow) var(--ease-inout);
}
.press__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,12,14,.5), transparent 62%);
  transition: opacity var(--dur-slow) var(--ease-inout);
}
.press__item:hover .press__media img { transform: scale(1.06); filter: saturate(1) brightness(1); }
.press__item:hover .press__veil { opacity: .5; }

.press__body {
  display: flex; flex-direction: column; gap: .5rem;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  flex: 1;
}
.press__title { display: block; }
.press__date { display: block; margin-block-start: auto; }

@media (max-width: 1100px) { .press { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .press { grid-template-columns: 1fr; } }

/* ==========================================================================
   24. LOGO SVG CONTAINMENT
   The symbols came out of a PDF conversion and carry clip-path geometry that
   reaches past their viewBox. It is painted correctly (svg clips it), but the
   <use> box still reported wider than its parent and leaked into the document
   scroll width — 28px of horizontal scroll on a 375px screen. `contain: paint`
   stops anything outside the element's own box from counting.
   ========================================================================== */
.brand__mark,
.brand__word,
.card__logo,
.about__logo,
.footer__logo {
  overflow: clip;
  clip-path: inset(0);      /* a hard clip; overflow/contain alone did not stop
                               the <use> geometry counting toward scroll width */
}

/* the wrapper is a plain CSS box, which clips scrollable overflow reliably —
   an <svg> root does not, so the <use> geometry kept leaking out */
.logoclip { display: inline-block; overflow: hidden; line-height: 0; vertical-align: middle; }
.logoclip--brand__mark  { height: 54px; }
.logoclip--brand__word  { height: 15px; }
.logoclip--card__logo   { height: 46px; position: absolute; z-index: 4; inset-block-end: 1.1rem; inset-inline-end: 1.2rem; }
.logoclip--about__logo  { height: 76px; margin-block-end: 1.4rem; display: block; width: fit-content; }
.logoclip--footer__logo { height: 120px; display: block; width: fit-content; }
.header.is-stuck .logoclip--brand__mark { height: 42px; }
/* (an old override that reset the mark to static lived here — the mark is
   positioned art now, see the block below) */

/* ==========================================================================
   25. FOOTER CREDIT
   ========================================================================== */
.footer__credit {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--slate-400);
}
.footer__credit a {
  position: relative;
  color: var(--silver-300);
  transition: color var(--dur) var(--ease-inout);
}
.footer__credit a::after {
  content: ""; position: absolute;
  inset-block-end: -3px; inset-inline-start: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease-inout);
}
.footer__credit a:hover { color: var(--blue-300); }
.footer__credit a:hover::after { transform: scaleX(1); }
.footer__credit-name { font-family: var(--font-latin); letter-spacing: .12em; font-weight: 600; }

/* three items now — let them wrap gracefully on narrow screens */
.footer__bar { justify-content: space-between; row-gap: .6rem; }
@media (max-width: 780px) {
  .footer__bar { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ==========================================================================
   HEADINGS — the architectural rule
   Corrected against the reference. The line is NOT a dash attached to the
   label: it is a hairline that runs the full width of the band and stops
   dead at the label, so the heading block reads as sitting ON a grid. A
   second, short accent rule sits under the label text itself.

   On scroll-in the long rule draws across and the heading settles up into
   place behind its own mask — the movement the client described as the
   lines "putting the heading where it belongs".

   dir is hard-coded rtl, so the physical origins below are the reading-start
   side on purpose.
   ========================================================================== */

.label {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.6vw, 1.5rem);
  width: 100%;              /* the rule needs the whole band to run across */
  font-family: var(--font-display);
  font-size: clamp(.76rem, .88vw, .86rem);
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--silver-200);
  white-space: nowrap;
}

/* --- the long rule: runs from the label out to the edge of the band --- */
.label::after {
  content: "";
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: linear-gradient(to left, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06));
  transform: scaleX(0);
  transform-origin: right center;     /* grows out of the word, across the band */
  transition: transform 1.6s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 120ms);
}
.section--bone .label::after,
.section--paper .label::after {
  background: linear-gradient(to left, rgba(20, 23, 25, .3), rgba(20, 23, 25, .05));
}

/* --- the short accent under the label text, as in the reference --- */
.label::before {
  content: "";
  position: absolute;
  inset-block-end: -.62rem;
  inset-inline-start: 0;              /* rtl: under the first letter */
  width: 2.4em;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .9s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 620ms);
}

[data-reveal].is-in .label::after,
[data-reveal].is-in .label::before,
.is-in > .label::after,
.is-in > .label::before,
.no-reveal .label::after,
.no-reveal .label::before { transform: scaleX(1); }

/* the accent needs breathing room under the label before the headline */
.label { margin-block-end: .95rem; }
.h2 { margin-block-start: 0; }

/* --- the headline rises out of its own mask as the section arrives ---
   Keyed off .is-in and written as an animation, never as a hidden default:
   with no class the headline is simply painted, so it can never leave a
   heading-shaped hole. (An earlier version hid it in CSS and waited for the
   class to give it back — that is the version that failed.) */
[data-reveal].is-in .h2 {
  animation: nestHeadWipe 1.15s var(--ease-out) both;
  animation-delay: calc(var(--d, 0ms) + 260ms);
}
@keyframes nestHeadWipe {
  from { clip-path: inset(0 0 105% 0); transform: translateY(.12em); }
  to   { clip-path: inset(0 0 -20% 0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .label::after, .label::before { transform: scaleX(1); transition: none; }
  [data-reveal].is-in .h2 { animation: none; }
}

/* ==========================================================================
   THE MONOGRAM AS CARD SIGNATURE
   It sits in the middle of the card as a watermark. The wrapper has to be
   the positioned element — putting only the svg out of flow left an empty
   inline-block behind, which is what pushed the card's text upward.
   ========================================================================== */
/* At rest the mark is a small signature in the far corner. On hover it
   travels to the middle of the card and opens up at low opacity — the
   signature becomes the watermark, and only then.
   Both states use percentage units so the trip actually interpolates;
   px -> % would jump. dir is fixed rtl, so these are physical on purpose. */
.logoclip--card__logo {
  position: absolute;
  z-index: 3;
  /* The mark is ALWAYS centred on its anchor point, and only the anchor
     moves. Animating left/bottom while also changing the translate meant the
     two interpolated against each other and it never landed on the middle. */
  left: 13%;
  top: 84%;
  translate: -50% -50%;
  height: 13%;
  aspect-ratio: 147.87 / 173.75;
  width: auto;
  overflow: visible;
  line-height: 0;
  pointer-events: none;
  transition: left .75s var(--ease-out),
              top .75s var(--ease-out),
              height .75s var(--ease-out);
}
.card__logo {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--white);
  opacity: .5;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .4));
  transition: color var(--dur-slow) var(--ease-inout),
              opacity var(--dur-slow) var(--ease-inout),
              filter var(--dur-slow) var(--ease-inout);
}
.card:hover .logoclip--card__logo,
.card:focus-visible .logoclip--card__logo {
  left: 50%;
  top: 50%;
  height: 52%;
}
.card:hover .card__logo,
.card:focus-visible .card__logo {
  color: var(--slate-800);
  opacity: .17;
  filter: none;
}
.card__body { z-index: 5; }


/* --- the hero headline is a phrase now, not a single word --- */
.hero__city {
  font-size: clamp(1.47rem, 3.92vw, 3.78rem); /* -30% */
  line-height: .98;
  max-width: 16ch;
}
/* the scroll cue lost its label — the line alone carries it */
.hero__scroll { gap: 0; }
.hero__scroll-line { margin: 0; }


/* ==========================================================================
   HEADLINES — the brand face, plain
   A text-stroke was tried here to fake a heavier cut out of Absolutik's
   single weight. It painted as an outline around the letters rather than
   thickening them, so it is gone. Real weight needs the rest of the family.
   ========================================================================== */
.h2 { font-family: var(--font-display); font-weight: 400; }
.hero__city { font-family: var(--font-display); font-weight: 400; }

/* --- the hero headline sits in the bottom corner on the inline-start side.
   The page is RTL, so that reads as bottom-right, opposite the scroll cue. --- */
.hero__content { align-content: end; }
.hero__offices { justify-self: start; text-align: start; }
.hero__offices .label { justify-content: flex-start; }
.hero__city { margin-inline: 0; max-width: 18ch; }


/* ==========================================================================
   THE MARKETING BAND — panels that open sideways, centred head
   (Restored: this block was cut by accident when the heading text-stroke
   experiment above it was removed — the removal took the range between two
   markers and this had been appended in between.)

   Hovering a tile WIDENS it and lets the copy out, the way the reference's
   contact row behaves. grid-template-columns is animatable, so the row does
   the work and the neighbours give up their space. No JS.
   ========================================================================== */
.panels {
  grid-template-columns: repeat(6, 1fr);
  transition: grid-template-columns .85s var(--ease-out);
}
.panels:has(.panel:nth-child(1):hover) { grid-template-columns: 2.6fr 1fr 1fr 1fr 1fr 1fr; }
.panels:has(.panel:nth-child(2):hover) { grid-template-columns: 1fr 2.6fr 1fr 1fr 1fr 1fr; }
.panels:has(.panel:nth-child(3):hover) { grid-template-columns: 1fr 1fr 2.6fr 1fr 1fr 1fr; }
.panels:has(.panel:nth-child(4):hover) { grid-template-columns: 1fr 1fr 1fr 2.6fr 1fr 1fr; }
.panels:has(.panel:nth-child(5):hover) { grid-template-columns: 1fr 1fr 1fr 1fr 2.6fr 1fr; }
.panels:has(.panel:nth-child(6):hover) { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2.6fr; }
.panels:has(.panel:nth-child(1):focus-visible) { grid-template-columns: 2.6fr 1fr 1fr 1fr 1fr 1fr; }
.panels:has(.panel:nth-child(2):focus-visible) { grid-template-columns: 1fr 2.6fr 1fr 1fr 1fr 1fr; }
.panels:has(.panel:nth-child(3):focus-visible) { grid-template-columns: 1fr 1fr 2.6fr 1fr 1fr 1fr; }
.panels:has(.panel:nth-child(4):focus-visible) { grid-template-columns: 1fr 1fr 1fr 2.6fr 1fr 1fr; }
.panels:has(.panel:nth-child(5):focus-visible) { grid-template-columns: 1fr 1fr 1fr 1fr 2.6fr 1fr; }
.panels:has(.panel:nth-child(6):focus-visible) { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2.6fr; }

.panel__body { transition: padding var(--dur-slow) var(--ease-out); }
.panel:not(:hover):not(:focus-visible) .panel__text,
.panel:not(:hover):not(:focus-visible) .panel__cta { opacity: 0; }

@media (max-width: 1180px) {
  .panels, .panels:has(.panel:hover), .panels:has(.panel:focus-visible) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .panels, .panels:has(.panel:hover), .panels:has(.panel:focus-visible) { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .panels { transition: none; } }

/* --- the centred head, as in the reference's "EXCLUSIVE PROPERTIES" --- */
.head--center { text-align: center; }
.head--center .label { justify-content: center; }
.head--center .label::before {
  position: static;
  inset: auto;
  flex: 1 1 auto;
  width: auto;
  height: 1px;
  background: linear-gradient(to right, rgba(20, 23, 25, .3), rgba(20, 23, 25, .05));
  transform-origin: left center;
  transition-delay: calc(var(--d, 0ms) + 120ms);
  transition-duration: 1.6s;
}
.head--center .lede { margin-inline: auto; }

/* ==========================================================================
   HERO HEADLINE — white, and it arrives a word at a time
   Each word sits in its own mask and rises out of it, 95ms apart. The mask
   carries bottom padding pulled back by an equal negative margin, because
   overflow:hidden would otherwise shear the descender off ן, ך, ף and ץ.
   ========================================================================== */
.hero__city {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  max-width: 20ch;
  margin-inline: 0;
}
.hero__w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block-end: .2em;
  margin-block-end: -.2em;
}
.hero__w > span {
  display: inline-block;
  animation: nestHeroWord 1.05s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 95ms + 380ms);
}
@keyframes nestHeroWord {
  from { transform: translateY(108%); }
  to   { transform: translateY(0); }
}
/* the rule underneath waits for the last word to land */
.hero__city::after { animation: nestHeroRule 1s var(--ease-out) both; animation-delay: 900ms; }
@keyframes nestHeroRule {
  from { transform: skewX(-38deg) scaleX(0); }
  to   { transform: skewX(-38deg) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__w > span, .hero__city::after { animation: none; }
}

/* ==========================================================================
   24. CONTENT FROM "תוכן האתר" — counts decide the grids
   The admin can add or drop clips, numbers, testimonials and articles, so each
   grid takes its column count from how many items there are instead of
   assuming six and leaving holes.
   ========================================================================== */

/* hero — every line the client typed is its own line */
.hero__line { display: block; }

/* video strip */
@media (min-width: 1101px) {
  .strip__track--n1 { grid-template-columns: repeat(1, 1fr); }
  .strip__track--n2 { grid-template-columns: repeat(2, 1fr); }
  .strip__track--n3 { grid-template-columns: repeat(3, 1fr); }
  .strip__track--n4 { grid-template-columns: repeat(4, 1fr); }
  .strip__track--n5 { grid-template-columns: repeat(5, 1fr); }
}
.strip__item { cursor: pointer; }
.strip__item:focus-visible { outline: 2px solid var(--blue-300); outline-offset: -2px; }
/* the cue that these clips have sound — the custom cursor says "נגן" on a
   desktop, this says it everywhere, including on a phone */
.strip__play {
  position: absolute; z-index: 3;
  inset-block-end: clamp(.7rem, 1.2vw, 1rem); inset-inline-start: clamp(.7rem, 1.2vw, 1rem);
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--white);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
  transition: background var(--dur) var(--ease-inout), scale var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.strip__play svg { width: 11px; height: auto; margin-inline-start: 2px; }
.strip__item:hover .strip__play { background: var(--blue-500); scale: 1.08; }

/* numbers — a word sits in the display face, the right way round */
.stat__num--word {
  font-family: var(--font-display);
  direction: rtl;
  letter-spacing: -.02em;
}
.stats--n1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.stats--n2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.stats--n3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stats--n4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.stats--n5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1240px) {
  .stats--n4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats--n5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  /* two per row: the divider only between the pair, never at a row start */
  .stats--n4 .stat:nth-child(odd)::before { display: none; }
}
@media (max-width: 620px) {
  .stats--n3, .stats--n5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* testimonials */
@media (min-width: 901px) {
  .tstm--n1 { grid-template-columns: repeat(1, minmax(0,1fr)); max-width: 320px; }
  .tstm--n2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 640px; }
  .tstm--n3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tstm--n4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .tstm--n5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 900px) and (min-width: 641px) {
  .tstm--n4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.tstm__item:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }

/* Google reviews (Trustindex) under the video testimonials */
.greviews { margin-block-start: clamp(2.4rem, 4vw, 3.6rem); }

/* press */
@media (min-width: 1101px) {
  .press--n1 { grid-template-columns: minmax(0, 420px); }
  .press--n2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .press--n3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ==========================================================================
   25. SELLER PAGE — the eight actions beyond the six panels
   ========================================================================== */
.acts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.4vw, 2.2rem) clamp(.9rem, 1.6vw, 1.5rem);
  margin-block-start: clamp(2.2rem, 4vw, 3.2rem);
}
.act { position: relative; min-width: 0; }
.act__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  background: var(--slate-900);
}
.act__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9);
  transition: transform 1.1s var(--ease-out), filter var(--dur-slow) var(--ease-inout);
}
.act:hover .act__media img { transform: scale(1.05); filter: saturate(1); }
.act__idx {
  display: block;
  margin-block-start: 1rem;
  font-family: var(--font-latin);
  font-size: .82rem; letter-spacing: .14em;
  color: var(--blue-500);
}
.act__title {
  margin-block-start: .35rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 500; line-height: 1.4;
  color: var(--bone-ink);
}
@media (max-width: 1100px) { .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .acts { grid-template-columns: 1fr; } }

/* ==========================================================================
   26. VIDEO WITH SOUND — the popup player for the strip and testimonials
   ========================================================================== */
.vbox {
  position: fixed; inset: 0; z-index: 10000;
  display: none; place-items: center;
  background: rgba(10, 12, 14, .92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vbox.is-open { display: grid; animation: vboxIn .3s var(--ease-out); }
@keyframes vboxIn { from { opacity: 0; } to { opacity: 1; } }
.vbox__stage { display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(3.6rem, 6vh, 4.5rem) 1rem 1.5rem; }
.vbox__video {
  max-width: min(92vw, 1400px);
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  border-radius: 10px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.vbox__close {
  position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--white);
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  cursor: pointer;
  transition: background var(--dur) var(--ease-inout);
}
.vbox__close:hover, .vbox__close:focus-visible { background: var(--blue-500); }
.vbox__close svg { width: 20px; height: 20px; }
html.vbox-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .vbox.is-open { animation: none; } }

/* a two-sentence heading breaks between the sentences, never mid-thought */
.h2--split .thin, .h2--split b { display: block; }

/* ==========================================================================
   27. HERO — the reference's tight stack: label, one big line, a quiet line
   ========================================================================== */
.hero__offices--tight .label { margin-block-end: .55rem; }
.hero__offices--tight .hero__city {
  line-height: .9;
  letter-spacing: -.04em;
  max-width: 14ch;
}
.hero__offices--tight .hero__sub {
  margin-block-start: clamp(1.1rem, 1.6vw, 1.5rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.75vw, 1.6rem);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--silver-100, #e9edf2);
}

/* the strip is atmosphere now: nothing to click, nothing to point at */
.strip__item { cursor: default; }
.strip__item:hover video { transform: none; }

/* marketing tiles: any count, and a tile with a link is one big link */
.panels--n1 { grid-template-columns: 1fr; }
.panels--n2, .panels--n2:has(.panel:hover) { grid-template-columns: repeat(2, 1fr); }
.panels--n3, .panels--n3:has(.panel:hover) { grid-template-columns: repeat(3, 1fr); }
.panels--n4, .panels--n4:has(.panel:hover) { grid-template-columns: repeat(4, 1fr); }
.panels--n5, .panels--n5:has(.panel:hover) { grid-template-columns: repeat(5, 1fr); }
.panel__hit { position: absolute; inset: 0; z-index: 5; }
.panel--link .panel__cta { pointer-events: none; }

/* home about: the text block and its button */
.about__text { margin-block-start: 1.6rem; }
.about__text p { font-size: var(--fs-lede, 1.08rem); line-height: 1.75; color: var(--bone-mute); }
.about__text p + p { margin-block-start: 1rem; }
.about__btn { margin-block-start: 2rem; }

/* footer: hours line and the cookie-settings link */
.footer__hours { display: flex; align-items: center; gap: .6rem; color: var(--silver-300); font-size: .92rem; }
.footer__hours svg { width: 15px; height: 15px; color: var(--blue-300); flex: 0 0 auto; }
.footer__cookies {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.footer__cookies:hover { color: var(--blue-300); }

/* ==========================================================================
   28. LANGUAGES (GTranslate) — a quiet code switch at the end of the menu
   ========================================================================== */
.langs { display: flex; align-items: center; gap: .15rem; padding-inline-start: clamp(.6rem, 1.2vw, 1.2rem); border-inline-start: 1px solid rgba(255,255,255,.18); }
.langs .gtranslate_wrapper { display: flex; gap: .1rem; }
.langs a {
  display: inline-block; padding: .25rem .35rem;
  font-family: var(--font-latin); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--white); opacity: .62;
  transition: opacity var(--dur) var(--ease-inout), color var(--dur) var(--ease-inout);
}
.langs a:hover, .langs a.gt-current-lang { opacity: 1; color: var(--blue-300); }
.langs br { display: none; }
.header__tools { display: flex; align-items: center; gap: 1rem; }
.langs--mobile { display: none; border: 0; padding: 0; }
@media (max-width: 900px) { .langs--mobile { display: flex; } }

/* a translated page reads left to right; the logical properties do the rest */
html.is-ltr body { text-align: left; }

/* Google calls Hebrew "iw"; visitors know it as HE */
.langs a[data-gt-lang="iw"] { font-size: 0; }
.langs a[data-gt-lang="iw"]::after { content: "HE"; font-size: .74rem; }

/* the hero sentence, whole: read by screen readers, shown when translated */
.hero__whole { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.translated-ltr .hero__whole, html.translated-rtl .hero__whole { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
html.translated-ltr .hero__words, html.translated-rtl .hero__words { display: none; }