/* ---------- V1 : infinite draggable canvas ---------- */
.world-wrap{position:fixed;inset:0;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;}
.world-wrap.dragging{cursor:grabbing;}
.world{position:absolute;top:0;left:0;will-change:transform;
  background-image:radial-gradient(circle, rgba(38,38,38,.06) 1px, transparent 1px);
  background-size:26px 26px;background-position:-13px -13px;}
.tile{position:absolute;top:0;left:0;}
.card{position:absolute;user-select:none;}
.card .ph{position:relative;width:100%;height:100%;background:var(--tone,#ececec);overflow:hidden;}
.card .ph::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55);opacity:0;transition:opacity .2s;z-index:1;}
.card:hover .ph::after{opacity:1;}
.card .meta{position:absolute;left:10px;bottom:10px;display:flex;gap:3px;pointer-events:none;z-index:2;}
.card .meta .pc{display:inline-block;width:20px;height:20px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.14);}
.fade{position:fixed;left:0;right:0;z-index:38;pointer-events:none;}
.fade.top{top:0;height:110px;background:linear-gradient(to bottom,rgba(255,255,255,.92),rgba(255,255,255,0));}
.fade.bottom{bottom:0;height:110px;background:linear-gradient(to top,rgba(255,255,255,.92),rgba(255,255,255,0));}
.hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);font-size:11px;letter-spacing:.22em;color:var(--grey-5);z-index:41;transition:opacity .8s;text-transform:uppercase;}
.hint.gone{opacity:0;}
.center-mark{z-index:5;position:absolute;transform:translate(-50%,-50%);text-align:center;pointer-events:none;white-space:nowrap;}
.center-mark .line{font-weight:300;font-size:13px;letter-spacing:.02em;color:var(--grey-6);}
.center-mark .line em{font-style:italic;}
body.leaving .chrome,body.leaving .fade,body.leaving .hint,body.leaving .world-wrap{opacity:0;transition:opacity .45s ease;}
.ghost{position:fixed;z-index:90;transition:left .65s cubic-bezier(.7,0,.2,1),top .65s cubic-bezier(.7,0,.2,1),width .65s cubic-bezier(.7,0,.2,1),height .65s cubic-bezier(.7,0,.2,1);}

/* ---------- combined preview glue ---------- */
.chrome{z-index:70;}
#caseview,#caseview2,#caseview3{position:fixed;inset:0;background:#fff;z-index:60;overflow-y:auto;display:none;opacity:1;transition:opacity .35s ease;}
#caseview.out,#caseview2.out,#caseview3.out{opacity:0;}
body.incase .world-wrap,body.incase .fade,body.incase .hint,body.incase .corner-bl,body.incase .corner-br{display:none;}
body.incase .nav a:first-child::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:2px;}
.ghost{transition:left .65s cubic-bezier(.7,0,.2,1),top .65s cubic-bezier(.7,0,.2,1),width .65s cubic-bezier(.7,0,.2,1),height .65s cubic-bezier(.7,0,.2,1),background .65s ease,opacity .3s ease;}

/* ---------- work page base ---------- */

#caseview .topfade,#caseview2 .topfade,#caseview3 .topfade{position:fixed;left:0;right:0;top:0;height:96px;z-index:38;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.94),rgba(255,255,255,0));}
.nav a.on{opacity:1;}
.nav a.on::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:2px;}
.enter{position:fixed;left:0;top:0;width:100vw;height:100vh;background:#f1f1f1;z-index:95;
  transition:left .8s cubic-bezier(.7,0,.2,1),top .8s cubic-bezier(.7,0,.2,1),
             width .8s cubic-bezier(.7,0,.2,1),height .8s cubic-bezier(.7,0,.2,1),opacity .35s ease;}
