/* ============================================================
   PROPARTIES - COMPLETE STYLE SYSTEM (v3 – all fixes)
   Fonts: IvyPresto Display (serif) + Nunito Sans (sans-serif)
   ============================================================ */

/* ── RESET ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; font-size: 62.5%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset, ul { padding: 0; margin: 0; }
ul, ol { list-style: none; }
body { line-height: 1.5; overscroll-behavior-y: none; }
h1, h2, h3, h4, button, input, label { line-height: 1.1; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
a:not([class]) { text-decoration-skip-ink: auto; color: currentColor; }
img, picture { max-width: 100%; display: block; user-select: none; pointer-events: none; }
input, button, textarea, select { font: inherit; }
textarea:not([rows]) { min-height: 10em; }
:target { scroll-margin-block: 5ex; }
button:hover { cursor: pointer; }
fieldset { border: none; }

/* ── CSS VARIABLES ────────────────────────── */
:root {
  --white-1: #FFFFFF;
  --fc-main: #303030;
  --act-col: #755e5e;
  --bg-1: #FAFAFA;
  --bg-2: #C4B5B5;
  --bg-3: #F5F5F5;
  --bg-4: #BDA9A9;
  --red-1: #b210108c;
  --ff-head: "ivypresto-display", serif;
  --ff-gen: "Nunito Sans", sans-serif;
  --fc-alt: var(--white-1);
  --tmpl-max-col-w: 60rem;
  --tmpl-bp: 6rem;
  --tmpl-bp-l: 12rem;
  --tmpl-ip: 12rem;
  --tmpl-ip-s: 2rem;
  --tmpl-sec-pb: 16rem 10rem;
  --tmpl-ig: 6rem;
  --ls-md: .12rem;
  --ls-lg: .28rem;
  --sp-xs: .4rem;
  --sp-sm: 1rem;
  --sp-md: 1.6rem;
  --sp-lg: 2rem;
  --sp-xl: 2.4rem;
  --sp-3xl: 4rem;
  --nb-space: 6rem;
  --br-s: .8rem;
  --br-l: 2.4rem;
  --fs-sm: 1.4rem;
  --fs-md: 1.6rem;
  --fs-lg: 4rem;
  --fs-xl: 8rem;
  --fs-jm: 18rem;
  --act-h: 4.5rem;
  --osbs: 19.16px 19.16px 95.82px 0px #0000004D;
  --osfs: drop-shadow(-4px 4px 18px #0000001A);
  --ts-l: .2rem .2rem .2rem #00000020;
  --glass: blur(.3rem) invert(.1);
  --ac-s: cubic-bezier(.25, .1, .25, 1);
  --t-w: balance;
  --tr-du-reg: .3s;
  --svh: 100svh;
}

@supports (text-wrap: pretty) { :root { --t-w: pretty; } }
@supports not (height: 100svh) { :root { --svh: 95vh; } }
@media (prefers-reduced-motion) { :root { --tr-du-reg: 3s; } }
@media screen and (min-width: 1981px) { html { font-size: 75%; } :root { --tmpl-max-col-w: 80rem; } }
@media screen and (min-width: 2601px) { html { font-size: 100%; } }
@media screen and (max-width: 1480px) { :root { --tmpl-ip: 6rem; --tmpl-ip-s: 3rem; } }
@media (max-width: 912px) {
  :root {
    --nb-space: 3rem;
    --tmpl-max-col-w: calc(100vw - var(--nb-space) * 2);
    --tmpl-ip: 3rem;
    --tmpl-ip-s: 3rem;
    --tmpl-sec-pb: 10rem 6rem;
    --tmpl-ig: 4rem;
    --fs-lg: 2.8rem;
    --fs-xl: 4rem;
    --fs-jm: 8rem;
  }
}

/* ── BASE ─────────────────────────────────── */
html, body { width: 100vw; min-height: 100vh; }
body { font-family: var(--ff-gen); overflow-x: hidden; color: var(--fc-main); background-color: var(--bg-1); }
h2, h3, h4, h5, h6 { font-family: var(--ff-gen); font-weight: 700; }
p { letter-spacing: -.02rem; }
a { color: inherit; }

.srOnly { position: absolute; left: 0; top: auto; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); opacity: 0; }

