/* =====================================================================
   Direction B · Colour field (Work + case pages).
   The case owns its colour: the page moves through İşCep blue, ink and
   cream as you read. One focal thing per screen, blur-to-sharp reveals.
   Transform/opacity (plus a light blur on text) only.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body.b { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; --bg: var(--b-ink); --fg: var(--b-cream); background: var(--bg); color: var(--fg); font: 400 18px/1.6 var(--b-sans); transition: background-color .9s var(--b-io), color .9s var(--b-io); }
body.b[data-tone="blue"] { --bg: var(--b-blue); --fg: #eef1f8; }
body.b[data-tone="cream"] { --bg: var(--b-cream); --fg: var(--b-ink); }
body.b[data-tone="ink"] { --bg: var(--b-ink); --fg: var(--b-cream); }
body.b[data-tone="amber"] { --bg: #c4561d; --fg: #fbf1e4; }
body.b[data-tone="violet"] { --bg: #3a2758; --fg: #f4ecfb; }
.b img, .b svg, .b video { display: block; max-width: 100%; }
.b h1, .b h2, .b h3, .b h4, .b p, .b figure, .b blockquote, .b ol, .b ul { margin: 0; }
.b h1, .b h2, .b h3 { font-weight: 400; text-wrap: balance; }
.b p { text-wrap: pretty; }
.b a { color: inherit; }
.b em { font-style: italic; }
.b :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--b-amber); color: #fff; }
.b { --gut: clamp(16px, 4vw, 56px); --blur: 14px; }
.k { font: 500 12px/1.2 var(--b-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .62; margin-bottom: 26px; }

/* ---------- reveals: blur to sharp, staggered ---------- */
.js [data-rv] { opacity: 0; transform: translateY(18px); filter: blur(var(--blur)); transition: opacity .9s var(--b-out), transform .9s var(--b-out), filter .9s var(--b-out); transition-delay: var(--d, 0s); }
.js [data-rv].in { opacity: 1; transform: none; filter: blur(0); }
.js [data-split] .w { display: inline-block; opacity: 0; transform: translateY(.28em); filter: blur(var(--blur)); transition: opacity .8s var(--b-out), transform .9s var(--b-out), filter .8s var(--b-out); transition-delay: calc(var(--d, 0s) + var(--i) * 55ms); }
.js [data-split].in .w { opacity: 1; transform: none; filter: blur(0); }

/* ---------- key visual: blue field, phone, floating account card, badge ---------- */
.kv { position: relative; overflow: hidden; background: var(--b-blue); container-type: size; isolation: isolate; }
.kv::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 78% 100%, rgba(255,255,255,.14), transparent 60%), radial-gradient(60% 70% at 10% 0%, rgba(0,0,40,.25), transparent 70%); pointer-events: none; }
.kv-rig { position: absolute; left: var(--rx, 55cqw); top: var(--ry, 16cqh); width: var(--rw, 26cqw); aspect-ratio: 749 / 1490; z-index: 1; }
.kv-rig img { position: absolute; display: block; height: auto; max-width: none; }
.kv-phone { left: 0; top: 0; width: 100%; filter: drop-shadow(0 40px 60px rgba(0,10,60,.45)); }
.kv-card { left: -46.3%; top: 26.3%; width: 94.7%; filter: drop-shadow(0 26px 40px rgba(0,8,50,.42)); }
.kv-badge { left: 85.4%; top: 19.5%; width: 23.2%; filter: drop-shadow(0 18px 24px rgba(0,8,50,.4)); }

