/* counterplay.studio. Identity A+C "on the board": ink pieces, cream board, one signal yellow for action. Heebo 900 display, IBM Plex Sans Hebrew text, Martian Mono labels. */
@font-face{font-family:"Heebo";src:url(../fonts/heebo-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"PlexHe";src:url(../fonts/plex-hebrew-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PlexHe";src:url(../fonts/plex-hebrew-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"PlexHe";src:url(../fonts/plex-hebrew-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/plex-sans-var.woff2) format("woff2");font-weight:100 700;font-stretch:85% 100%;font-display:swap}
@font-face{font-family:"Martian";src:url(../fonts/martian-var.woff2) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --ink:#0F1012;--smoke:#2A2C31;--sig:#FFC72C;--honey:#D99A0B;--cream:#F6EFE2;--card:#FFFBF3;
  --pine:#1E4A3F;--terra:#C8553D;--mute:#6E6A62;--line:#E3D8C4;
  --display:"Heebo","PlexHe",system-ui,sans-serif;--he:"PlexHe","Plex",system-ui,sans-serif;--mono:"Martian",ui-monospace,monospace;
  --gut:clamp(20px,5.6vw,80px);--max:1440px;--r:22px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;accent-color:var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--he);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--sig);color:var(--ink)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:6px}
ol,ul{list-style:none}
img{display:block;max-width:min(100%,100vw);height:auto}
h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:-.01em;line-height:1.02;text-wrap:balance}
p{text-wrap:pretty}
[dir=ltr]{font-family:"Plex",var(--he)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:8px;z-index:20}
.skip:focus{top:12px}
.label{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* buttons: signal yellow is for action only, with a honey edge like a pressed game key */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:16px;font:800 18px/1 var(--display);transition:transform .24s var(--ease),box-shadow .24s var(--ease),background-color .2s}
.btn .ic{width:16px;height:16px;fill:currentColor;transform:scaleX(-1)}
.btn-sig{background:var(--sig);color:var(--ink);box-shadow:0 4px 0 var(--honey)}
.btn-sig:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--honey)}
.btn-sig:active{transform:translateY(3px);box-shadow:0 1px 0 var(--honey)}
.btn-line{box-shadow:inset 0 0 0 2px var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.btn-sm{min-height:46px;padding:0 20px;font-size:16px;border-radius:14px}

/* header */
.top{position:sticky;top:0;z-index:10;background:rgb(255 251 243 / .92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-row{display:flex;align-items:center;gap:clamp(16px,3vw,48px);min-height:76px}
.brand{display:inline-flex;align-items:center;gap:12px;direction:ltr;color:var(--ink)}
.brand-mk{width:40px;height:auto;filter:drop-shadow(0 3px 3px rgb(15 16 18 / .18))}
.wm{height:22px;width:auto;max-width:100%;display:block}
.nav{display:flex;gap:clamp(18px,2.4vw,36px);margin-inline-start:auto;font:600 16px/1 var(--he)}
.nav a{padding-block:10px;background:linear-gradient(var(--sig),var(--sig)) no-repeat 100% 100%/0 3px;transition:background-size .3s var(--ease)}
.nav a:hover{background-size:100% 3px}

/* hero */
.hero{padding-block:clamp(48px,7vw,104px) clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,72px);align-items:center}
.hero h1{font-size:clamp(3rem,6.6vw,6.4rem);margin-top:22px}
.hero h1 mark{background:linear-gradient(var(--sig),var(--sig)) no-repeat 0 88%/100% .3em;color:inherit;padding-inline:.04em}
.lede{margin-top:28px;font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--smoke);max-width:31em}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-stage{margin:0;min-width:0;max-width:calc(100vw - 2*var(--gut))}
.hero-stage img{max-width:100%;width:100%;animation:land .9s .1s var(--ease) both}
@keyframes land{0%{opacity:0;transform:translateY(-28px)}60%{opacity:1;transform:translateY(4px)}100%{transform:none}}

/* section heads */
.sec-head{max-width:46rem}
.sec-head h2{font-size:clamp(2.4rem,5vw,4.4rem)}
.sec-head > p:last-child{margin-top:20px;font-size:clamp(17px,1.4vw,19px);color:var(--smoke)}

/* services: four board tiles */
.services{padding-block:clamp(72px,9vw,128px);border-top:1px solid var(--line)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(40px,5vw,64px)}
.tile{background:var(--card);border-radius:var(--r);padding:clamp(22px,2vw,30px);box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tile:hover{transform:translateY(-6px);box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line),0 24px 40px -24px rgb(15 16 18 / .35)}
.tile{border-top:6px solid var(--ink)}
.t-sig{border-top-color:var(--sig)}.t-terra{border-top-color:var(--terra)}.t-pine{border-top-color:var(--pine)}
.tile h3{font-size:clamp(1.7rem,2.3vw,2.2rem)}
.tile p:last-child{margin-top:12px;color:var(--smoke);font-size:16px}

/* voice: the one yellow band */
.voice{background:var(--sig);overflow:hidden}
.voice-row{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-block:clamp(56px,7vw,96px)}
.voice h2{font-size:clamp(2.4rem,5.4vw,5rem)}

/* work: Rak Marak case, on its own pine world */
.work{background:var(--pine);color:var(--cream);padding-block:clamp(80px,11vw,148px)}
.work h2{font-size:clamp(2.3rem,5vw,4.4rem);max-width:14em;margin-top:16px}
.work-eyebrow{font:600 15px/1.4 var(--he);color:var(--cream)}
.work-head > p:last-child{margin-top:24px;font-size:clamp(17px,1.4vw,19px);color:rgb(246 239 226 / .8);max-width:36em}
.case-link{display:inline-flex;align-items:center;gap:12px;margin-top:32px;padding:0 24px;min-height:56px;border-radius:16px;background:var(--sig);color:var(--ink);font:800 18px/1 var(--display);box-shadow:0 4px 0 var(--honey);transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.case-link svg{width:20px;height:20px;flex:none}
.case-link:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--honey)}
.work :focus-visible{outline-color:var(--sig)}
.posts-wrap{grid-column:1/-1;margin:0;max-width:820px}
.posts-wrap figcaption{margin-top:16px;font-size:16px;color:rgb(246 239 226 / .72)}
.posts a{display:block;border-radius:14px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.posts img{width:100%;border-radius:14px}

/* how */
.how{padding-block:clamp(80px,10vw,136px)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(40px,5vw,64px);counter-reset:s}
.steps li{border-top:3px solid var(--ink);padding-top:20px}
.steps h3{font-size:clamp(1.4rem,1.9vw,1.8rem);margin-top:14px}
.steps p{margin-top:10px;color:var(--smoke);font-size:16px}

/* contact */
.contact{background:var(--ink);color:var(--cream);padding-block:clamp(80px,10vw,136px);overflow:hidden}
.contact-row{max-width:46rem}
.contact h2{font-size:clamp(2.4rem,4.6vw,4.4rem)}
.contact p{margin-top:22px;font-size:clamp(17px,1.4vw,19px);color:rgb(246 239 226 / .78);max-width:30em}
.mail{display:inline-flex;align-items:center;gap:14px;margin-top:36px;padding:0 26px;min-height:64px;border-radius:18px;background:var(--sig);color:var(--ink);font:700 clamp(17px,1.6vw,22px)/1 "Plex",sans-serif;box-shadow:0 5px 0 var(--honey);transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.mail svg{width:22px;height:22px;flex:none}
.mail:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--honey)}
.contact .ig{margin-top:24px}
.ig a{color:var(--cream);font-weight:700;text-decoration:underline;text-decoration-color:var(--sig);text-decoration-thickness:2px;text-underline-offset:5px;display:inline-block;padding-block:8px}
.contact :focus-visible{outline-color:var(--sig)}

