/* Pankingdom Real Estate, v2.
   Design read: Saudi holding developer site for families and investors, mostly on phones.
   Bright, confident, architectural. Palm green (depth) + logo gold (single accent) on white.
   Dials: variance 6, motion 6, density 3. Light theme is locked on purpose: the brand reads warm and open.
   Type: El Messiri (festive yet formal) for headings and figures, IBM Plex Sans Arabic for text.
   Shape system: 6px corners on everything (media, buttons, inputs, tiles). No pills, no glass.
   Z scale: content 1, bar 40, floats 41, nav 50, menu 60, lightbox 70, intro 80. */

@font-face { font-family: "El Messiri"; font-weight: 500; font-display: swap; src: url("fonts/el-messiri-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "El Messiri"; font-weight: 500; font-display: swap; src: url("fonts/el-messiri-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "El Messiri"; font-weight: 600; font-display: swap; src: url("fonts/el-messiri-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "El Messiri"; font-weight: 600; font-display: swap; src: url("fonts/el-messiri-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "El Messiri"; font-weight: 700; font-display: swap; src: url("fonts/el-messiri-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "El Messiri"; font-weight: 700; font-display: swap; src: url("fonts/el-messiri-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }

:root {
  --green-950: #0c261f;
  --green-900: #11332a;
  --green-800: #174236;
  --green-700: #1f5444;
  --green-100: #e6eee9;
  --gold: #bb8d52;          /* logo gold */
  --gold-ink: #8a6330;      /* gold that passes contrast for small text on white */
  --gold-100: #f4ece0;

  --bg: #ffffff;
  --tint: #f4f6f3;          /* soft sage white for alternating sections */
  --text: #17211d;
  --muted: #56625c;
  --line: rgba(23, 33, 29, 0.11);
  --line-strong: rgba(23, 33, 29, 0.24);

  --font-head: "El Messiri", "IBM Plex Sans Arabic", serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --r: 6px;
  --maxw: 1280px;
  --gutter: 20px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --shadow: 0 24px 50px -30px rgba(17, 51, 42, 0.35);
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.85; overflow-x: clip; }
:lang(en) body, body:lang(en) { line-height: 1.7; }
img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a, summary { touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold-100); color: var(--green-900); }
.skip { position: fixed; inset-block-start: -80px; inset-inline-start: 16px; z-index: 100; background: var(--green-800); color: #fff; padding: 10px 18px; border-radius: var(--r); font-weight: 600; }
.skip:focus { inset-block-start: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; }

.wrap { width: min(var(--maxw), 100% - var(--gutter) * 2); margin-inline: auto; }
.narrow { max-width: 820px; }
.section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.section--tint { background: var(--tint); }
.section--green { background: var(--green-900); color: #fff; --muted: rgba(255, 255, 255, 0.74); --line: rgba(255, 255, 255, 0.14); --line-strong: rgba(255, 255, 255, 0.3); --text: #fff; }
.pt0 { padding-block-start: 0; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.35; text-wrap: balance; }
.h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-weight: 700; line-height: 1.25; }
:lang(en) .h1 { line-height: 1.1; }
.h2 { font-size: clamp(1.7rem, 3.3vw, 2.7rem); line-height: 1.3; }
:lang(en) .h2 { line-height: 1.15; }
.h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
.lead { color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 60ch; text-wrap: pretty; }
.kicker { display: inline-block; font-size: 0.95rem; font-weight: 600; color: var(--gold-ink); }
.section--green .kicker { color: var(--gold); }
.head { display: grid; gap: 14px; margin-block-end: clamp(2.2rem, 4.5vw, 3.5rem); max-width: 760px; }
.head--wide { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; }
.head--wide > div:first-child { display: grid; gap: 14px; max-width: 760px; }
.prose { color: var(--muted); max-width: 68ch; }
.prose p + p { margin-block-start: 1em; }

/* Buttons: one shape, solid fills */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--r); border: 1.5px solid transparent; font-weight: 600; font-size: 1rem; line-height: 1; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform 160ms var(--ease), background-color 260ms, color 260ms, border-color 260ms; background: var(--green-800); color: #fff; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green-700); transform: translateX(var(--from, 101%)); transition: transform 460ms var(--ease); }
:dir(ltr) .btn::after { --from: -101%; }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn i { font-size: 1.15em; transition: transform 300ms var(--ease); }
.btn--gold { background: var(--gold); color: var(--green-950); }
.btn--gold::after { background: #cba06a; }
.btn--light { background: #fff; color: var(--green-900); }
.btn--light::after { background: var(--gold-100); }
.btn--line { background: transparent; color: currentColor; border-color: currentColor; }
.btn--line::after { background: rgba(187, 141, 82, 0.14); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { transform: none; }
  [dir="rtl"] .btn:hover i.ph-arrow-left { transform: translateX(-4px); }
  [dir="ltr"] .btn:hover i.ph-arrow-right { transform: translateX(4px); }
}
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gold-ink); background: linear-gradient(currentColor, currentColor) no-repeat var(--lx, right) bottom / 0 1.5px; padding-block-end: 2px; transition: background-size 400ms var(--ease); }
:dir(ltr) .link { --lx: left; }
.section--green .link { color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .link:hover { background-size: 100% 1.5px; } }

/* Navigation */
.nav { position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 50; transition: transform 500ms var(--ease), background-color 300ms, box-shadow 300ms; }
.nav.is-hidden { transform: translateY(-110%); }
.nav__bar { width: min(var(--maxw), 100% - var(--gutter) * 2); margin-inline: auto; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #fff; transition: color 300ms; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 38, 31, 0.55), rgba(12, 38, 31, 0)); transition: opacity 300ms; }
.nav.is-solid, .nav--solid { background: #fff; box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px rgba(17, 51, 42, 0.4); }
.nav.is-solid::before, .nav--solid::before { opacity: 0; }
.nav.is-solid .nav__bar, .nav--solid .nav__bar { color: var(--text); }
.nav__logo { display: block; position: relative; width: 150px; height: 46px; flex: none; }
.nav__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 300ms; }
.nav__logo .logo-dark { opacity: 0; }
.nav.is-solid .logo-light, .nav--solid .logo-light { opacity: 0; }
.nav.is-solid .logo-dark, .nav--solid .logo-dark { opacity: 1; }
.nav__links { display: none; align-items: center; gap: 2px; font-size: 0.97rem; }
.nav__item { position: relative; }
.nav__item > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; white-space: nowrap; position: relative; }
.nav__item > a::after { content: ""; position: absolute; inset-inline: 12px; inset-block-end: 4px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform 300ms var(--ease); }
.nav__item > a[aria-current="page"]::after, .nav__item.is-current > a::after { transform: scaleX(1); }
.nav__item > a i { font-size: 0.75em; opacity: 0.7; transition: transform 300ms var(--ease); }
.nav__drop { position: absolute; inset-block-start: 100%; inset-inline-start: 0; min-width: 230px; padding: 8px; border-radius: var(--r); background: #fff; color: var(--text); box-shadow: 0 24px 50px -20px rgba(17, 51, 42, 0.35), 0 0 0 1px var(--line); display: grid; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 200ms var(--ease), transform 260ms var(--ease), visibility 0s linear 260ms; }
.nav__drop a { padding: 10px 14px; border-radius: 4px; transition: background-color 160ms, color 160ms; }
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .nav__item > a:hover::after { transform: scaleX(1); }
  .nav__item:hover > a i { transform: rotate(180deg); }
  .nav__drop a:hover { background: var(--tint); color: var(--green-800); }
}
.nav__end { display: flex; align-items: center; gap: 8px; }
.nav__lang { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 10px; font-weight: 600; font-size: 0.92rem; border-radius: var(--r); border: 1px solid currentColor; opacity: 0.85; }
.nav__cta { display: none; }
.nav__burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; border-radius: var(--r); border: 1px solid currentColor; background: transparent; color: inherit; }
.nav__burger span { display: block; width: 18px; height: 1.5px; background: currentColor; }
@media (min-width: 1180px) { .nav__links { display: flex; } .nav__cta { display: inline-flex; } .nav__burger { display: none; } }
.progress { position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px; background: var(--gold); transform-origin: var(--origin, right); transform: scaleX(var(--p, 0)); }
:dir(ltr) .progress { --origin: left; }

/* Mobile menu */
.menu { position: fixed; inset: 0; z-index: 60; background: #fff; color: var(--text); padding: calc(env(safe-area-inset-top) + 14px) var(--gutter) calc(env(safe-area-inset-bottom) + 20px); display: flex; flex-direction: column; gap: 14px; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 560ms var(--ease-io), visibility 0s linear 560ms; }
.menu.is-open { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu__top img { width: 140px; height: auto; }
.menu__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--line-strong); background: transparent; font-size: 1.25rem; }
.menu__list { display: grid; }
.menu__group { border-block-end: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity 360ms var(--ease), transform 520ms var(--ease); }
.menu.is-open .menu__group { opacity: 1; transform: none; transition-delay: calc(var(--k, 0) * 45ms + 200ms); }
.menu__group > a, .menu__group > details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 58px; font-size: 1.25rem; font-weight: 600; list-style: none; cursor: pointer; }
.menu__group > details > summary::-webkit-details-marker { display: none; }
.menu__group summary i { transition: transform 300ms var(--ease); color: var(--gold-ink); }
.menu__group details[open] summary i { transform: rotate(180deg); }
.menu__sub { display: grid; padding-block-end: 12px; }
.menu__sub a { padding: 9px 14px; color: var(--muted); border-inline-start: 2px solid var(--line); }
.menu__sub a[aria-current="page"] { color: var(--green-800); border-color: var(--gold); }
.menu__foot { margin-block-start: auto; display: grid; gap: 12px; padding-block-start: 10px; }
.menu__foot .btn { width: 100%; }
.menu__meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
body.menu-lock { overflow: hidden; }

