/* ==========================================================================
   3D service cards — one physical object per service, floating in the hero.
   .svc-stage  the camera (perspective; light vars --L, --night follow the video time)
   .svc        a card, centred on --ax/--ay; svc-cards.js writes its pose (--px … --po)
   .svc__obj   the object. Each layer sits at "--z" (unitless) × --zk px, so turning the card shows its build.
   Rules for 3D: groups (.g) keep preserve-3d and never get opacity/filter/overflow/clip/mask (those flatten);
   only leaves fade, through --po (pose) × --a (layer).
   ========================================================================== */

@property --hov { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --up  { syntax: '<number>'; inherits: true; initial-value: 1; }

.svc-stage {
  --dir: 1; --depth: 1;
  --L: 242 181 104;          /* scene light (rgb triplet) */
  --night: 0;                /* 0 day → 1 night */
  position: absolute; inset: 0;
  perspective: 1500px; perspective-origin: 50% 48%;
  pointer-events: none;
}
[dir="rtl"] .svc-stage { --dir: -1; }

.svc {
  --cw: clamp(188px, 14vw, 240px); --ar: 1.36; --ch: calc(var(--cw) * var(--ar));
  --rad: 22px; --shape: var(--rad);
  --edge: 150 196 172;                /* glass edge tint: thick glass reads green */
  --brx: 4; --bry: -10; --brz: -.6;   /* resting three-quarter view, so the thickness reads without any motion */
  position: absolute; left: var(--ax, 50%); top: var(--ay, 50%);
  width: var(--cw); height: var(--ch);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  color: var(--white); font-family: var(--font-body); text-align: start;
}
.svc[hidden] { display: none; }

.svc__obj {
  --zk: calc(var(--depth) * (1 + var(--hov) * .45));
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform:
    translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), calc(var(--pz, 0) * 1px))
    rotateX(calc((var(--prx, 0) + var(--brx)) * 1deg))
    rotateY(calc((var(--pry, 0) + var(--bry) * var(--dir)) * 1deg))
    rotateZ(calc((var(--prz, 0) + var(--brz) * var(--dir)) * 1deg))
    scale(var(--ps, 1));
  transition: --hov .7s var(--ease-out);
}
.svc__obj:has(.svc__cta:is(:hover, :focus-visible)) { --hov: 1; }

.svc .g { transform-style: preserve-3d; }
.svc__obj > *, .svc .g > * { position: absolute; }
.svc .g > :not(.g) { opacity: calc(var(--po, 1) * var(--a, 1)); }
.svc__obj > :not(.g) { transform: translate3d(var(--ox, 0px), var(--oy, 0px), calc(var(--z, 0) * var(--zk) * 1px)); }

