/* ============================================================
   Windsor Key Real Estate — home page
   Poppins-led · Cormorant Garamond used sparingly for display
   ============================================================ */
:root{
  --ink:#131318; --ink-2:#1B1B22; --ink-3:#24242C;
  --panel:#33333D; --panel-2:#2A2A33;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.24);
  --white:#F5F4F2; --mute:#BCBCC4; --dim:#94949D;
  --red:#D11A2E; --red-br:#ED2740; --red-dp:#7E0C1C;
  --pad:clamp(1.25rem,5vw,5rem);
  --maxw:1320px;
  --sans:'Poppins',system-ui,-apple-system,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--ink); color:var(--white);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--red);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---- type ---- */
h1,h2,h3,h4{font-weight:500;line-height:1.08;letter-spacing:-.02em}
.serif{font-family:var(--serif);font-weight:300;letter-spacing:0}
.serif .ital,.ital{font-style:italic}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.72rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--red)}
.eyebrow--c{justify-content:center}
.lead{color:var(--mute);font-size:clamp(1rem,1.1vw,1.15rem);max-width:56ch}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:500;
  letter-spacing:.04em;padding:.95rem 1.6rem;border-radius:100px;transition:.4s var(--ease)}
.btn svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--solid{background:var(--red);color:#fff}
.btn--solid:hover{background:var(--red-br)}
.btn--ghost{border:1px solid var(--line-2);color:var(--white)}
.btn--ghost:hover{border-color:var(--white);background:rgba(255,255,255,.04)}
.btn--text{padding:.4rem 0;border-radius:0;color:var(--white)}
.btn--text::after{content:"";position:absolute}

/* ============ CURSOR (glass-on-hover) ============ */
@media (hover:hover) and (pointer:fine){
  *{cursor:none!important}
  .cursor{position:fixed;inset:0;z-index:9998;pointer-events:none}
  .cursor__dot{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;
    background:var(--white);transform:translate(-50%,-50%);transition:opacity .3s,width .3s,height .3s}
  .cursor__ring{position:fixed;top:0;left:0;width:78px;height:78px;border-radius:50%;
    transform:translate(-50%,-50%) scale(0);opacity:0;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(3px) saturate(1.3);-webkit-backdrop-filter:blur(3px) saturate(1.3);
    display:grid;place-items:center;
    transition:transform .45s var(--ease),opacity .35s var(--ease),background .35s}
  .cursor__label{font-size:.6rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
    color:var(--white);opacity:0;transition:opacity .3s}
  body.cur-hover .cursor__ring{transform:translate(-50%,-50%) scale(1);opacity:1}
  body.cur-hover .cursor__dot{opacity:0}
  body.cur-view .cursor__ring{background:rgba(255,255,255,.07)}
  body.cur-view .cursor__label{opacity:1}
}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ============ PRELOADER ============ */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--ink);
  display:grid;place-items:center;transition:opacity .7s ease,visibility .7s}
.preloader.done{opacity:0;visibility:hidden}
.pl__in{display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.pl__logo{width:128px;height:128px;object-fit:contain;opacity:0;animation:plIn 1s .1s var(--ease) forwards}
@keyframes plIn{to{opacity:1}}
.pl__bar{width:170px;height:2px;background:rgba(255,255,255,.12);overflow:hidden}
.pl__fill{display:block;height:100%;width:0;background:var(--red)}
.pl__meta{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}

/* grain */
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;
  justify-content:space-between;padding:.7rem var(--pad);
  border-bottom:1px solid transparent;
  transition:padding .45s var(--ease),background-color .45s ease,border-color .45s ease}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.55),transparent);
  opacity:1;transition:opacity .45s ease;pointer-events:none}
/* solid backdrop layer that fades in — no backdrop-filter flash */
.nav::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,14,18,.55),rgba(10,10,13,.35));
  opacity:0;transition:opacity .45s ease;pointer-events:none;
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
.nav.scrolled{padding:.55rem var(--pad);border-bottom-color:var(--line)}
.nav.scrolled::before{opacity:0}
.nav.scrolled::after{opacity:1}
.nav__logo{position:relative;z-index:2}
/* logo 2× — and it stays the SAME size on scroll (prevents the shrink glitch) */
.nav__logo img{width:112px;height:112px;object-fit:contain;transition:width .45s var(--ease),height .45s var(--ease)}
.nav.scrolled .nav__logo img{width:96px;height:96px}
.nav__links{display:flex;align-items:center;gap:2.2rem;position:relative;z-index:2}
.nav__link{font-size:.82rem;font-weight:400;letter-spacing:.02em;color:var(--white);position:relative;opacity:.85;transition:.3s}
.nav__link::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--red);transition:.35s var(--ease)}
.nav__link:hover{opacity:1}.nav__link:hover::after{width:100%}
.nav__cta{font-size:.8rem;font-weight:500;letter-spacing:.03em;padding:.6rem 1.3rem;border:1px solid var(--line-2);border-radius:100px;transition:.4s var(--ease)}
.nav__cta:hover{background:var(--red);border-color:var(--red)}
.nav__burger{display:none;position:relative;z-index:210;width:34px;height:20px}
.nav__burger span{position:absolute;left:0;width:100%;height:1.5px;background:var(--white);transition:.35s var(--ease)}
.nav__burger span:nth-child(1){top:2px}.nav__burger span:nth-child(2){top:9px}.nav__burger span:nth-child(3){top:16px}
body.drawer .nav__burger span:nth-child(1){top:9px;transform:rotate(45deg)}
body.drawer .nav__burger span:nth-child(2){opacity:0}
body.drawer .nav__burger span:nth-child(3){top:9px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:2000;background:#131318;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:1.1rem;padding:0 var(--pad);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility .4s}
body.drawer{overflow:hidden}
body.drawer .drawer{opacity:1 !important;visibility:visible !important;pointer-events:auto !important}
.drawer a{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,7vw,3.4rem);color:#F5F4F2;
  display:block;line-height:1.3;text-decoration:none}
.drawer a .accent{color:var(--red);font-style:italic}
body.drawer .nav__burger{z-index:2010}

