/* Yannis Pagiannidis. "Cinematic night": the site is walked through like a night at the club. Full-screen scenes,
   the club's own light, one family (Archivo) stretched wide and heavy for the titles, plain for the reading. */
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --black:#000;--surface:#0b0b0c;--surface-2:#141416;
  --ivory:#f6f4f1;--soft:#cdc9c4;--stone:#97928c;
  --gold:#f6f4f1;--gold-hi:#fff;--red:#ff3348;
  --line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.3);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gutter:20px;--max:1200px;color-scheme:dark
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--black);color:var(--ivory);font:400 17px/1.65 var(--body);text-rendering:optimizeLegibility;overflow-x:hidden;font-feature-settings:"lnum"}
img{max-width:100%;height:auto;display:block}
a{color:var(--ivory);text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--gold)}
a:hover{text-decoration-color:var(--gold-hi)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px}.skip:focus{left:12px;z-index:60;background:var(--ivory);color:var(--black);padding:10px 14px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:800;font-stretch:112.5%;letter-spacing:-.02em;line-height:.98;margin:0;text-wrap:balance}
h2{font-size:clamp(38px,6vw,72px)}
h3{font-size:26px;line-height:1.1}
p{margin:0 0 14px}
.glow{color:inherit}
.lead{font-size:clamp(18px,1.9vw,21px);line-height:1.55;color:var(--soft);max-width:54ch}
.muted{color:var(--stone)}
.small{font-size:14px;color:var(--stone)}
.dated{font-size:13px;color:var(--stone);margin:0;max-width:78ch}
.mt-s{margin-top:12px}.mt-m{margin-top:20px}.mt-l{margin-top:44px}.narrow{max-width:44ch}
.hidden-note{display:none}

/* buttons: flat, sharp, gold for the one thing that matters */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 28px;border-radius:999px;background:#fff;color:#000;font:600 16px/1 var(--body);letter-spacing:.01em;text-decoration:none;border:1px solid var(--gold);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease;white-space:nowrap}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn.ghost{background:transparent;color:var(--ivory);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ivory);background:transparent}
.btn .ico{display:none}
.cta-pair{display:flex;flex-wrap:wrap;gap:10px}
.cta-pair.big .btn{min-height:58px;padding:16px 30px;font-size:17px}
.cta-pair .l-short{display:none}
.row{display:flex;flex-wrap:wrap;gap:10px}

/* header */
.top{position:absolute;top:0;left:0;right:0;z-index:30;background:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,0))}
.inner .top{position:sticky;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:68px}
.wm{display:inline-flex;align-items:baseline;gap:.28em;text-decoration:none;color:var(--ivory);font:800 semi-expanded 23px/1 var(--display);letter-spacing:-.005em;white-space:nowrap}
.wm b,.wm span{font:inherit}
.nav{display:none;gap:30px;align-items:center}
.nav a{color:var(--soft);text-decoration:none;font-size:15px;font-weight:500;padding:12px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ivory)}
.nav a[aria-current=page]{color:var(--ivory);border-bottom-color:var(--gold)}
.top .btn{min-height:42px;padding:10px 18px;font-size:14px}
.right{display:flex;align-items:center;gap:10px}
.top .right .btn{display:none}
.lang{display:inline-flex;align-items:center;justify-content:center;min-height:42px;min-width:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:2px;color:var(--ivory);text-decoration:none;font-weight:500;font-size:14px}
.lang:hover{border-color:var(--ivory)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;gap:10px;color:var(--ivory);font-weight:500;font-size:15px}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{width:20px;height:1px;background:var(--ivory);position:relative;display:block}
.menu summary i:before,.menu summary i:after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--ivory)}
.menu summary i:before{top:-6px}.menu summary i:after{top:6px}
.menu .panel{position:absolute;right:0;top:54px;background:var(--surface);border:1px solid var(--line-2);padding:8px 18px 18px;min-width:250px;box-shadow:0 30px 80px -20px #000}
.menu .panel a{display:block;color:var(--ivory);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line);font:800 semi-expanded 26px/1.1 var(--display)}
.menu .panel a.btn{font:600 16px/1 var(--body);border-bottom:0;color:#000;margin-top:16px;display:flex}
@media (min-width:900px){.nav{display:flex}.menu{display:none}.top .right .btn{display:inline-flex}}

/* the Thai page keeps the split hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden}
.hero .shot{position:absolute;inset:0;z-index:-2}
.hero .shot picture,.hero .shot img{width:100%;height:100%}
.hero .shot img{object-fit:cover;object-position:50% 14%}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,#000 10%,rgba(0,0,0,.78) 36%,rgba(0,0,0,.05) 64%,rgba(0,0,0,.4))}
.hero .hero-copy{padding:0 var(--gutter) 34px;max-width:var(--max);width:100%;margin:0 auto}
.kicker{font-size:15px;color:var(--gold);margin:0 0 10px;letter-spacing:.01em}
.name{margin:0;font-weight:400}
.name b,.name span{display:block;font:800 semi-expanded clamp(52px,15vw,176px)/.92 var(--display);letter-spacing:-.025em}
.name span{padding-left:.42em}
@media (max-width:480px){.name span{padding-left:.18em}}
.pitch{font:500 clamp(19px,2vw,23px)/1.4 var(--body);margin:22px 0 22px;color:var(--ivory);max-width:30ch}
.pitch span{color:var(--soft)}
.tagline{font-size:16px;line-height:1.55;margin:0 0 24px;max-width:44ch;color:var(--soft)}
.hero-stats{display:flex;flex-wrap:wrap;gap:0;list-style:none;padding:0;margin:34px 0 0;border-top:1px solid var(--line)}
.hero-stats li{display:flex;flex-direction:column;padding:16px 30px 0 0;margin-right:30px;font-size:14px;color:var(--stone);border-right:1px solid var(--line)}
.hero-stats li:last-child{border-right:0}
.hero-stats b{font:800 semi-expanded 40px/1 var(--display);color:var(--ivory);margin-bottom:4px}
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:min(100svh,940px);padding:0}
  .hero:before{display:none}
  .hero .shot{position:relative;inset:auto;order:2;min-height:100%}
  .hero .shot:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000,rgba(0,0,0,0) 30%),linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 30%)}
  .hero .shot img{position:absolute;inset:0;object-position:50% 12%}
  .hero .hero-copy{order:1;align-self:end;padding:140px 48px 72px max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)))}
  .name b,.name span{font-size:clamp(84px,9vw,150px)}
}
@media (max-width:899px){.hero .tagline,.hero-stats{display:none}.hero .cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero .cta-pair .btn{padding:14px 12px;font-size:15px}}

/* sections */
section.block{padding:88px 0;border-top:1px solid var(--line)}
@media (min-width:900px){section.block{padding:128px 0}}
.hero+section.block{border-top:0}
.sec-head{display:grid;gap:18px;margin-bottom:44px}
@media (min-width:900px){.sec-head{grid-template-columns:1.25fr .75fr;align-items:end;gap:56px}.sec-head .lead{margin:0}}
.sub-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:72px;flex-wrap:wrap}
.sub-head h3{font-size:clamp(28px,3.4vw,40px)}

