/* ==========================================================================
   Tat:vm — Design System v2 · Earthy · Vibrant · Human · Tech-forward
   Palette: ivory / maroon #8E1F24 / lime #9FB63D / blush-pink footer #F6D7DA
   ========================================================================== */

:root{
  --ivory:#FBF7F0;
  --cream:#F5EDDF;
  --sand:#EFE5D3;
  --blush:#F6D7DA;           /* footer light pink */
  --blush-deep:#EFC3C8;
  --red:#8E1F24;             /* brand maroon */
  --red-deep:#6E1417;
  --green:#9FB63D;           /* brand lime */
  --green-deep:#7C922B;
  --char:#2B2420;            /* warm charcoal */
  --ink:#3A3128;
  --taupe:#8B7C6B;
  --line:#E5D9C6;
  --white:#FFFFFF;

  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --font-sans:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;

  --gutter:clamp(20px,4.5vw,72px);
  --header:84px;
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-soft:0 18px 50px -18px rgba(66,42,30,.22);
  --shadow-lift:0 30px 70px -25px rgba(110,20,23,.28);

  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--ivory);
  color:var(--ink);
  font-size:16px;line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--red);color:#fff}

/* ---------- typography ---------- */
.display{
  font-family:var(--font-serif);
  font-weight:560;
  font-size:clamp(2.6rem,6vw,4.9rem);
  line-height:1.02;
  letter-spacing:-.02em;
  font-variation-settings:'SOFT' 60,'WONK' 1;
}
.h1{font-family:var(--font-serif);font-weight:560;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.015em;font-variation-settings:'SOFT' 50}
.h2{font-family:var(--font-serif);font-weight:560;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.12;letter-spacing:-.01em}
.h3{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.2}
.h4{font-family:var(--font-sans);font-weight:700;font-size:1.05rem;line-height:1.3;letter-spacing:.01em}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:var(--taupe);font-weight:500}
p{color:var(--taupe);font-weight:500}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.72rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--red);
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--green);border-radius:2px}
.eyebrow.center::after{content:'';width:26px;height:2px;background:var(--green);border-radius:2px}
.eyebrow.light{color:var(--red)}
.mt-sm{margin-top:.8rem}.mt-md{margin-top:1.4rem}.mt-lg{margin-top:2.4rem}
.word{font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--green-deep)}
.center{text-align:center}
.on-dark p{color:rgba(255,255,255,.78)}
.on-dark .h1,.on-dark .h2,.on-dark .h3,.on-dark .h4{color:#fff}
.on-dark .lead{color:rgba(255,255,255,.82)}

/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,9vw,128px);position:relative}
.bg-cream{background:var(--cream)}
.bg-sand{background:var(--sand)}
.bg-community{background:linear-gradient(rgba(246,241,231,.84),rgba(246,241,231,.84)),url("../../Csr%20img/Rooted%20in%20the%20neighbourhood..png") center/cover no-repeat}
.bg-red{background:linear-gradient(155deg,var(--red) 0%,var(--red-deep) 100%);color:#fff}
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.grid>*{min-width:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.section-head{max-width:640px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.split{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.section-head.split>*{min-width:0}
.divider{display:flex;justify-content:center;gap:12px;color:var(--red);font-size:.9rem;margin-block:1.6rem;letter-spacing:.4em}
.divider.light{color:var(--red)}
.asym{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,84px);align-items:center}
.asym.rev{grid-template-columns:.95fr 1.05fr}
.asym.rev>.reveal-img{order:2}
@media(max-width:1040px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .asym,.asym.rev{grid-template-columns:1fr}
  .asym.rev>.reveal-img{order:0}
  .tattva-stage{grid-template-columns:1fr}
  .tattva-panel{min-height:0}
  .section-head.split{align-items:flex-start}
}
@media(max-width:920px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .hero-inner{padding-top:calc(var(--header) + 26px)}
}
@media(max-width:760px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .section{padding-block:64px}
  .section-head.split{flex-direction:column;align-items:flex-start}
  .hero-ctas{flex-direction:column;align-items:flex-start}
  .btn{justify-content:center}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .poem .stanza{font-size:clamp(1.02rem,4vw,1.3rem)}
}
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .container{padding-inline:18px}
  :root{--header:74px}
  .hero .display{font-size:clamp(2.1rem,11vw,3rem)}
  .hero .lead{font-size:1rem}
  .site-header .bar{padding-inline:18px;height:74px}
  .brand img{height:34px}
  .stat-row{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .fbtn span{display:none}
  .fbtn{padding:.55rem}
  .fbtn i{width:40px;height:40px}
  .float-main{width:52px;height:52px}
}

/* ---------- buttons & links ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  padding:1rem 1.7rem;border-radius:999px;
  font-weight:700;font-size:.92rem;letter-spacing:.02em;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .35s,color .35s;
  overflow:hidden;isolation:isolate;
}
.btn .arrow{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .arrow{transform:translateX(6px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 14px 34px -12px rgba(142,31,36,.55)}
.btn-primary::after{content:'';position:absolute;inset:0;background:var(--red-deep);border-radius:inherit;z-index:-1;opacity:0;transition:opacity .4s}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 44px -14px rgba(142,31,36,.65)}
.btn-primary:hover::after{opacity:1}
.btn-light{background:rgba(255,255,255,.94);color:var(--red);box-shadow:0 14px 34px -14px rgba(43,36,32,.35)}
.btn-light:hover{transform:translateY(-3px)}
.btn-outline{border:1.5px solid rgba(43,36,32,.28);color:var(--char)}
.btn-outline:hover{border-color:var(--red);color:var(--red);transform:translateY(-3px)}
.btn-green{background:var(--green);color:#26301a;box-shadow:0 14px 34px -12px rgba(159,182,61,.55)}
.btn-green:hover{transform:translateY(-3px);background:var(--green-deep);color:#fff}
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:.9rem;color:var(--red);
  padding-bottom:4px;position:relative;
}
.link-arrow::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:currentColor;border-radius:2px;transform:scaleX(.35);transform-origin:left;transition:transform .5s var(--ease)}
.link-arrow:hover::after{transform:scaleX(1)}
.link-arrow .arrow{transition:transform .45s var(--ease)}
.link-arrow:hover .arrow{transform:translateX(5px)}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:var(--header);padding-inline:var(--gutter);
  max-width:1440px;margin-inline:auto;min-width:0;
}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand img{height:46px;width:auto;transition:height .4s}
.brand .mark{filter:drop-shadow(0 2px 10px rgba(43,36,32,.18))}
.nav-desktop{display:flex;align-items:center;gap:.35rem}
.nav-desktop>.nav-item>a{
  position:relative;display:inline-block;padding:.55rem .85rem;
  font-size:.86rem;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.92);
  border-radius:999px;transition:color .3s;
}
.nav-desktop>.nav-item>a::after{
  content:'';position:absolute;left:50%;bottom:6px;translate:-50% 0;width:0;height:2px;
  background:var(--green);border-radius:2px;transition:width .4s var(--ease);
}
.nav-desktop>.nav-item>a:hover::after,.nav-desktop>.nav-item.active>a::after{width:34%}
.site-header.solid{background:rgba(251,247,240,.9);backdrop-filter:blur(14px);box-shadow:0 10px 40px -18px rgba(66,42,30,.25)}
.site-header.solid .nav-desktop>.nav-item>a{color:var(--ink)}
.site-header.solid .nav-desktop>.nav-item>a:hover,.site-header.solid .nav-desktop>.nav-item.active>a{color:var(--red)}
.site-header.hidden{transform:translateY(-110%)}
/* when the mobile menu is open, let clicks reach the menu (keep burger usable) */
.site-header.menu-open{pointer-events:none}
.site-header.menu-open .burger{pointer-events:auto}
.site-header.menu-open .brand{visibility:hidden}
.header-cta{flex-shrink:0;display:flex;align-items:center;gap:1rem}
.header-cta .btn{white-space:nowrap}
/* dropdown */
.nav-item{position:relative}
.dd{
  position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;
  min-width:230px;background:#fff;border-radius:var(--r-md);
  padding:.7rem;box-shadow:var(--shadow-lift);border:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);
  transition:all .4s var(--ease);
}
.nav-item:hover .dd,.nav-item:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.dd a{
  display:flex;align-items:center;gap:.7rem;padding:.62rem .9rem;border-radius:10px;
  font-size:.88rem;font-weight:600;color:var(--ink);transition:all .25s;
}
.dd a:hover{background:var(--cream);color:var(--red);padding-left:1.1rem}
.dd a svg{width:17px;height:17px;color:var(--red);flex-shrink:0}
/* burger */
.burger{display:none;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);place-items:center;transition:background .3s}
.site-header.solid .burger{background:var(--red)}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:4.5px auto;border-radius:2px;transition:all .4s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.site-header.solid .burger span{background:#fff}
@media(max-width:1060px){
  .nav-desktop,.header-cta .btn{display:none}
  .burger{display:grid}
  .brand img{height:40px}
  .site-header .bar{gap:1rem}
}
/* mobile menu */
.mnav{
  position:fixed;inset:0;z-index:880;background:var(--ivory);
  display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--header) + 24px) var(--gutter) 40px;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .7s var(--ease-out);
  overflow-y:auto;
}
.mnav.open{clip-path:circle(150% at calc(100% - 46px) 46px)}
.mnav a.mlink{
  font-family:var(--font-serif);font-size:clamp(1.7rem,7vw,2.4rem);font-weight:560;color:var(--char);
  padding:.45rem 0;display:flex;align-items:baseline;gap:1rem;
  opacity:0;transform:translateY(24px);transition:all .5s var(--ease);
}
.mnav.open a.mlink{opacity:1;transform:none}
.mnav a.mlink em{font-family:var(--font-sans);font-style:normal;font-size:.7rem;font-weight:800;color:var(--green-deep);letter-spacing:.15em}
.mnav a.mlink:hover{color:var(--red)}
.mnav .msub{display:none;padding-left:1.6rem;margin-top:.2rem}
.mnav .msub a{font-family:var(--font-sans);font-size:.95rem;font-weight:700;color:var(--taupe);padding:.4rem 0;display:block}
.mnav .msub a:hover{color:var(--red)}
.mnav-foot{margin-top:auto;padding-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--char)}
.hero video,.hero .hero-fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero video{opacity:.9;animation:heroIn 1.6s var(--ease-out) both}
@keyframes heroIn{from{transform:scale(1.08);opacity:0}to{transform:scale(1);opacity:.9}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,36,32,.42) 0%,rgba(43,36,32,.12) 40%,rgba(58,15,17,.62) 100%)}
.hero-inner{position:relative;padding-bottom:clamp(84px,11vw,150px);padding-top:calc(var(--header) + 40px);width:100%}
.hero .display{color:#fff;max-width:15ch;font-size:clamp(2rem,4.4vw,3.4rem)}
.hero .lead{color:rgba(255,255,255,.85);max-width:46ch;margin-top:1.1rem;font-size:clamp(1rem,1.3vw,1.12rem)}
.hero-inner>*{min-width:0}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
.hero-scroll{
  position:absolute;bottom:2.2rem;right:var(--gutter);
  display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.65);
  font-size:.68rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;
}
.hero-scroll i{display:block;width:1px;height:38px;background:rgba(255,255,255,.4);animation:scrollHint 2.2s var(--ease) infinite}
@keyframes scrollHint{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1)}}
@media(max-width:640px){.hero-scroll{display:none}.hero{min-height:88svh}}

/* ---------- media ---------- */
img{display:block;max-width:100%;height:auto}
.media-mask{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.media-mask img{aspect-ratio:4/3;width:100%;object-fit:cover;display:block;opacity:1;transition:transform 1.2s var(--ease)}
.media-mask:hover img{transform:scale(1.045)}
.media-mask img.portrait{aspect-ratio:4/5}
.media-mask img.wide{aspect-ratio:21/10}
.media-chip{
  position:absolute;left:18px;bottom:18px;background:rgba(251,247,240,.9);backdrop-filter:blur(8px);
  max-width:calc(100% - 36px);border-radius:999px;padding:.5rem 1rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);overflow-wrap:anywhere;
}

