/* ===================================================================
   Residensi Cattleya — IGNITE-style edition
   Light Cattleya theme · award-site motion · same copy, new skin.
   Mirrors the igniteagency.com experience: huge type, smooth scroll,
   split-text reveals, marquees, custom cursor, magnetic buttons,
   image-mask reveals, parallax, pinned sections.
   =================================================================== */

:root{
  /* --- LIGHT CATTLEYA palette --- */
  --bg:#eef6f0;            /* pale sage page                          */
  --bg-2:#ffffff;          /* white panel/surface                     */
  --bg-3:#e0eee6;          /* soft sage card surface                  */
  --bg-4:#d3e8da;          /* deeper sage card gradient end           */
  --ink:#243a2e;           /* deep plum-green primary text            */
  --ink-soft:rgba(36,58,46,.66);
  --ink-faint:rgba(36,58,46,.4);
  --line:rgba(36,58,46,.14);
  --line-2:rgba(36,58,46,.24);

  --magenta:#b8487f;       /* magenta accent (reads on light)         */
  --magenta-deep:#9c3a6a;
  --sage:#9cd3b3;          /* sage — secondary accent                 */
  --sage-mid:#7bc096;
  --gold:#c19a52;          /* warm gold — tertiary                    */

  --accent:var(--magenta);

  --display:'Poppins',system-ui,sans-serif;
  --body:'Plus Jakarta Sans','Poppins',system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-power:cubic-bezier(.65,.05,.36,1);
  --maxw:1480px;
  --gut:clamp(20px,5vw,80px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;}
/* Lenis */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}

body{
  background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:18px;line-height:1.6;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--magenta);color:#fff;}
/* Suppress the browser's default focus box on mouse interaction (this is what
   left a hard black rectangle on the first accordion button after reload), but
   keep a clear on-brand ring for keyboard users so accessibility is preserved. */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:4px;}
button{font:inherit;color:inherit;}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}

/* ---------- big type system (IGNITE-scale) ---------- */
.display{
  font-family:var(--display);font-weight:600;line-height:.92;
  letter-spacing:-.02em;font-size:clamp(2.6rem,8.2vw,9rem);
}
.h1{font-family:var(--display);font-weight:600;line-height:.96;
  letter-spacing:-.02em;font-size:clamp(2.2rem,6vw,5.4rem);}
.h2{font-family:var(--display);font-weight:600;line-height:1;
  letter-spacing:-.015em;font-size:clamp(1.9rem,4.4vw,3.6rem);}
.h3{font-family:var(--display);font-weight:600;line-height:1.05;
  font-size:clamp(1.3rem,2.2vw,1.9rem);}
.lead{font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.5;color:var(--ink-soft);max-width:46ch;}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--magenta);}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--magenta);display:inline-block;}
.idx{font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.18em;color:var(--ink-faint);}