/* Intro: the logo settles in once per visit */
.intro { position: fixed; inset: 0; z-index: 80; background: var(--green-900); display: grid; place-items: center; pointer-events: none; }
.intro img { width: min(230px, 56vw); height: auto; }
html:not(.intro-on) .intro { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .intro-on .intro { animation: introOut 800ms var(--ease-io) 1050ms forwards; }
  .intro-on .intro img { animation: introLogo 1000ms var(--ease) both; }
  @keyframes introLogo { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes introOut { to { transform: translateY(-100%); } }
}

/* Home hero */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; padding: calc(var(--nav-h) + 30px) 0 clamp(7rem, 12vw, 9rem); color: #fff; overflow: clip; background: var(--green-900); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media picture { display: block; height: 100%; }
.hero__media img { width: 100%; height: 114%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0) scale(var(--hs, 1)); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 38, 31, 0) 35%, rgba(12, 38, 31, 0.78) 100%); }
.hero__inner { display: grid; gap: 22px; justify-items: start; }
.hero__inner > * { max-width: 760px; }
.hero__inner p { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: rgba(255, 255, 255, 0.92); max-width: 46ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Unit finder overlapping the hero */
.finder { position: relative; z-index: 3; margin-block-start: clamp(-5.5rem, -7vw, -4rem); }
.finder__card { background: #fff; border-radius: var(--r); box-shadow: var(--shadow), 0 0 0 1px var(--line); padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 16px; }
.finder__card h2 { font-size: 1.15rem; }
.finder__form { display: grid; gap: 14px; }
@media (min-width: 760px) { .finder__form { grid-template-columns: repeat(3, 1fr) auto; align-items: end; } }
.finder__results { display: grid; gap: 10px; }
.finder__results:empty { display: none; }
.fres { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 10px; border-radius: var(--r); border: 1px solid var(--line); transition: border-color 200ms, background-color 200ms; }
.fres img { width: 96px; height: 68px; object-fit: cover; border-radius: 4px; }
.fres b { display: block; font-size: 1.05rem; }
.fres small { color: var(--muted); font-size: 0.9rem; line-height: 1.5; display: block; }
.fres i { color: var(--gold-ink); font-size: 1.2rem; }
@media (hover: hover) and (pointer: fine) { .fres:hover { border-color: var(--gold); background: var(--gold-100); } }
@media (prefers-reduced-motion: no-preference) { .fres { animation: fresIn 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); } @keyframes fresIn { from { opacity: 0; transform: translateY(10px); } } }
.finder__empty { color: var(--muted); }

/* Inner page hero */
.phero { position: relative; isolation: isolate; min-height: clamp(460px, 70svh, 760px); display: grid; align-items: end; padding: calc(var(--nav-h) + 50px) 0 clamp(2.5rem, 5vw, 4rem); color: #fff; overflow: clip; background: var(--green-900); }
.phero--short { min-height: clamp(380px, 52svh, 560px); }
.phero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.phero__media picture { display: block; height: 100%; }
.phero__media img { width: 100%; height: 116%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0) scale(var(--hs, 1)); }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 38, 31, 0.35) 0%, rgba(12, 38, 31, 0) 30%, rgba(12, 38, 31, 0.82) 100%); }
.phero__inner { display: grid; gap: 14px; justify-items: start; }
.phero__inner > * { max-width: 820px; }
.phero .lead { color: rgba(255, 255, 255, 0.9); }
.phero__logo { height: 70px; width: auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); }
.crumbs--dark { color: var(--muted); }
.crumbs a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 4px; }
.crumbs--dark a { text-decoration-color: var(--line-strong); }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; opacity: 0.6; }
.page-top { padding-block-start: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem)); }

/* Reveal primitives */
.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 900ms var(--ease), transform 1100ms var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 800ms var(--ease), transform 1000ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .stagger.in > * { opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: clip; vertical-align: top; padding-block: 0.14em 0.22em; margin-block: -0.14em -0.22em; }
.split .w > span { display: inline-block; }
.js .split .w > span { transform: translate3d(0, 110%, 0); transition: transform 1000ms var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.js .split.in .w > span { transform: none; }
.curtain { position: relative; overflow: hidden; border-radius: var(--r); background: var(--tint); }
.curtain img { width: 100%; height: 100%; object-fit: cover; }
.js .curtain img { clip-path: inset(0 0 100% 0); scale: 1.12; transition: clip-path 1200ms var(--ease-io), scale 1600ms var(--ease); }
.js .curtain.in img { clip-path: inset(0); scale: 1; }
.plx { position: absolute; inset: -9% 0; }
.plx img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .stagger > * { transform: none; transition: opacity 500ms ease; }
  .js .split .w > span { transform: none; opacity: 0; transition: opacity 500ms ease; }
  .js .split.in .w > span { opacity: 1; }
  .js .curtain img { clip-path: none; scale: 1; opacity: 0; transition: opacity 600ms ease; }
  .js .curtain.in img { opacity: 1; }
  .hero__media img, .phero__media img, .plx img { transform: none !important; }
}

/* About strip on home: statement + numbers side by side */
.intro2 { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 1000px) { .intro2 { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.scrub { font-size: clamp(1.45rem, 2.7vw, 2.25rem); line-height: 1.6; font-weight: 600; text-wrap: pretty; }
:lang(en) .scrub { line-height: 1.35; }
.scrub .sw { opacity: var(--o, 0.18); transition: opacity 180ms linear; }
.no-scrub .scrub .sw { opacity: 1; }
.pillars { display: grid; gap: 22px; margin-block-start: 34px; }
@media (min-width: 640px) { .pillars { grid-template-columns: 1fr 1fr; gap: 32px; } }
.pillars li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.pillars i { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); background: var(--gold-100); color: var(--gold-ink); font-size: 1.3rem; }
.pillars h3 { font-size: 1.1rem; }
.pillars p { color: var(--muted); font-size: 0.98rem; }

/* Numbers: no boxes, a vertical ledger with gold rules */
.figures { display: grid; gap: 0; }
.figures li { display: grid; gap: 2px; padding-block: 18px; border-block-end: 1px solid var(--line); }
.figures li:first-child { padding-block-start: 0; }
.figures strong { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--green-800); line-height: 1.15; font-variant-numeric: tabular-nums; }
.section--green .figures strong { color: var(--gold); }
.figures span { color: var(--muted); }
.figures--row { grid-template-columns: repeat(2, 1fr); gap: 0 28px; }
@media (min-width: 900px) { .figures--row { grid-template-columns: repeat(var(--cols, 4), 1fr); } .figures--row li { padding-block: 0; border: 0; border-inline-start: 2px solid var(--gold); padding-inline-start: 18px; } }
@media (max-width: 899px) { .figures--row li:nth-child(-n+2) { padding-block-start: 0; } }

