@font-face{font-family:Montserrat;src:url(assets/montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Instrument;src:url(assets/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
:root{
  --ink:#1b1a1e;--night:#171719;--footer-bg:#08080a;--paper:#f7f6f1;--line:#d8d6ce;--lavender:#d8c8ff;--copy:#56545b;
  --nav-height:76px;--gutter:clamp(20px,5.1vw,86px);font-family:Montserrat,Arial,sans-serif;font-size:100%;color:var(--ink);background:var(--paper);scroll-behavior:smooth;scroll-padding-top:20px;
}
*{box-sizing:border-box}
body{margin:0;overflow-wrap:break-word}
h1,h2,h3,h4,p,figure,dl,dd,ol{margin:0}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #9477db;outline-offset:4px}
::selection{color:#24193c;background:#d5c5ff}
.shell{width:min(100%,1560px);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;z-index:20;left:12px;top:10px;transform:translateY(-180%);padding:12px 20px;background:white;color:#222}
.skip:focus{transform:none}
h1,h2,h3,h4{font-weight:560;letter-spacing:-.065em;line-height:1.04}
em{font-family:Instrument,Georgia,serif;font-weight:400;letter-spacing:-.043em}
p{line-height:1.59;text-wrap:pretty}
.topbar,.hero{color:#fbfaf7;background:var(--night)}
.topbar{position:relative;z-index:8}
.nav,.foot,.section-intro,.archive-head,.contact-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
.nav{min-height:var(--nav-height)}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:640;font-size:.99rem;letter-spacing:-.065em;white-space:nowrap}
.brand img{width:43px;height:auto}
.topbar .brand img{filter:invert(1)}
nav{display:flex;align-items:center;gap:clamp(17px,3.5vw,52px);font-size:.88rem;font-weight:520}
nav a,.text-link{display:inline-flex;align-items:center;gap:11px;min-height:44px}
nav .nav-cta{border:1px solid #ffffff4e;border-radius:60px;min-height:37px;padding:5px 15px}
nav .nav-cta:hover{background:#fff;color:var(--ink)}
nav a:not(.nav-cta):hover,.foot-link:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.hero{position:relative;overflow:hidden}
/* The header and opening scene occupy one viewport; large text can grow naturally. */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);
  align-items:center;column-gap:clamp(8px,2vw,36px);
  min-height:calc(100vh - var(--nav-height));min-height:calc(100svh - var(--nav-height));
  padding-block:clamp(22px,4.7svh,66px);
}
.hero-copy{position:relative;z-index:2;align-self:center;padding:0 0 clamp(0px,1.7svh,24px)}
.hero h1{font-size:clamp(4.9rem,7.7vw,8.35rem);letter-spacing:-.083em;line-height:.93}
.hero h1 em{display:inline-block;font-size:1.18em;color:#e8dcff;line-height:.95}
.hero-copy p{max-width:45ch;color:#d4d1d7;font-size:clamp(.98rem,1.18vw,1.15rem);margin-top:26px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:27px}
.button,.text-link,.work-open,.foot-link{font-weight:590;font-size:.88rem}
.button,.work-open{display:inline-flex;align-items:center;gap:17px;border-radius:99px;min-height:46px;padding:11px 20px;justify-content:center}
.button.light{background:var(--paper);color:var(--ink)}
.button.light:hover{background:var(--lavender)}
.metal-base,.metal-face{position:absolute;inset:0;mask:url(assets/sl.svg) center/contain no-repeat;-webkit-mask:url(assets/sl.svg) center/contain no-repeat}
.metal-base{transform:translate(-1.2%,3%);background:linear-gradient(130deg,#b9aaba,#494252 38%,#c6c4d1 54%,#25232b 72%,#826a95)}
.metal-face{background:linear-gradient(148deg,#ece7ed 4%,#9a92a7 25%,#fefcff 39%,#d0c6d5 52%,#9c90af 64%,#eee8f6 83%)}
h2{font-size:clamp(3.25rem,6vw,6.2rem);line-height:1.01}
.section-intro{margin:clamp(48px,6.5vw,96px) 0 clamp(25px,3.5vw,52px);align-items:end}
.section-intro h2{max-width:12em}.section-intro p{font-size:.98rem;max-width:35ch;color:var(--copy)}
.overline{font-size:.72rem;line-height:1.45;font-weight:660;letter-spacing:.12em;text-transform:uppercase}
.case-stack{display:grid;gap:clamp(16px,2vw,30px)}
.work-card{--card:#e4ceac;--letter:#352a20;background:var(--card);color:var(--letter);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:.77fr 1.23fr;min-height:clamp(353px,33vw,495px);box-shadow:0 -1px 0 #25222a12}
.tinta-fourlife{--card:#c4d6e6;--letter:#192e3e}.tinta-maslinda{--card:#d5decd;--letter:#283729}
.work-copy{display:flex;flex-direction:column;align-items:start;gap:20px;justify-content:space-between;padding:clamp(26px,3.7vw,63px)}
.work-copy h3{font-size:clamp(2.4rem,4.4vw,4.7rem);line-height:1.01;overflow-wrap:normal}
.work-lead{max-width:21ch;margin-top:12px;font-size:clamp(1.14rem,1.7vw,1.66rem);font-weight:530;line-height:1.24;letter-spacing:-.038em}
.work-detail{font-size:.92rem;margin-top:16px;max-width:42ch}
.work-open{border:1px solid currentColor;min-height:42px;padding:9px 16px}
.work-open:hover{color:var(--card);background:var(--letter);border-color:var(--letter)}
.work-image{display:block;position:relative;isolation:isolate;overflow:hidden;min-width:0;min-height:100%;background:#40403c}
.cover-photo{position:absolute;width:100%;height:100%;object-fit:cover}
.alt-cover .cover-photo{object-position:center 43%}
.four-cover .cover-photo{object-position:center 50%}
.linda-cover .cover-photo{object-position:45% 40%}
.device{background:#f6f5f2;border:1px solid #fff9;border-radius:7px 7px 0 0;overflow:hidden;box-shadow:0 12px 44px #17151950}
.inset-device{position:absolute;width:53%;right:6%;bottom:-6%;transform:rotate(-4deg);transform-origin:bottom right}
.inset-device img{width:100%;aspect-ratio:1.58;object-fit:cover;object-position:top}
.four-cover .inset-device{width:62%;right:6%}
.device-bar{display:flex;align-items:center;gap:4px;padding:4px 7px;border-bottom:1px solid #ddd7}
.device-bar i{background:#a7a3a0;width:3px;height:3px;border-radius:50%}
.archive{padding-block:clamp(45px,5vw,80px) clamp(56px,7vw,112px)}
.archive-head{margin-bottom:20px}
.archive-head h2{font-size:clamp(1.75rem,2.6vw,2.9rem)}
.archive-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,48px)}
.archive-item{border-block:1px solid var(--line);padding-block:16px;display:flex;align-items:center;gap:clamp(13px,1.9vw,28px)}
.archive-item img{width:clamp(56px,7.8vw,110px);height:auto;aspect-ratio:1.2;object-fit:cover;object-position:top;border-radius:6px}
.archive-item h3{font-size:clamp(1.4rem,2.5vw,2.5rem);margin-top:5px}
.archive-item .overline{color:var(--copy);font-size:.63rem}
.circle{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;margin-left:auto;border:1px solid #38343b55;border-radius:50%;font-size:1.05rem}
.archive-item:hover .circle{background:var(--ink);color:white}
.studio{background:#eae6f1;padding-block:clamp(64px,7.4vw,118px)}
.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:11%}
.studio h2{font-size:clamp(2.9rem,4.7vw,5.2rem);max-width:12ch;margin-top:21px;line-height:1.04}
.studio h2 em{color:#594775}
.practice article{padding-block:22px;border-top:1px solid #94869c6b}
.practice article:last-child{padding-bottom:0}
.practice h3{font-size:clamp(1.45rem,2vw,2.1rem);letter-spacing:-.045em}
.practice p{font-size:.96rem;margin-top:9px;max-width:54ch;color:#4e4857}
.lab{background:#1c1e26;color:#f4f0f8}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;padding-block:clamp(46px,6vw,95px)}
.lab-symbol{overflow:hidden;border-radius:12px;background:#14151a}
.lab-symbol img{width:100%;height:auto}
.lab h2{margin-block:13px 15px}
.lab-grid>div>p:not(.overline){max-width:45ch;color:#dbd9e3}
.lab .text-link{margin-top:17px;border-bottom:1px solid #a9a6b3}
.contact{background:#eeeadd}
.contact-inner{padding-block:clamp(56px,6.3vw,108px)}
.contact h2{margin-top:15px}
.contact-action{width:min(44%,440px)}
.contact-action p{font-size:clamp(.99rem,1.25vw,1.19rem);max-width:33ch}
.contact-action a{display:inline-flex;gap:14px;align-items:center;margin-top:15px;border-bottom:1px solid;font-size:clamp(1.5rem,2.7vw,2.8rem);font-weight:540;letter-spacing:-.065em}
.foot{padding-block:22px;font-size:.76rem}
.foot>span{color:var(--copy)}
@media(max-width:920px){
  .hero h1{font-size:clamp(4rem,8.4vw,5.5rem)}
  .work-detail{font-size:.85rem}.work-copy{padding:24px}.work-card{grid-template-columns:.86fr 1.14fr}
  .section-intro{align-items:start;flex-direction:column;gap:12px}.section-intro p{max-width:54ch}
}
@media(max-width:700px){
  :root{--nav-height:62px}.nav{gap:12px}.nav nav{gap:16px;font-size:.78rem}.brand{gap:8px;font-size:.86rem}.brand img{width:32px}
  .hero-grid{grid-template-columns:minmax(0,1fr);align-content:center;row-gap:clamp(18px,4svh,42px)}
  .hero-copy{padding:0}.hero h1{font-size:clamp(3.7rem,12.7vw,5.6rem)}
  .hero-copy p{margin-top:16px;max-width:43ch;font-size:.96rem}.actions{gap:20px;margin-top:18px}
  h2{font-size:clamp(2.7rem,8.8vw,4rem)}
  .section-intro{margin-block:40px 23px;gap:11px}.section-intro p{font-size:.92rem}
  .work-card{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0;border-radius:13px}
  .work-image{grid-row:1;aspect-ratio:1.95;min-height:0}
  .work-copy{padding:21px;gap:13px}.work-copy h3{font-size:clamp(2.25rem,8vw,3.35rem)}
  .work-lead{margin-top:6px;max-width:30ch;font-size:1.09rem}.work-detail{display:none}
  .work-copy .overline{font-size:.62rem}.work-open{min-height:43px;font-size:.79rem}
  .archive{padding-block:38px 48px}.archive-head{align-items:baseline;gap:12px;margin-bottom:10px}.archive-head .text-link{font-size:.76rem;gap:5px}
  .archive-grid{grid-template-columns:1fr;gap:0}.archive-item~.archive-item{border-top:0}
  .studio-grid,.lab-grid{grid-template-columns:1fr;gap:28px}.studio h2{max-width:none;margin-top:14px}.studio h2 .wide{display:none}
  .lab-symbol{order:2}.contact-inner{align-items:start;gap:25px;flex-direction:column}.contact-action{width:100%}
  .foot{flex-wrap:wrap;gap:10px 20px}.foot>span{order:3;width:100%}
}
@media(max-width:410px){.topbar .brand span{display:none}.topbar .brand{min-height:44px;padding-right:8px}.topbar .brand img{width:38px}.nav nav{gap:18px}}
@media(max-width:375px){.nav nav{gap:11px;font-size:.74rem}.nav .nav-cta{padding-inline:10px}.nav .nav-cta span{display:none}.archive-head{align-items:start;flex-direction:column;gap:0}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .inset-device,.circle,.work-open,.button,.nav-cta{transition:transform .45s cubic-bezier(.2,.72,.15,1),color .2s,background .2s}
  .work-card:hover .inset-device{transform:translateY(-4px) rotate(-2deg)}
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

@media(min-width:701px) and (max-width:900px) and (orientation:portrait){
  .hero-grid{grid-template-columns:minmax(0,1fr);align-content:center;row-gap:22px}
  .hero-copy{padding:0}.hero h1{font-size:clamp(4.6rem,9.4vw,6rem)}
  .hero-grid .device-stage{width:min(100%,670px);justify-self:center}
}
@media(max-height:470px) and (min-width:610px) and (orientation:landscape){
  .hero-grid{grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);align-content:center;padding-block:14px}
  .hero h1{font-size:clamp(2.45rem,6vw,4.2rem)}
  .hero-copy{padding:0}.hero-copy p{font-size:.85rem;line-height:1.4;margin-top:12px}
  .hero-copy .actions{margin-top:12px;gap:12px}.hero-copy .button{min-height:39px;padding:7px 13px}
}
.site-footer{background:var(--footer-bg);color:#f4f1f6;}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(20px,7vw,130px);padding-block:clamp(30px,5vw,80px)}
.footer-signature{min-width:0;position:relative;}
.footer-emblem{position:relative;width:100%;height:clamp(180px,23vw,355px);isolation:isolate}
.footer-emblem::before{content:"";position:absolute;inset:4% 2%;background:radial-gradient(ellipse at center,#4d445c38,transparent 69%);pointer-events:none}
.footer-emblem .art-logo{position:absolute;width:min(70%,320px);aspect-ratio:28/20.195;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg) rotateY(-10deg);filter:drop-shadow(0 12px 13px #0006)}
.footer-wordmark{display:block;text-align:center;margin-top:2px;font-size:.85rem;font-weight:620;letter-spacing:.015em;color:#d5cfe0}
.footer-info{min-width:0}
.footer-contact p{font-size:.82rem;color:#b9b3c1}
.footer-contact a{display:inline-flex;align-items:center;gap:.33em;min-height:44px;font-size:clamp(1.5rem,3.35vw,3.8rem);line-height:1.22;letter-spacing:-.065em}
.footer-contact a:hover,.footer-links a:hover{text-decoration:underline;text-underline-offset:.22em}
.footer-contact span{font-size:.59em;color:var(--lavender)}
.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:3px 20px;border-block:1px solid #4a4650;margin-top:20px;padding-block:7px}
.footer-links a{min-height:38px;font-size:.84rem;gap:5px}
.footer-info small{display:block;margin-top:13px;color:#b9b3c1;font-size:.73rem;line-height:1.55}
@media(max-width:700px){
  .footer-grid{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:18px;padding-block:35px}
  .footer-emblem{height:clamp(100px,20vw,150px)}.footer-emblem .art-logo{width:83%}
  .footer-wordmark{font-size:.67rem}.footer-contact a{font-size:clamp(1.16rem,4.7vw,1.85rem)}
  .footer-links{gap:0 12px;margin-top:12px;padding-block:4px}.footer-links a{font-size:.75rem}
}

@media(max-width:375px){
  .hero .actions{gap:10px}.hero .button{gap:8px;padding-inline:14px}
  .hero .text-link{gap:6px;font-size:.8rem}
}
@media(max-width:700px) and (max-height:670px) and (orientation:portrait){
  .hero-grid{row-gap:8px;padding-block:7px;grid-template-rows:auto auto}
  .hero h1{font-size:clamp(2.65rem,12vw,3.5rem)}
  .hero-copy p{font-size:.885rem;line-height:1.42;margin-top:10px}
  .hero .actions{margin-top:12px}.hero .button{min-height:41px}
  .hero .device-stage{width:min(100%,calc(40svh * 1.24))}
}