@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root{
  --black:#181816;
  --black-2:#141412;
  --surface:#20201d;
  --surface-2:#252521;
  --paper:#f2eee7;
  --beige:#d8c6a7;
  --beige-2:#bda98b;
  --muted:#aaa59d;
  --line:#3b3934;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--black)}
body{margin:0;background:var(--black);color:var(--paper);font-family:"Manrope",Arial,Helvetica,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--beige);color:var(--black)}
:focus-visible{outline:2px solid var(--beige);outline-offset:5px}
.shell{max-width:1500px;width:calc(100% - 96px);margin:auto}
.skip{position:fixed;left:16px;top:-100px;z-index:100;background:var(--paper);color:var(--black);padding:12px 16px;border-radius:8px}.skip:focus{top:10px}

.header{background:rgba(24,24,22,.78);color:var(--paper);position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(216,198,167,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.header.scrolled{background:rgba(24,24,22,.94);border-color:rgba(216,198,167,.18);box-shadow:0 14px 40px rgba(0,0,0,.18)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-family:"Outfit",sans-serif;font-size:18px;font-weight:600;letter-spacing:-.55px;display:flex;align-items:center;gap:13px}
.brand-mark{display:grid;place-items:center;background:var(--beige);color:var(--black);width:36px;height:36px;border-radius:50%;font-family:"Outfit",sans-serif;font-size:14px;font-weight:700;letter-spacing:-.8px;transition:transform .45s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-9deg) scale(1.05)}
.navlinks{display:flex;align-items:center;gap:31px;font-size:14px}
.navlinks a{position:relative;transition:color .25s var(--ease)}
.navlinks a:not(.nav-contact):after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--beige);transition:right .35s var(--ease)}
.navlinks a:not(.nav-contact):hover:after{right:0}.navlinks a:hover{color:var(--beige)}
.navlinks .nav-contact{border:1px solid #5a564f;border-radius:100px;padding:10px 20px;transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease),transform .28s var(--ease)}
.navlinks .nav-contact:hover{background:var(--beige);border-color:var(--beige);color:var(--black);transform:translateY(-2px)}
.menu{display:none;background:none;color:inherit;border:1px solid #57534d;padding:8px 13px;border-radius:7px;font-size:14px}

.hero{background:var(--black);color:var(--paper);position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
/* Restored the original composition: the photo runs full-height on the right instead of sitting in a rounded card. */
.hero-photo{position:absolute;inset:0 0 0 auto;width:76%;height:100%;object-fit:cover;object-position:70% 42%;z-index:-2;filter:saturate(.78) contrast(1.035);will-change:transform;transform:translate3d(0,var(--hero-y,0),0) scale(1.015)}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--black) 0%,rgba(24,24,22,.98) 23%,rgba(24,24,22,.76) 48%,rgba(24,24,22,.20) 72%,rgba(24,24,22,.04) 100%),linear-gradient(0deg,rgba(24,24,22,.70),transparent 48%)}
.hero-inner{min-height:540px;display:flex;flex-direction:column;justify-content:center;padding-top:50px;padding-bottom:54px;position:relative}
.eyebrow{font-family:"Outfit",sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.17em;font-weight:600}
.hero .eyebrow{color:var(--beige-2);margin:0 0 22px}
.hero h1,.about h2,.contact h2,.case-header h1,.section-top h2,.case-story h2{font-family:"Outfit",sans-serif}
.hero h1{font-size:clamp(56px,6.5vw,102px);font-weight:600;line-height:.91;letter-spacing:-.06em;margin:0 0 24px;max-width:870px}
.hero h1 .headline-accent{color:var(--beige)}
.hero p{color:#d0cbc2;font-size:18px;max-width:430px;margin:0}
.hero-bottom{display:flex;gap:28px;align-items:center;margin-top:32px}
.button,.behance-cta{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 23px;background:var(--beige);color:var(--black);font-family:"Outfit",sans-serif;font-size:14px;font-weight:700;border:1px solid var(--beige);border-radius:100px;transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .35s var(--ease)}
.button:hover,.behance-cta:hover{transform:translateY(-3px);background:var(--paper);color:var(--black);box-shadow:0 12px 36px rgba(216,198,167,.15)}
.text-link{font-size:14px;border-bottom:1px solid #777169;padding-bottom:4px;color:#d2cec7;transition:color .25s,border-color .25s}.text-link:hover{color:var(--beige);border-color:var(--beige)}
.hero-label{position:absolute;bottom:28px;right:48px;font-size:11px;color:#b9b3aa;letter-spacing:.12em;text-transform:uppercase}

.work{padding:86px 0 110px}
.section-top{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:40px}
.section-top h2{font-size:clamp(44px,4.2vw,68px);font-weight:600;letter-spacing:-.055em;line-height:.96;margin:0}
.section-top sup{font-family:"Outfit",sans-serif;font-size:12px;color:var(--muted);letter-spacing:0;vertical-align:top;margin-left:8px}
.filters{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.filter{border:1px solid #46433e;border-radius:100px;background:none;color:#a9a49c;font-size:13px;padding:8px 14px;transition:transform .25s var(--ease),border-color .25s,color .25s,background .25s}.filter:hover{border-color:var(--beige-2);color:var(--paper);transform:translateY(-2px)}.filter[aria-pressed=true]{background:var(--beige);border-color:var(--beige);color:var(--black);font-weight:700}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 26px}
.project{min-width:0}.project[hidden]{display:none}.project-link{display:block;transition:transform .55s var(--ease)}.project-link:hover{transform:translateY(-7px)}
.cover{overflow:hidden;border-radius:14px;background:var(--surface-2);position:relative;aspect-ratio:808/632;border:1px solid rgba(255,255,255,.05);box-shadow:0 0 0 rgba(0,0,0,0);transition:box-shadow .5s var(--ease),border-color .4s var(--ease)}
.project-link:hover .cover{border-color:rgba(216,198,167,.22);box-shadow:0 22px 46px rgba(0,0,0,.23)}
.cover:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);pointer-events:none}
.cover img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease),filter .55s var(--ease);filter:contrast(1.025) saturate(1.025);will-change:transform}
.project-link:hover .cover img{transform:scale(1.035);filter:contrast(1.05) saturate(1.055)}
.cover-arrow{position:absolute;right:15px;bottom:15px;background:var(--beige);color:var(--black);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;transform:translateY(66px) rotate(-12deg);transition:transform .45s var(--ease)}
.project-link:hover .cover-arrow,.project-link:focus-visible .cover-arrow{transform:translateY(0) rotate(0)}
.card-meta{display:flex;justify-content:space-between;gap:12px;padding-top:18px}.card-meta h3{font-family:"Outfit",sans-serif;font-size:21px;line-height:1.24;letter-spacing:-.6px;font-weight:600;margin:0 0 7px;color:var(--paper)}.card-meta p,.year{font-size:13px;color:var(--muted);margin:0}.year{padding-top:4px;white-space:nowrap}
.work-foot{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line);margin-top:66px;padding-top:28px;font-size:14px;color:var(--muted)}.behance-cta--compact{padding:11px 18px;font-size:13px}