/* Latest projects: asymmetric pair */
.latest { display: grid; gap: 14px; }
@media (min-width: 980px) { .latest { grid-template-columns: 1.5fr 1fr; } }
.tile { position: relative; overflow: hidden; border-radius: var(--r); isolation: isolate; color: #fff; min-height: clamp(420px, 60vh, 600px); display: grid; align-content: end; gap: 10px; padding: clamp(22px, 3vw, 40px); }
.tile .plx { z-index: -2; }
.tile--img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 38, 31, 0) 30%, rgba(12, 38, 31, 0.85) 100%); }
.tile--green { background: var(--green-900); align-content: space-between; }
.tile--green::before { content: ""; position: absolute; inset: auto -20% -40% auto; width: 80%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(187, 141, 82, 0.35); box-shadow: 0 0 0 40px rgba(187, 141, 82, 0.05), 0 0 0 80px rgba(187, 141, 82, 0.04); z-index: -1; }
.tile h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.35; }
.tile p { color: rgba(255, 255, 255, 0.85); max-width: 52ch; }
.tile__logo { width: 110px; height: auto; margin-block-end: 6px; }
.tile .figures strong { color: var(--gold); }
.tile .figures span { color: rgba(255, 255, 255, 0.75); }
.tile .figures li { border-color: rgba(255, 255, 255, 0.14); }
.badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 0.88rem; font-weight: 600; padding: 6px 12px; border-radius: 4px; background: var(--gold); color: var(--green-950); }

/* Communities: centered sticky stack */
.stack { display: grid; gap: 24px; }
.scard { position: relative; overflow: hidden; border-radius: var(--r); color: #fff; isolation: isolate; height: clamp(460px, 78vh, 760px); display: grid; align-items: end; transform-origin: center top; }
.scard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale 1400ms var(--ease); }
.scard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 38, 31, 0) 40%, rgba(12, 38, 31, 0.86) 100%); }
.scard__body { display: grid; gap: 12px; padding: clamp(22px, 4vw, 48px); max-width: 720px; }
.scard__city { font-weight: 600; color: var(--gold); }
.scard__name { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; line-height: 1.1; }
.scard__facts { display: flex; flex-wrap: wrap; gap: 8px 28px; color: rgba(255, 255, 255, 0.88); }
.scard__facts b { color: #fff; font-size: 1.25rem; margin-inline-end: 6px; }
@media (hover: hover) and (pointer: fine) { .scard:hover img { scale: 1.04; } }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .stack--sticky .scard { position: sticky; top: calc(var(--nav-h) + 16px + var(--k, 0) * 18px); scale: var(--sc, 1); filter: brightness(var(--br, 1)); }
}

/* Sector index: big rows with an image that opens on hover/focus */
.sindex { border-block-start: 1px solid var(--line); }
.srow { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding-block: clamp(18px, 2.5vw, 28px); border-block-end: 1px solid var(--line); position: relative; }
.srow__name { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.3; transition: color 300ms, transform 500ms var(--ease); }
.srow__text { color: var(--muted); grid-column: 1; max-width: 60ch; }
.srow__go { grid-row: 1 / span 2; grid-column: 2; width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center; border: 1px solid var(--line-strong); font-size: 1.2rem; transition: background-color 300ms, color 300ms, border-color 300ms; }
.srow__img { display: none; }
@media (min-width: 900px) {
  .srow { grid-template-columns: 1fr 280px auto; }
  .srow__img { display: block; grid-row: 1 / span 2; grid-column: 2; width: 280px; height: 0; border-radius: var(--r); overflow: hidden; transition: height 600ms var(--ease); }
  .srow__img img { width: 100%; height: 170px; object-fit: cover; }
  .srow__go { grid-column: 3; }
  .srow:hover .srow__img, .srow:focus-visible .srow__img { height: 170px; }
}
@media (hover: hover) and (pointer: fine) {
  .srow:hover .srow__name { color: var(--green-700); transform: translateX(var(--nudge, -8px)); }
  :dir(ltr) .srow:hover .srow__name { --nudge: 8px; }
  .srow:hover .srow__go { background: var(--green-800); color: #fff; border-color: var(--green-800); }
}

/* Subsidiaries */
.subs { display: grid; gap: 0; border-block: 1px solid var(--line); }
@media (min-width: 760px) { .subs { grid-template-columns: repeat(3, 1fr); } .subs > * + * { border-inline-start: 1px solid var(--line); } }
@media (max-width: 759px) { .subs > * + * { border-block-start: 1px solid var(--line); } }
.sub { padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.sub__logo { height: 80px; display: flex; align-items: center; }
.sub__logo img { max-height: 70px; width: auto; max-width: 220px; object-fit: contain; }
.sub h3 { font-size: 1.1rem; }
.sub p { color: var(--muted); font-size: 0.95rem; }

/* Partners marquee (only one per page) */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 12px; width: max-content; }
.marquee__track + .marquee__track { margin-block-start: 12px; }
.logo-tile { flex: 0 0 auto; width: 190px; height: 104px; display: grid; place-items: center; padding: 16px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.logo-tile img { max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee var(--dur, 50s) linear infinite; }
  .marquee__track--rev { animation-direction: reverse; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }
  [dir="rtl"] .marquee__track { animation-name: marqueeRtl; }
  @keyframes marqueeRtl { to { transform: translateX(calc(50% + 6px)); } }
}
@media (prefers-reduced-motion: reduce) { .marquee__track { flex-wrap: wrap; width: auto; justify-content: center; } .marquee__track [aria-hidden="true"], .marquee__track--rev { display: none; } }
.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .logo-grid { grid-template-columns: repeat(5, 1fr); } }
.logo-grid .logo-tile { width: auto; height: 130px; }

/* News */
.news { display: grid; gap: clamp(22px, 3vw, 40px); }
@media (min-width: 960px) { .news { grid-template-columns: 1.1fr 1fr; } }
.ncard { display: grid; gap: 12px; align-content: start; }
.ncard .curtain { aspect-ratio: 1; }
.ncard__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.9rem; color: var(--muted); }
.ncard__meta span:first-child { color: var(--gold-ink); font-weight: 600; }
.ncard h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); transition: color 200ms; }
.nlist { display: grid; align-content: start; }
.nrow { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; padding-block: 16px; border-block-end: 1px solid var(--line); }
.nrow:first-child { padding-block-start: 0; }
.nrow .curtain { aspect-ratio: 1; }
.nrow h3 { font-size: 1.05rem; line-height: 1.6; }
.nthumb { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r); background: var(--green-900); color: var(--gold); font-weight: 700; font-size: 1.1rem; text-align: center; line-height: 1.2; padding: 8px; }
.nthumb b { font-size: 1.6rem; line-height: 1; }
.nthumb--big { aspect-ratio: 1; align-content: center; gap: 10px; background: var(--green-900) radial-gradient(circle at 85% 110%, rgba(187, 141, 82, 0.35), transparent 55%); }
.nthumb--big b { font-size: clamp(4rem, 10vw, 7rem); font-weight: 700; color: var(--gold); }
.nthumb--big span { color: rgba(255, 255, 255, 0.85); font-weight: 600; font-size: 1.05rem; max-width: 22ch; }
@media (hover: hover) and (pointer: fine) { .ncard:hover h3, .nrow:hover h3 { color: var(--green-700); } }
.ngrid { display: grid; gap: 30px; }
@media (min-width: 700px) { .ngrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ngrid { grid-template-columns: repeat(3, 1fr); } }