/* ---------- Work (home) ---------- */
.work { padding: 0 clamp(8px, 1.6vw, 24px) 140px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.6vw, 24px); scroll-margin-top: 16px; max-width: 1600px; margin: 0 auto; }
.poster { position: relative; display: block; color: #f4f1ea; text-decoration: none; }
.poster.lead { grid-column: 1 / -1; }
.poster .p-img { position: relative; height: min(56vw, 640px); min-height: 360px; border-radius: 28px; overflow: hidden; background: var(--tint, #222); transition: transform 1s var(--b-out); }
.poster.lead .p-img { height: min(78vh, 820px); }
.poster .p-img.kv { background: var(--b-blue); --rx: 58cqw; --ry: 17cqh; --rw: 22cqw; }
.poster .p-img > span { position: absolute; right: 26px; top: 22px; font: 500 10px/1 var(--b-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .45; }
.poster .kv-rig { transition: transform 1.2s var(--b-out); }
.poster:hover .kv-rig, .poster:focus-visible .kv-rig { transform: translateY(-3%) rotate(-1.2deg); }
.poster:hover .p-img { transform: scale(.994); }
.poster .p-cap { position: absolute; left: clamp(20px, 3vw, 44px); bottom: clamp(20px, 3vw, 40px); z-index: 2; pointer-events: none; }
.poster h2 { font: 400 clamp(56px, 7vw, 120px)/.85 var(--b-serif); letter-spacing: -.04em; padding-bottom: .17em; width: fit-content; } /* room for the cedilla of ş above the line below */
.poster.lead h2 { font-size: clamp(80px, 11vw, 190px); }
.poster .p-cap p { margin-top: 4px; font-size: 14px; opacity: .85; }
.poster.ph h2, .poster.ph .p-cap p { opacity: .55; }

/* ---------- case hero: the title sits behind the phone ---------- */
.c-hero { --tsz: clamp(150px, 31vw, 520px); --hdr: 0px; /* set per case below so the wordmark's highest point clears the header (about 53px) by 24px */ height: 100vh; height: 100svh; min-height: 600px; color: #f4f1ea; --rx: 39cqw; --ry: 44cqh; --rw: 22cqw; }
.c-hero .kv-rig { transform: translateY(calc(var(--s, 0) * -30%)); }
.c-hero-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 0; transform: translateY(calc(-20vh + var(--hdr) + var(--s, 0) * 10vh)); }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.14); font: 500 13px/1 var(--b-sans); margin-bottom: 2vh; }
.chip i { width: 18px; height: 18px; border-radius: 50%; background: #f4f1ea; }
.c-title { font: 400 clamp(150px, 31vw, 520px)/.78 var(--b-serif); letter-spacing: -.05em; padding-bottom: .06em; width: fit-content; }

/* ---------- scenes: one focal point per screen ---------- */
.scene { min-height: 86vh; display: flex; align-items: center; justify-content: center; padding: 12vh var(--gut); }
.scene.tall { min-height: 100vh; min-height: 100svh; }
.scene.auto { min-height: 0; }
.sc-in { width: 100%; max-width: 1100px; }
.sc-in.wide { max-width: 1320px; }
.scene h2 { font: 400 clamp(54px, 8vw, 130px)/.92 var(--b-serif); letter-spacing: -.03em; max-width: 14ch; }
.scene h3 { font: 400 clamp(46px, 6.4vw, 104px)/.94 var(--b-serif); letter-spacing: -.028em; max-width: 15ch; }
.lede { font: 400 clamp(44px, 6vw, 96px)/1 var(--b-serif); letter-spacing: -.02em; max-width: 16ch; }
.read { font-size: clamp(21px, 1.85vw, 27px); line-height: 1.5; max-width: 30em; }
.read.serif { font: 400 clamp(36px, 4vw, 64px)/1.08 var(--b-serif); letter-spacing: -.015em; max-width: 18ch; }
.scene h2 + .read, .scene h3 + .read { margin-top: 6vh; }
.center { text-align: center; } .center .read, .center h2 { margin-left: auto; margin-right: auto; }

.ov { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 50px 90px; align-items: start; }
.ov1 { grid-column: 1 / -1; font: 400 clamp(30px, 3vw, 46px)/1.15 var(--b-serif); max-width: 24ch; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 12px 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 15px; }
.facts .k { display: block; margin-bottom: 6px; font-size: 11px; }
.facts .fact-num { padding-top: 0; border-top: 0; }
.facts .fact-num b { display: block; font: 400 clamp(80px, 8vw, 128px)/.85 var(--b-serif); letter-spacing: -.04em; margin-bottom: 6px; }

.stat b { display: block; font: 400 clamp(150px, 20vw, 320px)/.8 var(--b-serif); letter-spacing: -.05em; }
.stat span { display: block; margin-top: 24px; font-size: 20px; opacity: .72; max-width: 16em; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(40px, 8vw, 140px); align-items: center; }
.shot { margin: 0; }
/* phone screens carry their own rounded corners (alpha, 9.4% of width); shadows follow the shape */
.shot img { width: 100%; height: auto; filter: drop-shadow(0 30px 34px rgba(0,0,0,.42)); }
.shot.old img { filter: grayscale(.8) contrast(.95) brightness(.96) drop-shadow(0 30px 34px rgba(0,0,0,.42)); }
.cap, .shot figcaption, .photo figcaption, .wide figcaption { margin-top: 14px; font: 500 12px/1.3 var(--b-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 36px); max-width: 1000px; margin: 0 auto; align-items: start; }
.trio .shot:nth-child(2) { margin-top: 8%; } .trio .shot:nth-child(3) { margin-top: 16%; }
.quote { text-align: center; }
.quote p { font: italic 400 clamp(40px, 4.8vw, 78px)/1.04 var(--b-serif); letter-spacing: -.015em; max-width: 20ch; margin: 0 auto 26px; }
.quote footer { font: 500 12px/1.2 var(--b-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

/* principles as type */
.principles { list-style: none; padding: 0; counter-reset: pr; max-width: 980px; }
.principles li { counter-increment: pr; display: grid; grid-template-columns: 80px 1fr; align-items: baseline; padding: 2.2vh 0; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); font: 400 clamp(34px, 4.2vw, 66px)/1 var(--b-serif); letter-spacing: -.02em; }
.principles li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.principles li::before { content: counter(pr, decimal-leading-zero); font: 500 13px/1 var(--b-sans); letter-spacing: .1em; opacity: .55; }

/* workshop photos */
.photo { margin: 0; }
.photo img { width: 100%; height: auto; border-radius: 22px; }
.bleed-photo { padding: 0 clamp(8px, 1.6vw, 24px); }
.bleed-photo img { width: 100%; max-height: 92vh; object-fit: cover; border-radius: 22px; }
.bleed-photo figcaption { padding: 0 var(--gut); }
.photo-pair { display: grid; grid-template-columns: 1.33fr 1.07fr; gap: clamp(12px, 2vw, 28px); align-items: end; }
.more a { display: inline-flex; align-items: baseline; gap: 12px; font: italic 400 clamp(34px, 3.6vw, 58px)/1 var(--b-serif); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 8px; }
.more a span { transition: transform .45s var(--b-out); } .more a:hover span { transform: translateX(8px); }

/* design process */
.ia-zoom { width: min(1100px, 100%); margin: 0 auto; transform: scale(calc(.84 + var(--s, 0) * .26)); transform-origin: 50% 40%; }
.wide { margin: 0; } .wide img { width: 100%; height: auto; border-radius: 22px; }
.wf-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2.4vw, 40px); width: min(1180px, 100%); margin: 0 auto; align-items: start; }
.wf-row .shot:nth-child(even) { margin-top: 10%; }


/* decision 01: drawn phone, pinned */
.tabs { position: relative; height: 420vh; }
.tabs .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.tp-wrap { position: absolute; left: 0; top: 0; width: 324px; height: 644px; transform-origin: 0 0; --tp-ink: #1c1612; --tp-paper: #fffdf9; --tp-accent: var(--b-amber); color: var(--tp-ink); }
.tp-state { position: absolute; left: 0; right: 0; top: -40px; display: flex; justify-content: center; gap: 16px; font: italic 400 20px/1 var(--b-serif); color: var(--b-cream); }
.tp-state span { position: relative; opacity: .38; transition: opacity .45s var(--b-out); }
.tp-state span::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -3px; height: 1.5px; background: var(--tp-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--b-out); }
.tp-wrap[data-state="0"] [data-s="0"], .tp-wrap[data-state="1"] [data-s="1"] { opacity: 1; }
.tp-wrap[data-state="0"] [data-s="0"]::after, .tp-wrap[data-state="1"] [data-s="1"]::after { transform: none; }
.tp-phone { position: absolute; inset: 0; border-radius: 46px; background: #fbf8f1; box-shadow: inset 0 0 0 1.5px var(--tp-ink), 0 38px 60px -24px rgba(0,0,0,.6); }
.tp-scr { position: absolute; inset: 12px; border-radius: 35px; overflow: hidden; background: var(--tp-paper); box-shadow: inset 0 0 0 1px rgba(28,22,18,.14); color: var(--tp-ink); font-family: var(--b-sans); }
.tp-scr i { position: absolute; display: block; }
.tp-top { position: absolute; inset: 0 0 auto 0; height: 66px; z-index: 1; }
.tp-burger { left: 20px; top: 30px; width: 18px; height: 12px; border-block: 2px solid var(--tp-ink); }
.tp-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: var(--tp-ink); }
.tp-title { left: 50%; top: 33px; width: 64px; height: 6px; margin-left: -32px; border-radius: 3px; background: var(--tp-ink); opacity: .8; }
.tp-ic { top: 29px; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--tp-ink); right: 20px; }
.tp-ic + .tp-ic { right: 44px; border-radius: 50%; }
.tp-body { position: absolute; inset: 0; }
.tp-arc { position: absolute; left: 50px; top: 84px; width: 200px; height: 104px; }
.tp-arc path { fill: none; stroke: var(--tp-ink); stroke-width: 14; opacity: .22; }
.tp-arc path.lo { opacity: .55; } .tp-arc path.thin { stroke-width: 1.5; opacity: .5; }
.tp-num { left: 50%; top: 204px; width: 96px; height: 10px; margin-left: -48px; border-radius: 5px; background: var(--tp-ink); opacity: .7; }
.tp-li { left: 20px; top: var(--y); width: var(--w); height: 2px; border-radius: 1px; background: var(--tp-ink); opacity: .45; }
.tp-card { left: 18px; right: 18px; top: 82px; height: 128px; border-radius: 14px; border: 1.5px solid var(--tp-ink); background: rgba(28,22,18,.03); }
.tp-card::before { content: ""; position: absolute; left: 16px; top: 20px; width: 80px; height: 6px; border-radius: 3px; background: var(--tp-ink); opacity: .75; }
.tp-card::after { content: ""; position: absolute; left: 16px; bottom: 22px; width: 120px; height: 10px; border-radius: 5px; background: var(--tp-ink); opacity: .7; }
.tp-lbl { left: 18px; top: var(--y); width: 74px; height: 5px; border-radius: 3px; background: var(--tp-ink); opacity: .5; }
.tp-sq { left: var(--x); top: 256px; width: 82px; height: 62px; border-radius: 10px; border: 1.5px solid rgba(28,22,18,.55); }
.tp-scrim { position: absolute; z-index: 2; inset: 0 0 54px 0; background: var(--tp-ink); opacity: 0; }
.tp-drawer { position: absolute; z-index: 3; left: 0; top: 0; bottom: 54px; width: 222px; background: #f4ede0; box-shadow: 1px 0 0 rgba(28,22,18,.14), 12px 0 30px -14px rgba(28,22,18,.4); transform: translateX(-104%); }
.tp-av { left: 18px; top: 28px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--tp-ink); }
.tp-nm { left: 58px; top: 40px; width: 90px; height: 6px; border-radius: 3px; background: var(--tp-ink); opacity: .7; }
.tp-sheet { position: absolute; z-index: 3; inset: 0 0 54px 0; background: var(--tp-paper); transform: translateY(105%); box-shadow: 0 -1px 0 rgba(28,22,18,.12); }
.tp-search { left: 18px; right: 18px; top: 28px; height: 30px; border-radius: 15px; border: 1.5px solid rgba(28,22,18,.6); }
.tp-rows { position: absolute; z-index: 4; inset: 0 0 54px 0; pointer-events: none; }
.tp-row { position: absolute; left: 0; top: 0; width: 230px; height: 26px; transform-origin: 0 50%; opacity: 0; }
.tp-row::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--tp-ink); }
.tp-row::after { content: ""; position: absolute; left: 26px; top: 12px; width: var(--w); height: 2.5px; border-radius: 2px; background: var(--tp-ink); opacity: .75; }
.tp-bar { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 54px; background: var(--tp-paper); box-shadow: 0 -1px 0 rgba(28,22,18,.14); }
.tp-tabs-old, .tp-tabs-new { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 4px 6px; }
.tp-tabs-old span, .tp-tabs-new span { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 500 9px/1 var(--b-sans); white-space: nowrap; }
.tp-tabs-old span { text-transform: uppercase; font-size: 7.6px; letter-spacing: .02em; color: rgba(28,22,18,.7); }
.tp-tabs-old i, .tp-tabs-new i { position: relative; display: block; width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid currentColor; }
.tp-tabs-new i { border-radius: 50%; }
.tp-tabs-new span { opacity: 0; }
.tp-fab { position: absolute; z-index: 6; left: 50%; bottom: 20px; width: 50px; height: 50px; margin-left: -25px; border-radius: 50%; background: var(--tp-ink); box-shadow: 0 6px 16px -6px rgba(28,22,18,.6); transform: scale(0); }
.tp-fab svg { position: absolute; left: 15px; top: 15px; width: 20px; height: 20px; fill: none; stroke: var(--tp-paper); stroke-width: 2; stroke-linecap: round; }
.tp-fab .x { opacity: 0; }
.tp-ring { inset: 0; border-radius: 50%; border: 2px solid var(--tp-accent); opacity: 0; }
.tp-notes { position: absolute; left: var(--gut); top: 50%; width: min(36vw, 520px); transform: translateY(-50%); height: 3.3em; font: italic 400 clamp(32px, 3.4vw, 56px)/1.05 var(--b-serif); pointer-events: none; color: var(--b-cream); }
.tp-head { position: absolute; left: var(--gut); top: 9vh; font: 500 12px/1.2 var(--b-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .6; color: var(--b-cream); }
.tp-note { position: absolute; left: 0; top: 0; }
.tp-note span { display: inline-block; opacity: 0; transform: translateY(6px); filter: blur(6px); transition: opacity .45s var(--b-out), transform .45s var(--b-out), filter .45s var(--b-out); }
.tp-note.on span { opacity: 1; transform: none; filter: blur(0); transition-delay: .2s; }

/* decision 02: shortcuts row with pencil circle on Düzenle */
.strip { position: relative; width: min(640px, 100%); margin: 8vh auto 0; }
.strip img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.55); }
.strip .ring { position: absolute; left: 71%; top: -3%; width: 32%; height: 34%; color: var(--b-amber); overflow: visible; }
.strip .ring path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.6s cubic-bezier(.6,.1,.2,1) .7s; }
.strip.in .ring path { stroke-dashoffset: 0; }
.strip .note-cap { position: absolute; left: calc(100% + 16px); top: 2%; font: italic 400 26px/1 var(--b-serif); color: var(--b-amber); opacity: 0; transition: opacity .5s var(--b-out) 2s; margin: 0; letter-spacing: 0; text-transform: none; }
.strip.in .note-cap { opacity: 1; }