/* gradient ink for the loudest words */
.grad{
  background:linear-gradient(100deg,var(--sage) 0%,var(--magenta) 55%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* section rhythm */
.section{position:relative;padding:clamp(5rem,12vh,11rem) 0;}
.section--tight{padding:clamp(3rem,7vh,6rem) 0;}

/* ---------- split-text reveal primitives ---------- */
.reveal-line{display:block;overflow:hidden;}
.reveal-line > span{display:block;will-change:transform;}
/* per-word reveal (JS wraps words in .word > .word-i).
   The mask uses overflow:hidden to clip the slide-up — but with the tight
   heading line-heights that also clips letter descenders (g, y, p, j) and any
   diacritics on top. Pad the mask box vertically to give those room, then pull
   it back with negative margins so word/line spacing is unchanged. */
.tx .word{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.16em .02em .26em;margin:-.16em -.02em -.26em;}
.tx .word-i{display:inline-block;will-change:transform;}
/* gradient words use background-clip:text, which paints the gradient only within
   the inline content box — with the tight heading line-height that box ends at
   the baseline area and clips descender fill (e.g. the "g" in "blossoming").
   Pad the gradient inner downward so the painted background covers descenders,
   and pull it back so layout is unchanged. */
.tx .word-i.grad{padding-bottom:.22em;margin-bottom:-.22em;}
/* generic fade-rise */
[data-rise]{opacity:0;}
@media(prefers-reduced-motion:reduce){
  [data-rise],.tx .word-i,.reveal-line>span{opacity:1 !important;transform:none !important;}
}

/* ===================================================================
   CURSOR (custom) — a magenta ring that scales over interactives
   =================================================================== */
.cursor{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:999px;
  border:1.5px solid var(--magenta);pointer-events:none;z-index:9999;
  transform:translate3d(-50%,-50%,0);opacity:0;
  transition:opacity .3s,width .25s var(--ease),height .25s var(--ease),background .25s;}
.cursor.is-active{width:64px;height:64px;background:rgba(184,72,127,.12);}
.cursor-label{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  transform:translate3d(-50%,-50%,0);font-family:var(--body);font-weight:700;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);
  opacity:0;transition:opacity .25s;white-space:nowrap;}
@media(hover:none){.cursor,.cursor-label{display:none !important;}}

/* ===================================================================
   LOADER / intro
   =================================================================== */
.loader{position:fixed;inset:0;z-index:9998;background:var(--bg);
  display:grid;place-items:center;}
.loader__inner{text-align:center;}
.loader__word{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(2.4rem,9vw,7rem);line-height:1;overflow:hidden;}
.loader__word span{display:inline-block;}
.loader__bar{margin:1.6rem auto 0;width:min(280px,60vw);height:2px;background:var(--line-2);overflow:hidden;border-radius:2px;}
.loader__bar i{display:block;height:100%;width:0;background:var(--magenta);}
.loader__pct{margin-top:.8rem;font-size:.8rem;letter-spacing:.2em;color:var(--ink-faint);}
body.is-loading{overflow:hidden;}

/* ===================================================================
   NAV
   =================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;
  padding:clamp(14px,2vw,26px) 0;transition:transform .5s var(--ease),background .4s,backdrop-filter .4s;}
.nav.hide{transform:translateY(-110%);}
.nav.solid{background:rgba(238,246,240,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;}
.nav__logo{display:flex;align-items:center;gap:.5rem;transition:transform .3s var(--ease);}
.nav__logo:hover{transform:scale(1.06) rotate(-3deg);}
.nav__logo-img{display:block;height:clamp(34px,3.4vw,46px);width:auto;}
.nav__logo .dot{width:9px;height:9px;border-radius:999px;background:var(--magenta);}
.nav__links{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.6rem);}
.nav__links a{position:relative;font-weight:600;font-size:.9rem;display:flex;align-items:baseline;gap:.4rem;}
.nav__links a .n{font-size:.62rem;color:var(--ink-faint);font-weight:700;letter-spacing:.1em;}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:var(--magenta);transition:right .35s var(--ease);}
.nav__links a:hover::after,.nav__links a.active::after{right:0;}
.nav__cta{display:inline-flex;white-space:nowrap;flex:0 0 auto;}
.nav__right{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.4rem);}
/* BM / EN language pill */
.lang{display:inline-flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:rgba(243,247,241,.04);}
.lang__btn{appearance:none;border:none;background:none;cursor:pointer;color:var(--ink-soft);
  font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.06em;
  padding:.42rem .7rem;border-radius:999px;transition:color .3s,background .3s;line-height:1;}
.lang__btn:hover{color:var(--ink);}
.lang__btn[aria-pressed="true"]{background:var(--magenta);color:#fff;}
@media(max-width:900px){ .nav__links{display:none;} }
/* tablet/large phone: make the nav CTA compact so it stays on one line and
   doesn't dominate the bar (it was wrapping "Register Interest" to two rows).
   Selector is .nav .nav__cta so it outranks the base .btn padding/font. */
@media(max-width:900px){
  .nav .nav__cta{padding:.6rem 1.05rem;font-size:.82rem;gap:.5rem;white-space:nowrap;}
  .nav .nav__cta span{gap:.45rem;white-space:nowrap;}
  .nav .nav__cta .arr{width:14px;height:14px;}
}
/* small phones: tighten further and shrink the language pill so the row fits */
@media(max-width:520px){
  .nav .nav__cta{padding:.52rem .9rem;font-size:.76rem;}
  .nav__right{gap:.55rem;}
  .lang__btn{padding:.34rem .52rem;font-size:.68rem;}
}

/* ===================================================================
   BUTTONS (magnetic)
   =================================================================== */
.btn{position:relative;display:inline-flex;align-items:center;gap:.8rem;
  padding:1rem 1.7rem;border-radius:999px;font-family:var(--body);font-weight:700;
  font-size:.92rem;letter-spacing:.01em;cursor:pointer;border:1px solid transparent;
  will-change:transform;overflow:hidden;isolation:isolate;}
.btn span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.6rem;}
.btn--fill{background:var(--magenta);color:#fff;}
.btn--fill::before{content:"";position:absolute;inset:0;z-index:1;background:var(--sage);
  transform:translateY(101%);transition:transform .5s var(--ease);}
.btn--fill:hover::before{transform:translateY(0);}
.btn--fill:hover{color:var(--ink);}
.btn--ghost{border-color:var(--line-2);color:var(--ink);}
.btn--ghost::before{content:"";position:absolute;inset:0;z-index:1;background:var(--magenta);
  transform:translateY(101%);transition:transform .5s var(--ease);}
.btn--ghost:hover::before{transform:translateY(0);}
.btn--ghost:hover{color:#fff;border-color:var(--magenta);}
.btn .arr{transition:transform .4s var(--ease);}
.btn:hover .arr{transform:translateX(4px) rotate(-2deg);}

/* link with animated underline */
.ul{position:relative;display:inline-block;font-weight:700;}
.ul::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);}
.ul:hover::after{transform:scaleX(1);transform-origin:left;}

/* ===================================================================
   HERO
   =================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(3rem,8vh,7rem);padding-top:clamp(5.5rem,11vh,8rem);overflow:hidden;}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero__glow{position:absolute;border-radius:999px;filter:blur(90px);opacity:.55;}
.hero__glow--1{width:46vw;height:46vw;left:-8vw;top:8vh;background:radial-gradient(circle,rgba(239,192,228,.9),transparent 62%);}
.hero__glow--2{width:42vw;height:42vw;right:-6vw;bottom:-4vh;background:radial-gradient(circle,rgba(156,211,179,.85),transparent 62%);}
.hero__top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.2rem,3vh,2.2rem);position:relative;z-index:2;max-width:min(100%,72ch);}
.hero__title{position:relative;z-index:2;max-width:min(58%,15ch);}
/* sized with a vh ceiling (min of vw and vh units) so BOTH the long BM and EN
   headlines wrap to ~3-4 lines and stay inside the hero without overflowing
   below the fold or colliding with the mascot column on the right. */
.hero__title .display{margin:0;font-size:clamp(2.1rem,min(5vw,7.4vh),5rem);line-height:.98;}
/* mascot sits in the open right column, grounded at the hero's bottom edge,
   sized by height so it never overruns the headline column on the left. */
.hero__mascot{position:absolute;right:clamp(-10px,2vw,60px);bottom:clamp(.5rem,2.5vh,2rem);
  height:min(62vh,520px);width:auto;z-index:1;
  filter:drop-shadow(0 30px 55px rgba(36,58,46,.22));pointer-events:none;will-change:transform;}
/* lead and scroll-cue always stack as two rows so the meta block has the SAME
   height in every language — otherwise the scroll cue wraps inline in some
   languages (e.g. BM) and onto its own row in others (e.g. EN), which, with the
   hero's bottom-pinned layout, makes the headline sit at different heights. */
.hero__meta{display:flex;flex-direction:column;gap:clamp(1.2rem,3vh,2rem);margin-top:clamp(1.6rem,4vh,2.6rem);position:relative;z-index:2;max-width:min(100%,64ch);}
.hero__meta .lead{max-width:34ch;}
/* LANDSCAPE TABLET (≈821–1100px): keep the mascot but anchor it flush to the
   right edge (no -6vw bleed that clipped the keys), shrink it, and lower its
   opacity so it sits behind the text without crowding the lead. */
@media(max-width:1100px){
  .hero__mascot{height:min(40vh,360px);right:0;bottom:clamp(8px,2vh,28px);opacity:.85;}
  .hero__title{max-width:min(100%,12ch);}
}
/* PORTRAIT TABLET + PHONES (≤820px): keep the headline full width, but narrow the
   LEAD so it leaves the bottom-right corner free for the mascot, which sits there
   on its own (behind the text layer, but not under the paragraph) and peeks up. */
@media(max-width:820px){
  .hero__title,.hero__top{max-width:100%;}
  .hero__meta{max-width:100%;}
  .hero__meta .lead{max-width:min(100%,28ch);}
  /* flush to the right edge (no clip), small, peeking up from the bottom corner,
     behind the text layer and slightly faded so the lead stays readable */
  .hero__mascot{height:min(30vh,270px);right:0;bottom:0;opacity:.9;z-index:0;}
}
/* small phones: shrink + fade a touch more, the lead needs the room */
@media(max-width:480px){
  .hero__meta .lead{max-width:min(100%,24ch);}
  .hero__mascot{height:min(26vh,220px);opacity:.82;}
}
.hero__scroll{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}
.hero__scroll .ln{width:46px;height:1px;background:var(--line-2);overflow:hidden;position:relative;}
.hero__scroll .ln::after{content:"";position:absolute;inset:0;background:var(--magenta);transform:translateX(-100%);animation:scrollcue 1.8s var(--ease) infinite;}
@keyframes scrollcue{0%{transform:translateX(-100%);}60%,100%{transform:translateX(100%);}}

/* ===================================================================
   MARQUEE — offers ticker as white pill chips on a magenta band
   =================================================================== */
.marquee{position:relative;overflow:hidden;display:flex;white-space:nowrap;user-select:none;}
.marquee__track{display:flex;flex-shrink:0;will-change:transform;}
.marquee__item{display:inline-flex;align-items:center;}

/* the band */
.marquee--band{
  background:linear-gradient(90deg,var(--magenta-deep),var(--magenta) 50%,var(--magenta-deep));
  padding:clamp(.9rem,2vw,1.5rem) 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.12);
}
.marquee--band .marquee__item{gap:clamp(1rem,2.4vw,2rem);padding-right:clamp(1rem,2.4vw,2rem);}