.about{background:var(--surface);color:var(--paper);padding:114px 0;border-block:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(210px,.9fr) 2fr;gap:82px}
.section-label{margin:2px 0 0;display:flex;align-items:center;gap:11px;font-family:"Outfit",sans-serif;font-size:17px;line-height:1;font-weight:600;letter-spacing:-.015em;color:var(--paper);height:max-content;position:sticky;top:116px}
.section-no{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border:1px solid rgba(216,198,167,.58);border-radius:50%;color:var(--beige);font-size:13px;letter-spacing:.04em;background:rgba(216,198,167,.035);box-shadow:inset 0 0 0 5px rgba(216,198,167,.018)}
.section-slash{color:#6f6a62;font-weight:400}.section-name{white-space:nowrap}
.about h2{font-size:clamp(42px,4.6vw,72px);letter-spacing:-.06em;font-weight:600;line-height:1.02;margin:0 0 34px;max-width:880px}
.about-copy{max-width:720px;color:#b8b2aa;font-size:18px;line-height:1.78}.about-copy p{margin-top:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:48px;padding-top:34px;border-top:1px solid #48443e}.stats strong{font-family:"Outfit",sans-serif;font-size:62px;line-height:1;letter-spacing:-3px;font-weight:600;display:block;color:var(--beige)}.stats p{color:#aaa49c;font-size:14px;margin:8px 0}

.experience{padding:108px 0;border-bottom:1px solid var(--line)}.rows{border-top:1px solid var(--line)}.row{display:grid;grid-template-columns:1fr 1fr;gap:42px;padding:31px 0;border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}.row:hover{border-color:#5b554d}.row h3{font-family:"Outfit",sans-serif;font-size:22px;letter-spacing:-.55px;font-weight:600;margin:0 0 6px}.row p{color:var(--muted);font-size:16px;margin:0}.row .role{font-size:14px;color:var(--beige-2)}
.services{padding:108px 0}.service-list{display:grid;grid-template-columns:1fr 1fr;gap:44px}.service{border-top:1px solid var(--line);padding-top:25px;transition:transform .45s var(--ease),border-color .35s}.service:hover{transform:translateY(-4px);border-color:var(--beige-2)}.service h3{font-family:"Outfit",sans-serif;font-size:26px;font-weight:600;letter-spacing:-.75px;margin:15px 0 11px}.service p{color:var(--muted);margin:0;font-size:16px;max-width:440px}.service-no{font-family:"Outfit",sans-serif;font-size:12px;color:var(--beige-2)}

.contact{background:var(--black-2);color:var(--paper);padding:94px 0 34px;border-top:1px solid var(--line)}.contact-main{display:flex;justify-content:space-between;align-items:end;gap:40px;padding-bottom:76px}.contact h2{font-size:clamp(54px,7.5vw,112px);font-weight:600;letter-spacing:-.07em;line-height:.91;margin:20px 0 34px}.contact .eyebrow{color:var(--beige-2)}.email{display:inline-block;font-family:"Outfit",sans-serif;font-size:clamp(17px,2vw,26px);border-bottom:1px solid #6e685f;padding-bottom:7px;overflow-wrap:anywhere;transition:color .25s,border-color .25s}.email:hover{color:var(--beige);border-color:var(--beige)}.socials{display:flex;gap:18px 25px;font-size:14px;padding-bottom:8px;flex-wrap:wrap;justify-content:flex-end;max-width:430px}.socials a{transition:color .25s}.socials a:hover{color:var(--beige)}.footer{border-top:1px solid #37342f;display:flex;justify-content:space-between;gap:24px;padding-top:26px;color:#8f8a82;font-size:12px}.footer a{color:#c9c4bc}

.case-header{padding:74px 0 50px}.back{font-size:14px;color:var(--muted);display:inline-block;margin-bottom:58px;transition:color .25s,transform .25s}.back:hover{color:var(--beige);transform:translateX(-3px)}.case-header h1{font-size:clamp(52px,6.3vw,94px);font-weight:600;letter-spacing:-.065em;line-height:.95;margin:18px 0 20px;max-width:1220px}.case-sub{font-size:22px;color:#b6b0a8;margin:0 0 32px}.case-details{display:flex;flex-wrap:wrap;align-items:center;gap:25px 36px;border-top:1px solid var(--line);padding-top:22px;color:var(--muted);font-size:14px}.behance-mini{display:inline-flex;align-items:center;border:1px solid #5d574f;border-radius:999px;padding:9px 14px;color:var(--paper);font-family:"Outfit",sans-serif;font-weight:600;transition:background .25s,color .25s,border-color .25s,transform .25s}.behance-mini:hover{background:var(--beige);color:var(--black);border-color:var(--beige);transform:translateY(-2px)}
/* The source project covers are small. The stage stays wide, but the artwork itself is deliberately kept near homepage-card size so it no longer looks enlarged/pixelated. */
.case-cover{max-width:1180px;min-height:430px;margin:0 auto;position:relative;display:grid;place-items:center;padding:clamp(44px,5vw,78px);overflow:hidden;border:1px solid var(--line);border-radius:20px;background:radial-gradient(circle at 50% 44%,rgba(216,198,167,.07),transparent 34%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),var(--surface);background-size:auto,34px 34px,34px 34px,auto}
.case-cover:before{content:"PROJECT PREVIEW";position:absolute;top:20px;left:22px;font-family:"Outfit",sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;color:#777169}
.case-cover img{width:min(100%,620px);height:auto;margin:auto;border-radius:11px;filter:none;box-shadow:0 24px 70px rgba(0,0,0,.32);transform:translateZ(0)}
.case-story{padding:84px 0}.case-story h2{font-weight:600;font-size:42px;letter-spacing:-1.8px;margin:0 0 20px;line-height:1.04}.case-story p{font-size:18px;color:var(--muted);line-height:1.82;margin-top:0;max-width:760px}.case-story h3{font-family:"Outfit",sans-serif;font-size:16px;margin:30px 0 8px;color:var(--paper)}.case-story .behance-cta{margin-top:18px}.case-gallery{max-width:1200px;margin:auto;display:grid;gap:30px;padding-bottom:84px}.case-gallery img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.035)}.case-end{display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:1px solid var(--line);padding:32px 0 80px}.case-end a{font-size:16px;transition:color .25s,transform .25s}.case-end a:hover{color:var(--beige)}.case-end a:first-child:hover{transform:translateX(-3px)}.case-end a:last-child:hover{transform:translateX(3px)}


/* Kinetic headline loop — slow, soft and continuous so the site feels alive without becoming distracting. */
.kinetic-headline .kinetic-line{display:block}
.kinetic-headline .kinetic-word{
  display:inline-block;
  will-change:transform,opacity;
  transform:translate3d(0,0,0);
  animation:kineticWord 6.8s cubic-bezier(.45,0,.55,1) infinite;
  animation-delay:calc(var(--i) * -0.42s);
}
.kinetic-headline--hero .headline-accent .kinetic-word{
  animation-name:kineticWordAccent;
}
.contact .kinetic-headline{
  will-change:filter;
  animation:kineticGlow 6.8s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes kineticWord{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}
  25%{transform:translate3d(0,-.055em,0) rotate(-.15deg);opacity:.97}
  50%{transform:translate3d(0,0,0) rotate(0deg);opacity:1}
  75%{transform:translate3d(0,.032em,0) rotate(.12deg);opacity:.985}
}
@keyframes kineticWordAccent{
  0%,100%{transform:translate3d(0,0,0) scale(1);filter:brightness(1)}
  25%{transform:translate3d(0,-.06em,0) scale(1.008);filter:brightness(1.08)}
  50%{transform:translate3d(0,0,0) scale(1);filter:brightness(1)}
  75%{transform:translate3d(0,.025em,0) scale(.998);filter:brightness(.98)}
}
@keyframes kineticGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(216,198,167,0))}
  50%{filter:drop-shadow(0 12px 34px rgba(216,198,167,.055))}
}
/* The Fitness cover is served by Behance; keep its source image near native size on the case page. */
.case-cover--fitness img{width:min(100%,520px)}

/* Motion */
.js .reveal{opacity:0;transform:translate3d(0,30px,0) scale(.992);filter:blur(5px)}
.js .reveal.enter{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);transition:opacity .8s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--delay,0ms)}
.js body:not(.is-ready) .hero .eyebrow,.js body:not(.is-ready) .hero h1,.js body:not(.is-ready) .hero p,.js body:not(.is-ready) .hero-bottom{opacity:0;transform:translateY(22px)}
.js body.is-ready .hero .eyebrow,.js body.is-ready .hero h1,.js body.is-ready .hero p,.js body.is-ready .hero-bottom{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .85s var(--ease)}
.js body.is-ready .hero .eyebrow{transition-delay:.06s}.js body.is-ready .hero h1{transition-delay:.13s}.js body.is-ready .hero p{transition-delay:.21s}.js body.is-ready .hero-bottom{transition-delay:.29s}
@view-transition{navigation:auto}::view-transition-old(root){animation:.26s ease both vt-out}::view-transition-new(root){animation:.42s var(--ease) both vt-in}@keyframes vt-out{to{opacity:0;transform:scale(.995)}}@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