/* decision 03: before/after wipe */
.wipe { --v: .5; position: relative; width: min(380px, 80vw); margin: 0 auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.wipe .ph { position: relative; aspect-ratio: 515 / 884; border-radius: 9.8% / 5.71%; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(0,0,0,.6); background: #fff; isolation: isolate; }
.wipe .w-new { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wipe .w-old, .wipe .w-in { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.wipe .w-old { transform: translateX(calc((var(--v) - 1) * 100%)); }
.wipe .w-in { transform: translateX(calc((1 - var(--v)) * 100%)); }
.wipe .w-in img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.75) contrast(.96); }
.wipe .w-seam { position: absolute; inset: 0; transform: translateX(calc(var(--v) * 100%)); pointer-events: none; will-change: transform; }
.wipe .w-seam::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #fff; }
.wipe .w-seam b { position: absolute; left: -20px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.wipe .w-seam b::before, .wipe .w-seam b::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid var(--b-ink); border-width: 0 0 1.5px 1.5px; }
.wipe .w-seam b::before { left: 10px; transform: rotate(45deg); } .wipe .w-seam b::after { right: 10px; transform: rotate(-135deg); }
.wipe .chip2 { position: absolute; top: 12px; font: 500 11px/1 var(--b-sans); letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.92); color: var(--b-ink); padding: 7px 10px; border-radius: 999px; }
/* Decision 03: the text and the wipe share one screen */
.dec-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.dec-grid .wipe { justify-self: center; }
@media (max-width: 860px) { .dec-grid { grid-template-columns: minmax(0, 1fr); gap: 8vh; } }
/* the labels sit above the device, clear of the screen and its icons */
.wipe .chip2 { top: -34px; }
.wipe .chip2.b { left: 4%; } .wipe .chip2.a { right: 4%; }
.wipe { margin-top: 34px; }
.wipe .w-range { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.wipe:has(.w-range:focus-visible) .w-seam b { outline: 2px solid var(--b-amber); outline-offset: 3px; }
.ends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 36px); max-width: 1040px; margin: 0 auto; align-items: start; }
.ends .shot:nth-child(2) { margin-top: 6%; } .ends .shot:nth-child(3) { margin-top: 12%; }

