/* ============================================================
   VIKALPA FINVEST — FRONTEND STYLESHEET
   public/front/front.css
   ============================================================ */

/* ── CSS VARIABLES ── */
:root {
   --blue: #3D29A1;
   --blue-dark: #2E1F7A;
   --blue-deep: #1A0F5C;
   --red: #E03221;
   --red-dark: #B52718;
   --white: #FFFFFF;
   --off: #F8F8FC;
   --ink: #08091C;
   --line: rgba(61, 41, 161, 0.1);
   --P: 'Poppins', sans-serif;
   --D: 'Poppins', serif;
}

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   font-family: var(--P);
   background: var(--white);
   color: var(--ink);
   overflow-x: hidden;
   cursor: none;
   -webkit-font-smoothing: antialiased
}

p {
   text-align: justify
}

/* ── CUSTOM CURSOR ── */
#cur {
   position: fixed;
   width: 8px;
   height: 8px;
   background: var(--blue);
   border-radius: 50%;
   pointer-events: none;
   z-index: 99999;
   transform: translate(-50%, -50%);
   transition: background .3s
}

#cur2 {
   position: fixed;
   width: 36px;
   height: 36px;
   border: 1.5px solid var(--blue);
   border-radius: 50%;
   pointer-events: none;
   z-index: 99998;
   transform: translate(-50%, -50%);
   transition: width .3s, height .3s, opacity .3s, border-color .3s;
   opacity: .4
}

body:has(a:hover) #cur {
   background: var(--red)
}

body:has(a:hover) #cur2 {
   width: 52px;
   height: 52px;
   border-color: var(--red);
   opacity: .2
}

/* ── LOADER ── */
#loader {
   position: fixed;
   inset: 0;
   z-index: 99990;
   background: var(--blue-deep);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: opacity .9s ease, visibility .9s ease
}

#loader.out {
   opacity: 0;
   visibility: hidden
}

.llo {
   font-family: var(--D);
   font-size: 58px;
   font-weight: 700;
   color: white;
   letter-spacing: -2px;
   opacity: 0;
   transform: translateY(28px);
   animation: up .9s .2s forwards cubic-bezier(.16, 1, .3, 1)
}

.l-logo-img {
   height: 80px;
   width: auto;
   max-width: 280px;
   object-fit: contain;
   opacity: 0;
   transform: translateY(20px);
   animation-name: up;
   animation-duration: .9s;
   animation-delay: .1s;
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(.16, 1, .3, 1);
   margin-bottom: 12px;
   border-radius: 8px;
   background: white;
   padding: 8px 16px
}

.lsub {
   font-family: var(--P);
   font-size: 11px;
   font-weight: 300;
   letter-spacing: .28em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .3);
   margin-top: 8px;
   opacity: 0;
   animation: up .7s .5s forwards
}

.lbar-w {
   width: 180px;
   height: 1px;
   background: rgba(255, 255, 255, .1);
   margin-top: 36px;
   overflow: hidden
}

.lbar {
   height: 100%;
   background: var(--red);
   width: 0;
   animation: lb 1.8s .4s forwards cubic-bezier(.4, 0, .2, 1)
}

.lsym {
   position: absolute;
   font-size: 32px;
   color: rgba(255, 255, 255, .12);
   animation: lspin 5s linear infinite;
   font-family: var(--P);
   font-weight: 800
}

.lsym:nth-child(1) {
   top: 12%;
   left: 10%
}

.lsym:nth-child(2) {
   top: 18%;
   right: 12%;
   animation-delay: -1.2s
}

.lsym:nth-child(3) {
   bottom: 15%;
   left: 15%;
   animation-delay: -2.4s
}

.lsym:nth-child(4) {
   bottom: 20%;
   right: 10%;
   animation-delay: -3.6s
}

.lsym:nth-child(5) {
   top: 48%;
   left: 4%;
   animation-delay: -4.8s
}

.lsym:nth-child(6) {
   top: 48%;
   right: 4%;
   animation-delay: -0.6s
}

@keyframes up {
   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes lb {
   to {
      width: 100%
   }
}

@keyframes lspin {
   from {
      transform: rotate(0deg)
   }

   to {
      transform: rotate(360deg)
   }
}

/* ── FLOATING SYMBOLS ── */
.sym-layer {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 6;
   overflow: hidden
}

.fs {
   position: absolute;
   font-family: var(--P);
   font-weight: 800;
   opacity: 0;
   user-select: none;
   animation: fsup linear both;
   will-change: transform, opacity
}

@keyframes fsup {
   0% {
      opacity: 0;
      transform: translateY(0) rotate(var(--r, 0deg))
   }

   10% {
      opacity: var(--op, .15)
   }

   88% {
      opacity: var(--op, .15)
   }

   100% {
      opacity: 0;
      transform: translateY(-110vh) rotate(calc(var(--r, 0deg) + 22deg))
   }
}

/* ── STICKY HEADER WRAPPER (strip + nav together) ── */
.sticky-header {
   position: sticky;
   top: 0;
   z-index: 900
}

/* ── TOP STRIP ── */
.strip {
   background: var(--blue-deep);
   padding: 10px 72px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
   z-index: 10
}

.strip-l {
   display: flex;
   gap: 28px
}

.strip a,
.strip span {
   font-size: 11px;
   font-weight: 300;
   color: #fff;
   text-decoration: none;
   letter-spacing: .06em;
   display: flex;
   align-items: center;
   gap: 7px;
   transition: color .25s
}

.strip a:hover {
   color: rgba(255, 255, 255, .75)
}

/* ── NAVIGATION ── */
nav {
   background: rgba(255, 255, 255, .97);
   backdrop-filter: blur(28px) saturate(200%);
   border-bottom: 3px solid var(--blue);
   transition: box-shadow .4s
}

nav.up {
   box-shadow: 0 4px 40px rgba(61, 41, 161, .12)
}

.nav-i {
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 72px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 80px
}

.logo {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-decoration: none;
   gap: 4px
}

.logo-img {
   height: 52px;
   width: auto;
   max-width: 200px;
   object-fit: contain;
   display: block
}

.logo-tagline {
   font-family: 'Playfair Display', serif;
   font-style: italic;
   font-size: 14.5px;
   font-weight: 500;
   color: rgba(61, 41, 161, .92);
   letter-spacing: 0.03em;
   line-height: 1
}

ul.nl {
   display: flex;
   gap: 0;
   list-style: none;
   align-items: center
}

ul.nl li {
   position: relative
}

ul.nl li a {
   font-size: 12.5px;
   font-weight: 500;
   color: rgba(8, 9, 28, .55);
   text-decoration: none;
   padding: 10px 15px;
   display: flex;
   align-items: center;
   gap: 4px;
   transition: color .2s
}

ul.nl li a:hover {
   color: var(--blue)
}

.dd {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   background: white;
   border: 1px solid var(--line);
   border-top: 3px solid var(--blue);
   min-width: 210px;
   box-shadow: 0 16px 60px rgba(61, 41, 161, .1);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: all .22s cubic-bezier(.16, 1, .3, 1);
   overflow: hidden;
   z-index: 50
}

ul.nl li:hover .dd {
   opacity: 1;
   visibility: visible;
   transform: translateY(0)
}

.dd a {
   display: block !important;
   padding: 11px 20px !important;
   font-size: 12.5px !important;
   color: rgba(8, 9, 28, .6) !important;
   border-bottom: 1px solid var(--line)
}

.dd a:last-child {
   border: none !important
}

.dd a:hover {
   background: rgba(61, 41, 161, .04) !important;
   padding-left: 26px !important;
   color: var(--blue) !important
}

.nc {
   font-size: 9px;
   opacity: .4;
   transition: transform .2s;
   display: inline-block
}

ul.nl li:hover .nc {
   transform: rotate(180deg)
}

.nbtn {
   padding: 11px 28px;
   background: var(--blue);
   color: white;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: .06em;
   border-radius: 2px;
   text-decoration: none;
   transition: all .25s;
   display: inline-flex;
   align-items: center;
   gap: 8px
}

.nbtn:hover {
   background: var(--blue-dark);
   transform: translateY(-1px);
   box-shadow: 0 8px 28px rgba(61, 41, 161, .3)
}

/* ── SECTION GLOBALS ── */
section {
   padding: 0px 0;
   position: relative;
   overflow: hidden
}

.W {
   max-width: 1440px;
   margin: 0 auto;
   padding: 0 72px;
   position: relative;
   z-index: 2
}

.swm {
   position: absolute;
   font-family: var(--D);
   font-weight: 700;
   color: transparent;
   pointer-events: none;
   user-select: none;
   line-height: .85;
   z-index: 0
}

.slabel {
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .26em;
   text-transform: uppercase;
   color: var(--red);
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 16px;
   margin-bottom: 18px
}

.slabel::before {
   content: '';
   width: 24px;
   height: 2px;
   background: var(--red)
}

.sh2 {
   font-family: var(--D);
   font-size: clamp(36px, 4.5vw, 64px);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -2px;
   color: var(--ink);
   margin-bottom: 20px
}

.sh2 em {
   font-style: italic;
   color: var(--blue)
}

.sh2 .rx {
   color: var(--red)
}

.ssub {
   font-size: 15.5px;
   font-weight: 300;
   color: rgba(8, 9, 28, .7);
   line-height: 1.9;
   max-width: 540px
}

/* ── CTA BUTTONS ── */
.c1 {
   position: relative;
   overflow: hidden;
   padding: 16px 44px;
   background: var(--blue);
   color: white;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   text-decoration: none;
   border-radius: 2px;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   transition: transform .3s, box-shadow .3s
}

.c1::before {
   content: '';
   position: absolute;
   inset: 0;
   background: var(--red);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform .4s cubic-bezier(.16, 1, .3, 1)
}

.c1:hover::before {
   transform: scaleX(1);
   transform-origin: left
}

.c1:hover {
   transform: translateY(-3px);
   box-shadow: 0 16px 48px rgba(224, 50, 33, .25)
}

.c1 span {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 12px
}

.c2 {
   font-size: 12.5px;
   font-weight: 500;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: rgba(8, 9, 28, .45);
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 10px;
   transition: color .25s, gap .25s;
   padding: 16px 0;
   border-bottom: 1px solid var(--line)
}

.c2:hover {
   color: var(--blue);
   gap: 16px
}

/* ── SCROLL REVEAL ── */
.sr {
   opacity: 0;
   transform: translateY(50px);
   transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1)
}

.sl {
   opacity: 0;
   transform: translateX(-50px);
   transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1)
}

.srr {
   opacity: 0;
   transform: translateX(50px);
   transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1)
}

.on {
   opacity: 1 !important;
   transform: none !important
}

.d1 {
   transition-delay: .08s
}

.d2 {
   transition-delay: .16s
}

.d3 {
   transition-delay: .24s
}

.d4 {
   transition-delay: .32s
}

.d5 {
   transition-delay: .4s
}

/* ── FOOTER ── */
footer {
   background: #04050F;
   border-top: 3px solid var(--blue);
   padding: 80px 0 40px
}

.ft-g {
   display: grid;
   grid-template-columns: 2.2fr 1fr 1fr 1fr;
   gap: 48px;
   margin-bottom: 72px
}

.ft-brand {
   font-family: var(--D);
   font-size: 28px;
   font-weight: 700;
   color: white
}

.ft-tag {
   font-size: 10px;
   font-weight: 300;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .2);
   margin: 6px 0 18px
}

.ft-ab {
   font-size: 13px;
   font-weight: 300;
   color: rgba(255, 255, 255, .28);
   line-height: 1.9
}

.ft-amfi {
   margin-top: 22px;
   background: rgba(61, 41, 161, .18);
   border: 1px solid rgba(61, 41, 161, .3);
   border-left: 2px solid var(--blue);
   padding: 12px 16px;
   font-size: 10.5px;
   font-weight: 500;
   color: rgba(255, 255, 255, .38);
   letter-spacing: .06em
}

.ft-social {
   display: flex;
   gap: 10px;
   margin-top: 20px
}

.ft-soc-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .12);
   color: rgba(255, 255, 255, .45);
   transition: border-color .2s, color .2s, background .2s
}

.ft-soc-icon:hover {
   border-color: rgba(255, 255, 255, .35);
   color: #fff;
   background: rgba(255, 255, 255, .06)
}

.ft-ch {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .28);
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 1px solid rgba(61, 41, 161, .3)
}

.ft-li {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.ft-li a {
   font-size: 13px;
   font-weight: 300;
   color: rgba(255, 255, 255, .3);
   text-decoration: none;
   transition: color .2s
}

.ft-li a:hover {
   color: white
}

.ft-app {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px;
   padding: 24px 0;
   border-top: 1px solid rgba(255, 255, 255, .05)
}

.ft-app-label {
   font-size: 13px;
   font-weight: 600;
   color: rgba(255, 255, 255, .5);
   letter-spacing: -.2px
}

.ft-app-badges {
   display: flex;
   gap: 12px;
   flex-wrap: wrap
}

.ft-app-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 9px 16px;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 6px;
   color: rgba(255, 255, 255, .7);
   text-decoration: none;
   font-size: 12.5px;
   font-weight: 500;
   transition: all .25s
}

.ft-app-badge:hover {
   background: rgba(255, 255, 255, .06);
   border-color: rgba(255, 255, 255, .25);
   color: white
}

.ft-bot {
   padding-top: 32px;
   border-top: 1px solid rgba(255, 255, 255, .05);
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px
}

.ft-c {
   font-size: 11.5px;
   font-weight: 300;
   color: rgba(255, 255, 255, .18)
}

.ft-d {
   font-size: 10.5px;
   font-weight: 300;
   color: rgba(255, 255, 255, .14);
   max-width: 500px;
   line-height: 1.7;
   text-align: right
}

.ft-dev {
   width: 100%;
   text-align: center;
   font-size: 11px;
   font-weight: 300;
   color: rgba(255, 255, 255, .18);
   padding-top: 12px;
   border-top: 1px solid rgba(255, 255, 255, .04)
}

.ft-dev a {
   color: rgba(255, 255, 255, .4);
   text-decoration: none;
   transition: color .2s
}

.ft-dev a:hover {
   color: rgba(255, 255, 255, .75)
}

/* ── LEGAL PAGES ── */
.legal-body {
   max-width: 820px;
   margin: 0 auto;
   padding: 48px 0 72px
}

.legal-updated {
   font-size: 12px;
   color: rgba(8, 9, 28, .4);
   margin-bottom: 32px
}

.legal-notice {
   background: rgba(224, 50, 33, .06);
   border-left: 3px solid var(--red);
   padding: 16px 20px;
   font-size: 13.5px;
   font-weight: 500;
   color: rgba(8, 9, 28, .75);
   line-height: 1.7;
   border-radius: 0 4px 4px 0;
   margin-bottom: 36px
}

.legal-section {
   margin-bottom: 36px
}

.legal-section h2 {
   font-family: 'Playfair Display', serif;
   font-size: 20px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 12px;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--line)
}

.legal-section p {
   font-size: 14.5px;
   line-height: 1.85;
   color: rgba(8, 9, 28, .72);
   margin-bottom: 12px
}

.legal-section ul {
   padding-left: 20px;
   margin-bottom: 12px
}

.legal-section li {
   font-size: 14.5px;
   line-height: 1.8;
   color: rgba(8, 9, 28, .72);
   margin-bottom: 6px
}

.legal-section a {
   color: var(--blue);
   text-decoration: none
}

.legal-section a:hover {
   text-decoration: underline
}

.legal-contact-card {
   background: var(--bg-soft, #f7f8fc);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 20px 24px;
   margin: 16px 0 20px
}

.lcc-label {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 4px
}

.lcc-name {
   font-size: 15px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 12px
}

.lcc-row {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   color: rgba(8, 9, 28, .7);
   margin-bottom: 6px
}

.lcc-row a {
   color: var(--blue);
   text-decoration: none
}

.legal-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
   margin-top: 12px
}