#caseview .reveal,#caseview2 .reveal,#caseview3 .reveal{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.6,.2,1);}
#caseview.ready .reveal,#caseview2.ready .reveal,#caseview3.ready .reveal{opacity:1;transform:none;}
#caseview.ready a.cta.reveal,#caseview2.ready a.cta.reveal,#caseview3.ready a.cta.reveal{transition:opacity .25s ease;}
#caseview .reveal.d1,#caseview2 .reveal.d1,#caseview3 .reveal.d1{transition-delay:.08s}#caseview .reveal.d2,#caseview2 .reveal.d2,#caseview3 .reveal.d2{transition-delay:.18s}#caseview .reveal.d3,#caseview2 .reveal.d3,#caseview3 .reveal.d3{transition-delay:.28s}#caseview .reveal.d4,#caseview2 .reveal.d4,#caseview3 .reveal.d4{transition-delay:.38s}

.ph{background:#ececec;position:relative;}
.ph .cap{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;}
.ph .cap span{padding:5px 10px;border-radius:999px;background:rgba(250,250,250,.92);font-size:10px;letter-spacing:.04em;color:var(--grey-6);white-space:nowrap;}
.wfooter{display:flex;justify-content:space-between;align-items:baseline;padding:0 32px 30px;font-size:11px;color:var(--grey-6);letter-spacing:.04em;}
.wfooter a{transition:opacity .25s;}
.wfooter a:hover{opacity:.45;}
.wfooter .next{font-size:13px;color:var(--ink);}
.label{font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--grey-5);}

.split{display:flex;align-items:flex-start;padding:0 32px;gap:60px;}
.info{position:sticky;top:0;width:36%;min-width:330px;height:100vh;display:flex;flex-direction:column;justify-content:center;}
.info h1{font-weight:400;font-size:32px;letter-spacing:-.025em;line-height:1.04;margin:14px 0 26px;}
.info .desc{font-weight:300;font-size:13px;line-height:1.7;color:var(--grey-6);max-width:400px;margin-bottom:34px;}
.kv{font-size:13px;line-height:2;color:var(--grey-6);margin-bottom:34px;}
.kv .k{color:var(--grey-5);display:inline-block;width:96px;}
.ministats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 28px;margin-bottom:38px;max-width:460px;}
.ministats .stat{min-width:0;}
.stat b{font-weight:300;font-size:20px;letter-spacing:-.02em;display:block;}
.stat span{font-size:11px;letter-spacing:.05em;color:var(--grey-5);}
.cta{font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--ink);transition:opacity .25s;width:max-content;}
.cta:hover{opacity:.45;}
.mediacol{flex:1;padding:110px 0 40px;}
.mediacol .ph{width:100%;margin-bottom:12px;}
.m169{aspect-ratio:16/9;}
.mrow{display:flex;gap:12px;margin-bottom:12px;}
.mrow .ph{flex:1;aspect-ratio:9/16;margin-bottom:0 !important;}
.between{margin:56px 0;max-width:660px;}
.between h2{font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--grey-5);margin-bottom:20px;}
.gg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 26px;}
.guest b{font-weight:400;font-size:13px;display:block;}
.guest span{font-size:11px;color:var(--grey-5);}
.q{font-weight:300;font-size:20px;line-height:1.6;}
.nextlink{display:block;margin:44px 0 10px;font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--ink);width:max-content;transition:opacity .25s;}
.nextlink:hover{opacity:.45;}
.r{margin-top:12px;font-size:11px;color:var(--grey-5);}

