/* ABSTRACT BY FAR — shared design system ("Gallery specimen") */
:root{
  --ink:#0b0a0c;--ink2:#131015;--panel:#16121a;--paper:#ece7dd;--dim:#928b80;
  --gold:#cda45e;--gold-soft:#e6cf9b;--clay:#b8432e;--green:#7fb06a;
  --line:rgba(236,231,221,.12);--line2:rgba(236,231,221,.06);
  --serif:'Fraunces',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--sans:'Hanken Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:300;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
::selection{background:var(--gold);color:var(--ink);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;}
.gold{color:var(--gold);} em.i{font-style:italic;color:var(--gold);font-family:var(--serif);}

/* atmosphere */
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.glow{position:fixed;top:-22%;left:50%;transform:translateX(-50%);width:900px;height:680px;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(205,164,94,.14),transparent 62%);filter:blur(20px);}
.dot-cursor{position:fixed;width:7px;height:7px;border-radius:50%;background:var(--gold);z-index:9999;pointer-events:none;mix-blend-mode:difference;transition:transform .15s ease,opacity .3s;transform:translate(-50%,-50%);opacity:0;}

/* nav */
header{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(8px);border-bottom:1px solid var(--line2);background:rgba(11,10,12,.55);}
nav{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:.01em;}
.brand b{font-weight:600;}.brand i{color:var(--gold);font-style:italic;font-weight:400;}
.navlinks{display:flex;gap:30px;align-items:center;}
.navlinks a{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color .25s;position:relative;}
.navlinks a:hover,.navlinks a.active{color:var(--paper);}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .3s;}
.navlinks a:hover::after,.navlinks a.active::after{width:100%;}
.status{display:flex;align-items:center;gap:8px;color:var(--gold-soft);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;}
.status .pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(205,164,94,.6);animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(205,164,94,.5);}70%{box-shadow:0 0 0 7px rgba(205,164,94,0);}100%{box-shadow:0 0 0 0 rgba(205,164,94,0);}}
@media(max-width:880px){.navlinks{gap:18px;}.navlinks a{font-size:10px;}.status{display:none;}}
@media(max-width:620px){.navlinks{display:none;}}

/* buttons */
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:15px 26px;border:1px solid var(--line);border-radius:2px;transition:all .3s;display:inline-flex;align-items:center;gap:10px;cursor:pointer;background:none;color:var(--paper);}
.btn.primary{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:500;}
.btn.primary:hover{background:var(--gold-soft);transform:translateY(-2px);color:var(--ink);}
.btn:hover{border-color:var(--gold);color:var(--gold);}

/* section heads */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:44px;gap:20px;}
.sec-head h2{font-family:var(--serif);font-weight:360;font-size:clamp(28px,4vw,46px);letter-spacing:-.01em;}
.sec-head h2 em{font-style:italic;color:var(--gold);}
.sec-head .idx{color:var(--gold);white-space:nowrap;}
.pad{padding:110px 0;}
main{position:relative;z-index:1;}

