:root{--cream:#f3efe6;--ink:#111;--muted:rgba(17,17,17,.54);--line:rgba(17,17,17,.16);--pad:clamp(22px,4.6vw,72px);--max:1500px;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--cream)}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}button,input{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit}.site-shell{min-height:100svh}.wrap{width:min(calc(100% - 2*var(--pad)),var(--max));margin-inline:auto}
/* home */
.home{min-height:100svh;padding:clamp(28px,5vh,58px) var(--pad) clamp(26px,4vh,48px);display:flex;flex-direction:column}.home-name{margin:0 0 0 -.04em;font-size:clamp(48px,7.1vw,136px);line-height:.88;letter-spacing:-.055em;font-weight:300;text-transform:lowercase;white-space:nowrap}.home-role{margin:clamp(26px,3vw,46px) 0 0;color:var(--muted);font-size:clamp(17px,1.7vw,31px);letter-spacing:-.015em;line-height:1.2}.home-main{flex:1;display:flex;align-items:flex-end;padding:clamp(62px,10vh,130px) 0 clamp(30px,5vh,58px)}.home-choices{width:100%;border-top:1px solid var(--line)}.home-choice{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;min-height:clamp(92px,13vh,145px);border-bottom:1px solid var(--line);transition:padding-left .45s var(--ease),opacity .25s ease}.home-choice-title{font-size:clamp(40px,5.4vw,82px);line-height:.95;letter-spacing:-.05em}.home-choice-meta{color:var(--muted);font-size:clamp(9px,.78vw,13px);letter-spacing:.19em;word-spacing:.25em;text-transform:uppercase;white-space:nowrap}.home-footer{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px;letter-spacing:.05em}.home-footer a:hover{color:var(--ink)}@media(hover:hover){.home-choice:hover{padding-left:1.25vw}.home-choices:hover .home-choice:not(:hover){opacity:.34}}
/* portfolio hero */
.hero{padding:clamp(28px,4vw,56px) var(--pad) clamp(38px,5vw,68px)}.hero-inner{width:min(100%,var(--max));margin:auto}.eyebrow{margin:0;color:var(--muted);font-size:10px;letter-spacing:.24em;text-transform:uppercase}.brand-name{margin:clamp(22px,3vh,36px) 0 0;font-size:clamp(38px,5vw,76px);line-height:.92;letter-spacing:.025em;font-weight:300;text-transform:lowercase}.statement{margin:20px 0 0;max-width:760px;color:rgba(17,17,17,.67);font-size:clamp(14px,1.1vw,18px);line-height:1.5;letter-spacing:.015em}.hero-bottom{margin-top:clamp(52px,8vh,92px);padding-top:17px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.hero-actions,.filter-bar,.about-language{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pill{appearance:none;border:1px solid var(--line);border-radius:999px;background:transparent;color:rgba(17,17,17,.64);padding:9px 13px;cursor:pointer;font-size:9px;line-height:1;letter-spacing:.16em;text-transform:uppercase;transition:background .2s ease,color .2s ease,border-color .2s ease}.pill:hover,.pill:focus-visible{border-color:rgba(17,17,17,.46);color:var(--ink);outline:none}.pill.active{background:var(--ink);border-color:var(--ink);color:var(--cream)}.contact{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:11px;letter-spacing:.04em}.contact .phone{cursor:default;user-select:text}.contact a:hover{color:var(--ink)}
/* works */
.works{padding:26px var(--pad) 84px}.works-inner{width:min(100%,var(--max));margin:auto}.section-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}.section-title{margin:0;font-size:clamp(18px,1.8vw,28px);font-weight:300;letter-spacing:-.02em}.section-line{height:1px;background:var(--line);flex:1}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 14px}.card{min-width:0}.card-media{position:relative;width:100%;aspect-ratio:16/9;border:0;padding:0;background:var(--cream);overflow:hidden;cursor:pointer;display:block}.card-media-inner{position:absolute;inset:0;overflow:hidden;background:var(--cream);transition:transform .45s var(--ease)}.card-img{width:100%;height:100%;display:block;object-fit:cover;filter:grayscale(1) brightness(.78) contrast(1.04);transform:scale(1.002);transition:filter .5s ease,transform .6s var(--ease)}.card-media:hover .card-media-inner,.card-media:focus-visible .card-media-inner{transform:scale(.94)}.card-media:hover .card-img,.card-media:focus-visible .card-img{filter:grayscale(0) brightness(1) contrast(1.01);transform:scale(1.01)}.card-media:focus-visible{outline:1px solid rgba(17,17,17,.55);outline-offset:3px}.card-caption{padding:10px 2px 0}.card-title{font-size:12px;line-height:1.2;letter-spacing:.045em;text-transform:uppercase}.card-desc{margin-top:4px;color:var(--muted);font-size:10.5px;line-height:1.35}.card-tag{margin-top:5px;color:rgba(17,17,17,.38);font-size:8px;letter-spacing:.17em;text-transform:uppercase}.card.is-playing .card-media-inner{transform:none;background:#000}.card.is-playing .card-img{display:none}.video-holder{position:absolute;inset:0;display:none;background:#000}.card.is-playing .video-holder{display:block}.video-holder iframe{width:100%;height:100%;border:0;display:block}.video-controls{position:absolute;z-index:5;top:9px;right:9px;display:none;gap:6px}.card.is-playing .video-controls{display:flex}.video-btn{appearance:none;border:1px solid rgba(243,239,230,.38);background:rgba(17,17,17,.72);color:var(--cream);border-radius:999px;padding:7px 9px;cursor:pointer;font-size:8px;letter-spacing:.12em;text-transform:uppercase}.load-wrap{grid-column:1/-1;display:flex;justify-content:center;padding-top:12px}.empty{grid-column:1/-1;padding:70px 0;text-align:center;color:var(--muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
/* about */
.modal{position:fixed;inset:0;z-index:100;background:rgba(243,239,230,.99);opacity:0;pointer-events:none;transition:opacity .3s ease;overflow:auto}.modal.open{opacity:1;pointer-events:auto}.modal-shell{position:relative;min-height:100%;width:min(calc(100% - 2*var(--pad)),1180px);margin:auto;padding:clamp(26px,4vw,52px) 0 70px}.modal-top{display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;z-index:3}.about-portrait{position:absolute;right:-3%;top:120px;width:min(34vw,420px);opacity:.085;filter:grayscale(1) contrast(.78);mix-blend-mode:multiply;pointer-events:none;user-select:none;z-index:0;-webkit-mask-image:linear-gradient(to left,black 28%,rgba(0,0,0,.85) 56%,transparent 100%);mask-image:linear-gradient(to left,black 28%,rgba(0,0,0,.85) 56%,transparent 100%)}.about-content{position:relative;z-index:2;max-width:900px;margin-top:clamp(58px,8vh,90px)}.about-name{margin:0;font-size:clamp(42px,5vw,72px);line-height:.94;letter-spacing:-.045em;font-weight:300;text-transform:lowercase}.about-rule{height:1px;background:var(--line);margin:clamp(34px,5vh,56px) 0}.about-lede{max-width:850px;margin:0;font-size:clamp(27px,3.2vw,52px);line-height:1.05;letter-spacing:-.045em}.about-columns{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.7fr);gap:clamp(32px,6vw,88px);margin-top:clamp(38px,6vh,70px)}.about-copy{font-size:clamp(14px,1.15vw,17px);line-height:1.62;color:rgba(17,17,17,.76)}.about-copy p{margin:0}.about-copy p+p{margin-top:16px}.about-meta{display:grid;gap:28px}.about-meta h3{margin:0 0 8px;color:rgba(17,17,17,.42);font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:400}.about-meta p{margin:0;font-size:13px;line-height:1.55;color:rgba(17,17,17,.68)}.about-meta a:hover{color:var(--ink)}.about-version{display:none}.about-version.active{display:block}.phone-static{cursor:default;user-select:text}.footer{padding:20px var(--pad);border-top:1px solid var(--line);color:rgba(17,17,17,.42);font-size:9px;letter-spacing:.12em;text-transform:uppercase}.footer-inner{width:min(100%,var(--max));margin:auto}
@media(max-width:1050px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.about-portrait{width:min(40vw,350px);opacity:.07}}
@media(max-width:760px){.home{padding-left:20px;padding-right:20px}.home-name{font-size:clamp(40px,11.6vw,62px);white-space:normal;line-height:.92}.home-role{font-size:14px;max-width:90%}.home-choice{grid-template-columns:1fr;gap:10px;padding:22px 0;min-height:auto}.home-choice-meta{white-space:normal}.home-footer{flex-direction:column;gap:8px}.hero,.works,.footer{padding-left:20px;padding-right:20px}.brand-name{font-size:clamp(34px,10vw,58px)}.hero-bottom{align-items:flex-start;flex-direction:column}.contact{width:100%;justify-content:space-between;gap:10px;flex-wrap:wrap}.section-head{align-items:flex-start;flex-wrap:wrap}.section-line{display:none}.filter-bar{width:100%}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}.modal-shell{width:calc(100% - 40px)}.modal-top{align-items:flex-start}.about-portrait{top:100px;right:-22%;width:70vw;opacity:.05}.about-content{margin-top:50px}.about-columns{grid-template-columns:1fr}.about-lede{font-size:clamp(28px,8vw,42px)}}
@media(max-width:500px){.grid{grid-template-columns:1fr}.pill{padding:8px 11px}.home-choice-title{font-size:38px}.about-language{gap:6px}.about-portrait{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.card-media-inner,.card-img,.home-choice,.modal{transition:none!important}}

/* PLAY hover overlays */
/* Brands: simple white PLAY text */
body[data-kind="brand"] .card-media::after{
  content:"PLAY";
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  transform:translate(-50%,-50%);
  color:#f3efe6;
  font-size:10px;
  font-weight:300;
  line-height:1;
  letter-spacing:.42em;
  padding-left:.42em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  text-shadow:0 1px 12px rgba(0,0,0,.34);
  transition:opacity .22s ease;
}
/* Cinema: option 7 — black oval with white play icon + PLAY */
body[data-kind="cinema"] .card-media::after{
  content:"PLAY";
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  transform:translate(-50%,-50%);
  background:rgba(17,17,17,.58);
  color:#f3efe6;
  border:1px solid rgba(243,239,230,.18);
  border-radius:999px;
  padding:8px 15px 8px 31px;
  min-width:96px;
  box-sizing:border-box;
  text-align:center;
  font-size:9px;
  font-weight:300;
  line-height:1;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .28s ease;
}
body[data-kind="cinema"] .card-media::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  transform:translate(calc(-50% - 32px),-50%);
  width:0;
  height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:7px solid #f3efe6;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .28s ease;
}
@media (hover:hover) and (pointer:fine){
  body[data-kind="brand"] .card-media:hover::after,
  body[data-kind="brand"] .card-media:focus-visible::after{opacity:1}
  body[data-kind="cinema"] .card-media:hover::after,
  body[data-kind="cinema"] .card-media:focus-visible::after{opacity:1;transform:translate(-50%,-50%)}
  body[data-kind="cinema"] .card-media:hover::before,
  body[data-kind="cinema"] .card-media:focus-visible::before{opacity:1;transform:translate(calc(-50% - 32px),-50%)}
  .card.is-playing .card-media::after,
  .card.is-playing .card-media::before{opacity:0}
}
@media (hover:none),(pointer:coarse){
  .card-media::after,.card-media::before{display:none}
}