/* each offer = white rounded pill chip with an icon */
.mq-chip{display:inline-flex;align-items:center;gap:.6rem;flex:0 0 auto;
  background:#fff;color:var(--magenta-deep);
  padding:clamp(.5rem,1vw,.7rem) clamp(1rem,1.8vw,1.5rem);border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:clamp(1rem,2vw,1.5rem);letter-spacing:-.01em;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.35);}
.mq-chip svg{width:clamp(18px,2vw,26px);height:clamp(18px,2vw,26px);color:var(--gold);flex:0 0 auto;}

/* star/diamond separator between chips */
.mq-sep{flex:0 0 auto;color:rgba(255,255,255,.85);font-size:clamp(.9rem,1.6vw,1.3rem);
  text-shadow:0 1px 4px rgba(0,0,0,.2);}

/* legacy outlined variant (unused now, kept harmless) */
.marquee--alt .marquee__item{color:transparent;-webkit-text-stroke:1px var(--ink-soft);}

/* ===================================================================
   INTRO / statement
   =================================================================== */
.statement .h1{max-width:18ch;}
.statement__row{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,5rem);}
@media(min-width:900px){ .statement__row{grid-template-columns:1.4fr .9fr;align-items:end;} }
.statement__aside{align-self:end;}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:clamp(2.5rem,6vh,5rem);
  border-top:1px solid var(--line);padding-top:clamp(1.6rem,4vh,2.6rem);}
