/* Header controls stay together instead of spreading across available space. */
.header-row{justify-content:flex-start;gap:26px}.navigation{margin-left:auto}.header-actions{display:flex;align-items:center;gap:12px;flex:none}.header-actions .theme-toggle{order:0}.header-actions .nav-cta{margin:0}
/* The exact supplied WAMIX silhouette, rendered through its original alpha mask. */
.brand-symbol{display:inline-block;flex:none;width:100px;height:100px;background:var(--blue);-webkit-mask:url('/assets/wamix-mark-mask.webp') center/contain no-repeat;mask:url('/assets/wamix-mark-mask.webp') center/contain no-repeat}
.grid-hero{--grid-size:88px;isolation:isolate;background:var(--ink)}
.hero-geometry{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,var(--border) 1px,transparent 1px),linear-gradient(to bottom,var(--border) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);background-position:0 0}
.grid-wash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,var(--ink) 14%,transparent 74%),radial-gradient(ellipse at 95% 12%,rgba(33,169,242,.16),transparent 48%),radial-gradient(ellipse at 0 90%,rgba(212,255,36,.045),transparent 45%)}
.hero-stage{position:relative}.hero-full-copy{text-align:center;position:relative;z-index:1;padding:92px 0 74px;pointer-events:none}.hero-full-copy a{pointer-events:auto}.grid-hero .eyebrow{justify-content:center;font-size:11px;letter-spacing:.16em;margin-bottom:30px}.grid-hero h1{font-size:clamp(68px,7.55vw,114px);line-height:1.02;letter-spacing:-.066em;font-weight:500}.headline-line{display:block}.hero-description{max-width:720px;margin:30px auto 0;font-size:18px;line-height:1.75;text-wrap:balance}.grid-hero .hero-actions{justify-content:center;gap:30px;margin-top:32px}.grid-hero .hero-caption{justify-content:center;margin-top:25px}.grid-hero .hero-bottom{position:relative;z-index:1;min-height:78px}.grid-invitation{font-size:10px;letter-spacing:0;color:var(--sage)}.grid-invitation>span{color:var(--blue);margin-left:6px}
.grid-cell,.grid-hover-cell{position:absolute;width:var(--grid-size);height:var(--grid-size);display:grid;place-items:center;border:1px solid rgba(33,169,242,.24);border-radius:5px;background:rgba(33,169,242,.05)}.grid-cell .brand-symbol,.grid-hover-cell .brand-symbol{width:86%;height:86%}.grid-cell-one{left:calc(var(--grid-size)*1);top:calc(var(--grid-size)*1);opacity:.45}.grid-cell-two{right:calc(var(--grid-size)*1);bottom:calc(var(--grid-size)*1);color:var(--blue);font:24px var(--mono);opacity:.4}.grid-hover-cell{left:0;top:0;opacity:0;background:rgba(33,169,242,.11);border-color:rgba(33,169,242,.7);box-shadow:0 0 34px rgba(33,169,242,.15),inset 0 0 22px rgba(33,169,242,.08);transition:opacity .25s;will-change:transform}.grid-hover-cell.is-active{opacity:1}.grid-hover-cell .brand-symbol{background:linear-gradient(135deg,var(--sky),var(--blue));filter:drop-shadow(0 0 8px rgba(33,169,242,.3))}
/* Supplied white artwork remains readable in both themes. */
.badge-strip{background:#0b1013;color:#F4F3EE;padding:20px 0 24px;border-block:1px solid rgba(244,243,238,.12);overflow:hidden}.badge-strip-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.badge-strip-heading p{font:10px/1.5 var(--mono);letter-spacing:.13em;color:#9EAAA7}.badge-motion{display:flex;align-items:center;gap:8px;min-height:44px;background:transparent;color:#9EAAA7;font-size:11px;padding:0 5px}.badge-motion:hover{color:#F4F3EE}.badge-motion:disabled{cursor:default}.badge-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}.badge-track{display:flex;width:max-content;animation:badge-drift 32s linear infinite}.badge-group{display:flex;align-items:center;width:max(100vw,880px);flex:none;justify-content:space-around}.badge-item{display:grid;place-items:center;flex:1}.badge-item img{width:160px;height:104px;object-fit:contain;opacity:.87;transition:opacity .2s}.badge-item:hover img{opacity:1}.badge-strip:hover .badge-track,.badge-strip:focus-within .badge-track,.badge-strip.badges-paused .badge-track,.motion-paused .badge-track{animation-play-state:paused}@keyframes badge-drift{to{transform:translateX(-50%)}}
/* Keep every pixel of the new captures in frame. Kula retains its approved crop. */
.work-card:not([data-project="kula-cafe"]) .work-image img{object-fit:contain;object-position:center;aspect-ratio:16/10;background:var(--card)}.work-card:not([data-project="kula-cafe"]) .work-image:hover img{transform:none}.work-image:hover{border-color:var(--blue)}
.story-art>img{border-radius:18px}.story-equation .brand-symbol{width:64px;height:48px}.process-intro .process-infinity{display:none}.contact-infinity{display:none}.footer-signature>.brand-symbol{width:clamp(80px,20vw,255px);height:clamp(80px,20vw,255px);margin:0}
@media(min-width:851px) and (max-width:1100px){.header-row{gap:18px}.navigation{gap:16px}.header-actions{gap:10px}.brand-crop{width:138px}.header-actions .nav-cta{padding-inline:16px}.grid-invitation{display:none}}
@media(max-width:850px){.header-row{gap:12px}.header-actions{margin-left:auto;gap:10px;order:3}.header-actions .nav-cta{display:inline-flex;min-height:44px;padding:10px 16px;font-size:12px;gap:15px}.header-actions .theme-toggle{order:0}.navigation{margin-left:0}.grid-hero{--grid-size:72px}.hero-full-copy{padding:76px 0 60px}.grid-hero h1{font-size:clamp(56px,9.1vw,82px)}.hero-description{font-size:16px;max-width:580px}.grid-invitation{display:none}.grid-cell-one{left:0;top:0;opacity:.3}.grid-cell-two{right:0;bottom:72px}.badge-item img{width:140px;height:96px}}
@media(max-width:560px){.header-row{gap:10px}.header-actions{gap:8px}.header-actions .nav-cta{display:none}.header-actions .theme-toggle{width:40px;height:40px}.mobile-menu{padding:0 0 0 3px;gap:8px}.grid-hero{--grid-size:60px}.hero-full-copy{padding:63px 0 51px}.grid-hero .eyebrow{font-size:8px;letter-spacing:.095em;gap:7px;margin-bottom:28px}.grid-hero h1{font-size:clamp(42px,10.2vw,58px);line-height:1.09;letter-spacing:-.058em}.hero-description{font-size:15px;margin-top:24px;line-height:1.7;max-width:360px}.desktop-break{display:none}.grid-hero .hero-actions{gap:12px;margin-top:27px;flex-direction:column}.grid-hero .hero-actions .btn{min-height:50px;padding-inline:24px}.grid-hero .hero-caption{font-size:10px;gap:7px;margin-top:17px}.grid-hero .hero-bottom{min-height:85px;align-items:center;gap:5px;flex-direction:column;justify-content:center;font-size:8px}.grid-hero .hero-bottom a{min-height:32px;font-size:9px}.badge-strip{padding:15px 0 20px}.badge-strip-heading p{font-size:8px;letter-spacing:.07em}.badge-motion-label{font-size:10px}.badge-group{width:760px}.badge-item img{width:130px;height:90px}.grid-cell-two{bottom:0}.story-equation .brand-symbol{width:54px;height:44px}}
@media(prefers-reduced-motion:reduce){.badge-track{animation:none}.grid-hover-cell{transition:none}.grid-cell{opacity:.2}}
.motion-paused .grid-hover-cell{opacity:0}
/* With motion disabled, every badge remains available without a moving track. */
.motion-paused .badge-track{animation:none;width:100%;transform:none}.motion-paused .badge-group{width:100%;flex-wrap:wrap}.motion-paused .badge-group[aria-hidden="true"]{display:none}.motion-paused .badge-item{flex:1 0 25%}
@media(max-width:560px){.motion-paused .badge-item{flex-basis:50%}}
@media(max-width:560px){.work-card:not([data-project="kula-cafe"]) .work-image img{aspect-ratio:1.4}}
/* Quieter, consistently spaced grid; the only icon is the pointer reveal. */
.hero-geometry{background-image:linear-gradient(to right,rgba(244,243,238,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(244,243,238,.04) 1px,transparent 1px)}
:root[data-theme=light] .hero-geometry{background-image:linear-gradient(to right,rgba(8,11,13,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(8,11,13,.055) 1px,transparent 1px)}
.grid-hero .hero-bottom{border-top:0}.grid-hover-cell{border-radius:0;border-color:rgba(33,169,242,.25);background:rgba(33,169,242,.055);box-shadow:inset 0 0 25px rgba(33,169,242,.04)}
.grid-hero h1{font-size:clamp(62px,7.1vw,106px);letter-spacing:-.055em;line-height:1.12}.grid-hero .eyebrow{font-size:10px}.hero-full-copy{padding-top:84px}.grid-hero .hero-description{font-size:17px}.hero-bottom{font-size:10px}.grid-invitation{font-size:9px}.view-more{white-space:normal;text-align:center}.agency-pillars{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;border-top:1px solid var(--border);padding:25px 0}.agency-pillars span{border:1px solid var(--border);border-radius:30px;font-size:11px;padding:8px 12px}.agency-principles{display:grid;gap:12px;border-block:1px solid var(--border);padding:24px 0;margin:28px 0;font-size:13px}.agency-principles>span:before{content:'↗';color:var(--blue);margin-right:12px}.story-art>img{height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px}.navigation{gap:22px}.navigation>a,.services-menu>summary{font-size:13px}
@media(max-width:1100px) and (min-width:851px){.navigation{gap:12px}.navigation>a,.services-menu>summary{font-size:12px}.header-row{gap:16px}.header-actions .nav-cta{font-size:12px}}
@media(max-width:850px){.grid-hero h1{font-size:clamp(50px,8.7vw,74px)}.hero-full-copy{padding-top:68px}.navigation>a,.services-menu>summary{font-size:17px}.rail-bottom{flex-wrap:wrap}.rail-bottom .view-more{font-size:13px}.hero-bottom{font-size:9px}}
@media(max-width:560px){.grid-hero h1{font-size:clamp(34px,8.9vw,49px);line-height:1.18;letter-spacing:-.055em}.hero-full-copy{padding-top:60px}.grid-hero .eyebrow{font-size:7px;letter-spacing:.08em}.grid-hero .hero-description{font-size:14px}.grid-hero .hero-caption{font-size:8px}.rail-bottom .rail-track{min-width:50px}.view-more{font-size:13px}.agency-pillars span{font-size:9px}.story-copy h2{font-size:34px}}