/* the work strip on Work: quiet figures in a row */
.ticker{border-block:1px solid var(--line)}
.ticker .run{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.ticker ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));list-style:none;margin:0;padding:0}
.ticker li{display:flex;flex-direction:column;padding:22px 18px 20px 0;border-right:1px solid var(--line);margin-right:18px}
.ticker b{font:800 semi-expanded 40px/1 var(--display);color:var(--ivory)}
.ticker span{font-size:14px;color:var(--stone);margin-top:4px}
.ticker-note{padding-top:14px}

/* nights: the photo wall */
.nights-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-template-areas:"big big" "stage las" "sky man"}
.nights-grid figure{position:relative;margin:0;overflow:hidden;background:var(--surface)}
.nights-grid picture,.nights-grid img{display:block;width:100%;height:100%}
.nights-grid img{object-fit:cover}
.nights-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));font-size:14px;color:var(--ivory)}
.n-big{grid-area:big}.n-big img{aspect-ratio:3/2}
.n-stage{grid-area:stage}.n-las{grid-area:las}.n-stage img,.n-las img{aspect-ratio:1/1}
.n-sky{grid-area:sky}.n-man{grid-area:man}.n-sky img,.n-man img{aspect-ratio:4/5}
.n-sky img{object-position:50% 30%}.n-man img{object-position:60% 20%}
@media (min-width:900px){
  .nights-grid{grid-template-columns:repeat(4,1fr);gap:12px;grid-template-areas:"big big sky man" "stage stage las las"}
  .n-sky img,.n-man img{aspect-ratio:auto}
  .n-stage img,.n-las img{aspect-ratio:3/2}
  .nights-grid figcaption{padding:48px 18px 16px}
}

/* proof: figures on hairlines, no boxes */
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line)}
@media (min-width:1000px){.why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}}
.why-grid div{padding:26px 0 28px;border-bottom:1px solid var(--line)}
.why-grid b{display:block;font:800 semi-expanded clamp(46px,6.4vw,84px)/1 var(--display);letter-spacing:-.02em;color:var(--ivory)}
.why-grid span{display:block;margin-top:10px;font-weight:600;font-size:16px;line-height:1.35;color:var(--ivory)}
.why-grid small{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--stone)}
@media (max-width:420px){.why-grid{gap:0 18px}.why-grid b{font-size:12vw}.why-grid span{font-size:15px}.why-grid small{font-size:13px}}
.why .dated{margin-top:18px}

/* reels */
.top3{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (min-width:700px){.top3{grid-template-columns:repeat(3,1fr);gap:14px}}
.reels{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 18px;margin:24px calc(-1*var(--gutter)) 0;scrollbar-width:thin}
@media (min-width:900px){.reels{margin:24px 0 0;padding:4px 0 18px}}
.reel{position:relative;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:var(--ivory);padding:22px;background:var(--surface);border:1px solid var(--line);transition:border-color .2s ease}
.reel:hover{border-color:var(--gold)}
.reels .reel{flex:0 0 172px;aspect-ratio:9/16;scroll-snap-align:start;justify-content:flex-end}
.reel .tag{font-size:14px;color:var(--stone)}
.reel .play{display:none}
.reel b{display:block;font:800 semi-expanded clamp(52px,5.4vw,76px)/1 var(--display);letter-spacing:-.02em;margin-top:18px}
.reels .reel b{font-size:44px;margin-top:0}
.reel .v{display:block;font-size:13px;color:var(--stone);margin-top:4px}
.reel .t{display:block;font:800 semi-expanded 24px/1.1 var(--display);margin-top:22px;color:var(--ivory)}
.reel .d{display:block;font-size:14px;color:var(--stone);margin-top:6px}
.reel>span:last-child{display:flex;flex-direction:column;flex:1}
.reel .cue{margin-top:auto;padding-top:22px;align-self:flex-start;font-size:15px;font-weight:600;color:var(--gold);white-space:nowrap}
.reel .cue i{font-style:normal}
.reel.playing{padding:0;background:#000}
.reel.playing iframe{width:100%;height:100%;border:0;display:block}
.top3 .reel.playing{aspect-ratio:9/16}
@media (max-width:699px){.top3 .reel{padding:16px}.top3 .reel b{font-size:42px;margin-top:12px}.top3 .reel .t{font-size:20px;margin-top:14px}.reel .v{font-size:12px}.reel .cue{font-size:13px;white-space:normal}}
/* the live Facebook player on computers, with the original one tap away */
.reel.preview{padding:0;aspect-ratio:9/16;display:block;background:var(--surface)}
.reel.preview iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.reel.preview .over{z-index:2;position:absolute;left:0;right:0;bottom:0;padding:56px 16px 14px;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,0))}
.reel.preview .over b{display:block;font:800 semi-expanded clamp(36px,3.6vw,52px)/1 var(--display);margin:0}
.reel.preview .over span{display:block;margin-top:4px;font-size:13px;color:var(--soft)}
.reel.preview .over .orig{pointer-events:auto;display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--gold);text-decoration:none}

