:root{
  --teal:#009DA4;
  --teal-dark:#007D83;
  --ink:#0b1517;
  --muted:#667376;
  --line:#dfe8e8;
  --paper:#f7faf9;
  --white:#ffffff;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden}
body.loaded .loader{opacity:0;visibility:hidden;pointer-events:none}
a{color:inherit;text-decoration:none}
button{font:inherit}
.loader{position:fixed;inset:0;background:#f7faf9;z-index:9999;display:grid;place-items:center;transition:.8s var(--ease)}
.loader p{position:absolute;bottom:42px;font-size:10px;letter-spacing:.28em;color:#647174}
.loader-mark{display:flex;gap:5px;align-items:end}
.loader-mark span{width:9px;background:var(--teal);animation:load 1s infinite ease-in-out}
.loader-mark span:nth-child(1){height:28px}.loader-mark span:nth-child(2){height:48px;animation-delay:.12s}.loader-mark span:nth-child(3){height:34px;animation-delay:.24s}
@keyframes load{50%{transform:translateY(-14px);opacity:.45}}
.cursor-dot,.cursor-ring{position:fixed;pointer-events:none;z-index:9998;border-radius:50%;transform:translate(-50%,-50%);display:none}
.cursor-dot{width:6px;height:6px;background:var(--teal)}
.cursor-ring{width:38px;height:38px;border:1px solid rgba(0,157,164,.5);transition:width .25s,height .25s,border-color .25s}
body.cursor-hover .cursor-ring{width:62px;height:62px;border-color:var(--teal)}
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:0;background:var(--teal);z-index:10000}
.site-header{height:88px;position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(247,250,249,.78);backdrop-filter:blur(16px);border-bottom:1px solid rgba(10,30,31,.06);transition:.35s var(--ease)}
.site-header.scrolled{height:70px;background:rgba(247,250,249,.92)}
.brand img{width:108px;height:auto;display:block}
.desktop-nav{display:flex;gap:38px;font-size:13px;font-weight:600}
.desktop-nav a{position:relative;padding:7px 0}
.desktop-nav a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--teal);transition:.35s}
.desktop-nav a:hover:after{width:100%}
.header-cta{border:1px solid var(--ink);padding:11px 16px;border-radius:999px;font-size:12px;font-weight:700}
.header-cta span{color:var(--teal);margin-left:8px}
.menu-toggle{display:none;border:0;background:none;width:38px;height:38px}
.menu-toggle span{display:block;width:22px;height:1px;background:var(--ink);margin:6px auto}
.mobile-menu{position:fixed;inset:0;background:var(--paper);z-index:900;display:flex;flex-direction:column;justify-content:center;padding:10vw;gap:22px;transform:translateY(-100%);transition:.7s var(--ease)}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font:600 clamp(32px,8vw,72px)/1 "Space Grotesk";letter-spacing:-.04em}
.section{position:relative;padding:120px 7vw}
.hero{min-height:100vh;padding-top:170px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero-grid,.philosophy-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,157,164,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,157,164,.07) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 85%);pointer-events:none}
.hero-orb{position:absolute;border-radius:50%;filter:blur(1px);opacity:.8;pointer-events:none}
.orb-a{width:35vw;height:35vw;right:-9vw;top:17vh;background:radial-gradient(circle at 30% 30%,rgba(0,157,164,.24),rgba(0,157,164,.02) 62%,transparent 70%);animation:float 9s ease-in-out infinite}
.orb-b{width:18vw;height:18vw;right:22vw;bottom:10vh;background:radial-gradient(circle,rgba(0,157,164,.12),transparent 68%);animation:float 7s ease-in-out infinite reverse}
@keyframes float{50%{transform:translate3d(-18px,25px,0) scale(1.04)}}
.hero-topline{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;color:#657174;position:relative;z-index:2}
.hero-content{position:relative;z-index:2}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#5d6a6c;margin-bottom:28px}
.hero-title,.display{font-family:"Space Grotesk",sans-serif;font-weight:500;letter-spacing:-.065em;line-height:.91}
.hero-title{font-size:clamp(68px,11.5vw,180px);max-width:1200px}
.hero-title em{font-style:normal;color:var(--teal)}
.dot{color:var(--ink)}
.line{display:block;overflow:hidden}
.hero-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:54px;max-width:940px}
.hero-bottom>p{max-width:430px;font-size:17px;line-height:1.55;color:#5d6a6c}
.round-link{width:118px;height:118px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;font-size:11px;text-align:center;transition:.4s var(--ease);background:rgba(255,255,255,.35)}
.round-link b{font-size:18px;font-weight:400;color:var(--teal)}
.round-link:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:rotate(-8deg)}
.hero-scroll{position:absolute;bottom:42px;right:7vw;font-size:10px;letter-spacing:.14em;color:#667376;display:flex;align-items:center;gap:9px}
.hero-scroll span{width:34px;height:1px;background:var(--teal)}
.marquee-band{overflow:hidden;background:var(--teal);color:#fff;padding:20px 0;border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(0,0,0,.08)}
.marquee-track{display:flex;width:max-content;align-items:center;gap:34px;animation:marquee 25s linear infinite;font:600 18px "Space Grotesk";letter-spacing:.06em}
.marquee-track i{font-style:normal;font-size:12px;opacity:.75}
@keyframes marquee{to{transform:translateX(-50%)}}
.section-label{display:flex;gap:14px;align-items:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#687577;margin-bottom:70px}
.section-label span{color:var(--teal);font-weight:700}
.intro{min-height:90vh}
.intro-layout{display:grid;grid-template-columns:1.45fr .75fr;gap:9vw}
.display{font-size:clamp(48px,7vw,104px)}
.display span{color:var(--teal)}
.intro-copy{padding-top:12px;font-size:17px;line-height:1.65;color:#586567}
.intro-copy p{margin-bottom:24px}
.intro-copy strong{color:var(--ink)}
.text-link{display:inline-flex;gap:12px;align-items:center;margin-top:18px;font-weight:700;font-size:13px;border-bottom:1px solid #9ab0b2;padding-bottom:8px}
.text-link span{color:var(--teal)}
.work{background:#eef4f3}
.work-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:58px;gap:40px}
.work-heading p,.cap-head>p,.industry-head>p{max-width:340px;color:#687577;line-height:1.6;font-size:15px}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.work-card{min-width:0}
.card-art{height:clamp(310px,42vw,650px);position:relative;overflow:hidden;border-radius:4px}
.art-chip{position:absolute;left:24px;top:24px;padding:7px 10px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;font-size:9px;letter-spacing:.14em;z-index:3}
.art-word{font:600 clamp(42px,7vw,100px)/.8 "Space Grotesk";letter-spacing:-.07em;position:absolute;left:8%;bottom:8%;color:#fff;z-index:2}
.art-health{background:radial-gradient(circle at 70% 35%,#9ce5e0,transparent 23%),linear-gradient(135deg,#006d73,#00aeb0)}
.art-health:before{content:"";position:absolute;width:58%;height:58%;border-radius:50%;left:23%;top:18%;border:1px solid rgba(255,255,255,.45);box-shadow:0 0 80px rgba(255,255,255,.18)}
.art-shape{position:absolute;width:35%;height:52%;left:33%;top:20%;border:20px solid rgba(255,255,255,.75);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(34deg)}
.art-auto{background:linear-gradient(145deg,#151b1d,#5a6668 55%,#aab4b3)}
.art-auto:before{content:"";position:absolute;inset:18% 8% 13%;border-radius:45% 55% 18% 18%;background:linear-gradient(145deg,#c7d2d0,#283336 58%,#0c1112);transform:skewX(-9deg);box-shadow:0 30px 50px rgba(0,0,0,.25)}
.speed-lines{position:absolute;inset:0;background:repeating-linear-gradient(165deg,transparent 0 36px,rgba(255,255,255,.1) 37px 39px);transform:translateX(-20%);animation:speed 5s linear infinite}
@keyframes speed{to{transform:translateX(20%)}}
.art-fmcg{background:linear-gradient(135deg,#dcebe6,#8db8ac)}
.pack{position:absolute;width:45%;height:62%;left:27%;top:18%;background:#f9f5e8;padding:24px;box-shadow:24px 28px 0 rgba(0,0,0,.08);display:flex;flex-direction:column;justify-content:space-between;color:#0b3031}
.pack small{font-size:8px;letter-spacing:.16em}.pack strong{font:600 34px/.88 "Space Grotesk";letter-spacing:-.05em}.pack i{width:44px;height:44px;border-radius:50%;background:var(--teal)}
.art-corporate{background:radial-gradient(circle at 50% 45%,rgba(0,157,164,.45),transparent 25%),linear-gradient(135deg,#d8eeee,#f6faf9)}
.art-corporate .art-word{color:var(--ink)}
.orbit{position:absolute;left:25%;top:17%;width:50%;height:50%;border:1px solid rgba(0,125,131,.55);border-radius:50%;transform:rotate(-25deg);box-shadow:0 0 0 28px rgba(0,157,164,.04),0 0 0 56px rgba(0,157,164,.03)}
.orbit:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--teal);left:9%;top:45%;box-shadow:110px -50px 0 #0b1517}
.card-meta{display:flex;justify-content:space-between;padding:17px 2px;font-size:11px;color:#687577;border-bottom:1px solid #d2dddd}
.card-meta b{color:var(--ink)}
.work-note{margin-top:42px;font-size:11px;color:#718082;font-style:italic}
.capabilities{background:#fff}
.cap-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:70px}
.service-list{border-top:1px solid var(--line)}
.service-row{display:grid;grid-template-columns:70px 1.3fr 1fr 30px;align-items:center;gap:25px;padding:25px 0;border-bottom:1px solid var(--line);transition:.4s var(--ease)}
.service-row span,.service-row p{font-size:11px;color:#758184}
.service-row h3{font:500 clamp(24px,3vw,42px) "Space Grotesk";letter-spacing:-.04em}
.service-row b{font-size:20px;font-weight:400;color:var(--teal);transition:.3s}
.service-row:hover{padding-left:15px;padding-right:15px;background:#f5f9f8}
.service-row:hover b{transform:rotate(45deg)}
.philosophy{min-height:90vh;background:#071c1e;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.philosophy-grid{opacity:.35;background-image:linear-gradient(rgba(0,220,225,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,220,225,.08) 1px,transparent 1px)}
.light{color:#b7c7c8}
.philosophy-content{position:relative;z-index:2;max-width:1000px}
.philosophy-content .display{font-size:clamp(70px,12vw,180px)}
.philosophy-copy{max-width:520px;color:#9eb1b2;font-size:18px;line-height:1.6;margin-top:45px}
.mountain-mark{position:absolute;right:7vw;bottom:-8vw;width:42vw;height:26vw;opacity:.22}
.mountain-mark span{position:absolute;bottom:0;border-left:9vw solid transparent;border-right:9vw solid transparent;border-bottom:15vw solid var(--teal)}
.mountain-mark span:nth-child(1){left:0;transform:scale(.7)}.mountain-mark span:nth-child(2){left:22%;transform:scale(1.15)}.mountain-mark span:nth-child(3){right:0;transform:scale(.62)}
.industries{background:#f7faf9}
.industry-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:65px}
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.industry-item{min-height:210px;padding:25px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.4s var(--ease)}
.industry-item span{font-size:10px;color:var(--teal);font-weight:700}
.industry-item h3{font:500 24px "Space Grotesk";letter-spacing:-.04em;margin:46px 0 10px}
.industry-item p{font-size:12px;color:#758184;line-height:1.5}
.industry-item:hover{background:#fff;transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,40,40,.06)}
.contact{min-height:100vh;background:#062426;color:#fff;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.contact:before{content:"";position:absolute;width:70vw;height:70vw;right:-25vw;top:-10vw;border-radius:50%;background:radial-gradient(circle,rgba(0,157,164,.38),transparent 62%);pointer-events:none}
.contact-glow{position:absolute;width:300px;height:300px;left:12%;bottom:20%;background:rgba(0,157,164,.2);filter:blur(100px);border-radius:50%}
.contact-main{position:relative;z-index:2;padding-top:8vh}
.contact-main .huge{font-size:clamp(72px,12vw,180px)}
.contact-button{margin-top:65px;width:170px;height:170px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;font-size:12px;font-weight:700;transition:.45s var(--ease)}
.contact-button b{font-size:24px;font-weight:400}
.contact-button:hover{background:#fff;color:var(--ink);transform:scale(1.06) rotate(-8deg)}
.footer{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);padding-top:25px;display:flex;justify-content:space-between;align-items:end;gap:20px;color:#8fa4a5;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.footer img{width:100px;filter:brightness(0) invert(1);opacity:.9}
.footer div:last-child{display:flex;gap:30px}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.visible{opacity:1;transform:none}
@media (min-width:901px){
  .cursor-dot,.cursor-ring{display:block}
}
@media (max-width:900px){
  .site-header{height:72px;padding:0 6vw}.site-header.scrolled{height:64px}
  .desktop-nav,.header-cta{display:none}.menu-toggle{display:block}
  .section{padding:90px 6vw}.hero{padding-top:135px;min-height:95vh}
  .hero-topline span:last-child{display:none}
  .hero-bottom{align-items:start;gap:30px}.hero-bottom>p{font-size:15px}
  .hero-scroll{display:none}.round-link{width:92px;height:92px;flex:0 0 auto}
  .intro-layout,.work-grid{grid-template-columns:1fr}.intro{min-height:auto}
  .work-heading,.cap-head,.industry-head{display:block}.work-heading p,.cap-head>p,.industry-head>p{margin-top:25px}
  .work-grid{gap:35px}.card-art{height:110vw;max-height:560px}
  .service-row{grid-template-columns:34px 1fr 20px;gap:12px}.service-row p{display:none}
  .service-row h3{font-size:25px}
  .industry-grid{grid-template-columns:1fr 1fr}
  .industry-item{min-height:180px;padding:18px}.industry-item h3{font-size:19px;margin:35px 0 8px}
  .footer{align-items:start;flex-direction:column}.footer div:last-child{flex-direction:column;gap:9px}
}
@media (max-width:560px){
  .hero-title{font-size:18vw}
  .hero-bottom{flex-direction:column}.hero-bottom .round-link{align-self:flex-end}
  .section-label{margin-bottom:48px}
  .display{font-size:14vw}
  .industry-grid{grid-template-columns:1fr}
  .contact-button{width:135px;height:135px;margin-top:45px}
  .philosophy-copy{font-size:16px;margin-top:30px}
}