/* Brand thumbnail crop fixes */
.card[data-title="Armani"] .card-img{object-position:center center;transform:scale(1.32)}
.card[data-title="Hyundai"] .card-img{object-position:center center;transform:scale(1.30)}
.card[data-title="Bounty Banana"] .card-img{object-position:center center;transform:scale(1.26)}
.card[data-title="Armani"] .card-media:hover .card-img,.card[data-title="Armani"] .card-media:focus-visible .card-img{transform:scale(1.34)}
.card[data-title="Hyundai"] .card-media:hover .card-img,.card[data-title="Hyundai"] .card-media:focus-visible .card-img{transform:scale(1.32)}
.card[data-title="Bounty Banana"] .card-media:hover .card-img,.card[data-title="Bounty Banana"] .card-media:focus-visible .card-img{transform:scale(1.28)}


/* Mobile embedded video: keep playback inside the site, use native player controls for sound/fullscreen */
@media (max-width:760px), (hover:none), (pointer:coarse){
  .card.is-playing .video-holder{z-index:4}
  .card.is-playing .video-holder iframe{display:block;width:100%;height:100%;background:#000}
  .card.is-playing .video-controls{z-index:6}
}


/* iPhone / mobile inline playback + in-site fullscreen fallback */
body.video-fullscreen-open{overflow:hidden!important}
@media (max-width:760px), (hover:none), (pointer:coarse){
  .card.is-playing .video-controls{display:flex!important;top:8px;right:8px;gap:6px}
  .card.is-playing .video-controls .fullscreen{display:inline-flex!important}
  .card.is-playing .video-holder{z-index:4}
  .card.is-playing .video-holder iframe{display:block!important;width:100%!important;height:100%!important;background:#000}
  .card.site-fullscreen{position:fixed!important;inset:0!important;z-index:99999!important;background:#000!important;margin:0!important;padding:0!important;width:100vw!important;height:100dvh!important}
  .card.site-fullscreen .card-media{position:absolute!important;inset:0!important;width:100vw!important;height:100dvh!important;aspect-ratio:auto!important;background:#000!important;overflow:hidden!important}
  .card.site-fullscreen .card-media-inner{position:absolute!important;inset:0!important;transform:none!important;background:#000!important}
  .card.site-fullscreen .video-holder,.card.site-fullscreen .video-holder iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  .card.site-fullscreen .card-caption{display:none!important}
  .card.site-fullscreen .video-controls{position:fixed!important;top:max(10px,env(safe-area-inset-top))!important;right:max(10px,env(safe-area-inset-right))!important;z-index:100001!important}
}

/* V15 — iPhone/mobile playback hardening */
.sound-start{display:none;position:absolute;z-index:7;left:12px;top:12px;appearance:none;border:1px solid rgba(243,239,230,.30);background:rgba(17,17,17,.58);color:#f3efe6;border-radius:999px;padding:8px 11px;font:inherit;font-size:8px;font-weight:300;line-height:1;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}
@media (hover:none),(pointer:coarse),(max-width:760px){
  .card.mobile-player-ready.mobile-awaiting-sound .sound-start{display:inline-flex;align-items:center;justify-content:center}
  .card.is-playing .card-media{cursor:default}
  .card.site-fullscreen .sound-start{position:fixed;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));z-index:100002}
  .card.site-fullscreen .video-holder{background:#000;display:flex!important;align-items:center;justify-content:center}
  .card.site-fullscreen .video-holder iframe{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important}
}