/* Israel Canada, site v4 (29.10, after Ori's review with Brave): LUXURY off; the tiered projects lead their area as
   squares in LUXURY's style; WhatsApp as its icon everywhere and "קביעת פגישה" in red in every header; the preloader
   in light blue (#B8CBDB); a white menu; the group section all red, type only; the footer white; tighter radii on
   the composer and the lead form; a compact project card; the guide's call fitted to its panel at every size.
   Site v3 (28.10: Brave's new brand, October 2026; THE CITY is gone, the site is simply Israel Canada).
   Built on v2 (27.10: LUXURY, tier tags, area views that lead with their tiers), whose layout follows Figma
   QNDD3MKNwH2PGcWoPQWGAu, frame "main" 174:8050 (1920 wide). CSS blur = Figma background-blur radius / 2.
   The brand (branding/guidlines_toolbox Folder/guidlines_toolbox.pdf):
   - colours: white, black (90%: #191919) and the red, Pantone 485C, #ED1000 on screen; six additional colours
   - type: Hebrew text in Simpler Pro, English text in Early Sans (Adobe Fonts kit eyx0lzb, linked in each
     page's head), headlines and numbers in Cardone, for now Playfair Display (Ori, 28.10)
   - the logo with its red bar: the bar bleeds off the edge, is as tall as the stems, aligned with them, and
     stops one stem height short of the logo (pages 5, 6, 11). Everything is built from rectangles, so corners
     are square; only avatars and status dots stay round. */