/* footer */
.foot{background:var(--ink);color:var(--cream);border-top:1px solid var(--smoke)}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:32px}
.brand-inv{color:var(--cream)}
.foot-sv{font-weight:500;color:rgb(246 239 226 / .8)}
.foot-c{font-size:14px;color:rgb(246 239 226 / .5)}


@media (max-width:1080px){
  .nav{display:none}
  .btn-sm{margin-inline-start:auto}
  .hero-grid,.contact-row{grid-template-columns:minmax(0,1fr)}
  .tiles,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
@media (max-width:640px){
  .top-row{min-height:64px}
  .brand-mk{width:32px}
  .wm{height:15px}
  .btn-sm{min-height:42px;padding:0 16px;font-size:15px}
  .tiles,.steps{grid-template-columns:minmax(0,1fr)}
  .label{letter-spacing:.08em}
  .actions .btn{flex:1 1 100%}
  .foot-row{flex-direction:column;align-items:flex-start}
}
/* motion: native scroll-driven reveals; browsers without support simply show everything */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec-head,.work-head,.tile,.cs-copy,.steps li,.contact-row,.voice h2{animation:rise both var(--ease);animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.tile:active,.case-link:active,.mail:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* portfolio cases: device frames with the real product scrolling inside */
.cases{display:grid;gap:clamp(72px,9vw,136px);margin-top:clamp(56px,7vw,104px)}
.cs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center;padding-top:clamp(40px,5vw,64px);border-top:1px solid rgb(246 239 226 / .16)}
.cs:nth-child(even) .cs-media{order:2}
.cs-media{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,2vw,28px);min-width:0}
.cs-tag{font:600 15px/1.4 var(--he);color:var(--sig)}
.cs h3{margin-top:10px;font-size:clamp(1.8rem,3.2vw,2.8rem)}
.cs-copy > p{margin-top:18px;font-size:18px;color:rgb(246 239 226 / .82);max-width:30em}
.cs-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cs-links .case-link{margin-top:0}
.cs-links .case-link + .case-link{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px rgb(246 239 226 / .5)}
/* real devices: phone = metal rim, black bezel, dynamic island, side keys, glass glare; desktop = laptop lid with camera + aluminium deck */
.dev-phone{position:relative;width:min(260px,46%);flex:none;padding:7px;border:3px solid transparent;border-radius:17%/8%;background:linear-gradient(#050506,#050506) padding-box,linear-gradient(140deg,#9a9da4,#33353b 24%,#0e0f11 52%,#3b3d43 78%,#a4a7ad) border-box;box-shadow:0 1px 0 1px rgb(0 0 0 / .5),0 46px 60px -28px rgb(0 0 0 / .75),0 18px 26px -14px rgb(0 0 0 / .45)}
.dev-phone::before{content:"";position:absolute;z-index:3;top:2.4%;left:50%;width:31%;aspect-ratio:3.3;translate:-50% 0;border-radius:99px;background:radial-gradient(circle at 78% 50%,#1d2a3a 0 14%,#000 22%) #000;pointer-events:none}
.dev-phone::after{content:"";position:absolute;z-index:-1;inset-inline:-6px;top:21%;height:11%;border-inline:3px solid #45474d;border-radius:3px;pointer-events:none}
.dev-screen{position:relative;aspect-ratio:9/19.5;border-radius:15%/6.9%;overflow:hidden;background:var(--cream);isolation:isolate}
.dev-screen::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgb(255 255 255 / .2),rgb(255 255 255 / .05) 22%,transparent 34%,transparent 66%,rgb(255 255 255 / .07) 80%,transparent 92%) 0 0/100% 300%}
.dev-web{position:relative;width:min(560px,100%);padding:clamp(7px,1.8%,12px) clamp(7px,1.8%,12px) clamp(9px,2.6%,16px);border:2px solid transparent;border-radius:18px 18px 4px 4px;background:radial-gradient(circle at 50% clamp(4px,.9vw,7px),#2c3d52 0 1.5px,#151619 2.5px,transparent 3.5px) padding-box,linear-gradient(#060607,#060607) padding-box,linear-gradient(160deg,#a9acb2,#3a3c42 40%,#6c6f75) border-box;box-shadow:0 60px 70px -40px rgb(0 0 0 / .8)}
.dev-web::before{content:"";display:block;pointer-events:none;height:22px;border-radius:5px 5px 0 0;background:radial-gradient(circle at 14px 11px,#ff5f57 4px,transparent 5px),radial-gradient(circle at 30px 11px,#febc2e 4px,transparent 5px),radial-gradient(circle at 46px 11px,#28c840 4px,transparent 5px) var(--smoke);direction:ltr}
.dev-web::after{content:"";position:absolute;pointer-events:none;left:-8%;right:-8%;top:100%;height:clamp(9px,3.4%,17px);border-radius:2px 2px 40% 40%/2px 2px 100% 100%;background:linear-gradient(#55585e,#55585e) 50% 0/15% 38% no-repeat,linear-gradient(#d9dce1,#a2a5ab 45%,#5b5e64);box-shadow:0 26px 30px -16px rgb(0 0 0 / .7)}
.dev-web .dev-screen{aspect-ratio:16/10;border-radius:0 0 3px 3px}
.dev-web .dev-screen::after{background-size:100% 260%}
.cs-media{padding-bottom:clamp(10px,2vw,20px)}
.cs-media .dev-web{flex:1 1 auto;width:auto;max-width:560px}
.cs-media .dev-web + .dev-phone{width:min(150px,26%);margin-inline-start:-6%;margin-bottom:-7%;position:relative;z-index:1;padding:4px;border-width:2px}
a.dev-screen{display:block}
.dev-screen img{position:absolute;inset-inline:0;top:0;width:100%;max-width:100%;height:auto}
.dev-screen img:not(.scroll){height:100%;object-fit:cover;object-position:top}
/* no scroll timelines (older Safari): the feed loops while its case is on screen (script in index.html) */
.dev-screen .scroll{animation:feed 16s .8s ease-in-out infinite alternate;animation-play-state:paused}
.dev-web .scroll{animation-duration:20s}
.cs-media.on .scroll{animation-play-state:running}
@keyframes feed{0%,8%{top:0;transform:none}92%,100%{top:100%;transform:translateY(-100%)}}
/* scroll-driven: each case's own scroll drives its devices in (laptop lid opens, phones swing up), the screens scroll with the page, the glass glare slides */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cs-media{view-timeline:--cs block;perspective:1600px}
    .dev-web{transform-origin:50% 100%;animation:lid both var(--ease);animation-timeline:--cs;animation-range:entry 5% cover 45%}
    .dev-phone{animation:swing both linear;animation-timeline:--cs;animation-range:cover 0% cover 100%}
    .dev-phone + .dev-phone{animation-name:swing2}
    .dev-web + .dev-phone{animation-name:float}
    .dev-screen .scroll{animation:page both linear;animation-timeline:--cs;animation-range:cover 25% cover 80%;animation-play-state:running}
    .dev-screen::after{animation:glare both linear;animation-timeline:--cs;animation-range:cover 0% cover 100%}
  }
}
@keyframes lid{from{opacity:.2;transform:translateY(60px) rotateX(62deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes swing{0%{opacity:.3;transform:translateY(160px) rotateY(-32deg) rotate(-7deg) scale(.88)}40%{opacity:1;transform:none}100%{transform:translateY(-40px) rotate(2deg)}}
@keyframes swing2{0%{opacity:.3;transform:translateY(240px) rotateY(32deg) rotate(8deg) scale(.88)}48%{opacity:1;transform:none}100%{transform:translateY(-70px) rotate(-2deg)}}
@keyframes float{0%{opacity:0;transform:translateY(220px) rotateY(-24deg) rotate(-10deg)}45%{opacity:1;transform:none}100%{transform:translateY(-90px) rotate(3deg)}}
@keyframes page{from{top:0;transform:none}to{top:100%;transform:translateY(-100%)}}
@keyframes glare{from{background-position:0 0}to{background-position:0 100%}}
@media (max-width:1080px){
  .cs{grid-template-columns:minmax(0,1fr)}
  .cs:nth-child(even) .cs-media{order:0}
}
@media (prefers-reduced-motion:reduce){.dev-screen .scroll{animation:none}}