/* ---------- reveal animations ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}.reveal.d4{transition-delay:.48s}
.reveal-img{clip-path:none;transition:clip-path 1.1s var(--ease-out)}
.reveal-img.in{clip-path:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-img{opacity:1;transform:none;clip-path:none;transition:none}
  .hero video{animation:none}
}

/* ---------- cards ---------- */
.card{
  background:#fff;border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);
  border:1px solid var(--line);box-shadow:0 10px 30px -18px rgba(66,42,30,.14);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.card .h4{color:var(--char)}
.card p{font-size:.95rem}

/* icon chip */
.ico-chip{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blush) 0%,var(--blush-deep) 100%);
  color:var(--red);margin-bottom:1.1rem;transition:transform .45s var(--ease);
}
.ico-chip svg{width:24px;height:24px}
.card:hover .ico-chip{transform:rotate(-6deg) scale(1.06)}
.ico-chip.green{background:linear-gradient(140deg,#E9F0D4,#D6E3B4);color:var(--green-deep)}
.ico-chip.cream{background:var(--cream);color:var(--taupe)}

/* ---------- project cards ---------- */
.proj-card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 12px 34px -20px rgba(66,42,30,.18);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.proj-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift)}
.pm{position:relative;overflow:hidden}
.pm img{aspect-ratio:16/10;width:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.proj-card:hover .pm img{transform:scale(1.07)}
.coming-soon-media{position:relative;overflow:hidden}
.coming-soon-media::after{content:'';position:absolute;inset:0;background:rgba(43,36,32,.3);backdrop-filter:blur(3px);pointer-events:none}
.coming-soon-badge{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:.75rem 1.25rem;border:1px solid rgba(255,255,255,.55);border-radius:14px;background:rgba(251,247,240,.2);backdrop-filter:blur(12px);box-shadow:0 12px 32px rgba(43,36,32,.22);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.page-hero .coming-soon-badge{top:50%;left:auto;right:var(--gutter);transform:translateY(-50%)}
.coming-soon-media img{filter:saturate(.82)}
.ptags{position:absolute;top:16px;left:16px;display:flex;gap:.5rem}
.tag{
  background:rgba(251,247,240,.92);backdrop-filter:blur(6px);color:var(--red);
  border-radius:999px;padding:.42rem .95rem;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.tag.dark{background:var(--red);color:#fff}
.tag.green{background:var(--green);color:#26301a}
.explore-badge{
  position:absolute;right:16px;bottom:16px;translate:0 12px;opacity:0;
  background:rgba(43,36,32,.82);backdrop-filter:blur(6px);color:#fff;
  border-radius:999px;padding:.55rem 1.1rem;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  transition:all .5s var(--ease);
}
.proj-card:hover .explore-badge{translate:0 0;opacity:1}
.pb{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:.55rem}
.pn{font-family:var(--font-serif);font-size:1.45rem;font-weight:600;color:var(--char);line-height:1.15}
.pmeta{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.78rem;font-weight:700;color:var(--taupe);letter-spacing:.02em}
.pmeta span{display:inline-flex;align-items:center;gap:.4rem}
.pmeta svg{width:14px;height:14px;color:var(--red)}
.ppos{font-size:.92rem;color:var(--taupe)}
.pcta{margin-top:auto;padding-top:.7rem;font-weight:800;font-size:.85rem;color:var(--red);display:inline-flex;align-items:center;gap:.5rem}
.pcta .arrow{transition:transform .45s var(--ease)}
.proj-card:hover .pcta .arrow{transform:translateX(6px)}

/* ---------- tattvas (all five together) ---------- */
.tattva-stage{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center;
}
@media(max-width:920px){.tattva-stage{grid-template-columns:1fr}}
.pent-wrap{position:relative;display:grid;place-items:center;padding:clamp(8px,3vw,24px)}
@media(max-width:760px){.tattva-panel{padding:24px 20px}.tattva-detail .tname{font-size:clamp(1.6rem,8vw,2.1rem)}.tattva-nav{gap:.45rem}.tattva-nav button{padding:.45rem .7rem;font-size:.68rem;letter-spacing:.08em}}
.pent-svg{width:min(100%,560px);height:auto;overflow:visible;max-width:100%}
.tattva-stage{min-width:0}
.pnode{cursor:pointer}
.pnode:focus{outline:none}
.pnode circle.halo{transition:all .5s var(--ease)}
.pnode .lbl{font-family:var(--font-sans);font-weight:800;letter-spacing:.18em;font-size:11.5px;fill:var(--char);text-transform:uppercase;transition:fill .4s}
.pnode .lbl-sustain{font-size:8.5px;letter-spacing:.12em}
.pnode.active circle.halo{stroke-width:3}
.pnode.active .lbl{fill:var(--red)}
.pent-core{transition:transform .6s var(--ease)}
/* tattva detail panel */
.tattva-panel{
  position:relative;min-height:300px;border-radius:var(--r-xl);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);
  padding:clamp(28px,4vw,48px);overflow:hidden;
}
.tattva-panel::before{
  content:'';position:absolute;inset:auto -20% -55% -20%;height:75%;
  background:radial-gradient(ellipse at center,var(--tpc,var(--blush)) 0%,transparent 70%);
  opacity:.4;transition:background .8s;pointer-events:none;
}
.tattva-detail{position:relative;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tattva-detail.out{opacity:0;transform:translateY(14px)}
.tattva-detail .tname{font-family:var(--font-serif);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:560;color:var(--char)}
.tattva-detail .tsub{margin-top:.4rem;font-weight:800;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tpc,var(--red))}
.tattva-detail p{margin-top:1rem;max-width:44ch}
.tattva-detail .tico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--tpc,var(--red)) 14%,white);color:var(--tpc,var(--red));margin-bottom:1rem}
.tattva-detail .tico svg{width:28px;height:28px}
.tattva-nav{display:flex;gap:.5rem;margin-top:1.6rem;flex-wrap:wrap}
.tattva-nav button{
  padding:.5rem 1.05rem;border-radius:999px;border:1.5px solid var(--line);
  font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);
  transition:all .3s;
}
.tattva-nav button.active,.tattva-nav button:hover{border-color:var(--red);color:var(--red);background:#fff}
@media(max-width:560px){
  .pent-wrap{padding-inline:0}
  .tattva-panel{padding:24px 18px;border-radius:var(--r-md)}
  .tattva-detail .tname{font-size:clamp(1.7rem,9vw,2.2rem)}
  .tattva-detail p{font-size:.95rem}
  .tattva-nav{gap:.4rem}
  .tattva-nav button{flex:1 1 calc(50% - .4rem);padding:.55rem .45rem;font-size:.65rem;letter-spacing:.06em}
}

/* ---------- poem ---------- */
.poem-band{
  position:relative;overflow:hidden;
  background:url('../../Poem Section.png') center center / cover no-repeat;
}
.poem-band::before{display:none}
.poem{
  position:relative;max-width:760px;margin-inline:auto;text-align:center;
  font-family:var(--font-serif);color:var(--char);
}
.poem .stanza{
  font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.85;font-weight:480;
  font-style:italic;font-variation-settings:'SOFT' 80;
}
.poem .stanza + .stanza{margin-top:1.9rem}
.poem .stanza span{display:block;opacity:0;transform:translateY(18px);transition:all .8s var(--ease-out)}
.poem .stanza.in span{opacity:1;transform:none}
.poem .sig{
  margin-top:2.6rem;display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--font-sans);font-style:normal;font-size:.74rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--red);
}
.poem .sig::before,.poem .sig::after{content:'';width:44px;height:1.5px;background:var(--red);opacity:.4}
.poem-mark{width:66px;height:66px;margin:0 auto 1.8rem;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 16px 40px -12px rgba(142,31,36,.5)}
.poem-mark svg{width:30px;height:30px}

/* ---------- stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(18px,3vw,40px)}
.stat{border-radius:var(--r-md);padding:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.stat .n{font-family:var(--font-serif);font-size:clamp(2rem,3.4vw,2.9rem);font-weight:560;color:#fff;line-height:1}
.stat .n em{font-style:normal;color:var(--green)}
.stat .l{margin-top:.5rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.75);line-height:1.45}
.stat.light{background:#fff;border:1px solid var(--line)}
.stat.light .n{color:var(--red)}
.stat.light .l{color:var(--taupe)}

/* ---------- approach steps ---------- */
.approach-step{display:grid;grid-template-columns:54px 1fr;gap:1.1rem;padding-block:1.15rem;border-bottom:1px solid var(--line);align-items:start}
.approach-step .num{
  font-family:var(--font-serif);font-size:1.15rem;font-weight:600;color:var(--red);
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--blush-deep);display:grid;place-items:center;background:#fff;
}
.approach-step h3{color:var(--char)}
.approach-step p{font-size:.92rem;margin-top:.25rem}

/* ---------- FAQ ---------- */
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.1rem 1.4rem;transition:box-shadow .4s,border-color .4s;
}
.faq-item + .faq-item{margin-top:.8rem}
.faq-item[open]{box-shadow:var(--shadow-soft);border-color:var(--blush-deep)}
.faq-item summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-weight:800;font-size:1rem;color:var(--char);cursor:pointer;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .pm{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--blush);color:var(--red);
  display:grid;place-items:center;font-weight:700;font-size:1.15rem;transition:transform .45s var(--ease),background .3s;
}
.faq-item[open] summary .pm{transform:rotate(45deg);background:var(--red);color:#fff}
.faq-item .ans{padding-top:.8rem;font-size:.94rem;color:var(--taupe);max-width:62ch}

/* ---------- article cards ---------- */
.art-card{
  display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:#fff;
  border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.art-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-soft)}