/* testing */
.giant { display: flex; align-items: baseline; justify-content: center; gap: .1em; font: 400 clamp(180px, 30vw, 480px)/.8 var(--b-serif); letter-spacing: -.055em; }
.giant .from { font-size: .26em; opacity: .4; letter-spacing: -.03em; }
.g-cap { text-align: center; font-size: 18px; opacity: .7; margin-top: 24px; }
.sus { display: flex; align-items: baseline; justify-content: center; gap: 22px; font: 400 clamp(90px, 11vw, 180px)/.85 var(--b-serif); letter-spacing: -.04em; }
.sus .from { opacity: .35; } .sus .ar { font-size: .4em; color: var(--b-amber); }
.bars { max-width: 860px; margin: 0 auto; width: 100%; }
.bars .legend { display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--b-sans); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 20px; }
.bars .key { display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-left: 12px; } .bars .key:first-child { margin-left: 0; }
.bars ul { list-style: none; padding: 0; }
.bars li { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24px; row-gap: 6px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(18,16,16,.14); }
.bars li:last-child { border-bottom: 1px solid rgba(18,16,16,.14); }
.bars .t { grid-row: 1 / 3; font-size: 16px; }
.bars .b { display: flex; align-items: center; gap: 10px; height: 10px; }
.bars .b i { display: block; height: 6px; width: calc(var(--v) * (100% - 44px)); border-radius: 3px; transform-origin: 0 50%; }
.bars .b em { font: 500 12px/1 var(--b-sans); font-style: normal; font-variant-numeric: tabular-nums; opacity: .65; }
.bars .o, .bars .k-old { background: rgba(18,16,16,.2); } .bars .n, .bars .k-new { background: var(--b-blue); }
.bars figcaption { margin-top: 18px; font-size: 14px; opacity: .7; }
.js .bars .b i { transform: scaleX(0); transition: transform 1.1s var(--b-out); transition-delay: calc(.15s + var(--r, 0) * 70ms); }
.js .bars .b + .b i { transition-delay: calc(.55s + var(--r, 0) * 70ms); transition-duration: 1.3s; }
.js .bars.in .b i { transform: none; }
.num-s { font: 400 clamp(80px, 10vw, 160px)/.85 var(--b-serif); letter-spacing: -.04em; opacity: .55; margin-bottom: 4vh; }
.num-s span { font-size: .4em; vertical-align: .4em; }
.num-cap { font-size: 16px; opacity: .6; margin: -2vh 0 5vh; }
.lesson { font: 400 clamp(46px, 6.2vw, 104px)/1 var(--b-serif); letter-spacing: -.025em; max-width: 18ch; }