/* ============ HERO ============ */
.hero{position:relative;background:#050506}
/* tall scroll track — height sets how much scrolling drives the video/panels */
.hero__track{height:500vh}                       /* 5 panels × 100vh of scroll */
.hero__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease}
.hero.playing .hero__video{opacity:1}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease;display:block}
.hero.playing .hero__canvas{opacity:1}
.hero__fallback{position:absolute;inset:0;
  background:
   radial-gradient(120% 90% at 70% 20%,rgba(209,26,46,.16),transparent 55%),
   radial-gradient(100% 80% at 20% 90%,rgba(60,70,120,.18),transparent 60%),
   linear-gradient(180deg,#0b0c12,#050506)}
/* ============================================================
   HERO abstract animated background (canvas — flowing mesh)
   Shows on panel 1; fades once video enters.
   ============================================================ */
.hero__pattern{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  opacity:1;transition:opacity .9s ease}
/* panels 2–5 (video playing): hide blobs + logo entirely */
.hero.playing .hero__pattern{opacity:0}
/* breathing dots pattern — subtle pulsing grid behind the aurora */
/* wave breathing pattern — flowing horizontal wave lines that pulse */
.hp-dots{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 95% 90% at 50% 50%,#000 40%,transparent 92%);
  mask-image:radial-gradient(ellipse 95% 90% at 50% 50%,#000 40%,transparent 92%)}
.hp-waves{position:absolute;inset:-10% -5%;width:110%;height:120%}
.hp-waves svg{width:100%;height:100%;display:block}
.hp-waves path{
  fill:none;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  transform-origin:center;
}
/* each wave layer breathes (scales + fades) on a staggered cycle */
.hp-wave-1{stroke:rgba(245,244,242,.14);animation:waveBreath 7s ease-in-out infinite}
.hp-wave-2{stroke:rgba(209,26,46,.16);animation:waveBreath 7s ease-in-out infinite 1.4s}
.hp-wave-3{stroke:rgba(245,244,242,.1);animation:waveBreath 7s ease-in-out infinite 2.8s}
.hp-wave-4{stroke:rgba(209,26,46,.12);animation:waveBreath 7s ease-in-out infinite 4.2s}
@keyframes waveBreath{
  0%,100%{ transform:scale(.92); opacity:.25; }
  50%    { transform:scale(1.06); opacity:.85; }
}
.hp-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;
  filter:blur(60px) saturate(1.35) contrast(1.05);
  transform:scale(1.15);opacity:.85}
/* logo-line motifs — sit BELOW the blobs (z-index 0) */
.hp-logolines{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hll{position:absolute;overflow:visible}
/* soft light-red base line — always visible along the whole outline */
.hll__base{
  stroke:rgba(237,39,64,.28);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hll--big .hll__base{ stroke:rgba(237,39,64,.34); stroke-width:1.4; }
.hll--sm  .hll__base{ stroke:rgba(237,39,64,.22); stroke-width:1; }

/* running light on top of the base line */
.hll__light{
  stroke:rgba(245,244,242,.24);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:120 900;
  stroke-dashoffset:1020;
  animation:hllRun var(--dur,8s) linear infinite;
  animation-delay:calc(var(--delay,0s) + var(--i,0) * -0.12s);
  filter:drop-shadow(0 0 5px rgba(209,26,46,.2));
}
.hll--big .hll__light{ stroke:rgba(255,255,255,.28); stroke-width:1.6; stroke-dasharray:160 1100; stroke-dashoffset:1260; }
.hll--mid .hll__light{ stroke:rgba(245,244,242,.22); }
.hll--sm  .hll__light{ stroke:rgba(200,200,206,.2); stroke-dasharray:90 700; stroke-dashoffset:790; }
@keyframes hllRun{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){ .hll__light{ animation:none; } }

.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,6,.35) 0%,rgba(5,5,6,.12) 40%,rgba(5,5,6,.35) 78%,rgba(5,5,6,.8) 100%)}
.hero__scrim::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 60%,transparent 55%,rgba(5,5,6,.45))}