@font-face { font-family: 'Simpler Pro'; src: url('../fonts/SimplerPro-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Simpler Pro'; src: url('../fonts/SimplerPro-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
/* one bold for 500 and up: v2's medium labels and headings land here or are set to 400 below */
@font-face { font-family: 'Simpler Pro'; src: url('../fonts/SimplerPro-Bold.woff2') format('woff2'); font-weight: 500 900; font-display: swap; }
/* Cardone stand-in (Ori, 28.10): Playfair Display, variable 400 to 900, @fontsource-variable 5.3.0 */
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 400 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-ext-wght-normal.woff2') format('woff2-variations'); font-weight: 400 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #191919;
  --white: #ffffff;
  --red: #ed1000; /* the brand red: the bar, the marks, large type */
  /* buttons and small red text: a shade under the brand red, so white labels and red text on white reach 4.5:1
     (#ed1000 is 4.49:1, #e00e00 is 4.95:1) */
  --accent: #e00e00;
  --accent-strong: #c90c00;
  --accent-hover: #b00b00;
  --accent-pressed: #8a0800;
  --accent-subtle: #fdecea;
  --accent-subtle-fg: #b00b00;
  /* additional colours (page 9), for accents in imagery and the LUXURY glitter */
  --cream: #f5e5cc;
  --ochre: #deac5b;
  --coral: #ff6d58;
  --pink: #ff70c4;
  --periwinkle: #7889c2;
  --mist: #bbcbd9;
  --sky: #b8cbdb; /* Ori's light blue (v4): the preloader; its lines on the white menu; the map's water, lighter */
  --red-deep: #bd0d00; /* the bar on a red ground (the brand's shopping bag, page 18) */
  --muted: #f5f5f5;
  --secondary: #efefef;
  --secondary-hover: #e9e9e9;
  --muted-fg: #696969;
  --border: #e4e4e4;
  --input: #8c8c8c;
  --success: #0e7a43;
  --success-subtle: #ecf8f1;
  --error: #c8312c;
  --wa: #009d4d;
  --wa-hover: #0a5c33;
  --on-dark-muted: rgba(255, 255, 255, .85);

  --glass-subtle: rgba(255, 255, 255, .15);
  --glass-regular: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .92);
  --glass-form: rgba(255, 255, 255, .62);
  --glass-dark: rgba(0, 0, 0, .72);
  --glass-border: rgba(255, 255, 255, .40);

  --fx-glass-subtle: inset 0 1px 0 rgba(255, 255, 255, .35);
  --fx-glass-regular: 0 12px 32px -12px rgba(25, 25, 25, .24), inset 0 1px 0 rgba(255, 255, 255, .70);
  --fx-glass-strong: 0 8px 24px -10px rgba(25, 25, 25, .18), inset 0 1px 0 rgba(255, 255, 255, .80);
  --fx-glass-dark: 0 12px 32px -12px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .12);
  --depth-1: 0 1px 3px rgba(25, 25, 25, .04), 0 1px 2px rgba(25, 25, 25, .06);
  --depth-2: 0 8px 24px -8px rgba(25, 25, 25, .12), 0 2px 4px rgba(25, 25, 25, .04);
  --depth-3: 0 16px 40px -12px rgba(25, 25, 25, .18), 0 4px 8px rgba(25, 25, 25, .04);
  --depth-4: 0 32px 72px -16px rgba(25, 25, 25, .28), 0 8px 16px rgba(25, 25, 25, .06);
  --ring: 0 0 0 2px #fff, 0 0 0 4px var(--ink);
  --ring-dark: 0 0 0 2px var(--ink), 0 0 0 4px #fff;

  --stroke-icon: 1.5;

  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --d-fast: 150ms;
  --d-base: 220ms;
  --d-slow: 320ms;
  --d-morph: 600ms;
  --d-reveal: 1400ms;

  --gutter: clamp(40px, 8.75vw, 168px);
  --content: 1584px;
  --hero-col: min(838px, calc(100vw - 2 * var(--gutter))); /* the hero composer's width */
  --hero-logo: min(320px, 31vh); /* the hero logo's width (two rows, 429 x 187) */
  --edge: 40px;
  --dock-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Simpler Pro', system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus { outline: none; }
/* Keyboard focus: a thin accent outline that follows the shape (3:1+ on white and on ink).
   Text fields never get it: they match :focus-visible on a mouse click too, and their
   container already shows the focus state. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
/* Accessibility pass (2.11). Places the script moves focus to, so the keyboard and screen readers carry on from there
   (the skip link's heading, a section an in-page link scrolls to, a page or a panel that opens, a form's thanks): they
   aren't controls, so they take no ring. */
:is(main, section, article, div, h1, h2, h3, p)[tabindex="-1"]:focus-visible { outline: none; }
/* Focus never lands under the fixed header: the browser keeps a focused element clear of it as it scrolls to it
   (the page's own scrolling, Lenis's, is by number and ignores this) */
html { scroll-padding-top: calc(var(--dock-h) + 16px); }
/* The skip link: the first stop for the keyboard, out of sight until focused (above the preloader, 200) */
.skip {
  position: fixed; top: 12px; right: 16px; z-index: 210; height: 40px; padding-inline: 16px; display: inline-flex; align-items: center;
  border-radius: 9999px; background: var(--ink); color: #fff; transform: translateY(-80px); transition: transform var(--d-slow) var(--ease-out);
}
.skip:focus { transform: none; }
.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; }
::selection { background: var(--accent); color: #fff; }

.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Type (DSM text styles, v3 fonts). Hebrew headings stay in Simpler's regular, as calm as the brand's serif
   headlines; Simpler's bold (500 and up) is for labels and small emphasis. */
.t-display-xl { font-weight: 400; font-size: 60px; line-height: 64px; }
.t-display-m { font-weight: 400; font-size: 36px; line-height: 44px; }
.t-section { font-weight: 400; font-size: 36px; line-height: 44px; }
.t-h1 { font-weight: 400; font-size: 30px; line-height: 40px; }
.t-h2 { font-weight: 400; font-size: 24px; line-height: 32px; }
.t-h3 { font-weight: 400; font-size: 20px; line-height: 28px; }
.t-body-l { font-weight: 400; font-size: 18px; line-height: 28px; }
.t-body-m { font-weight: 400; font-size: 16px; line-height: 24px; }
.t-body-s { font-weight: 400; font-size: 14px; line-height: 20px; }
.t-label-l { font-weight: 500; font-size: 16px; line-height: 24px; }
.t-label-m { font-weight: 500; font-size: 14px; line-height: 20px; }
.t-label-s { font-weight: 500; font-size: 12px; line-height: 16px; }
.t-caption { font-weight: 400; font-size: 12px; line-height: 16px; }
/* Headlines and numbers in Latin: Cardone, for now Playfair Display. English text: Early Sans. */
.serif { font-family: 'Playfair Display', 'Simpler Pro', serif; font-weight: 400; font-variant-numeric: lining-nums; }
.en, :lang(en) { font-family: early-sans-variable, 'Simpler Pro', sans-serif; }
/* Playfair's asterisk is a raised mark: lowered so its middle meets the figures' (518 vs 354 of 1000), as in *9098 */
.serif .ast { position: relative; top: .164em; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.nowrap { white-space: nowrap; } /* e.g. תל אביב-יפו never breaks at its hyphen */

/* Icons: Streamline Sharp Line sprite, live strokes. The glyph sits in a 0.909 group,
   so the stroke is divided back out; --sw is the on-screen weight in px. */
.i {
  --s: 24; --sw: var(--stroke-icon);
  width: calc(var(--s) * 1px); height: calc(var(--s) * 1px);
  flex: none;
  fill: none; stroke: currentColor;
  stroke-width: calc(var(--sw) * 24 / var(--s) / .909091);
  stroke-linecap: butt; stroke-linejoin: miter;
  overflow: visible;
}
.i-16 { --s: 16; } .i-20 { --s: 20; } .i-22 { --s: 22; } .i-24 { --s: 24; } .i-32 { --s: 32; --sw: 2; }
.i-flip { scale: -1 1; } /* mirrored for RTL (the send plane points left); composes with hover/send transforms */
.i-fill { fill: currentColor; stroke: none; } /* the glint as a solid mark (the tier tags) */

/* ───────────── Buttons, pills, chips, badges ───────────── */
.pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding-inline: 16px; border-radius: 9999px;
  white-space: nowrap;
  transition: background-color var(--d-base) var(--ease-standard), color var(--d-base) var(--ease-standard),
              border-color var(--d-base) var(--ease-standard), box-shadow var(--d-base) var(--ease-standard),
              transform var(--d-morph) var(--ease-out);
}
.pill--pad-end { padding-inline-end: 20px; }
.pill--glass-subtle {
  background: var(--glass-subtle); color: #fff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--fx-glass-subtle);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
}
.pill--glass-subtle:hover { background: var(--glass-regular); color: var(--ink); box-shadow: var(--fx-glass-regular); }
.pill--glass {
  background: var(--glass-regular); color: var(--ink);
  border: 1px solid var(--glass-border);
  box-shadow: var(--fx-glass-regular);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
}
.pill--glass:hover { background: var(--glass-strong); box-shadow: var(--fx-glass-strong); }
.pill--wa { background: var(--wa); color: #fff; border: 1px solid var(--glass-border); }
.pill--wa:hover { background: var(--wa-hover); }
.pill--accent { background: var(--accent-strong); color: #fff; }
.pill--accent:hover { background: var(--accent-hover); }
.pill--accent:active { background: var(--accent-pressed); }
.pill--outline { border: 1px solid var(--border); color: var(--ink); background: #fff; }
.pill--outline:hover { border-color: var(--input); background: var(--secondary-hover); }
.pill--round { width: 48px; padding: 0; }
/* "קביעת פגישה" (v4, Ori: the hero's red consultation chip, moved up into the headers, "keep red style") */
.pill--meet { padding-inline: 22px; background: var(--accent); color: #fff; }
.pill--meet:hover { background: var(--accent-hover); }
.pill--meet:active { background: var(--accent-pressed); }
.pill--l { height: 52px; padding-inline: 24px; }
.pill--m { height: 44px; padding-inline: 20px; }
.pill--s { height: 36px; }
.pill .i { transition: transform var(--d-slow) var(--ease-out); }
.pill:hover .i-arrow { transform: translateX(-3px); }

/* Text that rolls up to a copy of itself on hover (labels on pills and links). */
.roll { display: inline-grid; overflow: hidden; line-height: inherit; }
.roll > span { grid-area: 1 / 1; transition: transform 520ms var(--ease-out); }
.roll > span + span { transform: translateY(105%); }
:is(a, button):hover > .roll > span:first-child,
:is(a, button):hover .roll > span:first-child { transform: translateY(-105%); }
:is(a, button):hover > .roll > span + span,
:is(a, button):hover .roll > span + span { transform: translateY(0); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 16px; border-radius: 9999px;
  border: 1px solid var(--border); background: transparent; color: var(--ink);
  transition: background-color var(--d-fast) var(--ease-standard), border-color var(--d-fast) var(--ease-standard), color var(--d-fast) var(--ease-standard);
}
.chip:hover { background: var(--secondary-hover); border-color: var(--input); }
.chip .i { display: none; }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip[aria-pressed='true'] .i { display: block; animation: pop var(--d-slow) var(--ease-out); }
/* Saved projects chip: heart always shown (filled when active), a live count; slides in on first save. */
.chip--saved .i { display: block; transition: fill var(--d-base) var(--ease-standard); }
.chip--saved[aria-pressed='true'] .i { fill: currentColor; }
.chip__count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 9999px;
  background: var(--accent-strong); color: #fff; font-weight: 500; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums;
  transition: background-color var(--d-base) var(--ease-standard), color var(--d-base) var(--ease-standard);
}
.chip--saved.is-empty .chip__count { background: var(--border); color: var(--muted-fg); } /* nothing saved yet: light grey */
.chip__count.is-bump { animation: pop 420ms var(--ease-out); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

.chip--glass {
  height: 44px; padding-inline: 20px;
  background: var(--glass-subtle); color: #fff; border-color: var(--glass-border);
  box-shadow: var(--fx-glass-subtle);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
}
.chip--glass .i { display: block; }
.chip--glass:hover { background: var(--glass-regular); color: var(--ink); border-color: var(--glass-border); box-shadow: var(--fx-glass-regular); }
.chip--glass:hover .i { animation: twinkle 900ms var(--ease-out); }
@keyframes twinkle { 40% { transform: rotate(-12deg) scale(1.15); } }
/* v3: the hero's first chip, the consultation, in the brand's red (Ori, 29.10); the button shade, so white reads on
   it. v4 moved it up into the headers (.pill--meet); the chip style stays for the agent's and any later use. */
.chip--accent { height: 44px; padding-inline: 20px; background: var(--accent); border-color: var(--accent); color: #fff; }
.chip--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.chip--accent:active { background: var(--accent-pressed); border-color: var(--accent-pressed); }

/* Rows that swipe on a phone (Ori, 29.10: "make the swiping parts bit more cohere... a subtle chevron"): main.js
   wraps the hero's chips, the LUXURY cards and the project filter in .swipe. On a phone (responsive.css) the row
   fades at its far end and a small chevron sits there while there's more to see. Nothing changes on desktop. */
.swipe { display: contents; }
.swipe__next { display: none; }

.badge {
  display: inline-flex; align-items: center; height: 24px; padding-inline: 8px; border-radius: 4px;
  font-weight: 500; font-size: 12px; line-height: 16px; white-space: nowrap;
}
.badge--success { background: var(--success-subtle); color: var(--success); }
.badge--neutral { background: var(--muted); color: var(--ink); }
.badge--accent { background: var(--accent-subtle); color: var(--accent-subtle-fg); letter-spacing: .02em; }
.badge--glass {
  background: var(--glass-dark); color: #fff; box-shadow: var(--fx-glass-dark);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}

/* Tier tags (v2, Ori 27.10): LUXURY in ink with the red glint (v3), PREMIUM in white, and Vertical's
   "משרדי יוקרה" in the LUXURY style. Same 24px as the status badges they sit beside. */
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 8px; border-radius: 4px;
  white-space: nowrap; flex: none;
}
.tag .i { --s: 12; color: var(--red); transition: transform 900ms var(--ease-out); }
.tag__label { direction: ltr; font-family: early-sans-variable, 'Simpler Pro', sans-serif; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .16em; margin-right: -.16em; }
.tag--luxury, .tag--offices { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.tag--premium { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(25, 25, 25, .1); }
.tag--offices .tag__label { direction: rtl; font-family: 'Simpler Pro', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0; margin-right: 0; }
/* the glint turns once as the card is hovered */
:is(.pcard.is-hot, .lcard.is-hot, .mcard:hover) .tag .i { transform: rotate(90deg) scale(1.15); }

/* The guide's orb: the avatar clip, cropped round. */
.orb { position: relative; flex: none; border-radius: 50%; overflow: hidden; background: #d9d4cc; isolation: isolate; }
.orb img, .orb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.orb--40 { width: 40px; height: 40px; box-shadow: 0 0 0 1px var(--accent); }
.orb--32 { width: 32px; height: 32px; }

/* Section heads: eyebrow over a 36/44 title, aligned to the start (right). v3: the eyebrow leads with a short
   red bar (the brand's bars and labels, page 14) where v2 had a 32px icon; the label is ink. */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.eyebrow { --eb: 32px; display: flex; align-items: center; gap: 12px; height: 32px; color: var(--ink); font-weight: 700; }
.eyebrow::before { content: ''; flex: none; width: var(--eb); height: 10px; background: var(--red); transform-origin: 100% 50%; }
.eyebrow .i { display: none; }
.luxury .eyebrow, .finale .eyebrow, .lhero .eyebrow { color: #fff; } /* on the dark bands */
.eyebrow__latin { font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: .24em; margin-inline-end: -.24em; } /* LUXURY, in Early Sans */

/* ───────────── Hero ───────────── */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 760px; max-height: 1240px;
  color: #fff; background: var(--ink); overflow: hidden; isolation: isolate;
}
.hero::after { /* the 4px accent rule the projects tab sits on */
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: var(--accent); z-index: 4;
}
.hero__media { position: absolute; inset: 0; z-index: -1; will-change: transform; }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__poster { transform: scale(1.08); transition: transform 2600ms var(--ease-out); }
.hero__video { opacity: 0; transition: opacity 1200ms var(--ease-standard); }
.hero__video.is-on { opacity: 1; }
.hero__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .30); }
.hero__shade::before { content: ''; position: absolute; inset: 0 0 auto; height: 288px; background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); }
.hero__shade::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--hero-dim, 0); }

.hero__bar {
  position: absolute; top: 40px; inset-inline: var(--edge); height: 48px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
}
.hero__bar .actions { display: flex; align-items: center; gap: 8px; }

.hero__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 88px; will-change: transform;
  /* No opacity here: an ancestor with opacity becomes the backdrop root and the
     composer/chip glass would stop blurring the video. Text fades on its own. */
}
/* The logo with its bar (brand, Logo behaviour): v3's group section had it; v4's doesn't (Ori), the styles stay (the
   footer draws its own in SVG).
   A row from the logo (at the start, right) to the far edge: the bar fills what is left, as tall as the logo's
   stems and aligned with them (4.24..85.57 of 86.4), and stops one stem height short of the logo. --logo-w sets
   the size; the row bleeds out by --bleed. */
.brandbar {
  --logo-w: 240px; --logo-h: calc(var(--logo-w) * .105109); --stem: calc(var(--logo-w) * .098942);
  --bleed: 0px;
  display: flex; align-items: flex-start; margin-inline-end: calc(-1 * var(--bleed));
}
.brandbar__logo { flex: none; width: var(--logo-w); height: var(--logo-h); color: #fff; overflow: visible; }
.brandbar__bar {
  flex: 1; min-width: 0; height: var(--stem); margin-top: calc(var(--logo-h) * .049074); margin-inline-start: var(--stem);
  background: var(--red); transform-origin: 0% 50%; /* fills in from the left edge */
}
/* the hero: the two-row logo (page 4), centred, over the line (Ori, 28.10: no bar in the hero, smaller, centred) */
.hero__brand { margin-bottom: 36px; }
.hero__logo { width: var(--hero-logo); height: calc(var(--hero-logo) * .43592); color: #fff; overflow: visible; }
/* medium (v4, Ori): Simpler comes in light, regular and bold only, so the regular takes a hairline outline in its own
   colour, a medium between the two that scales with the size */
.hero__sub { max-width: 976px; text-align: center; color: var(--on-dark-muted); font-weight: 400; font-size: 28px; line-height: 44px; -webkit-text-stroke: .015em currentColor; }

/* Composer: Glass/Subtle ring around a Glass/Strong card (Figma 174:8055/8056). v4 (Ori): radii 16 (the ring) and
   12 (the card), as the lead form's. */
.composer {
  margin-top: 30px; width: var(--hero-col);
  padding: 5px; border-radius: 16px; /* 6px in Figma, minus the 1px border so the box stays 156 tall */
  background: var(--glass-subtle); border: 1px solid var(--glass-border); box-shadow: var(--fx-glass-subtle);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: box-shadow var(--d-slow) var(--ease-standard), background-color var(--d-slow) var(--ease-standard), border-color var(--d-slow) var(--ease-standard);
}
.composer__card {
  display: flex; flex-direction: column; gap: 24px;
  padding: 19px 19px 11px 11px; border-radius: 12px; /* Figma 20/20/12/12 minus the border */
  background: var(--glass-form); border: 1px solid var(--glass-border); box-shadow: var(--fx-glass-strong);
  -webkit-backdrop-filter: blur(32px) saturate(1.4); backdrop-filter: blur(32px) saturate(1.4);
  color: var(--ink);
  transition: background-color var(--d-slow) var(--ease-standard);
}
.composer:hover { background: rgba(255, 255, 255, .2); }
.composer:focus-within { border-color: rgba(255, 255, 255, .7); box-shadow: var(--fx-glass-subtle), 0 20px 48px -20px rgba(0, 0, 0, .45); }
.composer:focus-within .composer__card { background: rgba(255, 255, 255, .78); }
.composer__row { display: flex; align-items: center; gap: 12px; height: 40px; }
.composer__field { position: relative; flex: 1; height: 40px; }
.composer__input {
  width: 100%; height: 40px; border: 0; background: transparent; padding: 0;
  font-weight: 400; font-size: 18px; line-height: 32px; color: var(--ink); caret-color: var(--accent);
}
.composer__input::placeholder { color: var(--muted-fg); opacity: 1; transition: opacity var(--d-base) var(--ease-standard); }
.composer__input:focus::placeholder { opacity: .55; }
.composer__caret { /* blinking accent caret before the placeholder, until the field is used */
  position: absolute; inset-inline-start: -4px; top: 9px; width: 2px; height: 22px; background: var(--accent);
  animation: caret 1s steps(1) infinite;
}
.composer__input:focus + .composer__caret, .composer__input:not(:placeholder-shown) + .composer__caret { display: none; }
@keyframes caret { 50% { opacity: 0; } }
.composer__actions { display: flex; align-items: center; height: 48px; }
.composer__buttons { display: flex; gap: 8px; margin-inline-start: auto; }
.round {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  transition: background-color var(--d-base) var(--ease-standard), transform var(--d-morph) var(--ease-out), box-shadow var(--d-base) var(--ease-standard);
}
.round--white { background: #fff; color: var(--ink); border: 1px solid var(--border); box-shadow: var(--depth-2); }
.round--white:hover { box-shadow: var(--depth-3); }
.round--accent { background: var(--accent); color: #fff; }
.round--accent:hover { background: var(--accent-strong); }
.round--accent .i { transition: transform var(--d-slow) var(--ease-out); }
.round--accent:hover .i { transform: translateY(-2px); }
/* WhatsApp: its icon alone (v4, Ori: "all whatsapp CTAs, only icon"), in its green, with a tip on desktop */
.round--wa { flex: none; background: var(--wa); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.round--wa:hover { background: var(--wa-hover); }
.round--l { width: 52px; height: 52px; }
.round.is-sent .i { animation: send 700ms var(--ease-out); }
/* Voice is off for now (v4, Ori: "hide audio for now"): the mic buttons in the hero's, the header's and the guide's
   composers stay in the page, their voice mode intact, until this rule goes */
[data-open-voice], [data-agent-voice] { display: none !important; }
@keyframes send { 45% { transform: translateY(-14px); opacity: 0; } 46% { transform: translateY(14px); opacity: 0; } }

.hero__chips { margin-top: 24px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.hero__tab {
  position: absolute; bottom: 0; left: 50%; translate: -50% 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 136px; height: 48px; border-radius: 8px 8px 0 0;
  background: var(--accent); color: #fff;
  transition: height var(--d-slow) var(--ease-out), background-color var(--d-base) var(--ease-standard);
}
.hero__tab:hover { height: 52px; background: var(--accent-strong); }
.hero__tab .i { rotate: 180deg; transition: transform var(--d-slow) var(--ease-out); }
.hero__tab:hover .i { transform: translateY(-3px); }

/* The film's pause and play (Ori, 1.11: "subtle and small"), at the foot's left, whatever the page's direction: it
   stands under the hero bar's left end. 32 across, 44 to the finger. */
.hero__play {
  position: absolute; left: var(--edge); bottom: 28px; z-index: 5;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff;
  background: var(--glass-subtle); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
  opacity: .72; transition: opacity var(--d-base) var(--ease-standard), background-color var(--d-base) var(--ease-standard);
}
.hero__play::before { content: ''; position: absolute; inset: -6px; }
.hero__play[hidden] { display: none; }
.hero__play .i { --s: 14; }
.hero__icon-play, .hero__play.is-paused .hero__icon-pause { display: none; }
.hero__play.is-paused .hero__icon-play { display: block; }

/* ───────────── Dock: the light 72px header after the hero (journey spec §2) ───────────── */
.dock {
  position: fixed; top: 0; inset-inline: 0; z-index: 50; height: var(--dock-h);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  /* Parked fully above the viewport with no shadow and not rendered, so no hairline can
     peek into the first pixel row; the border shadow and visibility return as it slides in. */
  box-shadow: none; visibility: hidden;
  transform: translateY(-110%);
  transition: transform var(--d-morph) var(--ease-out), box-shadow var(--d-base) var(--ease-standard), visibility 0s linear var(--d-morph);
}
.dock.is-on { transform: none; visibility: visible; box-shadow: 0 1px 0 var(--border); transition-delay: 0s; }
.dock.is-dark { background: rgba(25, 25, 25, .72); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); color: #fff; }
.dock__inner { position: relative; height: 100%; padding-inline: var(--edge); display: flex; align-items: center; justify-content: space-between; }
.dock__brand { display: flex; align-items: center; gap: 16px; }
.dock__brand .round { width: 44px; height: 44px; border: 1px solid var(--border); background: transparent; color: inherit; }
.dock.is-dark .dock__brand .round { border-color: rgba(255, 255, 255, .2); }
.dock__brand .round:hover { background: var(--secondary-hover); }
.dock.is-dark .dock__brand .round:hover { background: rgba(255, 255, 255, .1); }
.dock__logo { display: block; color: var(--ink); }
.dock__logo svg { width: 160px; height: 16.82px; overflow: visible; }
.dock__logo .dock__mark { display: none; width: 26px; height: 24px; } /* the I+C mark: phones under 360 (responsive.css) */
.dock.is-dark .dock__logo { color: #fff; }
.dock__composer {
  position: absolute; left: 50%; top: 12px; translate: -50% 0;
  width: 624px; height: 48px; border-radius: 9999px;
  display: flex; align-items: center; gap: 12px; padding-inline: 4px 4px;
  background: var(--muted); border: 1px solid var(--border); color: var(--ink);
  clip-path: inset(0 calc(50% - 24px) round 9999px);
  transition: clip-path var(--d-morph) var(--ease-out) 80ms, border-color var(--d-base) var(--ease-standard), background-color var(--d-base) var(--ease-standard);
}
.dock.is-on .dock__composer { clip-path: inset(0 0 round 9999px); }
.dock__composer:hover { border-color: var(--input); background: #fff; }
.dock__composer:focus-within { border-color: var(--input); background: #fff; }
.dock__composer .orb { width: 38px; height: 38px; margin-inline-start: 1px; }
.dock__avatar { transition: box-shadow var(--d-fast) var(--ease-standard); }
.dock__avatar:hover { box-shadow: 0 0 0 2px var(--accent); }
.dock__composer input { flex: 1; height: 46px; border: 0; background: transparent; font-size: 16px; line-height: 24px; caret-color: var(--accent); }
.dock__composer input::placeholder { color: var(--muted-fg); opacity: 1; }
.dock__composer .round { width: 38px; height: 38px; }
.dock__composer .round--ghost { color: var(--ink); }
.dock__composer .round--ghost:hover { background: var(--secondary-hover); }
.dock__actions { display: flex; align-items: center; gap: 8px; }
.dock__actions .pill { height: 44px; }
.dock__actions .pill--round, .dock__actions .round { width: 44px; height: 44px; }

/* ───────────── LUXURY ───────────── */
.luxury { padding: 16px; background: #fff; }
.luxury__panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 16px; background: var(--ink); color: #fff;
  padding: 52px calc(var(--gutter) - 16px) 76px;
}
/* The glitter (main.js) on a transparent canvas over ink; a warm light falls from above the title and
   the edges sink into the ink, so the field has depth without a picture behind it. */
.luxury__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.luxury__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 46% at 50% -6%, rgba(255, 238, 210, .11), rgba(255, 238, 210, 0) 70%),
    radial-gradient(120% 90% at 50% 50%, rgba(25, 25, 25, 0) 45%, rgba(10, 10, 10, .7) 100%);
}
.luxury__inner { max-width: var(--content); margin-inline: auto; }
.luxury__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; }
.luxury__head .t-section { color: #fff; }
.luxury__head .sec-head { gap: 16px; } /* Figma copy frame 174:8090 is V g16 */
.ask-btn { height: 52px; padding-inline: 12px 24px; }
.luxury__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.lcard { position: relative; display: block; aspect-ratio: 520 / 680; overflow: hidden; isolation: isolate; background: #0d0d0d; cursor: none; }
.lcard__caption, .lcard .badge { cursor: pointer; } /* the follower stays on the image, never over the CTA */
.lcard__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.lcard__zoom { position: absolute; inset: 0; transition: transform 1600ms var(--ease-out); }
.lcard__zoom img, .lcard__zoom video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lcard video { opacity: 0; transition: opacity 600ms var(--ease-standard); }
.lcard.is-playing video { opacity: 1; transition: none; } /* frame 0 is the still: show at once, fade only on the way out */
.lcard::after { /* sibling dimming */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #0b0b0b; opacity: 0;
  transition: opacity 700ms var(--ease-standard);
}
.luxury__cards:hover .lcard:not(:hover)::after { opacity: .5; }
.lcard:hover .lcard__zoom { transform: scale(1.04); }
.lcard__inner { position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.lcard__tags { display: flex; gap: 6px; } /* the tier tag, then the place */
.lcard__caption {
  align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 19px; /* 20 in Figma, minus the 1px border */
  background: var(--glass-dark); border: 1px solid var(--glass-border); box-shadow: var(--fx-glass-dark);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  transition: background-color 700ms var(--ease-standard);
}
.lcard:hover .lcard__caption { background: rgba(0, 0, 0, .6); }
.lcard .cta { height: 28px; } /* Figma cta row: 8 top padding + 20 label; the underline sits in the overflow */
.lcard__tagline { color: var(--on-dark-muted); }
.cta { display: inline-flex; align-items: center; gap: 4px; padding-top: 8px; }
.cta__label { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; padding-bottom: 2px; transition: background-size 700ms var(--ease-out); }
.lcard:hover .cta__label, .acard:hover .cta__label { background-size: 100% 1px; }
.cta .i { transition: transform var(--d-slow) var(--ease-out); }
.lcard:hover .cta .i { transform: translateX(-4px); }

/* ───────────── Areas ───────────── */
.areas { background: var(--secondary); padding-block: 112px; }
.areas .sec-head { margin-bottom: 40px; }
.bento { display: grid; grid-template-columns: 792fr 776fr; gap: 16px; aspect-ratio: 1584 / 640; }
.bento__col { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-height: 0; }
.acard { position: relative; display: block; overflow: hidden; isolation: isolate; background: #222; min-height: 0; }
.acard__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.acard__zoom { position: absolute; inset: 0; transition: transform 1600ms var(--ease-out); }
.acard__zoom img, .acard__zoom video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acard video { opacity: 0; transition: opacity 600ms var(--ease-standard); }
.acard.is-playing video { opacity: 1; transition: none; }
.acard::before, .acard::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.acard::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .24) 100%); } /* a third of what it was (Ori, 1.11) */
.acard::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .3) 100%); opacity: 0; transition: opacity 700ms var(--ease-standard); }
.acard:hover::after { opacity: 1; }
.acard:hover .acard__zoom { transform: scale(1.03); }
.acard__content { position: absolute; inset: auto 24px 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; color: #fff; } /* the pill sits level with the last line (the neighbourhoods) */
.acard__text { position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 0 18px rgba(0, 0, 0, .22); } /* name and button share one 44px row, as in Figma; with the shade this low (Ori, 1.11) the shadow holds the words over bright spots */
.acard__name { transition: transform 700ms var(--ease-out); }
.acard__sub { margin-top: 2px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 0 12px rgba(0, 0, 0, .3); } /* the area's neighbourhoods (26.10) */
.acard__count { position: absolute; inset-inline-start: 0; bottom: 100%; white-space: nowrap; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 0 12px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--ease-standard), transform 700ms var(--ease-out); }
.acard:hover .acard__count { opacity: 1; transform: none; }
.acard .pill--glass { pointer-events: none; }
.acard:hover .pill--glass { background: var(--glass-strong); box-shadow: var(--fx-glass-strong); }
.acard:hover .pill--glass .i { transform: translateX(-4px); }

/* ───────────── Flagship grid ───────────── */
.flagship { background: #fff; padding-block: 112px; overflow-x: clip; } /* clip, not hidden: the sticky filter keeps working */
.flagship .sec-head { margin-bottom: 40px; }
.filterbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 64px; padding-block: 12px; border-block: 1px solid var(--border); margin-bottom: 40px;
  /* sticky under the header while the grid scrolls by (Ori, 26.10) */
  position: sticky; top: var(--dock-h); z-index: 20; transition: border-color var(--d-base) var(--ease-standard);
}
/* once stuck: frosted glass across the full width (the section clips the overhang, see .flagship) */
.filterbar::before {
  content: ''; position: absolute; z-index: -1; inset-block: -1px; inset-inline: calc((100vw - 100%) / -2);
  background: rgba(255, 255, 255, .84); box-shadow: 0 1px 0 var(--border), 0 16px 32px -24px rgba(25, 25, 25, .22);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  opacity: 0; transition: opacity var(--d-slow) var(--ease-standard); pointer-events: none;
}
.filterbar.is-stuck { border-color: transparent; }
.filterbar.is-stuck::before { opacity: 1; }
.filterbar__sentinel { display: block; height: 1px; margin-bottom: -1px; }
.filterbar__chips { display: flex; align-items: center; gap: 8px; }
.filterbar__rule { width: 1px; height: 24px; background: var(--border); }
.viewtoggle { display: flex; padding: 4px; gap: 0; border-radius: 9999px; background: var(--muted); }
.viewtoggle button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted-fg); transition: background-color var(--d-fast) var(--ease-standard), color var(--d-fast) var(--ease-standard), box-shadow var(--d-fast) var(--ease-standard); }
.viewtoggle button[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: var(--depth-1); }
.viewtoggle button:not([aria-pressed='true']):hover { color: var(--ink); }

/* Six tracks (v2): a card takes two, so three to a row as before. In an area view the tiered projects lead
   (main.js, layoutFor): .is-feature takes three tracks (two to a row), .is-wide the whole row, its picture
   on four tracks and its copy beside it. Heads mark the two groups. */
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; }
.grid[hidden] { display: none; } /* the map view takes its place */
.grid__head { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; min-height: 24px; }
.grid__head[hidden] { display: none; }
.grid__head--rest { margin-top: 24px; }
.grid__head-tags { display: flex; gap: 6px; }
.grid__head-rule { flex: 1; height: 1px; background: var(--border); }

/* Map view (assets/js/map-maplibre.js): the grid's twin, under the same
   sticky filter. Pins are site-made HTML over the map; hovering or focusing a pin brings up its minicard. */
/* Full width, flush under the filter, filling the screen under the header and the filter (Ori, 26.10). */
.mapview { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); height: max(560px, calc(100vh - 136px)); overflow: hidden; background: #f3f3f3; }
.flagship.is-map { padding-bottom: 0; }
.flagship.is-map .filterbar { margin-bottom: 0; }
.mapview[hidden] { display: none; }
.mapview__canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease-standard); }
.mapview.is-ready .mapview__canvas { opacity: 1; }
.mapview__note { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-fg); pointer-events: none; transition: opacity 300ms var(--ease-standard); }
.mapview.is-ready .mapview__note { opacity: 0; }
.mpin {
  position: absolute; left: 0; top: 0; translate: -50% -50%; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; transition: opacity 320ms var(--ease-standard), scale 420ms var(--ease-out);
}
.mpin__label { /* the name, tooltip-style, above the pin (or under it when the space above is taken) */
  position: absolute; left: 50%; bottom: calc(50% + 14px); translate: -50% 0; padding: 4px 9px; border-radius: 6px;
  background: var(--ink); color: #fff; white-space: nowrap; font-weight: 500; font-size: 12px; line-height: 16px;
  box-shadow: 0 8px 18px -8px rgba(25, 25, 25, .5); transition: opacity var(--d-base) var(--ease-standard), background-color var(--d-base) var(--ease-standard);
}
.mpin__label::after { content: ''; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; translate: -50% -55%; rotate: 45deg; background: inherit; border-radius: 1px; }
.mpin[data-label='below'] .mpin__label { bottom: auto; top: calc(50% + 14px); }
.mpin[data-label='below'] .mpin__label::after { top: 0; translate: -50% -45%; }
.mpin:is([data-label='left'], [data-label='right']) .mpin__label { bottom: auto; top: 50%; translate: 0 -50%; }
.mpin[data-label='left'] .mpin__label { left: auto; right: calc(50% + 14px); }
.mpin[data-label='right'] .mpin__label { left: calc(50% + 14px); }
.mpin[data-label='left'] .mpin__label::after { left: 100%; top: 50%; translate: -55% -50%; }
.mpin[data-label='right'] .mpin__label::after { left: 0; top: 50%; translate: -45% -50%; }
.mpin[data-label='none'] .mpin__label, .mpin:not([data-label]) .mpin__label { opacity: 0; pointer-events: none; }
.mpin:is(:hover, :focus-visible, .is-hot) .mpin__label { background: var(--accent-strong); }
.mpin.is-pick .mpin__label { background: var(--accent-strong); }
.mpin__dot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 3px #fff, 0 6px 14px -2px rgba(25, 25, 25, .35);
  transition: background-color var(--d-base) var(--ease-standard), transform 420ms var(--ease-out), box-shadow var(--d-slow) var(--ease-standard);
}
.mpin:is(:hover, :focus-visible, .is-hot) { z-index: 2; }
.mpin:is(:hover, :focus-visible, .is-hot) .mpin__dot { background: var(--accent); transform: scale(1.3); }
.mpin:focus-visible { outline: none; }
.mpin.is-pick .mpin__dot { background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(237, 16, 0, .22), 0 6px 14px -2px rgba(25, 25, 25, .35); }
.mpin.is-out { opacity: 0; scale: .4; pointer-events: none; }
.mcard {
  position: absolute; z-index: 5; left: 0; top: 0; width: 272px; translate: -50% calc(-100% - 22px);
  display: block; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: var(--depth-4);
  opacity: 0; visibility: hidden; scale: .96; transform-origin: 50% 100%;
  transition: opacity 200ms var(--ease-standard), scale 360ms var(--ease-out), visibility 0s linear 200ms;
}
.mcard.is-on { opacity: 1; visibility: visible; scale: 1; transition-delay: 0s; }
.mcard.is-below { translate: -50% 22px; transform-origin: 50% 0; }
.mcard::after { /* the pointer, kept over the pin when the card is nudged off the map's edge */
  content: ''; position: absolute; left: calc(50% + var(--nudge, 0px)); bottom: -6px; width: 12px; height: 12px;
  background: #fff; rotate: 45deg; translate: -50% 0;
}
.mcard.is-below::after { bottom: auto; top: -6px; }
.mcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px 14px 0 0; }
.mcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
.mcard:hover .mcard__media img { transform: scale(1.04); }
.mcard__tags { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; gap: 6px; }
.mcard__body { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; }
.mcard__loc, .mcard__meta { color: var(--muted-fg); }
.mcard__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--accent-strong); }
.mcard:hover .mcard__more .i { transform: translateX(-3px); }
.mcard__more .i { transition: transform var(--d-slow) var(--ease-out); }
/* The 3D map (map-maplibre.js): the pins sit in their own layer over the map, on their towers' roofs */
.mapview__pins { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 700ms var(--ease-standard), visibility 0s linear 700ms; }
.mapview.is-ready .mapview__pins { opacity: 1; visibility: visible; transition-delay: 0s; }
.mapview__pins .mpin { pointer-events: auto; }
.mpin.is-gone { visibility: hidden; }
.mapview__canvas.maplibregl-map { position: absolute; } /* maplibre-gl.css sets it relative, which collapses it */
.mapview__canvas::after { content: ""; position: absolute; inset: var(--map-cover, 0px) 0 auto; height: 30%; background: linear-gradient(rgba(243, 243, 243, 0.92) 8%, rgba(243, 243, 243, 0)); opacity: var(--map-haze, 0); pointer-events: none; }
/* the zoom, compass and tilt control: leftmost at every width (Ori, 28.10), on the page edge like the header's share
   button, and kept below the filter where it covers the map's top (--map-cover, from map-maplibre.js) */