/* ---------- shared build ---------- */
.svc__shadow { --z: -72; --a: .85; inset: 14% 4% -12%; border-radius: 40%; background: rgb(0 3 12 / .6); filter: blur(26px); }
/* rear pane: dark smoked glass that frosts the city behind it (seen wherever the media does not cover) */
.svc__back {
  --z: -16; inset: 0; border-radius: var(--shape);
  background: linear-gradient(160deg, rgb(28 46 72 / .5), rgb(6 12 26 / .7));
  box-shadow: inset 0 0 0 1px rgb(var(--edge) / .2), inset 0 1px 0 rgb(255 255 255 / .18);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
/* the glass edge: stacked hairline rings read as a solid, faintly green slab when the card turns */
.svc__rim { --z: calc(var(--r) * -2); inset: 0; border-radius: var(--shape); border: 1px solid rgb(var(--edge) / calc(.5 - var(--r) * .05)); }

.svc__media { --z: -8; inset: 0; border-radius: var(--shape); overflow: hidden; background: #0b1424; }
.svc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* frosted panel behind the text only (a blur over the whole face would blur the photo) */
.svc__frost {
  --z: -1; inset: 50% 0 0; border-radius: 0 0 var(--rad) var(--rad);
  -webkit-backdrop-filter: blur(12px) saturate(135%); backdrop-filter: blur(12px) saturate(135%);
  -webkit-mask: linear-gradient(transparent, #000 42%); mask: linear-gradient(transparent, #000 42%);
}
.svc__face {
  --z: 0; inset: 0; border-radius: var(--shape);
  background:
    linear-gradient(218deg, rgb(var(--L) / .2), rgb(var(--L) / 0) 36%),                     /* sun / moon side (upper right) */
    linear-gradient(180deg, rgb(4 9 22 / calc(var(--night) * .18)), rgb(4 9 22 / calc(var(--night) * .18))),
    linear-gradient(180deg, rgb(7 13 27 / .04) 0%, rgb(7 13 27 / .12) 40%, rgb(6 11 24 / .72) 74%, rgb(5 10 22 / .9) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), inset 0 0 0 1px rgb(255 255 255 / .13), inset -1px 0 0 rgb(var(--L) / .35);
}
.svc__index {
  --z: 16; top: 14px; inset-inline-start: 16px;
  font-size: 12px; font-weight: 650; line-height: 1; letter-spacing: .18em; font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / .8); text-shadow: 0 1px 8px rgb(0 0 0 / .4);
}
.svc__text { --z: 22; inset-inline: 16px; bottom: 15px; display: grid; justify-items: start; gap: 2px; }
.svc__icon {
  display: grid; place-items: center; width: 25px; height: 25px; margin-bottom: 7px; border-radius: 50%;
  color: var(--green); border: 1px solid rgb(131 205 32 / .5); background: rgb(6 12 24 / .38);
}
.svc__icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc__name {
  font-family: var(--font-display); font-size: clamp(16.5px, 1.18vw, 20px); font-weight: 760; line-height: 1.3;
  text-shadow: 0 1px 16px rgb(0 0 0 / .35); overflow-wrap: anywhere;
}
html[lang="en"] .svc__name { font-weight: 520; line-height: 1.1; letter-spacing: -.012em; font-variation-settings: "opsz" 72, "SOFT" 40; }
.svc__sub { font-size: 12.5px; line-height: 1.55; color: rgb(255 255 255 / .78); padding-inline-end: 40px; text-wrap: balance; }
.svc__name { text-wrap: balance; }
/* per-service progress: a hairline the scroll fills while this card is in front */
.svc__bar { display: block; justify-self: stretch; height: 1px; margin-top: 10px; margin-inline-end: 42px; background: rgb(255 255 255 / .16); overflow: hidden; }
.svc__bar i { display: block; height: 100%; background: var(--green); transform: scaleX(var(--prog, 0)); transform-origin: 0 50%; }
[dir="rtl"] .svc__bar i { transform-origin: 100% 50%; }

.svc__cta {
  --z: 34; inset-inline-end: 13px; bottom: 12px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%; color: var(--white); pointer-events: auto;
  background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 18px -8px rgb(0 0 0 / .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .4s, border-color .4s, scale .7s var(--ease-out);
}
.svc__cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: rotate .7s var(--ease-out); }
[dir="rtl"] .svc__cta svg { transform: scaleX(-1); }
.svc__cta:is(:hover, :focus-visible) { scale: 1.12; background: rgb(131 205 32 / .22); border-color: var(--green); }
.svc__cta:is(:hover, :focus-visible) svg { rotate: 45deg; }
[dir="rtl"] .svc__cta:is(:hover, :focus-visible) svg { rotate: -45deg; }

/* highlight plane: a reflection that slides as the card turns (--ryn = current yaw in degrees) */
.svc__sheen {
  --z: 40; inset: 0; border-radius: var(--shape); pointer-events: none;
  background: linear-gradient(104deg, transparent 40%, rgb(255 255 255 / .1) 47%, rgb(var(--L) / .1) 50%, transparent 58%) no-repeat;
  background-size: 320% 100%; background-position: calc(50% + var(--ryn, 0) * 3.4%) 0;
}

/* ==========================================================================
   01 Georgia — organic glass: a deep window into the mountains
   ========================================================================== */
.svc--organic {
  --ar: 1.34; --bez: 11px; --bry: -8;
  --shape: 44px 24px 40px 22px / 34px 22px 44px 26px;
  --shape-in: 33px 13px 29px 11px / 23px 11px 33px 15px;
}
.svc--organic .svc__back { --z: -32; }
.svc--organic .svc__media { --z: -28; inset: var(--bez); border-radius: var(--shape-in); }
.svc--organic .svc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 46%, rgb(4 10 20 / .55) 72%, rgb(4 10 20 / .86)); }
.svc__tunnel { --z: calc(var(--t) * -3.6); inset: var(--bez); border-radius: var(--shape-in); border: 1px solid rgb(var(--edge) / .2); }
.svc--organic .svc__face {
  background: none; border: var(--bez) solid rgb(12 22 40 / .66);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 1px 0 rgb(255 255 255 / .4), 0 0 0 1px rgb(255 255 255 / .16), 0 -1px 0 rgb(var(--L) / .5);
}
.svc--organic .svc__frost { display: none; }
.svc--organic .svc__text { inset-inline: calc(var(--bez) + 14px); bottom: calc(var(--bez) + 12px); }
.svc--organic .svc__cta { inset-inline-end: calc(var(--bez) + 9px); bottom: calc(var(--bez) + 9px); }
.svc--organic .svc__index { top: calc(var(--bez) + 14px); inset-inline-start: calc(var(--bez) + 16px); }

/* ==========================================================================
   02 Education — three offset plates: elevation drawing, photo, glass text panel
   ========================================================================== */
.svc--layered { --ar: 1.34; --bry: -13; }
.svc__plate { inset: 0; border-radius: var(--rad); }
.svc__plate--far {
  --z: -50; --ox: calc(var(--dir) * 22px); --oy: -26px;
  padding: 9% 11% 30%; color: rgb(131 205 32 / .6);
  background: linear-gradient(160deg, rgb(16 30 52 / .94), rgb(6 12 26 / .96));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 1px 0 rgb(255 255 255 / .3);
}
.svc__plate--far svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .9; vector-effect: non-scaling-stroke; }
.svc__plate--far .dim { stroke: rgb(255 255 255 / .3); stroke-dasharray: 2 3; }
.svc__plate--mid {
  --z: -32; --ox: calc(var(--dir) * 11px); --oy: -13px;
  background: rgb(160 200 190 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24), inset 0 1px 0 rgb(255 255 255 / .4);
}
.svc--layered .svc__media { --z: -12; }
.svc--layered .svc__rim { --z: calc(-10 - var(--r) * 1.6); }
.svc--layered .svc__back { --z: -21; }
.svc--layered .svc__frost { --z: 2; inset: 50% 9px 9px; border-radius: 16px; -webkit-mask: none; mask: none; }
.svc--layered .svc__face {
  --z: 3; inset: 50% 9px 9px; border-radius: 16px;
  background: linear-gradient(218deg, rgb(var(--L) / .2), transparent 40%), linear-gradient(180deg, rgb(8 16 32 / .84), rgb(5 10 22 / .93));
}
.svc--layered .svc__text { --z: 26; inset-inline: 23px; bottom: 21px; }
.svc--layered .svc__cta { --z: 38; inset-inline-end: 19px; bottom: 18px; }