/* Forms */
.interest { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 980px) { .interest { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.interest__info { display: grid; gap: 20px; align-content: start; }
.channels { display: grid; gap: 0; border-block-start: 1px solid var(--line); }
.channel { display: flex; align-items: center; gap: 14px; padding-block: 16px; border-block-end: 1px solid var(--line); transition: color 200ms; }
.channel i { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; background: var(--gold-100); color: var(--gold-ink); font-size: 1.25rem; flex: none; transition: background-color 300ms, color 300ms; }
.channel small { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.channel b { font-weight: 600; }
@media (hover: hover) and (pointer: fine) { a.channel:hover i { background: var(--green-800); color: #fff; } }
.form { display: grid; gap: 18px; background: #fff; border-radius: var(--r); padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.form__row { display: grid; gap: 18px; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label, .legend { font-size: 0.93rem; font-weight: 600; }
fieldset { border: 0; padding: 0; margin: 0; }
.legend { margin-block-end: 8px; padding: 0; }
.input { width: 100%; min-height: 52px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r); transition: border-color 200ms, box-shadow 200ms; }
.input:focus-visible { outline: none; border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(31, 84, 68, 0.18); }
select.input { appearance: none; -webkit-appearance: none; padding-inline-end: 42px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-size: 6px 6px; background-repeat: no-repeat; background-position: left 18px center, left 24px center; }
[dir="ltr"] select.input { background-position: right 24px center, right 18px center; }
input[type="file"].input { padding: 12px; }
.input[aria-invalid="true"] { border-color: #b3261e; }
.err { color: #b3261e; font-size: 0.88rem; line-height: 1.5; }
.err:empty { display: none; }
.choices { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 0.98rem; line-height: 1.5; }
.choice input { width: 20px; height: 20px; accent-color: var(--green-700); flex: none; }
.form .btn { justify-self: start; }
.form__note { font-size: 0.85rem; color: var(--muted); }
.form__ok { display: none; text-align: center; padding-block: 28px; gap: 10px; justify-items: center; }
.form__ok i { font-size: 3rem; color: var(--green-700); }
.form.is-sent > :not(.form__ok) { display: none; }
.form.is-sent .form__ok { display: grid; }
@media (prefers-reduced-motion: no-preference) { .form.is-sent .form__ok { animation: okIn 600ms var(--ease) both; } @keyframes okIn { from { opacity: 0; transform: translateY(12px); } } }

/* Facilities: clear labelled tiles that pop in one after another */
.svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.svc li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), 0 12px 30px -26px rgba(17, 51, 42, 0.5); font-weight: 600; font-size: 1.02rem; line-height: 1.5; transition: box-shadow 300ms, transform 400ms var(--ease); }
.section .svc li { background: var(--card, #fff); }
.svc__ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-ink); font-size: 1.55rem; box-shadow: inset 0 0 0 1px rgba(187, 141, 82, 0.35); transition: background-color 300ms, color 300ms; }
.js .svc li { opacity: 0; transform: translateY(16px) scale(0.97); transition: opacity 600ms var(--ease), transform 800ms var(--ease), box-shadow 300ms; transition-delay: calc(var(--i, 0) * 60ms); }
.js .svc.in li { opacity: 1; transform: none; }
.js .svc li .svc__ico { transform: scale(0.5); transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 300ms, color 300ms; transition-delay: calc(var(--i, 0) * 60ms + 150ms), 0s, 0s; }
.js .svc.in li .svc__ico { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .svc li:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--gold), 0 18px 34px -24px rgba(17, 51, 42, 0.5); }
  .svc li:hover .svc__ico { background: var(--green-800); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .js .svc li, .js .svc li .svc__ico { transform: none; transition: opacity 400ms; } }

/* Facts list */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-block-start: 1px solid var(--line); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(var(--cols, 4), 1fr); } }
.facts div { padding: 16px 0; border-block-end: 1px solid var(--line); display: grid; gap: 2px; padding-inline-end: 12px; }
.facts dt { color: var(--muted); font-size: 0.9rem; }
.facts dd { font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--green-800); }
.section--green .facts dd { color: #fff; }

/* Unit models */
.models { display: grid; gap: 12px; }
@media (min-width: 700px) { .models { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .models { grid-template-columns: repeat(3, 1fr); } }
.model { padding: 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); display: grid; gap: 16px; transition: border-color 300ms, box-shadow 400ms var(--ease), transform 400ms var(--ease); }
.model__name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-block-end: 1px solid var(--line); padding-block-end: 12px; }
.model__name b { font-size: 1.9rem; font-weight: 700; color: var(--green-800); line-height: 1; direction: ltr; }
.model__name span { color: var(--muted); font-size: 0.9rem; }
.model dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.model dt { font-size: 0.82rem; color: var(--muted); }
.model dd { font-weight: 600; font-size: 0.98rem; }
@media (hover: hover) and (pointer: fine) { .model:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-4px); } }