@media(max-width:700px){ .stat-strip{grid-template-columns:repeat(2,1fr);gap:2rem 1.2rem;} }
.stat .num{font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,5vw,4rem);line-height:1;
  background:linear-gradient(120deg,var(--sage),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .lab{display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}

/* problem / value big text */
.bigtext{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(2rem,5.4vw,4.6rem);max-width:20ch;}
.bigtext .muted{color:var(--ink-faint);}
.brutal{color:var(--magenta);}

/* ===================================================================
   PROJECTS (image-mask reveal cards)
   =================================================================== */
.projects__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vh,4rem);}
.proj-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,5rem);}
@media(min-width:800px){ .proj-grid{grid-template-columns:1fr 1fr;} }
.proj{position:relative;cursor:pointer;}
.proj:nth-child(odd){transform:translateY(0);}
@media(min-width:800px){ .proj:nth-child(even){margin-top:clamp(3rem,8vh,7rem);} }
.proj__media{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:4/3;background:var(--bg-3);}
.proj__media .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--bg-3),var(--bg-4));}
.proj__media .ph svg{width:34%;height:34%;color:var(--ink-faint);}
.proj__media .badge{position:absolute;top:1rem;left:1rem;z-index:3;background:var(--magenta);color:#fff;
  font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.5rem .9rem;border-radius:999px;}
/* mask overlay that wipes up on reveal */
.proj__mask{position:absolute;inset:0;z-index:2;background:var(--magenta);transform-origin:bottom;will-change:transform;}
.proj__img{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;transform:scale(1.15);will-change:transform;transition:transform .8s var(--ease);}
.proj:hover .proj__img{transform:scale(1.04);}
/* if motion is reduced (or JS/GSAP never runs) the mask must not cover the photo */
@media(prefers-reduced-motion:reduce){
  .proj__mask{transform:scaleY(0);} .proj__img{transform:scale(1.02);}
}
.proj__foot{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.1rem;}
.proj__title{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.4vw,2rem);transition:color .3s;}
.proj:hover .proj__title{color:var(--magenta);}
.proj__tag{font-size:.8rem;color:var(--ink-soft);letter-spacing:.04em;}
.proj__meta{display:flex;gap:1.2rem;margin-top:.4rem;font-size:.82rem;color:var(--ink-faint);}

/* ===================================================================
   WHY / PILLARS — sticky-scroll showcase
   Left panel sticks while the pillar cards scroll past on the right.
   =================================================================== */
