/* K2 phones, round 2 (19 Oct): options for the mobile board, switched by URL.
   ?mn=b|c menu   ?aw=b|c Milestones   ?svc=b|c What we provide   ?cs=b|c Case studies
   No parameter = option A of each. */
@media (max-width:760px), (max-height:500px) and (orientation:landscape) and (max-width:1000px){

  /* ---------- What we provide, A (default): two rows per category that run off the edge and fade, like desktop ---------- */
  html.k2m:not(.svc-b):not(.svc-c) .k2s .px2{display:grid!important;row-gap:6px!important;overflow:hidden;margin-right:calc(var(--gut) * -1)!important;opacity:.38}
  html.k2m:not(.svc-b):not(.svc-c) .k2s .px{display:flex!important;flex-wrap:nowrap!important;gap:6px!important}
  html.k2m:not(.svc-b):not(.svc-c) .k2s .r.on .px2{opacity:1}
  html.k2m .k2s .kmr{display:none!important}
  html.k2m.svc-b .k2s .px i[data-tail],html.k2m.svc-c .k2s .px i[data-tail]{display:none!important}

  /* ---------- Milestones ---------- */
  /* A (default): swipe through the cards, the next one peeking in */
  html.k2m #awards .aw7g{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px!important;margin-right:calc(var(--gut) * -1);padding-right:var(--gut);scrollbar-width:none}
  html.k2m #awards .aw7g::-webkit-scrollbar{display:none}
  html.k2m #awards .aw7c{flex:none;width:82vw;scroll-snap-align:start;grid-template-columns:1fr!important;aspect-ratio:auto!important}
  html.k2m #awards .aw7c>img{aspect-ratio:4/3;height:auto!important}
  html.k2m #awards .aw7b{min-height:330px}
  html.k2m #awards .aw7n{font-size:18px}
  .aw7count{display:none}
  html.k2m:not(.aw-b):not(.aw-c) .aw7count{display:block;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#9B9B9B}

  /* B: one artist per row: photo and trophy squares side by side, the words underneath */
  html.k2m.aw-b #awards .aw7g{display:grid!important;grid-template-columns:1fr!important;overflow:visible;gap:34px!important;margin-right:0;padding-right:0}
  html.k2m.aw-b #awards .aw7c,html.k2m.aw-c #awards .aw7c{width:auto;display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px 6px!important;aspect-ratio:auto!important}
  html.k2m.aw-b #awards .aw7b,html.k2m.aw-c #awards .aw7b{display:contents}
  html.k2m.aw-b #awards .aw7c>img,html.k2m.aw-c #awards .aw7c>img{aspect-ratio:1;height:auto!important;grid-column:1;grid-row:1}
  html.k2m.aw-b #awards .aw7t,html.k2m.aw-c #awards .aw7t{grid-column:2;grid-row:1;aspect-ratio:1;background:#F3F3F3;border-radius:6px;padding:10px 8px;min-height:0}
  html.k2m.aw-b #awards .aw7h,html.k2m.aw-c #awards .aw7h{grid-column:1 / -1;grid-row:2;margin-top:10px}
  html.k2m.aw-b #awards .aw7b>div:last-child,html.k2m.aw-c #awards .aw7b>div:last-child{grid-column:1 / -1;grid-row:3}
  html.k2m.aw-b #awards .aw7b,html.k2m.aw-c #awards .aw7b{min-height:0}

  /* C: two across, photo on top of the trophy square, the words underneath */
  html.k2m.aw-c #awards .aw7g{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible;gap:28px 10px!important;margin-right:0;padding-right:0}
  html.k2m.aw-c #awards .aw7c{grid-template-columns:1fr!important}
  html.k2m.aw-c #awards .aw7t{grid-column:1;grid-row:2}
  html.k2m.aw-c #awards .aw7h{grid-row:3}
  html.k2m.aw-c #awards .aw7b>div:last-child{grid-row:4}
  html.k2m.aw-c #awards .aw7n{font-size:15px}
  html.k2m.aw-c #awards .aw7j{font-size:10.5px}
  html.k2m.aw-c #awards .aw7d{display:none}

  /* ---------- Case studies ---------- */
  /* B: overlapping faces, no scrolling */
  html.k2m.cs-b .kcs_row .mix7{overflow:visible!important;margin-right:0!important;gap:0!important;flex-wrap:nowrap!important}
  html.k2m.cs-b .kcs_row .mix7 figure{width:36px!important;margin-left:-10px;box-shadow:0 0 0 2px #0F0F0F;border-radius:50%}
  html.k2m.cs-b .kcs_row .mix7 figure:first-child{margin-left:0}
  html.k2m.cs-b .kcs_row .mix7 .mp{margin-left:10px}
  /* C: a four by two grid of faces */
  html.k2m.cs-c .kcs_row .mix7{display:flex!important;flex-wrap:wrap!important;gap:12px!important;overflow:visible!important;margin-right:0!important}
  html.k2m.cs-c .kcs_row .mix7 figure{width:calc((100% - 36px) / 4)!important;aspect-ratio:1;flex:none}
  html.k2m.cs-c .kcs_row .mix7 .mp{flex-basis:auto}

  /* What we provide, C: one swipeable strip per row (portrait and landscape) */
  html.k2m.svc-c .k2s .px2{display:block!important;overflow-x:auto;margin-right:calc(var(--gut) * -1);padding-right:var(--gut);scrollbar-width:none;opacity:1;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  html.k2m.svc-c .k2s .px{display:flex!important;flex-wrap:nowrap!important;width:max-content;gap:6px}
  html.k2m.svc-c .k2s .px+.px{margin-top:6px}

  /* ---------- Menu ---------- */
  /* B: a floating dock at the bottom, the menu rises as a dark sheet */
  .mdock{display:none}
  html.k2m.mn-b .mdock{display:flex;position:fixed;z-index:310;left:50%;bottom:16px;transform:translateX(-50%);gap:4px;padding:4px;border-radius:999px;background:rgba(15,15,15,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  html.k2m.mn-b .mdock>*{height:38px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:#fff;font:inherit;font-size:13.5px;display:inline-flex;align-items:center;cursor:pointer}
  html.k2m.mn-b .mdock>a{background:#fff;color:#0F0F0F}
  html.k2m.mn-b .tb7 .right>*:not(.mbtn_keep),html.k2m.mn-b .mbtn_h,html.k2m.mn-b .lpill{display:none!important}
  html.k2m.mn-b .menu{top:auto;height:auto;max-height:86svh;border-radius:18px 18px 0 0;background:#0F0F0F;color:#fff;grid-template-rows:auto 1fr auto;padding:18px var(--gut) 86px;transform:translateY(30px);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .5s}
  html.k2m.mn-b.menu_open .menu{transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
  html.k2m.mn-b .menu_top .logo,html.k2m.mn-b .menu_top .tb_menu{color:#fff}
  html.k2m.mn-b .menu>nav a{font-size:28px!important;padding:10px 0!important;border-top-color:rgba(255,255,255,.12)}
  html.k2m.mn-b .menu_foot,html.k2m.mn-b .menu_foot nav a{color:#9A9A9A!important}
  /* C: dark full screen menu, compact list with a Let's talk button underneath */
  html.k2m.mn-c .menu{background:#0F0F0F;color:#fff}
  html.k2m.mn-c .menu_top .logo,html.k2m.mn-c .menu_top .tb_menu{color:#fff}
  html.k2m.mn-c .menu>nav{align-self:start;margin-top:22px}
  html.k2m.mn-c .menu>nav a{font-size:22px!important;padding:13px 0!important;border-top:0!important;border-bottom:1px solid rgba(255,255,255,.12);letter-spacing:-.02em!important}
  html.k2m.mn-c .menu>nav a small{color:#6E6E6E}
  html.k2m.mn-c .menu_foot{flex-direction:column;align-items:flex-start;gap:14px;color:#9A9A9A}
  html.k2m.mn-c .menu_foot::before{content:"Let's talk";display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:#fff;color:#0F0F0F;font-size:14px;font-weight:500}
  html.k2m.mn-c .menu_foot nav a{color:#9A9A9A!important}
}

/* Landscape phones */
@media (max-height:500px) and (orientation:landscape) and (max-width:1000px){
  html.k2m #awards .aw7c{width:62vw;grid-template-columns:1fr 1fr!important;aspect-ratio:3/2!important}
  html.k2m #awards .aw7c>img{aspect-ratio:auto;height:100%!important}
  html.k2m #awards .aw7b{min-height:0}
  html.k2m.aw-b #awards .aw7g{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:30px 14px!important}
  html.k2m.aw-b #awards .aw7c,html.k2m.aw-c #awards .aw7c{aspect-ratio:auto!important}
  html.k2m.aw-b #awards .aw7c>img,html.k2m.aw-c #awards .aw7c>img{aspect-ratio:1;height:auto!important}
  html.k2m.aw-c #awards .aw7g{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html.k2m:not(.svc-b):not(.svc-c) .k2s .r{grid-template-columns:200px minmax(0,1fr)!important}
  html.k2m.cs-c .kcs_row .mix7{flex-wrap:nowrap!important}
  html.k2m.cs-c .kcs_row .mix7 figure{width:52px!important}
  html.k2m .menu>nav{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-self:center}
  html.k2m .menu>nav a{font-size:24px!important;padding:9px 0!important}
  html.k2m.mn-c .menu>nav{margin-top:6px}
  html.k2m.mn-c .menu_foot{flex-direction:row;align-items:center}
}

/* ---------- Chosen phone layout (19 Oct): menu C, Milestones A at two across, services B with faded ends, case studies A without swiping ---------- */
@media (max-width:760px), (max-height:500px) and (orientation:landscape) and (max-width:1000px){
  /* Milestones A: small cards, two on screen and a sliver of the third, swipe for the rest */
  html.k2m.aw-a #awards .aw7c{width:calc((100vw - var(--gut) - 20px) / 2.25);display:grid!important;grid-template-columns:1fr!important;gap:6px!important;aspect-ratio:auto!important}
  html.k2m.aw-a #awards .aw7b{display:contents}
  html.k2m.aw-a #awards .aw7c>img{aspect-ratio:1;height:auto!important;grid-row:1}
  html.k2m.aw-a #awards .aw7t{grid-row:2;aspect-ratio:1;background:#F3F3F3;border-radius:6px;padding:10px 8px;min-height:0}
  html.k2m.aw-a #awards .aw7h{grid-row:3;margin-top:8px;gap:6px}
  html.k2m.aw-a #awards .aw7b>div:last-child{grid-row:4}
  html.k2m.aw-a #awards .aw7n{font-size:15px}
  html.k2m.aw-a #awards .aw7j{font-size:10.5px}
  html.k2m.aw-a #awards .aw7a{font-size:11.5px}
  html.k2m.aw-a #awards .aw7d{display:none}
  html.k2m.aw-a #awards .aw7p{font-size:7.5px;padding:2.5px 6px}

  /* Services B, now in landscape too: tap a name to open; the open list shows a few rows, the last ones fading out and the bottom row cut */
  html.k2m.svc-b .k2s .r{cursor:pointer;position:relative}
  html.k2m.svc-b .k2s .r b{display:flex;justify-content:space-between;align-items:center}
  html.k2m.svc-b .k2s .r b::after{content:'+';font-weight:300;font-size:26px;transition:transform .4s}
  html.k2m.svc-b .k2s .r.open b::after{transform:rotate(45deg)}
  html.k2m.svc-b .k2s .r .px2{display:none!important}
  html.k2m.svc-b .k2s .r.open .px2{display:flex!important;flex-wrap:wrap;gap:6px;max-height:190px;overflow:hidden;opacity:1;-webkit-mask-image:linear-gradient(180deg,#000 38%,transparent 96%);mask-image:linear-gradient(180deg,#000 38%,transparent 96%)}
  html.k2m.svc-b .k2s .r.open .px{display:contents!important}
  html.k2m.svc-b .k2s .r.open .px i{opacity:1!important}

  /* Case studies A: faces run off the edge and fade, no swiping; Request access sits above the faces */
  html.k2m.cs-a .kcs_row .mix7{overflow:hidden!important;-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 98%);mask-image:linear-gradient(90deg,#000 62%,transparent 98%);touch-action:pan-y}
  html.k2m .kcs_row{position:relative}
  html.k2m .kcs_row .k2pw{display:contents}
  html.k2m .kcs_row .z7_req{order:-1;align-self:flex-start;margin:0 0 -12px!important;position:static!important;font-size:12px}
  html.k2m .kcs_row .pw{order:2;width:100%!important}
  html.k2m .kcs_row .pf_err{position:static!important;order:3;margin-top:-14px!important}

  /* Expanded client view: no hover on phones, so nothing is faded */
  html.k2m .cp_row{opacity:1!important}

  /* Menu C: a real Let's talk button replaces the drawn one */
  html.k2m.mn-c .menu_foot::before{display:none}
  html.k2m.mn-c .menu_foot .mlt{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;border:0;background:#fff;color:#0F0F0F;font:inherit;font-size:14px;font-weight:500;cursor:pointer}

  /* Footer: tidy two by two, smaller type */
  html.k2m .ft7{grid-template-columns:1fr 1fr!important;gap:32px 18px!important;font-size:13px!important;line-height:1.55}
  html.k2m .ft7 h4{font-size:10px!important;letter-spacing:.08em;margin-bottom:10px!important}
  html.k2m .ft7 a,html.k2m .ft7 span{font-size:13px!important;line-height:1.55!important}
  html.k2m .ft7>div{min-width:0}
}
.mlt{display:none}
@media (max-height:500px) and (orientation:landscape) and (max-width:1000px){
  html.k2m.aw-a #awards .aw7c{width:calc((100vw - var(--gut) - 30px) / 3.3)}
  html.k2m.svc-b .k2s .r.open .px2{max-height:118px}
  html.k2m .ft7{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media (max-height:500px) and (orientation:landscape) and (max-width:1000px){
  html.k2m .kcs_row{flex-direction:column!important;align-items:stretch!important;gap:22px!important}
  html.k2m .kcs_row .pw{width:340px!important}
  html.k2m .kcs_row .z7_req{margin-bottom:-10px!important}
}

/* ---------- Phone fixes, round 3 (19 Oct, from his iPhone screenshots) ---------- */
@media (max-width:760px), (max-height:500px) and (orientation:landscape) and (max-width:1000px){
  /* contact overlay: the corner line sits at the end of the form, never over it */
  html.k2m .ov_ix .ix_hq{position:static!important;margin:36px 0 8px;white-space:normal!important;max-width:none!important}
  html.k2m .ov_ix .ix_hq br{display:inline!important}
  /* landing: the corner line on two lines, smaller; Pause moves above it on the right */
  html.k2m .hA .c3{font-size:min(12px,3.05vw)!important;line-height:1.45!important;white-space:nowrap!important;max-width:none!important;bottom:22px!important}
  html.k2m .hA .c3 br{display:inline!important}
  html.k2m .hA .lv_btn{bottom:64px!important}
  /* Milestones intro: two lines */
  html.k2m #awards .aw7i{font-size:min(13.5px,3.22vw)!important;text-align:left}
  html.k2m #awards .aw7i span{display:block!important;white-space:nowrap!important}
  html.k2m #awards .aw7i span::after{content:none!important}
  /* Milestones cards: every card the same rows, top aligned */
  html.k2m.aw-a #awards .aw7g{align-items:flex-start}
  html.k2m.aw-a #awards .aw7c{align-content:start;align-self:flex-start}
  html.k2m.aw-a #awards .aw7t{padding:0!important;gap:0!important;overflow:hidden}
  html.k2m.aw-a #awards .aw7h{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-end;gap:8px!important;margin-top:10px}
  html.k2m.aw-a #awards .aw7h>div{width:100%}
  html.k2m.aw-a #awards .aw7n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.k2m.aw-a #awards .aw7j{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;line-height:1.3!important;margin-top:2px}
  html.k2m.aw-a #awards .aw7b>div:last-child{margin-top:8px}
  html.k2m.aw-a #awards .aw7a{line-height:1.35;margin-top:0}
  /* Swipe pill above the photos, on the right */
  html.k2m.aw-a #awards .aw7count{display:flex!important;justify-content:flex-end;margin:22px 0 10px!important}
  html.k2m.aw-a #awards .aw7count span{font-family:"DM Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#0F0F0F;border:1px solid #DADADA;border-radius:999px;padding:5px 11px}
  html.k2m.aw-a #awards .aw7count span::after{content:"  \2192"}
  html.k2m.aw-a #awards .aw7g{margin-top:0!important}
  /* Clients: much smaller gap between labels and artists */
  html.k2m #clients .cl7{gap:14px!important}
  html.k2m #clients .cl7>div{padding-bottom:0!important;margin-bottom:0!important}
  /* Services open: three rows, two pills each plus a third fading off the right edge */
  html.k2m.svc-b .k2s .r.open .px2{display:none!important}
  html.k2m.svc-b .k2s .r .p3r{display:none}
  html.k2m.svc-b .k2s .r.open .p3r{display:grid;gap:6px;margin-right:calc(var(--gut) * -1);grid-column:-2 / -1}
  html.k2m.svc-b .k2s .p3r>div{display:flex;flex-wrap:nowrap;gap:6px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 94%);mask-image:linear-gradient(90deg,#000 58%,transparent 94%)}
  html.k2m.svc-b .k2s .p3r i{flex:none;font-style:normal;height:30px;padding:0 12px;font-size:13px;border-radius:999px;display:inline-flex;align-items:center;background:#1E1E1E;color:#E8E8E8;white-space:nowrap}
  /* Footer: no Contact column; Navigation and Studio side by side, legal as one quiet line */
  html.k2m .ft7>div:first-child{display:none!important}
  html.k2m .ft7{grid-template-columns:1fr 1fr!important;gap:30px 18px!important}
  html.k2m .ft7>div:last-child{grid-column:1 / -1;display:flex!important;flex-wrap:wrap;gap:6px 16px;padding-top:18px;border-top:1px solid #D6D6D6}
  html.k2m .ft7>div:last-child h4{display:none}
  html.k2m .ft7>div:last-child>*{font-size:12px!important;color:#6E6E6E}
  html.k2m .ft7>div:last-child span{flex-basis:100%;order:2;margin-top:4px}
}
.aw7count{display:none}
@media (max-height:500px) and (orientation:landscape) and (max-width:1000px){
  html.k2m .ft7{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html.k2m .hA .c3{font-size:12px!important}
  html.k2m .hA .lv_btn{bottom:22px!important}
}
/* phone trophies are looping videos that fill the grey square edge to edge */
.tro.vid video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px), (max-height:500px) and (orientation:landscape) and (max-width:1000px){
  html.k2m #awards .aw7t .tro.vid{flex:1 1 0;max-width:none!important;height:100%;min-width:0}
}
@media (max-width:760px), (max-height:500px) and (orientation:landscape) and (max-width:1000px){
  /* a card without a project line keeps the same rhythm as the rest */
  html.k2m.aw-a #awards .aw7h>div:not(:has(.aw7j))::after{content:"";display:block;height:29px}
}