/* services as a list (Services page) */
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-list a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 24px;padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ivory)}
.svc-list .n{display:none}
.svc-list h3{font-size:clamp(34px,5vw,60px);line-height:1.02;grid-column:1}
.svc-list p{grid-column:1;margin:4px 0 0;color:var(--soft);font-size:17px;max-width:52ch}
.svc-list i{grid-row:1/3;grid-column:2;font-style:normal;font-size:24px;color:var(--gold);transition:transform .2s ease}
.svc-list a:hover i{transform:translateX(4px)}
.svc-list a:hover h3{color:var(--gold-hi)}

/* story */
.story{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.story{grid-template-columns:.85fr 1.15fr;gap:80px}}
.frame{margin:0}
.frame img{width:100%;aspect-ratio:1040/1339;object-fit:cover}
.frame figcaption{padding:12px 0 0;font-size:14px;color:var(--stone)}
.years{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:30px 0;border-top:1px solid var(--line)}
.years div{padding:20px 0;border-bottom:1px solid var(--line)}
.years b{display:block;font:800 semi-expanded 44px/1 var(--display);color:var(--ivory)}
.years span{display:block;margin-top:6px;font-size:15px;color:var(--soft);line-height:1.4}

/* steps */
.steps{display:grid;gap:0 40px;margin:0;padding:0;border-top:1px solid var(--line)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{list-style:none;padding:26px 0;border-bottom:1px solid var(--line);counter-increment:s}
.steps{counter-reset:s}
.steps li:before{content:counter(s);display:block;font:800 semi-expanded 44px/1 var(--display);color:var(--gold);margin-bottom:14px}
.steps h3{margin-bottom:8px}
.steps p{margin:0;color:var(--soft)}

/* questions */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 48px 24px 0;font-weight:600;font-size:clamp(17px,1.8vw,20px);position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:18px;font:300 30px/1 var(--body);color:var(--gold)}
.faq details[open] summary:after{content:"−"}
.faq details p{color:var(--soft);margin:0 0 26px;max-width:65ch}

/* the closing invitation */
.closer{padding:120px 0 110px;border-top:1px solid var(--line);background:var(--surface)}
.closer h2{font-size:clamp(48px,9vw,128px);line-height:1;letter-spacing:-.025em}
.closer .lead{margin-top:20px;margin-bottom:28px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:28px 0 12px}
.mail code{font:800 semi-expanded clamp(20px,3vw,30px)/1.2 var(--display);color:var(--ivory);overflow-wrap:anywhere}
.copy{background:transparent;color:var(--ivory);border:1px solid var(--line-2);border-radius:999px;min-height:44px;padding:8px 18px;font:500 14px var(--body);cursor:pointer}
.copy:hover{border-color:var(--ivory)}