.why__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,3.5rem);}
/* NOTE: do NOT set align-items:start on the grid — the aside cell must stretch to
   the full row height so the sticky panel inside it has room to travel. */
@media(min-width:900px){ .why__grid{grid-template-columns:0.92fr 1.08fr;} }

/* --- sticky left panel --- */
.why__aside{position:relative;}
@media(min-width:900px){
  .why__sticky{position:sticky;top:clamp(7rem,16vh,11rem);}
}
.why__lead{margin-top:clamp(1rem,2vw,1.6rem);color:var(--ink-soft);
  font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.6;max-width:34ch;}
.why__progress{margin-top:clamp(1.6rem,3vw,2.4rem);width:min(220px,60%);height:3px;
  border-radius:999px;background:var(--line);overflow:hidden;}
.why__bar{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--magenta),var(--gold));border-radius:999px;}

/* pointing mascot under the sticky panel — gestures rightward toward the 3 reason
   cards on desktop; on mobile it sits under the heading as a friendly intro to
   the reasons listed below it. */
.why__mascot{display:block;height:auto;pointer-events:none;
  filter:drop-shadow(0 24px 40px rgba(36,58,46,.18));
  transform-origin:bottom left;animation:whyMascotBob 4.5s var(--ease) infinite;}
/* mobile: modest size, sits under the lead/progress before the cards */
.why__mascot{margin-top:clamp(1.2rem,4vw,1.8rem);width:clamp(150px,38vw,220px);}
@media(min-width:900px){
  .why__mascot{margin-top:clamp(1.4rem,2.5vw,2.2rem);width:clamp(260px,24vw,400px);}
}
@keyframes whyMascotBob{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-9px) rotate(-1.5deg);}}
@media(prefers-reduced-motion:reduce){ .why__mascot{animation:none;} }

/* --- the scrolling stack of cards --- */
.pillars{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.6rem);}

.pillar{
  position:relative;display:flex;gap:clamp(1rem,1.8vw,1.6rem);
  background:var(--bg-2);border:1px solid var(--line);border-radius:22px;
  padding:clamp(1.7rem,2.6vw,2.6rem);overflow:hidden;
  box-shadow:0 1px 2px rgba(36,58,46,.04);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
@media(min-width:900px){ .pillar{min-height:clamp(240px,34vh,320px);} }
/* accent rail down the left edge — lights up when the card is the active one */
.pillar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--magenta),var(--gold));
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease);}
.pillar.is-active::before,.pillar:hover::before{transform:scaleY(1);}
/* faint orchid watermark, brightens on active/hover */
.pillar::after{content:"";position:absolute;right:-4%;bottom:-12%;width:42%;height:88%;
  background:url('../img/mark.svg') no-repeat center/contain;opacity:.05;pointer-events:none;
  transition:opacity .6s var(--ease),transform .8s var(--ease);}
.pillar.is-active::after,.pillar:hover::after{opacity:.1;transform:rotate(6deg) scale(1.04);}
.pillar:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(36,58,46,.26);border-color:var(--line-2);}

.pillar__n{position:absolute;top:clamp(1.3rem,2vw,1.8rem);right:clamp(1.4rem,2vw,2rem);z-index:3;
  font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.5rem);
  color:var(--ink-faint);letter-spacing:.02em;line-height:1;transition:color .5s var(--ease);}
.pillar.is-active .pillar__n{color:var(--magenta);}

.pillar__inner{display:flex;flex-direction:column;position:relative;z-index:2;flex:1;}
.pillar__ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:var(--magenta);color:#fff;flex:0 0 auto;margin-bottom:clamp(1.1rem,2vw,1.6rem);
  box-shadow:0 8px 18px -8px rgba(184,72,127,.6);transition:transform .5s var(--ease);}
.pillar:hover .pillar__ico,.pillar.is-active .pillar__ico{transform:rotate(-6deg) scale(1.05);}
.pillar__ico svg{width:27px;height:27px;}

.pillar h3{margin-bottom:.55rem;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.08;}
.pillar p{color:var(--ink-soft);font-size:1rem;line-height:1.55;max-width:46ch;}

.pillar__meta{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  margin-top:clamp(1.2rem,2.2vw,1.8rem);
  padding:.5rem .9rem;border-radius:999px;background:var(--bg);border:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.02em;color:var(--ink-soft);}
.pillar__meta .dot{width:7px;height:7px;border-radius:50%;background:var(--magenta);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(184,72,127,.18);}

/* ===================================================================
   STRATEGIC LOCATION — sticky map anchor + scrolling category cards
   =================================================================== */
.loc__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,3.5rem);}
/* on mobile (single column) keep the map + readout first as a location intro,
   then the cards — the DOM has cards first (for desktop left placement) so flip with order */