/* final screens */
.fin-lead { width: min(1200px, 100%); margin: 0 auto; }
.fin-lead img { width: 100%; height: auto; border-radius: 22px; background: #fff; }
.fin-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.8vw, 26px); width: min(1400px, 100%); margin: 0 auto; align-items: start; }
.fin-row .shot:nth-child(odd) { margin-top: 70px; }
.fin-row .shot img { filter: drop-shadow(0 34px 40px rgba(0,0,0,.6)); }
.aw { font: 400 clamp(32px, 3.4vw, 54px)/1.12 var(--b-serif); max-width: 24ch; }

/* ---------- reduced motion + touch ---------- */
@media (prefers-reduced-motion: reduce) {
  body.b, .b *, .b *::before, .b *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-rv], .js [data-split] .w { opacity: 1 !important; transform: none !important; filter: none !important; }
}
.rm .tabs { height: auto; }
.rm .tabs .stage { position: relative; height: auto; overflow: visible; display: flex; flex-wrap: wrap; justify-content: center; gap: 72px 56px; padding: 18vh var(--gut) 12vh; }
.rm .tp-wrap { position: relative; transform: none !important; flex: none; }
.rm .tp-notes { position: static; transform: none; flex: 0 0 100%; order: 3; width: auto; max-width: 760px; height: auto; margin: 0 auto; text-align: center; }
.rm .tp-note { position: static; display: inline; }
.rm .tp-note span { opacity: 1; filter: none; transform: none; }
.rm .tp-note + .tp-note::before { content: " "; }
.rm .c-hero .kv-rig, .rm .c-hero-txt, .rm .ia-zoom { transform: none; }
.rm .c-hero-txt { transform: translateY(calc(-20vh + var(--hdr))); }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  body.b .scene { padding-bottom: calc(12vh + 64px); } /* the tracker pill (40px) plus 24px never sits on text */
  .work { grid-template-columns: minmax(0, 1fr); }
  .poster .p-img, .poster.lead .p-img { height: 70vh; min-height: 420px; border-radius: 22px; }
  .poster .p-img.kv { --rx: 40cqw; --ry: 37cqh; --rw: 52cqw; }
  .poster .p-cap { top: 22px; bottom: auto; }
  .poster h2, .poster.lead h2 { font-size: 20vw; }
  .ph-sm .p-img { height: 54vh; min-height: 300px; }
  .c-hero { --rx: 34cqw; --ry: 46cqh; --rw: 58cqw; }
  .c-hero-txt { transform: translateY(calc(-22vh + var(--hdr) + var(--s, 0) * 10vh)); }
  .rm .c-hero-txt { transform: translateY(calc(-22vh + var(--hdr))); }
  .c-hero { --tsz: 40vw; }
  .ov, .duo { grid-template-columns: minmax(0, 1fr); }
  .duo .shot { width: min(62vw, 260px); margin: 0 auto; }
  .stat b { font-size: 46vw; }
  .principles li { grid-template-columns: 44px 1fr; font-size: 30px; padding: 16px 0; }
  .photo-pair { grid-template-columns: minmax(0, 1fr); }
  .bleed-photo img { max-height: 70vh; border-radius: 22px; }
  .wf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio, .ends { gap: 8px; }
  .strip { margin-right: 56px; width: auto; }
  .strip .note-cap { font-size: 20px; left: calc(100% + 8px); }
  .giant { flex-direction: column; align-items: center; font-size: 48vw; }
  .giant .from { font-size: .3em; }
  .sus { font-size: 21vw; gap: 12px; }
  .bars li { grid-template-columns: minmax(0, 1fr); } .bars .t { grid-row: auto; }
  .fin-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-row .shot:nth-child(odd) { margin-top: 0; } .fin-row .shot:nth-child(even) { margin-top: 40px; }
  .tp-notes { left: 16px; right: 16px; width: auto; top: auto; bottom: 84px; transform: none; text-align: center; font-size: 24px; height: 2.2em; }
  .tp-note { left: 0; right: 0; }
  .tp-head { top: 7vh; }
  .rm .tp-notes { font-size: 22px; }
}

