/* about: statement, how we work, the reel, the sketches, the story */
.statement{padding:clamp(40px,6vw,90px) 0;border-top:1px solid var(--line)}
.statement p{margin:0;max-width:20ch;font:900 clamp(36px,5.6vw,84px)/1.08 var(--ui);letter-spacing:-.01em}
.statement .dot{width:.18em;height:.18em;margin-inline-start:.05em}
.values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.values li{padding:22px 22px 4px;border-inline-start:1px solid var(--line)}
.values li:first-child{border-inline-start:0;padding-inline-start:0}
.values b{display:block;font-size:clamp(24px,2.4vw,34px);font-weight:900;line-height:1.1}
.values p{margin:10px 0 0;color:var(--muted)}
@media (max-width:900px){.values{grid-template-columns:1fr 1fr}.values li:nth-child(3){border-inline-start:0;padding-inline-start:0}}
@media (max-width:560px){.values{grid-template-columns:1fr}.values li,.values li + li{border:0;border-bottom:1px solid var(--line);padding:18px 0}}

.reel{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000;aspect-ratio:1680/720}
.reel video{display:block;width:100%;height:100%;object-fit:cover}
.reel-btn.ibtn{position:absolute;top:14px;inset-inline-end:14px;border-color:rgba(244,241,234,.3);background:rgba(0,0,0,.55);backdrop-filter:blur(10px);color:var(--paper)}
.reel-btn.ibtn[aria-pressed="true"]{background:rgba(0,0,0,.55);color:var(--paper);border-color:rgba(244,241,234,.3)}
.reel-btn.ibtn:hover{border-color:var(--paper)}
.reel-btn.ibtn::after{top:50%;bottom:auto;left:auto;inset-inline-end:calc(100% + 10px);transform:translateY(-50%)}
.reel-btn .ico[data-name=play]{color:var(--red)}
.reel-btn[aria-pressed="false"] .ico[data-name=pause],.reel-btn[aria-pressed="true"] .ico[data-name=play]{display:none}
@media (max-width:640px){.reel{margin-inline:calc(var(--gutter) * -1);border-radius:0;border-inline:0}}

.proc-arrows{display:flex;gap:8px}
.proc-arrows button{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:2px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.proc-arrows button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.proc-track{--pp:max(var(--gutter),calc(50vw - var(--max) / 2 + var(--gutter)));display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(50% - 50vw);padding:6px var(--pp) 18px;scroll-padding-inline:var(--pp);scrollbar-width:none;cursor:grab}
.proc-track::-webkit-scrollbar{display:none}
.proc-track.drag{cursor:grabbing;scroll-snap-type:none}
.proc-item{flex:none;margin:0;scroll-snap-align:start;display:grid;gap:10px;align-content:start}
.proc-item img{display:block;height:clamp(200px,26vw,320px);width:auto;border-radius:var(--radius);background:#f2f0ea;user-select:none;-webkit-user-drag:none}
.proc-item figcaption{font-size:14px;color:var(--muted)}
@media (max-width:640px){.proc-item img{height:220px}}

.story-link{display:grid;gap:8px;padding:clamp(28px,4vw,56px);border:2px solid var(--line-2);border-radius:var(--radius);text-decoration:none;transition:border-color .2s}
.story-link:hover{border-color:var(--red)}
.story-link small{color:var(--muted);font-size:15px}
.story-link b{font-size:clamp(48px,8vw,120px);line-height:1;font-weight:900}
.story-link span{font-size:clamp(18px,1.8vw,22px);color:var(--muted)}
.story-link:hover span{color:var(--ink)}
.story-link span .ico{display:inline-block;vertical-align:-4px;margin-inline-start:4px;transition:transform .25s var(--ease)}
.story-link:hover span .ico{transform:translateX(-5px);color:var(--red)}