.hero__stage{position:absolute;inset:0;z-index:3}
/* panels stacked, all fixed in place; JS fades opacity by scroll proximity — vertical only */
.hpanel{position:absolute;inset:0;display:flex;align-items:center;padding:0 var(--pad);
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);will-change:opacity,transform}
.hpanel.is-active{opacity:1;transform:none;pointer-events:auto}
.hpanel.is-prev{opacity:0;transform:translateY(-24px)}   /* left upward when scrolled past */
.hpanel .h-in{max-width:var(--maxw);margin:0 auto;width:100%;position:relative}
/* localized soft blur ONLY behind the text (readability) — not a full-bg blur */
.hpanel .h-in::before{content:"";position:absolute;z-index:-1;
  left:-6%;right:-6%;top:-14%;bottom:-14%;
  background:radial-gradient(60% 70% at 40% 50%,rgba(5,6,9,.45),rgba(5,6,9,.12) 70%,transparent 85%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:radial-gradient(65% 75% at 40% 50%,#000 45%,transparent 82%);
  mask-image:radial-gradient(65% 75% at 40% 50%,#000 45%,transparent 82%);
  border-radius:40px;pointer-events:none}
/* panel 1 has no video behind it → no blur plate needed */
.hp1 .h-in::before{display:none}
/* centred panels: shift the plate to centre */
.hp1 .h-in,.hp5 .h-in{text-align:center}
.hp5 .h-in::before{left:-6%;right:-6%;
  background:radial-gradient(60% 70% at 50% 50%,rgba(5,6,9,.45),rgba(5,6,9,.12) 70%,transparent 85%);
  -webkit-mask-image:radial-gradient(65% 75% at 50% 50%,#000 45%,transparent 82%);
  mask-image:radial-gradient(65% 75% at 50% 50%,#000 45%,transparent 82%)}
.hp3 .h-in::before{left:-6%;right:-6%;
  background:radial-gradient(60% 70% at 60% 50%,rgba(5,6,9,.45),rgba(5,6,9,.12) 70%,transparent 85%);
  -webkit-mask-image:radial-gradient(65% 75% at 60% 50%,#000 45%,transparent 82%);
  mask-image:radial-gradient(65% 75% at 60% 50%,#000 45%,transparent 82%)}
.hero__display{font-family:var(--serif);font-weight:300;font-size:clamp(2.9rem,8.2vw,7.6rem);line-height:1.02}
.hero__display .ital{font-style:italic}
.hpanel .sub{color:rgba(245,244,242,.82);max-width:44ch;margin-top:1.6rem;font-size:1.05rem}
.hpanel .sub--founder{margin-top:1rem;font-size:.92rem;color:rgba(245,244,242,.6);font-style:italic;letter-spacing:.01em}
/* centred panels (1 & 5): centre the paragraph too */
.hp1 .h-in .sub,.hp5 .h-in .sub{margin-left:auto;margin-right:auto;text-align:center}
.hp1 .h-in,.hp5 .h-in{display:flex;flex-direction:column;align-items:center}
/* ============ reveal util ============ */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
[data-reveal="fade"]{transform:none}
[data-reveal].in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.1s}[data-delay="2"]{transition-delay:.2s}
[data-delay="3"]{transition-delay:.3s}[data-delay="4"]{transition-delay:.4s}

/* ============ SECTION base ============ */
.section{padding:clamp(5rem,11vh,10rem) 0;position:relative}
:where(#residences,#returns,#faq,#contact,#services){scroll-margin-top:90px}
.shead{max-width:640px;margin-bottom:3.5rem}
.shead h2{font-size:clamp(2rem,4.2vw,3.4rem);margin:1.1rem 0 1.2rem}

/* ---- brief / value band (image 1) ---- */
.brief{border-top:1px solid var(--line)}
.brief .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.brief h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.brief h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.brief .brief__cta{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}
.vlist{display:grid;gap:1.4rem}
.vitem{border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.6rem;background:var(--panel-2);transition:.4s var(--ease)}
.vitem:hover{border-color:var(--line-2);transform:translateY(-3px)}
.vitem h4{font-size:1rem;font-weight:500;margin-bottom:.4rem;display:flex;align-items:center;gap:.7rem}
.vitem h4 i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.vitem p{color:var(--mute);font-size:.92rem}

/* ---- editorial / discover (image 4) ---- */
.editorial{overflow:hidden;text-align:center;position:relative}
.editorial .wrap{position:relative}
.editorial__ghost{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(16rem,40vw,34rem);
  color:rgba(255,255,255,.03);pointer-events:none;z-index:0;white-space:nowrap;line-height:1}
.editorial h2{position:relative;z-index:2;font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1.08;max-width:22ch;margin:0 auto 2.4rem}
.editorial h2 .ital{font-style:italic;color:var(--white)}
.ed__img{position:relative;z-index:2;width:min(420px,72vw);aspect-ratio:3/4;margin:0 auto;border-radius:200px 200px 14px 14px;overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6)}
.ed__img .ph{position:absolute;inset:0;
  background:linear-gradient(160deg,#1a2b26,#0c1512 60%),radial-gradient(80% 60% at 60% 30%,rgba(209,26,46,.22),transparent 60%);
  background-blend-mode:screen}
.ed__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,8,7,.7))}
.ed__notes{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:920px;margin:2.6rem auto 0;position:relative;z-index:2}
.ed__note{color:var(--mute);font-size:.9rem;text-align:left;border-top:1px solid var(--line);padding-top:1rem}
.ed__note.r{text-align:right}

/* ---- services catalog (image 3) ---- */
.catalog{border-top:1px solid var(--line)}
.catalog .wrap{display:grid;grid-template-columns:.72fr 2.28fr;gap:clamp(2rem,5vw,4rem);align-items:end}
.catalog__intro h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.05}
.catalog__intro p{color:var(--mute);font-size:.92rem;margin-top:1.2rem;max-width:34ch}
.cat__row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.tile{position:relative;aspect-ratio:3/4.1;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  display:flex;align-items:flex-end;padding:1.6rem;transition:.5s var(--ease)}
.tile .bg{position:absolute;inset:0;transition:transform .8s var(--ease)}
.tile:hover .bg{transform:scale(1.06)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(6,6,8,.55) 60%,rgba(6,6,8,.92))}
.tile .t-in{position:relative;z-index:3;width:100%}
/* visible pill label (was faint dark-red text) */
.tile .t-tag{display:inline-block;
  color:#fff;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(209,26,46,.9);border-radius:100px;padding:.32rem .8rem;
  box-shadow:0 6px 18px rgba(209,26,46,.35);margin-bottom:.7rem;
  transition:transform .5s var(--ease)}
.tile .t-in h4{font-size:1.3rem;font-weight:600;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
  transition:transform .5s var(--ease)}
/* hover description — hidden, revealed on hover */
.tile .t-desc{
  color:rgba(245,244,242,.88);font-size:.86rem;line-height:1.55;
  margin-top:.7rem;max-height:0;opacity:0;overflow:hidden;
  transform:translateY(8px);
  transition:max-height .5s var(--ease),opacity .45s ease,transform .5s var(--ease)}
.tile:hover .t-desc{max-height:160px;opacity:1;transform:translateY(0)}
/* nudge the title/tag up slightly as the description appears */
.tile:hover .t-tag,.tile:hover .t-in h4{transform:translateY(-2px)}
.tile:hover{transform:translateY(-4px)}
.bg-a{background:linear-gradient(150deg,#20262e,#0c0f13),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='40'%3E%3Crect width='2' height='40' x='2' fill='%23ffffff10'/%3E%3C/svg%3E")}
.bg-b{background:linear-gradient(150deg,#2a2320,#100c0b)}
.bg-c{background:linear-gradient(150deg,#1b2530,#0a0f14)}
.catalog__nav{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.7rem;margin-top:1.6rem}
.catalog__nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:.35s}
.catalog__nav button:hover{background:var(--red);border-color:var(--red)}
.catalog__nav svg{width:18px;height:18px}

/* ---- residences coverflow (image 2) ---- */
.resi{overflow:hidden}
.resi .rail{display:flex;gap:1.4rem;overflow-x:auto;padding:1rem calc(50vw - 250px);scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.resi .rail::-webkit-scrollbar{display:none}
.rcard{position:relative;flex:0 0 auto;width:min(460px,80vw);aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  scroll-snap-align:center;border:1px solid var(--line);transition:transform .5s var(--ease)}
.rcard .bg{position:absolute;inset:0;transition:transform .8s var(--ease)}
.rcard:hover .bg{transform:scale(1.05)}
.rcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,5,7,.9))}
.rcard .r-in{position:absolute;inset:auto 0 0 0;z-index:3;padding:1.5rem;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.rcard h4{font-size:1.35rem;font-weight:600;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6);line-height:1.15}
.rcard .loc{display:inline-block;margin-top:.5rem;
  color:#fff;font-size:.76rem;font-weight:500;letter-spacing:.04em;
  background:rgba(10,10,13,.6);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);border-radius:100px;
  padding:.34rem .8rem}
.rcard .price{flex:0 0 auto;align-self:flex-end;
  font-family:var(--serif);font-size:1.15rem;font-weight:500;color:#fff;
  background:rgba(209,26,46,.9);
  border:1px solid rgba(255,255,255,.15);border-radius:100px;
  padding:.42rem 1rem;text-shadow:0 1px 4px rgba(0,0,0,.3);
  box-shadow:0 8px 24px rgba(209,26,46,.3)}
.rv1{background:linear-gradient(150deg,#243036,#0c1013)}
.rv2{background:linear-gradient(150deg,#2c2622,#100c0a)}
.rv3{background:linear-gradient(150deg,#1c2a2f,#0a1013)}
.rv4{background:linear-gradient(150deg,#26222e,#0d0a11)}
.rv5{background:linear-gradient(150deg,#302326,#120a0c)}
.rv6{background:linear-gradient(150deg,#1f2733,#0a0d12)}
.resi__foot{display:flex;justify-content:center;gap:.7rem;margin-top:2.2rem}
.resi__foot button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:.35s}
.resi__foot button:hover{background:var(--red);border-color:var(--red)}
.resi__foot svg{width:18px;height:18px}

/* ---- returns (USD-Bloom card style) ---- */
.returns{border-top:1px solid var(--line);position:relative;overflow:hidden}
.rbloom{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:1.1rem;
  margin-top:1rem;
}
.rbc{
  position:relative; border:1px solid var(--line); border-radius:20px;
  padding:1.7rem 1.7rem; background:var(--panel-2); overflow:hidden;
  transition:.4s var(--ease);
}
.rbc:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.rbc h4{ font-size:1rem; font-weight:600; margin:.9rem 0 .5rem; }
.rbc p{ color:var(--mute); font-size:.86rem; line-height:1.55; }
.rbc__num{ font-family:var(--serif); font-weight:400; font-size:2.4rem; line-height:1; color:#fff; }
.rbc__num span{ color:var(--red-br); font-size:1.3rem; }
.rbc__num.sm{ font-size:2.6rem; margin-bottom:.2rem; }

/* large hero card spans 2 rows on the left */
.rbc--hero{
  grid-row:1 / span 2;
  display:flex; flex-direction:column;
  background:linear-gradient(160deg,#3a2e36,#302a30);
  border-color:rgba(209,26,46,.2);
}
.rbc--hero .rbc__glow{ position:absolute; right:-60px; top:-60px; width:300px; height:300px;
  border-radius:50%; background:radial-gradient(circle,rgba(209,26,46,.22),transparent 70%); pointer-events:none; }
.rbc__top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; position:relative; z-index:1; }
.rbc__num{ position:relative; z-index:1; }
.rbc--hero .rbc__num{ font-size:3.2rem; }
.rbc__tag{ font-size:.8rem; letter-spacing:.06em; color:var(--mute); }
.rbc__viz{ position:relative; z-index:1; margin:1.6rem 0 1rem; }
.rbc__viz svg{ width:100%; height:auto; }
.rbc__body{ position:relative; z-index:1; margin-top:auto; }
.rbc__body h3{ font-size:1.5rem; font-weight:500; margin-bottom:.6rem; }
.rbc__body h3 .ital{ font-family:var(--serif); font-weight:300; font-style:italic; }

/* tinted small cards */
.rbc--tax{ background:linear-gradient(160deg,#2c333d,#282d34); }
.rbc--res{ background:linear-gradient(160deg,#2b352c,#272d28); }
.rbc--free{ background:linear-gradient(160deg,#332c3a,#2c2833); grid-column:2 / span 2; }
.rbc--free{ display:flex; flex-direction:column; }

.rbloom__foot{ margin-top:1.6rem; }

@media (max-width:1000px){
  .rbloom{ grid-template-columns:1fr 1fr; }
  .rbc--hero{ grid-row:auto; grid-column:1 / -1; }
  .rbc--free{ grid-column:auto; }
}
@media (max-width:560px){
  .rbloom{ grid-template-columns:1fr; }
  .rbc--free{ grid-column:auto; }
}

/* ---- signature spotlight (replaces testimonials) ---- */
.spot{border-top:1px solid var(--line);overflow:hidden}
.spot .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.spot__viz{position:relative;aspect-ratio:5/6;border-radius:18px;overflow:hidden;border:1px solid var(--line);perspective:1200px}
.spot__viz .glass{position:absolute;inset:0;
  background:linear-gradient(150deg,#1a222b,#0a0e13);}
.spot__viz .glass::before{content:"";position:absolute;inset:8% 10%;border-radius:10px;
  background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);transform:rotateY(-16deg) rotateX(4deg);
  box-shadow:0 40px 100px rgba(0,0,0,.6)}
.spot__viz .glass::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.04) 38px 39px)}
.spot__viz .beam{position:absolute;top:-40%;left:-20%;width:60%;height:180%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);animation:beam 7s var(--ease) infinite}
@keyframes beam{0%{left:-30%}100%{left:120%}}
.spot__viz .tag{position:absolute;left:1.4rem;bottom:1.4rem;z-index:2;font-size:.76rem;letter-spacing:.14em;color:var(--white);
  background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:.5rem .9rem;border-radius:100px;border:1px solid var(--line-2)}
.spot h2{font-size:clamp(2rem,4vw,3.2rem);margin:1.1rem 0 1.2rem}
.spot h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.spot .spotstats{display:flex;gap:2.4rem;margin:2rem 0}
.spot .spotstats b{font-family:var(--serif);font-size:2.2rem;font-weight:400;color:#fff;display:block}
.spot .spotstats span{font-size:.78rem;color:var(--mute)}

/* ---- faq ---- */
.faq{border-top:1px solid var(--line)}
.faq .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faq h2{font-size:clamp(2rem,3.6vw,3rem)}
.faq h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.faq p.lead{margin-top:1.2rem}
.acc__item{border-bottom:1px solid var(--line)}
.acc__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  text-align:left;padding:1.5rem 0;font-size:1.02rem;font-weight:400;color:var(--white);transition:.3s}
.acc__q:hover{color:var(--red-br)}
.acc__ic{position:relative;width:16px;height:16px;flex:0 0 auto}
.acc__ic::before,.acc__ic::after{content:"";position:absolute;background:var(--red);transition:.35s var(--ease)}
.acc__ic::before{top:7px;left:0;width:16px;height:2px}
.acc__ic::after{left:7px;top:0;width:2px;height:16px}
.acc__item.open .acc__ic::after{transform:rotate(90deg);opacity:0}
.acc__a{overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.acc__a p{color:var(--mute);font-size:.92rem;padding-bottom:1.5rem;max-width:60ch}

/* ---- contact ---- */
.contact{border-top:1px solid var(--line)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact h2{font-size:clamp(2rem,4vw,3.2rem);margin:1.1rem 0 1.2rem}
.contact h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.cmeta{margin-top:1.8rem;display:grid;gap:.9rem}
.cmeta__item{display:flex;align-items:center;gap:.9rem;
  padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:14px;
  background:var(--panel-2);color:var(--white);transition:.3s var(--ease)}
.cmeta__item:hover{border-color:var(--line-2);transform:translateX(4px)}
.cmeta__item svg{flex:0 0 22px;width:22px;height:22px}
.cmeta__item span{font-size:.98rem;letter-spacing:.01em}
.cmeta__wa svg{color:#25D366}
.cmeta__wa:hover{border-color:rgba(37,211,102,.4)}
.cmeta__ig svg{color:var(--red-br)}
/* legacy row style (kept for safety) */
.cmeta .row span{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:.3rem}
.cmeta .row a{font-size:1.05rem;color:var(--white);transition:.3s}
.cmeta .row a:hover{color:var(--red-br)}
.form{display:grid;gap:1.3rem}
.field{position:relative}
.field input,.field textarea,.field select{width:100%;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:1.1rem 1.1rem;color:var(--white);font-family:inherit;font-size:.95rem;transition:.3s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red)}
.field label{position:absolute;left:1.1rem;top:1.05rem;color:var(--dim);pointer-events:none;transition:.25s var(--ease);font-size:.95rem}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  top:-.55rem;left:.8rem;font-size:.68rem;letter-spacing:.08em;color:var(--red-br);background:var(--ink);padding:0 .4rem}
.form__note{font-size:.74rem;color:var(--dim)}
.form__ok{display:none;color:#7fd18f;font-size:.9rem;border:1px solid rgba(127,209,143,.3);border-radius:12px;padding:1rem}
.form.sent .form__ok{display:block}
.form.sent .field,.form.sent .form__note,.form.sent button{display:none}

/* ---- footer ---- */
.footer{border-top:1px solid var(--line);padding-top:5rem;overflow:hidden}
.footer__top{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.footer__brand img{width:128px;height:128px;object-fit:contain;margin-bottom:1.2rem}
.footer__brand p{color:var(--mute);font-size:.9rem;max-width:34ch}
.footer__col h5{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:1.1rem}
.footer__col a{display:block;color:var(--mute);font-size:.9rem;padding:.35rem 0;transition:.3s}
.footer__col a:hover{color:var(--white)}
.footer__big{text-align:center;margin:3rem 0 -1.4rem;font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,15vw,13rem);line-height:.9;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);white-space:nowrap}
.footer__bottom{max-width:var(--maxw);margin:0 auto;padding:2rem var(--pad);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--dim);font-size:.8rem}

/* ============ responsive ============ */
@media (max-width:1000px){
  .nav__links{display:none}.nav__burger{display:block}
  .hp4 .h-in{grid-template-columns:1fr;gap:2rem}
  .hp4 .h4stats{border-left:none;border-top:1px solid var(--line-2);padding-left:0;padding-top:1.4rem;grid-template-columns:1fr 1fr;display:grid}
  .brief .wrap,.catalog .wrap,.spot .wrap,.faq .wrap,.contact .wrap{grid-template-columns:1fr}
  .cat__row{grid-template-columns:1fr 1fr}
  .rgrid{grid-template-columns:1fr 1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .ed__notes{grid-template-columns:1fr}.ed__note.r{text-align:left}
}
@media (max-width:600px){
  .cat__row{grid-template-columns:1fr}
  .rgrid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .hero__dots{display:none}
  .spot .spotstats{gap:1.4rem}
  .resi .rail{padding:1rem 8vw}
  .rcard{width:82vw}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .hero__track{height:auto}
  .hero__pin{position:relative;height:auto}
  .hpanel{position:relative;opacity:1;transform:none;min-height:auto;padding:4rem var(--pad)}
  [data-reveal]{opacity:1;transform:none}
  .hero__hint,.spot__viz .beam{display:none}
}

/* ============================================================
   AMBIENT GLOW PATTERN — site-wide subtle animated background
   ============================================================ */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 15% 20%, rgba(209,26,46,.055) 0%, transparent 70%),
    radial-gradient(ellipse 700px 500px at 85% 75%, rgba(60,40,100,.06) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 55% 50%, rgba(209,26,46,.03) 0%, transparent 60%);
  animation: glowDrift 18s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  0%  { background-position: 0% 0%, 100% 100%, 55% 50%; opacity:.8; }
  33% { background-position: 8% 15%, 90% 80%, 60% 45%; opacity:1; }
  66% { background-position: -5% 25%, 95% 65%, 50% 55%; opacity:.9; }
  100%{ background-position: 10% 5%, 85% 90%, 58% 48%; opacity:1; }
}

/* animated grid mesh — very subtle */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  animation: meshFade 12s ease-in-out infinite alternate;
}
@keyframes meshFade{ 0%{ opacity:.5; } 100%{ opacity:.9; } }

/* ============================================================
   ABOUT-WK section (Image 2 — Who We Are style)
   ============================================================ */
.about-wk{ border-top:1px solid var(--line); position:relative; overflow:hidden; }

/* soft section glow */
.about-wk::before{
  content:""; position:absolute; top:-120px; left:-80px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(209,26,46,.07) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}

.about-wk .wrap{ position:relative; z-index:1; }
.about-wk__pill-top{ display:flex; margin-bottom:1.6rem; }
.pill-label{
  display:inline-block; font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--white); background:rgba(255,255,255,.07);
  border:1px solid var(--line-2); border-radius:100px; padding:.42rem 1rem;
}

/* side-by-side: portrait photo + story */
.about-wk__main{
  display:grid; grid-template-columns:0.85fr 1fr;
  gap:clamp(2.5rem,5vw,5rem); align-items:center;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.about-wk__figure{ position:relative; }

/* portrait photo frame (matches the tall 1054×1492 image) */
.about-wk__hero-img{
  position:relative; width:100%; aspect-ratio:1054/1492; max-height:680px;
  border-radius:24px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 0 80px rgba(209,26,46,.08),0 40px 100px rgba(0,0,0,.45);
}
.about-wk__ph{ position:absolute; inset:0;
  background:radial-gradient(80% 60% at 40% 30%,rgba(209,26,46,.18),transparent 60%),
    linear-gradient(150deg,#1a2430,#0c1018); }
.about-wk__img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 25%; z-index:1; }
.about-wk__img-overlay{ position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,transparent 70%,rgba(6,8,10,.35)); }

/* tags sit BELOW the photo (not over the faces) */
.about-wk__tags{ display:flex; flex-wrap:wrap; gap:.5rem;
  justify-content:flex-start; margin-top:1.2rem; }
.wtag{ font-size:.72rem; font-weight:400; letter-spacing:.06em;
  color:var(--mute); background:var(--panel-2);
  border:1px solid var(--line); border-radius:100px;
  padding:.4rem .95rem; transition:.3s; }
.wtag:hover{ border-color:var(--line-2); color:var(--white); }

/* story */
.about-wk__story{ }
.about-wk__story h2{ font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.08; margin-bottom:1.6rem; }
.about-wk__story h2 .ital{ font-family:var(--serif); font-weight:300; font-style:italic; }
.about-wk__story > p{ color:var(--mute); font-size:1rem; line-height:1.75; margin-bottom:1.2rem; }
.about-wk__pull{ color:var(--white)!important; font-family:var(--serif); font-style:italic;
  font-size:1.3rem; line-height:1.4; margin-top:1.4rem!important; }
.about-wk__ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }

/* capability cards */
.about-wk__cards{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.3fr; gap:1.1rem;
}
.awc{
  position:relative; border:1px solid var(--line); border-radius:18px;
  padding:1.6rem 1.5rem; background:var(--panel-2);
  display:flex; flex-direction:column; gap:.55rem;
  transition:.4s var(--ease); overflow:hidden;
}
.awc:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.awc__ic{ width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2);
  display:grid; place-items:center; background:rgba(255,255,255,.02); margin-bottom:.4rem; }
.awc__ic svg{ width:22px; height:22px; color:var(--red-br); }
.awc h4{ font-size:1.02rem; font-weight:600; }
.awc p{ color:var(--mute); font-size:.86rem; line-height:1.55; }
.awc__big{ font-family:var(--serif); font-weight:400; font-size:3.4rem; line-height:1; color:#fff; }
.awc__big span{ color:var(--red-br); font-size:1.6rem; }
.awc__big--sm{ font-size:3rem; }
.awc__label{ font-size:.82rem; font-weight:500; letter-spacing:.04em; color:var(--white); margin-top:.2rem; }
.awc--accent{ background:linear-gradient(160deg,rgba(209,26,46,.16),rgba(126,12,28,.06));
  border-color:rgba(209,26,46,.28); }
.awc--accent::after{ content:""; position:absolute; right:-30px; top:-30px; width:140px; height:140px;
  border-radius:50%; background:radial-gradient(circle,rgba(209,26,46,.3),transparent 70%); }
.awc--dark{ background:linear-gradient(160deg,#33333d,#2a2a33); }

/* responsive */
@media (max-width:1000px){
  .about-wk__cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  /* stack: photo on top, story below */
  .about-wk__main{ grid-template-columns:1fr; gap:2rem; }
  .about-wk__hero-img{ aspect-ratio:1054/1492; max-height:560px; margin:0 auto; max-width:440px; }
  .about-wk__figure{ display:flex; flex-direction:column; }
  .about-wk__tags{ justify-content:center; }
}
@media (max-width:560px){
  .about-wk__cards{ grid-template-columns:1fr; }
  .about-wk__hero-img{ max-height:none; max-width:100%; }
  .about-wk__img{ object-position:center 20%; }
}

/* ============================================================
   Per-section glow accents (light, tasteful)
   ============================================================ */
.editorial::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:800px; height:300px;
  background:radial-gradient(ellipse at 50% 0%, rgba(209,26,46,.07) 0%, transparent 70%);
  pointer-events:none;
}
.returns::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 80% 50%, rgba(209,26,46,.055) 0%, transparent 70%);
}
.spot::before{
  content:""; position:absolute; top:-60px; right:-40px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(40,60,120,.08) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}

/* ============================================================
   Real images layered over gradient placeholders
   (image covers the frame; if it fails to load it hides and
    the gradient placeholder shows through)
   ============================================================ */
/* About — team frame (positioning handled above in .about-wk__img) */

/* Editorial portrait */
.ed__img{position:relative}
.ed__imgel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1}

/* Services tiles */
.tile{position:relative;overflow:hidden}
.tile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;
  transition:transform .6s var(--ease)}
.tile:hover .tile__img{transform:scale(1.06)}
/* darken image so text stays readable */
.tile::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 35%,rgba(6,7,10,.55) 60%,rgba(6,7,10,.92));pointer-events:none}

/* Residence cards */
.rcard{position:relative;overflow:hidden}
.rcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1;
  transition:transform .6s var(--ease)}
.rcard:hover .rcard__img{transform:scale(1.05)}
.rcard::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 35%,rgba(6,7,10,.4) 60%,rgba(6,7,10,.92));pointer-events:none}

/* Spotlight — The Alba */
.spot__viz{position:relative;overflow:hidden}
/* glass placeholder sits BEHIND the image (fallback if image missing) */
.spot__viz .glass{z-index:0}
.spot__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1}
/* subtle dark gradient over the image for text legibility */
.spot__viz::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(6,7,10,.55))}
/* beam glint and tag ride ABOVE the image */
.spot__viz .beam{z-index:3}
.spot__viz .tag{position:absolute;z-index:4}

/* ============================================================
   Floating WhatsApp CTA
   ============================================================ */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:400;
  display:flex; align-items:center; gap:0;
  height:58px; padding:0; width:58px;
  border-radius:100px; overflow:hidden;
  background:#25D366; color:#fff;
  box-shadow:0 10px 30px rgba(37,211,102,.35),0 4px 12px rgba(0,0,0,.3);
  transition:width .45s var(--ease),box-shadow .3s,transform .3s;
}
.wa-float svg{width:58px;height:58px;flex:0 0 58px;padding:15px;box-sizing:border-box;display:block}
.wa-float__label{
  white-space:nowrap; font-size:.9rem; font-weight:500; letter-spacing:.01em;
  opacity:0; transition:opacity .3s; padding-right:0;
}
.wa-float:hover{ width:210px; transform:translateY(-2px) }
.wa-float:hover .wa-float__label{ opacity:1; padding-right:20px }
/* gentle attention pulse (box-shadow so overflow:hidden won't clip it) */
.wa-float{ animation:waPulse 2.6s ease-out infinite; }
@keyframes waPulse{
  0%{ box-shadow:0 10px 30px rgba(37,211,102,.35),0 4px 12px rgba(0,0,0,.3),0 0 0 0 rgba(37,211,102,.5) }
  70%{ box-shadow:0 10px 30px rgba(37,211,102,.35),0 4px 12px rgba(0,0,0,.3),0 0 0 16px rgba(37,211,102,0) }
  100%{ box-shadow:0 10px 30px rgba(37,211,102,.35),0 4px 12px rgba(0,0,0,.3),0 0 0 0 rgba(37,211,102,0) }
}
@media (max-width:600px){
  .wa-float{right:16px;bottom:16px;height:54px;width:54px}
  .wa-float svg{flex-basis:54px}
  /* on mobile keep it compact — label shows on tap-hover only */
  .wa-float:hover{width:54px}
  .wa-float:hover .wa-float__label{opacity:0;padding-right:0}
}
@media (prefers-reduced-motion:reduce){ .wa-float{animation:none} }

/* ============================================================
   SUBPAGES (About / Contact) — home theme, dark
   ============================================================ */
.subpage{background:var(--ink)}
/* subpages: nav is always solid (no transparent hero behind) */
.subpage .nav{position:fixed}
.subpage main,.subpage .phero{margin-top:0}

/* page hero banner */
.phero{position:relative;min-height:64vh;display:flex;align-items:flex-end;
  padding:0 var(--pad) clamp(2.5rem,5vw,4rem);overflow:hidden;isolation:isolate}
.phero__media{position:absolute;inset:0;z-index:-1}
.phero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.phero__ph{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 70% at 60% 20%,rgba(209,26,46,.2),transparent 60%),
    linear-gradient(160deg,#1a2230,#0a0c11)}
.phero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,10,.5) 0%,rgba(6,7,10,.35) 40%,rgba(6,7,10,.9) 100%)}
.phero__in{max-width:var(--maxw);margin:0 auto;width:100%;position:relative}
.crumbs{display:flex;gap:.6rem;align-items:center;font-size:.8rem;color:var(--mute);margin-bottom:1.2rem}
.crumbs a{color:var(--mute);transition:.3s}.crumbs a:hover{color:var(--red-br)}
.crumbs b{color:var(--white);font-weight:500}
.crumbs span{color:var(--dim)}
.phero__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,7vw,5.5rem);line-height:1.02}
.phero__title .ital{font-style:italic}
.phero__lead{color:rgba(245,244,242,.82);max-width:52ch;margin-top:1.2rem;font-size:1.05rem}

/* intro */
.pintro__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.pintro__grid h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;margin-top:1rem}
.pintro__grid h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
@media(max-width:820px){.pintro__grid{grid-template-columns:1fr;gap:1.5rem}}

/* approach cards */
.approach{border-top:1px solid var(--line)}
.approach__head{max-width:760px;margin-bottom:3rem}
.approach__head h2{font-size:clamp(1.8rem,3.4vw,2.9rem);margin-top:1rem}
.approach__head h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.approach__head p{color:var(--mute);margin-top:1rem;font-size:.95rem;max-width:60ch}
.appr__row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.apc{border:1px solid var(--line);border-radius:20px;padding:2rem 1.8rem;background:var(--panel-2);
  transition:.4s var(--ease)}
.apc:hover{border-color:var(--line-2);transform:translateY(-4px)}
.apc__ic{width:48px;height:48px;border-radius:12px;border:1px solid var(--line-2);
  display:grid;place-items:center;margin-bottom:1.2rem}
.apc__ic svg{width:24px;height:24px;color:var(--red-br)}
.apc h4{font-size:1.15rem;font-weight:600;margin-bottom:.6rem}
.apc p{color:var(--mute);font-size:.9rem;line-height:1.6}
.apc--accent{background:linear-gradient(160deg,rgba(209,26,46,.16),rgba(126,12,28,.05));border-color:rgba(209,26,46,.28)}
.apc--dark{background:linear-gradient(160deg,#33333d,#2a2a33)}
@media(max-width:820px){.appr__row{grid-template-columns:1fr}}

/* split section */
.psplit{border-top:1px solid var(--line)}
.psplit__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.psplit__media{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.psplit__img{position:relative;grid-column:1/-1;aspect-ratio:16/11;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.psplit__img.sm{grid-column:2;aspect-ratio:1/1}
.psplit__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.psplit__img .ph{position:absolute;inset:0;background:linear-gradient(150deg,#243036,#0c1013)}
.psplit__img .ph2{background:linear-gradient(150deg,#2a2030,#100a14)}
.psplit__stat{grid-column:1;aspect-ratio:1/1;border-radius:20px;
  background:linear-gradient(160deg,rgba(209,26,46,.9),rgba(126,12,28,.85));
  display:flex;flex-direction:column;justify-content:center;padding:1.6rem;color:#fff}
.psplit__big{font-family:var(--serif);font-size:3.4rem;line-height:1}
.psplit__big span{font-size:1.8rem}
.psplit__stat p{font-size:.82rem;margin-top:.5rem;color:rgba(255,255,255,.9)}
.psplit__body h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;margin:1rem 0 1.2rem}
.psplit__body h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.ital-note{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--white);margin-top:1rem}
.psplit__meta{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.pmeta{display:flex;align-items:center;gap:.8rem}
.pmeta__ic{color:var(--red-br);letter-spacing:.1em;font-size:.85rem}
.pmeta b{display:block;font-size:.9rem;font-weight:600}
.pmeta span{color:var(--mute);font-size:.8rem}
.pmeta__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.pmeta__tags span{font-size:.72rem;color:var(--mute);background:var(--panel-2);border:1px solid var(--line);
  border-radius:100px;padding:.3rem .8rem}
@media(max-width:820px){.psplit__grid{grid-template-columns:1fr;gap:2rem}}

/* band + how-we-work image */
.pband{border-top:1px solid var(--line)}
.pband__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-bottom:3rem}
.pband__grid h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.06}
.pband__grid h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.pband__right{padding-top:.5rem}
.pband__right p{color:var(--mute);font-size:.95rem;line-height:1.7}
.pwork{position:relative;aspect-ratio:21/9;min-height:320px;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  display:grid;place-items:center}
.pwork__img{position:absolute;inset:0}
.pwork__img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:0}
.pwork__img .ph{position:absolute;inset:0;background:linear-gradient(150deg,#243036,#0c1013)}
.pwork__scrim{position:absolute;inset:0;background:rgba(6,7,10,.5);z-index:1}
.pwork__label{position:relative;z-index:2;font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,7vw,5rem);letter-spacing:.15em;color:rgba(255,255,255,.92)}
@media(max-width:820px){.pband__grid{grid-template-columns:1fr;gap:1.5rem}.pwork{aspect-ratio:16/10}}

/* testimonial */
.ptest{border-top:1px solid var(--line);text-align:center}
.ptest .wrap{max-width:900px}
.ptest__mark{font-family:var(--serif);font-size:6rem;line-height:0;color:var(--red);display:block;height:2.5rem}
.ptest blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.4vw,2.6rem);
  line-height:1.3;color:var(--white);margin:1.5rem 0 2rem}
.ptest__who{display:flex;align-items:center;justify-content:center;gap:.9rem}
.ptest__avatar{width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-weight:600}
.ptest__who b{display:block;font-size:.95rem;font-weight:600}
.ptest__who span{color:var(--mute);font-size:.82rem}

/* page CTA */
.pcta{border-top:1px solid var(--line)}
.pcta__in{text-align:center;max-width:760px;margin:0 auto;
  border:1px solid var(--line);border-radius:28px;padding:clamp(2.5rem,6vw,4.5rem);
  background:radial-gradient(120% 100% at 50% 0%,rgba(209,26,46,.1),transparent 60%),var(--panel-2)}
.pcta__in h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.06}
.pcta__in h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.pcta__in p{color:var(--mute);margin:1.2rem auto 0;max-width:48ch}
.pcta__btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* get in touch (contact) */
.getintouch{border-top:1px solid var(--line)}
.gt__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.gt__left h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.06;margin:1rem 0 1.2rem}
.gt__left h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.gt__cards{display:grid;gap:.8rem;margin-top:2rem}
.gt__card{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;
  border:1px solid var(--line);border-radius:16px;background:var(--panel-2);
  color:var(--white);transition:.3s var(--ease)}
.gt__card:hover{border-color:var(--line-2);transform:translateX(4px)}
.gt__ic{flex:0 0 44px;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);
  display:grid;place-items:center}
.gt__ic svg{width:22px;height:22px;color:var(--red-br)}
.gt__card--wa .gt__ic svg{color:#25D366}
.gt__card--wa:hover{border-color:rgba(37,211,102,.4)}
.gt__card small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:.15rem}
.gt__card b{font-size:.98rem;font-weight:500}
.gt__info{display:flex;gap:2.5rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}
.gt__info h5{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:.5rem}
.gt__info p{color:var(--white);font-size:.92rem;line-height:1.6}
/* form panel */
.gt__formwrap{border:1px solid var(--line);border-radius:24px;padding:clamp(1.8rem,3vw,2.6rem);
  background:var(--panel-2)}
.gt__formwrap h3{font-size:1.5rem;font-weight:600}
.gt__formsub{color:var(--mute);font-size:.9rem;margin:.5rem 0 1.8rem}
@media(max-width:820px){.gt__grid{grid-template-columns:1fr;gap:2.5rem}.gt__info{gap:1.5rem}}

/* fixed-nav offset for subpage section anchors */
.subpage .section{scroll-margin-top:90px}

/* ============================================================
   SERVICES PAGE
   ============================================================ */
/* intro */
.svc-intro{border-top:1px solid var(--line)}
.svc-intro__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.svc-intro__grid h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;margin-top:1rem}
.svc-intro__grid h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.svc-jump{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.svc-jump a{font-size:.8rem;letter-spacing:.03em;color:var(--mute);
  background:var(--panel-2);border:1px solid var(--line);border-radius:100px;
  padding:.45rem 1rem;transition:.3s var(--ease)}
.svc-jump a:hover{border-color:rgba(209,26,46,.4);color:var(--white)}
@media(max-width:820px){.svc-intro__grid{grid-template-columns:1fr;gap:1.5rem}}

/* service rows */
.svc-row{border-top:1px solid var(--line)}
.svc-row__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.svc-row__media{position:relative}
.svc-img{position:relative;aspect-ratio:5/4;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 0 70px rgba(209,26,46,.06),0 30px 80px rgba(0,0,0,.4)}
.svc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.svc-img .ph{position:absolute;inset:0;background:radial-gradient(70% 60% at 40% 30%,rgba(209,26,46,.16),transparent 60%),linear-gradient(150deg,#243036,#0c1013)}
.svc-img .ph2{background:radial-gradient(70% 60% at 60% 30%,rgba(60,74,132,.2),transparent 60%),linear-gradient(150deg,#1a2230,#0a0e14)}
.svc-img .ph3{background:radial-gradient(70% 60% at 50% 30%,rgba(126,12,28,.2),transparent 60%),linear-gradient(150deg,#241018,#0d0a0c)}
.svc-num{display:inline-block;font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--red-br);margin-bottom:.6rem}
.svc-row__body h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;margin-bottom:1.2rem}
.svc-row__body h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.svc-list{list-style:none;margin:1.4rem 0 1.8rem;padding:0;display:grid;gap:.7rem}
.svc-list li{position:relative;padding-left:1.6rem;color:var(--mute);font-size:.92rem;line-height:1.5}
.svc-list li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;
  background:var(--red);box-shadow:0 0 10px rgba(209,26,46,.5)}
/* alternating: on wide screens flip media to the right visually via order */
.svc-row.alt .svc-row__body{order:1}
.svc-row.alt .svc-row__media{order:2}
@media(max-width:820px){
  .svc-row__grid{grid-template-columns:1fr;gap:2rem}
  .svc-row.alt .svc-row__body,.svc-row.alt .svc-row__media{order:0}
  .svc-row__media{order:-1} /* image on top when stacked */
}

/* process */
.svc-process{border-top:1px solid var(--line)}
.svc-process__head{text-align:center;max-width:640px;margin:0 auto 3rem}
.svc-process__head h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-top:1rem}
.svc-process__head h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.svc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.svc-step{border:1px solid var(--line);border-radius:18px;padding:1.8rem 1.5rem;background:var(--panel-2);
  transition:.4s var(--ease)}
.svc-step:hover{border-color:var(--line-2);transform:translateY(-4px)}
.svc-step__n{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--red-br)}
.svc-step h4{font-size:1.1rem;font-weight:600;margin:.6rem 0 .5rem}
.svc-step p{color:var(--mute);font-size:.86rem;line-height:1.55}
@media(max-width:900px){.svc-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.svc-steps{grid-template-columns:1fr}}

/* ============================================================
   RESIDENCES — 3 detailed signature cards
   ============================================================ */
.resi__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.5rem}
.rcard2{border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:var(--panel-2);display:flex;flex-direction:column;transition:.4s var(--ease)}
.rcard2:hover{border-color:var(--line-2);transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(0,0,0,.4)}
.rcard2__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.rcard2__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  z-index:1;transition:transform .6s var(--ease)}
.rcard2:hover .rcard2__img{transform:scale(1.06)}
.rcard2__media .bg{position:absolute;inset:0;z-index:0}
.rcard2__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(6,7,10,.6))}
.rcard2__badge{position:absolute;left:1rem;top:1rem;z-index:3;
  font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(209,26,46,.9);border:1px solid rgba(255,255,255,.15);
  border-radius:100px;padding:.36rem .85rem;box-shadow:0 6px 18px rgba(209,26,46,.3)}
