/* Premium motion & graphic layer */

/* film grain overlay */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* hero cinematic zoom + parallax */
.hero-photo{will-change:transform}
.hero-photo img{animation:ken-burns 20s ease-out 1 both}
@keyframes ken-burns{from{transform:scale(1.1) translate3d(0,0,0)}to{transform:scale(1) translate3d(0,0,0)}}

/* cursor spotlight glow in hero */
.hero-spotlight{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(420px circle at var(--x,50%) var(--y,50%),#e9d2a233,transparent 60%)}
.hero:hover .hero-spotlight{opacity:1}

/* animated draw-in line under section eyebrows */
.section-top{position:relative}
.section-top:before{content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.22,.68,0,1.01)}
.section-top.visible:before{transform:scaleX(1)}
.practice .section-top:before{background:var(--bronze)}

/* staggered reveal for grouped items */
.values span,.tags span,.detail-body .tags span{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .65s ease}
.js .values.visible span,.js .practice-list details.visible .tags span{opacity:1;transform:none}
.js .values.visible span:nth-child(1){transition-delay:.05s}
.js .values.visible span:nth-child(2){transition-delay:.16s}
.js .values.visible span:nth-child(3){transition-delay:.27s}
.js .steps article.reveal:nth-child(1){transition-delay:0s}
.js .steps article.reveal:nth-child(2){transition-delay:.12s}
.js .steps article.reveal:nth-child(3){transition-delay:.24s}
.js .practice-list details.reveal:nth-of-type(1){transition-delay:0s}
.js .practice-list details.reveal:nth-of-type(2){transition-delay:.08s}
.js .practice-list details.reveal:nth-of-type(3){transition-delay:.16s}
.js .practice-list details.reveal:nth-of-type(4){transition-delay:.24s}

/* image wipe reveal (profile + coverflow entrance) */
.js .profile-image{clip-path:inset(0 0 22% 0);opacity:0;transform:scale(1.04);transition:clip-path 1.1s cubic-bezier(.22,.68,0,1.01),opacity 1s ease,transform 1.1s cubic-bezier(.22,.68,0,1.01)}
.js .profile-image.visible{clip-path:inset(0 0 0% 0);opacity:1;transform:none}
.js .coverflow{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s ease}
.js .coverflow.visible{opacity:1;transform:none}

/* magnetic buttons */
.button,.nav-contact,.cf-controls>button{will-change:transform}

/* number count-up */
.stat-value{font-variant-numeric:tabular-nums}

/* hero entrance — staggered on load */
.js .hero .eyebrow,.js .hero h1,.js .hero-description,.js .hero>.hero-content>.button,.js .hero-bottom{opacity:0;animation:hero-in .9s cubic-bezier(.22,.68,0,1.01) forwards}
.js .hero .eyebrow{animation-delay:.15s}
.js .hero h1{animation-delay:.32s}
.js .hero-description{animation-delay:.5s}
.js .hero>.hero-content>.button{animation-delay:.66s}
.js .hero-bottom{animation-delay:.85s}
@keyframes hero-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* sticky header reacts to scroll */
header{transition:height .4s ease,background .4s ease,box-shadow .4s ease}
header.scrolled{height:74px;background:#0b241df2;box-shadow:0 10px 30px #00000040;backdrop-filter:blur(6px)}
@media(max-width:760px){header.scrolled{height:66px}}

/* marquee ticker band */
.ticker{background:var(--deep);border-top:1px solid #ffffff1a;border-bottom:1px solid #ffffff1a;overflow:hidden;white-space:nowrap;position:relative}
.ticker-track{display:inline-flex;align-items:center;gap:48px;padding:16px 0;animation:ticker-scroll 26s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{font:500 12px 'Manrope',sans-serif;letter-spacing:2.4px;color:#c9b989;display:inline-flex;align-items:center;gap:48px}
.ticker-track span:after{content:'✦';color:#576155;margin-left:48px;font-size:10px}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* floating decorative accents */
.float-accent{position:absolute;pointer-events:none;z-index:0;border-radius:50%;border:1px solid #b99a6440;opacity:.5;animation:float-drift 9s ease-in-out infinite}
.float-accent.small{width:60px;height:60px;animation-duration:7s}
.float-accent.dot{width:6px;height:6px;background:var(--bronze);border:0;opacity:.6;animation-duration:6s}
@keyframes float-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-18px)}}
.practice{position:relative;overflow:hidden}
.practice .float-accent{top:12%;right:6%;width:130px;height:130px}
.practice .float-accent.small{top:auto;bottom:14%;right:14%}
.profile{position:relative;overflow:hidden}
.profile .float-accent{bottom:8%;left:4%;width:90px;height:90px}

/* auto-playing coverflow gets a subtle glow pulse on the active card */
.cf-card{transition:box-shadow .5s ease}

/* nav underline sweep */
nav a{position:relative}
nav a:not(.nav-contact):after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--bronze);transition:right .3s ease}
nav a:not(.nav-contact):hover:after{right:0}

/* slow drifting animated background blobs */
.intro{position:relative}
.animated-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.animated-bg span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;mix-blend-mode:multiply}
.animated-bg span:nth-child(1){width:520px;height:520px;background:radial-gradient(circle,#b99a6455,transparent 70%);top:-160px;left:-120px;animation:blob-a 22s ease-in-out infinite}
.animated-bg span:nth-child(2){width:420px;height:420px;background:radial-gradient(circle,#10473755,transparent 70%);bottom:-140px;right:-100px;animation:blob-b 26s ease-in-out infinite}
.animated-bg span:nth-child(3){width:340px;height:340px;background:radial-gradient(circle,#72744b4d,transparent 70%);top:40%;left:55%;animation:blob-c 19s ease-in-out infinite}
@keyframes blob-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,50px) scale(1.15)}}
@keyframes blob-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,-40px) scale(1.1)}}
@keyframes blob-c{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(.9)}}
.intro .section-top,.intro .intro-grid,.intro .values,.intro .mosaic{position:relative;z-index:1}