.art-card .am{position:relative;overflow:hidden}
.art-card .am img{aspect-ratio:16/10;width:100%;object-fit:cover;transition:transform 1s var(--ease)}
.art-card:hover .am img{transform:scale(1.06)}
.acat{
  position:absolute;top:14px;left:14px;background:rgba(251,247,240,.94);backdrop-filter:blur(6px);
  color:var(--red);padding:.38rem .85rem;border-radius:999px;
  font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.art-card .ab{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:.6rem;flex:1}
.art-card .ab h3{font-family:var(--font-serif);font-size:1.18rem;font-weight:600;color:var(--char);line-height:1.25}
.art-card .ameta{margin-top:auto;display:flex;justify-content:space-between;font-size:.74rem;font-weight:700;color:var(--taupe);letter-spacing:.05em;padding-top:.5rem}
.acat.news{background:var(--green);color:#26301a}

/* ---------- carousel ---------- */
.car-wrap{position:relative}
.car-track{
  display:flex;gap:clamp(18px,2.4vw,30px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 18px;margin:-4px -4px 0;scrollbar-width:none;
}
.car-track::-webkit-scrollbar{display:none}
.car-track>*{flex:0 0 min(400px,86vw);scroll-snap-align:start}
.car-track.slim>*{flex:0 0 min(340px,82vw)}
.car-btns{display:flex;gap:.6rem}
.car-btn{
  width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--char);transition:all .3s;
}
.car-btn:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.car-btn svg{width:18px;height:18px}

/* ---------- forms ---------- */
.field label,.field>span{display:block;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--char);margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%;padding:.95rem 1.15rem;border-radius:14px;border:1.5px solid var(--line);
  background:#fff;font-family:inherit;font-size:.95rem;color:var(--char);
  transition:border-color .3s,box-shadow .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(142,31,36,.09);
}
.field textarea{min-height:130px;resize:vertical}
.form-note{font-size:.78rem;color:var(--taupe)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form-grid>button{align-self:start}
.form-grid .full{grid-column:1/-1}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-ok{
  display:none;align-items:center;gap:.7rem;background:#EDF3DC;border:1px solid #C9DCA2;color:#4C5F1E;
  padding:.9rem 1.2rem;border-radius:14px;font-weight:700;font-size:.9rem;margin-top:1rem;
}
.form-ok.show{display:flex}
.form-ok svg{width:20px;height:20px;flex-shrink:0}

/* ---------- floating contact stack ---------- */
.float-stack{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:940;display:flex;flex-direction:column;align-items:flex-end;gap:.65rem}
.float-items{display:flex;flex-direction:column;align-items:flex-end;gap:.65rem}
.float-items>*{opacity:0;transform:translateY(14px) scale(.85);pointer-events:none;transition:all .45s var(--ease)}
.float-stack.open .float-items>*{opacity:1;transform:none;pointer-events:auto}
.float-items>*:nth-child(1){transition-delay:.16s}.float-items>*:nth-child(2){transition-delay:.11s}.float-items>*:nth-child(3){transition-delay:.06s}
.fbtn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.62rem .95rem .62rem .62rem;border-radius:999px;
  font-size:.78rem;font-weight:800;letter-spacing:.03em;box-shadow:0 12px 30px -10px rgba(43,36,32,.35);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.fbtn:hover{transform:translateY(-3px) scale(1.03)}
.fbtn i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22)}
.fbtn svg{width:17px;height:17px}
.fbtn.wa{background:#1FA855;color:#fff}
.fbtn.call{background:var(--red);color:#fff}
.fbtn.mail{background:#fff;color:var(--char);border:1px solid var(--line)}
.fbtn.bot{background:var(--char);color:#fff;cursor:pointer}
.float-main{
  width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;box-shadow:0 16px 40px -10px rgba(142,31,36,.55);
  transition:transform .5s var(--ease),background .3s;
}
.float-main:hover{transform:scale(1.08)}
.float-main svg{width:24px;height:24px;transition:transform .5s var(--ease),opacity .3s;grid-area:1/1}
.float-main .x{opacity:0;transform:rotate(-90deg) scale(.6)}
.float-stack.open .float-main{background:var(--char)}
.float-stack.open .float-main .c{opacity:0;transform:rotate(90deg) scale(.6)}
.float-stack.open .float-main .x{opacity:1;transform:none}
@media(max-width:640px){.fbtn span{display:none}.fbtn{padding:.55rem}.fbtn i{width:40px;height:40px}.float-main{width:52px;height:52px}}

/* ---------- footer (light pink) ---------- */
.site-footer{background:var(--blush);color:var(--char);position:relative;overflow:hidden}
.site-footer::before{
  content:'';position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(var(--red) 1.2px,transparent 1.2px);background-size:30px 30px;
}
.f-top{position:relative;display:grid;grid-template-columns:1.35fr .75fr .75fr .9fr;gap:clamp(28px,4vw,60px);padding-block:clamp(56px,7vw,88px) clamp(36px,4vw,56px)}
@media(max-width:980px){.f-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-top{grid-template-columns:1fr}}
.f-brand img{height:64px;width:auto}
.f-brand .tagline{margin-top:1rem;font-family:var(--font-serif);font-size:1.25rem;font-style:italic;color:var(--red);font-variation-settings:'SOFT' 80}
.f-brand p{margin-top:1rem;max-width:34ch;font-size:.92rem}
.f-social{display:flex;gap:.6rem;margin-top:1.5rem}
.f-social a{
  width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--red);
  transition:all .35s var(--ease);box-shadow:0 8px 20px -8px rgba(142,31,36,.3);
}
.f-social a:hover{background:var(--red);color:#fff;transform:translateY(-4px)}
.f-social svg{width:17px;height:17px}
.f-col h4{font-size:.74rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:1.1rem}
.f-col a{display:block;padding:.34rem 0;font-size:.92rem;font-weight:600;color:var(--ink);transition:all .25s;width:fit-content;position:relative}
.f-col a:hover{color:var(--red);padding-left:.55rem}
.f-col .f-contact li{display:flex;gap:.7rem;align-items:flex-start;padding:.34rem 0;font-size:.92rem;font-weight:600;color:var(--ink)}
.f-col .f-contact svg{width:16px;height:16px;color:var(--red);flex-shrink:0;margin-top:4px}
.f-news{
  position:relative;margin-top:1.2rem;display:flex;gap:.5rem;background:#fff;border-radius:999px;padding:.4rem;
  box-shadow:0 10px 26px -12px rgba(142,31,36,.25);max-width:400px;
}
.f-news input{flex:1;border:none;background:none;padding:.55rem 1rem;font-family:inherit;font-size:.9rem;color:var(--char);min-width:0}
.f-news input:focus{outline:none}
.f-news button{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;transition:background .3s,transform .3s}
.f-news button:hover{background:var(--red-deep);transform:scale(1.06)}
.f-news svg{width:17px;height:17px}
.f-bottom{
  position:relative;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding-block:1.4rem;border-top:1.5px solid rgba(142,31,36,.14);font-size:.78rem;font-weight:600;color:var(--ink);
}
.f-bottom a{color:var(--red)}
.f-bottom a:hover{text-decoration:underline}
.f-cin{font-size:.72rem;letter-spacing:.04em;color:var(--taupe)}

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  position:relative;min-height:62vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--char);
}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.page-hero .hero-scrim{background:linear-gradient(180deg,rgba(43,36,32,.5) 0%,rgba(43,36,32,.18) 45%,rgba(58,15,17,.72) 100%)}
.page-hero .hero-inner{padding-bottom:clamp(48px,7vw,84px)}
.page-hero h1{color:#fff;max-width:16ch;font-size:clamp(2.1rem,4.4vw,3.4rem)}
.page-hero .lead{color:rgba(255,255,255,.85);margin-top:1rem;max-width:50ch}
.crumbs{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);
  margin-bottom:1.1rem;
}
.crumbs a{color:var(--red)}
.crumbs svg{width:12px;height:12px;opacity:.7}
.crumbs .sep{opacity:.6}

/* ---------- misc ---------- */
.marquee{overflow:hidden;background:var(--char);color:var(--ivory);padding-block:.9rem;position:relative}
.marquee-track{display:flex;gap:3.2rem;width:max-content;animation:mq 34s linear infinite;font-family:var(--font-serif);font-size:1.05rem;font-style:italic;letter-spacing:.02em;white-space:nowrap}
.marquee-track span{display:inline-flex;align-items:center;gap:3.2rem}
.marquee-track i{color:var(--green);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.badge-row{display:flex;gap:.6rem;flex-wrap:wrap}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1rem}
.spec{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.15rem;display:flex;gap:.8rem;align-items:center;min-width:0}
.spec>div,.spec>span{min-width:0;overflow-wrap:anywhere}
.spec a{overflow-wrap:anywhere}
.spec svg{flex-shrink:0}
.spec svg{width:22px;height:22px;color:var(--red);flex-shrink:0}
.spec strong,.spec b{display:block;font-size:1.05rem;color:var(--char);font-weight:800}
.spec span{display:block}
.spec small{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe)}
.map-embed{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--cream);box-shadow:var(--shadow-soft)}
.map-embed iframe{display:block;width:100%;height:260px;border:0}
.map-embed + .btn{width:fit-content}
.project-promo{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--char);box-shadow:var(--shadow-soft);color:#fff;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.project-promo:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.project-promo-media{position:relative;min-height:230px;overflow:hidden;background:var(--char)}
.project-promo-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,36,32,.08) 15%,rgba(43,36,32,.72) 100%);pointer-events:none}
.project-promo-media img{width:100%;height:100%;min-height:230px;object-fit:cover;filter:blur(5px) saturate(.72);transform:scale(1.05);transition:transform 1.2s var(--ease),filter .8s var(--ease)}
.project-promo:hover .project-promo-media img{transform:scale(1.1);filter:blur(3px) saturate(.9)}
.project-promo-media .coming-soon-badge{top:50%;left:50%;transform:translate(-50%,-50%);font-size:.76rem;padding:.85rem 1.4rem;background:rgba(251,247,240,.24)}
.project-promo-kicker{position:absolute;z-index:1;left:22px;bottom:20px;color:rgba(255,255,255,.8);font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.project-promo-content{padding:clamp(24px,3vw,34px)}
.project-promo-content p:not(.eyebrow){color:rgba(255,255,255,.74);font-size:.92rem}
.project-promo-content .eyebrow{color:var(--red)}
.project-promo-content .h3{color:#fff}
.project-promo-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.project-promo-tags span{padding:.38rem .7rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:rgba(255,255,255,.72);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.project-promo-actions{display:flex;flex-wrap:wrap;gap:.65rem}
.project-promo-actions .btn{padding:.8rem 1.05rem;font-size:.8rem}
@media(prefers-reduced-motion:reduce){.project-promo,.project-promo-media img{transition:none}}
.timeline{position:relative;padding-left:34px}
.timeline::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--red),var(--green));border-radius:2px}
.tl-item{position:relative;padding-bottom:1.9rem}
.tl-item::before{content:'';position:absolute;left:-32px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--red);border:3.5px solid var(--ivory);box-shadow:0 0 0 2px var(--red)}
.tl-item .yr{font-family:var(--font-serif);font-weight:600;color:var(--red);font-size:1.05rem}
.tl-item p{margin-top:.25rem;font-size:.92rem}
.legal h2{margin-top:2.2rem}
.legal p{margin-top:.8rem;font-size:.95rem}
.legal ul{margin-top:.8rem;padding-left:1.2rem;list-style:disc}
.legal li{color:var(--taupe);margin-top:.4rem;font-size:.95rem}

/* loader */
.loader{position:fixed;inset:0;z-index:999;background:var(--ivory);display:grid;place-items:center;transition:opacity .6s var(--ease),visibility .6s}
.loader.done{opacity:0;visibility:hidden}
.loader .in{display:grid;place-items:center;gap:1.2rem}
.loader img{height:64px}
.loader .bar{width:150px;height:2.5px;background:var(--line);border-radius:99px;overflow:hidden}
.loader .bar i{display:block;height:100%;width:40%;background:var(--red);border-radius:99px;animation:load 1.1s var(--ease) infinite;will-change:transform}
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}

/* back to top */
.to-top{
  position:fixed;left:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:930;
  width:48px;height:48px;border-radius:50%;background:#fff;border:1.5px solid var(--line);
  display:grid;place-items:center;color:var(--char);box-shadow:var(--shadow-soft);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:all .45s var(--ease);
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--red);border-color:var(--red);color:#fff}
.to-top svg{width:18px;height:18px}

/* inline SVG icon sizing (auto-injected) */
i.ico{display:inline-flex;flex-shrink:0;vertical-align:-.18em;font-style:normal}
i.ico svg{width:1.2em;height:1.2em}
i.ico.lg svg{width:1.55em;height:1.55em}
i.ico.xl svg{width:2.2em;height:2.2em}
i.ico.red{color:var(--red)}i.ico.green{color:var(--green-deep)}i.ico.taupe{color:var(--taupe)}
.brand svg{height:46px;width:auto;transition:height .4s}
.f-brand>svg:first-child{height:64px;width:auto}
.loader svg{height:64px;width:auto}