.mapview .maplibregl-ctrl-top-left { top: var(--map-cover, 0px); left: var(--edge); }
.mapview .maplibregl-ctrl-top-left .maplibregl-ctrl { margin: 16px 0 0; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 16px; grid-column: span 2; }
.pcard.is-feature { grid-column: span 3; }
.pcard.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; row-gap: 0; }
.pcard.is-wide .pcard__media { grid-column: span 4; }
.pcard.is-wide .pcard__body { grid-column: span 2; align-self: stretch; padding-bottom: 4px; }
.pcard__logo { display: none; height: auto; filter: brightness(0); } /* the white logo, inked */
.pcard.is-wide .pcard__logo { display: block; margin-bottom: auto; }
.pcard:is(.is-feature, .is-wide) .pcard__media { aspect-ratio: 16 / 10; }
.pcard.is-wide .pcard__media { aspect-ratio: 2 / 1; } /* a lower picture, so the lone leader isn't oversized (Ori, 27.10) */
.pcard:is(.is-feature, .is-wide) .brand-logo { max-width: min(300px, calc(var(--a) * 62cqh)); }
.pcard:is(.is-feature, .is-wide) .pcard__name { font-size: 30px; line-height: 40px; }
.pcard__tagline { display: none; color: var(--ink); }
.pcard:is(.is-feature, .is-wide) .pcard__tagline { display: block; margin-bottom: 4px; }
.pcard.is-wide .pcard__tagline { margin-top: 4px; margin-bottom: 8px; }
.pcard[hidden] { display: none; }
.pcard__link { position: absolute; inset: 0; z-index: 1; }
.pcard__link:focus-visible { outline-offset: 6px; }
.pcard.is-cursor .pcard__link { cursor: none; }
.pcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--muted); cursor: none; }
/* no isolation here: the heart (z 2) must sit above the card's full-card link (z 1) to be clickable */
.pcard__zoom { position: absolute; inset: -12px; transition: transform 1400ms var(--ease-out); }
.pcard__zoom img, .pcard__zoom video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard video { opacity: 0; transition: opacity 600ms var(--ease-standard); }
.pcard.is-playing video { opacity: 1; transition: none; }
.pcard:hover .pcard__zoom {
  transform: scale(1.03) translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -6px), 0);
}
/* Hover logo (project and LUXURY cards): a soft scrim and the project logo (white) rising into
   the centre; no logo, the name in a hollow rectangle. Driven by .is-hot (the scroll-aware
   hover) and keyboard focus. */