@media(min-width:1600px){.hero-inner{min-height:590px}}
@media(max-width:1050px){
  .shell{width:calc(100% - 48px)}.navlinks{gap:20px}.hero-label{right:24px}.section-top{align-items:start;flex-direction:column;gap:22px}.filters{justify-content:flex-start}.project-grid{gap:42px 18px}.split{grid-template-columns:minmax(190px,.8fr) 2.15fr;gap:42px}.contact-main{align-items:start;flex-direction:column}.hero-photo{width:88%;object-position:67% 44%}.hero:after{background:linear-gradient(90deg,var(--black) 0%,rgba(24,24,22,.98) 31%,rgba(24,24,22,.67) 59%,rgba(24,24,22,.12) 86%),linear-gradient(0deg,rgba(24,24,22,.62),transparent 50%)}
}
@media(max-width:760px){
  .shell{width:calc(100% - 36px)}.nav{height:68px}.menu{display:block}.navlinks{display:none;position:absolute;top:68px;left:0;right:0;padding:20px;background:rgba(24,24,22,.98);border-bottom:1px solid var(--line);flex-wrap:wrap}.navlinks.open{display:flex}
  .hero-inner{min-height:590px;padding-top:54px;padding-bottom:48px;justify-content:flex-end}.hero-photo{width:100%;height:73%;top:0;right:0;object-position:62% center;transform:translate3d(0,var(--hero-y,0),0) scale(1.01)}.hero:after{background:linear-gradient(0deg,var(--black) 16%,rgba(24,24,22,.86) 44%,rgba(24,24,22,.18) 78%)}.hero h1{font-size:clamp(52px,14.5vw,76px);max-width:580px}.hero p{font-size:16px}.hero-label{display:none}.hero-bottom{margin-top:26px}
  .work{padding-top:62px;padding-bottom:74px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}.card-meta h3{font-size:18px}.year{display:none}.filters{gap:5px}.filter{font-size:12px;padding:7px 10px}.split{grid-template-columns:1fr;gap:34px}.section-label{position:static;font-size:16px}.section-no{width:42px;height:42px;flex-basis:42px}.about,.experience,.services{padding:76px 0}.stats strong{font-size:50px}.service-list{gap:32px}.row{gap:22px}.contact{padding-top:66px}.socials{justify-content:flex-start;max-width:none}.footer{flex-wrap:wrap}.case-header{padding-top:48px}.case-story{padding:56px 0}.case-end{align-items:start;flex-direction:column}.cover-arrow{display:none}.case-header h1{font-size:clamp(48px,12vw,70px)}.case-cover{min-height:360px;padding:54px 24px 30px}.case-cover img{width:min(100%,560px)}
}
@media(max-width:520px){
  body{font-size:16px}.project-grid{grid-template-columns:1fr}.hero-inner{min-height:610px}.hero h1{font-size:54px}.hero-bottom{align-items:flex-start;flex-direction:column;gap:18px}.service-list{grid-template-columns:1fr}.row{grid-template-columns:1fr;gap:8px}.work-foot{align-items:start;flex-direction:column;gap:18px}.socials{gap:20px}.card-meta h3{font-size:21px}.case-details{gap:14px 20px}.stats{grid-template-columns:1fr}.behance-cta{width:100%;text-align:center}.behance-cta--compact{width:auto}.case-cover{min-height:0;padding:50px 14px 18px}.case-cover:before{left:16px;top:16px}.section-name{white-space:normal}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.cover img,.hero-photo{transform:none!important}.js .reveal{opacity:1!important;transform:none!important;filter:none!important}}