/* generic util */
.chip-row{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{padding:.5rem 1rem;border-radius:999px;background:#fff;border:1.5px solid var(--line);font-size:.78rem;font-weight:700;color:var(--ink);transition:all .3s}
.chip:hover{border-color:var(--red);color:var(--red)}
.desktop-only{display:initial}
@media(max-width:920px){.desktop-only{display:none}}

/* ---------- batch-2 helpers (added for inner pages) ---------- */
.cta-wrap{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem}
.card-hl{margin-bottom:1.6rem}
.art-body{max-width:70ch;margin-top:-0.4rem;padding-left:0}
.art-body p{margin-top:.9rem;color:var(--ink,#4c443e)}
.art-body p.lead{font-size:1.12rem;color:var(--char)}
.page404{padding-top:5rem;padding-bottom:6rem}
.legal-sec{margin-top:2.2rem}
.legal-sec h2{margin-top:0}
.legal-sec p{font-size:.95rem}

/* loader bar must never widen page: parent clips via overflow, plus contain */
.loader .bar i{contain:layout style}



 /* ========== HOMEPAGE NEWS STYLES ========== */
  
  /* Enhanced styles for homepage news section */
  .homepage-news-header a:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px -10px rgba(159, 182, 61, 0.3);
  }
 
  .homepage-news-header a:hover svg {
    transform: translateX(4px);
  }
 
  /* Mobile responsive adjustments */
  @media (max-width: 768px) {
    .homepage-news {
      padding: 2.5rem 1rem !important;
    }
 
    .homepage-news-header {
      margin-bottom: 2rem !important;
    }
 
    .news-showcase {
      grid-template-columns: 1fr !important;
      gap: 1.5rem !important;
    }
 
    /* Mobile carousel view (optional horizontal scroll) */
    .homepage-news-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
    }
  }
 
  @media (max-width: 480px) {
    .homepage-news {
      padding: 2rem 0.8rem !important;
    }
 
    .homepage-news-header h2 {
      font-size: 1.6rem !important;
    }
  }
 
  /* Animation support */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ============ NEWS HERO ============ */
    .news-hero {
      position: relative;
      min-height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4rem 1.5rem;
      background: linear-gradient(135deg, #9FB63D 0%, #7C922B 50%, #3A3128 100%);
      overflow: hidden;
    }

    .news-hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(232, 178, 58, .15) 0%, transparent 70%);
      border-radius: 50%;
      animation: floatSlow 20s ease-in-out infinite;
      pointer-events: none;
    }

    .news-hero::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -5%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(232, 178, 58, .1) 0%, transparent 70%);
      border-radius: 50%;
      animation: floatSlow 25s ease-in-out infinite reverse;
      pointer-events: none;
    }

    .news-hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 700px;
      animation: fadeInUp .8s ease-out;
    }

    .news-hero h1 {
      font-size: clamp(2.2rem, 6vw, 3.8rem);
      font-weight: 700;
      color: #fff;
      margin-bottom: 1.2rem;
      letter-spacing: -.8px;
    }

    .news-hero .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-size: .9rem;
      color: #fff;
      margin-bottom: 1.5rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    .news-hero .hero-tag svg {
      width: 16px;
      height: 16px;
    }

    .news-hero p {
      font-size: clamp(1rem, 2vw, 1.1rem);
      line-height: 1.6;
      color: rgba(255,255,255,.85);
      max-width: 600px;
      margin: 0 auto;
    }

    /* ============ NEWS CONTROLS ============ */
    .news-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      align-items: center;
      justify-content: center;
      padding: 3rem 1.5rem;
      background: #FBF7F0;
      border-bottom: 1px solid #E5D9C6;
    }

    .news-search {
      flex: 1;
      min-width: 240px;
      max-width: 400px;
      position: relative;
    }

    .news-search input {
      width: 100%;
      padding: .9rem 1.2rem .9rem 2.8rem;
      border: 1.5px solid #E5D9C6;
      border-radius: 999px;
      font-size: .95rem;
      font-family: inherit;
      background: #fff;
      transition: all .3s ease;
    }

    .news-search input:focus {
      outline: none;
      border-color: #9FB63D;
      box-shadow: 0 0 0 3px rgba(159, 182, 61, .08);
    }

    .news-search::before {
      content: '🔍';
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1rem;
      opacity: .5;
    }

    .news-filters {
      display: flex;
      gap: .8rem;
      flex-wrap: wrap;
      align-items: center;
    }

    .filter-btn {
      padding: .7rem 1.2rem;
      border: 1.5px solid #E5D9C6;
      background: #fff;
      border-radius: 999px;
      font-size: .9rem;
      font-weight: 600;
      color: #3A3128;
      cursor: pointer;
      transition: all .3s ease;
      white-space: nowrap;
    }

    .filter-btn:hover,
    .filter-btn.active {
      background: #9FB63D;
      color: #fff;
      border-color: #9FB63D;
      transform: translateY(-2px);
    }

    /* ============ FEATURED NEWS ============ */
    .featured-news {
      padding: 4rem 1.5rem;
      background: #fff;
    }

    .featured-news-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
      max-width: 1400px;
      margin: 0 auto;
    }

    .featured-news-image {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      aspect-ratio: 4/3;
      box-shadow: 0 20px 50px -20px rgba(0,0,0,.2);
      animation: fadeInUp .8s ease-out .2s backwards;
    }

    .featured-news-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform .8s cubic-bezier(.16,.1,.3,1);
    }

    .featured-news-image:hover img {
      transform: scale(1.08);
    }

    .featured-news-text {
      animation: fadeInUp .8s ease-out .3s backwards;
    }

    .featured-news-tag {
      display: inline-block;
      padding: .5rem 1rem;
      background: linear-gradient(135deg, #7C922B, #9FB63D);
      color: #fff;
      border-radius: 50px;
      font-size: .8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 1rem;
    }

    .featured-news h2 {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      line-height: 1.25;
      color: #3A3128;
      margin-bottom: 1.2rem;
      font-weight: 700;
    }

    .featured-news-meta {
      display: flex;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      font-size: .9rem;
      color: #6B5B51;
    }

    .featured-news-meta span {
      display: flex;
      align-items: center;
      gap: .4rem;
    }

    .featured-news p {
      font-size: 1.05rem;
      line-height: 1.7;
      color: #6B5B51;
      margin-bottom: 2rem;
    }

    .featured-news-source {
      padding: .8rem 0;
      border-top: 1px solid #E5D9C6;
      border-bottom: 1px solid #E5D9C6;
      margin-bottom: 1.5rem;
      font-size: .9rem;
      color: #9B8A7F;
      font-weight: 600;
    }

    .featured-news-cta {
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      padding: 1rem 2rem;
      background: #9FB63D;
      color: #fff;
      border-radius: 999px;
      font-weight: 600;
      text-decoration: none;
      transition: all .3s ease;
      position: relative;
      overflow: hidden;
    }

    .featured-news-cta::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,.2);
      transition: left .3s ease;
    }

    .featured-news-cta:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px -10px rgba(159, 182, 61, .3);
    }

    .featured-news-cta:hover::before {
      left: 100%;
    }

    .featured-news-cta svg {
      width: 18px;
      height: 18px;
      transition: transform .3s ease;
    }

    .featured-news-cta:hover svg {
      transform: translateX(4px);
    }

    @media (max-width: 900px) {
      .featured-news-content {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }

    /* ============ NEWS GRID ============ */
    .news-grid-section {
      padding: 3rem 1.5rem 4rem;
      background: #fff;
    }

    .news-grid-header {
      text-align: center;
      margin-bottom: 3rem;
      animation: fadeInUp .8s ease-out;
    }

    .news-grid-header h3 {
      font-size: 1.8rem;
      color: #3A3128;
      margin-bottom: .5rem;
      font-weight: 700;
    }

    .news-grid-header p {
      color: #6B5B51;
      font-size: 1rem;
    }

    .news-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 2rem;
      max-width: 1400px;
      margin: 0 auto;
    }

    /* ============ NEWS CARD ============ */
    .news-card {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid #E5D9C6;
      transition: all .4s cubic-bezier(.16,.1,.3,1);
      display: flex;
      flex-direction: column;
      height: 100%;
      animation: fadeInUp .6s ease-out backwards;
    }

    .news-card:nth-child(1) { animation-delay: 0s; }
    .news-card:nth-child(2) { animation-delay: .1s; }
    .news-card:nth-child(3) { animation-delay: .2s; }
    .news-card:nth-child(n+4) { animation-delay: .3s; }

    .news-card:hover {
      border-color: #9FB63D;
      box-shadow: 0 20px 50px -20px rgba(0,0,0,.15);
      transform: translateY(-8px);
    }

    /* Image container */
    .news-card-image {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #E5D9C6;
      flex-shrink: 0;
    }

    .news-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform .6s cubic-bezier(.16,.1,.3,1);
    }

    .news-card:hover .news-card-image img {
      transform: scale(1.12);
    }

    /* Card badge */
    .news-card-badge {
      position: absolute;
      top: 1rem;
      left: 1rem;
      padding: .5rem .9rem;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(8px);
      color: #fff;
      border-radius: 50px;
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      z-index: 10;
      transition: all .3s ease;
    }

    .news-card:hover .news-card-badge {
      background: #9FB63D;
      transform: scale(1.05);
    }

    /* External badge */
    .news-card-external {
      position: absolute;
      top: 1rem;
      right: 1rem;
      padding: .4rem .7rem;
      background: rgba(255,255,255,.9);
      color: #3A3128;
      border-radius: 4px;
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
      z-index: 10;
      transition: all .2s ease;
    }

    .news-card:hover .news-card-external {
      background: #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,.15);
    }

    /* Card content */
    .news-card-content {
      padding: 1.5rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .news-card-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: #3A3128;
      line-height: 1.35;
      margin-bottom: .8rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .news-card-excerpt {
      font-size: .95rem;
      color: #6B5B51;
      line-height: 1.6;
      margin-bottom: 1.2rem;
      flex-grow: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .news-card-meta {
      display: flex;
      gap: 1rem;
      font-size: .85rem;
      color: #9B8A7F;
      margin-bottom: 1.2rem;
      flex-wrap: wrap;
    }

    .news-card-meta span {
      display: flex;
      align-items: center;
      gap: .3rem;
    }

    .news-card-source {
      font-size: .85rem;
      color: #9FB63D;
      font-weight: 600;
      margin-bottom: .8rem;
    }

    .news-card-cta {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      color: #9FB63D;
      font-weight: 600;
      text-decoration: none;
      transition: all .3s ease;
      align-self: flex-start;
    }

    .news-card-cta svg {
      width: 16px;
      height: 16px;
      transition: transform .3s ease;
    }

    .news-card:hover .news-card-cta {
      color: #7C922B;
      gap: 1rem;
    }

    .news-card:hover .news-card-cta svg {
      transform: translateX(4px);
    }

    /* ============ PAGINATION ============ */
    .news-pagination {
      display: flex;
      justify-content: center;
      gap: .8rem;
      margin-top: 4rem;
      padding: 0 1.5rem;
    }

    .pagination-btn {
      width: 44px;
      height: 44px;
      border: 1.5px solid #E5D9C6;
      background: #fff;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      color: #3A3128;
      transition: all .3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pagination-btn:hover:not(.disabled),
    .pagination-btn.active {
      background: #9FB63D;
      color: #fff;
      border-color: #9FB63D;
    }

    .pagination-btn.disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    /* ============ ANIMATIONS ============ */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes floatSlow {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-40px); }
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 768px) {
      .news-hero {
        min-height: 320px;
        padding: 3rem 1.2rem;
      }

      .news-controls {
        gap: 1rem;
        padding: 2rem 1rem;
        flex-direction: column;
      }

      .news-search {
        max-width: 100%;
      }

      .news-filters {
        justify-content: center;
        gap: .6rem;
      }

      .featured-news {
        padding: 2.5rem 1.2rem;
      }

      .featured-news-text {
        padding-top: 1rem;
      }

      .featured-news h2 {
        font-size: 1.6rem;
      }

      .news-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
        padding: 0;
      }

      .news-grid-section {
        padding: 2rem 1rem 3rem;
      }
    }

    @media (max-width: 480px) {
      .news-hero h1 {
        font-size: 2rem;
      }

      .news-grid {
        grid-template-columns: 1fr;
      }

      .news-card-title {
        font-size: 1.15rem;
      }

      .featured-news-meta {
        gap: 1rem;
        font-size: .8rem;
      }
    }


    /* ============ BLOG HERO ============ */
    .blog-hero {
      position: relative;
      min-height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4rem 1.5rem;
      background: linear-gradient(135deg, #8E1F24 0%, #6B1620 50%, #3A3128 100%);
      overflow: hidden;
    }

    .blog-hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(159,182,61,.15) 0%, transparent 70%);
      border-radius: 50%;
      animation: floatSlow 20s ease-in-out infinite;
      pointer-events: none;
    }

    .blog-hero::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -5%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(159,182,61,.1) 0%, transparent 70%);
      border-radius: 50%;
      animation: floatSlow 25s ease-in-out infinite reverse;
      pointer-events: none;
    }

    .blog-hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 700px;
      animation: fadeInUp .8s ease-out;
    }

    .blog-hero h1 {
      font-size: clamp(2.2rem, 6vw, 3.8rem);
      font-weight: 700;
      color: #fff;
      margin-bottom: 1.2rem;
      letter-spacing: -.8px;
    }

    .blog-hero .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-size: .9rem;
      color: #9FB63D;
      margin-bottom: 1.5rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    .blog-hero .hero-tag svg {
      width: 16px;
      height: 16px;
    }

    .blog-hero p {
      font-size: clamp(1rem, 2vw, 1.1rem);
      line-height: 1.6;
      color: rgba(255,255,255,.85);
      max-width: 600px;
      margin: 0 auto;
    }

    /* ============ BLOG CONTROLS ============ */
    .blog-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      align-items: center;
      justify-content: center;
      padding: 3rem 1.5rem;
      background: #FBF7F0;
      border-bottom: 1px solid #E5D9C6;
    }

    .blog-search {
      flex: 1;
      min-width: 240px;
      max-width: 400px;
      position: relative;
    }

    .blog-search input {
      width: 100%;
      padding: .9rem 1.2rem .9rem 2.8rem;
      border: 1.5px solid #E5D9C6;
      border-radius: 999px;
      font-size: .95rem;
      font-family: inherit;
      background: #fff;
      transition: all .3s ease;
    }

    .blog-search input:focus {
      outline: none;
      border-color: #8E1F24;
      box-shadow: 0 0 0 3px rgba(142, 31, 36, .08);
    }

    .blog-search::before {
      content: '🔍';
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1rem;
      opacity: .5;
    }

    .blog-filters {
      display: flex;
      gap: .8rem;
      flex-wrap: wrap;
      align-items: center;
    }

    .filter-btn {
      padding: .7rem 1.2rem;
      border: 1.5px solid #E5D9C6;
      background: #fff;
      border-radius: 999px;
      font-size: .9rem;
      font-weight: 600;
      color: #3A3128;
      cursor: pointer;
      transition: all .3s ease;
      white-space: nowrap;
    }

    .filter-btn:hover,
    .filter-btn.active {
      background: #8E1F24;
      color: #fff;
      border-color: #8E1F24;
      transform: translateY(-2px);
    }

    /* ============ FEATURED BLOG ============ */
    .featured-blog {
      padding: 4rem 1.5rem;
      background: #fff;
    }

    .featured-blog-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
      max-width: 1400px;
      margin: 0 auto;
    }

    .featured-blog-image {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      aspect-ratio: 4/3;
      box-shadow: 0 20px 50px -20px rgba(0,0,0,.2);
      animation: fadeInUp .8s ease-out .2s backwards;
    }

    .featured-blog-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform .8s cubic-bezier(.16,.1,.3,1);
    }

    .featured-blog-image:hover img {
      transform: scale(1.08);
    }

    .featured-blog-text {
      animation: fadeInUp .8s ease-out .3s backwards;
    }

    .featured-blog-tag {
      display: inline-block;
      padding: .5rem 1rem;
      background: linear-gradient(135deg, #E97F31, #E8B23A);
      color: #fff;
      border-radius: 50px;
      font-size: .8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 1rem;
    }

    .featured-blog h2 {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      line-height: 1.25;
      color: #3A3128;
      margin-bottom: 1.2rem;
      font-weight: 700;
    }

    .featured-blog-meta {
      display: flex;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      font-size: .9rem;
      color: #6B5B51;
    }

    .featured-blog-meta span {
      display: flex;
      align-items: center;
      gap: .4rem;
    }

    .featured-blog p {
      font-size: 1.05rem;
      line-height: 1.7;
      color: #6B5B51;
      margin-bottom: 2rem;
    }

    .featured-blog-cta {
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      padding: 1rem 2rem;
      background: #8E1F24;
      color: #fff;
      border-radius: 999px;
      font-weight: 600;
      text-decoration: none;
      transition: all .3s ease;
      position: relative;
      overflow: hidden;
    }

    .featured-blog-cta::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,.2);
      transition: left .3s ease;
    }

    .featured-blog-cta:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px -10px rgba(142, 31, 36, .3);
    }

    .featured-blog-cta:hover::before {
      left: 100%;
    }

    .featured-blog-cta svg {
      width: 18px;
      height: 18px;
      transition: transform .3s ease;
    }

    .featured-blog-cta:hover svg {
      transform: translateX(4px);
    }

    @media (max-width: 900px) {
      .featured-blog-content {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }

    /* ============ BLOG GRID ============ */
    .blog-grid-section {
      padding: 3rem 1.5rem 4rem;
      background: #fff;
    }

    .blog-grid-header {
      text-align: center;
      margin-bottom: 3rem;
      animation: fadeInUp .8s ease-out;
    }

    .blog-grid-header h3 {
      font-size: 1.8rem;
      color: #3A3128;
      margin-bottom: .5rem;
      font-weight: 700;
    }

    .blog-grid-header p {
      color: #6B5B51;
      font-size: 1rem;
    }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 2rem;
      max-width: 1400px;
      margin: 0 auto;
    }

    /* ============ BLOG CARD ============ */
    .blog-card {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid #E5D9C6;
      transition: all .4s cubic-bezier(.16,.1,.3,1);
      display: flex;
      flex-direction: column;
      height: 100%;
      animation: fadeInUp .6s ease-out backwards;
    }

    .blog-card:nth-child(1) { animation-delay: 0s; }
    .blog-card:nth-child(2) { animation-delay: .1s; }
    .blog-card:nth-child(3) { animation-delay: .2s; }
    .blog-card:nth-child(n+4) { animation-delay: .3s; }

    .blog-card:hover {
      border-color: #8E1F24;
      box-shadow: 0 20px 50px -20px rgba(0,0,0,.15);
      transform: translateY(-8px);
    }

    /* Image container with fixed aspect ratio */
    .blog-card-image {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #E5D9C6;
      flex-shrink: 0;
    }

    .blog-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform .6s cubic-bezier(.16,.1,.3,1);
    }

    .blog-card:hover .blog-card-image img {
      transform: scale(1.12);
    }

    /* Card badge */
    .blog-card-badge {
      position: absolute;
      top: 1rem;
      left: 1rem;
      padding: .5rem .9rem;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(8px);
      color: #fff;
      border-radius: 50px;
      font-size: .75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      z-index: 10;
      transition: all .3s ease;
    }

    .blog-card:hover .blog-card-badge {
      background: #8E1F24;
      transform: scale(1.05);
    }

    /* Card content */
    .blog-card-content {
      padding: 1.5rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .blog-card-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: #3A3128;
      line-height: 1.35;
      margin-bottom: .8rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .blog-card-excerpt {
      font-size: .95rem;
      color: #6B5B51;
      line-height: 1.6;
      margin-bottom: 1.2rem;
      flex-grow: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .blog-card-meta {
      display: flex;
      gap: 1rem;
      font-size: .85rem;
      color: #9B8A7F;
      margin-bottom: 1.2rem;
      flex-wrap: wrap;
    }

    .blog-card-meta span {
      display: flex;
      align-items: center;
      gap: .3rem;
    }

    .blog-card-cta {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      color: #8E1F24;
      font-weight: 600;
      text-decoration: none;
      transition: all .3s ease;
      align-self: flex-start;
    }

    .blog-card-cta svg {
      width: 16px;
      height: 16px;
      transition: transform .3s ease;
    }

    .blog-card:hover .blog-card-cta {
      color: #6B1620;
      gap: 1rem;
    }

    .blog-card:hover .blog-card-cta svg {
      transform: translateX(4px);
    }

    /* ============ PAGINATION ============ */
    .blog-pagination {
      display: flex;
      justify-content: center;
      gap: .8rem;
      margin-top: 4rem;
      padding: 0 1.5rem;
    }

    .pagination-btn {
      width: 44px;
      height: 44px;
      border: 1.5px solid #E5D9C6;
      background: #fff;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      color: #3A3128;
      transition: all .3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pagination-btn:hover:not(.disabled),
    .pagination-btn.active {
      background: #8E1F24;
      color: #fff;
      border-color: #8E1F24;
    }

    .pagination-btn.disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    /* ============ ANIMATIONS ============ */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes floatSlow {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-40px); }
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 768px) {
      .blog-hero {
        min-height: 320px;
        padding: 3rem 1.2rem;
      }

      .blog-controls {
        gap: 1rem;
        padding: 2rem 1rem;
        flex-direction: column;
      }

      .blog-search {
        max-width: 100%;
      }

      .blog-filters {
        justify-content: center;
        gap: .6rem;
      }

      .featured-blog {
        padding: 2.5rem 1.2rem;
      }

      .featured-blog-text {
        padding-top: 1rem;
      }

      .featured-blog h2 {
        font-size: 1.6rem;
      }

      .blog-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
        padding: 0;
      }

      .blog-grid-section {
        padding: 2rem 1rem 3rem;
      }
    }

    @media (max-width: 480px) {
      .blog-hero h1 {
        font-size: 2rem;
      }

      .blog-grid {
        grid-template-columns: 1fr;
      }

      .blog-card-title {
        font-size: 1.15rem;
      }

      .featured-blog-meta {
        gap: 1rem;
        font-size: .8rem;
      }
    }