.loc__cats{order:2;}
.loc__aside{order:1;}
/* desktop: cards on the left (wider), sticky map anchor on the right.
   reset order to follow DOM, and let the aside cell stretch to the full row
   height so the sticky panel can travel */
@media(min-width:900px){
  .loc__grid{grid-template-columns:1.08fr 0.92fr;}
  .loc__cats{order:0;}
  .loc__aside{order:0;}
}

.loc__aside{position:relative;}
@media(min-width:900px){
  .loc__sticky{position:sticky;top:clamp(7rem,14vh,10rem);}
}

/* the map tile */
.loc__map{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;
  background:
    radial-gradient(120% 90% at 30% 20%,rgba(184,72,127,.12),transparent 55%),
    linear-gradient(150deg,var(--bg-3),var(--bg-4));
  border:1px solid var(--line);display:grid;place-items:center;text-align:center;}
/* faint street-grid texture */
.loc__map::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 78%);}
.loc__pin{position:relative;z-index:3;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--magenta);color:#fff;box-shadow:0 12px 26px -10px rgba(184,72,127,.7);}
.loc__pin svg{width:32px;height:32px;}
.loc__ripple{position:absolute;z-index:2;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;border:2px solid var(--magenta);opacity:0;}
.loc__map.pulse .loc__ripple{animation:locRipple 1.4s var(--ease);}
.loc__map.pulse .loc__ripple--2{animation-delay:.25s;}
@keyframes locRipple{0%{opacity:.5;transform:scale(.6);}100%{opacity:0;transform:scale(2.6);}}
.loc__place{position:absolute;z-index:3;left:0;right:0;bottom:clamp(.9rem,2vw,1.3rem);
  font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.03em;color:var(--ink-soft);}

/* readout under the map: now-viewing label + progress + count */
.loc__readout{margin-top:clamp(1.2rem,2.4vw,1.8rem);}
.loc__readout-label{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.25rem;}
.loc__readout-cat{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.1;color:var(--magenta);min-height:1.2em;}
.loc__progress{margin-top:clamp(1rem,2vw,1.4rem);width:100%;height:3px;border-radius:999px;background:var(--line);overflow:hidden;}
.loc__bar{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--magenta),var(--gold));border-radius:999px;}
.loc__count{display:block;margin-top:.7rem;font-size:.82rem;color:var(--ink-faint);}

/* the scrolling stack of category cards */
.loc__cats{display:flex;flex-direction:column;gap:clamp(.9rem,1.8vw,1.4rem);}
.loc__cat{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.4rem,2.3vw,2rem) clamp(1.5rem,2.4vw,2.2rem);overflow:hidden;
  box-shadow:0 1px 2px rgba(36,58,46,.04);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);}
.loc__cat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--magenta),var(--gold));
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease);}
.loc__cat.is-active::before,.loc__cat:hover::before{transform:scaleY(1);}
.loc__cat.is-active,.loc__cat:hover{border-color:var(--line-2);box-shadow:0 16px 36px -18px rgba(36,58,46,.22);}

.loc__cat-head{display:flex;align-items:center;gap:clamp(.8rem,1.4vw,1.1rem);position:relative;margin-bottom:.4rem;}
.loc__cat-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--bg-3);color:var(--magenta);transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease);}
.loc__cat.is-active .loc__cat-ico,.loc__cat:hover .loc__cat-ico{background:var(--magenta);color:#fff;transform:rotate(-6deg);}
.loc__cat-ico svg{width:23px;height:23px;}
.loc__cat-title{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1.8vw,1.45rem);}
.loc__cat-n{margin-left:auto;font-family:var(--display);font-weight:700;font-size:1rem;
  color:var(--ink-faint);letter-spacing:.04em;transition:color .4s var(--ease);}
.loc__cat.is-active .loc__cat-n{color:var(--magenta);}

.loc__list{margin-top:.4rem;}
.loc__list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.55rem 0;border-top:1px dashed var(--line);color:var(--ink-soft);font-size:.98rem;}
.loc__list li:first-child{border-top:0;}
.loc__row-name{flex:1;}
.loc__list .dist{color:var(--magenta);font-weight:700;font-size:.88rem;white-space:nowrap;}

/* ===================================================================
   LAUNCH OFFER — sticky CTA/value panel + scrolling offer cards
   =================================================================== */
.promo__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,3.5rem);}
/* aside cell must stretch to the full row height so the sticky panel can travel */
@media(min-width:900px){ .promo__grid{grid-template-columns:0.92fr 1.08fr;} }