/* Gallery + lightbox */
.gtabs { display: flex; flex-wrap: wrap; gap: 8px; }
.gtab { min-height: 44px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line-strong); background: transparent; font-weight: 600; transition: background-color 200ms, color 200ms, border-color 200ms; }
.gtab[aria-selected="true"] { background: var(--green-800); color: #fff; border-color: var(--green-800); }
.gpanel[hidden] { display: none; }
.gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.gallery::-webkit-scrollbar { display: none; }
.gallery.is-drag { cursor: grabbing; scroll-snap-type: none; }
.gallery.is-drag a { pointer-events: none; }
.gallery a { flex: 0 0 min(86vw, 680px); aspect-ratio: 16 / 10; scroll-snap-align: start; border-radius: var(--r); overflow: hidden; position: relative; background: var(--tint); }
.gallery--plans a { background: #fff; border: 1px solid var(--line); }
.gallery--plans img { object-fit: contain; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease); user-select: none; -webkit-user-drag: none; }
.gallery a > i { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center; background: #fff; color: var(--green-900); font-size: 1.1rem; box-shadow: var(--shadow); }
@media (hover: hover) and (pointer: fine) { .gallery a:hover img { scale: 1.04; } }
.gnav { display: flex; gap: 8px; }
.gnav button { width: 48px; height: 48px; border-radius: var(--r); border: 1px solid var(--line-strong); background: transparent; display: grid; place-items: center; font-size: 1.15rem; transition: background-color 200ms, color 200ms, border-color 200ms; }
@media (hover: hover) and (pointer: fine) { .gnav button:hover { background: var(--green-800); color: #fff; border-color: var(--green-800); } }
.lightbox { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(9, 22, 18, 0.96); color: #fff; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox::backdrop { background: transparent; }
.lightbox__stage { display: grid; place-items: center; min-height: 0; padding-inline: clamp(8px, 2vw, 24px); }
.lightbox img { width: 100%; height: 100%; max-height: calc(100dvh - 150px); object-fit: contain; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: max(14px, env(safe-area-inset-top)) var(--gutter) 10px; font-variant-numeric: tabular-nums; }
.lightbox button { width: 50px; height: 50px; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); color: #fff; display: grid; place-items: center; font-size: 1.3rem; }
.lightbox__nav { display: flex; justify-content: center; gap: 12px; padding: 12px 0 max(16px, env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: no-preference) { .lightbox[open] img { animation: lbIn 420ms var(--ease) both; } @keyframes lbIn { from { opacity: 0; transform: scale(0.97); } } }

.mapcard { display: grid; gap: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; }
@media (min-width: 900px) { .mapcard { grid-template-columns: 1.6fr 1fr; } }
.mapcard a.mapcard__img { display: block; aspect-ratio: 2.6 / 1; overflow: hidden; }
@media (min-width: 900px) { .mapcard a.mapcard__img { aspect-ratio: auto; min-height: 300px; } }
.mapcard img { width: 100%; height: 100%; object-fit: cover; }
.mapcard__body { padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px; align-content: center; justify-items: start; }

/* Detail page intro */
.dintro { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 1000px) { .dintro { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.dintro p.big { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.85; color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Plans grid */
.plans { display: grid; gap: 30px 14px; }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { display: grid; gap: 12px; align-content: start; }
.plan .curtain { aspect-ratio: 16 / 10; }
.plan h3 { font-size: 1.25rem; transition: color 200ms; }
.plan__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); font-size: 0.95rem; }
.plan__meta b { color: var(--green-800); }
@media (hover: hover) and (pointer: fine) { .plan:hover h3 { color: var(--green-700); } }

/* Residential project cards */
.rproj { display: grid; gap: 14px; }
@media (min-width: 900px) { .rproj { grid-template-columns: 1fr 1fr; } }
.rcard { position: relative; overflow: hidden; border-radius: var(--r); min-height: clamp(420px, 66vh, 620px); color: #fff; display: grid; align-content: end; padding: clamp(22px, 3vw, 40px); isolation: isolate; gap: 8px; }
.rcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale 1400ms var(--ease); }
.rcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 38, 31, 0) 40%, rgba(12, 38, 31, 0.86)); }
.rcard small { color: var(--gold); font-weight: 600; font-size: 0.95rem; }
.rcard h3 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.15; }
.rcard p { color: rgba(255, 255, 255, 0.88); }
@media (hover: hover) and (pointer: fine) { .rcard:hover img { scale: 1.05; } }

/* Contact */
.welcome { font-size: clamp(2.6rem, 8vw, 6rem); font-weight: 700; line-height: 1.15; color: var(--green-800); }
.cgrid { display: grid; gap: 0; border-block-start: 1px solid var(--line); }
@media (min-width: 760px) { .cgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cgrid { grid-template-columns: repeat(4, 1fr); } .cgrid > * + * { border-inline-start: 1px solid var(--line); } }
.ccard { padding: 24px 0; border-block-end: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
@media (min-width: 1100px) { .ccard { padding-inline: 24px; } .ccard:first-child { padding-inline-start: 0; } }
.ccard > i { font-size: 1.6rem; color: var(--gold-ink); }
.ccard h2 { font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.ccard p { font-size: 1.2rem; font-weight: 600; }
.ccard .ltr { justify-self: start; }
.ccard dl { display: grid; gap: 8px; }
.ccard dt { font-weight: 600; }
.ccard dd { color: var(--muted); }
.hours-now { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; padding: 4px 10px; border-radius: 4px; background: var(--tint); width: fit-content; }
.hours-now.is-open { background: var(--green-100); color: var(--green-800); }
.offices { display: grid; gap: 14px; }
@media (min-width: 760px) { .offices { grid-template-columns: 1fr 1fr; } }
.office { border-radius: var(--r); padding: clamp(22px, 3vw, 32px); background: var(--green-900); color: #fff; display: grid; gap: 6px; transition: background-color 300ms; }
.office small { color: var(--gold); font-weight: 600; }
.office h3 { font-size: 1.7rem; }
.office p { color: rgba(255, 255, 255, 0.82); }
.office .link { color: var(--gold); margin-block-start: 10px; }
@media (hover: hover) and (pointer: fine) { .office:hover { background: var(--green-800); } }
.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; border: 1px solid var(--line-strong); font-size: 1.15rem; transition: background-color 200ms, color 200ms, border-color 200ms; }
@media (hover: hover) and (pointer: fine) { .social a:hover { background: var(--gold); color: var(--green-950); border-color: var(--gold); } }

/* Careers */
.jobs { display: grid; border-block-start: 1px solid var(--line); }
.job { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding-block: 22px; border-block-end: 1px solid var(--line); }
.job h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.job__meta { color: var(--muted); font-size: 0.92rem; }
@media (max-width: 620px) { .job { grid-template-columns: 1fr; gap: 12px; } .job .btn { justify-self: start; } }
.values { display: grid; gap: 0; border-block: 1px solid var(--line); }
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); } .values > * + * { border-inline-start: 1px solid var(--line); } }
@media (max-width: 759px) { .values > * + * { border-block-start: 1px solid var(--line); } }
.value { padding: clamp(22px, 3vw, 32px); display: grid; gap: 10px; }
.value i { font-size: 1.7rem; color: var(--gold-ink); }
.value h3 { font-size: 1.15rem; }
.value p { color: var(--muted); }

/* CSR */
.csr { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.csr-item { display: grid; gap: clamp(1.4rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .csr-item { grid-template-columns: 5fr 6fr; } .csr-item:nth-child(even) > :first-child { order: 2; } }
.csr-item .curtain { aspect-ratio: 1; max-width: 520px; width: 100%; }
.csr-item__metric { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 700; color: var(--green-800); line-height: 1.15; }
.csr-item h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.csr-item p { color: var(--muted); max-width: 54ch; }

/* Leadership: the portrait is always shown whole */
.leader { display: grid; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (min-width: 960px) { .leader { grid-template-columns: minmax(300px, 0.8fr) 1.2fr; } .leader__portrait { position: sticky; top: calc(var(--nav-h) + 28px); } }
.leader__portrait { background: linear-gradient(180deg, var(--tint), #e9eee9); border-radius: var(--r); overflow: hidden; display: grid; place-items: end center; padding-block-start: 24px; }
.leader__portrait img { width: auto; height: min(78vh, 760px); max-width: 100%; object-fit: contain; object-position: bottom; }
@media (max-width: 959px) { .leader__portrait img { height: auto; width: min(100%, 420px); } }
.leader blockquote p { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.95; color: var(--text); }
.leader blockquote p + p { margin-block-start: 1.1em; }
.leader blockquote p:first-child { font-size: clamp(1.3rem, 2.3vw, 1.9rem); font-weight: 600; line-height: 1.7; }
.signature { display: grid; gap: 2px; padding-block-start: 20px; border-block-start: 2px solid var(--gold); margin-block-start: 32px; width: fit-content; }
.signature b { font-size: 1.3rem; }
.signature span { color: var(--muted); }
.leadband { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .leadband { grid-template-columns: 300px 1fr; } }
.leadband__img { background: var(--tint); border-radius: var(--r); overflow: hidden; display: grid; place-items: end center; padding-block-start: 16px; }
.leadband__img img { height: 380px; width: auto; max-width: 100%; object-fit: contain; }

/* CTA band */
.cta { position: relative; isolation: isolate; overflow: clip; color: #fff; padding-block: clamp(5rem, 11vw, 9rem); }
.cta .plx { z-index: -2; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 38, 31, 0.86), rgba(12, 38, 31, 0.45)); }
[dir="rtl"] .cta::after { background: linear-gradient(270deg, rgba(12, 38, 31, 0.86), rgba(12, 38, 31, 0.45)); }
.cta__inner { display: grid; gap: 18px; justify-items: start; max-width: 640px; }
.cta .lead { color: rgba(255, 255, 255, 0.88); }

/* Notice for content the client must supply */
.notice { display: flex; gap: 12px; padding: 18px 20px; border-radius: var(--r); background: var(--gold-100); color: #5e4523; font-size: 0.98rem; }
.notice i { font-size: 1.3rem; flex: none; margin-block-start: 4px; }
.source { font-size: 0.9rem; color: var(--muted); }
.source a { text-decoration: underline; text-underline-offset: 4px; }

/* Footer */
.footer { background: var(--green-950); color: rgba(255, 255, 255, 0.78); padding-block: clamp(3.5rem, 7vw, 5.5rem) 28px; }
.footer__top { display: grid; gap: 36px; }
@media (min-width: 900px) { .footer__top { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 48px; } }
.footer__brand { display: grid; gap: 18px; align-content: start; justify-items: start; }
.footer__brand img { width: 180px; height: auto; }
.footer__brand p { max-width: 34ch; }
.footer h3 { font-size: 1rem; color: #fff; margin-block-end: 12px; }
.footer ul { display: grid; gap: 2px; }
.footer ul a { display: inline-block; padding-block: 5px; transition: color 200ms; }
@media (hover: hover) and (pointer: fine) { .footer ul a:hover { color: var(--gold); } }
.footer__contact { display: grid; gap: 6px; }
.footer__contact a { color: #fff; }
.footer__contact .ltr { justify-self: start; }
.footer .social a { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.footer__legal { margin-block-start: 44px; padding-block-start: 22px; border-block-start: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 0.9rem; }
.footer__legal nav { display: flex; gap: 20px; }
@media (max-width: 899px) { .footer { padding-block-end: calc(28px + 80px + env(safe-area-inset-bottom)); } }

/* Phone quick bar (includes back to top so nothing floats over content) */
.bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1.5fr 52px; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: #fff; border-block-start: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(17, 51, 42, 0.35); transition: transform 500ms var(--ease); }
.bar a, .bar button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--r); border: 1px solid var(--line-strong); background: #fff; color: var(--text); font-weight: 600; font-size: 0.95rem; padding: 0; }
.bar a.is-main { background: var(--green-800); color: #fff; border-color: var(--green-800); }
.bar button { font-size: 1.2rem; opacity: 0.35; transition: opacity 300ms; }
.bar button.is-on { opacity: 1; }
@media (min-width: 900px) { .bar { display: none; } }
body.menu-lock .bar { transform: translateY(110%); }

.totop { display: none; }
@media (min-width: 900px) {
  .totop { position: fixed; z-index: 41; inset-inline-start: 28px; inset-block-end: 28px; width: 54px; height: 54px; border-radius: var(--r); border: 0; padding: 0; background: var(--green-800); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 300ms var(--ease), transform 400ms var(--ease), visibility 0s linear 400ms; overflow: hidden; }
  .totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .totop::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; background: var(--gold); transform-origin: var(--origin, right); transform: scaleX(var(--p, 0)); }
  :dir(ltr) .totop::before { --origin: left; }
  .totop i { font-size: 1.25rem; transition: transform 300ms var(--ease); }
  .totop:hover i { transform: translateY(-3px); }
  .wa-float { position: fixed; z-index: 41; inset-inline-end: 28px; inset-block-end: 28px; width: 54px; height: 54px; border-radius: var(--r); background: #fff; color: var(--green-800); display: grid; place-items: center; font-size: 1.7rem; box-shadow: var(--shadow), 0 0 0 1px var(--line); transition: transform 400ms var(--ease), background-color 300ms, color 300ms; }
  .wa-float:hover { transform: translateY(-3px); background: var(--green-800); color: #fff; }
}
.wa-float { display: none; }
@media (min-width: 900px) { .wa-float { display: grid; } }

/* Page transitions (Chromium) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vtOut 360ms var(--ease-io) both; }
  ::view-transition-new(root) { animation: vtIn 620ms var(--ease) 100ms both; }
  @keyframes vtOut { to { opacity: 0; } }
  @keyframes vtIn { from { opacity: 0; transform: translateY(24px); } }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@media (max-width: 899px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .footer__brand, .footer__top > :last-child { grid-column: 1 / -1; } }

/* Typography: display face for headings, names and figures */
h1, h2, h3, h4, .h1, .h2, .h3, .scrub, .welcome, .scard__name, .rcard h3, .tile h3, .srow__name, .figures strong, .facts dd, .model__name b, .csr-item__metric, .office h3, .nthumb b, .signature b, .finder__card h2, .sub h3, .value h3, .job h3, .plan h3, .ncard h3, .nrow h3 { font-family: var(--font-head); }
h1, .h1 { font-weight: 700; line-height: 1.4; }
h2, .h2 { font-weight: 700; line-height: 1.45; }
h3, .h3 { font-weight: 600; }
.scrub { font-weight: 600; line-height: 1.75; }
:lang(en) h1, :lang(en) .h1 { line-height: 1.15; }
:lang(en) h2, :lang(en) .h2, :lang(en) .scrub { line-height: 1.3; }
.figures strong, .facts dd, .model__name b, .csr-item__metric, .nthumb b { font-weight: 700; letter-spacing: 0; }
.btn, .nav__links, .kicker, .badge, .gtab { font-family: var(--font-body); }
.btn { font-weight: 600; }
.split .w { padding-block: 0.2em 0.3em; margin-block: -0.2em -0.3em; }

/* Projects page: one place for every project */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: clamp(1.6rem, 3vw, 2.4rem); }
.filters button { min-height: 46px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line-strong); background: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background-color 200ms, color 200ms, border-color 200ms; }
.filters button span { font-size: 0.82rem; padding: 1px 7px; border-radius: 4px; background: var(--tint); color: var(--muted); }
.filters button[aria-selected="true"] { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.filters button[aria-selected="true"] span { background: rgba(255, 255, 255, 0.16); color: #fff; }
@media (max-width: 640px) { .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .filters button { flex: none; } }
.pgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pcard { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow 300ms, transform 400ms var(--ease); }
.pcard[hidden] { display: none; }
.pcard__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease); }
.pcard__img--num { display: grid; place-items: center; background: var(--green-900) radial-gradient(circle at 85% 110%, rgba(187, 141, 82, 0.35), transparent 55%); }
.pcard__img--num b { font-family: var(--font-head); font-size: 4.5rem; color: var(--gold); line-height: 1; }
.pcard__body { display: grid; gap: 4px; padding: 16px 18px 20px; padding-inline-end: 70px; }
.pcard__tag { font-size: 0.85rem; color: var(--gold-ink); font-weight: 600; }
.pcard__name { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; line-height: 1.4; }
.pcard__fact { color: var(--muted); font-size: 0.95rem; }
.pcard__go { position: absolute; inset-inline-end: 16px; inset-block-end: 20px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); transition: background-color 300ms, color 300ms, border-color 300ms; }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--gold), var(--shadow); }
  .pcard:hover .pcard__img img { scale: 1.05; }
  .pcard:hover .pcard__go { background: var(--green-800); color: #fff; border-color: var(--green-800); }
}
@media (prefers-reduced-motion: no-preference) { .pcard.is-shown { animation: pcIn 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes pcIn { from { opacity: 0; transform: translateY(12px); } } }
.pgrid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.menu__group > a i { color: var(--gold-ink); font-size: 1.1rem; }
.menu__group > a[aria-current="page"] { color: var(--green-800); }

/* Back button at the top of every inner page */
.backbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r); font-weight: 600; font-size: 0.95rem; color: #fff; background: rgba(12, 38, 31, 0.45); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color 200ms, color 200ms; }
.backbtn--dark { color: var(--green-800); background: #fff; border-color: var(--line-strong); backdrop-filter: none; margin-block-end: 14px; }
.backbtn i { font-size: 1.1rem; transition: transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .backbtn:hover { background: var(--green-800); color: #fff; border-color: var(--green-800); } [dir="rtl"] .backbtn:hover i { transform: translateX(4px); } [dir="ltr"] .backbtn:hover i { transform: translateX(-4px); } }

/* Gallery strips start where the page content starts, on any screen width */
.gallery { padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2)); }

/* Quality band: the client's craftsmanship film plays quietly behind the message */
.quality { position: relative; isolation: isolate; overflow: clip; color: #fff; min-height: clamp(460px, 80svh, 760px); display: grid; align-items: end; padding-block: clamp(4rem, 8vw, 6rem); background: var(--green-950); }
.quality__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.quality::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 38, 31, 0.15) 0%, rgba(12, 38, 31, 0.35) 45%, rgba(12, 38, 31, 0.88) 100%); }
.quality__inner { display: grid; gap: 14px; justify-items: start; }
.quality__inner > * { max-width: 640px; }
.quality .lead { color: rgba(255, 255, 255, 0.88); }

/* New launches: two project tiles side by side */
.launches { display: grid; gap: 14px; }
@media (min-width: 980px) { .launches { grid-template-columns: 1fr 1fr; } }
.launches .tile { min-height: clamp(520px, 74vh, 700px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px 6px; }
.chips li { display: grid; gap: 0; padding: 8px 12px; border-radius: var(--r); background: rgba(12, 38, 31, 0.55); border: 1px solid rgba(255, 255, 255, 0.16); min-width: 96px; }
.chips b { font-family: var(--font-head); font-size: 1.35rem; color: var(--gold); line-height: 1.2; }
.chips span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); line-height: 1.4; }
.chips .chip--ico { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chips .chip--ico i { color: var(--gold); font-size: 1.15rem; }
.chips .chip--ico span { font-size: 0.88rem; }
.tile .btn--line { color: #fff; }

/* Communities: three cards, centred, side by side */
.head--center { margin-inline: auto; text-align: center; justify-items: center; }
.ctrio { display: grid; gap: 16px; }
@media (min-width: 760px) { .ctrio { grid-template-columns: repeat(3, 1fr); } }
.ccard3 { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow 300ms, transform 400ms var(--ease); }
.ccard3__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.ccard3__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1000ms var(--ease); }
.ccard3__play { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r); background: rgba(12, 38, 31, 0.7); color: #fff; font-size: 0.85rem; font-weight: 600; }
.ccard3__body { display: grid; gap: 4px; padding: 18px 20px 22px; justify-items: start; }
.ccard3__city { color: var(--gold-ink); font-weight: 600; font-size: 0.9rem; }
.ccard3__name { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; line-height: 1.3; }
.ccard3__line { color: var(--muted); margin-block-end: 8px; }
@media (hover: hover) and (pointer: fine) { .ccard3:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--gold), var(--shadow); } .ccard3:hover .ccard3__img img { scale: 1.05; } }

/* News: a slow moving strip that pauses on hover or touch */
.nmarquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.nmarquee__track { display: flex; gap: 18px; width: max-content; padding-block: 6px 10px; }
.nslide { width: min(78vw, 340px); flex: none; }
.nslide .curtain, .nslide .nthumb { aspect-ratio: 1; }
.nslide .curtain img { clip-path: none !important; scale: 1 !important; }
@media (prefers-reduced-motion: no-preference) {
  .nmarquee__track { animation: marquee 60s linear infinite; }
  [dir="rtl"] .nmarquee__track { animation-name: marqueeRtl; }
  .nmarquee:hover .nmarquee__track, .nmarquee:focus-within .nmarquee__track, .nmarquee.is-held .nmarquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(calc(-50% - 9px)); } }
@keyframes marqueeRtl { to { transform: translateX(calc(50% + 9px)); } }
@media (prefers-reduced-motion: reduce) { .nmarquee { overflow-x: auto; } .nmarquee__track [aria-hidden="true"] { display: none; } }

/* Project video */
.vblock { position: relative; border-radius: var(--r); overflow: hidden; background: var(--green-950); aspect-ratio: 16 / 9; }
.vblock video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
.vblock.is-playing video { object-fit: contain; }
.vblock__play { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 18px; border-radius: var(--r); border: 0; background: rgba(255, 255, 255, 0.95); color: var(--green-900); font-weight: 600; font-size: 1.05rem; box-shadow: var(--shadow); transition: transform 300ms var(--ease), background-color 200ms; }
.vblock__play i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--green-950); font-size: 1.3rem; }
.vblock.is-playing .vblock__play { display: none; }
@media (hover: hover) and (pointer: fine) { .vblock__play:hover { transform: scale(1.04); } }
@media (prefers-reduced-motion: no-preference) { .vblock__play i { animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(187, 141, 82, 0.5); } 50% { box-shadow: 0 0 0 12px rgba(187, 141, 82, 0); } } }