.legal-table th {
   background: var(--blue-deep);
   color: #fff;
   padding: 10px 14px;
   text-align: left;
   font-weight: 600;
   font-size: 12px;
   letter-spacing: .04em
}

.legal-table td {
   padding: 10px 14px;
   border-bottom: 1px solid var(--line);
   color: rgba(8, 9, 28, .72);
   vertical-align: top
}

.legal-table tr:last-child td {
   border-bottom: none
}

.legal-table tr:nth-child(even) td {
   background: rgba(8, 9, 28, .02)
}

/* ── SCROLL-TO-TOP ── */
#stb {
   position: fixed;
   bottom: 100px;
   right: 30px;
   z-index: 990;
   width: 50px;
   height: 50px;
   background: var(--blue);
   color: white;
   border: none;
   font-size: 18px;
   cursor: pointer;
   box-shadow: 0 8px 32px rgba(61, 41, 161, .3);
   opacity: 0;
   transform: translateY(16px);
   transition: all .4s cubic-bezier(.16, 1, .3, 1)
}

#stb.show {
   opacity: 1;
   transform: translateY(0)
}

#stb:hover {
   background: var(--red)
}

/* ── WHATSAPP BUTTON ── */
.wa-btn {
   position: fixed;
   bottom: 28px;
   right: 28px;
   width: 58px;
   height: 58px;
   background: #25D366;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 28px rgba(37, 211, 102, .45);
   z-index: 9000;
   transition: transform .3s, box-shadow .3s;
   text-decoration: none
}

.wa-btn:hover {
   transform: scale(1.1) translateY(-3px);
   box-shadow: 0 16px 40px rgba(37, 211, 102, .55)
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
   width: 100%;
   height: 100vh;
   min-height: 600px;
   position: relative;
   overflow: hidden;
   background: var(--off);
   margin-top: -24px
}

.hc-wrap {
   width: 100%;
   height: 100%;
   position: relative
}

.hc-slide {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   opacity: 0;
   visibility: hidden;
   transition: opacity .9s cubic-bezier(.16, 1, .3, 1), visibility .9s;
   pointer-events: none
}

.hc-slide.active {
   opacity: 1;
   visibility: visible;
   pointer-events: auto
}

.hc-row-top,
.hc-row-bot {
   height: clamp(36px, 7vw, 100px);
   overflow: hidden;
   display: flex;
   align-items: center;
   position: relative
}

.hc-row-top {
   border-bottom: 1px solid var(--line)
}

.hc-row-bot {
   border-top: 1px solid var(--line)
}

.hc-row-mid {
   flex: 1;
   display: flex;
   align-items: stretch;
   min-height: 0
}

.hc-ghost {
   display: flex;
   align-items: center;
   gap: 0;
   will-change: transform
}

.hc-ghost span {
   font-family: var(--D);
   font-size: clamp(50px, 10vw, 140px);
   font-weight: 700;
   color: transparent;
   -webkit-text-stroke: 2px rgba(61, 41, 161, .18);
   letter-spacing: 0.08em;
   line-height: 1;
   user-select: none;
   pointer-events: none;
   min-width: 65vw;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.hc-ghost span:nth-child(2) {
   -webkit-text-stroke-color: rgba(224, 50, 33, .15)
}

.hc-ghost-ltr {
   animation: ghostLTR 16s linear infinite
}

.hc-ghost-rtl {
   animation: ghostRTL 16s linear infinite
}

@keyframes ghostLTR {
   0% {
      transform: translateX(0%)
   }

   100% {
      transform: translateX(-33.33%)
   }
}

@keyframes ghostRTL {
   0% {
      transform: translateX(-33.33%)
   }

   100% {
      transform: translateX(0%)
   }
}

.hc-col-left,
.hc-col-right {
   width: 20%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   padding: 40px 36px;
   position: relative
}

.hc-col-left {
   border-right: 1px solid var(--line)
}

.hc-col-right {
   border-left: 1px solid var(--line)
}

.hc-col-mid {
   flex: 1;
   position: relative;
   overflow: hidden
}

.hc-headline-wrap {
   display: flex;
   flex-direction: column
}

.hc-hl-line {
   display: block;
   font-family: var(--D);
   font-size: clamp(32px, 4vw, 64px);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -2px;
   color: var(--ink)
}

.hc-hl-1 {
   font-style: italic;
   color: var(--blue)
}

.hc-hl-2 {
   color: var(--red)
}

.hc-hl-3 {
   color: var(--blue-dark)
}

.hc-media {
   width: 100%;
   height: 100%;
   display: block
}

.hc-image {
   object-fit: cover
}

.hc-video {
   border: none
}

.hc-media-placeholder {
   width: 100%;
   height: 100%;
   background: rgba(61, 41, 161, .04);
   display: flex;
   align-items: center;
   justify-content: center;
   border-left: 1px solid var(--line);
   border-right: 1px solid var(--line)
}

.hc-placeholder-inner {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px
}

.hc-ph-icon {
   font-size: 48px;
   opacity: .3
}

.hc-ph-text {
   font-size: 12px;
   font-weight: 300;
   color: rgba(8, 9, 28, .3);
   max-width: 200px;
   line-height: 1.6;
   text-align: center
}

.hc-excerpt-wrap {
   display: flex;
   flex-direction: column;
   gap: 20px
}

.hc-excerpt-line {
   width: 32px;
   height: 2px;
   background: var(--red)
}

.hc-excerpt {
   font-size: 13.5px;
   font-weight: 300;
   color: rgba(8, 9, 28, .7);
   line-height: 1.9
}

.hc-cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--blue);
   text-decoration: none;
   transition: gap .25s, color .25s;
   margin-top: 8px
}

.hc-cta:hover {
   color: var(--red);
   gap: 14px
}

.hc-controls {
   position: absolute;
   bottom: 28px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   gap: 16px;
   z-index: 10
}

.hc-prev,
.hc-next {
   width: 40px;
   height: 40px;
   border: 1.5px solid rgba(61, 41, 161, .25);
   background: rgba(248, 248, 252, .9);
   backdrop-filter: blur(8px);
   color: var(--blue);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all .25s;
   flex-shrink: 0
}

.hc-prev:hover,
.hc-next:hover {
   background: var(--blue);
   color: white;
   border-color: var(--blue)
}

.hc-dots {
   display: flex;
   gap: 8px;
   align-items: center
}

.hc-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(61, 41, 161, .2);
   border: none;
   cursor: pointer;
   transition: all .3s;
   padding: 0
}

.hc-dot.active {
   width: 24px;
   border-radius: 4px;
   background: var(--blue)
}

/* ============================================================
   ROAD TRAVELED TIMELINE
   ============================================================ */
.rdt-s {
   padding: 80px 0;
   background: var(--off)
}

.rdt-head {
   text-align: center;
   margin-bottom: 64px
}

.rdt-h1 {
   font-family: var(--D);
   font-size: clamp(36px, 5vw, 68px);
   font-weight: 700;
   letter-spacing: -2px;
   color: var(--ink);
   line-height: 1;
   margin-top: 12px
}

.rdt-h1 em {
   font-style: italic;
   color: var(--blue)
}

.rdt-sub {
   font-size: 14px;
   color: rgba(8, 9, 28, .5);
   max-width: 480px;
   margin: 16px auto 0;
   line-height: 1.8
}

.rdt-track {
   position: relative;
   max-width: 880px;
   margin: 0 auto
}

.rdt-track::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 2px;
   background: var(--blue);
   transform: translateX(-50%);
   opacity: .15
}

.rdt-row {
   display: flex;
   align-items: center;
   min-height: 140px;
   position: relative
}

.rdt-cell {
   width: calc(50% - 44px);
   padding: 28px 36px
}

.rdt-cell-l {
   text-align: right
}

.rdt-cell-r {
   text-align: left
}

.rdt-conn {
   width: 88px;
   flex-shrink: 0;
   position: relative;
   align-self: stretch
}

.rdt-conn-r::before {
   content: '';
   position: absolute;
   left: 50%;
   top: 50%;
   width: 44px;
   height: 2px;
   background: var(--red);
   transform: translateY(-50%)
}

.rdt-conn-r::after {
   content: '';
   position: absolute;
   right: 0;
   top: calc(50% - 12px);
   width: 2px;
   height: 24px;
   background: var(--red)
}

.rdt-conn-l::before {
   content: '';
   position: absolute;
   right: 50%;
   top: 50%;
   width: 44px;
   height: 2px;
   background: var(--red);
   transform: translateY(-50%)
}

.rdt-conn-l::after {
   content: '';
   position: absolute;
   left: 0;
   top: calc(50% - 12px);
   width: 2px;
   height: 24px;
   background: var(--red)
}

.rdt-year {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .2em;
   color: var(--red);
   text-transform: uppercase;
   margin-bottom: 6px
}

.rdt-title {
   font-size: 15px;
   font-weight: 700;
   color: var(--ink);
   letter-spacing: -.2px;
   margin-bottom: 10px;
   text-transform: uppercase;
   line-height: 1.3
}

.rdt-desc {
   font-size: 13px;
   color: rgba(8, 9, 28, .6);
   line-height: 1.85;
   text-align: justify
}

.rdt-footer {
   font-size: 13px;
   color: rgba(8, 9, 28, .45);
   line-height: 1.9;
   text-align: center;
   max-width: 680px;
   margin: 56px auto 0;
   border-top: 1px solid var(--line);
   padding-top: 32px;
   font-style: italic
}

@media (max-width: 768px) {
   .rdt-track::before {
      left: 16px
   }

   .rdt-row {
      flex-direction: column;
      align-items: flex-start;
      padding-left: 40px;
      border-left: 2px solid rgba(61, 41, 161, .15);
      min-height: auto;
      margin-bottom: 8px
   }

   .rdt-cell {
      width: 100%;
      padding: 16px 0;
      text-align: left
   }

   .rdt-cell:empty {
      display: none
   }

   .rdt-conn {
      display: none
   }

   .rdt-track::before {
      display: none
   }

   .rdt-cell-l {
      text-align: left
   }

   .rdt-footer {
      margin-top: 36px
   }
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-s {
   background: var(--off)
}

.about-g {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 100px;
   align-items: center
}

.abig {
   position: absolute;
   font-family: var(--D);
   font-size: 300px;
   font-weight: 700;
   color: transparent;
   -webkit-text-stroke: 2px rgba(61, 41, 161, .18);
   line-height: .8;
   top: -30px;
   left: -20px;
   pointer-events: none;
   user-select: none;
   z-index: 0
}

.avis {
   position: relative
}

.a-qcard {
   background: var(--blue-deep);
   padding: 60px 52px;
   position: relative;
   z-index: 1;
   overflow: hidden;
   border-left: 5px solid var(--red)
}

.a-qcard::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 85% 15%, rgba(61, 41, 161, .4) 0%, transparent 55%)
}

.a-qcard::after {
   content: '\201C';
   font-family: var(--D);
   font-size: 420px;
   font-weight: 700;
   color: rgba(255, 255, 255, .025);
   position: absolute;
   top: -140px;
   left: 0;
   line-height: 1;
   pointer-events: none
}

.a-quote {
   font-family: var(--D);
   font-size: 23px;
   font-weight: 400;
   font-style: italic;
   color: rgba(255, 255, 255, .9);
   line-height: 1.65;
   position: relative;
   z-index: 1;
   margin-bottom: 24px
}

.a-cite {
   font-size: 10.5px;
   font-weight: 600;
   color: var(--red);
   letter-spacing: .18em;
   text-transform: uppercase
}

.a-est {
   position: absolute;
   bottom: -24px;
   right: 36px;
   z-index: 2;
   background: var(--red);
   color: white;
   padding: 20px 28px;
   box-shadow: 0 16px 48px rgba(224, 50, 33, .4);
   transform: rotate(-1.5deg)
}

.a-yr {
   font-family: var(--D);
   font-size: 40px;
   font-weight: 700;
   line-height: 1;
   display: block
}

.a-el {
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .2em;
   text-transform: uppercase;
   opacity: .8;
   margin-top: 3px
}

.a-body {
   font-size: 15.5px;
   font-weight: 300;
   color: rgba(8, 9, 28, .7);
   line-height: 1.95;
   margin-bottom: 18px
}

.pillars {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-top: 40px
}

.pil {
   border: 1px solid var(--line);
   background: white;
   padding: 28px 22px;
   transition: all .35s cubic-bezier(.16, 1, .3, 1);
   position: relative;
   overflow: hidden
}

.pil::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--blue), var(--red));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .4s
}

.pil:hover::after {
   transform: scaleX(1)
}

.pil:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(61, 41, 161, .1)
}

.pi-i {
   font-size: 22px;
   margin-bottom: 12px;
   display: block
}

.pi-n {
   font-size: 13px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 5px
}

.pi-d {
   font-size: 12px;
   font-weight: 300;
   color: rgba(8, 9, 28, .42);
   line-height: 1.65
}

/* ── NUMBERS STRIP ── */
.nums-s {
   background: var(--blue-deep);
   padding: 0;
   position: relative;
   overflow: hidden
}

.nums-s::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 50% -20%, rgba(61, 41, 161, .5) 0%, transparent 65%);
   pointer-events: none
}

.nums-i {
   max-width: 1440px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(var(--trust-cols), 1fr)
}

.nbox {
   padding: 80px 40px;
   border-right: 1px solid rgba(255, 255, 255, .06);
   text-align: center;
   position: relative;
   overflow: hidden;
   transition: background .4s;
   cursor: default
}

.nbox:last-child {
   border: none
}

.nbox::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 3px;
   background: var(--red);
   transition: width .4s cubic-bezier(.16, 1, .3, 1)
}

.nbox:hover {
   background: rgba(255, 255, 255, .03)
}

.nbox:hover::before {
   width: 60%
}

.nv {
   font-family: var(--D);
   font-size: 60px;
   font-weight: 700;
   color: white;
   line-height: 1;
   letter-spacing: -2px;
   display: block
}

.nv .rx {
   font-size: 30px;
   color: var(--red)
}

.nl2 {
   font-size: 10px;
   font-weight: 500;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .28);
   margin-top: 10px;
   display: block
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.svc-s {
   background: white
}

.svc-head {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: end;
   margin-bottom: 72px
}

.svc-g {
   display: grid;
   grid-template-columns: repeat(4, 1fr)
}

.sc {
   padding: 44px 32px;
   border: 1px solid var(--line);
   border-right: none;
   border-bottom: none;
   position: relative;
   overflow: hidden;
   transition: all .4s cubic-bezier(.16, 1, .3, 1);
   cursor: default
}

.sc:nth-child(4n) {
   border-right: 1px solid var(--line)
}

.sc:nth-last-child(-n+4) {
   border-bottom: 1px solid var(--line)
}

.sc-ink {
   position: absolute;
   inset: 0;
   background: var(--blue-deep);
   transform: translateY(102%);
   transition: transform .45s cubic-bezier(.16, 1, .3, 1)
}

.sc:hover .sc-ink {
   transform: translateY(0)
}

.sc-bign {
   position: absolute;
   font-family: var(--D);
   font-size: 130px;
   font-weight: 700;
   color: rgba(255, 255, 255, .04);
   bottom: -20px;
   right: -10px;
   line-height: 1;
   pointer-events: none;
   z-index: 1
}

.sc-con {
   position: relative;
   z-index: 2
}

.sc-num {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .2em;
   color: rgba(8, 9, 28, .25);
   margin-bottom: 22px;
   transition: color .3s
}

.sc:hover .sc-num {
   color: rgba(255, 255, 255, .3)
}

.sc-ic {
   width: 52px;
   height: 52px;
   background: rgba(61, 41, 161, .07);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   margin-bottom: 22px;
   transition: background .3s
}

.sc:hover .sc-ic {
   background: rgba(255, 255, 255, .1)
}

.sc-name {
   font-size: 15px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 10px;
   transition: color .3s;
   line-height: 1.25
}