/* page hero (inner pages) */
.phero{padding:160px 0 60px;position:relative;z-index:1;}
.phero .eyebrow{color:var(--gold);margin-bottom:24px;display:flex;align-items:center;gap:14px;}
.phero .eyebrow::before{content:"";width:42px;height:1px;background:var(--gold);}
.phero h1{font-family:var(--serif);font-weight:340;font-size:clamp(48px,8vw,104px);line-height:.94;letter-spacing:-.02em;}
.phero h1 em{font-style:italic;color:var(--gold);font-weight:300;}
.phero p{max-width:520px;margin-top:26px;font-size:18px;color:#cbc4b8;}

/* home hero */
.hero{position:relative;z-index:1;padding:170px 0 80px;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
.eyebrow{color:var(--gold);margin-bottom:26px;display:flex;align-items:center;gap:14px;}
.eyebrow.m::before{content:"";width:42px;height:1px;background:var(--gold);display:inline-block;}
h1.big{font-family:var(--serif);font-weight:340;font-size:clamp(56px,9vw,128px);line-height:.92;letter-spacing:-.02em;}
h1.big em{font-style:italic;color:var(--gold);font-weight:300;}
.lede{max-width:430px;margin:34px 0 40px;font-size:18px;color:#cbc4b8;line-height:1.65;}
.lede b{color:var(--paper);font-weight:500;}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:30px;}}

/* specimen */
.specimen{position:relative;aspect-ratio:3/3.4;border:1px solid var(--line);background:linear-gradient(160deg,#16121a,#0c0a0d);border-radius:3px;overflow:hidden;}
.specimen .placard{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;color:var(--dim);z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;}
.specimen .placard b{color:var(--gold-soft);font-weight:500;}
.spec-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.morph{width:54%;aspect-ratio:1;position:relative;}
.morph .blob{position:absolute;inset:0;background:radial-gradient(circle at 38% 34%,#ff7e9d,transparent 52%),radial-gradient(circle at 66% 70%,var(--clay),transparent 55%),radial-gradient(circle at 50% 50%,#e6cf9b55,transparent 70%);border-radius:46% 54% 60% 40%/52% 44% 56% 48%;animation:morphblob 9s ease-in-out infinite,spin 26s linear infinite;}
.morph .geo{position:absolute;inset:0;animation:geoIn 9s ease-in-out infinite;}
.morph .geo span{position:absolute;border:1px solid var(--gold);}
.morph .geo .s1{inset:6% 6% 50% 50%;}.morph .geo .s2{inset:50% 50% 6% 6%;border-radius:50%;}.morph .geo .s3{inset:24% 30% 24% 30%;transform:rotate(45deg);border-color:var(--gold-soft);}
@keyframes morphblob{0%,100%{border-radius:46% 54% 60% 40%/52% 44% 56% 48%;}50%{border-radius:62% 38% 40% 60%/44% 58% 42% 56%;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes geoIn{0%,40%{opacity:0;transform:scale(.85);}70%,90%{opacity:.85;transform:scale(1);}100%{opacity:0;}}
.spec-scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:scan 5s linear infinite;z-index:2;opacity:.5;}
@keyframes scan{0%{top:8%;}100%{top:92%;}}

/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;white-space:nowrap;position:relative;z-index:1;}
.marquee-track{display:inline-block;animation:slide 28s linear infinite;}
.marquee-track span{font-family:var(--serif);font-style:italic;font-size:30px;color:#2a2620;padding:0 8px;}
.marquee-track span b{color:var(--paper);font-style:normal;font-weight:340;}.marquee-track span em{color:var(--gold);}
@keyframes slide{to{transform:translateX(-50%);}}

/* work grid */
.work{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
.tile{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;cursor:pointer;background:#0e0c10;}
.tile .canvas{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.tile:hover .canvas{transform:scale(1.07);}
.tile .meta{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(8,7,9,.86) 60%);z-index:2;transform:translateY(8px);opacity:.85;transition:.4s;}
.tile:hover .meta{transform:translateY(0);opacity:1;}
.tile .meta .t{font-family:var(--serif);font-size:21px;font-weight:400;}
.tile .meta .c{color:var(--gold-soft);margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;}
.tile .num{position:absolute;top:14px;left:16px;z-index:2;color:rgba(236,231,221,.55);font-family:var(--mono);font-size:11px;letter-spacing:.16em;}
.tile.big{grid-column:span 4;aspect-ratio:16/10;}.tile.tall{grid-column:span 2;aspect-ratio:3/4.2;}
.tile.std{grid-column:span 3;aspect-ratio:16/10;}.tile.sq{grid-column:span 2;aspect-ratio:1;}
@media(max-width:880px){.work{grid-template-columns:repeat(2,1fr);}.tile.big,.tile.tall,.tile.std,.tile.sq{grid-column:span 2;aspect-ratio:16/11;}}

/* css-art canvases */
.a-ad{background:radial-gradient(circle at 62% 38%,#ff6f9c,transparent 50%),radial-gradient(circle at 30% 74%,var(--clay),transparent 58%),linear-gradient(150deg,#1c0f14,#0e0a0c);}
.a-ad::after{content:"";position:absolute;left:50%;top:50%;width:30%;height:42%;transform:translate(-50%,-50%);border-radius:14px;background:linear-gradient(160deg,#ffd9e6,#ff9bbb);box-shadow:0 18px 40px rgba(0,0,0,.4);}
.a-3d{background:radial-gradient(circle at 40% 36%,#fff5e0,#caa257 22%,#3a2c16 60%,#0d0a07 90%),conic-gradient(from 210deg at 60% 60%,#0d0a07,#a07e3e,#0d0a07);}
.a-motion{background:repeating-radial-gradient(circle at 50% 50%,#0e0c10 0 13px,#1d1810 13px 15px),radial-gradient(circle at 50% 50%,#cda45e44,transparent 70%);}
.a-no1{background:linear-gradient(135deg,#e8ddc6 0 50%,#b8432e 50% 100%);}
.a-no1::after{content:"";position:absolute;left:30%;top:26%;width:40%;height:40%;border-radius:50%;background:#0e0c10;}
.a-no1::before{content:"";position:absolute;right:14%;bottom:14%;width:24%;height:24%;background:#e8ddc6;transform:rotate(45deg);}
.a-tool{background:radial-gradient(circle,#e6cf9b 1.4px,transparent 1.6px) 0 0/20px 20px,linear-gradient(#0c0a0d,#120d12);}
.a-no2{background:conic-gradient(from 0deg at 50% 50%,#0e0c10 0 25%,#caa257 25% 50%,#0e0c10 50% 75%,#7a2f22 75% 100%);}
.a-splash{background:radial-gradient(circle at 50% 60%,#ff9bbb,#b8432e 45%,#2a0f14 80%);}
.a-splash::after{content:"";position:absolute;inset:34%;border-radius:50%;background:#ffd9e6;filter:blur(2px);}
.a-wave{background:repeating-linear-gradient(115deg,#0e0c10 0 16px,#caa25733 16px 18px),linear-gradient(#13100c,#0c0a0d);}
.a-cream{background:linear-gradient(160deg,#e8ddc6,#caa257);}
.a-cream::after{content:"";position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%) rotate(45deg);background:#0e0c10;}
.a-cell{background:radial-gradient(circle at 30% 30%,#7fb06a,transparent 40%),radial-gradient(circle at 70% 60%,#caa257,transparent 45%),radial-gradient(circle at 50% 80%,#b8432e,transparent 40%),#0c0a0d;}
.a-mono{background:linear-gradient(135deg,#16131a,#0c0a0d);}
.a-mono::after{content:"";position:absolute;inset:24%;border:1px solid var(--gold);border-radius:50%;box-shadow:0 0 0 10px rgba(205,164,94,.08);}

/* process */
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.step{border-top:1px solid var(--gold);padding-top:26px;}
.step .n{font-family:var(--serif);font-size:13px;color:var(--gold);margin-bottom:20px;letter-spacing:.1em;}
.step h3{font-family:var(--serif);font-weight:380;font-size:30px;margin-bottom:14px;}
.step h3 em{font-style:italic;color:var(--gold);}
.step p{color:#b3aca0;font-size:15px;max-width:32ch;}
.step .viz{height:120px;margin-bottom:26px;border:1px solid var(--line);border-radius:3px;position:relative;overflow:hidden;}
.v1{background:radial-gradient(circle at 50% 60%,#5a4a3a,#1a1410 70%);}
.v1::after{content:"";position:absolute;inset:28% 36%;background:radial-gradient(circle,#d9c4a0,#8a6a44);border-radius:46% 54% 58% 42%/50% 46% 54% 50%;animation:morphblob 7s ease-in-out infinite;}
.v2{background:#120e13;}.v2::after{content:"";position:absolute;inset:30% 38%;border:1px solid var(--gold);transform:rotate(45deg);box-shadow:0 0 0 8px rgba(205,164,94,.12);}
.v3{background:linear-gradient(135deg,#1c0f14,#0e0a0c);}.v3::after{content:"";position:absolute;left:50%;top:50%;width:30%;height:48%;transform:translate(-50%,-50%);border-radius:8px;background:linear-gradient(160deg,#ffd9e6,#ff9bbb);}
@media(max-width:880px){.proc{grid-template-columns:1fr;}}

/* services list */
.svc{border-top:1px solid var(--line);}
.svc-row{display:grid;grid-template-columns:60px 1.3fr 2fr auto;gap:24px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);transition:.4s;}
.svc-row:hover{padding-left:14px;background:linear-gradient(90deg,rgba(205,164,94,.05),transparent);}
.svc-row .sn{color:var(--gold);font-family:var(--mono);font-size:11px;letter-spacing:.16em;}
.svc-row .st{font-family:var(--serif);font-size:28px;font-weight:380;}
.svc-row .sd{color:var(--dim);font-size:15px;}
.svc-row .sp{font-family:var(--mono);color:var(--gold-soft);font-size:13px;white-space:nowrap;}
@media(max-width:880px){.svc-row{grid-template-columns:1fr;gap:10px;}.svc-row .sn{display:none;}}

/* feature rows (services detail) */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:70px 0;border-bottom:1px solid var(--line);}
.feat:nth-child(even) .feat-art{order:2;}
.feat-art{aspect-ratio:4/3;border:1px solid var(--line);border-radius:4px;position:relative;overflow:hidden;}
.feat h3{font-family:var(--serif);font-size:34px;font-weight:380;margin-bottom:8px;}
.feat .pr{color:var(--gold-soft);font-family:var(--mono);font-size:12px;letter-spacing:.14em;margin-bottom:18px;}
.feat p{color:#b8b1a5;margin-bottom:18px;}
.feat ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.feat ul li{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--line);border-radius:20px;padding:6px 12px;}
@media(max-width:780px){.feat{grid-template-columns:1fr;gap:24px;}.feat:nth-child(even) .feat-art{order:0;}}

/* studio / prose */
.prose{max-width:720px;}
.prose p{font-size:18px;color:#cbc4b8;margin-bottom:24px;line-height:1.75;}
.prose p .lead{color:var(--paper);}
.bigquote{font-family:var(--serif);font-weight:330;font-size:clamp(28px,4.4vw,52px);line-height:1.2;letter-spacing:-.01em;margin:20px 0;}
.bigquote em{font-style:italic;color:var(--gold);}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px;}
.toolgrid div{border:1px solid var(--line);border-radius:6px;padding:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);}
.toolgrid div span{display:block;color:var(--dim);font-size:9px;margin-top:6px;letter-spacing:.08em;}

/* filter chips */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);border-radius:24px;color:var(--dim);cursor:pointer;transition:.25s;}
.chip:hover{color:var(--paper);border-color:var(--gold);}
.chip.on{background:var(--gold);color:var(--ink);border-color:var(--gold);}

/* contact */
.contact-cta{text-align:center;padding:120px 0;border-top:1px solid var(--line);position:relative;}
.contact-cta h2{font-family:var(--serif);font-weight:340;font-size:clamp(40px,7vw,92px);line-height:1;letter-spacing:-.02em;}
.contact-cta h2 em{font-style:italic;color:var(--gold);}
.contact-cta .mail{display:inline-block;margin-top:36px;font-family:var(--serif);font-style:italic;font-size:24px;color:var(--gold-soft);border-bottom:1px solid var(--line);padding-bottom:6px;transition:.3s;}
.contact-cta .mail:hover{color:var(--paper);border-color:var(--gold);}

/* form */
.cform{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:720px;}
.cform .full{grid-column:1/-1;}
.cform label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.cform input,.cform textarea,.cform select{width:100%;background:var(--ink2);border:1px solid var(--line);border-radius:6px;padding:14px;color:var(--paper);font-family:var(--sans);font-size:15px;transition:.2s;}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--gold);outline:none;}
.cform textarea{min-height:120px;resize:vertical;}
@media(max-width:620px){.cform{grid-template-columns:1fr;}}

/* footer */
footer{border-top:1px solid var(--line);padding:50px 0 40px;position:relative;z-index:1;margin-top:40px;}
.foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px;}
.foot .fbrand{font-family:var(--serif);font-size:22px;margin-bottom:14px;}
.foot .thesis{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--dim);max-width:34ch;}
.foot .cr{color:#56504a;margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;}
.foot .footnav,.foot .soc{display:flex;gap:20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.foot .footnav a,.foot .soc a{color:var(--dim);transition:.25s;}
.foot .footnav a:hover,.foot .soc a:hover{color:var(--gold);}
.foot .cols{display:flex;gap:48px;flex-wrap:wrap;}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.load{opacity:0;transform:translateY(24px);animation:rise .95s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes rise{to{opacity:1;transform:none;}}
.d1{animation-delay:.1s;}.d2{animation-delay:.25s;}.d3{animation-delay:.4s;}.d4{animation-delay:.55s;}.d5{animation-delay:.7s;}