@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --bg:#0a0a0a;
  --panel:#111;
  --text:#f0eee8;
  --muted:#8b8983;
  --line:rgba(255,255,255,.14);
  --accent:#c8ff35;
  --soft:#d4d0c8;
  --invert:#f0eee8;
  --max:1560px;
}
html[data-theme="light"]{
  --bg:#eeeae2;
  --panel:#e4dfd5;
  --text:#11110f;
  --muted:#666159;
  --line:rgba(0,0,0,.16);
  --accent:#5b48ff;
  --soft:#36332e;
  --invert:#11110f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"DM Sans",Arial,sans-serif;overflow-x:hidden;
  transition:background .4s,color .4s;
}
body.menu-open,body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#111}

.preloader{
  position:fixed;inset:0;z-index:999;background:#0a0a0a;color:#fff;
  display:grid;place-items:center;transition:opacity .55s,visibility .55s;
}
.preloader.done{opacity:0;visibility:hidden}
.preloader-inner{width:min(430px,70vw)}
.preloader-brand{display:block;font:600 13px "Manrope";letter-spacing:.24em;margin-bottom:18px}
.preloader-line{height:1px;background:#333;overflow:hidden}
.preloader-line i{display:block;width:0;height:100%;background:#c8ff35}
.preloader-percent{display:block;text-align:right;margin-top:11px;font-size:11px;color:#999}

.cursor-dot,.cursor-ring{position:fixed;z-index:1000;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-dot{width:5px;height:5px;background:var(--accent)}
.cursor-ring{width:34px;height:34px;border:1px solid color-mix(in srgb,var(--text) 55%,transparent);transition:width .2s,height .2s}
body.cursor-hover .cursor-ring{width:58px;height:58px}
@media(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

.header{
  position:fixed;z-index:100;top:0;left:0;right:0;height:92px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 34px;mix-blend-mode:difference;color:#fff;
}
.logo{display:flex;flex-direction:column;gap:3px}
.logo-main{font:600 15px "Manrope";letter-spacing:.14em}
.logo-sub{font-size:8px;letter-spacing:.23em;opacity:.65}
.header-actions{display:flex;align-items:center;gap:22px}
.theme-toggle,.menu-btn,.modal-close{background:none;border:0;cursor:pointer}
.theme-toggle{font-size:20px}
.menu-btn{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.12em}
.menu-btn i{width:30px;height:1px;background:currentColor;position:relative}
.menu-btn i:after{content:"";position:absolute;right:0;top:-6px;width:19px;height:1px;background:currentColor}

.menu-overlay{
  position:fixed;inset:0;z-index:90;background:#111;color:#f2f0eb;
  clip-path:inset(0 0 100% 0);transition:clip-path .65s cubic-bezier(.76,0,.24,1);
}
.menu-overlay.open{clip-path:inset(0)}
.menu-inner{
  height:100%;padding:120px 6vw 45px;display:grid;
  grid-template-rows:auto 1fr auto;position:relative;z-index:2;
}
.menu-index,.menu-footer{display:flex;justify-content:space-between;color:#777;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.menu-links{align-self:center;display:flex;flex-direction:column}
.menu-links a{
  position:relative;font:500 clamp(48px,7vw,115px)/.93 "Manrope";
  letter-spacing:-.06em;border-bottom:1px solid #2b2b2b;padding:6px 0 12px;
}
.menu-links a:before{content:attr(data-index);font:400 9px "DM Sans";letter-spacing:.1em;color:#666;margin-right:20px;vertical-align:top}
.menu-links a span{display:inline-block;transition:transform .35s,color .35s}
.menu-links a:hover span{transform:translateX(24px);color:#c8ff35}

.hero{min-height:100vh;position:relative;padding:140px 34px 60px;overflow:hidden}
.hero-grid{
  position:absolute;inset:0;opacity:.28;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc(100vw/6) calc(100vw/6);
  mask-image:linear-gradient(to bottom,black,transparent 90%);
}
.hero-topline{
  position:relative;z-index:3;display:flex;justify-content:space-between;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  max-width:var(--max);margin:auto;
}
.hero-main{position:relative;z-index:5;max-width:var(--max);margin:12vh auto 0}
.hero-kicker{text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--muted);margin-bottom:26px}
.hero-title{font:500 clamp(70px,11.2vw,190px)/.78 "Manrope";letter-spacing:-.075em;margin:0;text-transform:uppercase}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line>span{display:block;transform:translateY(110%);animation:titleIn 1s .7s forwards cubic-bezier(.16,1,.3,1)}
.hero-title .line:nth-child(2)>span{animation-delay:.83s}
.hero-title .accent-line{color:var(--accent);padding-bottom:.08em}
@keyframes titleIn{to{transform:none}}
.hero-bottom{display:flex;align-items:flex-end;gap:50px;margin-top:46px}
.hero-bottom p{max-width:450px;color:var(--muted);font-size:14px;line-height:1.7;margin:0}
.circle-link{
  width:112px;
  height:112px;
  border:1px solid var(--accent);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:9px;
  letter-spacing:.12em;
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .3s, color .3s, border .3s;
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:8;
  margin:0;
  background:var(--accent);
  color:#111;
  transform:rotate(-2deg) scale(0);
  transform-origin:center;
}
.hero-art:hover .circle-link,
.circle-link:focus-visible{
  transform:rotate(-2deg) scale(1);
}
.circle-link:hover{
  background:var(--text);
  color:var(--bg);
  border-color:var(--text);
}
.circle-link i{font-style:normal;font-size:18px}

.hero-art{
  position:absolute;right:7%;top:18%;width:min(31vw,490px);aspect-ratio:.83;
  border:1px solid var(--line);overflow:hidden;z-index:2;
  background:url("../images/Gary.jpg") center center / cover no-repeat;
  transform:rotate(2deg);
}
html[data-theme="light"] .hero-art{
  background:url("../images/Gary.jpg") center center / cover no-repeat;
}

.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#000;
  z-index:1;
}
.chrome-type,
.hero-caption{
  z-index:2;
}
.orb{position:absolute;border-radius:50%;filter:blur(1px)}
.orb-a{width:68%;aspect-ratio:1;left:-18%;top:25%;background:radial-gradient(circle at 30% 30%,#fff,#8e8e8e 21%,#242424 57%,#000 71%)}
.orb-b{width:44%;aspect-ratio:1;right:-8%;top:8%;border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 0 55px rgba(255,255,255,.15)}
.chrome-type{position:absolute;bottom:13%;right:7%;font:600 9vw/.8 "Manrope";letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.65)}
.orb-a,
.orb-b{
  display:none;
}
.hero-caption{position:absolute;bottom:15px;left:15px;right:15px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#aaa}
.scroll-note{position:absolute;bottom:30px;left:34px;display:flex;align-items:center;gap:15px;font-size:8px;letter-spacing:.18em;color:var(--muted)}
.scroll-note i{width:70px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scroll-note i:after{content:"";position:absolute;width:24px;height:1px;background:var(--text);animation:scrollLine 1.8s infinite}
@keyframes scrollLine{from{left:-24px}to{left:70px}}

.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.marquee-track{display:flex;align-items:center;gap:34px;width:max-content;padding:20px 0;animation:marquee 28s linear infinite}
.marquee span{font:500 12px "Manrope";letter-spacing:.18em}.marquee b{color:var(--accent);font-weight:400}
@keyframes marquee{to{transform:translateX(-50%)}}

.section-pad{max-width:var(--max);margin:auto;padding:150px 34px}
.section-intro{display:grid;grid-template-columns:.42fr 1.1fr .65fr;gap:30px;align-items:end;margin-bottom:70px}
.section-index{font-size:9px;letter-spacing:.16em;color:var(--muted)}
.section-intro h2{font:500 clamp(58px,8vw,120px)/.88 "Manrope";letter-spacing:-.065em;margin:0}
.section-intro h2 span{color:var(--accent)}
.section-intro p{font-size:13px;line-height:1.65;color:var(--muted);margin:0 0 8px}
.section-intro.compact{grid-template-columns:.42fr 1fr}.section-intro.compact h2{grid-column:2}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;padding-left:calc(42% + 12px)}
.filter{border:1px solid var(--line);background:none;border-radius:100px;padding:9px 14px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.filter.active,.filter:hover{background:var(--text);color:var(--bg)}

.projects{display:grid;grid-template-columns:1fr 1fr;gap:75px 24px}
.project{transition:opacity .35s,transform .35s}.project.hidden{display:none}
.project:nth-child(even){margin-top:120px}
.project-open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.project-image{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel);transform:translateZ(0)}

.project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.project-wide .project-image{aspect-ratio:5/4}
.project-image:after{content:"VIEW PROJECT ↗";position:absolute;right:18px;bottom:18px;background:var(--accent);color:#111;border-radius:50%;width:92px;height:92px;display:grid;place-items:center;text-align:center;font-size:8px;letter-spacing:.1em;transform:scale(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.project:hover .project-image:after{transform:scale(1)}
.project-info{display:flex;justify-content:space-between;gap:20px;padding-top:16px;border-top:1px solid var(--line);margin-top:15px}
.project-type,.project-year{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.project-info h3{font:500 26px "Manrope";letter-spacing:-.035em;margin:7px 0 0}

.art-jewellery{background:#111}
.gem{position:absolute;aspect-ratio:1;transform:rotate(45deg);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 0 40px rgba(255,255,255,.18),0 0 60px rgba(255,210,170,.18)}
.gem-one{width:32%;left:18%;top:25%}.gem-two{width:22%;right:18%;bottom:17%}
.art-word{font:500 clamp(45px,7vw,105px)/1 "Manrope";letter-spacing:-.07em;color:#fff;mix-blend-mode:overlay}
.art-brand{background:#d5d0c6;color:#111}
.brand-shape{position:absolute;border-radius:50%}.brand-shape.a{width:65%;aspect-ratio:1;background:#111;top:-12%;right:-18%}.brand-shape.b{width:44%;aspect-ratio:1;background:var(--accent);bottom:7%;left:8%}
.brand-monogram{position:absolute;right:7%;bottom:6%;font:600 6vw "Manrope";letter-spacing:-.08em;color:#f4f1ea}
.art-exhibition{
  background:url("../images/show-space/show-space.jpg") center center / cover no-repeat;
  display:flex;
  align-items:flex-end;
  padding:7%;
}

.art-exhibition:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(8,8,8,.08) 0%,
    rgba(8,8,8,.10) 38%,
    rgba(8,8,8,.42) 100%
  );
  z-index:0;
}

.art-exhibition>span{
  font:500 6vw/.82 "Manrope";
  letter-spacing:-.07em;
  color:#f2f2f2;
  position:relative;
  z-index:2;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

.expo-line{
  position:absolute;
  width:1px;
  background:rgba(255,255,255,.48);
  height:130%;
  top:-10%;
  transform:rotate(32deg);
  z-index:1;
}

.l1{left:25%}
.l2{left:50%}
.l3{left:75%}
.art-transit{background:linear-gradient(110deg,#1b1b1b 0 48%,#d7d2c7 48%);display:flex;align-items:center;padding:6%}
.transit-copy{font:600 7vw/.82 "Manrope";letter-spacing:-.075em;color:#f4f2ec;mix-blend-mode:difference;z-index:3}
.transit-window{position:absolute;right:10%;top:14%;width:28%;height:70%;border:1px solid rgba(0,0,0,.4);box-shadow:18px 18px 0 rgba(0,0,0,.12)}
.art-digital{background:#2c3040}.screen{position:absolute;border:1px solid rgba(255,255,255,.38);background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.02));box-shadow:0 28px 60px rgba(0,0,0,.32)}
.screen.s1{width:62%;height:42%;left:10%;top:16%;transform:rotate(-9deg)}.screen.s2{width:55%;height:48%;right:5%;bottom:10%;transform:rotate(7deg)}
.art-digital>span{position:absolute;left:8%;bottom:8%;font:500 4.2vw/.9 "Manrope";letter-spacing:-.06em;color:#fff}
.art-editorial{background:#e5ded1;color:#141414}.editorial-circle{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:#9d1f22;right:-18%;top:15%}
.editorial-small{position:absolute;left:7%;top:8%;font-size:9px;letter-spacing:.18em}.editorial-big{position:absolute;left:5%;bottom:3%;font:600 8vw/.8 "Manrope";letter-spacing:-.08em}

.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement-inner{max-width:var(--max);margin:auto;padding:145px 34px;display:grid;grid-template-columns:.42fr 1.58fr}
.statement-index{font-size:9px;letter-spacing:.16em;color:var(--muted)}
.statement-text{font:500 clamp(45px,6.3vw,100px)/1.03 "Manrope";letter-spacing:-.055em;margin:0}
.statement-text em{font-family:Georgia,serif;font-weight:400}.statement-text span{color:var(--accent)}

.about-grid{display:grid;grid-template-columns:minmax(250px,.62fr) 1.38fr;gap:54px;align-items:start}
.about-label{display:flex;flex-direction:column;gap:7px;font-size:9px;letter-spacing:.14em;color:var(--muted)}

.about-side{display:flex;flex-direction:column;gap:26px}
.about-photo-wrap{
  width:100%;
  max-width:360px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#080808;
}
.about-photo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.about-main h2{font:500 clamp(48px,6.5vw,96px)/.98 "Manrope";letter-spacing:-.055em;max-width:1100px;margin:0 0 65px}
.about-columns{display:grid;grid-template-columns:1fr 1fr;gap:45px;max-width:900px}
.about-columns p{color:var(--muted);line-height:1.75;font-size:14px;margin:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--line);margin-top:80px;padding-top:25px}
.stats div{display:flex;flex-direction:column;gap:8px}.stats strong{font:500 34px "Manrope";letter-spacing:-.04em}.stats span{font-size:9px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

.services{border-top:1px solid var(--line)}
.service-list{border-top:1px solid var(--line)}
.service-item{display:grid;grid-template-columns:70px 1fr 1fr 50px;gap:25px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .3s}
.service-item:hover{padding-left:15px}
.service-num{font-size:9px;color:var(--muted)}
.service-item h3{font:500 34px "Manrope";letter-spacing:-.04em;margin:0}
.service-item p{font-size:12px;line-height:1.6;color:var(--muted);margin:0;max-width:470px}
.service-arrow{font-size:24px;text-align:right;color:var(--accent)}

.contact{min-height:88vh;background:var(--accent);color:#111;padding:60px max(34px,calc((100vw - var(--max))/2 + 34px));display:flex;flex-direction:column;justify-content:space-between}
.contact-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.contact h2{font:500 clamp(70px,10vw,165px)/.82 "Manrope";letter-spacing:-.075em;text-transform:uppercase;margin:9vh 0}
.contact h2 em{font-family:Georgia,serif;font-weight:400;text-transform:none}
.contact-bottom{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:end}
.contact-bottom p{max-width:420px;font-size:13px;line-height:1.6;margin:0}
.email-link{font:500 clamp(25px,4vw,60px) "Manrope";letter-spacing:-.04em;border-bottom:2px solid #111;padding-bottom:8px;display:flex;justify-content:space-between;align-items:center}

footer{padding:25px 34px;display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}

.project-modal{position:fixed;inset:0;z-index:200;background:var(--bg);color:var(--text);overflow:auto;transform:translateY(100%);transition:transform .65s cubic-bezier(.76,0,.24,1)}
.project-modal.open{transform:none}
.modal-close{position:fixed;right:28px;top:28px;z-index:2;background:var(--text);color:var(--bg);border-radius:100px;padding:12px 16px;font-size:9px;letter-spacing:.12em}
.modal-content{max-width:1200px;margin:auto;padding:120px 34px 90px}
.modal-meta{display:flex;gap:20px;font-size:9px;letter-spacing:.14em;color:var(--muted)}
.modal-content h2{font:500 clamp(65px,10vw,145px)/.86 "Manrope";letter-spacing:-.07em;margin:35px 0 45px}
.modal-content>p{max-width:700px;color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:70px}
.modal-art{height:min(70vh,780px);background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--accent) 35%,var(--panel)));display:grid;place-items:center;text-align:center}

.modal-art video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#000;
}

.modal-art.flipbook-stage iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#0a0a0a;
}


.modal-art span{font:500 clamp(35px,5vw,72px)/.9 "Manrope";letter-spacing:-.05em}
.modal-details{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--line);margin-top:25px;padding-top:20px}
.modal-details div{display:flex;flex-direction:column;gap:8px}.modal-details span{font-size:8px;letter-spacing:.14em;color:var(--muted)}.modal-details strong{font-size:13px;font-weight:500}

.reveal-up{opacity:0;transform:translateY(20px);animation:revealUp .8s 1.1s forwards}@keyframes revealUp{to{opacity:1;transform:none}}

@media(max-width:900px){
  .circle-link{
    width:86px;
    height:86px;
    right:12px;
    bottom:12px;
    font-size:8px;
    transform:rotate(-2deg) scale(1);
  }

  .header{height:76px;padding:0 18px}.logo-sub{display:none}.theme-toggle{display:none}
  .hero{padding:110px 18px 45px;min-height:900px}.hero-topline span:nth-child(2){display:none}
  .hero-main{margin-top:11vh}.hero-title{font-size:clamp(62px,18vw,110px)}
  .hero-art{width:55vw;right:-8%;top:47%;opacity:.82}.hero-bottom{display:block;margin-top:30px}.hero-bottom p{max-width:300px}
  .scroll-note{left:18px}
  .section-pad{padding:100px 18px}.section-intro{grid-template-columns:1fr;gap:20px}.section-intro h2,.section-intro.compact h2{grid-column:auto}.section-intro p{max-width:420px}
  .filters{padding-left:0}
  .projects{grid-template-columns:1fr;gap:58px}.project:nth-child(even){margin-top:0}.project-wide .project-image,.project-image{aspect-ratio:4/5}
  .project-info h3{font-size:23px}
  .statement-inner,.about-grid{grid-template-columns:1fr;gap:40px;padding:95px 18px}.about-side{gap:18px}.about-photo-wrap{max-width:320px}.statement-text{font-size:clamp(40px,11vw,70px)}
  .about-columns{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.stats div:last-child{grid-column:1/-1}
  .service-item{grid-template-columns:40px 1fr 30px}.service-item p{grid-column:2}.service-arrow{grid-column:3;grid-row:1}
  .contact{padding:40px 18px;min-height:760px}.contact-bottom{grid-template-columns:1fr;gap:45px}
  footer{padding:22px 18px;flex-wrap:wrap}.modal-content{padding:100px 18px 70px}.modal-details{grid-template-columns:1fr}
  .menu-inner{padding:105px 20px 35px}.menu-links a{font-size:clamp(46px,14vw,80px)}
}


.modal-art.flipbook-stage{
  height:86vh;
  min-height:720px;
  aspect-ratio:auto;
  max-height:none;
  background:#0a0a0a;
}



@media(max-width:1100px){
  .modal-art.flipbook-stage{
    height:78vh;
    min-height:620px;
  }
}
@media(max-width:700px){
  .modal-art.flipbook-stage{
    height:72vh;
    min-height:520px;
  }
}


/* Homepage background logo watermark */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-logo-bg{
  position:absolute;
  left:20%;
  top:17%;
  width:min(44vw,680px);
  aspect-ratio:1/1;
  background:url("../images/logo.png") center center / contain no-repeat;
  opacity:.085;
  pointer-events:none;
  z-index:0;
}
.hero-main,
.hero-copy,
.hero-art,
.scroll-note{
  z-index:2;
}
@media(max-width:900px){
  .hero-logo-bg{
    left:8%;
    top:24%;
    width:68vw;
    opacity:.065;
  }
}