.rcard2__body{padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;flex:1}
.rcard2__loc{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red-br);margin-bottom:.5rem}
.rcard2__body h3{font-size:1.6rem;font-weight:600;margin-bottom:.7rem;line-height:1.1}
.rcard2__body p{color:var(--mute);font-size:.88rem;line-height:1.6;margin-bottom:1.3rem}
.rcard2__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;
  padding:1.1rem 0;margin-top:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rcard2__stats b{display:block;font-family:var(--serif);font-size:1.35rem;font-weight:500;color:#fff;line-height:1.1}
.rcard2__stats span{font-size:.72rem;color:var(--dim);letter-spacing:.02em}
.rcard2__cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;
  font-size:.82rem;font-weight:500;letter-spacing:.03em;color:var(--white);transition:.3s}
.rcard2__cta svg{width:16px;height:16px;transition:transform .3s}
.rcard2__cta:hover{color:var(--red-br)}
.rcard2__cta:hover svg{transform:translateX(4px)}
@media (max-width:900px){.resi__grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}

/* ============================================================
   OMNIYAT VIDEO section
   ============================================================ */
.omni{border-top:1px solid var(--line);position:relative;overflow:hidden}
.omni::before{content:"";position:absolute;top:-80px;left:50%;transform:translateX(-50%);
  width:700px;height:300px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(209,26,46,.08),transparent 70%)}