/* ---------- shared typography alignment ---------- */
.featured-blog-text h2,
.featured-news-text h2,
.blog-grid-header h3,
.news-grid-header h3,
.blog-card-title,
.news-card-title,
.article-header h1,
.article-body h2,
.article-body h3,
.article-related h3,
.related-card h4{
  font-family:var(--font-serif);
  font-variation-settings:'SOFT' 50,'WONK' 1;
}
.featured-blog-text h2,
.featured-news-text h2,
.article-header h1,
.article-body h2{
  font-weight:560;
}
.article-header h1{font-weight:560 !important}
.article-body h2{font-weight:560 !important}
.article-body h3{font-weight:600 !important}

/* ==========================================================================
   FIVE TATTVAS — interactive wheel (homepage), fonts: Fraunces + Inter
   ========================================================================== */
.tattvas{
  --t-wash:        #FCF9F1;
  --t-aura-a:      #EEDCA9;
  --t-aura-b:      #F9F2E2;
  --t-accent:      #C8A24A;
  --t-accent-soft: rgba(200,162,74,.16);
  --t-accent-line: rgba(200,162,74,.36);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 9vw, 132px) clamp(20px, 5vw, 64px);
  background-color: var(--t-wash);
  color: inherit;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .9s ease;
}

.tattvas__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.tattvas__layer{ position:absolute; inset:-12%; }
.tattvas__layer--a{
  background: radial-gradient(46% 46% at 30% 42%, var(--t-aura-a) 0%, transparent 68%);
  opacity:.92;
  animation: auraDriftA 22s ease-in-out infinite;
}
.tattvas__layer--b{
  background: radial-gradient(52% 52% at 78% 74%, var(--t-aura-b) 0%, transparent 72%);
  opacity:.86;
  animation: auraDriftB 26s ease-in-out infinite;
}
@keyframes auraDriftA{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(2%,-1%,0) scale(1.04); } }
@keyframes auraDriftB{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(-2%,1.5%,0) scale(1.05); } }

