/* Majeeth & Co. motion and finishing layer */
:root{color-scheme:dark}
html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{isolation:isolate;text-rendering:optimizeLegibility}

/* One square, transparent logo asset is used consistently throughout the site. */
.brand{gap:14px}
.brand img,.footer-brand img{width:50px;height:50px;flex:0 0 50px;object-fit:contain;aspect-ratio:1}
.about-visual-mark{width:122px;height:122px;aspect-ratio:1;object-fit:contain;border-radius:50%;box-shadow:none;filter:drop-shadow(0 18px 36px rgba(0,0,0,.34))}

/* A fine gold progress trace follows the reader through the page. */
.site-header{isolation:isolate}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;transform:scaleX(var(--scroll-progress,0));transform-origin:left center;background:linear-gradient(90deg,rgba(216,175,40,.18),var(--gold),var(--champagne));opacity:.88;pointer-events:none}

/* Slow, low-contrast light drift gives dark surfaces a living architectural depth. */
.section-dark{isolation:isolate;background:var(--navy)}
.section-dark::before,.section-dark::after{content:"";position:absolute;inset:0;pointer-events:none}
.section-dark::before{z-index:0;inset:-18%;background:radial-gradient(ellipse at 18% 24%,rgba(216,175,40,.15),transparent 31%),radial-gradient(ellipse at 82% 66%,rgba(71,111,154,.15),transparent 38%),radial-gradient(ellipse at 50% 110%,rgba(216,175,40,.055),transparent 42%);background-size:150% 150%;animation:sectionLightDrift 31s ease-in-out infinite alternate}
.section-dark::after{z-index:1;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:92px 92px;mask-image:radial-gradient(ellipse at 35% 48%,rgba(0,0,0,.8),transparent 77%);opacity:.62;animation:architectureDrift 46s linear infinite}
.section-dark>.container{position:relative;z-index:2}
@keyframes sectionLightDrift{0%{background-position:0% 35%}100%{background-position:100% 70%}}
@keyframes architectureDrift{0%{background-position:0 0,0 0}100%{background-position:0 92px,92px 0}}

/* Preserve the authentic Bengaluru photograph while letting light move softly above it. */
.hero{isolation:isolate}
.hero-media{transform:scale(1.045);transform-origin:center;animation:citySlowDrift 48s ease-in-out infinite alternate;will-change:transform}
.hero::before{content:"";position:absolute;inset:-14%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 72% 28%,rgba(216,175,40,.2),transparent 32%),radial-gradient(ellipse at 28% 74%,rgba(46,103,150,.2),transparent 38%);mix-blend-mode:screen;opacity:.74;animation:heroLightDrift 24s ease-in-out infinite alternate}
@keyframes citySlowDrift{0%{transform:scale(1.045) translate3d(0,0,0)}100%{transform:scale(1.09) translate3d(-.7%,.25%,0)}}
@keyframes heroLightDrift{0%{transform:translate3d(-1.5%,0,0);opacity:.5}100%{transform:translate3d(1.5%,1%,0);opacity:.88}}

/* Short, restrained copy rotation: readable as text and not announced repeatedly. */
.hero-motion-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:-13px 0 27px;color:#c9ced6;font-size:10px;line-height:1.6;letter-spacing:.16em;text-transform:uppercase}
.hero-motion-line [data-changing-text]{display:inline-block;min-width:23ch;color:var(--champagne);font-weight:600;transition:opacity .32s ease,transform .32s ease}
.hero-motion-line [data-changing-text].is-changing{opacity:0;transform:translateY(-.35em)}

/* First-screen text enters in quick, readable beats; content stays visible without JS. */
.js .hero .eyebrow,.js .hero h1,.js .hero-copy,.js .hero-motion-line,.js .hero-actions,.js .hero-meta{opacity:0;animation:heroTextIn .72s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero .eyebrow{animation-delay:.06s}
.js .hero h1{animation-delay:.14s}
.js .hero-copy{animation-delay:.29s}
.js .hero-motion-line{animation-delay:.38s}
.js .hero-actions{animation-delay:.47s}
.js .hero-meta{animation-delay:.62s}
.js .page-hero .eyebrow,.js .page-hero h1,.js .page-hero p{opacity:0;animation:heroTextIn .72s cubic-bezier(.2,.7,.2,1) forwards}
.js .page-hero .eyebrow{animation-delay:.05s}
.js .page-hero h1{animation-delay:.15s}
.js .page-hero p{animation-delay:.28s}
@keyframes heroTextIn{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.js .reveal{transform:translate3d(0,22px,0);transition:opacity .82s ease,transform .82s cubic-bezier(.2,.65,.2,1)}
.js .reveal.is-visible{transform:translate3d(0,0,0)}

/* The secondary page hero uses the same authentic UB City photo at full source detail. */
.page-hero{isolation:isolate;overflow:hidden;background-image:linear-gradient(90deg,rgba(7,10,16,.96),rgba(7,10,16,.73)),url('./bengaluru-ub-city-night.webp')}
.page-hero::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 78% 22%,rgba(216,175,40,.18),transparent 33%),radial-gradient(ellipse at 18% 84%,rgba(51,108,151,.17),transparent 38%);mix-blend-mode:screen;opacity:.7;animation:heroLightDrift 28s ease-in-out infinite alternate}
.page-hero>.container{position:relative;z-index:2}