/* Long statements read in the text face; the display face is kept for short headings, names and figures */
.scrub { font-family: var(--font-body); font-weight: 600; line-height: 1.8; }
.scrub .sw { opacity: var(--o, 0.28); }

/* Gallery: the current picture sits in the middle of the page and its neighbours peek in on both sides */
.gallery { --slide: min(84vw, 760px); padding-inline: calc(50% - var(--slide) / 2); scroll-padding-inline: 0; gap: 14px; }
.gallery a { flex: 0 0 var(--slide); scroll-snap-align: center; }

/* Clickable cards that hold their own buttons: the title link covers the card, buttons sit above it */
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile__cta, .ccard3__play { position: relative; z-index: 2; }
.tile h3 a { color: inherit; }
.ccard3 { position: relative; }
.ccard3__name { display: block; color: inherit; }
button.ccard3__play { border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.88rem; transition: background-color 200ms, color 200ms; }
@media (hover: hover) and (pointer: fine) { button.ccard3__play:hover { background: var(--gold); color: var(--green-950); } }

/* Quality band controls */
.quality__ctl { position: absolute; inset-block-start: 24px; inset-inline-end: var(--gutter); display: flex; gap: 8px; z-index: 2; }
.quality__ctl button { width: 46px; height: 46px; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(12, 38, 31, 0.55); color: #fff; font-size: 1.2rem; display: grid; place-items: center; transition: background-color 200ms, color 200ms; }
@media (hover: hover) and (pointer: fine) { .quality__ctl button:hover { background: var(--gold); color: var(--green-950); border-color: var(--gold); } }

/* Video popup */
.vmodal { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(9, 22, 18, 0.96); color: #fff; }
.vmodal[open] { display: grid; grid-template-rows: auto 1fr; }
.vmodal::backdrop { background: transparent; }
.vmodal__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: max(14px, env(safe-area-inset-top)) var(--gutter) 10px; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; }
.vmodal__bar button { width: 50px; height: 50px; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); color: #fff; display: grid; place-items: center; font-size: 1.3rem; }
.vmodal__stage { display: grid; place-items: center; align-content: center; gap: 14px; padding: 0 clamp(8px, 3vw, 40px) max(20px, env(safe-area-inset-bottom)); min-height: 0; }
.vmodal video { width: 100%; max-height: calc(100dvh - 120px); background: #000; border-radius: var(--r); }
.vmodal__note { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.08); padding: 8px 14px; border-radius: var(--r); font-size: 0.95rem; }
.vblock__err { position: absolute; inset-inline: 16px; inset-block-end: 16px; margin: 0; padding: 10px 14px; border-radius: var(--r); background: rgba(12, 38, 31, 0.9); color: #fff; font-size: 0.95rem; }


/* ============ Gallery: one large picture, thumbnails below ============ */
.gtabs { display: flex; flex-wrap: wrap; gap: 8px; }
.gal { display: grid; gap: 12px; outline: none; }
.gal:focus-visible .gal__stage { box-shadow: 0 0 0 3px var(--gold); }
.gal__stage { position: relative; aspect-ratio: 16 / 10; max-height: 74vh; min-height: 260px; border-radius: var(--r); overflow: hidden; background: var(--green-950); }
.gal--plans .gal__stage { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.gal__open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gal__img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 300ms var(--ease), scale 900ms var(--ease); }
.gal__img.is-swap { opacity: 0.35; }
.gal__zoom { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: var(--green-900); font-size: 1.15rem; opacity: 0; transition: opacity 250ms; }
.gal__arrow { position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 2; width: 52px; height: 52px; border-radius: var(--r); border: 0; background: rgba(255, 255, 255, 0.94); color: var(--green-900); font-size: 1.3rem; display: grid; place-items: center; box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.5); transition: background-color 200ms, color 200ms; }
.gal__arrow--prev { inset-inline-start: 14px; }
.gal__arrow--next { inset-inline-end: 14px; }
.gal__count { position: absolute; inset-block-end: 14px; inset-inline-start: 14px; z-index: 2; padding: 4px 12px; border-radius: var(--r); background: rgba(12, 38, 31, 0.78); color: #fff; font-size: 0.9rem; }
.gal--plans .gal__count { background: var(--green-900); }
.gal__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.gal__t { flex: none; width: 118px; aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--tint); opacity: 0.62; box-shadow: 0 0 0 1px var(--line); scroll-snap-align: center; transition: opacity 200ms, box-shadow 200ms; }
.gal__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal__t.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
.gal--plans .gal__t img { object-fit: contain; background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .gal__open:hover .gal__zoom { opacity: 1; }
  .gal__open:hover .gal__img { scale: 1.02; }
  .gal__arrow:hover { background: var(--green-800); color: #fff; }
  .gal__t:hover { opacity: 1; }
}
@media (max-width: 640px) { .gal__stage { aspect-ratio: 4 / 3; min-height: 0; } .gal__arrow { width: 44px; height: 44px; } .gal__t { width: 84px; } .gal__zoom { opacity: 1; } }

/* ============ Craftsmanship film: shown whole, beside its message ============ */
.quality { position: static; display: block; min-height: 0; overflow: visible; isolation: auto; background: var(--green-900); padding-block: clamp(3.5rem, 7vw, 6rem); color: #fff; }
.quality::after { content: none; }
.quality__grid { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; }
@media (min-width: 1000px) { .quality__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); } }
.quality__inner { display: grid; gap: 14px; justify-items: start; }
.quality__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7); }
.quality__vid { position: static; display: block; width: 100%; height: 100%; object-fit: contain; z-index: auto; }
.quality__ctl { inset-block-start: auto; inset-block-end: 14px; inset-inline-end: 14px; }