/* =====================================================================
   About in the case's language: colour field scenes, blur reveals,
   one focal thing per screen. Content and the arched portrait unchanged.
   ===================================================================== */
.ab-hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(30px, 5vw, 90px); align-items: center; padding: 14vh var(--gut) 10vh; max-width: 1500px; margin: 0 auto; }
.ab-hero h1 { font: 400 clamp(64px, 9.6vw, 172px)/.88 var(--b-serif); letter-spacing: -.03em; }
.arch { position: relative; width: min(380px, 100%); justify-self: center; margin: 0; }
.arch .ph { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 200px 200px 6px 6px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 12%; transition: transform 1.2s var(--b-out); }
.arch:hover img { transform: scale(1.04); }
.arch .doodle { position: absolute; inset: -80px -110px; width: calc(100% + 220px); height: calc(100% + 160px); max-width: none; color: currentColor; }
.doodle { overflow: visible; pointer-events: none; }
.doodle path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.6s cubic-bezier(.6,.1,.2,1); transition-delay: var(--d, 0s); }
.drawn .doodle path, .doodle.drawn path { stroke-dashoffset: 0; }
.ab-read { font: 400 clamp(32px, 3.6vw, 58px)/1.1 var(--b-serif); letter-spacing: -.015em; max-width: 21ch; }
.ab-read.small { font: 400 clamp(22px, 2vw, 30px)/1.45 var(--b-sans); max-width: 30em; }

/* Other stuff I do: two acts, wood then paper, each led by one hero image */
.os-head h2 { font: 400 clamp(64px, 10vw, 170px)/.9 var(--b-serif); letter-spacing: -.035em; }
.os-head p { margin-top: 7vh; }
.act { position: relative; padding: 10vh var(--gut); }
.act-row { display: grid; grid-template-columns: 4fr 5fr 6fr; gap: clamp(14px, 3vw, 48px); align-items: end; max-width: 1400px; margin: 0 auto; }
.act-row figure:nth-child(1) { transform: translateY(calc(max(0, 1 - var(--s, 1) * 1.8) * 160px)); }
.act-row figure:nth-child(2) { transform: translateY(calc(max(0, 1 - var(--s, 1) * 1.8) * 80px)); }
.ph-img { margin: 0; }
.ph-img img, .ph-img video { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.fit { position: relative; height: 230vh; }
.fit .fit-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.fit .fit-frame { height: 88vh; aspect-ratio: 406 / 720; transform: scale(calc(.5 + min(var(--s, 1) * 1.6, 1) * .5)) rotate(calc((1 - min(var(--s, 1) * 1.6, 1)) * -4deg)); border-radius: 26px; overflow: hidden; box-shadow: 0 60px 120px -40px rgba(0,0,0,.8); }
.fit .fit-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.paper { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(16px, 3vw, 48px); align-items: end; max-width: 1400px; margin: 0 auto; }
.paper .ph-img:nth-child(2) { transform: translateY(calc(max(0, 1 - var(--s, 1) * 1.8) * 180px - 12%)) rotate(2deg); }
.day-b h2 { font: 400 clamp(56px, 8vw, 128px)/.92 var(--b-serif); letter-spacing: -.03em; margin-bottom: 6vh; }
.day-b p { max-width: 30em; }
.day-b .read + .read { margin-top: 1.2em; }
.contact { margin-top: 8vh; font: 400 clamp(30px, 4vw, 58px)/1.1 var(--b-serif); }
.contact a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--b-out); }
.contact a:hover { background-size: 100% 1px; }
.contact .dot { opacity: .45; }
.contact .nw { white-space: nowrap; }
@media (max-width: 860px) {
  .ab-hero { grid-template-columns: minmax(0, 1fr); padding-top: 16vh; gap: 60px; }
  .ab-hero h1 { font-size: 15.5vw; }
  .arch { width: min(270px, 70vw); }
  .arch .doodle { inset: -56px -48px; width: calc(100% + 96px); height: calc(100% + 112px); }
  .act-row { grid-template-columns: 1fr 1fr; }
  .act-row figure:nth-child(3) { grid-column: 1 / -1; }
  .fit { height: 200vh; }
  .fit .fit-frame { height: auto; width: 78vw; }
  .paper { grid-template-columns: minmax(0, 1fr); }
  .paper .ph-img:nth-child(2) { width: 70%; justify-self: end; transform: translateY(-18%) rotate(2deg); }
  .contact { overflow-wrap: anywhere; }
}
.rm .fit { height: auto; } .rm .fit .fit-stage { position: relative; height: auto; padding: 8vh 0; }