/* ==========================================================================
   03 Healthcare — tall and calm, one fine ECG line in front of the photo
   ========================================================================== */
.svc--tall { --cw: clamp(170px, 12.2vw, 208px); --ar: 1.72; --rad: 24px; --edge: 170 214 222; --bry: -7; --brx: 3; }
.svc--tall .svc__img { object-position: 50% 20%; }
.svc--tall .svc__frost { inset: 56% 0 0; }
.svc__ecg { --z: 18; left: -7%; top: 47%; width: 114%; height: 15%; overflow: visible; }
.svc__ecg path { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.svc__ecg .base { stroke: rgb(226 255 238 / .92); stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px rgb(131 205 32 / .9)); }
.svc__ecg .run { stroke: #F4FFE6; stroke-width: 2.2; stroke-dasharray: .05 .95; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 5px #9AF21E); }
.svc.is-active .svc__ecg .base { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease-io) .2s; }
.svc.is-active .svc__ecg .run { opacity: 1; animation: ecg-run 3s linear 2.4s infinite; }
@keyframes ecg-run { to { stroke-dashoffset: 0; } }

/* ==========================================================================
   04 Vehicle services — strong perspective, light trails, service chips at staggered depths
   ========================================================================== */
.svc--dynamic { --cw: clamp(206px, 15.6vw, 260px); --ar: 1.1; --brx: 6; --bry: -20; --brz: -1.8; }
.svc--dynamic .svc__img { object-position: 30% 50%; }
.svc__trails { --z: 18; left: -18%; top: 4%; width: 136%; height: 70%; overflow: visible; }
[dir="rtl"] .svc__trails { scale: -1 1; }
.svc__trails path { fill: none; stroke-linecap: round; }
.svc__trails .b { stroke-width: 1; opacity: .4; }   /* the long-exposure streak */
.svc__trails .t { stroke-width: 1.8; stroke-dasharray: 150 230; stroke-dashoffset: 380; animation: trail 3s linear infinite paused; }
.svc__trails .t2 { stroke-width: 2.6; animation-duration: 2.5s; animation-delay: -.9s; }
.svc__trails .t3 { stroke-width: 1.2; animation-duration: 3.6s; animation-delay: -1.7s; }
.svc__trails .t4 { stroke-width: 2; animation-duration: 2.8s; animation-delay: -.3s; }
.svc.is-active .svc__trails .t { animation-play-state: running; }
@keyframes trail { to { stroke-dashoffset: 0; } }
.svc__tags {
  top: 12%; inset-inline-end: -16px; margin: 0; padding: 0; list-style: none;
  display: grid; justify-items: end; gap: 6px;
  transform: translateZ(calc(24 * var(--zk) * 1px));
}
.svc .svc__tags li {
  position: relative; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 650; line-height: 1.5;
  background: rgb(8 16 30 / .62); border: 1px solid rgb(255 255 255 / .22); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transform: translate3d(calc(var(--n) * var(--dir) * -8px), 0, calc(var(--n) * 7 * var(--zk) * 1px));
}
.svc__tags li:first-child { border-color: rgb(131 205 32 / .6); }

/* ==========================================================================
   05 Real estate — a green city block as a miniature model (the reference card of the system)
   Plate axes: x east, y south, z up. Faces stand up with rotateX/rotateY about their touching edge;
   trees and pins are billboards (lifted, then the plate rotation undone so they face the camera).
   ========================================================================== */