.contact-section::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 84% 20%,rgba(216,175,40,.19),transparent 36%),radial-gradient(ellipse at 22% 80%,rgba(48,102,145,.18),transparent 42%);opacity:.76;animation:sectionLightDrift 28s ease-in-out infinite alternate}
.site-footer{position:relative;isolation:isolate;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 12% 0%,rgba(216,175,40,.085),transparent 44%),radial-gradient(ellipse at 90% 100%,rgba(49,93,134,.13),transparent 45%);animation:sectionLightDrift 38s ease-in-out infinite alternate}
.site-footer>.container{position:relative;z-index:1}

/* High-density desktop finish without implying or forcing a particular display resolution. */
@media(min-width:1920px){.container{--max:1480px}.nav-inner{width:min(100% - 2*var(--pad),1640px)}.hero h1{font-size:clamp(104px,5.1vw,144px)}.hero-copy{max-width:700px;font-size:19px}.section-head h2,.section-title{font-size:clamp(70px,4.2vw,88px)}}
@media(max-width:760px){.brand{gap:10px}.brand img{width:44px;height:44px;flex-basis:44px}.footer-brand img{width:46px;height:46px;flex-basis:46px}.about-visual-mark{width:104px;height:104px}.section-dark::before{inset:-10%;opacity:.66;animation-duration:42s}.section-dark::after{background-size:76px 76px;opacity:.42;animation-duration:58s}.hero-media{animation-duration:58s;object-position:60% center}.hero::before{opacity:.62}.hero-motion-line{font-size:9px;gap:7px;margin-top:-12px;margin-bottom:23px}.hero-motion-line [data-changing-text]{min-width:22ch}.page-hero{background-image:linear-gradient(90deg,rgba(7,10,16,.96),rgba(7,10,16,.73)),url('./bengaluru-ub-city-night-mobile.webp')}}
@media(max-width:420px){.hero-motion-line{letter-spacing:.12em}.hero-motion-line [data-changing-text]{min-width:21ch}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-media,.hero::before,.section-dark::before,.section-dark::after,.page-hero::before,.contact-section::after,.site-footer::before{animation:none!important;transform:none!important}.js .hero .eyebrow,.js .hero h1,.js .hero-copy,.js .hero-motion-line,.js .hero-actions,.js .hero-meta,.js .page-hero .eyebrow,.js .page-hero h1,.js .page-hero p{opacity:1;animation:none}.js .reveal,.js .reveal.is-visible{opacity:1;transform:none;transition:none}.hero-motion-line [data-changing-text]{transition:none}}

/* Keep the small-screen hero identifier calm and uncluttered. */
.hero-descriptor{display:inline}
@media(max-width:760px){.hero .eyebrow{display:block;font-size:9px;letter-spacing:.14em;line-height:1.6}.hero .eyebrow::before{display:inline-block;vertical-align:middle;margin-right:10px}.hero-descriptor{display:none}}

/* Allow the two intentional editorial headline lines to breathe on wide screens. */
@media(min-width:761px){.hero-content{max-width:1260px}.hero h1{max-width:1220px;font-size:clamp(64px,6.35vw,96px)}}
@media(min-width:1920px){.hero-content{max-width:1540px}.hero h1{max-width:1540px;font-size:clamp(96px,3.15vw,132px)}}

/* The city photograph stays perfectly still; atmosphere animates only on dark surfaces. */
.hero-media{transform:none!important;animation:none!important;will-change:auto}
.hero::before{animation:none!important;background:radial-gradient(ellipse at 8% 18%,rgba(216,175,40,.12),transparent 32%),linear-gradient(90deg,rgba(4,7,12,.14),transparent 58%);mix-blend-mode:screen;opacity:.62}
.page-hero::before,.contact-section::after{animation:none!important}
.page-hero{background-image:linear-gradient(90deg,rgba(7,10,16,.96),rgba(7,10,16,.73)),url('./bengaluru-ub-city-night.webp')}
@media(min-width:2800px){.page-hero{background-image:linear-gradient(90deg,rgba(7,10,16,.96),rgba(7,10,16,.73)),url('./bengaluru-ub-city-night.webp')}}
@media(max-width:760px){.page-hero{background-image:linear-gradient(90deg,rgba(7,10,16,.96),rgba(7,10,16,.73)),url('./bengaluru-ub-city-night-mobile.webp')}}

/* Clear keyboard focus without decorative motion or hidden controls. */
:focus-visible{outline:2px solid var(--champagne);outline-offset:4px}

/* Give ultra-wide screens a deliberate editorial canvas instead of leaving the work undersized. */
@media(min-width:2800px){.hero>.container{--max:1840px}.nav-inner{width:min(100% - 2*var(--pad),1840px)}.hero-content{max-width:1840px}.hero h1{max-width:1840px;font-size:clamp(124px,3.55vw,148px)}.hero-copy{max-width:780px;font-size:21px}.hero-motion-line{font-size:12px}}

/* Serve the existing small photo at mobile widths. */
@media(max-width:760px){.page-hero{background-image:linear-gradient(90deg,rgba(7,10,16,.96),rgba(7,10,16,.73)),url('./bengaluru-ub-city-night-mobile.webp')}}