.pcard__brand, .lcard__brand { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.lcard__brand { padding-bottom: 164px; } /* centre in the image above the glass caption (148 + 16) */
.pcard__brand::before, .lcard__brand::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(58% 58% at 50% 50%, rgba(10, 10, 10, .24), rgba(10, 10, 10, 0)), rgba(10, 10, 10, .28);
  opacity: 0; transition: opacity 600ms var(--ease-standard);
}
.brand-logo, .brand-mark {
  position: relative; opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity 450ms var(--ease-standard), transform 900ms var(--ease-out);
}
.brand-logo { height: auto; filter: brightness(0) invert(1); }
/* v4: a project card's logo is never taller than 62% of the space it centres in (its width share already made it
   62% of a 4:3 picture's height). The low wide leader (21:9) cut Vertical's tall logo top and bottom (Ori, 31.10). */
.pcard__brand { container-type: size; }
.pcard .brand-logo { max-width: calc(var(--a) * 62cqh); }
/* A LUXURY card stays bright under the pointer (Ori, 27.10): no scrim over the picture, only a faint
   halo behind the logo, which carries its own soft shadow. (After the shared scrim rule, which it overrides.) */
.lcard .lcard__brand::before { background: radial-gradient(34% 26% at 50% 50%, rgba(10, 10, 10, .2), rgba(10, 10, 10, 0)); }
.lcard .brand-logo { filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgba(0, 0, 0, .35)); }
.brand-mark { padding: 10px 22px; border: 1px solid rgba(255, 255, 255, .9); color: #fff; white-space: nowrap; }
.pcard.is-hot .pcard__brand::before, .pcard:has(:focus-visible) .pcard__brand::before,
.lcard.is-hot .lcard__brand::before, .lcard:focus-visible .lcard__brand::before { opacity: 1; }
:is(.pcard.is-hot, .pcard:has(:focus-visible), .lcard.is-hot, .lcard:focus-visible) :is(.brand-logo, .brand-mark) { opacity: 1; transform: none; transition-delay: 60ms; }
.pcard__top { position: absolute; inset: 12px 12px auto; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; } /* the tier tag, then the status */
.save {
  pointer-events: auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--glass-regular); border: 1px solid var(--glass-border); box-shadow: var(--fx-glass-regular); color: var(--ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  transition: background-color var(--d-base) var(--ease-standard), transform var(--d-slow) var(--ease-out);
}
.save:hover { background: var(--glass-strong); transform: scale(1.06); }
.save .i { transition: fill var(--d-base) var(--ease-standard); }
.save[aria-pressed='true'] { color: var(--accent-strong); }
.save[aria-pressed='true'] .i { fill: currentColor; }
.save.is-popping .i { animation: heart 520ms var(--ease-out); }
@keyframes heart { 0% { transform: scale(1); } 30% { transform: scale(1.32); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.pcard__body { display: flex; flex-direction: column; gap: 4px; }
.pcard__name span { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; padding-bottom: 1px; transition: background-size 700ms var(--ease-out); }
.pcard:hover .pcard__name span { background-size: 100% 1px; }
.pcard__loc, .pcard__meta { color: var(--muted-fg); }
.pcard__actions { display: flex; align-items: center; justify-content: space-between; height: 32px; padding-top: 12px; box-sizing: content-box; }
.ask {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; color: var(--accent-strong);
  padding-block: 2px; margin-block: -2px; /* a 25 px target (WCAG 2.5.8 asks 24) at the same place in the line */
}
.ask:hover .i { animation: twinkle 900ms var(--ease-out); }
.ask__label { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; padding-bottom: 1px; transition: background-size 500ms var(--ease-out); }
.ask:hover .ask__label { background-size: 100% 1px; }
.more { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); transition: color var(--d-base) var(--ease-standard); }
.more .i { transition: transform var(--d-slow) var(--ease-out); }
.pcard:hover .more { color: var(--accent-strong); }
.pcard:hover .more .i { transform: translateX(-4px); }
.pcard__go { display: none; } /* the leaders' arrow */

/* The leaders (v4, Ori: "the highlighted properties should be designed like the luxury property units, 2x2
   squares"): in an area view the tiered projects (main.js, layoutFor: .is-lead) are LUXURY's cards, squares two to a
   row (2 x 2 in the centre and south), the picture filling the card, the tags and the heart on it, the copy in the
   dark glass caption at its foot. A lone leader (the north's Rainbow) takes the row in a wide frame. The caption lets
   clicks through to the card's link; the follower turns dark over the picture (main.js). */
.grid .pcard.is-lead { display: block; aspect-ratio: 1; overflow: hidden; isolation: isolate; background: #0d0d0d; color: #fff; }
.grid .pcard.is-lead.is-wide { aspect-ratio: 21 / 9; }
.grid .pcard.is-lead .pcard__media { position: absolute; inset: 0; aspect-ratio: auto; background: #0d0d0d; }
.pcard.is-lead .pcard__top { inset: 16px 16px auto; }
.pcard.is-lead .pcard__body {
  position: absolute; z-index: 2; inset: auto 16px 16px; pointer-events: none;
  display: flex; flex-direction: column; gap: 4px; padding: 15px 23px 17px;
  /* a lighter glass than LUXURY's (Ori: "just a bit more translucent, while preserving legibility"): 56% black keeps
     white type at 4.5:1 even over a white render, a deeper blur evens out what shows through, and a faint shadow
     holds the words over bright spots */
  background: rgba(0, 0, 0, .56); border: 1px solid var(--glass-border); box-shadow: var(--fx-glass-dark);
  -webkit-backdrop-filter: blur(32px) saturate(1.2); backdrop-filter: blur(32px) saturate(1.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  transition: background-color 700ms var(--ease-standard);
}
/* the wide leader's caption is a square's (Ori, 31.10: "not shorter, not wider, fits the grid"): half the row less
   the grid's 32px gap, less its 16px insets, so it lines up under the caption of the square above it */
.pcard.is-lead.is-wide .pcard__body { inset-inline-end: auto; width: calc((100% - 32px) / 2 - 32px); }
.pcard.is-lead:hover .pcard__body { background: rgba(0, 0, 0, .48); }
.grid .pcard.is-lead .pcard__logo { display: none; }
.grid .pcard.is-lead .pcard__name { font-size: 36px; line-height: 44px; padding-inline-end: 40px; }
.grid .pcard.is-lead .pcard__tagline { display: block; margin: 4px 0 0; color: rgba(255, 255, 255, .92); }
/* the place and the figures stay off the leaders for now (Ori); so do the actions row, for a more compact card (Ori,
   1.11): the name, the tagline, and the card's arrow across from the name */
.pcard.is-lead :is(.pcard__loc, .pcard__meta, .pcard__actions) { display: none; }
.pcard.is-lead .pcard__go {
  position: absolute; inset-block-start: 15px; inset-inline-end: 23px; height: 44px; /* the name's line */
  display: flex; align-items: center; transition: transform var(--d-slow) var(--ease-out);
}
.pcard.is-lead:hover .pcard__go { transform: translateX(-4px); }
/* the hover logo: centred in the picture above the caption, over a faint halo (LUXURY's, Ori 27.10); main.js
   (fitBrand) measures the caption: --cap-b the depth it takes, --cap-s the side the wide leader's takes (the % and 0
   hold until it has) */
.pcard.is-lead .pcard__brand { padding-bottom: var(--cap-b, 26%); padding-inline-start: var(--cap-s, 0px); }
.pcard.is-lead.is-wide .pcard__brand { padding-bottom: var(--cap-b, 0px); }
.pcard.is-lead .pcard__brand::before { background: radial-gradient(34% 26% at 50% 50%, rgba(10, 10, 10, .2), rgba(10, 10, 10, 0)); }
.pcard.is-lead .brand-logo { filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgba(0, 0, 0, .35)); }

/* ───────────── Group (v4, Ori: "remove the left image, make this entire section bg red... a more typographical
   section") ───────────── */
/* The brand red from edge to edge, all its type in white (4.5:1 on the red, so even the captions keep full white):
   the eyebrow, Ori's heading and subheading on the right, the five figures in the headline serif over white rules on
   the left, the last across both columns (Ori: the heading was "way too big", the section "huge"; no bar and logo here). */
/* #ec1000, one step from the brand red: white on #ed1000 is 4.49:1, a hair under the 4.5 that body text needs (WCAG
   1.4.3); #ec1000 is 4.52:1 and looks the same (ΔE 0.4). Accessibility pass, 2.11. */
.group { position: relative; overflow: hidden; overflow: clip; background: #ec1000; color: #fff; padding-block: 112px; }
.group__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 96px; }
.group__copy { display: flex; flex-direction: column; align-items: flex-start; }
.group .eyebrow { color: #fff; }
.group .eyebrow::before { background: #fff; }
.group__title { margin-top: 20px; font-weight: 400; font-size: clamp(44px, 3.4vw, 64px); line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; }
.group__body { max-width: 620px; margin-top: 28px; font-weight: 400; font-size: 20px; line-height: 32px; text-wrap: pretty; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.stat { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 24px; }
.stat::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: rgba(255, 255, 255, .6); transform-origin: 100% 50%; }
/* v3: the numbers in the headline serif (Cardone, for now Playfair Display), as on the brand's project page
   (page 16), at v2's size; set to the right like their captions; 30+ reads left to right. */
.stat__num {
  font-size: 72px; line-height: 72px;
  color: #fff; font-variant-numeric: lining-nums tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: right;
}
.stat__cap { color: #fff; font-size: 16px; line-height: 24px; }
/* "כ-150": the Hebrew stands to the right of the figure, in the text face, so this one reads right to left */
.stat__num--about { direction: rtl; }
.stat__about { font-family: 'Simpler Pro', sans-serif; font-size: .5em; line-height: 0; }
.stat__num--about [data-to] { unicode-bidi: isolate; direction: ltr; }
.textlink { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; align-self: flex-start; }
.textlink__label { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; padding-bottom: 2px; transition: background-size 600ms var(--ease-out); }
.textlink:hover .textlink__label { background-size: 100% 1px; }
.textlink .i { transition: transform var(--d-slow) var(--ease-out); }
.textlink:hover .i { transform: translateX(-4px); }

/* ───────────── Lead finale ───────────── */
.finale { position: relative; min-height: 1040px; display: flex; align-items: center; color: #fff; background: var(--ink); overflow: hidden; isolation: isolate; }
.finale__bg { position: absolute; inset: -8% 0; z-index: -2; will-change: transform; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; }
.finale__bg picture { display: contents; }
/* v4: the footer under it is white (Ori: "invert to white, as well as the shader above it so it blends nicely"), so
   the picture lifts into white at its foot instead of sinking into ink; the shade over it keeps the copy readable
   and lets go before the white comes in. The white is a tall eased fade (Ori: "a bit taller... smoother"), and the
   grid keeps its foot clear of it. */
.finale__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .06) 69%, rgba(255, 255, 255, .2) 76%,
    rgba(255, 255, 255, .42) 83%, rgba(255, 255, 255, .68) 90%, rgba(255, 255, 255, .9) 96%, #fff 100%),
  linear-gradient(180deg, rgba(25, 25, 25, .15) 0%, rgba(25, 25, 25, .06) 45%, rgba(25, 25, 25, .12) 60%, rgba(25, 25, 25, 0) 80%),
  linear-gradient(90deg, rgba(25, 25, 25, .22) 0%, rgba(25, 25, 25, 0) 36%, rgba(25, 25, 25, 0) 56%, rgba(25, 25, 25, .3) 100%); } /* half of what it was (Ori, 1.11): no type stands on the picture now */
.finale__grid { display: flex; align-items: center; padding-block: 120px 280px; }
/* v4 (Ori): the ring 16, the card 12, as the composer's */
.leadform {
  width: 624px; flex: none; padding: 8px; border-radius: 16px;
  background: var(--glass-subtle); border: 1px solid var(--glass-border); box-shadow: var(--fx-glass-subtle);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.leadform__card {
  position: relative; display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: 12px; overflow: hidden;
  background: var(--glass-form); border: 1px solid var(--glass-border); box-shadow: var(--fx-glass-strong);
  -webkit-backdrop-filter: blur(32px) saturate(1.4); backdrop-filter: blur(32px) saturate(1.4);
  color: var(--ink);
}
.leadform__sub { color: var(--muted-fg); }
.fields { display: flex; flex-direction: column; gap: 8px; }
.fields__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__control {
  position: relative; display: flex; align-items: center; height: 52px; padding-inline: 16px;
  background: #fff; border: 1px solid var(--input); border-radius: 4px;
  transition: border-color var(--d-fast) var(--ease-standard), box-shadow var(--d-fast) var(--ease-standard);
}
.field__control:hover { border-color: var(--ink); }
.field__control:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(25, 25, 25, .08); }
.field__control input, .field__control select {
  width: 100%; height: 100%; border: 0; background: transparent; padding: 0; font-size: 16px; line-height: 24px;
  appearance: none; -webkit-appearance: none; border-radius: 0;
}
.field__control input::placeholder { color: var(--muted-fg); opacity: 1; }
.field__control select { cursor: pointer; padding-inline-end: 28px; }
.field__control select:invalid { color: var(--muted-fg); }
.field__control .i { position: absolute; inset-inline-end: 16px; pointer-events: none; }
.field.is-error .field__control { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__error { display: none; color: var(--error); }
.field.is-error .field__error { display: block; }
.checks { display: flex; flex-direction: column; }
.check { display: flex; align-items: flex-start; gap: 12px; padding-block: 12px; cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px;
  background: #fff; border: 1px solid var(--input); color: #fff;
  transition: background-color var(--d-fast) var(--ease-standard), border-color var(--d-fast) var(--ease-standard);
}
.check__box .i { opacity: 0; transform: scale(.5); transition: opacity var(--d-fast) var(--ease-standard), transform var(--d-slow) var(--ease-out); }
.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .check__box .i { opacity: 1; transform: none; }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check.is-error .check__box { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.leadform__actions { display: flex; gap: 8px; }
.leadform__actions .pill--accent { flex: 1; }
/* v4 (the client, 1.11: the heading area "under-designed"; Ori: inside the form's unit, a white glass block to the right of
   the fields, the unit one wide rectangle). The ring and the card stay the form's; the fields keep its glass, and the
   block is whiter over it, with the heading in the bold (Ori: "smaller and bolder"). */
.finale__unit { width: 100%; max-width: 1340px; margin-inline: auto; } /* Ori */
.finale__card { display: grid; grid-template-columns: minmax(0, 1fr) 608px; gap: 0; padding: 0; }
.finale__fields { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 46px 40px 40px; min-width: 0; } /* 6px more on top: the first labels stand on the eyebrow's line (Ori) */
/* the send button and the number share a band (Ori): same height, same foot, whichever side sets the unit's height */
.finale__fields .leadform__actions { margin-top: auto; }
.leadform.is-done .finale__fields > :not(.leadform__done) { visibility: hidden; } /* sent: the thanks alone, over this glass */
.finale__copy { container-type: inline-size; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 40px; min-width: 0; padding: 40px 56px; background: rgba(255, 255, 255, .6); }
.finale__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; color: var(--ink); }
.finale__intro .eyebrow { color: var(--ink); }
.finale__title { font-weight: 700; font-size: min(clamp(40px, 3.1vw, 60px), 11.4cqw); line-height: 1.12; letter-spacing: -.005em; } /* never wider than its block, so the first line holds */
.finale__body { max-width: 30em; color: var(--muted-fg); text-wrap: pretty; }
.leadform__done {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 40px;
  background: rgba(255, 255, 255, .94); opacity: 0; visibility: hidden; transition: opacity var(--d-morph) var(--ease-out), visibility 0s linear var(--d-morph);
}
.leadform.is-done .leadform__done { opacity: 1; visibility: visible; transition-delay: 0s; }
.leadform__done .i { color: var(--success); }

/* ───────────── Footer ───────────── */
/* v4 (Ori): white above the signature and under it, the finale's picture lifting into it (above) */
.footer { background: #fff; color: var(--ink); padding: 96px 0 0; overflow: hidden; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; }
.footer__cols { display: flex; gap: 96px; }
.fcol { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.fcol__title { color: var(--accent); }
.fcol a { color: var(--muted-fg); transition: color var(--d-base) var(--ease-standard); }
.fcol a:hover { color: var(--ink); }
.fcol__phone { font-size: 72px; line-height: 80px; }
.fcol a.fcol__phone { color: var(--ink); }
.fcol a.fcol__phone:hover { color: var(--accent); }
.fcol__row { display: flex; align-items: center; gap: 8px; color: var(--ink); }
/* The signature (index.html): one of two compositions by width; both fill the width, the wide one capped in
   height and cut from the bottom (the bar and the logo sit near its top). */
.footer__sig { margin-top: 112px; overflow: hidden; }
.sig { width: 100%; height: auto; }
.sig--wide { aspect-ratio: 5504 / 2293; max-height: 88vh; }
.sig--narrow { display: none; aspect-ratio: 4004 / 3003; }
.sig__bar { transform-box: fill-box; transform-origin: 0% 50%; }
.js .sig__bar { transform: scaleX(0); transition: transform 1800ms var(--ease-out) 200ms; }
.js .sig__logo { opacity: 0; transition: opacity 1200ms var(--ease-standard) 900ms; }
.js .footer__sig.in .sig__bar { transform: none; }
.js .footer__sig.in .sig__logo { opacity: 1; }
/* The bottom bar (Ori, 29.10): over a rule, the legal line and the legal pages (again, as in the columns) on the
   right, the credits on the left, left to right, the studios' names in bold */
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 28px;
  flex-wrap: wrap; /* a notebook too narrow for both (under ~1110, three credits since 2.11): the credits go under, whole */
}
/* v4 (Ori): the bottom bar on the light blue, from edge to edge under the signature; its type in a dark slate that
   reads on the blue (7:1), the credits smaller and lighter (4.3:1) */
.footer__base { background: var(--sky); padding-bottom: 12px; }
.footer__legal, .footer__credits { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; color: #2c3740; } /* 14 across (was 20; Ori, 2.11: "just a bit" tighter) */
/* #4a5661 (was #4d5a65, 4.25:1 on the light blue): 4.51:1, as small text needs. The credits are marked English for
   screen readers (lang="en"); they keep Simpler, not the :lang(en) face. */
.footer__credits { font-size: 13px; line-height: 18px; color: #4a5661; }
.footer__credits, .footer__credits * { font-family: 'Simpler Pro', system-ui, sans-serif; }
.footer__credits b { font-weight: 700; color: #2c3740; }
.footer__sep { color: rgba(44, 55, 64, .32); }
.footer__legal a, .footer__credits a { transition: color var(--d-base) var(--ease-standard); } /* the studios' sites (Ori, 27.10) */
.footer__legal a:hover, .footer__credits a:hover { color: var(--ink); }

/* ───────────── Cursor follower (cards) ───────────── */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none;
  width: 104px; height: 104px; margin: -52px 0 0 -52px;
  will-change: transform;
}
.cursor__disc {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--glass-regular); color: var(--ink); border: 1px solid var(--glass-border); box-shadow: var(--fx-glass-regular);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  transform: scale(.3); opacity: 0;
  transition: transform 520ms var(--ease-out), opacity 260ms var(--ease-standard);
}
.cursor.is-on .cursor__disc { transform: scale(1); opacity: 1; }
.cursor.is-down .cursor__disc { transform: scale(.9); }
.cursor.is-dark .cursor__disc { background: rgba(0, 0, 0, .55); color: #fff; box-shadow: var(--fx-glass-dark); }

/* ───────────── Preloader ───────────── */
.preloader { display: none; }
/* --pace scales every preloader timing (v4, Ori 31.10: "15% faster in general"); main.js keeps its own PACE in step */
.js .preloader {
  --pace: .85;
  display: block; position: fixed; inset: 0; z-index: 200; pointer-events: none; color: #fff;
  animation: preloader-failsafe 0s linear 9s forwards; /* never blocks the page if something fails */
}
@keyframes preloader-failsafe { to { visibility: hidden; } }
.preloader__slices { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); }
.preloader__slices span {
  width: calc(100% + 1px); /* overlap by a pixel so no seam of video shows between columns */
  background: var(--sky); /* v4 (Ori): #B8CBDB, for v3's dark grey */
  border-inline-start: 1px solid rgba(255, 255, 255, .22);
  transition: transform calc(1150ms * var(--pace)) cubic-bezier(.7, 0, .2, 1) calc(var(--d) * var(--pace));
  will-change: transform;
}
.preloader__slices span:first-child { border-inline-start: 0; }
/* The mark: a copy of the hero's logo, placed at the hero logo's spot and lifted to the middle of the screen by
   --lift (main.js). It is wiped in there; once the page is in, it glides up to its spot as the columns lift (Ori, 28.10),
   and the hero's own logo, hidden until it lands, takes over. */
.preloader__mark {
  position: absolute; inset-inline: 0; top: 0; z-index: 1; display: flex; flex-direction: column; align-items: center;
  transform: translate3d(0, var(--lift, 0px), 0);
}
/* the glide only on the way out: the lift itself (and any re-measure while loading) lands at once, so the logo
   is centred from its first frame (Ori, 28.10) */
.preloader.is-out .preloader__mark { transform: none; transition: transform calc(1100ms * var(--pace)) cubic-bezier(.65, 0, .35, 1); }
.preloader__mark .hero__brand { margin: 0; } /* the copy is placed by the hero logo's own spot (main.js), not its margins */
.is-landed .preloader__mark { visibility: hidden; }
.has-preloader:not(.is-landed) .hero .hero__logo { visibility: hidden; animation: logo-failsafe 0s linear 9s forwards; } /* shows anyway if the intro fails, as the preloader's own failsafe */
@keyframes logo-failsafe { to { visibility: visible; } }
/* it's wiped in where it stands, already centred (Ori, 28.10), and moves only for the glide */
.preloader .hero__logo { clip-path: inset(0 0 100% 0); transition: clip-path calc(1100ms * var(--pace)) var(--ease-out); }
.preloader.is-in .hero__logo { clip-path: inset(-1px); transition-delay: calc(200ms * var(--pace)); }
.preloader__rule { /* the progress: a red rule along the foot (16px, Ori 28.10: "even thicker") */
  position: absolute; z-index: 1; inset-inline: 0; bottom: 0; height: 16px; background: var(--red);
  transform-origin: 100% 100%; transform: scaleX(0);
}
/* On the way out it doesn't vanish (Ori, 29.10: "shrinks down vertically properly"): it shrinks down, in the glide's
   time and curve, onto the hero's own 4px rule and takes that rule's shade, so the preloader's fade leaves no seam.
   main.js sets how far: to the 4px, or to nothing when the hero runs past the foot of the screen. */
.preloader.is-out .preloader__rule {
  background: var(--accent);
  transition: transform calc(1100ms * var(--pace)) cubic-bezier(.65, 0, .35, 1), background-color calc(1100ms * var(--pace)) var(--ease-standard);
}
.preloader.is-out .preloader__slices span { transform: translateY(-101%); }
.preloader.is-done { opacity: 0; transition: opacity calc(350ms * var(--pace)) var(--ease-standard); }
/* Under the preloader the hero's own logo snaps into place; the copy above covers it. */
.has-preloader .hero .hero__logo { transition: none !important; }

/* ───────────── Tooltip (one floating ink tip, positioned by JS, never clipped by glass) ───────────── */
.tip {
  position: fixed; top: 0; left: 0; z-index: 160; pointer-events: none;
  padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; white-space: nowrap;
  box-shadow: var(--depth-2);
  opacity: 0; transform: translateY(4px);
  transition: opacity 160ms var(--ease-standard), transform 260ms var(--ease-out);
}
.tip.is-below { transform: translateY(-4px); }
.tip.is-on { opacity: 1; transform: none; }
.tip::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px;
  background: inherit; border-radius: 1px; transform: rotate(45deg);
}
.tip.is-below::after { bottom: auto; top: -4px; }

/* ───────────── Lead modal ───────────── */
.lead-modal {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: 32px; border: 0; background: transparent; color: var(--ink);
  overflow: auto; overscroll-behavior: contain;
}
.lead-modal[open] { display: grid; place-items: center; }
.lead-modal::backdrop { background: transparent; }
.lead-modal__scrim {
  position: fixed; inset: 0; background: rgba(25, 25, 25, .58);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0; transition: opacity 450ms var(--ease-standard);
}
/* clip, not hidden: a hidden-overflow panel may be squeezed to the screen's height and cut its form off, where a
   clipped one keeps its full height and the dialog scrolls it. The auto margins centre it while it fits and start it
   at the top when it doesn't (centring would push its top out of reach). */
.lead-modal__panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 400px; /* RTL: form right, render left */
  width: min(1040px, 100%); margin: auto; border-radius: 24px; overflow: hidden; overflow: clip; background: #fff; box-shadow: var(--depth-4);
  opacity: 0; transform: translateY(28px) scale(.985);
  transition: opacity 500ms var(--ease-standard), transform 900ms var(--ease-out);
}
.lead-modal.is-open .lead-modal__scrim { opacity: 1; }
.lead-modal.is-open .lead-modal__panel { opacity: 1; transform: none; }
.lead-modal.is-closing .lead-modal__scrim { transition-duration: 300ms; }
.lead-modal.is-closing .lead-modal__panel { transform: translateY(12px) scale(.99); transition: opacity 260ms var(--ease-exit), transform 300ms var(--ease-exit); }
.lead-modal__form { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 48px 48px 40px; }
.lead-modal__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.lead-modal__sub { color: var(--muted-fg); }
.lm-in { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-standard), transform 900ms var(--ease-out); transition-delay: calc(180ms + var(--i, 0) * 60ms); }
.lead-modal.is-open .lm-in, .lead-modal.is-closing .lm-in { opacity: 1; transform: none; }
.lead-modal.is-closing .lm-in { transition: none; }
/* v4 (Ori, 31.10): the brand red with the two-row logo in its middle, in place of Dubnov's render, and the logo takes
   the render's slow settle as the modal opens. Of the render's shade only a lighter foot stays, under the *9098 (Ori:
   "drop the upper and tone down the lower"); none on the tablets' and phones' strip (responsive.css). */
.lead-modal__media {
  position: relative; isolation: isolate; overflow: hidden; min-height: 600px; padding: 32px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; color: #fff;
  background: var(--red);
}
.lead-modal__media::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(25, 25, 25, 0) 48%, rgba(25, 25, 25, .16) 74%, rgba(25, 25, 25, .44) 100%);
}
.lead-modal__logo {
  --w: 252px; position: absolute; inset: 0; margin: auto; width: var(--w); height: calc(var(--w) * .43592);
  color: #fff; overflow: visible; transform: scale(1.08); transition: transform 1800ms var(--ease-out);
}
.lead-modal.is-open .lead-modal__logo { transform: none; }
.lead-modal__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lead-modal__contact .serif { font-size: 56px; line-height: 64px; color: #fff; }
.lead-modal__contact p { max-width: 260px; color: var(--on-dark-muted); }
.lead-modal__close {
  position: absolute; top: 20px; inset-inline-end: 20px; z-index: 3;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--glass-subtle); border: 1px solid var(--glass-border); color: #fff; box-shadow: var(--fx-glass-subtle);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--d-base) var(--ease-standard), color var(--d-base) var(--ease-standard);
}
.lead-modal__close:hover { background: var(--glass-regular); color: var(--ink); }
.lead-modal__close .i { transition: transform 420ms var(--ease-out); }
.lead-modal__close:hover .i { transform: rotate(90deg); }
.lead-modal__done {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px;
  padding: 48px; background: #fff; opacity: 0; visibility: hidden;
  transition: opacity 600ms var(--ease-out), visibility 0s linear 600ms;
}
.lead-modal__form.is-done .lead-modal__done { opacity: 1; visibility: visible; transition-delay: 0s; }
.lead-modal__done .i { color: var(--success); }
.lead-modal__done .pill { margin-top: 12px; }

/* ───────────── Toast ───────────── */
.toast {
  position: fixed; bottom: 32px; left: 50%; z-index: 120;
  display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 16px; border-radius: 9999px;
  background: var(--ink); color: #fff; box-shadow: var(--depth-3);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: transform var(--d-morph) var(--ease-out), opacity var(--d-base) var(--ease-standard);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ───────────── Motion: entrances ───────────── */
/* Hero intro, keyed off body.is-ready (set once the poster and fonts are in). */
.js .hero__bar > * { opacity: 0; transform: translateY(-10px); transition: opacity 900ms var(--ease-standard), transform 1100ms var(--ease-out); }
/* without the preloader (reduced motion keeps it short): the logo rises in */
.js .hero .hero__logo { clip-path: inset(0 0 100% 0); transform: translateY(30%); transition: clip-path 1100ms var(--ease-out), transform 1300ms var(--ease-out); }
.js .hero__sub, .js .composer, .js .hero__chips > * { opacity: 0; transform: translateY(20px); transition: opacity 900ms var(--ease-standard), transform 1200ms var(--ease-out); }
.js .hero__tab { transform: translateY(100%); transition: transform 900ms var(--ease-out), height var(--d-slow) var(--ease-out), background-color var(--d-base) var(--ease-standard); }

.is-ready .hero__poster { transform: none; }
.is-ready .hero__bar > * { opacity: 1; transform: none; transition-delay: 500ms; }
.is-ready .hero .hero__logo { clip-path: inset(-1px); transform: none; transition-delay: 150ms; }
.is-ready .hero__sub { opacity: 1; transform: none; transition-delay: 700ms; }
.is-ready .composer { opacity: 1; transform: none; transition-delay: 820ms; }
.is-ready .hero__chips > * { opacity: 1; transform: none; transition-delay: calc(980ms + var(--i) * 60ms); }
.is-ready .hero__tab { transform: none; transition-delay: 1200ms; }
.js .hero__play { opacity: 0; }
.is-ready .hero__play { opacity: .72; transition-delay: 1200ms; }
.is-settled .hero__play { transition-delay: 0ms; }
.is-ready .hero__play:is(:hover, :focus-visible) { opacity: 1; background: rgba(255, 255, 255, .28); }
.is-settled .composer, .is-settled .hero__chips > *, .is-settled .hero__bar > * { transition-delay: 0ms; }
.is-settled .hero__sub { transition: none; }
.is-settled .composer { transition: box-shadow var(--d-slow) var(--ease-standard), background-color var(--d-slow) var(--ease-standard), border-color var(--d-slow) var(--ease-standard); }
.is-settled .hero__chips > * { transition: background-color var(--d-fast) var(--ease-standard), border-color var(--d-fast) var(--ease-standard), color var(--d-fast) var(--ease-standard), box-shadow var(--d-fast) var(--ease-standard); }

/* Scroll reveals: fade-rise, line masks, and image "develop" (a cover lifts, the render settles). */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1000ms var(--ease-standard), transform 1300ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* Eyebrows (Ori, 28.10: keep the bar, "a nice reveal on this element when scrolling"): the bar draws out from the
   start, then the label is wiped out from under it, right to left as it reads. */
.js .eyebrow[data-reveal] {
  opacity: 1; transform: none; clip-path: inset(-4px -4px -4px calc(100% - var(--eb)));
  transition: clip-path 1100ms var(--ease-out); transition-delay: calc(var(--delay, 0ms) + 420ms);
}
.js .eyebrow[data-reveal]::before { transform: scaleX(0); transition: transform 800ms var(--ease-out) var(--delay, 0ms); }
.js .eyebrow[data-reveal].in { clip-path: inset(-4px); }
.js .eyebrow[data-reveal].in::before { transform: none; }
.js [data-reveal='fade'] { transform: none; }
.js .mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.js .mask > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1300ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.js .in .mask > span, .js .mask.in > span { transform: none; }
.js [data-develop]::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--cover, var(--muted));
  transform-origin: 50% 0%; transition: transform var(--d-reveal) var(--ease-out); transition-delay: var(--delay, 0ms);
}
.js [data-develop] .develop { transform: scale(1.14); transition: transform 1800ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.js [data-develop].in::after { transform: scaleY(0); }
.js [data-develop].in .develop { transform: none; }
.js .stat::before { transform: scaleX(0); transition: transform 1200ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.js .stat.in::before { transform: none; }

/* FLIP filter states */
.pcard.is-leaving, .grid__head.is-leaving { opacity: 0; transform: scale(.97); transition: opacity 220ms var(--ease-exit), transform 220ms var(--ease-exit); }
.pcard.is-entering { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal], .js .mask > span, .js [data-develop]::after, .js [data-develop] .develop,
  .js .stat::before, .js .sig__bar, .js .sig__logo,
  .js .hero__sub, .js .composer, .js .hero__chips > *, .js .hero__tab, .js .hero .hero__logo,
  .js .hero__bar > *, .js .hero__poster, .js .eyebrow[data-reveal]::before {
    transform: none !important; filter: none !important; transition: opacity 150ms linear !important;
  }
  .js .eyebrow[data-reveal] { clip-path: none !important; }
  .js [data-develop]::after { display: none; }
  .pcard__zoom, .lcard__zoom, .acard__zoom { transition: none !important; transform: none !important; }
  .cursor { display: none; }
  .lead-modal__panel, .lm-in, .lead-modal__logo, .tip, .brand-logo, .brand-mark { transform: none !important; }
  .pcard__media, .lcard { cursor: pointer; }
}