/* =====================================================================
   TRISTAR — PREMIUM REDESIGN LAYER
   Loaded after style.css / interactive.css / chatbot.css on every page.
   Re-skins colour, type, motion and shape across the whole site without
   touching the existing markup or breaking the JS that already targets
   these classes (menu, hero slider, counters, carousels, chatbot).
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------
   1. TOKENS — redefining the variables style.css already relies on
      instantly re-skins buttons, highlighted em text, cards, lines.
--------------------------------------------------------------------- */
:root{
    --navy:      #0B2E40;   /* derived from logo blue, dark sections */
    --navy-2:    #071E2B;   /* deepest navy */
    --blue:      #0E6793;   /* Tristar logo blue — primary accent */
    --blue-deep: #0A4F70;   /* accent hover / pressed */
    --gold:      #0E6793;
    --brand-deep:#0B2E40;
    --pale:      #EAF1F5;   /* light blue-grey tint */
    --ink:       #1B2530;
    --muted:     #6E6E6C;   /* Tristar logo grey */
    --paper:     #F7F9FA;   /* cool paper background */
    --line:      #DCE3E7;
    --white:     #fff;
    --shadow:      0 25px 60px rgba(11,46,64,.14);
    --shadow-gold: 0 18px 40px rgba(14,103,147,.28);
    --shadow-navy: 0 25px 55px rgba(7,30,43,.35);
    --radius: 20px;
    --ease: cubic-bezier(.16,.8,.24,1);
}