/* ---------- Mag ---------- */
#magview{position:fixed;inset:0;background:#fff;z-index:60;overflow-y:auto;display:none;opacity:1;transition:opacity .35s ease;}
#magview.out{opacity:0;}
#magview .topfade{position:fixed;left:0;right:0;top:0;height:96px;z-index:65;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.94),rgba(255,255,255,0));}
body.inmag .world-wrap,body.inmag .fade,body.inmag .hint,body.inmag .corner-bl,body.inmag .corner-br{display:none;}
body.inmag .nav a:nth-child(2)::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:2px;}
.magintro{margin:148px auto 72px;text-align:center;font-weight:300;font-size:13px;letter-spacing:.02em;color:var(--grey-6);padding:0 24px;}
.magintro em{font-style:italic;}
.maggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 12px;}
.magcard{display:block;cursor:pointer;}
.magcard .mph{position:relative;aspect-ratio:4/5;background:var(--tone,#ececec);overflow:hidden;}
.magcard .mph::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55);opacity:0;transition:opacity .35s;}
.magcard:hover .mph::after{opacity:1;}
.magcard .mt{margin-top:10px;font-size:13px;letter-spacing:.02em;color:var(--ink);}
.magcard .md{margin-top:3px;font-size:11px;color:var(--grey-5);}
.magfoot{margin:110px 0 30px;text-align:center;font-size:11px;letter-spacing:.04em;color:var(--grey-6);}

/* ---------- Work index ---------- */
#workview{position:fixed;inset:0;background:#fff;z-index:60;overflow-y:auto;display:none;opacity:1;transition:opacity .35s ease;}
#workview.out{opacity:0;}
#workview .topfade{position:fixed;left:0;right:0;top:0;height:96px;z-index:65;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.94),rgba(255,255,255,0));}
body.inwork .world-wrap,body.inwork .fade,body.inwork .hint,body.inwork .corner-bl,body.inwork .corner-br{display:none;}
body.inwork .nav a:nth-child(1)::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:2px;}
#workview .mph{aspect-ratio:16/9;}
.wpills{position:absolute;left:10px;top:10px;display:flex;gap:6px;z-index:2;}
.wpills span{display:inline-block;padding:5px 10px;border-radius:999px;background:rgba(250,250,250,.92);font-size:10px;letter-spacing:.04em;color:var(--grey-6);white-space:nowrap;}
.wpills .t{color:var(--grey-5);}
body.gridleave #workview{opacity:0;}
/* ---------- mobile ---------- */
@media (max-width: 1024px){
  .maggrid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 640px){
  .maggrid{grid-template-columns:1fr;}
  .magintro{margin:118px auto 48px;}
  .magfoot{margin:80px 0 26px;}
}

/* ---------- Contact ---------- */
#contactview{position:fixed;inset:0;background:#fff;z-index:60;overflow-y:auto;display:none;opacity:1;transition:opacity .35s ease;}
#contactview.out{opacity:0;}
#contactview .topfade{position:fixed;left:0;right:0;top:0;height:96px;z-index:65;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.94),rgba(255,255,255,0));}
body.incontact .world-wrap,body.incontact .fade,body.incontact .hint,body.incontact .corner-bl,body.incontact .corner-br{display:none;}
body.incontact .nav a:nth-child(4)::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:2px;}
.cwrap{padding:0 16px;flex:1;display:flex;align-items:center;justify-content:center;}
#contactview{flex-direction:column;}