/* =====================================================================
   The device: Koray's own white phone (media/saudia/dev/iphone-frame.webp,
   from his vector), the screen area cut out to the measured rect and
   corner radius. Used only in Saudia's key visuals and Two directions.
   ===================================================================== */
.sdev { position: relative; aspect-ratio: 1000 / 1989; }
.sdev .scr { position: absolute; left: 7.005%; top: 2.65%; width: 86.19%; height: 94.3%; border-radius: 9.91% / 4.55%; object-fit: cover; object-position: top; display: block; background: #fff; }
.sdev .frm { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.kv-rig .sdev { position: absolute; }
.d-face .sdev, .alf-kv .sdev { filter: drop-shadow(0 30px 40px rgba(40,26,0,.38)); }
/* Saudia's field: the sand-gold of its own app, with a soft light behind the phone, as İşCep's field has */
.kv.sa-field, .poster .p-img.kv.sa-field { background: #a3874f; }
.sa-field::before { background: radial-gradient(30% 44% at var(--bx, 50%) var(--by, 50%), rgba(255,243,216,.36), rgba(255,243,216,.12) 55%, transparent 80%), radial-gradient(60% 70% at 8% 0%, rgba(58,36,0,.22), transparent 70%), radial-gradient(55% 60% at 0% 100%, rgba(52,32,0,.24), transparent 72%); }
.poster .p-img.kv.sa-field { --bx: 67%; --by: 56%; }
.c-hero.sa-field { --bx: 50%; --by: 82%; }
@media (max-width: 860px) { .poster .p-img.kv.sa-field { --bx: 60%; --by: 66%; } .c-hero.sa-field { --bx: 50%; --by: 84%; } }
.sa-field .kv-badge.sa-badge { left: 79%; top: 5.2%; width: 21%; filter: drop-shadow(0 16px 22px rgba(52,32,0,.38)); }
.sa-field .kv-phone { filter: drop-shadow(0 40px 60px rgba(40,24,0,.45)); }
/* the route card lifts out of the screen, as İşCep's account card does */
.c-hero.sa-field { --tsz: clamp(140px, 27vw, 470px); }
@media (max-width: 860px) { .c-hero.sa-field { --tsz: 30vw; } }
/* lifted straight up off its own place on the screen, so it reads as the same card coming forward */
.sa-field .kv-card.sa-pop { left: -2%; top: 16.4%; width: 104%; transform: rotate(-3deg); filter: drop-shadow(0 30px 44px rgba(40,24,0,.5)); }

/* ---------- end of a case: all projects on the left, next project on the right, read again ---------- */
.end { padding: 16vh clamp(8px, 1.6vw, 24px) 0; max-width: 1600px; margin: 0 auto; }
.end-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); grid-template-areas: ". k" "all next"; gap: clamp(8px, 1.6vw, 24px); }
.end-k { grid-area: k; padding: 0 0 4vh clamp(4px, 1vw, 16px); font: 400 clamp(56px, 6.4vw, 112px)/.9 var(--b-serif); letter-spacing: -.035em; }
.end-all { grid-area: all; }
.end-next { grid-area: next; }
.end-next .p-img { height: min(66vh, 700px); }
.end-all { align-self: end; justify-self: start; padding: 0 0 clamp(20px, 3vw, 40px) 0; text-decoration: none; font: 400 clamp(30px, 2.8vw, 46px)/1 var(--b-serif); letter-spacing: -.02em; opacity: .66; transition: opacity .3s ease; }
.end-all span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 4px; transition: background-size .5s var(--b-out); }
.end-all:hover, .end-all:focus-visible { opacity: 1; }
.end-all:hover span, .end-all:focus-visible span { background-size: 100% 1px; }
.again { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 14vh auto 0; padding: 12px 18px 130px; background: none; border: 0; color: inherit; font: italic 400 21px/1 var(--b-serif); cursor: pointer; opacity: .82; }
.again svg { width: 18px; height: 26px; overflow: visible; --ink-w: 2; transition: transform .5s var(--b-out); }
.again:hover svg, .again:focus-visible svg { transform: translateY(-6px); }
.again:hover { opacity: 1; }
@media (max-width: 860px) {
  .end { padding-top: 9vh; }
  .end-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "next" "all"; }
  .end-k { font-size: 15vw; padding: 0 0 2.5vh; }
  .end-next .p-img { height: 54vh; height: 54svh; min-height: 340px; }
  .end-all { padding: 3.5vh 0 0; font-size: 30px; }
  .again { margin-top: 10vh; padding-bottom: 110px; }
}


/* =====================================================================
   Covers in depth: the field, title and each layer move at their own
   depth under the pointer (b.js sets --tx/--ty and per-layer translate).
   ===================================================================== */
.kv { perspective: 1600px; }
.kv::before { translate: calc(var(--tx, 0) * -5px) calc(var(--ty, 0) * -5px); scale: 1.02; }
/* will-change is set by b.js only while a card is tilting */
.tl-sh { pointer-events: none; }

/* Saudia cover: Book a Trip, the route card lifting out as the one hero, two tier cards set back behind */
.sa-tier { position: absolute; width: 82%; height: auto; opacity: .82; filter: saturate(.7) brightness(.94) blur(1.2px) drop-shadow(0 26px 40px rgba(40,24,0,.3)); }
.sa-tier.t-r { left: -86%; top: 24%; transform: rotate(-12deg); }
.sa-tier.t-e { left: 104%; top: 40%; transform: rotate(9deg); }
.sa-field .kv-rig .kv-card.sa-pop { left: -9%; top: calc(16.4% + 20px); width: 118%; filter: drop-shadow(0 26px 40px rgba(40,24,0,.42)); }
.sa-field .kv-rig .kv-badge.sa-badge { left: 82%; top: -3.5%; width: 23.2%; filter: drop-shadow(0 18px 24px rgba(40,24,0,.4)); }
/* İşCep hero: the phone sits clear of the cedilla of ş, so it never reads as a stray figure */
.c-hero:not(.sa-field) { --rx: 43cqw; }
@media (max-width: 860px) { .c-hero:not(.sa-field) { --rx: 38cqw; } }