/* ---------------------------------------------------------------------
   2. BASE / TYPE
--------------------------------------------------------------------- */
body{
    font-family:"Manrope",Arial,sans-serif;
    background:var(--paper);
    color:var(--ink);
}
h1,h2,h3{
    font-family:"Fraunces","Playfair Display",serif;
    letter-spacing:-.01em;
    font-weight:600;
}
h1 em,h2 em{
    font-family:"Fraunces",serif;
    font-weight:500;
    font-style:italic;
    color:var(--blue) !important;
}
p{ color:var(--muted); }
::selection{ background:var(--blue); color:#fff; }

/* lowercase, gold-dot kickers instead of screaming tracked caps */
.eyebrow,.services-eyebrow,.partners-eyebrow,.legacy-eyebrow,.mv-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    text-transform:lowercase;
    font-size:12.5px !important;
    font-weight:700;
    letter-spacing:.02em !important;
    color:var(--blue-deep) !important;
}
.eyebrow::before,.services-eyebrow::before,.partners-eyebrow::before,
.legacy-eyebrow::before,.mv-eyebrow::before{
    content:"";
    width:7px;height:7px;border-radius:50%;
    background:var(--blue);
    flex:none;
}
.eyebrow.light{ color:#9FD6E8 !important; }
.eyebrow.light::before{ background:#9FD6E8; }

/* scrollbar + selection polish */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:#D9CBA9; border-radius:10px; }

/* ---------------------------------------------------------------------
   3. SCROLL PROGRESS BAR + BACK TO TOP  (elements injected by premium.js)
--------------------------------------------------------------------- */
#tg-progress{
    position:fixed; top:0; left:0; height:3px; width:0%;
    background:linear-gradient(90deg,var(--blue),#E4C688);
    z-index:1200; transition:width .1s linear;
}
#tg-top{
    position:fixed; right:26px; bottom:96px; z-index:400;
    width:46px;height:46px;border-radius:50%;
    background:var(--navy); color:#fff; border:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:16px;
    box-shadow:var(--shadow-navy);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .3s var(--ease),transform .3s var(--ease);
}
#tg-top.show{ opacity:1; visibility:visible; transform:none; }
#tg-top:hover{ background:var(--blue); }
@media (max-width:720px){ #tg-top{ bottom:150px; right:16px; width:42px;height:42px; } }

/* ---------------------------------------------------------------------
   4. NAV — glass, shrinks + gains blur once you scroll
--------------------------------------------------------------------- */
.nav{
    background:rgba(251,249,244,.72) !important;
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid rgba(11,46,64,.06) !important;
    box-shadow:none;
    transition:height .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.nav.nav-scrolled{
    height:72px !important;
    background:rgba(251,249,244,.94) !important;
    box-shadow:0 10px 30px rgba(11,46,64,.08);
}
.nav nav a{ font-weight:600; color:var(--ink); }
.nav nav a:hover,.nav nav a.active{ color:var(--blue) !important; }
.nav-cta{
    background:var(--navy) !important;
    color:#fff !important;
    border-radius:100px !important;
    box-shadow:var(--shadow-navy);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.nav-cta:hover{ background:var(--blue) !important; transform:translateY(-2px); box-shadow:var(--shadow-gold); }

/* ---------------------------------------------------------------------
   5. BUTTONS — magnetic glow
--------------------------------------------------------------------- */
.button{
    position:relative;
    border-radius:100px !important;
    font-weight:700;
    background:var(--navy);
    color:#fff;
    box-shadow:var(--shadow-navy);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
    white-space:normal;
    max-width:100%;
}
.button:hover{ transform:translateY(-3px); box-shadow:0 20px 45px rgba(11,46,64,.3); }
.button.white{ background:#fff; color:var(--navy); box-shadow:0 18px 40px rgba(11,46,64,.18); }
.button.white:hover{ background:var(--blue); color:#fff; box-shadow:var(--shadow-gold); }
.button.blue{ background:var(--blue); color:#fff; box-shadow:var(--shadow-gold); }
.button.blue:hover{ background:var(--blue-deep); }
.text-link{ font-weight:700; color:var(--blue) !important; }
.text-link b{ color:var(--blue); }

/* ---------------------------------------------------------------------
   6. HERO (home) — deeper scrim, editorial type, wave at the seam
--------------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; }
.hero-slide{
    filter:saturate(1.05) contrast(1.02);
    transform:scale(1.06);
    transition:opacity 1.2s ease, transform 8s linear;
}
.hero-slide.active{ transform:scale(1.14); }
.hero::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(11,46,64,.55) 0%,rgba(11,46,64,.35) 35%,rgba(11,46,64,.82) 100%);
    z-index:1;
}
.hero-content{ position:relative; z-index:2; }
.hero-content .eyebrow.light{
    background:rgba(255,255,255,.12);
    padding:7px 16px; border-radius:100px;
    border:1px solid rgba(255,255,255,.25);
}
.hero h1{ color:#fff; font-size:clamp(46px,7vw,96px); text-shadow:0 20px 50px rgba(0,0,0,.35); }
.hero .lede{ color:rgba(255,255,255,.82); font-size:17px; max-width:560px; }
.hero-controls button{
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
    backdrop-filter:blur(6px); color:#fff; transition:.3s;
}
.hero-controls button:hover{ background:var(--blue); border-color:var(--blue); }

.hero-float-card{
    position:absolute; right:6%; bottom:150px; z-index:4;
    display:flex; gap:26px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-radius:18px; padding:20px 26px;
    box-shadow:0 25px 55px rgba(0,0,0,.25);
}
.hero-float-card div{ text-align:left; }
.hero-float-card b{
    display:block; font-family:"Fraunces",serif; font-size:26px; color:#fff; font-weight:600;
}
.hero-float-card span{ font-size:11px; color:rgba(255,255,255,.65); font-weight:600; letter-spacing:.03em; }
@media (max-width:1000px){ .hero-float-card{ display:none; } }

.hero-scroll-cue{
    position:absolute; left:6%; bottom:40px; z-index:4;
    display:flex; align-items:center; gap:10px;
    color:rgba(255,255,255,.7); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:lowercase;
}
.hero-scroll-cue span{
    width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;
}
.hero-scroll-cue span::before{
    content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
    background:var(--blue); animation:tgScrollCue 2.2s ease-in-out infinite;
}
@keyframes tgScrollCue{ 0%{top:-100%} 60%{top:100%} 100%{top:100%} }
@media (max-width:720px){ .hero-scroll-cue{ display:none; } }

/* section-to-section transitions kept simple: no overlay dividers
   (they previously risked sitting on top of copy) — depth now comes
   from shadows and colour blocks only. */
.hero,.about-band,.legacy-section,.market,.final-cta{ position:relative; }
/* keep every section's real content above any decorative layer */
.hero-content,.about-copy,.about-photo,.market>*,.final-cta>*{ position:relative; z-index:2; }

/* ---------------------------------------------------------------------
   7. INNER-PAGE HERO (the plain .section.reveal that opens every page)
--------------------------------------------------------------------- */
main > .section.reveal:first-child,
main > .section:first-child{
    position:relative;
    padding-top:64px; padding-bottom:56px;
    overflow:hidden;
}
main > .section:first-child::before{
    content:"";
    position:absolute; top:-120px; right:-120px;
    width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle,rgba(14,103,147,.16),transparent 70%);
    z-index:0;
}
main > .section:first-child h1{ position:relative; z-index:1; }
main > .section:first-child .lede{ position:relative; z-index:1; }

/* ---------------------------------------------------------------------
   8. BRAND STRIP MARQUEE
--------------------------------------------------------------------- */
.brand-strip{ background:var(--navy) !important; }
.brand-track span{ color:rgba(255,255,255,.75) !important; font-weight:600; }
.brand-track span b{ color:var(--blue) !important; }

/* ---------------------------------------------------------------------
   9. CARDS — services / mv / director / testimonial / insight / category
--------------------------------------------------------------------- */
.service-item,.mv-card,.about-stat-card,.legacy-stat,.testimonial-card,
.director-card,.service-card,.featured-card{
    transition:transform .45s var(--ease), box-shadow .45s var(--ease) !important;
}
.service-item:hover,.mv-card:hover,.about-stat-card:hover,.service-card:hover{
    transform:translateY(-8px) !important;
    box-shadow:var(--shadow-gold) !important;
}
.services-grid{
    border:none !important;
    gap:20px;
    padding:6px;
}
@media (min-width:901px){ .services-grid{ grid-template-columns:repeat(2,1fr) !important; } }
.service-item{
    background:#fff; border:1px solid var(--line) !important; border-radius:var(--radius) !important;
}
.service-item:last-child,.service-item{ border-right:1px solid var(--line) !important; }
.service-item:nth-child(1){
    background:linear-gradient(165deg,var(--navy),var(--navy-2)) !important;
}
.service-item:nth-child(1) h3,.service-item:nth-child(1) p{ color:#fff; }
.service-item:nth-child(1) .service-label{ color:#9FD6E8 !important; }
.service-item:nth-child(1) .service-link{ color:#fff !important; }
.service-label{ color:var(--blue) !important; }
.service-link{ color:var(--navy) !important; font-weight:700; }
.service-link:hover{ color:var(--blue) !important; }

.mv-card,.about-stat-card{
    border-radius:var(--radius) !important;
    border:1px solid var(--line);
    background:#fff;
}
.mv-icon,.about-stat-icon,.badge-icon{
    background:linear-gradient(160deg,var(--blue),var(--blue-deep)) !important;
    color:#fff !important;
    box-shadow:var(--shadow-gold);
}
.mv-divider{ background:var(--blue) !important; }

.category{ border-radius:var(--radius) !important; overflow:hidden; }
.category::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(11,46,64,0) 40%,rgba(11,46,64,.85));
}
.category h3,.category p{ position:relative; z-index:2; color:#fff; }

.director-card .director-inner,.testimonial-card{
    border-radius:var(--radius) !important;
    box-shadow:var(--shadow) !important;
    border:1px solid var(--line);
}
.director-badge{ background:var(--navy) !important; color:#fff !important; }
.quote-mark{ color:var(--blue) !important; opacity:.6; }
.director-scrim{ background:linear-gradient(180deg,rgba(11,46,64,0),rgba(11,46,64,.92)) !important; }

.insight-grid article,.featured-card,.about-photo{ border-radius:var(--radius) !important; overflow:hidden; }

/* leadership avatar fallback initials */
.director-avatar{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    background:linear-gradient(160deg,var(--navy),var(--navy-2));
}
.director-avatar span{ color:var(--blue); font-family:"Fraunces",serif; font-size:44px; }

/* ---------------------------------------------------------------------
   10. STATS / LEGACY IN NUMBERS
--------------------------------------------------------------------- */
.legacy-section{ position:relative; background:var(--pale) !important; }
.legacy-image{ border-radius:var(--radius) !important; box-shadow:var(--shadow); }
.legacy-image-badge{ background:#fff !important; box-shadow:var(--shadow-gold); border-radius:14px; }
.stat-icon{ box-shadow:var(--shadow-gold); }
.stat-icon.blue{ background:var(--navy) !important; }
.stat-icon.orange,.stat-icon.red,.stat-icon.purple,.stat-icon.teal,.stat-icon.green{
    background:linear-gradient(160deg,var(--blue),var(--blue-deep)) !important;
}
.stat-progress span{ background:linear-gradient(90deg,var(--navy),var(--blue)) !important; }
.legacy-stat{ background:#fff; border-radius:16px; border:1px solid var(--line); }
.counter{ font-family:"Fraunces",serif; }

/* ---------------------------------------------------------------------
   11. PARTNERS MARQUEE
--------------------------------------------------------------------- */
.partners-intro{ background:#fff; }
.partner-logo-track img{
    filter:grayscale(1) opacity(.55);
    transition:filter .4s ease, transform .4s ease, box-shadow .4s ease;
    border-radius:14px !important;
}
.partner-logo-track img:hover{
    filter:grayscale(0) opacity(1);
    transform:translateY(-4px);
    box-shadow:var(--shadow-gold);
}

/* ---------------------------------------------------------------------
   12. PILLARS / DEFINE GRID / PROCESS
--------------------------------------------------------------------- */
.pillars article,.define-grid article{
    border-left:3px solid var(--blue);
    padding-left:22px;
    transition:transform .35s var(--ease);
}
.pillars article:hover,.define-grid article:hover{ transform:translateX(4px); }
.pillars article span,.define-grid article span{
    font-family:"Fraunces",serif; color:var(--blue) !important; font-size:26px;
}
.process ol li b{
    background:var(--navy); color:#fff; border-radius:50%;
}

/* ---------------------------------------------------------------------
   13. MARKET BAND (dark)
--------------------------------------------------------------------- */
.market{ background:var(--navy) !important; position:relative; }
.market h2,.market p{ color:#fff; }
.market h2 i{ color:var(--blue); font-style:italic; }

/* ---------------------------------------------------------------------
   14. FINAL CTA
--------------------------------------------------------------------- */
.final-cta{
    background:linear-gradient(155deg,var(--navy),var(--navy-2)) !important;
    position:relative; overflow:hidden;
}
.final-cta::before{
    content:"";
    position:absolute; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle,rgba(14,103,147,.25),transparent 70%);
    top:-220px; right:-140px;
}
.final-cta .button.white:hover{ background:var(--blue); color:#fff; }

/* ---------------------------------------------------------------------
   15. FOOTER
--------------------------------------------------------------------- */
footer{
    background:var(--navy-2) !important;
    position:relative;
}
footer h4{ color:var(--blue) !important; }
footer a{ color:rgba(255,255,255,.72) !important; transition:.25s; }
footer a:hover{ color:#fff !important; }
.footer-socials a{
    background:rgba(255,255,255,.08) !important;
    transition:transform .3s var(--ease), background .3s var(--ease);
}
.footer-socials a:hover{ background:var(--blue) !important; transform:translateY(-3px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08) !important; }

.side-actions a,.mobile-cta a{
    background:var(--navy) !important; color:#fff !important;
}
.side-actions a:hover{ background:var(--blue) !important; }

/* ---------------------------------------------------------------------
   16. REVEAL / MOTION  (main.js already toggles .visible on .reveal)
--------------------------------------------------------------------- */
.reveal{
    opacity:0;
    transform:translateY(28px);
    filter:blur(6px);
    transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.reveal.visible{ opacity:1; transform:none; filter:blur(0); }
.reveal.zoom-in{ transform:scale(.92) translateY(20px); }
.reveal.zoom-in.visible{ transform:scale(1) translateY(0); }

/* stagger children of grids that reveal together */
.services-grid .service-item,.mv-cards .mv-card,.about-stats-grid .about-stat-card,
.pillars article,.define-grid article,.leadership-grid .director-card,
.adv-grid article,.category-grid .category{
    transition-delay:calc(var(--tg-i,0) * 90ms);
}

/* cursor glow (desktop only, injected by premium.js) */
.tg-glow{
    position:fixed; top:0; left:0; width:340px; height:340px;
    border-radius:50%; pointer-events:none; z-index:0;
    background:radial-gradient(circle,rgba(14,103,147,.10),transparent 70%);
    transform:translate(-50%,-50%);
    transition:opacity .3s ease;
}
@media (hover:none),(pointer:coarse){ .tg-glow{ display:none; } }

@media (prefers-reduced-motion: reduce){
    .reveal,.hero-slide,.button,.service-item,.mv-card,.about-stat-card,
    .director-card,.testimonial-card,.service-card,.featured-card{
        transition:none !important; filter:none !important; transform:none !important; opacity:1 !important;
    }
}

/* ---------------------------------------------------------------------
   17. PROJECTS / AWARDS / BLOG / CAREERS / CONTACT / GALLERY EXTRAS
--------------------------------------------------------------------- */
.projects-toolbar .filter,.gallery-filters button{
    border-radius:100px !important; border:1px solid var(--line) !important;
    color:var(--muted) !important; font-weight:700; background:#fff !important;
}
.projects-toolbar .filter.active,.gallery-filters button.active{
    background:var(--navy) !important; color:#fff !important; border-color:var(--navy) !important;
}
.project-card,.career-card,.blog-card,.award-card{
    border-radius:var(--radius) !important; overflow:hidden;
    box-shadow:var(--shadow) !important; border:1px solid var(--line);
    transition:transform .45s var(--ease), box-shadow .45s var(--ease) !important;
}
.project-card:hover,.career-card:hover,.blog-card:hover,.award-card:hover{
    transform:translateY(-8px) !important; box-shadow:var(--shadow-gold) !important;
}
.project-facts,.job-meta{ color:var(--muted); }
.blog-overlay{ background:linear-gradient(180deg,rgba(11,46,64,0),rgba(11,46,64,.9)) !important; }
.award-badge,.award-year{ background:var(--blue) !important; color:#fff !important; }
.award-image-wrap{ border-radius:var(--radius) 0 0 var(--radius); overflow:hidden; }
.career-hero{ background:linear-gradient(155deg,var(--navy),var(--navy-2)) !important; }
.career-hero h1,.career-hero p{ color:#fff; }
.whatsapp-button{ background:#25D366 !important; box-shadow:var(--shadow); }

.gallery-hero-stats b{ font-family:"Fraunces",serif; color:var(--blue) !important; }
.gallery-masonry .g-tile{ border-radius:16px !important; box-shadow:var(--shadow); }
.gallery-masonry .g-tile:hover{ box-shadow:var(--shadow-gold) !important; }
.g-zoom{ background:var(--blue) !important; color:#fff !important; }

.contact-panel,.contact-shell,.contact-form-panel,.map-frame{
    border-radius:var(--radius) !important; box-shadow:var(--shadow);
}
.contact-form-panel input,.contact-form-panel textarea,.contact-form-panel select{
    border-radius:12px !important; border:1px solid var(--line) !important;
    transition:border-color .3s ease, box-shadow .3s ease;
}
.contact-form-panel input:focus,.contact-form-panel textarea:focus,.contact-form-panel select:focus{
    border-color:var(--blue) !important; box-shadow:0 0 0 4px rgba(14,103,147,.15); outline:none;
}
.contact-icon{ color:var(--blue) !important; }

/* ---------------------------------------------------------------------
   18. CHATBOT
--------------------------------------------------------------------- */
.chatbot-toggle{ background:var(--navy) !important; box-shadow:var(--shadow-navy) !important; }
.chatbot-toggle:hover{ background:var(--blue) !important; }
.chatbot-window{ border-radius:var(--radius) !important; box-shadow:var(--shadow-navy) !important; }
.chatbot-header{ background:linear-gradient(155deg,var(--navy),var(--navy-2)) !important; }
.chatbot-options button{ border-radius:100px !important; border:1px solid var(--line) !important; }
.chatbot-options button:hover{ background:var(--blue) !important; color:#fff !important; border-color:var(--blue) !important; }
#chatbotSend{ background:var(--blue) !important; }
.message-avatar{ background:var(--navy) !important; }

/* ---------------------------------------------------------------------
   20. CHATBOT — sit clear of the mobile Call/Enquire/WhatsApp bar
--------------------------------------------------------------------- */
@media (max-width:600px){
    .chatbot{ bottom:80px !important; right:14px !important; }
    .chatbot-window{ bottom:150px !important; height:min(560px,calc(100vh - 170px)) !important; }
}
@media (min-width:601px) and (max-width:900px){
    body:has(.mobile-cta) .chatbot{ bottom:25px; }
}

/* ---------------------------------------------------------------------
   22. EMI CALCULATOR
--------------------------------------------------------------------- */
.emi-section{ padding:100px 9%; background:var(--pale); }
.emi-head{ max-width:640px; margin:0 auto 46px; text-align:center; }
.emi-head h2{ margin:14px 0; }
.emi-card{
    max-width:1080px; margin:0 auto;
    background:#fff; border-radius:28px; border:1px solid var(--line);
    box-shadow:var(--shadow);
    display:grid; grid-template-columns:1.1fr .9fr;
    overflow:hidden;
}
.emi-inputs{ padding:48px 44px; display:flex; flex-direction:column; gap:34px; justify-content:center; }
.emi-field-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.emi-field-top label{ font-weight:700; color:var(--ink); font-size:14px; }
.emi-value{ font-family:"Fraunces",serif; font-size:20px; color:var(--blue); }
.emi-value i{ font-style:normal; font-size:12px; color:var(--muted); margin:0 3px; font-family:"Manrope",sans-serif; }
.emi-inputs input[type="range"]{
    -webkit-appearance:none; width:100%; height:6px; border-radius:100px;
    background:linear-gradient(90deg,var(--blue),var(--blue) var(--fill,50%),var(--line) var(--fill,50%),var(--line));
    outline:none; cursor:pointer;
}
.emi-inputs input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
    background:#fff; border:4px solid var(--blue); box-shadow:var(--shadow-gold); cursor:pointer;
}
.emi-inputs input[type="range"]::-moz-range-thumb{
    width:22px; height:22px; border-radius:50%;
    background:#fff; border:4px solid var(--blue); box-shadow:var(--shadow-gold); cursor:pointer;
}
.emi-result{
    background:linear-gradient(165deg,var(--navy),var(--navy-2));
    color:#fff; padding:46px 40px; display:flex; flex-direction:column; align-items:center; gap:22px;
}
.emi-donut{ position:relative; width:150px; height:150px; }
.emi-donut svg{ width:100%; height:100%; transform:rotate(-90deg); }
.emi-donut circle{ fill:none; stroke-width:12; }
.emi-donut-track{ stroke:rgba(255,255,255,.12); }
.emi-donut-principal{ stroke:var(--blue); stroke-linecap:round; transition:stroke-dasharray .5s var(--ease); }
.emi-donut-label{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
}
.emi-donut-label span{ font-size:11px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.05em; }
.emi-donut-label strong{ font-family:"Fraunces",serif; font-size:20px; margin-top:4px; }
.emi-breakdown{ list-style:none; margin:0; padding:0; width:100%; font-size:13px; }
.emi-breakdown li{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px dashed rgba(255,255,255,.15); color:rgba(255,255,255,.75); }
.emi-breakdown li b{ color:#fff; font-weight:700; }
.emi-breakdown li.total{ border-bottom:none; padding-top:14px; font-weight:700; color:#fff; }
.emi-breakdown .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:8px; }
.emi-breakdown .dot.principal{ background:var(--blue); }
.emi-breakdown .dot.interest{ background:rgba(255,255,255,.25); }
.emi-result .button{ width:100%; text-align:center; justify-content:center; display:flex; }
@media (max-width:860px){
    .emi-card{ grid-template-columns:1fr; }
    .emi-inputs{ padding:38px 26px; }
    .emi-result{ padding:38px 26px; }
}

/* ---------------------------------------------------------------------
   23. UPCOMING PROJECT HIGHLIGHT
--------------------------------------------------------------------- */
.upcoming-section{ padding:0 9% 100px; }
.upcoming-card{
    max-width:1300px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr;
    border-radius:28px; overflow:hidden;
    box-shadow:var(--shadow-navy);
    background:var(--navy);
}
.upcoming-visual{
    position:relative; min-height:380px;
    background-size:cover; background-position:center;
}
.upcoming-visual::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(100deg,rgba(11,46,64,.15),rgba(11,46,64,.65));
}
.upcoming-badge{
    position:absolute; top:26px; left:26px; z-index:2;
    background:var(--blue); color:#fff; font-weight:700; font-size:12px;
    padding:9px 16px; border-radius:100px; display:inline-flex; align-items:center; gap:8px;
    box-shadow:var(--shadow-gold);
    animation:tgPulse 2.4s ease-in-out infinite;
}
@keyframes tgPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(14,103,147,.45);} 50%{ box-shadow:0 0 0 10px rgba(14,103,147,0);} }
.upcoming-copy{ padding:56px 52px; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.upcoming-copy h2{ color:#fff; margin-bottom:16px; }
.upcoming-copy p{ color:rgba(255,255,255,.75); max-width:460px; }
.upcoming-facts{ list-style:none; margin:22px 0 30px; padding:0; display:flex; flex-wrap:wrap; gap:12px; }
.upcoming-facts li{
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    padding:8px 14px; border-radius:100px; font-size:12.5px; font-weight:600;
}
.upcoming-facts li i{ color:var(--blue); }
.upcoming-copy .actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.upcoming-copy .text-link{ color:#fff !important; }
.upcoming-copy .text-link b{ color:var(--blue); }
@media (max-width:860px){
    .upcoming-card{ grid-template-columns:1fr; }
    .upcoming-visual{ min-height:240px; }
    .upcoming-copy{ padding:38px 28px; }
}

/* ---------------------------------------------------------------------
   24. SERVICE CARD HOVER — shine sweep + lift + arrow travel
--------------------------------------------------------------------- */
.service-item,.service-card{ position:relative; isolation:isolate; }
.service-item::before,.service-card::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(120deg,transparent 30%,rgba(14,103,147,.16) 48%,transparent 66%);
    background-size:250% 250%; background-position:120% 0;
    opacity:0; transition:opacity .4s ease, background-position .8s ease;
    pointer-events:none;
}
.service-item:hover::before,.service-card:hover::before{
    opacity:1; background-position:-20% 0;
}
.service-item h3,.service-item p,.service-item .service-label,.service-item .service-link,
.service-card h3,.service-card p{ position:relative; z-index:1; }
.service-item:hover,.service-card:hover{
    transform:translateY(-10px) !important;
}
.service-link span{ display:inline-block; transition:transform .35s var(--ease); }
.service-item:hover .service-link span{ transform:translateX(6px); }
.service-card{ transition:transform .45s var(--ease), box-shadow .45s var(--ease) !important; border-radius:var(--radius) !important; overflow:hidden; }
.service-card:hover{ box-shadow:var(--shadow-gold) !important; }
.service-visual{ transition:transform .6s var(--ease); }
.service-card:hover .service-visual{ transform:scale(1.08); }

/* ---------------------------------------------------------------------
   26. CHATBOT BRAIN — typing indicator, project & contact cards
--------------------------------------------------------------------- */
.tg-typing .message-content{ display:flex; gap:5px; align-items:center; padding:14px 16px !important; }
.tg-dot{ width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:.5; animation:tgDot 1.1s ease-in-out infinite; }
.tg-dot:nth-child(2){ animation-delay:.15s; }
.tg-dot:nth-child(3){ animation-delay:.3s; }
@keyframes tgDot{ 0%,80%,100%{ transform:scale(.6); opacity:.35; } 40%{ transform:scale(1); opacity:1; } }

.tg-project-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tg-project-list li a{
    display:flex; flex-direction:column; gap:2px;
    padding:10px 12px; border-radius:12px;
    background:var(--pale); border:1px solid var(--line);
    transition:background .25s ease, transform .25s ease;
}
.tg-project-list li a:hover{ background:#fff; transform:translateX(3px); box-shadow:var(--shadow-gold); }
.tg-project-list li a b{ font-size:13px; color:var(--navy); }
.tg-project-list li a span{ font-size:11.5px; color:var(--muted); }

.tg-contact-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.tg-contact-list li{ display:flex; align-items:center; gap:10px; font-size:13px; }
.tg-contact-list li i{ color:var(--blue); width:16px; text-align:center; }
.tg-contact-list li a{ color:var(--navy); font-weight:700; }
.tg-contact-list li a:hover{ color:var(--blue); }

.tg-followups{ margin-top:10px !important; }

/* ---------------------------------------------------------------------
   28. GALLERY — FEATURED VIDEOS
--------------------------------------------------------------------- */
.gallery-video-head{ margin-bottom:26px; }
.gallery-video-head h2{ margin-top:10px; }
.gallery-video-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.gallery-video-card{
    opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.gallery-video-card.in-view{ opacity:1; transform:none; }
.gv-frame{
    position:relative; border-radius:var(--radius); overflow:hidden;
    aspect-ratio:4/5; background:var(--navy); box-shadow:var(--shadow);
}
.gv-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.gv-video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.gv-play{
    position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
    top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(255,255,255,.92); border:0; color:var(--navy); font-size:20px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:var(--shadow-gold); transition:transform .3s var(--ease), background .3s ease;
}
.gv-play:hover{ transform:translate(-50%,-50%) scale(1.08); background:var(--blue); color:#fff; }
.gv-frame::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(11,46,64,0) 55%,rgba(11,46,64,.55));
    pointer-events:none;
}
.gv-soon{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; color:#fff; background:rgba(11,46,64,.55); font-size:13px; font-weight:700;
}
.gv-soon i{ font-size:22px; opacity:.8; }
.gv-caption{ margin-top:12px; font-weight:700; color:var(--navy); font-size:14px; }
@media (max-width:900px){ .gallery-video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .gallery-video-grid{ grid-template-columns:1fr; gap:16px; } .gv-frame{ aspect-ratio:16/10; } }

/* ---------------------------------------------------------------------
   29. ABOUT — GROWTH CHART
--------------------------------------------------------------------- */
.growth-section{ padding:90px 9%; background:var(--pale); }
.growth-head{ max-width:640px; margin:0 auto 20px; text-align:center; }
.growth-head h2{ margin:14px 0 10px; }
.growth-note{ font-size:12px; color:var(--muted); text-align:center; max-width:560px; margin:0 auto 40px; }
.growth-card{
    max-width:1180px; margin:0 auto; background:#fff; border-radius:var(--radius);
    border:1px solid var(--line); box-shadow:var(--shadow); padding:40px clamp(20px,4vw,48px) 24px;
}
.growth-tabs{ display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.growth-tabs button{
    border-radius:100px; border:1px solid var(--line); background:#fff; color:var(--muted);
    font-weight:700; font-size:13px; padding:8px 18px; cursor:pointer; transition:.25s;
}
.growth-tabs button.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.growth-chart{ width:100%; height:auto; overflow:visible; }
.growth-bar-group{ cursor:pointer; }
.growth-bar{ fill:var(--blue); transition:height .6s var(--ease), y .6s var(--ease), fill .3s ease; }
.growth-bar-group:hover .growth-bar{ fill:var(--navy); }
.growth-bar-label{ font-size:11px; fill:var(--muted); font-family:"Manrope",sans-serif; text-anchor:middle; }
.growth-value-label{ font-size:11px; fill:var(--navy); font-weight:700; font-family:"Manrope",sans-serif; text-anchor:middle; opacity:0; transition:opacity .3s ease; }
.growth-bar-group:hover .growth-value-label,
.growth-bar-group.tg-touch-active .growth-value-label{ opacity:1; }
.growth-axis-line{ stroke:var(--line); stroke-width:1; }
.growth-legend{ display:flex; gap:22px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.growth-legend span{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); font-weight:600; }
.growth-legend i{ width:10px; height:10px; border-radius:50%; background:var(--blue); display:inline-block; }
@media (max-width:600px){
    .growth-card{ padding:28px 16px 18px; }
    .growth-tabs button{ padding:7px 14px; font-size:12px; }
}

/* ---------------------------------------------------------------------
   30. RESPONSIVE NUDGES
--------------------------------------------------------------------- */
@media (max-width:720px){
    .hero h1{ font-size:clamp(38px,9vw,54px); }
}