@import "https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Funnel+Sans:wght@300..800&display=swap";
*{box-sizing:border-box}
:root{
  --ink:#0e0f11;
  --muted:#5c5f66;
  --line:#dedfe2;
  --paper:#fff;
  --soft:#f5f5f3;
  --accent:#ff9a00;
  --dark:#111827;
  --_animspeed-fast: .1s;
  --_animspeed-medium: .3s;
  --_animspeed-slow: .6s;
  --_animbezier: cubic-bezier(.23, .65, .74, 1.09);
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Funnel Sans",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.container{width:min(1240px,calc(100% - 80px));margin:auto}
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:35px}
.brand img{width:122px;display:block}
.desktop-nav{display:flex;gap:38px;margin-left:auto}
.desktop-nav a,.nav-cta{font-size:13px;font-weight:600;text-decoration:none}
.desktop-nav a{color:#383a3f}
.desktop-nav a:hover{color:var(--accent)}
.nav-cta{background:var(--ink);color:#fff;padding:10px 22px;border-radius:1.6rem;transition:all var(--_animspeed-medium) var(--_animbezier);display:inline-flex;align-items:center}
.nav-cta:hover{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,0.1)}
.nav-cta span{margin-left:8px;transition:transform 0.3s ease}
.nav-cta:hover span{animation: slideRightUp var(--_animspeed-slow) var(--_animbezier) 0s 1 both;}
.menu-btn,.mobile-menu{display:none}

/* Header Ticker Marquee */
.ticker-bar{width:100%;overflow:hidden;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:32px;display:flex;align-items:center;position:relative;z-index:10;margin-top:-16px}
.ticker-content{display:flex;white-space:nowrap;animation:marquee 40s linear infinite}
.ticker-content span{padding:0 25px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted);display:inline-block;opacity:0.6}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hero{height:min(760px,calc(100vh - 82px));min-height:620px;position:relative;overflow:hidden;color:#fff}
.hero-media,.hero-media img{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-media img{object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.38) 50%,rgba(0,0,0,.1) 100%)}
.hero-content{position:relative;z-index:2;height:100%;display:flex;justify-content:center;flex-direction:column}
.kicker{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;margin:0 0 22px}
.hero h1{font:800 clamp(68px,9vw,132px)/.88 "Funnel Display",sans-serif;letter-spacing:-.065em;margin:0;max-width:850px}
.hero h1 { animation: revealHeading 1.2s var(--_animbezier) forwards; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
.hero h1 span,.hero h2 em,.intro h2 em,.section-title-row h2 em,.contact h2 em{color:var(--accent);font-style:normal}
.hero-copy{font-size:16px;line-height:1.75;max-width:540px;margin:28px 0 30px;color:rgba(255,255,255,.88)}
.hero-actions{display:flex;align-items:center;gap:25px}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.02em;border-radius:2.8rem;transition:all var(--_animspeed-medium) var(--_animbezier)}
.btn span{transition:transform 0.3s ease}
.btn:hover span{animation: slideRightUp var(--_animspeed-slow) var(--_animbezier) 0s 1 both;}
.btn-primary{background:var(--accent);color:var(--ink)}
.btn-primary:hover{background:var(--ink);color:#fff;transform:translateY(-3px);box-shadow:0 12px 24px rgba(255,154,0,0.2)}
.text-link{font-size:13px;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:7px}
.text-link span{margin-left:13px}
.light-link{color:#fff}.dark-link{color:var(--ink)}
.hero-meta{position:absolute;z-index:2;bottom:28px;right:40px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}

.section{padding:120px 0;border-bottom:1px solid var(--line)}
.section-top{display:flex;gap:18px;font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:#8a8d92;margin-bottom:60px}
.section-top span:first-child{color:var(--accent)}
.intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:110px;align-items:start;opacity:0;transform:translateY(20px);transition:all var(--_animspeed-slow) var(--_animbezier)}
.intro-grid.show{opacity:1;transform:none}
h2{font:700 clamp(52px,6.3vw,88px)/.98 "Funnel Display",sans-serif;letter-spacing:-.055em;margin:0}
.intro-copy{max-width:500px;padding-top:7px}
.intro-copy .large{font-size:23px;line-height:1.45;font-weight:600;margin:0 0 28px}
.intro-copy p:not(.large){font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 18px}

/* Animation Staggering */
.intro-grid, .section-title-row, .work-card, .service {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--_animspeed-slow) var(--_animbezier), transform var(--_animspeed-slow) var(--_animbezier);
}
.intro-grid.show, .section-title-row.show, .work-card.show, .service.show {
  opacity: 1;
  transform: translateY(0);
}

.work{background:var(--soft)}
.section-title-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:55px;opacity:0;transform:translateY(20px);transition:all var(--_animspeed-slow) var(--_animbezier)}
.section-title-row.show{opacity:1;transform:none}
.section-title-row p{font-size:14px;line-height:1.75;color:var(--muted);margin:15px 0 0;max-width:340px}

