*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",Arial,sans-serif;color:#09203a;background:#fff}h1,h2,h3,h4{font-family:Manrope,Arial,sans-serif;margin:0;letter-spacing:-.04em}p{line-height:1.65;color:#637487}a{text-decoration:none;color:inherit}.nav{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid #edf1ee}.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;line-height:.85}.brand small{display:block;font-size:7px;letter-spacing:1.4px;margin-top:5px}.mark{color:#54ad2e;font-size:34px;font-style:italic;font-weight:900}.navlinks{display:flex;gap:26px;font-size:13px;color:#17304b}.navlinks a.active{color:#4aab2e;font-weight:800}.btn{display:inline-flex;align-items:center;gap:18px;padding:13px 20px;border-radius:999px;font-size:13px;font-weight:800}.green{background:#a7ef45}.outline{border:1px solid #cbd6dd}.menu{display:none;border:0;background:none;font-size:25px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:1.8px;color:#738291;margin-bottom:17px}.eyebrow i{display:inline-block;width:18px;height:2px;background:#84d942}.eyebrow.light{color:#c2cfd8}.section{padding:100px 6%}.hero{display:grid;grid-template-columns:46% 54%;align-items:center;min-height:610px;padding:60px 6%;background:linear-gradient(90deg,#fff 0,#fff 50%,#f4faf0 100%)}.hero-copy{padding-right:50px}.hero h1{font-size:clamp(42px,5vw,72px);line-height:.98}.hero h1 em{font-style:normal;color:#45a92d}.hero p{font-size:16px;max-width:590px;margin:22px 0}.actions{display:flex;gap:25px;align-items:center}.hero-img{height:500px;border-radius:28px;overflow:hidden;position:relative}.hero-img img,.cover-img img{width:100%;height:100%;object-fit:cover}.stat{position:absolute;right:30px;bottom:30px;background:rgba(7,29,48,.86);color:#fff;border-radius:18px;padding:18px 20px;display:flex;gap:12px;align-items:center;min-width:230px}.stat strong{font-size:28px;display:block}.stat small{display:block;color:#b8c5cf}.content-grid{display:grid;grid-template-columns:40% 60%;gap:65px}.content-grid h2,.section-head h2{font-size:44px;line-height:1.05}.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.media-card{height:210px;border-radius:16px;overflow:hidden;position:relative}.media-card img{width:100%;height:100%;object-fit:cover}.media-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(4,22,38,.82))}.media-card div{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-size:21px;font-weight:800}.media-card small{display:block;font-size:10px;font-weight:500;margin-top:3px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:40px}.section-head>p{max-width:430px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{border:1px solid #e0e8e4;border-radius:16px;padding:25px;background:#fff;transition:.25s;position:relative}.card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(11,34,51,.08)}.icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#effbdd;color:#3fa52a;font-size:20px}.card h3{font-size:18px;margin:18px 0 10px}.card p{font-size:12px}.darkband{position:relative;color:#fff;overflow:hidden}.darkband:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,23,39,.97),rgba(3,23,39,.55)),url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=85") center/cover}.darkband>.inner{position:relative;padding:100px 6%;display:grid;grid-template-columns:36% 64%;gap:40px}.darkband p{color:#c5d1da}.steps{display:flex;gap:10px;align-items:flex-start;padding-top:90px}.step{flex:1;border-top:1px solid rgba(255,255,255,.4);padding-top:15px}.step span{color:#a7ef45;font-size:11px}.step b{display:block;margin:7px 0;font-size:14px}.step small{color:#b9c6cf;font-size:10px}.pillgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.pillgrid .card{padding:23px}.pillgrid h3{font-size:15px}.cover{min-height:350px;position:relative;color:#fff;overflow:hidden}.cover-img{position:absolute;inset:0}.cover:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,22,38,.92),rgba(4,22,38,.32))}.cover-content{position:relative;z-index:2;padding:90px 6%;max-width:850px}.cover h1{font-size:58px;line-height:1}.cover p{color:#ced8df;max-width:650px}.service-detail{display:grid;grid-template-columns:1fr 1fr;gap:18px}.service-detail .card{min-height:230px}.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.project{min-height:330px;border-radius:18px;overflow:hidden;position:relative}.project img{width:100%;height:100%;object-fit:cover}.project:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(3,21,35,.9))}.project .text{position:absolute;left:24px;bottom:22px;z-index:2;color:#fff}.project .text h3{font-size:24px}.project .text p{color:#d0d9df;font-size:11px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.contact-list{display:grid;gap:18px;margin-top:30px}.contact-list strong{display:block}.form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form input,.form select,.form textarea{padding:15px;border:1px solid #dce4df;border-radius:10px;font:inherit}.form textarea{grid-column:1/-1;height:140px;resize:vertical}.form button{border:0;cursor:pointer;justify-self:start}.quote{padding:28px;border-left:3px solid #8bdd45;background:#f4f9f1;margin-top:25px}.quote p{margin:0;color:#405267}.cta{margin:0 6% 100px;min-height:300px;border-radius:20px;overflow:hidden;position:relative;color:#fff}.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cta:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,22,39,.93),rgba(3,22,39,.25))}.cta .in{position:relative;z-index:2;padding:60px;max-width:600px}.cta h2{font-size:44px;line-height:1}.cta p{color:#c7d2db}.footer{background:#061d31;color:#fff;padding:65px 6% 25px;display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:35px}.footer p,.footer a{color:#9caebb;font-size:11px;line-height:1.8;display:block}.footer h4{font-size:13px;margin:0 0 15px}.copyright{grid-column:1/-1;border-top:1px solid #173145;margin-top:20px;padding-top:18px;color:#6f8391;font-size:10px}@media(max-width:900px){.nav{padding:0 5%}.navlinks,.nav>.btn{display:none}.menu{display:block}.hero,.content-grid,.contact-grid,.darkband>.inner{grid-template-columns:1fr}.hero-copy{padding:0 0 35px}.hero-img{height:410px}.cards,.pillgrid{grid-template-columns:1fr 1fr}.steps{overflow:auto;padding-top:45px}.step{min-width:130px}.portfolio-grid,.service-detail{grid-template-columns:1fr}.footer{grid-template-columns:1fr 1fr}}@media(max-width:600px){.section{padding:70px 5%}.hero{padding:45px 5%}.hero h1,.content-grid h2,.section-head h2,.cover h1,.cta h2{font-size:38px}.media-grid,.cards,.pillgrid,.form{grid-template-columns:1fr}.section-head{display:block}.section-head>p{margin-top:18px}.cover-content{padding:70px 5%}.cta{margin:0 5% 70px}.cta .in{padding:35px 25px}.footer{grid-template-columns:1fr;padding:50px 5%}}

/* Shared logo: preserve the supplied artwork and contrast for its white text. */
.brand{display:inline-flex;align-items:center;line-height:1;max-width:100%;flex-shrink:0}
.brand-logo{display:block;width:260px;max-width:100%;height:auto}
.nav .brand{background:#061d31;padding:9px 12px;border-radius:10px}
.nav .brand-logo{width:236px}
.footer .brand{display:inline-flex}
@media(max-width:600px){.nav .brand{max-width:calc(100% - 50px)}.nav .brand-logo{width:220px}}
/* Homepage hero motion. Content remains visible without JavaScript. */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-copy,.hero-img{position:relative;z-index:1;min-width:0}
.hero-emblem{position:absolute;z-index:0;width:clamp(280px,40vw,570px);height:auto;left:24%;top:-90px;pointer-events:none;fill:rgba(255,215,44,.04);stroke:#bdad37;stroke-width:1;opacity:.16;transform-origin:center}
.hero-count{min-width:4ch;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){
  .hero.is-visible .hero-copy>.eyebrow{animation:hero-enter .7s both}
  .hero.is-visible .hero-copy>h1{animation:hero-enter .8s .1s both}
  .hero.is-visible .hero-copy>p{animation:hero-enter .8s .22s both}
  .hero.is-visible .hero-copy>.actions{animation:hero-enter .8s .34s both}
  .hero.is-visible .hero-img{animation:hero-image-enter 1s .15s both}
  .hero.is-visible .stat{animation:hero-float 5s 1.2s ease-in-out infinite}
  .hero.is-visible .hero-emblem{animation:hero-rotate 60s linear infinite}
  .hero.motion-paused .stat,.hero.motion-paused .hero-emblem{animation-play-state:paused}
}
@keyframes hero-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-image-enter{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hero-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(max-width:600px){.hero-emblem{width:330px;left:15%;top:-40px}.hero .stat{right:18px;bottom:22px;min-width:210px}.hero .actions{flex-wrap:wrap;gap:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero *{animation:none!important}}
/* Gentle desktop image drift, independent of the entrance transform. */
@keyframes hero-image-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes hero-card-float-subtle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .hero.is-visible .hero-img{animation:hero-image-enter 1s .15s both,hero-image-float 7s 1.2s ease-in-out infinite}
  .hero.is-visible .stat{animation-name:hero-card-float-subtle}
  .hero.motion-paused .hero-img{animation-play-state:paused}
}
/* About preview: reveal each item once, including stacked cards on mobile. */
.about-preview .btn.outline{transition:background-color .25s,border-color .25s}
.about-preview .btn.outline:hover,.about-preview .btn.outline:focus-visible{background:#effbdd;border-color:#84d942}
.about-preview .btn.outline:focus-visible{outline:2px solid #3fa52a;outline-offset:4px}
.about-arrow{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .about-preview .about-pending{opacity:0;transform:translateY(22px)}
  .about-preview .about-revealed{animation:about-reveal .7s var(--about-delay,0s) both}
  .about-preview .media-card img{transition:transform .6s ease}
  .about-arrow{transition:transform .25s ease}
  .about-preview .btn.outline:hover .about-arrow,.about-preview .btn.outline:focus-visible .about-arrow{transform:translateX(4px)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .about-preview .media-card:hover img{transform:scale(1.045)}
}
@keyframes about-reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.about-preview *{animation:none!important;transition:none!important}}
/* Soft brand-color glows behind the homepage About content. */
.about-preview{position:relative;isolation:isolate;overflow:hidden;--glow-x:32px;--glow-y:22px}
.about-preview>.content-grid{position:relative;z-index:1}
.about-preview::before,.about-preview::after{content:"";position:absolute;z-index:0;pointer-events:none;width:clamp(320px,48vw,700px);aspect-ratio:1;border-radius:50%}
.about-preview::before{left:-10%;top:-12%;background:radial-gradient(circle,rgba(132,217,66,.13) 0%,rgba(132,217,66,.06) 35%,rgba(132,217,66,0) 70%)}
.about-preview::after{right:-8%;bottom:-18%;background:radial-gradient(circle,rgba(255,215,44,.13) 0%,rgba(255,215,44,.055) 35%,rgba(255,215,44,0) 70%)}
@media(prefers-reduced-motion:no-preference){
  .about-preview::before{animation:about-glow-drift 18s ease-in-out infinite}
  .about-preview::after{animation:about-glow-drift 20s -8s ease-in-out infinite reverse}
}
@keyframes about-glow-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--glow-x),var(--glow-y))}}
@media(max-width:900px){.about-preview{--glow-x:12px;--glow-y:9px}}
@media(prefers-reduced-motion:reduce){.about-preview::before,.about-preview::after{animation:none}}
/* Service preview: entrance uses translate so hover lift stays independent. */
.services-preview .card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.services-preview .card .icon{transition:transform .3s ease,background-color .3s ease}
.services-preview .card:hover{transform:none;box-shadow:none}
@media(prefers-reduced-motion:no-preference){
  .services-preview .offer-pending{opacity:0;translate:0 22px}
  .services-preview .offer-revealed{animation:offer-reveal .7s var(--offer-delay,0s) both}
}
@media(hover:hover) and (pointer:fine){
  .services-preview .card:hover{border-color:#84d942;box-shadow:0 18px 42px rgba(11,34,51,.12)}
  .services-preview .card:hover .icon{background:#dff5bd}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .services-preview .card:hover{transform:translateY(-5px)}
  .services-preview .card:hover .icon{transform:scale(1.08)}
}
@keyframes offer-reveal{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.services-preview *{animation:none!important;transition:none!important}}
/* Subtle service-section dot grid, softened behind the central content. */
.services-preview{position:relative;isolation:isolate;overflow:hidden}
.services-preview>.section-head,.services-preview>.cards{position:relative;z-index:1}
.services-preview::before{content:"";position:absolute;inset:-28px;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(82,120,89,.22) 1px,transparent 1.5px);background-size:28px 28px;-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.2) 32%,rgba(0,0,0,.2) 68%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.2) 32%,rgba(0,0,0,.2) 68%,#000 100%)}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .services-preview::before{animation:services-dot-drift 28s linear infinite}
}
@keyframes services-dot-drift{from{transform:translate(0,0)}to{transform:translate(28px,28px)}}
@media(max-width:900px),(prefers-reduced-motion:reduce){.services-preview::before{animation:none}}
/* Cinematic 5D sequence, scoped to the homepage methodology. */
.methodology>.inner{grid-template-columns:minmax(0,36fr) minmax(0,64fr)}
.methodology .steps{gap:0}
.methodology .step{position:relative;min-width:0;padding-right:12px}
.methodology .step::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:#a7ef45;box-shadow:0 0 12px rgba(167,239,69,.5);transform-origin:left center}
.methodology .step>span{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .methodology .method-pending>*{opacity:0}
  .methodology .step.method-pending::before{transform:scaleX(0)}
  .methodology .method-copy.method-active>*{animation:method-rise .75s both}
  .methodology .method-copy.method-active>h2{animation-delay:.12s}
  .methodology .method-copy.method-active>p{animation-delay:.24s}
  .methodology .method-copy.method-active>a{animation-delay:.36s}
  .methodology .step.method-active::before{animation:method-line .55s var(--method-delay,0s) linear both}
  .methodology .step.method-active>*{animation:method-rise .6s var(--method-delay,0s) both}
  .methodology .step.method-active>span{animation:method-rise .6s var(--method-delay,0s) both,method-number-glow .9s var(--method-delay,0s) both}
  .methodology .step:last-child.method-active>b{animation:method-rise .6s var(--method-delay,0s) both,method-finish 1s calc(var(--method-delay,0s) + .6s) both}
  .methodology.method-in-view::before{animation:method-background 24s ease-in-out infinite alternate}
  .methodology.method-offscreen::before{animation-play-state:paused}
}
@keyframes method-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes method-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes method-number-glow{0%,100%{text-shadow:none}45%{text-shadow:0 0 16px #a7ef45}}
@keyframes method-finish{0%,100%{text-shadow:none;color:#fff}50%{text-shadow:0 0 20px rgba(167,239,69,.8);color:#a7ef45}}
@keyframes method-background{from{transform:scale(1)}to{transform:scale(1.06)}}
@media(max-width:900px){
  .methodology>.inner{grid-template-columns:minmax(0,1fr)}
  .methodology .steps{display:flex;flex-direction:column;overflow:visible;padding-top:10px;gap:0}
  .methodology .step{width:100%;border-top:0;border-left:1px solid rgba(255,255,255,.3);padding:0 0 28px 24px}
  .methodology .step::before{top:0;left:-1px;width:2px;height:100%;transform-origin:center top}
  .methodology .step:last-child{padding-bottom:8px}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .methodology .step.method-pending::before{transform:scaleY(0)}
  .methodology .step.method-active::before{animation-name:method-line-vertical}
}
@keyframes method-line-vertical{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){
  .methodology::before,.methodology *,.methodology *::before{animation:none!important}
  .methodology .method-pending>*{opacity:1}
  .methodology .step::before{transform:none!important}
}
/* Trust cards: one-time entrance and a restrained hover highlight. */
.why-preview .card{transition:box-shadow .3s ease}
.why-preview .card:hover{transform:none;box-shadow:none}
.why-preview .card::before{content:"";position:absolute;top:0;left:20px;right:20px;height:2px;background:#84d942;transform:scaleX(0);transform-origin:center;border-radius:2px;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .why-preview .why-pending{opacity:0}
  .why-preview .section-head>.why-revealed{animation:why-heading-enter .7s var(--why-delay,0s) both}
  .why-preview .card.why-revealed{animation:why-card-enter .65s var(--why-delay,0s) both}
  .why-preview .card.why-revealed .icon{animation:why-icon-pulse .75s calc(var(--why-delay,0s) + .45s) both}
  .why-preview .card::before{transition:transform .35s ease}
}
@media(hover:hover) and (pointer:fine){
  .why-preview .card:hover{box-shadow:0 16px 36px rgba(11,34,51,.1)}
  .why-preview .card:hover::before{transform:scaleX(1)}
}
@keyframes why-heading-enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes why-card-enter{from{opacity:0;scale:.96}to{opacity:1;scale:1}}
@keyframes why-icon-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(132,217,66,0)}45%{transform:scale(1.08);box-shadow:0 0 0 7px rgba(132,217,66,.12)}}
@media(prefers-reduced-motion:reduce){.why-preview *,.why-preview *::before{animation:none!important;transition:none!important}.why-preview .why-pending{opacity:1}}
/* Closing CTA: slow camera movement and a single soft light pass. */
.cinematic-cta{isolation:isolate}
.cinematic-cta>img{z-index:0;transform-origin:center;pointer-events:none}
.cinematic-cta::after{z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,22,39,.94),rgba(3,22,39,.66) 55%,rgba(3,22,39,.32))}
.cinematic-cta::before{content:"";position:absolute;inset:-30% -50%;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(110deg,transparent 38%,rgba(255,242,193,.09) 48%,rgba(255,255,255,.13) 50%,transparent 62%)}
.cinematic-cta>.in{z-index:3}
.cinematic-cta .btn{transition:box-shadow .3s ease,background-color .3s ease}
.cinematic-cta .cta-arrow{display:inline-block}
.cinematic-cta .btn:focus-visible{outline:2px solid #fff;outline-offset:5px;box-shadow:0 0 24px rgba(167,239,69,.3)}
@media(hover:hover) and (pointer:fine){.cinematic-cta .btn:hover{background:#b5f464;box-shadow:0 0 26px rgba(167,239,69,.3)}}
@media(prefers-reduced-motion:no-preference){
  .cinematic-cta.cta-pending .in>*{opacity:0}
  .cinematic-cta.cta-started .in>*{animation:cta-text-enter .8s both}
  .cinematic-cta.cta-started .in>h2{animation-delay:.14s}
  .cinematic-cta.cta-started .in>p{animation-delay:.28s}
  .cinematic-cta.cta-started .in>.btn{animation-delay:.42s}
  .cinematic-cta.cta-started>img{animation:cta-camera 24s ease-in-out infinite alternate}
  .cinematic-cta.cta-started::before{animation:cta-light-pass 2.8s .3s both}
  .cinematic-cta.cta-offscreen>img,.cinematic-cta.cta-offscreen::before{animation-play-state:paused}
  .cinematic-cta .cta-arrow{transition:transform .25s ease}
  .cinematic-cta .btn:focus-visible .cta-arrow{transform:translateX(4px)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.cinematic-cta .btn:hover .cta-arrow{transform:translateX(4px)}}
@keyframes cta-text-enter{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@keyframes cta-camera{from{transform:scale(1) translateX(0)}to{transform:scale(1.06) translateX(.7%)}}
@keyframes cta-light-pass{0%{opacity:0;transform:translateX(-45%)}20%,65%{opacity:1}100%{opacity:0;transform:translateX(45%)}}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .cinematic-cta.cta-started>img{animation-name:cta-camera-mobile}
  .cinematic-cta.cta-started::before{animation:none}
}
@keyframes cta-camera-mobile{from{transform:scale(1)}to{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){
  .cinematic-cta *,.cinematic-cta::before{animation:none!important;transition:none!important}
  .cinematic-cta.cta-pending .in>*{opacity:1}
}
/* Independent scale adds hover zoom without interrupting the slow camera pan. */
@media(min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cinematic-cta>img{scale:1;transition:scale 1.2s ease-in-out}
  .cinematic-cta:hover>img{scale:1.03}
}
/* Exterior CTA glow lives outside the banner's clipped image and overlays. */
.cta-ambient{position:relative;isolation:isolate;overflow:hidden;padding:24px 0 100px;background:#fff}
.cta-ambient>.cinematic-cta{z-index:1;margin-bottom:0}
.cta-ambient::before,.cta-ambient::after{content:"";position:absolute;z-index:0;pointer-events:none;width:clamp(320px,48vw,680px);aspect-ratio:1;border-radius:50%;opacity:.7}
.cta-ambient::before{left:-12%;top:-12%;background:radial-gradient(circle,rgba(132,217,66,.22),rgba(132,217,66,.08) 38%,transparent 70%)}
.cta-ambient::after{right:-12%;bottom:-20%;background:radial-gradient(circle,rgba(255,215,44,.2),rgba(255,215,44,.07) 38%,transparent 70%)}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .cta-ambient::before{animation:cta-ambient-drift 18s ease-in-out infinite}
  .cta-ambient::after{animation:cta-ambient-drift 22s -9s ease-in-out infinite reverse}
}
@keyframes cta-ambient-drift{0%,100%{transform:translate(0,0);opacity:.55}50%{transform:translate(24px,-16px);opacity:.9}}
@media(max-width:600px){.cta-ambient{padding:20px 0 70px}}
@media(max-width:900px),(prefers-reduced-motion:reduce){.cta-ambient::before,.cta-ambient::after{animation:none}}
/* Services page reuses the capability, timeline, and trust-card motion styles. */
.services-preview>.service-detail{position:relative;z-index:1}
.services-cover .cover-img{overflow:hidden}
.services-cover .cover-img img{transform-origin:center}
@media(prefers-reduced-motion:no-preference){
  .services-cover.cover-pending .cover-content>*{opacity:0}
  .services-cover.cover-started .cover-content>*{animation:hero-enter .8s both}
  .services-cover.cover-started .cover-content>h1{animation-delay:.14s}
  .services-cover.cover-started .cover-content>p{animation-delay:.28s}
  .services-cover.cover-started .cover-img img{animation:services-cover-zoom 24s ease-in-out infinite alternate}
  .services-cover.cover-offscreen .cover-img img{animation-play-state:paused}
}
@keyframes services-cover-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .services-cover.cover-started .cover-img img{animation-name:services-cover-zoom-mobile}
  .solutions-preview .card.why-revealed .icon{animation:none}
}
@keyframes services-cover-zoom-mobile{from{transform:scale(1)}to{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){
  .services-cover *{animation:none!important}
  .services-cover.cover-pending .cover-content>*{opacity:1}
}
/* Services 5D hover zoom composes with the existing slow background animation. */
@media(min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .services-methodology::before{scale:1;transition:scale 1.2s ease-in-out}
  .services-methodology:hover::before{scale:1.04}
}
/* About page: consistent reveals and a portrait that preserves the full image. */
.about-overview>.content-grid{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
.team-card{max-width:480px}
.team-photo{overflow:hidden;border-radius:12px;background:#f0f5f1}
.team-photo img{display:block;width:100%;height:auto}
.team-photo-placeholder{aspect-ratio:904/1026;display:grid;place-items:center;border-radius:12px;background:#edf4ee;color:#17304b;font:700 28px Manrope,Arial,sans-serif}
.team-card .team-role{font-size:15px;line-height:1.6;color:#405267}
.team-card h3 a:hover{color:#3fa52a}
.team-card h3 a:focus-visible{outline:2px solid #3fa52a;outline-offset:5px}
.team-card:hover{transform:none;box-shadow:0 18px 42px rgba(11,34,51,.08)}
@media(prefers-reduced-motion:no-preference){
  .team-section .team-pending{opacity:0}
  .team-section .team-revealed{animation:hero-enter .8s var(--team-delay,0s) both}
  .team-photo img{transition:scale .8s ease}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.team-card:hover .team-photo img{scale:1.025}}
@media(max-width:900px){.about-overview>.content-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.team-section *{animation:none!important;transition:none!important}.team-section .team-pending{opacity:1}}
/* About banner: gentle automatic zoom plus the same restrained desktop hover. */
@media(prefers-reduced-motion:no-preference){
  .about-cover .cover-img img{animation:services-cover-zoom 24s ease-in-out infinite alternate}
  .about-cover.cover-offscreen .cover-img img{animation-play-state:paused}
}
@media(min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .about-cover .cover-img img{scale:1;transition:scale 1.2s ease-in-out}
  .about-cover:hover .cover-img img{scale:1.03}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){.about-cover .cover-img img{animation-name:services-cover-zoom-mobile}}
/* Portfolio motion follows the same dots, glow, and reveal language. */
.portfolio-projects>.portfolio-grid{position:relative;z-index:1}
.portfolio-projects .project{height:360px;min-height:0}
.portfolio-projects .project>img{display:block}
.portfolio-projects .project .text{right:24px}
.portfolio-industries>.content-grid{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
.portfolio-industries .card{transition:border-color .3s ease,box-shadow .3s ease}
.portfolio-industries .card:hover{transform:none;box-shadow:none}
.portfolio-testimonial .quote{position:relative;border-left-color:transparent}
.portfolio-testimonial .quote::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:#8bdd45;transform-origin:top}
@media(prefers-reduced-motion:no-preference){
  .portfolio-projects .project>img{transition:scale .8s ease}
  .portfolio-projects .project .text{transition:translate .4s ease}
  .portfolio-industries .portfolio-pending,.portfolio-testimonial .portfolio-pending{opacity:0}
  .portfolio-industries .portfolio-revealed,.portfolio-testimonial .portfolio-revealed{animation:hero-enter .75s var(--portfolio-delay,0s) both}
  .portfolio-industries .card.portfolio-revealed{animation-name:why-card-enter}
  .portfolio-testimonial .quote.portfolio-revealed::before{animation:method-line-vertical .9s calc(var(--portfolio-delay,0s) + .2s) both}
}
@media(hover:hover) and (pointer:fine){
  .portfolio-industries .card:hover{border-color:#84d942;box-shadow:0 16px 36px rgba(11,34,51,.1)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .portfolio-projects .project:hover>img{scale:1.045}
  .portfolio-projects .project:hover .text{translate:0 -5px}
}
@media(max-width:1100px){.portfolio-industries .cards{grid-template-columns:1fr}}
@media(max-width:900px){.portfolio-industries>.content-grid{grid-template-columns:minmax(0,1fr)}.portfolio-projects .project{height:330px}}
@media(prefers-reduced-motion:reduce){
  .portfolio-projects *,.portfolio-industries *,.portfolio-testimonial *,.portfolio-testimonial *::before{animation:none!important;transition:none!important}
  .portfolio-industries .portfolio-pending,.portfolio-testimonial .portfolio-pending{opacity:1}
}
/* Contact motion keeps inputs steady while visitors write. */
.contact-motion .contact-grid>*{min-width:0}
.contact-motion .form{align-content:start}
.contact-motion .form input,.contact-motion .form select,.contact-motion .form textarea{min-width:0;width:100%;transition:border-color .25s ease,box-shadow .25s ease}
.contact-motion .form input:focus,.contact-motion .form select:focus,.contact-motion .form textarea:focus{outline:2px solid #4aab2e;outline-offset:2px;border-color:#84d942;box-shadow:0 0 0 5px rgba(132,217,66,.12)}
.contact-motion .form .btn{transition:background-color .25s ease,box-shadow .25s ease}
.contact-motion .form .btn:focus-visible{outline:2px solid #3fa52a;outline-offset:4px}
.contact-arrow{display:inline-block}
.contact-why>.content-grid{grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
@media(prefers-reduced-motion:no-preference){
  .contact-motion .contact-pending{opacity:0}
  .contact-motion .contact-revealed{animation:hero-enter .7s var(--contact-delay,0s) both}
  .contact-motion .contact-arrow{transition:transform .25s ease}
}
@media(hover:hover) and (pointer:fine){.contact-motion .form .btn:hover{background:#b5f464;box-shadow:0 0 22px rgba(132,217,66,.25)}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.contact-motion .form .btn:hover .contact-arrow{transform:translateX(4px)}}
@media(max-width:900px){.contact-why>.content-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.contact-motion *{animation:none!important;transition:none!important}.contact-motion .contact-pending{opacity:1}}
/* Shared header CTA: a gentle glow pulse across all pages. */
.nav>.btn.green{position:relative;transition:box-shadow .3s ease,background-color .3s ease}
@media(prefers-reduced-motion:no-preference){
  .nav>.btn.green{animation:nav-cta-glow 2.8s ease-in-out infinite,nav-cta-shake 8s ease-in-out infinite}
  .nav>.btn.green:hover,.nav>.btn.green:focus-visible{animation:none;box-shadow:0 0 0 4px rgba(167,239,69,.14),0 0 24px rgba(132,217,66,.4)}
}
@keyframes nav-cta-glow{0%,100%{background-color:#a7ef45;box-shadow:0 0 0 0 rgba(105,190,38,0),0 0 5px rgba(105,190,38,.18)}50%{background-color:#d2ff86;box-shadow:0 0 0 7px rgba(105,190,38,.22),0 0 20px 5px rgba(105,190,38,.52)}}
.nav>.btn.green:focus-visible{outline:2px solid #3fa52a;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.nav>.btn.green{animation:none;transition:none}}
/* Brief 2px nudge at the end of each eight-second cycle. */
@keyframes nav-cta-shake{0%,90%,100%{transform:translateX(0)}92%,96%{transform:translateX(-2px)}94%,98%{transform:translateX(2px)}}

/* Dark-letter header logo on white; frame the artwork's transparent margins. */
.nav .brand{background:transparent;padding:0;border-radius:0}
.nav .brand-logo{width:260px;height:52px;object-fit:cover;object-position:center}
@media(max-width:600px){.nav .brand-logo{width:220px;height:44px}}
/* Linked portfolio card and matching analytics detail page. */
.project-link{display:block}
.project-link:focus-visible{outline:3px solid #4aab2e;outline-offset:5px}
.detail-breadcrumb{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:#637487;margin-bottom:45px}
.detail-breadcrumb a:hover{color:#3fa52a}
.detail-breadcrumb a:focus-visible,.analytics-detail .btn:focus-visible{outline:2px solid #3fa52a;outline-offset:4px}
.detail-capabilities{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 40px}
.detail-capabilities span{padding:12px 18px;border:1px solid #e0e8e4;border-radius:999px;background:#f6faf3;font-size:14px}
.analytics-detail .actions{flex-wrap:wrap}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.portfolio-projects .project-link:focus-visible>img{scale:1.045}}
/* Analytics case-study layout based on the supplied reference. */
.case-layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(250px,1fr);gap:40px;align-items:start}
.case-main-image{display:block;width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:16px}
.case-block{margin:30px 0}
.case-block h2{font-size:clamp(24px,2.5vw,34px);line-height:1.2}
.case-highlights{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;margin:32px 0}
.case-highlights>img{width:100%;aspect-ratio:1.1;object-fit:cover;border-radius:14px}
.case-highlights h3{font-size:23px}
.case-highlights ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:14px;color:#405267;font-size:14px}
.case-highlights li{position:relative;padding-left:24px;line-height:1.5}
.case-highlights li::before{content:'\2713';position:absolute;left:0;color:#45a92d;font-weight:800}
.case-sidebar{display:grid;gap:24px}
.case-info{border:1px solid #e0e8e4;border-radius:16px;padding:26px;background:#f7faf6}
.case-info h3{font-size:20px;padding-bottom:20px;border-bottom:1px solid #dce4df}
.case-info dl{margin:0}.case-info dl>div{padding:17px 0;border-bottom:1px solid #e0e8e4}.case-info dl>div:last-child{border-bottom:0;padding-bottom:0}
.case-info dt{font-size:12px;color:#637487;margin-bottom:7px}.case-info dd{margin:0;font-size:14px;line-height:1.5}
.case-help{position:relative;overflow:hidden;padding:30px;border-radius:16px;color:#fff;background:linear-gradient(140deg,#061d31,#174d3b)}
.case-help h3{font-size:26px;line-height:1.2}.case-help p{color:#c7d2db;font-size:14px}.case-help .btn:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:900px){.case-layout{grid-template-columns:minmax(0,1fr)}.case-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.case-highlights,.case-sidebar{grid-template-columns:minmax(0,1fr)}.case-layout{gap:32px}}