/* ---------- Mag post ---------- */
#postview{position:fixed;inset:0;background:#fff;z-index:60;overflow-y:auto;display:none;opacity:1;transition:opacity .35s ease;}
#postview.out{opacity:0;}
#postview .topfade{position:fixed;left:0;right:0;top:0;height:96px;z-index:65;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.94),rgba(255,255,255,0));}
body.inpost .world-wrap,body.inpost .fade,body.inpost .hint,body.inpost .corner-bl,body.inpost .corner-br{display:none;}
body.inpost .nav a:nth-child(2)::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:2px;}
.postwrap{max-width:560px;margin:148px auto 0;padding:0 16px;}
.postwrap .pill{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--grey-1);font-size:10px;letter-spacing:.04em;color:var(--grey-6);margin-bottom:20px;}
.ptitle{font-weight:400;font-size:32px;letter-spacing:-.025em;line-height:1.12;}
.pdate{margin-top:10px;font-size:11px;color:var(--grey-5);}
.phero{width:100%;aspect-ratio:210/297;background:#ececec;margin:36px 0 44px;}
.pmedia{width:100%;aspect-ratio:210/297;background:#e6e6e6;margin:40px 0;}
.postwrap h2{font-size:13px;font-weight:400;color:var(--ink);margin:0 0 16px;letter-spacing:-.01em;}
.postwrap p{font-weight:300;font-size:13px;line-height:1.75;color:var(--grey-6);margin-bottom:22px;}
.pquote{font-weight:300;font-size:20px;line-height:1.5;color:var(--ink);letter-spacing:-.01em;margin:44px 0;}
.pcontact{display:inline-block;margin-top:26px;font-size:13px;letter-spacing:.02em;color:var(--ink);transition:opacity .25s;}
.pcontact:hover{opacity:.45;}


/* ---------- mobile chrome ---------- */
@media (max-width: 640px){
  .logo{top:20px;left:50%;transform:translateX(-50%);}
  .logo svg{width:92px;}
  .nav{top:58px;left:0;right:0;flex-direction:row;justify-content:center;gap:12px;}
  .fade.top{height:150px;}
  #caseview .topfade,#caseview2 .topfade,#magview .topfade,#workview .topfade,#contactview .topfade,#postview .topfade,#caseview3 .topfade{height:150px;}
  .magintro{margin:132px auto 44px;}
  .postwrap{margin-top:132px;}
  .corner-bl,.corner-br{font-size:11px;}
  .center-mark .line{font-size:13px;}
}

.mgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px 12px;padding:0 12px;}
.mgc{display:block;transition:opacity .25s;}
.mgc:hover{opacity:.6;}
.mgth{position:relative;aspect-ratio:4/5;background:var(--tone,#ececec);}
.mpill{position:absolute;top:10px;left:10px;padding:5px 10px;border-radius:999px;background:rgba(250,250,250,.92);font-size:10px;letter-spacing:.04em;color:var(--grey-6);}
.mgc .mt{font-size:13px;color:var(--ink);margin-top:10px;line-height:1.35;}
.mgc .md{font-size:11px;color:var(--grey-5);margin-top:3px;}
@media (max-width: 1024px){ .mgrid{grid-template-columns:repeat(3,1fr);} }
@media (max-width: 640px){ .mgrid{grid-template-columns:repeat(2,1fr);gap:22px 10px;} }


/* about */
/* contact: pill row */
.crow{display:flex;flex-wrap:wrap;justify-content:center;gap:0;padding:0 16px;}
.cpill{display:inline-flex;align-items:center;justify-content:center;padding:7px 13px;border-radius:999px;border:1px solid #eaeaea;background:#fff;font-family:inherit;font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--ink);cursor:pointer;}
.cpill span{display:inline-block;}
.cpill:not(.cbook) span{filter:blur(2.5px);opacity:.5;transition:filter .45s ease,opacity .45s ease;}
.cpill:not(.cbook):hover span{filter:blur(0);opacity:1;}
.cpill.cbook{background:var(--ink);border-color:var(--ink);color:#fff;}
.cpill.cbook .ch{display:inline-block;}
.cpill.cbook:hover .ch{animation:chpop .5s cubic-bezier(.2,.6,.2,1);animation-delay:calc(var(--i)*22ms);}
@keyframes chpop{0%{transform:translateY(0);}38%{transform:translateY(-3px);}100%{transform:translateY(0);}}
@media (max-width: 640px){
  .cpill:not(.cbook) span{filter:none;opacity:1;}
}
.cfoot{margin:0 0 30px;}
#aboutview{flex-direction:column;}
.aboutwrap{flex:1 0 auto;width:100%;}
#aboutview{position:fixed;inset:0;background:#fff;z-index:60;overflow-y:auto;display:none;opacity:1;transition:opacity .35s ease;}
#aboutview.out{opacity:0;}
#aboutview .topfade{position:fixed;left:0;right:0;top:0;height:96px;z-index:65;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.94),rgba(255,255,255,0));}
body.inabout .world-wrap,body.inabout .fade,body.inabout .hint,body.inabout .corner-bl,body.inabout .corner-br{display:none;}
body.inabout .nav a:nth-child(3)::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink);margin-right:7px;vertical-align:2px;}
.aboutwrap{max-width:560px;margin:148px auto 0;padding:0 16px;}
.abio{font-weight:400;font-size:20px;line-height:1.35;letter-spacing:-.01em;color:var(--ink);max-width:680px;margin-bottom:22px;}
.abio2{font-weight:400;font-size:13px;line-height:1.55;color:var(--grey-6);max-width:600px;margin-bottom:80px;}
.ah{font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--grey-5);margin-bottom:16px;}
.aboutwrap .abio2{margin-bottom:16px;}
.asec{margin-top:60px;}
.ah.sub{margin-bottom:8px;}
.otabs{display:flex;gap:18px;margin-bottom:22px;font-size:13px;}
.otabs a{color:var(--grey-4);cursor:pointer;transition:color .3s ease,opacity .25s;}
.otabs a:hover{opacity:.65;}
.otabs a.on{color:var(--ink);opacity:1;}
.odesc{font-weight:400;font-size:20px;line-height:1.4;letter-spacing:-.005em;color:var(--ink);margin-bottom:26px;transition:opacity .25s ease;}
.osvc{font-size:13px;line-height:1.55;color:var(--grey-6);transition:opacity .25s ease;}
.cfilter{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:24px;font-size:13px;}
.cfilter a{color:var(--grey-4);cursor:pointer;transition:color .3s ease;}
.cfilter a:hover{color:var(--grey-6);}
.cfilter a.on{color:var(--ink);}
.clcols{columns:3;column-gap:22px;font-size:13px;}
.clcols span{display:block;margin-bottom:6px;break-inside:avoid;color:var(--grey-6);transition:color .35s ease;}
.clcols.f span{color:var(--grey-3);}
.clcols.f span.hit{color:var(--grey-6);}
.mapwrap{margin:4px 0 0;}
.seq{fill:var(--grey-1);animation:seq 15.4s ease-in-out infinite;animation-delay:var(--sd);}
@keyframes seq{0%,3%{fill:var(--grey-1);}6%,11%{fill:var(--grey-5);}14.3%,100%{fill:var(--grey-1);}}
.maphold{position:relative;}
.acontact{display:inline-block;margin-top:38px;}
.cpin{position:absolute;transform:translate(-50%,-50%);padding:5px 11px;border-radius:999px;border:1px solid #eaeaea;background:#fff;font-size:11px;letter-spacing:.02em;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;animation:cpin 15.4s ease infinite;animation-delay:var(--sd);}
@keyframes cpin{
  0%,4.5%{opacity:0;filter:blur(3px);transform:translate(-50%,calc(-50% + 4px));}
  7%,10.5%{opacity:1;filter:blur(0);transform:translate(-50%,-50%);}
  12.8%,100%{opacity:0;filter:blur(3px);transform:translate(-50%,calc(-50% - 3px));}
}
.mapsvg{width:100%;height:auto;display:block;}
@media (max-width: 640px){
  .clcols{columns:2;}
  .asec{margin-top:48px;}
}
@media (max-width: 640px){
  #aboutview .topfade{height:150px;}
  .aboutwrap{margin-top:132px;}
}

/* ---------- mobile fixes: case study stacking + nav veil ---------- */
@media (max-width: 640px){
  .split{flex-direction:column;gap:0;padding:0 16px;}
  .info{position:static;width:100%;min-width:0;height:auto;display:block;padding:170px 0 10px;}
  .info h1{font-size:36px;}
  .mediacol{width:100%;flex:none;padding:28px 0 40px;}
  .gg{grid-template-columns:repeat(2,1fr);}
  .wfooter{padding:0 16px 26px;}
  #caseview .topfade,#caseview2 .topfade,#magview .topfade,#workview .topfade,#contactview .topfade,#postview .topfade,#aboutview .topfade,#caseview3 .topfade{height:185px;background:linear-gradient(to bottom,rgba(255,255,255,.97) 0,rgba(255,255,255,.97) 104px,rgba(255,255,255,0) 185px);}
  .fade.top{height:175px;background:linear-gradient(to bottom,rgba(255,255,255,.95) 0,rgba(255,255,255,.7) 95px,rgba(255,255,255,0) 175px);}
}


/* about: leadership + contact pills under the map */
.alead{font-size:13px;color:var(--grey-6);line-height:1.55;}
.alead a{color:var(--ink);text-decoration:none;transition:opacity .3s ease;}
.alead a:hover{opacity:.5;}
.crow.acrow{justify-content:flex-start;padding:0;margin-top:38px;}

/* floating book-a-call badge (replaces drag-to-explore) */
.hbadge{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;border-radius:999px;border:1px solid #eaeaea;background:#fff;font-size:13px;color:var(--ink);cursor:pointer;z-index:84;text-decoration:none;overflow:hidden;}
.hbadge .st{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;color:var(--grey-5);}
.hbadge .d{width:5px;height:5px;border-radius:50%;background:var(--ink);animation:hblink 1.6s ease-in-out infinite;}
.hbadge .bk{padding:8px 14px;border-left:1px solid #eaeaea;color:var(--ink);transition:background .3s ease;}
.hbadge:hover .bk{background:var(--grey-1);}
@keyframes hblink{0%,100%{opacity:1;}50%{opacity:.15;}}
body.incase .hbadge,body.inmag .hbadge,body.inwork .hbadge,body.incontact .hbadge,body.inpost .hbadge,body.inabout .hbadge{display:none;}
body.leaving .hbadge{opacity:0;transition:opacity .45s ease;}

/* click-to-play video test */
.vwrap{position:fixed;inset:0;z-index:80;}
.vlight{background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s ease;}
.vlight.on{opacity:1;}
.vbox{width:min(1100px,90vw);aspect-ratio:16/9;max-height:82vh;background:#0d0d0d;box-shadow:0 30px 80px rgba(0,0,0,.16);}
.vbox iframe{width:100%;height:100%;border:0;display:block;}
.vghost{position:fixed;z-index:80;background:#ececec;background-size:cover;background-position:center;transition:left .6s cubic-bezier(.2,.6,.2,1),top .6s cubic-bezier(.2,.6,.2,1),width .6s cubic-bezier(.2,.6,.2,1),height .6s cubic-bezier(.2,.6,.2,1),opacity .3s ease;}
.vghost iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transition:opacity .35s ease;background:#0d0d0d;}
.vx{position:fixed;top:20px;right:24px;z-index:82;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:15px;line-height:1;background:#fff;border:1px solid #eaeaea;border-radius:50%;padding:0;color:var(--ink);cursor:pointer;transition:opacity .3s ease;}
.vx:hover{opacity:.6;}

/* bottom gradient on image thumbnails so the pills stay readable */
.card .ph.img::before{content:'';position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));pointer-events:none;z-index:0;}

/* mobile scroll feed */
@media (max-width:640px){
  body.feed .world-wrap{position:fixed;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;cursor:default;scrollbar-width:none;-ms-overflow-style:none;}
  body.feed .world-wrap::-webkit-scrollbar{display:none;width:0;height:0;}
  body.feed .world{position:relative;transform:none !important;}
  body.feed .card .meta{gap:2px;left:7px;bottom:7px;}
  body.feed .card .meta .pc{width:13px;height:13px;border-width:1px;}
  body.feed .center-mark{display:none;}
  body.feed .corner-bl,body.feed .corner-br{display:none;}
}

/* nav dot no longer shifts the links (was pushing the whole centered nav sideways).
   Each link reserves a 12px slot (5px dot + 7px breathing room) so the visual gap
   between labels is identical in every state; .nav flex gap is reduced to match. */
.nav a{position:relative;padding-left:12px;}
body.incase .nav a:first-child::before,
body.inwork .nav a:nth-child(1)::before,
body.inmag .nav a:nth-child(2)::before,
body.inpost .nav a:nth-child(2)::before,
body.inabout .nav a:nth-child(3)::before,
body.incontact .nav a:nth-child(4)::before,
.nav a.on::before{position:absolute;left:0;top:50%;transform:translateY(-50%);margin-right:0;vertical-align:baseline;}
/* touch devices: no sticky hover states */
@media (hover:none){
  .nav a:hover{opacity:1;}
  .otabs a:hover{opacity:1;}
  .otabs a:not(.on):hover{color:var(--grey-4);}
  .cfilter a:not(.on):hover{color:var(--grey-4);}
  .card:hover .ph::after{opacity:0;}
  .magcard:hover .mph::after{opacity:0;}
  .alead a:hover{opacity:1;}
  .vx:hover{opacity:1;}
  .hbadge:hover .bk{background:#fff;}
}
@media (max-width:640px){
  /* headline pinned to the centre of the screen, cards scroll over it */
  
  /* cover the notch / url-bar collapse gap: veils extend past the viewport top */
  .fade.top{top:-160px;height:345px;background:linear-gradient(to bottom,rgba(255,255,255,.97) 0,rgba(255,255,255,.97) 264px,rgba(255,255,255,0) 345px);}
  #caseview .topfade,#caseview2 .topfade,#magview .topfade,#workview .topfade,#contactview .topfade,#postview .topfade,#aboutview .topfade,#caseview3 .topfade{top:-160px;height:345px;background:linear-gradient(to bottom,rgba(255,255,255,.97) 0,rgba(255,255,255,.97) 264px,rgba(255,255,255,0) 345px);}
}

/* iOS: no grey tap-highlight flash on taps */
*{-webkit-tap-highlight-color:transparent;}

/* offerings tab swap: one synchronous animation, immune to fast taps */
.oswap{animation:oswap .35s ease;}
@keyframes oswap{from{opacity:0;}to{opacity:1;}}
.otabs{gap:0;}
.otabs a{margin-right:18px;}
.otabs a,.cfilter a,.nav a{touch-action:manipulation;}

/* headings removed: grids start just under the nav */
#workview .maggrid{padding-top:108px;}
#magview .mgrid{padding-top:108px;}
@media (max-width:640px){
  #workview .maggrid{padding-top:124px;}
  #magview .mgrid{padding-top:124px;}
}

/* compact mobile header + strict grid tags */
@media (max-width:640px){
  .logo svg{width:86px;height:auto;}
  .logo{top:18px;}
  .nav{top:52px;}
}

/* About mobile: Porto Rocha leading - tight lines, compact paragraphs, unified sizes */
@media (max-width:640px){
  .abio{font-size:14px;line-height:1.2;letter-spacing:-.005em;margin-bottom:14px;color:#454545;}
  .abio2{font-size:13px;line-height:1.3;margin-bottom:12px;}
  .odesc{font-size:14px;line-height:1.2;margin-bottom:18px;color:#454545;}
  .osvc{font-size:13px;line-height:1.3;}
  .alead{line-height:1.3;}
  .asec{margin-top:44px;}
  .aboutwrap{margin-top:124px;}
}

/* contact form under the pills */
.cwrap{flex-direction:column;}
.cform{width:min(400px,100%);display:flex;flex-direction:column;}
.cform .bf{display:none;}
.cfield{font-family:inherit;font-size:13px;letter-spacing:.02em;color:var(--ink);background:transparent;border:0;border-bottom:1px solid #eaeaea;border-radius:0;padding:12px 0;outline:none;resize:none;transition:border-color .3s ease;-webkit-appearance:none;appearance:none;}
.cfield::placeholder{color:var(--grey-4);}
.cfield:focus{border-color:var(--grey-5);}
textarea.cfield{margin-top:2px;}
.fsubmit{align-self:flex-start;margin-top:26px;}
.fsubmit[disabled]{opacity:.55;pointer-events:none;}
.fnote{font-size:13px;color:var(--grey-6);line-height:1.5;margin-top:46px;}


/* form selectors */
.fgroup{margin-top:24px;}
.flabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-5);}
.fpills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.fpill{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid #eaeaea;background:#fff;font-size:13px;letter-spacing:.02em;color:var(--grey-6);cursor:pointer;user-select:none;transition:background .25s ease,color .25s ease,border-color .25s ease;}
.fpill.on{background:var(--ink);border-color:var(--ink);color:#fff;}
@media (hover:hover){ .fpill:not(.on):hover{border-color:var(--grey-4);color:var(--ink);} }
textarea.cfield{margin-top:24px;}

/* form action row: ink submit + outline calendly */
.frow{display:flex;align-items:center;gap:8px;margin-top:26px;}
.frow .fsubmit{margin-top:0;}
.cpill.cplain span{filter:none;opacity:1;}

/* mobile: the top veil only appears once the view is scrolled, so it never covers the first content */
@media (max-width:640px){
  #caseview .topfade,#caseview2 .topfade,#magview .topfade,#workview .topfade,#contactview .topfade,#postview .topfade,#aboutview .topfade,#caseview3 .topfade{opacity:0;transition:opacity .3s ease;}
  #caseview.vscr .topfade,#caseview2.vscr .topfade,#magview.vscr .topfade,#workview.vscr .topfade,#contactview.vscr .topfade,#postview.vscr .topfade,#aboutview.vscr .topfade,#caseview3.vscr .topfade{opacity:1;}
}

/* WIP case studies: badged on hover, not clickable */
.workcard.wip{cursor:default;}
.workcard.wip .mph{position:relative;}
.wipbadge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:4px 10px;border-radius:999px;background:#fff;border:1px solid #e2e2e2;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-6);opacity:0;transition:opacity .2s ease;z-index:2;pointer-events:none;}
.workcard.wip:hover .wipbadge{opacity:1;}
@media (hover:none){ .wipbadge{opacity:1;} }

/* Mux lightbox: vertical sources get a portrait box; case media is clickable */
.vbox.vboxv{width:min(420px,86vw);aspect-ratio:9/16;height:auto;}
.vbox mux-player{width:100%;height:100%;display:block;--media-object-fit:cover;}
.mediacol .ph[data-mux]{cursor:pointer;}

/* inline article images */
.pbody .pimg{width:100%;display:block;margin:40px 0;background:#ececec;}

/* Mag category filter (client request, Oct 13) */
#magview .magfilter{display:flex;gap:8px;justify-content:center;padding-top:108px;margin-bottom:-78px;position:relative;z-index:39;}
/* chips match the contact page pills (.cpill): same padding, radius, border, type */
.mf{display:inline-flex;align-items:center;justify-content:center;padding:7px 13px;border-radius:999px;border:1px solid #eaeaea;background:#fff;font-family:inherit;font-size:13px;font-weight:400;letter-spacing:.02em;color:rgba(38,38,38,.5);cursor:pointer;transition:background .2s,border-color .2s,color .45s ease;}
.mf:hover{color:var(--ink);}
.mf.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.mgc.mghide{display:none;}
@media (max-width: 640px){ #magview .magfilter{flex-wrap:wrap;padding-left:12px;padding-right:12px;} }