.tattvas__grain{
  position:absolute; inset:0;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.tattvas__particles{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.tattvas__inner{ position:relative; z-index:1; max-width:1280px; margin:0 auto; }

/* ============================================================
   HEADING
   ============================================================ */
.tattvas__head{ max-width:720px; margin:0 auto clamp(44px, 6vw, 78px); text-align:center; }

.tattvas__eyebrow{
  margin:0 0 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(10px, .78vw, 11.5px);
  letter-spacing:.32em;
  text-transform:uppercase;
  opacity:.5;
}
.tattvas__title{
  margin:0 0 22px;
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size:clamp(34px, 4.4vw, 60px);
  line-height:1.05;
  letter-spacing:-.028em;
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
}
.tattvas__lede{
  margin:0 auto;
  max-width:56ch;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size:clamp(14px, 1.02vw, 16px);
  line-height:1.7;
  letter-spacing:-.005em;
  opacity:.62;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.tattvas__layout{
  display:grid;
  grid-template-columns: minmax(0,44fr) minmax(0,56fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items:center;
}
.tattvas__wheel-col{ display:flex; justify-content:center; }

/* ============================================================
   WHEEL
   ============================================================ */
.tattva-wheel{
  position:relative;
  width:100%;
  max-width:540px;
  aspect-ratio:1 / 1;
  --node-size: 84px;
  --wheel-r: 180px;
}

.tattva-wheel__aura{
  position:absolute; inset:-8%; border-radius:50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      var(--t-accent-soft) 60deg,
      transparent 130deg,
      transparent 200deg,
      var(--t-accent-soft) 260deg,
      transparent 330deg,
      transparent 360deg);
  filter: blur(28px);
  opacity:.55;
  animation: auraSpin 32s linear infinite;
  pointer-events:none;
}
@keyframes auraSpin{ to{ transform: rotate(360deg); } }

/* ============================================================
   CENTRAL MANDALA
   ============================================================ */
.tattva-wheel__mandala{
  position:absolute;
  left:50%; top:50%;
  width: 66%;
  aspect-ratio:1 / 1;
  transform: translate(-50%,-50%);
  pointer-events:none;
  z-index: 1;
  color: var(--t-accent);
  transition: color .9s ease;
}
.tattva-wheel__mandala::before{
  content:"";
  position:absolute; inset:-14%;
  border-radius:50%;
  background: radial-gradient(circle, var(--t-accent-soft) 0%, transparent 62%);
  opacity:.9;
  animation: focusBreath 6s ease-in-out infinite;
  pointer-events:none;
}
.tattva-wheel__mandala svg{
  position:relative;
  width:100%; height:100%;
  display:block;
  overflow:visible;
}

.mandala-layer{
  transform-box: view-box;
  transform-origin: 50px 50px;
  will-change: transform;
}
.mandala-layer--outer{ animation: mandalaCW  60s linear infinite; }
.mandala-layer--mid  { animation: mandalaCCW 42s linear infinite; }
.mandala-layer--inner{ animation: mandalaCW  30s linear infinite; }
.mandala-layer--core { animation: mandalaCW  20s linear infinite; }

@keyframes mandalaCW { to{ transform: rotate(360deg); } }
@keyframes mandalaCCW{ to{ transform: rotate(-360deg); } }

.mandala-layer use{
  fill: currentColor;
  stroke: currentColor;
  stroke-width: .26;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill-opacity .9s ease, stroke-opacity .9s ease;
}
.mandala-layer--outer use{ fill-opacity: .055; stroke-opacity: .34; }
.mandala-layer--mid   use{ fill-opacity: .075; stroke-opacity: .40; }
.mandala-layer--inner use{ fill-opacity: .10;  stroke-opacity: .48; }

.mandala-ring{
  fill: none;
  stroke: currentColor;
  stroke-width: .4;
  stroke-opacity: .48;
}
.mandala-ring--thin{
  stroke-width: .22;
  stroke-opacity: .30;
}
.mandala-core{
  fill: currentColor;
  opacity: .60;
  transform-box: fill-box;
  transform-origin: center;
  animation: mandalaCorePulse 4.2s ease-in-out infinite;
}
@keyframes mandalaCorePulse{
  0%,100%{ opacity:.55; transform: scale(1); }
  50%    { opacity:.85; transform: scale(1.55); }
}
.mandala-dot{
  fill: currentColor;
  opacity: .55;
  transform-box: fill-box;
  transform-origin: center;
  animation: mandalaDotPulse 3.6s ease-in-out infinite;
}
.mandala-dot:nth-of-type(even){ animation-delay: 1.2s; }
@keyframes mandalaDotPulse{
  0%,100%{ opacity:.35; }
  50%    { opacity:.75; }
}

/* ============================================================
   ORBIT LINES
   ============================================================ */
.tattva-wheel__orbits{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

.orbit{
  fill:none;
  stroke: var(--t-accent);
  transform-box: view-box;
  transform-origin: 50px 50px;
  transition: stroke .9s ease;
}
.orbit--outer { stroke-width:.34; opacity:.34; stroke-dasharray: 9 5;  animation: orbitCW  40s linear infinite; }
.orbit--dashed{ stroke-width:.34; opacity:.24; stroke-dasharray:.7 2.4; animation: orbitCCW 55s linear infinite; }
.orbit--inner { stroke-width:.28; opacity:.20; stroke-dasharray: 4 3;  animation: orbitCW  30s linear infinite; }
.orbit--core  { stroke-width:.26; opacity:.14; stroke-dasharray: 2 2;  animation: orbitCCW 22s linear infinite, corePulse 6s ease-in-out infinite; }

@keyframes orbitCW  { to{ transform: rotate(360deg); } }
@keyframes orbitCCW { to{ transform: rotate(-360deg); } }
@keyframes corePulse{ 0%,100%{ opacity:.12; } 50%{ opacity:.22; } }

.orbit-dots{ position:absolute; inset:0; pointer-events:none; animation: orbitCCW 60s linear infinite; }
.orbit-dots span{
  position:absolute; left:50%; top:50%;
  width:3.5px; height:3.5px; margin:-1.75px 0 0 -1.75px;
  border-radius:50%;
  background: var(--t-accent);
  opacity:.48;
  box-shadow: 0 0 6px var(--t-accent);
}

.tattva-wheel__focus{
  position:absolute; left:50%; top:50%;
  width:calc(var(--node-size) * 2.6);
  height:calc(var(--node-size) * 2.6);
  margin-left:calc(var(--node-size) * -1.3);
  margin-top:calc(var(--node-size) * -1.3);
  border-radius:50%;
  background: radial-gradient(circle, var(--t-accent-soft) 0%, transparent 62%);
  transform: translateY(calc(var(--wheel-r) * -1));
  pointer-events:none;
  animation: focusBreath 5.5s ease-in-out infinite;
  transition: background .9s ease;
}
@keyframes focusBreath{
  0%,100%{ opacity:.85; transform: translateY(calc(var(--wheel-r) * -1)) scale(1); }
  50%    { opacity:1;   transform: translateY(calc(var(--wheel-r) * -1)) scale(1.08); }
}

.tattva-wheel__hub{
  position:absolute; left:50%; top:50%;
  width: 24%; aspect-ratio: 1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid; place-content:center;
  text-align:center;
  pointer-events:none; user-select:none;
  z-index: 2;
  background: radial-gradient(circle,
              rgba(252,249,241,.9) 0%,
              rgba(252,249,241,.55) 55%,
              transparent 82%);
}
.tattva-wheel__hub-mark{
  display:block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size:clamp(10px, .85vw, 12px);
  letter-spacing:.34em; text-indent:.34em;
  opacity:.68;
  transition: color .9s ease;
  color: var(--t-accent);
}
.tattva-wheel__hub-sub{
  display:block; margin-top:5px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size:clamp(7.5px, .64vw, 9px);
  letter-spacing:.22em; text-transform:uppercase;
  opacity:.38;
}

/* ============================================================
   NODES
   ============================================================ */
.tattva-wheel__nodes{ position:absolute; inset:0; z-index:3; }

.tattva-node{
  position:absolute; left:50%; top:50%;
  width:var(--node-size); height:var(--node-size);
  padding:0; border:0; background:none;
  cursor:pointer;
  opacity: var(--n-o, 1);
  transform: translate(-50%,-50%);
  will-change: transform, opacity, filter;
  -webkit-tap-highlight-color: transparent;
  transition: filter .4s ease;
}
.tattva-node__disc{
  position:relative; display:grid; place-items:center;
  width:100%; height:100%; border-radius:50%;
  color: var(--node-accent);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,.55) 100%);
  border:1px solid var(--node-accent-line);
  box-shadow:
    0 14px 30px -18px rgba(24,20,14,.45),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -6px 12px -10px rgba(24,20,14,.12);
  transition: background .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.tattva-node__disc::before{
  content:""; position:absolute; inset:14%; border-radius:50%;
  border:1px solid var(--node-accent);
  opacity:.14; pointer-events:none;
  transition: opacity .5s ease;
}
.tattva-node__ring{
  position:absolute; inset:-7px; border-radius:50%;
  border:1px dashed var(--node-accent);
  opacity:0; transform:scale(.92);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events:none;
}
.tattva-node__ring--outer{
  inset:-14px; border-style: solid;
  border-color: var(--node-accent);
  opacity:0; transform:scale(.86);
}
.tattva-node__icon{
  display:block; width:42%; height:42%;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.6));
}
.tattva-node__icon svg{ display:block; width:100%; height:100%; }
.tattva-node__label{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  margin-top:10px; white-space:nowrap;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size:clamp(8.5px, calc(var(--node-size) * .15), 11px);
  letter-spacing:.2em; text-transform:uppercase;
  opacity:.55;
  transition: opacity .5s ease, letter-spacing .5s ease, color .5s ease;
}

.tattva-node.is-active .tattva-node__disc{
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, rgba(255,255,255,.94) 55%, rgba(255,255,255,.82) 100%);
  border-color: var(--node-accent);
  box-shadow:
    0 0 0 8px var(--node-accent-soft),
    0 0 40px -8px var(--node-accent),
    0 24px 50px -26px var(--node-accent),
    inset 0 1px 0 rgba(255,255,255,1);
}
.tattva-node.is-active .tattva-node__disc::before{ opacity:.34; }
.tattva-node.is-active .tattva-node__ring{
  opacity:.5; transform:scale(1);
  animation: tattvaPulse 3.2s ease-in-out infinite;
}
.tattva-node.is-active .tattva-node__ring--outer{
  opacity:.26; transform:scale(1);
  animation: orbitCW 12s linear infinite;
}
.tattva-node.is-active .tattva-node__label{
  opacity:1; letter-spacing:.24em;
  color: var(--node-accent);
}
.tattva-node.is-active .tattva-node__icon{
  animation: tattvaBreath 4.2s ease-in-out infinite;
}
@keyframes tattvaPulse{ 0%,100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.12); opacity:.18; } }
@keyframes tattvaBreath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.tattva-node:focus-visible{ outline:none; }
.tattva-node:focus-visible .tattva-node__disc{
  box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 0 5px var(--node-accent), 0 22px 46px -24px var(--node-accent);
}

/* ============================================================
   CARDS
   ============================================================ */
.tattvas__cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap: clamp(14px, 1.4vw, 20px);
}

.tattva-card{
  position:relative;
  grid-column:span 1;
  padding: clamp(22px, 2.1vw, 30px) clamp(20px, 2vw, 28px);
  padding-top: clamp(28px, 2.5vw, 36px);
  border-radius:20px;
  background: linear-gradient(158deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.56) 100%);
  border:1px solid rgba(24,20,14,.07);
  box-shadow: 0 1px 2px rgba(24,20,14,.025);
  cursor:pointer; outline:none;
  overflow:hidden;
  opacity:1;
  transform: translateY(0) scale(1);
  isolation:isolate;
  transition:
    transform .6s cubic-bezier(.22,1,.36,1),
    box-shadow .6s cubic-bezier(.22,1,.36,1),
    border-color .6s ease,
    background .6s ease;
  -webkit-tap-highlight-color: transparent;
}
.tattva-card:last-child{ grid-column: 1 / -1; }

.tattva-card__accent{
  position:absolute; left:0; top:14%; bottom:14%;
  width:2px;
  background: linear-gradient(180deg, transparent, var(--card-accent), transparent);
  opacity:0; transform:scaleY(.4); transform-origin:50% 50%;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
  border-radius:2px; z-index:2;
}
.tattva-card__corner{
  position:absolute; top:0; left:0;
  width:26px; height:26px;
  border-top:1.5px solid var(--card-accent);
  border-left:1.5px solid var(--card-accent);
  border-top-left-radius:20px;
  opacity:.22;
  transition: opacity .6s ease, width .6s cubic-bezier(.22,1,.36,1), height .6s cubic-bezier(.22,1,.36,1);
  pointer-events:none; z-index:2;
}
.tattva-card__num{
  position:absolute; top:16px; right:18px;
  font-family: 'Inter', sans-serif;
  font-weight: 500; font-size:10px;
  letter-spacing:.22em;
  font-variant-numeric: tabular-nums;
  color: var(--card-accent);
  opacity:.34;
  transition: opacity .5s ease, transform .5s ease;
  z-index:2;
}
.tattva-card__glow{
  position:absolute; inset:-40% -20% auto -20%;
  height:120%;
  background: radial-gradient(50% 50% at 50% 0%, var(--card-accent-soft) 0%, transparent 70%);
  opacity:0; transition: opacity .7s ease;
  pointer-events:none; z-index:0;
}
.tattva-card__shine{
  position:absolute; top:0; left:-140%;
  width:80%; height:100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 1.1s cubic-bezier(.22,1,.36,1);
  pointer-events:none; z-index:1;
}
@media (hover:hover) and (pointer:fine){
  .tattva-card:hover .tattva-card__shine{ left:150%; }
}

.tattva-card__head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px;
  position:relative; z-index:2;
}
.tattva-card__icon{
  display:grid; place-items:center;
  width:38px; height:38px; flex:0 0 auto;
  border-radius:50%;
  color: var(--card-accent);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), var(--card-accent-soft));
  border:1px solid var(--card-accent-line);
  box-shadow:
    0 4px 12px -8px var(--card-accent),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease, border-color .6s ease;
  position:relative;
}
.tattva-card__icon::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px dashed var(--card-accent);
  opacity:0; transition: opacity .5s ease;
  animation: orbitCW 10s linear infinite;
}
.tattva-card__icon svg{ width:18px; height:18px; display:block; }

.tattva-card__titles{ display:flex; flex-direction:column; min-width:0; flex:1; }
.tattva-card__name{
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size:clamp(11px, .82vw, 12px);
  letter-spacing:.26em; text-transform:uppercase;
  opacity:.78;
  transition: opacity .5s ease, letter-spacing .5s ease, color .5s ease;
}
.tattva-card__sub{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size:clamp(9px, .68vw, 10px);
  letter-spacing:.18em; text-transform:uppercase;
  opacity:.36; margin-top:3px;
  transition: opacity .5s ease;
}
.tattva-card__tagline{
  margin:0 0 10px;
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size:clamp(17px, 1.3vw, 20px);
  line-height:1.3;
  letter-spacing:-.018em;
  opacity:.9;
  position:relative; z-index:2;
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
}
.tattva-card__desc{
  margin:0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size:clamp(12px, .88vw, 13.5px);
  line-height:1.68;
  opacity:.5;
  position:relative; z-index:2;
  transition: opacity .55s ease;
  max-height: 4.5em; overflow: hidden;
}
.tattva-card__bar{
  position:absolute; left:0; bottom:0;
  height:2px; width:0%;
  background: linear-gradient(90deg, transparent 0%, var(--card-accent) 30%, var(--card-accent) 70%, transparent 100%);
  transition: width .8s cubic-bezier(.22,1,.36,1);
  pointer-events:none; z-index:2;
}

.tattva-card.is-active{
  transform: translateY(-8px) scale(1.02);
  background: linear-gradient(158deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.86) 100%);
  border-color: var(--card-accent-line);
  box-shadow:
    0 30px 60px -34px var(--card-accent),
    0 0 0 1px var(--card-accent-line),
    0 4px 12px rgba(24,20,14,.05);
  z-index:3;
}
.tattva-card.is-active .tattva-card__accent{ opacity:1; transform:scaleY(1); }
.tattva-card.is-active .tattva-card__corner{ opacity:.85; width:44px; height:44px; }
.tattva-card.is-active .tattva-card__num{ opacity:1; transform:scale(1.12); }
.tattva-card.is-active .tattva-card__glow{ opacity:1; }
.tattva-card.is-active .tattva-card__bar{ width:100%; }
.tattva-card.is-active .tattva-card__desc{ opacity:.74; }
.tattva-card.is-active .tattva-card__tagline{ opacity:1; transform:translateX(2px); }
.tattva-card.is-active .tattva-card__name{
  opacity:1; letter-spacing:.3em;
  color: var(--card-accent);
}
.tattva-card.is-active .tattva-card__sub{ opacity:.55; }
.tattva-card.is-active .tattva-card__icon{
  transform:scale(1.1) rotate(-4deg);
  box-shadow:
    0 10px 24px -12px var(--card-accent),
    0 0 0 4px var(--card-accent-soft),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.tattva-card.is-active .tattva-card__icon::after{ opacity:.5; }

@media (hover:hover) and (pointer:fine){
  .tattva-card:hover{
    transform: translateY(-6px);
    border-color: var(--card-accent-line);
    box-shadow: 0 22px 48px -32px var(--card-accent), 0 0 0 1px var(--card-accent-line);
  }
  .tattva-card:hover .tattva-card__accent{ opacity:.7; transform:scaleY(1); }
  .tattva-card:hover .tattva-card__corner{ opacity:.55; width:34px; height:34px; }
  .tattva-card:hover .tattva-card__num{ opacity:.65; }
  .tattva-card:hover .tattva-card__icon{ transform: rotate(-6deg) scale(1.06); }
  .tattva-card.is-active:hover{ transform: translateY(-12px) scale(1.02); }
}
.tattva-card:focus-visible{
  border-color: var(--card-accent);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.95),
    0 0 0 5px var(--card-accent-line),
    0 22px 46px -30px var(--card-accent);
}