/* v7 ticker — dark editorial background with the cleaner, fully visible v5 text style. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.marquee{position:relative;overflow:hidden;border-top:1px solid rgba(216,198,167,.20);border-bottom:1px solid rgba(216,198,167,.20);background:var(--black-2);color:var(--paper);isolation:isolate}
.marquee:before,.marquee:after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:min(7vw,105px);pointer-events:none}
.marquee:before{left:0;background:linear-gradient(90deg,var(--black-2),rgba(20,20,18,0))}
.marquee:after{right:0;background:linear-gradient(270deg,var(--black-2),rgba(20,20,18,0))}
.marquee-track{display:flex;width:max-content;will-change:transform;transform:translate3d(0,0,0);animation:marqueeLoop 36s linear infinite}
.marquee-group{display:flex;align-items:center;flex:none;gap:clamp(22px,2.4vw,42px);padding:10px clamp(12px,1.2vw,22px);padding-right:clamp(34px,3vw,56px);font-family:"Outfit",sans-serif;font-size:clamp(16px,1.35vw,22px);font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap;text-transform:uppercase}
.marquee-group span{display:inline-block;color:var(--paper);opacity:.96;transform:translateZ(0)}
.marquee-group i{font-style:normal;font-size:.62em;color:var(--beige);opacity:.72}
.marquee:hover .marquee-track{animation-duration:48s}
@keyframes marqueeLoop{to{transform:translate3d(-50%,0,0)}}

/* Desktop refinements */
@media(min-width:1200px){
  .hero-inner{min-height:clamp(560px,61vh,720px)}
  .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:62px 30px}
  .case-cover{max-width:1240px}
}