.svc--map { --cw: clamp(198px, 15vw, 250px); --ar: 1.3; --m: calc(var(--cw) * .86); --brx: 5; --bry: -10; --edge: 160 206 176; }
.svc--map .svc__media, .svc--map .svc__frost { display: none; }
.svc--map .svc__face {
  background:
    linear-gradient(218deg, rgb(var(--L) / .16), transparent 36%),
    linear-gradient(180deg, rgb(10 30 28 / .08) 0%, rgb(8 24 24 / .3) 46%, rgb(6 18 20 / .86) 74%, rgb(5 14 16 / .94) 100%);
}
.svc__echo {
  --z: -34; --ox: calc(var(--dir) * 13px); --oy: 15px;
  inset: 0; border-radius: var(--rad); background: rgb(14 32 34 / .34);
  box-shadow: inset 0 0 0 1px rgb(var(--edge) / .32), inset 0 1px 0 rgb(255 255 255 / .2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.svc__glow { --z: 3; left: 6%; top: 12%; width: 88%; height: 42%; border-radius: 50%; background: rgb(0 6 4 / .55); filter: blur(16px); }
/* the tilted plate reaches back by half its size × sin(tilt) ≈ .42 m: lift the model at least that far,
   or the glass planes slice through the back of the block */
.svc__map { left: 50%; top: 31%; width: 0; height: 0; transform: translateZ(calc(var(--m) * .44 + 14px * var(--zk))); }
.map {
  --tilt: 57; --turn: -42; --up: .05;
  --grass: color-mix(in srgb, #5E9A3A, #142A20 calc(var(--night) * 85%));
  --pave: color-mix(in srgb, #E2DCCB, #3A4150 calc(var(--night) * 72%));
  left: calc(var(--m) / -2); top: calc(var(--m) / -2); width: var(--m); height: var(--m);
  transform: rotateX(calc(var(--tilt) * 1deg)) rotateZ(calc(var(--turn) * 1deg));
  transition: --up 1.8s var(--ease-out) .25s;
}
.svc.is-active .map { --up: 1; }
/* earth slab: stacked slices, grass edge on top, soil below */
.map__slab { inset: 0; border-radius: 18%; transform: translateZ(calc(var(--s) * -1.8px)); background: color-mix(in srgb, #4C6A35, #1E1813 calc((var(--s) - 1) * 15%)); }
.map__plate {
  inset: 0; border-radius: 18%; overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / .07) 0 .8px, transparent 1.3px) 0 0 / 5px 5px,
    linear-gradient(140deg, color-mix(in srgb, var(--grass), #fff 10%), var(--grass) 60%, color-mix(in srgb, var(--grass), #000 18%));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2);
}
.map__plate svg { display: block; width: 100%; height: 100%; }
.map__plate .shade ellipse { fill: rgb(0 18 4 / .32); }
.map__plate .ring { fill: none; stroke: var(--pave); stroke-width: 10; }
.map__plate .curb { fill: none; stroke: rgb(255 255 255 / .45); stroke-width: .6; stroke-dasharray: 3 3; }
.map__plate .walk { fill: none; stroke: var(--pave); stroke-width: 3.5; stroke-linecap: round; }
.map__plate .plaza, .map__plate .court { fill: color-mix(in srgb, var(--pave), #fff 12%); }
.map__plate .pool { fill: color-mix(in srgb, #41A6DA, #123E66 calc(var(--night) * 70%)); stroke: rgb(255 255 255 / .55); stroke-width: .8; }
.map__plate .lamp circle { fill: #FFC66B; opacity: var(--night); filter: drop-shadow(0 0 2px #FFB347); }

.bx {
  --H: calc(var(--bh) * var(--m));
  left: calc(var(--bx) * var(--m)); top: calc(var(--by) * var(--m));
  width: calc(var(--bw) * var(--m)); height: calc(var(--bd) * var(--m));
}
.bx__t { inset: 0; transform: translateZ(var(--H)); }
.bx__s { left: 0; top: 100%; width: 100%; height: var(--H); transform-origin: 50% 0; transform: rotateX(90deg); }
.bx__n { left: 0; bottom: 100%; width: 100%; height: var(--H); transform-origin: 50% 100%; transform: rotateX(-90deg); }
.bx__e { left: 100%; top: 0; width: var(--H); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); }
.bx__w { right: 100%; top: 0; width: var(--H); height: 100%; transform-origin: 100% 50%; transform: rotateY(90deg); }
/* glass tower: curtain-wall grid; rises from the lawn when the card arrives; windows light up at night */
.bx--tower { --H: calc(var(--bh) * var(--m) * var(--up)); }
.bx--tower > i {
  --lit: rgb(255 202 128 / calc(var(--night) * .85));
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .3) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 1px, transparent 1px 7px),
    radial-gradient(circle, var(--lit) 0 1px, transparent 1.6px) 0 0 / 7px 6px,
    linear-gradient(180deg, color-mix(in srgb, #6B93A6, #1B2C3F calc(var(--night) * 70%)), color-mix(in srgb, #2A4357, #0D1826 calc(var(--night) * 70%)));
}
.bx--tower .bx__w { filter: brightness(.72); }
.bx--tower .bx__n, .bx--tower .bx__e { filter: brightness(.6); }
.bx--tower .bx__t { background: color-mix(in srgb, #D5DDE0, #59657A calc(var(--night) * 65%)); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55), inset 0 0 0 5px rgb(0 0 0 / .08); }
/* stone annex */
.bx--annex > i {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(60 50 40 / .28) 3px 4.5px),
    radial-gradient(circle, rgb(255 202 128 / calc(var(--night) * .9)) 0 1px, transparent 1.6px) 0 1px / 6px 4.5px,
    color-mix(in srgb, #E2D8C4, #4A4A55 calc(var(--night) * 68%));
}
.bx--annex .bx__w { filter: brightness(.78); }
.bx--annex .bx__n, .bx--annex .bx__e { filter: brightness(.66); }
.bx--annex .bx__t { background: color-mix(in srgb, #F1ECE1, #616574 calc(var(--night) * 65%)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }

.tree {
  --sz: calc(var(--ts) * var(--m));
  --h: calc(92 + var(--tc) * 13);
  --l: calc(44% - var(--night) * 26%);
  left: calc(var(--tx) * var(--m) - var(--sz) / 2); top: calc(var(--ty) * var(--m) - var(--sz));
  width: var(--sz); height: var(--sz); border-radius: 50%; transform-origin: 50% 100%;
  transform: translateZ(calc(var(--sz) * .22)) rotateZ(calc(var(--turn) * -1deg)) rotateX(calc(var(--tilt) * -1deg));
  background: radial-gradient(circle at 36% 30%, hsl(var(--h) 58% calc(var(--l) + 20%)), hsl(var(--h) 46% var(--l)) 56%, hsl(var(--h) 52% calc(var(--l) - 17%)));
}

.map__pin {
  --pw: 20px; --ph: 28px;
  left: calc(var(--qx) * var(--m) - var(--pw) / 2); top: calc(var(--qy) * var(--m) - var(--ph)); width: var(--pw); height: var(--ph);
  transform-origin: 50% 100%;
  transform: translateZ(var(--qz)) rotateZ(calc(var(--turn) * -1deg)) rotateX(calc(var(--tilt) * -1deg));
}
.map__pin svg { inset: 0; width: 100%; height: 100%; overflow: visible; }
.map__pin circle { fill: #fff; }
.map__pin--main { --pw: 26px; --ph: 36px; --qx: .595; --qy: .455; --qz: calc(.4 * var(--m) * var(--up) + 8px); }
.map__pin--main path { fill: #83CD20; stroke: #fff; stroke-width: 1.8; }
.map__pin--alt { --qx: .315; --qy: .26; --qz: calc(.13 * var(--m) + 5px); }
.map__pin--alt path { fill: #F2B33D; stroke: #fff; stroke-width: 1.6; }
.svc.is-active .map__pin--main svg { animation: pin-bob 3.2s ease-in-out infinite alternate; }
@keyframes pin-bob { to { translate: 0 -4px; } }
.map__label {
  top: 3px; inset-inline-start: calc(100% + 6px); white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1.5;
  background: rgb(6 14 16 / .8); border: 1px solid rgb(131 205 32 / .65); color: #fff;
}

/* ==========================================================================
   06 Shopping — studio light, a podium, three products at three depths
   ========================================================================== */
.svc--product { --ar: 1.34; --edge: 214 196 176; --bry: -9; }
.svc__studio {
  background:
    radial-gradient(70% 50% at 50% 14%, rgb(255 236 214 / .26), transparent 62%),
    linear-gradient(180deg, #2C2622 0%, #171313 64%, #0E0B0B 100%);
}
.svc--product .svc__face { background: linear-gradient(218deg, rgb(var(--L) / .16), transparent 36%), linear-gradient(180deg, transparent 0%, transparent 56%, rgb(10 8 8 / .82) 82%, rgb(8 6 6 / .92) 100%); }
.svc--product .svc__frost { inset: 64% 0 0; }
.svc__podium { --z: 8; left: 13%; top: 50%; width: 74%; height: auto; overflow: visible; }
.svc__drop { --z: 11; --a: .7; height: 6%; border-radius: 50%; background: rgb(0 0 0 / .7); filter: blur(7px); }
.svc__drop--1 { left: 34%; top: 51%; width: 34%; }
.svc__drop--2 { inset-inline-end: 12%; top: 54%; width: 20%; --a: .45; }
.svc__item { height: auto; filter: drop-shadow(0 16px 14px rgb(0 0 0 / .5)); }
.svc__item--1 { --z: 46; left: 31%; top: 13%; width: 38%; rotate: -7deg; }
.svc__item--2 { --z: 14; inset-inline-start: 7%; top: 27%; width: 31%; rotate: 9deg; }
.svc__item--3 { --z: 78; inset-inline-end: 4%; top: 38%; width: 27%; rotate: -15deg; }
.svc.is-active .svc__item--1 { animation: bob 5s ease-in-out infinite alternate; }
.svc.is-active .svc__item--3 { animation: bob 4.2s ease-in-out -1.2s infinite alternate; }
@keyframes bob { from { translate: 0 2px; } to { translate: 0 -6px; } }

/* ==========================================================================
   07 Interior design — blueprint behind, empty → designed room, architectural frame in front
   ========================================================================== */
.svc--frame { --ar: 1.32; --bry: -14; --brx: 5; }
/* the blueprint is a larger sheet behind the card: it shows around the edges and moves least when the card turns */
.svc__plan {
  --z: -44; --ox: calc(var(--dir) * -20px); --oy: 15px;
  left: -10%; top: -6%; width: 120%; height: 112%; overflow: visible; padding: 4%;
  color: rgb(131 205 32 / .8); background: rgb(8 22 40 / .62);
  border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(131 205 32 / .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.svc__plan path, .svc__plan circle { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.svc__plan .soft { stroke: rgb(255 255 255 / .45); }
.svc__plan .dim { stroke: rgb(255 255 255 / .3); stroke-dasharray: 2 3; }
.svc--frame .svc__media { --z: -10; top: -6%; height: 106%; }   /* the room escapes the card at the top */
.svc--frame .svc__rim, .svc--frame .svc__back { top: -6%; }
.svc__img--after { clip-path: inset(100% 0 0 0); }
.svc.is-active .svc__img--after { clip-path: inset(0); transition: clip-path 1.8s var(--ease-io) .8s; }
.svc__frame { --z: 20; left: 9%; top: 6%; width: 82%; height: 58%; overflow: visible; }
.svc__frame path { fill: none; stroke: rgb(255 255 255 / .8); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.svc__frame .in { stroke: rgb(131 205 32 / .85); }
.svc.is-active .svc__frame path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ease-io) .2s; }
.svc__dim {
  --z: 20; font: 650 9px/1 var(--font-latin); letter-spacing: .14em; color: rgb(255 255 255 / .72);
  padding: 2px 5px; border-radius: 3px; background: rgb(6 12 24 / .6);
}
.svc__dim--w { left: 50%; top: calc(6% - 8px); translate: -50% 0; }
.svc__dim--h { left: calc(91% - 12px); top: 33%; rotate: 90deg; }

/* ==========================================================================
   08 Marriage — warm light and two rings; the quietest card
   ========================================================================== */
.svc--elegant { --cw: clamp(182px, 13.6vw, 228px); --ar: 1.4; --edge: 226 198 150; --bry: -6; --brx: 3; }
.svc--elegant .svc__back { --z: -20; }
.svc__bokeh {
  --z: -14;
  background:
    radial-gradient(60% 40% at 50% 20%, rgb(255 210 150 / .22), transparent 70%),
    linear-gradient(172deg, #3A2A1E 0%, #1E1510 56%, #0F0A09 100%);
}
.svc__bokeh::before {
  content: ""; position: absolute; inset: -10%; filter: blur(5px); opacity: .9;
  background:
    radial-gradient(circle at 16% 22%, rgb(255 196 120 / .55) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 82% 16%, rgb(255 214 160 / .4) 0 5%, transparent 6%),
    radial-gradient(circle at 70% 44%, rgb(255 186 110 / .3) 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 26% 52%, rgb(255 222 170 / .25) 0 6%, transparent 7%),
    radial-gradient(circle at 90% 62%, rgb(255 200 130 / .22) 0 3%, transparent 4%);
}
.svc__cone { --z: 6; left: 14%; top: -2%; width: 72%; height: 66%; background: radial-gradient(50% 62% at 50% 0%, rgb(255 230 186 / .3), transparent 72%); }
.svc--elegant .svc__face {
  background: linear-gradient(218deg, rgb(255 226 180 / .14), transparent 36%), linear-gradient(180deg, rgb(30 20 14 / .04) 0%, rgb(20 13 10 / .2) 50%, rgb(14 9 8 / .86) 82%, rgb(12 8 7 / .94) 100%);
  box-shadow: inset 0 1px 0 rgb(255 232 196 / .5), inset 0 0 0 1px rgb(255 222 176 / .16);
}
.svc--elegant .svc__frost { inset: 60% 0 0; }
.svc--elegant .svc__icon { color: #E9C879; border-color: rgb(233 200 121 / .5); }
.svc--elegant .svc__name { font-weight: 380; font-size: clamp(19px, 1.4vw, 23px); }
html[lang="en"] .svc--elegant .svc__name { font-weight: 400; }
/* turned rings reach about one radius in depth: keep them clear of the glass */
.svc__rings { left: 50%; top: 33%; width: 0; height: 0; transform: translateZ(calc(var(--cw) * .2 + 12px * var(--zk))); }
.svc__spin { transform: rotateX(-12deg); animation: rings-sway 10s ease-in-out infinite alternate paused; }
.svc.is-active .svc__spin { animation-play-state: running; }
@keyframes rings-sway { from { rotate: y -22deg; } to { rotate: y 22deg; } }
.ring { --R: calc(var(--cw) * .19); left: calc(var(--R) * -1); top: calc(var(--R) * -1); width: calc(var(--R) * 2); height: calc(var(--R) * 2); }
.ring--a { transform: translateX(calc(var(--R) * -.44)) rotateY(62deg) rotateX(8deg); }
.ring--b { transform: translateX(calc(var(--R) * .44)) translateY(calc(var(--R) * .08)) rotateY(-56deg) rotateX(-14deg); }
/* a band = seven stacked gold rings (same trick as the glass edge) */
.ring > i {
  inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, #FBE7B0, #B98A3C 18%, #FFF2CC 34%, #8C6526 52%, #E8C67A 70%, #FFF0C4 84%, #FBE7B0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.4px));
  transform: translateZ(calc((var(--s) - 3) * 1.5px));
}
.ring > i:is(:first-child, :last-child) { --a: .95; filter: brightness(1.18); }

/* ==========================================================================
   Side instruments: service timeline (inline-end), sky dial (inline-start), phone meter.
   Both sit on the same dark glass, so they read over the bright afternoon city as well as at night.
   ========================================================================== */
.svc-ui { opacity: var(--ui-o, 1); transition: opacity .4s; }
.svc-nav, .svc-sky__case, .svc-sky__label, .svc-cue__text, .svc-meter {
  background: linear-gradient(160deg, rgb(14 24 46 / .56), rgb(4 10 24 / .44));
  border: 1px solid rgb(255 255 255 / .15);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 18px 40px -20px rgb(0 0 0 / .65);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}

/* ---------- service timeline ----------
   --k: the card in front (set by hero.js); --tp: 0 → 1 between the first and the last card's rest.
   The comet rides the rail with the scroll and sits on a service's dot exactly while that card rests;
   the pill jumps to the current entry with a small overshoot. */
.svc-nav {
  --row: 34px; --pad: 10px; --inset: 34px; --rail: 17px; --side: 1;
  position: absolute; z-index: 6; inset-inline-end: var(--gutter); top: 50%; transform: translateY(-50%);
  padding-block: var(--pad); padding-inline: var(--inset) 14px; border-radius: 22px; pointer-events: auto;
}
[dir="rtl"] .svc-nav { --side: -1; }
.svc-nav ol { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
.svc-nav li {
  height: var(--row); opacity: 0; translate: calc(var(--side) * 18px) 0;
  transition: opacity .45s, translate .7s var(--ease-out); transition-delay: calc(var(--i) * 45ms);
}
.hero.is-ui .svc-nav li { opacity: 1; translate: 0 0; }
.svc-nav button {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 0 12px 0 8px; border: 0; border-radius: 999px;
  background: none; cursor: pointer; color: rgb(255 255 255 / .68); white-space: nowrap; text-align: start;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: color .35s, translate .45s var(--ease-out);
}
[dir="rtl"] .svc-nav button { padding: 0 8px 0 12px; }
html[lang="fa"] .svc-nav button { font-size: 13px; letter-spacing: 0; text-transform: none; }
.svc-nav .n { font-size: 12px; letter-spacing: .1em; font-variant-numeric: tabular-nums; opacity: .65; transition: color .35s, opacity .35s; }
.svc-nav button:hover { color: #fff; translate: calc(var(--side) * -4px) 0; }
.svc-nav button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.svc-nav button[aria-current="step"] { color: #fff; font-weight: 700; }
html[lang="fa"] .svc-nav button[aria-current="step"] { font-weight: 760; }
.svc-nav button[aria-current="step"] .n { color: var(--green-hi); opacity: 1; }
/* the name catches a glint, in reading direction, each time it becomes current */
.svc-nav button[aria-current="step"] .t {
  background: linear-gradient(100deg, #fff 42%, #E2FFB0 50%, #fff 58%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nav-glint 1.4s var(--ease-out) .2s both;
}
[dir="rtl"] .svc-nav button[aria-current="step"] .t { animation-direction: reverse; }
@keyframes nav-glint { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* a dot on the rail per service: hollow ahead, green once passed */
.svc-nav__dot {
  --past: clamp(0, var(--k, 0) - var(--i), 1);
  position: absolute; top: 50%; inset-inline-start: calc(var(--rail) - var(--inset) - 3px);
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: rgb(131 205 32 / var(--past)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / calc(.6 - var(--past) * .6));
}
.svc-nav__rail {
  position: absolute; z-index: 2; inset-inline-start: calc(var(--rail) - 1px); top: calc(var(--pad) + var(--row) / 2);
  width: 2px; height: calc(var(--steps, 7) * var(--row)); border-radius: 2px; background: rgb(255 255 255 / .16);
  transform-origin: 50% 0; scale: 1 0; transition: scale 1s var(--ease-out) .15s;
}
.hero.is-ui .svc-nav__rail { scale: 1 1; }
.svc-nav__rail::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgb(131 205 32 / .3), var(--green)); transform-origin: 50% 0; transform: scaleY(var(--tp, 0));
}
.svc-nav__comet {
  position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  translate: 0 calc(var(--tp, 0) * var(--steps, 7) * var(--row));
  background: #F4FFE4; box-shadow: 0 0 0 3px rgb(131 205 32 / .4), 0 0 18px 4px rgb(131 205 32 / .75);
}
.svc-nav__comet::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgb(154 242 30 / .9);
  animation: comet-ping 2.2s var(--ease-out) infinite;
}
@keyframes comet-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.svc-nav__pill {
  position: absolute; z-index: 0; inset-inline: calc(var(--inset) - 4px) 8px; top: var(--pad); height: var(--row); border-radius: 999px;
  background: linear-gradient(90deg, rgb(131 205 32 / .24), rgb(131 205 32 / .05));
  box-shadow: inset 0 0 0 1px rgb(131 205 32 / .45), 0 0 20px -4px rgb(131 205 32 / .5);
  translate: 0 calc(var(--k, 0) * var(--row)); opacity: 0;
  transition: translate .75s cubic-bezier(.34, 1.56, .64, 1), opacity .5s .3s;
}
[dir="rtl"] .svc-nav__pill { background: linear-gradient(270deg, rgb(131 205 32 / .24), rgb(131 205 32 / .05)); }
.hero.is-ui .svc-nav__pill { opacity: 1; }

/* ---------- sky dial ----------
   --sky: hero scroll 0 → 1 (the orb's place on the track); --moon: 0 sun → 1 moon. The lit part of the track is
   the sky already passed; the label names the light we are in. Before the first scroll it carries the cue. */
.svc-sky {
  --len: clamp(170px, 30vh, 270px); --from: -1;
  position: absolute; z-index: 6; inset-inline-start: var(--gutter); top: 50%; transform: translateY(-50%);
  color: #fff; pointer-events: none;
}
[dir="rtl"] .svc-sky { --from: 1; }
/* the case: same glass as the timeline, so the two sides read as a pair */
.svc-sky__case {
  padding: 22px 19px; border-radius: 24px;
  opacity: 0; translate: calc(var(--from) * 16px) 0; transition: opacity .6s .2s, translate .9s var(--ease-out) .2s;
}
.hero.is-live .svc-sky__case { opacity: 1; translate: 0 0; }
.svc-sky__track {
  position: relative; width: 4px; height: var(--len); border-radius: 4px;
  background: linear-gradient(180deg, #FFD18A, #F39C6B 26%, #D96E98 48%, #8E6CCB 68%, #4563C8 84%, #2C4BA8);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .14), 0 0 16px rgb(0 0 0 / .3);
  transform-origin: 50% 0; scale: 1 0; transition: scale 1.2s var(--ease-out) .3s;
}
.hero.is-live .svc-sky__track { scale: 1 1; }
/* the sky still ahead stays dim */
.svc-sky__fill { position: absolute; inset: 0; border-radius: inherit; background: rgb(6 12 28 / .5); transform-origin: 50% 100%; transform: scaleY(calc(1 - var(--sky, 0))); }
.svc-sky__tick { position: absolute; left: 50%; top: 0; width: 12px; height: 1px; margin-left: -6px; background: rgb(255 255 255 / .75); translate: 0 calc(var(--at, 0) * var(--len)); }
.svc-sky__orb { position: absolute; left: 50%; top: 0; width: 24px; height: 24px; translate: -50% calc(var(--sky, 0) * var(--len) - 50%); }
.svc-sky__label {
  position: absolute; top: 50%; inset-inline-start: calc(100% + 22px); translate: 0 -50%;
  display: grid; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5;
}
html[lang="fa"] .svc-sky__label { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.svc-sky__label > span { grid-area: 1 / 1; opacity: 0; translate: 0 8px; transition: opacity .4s, translate .6s var(--ease-out); }
.svc-sky__label > span:has(~ .is-on) { translate: 0 -8px; }
.svc-sky__label > span.is-on { opacity: 1; translate: 0 0; }

/* sun → moon. The moon is the logo's crescent: lit from the lower left, shadow from the upper right */
.svc-orb { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; }
.svc-orb > i { position: absolute; inset: 0; border-radius: 50%; }
.svc-orb__sun {
  opacity: calc(1 - var(--moon, 0));
  background: radial-gradient(circle at 40% 38%, #FFF7E0, #FFCB73 52%, #F39A3C);
  box-shadow: 0 0 0 4px rgb(255 190 100 / .18), 0 0 22px 6px rgb(255 168 78 / .62);
}
.svc-orb__sun::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 214 150 / .8) 0 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62% 72%, transparent 74%); mask: radial-gradient(circle, transparent 60%, #000 62% 72%, transparent 74%);
  animation: sun-rays 16s linear infinite;
}
@keyframes sun-rays { to { rotate: 1turn; } }
.svc-orb__moon {
  opacity: var(--moon, 0); overflow: hidden;
  background: radial-gradient(circle at 36% 62%, #FFFBF0, #EFE5D3 55%, #D8CAB2);
  box-shadow: 0 0 22px 5px rgb(186 208 255 / .55);
}
.svc-orb__moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgb(16 32 78 / .9); translate: 30% -26%; }

/* the scroll cue, under the dial until the first scroll */
.svc-cue { position: absolute; top: calc(100% + 20px); inset-inline-start: 10px; display: flex; align-items: center; gap: 12px; margin: 0; white-space: nowrap; animation: cue-bob 1.8s ease-in-out infinite alternate; }
@keyframes cue-bob { to { translate: 0 5px; } }
.svc-cue__mouse { position: relative; flex: none; width: 22px; height: 32px; border: 1.5px solid rgb(255 255 255 / .9); border-radius: 12px; background: rgb(6 12 26 / .35); box-shadow: 0 0 14px rgb(0 0 0 / .3); }
.svc-cue__mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 7px; margin-left: -1px; border-radius: 2px; background: var(--green-hi); animation: cue-dot 2s var(--ease-io) infinite; }
@keyframes cue-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.svc-cue__text { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; }
html[lang="fa"] .svc-cue__text { font-size: 12.5px; letter-spacing: 0; text-transform: none; }

/* ---------- phones: a compact "03 / 08 · name" meter instead of the side instruments ---------- */
.svc-meter {
  position: absolute; z-index: 6; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: none; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--white); font-size: 12px; font-weight: 600; pointer-events: none;
}
[dir="rtl"] .svc-meter { padding: 7px 10px 7px 14px; }
.svc-meter .svc-orb { flex: none; width: 13px; height: 13px; }
.svc-meter .svc-orb__sun::before { inset: -5px; }
/* Persian digits are right-to-left numbers in the bidi algorithm: without an override "۰۳ / ۰۸" shows as "۰۸ / ۰۳" */
.svc-meter__count { direction: ltr; unicode-bidi: bidi-override; font-variant-numeric: tabular-nums; }
.svc-meter__n { color: var(--green); }
.svc-meter__bar { display: flex; gap: 3px; }
.svc-meter__bar i { position: relative; width: 12px; height: 2px; border-radius: 1px; background: rgb(255 255 255 / .25); overflow: hidden; }
.svc-meter__bar i::after { content: ""; position: absolute; inset: 0; background: var(--green); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
[dir="rtl"] .svc-meter__bar i::after { transform-origin: 100% 50%; }

/* ==========================================================================
   Responsive: less depth and fewer layers, not just a smaller card
   ========================================================================== */
@media (max-width: 1100px) {
  .svc-stage { --depth: .82; }
  .svc-nav { --row: 31px; }
}
@media (max-height: 720px) and (min-width: 768px) {
  .svc-nav { --row: 29px; --pad: 8px; }
}
@media (max-width: 767px) {
  .svc-stage { --depth: .62; perspective: 1100px; }
  .svc { --cw: min(56vw, 216px); --bry: -6; }
  .svc--dynamic { --cw: min(64vw, 246px); --bry: -10; }
  .svc--tall { --cw: min(48vw, 188px); }
  .svc--map { --cw: min(58vw, 226px); }
  .svc--elegant { --cw: min(54vw, 208px); }
  .svc__rim[data-x] { display: none; }
  .svc__frost, .svc__cta, .svc__tags li, .svc__echo, .svc__plan { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .svc__tags { inset-inline-end: -8px; }
  .svc-nav, .svc-sky { display: none; }
  .svc-meter { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .svc *, .svc *::before, .svc *::after { animation: none !important; }
  .map, .svc__img--after, .svc__frame path, .svc__ecg path { transition: none !important; }
}