/* case-study pages. Each page sets its own --brand* variables on <body class="case">. */
.case{ --accent:var(--brand); }
:root[data-theme=dark] .case{ --accent:var(--brand-bright); }
.cs-progress{ position:fixed; inset-block-start:0; inset-inline:0; block-size:3px; z-index:60; pointer-events:none; }
.cs-progress i{ display:block; block-size:100%; background:var(--brand-bright); transform:scaleX(0); transform-origin:0 50%; }
:root[dir=rtl] .cs-progress i{ transform-origin:100% 50%; }

/* hero: the client's own colour world, behind the glass header */
.cs-hero{ position:relative; z-index:1; margin-block-start:calc(var(--header-h) * -1); padding-block:calc(var(--header-h) + clamp(32px,5vw,64px)) 0; color:#fff;
  background-color:var(--brand-deep); background-image:radial-gradient(60% 90% at 85% 0%, color-mix(in srgb, var(--brand) 62%, transparent), transparent 70%), radial-gradient(40% 60% at 0% 100%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%); }
.cs-back{ display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.78); font-weight:500; margin-block-end:28px; transition:color .2s; } .cs-back:hover{ color:#fff; }
.ico--back{ transform:scaleX(calc(var(--dir) * -1)); }
.cs-hero__row{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-block-end:22px; }
.cs-logo{ display:inline-grid; place-items:center; padding:14px 22px; border-radius:16px; background:#fff; }
.cs-logo img{ block-size:32px; inline-size:auto; }
.cs-wordmark{ font-family:var(--f-display); font-weight:600; font-size:1.5rem; color:#343028; letter-spacing:-.02em; }
.cs-eyebrow{ font-weight:600; color:rgba(255,255,255,.78); }
.cs-title{ font-size:clamp(2.25rem,5.2vw,4.75rem); line-height:1.05; max-inline-size:20ch; }
:root[dir=rtl] .cs-title{ font-size:clamp(2rem,4.4vw,4rem); line-height:1.3; }
.cs-sub{ margin-block-start:22px; max-inline-size:60ch; font-size:clamp(1.0625rem,1.6vw,1.3125rem); color:rgba(255,255,255,.82); }
.cs-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-block-start:26px; }
.cs-tags li{ padding:6px 16px; border:1px solid rgba(255,255,255,.34); border-radius:999px; font-size:.9375rem; color:#fff; }
.cs-cover{ position:relative; z-index:2; margin-block:clamp(36px,5vw,64px) calc(-1 * clamp(70px,10vw,150px)); }
.cs-poster{ inline-size:100%; block-size:auto; max-inline-size:1000px; margin-inline:auto; aspect-ratio:16/9; object-fit:cover; object-position:50% 40%; border-radius:20px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.14); }

/* browser frame, used for real screenshots */
.cs-browser{ border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--rule); box-shadow:0 30px 70px -36px rgba(24,26,28,.5); }
.cs-win{ display:flex; align-items:center; gap:6px; padding:11px 14px; background:#F1F2F4; }
.cs-win i{ inline-size:10px; block-size:10px; border-radius:50%; background:#D0D3D9; }
.cs-win i:nth-child(1){ background:#FF5F57; } .cs-win i:nth-child(2){ background:#FEBC2E; } .cs-win i:nth-child(3){ background:#28C840; }
.cs-win span{ flex:1; margin-inline:12px; padding:3px 12px; border-radius:99px; background:#fff; color:#6B7075; font-size:.75rem; text-align:center; max-inline-size:340px; margin-inline:auto; }

/* facts */
.cs-facts{ padding-block-start:clamp(100px,13vw,190px); }
.cs-facts dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); border-block:1px solid var(--rule); }
.cs-facts dl > div{ padding-block:24px; padding-inline:0 24px; }
.cs-facts dt{ color:var(--muted); font-size:.875rem; font-weight:500; }
.cs-facts dd{ margin-block-start:6px; font-family:var(--f-display); font-weight:var(--w-d); font-size:1.25rem; line-height:1.3; letter-spacing:var(--track); }

/* sections */
.cs-sec{ padding-block:clamp(56px,8vw,112px); }
.cs-sec--tint{ background:var(--card); }
.cs-sec__head{ display:grid; gap:12px; margin-block-end:clamp(28px,4vw,48px); }
.cs-sec__head h2{ font-size:clamp(1.875rem,3.8vw,3.25rem); max-inline-size:22ch; }
.cs-two{ display:grid; gap:40px 72px; }
@media (min-width:900px){ .cs-two{ grid-template-columns:1.35fr 1fr; } .cs-two--top{ align-items:start; margin-block-start:clamp(28px,4vw,56px); } }
.cs-lead p{ margin-block-end:20px; max-inline-size:60ch; color:var(--muted); }
.cs-lead p:first-child{ font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(1.375rem,2.3vw,2rem); line-height:1.35; letter-spacing:var(--track); color:var(--fg); }
:root[dir=rtl] .cs-lead p:first-child{ line-height:1.7; }
.cs-stats ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-block-start:14px; padding-block:20px; border-block:1px solid var(--rule); }
.cs-stats b{ display:block; font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.1; color:var(--accent); }
.cs-stats span{ color:var(--muted); font-size:.875rem; }
.cs-covered{ margin-block-start:28px; } .cs-covered--wide{ margin-block-start:clamp(36px,5vw,64px); }
.cs-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-block-start:14px; }
.cs-chips li{ padding:8px 16px; border:1px solid var(--rule); border-radius:999px; background:var(--card); }
.cs-sec--tint .cs-chips li{ background:var(--bg); }

.cs-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.cs-card{ padding:28px; background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); display:grid; gap:10px; align-content:start; transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .2s; }
@media (hover:hover) and (pointer:fine){ .cs-card:hover{ transform:translateY(-4px); border-color:var(--brand); } }
.cs-card__dot{ inline-size:14px; block-size:14px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 6px color-mix(in srgb, var(--brand) 18%, transparent); margin-block-end:10px; }
.cs-card h3,.cs-dec h3,.cs-step h3,.cs-goals h3{ font-family:var(--f-display); font-weight:var(--w-d); font-size:1.25rem; line-height:1.25; letter-spacing:var(--track); }
.cs-card p,.cs-dec p,.cs-step p{ color:var(--muted); }
.cs-goals h3{ margin-block-end:14px; }
.cs-goals ul{ display:grid; gap:12px; }
.cs-goals li{ display:flex; gap:12px; align-items:flex-start; }
.cs-goals .ico,.cs-list .ico{ flex:none; margin-block-start:3px; color:var(--accent); }
.cs-persona{ padding:28px; border-radius:var(--r-card); background:var(--brand-soft); color:#181A1C; }
.cs-persona .label{ color:#5F6368; margin-block-end:10px; }

.cs-steps{ display:grid; gap:28px; }
@media (min-width:900px){ .cs-steps{ grid-template-columns:repeat(5,1fr); gap:24px; } }
.cs-step{ display:grid; gap:10px; align-content:start; padding-block-start:22px; border-block-start:2px solid var(--rule); position:relative; }
.cs-step::before{ content:""; position:absolute; inset-block-start:-2px; inset-inline-start:0; inline-size:44px; block-size:2px; background:var(--brand); }
.cs-step__n{ display:grid; place-items:center; inline-size:34px; block-size:34px; border-radius:50%; background:var(--brand); color:var(--brand-ink); font-weight:700; font-size:.9375rem; }

/* tall screenshot that scrolls on hover (and by itself on touch) */
.cs-scroll{ --view:clamp(360px,54vw,640px); max-inline-size:1100px; margin-inline:auto; }
.cs-scroll__view{ block-size:var(--view); overflow:hidden; background:#fff; }
.cs-scroll__view img{ display:block; inline-size:100%; block-size:auto; transform:translateY(0); transition:transform 14s linear; }
@media (hover:hover){ .cs-scroll .cs-browser:hover img{ transform:translateY(calc(-100% + var(--view))); } }
@media (hover:none){ .cs-scroll__view img{ animation:cs-scroll 26s ease-in-out infinite alternate; } }
@keyframes cs-scroll{ to{ transform:translateY(calc(-100% + var(--view))); } }
.cs-hint{ margin-block-start:14px; text-align:center; }
@media (hover:none){ .cs-hint{ display:none; } }

.cs-gallery{ display:grid; gap:20px; grid-template-columns:repeat(12,1fr); }
.cs-shot{ margin:0; grid-column:span 12; border-radius:16px; overflow:hidden; background:var(--brand-soft); border:1px solid var(--rule); }
.cs-shot img{ display:block; inline-size:100%; block-size:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; background:#fff; }
.cs-shot .cs-win{ padding:9px 12px; } .cs-shot .cs-win i{ inline-size:9px; block-size:9px; }
.cs-shot figcaption{ padding:12px 16px; font-size:.875rem; font-weight:500; color:#3B3F44; }
@media (min-width:800px){ .cs-shot--1,.cs-shot--4{ grid-column:span 7; } .cs-shot--2,.cs-shot--3{ grid-column:span 5; } .cs-shot--5,.cs-shot--6{ grid-column:span 6; } }
@media (hover:hover) and (pointer:fine){ .cs-shot img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); } .cs-shot:hover img{ transform:scale(1.03); } .cs-shot{ position:relative; } .cs-shot img{ transform-origin:top; } }

.cs-decs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; }
.cs-dec{ padding:28px; border-radius:var(--r-card); background:var(--bg); border:1px solid var(--rule); display:grid; gap:10px; align-content:start; }
.cs-dec h3::before{ content:""; display:block; inline-size:28px; block-size:4px; border-radius:2px; background:var(--brand); margin-block-end:16px; }

.cs-palette{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; }
.cs-palette li{ display:grid; gap:4px; align-content:start; }
.cs-sw{ display:block; block-size:120px; border-radius:var(--r-card); background:var(--c); border:1px solid var(--rule); margin-block-end:10px; }
.cs-palette b{ font-family:var(--f-display); font-weight:600; letter-spacing:.02em; }
.cs-palette small{ color:var(--muted); }
.cs-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px 24px; margin-block-start:14px; }
.cs-list li{ display:flex; gap:10px; align-items:flex-start; padding-block:12px; border-block-end:1px solid var(--rule); }

.cs-next{ position:relative; display:grid; gap:20px; align-content:space-between; padding:clamp(24px,4vw,48px); border-radius:24px; overflow:hidden; color:#fff;
  background-color:var(--brand-deep); background-image:radial-gradient(60% 90% at 90% 0%, color-mix(in srgb, var(--brand) 60%, transparent), transparent 70%); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
@media (min-width:860px){ .cs-next{ grid-template-columns:1.2fr 1fr; align-items:center; } }
.cs-next .label{ color:rgba(255,255,255,.7); }
.cs-next b{ display:block; margin-block:10px 24px; font-size:clamp(1.75rem,3.4vw,3rem); line-height:1.1; max-inline-size:16ch; font-weight:var(--w-d); }
.cs-next img{ inline-size:100%; max-inline-size:440px; justify-self:end; aspect-ratio:4/3; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.16); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.cs-next__go{ display:inline-flex; align-items:center; gap:8px; font-weight:600; border-block-end:1.5px solid currentColor; padding-block-end:2px; }
.cs-next__go .ico{ transform:scaleX(var(--dir)); }
@media (hover:hover) and (pointer:fine){ .cs-next:hover{ transform:translateY(-4px); } .cs-next:hover img{ transform:scale(1.04) rotate(-1deg); } }

.cs-cta{ padding-block:clamp(64px,9vw,120px); background:var(--brand); color:var(--brand-ink); }
.cs-cta .label{ color:color-mix(in srgb, var(--brand-ink) 78%, transparent); }
.cs-cta h2{ font-size:clamp(2rem,5vw,4.25rem); max-inline-size:16ch; margin-block:12px 32px; }
.cs-cta__row{ display:flex; flex-wrap:wrap; gap:12px; }
.btn--ink-on{ background:var(--brand-ink); color:var(--brand); } .btn--ink-on:hover{ background:#181A1C; color:#fff; }
.btn--line-on{ border-color:currentColor; color:var(--brand-ink); } .btn--line-on:hover{ background:var(--brand-ink); color:var(--brand); border-color:var(--brand-ink); }

.contact--mini{ padding-block:clamp(40px,6vw,72px) 28px; }
.contact--mini .wordmark{ margin-block-start:0; }
.contact--mini .foot{ margin-block-start:40px; }
.foot__link{ display:inline-flex; align-items:center; gap:8px; color:inherit; opacity:.8; transition:opacity .2s; } .foot__link:hover{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .cs-scroll__view img,.cs-card,.cs-next,.cs-next img,.cs-shot img{ transition:none; animation:none; } }

/* tiles in the same row stretch to equal height: the image takes the spare room */
.cs-shot{ display:flex; flex-direction:column; }
.cs-shot img{ flex:1; aspect-ratio:auto; min-block-size:220px; }
.cs-palette b{ inline-size:fit-content; }

/* cover posters are 4:3 compositions: show them whole */
.cs-poster{ aspect-ratio:4/3; max-inline-size:860px; object-position:50% 50%; }

/* split hero: text beside a compact poster, so the feature image is no longer a tall block under the title */
.cs-hero{ padding-block-end:0; }
.cs-hero__grid{ display:grid; gap:36px 64px; align-items:center; padding-block-end:clamp(44px,6vw,92px); }
@media (min-width:1000px){ .cs-hero__grid{ grid-template-columns:1.1fr .9fr; } }
.cs-cover{ margin:0; position:relative; z-index:2; }
.cs-poster{ inline-size:100%; block-size:auto; max-inline-size:none; margin:0; aspect-ratio:4/3; max-block-size:480px; object-fit:cover; }
.cs-title{ font-size:clamp(2rem,3.9vw,3.6rem); max-inline-size:none; }
:root[dir=rtl] .cs-title{ font-size:clamp(1.9rem,3.4vw,3.1rem); }
.cs-facts{ padding-block-start:clamp(28px,4vw,48px); }

/* one screen per row: text beside the screenshot, alternating sides */
.cs-rows{ display:grid; gap:clamp(56px,8vw,112px); }
.cs-row{ display:grid; gap:28px 56px; align-items:center; }
@media (min-width:900px){
  .cs-row{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .cs-row:nth-child(even){ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
  .cs-row:nth-child(even) .cs-row__media{ order:-1; }
}
.cs-row__n{ display:inline-grid; place-items:center; inline-size:42px; block-size:42px; border-radius:50%; background:var(--brand); color:var(--brand-ink); font-weight:700; font-size:.9375rem; margin-block-end:18px; }
.cs-row h3{ font-size:clamp(1.5rem,2.6vw,2.25rem); line-height:1.12; }
:root[dir=rtl] .cs-row h3{ line-height:1.35; }
.cs-row__desc{ margin-block:14px 20px; color:var(--muted); max-inline-size:46ch; }
.cs-row__pts{ display:grid; gap:10px; }
.cs-row__pts li{ display:flex; gap:10px; align-items:flex-start; }
.cs-row__pts .ico{ flex:none; margin-block-start:3px; color:var(--accent); }
.cs-row__media{ margin:0; padding:clamp(14px,2.2vw,30px); border-radius:24px; background:var(--brand-soft); }
.cs-row__media .cs-browser{ box-shadow:0 24px 50px -30px rgba(24,26,28,.55); }
.cs-row__media img{ display:block; inline-size:100%; block-size:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; background:#fff; }
@media (hover:hover) and (pointer:fine){ .cs-row__media img{ transition:transform .7s cubic-bezier(.2,.7,.2,1); transform-origin:top; } .cs-row__media:hover img{ transform:scale(1.03); } }

/* covers are 1600x1383 compositions: always show them whole, at their own ratio, so every case card looks the same */
.cs-poster{ aspect-ratio:1600/1383; max-block-size:none; object-fit:contain; }
.cs-next__text{ display:grid; align-content:center; justify-items:start; }
.cs-next img{ inline-size:100%; block-size:auto; aspect-ratio:1600/1383; max-inline-size:400px; justify-self:end; align-self:center; object-fit:contain; }

/* workflow: brief -> sketch -> foundations -> screens; sketch images appear under step 2 when sketch-N files exist */
.cs-flow{ display:grid; max-inline-size:960px; }
.cs-flow__step{ display:grid; grid-template-columns:44px 1fr; gap:20px; padding-block-end:36px; position:relative; }
.cs-flow__step:not(:last-child)::before{ content:""; position:absolute; inset-block:46px 0; inset-inline-start:21px; inline-size:2px; background:var(--rule); }
.cs-flow__n{ display:grid; place-items:center; inline-size:44px; block-size:44px; border-radius:50%; background:var(--brand); color:var(--brand-ink); font-weight:700; }
.cs-flow h3{ font-family:var(--f-display); font-weight:var(--w-d); font-size:1.375rem; line-height:1.25; margin-block:8px 8px; }
.cs-flow p{ color:var(--muted); max-inline-size:62ch; }
.cs-sketches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-block-start:20px; }
.cs-sketches img{ inline-size:100%; block-size:auto; border-radius:4px; border:1px solid var(--rule); background:var(--card); }