/* noticeable animated background for green sections */
.animated-bg.dark span{opacity:.55;filter:blur(80px);mix-blend-mode:screen}
.animated-bg.dark span:nth-child(1){width:620px;height:620px;background:radial-gradient(circle,#b99a6499,transparent 70%);top:-220px;left:-160px;animation:blob-a 16s ease-in-out infinite}
.animated-bg.dark span:nth-child(2){width:520px;height:520px;background:radial-gradient(circle,#4c6b5799,transparent 70%);bottom:-200px;right:-140px;animation:blob-b 20s ease-in-out infinite}
.animated-bg.dark span:nth-child(3){width:420px;height:420px;background:radial-gradient(circle,#d9c08d80,transparent 70%);top:35%;left:60%;animation:blob-c 14s ease-in-out infinite}
.animated-bg .sweep{position:absolute;top:-20%;left:-30%;width:45%;height:140%;background:linear-gradient(100deg,transparent,#e9d2a21f 45%,#e9d2a238 50%,#e9d2a21f 55%,transparent);transform:rotate(8deg);animation:sweep-move 9s ease-in-out infinite}
@keyframes sweep-move{0%{left:-40%}50%{left:95%}100%{left:-40%}}
.practice .section-top,.practice .practice-heading,.practice .coverflow,.practice .practice-list{position:relative;z-index:1}
.particle-wave-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;width:100%;height:100%}

/* full-bleed 16:9 context banner */
.banner-169{position:relative;z-index:1;margin:0 -8% 60px;aspect-ratio:16/9;overflow:hidden}
.banner-169 img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95)}
.banner-169:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#091e19dd,transparent 55%)}
.banner-169 figcaption{position:absolute;left:8%;bottom:8%;right:8%;color:#f4f1ea}
.banner-169 figcaption .eyebrow{color:var(--bronze);margin-bottom:12px}
.banner-169 figcaption p{font-family:'Playfair Display',Georgia,serif;font-size:clamp(24px,3vw,40px);letter-spacing:-.02em}
@media(max-width:760px){
 .banner-169{margin:0 -6% 40px;aspect-ratio:4/5}
 .banner-169:before{background:linear-gradient(0deg,#091e19f0,#091e19a0 40%,transparent 70%)}
 .banner-169 figcaption p{font-size:20px}
 .banner-169 figcaption{left:6%;right:6%;bottom:6%}
}

/* stats strip filling the practice-heading empty column */
.practice-heading{align-items:start!important}
.practice-heading-side{display:flex;flex-direction:column;gap:26px;padding-bottom:10px}
.practice-stats{display:flex;flex-direction:column;gap:16px;border-top:1px solid #ffffff26;padding-top:18px}
.practice-stats>div{display:flex;align-items:baseline;gap:14px}
.practice-stats strong{font-family:'Playfair Display',Georgia,serif;font-size:26px;color:var(--bronze);min-width:56px}
.practice-stats span{font-size:12.5px;color:var(--muted);line-height:1.4}
@media(max-width:760px){
 .practice-heading-side{padding-bottom:0}
 .practice-stats{gap:12px}
}

/* mosaic gallery — rows assemble from opposite sides on scroll */
.mosaic{display:flex;flex-direction:column;gap:16px;margin-top:80px}
.mosaic-row{display:flex;gap:16px}
.mosaic-tile{position:relative;flex:1;aspect-ratio:1/1;border-radius:16px;overflow:hidden;box-shadow:0 18px 38px #0b241d1f;transition:transform .7s cubic-bezier(.22,.68,0,1.01),opacity .7s ease,box-shadow .35s ease;will-change:transform}
.mosaic-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,.68,0,1.01);transform:scale(1.001)}
.mosaic-tile:hover{box-shadow:0 26px 54px #0b241d33}
.mosaic-tile:hover img{transform:scale(1.09)}
.mosaic-tile.wide{flex:1.7}
.mosaic-tile.mark{background:var(--green);display:grid;place-items:center}
.mosaic-tile.mark .brand-logo{width:56%;height:56%;background:var(--bronze)}
.mosaic-label{position:absolute;left:14px;bottom:12px;font:500 11px 'Manrope',sans-serif;letter-spacing:1.6px;color:#f4f1ea;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.mosaic-tile:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#091e19c4,transparent 45%);opacity:0;transition:opacity .35s ease}
.mosaic-tile:hover:before,.mosaic-tile:hover .mosaic-label{opacity:1;transform:none}
.js .row-a .mosaic-tile{opacity:0;transform:translateX(-70px) scale(.97)}
.js .row-b .mosaic-tile{opacity:0;transform:translateX(70px) scale(.97)}
.js .mosaic.visible .mosaic-tile{opacity:1;transform:none}
.js .mosaic.visible .row-a .mosaic-tile:nth-child(1){transition-delay:0s}
.js .mosaic.visible .row-a .mosaic-tile:nth-child(2){transition-delay:.1s}
.js .mosaic.visible .row-a .mosaic-tile:nth-child(3){transition-delay:.2s}
.js .mosaic.visible .row-b .mosaic-tile:nth-child(1){transition-delay:.08s}
.js .mosaic.visible .row-b .mosaic-tile:nth-child(2){transition-delay:.18s}
.js .mosaic.visible .row-b .mosaic-tile:nth-child(3){transition-delay:.28s}
@media(max-width:760px){
 .mosaic{margin-top:50px;gap:10px}
 .mosaic-row{gap:10px}
 .mosaic-tile.wide{flex:1.3}
 .mosaic-label{font-size:9px;left:10px;bottom:8px}
}

/* practice number ticks up subtly on reveal */
.js .practice-list .number{display:inline-block;transition:transform .5s ease}
.js .practice-list details.reveal .number{transform:translateY(6px)}
.js .practice-list details.reveal.visible .number{transform:none}

@media(prefers-reduced-motion:reduce){
 .hero-photo img{animation:none}
 .section-top:before{transition:none;transform:scaleX(1)}
 .values span,.tags span,.js .profile-image,.js .coverflow{transition:none;opacity:1;transform:none;clip-path:none}
 .grain{display:none}
 .js .hero .eyebrow,.js .hero h1,.js .hero-description,.js .hero>.hero-content>.button,.js .hero-bottom{animation:none;opacity:1;transform:none}
 .ticker-track{animation:none}
 .float-accent{animation:none}
 .js .row-a .mosaic-tile,.js .row-b .mosaic-tile,.js .mosaic.visible .mosaic-tile{transition:none;opacity:1;transform:none}
 .animated-bg span{animation:none}
 .animated-bg .sweep{animation:none;display:none}
}