/* ===================================================================
   MUFT BIJLI MP - premium motion layer
   Loaded after site.css on every public page. Adds the motion-led look:
   serif accents, grain, custom cursor, preloader, the cinematic home
   page, and richer inner-page banners. Every animated element is fully
   visible without JavaScript; motion.js only animates what is already
   on screen, and nothing moves for visitors who ask for reduced motion.
   =================================================================== */
:root{
  --ink-dark:#02132F; --night:#042149; --night-2:#0A3368;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
h1 em,h2 em,.hx-title em,.fin-title em,.xp-line em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
h2 em{color:var(--sun)}
body{background:#fff}
.btn>span{display:inline-flex;align-items:center;gap:8px;pointer-events:none}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(10px)}
.btn-glass:hover{background:#fff;color:var(--g)}
.btn-dark{background:var(--night);color:#fff}
.btn-dark:hover{background:var(--g-900);color:#fff;transform:translateY(-2px)}

/* ------------------------------------------------------------ grain overlay */
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* --------------------------------------------------------------- preloader */
#loader{position:fixed;inset:0;z-index:400;background:var(--ink-dark);display:none;place-items:center;color:#fff}
.js #loader.on{display:grid}
.ld-in{text-align:center}
.ld-stage{position:relative;width:min(440px,80vw);min-height:150px;margin:0 auto 22px;display:grid;place-items:center}
.ld-mark{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;display:grid;place-items:center}
.ld-mark img{position:relative;width:74%;height:auto;z-index:2}
.ld-ring{position:absolute;inset:0;border-radius:50%;padding:3px;
  background:conic-gradient(from 0deg,var(--sun),rgba(245,158,11,0) 35%,var(--g-500) 60%,rgba(79,155,255,0) 85%,var(--sun));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:ldSpin 1.2s linear infinite}
.ld-glow{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,.35),rgba(245,158,11,0) 65%);z-index:1}
@keyframes ldSpin{to{transform:rotate(360deg)}}
.ld-logo{position:relative;width:100%;overflow:hidden}
.ld-logo img{width:100%;height:auto;display:block}
.ld-logo b{font:800 2rem/1 var(--display);letter-spacing:.2em}
.ld-shine{position:absolute;top:0;bottom:0;left:-40%;width:30%;transform:skewX(-20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0))}
.ld-bar{width:min(260px,60vw);height:3px;border-radius:3px;background:rgba(255,255,255,.12);margin:0 auto 14px;overflow:hidden}
.ld-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--sun),var(--g-500));transform:scaleX(0);transform-origin:left}
.ld-count{font:600 13px/1 var(--font);color:#A8BDD9;letter-spacing:.2em}

/* ------------------------------------------------- header over the dark hero */
.page-home header.site{position:fixed;left:0;right:0;top:40px;background:transparent;border-bottom-color:transparent;
  transition:background .35s,top .35s,box-shadow .35s,border-color .35s}
.page-home header.site .menu>a{color:rgba(255,255,255,.82)}
.page-home header.site .menu>a:hover{background:rgba(255,255,255,.1);color:#fff}
.page-home header.site .menu>a.on{background:rgba(255,255,255,.14);color:#fff}
.page-home header.site .call-chip i{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--sun-400)}
.page-home header.site .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.page-home header.site .burger svg{color:#fff}
.page-home header.site .brand img{filter:none}
.page-home header.site.scrolled{top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom-color:var(--line-2)}
.page-home header.site.scrolled .menu>a{color:var(--ink-2)}
.page-home header.site.scrolled .menu>a:hover{background:var(--g-50);color:var(--g)}
.page-home header.site.scrolled .menu>a.on{background:var(--g);color:#fff}
.page-home header.site.scrolled .call-chip i{background:var(--sun-50);border-color:var(--sun-100);color:var(--sun-600)}
.page-home header.site.scrolled .burger{background:#fff;border-color:var(--line)}
.page-home header.site.scrolled .burger svg{color:var(--g)}
.page-home .brand .logo-dark{display:none}
.page-home header.site:not(.scrolled) .brand .logo-light{display:block}
.page-home header.site:not(.scrolled) .brand .logo-main{display:none}
.brand .logo-light{display:none}
@media (max-width:1180px){
  .page-home header.site .menu>a{color:var(--ink-2)}
  .page-home header.site .menu>a.on{background:var(--g);color:#fff}
}

/* =================================================================== HERO
   A full-screen photograph under a directional shade: dark where the words
   are, clear where the sun is. */
.hx{position:relative;min-height:100vh;min-height:100svh;background:var(--night);color:#D7E1F1;overflow:hidden;
  padding:calc(var(--navh) + 64px) 0 0;display:flex;flex-direction:column;justify-content:space-between}
.hx-media{position:absolute;inset:0;overflow:hidden}
.hx-media img{position:absolute;inset:-4% 0 0 0;width:100%;height:108%;object-fit:cover;object-position:62% 60%;will-change:transform;
  animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translateX(-1.5%)}}
.hx-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(2,19,47,.94) 0%,rgba(2,19,47,.82) 32%,rgba(2,19,47,.35) 62%,rgba(2,19,47,.15) 100%),
  linear-gradient(180deg,rgba(2,19,47,.55) 0%,rgba(2,19,47,0) 26%,rgba(2,19,47,0) 62%,rgba(2,19,47,.85) 100%)}
.hx .grain{opacity:.06}
.hx-grid{position:relative;z-index:2;box-sizing:border-box;display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center;width:100%;flex:1}
.hx-eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#FCE2BF;backdrop-filter:blur(8px)}
.hx-eyebrow::before{display:none}
.hx-title{color:#fff;font-size:clamp(2.5rem,4.6vw,4.3rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 24px;font-weight:700;
  text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hx-title .ln{display:block}
.hx-title em{color:var(--sun-400);font-size:1.08em;letter-spacing:-.02em}
.hx-lead{font-size:clamp(1.02rem,1.25vw,1.16rem);color:#CCD9EA;max-width:33em;margin-bottom:28px}
.hx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hx-proof{display:flex;align-items:center;gap:16px}
.hx-proof p{margin:0;font-size:14.5px;color:#BCCCE2;line-height:1.45}
.hx-proof b{color:#fff;font-size:15.5px}
.hx-avatars{display:flex}
.hx-avatars i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(2,19,47,.9);margin-left:-10px;
  background:var(--sun);color:#fff}
.hx-avatars i:first-child{margin-left:0}
.hx-avatars i:nth-child(2){background:var(--g-500)}
.hx-avatars i:nth-child(3){background:#fff;color:var(--g)}
.hx-avatars svg{width:19px;height:19px}

.hx-card{position:relative;z-index:3;background:#fff;color:var(--ink);border-radius:26px;padding:28px;
  box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.6) inset;justify-self:end;width:100%;max-width:410px}
.hx-card-head{display:flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--sun-600);margin-bottom:10px}
.hx-card-head span{width:32px;height:32px;border-radius:10px;background:var(--sun-50);display:grid;place-items:center}
.hx-card-head svg{width:17px;height:17px}
.hx-card h3{font-size:23px;margin-bottom:4px;color:var(--ink)}
.hx-card-sub{color:var(--ink-3);font-size:14px;margin-bottom:16px}
.hx-card label{color:var(--ink-3)}
.hx-card .mini-out div{background:var(--g-50)}
.hx-card .mini-out b{color:var(--g);font-size:19px}
.hx-card-note{display:flex;gap:7px;align-items:center;justify-content:center;margin:14px 0 0;font-size:12.8px;color:var(--ink-3)}
.hx-card-note svg{width:15px;height:15px;color:var(--g-500)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#4F9BFF;flex:0 0 8px;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

.hx-bar-wrap{width:100%;position:relative;z-index:3;margin-top:40px;padding-bottom:28px}
.hx-bar{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);border-radius:22px;overflow:hidden}
.hx-bar>div{display:flex;gap:14px;align-items:center;padding:20px 22px;border-left:1px solid rgba(255,255,255,.1)}
.hx-bar>div:first-child{border-left:0}
.hx-bar i{width:44px;height:44px;flex:0 0 44px;border-radius:13px;background:rgba(242,140,27,.16);color:var(--sun-400);display:grid;place-items:center}
.hx-bar i svg{width:21px;height:21px}
.hx-bar b{display:block;color:#fff;font:700 15.5px/1.2 var(--display)}
.hx-bar span{font-size:13px;color:#AFC2DC;line-height:1.35}

/* ======================================================= EXPANDING PHOTO */
.xp{position:relative;background:var(--night)}
.xp-pin{height:100vh;height:100svh;position:relative;display:grid;place-items:center;overflow:hidden}
.xp-frame{position:absolute;inset:0;margin:auto;width:100%;height:100%;overflow:hidden;
  clip-path:inset(0 0 0 0 round 0)}
.xp-frame img{width:100%;height:100%;object-fit:cover}
.xp-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,19,47,.35),rgba(2,19,47,.75))}
.xp-text{position:relative;z-index:2;text-align:center;max-width:1000px;padding:0 24px;color:#fff}
.xp-kicker{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--sun-400);font-weight:700;margin-bottom:18px}
.xp-line{color:#fff;font-size:clamp(2rem,5.4vw,4.6rem);line-height:1.08;letter-spacing:-.03em}
.xp-line em{color:var(--sun-400)}
.xp-line .w{display:inline-block}

/* ================================================================== FACTS */
.facts{background:var(--night);padding:90px 0;border-top:1px solid rgba(255,255,255,.06)}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:10px 28px;border-left:1px solid rgba(255,255,255,.1)}
.fact:first-child{border-left:0;padding-left:0}
.fact b{display:block;font:700 clamp(2rem,3.6vw,3.2rem)/1.05 var(--display);color:#fff;letter-spacing:-.03em;margin-bottom:8px}
.fact span{color:#A8BDD9;font-size:14.5px;line-height:1.45;display:block}

/* ============================================================ BIG MARQUEE */
.bigmarq{background:var(--night);padding:30px 0 70px;overflow:hidden}
.bm-row{overflow:hidden;white-space:nowrap}
.bm-track{display:inline-flex;will-change:transform}
.bm-track span{font:800 clamp(3rem,9vw,8.5rem)/1.05 var(--display);letter-spacing:-.04em;color:#fff;padding:0 .35em;display:inline-flex;align-items:center}
.bm-track span::after{content:"";width:.28em;height:.28em;border-radius:50%;background:var(--sun);margin-left:.7em}
.bm-track span.o{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.4)}

/* =============================================================== SERVICES */
.svc{background:#fff}
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-card{display:block;border-radius:26px;overflow:hidden;background:var(--cream);color:inherit;position:relative;
  transform-style:preserve-3d;transition:box-shadow .35s;will-change:transform}
.svc-card:hover{box-shadow:0 30px 60px rgba(2,19,47,.16)}
.svc-img{aspect-ratio:16/11;overflow:hidden;position:relative}
.svc-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform .9s var(--ease-out)}
.svc-card:hover .svc-img img{transform:scale(1.16)}
.svc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,26,17,0) 40%,rgba(5,26,17,.5))}
.svc-body{padding:26px 26px 28px;position:relative}
.svc-no{position:absolute;right:24px;top:22px;font:800 38px/1 var(--display);color:var(--sand)}
.svc-ico{width:56px;height:56px;border-radius:18px;background:var(--g);color:var(--sun);display:grid;place-items:center;margin:-54px 0 16px;
  position:relative;z-index:2;box-shadow:0 12px 26px rgba(1,41,103,.35);transition:transform .5s var(--ease-out),background .3s}
.svc-card:hover .svc-ico{transform:rotate(-8deg) scale(1.06);background:var(--sun);color:#fff}
.svc-ico svg{width:26px;height:26px}
.svc-body h3{font-size:20px;margin-bottom:8px}
.svc-body p{color:var(--ink-3);font-size:15px;margin:0}
.svc-more{display:inline-flex;gap:6px;align-items:center;margin-top:16px;font-weight:700;color:var(--g);font-size:14.4px}
.svc-more svg{width:15px;height:15px;transition:transform .3s}
.svc-card:hover .svc-more svg{transform:translateX(5px)}

/* ================================================== HORIZONTAL JOURNEY */
.hz{background:var(--cream);position:relative;overflow:hidden}
.hz-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:90px 0}
.hz-head{width:100%;max-width:var(--maxw);margin:0 auto 44px;padding:0 24px;box-sizing:border-box}
.hz-head h2{max-width:16em}
.hz-head h2{font-size:clamp(2rem,4.2vw,3.6rem)}
.hz-progress{height:3px;background:var(--line);border-radius:3px;margin-top:26px;max-width:420px;overflow:hidden}
.hz-progress i{display:block;height:100%;width:100%;background:var(--sun);transform:scaleX(0);transform-origin:left}
.hz-track{display:flex;gap:28px;padding:0 max(24px,calc((100vw - var(--maxw))/2 + 24px));will-change:transform}
.hz-panel{flex:0 0 min(460px,82vw);background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 20px 50px rgba(2,19,47,.08);display:flex;flex-direction:column}
.hz-img{aspect-ratio:16/10;overflow:hidden}
.hz-img img{width:100%;height:100%;object-fit:cover}
.hz-body{padding:28px 30px 32px;position:relative}
.hz-no{position:absolute;right:26px;top:18px;font:800 64px/1 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--sun-200)}
.hz-ico{width:50px;height:50px;border-radius:15px;background:var(--sun-50);color:var(--sun-600);display:grid;place-items:center;margin-bottom:16px}
.hz-ico svg{width:24px;height:24px}
.hz-body h3{font-size:24px;margin-bottom:10px}
.hz-body p{color:var(--ink-3);margin:0}
.hz-end{background:var(--g);color:#fff;justify-content:center;padding:44px;align-items:flex-start}
.hz-end h3{color:#fff;font-size:32px;margin-bottom:10px}
.hz-end p{color:#D3DEEF;margin-bottom:26px}

/* ============================================================ ENERGY FLOW */
.flow{background:var(--night);color:#C3D2E6;position:relative;overflow:hidden}
.flow h2{color:#fff}
.flow p{color:#AFC2DC;font-size:17px}
.flow-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.flow-list{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.flow-list li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:18px}
/* The three figures under "Sunlight in, Savings out" are the money line of the
   page, so they take the leaf green from the logo rather than the orange used
   for everything else on this band. */
.flow-list b{display:block;font:700 26px/1.1 var(--display);color:var(--leaf-500)}
.flow-list span{font-size:13px;color:#A8BDD9}
.flow-art{background:radial-gradient(circle at 20% 20%,rgba(242,140,27,.18),rgba(255,255,255,.02) 55%);border:1px solid rgba(255,255,255,.08);
  border-radius:30px;padding:26px}
.flow-svg{width:100%;height:auto;overflow:visible}
.fl-path{fill:none;stroke:var(--sun);stroke-width:3;stroke-linecap:round;stroke-dasharray:8 10}
.fl-lbl{fill:#D3DEEF;font:600 14px var(--font)}
.fl-rays{transform-origin:90px 100px;animation:spin 14s linear infinite}

/* ================================================================ SUBSIDY */
.sub{background:var(--night);padding:0 0 110px}
.sub-box{position:relative;overflow:hidden;border-radius:36px;background:linear-gradient(125deg,#F28C1B 0%,#F7A541 60%,#FBC06A 100%);
  padding:64px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;color:var(--ink-dark)}
.sub-rays{position:absolute;left:-200px;bottom:-420px;width:900px;height:900px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.16) 0 6deg,transparent 6deg 18deg);animation:spin 80s linear infinite}
.sub-box>*:not(.sub-rays){position:relative;z-index:1}
.sub-copy .kicker{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.35);color:var(--ink-dark)}
.sub-copy .kicker::before{background:var(--ink-dark)}
.sub-copy h2{color:var(--ink-dark);font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:6px}
.sub-big{font:800 clamp(3.6rem,9vw,7.6rem)/1 var(--display);letter-spacing:-.05em;color:var(--ink-dark);margin:4px 0 16px}
.sub-copy p{color:#3B2A12;max-width:30em;margin-bottom:26px;font-size:16.5px}
.slabs{display:grid;grid-template-columns:1fr;gap:14px}
.slab{background:rgba(255,255,255,.92);border-radius:20px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;
  box-shadow:0 14px 30px rgba(120,60,0,.14)}
.slab small{font-weight:700;color:var(--ink-3);font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.slab b{font:800 28px/1 var(--display);color:var(--g)}
.slab.hot{background:var(--night);box-shadow:0 20px 40px rgba(2,19,47,.35)}
.slab.hot small{color:#A8BDD9}
.slab.hot b{color:var(--sun-400)}

/* ================================================================= WHY US */
.why2{background:#fff;overflow:hidden;position:relative}
.why2::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 1px 1px,rgba(1,41,103,.09) 1px,transparent 1.4px) 0 0/26px 26px;
  -webkit-mask:radial-gradient(ellipse 70% 55% at 50% 40%,#000,transparent 75%);mask:radial-gradient(ellipse 70% 55% at 50% 40%,#000,transparent 75%)}
.why2 .wrap{position:relative}
.w2-head{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:end;margin-bottom:46px}
.w2-head h2{margin-top:14px;font-size:clamp(2.1rem,3.8vw,3.3rem);line-height:1.06;letter-spacing:-.02em}
.w2-head p{color:var(--ink-3);font-size:17.5px;line-height:1.7;margin:0 0 6px;padding-left:22px;border-left:3px solid var(--sun)}

.w2-bento{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:250px 250px;gap:18px}
.w2-tile{position:relative;border-radius:28px;overflow:hidden;isolation:isolate}
.w2-photo{grid-row:1/3;margin:0;background:var(--g-900);box-shadow:0 40px 80px -30px rgba(2,19,47,.45)}
.w2-photo img{position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.w2-photo:hover img{transform:scale(1.05)}
.w2-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,26,17,0) 35%,rgba(4,26,17,.88) 100%);z-index:1}
.w2-photo figcaption{position:absolute;left:30px;right:30px;bottom:28px;z-index:2;color:#fff}
.w2-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:7px 13px;border-radius:99px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.w2-chip svg{width:14px;height:14px;color:var(--sun-400)}
.w2-photo figcaption b{display:block;font:800 clamp(1.5rem,2.3vw,2rem)/1.15 var(--display);margin:14px 0 8px}
.w2-photo figcaption small{display:block;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.78);max-width:440px}
.w2-badge{position:absolute;top:22px;right:22px;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:18px;
  background:rgba(4,26,17,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff}
.w2-badge b{font:800 34px/1 var(--display);color:var(--sun-400)}
.w2-badge span{font-size:11.5px;line-height:1.3;font-weight:600;color:rgba(255,255,255,.88)}

/* brand tile: the logo over a slow, breathing sun */
@property --w2a{syntax:'<angle>';inherits:false;initial-value:0deg}
.w2-brand{grid-column:2/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px;
  background:radial-gradient(120% 140% at 50% 110%,#0B4A9E 0%,#042149 55%,#02132F 100%)}
.w2-brand::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:3;pointer-events:none;
  background:conic-gradient(from var(--w2a),rgba(247,165,65,0) 0deg,var(--sun-400) 60deg,rgba(247,165,65,0) 130deg,rgba(79,155,255,0) 180deg,#4F9BFF 240deg,rgba(79,155,255,0) 310deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:w2spin 5s linear infinite}
@keyframes w2spin{to{--w2a:360deg}}
.w2-sun{position:absolute;left:50%;top:50%;width:0;height:0;z-index:0}
.w2-sun i{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid rgba(247,165,65,.35)}
.w2-sun i:nth-child(1){width:260px;height:260px;background:radial-gradient(circle,rgba(242,140,27,.5),rgba(242,140,27,0) 66%);border:0;animation:w2breathe 4s ease-in-out infinite}
.w2-sun i:nth-child(2){width:300px;height:300px;animation:w2ripple 4s ease-out infinite}
.w2-sun i:nth-child(3){width:300px;height:300px;animation:w2ripple 4s ease-out infinite 2s}
@keyframes w2breathe{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@keyframes w2ripple{0%{transform:translate(-50%,-50%) scale(.4);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}}
.w2-logo{position:relative;z-index:1;width:min(340px,82%);overflow:hidden;animation:w2float 5s ease-in-out infinite}
.w2-logo img{display:block;width:100%;height:auto}
.w2-logo b{font:800 26px/1.2 var(--display);color:#fff}
.w2-shine{position:absolute;top:0;bottom:0;left:-60%;width:36%;transform:skewX(-20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));animation:w2shine 4.5s ease-in-out infinite 1.2s}
@keyframes w2float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes w2shine{0%{left:-60%}35%,100%{left:130%}}
.w2-brand p{position:relative;z-index:1;margin:0;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#A8BDD9}
.w2-brand p span{width:8px;height:8px;border-radius:50%;background:#4F9BFF;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:w2dot 2s infinite}
@keyframes w2dot{70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* 25-year ring */
.w2-ringtile{background:var(--g-50);border:1px solid var(--g-100);display:flex;align-items:center;gap:20px;padding:26px}
.w2-ring{position:relative;width:118px;height:118px;flex:0 0 118px;display:grid;place-items:center}
.w2-ring svg{position:absolute;inset:0;width:100%!important;height:100%!important;transform:rotate(-90deg)}
.w2-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.w2-ring .bg{stroke:rgba(1,41,103,.1)}
.w2-ring .fg{stroke:var(--g-500);stroke-dasharray:327;stroke-dashoffset:0}
.w2-ring b{font:800 38px/1 var(--display);color:var(--g)}
.w2-ringtile strong{display:block;font:800 22px/1.1 var(--display);color:var(--ink)}
.w2-ringtile span{display:block;font-size:14px;color:var(--ink-3);margin-top:6px;line-height:1.5}

/* 12-month tile */
.w2-suntile{background:linear-gradient(140deg,#F7A541 0%,#F28C1B 55%,#D9730A 100%);color:#fff;padding:26px;display:flex;flex-direction:column;justify-content:flex-end}
.w2-suntile::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(255,255,255,.18) 0 1px,transparent 1px 16px);animation:w2turn 30s linear infinite;z-index:-1}
@keyframes w2turn{to{transform:rotate(360deg)}}
.w2-ic{position:absolute;top:22px;left:24px;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.w2-ic svg{width:22px;height:22px}
.w2-suntile b{display:flex;align-items:baseline;gap:8px;font:800 56px/1 var(--display)}
.w2-suntile b small{font-size:18px;font-weight:700}
.w2-suntile>span{font-size:14px;margin-top:8px;color:rgba(255,255,255,.9)}

/* six reasons, lit by the cursor */
.w2-reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.w2-card{--mx:50%;--my:50%;position:relative;overflow:hidden;background:var(--cream);border:1px solid var(--line-2);border-radius:24px;padding:28px 26px 26px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s,background .45s}
.w2-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(242,140,27,.16),transparent 70%)}
.w2-card:hover{transform:translateY(-6px);background:#fff;border-color:var(--sun-200);box-shadow:0 30px 60px -24px rgba(2,19,47,.25)}
.w2-card:hover::before{opacity:1}
.w2-num{position:absolute;top:18px;right:22px;font:800 44px/1 var(--display);color:transparent;-webkit-text-stroke:1.2px var(--sun-200);transition:-webkit-text-stroke-color .4s}
.w2-card:hover .w2-num{-webkit-text-stroke-color:var(--sun)}
.w2-card i{position:relative;width:52px;height:52px;border-radius:16px;background:var(--g);color:var(--sun-400);display:grid;place-items:center;margin-bottom:18px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s,color .4s}
.w2-card:hover i{background:var(--sun);color:#fff;transform:rotate(-8deg) scale(1.08)}
.w2-card i svg{width:24px;height:24px}
.w2-card h3{position:relative;font-size:18px;margin:0 0 8px}
.w2-card p{position:relative;font-size:14.5px;color:var(--ink-3);margin:0;line-height:1.6}
@media (prefers-reduced-motion:reduce){.w2-brand::before,.w2-sun i,.w2-logo,.w2-shine,.w2-brand p span,.w2-suntile::after{animation:none}}

/* ================================================================ PROJECTS */
.work{background:var(--cream)}
.gallery{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:280px 280px;gap:20px}
.g-item{position:relative;border-radius:26px;overflow:hidden;display:block;color:#fff;background:var(--night)}
.g-big{grid-row:span 2}
.g-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,19,47,0) 35%,rgba(2,19,47,.88) 100%);transition:opacity .4s}
.g-item:hover img{transform:scale(1.07)}
.g-kw{position:absolute;left:18px;top:18px;z-index:2;background:var(--sun);color:#fff;border-radius:999px;padding:6px 14px;font:800 13.5px var(--display)}
.g-body{position:absolute;left:0;right:70px;bottom:0;z-index:2;padding:22px 24px}
.g-meta{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-200);font-weight:700}
.g-body h3{color:#fff;font-size:19px;margin-top:6px;line-height:1.25}
.g-big .g-body h3{font-size:clamp(1.4rem,2.2vw,2rem)}
.g-body p{color:#D3DEEF;font-size:14.5px;margin:10px 0 0}
.g-arrow{position:absolute;right:20px;bottom:22px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);display:grid;place-items:center;transition:background .3s,transform .4s var(--ease-out)}
.g-item:hover .g-arrow{background:var(--sun);transform:rotate(-45deg)}

/* ==================================================================== FAQ */
.faqs{background:var(--cream)}
.faqs .faq{background:#fff;border-color:transparent;box-shadow:0 2px 10px rgba(2,19,47,.04)}
.faq .ans{overflow:hidden}

/* ================================================================ FINALE */
.finale{background:var(--night);text-align:center;padding:140px 0 200px;position:relative;overflow:hidden}
.finale-glow{position:absolute;left:50%;top:60%;width:900px;height:900px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(242,140,27,.35),rgba(242,140,27,0) 60%);pointer-events:none}
.finale .wrap{position:relative;z-index:2}
.fin-kicker{color:var(--sun-400);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:13px}
.fin-title{color:#fff;font-size:clamp(3.4rem,12vw,11rem);line-height:.95;letter-spacing:-.05em;margin:18px 0 40px;font-weight:800}
.fin-title em{color:var(--sun)}
.fin-btn{width:180px;height:180px;border-radius:50%;background:var(--sun);display:inline-grid;place-items:center;position:relative;color:#fff;
  box-shadow:0 30px 70px rgba(242,140,27,.45);transition:background .3s}
.fin-btn:hover{background:#fff;color:var(--g)}
.fin-btn svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.fin-btn text{font:800 12.5px var(--font);letter-spacing:.24em;fill:currentColor}
.fin-btn>span{width:64px;height:64px;border-radius:50%;background:var(--night);color:var(--sun);display:grid;place-items:center}
.fin-btn>span svg{position:static;width:26px;height:26px;animation:none;transform:rotate(-45deg)}
.page-home .pre-foot{display:none}
.page-home footer.site{padding-top:80px}

/* ================================================ INNER PAGES - richer */
.breadcrumbs{background:var(--night);border-radius:0 0 40px 40px}
.breadcrumbs h1{font-size:clamp(2.3rem,5.4vw,4.4rem);letter-spacing:-.035em}
.breadcrumbs::before{z-index:0}
.breadcrumbs .grain{z-index:1}
.card,.proj,.form-card,.calc-box{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .3s}

/* =================================================== JS-ONLY INITIAL STATES
   Hidden only once motion.js has confirmed GSAP is running (.gsap-on), so a
   blocked script never leaves an invisible page. */
.gsap-on [data-reveal],.gsap-on [data-stagger]>*{opacity:0}
.gsap-on .hx-copy>*,.gsap-on .hx-card,.gsap-on .hx-bar{opacity:0}

/* ============================================================ RESPONSIVE */
@media (max-width:1180px){
  .page-home header.site{top:40px}
}
@media (max-width:1024px){
  .hx{padding:calc(var(--navh) + 80px) 0 0;min-height:0}
  .hx-grid,.flow-grid,.sub-box{grid-template-columns:1fr;gap:44px}
  .hx-card{justify-self:start;max-width:520px}
  .hx-shade{background:linear-gradient(180deg,rgba(2,19,47,.85) 0%,rgba(2,19,47,.7) 45%,rgba(2,19,47,.92) 100%)}
  .hx-bar{grid-template-columns:1fr 1fr}
  .hx-bar>div:nth-child(3){border-left:0}
  .hx-bar>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .facts-grid{grid-template-columns:1fr 1fr;row-gap:36px}
  .fact:nth-child(3){border-left:0;padding-left:0}
  .svc-cards{grid-template-columns:1fr 1fr}
  .hz-pin{padding:80px 0}
  .hz-track{flex-direction:column;padding:0 24px;gap:22px}
  .hz-panel{flex:auto;width:100%}
  .w2-head{grid-template-columns:1fr;gap:18px}
  .w2-bento{grid-template-columns:1fr 1fr;grid-template-rows:420px 230px 220px}
  .w2-photo{grid-row:auto;grid-column:1/-1}
  .w2-brand{grid-column:1/-1}
  .w2-reasons{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .g-big{grid-column:1/-1;grid-row:auto;height:380px}
  .g-item{height:260px}
  .sub-box{padding:44px 32px}

}
@media (max-width:600px){
  .page-home header.site{top:0}
  .page-home .topbar-thin{display:none}
  .hx-title{font-size:clamp(2.4rem,11vw,3.4rem)}
  .facts{padding:64px 0}
  .fact{padding:0 14px}
  .fact:nth-child(odd){border-left:0;padding-left:0}
  .fact b{font-size:1.9rem}
  .svc-cards{grid-template-columns:1fr}
  .flow-list{grid-template-columns:1fr}
  .bigmarq{padding:10px 0 50px}
  .sub-box{padding:34px 22px;border-radius:26px}
  .slab{padding:16px 18px}
  .slab b{font-size:22px}
  .finale{padding:100px 0 140px}
  .fin-btn{width:150px;height:150px}
  .hx-bar{grid-template-columns:1fr}
  .hx-bar>div{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:15px 18px}
  .hx-bar>div:first-child{border-top:0}
  .hx-card{padding:22px}
  .hx-proof p{font-size:13.5px}
  .w2-bento{grid-template-columns:1fr;grid-template-rows:380px 210px auto auto;gap:14px}
  .w2-photo figcaption{left:22px;right:22px;bottom:22px}
  .w2-badge{top:16px;right:16px;padding:10px 12px}
  .w2-badge b{font-size:28px}
  .w2-ringtile,.w2-suntile{padding:22px}
  .w2-suntile{min-height:190px}
  .w2-ring{width:96px;height:96px;flex-basis:96px}
  .w2-ring b{font-size:30px}
  .w2-reasons{grid-template-columns:1fr;gap:14px}
  .w2-head p{padding-left:16px;font-size:16px}
  .w2-brand p{font-size:10.5px;letter-spacing:.12em;text-align:center}
  .gallery{grid-template-columns:1fr}
  .g-big{height:320px}
  .xp-line{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){
  .grain,.hx-media img,.fl-rays,.sub-rays,.fin-btn svg,.live-dot,.hx-scroll i::after{animation:none!important}
}

/* rotating ring text is clipped to its circle, and nothing may widen the page */
.fin-btn{overflow:hidden}
html{overflow-x:clip}
/* without the horizontal scroll (no script, reduced motion) the steps simply wrap */
html:not(.gsap-on) .hz-track{flex-wrap:wrap}
html:not(.gsap-on) .hz-panel{flex:1 1 320px}

/* GSAP owns the transform of anything it animates; a CSS transition on the
   same property would fight it and can leave an element part-way. */
.magnetic,.gsap-on [data-reveal],.gsap-on [data-stagger]>*,.hx-cta .btn{transition-property:background,border-color,color,box-shadow!important}

/* the client's logo carries a tagline, so it needs a little more height to stay legible */
header.site .brand img{max-height:58px;max-width:250px;width:auto;height:auto}
.brand-foot img{max-height:88px;max-width:min(340px,100%);width:auto;height:auto}
@media (max-width:1100px){header.site .brand img{max-width:210px}}
@media (max-width:600px){header.site .brand img{max-height:44px;max-width:180px}}

/* ============================================================ PHONE POLISH
   Last in the cascade on purpose: small-screen fixes found by testing every
   page at 320-768px. */
@media (max-width:600px){
  /* footer: brand and contact get the full width, the two link lists share a row */
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px 20px}
  .foot-brand,.foot-contact{grid-column:1/-1}
  .foot-contact a,.feat-list li,.foot-contact span{overflow-wrap:anywhere}
  /* 16px stops iPhones zooming the page when a field is tapped */
  input,select,textarea{font-size:16px!important}
}
@media (max-width:480px){
  /* long button labels wrap instead of running off the screen */
  .btn{white-space:normal;text-align:center;max-width:100%}
  .btn-lg{padding:15px 22px;font-size:15px}
}

/* subsidy slab: central + state split under the size */
.slab small em{display:block;font-style:normal;font-size:11px;letter-spacing:0;text-transform:none;opacity:.75;margin-top:3px;font-weight:600}

/* ------------------------------------------------- what we have actually done
   The band under the headline facts, counted from the panel's own records: a
   number that goes up on its own is worth more than one somebody remembers to
   edit. Shown only when there is something to show. */
.facts-live{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;padding-top:34px;
  border-top:1px solid rgba(255,255,255,.1)}
.facts-live div{text-align:center}
.facts-live b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);
  letter-spacing:-.03em;color:var(--sun)}
.facts-live span{display:block;margin-top:6px;font-size:13.4px;color:#C3D2E6;letter-spacing:.03em}
@media (max-width:760px){.facts-live{grid-template-columns:1fr;gap:26px;margin-top:30px;padding-top:26px}}