.carousel-nav{display:flex;gap:12px;margin-bottom:8px}
.nav-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;display:grid;place-items:center;transition:all .3s ease;color:var(--ink)}
.nav-arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.work-grid{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 0 40px;scrollbar-width:none;-ms-overflow-style:none}
.work-grid::-webkit-scrollbar{display:none}

.work-card{flex:0 0 400px;scroll-snap-align:start;text-decoration:none;background:var(--soft);padding:12px;border-radius:3.8rem;border:1px solid transparent;transition:all var(--_animspeed-slow) var(--_animbezier)}
.work-card.card-large{flex:0 0 650px}.work-card.card-wide{flex:0 0 600px}
.image-wrap{overflow:hidden;background:#e7e8e9;aspect-ratio:1/1;border-radius:1.6rem}
.card-large .image-wrap{aspect-ratio:16/11}.card-wide .image-wrap{aspect-ratio:16/10}
.image-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--_animspeed-slow) var(--_animbezier)}
.work-card:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 20px 40px rgba(0,0,0,0.04)}
.work-card:hover .image-wrap img{transform:scale(1.05)}
.card-info{display:flex;justify-content:space-between;gap:20px;padding:16px 2px 8px}
.card-info span{display:block;color:#777b81;font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;margin-bottom:8px}
.card-info h3{font:600 20px "Funnel Display",sans-serif;letter-spacing:-.02em;margin:0}
.card-info b{font-size:18px;font-weight:500;color:var(--accent)}
.work-footer{border-top:1px solid #cfd1d4;margin-top:65px;padding-top:18px;display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:700;color:#777b81}
.work-footer a{text-decoration:none;color:var(--ink)}.work-footer a:hover{color:var(--accent)}

/* Stagger delays for grid items */
.work-grid > *:nth-child(2) { transition-delay: 0.1s; }
.work-grid > *:nth-child(3) { transition-delay: 0.2s; }
.service-list > *:nth-child(2) { transition-delay: 0.1s; }
.service-list > *:nth-child(3) { transition-delay: 0.2s; }

.services{background:#fff}
.service-list{border-top:1px solid var(--ink)}
.service{display:grid;grid-template-columns:60px 1fr auto;gap:30px;align-items:center;padding:32px 16px;border-bottom:1px solid var(--line);border-radius:1.6rem;margin:8px 0;background:var(--paper);transition:all var(--_animspeed-medium) var(--_animbezier)}
.service>span{font-size:11px;color:var(--accent);font-weight:700}
.service h3{font:600 clamp(25px,3vw,38px) "Funnel Display",sans-serif;letter-spacing:-.035em;margin:0 0 7px}
.service p{font-size:13px;color:var(--muted);margin:0;line-height:1.6}
.service>b{font-size:20px;font-weight:400}
.service:hover{background:var(--soft);transform:scale(1.01);cursor:pointer}
.service:hover h3{color:var(--accent)}

.feature{height:610px;position:relative;overflow:hidden;color:#fff}
.feature>img,.feature-shade{position:absolute;inset:0;width:100%;height:100%}
.feature>img{object-fit:cover}.feature-shade{background:rgba(0,0,0,.57)}
.feature-content{position:relative;height:100%;display:flex;justify-content:center;flex-direction:column}
.feature-content h2{margin:0 0 34px}.feature-content .kicker{color:rgba(255,255,255,.7)}

.contact{background:var(--dark);color:#fff;border:0}
.contact .section-top{color:#aeb4bc}
.contact-grid{display:grid;grid-template-columns:1fr 430px;gap:100px;align-items:end}
.contact-copy p{font-size:16px;line-height:1.75;color:#b8bdc5;max-width:420px;margin:0 0 28px}
.email-link{font:600 clamp(20px,2.5vw,30px) "Funnel Display",sans-serif;text-decoration:none;border-bottom:1px solid #68717d;padding-bottom:8px;display:inline-flex;gap:20px;align-items:center}
.email-link:hover{color:var(--accent)}
.contact-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:50px;margin-top:105px;padding-top:25px;border-top:1px solid #343d49}
.contact-item span,.socials>span{display:block;color:#858d99;font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;margin-bottom:10px}
.contact-item a{font-size:14px;text-decoration:none}.contact-item a:hover{color:var(--accent)}
.socials{justify-self:end}.socials>div{display:flex;gap:9px}
.socials a{width:36px;height:36px;border:1px solid #58606b;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:13px}
.socials a:hover{border-color:var(--accent);color:var(--accent)}

footer{background:#0b1018;color:#fff}
.footer-inner{min-height:120px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:30px}
.footer-inner img{width:105px}.footer-inner p{margin:0;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#858d99}.footer-inner p:last-child{text-align:right}

@media(max-width:850px){
 .container{width:min(100% - 40px,680px)}
 .nav{height:68px}.brand img{width:105px}.desktop-nav,.nav-cta{display:none}
 .menu-btn{display:flex;border:0;background:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:6px;cursor:pointer;padding:0}
 .menu-btn span{display:block;width:25px;height:2px;background:var(--ink);transition:.25s}
 .menu-btn.open span:first-child{transform:translateY(4px) rotate(45deg)}
 .menu-btn.open span:last-child{transform:translateY(-4px) rotate(-45deg)}
 .mobile-menu{display:flex;position:absolute;left:0;right:0;top:68px;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px 22px;flex-direction:column;gap:0;transform:translateY(-120%);transition:.3s ease;box-shadow:0 12px 30px rgba(0,0,0,.08)}
 .mobile-menu.open{transform:translateY(0)}
 .mobile-menu a{padding:15px 0;text-decoration:none;font-weight:600;border-bottom:1px solid #eee}
 .mobile-menu a:last-child{color:var(--accent);border:0}
 .hero{height:calc(100vh - 68px);min-height:560px}.hero-content{justify-content:flex-end;padding-bottom:78px}
 .hero h1{font-size:clamp(58px,16vw,95px)}
 .hero-copy{font-size:14px;max-width:470px;margin:22px 0}
 .hero-meta{display:none}
 .section{padding:82px 0}.section-top{margin-bottom:38px}
 .intro-grid,.contact-grid{grid-template-columns:1fr;gap:35px}
 .section-title-row{flex-direction:column;align-items:flex-start;gap:25px}
 .carousel-nav{align-self:flex-end}
 .intro-copy{max-width:none}.intro-copy .large{font-size:20px}
 .section-title-row{margin-bottom:38px}.section-title-row p{max-width:520px}
 .work-card{flex:0 0 85vw}
 .work-card.card-large,.work-card.card-wide{flex:0 0 85vw}
 .image-wrap,.card-large .image-wrap,.card-wide .image-wrap{aspect-ratio:1/1}
 .work-footer{display:block;line-height:2}.work-footer a{display:block;margin-top:7px}
 .service{grid-template-columns:35px 1fr auto;gap:15px;padding:24px 0}
 .service p{font-size:12px}.feature{height:520px}
 .contact-bottom{grid-template-columns:1fr;gap:30px;margin-top:70px}.socials{justify-self:start}
 .footer-inner{grid-template-columns:1fr;min-height:160px;padding:28px 0;gap:15px}.footer-inner p:last-child{text-align:left}
}
@media(max-width:480px){
 .hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.btn{padding:14px 17px}
 h2{font-size:48px}.feature-content h2{font-size:48px}
 .contact-grid h2{font-size:48px}
}

/* Design System Keyframes */
@keyframes slideRight {
    0% { transform: translate(0) }
    50% { transform: translate(100%) }
    51% { opacity: 0 }
    52% { opacity: 0; transform: translate(-100%) }
    53% { opacity: 1 }
    to { transform: translate(0) }
}

@keyframes slideRightUp {
    0% { transform: translate(0) translateY(0) }
    50% { transform: translate(100%) translateY(-100%) }
    51% { opacity: 0 }
    52% { opacity: 0; transform: translate(-100%) translateY(100%) }
    53% { opacity: 1 }
    to { transform: translate(0) translateY(0) }
}

@keyframes revealHeading {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes mxd-pulse {
    0% { transform: scale(.94) }
    to { transform: scale(1.02) }
}

@keyframes mxd-move {
    0% { transform: translateY(-1rem) }
    to { transform: translateY(1rem) }
}

@keyframes spin {
    to { transform: rotate(360deg) }
}

/* Animation Utility Classes */
.mxd-spin {
    animation: 15s linear infinite spin;
}

.mxd-spin-hover img {
    animation: 5s linear infinite paused spin;
}

.mxd-spin-hover:hover img {
    animation-play-state: running;
}

.mxd-pulse {
    animation: 1.2s ease-in-out infinite alternate mxd-pulse;
}

.mxd-move {
    animation: 1.2s ease-in-out infinite alternate mxd-move;
}

.mxd-move-slow {
    animation: 2s ease-in-out infinite alternate mxd-move;
}

.mxd-rotate {
    animation: 5s linear infinite spin;
}

.mxd-rotate-slow {
    animation: 16s linear infinite spin;
}