/* Tablet / compact desktop */
@media(max-width:900px){
  .shell{width:calc(100% - 40px)}
  .nav{height:72px}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 18px}
  .split{grid-template-columns:1fr;gap:34px}
  .section-label{position:static}
  .service-list{grid-template-columns:1fr 1fr;gap:34px 24px}
  .row{grid-template-columns:minmax(170px,.8fr) 1.2fr;gap:28px}
  .hero-photo{width:100%;object-position:66% 42%}
  .hero:after{background:linear-gradient(90deg,var(--black) 0%,rgba(24,24,22,.96) 25%,rgba(24,24,22,.68) 58%,rgba(24,24,22,.22) 100%),linear-gradient(0deg,rgba(24,24,22,.66),transparent 52%)}
}

/* Phones — purpose-built mobile layout */
@media(max-width:700px){
  html{scroll-padding-top:70px}
  body{font-size:16px;line-height:1.58}
  .shell{width:calc(100% - 32px)}
  .header{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .nav{height:64px;gap:12px}
  .brand{font-size:16px;gap:10px;min-width:0}
  .brand-mark{width:34px;height:34px;flex:0 0 34px}
  .menu{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:64px;border-radius:999px;padding:8px 14px}
  .navlinks{display:flex;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-8px);position:absolute;top:64px;left:0;right:0;padding:14px 16px 20px;background:rgba(20,20,18,.985);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:4px;transition:opacity .24s var(--ease),transform .28s var(--ease),visibility .24s}
  .navlinks.open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
  .navlinks a{display:flex;align-items:center;min-height:48px;padding:8px 10px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.055)}
  .navlinks a:not(.nav-contact):after{display:none}
  .navlinks .nav-contact{margin-top:8px;justify-content:center;border-bottom:1px solid var(--beige);padding:12px 18px}
  body.menu-open{overflow:hidden}

  .hero{min-height:calc(100svh - 64px);min-height:calc(100dvh - 64px)}
  .hero-inner{min-height:calc(100svh - 64px);min-height:calc(100dvh - 64px);padding-top:clamp(260px,50vh,430px);padding-bottom:32px;justify-content:flex-end}
  .hero-photo{width:100%;height:58%;top:0;left:0;right:0;object-position:64% 43%;transform:none!important;filter:saturate(.72) contrast(1.03)}
  .hero:after{background:linear-gradient(0deg,var(--black) 0%,var(--black) 26%,rgba(24,24,22,.92) 43%,rgba(24,24,22,.36) 72%,rgba(24,24,22,.08) 100%),linear-gradient(90deg,rgba(24,24,22,.28),transparent 70%)}
  .hero .eyebrow{font-size:10px;letter-spacing:.15em;margin-bottom:14px}
  .hero h1{font-size:clamp(46px,13.2vw,66px);line-height:.91;letter-spacing:-.058em;margin-bottom:18px;max-width:100%}
  .hero p{font-size:15px;line-height:1.55;max-width:330px}
  .hero-bottom{margin-top:24px;gap:12px;align-items:stretch;flex-direction:column}
  .hero-bottom .button{width:100%;min-height:48px;justify-content:space-between;padding-inline:20px}
  .hero-bottom .text-link{align-self:flex-start;margin-top:2px}
  .hero-label{display:none}

  .marquee-group{padding-block:9px;gap:22px;font-size:15px}
  .marquee-track{animation-duration:27s}
  .marquee:before,.marquee:after{width:22px}

  .work{padding:60px 0 76px}
  .section-top{margin-bottom:28px;gap:18px}
  .section-top h2{font-size:46px}
  .filters{width:calc(100vw - 16px);margin-right:-16px;display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:7px;padding:0 16px 6px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto;min-height:40px;font-size:12px;padding:8px 13px}
  .project-grid{grid-template-columns:1fr;gap:44px}
  .cover{border-radius:12px}
  .card-meta{padding-top:14px}
  .card-meta h3{font-size:21px;line-height:1.2}
  .year{display:block;font-size:12px}
  .work-foot{margin-top:52px;padding-top:22px;align-items:flex-start;flex-direction:column;gap:18px}
  .behance-cta--compact{width:100%;min-height:46px}

  .about,.experience,.services{padding:72px 0}
  .split{gap:28px}
  .section-label{font-size:16px;gap:9px}
  .section-no{width:42px;height:42px;flex-basis:42px}
  .about h2{font-size:clamp(40px,11vw,54px);margin-bottom:26px}
  .about-copy{font-size:16px;line-height:1.72}
  .stats{grid-template-columns:1fr 1fr;gap:18px;margin-top:34px;padding-top:28px}
  .stats strong{font-size:48px;letter-spacing:-2px}
  .stats p{font-size:12px;line-height:1.45}
  .row{grid-template-columns:1fr;gap:9px;padding:24px 0}
  .row h3{font-size:21px}
  .row p{font-size:15px}
  .service-list{grid-template-columns:1fr;gap:30px}
  .service{padding-top:21px}
  .service h3{font-size:24px;margin-top:12px}
  .service p{font-size:15px}

  .contact{padding:70px 0 28px}
  .contact-main{gap:46px;padding-bottom:54px}
  .contact h2{font-size:clamp(50px,14vw,72px);margin:16px 0 28px}
  .email{font-size:18px;line-height:1.4}
  .socials{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;max-width:none;padding:0;border-top:1px solid #37342f}
  .socials a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid #37342f}
  .footer{display:grid;grid-template-columns:1fr;gap:8px;padding-top:22px}
  .footer a{margin-top:8px;min-height:40px;display:flex;align-items:center}

  .case-header{padding:42px 0 34px}
  .back{margin-bottom:40px;min-height:40px;display:inline-flex;align-items:center}
  .case-header h1{font-size:clamp(43px,12vw,62px);line-height:.96;margin:14px 0 16px;overflow-wrap:anywhere}
  .case-sub{font-size:18px;margin-bottom:24px}
  .case-details{gap:12px 16px;padding-top:18px;font-size:13px}
  .behance-mini{min-height:42px}
  .case-cover{min-height:0;padding:48px 12px 16px;border-radius:14px}
  .case-cover:before{top:14px;left:14px;font-size:9px}
  .case-cover img{width:min(100%,620px);border-radius:8px;box-shadow:0 16px 46px rgba(0,0,0,.3)}
  .case-story{padding:54px 0}
  .case-story h2{font-size:35px;letter-spacing:-1.2px}
  .case-story p{font-size:16px;line-height:1.72}
  .case-story .behance-cta{width:100%;min-height:48px}
  .case-gallery{gap:18px;padding-bottom:56px}
  .case-gallery img{border-radius:8px}
  .case-end{padding:26px 0 58px;align-items:stretch;flex-direction:column;gap:8px}
  .case-end a{display:flex;align-items:center;min-height:48px;padding-block:6px}

  /* Mobile GPUs handle transforms much better than live blur filters. */
  .js .reveal{filter:none;transform:translate3d(0,20px,0) scale(.995)}
  .js .reveal.enter{filter:none;transition:opacity .7s var(--ease),transform .78s var(--ease)}
}