/* ============================================================
   HELPERS / RESPONSIVE
   ============================================================ */
.tattvas .sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:1000px){
  .tattvas__layout{ grid-template-columns:minmax(0,1fr); gap: clamp(38px, 6vw, 60px); }
  .tattva-wheel{ max-width:430px; }
  .tattvas__cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px){
  .tattvas{ padding-left:18px; padding-right:18px; }
  .tattva-wheel{ max-width:330px; }
  .tattvas__cards{ grid-template-columns:minmax(0,1fr); }
  .tattva-card:last-child{ grid-column:auto; }
  .tattva-card.is-active{ transform: translateY(-4px); }
  .tattva-card__desc{ font-size:13px; }
  .tattva-node__label{ letter-spacing:.12em; }
  .tattva-wheel__mandala{ width:70%; }
}

@media (prefers-reduced-motion: reduce){
  .orbit--outer, .orbit--dashed, .orbit--inner, .orbit--core,
  .orbit-dots, .tattva-wheel__aura, .tattva-wheel__focus,
  .tattvas__layer--a, .tattvas__layer--b,
  .tattva-node.is-active .tattva-node__ring,
  .tattva-node.is-active .tattva-node__ring--outer,
  .tattva-node.is-active .tattva-node__icon,
  .tattva-card__icon::after,
  .mandala-layer--outer, .mandala-layer--mid,
  .mandala-layer--inner, .mandala-layer--core,
  .mandala-core, .mandala-dot{
    animation: none !important;
  }
  .tattva-card, .tattva-card__icon, .tattva-card__accent,
  .tattva-card__corner, .tattva-card__num, .tattva-card__glow,
  .tattva-card__shine, .tattva-card__bar,
  .tattva-node__disc, .tattva-node__ring, .tattva-node__icon{
    transition-duration:.01ms !important;
  }
}

/* ==========================================================================
   OUR APPROACH — Specialisations (SRA / Society redevelopment)
   ========================================================================== */
.spec-panels{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);
}
.spec-panel{
  position:relative;
  border-radius:var(--r-lg);
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out);
}
.spec-panel:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.spec-panel__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.spec-panel__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.spec-panel:hover .spec-panel__media img{transform:scale(1.06)}
.spec-panel__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,36,32,0) 42%,rgba(43,36,32,.6) 100%);
  pointer-events:none;
}
.spec-panel__num{
  position:absolute;left:20px;bottom:14px;z-index:1;
  font-family:var(--font-serif);font-weight:560;
  font-size:clamp(2.2rem,3.6vw,3.2rem);
  color:#fff;line-height:1;opacity:.92;
  font-variation-settings:'SOFT' 60;
}
.spec-panel__body{padding:clamp(22px,2.4vw,30px)}
.spec-panel__body h3{color:var(--char)}
.spec-panel__rule{
  width:36px;height:2px;background:var(--green);border-radius:2px;
  margin:.9rem 0 1rem;
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-out) .1s;
}
.spec-panel.in .spec-panel__rule{transform:scaleX(1)}
.spec-panel__body p{margin-bottom:1rem;font-size:.94rem}

@media (max-width:820px){
  .spec-panels{grid-template-columns:1fr}
}

/* ==========================================================================
   NRI — Why invest in India / Mumbai (growth rail)
   ========================================================================== */
.invest-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,64px);
}
.invest-col h3{margin-bottom:1.4rem;color:var(--char)}
.invest-rail{
  position:relative;
  padding-left:26px;
  display:flex;flex-direction:column;gap:1.5rem;
}
.invest-rail::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:var(--line);
}
.invest-rail li{position:relative}
.invest-rail__dot{
  position:absolute;left:-26px;top:2px;
  width:12px;height:12px;border-radius:50%;
  background:#fff;border:2px solid var(--line);
  transition:background .5s var(--ease-out),border-color .5s var(--ease-out),transform .5s var(--ease-out);
}
.invest-rail li.in .invest-rail__dot{
  background:var(--green);border-color:var(--green);
  transform:scale(1.15);
}
.invest-rail strong{display:block;color:var(--char);font-weight:800;margin-bottom:.2rem}
.invest-rail p{font-size:.92rem;margin:0}

@media (max-width:820px){
  .invest-grid{grid-template-columns:1fr;gap:44px}
}

/* ==========================================================================
   NRI — Property management
   ========================================================================== */
.pm-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,26px);
}
.pm-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(22px,2.2vw,28px);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease-out);
}
.pm-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);border-color:var(--blush-deep)}
.pm-card__icon{
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--blush);color:var(--red);
  margin-bottom:1rem;
  transition:transform .5s var(--ease-out),background .5s var(--ease-out),color .5s var(--ease-out);
}
.pm-card__icon svg{width:20px;height:20px}
.pm-card:hover .pm-card__icon{transform:rotate(-8deg) scale(1.08);background:var(--red);color:#fff}
.pm-card h3{margin-bottom:.4rem;color:var(--char)}
.pm-card p{font-size:.9rem;margin:0}

@media (max-width:900px){
  .pm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pm-grid{grid-template-columns:1fr}
}



/* ==========================================================================
   PREMIUM MOTION LAYER — extends the existing reveal / hover language
   (transform + opacity only; every rule respects prefers-reduced-motion below)
   ========================================================================== */
:root{--ease-cine:cubic-bezier(.22,.61,.36,1)}
[id]{scroll-margin-top:calc(var(--header) + 12px)}

/* ---- page-load sequence: header → hero text → CTA, hero visual settles ---- */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes headerIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes heroSettle{from{scale:1.06}to{scale:1}}
@keyframes badgeIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes badgeRing{0%,100%{opacity:0;scale:1}50%{opacity:.5;scale:1.07}}
.site-header .bar{animation:headerIn .8s var(--ease-out) .2s both;animation-play-state:paused}
.page-hero .hero-inner>*{animation:riseIn .9s var(--ease-out) both;animation-play-state:paused}
.page-hero .hero-inner>*:nth-child(1){animation-delay:.35s}
.page-hero .hero-inner>*:nth-child(2){animation-delay:.45s}
.page-hero .hero-inner>*:nth-child(3){animation-delay:.55s}
.page-hero .hero-inner>*:nth-child(4){animation-delay:.7s}
.page-hero .hero-inner>*:nth-child(5){animation-delay:.85s}
.page-hero>img{animation:heroSettle 1.9s var(--ease-out) both;animation-play-state:paused}
.page-hero .coming-soon-badge{animation:badgeIn .9s var(--ease-out) 1s both;animation-play-state:paused}
body.is-ready .site-header .bar,
body.is-ready .page-hero .hero-inner>*,
body.is-ready .page-hero>img,
body.is-ready .page-hero .coming-soon-badge{animation-play-state:running}

/* ---- scroll reveal: fade + rise + tiny scale ---- */
.reveal{transform:translateY(40px) scale(.985)}
.reveal.in{transform:none}
.reveal-img{opacity:0;transition:opacity 1s var(--ease-out)}
.reveal-img.in{opacity:1}
.reveal-img img{scale:1.08;transition:transform 1.2s var(--ease),scale 1.7s var(--ease-out)}
.reveal-img.in img{scale:1}
.reveal-img img[data-parallax]{scale:1.14;will-change:translate}
.reveal-img.in img[data-parallax]{scale:1.1}
.page-hero>img[data-parallax]{top:-28px;height:calc(100% + 56px);will-change:translate}

/* ---- cinematic section entrance (opt-in with .cine) ---- */
.cine{opacity:0;transform:scale(.985);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out)}
.cine.in{opacity:1;transform:none}

/* ---- header scroll state ---- */
.site-header{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease),backdrop-filter .5s var(--ease),-webkit-backdrop-filter .5s var(--ease)}
.site-header .bar{transition:height .45s var(--ease)}
.site-header.solid .bar{height:76px}
.site-header.solid{-webkit-backdrop-filter:blur(14px)}

/* ---- projects dropdown: soft reveal + item stagger ---- */
.dd{transform:translateY(-8px) scale(.985);transition:opacity .35s var(--ease-cine),transform .35s var(--ease-cine),visibility .35s}
.dd a{opacity:0;transform:translateY(-6px);transition:opacity .3s var(--ease-cine),transform .35s var(--ease-cine),background .25s,color .25s,padding-left .25s}
.nav-item:hover .dd a,.nav-item:focus-within .dd a{opacity:1;transform:none}
.nav-item:hover .dd a:nth-child(1),.nav-item:focus-within .dd a:nth-child(1){transition-delay:.04s,.04s,0s,0s,0s}
.nav-item:hover .dd a:nth-child(2),.nav-item:focus-within .dd a:nth-child(2){transition-delay:.08s,.08s,0s,0s,0s}
.nav-item:hover .dd a:nth-child(3),.nav-item:focus-within .dd a:nth-child(3){transition-delay:.12s,.12s,0s,0s,0s}
.nav-item:hover .dd a:nth-child(4),.nav-item:focus-within .dd a:nth-child(4){transition-delay:.16s,.16s,0s,0s,0s}
.nav-item:hover .dd a:nth-child(5),.nav-item:focus-within .dd a:nth-child(5){transition-delay:.2s,.2s,0s,0s,0s}
.nav-item:hover .dd a:nth-child(6),.nav-item:focus-within .dd a:nth-child(6){transition-delay:.24s,.24s,0s,0s,0s}

/* ---- project cards: refined hover, coming-soon treatment ---- */
.pm img{transition:transform .8s var(--ease-cine)}
.proj-card:hover .pm img{transform:scale(1.04)}
.coming-soon-media::after{transition:background .6s var(--ease-cine)}
.coming-soon-badge{transition:background .4s,border-color .4s}
.coming-soon-badge::before{content:'';position:absolute;inset:-6px;border-radius:18px;border:1px solid rgba(255,255,255,.45);opacity:0;pointer-events:none}
.proj-card .coming-soon-badge{opacity:0}
.proj-card.in .coming-soon-badge{animation:badgeIn .8s var(--ease-out) .35s both}
.proj-card.in .coming-soon-badge::before,
.page-hero .coming-soon-badge::before{animation:badgeRing 5s ease-in-out 1.6s infinite}
@media(hover:hover) and (pointer:fine){
  .proj-card .pn,.proj-card .pmeta,.proj-card .ppos{transform:translateY(6px);transition:transform .6s var(--ease-cine)}
  .proj-card:hover .pn,.proj-card:hover .pmeta,.proj-card:hover .ppos{transform:none}
  .proj-card:hover .coming-soon-media::after{background:rgba(43,36,32,.16)}
  .proj-card:hover .coming-soon-badge{background:rgba(251,247,240,.32);border-color:rgba(255,255,255,.8)}
}

/* ---- form micro-interactions (shared .field system) ---- */
.field label,.field>span{transition:color .3s,transform .3s var(--ease-cine)}
.field:focus-within label,.field:focus-within>span{color:var(--red);transform:translateX(2px)}
.field .err{display:block;max-height:0;opacity:0;transform:translateY(-4px);font-size:.78rem;font-weight:700;color:var(--red);overflow:hidden;transition:opacity .3s,transform .3s,max-height .3s}
.field.invalid .err{max-height:3em;opacity:1;transform:none;margin-top:.4rem}
.field.invalid input,.field.invalid select,.field.invalid textarea,.field.invalid .upload{border-color:var(--red)}
@keyframes fieldFlash{0%{box-shadow:0 0 0 0 rgba(159,182,61,0)}25%{box-shadow:0 0 0 5px rgba(159,182,61,.35);border-color:var(--green-deep)}100%{box-shadow:0 0 0 0 rgba(159,182,61,0)}}
.field.flash select,.field.flash input{animation:fieldFlash 1.9s var(--ease-out)}

/* ==========================================================================
   CAREERS
   ========================================================================== */
