/* ===========================================================
   NSCM — V2 "Funky / New"  ·  swapped, bold, youthful
   Dark indigo + vibrant gradient · reimagined pebbles motif
   Display: Bricolage Grotesque · Body: Figtree
   =========================================================== */

:root{
  --bg:#140a2e;
  --bg-2:#1b1040;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.12);
  --ink:#f4f0ff;
  --muted:#b3a6d6;
  --coral:#ff6f7d;
  --gold:#ffc640;
  --magenta:#c45cff;
  --teal:#34d6c6;
  --grad:linear-gradient(100deg,#ff6f7d 0%,#ffc640 32%,#c45cff 66%,#34d6c6 100%);
  --grad-soft:linear-gradient(100deg,rgba(255,111,125,.9),rgba(196,92,255,.9));
  --radius:24px;
  --radius-sm:16px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --glow:0 24px 70px -24px rgba(196,92,255,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Figtree",system-ui,sans-serif;color:var(--ink);
  background:var(--bg);line-height:1.65;font-size:17px;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(60% 50% at 12% -5%,rgba(196,92,255,.28),transparent 60%),
    radial-gradient(50% 45% at 100% 8%,rgba(52,214,198,.18),transparent 60%);
  background-attachment:fixed;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--maxw),92vw);margin-inline:auto}

h1,h2,h3,h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kick{font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;color:var(--gold);margin-bottom:1rem}

.skip{position:absolute;left:-9999px;background:var(--magenta);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}

/* ---- brand wordmark ---- */
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand .dots{display:inline-flex;align-items:flex-end;gap:4px}
.brand .dots i{display:block;border-radius:50%;background:var(--grad)}
.brand .dots i:nth-child(1){width:16px;height:16px}
.brand .dots i:nth-child(2){width:11px;height:11px;opacity:.85}
.brand .dots i:nth-child(3){width:7px;height:7px;opacity:.7}
.brand .word{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.18rem;line-height:.95;display:flex;flex-direction:column;color:var(--ink)}
.brand .word small{font-weight:600;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-family:"Figtree";font-weight:700;font-size:.97rem;padding:.85rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .3s;white-space:nowrap}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.btn-grad{background:var(--grad);color:#1a0c33;background-size:160% 160%;box-shadow:0 12px 30px -10px rgba(196,92,255,.7)}
.btn-grad:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 18px 40px -10px rgba(255,111,125,.7)}
.btn-out{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line)}
.btn-out:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 0 0 3px rgba(52,214,198,.18)}
.btn.big{padding:1.05rem 2rem;font-size:1.06rem}

/* ---- header ---- */
.hdr{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(20,10,46,.72);backdrop-filter:saturate(160%) blur(14px);border-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.5rem;padding:.9rem 0}
.nav{display:flex;gap:1.5rem;margin-left:auto;font-weight:600;font-size:.96rem}
.nav a{color:var(--muted);position:relative;padding:.2rem 0;transition:color .25s}
.nav a:hover{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--grad);transition:width .28s var(--ease)}
.nav a:hover::after{width:100%}
.hdr-cta{margin-left:.3rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;margin-left:auto;cursor:pointer}
.burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mnav{display:none;flex-direction:column;gap:.2rem;padding:0 4vw;max-height:0;overflow:hidden;transition:max-height .4s var(--ease);background:rgba(27,16,64,.97);backdrop-filter:blur(10px)}
.mnav.open{max-height:440px;padding-block:1rem 1.5rem;border-bottom:1px solid var(--line)}
.mnav a{padding:.7rem .2rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:.7rem}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ---- hero ---- */
.hero{position:relative;padding:3.5rem 0 0;overflow:hidden}
.hero-glow{position:absolute;width:680px;height:680px;border-radius:50%;top:-220px;left:40%;background:radial-gradient(circle,rgba(255,111,125,.32),transparent 62%);filter:blur(20px);z-index:0;pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;padding-bottom:3.5rem}
.tag{font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;color:var(--teal)}
.hero h1{font-size:clamp(2.9rem,8vw,6rem);font-weight:800;margin:1rem 0 0;letter-spacing:-.03em}
.lead{font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--muted);max-width:46ch;margin-top:1.4rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.badges{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:2.2rem;color:var(--muted);font-weight:600;font-size:.86rem}
.badges span{white-space:nowrap}
.hero-art img{border-radius:var(--radius);box-shadow:var(--glow);width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line)}

/* marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.02)}
.marquee-track{display:flex;align-items:center;gap:1.6rem;white-space:nowrap;padding:.9rem 0;font-family:"Bricolage Grotesque";font-weight:700;font-size:1.25rem;animation:scroll 22s linear infinite;will-change:transform}
.marquee-track span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.marquee-track b{color:var(--muted)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---- about ---- */
.about{padding:6rem 0}
.about-in{display:grid;grid-template-columns:1.2fr .8fr;gap:3.5rem;align-items:center}
.about-copy h2{margin-bottom:1.1rem;max-width:20ch}
.about-copy p{color:var(--muted);margin-bottom:1rem;max-width:54ch}
.quote{font-family:"Bricolage Grotesque";font-weight:600;font-size:1.4rem;color:var(--ink);line-height:1.3;padding-left:1.2rem;border-left:3px solid;border-image:var(--grad) 1;margin-top:1.4rem}
.statwall{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.7rem 1.4rem;transition:transform .35s var(--ease),background .35s}
.stat:hover{transform:translateY(-5px);background:var(--surface-2)}
.stat b{font-family:"Bricolage Grotesque";font-size:2.7rem;font-weight:800;display:block;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:.92rem;margin-top:.4rem;display:block}