@media(max-width:390px){
  .shell{width:calc(100% - 28px)}
  .brand{font-size:15px}
  .hero h1{font-size:clamp(43px,13vw,52px)}
  .hero-inner{padding-bottom:26px}
  .stats{grid-template-columns:1fr}
  .socials{grid-template-columns:1fr}
  .section-top h2{font-size:42px}
  .card-meta h3{font-size:20px}
}

@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none!important;transform:none!important}
  .marquee{overflow-x:auto}
}

/* v8 interface sound control */
.sound-toggle{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid rgba(216,198,167,.24);
  border-radius:999px;
  background:rgba(216,198,167,.025);
  color:#aaa59d;
  font-family:"Outfit",sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1;
  letter-spacing:.01em;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.sound-toggle:hover{color:var(--paper);border-color:rgba(216,198,167,.5);background:rgba(216,198,167,.055);transform:translateY(-1px)}
.sound-toggle-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#69645c;box-shadow:0 0 0 3px rgba(216,198,167,.035);transition:background .25s,box-shadow .25s}
.sound-toggle[aria-pressed="true"]{color:#d2ccc3;border-color:rgba(216,198,167,.32)}
.sound-toggle[aria-pressed="true"] .sound-toggle-dot{background:var(--beige);box-shadow:0 0 0 3px rgba(216,198,167,.09)}

@media(max-width:700px){
  .navlinks .sound-toggle{
    width:100%;
    min-height:48px;
    justify-content:flex-start;
    padding:8px 10px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.055);
    border-radius:0;
    background:transparent;
    color:#bcb6ad;
    font-size:15px;
  }
  .navlinks .sound-toggle:hover{transform:none;background:transparent;color:var(--beige)}
  .sound-toggle-dot{width:7px;height:7px;flex-basis:7px}
}

/* v12 — tactile travel control + scroll state */
html.has-mechanical-scroll{scrollbar-width:none}
html.has-mechanical-scroll::-webkit-scrollbar{width:0;height:0}
html.has-mechanical-scroll body::-webkit-scrollbar{width:0;height:0}

.travel-control{
  --travel-y:0px;
  position:fixed;
  z-index:36;
  top:94px;
  right:12px;
  bottom:22px;
  width:16px;
  pointer-events:none;
  opacity:.78;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  mix-blend-mode:normal;
}
.travel-control.is-moving,.travel-control:hover,.travel-control.is-dragging{opacity:1}
.travel-readout,.travel-value{display:none}
.travel-slot{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:14px;
  border:1px solid rgba(216,198,167,.22);
  border-radius:3px;
  background:linear-gradient(180deg,rgba(216,198,167,.025),rgba(255,255,255,.01));
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.18);
}
.travel-slot:before{
  content:"";
  position:absolute;
  left:50%;
  top:7px;
  bottom:7px;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(216,198,167,.16) 12%,rgba(216,198,167,.16) 88%,transparent);
}
.travel-thumb{
  appearance:none;
  position:absolute;
  top:2px;
  left:2px;
  width:8px;
  height:64px;
  padding:0;
  margin:0;
  border:0;
  border-radius:2px;
  background:linear-gradient(180deg,#e4d4ba 0%,var(--beige) 55%,#bfa989 100%);
  box-shadow:0 4px 16px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.28),inset 0 -1px rgba(0,0,0,.17);
  transform:translate3d(0,var(--travel-y),0);
  pointer-events:auto;
  cursor:grab;
  will-change:transform;
  transition:width .18s var(--ease),left .18s var(--ease),box-shadow .18s var(--ease);
}
.travel-control.is-dragging .travel-thumb{cursor:grabbing;width:10px;left:1px;box-shadow:0 6px 20px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.35)}
.travel-ridges{
  position:absolute;
  inset:8px 2px;
  opacity:.43;
  background:repeating-linear-gradient(180deg,rgba(24,24,22,.56) 0 1px,transparent 1px 6px);
}
.travel-thumb:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
body.menu-open .travel-control{opacity:0;transform:translateX(10px)}