.benefit-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.benefit-grid>*{grid-column:span 2}
.benefit-grid>*:nth-child(4){grid-column:2/span 2}
.benefit-grid>*:nth-child(5){grid-column:4/span 2}
.benefit-grid .card{transition:transform .45s var(--ease-cine),box-shadow .45s var(--ease-cine),border-color .45s}
.benefit-grid .card:hover{transform:translateY(-5px) scale(1.02);border-color:var(--blush-deep)}
.benefit-grid .card:hover .ico-chip{transform:translateY(-3px) rotate(-4deg)}
@media(max-width:1024px){
  .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benefit-grid>*,.benefit-grid>*:nth-child(4){grid-column:auto}
  .benefit-grid>*:nth-child(5){grid-column:1/-1}
}
@media(max-width:640px){
  .benefit-grid{grid-template-columns:1fr}
  .benefit-grid>*:nth-child(5){grid-column:auto}
}

.job-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:1rem;align-items:end}
.job-filters .field select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238E1F24' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1.1rem center;padding-right:2.6rem}
.job-reset{padding:.95rem 1.3rem;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:.85rem;color:var(--char);transition:border-color .3s,color .3s,transform .3s}
.job-reset:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.job-count{margin-top:1.1rem;font-size:.85rem;font-weight:700;color:var(--taupe)}
@media(max-width:900px){.job-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.job-reset{grid-column:1/-1}}
@media(max-width:640px){.job-filters{grid-template-columns:1fr}}

.job-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
@media(max-width:1024px){.job-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.job-grid{grid-template-columns:1fr}}
.job-card{display:flex;flex-direction:column;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px);box-shadow:0 10px 30px -20px rgba(66,42,30,.16);transition:transform .45s var(--ease-cine),box-shadow .45s var(--ease-cine),border-color .45s,opacity .28s}
.job-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);border-color:var(--blush-deep)}
.job-card[hidden]{display:none}
.job-card.is-out,.job-card.reveal.in.is-out{opacity:0;transform:translateY(8px)}
.job-card h3{font-family:var(--font-serif);font-size:1.3rem;font-weight:600;color:var(--char);line-height:1.2;transition:transform .4s var(--ease-cine)}
.job-card:hover h3{transform:translateX(3px)}
.job-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.job-tags .tag{background:var(--cream);box-shadow:none}
.job-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.78rem;font-weight:700;color:var(--taupe)}
.job-meta span{display:inline-flex;align-items:center;gap:.4rem}
.job-meta svg{width:14px;height:14px;color:var(--red)}
.job-card p{font-size:.92rem;transition:color .4s}
.job-card:hover p{color:var(--ink)}
.job-apply{margin-top:auto;align-self:flex-start;padding-top:.5rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:.85rem;color:var(--red)}
.job-apply .arrow{display:inline-block;transition:transform .4s var(--ease-cine)}
.job-apply:hover .arrow,.job-card:hover .job-apply .arrow{transform:translateX(5px)}
.job-empty{display:none;text-align:center;padding:2rem 1rem;color:var(--taupe);font-weight:600}
.job-empty.show{display:block}

.apply-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:start}
.apply-wrap>*{min-width:0}
@media(max-width:900px){.apply-wrap{grid-template-columns:1fr}}
.career-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,40px);box-shadow:var(--shadow-soft);transition:opacity .5s var(--ease-cine),transform .5s var(--ease-cine)}
.career-form.is-leaving{opacity:0;transform:scale(.98)}
.field-file .upload{position:relative;display:flex;align-items:center;gap:1rem;padding:1.05rem 1.2rem;border:1.5px dashed var(--line);border-radius:14px;background:#fff;transition:border-color .3s,background .3s}
.field-file .upload:hover,.field-file .upload:focus-within,.field-file .upload.drag{border-color:var(--red);background:#fffaf6}
.field-file .upload input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.u-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--blush);color:var(--red);flex-shrink:0}
.u-ico svg{width:20px;height:20px}
.u-empty{display:flex;align-items:center;gap:1rem;min-width:0}
.u-text{min-width:0;flex:1}
.u-text strong{display:block;font-size:.92rem;color:var(--char);overflow-wrap:anywhere}
.u-text small{display:block;font-size:.76rem;color:var(--taupe);font-weight:600}
.u-file{display:none}
.field-file .upload.has-file{border-style:solid;border-color:var(--green);background:#F6F9EA}
.field-file .upload.has-file .u-empty{display:none}
.field-file .upload.has-file .u-file{display:flex;align-items:center;gap:1rem;width:100%;animation:riseIn .5s var(--ease-out) both}
.u-clear{position:relative;z-index:2;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--char);display:grid;place-items:center;transition:background .3s,color .3s}
.u-clear:hover{background:var(--red);color:#fff;border-color:var(--red)}
.u-clear svg{width:14px;height:14px}
.apply-picked{margin-top:.5rem;font-size:.8rem;font-weight:700;color:var(--green-deep)}

.apply-success{display:none;text-align:center;padding:clamp(28px,4vw,52px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
.apply-success.show{display:block;animation:successIn .7s var(--ease-out) both}
@keyframes successIn{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:none}}
.success-ico{width:72px;height:72px;margin:0 auto 1.2rem;border-radius:50%;background:#EDF3DC;display:grid;place-items:center;color:var(--green-deep)}
.success-ico svg{width:34px;height:34px}
.success-ico .tick{stroke-dasharray:32;stroke-dashoffset:32;animation:tickDraw .7s var(--ease-out) .35s forwards}
@keyframes tickDraw{to{stroke-dashoffset:0}}
.apply-success h3{margin-bottom:.5rem;color:var(--char)}
.apply-success .cta-wrap{justify-content:center;margin-top:1.6rem}
.apply-aside .card{position:sticky;top:calc(var(--header) + 20px)}
@media(max-width:900px){.apply-aside .card{position:static}}
.btn-wa .arrow{transition:transform .4s var(--ease-cine)}
.btn-wa:hover .arrow{transform:translateX(4px) scale(1.06)}

/* ---- responsive motion + reduced motion (must stay last) ---- */
@media(max-width:640px){
  .reveal{transform:translateY(24px) scale(.99);transition-duration:.7s}
  .reveal.in{transform:none}
}
@media(max-width:900px),(hover:none){
  .reveal-img img[data-parallax]{scale:1.06}
  .page-hero>img[data-parallax]{top:0;height:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-img,.cine,.reveal-img img,.dd,.dd a,.job-card,.career-form{opacity:1;transform:none;scale:1;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal-img img[data-parallax],.reveal-img.in img[data-parallax]{scale:1.02}
  .site-header .bar,.page-hero .hero-inner>*,.page-hero>img,.page-hero .coming-soon-badge,.proj-card .coming-soon-badge,
  .coming-soon-badge::before,.field.flash select,.field.flash input,.apply-success.show,.u-file{animation:none!important;opacity:1}
  .coming-soon-badge::before{opacity:0}
  .success-ico .tick{animation:none;stroke-dashoffset:0}
  [data-parallax]{translate:none!important}
}

[hidden]{display:none!important}
.form-alert{display:none;margin-top:1rem;padding:.85rem 1.1rem;border-radius:14px;background:#FBE9EA;border:1px solid #EFC3C8;color:var(--red-deep);font-weight:700;font-size:.88rem}
.form-alert.show{display:block;animation:riseIn .4s var(--ease-out) both}
.field .err{text-transform:none;letter-spacing:0;margin-bottom:0}


/* two-paragraph intros: body paragraph right after a lead matches the lead */
:not(.card)>.lead+p.mt-md:not(.lead){font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6}

/* ==========================================================================
   HERO READABILITY — directional overlay (dark where the text sits, clear
   where the image breathes) + readable eyebrow, crumbs and copy
   ========================================================================== */
.hero .hero-scrim,
.page-hero .hero-scrim{
  background:
    linear-gradient(180deg,rgba(28,20,17,.5) 0%,rgba(28,20,17,0) 26%),
    linear-gradient(0deg,rgba(40,14,15,.78) 0%,rgba(40,14,15,.38) 38%,rgba(40,14,15,0) 68%),
    linear-gradient(90deg,rgba(28,20,17,.62) 0%,rgba(28,20,17,.36) 42%,rgba(28,20,17,.06) 78%,rgba(28,20,17,0) 100%);
}
@media(max-width:768px){
  .hero .hero-scrim,
  .page-hero .hero-scrim{
    background:
      linear-gradient(180deg,rgba(28,20,17,.5) 0%,rgba(28,20,17,.14) 30%,rgba(28,20,17,.3) 55%,rgba(40,14,15,.84) 100%);
  }
}
.hero .display,.page-hero h1{text-shadow:0 2px 24px rgba(20,12,10,.35)}
.hero .lead,.page-hero .lead{color:rgba(255,255,255,.92);text-shadow:0 1px 14px rgba(20,12,10,.45)}

.hero .eyebrow.light,
.page-hero .eyebrow.light{
  color:var(--red);background:rgba(251,247,240,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:.5rem 1rem .5rem .85rem;border-radius:999px;
  box-shadow:0 10px 26px -12px rgba(20,12,10,.55);
  display:flex;width:fit-content;max-width:100%;line-height:1.3;margin-bottom:1rem;
}
.hero .eyebrow.light::before,
.page-hero .eyebrow.light::before{width:18px;flex-shrink:0}

.page-hero .crumbs{display:flex;width:fit-content;margin-bottom:.9rem;color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(20,12,10,.5)}
.page-hero .crumbs a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;transition:text-decoration-color .3s}
.page-hero .crumbs a:hover{text-decoration-color:#fff}

/* red eyebrows on dark / red bands were unreadable */
.on-dark .eyebrow.light,.bg-red .eyebrow.light{color:#F3C9CD}

/* ==========================================================================
   5 OCT NOTES
   ========================================================================== */
/* brand story: crisp vector line-art branches (replaces the pixelated PNG) */
.poem-band{
  background:
    url('../img/poem-branch-left.svg') left 2vw bottom -12px / clamp(190px,19vw,290px) auto no-repeat,
    url('../img/poem-branch-right.svg') right 2vw bottom -12px / clamp(190px,19vw,290px) auto no-repeat,
    var(--cream);
}
@media(max-width:1180px){.poem-band{background-size:180px auto,180px auto,auto;background-position:left -64px bottom -12px,right -64px bottom -12px,0 0}}
@media(max-width:820px){.poem-band{background-size:150px auto,150px auto,auto;background-position:left -78px bottom -12px,right -78px bottom -12px,0 0}}
@media(max-width:560px){.poem-band{background-size:120px auto,120px auto,auto;background-position:left -70px bottom -12px,right -70px bottom -12px,0 0}}

/* five tattvas: a touch darker / more contrast (split the difference) */
.tattvas{color:var(--char)}
.tattvas__eyebrow{opacity:.66}
.tattvas__lede{opacity:.78}
.tattva-node__label{opacity:.74}
.tattva-wheel__hub-mark{opacity:.85}
.tattva-wheel__hub-sub{opacity:.55}
.tattva-card{background:linear-gradient(158deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.7) 100%);border-color:rgba(24,20,14,.12)}
.tattva-card__num{opacity:.5}
.tattva-card__name{opacity:.9}
.tattva-card__sub{opacity:.52}
.tattva-card__tagline{opacity:1}
.tattva-card__desc{opacity:.68}
.tattva-card.is-active .tattva-card__desc{opacity:.86}
.tattva-card.is-active .tattva-card__sub{opacity:.68}
.tattva-card__corner{opacity:.36}
.tattva-node__disc{border-width:1.5px}
.mandala-layer--outer use{fill-opacity:.08;stroke-opacity:.46}
.mandala-layer--mid use{fill-opacity:.1;stroke-opacity:.54}
.mandala-layer--inner use{fill-opacity:.13;stroke-opacity:.62}
.orbit--outer{opacity:.46}.orbit--dashed{opacity:.34}.orbit--inner{opacity:.3}
.tattvas__layer--a{opacity:1}.tattvas__layer--b{opacity:.95}

/* homepage closing band: larger "Begin" */
#cta .eyebrow{font-size:1rem;letter-spacing:.3em}
#cta .eyebrow::before,#cta .eyebrow::after{width:36px}

/* our approach hero: show the right-hand scene only (left was a half image) */
.page-hero>img.hero-crop-right{left:auto;right:0;width:166%;max-width:none}

/* contact form: message full width, compact centred button */
form[data-tatvm-form] .field:has(textarea),
form[data-tatvm-form] .form-ok{grid-column:1/-1}
form[data-tatvm-form]>button[type=submit]{grid-column:1/-1;justify-self:center;align-self:center}

/* network partners: expanded "what you get" boxes */
.np-get{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.np-get .spec{align-items:flex-start;padding:1.4rem}
.np-get .spec svg{margin-top:.2rem}
.np-get .spec strong{margin-bottom:.35rem}
.np-get .spec span{font-size:.9rem;line-height:1.6;color:var(--taupe);font-weight:500}