/* ============ New launches: things arrive in order and keep moving ============ */
@media (prefers-reduced-motion: no-preference) {
  .launches .tile .plx { animation: kenburns 24s ease-in-out infinite alternate; }
  @keyframes kenburns { from { scale: 1; } to { scale: 1.09; } }
  .js .launches .tile > :not(.plx) { opacity: 0; translate: 0 26px; transition: opacity 800ms var(--ease), translate 1000ms var(--ease); }
  .js .launches .tile.in > :not(.plx) { opacity: 1; translate: none; }
  .js .launches .tile.in > :nth-child(2) { transition-delay: 350ms; }
  .js .launches .tile.in > :nth-child(3) { transition-delay: 500ms; }
  .js .launches .tile.in > :nth-child(4) { transition-delay: 650ms; }
  .js .launches .tile.in > :nth-child(5) { transition-delay: 1300ms; }
  .js .launches .chips li { opacity: 0; scale: 0.8; translate: 0 12px; transition: opacity 500ms var(--ease), scale 700ms cubic-bezier(0.34, 1.56, 0.64, 1), translate 700ms var(--ease), border-color 200ms, background-color 200ms; transition-delay: calc(var(--i, 0) * 80ms + 800ms); }
  .js .launches .tile.in .chips li { opacity: 1; scale: 1; translate: none; }
  .launches .tile { transition: translate 500ms var(--ease), box-shadow 500ms var(--ease); }
  .launches .tile:hover { translate: 0 -6px; box-shadow: 0 34px 60px -34px rgba(12, 38, 31, 0.8); }
  .launches .tile:hover .tile__logo { translate: 0 -4px; }
  .launches .chips li:hover { translate: 0 -3px; border-color: var(--gold); background: rgba(12, 38, 31, 0.8); transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .launches .tile .plx { animation: none; } }

.gal__count, #lb-count, #vm-count { direction: ltr; unicode-bidi: isolate; }
.gal__stage::before { content: ""; position: absolute; inset: -30px; background-image: var(--bg, none); background-size: cover; background-position: center; filter: blur(28px) brightness(0.55) saturate(1.1); }
.gal--plans .gal__stage::before { content: none; }
.gal__open { z-index: 1; }

/* Privacy policy */
.policy { display: grid; gap: 22px; }
.policy__sec { display: grid; gap: 10px; padding-block-start: 22px; border-block-start: 1px solid var(--line); }
.policy__sec h2 { display: flex; align-items: baseline; gap: 12px; }
.policy__sec h2 .num { flex: none; min-width: 2ch; color: var(--gold-ink); font-family: var(--font-head); }
.policy__sec p, .policy__sec li { color: var(--muted); }
.policy__sec ul { display: grid; gap: 8px; padding-inline-start: 1.2em; list-style: disc; }
.policy__sec li::marker { color: var(--gold); }
.policy .backbtn { justify-self: start; }

/* Craftsmanship film: message on top, the film below at full content width (16:9, never cropped) */
.quality__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 1000px) { .quality__grid { grid-template-columns: 1fr; } }
.quality__inner { display: grid; gap: 14px 48px; justify-items: start; }
@media (min-width: 900px) { .quality__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .quality__inner .kicker { grid-column: 1 / -1; } .quality__inner .lead { max-width: 52ch; } }
.quality__frame { width: 100%; border-radius: var(--r); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.quality__ctl { inset-block-end: 18px; inset-inline-end: 18px; gap: 10px; }
.quality__ctl button { width: 52px; height: 52px; font-size: 1.35rem; background: rgba(12, 38, 31, 0.78); border-color: rgba(255, 255, 255, 0.55); }

/* News carousel: starts on the content edge, one card at a time, quiet auto-advance */
.ncar__tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ncar { --edge: max(var(--gutter), calc((100% - var(--maxw)) / 2)); }
.ncar__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--edge) 12px; scroll-padding-inline: var(--edge); scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.ncar__track::-webkit-scrollbar { display: none; }
.ncar .nslide { width: min(78vw, 340px); flex: none; scroll-snap-align: start; }
.ncar .nslide .curtain, .ncar .nslide .nthumb { aspect-ratio: 1; }
.ncar .nslide .curtain img { clip-path: none !important; scale: 1 !important; }
.ncar .nslide .curtain { transition: translate 500ms var(--ease), box-shadow 500ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .ncar .nslide:hover .curtain, .ncar .nslide:hover .nthumb { translate: 0 -4px; box-shadow: var(--shadow); } }
.nmarquee { display: none; }
@media (max-width: 640px) { .quality__ctl { inset-block-end: 10px; inset-inline-end: 10px; gap: 8px; } .quality__ctl button { width: 40px; height: 40px; font-size: 1.1rem; } }