/* Slightly more physical state feedback without making the layout noisy. */
.travel-control.is-moving .travel-slot{border-color:rgba(216,198,167,.34)}
.travel-control.is-moving .travel-thumb{box-shadow:0 5px 18px rgba(0,0,0,.34),0 0 18px rgba(216,198,167,.06),inset 0 1px rgba(255,255,255,.3)}

@media(max-width:700px){
  .travel-control{
    top:50%;
    right:5px;
    bottom:auto;
    width:5px;
    height:104px;
    transform:translateY(-50%);
    opacity:.54;
    z-index:34;
  }
  .travel-readout{display:none}
  .travel-slot{
    inset:0;
    width:4px;
    height:104px;
    border:0;
    border-radius:999px;
    background:rgba(216,198,167,.12);
    box-shadow:none;
  }
  .travel-slot:before{display:none}
  .travel-thumb{
    top:0;
    left:0;
    width:4px;
    height:28px;
    border-radius:999px;
    background:var(--beige);
    box-shadow:0 0 10px rgba(216,198,167,.12);
    pointer-events:none;
  }
  .travel-ridges{display:none}
  .travel-control.is-moving{opacity:.9}
  body.menu-open .travel-control{transform:translateY(-50%) translateX(8px)}
}

@media(prefers-reduced-motion:reduce){
  .travel-control{transition:none!important}
  .travel-thumb{transition:none!important}
}