.omni__head{position:relative;z-index:1;text-align:center;max-width:720px;margin:0 auto 2.6rem}
.omni__head h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;margin-top:1rem}
.omni__head h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.omni__head .lead{margin-left:auto;margin-right:auto}

.omni__frame{position:relative;aspect-ratio:16/9;border-radius:26px;overflow:hidden;
  border:1px solid var(--line);cursor:pointer;
  box-shadow:0 0 90px rgba(209,26,46,.08),0 40px 100px rgba(0,0,0,.5)}
.omni__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.omni__ph{position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 60% at 50% 30%,rgba(209,26,46,.18),transparent 60%),
    linear-gradient(150deg,#243036,#0c1013)}
.omni__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,10,.25),transparent 40%,rgba(6,7,10,.55));
  transition:opacity .5s ease}
.omni__frame.playing .omni__scrim{opacity:.35}

/* play button */
.omni__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:84px;height:84px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(209,26,46,.92);color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 40px rgba(209,26,46,.45);transition:.35s var(--ease)}
.omni__play svg{width:32px;height:32px;margin-left:4px}
.omni__play::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(209,26,46,.5);animation:omniPulse 2.4s ease-out infinite}
@keyframes omniPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.omni__play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--red-br)}
.omni__frame.playing .omni__play{opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.6)}