.promo__aside{position:relative;}
@media(min-width:900px){
  .promo__sticky{position:sticky;top:clamp(7rem,15vh,10rem);}
}
.promo__lead{margin-top:clamp(1rem,2vw,1.5rem);color:var(--ink-soft);
  font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.6;max-width:34ch;}

/* counter: 01 / 03 + label */
.promo__counter{display:flex;align-items:baseline;gap:.3rem;margin-top:clamp(1.4rem,2.6vw,2rem);font-family:var(--display);}
.promo__count-cur{font-weight:700;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--magenta);}
.promo__count-sep,.promo__count-tot{font-weight:600;font-size:1.2rem;color:var(--ink-faint);line-height:1;}
.promo__count-label{margin-left:.7rem;align-self:center;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-family:var(--body);}

.promo__progress{margin-top:clamp(1rem,2vw,1.3rem);width:min(260px,100%);height:3px;
  border-radius:999px;background:var(--line);overflow:hidden;}
.promo__bar{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--magenta),var(--gold));border-radius:999px;}
.promo__cta{margin-top:clamp(1.6rem,3vw,2.2rem);}

/* the scrolling stack of offer cards */
.promo__cards{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.6rem);}
@media(min-width:900px){ .offer{min-height:clamp(220px,30vh,300px);} }
.offer{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:22px;background:var(--bg-2);
  padding:clamp(1.7rem,2.6vw,2.6rem);overflow:hidden;
  box-shadow:0 1px 2px rgba(36,58,46,.04);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);}
/* gold accent rail (offers read gold, distinct from the magenta rails elsewhere) */
.offer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--gold),var(--magenta));
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease);}
.offer.is-active::before,.offer:hover::before{transform:scaleY(1);}
.offer.is-active,.offer:hover{border-color:var(--line-2);box-shadow:0 16px 38px -18px rgba(36,58,46,.24);}
.offer:hover{transform:translateY(-4px);}

.offer__n{position:absolute;top:clamp(1.4rem,2vw,1.9rem);right:clamp(1.5rem,2.2vw,2.2rem);z-index:2;
  font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.4rem);
  color:var(--ink-faint);letter-spacing:.02em;transition:color .5s var(--ease);}
.offer.is-active .offer__n{color:var(--gold);}

.offer__ico{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;
  background:rgba(193,154,82,.15);color:var(--gold);margin-bottom:clamp(1.1rem,2vw,1.5rem);
  transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease);}
.offer.is-active .offer__ico,.offer:hover .offer__ico{background:var(--gold);color:#fff;transform:rotate(-6deg);}
.offer__ico svg{width:26px;height:26px;}
.offer h3{margin-bottom:.55rem;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.08;}
.offer p{color:var(--ink-soft);font-size:1rem;line-height:1.55;max-width:46ch;}
.offer__tag{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  margin-top:clamp(1.1rem,2.2vw,1.6rem);padding:.5rem .9rem;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.02em;color:var(--ink-soft);}
.offer__tag .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(193,154,82,.2);}

/* ===================================================================
   GALLERY (horizontal scroll / pinned)
   =================================================================== */
.gallery{overflow:hidden;position:relative;}
/* bottom-left mascot peeking up at the cards; fades+rises in when the
   gallery scrolls into view (the .show class is toggled by ScrollTrigger).
   Because the gallery section is pinned during the horizontal scroll, this
   absolute child stays put bottom-left while the cards slide. */
.gallery__mascot{position:absolute;left:clamp(12px,2vw,32px);bottom:clamp(6px,1.5vh,16px);z-index:20;
  width:clamp(120px,11vw,200px);height:auto;pointer-events:none;
  filter:drop-shadow(0 16px 28px rgba(36,58,46,.20));
  opacity:0;transform:translateY(28px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);}
.gallery__mascot.show{opacity:1;transform:translateY(0);animation:galMascotFloat 4s ease-in-out infinite;}
@keyframes galMascotFloat{0%,100%{translate:0 0;}50%{translate:0 -8px;}}
/* tablet: cap the size so it tucks in the corner without covering a card */
@media(max-width:1100px){ .gallery__mascot{width:clamp(88px,11vw,112px);left:clamp(8px,1.5vw,16px);} }
/* phones: visible size, tucked bottom-left, feet lifted off the edge */
@media(max-width:768px){ .gallery__mascot{width:clamp(96px,26vw,130px);left:10px;bottom:16px;} }
/* LANDSCAPE short viewports (e.g. landscape tablet): the pinned cards fill the
   height, so a bottom-left mascot would sit over a card — hide it there.
   Scoped to landscape so it does NOT hide on tall-ish portrait phones. */