/* ===== Craftsmanship film in a glass frame (used only here) ===== */
.quality { position: relative; isolation: isolate; overflow: hidden; background: var(--green-950); }
.quality__ambient { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; z-index: -2; filter: blur(64px) saturate(1.35) brightness(0.5); }
.quality::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 85% 105%, rgba(187, 141, 82, 0.28), transparent 70%), linear-gradient(180deg, rgba(12, 38, 31, 0.35), rgba(12, 38, 31, 0.1)); }
.quality__glass { position: relative; padding: 12px; border-radius: calc(var(--r) + 4px); background: linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.05)); border: 1px solid rgba(255, 255, 255, 0.27); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 50px 90px -42px rgba(0, 0, 0, 0.9); }
.quality__frame { box-shadow: none; border-radius: var(--r); }
.quality__dock { position: absolute; inset-block-end: 28px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: calc(var(--r) + 4px); background: rgba(12, 38, 31, 0.4); border: 1px solid rgba(255, 255, 255, 0.32); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 14px 30px -14px rgba(0, 0, 0, 0.7); }
.quality__dock button { border: 0; color: #fff; display: grid; place-items: center; transition: background-color 200ms, color 200ms; }
.quality__dock button[data-vc] { width: 42px; height: 42px; border-radius: var(--r); background: rgba(255, 255, 255, 0.16); font-size: 1.2rem; }
.quality__bar { position: relative; width: clamp(110px, 24vw, 280px); height: 30px; background: none; cursor: pointer; padding: 0; }
.quality__bar::before, .quality__bar::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 50%; height: 4px; margin-block-start: -2px; border-radius: 2px; }
.quality__bar::before { background: rgba(255, 255, 255, 0.3); }
.quality__bar::after { background: var(--gold); transform-origin: var(--o, right); transform: scaleX(var(--p, 0)); }
:dir(ltr) .quality__bar { --o: left; }
@media (hover: hover) and (pointer: fine) { .quality__dock button[data-vc]:hover { background: var(--gold); color: var(--green-950); } }
@media (max-width: 640px) { .quality__glass { padding: 8px; } .quality__dock { inset-block-end: 16px; gap: 6px; padding: 6px; } .quality__dock button[data-vc] { width: 36px; height: 36px; font-size: 1.05rem; } .quality__bar { width: 88px; } }
@media (prefers-reduced-transparency: reduce) { .quality__glass, .quality__dock { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(23, 66, 54, 0.96); } }

/* ===== News: a whole number of cards fits the content width exactly ===== */
.ncar { --cols: 1; --edge: 0px; padding-inline: 0; }
@media (min-width: 761px) { .ncar { --cols: 2; } }
@media (min-width: 1000px) { .ncar { --cols: 3; } }
@media (min-width: 1200px) { .ncar { --cols: 4; } }
.ncar__track { padding: 6px 0 14px; scroll-padding-inline: 0; }
.ncar .nslide { flex: 0 0 calc((100% - (var(--cols) - 1) * 18px) / var(--cols)); width: auto; }
.ncar .nslide h3 { line-height: 1.55; min-height: 3.1em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Closing band: tall enough to show the building, focus on the facade and the street rather than the roof line */
.cta { min-height: clamp(380px, 46vw, 560px); display: grid; align-items: center; }
.cta .plx img { object-position: 50% 62%; }
.cta__inner { max-width: none; }
.cta__inner > * { max-width: 640px; }