.sc:hover .sc-name {
   color: white
}

.sc-desc {
   font-size: 12.5px;
   font-weight: 300;
   color: rgba(8, 9, 28, .7);
   line-height: 1.7;
   transition: color .3s
}

.sc:hover .sc-desc {
   color: rgba(255, 255, 255, .5)
}

.sc-arr {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--red);
   text-decoration: none;
   margin-top: 22px;
   opacity: 0;
   transform: translateY(8px);
   transition: opacity .3s .05s, transform .3s .05s
}

.sc:hover .sc-arr {
   opacity: 1;
   transform: translateY(0)
}

/* ============================================================
   WISDOM / ACCORDION SECTION
   ============================================================ */
.wis-s {
   background: var(--off)
}

.wis-g {
   display: grid;
   grid-template-columns: 420px 1fr;
   gap: 100px;
   align-items: start
}

.wis-stk {
   position: sticky;
   top: 120px
}

.wacc {
   display: flex;
   flex-direction: column
}

.wi {
   border-bottom: 1px solid var(--line);
   overflow: hidden
}

.wi:first-child {
   border-top: 1px solid var(--line)
}

.wt {
   display: flex;
   align-items: center;
   padding: 26px 0;
   cursor: pointer;
   user-select: none
}

.wt:hover .wq {
   color: var(--blue)
}

.wno {
   font-size: 10px;
   font-weight: 700;
   color: rgba(8, 9, 28, .2);
   letter-spacing: .16em;
   min-width: 44px
}

.wq {
   font-size: 14.5px;
   font-weight: 600;
   color: var(--ink);
   flex: 1;
   padding-right: 20px;
   line-height: 1.4;
   transition: color .25s
}

.war {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   border: 1.5px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   color: rgba(8, 9, 28, .3);
   flex-shrink: 0;
   transition: all .35s
}

.wi.op .war {
   background: var(--blue);
   border-color: var(--blue);
   color: white;
   transform: rotate(45deg)
}

.wi.op .wq {
   color: var(--blue)
}

.wb {
   max-height: 0;
   overflow: hidden;
   transition: max-height .5s cubic-bezier(.16, 1, .3, 1)
}

.wb-i {
   font-size: 14px;
   font-weight: 300;
   color: rgba(8, 9, 28, .48);
   line-height: 1.9;
   padding: 8px 0 28px 44px
}

/* ============================================================
   RESOURCES / REPORTS SECTION
   ============================================================ */
.res-s {
   background: white
}

.res-head {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: end;
   gap: 40px;
   margin-bottom: 56px
}

.res-g {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border: 1px solid var(--line)
}

.rc {
   background: white;
   padding: 40px 36px;
   text-decoration: none;
   transition: all .35s cubic-bezier(.16, 1, .3, 1);
   display: flex;
   flex-direction: column;
   gap: 12px;
   position: relative;
   overflow: hidden;
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.rc:nth-child(3n) {
   border-right: none
}

.rc:nth-last-child(-n+3) {
   border-bottom: none
}

.rc::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--blue), var(--red));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .4s ease
}

.rc:hover {
   background: rgba(61, 41, 161, .02)
}

.rc:hover::before {
   transform: scaleX(1)
}

.rt {
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--red)
}

.rn {
   font-family: var(--D);
   font-size: 18px;
   font-weight: 700;
   color: var(--ink);
   line-height: 1.35
}

.rd {
   font-size: 11.5px;
   font-weight: 300;
   color: rgba(8, 9, 28, .35)
}

.ra {
   margin-top: auto;
   align-self: flex-start;
   width: 38px;
   height: 38px;
   border: 1.5px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   color: var(--blue);
   transition: all .3s
}

.rc:hover .ra {
   background: var(--blue);
   color: white;
   border-color: var(--blue)
}

.rdesc {
   font-size: 12.5px;
   font-weight: 300;
   color: rgba(8, 9, 28, .55);
   line-height: 1.7
}

.rc-btn {
   margin-top: auto;
   align-self: flex-start;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--blue);
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   padding: 11px 20px;
   transition: background .3s
}

.rc:hover .rc-btn {
   background: var(--blue-dark)
}

/* ============================================================
   TOOLS SECTION
   ============================================================ */
.tl-s {
   background: var(--off)
}

.calc-s {
   background: var(--off)
}

.calc-head {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: end;
   margin-bottom: 60px
}

.calc-g {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   margin-bottom: 36px
}

.calc-card {
   position: relative;
   overflow: hidden;
   padding: 40px 32px 36px;
   background: white;
   border: 1px solid var(--line);
   text-decoration: none;
   display: flex;
   flex-direction: column;
   gap: 0;
   transition: box-shadow .4s, transform .4s;
   cursor: pointer
}

.calc-card:hover {
   box-shadow: 0 24px 60px rgba(61, 41, 161, .13);
   transform: translateY(-6px)
}

.cc-ink {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 0;
   background: var(--blue-deep);
   transition: height .45s cubic-bezier(.16, 1, .3, 1);
   z-index: 0
}

.calc-card:hover .cc-ink {
   height: 100%
}

.cc-icon {
   width: 56px;
   height: 56px;
   border: 1.5px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--blue);
   margin-bottom: 28px;
   position: relative;
   z-index: 1;
   transition: border-color .3s, color .3s
}

.calc-card:hover .cc-icon {
   border-color: rgba(255, 255, 255, .2);
   color: rgba(255, 255, 255, .7)
}

.cc-tag {
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .22em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 10px;
   position: relative;
   z-index: 1;
   transition: color .3s
}

.calc-card:hover .cc-tag {
   color: rgba(255, 255, 255, .45)
}

.cc-name {
   font-family: var(--D);
   font-size: 22px;
   font-weight: 700;
   color: var(--ink);
   line-height: 1.2;
   letter-spacing: -.5px;
   margin-bottom: 16px;
   position: relative;
   z-index: 1;
   transition: color .3s
}

.calc-card:hover .cc-name {
   color: white
}

.cc-desc {
   font-size: 13px;
   font-weight: 300;
   color: rgba(8, 9, 28, .45);
   line-height: 1.8;
   flex: 1;
   position: relative;
   z-index: 1;
   transition: color .3s
}

.calc-card:hover .cc-desc {
   color: rgba(255, 255, 255, .45)
}

.cc-cta {
   margin-top: 28px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--blue);
   display: flex;
   align-items: center;
   gap: 6px;
   position: relative;
   z-index: 1;
   transition: color .3s, gap .25s
}

.calc-card:hover .cc-cta {
   color: white;
   gap: 10px
}

.cc-cta span {
   font-size: 14px
}

.calc-disc {
   font-size: 10.5px;
   font-weight: 300;
   color: rgba(8, 9, 28, .3);
   line-height: 1.7;
   text-align: center;
   max-width: 680px;
   margin: 0 auto;
   padding-top: 8px;
   border-top: 1px solid var(--line)
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.ct-s {
   background: var(--blue-deep);
   position: relative;
   overflow: hidden
}

.ct-s::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 25% 60%, rgba(224, 50, 33, .12) 0%, transparent 50%), radial-gradient(ellipse at 75% 30%, rgba(61, 41, 161, .3) 0%, transparent 50%);
   pointer-events: none
}

.ct-g {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 100px;
   align-items: start;
   position: relative;
   z-index: 2
}

.ct-sh2 {
   font-family: var(--D);
   font-size: clamp(36px, 4.5vw, 64px);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -2px;
   color: white;
   margin-bottom: 20px
}

.ct-sh2 em {
   font-style: italic;
   color: rgba(160, 168, 255, .9)
}

.ct-sub {
   font-size: 15px;
   font-weight: 300;
   color: rgba(255, 255, 255, .35);
   line-height: 1.9;
   margin: 20px 0 48px;
   max-width: 400px
}

.ci {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   padding: 22px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.ci:last-child {
   border: none
}

.ci-ic {
   width: 46px;
   height: 46px;
   flex-shrink: 0;
   background: rgba(224, 50, 33, .12);
   border: 1px solid rgba(224, 50, 33, .25);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px
}

.ci-l {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .25)
}

.ci-v {
   font-size: 15px;
   font-weight: 400;
   color: rgba(255, 255, 255, .8);
   margin-top: 4px
}

.ct-form {
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .08);
   border-top: 3px solid var(--red);
   padding: 48px
}

.fg {
   margin-bottom: 20px
}

.fl {
   display: block;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .3);
   margin-bottom: 8px
}

.fi,
.fsl,
.fta {
   width: 100%;
   padding: 13px 16px;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .09);
   border-bottom: 1px solid rgba(255, 255, 255, .2);
   font-family: var(--P);
   font-size: 14px;
   font-weight: 300;
   color: white;
   outline: none;
   transition: border .25s;
   border-radius: 0;
   -webkit-appearance: none
}

.fi:focus,
.fta:focus {
   border-bottom-color: var(--red)
}

.fi::placeholder,
.fta::placeholder {
   color: rgba(255, 255, 255, .18)
}

.fta {
   resize: vertical;
   min-height: 110px
}

.f2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
}

.fsl option {
   background: var(--blue-deep)
}

.fsb {
   width: 100%;
   padding: 16px;
   margin-top: 8px;
   background: var(--red);
   color: white;
   font-family: var(--P);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   border: none;
   cursor: pointer;
   transition: all .3s;
   position: relative;
   overflow: hidden
}

.fsb::after {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
   transition: left .5s
}

.fsb:hover::after {
   left: 100%
}

.fsb:hover {
   background: var(--red-dark);
   transform: translateY(-2px);
   box-shadow: 0 12px 36px rgba(224, 50, 33, .4)
}

.fd {
   font-size: 10.5px;
   font-weight: 300;
   color: rgba(255, 255, 255, .18);
   margin-top: 14px;
   line-height: 1.7
}

/* ============================================================
   LIVE MARKETS SECTION
   ============================================================ */
@media(max-width:768px) {
   .mkt-grid {
      grid-template-columns: 1fr !important
   }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet 1200px */
@media(max-width:1200px) {
   .nav-i {
      padding: 0 40px
   }

   .W {
      padding: 0 40px
   }

   .strip {
      padding: 9px 40px
   }

   .ft-g {
      grid-template-columns: 1fr 1fr;
      gap: 32px
   }

   .swm {
      font-size: clamp(50px, 8vw, 100px) !important
   }

   .hc-col-left,
   .hc-col-right {
      padding: 28px 20px
   }

   .hc-hl-line {
      font-size: clamp(26px, 3.5vw, 48px)
   }

   .about-g {
      gap: 60px
   }

   .nums-i {
      grid-template-columns: repeat(min(var(--trust-cols), 3), 1fr)
   }

   .svc-head {
      gap: 40px
   }

   .wis-g {
      grid-template-columns: 320px 1fr;
      gap: 60px
   }

   .ct-g {
      gap: 60px
   }

   .ct-form {
      padding: 36px
   }

   .tl-head {
      gap: 40px
   }

   .tl-g {
      grid-template-columns: repeat(4, 1fr)
   }

   .tl:nth-child(5n) {
      border-right: 1px solid var(--line)
   }

   .tl:nth-child(4n) {
      border-right: none
   }

   .tl:nth-last-child(-n+5) {
      border-bottom: 1px solid var(--line)
   }

   .tl:nth-last-child(-n+4) {
      border-bottom: none
   }
}

/* Mobile 768px */
@media(max-width:768px) {
   .strip {
      padding: 8px 20px;
      flex-wrap: wrap;
      gap: 6px
   }

   .strip-l {
      gap: 14px;
      flex-wrap: wrap
   }

   .nav-i {
      padding: 0 20px;
      height: 68px
   }

   .logo-img {
      height: 40px
   }

   ul.nl {
      display: none
   }

   .nbtn {
      padding: 9px 18px;
      font-size: 11px
   }

   .W {
      padding: 0 20px
   }

   section {
      padding: 80px 0
   }

   .ft-g {
      grid-template-columns: 1fr;
      gap: 28px
   }

   .ft-d {
      text-align: left
   }

   .swm {
      display: none
   }

   .hero-section {
      height: auto;
      min-height: 0;
      padding: 0
   }

   .hc-slide {
      position: relative;
      opacity: 1;
      visibility: visible;
      display: none
   }

   .hc-slide.active {
      display: flex
   }

   .hc-row-top,
   .hc-row-bot {
      height: 44px
   }

   .hc-row-mid {
      height: auto;
      flex-direction: column
   }

   .hc-col-left,
   .hc-col-right {
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--line);
      padding: 28px 20px
   }

   .hc-col-left .hc-headline-wrap {
      width: 100%;
      align-items: center;
      text-align: center
   }

   .hc-col-mid {
      width: 100%;
      height: 260px
   }

   .hc-ghost span {
      font-size: clamp(40px, 10vw, 80px)
   }

   .about-g {
      grid-template-columns: 1fr;
      gap: 60px
   }

   .nums-i {
      grid-template-columns: repeat(min(var(--trust-cols), 2), 1fr)
   }

   .nbox {
      padding: 50px 24px
   }

   .svc-head {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 40px
   }

   .svc-g {
      grid-template-columns: 1fr 1fr
   }

   .sc:nth-child(n) {
      border-right: none;
      border-bottom: none;
      border: 1px solid var(--line)
   }

   .sc {
      padding: 32px 24px
   }

   .wis-g {
      grid-template-columns: 1fr;
      gap: 40px
   }

   .wis-stk {
      position: static
   }

   .res-g {
      grid-template-columns: 1fr 1fr
   }

   .rc:nth-child(3n) {
      border-right: 1px solid var(--line)
   }

   .rc:nth-child(2n) {
      border-right: none
   }

   .rc:nth-last-child(-n+3) {
      border-bottom: 1px solid var(--line)
   }

   .rc:nth-last-child(-n+2) {
      border-bottom: none
   }

   .calc-head {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 40px
   }

   .calc-g {
      grid-template-columns: 1fr 1fr
   }

   .ct-g {
      grid-template-columns: 1fr;
      gap: 48px
   }

   .f2 {
      grid-template-columns: 1fr
   }
}

/* ============================================================
   FOUNDER SECTION
   ============================================================ */
.fndr-s {
   background: var(--off);
   padding-bottom: 70px
}

.fndr-g {
   display: grid;
   grid-template-columns: 420px 1fr;
   gap: 100px;
   align-items: center
}

.fndr-img-col {
   display: flex;
   flex-direction: column;
   gap: 28px
}

.fndr-img-wrap {
   position: relative;
   width: 100%
}

.fndr-img-bg {
   position: absolute;
   top: 20px;
   left: -20px;
   right: 20px;
   bottom: -20px;
   background: linear-gradient(135deg, var(--blue-deep), var(--blue));
   border-radius: 4px;
   z-index: 0
}

.fndr-photo {
   position: relative;
   z-index: 1;
   width: 100%;
   aspect-ratio: 3/4;
   object-fit: cover;
   object-position: top;
   filter: grayscale(100%);
   display: block;
   border-radius: 4px
}

.fndr-initials {
   position: relative;
   z-index: 1;
   width: 100%;
   aspect-ratio: 3/4;
   background: var(--blue-dark);
   display: none;
   align-items: center;
   justify-content: center;
   font-size: 80px;
   font-weight: 700;
   color: rgba(255, 255, 255, .25);
   border-radius: 4px
}

.fndr-badge {
   position: absolute;
   top: 28px;
   right: -14px;
   z-index: 3;
   background: var(--red);
   color: white;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .2em;
   text-transform: uppercase;
   padding: 8px 16px
}

.fndr-yr-tag {
   position: absolute;
   bottom: 28px;
   left: -14px;
   z-index: 3;
   background: var(--blue-deep);
   color: rgba(255, 255, 255, .7);
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .22em;
   text-transform: uppercase;
   padding: 8px 14px;
   border-left: 2px solid var(--red)
}

.fndr-sig {
   padding-top: 8px
}