/* caption */
.omni__cap{position:absolute;left:1.6rem;bottom:1.6rem;z-index:3;display:flex;align-items:center;gap:.8rem;
  transition:opacity .4s ease}
.omni__frame.playing .omni__cap{opacity:0}
.omni__tag{font-family:var(--serif);font-size:1.1rem;letter-spacing:.18em;color:#fff;font-weight:500}
.omni__cap p{color:rgba(245,244,242,.8);font-size:.82rem;padding-left:.8rem;border-left:1px solid rgba(255,255,255,.25)}
@media (prefers-reduced-motion:reduce){.omni__play::after{animation:none}}
@media (max-width:600px){
  .omni__play{width:64px;height:64px}.omni__play svg{width:24px;height:24px}
  .omni__cap{left:1rem;bottom:1rem}
}

/* ============================================================
   TESTIMONIALS carousel
   ============================================================ */
.tst{border-top:1px solid var(--line);position:relative;overflow:hidden}
.tst::before{content:"";position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:700px;height:280px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(209,26,46,.08),transparent 70%)}
.tst__head{position:relative;z-index:1;text-align:center;max-width:820px;margin:0 auto 3rem}
.tst__head h2{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.12;margin-top:1rem}
.tst__head h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}

.tst__carousel{position:relative;max-width:900px;margin:0 auto}
.tst__track{position:relative;min-height:340px}
.tst__slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease);
  border:1px solid var(--line);border-radius:24px;background:var(--panel-2);
  padding:clamp(2rem,4vw,3.2rem);display:flex;flex-direction:column;justify-content:center}