@media(max-height:820px) and (max-width:1100px) and (orientation:landscape){ .gallery__mascot{display:none;} }
@media(prefers-reduced-motion:reduce){ .gallery__mascot.show{animation:none;} }
/* viewport gets centred vertically while the section is pinned, so the
   media AND its caption below stay on-screen the whole horizontal scroll */
.gallery__viewport{position:relative;display:flex;align-items:center;min-height:clamp(360px,62vh,640px);}
.gallery__track{display:flex;align-items:flex-start;gap:clamp(1rem,2vw,1.8rem);will-change:transform;padding:0 var(--gut);}
.gcard{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;}
/* media height is driven off viewport height (capped), leaving room for the
   caption row beneath it — width follows from the 3/4 aspect-ratio, and the
   card width follows the media so caption + image align */
.gcard__media{aspect-ratio:3/4;height:clamp(280px,46vh,500px);width:auto;border-radius:18px;overflow:hidden;background:linear-gradient(140deg,var(--bg-3),var(--bg-4));position:relative;flex:0 0 auto;}
.gcard__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease);will-change:transform;}
.gcard:hover .gcard__img{transform:scale(1.06);}
.gcard__media svg{width:30%;height:30%;color:var(--ink-faint);}
.gcard__label{margin-top:.85rem;display:flex;align-items:center;gap:.5rem;color:var(--ink-soft);font-size:.92rem;line-height:1.25;}
.gcard__label svg{width:18px;height:18px;color:var(--magenta);flex:0 0 auto;}

/* ===================================================================
   CONTACT / CTA
   =================================================================== */
.cta{position:relative;overflow:hidden;}
.cta__big{font-family:var(--display);font-weight:600;line-height:.96;letter-spacing:-.02em;
  font-size:clamp(2.6rem,9vw,8rem);}
.contact{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,5rem);margin-top:clamp(2.5rem,6vh,4.5rem);}
@media(min-width:900px){ .contact{grid-template-columns:1fr 1fr;} }
.contact__info p{color:var(--ink-soft);}
.contact__rows{margin-top:1.6rem;display:flex;flex-direction:column;gap:1rem;}
.contact__rows a{display:flex;align-items:center;gap:.9rem;font-size:1.05rem;}
.contact__rows svg{width:20px;height:20px;color:var(--magenta);}
.form{display:flex;flex-direction:column;gap:1.1rem;}
.field-wrap{display:flex;flex-direction:column;gap:.45rem;}
.field-wrap label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}
.field{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.1rem;color:var(--ink);font-family:var(--body);font-size:1rem;transition:border-color .3s,box-shadow .3s;}
.field::placeholder{color:var(--ink-faint);}
.field:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(184,72,127,.16);}
textarea.field{resize:vertical;min-height:120px;}
.form__note{font-size:.82rem;color:var(--ink-faint);}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{border-top:1px solid var(--line);padding:clamp(3rem,7vh,6rem) 0 2rem;}
.footer__grid{display:grid;grid-template-columns:1fr;gap:2.5rem;}
@media(min-width:800px){ .footer__grid{grid-template-columns:1.4fr .8fr .8fr;} }
.footer__brand .display{font-size:clamp(3rem,12vw,9rem);line-height:.85;color:transparent;
  -webkit-text-stroke:1.5px var(--line-2);}
.footer__col h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1rem;}
.footer__col a{display:block;padding:.35rem 0;color:var(--ink-soft);transition:color .3s,padding-left .3s;}
.footer__col a:hover{color:var(--magenta);padding-left:.4rem;}
.footer__bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(2.5rem,6vh,4rem);padding-top:1.6rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-faint);}

/* ===================================================================
   LEGAL / STATUTORY fine-print strip (Malaysian HDA / KPKT disclosure)
   =================================================================== */
.legal{background:var(--bg-3);border-top:1px solid var(--line);padding:clamp(1.8rem,4vh,3rem) 0;}
.legal .wrap{max-width:1100px;}
.legal p{margin:0 0 .7rem;color:var(--ink-faint);font-size:.72rem;line-height:1.6;letter-spacing:.005em;}
.legal p:last-child{margin-bottom:0;}
.legal__org{font-weight:600;color:var(--ink-soft);font-size:.82rem !important;letter-spacing:.01em;}
.legal__addr{color:var(--ink-soft);}
.legal__statute{font-weight:600;color:var(--ink-soft);letter-spacing:.04em;}
.legal strong{color:var(--ink-soft);font-weight:600;}

/* utility */
.split-bottom{border-bottom:1px solid var(--line);}
.center{text-align:center;}
.mt-s{margin-top:1rem;} .mt-m{margin-top:2rem;} .mt-l{margin-top:clamp(2rem,5vh,4rem);}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;}