.hff {
  font-family: var(--ff-head);
  font-weight: 300;
  letter-spacing: -.2rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── SIGNATURE LOGO (text) ───────────────── */
.signatureLogo {
  font-family: 'Dancing Script', cursive;
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  line-height: 1;
  white-space: nowrap;
  transition: all var(--tr-du-reg) ease-in-out;
  direction: ltr;
}
.signatureLogo .sigBy,
.signatureLogo .sigName,
.signatureLogo .sigAnd,
.signatureLogo .sigBig {
  font-size: 2.6rem;
  font-weight: 500;
}

/* ── BUTTONS ──────────────────────────────── */
button { font-size: var(--fs-sm); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; outline: none; }
button.action {
  background-color: var(--act-col);
  border: .2rem solid var(--act-col);
  color: var(--fc-alt);
  border-radius: 30rem;
  min-width: 20rem;
  min-height: var(--act-h);
  transition: all .2s ease-in-out;
}
button.action:hover, button.action:focus-within {
  background-color: var(--bg-4);
  border-color: var(--bg-4);
  color: var(--act-col);
}
button.action:disabled, button.action.disabled {
  background-color: var(--bg-3);
  border-color: var(--bg-3);
  color: var(--fc-alt);
}
button.nd { background-color: transparent; border: none; }
button.nd:hover, button.nd:focus-within { color: var(--act-col); }

a.act {
  border: .2rem solid var(--act-col);
  color: var(--fc-alt);
  text-decoration: none;
  background-color: var(--act-col);
  padding: var(--sp-xs) var(--sp-xl);
  border-radius: var(--br-l);
  font-weight: 400;
  margin-block-start: var(--sp-lg);
  transition: all .2s ease-in-out;
}
a.act:hover, a.act:focus-within {
  background-color: var(--bg-4);
  color: var(--act-col);
  border-color: var(--bg-4);
}

.pillEdit { display: inline-flex; height: var(--act-h); }
.pillEdit button, .pillEdit input {
  height: 100%; outline: 0; cursor: pointer; border-radius: 30rem;
  border: .1rem solid var(--act-col); font-size: var(--fs-sm);
}
.pillEdit input { padding-inline-start: var(--sp-md); border-start-end-radius: 0; border-end-end-radius: 0; }
.pillEdit button {
  border-inline-start: 0; border-start-start-radius: 0; border-end-start-radius: 0;
  background-color: var(--act-col); padding-inline: var(--sp-md) var(--sp-lg);
  transition: all .2s ease-in-out; user-select: none; color: var(--fc-alt);
}
.pillEdit:hover input:not(:user-invalid) + button,
.pillEdit:focus-visible input:not(:user-invalid) + button {
  background-color: var(--bg-4); color: var(--act-col);
}

/* ── IMAGE SHAPES ─────────────────────────── */
img.simp, img.land, img.col, img.sqr {
  clip-path: inset(0 0 round var(--br-l));
  object-fit: cover;
  filter: var(--osfs);
  width: 100%;
}
img.land, img.col, img.sqr { max-height: 80vh; }
img.simp { max-height: var(--svh); }
img.col { aspect-ratio: 10 / 13; }
img.sqr { aspect-ratio: 1 / 1; }
img.land { aspect-ratio: 16 / 9; }

/* ── TEXT COLUMN ──────────────────────────── */
.text.column {
  height: 100%; display: flex; flex-direction: column;
  justify-content: center; align-self: center; gap: var(--sp-lg);
  direction: rtl; text-align: right;
}
.text.column .description { font-size: 2.8rem; line-height: 1.6; max-width: 74rem; }
.text.column .heading, .text.column .description { text-wrap: var(--t-w); }
:is(.text.column, .section) .heading {
  line-height: 1.2; font-size: var(--fs-xl); white-space: pre-wrap;
}
.text.column .subheading { font-size: var(--fs-lg); line-height: 1.3; }

/* ── NAVIGATION ──────────────────────────── */
nav.landing {
  --n-h: 10rem;
  --el-h: 3.2rem;
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  width: 100vw; display: flex; height: var(--n-h);
  justify-content: flex-end; padding: var(--sp-md) var(--nb-space);
  z-index: 100; direction: ltr; gap: var(--sp-md);
  align-items: flex-start;
}
nav.landing .logoSignature {
  --w: 30rem;
  position: absolute; inset-inline-start: calc(50vw - var(--w) / 2);
  width: var(--w); height: auto; color: var(--fc-alt);
  transition: all var(--tr-du-reg) ease-in-out;
  text-decoration: none; display: flex; align-items: center; justify-content: center;
}
nav.landing a.press, nav.landing .langSelector {
  height: var(--el-h); transform: translateZ(0);
  transition: transform var(--tr-du-reg) ease-in-out;
}
nav.landing .langSelector {
  font-family: var(--ff-gen); display: flex; align-items: center; user-select: none;
  color: var(--fc-alt);
}
nav.landing .langSelector button { transition: all var(--tr-du-reg) ease-in-out; }
nav.landing .langSelector button.selected {
  text-decoration: underline; text-decoration-thickness: .1rem; text-underline-offset: var(--sp-xs);
}
nav.landing a.press {
  text-decoration: none; font-size: var(--fs-sm); font-weight: 700;
  display: flex; align-items: center;
}

/* Nav states */
nav.landing.partial, nav.landing.fullOut {
  --n-h: 6.4rem;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 30%, rgba(255,255,255,.1) 80%, transparent);
}
nav.landing.partial .logoSignature, nav.landing.fullOut .logoSignature {
  --w: 24rem; inset-inline-start: var(--nb-space); justify-content: flex-start;
}
nav.landing.partial .signatureLogo .sigBy,
nav.landing.partial .signatureLogo .sigName,
nav.landing.partial .signatureLogo .sigAnd,
nav.landing.partial .signatureLogo .sigBig { font-size: 1.8rem; }
nav.landing.fullOut .signatureLogo .sigBy,
nav.landing.fullOut .signatureLogo .sigName,
nav.landing.fullOut .signatureLogo .sigAnd,
nav.landing.fullOut .signatureLogo .sigBig { font-size: 1.8rem; }
nav.landing.fullOut .logoSignature { color: #755e5e; }

/* ── HERO ─────────────────────────────────── */
.hero {
  width: 100vw; height: var(--svh); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--fc-alt); text-align: center; overflow: hidden;
  direction: ltr;
}
.hero .background {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: -1; opacity: 1; filter: brightness(.88); transition: opacity .2s ease-out;
}
.hero .background img, .hero .background picture { width: 100%; height: 100%; object-fit: cover; }
.hero .content { z-index: 1; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.hero.lp .content h1 {
  font-size: var(--fs-jm); font-weight: 300; line-height: 1.2;
  white-space: pre-wrap; transform: translate3d(0, 12rem, 0); opacity: 0;
  max-height: 0; animation: slideUp 1.6s var(--ac-s) forwards 1s;
  display: flex; flex-direction: column; font-style: italic; text-align: center;
  margin-bottom: 4rem;
}
#heroHeadline {
  font-family: 'Playfair Display', serif;
  font-weight: 700; font-style: normal;
  text-transform: uppercase;
  letter-spacing: .02em;
  direction: ltr;
  display: inline-flex; align-items: baseline;
}
.hero-brand-text {
  color: var(--white-1, #fff);
}
.hero-brand-art {
  color: var(--white-1, #fff);
}
/* "Lifestyle" — elegant handwritten signature, rising L→R below the brand */
.hero-lifestyle {
  font-family: "Dancing Script", cursive;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 600; font-style: normal;
  color: var(--white-1, #fff);
  direction: ltr;
  display: block;
  opacity: 0;
  transform: translateY(1.4rem) rotate(-6deg);
  transform-origin: left center;
  animation: heroLifestyleIn 1.2s cubic-bezier(.25,.46,.45,.94) forwards;
  animation-delay: 2s;
  margin-top: -.4rem;
  letter-spacing: .06em;
  text-align: center;
}
@keyframes heroLifestyleIn {
  0%   { opacity: 0; transform: translateY(1.4rem) rotate(-6deg); }
  50%  { opacity: .8; }
  100% { opacity: .95; transform: translateY(0) rotate(-2.5deg); }
}
.hero.lp .content h1 small { font-size: var(--fs-xl); font-style: normal; letter-spacing: 0; direction: ltr; color: var(--fc-alt); }
.hero.lp .content h1 .heroByline {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 500; font-style: normal;
  letter-spacing: .05em; opacity: .92;
  margin-top: -.5rem; margin-bottom: .3rem;
}

/* ── CALL NOW (floating WhatsApp) ─────────── */
.callNow {
  position: fixed; display: block;
  inset-block-start: 7rem; inset-inline-start: var(--nb-space);
  width: fit-content;
  height: var(--act-h); z-index: 99; direction: ltr;
  pointer-events: none;
  opacity: 0; transform: translateY(-1rem);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}
.callNow.visible {
  opacity: 1; transform: translateY(0);
}
.callNow .content {
  display: inline-flex; align-items: center; gap: var(--sp-md);
  color: var(--fc-alt); border-radius: 30rem;
  height: var(--act-h);
  white-space: nowrap; overflow: hidden;
  background-color: #25D366; filter: drop-shadow(0 4px 16px rgba(0,0,0,.25));
  border: .2rem solid #25D366;
  text-decoration: none;
  padding: 0 calc((var(--act-h) - 2.2rem) / 2);
  max-width: var(--act-h);
  transition: max-width .4s cubic-bezier(.25,.1,.25,1),
              background-color .2s ease-in-out,
              color .2s ease-in-out;
  pointer-events: auto; cursor: pointer;
}
/* Hover → expand to show details */
.callNow .content:hover, .callNow .content:focus-within {
  max-width: 40rem;
  background-color: var(--fc-alt); color: #25D366;
}
.callNow svg.waIcon {
  width: 2.2rem; height: 2.2rem; flex-shrink: 0;
  animation: trin 6s infinite linear 6s;
}
/* Details text — hidden by default, revealed on hover */
.callNow .waDetails {
  font-size: var(--fs-md); font-weight: 400;
  opacity: 0; transition: opacity .25s ease-in-out .15s;
  padding-inline-end: var(--sp-md);
}
.callNow .content:hover .waDetails,
.callNow .content:focus-within .waDetails {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .hero.lp .content h1 { font-size: clamp(4rem, 12vw, 8rem); margin-bottom: 2rem; }
  .hero.lp .content h1 small { font-size: clamp(1.8rem, 5vw, 4rem); }
  .hero-lifestyle { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-top: -.2rem; }
  .callNow { inset-block-start: 5.5rem; }
  .callNow .content { border-radius: 1.6rem; }
  .callNow svg.waIcon { width: 1.8rem; height: 1.8rem; }
}

/* ── TRY PRODUCT FAB (floating, below WhatsApp) ── */
:root {
  --fab-bg: #755e5e;
  --fab-bg-hover: #665050;
  --fab-glow-color: rgba(117, 94, 94, 0.45);
  --fab-text-color: #FFFFFF;
  --fab-gap-from-wa: 1.5rem;
}

.tryProductFab {
  position: fixed; display: block;
  inset-block-start: calc(7rem + var(--act-h) + var(--fab-gap-from-wa));
  inset-inline-start: var(--nb-space);
  width: fit-content; height: var(--act-h);
  z-index: 99; direction: ltr;
  pointer-events: none;
  opacity: 0; transform: translateY(-1rem);
  transition: opacity .3s ease-in-out .06s, transform .3s ease-in-out .06s;
}
.tryProductFab.visible {
  opacity: 1; transform: translateY(0);
}
.tryProductFab .fabLink {
  display: inline-flex; align-items: center; gap: 0.8rem;
  height: var(--act-h); border-radius: 30rem;
  padding: 0 1.8rem 0 1.4rem;
  color: var(--fab-text-color);
  text-decoration: none; white-space: nowrap;
  font-family: var(--ff-gen); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: .02rem;
  pointer-events: auto; cursor: pointer;
  /* Solid premium with glass edge */
  background: var(--fab-bg);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 0 0 0 var(--fab-glow-color);
  animation: fabPulseGlow 3s ease-in-out infinite;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.tryProductFab .fabLink:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 0 24px 4px var(--fab-glow-color);
  filter: brightness(1.1);
}
.tryProductFab .fabLink:active {
  transform: translateY(0) scale(0.98);
}
/* Sparkle icon */
.tryProductFab .fabIcon {
  width: 1.8rem; height: 1.8rem; flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.5));
}
/* Label */
.tryProductFab .fabLabel {
  direction: rtl;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

@media screen and (max-width: 768px) {
  .tryProductFab {
    inset-block-start: calc(5.5rem + var(--act-h) + var(--fab-gap-from-wa));
  }
  .tryProductFab .fabLink {
    height: 3.8rem; padding: 0 1.4rem 0 1rem;
    font-size: var(--fs-sm); gap: 0.6rem;
    border-radius: 1.6rem;
  }
  .tryProductFab .fabIcon { width: 1.5rem; height: 1.5rem; }
}

/* ── PROJECTS FAB (secondary, ghost style below Try Product) ── */
.projectsFab {
  position: fixed; display: block;
  inset-block-start: calc(7rem + var(--act-h) * 2 + var(--fab-gap-from-wa) + 1rem);
  inset-inline-start: var(--nb-space);
  width: fit-content; height: var(--act-h);
  z-index: 99; direction: ltr;
  pointer-events: none;
  opacity: 0; transform: translateY(-1rem);
  transition: opacity .3s ease-in-out .12s, transform .3s ease-in-out .12s;
}
.projectsFab.visible {
  opacity: 1; transform: translateY(0);
}
.projectsFab .fabLink--ghost {
  display: inline-flex; align-items: center; gap: 0.8rem;
  height: var(--act-h); border-radius: 30rem;
  padding: 0 1.8rem 0 1.4rem;
  text-decoration: none; white-space: nowrap;
  font-family: var(--ff-gen); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: .02rem;
  pointer-events: auto; cursor: pointer;
  /* Ghost style */
  background: rgba(250, 250, 250, .82);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 2px solid var(--act-col);
  color: var(--act-col);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.projectsFab .fabLink--ghost:hover {
  transform: translateY(-2px) scale(1.03);
  background: var(--act-col); color: #fff;
  box-shadow: 0 8px 28px rgba(117, 94, 94, .25);
}
.projectsFab .fabLink--ghost:active {
  transform: translateY(0) scale(0.98);
}
.projectsFab .fabIcon {
  width: 1.8rem; height: 1.8rem; flex-shrink: 0;
}
.projectsFab .fabLabel {
  direction: rtl;
}

@media screen and (max-width: 768px) {
  .projectsFab {
    inset-block-start: calc(5.5rem + var(--act-h) * 2 + var(--fab-gap-from-wa) + .6rem);
  }
  .projectsFab .fabLink--ghost {
    height: 3.8rem; padding: 0 1.4rem 0 1rem;
    font-size: var(--fs-sm); gap: 0.6rem;
    border-radius: 1.6rem;
  }
  .projectsFab .fabIcon { width: 1.5rem; height: 1.5rem; }
}

/* ── SAMPLE ───────────────────────────────── */
section.sample {
  display: flex; justify-content: center; align-items: center;
  padding-block: 14rem 14rem;
}
section.sample a.act {
  display: flex; align-items: center; margin: 0; height: unset; width: unset;
  padding: var(--sp-sm) var(--sp-3xl); font-size: var(--fs-md);
  animation: heart 4s infinite; box-shadow: 0 0 12px 4px var(--bg-4); font-weight: 700;
}

/* ═══════════════════════════════════════
   COMPARISON SLIDER (drag to reveal)
   ═══════════════════════════════════════ */
.compare-section {
  width: 100%;
  padding-block: 3rem 4rem;
  padding-inline: var(--tmpl-ip, 2rem);
  background: var(--bg-1);
  display: flex;
  justify-content: center;
}
.compare-carousel {
  position: relative;
  width: 100%;
  max-width: 90rem;
  overflow: hidden;
  direction: ltr;
  margin: 0 auto;
}
.compare-track {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.compare-slide {
  min-width: 100%;
  width: 100%;
  flex-shrink: 0;
  padding: 0 1rem;
  box-sizing: border-box;
}
.compare-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--br-l, 1.2rem);
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  aspect-ratio: 16 / 10;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.compare-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}
.compare-img--under {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.compare-img-reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 50% 0 0);
  z-index: 2;
}
.compare-img-reveal .compare-img--over {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.compare-handle-line {
  flex: 1;
  width: 3px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,0,0,.3);
}
.compare-handle-circle {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 1.4rem;
  flex-shrink: 0;
}
/* Carousel arrows */
.compare-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #333;
  transition: background .2s, transform .2s;
}
.compare-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.1);
}
.compare-arrow--prev { right: 1.2rem; }
.compare-arrow--next { left: 1.2rem; }
/* Dots */
.compare-dots {
  display: flex;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.6rem;
}
.compare-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid #999;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s, border-color .2s;
}
.compare-dot.active {
  background: var(--act-col, #2C5557);
  border-color: var(--act-col, #2C5557);
}
@media (max-width: 768px) {
  .compare-carousel { max-width: 100%; }
  .compare-arrow { width: 3.2rem; height: 3.2rem; font-size: 1.1rem; }
  .compare-arrow--prev { right: .5rem; }
  .compare-arrow--next { left: .5rem; }
}

/* ── BEFORE / AFTER SHOWCASE (same card pattern as STN) ── */
.ba-section {
  width: 100%; padding-block: 6rem 5rem; padding-inline: var(--tmpl-ip, 1rem);
  background: var(--bg-1); display: flex; flex-direction: column;
  align-items: center; gap: 3rem; direction: rtl;
}
.ba-carousel-wrap {
  --ba-card-w: 76;
  width: 100%;
  max-width: calc(var(--tmpl-max-col-w) * 2 + var(--tmpl-ig));
  position: relative;
  direction: ltr;
}
.ba-carousel-viewport {
  overflow: hidden; width: 100%; position: relative;
}
.ba-carousel-track {
  display: flex; gap: 1.4rem;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* Card */
.ba-card {
  flex: 0 0 calc(var(--ba-card-w) * 1%);
  min-width: 0;
  border-radius: var(--br-l);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .5s ease, opacity .5s ease, filter .5s ease;
  filter: brightness(.72) saturate(.65);
  opacity: .5;
  transform: scale(.93);
  transform-origin: center center;
}
.ba-card.active {
  filter: brightness(1) saturate(1);
  opacity: 1;
  transform: scale(1);
  cursor: default;
}

/* Image track inside card */
.ba-card-track {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  aspect-ratio: 16 / 10;
}
.ba-card-slide {
  min-width: 100%; width: 100%; flex-shrink: 0;
  height: 100%;
}
.ba-card-slide img {
  width: 100%; height: 100%;
  display: block; object-fit: cover;
  border-radius: var(--br-l);
}

/* Label pills (bottom of card) — same as STN */
.ba-card-controls {
  position: absolute;
  bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .6rem;
  pointer-events: auto;
  direction: rtl;
}
.ba-label {
  padding: .5rem 1.6rem;
  border-radius: 10rem;
  font-family: var(--ff-gen, sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fc-main, #333);
  transition: all .3s ease;
  white-space: nowrap;
}
.ba-label.active {
  background: rgba(255,255,255,.88);
  border-color: #755e5e;
  color: #755e5e;
  box-shadow: 0 2px 12px rgba(117,94,94,.18);
}
.ba-label:hover:not(.active) {
  background: rgba(255,255,255,.65);
  border-color: rgba(117,94,94,.4);
}

/* Arrows (reuse style from STN/proj) */
.ba-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--fc-main, #333);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .25s ease; padding: 0;
}
.ba-carousel-arrow.prev { left: .8rem; }
.ba-carousel-arrow.next { right: .8rem; }
.ba-carousel-arrow:hover {
  background: rgba(255,255,255,.9); border-color: #755e5e; color: #755e5e;
  transform: translateY(-50%) scale(1.1);
}
.ba-carousel-dots {
  display: flex; justify-content: center; gap: .8rem; margin-top: 1.6rem;
}
.ba-carousel-dot {
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid #ccc; background: transparent;
  cursor: pointer; transition: all .3s ease; padding: 0;
}
.ba-carousel-dot.active { background: #755e5e; border-color: #755e5e; }

/* Responsive */
@media (max-width: 768px) {
  .ba-section { padding-block: 4rem 3rem; }
  .ba-carousel-wrap { --ba-card-w: 82; }
  .ba-card-controls { bottom: .8rem; gap: .4rem; }
  .ba-label { font-size: 1.1rem; padding: .4rem 1.2rem; }
}
@media (max-width: 480px) {
  .ba-section { padding-block: 3rem 2rem; }
  .ba-carousel-wrap { --ba-card-w: 88; }
}

/* ── PROJECT CAROUSEL ────────────────────── */
.projectSlidersSection {
  width: 100%; padding-block: 16rem 10rem; padding-inline: var(--tmpl-ip, 1rem);
  background: var(--bg-1); display: flex; flex-direction: column;
  align-items: center; gap: 6rem; direction: rtl;
}
.projectSlidersSection .heading {
  font-size: clamp(2.4rem, 4vw, 4.4rem); text-align: center;
  margin-bottom: .6rem;
}
.proj-lifestyle-sub {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 400;
  font-style: italic;
  color: var(--act-col, #755e5e);
  text-align: center;
  letter-spacing: .06em;
  direction: ltr;
}

/* Carousel wrapper */
.proj-carousel-wrap {
  --pc-card-w: 76;
  width: 100%;
  max-width: calc(var(--tmpl-max-col-w) * 2 + var(--tmpl-ig));
  position: relative;
  direction: ltr;
}
.proj-carousel-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}
.proj-carousel-track {
  display: flex;
  gap: 1.4rem;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* Project card */
.proj-card {
  flex: 0 0 calc(var(--pc-card-w) * 1%);
  min-width: 0;
  border-radius: var(--br-l);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .5s ease, opacity .5s ease, filter .5s ease;
  filter: brightness(.72) saturate(.65);
  opacity: .5;
  transform: scale(.93);
  transform-origin: center center;
}
.proj-card.active {
  filter: brightness(1) saturate(1);
  opacity: 1;
  transform: scale(1);
}

/* Heading overlay (project name) */
.proj-card-heading {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,0) 100%);
  color: var(--fc-main, #222);
  font-family: var(--ff-head, serif);
  font-size: clamp(1.8rem, 2.8vw, 3.2rem);
  font-weight: 600;
  text-align: center;
  padding: 1.8rem 1.4rem 3.4rem;
  direction: ltr;
  pointer-events: none;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Image track inside card */
.proj-card-track {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  aspect-ratio: 16 / 10;
}
.proj-card-slide {
  min-width: 100%; width: 100%;
  flex-shrink: 0;
  height: 100%;
}
.proj-card-slide img {
  width: 100%; height: 100%;
  display: block; object-fit: cover;
  border-radius: var(--br-l);
}

/* Arrows */
.proj-carousel-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--fc-main, #333);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  padding: 0;
}
.proj-carousel-arrow.prev { left: .8rem; }
.proj-carousel-arrow.next { right: .8rem; }
.proj-carousel-arrow:hover {
  background: rgba(255,255,255,.9);
  border-color: #755e5e;
  color: #755e5e;
  transform: translateY(-50%) scale(1.1);
}
.proj-carousel-arrow:active { transform: translateY(-50%) scale(.94); }

/* Image arrows inside each card */
.proj-img-arrow {
  position: absolute;
  bottom: 1.2rem;
  z-index: 6;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.proj-card.active .proj-img-arrow {
  opacity: .85;
  pointer-events: auto;
}
.proj-img-arrow.prev { left: calc(50% - 3.2rem); }
.proj-img-arrow.next { right: calc(50% - 3.2rem); }
.proj-img-arrow:hover {
  background: rgba(0,0,0,.6);
  border-color: #fff;
  transform: scale(1.12);
}
.proj-img-arrow:active { transform: scale(.9); }

/* Dots */
.proj-carousel-dots {
  display: flex;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.4rem;
  direction: ltr;
}
.proj-carousel-dot {
  width: .9rem; height: .9rem;
  border-radius: 50%;
  background: var(--bg-2, #C4B5B5);
  border: none; cursor: pointer; padding: 0;
  transition: all .3s ease;
}
.proj-carousel-dot.active {
  background: var(--act-col, #755e5e);
  transform: scale(1.4);
}

/* Mobile */
@media screen and (max-width: 768px) {
  .proj-carousel-wrap { --pc-card-w: 82; }
  .proj-carousel-track { gap: .8rem; }
  .proj-card-heading {
    font-size: clamp(1.4rem, 4.2vw, 2.2rem);
    padding: 1.2rem .8rem 2.4rem;
  }
  .proj-carousel-arrow { width: 2.8rem; height: 2.8rem; }
  .proj-carousel-arrow svg { width: 14px; height: 14px; }
  .proj-carousel-arrow.prev { left: .3rem; }
  .proj-carousel-arrow.next { right: .3rem; }
  .proj-img-arrow { width: 2.2rem; height: 2.2rem; bottom: .8rem; }
  .proj-img-arrow.prev { left: calc(50% - 2.6rem); }
  .proj-img-arrow.next { right: calc(50% - 2.6rem); }
  .proj-img-arrow svg { width: 11px; height: 11px; }
  .projectSlidersSection { padding-block: 10rem; }
}

/* ═══ BA Lightbox (light background, before/after navigation) ═══ */
.baLightbox {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.baLightbox.open { opacity: 1; pointer-events: auto; }
.baLb-overlay {
  position: absolute; inset: 0;
  background: rgba(250, 248, 245, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.baLb-img {
  position: relative;
  max-width: 88vw; max-height: 78vh;
  object-fit: contain;
  border-radius: var(--br-l, 2.4rem);
  box-shadow: 0 8px 48px rgba(117, 94, 94, .18);
  z-index: 2;
  transition: opacity .3s ease;
}
.baLb-close {
  position: absolute; top: 1.4rem; right: 1.8rem;
  z-index: 3;
  background: rgba(117, 94, 94, .08);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(117, 94, 94, .15);
  color: var(--fc-main, #303030);
  font-size: 2.4rem; line-height: 1;
  width: 3.8rem; height: 3.8rem;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.baLb-close:hover { background: rgba(117, 94, 94, .18); transform: scale(1.1); }
.baLb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 4.2rem; height: 4.2rem;
  border-radius: 50%;
  border: 1.5px solid rgba(117, 94, 94, .2);
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(8px);
  color: var(--fc-main, #303030);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.baLb-arrow.prev { left: 1.8rem; }
.baLb-arrow.next { right: 1.8rem; }
.baLb-arrow:hover {
  background: var(--act-col, #755e5e); color: #fff;
  border-color: var(--act-col, #755e5e);
  transform: translateY(-50%) scale(1.1);
}
.baLb-controls {
  position: absolute; bottom: 5rem;
  left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; gap: .6rem;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
  padding: .4rem; border-radius: 10rem;
}
.baLb-tab {
  padding: .7rem 2rem; border: none; border-radius: 10rem;
  background: transparent;
  font-family: var(--ff-gen, sans-serif); font-size: 1.4rem; font-weight: 700;
  color: var(--fc-main, #303030); cursor: pointer;
  transition: all .2s;
}
.baLb-tab:hover:not(.active) { background: rgba(117, 94, 94, .08); }
.baLb-tab.active {
  background: var(--act-col, #755e5e); color: #fff;
  box-shadow: 0 2px 8px rgba(117, 94, 94, .25);
}
.baLb-counter {
  position: absolute; bottom: 2rem;
  left: 50%; transform: translateX(-50%);
  z-index: 3;
  font-family: var(--ff-gen, sans-serif); font-size: 1.3rem;
  font-weight: 600; color: #999;
}
@media (max-width: 640px) {
  .baLb-arrow { width: 3.4rem; height: 3.4rem; }
  .baLb-arrow.prev { left: .8rem; }
  .baLb-arrow.next { right: .8rem; }
  .baLb-close { top: .8rem; right: .8rem; width: 3.2rem; height: 3.2rem; font-size: 2rem; }
  .baLb-img { max-width: 96vw; max-height: 72vh; border-radius: 1.2rem; }
  .baLb-controls { bottom: 4rem; }
  .baLb-tab { padding: .6rem 1.4rem; font-size: 1.2rem; }
}

/* ═══ Lightbox ═══ */
.projLightbox {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.projLightbox.open {
  opacity: 1; pointer-events: auto;
}
.projLightbox-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.projLightbox-img {
  position: relative;
  max-width: 90vw; max-height: 85vh;
  object-fit: contain;
  border-radius: var(--br-l, 1.2rem);
  box-shadow: 0 8px 60px rgba(0,0,0,.5);
  z-index: 2;
  transition: opacity .3s ease;
}
.projLightbox-close {
  position: absolute; top: 1.2rem; right: 1.6rem;
  z-index: 3;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 2.4rem; line-height: 1;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.projLightbox-close:hover {
  background: rgba(255,255,255,.3);
  transform: scale(1.1);
}
.projLightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 4rem; height: 4rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  padding: 0;
}
.projLightbox-arrow.prev { left: 1.6rem; }
.projLightbox-arrow.next { right: 1.6rem; }
.projLightbox-arrow:hover {
  background: rgba(255,255,255,.3);
  transform: translateY(-50%) scale(1.1);
}
.projLightbox-counter {
  position: absolute; bottom: 1.6rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,.8);
  font-family: var(--ff-gen, sans-serif);
  font-size: 1.4rem;
  letter-spacing: .08em;
  direction: ltr;
}

@media screen and (max-width: 640px) {
  .projLightbox-arrow { width: 3.2rem; height: 3.2rem; }
  .projLightbox-arrow.prev { left: .6rem; }
  .projLightbox-arrow.next { right: .6rem; }
  .projLightbox-close { top: .8rem; right: .8rem; width: 3rem; height: 3rem; font-size: 2rem; }
  .projLightbox-img { max-width: 96vw; max-height: 80vh; border-radius: .8rem; }
}

/* ── LAYOUT SYSTEMS ──────────────────────── */
div.layout, section.section {
  padding-block: var(--tmpl-sec-pb); width: 100vw;
  overflow: hidden; background-color: var(--bg-1);
}
.layout.one { padding-inline: var(--tmpl-ip); }
.layout.one .first { display: flex; justify-content: center; }
.layout.two {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--tmpl-ig); padding-inline: var(--tmpl-ip); direction: ltr;
}
.layout.two .first { justify-self: end; }
.layout.two .first, .layout.two .second { max-width: var(--tmpl-max-col-w); direction: ltr; width: 100%; }
.layout.two .second { justify-self: start; height: 100%; }

:is(.layout.two.feel, .layout.two.gmc, .layout.two.dct, .layout.two.mtf) .text.column,
:is(.layout.two.feel, .layout.two.gmc, .layout.two.dct, .layout.two.mtf) .gridImageColumn {
  gap: var(--sp-xl); display: flex; flex-direction: column;
}
:is(.layout.two.feel, .layout.two.gmc, .layout.two.dct, .layout.two.mtf) .first { height: 100%; }
.layout.two.gmc .first { display: flex; justify-content: flex-end; }
.layout.two.gmc img.col { object-position: left; }
.layout.two.mtf .second { width: 100%; }
.layout.two.mtf .cta { min-height: 6rem; min-width: 20rem; }
.layout.two.time h2 { text-wrap: balance; }

/* Video section */
div.fsvc { padding-inline: var(--tmpl-ip); overflow: hidden; }
div.fsvc .first { display: flex; justify-content: center; }
div.fsvc video {
  aspect-ratio: 16 / 9; max-height: calc(var(--svh) - 2 * var(--tmpl-bp-l));
  border-radius: var(--br-l); overflow: hidden; width: 100%;
}

/* ══════════════════════════════════════════
   INTRO SECTION — Company Introduction
   ══════════════════════════════════════════ */
.intro-section {
  padding-block: 8rem 6rem;
  padding-inline: var(--tmpl-ip);
  width: 100vw;
  background-color: var(--bg-1);
  display: flex;
  justify-content: center;
}
.intro-content {
  max-width: 90rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.8rem;
}

/* Brand name — Playfair Display, matching hero style */
.intro-brand {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.6rem, 6vw, 5.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--act-col, #2C5557);
  direction: ltr;
}
.intro-brand-art {
  color: #755e5e;
}

/* Subtitle — PropTech line (matches .heading size) */
.intro-subtitle {
  font-family: var(--ff-head, 'ivypresto-display', serif);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--act-col, #2C5557);
  font-weight: 500;
  direction: rtl;
}
.intro-subtitle strong {
  font-weight: 800;
  letter-spacing: .01em;
}

/* Decorative divider */
.intro-divider {
  width: 5rem;
  height: 3px;
  background: linear-gradient(90deg, transparent, #755e5e, transparent);
  border-radius: 3px;
}

.intro-section-2 {
  padding-block: 4rem 6rem;
}

/* Description paragraph (matches .description size) */
.intro-desc {
  font-size: 2.8rem;
  line-height: 1.7;
  color: #555;
  max-width: 90rem;
  width: 100%;
  direction: rtl;
  font-weight: 400;
}

/* Responsive */
@media (max-width: 768px) {
  .intro-section { padding-block: 5rem 4rem; }
  .intro-content { gap: 1.4rem; }
  .intro-divider { width: 4rem; }
}
@media (max-width: 480px) {
  .intro-section { padding-block: 4rem 3rem; }
  .intro-desc { font-size: 1.6rem; }
}

/* ── STORY SECTION (scroll-reveal paragraphs) ── */
.story-section {
  padding-block: 5rem 4rem;
  padding-inline: var(--tmpl-ip);
  width: 100vw;
  background-color: var(--bg-1);
  display: flex;
  justify-content: center;
}
.story-content {
  max-width: 64rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.4rem;
}
.story-block {
  font-size: 2rem;
  line-height: 1.8;
  color: #555;
  direction: rtl;
  font-weight: 400;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .7s ease, transform .7s ease;
}
.story-block.visible {
  opacity: 1;
  transform: translateY(0);
}
.story-block em {
  font-style: normal;
  font-weight: 700;
  color: var(--act-col, #755e5e);
  letter-spacing: .03em;
}
.story-block strong {
  color: #333;
  font-weight: 600;
}

/* Responsive: story */
@media (max-width: 768px) {
  .story-section { padding-block: 4rem 3rem; }
  .story-block { font-size: 1.7rem; gap: 1.8rem; }
}
@media (max-width: 480px) {
  .story-section { padding-block: 3rem 2rem; }
  .story-block { font-size: 1.45rem; }
}

/* ── STN SECTION (full-width slider) ──────── */
.stn-section {
  padding-block: var(--tmpl-sec-pb);
  padding-inline: var(--tmpl-ip);
  width: 100vw; overflow: hidden;
  background-color: var(--bg-1);
  display: flex; flex-direction: column;
  align-items: center; gap: 6rem;
}
.stn-text {
  max-width: 64rem;
  width: 100%;
  direction: rtl; text-align: center;
  display: flex; flex-direction: column; gap: 3rem;
  align-items: center;
}
.stn-text .heading {
  line-height: 1.2; font-size: var(--fs-xl);
  white-space: pre-wrap;
}
.stn-text .description {
  font-size: 2.8rem; line-height: 1.6;
  max-width: 64rem; text-wrap: var(--t-w);
}

/* ═══  STN CAROUSEL  ═══ */
/* Vars: --card-w = card width %, --card-gap = gap in rem */
.stn-sliders-wrap {
  --card-w: 76;
  --card-gap: 1.4rem;
  width: 100%;
  max-width: calc(var(--tmpl-max-col-w) * 2 + var(--tmpl-ig));
  position: relative;
  direction: ltr;
}

/* Viewport clips overflow so peeks show only partially */
.stn-carousel-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* Track — flex row, all cards side by side */
.stn-carousel-track {
  display: flex;
  gap: var(--card-gap);
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* ── Group card ── */
.stn-group-card {
  flex: 0 0 calc(var(--card-w) * 1%);
  min-width: 0;
  border-radius: var(--br-l);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .5s ease, opacity .5s ease, filter .5s ease;
  filter: brightness(.72) saturate(.65);
  opacity: .5;
  transform: scale(.93);
  transform-origin: center center;
}
.stn-group-card.active {
  filter: brightness(1) saturate(1);
  opacity: 1;
  transform: scale(1);
  cursor: default;
}

/* ── Image track inside card ── */
.stn-group-track {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  aspect-ratio: 16 / 10;
}
.stn-group-slide {
  min-width: 100%; width: 100%;
  flex-shrink: 0;
  height: 100%;
}
.stn-group-slide img {
  width: 100%; height: 100%;
  display: block; object-fit: cover;
  border-radius: var(--br-l);
}

/* ── Heading overlay ── */
.stn-group-heading {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,0) 100%);
  color: var(--fc-main, #222);
  font-family: var(--ff-head, serif);
  font-size: clamp(1.8rem, 2.8vw, 3.2rem);
  font-weight: 600;
  text-align: center;
  padding: 1.8rem 1.4rem 3.4rem;
  direction: rtl;
  pointer-events: none;
  letter-spacing: .02em;
  line-height: 1.3;
}

/* ── Label pills (bottom of card) ── */
.stn-group-controls {
  position: absolute;
  bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .6rem;
  pointer-events: auto;
  direction: rtl;
}
.stn-group-controls .stn-label {
  padding: .45rem 1.3rem;
  border-radius: 10rem;
  font-family: var(--ff-gen, sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fc-main, #333);
  transition: all .3s ease;
  white-space: nowrap;
}
.stn-group-controls .stn-label.active {
  background: rgba(255,255,255,.88);
  border-color: #755e5e;
  color: #755e5e;
  box-shadow: 0 2px 12px rgba(117,94,94,.18);
}
.stn-group-controls .stn-label:hover:not(.active) {
  background: rgba(255,255,255,.65);
  border-color: rgba(117,94,94,.4);
}

/* ── Arrows ── */
.stn-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--fc-main, #333);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  padding: 0;
}
.stn-carousel-arrow.prev { left: .8rem; }
.stn-carousel-arrow.next { right: .8rem; }
.stn-carousel-arrow:hover {
  background: rgba(255,255,255,.9);
  border-color: #755e5e;
  color: #755e5e;
  transform: translateY(-50%) scale(1.1);
}
.stn-carousel-arrow:active { transform: translateY(-50%) scale(.94); }

/* ── Dots ── */
.stn-carousel-dots {
  display: flex;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.4rem;
  direction: ltr;
}
.stn-carousel-dot {
  width: .9rem; height: .9rem;
  border-radius: 50%;
  background: var(--bg-2, #C4B5B5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .3s ease;
}
.stn-carousel-dot.active {
  background: var(--act-col, #755e5e);
  transform: scale(1.4);
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .stn-sliders-wrap { --card-w: 82; --card-gap: .8rem; }
  .stn-group-heading {
    font-size: clamp(1.4rem, 4.2vw, 2.2rem);
    padding: 1.2rem .8rem 2.4rem;
  }
  .stn-group-controls { bottom: .8rem; gap: .35rem; }
  .stn-group-controls .stn-label {
    font-size: 1rem;
    padding: .35rem .8rem;
  }
  .stn-carousel-arrow { width: 2.8rem; height: 2.8rem; }
  .stn-carousel-arrow svg { width: 14px; height: 14px; }
  .stn-carousel-arrow.prev { left: .3rem; }
  .stn-carousel-arrow.next { right: .3rem; }
  .stn-carousel-dots { margin-top: 1rem; }
}

/* Bottom row: 2 images side by side */
.stn-bottom-row {
  width: 100%;
  max-width: calc(var(--tmpl-max-col-w) * 2 + var(--tmpl-ig));
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}
.stn-bottom-row picture {
  overflow: hidden; border-radius: var(--br-l);
}
.stn-bottom-row picture img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--br-l);
}
@media screen and (max-width: 600px) {
  .stn-bottom-row { grid-template-columns: 1fr; }
}

/* Closing paragraph below bottom row */
.stn-closing {
  width: 100%;
  max-width: 64rem;
  font-family: var(--ff-gen, "Nunito Sans", sans-serif);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--fc-main, #303030);
  direction: rtl;
  text-align: center;
  margin-bottom: 4rem;
  text-wrap: var(--t-w);
}
.stn-closing strong {
  font-weight: 700;
  color: var(--act-col, #755e5e);
}

/* ── DCT SECTION ──────────────────────────── */
.layout.two.dct .gridImageColumn {
  display: flex; flex-direction: column; gap: var(--sp-xl);
}
.layout.two.dct .gridImageColumn figure {
  --offset: 0%; display: flex; flex-direction: column-reverse; gap: var(--sp-xs);
  transition: transform 1s ease, opacity 1s ease;
  transform: translate3d(var(--offset), 0, 0); opacity: 0;
}
.layout.two.dct .gridImageColumn.animated figure { opacity: 1; }
.layout.two.dct .gridImageColumn.animated figure:first-child { --offset: 0; }
.layout.two.dct .gridImageColumn.animated figure:last-child { --offset: 0; }
.layout.two.dct .gridImageColumn figure figcaption {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-md);
  direction: rtl; text-align: right;
}
.layout.two.dct .gridImageColumn figure img {
  object-fit: contain; align-self: baseline; width: 100%; height: auto;
  border-radius: var(--br-l);
}
.layout.two.dct .gridImageColumn figure:first-child { --offset: -100%; }
.layout.two.dct .gridImageColumn figure:last-child { --offset: 100%; }

/* ── A2KEY SECTION ────────────────────────── */
.a2key {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--tmpl-bp) var(--tmpl-ip); gap: 2rem;
  overflow: hidden;
}
.a2key .heading {
  display: grid; grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr 1fr; justify-items: center; align-items: center;
  max-width: 66rem; direction: ltr;
}
.a2key .heading .first { grid-column: 1 / -1; }
.a2key .heading em { font-style: italic; }
.a2key .heading .arrowSvg { max-width: 16.8rem; }
.a2key .tag { max-width: 68rem; min-height: 12.5rem; }
@media screen and (max-width: 600px) { .a2key .heading svg { max-width: 6rem; } }
.section .tag {
  font-size: 2.2rem; text-align: center; line-height: 1.4;
  white-space: pre-wrap; text-wrap: var(--t-w); direction: rtl;
}

/* ── GROUP GALLERY (v3 – proper sizing & no jump) ── */
.groupGallery {
  --sgh: clamp(30rem, 72vh, 1080px);
  --sgih: calc(var(--sgh) * .75);
  --pad: 10rem; --n-pad: calc(var(--pad) * -1);
  --np-bw: 8rem; --np-bh: 4.8rem;
  direction: ltr; display: flex; position: relative; align-items: center;
  justify-content: center;
  margin-block: var(--tmpl-bp);
  width: 100%;
}
.groupGallery .itemsContainer {
  display: flex; height: var(--sgh);
  width: calc(var(--sgh) * 1.778);
  max-width: 90vw;
  position: relative; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Each gallery card */
.groupGallery .itemsContainer > .item {
  height: var(--sgih);
  width: calc(var(--sgih) * 1.778);
  max-width: 80vw;
  position: absolute;
  transition: all .4s cubic-bezier(.25,.1,.25,1);
  border-radius: var(--br-l); overflow: hidden; cursor: pointer;
  will-change: transform, opacity, height, width;
}

/* Figure holds all images stacked via CSS Grid */
.groupGallery .itemsContainer > .item figure {
  display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr;
  background-color: var(--bg-3); width: 100%; height: 100%;
}
.groupGallery .itemsContainer > .item figure img {
  grid-row: 1; grid-column: 1; object-fit: cover; object-position: center;
  transition: opacity .5s ease; width: 100%; height: 100%;
  pointer-events: none;
}
.groupGallery .itemsContainer > .item figure img.in { opacity: 1; z-index: 1; }
.groupGallery .itemsContainer > .item figure img.out { opacity: 0; z-index: 0; }

/* Gallery overlay */
.groupGallery .itemsContainer > .item .overlay {
  background: linear-gradient(180deg, #0000 80.17%, #0000004d), linear-gradient(180deg, #0000004d, #0000 29.06%), transparent;
  inset-block-start: 0; position: absolute; display: flex; flex-direction: column;
  width: 100%; height: 100%; z-index: 2;
  pointer-events: none;
}
.groupGallery .itemsContainer > .item.active .overlay { pointer-events: auto; }
.groupGallery .itemsContainer > .item .overlay h3 {
  text-align: center; font-size: var(--fs-lg); padding-block-start: 2rem; color: var(--fc-alt);
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.groupGallery .itemsContainer > .item .overlay .picker {
  margin: 0; border: none; display: flex; padding: 0;
  width: 100%; justify-content: center; margin-block: auto 4rem; height: 4rem;
}
.groupGallery .itemsContainer > .item .overlay .picker .items {
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
}
.groupGallery .itemsContainer > .item .overlay .picker .pickerLabel {
  width: 14rem; height: 3rem; display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 1.2rem; font-weight: 700; user-select: none;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  background: #ffffff1a; color: var(--fc-alt);
  border: .1rem solid transparent; border-radius: var(--br-s);
  transition: all .2s ease-in; padding: var(--sp-xs) var(--sp-md); cursor: pointer;
  pointer-events: auto;
}
.groupGallery .itemsContainer > .item .overlay .picker .pickerLabel:hover,
.groupGallery .itemsContainer > .item .overlay .picker .pickerLabel.checked { border-color: currentColor; }
.groupGallery .itemsContainer > .item.toggles .overlay .picker .pickerLabel { width: 4rem; }

/* Gallery states – active card is full height, others are smaller and offset */
.groupGallery .itemsContainer > .item.active {
  z-index: 3; opacity: 1;
  height: var(--sgh);
  width: calc(var(--sgh) * 1.778);
  max-width: 80vw;
  transform: translate3d(0, 0, 0);
}
.groupGallery .itemsContainer > .item.stackStart,
.groupGallery .itemsContainer > .item.stackEnd { z-index: 1; opacity: .7; }
.groupGallery .itemsContainer > .item.stackStart.far,
.groupGallery .itemsContainer > .item.stackEnd.far { opacity: 0; pointer-events: none; }
.groupGallery .itemsContainer > .item.stackStart { transform: translate3d(var(--n-pad), 0, 0); }
.groupGallery .itemsContainer > .item.stackEnd { transform: translate3d(var(--pad), 0, 0); }

/* Gallery prev/next */
.groupGallery .galleryNav {
  background: none; border: none; cursor: pointer; position: absolute;
  color: var(--fc-main); width: var(--np-bw); height: var(--np-bh);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; z-index: 10; transition: all .2s ease-in;
  opacity: .7;
}
.groupGallery .galleryNav:hover, .groupGallery .galleryNav:focus-within { color: var(--act-col); opacity: 1; }
.groupGallery .galleryNav.prev { left: var(--sp-lg); transform: rotateY(180deg); }
.groupGallery .galleryNav.next { right: var(--sp-lg); }
.groupGallery .galleryNav.hidden { opacity: 0; pointer-events: none; }

@media screen and (min-width: 1920px) and (min-height: 1080px) { .groupGallery { --pad: 24rem; } }
@media screen and (max-width: 1466px) { .groupGallery { --sgh: 50vmin; --pad: 6rem; } }
@media (max-width: 912px) {
  .groupGallery { --pad: 4rem; }
  .groupGallery .itemsContainer { width: 80vw; max-width: 80vw; }
  .groupGallery .itemsContainer > .item,
  .groupGallery .itemsContainer > .item.active { max-width: 75vw; width: 75vw; }
}
@media (max-width: 500px) {
  .groupGallery { --pad: 1rem; --np-bw: 4rem; }
  .groupGallery .itemsContainer { width: 72vw; max-width: 72vw; }
  .groupGallery .itemsContainer > .item,
  .groupGallery .itemsContainer > .item.active { max-width: 68vw; width: 68vw; }
  .groupGallery .galleryNav { padding: 0; }
  .groupGallery .galleryNav svg { width: 100%; }
}

/* ── FTD (Benefits) SECTION ───────────────── */
.section.ftd, .section.team {
  padding-inline: var(--tmpl-ip); padding-block: 16rem 10rem; gap: 5rem;
}
.section.ftd .heading, .section.team .heading { max-width: 100rem; text-align: center; direction: rtl; }
.section.ftd .tag, .section.team .tag {
  max-width: 100rem; text-align: center; text-wrap: var(--t-w);
  padding-block-end: 3rem;
}
.section.ftd {
  display: flex; flex-direction: column; align-items: center;
}

/* ── FTD RISING GRAPH ──────────────────────── */
.ftd-graph-wrap {
  width: 100%; max-width: 92rem; margin: 0 auto;
  direction: ltr; /* graph reads left-to-right */
}
.ftd-graph-container {
  position: relative; width: 100%;
}
.ftd-graph-svg {
  width: 100%; height: auto; display: block;
}

/* Animated line drawing */
.ftd-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: ftdDrawLine 2.5s ease-out forwards;
}
@keyframes ftdDrawLine {
  to { stroke-dashoffset: 0; }
}

/* Dots */
.ftd-dot, .ftd-dot-inner {
  opacity: 0;
  animation: ftdDotAppear .5s ease forwards;
}
@keyframes ftdDotAppear {
  0% { opacity: 0; transform: scale(0); }
  70% { transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

/* Dashed vertical lines */
.ftd-dash {
  opacity: 0;
  animation: ftdFadeIn .6s ease forwards;
  animation-delay: inherit;
}
@keyframes ftdFadeIn {
  to { opacity: 1; }
}

/* ── MILESTONE CARDS (all above graph) ───── */
.ftd-milestones-top {
  position: relative; width: 100%;
  min-height: 16rem;
  margin-bottom: 0;
}

.ftd-milestone {
  position: absolute;
  left: var(--ms-left);
  transform: translateX(-50%);
  bottom: 0;
  width: clamp(17rem, 22vw, 26rem);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  direction: rtl; text-align: center;
  opacity: 0;
  animation: ftdMsAppear .6s ease forwards;
}

@keyframes ftdMsAppear {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.ftd-ms-num {
  flex-shrink: 0;
  width: 3.6rem; height: 3.6rem;
  display: flex; align-items: center; justify-content: center;
  background: #28a745; color: #fff;
  border-radius: 50%;
  font-size: 1.6rem; font-weight: 800;
  box-shadow: 0 3px 12px rgba(40,167,69,.35);
}
.ftd-ms-text {
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  line-height: 1.5; color: var(--act-col, #755e5e);
  font-weight: 600;
  max-width: 24rem;
}

/* ── FTD RESPONSIVE ──────────────────────── */
@media screen and (max-width: 1240px) {
  .ftd-milestone { width: clamp(14rem, 19vw, 22rem); }
  .ftd-ms-text { font-size: clamp(1.4rem, 1.7vw, 1.8rem); }
  .ftd-ms-num { width: 2.8rem; height: 2.8rem; font-size: 1.2rem; }
  .ftd-milestones-top { min-height: 14rem; }
}
@media screen and (max-width: 768px) {
  .section.ftd { padding-block: 10rem 6rem; }
  /* Stack milestones vertically on mobile */
  .ftd-graph-container { display: flex; flex-direction: column; gap: 0; }
  .ftd-graph-svg { order: 1; }
  .ftd-milestones-top {
    position: relative; order: 2;
    display: flex; flex-direction: column; gap: 2.4rem;
    min-height: unset; padding: 2rem var(--tmpl-ip-s, 1rem);
  }
  .ftd-milestones-top { margin-bottom: 0; }
  .ftd-milestone {
    position: relative; left: unset; transform: none;
    bottom: unset;
    width: 100%; max-width: 100%;
    flex-direction: row; align-items: flex-start; text-align: right;
    animation: ftdMsMobile .5s ease forwards;
  }
  @keyframes ftdMsMobile {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .ftd-ms-text { max-width: 100%; font-size: 1.4rem; }
}

/* ── TEAM SECTION ─────────────────────────── */
.section.team {
  --m-h: 60vh; --m-i-w: calc(100vw - 2 * var(--tmpl-ip));
  display: flex; flex-direction: column; align-items: center; justify-items: center;
}
.section.team .tag { max-width: 100rem; }
.section.team .track {
  direction: ltr; display: flex; flex-wrap: nowrap; overflow: auto;
  max-width: var(--m-i-w); gap: var(--sp-3xl);
  padding-block: var(--sp-3xl) var(--sp-xl);
  scroll-behavior: smooth; scroll-snap-type: x mandatory;
}
.section.team .track .item { scroll-snap-align: start; max-width: var(--m-i-w); }
@media screen and (min-width: 769px) {
  .section.team { --m-h: 40rem; }
  .section.team .track { justify-content: center; flex-wrap: wrap; }
}
.section.team figure { text-align: center; }
.section.team figcaption { font-size: var(--fs-md); padding-block-start: var(--sp-md); }
.section.team figcaption strong { font-weight: 500; font-size: 1.8rem; line-height: 1.6; letter-spacing: revert; display: block; }
.section.team figure picture, .section.team img {
  border-radius: var(--br-l); overflow: hidden; height: var(--m-h);
  width: auto; aspect-ratio: 1 / 1.38; object-fit: cover;
}

/* ── CONTACT FORM ─────────────────────────── */
form.contactForm {
  display: grid;
  grid-template-areas: "h" "t" "n" "e" "p" "m" "s";
  grid-template-rows: repeat(5, auto) 1fr auto;
  justify-content: center; gap: var(--sp-md); position: relative; height: 100%;
  direction: rtl; text-align: right;
}
form.contactForm h2 {
  grid-area: h; line-height: 1.2; font-size: var(--fs-xl);
  white-space: pre-wrap; max-width: 60rem;
}
form.contactForm .tag { grid-area: t; font-size: 2.2rem; line-height: 1.4; white-space: pre-wrap; text-wrap: var(--t-w); }
form.contactForm input, form.contactForm textarea {
  background-color: var(--bg-3); border: .1rem solid transparent;
  transition: border-color .3s ease-in; position: relative;
  border-radius: var(--br-s); padding: var(--sp-md);
  color: var(--fc-main); font-size: var(--fs-md); outline: none;
}
form.contactForm input:focus, form.contactForm textarea:focus {
  border-color: var(--act-col);
}
form.contactForm input[name="name"], form.contactForm input[name="name"] + .assist { grid-area: n; }
form.contactForm input[name="email"], form.contactForm input[name="email"] + .assist { grid-area: e; }
form.contactForm input[name="phone"], form.contactForm input[name="phone"] + .assist { grid-area: p; }
form.contactForm textarea { grid-area: m; }
form.contactForm button { grid-area: s; justify-self: start; display: flex; justify-content: center; height: var(--act-h); }
form.contactForm .assist { display: none; color: #d44; font-size: 1.3rem; margin-top: -.4rem; }
form.contactForm .assist.visible { display: block; }
form.contactForm input.invalid, form.contactForm textarea.invalid {
  border-color: #d44; background-color: rgba(221, 68, 68, 0.05);
}
form.contactForm input.invalid:focus, form.contactForm textarea.invalid:focus {
  border-color: #d44;
}
form.contactForm > * { transition: opacity .3s ease-in; }
form.contactForm.completed > * { opacity: 0; }
form.contactForm.completed > .completed { opacity: 1; }
form.contactForm .completed {
  z-index: 10; padding: inherit; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  grid-row: 1 / -1; grid-column: 1; gap: var(--sp-md);
  background-color: var(--bg-2); box-shadow: 0 0 1rem #0000001a;
  border-radius: var(--br-l); color: var(--act-col);
}
form.contactForm .completed h3 {
  line-height: 1.2; font-size: 8rem; white-space: pre-wrap;
  max-width: 60rem; text-align: center;
}
@media screen and (max-width: 1080px) {
  form.contactForm h2 { font-size: var(--fs-lg); letter-spacing: var(--ls-md); }
  form.contactForm p { font-size: var(--fs-md); }
}

/* ── SOCIAL ───────────────────────────────── */
.social { display: flex; align-items: center; gap: var(--sp-xs); }
.social a { display: flex; }

/* ── FOOTER ───────────────────────────────── */
.footer {
  --s-w: 49rem;
  padding-inline: var(--nb-space); border-block-start: currentColor solid .1rem;
  min-height: 20rem; display: grid; align-items: center; justify-items: center;
  grid-template-areas: "l s n"; grid-template-columns: var(--s-w) 1fr var(--s-w);
  grid-template-rows: repeat(3, auto); position: relative;
  padding-block-end: 4rem;
}
.footer h2, .footer > .logoSignature { grid-area: l; }
.footer h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: var(--ls-md); }
.footer > .logoSignature { color: var(--act-col); grid-area: l; justify-self: start; text-decoration: none; }
.footer .addendum {
  grid-column: 1 / -1; justify-self: center;
  display: flex; flex-direction: column; align-items: center;
  gap: .6rem; direction: ltr; text-align: center;
  padding-block: 1.5rem 0;
  width: 100%;
  order: 10;
}
.addendum-brand {
  display: inline-flex; align-items: baseline; gap: .3rem;
  position: relative;
}
.addendum-name {
  font-family: var(--ff-head, "Playfair Display", serif);
  font-size: 3.2rem; font-weight: 700; letter-spacing: .04em;
  color: var(--act-col, #755e5e);
}
.addendum-lifestyle {
  font-family: "Dancing Script", cursive;
  font-size: 2.6rem; font-weight: 600;
  color: var(--act-col, #755e5e);
  opacity: 0;
  transform: translateY(1.2rem) rotate(-6deg);
  animation: lifestyleSlideUp 1s cubic-bezier(.25,.46,.45,.94) forwards;
  animation-play-state: paused;
  margin-inline-start: .2rem;
  position: relative;
  top: .1rem;
  display: inline-block;
}
/* Trigger animation when footer scrolls into view (JS adds .in-view) */
.footer.in-view .addendum-lifestyle {
  animation-play-state: running;
}
@keyframes lifestyleSlideUp {
  0%   { opacity: 0; transform: translateY(1.2rem) rotate(-6deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(-3deg); }
}
.addendum-tagline {
  font-family: var(--ff-gen, "Nunito Sans", sans-serif);
  font-size: 1.6rem; font-weight: 500;
  color: var(--fc-main, #303030); opacity: .7;
  direction: rtl; letter-spacing: .02em;
}
@media (max-width: 768px) {
  .addendum-name { font-size: 2.4rem; }
  .addendum-lifestyle { font-size: 2rem; }
  .addendum-tagline { font-size: 1.3rem; }
}
.footer .newsLetter { grid-area: n; display: flex; align-items: center; justify-self: end; gap: var(--sp-md); }
.footer .newsLetter.completed { flex-direction: column; gap: var(--sp-xs); font-size: 1.4rem; }
.footer .social { grid-area: s; }
.footer .legal {
  display: inline-flex; justify-content: center; user-select: none;
  position: absolute; inset-block-end: var(--sp-md); inset-inline-start: var(--nb-space);
}
.footer .legal a, .footer .legal .copyright {
  font-size: 1rem; text-transform: uppercase; letter-spacing: var(--ls-md);
}
.footer .legal a {
  text-decoration: none; color: var(--fc-main); margin-inline-start: var(--sp-md);
}
.footer .legal a:focus-within, .footer .legal a:hover {
  text-decoration: underline; text-underline-offset: var(--sp-xs);
}

@media screen and (max-width: 1280px) {
  .footer { display: flex; justify-content: space-between; flex-wrap: wrap; height: 20rem; }
  .footer .addendum { align-self: center; width: 100%; }
  .footer .legal { inset-block-end: 3.2rem; }
}
@media screen and (max-width: 912px) {
  .footer {
    flex-direction: column; align-items: start;
    padding-block: var(--tmpl-bp); height: unset; gap: var(--sp-md);
  }
  .footer .legal { position: static; flex-direction: column-reverse; align-items: start; gap: var(--sp-md); }
  .footer .legal a { margin-inline-start: 0; }
  .footer .newsLetter { flex-direction: column; align-items: start; }
}

/* ── PARALLAX REVEAL ──────────────────────── */
.parallax { backface-visibility: hidden; }
.parallax.revealSide, .parallax.revealUpCircle, .parallax.revealRect {
  backface-visibility: unset; transition: clip-path .3s ease;
}
.parallax.revealSide {
  --s: clamp(0%, calc(var(--parallax-y) * 80%), 50%);
  clip-path: polygon(calc(50% - var(--s)) 0, 100% 0, calc(var(--s) + 50%) 100%, 0% 100%);
}
.parallax.revealUpCircle {
  --s: clamp(20%, calc(var(--parallax-y) * 110%), 100%);
  --t: clamp(50%, calc((1 - var(--parallax-y)) * 120%), 100%);
  clip-path: circle(var(--s) at 50% var(--t));
}
.parallax.revealRect {
  --s: clamp(0%, calc((1 - var(--parallax-y)) * 50%), 50%);
  clip-path: inset(0 var(--s) round var(--br-l));
}
@media (prefers-reduced-motion) {
  .parallax.revealSide, .parallax.revealUpCircle, .parallax.revealRect { clip-path: none; }
}

/* ── RESPONSIVE (MOBILE/PORTRAIT) ─────────── */
@media screen and (max-width: 912px) {
  .hero.lp .background img { clip-path: inset(2rem 2rem round var(--br-l)); }
  nav.landing { --n-h: 12rem; }
  nav.landing .logoSignature { --w: 24rem; }
  nav.landing.fullOut .logoSignature, nav.landing.partial .logoSignature { inset-block-start: var(--sp-md); --w: 18rem; }
  nav.landing.fullIn .langSelector, nav.landing.fullIn a.press { transform: translate3d(0, 2rem, 0); }
  nav.landing.fullIn .logoSignature { inset-block-start: 8rem; }
  nav.landing.partial .signatureLogo .sigBy,
  nav.landing.partial .signatureLogo .sigName,
  nav.landing.partial .signatureLogo .sigAnd,
  nav.landing.partial .signatureLogo .sigBig,
  nav.landing.fullOut .signatureLogo .sigBy,
  nav.landing.fullOut .signatureLogo .sigName,
  nav.landing.fullOut .signatureLogo .sigAnd,
  nav.landing.fullOut .signatureLogo .sigBig { font-size: 1.5rem; }

  .layout.two { display: flex; flex-direction: column; }
  .layout.two.dct .gridImageColumn figure img { height: unset; }
  .layout.two img.simp, .layout.two img.col { width: 100%; }
  .layout.two.mtf { justify-items: center; }
  .layout.two.mtf, .layout.two.value, .layout.two.time { flex-direction: column-reverse; }
  .layout.two.mtf .text.column { align-items: center; }
  .layout.two.mtf .cta { text-align: center; }

  form.contactForm { grid-template-columns: calc(100vw - 2 * var(--nb-space)); }
  form.contactForm .completed { grid-column: 1; grid-row: 1 / 8; }
  form.contactForm .completed .tag { text-align: center; }

  img.sqr { height: 100%; }
}

@media screen and (min-width: 1921px) {
  .layout.two .second, .layout.two .first { width: 100%; }
  .layout.two .second img, .layout.two .second picture, .layout.two .second figure,
  .layout.two .first img, .layout.two .first picture, .layout.two .first figure { width: 100%; max-height: unset; }
}

/* ── 3D VIEWER IFRAME CONTAINER (Phase 3 placeholder) ── */
.iframe-viewer-container {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  background: var(--bg-3);
  border-radius: var(--br-l);
}
.iframe-viewer-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.iframe-viewer-container.aspect-16-9 { aspect-ratio: 16 / 9; }
.iframe-viewer-container.aspect-4-3 { aspect-ratio: 4 / 3; }
.iframe-viewer-container.fullscreen { height: 100vh; }

/* ── KEYFRAME ANIMATIONS ──────────────────── */
@keyframes slideUp {
  0% { opacity: 0; max-height: 0rem; transform: translate3d(0, 12rem, 0); }
  100% { max-height: 100vh; opacity: 1; transform: translateZ(0); }
}

@keyframes kb {
  0%, 47.5%, 52.5%, 100% { transform: scale(1) translate(0); }
  50% { transform: scale(1.25) translate(-2rem, 1.5rem); }
}

/* logoExpandB/C removed — signature logo uses no SVG animations */

@keyframes heartbeat {
  0%, 20%, 50%, 100% { transform: scale(1); }
  10%, 30% { transform: scale(1.2); }
}

@keyframes trin {
  0%, 6.25%, 10%, 13.75%, 17.5%, 21.25% { transform: rotate3d(0,0,1,0); }
  7.1875%, 10.9375%, 14.6875%, 18.4375%, 22.1875% { transform: rotate3d(0,0,1,15deg); }
  8.125%, 11.875%, 15.625%, 19.375%, 23.125% { transform: rotate3d(0,0,1,0); }
  9.0625%, 12.8125%, 16.5625%, 20.3125%, 24.0625% { transform: rotate3d(0,0,1,-15deg); }
  25%, 100% { transform: rotate3d(0,0,1,0); }
}

@keyframes heart {
  0%, 40%, 50%, 60%, 100% { transform: scale(1); }
  45%, 55% { transform: scale(1.04); }
}

@keyframes fabPulseGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 0 var(--fab-glow-color); }
  50%      { box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 18px 3px var(--fab-glow-color); }
}