:root {
  --ink: #0b0b0f;
  --paper: #ffffff;
  --cobalt: #101ec5;
  --acid: #d9ff3f;
  --yellow: #ffd84d;
  --line: rgba(11,11,15,.16);
  --radius: 26px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Manrope", sans-serif; overflow-x: hidden; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.section-shell, .site-header { width: min(1380px, calc(100% - 64px)); margin-inline: auto; }
.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10; }
.brand { display: flex; align-items: center; gap: 11px; font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.03em; }
.brand img { display:block; width:min(152px,33.6vw); height:auto; }
nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 700; }
nav a { transition: opacity .25s ease; }
nav a:hover { opacity: .55; }
.nav-cta { color: white; background: var(--ink); padding: 13px 18px; border-radius: 99px; transition: background .25s ease, opacity .25s ease; }
.nav-cta:hover,.nav-cta:focus-visible { background:var(--cobalt); color:white; opacity:1; }
.menu-toggle,.mobile-menu { display:none; }
.hero { min-height: calc(100vh - 92px); display: grid; grid-template-columns: .98fr 1.02fr; align-items: center; gap: 34px; padding-block: 42px 88px; }
.eyebrow { margin: 0 0 23px; text-transform: uppercase; font-size: 11px; line-height: 1.3; letter-spacing: .14em; font-weight: 800; }
h1,h2,h3 { font-family: "Space Grotesk", sans-serif; margin: 0; letter-spacing: -.055em; }
h1 { font-size: clamp(60px, 6.7vw, 112px); line-height: .89; max-width: 760px; }
.hero-copy h1 { font-size:clamp(38px,4vw,60px); line-height:1.02; }
.hero-greeting, .hero-name { display:block; }
.hero-name { font-size:clamp(70px,7.3vw,112px); line-height:.98; white-space:nowrap; }
.accent-text { color: var(--cobalt); }
.hero-intro { max-width: 610px; font-size: clamp(17px,1.5vw,21px); line-height: 1.6; margin: 34px 0; color: rgba(11,11,15,.72); }
.hero-intro strong { color: var(--ink); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { border: 1px solid var(--ink); border-radius: 99px; min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; font-weight: 800; font-size: 13px; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease; }
.button:hover,.button:focus-visible { transform: translateY(-3px); background:var(--cobalt); border-color:var(--cobalt); color:white; }
.button-primary { background: var(--ink); color: white; }
.button-ghost { background: transparent; }
.hero-visual { height: min(720px, 75vh); min-height: 560px; position: relative; border-radius: 44px; overflow: hidden; background: var(--cobalt); isolation: isolate; perspective: 1100px; }
.hero-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black, transparent 72%); }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
.orbit-one { width: 580px; height: 580px; left: 50%; top: 45%; transform: translate(-50%,-50%); }
.orbit-two { width: 440px; height: 440px; left: 50%; top: 45%; transform: translate(-50%,-50%); }
.blob { position: absolute; border-radius: 50%; filter: blur(2px); }
.blob-yellow { width: 230px; height: 230px; background: var(--yellow); right: -35px; top: 54px; box-shadow: inset -28px -20px 40px rgba(185,97,0,.22); }
.blob-blue { width: 170px; height: 170px; background: #8a64ff; left: -32px; bottom: 70px; box-shadow: inset -20px -14px 30px rgba(20,0,92,.26); }
.portrait-image { --rx:-1deg; --ry:0deg; position:absolute; z-index:2; inset:-3%; width:106%; height:106%; object-fit:cover; object-position:center; transform:scale(1.02) rotateX(var(--rx)) rotateY(var(--ry)); transform-style:preserve-3d; transition:transform .18s ease-out; }
.portrait-card { --rx: -4deg; --ry: 0deg; position: absolute; width: 370px; height: 540px; left: 50%; bottom: -25px; transform: translateX(-50%) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .18s ease-out; z-index: 2; }
.portrait-head { position: absolute; left: 50%; top: 40px; width: 230px; height: 276px; transform: translateX(-50%) translateZ(45px); background: linear-gradient(145deg,#ffc9a6,#b66c50); border-radius: 45% 48% 44% 46%; box-shadow: inset -28px -14px 38px rgba(98,42,31,.24), -15px 26px 50px rgba(19,9,68,.25); }
.hair { position: absolute; width: 242px; height: 100px; left: -7px; top: -18px; border-radius: 65% 55% 30% 22%; background: linear-gradient(145deg,#24232b,#08080b); box-shadow: inset -15px -10px 20px rgba(255,255,255,.07); transform: rotate(-4deg); }
.hair::after { content: ""; position: absolute; width: 56px; height: 83px; right: -2px; top: 32px; border-radius: 40%; background: #0a0a0e; transform: rotate(-17deg); }
.ear { position: absolute; width: 37px; height: 66px; top: 116px; background: #d99173; border-radius: 60%; z-index: -1; }
.ear.left { left: -20px; }.ear.right { right: -20px; }
.eye { position: absolute; width: 28px; height: 8px; top: 136px; border-bottom: 4px solid #171319; border-radius: 50%; }
.eye.left { left: 48px; }.eye.right { right: 48px; }
.nose { position: absolute; width: 23px; height: 32px; top: 146px; left: 104px; border-right: 3px solid rgba(98,42,31,.34); border-bottom: 3px solid rgba(98,42,31,.25); border-radius: 45%; transform: skew(-8deg); }
.smile { position: absolute; width: 52px; height: 20px; left: 91px; bottom: 45px; border-bottom: 5px solid #813d39; border-radius: 50%; }
.neck { position: absolute; width: 86px; height: 94px; left: 50%; top: 260px; transform: translateX(-50%); background: linear-gradient(100deg,#b7664f,#e29475); border-radius: 20px; }
.portrait-body { position: absolute; left: 50%; bottom: 0; width: 370px; height: 255px; transform: translateX(-50%); overflow: hidden; border-radius: 46% 46% 22px 22px; background: linear-gradient(145deg,#17171e,#050507); box-shadow: inset -40px -30px 50px rgba(255,255,255,.06), 0 30px 45px rgba(15,8,55,.3); }
.portrait-body::before { content: ""; position: absolute; width: 170px; height: 170px; border: 2px solid rgba(255,255,255,.14); border-radius: 50%; left: 100px; top: 30px; }
.portrait-body span { position: absolute; color: var(--acid); font: 700 54px/1 "Space Grotesk"; left: 50%; top: 82px; transform: translateX(-50%); letter-spacing: -.1em; }
.float-tag { position: absolute; z-index: 3; font: 700 11px/1.15 "Space Grotesk"; letter-spacing: .08em; border: 1px solid rgba(255,255,255,.34); color: white; background: rgba(10,10,20,.17); backdrop-filter: blur(10px); padding: 14px 16px; border-radius: 13px; box-shadow: 0 12px 30px rgba(9,6,45,.14); }
.tag-one { left: 30px; top: 34px; transform: rotate(-5deg); }.tag-two { right: 28px; bottom: 96px; transform: rotate(6deg); }
.services-strip { background: var(--ink); color: white; overflow: hidden; padding: 22px 0; transform: rotate(-1deg) scale(1.02); }
.marquee-track { display: flex; width: max-content; gap: 34px; align-items: center; animation: marquee 26s linear infinite; font: 600 20px/1 "Space Grotesk"; letter-spacing: -.03em; }
.marquee-track b { color: var(--acid); }
@keyframes marquee { to { transform: translateX(-50%); } }
.services-offered { padding-top:120px; }
.services-offered .section-heading { margin-bottom:38px; }
.service-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
.service-card { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; min-height:340px; padding:clamp(28px,3vw,46px); border-radius:var(--radius); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.service-card.reveal.in-view:hover { transform:translateY(-6px); }
.service-card:nth-child(1) { grid-column:span 7; background:var(--cobalt); color:white; }
.service-card:nth-child(2) { grid-column:span 5; background:#e8ebff; color:var(--ink); }
.service-card:nth-child(3) { grid-column:span 5; background:var(--acid); color:var(--ink); }
.service-card:nth-child(4) { grid-column:span 7; background:#15151e; color:white; }
.service-number { position:relative; z-index:1; align-self:flex-start; padding:0 0 14px; border-bottom:2px solid currentColor; font:700 16px/1 "Space Grotesk",sans-serif; letter-spacing:.06em; }
.service-graphic { position:absolute; z-index:-1; top:-45px; right:-24px; width:clamp(250px,32vw,460px); height:315px; object-fit:contain; opacity:.28; transform:rotate(-8deg); mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%); pointer-events:none; user-select:none; }
.service-card:nth-child(2) .service-graphic,.service-card:nth-child(3) .service-graphic { opacity:.22; }
.service-card h3 { position:relative; z-index:1; max-width:560px; margin-top:auto; font-size:clamp(32px,3.5vw,54px); line-height:1.02; }
.service-card p { position:relative; z-index:1; max-width:480px; margin:18px 0 0; font-size:16px; line-height:1.55; opacity:.8; }
.services-offered + .work { padding-top:110px; }
.work { padding-block: 150px 110px; }
.work.page-work { padding-block: 68px 110px; }
.page-work .section-heading { margin-bottom:38px; }
.page-work .section-heading h1 { color:var(--cobalt); font-size:clamp(64px,8vw,116px); line-height:.95; }
.all-projects-link { display:inline-flex; align-items:center; justify-content:center; min-height:52px; margin-top:28px; padding:0 24px; border:1px solid var(--ink); border-radius:999px; font-size:14px; font-weight:800; transition:background .25s ease,color .25s ease,border-color .25s ease; }
.all-projects-link:hover,.all-projects-link:focus-visible { background:var(--cobalt); border-color:var(--cobalt); color:white; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; margin-bottom: 54px; }
.section-heading h2, .studio h2 { font-size: clamp(42px,5vw,76px); line-height: .98; }
.section-lead { max-width: 470px; margin: 0; line-height: 1.65; color: rgba(11,11,15,.63); font-size: 15px; }
.filter-bar { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-button { border: 1px solid var(--line); background: transparent; border-radius: 99px; padding: 11px 16px; cursor: pointer; font-size: 12px; font-weight: 800; transition: .25s ease; }
.filter-button span { opacity: .45; margin-left: 5px; }
.filter-button.active { color:white; background:var(--ink); border-color:var(--ink); }
.filter-button:hover,.filter-button:focus-visible { color:white; background:var(--cobalt); border-color:var(--cobalt); }
.project-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 22px; }
.project-card { grid-column: span 4; cursor: pointer; transition: opacity .35s ease, transform .35s ease; }
.project-card.featured { grid-column: span 4; }
.page-work .project-card,.page-work .project-card.featured { grid-column:span 4; }
.page-work .project-art,.page-work .project-card.featured .project-art { height:350px; }
.load-more-button { display:block; min-height:52px; margin:28px auto 0; padding:0 30px; border:1px solid var(--ink); border-radius:999px; background:white; color:var(--ink); font-size:14px; font-weight:800; cursor:pointer; transition:background .25s ease,color .25s ease,border-color .25s ease; }
.load-more-button:hover,.load-more-button:focus-visible { background:var(--cobalt); border-color:var(--cobalt); color:white; }
.load-more-button[hidden] { display:none; }
.project-card.hidden { display: none; }
.project-card:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 6px; }
.project-art { height: 350px; border-radius: var(--radius); position: relative; overflow: hidden; isolation: isolate; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.project-card.featured .project-art { height: 350px; }
.project-photo { background:#efc48c; }
.project-photo img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.project-card:hover .project-photo img { transform:scale(1.025); }
.project-card:hover .project-art { transform: translateY(-5px) scale(.995); }
.project-meta { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; padding: 18px 5px 30px; }
.project-meta h3 { font-size: 25px; margin-top: 6px; }
.project-type { font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: .1em; color: rgba(11,11,15,.52); }
.theme-cobalt .project-art { background: #173ddc; }.theme-sun .project-art { background: #ffcb3b; }.theme-cream .project-art { background: #dfd5c1; }.theme-lime .project-art { background: #c8ef48; }.theme-red .project-art { background: #f44836; }.theme-violet .project-art { background: #7957ed; }
.package { position: absolute; width: 165px; height: 285px; left: 50%; top: 50%; border-radius: 7px 7px 15px 15px; box-shadow: 0 30px 40px rgba(0,0,0,.25); }
.package-front { transform: translate(-35%,-50%) rotate(4deg); background: #f1dfbd; color: #113452; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.package-front::before { content:""; position:absolute; inset:18px; border:1px solid rgba(17,52,82,.3); }
.package-front span { font:700 55px/1 "Space Grotesk"; }.package-front small { font:800 9px/1 sans-serif; letter-spacing:.18em; margin-top:13px; }
.package-back { transform: translate(-75%,-48%) rotate(-11deg); background:#d53b31; }
.art-stamp { position:absolute; right:25px; top:25px; color:white; border:1px solid rgba(255,255,255,.45); padding:10px; border-radius:50%; font:700 8px/1 sans-serif; transform:rotate(11deg); }
.sun { position:absolute; width:260px; height:260px; border:2px solid rgba(26,24,14,.28); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.icecream { position:absolute; width:115px; height:175px; border-radius:58px 58px 28px 28px; background:#f7eee3; left:50%; top:43%; transform:translate(-50%,-50%) rotate(10deg); box-shadow:inset -18px -9px 25px rgba(187,89,64,.16), 16px 22px 30px rgba(82,54,8,.18); }
.icecream::after { content:""; position:absolute; width:22px; height:96px; background:#aa6239; left:47px; bottom:-77px; border-radius:0 0 9px 9px; z-index:-1; }.icecream i { position:absolute; width:46px; height:46px; background:#f4826c; border-radius:50%; left:33px; top:38px; box-shadow:inset -8px -6px 12px rgba(117,38,34,.2); }
.joy { position:absolute; font:700 35px/.84 "Space Grotesk"; letter-spacing:-.08em; left:30px; bottom:28px; transform:rotate(-4deg); }
.art-mtlf { display:flex; flex-direction:column; align-items:center; justify-content:center; color:#052b4e; }.law-mark { font:700 132px/.8 "Space Grotesk"; letter-spacing:-.13em; }.law-name { font:700 18px/1.2 "Space Grotesk"; text-align:center; letter-spacing:.12em; margin-top:22px; }.law-line { width:76px; height:2px; background:#aa9b7c; margin-top:24px; }
.tea-cup { position:absolute; width:180px; height:260px; left:26%; top:50%; transform:translate(-50%,-50%) rotate(-6deg); border-radius:9px 9px 52px 52px; background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(255,255,255,.14)); border:2px solid rgba(255,255,255,.6); box-shadow:inset -20px -20px 34px rgba(63,91,8,.18), 10px 28px 30px rgba(60,85,10,.2); display:grid; place-items:center; }.tea-cup span { font:700 34px/.83 "Space Grotesk"; letter-spacing:-.09em; }
.tea-type { position:absolute; right:8%; top:50%; transform:translateY(-50%); font:700 clamp(40px,5vw,72px)/.82 "Space Grotesk"; letter-spacing:-.08em; }.leaf { position:absolute; width:80px; height:38px; background:#33671d; border-radius:100% 0 100% 0; }.leaf-one { right:5%; top:8%; transform:rotate(-25deg); }.leaf-two { left:48%; bottom:8%; transform:rotate(20deg); }
.art-60 { display:flex; align-items:center; justify-content:center; gap:13px; color:#fff6e7; }.sixty { font:700 155px/.8 "Space Grotesk"; letter-spacing:-.14em; }.art-60 strong { font:700 53px/.8 "Space Grotesk"; display:block; }.art-60 small { display:block; font-weight:800; letter-spacing:.16em; margin-top:12px; }.play { position:absolute; right:26px; bottom:26px; width:50px; height:50px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; font-style:normal; font-size:14px; }
.medal { position:absolute; width:220px; height:220px; left:35%; top:50%; transform:translate(-50%,-50%); background:linear-gradient(145deg,#e3f3ff,#5575b0); border:18px solid #b6caef; outline:4px solid #e6efff; border-radius:50%; box-shadow:0 28px 45px rgba(41,14,102,.35),inset -22px -17px 28px rgba(31,55,103,.38); display:grid; place-items:center; }.medal span { color:white; font-size:90px; text-shadow:0 5px 9px rgba(24,47,90,.38); }.medal.small { width:110px; height:110px; left:25%; top:22%; border-width:10px; }.medal.small span { font-size:42px; }.art-rank p { position:absolute; right:7%; top:50%; margin:0; transform:translateY(-50%); color:white; font:700 58px/.82 "Space Grotesk"; letter-spacing:-.08em; }
.studio { padding-block: 70px 100px; }
.studio-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; }
.about-card,.principles-card { border:1px solid var(--line); border-radius:var(--radius); padding:clamp(32px,5vw,72px); min-height:500px; }
.about-card { position:relative; min-height:610px; background:#ebe6da; }.about-copy { position:relative; z-index:1; }.about-card p:not(.eyebrow) { max-width:62%; font-size:17px; line-height:1.7; color:rgba(11,11,15,.64); }
.about-collage { position:absolute; right:20px; bottom:-28px; width:260px; height:310px; z-index:2; pointer-events:none; }
.about-photo-card { position:absolute; right:20px; bottom:15px; width:205px; margin:0; padding:9px 9px 13px; border-radius:8px; background:#fff; box-shadow:0 22px 38px rgba(27,27,42,.23); transform:rotate(8deg); }
.about-photo-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:3px; }
.about-photo-card figcaption { display:flex; justify-content:space-between; gap:7px; align-items:center; padding:11px 3px 0; font:700 11px/1.2 "Space Grotesk"; white-space:nowrap; }
.about-photo-card figcaption span { color:rgba(11,11,15,.5); font-size:8px; text-transform:uppercase; letter-spacing:.03em; }
.design-symbol { position:absolute; display:grid; place-items:center; width:52px; height:52px; border-radius:13px; box-shadow:0 12px 25px rgba(20,20,40,.2); font:700 22px/1 "Space Grotesk"; }
.symbol-pen { left:0; top:42px; background:var(--acid); color:var(--ink); font-size:30px; transform:rotate(-14deg); }
.symbol-ai { right:0; top:0; background:#2c1707; color:#ff9a27; transform:rotate(13deg); }
.symbol-ps { left:12px; bottom:24px; background:#001e36; color:#31a8ff; transform:rotate(-10deg); }
.principles-card { background:var(--ink); color:white; }.principle-list { list-style:none; padding:0; margin:34px 0 0; }.principle-list li { display:grid; grid-template-columns:48px 1fr; gap:16px; padding:24px 0; border-top:1px solid rgba(255,255,255,.16); }.principle-list li>span { color:var(--acid); font-size:11px; font-weight:800; }.principle-list strong,.principle-list small { display:block; }.principle-list strong { font:600 21px/1.2 "Space Grotesk"; }.principle-list small { color:rgba(255,255,255,.53); line-height:1.5; margin-top:8px; }
.testimonials { padding:130px 0; }.testimonial-heading { margin-bottom:38px; }.testimonial-heading h2 { font-size:clamp(30px,4vw,58px); white-space:nowrap; }.testimonial-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.testimonials blockquote { margin:0; position:relative; display:flex; flex-direction:column; min-height:290px; padding:56px 26px 25px; border-radius:var(--radius); background:#f2f3f8; }.testimonials blockquote:nth-child(2) { background:#edf0ff; }.testimonials blockquote:nth-child(3) { background:#f4f3ee; }.testimonials blockquote p { position:relative; font:500 clamp(18px,1.7vw,24px)/1.42 "Space Grotesk"; letter-spacing:-.025em; margin:0; }.testimonials footer { margin-top:auto; padding-top:30px; font-size:12px; font-weight:800; line-height:1.4; letter-spacing:.04em; color:rgba(11,11,15,.55); }.quote-mark { position:absolute; left:24px; top:0; font:700 70px/1 Georgia; color:var(--cobalt); }
.clients { padding-top:68px; text-align:center; }
.clients .eyebrow { color:var(--cobalt); margin-bottom:14px; }
.clients h2 { font-size:clamp(27px,3.2vw,44px); }
.clients-marquee { overflow:hidden; margin-top:34px; border-block:1px solid var(--line); }
.clients-track { display:flex; width:max-content; animation:clients-scroll 75s linear infinite; }
.clients-marquee:hover .clients-track { animation-play-state:paused; }
.clients-group { display:flex; flex:none; align-items:center; gap:20px; list-style:none; margin:0; padding:18px 20px 18px 0; }
.clients-group li { display:flex; flex:none; align-items:center; justify-content:center; width:230px; height:100px; }
.clients-group img { display:block; width:100%; height:100%; object-fit:contain; }
@keyframes clients-scroll { to { transform:translateX(-50%); } }
.cta-panel { margin-top:100px; padding:clamp(48px,7vw,96px) 24px; border-radius:38px; background:var(--cobalt) url("assets/cta-gradient.png") center/cover no-repeat; color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; position:relative; }.cta-kicker { position:relative; z-index:1; margin:0 0 20px; font:700 clamp(18px,2vw,24px)/1.35 "Space Grotesk"; }.cta-panel h2 { position:relative; z-index:1; max-width:100%; font-size:clamp(28px,4.7vw,68px); white-space:nowrap; }.cta-panel h2 span { color:var(--acid); }.button-light { color:var(--ink); background:white; border-color:white; }.cta-button { position:relative; z-index:1; flex:none; min-height:68px; min-width:min(320px,100%); margin-top:36px; padding:0 32px; font-size:16px; }
.cta-button:hover, .cta-button:focus-visible { background:transparent; border-color:white; color:white; }
.site-footer { background:var(--ink); color:#fff; margin-top:96px; }
.footer-inner { width:min(1380px,calc(100% - 64px)); margin-inline:auto; }
.footer-main { display:grid; grid-template-columns:minmax(0,2fr) minmax(150px,1fr) minmax(150px,1fr); gap:clamp(32px,6vw,110px); padding:76px 0 78px; }
.footer-brand { display:inline-block; font:700 clamp(38px,5vw,68px)/1 "Space Grotesk",sans-serif; letter-spacing:-.075em; white-space:nowrap; }
.footer-brand span:first-child { color:var(--acid); margin-left:.12em; }
.footer-brand-dot { color:var(--acid); }
.footer-intro p { max-width:310px; margin:22px 0 27px; color:#b5b6bf; font-size:15px; line-height:1.65; }
.footer-contact { display:inline-flex; align-items:center; padding:13px 19px; border:1px solid #777781; border-radius:100px; font-size:14px; font-weight:700; transition:background .2s,color .2s,border-color .2s; }
.footer-contact:hover,.footer-contact:focus-visible { background:var(--acid); border-color:var(--acid); color:var(--ink); }
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:16px; font-size:15px; font-weight:600; }
.footer-column h2 { margin:6px 0 9px; color:#a7a8b1; font:800 12px/1.4 "Manrope",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.footer-column a { display:inline-flex; align-items:center; line-height:1.45; transition:color .2s ease,transform .2s ease; }
.footer-column a:hover,.footer-column a:focus-visible { color:var(--acid); transform:translateX(3px); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid #33333a; padding:22px 0 27px; color:#a7a8b1; font-size:12px; font-weight:600; }
.footer-bottom a { color:white; transition:color .2s ease; }
.footer-bottom a:hover,.footer-bottom a:focus-visible { color:var(--acid); }
.project-modal { width:min(1000px,calc(100% - 36px)); max-height:90vh; padding:0; border:0; border-radius:28px; color:var(--ink); background:var(--paper); box-shadow:0 30px 100px rgba(0,0,0,.45); overflow-x:hidden; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
.project-modal::-webkit-scrollbar { display:none; }
.project-modal::backdrop { background:rgba(5,5,9,.74); backdrop-filter:blur(10px); }
.modal-close { position:fixed; z-index:2; top:max(7vh,28px); right:max(calc((100vw - 1000px)/2 + 22px),32px); width:46px; height:46px; border:0; border-radius:50%; background:white; font-size:28px; cursor:pointer; box-shadow:0 8px 25px rgba(0,0,0,.15); }
.modal-body { padding:100px clamp(18px,3vw,32px) clamp(18px,3vw,32px); }
.modal-body h2 { font-size:clamp(48px,7vw,82px); }
.modal-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:38px; }
.modal-gallery[hidden] { display:none; }
.modal-gallery img { width:100%; aspect-ratio:1; object-fit:cover; display:block; border-radius:16px; background:#eee7da; }
.modal-gallery.preserve-ratio { align-items:start; }
.modal-gallery.preserve-ratio img { height:auto; aspect-ratio:auto; object-fit:contain; }
.modal-gallery img:only-child { grid-column:1 / -1; }
.modal-close { transition:background .25s ease,color .25s ease; }
.modal-close:hover,.modal-close:focus-visible { background:var(--cobalt); color:white; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.consult-chat { position:fixed; right:24px; bottom:24px; z-index:40; display:flex; flex-direction:column; align-items:flex-end; font-family:"Manrope",sans-serif; }
.zalo-nudge { position:relative; width:min(280px,calc(100vw - 24px)); margin-bottom:12px; padding:16px 38px 16px 18px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 14px 42px rgba(11,11,15,.16); }
.zalo-nudge[hidden],.consult-chat.is-open .zalo-nudge { display:none; }
.zalo-nudge::after { content:""; position:absolute; right:31px; bottom:-7px; width:12px; height:12px; background:white; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); }
.zalo-nudge p { margin:0 0 6px; font-size:13px; font-weight:700; line-height:1.4; }
.zalo-nudge a { color:var(--cobalt); font-size:15px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.zalo-nudge a:hover,.zalo-nudge a:focus-visible { color:var(--ink); }
.zalo-nudge-close { position:absolute; top:7px; right:9px; padding:3px 6px; border:0; background:transparent; color:#62636b; font-size:19px; line-height:1; cursor:pointer; }
.zalo-nudge-close:hover,.zalo-nudge-close:focus-visible { color:var(--cobalt); }
.consult-launcher { border:0; border-radius:999px; padding:16px 23px; background:var(--cobalt); color:white; box-shadow:0 12px 32px rgba(16,30,197,.28); font-size:15px; font-weight:800; cursor:pointer; }
.consult-launcher:hover,.consult-launcher:focus-visible { background:var(--ink); }
.consult-panel { width:min(380px,calc(100vw - 32px)); height:min(540px,calc(100dvh - 105px)); margin-bottom:12px; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:white; box-shadow:0 24px 70px rgba(11,11,15,.22); }
.consult-panel[hidden] { display:none; }
.consult-head { display:flex; justify-content:space-between; align-items:flex-start; padding:20px 20px 18px; background:var(--cobalt); color:white; }
.consult-kicker { margin:0 0 4px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.consult-head h2 { font-size:24px; letter-spacing:-.04em; }
.consult-head span { display:block; margin-top:5px; font-size:12px; opacity:.83; }
.consult-close { width:32px; height:32px; flex:none; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:white; font-size:24px; line-height:1; cursor:pointer; }
.consult-close:hover,.consult-close:focus-visible { background:rgba(255,255,255,.3); }
.consult-messages { display:flex; flex:1; flex-direction:column; gap:10px; overflow-y:auto; padding:18px; background:#f6f7fb; }
.consult-message { max-width:90%; margin:0; padding:12px 14px; border-radius:15px; font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.consult-bot { align-self:flex-start; background:white; border:1px solid #e8e9f2; border-bottom-left-radius:4px; }
.consult-user { align-self:flex-end; background:var(--cobalt); color:white; border-bottom-right-radius:4px; }
.consult-choices { display:flex; gap:7px; overflow-x:auto; padding:12px 16px 3px; scrollbar-width:thin; }
.consult-choices button { flex:none; border:1px solid var(--cobalt); border-radius:999px; padding:8px 10px; background:white; color:var(--cobalt); font-size:12px; font-weight:800; cursor:pointer; }
.consult-choices button:hover,.consult-choices button:focus-visible { background:var(--cobalt); color:white; }
.consult-form { display:flex; gap:8px; padding:10px 16px; }
.consult-form input { flex:1; min-width:0; border:1px solid #d6d8e4; border-radius:12px; padding:11px 12px; font:500 14px "Manrope",sans-serif; }
.consult-form input:focus { outline:2px solid var(--cobalt); outline-offset:1px; }
.consult-form button { border:0; border-radius:12px; padding:0 14px; background:var(--ink); color:white; font-size:13px; font-weight:800; cursor:pointer; }
.consult-form button:hover,.consult-form button:focus-visible { background:var(--cobalt); }
.consult-contact { display:block; padding:0 16px 16px; color:var(--cobalt); font-size:13px; font-weight:800; text-align:center; text-decoration:underline; text-underline-offset:3px; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }.reveal[data-delay="1"] { transition-delay:.12s; }.reveal.in-view { opacity:1; transform:none; }
@media (max-width: 900px) {
  .section-shell,.site-header,.footer-inner { width:min(100% - 34px,700px); }
  .site-header { height:74px; }.desktop-nav { display:none; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; padding:0; border:1px solid var(--ink); border-radius:50%; background:white; color:var(--ink); cursor:pointer; }
  .menu-toggle:hover,.menu-toggle:focus-visible,.menu-toggle[aria-expanded="true"] { background:var(--cobalt); border-color:var(--cobalt); color:white; }
  .menu-toggle-icon { display:flex; flex-direction:column; gap:5px; width:18px; }
  .menu-toggle-icon i { display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon i:first-child { transform:translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon i:nth-child(2) { transform:scaleX(0); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon i:last-child { transform:translateY(-7px) rotate(-45deg); }
  .mobile-menu:not([hidden]) { position:absolute; top:calc(100% - 2px); right:0; display:flex; flex-direction:column; gap:0; width:min(340px,calc(100vw - 34px)); max-height:calc(100dvh - 88px); overflow-y:auto; padding:13px; border:1px solid var(--line); border-radius:22px; background:white; box-shadow:0 20px 55px rgba(11,11,15,.16); font-size:16px; letter-spacing:0; }
  .mobile-menu a { display:block; width:100%; padding:16px 17px; border-radius:13px; font-weight:700; }
  .mobile-menu a:hover,.mobile-menu a:focus-visible,.mobile-menu a[aria-current="page"] { background:#edf0ff; color:var(--cobalt); }
  .mobile-menu .mobile-menu-cta { margin-top:7px; background:var(--cobalt); color:white; text-align:center; }
  .mobile-menu .mobile-menu-cta:hover,.mobile-menu .mobile-menu-cta:focus-visible { background:var(--ink); color:white; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:45px; gap:50px; }.hero-copy { text-align:center; }.hero-intro { margin-inline:auto; }.hero-actions { justify-content:center; }.hero-visual { min-height:520px; height:620px; }
  .section-heading { display:block; }.section-lead { margin-top:25px; }
  .services-offered { padding-top:95px; }.service-card { min-height:300px; }.service-card:nth-child(n) { grid-column:span 6; }.service-card h3 { font-size:clamp(30px,3.5vw,44px); }
  .project-card,.project-card.featured { grid-column:span 6; }.project-art,.project-card.featured .project-art { height:350px; }
  .page-work .project-card,.page-work .project-card.featured { grid-column:span 6; }
  .studio-grid { grid-template-columns:1fr; }.about-card { min-height:610px; }.principles-card { min-height:auto; }.testimonial-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .clients-group { gap:16px; padding-right:16px; }
}
@media (max-width: 560px) {
  .project-card,.project-card.featured { grid-column:span 12; }.project-card.featured .project-art { height:330px; }
  :root { --radius:20px; }
  .consult-chat { right:12px; bottom:12px; }.consult-panel { height:min(540px,calc(100dvh - 88px)); }
  .hero { padding-top:25px; padding-bottom:65px; }.hero-copy h1 { font-size:clamp(30px,7.5vw,40px); }.hero-name { font-size:clamp(50px,13vw,72px); }.hero-intro { font-size:15px; }.button { flex:1 1 160px; min-height:50px; padding-inline:17px; }
  .hero-visual { height:500px; min-height:500px; border-radius:28px; }.portrait-card { transform:translateX(-50%) scale(.82) rotateX(var(--rx)) rotateY(var(--ry)); transform-origin:bottom center; }.orbit-one { width:470px;height:470px; }.orbit-two { width:350px;height:350px; }.blob-yellow { width:155px;height:155px; }.tag-two { bottom:66px; }
  .work { padding-block:110px 70px; }.section-heading h2,.studio h2 { font-size:40px; }.filter-bar { flex-wrap:nowrap; overflow:auto; padding-bottom:6px; margin-right:-17px; }.filter-button { flex:none; }
  .services-offered { padding-top:75px; }.service-grid { gap:12px; }.service-card:nth-child(n) { grid-column:span 12; }.service-card { min-height:245px; padding:26px; }.service-card h3 { font-size:32px; }.service-graphic { top:-30px; right:-24px; width:280px; height:225px; }.services-offered + .work { padding-top:90px; }
  .project-art { height:330px; }.project-meta h3 { font-size:22px; }.package { transform-origin:center; }.package-front { transform:translate(-35%,-50%) rotate(4deg) scale(.78); }.package-back { transform:translate(-75%,-48%) rotate(-11deg) scale(.78); }.tea-cup { transform:translate(-50%,-50%) rotate(-6deg) scale(.72); }.tea-type { font-size:37px; }.sixty { font-size:106px; }.art-60 strong { font-size:38px; }.medal { transform:translate(-50%,-50%) scale(.72); }.art-rank p { font-size:43px; }
  .page-work .project-card,.page-work .project-card.featured { grid-column:span 12; }.page-work .project-art,.page-work .project-card.featured .project-art { height:330px; }
  .about-card,.principles-card { padding:30px 24px; }.about-card { min-height:auto; }.about-card p:not(.eyebrow) { max-width:100%; }.about-collage { position:relative; right:auto; bottom:auto; width:240px; height:280px; margin:28px auto -44px; }.about-photo-card { width:190px; }.testimonials { padding:90px 0; }.testimonial-heading h2 { font-size:clamp(20px,5.5vw,30px); }.testimonial-list { grid-template-columns:1fr; }.testimonials blockquote { min-height:0; padding:55px 24px 24px; }.testimonials blockquote p { font-size:21px; }.quote-mark { font-size:60px; }.cta-panel { margin-top:70px; border-radius:25px; padding:48px 24px; }.cta-panel h2 { font-size:clamp(19px,5.5vw,30px); }.cta-button { min-width:0; width:100%; max-width:320px; }
  .site-footer { margin-top:70px; }.footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 24px; padding:54px 0 58px; }.footer-intro { grid-column:1/-1; }.footer-brand { font-size:48px; }.footer-bottom { flex-wrap:wrap; gap:12px; }
  .clients { padding-top:54px; }.clients-group { gap:12px; padding:12px 12px 12px 0; }.clients-group li { width:180px; height:80px; }
  .modal-close { top:7%;right:25px; }.modal-gallery { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .clients-marquee { overflow-x:auto; } .clients-track { animation:none; } .clients-group[aria-hidden="true"] { display:none; } }