.fndr-sig-name {
   font-size: 18px;
   font-weight: 700;
   color: var(--ink);
   letter-spacing: -.5px
}

.fndr-sig-title {
   font-size: 11.5px;
   font-weight: 400;
   color: rgba(8, 9, 28, .45);
   margin: 4px 0 8px
}

.fndr-cert-row {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.fcert {
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--blue);
   border: 1px solid rgba(61, 41, 161, .2);
   padding: 4px 10px;
   background: rgba(61, 41, 161, .04)
}

.fndr-content {
   padding-left: 20px
}

.fndr-qmark {
   font-family: var(--D);
   font-size: 120px;
   line-height: .6;
   color: var(--blue);
   opacity: .12;
   margin-bottom: -20px;
   font-style: italic
}

.fndr-quote {
   font-family: var(--D);
   font-size: 18px;
   font-style: italic;
   line-height: 1.75;
   color: var(--ink);
   font-weight: 400;
   margin-bottom: 28px;
   padding-left: 4px;
   border-left: 3px solid var(--red);
   padding-left: 20px
}

.fndr-body {
   font-size: 14.5px;
   font-weight: 300;
   line-height: 1.9;
   color: rgba(8, 9, 28, .7);
   margin-bottom: 18px
}

.fndr-pillars {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0;
   margin-top: 44px;
   border: 1px solid var(--line)
}

.fndr-pill {
   padding: 24px 20px;
   border-right: 1px solid var(--line);
   display: flex;
   flex-direction: column;
   gap: 6px
}

.fndr-pill:last-child {
   border-right: none
}

.fp-num {
   font-family: var(--D);
   font-size: 32px;
   font-weight: 700;
   color: var(--blue);
   line-height: 1
}

.fp-txt {
   font-size: 11px;
   font-weight: 400;
   color: rgba(8, 9, 28, .45);
   line-height: 1.5
}

/* ============================================================
   MEDIA PRESENCE
   ============================================================ */
.media-s {
   background: var(--blue-deep);
   padding: 80px 0
}

.media-head {
   text-align: center;
   margin-bottom: 56px
}

.media-head .sh2 {
   color: white
}

.media-head .sh2 em {
   color: rgba(255, 255, 255, .7)
}

.media-head .slabel {
   justify-content: center;
   color: rgba(255, 255, 255, .4)
}

.media-head .ssub {
   color: rgba(255, 255, 255, .35)
}

.media-strip {
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 4px;
   overflow: hidden
}

.media-track {
   display: flex;
   align-items: center;
   width: max-content;
   animation: media-marquee 30s linear infinite;
   will-change: transform
}

.media-strip:hover .media-track {
   animation-play-state: paused
}

.media-set {
   display: flex;
   align-items: center
}

@keyframes media-marquee {
   to {
      transform: translateX(-50%)
   }
}

@media(prefers-reduced-motion: reduce) {
   .media-track {
      animation: none
   }
}

.media-logo {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 36px 40px;
   flex: 0 0 auto;
   min-width: 120px;
   transition: background .3s;
   cursor: default
}

.media-logo:hover {
   background: rgba(255, 255, 255, .04)
}

.ml-name {
   font-size: 18px;
   font-weight: 700;
   color: rgba(255, 255, 255, .55);
   letter-spacing: -.5px;
   line-height: 1;
   transition: color .3s
}

.ml-sub {
   font-size: 8.5px;
   font-weight: 300;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .2);
   margin-top: 4px;
   transition: color .3s
}

.media-logo:hover .ml-name {
   color: rgba(255, 255, 255, .9)
}

.media-logo:hover .ml-sub {
   color: rgba(255, 255, 255, .4)
}

.media-sep {
   width: 1px;
   height: 60px;
   background: rgba(255, 255, 255, .08)
}

/* ============================================================
   LIVE MARKET TAPE (Yahoo Finance via backend)
   ============================================================ */
.mkt-tape {
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 10px;
   background: rgba(255, 255, 255, .03)
}

.mkt-tape-track {
   display: flex;
   width: max-content;
   animation: mkt-tape-scroll 40s linear infinite;
   will-change: transform
}

.mkt-tape:hover .mkt-tape-track {
   animation-play-state: paused
}

.mkt-set {
   display: flex;
   align-items: center
}

@keyframes mkt-tape-scroll {
   to {
      transform: translateX(-50%)
   }
}

@media(prefers-reduced-motion: reduce) {
   .mkt-tape-track {
      animation: none
   }
}

.mkt-q {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 28px;
   border-right: 1px solid rgba(255, 255, 255, .07);
   white-space: nowrap
}

.mkt-q-label {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .12em;
   color: rgba(255, 255, 255, .5);
   text-transform: uppercase
}

.mkt-q-price {
   font-size: 14px;
   font-weight: 700;
   color: #fff
}

.mkt-q-chg {
   font-size: 12px;
   font-weight: 600
}

.mkt-q-chg.up {
   color: #22c55e
}

.mkt-q-chg.down {
   color: #ef4444
}

@media(max-width:480px) {
   .mkt-q {
      padding: 12px 18px;
      gap: 8px
   }

   .mkt-q-price {
      font-size: 13px
   }
}


/* ============================================================
   BLOG PREVIEW
   ============================================================ */
.blog-s {
   background: var(--white)
}

.blog-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 56px
}

.blog-g {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px
}

.blog-card {
   text-decoration: none;
   display: flex;
   flex-direction: column;
   border: 1px solid var(--line);
   transition: box-shadow .35s, transform .35s;
   overflow: hidden
}

.blog-card:hover {
   box-shadow: 0 20px 60px rgba(61, 41, 161, .1);
   transform: translateY(-4px)
}

.bc-img {
   aspect-ratio: 16/9;
   overflow: hidden;
   position: relative
}

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

.blog-card:hover .bc-img img {
   transform: scale(1.05)
}

.bc-img-ph {
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(61, 41, 161, .08), rgba(61, 41, 161, .16));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 48px
}

.bc-cat {
   position: absolute;
   top: 14px;
   left: 14px;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   background: var(--blue);
   color: white;
   padding: 4px 10px
}

.bc-body {
   padding: 26px 28px 32px;
   display: flex;
   flex-direction: column;
   flex: 1
}

.bc-meta {
   display: flex;
   gap: 16px;
   font-size: 10.5px;
   font-weight: 400;
   color: rgba(8, 9, 28, .35);
   margin-bottom: 12px;
   letter-spacing: .03em
}

.bc-meta span+span::before {
   content: '·';
   margin-right: 16px
}

.bc-title {
   font-size: 16px;
   font-weight: 700;
   color: var(--ink);
   line-height: 1.4;
   letter-spacing: -.3px;
   margin-bottom: 12px
}

.bc-excerpt {
   font-size: 13px;
   font-weight: 300;
   color: rgba(8, 9, 28, .7);
   line-height: 1.8;
   flex: 1
}

.bc-read {
   margin-top: 20px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--blue);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: gap .25s
}

.blog-card:hover .bc-read {
   gap: 12px
}

/* ============================================================
   YOUTUBE VIDEOS
   ============================================================ */
.vids-s {
   background: var(--ink);
   padding: 120px 0
}

.vids-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 56px
}

.vids-h2 {
   font-family: var(--D);
   font-size: clamp(34px, 4vw, 58px);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -2px;
   color: white;
   margin-bottom: 0
}

.vids-h2 em {
   font-style: italic;
   color: rgba(255, 255, 255, .55)
}

.vids-g {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   margin-bottom: 48px
}

.vid-card {
   display: flex;
   flex-direction: column;
   gap: 14px
}

.vc-thumb {
   aspect-ratio: 16/9;
   overflow: hidden;
   position: relative;
   background: rgba(255, 255, 255, .04)
}

.vc-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s;
   display: block
}

.vid-card:hover .vc-thumb img {
   transform: scale(1.04)
}

.vc-thumb-ph {
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, .04);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 48px
}

.vc-play {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, .35);
   color: white;
   font-size: 36px;
   text-decoration: none;
   transition: background .3s
}

.vc-play:hover {
   background: rgba(224, 50, 33, .75)
}

.vc-play-ph {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 36px;
   color: rgba(255, 255, 255, .35);
   background: rgba(0, 0, 0, .2)
}

.vc-cat {
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--red)
}

.vc-title {
   font-size: 14.5px;
   font-weight: 600;
   color: rgba(255, 255, 255, .7);
   line-height: 1.5;
   transition: color .25s
}

.vid-card:hover .vc-title {
   color: white
}

.vids-cta {
   display: flex;
   justify-content: center
}

.vids-yt-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 16px 36px;
   border: 1px solid rgba(255, 255, 255, .15);
   color: rgba(255, 255, 255, .55);
   font-size: 12.5px;
   font-weight: 500;
   letter-spacing: .08em;
   text-decoration: none;
   transition: all .3s
}

.vids-yt-btn:hover {
   background: #FF0000;
   border-color: #FF0000;
   color: white
}

/* ============================================================
   RESPONSIVE — NEW SECTIONS
   ============================================================ */
@media(max-width:1200px) {
   .fndr-g {
      grid-template-columns: 320px 1fr;
      gap: 60px
   }

   .media-logo {
      padding: 28px 24px
   }
}

@media(max-width:768px) {
   .fndr-g {
      grid-template-columns: 1fr
   }

   .fndr-img-wrap {
      max-width: 320px
   }

   .fndr-content {
      padding-left: 0
   }

   .fndr-pillars {
      grid-template-columns: 1fr
   }

   .fndr-pill {
      border-right: none;
      border-bottom: 1px solid var(--line);
      align-items: center;
      text-align: center
   }

   .fndr-pill:last-child {
      border-bottom: none
   }

   .media-sep {
      display: none
   }

   .media-logo {
      min-width: 100px;
      padding: 20px 16px
   }

   .blog-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px
   }

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

   .vids-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px
   }

   .vids-g {
      grid-template-columns: 1fr 1fr
   }
}

@media(max-width:480px) {
   .blog-g {
      grid-template-columns: 1fr
   }

   .vids-g {
      grid-template-columns: 1fr
   }

   .media-strip {
      gap: 0
   }

   .media-logo {
      min-width: 80px;
      padding: 16px 12px
   }

   .ml-name {
      font-size: 13px
   }
}

/* Small Mobile 480px */
@media(max-width:480px) {
   .strip-l {
      display: none
   }

   .nav-i {
      justify-content: space-between
   }

   .nums-i {
      grid-template-columns: 1fr
   }

   .svc-g {
      grid-template-columns: 1fr
   }

   .svc-head {
      text-align: center
   }

   .svc-head .slabel {
      justify-content: center
   }

   .svc-head .ssub {
      margin: 0 auto
   }

   .sc {
      text-align: center
   }

   .sc-ic {
      margin-left: auto;
      margin-right: auto
   }

   .res-g {
      grid-template-columns: 1fr
   }

   .rc {
      border-right: none !important
   }

   .rc:last-child {
      border-bottom: none
   }

   .calc-g {
      grid-template-columns: 1fr
   }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.pg-bc {
   padding: 14px 0;
   font-size: 12px;
   color: rgba(8, 9, 28, .4);
   border-bottom: 1px solid var(--line)
}

.pg-bc a {
   color: rgba(8, 9, 28, .4);
   text-decoration: none
}

.pg-bc a:hover {
   color: var(--blue)
}

.pg-bc span {
   margin: 0 6px
}

/* Hero */
.about-hero {
   display: flex;
   min-height: 320px;
   overflow: hidden;
   position: relative
}

.about-hero-l {
   flex: 1;
   padding: 64px 72px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   border-left: 4px solid transparent;
   border-image: linear-gradient(180deg, var(--red), var(--blue)) 1
}

.about-hero-r {
   width: 300px;
   background: var(--blue-deep);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 20px;
   padding: 48px 40px;
   position: relative;
   overflow: hidden
}

.about-hero-r::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 30% 70%, rgba(224, 50, 33, .2), transparent 55%), radial-gradient(ellipse at 70% 30%, rgba(80, 60, 180, .35), transparent 55%)
}

.ah-tag {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px
}

.ah-tag::before {
   content: '';
   width: 24px;
   height: 2px;
   background: var(--red);
   display: inline-block
}

.ah-h {
   font-family: 'Playfair Display', serif;
   font-size: 42px;
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -1px;
   color: var(--ink);
   margin-bottom: 14px
}

.ah-h em {
   font-style: italic;
   color: var(--blue)
}

.ah-sub {
   font-size: 14px;
   color: rgba(8, 9, 28, .55);
   line-height: 1.75;
   max-width: 440px
}

.ah-stat {
   text-align: center;
   position: relative;
   z-index: 2
}

.ah-stat-n {
   font-family: 'Playfair Display', serif;
   font-size: 52px;
   font-weight: 700;
   color: white;
   line-height: 1
}

.ah-stat-l {
   font-size: 10px;
   letter-spacing: .14em;
   color: rgba(255, 255, 255, .45);
   margin-top: 4px;
   text-transform: uppercase;
   font-weight: 300
}

.ah-div {
   width: 1px;
   height: 40px;
   background: rgba(255, 255, 255, .15);
   position: relative;
   z-index: 2
}

.ah-wm {
   position: absolute;
   font-family: 'Playfair Display', serif;
   font-size: 140px;
   font-weight: 700;
   color: transparent;
   -webkit-text-stroke: 1.5px rgba(255, 255, 255, .06);
   bottom: -20px;
   left: -10px;
   line-height: 1;
   pointer-events: none
}

/* Story section */
.about-story {
   padding: 64px 72px 48px;
   display: grid;
   grid-template-columns: 1fr 1.6fr;
   gap: 56px;
   align-items: start
}

.about-story-vis {
   background: var(--off);
   padding: 32px;
   border-radius: 8px;
   text-align: center
}

.story-year {
   font-family: 'Playfair Display', serif;
   font-size: 80px;
   font-weight: 700;
   color: var(--blue);
   opacity: .18;
   line-height: 1
}

.story-quote {
   font-size: 13px;
   font-style: italic;
   color: rgba(8, 9, 28, .6);
   line-height: 1.75;
   border-left: 3px solid var(--red);
   padding-left: 16px;
   margin-top: 16px;
   text-align: left
}

.about-story-body p {
   font-size: 14px;
   line-height: 1.85;
   color: rgba(8, 9, 28, .7);
   margin-bottom: 16px
}

/* Pillars */
.pillars-s {
   padding: 0 72px 56px
}

.pillars-g {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-top: 20px
}

.pil {
   padding: 24px 18px;
   background: var(--off);
   border-radius: 8px;
   border-top: 3px solid var(--blue)
}

.pil-i {
   font-size: 24px;
   margin-bottom: 8px
}

.pil-n {
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 4px
}

.pil-d {
   font-size: 12px;
   color: rgba(8, 9, 28, .5);
   line-height: 1.65
}

/* Timeline */
.timeline-s {
   background: var(--blue-deep);
   padding: 64px 72px;
   position: relative;
   overflow: hidden
}

.timeline-s::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 80% 50%, rgba(224, 50, 33, .1), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(80, 60, 180, .2), transparent 55%)
}

.tl-inner {
   position: relative;
   z-index: 2
}

.tl-line {
   position: absolute;
   left: 119px;
   top: 0;
   bottom: 0;
   width: 1px;
   background: rgba(255, 255, 255, .1)
}

.tl-items {
   display: flex;
   flex-direction: column;
   gap: 0
}

.tl-item {
   display: grid;
   grid-template-columns: 120px 32px 1fr;
   align-items: start;
   padding: 28px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.tl-item:last-child {
   border-bottom: none
}

.tl-year {
   font-family: 'Playfair Display', serif;
   font-size: 22px;
   font-weight: 700;
   color: rgba(255, 255, 255, .35);
   text-align: right;
   padding-right: 24px;
   padding-top: 3px;
   line-height: 1
}

.tl-year.red {
   color: var(--red)
}

.tl-year.gold {
   color: #D4AF37
}

.tl-dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .2);
   border: 2px solid rgba(255, 255, 255, .3);
   margin-top: 4px;
   position: relative;
   z-index: 1
}

