/* yannisdoes.dev: colour bars on a 12-column module. Greek glyphs fall back to Commissioner. */
:root{
  --ground:#E4E7E9; --paper:#F3F4F5; --ink:#111316; --mute:#4D545B;
  --yellow:#FFD200; --magenta:#E5007D; --cyan:#00A0DF; --green:#1FA84A;
  --spring:cubic-bezier(.34,1.45,.64,1); --ease-out:cubic-bezier(.23,1,.32,1);
  --gutter:clamp(16px,3.4vw,48px);
  --font:"Schibsted Grotesk","Commissioner",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:clip;background:var(--ground);scroll-padding-top:16px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gutter)}

.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--gutter);max-width:1360px;margin:0 auto;font-size:15px}
.brand{font-weight:900;letter-spacing:-.02em;font-size:20px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.brand i{display:inline-grid;grid-template-columns:1fr 1fr;width:18px;height:18px}
.brand i::before,.brand i::after{content:""}
.brand i{background:linear-gradient(90deg,var(--yellow) 50%,var(--magenta) 0) top/100% 50% no-repeat,linear-gradient(90deg,var(--cyan) 50%,var(--green) 0) bottom/100% 50% no-repeat}
.top nav{display:flex;gap:22px;align-items:center}
.top nav a{text-decoration:none;padding:10px 0}
.top nav a.lang{padding:6px 10px;box-shadow:inset 0 0 0 2px var(--ink)}
@media (max-width:760px){.top nav a:not(.lang):not(:last-child):not(.cn){display:none}}
@media (max-width:460px){.top nav{gap:14px}.top nav a[href$="#mail"]{display:none}}

/* bars: one grammar everywhere */
.bar{display:block;font-weight:900;letter-spacing:-.035em;line-height:.86;padding:.08em .18em .12em;color:var(--ink);width:max-content;max-width:100%}
.y{background:var(--yellow)} .m{background:var(--magenta);color:#fff} .c{background:var(--cyan)} .g{background:var(--green);color:#fff}

/* hero */
.hero{position:relative;max-width:1360px;margin:0 auto;padding:12px var(--gutter) 0;min-height:min(100svh,940px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:16px}
.hero::before{content:"";position:absolute;inset:0 var(--gutter);background-image:linear-gradient(90deg,rgba(17,19,22,.06) 1px,transparent 1px);background-size:calc(100%/12) 100%;pointer-events:none}
.hero .intro{grid-column:1/5;grid-row:1;margin-top:24px;position:relative;z-index:3;max-width:31ch}
.hero h1{display:inline-block;margin:0 0 16px;padding:7px 9px;background:var(--ink);color:#fff;font-size:13px;line-height:1.3;font-weight:700;letter-spacing:.01em}
.hero .intro p{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.45}
.hero .intro p b{font-weight:900}
.hero .photo{grid-column:5/13;grid-row:1/3;position:relative;margin:24px 0 0;transform:rotate(-3deg);box-shadow:0 30px 60px rgba(17,19,22,.22),0 4px 10px rgba(17,19,22,.12);background:#000;aspect-ratio:1600/1000;align-self:start}
.hero .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(6px);transform:scale(1.02);transition:opacity 260ms ease,filter 260ms ease,transform 400ms var(--ease-out)}
.hero .photo img.on{opacity:1;filter:none;transform:none}
.hero .photo .cap{position:absolute;left:0;bottom:-34px;font-size:13px;color:var(--mute);transform:rotate(3deg);transform-origin:left}
.hero .stack{grid-column:1/13;grid-row:2/4;align-self:end;position:relative;z-index:2;padding-bottom:clamp(32px,6vh,72px);font-size:clamp(54px,7.2vw,120px)}
.hero .stack .bar{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative;will-change:transform;transition:box-shadow 200ms ease}
.hero .stack .bar.held{cursor:grabbing;box-shadow:0 24px 40px rgba(17,19,22,.28);z-index:5}
.hero .stack .bar:nth-child(2){margin-left:12%}
.hero .stack .bar:nth-child(3){margin-left:4%}
.hero .stack .bar:nth-child(4){margin-left:18%}
.throw{display:block;font-size:13px;line-height:1;font-weight:500;letter-spacing:0;color:var(--mute);margin-top:14px}
.chips{position:absolute;inset:0;pointer-events:none;z-index:1}
.chips i{position:absolute;display:block}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{display:inline-flex;align-items:center;min-height:50px;padding:0 22px;font:700 16px var(--font);text-decoration:none;background:var(--ink);color:#fff;transition:transform 160ms var(--ease-out)}
.btn.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn:active{transform:scale(.97)}
@media (max-width:860px){
  .chips{display:none}
  .hero{grid-template-rows:auto auto auto;min-height:auto}
  .hero .intro{grid-column:1/-1}
  .hero .photo{grid-column:1/-1;grid-row:2;margin-top:28px;transform:rotate(-2deg)}
  .hero .stack{grid-row:3;margin-top:-18%;font-size:clamp(44px,13.5vw,120px);padding-bottom:40px}
  .hero .stack .bar{width:100%;max-width:none;margin-left:0 !important}
}

/* sections */
.sec{padding-top:clamp(88px,11vw,150px)}
h2{font-weight:900;font-size:clamp(34px,4.4vw,64px);line-height:.95;letter-spacing:-.035em;margin:0 0 14px;max-width:18ch}
.lead{max-width:56ch;color:var(--mute);margin:0;font-size:17px}

/* work, filtered by colour */
.bands{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 28px}
.band{appearance:none;border:0;cursor:pointer;font:900 clamp(18px,1.7vw,24px)/1 var(--font);letter-spacing:-.02em;padding:14px 16px;min-height:48px;background:var(--paper);color:var(--ink);transition:transform 220ms var(--spring),background-color 160ms ease,color 160ms ease}
.band:active{transform:scale(.96)}
.band[aria-pressed="true"]{transform:translateY(-4px)}
.band[data-k="all"][aria-pressed="true"]{background:var(--ink);color:#fff}
.band[data-k="biz"][aria-pressed="true"]{background:var(--yellow)}
.band[data-k="make"][aria-pressed="true"]{background:var(--magenta);color:#fff}
.band[data-k="idea"][aria-pressed="true"]{background:var(--cyan)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.cell{position:relative;text-decoration:none;display:block;transition:opacity 260ms ease,transform 320ms var(--ease-out),filter 260ms ease}
.cell.off{opacity:.18;filter:grayscale(1);transform:scale(.97)}
.cell .ph{aspect-ratio:1600/1000;overflow:hidden;background:#000;box-shadow:0 18px 36px rgba(17,19,22,.16)}
.cell .ph img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 500ms var(--ease-out)}
.cell h3{position:absolute;left:-10px;bottom:22%;margin:0;font-size:clamp(26px,2.6vw,40px);z-index:2;transition:transform 300ms var(--spring)}
.cell p{margin:18px 0 0;font-size:15px;color:var(--mute);max-width:44ch}
.cell p b{color:var(--ink)}
.cell:nth-child(1){grid-column:1/8}
.cell:nth-child(2){grid-column:8/13;margin-top:14%}
.cell:nth-child(3){grid-column:2/7}
.cell:nth-child(4){grid-column:7/13;margin-top:-8%}
.cell:nth-child(5){grid-column:1/7}
.cell:nth-child(6){grid-column:7/13;margin-top:8%}
.cell:nth-child(7){grid-column:2/8}
@media (max-width:860px){.cell{grid-column:1/-1 !important;margin-top:0 !important}.cell h3{left:-6px}}

/* services */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:40px}
.svc{background:var(--paper);padding:22px 22px 26px}
.svc h3{margin:0 0 14px;font-size:clamp(28px,3vw,44px)}
.svc p{margin:0;color:var(--mute);max-width:48ch}
@media (max-width:760px){.services{grid-template-columns:1fr}}

.incl{margin-top:6px;background:var(--ink);color:#fff;padding:clamp(24px,3vw,40px) 22px}
.incl h3{margin:0 0 18px;font-size:clamp(22px,2vw,28px);font-weight:900;letter-spacing:-.02em}
.incl ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 28px}
.incl li{position:relative;padding-left:26px;color:#D5D9DD}
.incl li b{color:#fff}
.incl li::before{content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;background:var(--yellow)}
.incl li:nth-child(4n+2)::before{background:var(--magenta)}
.incl li:nth-child(4n+3)::before{background:var(--cyan)}
.incl li:nth-child(4n+4)::before{background:var(--green)}
@media (max-width:860px){.incl ul{grid-template-columns:1fr}}

/* how it works */
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.steps .bar{font-size:clamp(44px,4.4vw,68px);margin-bottom:16px}
.steps h3{margin:0 0 6px;font-size:21px;font-weight:900;letter-spacing:-.02em}
.steps p{margin:0;color:var(--mute)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
.about .who{grid-column:1/6;font-size:clamp(48px,6vw,96px)}
.about .who .bar:nth-child(2){margin-left:10%}
.about .txt{grid-column:7/13}
.about .txt p{margin:0 0 16px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;max-width:52ch}
.facts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{background:var(--paper);padding:8px 12px;font-weight:700;font-size:14px}
@media (max-width:860px){.about .who,.about .txt{grid-column:1/-1}.about .txt{margin-top:16px}}

/* faq */
.faq{margin-top:36px;max-width:920px}
.faq details{border-top:2px solid var(--ink)}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-weight:900;font-size:clamp(18px,1.6vw,23px);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 18px;height:18px;background:linear-gradient(var(--ink),var(--ink)) center/100% 3px no-repeat,linear-gradient(var(--ink),var(--ink)) center/3px 100% no-repeat;transition:transform 220ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 24px;color:var(--mute);max-width:64ch;font-size:17px}
.faq details[open] p{animation:reveal 260ms var(--ease-out)}
@keyframes reveal{from{opacity:0;transform:translateY(-6px)}}

/* close */
.close{padding:clamp(100px,13vw,180px) var(--gutter) 72px}
.close a.mail{display:block;text-decoration:none;font-size:clamp(44px,10vw,170px)}
.close a.mail .bar{width:100%;transition:transform 300ms var(--spring)}
.close .lead{margin:16px 0 clamp(28px,4vw,52px)}
.close .meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:22px;color:var(--mute)}
.close .meta a{padding:8px 0}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:24px var(--gutter);border-top:2px solid var(--ink);font-size:14px;max-width:1360px;margin:0 auto}
footer nav{display:flex;gap:20px;flex-wrap:wrap}

@media (hover:hover) and (pointer:fine){
  .cell:hover .ph img{transform:scale(1.03)}
  .cell:hover h3{transform:translateX(14px)}
  .close a.mail:hover .bar{transform:translateX(1.5%)}
  .top nav a:not(.lang):hover{text-decoration:underline;text-underline-offset:4px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:0ms !important;animation:none !important}}