/* ---- section heads ---- */
.sec-head{max-width:62ch;margin-bottom:3rem}
.sec-head h2{margin-bottom:.8rem}
.sub{color:var(--muted);font-size:1.08rem}

/* ---- approach flow ---- */
.approach{padding:6rem 0}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.floe{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.6rem 1.7rem;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.floe:hover{transform:translateY(-7px);box-shadow:var(--glow);border-color:rgba(255,255,255,.22)}
.pebble{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;font-family:"Bricolage Grotesque";font-weight:800;color:#1a0c33;margin-bottom:1.1rem;font-size:1.05rem}
.p1{background:var(--coral)}.p2{background:var(--gold)}.p3{background:var(--magenta);color:#fff}.p4{background:var(--teal)}
.floe h3{font-size:1.4rem;margin-bottom:.5rem}
.floe p{color:var(--muted);font-size:.96rem}

/* ---- feature ---- */
.feat{padding:6rem 0}
.feat-in,.homes-in,.careers-in{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.feat-media img,.homes-media img,.careers-media img{border-radius:var(--radius);width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);box-shadow:var(--glow)}
.feat-copy h2,.homes-copy h2,.careers-copy h2{margin:.3rem 0 1rem}
.feat-copy p,.homes-copy p,.careers-copy p{color:var(--muted);max-width:48ch}
.ticks{list-style:none;margin-top:1.4rem;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:2rem}
.ticks li::before{content:"";position:absolute;left:0;top:.3em;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--grad)}
.ticks li::after{content:"";position:absolute;left:.34rem;top:.62em;width:.55rem;height:.3rem;border-left:2px solid #1a0c33;border-bottom:2px solid #1a0c33;transform:rotate(-45deg)}

/* ---- support chips ---- */
.support{padding:6rem 0}
.chips-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.chip{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.7rem 1.5rem;overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.chip::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.chip:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22)}
.chip:hover::before{transform:scaleX(1)}
.chip h3{font-size:1.18rem;margin-bottom:.45rem}
.chip p{color:var(--muted);font-size:.92rem}

/* ---- homes ---- */
.homes{padding:6rem 0}

/* ---- trust ---- */
.trust{padding:6rem 0}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.8rem 1.6rem;transition:transform .35s var(--ease),background .35s}
.tcard:hover{transform:translateY(-5px);background:var(--surface-2)}
.tcard b{font-family:"Bricolage Grotesque";font-size:1.2rem;font-weight:700;display:block;margin-bottom:.4rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tcard p{color:var(--muted);font-size:.94rem}

/* ---- locations ---- */
.locations{padding:6rem 0}
.loc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
.loc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.5rem 1.3rem;transition:transform .35s var(--ease),border-color .35s}
.loc:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.22)}
.loc h3{font-size:1.05rem;margin-bottom:.45rem}
.loc p{font-size:.85rem;color:var(--muted);margin-bottom:.7rem}
.loc a{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- careers ---- */
.careers{padding:6rem 0}

/* ---- contact ---- */
.contact{padding:2rem 0 6rem}
.contact-card{position:relative;text-align:center;border-radius:var(--radius);padding:clamp(2.6rem,5vw,4.2rem);border:1px solid var(--line);overflow:hidden;background:
  radial-gradient(120% 140% at 0% 0%,rgba(196,92,255,.22),transparent 55%),
  radial-gradient(120% 140% at 100% 100%,rgba(52,214,198,.18),transparent 55%),
  var(--bg-2)}
.contact-card h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:.7rem}
.contact-card>p{color:var(--muted);max-width:50ch;margin:0 auto 2rem;font-size:1.08rem}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:860px;margin:0 auto 2.2rem;text-align:left}
.ccol{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.3rem 1.4rem;transition:transform .3s var(--ease),border-color .3s}
a.ccol:hover{transform:translateY(-4px);border-color:var(--teal)}
.ccol span{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:700;color:var(--gold);margin-bottom:.4rem}
.ccol b{font-family:"Bricolage Grotesque";font-weight:600;font-size:1.05rem}

/* ---- footer ---- */
.ftr{border-top:1px solid var(--line);padding:4rem 0 2rem;background:rgba(0,0,0,.18)}
.ftr-in{display:grid;grid-template-columns:1.3fr 2fr;gap:3rem;padding-bottom:2.4rem;border-bottom:1px solid var(--line)}
.ftr-brand p{color:var(--muted);max-width:34ch;font-size:.94rem;margin-top:1rem}
.ftr-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.ftr-cols h4{font-family:"Figtree";text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--gold);margin-bottom:1rem}
.ftr-cols a{display:block;padding:.32rem 0;font-size:.93rem;color:var(--muted)}
.ftr-cols a:hover{color:var(--ink)}
.ftr-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding-top:1.6rem;font-size:.81rem;color:var(--muted)}

/* ---- responsive ---- */
@media(max-width:980px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}.mnav{display:flex}
  .hero-in,.about-in,.feat-in,.homes-in,.careers-in{grid-template-columns:1fr;gap:2.4rem}
  .hero-art{order:-1}
  .flow,.chips-grid{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .loc-grid{grid-template-columns:1fr 1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .statwall,.flow,.chips-grid,.trust-grid,.loc-grid,.ftr-cols{grid-template-columns:1fr}
  .cta-row .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
}