.tl-dot.red {
   background: var(--red);
   border-color: var(--red);
   box-shadow: 0 0 0 4px rgba(224, 50, 33, .2)
}

.tl-dot.gold {
   background: #D4AF37;
   border-color: #D4AF37;
   box-shadow: 0 0 0 4px rgba(212, 175, 55, .2)
}

.tl-content {
   padding-left: 24px
}

.tl-title {
   font-size: 14px;
   font-weight: 600;
   color: white;
   margin-bottom: 4px
}

.tl-desc {
   font-size: 12.5px;
   color: rgba(255, 255, 255, .45);
   line-height: 1.65
}

/* Trust bars (reused on about page) */
.about-trust {
   background: var(--blue-deep);
   padding: 48px 72px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   position: relative;
   overflow: hidden
}

.about-trust::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 80% 50%, rgba(224, 50, 33, .1), transparent 60%)
}

.at-box {
   text-align: center;
   position: relative;
   z-index: 2
}

.at-n {
   font-family: 'Playfair Display', serif;
   font-size: 44px;
   font-weight: 700;
   color: white;
   line-height: 1
}

.at-l {
   font-size: 10px;
   letter-spacing: .12em;
   color: rgba(255, 255, 255, .45);
   margin-top: 4px;
   text-transform: uppercase
}

.at-div {
   width: 1px;
   height: 48px;
   background: rgba(255, 255, 255, .12);
   flex-shrink: 0
}

/* Principals */
.principals-s {
   padding: 64px 72px
}

.principals-g {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 28px
}

.pcard {
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
   transition: all .2s
}

.pcard:hover {
   box-shadow: 0 8px 32px rgba(61, 41, 161, .1);
   transform: translateY(-2px)
}

.pcard-img {
   background: var(--blue-deep);
   overflow: hidden;
   position: relative
}

.pcard-img img {
   width: 100%;
   height: auto;
   display: block;
   filter: grayscale(100%)
}

.pcard-img-ph {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 56px;
   color: rgba(255, 255, 255, .3)
}

.pcard-body {
   padding: 22px
}

.pcard-name {
   font-size: 15px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 2px
}

.pcard-role {
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 10px
}

.pcard-bio {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .55);
   line-height: 1.65;
   text-align: justify
}

.pcard-certs {
   font-size: 11px;
   color: rgba(8, 9, 28, .4);
   margin-top: 8px;
   line-height: 1.5
}

.pcard-shakti {
   margin-top: 12px;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 11.5px;
   color: var(--blue);
   font-weight: 600;
   text-decoration: none
}

.pcard-shakti:hover {
   color: var(--red)
}

/* Founding Visionaries (legacy) */
.legacy-s {
   padding: 64px 72px;
   background: var(--off);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.legacy-head {
   max-width: 640px;
   margin-bottom: 32px
}

.legacy-sub {
   font-size: 14px;
   color: rgba(8, 9, 28, .6);
   line-height: 1.7;
   margin-top: 14px
}

.legacy-g {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

.lcard {
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
   transition: all .2s
}

.lcard:hover {
   box-shadow: 0 8px 32px rgba(61, 41, 161, .1);
   transform: translateY(-2px)
}

.lcard-img {
   background: var(--blue-deep);
   aspect-ratio: 3 / 4;
   position: relative
}

.lcard-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
   display: block;
   filter: grayscale(100%)
}

.lcard-img-ph {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 56px;
   color: rgba(255, 255, 255, .3)
}

.lcard-body {
   padding: 22px
}

.lcard-name {
   font-size: 15px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 2px
}

.lcard-role {
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 12px
}

.lcard-bio {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .55);
   line-height: 1.65;
   text-align: justify;
   margin-bottom: 10px
}

.lcard-quote {
   font-size: 12px;
   font-style: italic;
   color: var(--ink);
   border-left: 2px solid var(--red);
   padding-left: 12px;
   margin-top: 12px;
   line-height: 1.6
}

/* CTA strip */
.pg-cta {
   padding: 56px 72px;
   background: var(--off);
   border-top: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px
}

.pg-cta h3 {
   font-family: 'Playfair Display', serif;
   font-size: 24px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 6px
}

.pg-cta p {
   font-size: 13.5px;
   color: rgba(8, 9, 28, .55)
}

.pg-cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 14px 32px;
   background: var(--blue);
   color: white;
   font-size: 13px;
   font-weight: 600;
   border-radius: 2px;
   text-decoration: none;
   white-space: nowrap;
   transition: background .2s
}

.pg-cta-btn:hover {
   background: var(--blue-dark);
   color: white
}

/* Section label (reusable) */
.sec-label {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px
}

.sec-label::before {
   content: '';
   width: 24px;
   height: 2px;
   background: var(--red);
   display: inline-block
}

.sec-h2 {
   font-family: 'Playfair Display', serif;
   font-size: 34px;
   font-weight: 700;
   line-height: 1.1;
   color: var(--ink);
   margin-bottom: 20px
}

.sec-h2 em {
   font-style: italic;
   color: var(--blue)
}

.tl-sec-label {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .4);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px
}

.tl-sec-label::before {
   content: '';
   width: 24px;
   height: 2px;
   background: var(--red);
   display: inline-block
}

.tl-sec-h2 {
   font-family: 'Playfair Display', serif;
   font-size: 34px;
   font-weight: 700;
   line-height: 1.1;
   color: white;
   margin-bottom: 40px
}

.tl-sec-h2 em {
   font-style: italic;
   color: rgba(255, 255, 255, .55)
}

/* ============================================================
   PAGE HERO (compact — reports, chronicles, calculators etc.)
   ============================================================ */
.pg-hero {
   background: var(--blue-deep);
   padding: 56px 72px;
   position: relative;
   overflow: hidden
}

.pg-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 80% 50%, rgba(224, 50, 33, .12), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(80, 60, 180, .2), transparent 55%)
}

.pg-hero-inner {
   position: relative;
   z-index: 2
}

.pg-hero-tag {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px
}

.pg-hero-tag::before {
   content: '';
   width: 24px;
   height: 2px;
   background: var(--red);
   display: inline-block
}

.pg-hero h1 {
   font-family: 'Playfair Display', serif;
   font-size: 40px;
   font-weight: 700;
   color: white;
   line-height: 1.1;
   margin-bottom: 12px
}

.pg-hero h1 em {
   font-style: italic;
   color: rgba(255, 255, 255, .6)
}

.pg-hero-sub {
   font-size: 14px;
   color: rgba(255, 255, 255, .5);
   max-width: 520px;
   line-height: 1.7
}

.pg-hero-wm {
   position: absolute;
   font-family: 'Playfair Display', serif;
   font-size: 160px;
   font-weight: 700;
   color: transparent;
   -webkit-text-stroke: 1px rgba(255, 255, 255, .04);
   right: 40px;
   bottom: -30px;
   line-height: 1;
   pointer-events: none;
   z-index: 1
}

/* ============================================================
   REPORTS LIBRARY
   ============================================================ */
.reports-body {
   padding: 48px 72px 64px
}

.rep-section {
   margin-bottom: 60px
}

.rep-section-head {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 28px
}

.rep-cat-title {
   font-family: var(--D);
   font-size: clamp(18px, 2vw, 24px);
   font-weight: 700;
   color: var(--ink);
   white-space: nowrap
}

.rep-cat-line {
   flex: 1;
   height: 1px;
   background: rgba(61,41,161,.15)
}

.filter-bar {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 36px
}

.filter-bar-label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: rgba(8, 9, 28, .4);
   margin-right: 4px
}

.f-chip {
   display: inline-flex;
   align-items: center;
   padding: 7px 16px;
   border: 1px solid var(--line);
   border-radius: 2px;
   font-size: 12px;
   font-weight: 500;
   color: rgba(8, 9, 28, .55);
   background: white;
   cursor: pointer;
   text-decoration: none;
   transition: all .15s
}

.f-chip:hover {
   border-color: var(--blue);
   color: var(--blue)
}

.f-chip.active {
   background: var(--blue);
   border-color: var(--blue);
   color: white
}

.filter-search {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 0
}

.filter-search input {
   padding: 8px 14px;
   border: 1px solid var(--line);
   border-radius: 2px 0 0 2px;
   font-size: 12.5px;
   font-family: inherit;
   color: var(--ink);
   outline: none;
   width: 220px
}

.filter-search input:focus {
   border-color: var(--blue)
}

.filter-search button {
   padding: 8px 16px;
   background: var(--blue);
   border: 1px solid var(--blue);
   color: white;
   font-size: 12px;
   cursor: pointer;
   border-radius: 0 2px 2px 0
}

.reports-g {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

.rcard {
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: all .2s
}

.rcard:hover {
   box-shadow: 0 8px 28px rgba(61, 41, 161, .1);
   transform: translateY(-2px)
}

.rcard-head {
   background: var(--blue-deep);
   padding: 20px 22px;
   position: relative;
   overflow: hidden
}

.rcard-head::before {
   content: 'PDF';
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 48px;
   font-weight: 800;
   color: rgba(255, 255, 255, .06);
   font-family: 'Playfair Display', serif;
   pointer-events: none
}

.rcard-cat {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .45);
   margin-bottom: 4px
}

.rcard-date {
   font-size: 11px;
   color: rgba(255, 255, 255, .3)
}

.rcard-body {
   padding: 20px 22px;
   flex: 1;
   display: flex;
   flex-direction: column
}

.rcard-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 6px;
   line-height: 1.4
}

.rcard-desc {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .5);
   line-height: 1.65;
   flex: 1
}

.rcard-foot {
   padding: 14px 22px;
   border-top: 1px solid var(--line)
}

.rcard-dl {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 600;
   color: var(--blue);
   text-decoration: none
}

.rcard-dl:hover {
   color: var(--red)
}

.pg-pagination {
   margin-top: 40px;
   display: flex;
   justify-content: center;
   gap: 6px
}

.pg-pagination .page-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 36px;
   height: 36px;
   padding: 0 10px;
   border: 1px solid var(--line);
   border-radius: 2px;
   font-size: 12.5px;
   color: rgba(8, 9, 28, .55);
   text-decoration: none;
   transition: all .15s
}

.pg-pagination .page-link:hover {
   border-color: var(--blue);
   color: var(--blue)
}

.pg-pagination .page-link.active,
.pg-pagination .active .page-link {
   background: var(--blue);
   border-color: var(--blue);
   color: white
}

.pg-pagination .disabled .page-link {
   opacity: .4;
   pointer-events: none
}

.reports-empty {
   text-align: center;
   padding: 64px 24px;
   color: rgba(8, 9, 28, .35)
}

.reports-empty-icon {
   font-size: 40px;
   margin-bottom: 12px
}

.reports-empty p {
   font-size: 14px
}

/* ============================================================
   SERVICE PAGES
   ============================================================ */

/* Split Hero */
.svc-hero {
   display: flex;
   min-height: 300px;
   overflow: hidden
}

.svc-hero-l {
   flex: 1;
   padding: 56px 72px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   border-left: 4px solid transparent;
   border-image: linear-gradient(180deg, var(--red), var(--blue)) 1
}

.svc-hero-r {
   width: 260px;
   background: var(--blue-deep);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 40px 32px;
   position: relative;
   overflow: hidden;
   flex-shrink: 0
}

.svc-hero-r::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 30% 70%, rgba(224, 50, 33, .2), transparent 55%), radial-gradient(ellipse at 70% 30%, rgba(80, 60, 180, .35), transparent 55%)
}

.svc-icon {
   font-size: 48px;
   position: relative;
   z-index: 2
}

.svc-stat-n {
   font-family: 'Playfair Display', serif;
   font-size: 36px;
   font-weight: 700;
   color: white;
   line-height: 1;
   position: relative;
   z-index: 2;
   text-align: center
}

.svc-stat-l {
   font-size: 10px;
   letter-spacing: .14em;
   color: rgba(255, 255, 255, .45);
   text-transform: uppercase;
   font-weight: 300;
   position: relative;
   z-index: 2;
   text-align: center
}

.svc-hero-wm {
   position: absolute;
   font-family: 'Playfair Display', serif;
   font-size: 120px;
   font-weight: 700;
   color: transparent;
   -webkit-text-stroke: 1.5px rgba(255, 255, 255, .05);
   bottom: -20px;
   left: -10px;
   line-height: 1;
   pointer-events: none;
   z-index: 1
}

.svc-tag {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px
}

.svc-tag::before {
   content: '';
   width: 24px;
   height: 2px;
   background: var(--red);
   display: inline-block
}

.svc-h1 {
   font-family: 'Playfair Display', serif;
   font-size: 40px;
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -1px;
   color: var(--ink);
   margin-bottom: 12px
}

.svc-h1 em {
   font-style: italic;
   color: var(--blue)
}

.svc-sub {
   font-size: 14px;
   color: rgba(8, 9, 28, .55);
   line-height: 1.75;
   max-width: 440px;
   margin-bottom: 24px
}

.svc-cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 28px;
   background: var(--blue);
   color: white;
   font-size: 12.5px;
   font-weight: 600;
   border-radius: 2px;
   text-decoration: none;
   transition: background .2s
}

.svc-cta-btn:hover {
   background: var(--blue-dark);
   color: white
}

/* Intro two-column */
.svc-intro {
   padding: 56px 72px 48px;
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 56px;
   align-items: start
}

.svc-intro-body .sec-label {
   margin-bottom: 10px
}

.svc-intro-body h2 {
   font-family: 'Playfair Display', serif;
   font-size: 28px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 20px;
   line-height: 1.2
}

.svc-intro-body h2 em {
   font-style: italic;
   color: var(--blue)
}

.svc-intro-body p {
   font-size: 14px;
   line-height: 1.85;
   color: rgba(8, 9, 28, .7);
   margin-bottom: 14px
}

.svc-intro-aside {
   background: var(--off);
   padding: 28px;
   border-radius: 8px;
   border-left: 3px solid var(--blue)
}

.svc-intro-aside blockquote {
   font-size: 14px;
   font-style: italic;
   color: rgba(8, 9, 28, .65);
   line-height: 1.8;
   margin: 0
}

.svc-intro-aside cite {
   display: block;
   margin-top: 12px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--blue);
   font-style: normal
}

/* Numbered sub-sections (Estate & Legacy) */
.svc-sections {
   padding: 0 72px 56px
}

.svc-sections-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   margin-top: 28px
}

.svc-sec-card {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 28px;
   position: relative;
   overflow: hidden
}

.svc-sec-num {
   font-family: 'Playfair Display', serif;
   font-size: 56px;
   font-weight: 700;
   color: var(--blue);
   opacity: .08;
   position: absolute;
   top: 12px;
   right: 20px;
   line-height: 1
}

.svc-sec-n {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 6px
}

.svc-sec-title {
   font-size: 15px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 10px
}

.svc-sec-body {
   font-size: 13px;
   line-height: 1.75;
   color: rgba(8, 9, 28, .6)
}

/* Vikalpa Perspective */
.svc-perspective {
   background: var(--blue-deep);
   padding: 56px 72px;
   position: relative;
   overflow: hidden
}

.svc-perspective::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 80% 50%, rgba(224, 50, 33, .1), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(80, 60, 180, .2), transparent 55%)
}

.svc-perspective-wm {
   position: absolute;
   font-family: 'Playfair Display', serif;
   font-size: 200px;
   font-weight: 700;
   color: transparent;
   -webkit-text-stroke: 1px rgba(255, 255, 255, .03);
   right: -20px;
   bottom: -40px;
   line-height: 1;
   pointer-events: none
}

.svc-perspective-inner {
   position: relative;
   z-index: 2;
   max-width: 680px
}

.svc-perspective-label {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .4);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px
}

.svc-perspective-label::before {
   content: '';
   width: 24px;
   height: 2px;
   background: var(--red);
   display: inline-block
}