/* inner pages */
.page-head{position:relative;padding:72px 0 60px;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.page-head h1{font-size:clamp(46px,8vw,104px);line-height:1;letter-spacing:-.025em}
.page-head .lead{margin-top:22px}
.crumbs{font-size:14px;color:var(--stone);margin:0 0 22px}
.crumbs a{color:var(--stone);text-decoration:none}.crumbs a:hover{color:var(--ivory)}
.page-head .bg{position:absolute;left:0;right:0;top:0;height:min(80vw,440px);z-index:-2}
.page-head .bg picture,.page-head .bg img{display:block;width:100%;height:100%}
.page-head .bg img{object-fit:cover}
.page-head.has-photo{padding-top:min(60vw,330px)}
.page-head.has-photo:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,0) 22%,rgba(0,0,0,0) calc(min(80vw,440px)*.45),#000 min(80vw,440px))}
.ph-about img{object-position:30% 30%}.ph-work img{object-position:50% 40%}
.ph-services img,.ph-services-venue-promotion img{object-position:50% 50%}
.ph-services-event-hosting img{object-position:50% 40%}
.ph-services-brand-campaigns img{object-position:40% 15%}.ph-media-kit img{object-position:62% 22%}
@media (min-width:900px){
  .page-head.has-photo{padding:130px 0 80px}
  .page-head .bg{top:0;bottom:0;height:auto;left:42%}
  .page-head.has-photo:before{background:linear-gradient(90deg,#000 42%,rgba(0,0,0,.55) 58%,rgba(0,0,0,0) 80%),linear-gradient(to top,#000,rgba(0,0,0,0) 30%)}
  .page-head.portrait{--pw:calc(min(42vw,520px) + max(0px,(100vw - var(--max))/2))}
  .page-head.portrait .bg{left:auto;right:0;width:var(--pw)}
  .page-head.portrait:before{background:linear-gradient(90deg,#000 calc(100% - var(--pw)),rgba(0,0,0,0) calc(100% - var(--pw) + 160px)),linear-gradient(to top,#000,rgba(0,0,0,0) 26%)}
  .page-head.has-photo h1,.page-head.has-photo .lead,.page-head.has-photo .crumbs{max-width:min(56%,660px)}
}
.prose{max-width:68ch}
.prose h2{font-size:clamp(30px,4vw,44px);margin:44px 0 14px}
.prose ul{padding-left:20px}.prose li{margin:6px 0}
.split{display:grid;gap:40px;align-items:start}
@media (min-width:900px){.split{grid-template-columns:1.1fr .9fr;gap:80px}}
.timeline{list-style:none;padding:0;margin:28px 0 0}
.timeline li{display:grid;grid-template-columns:92px 1fr;gap:4px 20px;padding:24px 0;border-top:1px solid var(--line)}
.timeline .y{grid-row:1/3;font:800 semi-expanded 40px/1 var(--display);color:var(--gold)}
.timeline h3{font-size:26px}
.timeline p{margin:0;color:var(--soft)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chip{display:inline-flex;align-items:center;min-height:46px;padding:10px 18px;border:1px solid var(--line-2);border-radius:2px;color:var(--ivory);text-decoration:none;font-size:15px}
.chip:hover{border-color:var(--gold)}
.svc-hero{border:1px solid var(--line);background:var(--surface)}
.svc-hero>div{padding:32px;min-height:340px;display:flex;flex-direction:column;justify-content:space-between}
.svc-hero .n{font:800 semi-expanded clamp(90px,16vw,170px)/1 var(--display);color:var(--gold)}
.svc-hero b{display:block;font:800 semi-expanded clamp(44px,6vw,76px)/1 var(--display);letter-spacing:-.02em}
.svc-hero span{display:block;margin-top:8px;font-size:15px;color:var(--stone)}
.svc-points{display:grid;gap:0;margin:22px 0;padding:0;list-style:none;counter-reset:p;border-top:1px solid var(--line)}
.svc-points li{position:relative;padding:18px 0 18px 46px;border-bottom:1px solid var(--line);counter-increment:p;color:var(--soft)}
.svc-points li:before{content:counter(p);position:absolute;left:0;top:12px;font:800 semi-expanded 30px/1 var(--display);color:var(--gold)}
.kit{display:grid;gap:0 40px;margin-top:28px;border-top:1px solid var(--line)}
@media (min-width:700px){.kit{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.kit.three{grid-template-columns:repeat(3,1fr)}}
.kit div{padding:24px 0;border-bottom:1px solid var(--line)}
.kit b{display:block;font:800 semi-expanded clamp(46px,6vw,72px)/1 var(--display);letter-spacing:-.02em}
.kit.names b{font-size:clamp(28px,3.2vw,38px);line-height:1.1}
.kit span{display:block;margin-top:8px;font-weight:600}
.kit small{display:block;margin-top:6px;color:var(--stone);font-size:14px}
.more{display:grid;gap:0 40px;margin-top:28px;border-top:1px solid var(--line)}
@media (min-width:700px){.more{grid-template-columns:repeat(3,1fr)}}
.more a{display:block;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ivory)}
.more a b{display:block;font:800 semi-expanded 28px/1.1 var(--display)}
.more a span{display:block;margin-top:6px;color:var(--stone);font-size:15px}
.more a:hover b{color:var(--gold-hi)}
.contact-split{display:grid;gap:44px;align-items:start}
@media (min-width:900px){.contact-split{grid-template-columns:1.2fr .8fr;gap:80px}}
.contact-split .frame img{aspect-ratio:4/5;object-position:50% 30%}
.qr{display:none;align-items:center;gap:18px;margin-top:24px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:460px}
.qr img{width:104px;height:104px;background:#fff;padding:6px}
.qr p{margin:0;font-size:15px;color:var(--soft)}.qr b{color:var(--ivory);font-weight:600}
@media (min-width:900px){.qr{display:flex}}
.h-sub{font-size:40px;margin-top:32px}.h-404{font-size:clamp(90px,22vw,240px)}

/* platforms, the reach ladder and the every-reel chart (Work) */
.plats{display:grid;gap:0 48px;margin-top:8px}
@media (min-width:800px){.plats{grid-template-columns:1fr 1fr}}
.plat{padding:28px 0 8px;border-top:1px solid var(--line)}
.plat .pn{margin:0 0 6px;font-size:15px;color:var(--stone)}
.plat .pv{display:block;font:800 semi-expanded clamp(72px,10vw,120px)/1 var(--display);letter-spacing:-.025em}
.plat.ig .pv{color:var(--gold)}
.plat .pl{display:block;margin-top:4px;font-size:15px;color:var(--soft)}
.plat dl{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:22px 0 0;border-top:1px solid var(--line)}
.plat dl div{padding:14px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column-reverse;justify-content:flex-end}
.plat dd{margin:0;font:800 semi-expanded 30px/1 var(--display)}
.plat dt{font-size:14px;color:var(--stone);margin-top:6px}
.ladder{display:grid;gap:16px;margin-top:6px}
.rung{display:grid;grid-template-columns:130px 1fr 90px;align-items:center;gap:16px}
.rung .lv{font-size:14px;color:var(--soft)}
.rung .bar{height:6px;background:rgba(242,236,226,.08)}
.rung .bar i{display:block;height:100%;background:var(--gold);width:var(--w,0);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.rung b{font:800 semi-expanded 36px/1 var(--display);text-align:right}
@media (max-width:520px){.rung{grid-template-columns:1fr 70px;gap:6px 10px}.rung .lv{grid-column:1/3}.rung b{font-size:30px}}
.skyline{margin:8px 0 44px}
.sky-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:14px}
.sky-legend .k{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--soft)}
.sky-legend .k:before{content:"";width:12px;height:12px}
.sky-legend .fb:before{background:var(--ivory)}.sky-legend .ig:before{background:var(--gold)}
.sky-plot{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;overflow:hidden;cursor:crosshair;touch-action:pan-y}
.sky-plot svg{display:block;width:100%;height:clamp(240px,40vw,440px)}
.sky-plot .b-fb{fill:var(--ivory);opacity:.85}.sky-plot .b-ig{fill:var(--gold)}
.sky-plot .base{stroke:rgba(242,236,226,.3);stroke-width:1;vector-effect:non-scaling-stroke}
.peak{position:absolute;transform:translate(-50%,-100%);pointer-events:none;padding-bottom:6px}
.peak.ig{transform:translate(-50%,0);padding:6px 0 0}
.peak b{display:block;white-space:nowrap;font:500 12px/1 var(--body);color:var(--ivory);background:#000;border:1px solid var(--line-2);padding:5px 8px}
.sky-tip{position:absolute;pointer-events:none;transform:translate(-50%,-120%);white-space:nowrap;font:500 13px/1.2 var(--body);background:var(--ivory);color:#000;padding:8px 10px}
.sky-axis{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--stone)}
.skyline figcaption{margin-top:12px;font-size:13px;color:var(--stone);max-width:76ch}
.growth{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin:26px 0 4px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.growth b{font:800 semi-expanded clamp(60px,8vw,96px)/1 var(--display);color:var(--gold)}
.growth p{margin:0;font-size:clamp(17px,1.7vw,20px);line-height:1.5;color:var(--soft)}
.growth strong{color:var(--ivory);font-weight:600}
@media (max-width:520px){.growth{grid-template-columns:1fr;gap:8px}}

/* footer */
footer{padding:64px 0 56px;color:var(--stone);font-size:15px;border-top:1px solid var(--line);background:#000}
footer .cols{display:grid;gap:30px}
@media (min-width:800px){footer .cols{grid-template-columns:2fr 1fr 1fr}}
footer .wm{font-size:28px}
footer h2{font:600 14px/1.4 var(--body);color:var(--ivory);margin:0 0 10px;letter-spacing:0}
footer ul{list-style:none;padding:0;margin:0}
footer li a{display:inline-block;padding:7px 0;color:var(--stone);text-decoration:none}
footer li a:hover{color:var(--ivory)}
footer .legal{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;border-top:1px solid var(--line);margin-top:40px;padding-top:18px;font-size:14px}
footer .legal a{color:var(--stone);display:inline-block;padding:12px 0}

/* phone contact bar */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:rgba(0,0,0,.92);border-top:1px solid var(--line-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sticky-cta a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font:600 16px/1 var(--body);text-decoration:none}
.sticky-cta .s-msg{background:#fff;color:#000}
.sticky-cta .s-mail{border:1px solid var(--line-2);color:var(--ivory)}
body{padding-bottom:76px}
@media (min-width:900px){.sticky-cta{display:none}body{padding-bottom:0}}
.js .sticky-cta{transform:translateY(110%);transition:transform .3s ease}
.js.past-hero .sticky-cta{transform:none}

/* phones: nothing runs off the screen */
@media (max-width:699px){
  .cta-pair{display:grid;grid-template-columns:1fr;gap:10px}
  .cta-pair .btn,.cta-pair.big .btn{width:100%;padding-left:16px;padding-right:16px}
  .hero .cta-pair{grid-template-columns:1fr 1fr}
}
@media (max-width:419px){.hero .cta-pair .l-long{display:none}.hero .cta-pair .l-short{display:inline}}

/* Thai: Archivo has no Thai, so Thai headings use a Thai sans */
.th,.svc-list.th-list h3{font-family:"Noto Sans Thai","Leelawadee UI","Thonburi",var(--body);font-weight:600;letter-spacing:0;line-height:1.25}
h2.th{font-size:clamp(30px,5vw,54px)}
.pitch.th{font-size:clamp(22px,4vw,30px);line-height:1.4}
.svc-list.th-list h3{font-size:clamp(26px,4vw,44px)}
.th-list .chat{display:block;margin-top:8px;font-size:14px;font-weight:600;color:var(--gold)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ================================================================== cinematic home */
.grain:after,.cin-hero:after,.scene:after,.closer:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.09;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 1. the entrance */
.cin-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;background:#000}
.cin-bg{position:absolute;inset:0;z-index:-3}
.cin-bg picture,.cin-bg img{width:100%;height:100%}
.cin-bg img{object-fit:cover;object-position:58% 18%;animation:kb 22s cubic-bezier(.2,.6,.2,1) both;transform-origin:60% 30%}
@keyframes kb{from{transform:scale(1.16)}to{transform:scale(1)}}
.cin-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,#000 4%,rgba(0,0,0,.72) 32%,rgba(0,0,0,0) 62%),linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0) 22%)}
.beams{position:absolute;inset:0;z-index:-2;overflow:hidden;mix-blend-mode:screen;pointer-events:none}
.beams i{position:absolute;top:-30%;width:34vw;height:150%;left:var(--x);filter:blur(28px);opacity:.42;transform-origin:50% 0;animation:sweep var(--d) ease-in-out infinite alternate;
  background:linear-gradient(to bottom,var(--c),rgba(0,0,0,0) 78%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.beams i:nth-child(1){--x:-8%;--c:rgba(255,236,200,.7);--d:9s;--r0:-26deg;--r1:-8deg}
.beams i:nth-child(2){--x:40%;--c:rgba(255,64,160,.55);--d:12s;--r0:14deg;--r1:-12deg}
.beams i:nth-child(3){--x:72%;--c:rgba(90,180,255,.5);--d:10s;--r0:22deg;--r1:6deg}
@keyframes sweep{from{transform:rotate(var(--r0))}to{transform:rotate(var(--r1))}}
.cin-copy{position:relative;z-index:4;max-width:var(--max);width:100%;margin:0 auto;padding:0 var(--gutter) 56px}
.cin-kicker{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--soft);margin:0 0 18px;animation:rise .9s .2s both}
.live{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,51,72,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(255,51,72,0)}100%{box-shadow:0 0 0 0 rgba(255,51,72,0)}}
.cin-name{margin:0;text-transform:uppercase;line-height:.84;letter-spacing:-.03em}
.cin-name span{display:block;font-weight:900;animation:rise 1s both}
.cin-name span:first-child{font-size:min(23vw,250px);font-stretch:125%;animation-delay:.35s}
.cin-name span:last-child{font-size:min(13.4vw,146px);font-stretch:100%;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.5px var(--ivory);animation-delay:.5s}
.cin-pitch{font-size:clamp(19px,2.2vw,26px);font-weight:500;line-height:1.35;margin:26px 0 26px;max-width:32ch;animation:rise 1s .7s both}
.cin-pitch span{color:var(--soft)}
.cin-cta{animation:rise 1s .85s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;right:var(--gutter);bottom:56px;z-index:4;display:none;flex-direction:column;align-items:center;gap:10px;color:var(--soft);text-decoration:none;font-size:13px;writing-mode:vertical-rl}
.scroll-cue i{width:1px;height:64px;background:linear-gradient(var(--ivory),rgba(255,255,255,0));animation:drip 2s infinite}
@keyframes drip{from{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}to{transform:scaleY(0);transform-origin:bottom}}
@media (min-width:900px){.scroll-cue{display:flex}.cin-copy{padding-bottom:72px}.cin-name span:last-child{-webkit-text-stroke-width:2px}}
@media (max-width:699px){.cin-cta{grid-template-columns:1fr 1fr!important}.cin-cta .btn{padding:14px 10px;font-size:15px}}
@media (max-width:419px){.cin-cta .l-long{display:none}.cin-cta .l-short{display:inline}}

/* 2. the reach: one number, counted up as it arrives */
.scene{position:relative;overflow:hidden;isolation:isolate;padding:120px 0}
.scene-bg{position:absolute;inset:0;z-index:-2}
.scene-bg picture,.scene-bg img{width:100%;height:100%}
.scene-bg img{object-fit:cover;filter:saturate(1.1)}
.reach{min-height:100svh;display:flex;align-items:center}
.reach:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 70% at 50% 40%,rgba(0,0,0,.6),#000 92%),rgba(0,0,0,.45)}
.scene-label{font-size:15px;font-weight:600;color:var(--soft);margin:0 0 14px}
.mega{margin:0;font-weight:900;font-stretch:100%;letter-spacing:-.04em;line-height:.9}
.mega span{display:block;font-size:min(15vw,184px);font-variant-numeric:tabular-nums}
.mega small{display:block;font-size:clamp(18px,2.2vw,26px);font-weight:500;letter-spacing:0;font-stretch:100%;color:var(--soft);margin-top:18px;line-height:1.3}
.reach-row{list-style:none;padding:0;margin:56px 0 28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--line-2)}
@media (min-width:900px){.reach-row{grid-template-columns:repeat(5,minmax(0,1fr))}}
.reach-row li{padding:20px 0;border-bottom:1px solid var(--line)}
.reach-row b{display:block;font-size:clamp(34px,4vw,54px);font-weight:900;font-stretch:112.5%;letter-spacing:-.03em;line-height:1}
.reach-row span{display:block;font-size:14px;color:var(--soft);margin-top:8px;line-height:1.35}

/* 3. the nights: a gallery that moves sideways as you scroll down */
.hscroll{position:relative;background:#000;border-top:1px solid var(--line)}
.hs-pin{overflow:hidden}
.hs-track{display:flex;align-items:center;gap:18px;padding:80px var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.hs-track::-webkit-scrollbar{display:none}
.hs-intro{flex:0 0 min(80vw,420px);scroll-snap-align:start}
.hs-intro h2{font-size:clamp(52px,8vw,120px);font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.86;letter-spacing:-.03em}
.hs-intro p{color:var(--soft);margin-top:22px;max-width:36ch}
.hs-card{position:relative;margin:0;flex:0 0 auto;height:min(62vh,560px);scroll-snap-align:center;overflow:hidden}
.hs-card.wide{aspect-ratio:3/2}.hs-card.tall{aspect-ratio:4/5}
.hs-card picture,.hs-card img{width:100%;height:100%}
.hs-card img{object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hs-card:hover img{transform:scale(1.04)}
.hs-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 18px 16px;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0));font-weight:600;font-size:15px}
@media (min-width:900px){
  .js .hscroll.pinned .hs-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center}
  .js .hscroll.pinned .hs-track{overflow:visible;scroll-snap-type:none;will-change:transform;padding:0 var(--gutter) 0 max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));gap:28px}
  .hs-card{height:min(72vh,680px)}
  .hs-intro{flex-basis:440px}
}

/* reels on the home page: the stage light falls on the number */
.reels-sec{border-top:1px solid var(--line)}
.top3 .reel:not(.preview){background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),#0b0b0c;border-color:var(--line);border-radius:18px}
.top3 .reel.preview{border-radius:18px}
.top3 .reel:not(.preview) b{font-weight:900;font-stretch:112.5%;letter-spacing:-.03em}
.reel .t{font-weight:800;font-stretch:112.5%}
.reel .cue{color:var(--ivory)}
.reel:hover{border-color:var(--ivory)}
.reel.preview .over .orig{color:var(--ivory)}

/* 4. services as three night scenes */
.svc-scenes{padding:120px 0 40px;border-top:1px solid var(--line)}
.svc-panels{display:grid;gap:10px;padding:0 var(--gutter);max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto}
@media (min-width:900px){.svc-panels{grid-template-columns:repeat(3,1fr);gap:14px}}
.svc-panel{position:relative;display:flex;align-items:flex-end;min-height:min(78vw,460px);overflow:hidden;color:var(--ivory);text-decoration:none;border-radius:18px;isolation:isolate}
@media (min-width:900px){.svc-panel{min-height:620px}}
.sp-bg{position:absolute;inset:0;z-index:-2}
.sp-bg picture,.sp-bg img{width:100%;height:100%}
.sp-bg img{object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s ease;filter:brightness(.8)}
.svc-panel:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.2) 60%,rgba(0,0,0,0))}
.svc-panel:hover .sp-bg img{transform:scale(1.06);filter:brightness(1)}
.sp-txt{padding:26px}
.sp-txt b{display:block;font-size:clamp(30px,3vw,42px);font-weight:900;font-stretch:112.5%;letter-spacing:-.03em;line-height:.98}
.sp-txt>span{display:block;margin-top:10px;color:var(--soft);font-size:16px;max-width:30ch}
.sp-txt em{display:inline-block;margin-top:18px;font-style:normal;font-weight:600;font-size:15px;border-bottom:1px solid var(--ivory);padding-bottom:2px}
.svc-other{color:var(--soft);margin:28px 0 0;max-width:70ch}

/* story years as a numbered timeline */
ol.years{list-style:none;padding:0}
.years li{padding:20px 0;border-bottom:1px solid var(--line)}
.years b{display:block;font-size:44px;font-weight:900;font-stretch:112.5%;letter-spacing:-.03em;line-height:1}

/* 5. the last scene: the room, the invitation */
.closer{position:relative;overflow:hidden;isolation:isolate;padding:140px 0 120px;background:#000}
.closer .scene-bg img{filter:brightness(.55) saturate(1.1)}
.closer:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,#000 5%,rgba(0,0,0,.35) 60%,#000)}
.closer h2{font-size:min(14vw,168px);font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.86;letter-spacing:-.035em}
.closer .wrap{position:relative;z-index:4}
.mail code{font:600 clamp(19px,2.6vw,28px)/1.2 var(--body)}

@media (prefers-reduced-motion:reduce){
  .cin-bg img,.beams i,.cin-name span,.cin-kicker,.cin-pitch,.cin-cta,.live,.scroll-cue i{animation:none!important}
  .js .hscroll.pinned .hs-pin{position:static;height:auto}
}

/* entrance, fitted: phones get sizes that always fit the width; computers put the photo on the right so the name never covers his face */
@media (max-width:899px){
  .cin-name span:first-child{font-size:17.5vw;font-stretch:112.5%}
  .cin-name span:last-child{font-size:10.4vw}
  .cin-bg img{object-position:50% 12%}
  .wm{font-size:18px}
}
@media (min-width:900px){
  .cin-bg{left:36%}
  .cin-bg img{object-position:50% 14%}
  .cin-hero:before{background:linear-gradient(90deg,#000 34%,rgba(0,0,0,.6) 46%,rgba(0,0,0,0) 66%),linear-gradient(to top,#000 2%,rgba(0,0,0,0) 34%),linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0) 18%)}
  .cin-kicker{font-size:16px;color:var(--ivory)}
}
.reel.preview iframe{background:#0b0b0c}
@media (max-width:899px){
  .name b,.name span{font-size:13vw;font-stretch:100%}
  .name span{font-size:11vw}
  .page-head h1{font-size:clamp(34px,10vw,64px);font-stretch:100%}
}
.ticker{overflow:hidden}
section.block{overflow-x:clip}
.reels-sec .reel .d{display:none}

/* ================================================================== round 2: motion, mark, scenes everywhere */
/* the monogram */
.wm{align-items:center}

/* the entrance plays like a film: four photos in a slow sequence, each pushing in */
.cin-bg .slide{position:absolute;inset:0;opacity:0;animation:xfade 28s linear infinite}
.cin-bg .slide picture,.cin-bg .slide img{width:100%;height:100%}
.cin-bg .slide img{object-fit:cover;animation:none}
.cin-bg .s1{animation-delay:-1.6s}.cin-bg .s2{animation-delay:5.4s}.cin-bg .s3{animation-delay:12.4s}.cin-bg .s4{animation-delay:19.4s}
.cin-bg .s1 img{object-position:58% 14%}.cin-bg .s2 img{object-position:60% 50%}.cin-bg .s3 img{object-position:50% 40%}.cin-bg .s4 img{object-position:62% 20%}
@keyframes xfade{0%{opacity:0;transform:scale(1.12)}6%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
/* a light that follows the pointer, like a follow spot */
.spot{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(520px circle at var(--mx,72%) var(--my,30%),rgba(255,255,255,.55),rgba(255,255,255,0) 62%);opacity:0;transition:opacity .6s ease}
.cin-hero:hover .spot{opacity:1}

/* inner pages open as a scene: full-bleed photo, big wide title */
.page-head.has-photo{min-height:min(84svh,820px);display:flex;align-items:flex-end;padding:150px 0 64px}
.page-head.has-photo .wrap{position:relative;z-index:2;width:100%}
.page-head.has-photo .bg,.page-head.portrait .bg{inset:0;left:0;right:0;width:auto;height:auto;-webkit-mask-image:none;mask-image:none}
.page-head .bg img{animation:kb 20s cubic-bezier(.2,.6,.2,1) both}
.page-head.has-photo:before,.page-head.portrait:before{background:linear-gradient(to top,#000 3%,rgba(0,0,0,.66) 38%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.55))}
.page-head.has-photo h1,.page-head.has-photo .lead,.page-head.has-photo .crumbs{max-width:none}
.page-head.has-photo h1{text-transform:uppercase;font-weight:900;font-stretch:112.5%;font-size:min(9.4vw,128px);line-height:.88;letter-spacing:-.035em}
.page-head.has-photo .lead{max-width:52ch;font-size:clamp(17px,1.8vw,21px)}
@media (min-width:900px){.page-head.has-photo .bg{left:0}}
.ph-about img{object-position:30% 35%}.ph-media-kit img{object-position:60% 25%}.ph-services-brand-campaigns img{object-position:50% 18%}

@media (prefers-reduced-motion:reduce){
  .cin-bg .slide{animation:none}.cin-bg .s1{opacity:1}
  .page-head .bg img{animation:none}
  .spot{display:none}
}

/* ===================== round 3: built for the phone first ===================== */
/* the name, set in type: no symbol */
.wm{align-items:baseline;gap:.42em;font:900 expanded 17px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.wm b{font-weight:900}
.wm span{font-weight:300;color:var(--soft)}
@media (min-width:900px){.wm{font-size:19px}}
footer .wm{font-size:20px}
@media (max-width:899px){.top .lang{display:none}}
@media (max-width:359px){.top .wm{font-size:15px}}
.menu .panel a.p-lang{font:500 16px/1 var(--body);color:var(--soft);padding:16px 0}

/* reels: a ranked list, the number and a bar for how far each one went */
.reel-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);counter-reset:none}
.rrow{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:0 14px;padding:20px 0;border-bottom:1px solid var(--line);color:var(--ivory);text-decoration:none;transition:background .25s ease}
.rk{align-self:start;padding-top:10px;font-size:13px;font-weight:600;color:var(--stone);font-variant-numeric:tabular-nums}
.rv b{display:block;font:900 semi-expanded clamp(38px,6vw,76px)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.rv .bar{display:block;height:3px;margin-top:12px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.rv .bar i{display:block;height:100%;width:var(--w,0);background:var(--ivory);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.rrow.ig .bar i{background:var(--red)}
.rt .t{display:block;font:800 semi-expanded clamp(17px,2vw,26px)/1.15 var(--display)}
.rt .pf{display:block;margin-top:6px;font-size:13px;color:var(--stone)}
.rrow:hover{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,0) 80%)}
@media (min-width:900px){.rrow{grid-template-columns:56px minmax(0,1fr) minmax(0,1.2fr);gap:0 32px;padding:30px 12px}.rk{font-size:15px;padding-top:16px}}

/* nights: on a phone, the title stays put while the photos swipe past */
@media (max-width:899px){
  .hs-track{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;grid-auto-columns:76vw;align-items:start;gap:26px 12px;padding:72px var(--gutter) 64px}
  .hs-intro{grid-row:1;grid-column:1/span 5;scroll-snap-align:none}
  .hs-intro h2{position:sticky;left:0;display:inline-block;font-size:15vw}
  .hs-card,.hs-card.wide,.hs-card.tall{grid-row:2;height:auto;width:100%;aspect-ratio:4/5;scroll-snap-align:start;border-radius:14px}
  .hs-card figcaption{font-size:14px;padding:48px 14px 14px}
}

/* the numbers band on Work runs like a ticker */
.ticker{overflow:hidden}
.ticker .run{display:flex;width:max-content;max-width:none;margin:0;padding:0;animation:tick 48s linear infinite}
.ticker ul{display:flex}
.ticker li{flex:none;margin:0;padding:22px 34px 20px 0;border:0}
.ticker li+li,.ticker ul+ul li:first-child{padding-left:34px;border-left:1px solid var(--line)}
@keyframes tick{to{transform:translate3d(-50%,0,0)}}
.ticker:hover .run{animation-play-state:paused}

/* sections breathe less on a phone */
@media (max-width:899px){
  section.block{padding:64px 0}
  .sec-head{margin-bottom:28px;gap:12px}
  .reach{min-height:0;padding:104px 0 72px}
  .reach-row{margin:40px 0 22px}
  .closer{padding:104px 0 96px}
  .closer h2{font-size:15vw}
  .page-head.has-photo{min-height:min(78svh,680px);padding:120px 0 44px}
  .page-head.has-photo .lead{font-size:16px;line-height:1.55}
  .page-head .crumbs{font-size:13px}
  .svc-hero{display:none}
  .split{gap:36px}
}

/* timeline: the year above its line on a phone, never touching it */
@media (max-width:599px){
  .timeline li{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .timeline .y{grid-row:auto;font-size:30px}
  .timeline h3{font-size:22px}
}

/* how far they travel: the number keeps its room */
.rung{grid-template-columns:130px minmax(0,1fr) auto}
.rung b{white-space:nowrap;min-width:3ch}
@media (max-width:520px){.rung{grid-template-columns:minmax(0,1fr) auto}.rung b{font-size:28px}}

/* the every-reel chart: on a phone only the two tallest reels are labelled */
@media (max-width:599px){.peak:not(.p0):not(.p1){display:none}}

/* the dated numbers on Media kit and service pages: two across on a phone */
@media (max-width:699px){
  .kit:not(.names){grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
  .kit:not(.names) b{font-size:clamp(30px,9vw,40px)}
  .kit:not(.names) span{font-size:15px;line-height:1.3}
  .kit:not(.names) small{font-size:12.5px;line-height:1.45}
  .kit:not(.names) div:first-child{grid-column:1/-1}
  .kit:not(.names) div:first-child b{font-size:clamp(46px,15vw,64px)}
}

/* next-page links, compact */
@media (max-width:699px){.more a{padding:18px 0}.more a b{font-size:22px}.more a span{font-size:14px}}

/* footer: short, links flow in lines */
footer{padding:52px 0 44px}
footer .cols{gap:26px}
footer h2{font:600 12px/1.4 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--stone);margin:0 0 6px}
footer ul{display:flex;flex-wrap:wrap;gap:0 20px}
footer li a{color:var(--soft);padding:8px 0}
footer h2.mt-m{margin-top:22px}
footer .legal{margin-top:30px;font-size:13px}
@media (max-width:899px){body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}}

/* phone contact bar: slimmer, and out of the way at the end of the page */
.sticky-cta{padding:8px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.sticky-cta a{min-height:46px;font-size:15px}
.js.at-end .sticky-cta{transform:translateY(110%)}

/* Thai entrance */
.cin-pitch.th{font-family:"Noto Sans Thai","Leelawadee UI","Thonburi",var(--body);line-height:1.4}

@media (prefers-reduced-motion:reduce){
  .ticker .run{animation:none;width:auto;flex-wrap:wrap}
  .ticker ul[aria-hidden]{display:none}
  .rv .bar i{transition:none}
}
.chip{border-radius:999px}
@media (min-width:900px){.contact-split{grid-template-columns:minmax(0,820px)}}
.page-head.has-photo .crumbs{text-shadow:0 1px 8px rgba(0,0,0,.9)}
.lang{border-radius:999px}

/* skyline peaks, generated from content/series.json */
.peak.p0{left:81.00%;top:27.40%}.peak.p1{left:39.08%;top:87.50%}.peak.p2{left:53.60%;top:80.61%}