/* =====================================================================
   Landing: a sticky dark field on native scroll. Two lines arrive big and
   centred, blur to sharp, one per scroll step, then clear into Work.
   ===================================================================== */
.land { position: relative; height: 100vh; height: 100svh; } /* one screen: no pinned dead stretch before Work */
.l-stick { position: relative; height: 100vh; height: 100svh; display: grid; place-items: center; padding: 72px var(--gut) 40px; }
.e-beat { grid-area: 1 / 1; margin: 0; max-width: 26ch; text-align: center; font: 400 clamp(46px, 6.4vw, 104px)/1.04 var(--b-serif); letter-spacing: -.028em; color: #efe8dc; }
.b .e-beat { text-wrap: balance; }
.e-beat.b2 { max-width: 22ch; font-size: clamp(42px, 5.6vw, 92px); --st: 40ms; }
.e-beat .w { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(.18em); transition: opacity .7s var(--b-out), filter .9s var(--b-out), transform .9s var(--b-out); transition-delay: calc(var(--i, 0) * var(--st, 60ms)); }
.e-beat.on .w { opacity: 1; filter: blur(0); transform: none; }
.e-beat.off .w { transition-duration: .45s, .45s, .45s; transition-delay: calc(var(--i, 0) * 12ms); filter: blur(10px); transform: translateY(-.14em); }
@media (max-width: 860px) {
  .e-beat { font-size: clamp(34px, 9.4vw, 48px); max-width: 14ch; }
  .e-beat.b2 { font-size: clamp(34px, 9.4vw, 48px); max-width: 14ch; }
}
.rm .land { height: auto; } .rm .l-stick { position: static; height: auto; display: flex; flex-direction: column; justify-content: center; gap: 6vh; min-height: 100vh; min-height: 100svh; }
.rm .e-beat .w, .no-js-beats .e-beat .w { opacity: 1 !important; filter: none !important; transform: none !important; }

/* cover labels: the product big, the domain quietly below it */
.poster .p-cap p.p-d { margin-top: 2px; font: 500 12px/1.2 var(--b-sans); letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.c-tw { display: grid; justify-items: start; }
.c-hero .c-title { font-size: var(--tsz); }
/* the domain sits clear of the deepest descender (the cedilla of ş), measured from the wordmark size */
.b .c-hero .c-dom { margin: calc(var(--tsz) * .2) 0 0 .5vw; font: 500 13px/1.2 var(--b-sans); letter-spacing: .18em; text-transform: uppercase; opacity: .82; }
@media (max-width: 860px) { .b .c-hero .c-dom { margin: calc(var(--tsz) * .2) 0 0 1.5vw; font-size: 12px; } }

@media (max-width: 480px) {
  .c-hero:not(.sa-field) { --rx: calc(38cqw - 24px); }
}
/* İşCep's İ carries a dot well above the cap height: the same rule (highest point clears the header by 24px) needs more room */
@media (min-width: 861px) { .c-hero:not(.sa-field) { --hdr: 132px; } .c-hero.sa-field { --hdr: 24px; } }

/* =====================================================================
   Work grid: the first three cases full width, the next two as equal
   halves (build-b.py sets the size by position). The half card keeps
   its composition, fitted to the narrower frame.
   ===================================================================== */
.work .poster.half .p-img { height: min(44vw, 640px); }
.work .poster.half .p-img.kv { --rx: 46cqw; --ry: 16cqh; --rw: 36cqw; }
.work .poster.half h2 { font-size: clamp(56px, 6vw, 104px); }
@media (max-width: 860px) {
  .work .poster.half .p-img { height: 70vh; min-height: 420px; }
  .work .poster.half .p-img.kv { --rx: 40cqw; --ry: 37cqh; --rw: 52cqw; }
  .work .poster.half h2 { font-size: 20vw; }
}

/* =====================================================================
   "Selected work": a quiet serif line over the grid, far smaller than any
   card title, aligned with the card captions, with the nav's pencil
   underline drawn once as it comes into view. Nav "Work" lands here.
   ===================================================================== */
.work { scroll-margin-top: 0; }
.work .w-head { grid-column: 1 / -1; justify-self: start; position: relative; margin: clamp(96px, 14vh, 140px) 0 clamp(18px, 3vh, 30px) clamp(20px, 3vw, 44px); font: 400 clamp(46px, 6.4vw, 104px)/1.04 var(--b-serif); letter-spacing: -.028em; color: #efe8dc; }
.w-head .w-ul { position: absolute; left: -2px; bottom: -.32em; width: calc(100% + 4px); height: 9px; color: var(--b-amber); --ink-w: 2.1; }
.w-head .w-ul path { transition-duration: 1.2s; transition-delay: .15s; }
@media (max-width: 860px) { .work .w-head { margin: 88px 0 18px 20px; font-size: clamp(34px, 9.4vw, 48px); } }
.e-beat.intro .w { transition-delay: var(--dl, 0s); }