.svc-perspective h2 {
   font-family: 'Playfair Display', serif;
   font-size: 28px;
   font-weight: 700;
   color: white;
   margin-bottom: 20px;
   line-height: 1.2
}

.svc-perspective p {
   font-size: 14px;
   line-height: 1.85;
   color: rgba(255, 255, 255, .6);
   margin-bottom: 14px
}

.svc-perspective p:last-child {
   margin-bottom: 0
}

/* Related services */
.svc-related {
   padding: 56px 72px 64px
}

.svc-related-g {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 24px
}

.svc-rel-card {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 24px;
   text-decoration: none;
   display: flex;
   flex-direction: column;
   gap: 8px;
   transition: all .2s
}

.svc-rel-card:hover {
   box-shadow: 0 6px 24px rgba(61, 41, 161, .1);
   transform: translateY(-2px);
   border-color: var(--blue)
}

.svc-rel-icon {
   font-size: 28px
}

.svc-rel-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink)
}

.svc-rel-desc {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .5);
   line-height: 1.6
}

.svc-rel-arrow {
   font-size: 12px;
   color: var(--blue);
   font-weight: 600;
   margin-top: auto
}

/* ============================================================
   CHRONICLES
   ============================================================ */
.chronicles-hub {
   padding: 48px 72px 64px
}

.ch-section {
   margin-bottom: 56px
}

.ch-section-head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: 24px
}

.ch-view-all {
   font-size: 12px;
   font-weight: 600;
   color: var(--blue);
   text-decoration: none
}

.ch-view-all:hover {
   color: var(--red)
}

/* Blog cards */
.bcard-g {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
}

.bcard {
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: all .2s;
   text-decoration: none
}

.bcard:hover {
   box-shadow: 0 8px 28px rgba(61, 41, 161, .1);
   transform: translateY(-2px)
}

.bcard-img {
   height: 160px;
   background: var(--blue-deep);
   overflow: hidden;
   position: relative
}

.bcard-img img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.bcard-img-ph {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 40px
}

.bcard-body {
   padding: 18px;
   flex: 1;
   display: flex;
   flex-direction: column
}

.bcard-meta {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 8px
}

.bcard-cat {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--red)
}

.bcard-date {
   font-size: 11px;
   color: rgba(8, 9, 28, .35)
}

.bcard-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink);
   line-height: 1.4;
   margin-bottom: 8px
}

.bcard-excerpt {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .5);
   line-height: 1.65;
   flex: 1
}

.bcard-read {
   margin-top: 12px;
   font-size: 12px;
   font-weight: 600;
   color: var(--blue)
}

/* Blog detail */
/* Blog detail two-column layout */
.blog-detail-wrap {
   display: grid;
   grid-template-columns: 1fr 300px;
   gap: 48px;
   align-items: start;
   padding: 48px 72px 64px
}

.blog-detail {
   min-width: 0
}

.blog-detail-hero {
   margin-bottom: 40px
}

.blog-detail-hero img {
   width: 100%;
   height: 360px;
   object-fit: cover;
   border-radius: 8px
}

.blog-detail-meta {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 16px;
   flex-wrap: wrap
}

.blog-detail-cat {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--red);
   background: rgba(224, 50, 33, .06);
   padding: 4px 10px;
   border-radius: 2px
}

.blog-detail-date {
   font-size: 12px;
   color: rgba(8, 9, 28, .4)
}

.blog-detail-author {
   font-size: 12px;
   color: rgba(8, 9, 28, .4)
}

.blog-detail h1 {
   font-family: 'Playfair Display', serif;
   font-size: 36px;
   font-weight: 700;
   color: var(--ink);
   line-height: 1.2;
   margin-bottom: 32px
}

.blog-detail-content {
   font-size: 15px;
   line-height: 1.9;
   color: rgba(8, 9, 28, .75)
}

.blog-detail-content h2 {
   font-family: 'Playfair Display', serif;
   font-size: 24px;
   font-weight: 700;
   color: var(--ink);
   margin: 32px 0 12px
}

.blog-detail-content h3 {
   font-size: 17px;
   font-weight: 600;
   color: var(--ink);
   margin: 24px 0 10px
}

.blog-detail-content p {
   margin-bottom: 18px
}

.blog-detail-content ul,
.blog-detail-content ol {
   padding-left: 24px;
   margin-bottom: 18px
}

.blog-detail-content li {
   margin-bottom: 6px
}

.blog-detail-content blockquote {
   border-left: 3px solid var(--blue);
   padding-left: 20px;
   margin: 24px 0;
   font-style: italic;
   color: rgba(8, 9, 28, .6)
}

/* Blog sidebar */
.blog-sidebar {
   position: sticky;
   top: 24px;
   display: flex;
   flex-direction: column;
   gap: 32px
}

.bs-block {
   background: var(--bg-soft, #f8f8fb);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 20px
}

.bs-title {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 16px
}

.bs-posts {
   display: flex;
   flex-direction: column;
   gap: 14px
}

.bs-post {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   text-decoration: none;
   color: inherit
}

.bs-post:hover .bs-post-title {
   color: var(--blue)
}

.bs-post-img {
   width: 60px;
   height: 48px;
   object-fit: cover;
   border-radius: 4px;
   flex-shrink: 0
}

.bs-post-ph {
   background: var(--blue-deep);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px
}

.bs-post-info {
   flex: 1;
   min-width: 0
}

.bs-post-title {
   font-size: 13px;
   font-weight: 500;
   color: var(--ink);
   line-height: 1.45;
   margin-bottom: 4px;
   transition: color .2s
}

.bs-post-date {
   font-size: 11px;
   color: rgba(8, 9, 28, .4)
}

.bs-cats {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.bs-cat {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 9px 12px;
   border-radius: 5px;
   text-decoration: none;
   font-size: 13px;
   color: rgba(8, 9, 28, .7);
   transition: background .18s, color .18s
}

.bs-cat:hover {
   background: rgba(8, 9, 28, .05);
   color: var(--ink)
}

.bs-cat-active {
   background: rgba(224, 50, 33, .07);
   color: var(--red);
   font-weight: 600
}

.bs-cat-count {
   font-size: 12px;
   color: rgba(8, 9, 28, .35)
}

.blog-related {
   padding: 40px 72px 64px;
   border-top: 1px solid var(--line)
}

/* Audio book cards */
.acard-g {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px
}

.acard {
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
   display: flex;
   gap: 0;
   transition: all .2s;
   text-decoration: none
}

.acard:hover {
   box-shadow: 0 6px 24px rgba(61, 41, 161, .1);
   transform: translateY(-2px)
}

.acard-img {
   width: 120px;
   flex-shrink: 0;
   background: var(--blue-deep);
   overflow: hidden
}

.acard-img img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.acard-img-ph {
   width: 100%;
   height: 100%;
   min-height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 36px
}

.acard-body {
   padding: 18px;
   flex: 1
}

.acard-cat {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 6px
}

.acard-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink);
   line-height: 1.4;
   margin-bottom: 6px
}

.acard-desc {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .5);
   line-height: 1.6;
   margin-bottom: 12px
}

.acard-listen {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 12px;
   font-weight: 600;
   color: var(--blue)
}

/* Video cards */
.vcard-g {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px
}

.vcard {
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
   text-decoration: none;
   display: flex;
   flex-direction: column;
   transition: all .2s
}

.vcard:hover {
   box-shadow: 0 6px 24px rgba(61, 41, 161, .1);
   transform: translateY(-2px)
}

.vcard-thumb {
   position: relative;
   height: 180px;
   background: var(--blue-deep);
   overflow: hidden
}

.vcard-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.vcard-play {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, .35)
}

.vcard-play-btn {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .9);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   transition: transform .2s
}

.vcard:hover .vcard-play-btn {
   transform: scale(1.1)
}

.vcard-body {
   padding: 16px
}

.vcard-cat {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 4px
}

.vcard-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink);
   line-height: 1.4;
   margin-bottom: 4px
}

.vcard-desc {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .5);
   line-height: 1.6
}

.chronicles-listing {
   padding: 48px 72px 64px
}

/* ============================================================
   CALCULATORS
   ============================================================ */
.calc-page {
   padding: 48px 72px 64px
}

.calc-tabs-nav {
   display: flex;
   gap: 0;
   border-bottom: 2px solid var(--line);
   margin-bottom: 40px
}

.calc-tab-btn {
   padding: 12px 28px;
   font-size: 13px;
   font-weight: 600;
   color: rgba(8, 9, 28, .45);
   background: none;
   border: none;
   cursor: pointer;
   position: relative;
   font-family: inherit;
   transition: color .15s
}

.calc-tab-btn::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--blue);
   transform: scaleX(0);
   transition: transform .2s
}

.calc-tab-btn.active {
   color: var(--blue)
}

.calc-tab-btn.active::after {
   transform: scaleX(1)
}

.calc-tab-btn:hover {
   color: var(--blue)
}

.calc-panel {
   display: none
}

.calc-panel.active {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
   align-items: start
}

.calc-inputs label {
   display: block;
   font-size: 12px;
   font-weight: 600;
   color: rgba(8, 9, 28, .6);
   margin-bottom: 8px;
   margin-top: 20px
}

.calc-inputs label:first-child {
   margin-top: 0
}

.calc-range-row {
   display: flex;
   align-items: center;
   gap: 12px
}

.calc-range {
   flex: 1;
   -webkit-appearance: none;
   height: 4px;
   background: var(--line);
   border-radius: 2px;
   outline: none;
   cursor: pointer
}

.calc-range::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: var(--blue);
   cursor: pointer;
   border: 2px solid white;
   box-shadow: 0 1px 4px rgba(61, 41, 161, .3)
}

.calc-range-val {
   font-size: 13px;
   font-weight: 700;
   color: var(--ink);
   min-width: 80px;
   text-align: right
}

.calc-input-box {
   display: flex;
   align-items: center;
   gap: 4px;
   border: 1.5px solid var(--line);
   border-radius: 6px;
   padding: 6px 10px;
   flex-shrink: 0;
   min-width: 110px;
   background: var(--white)
}

.calc-input-prefix,
.calc-input-suffix {
   font-size: 12.5px;
   font-weight: 600;
   color: rgba(8, 9, 28, .45)
}

.calc-num-input {
   width: 100%;
   border: none;
   outline: none;
   font-size: 13px;
   font-weight: 700;
   color: var(--ink);
   background: transparent;
   text-align: right;
   font-family: var(--P)
}

.calc-num-input::-webkit-outer-spin-button,
.calc-num-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0
}

.calc-num-input[type=number] {
   -moz-appearance: textfield
}

.calc-result {
   background: var(--blue-deep);
   border-radius: 8px;
   padding: 32px;
   position: relative;
   overflow: hidden
}

.calc-result::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 80% 20%, rgba(224, 50, 33, .12), transparent 55%)
}

.calc-result-inner {
   position: relative;
   z-index: 2
}

.calc-result-title {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .4);
   margin-bottom: 20px
}

.calc-result-row {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   padding: 10px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.calc-result-row:last-of-type {
   border-bottom: none
}

.calc-result-label {
   font-size: 12px;
   color: rgba(255, 255, 255, .5)
}

.calc-result-val {
   font-family: 'Playfair Display', serif;
   font-size: 22px;
   font-weight: 700;
   color: white
}

.calc-result-val.highlight {
   color: #7ED3A8;
   font-size: 28px
}

.calc-chart {
   margin-top: 24px;
   position: relative;
   z-index: 2
}

.calc-disclaimer {
   margin-top: 40px;
   padding: 20px 24px;
   background: var(--off);
   border-left: 3px solid var(--line);
   border-radius: 0 4px 4px 0
}

.calc-disclaimer p {
   font-size: 11.5px;
   color: rgba(8, 9, 28, .4);
   line-height: 1.7;
   margin: 0
}

/* ============================================================
   VIKALPA SHAKTI
   ============================================================ */
.shakti-hero {
   padding: 56px 72px;
   border-left: 4px solid #C2185B;
   position: relative;
   overflow: hidden
}

.shakti-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(194, 24, 91, .04), transparent 60%)
}

.shakti-hero-logo {
   position: absolute;
   right: 64px;
   top: 50%;
   transform: translateY(-50%);
   width: 220px;
   height: auto;
   opacity: .92;
   z-index: 1
}

.shakti-tag {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: #C2185B;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px
}

.shakti-tag::before {
   content: '';
   width: 24px;
   height: 2px;
   background: #C2185B;
   display: inline-block
}

.shakti-h1 {
   font-family: 'Playfair Display', serif;
   font-size: 42px;
   font-weight: 700;
   line-height: 1.05;
   color: var(--ink);
   margin-bottom: 12px
}

.shakti-h1 em {
   font-style: italic;
   color: #C2185B
}

.shakti-sub {
   font-size: 14.5px;
   color: rgba(8, 9, 28, .55);
   line-height: 1.75;
   max-width: 560px;
   margin-bottom: 24px
}

.shakti-cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 28px;
   background: #C2185B;
   color: white;
   font-size: 13px;
   font-weight: 600;
   border-radius: 2px;
   text-decoration: none;
   transition: background .2s
}

.shakti-cta-btn:hover {
   background: #a0154e;
   color: white
}

.shakti-body {
   padding: 56px 72px;
   display: grid;
   grid-template-columns: 1.4fr 1fr;
   gap: 56px;
   align-items: start
}

.shakti-copy p {
   font-size: 14px;
   line-height: 1.85;
   color: rgba(8, 9, 28, .7);
   margin-bottom: 16px
}

.shakti-pillars {
   display: flex;
   flex-direction: column;
   gap: 16px
}

.shakti-pillar {
   border: 1px solid rgba(194, 24, 91, .15);
   border-radius: 8px;
   padding: 20px;
   border-top: 3px solid #C2185B
}

.shakti-pillar-icon {
   font-size: 24px;
   margin-bottom: 8px
}

.shakti-pillar-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 4px
}

.shakti-pillar-desc {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .5);
   line-height: 1.65
}

.shakti-ami {
   padding: 0 72px 64px
}

.shakti-ami-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
   gap: 28px;
   align-items: stretch
}

.shakti-ami-card {
   position: relative;
   border: 1px solid rgba(194, 24, 91, .15);
   border-radius: 14px;
   overflow: hidden;
   display: flex;
   width: 100%;
   height: 100%;
   background: white;
   box-shadow: 0 4px 18px rgba(194, 24, 91, .06);
   transition: transform .25s ease, box-shadow .25s ease
}

.shakti-ami-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 32px rgba(194, 24, 91, .14)
}

.shakti-ami-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, #C2185B, #6a3fb5);
   z-index: 2
}

.shakti-ami-img {
   width: 240px;
   flex-shrink: 0;
   background: var(--blue-deep);
   overflow: hidden;
   position: relative
}

.shakti-ami-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: grayscale(100%);
   transition: filter .4s ease
}

.shakti-ami-card:hover .shakti-ami-img img {
   filter: grayscale(35%)
}

.shakti-ami-img-ph {
   width: 100%;
   height: 100%;
   min-height: 240px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 48px;
   color: rgba(255, 255, 255, .3)
}

.shakti-ami-tag {
   position: absolute;
   bottom: 14px;
   left: 14px;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: rgba(8, 9, 28, .55);
   backdrop-filter: blur(4px);
   color: white;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   padding: 6px 10px;
   border-radius: 999px
}

.shakti-ami-tag span {
   color: #ff7fb0
}

.shakti-ami-body {
   padding: 36px 32px 32px;
   flex: 1;
   display: flex;
   flex-direction: column;
   position: relative
}

.shakti-ami-quote {
   position: absolute;
   top: 6px;
   right: 24px;
   font-family: 'Playfair Display', serif;
   font-size: 70px;
   font-weight: 700;
   color: rgba(194, 24, 91, .08);
   line-height: 1;
   pointer-events: none
}

.shakti-ami-card .vc-shakti-link {
   margin-top: auto;
   align-self: flex-start
}

