body{margin:0;background:#0b0a09}
.navl{position:relative;font-size:13px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:#e6dfd0;padding:6px 0;transition:color .25s}
.navl::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:#d4af6a;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.navl:hover{color:#d4af6a}.navl:hover::after{transform:scaleX(1)}
.navpill{font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#d4af6a;border:1px solid rgba(212,175,106,0.6);border-radius:999px;padding:10px 22px;transition:background .25s,color .25s}
.navpill:hover{background:#d4af6a;color:#0b0a09}
.cdot,.cring{display:none}
@media (pointer:fine){
.rcroot.cur-on,.rcroot.cur-on *{cursor:none !important}
.rcroot.cur-on .cdot{display:block;position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:9999;opacity:0;transition:width .25s,height .25s,margin .25s}
.rcroot.cur-on.cur-vis .cdot{opacity:1}
.rcroot.cur-hover .cdot{width:70px;height:70px;margin:-35px 0 0 -35px}
}
#services h2,#services h3,#about h2,#services [style*="Cormorant"]{font-family:'Bricolage Grotesque',system-ui,sans-serif !important;font-style:normal !important;letter-spacing:-0.035em}
#services h2,#about h2{font-weight:800 !important;line-height:1.02 !important}
#about h2 span{font-style:normal !important}
#about p,#about [style*="Manrope"]{font-family:Figtree,system-ui,sans-serif}
#services h3{font-weight:800 !important}
#services p,#services .btile div{font-family:Figtree,system-ui,sans-serif}
#services #statement p,#services #headline h2{line-height:1.05 !important}
a{color:#d4af6a;text-decoration:none}a:hover{color:#f0d79a}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq{animation:marquee 32s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.mq,.mq span span{animation:none}}
@keyframes sway{0%,100%{transform:rotateY(-16deg) rotateX(4deg)}50%{transform:rotateY(16deg) rotateX(-3deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes glowp{0%,100%{opacity:0.6}50%{opacity:1}}
.sway{animation:sway 8s ease-in-out infinite;transform-style:preserve-3d}
.bob{animation:bob 6s ease-in-out infinite}
.glowp{animation:glowp 5s ease-in-out infinite}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:1}100%{transform:translateY(-300px) scale(0.3);opacity:0}}
.spark{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff6d8 0%,#e6c476 45%,rgba(212,175,106,0) 72%);box-shadow:0 0 12px 3px rgba(230,196,118,0.55);animation-name:rise;animation-iteration-count:infinite;animation-timing-function:ease-out;pointer-events:none}
@media (prefers-reduced-motion: reduce){.sway,.bob,.glowp,.spark{animation:none}.spark{opacity:0.5}}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:270px 210px;gap:16px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,106,0.55)}50%{box-shadow:0 0 0 14px rgba(212,175,106,0)}}
.pulse{animation:pulse 2.6s ease-in-out infinite}
@keyframes prog{from{width:8%}to{width:92%}}
.prog{animation:prog 9s linear infinite}
@media (prefers-reduced-motion: reduce){.pulse,.prog{animation:none}}
.btile{position:relative;overflow:hidden;border-radius:32px;padding:29px;display:flex;flex-direction:column;justify-content:space-between;transition:transform 0.4s cubic-bezier(.2,.8,.2,1),box-shadow 0.4s}
.btile:hover{transform:translateY(-6px) rotate(-0.4deg);box-shadow:0 30px 60px rgba(20,17,10,0.2)}
@media (max-width: 860px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .t1{grid-row:auto}}

@media (prefers-reduced-motion: reduce){.btile{transition:none}.btile:hover{transform:none}}
.deck{perspective:1400px}
.tilt{transition:transform 0.5s cubic-bezier(.2,.8,.2,1),box-shadow 0.5s;transform-style:preserve-3d;will-change:transform}
.tilt:hover{transform:rotateY(-9deg) rotateX(6deg) translateZ(26px);box-shadow:0 40px 80px rgba(212,175,106,0.25)}
.tilt .pop{transition:transform 0.5s cubic-bezier(.2,.8,.2,1);transform:translateZ(0)}
.tilt:hover .pop{transform:translateZ(60px)}
.tilt .shine{transition:opacity 0.5s;opacity:0}
.tilt:hover .shine{opacity:1}
@media (prefers-reduced-motion: reduce){.tilt,.tilt .pop{transition:none}.tilt:hover,.tilt:hover .pop{transform:none}}
html{scroll-behavior:smooth}
body{margin:0;background:#0b0a09}
.rcroot{position:relative;font-family:Manrope,sans-serif;background:#0b0a09;color:#f3ede2;overflow:hidden}
.rcroot [data-href]{cursor:pointer}
.cdot{position:fixed !important}

/* sticky navbar */
.rcroot{overflow:clip}
.topnav{position:sticky;top:0;z-index:300;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:12px max(clamp(20px,5vw,72px),calc((100% - 1440px)/2 + 72px));
  background:rgba(11,10,9,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:background .35s,padding .35s,border-color .35s,box-shadow .35s}
.topnav .brand{display:block;line-height:0}
.topnav .brand img{height:88px;width:auto;display:block;transition:height .35s cubic-bezier(.2,.8,.2,1)}
.topnav.shrunk{background:rgba(11,10,9,0.88);border-bottom-color:rgba(212,175,106,0.22);box-shadow:0 12px 30px rgba(0,0,0,0.35);padding-top:6px;padding-bottom:6px}
.topnav.shrunk .brand img{height:62px}
section[id],div[id=services],div[id=projects],div[id=about],div[id=contact]{scroll-margin-top:70px}
@media (max-width:640px){.topnav .brand img{height:64px}.topnav.shrunk .brand img{height:52px}.topnav nav{gap:18px !important}}

.skip{position:absolute;left:-999px;top:0;z-index:10000;background:#d4af6a;color:#0b0a09;padding:10px 16px;font-weight:700}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid #d4af6a;outline-offset:3px}

/* ---------- MOBILE ---------- */
@media (max-width:860px){
  .bento{grid-template-rows:none;grid-auto-rows:auto}
  .bento .btile{min-height:230px}
  .bento .t1{grid-column:span 2 !important;grid-row:auto !important}
  .bento .t2{grid-column:span 2 !important}
  /* commercial videos: text on top, video collage below (no overlap) */
  .bento .t2{justify-content:flex-start;gap:20px}
  .bento .t2 > div:first-child{max-width:100% !important}
  .bento .t2 > div:first-child p{max-width:100% !important}
  .bento .t2 > div:last-child{position:relative !important;right:auto !important;top:auto !important;bottom:auto !important;width:100% !important;min-width:0 !important;height:170px}
  /* instagram: phone moves below the text */
  .bento .t3 > div:first-child{max-width:100% !important}
  .bento .t3{min-height:260px}
}
@media (max-width:520px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px}
  .bento .btile{border-radius:24px;padding:22px 18px}
  .bento .t1,.bento .t2{grid-column:span 2 !important}
  .bento .t3,.bento .t4{grid-column:span 1 !important;min-height:210px}
  .bento .t3 h3,.bento .t4 h3{font-size:26px !important}
  .bento .t3 p,.bento .t4 p{font-size:13px !important;line-height:1.45 !important}
  .bento .t3 > div:first-child{max-width:100% !important}
  .bento .t1 > div:last-child{height:240px !important}
  .bento .t1 > div:last-child > div{height:190px !important}
  .bento .t1 img{height:164px !important}
  .bento .t3 > div:last-child{width:84px !important;right:8% !important;bottom:-84px !important;height:150px !important;border-radius:20px !important;padding-top:16px !important}
  .bento .t3 > div:last-child svg{width:38px;height:38px}
  #hwords{display:none}
}
@media (max-width:640px){
  .rcroot h1{font-size:clamp(44px,13vw,64px) !important}
  #showcase{max-width:100% !important}
  #showcase > div:nth-child(3){height:470px !important}
  .fl{width:300px !important;height:440px !important;margin:-220px 0 0 -150px !important}
  #projgrid{grid-template-columns:1fr !important}
  #projgrid .tilt{height:380px !important}
  #contact a[data-mag]{padding:1rem 2rem !important;font-size:1.05rem !important}
  .topnav nav{gap:16px !important}
  .navl{font-size:11px;letter-spacing:.1em}
  .navpill{padding:8px 14px;font-size:11px}
}
@media (hover:none){.tilt:hover{transform:none}}

/* ---------- Selected creations: 3 x 2 on desktop ---------- */
#projgrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:48px 32px !important}
#projgrid .tilt{height:480px !important}
@media (max-width:1000px){
  #projgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:36px 24px !important}
  #projgrid .tilt{height:420px !important}
}
@media (max-width:640px){
  #projgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:26px 12px !important}
  #projgrid .tilt{height:250px !important}
  #projgrid .pop:last-child{font-size:25px !important;left:12px !important;bottom:12px !important}
  #projgrid .pop:nth-child(2){left:12px !important;top:12px !important;font-size:16px !important}
  #projgrid .pop:nth-child(3){right:12px !important;top:14px !important;font-size:9px !important;letter-spacing:.14em !important}
  #projgrid > div{gap:12px !important}
  #projgrid > div > div:nth-child(2){font-size:12.5px !important;line-height:1.5 !important}
  #projgrid > div > a{font-size:11px !important}
}