:root{
  --paper:#f1eee7;
  --paper-2:#e7e2d8;
  --ink:#0b0c0e;
  --muted:#676a70;
  --line:rgba(11,12,14,.15);
  --white:#f5f6f4;
  --blue:#12b8df;
  --blue-dark:#0798bd;
  --serif:Georgia, "Times New Roman", serif;
  --sans:"DM Sans", Arial, sans-serif;
  --display:Manrope, "DM Sans", Arial, sans-serif;
  --mono:"DM Mono", monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body:has(.site-header) { overflow-x:hidden }
a{color:inherit;text-decoration:none}
.noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' 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='.35'/%3E%3C/svg%3E")}
.site-header{position:fixed;z-index:40;top:0;left:0;width:100%;height:82px;padding:18px 4vw;display:flex;align-items:center;justify-content:space-between;background:rgba(241,238,231,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand img{display:block;width:205px;height:auto}
.nav{display:flex;gap:34px;margin-left:auto;margin-right:38px;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.09em}
.nav a{position:relative}
.nav a:after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--ink);transition:.3s}
.nav a:hover:after{width:100%}
.header-cta{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--ink);padding:12px 15px;transition:.25s}
.header-cta:hover{background:var(--ink);color:var(--paper)}
.header-cta span,.button span,.contact-email span{margin-left:14px}
.section-dark{background:var(--ink);color:var(--white)}
.section-paper{background:var(--paper)}
.section-blue{background:var(--blue);color:var(--ink)}
.hero{min-height:100svh;position:relative;padding:150px 7vw 35px;display:flex;align-items:center;overflow:hidden}
.hero-grid,.contact-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(to right,black 0%,transparent 80%)}
.hero-copy{width:55%;position:relative;z-index:2}
.eyebrow,.kicker,.section-index,.section-note{font:500 10px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:9px;color:#a9adb2}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 20px var(--blue)}
.hero h1{font:700 clamp(58px,8vw,128px)/.91 var(--display);letter-spacing:-.07em;margin:28px 0 30px}
.hero h1 em,.contact h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.055em;color:var(--blue)}
.hero-lede{max-width:580px;font-size:17px;line-height:1.65;color:#b9bdc2}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:36px}
.button{display:inline-flex;align-items:center;padding:15px 18px;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.button-blue{background:var(--blue);color:var(--ink)}
.button-blue:hover{background:#5ad6ef}
.text-link{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.text-link span{margin-left:12px}
.light{color:#c9cbd0}
.hero-art{position:absolute;right:6vw;top:22%;width:39vw;height:55vh;min-height:360px;display:flex;align-items:center;justify-content:center}
.static-hero-art{border-left:1px solid rgba(255,255,255,.12);padding-left:7vw}
.hero-word{font:800 clamp(55px,9vw,135px)/.82 var(--display);letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px rgba(245,246,244,.5);transform:rotate(-90deg);white-space:nowrap;position:absolute}
.hero-line{position:absolute;width:58%;height:1px;background:var(--blue);top:50%;left:25%;box-shadow:0 0 28px rgba(18,184,223,.2)}
.art-label{position:absolute;font:500 9px var(--mono);letter-spacing:.1em;color:#8e949b}
.label-top{right:8%;top:20%}
.label-bottom{left:8%;bottom:20%}
.hero-coordinate{position:absolute;right:0;top:8%;font:500 9px var(--mono);letter-spacing:.12em;color:#777d84}
.hero-year{position:absolute;right:0;bottom:8%;font:500 9px var(--mono);letter-spacing:.12em;color:#777d84}
.hero-foot{position:absolute;bottom:28px;left:7vw;right:7vw;display:flex;justify-content:space-between;color:#72777d;font:500 9px var(--mono);letter-spacing:.09em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.12);padding-top:13px}
.intro{padding:140px 7vw 150px;display:grid;grid-template-columns:70px 1.15fr .8fr;gap:4vw}
.section-index{color:#777}
.intro h2,.studio h2{font:700 clamp(52px,7vw,105px)/.94 var(--display);letter-spacing:-.065em;margin:0}
.intro h2 span{font-family:var(--serif);font-weight:400}
.kicker{margin:5px 0 30px;color:#777}
.intro-body{padding-top:54px;max-width:470px;font-size:17px;line-height:1.7;color:#4f5358}
.intro-body p{margin:0 0 26px}
.intro-body strong{color:var(--ink)}
.services{padding:30px 7vw 140px}
.section-top{display:grid;grid-template-columns:70px 1fr auto;align-items:start;border-top:1px solid var(--line);padding-top:15px}
.section-note{color:#777}
.service-list{margin-top:75px;border-top:1px solid var(--line)}
.service{display:grid;grid-template-columns:70px 1fr 40px;gap:3vw;padding:34px 0;border-bottom:1px solid var(--line);align-items:start;transition:.35s}
.service:hover{padding-left:15px;padding-right:15px;background:rgba(11,12,14,.025)}
.service-number{font:500 10px var(--mono);color:#777}
.service h3{font:600 clamp(28px,4vw,52px)/1 var(--display);letter-spacing:-.045em;margin:0 0 12px}
.service p{max-width:630px;color:#62656a;font-size:15px;line-height:1.6;margin:0}
.service-arrow{font-size:24px;transition:.3s}
.service:hover .service-arrow{transform:translate(5px,-5px)}
.manifesto{padding:150px 15vw 160px;position:relative;overflow:hidden}
.manifesto-mark{position:absolute;right:7vw;top:75px;font:700 20px var(--mono);letter-spacing:.4em;opacity:.4}
.manifesto h2{font:700 clamp(58px,9vw,130px)/.88 var(--display);letter-spacing:-.075em;margin:0 0 45px}
.manifesto h2 em{font-family:var(--serif);font-weight:400}
.manifesto-copy{max-width:580px;font-size:19px;line-height:1.65}
.work{padding:30px 7vw 150px}
.work-top{border-color:rgba(255,255,255,.13)}
.work-top .section-index,.work-top .section-note{color:#777b81}
.work-top .kicker{color:#aeb2b7}
.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);margin-top:65px;border:1px solid rgba(255,255,255,.12)}
.workflow-card{position:relative;min-height:360px;padding:30px;background:#101214;transition:.35s}
.workflow-card:hover{background:#171a1d;transform:translateY(-4px)}
.workflow-no{font:500 9px var(--mono);color:#656b71;letter-spacing:.1em}
.workflow-icon{position:absolute;right:30px;top:26px;width:42px;height:42px;border:1px solid rgba(18,184,223,.4);border-radius:50%;display:grid;place-items:center;color:var(--blue);font:20px var(--display)}
.workflow-card h3{font:600 clamp(23px,2.3vw,34px)/1.05 var(--display);letter-spacing:-.045em;margin:100px 0 14px}
.workflow-card p{font-size:13px;line-height:1.65;color:#8c9298;max-width:350px;margin:0}
.workflow-tag{display:inline-block;margin-top:28px;padding:7px 9px;border:1px solid rgba(255,255,255,.12);font:500 7px var(--mono);letter-spacing:.12em;color:#7f858b}
.studio{padding:140px 7vw 160px}
.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:9vw;margin-top:20px}
.studio-title h2 em{font-family:var(--serif);font-weight:400}
.studio-copy{max-width:600px;padding-top:25px}
.large-copy{font:500 clamp(25px,3vw,42px)/1.25 var(--display);letter-spacing:-.035em;margin:0 0 30px}
.studio-copy>p:not(.large-copy){color:#60636a;line-height:1.7;font-size:15px}
.studio-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:55px;border-top:1px solid var(--line);padding-top:18px}
.studio-facts div{display:grid;gap:8px}
.studio-facts span{font:500 9px var(--mono);color:#777}.studio-facts b{font-size:13px}.studio-facts small{font-size:11px;color:#777}
.contact{min-height:90svh;padding:130px 7vw 35px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.contact-content{position:relative;z-index:2;margin:auto 0}
.contact h2{font:700 clamp(60px,9vw,130px)/.86 var(--display);letter-spacing:-.075em;margin:0 0 30px}
.contact-content>p:not(.kicker){font-size:16px;color:#9da2a8;max-width:470px;line-height:1.6}
.contact-email{display:inline-block;margin-top:18px;font:500 clamp(19px,3vw,35px) var(--display);letter-spacing:-.04em;border-bottom:1px solid #6e747a;padding-bottom:7px}
.contact-bottom{position:relative;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;color:#747a80;font:500 8px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}.reveal.is-visible{opacity:1;transform:none}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.contact-layout{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;margin:auto 0 100px}
.contact-content{margin:0;align-self:start}
.contact-mini{margin-top:32px;color:#70767c;font:500 8px var(--mono);letter-spacing:.12em}
.contact-form{padding-top:12px}
.contact-form label{display:block;margin-bottom:25px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form label span{display:block;margin-bottom:9px;color:#737980;font:500 8px var(--mono);letter-spacing:.12em}
.contact-form input,.contact-form textarea{width:100%;border:0;border-bottom:1px solid #404449;background:transparent;color:var(--white);padding:11px 0;font:500 15px var(--sans);outline:none;border-radius:0;resize:vertical}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#555b61}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--blue)}
.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:10px}
.form-bottom>span{font:500 9px var(--mono);color:#676d73}
.form-bottom button{border:0;background:var(--blue);color:var(--ink);padding:15px 18px;font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.form-bottom button:hover{background:#5ad6ef}
.form-bottom button b{margin-left:18px}
.form-status{font:500 9px var(--mono);color:var(--blue);min-height:15px;margin-top:14px}
.site-footer{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.12);padding-top:25px}
.footer-brand img{width:190px;filter:brightness(0) invert(1);opacity:.9}
.footer-brand p{font:500 8px var(--mono);letter-spacing:.12em;color:#686e74}
.footer-links{display:flex;gap:28px;margin:32px 0;font:500 9px var(--mono);letter-spacing:.09em;text-transform:uppercase}
.footer-links a:hover{color:var(--blue)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;color:#686e74;font:500 8px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding-top:14px}
.footer-bottom a:hover{color:var(--white)}
@media (max-width:900px){
  .site-header{height:72px;padding:14px 5vw}.brand img{width:175px}.nav{display:none}.header-cta{font-size:9px;padding:10px 11px}
  .hero{padding:125px 7vw 90px;min-height:920px;align-items:flex-start}.hero-copy{width:100%}.hero h1{font-size:clamp(56px,15vw,100px)}.hero-lede{max-width:530px}
  .hero-art{width:60vw;height:52vh;right:0;top:43%;opacity:.9}.hero-foot{left:7vw;right:7vw}
  .intro{grid-template-columns:50px 1fr;gap:25px;padding-top:100px}.intro-body{grid-column:2;padding-top:10px}
  .section-top{grid-template-columns:50px 1fr}.section-note{grid-column:2;margin-top:15px}
  .workflow-grid{grid-template-columns:1fr 1fr}.workflow-card{min-height:330px}
  .studio-grid{grid-template-columns:1fr;gap:55px}.studio-copy{padding-top:0}
}
@media (max-width:600px){
  .site-header .header-cta span{display:none}
  .hero{min-height:850px;padding-top:112px}.hero h1{font-size:18vw}.hero-lede{font-size:15px}.hero-actions{gap:18px;flex-wrap:wrap}
  .hero-art{top:52%;right:-28vw;width:105vw;height:105vw}.hero-foot span:last-child{display:none}
  .intro,.services,.work,.studio,.contact{padding-left:6vw;padding-right:6vw}
  .intro{grid-template-columns:35px 1fr}.intro h2,.studio h2{font-size:17vw}
  .service{grid-template-columns:35px 1fr 20px;gap:12px}.service h3{font-size:32px}.service p{font-size:14px}
  .manifesto{padding:110px 10vw}.manifesto h2{font-size:17vw}
  .work-grid{grid-template-columns:1fr}.work-feature{grid-column:auto}.card-visual{height:330px}
  .studio-facts{grid-template-columns:1fr 1fr}.studio-facts div:last-child{grid-column:1/-1}
  .contact{min-height:1000px}.contact h2{font-size:17vw}.contact-layout{grid-template-columns:1fr;gap:55px;margin-bottom:70px}.form-row{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.footer-bottom{gap:12px;flex-wrap:wrap}.footer-bottom span:nth-child(2){display:none}
}
.contact-mail {
  display: inline-flex;
  align-items: center;

  font:
    500 clamp(25px, 3.5vw, 48px)
    var(--display);

  letter-spacing: -.055em;

  color: var(--white);

  border-bottom: 1px solid #555b61;

  padding-bottom: 10px;

  transition:
    color .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

.contact-mail span {
  margin-left: 22px;

  color: var(--blue);

  font-size: .65em;

  transition: transform .3s ease;
}

.contact-mail:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.contact-mail:hover span {
  transform: translate(5px, -5px);
}