.shakti-ami-name {
   font-size: 21px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 2px;
   position: relative
}

.shakti-ami-role {
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #C2185B;
   margin-bottom: 14px;
   padding-bottom: 14px;
   border-bottom: 1px solid rgba(194, 24, 91, .12)
}

.shakti-ami-bio {
   flex: 1;
   font-size: 13.5px;
   color: rgba(8, 9, 28, .6);
   line-height: 1.75;
   text-align: justify;
   max-width: 640px;
   position: relative
}

.shakti-ami-bio-wide {
   max-width: none
}

.shakti-impact {
   padding: 0 72px 64px
}

.shakti-impact-grid {
   display: grid;
   grid-template-columns: 1fr 1.6fr;
   gap: 40px;
   align-items: center;
   border: 1px solid rgba(194, 24, 91, .15);
   border-radius: 8px;
   padding: 32px
}

.shakti-impact-n {
   font-family: 'Playfair Display', serif;
   font-size: 56px;
   font-weight: 700;
   color: #C2185B;
   line-height: 1
}

.shakti-impact-l {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .55);
   line-height: 1.5;
   margin-top: 8px
}

.shakti-impact-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.shakti-impact-list li {
   font-size: 13px;
   color: rgba(8, 9, 28, .65);
   line-height: 1.6;
   padding-left: 18px;
   position: relative
}

.shakti-impact-list li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 8px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #C2185B
}

.shakti-initiatives {
   padding: 0 72px 64px
}

.shakti-initiatives-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px
}

.shakti-initiative {
   border: 1px solid rgba(194, 24, 91, .15);
   border-radius: 8px;
   padding: 20px;
   border-left: 3px solid #C2185B
}

.shakti-initiative-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 6px
}

.shakti-initiative-desc {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .55);
   line-height: 1.65
}

.shakti-activity-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 8px
}

.shakti-activity-list li {
   font-size: 12.5px;
   color: rgba(8, 9, 28, .55);
   line-height: 1.6;
   padding-left: 16px;
   position: relative
}

.shakti-activity-list li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 7px;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: #C2185B
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-body {
   padding: 48px 72px 64px;
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 56px;
   align-items: stretch
}

.contact-form-title {
   font-family: 'Playfair Display', serif;
   font-size: 28px;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 6px
}

.contact-form-sub {
   font-size: 13.5px;
   color: rgba(8, 9, 28, .5);
   margin-bottom: 28px;
   line-height: 1.6
}

.cf-field {
   margin-bottom: 18px
}

.cf-field label {
   display: block;
   font-size: 12px;
   font-weight: 600;
   color: rgba(8, 9, 28, .6);
   margin-bottom: 6px
}

.cf-field label span {
   color: var(--red)
}

.cf-input {
   width: 100%;
   padding: 11px 14px;
   border: 1px solid var(--line);
   border-radius: 4px;
   font-size: 13.5px;
   font-family: inherit;
   color: var(--ink);
   outline: none;
   transition: border-color .15s;
   background: white
}

.cf-input:focus {
   border-color: var(--blue)
}

.cf-input.error {
   border-color: var(--red)
}

.cf-error {
   font-size: 11.5px;
   color: var(--red);
   margin-top: 4px
}

.cf-select {
   width: 100%;
   padding: 11px 14px;
   border: 1px solid var(--line);
   border-radius: 4px;
   font-size: 13.5px;
   font-family: inherit;
   color: var(--ink);
   outline: none;
   background: white;
   cursor: pointer
}

.cf-select:focus {
   border-color: var(--blue)
}

.cf-textarea {
   width: 100%;
   padding: 11px 14px;
   border: 1px solid var(--line);
   border-radius: 4px;
   font-size: 13.5px;
   font-family: inherit;
   color: var(--ink);
   outline: none;
   resize: vertical;
   min-height: 110px;
   transition: border-color .15s
}

.cf-textarea:focus {
   border-color: var(--blue)
}

.cf-submit {
   width: 100%;
   padding: 14px;
   background: var(--blue);
   color: white;
   font-size: 14px;
   font-weight: 600;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-family: inherit;
   transition: background .2s
}

.cf-submit:hover {
   background: var(--blue-dark)
}

.contact-info {
   background: var(--blue-deep);
   border-radius: 8px;
   overflow: hidden;
   position: relative;
   display: flex
}

.contact-info::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 80% 20%, rgba(224, 50, 33, .12), transparent 55%)
}

.ci-inner {
   position: relative;
   z-index: 2;
   padding: 36px;
   display: flex;
   flex-direction: column;
   width: 100%;
   flex: 1
}

.ci-title {
   font-family: 'Playfair Display', serif;
   font-size: 22px;
   font-weight: 700;
   color: white;
   margin-bottom: 24px
}

.ci-block {
   display: flex;
   gap: 14px;
   margin-bottom: 20px;
   align-items: flex-start
}

.ci-icon {
   font-size: 18px;
   margin-top: 2px;
   flex-shrink: 0
}

.ci-label {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .4);
   margin-bottom: 3px
}

.ci-val {
   font-size: 14px;
   color: white
}

.ci-val a {
   color: white;
   text-decoration: none
}

.ci-val a:hover {
   color: rgba(255, 255, 255, .7)
}

.ci-divider {
   height: 1px;
   background: rgba(255, 255, 255, .08);
   margin: 24px 0
}

.ci-wa {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 18px;
   background: rgba(37, 211, 102, .12);
   border: 1px solid rgba(37, 211, 102, .25);
   border-radius: 6px;
   text-decoration: none;
   transition: background .15s
}

.ci-wa:hover {
   background: rgba(37, 211, 102, .2)
}

.ci-wa-icon {
   font-size: 24px
}

.ci-wa-text {
   font-size: 13px;
   font-weight: 600;
   color: #25D366
}

.ci-wa-sub {
   font-size: 11px;
   color: rgba(255, 255, 255, .4)
}

.ci-map {
   margin-top: 20px;
   border-radius: 6px;
   overflow: hidden;
   flex: 1;
   display: flex
}

.ci-map iframe {
   width: 100%;
   height: 100%;
   min-height: 400px;
   border: none;
   display: block
}

/* ============================================================
   MOBILE NAV — HAMBURGER & DRAWER
   ============================================================ */
.hamburger {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;
   width: 40px;
   height: 40px;
   background: none;
   border: 1px solid rgba(8, 9, 28, .15);
   cursor: pointer;
   padding: 0;
   border-radius: 2px;
   flex-shrink: 0
}

.hamburger span {
   display: block;
   width: 20px;
   height: 2px;
   background: var(--ink);
   transition: all .25s
}

.hamburger.open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0)
}

.hamburger.open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg)
}

.mob-nav {
   position: fixed;
   top: 0;
   right: -320px;
   width: 300px;
   height: 100vh;
   background: white;
   z-index: 9999;
   overflow-y: auto;
   padding: 24px 0;
   box-shadow: -8px 0 40px rgba(0, 0, 0, .12);
   transition: right .35s cubic-bezier(.16, 1, .3, 1);
   display: flex;
   flex-direction: column
}

.mob-nav.open {
   right: 0
}

.mob-nav-close {
   align-self: flex-end;
   margin: 0 20px 16px;
   width: 36px;
   height: 36px;
   border: 1px solid rgba(8, 9, 28, .12);
   background: none;
   font-size: 18px;
   cursor: pointer;
   color: rgba(8, 9, 28, .45);
   border-radius: 2px;
   display: flex;
   align-items: center;
   justify-content: center
}

.mob-nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
   flex: 1
}

.mob-nav ul li a {
   display: block;
   padding: 13px 24px;
   font-size: 14px;
   font-weight: 500;
   color: var(--ink);
   text-decoration: none;
   border-bottom: 1px solid rgba(8, 9, 28, .05);
   transition: color .15s
}

.mob-nav ul li a:hover {
   color: var(--blue)
}

.mob-nav ul ul {
   background: var(--off)
}

.mob-nav ul ul li a {
   padding: 10px 36px;
   font-size: 13px;
   font-weight: 400;
   color: rgba(8, 9, 28, .65)
}

.mob-nav-btn {
   display: block;
   margin: 20px 24px 0;
   padding: 14px;
   background: var(--blue);
   color: white;
   text-align: center;
   font-size: 13px;
   font-weight: 600;
   text-decoration: none;
   border-radius: 2px
}

.mob-nav-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .45);
   z-index: 9998;
   opacity: 0;
   pointer-events: none;
   transition: opacity .35s
}

.mob-nav-overlay.open {
   opacity: 1;
   pointer-events: all
}

/* ============================================================
   RESPONSIVE — PHASE 3 PAGES
   ============================================================ */

/* TABLET LANDSCAPE 1200px */
@media(max-width:1200px) {
   .pg-hero {
      padding: 44px 40px
   }

   .pg-hero h1 {
      font-size: 34px
   }

   .about-hero-l {
      padding: 48px 40px
   }

   .about-story {
      padding: 48px 40px 40px;
      gap: 40px
   }

   .pillars-s {
      padding: 0 40px 48px
   }

   .timeline-s {
      padding: 48px 40px
   }

   .about-trust {
      padding: 40px 40px
   }

   .principals-s {
      padding: 48px 40px
   }

   .legacy-s {
      padding: 48px 40px
   }

   .pg-cta {
      padding: 48px 40px
   }

   .svc-hero-l {
      padding: 44px 40px
   }

   .svc-intro {
      padding: 48px 40px 40px;
      gap: 40px
   }

   .svc-sections {
      padding: 0 40px 48px
   }

   .svc-perspective {
      padding: 48px 40px
   }

   .svc-related {
      padding: 44px 40px 56px
   }

   .reports-body {
      padding: 40px 40px 56px
   }

   .chronicles-hub {
      padding: 40px 40px 56px
   }

   .chronicles-listing {
      padding: 40px 40px 56px
   }

   .blog-detail-wrap {
      grid-template-columns: 1fr;
      padding: 40px 40px 56px;
      gap: 32px
   }

   .blog-sidebar {
      position: static
   }

   .blog-related {
      padding: 32px 40px 56px
   }

   .calc-page {
      padding: 40px 40px 56px
   }

   .shakti-hero {
      padding: 48px 40px
   }

   .shakti-hero-logo {
      width: 150px;
      right: 32px
   }

   .shakti-body {
      padding: 48px 40px;
      gap: 40px
   }

   .shakti-ami {
      padding: 0 40px 56px
   }

   .shakti-impact {
      padding: 0 40px 56px
   }

   .shakti-initiatives {
      padding: 0 40px 56px
   }

   .contact-body {
      padding: 40px 40px 56px;
      gap: 40px
   }
}

/* TABLET PORTRAIT 768px */
@media(max-width:768px) {
   .hamburger {
      display: flex
   }

   .nbtn {
      display: none
   }

   .pg-hero {
      padding: 36px 20px
   }

   .pg-hero h1 {
      font-size: 28px
   }

   .pg-hero-sub {
      font-size: 13px
   }

   .pg-hero-wm {
      display: none
   }

   .pg-bc {
      font-size: 11.5px
   }

   .about-hero {
      flex-direction: column
   }

   .about-hero-l {
      padding: 40px 20px
   }

   .about-hero-r {
      width: 100%;
      flex-direction: row;
      justify-content: space-around;
      padding: 28px 20px
   }

   .ah-wm {
      display: none
   }

   .ah-h {
      font-size: 30px
   }

   .about-story {
      grid-template-columns: 1fr;
      padding: 40px 20px 32px;
      gap: 32px
   }

   .pillars-s {
      padding: 0 20px 40px
   }

   .pillars-g {
      grid-template-columns: 1fr 1fr;
      gap: 12px
   }

   .timeline-s {
      padding: 40px 20px
   }

   .tl-line {
      display: none
   }

   .tl-item {
      grid-template-columns: 60px 24px 1fr;
      padding: 20px 0
   }

   .tl-year {
      font-size: 16px;
      padding-right: 12px
   }

   .about-trust {
      flex-wrap: wrap;
      justify-content: center;
      gap: 28px;
      padding: 36px 20px
   }

   .at-div {
      display: none
   }

   .principals-s {
      padding: 40px 20px
   }

   .principals-g {
      grid-template-columns: 1fr 1fr;
      gap: 16px
   }

   .legacy-s {
      padding: 40px 20px
   }

   .legacy-g {
      grid-template-columns: 1fr 1fr;
      gap: 16px
   }

   .pg-cta {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      padding: 40px 20px
   }

   .svc-hero {
      flex-direction: column
   }

   .svc-hero-l {
      padding: 40px 20px
   }

   .svc-hero-r {
      width: 100%;
      flex-direction: row;
      justify-content: space-around;
      padding: 24px 20px
   }

   .svc-hero-wm {
      display: none
   }

   .svc-h1 {
      font-size: 28px
   }

   .svc-intro {
      grid-template-columns: 1fr;
      padding: 40px 20px 32px;
      gap: 28px
   }

   .svc-sections {
      padding: 0 20px 40px
   }

   .svc-sections-grid {
      grid-template-columns: 1fr
   }

   .svc-perspective {
      padding: 40px 20px
   }

   .svc-perspective-wm {
      display: none
   }

   .svc-related {
      padding: 40px 20px 48px
   }

   .svc-related-g {
      grid-template-columns: 1fr 1fr;
      gap: 14px
   }

   .reports-body {
      padding: 32px 20px 48px
   }

   .reports-g {
      grid-template-columns: 1fr 1fr;
      gap: 16px
   }

   .filter-bar {
      gap: 8px
   }

   .filter-search {
      margin-left: 0;
      width: 100%
   }

   .filter-search input {
      flex: 1;
      width: auto
   }

   .chronicles-hub {
      padding: 32px 20px 48px
   }

   .bcard-g {
      grid-template-columns: 1fr 1fr;
      gap: 14px
   }

   .acard-g {
      grid-template-columns: 1fr
   }

   .vcard-g {
      grid-template-columns: 1fr 1fr;
      gap: 14px
   }

   .chronicles-listing {
      padding: 32px 20px 48px
   }

   .blog-detail-wrap {
      padding: 32px 20px 48px;
      gap: 24px
   }

   .blog-detail h1 {
      font-size: 26px
   }

   .blog-detail-hero img {
      height: 220px
   }

   .blog-detail-content {
      font-size: 14px
   }

   .blog-related {
      padding: 28px 20px 48px
   }

   .calc-page {
      padding: 32px 20px 48px
   }

   .calc-panel.active {
      grid-template-columns: 1fr;
      gap: 28px
   }

   .calc-tabs-nav {
      flex-wrap: wrap
   }

   .calc-tab-btn {
      padding: 10px 18px;
      font-size: 12.5px
   }

   .shakti-hero {
      padding: 40px 20px;
      border-left-width: 3px
   }

   .shakti-hero-logo {
      display: none
   }

   .shakti-h1 {
      font-size: 30px
   }

   .shakti-body {
      grid-template-columns: 1fr;
      padding: 40px 20px;
      gap: 32px
   }

   .shakti-ami {
      padding: 0 20px 48px
   }

   .shakti-ami-grid {
      grid-template-columns: 1fr
   }

   .shakti-ami-card {
      flex-direction: column;
      max-width: 100%
   }

   .shakti-impact {
      padding: 0 20px 48px
   }

   .shakti-impact-grid {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 24px
   }

   .shakti-initiatives {
      padding: 0 20px 48px
   }

   .shakti-initiatives-grid {
      grid-template-columns: 1fr
   }

   .shakti-ami-img {
      width: 100%;
      height: 200px
   }

   .contact-body {
      grid-template-columns: 1fr;
      padding: 32px 20px 48px;
      gap: 32px
   }

   .contact-info {
      position: static
   }
}