.tst__slide.is-active{opacity:1;visibility:visible;transform:none;position:relative}
.tst__stars{color:var(--red-br);letter-spacing:.25em;font-size:.95rem;margin-bottom:1.4rem}
.tst__slide blockquote{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.5;color:var(--white);margin-bottom:1.8rem}
.tst__who{display:flex;align-items:center;gap:1rem}
.tst__avatar{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--red);
  color:#fff;display:grid;place-items:center;font-weight:600;font-size:.85rem;letter-spacing:.02em}
.tst__who b{display:block;font-size:1rem;font-weight:600}
.tst__who span{color:var(--mute);font-size:.85rem}

.tst__controls{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:2rem}
.tst__arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--panel-2);color:var(--white);display:grid;place-items:center;cursor:pointer;
  transition:.3s var(--ease)}
.tst__arrow svg{width:20px;height:20px}
.tst__arrow:hover{border-color:rgba(209,26,46,.5);color:var(--red-br);transform:translateY(-2px)}
.tst__dots{display:flex;gap:.5rem}
.tst__dots button{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:var(--line-2);transition:.3s}
.tst__dots button.on{background:var(--red);width:26px;border-radius:100px}

@media (max-width:600px){
  .tst__track{min-height:420px}
}

/* ============================================================
   FOOTER with overlapping couple image
   ============================================================ */
