/* ===================================================================== KRISHNA OUTDOOR — STYLE.CSS — TABLE OF CONTENTS ===================================================================== This is ONE shared stylesheet used by every page (recommended: keep it this way — see the note at the very end of this comment for why). It has grown over time through many incremental edits, so a few regions mix rules for more than one page. The markers placed through the file below point to where each page's OWN styling mainly begins; shared building blocks (header/nav, buttons, footer, chatbot widget, animations) are used by all pages and may be refined again further down the file as small later patches. 1. GLOBAL — variables, reset, header & navigation 2. HOME PAGE — index.html: hero, about teaser, solutions/orbit, network teaser, clients, solution showcase, work, impact, cta — plus shared footer/chatbot/ animation polish added afterwards 3. ABOUT PAGE — about.html (classes: about-hero-*, about-lead-*, about-strength-*, foundation-*, leader-*) 4. SERVICES PAGE — services.html "Media Solutions" (classes: media-hero-*, media-ooh/transit/digital/print/electronic/branding-*) 5. NETWORK PAGE — network.html (classes: network-hero-*, network-map-*, network-card-*, mumbai-office-*) 6. CAREERS & CONTACT — careers.html + contact.html, share one component system (classes: kr-*) 7. OUR WORK PAGE — projects.html (classes: ow-*) 8. MEDIA DETAIL PAGES — ooh-media.html, transit-media.html, digital-media.html (classes: media-detail-hero-*) 9. LATE OVERRIDES / FINAL PATCHES — rules added last to fix a specific bug (button shape, mobile nav, this navbar redesign, etc). These intentionally win over earlier declarations of the same property — if a style looks "wrong", check here LAST, since it is usually the most recent, intended behaviour. NOTE ON FILE STRUCTURE: keeping everything in one file (instead of splitting into home.css / about.css / etc.) is intentional — shared pieces like the header, nav, buttons and footer only need to be written once, every page loads instantly from cache after the first visit, and it avoids the exact bug fixed earlier where a page's own copy of the CSS drifted out of sync with the shared file. Splitting by page would reintroduce that risk. ===================================================================== */ :root{--red:#e51b23;--red2:#b80f16;--ink:#121416;--dark:#0c0f12;--muted:#686d72;--line:#e7e7e7;--soft:#f6f6f4;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);overflow-x:hidden;background:#fff}a{text-decoration:none;color:inherit}button{font:inherit}.container{width:min(calc(100% - 64px),var(--max));margin:auto}.page-progress{position:fixed;z-index:200;left:0;top:0;width:0;height:3px;background:var(--red)} /* ===== 1. GLOBAL — HEADER & NAVIGATION ===== */ .header{height:80px;background:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid #eaeaea;transition:.3s}.header.scrolled{box-shadow:0 15px 35px #0000000c}.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between}.site-logo img{width:180px;height:auto;max-height:52px;object-fit:contain}.nav{display:flex;align-items:center;gap:27px;font-size:13px;font-weight:800}.nav>a{position:relative;padding:31px 0}.nav>a:not(.nav-cta):after{content:'';position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--red);transition:.3s}.nav>a:hover:after,.nav>a.active:after{width:100%}.nav-cta{background:var(--red);color:#fff;padding:13px 18px!important;border-radius:2px;box-shadow:0 9px 20px #e51b232b}.nav-toggle{display:none;border:0;background:transparent} /* ===== 2. HOME PAGE (index.html) — HERO ===== */ .hero{height:680px;position:relative;overflow:hidden;background:#202326;color:#fff}.hero-media{position:absolute;left:50%;top:50%;width:100vw;height:100%;max-width:none;object-fit:cover;transform:translate(-50%,-50%) scale(1.20);transform-origin:center center;will-change:transform;display:block}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#000e 0%,#0009 45%,#0003 100%)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent)}.hero-noise{position:absolute;inset:0;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.hero-inner{height:100%;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;padding-top:15px}.hero-kicker,.tag{font-size:13px;font-weight:900;letter-spacing:2px}.hero-kicker i{width:4px;height:4px;background:var(--red);display:inline-block;border-radius:50%;margin:0 8px 3px}.hero h1{font:700 clamp(64px,7.2vw,105px)/.88 Oswald,Impact,sans-serif;letter-spacing:-2px;margin:21px 0 25px}.hero h1 em,h2 em,h3 em{font-style:normal;color:var(--red)}.hero-inner>p{max-width:590px;font-size:17px;line-height:1.65;color:#f1f1f1;margin:0}.hero-actions{display:flex;gap:13px;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:16px 20px;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;border:0;cursor:pointer}.btn.red{background:var(--red);color:#fff;box-shadow:0 15px 30px #e51b2340}.btn.white{background:#fff;color:#111}.btn:hover{transform:translateY(-3px);box-shadow:0 16px 32px #0002}.story-button{background:#1013179c;color:#fff;border:1px solid #ffffff55;padding:0 22px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:13px;font-weight:900}.story-button span{width:29px;height:29px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:10px}.hero-rail{position:absolute;right:0;top:0;width:42px;height:100%;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;border-left:1px solid #ffffff1c}.hero-rail span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:2px;color:#ddd}.hero-scroll{position:absolute;right:65px;bottom:30px;font-size:11px;font-weight:900;z-index:3;letter-spacing:1px}.hero-scroll span{margin-left:16px}.stats{background:#111416;color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}.stats-grid>div{min-height:85px;display:flex;align-items:center;gap:15px;padding:16px 22px;border-right:1px solid #ffffff15}.stats-grid>div:last-child{border:0}.stats-grid strong{font:700 28px Oswald;color:#fff}.stats-grid span{font-size:10px;font-weight:900;letter-spacing:1px;line-height:1.35;color:#ddd}.section{padding:90px 0} /* ----- Home page: About teaser section ----- */ .about-grid{display:grid;grid-template-columns:38% 62%;gap:34px;align-items:center}.about-copy .tag,.work-copy .tag,.impact-copy .tag{color:var(--red)}.about-copy h2,.work-copy h2,.impact-copy h2{font:700 56px/.93 Oswald,Impact,sans-serif;margin:14px 0 25px}.about-copy p,.work-copy p,.impact-copy p{max-width:500px;font-size:14px;line-height:1.75;color:#565b60}.small-btn,.outline-btn{display:inline-flex;align-items:center;gap:18px;margin-top:23px;padding:12px 18px;background:var(--red);color:#fff;font-size:11px;font-weight:900}.outline-btn{background:transparent;color:#111;border:1px solid #111}.about-scene{height:500px;position:relative}.about-frame{position:absolute;overflow:hidden}.about-frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,0,1)}.about-frame:hover img{transform:scale(1.08)}.about-frame.f1{left:0;top:0;width:57%;height:57%}.about-frame.f2{right:0;top:0;width:40%;height:46%}.about-frame.f3{right:0;bottom:0;width:50%;height:48%}.year-badge{position:absolute;left:0;bottom:0;width:46%;height:38%;background:var(--red);color:#fff;padding:26px;display:flex;flex-direction:column;justify-content:center}.year-badge strong{font:700 65px Oswald;line-height:.8}.year-badge span{font:700 19px/1.05 Oswald;margin-top:14px}.scan-line{position:absolute;left:-5%;width:110%;height:1px;background:#fff6;top:50%;animation:scan 4s ease-in-out infinite} /* ----- Home page: Solutions / orbit diagram ----- */ .solutions-360{background:var(--soft);overflow:hidden}.section-head{text-align:center;margin-bottom:48px}.section-head h2{font:700 48px/1 Oswald;margin:9px 0}.section-head>p{font-size:13px;color:#676767}.orbit-layout{display:grid;grid-template-columns:56% 44%;align-items:center}.orbit-ring{width:min(560px,100%);aspect-ratio:1;position:relative;border:1px solid #d9d9d9;border-radius:50%;margin:auto}.orbit-ring:before,.orbit-ring:after{content:'';position:absolute;inset:8%;border:1px dashed #d1d1d1;border-radius:50%}.orbit-ring:after{inset:27%;border:1px solid #e2e2e2}.orbit-glow{position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle,#e51b231e,transparent 68%);filter:blur(10px)}.orbit-center{position:absolute;inset:38%;border-radius:50%;background:#121416;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 20px 60px #0002}.orbit-center span{font:700 46px Oswald;color:#fff}.orbit-center small{font-weight:900;letter-spacing:3px;color:#bbb}.orbit-card{position:absolute;width:105px;height:105px;border-radius:50%;border:1px solid #d7d7d7;background:#fff;box-shadow:0 15px 35px #0000000d;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.4s}.orbit-card b{font:700 12px Inter;color:var(--red);margin-bottom:4px}.orbit-card span{font-size:13px;font-weight:800}.orbit-card:hover,.orbit-card.active{background:var(--red);color:#fff;transform:scale(1.12);box-shadow:0 18px 45px #e51b2334}.orbit-card.active b{color:#fff}.oc1{top:-9px;left:50%;margin-left:-52px}.oc2{top:17%;right:0}.oc3{bottom:18%;right:2%}.oc4{bottom:-8px;left:50%;margin-left:-52px}.oc5{bottom:18%;left:2%}.oc6{top:17%;left:0}.service-panel{padding-left:45px;max-width:450px}.service-count{font:700 13px Oswald;color:#8a8d90;margin-bottom:24px}.service-panel .tag{color:var(--red)}.service-panel h3{font:700 46px/1 Oswald;margin:12px 0 20px}.service-panel p{font-size:15px;line-height:1.75;color:#64696d;min-height:74px}.service-meter{height:3px;background:#ddd;margin:28px 0 20px}.service-meter span{display:block;height:100%;background:var(--red);width:16.666%;transition:width .6s}.service-next{background:none;border:0;padding:0;font-size:11px;font-weight:900;cursor:pointer}.slide-type{display:flex;gap:60px;overflow:hidden;white-space:nowrap;border-top:1px solid #ddd;margin-top:50px;padding-top:22px;color:#bbb}.slide-type span{font:700 34px Oswald;animation:marquee 16s linear infinite} /* ----- Home page: Network teaser strip ----- */ .network{height:500px;color:#fff;position:relative;display:flex;align-items:center;overflow:hidden}.network-photo{position:absolute;inset:0;background:linear-gradient(90deg,#050608ed,#05060875),url('../assets/images/shared-night-city-background.png') center/cover}.network-lines{position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 54%,#ffffff08 54.2% 54.3%,transparent 54.5%),linear-gradient(90deg,transparent 0 72%,#e51b2318 72.2% 72.4%,transparent 72.6%)}.network-inner{position:relative}.network-inner .tag{color:#ef2b32}.network-inner h2{font:700 60px/.92 Oswald;margin:12px 0 22px}.network-inner p{max-width:530px;font-size:14px;line-height:1.75;color:#ddd} /* ----- Home page: Clients section ----- */ .clients{position:relative;overflow:hidden;background:#0b0d10;color:#fff;padding:70px 0}.clients-bg{position:absolute;inset:0;background:radial-gradient(circle at 70% 45%,#e51b2317,transparent 28%),linear-gradient(120deg,#08090b,#12161a 60%,#07080a)}.clients-wrap{display:grid;grid-template-columns:38% 62%;gap:30px;align-items:center;position:relative}.clients-copy h2{font:700 52px/.9 Oswald;margin:12px 0 18px}.clients-copy p{max-width:480px;color:#bbb;font-size:14px;line-height:1.75}.client-copy-meta{display:flex;align-items:center;gap:14px;margin-top:40px;font:700 12px Oswald}.client-line{width:160px;height:2px;background:#ffffff25;overflow:hidden}.client-line i{display:block;height:100%;width:33%;background:var(--red);transition:.7s}.client-stage{position:relative;aspect-ratio:1;max-width:610px;margin:auto}.client-orbit{position:absolute;border:1px solid #ffffff18;border-radius:50%}.cOuter{inset:4%;animation:spin 24s linear infinite}.cInner{inset:18%;border-style:dashed;animation:spinReverse 18s linear infinite}.client-satellite{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 25px #e51b23}.s1{top:7%;right:15%}.s2{bottom:16%;left:12%}.client-grid{position:absolute;inset:23% 18%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:14px;z-index:2}.client-card{background:#fff;border-radius:5px;display:grid;place-items:center;padding:22px;box-shadow:0 14px 35px #0005;transform:scale(.85);opacity:0;animation:clientIn .6s forwards}.client-card img{max-width:90%;max-height:55px;object-fit:contain} /* ----- Home page: Solution showcase (also reused on digital-media.html) ----- */ .solution-showcase{min-height:640px;background:#171a1e;color:#fff;position:relative;overflow:hidden}.showcase-bg{position:absolute;inset:0;background:#121417;transition:background .8s}.showcase-rings{position:absolute;inset:0;background:radial-gradient(circle at 72% 50%,#ffffff08,transparent 26%),repeating-radial-gradient(circle at 72% 50%,transparent 0 80px,#ffffff06 81px 82px);animation:pulseRing 6s ease-in-out infinite}.showcase-grid{position:relative;z-index:2;display:grid;grid-template-columns:43% 57%;align-items:center;min-height:640px}.showcase-copy h2{font:700 57px/.94 Oswald;margin:15px 0}.showcase-copy p{max-width:430px;font-size:14px;line-height:1.7;color:#b8bdc2}.showcase-tabs{display:flex;flex-direction:column;gap:9px;margin-top:28px}.tab{display:flex;align-items:center;gap:18px;width:fit-content;background:transparent;border:1px solid #ffffff15;color:#aaa;padding:13px 18px;font-size:13px;font-weight:900;cursor:pointer;transition:.35s}.tab span{color:#666}.tab.active{color:#fff;border-color:#fff4;background:#ffffff08;transform:translateX(8px)}.tab.active span{color:var(--red)}.showcase-visual{position:relative;height:500px;display:grid;place-items:center}.big-word{position:absolute;opacity:0;transform:translateY(30px) scale(.94);transition:.7s;text-align:center;font:700 95px/.82 Oswald;color:#fff;letter-spacing:-2px}.big-word.active{opacity:1;transform:none}.big-word span{color:var(--red)}.word-ring{position:absolute;width:430px;height:430px;border-radius:50%;border:1px solid #ffffff18;animation:spin 18s linear infinite}.word-ring.small{width:270px;height:270px;border-style:dashed;animation:spinReverse 11s linear infinite}.showcase-index{position:absolute;right:10px;bottom:15px;font:700 12px Oswald;color:#888} /* ----- Home page: Work section ----- */ .work-grid{display:grid;grid-template-columns:28% 72%;gap:0;align-items:center}.work-copy{padding-right:35px}.work-grid-cards{display:grid;grid-template-columns:repeat(3,1fr);height:310px}.work-card{position:relative;overflow:hidden;background:#111}.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s}.work-card:hover img{transform:scale(1.08)}.work-card>div{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,#000c);display:flex;justify-content:space-between;align-items:end;color:#fff}.work-card>div small{font-size:10px;font-weight:900;letter-spacing:1px}.work-card>div b{font-size:18px}.work-card.idea{background:var(--red);padding:26px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.work-card.idea small{font-size:10px;letter-spacing:2px}.work-card.idea strong{font:700 42px/.9 Oswald}.work-card.idea span{font-size:23px} /* ----- Home page: Impact section ----- */ .impact{background:#f8f8f6}.impact-grid{display:grid;grid-template-columns:58% 42%;align-items:center}.impact-image{height:380px;overflow:hidden}.impact-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.impact-image:hover img{transform:scale(1.05)}.impact-copy{padding-left:48px} /* ----- Shared: final CTA banner (used on several pages) ----- */ .cta{background:linear-gradient(120deg,#e51b23,#c51218 60%,#a40f14);color:#fff;position:relative;overflow:hidden}.cta:after{content:'';position:absolute;right:-180px;top:-190px;width:600px;height:600px;border:90px solid #ffffff0a;border-radius:50%}.cta-inner{min-height:240px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:1}.cta-inner h2{font:700 47px/.93 Oswald;margin:12px 0}.cta-inner p{max-width:580px;font-size:13px;color:#ffecec} /* ===== GLOBAL — FOOTER ===== */ .footer-top{min-height:110px;display:grid;grid-template-columns:220px 1fr 350px;align-items:center;gap:25px}.footer-top nav{display:flex;justify-content:center;gap:20px;font-size:11px;font-weight:800}.legacy{text-align:right}.legacy small{display:block;color:#777;font-size:9px;margin-bottom:7px}.legacy img{width:200px;max-height:54px;object-fit:contain}.footer-mid{border-top:1px solid #eee;border-bottom:1px solid #eee;background:#fff}.contact-row{display:grid;grid-template-columns:1fr 1fr 1.6fr auto;align-items:center;gap:28px;padding:19px 0}.contact-row>div span{display:block;color:#999;font-size:9px;font-weight:900;letter-spacing:1.5px;margin-bottom:5px}.contact-row a,.contact-row p{font-size:13px;color:#333;margin:0}.footer-campaign{background:var(--red);color:#fff!important;padding:12px 17px;font-size:10px!important;font-weight:900;white-space:nowrap}.footer-bottom{background:#f6f7f7;border-top:1px solid #eee}.footer-bottom>.container{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;color:#666}.social-text{display:flex;align-items:center;gap:7px}.social-text b{width:24px;height:24px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-size:9px}.story-modal{display:none;position:fixed;inset:0;z-index:150;background:#000d;place-items:center;padding:25px}.story-modal.open{display:grid}.story-dialog{position:relative;width:min(1000px,95vw);background:#101214;color:#fff;box-shadow:0 30px 100px #000}.story-dialog>button{position:absolute;right:14px;top:8px;background:#fff;color:#111;border:0;width:36px;height:36px;border-radius:50%;font-size:28px;z-index:2;cursor:pointer}.story-dialog video{width:100%;display:block;max-height:65vh;object-fit:cover}.story-dialog>div:last-child{padding:22px 28px}.story-dialog h3{font:700 40px Oswald;line-height:.92;margin:10px 0}.cursor,.cursor-ring{position:fixed;pointer-events:none;z-index:300;border-radius:50%;transform:translate(-50%,-50%);opacity:0}.cursor{width:5px;height:5px;background:var(--red)}.cursor-ring{width:34px;height:34px;border:1px solid #fff;mix-blend-mode:difference;transition:transform .08s ease}.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.7,0,1)}.reveal.in{opacity:1;transform:none} /* ===== GLOBAL — SHARED ANIMATIONS (keyframes) ===== */ @keyframes scan{0%,100%{transform:translateY(-220px);opacity:0}20%,80%{opacity:1}50%{transform:translateY(220px)}}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-120px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinReverse{to{transform:rotate(-360deg)}}@keyframes pulseRing{50%{transform:scale(1.03);opacity:.8}}@keyframes clientIn{to{opacity:1;transform:scale(1)}} @media(max-width:1050px){.nav{gap:15px}.orbit-layout{grid-template-columns:1fr}.service-panel{padding:50px 0 0;text-align:center;margin:auto}.service-panel p{margin-left:auto;margin-right:auto}.orbit-ring{max-width:520px}.clients-wrap{grid-template-columns:1fr}.clients-copy{max-width:600px}.client-stage{width:min(590px,100%)}.work-grid{grid-template-columns:1fr}.work-copy{padding:0 0 25px}.contact-row{grid-template-columns:1fr 1fr}.footer-top{grid-template-columns:1fr 1fr}.footer-top .legacy{display:none}} @media(max-width:760px){.container{width:calc(100% - 34px)}.header{height:70px}.site-logo img{width:150px;max-height:46px}.nav-toggle{display:flex;flex-direction:column;gap:5px;width:42px;height:42px;justify-content:center;align-items:center}.nav-toggle span{width:23px;height:2px;background:#111}.nav{display:none;position:absolute;left:0;right:0;top:70px;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 17px 17px;box-shadow:0 18px 35px #0001}.nav.open{display:flex}.nav>a{padding:13px 4px;border-bottom:1px solid #eee}.nav-cta{text-align:center;margin-top:7px}.hero{height:620px}.hero-inner{padding-top:55px}.hero h1{font-size:62px}.hero-kicker{font-size:9px}.hero-inner>p{font-size:14px;max-width:400px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-rail{display:none}.hero-scroll{right:20px}.stats-grid{grid-template-columns:1fr 1fr}.stats-grid>div{min-height:68px;padding:10px;border-bottom:1px solid #ffffff15}.stats-grid>div:nth-child(2){border-right:0}.stats-grid strong{font-size:25px}.stats-grid span{font-size:9px}.section{padding:62px 0}.about-grid{grid-template-columns:1fr}.about-copy h2,.work-copy h2,.impact-copy h2{font-size:52px}.about-scene{height:350px;margin-top:30px}.year-badge{padding:15px}.year-badge strong{font-size:52px}.year-badge span{font-size:16px}.section-head h2{font-size:42px}.orbit-ring{max-width:420px}.orbit-card{width:86px;height:86px}.orbit-card span{font-size:10px}.orbit-center span{font-size:38px}.oc1{margin-left:-43px}.oc4{margin-left:-43px}.oc2{right:-8px}.oc3{right:-7px}.oc5{left:-7px}.oc6{left:-8px}.service-panel h3{font-size:44px}.slide-type{gap:35px}.slide-type span{font-size:28px}.network{height:450px}.network-inner h2{font-size:52px}.clients{padding:70px 0}.clients-copy h2{font-size:54px}.client-grid{inset:22% 10%;gap:8px}.client-card{padding:13px}.showcase-grid{grid-template-columns:1fr;min-height:720px;padding-top:50px;padding-bottom:50px}.showcase-copy{z-index:3}.showcase-visual{height:380px}.big-word{font-size:71px}.word-ring{width:300px;height:300px}.word-ring.small{width:190px;height:190px}.work-grid-cards{height:235px}.work-card.idea{padding:18px}.work-card.idea strong{font-size:34px}.impact-grid{grid-template-columns:1fr}.impact-image{height:270px}.impact-copy{padding:35px 0 0}.cta-inner{min-height:300px;flex-direction:column;align-items:flex-start;justify-content:center}.cta-inner h2{font-size:43px}.footer-top{grid-template-columns:1fr;gap:22px;padding:30px 0}.footer-top nav{justify-content:flex-start;flex-wrap:wrap}.contact-row{grid-template-columns:1fr;gap:16px;padding:18px 0}.footer-bottom>.container{min-height:auto;padding:16px 0;flex-direction:column;align-items:flex-start;gap:11px}.cursor,.cursor-ring{display:none}} @media(max-width:430px){.hero h1{font-size:53px}.cards{grid-template-columns:1fr}.orbit-ring{max-width:345px}.orbit-card{width:74px;height:74px}.orbit-card b{font-size:11px}.orbit-card span{font-size:9px}.orbit-center{inset:36%}.client-grid{inset:25% 7%}.big-word{font-size:58px}.work-grid-cards{grid-template-columns:1fr 1fr}.work-grid-cards .work-card:nth-child(3){display:none}} /* ========================================================= EXPERIENCE / INDUSTRIAL PRESENCE ========================================================= */ .experience{background:#fff;position:relative;overflow:hidden;padding-top:95px;padding-bottom:95px} .experience-grid{display:grid;grid-template-columns:49% 51%;align-items:center;gap:35px} .experience-art{position:relative;min-height:430px;display:flex;align-items:center;justify-content:center;overflow:hidden} .experience-art img{width:92%;height:auto;max-height:430px;object-fit:contain;mix-blend-mode:multiply;position:relative;z-index:2;filter:contrast(1.02)} .experience-art-glow{position:absolute;width:310px;height:310px;border-radius:50%;border:1px solid #e51b2330;box-shadow:0 0 0 24px #e51b2308,0 0 80px #e51b2314;animation:experiencePulse 4s ease-in-out infinite} .experience-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--red);z-index:3;box-shadow:0 0 18px #e51b2370} .experience-dot.d1{top:18%;left:19%;animation:floatDot 4s ease-in-out infinite} .experience-dot.d2{top:34%;right:13%;animation:floatDot 5s ease-in-out .7s infinite} .experience-dot.d3{bottom:18%;left:30%;animation:floatDot 4.7s ease-in-out 1.1s infinite} .experience-copy{padding-left:25px} .since{display:inline-flex;align-items:center;gap:9px;font-weight:900;font-size:18px;letter-spacing:.7px;margin-bottom:22px} .since strong{display:inline-flex;padding:5px 9px;background:#111;color:#fff;font-size:20px} .experience-copy h2{font:700 clamp(40px,4.4vw,61px)/1.05 Oswald,Impact,sans-serif;text-transform:none;margin:0 0 25px;letter-spacing:-.6px} .experience-copy>p{max-width:650px;color:#666;font-size:15px;line-height:1.8;margin:0 0 18px} .experience-copy .experience-quote{font-style:italic;color:#171717;line-height:2.02;font-size:15px} .experience-link{display:inline-flex;align-items:center;gap:18px;margin-top:8px;padding:12px 0;font-size:13px;font-weight:900;letter-spacing:.8px;color:#111;border-bottom:2px solid var(--red)} .experience-link span{color:var(--red);transition:transform .25s} .experience-link:hover span{transform:translateX(6px)} @keyframes experiencePulse{0%,100%{transform:scale(.97);opacity:.55}50%{transform:scale(1.04);opacity:.95}} @keyframes floatDot{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @media(max-width:1050px){.experience-grid{grid-template-columns:1fr}.experience-copy{padding-left:0}.experience-art{min-height:360px;order:0}.experience-copy{order:1}} @media(max-width:760px){.experience{padding:65px 0}.experience-art{min-height:290px}.experience-art img{width:100%;max-height:300px}.experience-art-glow{width:220px;height:220px}.experience-copy h2{font-size:50px}.experience-copy>p{font-size:14px}.experience-copy .experience-quote{line-height:1.8;font-size:14px}.since{font-size:16px}.since strong{font-size:17px}} /* ===== FINAL POLISH: CLIENTS / SOLUTIONS / CHATBOT / FOOTER ===== */ .client-feature{display:flex;align-items:center;gap:14px;margin-top:25px;max-width:400px;padding:10px;border:1px solid #ffffff16;background:#ffffff06;backdrop-filter:blur(8px)} .client-feature img{width:108px;height:58px;object-fit:cover;flex:0 0 auto} .client-feature div{display:flex;flex-direction:column;gap:5px}.client-feature b{font-size:10px;letter-spacing:1.2px}.client-feature span{font-size:11px;color:#9fa5aa} .client-pulse{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--red);left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 0 #e51b2350;animation:clientPulse 2.2s infinite;z-index:1} @keyframes clientPulse{0%{box-shadow:0 0 0 0 #e51b2350}70%{box-shadow:0 0 0 35px #e51b2300}100%{box-shadow:0 0 0 0 #e51b2300}} .solution-showcase{transition:background .9s ease}.solution-showcase.theme-digital .showcase-bg{background:radial-gradient(circle at 74% 50%,#e51b2360,transparent 28%),linear-gradient(120deg,#180d0f,#0f1418)!important} .solution-showcase.theme-static .showcase-bg{background:radial-gradient(circle at 74% 50%,#c8cbd133,transparent 28%),linear-gradient(120deg,#282a2d,#101214)!important} .solution-showcase.theme-transit .showcase-bg{background:radial-gradient(circle at 74% 50%,#2895d050,transparent 30%),linear-gradient(120deg,#09202c,#101416)!important} .solution-showcase.theme-digital .big-word span{color:#ff2832}.solution-showcase.theme-static .big-word span{color:#fff}.solution-showcase.theme-transit .big-word span{color:#53bffb} .solution-showcase.theme-static .word-ring{border-color:#ffffff2b}.solution-showcase.theme-transit .word-ring{border-color:#53bffb35} .tab.active{box-shadow:0 10px 35px #0003}.tab:hover{color:#fff;transform:translateX(5px)} /* chatbot */ .chatbot{position:fixed;right:24px;bottom:24px;z-index:180;border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:9px;cursor:pointer;padding:0;filter:drop-shadow(0 15px 30px #0003)} .chatbot-orb{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#ef1e27,#a80f15);border:2px solid #fff;display:grid;place-items:center;font-size:26px;box-shadow:0 0 0 7px #e51b2324;animation:botFloat 3.2s ease-in-out infinite} .chatbot-text{display:flex;flex-direction:column;align-items:flex-start;background:#101316;padding:9px 13px;border:1px solid #ffffff18;border-radius:8px;opacity:0;transform:translateX(8px);transition:.3s;pointer-events:none}.chatbot:hover .chatbot-text{opacity:1;transform:none} .chatbot-text b{font-size:11px}.chatbot-text small{font-size:9px;color:#54d975;margin-top:2px} @keyframes botFloat{50%{transform:translateY(-5px)}100%{transform:none}} .chat-panel{position:fixed;right:24px;bottom:92px;width:330px;z-index:185;background:#fff;border:1px solid #ddd;box-shadow:0 30px 80px #0003;transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;transition:.3s;overflow:hidden}.chat-panel.open{transform:none;opacity:1;pointer-events:auto} .chat-head{background:#111416;color:#fff;padding:15px 16px;display:flex;align-items:center;justify-content:space-between}.chat-head>div{display:flex;flex-direction:column}.chat-head b{font-size:15px}.chat-head small{font-size:10px;color:#9da2a6;margin-top:4px}.chat-head button{border:0;background:transparent;color:#fff;font-size:27px;cursor:pointer} .chat-body{padding:16px}.chat-intro{margin:0;font-size:13px;color:#555;line-height:1.6}.chat-options{display:grid;gap:8px;margin-top:13px}.chat-options button{background:#f7f7f7;border:1px solid #e8e8e8;text-align:left;padding:11px 12px;font-size:11px;font-weight:800;cursor:pointer;transition:.2s}.chat-options button:hover{border-color:var(--red);background:#fff1f1;transform:translateX(4px)}.chat-reply{margin-top:12px;font-size:11px;color:#555;line-height:1.55;min-height:22px} .footer .site-logo img{width:165px;max-height:50px}.footer-top{min-height:96px}.footer-bottom>.container{font-size:11px}.footer-mid{box-shadow:0 -6px 20px #00000004} @media(max-width:760px){.client-feature{max-width:100%}.chatbot{right:15px;bottom:15px}.chat-panel{right:15px;bottom:83px;width:min(330px,calc(100% - 30px))}.chatbot-text{display:none}.footer .site-logo img{width:155px}} /* ===== 360° Client Carousel (matches reference) ===== */ .clients-wrap{grid-template-columns:30% 70%;gap:24px} .client-nav{display:flex;align-items:center;gap:16px;margin-top:34px} .client-arrow{width:38px;height:38px;border-radius:50%;border:1px solid #ffffff35;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;font-size:21px;cursor:pointer;transition:.25s} .client-arrow:hover{background:#fff;color:#111;border-color:#fff} .client-dots{display:flex;align-items:center;gap:8px} .client-dots .dot{width:8px;height:8px;border-radius:50%;background:#ffffff30;transition:.25s} .client-dots .dot.active{background:var(--red);width:22px;border-radius:5px} .client-stats{display:flex;gap:26px;margin-top:34px;padding-top:22px;border-top:1px solid #ffffff1e;flex-wrap:wrap} .client-stats div{display:flex;flex-direction:column;gap:2px} .client-stats strong{font:700 22px Oswald;color:var(--red)} .client-stats span{font-size:11px;color:#bbb;font-weight:700;letter-spacing:.4px} .client-stage{position:relative;height:380px;display:flex;align-items:center;justify-content:center;perspective:1700px;overflow:hidden} .client-stage:before{content:'';position:absolute;inset:-10% 6%;background:radial-gradient(ellipse at center,#e51b2336,transparent 62%);filter:blur(18px);z-index:0} .client-arc{position:absolute;bottom:2%;left:6%;width:88%;height:34%;border:1px solid #e51b2320;border-radius:50%;pointer-events:none} .client-carousel{position:relative;width:100%;height:280px;transform-style:preserve-3d;z-index:1} .client-card3d{position:absolute;top:50%;left:50%;width:152px;height:212px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;padding:18px;box-shadow:0 22px 45px #00000070,0 0 0 1px #0000000f;transition:transform .8s cubic-bezier(.22,.8,.2,1),opacity .8s,filter .8s} .client-card3d img{max-width:78%;max-height:58%;object-fit:contain} .client-card3d.center{box-shadow:0 28px 65px #e51b2360,0 0 0 1px #ffffff25} .client-reflection{position:absolute;bottom:-4%;left:10%;width:80%;height:52px;background:radial-gradient(ellipse at center,#e51b232e,transparent 72%);filter:blur(6px);pointer-events:none;z-index:0} .client-360{position:absolute;bottom:-2%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:58px;height:58px;border-radius:50%;border:1px solid #ffffff30;color:#fff;font:700 10px Oswald;letter-spacing:.5px;background:#0b0d10cc;z-index:2} .client-360 svg{width:20px;height:11px} .client-360 .ring{position:absolute;inset:-12px;border:1px dashed #ffffff20;border-radius:50%;animation:spin 20s linear infinite} @media(max-width:1050px){.clients-wrap{grid-template-columns:1fr}.client-stage{margin-top:40px}} @media(max-width:760px){.client-stage{height:260px}.client-card3d{width:96px;height:134px;padding:12px;border-radius:14px}.client-stats{gap:18px}.client-360{width:46px;height:46px}} /* ===== FINAL FUNCTIONAL FIX: CLIENTS + SOLUTIONS + WORK/NETWORK ===== */ .hero-inner{justify-content:center;align-items:flex-start} .hero-inner h1{font-size:clamp(49px,6vw,87px);line-height:.94;max-width:760px;margin:0;letter-spacing:-1.5px;text-shadow:0 8px 35px #0009} .hero-inner h1 em{font-style:normal;color:#fff} /* Clients: never depend on reveal animation for the carousel itself */ .clients{min-height:520px} .clients-wrap{display:grid!important;grid-template-columns:minmax(330px,31%) minmax(0,69%)!important;gap:28px!important;align-items:center!important} .clients-copy{position:relative;z-index:5} .client-stage{position:relative!important;display:block!important;height:410px!important;min-width:0;overflow:visible!important;perspective:1800px;isolation:isolate} .client-stage:before{content:'';position:absolute;inset:4% 3% 12%;background:radial-gradient(ellipse at center,#e51b2348 0%,#e51b2318 28%,transparent 66%);filter:blur(22px);z-index:0;pointer-events:none} .client-carousel{position:absolute!important;inset:0!important;width:100%!important;height:330px!important;transform-style:preserve-3d!important;z-index:3!important} .client-card3d{appearance:none;border:0;cursor:pointer;position:absolute!important;top:47%!important;left:50%!important;width:165px!important;height:225px!important;border-radius:12px!important;background:linear-gradient(145deg,#fff,#f4f4f4)!important;padding:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden;box-shadow:0 28px 55px #0008,0 0 0 1px #ffffffaa!important;backface-visibility:hidden;will-change:transform,opacity;transition:transform .72s cubic-bezier(.22,.75,.18,1),opacity .72s,filter .72s!important} .client-card3d:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#fff8,transparent 40%,#00000005);pointer-events:none} .client-card3d img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;position:relative;z-index:1} .client-card3d.center{box-shadow:0 35px 75px #e51b2360,0 0 35px #e51b2330,0 0 0 1px #fff!important} .client-arc{position:absolute!important;bottom:11%!important;left:3%!important;width:94%!important;height:31%!important;border:1px solid #e51b2360!important;border-radius:50%!important;box-shadow:0 0 35px #e51b231c!important;z-index:1} .client-reflection{position:absolute!important;bottom:5%!important;left:10%!important;width:80%!important;height:70px!important;background:radial-gradient(ellipse,#e51b2340,transparent 70%)!important;filter:blur(8px)!important;z-index:0!important} .client-360{bottom:1%!important;width:58px!important;height:58px!important;border-radius:50%!important;z-index:6!important} .client-nav{position:relative;z-index:10} .client-dots .dot{border:0;padding:0;cursor:pointer} .client-dots .dot.active{width:22px!important;background:var(--red)!important} /* Solutions showcase: visible media instead of an empty text-only stage */ .solution-showcase{min-height:560px!important;position:relative;overflow:hidden} .showcase-grid{min-height:560px!important;align-items:center!important} .showcase-visual{position:relative!important;height:430px!important;min-width:0;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;border-radius:20px} .showcase-media{position:absolute!important;inset:8% 5%!important;border-radius:18px!important;overflow:hidden!important;opacity:0!important;transform:scale(.94) translateY(12px)!important;transition:opacity .65s ease,transform .65s ease!important;box-shadow:0 30px 70px #0009!important;border:1px solid #ffffff20!important;z-index:3!important} .showcase-media.active{opacity:1!important;transform:scale(1) translateY(0)!important} .showcase-media img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;filter:saturate(.92) contrast(1.05) brightness(.72)!important} .showcase-media:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0008,transparent 55%,#0003),linear-gradient(0deg,#0008,transparent 55%);pointer-events:none} .showcase-media span{position:absolute;left:28px;bottom:24px;z-index:2;font:700 clamp(34px,4vw,64px)/1 Oswald,Impact,sans-serif;letter-spacing:-1px;color:#fff;text-shadow:0 8px 25px #000} .showcase-visual .word-ring,.showcase-visual .word-ring.small{z-index:1!important} .showcase-index{z-index:5!important} /* Work gallery */ .work-grid-cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;height:auto!important} .work-card{min-height:220px!important;position:relative!important;overflow:hidden!important;border-radius:10px!important;background:#111!important} .work-card img{width:100%!important;height:100%!important;min-height:220px!important;object-fit:cover!important;display:block!important;transition:transform .6s ease!important} .work-card:hover img{transform:scale(1.06)!important} .work-card>div{position:absolute!important;left:0;right:0;bottom:0;padding:30px 14px 14px!important;background:linear-gradient(transparent,#000d)!important;color:#fff!important;display:flex!important;justify-content:space-between!important;align-items:flex-end!important} .work-card>div small{font-size:10px!important;letter-spacing:1px!important} .work-card>div b{font-size:21px!important} /* Network image */ .network-photo{background-size:cover!important;background-position:center!important;filter:brightness(.48) saturate(.9)!important} .network:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050607e8 0%,#050607a8 46%,#05060735 100%);pointer-events:none} .network-inner{z-index:3!important} @media(max-width:1050px){ .clients-wrap{grid-template-columns:1fr!important} .client-stage{height:390px!important;margin-top:25px} .showcase-grid{grid-template-columns:1fr!important} .showcase-visual{height:390px!important} .work-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:760px){ .hero{height:560px!important}.hero-inner h1{font-size:48px!important} .clients{padding:55px 0!important}.client-stage{height:310px!important}.client-carousel{height:250px!important} .client-card3d{width:104px!important;height:145px!important;padding:12px!important;border-radius:10px!important} .client-arc{bottom:9%!important}.client-360{width:46px!important;height:46px!important;font-size:9px!important} .showcase-visual{height:300px!important}.showcase-media{inset:4% 0!important}.showcase-media span{font-size:36px!important;left:18px;bottom:18px} .work-grid-cards{grid-template-columns:1fr 1fr!important}.work-card{min-height:170px!important}.work-card img{min-height:170px!important} } /* Final client-requested layout: Solutions section is text-only; its three showcase images live in More Than Media. */ .solution-showcase .showcase-grid{grid-template-columns:minmax(0,1fr) !important;position:relative;min-height:560px !important;} .solution-showcase .showcase-copy{max-width:720px;position:relative;z-index:4;padding:70px 0;} .solution-showcase .showcase-text-stage{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:block;} .solution-showcase .showcase-text-stage .word-ring{position:absolute;right:9%;top:50%;transform:translateY(-50%);} .solution-showcase .showcase-text-stage .word-ring.small{right:18%;} .solution-showcase .showcase-text-stage .showcase-index{position:absolute;right:12%;bottom:70px;z-index:2;} @media(max-width:1050px){.solution-showcase .showcase-copy{max-width:680px}.solution-showcase .showcase-text-stage .word-ring{right:0}.solution-showcase .showcase-text-stage .word-ring.small{right:10%;}} @media(max-width:760px){.solution-showcase .showcase-grid{min-height:620px !important}.solution-showcase .showcase-copy{padding:50px 0}.solution-showcase .showcase-text-stage .word-ring{right:-70px;top:62%;}.solution-showcase .showcase-text-stage .word-ring.small{right:20px;top:62%;}.solution-showcase .showcase-text-stage .showcase-index{right:20px;bottom:35px;}} /* ===== USER UPDATE: WORK VIDEO + AUTO-SCROLL GALLERY + RESPONSIVE CHATBOT ===== */ .work-gallery{min-width:0;display:grid;gap:14px;position:relative} .work-video-card{grid-column:1/-1;height:250px;position:relative;overflow:hidden;border-radius:10px;background:#090a0c;border:1px solid #00000012;box-shadow:0 22px 55px #0002} .work-video-card video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95) contrast(1.04) brightness(.78)} .work-video-shade{position:absolute;inset:0;background:linear-gradient(90deg,#000b,transparent 55%,#0002),linear-gradient(0deg,#000b,transparent 55%);pointer-events:none} .work-video-label{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:center;color:#fff;z-index:2;font-size:10px;letter-spacing:1.1px;font-weight:800} .work-video-label span{display:flex;align-items:center;gap:7px;font-size:9px;color:#eee}.work-video-label i{width:6px;height:6px;background:#e51b23;border-radius:50%;display:inline-block;box-shadow:0 0 0 5px #e51b2322} .work-bottom-wrap{position:relative;min-width:0}.work-bottom-viewport{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x mandatory;padding:1px}.work-bottom-viewport::-webkit-scrollbar{display:none}.work-bottom-track{display:flex;gap:14px;width:max-content}.work-bottom-track .work-card{width:calc((100% - 28px)/3);flex:0 0 calc((100vw - max(32px, (100vw - var(--max))/2)*2 - 28px)/3);max-width:360px;min-height:205px!important;scroll-snap-align:start} .work-bottom-track .work-card img{min-height:205px!important;height:205px!important}.work-scroll-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid #ffffffcc;background:#0b0d10e8;color:#fff;display:grid;place-items:center;cursor:pointer;font-size:28px;line-height:1;box-shadow:0 10px 25px #0003;opacity:0;transition:.25s}.work-bottom-wrap:hover .work-scroll-arrow{opacity:1}.work-scroll-arrow.prev{left:8px}.work-scroll-arrow.next{right:8px} .chatbot{position:fixed;right:24px;bottom:24px;z-index:180;border:1px solid #ffffff22;background:linear-gradient(135deg,#17191c,#0a0c0f);color:#fff;border-radius:18px;padding:10px 15px 10px 10px;display:flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 18px 45px #0005,0 0 0 1px #e51b2312;transition:transform .25s,box-shadow .25s}.chatbot:hover{transform:translateY(-4px);box-shadow:0 22px 50px #0006,0 0 28px #e51b2328}.chatbot-orb{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#e51b23,#8f0e14);display:grid;place-items:center;box-shadow:0 8px 20px #e51b2344}.chatbot-orb span{font-size:20px}.chatbot-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.chatbot-text b{font-size:13px;letter-spacing:.3px}.chatbot-text small{font-size:9px;color:#bfc3c8;display:flex;align-items:center;gap:4px}.chatbot-text small i,.chat-brand small i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#31d46c;box-shadow:0 0 0 4px #31d46c18}.chatbot-ping{position:absolute;left:43px;top:8px;width:7px;height:7px;border-radius:50%;background:#31d46c;animation:chatPing 1.8s infinite}.chat-panel{position:fixed;right:24px;bottom:92px;width:min(365px,calc(100vw - 32px));z-index:179;background:#0c0f12;color:#fff;border:1px solid #ffffff18;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px #0008,0 0 40px #e51b2314;opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;transition:.28s ease}.chat-panel.open{opacity:1;transform:none;pointer-events:auto}.chat-head{padding:15px 16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#181b1f,#0b0d10);border-bottom:1px solid #ffffff12}.chat-brand{display:flex;align-items:center;gap:10px}.chat-brand-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--red);font-size:16px}.chat-brand div{display:flex;flex-direction:column;gap:3px}.chat-head b{font-size:14px}.chat-head small{font-size:9px;color:#aeb4ba;display:flex;align-items:center;gap:5px}.chat-head button{border:0;background:#ffffff0b;color:#fff;width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:22px}.chat-body{padding:16px}.chat-welcome{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid #ffffff10;border-radius:14px;background:#ffffff05}.chat-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:#fff;color:#111;display:grid;place-items:center;font-weight:900;font-size:14px}.chat-welcome b{font-size:13px}.chat-welcome p{margin:4px 0 0;font-size:11px;line-height:1.5;color:#bfc3c8}.chat-options{display:grid;gap:8px;margin-top:12px}.chat-options button{display:flex;align-items:center;gap:9px;text-align:left;width:100%;border:1px solid #ffffff12;background:#11151a;color:#fff;border-radius:11px;padding:11px 12px;font-size:11px;cursor:pointer;transition:.2s}.chat-options button:hover{border-color:#e51b2355;background:#e51b2312;transform:translateX(3px)}.chat-options button span{color:#e51b23;font:700 9px Oswald}.chat-options button b{margin-left:auto;color:#999}.chat-reply{display:none;margin-top:10px;padding:11px 12px;border-left:2px solid var(--red);background:#ffffff06;color:#dce0e4;font-size:11px;line-height:1.55;border-radius:0 9px 9px 0}.chat-reply:not(:empty){display:block}.chat-direct{display:flex;gap:8px;margin-top:12px}.chat-direct a{flex:1;text-align:center;padding:9px;border:1px solid #ffffff12;border-radius:9px;color:#ddd;font-size:10px;font-weight:800}.chat-direct a:hover{color:#fff;border-color:#e51b2355;background:#e51b2310}@keyframes chatPing{0%,100%{box-shadow:0 0 0 0 #31d46c33}50%{box-shadow:0 0 0 6px #31d46c00}} @media(max-width:1050px){.work-grid{grid-template-columns:1fr!important}.work-video-card{height:330px}.work-bottom-track .work-card{flex-basis:calc((100vw - 64px - 28px)/3);max-width:none}} @media(max-width:760px){.container{width:min(calc(100% - 32px),var(--max))}.header{height:68px}.site-logo img{width:145px;max-height:44px}.nav{position:absolute;top:68px;left:16px;right:16px;background:#fff;border:1px solid #eee;box-shadow:0 18px 40px #0002;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px;border-radius:10px}.nav.open{display:flex}.nav>a{padding:13px 12px}.nav-cta{text-align:center;margin-top:4px}.nav-toggle{display:flex;flex-direction:column;gap:4px}.nav-toggle span{width:24px;height:2px;background:#111}.hero{height:520px!important}.hero-inner{padding:0 4px}.hero-inner h1{font-size:42px!important;max-width:320px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stats-grid>div{min-height:74px;padding:12px 14px}.stats-grid strong{font-size:27px}.section{padding:62px 0}.work-video-card{height:205px;border-radius:9px}.work-video-label{left:12px;right:12px;bottom:12px}.work-bottom-track{gap:10px}.work-bottom-track .work-card{flex-basis:calc(100vw - 58px);min-height:185px!important}.work-bottom-track .work-card img{height:185px!important;min-height:185px!important}.work-scroll-arrow{opacity:1;width:34px;height:34px}.work-scroll-arrow.prev{left:5px}.work-scroll-arrow.next{right:5px}.chatbot{right:14px;bottom:14px;padding:8px 10px 8px 8px;border-radius:15px}.chatbot-orb{width:35px;height:35px}.chatbot-text b{font-size:11px}.chat-panel{right:16px;bottom:76px;width:calc(100vw - 32px);border-radius:17px}.chat-body{padding:13px}.chat-direct a{padding:8px}.solution-showcase .showcase-grid{min-height:580px!important}.solution-showcase .showcase-copy{padding:48px 0}.solution-showcase .showcase-text-stage .word-ring{right:-100px;top:64%;transform:translateY(-50%) scale(.82)}.solution-showcase .showcase-text-stage .word-ring.small{right:-20px;top:64%;transform:translateY(-50%) scale(.72)}} /* Work rail sizing is calculated by JS so exactly 3 cards fit on desktop. */ .work-bottom-track .work-card{flex:0 0 auto!important;width:auto;max-width:none!important} .work-bottom-viewport{width:100%;} @media(max-width:760px){.work-gallery{gap:12px}.work-video-card{height:205px}.work-bottom-track .work-card{max-width:none!important}.work-copy h2{font-size:50px!important}} /* Solutions showcase — visual media panel in the open right stage */ .solution-showcase .showcase-text-stage{isolation:isolate} .solution-showcase .showcase-visual{position:absolute;right:6%;top:50%;width:min(54vw,700px);height:min(390px,32vw);transform:translateY(-50%);overflow:hidden;border:1px solid #ffffff24;background:#111;box-shadow:0 28px 80px #0008;z-index:3;opacity:1} .solution-showcase .showcase-visual img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.92) contrast(1.04);transition:opacity .35s ease,transform .7s cubic-bezier(.16,.7,0,1)} .solution-showcase .showcase-visual img.is-changing{animation:showcaseImageIn .65s ease both} .solution-showcase .showcase-visual-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080a0ccc 0%,#080a0c33 55%,#080a0c10 100%),linear-gradient(0deg,#000b,transparent 48%)} .solution-showcase .showcase-visual-copy{position:absolute;left:38px;bottom:32px;z-index:4;display:flex;flex-direction:column;gap:7px;max-width:70%} .solution-showcase .showcase-visual-copy small{font-size:11px;font-weight:900;letter-spacing:3px;color:#fff} .solution-showcase .showcase-visual-copy strong{font:700 clamp(34px,4.2vw,70px)/.88 Oswald,Impact,sans-serif;letter-spacing:-1px;text-shadow:0 5px 22px #0009;transition:color .4s ease} .solution-showcase .showcase-text-stage .word-ring{z-index:1} .solution-showcase .showcase-text-stage .word-ring.small{z-index:1} .solution-showcase .showcase-index{z-index:5} @keyframes showcaseImageIn{from{opacity:.25;transform:scale(1.06)}to{opacity:1;transform:scale(1)}} @media(max-width:1050px){.solution-showcase .showcase-visual{right:0;width:55vw;height:36vw}.solution-showcase .showcase-visual-copy{left:25px;bottom:24px}} @media(max-width:760px){.solution-showcase .showcase-text-stage{min-height:330px}.solution-showcase .showcase-visual{right:16px;left:16px;top:62%;width:auto;height:230px;transform:translateY(-50%)}.solution-showcase .showcase-visual-copy{left:20px;bottom:20px;max-width:85%}.solution-showcase .showcase-visual-copy strong{font-size:38px}.solution-showcase .showcase-text-stage .word-ring{right:-90px!important;top:62%}.solution-showcase .showcase-text-stage .word-ring.small{right:-10px!important;top:62%}.solution-showcase .showcase-index{right:20px;bottom:8px}} /* ===== FINAL USER FIXES ===== */ .hero-media{background:#08090b;object-position:center center} .hero-inner h1{font-size:clamp(42px,4.35vw,67px)!important;line-height:.94!important;max-width:620px!important} /* 360 Solutions: keep the counter above the rotating rings and continuously animate the orbit */ .solutions-360 .orbit-ring{overflow:visible!important;isolation:isolate} .solutions-360 .orbit-ring:before{animation:spin 18s linear infinite} .solutions-360 .orbit-ring:after{animation:spinReverse 11s linear infinite} .solutions-360 .orbit-glow{z-index:0} .solutions-360 .orbit-center{z-index:10!important;position:absolute!important;overflow:visible!important} .solutions-360 .orbit-center span,.solutions-360 .orbit-center small,.solutions-360 .orbit-center b{position:relative;z-index:12;display:block} .solutions-360 .orbit-center b{font:800 9px Inter,sans-serif;letter-spacing:1px;color:#e51b23;margin-top:8px} .solutions-360 .orbit-card{z-index:8} /* Solutions showcase: text on left, a clean visual on the right */ .solution-showcase{min-height:620px!important} .solution-showcase .showcase-grid{grid-template-columns:minmax(300px,42%) minmax(0,58%)!important;min-height:620px!important;align-items:center!important} .solution-showcase .showcase-copy{position:relative!important;z-index:8!important;padding:50px 20px 50px 0!important} .solution-showcase .showcase-copy h2{font-size:clamp(49px,4.8vw,69px)!important} .solution-showcase .showcase-text-stage{position:relative!important;inset:auto!important;height:480px!important;overflow:visible!important;pointer-events:none!important} .solution-showcase .showcase-visual{position:absolute!important;inset:6% 2% 8% 2%!important;height:auto!important;display:block!important;border-radius:16px!important;overflow:hidden!important;box-shadow:0 30px 80px #0008!important;border:1px solid #ffffff20!important;background:#0d1013!important;z-index:4!important} .solution-showcase .showcase-visual img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;transition:opacity .45s ease,transform .7s ease,filter .45s ease!important;filter:saturate(.98) contrast(1.06) brightness(.72)!important} .solution-showcase .showcase-visual img.is-changing{animation:showcaseImageIn .65s ease both} .solution-showcase .showcase-visual-shade{position:absolute!important;inset:0!important;background:linear-gradient(90deg,#000a 0%,#0004 45%,#0001 100%),linear-gradient(0deg,#000a,transparent 55%)!important;z-index:2!important} .solution-showcase .showcase-visual-copy{position:absolute!important;left:30px!important;bottom:28px!important;z-index:5!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important} .solution-showcase .showcase-visual-copy small{font:800 10px Inter,sans-serif;letter-spacing:3px;color:#fff;opacity:.9} .solution-showcase .showcase-visual-copy strong{font:700 clamp(38px,4vw,66px)/.9 Oswald,Impact,sans-serif;letter-spacing:-1px;text-shadow:0 8px 30px #0008} .solution-showcase .word-ring{z-index:1!important;opacity:.65} .solution-showcase .showcase-index{z-index:8!important;color:#fff!important;background:#0d1013cc;padding:7px 10px;border:1px solid #ffffff22;border-radius:999px;right:18px!important;bottom:18px!important} @keyframes showcaseImageIn{from{opacity:.2;transform:scale(1.035)}to{opacity:1;transform:scale(1)}} /* Work image lightbox */ .work-card{cursor:pointer!important} .work-lightbox{position:fixed;inset:0;z-index:500;background:#000d;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:.25s} .work-lightbox.open{opacity:1;visibility:visible} .work-lightbox-inner{position:relative;width:min(1050px,94vw);max-height:90vh;background:#0b0d10;border:1px solid #ffffff22;border-radius:14px;overflow:hidden;box-shadow:0 40px 120px #000b} .work-lightbox-inner img{display:block;width:100%;max-height:78vh;object-fit:contain;background:#050607} #workLightboxCaption{padding:12px 16px;color:#fff;font-size:11px;letter-spacing:1px;text-transform:uppercase} #workLightboxClose{position:absolute;right:10px;top:10px;z-index:4;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff55;background:#08090bcc;color:#fff;font-size:27px;cursor:pointer} /* Cute compact chatbot */ .chatbot{right:16px!important;bottom:16px!important;gap:0!important} .chatbot-orb{width:42px!important;height:42px!important;border-width:1px!important;font-size:18px!important;box-shadow:0 0 0 4px #e51b2320!important} .chatbot-ping{width:7px!important;height:7px!important} .chat-panel{right:16px!important;bottom:68px!important;width:min(290px,calc(100% - 32px))!important;border-radius:12px!important} .chat-head{padding:11px 12px!important}.chat-body{padding:12px!important}.chat-options button{padding:9px 10px!important;font-size:10px!important} @media(max-width:1050px){ .solution-showcase .showcase-grid{grid-template-columns:1fr!important;min-height:auto!important} .solution-showcase .showcase-copy{padding:60px 0 25px!important} .solution-showcase .showcase-text-stage{height:430px!important;margin-bottom:50px} } @media(max-width:760px){ .hero{height:540px!important}.hero-inner h1{font-size:36px!important;max-width:360px!important} .solutions-360 .orbit-layout{grid-template-columns:1fr!important}.solutions-360 .orbit-ring{width:min(390px,92vw)!important}.solutions-360 .service-panel{padding:35px 0 0!important;text-align:center;margin:auto} .solution-showcase{min-height:auto!important}.solution-showcase .showcase-copy{padding:48px 0 20px!important}.solution-showcase .showcase-copy h2{font-size:47px!important} .solution-showcase .showcase-text-stage{height:320px!important;margin-bottom:42px}.solution-showcase .showcase-visual{inset:2% 0 8%!important}.solution-showcase .showcase-visual-copy{left:18px!important;bottom:18px!important}.solution-showcase .showcase-visual-copy strong{font-size:42px!important}.solution-showcase .showcase-index{right:12px!important;bottom:10px!important} .work-lightbox{padding:12px}.work-lightbox-inner{width:100%;border-radius:10px}.work-lightbox-inner img{max-height:72vh} } /* Smooth front-facing flip as each client reaches the center */ .client-carousel.is-flipping .client-card3d.center{animation:clientFlipIn .7s cubic-bezier(.2,.8,.2,1) both} @keyframes clientFlipIn{0%{opacity:.35;transform:translate(-50%,-50%) translateX(0) translateZ(20px) rotateY(90deg) scale(.82)}100%{opacity:1}} .client-card3d{backface-visibility:hidden;-webkit-backface-visibility:hidden} /* ===== LATEST USER FIXES ===== */ /* 360 Advertising Solutions: planet-like continuous orbit; keep center counter above every ring/card. */ .solutions-360 .orbit-layout{align-items:center} .solutions-360 .orbit-ring{overflow:visible!important;perspective:900px;isolation:isolate} .solutions-360 .orbit-ring:before{animation:spin 22s linear infinite} .solutions-360 .orbit-ring:after{animation:spinReverse 14s linear infinite} .solutions-360 .orbit-center{z-index:50!important;transform:none!important;pointer-events:none} .solutions-360 .orbit-center span,.solutions-360 .orbit-center small,.solutions-360 .orbit-center b{z-index:55!important;opacity:1!important;visibility:visible!important} .solutions-360 .orbit-card{z-index:30!important;will-change:transform;transition:background .3s,color .3s,box-shadow .3s!important} .solutions-360 .orbit-card.active{z-index:35!important} /* Showcase visual: perfectly centered in the right half, never stuck to the top. */ .solution-showcase .showcase-text-stage{display:flex!important;align-items:center!important;justify-content:center!important;height:560px!important;position:relative!important} .solution-showcase .showcase-visual{position:absolute!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;width:min(90%,700px)!important;height:min(78%,440px)!important;inset:auto!important;transform:translate(-50%,-50%)!important} .solution-showcase .showcase-visual img{object-position:center center!important} .solution-showcase .showcase-visual-copy{left:28px!important;bottom:24px!important} /* CTA: guarantee BOTH lines of the heading remain visible. */ .cta-inner.reveal{opacity:1!important;transform:none!important;visibility:visible!important} .cta-inner h2{overflow:visible!important;position:relative!important;z-index:3!important} .cta-inner h2 em{display:inline!important;visibility:visible!important;opacity:1!important;color:#fff!important} .cta-inner>div{position:relative;z-index:4} @media(max-width:1050px){ .solution-showcase .showcase-text-stage{height:470px!important} .solution-showcase .showcase-visual{width:min(92%,680px)!important;height:min(78%,360px)!important} } @media(max-width:760px){ .solution-showcase .showcase-text-stage{height:360px!important;margin-bottom:30px!important} .solution-showcase .showcase-visual{width:calc(100% - 24px)!important;height:250px!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important} .solution-showcase .showcase-visual-copy strong{font-size:38px!important} .solutions-360 .orbit-ring{width:min(390px,92vw)!important} } /* ===== SOLUTIONS V2 — premium split layout ===== */ .solution-showcase{position:relative;min-height:720px!important;background:#0f1215!important;color:#fff!important;overflow:hidden!important;padding:96px 0!important} .solution-showcase .showcase-orbit-bg{position:absolute;inset:-18% -8%;pointer-events:none;opacity:.55} .solution-showcase .showcase-orbit-bg span{position:absolute;border:1px solid #ffffff0d;border-radius:50%;left:52%;top:50%;transform:translate(-50%,-50%);animation:solutionOrbitSpin 26s linear infinite} .solution-showcase .showcase-orbit-bg span:nth-child(1){width:720px;height:720px}.solution-showcase .showcase-orbit-bg span:nth-child(2){width:520px;height:520px;border-style:dashed;animation-duration:18s;animation-direction:reverse}.solution-showcase .showcase-orbit-bg span:nth-child(3){width:330px;height:330px;border-color:#e51b2328;animation-duration:12s} .solution-showcase .showcase-grid.showcase-v2{position:relative;z-index:2;display:grid!important;grid-template-columns:minmax(330px,.78fr) minmax(520px,1.22fr)!important;gap:72px!important;align-items:center!important;min-height:520px!important} .solution-showcase .showcase-copy{padding:0!important;position:relative!important;z-index:5!important} .solution-showcase .showcase-kicker{font:800 10px Inter,sans-serif;letter-spacing:3px;color:#777d83;margin:16px 0 7px} .solution-showcase .showcase-copy h2{font:700 clamp(52px,5.2vw,76px)/.9 Oswald,Impact,sans-serif;letter-spacing:-1.5px;margin:0 0 20px!important} .solution-showcase .showcase-copy h2 em{display:inline-block;max-width:480px;transition:color .35s ease} .solution-showcase .showcase-copy>p{max-width:470px;color:#9ba0a5!important;font-size:14px;line-height:1.8;margin:0 0 34px!important} .solution-showcase .showcase-tabs{display:flex!important;flex-direction:column;gap:9px!important;max-width:390px} .solution-showcase .showcase-tabs .tab{width:100%;height:56px!important;display:grid!important;grid-template-columns:42px 1fr 24px!important;align-items:center!important;text-align:left!important;padding:0 15px!important;background:#ffffff05!important;color:#9da2a7!important;border:1px solid #ffffff12!important;border-radius:4px!important;cursor:pointer!important;transition:.35s!important} .solution-showcase .showcase-tabs .tab span{font:700 10px Oswald;color:#666c72}.solution-showcase .showcase-tabs .tab b{font-size:13px;letter-spacing:.2px}.solution-showcase .showcase-tabs .tab i{font-style:normal;opacity:0;transform:translateX(-5px);transition:.3s;text-align:right} .solution-showcase .showcase-tabs .tab:hover{border-color:#ffffff32!important;background:#ffffff0b!important;transform:translateX(5px)} .solution-showcase .showcase-tabs .tab.active{background:#e51b23!important;color:#fff!important;border-color:#e51b23!important;box-shadow:0 16px 45px #e51b2326;transform:translateX(12px)} .solution-showcase .showcase-tabs .tab.active span{color:#fff}.solution-showcase .showcase-tabs .tab.active i{opacity:1;transform:none} .solution-showcase .showcase-meta{display:flex;align-items:center;gap:16px;margin-top:32px;padding-top:18px;border-top:1px solid #ffffff14;max-width:390px;color:#777d82;font-size:9px;letter-spacing:2px;font-weight:800}.solution-showcase .showcase-meta strong{margin-left:auto;color:#fff;font:700 12px Oswald;letter-spacing:1px} .solution-showcase .showcase-visual-wrap{position:relative;height:520px;display:flex;align-items:center;justify-content:center;min-width:0} .solution-showcase .showcase-visual-v2{position:relative;width:min(100%,690px);height:430px;border:1px solid #ffffff1f;border-radius:18px;overflow:hidden;background:#080a0c;box-shadow:0 40px 100px #0009,0 0 70px #e51b2310;transform:perspective(1300px) rotateY(-3deg);transition:transform .6s ease,box-shadow .6s ease} .solution-showcase .showcase-visual-v2:hover{transform:perspective(1300px) rotateY(0) translateY(-5px);box-shadow:0 45px 110px #000b,0 0 90px #e51b2320} .solution-showcase .showcase-visual-v2 img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block;filter:brightness(.72) saturate(1.05);transition:opacity .45s ease,transform .8s ease!important} .solution-showcase .showcase-visual-v2 img.is-changing{animation:showcaseV2ImageIn .7s ease both} .solution-showcase .showcase-visual-v2:after{content:'';position:absolute;inset:0;border:1px solid #fff1;border-radius:18px;pointer-events:none;z-index:8} .solution-showcase .visual-topline{position:absolute;z-index:6;left:22px;right:22px;top:19px;display:flex;justify-content:space-between;font-size:9px;font-weight:900;letter-spacing:2px;color:#fff;opacity:.8}.solution-showcase .visual-live{display:flex;align-items:center;gap:7px}.solution-showcase .visual-live i{width:6px;height:6px;border-radius:50%;background:#e51b23;box-shadow:0 0 12px #e51b23;animation:livePulse 1.5s infinite} .solution-showcase .showcase-visual-v2 .showcase-visual-shade{position:absolute!important;inset:0!important;background:linear-gradient(180deg,#0009 0%,transparent 28%,transparent 45%,#000c 100%),linear-gradient(90deg,#0007,transparent 45%,#0003)!important;z-index:2!important} .solution-showcase .visual-caption{position:absolute;z-index:7;left:28px;bottom:28px;display:flex;flex-direction:column;align-items:flex-start}.solution-showcase .visual-caption small{font:800 9px Inter;letter-spacing:3px;color:#fff;margin-bottom:8px}.solution-showcase .visual-caption strong{font:700 clamp(34px,4vw,62px)/.9 Oswald;color:#fff;letter-spacing:-1px;text-shadow:0 8px 30px #000b;transition:color .35s ease} .solution-showcase .visual-corner{position:absolute;z-index:7;right:22px;bottom:22px;text-align:right;font:800 8px/1.4 Inter;letter-spacing:2px;color:#fff8} .solution-showcase .showcase-orbit-line{position:absolute;width:82%;height:100px;border:1px solid #e51b2330;border-radius:50%;bottom:-2px;left:9%;transform:rotate(-4deg);pointer-events:none;animation:orbitLineMove 7s ease-in-out infinite} .solution-showcase .showcase-next-card{position:absolute;right:-4px;bottom:24px;z-index:10;background:#15191d;border:1px solid #ffffff1c;border-radius:7px;padding:12px 14px;display:grid;grid-template-columns:auto auto;gap:4px 18px;box-shadow:0 20px 50px #0008}.solution-showcase .showcase-next-card span{grid-column:1/-1;color:#777;font-size:8px;font-weight:900;letter-spacing:2px}.solution-showcase .showcase-next-card b{font:700 13px Oswald}.solution-showcase .showcase-next-card i{font-style:normal;color:#e51b23;font-size:17px} @keyframes solutionOrbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes showcaseV2ImageIn{from{opacity:.2;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes orbitLineMove{0%,100%{transform:rotate(-4deg) scaleX(.96);opacity:.45}50%{transform:rotate(4deg) scaleX(1.03);opacity:1}}@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 #e51b2355}50%{opacity:.65;box-shadow:0 0 0 7px #e51b2300}} .solution-showcase.theme-digital .showcase-copy h2 em,.solution-showcase.theme-digital .visual-caption strong{color:#ff2832}.solution-showcase.theme-static .showcase-copy h2 em,.solution-showcase.theme-static .visual-caption strong{color:#fff}.solution-showcase.theme-transit .showcase-copy h2 em,.solution-showcase.theme-transit .visual-caption strong{color:#53bffb} @media(max-width:1050px){.solution-showcase{padding:76px 0!important}.solution-showcase .showcase-grid.showcase-v2{grid-template-columns:1fr!important;gap:40px!important}.solution-showcase .showcase-copy{max-width:680px}.solution-showcase .showcase-tabs{max-width:100%}.solution-showcase .showcase-visual-wrap{height:500px}.solution-showcase .showcase-visual-v2{width:min(100%,760px);height:430px}.solution-showcase .showcase-orbit-bg span{left:65%;}} @media(max-width:760px){.solution-showcase{padding:62px 0!important;min-height:auto!important}.solution-showcase .showcase-grid.showcase-v2{gap:30px!important}.solution-showcase .showcase-copy h2{font-size:53px!important}.solution-showcase .showcase-copy>p{font-size:13px}.solution-showcase .showcase-tabs .tab{height:52px!important}.solution-showcase .showcase-tabs .tab.active{transform:none}.solution-showcase .showcase-visual-wrap{height:330px}.solution-showcase .showcase-visual-v2{width:100%;height:285px;border-radius:12px;transform:none}.solution-showcase .visual-caption{left:18px;bottom:18px}.solution-showcase .visual-caption strong{font-size:36px}.solution-showcase .visual-topline{left:16px;right:16px;top:15px;font-size:8px}.solution-showcase .showcase-next-card{display:none}.solution-showcase .showcase-orbit-line{bottom:-4px;height:60px}.solution-showcase .showcase-meta{margin-top:22px}.solution-showcase .showcase-orbit-bg span{left:70%;width:400px!important;height:400px!important}} /* FINAL POLISH — NAV, SOLUTIONS THEMES & FOOTER */ .nav>a:not(.nav-cta){overflow:hidden;transition:color .25s ease,transform .25s ease;text-shadow:0 0 0 transparent} .nav>a:not(.nav-cta)::before{content:'';position:absolute;left:-120%;top:50%;width:70%;height:1px;background:linear-gradient(90deg,transparent,var(--red),transparent);transform:translateY(-50%) rotate(-12deg);transition:left .45s ease;opacity:.9} .nav>a:not(.nav-cta)::after{height:2px!important;box-shadow:0 0 12px #e51b23;transition:width .3s ease!important} .nav>a:not(.nav-cta):hover{color:var(--red);transform:translateY(-2px);text-shadow:0 0 14px #e51b2340} .nav>a:not(.nav-cta):hover::before{left:145%} .nav-cta{position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease!important} .nav-cta::before{content:'';position:absolute;inset:-20%;background:linear-gradient(110deg,transparent 35%,#ffffff55 50%,transparent 65%);transform:translateX(-120%) skewX(-18deg);transition:transform .55s ease} .nav-cta:hover{transform:translateY(-3px) scale(1.025)!important;box-shadow:0 0 0 1px #ff3a42,0 12px 35px #e51b2355!important} .nav-cta:hover::before{transform:translateX(120%) skewX(-18deg)} .nav-toggle span{transition:transform .3s ease,opacity .3s ease,background .3s ease}.nav-toggle:hover span{background:var(--red);box-shadow:0 0 8px #e51b23} /* Solution option colors change with the selected format. */ .solution-showcase.theme-digital .showcase-tabs .tab.active{background:linear-gradient(135deg,#ff2933,#bd1018)!important;border-color:#ff2933!important;box-shadow:0 0 0 1px #ff293355,0 15px 45px #e51b2340!important} .solution-showcase.theme-static .showcase-tabs .tab.active{background:linear-gradient(135deg,#f2f3f4,#b9bdc2)!important;border-color:#fff!important;color:#111!important;box-shadow:0 0 0 1px #ffffff44,0 15px 45px #ffffff1f!important} .solution-showcase.theme-static .showcase-tabs .tab.active span,.solution-showcase.theme-static .showcase-tabs .tab.active i{color:#111!important} .solution-showcase.theme-transit .showcase-tabs .tab.active{background:linear-gradient(135deg,#38bdf8,#1674a5)!important;border-color:#53bffb!important;box-shadow:0 0 0 1px #53bffb55,0 15px 45px #1687b840!important} .solution-showcase.theme-digital .showcase-tabs .tab:hover{background:#e51b231c!important;border-color:#e51b2366!important} .solution-showcase.theme-static .showcase-tabs .tab:hover{background:#ffffff16!important;border-color:#ffffff44!important} .solution-showcase.theme-transit .showcase-tabs .tab:hover{background:#53bffb16!important;border-color:#53bffb55!important} .solution-showcase .showcase-tabs .tab{position:relative;overflow:hidden} .solution-showcase .showcase-tabs .tab::after{content:'';position:absolute;top:-30%;left:-80%;width:45%;height:160%;background:linear-gradient(90deg,transparent,#ffffff35,transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none} .solution-showcase .showcase-tabs .tab:hover::after{left:140%} /* Footer premium cleanup */ .footer{position:relative;overflow:hidden;background:#090b0e!important;color:#fff!important} .footer::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 78% 20%,#e51b2312,transparent 28%),linear-gradient(120deg,transparent 0 70%,#ffffff03 70% 70.2%,transparent 70.4%);pointer-events:none} .footer-top,.footer-mid,.footer-bottom{position:relative;z-index:1} .footer-top{padding-top:58px!important;padding-bottom:42px!important;display:grid!important;grid-template-columns:1.15fr 1.5fr 1fr!important;gap:44px!important;align-items:center!important} .footer-top .site-logo img{width:205px;filter:brightness(1.08)} .footer-top nav{display:flex;flex-wrap:wrap;gap:10px 24px!important;align-items:center} .footer-top nav a{font-size:11px;font-weight:800;letter-spacing:.5px;color:#aeb3b8;position:relative;padding-bottom:6px;transition:color .25s ease,transform .25s ease} .footer-top nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);box-shadow:0 0 9px #e51b23;transition:width .28s ease} .footer-top nav a:hover{color:#fff;transform:translateY(-2px)}.footer-top nav a:hover::after{width:100%} .footer .legacy{justify-self:end;text-align:right;max-width:230px}.footer .legacy small{display:block;color:#666c72;font-size:9px;line-height:1.5;letter-spacing:.5px;margin-bottom:10px}.footer .legacy img{width:125px;max-height:48px;object-fit:contain;filter:grayscale(1) brightness(1.8);opacity:.72;transition:.3s}.footer .legacy:hover img{filter:grayscale(0) brightness(1);opacity:1} .footer-mid{border-top:1px solid #ffffff10;border-bottom:1px solid #ffffff10;background:#0d1013cc} .contact-row{display:grid!important;grid-template-columns:1fr 1fr 1.45fr auto!important;gap:28px!important;align-items:center!important;padding:28px 0!important} .contact-row>div{min-width:0}.contact-row span{display:block;color:#5f666d;font-size:9px;font-weight:900;letter-spacing:2px;margin-bottom:8px}.contact-row a:not(.footer-campaign),.contact-row p{font-size:13px;line-height:1.55;color:#d8dadd;margin:0;transition:color .25s ease}.contact-row a:not(.footer-campaign):hover{color:var(--red)} .footer-campaign{display:inline-flex;align-items:center;gap:18px;padding:14px 18px;border:1px solid #e51b2380;color:#fff;font-size:10px;font-weight:900;letter-spacing:1px;white-space:nowrap;transition:.3s ease;position:relative;overflow:hidden}.footer-campaign::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent,#e51b2328,transparent);transform:translateX(-120%);transition:.5s}.footer-campaign:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px);box-shadow:0 12px 30px #e51b2338}.footer-campaign:hover::before{transform:translateX(120%)} .footer-bottom{background:#06080a}.footer-bottom .container{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#646b71;font-size:9px;letter-spacing:.3px}.footer-bottom strong{color:#bfc4c8}.social-text{display:flex;align-items:center;gap:9px}.social-text b{width:25px;height:25px;border:1px solid #ffffff18;border-radius:50%;display:grid;place-items:center;color:#aeb3b8;font-size:11px;transition:.25s}.social-text b:hover{color:#fff;border-color:var(--red);background:#e51b2318;box-shadow:0 0 14px #e51b2330;transform:translateY(-2px)} @media(max-width:900px){.footer-top{grid-template-columns:1fr!important;gap:28px!important}.footer .legacy{justify-self:start;text-align:left}.contact-row{grid-template-columns:1fr 1fr!important}.footer-campaign{justify-self:start}.footer-bottom .container{flex-wrap:wrap;padding:16px 0}} @media(max-width:600px){.footer-top{padding-top:42px!important;padding-bottom:30px!important}.footer-top nav{gap:12px 18px!important}.contact-row{grid-template-columns:1fr!important;gap:20px!important}.footer-bottom .container{flex-direction:column;align-items:flex-start;gap:12px}.nav>a:not(.nav-cta){transform:none}.nav>a:not(.nav-cta):hover{transform:translateX(5px)} } /* FINAL USER REQUEST — keep existing design, only refine nav + footer */ .nav{font-size:16px!important;gap:29px!important} .nav>a{font-size:16px!important;letter-spacing:.25px!important} .nav>a:not(.nav-cta){transition:color .22s ease, text-shadow .22s ease!important} .nav>a:not(.nav-cta)::before{content:'';position:absolute;left:50%;bottom:5px;top:auto;width:0;height:2px;background:var(--red);box-shadow:0 0 8px #e51b23;transform:translateX(-50%) rotate(-8deg);opacity:0;transition:width .28s ease,opacity .22s ease} .nav>a:not(.nav-cta)::after{bottom:0!important;height:2px!important;width:0!important;box-shadow:none!important;transition:width .28s ease!important} .nav>a:not(.nav-cta):hover{color:var(--red)!important;transform:none!important;text-shadow:0 0 10px #e51b2330!important} .nav>a:not(.nav-cta):hover::before{left:50%;width:70%;opacity:1} .nav>a:not(.nav-cta):hover::after,.nav>a.active:not(.nav-cta)::after{width:100%!important} .nav-cta{font-size:15px!important;border-radius:5px!important} /* Compact white footer — preserve the existing footer structure */ .footer{background:#fff!important;color:#15171a!important} .footer::before{background:linear-gradient(120deg,transparent 0 70%,#e51b2307 70% 70.2%,transparent 70.4%)!important} .footer-top{padding-top:38px!important;padding-bottom:28px!important} .footer-top .site-logo img{filter:none!important} .footer-top nav a{color:#555b61!important;font-size:11px!important} .footer-top nav a:hover{color:var(--red)!important} .footer .legacy small{color:#8b9095!important} .footer .legacy img{filter:none!important;opacity:.85!important} .footer-mid{border-top:1px solid #e9e9e9!important;border-bottom:1px solid #e9e9e9!important;background:#fafafa!important} .contact-row{padding:21px 0!important} .contact-row span{color:#8b9095!important} .contact-row a:not(.footer-campaign),.contact-row p{color:#4e545a!important} .contact-row a:not(.footer-campaign):hover{color:var(--red)!important} .footer-campaign{color:#16181b!important;border-color:#e51b2380!important;border-radius:5px!important} .footer-campaign:hover{color:#fff!important;background:var(--red)!important} .footer-bottom{background:#fff!important;border-top:1px solid #ededed!important} .footer-bottom .container{min-height:48px!important;color:#858a8f!important} .footer-bottom strong{color:#4e545a!important} .social-text b{border-color:#dedede!important;color:#666c72!important} .social-text b:hover{color:var(--red)!important;border-color:var(--red)!important;background:#e51b230d!important} @media(max-width:900px){.nav{font-size:15px!important}.nav>a{font-size:15px!important}.footer-top{padding-top:30px!important;padding-bottom:24px!important}} @media(max-width:600px){.nav>a{font-size:15px!important}.nav-cta{font-size:14px!important}} /* FINAL VISUAL REFINEMENT — preserve the approved page, refine only navigation, footer and button interactions */ .header .nav{font-size:17px!important;gap:28px!important} .header .nav>a{font-size:17px!important;letter-spacing:.25px!important} .header .nav>a:not(.nav-cta){position:relative;overflow:hidden;color:#30343a;transition:color .25s ease,text-shadow .25s ease,transform .25s ease!important} .header .nav>a:not(.nav-cta)::before{content:"";position:absolute;left:-125%;top:50%;width:82%;height:2px;background:linear-gradient(90deg,transparent,#e51b23,#fff,#e51b23,transparent);transform:translateY(-50%) rotate(-10deg);opacity:0;transition:left .5s cubic-bezier(.2,.75,0,1),opacity .2s ease;pointer-events:none} .header .nav>a:not(.nav-cta)::after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;background:var(--red);box-shadow:0 0 10px #e51b23;transform:translateX(-50%) skewX(-22deg);transition:width .32s cubic-bezier(.2,.75,0,1)!important} .header .nav>a:not(.nav-cta):hover{color:var(--red)!important;text-shadow:0 0 12px #e51b2338!important;transform:translateY(-2px)!important} .header .nav>a:not(.nav-cta):hover::before{left:125%;opacity:1} .header .nav>a:not(.nav-cta):hover::after,.header .nav>a.active:not(.nav-cta)::after{width:72%!important} .header .nav-cta{border-radius:7px!important;position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,background .28s ease!important} .header .nav-cta:hover{transform:translateY(-3px)!important;box-shadow:0 0 0 1px #ff3b43,0 12px 30px #e51b2350!important} /* Compact white footer: navigation/contact remain in the top row; contact details strip is intentionally removed. */ .footer{background:#fff!important;color:#17191c!important;border-top:1px solid #ececec;position:relative;overflow:hidden} .footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 0 69%,#e51b2308 69.2%,transparent 69.6%),radial-gradient(circle at 78% 25%,#e51b2307,transparent 25%)} .footer-top{position:relative;z-index:1;min-height:118px!important;padding:24px 0 20px!important;display:grid!important;grid-template-columns:205px minmax(0,1fr) 205px!important;gap:28px!important;align-items:center!important} .footer-top .site-logo img{width:175px!important;max-height:48px!important;filter:none!important} .footer-top nav{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;gap:22px!important} .footer-top nav a{font-size:14px!important;font-weight:800!important;color:#4e545a!important;white-space:nowrap;position:relative;padding:8px 0!important;transition:color .25s ease,transform .25s ease!important} .footer-top nav a::after{content:"";position:absolute;left:50%;bottom:2px;width:0;height:2px;background:var(--red);box-shadow:0 0 9px #e51b23;transform:translateX(-50%) skewX(-20deg);transition:width .28s ease} .footer-top nav a::before{content:"";position:absolute;left:-90%;top:50%;width:65%;height:1px;background:linear-gradient(90deg,transparent,#e51b23,#fff,transparent);transform:rotate(-9deg);opacity:0;transition:left .45s ease,opacity .2s ease} .footer-top nav a:hover{color:var(--red)!important;transform:translateY(-2px)!important} .footer-top nav a:hover::after{width:85%} .footer-top nav a:hover::before{left:125%;opacity:1} .footer .legacy{justify-self:end;text-align:right;max-width:205px!important} .footer .legacy small{font-size:9px!important;line-height:1.4!important;color:#8a9095!important;margin-bottom:6px!important} .footer .legacy img{width:135px!important;max-height:42px!important;filter:none!important;opacity:.9!important} .footer-bottom{position:relative;z-index:1;background:#fff!important;border-top:1px solid #ececec!important} .footer-bottom .container{min-height:58px!important;display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:24px!important;color:#777e84!important;font-size:13px!important;letter-spacing:.1px!important} .footer-bottom .container>span:last-child{text-align:right} .footer-bottom strong{color:#444a50!important} .social-text{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;font-size:13px!important;color:#626970!important;white-space:nowrap} .social-text b{width:34px!important;height:34px!important;border-radius:50%!important;background:#151719!important;color:#fff!important;border:1px solid #2c3034!important;display:grid!important;place-items:center!important;font-size:14px!important;transition:transform .28s ease,box-shadow .28s ease,color .28s ease,border-color .28s ease!important} .social-text b:hover{color:#fff!important;border-color:var(--red)!important;background:var(--red)!important;transform:translateY(-4px) scale(1.08)!important;box-shadow:0 8px 20px #e51b2345,0 0 0 4px #e51b2310!important} /* Consistent subtle gaming-style hover for interactive controls, without changing their normal appearance. */ .btn,.small-btn,.outline-btn,.footer-campaign,.service-next,.work-scroll-arrow,.client-arrow,.tab,.story-button{border-radius:7px!important;position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background-color .28s ease,color .28s ease!important} .btn::after,.small-btn::after,.outline-btn::after,.footer-campaign::after,.service-next::after,.work-scroll-arrow::after,.client-arrow::after,.tab::after,.story-button::after{content:"";position:absolute;top:-40%;left:-85%;width:38%;height:180%;background:linear-gradient(90deg,transparent,#ffffff60,transparent);transform:skewX(-20deg);opacity:0;pointer-events:none;transition:left .55s cubic-bezier(.2,.75,0,1),opacity .2s ease} .btn:hover,.small-btn:hover,.outline-btn:hover,.footer-campaign:hover,.service-next:hover,.work-scroll-arrow:hover,.client-arrow:hover,.tab:hover,.story-button:hover{transform:translateY(-3px)!important;box-shadow:0 10px 26px #0000001b,0 0 0 1px #e51b2315!important} .btn:hover::after,.small-btn:hover::after,.outline-btn:hover::after,.footer-campaign:hover::after,.service-next:hover::after,.work-scroll-arrow:hover::after,.client-arrow:hover::after,.tab:hover::after,.story-button:hover::after{left:145%;opacity:1} .work-scroll-arrow,.client-arrow{border-radius:50%!important} @media(max-width:1050px){ .header .nav{gap:18px!important}.header .nav>a{font-size:16px!important} .footer-top{grid-template-columns:170px minmax(0,1fr) 170px!important;gap:18px!important}.footer-top nav{gap:15px!important}.footer-top nav a{font-size:13px!important} } @media(max-width:760px){ .footer-top{grid-template-columns:1fr!important;text-align:center;min-height:0!important;padding:28px 0 20px!important;gap:16px!important}.footer-top .site-logo{justify-self:center}.footer-top nav{flex-wrap:wrap!important;gap:7px 18px!important}.footer-top nav a{font-size:13px!important}.footer .legacy{justify-self:center!important;text-align:center!important}.footer-bottom .container{grid-template-columns:1fr!important;justify-items:center!important;text-align:center!important;gap:12px!important;padding:14px 0!important}.footer-bottom .container>span:last-child{text-align:center!important}.social-text{flex-wrap:wrap!important} } @media(max-width:520px){.header .nav>a{font-size:15px!important}.social-text b{width:32px!important;height:32px!important}.footer-top nav{gap:6px 14px!important}} /* REFINED INTERACTION LAYER — preserve existing design, unify nav/buttons */ .nav{font-size:16px!important;gap:30px!important;letter-spacing:.1px} .nav>a:not(.nav-cta){padding:28px 3px!important;transition:color .28s ease,transform .28s ease,text-shadow .28s ease!important} .nav>a:not(.nav-cta)::after{height:2px!important;bottom:18px!important;width:0!important;background:linear-gradient(90deg,transparent 0%,#e51b23 22%,#ff5a60 50%,#e51b23 78%,transparent 100%)!important;box-shadow:0 0 10px #e51b23,0 0 22px #e51b2348!important} .nav>a:not(.nav-cta)::before{content:''!important;position:absolute!important;left:50%!important;top:50%!important;width:0!important;height:0!important;border:1px solid transparent!important;transform:translate(-50%,-50%) rotate(45deg)!important;opacity:0!important;transition:width .35s ease,height .35s ease,opacity .25s ease,border-color .25s ease!important;background:transparent!important} .nav>a:not(.nav-cta):hover,.nav>a:not(.nav-cta):focus-visible{color:#e51b23!important;transform:translateY(-2px)!important;text-shadow:0 0 12px #e51b2338!important} .nav>a:not(.nav-cta):hover::after,.nav>a:not(.nav-cta):focus-visible::after{width:100%!important} .nav>a:not(.nav-cta):hover::before,.nav>a:not(.nav-cta):focus-visible::before{width:calc(100% - 8px)!important;height:calc(100% - 24px)!important;opacity:.22!important;border-color:#e51b2366!important} .nav>a.active{color:#e51b23!important} .nav>a.active::after{width:100%!important} .nav-cta{border-radius:6px!important;padding:13px 20px!important} /* Same premium sweep interaction across every actionable button */ .btn,.small-btn,.outline-btn,.story-button,.service-next,.work-scroll-arrow,.client-arrow,.tab,.nav-cta{position:relative;overflow:hidden;isolation:isolate;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease,background .28s ease,color .28s ease!important} .btn::before,.small-btn::before,.outline-btn::before,.story-button::after,.service-next::before,.work-scroll-arrow::before,.client-arrow::before,.tab::after,.nav-cta::before{content:'';position:absolute;z-index:-1;top:-40%;left:-85%;width:48%;height:180%;background:linear-gradient(105deg,transparent 10%,rgba(255,255,255,.06) 38%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.06) 62%,transparent 90%);transform:skewX(-18deg);transition:left .65s cubic-bezier(.2,.7,0,1);pointer-events:none} .btn:hover::before,.small-btn:hover::before,.outline-btn:hover::before,.story-button:hover::after,.service-next:hover::before,.work-scroll-arrow:hover::before,.client-arrow:hover::before,.tab:hover::after,.nav-cta:hover::before{left:145%} .btn:hover,.small-btn:hover,.outline-btn:hover,.story-button:hover,.service-next:hover,.work-scroll-arrow:hover,.client-arrow:hover,.tab:hover{transform:translateY(-3px)!important} .btn.red:hover,.small-btn:hover,.nav-cta:hover{box-shadow:0 0 0 1px #ff4148,0 10px 32px #e51b2345,0 0 22px #e51b2328!important} .btn.white:hover,.outline-btn:hover{box-shadow:0 0 0 1px #e51b2366,0 10px 30px #0002,0 0 22px #e51b2317!important} .story-button:hover{border-color:#e51b2388!important;box-shadow:0 0 0 1px #e51b2326,0 12px 32px #0004!important} .service-next:hover{color:#e51b23!important;text-shadow:0 0 10px #e51b2340} .work-scroll-arrow:hover,.client-arrow:hover{box-shadow:0 0 0 1px #e51b2366,0 0 25px #e51b2335!important} .btn:active,.small-btn:active,.outline-btn:active,.story-button:active,.work-scroll-arrow:active,.client-arrow:active,.tab:active,.nav-cta:active{transform:translateY(0) scale(.97)!important} @media(max-width:900px){.nav{font-size:15px!important;gap:18px!important}.nav>a:not(.nav-cta){padding:25px 2px!important}.nav>a:not(.nav-cta)::after{bottom:14px!important}} @media(max-width:760px){.nav{font-size:15px!important}.nav>a:not(.nav-cta)::before{display:none!important}.nav>a:not(.nav-cta)::after{bottom:10px!important}} /* NAV HOVER — LIGHT-SWEEP UNDERLINE + ATTRACTIVE CROSS/DIAMOND ACCENT */ .header .nav>a:not(.nav-cta){ position:relative; overflow:hidden; padding:9px 5px 13px!important; color:#30343a!important; transition:color .28s ease,text-shadow .28s ease,transform .28s ease,background .28s ease!important; } .header .nav>a:not(.nav-cta)::before{ content:""; position:absolute; left:-55%; bottom:7px; width:38%; height:3px; border-radius:999px; background:linear-gradient(90deg,transparent,#fff 28%,#ff3038 58%,transparent); filter:blur(.15px); opacity:0; transform:skewX(-28deg); pointer-events:none; transition:left .62s cubic-bezier(.16,1,.3,1),opacity .16s ease; z-index:2; } .header .nav>a:not(.nav-cta)::after{ content:""; position:absolute; left:50%; bottom:5px; width:0; height:3px; border-radius:999px; background:linear-gradient(90deg,transparent,#ff252d 14%,#fff 50%,#ff252d 86%,transparent); box-shadow:0 0 6px #e51b23,0 0 15px #e51b2366; transform:translateX(-50%) skewX(-22deg); transition:width .38s cubic-bezier(.16,1,.3,1),box-shadow .3s ease; z-index:1; } .header .nav>a:not(.nav-cta):hover{ color:#e51b23!important; text-shadow:0 0 11px #e51b233d; transform:translateY(-2px)!important; background: linear-gradient(45deg,transparent 46%,#e51b231c 47%,#e51b231c 53%,transparent 54%) center 100%/11px 11px no-repeat, linear-gradient(-45deg,transparent 46%,#e51b231c 47%,#e51b231c 53%,transparent 54%) center 100%/11px 11px no-repeat; } .header .nav>a:not(.nav-cta):hover::before{left:120%;opacity:1} .header .nav>a:not(.nav-cta):hover::after{width:82%} .header .nav>a.active:not(.nav-cta)::after{width:58%} .header .nav>a.active:not(.nav-cta){color:#24272b!important} @media(max-width:900px){ .header .nav>a:not(.nav-cta){padding:10px 4px 13px!important} } /* FINAL NAV FIX — thin text + complete underline + moving light + cross accent */ .header .nav>a:not(.nav-cta){ font-weight:500!important; overflow:visible!important; padding:10px 5px 17px!important; color:#30343a!important; text-shadow:none!important; } .header .nav>a:not(.nav-cta)::after{ left:0!important; bottom:7px!important; width:0!important; height:2px!important; border-radius:999px!important; transform:none!important; background:linear-gradient(90deg,#e51b23 0%,#ff4148 48%,#e51b23 100%)!important; box-shadow:0 0 5px #e51b2355,0 0 12px #e51b231f!important; transition:width .35s cubic-bezier(.2,.8,.2,1)!important; } .header .nav>a:not(.nav-cta)::before{ left:-35%!important; top:auto!important; bottom:6px!important; width:24%!important; height:4px!important; border:0!important; border-radius:999px!important; background:linear-gradient(90deg,transparent,#fff 35%,#ffd7d9 52%,#fff 68%,transparent)!important; box-shadow:0 0 7px #fff,0 0 13px #e51b23,0 0 20px #e51b2355!important; transform:skewX(-20deg)!important; opacity:0!important; transition:left .7s cubic-bezier(.16,1,.3,1),opacity .18s ease!important; z-index:3!important; } .header .nav>a:not(.nav-cta):hover, .header .nav>a:not(.nav-cta):focus-visible{ color:#e51b23!important; font-weight:500!important; transform:translateY(-1px)!important; text-shadow:0 0 8px #e51b2326!important; background: linear-gradient(45deg,transparent 44%,#e51b2340 46%,#e51b2340 54%,transparent 56%) right 3px bottom 3px/9px 9px no-repeat, linear-gradient(-45deg,transparent 44%,#e51b2340 46%,#e51b2340 54%,transparent 56%) right 3px bottom 3px/9px 9px no-repeat!important; } .header .nav>a:not(.nav-cta):hover::after, .header .nav>a:not(.nav-cta):focus-visible::after{ width:100%!important; } .header .nav>a:not(.nav-cta):hover::before, .header .nav>a:not(.nav-cta):focus-visible::before{ left:112%!important; opacity:1!important; } .header .nav>a.active:not(.nav-cta)::after{width:100%!important} .header .nav>a.active:not(.nav-cta){font-weight:500!important;color:#30343a!important} @media(max-width:900px){ .header .nav>a:not(.nav-cta){font-weight:500!important;padding:10px 4px 15px!important} } @media(max-width:760px){ .header .nav>a:not(.nav-cta)::before{display:block!important} } /* NAV FINAL MICRO REFINEMENT — smaller, lighter and subtly transparent on scroll */ .header .nav{font-size:15px!important;gap:28px!important} .header .nav>a:not(.nav-cta){font-size:15px!important;font-weight:600!important;color:rgba(48,52,58,.78)!important;transition:color .28s ease,opacity .28s ease,transform .28s ease,text-shadow .28s ease!important} .header.scrolled .nav>a:not(.nav-cta){color:rgba(48,52,58,.58)!important;opacity:.82} .header.scrolled .nav>a:not(.nav-cta):hover,.header.scrolled .nav>a:not(.nav-cta):focus-visible{color:var(--red)!important;opacity:1} .header .nav-cta{font-size:14px!important} @media(max-width:900px){.header .nav>a:not(.nav-cta){font-size:12.5px!important}} @media(max-width:600px){.header .nav>a:not(.nav-cta){font-size:14px!important}} /* NAV FINAL TRANSPARENT MODE + RESPONSIVE POLISH */ .header{ background:rgba(255,255,255,.78)!important; backdrop-filter:blur(14px) saturate(125%); -webkit-backdrop-filter:blur(14px) saturate(125%); } .header.scrolled{ background:rgba(255,255,255,.68)!important; box-shadow:0 12px 30px rgba(0,0,0,.07)!important; } .header .nav{font-size:14px!important;gap:26px!important;align-items:center} .header .nav>a:not(.nav-cta){ font-size:14px!important; font-weight:500!important; letter-spacing:.2px; color:rgba(35,39,43,.46)!important; opacity:.72; padding:10px 4px 17px!important; transform:none!important; text-shadow:none!important; transition:color .3s ease,opacity .3s ease,transform .3s ease,text-shadow .3s ease!important; } .header .nav>a:not(.nav-cta)::after{ bottom:6px!important; left:0!important; width:0!important; height:2px!important; border-radius:999px!important; background:linear-gradient(90deg,transparent 0%,#e51b23 18%,#ff6670 50%,#e51b23 82%,transparent 100%)!important; box-shadow:0 0 5px rgba(229,27,35,.42),0 0 13px rgba(229,27,35,.18)!important; transform:none!important; transition:width .38s cubic-bezier(.2,.8,.2,1)!important; } .header .nav>a:not(.nav-cta)::before{ left:-30%!important; bottom:5px!important; width:22%!important; height:3px!important; border-radius:999px!important; background:linear-gradient(90deg,transparent,#fff 35%,#ffe9ea 52%,#fff 68%,transparent)!important; box-shadow:0 0 7px rgba(255,255,255,.95),0 0 14px rgba(229,27,35,.55)!important; opacity:0!important; transform:skewX(-20deg)!important; transition:left .68s cubic-bezier(.16,1,.3,1),opacity .16s ease!important; } .header .nav>a:not(.nav-cta):hover, .header .nav>a:not(.nav-cta):focus-visible{ color:#e51b23!important; opacity:1!important; transform:translateY(-1px)!important; text-shadow:0 0 9px rgba(229,27,35,.2)!important; } .header .nav>a:not(.nav-cta):hover::after, .header .nav>a:not(.nav-cta):focus-visible::after{width:100%!important} .header .nav>a:not(.nav-cta):hover::before, .header .nav>a:not(.nav-cta):focus-visible::before{left:112%!important;opacity:1!important} .header .nav>a.active:not(.nav-cta){color:rgba(35,39,43,.46)!important;font-weight:500!important} .header .nav>a.active:not(.nav-cta)::after{width:0!important} .header .nav-cta{font-size:13px!important;font-weight:700!important} /* Tablet */ @media (min-width:761px) and (max-width:1100px){ .container{width:min(calc(100% - 40px),var(--max))} .header{height:76px} .site-logo img{width:160px} .header .nav{gap:15px!important} .header .nav>a:not(.nav-cta){font-size:13px!important;padding-left:2px!important;padding-right:2px!important} .header .nav-cta{padding:11px 14px!important} } /* Mobile */ @media (max-width:760px){ .header{height:68px!important} .site-logo img{width:145px!important} .nav-toggle{width:42px;height:42px;border-radius:10px;transition:background .25s ease,box-shadow .25s ease} .nav-toggle:hover{background:rgba(229,27,35,.06);box-shadow:0 0 0 1px rgba(229,27,35,.12),0 6px 18px rgba(229,27,35,.08)} .nav{top:68px!important;left:12px!important;right:12px!important;padding:8px!important;border-radius:12px!important;background:rgba(255,255,255,.92)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important} .header .nav>a:not(.nav-cta){font-size:14px!important;color:rgba(35,39,43,.48)!important;opacity:.78;padding:12px 12px 14px!important} .header .nav>a:not(.nav-cta)::after{left:12px!important;bottom:7px!important;width:0!important} .header .nav>a:not(.nav-cta)::before{left:-25%!important;bottom:6px!important} .header .nav>a:not(.nav-cta):hover,.header .nav>a:not(.nav-cta):focus-visible{color:#e51b23!important;opacity:1!important;transform:translateX(4px)!important} .header .nav>a:not(.nav-cta):hover::after,.header .nav>a:not(.nav-cta):focus-visible::after{width:calc(100% - 24px)!important} .header .nav>a.active:not(.nav-cta){color:rgba(35,39,43,.48)!important} } @media (max-width:420px){ .site-logo img{width:132px!important} .nav{left:10px!important;right:10px!important} .header .nav>a:not(.nav-cta){font-size:11.5px!important} } /* USER FINAL NAV REQUEST — transparent header box, solid black text */ .header{ background:transparent!important; border-bottom:1px solid rgba(0,0,0,.08)!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .header.scrolled{ background:rgba(255,255,255,.58)!important; border-bottom-color:rgba(0,0,0,.10)!important; box-shadow:0 10px 30px rgba(0,0,0,.07)!important; backdrop-filter:blur(16px) saturate(130%)!important; -webkit-backdrop-filter:blur(16px) saturate(130%)!important; } .header .nav>a:not(.nav-cta){ color:#111318!important; opacity:1!important; font-weight:500!important; text-shadow:none!important; } .header .nav>a:not(.nav-cta):hover, .header .nav>a:not(.nav-cta):focus-visible{ color:var(--red)!important; opacity:1!important; } .header .nav>a.active:not(.nav-cta){ color:#111318!important; font-weight:500!important; } @media(max-width:760px){ .header{background:transparent!important} .header.scrolled{background:rgba(255,255,255,.62)!important} .header .nav{background:rgba(255,255,255,.94)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important} .header .nav>a:not(.nav-cta){color:#111318!important;opacity:1!important;font-weight:500!important} } /* FINAL USER PASS — transparent hero nav, centered solution rail, richer clients/network/experience */ .header{position:absolute!important;top:0;left:0;width:100%;height:82px!important;background:transparent!important;border-bottom:1px solid rgba(255,255,255,.10)!important;box-shadow:none!important;z-index:100} .header .nav>a:not(.nav-cta){color:rgba(255,255,255,.82)!important;font-weight:500!important} .header .nav>a.active:not(.nav-cta){color:#fff!important} .header .site-logo img{filter:brightness(0) invert(1);transition:filter .3s ease} .header.scrolled{position:fixed!important;background:rgba(7,9,12,.35)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;border-bottom-color:rgba(255,255,255,.12)!important} .header.scrolled .site-logo img{filter:none} .header.scrolled .nav>a:not(.nav-cta){color:rgba(255,255,255,.78)!important} .header .nav>a:not(.nav-cta)::after{bottom:6px!important;height:1.5px!important} .header .nav>a:not(.nav-cta)::before{border-color:rgba(229,27,35,.45)!important} .hero{padding-top:0!important} .hero-inner h1{font-size:clamp(38px,4.2vw,63px)!important;letter-spacing:-.7px!important;max-width:570px!important} /* 360 media rail: centered starting point, readable, continuous orbital motion remains */ .solutions-360 .slide-type{justify-content:center!important;align-items:center!important;gap:clamp(28px,5vw,70px)!important;overflow:hidden!important} .solutions-360 .slide-type span{animation:slideTypeFloat 7s ease-in-out infinite alternate!important;font-size:clamp(25px,2.7vw,38px)!important} .solutions-360 .slide-type span:nth-child(2){animation-delay:-1s!important}.solutions-360 .slide-type span:nth-child(3){animation-delay:-2s!important}.solutions-360 .slide-type span:nth-child(4){animation-delay:-3s!important}.solutions-360 .slide-type span:nth-child(5){animation-delay:-4s!important} @keyframes slideTypeFloat{from{transform:translateY(0);opacity:.55}to{transform:translateY(-5px);opacity:1}} /* Network: use the previously empty right half for a visual card */ .network{height:auto!important;min-height:560px!important;background:#090b0e!important} .network:after{display:none!important} .network-inner{display:grid!important;grid-template-columns:minmax(0,48%) minmax(360px,52%)!important;gap:48px!important;align-items:center!important;padding:78px 0!important} .network-copy{position:relative;z-index:4!important;padding-right:18px} .network-photo-wrap{position:relative;min-height:390px;border:1px solid rgba(255,255,255,.14);background:#111;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)} .network-photo-wrap:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(229,27,35,.16),transparent 38%,rgba(0,0,0,.05));z-index:1;pointer-events:none} .network-photo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;background:none!important;filter:brightness(.82) saturate(.95)!important;transition:transform .9s cubic-bezier(.2,.7,0,1),filter .5s ease!important} .network-photo-wrap:hover .network-photo{transform:scale(1.045);filter:brightness(.92) saturate(1.05)!important} .network-photo-label{position:absolute;left:22px;bottom:20px;z-index:3;color:#fff;font:700 10px Inter;letter-spacing:2px;padding:9px 12px;border:1px solid rgba(255,255,255,.22);background:rgba(7,9,12,.52);backdrop-filter:blur(10px)} .network-photo-label b{color:var(--red);margin-left:8px} /* Clients: stack the stats and remove arrow/dot navigation */ .client-nav{display:none!important}.client-drag-hint{display:flex;align-items:center;gap:10px;margin-top:30px;color:#888;font:700 9px Inter;letter-spacing:1.8px}.client-drag-hint i{font-style:normal;color:var(--red);font-size:18px;animation:dragHint 1.6s ease-in-out infinite} @keyframes dragHint{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}} .client-stats{display:grid!important;grid-template-columns:repeat(2,minmax(130px,1fr))!important;gap:10px!important;margin-top:28px!important;padding-top:0!important;border-top:0!important;max-width:330px} .client-stats div{position:relative;min-height:76px;padding:14px 16px!important;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px rgba(255,255,255,.05),0 16px 30px rgba(0,0,0,.18);overflow:hidden;transition:transform .35s ease,border-color .35s ease,background .35s ease} .client-stats div:after{content:"";position:absolute;left:-40%;top:-50%;width:45%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);transition:left .65s ease}.client-stats div:hover{transform:translateY(-4px);border-color:rgba(229,27,35,.55);background:linear-gradient(145deg,rgba(229,27,35,.13),rgba(255,255,255,.03))}.client-stats div:hover:after{left:125%} .client-stats strong{font-size:28px!important}.client-stats span{font-size:10px!important;color:#c5c8cb!important} .client-stage{cursor:grab!important;touch-action:pan-y!important}.client-stage.dragging{cursor:grabbing!important} .client-card3d{user-select:none!important;-webkit-user-drag:none!important} /* Since 1985: redesigned as a cleaner premium story panel */ .experience{background:linear-gradient(180deg,#fff 0%,#f7f7f5 100%)!important;padding:105px 0!important} .experience-grid{grid-template-columns:44% 56%!important;gap:58px!important} .experience-art{min-height:455px!important;border:1px solid #e6e6e3;background:#f1f1ee;padding:22px!important;box-shadow:0 28px 70px rgba(0,0,0,.08)} .experience-art:before{content:"43 YEARS";position:absolute;top:18px;left:18px;z-index:4;background:#121416;color:#fff;padding:9px 12px;font:700 9px Inter;letter-spacing:2px} .experience-art:after{content:"SINCE 1985";position:absolute;right:18px;bottom:18px;z-index:4;color:#fff;background:var(--red);padding:10px 13px;font:700 10px Oswald;letter-spacing:1.4px} .experience-art img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;background:#ecece8} .experience-art-glow{width:230px!important;height:230px!important} .experience-copy{padding:8px 0 8px 0!important;position:relative} .experience-copy:before{content:"";position:absolute;left:-27px;top:5px;width:2px;height:calc(100% - 10px);background:linear-gradient(var(--red),rgba(229,27,35,.05))} .experience-copy .since{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;background:#121416;color:#fff;font:700 10px Inter;letter-spacing:2px;margin-bottom:18px} .experience-copy .since strong{color:var(--red);font-weight:800} .experience-copy h2{font-size:clamp(47px,4.3vw,67px)!important;margin-bottom:20px!important} .experience-copy .experience-quote{font-size:16px!important;line-height:1.9!important;color:#333!important} .experience-copy>p:not(.experience-quote){font-size:14px!important;color:#707070!important} @media(max-width:900px){ .network-inner{grid-template-columns:1fr!important;gap:30px!important}.network-copy{padding-right:0}.network-photo-wrap{min-height:330px} .experience-grid{grid-template-columns:1fr!important;gap:35px!important}.experience-copy:before{display:none}.experience-art{min-height:360px!important} } @media(max-width:760px){ .header{height:70px!important}.header .site-logo img{width:145px!important}.header .nav-toggle{display:flex!important} .hero{height:620px!important}.hero-inner h1{font-size:clamp(35px,8vw,50px)!important} .solutions-360 .slide-type{gap:24px!important;justify-content:center!important}.solutions-360 .slide-type span{font-size:25px!important} .client-stats{max-width:none!important}.client-stage{height:350px!important}.client-card3d{width:125px!important;height:172px!important} .network-inner{padding:60px 0!important}.network-photo-wrap{min-height:270px!important} .experience{padding:70px 0!important}.experience-art{min-height:300px!important;padding:14px!important} } @media(max-width:520px){ .client-stats{grid-template-columns:1fr 1fr!important}.client-stats div{min-height:70px;padding:12px!important}.client-stats strong{font-size:25px!important} .network-inner h2{font-size:49px!important}.network-photo-wrap{min-height:235px!important} } /* ===== FINAL PRECISION FIX: transparent hero nav + network stat stack + draggable clients ===== */ .header{position:absolute!important;top:0;left:0;right:0;width:100%;background:transparent!important;border-bottom:1px solid rgba(255,255,255,.10)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .header .site-logo{position:relative;z-index:3;display:flex;align-items:center;flex-shrink:0} .header .site-logo img{filter:none!important;opacity:1!important;visibility:visible!important;mix-blend-mode:normal!important;display:block!important} .header.scrolled{position:fixed!important;background:rgba(255,255,255,.78)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;border-bottom-color:rgba(20,20,20,.10)!important;box-shadow:0 12px 30px rgba(0,0,0,.08)!important} .header.scrolled .nav>a:not(.nav-cta){color:rgba(20,23,27,.72)!important} .header .nav>a:not(.nav-cta){font-weight:500!important;color:rgba(255,255,255,.86)!important} .header .nav>a:not(.nav-cta):hover,.header .nav>a:not(.nav-cta):focus-visible{color:#ff3038!important} .header .nav-toggle span{background:#fff!important} .header.scrolled .nav-toggle span{background:#111!important} .network-inner{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(360px,430px)!important;gap:54px!important;align-items:center!important;min-height:500px!important;padding:70px 0!important} .network-copy{max-width:610px} .network-stack-stats{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:14px;align-self:center;justify-self:end;width:min(430px,100%)} .network-stack-stats>div{position:relative;min-height:116px;padding:20px 22px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025));box-shadow:0 18px 45px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.12);overflow:hidden;transition:transform .35s ease,border-color .35s ease,background .35s ease} .network-stack-stats>div:nth-child(2){transform:translateY(16px)} .network-stack-stats>div:nth-child(3){transform:translateY(-4px)} .network-stack-stats>div:nth-child(4){transform:translateY(12px)} .network-stack-stats>div:before{content:"";position:absolute;inset:-80% auto -80% -35%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-18deg);animation:stackLight 4.8s linear infinite} .network-stack-stats>div:hover{transform:translateY(-5px)!important;border-color:rgba(229,27,35,.6);background:linear-gradient(145deg,rgba(229,27,35,.20),rgba(255,255,255,.04))} .network-stack-stats strong{display:block;font:700 38px/1 Oswald;color:#fff} .network-stack-stats span{display:block;margin-top:9px;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:#d6d8da} @keyframes stackLight{0%{left:-45%;opacity:0}15%{opacity:1}55%,100%{left:140%;opacity:0}} /* Clients: no arrow/dot navigation; pointer drag/swipe remains the primary interaction. */ .client-stage{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none} .client-stage.dragging{cursor:grabbing} .client-carousel{touch-action:pan-y} .client-card3d{cursor:pointer!important} #clientPrev,#clientNext,#clientDots{display:none!important} @media(max-width:1050px){ .network-inner{grid-template-columns:1fr!important;gap:34px!important} .network-stack-stats{justify-self:start;width:min(520px,100%)} } @media(max-width:760px){ .header{height:68px!important} .header .site-logo img{width:145px!important} .network-inner{padding:56px 0!important;min-height:auto!important} .network-stack-stats{grid-template-columns:1fr 1fr;width:100%;gap:10px} .network-stack-stats>div,.network-stack-stats>div:nth-child(2),.network-stack-stats>div:nth-child(3),.network-stack-stats>div:nth-child(4){transform:none} .network-stack-stats>div{min-height:92px;padding:15px;border-radius:13px} .network-stack-stats strong{font-size:34px} .network-stack-stats span{font-size:10px;margin-top:6px} } /* ===== FINAL REQUEST FIXES: media-format slider + client drag ===== */ .solutions-360 .slide-type{display:block!important;position:relative!important;overflow:hidden!important;white-space:nowrap!important;width:100%!important;padding:22px 0 4px!important} .solutions-360 .slide-type::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0c0f12 0%,transparent 7%,transparent 93%,#0c0f12 100%)} .solutions-360 .slide-type span{display:inline-block!important;flex:none!important;margin-right:clamp(32px,5vw,72px)!important;font-size:clamp(25px,2.7vw,38px)!important;animation:none!important;transform:none!important;opacity:.82!important} .solutions-360 .slide-type{width:max-content!important;min-width:200%!important;animation:mediaRailSlide 18s linear infinite!important} @keyframes mediaRailSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .solutions-360 .slide-type:hover{animation-play-state:paused!important} .client-stage{cursor:grab!important;touch-action:pan-y!important;user-select:none!important;-webkit-user-select:none!important} .client-stage.is-dragging{cursor:grabbing!important} .client-card3d{cursor:grab!important;user-select:none!important;-webkit-user-drag:none!important} .client-stage.is-dragging .client-card3d{cursor:grabbing!important;transition:none!important} .client-card3d img{pointer-events:none!important;-webkit-user-drag:none!important} /* Showcase theme also changes the section atmosphere, matching the active button colour. */ .solution-showcase.theme-digital{background:radial-gradient(circle at 76% 50%,rgba(229,27,35,.15),transparent 32%),#0d1013!important} .solution-showcase.theme-static{background:radial-gradient(circle at 76% 50%,rgba(255,255,255,.10),transparent 32%),#16191c!important} .solution-showcase.theme-transit{background:radial-gradient(circle at 76% 50%,rgba(83,191,251,.14),transparent 32%),#0b1218!important} .solution-showcase.theme-digital .tab.active{background:rgba(229,27,35,.13)!important;border-color:rgba(229,27,35,.65)!important} .solution-showcase.theme-static .tab.active{background:rgba(255,255,255,.11)!important;border-color:rgba(255,255,255,.42)!important} .solution-showcase.theme-transit .tab.active{background:rgba(83,191,251,.12)!important;border-color:rgba(83,191,251,.55)!important} @media(max-width:760px){ .solutions-360 .slide-type{min-width:260%!important;animation-duration:15s!important} .solutions-360 .slide-type span{font-size:23px!important;margin-right:28px!important} .client-stage{touch-action:pan-y!important} } /* ===== LATEST POLISH: media rail, clients interaction, solutions themes, since-1985 ===== */ .solutions-360 .slide-type{display:block!important;width:100%!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important;padding:20px 0 6px!important;border-top:1px solid rgba(18,20,22,.13)!important;position:relative!important} .solutions-360 .slide-type-track{display:flex!important;align-items:center!important;gap:clamp(28px,4.8vw,70px)!important;width:max-content!important;min-width:max-content!important;animation:mediaRailLoop 22s linear infinite!important;will-change:transform!important} .solutions-360 .slide-type span{display:block!important;flex:0 0 auto!important;margin:0!important;font:700 clamp(20px,2.6vw,34px)/1 Oswald,Impact,sans-serif!important;letter-spacing:.5px!important;color:#8b8f93!important;opacity:.78!important;transition:color .3s,opacity .3s,transform .3s!important} .solutions-360 .slide-type span:nth-child(6n+1){color:#e51b23}.solutions-360 .slide-type span:nth-child(6n+2){color:#3b3f43}.solutions-360 .slide-type span:nth-child(6n+3){color:#777}.solutions-360 .slide-type span:nth-child(6n+4){color:#4daeea}.solutions-360 .slide-type span:nth-child(6n+5){color:#e51b23}.solutions-360 .slide-type span:nth-child(6n){color:#555} .solutions-360 .slide-type:hover .slide-type-track{animation-play-state:paused!important}.solutions-360 .slide-type:hover span{opacity:1;transform:translateY(-2px)} .solutions-360 .slide-type:before,.solutions-360 .slide-type:after{content:"";position:absolute;top:0;bottom:0;width:11%;z-index:3;pointer-events:none}.solutions-360 .slide-type:before{left:0;background:linear-gradient(90deg,var(--soft),transparent)}.solutions-360 .slide-type:after{right:0;background:linear-gradient(270deg,var(--soft),transparent)} @keyframes mediaRailLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} /* Make the Clients carousel genuinely interactive and visually obvious. */ .client-stage{cursor:grab!important;touch-action:pan-y!important;user-select:none!important;-webkit-user-select:none!important} .client-stage.is-dragging{cursor:grabbing!important} .client-carousel{pointer-events:none!important} .client-card3d{pointer-events:auto!important;cursor:pointer!important;touch-action:pan-y!important} .client-card3d img{pointer-events:none!important} .client-drag-hint{opacity:.9!important} /* Solutions: make each selected colour unmistakable in the full atmosphere. */ .solution-showcase{position:relative!important;transition:background .8s ease,box-shadow .8s ease!important} .solution-showcase.theme-digital{background:radial-gradient(circle at 78% 48%,rgba(229,27,35,.34),transparent 26%),linear-gradient(115deg,#0c0f12 0%,#170b0d 56%,#260b0f 100%)!important;box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 -90px 130px rgba(229,27,35,.08)!important} .solution-showcase.theme-static{background:radial-gradient(circle at 78% 48%,rgba(255,255,255,.22),transparent 25%),linear-gradient(115deg,#0c0f12 0%,#202327 58%,#30343a 100%)!important;box-shadow:inset 0 1px rgba(255,255,255,.06),inset 0 -90px 130px rgba(255,255,255,.05)!important} .solution-showcase.theme-transit{background:radial-gradient(circle at 78% 48%,rgba(50,177,239,.30),transparent 26%),linear-gradient(115deg,#0b1014 0%,#0b1b25 58%,#092a3a 100%)!important;box-shadow:inset 0 1px rgba(255,255,255,.04),inset 0 -90px 130px rgba(50,177,239,.08)!important} .solution-showcase.theme-digital .showcase-visual{box-shadow:0 30px 90px rgba(229,27,35,.22),0 0 0 1px rgba(229,27,35,.18)!important} .solution-showcase.theme-static .showcase-visual{box-shadow:0 30px 90px rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.18)!important} .solution-showcase.theme-transit .showcase-visual{box-shadow:0 30px 90px rgba(50,177,239,.22),0 0 0 1px rgba(50,177,239,.20)!important} .solution-showcase.theme-digital .showcase-tabs .tab.active{background:linear-gradient(135deg,#ff2832,#b80f16)!important;color:#fff!important} .solution-showcase.theme-static .showcase-tabs .tab.active{background:linear-gradient(135deg,#f5f6f7,#aeb3b8)!important;color:#111!important} .solution-showcase.theme-transit .showcase-tabs .tab.active{background:linear-gradient(135deg,#55c7ff,#176f9c)!important;color:#fff!important} /* Since 1985: stronger editorial styling + animated red timeline/rings without changing content. */ .experience{position:relative!important;overflow:hidden!important;background:linear-gradient(135deg,#fff 0%,#f5f5f3 52%,#ececea 100%)!important} .experience:before{content:"1985";position:absolute;right:-25px;top:18px;font:700 clamp(130px,18vw,250px)/1 Oswald,Impact,sans-serif;color:rgba(229,27,35,.045);letter-spacing:-8px;pointer-events:none;animation:sinceGhost 8s ease-in-out infinite} .experience-art{border:1px solid rgba(18,20,22,.12)!important;background:linear-gradient(145deg,#f9f9f7,#e9e9e5)!important;box-shadow:0 30px 90px rgba(0,0,0,.10),inset 0 0 0 8px rgba(255,255,255,.45)!important} .experience-art:before{background:var(--red)!important;box-shadow:8px 8px 0 rgba(18,20,22,.08);font-size:10px!important} .experience-art:after{background:#111!important;color:#fff!important;box-shadow:0 8px 25px rgba(0,0,0,.15)} .experience-art-glow{width:260px!important;height:260px!important;border-color:rgba(229,27,35,.35)!important;box-shadow:0 0 0 18px rgba(229,27,35,.04),0 0 100px rgba(229,27,35,.14)!important;animation:experiencePulse 3.4s ease-in-out infinite, sinceRotate 18s linear infinite!important} .experience-art img{position:relative!important;z-index:2!important;filter:contrast(1.04) saturate(.95)!important;transition:transform .7s cubic-bezier(.2,.7,0,1),filter .5s ease!important} .experience-art:hover img{transform:scale(1.025)!important;filter:contrast(1.07) saturate(1.02)!important} .experience-copy .since{background:#111!important;color:#fff!important;border-left:4px solid var(--red)!important;box-shadow:0 12px 28px rgba(0,0,0,.10)!important} .experience-copy .since strong{color:#ff3038!important} .experience-copy h2{position:relative!important} .experience-copy h2:after{content:"";display:block;width:72px;height:3px;margin-top:18px;background:linear-gradient(90deg,var(--red),transparent);animation:sinceLine 2.8s ease-in-out infinite} .experience-link{border-bottom-color:var(--red)!important;position:relative!important;overflow:hidden!important} .experience-link:after{content:"";position:absolute;left:-100%;bottom:-2px;width:100%;height:2px;background:#111;transition:left .45s ease} .experience-link:hover:after{left:0} @keyframes sinceGhost{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(10px) rotate(2deg)}} @keyframes sinceRotate{to{transform:rotate(360deg)}} @keyframes sinceLine{0%,100%{width:55px;opacity:.65}50%{width:120px;opacity:1}} @media(max-width:760px){ .solutions-360 .slide-type-track{gap:28px;animation-duration:17s!important}.solutions-360 .slide-type span{font-size:23px!important} .client-stage{touch-action:pan-y!important}.client-carousel{height:250px!important} .experience:before{right:-35px;top:5px;font-size:125px}.experience-art{box-shadow:0 20px 55px rgba(0,0,0,.09),inset 0 0 0 5px rgba(255,255,255,.45)!important} } /* ===== FINAL POLISH: reliable client swipe/click + seamless media rail + readable 1985 story ===== */ .solutions-360 .slide-type{overflow:hidden!important;position:relative!important;isolation:isolate!important} .solutions-360 .slide-type-track{ display:flex!important; align-items:center!important; width:max-content!important; min-width:max-content!important; gap:clamp(34px,5vw,78px)!important; will-change:transform!important; animation:mediaRailLoop 24s linear infinite!important; } .solutions-360 .slide-type span{ flex:0 0 auto!important; white-space:nowrap!important; opacity:.9!important; transform:translateZ(0); transition:opacity .25s ease,transform .25s ease,filter .25s ease!important; } .solutions-360 .slide-type:hover .slide-type-track{animation-play-state:paused!important} .solutions-360 .slide-type span:hover{opacity:1!important;transform:translateY(-3px) scale(1.03)!important;filter:drop-shadow(0 5px 12px rgba(229,27,35,.18))} .solutions-360 .slide-type:before,.solutions-360 .slide-type:after{z-index:5!important;width:13%!important} @keyframes mediaRailLoop{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} .client-stage{cursor:grab!important;touch-action:none!important;user-select:none!important;-webkit-user-select:none!important} .client-stage.is-dragging{cursor:grabbing!important} .client-carousel{pointer-events:auto!important;touch-action:none!important} .client-card3d{pointer-events:auto!important;cursor:grab!important;touch-action:none!important;-webkit-user-drag:none!important;user-select:none!important} .client-stage.is-dragging .client-card3d{cursor:grabbing!important} .client-card3d img{pointer-events:none!important;-webkit-user-drag:none!important} .experience{overflow:visible!important} .experience-grid{overflow:visible!important} .experience-copy{overflow:visible!important} .experience-copy h2{line-height:1.02!important;overflow:visible!important;padding-bottom:6px!important} .experience-copy .experience-quote{overflow:visible!important} .experience-copy .since{white-space:nowrap!important;position:relative!important;z-index:6!important} .experience:before{z-index:0!important} .experience-copy,.experience-art{z-index:2!important} @media(max-width:760px){ .solutions-360 .slide-type-track{gap:30px!important;animation-duration:18s!important} .solutions-360 .slide-type span{font-size:23px!important} .experience-copy h2{line-height:1.04!important;font-size:clamp(40px,9vw,53px)!important} .experience-copy .since{font-size:10px!important;padding:8px 11px!important} } /* ===== FINAL WORK ARROWS + MEDIA RAIL POSITION FIX ===== */ .work-bottom-wrap{position:relative!important;overflow:visible!important;} .work-bottom-viewport{position:relative!important;overflow-x:auto!important;overflow-y:hidden!important;} .work-scroll-arrow{top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;} .work-scroll-arrow.prev{left:12px!important;} .work-scroll-arrow.next{right:12px!important;} @media(max-width:760px){ .work-scroll-arrow{top:50%!important;width:34px!important;height:34px!important;} .work-scroll-arrow.prev{left:7px!important;} .work-scroll-arrow.next{right:7px!important;} } .solutions-360 .slide-type{margin-top:78px!important;padding-top:24px!important;} .solutions-360 .slide-type-track{ display:flex!important; align-items:center!important; width:max-content!important; min-width:max-content!important; gap:clamp(34px,5vw,78px)!important; animation:mediaRailLoop 20s linear infinite!important; will-change:transform!important; } @keyframes mediaRailLoop{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } .solutions-360 .slide-type span{flex:0 0 auto!important;white-space:nowrap!important;} @media(max-width:760px){ .solutions-360 .slide-type{margin-top:58px!important;padding-top:20px!important;} .solutions-360 .slide-type-track{gap:28px!important;animation-duration:15s!important;} } /* ===== MOBILE FINAL FIX: eliminate side whitespace + readable transparent menu + footer order ===== */ html, body { max-width:100%; overflow-x:hidden!important; } body { width:100%; } img, video, iframe, svg { max-width:100%; } @media (max-width:760px){ .container{width:calc(100% - 32px)!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;} .header{width:100%!important;max-width:100vw!important;overflow:visible!important;} .nav{color:#111!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} .nav>a,.nav>a:not(.nav-cta){color:#111!important;font-weight:500!important;opacity:1!important;text-shadow:none!important;} .nav>a:hover,.nav>a:focus,.nav>a.active{color:var(--red)!important;} .nav>a:not(.nav-cta)::after{background:var(--red)!important;box-shadow:0 0 8px rgba(229,27,35,.55)!important;} /* prevent sections/cards from creating a white strip at either edge */ section, header, footer, main, .section, .hero, .solutions-360, .clients, .network, .work, .experience, .cta {max-width:100vw!important;overflow-x:hidden;} .work-bottom-viewport{width:100%!important;max-width:100%!important;} .work-bottom-track{padding-right:16px;} .work-bottom-track .work-card{max-width:calc(100vw - 58px)!important;} .client-stage,.client-carousel,.orbit-layout,.solution-showcase,.experience-grid{max-width:100%!important;} /* mobile footer: social first, copyright/@ line second, developer line last */ .footer-bottom .container{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:11px!important;padding:15px 0 17px!important;} .footer-bottom .social-text{order:1!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;font-size:13px!important;} .footer-bottom .container>span:first-child{order:2!important;font-size:13px!important;} .footer-bottom .container>span:last-child{order:3!important;font-size:13px!important;text-align:center!important;} .social-text b{width:36px!important;height:36px!important;display:grid!important;place-items:center!important;border-radius:50%!important;} } @media (max-width:420px){ .container{width:calc(100% - 24px)!important;} .nav{left:10px!important;right:10px!important;} .footer-bottom .social-text{gap:7px!important;} .social-text b{width:34px!important;height:34px!important;} } /* ===== FINAL TYPOGRAPHY + HEADER LOGO + NETWORK STAT UPDATE ===== */ @font-face{ font-family:'Aileron'; src:url('https://reinhart1010.github.io/aileron/fonts/Aileron-Regular.woff2') format('woff2'), url('https://reinhart1010.github.io/aileron/fonts/Aileron-Regular.woff') format('woff'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'Aileron'; src:url('https://reinhart1010.github.io/aileron/fonts/Aileron-SemiBold.woff2') format('woff2'), url('https://reinhart1010.github.io/aileron/fonts/Aileron-SemiBold.woff') format('woff'); font-weight:500;font-style:normal;font-display:swap; } @font-face{ font-family:'Aileron'; src:url('https://reinhart1010.github.io/aileron/fonts/Aileron-Bold.woff2') format('woff2'), url('https://reinhart1010.github.io/aileron/fonts/Aileron-Bold.woff') format('woff'); font-weight:700;font-style:normal;font-display:swap; } @font-face{ font-family:'Aileron'; src:url('https://reinhart1010.github.io/aileron/fonts/Aileron-Heavy.woff2') format('woff2'), url('https://reinhart1010.github.io/aileron/fonts/Aileron-Heavy.woff') format('woff'); font-weight:800;font-style:normal;font-display:swap; } @font-face{ font-family:'Aileron'; src:url('https://reinhart1010.github.io/aileron/fonts/Aileron-Black.woff2') format('woff2'), url('https://reinhart1010.github.io/aileron/fonts/Aileron-Black.woff') format('woff'); font-weight:900;font-style:normal;font-display:swap; } /* Aileron is used for every visual heading/display title; body copy stays readable. */ h1,h2,h3,h4,h5,h6, .hero h1, .about-copy h2, .work-copy h2, .impact-copy h2, .section-head h2, .service-panel h3, .network-inner h2, .clients-copy h2, .experience-copy h2, .cta h2, .story-dialog h3, .stats-grid strong, .year-badge strong, .year-badge span, .slide-type span, .service-count, .orbit-center span{ font-family:'Aileron',Arial,sans-serif!important; } .hero h1{font-weight:800!important;letter-spacing:-1.5px!important;line-height:.9!important;} .about-copy h2,.work-copy h2,.impact-copy h2,.section-head h2, .network-inner h2,.clients-copy h2,.experience-copy h2,.cta h2, .story-dialog h3,.service-panel h3{font-weight:800!important;} /* Top logo: same clean treatment, just slightly larger and more prominent. */ .header .site-logo img{width:215px!important;max-height:60px!important;object-fit:contain!important;} /* The four network highlight cards: 35+ Years -> 45+ Years. */ @media(max-width:900px){ .header .site-logo img{width:195px!important;max-height:56px!important;} } @media(max-width:760px){ .header .site-logo img{width:185px!important;max-height:54px!important;} h1,h2,h3,h4,h5,h6{letter-spacing:-.5px!important;} } @media(max-width:420px){ .header .site-logo img{width:172px!important;max-height:50px!important;} } /* ===== UNDER-HERO STAT STRIP ===== */ .stats-strip{ width:100%; max-width:none; margin:0; padding:7px 0; background:#d32634; border-top:2px solid #fff; border-bottom:2px solid #fff; color:#fff; overflow:hidden; } .stats-strip-track{ width:100%; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:stretch; } .stats-strip .stats-item{ min-width:0; min-height:92px; padding:15px 12px 13px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid rgba(255,255,255,.82); } .stats-strip .stats-item:last-child{border-right:0} .stats-strip .stats-item strong{ display:block; margin:0 0 2px; color:#fff; font-family:'Aileron',Inter,Arial,sans-serif; font-size:35px; line-height:.95; font-weight:800; letter-spacing:-.6px; } .stats-strip .stats-item span{ display:block; color:#fff; font-family:'Aileron',Inter,Arial,sans-serif; font-size:11px; line-height:1.3; font-weight:600; letter-spacing:0; } @media(max-width:900px){ .stats-strip{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .stats-strip::-webkit-scrollbar{display:none} .stats-strip-track{ width:max-content; min-width:100%; grid-template-columns:repeat(6,220px); } .stats-strip .stats-item{min-height:88px;padding:14px 16px} } @media(max-width:760px){ .stats-strip-track{grid-template-columns:repeat(6,205px)} .stats-strip .stats-item strong{font-size:31px} .stats-strip .stats-item span{font-size:10px} } /* ===== MOBILE FOOTER LEGACY LOGO FIX ===== */ @media (max-width:1050px){ .footer-top .legacy{display:block!important;} } @media (max-width:760px){ .footer-top .legacy{display:block!important;justify-self:center!important;text-align:center!important;width:100%!important;max-width:230px!important;} .footer-top .legacy small{display:block!important;font-size:9px!important;line-height:1.4!important;margin-bottom:7px!important;} .footer-top .legacy img{display:block!important;width:145px!important;max-width:100%!important;height:auto!important;max-height:48px!important;margin:0 auto!important;object-fit:contain!important;visibility:visible!important;opacity:1!important;filter:none!important;} } /* ===== FINAL USER FIX: WORK ARROWS + FOOTER ORDER ===== */ /* Keep the campaign slider arrows vertically centered and always visible on desktop + mobile. */ .work-bottom-wrap{ position:relative!important; display:block!important; width:100%!important; min-height:205px!important; overflow:visible!important; } .work-bottom-viewport{ position:relative!important; display:block!important; width:100%!important; min-height:205px!important; overflow-x:auto!important; overflow-y:hidden!important; } .work-scroll-arrow{ position:absolute!important; top:50%!important; bottom:auto!important; z-index:20!important; opacity:1!important; visibility:visible!important; display:grid!important; place-items:center!important; transform:translateY(-50%)!important; pointer-events:auto!important; } .work-scroll-arrow.prev{left:10px!important;right:auto!important;} .work-scroll-arrow.next{right:10px!important;left:auto!important;} /* Footer top order: Krishna logo → navigation → Rakesh legacy logo. */ .footer-top{ grid-template-columns:minmax(180px,220px) minmax(0,1fr) minmax(180px,230px)!important; align-items:center!important; } .footer-top>.site-logo{grid-column:1!important;grid-row:1!important;} .footer-top>nav{grid-column:2!important;grid-row:1!important;} .footer-top>.legacy{grid-column:3!important;grid-row:1!important;display:block!important;visibility:visible!important;} @media(max-width:900px){ .footer-top{ grid-template-columns:1fr!important; grid-template-rows:auto auto auto!important; gap:18px!important; text-align:center!important; } .footer-top>.site-logo{grid-column:1!important;grid-row:1!important;justify-self:center!important;} .footer-top>nav{grid-column:1!important;grid-row:2!important;justify-content:center!important;} .footer-top>.legacy{grid-column:1!important;grid-row:3!important;justify-self:center!important;text-align:center!important;display:block!important;} } @media(max-width:760px){ .work-bottom-wrap{min-height:185px!important;} .work-bottom-viewport{min-height:185px!important;} .work-scroll-arrow{ width:34px!important; height:34px!important; top:50%!important; } .work-scroll-arrow.prev{left:6px!important;} .work-scroll-arrow.next{right:6px!important;} .footer-top>.legacy{display:block!important;visibility:visible!important;} } /* ===== MOBILE FOOTER: BRAND LOGOS TOP, NAV BELOW ===== */ @media (max-width:760px){ .footer-top{ grid-template-columns:1fr 1fr!important; grid-template-rows:auto auto!important; align-items:center!important; gap:18px 14px!important; padding:24px 0 20px!important; min-height:0!important; text-align:initial!important; } .footer-top > .site-logo{ grid-column:1!important; grid-row:1!important; justify-self:start!important; align-self:center!important; } .footer-top > .site-logo img{ width:170px!important; max-width:100%!important; height:auto!important; max-height:52px!important; } .footer-top > .legacy{ grid-column:2!important; grid-row:1!important; justify-self:end!important; align-self:center!important; text-align:right!important; max-width:150px!important; margin:0!important; } .footer-top > .legacy small{ display:block!important; font-size:8px!important; line-height:1.3!important; margin-bottom:5px!important; white-space:normal!important; } .footer-top > .legacy img{ width:115px!important; max-width:100%!important; max-height:42px!important; object-fit:contain!important; } .footer-top > nav{ grid-column:1 / -1!important; grid-row:2!important; width:100%!important; justify-content:center!important; align-items:center!important; flex-wrap:wrap!important; gap:7px 16px!important; text-align:center!important; margin-top:1px!important; } .footer-top > nav a{font-size:11px!important;line-height:1.2!important;} /* Keep the existing compact footer-bottom order and spacing. */ .footer-bottom .container{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:9px!important; padding:12px 0 14px!important; } .footer-bottom .social-text{order:1!important;} .footer-bottom .container>span:first-child{order:2!important;} .footer-bottom .container>span:last-child{order:3!important;} } @media (max-width:420px){ .footer-top{gap:15px 10px!important;padding:20px 0 17px!important;} .footer-top > .site-logo img{width:145px!important;} .footer-top > .legacy{max-width:125px!important;} .footer-top > .legacy img{width:100px!important;max-height:38px!important;} .footer-top > .legacy small{font-size:6.5px!important;} .footer-top > nav{gap:6px 11px!important;} .footer-top > nav a{font-size:10px!important;} } /* ===== 360 ORBIT: KEEP NUMBER VISIBLE ON HOVER/ACTIVE ===== */ .solutions-360 .orbit-card b{ position:relative!important; z-index:60!important; display:block!important; visibility:visible!important; opacity:1!important; color:var(--red)!important; transform:none!important; mix-blend-mode:normal!important; text-shadow:none!important; } .solutions-360 .orbit-card:hover b, .solutions-360 .orbit-card:focus b, .solutions-360 .orbit-card.active b{ visibility:visible!important; opacity:1!important; color:#fff!important; z-index:61!important; } .solutions-360 .orbit-card span{ position:relative!important; z-index:60!important; visibility:visible!important; opacity:1!important; } /* ===== FINAL USER POLISH ===== */ @media(max-width:760px){ /* Mobile menu is solid and readable, never transparent. */ .nav{ z-index:1005!important; display:none; background:#fff!important; opacity:1!important; visibility:visible!important; border:1px solid rgba(17,19,24,.12)!important; box-shadow:0 20px 45px rgba(0,0,0,.16)!important; } .nav.open{display:flex!important;opacity:1!important;visibility:visible!important;} .nav>a,.nav>a:not(.nav-cta){ color:#111318!important; opacity:1!important; background:#fff!important; } .nav>a:hover,.nav>a:focus,.nav>a.active{color:var(--red)!important;opacity:1!important;} } /* Make existing button hover/shine effects a little slower and smoother. */ .btn,.small-btn,.outline-btn,.footer-campaign,.service-next,.work-scroll-arrow,.client-arrow,.tab,.story-button,.nav-cta{ transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s ease, border-color .45s ease,background-color .45s ease,color .45s ease!important; } .btn::before,.small-btn::before,.outline-btn::before,.story-button::after, .service-next::before,.work-scroll-arrow::before,.client-arrow::before,.nav-cta::before{ transition:left 1s cubic-bezier(.2,.7,0,1)!important; } .btn::after,.small-btn::after,.outline-btn::after,.footer-campaign::after, .service-next::after,.work-scroll-arrow::after,.client-arrow::after{ transition:left .95s cubic-bezier(.2,.75,0,1),opacity .3s ease!important; } /* White buttons get the same moving shine, using red instead of white. */ .btn.white::before,.outline-btn::before{ background:linear-gradient(105deg,transparent 10%,rgba(229,27,35,.06) 36%, rgba(229,27,35,.58) 50%,rgba(229,27,35,.06) 64%,transparent 90%)!important; } .btn.white::after,.outline-btn::after{ background:linear-gradient(90deg,transparent,rgba(229,27,35,.32),transparent)!important; } /* Three solution cards: red / blue / purple. */ .solution-showcase.theme-ooh .showcase-tabs .tab.active{ background:linear-gradient(135deg,#ff2832,#b80f16)!important; color:#fff!important;border-color:#ff2832!important; } .solution-showcase.theme-transit .showcase-tabs .tab.active{ background:linear-gradient(135deg,#55c7ff,#176f9c)!important; color:#fff!important;border-color:#55c7ff!important; } .solution-showcase.theme-print .showcase-tabs .tab.active{ background:linear-gradient(135deg,#a78bfa,#6d4bc2)!important; color:#fff!important;border-color:#a78bfa!important; } .solution-showcase.theme-print .showcase-tabs .tab.active span{color:#fff!important;} /* ===== MOBILE MENU FINAL — screenshot-matched size ===== */ @media(max-width:760px){ .header{ z-index:1200!important; overflow:visible!important; } .header .nav-wrap{ position:relative!important; z-index:1201!important; } .nav-toggle{ position:relative!important; z-index:1205!important; } /* Large, comfortable menu like the supplied mobile screenshot. */ .header .nav{ position:absolute!important; top:62px!important; left:8px!important; right:8px!important; width:auto!important; max-height:calc(100vh - 76px)!important; overflow-y:auto!important; overflow-x:hidden!important; display:none!important; flex-direction:column!important; align-items:stretch!important; gap:0!important; padding:8px 8px 10px!important; border:1px solid #e7e7e7!important; border-radius:12px!important; background:#fff!important; opacity:1!important; visibility:visible!important; z-index:1203!important; box-shadow:0 20px 42px rgba(0,0,0,.17)!important; transform:none!important; } .header .nav.open{ display:flex!important; opacity:1!important; visibility:visible!important; transform:none!important; } .header .nav>a, .header .nav>a:not(.nav-cta){ display:flex!important; align-items:center!important; justify-content:center!important; min-height:52px!important; width:100%!important; box-sizing:border-box!important; padding:14px 12px!important; border-bottom:1px solid #f0f0f0!important; border-radius:0!important; color:#444!important; background:#fff!important; font-size:14px!important; font-weight:600!important; opacity:1!important; transform:none!important; } .header .nav>a:hover, .header .nav>a:focus-visible{ color:var(--red)!important; background:#fafafa!important; transform:none!important; } .header .nav>a.active:not(.nav-cta){ color:#444!important; background:#fff!important; } .header .nav .nav-cta{ justify-content:center!important; margin:10px auto 4px!important; width:106px!important; min-height:42px!important; padding:11px 8px!important; border-radius:7px!important; background:var(--red)!important; color:#fff!important; box-shadow:0 8px 18px rgba(229,27,35,.20)!important; } } @media(max-width:420px){ .header .nav{ left:8px!important; right:8px!important; width:auto!important; padding:8px 8px 10px!important; } .header .nav>a, .header .nav>a:not(.nav-cta){ min-height:50px!important; } } /* ===== MOBILE MENU PROPER ALIGNMENT ===== */ @media(max-width:760px){ .header .nav{ left:8px!important; right:8px!important; width:auto!important; max-width:none!important; box-sizing:border-box!important; } } @media(max-width:420px){ .header .nav{ left:8px!important; right:8px!important; width:auto!important; max-width:none!important; } } /* ABOUT — HOME-STYLE MOTION POLISH */ .about-refresh{--about-ease:cubic-bezier(.16,.7,0,1)} /* ===== 3. ABOUT PAGE (about.html) begins around here ===== */ .about-hero{isolation:isolate} .about-hero-media{transform:scale(1.045);animation:aboutHeroZoom 16s ease-in-out infinite alternate;filter:saturate(.98) contrast(1.03)} .about-hero-grid{animation:aboutGridDrift 14s linear infinite;transform:translate3d(0,0,0)} .about-hero:before{content:"";position:absolute;inset:auto 0 0;height:28%;z-index:1;background:linear-gradient(0deg,#05070999,transparent);pointer-events:none} .about-hero-copy{will-change:transform,opacity} .about-hero-title{max-width:720px;text-shadow:0 12px 34px #0006} .about-hero-title em{display:inline-block;animation:aboutRedPulse 3.8s ease-in-out infinite} .about-hero-desc{animation:aboutTextIn .9s .22s var(--about-ease) both} .about-hero-actions{animation:aboutTextIn .9s .36s var(--about-ease) both} .about-kicker:before,.about-tag:before{content:"";width:0;height:2px;background:var(--red);transition:width .65s var(--about-ease)} .about-kicker.in:before,.about-tag.in:before{width:24px} .about-btn{position:relative;overflow:hidden;transition:transform .35s var(--about-ease),box-shadow .35s var(--about-ease),background .35s ease} .about-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff4 48%,transparent 72%);transform:translateX(-120%);transition:transform .7s ease} .about-btn:hover:before{transform:translateX(120%)} .about-btn span{display:inline-block;transition:transform .35s var(--about-ease)} .about-btn:hover span{transform:translateX(5px)} .about-stat{position:relative;overflow:hidden;opacity:0;transform:translateY(20px);animation:aboutStatIn .7s var(--about-ease) forwards} .about-stat:nth-child(1){animation-delay:.05s}.about-stat:nth-child(2){animation-delay:.12s}.about-stat:nth-child(3){animation-delay:.19s}.about-stat:nth-child(4){animation-delay:.26s}.about-stat:nth-child(5){animation-delay:.33s} .about-stat:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:width .5s ease}.about-stat:hover:after{width:100%} .about-stat-icon{transition:transform .45s var(--about-ease),box-shadow .45s ease}.about-stat:hover .about-stat-icon{transform:rotate(-8deg) scale(1.12);box-shadow:0 0 0 7px #e51b2310} .about-block,.about-strength,.about-lead{position:relative} .about-copybox,.about-image,.about-collage,.about-strength-copy,.leader-card{will-change:transform} .about-copybox h2,.about-copybox h3,.about-lead-head h2,.about-strength-copy h2{letter-spacing:-.035em} .about-copybox h2,.about-copybox h3{transition:transform .55s var(--about-ease)} .about-copybox:hover h2,.about-copybox:hover h3{transform:translateX(4px)} .about-image:before,.about-collage .tile:before,.about-cta:before{content:"";position:absolute;z-index:2;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,#ffffff22,transparent);transform:skewX(-18deg);transition:left .9s ease;pointer-events:none} .about-image:hover:before,.about-collage .tile:hover:before,.about-cta:hover:before{left:125%} .about-image img,.about-collage img,.about-cta img{will-change:transform} .about-image:hover img{transform:scale(1.07) translate3d(0,-2px,0)} .about-collage .tile{transition:transform .45s var(--about-ease),box-shadow .45s ease}.about-collage .tile:hover{transform:translateY(-5px);box-shadow:0 20px 45px #0002}.about-collage .tile:hover img{transform:scale(1.08)} .about-strength-visual img{transition:transform 1.2s var(--about-ease);will-change:transform}.about-strength-visual:hover img{transform:scale(1.06)} .about-pill{position:relative;transition:background .35s ease,transform .35s var(--about-ease)}.about-pill:after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:var(--red);transform:translateX(-50%);transition:width .35s ease}.about-pill:hover{background:#ffffff08;transform:translateY(-4px)}.about-pill:hover:after{width:45%} .leader-card{transition:transform .55s var(--about-ease),box-shadow .55s ease,border-color .35s ease}.leader-card:hover{transform:translateY(-8px) scale(1.008);border-color:#ed1c2455}.leader-card img{transition:transform .8s var(--about-ease),filter .5s ease}.leader-card:hover img{transform:scale(1.06);filter:saturate(1)} .about-cta img{transition:transform 1.4s var(--about-ease)}.about-cta:hover img{transform:scale(1.045)} .about-cta .about-tag{color:#fff}.about-cta .about-tag:before{background:#fff} .about-cta h2{letter-spacing:-.04em;text-shadow:0 10px 30px #0006} .about-reveal{opacity:0;transform:translateY(38px);transition:opacity .85s ease,transform .85s var(--about-ease)} .about-reveal.in{opacity:1;transform:none} .about-reveal.in.about-delay-1{transition-delay:.12s}.about-reveal.in.about-delay-2{transition-delay:.22s}.about-reveal.in.about-delay-3{transition-delay:.32s} @keyframes aboutHeroZoom{from{transform:scale(1.045)}to{transform:scale(1.09)}} @keyframes aboutGridDrift{from{background-position:0 0,0 0}to{background-position:110px 110px,-110px 110px}} @keyframes aboutRedPulse{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 24px #e51b2338}} @keyframes aboutTextIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes aboutStatIn{to{opacity:1;transform:none}} @media(min-width:901px){.about-hero-title{font-size:clamp(59px,5.1vw,81px);line-height:.9}.about-hero-copy{width:min(570px,60%)}.about-hero-copy p{font-size:15px;max-width:500px}.about-hero{min-height:620px}.about-hero-inner{min-height:620px}.about-image{min-height:430px}.about-copybox{padding:64px clamp(24px,5vw,78px)}} @media(max-width:600px){.about-hero-title{font-size:48px!important;line-height:.92!important}.about-hero-copy p{font-size:14px}.about-stat{animation:none;opacity:1;transform:none}.about-kicker:before,.about-tag:before{display:none}} @media(prefers-reduced-motion:reduce){.about-hero-media,.about-hero-grid,.about-hero-title em,.about-stat,.about-image:before,.about-collage .tile:before,.about-cta:before,.about-cta img{animation:none!important;transition:none!important}.about-reveal{opacity:1;transform:none}} /* ===== FINAL NAV + ABOUT POLISH ===== */ @media(min-width:761px){ .header .nav{gap:18px!important;white-space:nowrap!important;flex-wrap:nowrap!important;font-size:14px!important} .header .nav>a:not(.nav-cta){font-size:14px!important;font-weight:600!important;padding:28px 2px!important;white-space:nowrap!important} .header .nav-cta{font-size:13px!important;white-space:nowrap!important} } .nav-dropdown{position:relative;display:flex;align-items:center;gap:4px;height:100%;white-space:nowrap} .nav-dropdown>a{position:relative;padding:28px 0!important;font-size:14px!important;font-weight:600!important;color:rgba(48,52,58,.78)!important;white-space:nowrap;transition:color .28s ease,text-shadow .28s ease,transform .28s ease} .nav-dropdown>a:after{content:"";position:absolute;left:0;bottom:4px;width:0;height:2px;background:var(--red);box-shadow:0 0 10px #e51b23;transition:width .32s cubic-bezier(.2,.75,0,1)} .nav-dropdown>a:hover{color:var(--red)!important;text-shadow:0 0 10px #e51b2330!important;transform:translateY(-2px)} .nav-dropdown>a:hover:after{width:100%} .nav-arrow{border:0;background:transparent;color:rgba(48,52,58,.78);font-size:9px;line-height:1;padding:7px 2px;cursor:pointer;transition:color .25s ease,transform .25s ease;text-shadow:none} .nav-arrow:hover,.nav-dropdown.open .nav-arrow{color:var(--red);transform:translateY(-1px)} .nav-menu{position:absolute;top:calc(100% - 2px);left:50%;transform:translate(-50%,-8px);min-width:175px;padding:7px;background:rgba(255,255,255,.98);border:1px solid #e8e8e8;box-shadow:0 18px 40px rgba(0,0,0,.14);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility .25s ease;z-index:150} /* Keep a small invisible hover bridge between the nav control and dropdown so the menu does not disappear while moving onto an option. */ @media(min-width:761px){ .nav-dropdown:hover .nav-menu,.nav-dropdown:focus-within .nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .nav-menu::before{content:"";position:absolute;left:-2px;right:-2px;top:-12px;height:13px;background:transparent} } .nav-dropdown.open .nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .nav-menu a{display:block!important;padding:11px 13px!important;font-size:13px!important;font-weight:600!important;color:#30343a!important;white-space:nowrap!important;border-bottom:1px solid #f0f0f0;transition:background .2s ease,color .2s ease,transform .2s ease!important} .nav-menu a:last-child{border-bottom:0}.nav-menu a:hover{background:#fafafa!important;color:var(--red)!important;transform:translateX(3px)!important} @media(max-width:760px){ .nav-dropdown{width:100%;height:auto;display:grid;grid-template-columns:1fr 40px;align-items:stretch} .nav-dropdown>a{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:52px;padding:14px 12px!important;border-bottom:1px solid #f0f0f0!important;font-size:14px!important;color:#444!important;background:#fff!important} .nav-arrow{min-height:52px;border-bottom:1px solid #f0f0f0;background:#fff;color:#444;font-size:9px} .nav-menu{position:static;grid-column:1/3;transform:none;min-width:0;padding:0 8px 8px;border:0;box-shadow:none;background:#fafafa;display:none;opacity:1;visibility:visible;pointer-events:auto} .nav-dropdown.open .nav-menu{display:block;transform:none} .nav-menu a{min-height:44px!important;padding:12px!important;text-align:center;border-bottom:1px solid #ededed} } /* About hero: compact headline while preserving Home typography and motion language. */ .about-hero{min-height:590px!important} .about-hero-inner{min-height:590px!important;padding-top:58px!important} .about-hero-copy{width:min(500px,52%)!important} .about-hero-title{font-size:clamp(49px,4.35vw,69px)!important;line-height:.92!important;letter-spacing:-.025em!important;margin:12px 0 18px!important} .about-hero-desc{max-width:455px!important;font-size:14px!important;line-height:1.6!important;margin-bottom:18px!important} .about-hero-actions .about-btn{padding:13px 17px!important;font-size:11px!important} .about-hero-media{transform:scale(1.035)!important;animation:aboutHeroZoomCompact 16s ease-in-out infinite alternate!important} .about-hero-copy{animation:aboutInHomeStyle .85s cubic-bezier(.16,.7,0,1) both!important} .about-hero-title em{animation:aboutRedPulse 3.4s ease-in-out infinite!important} .about-kicker,.about-tag{letter-spacing:.11em!important} /* Story image/collage: tighter, cleaner footprint. */ .about-story{grid-template-columns:45% 55%!important;min-height:390px!important} .about-copybox{padding:48px clamp(22px,4vw,58px)!important} .about-copybox h2{font-size:clamp(35px,3.2vw,50px)!important;line-height:1!important;margin:11px 0 14px!important} .about-copybox p{font-size:14px!important;line-height:1.55!important;margin-bottom:8px!important} .about-collage{padding:16px!important;gap:8px!important;min-height:390px!important} .about-collage .tile{min-height:150px!important} .about-collage b{font-size:16px!important;left:12px;bottom:10px} /* Home-style motion across About sections. */ .about-refresh .about-reveal{transition:opacity .8s ease,transform .8s cubic-bezier(.16,.7,0,1)!important} .about-refresh .about-reveal.in{transform:none!important} .about-refresh .about-copybox,.about-refresh .about-image,.about-refresh .about-collage,.about-refresh .about-strength-copy,.about-refresh .leader-card{will-change:transform,opacity} .about-refresh .about-copybox:hover{transform:translateY(-3px)} .about-refresh .about-image,.about-refresh .about-collage .tile,.about-refresh .leader-card{transition:transform .55s cubic-bezier(.16,.7,0,1),box-shadow .55s ease,border-color .35s ease!important} .about-refresh .about-image:hover{transform:translateY(-5px)!important;box-shadow:0 18px 40px rgba(0,0,0,.12)} .about-refresh .about-image:hover img,.about-refresh .about-collage .tile:hover img{transform:scale(1.065)!important} .about-refresh .about-btn{box-shadow:0 10px 24px rgba(229,27,35,.18)!important} .about-refresh .about-btn:hover{transform:translateY(-4px) scale(1.015)!important;box-shadow:0 15px 30px rgba(229,27,35,.28)!important} .about-refresh .about-stat{transition:transform .45s cubic-bezier(.16,.7,0,1),background .35s ease,box-shadow .35s ease!important} .about-refresh .about-stat:hover{transform:translateY(-5px)!important;box-shadow:0 12px 25px rgba(0,0,0,.08)} @keyframes aboutHeroZoomCompact{from{transform:scale(1.035)}to{transform:scale(1.075)}} @keyframes aboutInHomeStyle{from{opacity:0;transform:translate3d(0,24px,0);filter:blur(3px)}to{opacity:1;transform:none;filter:none}} @media(max-width:900px){.about-hero-copy{width:86%!important}.about-hero-title{font-size:52px!important}.about-story{grid-template-columns:1fr!important}.about-collage{min-height:330px!important}} @media(max-width:600px){.about-hero,.about-hero-inner{min-height:530px!important}.about-hero-title{font-size:43px!important}.about-hero-copy p{font-size:11.5px!important}.about-collage{min-height:300px!important;padding:10px!important}.about-collage .tile{min-height:125px!important}} /* ================= MEDIA SOLUTIONS — REFERENCE-LED MOTION ================= */ .media-page{background:#fff;overflow:hidden}.media-page .tag{letter-spacing:.13em;font-weight:800}.media-page em{font-style:normal;color:var(--red)} /* ===== 4. SERVICES / MEDIA SOLUTIONS PAGE (services.html) begins around here ===== */ .media-hero{min-height:590px;position:relative;isolation:isolate;background:#0c0f12;color:#fff;overflow:hidden}.media-hero-bg{position:absolute;inset:0;z-index:-3}.media-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.92) contrast(1.05);animation:mediaHeroZoom 12s ease-in-out infinite alternate}.media-hero-overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,8,11,.98) 0%,rgba(5,8,11,.9) 32%,rgba(5,8,11,.35) 58%,rgba(5,8,11,.15) 100%)}.media-hero-grid{position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,#000,transparent 75%);animation:mediaGridMove 12s linear infinite}.media-hero-inner{min-height:590px;display:flex;align-items:center;position:relative}.media-hero-copy{width:min(590px,58%);padding:65px 0}.media-hero-copy h1{font-family:Oswald,Impact,sans-serif;font-size:clamp(51px,5.6vw,83px);line-height:.94;letter-spacing:-.025em;margin:16px 0 22px;text-wrap:balance}.media-hero-copy h1 em{color:var(--red);text-shadow:0 0 28px #e51b2330}.media-hero-copy p{max-width:570px;font-size:17px;line-height:1.62;color:#e6e6e6;margin:9px 0}.media-quote{font-family:Oswald,sans-serif;color:var(--red);font-weight:700;font-size:21px;line-height:1.15;margin-top:22px;text-shadow:0 0 18px #e51b2325}.media-quote span{font-size:23px}.media-hero-markers{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px;color:#fff8;font:700 11px Inter;letter-spacing:.15em}.media-hero-markers span:first-child{color:var(--red)} .media-format-rail{background:#fff;border-bottom:1px solid #e8e8e8;box-shadow:0 8px 28px #0000000a;position:relative;z-index:4}.media-format-track{min-height:86px;display:grid;grid-template-columns:repeat(6,1fr) 120px;align-items:stretch}.media-format-track>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-right:1px solid #eee;font-size:11px;text-align:center;transition:.35s}.media-format-track>a span{font-size:24px;color:#222;transition:.35s}.media-format-track>a:hover{background:#fafafa;transform:translateY(-4px);box-shadow:0 10px 25px #00000010}.media-format-track>a:hover span{color:var(--red);transform:translateY(-3px) scale(1.12)}.media-360-badge{background:#101316;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.media-360-badge strong{font:700 30px Oswald}.media-360-badge small{font-size:8px;letter-spacing:.1em;margin-top:5px} .media-section{padding:90px 0;position:relative}.media-section:nth-of-type(even){background:#fafafa}.media-two-col,.transit-layout,.print-layout,.electronic-layout,.digital-layout,.branding-layout{display:grid;gap:42px;align-items:center}.media-two-col{grid-template-columns:.72fr 1.28fr}.media-copy{position:relative}.media-number{font:700 52px Oswald;line-height:1;color:#15181b;display:flex;align-items:center;gap:12px}.media-number i{display:block;width:44px;height:2px;background:var(--red);position:relative}.media-number i:after{content:"";position:absolute;left:0;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 18px #e51b2380}.media-copy .tag{color:var(--red);font-size:14px;margin:4px 0 9px}.media-copy h2{font:700 clamp(36px,4vw,57px)/.96 Oswald;margin:0 0 18px;letter-spacing:-.02em}.media-copy p{color:#555;line-height:1.65;font-size:16px;max-width:600px}.media-btn{margin-top:12px}.media-btn b{transition:transform .3s}.media-btn:hover b{transform:translateX(5px)} .media-ooh-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;perspective:1000px}.media-card{background:#fff;border:1px solid #e5e5e5;overflow:hidden;min-width:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}.media-card:hover{transform:translateY(-10px) rotateX(2deg) rotateY(-2deg);box-shadow:0 24px 50px #00000017}.media-card img{display:block;width:100%;height:185px;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}.media-card:hover img{transform:scale(1.08);filter:saturate(1.08)}.media-card b,.media-card small{display:block;padding:8px 12px 0}.media-card small{padding-top:0;padding-bottom:13px;color:#777;font-size:13px} .transit-layout{grid-template-columns:.9fr 1.1fr}.transit-image{position:relative;height:560px;overflow:hidden;background:#111;box-shadow:0 25px 60px #0002}.transit-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000b,transparent 55%);pointer-events:none}.transit-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.transit-image:hover img{transform:scale(1.07)}.transit-image span{position:absolute;z-index:2;left:28px;bottom:26px;color:#fff;font:700 48px/.86 Oswald}.transit-image em{display:block;color:#fff}.transit-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:28px}.transit-strip article{background:#fff;border:1px solid #e6e6e6;overflow:hidden;transition:.35s}.transit-strip article:hover{transform:translateY(-7px);box-shadow:0 16px 28px #0001}.transit-strip img{width:100%;height:72px;object-fit:cover;display:block}.transit-strip b{font-size:10px;line-height:1.2;display:block;padding:7px} .print-layout{grid-template-columns:.9fr 1.1fr .45fr}.print-visual{position:relative;min-height:370px;overflow:hidden;background:#e9e9e9;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}.print-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25}.print-paper{position:relative;width:76%;height:260px;background:#f4f1e9;padding:30px;box-shadow:0 25px 50px #0003;transform:rotate(-5deg);transition:.6s}.print-visual:hover .print-paper{transform:rotate(-1deg) translateY(-8px) scale(1.03)}.print-paper span{font:700 28px Oswald;display:block}.print-paper strong{font:700 40px/.9 Oswald;display:block;margin-top:14px}.print-paper small{display:block;margin-top:32px;font-weight:800}.media-side-list{display:grid;gap:7px}.media-side-list b{border-top:1px solid #ddd;padding-top:12px;font-size:15px}.media-side-list span{color:#777;font-size:13px} .electronic-layout{grid-template-columns:1fr 1fr}.electronic-visual{height:500px;overflow:hidden}.electronic-visual img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.electronic-visual:hover img{transform:scale(1.06)}.electronic-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}.electronic-cards article{padding:16px;border:1px solid #e2e2e2;background:#fff;transition:.35s}.electronic-cards article:hover{transform:translateY(-7px);border-color:#bbb;box-shadow:0 18px 30px #00000010}.electronic-cards span{display:block;color:var(--red);font-size:26px}.electronic-cards b{display:block;font-size:14px;margin:10px 0 6px}.electronic-cards small{display:block;color:#777;line-height:1.45;font-size:11px} .digital-layout{grid-template-columns:.8fr 1.2fr}.digital-visual{position:relative;height:500px;overflow:hidden;background:#101316}.digital-visual>img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.digital-visual:hover>img{transform:scale(1.06)}.digital-floating{position:absolute;left:20px;right:20px;bottom:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.digital-floating span{background:#ffffffeb;padding:15px;font-size:13px;font-weight:800;backdrop-filter:blur(8px);transition:.35s}.digital-floating span:hover{background:#fff;transform:translateY(-5px);box-shadow:0 15px 30px #0002} .branding-layout{grid-template-columns:1.1fr .9fr}.branding-visual{height:500px;position:relative;overflow:hidden;background:#111}.branding-visual img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.branding-visual:hover img{transform:scale(1.07)}.branding-overlay{position:absolute;left:30px;bottom:30px;color:#fff;display:flex;flex-direction:column}.branding-overlay strong{font:700 58px Oswald}.branding-overlay span{letter-spacing:.25em}.branding-items{display:flex;gap:9px;margin:25px 0}.branding-items span{padding:12px 14px;border:1px solid #ddd;font-size:13px;background:#fff;transition:.35s}.branding-items span:hover{transform:translateY(-5px);border-color:var(--red);color:var(--red)} .media-final-cta{background:#0c1014;color:#fff;position:relative;overflow:hidden;padding:72px 0}.media-final-cta:before{content:"";position:absolute;inset:0;background:url('../assets/images/shared-night-city-background.png') center/cover;opacity:.28;animation:mediaHeroZoom 15s ease-in-out infinite alternate}.media-final-inner{position:relative;display:flex;justify-content:space-between;gap:35px;align-items:center}.media-final-inner h2{font:700 clamp(40px,5vw,70px)/.9 Oswald;margin:10px 0}.media-final-inner p{max-width:650px;color:#d3d3d3;line-height:1.6}.media-final-inner .btn{flex:0 0 auto} @keyframes mediaHeroZoom{from{transform:scale(1.01)}to{transform:scale(1.08)}}@keyframes mediaGridMove{from{background-position:0 0,0 0}to{background-position:0 70px,70px 0}} @media(max-width:900px){.media-hero,.media-hero-inner{min-height:560px}.media-hero-copy{width:72%}.media-format-track{grid-template-columns:repeat(3,1fr)}.media-360-badge{display:none}.media-two-col,.transit-layout,.print-layout,.electronic-layout,.digital-layout,.branding-layout{grid-template-columns:1fr}.media-section{padding:65px 0}.media-copy h2{font-size:51px}.transit-image,.electronic-visual,.digital-visual,.branding-visual{height:390px}.print-layout{gap:25px}.media-side-list{grid-template-columns:1fr 1fr}.media-final-inner{align-items:flex-start;flex-direction:column}} @media(max-width:600px){.media-hero,.media-hero-inner{min-height:610px}.media-hero-copy{width:100%;padding:45px 0}.media-hero-copy h1{font-size:50px}.media-hero-copy p{font-size:15px}.media-hero-markers{display:none}.media-format-track{grid-template-columns:repeat(2,1fr)}.media-format-track>a{min-height:78px}.media-ooh-grid{gap:9px}.media-card img{height:125px}.media-copy h2{font-size:44px}.media-number{font-size:48px}.transit-image span{font-size:43px}.transit-strip{grid-template-columns:repeat(5,120px);overflow:auto;padding-bottom:6px}.electronic-cards{grid-template-columns:1fr}.media-side-list{grid-template-columns:1fr}.branding-items{flex-wrap:wrap}.branding-items span{flex:1 1 45%}.media-final-inner h2{font-size:53px}} @media(prefers-reduced-motion:reduce){.media-hero-bg img,.media-hero-grid,.media-final-cta:before{animation:none!important}.media-card,.media-card img,.transit-image img,.electronic-visual img,.digital-visual>img,.branding-visual img{transition:none!important}} /* MEDIA SOLUTIONS — compact hero typography + premium motion refinement */ .media-hero-copy{max-width:570px!important;position:relative;z-index:2} .media-hero-copy h1{font-size:clamp(42px,4.15vw,61px)!important;line-height:.94!important;letter-spacing:-.9px!important;max-width:560px!important;margin:10px 0 18px!important} .media-hero-copy p{max-width:500px!important;font-size:14px!important;line-height:1.55!important;margin:0 0 8px!important} .media-quote{font-size:15px!important;line-height:1.2!important;margin-top:15px!important} .media-hero-copy .tag{font-size:11px!important;letter-spacing:1.1px!important} .media-hero-bg img{animation:mediaHeroDrift 16s ease-in-out infinite alternate!important;transform-origin:center} @keyframes mediaHeroDrift{0%{transform:scale(1.01) translate3d(0,0,0)}100%{transform:scale(1.055) translate3d(-10px,-4px,0)}} .media-section .media-copy,.media-section .media-card,.media-section .transit-image,.media-section .print-visual,.media-section .electronic-visual,.media-section .digital-visual,.media-section .branding-visual{will-change:transform} .media-section .media-card{transition:transform .45s cubic-bezier(.2,.75,0,1),box-shadow .45s ease!important} .media-section .media-card:hover{transform:translateY(-8px) rotateX(2deg) rotateY(-1deg)!important;box-shadow:0 20px 42px rgba(0,0,0,.16)!important} .media-section img{transition:transform .8s cubic-bezier(.2,.75,0,1),filter .45s ease!important} .media-section article:hover img,.media-section .transit-image:hover img,.media-section .print-visual:hover img,.media-section .electronic-visual:hover img,.media-section .digital-visual:hover img,.media-section .branding-visual:hover img{transform:scale(1.045)!important} .media-format-rail{position:relative;z-index:5} .media-format-track a{transition:transform .35s ease,color .25s ease,box-shadow .35s ease!important} .media-format-track a:hover{transform:translateY(-5px)!important} .media-number{animation:mediaNumberFloat 3.5s ease-in-out infinite} @keyframes mediaNumberFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @media(max-width:760px){.media-hero-copy{max-width:calc(100% - 28px)!important}.media-hero-copy h1{font-size:38px!important;line-height:.96!important;letter-spacing:-.5px!important}.media-hero-copy p{font-size:13px!important;line-height:1.45!important}.media-quote{font-size:13px!important}} /* OUR NETWORK — reference-led layout with original network imagery */ .network-page{background:#fff;color:#111} /* ===== 5. NETWORK PAGE (network.html) begins around here ===== */ .network-hero{position:relative;min-height:590px;display:flex;align-items:center;overflow:hidden;background:#091017;color:#fff} .network-hero-bg{position:absolute;inset:0}.network-hero-bg img{width:100%;height:100%;object-fit:cover;animation:networkHeroZoom 16s ease-in-out infinite alternate} .network-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,14,.95) 0%,rgba(5,9,14,.76) 37%,rgba(5,9,14,.12) 72%,rgba(5,9,14,.32) 100%)} .network-hero-grid{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to right,#000,transparent 88%);opacity:.35} @keyframes networkHeroZoom{0%{transform:scale(1.02)}100%{transform:scale(1.065)}} .network-hero-inner{position:relative;z-index:2;padding:100px 0 80px} .network-hero-copy{max-width:620px}.network-hero-copy h1{font-family:Oswald,sans-serif;font-size:clamp(47px,5vw,75px);line-height:.92;margin:10px 0 18px;letter-spacing:-1px}.network-hero-copy h1 em{font-style:normal;color:var(--red)}.network-hero-copy p{font-size:17px;line-height:1.6;max-width:560px;color:#e5e7eb}.network-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;max-width:760px;border-top:1px solid #ffffff33}.network-stat{padding:20px 24px 0;border-right:1px solid #ffffff33}.network-stat:last-child{border-right:0}.network-stat strong{display:block;font:700 26px Oswald;color:#fff}.network-stat span{display:block;font-size:11px;line-height:1.35;color:#c8ccd1;margin-top:4px;text-transform:uppercase;letter-spacing:.5px} .network-presence{padding:90px 0 65px}.network-intro{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}.network-intro h2{font:700 clamp(40px,4.4vw,62px)/.95 Oswald;margin:12px 0 18px;letter-spacing:-.6px}.network-intro h2 em{font-style:normal;color:var(--red)}.network-intro p{font-size:16px;line-height:1.7;color:#5c6268;max-width:470px}.network-map-wrap{position:relative;min-height:430px;display:grid;place-items:center}.network-map{width:min(100%,520px);filter:drop-shadow(0 20px 35px rgba(0,0,0,.12));animation:mapFloat 5s ease-in-out infinite}.network-map-glow{position:absolute;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(229,27,35,.12),transparent 68%);animation:mapPulse 3.8s ease-in-out infinite}.network-map-labels{position:absolute;inset:0;pointer-events:none}.network-map-label{position:absolute;padding:8px 12px;background:#fff;border:1px solid #eee;box-shadow:0 10px 25px rgba(0,0,0,.08);font:700 11px Inter;color:#222}.network-map-label:nth-child(1){left:8%;top:38%}.network-map-label:nth-child(2){left:29%;top:58%}.network-map-label:nth-child(3){left:46%;top:44%}.network-map-label:nth-child(4){right:4%;top:26%}.network-map-label::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:6px;box-shadow:0 0 0 5px #e51b2315} @keyframes mapFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes mapPulse{0%,100%{transform:scale(.9);opacity:.5}50%{transform:scale(1.1);opacity:.9}} .network-cards{padding:25px 0 100px}.network-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.network-card{background:#f7f8f9;border:1px solid #e7e9eb;overflow:hidden;transition:transform .45s cubic-bezier(.2,.75,0,1),box-shadow .45s ease}.network-card:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(0,0,0,.12)}.network-card-media{height:260px;overflow:hidden;position:relative}.network-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.75,0,1)}.network-card:hover .network-card-media img{transform:scale(1.07)}.network-card-title{position:absolute;left:20px;bottom:18px;color:#fff;font:700 38px Oswald;text-shadow:0 2px 15px #000}.network-card-body{padding:22px}.network-card-body ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.network-card-body li{font-size:14px;color:#454b50;position:relative;padding-left:18px}.network-card-body li::before{content:'→';position:absolute;left:0;color:var(--red);font-weight:800}.network-card-link{display:inline-block;margin-top:22px;color:var(--red);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px} .network-cta{position:relative;min-height:330px;display:flex;align-items:center;color:#fff;overflow:hidden}.network-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:networkCtaDrift 15s ease-in-out infinite alternate}.network-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,15,.94),rgba(6,10,15,.55),rgba(6,10,15,.25))}.network-cta .container{position:relative;z-index:2}.network-cta h2{font:700 clamp(38px,4.2vw,60px)/.95 Oswald;max-width:760px;margin:0 0 20px}.network-cta h2 em{font-style:normal;color:var(--red)}@keyframes networkCtaDrift{0%{transform:scale(1.02) translateX(0)}100%{transform:scale(1.07) translateX(-10px)}} @media(max-width:900px){.network-intro{grid-template-columns:1fr;gap:20px}.network-grid{grid-template-columns:1fr}.network-hero{min-height:620px}.network-stats{grid-template-columns:repeat(2,1fr)}.network-stat:nth-child(2){border-right:0}.network-stat{padding-bottom:18px}} @media(max-width:600px){.network-hero-inner{padding:90px 0 60px}.network-hero-copy h1{font-size:44px}.network-hero-copy p{font-size:14px}.network-stats{margin-top:28px}.network-presence{padding:62px 0 35px}.network-intro h2{font-size:47px}.network-map-wrap{min-height:350px}.network-card-media{height:205px}.network-card-title{font-size:36px}.network-card-body ul{grid-template-columns:1fr}.network-cta{min-height:300px}} /* ===== NETWORK REFERENCE BUILD v2 ===== */ .network-reference-page{background:#fff;color:#111;overflow:hidden}.network-reference-page .tag{display:flex;align-items:center;gap:10px}.network-reference-page .tag i{width:34px;height:2px;background:var(--red);display:inline-block}.network-reference-page .tag.light{color:#fff}.network-reference-page .network-hero{min-height:620px}.network-hero-side{position:absolute;right:7%;top:43%;z-index:3;display:flex;flex-direction:column;gap:6px;font:800 10px/1.35 Inter;letter-spacing:1.6px;color:#fff;opacity:.8}.network-hero-orbit{position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.11);border-radius:50%;right:11%;top:7%;z-index:1;animation:networkOrbit 12s linear infinite}.network-hero-orbit:after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:var(--red);top:45px;left:42px;box-shadow:0 0 0 9px #e51b231c,0 0 25px #e51b23}.network-hero-copy{max-width:650px}.network-hero-copy h1{font-size:clamp(55px,6vw,87px);line-height:.9;margin:13px 0 22px;animation:networkTitleIn .9s cubic-bezier(.2,.8,0,1) both}.network-hero-copy p{max-width:590px}.network-btn{position:relative;overflow:hidden}.network-btn:after{content:'';position:absolute;top:-100%;left:-30%;width:25%;height:300%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:rotate(20deg);animation:networkBtnSweep 4.5s ease-in-out infinite}.network-stats{max-width:900px;margin-top:58px}.network-stat{padding:22px 28px 0}.network-stat strong{font-size:35px}.network-stat span{font-size:11px;letter-spacing:.7px}.network-map-section{padding:88px 0 72px;background:linear-gradient(180deg,#fff 0,#fafbfc 100%)}.network-presence-head{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:70px;align-items:end}.network-presence-head h2{font:700 clamp(46px,5.2vw,72px)/.92 Oswald;margin:14px 0 20px;letter-spacing:-1.1px}.network-presence-head p{max-width:560px;font-size:16px;line-height:1.75;color:#666}.network-market-list{border-top:2px solid var(--red);box-shadow:0 20px 50px rgba(0,0,0,.06)}.market-title{font:800 10px Inter;letter-spacing:2px;padding:15px 18px;color:#555}.market-tab{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;border-top:1px solid #e6e6e6;background:#fff;padding:19px 18px;font:700 12px Inter;color:#222;text-align:left;cursor:pointer;transition:.35s}.market-tab span{font-size:23px;line-height:0;transition:.35s}.market-tab:hover,.market-tab.active{background:var(--red);color:#fff}.market-tab:hover span,.market-tab.active span{transform:translateX(4px)}.network-map-layout{display:grid;grid-template-columns:250px minmax(0,1fr) 50px;gap:35px;align-items:center;margin-top:45px}.network-map-note{padding:25px;background:#f1f3f5;border:1px solid #e4e6e8;position:relative;overflow:hidden}.network-map-note:after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;right:-55px;bottom:-60px;background:radial-gradient(circle,#e51b2320,transparent 70%);animation:mapPulse 3.5s ease-in-out infinite}.map-note-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid #bbb;font-size:28px;margin-bottom:20px}.network-map-note strong{display:block;font:800 14px Oswald;text-transform:uppercase;letter-spacing:.6px}.network-map-note p{font-size:13px;line-height:1.65;color:#656b70}.network-map-legend{display:flex;flex-direction:column;gap:10px;margin-top:25px;font-size:11px;font-weight:800;color:#555}.network-map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.live-dot{background:var(--red);box-shadow:0 0 0 4px #e51b2317}.other-dot{background:#bcc2c7}.network-map-wrap{position:relative;min-height:500px;display:grid;place-items:center}.network-map{width:min(100%,520px);height:auto;position:relative;z-index:2;filter:drop-shadow(0 22px 35px rgba(0,0,0,.12));animation:mapFloat 5s ease-in-out infinite}.network-map-aura{position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,#e51b2312,transparent 68%);animation:mapPulse 4s ease-in-out infinite}.map-pulse{position:absolute;width:22px;height:22px;border-radius:50%;border:2px solid var(--red);box-shadow:0 0 0 0 #e51b2355;z-index:4;animation:mapMarker 2.4s ease-out infinite}.pulse-raj{left:36%;top:31%}.pulse-guj{left:31%;top:42%}.pulse-mah{left:43%;top:58%}.map-pulse.selected{background:var(--red);box-shadow:0 0 0 14px #e51b2322,0 0 28px #e51b2366}.network-map-compass{display:flex;flex-direction:column;align-items:center;gap:6px;font:800 13px Inter;color:#111}.network-map-compass b{font-size:27px}.network-market-showcase{padding:75px 0 105px}.network-section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:35px}.network-section-head h2{font:700 clamp(44px,5vw,68px)/.92 Oswald;margin:12px 0 0;letter-spacing:-1px}.network-section-head h2 em{color:var(--red);font-style:normal}.network-section-head>p{max-width:390px;color:#666;font-size:15px;line-height:1.7;margin:0}.network-grid-rich{gap:25px}.network-card-rich{background:#fff}.network-card-media{height:290px}.network-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.75) 100%)}.network-card-title{font-size:49px;letter-spacing:.5px}.network-card-arrow{position:absolute;right:20px;bottom:18px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;font-size:25px;transition:.35s;z-index:2}.network-card-rich:hover .network-card-arrow{background:var(--red);color:#fff;transform:rotate(-20deg) scale(1.08)}.network-card-body{padding:25px}.market-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px}.market-mini-grid span{font-size:10.5px;color:#454b50;line-height:1.45}.network-card-link{display:flex;align-items:center;gap:10px;border-top:1px solid #e6e6e6;padding-top:18px;margin-top:22px}.network-card-link b{transition:.3s}.network-card-link:hover b{transform:translateX(5px)}.network-capabilities{padding:90px 0;background:#0c1116;color:#fff;position:relative;overflow:hidden}.network-capabilities:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent)}.network-capabilities .container{position:relative;z-index:2}.network-capabilities .network-section-head>p{color:#b8bec4}.network-cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.network-cap{position:relative;min-height:235px;padding:25px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));overflow:hidden;transition:.45s}.network-cap:after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;right:-70px;bottom:-70px;background:#e51b2320;transition:.45s}.network-cap:hover{transform:translateY(-9px);border-color:#e51b2388;background:linear-gradient(145deg,#e51b231a,rgba(255,255,255,.04));box-shadow:0 20px 45px rgba(0,0,0,.3)}.network-cap:hover:after{transform:scale(1.5)}.network-cap span{display:block;color:var(--red);font:700 13px Oswald;margin-bottom:45px}.network-cap strong{display:block;font:700 25px Oswald}.network-cap p{font-size:13px;line-height:1.65;color:#b8bec4;max-width:230px}.network-cap>b{position:absolute;right:18px;top:18px;font-size:10px;letter-spacing:2px;color:#777}.network-journey{position:relative;min-height:390px;color:#fff;display:flex;align-items:center;overflow:hidden}.network-journey-bg{position:absolute;inset:0}.network-journey-bg img{width:100%;height:100%;object-fit:cover;animation:networkCtaDrift 15s ease-in-out infinite alternate}.network-journey-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#050a0fdc 0%,#050a0f9c 50%,#050a0f3c 100%)}.network-journey-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:50px}.network-journey h2{font:700 clamp(38px,4.6vw,66px)/.95 Oswald;margin:15px 0 0}.network-journey h2 em{font-style:normal;color:var(--red)} @keyframes networkOrbit{to{transform:rotate(360deg)}}@keyframes networkTitleIn{from{opacity:0;transform:translateY(35px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}@keyframes networkBtnSweep{0%,55%{left:-30%}100%{left:130%}}@keyframes mapMarker{0%{box-shadow:0 0 0 0 #e51b2355}70%{box-shadow:0 0 0 18px #e51b2300}100%{box-shadow:0 0 0 0 #e51b2300}} @media(max-width:980px){.network-presence-head{grid-template-columns:1fr;gap:30px}.network-market-list{max-width:480px}.network-map-layout{grid-template-columns:1fr;gap:20px}.network-map-note{order:2}.network-map-compass{display:none}.network-map-wrap{order:1}.network-cap-grid{grid-template-columns:1fr 1fr}.network-journey-inner{align-items:flex-start;flex-direction:column}.network-hero-side{display:none}} @media(max-width:680px){.network-reference-page .container{width:min(calc(100% - 30px),var(--max))}.network-hero{min-height:670px}.network-hero-inner{padding:100px 0 55px}.network-hero-copy h1{font-size:48px;line-height:.95}.network-hero-copy p{font-size:14px;line-height:1.6}.network-stats{grid-template-columns:1fr 1fr;margin-top:35px}.network-stat{padding:15px 14px 15px}.network-stat strong{font-size:27px}.network-stat span{font-size:10px}.network-map-section{padding:62px 0 45px}.network-presence-head h2{font-size:48px}.network-map-wrap{min-height:420px}.network-map{width:100%}.network-section-head{display:block}.network-section-head>p{margin-top:18px}.network-market-showcase{padding:55px 0 70px}.network-grid-rich{grid-template-columns:1fr}.network-card-media{height:225px}.network-card-title{font-size:39px}.network-capabilities{padding:65px 0}.network-cap-grid{grid-template-columns:1fr}.network-cap{min-height:190px}.network-cap span{margin-bottom:30px}.network-journey{min-height:410px}.network-journey h2{font-size:44px}.network-journey-inner .btn{width:100%}.market-mini-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.network-reference-page *,.network-reference-page *:before,.network-reference-page *:after{animation:none!important;transition:none!important}} /* Our Network map refinement + footer */ .network-reference-page .network-map-wrap{min-height:560px} .network-reference-page .network-map{width:min(100%,560px);max-height:560px;object-fit:contain;filter:drop-shadow(0 24px 38px rgba(0,0,0,.14));animation:networkMapFloat 6s ease-in-out infinite} .network-reference-page .network-map-aura{width:360px;height:360px;background:radial-gradient(circle,rgba(229,27,35,.14),rgba(229,27,35,0) 70%)} .network-reference-page .map-pulse{display:none} .network-reference-page .map-pulse.selected{display:block} .network-reference-page .pulse-raj{left:38%;top:32%} .network-reference-page .pulse-guj{left:29%;top:44%} .network-reference-page .pulse-mah{left:39%;top:57%} .map-city-marker{position:absolute;display:flex;align-items:center;gap:7px;padding:5px 9px;background:#fff;border:1px solid #e4e5e7;box-shadow:0 8px 20px rgba(0,0,0,.1);font:800 10px Inter;color:#222;opacity:0;transform:translateY(7px) scale(.96);transition:.35s;z-index:7;pointer-events:none} .map-city-marker i{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px #e51b2320,0 0 18px #e51b2355} .map-city-marker.selected{opacity:1;transform:none} .marker-mumbai{left:41%;top:59%}.marker-thane{left:43%;top:55%} .network-footer{position:relative;z-index:4} @keyframes networkMapFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(.35deg)}} @media(max-width:980px){.network-reference-page .network-map-wrap{min-height:520px}.network-reference-page .network-map{width:min(100%,520px)}} @media(max-width:680px){.network-reference-page .network-map-wrap{min-height:460px}.network-reference-page .network-map{width:100%;max-height:470px}.network-reference-page .network-map-aura{width:280px;height:280px}.marker-mumbai{left:40%;top:61%}.marker-thane{left:43%;top:57%}} /* ===== CAREERS / ENQUIRE REFERENCE POLISH ===== */ /* ===== 6. CAREERS & CONTACT PAGES (careers.html + contact.html, shared kr- components) begin around here ===== */ .kr-page{overflow:hidden;background:#f7f8fa;color:#101319} .kr-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;background:#0b0d10;color:#fff} .kr-hero .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .kr-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,11,.94) 0%,rgba(5,8,11,.72) 38%,rgba(5,8,11,.1) 78%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 48%);z-index:1} .kr-hero .hero-grid{position:absolute;inset:0;z-index:2;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to right,black,transparent 80%)} .kr-hero-inner{position:relative;z-index:3;padding:110px 0 70px;max-width:820px} .kr-kicker{font:700 13px/1.2 Inter,sans-serif;letter-spacing:.16em;color:#ef2027;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:12px}.kr-kicker:after{content:"";width:58px;height:2px;background:#ef2027} .kr-hero h1{font-family:Oswald,sans-serif;font-size:clamp(59px,7vw,113px);line-height:.91;letter-spacing:-.03em;text-transform:uppercase;margin:0;max-width:760px}.kr-hero h1 em{color:#ef2027;font-style:normal}.kr-hero p{max-width:620px;font-size:20px;line-height:1.7;color:rgba(255,255,255,.82);margin:24px 0 30px}.kr-actions{display:flex;gap:12px;flex-wrap:wrap}.kr-btn{display:inline-flex;align-items:center;gap:12px;padding:15px 20px;background:#ef2027;color:#fff;border-radius:2px;font-weight:800;text-decoration:none;box-shadow:0 12px 28px rgba(239,32,39,.22);transition:.35s}.kr-btn:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(239,32,39,.32)}.kr-btn.alt{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);box-shadow:none}.kr-btn.alt:hover{background:#fff;color:#111} .kr-ticker{background:#fff;border-bottom:1px solid #e6e8eb;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 12px 35px rgba(0,0,0,.06);position:relative;z-index:4}.kr-ticker .item{padding:22px 28px;border-right:1px solid #e4e5e8}.kr-ticker .item:last-child{border:0}.kr-ticker b{font:700 29px Oswald,sans-serif;display:block}.kr-ticker span{font-size:14px;font-weight:700;letter-spacing:.08em;color:#6d737b;text-transform:uppercase} .kr-section{padding:100px 0;position:relative}.kr-section.dark{background:#0c0f13;color:#fff}.kr-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:45px}.kr-head h2{font:700 clamp(40px,5vw,70px)/.95 Oswald,sans-serif;text-transform:uppercase;margin:0;letter-spacing:-.02em}.kr-head h2 em{color:#ef2027;font-style:normal}.kr-head p{max-width:460px;color:#6b727b;line-height:1.7}.dark .kr-head p{color:#aeb5bd} .kr-career-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}.kr-image-stack{position:relative;min-height:530px}.kr-image-stack .pic{position:absolute;border-radius:4px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.16);transform:translateZ(0);transition:transform .7s cubic-bezier(.2,.8,.2,1)}.kr-image-stack .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s}.kr-image-stack .pic:hover img{transform:scale(1.07)}.kr-image-stack .p1{width:67%;height:390px;left:0;top:0}.kr-image-stack .p2{width:48%;height:250px;right:0;bottom:0}.kr-image-stack .p3{width:38%;height:180px;left:32%;bottom:42px;border:7px solid #fff}.kr-badge{position:absolute;right:22%;top:34px;width:116px;height:116px;border-radius:50%;background:#ef2027;color:#fff;display:grid;place-items:center;text-align:center;font:700 25px/1 Oswald,sans-serif;box-shadow:0 15px 35px rgba(239,32,39,.35);animation:krFloat 4s ease-in-out infinite}.kr-badge span{display:block;font:700 8px/1.3 Inter,sans-serif;letter-spacing:.1em;margin-top:5px}.kr-copy h3{font:700 clamp(38px,4vw,60px)/.98 Oswald,sans-serif;text-transform:uppercase;margin:0 0 22px}.kr-copy h3 em{color:#ef2027;font-style:normal}.kr-copy p{line-height:1.8;color:#646b74;margin:0 0 25px}.kr-points{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:25px 0}.kr-point{padding:18px;background:#fff;border:1px solid #e6e7ea;position:relative;overflow:hidden;transition:.35s}.kr-point:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:#ef2027;transform:scaleY(0);transform-origin:bottom;transition:.35s}.kr-point:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.08)}.kr-point:hover:before{transform:scaleY(1)}.kr-point b{display:block;font-size:17px;margin-bottom:6px}.kr-point span{font-size:14px;color:#737982} .kr-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.kr-role{background:#12161b;border:1px solid #2a3037;padding:27px;position:relative;overflow:hidden;min-height:190px;transition:.45s}.kr-role:after{content:"↗";position:absolute;right:20px;top:18px;color:#ef2027;font-size:25px}.kr-role:before{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-50px;bottom:-70px;background:rgba(239,32,39,.18);filter:blur(2px);transition:.5s}.kr-role:hover{transform:translateY(-8px);border-color:#ef2027;box-shadow:0 25px 50px rgba(0,0,0,.28)}.kr-role:hover:before{transform:scale(1.5)}.kr-role small{color:#ef2027;font-weight:800;letter-spacing:.12em}.kr-role h3{font:600 29px Oswald,sans-serif;text-transform:uppercase;margin:28px 0 10px}.kr-role p{font-size:15px;color:#aab1b9;line-height:1.6;margin:0} .kr-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #262b31}.kr-step{padding:28px;border-right:1px solid #262b31;position:relative;overflow:hidden}.kr-step:last-child{border:0}.kr-step .num{font:700 44px Oswald;color:#ef2027}.kr-step h3{font:700 18px Inter;margin:20px 0 8px}.kr-step p{font-size:15px;color:#8f969f;line-height:1.6}.kr-step:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:#ef2027;transform:scaleX(0);transform-origin:left;transition:.5s}.kr-step:hover:after{transform:scaleX(1)} .kr-application{background:#fff;border:1px solid #e2e4e8;box-shadow:0 25px 70px rgba(16,19,25,.09);display:grid;grid-template-columns:.8fr 1.2fr;overflow:hidden}.kr-app-intro{background:#0d1116;color:#fff;padding:48px}.kr-app-intro h2{font:700 50px/.95 Oswald;text-transform:uppercase;margin:15px 0}.kr-app-intro h2 em{color:#ef2027;font-style:normal}.kr-app-intro p{color:#aeb5bd;line-height:1.7}.kr-app-intro .mini{margin-top:50px;padding-top:18px;border-top:1px solid #30363d;font-size:14px;color:#8f969f}.kr-form{padding:42px}.kr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.kr-field{display:flex;flex-direction:column;gap:7px}.kr-field.full{grid-column:1/-1}.kr-field label{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.kr-field input,.kr-field select,.kr-field textarea{border:1px solid #dfe2e6;padding:13px 14px;font:500 13px Inter;background:#fafbfc;outline:0;transition:.25s}.kr-field textarea{min-height:105px;resize:vertical}.kr-field input:focus,.kr-field select:focus,.kr-field textarea:focus{border-color:#ef2027;box-shadow:0 0 0 3px rgba(239,32,39,.08);background:#fff}.kr-submit{margin-top:16px;width:100%;border:0;cursor:pointer;justify-content:center}.kr-note{font-size:13px;color:#818891;margin-top:10px} .kr-enquiry-hero{position:relative;overflow:hidden;background:#0c0f13;color:#fff}.kr-enquiry-hero .inner{display:grid;grid-template-columns:.88fr 1.12fr;min-height:62vh}.kr-enquiry-copy{padding:95px 0 70px;position:relative;z-index:2}.kr-enquiry-copy h1{font:700 clamp(50px,6vw,92px)/.9 Oswald;text-transform:uppercase;margin:15px 0 22px}.kr-enquiry-copy h1 em{color:#ef2027;font-style:normal}.kr-enquiry-copy p{max-width:520px;color:#c5cbd1;line-height:1.7}.kr-enquiry-visual{position:relative;min-height:62vh;overflow:hidden}.kr-enquiry-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03);animation:krKenburns 16s ease-in-out infinite alternate}.kr-enquiry-visual:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#0c0f13 0%,rgba(12,15,19,.2) 30%,transparent 65%)}.kr-enquiry-visual:after{content:"REAL LOCATIONS.\A REAL AUDIENCES.\A REAL IMPACT.";white-space:pre;position:absolute;right:50px;bottom:50px;z-index:2;font:600 18px/1.25 Oswald;letter-spacing:.08em}.kr-enquiry-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border-top:1px solid #3a4048}.kr-enquiry-step{padding:20px 22px;border-right:1px solid #3a4048}.kr-enquiry-step:last-child{border:0}.kr-enquiry-step b{display:block;color:#ef2027;font-size:27px;margin-bottom:8px}.kr-enquiry-step span{font-size:14px;color:#b8bec6} .kr-form-area{padding:80px 0;background:#f4f6f8}.kr-form-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px;align-items:stretch}.kr-side-message{background:#0d1116;color:#fff;padding:44px;position:relative;overflow:hidden;min-height:500px}.kr-side-message:after{content:"";position:absolute;inset:auto -30% -30% auto;width:280px;height:280px;border-radius:50%;background:rgba(239,32,39,.15);filter:blur(10px)}.kr-side-message h2{font:700 50px/.95 Oswald;text-transform:uppercase;margin:15px 0}.kr-side-message h2 em{color:#ef2027;font-style:normal}.kr-side-message p{color:#aeb5bd;line-height:1.7}.kr-side-message img{position:absolute;left:0;right:0;bottom:0;width:100%;height:220px;object-fit:cover;opacity:.35;mix-blend-mode:screen}.kr-side-message .side-copy{position:relative;z-index:2}.kr-contact-form{background:#fff;padding:42px;border:1px solid #e0e3e7;box-shadow:0 25px 70px rgba(0,0,0,.07)}.kr-contact-form h2{font:700 34px Oswald;text-transform:uppercase;margin:0 0 24px}.kr-office-head{padding:90px 0 35px}.kr-offices{display:grid;grid-template-columns:1fr 1fr;gap:18px}.kr-office{background:#fff;border:1px solid #e1e4e8;display:grid;grid-template-columns:.85fr 1.15fr;overflow:hidden;transition:.4s}.kr-office:hover{transform:translateY(-7px);box-shadow:0 25px 55px rgba(0,0,0,.1)}.kr-office img{width:100%;height:100%;min-height:260px;object-fit:cover}.kr-office-info{padding:26px}.kr-office-info .tag{margin-bottom:12px}.kr-office-info h3{font:700 28px Oswald;text-transform:uppercase;margin:0 0 14px}.kr-office-info p{font-size:15px;line-height:1.7;color:#676e76}.kr-office-info a{display:block;color:#111;text-decoration:none;margin-top:8px;font-weight:700;font-size:15px}.kr-office-btn{display:inline-flex!important;border:1px solid #ef2027;padding:10px 14px;color:#ef2027!important;width:max-content;margin-top:18px!important;transition:.3s}.kr-office-btn:hover{background:#ef2027;color:#fff!important}.kr-final-cta{padding:80px 0;background:#0c1015;color:#fff;position:relative;overflow:hidden}.kr-final-cta:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,16,21,.95),rgba(12,16,21,.35)),url('../assets/images/shared-night-city-background.png') center/cover;opacity:.9}.kr-final-cta .container{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:30px}.kr-final-cta h2{font:700 clamp(40px,5vw,70px)/.95 Oswald;text-transform:uppercase;margin:10px 0}.kr-final-cta h2 em{color:#ef2027;font-style:normal} .kr-reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}.kr-reveal.is-visible{opacity:1;transform:none}.kr-reveal.delay-1{transition-delay:.1s}.kr-reveal.delay-2{transition-delay:.2s}.kr-reveal.delay-3{transition-delay:.3s} @keyframes krFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes krKenburns{0%{transform:scale(1.03)}100%{transform:scale(1.11)}} @media(max-width:900px){.kr-ticker{grid-template-columns:1fr 1fr}.kr-career-grid,.kr-enquiry-hero .inner,.kr-form-layout,.kr-application{grid-template-columns:1fr}.kr-image-stack{min-height:440px}.kr-roles{grid-template-columns:1fr 1fr}.kr-steps{grid-template-columns:1fr 1fr}.kr-offices{grid-template-columns:1fr}.kr-office{grid-template-columns:1fr 1fr}.kr-enquiry-visual{min-height:46vh}.kr-final-cta .container{flex-direction:column;align-items:flex-start}} @media(max-width:600px){.kr-section{padding:65px 0}.kr-hero-inner{padding:100px 0 55px}.kr-hero h1{font-size:59px}.kr-ticker{grid-template-columns:1fr 1fr}.kr-ticker .item{padding:18px 15px}.kr-ticker b{font-size:26px}.kr-ticker span{font-size:10px}.kr-points,.kr-roles,.kr-steps,.kr-form-grid{grid-template-columns:1fr}.kr-image-stack{min-height:380px}.kr-image-stack .p1{height:270px}.kr-image-stack .p2{height:190px}.kr-image-stack .p3{height:135px}.kr-badge{width:90px;height:90px;font-size:23px}.kr-form,.kr-app-intro,.kr-contact-form,.kr-side-message{padding:25px}.kr-enquiry-copy{padding:70px 0 45px}.kr-enquiry-copy h1{font-size:59px}.kr-enquiry-steps{grid-template-columns:1fr}.kr-enquiry-step{border-right:0;border-bottom:1px solid #3a4048}.kr-enquiry-visual{min-height:320px}.kr-enquiry-visual:after{right:20px;bottom:20px;font-size:15px}.kr-office{grid-template-columns:1fr}.kr-office img{min-height:210px}.kr-head{display:block}.kr-head p{margin-top:18px}} /* FINAL HERO + BUTTON POLISH — compact typography, Home-style motion */ .network-hero-copy h1{font-size:clamp(63px,6vw,87px)!important;line-height:.9!important;letter-spacing:-.025em!important;max-width:690px!important;margin:14px 0 18px!important} .network-hero-copy p{max-width:510px!important;font-size:16px!important;line-height:1.58!important} /* ===== 7. OUR WORK / PROJECTS PAGE (projects.html) begins around here ===== */ .ow-hero h1{font-size:clamp(63px,6.4vw,87px)!important;line-height:.9!important;max-width:680px!important;margin:14px 0 18px!important} .ow-hero-copy{max-width:510px!important;font-size:16px!important;line-height:1.58!important} .kr-hero h1{font-size:clamp(63px,6vw,87px)!important;line-height:.9!important;max-width:650px!important;letter-spacing:-.025em!important} .kr-hero p{max-width:520px!important;font-size:16px!important;line-height:1.6!important;margin:20px 0 25px!important} .kr-enquiry-copy h1{font-size:clamp(57px,5.6vw,81px)!important;line-height:.9!important;max-width:610px!important;letter-spacing:-.025em!important;margin:12px 0 18px!important} .kr-enquiry-copy p{max-width:470px!important;font-size:16px!important;line-height:1.58!important} /* Keep all custom page buttons visually aligned with Home's red button language. */ .kr-btn,.ow-btn,.network-hero .btn,.network-journey .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,background .28s ease,color .28s ease!important} .kr-btn::before,.ow-btn::before,.network-hero .btn::before,.network-journey .btn::before{content:'';position:absolute;z-index:-1;top:-40%;left:-85%;width:48%;height:180%;background:linear-gradient(105deg,transparent 10%,rgba(255,255,255,.06) 38%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.06) 62%,transparent 90%);transform:skewX(-18deg);transition:left .65s cubic-bezier(.2,.7,0,1);pointer-events:none} .kr-btn:hover::before,.ow-btn:hover::before,.network-hero .btn:hover::before,.network-journey .btn:hover::before{left:145%} .kr-btn:hover,.ow-btn:hover,.network-hero .btn:hover,.network-journey .btn:hover{transform:translateY(-3px)!important;box-shadow:0 0 0 1px #ff4148,0 10px 32px #e51b2345,0 0 22px #e51b2328!important} .kr-btn span,.ow-btn span,.network-hero .btn b,.network-journey .btn b{transition:transform .3s ease} .kr-btn:hover span,.ow-btn:hover span,.network-hero .btn:hover b,.network-journey .btn:hover b{transform:translateX(5px)} @media(max-width:900px){ .network-hero-copy h1{font-size:59px!important} .ow-hero h1{font-size:59px!important} .kr-hero h1{font-size:59px!important} .kr-enquiry-copy h1{font-size:57px!important} } @media(max-width:600px){ .network-hero-copy h1{font-size:48px!important} .ow-hero h1{font-size:49px!important} .kr-hero h1{font-size:51px!important} .kr-enquiry-copy h1{font-size:49px!important} .network-hero-copy p,.ow-hero-copy,.kr-hero p,.kr-enquiry-copy p{font-size:14px!important;line-height:1.55!important} } /* ENQUIRE NOW — reference-faithful compact hero + three-column enquiry experience */ .kr-enquiry-hero .inner{min-height:405px!important;grid-template-columns:.9fr 1.1fr!important} .kr-enquiry-copy{padding:58px 0 38px!important} .kr-enquiry-copy .kr-kicker{font-size:13px!important;letter-spacing:.08em!important} .kr-enquiry-copy h1{font-size:clamp(51px,4.8vw,69px)!important;line-height:.92!important;max-width:520px!important;letter-spacing:-.02em!important;margin:10px 0 15px!important} .kr-enquiry-copy p{max-width:445px!important;font-size:15px!important;line-height:1.52!important;margin:0!important;color:#c9ced4!important} .kr-enquiry-steps{margin-top:27px!important} .kr-enquiry-step{padding:14px 16px!important} .kr-enquiry-step b{font-size:22px!important;margin-bottom:5px!important} .kr-enquiry-step span{font-size:13px!important} .kr-enquiry-visual{min-height:405px!important} .kr-enquiry-visual:after{right:35px!important;bottom:30px!important;font-size:16px!important} .kr-form-area{padding:58px 0!important;background:#f3f5f7!important} .kr-form-layout{grid-template-columns:.72fr 1.38fr .72fr!important;gap:16px!important;align-items:stretch!important} .kr-side-message{min-height:510px!important;padding:34px 30px!important} .kr-side-message h2{font-size:47px!important;line-height:.94!important} .kr-side-message p{font-size:15px!important;line-height:1.55!important} .kr-side-message img{height:255px!important;opacity:.28!important} .kr-side-caption{position:absolute;left:30px;bottom:28px;z-index:3;font:700 20px/1.02 Oswald;text-transform:uppercase;letter-spacing:.01em} .kr-side-caption em{font-style:normal;color:#ef2027} .kr-contact-form{padding:30px!important;box-shadow:0 20px 50px rgba(0,0,0,.07)!important} .kr-contact-form h2{font-size:31px!important;margin-bottom:18px!important} .kr-form-grid{gap:12px!important} .kr-field{gap:5px!important} .kr-field label{font-size:11px!important} .kr-field input,.kr-field select,.kr-field textarea{padding:11px 12px!important;font-size:14px!important} .kr-field textarea{min-height:94px!important} .kr-guidance{background:#fff;padding:28px 24px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #e1e4e8;box-shadow:0 18px 45px rgba(0,0,0,.04)} .kr-guide-item{display:grid;grid-template-columns:46px 1fr;gap:12px;padding:4px 0 24px;border-bottom:1px solid #e4e6e9} .kr-guide-item+.kr-guide-item{padding-top:22px} .kr-guide-icon{width:38px;height:38px;border:2px solid #ef2027;border-radius:50%;display:grid;place-items:center;color:#ef2027;font-size:26px;font-weight:700} .kr-guide-item h3{font:700 17px/1.02 Oswald;text-transform:uppercase;margin:0 0 8px} .kr-guide-item p{font-size:13px;line-height:1.45;color:#687078;margin:0} .kr-guide-call{display:flex;align-items:center;gap:12px;padding-top:22px} .kr-guide-call>span{font-size:36px;color:#ef2027} .kr-guide-call small{display:block;color:#555;font-size:11px;margin-bottom:3px} .kr-guide-call b{display:block;font:700 20px Oswald} .kr-office{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease!important} .kr-office:hover{transform:translateY(-8px)!important;box-shadow:0 24px 55px rgba(0,0,0,.12)!important} .kr-office img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s ease!important} .kr-office:hover img{transform:scale(1.045);filter:saturate(1.05)} .kr-final-cta{padding:62px 0!important} .kr-final-cta h2{font-size:clamp(42px,4.3vw,65px)!important} @media(max-width:1100px){.kr-form-layout{grid-template-columns:.75fr 1.25fr!important}.kr-guidance{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.kr-guide-call{grid-column:1/-1}.kr-enquiry-copy h1{font-size:57px!important}} @media(max-width:900px){.kr-enquiry-hero .inner{min-height:auto!important}.kr-enquiry-copy{padding:58px 0 35px!important}.kr-enquiry-visual{min-height:330px!important}.kr-form-layout{grid-template-columns:1fr!important}.kr-guidance{grid-template-columns:1fr 1fr}.kr-guide-call{grid-column:1/-1}.kr-side-caption{font-size:20px}} @media(max-width:600px){.kr-enquiry-copy h1{font-size:47px!important;max-width:430px!important}.kr-enquiry-copy p{font-size:14px!important}.kr-enquiry-steps{grid-template-columns:1fr!important}.kr-enquiry-step{border-right:0!important;border-bottom:1px solid #3a4048!important}.kr-enquiry-visual{min-height:285px!important}.kr-enquiry-visual:after{font-size:13px!important;right:18px!important;bottom:18px!important}.kr-form-area{padding:42px 0!important}.kr-side-message{min-height:430px!important}.kr-contact-form{padding:22px!important}.kr-guidance{grid-template-columns:1fr!important;padding:22px 18px}.kr-guide-call{grid-column:auto}.kr-side-caption{left:22px;bottom:22px;font-size:18px}.kr-office-info{padding:22px!important}} /* ===== ENQUIRE NOW — reference-faithful finishing pass ===== */ .kr-enquiry-hero{background:#0b0f14!important} .kr-enquiry-hero .inner{min-height:410px!important;grid-template-columns:46% 54%!important;max-width:100%!important;width:100%!important} .kr-enquiry-copy{padding:55px 5.2vw 38px!important;display:flex;flex-direction:column;justify-content:center!important;background:linear-gradient(105deg,#0b0f14 0%,#10151b 78%,#151a20 100%)!important;position:relative!important;overflow:hidden!important} .kr-enquiry-copy:after{content:"";position:absolute;right:-90px;top:-40%;width:190px;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);transform:rotate(15deg);animation:enqSweep 7s ease-in-out infinite} @keyframes enqSweep{0%,65%{transform:translateX(-180px) rotate(15deg)}100%{transform:translateX(520px) rotate(15deg)}} .kr-enquiry-copy h1{font-size:clamp(47px,4.5vw,73px)!important;line-height:.92!important;max-width:610px!important;letter-spacing:-.018em!important;margin:10px 0 16px!important} .kr-enquiry-copy p{max-width:510px!important;font-size:15px!important;line-height:1.55!important} .kr-enquiry-steps{margin-top:26px!important;max-width:540px!important} .kr-enquiry-step{padding:13px 15px!important} .kr-enquiry-step b{font-size:21px!important} .kr-enquiry-step span{font-size:10.5px!important} .kr-enquiry-visual{min-height:410px!important} .kr-enquiry-visual img{animation:enqKenburn 18s ease-in-out infinite alternate!important} @keyframes enqKenburn{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.09) translate3d(-1.5%,0,0)}} .kr-enquiry-visual:before{background:linear-gradient(100deg,#0b0f14 0%,rgba(11,15,20,.58) 8%,rgba(11,15,20,.08) 42%,transparent 72%)!important} .kr-enquiry-visual:after{right:42px!important;bottom:36px!important;font-size:16px!important;line-height:1.25!important} .kr-form-area{padding:52px 0 68px!important;background:#f5f6f7!important} .kr-form-layout{grid-template-columns:27% 47% 26%!important;gap:0!important;align-items:stretch!important;max-width:1240px!important} .kr-side-message{min-height:540px!important;padding:34px 30px!important;background:#f1f3f5!important;color:#111!important;border:1px solid #e2e5e8!important} .kr-side-message:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(245,246,247,.88) 0%,rgba(245,246,247,.72) 44%,rgba(245,246,247,.2) 100%);z-index:1;pointer-events:none} .kr-side-message:after{display:none!important} .kr-side-message .side-copy{position:relative;z-index:3} .kr-side-message .kr-kicker{color:#e51b23!important} .kr-side-message h2{font-size:49px!important;line-height:.94!important;color:#111!important;margin:12px 0 16px!important} .kr-side-message p{color:#525960!important;font-size:15px!important;line-height:1.55!important;max-width:270px} .kr-side-message img{height:300px!important;opacity:.38!important;mix-blend-mode:multiply!important;filter:grayscale(1)!important} .kr-side-caption{position:absolute;z-index:4;left:30px;bottom:28px;font:700 23px/.95 Oswald!important;letter-spacing:.01em!important;color:#111!important} .kr-side-caption em{color:#e51b23!important;font-style:normal} .kr-contact-form{padding:30px 28px!important;border:1px solid #e0e3e7!important;box-shadow:0 15px 45px rgba(0,0,0,.055)!important;border-radius:0!important;position:relative!important;z-index:2!important} .kr-contact-form h2{font-size:28px!important;margin:0 0 18px!important} .kr-form-grid{gap:15px 13px!important} .kr-field label{font-size:11px!important;font-weight:800!important;margin-bottom:6px!important} .kr-field input,.kr-field select,.kr-field textarea{font-size:13px!important;padding:11px 12px!important;border-color:#dfe3e6!important;background:#fff!important} .kr-field textarea{min-height:88px!important} .kr-submit{height:44px!important;margin-top:14px!important;font-size:14px!important} .kr-note{font-size:10px!important;margin-top:8px!important} .kr-guidance{min-height:540px!important;background:#f7f8f9!important;padding:28px 26px!important;border:1px solid #e2e5e8!important;border-left:0!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:0!important} .kr-guide-item{display:grid!important;grid-template-columns:48px 1fr!important;gap:14px!important;padding:10px 0 24px!important;border-bottom:1px solid #e1e4e7!important;margin:0!important} .kr-guide-item + .kr-guide-item{padding-top:25px!important} .kr-guide-icon{width:42px!important;height:42px!important;border:2px solid #e51b23!important;border-radius:50%!important;color:#e51b23!important;display:grid!important;place-items:center!important;font-size:27px!important;font-weight:700!important;animation:guidePulse 2.8s ease-in-out infinite!important} @keyframes guidePulse{0%,100%{box-shadow:0 0 0 0 rgba(229,27,35,0)}50%{box-shadow:0 0 0 7px rgba(229,27,35,.08)}} .kr-guide-item h3{font:700 17px/.98 Oswald!important;margin:2px 0 8px!important;color:#111!important} .kr-guide-item p{font-size:11px!important;line-height:1.5!important;color:#687078!important;margin:0!important} .kr-guide-call{display:flex!important;align-items:center!important;gap:14px!important;padding-top:24px!important;margin-top:auto!important} .kr-guide-call>span{width:42px!important;height:42px!important;border:2px solid #e51b23!important;border-radius:50%!important;display:grid!important;place-items:center!important;color:#e51b23!important;font-size:25px!important} .kr-guide-call small{display:block!important;font-size:10px!important;color:#626970!important;margin-bottom:4px!important} .kr-guide-call b{display:block!important;font:700 21px Oswald!important;color:#111!important} .kr-head{align-items:end!important} .kr-head h2{font-size:clamp(44px,4.3vw,65px)!important} .kr-office{transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s ease!important} .kr-office:hover{transform:translateY(-9px) rotateX(1deg)!important;box-shadow:0 25px 55px rgba(0,0,0,.12)!important} .kr-office img{transition:transform .7s ease!important} .kr-office:hover img{transform:scale(1.045)!important} @media(max-width:1050px){ .kr-enquiry-hero .inner{grid-template-columns:1fr 1fr!important} .kr-form-layout{grid-template-columns:1fr 1.5fr!important} .kr-guidance{grid-column:1/-1;border-left:1px solid #e2e5e8!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:16px!important;min-height:auto!important} .kr-guide-call{grid-column:1/-1;margin-top:8px!important} } @media(max-width:760px){ .kr-enquiry-hero .inner{grid-template-columns:1fr!important} .kr-enquiry-copy{padding:62px 24px 34px!important} .kr-enquiry-copy h1{font-size:48px!important} .kr-enquiry-visual{min-height:280px!important} .kr-form-area{padding:38px 0 50px!important} .kr-form-layout{grid-template-columns:1fr!important} .kr-side-message{min-height:420px!important} .kr-contact-form{padding:24px 20px!important} .kr-guidance{grid-template-columns:1fr!important;padding:22px 20px!important} .kr-guide-call{grid-column:auto!important} } /* ===== INNER-PAGE HERO TYPOGRAPHY — COMPACT & CONSISTENT ===== Home hero is intentionally excluded. All inner-page hero headings share one compact visual scale and spacing. */ .about-hero-title, .media-hero-copy h1, .network-hero-copy h1, .ow-hero h1, .kr-enquiry-copy h1, .kr-hero h1{ font-size:clamp(38px,3.25vw,47px)!important; line-height:.94!important; letter-spacing:-.8px!important; max-width:560px!important; margin:10px 0 14px!important; } .about-hero-desc, .media-hero-copy p, .network-hero-copy p, .ow-hero-copy, .kr-enquiry-copy p, .kr-hero p{ font-size:14px!important; line-height:1.5!important; max-width:500px!important; } .about-hero-copy .tag, .media-hero-copy .tag, .network-hero-copy .tag, .ow-kicker, .kr-kicker{ font-size:10px!important; letter-spacing:1.2px!important; } @media (max-width:900px){ .about-hero-title, .media-hero-copy h1, .network-hero-copy h1, .ow-hero h1, .kr-enquiry-copy h1, .kr-hero h1{ font-size:38px!important; line-height:.95!important; max-width:460px!important; } } @media (max-width:560px){ .about-hero-title, .media-hero-copy h1, .network-hero-copy h1, .ow-hero h1, .kr-enquiry-copy h1, .kr-hero h1{ font-size:34px!important; line-height:.98!important; letter-spacing:-.5px!important; max-width:100%!important; } .about-hero-desc, .media-hero-copy p, .network-hero-copy p, .ow-hero-copy, .kr-enquiry-copy p, .kr-hero p{ font-size:13px!important; line-height:1.45!important; } } /* NAV ITEM SIZE UNIFICATION — equal visual blocks without changing the approved design */ @media (min-width: 901px){ .header .nav{ align-items:center!important; gap:12px!important; } .header .nav > a:not(.nav-cta), .header .nav .nav-dropdown, .header .nav .nav-dropdown > a{ width:112px!important; min-width:112px!important; max-width:112px!important; box-sizing:border-box!important; text-align:center!important; } .header .nav > a:not(.nav-cta){ display:flex!important; align-items:center!important; justify-content:center!important; white-space:nowrap!important; } .header .nav .nav-dropdown{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:0!important; height:100%!important; } .header .nav .nav-dropdown > a{ display:flex!important; align-items:center!important; justify-content:center!important; padding-left:4px!important; padding-right:22px!important; } .header .nav .nav-dropdown .nav-arrow{ position:absolute!important; right:5px!important; top:50%!important; transform:translateY(-50%)!important; padding:5px 3px!important; z-index:4!important; } .header .nav .nav-dropdown .nav-arrow:hover, .header .nav .nav-dropdown.open .nav-arrow{ transform:translateY(-50%)!important; } .header .nav .nav-dropdown > a::after{ left:8px!important; right:8px!important; width:0!important; } .header .nav .nav-dropdown > a:hover::after, .header .nav .nav-dropdown.open > a::after{ width:calc(100% - 16px)!important; } } /* === INNER PAGE HERO HEIGHT CONSISTENCY === Keep the approved Home design untouched. All inner-page hero/banner blocks use one consistent desktop height and one consistent mobile height. */ @media (min-width: 901px){ .about-hero, .about-hero-inner, .media-hero, .media-hero-inner, .network-hero, .ow-hero, .kr-hero{ min-height:590px !important; height:590px !important; } .ow-hero-inner{min-height:590px;} .kr-hero{height:590px !important;} } @media (max-width: 900px){ .about-hero, .about-hero-inner, .media-hero, .media-hero-inner, .network-hero, .ow-hero, .kr-hero{ min-height:520px !important; height:520px !important; } .ow-hero-inner{min-height:520px;} .kr-hero{height:520px !important;} } /* ========================================================= HERO / BANNER HEIGHT CONSISTENCY All inner-page hero banners use one consistent frame. Home .hero remains unchanged. ========================================================= */ .about-hero, .media-hero, .hero, .network-hero, .ow-hero, .kr-hero, .kr-enquiry-hero{ height:590px !important; min-height:590px !important; } .media-hero-inner, .about-hero-inner, .ow-hero-inner, .kr-hero-inner{ min-height:590px !important; height:590px !important; } .kr-enquiry-hero .inner{ min-height:590px !important; height:590px !important; } .kr-enquiry-visual{ min-height:590px !important; height:590px !important; } @media (max-width:760px){ .about-hero, .media-hero, .hero, .network-hero, .ow-hero, .kr-hero, .kr-enquiry-hero{ height:520px !important; min-height:520px !important; } .media-hero-inner, .about-hero-inner, .ow-hero-inner, .kr-hero-inner{ min-height:520px !important; height:520px !important; } .kr-enquiry-hero .inner{ min-height:520px !important; height:520px !important; } .kr-enquiry-visual{ min-height:520px !important; height:520px !important; } } /* FINAL VISUAL POLISH — dedicated media hero imagery + Home-style CTA system */ /* ===== 8. OOH / TRANSIT / DIGITAL DETAIL PAGES begin around here ===== */ .media-detail-hero{position:relative;background:#111;isolation:isolate} .media-detail-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .media-detail-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.025);filter:saturate(.92) contrast(1.04);animation:detailHeroFloat 14s ease-in-out infinite alternate} .media-detail-hero .hero-overlay{z-index:1;background:linear-gradient(90deg,rgba(5,8,11,.88) 0%,rgba(5,8,11,.58) 46%,rgba(5,8,11,.18) 100%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 58%)} .media-detail-hero .hero-grid,.media-detail-hero .hero-noise{z-index:2} .media-detail-hero .hero-inner{z-index:3} .media-detail-hero .hero-inner h1{font-size:clamp(57px,6vw,87px);text-shadow:0 10px 35px rgba(0,0,0,.28)} @keyframes detailHeroFloat{from{transform:scale(1.025) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-8px,-5px,0)}} /* Home-inspired red / white animated action buttons across all pages. */ .btn,.small-btn,.outline-btn,.kr-btn,.network-btn,.network-card-link,.kr-office-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,background .28s ease,color .28s ease,border-color .28s ease!important} .btn::before,.small-btn::before,.outline-btn::before,.kr-btn::before,.network-btn::before,.network-card-link::before,.kr-office-btn::before{content:"";position:absolute;z-index:-1;top:-45%;left:-90%;width:48%;height:190%;background:linear-gradient(105deg,transparent 10%,rgba(255,255,255,.04) 38%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.04) 62%,transparent 90%);transform:skewX(-18deg);transition:left .68s cubic-bezier(.2,.7,0,1);pointer-events:none} .btn:hover::before,.small-btn:hover::before,.outline-btn:hover::before,.kr-btn:hover::before,.network-btn:hover::before,.network-card-link:hover::before,.kr-office-btn:hover::before{left:145%} .btn.red,.small-btn,.media-btn,.network-btn,.kr-btn,.network-card-link,.kr-office-btn{background:var(--red);color:#fff;border-color:var(--red)} .btn.white,.outline-btn,.kr-btn.alt{background:#fff;color:#111;border:1px solid #ddd} .btn.red:hover,.small-btn:hover,.media-btn:hover,.network-btn:hover,.kr-btn:hover,.network-card-link:hover,.kr-office-btn:hover{transform:translateY(-4px);box-shadow:0 0 0 1px #ff4148,0 14px 34px rgba(229,27,35,.28),0 0 24px rgba(229,27,35,.18)!important} .btn.white:hover,.outline-btn:hover,.kr-btn.alt:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.16)!important;border-color:#fff;background:#f7f7f7;color:#111} .btn b,.small-btn span,.outline-btn span,.kr-btn span,.network-btn b,.kr-office-btn span{transition:transform .3s ease;display:inline-block} .btn:hover b,.small-btn:hover span,.outline-btn:hover span,.kr-btn:hover span,.network-btn:hover b,.kr-office-btn:hover span{transform:translateX(6px)} /* Compact resume attachment field */ .kr-field input[type=file]{padding:10px 12px;cursor:pointer} .file-note{display:block;margin-top:6px;font-size:11px;line-height:1.4;color:#7a7d80} @media(max-width:600px){.media-detail-hero-bg img{object-position:center}.media-detail-hero .hero-inner h1{font-size:51px}.kr-field input[type=file]{font-size:13px}} /* FINAL GLOBAL CTA + MOBILE SAFE POLISH */ .btn,.small-btn,.outline-btn,.kr-btn,.ow-btn,.media-btn,.network-btn,.network-card-link,.kr-office-btn,.about-btn,.nav-cta,.experience-link,.cta .btn,.about-cta .btn,.ow-cta .btn,.media-final-cta .btn,.kr-final-cta .btn{ border-radius:999px !important; min-height:44px; padding:12px 22px !important; display:inline-flex; align-items:center; justify-content:center; gap:14px; white-space:nowrap; -webkit-tap-highlight-color:transparent; } .btn::after,.small-btn::after,.outline-btn::after,.kr-btn::after,.ow-btn::after,.media-btn::after,.network-btn::after,.network-card-link::after,.kr-office-btn::after,.about-btn::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);opacity:.7; } .btn:active,.small-btn:active,.outline-btn:active,.kr-btn:active,.ow-btn:active,.media-btn:active,.network-btn:active,.network-card-link:active,.kr-office-btn:active,.about-btn:active{transform:translateY(-1px) scale(.985)!important} /* Keep every CTA visually consistent, while preserving each section's existing red/white color. */ .media-btn,.network-btn,.network-card-link,.kr-office-btn,.small-btn,.about-btn,.ow-btn,.kr-btn{border:1px solid var(--red)!important} .outline-btn,.btn.white,.kr-btn.alt{border:1px solid #ddd!important} @media (max-width:760px){ .container{width:min(calc(100% - 30px),var(--max));} .hero-actions{flex-wrap:wrap;gap:10px} .hero-actions .btn{width:auto;max-width:100%;} .btn,.small-btn,.outline-btn,.kr-btn,.ow-btn,.media-btn,.network-btn,.network-card-link,.kr-office-btn,.about-btn,.experience-link,.cta .btn,.about-cta .btn,.ow-cta .btn,.media-final-cta .btn,.kr-final-cta .btn{min-height:42px;padding:11px 18px!important;font-size:11px!important;max-width:100%;} /* Home Our Solutions orbit: keep the complete rotating graphic inside the viewport. */ .solutions-360{overflow:hidden!important;padding-left:0!important;padding-right:0!important;} .solutions-360 .orbit-layout{width:100%;overflow:visible!important;} .solutions-360 .orbit-ring{width:min(360px,calc(100vw - 34px))!important;height:min(360px,calc(100vw - 34px))!important;max-width:360px!important;margin-left:auto!important;margin-right:auto!important;overflow:visible!important;} .solutions-360 .orbit-card{width:82px!important;height:82px!important;} .solutions-360 .orbit-card b{font-size:11px!important;} .solutions-360 .orbit-card span{font-size:10px!important;} .solutions-360 .orbit-center{inset:36%!important;} .solutions-360 .orbit-center span{font-size:38px!important;} .solutions-360 .orbit-center small{font-size:8px!important;letter-spacing:2px!important;} .solutions-360 .oc1{top:-3px!important;margin-left:-41px!important} .solutions-360 .oc4{bottom:-3px!important;margin-left:-41px!important} .solutions-360 .oc2{right:0!important;top:20%!important} .solutions-360 .oc3{right:1%!important;bottom:20%!important} .solutions-360 .oc5{left:1%!important;bottom:20%!important} .solutions-360 .oc6{left:0!important;top:20%!important} } /* ===== 9. LATE OVERRIDES / FINAL PATCHES — see table of contents note at top of file ===== */ /* FINAL BUTTON SHAPE — square/chamfered corners, NOT pill/rounded */ .btn, .small-btn, .outline-btn, .footer-campaign, .service-next, .tab, .story-button, .nav-cta { border-radius: 0 !important; clip-path: polygon( 0 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px ) !important; } .btn:hover, .small-btn:hover, .outline-btn:hover, .footer-campaign:hover, .service-next:hover, .tab:hover, .story-button:hover, .nav-cta:hover { border-radius: 0 !important; } @media (max-width: 600px) { .btn, .small-btn, .outline-btn, .footer-campaign, .service-next, .tab, .story-button, .nav-cta { border-radius: 0 !important; clip-path: polygon( 0 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ) !important; } } /* FINAL USER BUTTON POLISH — match the Enquire Now button shape everywhere. No pill shape and no chamfer/clip-path. Keep the existing Home hover/sweep animation. */ .btn,.small-btn,.outline-btn,.footer-campaign,.service-next,.tab,.story-button, .nav-cta,.kr-btn,.ow-btn,.media-btn,.network-btn,.network-card-link,.kr-office-btn, .about-btn,.experience-link,.cta .btn,.about-cta .btn,.ow-cta .btn, .media-final-cta .btn,.kr-final-cta .btn,.kr-final-cta,.media-final-cta,.ow-cta .btn{ border-radius:6px !important; clip-path:none !important; } /* Keep compact controls comfortable on touch screens without changing their visual language. */ @media (max-width:760px){ .btn,.small-btn,.outline-btn,.footer-campaign,.service-next,.tab,.story-button, .nav-cta,.kr-btn,.ow-btn,.media-btn,.network-btn,.network-card-link,.kr-office-btn, .about-btn,.experience-link,.cta .btn,.about-cta .btn,.ow-cta .btn, .media-final-cta .btn,.kr-final-cta .btn,.kr-final-cta,.media-final-cta,.ow-cta .btn{ border-radius:6px !important; clip-path:none !important; max-width:100%; white-space:normal; text-align:center; } /* Keep the Home Our Solutions wheel completely inside the mobile viewport. */ .solutions-360{overflow:hidden !important; width:100%;} .solutions-360 .orbit-layout{width:100%;min-width:0;overflow:visible !important;} .solutions-360 .orbit-ring{ width:calc(100vw - 48px) !important; height:calc(100vw - 48px) !important; max-width:340px !important; max-height:340px !important; margin-inline:auto !important; } .solutions-360 .orbit-card{ width:74px !important; height:74px !important; } .solutions-360 .oc1{top:-1px !important;margin-left:-37px !important;} .solutions-360 .oc4{bottom:-1px !important;margin-left:-37px !important;} .solutions-360 .oc2{right:1px !important;top:19% !important;} .solutions-360 .oc3{right:1px !important;bottom:19% !important;} .solutions-360 .oc5{left:1px !important;bottom:19% !important;} .solutions-360 .oc6{left:1px !important;top:19% !important;} } @media (max-width:390px){ .solutions-360 .orbit-ring{ width:calc(100vw - 56px) !important; height:calc(100vw - 56px) !important; } .solutions-360 .orbit-card{width:68px !important;height:68px !important;} .solutions-360 .oc1{margin-left:-34px !important;} .solutions-360 .oc4{margin-left:-34px !important;} .solutions-360 .orbit-card b{font-size:10px !important;} .solutions-360 .orbit-card span{font-size:9px !important;} } /* FINAL 360° ORBIT MOBILE FIX — keep the full circular composition visible */ .solutions-360 .orbit-ring{aspect-ratio:1/1!important;border-radius:50%!important;overflow:visible!important;flex:none!important;} .solutions-360 .orbit-ring::before, .solutions-360 .orbit-ring::after{border-radius:50%!important;} @media (max-width:760px){ .solutions-360{overflow:visible!important;} .solutions-360 .orbit-layout{padding:0 8px!important;overflow:visible!important;} .solutions-360 .orbit-ring{ width:min(310px,calc(100vw - 76px))!important; height:min(310px,calc(100vw - 76px))!important; max-width:none!important; max-height:none!important; margin:6px auto 0!important; } .solutions-360 .orbit-card{ width:64px!important; height:64px!important; transform-origin:center!important; } .solutions-360 .orbit-card:hover, .solutions-360 .orbit-card.active{transform:scale(1.08)!important;} .solutions-360 .oc1{top:-2px!important;left:50%!important;margin-left:-32px!important;} .solutions-360 .oc4{bottom:-2px!important;left:50%!important;margin-left:-32px!important;} .solutions-360 .oc2{right:-1px!important;top:18%!important;} .solutions-360 .oc3{right:-1px!important;bottom:18%!important;} .solutions-360 .oc5{left:-1px!important;bottom:18%!important;} .solutions-360 .oc6{left:-1px!important;top:18%!important;} .solutions-360 .orbit-center{inset:34%!important;} .solutions-360 .orbit-center span{font-size:34px!important;line-height:1!important;} .solutions-360 .orbit-center small{font-size:7px!important;letter-spacing:1.8px!important;} .solutions-360 .orbit-center b{font-size:9px!important;margin-top:6px!important;} } @media (max-width:390px){ .solutions-360 .orbit-ring{ width:calc(100vw - 68px)!important; height:calc(100vw - 68px)!important; } .solutions-360 .orbit-card{width:58px!important;height:58px!important;} .solutions-360 .oc1,.solutions-360 .oc4{margin-left:-29px!important;} .solutions-360 .orbit-card b{font-size:9px!important;} .solutions-360 .orbit-card span{font-size:8px!important;} .solutions-360 .orbit-center{inset:33%!important;} } /* 360° Advertising Solutions — mobile reference match */ @media(max-width:760px){ .solutions-360{overflow:hidden!important} .solutions-360 .container{width:calc(100% - 24px)!important} .solutions-360 .orbit-layout{display:flex!important;flex-direction:column!important;gap:4px!important} .solutions-360 .orbit-ring{width:min(286px,92vw)!important;height:min(286px,92vw)!important;min-height:0!important;margin:0 auto!important;border-radius:50%!important;overflow:visible!important} .solutions-360 .orbit-ring:before{inset:7%!important} .solutions-360 .orbit-ring:after{inset:27%!important} .solutions-360 .orbit-center{inset:34%!important;min-width:0!important;min-height:0!important} .solutions-360 .orbit-center span{font-size:34px!important;line-height:1!important} .solutions-360 .orbit-center small{font-size:8px!important;letter-spacing:2px!important} .solutions-360 .orbit-center b{font-size:8px!important;margin-top:4px!important} .solutions-360 .orbit-card{width:48px!important;height:48px!important;padding:0!important} .solutions-360 .orbit-card b{font-size:8px!important;margin-bottom:1px!important} .solutions-360 .orbit-card span{font-size:6.5px!important;line-height:1!important} .solutions-360 .service-panel{padding:22px 4px 0!important;max-width:100%!important} .solutions-360 .service-panel h3{font-size:38px!important;line-height:.95!important;margin:10px auto 14px!important;max-width:330px!important} .solutions-360 .service-panel p{font-size:11px!important;line-height:1.65!important;min-height:0!important;max-width:330px!important;margin:0 auto!important} .solutions-360 .service-meter{max-width:330px!important;margin:22px auto 16px!important} } @media(max-width:360px){ .solutions-360 .orbit-ring{width:260px!important;height:260px!important} .solutions-360 .service-panel h3{font-size:34px!important} } /* FINAL 360 ORBIT MOBILE REFERENCE FIX Keep the desktop orbit untouched. On phones the ring must fit INSIDE the content column (never use viewport width larger than the container), while retaining the same six-point circular geometry as desktop/reference. */ @media (max-width:760px){ .solutions-360{overflow:hidden!important} .solutions-360 .container{overflow:visible!important} .solutions-360 .orbit-layout{ display:grid!important; grid-template-columns:1fr!important; justify-items:center!important; width:100%!important; } .solutions-360 .orbit-ring{ width:min(300px,calc(100vw - 42px))!important; height:auto!important; aspect-ratio:1 / 1!important; min-width:0!important; max-width:300px!important; margin:0 auto!important; flex:none!important; overflow:visible!important; } .solutions-360 .orbit-ring:before{inset:7%!important} .solutions-360 .orbit-ring:after{inset:25%!important} .solutions-360 .orbit-glow{inset:35%!important} .solutions-360 .orbit-center{ inset:34%!important; width:auto!important; height:auto!important; aspect-ratio:1!important; } .solutions-360 .orbit-center span{font-size:40px!important;line-height:1!important} .solutions-360 .orbit-center small{font-size:10px!important;letter-spacing:2px!important} .solutions-360 .orbit-center b{font-size:9px!important;margin-top:5px!important} .solutions-360 .orbit-card{ min-width:0!important; min-height:0!important; border-radius:50%!important; padding:0!important; box-shadow:0 10px 24px #00000012!important; } .solutions-360 .orbit-card b{font-size:9px!important;margin-bottom:2px!important} .solutions-360 .orbit-card span{font-size:9px!important;line-height:1.05!important} .solutions-360 .service-panel{ width:100%!important; max-width:560px!important; padding:34px 0 0!important; text-align:center!important; margin:0 auto!important; } .solutions-360 .service-panel h3{font-size:38px!important;line-height:.98!important} .solutions-360 .service-panel p{min-height:0!important} } @media (max-width:360px){ .solutions-360 .orbit-ring{width:min(270px,calc(100vw - 38px))!important} .solutions-360 .orbit-center span{font-size:36px!important} .solutions-360 .service-panel h3{font-size:35px!important} } /* FINAL MOBILE ORBIT GEOMETRY — preserve the desktop circular composition on phones */ @media (max-width:760px){ .solutions-360{overflow:hidden!important} .solutions-360 .orbit-layout{display:grid!important;grid-template-columns:1fr!important;justify-items:center!important} .solutions-360 .orbit-ring{ width:min(300px,calc(100vw - 40px))!important; height:min(300px,calc(100vw - 40px))!important; aspect-ratio:1/1!important; flex:none!important; margin:0 auto!important; border:1px solid #d9d9d9!important; border-radius:50%!important; position:relative!important; overflow:visible!important; } .solutions-360 .orbit-ring:before{ inset:8%!important; border-radius:50%!important; } .solutions-360 .orbit-ring:after{ inset:27%!important; border-radius:50%!important; } .solutions-360 .orbit-card{ width:50px!important; height:50px!important; min-width:50px!important; min-height:50px!important; padding:0!important; border-radius:50%!important; aspect-ratio:1/1!important; overflow:hidden!important; flex:none!important; margin:0!important; box-sizing:border-box!important; transform-origin:center center!important; } .solutions-360 .orbit-card b{font-size:10px!important;line-height:1!important;margin-bottom:3px!important} .solutions-360 .orbit-card span{font-size:9px!important;line-height:1.05!important} .solutions-360 .orbit-center{ width:auto!important;height:auto!important; inset:35%!important; border-radius:50%!important; aspect-ratio:1/1!important; } .solutions-360 .orbit-center span{font-size:41px!important;line-height:.9!important} .solutions-360 .orbit-center small{font-size:9px!important;letter-spacing:2px!important} .solutions-360 .orbit-center b{font-size:8px!important;margin-top:6px!important} .solutions-360 .service-panel{width:100%!important;max-width:430px!important;padding:32px 8px 0!important;text-align:center!important} .solutions-360 .service-panel h3{font-size:40px!important;line-height:.98!important} .solutions-360 .service-panel p{min-height:0!important} } @media (max-width:360px){ .solutions-360 .orbit-ring{width:280px!important;height:280px!important} .solutions-360 .orbit-card{width:47px!important;height:47px!important;min-width:47px!important;min-height:47px!important} .solutions-360 .orbit-center{inset:34%!important} .solutions-360 .orbit-center span{font-size:38px!important} } /* FINAL 360° ORBIT MOBILE ALIGNMENT — same orbit geometry as desktop, scaled only. */ @media (max-width:760px){ .solutions-360 .orbit-layout{display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;} .solutions-360 .orbit-ring{ width:min(390px,92vw)!important; height:auto!important; aspect-ratio:1/1!important; margin:0 auto!important; overflow:visible!important; } .solutions-360 .orbit-card{ border-radius:50%!important; aspect-ratio:1/1!important; padding:0!important; box-sizing:border-box!important; } .solutions-360 .orbit-center{border-radius:50%!important;} } /* FINAL 360 ORBIT MOBILE ALIGNMENT: JS owns all six positions. Remove legacy corner positioning/hover transforms so every card stays on the same circular path at equal angular intervals, like the desktop orbit. */ @media (max-width:760px){ .solutions-360 .orbit-ring{ width:min(300px,calc(100vw - 52px)) !important; height:min(300px,calc(100vw - 52px)) !important; max-width:300px !important; max-height:300px !important; margin-inline:auto !important; } .solutions-360 .orbit-card, .solutions-360 .orbit-card:hover, .solutions-360 .orbit-card:focus, .solutions-360 .orbit-card.active{ position:absolute !important; top:0 !important; left:0 !important; right:auto !important; bottom:auto !important; margin:0 !important; border-radius:50% !important; transform-origin:center center !important; } } @media (max-width:390px){ .solutions-360 .orbit-ring{ width:min(276px,calc(100vw - 52px)) !important; height:min(276px,calc(100vw - 52px)) !important; } } /* FINAL ORBIT POLISH — all six service cards remain perfectly circular, equally spaced and continuously moving on one true circular path. */ .solutions-360 .orbit-card, .solutions-360 .orbit-card:hover, .solutions-360 .orbit-card:focus, .solutions-360 .orbit-card.active{ border-radius:50% !important; aspect-ratio:1 / 1 !important; transition:background .28s ease,color .28s ease,box-shadow .28s ease !important; transform-origin:center center !important; } .solutions-360 .orbit-ring{ aspect-ratio:1 / 1 !important; border-radius:50% !important; overflow:visible !important; } @media(max-width:760px){ .solutions-360 .orbit-ring{ width:min(300px,calc(100vw - 44px)) !important; height:min(300px,calc(100vw - 44px)) !important; max-width:300px !important; max-height:300px !important; margin-inline:auto !important; } .solutions-360 .orbit-card, .solutions-360 .orbit-card:hover, .solutions-360 .orbit-card:focus, .solutions-360 .orbit-card.active{ border-radius:50% !important; min-width:0 !important; min-height:0 !important; padding:0 !important; overflow:hidden !important; } } @media(max-width:390px){ .solutions-360 .orbit-ring{ width:min(276px,calc(100vw - 48px)) !important; height:min(276px,calc(100vw - 48px)) !important; } } /* FINAL 360 ORBIT MOTION LOCK — JS is the single source of truth for card position. Prevent hover/active styles from overriding the circular motion on mobile or desktop. */ .solutions-360 .orbit-card, .solutions-360 .orbit-card:hover, .solutions-360 .orbit-card:focus, .solutions-360 .orbit-card.active{ transform:var(--orbit-transform, translate3d(0,0,0)) !important; transition:background .28s ease,color .28s ease,box-shadow .28s ease !important; transform-origin:center center !important; border-radius:50% !important; aspect-ratio:1 / 1 !important; } @media(max-width:760px){ .solutions-360 .orbit-card, .solutions-360 .orbit-card:hover, .solutions-360 .orbit-card:focus, .solutions-360 .orbit-card.active{ border-radius:50% !important; overflow:hidden !important; } } /* ===== HERO STATS: DESKTOP STATIC / MOBILE SLOW AUTO-SLIDE + DRAG ===== */ .stats-strip{overflow:hidden!important;position:relative!important} .stats-strip-track{ display:flex!important; align-items:stretch!important; width:max-content!important; min-width:0!important; transform:translate3d(0,0,0); will-change:transform; } .stats-strip .stats-item{ flex:0 0 calc(100vw / 6)!important; width:calc(100vw / 6)!important; min-width:calc(100vw / 6)!important; } /* Desktop stays completely static. */ @media(min-width:901px){ .stats-strip-track{animation:none!important;transform:translate3d(0,0,0)!important} } /* Mobile/tablet: very slow automatic movement + mouse/touch drag. */ @media(max-width:900px){ .stats-strip{overflow:hidden!important;touch-action:pan-y!important;cursor:grab} .stats-strip.is-dragging{cursor:grabbing} .stats-strip-track{animation:none!important;cursor:grab} .stats-strip .stats-item{ flex:0 0 205px!important; width:205px!important; min-width:205px!important; min-height:88px!important; } } @media(max-width:480px){ .stats-strip .stats-item{flex-basis:190px!important;width:190px!important;min-width:190px!important;padding:14px 15px!important} .stats-strip .stats-item strong{font-size:28px!important} .stats-strip .stats-item span{font-size:10px!important} } /* ========================================================= FINAL INNER HERO STANDARDIZATION Home hero is explicitly preserved. Every other page uses the same banner frame, typography scale and left alignment. ========================================================= */ .home-page .hero{height:680px!important;min-height:680px!important} .inner-page .about-hero, .inner-page .media-hero, .inner-page .media-detail-hero, .inner-page .network-hero, .inner-page .ow-hero, .inner-page .kr-hero, .inner-page .kr-enquiry-hero{ height:590px!important; min-height:590px!important; } .inner-page .about-hero-inner, .inner-page .media-hero-inner, .inner-page .network-hero-inner, .inner-page .ow-hero-inner, .inner-page .kr-hero-inner{ height:590px!important; min-height:590px!important; display:flex!important; align-items:center!important; padding-top:0!important; padding-bottom:0!important; } /* One shared compact hero type system */ .inner-page .about-hero-title, .inner-page .media-hero-copy h1, .inner-page .media-detail-hero .hero-inner h1, .inner-page .network-hero-copy h1, .inner-page .ow-hero h1, .inner-page .kr-hero h1, .inner-page .kr-enquiry-copy h1{ font-size:47px!important; line-height:.95!important; letter-spacing:-.7px!important; max-width:560px!important; margin:10px 0 16px!important; } .inner-page .about-hero-desc, .inner-page .media-hero-copy p, .inner-page .media-detail-hero .hero-inner p, .inner-page .network-hero-copy p, .inner-page .ow-hero-copy, .inner-page .kr-hero p, .inner-page .kr-enquiry-copy p{ font-size:14px!important; line-height:1.55!important; max-width:500px!important; margin-bottom:20px!important; } .inner-page .about-hero-copy, .inner-page .media-hero-copy, .inner-page .network-hero-copy, .inner-page .ow-hero-inner>div:first-child, .inner-page .kr-hero-inner, .inner-page .kr-enquiry-copy{ position:relative; z-index:4; } /* Detail pages: keep the same full-bleed hero treatment */ .inner-page .media-detail-hero .hero-inner{ height:590px!important; min-height:590px!important; display:flex!important; align-items:center!important; padding-top:0!important; padding-bottom:0!important; } .inner-page .media-detail-hero .hero-inner h1{max-width:560px!important} /* Careers: same visual frame as every other inner hero */ .inner-page .kr-hero{align-items:center!important} .inner-page .kr-hero-inner{padding-left:0!important} /* Enquire: use its existing image as a full hero background instead of a split banner */ .inner-page .kr-enquiry-hero .inner{ height:590px!important; min-height:590px!important; max-width:1240px!important; width:min(calc(100% - 64px),1240px)!important; display:flex!important; align-items:center!important; position:relative!important; } .inner-page .kr-enquiry-visual{ position:absolute!important; inset:0!important; width:100%!important; height:590px!important; min-height:590px!important; z-index:0!important; } .inner-page .kr-enquiry-visual:before{ background:linear-gradient(90deg,rgba(5,8,11,.94) 0%,rgba(5,8,11,.78) 40%,rgba(5,8,11,.25) 75%,rgba(5,8,11,.16) 100%)!important; } .inner-page .kr-enquiry-visual:after{display:none!important} .inner-page .kr-enquiry-copy{ width:min(620px,70%)!important; padding:0!important; } .inner-page .kr-enquiry-steps{max-width:560px!important;margin-top:26px!important} /* Our Work: static image in the hero; no train/work-showcase video */ .inner-page .ow-hero-media{object-position:center!important;filter:saturate(.92) contrast(1.04)!important} @media(max-width:760px){ .home-page .hero{height:520px!important;min-height:520px!important} .inner-page .about-hero, .inner-page .media-hero, .inner-page .media-detail-hero, .inner-page .network-hero, .inner-page .ow-hero, .inner-page .kr-hero, .inner-page .kr-enquiry-hero{ height:520px!important; min-height:520px!important; } .inner-page .about-hero-inner, .inner-page .media-hero-inner, .inner-page .network-hero-inner, .inner-page .ow-hero-inner, .inner-page .kr-hero-inner, .inner-page .media-detail-hero .hero-inner{ height:520px!important; min-height:520px!important; padding:0!important; } .inner-page .about-hero-title, .inner-page .media-hero-copy h1, .inner-page .media-detail-hero .hero-inner h1, .inner-page .network-hero-copy h1, .inner-page .ow-hero h1, .inner-page .kr-hero h1, .inner-page .kr-enquiry-copy h1{ font-size:36px!important; line-height:.98!important; letter-spacing:-.45px!important; max-width:100%!important; margin:8px 0 13px!important; } .inner-page .about-hero-desc, .inner-page .media-hero-copy p, .inner-page .media-detail-hero .hero-inner p, .inner-page .network-hero-copy p, .inner-page .ow-hero-copy, .inner-page .kr-hero p, .inner-page .kr-enquiry-copy p{ font-size:13px!important; line-height:1.45!important; max-width:360px!important; margin-bottom:16px!important; } .inner-page .about-hero-copy, .inner-page .media-hero-copy, .inner-page .network-hero-copy, .inner-page .ow-hero-inner>div:first-child, .inner-page .kr-hero-inner, .inner-page .kr-enquiry-copy{ width:100%!important; } .inner-page .kr-enquiry-hero .inner{ width:min(calc(100% - 32px),1240px)!important; height:520px!important; min-height:520px!important; } .inner-page .kr-enquiry-visual{height:520px!important;min-height:520px!important} .inner-page .kr-enquiry-steps{grid-template-columns:1fr!important;max-width:330px!important;margin-top:18px!important} .inner-page .kr-enquiry-step{padding:10px 12px!important} .inner-page .kr-enquiry-step b{font-size:18px!important;margin-bottom:3px!important} .inner-page .kr-enquiry-step span{font-size:11px!important} } /* FINAL NAV + ENQUIRE HERO REFINEMENT */ @media (min-width: 1051px){ .header .nav{gap:18px!important;font-size:14px!important;letter-spacing:0!important} .header .nav>a{font-size:14px!important;white-space:nowrap} .header .nav>a:not(.nav-cta){padding:26px 1px!important} .header .nav-cta{font-size:13px!important;padding:12px 16px!important;margin-left:2px!important;white-space:nowrap} .header .nav-dropdown{gap:2px!important} .header .nav-dropdown>a{font-size:14px!important} .header .nav-arrow{padding-inline:2px!important} } @media (min-width: 761px) and (max-width:1050px){ .header .nav{gap:12px!important;font-size:13px!important} .header .nav>a{font-size:13px!important;white-space:nowrap} .header .nav>a:not(.nav-cta){padding:25px 0!important} .header .nav-cta{font-size:11px!important;padding:11px 13px!important} } @media (max-width:760px){ .header .nav>a{font-size:14px!important} .header .nav{gap:0!important} .header .nav-cta{font-size:13px!important} } /* Enquire hero should remain a true full-width banner on mobile; do not crop the side edges because of the content container. */ .kr-page .kr-enquiry-hero .inner{width:100%!important;max-width:none!important} .kr-page .kr-enquiry-visual{left:0!important;right:0!important;width:100%!important} .kr-page .kr-enquiry-copy{width:min(58%,720px)!important;margin-left:max(32px,calc((100vw - var(--content-max))/2))!important} @media(max-width:900px){ .kr-page .kr-enquiry-copy{width:min(72%,520px)!important;margin-left:17px!important} } @media(max-width:600px){ .kr-page .kr-enquiry-copy{width:calc(100% - 32px)!important;margin-left:16px!important} .kr-page .kr-enquiry-visual img{object-position:center center!important} } /* FINAL NAV + ENQUIRE BANNER CLEANUP */ @media (min-width: 1051px){ .header .nav-wrap{justify-content:flex-start!important} .site-logo img{width:150px!important;max-height:46px!important} .header .nav{margin-left:auto!important;gap:28px!important;font-size:15px!important;align-items:center!important} .header .nav>a:not(.nav-cta){font-size:15px!important;font-weight:600!important;padding:29px 0!important} .header .nav-dropdown>a{font-size:15px!important;font-weight:600!important;padding:29px 0!important} .header .nav-arrow{font-size:10px!important;padding:6px 1px!important} .header .nav-cta{font-size:14px!important;font-weight:700!important;padding:12px 22px!important;margin-left:4px!important;min-height:42px!important} } @media (min-width: 761px) and (max-width:1050px){ .header .nav{margin-left:auto!important;gap:18px!important} .header .nav>a:not(.nav-cta),.header .nav-dropdown>a{font-size:14px!important;padding:27px 0!important} .header .nav-cta{font-size:13px!important;padding:11px 16px!important;margin-left:2px!important} } /* Enquire banner: true edge-to-edge frame on every viewport. Keep the shared hero height, but never let the banner itself inherit the content container's side margins. */ .kr-page .kr-enquiry-hero{width:100%!important;overflow:hidden!important} .kr-page .kr-enquiry-hero .inner{width:100vw!important;max-width:none!important;margin:0!important;padding-left:0!important;padding-right:0!important} .kr-page .kr-enquiry-visual{left:0!important;right:0!important;width:100vw!important;height:100%!important} .kr-page .kr-enquiry-visual img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important} .kr-page .kr-enquiry-copy{margin-left:clamp(24px,calc((100vw - 1240px)/2),80px)!important} @media(max-width:760px){ .kr-page .kr-enquiry-hero .inner{width:100vw!important;height:520px!important;min-height:520px!important} .kr-page .kr-enquiry-visual{width:100vw!important;height:520px!important;min-height:520px!important} .kr-page .kr-enquiry-visual img{width:100vw!important;height:520px!important;object-fit:cover!important;object-position:center center!important} .kr-page .kr-enquiry-copy{width:calc(100vw - 32px)!important;max-width:360px!important;margin-left:16px!important} } @media(max-width:390px){ .kr-page .kr-enquiry-copy{width:calc(100vw - 28px)!important;margin-left:14px!important} } /* ===== USER FINAL FIX 2026-09-21: compact nav + full Enquire banner ===== */ @media (min-width:1051px){ .header{height:82px!important;overflow:visible!important} .header .nav-wrap{ width:calc(100% - 56px)!important; max-width:1760px!important; margin:0 auto!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:28px!important; overflow:visible!important; } .header .site-logo{flex:0 0 auto!important} .header .site-logo img{width:145px!important;max-height:48px!important} .header .nav{ flex:1 1 auto!important; min-width:0!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:clamp(16px,1.55vw,30px)!important; white-space:nowrap!important; overflow:visible!important; } .header .nav>a:not(.nav-cta), .header .nav-dropdown>a{ font-size:14px!important; line-height:1!important; font-weight:600!important; padding:32px 0!important; margin:0!important; letter-spacing:0!important; } .header .nav-dropdown{gap:4px!important;flex:0 0 auto!important} .header .nav-arrow{padding:6px 0!important;font-size:9px!important} .header .nav-cta{ flex:0 0 auto!important; margin:0 8px 0 10px!important; padding:13px 20px!important; min-height:0!important; font-size:13px!important; line-height:1.2!important; border-radius:8px!important; white-space:nowrap!important; } } @media (min-width:1051px) and (max-width:1320px){ .header .nav-wrap{width:calc(100% - 32px)!important;gap:18px!important} .header .site-logo img{width:132px!important} .header .nav{gap:14px!important} .header .nav>a:not(.nav-cta),.header .nav-dropdown>a{font-size:10.5px!important} .header .nav-cta{font-size:11px!important;padding:11px 14px!important;margin-left:4px!important;margin-right:4px!important} } /* Enquire hero image is a true full-banner background; content stays safely inset. */ .kr-page .kr-enquiry-hero{ position:relative!important; width:100%!important; height:590px!important; min-height:590px!important; overflow:hidden!important; } .kr-page .kr-enquiry-hero .inner{ position:relative!important; width:100%!important; max-width:none!important; height:100%!important; min-height:100%!important; margin:0!important; padding:0!important; display:flex!important; align-items:center!important; } .kr-page .kr-enquiry-visual{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:100%!important; z-index:0!important; overflow:hidden!important; } .kr-page .kr-enquiry-visual img{ position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; max-width:none!important; object-fit:cover!important; object-position:center center!important; transform:none!important; } .kr-page .kr-enquiry-copy{ position:relative!important; z-index:3!important; width:min(560px,calc(100% - 64px))!important; margin:0 0 0 max(32px,calc((100vw - 1240px)/2))!important; padding:0!important; } @media(max-width:760px){ .kr-page .kr-enquiry-hero{height:520px!important;min-height:520px!important;width:100%!important} .kr-page .kr-enquiry-hero .inner{width:100%!important;height:520px!important;min-height:520px!important} .kr-page .kr-enquiry-visual{inset:0!important;width:100%!important;height:520px!important;min-height:520px!important} .kr-page .kr-enquiry-visual img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:58% center!important} .kr-page .kr-enquiry-copy{ width:calc(100% - 32px)!important; max-width:390px!important; margin:0 16px!important; padding:0!important; } .kr-page .kr-enquiry-visual:before{background:linear-gradient(90deg,rgba(5,8,11,.93) 0%,rgba(5,8,11,.70) 55%,rgba(5,8,11,.25) 100%)!important} .kr-page .kr-enquiry-visual:after{display:none!important} } /* ===== OUR NETWORK MAP + NAV POLISH ===== */ .network-reference-page .network-map-wrap{min-height:580px;overflow:visible} .network-reference-page .network-map{position:relative;width:min(100%,580px);height:auto;display:grid;place-items:center;z-index:2;filter:drop-shadow(0 28px 40px rgba(0,0,0,.16));animation:networkMapFloat 6s ease-in-out infinite} .network-reference-page .network-map-svg{display:block;width:100%;height:auto;overflow:visible} .network-reference-page .network-map-svg .base{fill:url(#base);stroke:#bfc6cc;stroke-width:2.4} .network-reference-page .network-map-svg .market{fill:url(#red);stroke:#fff;stroke-width:3;opacity:.22;transition:opacity .4s,filter .4s,transform .4s} .network-reference-page .network-map-svg .market.selected{opacity:1;filter:url(#glow)} .network-reference-page .network-map-aura{width:410px;height:410px;background:radial-gradient(circle,rgba(229,27,35,.12),rgba(229,27,35,0) 70%);z-index:1} .network-reference-page .map-pulse{width:18px;height:18px;border:2px solid #fff;background:var(--red);box-shadow:0 0 0 0 rgba(229,27,35,.55),0 0 20px rgba(229,27,35,.45);z-index:6} .network-reference-page .map-pulse.selected{box-shadow:0 0 0 12px rgba(229,27,35,.14),0 0 28px rgba(229,27,35,.55)} .network-reference-page .pulse-raj{left:34%;top:31%} .network-reference-page .pulse-guj{left:29%;top:43%} .network-reference-page .pulse-mah{left:40%;top:57%} .network-reference-page .map-city-marker{border-radius:7px;backdrop-filter:blur(8px);background:rgba(255,255,255,.94)} /* Keep Our Network navigation visually consistent with the rest of the site. */ .network-reference-page ~ *{} body.inner-page:has(.network-reference-page) .header .nav>a, body.inner-page:has(.network-reference-page) .header .nav-dropdown>a{position:relative;transition:color .28s ease,transform .28s ease,text-shadow .28s ease!important} body.inner-page:has(.network-reference-page) .header .nav>a::after, body.inner-page:has(.network-reference-page) .header .nav-dropdown>a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:2px;width:0;background:var(--red);box-shadow:0 0 10px rgba(229,27,35,.7);transition:width .32s cubic-bezier(.2,.75,0,1)!important} body.inner-page:has(.network-reference-page) .header .nav>a:hover, body.inner-page:has(.network-reference-page) .header .nav-dropdown>a:hover{color:var(--red)!important;transform:translateY(-2px)!important;text-shadow:0 0 10px rgba(229,27,35,.22)!important} body.inner-page:has(.network-reference-page) .header .nav>a:hover::after, body.inner-page:has(.network-reference-page) .header .nav-dropdown>a:hover::after{width:100%} body.inner-page:has(.network-reference-page) .header .nav .nav-cta{transition:transform .28s ease,box-shadow .28s ease,background .28s ease!important} body.inner-page:has(.network-reference-page) .header .nav .nav-cta:hover{transform:translateY(-3px)!important;box-shadow:0 0 0 1px #ff4148,0 10px 28px rgba(229,27,35,.28),0 0 20px rgba(229,27,35,.18)!important} @media(max-width:680px){ .network-reference-page .network-map-wrap{min-height:500px;padding:8px 0} .network-reference-page .network-map{width:min(100%,500px)} .network-reference-page .network-map-aura{width:330px;height:330px} .network-reference-page .pulse-raj{left:34%;top:31%} .network-reference-page .pulse-guj{left:29%;top:43%} .network-reference-page .pulse-mah{left:40%;top:57%} } @media(max-width:420px){ .network-reference-page .network-map-wrap{min-height:430px} .network-reference-page .network-map{width:100%} .network-reference-page .network-map-aura{width:285px;height:285px} } /* Exact supplied India outline map treatment */ .network-reference-page .india-outline-map{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 20px 30px rgba(0,0,0,.10));} .network-reference-page .india-outline-map > image{opacity:1;} .network-reference-page .market-region-layer{pointer-events:none;} .network-reference-page .india-outline-map .market{fill:#e51b23;fill-opacity:.18;stroke:#e51b23;stroke-width:1.5;stroke-opacity:.18;transition:fill-opacity .35s ease,filter .35s ease;} .network-reference-page .india-outline-map .market.selected{fill-opacity:.92;stroke:#e51b23;stroke-width:2.2;filter:drop-shadow(0 8px 14px rgba(229,27,35,.30));} .network-reference-page .india-outline-map .label{font:700 11px Inter,sans-serif;fill:#222;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;} .network-reference-page .india-outline-map .dot,.network-reference-page .india-outline-map .city-dot{fill:#e51b23;stroke:#fff;stroke-width:3;} .network-reference-page .india-outline-map .map-city-labels text{font:800 11px Inter,sans-serif;fill:#222;paint-order:stroke;stroke:#fff;stroke-width:3px;} .network-reference-page .network-map-wrap{min-height:620px;display:grid;place-items:center;position:relative;} .network-reference-page .network-map{width:min(100%,630px);height:auto;aspect-ratio:630/700;position:relative;} .network-reference-page .network-map-aura{width:420px;height:420px;pointer-events:none;} @media(max-width:680px){ .network-reference-page .network-map-wrap{min-height:520px;padding:0 4px;} .network-reference-page .network-map{width:min(100%,430px);} .network-reference-page .network-map-aura{width:300px;height:300px;} .network-reference-page .india-outline-map .label{font-size:10px;} .network-reference-page .india-outline-map .map-city-labels text{font-size:10px;} } /* Artificial India network map — reference-style visual */ .network-reference-page .network-map-wrap{min-height:560px;overflow:visible} .network-reference-page .network-map{width:min(100%,620px);display:grid;place-items:center;position:relative;filter:drop-shadow(0 24px 36px rgba(0,0,0,.13));animation:networkMapFloat 6s ease-in-out infinite} .network-reference-page .network-map-artificial{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;mix-blend-mode:multiply;transition:transform .45s ease,filter .45s ease} .network-reference-page .network-map:hover .network-map-artificial{transform:scale(1.015);filter:drop-shadow(0 28px 42px rgba(229,27,35,.16))} .network-reference-page .network-map-aura{width:380px;height:380px} @media(max-width:980px){.network-reference-page .network-map-wrap{min-height:520px}.network-reference-page .network-map{width:min(100%,570px)}} @media(max-width:680px){.network-reference-page .network-map-wrap{min-height:430px}.network-reference-page .network-map{width:100%;max-width:500px}.network-reference-page .network-map-artificial{max-height:470px}.network-reference-page .network-map-aura{width:280px;height:280px}} /* FINAL ARTIFICIAL INDIA VECTOR MAP — reference-aligned, no raster map image */ .network-reference-page .network-map-svg{width:100%;height:auto;display:block;overflow:visible;} .network-reference-page .state-region{fill:url(#networkMapBase);stroke:#ffffff;stroke-width:2.2;vector-effect:non-scaling-stroke;transition:fill .35s ease,filter .35s ease,opacity .35s ease;} .network-reference-page .market-region{fill:url(#networkMapSoft);opacity:.96;} .network-reference-page .market-region.active{fill:url(#networkMapActive);filter:url(#networkMapGlow);opacity:1;} .network-reference-page .map-label{font:800 12px Inter,Arial,sans-serif;fill:#222;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;} .network-reference-page .map-label.active{fill:#fff;stroke:#c90f18;stroke-width:3px;} .network-reference-page .city-dot{fill:#e91d27;stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke;} .network-reference-page .city-ring{fill:none;stroke:#e91d27;stroke-width:3;opacity:.9;animation:networkMapPulse 1.8s ease-out infinite;} @keyframes networkMapPulse{0%{r:8;opacity:.75}100%{r:20;opacity:0}} @media(max-width:680px){.network-reference-page .network-map-wrap{min-height:455px;padding:0 8px}.network-reference-page .network-map{width:100%;max-width:430px}.network-reference-page .network-map-svg{width:100%}.network-reference-page .map-label{font-size:11px}.network-reference-page .city-dot{stroke-width:2.5}} /* ===== FINAL NETWORK MAP SIZE + LAYOUT POLISH ===== */ .network-reference-page .network-map-layout{ grid-template-columns:235px minmax(0,1fr); gap:42px; align-items:center; margin-top:50px; } .network-reference-page .network-map-wrap{ min-height:680px; width:100%; display:grid; place-items:center; padding:0 12px; } .network-reference-page .network-map{ width:min(100%,680px); max-height:none; height:auto; transform-origin:center center; filter:drop-shadow(0 28px 42px rgba(0,0,0,.16)); } .network-reference-page .network-map-svg{ width:100%; height:auto; display:block; overflow:visible; } .network-reference-page .map-label{ font-size:15px; letter-spacing:.15px; } .network-reference-page .map-label.active{ font-size:16px; font-weight:900; } .network-reference-page .city-dot{r:6.5;} .network-reference-page .network-map-aura{ width:420px; height:420px; z-index:0; } .network-reference-page .network-map-compass{display:none} .network-reference-page .network-map-note{ align-self:center; margin:0; } @media(max-width:1180px){ .network-reference-page .network-map-layout{grid-template-columns:220px minmax(0,1fr);gap:28px} .network-reference-page .network-map-wrap{min-height:620px;padding:0} .network-reference-page .network-map{width:min(100%,620px)} } @media(max-width:980px){ .network-reference-page .network-map-layout{grid-template-columns:1fr;gap:25px} .network-reference-page .network-map-note{order:2} .network-reference-page .network-map-wrap{order:1;min-height:650px} .network-reference-page .network-map{width:min(100%,650px)} } @media(max-width:680px){ .network-reference-page .network-map-wrap{min-height:470px;padding:0} .network-reference-page .network-map{width:100%;max-width:none} .network-reference-page .network-map-aura{width:300px;height:300px} .network-reference-page .map-label{font-size:13px} .network-reference-page .map-label.active{font-size:14px} } /* ===== COMPACT NETWORK MAP ARRANGEMENT — reduce empty space, keep map prominent ===== */ .network-reference-page .network-map-section{ padding:58px 0 64px; } .network-reference-page .network-presence-head{ grid-template-columns:minmax(0,1fr) 260px; gap:48px; align-items:start; } .network-reference-page .network-presence-head h2{ font-size:clamp(47px,4.8vw,71px); margin:12px 0 14px; } .network-reference-page .network-presence-head p{ font-size:14px; line-height:1.6; max-width:520px; } .network-reference-page .network-market-list{ margin-top:0; } .network-reference-page .market-title{ padding:11px 16px; } .network-reference-page .market-tab{ padding:14px 16px; } .network-reference-page .network-map-layout{ grid-template-columns:195px minmax(0,1fr); gap:26px; margin-top:12px; align-items:start; } .network-reference-page .network-map-note{ padding:16px; } .network-reference-page .map-note-icon{ width:34px; height:34px; font-size:21px; margin-bottom:13px; } .network-reference-page .network-map-note strong{ font-size:13px; } .network-reference-page .network-map-note p{ font-size:10px; line-height:1.55; margin:7px 0 0; } .network-reference-page .network-map-legend{ gap:7px; margin-top:14px; font-size:9px; } .network-reference-page .network-map-wrap{ min-height:0; padding:0; align-items:start; } .network-reference-page .network-map{ width:min(100%,560px); filter:drop-shadow(0 20px 30px rgba(0,0,0,.14)); } .network-reference-page .network-map-aura{ width:360px; height:360px; } @media(max-width:1180px){ .network-reference-page .network-map-layout{grid-template-columns:185px minmax(0,1fr);gap:22px;margin-top:12px} .network-reference-page .network-map-wrap{min-height:0} .network-reference-page .network-map{width:min(100%,540px)} } @media(max-width:980px){ .network-reference-page .network-map-section{padding:52px 0 58px} .network-reference-page .network-presence-head{grid-template-columns:1fr;gap:24px} .network-reference-page .network-market-list{max-width:420px} .network-reference-page .network-map-layout{grid-template-columns:1fr;gap:10px;margin-top:16px} .network-reference-page .network-map-wrap{order:1;min-height:0} .network-reference-page .network-map-note{order:2;max-width:320px} .network-reference-page .network-map{width:min(100%,500px)} } @media(max-width:680px){ .network-reference-page .network-map-section{padding:45px 0 48px} .network-reference-page .network-presence-head h2{font-size:48px} .network-reference-page .network-map-layout{gap:8px;margin-top:12px} .network-reference-page .network-map-wrap{min-height:0} .network-reference-page .network-map{width:100%;max-width:440px} .network-reference-page .network-map-aura{width:280px;height:280px} } /* FINAL MAP SIZE BOOST — keep the compact layout, enlarge only the India map */ @media(min-width:1181px){ .network-reference-page .network-map-wrap{min-height:0;} .network-reference-page .network-map{width:min(100%,680px);} .network-reference-page .network-map-aura{width:430px;height:430px;} } @media(min-width:981px) and (max-width:1180px){ .network-reference-page .network-map{width:min(100%,640px);} .network-reference-page .network-map-aura{width:400px;height:400px;} } /* ===== FINAL USER REQUEST — BIGGER MAP + REDUCE TOP/BOTTOM WHITE SPACE ===== */ .network-reference-page .network-map-section{ padding:32px 0 24px; } .network-reference-page .network-map-layout{ grid-template-columns:190px minmax(0,1fr); gap:18px; margin-top:0; align-items:center; } .network-reference-page .network-map-wrap{ min-height:0; padding:0; margin-top:-8px; margin-bottom:-26px; } .network-reference-page .network-map{ width:min(100%,820px); transform:scale(1.08); transform-origin:center center; filter:drop-shadow(0 24px 36px rgba(0,0,0,.14)); } .network-reference-page .network-map-aura{ width:480px; height:480px; } @media(max-width:1180px){ .network-reference-page .network-map-layout{grid-template-columns:180px minmax(0,1fr);gap:16px;margin-top:0} .network-reference-page .network-map-wrap{margin-top:-4px;margin-bottom:-18px} .network-reference-page .network-map{width:min(100%,760px);transform:scale(1.05)} } @media(max-width:980px){ .network-reference-page .network-map-section{padding:38px 0 30px} .network-reference-page .network-map-layout{grid-template-columns:1fr;gap:4px;margin-top:4px} .network-reference-page .network-map-wrap{order:1;margin:0;min-height:0} .network-reference-page .network-map{width:min(100%,680px);transform:none} .network-reference-page .network-map-note{order:2} } @media(max-width:680px){ .network-reference-page .network-map-section{padding:30px 0 24px} .network-reference-page .network-map-layout{gap:2px;margin-top:2px} .network-reference-page .network-map{width:100%;max-width:none;transform:none} .network-reference-page .network-map-aura{width:300px;height:300px} } /* ===== FINAL COMPACT GAP FIX — bring the map immediately under the intro ===== */ @media(min-width:981px){ .network-reference-page .network-map-layout{ margin-top:-115px; gap:14px; align-items:start; } .network-reference-page .network-map-wrap{ margin-top:0; margin-bottom:-40px; } .network-reference-page .network-map{ width:min(100%,880px); transform:scale(1.04); transform-origin:top center; } } @media(min-width:1181px){ .network-reference-page .network-map-layout{margin-top:-125px;} .network-reference-page .network-map{width:min(100%,920px);} } @media(max-width:980px){ .network-reference-page .network-map-layout{margin-top:-35px;gap:4px;} .network-reference-page .network-map-wrap{margin-top:0;margin-bottom:-15px;} } /* ===== FINAL REFERENCE MATCH: NETWORK MAP SCALE + COMPACT SPACING ===== */ .network-reference-page .network-map-section{padding:34px 0 18px!important;} .network-reference-page .network-presence-head{grid-template-columns:minmax(0,1fr) 280px;gap:42px;align-items:start;} .network-reference-page .network-presence-head h2{margin:10px 0 14px;} .network-reference-page .network-presence-head p{margin-bottom:0;} .network-reference-page .network-map-layout{ grid-template-columns:155px minmax(320px,1fr) 38px!important; gap:24px!important; margin-top:22px!important; align-items:center!important; } .network-reference-page .network-map-note{padding:18px!important;} .network-reference-page .map-note-icon{width:34px;height:34px;font-size:21px;margin-bottom:13px;} .network-reference-page .network-map-note strong{font-size:13px;} .network-reference-page .network-map-note p{font-size:9px;line-height:1.55;} .network-reference-page .network-map-legend{gap:7px;margin-top:14px;font-size:9px;} .network-reference-page .network-map-wrap{ min-height:360px!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; } .network-reference-page .network-map{ width:clamp(320px,42vw,520px)!important; max-width:none!important; transform:none!important; margin:0 auto!important; } .network-reference-page .network-map-svg{width:100%!important;height:auto!important;} .network-reference-page .network-map-aura{width:380px;height:380px;} .network-reference-page .network-map-compass{font-size:11px;} .network-reference-page .network-map-compass b{font-size:21px;} @media(max-width:980px){ .network-reference-page .network-map-section{padding:32px 0 24px!important;} .network-reference-page .network-map-layout{grid-template-columns:1fr!important;gap:8px!important;margin-top:18px!important;} .network-reference-page .network-map-wrap{min-height:0!important;order:1;} .network-reference-page .network-map{width:min(88vw,520px)!important;} .network-reference-page .network-map-note{order:2;max-width:320px;} .network-reference-page .network-map-compass{display:none;} } @media(max-width:680px){ .network-reference-page .network-presence-head{gap:18px;} .network-reference-page .network-map-layout{margin-top:12px!important;} .network-reference-page .network-map{width:min(94vw,430px)!important;} .network-reference-page .network-map-aura{width:280px;height:280px;} } /* FINAL FINAL — larger map, tighter vertical composition */ @media(min-width:1181px){ .network-reference-page .network-map-section{padding:24px 0 0!important;} .network-reference-page .network-map-layout{ grid-template-columns:190px minmax(0,1fr); gap:18px!important; margin-top:-38px!important; align-items:center!important; } .network-reference-page .network-map-wrap{ min-height:0!important; margin-top:0!important; margin-bottom:-70px!important; padding:0!important; } .network-reference-page .network-map{ width:min(100%,700px)!important; max-width:none!important; transform:none!important; margin:0 auto!important; } .network-reference-page .network-map-aura{width:500px;height:500px;} } @media(min-width:981px) and (max-width:1180px){ .network-reference-page .network-map-section{padding:28px 0 0!important;} .network-reference-page .network-map-layout{ grid-template-columns:180px minmax(0,1fr); gap:16px!important; margin-top:-28px!important; align-items:center!important; } .network-reference-page .network-map-wrap{ min-height:0!important; margin:0 0 -55px!important; padding:0!important; } .network-reference-page .network-map{width:min(100%,650px)!important;transform:none!important;} } @media(max-width:980px){ .network-reference-page .network-map-section{padding:30px 0 10px!important;} .network-reference-page .network-map-layout{margin-top:-8px!important;gap:4px!important;} .network-reference-page .network-map-wrap{margin:0!important;min-height:0!important;} .network-reference-page .network-map{width:min(100%,620px)!important;transform:none!important;} } @media(max-width:680px){ .network-reference-page .network-map-section{padding:24px 0 8px!important;} .network-reference-page .network-map-layout{margin-top:-4px!important;gap:2px!important;} .network-reference-page .network-map{width:100%!important;} } /* FINAL REFERENCE MATCH 2 — compact vertical composition + larger readable map */ @media (min-width: 981px){ .network-reference-page .network-map-section{ padding: 18px 0 0 !important; } .network-reference-page .network-presence-head{ grid-template-columns:minmax(0,1fr) 280px !important; gap:42px !important; align-items:start !important; } .network-reference-page .network-presence-head h2{ margin: 4px 0 10px !important; } .network-reference-page .network-presence-head p{ margin:0 !important; max-width:560px; } .network-reference-page .network-map-layout{ grid-template-columns:155px minmax(0,1fr) 38px !important; gap:24px !important; margin-top:10px !important; align-items:center !important; } .network-reference-page .network-map-wrap{ min-height:390px !important; margin:0 0 -18px !important; padding:0 !important; display:grid !important; place-items:center !important; } .network-reference-page .network-map{ width:clamp(360px, 34vw, 410px) !important; max-width:none !important; transform:none !important; margin:0 auto !important; } .network-reference-page .network-map-aura{ width:360px !important; height:360px !important; } .network-reference-page .network-map-note{ align-self:center !important; } } @media (min-width: 1181px){ .network-reference-page .network-map-wrap{min-height:385px !important;} .network-reference-page .network-map{width:390px !important;} } @media (max-width: 980px){ .network-reference-page .network-map-section{padding:24px 0 8px !important;} .network-reference-page .network-map-layout{margin-top:8px !important;} } /* FINAL USER REFERENCE FIX — larger map, tighter vertical spacing, compact info card */ @media (min-width: 981px){ .network-reference-page .network-map-section{ padding: 10px 0 0 !important; } .network-reference-page .network-presence-head{ grid-template-columns:minmax(0,1fr) 250px !important; gap: 28px !important; align-items:start !important; } .network-reference-page .network-presence-head h2{ margin: 0 0 8px !important; } .network-reference-page .network-presence-head p{ margin: 0 !important; max-width: 590px !important; } .network-reference-page .network-map-layout{ grid-template-columns:140px minmax(0,1fr) !important; gap: 14px !important; margin-top: -2px !important; align-items:center !important; } .network-reference-page .network-map-note{ width:126px !important; box-sizing:border-box !important; padding:12px !important; justify-self:start !important; align-self:center !important; } .network-reference-page .map-note-icon{ width:30px !important; height:30px !important; font-size:17px !important; margin-bottom:10px !important; } .network-reference-page .network-map-note strong{font-size:10px !important;} .network-reference-page .network-map-note p{font-size:8px !important;line-height:1.45 !important;} .network-reference-page .network-map-legend{gap:5px !important;margin-top:10px !important;font-size:8px !important;} .network-reference-page .network-map-wrap{ min-height:420px !important; margin:0 0 -62px !important; padding:0 !important; display:grid !important; place-items:center !important; } .network-reference-page .network-map{ width:470px !important; max-width:none !important; margin:0 auto !important; transform:none !important; } .network-reference-page .network-map-svg{width:100% !important;height:auto !important;} .network-reference-page .network-map-aura{width:410px !important;height:410px !important;} } @media (min-width:1181px){ .network-reference-page .network-map{width:500px !important;} .network-reference-page .network-map-wrap{min-height:425px !important;margin-bottom:-82px !important;} } @media (max-width:980px){ .network-reference-page .network-map-section{padding:18px 0 0 !important;} .network-reference-page .network-map-layout{margin-top:4px !important;gap:8px !important;} .network-reference-page .network-map-note{width:150px !important;padding:14px !important;} .network-reference-page .network-map-wrap{min-height:0 !important;margin:0 !important;} .network-reference-page .network-map{width:min(94vw,520px) !important;} } @media (max-width:680px){ .network-reference-page .network-map-section{padding:14px 0 0 !important;} .network-reference-page .network-map-layout{margin-top:4px !important;gap:4px !important;} .network-reference-page .network-map{width:min(96vw,500px) !important;} .network-reference-page .network-map-note{width:150px !important;} } /* ===== FINAL MAP SCALE + WHITESPACE CORRECTION ===== */ @media (min-width: 1181px){ .network-reference-page .network-map-section{ padding: 6px 0 0 !important; } .network-reference-page .network-map-layout{ grid-template-columns: 150px minmax(0,1fr) !important; gap: 8px !important; margin-top: -78px !important; align-items: center !important; } .network-reference-page .network-map-note{ width: 130px !important; padding: 13px !important; justify-self: start !important; } .network-reference-page .network-map-wrap{ min-height: 0 !important; margin: 0 0 -105px !important; padding: 0 !important; display: grid !important; place-items: center !important; } .network-reference-page .network-map{ width: 650px !important; max-width: none !important; margin: 0 auto !important; transform: none !important; } .network-reference-page .network-map-aura{ width: 520px !important; height: 520px !important; } } @media (min-width: 981px) and (max-width: 1180px){ .network-reference-page .network-map-section{ padding: 8px 0 0 !important; } .network-reference-page .network-map-layout{ grid-template-columns: 145px minmax(0,1fr) !important; gap: 10px !important; margin-top: -55px !important; } .network-reference-page .network-map-note{ width: 128px !important; } .network-reference-page .network-map-wrap{ min-height: 0 !important; margin: 0 0 -70px !important; } .network-reference-page .network-map{ width: 600px !important; max-width: none !important; } } /* FINAL — LARGE DESKTOP INDIA MAP, MATCH EXACT-MAP VISUAL SCALE */ @media (min-width: 1181px){ .network-reference-page .network-map-section{padding:28px 0 18px !important;} .network-reference-page .network-map-layout{ grid-template-columns:190px minmax(0,1fr) !important; gap:14px !important; margin-top:-4px !important; align-items:center !important; } .network-reference-page .network-map-wrap{ min-height:500px !important; height:500px !important; margin-top:-18px !important; margin-bottom:-38px !important; overflow:visible !important; } .network-reference-page .network-map{ width:min(100%,900px) !important; max-width:none !important; transform:scale(1) !important; transform-origin:center center !important; } .network-reference-page .network-map-svg{width:100% !important;height:auto !important;} .network-reference-page .network-map-aura{width:520px !important;height:520px !important;} .network-reference-page .network-map-note{padding:16px !important;} } @media (min-width: 981px) and (max-width:1180px){ .network-reference-page .network-map-wrap{min-height:500px !important;height:500px !important;margin-top:-12px !important;margin-bottom:-28px !important;} .network-reference-page .network-map{width:min(100%,760px) !important;} } /* FINAL USER REQUEST: network map 40% larger on desktop */ @media (min-width: 981px){ .network-reference-page .network-map-wrap{ min-height: 520px !important; overflow: visible !important; margin-top: -8px !important; margin-bottom: -28px !important; } .network-reference-page .network-map{ width: min(100%, 760px) !important; max-width: 760px !important; transform: scale(1.4) !important; transform-origin: center center !important; z-index: 5 !important; } .network-reference-page .network-map-svg{ width: 100% !important; height: auto !important; } } /* ===== FINAL NETWORK MAP: EXACT 630x700 + WORKING MARKET HIGHLIGHTS + MOBILE SAFE ===== */ .network-reference-page #indiaNetworkSvg.network-map-svg{ width:630px !important; height:700px !important; max-width:none !important; display:block !important; flex:none !important; } .network-reference-page .network-map{ width:630px !important; max-width:none !important; height:700px !important; transform:none !important; } .network-reference-page .network-map-svg .market-region.active{ fill:#e91d27 !important; opacity:1 !important; filter:drop-shadow(0 8px 16px rgba(229,27,35,.38)) !important; } .network-reference-page .network-map-svg .map-label.active{ fill:#ffffff !important; stroke:#c90f18 !important; font-weight:900 !important; } .network-reference-page .network-map-svg .city-dot.active{ fill:#e91d27 !important; stroke:#ffffff !important; stroke-width:4 !important; filter:drop-shadow(0 3px 7px rgba(229,27,35,.45)); } .network-reference-page .network-map-svg .city-ring.active{ stroke:#e91d27 !important; opacity:1 !important; animation:networkMapPulse 1.4s ease-out infinite !important; } .network-reference-page .market-tab{cursor:pointer !important; position:relative; z-index:20; pointer-events:auto !important;} .network-reference-page .network-map-layout{overflow:visible !important;} @media (max-width:980px){ .network-reference-page .network-map-section{padding:18px 0 8px !important;} .network-reference-page .network-map-layout{display:grid !important;grid-template-columns:1fr !important;gap:12px !important;margin-top:8px !important;} .network-reference-page .network-map-wrap{width:100% !important;min-height:0 !important;height:auto !important;margin:0 !important;padding:0 !important;overflow:visible !important;} .network-reference-page .network-map{width:min(94vw,630px) !important;height:auto !important;max-width:630px !important;} .network-reference-page #indiaNetworkSvg.network-map-svg{width:100% !important;height:auto !important;max-width:630px !important;} .network-reference-page .network-map-note{order:2;width:min(100%,320px) !important;justify-self:center !important;} } @media (max-width:680px){ .network-reference-page .network-presence-head{grid-template-columns:1fr !important;gap:16px !important;} .network-reference-page .network-market-list{width:100% !important;max-width:none !important;} .network-reference-page .network-map-section{padding:14px 0 6px !important;} .network-reference-page .network-map-layout{margin-top:4px !important;gap:10px !important;} .network-reference-page .network-map{width:100% !important;max-width:630px !important;height:auto !important;} .network-reference-page #indiaNetworkSvg.network-map-svg{width:100% !important;height:auto !important;} .network-reference-page .network-map-note{width:min(92vw,320px) !important;padding:14px !important;} .network-reference-page .map-label{font-size:11px !important;} } /* FINAL NETWORK POLISH: remove rotating hero orbit + enlarge Explore Our Network card */ .network-reference-page .network-hero-orbit, .network-reference-page .network-hero-orbit::before, .network-reference-page .network-hero-orbit::after{ display:none !important; animation:none !important; } @media (min-width:981px){ .network-reference-page .network-map-note{ width:320px !important; min-height:300px !important; padding:30px !important; box-sizing:border-box !important; } .network-reference-page .network-map-note .map-note-icon{ width:58px !important; height:58px !important; font-size:31px !important; margin-bottom:24px !important; } .network-reference-page .network-map-note strong{ font-size:20px !important; line-height:1.1 !important; } .network-reference-page .network-map-note p{ font-size:14px !important; line-height:1.65 !important; max-width:250px !important; margin-top:12px !important; } .network-reference-page .network-map-legend{ gap:12px !important; margin-top:24px !important; font-size:13px !important; } .network-reference-page .network-map-layout{ grid-template-columns:320px minmax(0,1fr) 50px !important; gap:28px !important; } } @media (min-width:981px) and (max-width:1200px){ .network-reference-page .network-map-note{width:290px !important;padding:26px !important;} .network-reference-page .network-map-layout{grid-template-columns:290px minmax(0,1fr) 36px !important;gap:20px !important;} } /* ===== KRISHNA AI — cute, quiet floating robot ===== */ .chatbot{ position:fixed!important;right:26px!important;bottom:24px!important;z-index:220!important; width:62px!important;height:62px!important;padding:0!important;border:0!important;background:transparent!important; display:block!important;cursor:pointer!important;filter:drop-shadow(0 14px 24px rgba(0,0,0,.16)); animation:krChatFloat 4.6s ease-in-out infinite; } .chatbot-orb{ position:relative!important;width:58px!important;height:58px!important;border-radius:18px!important; display:grid!important;place-items:center!important;background:linear-gradient(145deg,#fff 0%,#fff7f7 48%,#ffe8e9 100%)!important; border:1px solid rgba(229,27,35,.22)!important;box-shadow:0 10px 28px rgba(229,27,35,.16),0 0 0 5px rgba(229,27,35,.05)!important; overflow:visible!important;animation:krChatGlow 3.8s ease-in-out infinite; } .chatbot-orb::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(229,27,35,.12);border-radius:22px;animation:krChatRing 5s linear infinite;pointer-events:none} .bot-aura{position:absolute;inset:7px;border-radius:14px;background:radial-gradient(circle at 50% 20%,#fff,transparent 60%);} .bot-antenna{position:absolute;top:-8px;left:50%;width:2px;height:9px;background:#25282b;transform:translateX(-50%);border-radius:3px} .bot-antenna::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#e51b23;left:50%;top:-4px;transform:translateX(-50%);box-shadow:0 0 8px rgba(229,27,35,.55);animation:krChatBlink 2.8s ease-in-out infinite} .bot-face{position:relative;width:36px;height:29px;border-radius:11px;background:#17191c;border:2px solid #2d3135;box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 5px 12px rgba(0,0,0,.15);display:block} .bot-face i{position:absolute;top:9px;width:5px;height:7px;border-radius:4px;background:#fff;box-shadow:0 0 7px rgba(255,255,255,.45);animation:krChatEye 4.2s infinite} .bot-face i:first-child{left:8px}.bot-face i:nth-child(2){right:8px} .bot-face b{position:absolute;left:50%;bottom:4px;width:9px;height:3px;border-bottom:2px solid #e51b23;border-radius:0 0 8px 8px;transform:translateX(-50%)} .chatbot-ping{position:absolute!important;right:2px!important;top:2px!important;width:9px!important;height:9px!important;border-radius:50%!important;background:#32d46b!important;border:2px solid #fff!important;box-shadow:0 0 0 0 rgba(50,212,107,.4)!important;animation:krChatOnline 2s infinite!important} .chatbot-text{position:absolute!important;right:72px!important;top:7px!important;background:#111416!important;color:#fff!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:11px!important;padding:7px 10px!important;opacity:0!important;transform:translateX(8px)!important;transition:.25s ease!important;white-space:nowrap!important;pointer-events:none!important;box-shadow:0 12px 30px rgba(0,0,0,.15)!important} .chatbot:hover .chatbot-text,.chatbot:focus-visible .chatbot-text{opacity:1!important;transform:none!important} .chatbot-text b{font-size:11px!important;letter-spacing:.2px}.chatbot-text small{font-size:9px!important;color:#b9bec3!important}.chatbot-text small i,.chat-head small i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#32d46b;margin-right:3px} .chat-panel{right:26px!important;bottom:96px!important;width:min(360px,calc(100vw - 32px))!important;z-index:219!important;border-radius:18px!important;background:#fff!important;border:1px solid #e9e9e9!important;box-shadow:0 24px 70px rgba(0,0,0,.2)!important} .chat-head{background:linear-gradient(135deg,#151719,#26292d)!important;padding:14px 15px!important}.chat-brand-icon{width:32px!important;height:32px!important;border-radius:10px!important;background:#e51b23!important}.mini-bot{font-size:16px!important}.chat-body{padding:14px!important}.chat-options button:hover{transform:translateX(3px)!important} @keyframes krChatFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}} @keyframes krChatGlow{0%,100%{box-shadow:0 10px 28px rgba(229,27,35,.14),0 0 0 5px rgba(229,27,35,.05)}50%{box-shadow:0 13px 32px rgba(229,27,35,.2),0 0 0 8px rgba(229,27,35,.035)}} @keyframes krChatRing{to{transform:rotate(360deg)}} @keyframes krChatEye{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.15)}} @keyframes krChatBlink{0%,86%,100%{opacity:1}90%{opacity:.35}} @keyframes krChatOnline{0%,100%{box-shadow:0 0 0 0 rgba(50,212,107,.35)}50%{box-shadow:0 0 0 5px rgba(50,212,107,0)}} @media(max-width:760px){ .chatbot{right:14px!important;bottom:14px!important;width:50px!important;height:50px!important} .chatbot-orb{width:47px!important;height:47px!important;border-radius:15px!important}.bot-face{transform:scale(.88)} .chatbot-text{display:none!important}.chat-panel{right:14px!important;bottom:72px!important;width:calc(100vw - 28px)!important;max-width:360px!important} } @media(prefers-reduced-motion:reduce){.chatbot,.chatbot-orb,.bot-face i,.bot-antenna::before,.chatbot-ping,.chatbot-orb::after{animation:none!important}} /* ===== FINAL KRISHNA AI — smaller, compact, hero-style palette ===== */ .chatbot{ width:50px!important;height:50px!important;right:22px!important;bottom:22px!important; animation:krChatFloatSmall 5s ease-in-out infinite!important; filter:drop-shadow(0 10px 20px rgba(0,0,0,.28))!important; } .chatbot-orb{ width:48px!important;height:48px!important;border-radius:14px!important; background:linear-gradient(145deg,#202326 0%,#111416 70%,#0b0d0f 100%)!important; border:1px solid rgba(229,27,35,.5)!important; box-shadow:0 9px 22px rgba(0,0,0,.32),0 0 0 3px rgba(229,27,35,.08),0 0 18px rgba(229,27,35,.12)!important; animation:krChatHeroGlow 4.8s ease-in-out infinite!important; } .chatbot-orb::after{display:none!important} .bot-aura{inset:6px!important;border-radius:11px!important;background:radial-gradient(circle at 50% 25%,rgba(229,27,35,.18),transparent 65%)!important} .bot-antenna{background:#bfc3c7!important;height:7px!important;top:-6px!important} .bot-antenna::before{width:4px!important;height:4px!important;background:#e51b23!important;box-shadow:0 0 7px rgba(229,27,35,.65)!important} .bot-face{width:31px!important;height:25px!important;border-radius:9px!important;background:#090b0d!important;border:1px solid #454a4f!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.3)!important} .bot-face i{top:8px!important;width:4px!important;height:6px!important;background:#fff!important} .bot-face i:first-child{left:7px!important}.bot-face i:nth-child(2){right:7px!important} .bot-face b{bottom:3px!important;width:8px!important;border-bottom-color:#e51b23!important} .chatbot-ping{width:7px!important;height:7px!important;right:0!important;top:0!important} .chatbot-text{right:59px!important;top:4px!important;background:#151719!important;border:1px solid rgba(229,27,35,.24)!important;border-radius:9px!important;padding:6px 9px!important} .chatbot-text b{font-size:10px!important}.chatbot-text small{font-size:8px!important;color:#aeb4ba!important} .chat-panel{ right:22px!important;bottom:82px!important;width:min(300px,calc(100vw - 28px))!important; border-radius:14px!important;background:#121518!important;color:#fff!important; border:1px solid rgba(229,27,35,.2)!important;box-shadow:0 22px 55px rgba(0,0,0,.42),0 0 25px rgba(229,27,35,.08)!important; } .chat-head{padding:11px 12px!important;background:linear-gradient(135deg,#202326,#101214)!important;border-bottom:1px solid rgba(255,255,255,.08)!important} .chat-brand-icon{width:28px!important;height:28px!important;border-radius:8px!important;background:#e51b23!important} .chat-body{padding:11px!important} .chat-welcome{padding:9px!important;border-radius:10px!important;background:rgba(255,255,255,.035)!important} .chat-avatar{width:28px!important;height:28px!important;flex-basis:28px!important;border-radius:8px!important;background:#e51b23!important;color:#fff!important} .chat-options{gap:6px!important;margin-top:9px!important} .chat-options button{padding:9px 10px!important;border-radius:9px!important;background:#181c20!important;border-color:rgba(255,255,255,.08)!important;font-size:10px!important} .chat-options button:hover{background:rgba(229,27,35,.1)!important;border-color:rgba(229,27,35,.45)!important} .chat-direct{margin-top:9px!important}.chat-direct a{padding:7px!important;border-radius:8px!important;font-size:9px!important} @keyframes krChatFloatSmall{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-3px,0)}} @keyframes krChatHeroGlow{0%,100%{box-shadow:0 9px 22px rgba(0,0,0,.32),0 0 0 3px rgba(229,27,35,.07),0 0 14px rgba(229,27,35,.08)}50%{box-shadow:0 11px 25px rgba(0,0,0,.36),0 0 0 5px rgba(229,27,35,.1),0 0 22px rgba(229,27,35,.16)}} @media(max-width:760px){ .chatbot{width:44px!important;height:44px!important;right:13px!important;bottom:13px!important} .chatbot-orb{width:42px!important;height:42px!important;border-radius:12px!important} .bot-face{transform:scale(.86)!important} .chat-panel{right:12px!important;bottom:64px!important;width:calc(100vw - 24px)!important;max-width:300px!important} } /* ===== CHATBOT — MODERN GLASS / PREMIUM HERO LANGUAGE ===== */ .chatbot{position:fixed;right:26px;bottom:26px;z-index:180;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.32);border-radius:16px;background:rgba(10,12,15,.38);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 14px 40px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.12);display:grid;place-items:center;cursor:pointer;transition:transform .35s cubic-bezier(.16,.7,0,1),border-color .3s,background .3s} .chatbot:hover{transform:translateY(-4px) scale(1.04);border-color:rgba(235,29,39,.75);background:rgba(12,14,17,.55)} .chatbot-orb{position:relative;width:31px;height:31px;border-radius:11px;background:linear-gradient(145deg,#191d21,#07090b);border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;box-shadow:0 5px 18px rgba(0,0,0,.35),0 0 18px rgba(225,25,35,.14);animation:botFloat 4.8s ease-in-out infinite} .bot-aura{position:absolute;inset:-5px;border-radius:14px;border:1px solid rgba(231,29,39,.18);animation:botAura 3.2s ease-in-out infinite} .bot-antenna{position:absolute;top:-7px;width:1px;height:7px;background:rgba(255,255,255,.65)} .bot-antenna:after{content:"";position:absolute;top:-3px;left:-2px;width:5px;height:5px;border-radius:50%;background:#e51d27;box-shadow:0 0 8px #e51d27} .bot-face{position:relative;width:20px;height:14px;border-radius:6px;background:#e9eaeb;display:flex;align-items:center;justify-content:center;gap:5px} .bot-face i{width:3px;height:3px;border-radius:50%;background:#101214}.bot-face b{position:absolute;bottom:2px;width:6px;height:1px;background:#e51d27;border-radius:2px} .chatbot-ping{position:absolute;right:5px;top:4px;width:5px;height:5px;border-radius:50%;background:#5ee58a;box-shadow:0 0 8px rgba(94,229,138,.8)} @keyframes botAura{50%{transform:scale(1.14);opacity:.45}100%{transform:scale(1);opacity:.8}} .chat-panel{position:fixed;right:26px;bottom:88px;width:365px;z-index:185;border:1px solid rgba(255,255,255,.15);border-radius:22px;overflow:hidden;background:rgba(12,14,17,.76);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08);transform:translateY(14px) scale(.97);transform-origin:bottom right;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.16,.7,0,1)} .chat-panel.open{transform:none;opacity:1;pointer-events:auto} .chat-head{padding:15px 16px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border-bottom:1px solid rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:space-between} .chat-brand{display:flex;align-items:center;gap:10px}.chat-brand-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#e51d27,#8e1017);box-shadow:0 6px 18px rgba(229,29,39,.22)}.mini-bot{font-size:17px;color:#fff}.chat-head b{display:block;font-size:14px;letter-spacing:.1px}.chat-head small{display:block;margin-top:3px;font-size:9px;color:rgba(255,255,255,.52);letter-spacing:.3px}.chat-head small i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#59df83;margin-right:4px}.chat-head button{width:28px;height:28px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.05);color:#fff;font-size:21px;cursor:pointer;transition:.2s}.chat-head button:hover{background:rgba(255,255,255,.1);transform:rotate(90deg)} .chat-body{padding:15px}.chat-messages{max-height:225px;overflow:auto;padding:2px 2px 8px;scrollbar-width:thin}.msg-row{display:flex;gap:8px;align-items:flex-end;margin:0 0 5px}.msg-row.bot{justify-content:flex-start}.msg-avatar{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;flex:0 0 24px;background:rgba(229,29,39,.12);border:1px solid rgba(229,29,39,.28);color:#ff4a52;font-size:11px}.msg-bubble{max-width:78%;padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.065);color:#fff;font-size:11px;line-height:1.55;box-shadow:inset 0 1px rgba(255,255,255,.04)}.msg-bubble span{color:rgba(255,255,255,.55)}.msg-row.user{justify-content:flex-end}.msg-row.user .msg-bubble{border-radius:14px 14px 4px 14px;background:rgba(229,29,39,.92);border-color:rgba(255,255,255,.08)}.msg-time{text-align:left;margin:0 0 11px 32px;color:rgba(255,255,255,.32);font-size:8px;letter-spacing:.4px} .chat-options{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0 12px}.chat-options button{border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.82);font-size:9px;font-weight:700;cursor:pointer;transition:.22s}.chat-options button:hover{border-color:rgba(229,29,39,.65);background:rgba(229,29,39,.10);color:#fff;transform:translateY(-2px)}.chat-options button b{margin-left:5px;color:#ff4a52} .chat-composer{display:flex;align-items:center;gap:7px;padding:5px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.045)}.chat-composer input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;font:500 10px Inter,Arial;padding:8px}.chat-composer input::placeholder{color:rgba(255,255,255,.34)}.chat-composer button{width:30px;height:30px;border:0;border-radius:9px;background:#e51d27;color:#fff;font-size:17px;cursor:pointer;box-shadow:0 5px 15px rgba(229,29,39,.2);transition:.2s}.chat-composer button:hover{transform:translateY(-2px);background:#ff2932}.chat-direct{display:flex;justify-content:flex-end;gap:14px;margin-top:9px}.chat-direct a{font-size:9px;color:rgba(255,255,255,.48);text-decoration:none}.chat-direct a:hover{color:#fff} @media(max-width:760px){.chatbot{right:16px;bottom:16px;width:44px;height:44px;border-radius:14px}.chatbot-orb{width:28px;height:28px}.chat-panel{right:12px;bottom:72px;width:min(365px,calc(100vw - 24px));border-radius:19px}.chat-body{padding:13px}.chat-messages{max-height:210px}} /* ========================================================= KRISHNA AI CHAT — PREMIUM CONVERSATIONAL PANEL Inspired by the supplied reference: compact, rich, dark glass panel with a warm crimson header and pill actions. ========================================================= */ .chatbot{position:fixed!important;right:24px!important;bottom:24px!important;z-index:190!important;width:54px!important;height:54px!important;padding:0!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:18px!important;background:rgba(13,10,10,.82)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;box-shadow:0 18px 45px rgba(0,0,0,.35),0 0 0 1px rgba(220,31,40,.08)!important;display:grid!important;place-items:center!important;cursor:pointer!important;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease!important} .chatbot:hover{transform:translateY(-3px) scale(1.03)!important;border-color:rgba(229,29,39,.55)!important;box-shadow:0 22px 52px rgba(0,0,0,.42),0 0 24px rgba(229,29,39,.14)!important} .chatbot-orb{position:relative!important;width:34px!important;height:34px!important;border-radius:12px!important;background:linear-gradient(145deg,#e51d27,#8d0f15)!important;border:0!important;display:grid!important;place-items:center!important;box-shadow:0 7px 20px rgba(229,29,39,.28)!important;animation:none!important} .chatbot-orb-icon{font-size:18px!important;line-height:1!important;color:#fff!important;font-weight:500!important} .chatbot-ping{position:absolute!important;right:7px!important;top:6px!important;width:7px!important;height:7px!important;border-radius:50%!important;background:#49d67a!important;box-shadow:0 0 9px rgba(73,214,122,.8)!important} .chat-panel{position:fixed!important;right:24px!important;bottom:92px!important;width:min(520px,calc(100vw - 32px))!important;height:min(590px,calc(100vh - 120px))!important;min-height:500px!important;z-index:195!important;overflow:hidden!important;border:1px solid rgba(218,168,74,.24)!important;border-radius:30px!important;background:rgba(12,7,8,.95)!important;backdrop-filter:blur(22px) saturate(125%)!important;-webkit-backdrop-filter:blur(22px) saturate(125%)!important;box-shadow:0 35px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.025),0 0 45px rgba(229,29,39,.08)!important;display:flex!important;flex-direction:column!important;transform:translateY(18px) scale(.965)!important;transform-origin:bottom right!important;opacity:0!important;pointer-events:none!important;transition:opacity .28s ease,transform .4s cubic-bezier(.16,.72,0,1)!important} .chat-panel.open{transform:none!important;opacity:1!important;pointer-events:auto!important} .chat-head{flex:0 0 auto!important;min-height:98px!important;padding:23px 25px 19px!important;background:linear-gradient(135deg,#5e090c 0%,#410407 48%,#260204 100%)!important;border-bottom:1px solid rgba(223,174,83,.25)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:space-between!important;position:relative!important} .chat-head:after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(229,29,39,.8),rgba(214,165,76,.55),transparent)!important} .chat-brand-copy b{display:block!important;font-size:26px!important;line-height:1.05!important;letter-spacing:.1px!important;color:#e0b85f!important;font-weight:700!important} .chat-brand-copy small{display:block!important;margin-top:9px!important;font-size:14px!important;line-height:1!important;letter-spacing:1.6px!important;color:rgba(255,255,255,.56)!important;font-weight:600!important} .chat-brand-copy small i{display:inline-block!important;width:9px!important;height:9px!important;margin-right:8px!important;border-radius:50%!important;background:#43c966!important;box-shadow:0 0 8px rgba(67,201,102,.45)!important} .chat-head button{width:34px!important;height:34px!important;border:0!important;background:transparent!important;color:#d9b568!important;font-size:32px!important;line-height:1!important;font-weight:300!important;cursor:pointer!important;transition:transform .2s ease,color .2s ease!important} .chat-head button:hover{background:transparent!important;color:#fff!important;transform:rotate(90deg)!important} .chat-body{min-height:0!important;flex:1 1 auto!important;padding:22px 24px 16px!important;background:linear-gradient(180deg,rgba(7,5,6,.72),rgba(12,7,8,.98))!important;display:flex!important;flex-direction:column!important} .chat-messages{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;padding:2px 0 14px!important;scrollbar-width:thin!important;scrollbar-color:rgba(210,164,74,.25) transparent!important} .msg-row{display:flex!important;gap:0!important;align-items:flex-end!important;margin:0 0 13px!important} .msg-row.bot{justify-content:flex-start!important} .msg-row.user{justify-content:flex-end!important} .msg-avatar{display:none!important} .msg-bubble{max-width:91%!important;padding:15px 16px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:15px!important;background:linear-gradient(145deg,rgba(42,34,35,.72),rgba(25,19,20,.78))!important;color:rgba(255,255,255,.88)!important;font-size:17px!important;line-height:1.48!important;letter-spacing:.05px!important;box-shadow:inset 0 1px rgba(255,255,255,.035)!important} .msg-bubble span{color:rgba(255,255,255,.58)!important} .msg-row.user .msg-bubble{border-color:rgba(229,29,39,.42)!important;border-radius:15px!important;background:linear-gradient(145deg,rgba(119,16,21,.95),rgba(76,8,12,.95))!important;color:#fff!important} .msg-time{display:none!important} .chat-options{flex:0 0 auto!important;display:flex!important;flex-wrap:nowrap!important;gap:10px!important;margin:8px 0 16px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 0 3px!important;scrollbar-width:none!important} .chat-options::-webkit-scrollbar{display:none!important} .chat-options button{flex:0 0 auto!important;border:1px solid rgba(205,156,64,.52)!important;border-radius:16px!important;padding:11px 17px!important;background:rgba(49,21,19,.28)!important;color:#d9c18c!important;font-size:15px!important;font-weight:500!important;letter-spacing:.05px!important;cursor:pointer!important;transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease!important;white-space:nowrap!important} .chat-options button:hover{border-color:#d6a94e!important;background:rgba(116,22,22,.28)!important;color:#fff!important;transform:translateY(-1px)!important} .chat-options button b{display:none!important} .chat-composer{flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:10px!important;padding:5px!important;border:1px solid rgba(205,156,64,.35)!important;border-radius:16px!important;background:rgba(48,20,20,.72)!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important} .chat-composer input{min-width:0!important;flex:1!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font:500 15px/1.2 Inter,Arial,sans-serif!important;padding:12px 10px!important} .chat-composer input::placeholder{color:rgba(255,255,255,.48)!important} .chat-composer button{width:78px!important;height:42px!important;border:1px solid rgba(229,29,39,.55)!important;border-radius:13px!important;background:linear-gradient(145deg,#891015,#65080d)!important;color:#e2bf73!important;font-size:16px!important;font-weight:600!important;cursor:pointer!important;box-shadow:none!important;transition:transform .2s ease,background .2s ease,color .2s ease!important} .chat-composer button:hover{transform:none!important;background:linear-gradient(145deg,#a5171e,#760a10)!important;color:#fff!important} .chat-direct{flex:0 0 auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:15px!important;margin-top:12px!important;padding-right:3px!important} .chat-direct span{margin-right:auto!important;color:rgba(255,255,255,.3)!important;font-size:13px!important} .chat-direct a{font-size:13px!important;color:#caa65d!important;text-decoration:none!important;transition:color .2s!important} .chat-direct a:hover{color:#fff!important} @media(max-width:760px){.chatbot{right:15px!important;bottom:15px!important;width:48px!important;height:48px!important;border-radius:15px!important}.chatbot-orb{width:31px!important;height:31px!important}.chat-panel{right:10px!important;bottom:73px!important;width:calc(100vw - 20px)!important;height:min(570px,calc(100vh - 95px))!important;min-height:0!important;border-radius:23px!important}.chat-head{min-height:86px!important;padding:20px 19px 16px!important}.chat-brand-copy b{font-size:23px!important}.chat-brand-copy small{font-size:11px!important;margin-top:7px!important}.chat-body{padding:17px 14px 13px!important}.msg-bubble{max-width:94%!important;font-size:16px!important;padding:13px 14px!important}.chat-options{gap:8px!important;margin-bottom:13px!important}.chat-options button{font-size:14px!important;padding:10px 14px!important}.chat-composer input{font-size:16px!important}.chat-composer button{width:68px!important}.chat-direct{margin-top:10px!important}} @media(prefers-reduced-motion:reduce){.chatbot,.chat-panel,.chat-options button,.chat-head button{transition:none!important}} /* ========================================================= KRISHNA AI — FINAL HOME-SECTION VISUAL LANGUAGE Keep the reference chatbot layout, but use Krishna Outdoor's actual Home palette, typography, buttons, glow and motion. ========================================================= */ .chatbot{ right:28px!important;bottom:28px!important;width:56px!important;height:56px!important; border:1px solid rgba(229,27,35,.42)!important;border-radius:16px!important; background:rgba(18,20,22,.88)!important;backdrop-filter:blur(12px)!important; -webkit-backdrop-filter:blur(12px)!important; box-shadow:0 18px 42px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.05),0 0 26px rgba(229,27,35,.12)!important; animation:krAiFloat 4.8s ease-in-out infinite!important; } .chatbot:hover{transform:translateY(-4px) scale(1.035)!important;border-color:rgba(229,27,35,.85)!important;box-shadow:0 24px 52px rgba(0,0,0,.4),0 0 30px rgba(229,27,35,.2)!important} .chatbot-orb{ width:36px!important;height:36px!important;border-radius:11px!important; background:linear-gradient(145deg,#e51b23,#9d0e14)!important; border:1px solid rgba(255,255,255,.2)!important; box-shadow:0 8px 20px rgba(229,27,35,.3)!important; animation:krAiOrb 3.6s ease-in-out infinite!important; } .chatbot-orb-icon{font:700 16px/1 Oswald,Impact,sans-serif!important;color:#fff!important} .chatbot-ping{right:5px!important;top:5px!important;width:7px!important;height:7px!important;background:#32d46b!important;border:1px solid #101214!important;box-shadow:0 0 10px rgba(50,212,107,.7)!important} .chat-panel{ right:28px!important;bottom:96px!important;width:min(520px,calc(100vw - 34px))!important; height:min(590px,calc(100vh - 120px))!important;min-height:500px!important; border:1px solid rgba(229,27,35,.42)!important;border-radius:28px!important; background:rgba(8,10,12,.96)!important;backdrop-filter:blur(20px) saturate(125%)!important; -webkit-backdrop-filter:blur(20px) saturate(125%)!important; box-shadow:0 35px 100px rgba(0,0,0,.58),0 0 45px rgba(229,27,35,.10)!important; transform:translateY(18px) scale(.965)!important; } .chat-panel.open{transform:none!important} .chat-panel:before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.34; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%); } .chat-head,.chat-body{position:relative;z-index:1} .chat-head{ min-height:104px!important;padding:22px 25px 18px!important; background:linear-gradient(135deg,#1b1e21 0%,#111416 55%,#090b0d 100%)!important; border-bottom:1px solid rgba(229,27,35,.34)!important; overflow:hidden!important; } .chat-head:before{ content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:2px; background:linear-gradient(90deg,transparent,#e51b23 25%,#fff 50%,#e51b23 75%,transparent); opacity:.8;filter:blur(.2px);animation:krAiScan 4s ease-in-out infinite; } .chat-head:after{display:none!important} .chat-brand-copy b{ font:700 27px/1 Oswald,Impact,sans-serif!important;letter-spacing:.2px!important; color:#fff!important;text-transform:uppercase!important; } .chat-brand-copy b:after{content:" AI";color:#e51b23} .chat-brand-copy small{margin-top:9px!important;font:700 10px/1 Inter,Arial,sans-serif!important;letter-spacing:2px!important;color:#aeb3b7!important} .chat-brand-copy small i{width:7px!important;height:7px!important;margin-right:7px!important;background:#32d46b!important;box-shadow:0 0 8px rgba(50,212,107,.65)!important} .chat-head button{color:#fff!important;font-family:Inter,Arial,sans-serif!important;font-size:28px!important} .chat-head button:hover{color:#e51b23!important} .chat-body{ padding:21px 24px 17px!important; background:linear-gradient(180deg,rgba(12,14,16,.78),rgba(7,9,11,.98))!important; } .chat-messages{scrollbar-color:rgba(229,27,35,.35) transparent!important} .msg-row{margin-bottom:13px!important} .msg-bubble{ padding:15px 17px!important;max-width:91%!important;border-radius:14px!important; border:1px solid rgba(255,255,255,.10)!important; background:linear-gradient(145deg,rgba(31,35,39,.92),rgba(18,21,24,.9))!important; color:#f2f3f4!important;font:500 14px/1.55 Inter,Arial,sans-serif!important; box-shadow:inset 0 1px rgba(255,255,255,.04),0 10px 26px rgba(0,0,0,.14)!important; } .msg-row.bot .msg-bubble{position:relative} .msg-row.bot .msg-bubble:before{content:"";position:absolute;left:-1px;top:-1px;width:3px;height:calc(100% + 2px);border-radius:4px;background:#e51b23;opacity:.8} .msg-row.user .msg-bubble{ border-color:rgba(229,27,35,.48)!important; background:linear-gradient(145deg,#8f1016,#5e090e)!important;color:#fff!important; } .chat-options{gap:9px!important;margin:8px 0 17px!important} .chat-options button{ border:1px solid rgba(229,27,35,.52)!important;border-radius:4px!important; padding:11px 17px!important;background:rgba(229,27,35,.055)!important; color:#fff!important;font:800 10px/1 Inter,Arial,sans-serif!important; letter-spacing:.45px!important;text-transform:uppercase!important; transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s,border-color .28s,box-shadow .28s!important; } .chat-options button:hover{ transform:translateY(-3px)!important;background:#e51b23!important;border-color:#e51b23!important; box-shadow:0 10px 22px rgba(229,27,35,.25)!important;color:#fff!important; } .chat-composer{ padding:5px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:4px!important; background:#111416!important;box-shadow:inset 0 1px rgba(255,255,255,.04)!important; } .chat-composer:focus-within{border-color:rgba(229,27,35,.65)!important;box-shadow:0 0 0 3px rgba(229,27,35,.08)!important} .chat-composer input{font:500 13px/1.2 Inter,Arial,sans-serif!important;color:#fff!important;padding:13px 11px!important} .chat-composer input::placeholder{color:#777d82!important} .chat-composer button{ width:78px!important;height:42px!important;border:0!important;border-radius:3px!important; background:#e51b23!important;color:#fff!important;font:900 10px/1 Inter,Arial,sans-serif!important; letter-spacing:.7px!important;text-transform:uppercase!important;box-shadow:0 10px 24px rgba(229,27,35,.22)!important; } .chat-composer button:hover{background:#b80f16!important;transform:translateY(-2px)!important} .chat-direct{margin-top:11px!important} .chat-direct span{color:#686d72!important;font:600 9px/1 Inter,Arial,sans-serif!important;letter-spacing:.5px!important;text-transform:uppercase!important} .chat-direct a{color:#cfd2d4!important;font:800 9px/1 Inter,Arial,sans-serif!important;text-transform:uppercase!important;letter-spacing:.4px!important} .chat-direct a:hover{color:#e51b23!important} @keyframes krAiFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}} @keyframes krAiOrb{0%,100%{box-shadow:0 8px 20px rgba(229,27,35,.26),0 0 0 0 rgba(229,27,35,0)}50%{box-shadow:0 11px 25px rgba(229,27,35,.34),0 0 0 6px rgba(229,27,35,.05)}} @keyframes krAiScan{0%,100%{transform:translateX(-28%);opacity:.35}50%{transform:translateX(28%);opacity:.9}} @media(max-width:760px){ .chatbot{right:15px!important;bottom:15px!important;width:48px!important;height:48px!important;border-radius:14px!important} .chatbot-orb{width:31px!important;height:31px!important;border-radius:9px!important} .chat-panel{right:10px!important;bottom:73px!important;width:calc(100vw - 20px)!important;height:min(570px,calc(100vh - 95px))!important;min-height:0!important;border-radius:22px!important} .chat-head{min-height:88px!important;padding:19px 18px 15px!important} .chat-brand-copy b{font-size:25px!important} .chat-body{padding:16px 14px 13px!important} .msg-bubble{max-width:94%!important;font-size:15px!important;padding:13px 14px!important} .chat-options{gap:7px!important;margin-bottom:13px!important} .chat-options button{font-size:10px!important;padding:10px 13px!important} .chat-composer input{font-size:15px!important}.chat-composer button{width:67px!important} } @media(prefers-reduced-motion:reduce){.chatbot,.chatbot-orb,.chat-head:before{animation:none!important}} /* ========================================================= KRISHNA AI — SIMPLE COMPACT FINAL Small premium chat, Krishna Home visual language. ========================================================= */ .chatbot{ right:22px!important; bottom:22px!important; width:50px!important; height:50px!important; padding:0!important; border:1px solid rgba(229,27,35,.42)!important; border-radius:14px!important; background:#111416!important; box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 18px rgba(229,27,35,.10)!important; animation:krSimpleFloat 4.8s ease-in-out infinite!important; } .chatbot:hover{ transform:translateY(-2px)!important; border-color:#e51b23!important; } .chatbot-orb{ width:31px!important; height:31px!important; border-radius:9px!important; background:#e51b23!important; border:0!important; box-shadow:0 5px 14px rgba(229,27,35,.28)!important; animation:none!important; } .chatbot-orb-icon{ font-size:16px!important; color:#fff!important; } .chatbot-ping{ width:7px!important; height:7px!important; right:5px!important; top:5px!important; background:#32d46b!important; border:1px solid #111416!important; box-shadow:0 0 7px rgba(50,212,107,.7)!important; animation:krSimpleOnline 1.8s ease-in-out infinite!important; } /* compact panel */ .chat-panel{ right:22px!important; bottom:82px!important; width:min(340px,calc(100vw - 28px))!important; height:430px!important; min-height:0!important; max-height:calc(100vh - 105px)!important; border:1px solid rgba(229,27,35,.28)!important; border-radius:18px!important; background:#0d0f11!important; backdrop-filter:blur(12px)!important; -webkit-backdrop-filter:blur(12px)!important; box-shadow:0 22px 55px rgba(0,0,0,.36),0 0 24px rgba(229,27,35,.07)!important; transform:translateY(10px) scale(.98)!important; } .chat-panel.open{transform:none!important} .chat-head{ min-height:68px!important; padding:12px 14px!important; background:#111416!important; border-bottom:1px solid rgba(255,255,255,.08)!important; } .chat-head:before,.chat-head:after{display:none!important} .chat-brand{ display:flex!important; align-items:center!important; gap:9px!important; } .chat-brand-icon{ position:relative!important; width:34px!important; height:34px!important; flex:0 0 34px!important; display:grid!important; place-items:center!important; border-radius:10px!important; background:#e51b23!important; box-shadow:0 6px 14px rgba(229,27,35,.22)!important; } .chat-brand-icon .brand-antenna{ position:absolute; width:2px; height:5px; top:-4px; left:50%; transform:translateX(-50%); background:#e51b23; border-radius:2px; } .chat-brand-icon .brand-antenna:after{ content:""; position:absolute; width:4px; height:4px; border-radius:50%; top:-3px; left:50%; transform:translateX(-50%); background:#32d46b; box-shadow:0 0 5px rgba(50,212,107,.65); } .chat-brand-icon .brand-face{ position:relative; width:22px; height:17px; border-radius:6px; background:#151719; border:1px solid rgba(255,255,255,.45); } .chat-brand-icon .brand-face i{ position:absolute; top:5px; width:3px; height:4px; border-radius:50%; background:#fff; } .chat-brand-icon .brand-face i:first-child{left:5px} .chat-brand-icon .brand-face i:nth-child(2){right:5px} .chat-brand-icon .brand-face b{ position:absolute; width:6px; height:2px; left:50%; bottom:3px; transform:translateX(-50%); border-bottom:1px solid #e51b23; border-radius:0 0 5px 5px; } .chat-brand-copy b{ display:block!important; font:700 17px/1 Oswald,Impact,sans-serif!important; color:#fff!important; text-transform:none!important; letter-spacing:.15px!important; } .chat-brand-copy b:after{display:none!important} .chat-brand-copy small{ display:flex!important; align-items:center!important; margin-top:5px!important; font:600 8px/1 Inter,Arial,sans-serif!important; letter-spacing:1.4px!important; color:#8f969b!important; } .chat-brand-copy small i{ width:6px!important; height:6px!important; margin-right:6px!important; background:#32d46b!important; box-shadow:0 0 7px rgba(50,212,107,.6)!important; animation:krSimpleOnline 1.8s ease-in-out infinite!important; } .chat-head button{ width:26px!important; height:26px!important; font-size:23px!important; color:#8d9398!important; background:transparent!important; } .chat-head button:hover{ color:#e51b23!important; transform:none!important; } .chat-body{ padding:13px!important; background:#0d0f11!important; } .chat-messages{ padding:0 0 8px!important; scrollbar-color:rgba(229,27,35,.3) transparent!important; } .msg-row{margin-bottom:9px!important} .msg-bubble{ max-width:88%!important; padding:10px 11px!important; border-radius:11px!important; border:1px solid rgba(255,255,255,.08)!important; background:#171a1d!important; color:#e9ebed!important; font:500 11px/1.5 Inter,Arial,sans-serif!important; box-shadow:none!important; } .msg-row.bot .msg-bubble:before{width:2px!important;background:#e51b23!important} .msg-row.user .msg-bubble{ background:#e51b23!important; border-color:#e51b23!important; } .chat-options{ gap:6px!important; margin:5px 0 10px!important; } .chat-options button{ padding:8px 10px!important; border:1px solid rgba(255,255,255,.11)!important; border-radius:999px!important; background:#141719!important; color:#cfd3d6!important; font:600 9px/1 Inter,Arial,sans-serif!important; letter-spacing:.1px!important; text-transform:none!important; } .chat-options button:hover{ transform:none!important; background:#e51b23!important; border-color:#e51b23!important; box-shadow:none!important; } .chat-composer{ padding:4px!important; gap:5px!important; border:1px solid rgba(255,255,255,.1)!important; border-radius:11px!important; background:#141719!important; } .chat-composer input{ padding:9px 8px!important; font:500 11px/1.2 Inter,Arial,sans-serif!important; } .chat-composer input::placeholder{color:#72787d!important} .chat-composer button{ width:58px!important; height:32px!important; border-radius:8px!important; background:#e51b23!important; font:800 9px/1 Inter,Arial,sans-serif!important; letter-spacing:.3px!important; box-shadow:none!important; } .chat-composer button:hover{ background:#c91219!important; transform:none!important; } .chat-direct{ margin-top:7px!important; } .chat-direct span{ font-size:9px!important; color:#555c61!important; } .chat-direct a{ font-size:9px!important; color:#9da3a7!important; } .chat-direct a:hover{color:#e51b23!important} @keyframes krSimpleFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} } @keyframes krSimpleOnline{ 0%,100%{opacity:1;box-shadow:0 0 4px rgba(50,212,107,.35)} 50%{opacity:.45;box-shadow:0 0 9px rgba(50,212,107,.8)} } @media(max-width:760px){ .chatbot{ right:13px!important; bottom:13px!important; width:44px!important; height:44px!important; border-radius:12px!important; } .chatbot-orb{ width:28px!important; height:28px!important; border-radius:8px!important; } .chat-panel{ right:10px!important; bottom:66px!important; width:calc(100vw - 20px)!important; height:390px!important; max-height:calc(100vh - 82px)!important; border-radius:17px!important; } .chat-head{ min-height:62px!important; padding:10px 12px!important; } .chat-brand-icon{ width:30px!important; height:30px!important; flex-basis:30px!important; } .chat-brand-copy b{font-size:18px!important} .chat-body{padding:11px!important} .msg-bubble{font-size:10.5px!important;padding:9px 10px!important} } @media(prefers-reduced-motion:reduce){ .chatbot,.chatbot-ping,.chat-brand-copy small i{animation:none!important} } /* ========================================================= KRISHNA AI — CUTE ROBOT FINAL PASS ========================================================= */ .chatbot{ width:54px!important;height:54px!important; border-radius:16px!important; background:linear-gradient(145deg,#fff,#f4f4f4)!important; border:1px solid rgba(229,27,35,.35)!important; box-shadow:0 12px 30px rgba(0,0,0,.22),0 6px 18px rgba(229,27,35,.12)!important; display:grid!important;place-items:center!important; overflow:visible!important; animation:krBotFloat 3.8s ease-in-out infinite!important; } .chatbot:hover{ transform:translateY(-3px) scale(1.03)!important; box-shadow:0 16px 34px rgba(0,0,0,.25),0 8px 22px rgba(229,27,35,.18)!important; } .cute-robot{ position:relative!important; width:38px!important;height:38px!important; display:block!important; } .robot-head{ position:absolute!important; left:7px!important;top:9px!important; width:24px!important;height:19px!important; border-radius:8px!important; background:#e51b23!important; border:2px solid #151719!important; box-shadow:0 3px 0 #151719!important; } .robot-eye{ position:absolute!important;top:5px!important; width:4px!important;height:4px!important; border-radius:50%!important;background:#fff!important; box-shadow:0 0 5px rgba(255,255,255,.75)!important; animation:krBotBlink 4.5s infinite!important; } .robot-eye:first-child{left:5px!important} .robot-eye:nth-child(2){right:5px!important} .robot-smile{ position:absolute!important;left:50%!important;bottom:3px!important; width:7px!important;height:3px!important; transform:translateX(-50%)!important; border-bottom:2px solid #fff!important; border-radius:0 0 8px 8px!important; } .robot-antenna{ position:absolute!important;left:50%!important;top:2px!important; width:2px!important;height:8px!important; transform:translateX(-50%)!important; background:#151719!important; } .robot-antenna:after{ content:""!important; position:absolute!important;left:50%!important;top:-4px!important; width:6px!important;height:6px!important; transform:translateX(-50%)!important; border-radius:50%!important;background:#32d46b!important; box-shadow:0 0 7px rgba(50,212,107,.75)!important; animation:krBotOnline 1.7s ease-in-out infinite!important; } .robot-ear{ position:absolute!important;top:15px!important; width:5px!important;height:9px!important; border:2px solid #151719!important; background:#e51b23!important;border-radius:3px!important; } .robot-ear-left{left:2px!important} .robot-ear-right{right:2px!important} .robot-body{ position:absolute!important;left:12px!important;top:29px!important; width:14px!important;height:7px!important; border-radius:5px 5px 3px 3px!important; background:#151719!important; } .chatbot-ping{ width:8px!important;height:8px!important; right:2px!important;top:2px!important; background:#32d46b!important; border:2px solid #fff!important; box-shadow:0 0 8px rgba(50,212,107,.7)!important; animation:krBotOnline 1.7s ease-in-out infinite!important; } /* Header: robot logo and Krishna AI MUST remain side-by-side. */ .chat-brand{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; gap:9px!important; } .chat-brand-icon{ position:relative!important; width:36px!important;height:36px!important; min-width:36px!important;flex:0 0 36px!important; display:grid!important;place-items:center!important; border-radius:11px!important; background:#fff!important; border:1px solid rgba(229,27,35,.28)!important; box-shadow:0 5px 14px rgba(0,0,0,.16)!important; } .chat-brand-icon .brand-antenna{ width:2px!important;height:5px!important;top:-5px!important; background:#151719!important; } .chat-brand-icon .brand-antenna:after{ width:5px!important;height:5px!important;top:-4px!important; background:#32d46b!important; animation:krBotOnline 1.7s ease-in-out infinite!important; } .chat-brand-icon .brand-face{ width:23px!important;height:18px!important; border-radius:7px!important; background:#e51b23!important; border:2px solid #151719!important; } .chat-brand-icon .brand-face i{ top:5px!important;width:4px!important;height:4px!important; background:#fff!important; } .chat-brand-icon .brand-face i:first-child{left:5px!important} .chat-brand-icon .brand-face i:nth-child(2){right:5px!important} .chat-brand-icon .brand-face b{ width:7px!important;height:3px!important;bottom:2px!important; border-bottom:2px solid #fff!important; } .chat-brand-copy{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; } .chat-brand-copy b{ font:700 17px/1 Oswald,Impact,sans-serif!important; color:#fff!important; white-space:nowrap!important; } .chat-brand-copy small{ display:flex!important; align-items:center!important; margin-top:5px!important; color:#8f969b!important; } .chat-brand-copy small i{ flex:0 0 auto!important; } /* Slightly more character in the panel without making it big. */ .chat-panel{ width:min(345px,calc(100vw - 28px))!important; height:415px!important; border-radius:19px!important; animation:krPanelGlow 5s ease-in-out infinite!important; } .chat-head{ min-height:68px!important; } .chat-body{ background: radial-gradient(circle at 85% 0%,rgba(229,27,35,.08),transparent 35%), #0d0f11!important; } .msg-bubble{ transition:transform .22s ease,border-color .22s ease!important; } .msg-bubble:hover{ transform:translateY(-1px)!important; border-color:rgba(229,27,35,.25)!important; } .chat-options button{ transition:transform .22s ease,background .22s ease,border-color .22s ease!important; } .chat-options button:hover{ transform:translateY(-2px)!important; } @keyframes krBotFloat{ 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-4px) rotate(-1deg)} } @keyframes krBotBlink{ 0%,44%,48%,100%{transform:scaleY(1)} 46%{transform:scaleY(.12)} } @keyframes krBotOnline{ 0%,100%{opacity:1;box-shadow:0 0 4px rgba(50,212,107,.4)} 50%{opacity:.45;box-shadow:0 0 11px rgba(50,212,107,.9)} } @keyframes krPanelGlow{ 0%,100%{box-shadow:0 22px 55px rgba(0,0,0,.36),0 0 18px rgba(229,27,35,.05)} 50%{box-shadow:0 24px 58px rgba(0,0,0,.38),0 0 25px rgba(229,27,35,.09)} } @media(max-width:760px){ .chatbot{width:48px!important;height:48px!important;border-radius:14px!important} .cute-robot{transform:scale(.88)!important} .chat-panel{ width:calc(100vw - 20px)!important; height:390px!important; bottom:66px!important; } .chat-brand-icon{width:32px!important;height:32px!important;min-width:32px!important;flex-basis:32px!important} .chat-brand-copy b{font-size:18px!important} } @media(prefers-reduced-motion:reduce){ .chatbot,.chatbot-ping,.chat-brand-icon .brand-antenna:after,.chat-brand-copy small i,.chat-panel{animation:none!important} } /* ========================================================= KRISHNA AI — TRANSPARENT GLASS / COMPACT FINAL OVERRIDE ========================================================= */ .chat-panel{ width:min(340px,calc(100vw - 28px))!important; height:370px!important; max-height:calc(100vh - 92px)!important; border-radius:18px!important; background:rgba(8,11,13,.72)!important; border:1px solid rgba(229,27,35,.32)!important; box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 24px rgba(229,27,35,.08)!important; backdrop-filter:blur(18px) saturate(125%)!important; -webkit-backdrop-filter:blur(18px) saturate(125%)!important; overflow:hidden!important; animation:none!important; } .chat-head{ min-height:62px!important; padding:10px 12px!important; background:linear-gradient(180deg,rgba(229,27,35,.16),rgba(8,11,13,.10))!important; border-bottom:1px solid rgba(255,255,255,.10)!important; } .chat-brand-icon{ background:rgba(255,255,255,.10)!important; border:1px solid rgba(255,255,255,.18)!important; box-shadow:0 5px 16px rgba(0,0,0,.18)!important; } .chat-brand-copy b{font-size:18px!important;letter-spacing:.1px!important} .chat-brand-copy small{margin-top:4px!important;color:#aeb4b8!important} .chat-body{ display:flex!important; flex-direction:column!important; min-height:0!important; padding:11px!important; background:linear-gradient(180deg,rgba(8,11,13,.30),rgba(8,11,13,.58))!important; } .chat-messages{ flex:1 1 auto!important; min-height:0!important; overflow:auto!important; scrollbar-width:thin!important; } .msg-bubble{ background:rgba(255,255,255,.07)!important; border:1px solid rgba(255,255,255,.11)!important; border-radius:12px!important; color:#f2f3f4!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; } .msg-row.bot .msg-bubble{box-shadow:0 5px 16px rgba(0,0,0,.10)!important} .chat-options{ display:flex!important; flex-wrap:nowrap!important; gap:7px!important; margin-top:9px!important; padding:2px 1px 5px!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none!important; -webkit-overflow-scrolling:touch!important; touch-action:pan-x!important; flex:0 0 auto!important; } .chat-options::-webkit-scrollbar{display:none!important} .chat-options button{ flex:0 0 auto!important; white-space:nowrap!important; min-height:32px!important; padding:7px 11px!important; border-radius:999px!important; background:rgba(255,255,255,.055)!important; border:1px solid rgba(229,27,35,.42)!important; color:#f3f3f3!important; font:600 9px/1 Inter,Arial,sans-serif!important; letter-spacing:.15px!important; text-align:center!important; transform:none!important; } .chat-options button:hover{ background:rgba(229,27,35,.16)!important; border-color:rgba(229,27,35,.75)!important; transform:translateY(-1px)!important; } .chat-composer{ flex:0 0 auto!important; margin-top:7px!important; background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:11px!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; } .chat-composer input{ color:#fff!important; background:transparent!important; } .chat-composer button{ background:#e51b23!important; color:#fff!important; } .chat-direct{display:none!important} @media(max-width:760px){ .chat-panel{ width:calc(100vw - 22px)!important; height:355px!important; max-height:calc(100vh - 78px)!important; right:11px!important; bottom:64px!important; border-radius:17px!important; } .chat-head{min-height:58px!important;padding:9px 11px!important} .chat-body{padding:9px!important} .chat-options{gap:6px!important;margin-top:7px!important} .chat-options button{min-height:31px!important;padding:7px 10px!important;font-size:8.5px!important} } /* ========================================================= KRISHNA AI — LATEST CUTE GLASS CHATBOT SIZE/POLISH Slightly larger panel, compact layout, cute blinking robot. ========================================================= */ .chatbot{ width:58px!important;height:58px!important; border-radius:17px!important; background:rgba(10,12,14,.72)!important; border:1px solid rgba(229,27,35,.72)!important; box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 22px rgba(229,27,35,.16)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; } .chatbot:hover{transform:translateY(-3px) scale(1.035)!important} .cute-robot{width:42px!important;height:42px!important} .robot-head{ left:7px!important;top:9px!important;width:28px!important;height:22px!important; border-radius:9px!important;background:#090b0d!important;border:1.5px solid #e51b23!important; box-shadow:0 0 10px rgba(229,27,35,.18)!important; } .robot-eye{ top:6px!important;width:5px!important;height:5px!important;background:#fff!important; box-shadow:0 0 7px rgba(255,255,255,.9)!important; } .robot-eye:first-child{left:6px!important}.robot-eye:nth-child(2){right:6px!important} .robot-smile{bottom:3px!important;width:9px!important;height:4px!important;border-bottom:2px solid #e51b23!important} .robot-antenna{top:1px!important;background:#e51b23!important} .robot-antenna:after{background:#32d46b!important} .robot-ear{top:16px!important;width:5px!important;height:9px!important;background:#0a0c0e!important;border:1px solid #e51b23!important} .robot-ear-left{left:1px!important}.robot-ear-right{right:1px!important} .robot-body{left:13px!important;top:31px!important;width:16px!important;height:8px!important;background:#080a0c!important;border:1px solid rgba(229,27,35,.65)!important} .chat-panel{ width:min(360px,calc(100vw - 28px))!important; height:390px!important; max-height:calc(100vh - 88px)!important; border-radius:20px!important; background:rgba(7,9,11,.68)!important; border:1px solid rgba(229,27,35,.46)!important; box-shadow:0 24px 62px rgba(0,0,0,.34),0 0 28px rgba(229,27,35,.12)!important; backdrop-filter:blur(20px) saturate(135%)!important; -webkit-backdrop-filter:blur(20px) saturate(135%)!important; transform:translateY(12px) scale(.975)!important; } .chat-panel.open{transform:none!important} .chat-head{ min-height:66px!important;padding:10px 13px!important; background:linear-gradient(180deg,rgba(229,27,35,.18),rgba(8,10,12,.08))!important; } .chat-brand{gap:10px!important} .chat-brand-icon{ width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important; border-radius:12px!important;background:rgba(5,7,9,.78)!important; border:1px solid rgba(229,27,35,.55)!important; box-shadow:0 0 16px rgba(229,27,35,.12)!important; } .chat-brand-icon .brand-face{background:#090b0d!important;border-color:#e51b23!important} .chat-brand-copy b{font-size:20px!important;letter-spacing:.15px!important} .chat-brand-copy small{margin-top:4px!important;color:#b9bec3!important} .chat-body{padding:11px 12px 10px!important} .chat-messages{padding-right:2px!important} .msg-bubble{font-size:14px!important;line-height:1.45!important;padding:10px 12px!important;border-radius:13px!important} .chat-options{gap:7px!important;margin-top:9px!important;padding-bottom:4px!important} .chat-options button{min-height:34px!important;padding:8px 12px!important;font-size:9.5px!important} .chat-composer{margin-top:8px!important;min-height:40px!important;border-radius:12px!important} .chat-composer input{font-size:13px!important} .chat-composer button{min-width:58px!important;border-radius:10px!important} @media(max-width:760px){ .chatbot{width:52px!important;height:52px!important;border-radius:15px!important;right:14px!important;bottom:14px!important} .cute-robot{transform:scale(.9)!important} .chat-panel{ width:calc(100vw - 18px)!important; height:380px!important; max-height:calc(100vh - 72px)!important; right:9px!important;bottom:70px!important;border-radius:18px!important; } .chat-head{min-height:62px!important;padding:9px 11px!important} .chat-brand-icon{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important} .chat-brand-copy b{font-size:18px!important} .chat-body{padding:9px 10px!important} .msg-bubble{font-size:11.5px!important;padding:9px 11px!important} .chat-options{gap:6px!important} .chat-options button{min-height:32px!important;padding:7px 10px!important;font-size:10px!important} } /* ========================================================= KRISHNA AI — COMPACT QUICK-OPTION PILLS Keep the existing chatbot panel exactly as-is; only make the quick links small, neat and horizontally scrollable. ========================================================= */ .chat-options{ display:flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:6px!important; margin-top:8px!important; padding:2px 1px 4px!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none!important; -webkit-overflow-scrolling:touch!important; touch-action:pan-x!important; flex:0 0 auto!important; max-width:100%!important; } .chat-options::-webkit-scrollbar{display:none!important} .chat-options button{ flex:0 0 auto!important; width:auto!important; min-width:0!important; min-height:28px!important; height:28px!important; padding:5px 9px!important; margin:0!important; border-radius:999px!important; background:rgba(255,255,255,.045)!important; border:1px solid rgba(255,255,255,.16)!important; color:rgba(255,255,255,.88)!important; font:600 9px/1 Inter,Arial,sans-serif!important; letter-spacing:.05px!important; white-space:nowrap!important; box-shadow:inset 0 1px rgba(255,255,255,.05)!important; transform:none!important; } .chat-options button:hover, .chat-options button:focus-visible{ background:rgba(229,27,35,.13)!important; border-color:rgba(229,27,35,.55)!important; color:#fff!important; transform:none!important; outline:none!important; } @media(max-width:760px){ .chat-options{gap:5px!important;margin-top:7px!important;padding-bottom:3px!important} .chat-options button{ min-height:27px!important; height:27px!important; padding:5px 8px!important; font-size:8.5px!important; } } /* ===== FINAL FOOTER-ABOVE CTA COMPACT + TEXT-SAFE POLISH ===== Keep every pre-footer banner compact without changing its copy, colors or visual language. */ .cta, .media-final-cta, .ow-cta, .network-cta, .about-cta, .kr-final-cta{ overflow:hidden!important; } /* Main CTA used by Home + media detail pages */ .cta{padding:0!important;min-height:0!important;} .cta-inner{ min-height:190px!important; padding:30px 0!important; gap:24px!important; } .cta-inner>div{min-width:0!important;max-width:760px!important;} .cta-inner h2{ font-size:clamp(36px,4vw,53px)!important; line-height:.96!important; margin:8px 0 12px!important; overflow-wrap:anywhere!important; word-break:normal!important; } .cta-inner p{ max-width:650px!important; margin:0!important; line-height:1.5!important; overflow-wrap:anywhere!important; } .cta-inner .btn{flex:0 0 auto!important;} /* Media Solutions final banner */ .media-final-cta{padding:34px 0!important;min-height:0!important;} .media-final-inner{min-height:0!important;gap:28px!important;} .media-final-inner>div{min-width:0!important;max-width:820px!important;} .media-final-inner h2{font-size:clamp(38px,4.2vw,61px)!important;line-height:.94!important;margin:8px 0 12px!important;overflow-wrap:anywhere!important;} .media-final-inner p{max-width:680px!important;line-height:1.5!important;margin:0!important;overflow-wrap:anywhere!important;} /* Our Work / Campaigns final banner */ .ow-cta-inner{min-height:220px!important;padding:28px 0!important;gap:26px!important;} .ow-cta-inner>div{min-width:0!important;max-width:760px!important;} .ow-cta h2{font-size:clamp(38px,4.5vw,63px)!important;line-height:.95!important;margin:8px 0 12px!important;overflow-wrap:anywhere!important;} .ow-cta p{max-width:600px!important;line-height:1.5!important;overflow-wrap:anywhere!important;} /* About / Careers / Contact final banners */ .about-cta{min-height:220px!important;} .about-cta .container, .kr-final-cta .container{min-height:0!important;padding-top:30px!important;padding-bottom:30px!important;} .about-cta h2,.kr-final-cta h2{font-size:clamp(38px,4.4vw,63px)!important;line-height:.95!important;overflow-wrap:anywhere!important;} .about-cta p{line-height:1.5!important;overflow-wrap:anywhere!important;} .kr-final-cta{padding:0!important;} /* Network CTA */ .network-cta{min-height:230px!important;} .network-cta .container{padding-top:28px!important;padding-bottom:28px!important;} .network-cta h2{font-size:clamp(38px,4.2vw,63px)!important;line-height:.95!important;margin:0 0 14px!important;overflow-wrap:anywhere!important;} /* Prevent any CTA copy from being clipped by animation/reveal wrappers. */ .cta *, .media-final-cta *, .ow-cta *, .network-cta *, .about-cta *, .kr-final-cta{max-width:100%;} @media(max-width:760px){ .cta-inner, .media-final-inner, .ow-cta-inner{ min-height:0!important; padding:24px 0!important; gap:18px!important; } .cta-inner, .media-final-inner, .ow-cta-inner{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;} .cta-inner h2,.media-final-inner h2,.ow-cta h2,.network-cta h2,.about-cta h2,.kr-final-cta h2{ font-size:clamp(33px,9vw,44px)!important; line-height:.98!important; letter-spacing:-.3px!important; margin:7px 0 10px!important; } .cta-inner p,.media-final-inner p,.ow-cta p,.network-cta p,.about-cta p,.kr-final-cta p{ font-size:13px!important; line-height:1.5!important; margin:0!important; } .cta-inner .btn,.media-final-inner .btn,.ow-cta .ow-btn,.kr-final-cta .kr-btn{width:auto!important;max-width:100%!important;} .network-cta{min-height:220px!important;} .network-cta .container{padding-top:24px!important;padding-bottom:24px!important;} .about-cta{min-height:0!important;} .about-cta .container,.kr-final-cta .container{padding-top:24px!important;padding-bottom:24px!important;} } @media(max-width:420px){ .cta-inner,.media-final-inner,.ow-cta-inner{padding:20px 0!important;gap:15px!important;} .cta-inner h2,.media-final-inner h2,.ow-cta h2,.network-cta h2,.about-cta h2,.kr-final-cta h2{font-size:35px!important;} .cta-inner p,.media-final-inner p,.ow-cta p,.network-cta p,.about-cta p,.kr-final-cta p{font-size:10.5px!important;} } /* ===== HERO VIDEO ART DIRECTION + ENQUIRE CAREERS CTA ===== */ .hero-media-mobile{display:none!important} .hero-media-desktop{display:block!important} @media(max-width:760px){ .hero-media-desktop{display:none!important} .hero-media-mobile{display:block!important} } .hero-media-mobile{object-position:center center!important;transform:translate(-50%,-50%) scale(1.25)!important;transform-origin:center center!important;left:50%!important;top:50%!important;width:100vw!important;height:100%!important;max-width:none!important} .kr-career-cta{position:relative;overflow:hidden;background:#15191f;color:#fff;padding:48px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)} .kr-career-cta:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(12,16,21,.96),rgba(12,16,21,.52)),url('../assets/images/shared-night-city-background.png') center/cover;opacity:.82} .kr-career-cta .container{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:0} .kr-career-cta-copy{min-width:0;max-width:780px} .kr-career-cta h2{font:700 clamp(34px,4.6vw,60px)/.95 Oswald,sans-serif;text-transform:uppercase;margin:8px 0 12px;overflow-wrap:anywhere} .kr-career-cta h2 em{color:#ef2027;font-style:normal} .kr-career-cta p{max-width:650px;margin:0;color:#b8c0c8;font-size:14px;line-height:1.6;overflow-wrap:anywhere} .kr-career-cta .kr-btn{flex:0 0 auto} @media(max-width:900px){ .kr-career-cta{padding:36px 0} .kr-career-cta .container{flex-direction:column;align-items:flex-start} } @media(max-width:600px){ .kr-career-cta{padding:28px 0} .kr-career-cta h2{font-size:clamp(34px,9vw,44px);line-height:.98} .kr-career-cta p{font-size:10.5px;line-height:1.5} } /* ===== FINAL DOCX CONTENT + VISIBILITY SAFEGUARD ===== */ .doc-home-block{padding:78px 0;background:#f6f6f4;} .doc-home-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:stretch} .doc-home-copy{min-width:0} .doc-home-copy h2,.doc-home-legacy h2{font:700 clamp(40px,4.8vw,64px)/.94 Oswald,sans-serif;margin:12px 0 22px} .doc-home-copy h2 em,.doc-home-legacy h2 em{font-style:normal;color:var(--red)} .doc-home-copy p,.doc-home-legacy p{max-width:720px;font-size:15px;line-height:1.75;color:#565b60;margin:0 0 12px} .doc-home-panel{background:#111416;color:#fff;padding:38px;display:flex;flex-direction:column;justify-content:center;min-width:0} .doc-home-panel .tag{color:#ef2b32} .doc-home-panel h3{font:700 clamp(34px,4vw,52px)/.96 Oswald;margin:12px 0 20px;overflow-wrap:anywhere} .doc-home-panel p{font-size:15px;line-height:1.7;color:#d4d7da;margin:0 0 10px} .doc-home-legacy{background:#fff;padding:70px 0} .doc-digital-items{display:grid;gap:12px;margin:24px 0 6px;max-width:600px} .doc-digital-items article{padding:15px 16px;border-left:2px solid var(--red);background:#fafafa} .doc-digital-items b{display:block;font-size:15px;margin-bottom:5px} .doc-digital-items p{margin:0!important;font-size:14px!important;line-height:1.6!important} /* Prevent text and action controls from being clipped by fixed/animated parents. */ section .container, section [class*="copy"], section [class*="inner"], section [class*="content"], section [class*="grid"]{min-width:0;} h1,h2,h3,h4,p,small,a,button,span{overflow-wrap:anywhere;} .cta,.media-final-cta,.ow-cta,.network-cta,.about-cta,.kr-final-cta,.kr-career-cta{height:auto!important;} .cta-inner,.media-final-inner,.ow-cta-inner,.network-journey-inner,.kr-final-cta .container,.kr-career-cta .container{flex-wrap:wrap;} .cta-inner .btn,.media-final-inner .btn,.ow-cta .ow-btn,.network-journey-inner .btn,.kr-final-cta .kr-btn,.kr-career-cta .kr-btn{visibility:visible!important;opacity:1!important;flex-shrink:0!important;} .about-cta .container,.network-cta .container{min-width:0;} @media(max-width:900px){.doc-home-grid{grid-template-columns:1fr}.doc-home-panel{padding:28px}.doc-home-block,.doc-home-legacy{padding:58px 0}} @media(max-width:760px){.doc-home-copy h2,.doc-home-legacy h2{font-size:43px}.doc-home-copy p,.doc-home-legacy p,.doc-home-panel p{font-size:13px;line-height:1.65}.doc-home-panel h3{font-size:38px}.doc-digital-items{margin-top:18px}.cta-inner .btn,.media-final-inner .btn,.ow-cta .ow-btn,.network-journey-inner .btn,.kr-final-cta .kr-btn,.kr-career-cta .kr-btn{width:100%!important;max-width:100%!important}.kr-career-cta .container{align-items:flex-start!important}.kr-career-cta-copy{max-width:none!important}} /* ===== VISIBILITY FIX — MEDIA NAV + OFFICE BUTTONS + LEADERSHIP ===== */ /* Media Solutions must stay readable against the transparent hero header. */ .header .nav .nav-dropdown > a, .header .nav .nav-dropdown > .nav-arrow{ color:rgba(255,255,255,.88)!important; opacity:1!important; } .header.scrolled .nav .nav-dropdown > a, .header.scrolled .nav .nav-dropdown > .nav-arrow{ color:#111318!important; } .header .nav .nav-dropdown > a:hover, .header .nav .nav-dropdown > a:focus-visible, .header .nav .nav-dropdown > .nav-arrow:hover, .header .nav .nav-dropdown.open > .nav-arrow{ color:#ff3038!important; } .header .nav .nav-dropdown{z-index:160!important} .header .nav .nav-menu{z-index:250!important} /* Keep the enquiry office cards compact enough that BOTH map buttons remain visible. */ .kr-offices{align-items:stretch!important} .kr-office{min-height:0!important;align-items:stretch!important} .kr-office-info{padding:21px 22px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important} .kr-office-info .tag{margin-bottom:8px!important;font-size:10px!important} .kr-office-info h3{font-size:27px!important;margin:0 0 10px!important;line-height:1!important} .kr-office-info p{font-size:14px!important;line-height:1.52!important;margin:0!important} .kr-office-info a:not(.kr-office-btn){font-size:14px!important;margin-top:7px!important;line-height:1.35!important} .kr-office-btn{font-size:11px!important;line-height:1!important;padding:10px 13px!important;margin-top:13px!important;align-self:flex-start!important;white-space:nowrap!important} @media(max-width:900px){ .kr-office-info{padding:20px!important} } @media(max-width:600px){ .kr-office-info{padding:18px!important} .kr-office-info h3{font-size:26px!important} .kr-office-info p{font-size:11.5px!important} .kr-office-info a:not(.kr-office-btn){font-size:11.5px!important} } /* Leadership: show the COMPLETE Gandhi photos without cropping and reduce text density. */ .about-lead-head{margin-bottom:22px!important} .about-lead-head h2{font-size:clamp(36px,3.6vw,55px)!important;line-height:.96!important;margin:7px 0!important} .about-lead-head p{font-size:13px!important;line-height:1.45!important;max-width:260px!important} .about-lead-grid{gap:16px!important;align-items:start!important} .leader-card{ grid-template-columns:170px minmax(0,1fr)!important; align-items:start!important; min-height:0!important; } .leader-card img{ width:170px!important; height:245px!important; min-height:245px!important; object-fit:contain!important; object-position:center!important; background:#f5f5f5!important; align-self:start!important; } .leader-copy{padding:17px 18px!important;min-width:0!important} .leader-copy small{font-size:10px!important;letter-spacing:.08em!important} .leader-copy h3{font-size:25px!important;line-height:1!important;margin:3px 0 9px!important} .leader-copy p{font-size:13px!important;line-height:1.42!important;color:#59616d!important;margin:0 0 7px!important} .leader-copy p:last-child{margin-bottom:0!important} @media(max-width:900px){ .leader-card{grid-template-columns:145px minmax(0,1fr)!important} .leader-card img{width:145px!important;height:220px!important;min-height:220px!important} .leader-copy{padding:15px 16px!important} .leader-copy p{font-size:10.5px!important;line-height:1.4!important} } @media(max-width:600px){ .about-lead-head h2{font-size:42px!important} .about-lead-head p{max-width:none!important;margin-top:10px!important} .leader-card{grid-template-columns:1fr!important} .leader-card img{width:100%!important;height:230px!important;min-height:230px!important;object-fit:contain!important} .leader-copy{padding:16px!important} .leader-copy h3{font-size:26px!important} .leader-copy p{font-size:13px!important;line-height:1.48!important;margin-bottom:7px!important} } /* Prevent the desktop header from squeezing the Media Solutions item out of view. */ @media(min-width:1101px){ .header .nav{gap:20px!important;flex-shrink:0!important} .header .nav .nav-dropdown > a{font-size:14px!important} } @media(min-width:761px) and (max-width:1100px){ .header .nav{gap:12px!important} .header .nav .nav-dropdown{gap:2px!important} .header .nav .nav-dropdown > a{font-size:13px!important} } /* FINAL USER FIX — Office CTA text always readable; leadership portraits clean and proportionate */ .kr-office-info .kr-office-btn{ position:relative!important; z-index:2!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; width:auto!important; min-width:112px!important; max-width:100%!important; min-height:36px!important; height:auto!important; padding:9px 14px!important; margin-top:auto!important; margin-bottom:0!important; line-height:1.15!important; text-align:center!important; white-space:nowrap!important; overflow:visible!important; box-sizing:border-box!important; color:#ef2027!important; background:#fff!important; opacity:1!important; visibility:visible!important; } .kr-office-info .kr-office-btn::before{z-index:-1!important} .kr-office-info .kr-office-btn:hover{color:#fff!important;background:#ef2027!important} .leader-card{ grid-template-columns:220px minmax(0,1fr)!important; min-height:0!important; overflow:hidden!important; align-items:stretch!important; } .leader-card img{ width:220px!important; height:260px!important; min-height:260px!important; object-fit:cover!important; object-position:center center!important; display:block!important; background:#eee!important; transform:none!important; } .leader-card:hover img{transform:scale(1.018)!important} .leader-copy{ padding:18px 20px!important; min-width:0!important; overflow:visible!important; } .leader-copy h3{font-size:26px!important;line-height:1.05!important;margin:4px 0 9px!important} .leader-copy p{font-size:13px!important;line-height:1.38!important;margin:0 0 7px!important} @media(max-width:900px){ .kr-office-info .kr-office-btn{min-width:112px!important;padding:9px 13px!important;font-size:10.5px!important} .leader-card{grid-template-columns:175px minmax(0,1fr)!important} .leader-card img{width:175px!important;height:245px!important;min-height:245px!important} .leader-copy{padding:16px 17px!important} } @media(max-width:600px){ .kr-office-info .kr-office-btn{min-width:118px!important;font-size:13px!important;padding:10px 14px!important} .leader-card{grid-template-columns:1fr!important} .leader-card img{width:100%!important;height:300px!important;min-height:300px!important;object-fit:cover!important;object-position:center center!important} .leader-copy{padding:17px!important} .leader-copy h3{font-size:25px!important} .leader-copy p{font-size:13px!important;line-height:1.45!important} } /* FINAL MOBILE NAV FIX — keep Media Solutions visible and keep all nav underline motion consistent. */ @media (max-width:760px){ .header .nav .nav-dropdown{ width:100%!important; height:auto!important; display:grid!important; grid-template-columns:1fr 40px!important; align-items:stretch!important; position:relative!important; flex:0 0 auto!important; color:#111318!important; background:#fff!important; } /* Media Solutions must never inherit the transparent-hero white text on the solid mobile menu. */ .header .nav .nav-dropdown > a{ display:flex!important; align-items:center!important; justify-content:center!important; position:relative!important; width:100%!important; min-height:52px!important; padding:14px 12px!important; border-bottom:1px solid #f0f0f0!important; color:#444!important; background:#fff!important; font-size:14px!important; font-weight:600!important; opacity:1!important; transform:none!important; text-shadow:none!important; } .header .nav .nav-dropdown > a::after{ content:""!important; position:absolute!important; left:12px!important; right:auto!important; bottom:6px!important; width:0!important; height:1.5px!important; background:var(--red)!important; box-shadow:0 0 8px rgba(229,27,35,.55)!important; transition:width .32s cubic-bezier(.2,.75,0,1)!important; } .header .nav .nav-dropdown > a:hover::after, .header .nav .nav-dropdown > a:focus-visible::after, .header .nav .nav-dropdown.open > a::after{ width:calc(100% - 24px)!important; } .header .nav .nav-dropdown > a:hover, .header .nav .nav-dropdown > a:focus-visible, .header .nav .nav-dropdown.open > a{ color:var(--red)!important; transform:translateX(4px)!important; } .header .nav .nav-dropdown > .nav-arrow{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:52px!important; width:40px!important; padding:0!important; margin:0!important; border:0!important; border-bottom:1px solid #f0f0f0!important; border-radius:0!important; background:#fff!important; color:#444!important; font-size:9px!important; transform:none!important; } .header .nav .nav-dropdown > .nav-arrow:hover, .header .nav .nav-dropdown > .nav-arrow:focus-visible, .header .nav .nav-dropdown.open > .nav-arrow{ color:var(--red)!important; transform:none!important; } /* Same underline animation for normal nav links. */ .header .nav > a:not(.nav-cta){ position:relative!important; overflow:visible!important; } .header .nav > a:not(.nav-cta)::after{ left:12px!important; bottom:6px!important; width:0!important; height:1.5px!important; background:var(--red)!important; box-shadow:0 0 8px rgba(229,27,35,.55)!important; transition:width .32s cubic-bezier(.2,.75,0,1)!important; } .header .nav > a:not(.nav-cta):hover::after, .header .nav > a:not(.nav-cta):focus-visible::after{ width:calc(100% - 24px)!important; } .header .nav > a:not(.nav-cta):hover, .header .nav > a:not(.nav-cta):focus-visible{ transform:translateX(4px)!important; } /* Small submenu items use the same motion language. */ .header .nav .nav-menu a{ position:relative!important; overflow:visible!important; color:#444!important; background:#fafafa!important; text-align:center!important; transform:none!important; } .header .nav .nav-menu a::after{ content:""!important; position:absolute!important; left:12px!important; bottom:5px!important; width:0!important; height:1.5px!important; background:var(--red)!important; box-shadow:0 0 7px rgba(229,27,35,.45)!important; transition:width .32s cubic-bezier(.2,.75,0,1)!important; } .header .nav .nav-menu a:hover::after, .header .nav .nav-menu a:focus-visible::after{ width:calc(100% - 24px)!important; } /* Enquire Now: text + arrow stay on one line on every mobile width. */ .header .nav .nav-cta{ display:inline-flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:center!important; white-space:nowrap!important; text-align:center!important; gap:8px!important; width:106px!important; min-width:106px!important; max-width:106px!important; min-height:42px!important; margin:10px auto 4px!important; padding:11px 8px!important; } .header .nav .nav-cta span{ display:inline!important; flex:0 0 auto!important; margin:0!important; padding:0!important; white-space:nowrap!important; line-height:1!important; } } /* Leadership: compact preview ending at the requested fold line, with small Read More control. */ .leader-copy .leader-visible{display:block} .leader-copy .leader-more[hidden]{display:none!important} .leader-copy .leader-more{display:block} .leader-copy .leader-readmore{ margin-top:8px!important; padding:7px 11px!important; min-height:0!important; height:auto!important; width:max-content!important; gap:7px!important; border:1px solid #ed1c24!important; border-radius:6px!important; background:#fff!important; color:#ed1c24!important; font:900 9px/1 Inter,sans-serif!important; letter-spacing:.45px!important; text-transform:uppercase!important; cursor:pointer!important; position:relative!important; overflow:hidden!important; } .leader-copy .leader-readmore:hover{ color:#fff!important; background:#ed1c24!important; transform:translateY(-2px); box-shadow:0 10px 24px rgba(237,28,36,.2); } .leader-copy .leader-readmore span{display:inline-block;transition:transform .35s var(--about-ease)} .leader-copy .leader-readmore:hover span{transform:translateX(4px)} @media(max-width:600px){ .leader-copy .leader-readmore{font-size:8.5px!important;padding:7px 10px!important} } /* FINAL MOBILE LEADERSHIP FIX: one visible paragraph + compact Read More; portraits never crop. */ @media(max-width:600px){ .leader-card img{ width:100%!important; height:260px!important; min-height:260px!important; object-fit:contain!important; object-position:center center!important; background:#fff!important; display:block!important; } .leader-copy .leader-visible p{display:none!important;} .leader-copy .leader-visible p:first-child{display:block!important;} .leader-card.is-expanded .leader-visible p{display:block!important;} .leader-copy .leader-readmore{ display:inline-flex!important; width:max-content!important; font-size:8.5px!important; padding:7px 10px!important; margin-top:8px!important; } } /* HOME non-hero paragraph spacing: compact the gaps without changing copy/layout */ #experience .experience-quote{line-height:1.55!important;margin-bottom:0!important} #experience .experience-quote br + br{display:none!important} #about .about-copy p{line-height:1.55!important;margin-bottom:0!important} #about .about-copy p br + br{display:none!important} #why-krishna-doc .doc-home-copy p{line-height:1.55!important;margin:0 0 5px!important} #why-krishna-doc .doc-home-copy p:last-child{margin-bottom:0!important} #why-krishna-doc .doc-home-panel p{line-height:1.55!important;margin:0 0 5px!important} #why-krishna-doc .doc-home-panel p:last-child{margin-bottom:0!important} #media-legacy-doc p{line-height:1.55!important;margin:0 0 5px!important} #media-legacy-doc p:last-child{margin-bottom:0!important} #clients .clients-copy p{line-height:1.55!important;margin-bottom:8px!important} /* Mumbai marker hover office card + slightly lower Key Markets panel */ .network-reference-page .network-market-list{transform:translateY(36px);} .network-reference-page .network-map{position:relative;} .network-reference-page .mumbai-office-tooltip{ --tooltip-width:300px; position:absolute; width:var(--tooltip-width); max-width:calc(100% - 24px); padding:14px 16px 15px; background:#fff; border:1px solid #e7e7e7; border-top:3px solid var(--red); box-shadow:0 18px 45px rgba(0,0,0,.14); z-index:8; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .28s ease,visibility .28s ease,transform .28s ease; pointer-events:none; } .network-reference-page .mumbai-office-tooltip.is-visible{opacity:1;visibility:visible;transform:translateY(0);} .network-reference-page .mumbai-office-tooltip-kicker{font:800 9px/1 Inter,sans-serif;letter-spacing:1.8px;color:var(--red);margin-bottom:6px;} .network-reference-page .mumbai-office-tooltip strong{display:block;font:800 17px/1.15 Oswald,Arial,sans-serif;color:#16191d;text-transform:uppercase;margin-bottom:8px;} .network-reference-page .mumbai-office-tooltip p{font:500 10px/1.55 Inter,Arial,sans-serif;color:#666;margin:0 0 8px;} .network-reference-page .mumbai-office-tooltip a{font:800 10px/1 Inter,Arial,sans-serif;color:#111;text-decoration:none;} .network-reference-page .mumbai-office-tooltip a:hover{color:var(--red);} .network-reference-page .marker-mumbai{cursor:pointer;} @media(max-width:680px){ .network-reference-page .network-market-list{transform:translateY(28px);} .network-reference-page .mumbai-office-tooltip{padding:12px 14px 13px;} .network-reference-page .mumbai-office-tooltip strong{font-size:17px;} .network-reference-page .mumbai-office-tooltip p{font-size:10px;} } /* FINAL MAP + MUMBAI OFFICE HOVER POLISH */ .network-reference-page .network-map{width:min(85vw,578px)!important;max-width:578px!important;} .network-reference-page .mumbai-office-tooltip{max-width:275px;} .network-reference-page .mumbai-office-tooltip.is-visible{transform:translateY(0) translateX(0);} .network-reference-page .mumbai-office-connector{ position:absolute; height:2px; min-width:0; background:var(--red); transform-origin:0 50%; opacity:0; visibility:hidden; pointer-events:none; z-index:7; box-shadow:0 0 10px rgba(229,27,35,.28); transition:opacity .22s ease,width .22s ease,top .22s ease,left .22s ease,transform .22s ease; } .network-reference-page .mumbai-office-connector::after{ content:''; position:absolute; right:-1px; top:50%; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid var(--red); transform:translateY(-50%); } .network-reference-page .mumbai-office-connector.is-visible{opacity:1;visibility:visible;} .network-reference-page #market-maharashtra, .network-reference-page .marker-mumbai{cursor:pointer;} @media(min-width:981px) and (max-width:1180px){ .network-reference-page .network-map{width:min(85vw,544px)!important;max-width:544px!important;} } @media(max-width:980px){ .network-reference-page .network-map{width:min(85vw,425px)!important;max-width:425px!important;} .network-reference-page .mumbai-office-tooltip{max-width:255px;} } @media(max-width:680px){ .network-reference-page .network-map{width:min(85vw,374px)!important;max-width:374px!important;} .network-reference-page .mumbai-office-tooltip{max-width:min(255px,calc(100vw - 44px));padding:11px 13px 12px;} } @media(max-width:420px){ .network-reference-page .network-map{width:min(85vw,357px)!important;max-width:357px!important;} .network-reference-page .mumbai-office-tooltip{max-width:calc(100vw - 36px);} } /* FINAL USER REQUEST — network map another 15% smaller + Mumbai office hover card to the left */ .network-reference-page #indiaNetworkSvg.network-map-svg, .network-reference-page .network-map{ width:536px !important; max-width:536px !important; height:auto !important; transform:none !important; } .network-reference-page .mumbai-office-tooltip{ max-width:275px; } @media (min-width:981px) and (max-width:1180px){ .network-reference-page #indiaNetworkSvg.network-map-svg, .network-reference-page .network-map{ width:510px !important; max-width:510px !important; } } @media (max-width:980px){ .network-reference-page #indiaNetworkSvg.network-map-svg, .network-reference-page .network-map{ width:min(80vw,536px) !important; max-width:536px !important; height:auto !important; } } @media (max-width:680px){ .network-reference-page #indiaNetworkSvg.network-map-svg, .network-reference-page .network-map{ width:min(82vw,500px) !important; max-width:500px !important; } } /* ===== FINAL USER REQUEST: smaller network map + Mumbai hover card clearly left of map + compact Explore card ===== */ @media (min-width:981px){ .network-reference-page #indiaNetworkSvg.network-map-svg, .network-reference-page .network-map{ width:482px !important; max-width:482px !important; } .network-reference-page .network-map-note{ width:270px !important; min-height:250px !important; padding:24px !important; } .network-reference-page .network-map-note .map-note-icon{ width:48px !important; height:48px !important; font-size:25px !important; margin-bottom:18px !important; } .network-reference-page .network-map-note strong{ font-size:16px !important; line-height:1.1 !important; } .network-reference-page .network-map-note p{ font-size:11px !important; line-height:1.5 !important; max-width:220px !important; margin-top:9px !important; } .network-reference-page .network-map-legend{ gap:10px !important; margin-top:18px !important; font-size:10px !important; } .network-reference-page .mumbai-office-tooltip{ pointer-events:none; } .network-reference-page .mumbai-office-tooltip.is-visible{ pointer-events:auto; } .network-reference-page .mumbai-office-connector::after{ right:auto; left:-1px; border-left:0; border-right:8px solid var(--red); } } @media (min-width:981px) and (max-width:1180px){ .network-reference-page #indiaNetworkSvg.network-map-svg, .network-reference-page .network-map{ width:459px !important; max-width:459px !important; } } @media (max-width:980px){ .network-reference-page #indiaNetworkSvg.network-map-svg, .network-reference-page .network-map{ width:min(72vw,482px) !important; max-width:482px !important; } } @media (max-width:680px){ .network-reference-page #indiaNetworkSvg.network-map-svg, .network-reference-page .network-map{ width:min(74vw,450px) !important; max-width:450px !important; } } /* FINAL NETWORK POLISH — compact map, exact Key Markets offsets, smaller hover arrow, mobile-safe hover card */ @media (min-width:1181px){ .network-reference-page .network-market-list{transform:translateY(36px)!important;} .network-reference-page .network-map{width:min(100%,630px)!important;max-width:630px!important;} .network-reference-page .network-map-aura{width:450px!important;height:450px!important;} } @media (min-width:981px) and (max-width:1180px){ .network-reference-page .network-market-list{transform:translateY(36px)!important;} .network-reference-page .network-map{width:min(100%,585px)!important;max-width:585px!important;} .network-reference-page .network-map-aura{width:360px!important;height:360px!important;} } /* Smaller, cleaner connector arrow — keeps the same red line animation. */ .network-reference-page .mumbai-office-connector::after{ right:auto!important; left:-1px!important; border-left:0!important; border-right:6px solid var(--red)!important; border-top-width:4px!important; border-bottom-width:4px!important; } @media (max-width:980px){ .network-reference-page .network-market-list{transform:translateY(8px)!important;} .network-reference-page .network-map{width:min(90vw,558px)!important;max-width:558px!important;} .network-reference-page .network-map-aura{width:330px!important;height:330px!important;} } @media (max-width:680px){ .network-reference-page .network-market-list{transform:translateY(8px)!important;} .network-reference-page .network-map{width:90vw!important;max-width:500px!important;} .network-reference-page .mumbai-office-tooltip{ width:min(188px,calc(100vw - 24px))!important; max-width:188px!important; padding:10px 12px 11px!important; z-index:30!important; } .network-reference-page .mumbai-office-tooltip strong{font-size:16px!important;} .network-reference-page .mumbai-office-tooltip p{font-size:8.5px!important;line-height:1.5!important;} .network-reference-page .mumbai-office-tooltip a{font-size:10px!important;} } @media (max-width:420px){ .network-reference-page .network-map{width:90vw!important;max-width:390px!important;} .network-reference-page .mumbai-office-tooltip{width:175px!important;max-width:calc(100vw - 24px)!important;} } \n\n/* FINAL REQUEST — Mumbai office hover: desktop LEFT of map, mobile BELOW map */\n@media (min-width:681px){\n .network-reference-page .network-map-wrap{overflow:visible!important;}\n .network-reference-page .mumbai-office-tooltip{z-index:40!important;}\n .network-reference-page .mumbai-office-connector{z-index:39!important;}\n .network-reference-page .mumbai-office-connector::after{\n right:-1px!important;\n left:auto!important;\n top:50%!important;\n border-top:4px solid transparent!important;\n border-bottom:4px solid transparent!important;\n border-left:0!important;\n border-right:7px solid var(--red)!important;\n transform:translateY(-50%)!important;\n }\n}\n@media (max-width:680px){\n .network-reference-page .network-map-wrap{\n overflow:visible!important;\n min-height:0!important;\n padding-bottom:0;\n }\n .network-reference-page .mumbai-office-tooltip{\n left:50%!important;\n top:calc(100% + 18px)!important;\n transform:translateY(8px);\n z-index:40!important;\n width:min(188px,calc(100vw - 24px))!important;\n max-width:min(188px,calc(100vw - 24px))!important;\n }\n .network-reference-page .mumbai-office-tooltip.is-visible{\n transform:translateX(0) translateY(0)!important;\n }\n .network-reference-page .mumbai-office-connector{z-index:39!important;}\n .network-reference-page .mumbai-office-connector::after{\n right:-1px!important;\n left:auto!important;\n top:50%!important;\n border-left:4px solid transparent!important;\n border-right:4px solid transparent!important;\n border-top:7px solid var(--red)!important;\n border-bottom:0!important;\n transform:translateY(-50%)!important;\n }\n}\n /* Final requested compact office + leadership alignment */ .kr-office{height:500px!important;min-height:0!important} .kr-office img{height:500px!important;min-height:0!important} .leader-copy .leader-role{font:600 10px/1.35 Inter,sans-serif;color:#6b7280;margin:0 0 7px;text-transform:none;letter-spacing:.02em} .about-lead-head>p{display:none!important} @media(max-width:900px){.kr-office{height:auto!important}.kr-office img{height:300px!important;min-height:0!important}.leader-copy .leader-role{font-size:11px!important}} @media(max-width:600px){.kr-office img{height:230px!important}.leader-copy .leader-role{font-size:11px!important;margin-bottom:6px}} /* Leadership role alignment — keep designation inside each card */ .leader-copy .leader-role{font-size:14px!important;line-height:1.25!important;color:#59616d!important;font-weight:700!important;margin:-4px 0 10px!important} /* Office cards — slightly smaller image so office copy has better balance */ .kr-office{grid-template-columns:.74fr 1.26fr!important} .kr-office img{width:100%!important;height:100%!important;min-height:235px!important;object-fit:cover!important;object-position:center center!important} .kr-office-info{padding:24px 26px!important} @media(max-width:900px){ .kr-office{grid-template-columns:.78fr 1.22fr!important} .kr-office img{min-height:220px!important} } @media(max-width:600px){ .kr-office{grid-template-columns:1fr!important} .kr-office img{height:200px!important;min-height:200px!important;object-fit:cover!important;object-position:center center!important} .kr-office-info{padding:20px!important} .leader-copy .leader-role{font-size:13px!important;margin:-2px 0 9px!important} } /* FINAL HERO TEXT POSITION — requested: move hero headline lower on desktop + mobile. */ .home-page .hero .hero-inner{padding-top:198px!important;} @media(max-width:760px){ .home-page .hero .hero-inner{padding-top:138px!important;} } /* ===== FINAL BUTTON + CTA BANNER CLEANUP ===== */ /* Keep the same compact Enquire Now shape on every action button. Preserve each button's existing color; only normalize geometry + hover sweep. */ .btn, .small-btn, .outline-btn, .kr-btn, .ow-btn, .media-btn, .network-btn, .network-card-link, .kr-office-btn, .about-btn, .footer-campaign, .service-next, .tab, .nav-cta, .experience-link { border-radius:6px !important; clip-path:none !important; } .btn::before, .btn::after, .small-btn::before, .small-btn::after, .outline-btn::before, .outline-btn::after, .kr-btn::before, .kr-btn::after, .ow-btn::before, .ow-btn::after, .media-btn::before, .media-btn::after, .network-btn::before, .network-btn::after, .network-card-link::before, .network-card-link::after, .kr-office-btn::before, .kr-office-btn::after, .about-btn::before, .about-btn::after, .footer-campaign::before, .footer-campaign::after, .nav-cta::before, .nav-cta::after { border-radius:inherit !important; clip-path:none !important; } .btn:hover, .small-btn:hover, .outline-btn:hover, .kr-btn:hover, .ow-btn:hover, .media-btn:hover, .network-btn:hover, .network-card-link:hover, .kr-office-btn:hover, .about-btn:hover, .footer-campaign:hover, .service-next:hover, .tab:hover, .nav-cta:hover, .experience-link:hover { border-radius:6px !important; clip-path:none !important; } /* Circular utility controls keep their intended circular geometry. */ .work-scroll-arrow, .client-arrow, .story-dialog > button, .network-map-compass b { border-radius:50% !important; clip-path:none !important; } /* CTA/banner backgrounds: remove decorative photo backgrounds only. Hero video/media sections are intentionally untouched. */ .media-final-cta::before, .kr-final-cta::before, .kr-career-cta::before { display:none !important; background:none !important; animation:none !important; } .about-cta > img, .ow-cta-bg, .network-journey-bg img, .network-cta > img { display:none !important; visibility:hidden !important; } .about-cta, .media-final-cta, .ow-cta, .network-journey, .network-cta, .kr-final-cta, .kr-career-cta { background:#0c1015 !important; background-image:none !important; } /* ===== REQUESTED FINAL HERO POLISH ===== /* Home hero: mobile headline 30% lower than the previous mobile position. Desktop position remains unchanged. */ @media (max-width:760px){ .home-page .hero .hero-inner{padding-top:180px!important;} } /* About: remove the dead/extra space under the inner-page hero by making the hero frame slightly more compact while keeping its content centered. */ .inner-page .about-hero, .inner-page .about-hero-inner{ height:550px!important; min-height:550px!important; } .inner-page .about-statbar{margin-top:0!important;} /* Enquire hero: remove the dark/black side feel by filling the frame from edge-to-edge and slightly oversizing the source image to crop any source bars. */ .kr-page .kr-enquiry-visual, .kr-page .kr-enquiry-visual img{ background:transparent!important; } .kr-page .kr-enquiry-visual img{ transform:scale(1.10)!important; transform-origin:center center!important; object-fit:cover!important; object-position:center center!important; } .kr-page .kr-enquiry-visual:before{ background:linear-gradient(90deg,rgba(5,8,11,.78) 0%,rgba(5,8,11,.34) 30%,rgba(5,8,11,.06) 60%,transparent 100%)!important; } @media(max-width:760px){ .inner-page .about-hero, .inner-page .about-hero-inner{ height:490px!important; min-height:490px!important; } .kr-page .kr-enquiry-visual img{ transform:scale(1.12)!important; object-position:center center!important; } .kr-page .kr-enquiry-visual:before{ background:linear-gradient(90deg,rgba(5,8,11,.72) 0%,rgba(5,8,11,.28) 34%,rgba(5,8,11,.04) 68%,transparent 100%)!important; } } /* ===== USER FIX: FULL-BLEED ENQUIRE HERO + ABOUT HERO CROP ===== */ /* Enquiry hero: remove left black content block so the supplied image runs edge-to-edge. */ .kr-page .kr-enquiry-hero{background:#0b0f14!important;} .kr-page .kr-enquiry-copy{background:transparent!important;} .kr-page .kr-enquiry-copy:after{display:none!important;} .kr-page .kr-enquiry-visual:before{ background:linear-gradient(90deg,rgba(5,8,11,.72) 0%,rgba(5,8,11,.46) 38%,rgba(5,8,11,.16) 72%,rgba(5,8,11,.06) 100%)!important; } .kr-page .kr-enquiry-visual img{ object-fit:cover!important; object-position:center center!important; } @media(max-width:760px){ .kr-page .kr-enquiry-copy{background:transparent!important;} .kr-page .kr-enquiry-visual:before{ background:linear-gradient(90deg,rgba(5,8,11,.74) 0%,rgba(5,8,11,.42) 55%,rgba(5,8,11,.14) 100%)!important; } } /* About hero: keep the same banner height but crop the unnecessary lower road area. */ .about-hero-media{ object-fit:cover!important; object-position:center 18%!important; } @media(max-width:760px){ .about-hero-media{object-position:center 16%!important;} } /* ABOUT + ENQUIRY INNER BANNER CLEANUP — keep Home hero untouched */ .inner-page .about-hero-media{ transform:scale(1.085)!important; transform-origin:center center!important; object-position:center 42%!important; } .inner-page .about-hero{ overflow:hidden!important; } .inner-page .kr-enquiry-visual{ width:100vw!important; left:50%!important; right:auto!important; margin-left:-50vw!important; overflow:hidden!important; } .inner-page .kr-enquiry-visual img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center center!important; transform:scale(1.09)!important; transform-origin:center center!important; } @media(max-width:760px){ .inner-page .about-hero-media{transform:scale(1.08)!important;object-position:center 45%!important;} .inner-page .kr-enquiry-visual img{transform:scale(1.12)!important;object-position:center center!important;} } /* ===== USER REQUEST: ENQUIRE HERO IMAGE + MOBILE HOME HERO SINGLE LINE ===== */ /* Use a fresh campaign visual for the Enquire Now hero while keeping the full-width banner treatment. */ .kr-page .kr-enquiry-visual img{ object-position:center center!important; } /* On phones keep the Home hero headline horizontal so it does not sit over the centre of the video. */ @media(max-width:600px){ .home-page .hero .hero-inner{ padding-top:180px!important; } .home-page .hero h1{ white-space:nowrap!important; display:block!important; width:100%!important; max-width:none!important; font-size:clamp(20px,5.1vw,31px)!important; line-height:1!important; letter-spacing:-.8px!important; margin:0 0 20px!important; } .home-page .hero h1 br{display:none!important;} .home-page .hero h1 em{display:inline!important;} } @media(max-width:360px){ .home-page .hero h1{font-size:20px!important;letter-spacing:-.65px!important;} } /* FINAL USER FIX — Enquiry hero truly edge-to-edge; remove heavy black side treatment. */ .kr-page .kr-enquiry-hero, .kr-page .kr-enquiry-hero .inner, .kr-page .kr-enquiry-visual{ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; left:0!important; right:0!important; } .kr-page .kr-enquiry-visual img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center center!important; transform:none!important; } .kr-page .kr-enquiry-visual:before{ background:linear-gradient(90deg,rgba(5,8,11,.38) 0%,rgba(5,8,11,.16) 45%,rgba(5,8,11,.04) 76%,transparent 100%)!important; } @media(max-width:760px){ .kr-page .kr-enquiry-visual:before{ background:linear-gradient(90deg,rgba(5,8,11,.38) 0%,rgba(5,8,11,.16) 48%,rgba(5,8,11,.04) 78%,transparent 100%)!important; } } /* FINAL USER FIX — Home mobile hero headline centered at the lower edge of the video. */ @media(max-width:600px){ .home-page .hero .hero-inner{ position:absolute!important; inset:0!important; display:block!important; height:100%!important; padding:0!important; } .home-page .hero h1{ position:absolute!important; left:50%!important; bottom:18px!important; transform:translateX(-50%)!important; width:calc(100% - 24px)!important; max-width:none!important; margin:0!important; padding:0!important; text-align:center!important; white-space:nowrap!important; font-size:clamp(20px,5.8vw,28px)!important; line-height:1.05!important; letter-spacing:-.15px!important; word-spacing:5px!important; z-index:4!important; } } /* ===== FINAL ENQUIRE HERO EDGE CLEANUP ===== Keep the enquiry hero truly edge-to-edge and prevent dark source/background edges from appearing on either side. The image slightly overscans the frame, while the overlay is uniform instead of a side-heavy black gradient. */ .kr-page .kr-enquiry-hero{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; overflow:hidden!important; background:#111!important; } .kr-page .kr-enquiry-hero .inner{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } .kr-page .kr-enquiry-visual{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; overflow:hidden!important; background:transparent!important; } .kr-page .kr-enquiry-visual img{ position:absolute!important; left:-3%!important; top:-3%!important; width:106%!important; height:106%!important; max-width:none!important; object-fit:cover!important; object-position:center center!important; transform:none!important; } .kr-page .kr-enquiry-visual:before{ background:rgba(5,8,11,.42)!important; } .kr-page .kr-enquiry-visual:after{display:none!important;} @media(max-width:760px){ .kr-page .kr-enquiry-hero, .kr-page .kr-enquiry-hero .inner, .kr-page .kr-enquiry-visual{ width:100%!important; max-width:none!important; } .kr-page .kr-enquiry-visual img{ left:-4%!important; top:-4%!important; width:108%!important; height:108%!important; object-fit:cover!important; object-position:center center!important; } .kr-page .kr-enquiry-visual:before{ background:rgba(5,8,11,.38)!important; } } /* FINAL FULL-BLEED ENQUIRY HERO — eliminate any side gutters/black strips */ html,body{width:100%!important;max-width:none!important;overflow-x:hidden!important;background:#fff!important;} .kr-page{width:100%!important;max-width:none!important;margin:0!important;background:#fff!important;} .kr-page .kr-enquiry-hero{ width:100vw!important; max-width:none!important; min-width:100vw!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; padding:0!important; background:#000!important; overflow:hidden!important; } .kr-page .kr-enquiry-hero .inner{ width:100vw!important; max-width:none!important; margin:0!important; padding:0!important; min-height:100%!important; } .kr-page .kr-enquiry-visual{ position:absolute!important; inset:0!important; width:100vw!important; height:100%!important; margin:0!important; padding:0!important; background:transparent!important; overflow:hidden!important; } .kr-page .kr-enquiry-visual img{ left:-2%!important; top:-2%!important; width:104%!important; height:104%!important; max-width:none!important; object-fit:cover!important; object-position:center center!important; } .kr-page .kr-enquiry-copy{position:relative!important;z-index:3!important;} @media(max-width:760px){ .kr-page .kr-enquiry-hero{width:100vw!important;min-width:100vw!important;margin-left:calc(50% - 50vw)!important;} .kr-page .kr-enquiry-visual img{left:-3%!important;top:-3%!important;width:106%!important;height:106%!important;object-fit:cover!important;object-position:center center!important;} } /* ===== FINAL DOC CONTENT ALIGNMENT — SAME VISUAL LANGUAGE ===== */ .experience-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:23px} .experience-actions .experience-link{margin-top:0!important} .experience-actions .experience-link.secondary{border:1px solid #111;padding:12px 16px;color:#111;background:transparent} .media-doc-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px auto 0;width:min(calc(100% - 64px),var(--max));} .transit-layout>.media-doc-detail-grid{grid-column:1/-1;width:auto;margin:16px 0 0;} .media-doc-detail-grid article,.branding-detail-grid article{background:#fff;border:1px solid #e4e4e4;padding:15px 16px} .media-doc-detail-grid b,.branding-detail-grid b{display:block;font-size:14px;margin-bottom:7px} .media-doc-detail-grid p,.branding-detail-grid p{margin:0!important;color:#777;line-height:1.55;font-size:11px!important;max-width:none!important} .media-doc-detail-grid-6{grid-template-columns:repeat(3,minmax(0,1fr))} .branding-detail-grid{display:grid;grid-template-columns:1fr;gap:9px;margin:4px 0 0} @media(max-width:900px){ .media-doc-detail-grid,.media-doc-detail-grid-6{grid-template-columns:1fr} } @media(max-width:760px){ .media-doc-detail-grid{width:calc(100% - 34px)} .experience-actions{gap:10px} .experience-actions .experience-link.secondary{padding:11px 14px} .media-doc-detail-grid article,.branding-detail-grid article{padding:13px 14px} .media-doc-detail-grid p,.branding-detail-grid p{font-size:11px!important} } /* FINAL QA FIX — equal desktop navigation spacing + identical Home CTA links. */ @media (min-width:1051px){ .header .nav{ gap:12px!important; align-items:center!important; } .header .nav > a:not(.nav-cta), .header .nav > .nav-dropdown{ flex:0 0 112px!important; width:112px!important; min-width:112px!important; max-width:112px!important; box-sizing:border-box!important; margin:0!important; } .header .nav > a:not(.nav-cta){ display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; padding-left:0!important; padding-right:0!important; } .header .nav > .nav-dropdown{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:0!important; height:100%!important; } .header .nav > .nav-dropdown > a{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; padding-left:0!important; padding-right:0!important; text-align:center!important; } .header .nav > .nav-dropdown > .nav-arrow{ position:absolute!important; right:7px!important; top:50%!important; transform:translateY(-50%)!important; margin:0!important; } .header .nav-cta{margin-left:0!important;margin-right:0!important;} } /* Discover Our Story and Plan Your Campaign use exactly the same visual treatment. */ .experience-actions .experience-link, .experience-actions .experience-link.secondary{ margin-top:0!important; padding:12px 22px!important; border:0!important; border-bottom:2px solid var(--red)!important; color:#111!important; background:transparent!important; } @media(max-width:760px){ .experience-actions .experience-link, .experience-actions .experience-link.secondary{ padding:11px 18px!important; } } /* FINAL QA NAV SPACING — equal text-to-text gaps; arrow floats without widening the nav item. */ @media (min-width:1051px){ .header .nav{ gap:28px!important; align-items:center!important; justify-content:flex-end!important; } .header .nav > a:not(.nav-cta), .header .nav > .nav-dropdown{ flex:0 0 auto!important; width:auto!important; min-width:0!important; max-width:none!important; margin:0!important; box-sizing:border-box!important; } .header .nav > a:not(.nav-cta){ display:flex!important; align-items:center!important; justify-content:center!important; padding-left:0!important; padding-right:0!important; text-align:center!important; } .header .nav > .nav-dropdown{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:0!important; height:100%!important; } .header .nav > .nav-dropdown > a{ display:flex!important; align-items:center!important; justify-content:center!important; padding-left:0!important; padding-right:0!important; text-align:center!important; } .header .nav > .nav-dropdown > .nav-arrow{ position:absolute!important; left:calc(100% + 5px)!important; top:50%!important; right:auto!important; transform:translateY(-50%)!important; margin:0!important; padding:4px 0!important; } .header .nav-cta{margin-left:0!important;margin-right:0!important;} } /* FINAL HEADER CONSISTENCY — same navigation treatment on every page/section. */ .header .nav{ align-items:center!important; gap:30px!important; flex-shrink:0!important; } .header .nav > a:not(.nav-cta), .header .nav .nav-dropdown > a{ color:#30343a!important; font-size:13px!important; font-weight:700!important; letter-spacing:.1px!important; white-space:nowrap!important; } .header .nav .nav-dropdown{ gap:4px!important; height:100%!important; align-items:center!important; white-space:nowrap!important; } .header .nav .nav-arrow{color:#30343a!important;} .header .nav > a.active:not(.nav-cta), .header .nav .nav-dropdown > a.active{color:#e51b23!important;} .header .nav > a:not(.nav-cta):hover, .header .nav .nav-dropdown > a:hover{color:#e51b23!important;} /* Keep Discover Our Story visually aligned with the site's compact red CTAs. */ .home-page .experience-link, .experience-link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:18px!important; margin-top:8px!important; padding:12px 18px!important; min-height:42px!important; background:var(--red)!important; color:#fff!important; border:0!important; border-radius:6px!important; font-size:11px!important; font-weight:900!important; letter-spacing:.5px!important; text-transform:uppercase!important; position:relative!important; overflow:hidden!important; box-shadow:0 15px 30px #e51b2340!important; } .experience-link span{color:#fff!important;transition:transform .3s ease!important;} .experience-link:hover{transform:translateY(-3px)!important;box-shadow:0 0 0 1px #ff4148,0 12px 35px #e51b2355!important;} .experience-link:hover span{transform:translateX(5px)!important;} .experience-link::after{display:none!important;} @media(min-width:761px) and (max-width:1100px){.header .nav{gap:18px!important}.header .nav > a:not(.nav-cta),.header .nav .nav-dropdown > a{font-size:10.5px!important}} @media(max-width:760px){ .header .nav{gap:0!important} .header .nav > a:not(.nav-cta),.header .nav .nav-dropdown > a{font-size:14px!important;font-weight:600!important} .header .nav .nav-dropdown{height:auto!important} } .print-paper{overflow:hidden}.print-paper .print-press-thumb{width:86px;height:86px;object-fit:contain;float:right;margin:-8px -4px 8px 12px;background:#fff}.print-press-thumb{border:1px solid #ddd} /* ========================================================= KRISHNA AI — COMPACT WHATSAPP-STYLE CHAT / FINAL USER FIX Only chatbot visuals + interactions. Site/nav remain untouched. ========================================================= */ .chat-panel{ width:min(360px,calc(100vw - 28px))!important; height:470px!important; max-height:calc(100vh - 86px)!important; background:rgba(7,9,11,.68)!important; backdrop-filter:blur(20px) saturate(135%)!important; -webkit-backdrop-filter:blur(20px) saturate(135%)!important; } .chat-body{padding:10px 12px 10px!important} .chat-messages{display:flex!important;flex-direction:column!important;gap:0!important;padding:3px 2px 10px!important;overflow-y:auto!important} .chat-day{align-self:center;color:rgba(255,255,255,.48);font:600 9px/1.2 Inter,Arial,sans-serif;margin:2px 0 12px;letter-spacing:.2px} .msg-row{position:relative!important;display:flex!important;align-items:flex-end!important;gap:7px!important;margin:0 0 2px!important} .msg-row.bot{justify-content:flex-start!important} .msg-row.user{justify-content:flex-end!important} .msg-stack{display:flex;flex-direction:column;max-width:82%;min-width:0} .msg-avatar{display:grid!important;place-items:center!important;width:26px!important;height:26px!important;min-width:26px!important;flex:0 0 26px!important;border-radius:50%!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(229,27,35,.38)!important;box-shadow:0 4px 12px rgba(0,0,0,.18)!important;margin-bottom:14px!important} .mini-bot{position:relative;display:block;width:17px;height:14px;border-radius:5px;background:#090b0d;border:1px solid #e51b23} .mini-bot:before{content:"";position:absolute;left:7px;top:-5px;width:2px;height:4px;background:#e51b23} .mini-bot:after{content:"";position:absolute;left:6px;top:-7px;width:4px;height:4px;border-radius:50%;background:#32d46b;box-shadow:0 0 5px rgba(50,212,107,.7)} .mini-bot i{position:absolute;top:4px;width:3px;height:3px;border-radius:50%;background:#fff} .mini-bot i:first-child{left:3px}.mini-bot i:nth-child(2){right:3px} .mini-bot b{position:absolute;left:5px;bottom:2px;width:6px;height:2px;border-bottom:1px solid #e51b23} .msg-bubble{max-width:100%!important;padding:9px 11px!important;border-radius:12px!important;font-size:11.5px!important;line-height:1.45!important} .msg-row.bot .msg-bubble{border-radius:12px 12px 12px 4px!important} .msg-row.user .msg-bubble{border-radius:12px 12px 4px 12px!important} .msg-time{font:500 7.5px/1 Inter,Arial,sans-serif!important;color:rgba(255,255,255,.38)!important;margin:3px 0 9px!important;letter-spacing:.15px!important} .bot-time{margin-left:33px!important;text-align:left!important} .user-time{text-align:right!important;margin-right:2px!important} .typing-bubble{display:flex!important;align-items:center!important;gap:6px!important;min-width:66px!important} .typing-label{color:rgba(255,255,255,.62);font-size:11px!important} .typing-dots{display:inline-flex;gap:3px;align-items:center} .typing-dots i{width:4px;height:4px;border-radius:50%;background:#e51b23;animation:krTyping 1.05s infinite ease-in-out} .typing-dots i:nth-child(2){animation-delay:.14s}.typing-dots i:nth-child(3){animation-delay:.28s} @keyframes krTyping{0%,70%,100%{transform:translateY(0);opacity:.35}35%{transform:translateY(-3px);opacity:1}} @media(max-width:760px){ .chat-panel{width:calc(100vw - 18px)!important;height:430px!important;max-height:calc(100vh - 72px)!important;right:9px!important;bottom:70px!important} .msg-stack{max-width:84%}.msg-bubble{font-size:13px!important}.chat-day{font-size:8.5px!important} } /* FINAL USER REQUEST — hero videos + compact transparent WhatsApp-style chatbot */ .hero-media-desktop, .hero-media-mobile{ transform:translate(-50%,-50%)!important; filter:none!important; object-fit:cover!important; object-position:center center!important; } .hero-overlay,.hero-grid,.hero-noise{display:none!important} .chat-panel{ width:min(360px,calc(100vw - 28px))!important; height:500px!important; max-height:calc(100vh - 86px)!important; background:rgba(7,9,11,.58)!important; border:1px solid rgba(229,27,35,.30)!important; backdrop-filter:blur(18px) saturate(125%)!important; -webkit-backdrop-filter:blur(18px) saturate(125%)!important; } .msg-row.bot .msg-bubble:before{display:none!important} .msg-avatar{display:grid!important;place-items:center!important} .msg-bubble{ line-height:1.55!important; letter-spacing:0!important; padding:10px 12px!important; } .msg-stack{max-width:82%!important} .msg-time{font-size:7.5px!important;margin-top:4px!important;margin-bottom:9px!important} .chat-day{font-size:10px!important;margin:3px 0 12px!important;color:rgba(255,255,255,.56)!important} .typing-bubble{min-width:74px!important} .typing-label{font-size:11px!important} @media(max-width:760px){ .chat-panel{ width:calc(100vw - 18px)!important; height:440px!important; max-height:calc(100vh - 72px)!important; right:9px!important; bottom:70px!important; } .msg-stack{max-width:84%!important} .msg-bubble{font-size:13px!important;line-height:1.55!important} } /* Final requested polish: original logo with a simple curved white panel, no red highlight. */ .header .site-logo{ display:inline-flex!important;align-items:center!important;justify-content:center!important; background:#fff!important;border:1px solid rgba(18,20,22,.12)!important; border-radius:14px!important;padding:5px 10px!important; box-shadow:0 5px 18px rgba(18,20,22,.10)!important; } .header .site-logo:hover{border-color:rgba(18,20,22,.16)!important;box-shadow:0 7px 22px rgba(18,20,22,.13)!important;transform:none!important} .header .site-logo img{display:block!important} .footer-top nav a .footer-nav-arrow{display:inline-block!important;margin-left:6px!important;color:currentColor!important;font-weight:900!important;transition:transform .25s ease!important} .footer-top nav a:hover .footer-nav-arrow{transform:translateX(4px)!important;color:currentColor!important} /* Keep chatbot compact while allowing the conversation to breathe. */ .chat-panel .msg-stack{min-width:0} .chat-panel .msg-bubble{white-space:normal} .chat-panel .msg-avatar{display:grid!important} .chat-panel .typing-bubble{display:inline-flex!important;align-items:center!important;gap:7px!important} .chat-panel .typing-dots{display:inline-flex!important;gap:3px!important;align-items:center!important} .chat-panel .typing-dots i{width:4px!important;height:4px!important;border-radius:50%!important;background:currentColor!important;opacity:.45!important;animation:krishnaTyping 1.1s infinite ease-in-out!important} .chat-panel .typing-dots i:nth-child(2){animation-delay:.15s!important}.chat-panel .typing-dots i:nth-child(3){animation-delay:.3s!important} @keyframes krishnaTyping{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-3px);opacity:1}} /* FINAL SMALL RESPONSIVE POLISH — requested only */ .header .site-logo{ background:#fff!important; border:1px solid #d9dde1!important; border-radius:7px!important; padding:3px 7px!important; box-shadow:0 2px 8px rgba(18,20,22,.08)!important; } .header .site-logo:hover{ border-color:#cfd4d9!important; box-shadow:0 3px 10px rgba(18,20,22,.10)!important; } .header .site-logo img{filter:none!important} /* Footer Media Solutions: remove the extra arrow added previously. */ .footer-top nav a .footer-nav-arrow{display:none!important} /* Keep footer navigation clearly visible on the light footer. */ .footer-top nav a{color:#252a2f!important;opacity:1!important;text-shadow:none!important} .footer-top nav a:hover{color:var(--red)!important} /* Smaller, cleaner mobile navigation and footer. */ @media(max-width:760px){ .header{height:62px!important} .nav-wrap{height:62px!important} .site-logo img{width:124px!important;max-height:38px!important} .header .site-logo{padding:2px 6px!important;border-radius:6px!important} .nav{top:62px!important;left:12px!important;right:12px!important;padding:6px!important;border-radius:8px!important} .nav>a{padding:10px 10px!important;font-size:14px!important} .nav-cta{font-size:13px!important;padding:10px 12px!important} .nav-toggle span{width:21px!important;height:2px!important} .footer-top{padding-top:26px!important;padding-bottom:20px!important;gap:20px!important} .footer-top .site-logo img{width:135px!important;max-height:42px!important} .footer-top nav{gap:8px 14px!important} .footer-top nav a{font-size:10px!important;padding-bottom:3px!important} .footer-bottom .container{font-size:8px!important;gap:8px!important} } @media(max-width:420px){ .site-logo img{width:116px!important} .footer-top .site-logo img{width:125px!important} .footer-top nav a{font-size:8.5px!important} } /* ===== FINAL MOBILE NAV/LOGO COMPACT FIX ===== */ @media (max-width:760px){ .header .nav-wrap{align-items:center!important;} .header .site-logo{transform:translateY(4px)!important;} .header .site-logo img{width:132px!important;max-height:40px!important;} .header .nav{font-size:11px!important;} .header .nav>a{padding:10px 10px!important;font-size:11px!important;} .header .nav .nav-dropdown{display:block!important;width:100%!important;} .header .nav .nav-dropdown>a{min-height:42px!important;padding:10px!important;font-size:11px!important;justify-content:flex-start!important;border-bottom:1px solid #f0f0f0!important;} .header .nav .nav-menu{display:none!important;} .header .nav .nav-cta{font-size:11px!important;padding:10px 12px!important;} .footer-top{gap:12px 10px!important;padding:18px 0 15px!important;} .footer-top>.site-logo img{width:138px!important;max-height:42px!important;} .footer-top>nav{gap:4px 14px!important;} .footer-top>nav a{font-size:10px!important;line-height:1.35!important;padding:2px 0!important;} .footer-bottom{font-size:9px!important;} } /* No Media Solutions arrow in footer. */ .footer-nav-arrow{display:none!important;} /* No dropdown arrow button in navbar; Media Solutions is a normal link. */ .nav-arrow{display:none!important;} /* ===== FINAL WORK HEADING FIX ===== */ .work-copy{min-width:0!important;overflow:visible!important} .work-copy h2{ overflow:visible!important; max-width:100%!important; white-space:normal!important; word-break:normal!important; overflow-wrap:normal!important; line-height:1.02!important; padding-bottom:4px!important; margin-bottom:25px!important; } @media(max-width:1050px){ .work-copy h2{font-size:clamp(44px,7vw,57px)!important;line-height:1.02!important} } @media(max-width:760px){ .work-copy{width:100%!important;padding-right:0!important} .work-copy h2{ font-size:clamp(38px,9.8vw,47px)!important; line-height:1.04!important; letter-spacing:-.35px!important; max-width:100%!important; padding-bottom:7px!important; margin-top:12px!important; margin-bottom:20px!important; } } @media(max-width:360px){ .work-copy h2{font-size:38px!important;letter-spacing:-.45px!important} } /* ===== FINAL REQUEST: Work heading + dual Media Solutions dropdowns + compact desktop logo ===== */ @media (min-width: 1051px){ .header .site-logo img{width:132px!important;max-height:44px!important} } .work-copy h2{overflow:visible!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important} .work-copy h2 em{display:inline!important;white-space:normal!important} @media (max-width:760px){ .work-copy h2{font-size:clamp(38px,9.4vw,53px)!important;line-height:1.02!important;letter-spacing:-.015em!important;max-width:100%!important;padding-bottom:8px!important;margin-bottom:22px!important} .work-copy h2 em{display:inline!important;white-space:normal!important} } /* Footer Media Solutions dropdown */ .footer-dropdown{position:relative;display:inline-flex!important;align-items:center;gap:5px;white-space:nowrap} .footer-dropdown>a{display:inline-block!important} .footer-arrow{border:0;background:transparent;color:currentColor;font-size:10px;line-height:1;padding:4px 2px;cursor:pointer;transition:transform .2s ease,color .2s ease} .footer-dropdown.open .footer-arrow{transform:rotate(180deg);color:var(--red)} .footer-menu{position:absolute;left:50%;bottom:calc(100% + 7px);transform:translate(-50%,8px);min-width:160px;padding:6px;background:rgba(255,255,255,.99);border:1px solid #e5e5e5;box-shadow:0 14px 34px rgba(0,0,0,.14);opacity:0;visibility:hidden;pointer-events:none;z-index:80;transition:opacity .2s ease,transform .2s ease,visibility .2s ease} .footer-dropdown.open .footer-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)} .footer-menu a{display:block!important;padding:9px 11px!important;font-size:11px!important;font-weight:700!important;color:#444!important;border-bottom:1px solid #eee!important;white-space:nowrap!important} .footer-menu a:last-child{border-bottom:0!important} .footer-menu a:hover{color:var(--red)!important;background:#fafafa!important} @media(max-width:760px){ .footer-dropdown{width:auto!important} .footer-arrow{font-size:9px!important;padding:3px 1px!important} .footer-menu{position:fixed;left:50%;bottom:62px;transform:translate(-50%,8px);min-width:150px} .footer-dropdown.open .footer-menu{transform:translate(-50%,0)} } /* Make the chatbot answer website-wide questions with page-aware, specific guidance. */ @media(max-width:760px){ .work-copy h2{font-size:clamp(34px,8.2vw,49px)!important;line-height:1.04!important;white-space:normal!important} .work-copy h2 em{white-space:nowrap!important;display:inline-block!important} } /* ===== FINAL FIX: WORK HEADING + MEDIA DROPDOWNS + MOBILE ALIGNMENT ===== */ /* Work heading must always sit above the media gallery/video. */ .work-grid{position:relative!important;isolation:isolate!important;} .work-copy{position:relative!important;z-index:12!important;} .work-copy h2{position:relative!important;z-index:13!important;display:block!important;overflow:visible!important;} .work-copy h2 em{display:block!important;white-space:normal!important;overflow:visible!important;} .work-gallery{position:relative!important;z-index:2!important;} .work-video-card,.work-bottom-wrap{position:relative!important;z-index:2!important;} /* Keep the campaign cards a little smaller so the complete heading remains visible. */ @media(min-width:761px){ .work-video-card{height:225px!important;} .work-bottom-track .work-card{min-height:175px!important;} .work-bottom-track .work-card img{height:175px!important;min-height:175px!important;} } /* Restore Media Solutions arrow in the main navigation. */ .header .nav .nav-dropdown>.nav-arrow{ display:inline-flex!important; align-items:center!important; justify-content:center!important; visibility:visible!important; opacity:1!important; width:24px!important; height:34px!important; padding:4px 5px!important; margin:0!important; border:0!important; background:transparent!important; color:#30343a!important; font-size:13px!important; line-height:1!important; cursor:pointer!important; } .header .nav .nav-dropdown>.nav-arrow:hover, .header .nav .nav-dropdown.open>.nav-arrow{color:var(--red)!important;transform:translateY(1px)!important;} /* Footer arrow restored and dropdown made easier to open/read. */ .footer-dropdown>.footer-arrow{ display:inline-flex!important; align-items:center!important; justify-content:center!important; visibility:visible!important; opacity:1!important; width:22px!important; height:24px!important; padding:2px!important; margin:0!important; border:0!important; background:transparent!important; color:#252a2f!important; font-size:11px!important; line-height:1!important; cursor:pointer!important; } .footer-dropdown.open>.footer-arrow{color:var(--red)!important;transform:rotate(180deg)!important;} .footer-menu{z-index:300!important;} .footer-menu a{min-width:150px!important;} @media(max-width:760px){ /* Mobile work heading: never clip POSSIBILITIES. */ .work-grid{display:grid!important;grid-template-columns:1fr!important;gap:24px!important;} .work-copy{order:1!important;z-index:20!important;} .work-copy h2{ font-size:clamp(34px,8vw,43px)!important; line-height:1.06!important; letter-spacing:-.01em!important; margin-bottom:18px!important; padding-right:0!important; } .work-copy h2 em{ display:block!important; white-space:normal!important; font-size:1em!important; line-height:1.06!important; } .work-gallery{order:2!important;z-index:2!important;margin-top:2px!important;} .work-video-card{height:185px!important;} .work-bottom-track .work-card{min-height:165px!important;} .work-bottom-track .work-card img{height:165px!important;min-height:165px!important;} /* Mobile main-nav: text and arrow align exactly like the other menu rows. */ .header .nav .nav-dropdown{ display:grid!important; grid-template-columns:minmax(0,1fr) 42px!important; width:100%!important; height:auto!important; align-items:stretch!important; gap:0!important; } .header .nav .nav-dropdown>a{ min-height:44px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; text-align:left!important; padding:10px 12px!important; margin:0!important; border-bottom:1px solid #f0f0f0!important; font-size:11px!important; } .header .nav .nav-dropdown>.nav-arrow{ min-height:44px!important; width:42px!important; height:44px!important; display:flex!important; border-bottom:1px solid #f0f0f0!important; color:#444!important; font-size:11px!important; } .header .nav .nav-dropdown>.nav-menu{ grid-column:1/3!important; position:static!important; width:100%!important; min-width:0!important; padding:4px 8px 7px!important; margin:0!important; border:0!important; box-shadow:none!important; background:#fafafa!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; display:none!important; } .header .nav .nav-dropdown.open>.nav-menu{display:block!important;} .header .nav .nav-dropdown>.nav-menu a{ display:flex!important; align-items:center!important; justify-content:flex-start!important; min-height:38px!important; padding:9px 12px!important; text-align:left!important; font-size:9.5px!important; border-bottom:1px solid #ededed!important; } /* Footer dropdown opens upward without being clipped by the footer. */ .footer-dropdown{position:relative!important;display:inline-flex!important;align-items:center!important;} .footer-dropdown>.footer-arrow{width:20px!important;height:22px!important;font-size:10px!important;} .footer-menu{ position:absolute!important; left:50%!important; bottom:calc(100% + 8px)!important; transform:translate(-50%,8px)!important; min-width:155px!important; max-width:calc(100vw - 30px)!important; padding:5px!important; border-radius:7px!important; overflow:hidden!important; } .footer-dropdown.open>.footer-menu{transform:translate(-50%,0)!important;} .footer-menu a{min-width:0!important;font-size:10px!important;padding:9px 10px!important;} } /* FINAL MEDIA SOLUTIONS NAV REFINEMENT Footer stays a simple link; only the main navigation owns the dropdown. */ .nav-dropdown .nav-menu{ top:calc(100% + 10px)!important; transform:translate(-50%,-6px)!important; border-radius:8px!important; padding:7px!important; min-width:185px!important; } .nav-dropdown.open .nav-menu{ transform:translate(-50%,0)!important; } .nav-dropdown .nav-menu::before{ content:""; position:absolute; top:-7px; left:50%; width:12px; height:12px; background:#fff; border-left:1px solid #e8e8e8; border-top:1px solid #e8e8e8; transform:translateX(-50%) rotate(45deg); } @media(max-width:760px){ .header .nav .nav-dropdown{ grid-template-columns:minmax(0,1fr) 42px!important; } .header .nav .nav-dropdown>a{ justify-content:center!important; text-align:center!important; padding-left:42px!important; padding-right:10px!important; } .header .nav .nav-dropdown>.nav-arrow{ width:42px!important; justify-content:center!important; } .header .nav .nav-dropdown>.nav-menu a{ justify-content:center!important; text-align:center!important; } .nav-dropdown .nav-menu{ top:auto!important; transform:none!important; border-radius:0!important; } .nav-dropdown .nav-menu::before{display:none!important;} } /* ===== LATEST FINAL POLISH ===== */ /* Keep Media Solutions arrow directly with the label; dropdown is owned by the nav only. */ @media (min-width:761px){ .header .nav .nav-dropdown{display:inline-flex!important;align-items:center!important;gap:2px!important;position:relative!important;} .header .nav .nav-dropdown>.nav-arrow{width:20px!important;height:28px!important;padding:2px 3px!important;margin:0!important;font-size:11px!important;} .header .nav .nav-dropdown>.nav-menu{top:calc(100% + 12px)!important;} } /* Mobile logo: centered in the header, slightly smaller and kept at the existing vertical position. */ @media (max-width:760px){ .header .nav-wrap{position:relative!important;justify-content:center!important;} .header .site-logo{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important;} .header .site-logo img{width:116px!important;max-height:36px!important;} .header .nav-toggle{position:absolute!important;right:0!important;} .header .nav{top:62px!important;} .header .nav .nav-dropdown{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;align-items:stretch!important;} .header .nav .nav-dropdown>a{justify-content:center!important;text-align:center!important;padding:10px 8px!important;} .header .nav .nav-dropdown>.nav-arrow{display:flex!important;width:42px!important;height:44px!important;align-items:center!important;justify-content:center!important;} } /* Work heading: exactly three visual lines, with POSSIBILITIES fully below MANY. */ .work-copy h2 em{display:block!important;white-space:normal!important;line-height:1.02!important;} @media (min-width:761px){ .work-copy h2{line-height:1.02!important;} .work-copy h2 em br{display:block!important;} } @media (max-width:760px){ .work-copy h2{font-size:clamp(33px,7.8vw,42px)!important;line-height:1.04!important;max-width:100%!important;margin-bottom:18px!important;} .work-copy h2 em{display:block!important;line-height:1.04!important;} .work-gallery{margin-top:0!important;} .work-video-card{height:175px!important;} .work-bottom-track .work-card,.work-bottom-track .work-card img{min-height:155px!important;height:155px!important;} } /* ===== FINAL USER-REQUESTED POLISH ===== */ /* Desktop: keep Media Solutions arrow immediately beside its label, never near Location. */ @media (min-width:761px){ .header .nav{gap:28px!important;} .header .nav .nav-dropdown{ display:inline-flex!important; align-items:center!important; justify-content:flex-start!important; position:relative!important; gap:3px!important; width:auto!important; min-width:0!important; max-width:none!important; height:100%!important; } .header .nav .nav-dropdown>a{ width:auto!important; display:inline-flex!important; align-items:center!important; justify-content:flex-start!important; padding-left:0!important; padding-right:0!important; } .header .nav .nav-dropdown>.nav-arrow{ position:static!important; flex:0 0 14px!important; width:14px!important; min-width:14px!important; height:22px!important; padding:0!important; margin:0 0 0 1px!important; border:0!important; border-radius:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; color:#30343a!important; font-size:11px!important; line-height:22px!important; transform:none!important; } .header .nav .nav-dropdown>.nav-arrow:hover, .header .nav .nav-dropdown.open>.nav-arrow{ color:var(--red)!important; transform:none!important; } /* Give the work copy enough room and make the video/cards narrower. */ .work-grid{ grid-template-columns:34% 66%!important; gap:0!important; } .work-gallery{ width:91%!important; justify-self:end!important; } .work-video-card{height:205px!important;} .work-bottom-track .work-card, .work-bottom-track .work-card img{ min-height:160px!important; height:160px!important; } .work-copy h2{ font-size:57px!important; line-height:1.0!important; max-width:100%!important; } .work-copy h2 em{display:block!important;} } /* Mobile: logo stays on the left, menu button on the right. */ @media (max-width:760px){ .header .nav-wrap{ position:relative!important; justify-content:space-between!important; align-items:center!important; } .header .site-logo{ position:static!important; left:auto!important; top:auto!important; transform:none!important; margin:0!important; padding:0!important; display:flex!important; align-items:center!important; } .header .site-logo img{ width:108px!important; max-height:34px!important; } .header .nav-toggle{ position:static!important; margin-left:auto!important; flex:0 0 auto!important; } /* Same compact dropdown button treatment as the mobile menu rows. */ .header .nav .nav-dropdown{ display:grid!important; grid-template-columns:minmax(0,1fr) 38px!important; width:100%!important; align-items:stretch!important; gap:0!important; } .header .nav .nav-dropdown>a{ justify-content:center!important; text-align:center!important; padding:10px 8px!important; } .header .nav .nav-dropdown>.nav-arrow{ display:flex!important; position:static!important; width:38px!important; min-width:38px!important; height:44px!important; align-items:center!important; justify-content:center!important; padding:0!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:#444!important; font-size:11px!important; } /* Work heading gets its own full-width block; gallery is smaller so it cannot cover text. */ .work-copy h2{ font-size:clamp(32px,7.2vw,40px)!important; line-height:1.04!important; max-width:100%!important; margin-bottom:18px!important; } .work-copy h2 em{ display:block!important; white-space:normal!important; line-height:1.04!important; } .work-gallery{ width:92%!important; justify-self:center!important; margin-left:auto!important; margin-right:auto!important; } .work-video-card{height:160px!important;} .work-bottom-track .work-card, .work-bottom-track .work-card img{ min-height:145px!important; height:145px!important; } } @media (max-width:380px){ .header .site-logo img{width:102px!important;max-height:32px!important;} .work-copy h2{font-size:33px!important;} .work-gallery{width:90%!important;} .work-video-card{height:150px!important;} } /* MOBILE CHAT KEYBOARD FIX — chatbot only; no other site styles changed */ @media (max-width:760px){ .chat-panel.chat-keyboard-open{ bottom:calc(var(--kr-chat-keyboard, 0px) + 8px)!important; max-height:calc(var(--kr-chat-viewport, 100vh) - 16px)!important; height:min(440px,calc(var(--kr-chat-viewport, 100vh) - 16px))!important; } .chat-panel.chat-keyboard-open .chat-body{ min-height:0!important; overflow:hidden!important; display:flex!important; flex-direction:column!important; } .chat-panel.chat-keyboard-open .chat-messages{ flex:1 1 auto!important; min-height:0!important; max-height:none!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } .chat-panel.chat-keyboard-open .chat-composer{ flex:0 0 auto!important; } } /* NAVBAR SCROLL BEHAVIOR — hide on downward scroll, reveal on upward scroll */ .header.nav-scroll-hidden{transform:translateY(-100%);} .header.nav-scroll-hidden{transition:transform .32s ease,box-shadow .3s ease;} /* ===== FINAL MOBILE DRAWER — RIGHT SLIDE / GLASS / COMPACT ===== */ @media (max-width:760px){ html.mobile-nav-lock, body.mobile-nav-lock{overflow:hidden!important;} .header{ z-index:1200!important; overflow:visible!important; } .header .nav-wrap{ position:relative!important; z-index:1201!important; } .nav-toggle{ position:relative!important; z-index:1302!important; width:44px!important; height:44px!important; display:grid!important; place-items:center!important; border-radius:50%!important; background:rgba(255,255,255,.82)!important; border:1px solid rgba(255,255,255,.7)!important; box-shadow:0 8px 24px rgba(0,0,0,.12)!important; backdrop-filter:blur(14px)!important; -webkit-backdrop-filter:blur(14px)!important; } .nav-toggle span{ display:block!important; width:21px!important; height:2px!important; margin:2px 0!important; border-radius:99px!important; transition:transform .3s cubic-bezier(.2,.8,0,1),opacity .2s ease!important; } .nav-toggle.menu-open span:nth-child(1){transform:translateY(6px) rotate(45deg)!important;} .nav-toggle.menu-open span:nth-child(2){opacity:0!important;transform:scaleX(.4)!important;} .nav-toggle.menu-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important;} /* The panel is always rendered so transform can animate smoothly. */ .header .nav{ position:fixed!important; top:74px!important; right:12px!important; left:auto!important; width:min(84vw,330px)!important; max-width:330px!important; max-height:calc(100dvh - 88px)!important; overflow-x:hidden!important; overflow-y:auto!important; display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:0!important; padding:10px!important; margin:0!important; box-sizing:border-box!important; border:1px solid rgba(255,255,255,.58)!important; border-radius:20px!important; background:rgba(255,255,255,.78)!important; backdrop-filter:blur(22px) saturate(125%)!important; -webkit-backdrop-filter:blur(22px) saturate(125%)!important; box-shadow:0 22px 55px rgba(0,0,0,.20),0 4px 18px rgba(0,0,0,.10)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:translate3d(calc(100% + 28px),0,0) scale(.97)!important; transform-origin:top right!important; transition: transform .42s cubic-bezier(.16,.7,0,1), opacity .25s ease, visibility 0s linear .42s!important; z-index:1301!important; } .header .nav.open{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:translate3d(0,0,0) scale(1)!important; transition: transform .42s cubic-bezier(.16,.7,0,1), opacity .25s ease, visibility 0s linear 0s!important; } /* Small top label makes the compact drawer feel intentional, not empty. */ .header .nav::before{ content:'MENU'!important; display:block!important; padding:5px 10px 8px!important; margin:0 2px 3px!important; color:rgba(45,49,54,.46)!important; font-size:9px!important; font-weight:800!important; letter-spacing:.18em!important; border-bottom:1px solid rgba(35,39,43,.09)!important; } .header .nav>a, .header .nav>a:not(.nav-cta){ display:flex!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; min-height:46px!important; box-sizing:border-box!important; padding:11px 12px!important; margin:0!important; border:0!important; border-bottom:1px solid rgba(35,39,43,.075)!important; border-radius:11px!important; color:#25292d!important; background:transparent!important; font-size:13px!important; font-weight:600!important; opacity:1!important; transform:none!important; transition:background .22s ease,color .22s ease,transform .22s ease!important; } .header .nav>a:not(.nav-cta)::after{ display:none!important; } .header .nav>a:not(.nav-cta)::before{ content:'›'!important; position:static!important; width:auto!important; height:auto!important; margin-right:9px!important; color:var(--red)!important; opacity:.75!important; transform:none!important; background:none!important; box-shadow:none!important; } .header .nav>a:not(.nav-cta):hover, .header .nav>a:not(.nav-cta):focus-visible, .header .nav>a.active:not(.nav-cta){ color:var(--red)!important; background:rgba(229,27,35,.07)!important; transform:translateX(3px)!important; } .header .nav .nav-dropdown{ display:grid!important; grid-template-columns:minmax(0,1fr) 36px!important; width:100%!important; height:auto!important; align-items:stretch!important; gap:0!important; margin:0!important; border-bottom:1px solid rgba(35,39,43,.075)!important; } .header .nav .nav-dropdown>a{ min-height:46px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; padding:11px 12px!important; border:0!important; border-radius:11px 0 0 11px!important; font-size:13px!important; color:#25292d!important; background:transparent!important; } .header .nav .nav-dropdown>a::before{ content:'›'!important; position:static!important; width:auto!important; height:auto!important; margin-right:9px!important; color:var(--red)!important; opacity:.75!important; background:none!important; box-shadow:none!important; } .header .nav .nav-dropdown>.nav-arrow{ min-height:46px!important; width:36px!important; height:46px!important; display:flex!important; align-items:center!important; justify-content:center!important; border:0!important; color:#3b4045!important; background:transparent!important; font-size:13px!important; padding:0!important; transition:transform .25s ease,color .2s ease,background .2s ease!important; } .header .nav .nav-dropdown.open>.nav-arrow{ color:var(--red)!important; transform:rotate(180deg)!important; } .header .nav .nav-dropdown>.nav-menu{ grid-column:1/3!important; position:static!important; width:100%!important; min-width:0!important; padding:4px!important; margin:0!important; border:0!important; border-radius:10px!important; box-shadow:none!important; background:rgba(35,39,43,.035)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; display:none!important; } .header .nav .nav-dropdown.open>.nav-menu{ display:block!important; } .header .nav .nav-dropdown>.nav-menu a{ display:flex!important; align-items:center!important; justify-content:flex-start!important; min-height:36px!important; padding:8px 11px!important; text-align:left!important; font-size:9.5px!important; font-weight:600!important; color:#444!important; border:0!important; border-radius:8px!important; background:transparent!important; transition:background .2s ease,color .2s ease,transform .2s ease!important; } .header .nav .nav-dropdown>.nav-menu a:hover{ color:var(--red)!important; background:rgba(229,27,35,.06)!important; transform:translateX(3px)!important; } .header .nav .nav-cta{ justify-content:center!important; width:calc(100% - 4px)!important; min-height:42px!important; margin:9px 2px 2px!important; padding:10px 12px!important; border-radius:11px!important; background:var(--red)!important; color:#fff!important; box-shadow:0 9px 22px rgba(229,27,35,.20)!important; } /* Staggered entrance */ .header .nav.open > *{ animation:mobileNavItemIn .38s cubic-bezier(.16,.7,0,1) both; } .header .nav.open > *:nth-child(2){animation-delay:.025s!important} .header .nav.open > *:nth-child(3){animation-delay:.05s!important} .header .nav.open > *:nth-child(4){animation-delay:.075s!important} .header .nav.open > *:nth-child(5){animation-delay:.10s!important} .header .nav.open > *:nth-child(6){animation-delay:.125s!important} .header .nav.open > *:nth-child(7){animation-delay:.15s!important} .header .nav.open > *:nth-child(8){animation-delay:.175s!important} @keyframes mobileNavItemIn{ from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} } .mobile-nav-backdrop{ position:fixed!important; inset:0!important; z-index:1299!important; background:rgba(10,12,15,.16)!important; backdrop-filter:blur(2px)!important; -webkit-backdrop-filter:blur(2px)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transition:opacity .28s ease,visibility 0s linear .28s!important; } .mobile-nav-backdrop.open{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; transition:opacity .28s ease,visibility 0s linear 0s!important; } } @media(max-width:420px){ .header .nav{ top:70px!important; right:9px!important; width:min(86vw,315px)!important; max-height:calc(100dvh - 82px)!important; } .nav-toggle{width:42px!important;height:42px!important;} } /* ===== MOBILE MENU VISIBILITY + CLICK FIX ===== Keep the page completely sharp while the mobile menu is open. No backdrop blur and no glass blur behind the drawer. */ @media (max-width:760px){ .header .nav{ background:rgba(255,255,255,.97)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; filter:none!important; -webkit-filter:none!important; isolation:isolate!important; opacity:0!important; } .header .nav.open{opacity:1!important;} .header .nav *{ filter:none!important; -webkit-filter:none!important; } .nav-toggle{ background:rgba(255,255,255,.96)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; filter:none!important; -webkit-filter:none!important; } .mobile-nav-backdrop{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; filter:none!important; -webkit-filter:none!important; } .header .nav a, .header .nav button, .header .nav .nav-dropdown, .header .nav .nav-menu, .header .nav .nav-menu a{ pointer-events:auto!important; } .header .nav .nav-menu a{ position:relative!important; z-index:2!important; cursor:pointer!important; } } /* ===== MOBILE MENU CLICK BEHAVIOR — FINAL ===== */ @media (max-width:760px){ /* Keep the entire mobile header above the outside-click layer. This prevents the transparent backdrop from covering the hamburger/menu. */ .header{z-index:1400!important;overflow:visible!important;} .header .nav-wrap{position:relative!important;z-index:1401!important;} .nav-toggle{z-index:1403!important;position:relative!important;pointer-events:auto!important;visibility:visible!important;} .mobile-nav-backdrop{z-index:1000!important;pointer-events:none!important;} .mobile-nav-backdrop.open{pointer-events:auto!important;} .header .nav{z-index:1402!important;pointer-events:none!important;} .header .nav.open{z-index:1402!important;pointer-events:auto!important;} .header .nav, .header .nav *{touch-action:manipulation!important;} .header .nav a, .header .nav button{cursor:pointer!important;pointer-events:auto!important;position:relative!important;z-index:1404!important;} .header .nav .nav-dropdown{position:relative!important;z-index:1404!important;} .header .nav .nav-menu{position:relative!important;z-index:1405!important;} } /* ========================================================= MOBILE NAV FINAL POLISH — transparent rounded drawer Base layout/content untouched. ========================================================= */ @media (max-width:760px){ /* Keep the mobile header compact and aligned like the reference. */ .header{ z-index:1600!important; overflow:visible!important; transform-origin:top center!important; } .header .nav-wrap{ width:100%!important; min-height:58px!important; padding:8px 12px!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; box-sizing:border-box!important; } /* Rounded transparent logo capsule. */ .header .site-logo{ width:auto!important; max-width:calc(100% - 62px)!important; height:42px!important; padding:4px 11px!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; border-radius:999px!important; background:rgba(255,255,255,.76)!important; border:1px solid rgba(255,255,255,.62)!important; box-shadow:0 7px 22px rgba(0,0,0,.14)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; overflow:hidden!important; flex:0 1 auto!important; } .header .site-logo img{ display:block!important; width:94px!important; max-width:100%!important; height:auto!important; max-height:31px!important; object-fit:contain!important; } /* Circular menu control: always visible and above drawer. */ .header .nav-toggle{ position:relative!important; z-index:1705!important; width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; margin:0!important; padding:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:4px!important; border-radius:50%!important; background:rgba(255,255,255,.82)!important; border:1px solid rgba(255,255,255,.72)!important; box-shadow:0 7px 22px rgba(0,0,0,.16)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; visibility:visible!important; opacity:1!important; pointer-events:auto!important; flex:0 0 42px!important; } .header .nav-toggle span{ width:17px!important; height:2px!important; margin:0!important; display:block!important; border-radius:99px!important; background:#30343a!important; transform-origin:center!important; } .header .nav-toggle.menu-open span:nth-child(1){transform:translateY(6px) rotate(45deg)!important;} .header .nav-toggle.menu-open span:nth-child(2){opacity:0!important;transform:scaleX(.25)!important;} .header .nav-toggle.menu-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important;} /* Transparent rounded drawer, no page blur. */ .header .nav{ position:fixed!important; top:68px!important; right:11px!important; left:auto!important; width:min(84vw,310px)!important; max-width:310px!important; max-height:calc(100dvh - 82px)!important; overflow-x:hidden!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:3px!important; padding:10px!important; margin:0!important; border-radius:24px!important; border:1px solid rgba(255,255,255,.62)!important; background:rgba(255,255,255,.68)!important; backdrop-filter:blur(16px) saturate(120%)!important; -webkit-backdrop-filter:blur(16px) saturate(120%)!important; box-shadow:0 20px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:translate3d(calc(100% + 24px),0,0)!important; transition:transform .38s cubic-bezier(.2,.78,.2,1),opacity .22s ease,visibility 0s linear .38s!important; z-index:1700!important; } .header .nav.open{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:translate3d(0,0,0)!important; transition:transform .38s cubic-bezier(.2,.78,.2,1),opacity .22s ease,visibility 0s linear 0s!important; } /* Small label; avoids empty-looking space without clutter. */ .header .nav::before{ content:'MENU'!important; display:block!important; height:auto!important; padding:2px 9px 7px!important; margin:0 2px 2px!important; color:rgba(35,39,43,.48)!important; font-size:8px!important; line-height:1!important; font-weight:800!important; letter-spacing:.18em!important; border-bottom:1px solid rgba(35,39,43,.10)!important; } /* Every main link gets exactly the same geometry. */ .header .nav>a, .header .nav>a:not(.nav-cta){ position:relative!important; z-index:1702!important; width:100%!important; min-height:43px!important; height:43px!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; flex:0 0 43px!important; margin:0!important; padding:0 12px!important; border:0!important; border-radius:12px!important; color:#24282d!important; background:rgba(255,255,255,.20)!important; font-size:13px!important; line-height:1!important; font-weight:650!important; letter-spacing:.1px!important; white-space:nowrap!important; transform:none!important; transition:background .18s ease,color .18s ease!important; pointer-events:auto!important; touch-action:manipulation!important; } .header .nav>a:not(.nav-cta)::before{ content:'•'!important; position:static!important; display:inline-block!important; width:12px!important; min-width:12px!important; height:auto!important; margin:0 7px 0 0!important; color:#e51b23!important; opacity:.85!important; background:none!important; box-shadow:none!important; transform:none!important; } .header .nav>a:not(.nav-cta)::after{display:none!important;} .header .nav>a:not(.nav-cta):hover, .header .nav>a:not(.nav-cta):focus-visible, .header .nav>a.active:not(.nav-cta){ background:rgba(229,27,35,.09)!important; color:#d71920!important; transform:none!important; } /* Media Solutions row: text and arrow are separate, stable click targets. */ .header .nav .nav-dropdown{ position:relative!important; z-index:1703!important; width:100%!important; min-height:43px!important; display:grid!important; grid-template-columns:minmax(0,1fr) 40px!important; align-items:stretch!important; gap:0!important; margin:0!important; padding:0!important; border:0!important; border-radius:12px!important; background:rgba(255,255,255,.20)!important; overflow:visible!important; } .header .nav .nav-dropdown>a{ position:relative!important; z-index:1704!important; min-width:0!important; min-height:43px!important; height:43px!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; box-sizing:border-box!important; margin:0!important; padding:0 12px!important; border:0!important; border-radius:12px 0 0 12px!important; color:#24282d!important; background:transparent!important; font-size:13px!important; line-height:1!important; font-weight:650!important; white-space:nowrap!important; pointer-events:auto!important; touch-action:manipulation!important; } .header .nav .nav-dropdown>a::before{ content:'•'!important; position:static!important; display:inline-block!important; width:12px!important; min-width:12px!important; margin:0 7px 0 0!important; color:#e51b23!important; opacity:.85!important; background:none!important; box-shadow:none!important; transform:none!important; } .header .nav .nav-dropdown>.nav-arrow{ position:relative!important; z-index:1705!important; width:40px!important; min-width:40px!important; height:43px!important; min-height:43px!important; display:flex!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:0!important; border:0!important; border-left:1px solid rgba(35,39,43,.08)!important; border-radius:0 12px 12px 0!important; background:transparent!important; color:#3b3f44!important; font-size:15px!important; line-height:1!important; transform:none!important; pointer-events:auto!important; touch-action:manipulation!important; } .header .nav .nav-dropdown>.nav-arrow:hover, .header .nav .nav-dropdown>.nav-arrow:focus-visible{ background:rgba(229,27,35,.08)!important; color:#d71920!important; } /* Submenu remains inside the drawer and never shifts the parent row sideways. */ .header .nav .nav-dropdown>.nav-menu{ position:relative!important; grid-column:1 / -1!important; top:auto!important; left:auto!important; width:100%!important; min-width:0!important; max-width:none!important; box-sizing:border-box!important; display:none!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; padding:4px 5px 5px!important; margin:0!important; border:0!important; border-radius:10px!important; background:rgba(255,255,255,.30)!important; box-shadow:none!important; z-index:1706!important; } .header .nav .nav-dropdown.open>.nav-menu{display:block!important;} .header .nav .nav-dropdown>.nav-menu a{ position:relative!important; z-index:1707!important; width:100%!important; min-height:36px!important; height:36px!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; margin:2px 0!important; padding:0 11px!important; border:0!important; border-radius:9px!important; color:#35393e!important; background:rgba(255,255,255,.22)!important; font-size:11px!important; line-height:1!important; font-weight:600!important; white-space:nowrap!important; pointer-events:auto!important; touch-action:manipulation!important; } .header .nav .nav-dropdown>.nav-menu a::before{ content:'→'!important; position:static!important; margin-right:8px!important; color:#e51b23!important; background:none!important; box-shadow:none!important; } .header .nav .nav-dropdown>.nav-menu a:hover, .header .nav .nav-dropdown>.nav-menu a:focus-visible{ color:#d71920!important; background:rgba(229,27,35,.08)!important; transform:none!important; } /* CTA is stable and aligned with every other row. */ .header .nav>a.nav-cta{ min-height:42px!important; height:42px!important; flex:0 0 42px!important; margin:4px 0 0!important; padding:0 14px!important; justify-content:center!important; border:1px solid rgba(229,27,35,.18)!important; border-radius:12px!important; background:#e51b23!important; color:#fff!important; font-size:11px!important; font-weight:750!important; box-shadow:0 8px 18px rgba(229,27,35,.18)!important; } .header .nav>a.nav-cta::before{display:none!important;} .header .nav>a.nav-cta span{margin-left:5px!important;} /* Outside-click layer is invisible and never sits over the controls. JS closes the menu when the document is clicked outside #nav/#navToggle. */ .mobile-nav-backdrop, .mobile-nav-backdrop.open{ position:fixed!important; inset:0!important; z-index:100!important; background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; } /* Do not blur the page when the menu opens. */ html.mobile-nav-lock body, body.mobile-nav-lock{overflow:hidden!important;} } @media (max-width:380px){ .header .nav-wrap{padding-left:9px!important;padding-right:9px!important;} .header .site-logo{height:40px!important;padding-left:9px!important;padding-right:9px!important;} .header .site-logo img{width:88px!important;max-height:29px!important;} .header .nav-toggle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;flex-basis:40px!important;} .header .nav{top:64px!important;right:8px!important;width:min(86vw,300px)!important;max-height:calc(100dvh - 76px)!important;border-radius:22px!important;} } /* ===== MOBILE NAV FINAL ALIGNMENT / REFERENCE STYLE ===== */ @media (max-width:760px){ .header{ height:68px!important; background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; transform:none; overflow:visible!important; } .header.nav-scroll-hidden{transform:translateY(-100%)!important;} .header .nav-wrap{ width:calc(100% - 20px)!important; height:54px!important; margin:7px 10px 0!important; padding:5px 7px!important; border-radius:28px!important; background:rgba(255,255,255,.16)!important; border:1px solid rgba(255,255,255,.38)!important; box-shadow:0 8px 25px rgba(0,0,0,.10)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .header .site-logo{ display:flex!important; align-items:center!important; height:42px!important; padding:2px 11px!important; border-radius:22px!important; background:rgba(255,255,255,.90)!important; border:1px solid rgba(255,255,255,.8)!important; box-shadow:0 5px 16px rgba(0,0,0,.12)!important; z-index:1303!important; } .header .site-logo img{ width:128px!important; max-height:38px!important; object-fit:contain!important; } .header .nav-toggle{ width:42px!important; height:42px!important; min-width:42px!important; padding:0!important; margin-left:auto!important; display:grid!important; place-items:center!important; border-radius:50%!important; background:rgba(255,255,255,.90)!important; border:1px solid rgba(255,255,255,.82)!important; box-shadow:0 5px 16px rgba(0,0,0,.13)!important; z-index:1304!important; } .header .nav-toggle span{ width:19px!important;height:2px!important;margin:2px 0!important; background:#25292d!important;border-radius:99px!important; } .header .nav-toggle.menu-open{background:rgba(255,255,255,.96)!important;} .header .nav{ top:72px!important; right:10px!important; left:10px!important; width:auto!important; max-width:none!important; max-height:calc(100dvh - 84px)!important; padding:8px!important; border-radius:20px!important; background:rgba(255,255,255,.72)!important; border:1px solid rgba(255,255,255,.72)!important; box-shadow:0 22px 50px rgba(0,0,0,.20)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; transform:translate3d(105%,0,0)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transition:transform .38s cubic-bezier(.16,.7,0,1),opacity .22s ease,visibility 0s linear .38s!important; z-index:1301!important; } .header .nav.open{ transform:translate3d(0,0,0)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transition:transform .38s cubic-bezier(.16,.7,0,1),opacity .22s ease,visibility 0s linear 0s!important; } .header .nav::before{ content:'MENU'!important; display:block!important; text-align:left!important; padding:4px 11px 7px!important; margin:0!important; font-size:8px!important; letter-spacing:.18em!important; color:rgba(35,39,43,.48)!important; border-bottom:1px solid rgba(35,39,43,.08)!important; } .header .nav>a, .header .nav>a:not(.nav-cta){ width:100%!important; min-height:48px!important; padding:11px 16px!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; border:0!important; border-bottom:1px solid rgba(35,39,43,.065)!important; border-radius:10px!important; color:#24282d!important; background:transparent!important; font-size:13px!important; font-weight:600!important; transform:none!important; } .header .nav>a:not(.nav-cta)::before, .header .nav>a:not(.nav-cta)::after{display:none!important;content:none!important;} .header .nav>a:hover, .header .nav>a:focus-visible, .header .nav>a.active:not(.nav-cta){ color:#e51b23!important; background:rgba(255,255,255,.35)!important; transform:none!important; } .header .nav .nav-dropdown{ width:100%!important; min-height:48px!important; display:grid!important; grid-template-columns:minmax(0,1fr) 34px!important; align-items:stretch!important; margin:0!important; padding:0!important; border-bottom:1px solid rgba(35,39,43,.065)!important; border-radius:10px!important; overflow:visible!important; } .header .nav .nav-dropdown>a{ width:100%!important; min-height:48px!important; padding:11px 4px 11px 16px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; border:0!important; border-radius:10px 0 0 10px!important; color:#24282d!important; background:transparent!important; font-size:13px!important; font-weight:600!important; transform:none!important; } .header .nav .nav-dropdown>a::before, .header .nav .nav-dropdown>a::after{display:none!important;content:none!important;} .header .nav .nav-dropdown>.nav-arrow{ position:relative!important; width:34px!important; min-height:48px!important; height:48px!important; display:flex!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; color:#30343a!important; font-size:10px!important; z-index:5!important; } .header .nav .nav-dropdown>.nav-arrow:hover, .header .nav .nav-dropdown.open>.nav-arrow{color:#e51b23!important;transform:rotate(180deg)!important;} .header .nav .nav-dropdown>.nav-menu{ grid-column:1/3!important; position:static!important; width:100%!important; min-width:0!important; margin:0!important; padding:4px!important; display:none!important; background:rgba(255,255,255,.28)!important; border:0!important; border-radius:10px!important; box-shadow:none!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; } .header .nav .nav-dropdown.open>.nav-menu{display:block!important;} .header .nav .nav-dropdown>.nav-menu a{ min-height:38px!important; width:100%!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:8px!important; margin:0!important; border:0!important; border-bottom:1px solid rgba(35,39,43,.055)!important; border-radius:8px!important; text-align:center!important; color:#444!important; background:transparent!important; font-size:9.5px!important; transform:none!important; } .header .nav .nav-dropdown>.nav-menu a:last-child{border-bottom:0!important;} .header .nav .nav-cta{ width:calc(100% - 4px)!important; min-height:42px!important; margin:9px 2px 2px!important; padding:10px 14px!important; display:flex!important; align-items:center!important; justify-content:center!important; border:0!important; border-radius:11px!important; background:#e51b23!important; color:#fff!important; font-size:11px!important; box-shadow:0 8px 20px rgba(229,27,35,.20)!important; } .header .nav.open > *{animation:mobileNavItemIn .32s cubic-bezier(.16,.7,0,1) both!important;} } /* ===== FINAL MOBILE MENU STATE FIX ===== Keep the exact same visual design on every click/focus/active state. Clicking Location/Home/About/etc. must not tint, blur, shift, or reshape the row. Media dropdown can still open, but its parent row keeps the same appearance. */ @media (max-width:760px){ .header .nav > a:not(.nav-cta), .header .nav > a:not(.nav-cta):hover, .header .nav > a:not(.nav-cta):focus, .header .nav > a:not(.nav-cta):focus-visible, .header .nav > a:not(.nav-cta):active, .header .nav > a.active:not(.nav-cta), .header .nav > a:not(.nav-cta)[aria-current="page"]{ color:#24282d!important; background:transparent!important; box-shadow:none!important; transform:none!important; filter:none!important; outline:none!important; } .header .nav .nav-dropdown, .header .nav .nav-dropdown:hover, .header .nav .nav-dropdown:focus-within, .header .nav .nav-dropdown.open{ background:transparent!important; box-shadow:none!important; transform:none!important; } .header .nav .nav-dropdown > a, .header .nav .nav-dropdown > a:hover, .header .nav .nav-dropdown > a:focus, .header .nav .nav-dropdown > a:focus-visible, .header .nav .nav-dropdown > a:active, .header .nav .nav-dropdown.open > a{ color:#24282d!important; background:transparent!important; box-shadow:none!important; transform:none!important; filter:none!important; outline:none!important; } .header .nav .nav-dropdown > .nav-arrow, .header .nav .nav-dropdown > .nav-arrow:hover, .header .nav .nav-dropdown > .nav-arrow:focus, .header .nav .nav-dropdown > .nav-arrow:focus-visible, .header .nav .nav-dropdown > .nav-arrow:active, .header .nav .nav-dropdown.open > .nav-arrow{ color:#30343a!important; background:transparent!important; box-shadow:none!important; filter:none!important; outline:none!important; transform:none!important; } .header .nav .nav-dropdown > .nav-menu, .header .nav .nav-dropdown.open > .nav-menu{ background:transparent!important; box-shadow:none!important; } .header .nav .nav-dropdown > .nav-menu a, .header .nav .nav-dropdown > .nav-menu a:hover, .header .nav .nav-dropdown > .nav-menu a:focus, .header .nav .nav-dropdown > .nav-menu a:focus-visible, .header .nav .nav-dropdown > .nav-menu a:active{ color:#444!important; background:transparent!important; box-shadow:none!important; transform:none!important; outline:none!important; } .header .nav > a.nav-cta, .header .nav > a.nav-cta:hover, .header .nav > a.nav-cta:focus, .header .nav > a.nav-cta:focus-visible, .header .nav > a.nav-cta:active{ background:#e51b23!important; color:#fff!important; transform:none!important; box-shadow:0 8px 20px rgba(229,27,35,.20)!important; outline:none!important; } } /* ===== MOBILE MENU — FINAL SAME-GLASS STATE ===== All menu rows keep one identical transparent/rounded appearance. Navigation state, focus, active page and Location click must never recolor, whiten, move or reshape the drawer. */ @media (max-width:760px){ .header .nav{ background:rgba(255,255,255,.18)!important; border:1px solid rgba(255,255,255,.48)!important; box-shadow:0 20px 48px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.28)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; filter:none!important; } .header .nav > a:not(.nav-cta), .header .nav > a:not(.nav-cta):hover, .header .nav > a:not(.nav-cta):focus, .header .nav > a:not(.nav-cta):focus-visible, .header .nav > a:not(.nav-cta):active, .header .nav > a.active:not(.nav-cta), .header .nav > a:not(.nav-cta)[aria-current="page"]{ background:rgba(255,255,255,.20)!important; color:#24282d!important; box-shadow:none!important; transform:none!important; filter:none!important; outline:none!important; opacity:1!important; } .header .nav .nav-dropdown, .header .nav .nav-dropdown:hover, .header .nav .nav-dropdown:focus-within, .header .nav .nav-dropdown.open{ background:rgba(255,255,255,.20)!important; color:#24282d!important; box-shadow:none!important; transform:none!important; filter:none!important; } .header .nav .nav-dropdown > a, .header .nav .nav-dropdown > a:hover, .header .nav .nav-dropdown > a:focus, .header .nav .nav-dropdown > a:focus-visible, .header .nav .nav-dropdown > a:active, .header .nav .nav-dropdown.open > a{ background:transparent!important; color:#24282d!important; box-shadow:none!important; transform:none!important; filter:none!important; outline:none!important; } .header .nav .nav-dropdown > .nav-arrow, .header .nav .nav-dropdown > .nav-arrow:hover, .header .nav .nav-dropdown > .nav-arrow:focus, .header .nav .nav-dropdown > .nav-arrow:focus-visible, .header .nav .nav-dropdown > .nav-arrow:active, .header .nav .nav-dropdown.open > .nav-arrow{ background:transparent!important; color:#3b3f44!important; box-shadow:none!important; transform:none!important; filter:none!important; outline:none!important; } .header .nav .nav-dropdown > .nav-menu, .header .nav .nav-dropdown.open > .nav-menu{ background:rgba(255,255,255,.12)!important; border:0!important; box-shadow:none!important; filter:none!important; } .header .nav .nav-dropdown > .nav-menu a, .header .nav .nav-dropdown > .nav-menu a:hover, .header .nav .nav-dropdown > .nav-menu a:focus, .header .nav .nav-dropdown > .nav-menu a:focus-visible, .header .nav .nav-dropdown > .nav-menu a:active{ background:rgba(255,255,255,.14)!important; color:#444!important; box-shadow:none!important; transform:none!important; filter:none!important; outline:none!important; } .header .nav > a.nav-cta, .header .nav > a.nav-cta:hover, .header .nav > a.nav-cta:focus, .header .nav > a.nav-cta:focus-visible, .header .nav > a.nav-cta:active{ background:#e51b23!important; color:#fff!important; box-shadow:0 8px 20px rgba(229,27,35,.20)!important; transform:none!important; filter:none!important; outline:none!important; } /* Keep the outside layer invisible so the page never becomes blurred. */ .mobile-nav-backdrop, .mobile-nav-backdrop.open{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } } /* ===== MOBILE MENU FINAL: STABLE COLOURED PANEL / NO ACTIVE-ROW CHANGE ===== */ @media (max-width:760px){ /* Solid soft panel: no transparent/glass wash and no blur. */ .header .nav{ background:rgba(239,239,239,.97)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; border:1px solid rgba(255,255,255,.95)!important; box-shadow:0 18px 42px rgba(0,0,0,.28)!important; border-radius:22px!important; } /* Keep every menu row left aligned and visually identical in every state. */ .header .nav>a:not(.nav-cta), .header .nav>a:not(.nav-cta):hover, .header .nav>a:not(.nav-cta):focus, .header .nav>a:not(.nav-cta):focus-visible, .header .nav>a:not(.nav-cta):active, .header .nav>a.active:not(.nav-cta){ justify-content:flex-start!important; text-align:left!important; background:rgba(255,255,255,.24)!important; color:#24282d!important; box-shadow:none!important; transform:none!important; outline:none!important; } /* No active/pressed white or red block when navigating to a page. */ .header .nav .nav-dropdown, .header .nav .nav-dropdown:hover, .header .nav .nav-dropdown:focus-within, .header .nav .nav-dropdown.open{ background:rgba(255,255,255,.24)!important; box-shadow:none!important; } .header .nav .nav-dropdown>a, .header .nav .nav-dropdown>a:hover, .header .nav .nav-dropdown>a:focus, .header .nav .nav-dropdown>a:active{ background:transparent!important; color:#24282d!important; box-shadow:none!important; transform:none!important; outline:none!important; } /* Arrow keeps the same neutral appearance before/after opening. */ .header .nav .nav-dropdown>.nav-arrow, .header .nav .nav-dropdown>.nav-arrow:hover, .header .nav .nav-dropdown>.nav-arrow:focus, .header .nav .nav-dropdown>.nav-arrow:active{ background:transparent!important; color:#3b3f44!important; box-shadow:none!important; outline:none!important; } /* Submenu follows the same panel colour instead of creating a white block. */ .header .nav .nav-dropdown>.nav-menu, .header .nav .nav-dropdown.open>.nav-menu{ background:rgba(255,255,255,.18)!important; border:0!important; box-shadow:none!important; } .header .nav .nav-dropdown>.nav-menu a, .header .nav .nav-dropdown>.nav-menu a:hover, .header .nav .nav-dropdown>.nav-menu a:focus, .header .nav .nav-dropdown>.nav-menu a:active{ background:rgba(255,255,255,.20)!important; color:#35393e!important; text-align:left!important; justify-content:flex-start!important; box-shadow:none!important; transform:none!important; outline:none!important; } /* Red bullets remain the only visual accent on normal menu rows. */ .header .nav>a:not(.nav-cta)::before, .header .nav .nav-dropdown>a::before{ color:#e51b23!important; opacity:1!important; } /* Enquire Now remains the only strong red button. */ .header .nav>a.nav-cta, .header .nav>a.nav-cta:hover, .header .nav>a.nav-cta:focus, .header .nav>a.nav-cta:active{ background:#e51b23!important; color:#fff!important; box-shadow:0 8px 18px rgba(229,27,35,.22)!important; transform:none!important; outline:none!important; } } /* ===== FINAL MOBILE MENU: LEFT ALIGN + STABLE PANEL DESIGN ===== */ @media (max-width:760px){ /* Keep the drawer as a consistent soft panel; no glass/blur or page-dependent color changes. */ .header .nav{ background:rgba(245,245,245,.97)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; border:1px solid rgba(30,30,30,.10)!important; box-shadow:0 18px 45px rgba(0,0,0,.20)!important; } /* Every normal menu item stays left aligned, including Media Solutions. */ .header .nav>a:not(.nav-cta), .header .nav .nav-dropdown>a, .header .nav .nav-dropdown>.nav-menu a{ justify-content:flex-start!important; text-align:left!important; } /* Active/current page must look exactly like an ordinary menu item. */ .header .nav>a:not(.nav-cta):hover, .header .nav>a:not(.nav-cta):focus, .header .nav>a:not(.nav-cta):focus-visible, .header .nav>a:not(.nav-cta).active, .header .nav>a:not(.nav-cta)[aria-current="page"], .header .nav .nav-dropdown>a:hover, .header .nav .nav-dropdown>a:focus, .header .nav .nav-dropdown>a:focus-visible, .header .nav .nav-dropdown>a.active, .header .nav .nav-dropdown>a[aria-current="page"]{ color:#25292d!important; background:transparent!important; transform:none!important; box-shadow:none!important; } /* Keep the red bullet fixed; it must not turn into a selected-state block. */ .header .nav>a:not(.nav-cta)::before, .header .nav .nav-dropdown>a::before{ content:'•'!important; color:var(--red)!important; margin-right:9px!important; width:auto!important; height:auto!important; background:none!important; box-shadow:none!important; transform:none!important; } /* Media Solutions label remains left aligned and its arrow stays at the far right. */ .header .nav .nav-dropdown{ grid-template-columns:minmax(0,1fr) 36px!important; } .header .nav .nav-dropdown>a{ justify-content:flex-start!important; text-align:left!important; } .header .nav .nav-dropdown>.nav-arrow, .header .nav .nav-dropdown.open>.nav-arrow{ justify-content:center!important; background:transparent!important; color:#3b4045!important; box-shadow:none!important; } /* Submenu items also remain left aligned and keep one stable background. */ .header .nav .nav-dropdown>.nav-menu{ background:rgba(232,232,232,.72)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .header .nav .nav-dropdown>.nav-menu a:hover, .header .nav .nav-dropdown>.nav-menu a:focus, .header .nav .nav-dropdown>.nav-menu a:focus-visible, .header .nav .nav-dropdown>.nav-menu a.active, .header .nav .nav-dropdown>.nav-menu a[aria-current="page"]{ color:#444!important; background:transparent!important; transform:none!important; } /* Remove the blur from the outside-click layer too, so the page stays sharp. */ .mobile-nav-backdrop{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background:rgba(10,12,15,.10)!important; } } /* ===== MOBILE MENU: ABSOLUTELY STABLE DESIGN ON EVERY PAGE/STATE ===== */ @media (max-width:760px){ .header .nav, .header .nav.open{ background:#efefef!important; background-image:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; border:1px solid #dedede!important; box-shadow:0 18px 45px rgba(0,0,0,.20)!important; border-radius:22px!important; } /* Every main row keeps the exact same look: no active/visited/hover redesign. */ .header .nav > a:not(.nav-cta), .header .nav > a:not(.nav-cta):visited, .header .nav > a:not(.nav-cta):hover, .header .nav > a:not(.nav-cta):focus, .header .nav > a:not(.nav-cta):focus-visible, .header .nav > a:not(.nav-cta):active, .header .nav > a:not(.nav-cta).active, .header .nav > a:not(.nav-cta)[aria-current="page"]{ color:#24282d!important; background:rgba(255,255,255,.34)!important; background-image:none!important; opacity:1!important; transform:none!important; box-shadow:none!important; text-align:left!important; justify-content:flex-start!important; outline:none!important; text-shadow:none!important; -webkit-tap-highlight-color:transparent!important; } /* Remove all desktop active/hover underline effects inside the mobile drawer. */ .header .nav > a:not(.nav-cta)::after, .header .nav > a:not(.nav-cta):hover::after, .header .nav > a:not(.nav-cta):focus::after, .header .nav > a:not(.nav-cta):focus-visible::after, .header .nav > a:not(.nav-cta):active::after, .header .nav > a:not(.nav-cta).active::after, .header .nav > a:not(.nav-cta)[aria-current="page"]::after{ width:0!important; opacity:0!important; display:none!important; } /* Stable red bullet; never turns into a selected-state block. */ .header .nav > a:not(.nav-cta)::before, .header .nav .nav-dropdown > a::before{ content:'•'!important; position:static!important; display:inline!important; width:auto!important; height:auto!important; margin:0 9px 0 0!important; background:none!important; color:#e51b23!important; opacity:1!important; box-shadow:none!important; transform:none!important; left:auto!important; top:auto!important; pointer-events:none!important; } /* Media Solutions is left aligned exactly like every other row. */ .header .nav .nav-dropdown, .header .nav .nav-dropdown:hover, .header .nav .nav-dropdown:focus-within, .header .nav .nav-dropdown.open{ background:rgba(255,255,255,.34)!important; background-image:none!important; box-shadow:none!important; transform:none!important; } .header .nav .nav-dropdown > a, .header .nav .nav-dropdown > a:visited, .header .nav .nav-dropdown > a:hover, .header .nav .nav-dropdown > a:focus, .header .nav .nav-dropdown > a:focus-visible, .header .nav .nav-dropdown > a:active, .header .nav .nav-dropdown > a.active, .header .nav .nav-dropdown > a[aria-current="page"]{ color:#24282d!important; background:transparent!important; transform:none!important; box-shadow:none!important; text-align:left!important; justify-content:flex-start!important; outline:none!important; } .header .nav .nav-dropdown > .nav-arrow, .header .nav .nav-dropdown > .nav-arrow:hover, .header .nav .nav-dropdown > .nav-arrow:focus, .header .nav .nav-dropdown > .nav-arrow:focus-visible, .header .nav .nav-dropdown > .nav-arrow:active{ background:transparent!important; color:#3b3f44!important; box-shadow:none!important; transform:none!important; outline:none!important; } .header .nav .nav-dropdown > .nav-menu, .header .nav .nav-dropdown.open > .nav-menu{ background:#e6e6e6!important; background-image:none!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .header .nav .nav-dropdown > .nav-menu a, .header .nav .nav-dropdown > .nav-menu a:visited, .header .nav .nav-dropdown > .nav-menu a:hover, .header .nav .nav-dropdown > .nav-menu a:focus, .header .nav .nav-dropdown > .nav-menu a:focus-visible, .header .nav .nav-dropdown > .nav-menu a:active, .header .nav .nav-dropdown > .nav-menu a.active, .header .nav .nav-dropdown > .nav-menu a[aria-current="page"]{ color:#35393e!important; background:rgba(255,255,255,.24)!important; transform:none!important; box-shadow:none!important; text-align:left!important; justify-content:flex-start!important; outline:none!important; } .header .nav > a.nav-cta, .header .nav > a.nav-cta:visited, .header .nav > a.nav-cta:hover, .header .nav > a.nav-cta:focus, .header .nav > a.nav-cta:active{ background:#e51b23!important; color:#fff!important; opacity:1!important; transform:none!important; box-shadow:0 8px 18px rgba(229,27,35,.22)!important; outline:none!important; } } /* ===== MOBILE MENU FINAL STATE LOCK — SAME DESIGN FOR EVERY PAGE ===== */ @media (max-width:760px){ .header .nav, .header .nav.open{ display:flex!important; flex-direction:column!important; align-items:stretch!important; justify-content:flex-start!important; text-align:left!important; background:#efefef!important; background-color:#efefef!important; background-image:none!important; border:1px solid #dedede!important; border-radius:22px!important; box-shadow:0 18px 45px rgba(0,0,0,.20)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; padding:8px!important; gap:0!important; } .header .nav > a:not(.nav-cta), .header .nav > a:not(.nav-cta):visited, .header .nav > a:not(.nav-cta):hover, .header .nav > a:not(.nav-cta):focus, .header .nav > a:not(.nav-cta):focus-visible, .header .nav > a:not(.nav-cta):active, .header .nav > a:not(.nav-cta).active, .header .nav > a:not(.nav-cta)[aria-current="page"], .header .nav .nav-dropdown, .header .nav .nav-dropdown > a, .header .nav .nav-dropdown > a:visited, .header .nav .nav-dropdown > a:hover, .header .nav .nav-dropdown > a:focus, .header .nav .nav-dropdown > a:focus-visible, .header .nav .nav-dropdown > a:active, .header .nav .nav-dropdown > a.active, .header .nav .nav-dropdown > a[aria-current="page"]{ box-sizing:border-box!important; color:#24282d!important; background:rgba(255,255,255,.34)!important; background-color:rgba(255,255,255,.34)!important; background-image:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; opacity:1!important; transform:none!important; filter:none!important; text-align:left!important; justify-content:flex-start!important; align-items:center!important; text-shadow:none!important; outline:none!important; } .header .nav > a:not(.nav-cta){ width:100%!important; min-height:42px!important; padding:12px 12px!important; border-bottom:1px solid rgba(0,0,0,.055)!important; } .header .nav .nav-dropdown{ width:100%!important; display:grid!important; grid-template-columns:minmax(0,1fr) 34px!important; grid-template-rows:auto auto!important; padding:0!important; margin:0!important; } .header .nav .nav-dropdown > a{ width:auto!important; min-height:42px!important; padding:12px!important; grid-column:1!important; grid-row:1!important; } .header .nav .nav-dropdown > .nav-arrow, .header .nav .nav-dropdown > .nav-arrow:hover, .header .nav .nav-dropdown > .nav-arrow:focus, .header .nav .nav-dropdown > .nav-arrow:active{ grid-column:2!important; grid-row:1!important; width:34px!important; min-width:34px!important; height:42px!important; border:0!important; background:transparent!important; color:#3b3f44!important; box-shadow:none!important; transform:none!important; outline:none!important; } .header .nav > a:not(.nav-cta)::before, .header .nav .nav-dropdown > a::before{ content:'•'!important; position:static!important; display:inline!important; width:auto!important; height:auto!important; margin:0 9px 0 0!important; padding:0!important; background:none!important; color:#e51b23!important; box-shadow:none!important; transform:none!important; opacity:1!important; } .header .nav > a:not(.nav-cta)::after, .header .nav > a:not(.nav-cta):hover::after, .header .nav > a:not(.nav-cta):focus::after, .header .nav > a:not(.nav-cta):focus-visible::after, .header .nav > a:not(.nav-cta):active::after, .header .nav > a:not(.nav-cta).active::after, .header .nav > a:not(.nav-cta)[aria-current="page"]::after, .header .nav .nav-dropdown > a::after{ display:none!important; width:0!important; opacity:0!important; content:none!important; } .header .nav .nav-dropdown > .nav-menu, .header .nav .nav-dropdown.open > .nav-menu{ grid-column:1 / -1!important; grid-row:2!important; width:100%!important; margin:0!important; padding:0 8px 8px 30px!important; background:#e6e6e6!important; background-color:#e6e6e6!important; background-image:none!important; border:0!important; box-shadow:none!important; border-radius:0 0 10px 10px!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .header .nav .nav-dropdown > .nav-menu a, .header .nav .nav-dropdown > .nav-menu a:visited, .header .nav .nav-dropdown > .nav-menu a:hover, .header .nav .nav-dropdown > .nav-menu a:focus, .header .nav .nav-dropdown > .nav-menu a:active, .header .nav .nav-dropdown > .nav-menu a.active, .header .nav .nav-dropdown > .nav-menu a[aria-current="page"]{ display:block!important; width:100%!important; color:#35393e!important; background:#e6e6e6!important; border:0!important; box-shadow:none!important; transform:none!important; text-align:left!important; justify-content:flex-start!important; outline:none!important; } .header .nav > a.nav-cta, .header .nav > a.nav-cta:visited, .header .nav > a.nav-cta:hover, .header .nav > a.nav-cta:focus, .header .nav > a.nav-cta:active{ width:max-content!important; align-self:flex-start!important; margin:8px 0 0!important; background:#e51b23!important; background-color:#e51b23!important; color:#fff!important; border:0!important; border-radius:8px!important; box-shadow:0 8px 18px rgba(229,27,35,.22)!important; transform:none!important; } } /* =================================================================== FINAL NAVBAR REDESIGN — grouped pill nav, separated logo/hamburger and a distinct rounded "Enquire Now" button. New markup (same on every page): .header .nav-wrap > .nav-brand(.nav-toggle + .site-logo), .nav, .nav-cta =================================================================== */ .header .nav-wrap{ height:100%!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:18px!important; } /* Circular hamburger, now visible and consistent on every screen size */ .header .nav-toggle{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:5px!important; width:44px!important; height:44px!important; min-width:44px!important; border-radius:50%!important; border:1px solid #e9e9e9!important; background:var(--soft)!important; cursor:pointer!important; flex:0 0 44px!important; transition:background .25s ease,border-color .25s ease!important; } @media (min-width:761px){ .header .nav-toggle{ display:none!important; } } .header .nav-toggle:hover{ background:#ececec!important; border-color:#dcdcdc!important; } .header .nav-toggle span{ width:18px!important; height:2px!important; background:var(--ink)!important; border-radius:2px!important; transition:transform .25s ease,opacity .25s ease!important; } .header .nav-toggle.menu-open span:nth-child(1){transform:translateY(7px) rotate(45deg)!important} .header .nav-toggle.menu-open span:nth-child(2){opacity:0!important} .header .nav-toggle.menu-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important} .header .site-logo{ order:1!important; } .header .site-logo img{ width:128px!important; max-height:34px!important; height:auto!important; object-fit:contain!important; } .header .nav{order:2!important} .header .nav-cta{order:3!important} .header .nav-toggle{order:4!important} /* Desktop pill navigation — all links grouped in one soft capsule */ @media (min-width:761px){ .header .nav{ display:flex!important; align-items:center!important; justify-content:center!important; gap:2px!important; height:auto!important; background:rgba(246,246,244,.28)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; border:1px solid rgba(255,255,255,.38)!important; border-radius:999px!important; padding:6px!important; flex:1 1 auto!important; max-width:640px!important; margin:0 auto!important; } .header .nav>a:not(.nav-cta){ position:relative!important; padding:12px 18px!important; border-radius:999px!important; font-size:13px!important; font-weight:800!important; color:#30343a!important; white-space:nowrap!important; transition:background .25s ease,color .25s ease,box-shadow .25s ease!important; } .header .nav>a:not(.nav-cta)::before, .header .nav>a:not(.nav-cta)::after{ content:none!important; display:none!important; } .header .nav>a:not(.nav-cta):hover, .header .nav>a:not(.nav-cta).active, .header .nav>a:not(.nav-cta)[aria-current="page"]{ background:#fff!important; color:var(--red)!important; box-shadow:0 6px 16px rgba(0,0,0,.08)!important; } .header .nav .nav-dropdown{ position:relative!important; height:auto!important; display:flex!important; align-items:center!important; gap:0!important; border-radius:999px!important; } .header .nav .nav-dropdown>a{ padding:12px 8px 12px 18px!important; font-size:13px!important; font-weight:800!important; color:#30343a!important; } .header .nav .nav-dropdown>a::before, .header .nav .nav-dropdown>a::after{ content:none!important; display:none!important; } .header .nav .nav-dropdown:hover, .header .nav .nav-dropdown.open{ background:#fff!important; box-shadow:0 6px 16px rgba(0,0,0,.08)!important; } .header .nav .nav-dropdown:hover>a, .header .nav .nav-dropdown.open>a{color:var(--red)!important} .header .nav .nav-arrow{ padding:6px 14px 6px 4px!important; font-size:9px!important; color:#8a8d90!important; } .header .nav .nav-dropdown:hover .nav-arrow, .header .nav .nav-dropdown.open .nav-arrow{color:var(--red)!important} .header .nav .nav-menu{ top:calc(100% + 10px)!important; border-radius:14px!important; } .header .nav .nav-dropdown:hover .nav-menu{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:translate(-50%,0)!important; } } /* Distinct rounded CTA button, clearly separated from the nav pill */ .header .nav-cta{ position:relative!important; z-index:1!important; display:inline-flex!important; align-items:center!important; gap:10px!important; background:var(--red)!important; color:#fff!important; font-size:13px!important; font-weight:800!important; padding:13px 18px!important; border-radius:6px!important; box-shadow:0 9px 20px rgba(229,27,35,.30)!important; flex:0 0 auto!important; white-space:nowrap!important; transition:background .25s ease,box-shadow .25s ease!important; } .header .nav-cta span{ display:inline-flex!important; align-items:center!important; } .header .nav-cta:hover{ background:var(--red2)!important; box-shadow:0 9px 20px rgba(184,15,22,.32)!important; } /* Mobile: header bar keeps only the logo (left) and the menu button (right). Enquire Now is NOT in the header — it appears as its own clearly separated box at the bottom of the menu drawer instead (see .nav-cta-drawer-box below). Desktop is untouched. */ @media (max-width:760px){ .header .nav-wrap{ flex-wrap:nowrap!important; gap:10px!important; justify-content:space-between!important; } .header .nav-cta{ display:none!important; } .header .site-logo{order:1!important} .header .nav{order:2!important} .header .nav-toggle{order:3!important;margin-left:auto!important} } /* Enquire Now as its own separated box inside the mobile menu drawer. Scoped to max-width:760px only, so desktop is never affected. */ .header .nav-cta-drawer-box{display:none} @media (max-width:760px){ .header .nav-cta-drawer-box{ display:block!important; width:100%!important; box-sizing:border-box!important; margin-top:10px!important; padding-top:10px!important; border-top:1px solid rgba(0,0,0,.08)!important; } .header .nav-cta-drawer, .header .nav-cta-drawer:visited, .header .nav-cta-drawer:hover, .header .nav-cta-drawer:focus, .header .nav-cta-drawer:focus-visible, .header .nav-cta-drawer:active, .header .nav-cta-drawer.active{ display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; width:100%!important; box-sizing:border-box!important; padding:14px 12px!important; background:var(--red)!important; background-image:none!important; color:#fff!important; font-size:14px!important; font-weight:800!important; border:0!important; border-bottom:0!important; border-radius:10px!important; min-height:0!important; box-shadow:0 8px 18px rgba(229,27,35,.28)!important; opacity:1!important; transform:none!important; filter:none!important; text-shadow:none!important; outline:none!important; text-align:center!important; } .header .nav-cta-drawer::before, .header .nav-cta-drawer::after{ content:none!important; display:none!important; } .header .nav-cta-drawer span{ display:inline-flex!important; align-items:center!important; } } /* ===== FINAL CAMPAIGN NAV PILL — DESKTOP ONLY ===== Campaign is added to the existing navigation pill. The pill is widened just enough to contain every nav item + Enquire Now. Mobile navigation is intentionally untouched. */ @media (min-width:761px){ .header .nav{ max-width:780px!important; width:max-content!important; flex:0 1 auto!important; padding:5px 6px!important; gap:2px!important; overflow:visible!important; } .header .nav > a:not(.nav-cta), .header .nav > .nav-dropdown{ flex:0 0 auto!important; } .header .nav > a:not(.nav-cta){ padding:11px 14px!important; font-size:12.5px!important; } .header .nav .nav-dropdown > a{ padding:11px 7px 11px 14px!important; font-size:12.5px!important; } .header .nav .nav-arrow{ padding:5px 10px 5px 2px!important; } .header .nav > .nav-cta{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; margin:0 2px 0 4px!important; padding:11px 15px!important; min-height:40px!important; font-size:11.5px!important; border-radius:6px!important; flex:0 0 auto!important; box-shadow:0 7px 16px rgba(229,27,35,.24)!important; } } /* MOBILE ONLY — 360° center typography compact fix Desktop/tablet styles remain untouched. */ @media (max-width:760px){ .solutions-360 .orbit-center span{ font-size:28px!important; line-height:.95!important; white-space:nowrap!important; } .solutions-360 .orbit-center small{ font-size:6px!important; letter-spacing:1.2px!important; line-height:1!important; white-space:nowrap!important; } .solutions-360 .orbit-center b{ font-size:7px!important; line-height:1!important; letter-spacing:.6px!important; margin-top:4px!important; white-space:nowrap!important; } } @media (max-width:390px){ .solutions-360 .orbit-center span{font-size:25px!important;} .solutions-360 .orbit-center small{font-size:5.5px!important;} .solutions-360 .orbit-center b{font-size:6.5px!important;} } /* Chatbot thinking state: the bot face rotates only while a reply is being prepared. */ .thinking-row .msg-avatar .mini-bot{animation:krishnaBotThinking .72s linear infinite;transform-origin:center} .thinking-row .thinking-bubble{display:flex;align-items:center;gap:8px} .thinking-label{font-weight:800;letter-spacing:.2px} .thinking-dots{display:inline-flex;gap:3px;align-items:center} .thinking-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;display:block;animation:krishnaThinkingDot 1s ease-in-out infinite} .thinking-dots i:nth-child(2){animation-delay:.15s}.thinking-dots i:nth-child(3){animation-delay:.3s} @keyframes krishnaBotThinking{to{transform:rotate(360deg)}} @keyframes krishnaThinkingDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}} .chat-link-list{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:7px} .chat-link-list a,.msg-bubble a{color:var(--red);font-weight:800;text-decoration:underline;text-underline-offset:2px} /* ===== FINAL REQUESTED FIXES ===== */ @media (min-width:761px){ .header .nav .nav-dropdown > .nav-arrow{ display:inline-flex!important; visibility:visible!important; opacity:1!important; position:relative!important; left:auto!important; right:auto!important; top:auto!important; transform:none!important; width:18px!important; height:30px!important; margin-left:2px!important; padding:3px 0!important; color:#30343a!important; background:transparent!important; border:0!important; z-index:999!important; } .header.scrolled .nav .nav-dropdown > .nav-arrow{color:#111318!important} .header .nav .nav-dropdown:hover > .nav-arrow, .header .nav .nav-dropdown.open > .nav-arrow{color:var(--red)!important} } .solutions-360 .slide-type{display:none!important} @media (min-width:761px){ .home-page .hero .hero-inner h1{ position:absolute!important; left:50%!important; bottom:92px!important; transform:translateX(-50%)!important; width:max-content!important; max-width:92vw!important; margin:0!important; white-space:nowrap!important; text-align:center!important; font-size:clamp(42px,5.1vw,72px)!important; line-height:.92!important; letter-spacing:-1.5px!important; } .home-page .hero .hero-inner h1 br{display:none!important} } /* FINAL DESKTOP HERO HEADLINE — keep the headline on one horizontal line, centered and slightly higher. */ @media(min-width:761px){ .home-page .hero .hero-inner{padding-top:0!important;} .home-page .hero h1{ position:absolute!important; left:50%!important; bottom:105px!important; transform:translateX(-50%)!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; text-align:center!important; white-space:nowrap!important; font-size:clamp(42px,5.2vw,76px)!important; line-height:1!important; letter-spacing:.015em!important; word-spacing:.16em!important; } .home-page .hero h1 br{display:none!important;} .home-page .hero h1 em{display:inline!important;} } /* ===== FINAL USER POLISH — DESKTOP HERO + MEDIA DROPDOWN ===== */ @media (min-width:761px){ /* Home hero: move headline higher and make it more compact so it never clips at the bottom. */ .home-page .hero-inner{ justify-content:center!important; transform:translateY(-20%)!important; padding-top:0!important; } .home-page .hero-inner h1{ font-size:clamp(48px,5.2vw,76px)!important; line-height:.9!important; letter-spacing:-1.2px!important; margin:0!important; max-width:900px!important; } /* Keep inner-page banner typography compact and balanced. */ .about-hero-title, .media-hero-copy h1, .network-hero-copy h1, .ow-hero h1, .kr-enquiry-copy h1, .kr-hero h1{ font-size:clamp(36px,3vw,44px)!important; line-height:.94!important; letter-spacing:-.7px!important; margin:8px 0 12px!important; } .about-hero-desc, .media-hero-copy p, .network-hero-copy p, .ow-hero-copy, .kr-enquiry-copy p, .kr-hero p{ font-size:13px!important; line-height:1.48!important; } /* Media Solutions dropdown: no hover gap; keep the whole dropdown area interactive. */ .header .nav .nav-dropdown{ position:relative!important; z-index:500!important; } .header .nav .nav-dropdown > .nav-menu{ top:100%!important; margin-top:0!important; z-index:9999!important; } .header .nav .nav-dropdown::after{ content:""; position:absolute; left:-12px; right:-12px; top:100%; height:24px; background:transparent; z-index:9998; pointer-events:auto; } .header .nav .nav-dropdown:hover > .nav-menu, .header .nav .nav-dropdown:focus-within > .nav-menu, .header .nav .nav-dropdown.open > .nav-menu{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:translate(-50%,0)!important; } .header .nav .nav-dropdown > .nav-menu a{ position:relative!important; z-index:10000!important; } } /* ===== FINAL USER POLISH — COMPACT HERO TEXT + LOWER POSITION ===== */ @media (min-width:761px){ /* Keep every inner-page hero/banner heading compact and move the complete text block slightly lower. */ .about-hero-copy, .media-hero-copy, .network-hero-copy, .ow-hero-inner>div:first-child, .kr-hero-inner, .kr-enquiry-copy{ transform:translateY(9%)!important; } .about-hero-title, .media-hero-copy h1, .media-detail-hero .hero-inner h1, .network-hero-copy h1, .ow-hero h1, .kr-enquiry-copy h1, .kr-hero h1{ font-size:clamp(32px,2.55vw,40px)!important; line-height:.96!important; letter-spacing:-.55px!important; margin:7px 0 10px!important; max-width:520px!important; } .about-hero-desc, .media-hero-copy p, .media-detail-hero .hero-inner p, .network-hero-copy p, .ow-hero-copy, .kr-enquiry-copy p, .kr-hero p{ font-size:12px!important; line-height:1.45!important; max-width:470px!important; } /* Home hero: smaller, lower, centered single line. */ .home-page .hero .hero-inner{ transform:none!important; } .home-page .hero .hero-inner h1{ bottom:55px!important; font-size:clamp(38px,4.35vw,62px)!important; line-height:1!important; letter-spacing:.01em!important; word-spacing:.08em!important; max-width:none!important; } /* Add a clearly visible gap after “WHERE”. */ .home-page .hero .hero-inner h1 em{ margin-left:.34em!important; } } /* ===== FINAL USER REQUEST — HERO TEXT EXTRA COMPACT + HOME HEADLINE HIGHER ===== */ @media (min-width:761px){ /* Home hero: keep the headline clearly inside the lower part of the video, but above the bottom edge so the full line is always visible. */ .home-page .hero .hero-inner h1{ bottom:120px!important; font-size:clamp(34px,3.8vw,54px)!important; line-height:1!important; letter-spacing:.01em!important; word-spacing:.10em!important; max-width:none!important; white-space:nowrap!important; } .home-page .hero .hero-inner h1 em{ margin-left:.42em!important; } /* All desktop hero/banner typography: smaller, tighter and cleaner. */ .about-hero-title, .media-hero-copy h1, .media-detail-hero .hero-inner h1, .network-hero-copy h1, .ow-hero h1, .kr-enquiry-copy h1, .kr-hero h1{ font-size:clamp(28px,2.2vw,35px)!important; line-height:.96!important; letter-spacing:-.45px!important; margin:6px 0 9px!important; max-width:480px!important; } .about-hero-desc, .media-hero-copy p, .media-detail-hero .hero-inner p, .network-hero-copy p, .ow-hero-copy, .kr-enquiry-copy p, .kr-hero p{ font-size:11.5px!important; line-height:1.42!important; max-width:450px!important; } .about-hero-copy, .media-hero-copy, .network-hero-copy, .ow-hero-inner>div:first-child, .kr-hero-inner, .kr-enquiry-copy{ transform:translateY(9%)!important; } } /* ===== FINAL DESKTOP HERO COMPACT PASS ===== User request: move Home hero headline slightly upward and make all desktop hero/banner text smaller + tighter. Mobile rules above remain unchanged. */ @media(min-width:761px){ /* Home: only a subtle 5% upward adjustment from the previous desktop position. */ .home-page .hero .hero-inner{padding-top:188px!important;} .home-page .hero h1{ font-size:clamp(43px,5.25vw,76px)!important; line-height:.93!important; letter-spacing:-1.1px!important; word-spacing:4px!important; margin:0!important; } /* All inner-page hero/banner headings: smaller and more compact. */ .inner-page .about-hero-title, .inner-page .media-hero-copy h1, .inner-page .media-detail-hero .hero-inner h1, .inner-page .network-hero-copy h1, .inner-page .ow-hero h1, .inner-page .kr-hero h1, .inner-page .kr-enquiry-copy h1{ font-size:41px!important; line-height:.94!important; letter-spacing:-.6px!important; max-width:540px!important; margin:8px 0 13px!important; } .inner-page .about-hero-desc, .inner-page .media-hero-copy p, .inner-page .media-detail-hero .hero-inner p, .inner-page .network-hero-copy p, .inner-page .ow-hero-copy, .inner-page .kr-hero p, .inner-page .kr-enquiry-copy p{ font-size:12.5px!important; line-height:1.48!important; max-width:470px!important; margin-bottom:17px!important; } .inner-page .about-hero-copy .tag, .inner-page .media-hero-copy .tag, .inner-page .network-hero-copy .tag, .inner-page .ow-kicker, .inner-page .kr-kicker{ font-size:8px!important; letter-spacing:.15em!important; } } /* ===== FINAL USER POLISH: HOME HERO + MOBILE NON-HERO BANNERS ===== */ /* Move only the Home desktop hero headline slightly upward; mobile hero remains untouched. */ @media (min-width:761px){ .home-page .hero .hero-inner{padding-top:188px!important;} } /* Keep mobile hero typography exactly as-is; compact only non-hero banner/section headings. */ @media (max-width:760px){ .home-page main > section:not(.hero) .section-head h2, .home-page main > section:not(.hero) .about-copy h2, .home-page main > section:not(.hero) .doc-home-copy h2, .home-page main > section:not(.hero) .doc-home-panel h3, .home-page main > section:not(.hero) .doc-home-legacy h2, .home-page main > section:not(.hero) .clients-copy h2, .home-page main > section:not(.hero) .showcase-copy h2, .home-page main > section:not(.hero) .work-copy h2, .home-page main > section:not(.hero) .impact-copy h2, .home-page main > section:not(.hero) .cta-inner h2, .inner-page .network-presence-head h2, .inner-page .network-section-head h2, .inner-page .network-journey h2, .inner-page .kr-head h2, .inner-page .media-section h2, .inner-page .media-final-inner h2, .inner-page .ow-work h2, .inner-page .ow-cta h2, .inner-page .about-cta h2, .inner-page .network-cta h2, .inner-page .kr-final-cta h2, .inner-page .kr-career-cta h2{ font-size:clamp(28px,7.8vw,39px)!important; line-height:.98!important; letter-spacing:-.02em!important; } .home-page main > section:not(.hero) .section-head p, .home-page main > section:not(.hero) .doc-home-copy p, .home-page main > section:not(.hero) .doc-home-panel p, .home-page main > section:not(.hero) .doc-home-legacy p, .home-page main > section:not(.hero) .clients-copy p, .inner-page .network-presence-head p, .inner-page .network-section-head > p, .inner-page .network-journey p, .inner-page .kr-head p, .inner-page .media-section p, .inner-page .media-final-inner p{ font-size:12px!important; line-height:1.5!important; } .home-page main > section:not(.hero) .tag, .inner-page .network-section-head .tag, .inner-page .network-presence-head .tag, .inner-page .kr-head .kr-kicker{ font-size:8px!important; letter-spacing:1.2px!important; } } /* FINAL REQUEST: move Home hero headline slightly upward */ @media(min-width:761px){ .hero .hero-inner h1{transform:translateY(-3%);} } /* FINAL FIX — keep the complete desktop navigation pill visible on every page. The Network/Location pages were inheriting a 780px max-width, which caused the Campaign item to fall outside the visible pill. */ @media (min-width:761px){ .header .nav{ width:max-content!important; max-width:none!important; min-width:max-content!important; flex:0 0 auto!important; flex-shrink:0!important; overflow:visible!important; white-space:nowrap!important; gap:2px!important; } .header .nav > a:not(.nav-cta), .header .nav > .nav-dropdown{ flex:0 0 auto!important; width:auto!important; min-width:0!important; max-width:none!important; } } @media (min-width:761px) and (max-width:1320px){ .header .nav{gap:1px!important;padding:5px!important} .header .nav > a:not(.nav-cta), .header .nav .nav-dropdown > a{ font-size:10.5px!important; padding:10px 9px!important; } .header .nav .nav-dropdown > a{padding-left:9px!important;padding-right:5px!important} .header .nav .nav-arrow{padding:4px 6px 4px 1px!important;font-size:8px!important} } @media (min-width:1321px){ .header .nav > a:not(.nav-cta), .header .nav .nav-dropdown > a{font-size:12.5px!important} } /* Final desktop hero positioning fix */ @media (min-width: 761px){ .home-page .hero .hero-inner{ transform:translateY(-35px)!important; } } /* ===== FINAL BUTTON MOTION + HOME CTA MOBILE ALIGNMENT ===== */ /* Red buttons: slow white sweep. White buttons: slow red sweep. */ .btn.red::before, .tab.active::after, .small-btn::before, .media-btn::before, .network-btn::before, .network-card-link::before, .kr-btn:not(.alt)::before, .ow-btn::before, .kr-office-btn::before, .about-btn::before, .nav-cta::before, .experience-link::before, .footer-campaign::before, .service-next::before { background:linear-gradient(105deg, transparent 8%, rgba(255,255,255,.05) 32%, rgba(255,255,255,.88) 50%, rgba(255,255,255,.05) 68%, transparent 92%) !important; transition:left 1.15s cubic-bezier(.2,.7,0,1) !important; } .btn.white::before, .outline-btn::before, .kr-btn.alt::before, .tab:not(.active)::after { background:linear-gradient(105deg, transparent 8%, rgba(229,27,35,.05) 32%, rgba(229,27,35,.82) 50%, rgba(229,27,35,.05) 68%, transparent 92%) !important; transition:left 1.15s cubic-bezier(.2,.7,0,1) !important; } .btn.red::after, .tab.active::before, .small-btn::after, .media-btn::after, .network-btn::after, .network-card-link::after, .kr-btn:not(.alt)::after, .ow-btn::after, .kr-office-btn::after, .about-btn::after, .nav-cta::after, .experience-link::after, .footer-campaign::after, .service-next::after { background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent) !important; transition:left 1.05s cubic-bezier(.2,.75,0,1),opacity .35s ease !important; } .btn.white::after, .outline-btn::after, .kr-btn.alt::after, .tab:not(.active)::after { background:linear-gradient(90deg,transparent,rgba(229,27,35,.28),transparent) !important; transition:left 1.05s cubic-bezier(.2,.75,0,1),opacity .35s ease !important; } /* Keep the motion subtle and consistent across all actionable buttons. */ .btn:hover, .small-btn:hover, .outline-btn:hover, .kr-btn:hover, .ow-btn:hover, .media-btn:hover, .network-btn:hover, .network-card-link:hover, .kr-office-btn:hover, .about-btn:hover, .footer-campaign:hover, .service-next:hover, .tab:hover, .nav-cta:hover, .experience-link:hover { transition:transform .42s cubic-bezier(.2,.75,.2,1),box-shadow .42s ease, border-color .42s ease,background-color .42s ease,color .42s ease !important; } /* Home hero: keep Discover + Plan on one compact row on mobile. */ @media(max-width:760px){ .experience-actions{ width:100% !important; display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:8px !important; margin-top:18px !important; } .experience-actions .experience-link, .experience-actions .experience-link.secondary{ flex:1 1 0 !important; min-width:0 !important; width:auto !important; margin:0 !important; padding:10px 8px !important; min-height:40px !important; gap:6px !important; font-size:9px !important; line-height:1.1 !important; letter-spacing:.25px !important; white-space:nowrap !important; text-align:center !important; } .experience-actions .experience-link span, .experience-actions .experience-link.secondary span{ flex:0 0 auto !important; } } /* FINAL REQUEST — Home Discover / Plan buttons use the same slow moving shine as the other CTAs. */ .experience-actions .experience-link, .experience-actions .experience-link.secondary{ position:relative!important; overflow:hidden!important; isolation:isolate!important; transform:none!important; box-shadow:none!important; transition:background .28s ease,color .28s ease,border-color .28s ease!important; } .experience-actions .experience-link::before, .experience-actions .experience-link.secondary::before{ content:""!important; position:absolute!important; z-index:0!important; top:-45%!important; left:-90%!important; width:48%!important; height:190%!important; transform:skewX(-18deg)!important; transition:left .68s cubic-bezier(.2,.7,0,1)!important; pointer-events:none!important; opacity:1!important; } .experience-actions .experience-link::before{ background:linear-gradient(105deg,transparent 10%,rgba(255,255,255,.04) 38%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.04) 62%,transparent 90%)!important; } .experience-actions .experience-link.secondary::before{ background:linear-gradient(105deg,transparent 10%,rgba(229,27,35,.04) 38%,rgba(229,27,35,.72) 50%,rgba(229,27,35,.04) 62%,transparent 90%)!important; } .experience-actions .experience-link:hover::before, .experience-actions .experience-link.secondary:hover::before{left:145%!important;} .experience-actions .experience-link > *, .experience-actions .experience-link.secondary > *{position:relative!important;z-index:1!important;} .experience-actions .experience-link:hover, .experience-actions .experience-link.secondary:hover{transform:none!important;box-shadow:none!important;} /* Kevin Gandhi portrait: always show the complete source image without cropping. */ .leader-card:nth-child(2) img{ object-fit:contain!important; object-position:center center!important; background:#fff!important; transform:none!important; } .leader-card:nth-child(2):hover img{transform:none!important;} @media(max-width:600px){ .leader-card:nth-child(2) img{ height:260px!important; min-height:260px!important; object-fit:contain!important; object-position:center center!important; background:#fff!important; } } /* ===== FINAL MOBILE HERO/BANNER COMPACT PASS ===== Keep desktop untouched. Mobile hero/banner typography is intentionally smaller and tighter so no heading, paragraph, or CTA gets clipped. */ @media (max-width:760px){ /* Home hero */ .home-page .hero .hero-inner{ padding:0 16px 86px!important; justify-content:flex-end!important; align-items:center!important; transform:none!important; } .home-page .hero .hero-inner h1{ position:relative!important; left:auto!important; bottom:auto!important; width:100%!important; max-width:100%!important; margin:0!important; white-space:normal!important; text-align:center!important; font-size:clamp(25px,7.4vw,34px)!important; line-height:.98!important; letter-spacing:-.4px!important; word-spacing:.08em!important; } .home-page .hero .hero-inner h1 br{display:none!important} .home-page .hero .hero-inner h1 em{display:inline!important;margin-left:.28em!important} /* All inner-page hero banners */ .about-hero, .about-hero-inner, .media-hero, .media-hero-inner, .network-hero, .ow-hero, .kr-hero, .kr-enquiry-hero{ height:auto!important; min-height:500px!important; } .about-hero-inner, .media-hero-inner, .ow-hero-inner, .kr-hero-inner{ min-height:500px!important; height:auto!important; } .about-hero-copy, .media-hero-copy, .network-hero-copy, .ow-hero-inner>div:first-child, .kr-hero-inner, .kr-enquiry-copy{ width:100%!important; max-width:100%!important; padding:26px 18px 42px!important; transform:none!important; box-sizing:border-box!important; } .about-hero-title, .media-hero-copy h1, .network-hero-copy h1, .ow-hero h1, .kr-enquiry-copy h1, .kr-hero h1{ font-size:clamp(29px,8.4vw,38px)!important; line-height:.98!important; letter-spacing:-.45px!important; max-width:100%!important; margin:6px 0 10px!important; text-wrap:balance!important; } .about-hero-desc, .media-hero-copy p, .network-hero-copy p, .ow-hero-copy, .kr-enquiry-copy p, .kr-hero p{ max-width:100%!important; font-size:11.5px!important; line-height:1.36!important; margin:6px 0 10px!important; } .about-hero-copy .tag, .media-hero-copy .tag, .network-hero-copy .tag, .ow-kicker, .kr-kicker{ font-size:7.5px!important; line-height:1.1!important; letter-spacing:1.1px!important; } .about-hero-actions, .kr-actions{ gap:7px!important; margin-top:9px!important; } .about-hero-actions .about-btn, .kr-actions .kr-btn{ padding:9px 12px!important; min-height:36px!important; font-size:9px!important; } /* Media hero has its own large mobile copy rule; override it last. */ .media-hero-copy{padding:28px 16px 38px!important} .media-hero-copy h1{font-size:clamp(29px,8.2vw,37px)!important} .media-hero-copy p{font-size:11.5px!important;line-height:1.36!important} .media-quote{font-size:11px!important;line-height:1.25!important;margin-top:10px!important} /* Network hero: keep title/stats inside the banner instead of pushing below it. */ .network-hero-inner{padding:72px 16px 38px!important} .network-hero-copy h1{font-size:clamp(29px,8.2vw,37px)!important} .network-hero-copy p{font-size:11.5px!important;line-height:1.36!important} .network-stats{margin-top:20px!important} .network-stat{padding:10px 10px 12px!important} .network-stat strong{font-size:22px!important} .network-stat span{font-size:8px!important;line-height:1.25!important} /* Work / Campaign hero */ .ow-hero-inner{padding:72px 16px 38px!important} .ow-hero h1{font-size:clamp(29px,8.2vw,37px)!important} .ow-hero-copy{font-size:11.5px!important;line-height:1.36!important} /* Enquiry/Careers style hero */ .kr-page .kr-hero-inner{padding:72px 18px 38px!important} .kr-page .kr-hero h1{font-size:clamp(29px,8.2vw,37px)!important} .kr-page .kr-hero p{font-size:11.5px!important;line-height:1.36!important} .kr-page .kr-enquiry-copy{padding:48px 18px 30px!important} .kr-page .kr-enquiry-copy h1{font-size:clamp(29px,8.2vw,37px)!important} .kr-page .kr-enquiry-copy p{font-size:11.5px!important;line-height:1.36!important} } /* Kevin Gandhi — mobile: preserve both shoes while trimming only the empty lower background area. The portrait itself is never cropped at the shoes. */ @media (max-width:600px){ .about-lead-grid .leader-card:nth-child(2){overflow:hidden!important} .about-lead-grid .leader-card:nth-child(2) img{ display:block!important; width:100%!important; height:315px!important; min-height:315px!important; object-fit:contain!important; object-position:center bottom!important; background:#fff!important; transform:translateY(-10px)!important; margin-bottom:-10px!important; } .about-lead-grid .leader-card:nth-child(2):hover img{transform:translateY(-10px)!important} } /* ===== FINAL USER REQUEST: restore mobile Home hero + match About/Network banner typography to Our Work/Enquiry ===== */ @media (max-width:760px){ /* Home hero: restore the earlier mobile hero treatment; do not use the compact inner-page banner sizing here. */ .home-page .hero{ height:620px!important; min-height:620px!important; } .home-page .hero .hero-inner{ min-height:620px!important; height:100%!important; padding:55px 16px 0!important; justify-content:center!important; align-items:initial!important; transform:none!important; } .home-page .hero .hero-inner h1{ position:relative!important; left:auto!important; bottom:auto!important; width:auto!important; max-width:100%!important; margin:21px 0 25px!important; text-align:left!important; white-space:normal!important; font-size:62px!important; line-height:.88!important; letter-spacing:-1.5px!important; word-spacing:normal!important; } .home-page .hero .hero-inner h1 br{display:block!important;} .home-page .hero .hero-inner h1 em{display:inline!important;margin-left:0!important;} .home-page .hero .hero-inner>p{ max-width:400px!important; font-size:14px!important; line-height:1.65!important; margin:0!important; } .home-page .hero .hero-actions{ margin-top:30px!important; } /* Match the mobile hero/banner typography used by Our Work and Enquiry. */ .inner-page .about-hero-title, .inner-page .network-hero-copy h1{ font-size:clamp(29px,8.2vw,37px)!important; line-height:.98!important; letter-spacing:-.45px!important; max-width:100%!important; margin:6px 0 10px!important; text-wrap:balance!important; } .inner-page .about-hero-desc, .inner-page .network-hero-copy p{ max-width:100%!important; font-size:11.5px!important; line-height:1.36!important; margin:6px 0 10px!important; } .inner-page .about-hero-copy .about-kicker, .inner-page .network-hero-copy .tag{ font-size:7.5px!important; line-height:1.1!important; letter-spacing:1.1px!important; } .inner-page .network-hero-copy{width:100%!important;max-width:100%!important;} } @media (max-width:430px){ .home-page .hero .hero-inner h1{font-size:53px!important;} } /* FINAL MOBILE HOME HERO — centered and bottom-centered text */ @media (max-width:760px){ .home-page .hero .hero-inner{ position:absolute!important; left:50%!important; bottom:42px!important; width:calc(100% - 32px)!important; max-width:none!important; height:auto!important; padding:0!important; margin:0!important; transform:translateX(-50%)!important; display:flex!important; flex-direction:column!important; justify-content:flex-end!important; align-items:center!important; text-align:center!important; } .home-page .hero .hero-inner h1{ width:100%!important; max-width:100%!important; margin:0!important; text-align:center!important; align-self:center!important; } } /* ========================================================= MOBILE INNER-BANNER REPAIR — keep HOME hero untouched Compact, consistent, non-cropping typography + CTA layout ========================================================= */ @media (max-width:760px){ /* Every inner-page banner except the Home hero */ .inner-page .about-hero, .inner-page .media-hero, .inner-page .media-detail-hero, .inner-page .network-hero, .inner-page .ow-hero, .inner-page .kr-hero, .inner-page .kr-enquiry-hero{ height:500px!important; min-height:500px!important; overflow:hidden!important; } .inner-page .about-hero-inner, .inner-page .media-hero-inner, .inner-page .network-hero-inner, .inner-page .ow-hero-inner, .inner-page .kr-hero-inner, .inner-page .media-detail-hero .hero-inner, .inner-page .kr-enquiry-hero .inner{ height:500px!important; min-height:500px!important; width:calc(100% - 32px)!important; max-width:none!important; padding:0!important; display:flex!important; align-items:flex-end!important; box-sizing:border-box!important; } .inner-page .about-hero-copy, .inner-page .media-hero-copy, .inner-page .network-hero-copy, .inner-page .ow-hero-inner>div:first-child, .inner-page .kr-hero-inner, .inner-page .kr-enquiry-copy{ width:100%!important; max-width:330px!important; padding:0 0 38px!important; margin:0!important; box-sizing:border-box!important; } .inner-page .about-hero-title, .inner-page .about-hero h1, .inner-page .media-hero-copy h1, .inner-page .media-detail-hero .hero-inner h1, .inner-page .network-hero-copy h1, .inner-page .ow-hero h1, .inner-page .kr-hero h1, .inner-page .kr-enquiry-copy h1{ font-size:32px!important; line-height:.98!important; letter-spacing:-.45px!important; max-width:330px!important; margin:7px 0 10px!important; overflow-wrap:normal!important; word-break:normal!important; } .inner-page .about-hero-desc, .inner-page .about-hero-copy p, .inner-page .media-hero-copy p, .inner-page .media-detail-hero .hero-inner p, .inner-page .network-hero-copy p, .inner-page .ow-hero-copy, .inner-page .kr-hero p, .inner-page .kr-enquiry-copy p{ font-size:12px!important; line-height:1.4!important; max-width:325px!important; margin:0 0 12px!important; } .inner-page .about-kicker, .inner-page .kr-kicker, .inner-page .media-hero-copy .tag, .inner-page .network-hero-copy .tag, .inner-page .ow-kicker, .inner-page .about-tag{ font-size:8px!important; line-height:1.15!important; letter-spacing:.1em!important; } /* Keep CTA buttons neat and aligned in one row where they fit. */ .inner-page .about-hero-actions, .inner-page .kr-actions, .inner-page .ow-hero .ow-btn, .inner-page .network-hero .network-btn{ display:flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:8px!important; } .inner-page .about-hero-actions a, .inner-page .kr-actions .kr-btn, .inner-page .ow-hero .ow-btn, .inner-page .network-hero .network-btn{ min-width:0!important; width:auto!important; max-width:100%!important; padding:10px 13px!important; font-size:9px!important; line-height:1.1!important; white-space:nowrap!important; } /* Media Solutions hero has several paragraphs: keep the stack compact. */ .inner-page .media-hero-copy p + p{margin-top:4px!important} .inner-page .media-quote{font-size:10px!important;line-height:1.25!important;margin-top:8px!important} /* Network side/stats should not steal the banner text area on small screens. */ .inner-page .network-hero-side{display:none!important} .inner-page .network-stats{display:none!important} /* Enquiry hero: text stays readable and CTA/steps don't collide. */ .inner-page .kr-enquiry-hero .inner{display:block!important;position:relative!important} .inner-page .kr-enquiry-copy{padding-top:150px!important;padding-bottom:28px!important} .inner-page .kr-enquiry-visual{position:absolute!important;inset:0!important;min-height:500px!important;z-index:0!important} .inner-page .kr-enquiry-copy{z-index:3!important} .inner-page .kr-enquiry-steps{grid-template-columns:repeat(3,1fr)!important;margin-top:16px!important} .inner-page .kr-enquiry-step{padding:8px 7px!important} .inner-page .kr-enquiry-step b{font-size:17px!important;margin-bottom:3px!important} .inner-page .kr-enquiry-step span{font-size:8px!important;line-height:1.2!important} /* Detail-media heroes use the same compact baseline. */ .inner-page .media-detail-hero .hero-inner{align-items:flex-end!important} } @media (max-width:420px){ .inner-page .about-hero, .inner-page .media-hero, .inner-page .media-detail-hero, .inner-page .network-hero, .inner-page .ow-hero, .inner-page .kr-hero, .inner-page .kr-enquiry-hero, .inner-page .about-hero-inner, .inner-page .media-hero-inner, .inner-page .network-hero-inner, .inner-page .ow-hero-inner, .inner-page .kr-hero-inner, .inner-page .media-detail-hero .hero-inner{ height:500px!important; min-height:500px!important; } .inner-page .about-hero-title, .inner-page .about-hero h1, .inner-page .media-hero-copy h1, .inner-page .media-detail-hero .hero-inner h1, .inner-page .network-hero-copy h1, .inner-page .ow-hero h1, .inner-page .kr-hero h1, .inner-page .kr-enquiry-copy h1{font-size:29px!important;line-height:1!important} .inner-page .about-hero-desc, .inner-page .about-hero-copy p, .inner-page .media-hero-copy p, .inner-page .media-detail-hero .hero-inner p, .inner-page .network-hero-copy p, .inner-page .ow-hero-copy, .inner-page .kr-hero p, .inner-page .kr-enquiry-copy p{font-size:11px!important;line-height:1.38!important} .inner-page .about-hero-actions a, .inner-page .kr-actions .kr-btn, .inner-page .ow-hero .ow-btn, .inner-page .network-hero .network-btn{padding:9px 11px!important;font-size:8.5px!important} } /* ========================================================= FINAL USER FIXES — FOOTER LINK / MOBILE NAV / FAVICON / CHAT ========================================================= */ .footer-dev-link{ color:inherit!important; text-decoration:none!important; font-weight:800!important; transition:color .2s ease!important; } .footer-dev-link:hover, .footer-dev-link:focus-visible{ color:var(--red)!important; text-decoration:underline!important; text-underline-offset:3px!important; } /* Bring the Media Solutions arrow visually closer to its label. */ .header .nav .nav-dropdown > .nav-arrow{ margin-left:-4px!important; padding-left:0!important; padding-right:5px!important; } /* One timestamp only in the chatbot: keep the Today marker and hide the repeated per-message time labels. */ .chat-panel .msg-time{display:none!important;} .chat-panel .chat-day{display:block!important;} /* Media detail CTA: give the horizontal stats/scroll strip a little breathing room. */ .media-detail-hero + .section + .stats + .cta, body.inner-page .stats-strip + .cta{ margin-top:28px!important; } /* Keep enquiry heading compact and prevent any text collision. */ .kr-enquiry-copy h1, .kr-side-message h2{ overflow-wrap:anywhere!important; word-break:normal!important; } @media(max-width:760px){ /* Remove the white logo pill/background on mobile only. */ .header .site-logo{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; border-radius:0!important; } /* Mobile menu remains a rounded nav panel, but individual links do not get an extra white block behind them. */ .header .nav, .header .nav.open{ border-radius:20px!important; background:#efefef!important; box-shadow:0 16px 38px rgba(0,0,0,.18)!important; } .header .nav > a:not(.nav-cta), .header .nav .nav-dropdown, .header .nav .nav-dropdown > a{ background:transparent!important; background-color:transparent!important; box-shadow:none!important; } .header .nav > a:not(.nav-cta):hover, .header .nav > a:not(.nav-cta):focus-visible, .header .nav > a:not(.nav-cta).active, .header .nav > a:not(.nav-cta)[aria-current="page"], .header .nav .nav-dropdown.open, .header .nav .nav-dropdown.open > a{ background:transparent!important; box-shadow:none!important; color:var(--red)!important; } /* Closer Media Solutions arrow on mobile. */ .header .nav .nav-dropdown{ grid-template-columns:minmax(0,1fr) 24px!important; } .header .nav .nav-dropdown > .nav-arrow, .header .nav .nav-dropdown > .nav-arrow:hover, .header .nav .nav-dropdown > .nav-arrow:focus, .header .nav .nav-dropdown > .nav-arrow:active{ width:24px!important; min-width:24px!important; padding:4px 1px!important; margin-left:-2px!important; justify-self:start!important; } /* The mobile Enquire Now action is a true pill and stays inside the menu. */ .header .nav-cta-drawer-box{ margin-top:8px!important; padding-top:8px!important; background:transparent!important; } .header .nav-cta-drawer, .header .nav-cta-drawer:visited, .header .nav-cta-drawer:hover, .header .nav-cta-drawer:focus, .header .nav-cta-drawer:focus-visible, .header .nav-cta-drawer:active{ width:calc(100% - 8px)!important; margin:0 auto!important; min-height:42px!important; padding:11px 16px!important; border-radius:999px!important; background:var(--red)!important; box-shadow:0 7px 16px rgba(229,27,35,.24)!important; } /* Compact enquiry hero heading on phones. */ .kr-page .kr-enquiry-copy{ padding:38px 16px 24px!important; } .kr-page .kr-enquiry-copy h1{ font-size:clamp(31px,8.8vw,39px)!important; line-height:.9!important; letter-spacing:-.3px!important; margin:8px 0 13px!important; } .kr-page .kr-enquiry-copy p{ font-size:11px!important; line-height:1.42!important; margin:0!important; max-width:340px!important; } .kr-page .kr-enquiry-steps{ margin-top:14px!important; gap:7px!important; } .kr-side-message h2{ font-size:clamp(28px,8vw,36px)!important; line-height:.94!important; margin:7px 0 10px!important; } /* More breathing room above OOH / Transit enquiry banners. */ body.inner-page .stats-strip + .cta{ margin-top:20px!important; } /* Prevent CTA copy from touching the edges or overlapping buttons. */ body.inner-page .cta-inner{ gap:16px!important; padding-top:25px!important; padding-bottom:25px!important; } body.inner-page .cta-inner > div{ min-width:0!important; width:100%!important; } body.inner-page .cta-inner h2{ max-width:100%!important; overflow-wrap:anywhere!important; } } @media(max-width:420px){ .header .nav-cta-drawer{font-size:12px!important;} .kr-page .kr-enquiry-copy h1{font-size:32px!important;} .kr-page .kr-enquiry-copy p{font-size:10.5px!important;} body.inner-page .cta-inner h2{font-size:32px!important;} body.inner-page .cta-inner p{font-size:10.5px!important;line-height:1.48!important;} } /* ===== FINAL USER CORRECTION — LOGO + ENQUIRY OVERLAP + MEDIA ARROW ===== */ /* Keep the original white logo panel on mobile; do not make it transparent. */ @media (max-width:760px){ .header .site-logo{ background:#fff!important; border:1px solid #d9dde1!important; border-radius:7px!important; padding:3px 7px!important; box-shadow:0 2px 8px rgba(18,20,22,.08)!important; } .header .site-logo img{ filter:none!important; opacity:1!important; visibility:visible!important; } /* Enquiry form-side message: give the copy its own space so the background image/caption can never sit on top of the paragraph. */ .kr-page .kr-form-area .kr-side-message{ min-height:520px!important; padding:25px 20px 205px!important; box-sizing:border-box!important; } .kr-page .kr-form-area .kr-side-message .side-copy{ position:relative!important; z-index:5!important; width:100%!important; max-width:100%!important; } .kr-page .kr-form-area .kr-side-message h2{ font-size:31px!important; line-height:.98!important; margin:8px 0 13px!important; max-width:100%!important; } .kr-page .kr-form-area .kr-side-message p{ font-size:11.5px!important; line-height:1.48!important; max-width:100%!important; margin:0!important; } .kr-page .kr-form-area .kr-side-message img{ height:180px!important; bottom:0!important; z-index:1!important; } .kr-page .kr-form-area .kr-side-caption{ left:20px!important; right:20px!important; bottom:17px!important; z-index:6!important; font-size:20px!important; line-height:.98!important; } } /* Desktop: keep the Media Solutions down arrow immediately beside its label. */ @media (min-width:1051px){ .header .nav .nav-dropdown{ gap:0!important; } .header .nav .nav-dropdown > .nav-arrow{ margin-left:-7px!important; padding:5px 3px 5px 0!important; width:auto!important; min-width:0!important; } } /* ===== FINAL USER FIX — ENQUIRY DESKTOP/MOBILE + CHAT TIMESTAMP + FOOTER LINK ===== */ /* Desktop enquiry side panel: keep the full words intact and prevent the heading from breaking through the panel. */ @media (min-width: 1101px){ .kr-page .kr-form-area .kr-side-message h2{ font-size:42px!important; line-height:.96!important; overflow-wrap:normal!important; word-break:normal!important; white-space:normal!important; max-width:100%!important; } .kr-page .kr-form-area .kr-side-message p{ overflow-wrap:normal!important; word-break:normal!important; max-width:100%!important; } } /* Tablet/desktop widths: never allow the enquiry heading to split a word. */ @media (min-width: 761px) and (max-width: 1100px){ .kr-page .kr-form-area .kr-side-message h2{ font-size:40px!important; line-height:.96!important; overflow-wrap:normal!important; word-break:normal!important; } } /* Mobile enquiry block: reduce the excessive empty gap while keeping the paragraph, background image and campaign caption separated. */ @media (max-width:760px){ .kr-page .kr-form-area .kr-side-message{ min-height:470px!important; padding:25px 20px 175px!important; } .kr-page .kr-form-area .kr-side-message img{ height:155px!important; } .kr-page .kr-form-area .kr-side-caption{ bottom:14px!important; font-size:19px!important; line-height:.97!important; } .kr-page .kr-form-area .kr-side-message h2{ overflow-wrap:normal!important; word-break:normal!important; } } /* Keep exactly one time marker in the chatbot: the Today marker remains; individual message timestamps are removed from layout as well as hidden. */ .chat-panel .msg-time, .chat-panel .bot-time, .chat-panel .user-time{ display:none!important; } /* Tcongs Infotech should always appear as an underlined footer link. */ .footer-dev-link, .footer-dev-link:visited{ text-decoration:underline!important; text-underline-offset:3px!important; } /* Desktop Media Solutions arrow: move it closer to the label. */ @media (min-width:1051px){ .header .nav .nav-dropdown > .nav-arrow{ right:15px!important; margin-left:0!important; } } /* ===== FINAL ENQUIRY + CHAT CLEANUP ===== */ /* Desktop: keep the complete enquiry phrase inside the left panel. */ @media (min-width:1101px){ .kr-page .kr-form-area .kr-side-message h2{ font-size:42px!important; line-height:.95!important; letter-spacing:-.7px!important; max-width:100%!important; overflow:visible!important; white-space:normal!important; } .kr-page .kr-form-area .kr-side-message .side-copy{ min-width:0!important; max-width:100%!important; } } /* Mobile: bring the campaign image/caption closer to the enquiry copy. */ @media (max-width:760px){ .kr-page .kr-form-area .kr-side-message{ min-height:410px!important; padding:25px 20px 145px!important; } .kr-page .kr-form-area .kr-side-message img{ height:135px!important; } .kr-page .kr-form-area .kr-side-caption{ bottom:12px!important; font-size:18px!important; line-height:.97!important; } } /* ===== LATEST USER FIX — MOBILE HEADER / ENQUIRY / MAP / NAV POLISH ===== */ /* Mobile header: keep the original white logo panel, but make it fully opaque so the hero artwork can never show through the logo. */ @media (max-width:760px){ .header .site-logo{ background:#fff!important; border-color:#d9dde1!important; box-shadow:0 5px 16px rgba(0,0,0,.12)!important; } .header .site-logo img{ opacity:1!important; visibility:visible!important; filter:none!important; } /* Keep the mobile header pill centered with a clean, stable width. */ .header .nav-wrap{ width:calc(100% - 20px)!important; max-width:none!important; margin-left:auto!important; margin-right:auto!important; } } /* Desktop enquiry heading: make the complete phrase fit inside the left panel without clipping the final word. */ @media (min-width:1101px){ .kr-page .kr-form-area .kr-side-message h2{ font-size:35px!important; line-height:.97!important; letter-spacing:-.55px!important; max-width:100%!important; width:100%!important; overflow:visible!important; white-space:normal!important; overflow-wrap:normal!important; word-break:normal!important; } } @media (min-width:761px) and (max-width:1100px){ .kr-page .kr-form-area .kr-side-message h2{ font-size:34px!important; line-height:.98!important; max-width:100%!important; overflow:visible!important; white-space:normal!important; } } /* View on Map: keep it centered inside the office card with breathing room so it never sits against/touches the bottom edge. */ .kr-office-info .kr-office-btn{ align-self:center!important; margin-top:14px!important; margin-bottom:10px!important; position:relative!important; } @media (max-width:600px){ .kr-office-info .kr-office-btn{ align-self:center!important; margin-top:14px!important; margin-bottom:8px!important; } } /* Media Solutions dropdown arrow: slightly higher and visually centered with the label instead of sitting low. */ @media (min-width:761px){ .header .nav .nav-dropdown > .nav-arrow{ transform:translateY(-1px)!important; } } /* About banner buttons: add a little breathing room below the copy so the buttons do not visually touch the text/banner content. */ .about-hero-actions{ margin-top:10px!important; } @media (max-width:760px){ .about-hero-actions{ margin-top:10px!important; padding-bottom:4px!important; } } /* ===== LATEST USER FIX — MOBILE PILL NAV + MEDIA ARROW STATE + ABOUT BUTTON GAP ===== */ @media (max-width:760px){ /* Keep the mobile header as the compact rounded pill shown in the reference. The pill is fully opaque so the hero artwork cannot bleed through it. */ .header{ position:absolute!important; top:0!important; left:0!important; right:0!important; width:100%!important; height:70px!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; } .header .nav-wrap{ width:calc(100% - 32px)!important; height:54px!important; min-height:54px!important; margin:8px auto 0!important; padding:5px 8px!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; border-radius:12px!important; background:rgba(222,222,222,.97)!important; border:1px solid rgba(255,255,255,.72)!important; box-shadow:0 5px 18px rgba(0,0,0,.16)!important; overflow:visible!important; } .header .site-logo{ flex:0 0 auto!important; margin:0!important; background:#fff!important; border:1px solid #d9dde1!important; border-radius:7px!important; padding:3px 7px!important; box-shadow:0 2px 8px rgba(18,20,22,.08)!important; } .header .site-logo img{ width:108px!important; max-width:108px!important; height:auto!important; max-height:38px!important; display:block!important; opacity:1!important; visibility:visible!important; filter:none!important; } .header .nav-toggle{ flex:0 0 38px!important; width:38px!important; height:38px!important; min-width:38px!important; padding:0!important; margin:0!important; border-radius:50%!important; background:#fff!important; box-shadow:0 2px 8px rgba(0,0,0,.12)!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:4px!important; } .header .nav-toggle span{width:20px!important;height:2px!important;background:#222!important} } /* Desktop Media Solutions arrow: keep it slightly higher and flip it upward only while the dropdown is open; closed state remains a downward arrow. */ @media (min-width:761px){ .header .nav .nav-dropdown > .nav-arrow{ position:relative!important; top:-2px!important; transform:translateY(-2px)!important; transform-origin:center!important; } .header .nav .nav-dropdown.open > .nav-arrow{ transform:translateY(-3px) rotate(180deg)!important; } } /* About banner: keep the button comfortably separated from the copy. */ .about-hero-actions{margin-top:18px!important;} @media (max-width:760px){ .about-hero-actions{margin-top:16px!important;padding-bottom:6px!important;} } /* ===== FINAL REQUEST: MOBILE TRANSPARENT PILL + CHAT CONTACT + LEADERSHIP FIT + MEDIA ARROW ===== */ @media (max-width:760px){ /* Light transparent pill header: the logo panel itself remains unchanged. */ .header{ position:absolute!important; top:8px!important; left:14px!important; right:auto!important; width:calc(100% - 28px)!important; height:58px!important; max-width:none!important; border:1px solid rgba(255,255,255,.42)!important; border-radius:30px!important; background:rgba(255,255,255,.22)!important; backdrop-filter:blur(12px)!important; -webkit-backdrop-filter:blur(12px)!important; box-shadow:0 8px 24px rgba(0,0,0,.10)!important; overflow:visible!important; } .header.scrolled{ position:fixed!important; top:8px!important; left:14px!important; width:calc(100% - 28px)!important; background:rgba(255,255,255,.30)!important; border-color:rgba(255,255,255,.55)!important; } .header .nav-wrap{ width:100%!important; height:100%!important; max-width:none!important; padding:5px 8px!important; box-sizing:border-box!important; } .header .site-logo img{ width:108px!important; max-height:34px!important; } .header .nav-toggle{ width:40px!important; height:40px!important; margin-left:auto!important; border-radius:50%!important; background:rgba(255,255,255,.72)!important; border:1px solid rgba(20,20,20,.10)!important; box-shadow:0 4px 14px rgba(0,0,0,.10)!important; } .header .nav-toggle span{background:#111!important;} /* Drawer remains readable; only the header pill is transparent. */ .header .nav{ top:62px!important; } /* Leadership cards: same footprint, full images without cropping. */ .about-lead-grid .leader-card, .about-lead-grid .leader-card:nth-child(2){ align-self:stretch!important; } } @media (min-width:761px){ /* Equal leadership card height and uncropped portraits. */ .about-lead-grid{ align-items:stretch!important; } .about-lead-grid .leader-card, .about-lead-grid .leader-card:nth-child(2){ height:430px!important; min-height:430px!important; grid-template-columns:minmax(250px,42%) minmax(0,1fr)!important; overflow:hidden!important; } .about-lead-grid .leader-card img, .about-lead-grid .leader-card:nth-child(2) img{ width:100%!important; height:100%!important; min-height:0!important; object-fit:contain!important; object-position:center!important; background:#f4f4f4!important; transform:none!important; } .about-lead-grid .leader-copy{ height:100%!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; justify-content:flex-start!important; } .about-lead-grid .leader-visible p{ margin-bottom:10px!important; } } /* Media Solutions arrow follows the dropdown state: down when closed, up when open. */ .header .nav .nav-dropdown>.nav-arrow{ transition:transform .25s ease,color .25s ease!important; transform:rotate(0deg)!important; } .header .nav .nav-dropdown.open>.nav-arrow{ transform:rotate(180deg)!important; color:var(--red)!important; } /* ===== FINAL MOBILE HEADER + MEDIA ARROW STATE FIX ===== */ @media (max-width:760px){ /* Keep the mobile pill above the hero/background and make it a true viewport-width pill. */ .header{ position:fixed!important; top:8px!important; left:14px!important; right:auto!important; width:calc(100vw - 28px)!important; max-width:none!important; min-width:0!important; box-sizing:border-box!important; z-index:10000!important; isolation:isolate!important; transform:none!important; background:rgba(255,255,255,.22)!important; border:1px solid rgba(255,255,255,.48)!important; border-radius:30px!important; overflow:visible!important; } .header.scrolled{ top:8px!important; left:14px!important; width:calc(100vw - 28px)!important; background:rgba(255,255,255,.24)!important; } .header .nav-wrap{ position:relative!important; width:100%!important; max-width:none!important; min-width:0!important; height:58px!important; padding:5px 8px!important; box-sizing:border-box!important; z-index:2!important; } /* The logo panel stays white; only the outer pill is transparent. */ .header .site-logo{ position:absolute!important; left:50%!important; top:50%!important; transform:translate(-50%,-50%)!important; z-index:3!important; background:#fff!important; border:1px solid rgba(18,20,22,.12)!important; border-radius:7px!important; padding:5px 10px!important; height:auto!important; margin:0!important; } .header .site-logo img{ display:block!important; width:108px!important; max-width:108px!important; max-height:34px!important; height:auto!important; } .header .nav-toggle{ position:absolute!important; right:8px!important; top:50%!important; transform:translateY(-50%)!important; z-index:4!important; width:40px!important; height:40px!important; margin:0!important; border-radius:50%!important; background:rgba(255,255,255,.72)!important; } .header .nav{ z-index:5!important; } } /* Desktop: hover/open/focus all use an upward arrow; closed state stays downward. */ @media (min-width:761px){ .header .nav .nav-dropdown > .nav-arrow{ transform:translateY(-1px) rotate(0deg)!important; transition:transform .22s ease,color .22s ease!important; } .header .nav .nav-dropdown:hover > .nav-arrow, .header .nav .nav-dropdown:focus-within > .nav-arrow, .header .nav .nav-dropdown.open > .nav-arrow, .header .nav .nav-dropdown > .nav-arrow[aria-expanded="true"]{ transform:translateY(-3px) rotate(180deg)!important; color:var(--red)!important; } } /* Mobile: arrow also flips only when the dropdown is actually open. */ @media (max-width:760px){ .header .nav .nav-dropdown > .nav-arrow{ transform:translateY(0) rotate(0deg)!important; transition:transform .22s ease,color .22s ease!important; } .header .nav .nav-dropdown.open > .nav-arrow, .header .nav .nav-dropdown > .nav-arrow[aria-expanded="true"]{ transform:translateY(-2px) rotate(180deg)!important; color:var(--red)!important; } } /* ===== USER FINAL MOBILE HEADER + LEADERSHIP IMAGE FIX ===== */ @media (max-width:760px){ /* Match the requested mobile pill: light transparent outer pill, white logo panel left, menu button right. */ .header{ position:fixed!important; top:8px!important; left:14px!important; right:auto!important; width:calc(100vw - 28px)!important; height:58px!important; max-width:none!important; box-sizing:border-box!important; border-radius:30px!important; background:rgba(255,255,255,.20)!important; border:1px solid rgba(255,255,255,.42)!important; box-shadow:0 5px 18px rgba(0,0,0,.10)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; z-index:10000!important; overflow:visible!important; } .header.scrolled{ top:8px!important; left:14px!important; width:calc(100vw - 28px)!important; background:rgba(255,255,255,.20)!important; border-bottom-color:rgba(255,255,255,.42)!important; } .header .nav-wrap{ position:relative!important; width:100%!important; height:56px!important; padding:5px 8px!important; box-sizing:border-box!important; } /* Keep the white logo panel; move it to the left like the requested reference. */ .header .site-logo{ position:absolute!important; left:10px!important; top:50%!important; transform:translateY(-50%)!important; margin:0!important; z-index:3!important; display:flex!important; align-items:center!important; justify-content:center!important; background:#fff!important; border:1px solid rgba(18,20,22,.12)!important; border-radius:7px!important; padding:5px 10px!important; height:auto!important; box-shadow:0 2px 8px rgba(0,0,0,.08)!important; } .header .site-logo img{ width:108px!important; max-width:108px!important; max-height:34px!important; height:auto!important; display:block!important; } .header .nav-toggle{ position:absolute!important; right:8px!important; top:50%!important; transform:translateY(-50%)!important; width:40px!important; height:40px!important; margin:0!important; z-index:4!important; border-radius:50%!important; background:rgba(255,255,255,.78)!important; border:1px solid rgba(20,20,20,.10)!important; box-shadow:0 4px 14px rgba(0,0,0,.10)!important; } .header .nav-toggle span{background:#111!important;} /* Do not let the opened drawer sit over the pill controls. */ .header .nav{z-index:5!important;} /* Leadership: preserve the complete photos and do not add an artificial white image background. */ .about-lead-grid .leader-card, .about-lead-grid .leader-card:nth-child(2){ overflow:hidden!important; align-self:stretch!important; } .about-lead-grid .leader-card img, .about-lead-grid .leader-card:nth-child(2) img{ width:100%!important; height:260px!important; min-height:260px!important; object-fit:contain!important; object-position:center center!important; background:transparent!important; transform:none!important; margin:0!important; display:block!important; } .about-lead-grid .leader-card:nth-child(2) img:hover, .about-lead-grid .leader-card img:hover{transform:none!important;} } @media (min-width:761px){ /* Desktop leadership images: no CSS background, no crop, equal card footprint. */ .about-lead-grid .leader-card img, .about-lead-grid .leader-card:nth-child(2) img{ background:transparent!important; object-fit:contain!important; object-position:center center!important; transform:none!important; } } /* ===== FINAL USER UPDATE — SOCIAL LINKS / COMPACT LEADERSHIP / TRANSPARENT MOBILE PILL ===== */ .social-text a{ display:inline-flex!important; align-items:center!important; justify-content:center!important; color:inherit!important; text-decoration:none!important; margin-left:10px!important; transition:color .2s ease, transform .2s ease!important; } .social-text a:hover{color:var(--red)!important;transform:translateY(-1px)!important;} @media (min-width:761px){ /* Keep both leadership boxes equal but more compact. Never crop either portrait. */ .about-lead-grid .leader-card, .about-lead-grid .leader-card:nth-child(2){ height:350px!important; min-height:350px!important; } .about-lead-grid .leader-card img, .about-lead-grid .leader-card:nth-child(2) img{ height:100%!important; object-fit:contain!important; object-position:center!important; background:transparent!important; } .about-lead-grid .leader-copy{ padding:24px!important; } .about-lead-grid .leader-visible p{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:4!important; overflow:hidden!important; } } @media (max-width:760px){ /* Outer mobile pill is transparent. Remove the separate white logo panel too. */ .header, .header.scrolled{ background:rgba(255,255,255,.18)!important; border-color:rgba(255,255,255,.35)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; } .header .site-logo{ background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; } .header .site-logo img{ content:url('../assets/images/header-logo-transparent.png')!important; background:transparent!important; } .header .nav-toggle{ background:rgba(255,255,255,.62)!important; } } /* ===== FINAL USER FIX 2026-09-26 — CLEAN MOBILE HEADER + COMPACT LEADERSHIP ===== */ @media (max-width:760px){ /* Remove the large background from the mobile header pill. Keep only the transparent glass outline, white logo panel and hamburger control. */ .header, .header.scrolled{ background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .header .nav-wrap{ background:transparent!important; border:0!important; box-shadow:none!important; } /* Restore the white logo panel only. */ .header .site-logo{ background:#fff!important; border:1px solid rgba(18,20,22,.12)!important; border-radius:7px!important; padding:5px 10px!important; box-shadow:0 2px 8px rgba(0,0,0,.10)!important; } .header .site-logo img{ content:url('../assets/images/header-logo.png')!important; background:transparent!important; width:108px!important; max-width:108px!important; max-height:34px!important; } .header .nav-toggle{ background:rgba(255,255,255,.78)!important; border:1px solid rgba(20,20,20,.10)!important; box-shadow:0 4px 14px rgba(0,0,0,.10)!important; } } @media (min-width:761px){ /* Match the compact, well-fitted leadership treatment of the Kevin card. Both portraits keep their full source image; no artificial background and no crop. */ .about-lead-grid .leader-card, .about-lead-grid .leader-card:nth-child(2){ height:350px!important; min-height:350px!important; grid-template-columns:minmax(0,36%) minmax(0,64%)!important; gap:0!important; overflow:hidden!important; } .about-lead-grid .leader-card img, .about-lead-grid .leader-card:nth-child(2) img{ width:100%!important; height:100%!important; min-height:0!important; object-fit:contain!important; object-position:center center!important; background:transparent!important; margin:0!important; } .about-lead-grid .leader-copy{ padding:22px 24px!important; min-width:0!important; } .about-lead-grid .leader-copy h3{ margin:3px 0 8px!important; } .about-lead-grid .leader-copy .leader-role{ margin:-2px 0 9px!important; } .about-lead-grid .leader-visible p{ -webkit-line-clamp:3!important; line-height:1.42!important; margin-bottom:8px!important; } } /* ===== FINAL USER FIX — LEADERSHIP IMAGE-FIT + MOBILE PILL SCROLL ===== */ @media (min-width:761px){ /* Each leadership card follows its own source-image proportions instead of forcing both portraits into one fixed-height box. */ .about-lead-grid .leader-card, .about-lead-grid .leader-card:nth-child(2){ height:auto!important; min-height:0!important; grid-template-columns:minmax(0,40%) minmax(0,60%)!important; align-items:start!important; overflow:hidden!important; } .about-lead-grid .leader-card img, .about-lead-grid .leader-card:nth-child(2) img{ width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; aspect-ratio:auto!important; object-fit:contain!important; object-position:center top!important; background:transparent!important; display:block!important; align-self:start!important; } .about-lead-grid .leader-copy{ padding:22px 24px!important; align-self:start!important; } .about-lead-grid .leader-visible p{ display:block!important; -webkit-line-clamp:unset!important; overflow:visible!important; margin:0 0 9px!important; } } @media (max-width:760px){ /* Keep the pill inside the viewport, with the logo panel and menu control sitting inside the same glass pill. */ .header, .header.scrolled{ position:fixed!important; top:0!important; left:0!important; right:0!important; width:100%!important; height:68px!important; z-index:1400!important; background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; transition:transform .32s ease,opacity .25s ease!important; transform:translateY(0)!important; } .header.nav-scroll-hidden{ transform:translateY(-110%)!important; opacity:0!important; pointer-events:none!important; } .header .nav-wrap{ width:calc(100% - 20px)!important; height:54px!important; margin:7px 10px 0!important; padding:5px 7px!important; box-sizing:border-box!important; border-radius:28px!important; background:rgba(255,255,255,.16)!important; border:1px solid rgba(255,255,255,.38)!important; box-shadow:0 8px 25px rgba(0,0,0,.10)!important; backdrop-filter:blur(8px)!important; -webkit-backdrop-filter:blur(8px)!important; } .header .site-logo{ display:flex!important; align-items:center!important; justify-content:center!important; height:42px!important; padding:4px 10px!important; box-sizing:border-box!important; border-radius:7px!important; background:#fff!important; border:1px solid rgba(18,20,22,.12)!important; box-shadow:0 2px 8px rgba(0,0,0,.10)!important; z-index:1403!important; } .header .site-logo img{ content:url('../assets/images/header-logo.png')!important; width:108px!important; max-width:108px!important; max-height:34px!important; object-fit:contain!important; background:transparent!important; } .header .nav-toggle{ width:42px!important; height:42px!important; min-width:42px!important; margin-left:auto!important; border-radius:50%!important; background:rgba(255,255,255,.78)!important; border:1px solid rgba(20,20,20,.10)!important; box-shadow:0 4px 14px rgba(0,0,0,.10)!important; z-index:1404!important; } /* Mobile leadership cards also size the portrait from the source image. */ .about-lead-grid .leader-card, .about-lead-grid .leader-card:nth-child(2){ display:grid!important; grid-template-columns:1fr!important; height:auto!important; min-height:0!important; overflow:hidden!important; } .about-lead-grid .leader-card img, .about-lead-grid .leader-card:nth-child(2) img{ width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; aspect-ratio:auto!important; object-fit:contain!important; object-position:center top!important; background:transparent!important; transform:none!important; margin:0!important; } .about-lead-grid .leader-copy{ padding:16px!important; } .about-lead-grid .leader-visible p{ display:block!important; -webkit-line-clamp:unset!important; overflow:visible!important; margin-bottom:8px!important; } } /* Final social brand icons — Facebook, LinkedIn, Instagram */ .social-text a .social-icon{display:grid!important;place-items:center!important;line-height:1!important} .social-text .social-icon svg{width:15px!important;height:15px!important;display:block!important;fill:currentColor!important} .social-text .social-facebook svg{width:14px!important;height:14px!important} .social-text .social-linkedin svg{width:15px!important;height:15px!important} .social-text .social-instagram svg{width:15px!important;height:15px!important} @media(max-width:520px){.social-text .social-icon svg{width:14px!important;height:14px!important}} /* FINAL USER REQUEST — slightly smaller Krishna logo inside the mobile nav pill. */ @media (max-width:760px){ .header .site-logo{ height:40px!important; padding:3px 8px!important; } .header .site-logo img{ width:98px!important; max-width:98px!important; max-height:31px!important; } } @media (max-width:380px){ .header .site-logo img{ width:94px!important; max-width:94px!important; max-height:30px!important; } }