/* MOBILE 480px */
@media(max-width:480px) {
   .pg-hero {
      padding: 28px 16px
   }

   .pg-hero h1 {
      font-size: 22px
   }

   .ah-h {
      font-size: 26px
   }

   .about-hero-r {
      flex-direction: column;
      padding: 20px 16px;
      gap: 16px
   }

   .about-hero-l {
      padding: 32px 16px
   }

   .about-story {
      padding: 32px 16px 28px
   }

   .pillars-g {
      grid-template-columns: 1fr
   }

   .timeline-s {
      padding: 32px 16px
   }

   .tl-item {
      grid-template-columns: 52px 20px 1fr;
      padding: 16px 0
   }

   .tl-year {
      font-size: 14px
   }

   .about-trust {
      padding: 28px 16px;
      gap: 20px
   }

   .at-n {
      font-size: 36px
   }

   .principals-g {
      grid-template-columns: 1fr
   }

   .principals-s {
      padding: 32px 16px
   }

   .legacy-g {
      grid-template-columns: 1fr
   }

   .legacy-s {
      padding: 32px 16px
   }

   .pg-cta {
      padding: 32px 16px
   }

   .svc-hero-l {
      padding: 32px 16px
   }

   .svc-h1 {
      font-size: 22px
   }

   .svc-intro {
      padding: 32px 16px 24px
   }

   .svc-sections {
      padding: 0 16px 32px
   }

   .svc-perspective {
      padding: 32px 16px
   }

   .svc-related {
      padding: 32px 16px 40px
   }

   .svc-related-g {
      grid-template-columns: 1fr
   }

   .reports-body {
      padding: 24px 16px 40px
   }

   .reports-g {
      grid-template-columns: 1fr
   }

   .filter-bar {
      flex-direction: column;
      align-items: stretch
   }

   .chronicles-hub {
      padding: 24px 16px 40px
   }

   .bcard-g {
      grid-template-columns: 1fr
   }

   .vcard-g {
      grid-template-columns: 1fr
   }

   .chronicles-listing {
      padding: 24px 16px 40px
   }

   .blog-detail-wrap {
      padding: 24px 16px 40px;
      gap: 20px
   }

   .blog-detail h1 {
      font-size: 22px
   }

   .blog-related {
      padding: 20px 16px 40px
   }

   .calc-page {
      padding: 24px 16px 40px
   }

   .shakti-hero {
      padding: 32px 16px
   }

   .shakti-h1 {
      font-size: 24px
   }

   .shakti-body {
      padding: 32px 16px
   }

   .shakti-ami {
      padding: 0 16px 40px
   }

   .contact-body {
      padding: 24px 16px 40px
   }
}

/* ============================================================
   HORIZONTAL GOAL TIMELINE (About page)
   ============================================================ */
.gtl-s {
   background: var(--blue-deep);
   padding: 72px 0 0;
   position: relative;
   overflow: hidden
}

.gtl-s::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 80% 40%, rgba(224, 50, 33, .1), transparent 55%), radial-gradient(ellipse at 15% 80%, rgba(80, 60, 180, .2), transparent 55%)
}

.gtl-head {
   padding: 0 72px 56px;
   position: relative;
   z-index: 2
}

.gtl-label {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .4);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px
}

.gtl-label::before {
   content: '';
   width: 24px;
   height: 2px;
   background: var(--red);
   display: inline-block
}

.gtl-h2 {
   font-family: 'Playfair Display', serif;
   font-size: 34px;
   font-weight: 700;
   color: white;
   line-height: 1.1
}

.gtl-h2 em {
   font-style: italic;
   color: rgba(255, 255, 255, .5)
}

/* track */
.gtl-track {
   display: flex;
   align-items: stretch;
   padding: 0 72px;
   position: relative;
   z-index: 2
}

.gtl-track::after {
   content: '';
   position: absolute;
   left: 72px;
   right: 72px;
   top: calc(130px + 9px);
   height: 4px;
   background: rgba(255, 255, 255, .1);
   border-radius: 2px;
   z-index: 0
}

/* node columns */
.gtl-nc {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   z-index: 2;
   min-width: 0
}

.gtl-top {
   height: 130px;
   width: 100%;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding-bottom: 14px
}

.gtl-bot {
   height: 130px;
   width: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding-top: 14px
}

.gtl-pin {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: rgba(61, 41, 161, .8);
   border: 3px solid rgba(255, 255, 255, .5);
   flex-shrink: 0;
   box-shadow: 0 0 0 4px rgba(255, 255, 255, .06)
}

.gtl-pin.hi {
   background: var(--red);
   border-color: var(--red);
   box-shadow: 0 0 0 5px rgba(224, 50, 33, .25)
}

.gtl-pin.gold {
   background: #D4AF37;
   border-color: #D4AF37;
   box-shadow: 0 0 0 5px rgba(212, 175, 55, .2)
}

/* circles */
.gtl-circle {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 1.5px dashed rgba(255, 255, 255, .28);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2px;
   background: rgba(61, 41, 161, .25);
   backdrop-filter: blur(4px);
   position: relative;
   transition: transform .3s
}

.gtl-circle:hover {
   transform: scale(1.06)
}

.gtl-circle.active {
   border-color: var(--red);
   background: rgba(224, 50, 33, .15);
   box-shadow: 0 0 0 8px rgba(224, 50, 33, .08)
}

.gtl-circle.gold {
   border-color: #D4AF37;
   background: rgba(212, 175, 55, .1);
   box-shadow: 0 0 0 8px rgba(212, 175, 55, .07)
}

.gtl-yr {
   font-family: 'Playfair Display', serif;
   font-size: 22px;
   font-weight: 700;
   color: white;
   line-height: 1
}

.gtl-yr.small {
   font-size: 15px;
   color: rgba(255, 255, 255, .55);
   margin-top: 2px
}

.gtl-icon {
   font-size: 32px;
   line-height: 1
}

/* arc columns */
.gtl-ac {
   width: 100px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   position: relative;
   z-index: 1
}

.gtl-ac .gtl-top {
   align-items: flex-end;
   padding-bottom: 0
}

.gtl-ac .gtl-bot {
   align-items: flex-start;
   padding-top: 0
}

.gtl-arc {
   width: 100%;
}

/* arc DOWN: from center, curves downward into the bottom half */
.gtl-arc-down {
   height: 90px;
   border: 1.5px dashed rgba(255, 255, 255, .3);
   border-top: none;
   border-radius: 0 0 50% 50%;
   margin-top: 0;
   position: relative
}

.gtl-arc-down::after {
   content: '▼';
   position: absolute;
   bottom: -4px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 9px;
   color: rgba(255, 255, 255, .45);
   line-height: 1
}

/* arc UP: from center, curves upward into the top half */
.gtl-arc-up {
   height: 90px;
   border: 1.5px dashed rgba(255, 255, 255, .3);
   border-bottom: none;
   border-radius: 50% 50% 0 0;
   margin-bottom: 0;
   position: relative
}

.gtl-arc-up::after {
   content: '▲';
   position: absolute;
   top: -4px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 9px;
   color: rgba(255, 255, 255, .45);
   line-height: 1
}

/* descriptions row */
.gtl-descs {
   display: flex;
   padding: 0 72px;
   position: relative;
   z-index: 2
}

.gtl-desc {
   flex: 1;
   padding: 28px 12px 40px;
   border-top: 2px solid transparent;
   min-width: 0;
   text-align: center
}

.gtl-desc.hi {
   border-top-color: var(--red)
}

.gtl-desc.gold {
   border-top-color: #D4AF37
}

.gtl-desc.dim {
   border-top-color: rgba(255, 255, 255, .12)
}

.gtl-desc-ac {
   width: 100px;
   flex-shrink: 0
}

.gtl-desc-title {
   font-size: 13px;
   font-weight: 600;
   color: white;
   margin-bottom: 6px;
   line-height: 1.4
}

.gtl-desc-body {
   font-size: 11.5px;
   color: rgba(255, 255, 255, .42);
   line-height: 1.65
}

/* ============================================================
   THE VIKALPA CIRCLE PAGE
   ============================================================ */

/* Hero */
.vc-hero {
   background: var(--blue-deep);
   padding: 80px 72px 72px;
   position: relative;
   overflow: hidden
}

.vc-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 70% 30%, rgba(224, 50, 33, .12), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(80, 60, 180, .25), transparent 55%)
}

.vc-hero-inner {
   position: relative;
   z-index: 2;
   max-width: 680px
}

.vc-hero-tag {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: .28em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .4);
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 10px
}

.vc-hero-tag::before {
   content: '';
   width: 32px;
   height: 2px;
   background: var(--red)
}

.vc-hero-h1 {
   font-family: 'Playfair Display', serif;
   font-size: 54px;
   font-weight: 700;
   color: white;
   line-height: 1.02;
   letter-spacing: -1.5px;
   margin-bottom: 20px
}

.vc-hero-h1 em {
   font-style: italic;
   color: rgba(255, 255, 255, .5)
}

.vc-hero-sub {
   font-size: 15px;
   color: rgba(255, 255, 255, .5);
   line-height: 1.8;
   max-width: 520px
}

.vc-hero-wm {
   position: absolute;
   font-family: 'Playfair Display', serif;
   font-size: 260px;
   font-weight: 700;
   color: transparent;
   -webkit-text-stroke: 1px rgba(255, 255, 255, .03);
   right: -20px;
   bottom: -60px;
   line-height: 1;
   pointer-events: none;
   z-index: 1
}

/* Individual principal section */
.vc-principal {
   padding: 0
}

.vc-principal:last-of-type {
   margin-bottom: 0
}

.vc-pp {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 560px
}

.vc-pp.flip {
   direction: rtl
}

.vc-pp.flip>* {
   direction: ltr
}

/* Photo column */
.vc-photo {
   position: relative;
   background: var(--blue-deep);
   overflow: hidden
}

.vc-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
   filter: grayscale(100%);
   display: block;
   transition: filter .6s
}

.vc-photo:hover img {
   filter: grayscale(60%)
}

.vc-photo-ph {
   width: 100%;
   height: 100%;
   min-height: 560px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 120px;
   color: rgba(255, 255, 255, .08);
   background: linear-gradient(135deg, var(--blue-deep), var(--blue-dark))
}

.vc-photo-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(26, 15, 92, .4), transparent 60%)
}

.vc-photo-badges {
   position: absolute;
   bottom: 32px;
   left: 32px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px
}

.vc-photo-badge {
   background: var(--red);
   color: white;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .2em;
   text-transform: uppercase;
   padding: 8px 16px
}

.vc-photo-badges .vc-photo-badge {
   position: static
}

.vc-photo-badge.gold {
   background: #D4AF37;
   color: var(--ink)
}

.vc-photo-yr {
   position: absolute;
   top: 32px;
   right: 28px;
   font-family: 'Playfair Display', serif;
   font-size: 72px;
   font-weight: 700;
   color: transparent;
   -webkit-text-stroke: 1px rgba(255, 255, 255, .1);
   line-height: 1;
   pointer-events: none
}

/* Content column */
.vc-content {
   padding: 64px 56px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: white
}

.vc-content.dark {
   background: var(--blue-deep)
}

.vc-content.off {
   background: var(--off)
}

.vc-since {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 9.5px;
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 16px
}

.vc-since::before {
   content: '';
   width: 20px;
   height: 2px;
   background: var(--red)
}

.vc-content.dark .vc-since {
   color: rgba(255, 255, 255, .45)
}

.vc-content.dark .vc-since::before {
   background: var(--red)
}

.vc-name {
   font-family: 'Playfair Display', serif;
   font-size: 40px;
   font-weight: 700;
   color: var(--ink);
   line-height: 1.05;
   letter-spacing: -1px;
   margin-bottom: 4px
}

.vc-content.dark .vc-name {
   color: white
}

.vc-role {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--red);
   margin-bottom: 24px;
   padding-bottom: 20px;
   border-bottom: 1px solid rgba(8, 9, 28, .08)
}

.vc-content.dark .vc-role {
   color: rgba(255, 255, 255, .45);
   border-bottom-color: rgba(255, 255, 255, .08)
}

.vc-quote {
   font-family: 'Playfair Display', serif;
   font-size: 16px;
   font-style: italic;
   color: var(--ink);
   line-height: 1.75;
   margin-bottom: 20px;
   padding-left: 20px;
   border-left: 3px solid var(--red)
}

.vc-content.dark .vc-quote {
   color: rgba(255, 255, 255, .75)
}

.vc-bio p {
   font-size: 13.5px;
   line-height: 1.85;
   color: rgba(8, 9, 28, .65);
   margin-bottom: 14px
}

.vc-bio p:last-child {
   margin-bottom: 0
}

.vc-content.dark .vc-bio p {
   color: rgba(255, 255, 255, .55)
}

.vc-creds {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 24px
}

.vc-cred {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--blue);
   border: 1px solid rgba(61, 41, 161, .2);
   padding: 5px 12px;
   background: rgba(61, 41, 161, .04)
}

.vc-content.dark .vc-cred {
   color: rgba(255, 255, 255, .55);
   border-color: rgba(255, 255, 255, .12);
   background: rgba(255, 255, 255, .04)
}

.vc-shakti-link {
   margin-top: 24px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 24px;
   border: 1px solid #C2185B;
   color: #C2185B;
   font-size: 12.5px;
   font-weight: 600;
   text-decoration: none;
   transition: all .2s
}

.vc-shakti-link:hover {
   background: #C2185B;
   color: white
}

/* divider between principals */
.vc-sep {
   height: 1px;
   background: var(--line);
   margin: 0 72px
}

/* ── RESPONSIVE ── */
@media(max-width:1200px) {
   .gtl-head {
      padding: 0 40px 48px
   }

   .gtl-track {
      padding: 0 40px
   }

   .gtl-track::after {
      left: 40px;
      right: 40px
   }

   .gtl-descs {
      padding: 0 40px
   }

   .gtl-circle {
      width: 84px;
      height: 84px
   }

   .gtl-yr {
      font-size: 19px
   }

   .gtl-icon {
      font-size: 26px
   }

   .gtl-ac {
      width: 72px
   }

   .vc-hero {
      padding: 64px 40px 56px
   }

   .vc-content {
      padding: 48px 40px
   }

   .vc-name {
      font-size: 34px
   }
}

@media(max-width:900px) {
   .gtl-circle {
      width: 72px;
      height: 72px
   }

   .gtl-yr {
      font-size: 15px
   }

   .gtl-yr.small {
      font-size: 12px
   }

   .gtl-icon {
      font-size: 22px
   }

   .gtl-ac {
      width: 48px
   }

   .gtl-arc-down,
   .gtl-arc-up {
      height: 60px
   }

   .vc-pp {
      grid-template-columns: 1fr
   }

   .vc-pp.flip {
      direction: ltr
   }

   .vc-photo {
      min-height: 380px
   }

   .vc-content {
      padding: 40px 32px
   }

   .vc-name {
      font-size: 30px
   }

   .vc-sep {
      margin: 0 32px
   }
}

@media(max-width:768px) {
   .gtl-head {
      padding: 0 20px 36px
   }

   .gtl-track {
      padding: 0 12px;
      overflow-x: auto;
      padding-bottom: 8px
   }

   .gtl-track::after {
      left: 12px;
      right: 12px
   }

   .gtl-descs {
      display: none
   }

   .gtl-nc {
      min-width: 80px
   }

   .gtl-circle {
      width: 64px;
      height: 64px
   }

   .gtl-yr {
      font-size: 13px
   }

   .gtl-top,
   .gtl-bot {
      height: 100px
   }

   .gtl-arc-down,
   .gtl-arc-up {
      height: 50px
   }

   .vc-hero {
      padding: 48px 20px 40px
   }

   .vc-hero-h1 {
      font-size: 36px
   }

   .vc-content {
      padding: 36px 20px
   }

   .vc-name {
      font-size: 28px
   }

   .vc-sep {
      margin: 0 20px
   }
}

@media(max-width:480px) {
   .gtl-circle {
      width: 54px;
      height: 54px
   }

   .gtl-icon {
      font-size: 18px
   }

   .vc-hero-h1 {
      font-size: 28px
   }
}