/* ============================================================
   FOOTER — fresh build. Left: brand + 3 link columns + bar.
             Right: full-height couple photo panel.
   ============================================================ */
/* full-width black band so no side gaps show a different shade */
.wkfoot-band{background:#0B0B0E;border-top:1px solid var(--line)}
.wkfoot{position:relative;overflow:hidden;
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.35fr 1fr;align-items:stretch}
/* --- left content --- */
.wkfoot__left{padding:clamp(3rem,5vw,4.5rem) clamp(1.25rem,3vw,2.5rem) clamp(3rem,5vw,4.5rem) var(--pad);
  display:flex;flex-direction:column}
.wkfoot__brand img{width:150px;height:auto;object-fit:contain;margin-bottom:1.3rem}
.wkfoot__brand p{color:var(--mute);font-size:.9rem;line-height:1.65;max-width:42ch}
/* three columns in ONE row: Explore · Practice · Connect */
.wkfoot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  margin:2.6rem 0 auto}
.wkfoot__col h5{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:1.1rem}
.wkfoot__col a{display:block;color:var(--mute);font-size:.9rem;padding:.34rem 0;transition:.3s}
.wkfoot__col a:hover{color:var(--white)}
/* bottom bar sits directly under the columns */
.wkfoot__bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--dim);font-size:.8rem;margin-top:2.8rem;padding-top:1.8rem;
  border-top:1px solid var(--line)}
/* --- right photo panel --- */
.wkfoot__photo{position:relative;overflow:hidden;background:#0b0b0e;
  display:flex;align-items:flex-end;justify-content:center}
.wkfoot__photo img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
/* soft seam blending photo into the dark left side */
.wkfoot__photo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:140px;z-index:1;
  pointer-events:none;background:linear-gradient(90deg,#0B0B0E,transparent)}

@media (max-width:900px){
  .wkfoot{grid-template-columns:1fr}
  .wkfoot__photo{order:-1;aspect-ratio:4/3;max-height:480px;align-items:flex-start}
  .wkfoot__photo::before{left:0;right:0;top:auto;bottom:0;width:auto;height:110px;
    background:linear-gradient(0deg,#0B0B0E,transparent)}
}
@media (max-width:560px){
  .wkfoot__cols{grid-template-columns:1fr 1fr;gap:1.6rem}
  .wkfoot__photo{aspect-ratio:1/1}
}
@media (max-width:400px){
  .wkfoot__cols{grid-template-columns:1fr}
}

/* ============================================================
   HUMAN FIRST — the way we work
   ============================================================ */
.humanfirst{border-top:1px solid var(--line);position:relative;overflow:hidden;
  padding-bottom:0}  /* image bleeds to the very bottom edge */
.hf__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:end}

/* image column — bigger, bottom bleeds to the section edge */
.hf__media{position:relative;align-self:end}
.hf__imgwrap{position:relative;display:flex;justify-content:center;align-items:flex-end}
.hf__img{position:relative;z-index:2;display:block;
  height:clamp(440px,52vw,680px);width:auto;max-width:100%;object-fit:contain;object-position:bottom;
  margin-bottom:0;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
/* soft radial glow behind */
.hf__glow{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:0;
  width:clamp(360px,46vw,600px);height:clamp(360px,46vw,600px);border-radius:50%;
  background:radial-gradient(circle,rgba(209,26,46,.16),transparent 65%)}
/* the "floor" shadow the couple stands on */
.hf__floor{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:1;
  width:min(94%,520px);height:70px;
  background:radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.6),transparent 72%)}

/* copy column — add breathing room at the bottom so text isn't flush */
.hf__body{padding-bottom:clamp(3rem,6vw,5rem)}
.hf__body h2{font-size:clamp(1.9rem,3.8vw,3.1rem);line-height:1.08;margin:1rem 0 1.8rem}
.hf__body h2 .ital{font-family:var(--serif);font-weight:300;font-style:italic}
.hf__points{display:grid;gap:0;margin-bottom:2rem}
.hf__point{display:flex;gap:1.1rem;align-items:flex-start;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.hf__point:first-child{border-top:1px solid var(--line)}
.hf__n{flex:0 0 auto;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--red-br);
  min-width:2ch}
.hf__point h4{font-size:1.05rem;font-weight:600;margin-bottom:.3rem}
.hf__point p{color:var(--mute);font-size:.9rem;line-height:1.6}

@media (max-width:820px){
  .hf__grid{grid-template-columns:1fr;gap:1rem;align-items:stretch}
  .hf__body{order:-1;padding-bottom:0}
  .hf__img{height:clamp(360px,90vw,500px)}
}

/* ============================================================
   NEW SELF-CONTAINED MOBILE MENU (wkmenu)
   ============================================================ */
.wkmenu-btn{display:none;position:fixed;top:22px;right:20px;z-index:3000;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(19,19,24,.7);backdrop-filter:blur(10px);cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.wkmenu-btn span{display:block;width:20px;height:1.6px;background:#F5F4F2;border-radius:2px}
.wkmenu{position:fixed;inset:0;z-index:2990;background:#0B0B0E;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease}
.wkmenu.is-open{opacity:1;visibility:visible;pointer-events:auto}
.wkmenu-close{position:absolute;top:18px;right:24px;background:none;border:0;color:#F5F4F2;
  font-size:2.6rem;line-height:1;cursor:pointer;font-weight:200}
.wkmenu-nav{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center}
.wkmenu-nav a{font-family:var(--serif);font-weight:300;font-size:2.4rem;color:#F5F4F2;
  padding:.6rem 1rem;text-decoration:none;transition:color .3s}
.wkmenu-nav a:hover{color:var(--red-br)}
/* show button + hide old desktop nav links on mobile */
@media (max-width:1000px){
  .wkmenu-btn{display:flex}
  .nav__burger{display:none !important}  /* hide old burger, use new one */
}